-
{`${ctx().percentage ?? 0}%`}
+
+ {/*
{`${ctx().percentage ?? 0}%`} */}
)}
diff --git a/packages/app/src/components/session-lsp-indicator.tsx b/packages/app/src/components/session-lsp-indicator.tsx
new file mode 100644
index 00000000000..98d6d6dfd76
--- /dev/null
+++ b/packages/app/src/components/session-lsp-indicator.tsx
@@ -0,0 +1,40 @@
+import { createMemo, Show } from "solid-js"
+import { Icon } from "@opencode-ai/ui/icon"
+import { useSync } from "@/context/sync"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+
+export function SessionLspIndicator() {
+ const sync = useSync()
+
+ const lspStats = createMemo(() => {
+ const lsp = sync.data.lsp ?? []
+ const connected = lsp.filter((s) => s.status === "connected").length
+ const hasError = lsp.some((s) => s.status === "error")
+ const total = lsp.length
+ return { connected, hasError, total }
+ })
+
+ const tooltipContent = createMemo(() => {
+ const lsp = sync.data.lsp ?? []
+ if (lsp.length === 0) return "No LSP servers"
+ return lsp.map((s) => s.name).join(", ")
+ })
+
+ return (
+
0}>
+
+
+ 0,
+ }}
+ />
+ {lspStats().connected} LSP
+
+
+
+ )
+}
diff --git a/packages/app/src/components/session-mcp-indicator.tsx b/packages/app/src/components/session-mcp-indicator.tsx
new file mode 100644
index 00000000000..17a6f2e1af0
--- /dev/null
+++ b/packages/app/src/components/session-mcp-indicator.tsx
@@ -0,0 +1,36 @@
+import { createMemo, Show } from "solid-js"
+import { Button } from "@opencode-ai/ui/button"
+import { Icon } from "@opencode-ai/ui/icon"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { useSync } from "@/context/sync"
+import { DialogSelectMcp } from "@/components/dialog-select-mcp"
+
+export function SessionMcpIndicator() {
+ const sync = useSync()
+ const dialog = useDialog()
+
+ const mcpStats = createMemo(() => {
+ const mcp = sync.data.mcp ?? {}
+ const entries = Object.entries(mcp)
+ const enabled = entries.filter(([, status]) => status.status === "connected").length
+ const failed = entries.some(([, status]) => status.status === "failed")
+ const total = entries.length
+ return { enabled, failed, total }
+ })
+
+ return (
+
0}>
+
+
+ )
+}
diff --git a/packages/app/src/components/status-bar.tsx b/packages/app/src/components/status-bar.tsx
new file mode 100644
index 00000000000..d8a88503f20
--- /dev/null
+++ b/packages/app/src/components/status-bar.tsx
@@ -0,0 +1,32 @@
+import { createMemo, Show, type ParentProps } from "solid-js"
+import { usePlatform } from "@/context/platform"
+import { useSync } from "@/context/sync"
+import { useGlobalSync } from "@/context/global-sync"
+
+export function StatusBar(props: ParentProps) {
+ const platform = usePlatform()
+ const sync = useSync()
+ const globalSync = useGlobalSync()
+
+ const directoryDisplay = createMemo(() => {
+ const directory = sync.data.path.directory || ""
+ const home = globalSync.data.path.home || ""
+ const short = home && directory.startsWith(home) ? directory.replace(home, "~") : directory
+ const branch = sync.data.vcs?.branch
+ return branch ? `${short}:${branch}` : short
+ })
+
+ return (
+
+
+
+ v{platform.version}
+
+
+ {directoryDisplay()}
+
+
+
{props.children}
+
+ )
+}
diff --git a/packages/app/src/components/terminal.tsx b/packages/app/src/components/terminal.tsx
index c05ddfbf635..03251fe5f5e 100644
--- a/packages/app/src/components/terminal.tsx
+++ b/packages/app/src/components/terminal.tsx
@@ -1,9 +1,9 @@
import { Ghostty, Terminal as Term, FitAddon } from "ghostty-web"
-import { ComponentProps, onCleanup, onMount, splitProps } from "solid-js"
+import { ComponentProps, createEffect, createSignal, onCleanup, onMount, splitProps } from "solid-js"
import { useSDK } from "@/context/sdk"
import { SerializeAddon } from "@/addons/serialize"
import { LocalPTY } from "@/context/terminal"
-import { usePrefersDark } from "@solid-primitives/media"
+import { resolveThemeVariant, useTheme } from "@opencode-ai/ui/theme"
export interface TerminalProps extends ComponentProps<"div"> {
pty: LocalPTY
@@ -12,8 +12,28 @@ export interface TerminalProps extends ComponentProps<"div"> {
onConnectError?: (error: unknown) => void
}
+type TerminalColors = {
+ background: string
+ foreground: string
+ cursor: string
+}
+
+const DEFAULT_TERMINAL_COLORS: Record<"light" | "dark", TerminalColors> = {
+ light: {
+ background: "#fcfcfc",
+ foreground: "#211e1e",
+ cursor: "#211e1e",
+ },
+ dark: {
+ background: "#191515",
+ foreground: "#d4d4d4",
+ cursor: "#d4d4d4",
+ },
+}
+
export const Terminal = (props: TerminalProps) => {
const sdk = useSDK()
+ const theme = useTheme()
let container!: HTMLDivElement
const [local, others] = splitProps(props, ["pty", "class", "classList", "onConnectError"])
let ws: WebSocket
@@ -22,7 +42,64 @@ export const Terminal = (props: TerminalProps) => {
let serializeAddon: SerializeAddon
let fitAddon: FitAddon
let handleResize: () => void
- const prefersDark = usePrefersDark()
+
+ const getTerminalColors = (): TerminalColors => {
+ const mode = theme.mode()
+ const fallback = DEFAULT_TERMINAL_COLORS[mode]
+ const currentTheme = theme.themes()[theme.themeId()]
+ if (!currentTheme) return fallback
+ const variant = mode === "dark" ? currentTheme.dark : currentTheme.light
+ if (!variant?.seeds) return fallback
+ const resolved = resolveThemeVariant(variant, mode === "dark")
+ const text = resolved["text-base"] ?? fallback.foreground
+ const background = resolved["background-stronger"] ?? fallback.background
+ return {
+ background,
+ foreground: text,
+ cursor: text,
+ }
+ }
+
+ const [terminalColors, setTerminalColors] = createSignal
(getTerminalColors())
+
+ createEffect(() => {
+ const colors = getTerminalColors()
+ setTerminalColors(colors)
+ if (!term) return
+ const setOption = (term as unknown as { setOption?: (key: string, value: TerminalColors) => void }).setOption
+ if (!setOption) return
+ setOption("theme", colors)
+ })
+
+ const focusTerminal = () => term?.focus()
+ const copySelection = () => {
+ if (!term || !term.hasSelection()) return false
+ const selection = term.getSelection()
+ if (!selection) return false
+ const clipboard = navigator.clipboard
+ if (clipboard?.writeText) {
+ clipboard.writeText(selection).catch(() => {})
+ return true
+ }
+ if (!document.body) return false
+ const textarea = document.createElement("textarea")
+ textarea.value = selection
+ textarea.setAttribute("readonly", "")
+ textarea.style.position = "fixed"
+ textarea.style.opacity = "0"
+ document.body.appendChild(textarea)
+ textarea.select()
+ const copied = document.execCommand("copy")
+ document.body.removeChild(textarea)
+ return copied
+ }
+ const handlePointerDown = () => {
+ const activeElement = document.activeElement
+ if (activeElement instanceof HTMLElement && activeElement !== container) {
+ activeElement.blur()
+ }
+ focusTerminal()
+ }
onMount(async () => {
ghostty = await Ghostty.load()
@@ -33,23 +110,22 @@ export const Terminal = (props: TerminalProps) => {
fontSize: 14,
fontFamily: "IBM Plex Mono, monospace",
allowTransparency: true,
- theme: prefersDark()
- ? {
- background: "#191515",
- foreground: "#d4d4d4",
- cursor: "#d4d4d4",
- }
- : {
- background: "#fcfcfc",
- foreground: "#211e1e",
- cursor: "#211e1e",
- },
+ theme: terminalColors(),
scrollback: 10_000,
ghostty,
})
term.attachCustomKeyEventHandler((event) => {
+ const key = event.key.toLowerCase()
+ if (key === "c") {
+ const macCopy = event.metaKey && !event.ctrlKey && !event.altKey
+ const linuxCopy = event.ctrlKey && event.shiftKey && !event.metaKey
+ if ((macCopy || linuxCopy) && copySelection()) {
+ event.preventDefault()
+ return true
+ }
+ }
// allow for ctrl-` to toggle terminal in parent
- if (event.ctrlKey && event.key.toLowerCase() === "`") {
+ if (event.ctrlKey && key === "`") {
event.preventDefault()
return true
}
@@ -62,6 +138,8 @@ export const Terminal = (props: TerminalProps) => {
term.loadAddon(fitAddon)
term.open(container)
+ container.addEventListener("pointerdown", handlePointerDown)
+ focusTerminal()
if (local.pty.buffer) {
if (local.pty.rows && local.pty.cols) {
@@ -75,20 +153,20 @@ export const Terminal = (props: TerminalProps) => {
fitAddon.fit()
}
- container.focus()
-
fitAddon.observeResize()
handleResize = () => fitAddon.fit()
window.addEventListener("resize", handleResize)
term.onResize(async (size) => {
if (ws && ws.readyState === WebSocket.OPEN) {
- await sdk.client.pty.update({
- ptyID: local.pty.id,
- size: {
- cols: size.cols,
- rows: size.rows,
- },
- })
+ await sdk.client.pty
+ .update({
+ ptyID: local.pty.id,
+ size: {
+ cols: size.cols,
+ rows: size.rows,
+ },
+ })
+ .catch(() => {})
}
})
term.onData((data) => {
@@ -106,13 +184,15 @@ export const Terminal = (props: TerminalProps) => {
// })
ws.addEventListener("open", () => {
console.log("WebSocket connected")
- sdk.client.pty.update({
- ptyID: local.pty.id,
- size: {
- cols: term.cols,
- rows: term.rows,
- },
- })
+ sdk.client.pty
+ .update({
+ ptyID: local.pty.id,
+ size: {
+ cols: term.cols,
+ rows: term.rows,
+ },
+ })
+ .catch(() => {})
})
ws.addEventListener("message", (event) => {
term.write(event.data)
@@ -130,6 +210,7 @@ export const Terminal = (props: TerminalProps) => {
if (handleResize) {
window.removeEventListener("resize", handleResize)
}
+ container.removeEventListener("pointerdown", handlePointerDown)
if (serializeAddon && props.onCleanup) {
const buffer = serializeAddon.serialize()
props.onCleanup({
@@ -149,6 +230,7 @@ export const Terminal = (props: TerminalProps) => {
ref={container}
data-component="terminal"
data-prevent-autofocus
+ style={{ "background-color": terminalColors().background }}
classList={{
...(local.classList ?? {}),
"size-full px-6 py-3 font-mono": true,
diff --git a/packages/app/src/context/command.tsx b/packages/app/src/context/command.tsx
index f91a1cf052f..efd83bec861 100644
--- a/packages/app/src/context/command.tsx
+++ b/packages/app/src/context/command.tsx
@@ -26,6 +26,7 @@ export interface CommandOption {
suggested?: boolean
disabled?: boolean
onSelect?: (source?: "palette" | "keybind" | "slash") => void
+ onHighlight?: () => (() => void) | void
}
export function parseKeybind(config: string): Keybind[] {
@@ -115,6 +116,28 @@ export function formatKeybind(config: string): string {
function DialogCommand(props: { options: CommandOption[] }) {
const dialog = useDialog()
+ let cleanup: (() => void) | void
+ let committed = false
+
+ const handleMove = (option: CommandOption | undefined) => {
+ cleanup?.()
+ cleanup = option?.onHighlight?.()
+ }
+
+ const handleSelect = (option: CommandOption | undefined) => {
+ if (option) {
+ committed = true
+ cleanup = undefined
+ dialog.close()
+ option.onSelect?.("palette")
+ }
+ }
+
+ onCleanup(() => {
+ if (!committed) {
+ cleanup?.()
+ }
+ })
return (