tui design refinement (anomalyco#4809)

Author: thdxr

.opencode/opencode.jsonc

@@ -2,7 +2,7 @@
   "$schema": "https://opencode.ai/config.json",
   "plugin": ["opencode-openai-codex-auth"],
   // "enterprise": {
-  //   "url": "http://localhost:3000",
+  //   "url": "https://enterprise.dev.opencode.ai",
   // },
   "provider": {
     "opencode": {
@@ -11,4 +11,10 @@
       },
     },
   },
+  "mcp": {
+    "exa": {
+      "type": "remote",
+      "url": "https://mcp.exa.ai/mcp",
+    },
+  },
 }

packages/opencode/src/cli/cmd/tui/app.tsx

@@ -452,51 +452,14 @@ function App() {
         }
       }}
     >
-      <box flexDirection="column" flexGrow={1}>
-        <Switch>
-          <Match when={route.data.type === "home"}>
-            <Home />
-          </Match>
-          <Match when={route.data.type === "session"}>
-            <Session />
-          </Match>
-        </Switch>
-      </box>
-      <box
-        height={1}
-        backgroundColor={theme.backgroundPanel}
-        flexDirection="row"
-        justifyContent="space-between"
-        flexShrink={0}
-      >
-        <box flexDirection="row">
-          <box flexDirection="row" backgroundColor={theme.backgroundElement} paddingLeft={1} paddingRight={1}>
-            <text fg={theme.textMuted}>open</text>
-            <text fg={theme.text} attributes={TextAttributes.BOLD}>
-              code{" "}
-            </text>
-            <text fg={theme.textMuted}>v{Installation.VERSION}</text>
-          </box>
-          <box paddingLeft={1} paddingRight={1}>
-            <text fg={theme.textMuted}>
-              {process.cwd().replace(Global.Path.home, "~")}
-              {sync.data.vcs?.branch ? `:${sync.data.vcs.branch}` : ""}
-            </text>
-          </box>
-        </box>
-        <Show when={false}>
-          <box flexDirection="row" flexShrink={0}>
-            <text fg={theme.textMuted} paddingRight={1}>
-              tab
-            </text>
-            <text fg={local.agent.color(local.agent.current().name)}>{""}</text>
-            <text bg={local.agent.color(local.agent.current().name)} fg={theme.background} wrapMode={undefined}>
-              <span style={{ bold: true }}> {local.agent.current().name.toUpperCase()}</span>
-              <span> AGENT </span>
-            </text>
-          </box>
-        </Show>
-      </box>
+      <Switch>
+        <Match when={route.data.type === "home"}>
+          <Home />
+        </Match>
+        <Match when={route.data.type === "session"}>
+          <Session />
+        </Match>
+      </Switch>
     </box>
   )
 }

packages/opencode/src/cli/cmd/tui/component/dialog-provider.tsx

