tui design refinement (#4809)

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()}