UI polish: deferred a11y items (stacked on #66)

packages/app/src/components/amicode-default-model.tsx

@@ -85,8 +85,8 @@ export function AmicodeDefaultModel() {
             color: "var(--v2-text-text-base)",
             background: "var(--v2-background-bg-layer-01)",
             border: "1px solid var(--v2-border-border-base)",
-            "border-radius": "6px",
-            padding: "3px 6px",
+            "border-radius": "var(--radius-md)",
+            padding: "4px 8px",
             "max-width": "220px",
             cursor: "pointer",
           }}

packages/app/src/components/amicode-defaults-capsule.tsx

@@ -184,11 +184,11 @@ export function AmicodeDefaultsCapsule(props: { compute?: AmicodeComputeControl
   const radio = (active: boolean): Record<string, string> => ({
     display: "flex",
     "align-items": "center",
-    gap: "7px",
+    gap: "8px",
     width: "100%",
     padding: "6px 10px",
     "font-size": "12px",
-    "font-weight": active ? "650" : "450",
+    "font-weight": active ? "650" : "400",
     "text-align": "left",
     border: active ? "1px solid var(--accent-edge)" : "1px solid var(--v2-border-border-base)",
     "border-radius": "var(--radius-md)",
@@ -208,7 +208,7 @@ export function AmicodeDefaultsCapsule(props: { compute?: AmicodeComputeControl
         style={{
           display: "inline-flex",
           "align-items": "center",
-          gap: "7px",
+          gap: "8px",
           "max-width": "100%",
           "min-width": "0",
           border: hp()
@@ -227,7 +227,7 @@ export function AmicodeDefaultsCapsule(props: { compute?: AmicodeComputeControl
         <span style={{ overflow: "hidden", "text-overflow": "ellipsis", "white-space": "nowrap", "min-width": "0" }}>
           {modelName()} · {hp() ? "Piccolissimo+Altissimo" : "Piccolo"}
         </span>
-        <span aria-hidden="true" style={{ "font-size": "9px", color: "var(--v2-text-text-muted)", "flex-shrink": "0" }}>
+        <span aria-hidden="true" style={{ "font-size": "10px", color: "var(--v2-text-text-muted)", "flex-shrink": "0" }}>
           ▾
         </span>
       </button>
@@ -246,7 +246,7 @@ export function AmicodeDefaultsCapsule(props: { compute?: AmicodeComputeControl
             border: "1px solid var(--v2-border-border-base)",
             "border-radius": "var(--radius-lg)",
             "box-shadow": "0 14px 40px -18px rgba(0, 0, 0, 0.55)",
-            padding: "14px",
+            padding: "16px",
             display: "flex",
             "flex-direction": "column",
             gap: "12px",
@@ -306,7 +306,7 @@ export function AmicodeDefaultsCapsule(props: { compute?: AmicodeComputeControl
                   "align-items": "stretch",
                   gap: "0",
                   "font-size": "12px",
-                  "font-weight": hp() ? "650" : "450",
+                  "font-weight": hp() ? "650" : "400",
                   background: hp() ? "var(--accent-fill-soft)" : "transparent",
                   color: hp() ? "var(--v2-text-text-base)" : "var(--v2-text-text-muted)",
                 }}
@@ -321,7 +321,7 @@ export function AmicodeDefaultsCapsule(props: { compute?: AmicodeComputeControl
                 style={{
                   display: "flex",
                   "align-items": "center",
-                  gap: "7px",
+                  gap: "8px",
                   flex: "1 1 0",
                   "min-width": "0",
                   padding: "6px 10px",
@@ -356,10 +356,10 @@ export function AmicodeDefaultsCapsule(props: { compute?: AmicodeComputeControl
                     border, 10% currentColor tint — state lives in the text color. */}
                 <span
                   style={{
-                    "font-size": "9px",
+                    "font-size": "10px",
                     "font-weight": "600",
                     "letter-spacing": "0.5px",
-                    padding: "4px 7px",
+                    padding: "4px 8px",
                     "line-height": "1",
                     "border-radius": "var(--radius-full)",
                     border: "none",
@@ -384,7 +384,7 @@ export function AmicodeDefaultsCapsule(props: { compute?: AmicodeComputeControl
                     display: "flex",
                     "align-items": "center",
                     "justify-content": "center",
-                    padding: "0 9px",
+                    padding: "0 8px",
                     border: "none",
                     background: "transparent",
                     color: computeOpen() ? "var(--v2-text-text-base)" : "var(--v2-text-text-muted)",

packages/app/src/components/titlebar.tsx

@@ -763,13 +763,13 @@ function TitlebarUpdateIconButton(props: { state: TitlebarUpdatePillState }) {
     <div class="relative isolate mr-3 size-5 shrink-0">
       <button
         type="button"
-        class="group absolute right-0 top-0 z-10 flex h-5 w-5 items-center justify-end overflow-hidden rounded-full bg-v2-icon-icon-accent/20 text-v2-icon-icon-accent transition-[width,background-color] duration-150 ease-out hover:z-30 hover:w-[68px] hover:bg-[color-mix(in_srgb,var(--v2-icon-icon-accent)_20%,var(--v2-background-bg-deep))] focus-visible:z-30 focus-visible:w-[68px] focus-visible:bg-[color-mix(in_srgb,var(--v2-icon-icon-accent)_20%,var(--v2-background-bg-deep))] focus-visible:outline-none disabled:opacity-60 motion-reduce:transition-none"
+        class="group absolute right-0 top-0 z-10 flex h-5 w-5 items-center justify-end overflow-hidden rounded-full bg-[var(--accent-fill-soft)] text-v2-icon-icon-accent shadow-[inset_0_0_0_1px_var(--accent-edge)] transition-[width,background-color] duration-150 ease-out hover:z-30 hover:w-[68px] focus-visible:z-30 focus-visible:w-[68px] focus-visible:outline focus-visible:outline-1 focus-visible:outline-border-focus-base disabled:opacity-60 disabled:cursor-default motion-reduce:transition-none"
         onClick={props.state.onInstall}
         disabled={props.state.installing}
         aria-busy={props.state.installing}
         aria-label={props.state.ariaLabel}
       >
-        <span class="shrink-0 ml-[8px] mr-px text-[11px] text-v2-text-text-accent [font-weight:530] opacity-0 translate-x-2 motion-safe:transition-all duration-150 ease-out group-hover:opacity-100 group-hover:translate-x-0 group-focus-visible:opacity-100 group-focus-visible:translate-x-0 motion-reduce:translate-x-0">
+        <span class="shrink-0 ml-2 mr-px text-[11px] text-v2-text-text-accent font-medium opacity-0 translate-x-2 motion-safe:transition-all duration-150 ease-out group-hover:opacity-100 group-hover:translate-x-0 group-focus-visible:opacity-100 group-focus-visible:translate-x-0 motion-reduce:translate-x-0">
           Update
         </span>
         <span class="flex size-5 shrink-0 items-center justify-center">
@@ -837,7 +837,7 @@ function TabNavItem(props: {
       <ContextMenu.Trigger
         as="div"
         ref={props.ref}
-        class="group relative flex h-7 min-w-24 max-w-60 flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] px-1.5 [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
+        class="group relative flex h-7 min-w-24 max-w-60 flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-md bg-[var(--tab-bg)] px-1.5 [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
         data-active={props.active}
         onMouseDown={(event: MouseEvent) => {
           if (event.button !== 1) return
@@ -1038,7 +1038,7 @@ function ChannelIndicator() {
   return (
     <>
       {["beta", "dev"].includes(import.meta.env.VITE_OPENCODE_CHANNEL) && (
-        <div class="bg-icon-interactive-base text-[#FFF] font-medium px-2 rounded-sm uppercase font-mono">
+        <div class="bg-icon-interactive-base text-white font-medium px-2 rounded-sm uppercase font-mono">
           {import.meta.env.VITE_OPENCODE_CHANNEL.toUpperCase()}
         </div>
       )}

packages/app/src/components/vault-panel.tsx

@@ -7,6 +7,7 @@
 // Opened by the rail's vault button, the command palette, or a context-tree
 // click on a vault node (which lands directly on that file).
 import { For, Show, createEffect, createMemo, createResource, createSignal, onCleanup } from "solid-js"
+import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Markdown } from "@opencode-ai/ui/markdown"
 import { useLanguage } from "@/context/language"
@@ -135,9 +136,12 @@ export function VaultPanel() {
               aria-expanded={expanded().has(sub.path)}
               onClick={() => toggleDir(sub.path)}
             >
-              <span class="inline-block w-3 text-text-weak" aria-hidden="true">
-                {expanded().has(sub.path) ? "▾" : "▸"}
-              </span>
+              <Icon
+                name={expanded().has(sub.path) ? "chevron-down" : "chevron-right"}
+                size="small"
+                class="shrink-0 text-text-weak"
+                aria-hidden="true"
+              />
               <span class="truncate">{sub.name}</span>
             </button>
             <Show when={expanded().has(sub.path)}>{renderDir(sub, depth + 1)}</Show>
@@ -204,7 +208,7 @@ export function VaultPanel() {
                     type="button"
                     class="cursor-pointer rounded-md border px-2 py-0.5 text-12-regular focus-visible:outline focus-visible:outline-1 focus-visible:outline-border-focus-base"
                     classList={{
-                      "border-border-strong-base text-text-base bg-background-stronger": mount() === m.id,
+                      "border-[var(--accent-edge)] text-text-base bg-[var(--accent-fill-soft)]": mount() === m.id,
                       "border-border-weaker-base text-text-weak hover:bg-background-stronger": mount() !== m.id,
                     }}
                     aria-pressed={mount() === m.id}

packages/app/src/design-polish.css

@@ -49,15 +49,19 @@
 :root,
 [data-color-scheme="light"] {
   --accent-fill-soft: color-mix(in srgb, var(--accent) 18%, transparent);
+  /* one step past soft — the hover of an already-soft-filled control */
+  --accent-fill-hover: color-mix(in srgb, var(--accent) 26%, transparent);
   --accent-edge: var(--v2-border-border-strong);
 }
 [data-color-scheme="dark"] {
   --accent-fill-soft: color-mix(in srgb, var(--accent) 10%, transparent);
+  --accent-fill-hover: color-mix(in srgb, var(--accent) 16%, transparent);
   --accent-edge: color-mix(in srgb, var(--accent) 45%, var(--v2-border-border-base));
 }
 @media (prefers-color-scheme: dark) {
   :root:not([data-color-scheme="light"]) {
     --accent-fill-soft: color-mix(in srgb, var(--accent) 10%, transparent);
+    --accent-fill-hover: color-mix(in srgb, var(--accent) 16%, transparent);
     --accent-edge: color-mix(in srgb, var(--accent) 45%, var(--v2-border-border-base));
   }
 }

packages/app/src/i18n/en.ts

@@ -735,7 +735,7 @@ export const dict = {
   "amicode.contextTree.collapse": "Collapse context tree",
   "amicode.contextTree.expand": "Expand context tree",
   "amicode.contextTree.canvasLabel":
-    "The agent's context tree — turns branch from amico; click a file node to open it",
+    "The agent's context tree — turns branch from amico. Click a file node to open it; arrow keys walk the nodes and Enter opens the focused one",
   "amicode.vault.title": "Vault",
   "amicode.vault.open": "Open vault",
   "amicode.vault.close": "Close vault panel",

packages/app/src/pages/session/context-tree-panel.tsx

@@ -18,6 +18,7 @@ import {
   contextTreeKindColor,
   type ContextTreeEngine,
   type ContextTreeKind,
+  type ContextTreeNodeInput,
   type ContextTreeScheme,
   type ContextTreeSelection,
 } from "@opencode-ai/ui/context-tree-engine"
@@ -168,11 +169,66 @@ function ContextTreeFrame(props: { sessionID: string }) {
   window.addEventListener("amicode:brain-hover", onToolHover)
   onCleanup(() => window.removeEventListener("amicode:brain-hover", onToolHover))
 
+  const tree = createMemo(() => buildContextTree(turns()))
   createEffect(() => {
     const brain = engine()
     if (!brain) return
-    brain.setTree(buildContextTree(turns()))
+    brain.setTree(tree())
   })
+
+  // keyboard navigation: a flat traversal of the same tree the canvas draws
+  // (turns then their leaves, in order); arrows walk it, Enter/Space opens
+  const flatNodes = createMemo(() => {
+    const out: ContextTreeSelection[] = []
+    const walk = (n: ContextTreeNodeInput) => {
+      if (n.kind !== "root") out.push({ id: n.id, label: n.label, kind: n.kind, path: n.path, vault: n.vault })
+      for (const c of n.children ?? []) walk(c)
+    }
+    walk(tree())
+    return out
+  })
+  const [kbIndex, setKbIndex] = createSignal(-1)
+  const [announce, setAnnounce] = createSignal("")
+  const kbFocus = (index: number) => {
+    const list = flatNodes()
+    if (!list.length) return
+    const next = Math.min(Math.max(index, 0), list.length - 1)
+    setKbIndex(next)
+    const node = list[next]
+    engine()?.focus(node.id)
+    setAnnounce(`${node.label} — ${node.kind}${node.path ? ", press Enter to open" : ""}`)
+  }
+  const onCanvasKeyDown = (e: KeyboardEvent) => {
+    const list = flatNodes()
+    if (!list.length) return
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        e.preventDefault()
+        kbFocus(kbIndex() + 1)
+        return
+      case "ArrowLeft":
+      case "ArrowUp":
+        e.preventDefault()
+        kbFocus(kbIndex() - 1)
+        return
+      case "Home":
+        e.preventDefault()
+        kbFocus(0)
+        return
+      case "End":
+        e.preventDefault()
+        kbFocus(list.length - 1)
+        return
+      case "Enter":
+      case " ": {
+        if (kbIndex() < 0) return
+        e.preventDefault()
+        onSelect(list[kbIndex()])
+        return
+      }
+    }
+  }
   // folded away — stop burning frames
   createEffect(() => {
     const brain = engine()
@@ -199,7 +255,7 @@ function ContextTreeFrame(props: { sessionID: string }) {
           {language.t("amicode.contextTree.count", { count: itemCount() })}
         </div>
         <Show when={open()}>
-          <div class="ml-2 hidden items-center gap-3 sm:flex" aria-hidden="true">
+          <div class="ml-2 hidden items-center gap-3 sm:flex">
             <For each={LEGEND}>
               {(item) => (
                 <div class="flex items-center gap-1.5">
@@ -244,11 +300,18 @@ function ContextTreeFrame(props: { sessionID: string }) {
               }),
             )
           }
-          role="img"
+          role="application"
+          aria-roledescription="context tree"
           aria-label={language.t("amicode.contextTree.canvasLabel")}
-          class="block h-full w-full"
+          tabIndex={0}
+          onKeyDown={onCanvasKeyDown}
+          onBlur={() => setKbIndex(-1)}
+          class="block h-full w-full focus-visible:outline focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-border-focus-base"
         />
       </div>
+      <div aria-live="polite" class="sr-only">
+        {announce()}
+      </div>
       </div>
     </Show>
   )