@@ -197,11 +197,24 @@ function ApiMethod(props: ApiMethodProps) {
   const dialog = useDialog()
   const sdk = useSDK()
   const sync = useSync()
+  const { theme } = useTheme()
 
   return (
     <DialogPrompt
       title={props.title}
       placeholder="API key"
+      description={
+        props.providerID === "opencode" ? (
+          <box gap={1}>
+            <text fg={theme.textMuted}>
+              OpenCode Zen gives you access to all the best coding models at the cheapest prices with a single API key.
+            </text>
+            <text>
+              Go to <span style={{ fg: theme.primary }}>https://opencode.ai/zen</span> to get a key
+            </text>
+          </box>
+        ) : undefined
+      }
       onConfirm={async (value) => {
         if (!value) return
         sdk.client.auth.set({

packages/opencode/src/cli/cmd/tui/component/prompt/autocomplete.tsx

@@ -292,6 +292,11 @@ export function Autocomplete(props: {
         description: "open editor",
         onSelect: () => command.trigger("prompt.editor", "prompt"),
       },
+      {
+        display: "/connect",
+        description: "connect to a provider",
+        onSelect: () => command.trigger("provider.connect"),
+      },
       {
         display: "/help",
         description: "show help",

packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx

@@ -637,11 +637,7 @@ export function Prompt(props: PromptProps) {
             flexGrow={1}
           >
             <textarea
-              placeholder={
-                props.showPlaceholder
-                  ? t`${dim(fg(theme.primary)("  → up/down"))} ${dim(fg("#64748b")("history"))} ${dim(fg("#a78bfa")("•"))} ${dim(fg(theme.primary)(keybind.print("input_newline")))} ${dim(fg("#64748b")("newline"))} ${dim(fg("#a78bfa")("•"))} ${dim(fg(theme.primary)(keybind.print("input_submit")))} ${dim(fg("#64748b")("submit"))}`
-                  : undefined
-              }
+              placeholder={props.sessionID ? undefined : "Build anything..."}
               textColor={theme.text}
               focusedTextColor={theme.text}
               minHeight={1}
@@ -781,7 +777,12 @@ export function Prompt(props: PromptProps) {
                   return
                 }
               }}
-              ref={(r: TextareaRenderable) => (input = r)}
+              ref={(r: TextareaRenderable) => {
+                input = r
+                setTimeout(() => {
+                  input.cursorColor = highlight()
+                }, 0)
+              }}
               onMouseDown={(r: MouseEvent) => r.target?.focus()}
               focusedBackgroundColor={theme.backgroundElement}
               cursorColor={highlight()}

packages/opencode/src/cli/cmd/tui/context/directory.ts

@@ -0,0 +1,12 @@
+import { createMemo } from "solid-js"
+import { useSync } from "./sync"
+import { Global } from "@/global"
+
+export function useDirectory() {
+  const sync = useSync()
+  return createMemo(() => {
+    const result = process.cwd().replace(Global.Path.home, "~")
+    if (sync.data.vcs?.branch) return result + ":" + sync.data.vcs.branch
+    return result
+  })
+}

packages/opencode/src/cli/cmd/tui/routes/home.tsx

@@ -8,13 +8,16 @@ import { Locale } from "@/util/locale"
 import { useSync } from "../context/sync"
 import { Toast } from "../ui/toast"
 import { useArgs } from "../context/args"
+import { Global } from "@/global"
+import { useDirectory } from "../context/directory"
 
 // TODO: what is the best way to do this?
 let once = false
 
 export function Home() {
   const sync = useSync()
   const { theme } = useTheme()
+  const mcp = createMemo(() => Object.keys(sync.data.mcp).length > 0)
   const mcpError = createMemo(() => {
     return Object.values(sync.data.mcp).some((x) => x.status === "failed")
   })
@@ -47,31 +50,36 @@ export function Home() {
       once = true
     }
   })
+  const directory = useDirectory()
 
   return (
-    <box flexGrow={1} justifyContent="center" alignItems="center" paddingLeft={2} paddingRight={2} gap={1}>
-      <Logo />
-      <box width={39}>
-        <HelpRow keybind="command_list">Commands</HelpRow>
-        <HelpRow keybind="session_list">List sessions</HelpRow>
-        <HelpRow keybind="model_list">Switch model</HelpRow>
-        <HelpRow keybind="agent_cycle">Switch agent</HelpRow>
+    <>
+      <box flexGrow={1} justifyContent="center" alignItems="center" paddingLeft={2} paddingRight={2} gap={1}>
+        <Logo />
+        <box width="100%" maxWidth={75} zIndex={1000} paddingTop={1}>
+          <Prompt ref={(r) => (prompt = r)} hint={Hint} />
+        </box>
+        <Toast />
       </box>
-      <box width="100%" maxWidth={75} zIndex={1000} paddingTop={1}>
-        <Prompt ref={(r) => (prompt = r)} hint={Hint} />
+      <box paddingTop={1} paddingBottom={1} paddingLeft={2} paddingRight={2} flexDirection="row" flexShrink={0} gap={2}>
+        <text fg={theme.textMuted}>{directory()}</text>
+        <box gap={1} flexDirection="row" flexShrink={0}>
+          <Show when={mcp()}>
+            <text fg={theme.text}>
+              <Switch>
+                <Match when={mcpError()}>
+                  <span style={{ fg: theme.error }}>⊙ </span>
+                </Match>
+                <Match when={true}>
+                  <span style={{ fg: theme.success }}>⊙ </span>
+                </Match>
+              </Switch>
+              {Object.keys(sync.data.mcp).length} MCP
+            </text>
+            <text fg={theme.textMuted}>/status</text>
+          </Show>
+        </box>
       </box>
-      <Toast />
-    </box>
-  )
-}
-
-function HelpRow(props: ParentProps<{ keybind: keyof KeybindsConfig }>) {
-  const keybind = useKeybind()
-  const { theme } = useTheme()
-  return (
-    <box flexDirection="row" justifyContent="space-between" width="100%">
-      <text fg={theme.text}>{props.children}</text>
-      <text fg={theme.primary}>{keybind.print(props.keybind)}</text>
-    </box>
+    </>
   )
 }

packages/opencode/src/cli/cmd/tui/routes/session/footer.tsx

@@ -0,0 +1,37 @@
+import { createMemo, Match, Show, Switch } from "solid-js"
+import { useTheme } from "../../context/theme"
+import { useSync } from "../../context/sync"
+import { useDirectory } from "../../context/directory"
+
+export function Footer() {
+  const { theme } = useTheme()
+  const sync = useSync()
+  const mcp = createMemo(() => Object.keys(sync.data.mcp))
+  const mcpError = createMemo(() => Object.values(sync.data.mcp).some((x) => x.status === "failed"))
+  const lsp = createMemo(() => Object.keys(sync.data.lsp))
+  const directory = useDirectory()
+  return (
+    <box flexDirection="row" justifyContent="space-between" gap={1}>
+      <text fg={theme.textMuted}>{directory()}</text>
+      <box gap={2} flexDirection="row" flexShrink={0}>
+        <text fg={theme.text}>
+          <span style={{ fg: theme.success }}>•</span> {lsp().length} LSP
+        </text>
+        <Show when={mcp().length}>
+          <text fg={theme.text}>
+            <Switch>
+              <Match when={mcpError()}>
+                <span style={{ fg: theme.error }}>⊙ </span>
+              </Match>
+              <Match when={true}>
+                <span style={{ fg: theme.success }}>⊙ </span>
+              </Match>
+            </Switch>
+            {mcp().length} MCP
+          </text>
+        </Show>
+        <text fg={theme.textMuted}>/status</text>
+      </box>
+    </box>
+  )
+}

packages/opencode/src/cli/cmd/tui/routes/session/header.tsx

@@ -3,15 +3,16 @@ import { useRouteData } from "@tui/context/route"
 import { useSync } from "@tui/context/sync"
 import { pipe, sumBy } from "remeda"
 import { useTheme } from "@tui/context/theme"
-import { SplitBorder } from "@tui/component/border"
+import { SplitBorder, EmptyBorder } from "@tui/component/border"
 import type { AssistantMessage, Session } from "@opencode-ai/sdk"
+import { useDirectory } from "../../context/directory"
+import { useKeybind } from "../../context/keybind"
 
 const Title = (props: { session: Accessor<Session> }) => {
   const { theme } = useTheme()
   return (
     <text fg={theme.text}>
-      <span style={{ bold: true, fg: theme.accent }}>#</span>{" "}
-      <span style={{ bold: true }}>{props.session().title}</span>
+      <span style={{ bold: true }}>#</span> <span style={{ bold: true }}>{props.session().title}</span>
     </text>
   )
 }
@@ -53,43 +54,71 @@ export function Header() {
     const model = sync.data.provider.find((x) => x.id === last.providerID)?.models[last.modelID]
     let result = total.toLocaleString()
     if (model?.limit.context) {
-      result += "/" + Math.round((total / model.limit.context) * 100) + "%"
+      result += "  " + Math.round((total / model.limit.context) * 100) + "%"
     }
     return result
   })
 
   const { theme } = useTheme()
+  const keybind = useKeybind()
 
   return (
-    <box paddingLeft={1} paddingRight={1} {...SplitBorder} borderColor={theme.backgroundElement} flexShrink={0}>
-      <Show
-        when={shareEnabled()}
-        fallback={
-          <box flexDirection="row" justifyContent="space-between" gap={1}>
-            <Title session={session} />
-            <ContextInfo context={context} cost={cost} />
-          </box>
-        }
+    <box flexShrink={0}>
+      <box
+        paddingTop={1}
+        paddingBottom={1}
+        paddingLeft={2}
+        paddingRight={1}
+        {...SplitBorder}
+        border={["left"]}
+        borderColor={theme.border}
+        flexShrink={0}
+        backgroundColor={theme.backgroundPanel}
       >
-        <Title session={session} />
-        <box flexDirection="row" justifyContent="space-between" gap={1}>
-          <box flexGrow={1} flexShrink={1}>
-            <Switch>
-              <Match when={session().share?.url}>
-                <text fg={theme.textMuted} wrapMode="word">
-                  {session().share!.url}
-                </text>
-              </Match>
-              <Match when={true}>
-                <text fg={theme.text} wrapMode="word">
-                  /share <span style={{ fg: theme.textMuted }}>to create a shareable link</span>
-                </text>
-              </Match>
-            </Switch>
-          </box>
-          <ContextInfo context={context} cost={cost} />
-        </box>
-      </Show>
+        <Switch>
+          <Match when={session()?.parentID}>
+            <box flexDirection="row" gap={2}>
+              <text fg={theme.text}>
+                <b>Subagent session</b>
+              </text>
+              <text fg={theme.text}>
+                Prev <span style={{ fg: theme.textMuted }}>{keybind.print("session_child_cycle_reverse")}</span>
+              </text>
+              <text fg={theme.text}>
+                Next <span style={{ fg: theme.textMuted }}>{keybind.print("session_child_cycle")}</span>
+              </text>
+              <box flexGrow={1} flexShrink={1} />
+              <ContextInfo context={context} cost={cost} />
+            </box>
+          </Match>
+          <Match when={!shareEnabled()}>
+            <box flexDirection="row" justifyContent="space-between" gap={1}>
+              <Title session={session} />
+              <ContextInfo context={context} cost={cost} />
+            </box>
+          </Match>
+          <Match when={true}>
+            <Title session={session} />
+            <box flexDirection="row" justifyContent="space-between" gap={1}>
+              <box flexGrow={1} flexShrink={1}>
+                <Switch>
+                  <Match when={session().share?.url}>
+                    <text fg={theme.textMuted} wrapMode="word">
+                      {session().share!.url}
+                    </text>
+                  </Match>
+                  <Match when={true}>
+                    <text fg={theme.text} wrapMode="word">
+                      /share <span style={{ fg: theme.textMuted }}>to create a shareable link</span>
+                    </text>
+                  </Match>
+                </Switch>
+              </box>
+              <ContextInfo context={context} cost={cost} />
+            </box>
+          </Match>
+        </Switch>
+      </box>
     </box>
   )
 }