feat: single-page login form with all 3 fields and tab navigation

Replace multi-step wizard with a single form showing Instance Name,
API Key, and URL fields together. Tab cycles between fields, Enter
submits. Validates all fields and tests credentials before saving.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: suryaiyer95

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

@@ -1,9 +1,11 @@
-import { createSignal, Show } from "solid-js"
+import { createSignal, Show, onMount } from "solid-js"
+import { createStore } from "solid-js/store"
+import { TextareaRenderable, TextAttributes } from "@opentui/core"
+import { useKeyboard } from "@opentui/solid"
 import { useDialog } from "@tui/ui/dialog"
 import { useSDK } from "../context/sdk"
 import { useSync } from "@tui/context/sync"
 import { useLocal } from "@tui/context/local"
-import { DialogPrompt } from "../ui/dialog-prompt"
 import { useTheme } from "../context/theme"
 import { AltimateApi } from "@/altimate/api/client"
 import { Filesystem } from "@/util/filesystem"
@@ -14,21 +16,75 @@ export function DialogAltimateLogin() {
   const sync = useSync()
   const local = useLocal()
   const { theme } = useTheme()
-  const [step, setStep] = createSignal<"instance" | "key" | "url">("instance")
-  const [instanceName, setInstanceName] = createSignal("")
-  const [apiKey, setApiKey] = createSignal("")
   const [error, setError] = createSignal("")
   const [validating, setValidating] = createSignal(false)
+  const [store, setStore] = createStore({
+    active: "instance" as "instance" | "key" | "url",
+  })
+
+  let instanceRef: TextareaRenderable
+  let keyRef: TextareaRenderable
+  let urlRef: TextareaRenderable
+
+  const fields = ["instance", "key", "url"] as const
+
+  function focusActive() {
+    setTimeout(() => {
+      const ref = { instance: instanceRef, key: keyRef, url: urlRef }[store.active]
+      if (ref && !ref.isDestroyed) ref.focus()
+    }, 1)
+  }
+
+  useKeyboard((evt) => {
+    if (evt.name === "tab") {
+      const idx = fields.indexOf(store.active)
+      const next = fields[(idx + 1) % fields.length]
+      setStore("active", next)
+      focusActive()
+      evt.preventDefault()
+    }
+    if (evt.name === "return") {
+      submit()
+    }
+  })
+
+  onMount(() => {
+    dialog.setSize("medium")
+    focusActive()
+  })
+
+  async function submit() {
+    const instance = instanceRef.plainText
+    const key = keyRef.plainText
+    const url = urlRef.plainText
+
+    if (!instance) {
+      setError("Instance name is required")
+      setStore("active", "instance")
+      focusActive()
+      return
+    }
+    if (!key) {
+      setError("API key is required")
+      setStore("active", "key")
+      focusActive()
+      return
+    }
+    if (!url) {
+      setError("URL is required")
+      setStore("active", "url")
+      focusActive()
+      return
+    }
 
-  async function validateAndSave(url: string) {
     setError("")
     setValidating(true)
     try {
       const res = await fetch(`${url}/auth_health`, {
         method: "GET",
         headers: {
-          Authorization: `Bearer ${apiKey()}`,
-          "x-tenant": instanceName(),
+          Authorization: `Bearer ${key}`,
+          "x-tenant": instance,
         },
       })
       if (!res.ok) {
@@ -42,7 +98,7 @@ export function DialogAltimateLogin() {
         setValidating(false)
         return
       }
-    } catch (e) {
+    } catch {
       setError(`Connection failed — could not reach ${url}`)
       setValidating(false)
       return
@@ -51,8 +107,8 @@ export function DialogAltimateLogin() {
 
     const creds = {
       altimateUrl: url,
-      altimateInstanceName: instanceName(),
-      altimateApiKey: apiKey(),
+      altimateInstanceName: instance,
+      altimateApiKey: key,
     }
     await Filesystem.writeJson(AltimateApi.credentialsPath(), creds, 0o600)
     await sdk.client.instance.dispose()
@@ -62,57 +118,76 @@ export function DialogAltimateLogin() {
   }
 
   return (
-    <>
-      {step() === "instance" && (
-        <DialogPrompt
-          title="Instance Name"
+    <box paddingLeft={2} paddingRight={2} gap={1}>
+      <box flexDirection="row" justifyContent="space-between">
+        <text attributes={TextAttributes.BOLD} fg={theme.text}>
+          Login to Altimate
+        </text>
+        <text fg={theme.textMuted} onMouseUp={() => dialog.clear()}>
+          esc
+        </text>
+      </box>
+
+      <box>
+        <text fg={store.active === "instance" ? theme.text : theme.textMuted}>Instance Name:</text>
+        <textarea
+          height={3}
+          ref={(val: TextareaRenderable) => (instanceRef = val)}
           placeholder="your-instance"
-          description={() => (
-            <text fg={theme.textMuted}>Enter your Altimate instance (tenant) name</text>
-          )}
-          onConfirm={(value) => {
-            if (!value) return
-            setInstanceName(value)
-            setStep("key")
+          textColor={theme.text}
+          focusedTextColor={theme.text}
+          cursorColor={theme.text}
+          onMouseUp={() => {
+            setStore("active", "instance")
+            focusActive()
           }}
         />
-      )}
-      {step() === "key" && (
-        <DialogPrompt
-          title="API Key"
+      </box>
+
+      <box>
+        <text fg={store.active === "key" ? theme.text : theme.textMuted}>API Key:</text>
+        <textarea
+          height={3}
+          ref={(val: TextareaRenderable) => (keyRef = val)}
           placeholder="your-api-key"
-          description={() => (
-            <text fg={theme.textMuted}>Enter your Altimate API key</text>
-          )}
-          onConfirm={(value) => {
-            if (!value) return
-            setApiKey(value)
-            setStep("url")
+          textColor={theme.text}
+          focusedTextColor={theme.text}
+          cursorColor={theme.text}
+          onMouseUp={() => {
+            setStore("active", "key")
+            focusActive()
           }}
         />
-      )}
-      {step() === "url" && (
-        <DialogPrompt
-          title="Altimate URL"
+      </box>
+
+      <box>
+        <text fg={store.active === "url" ? theme.text : theme.textMuted}>URL:</text>
+        <textarea
+          height={3}
+          ref={(val: TextareaRenderable) => (urlRef = val)}
+          initialValue="https://api.myaltimate.com"
           placeholder="https://api.myaltimate.com"
-          value="https://api.myaltimate.com"
-          description={() => (
-            <box gap={1}>
-              <text fg={theme.textMuted}>Enter your Altimate server URL</text>
-              <Show when={validating()}>
-                <text fg={theme.textMuted}>Validating credentials...</text>
-              </Show>
-              <Show when={error()}>
-                <text fg={theme.error}>{error()}</text>
-              </Show>
-            </box>
-          )}
-          onConfirm={async (value) => {
-            if (!value) return
-            await validateAndSave(value)
+          textColor={theme.text}
+          focusedTextColor={theme.text}
+          cursorColor={theme.text}
+          onMouseUp={() => {
+            setStore("active", "url")
+            focusActive()
           }}
         />
-      )}
-    </>
+      </box>
+
+      <Show when={error()}>
+        <text fg={theme.error}>{error()}</text>
+      </Show>
+      <Show when={validating()}>
+        <text fg={theme.textMuted}>Validating credentials...</text>
+      </Show>
+
+      <text fg={theme.textMuted} paddingBottom={1}>
+        <span style={{ fg: theme.text }}>tab</span> next field{"  "}
+        <span style={{ fg: theme.text }}>enter</span> submit
+      </text>
+    </box>
   )
 }