From 99f2effc5a37c627e89e3505d2b02d22e1c00e52 Mon Sep 17 00:00:00 2001
From: kate bonner <katebonner277@gmail.com>
Date: Mon, 27 Jul 2026 16:42:39 -0400
Subject: [PATCH 1/3] polish(amicode): design-system + a11y audit sweep across
 the UI surfaces

Multi-agent audit (48 findings, adversarially triaged) against the
amicode design system and ui-ux-pro-max critical checklists. Fixes:

Tokens: update pill off the grey-on-light icon-accent color-mix fills
onto --accent-fill-soft/--accent-edge; connections project rows off
banned v1 vars (--border-weak-base/--surface-base); ask-card selected
edge onto --accent-edge; new --accent-fill-hover token replaces two
hand-rolled accent mixes; titlebar tabs onto the radius scale; channel
badge raw hex dropped; run-gallery scrim into the 40-60% band.

Type scale: off-scale weights (450/530/550/640/750/800) and sizes
(9/11.5/12.5/15px) across solver-toggle, defaults-capsule, amicode.css,
home-cards onto the sanctioned scales; off-grid paddings/gaps onto the
4px grid.

Interaction: bounds-moving press/hover transforms (translateY) replaced
with elevation/fill feedback; hover+focus-visible states added to yellow
CTA, action cards, rail inspect/retry, starter chips, suggestion rows;
busy save button gets wait cursor + reduced emphasis; sub-150ms
transitions raised; MeetAmico shine + lift gated on reduced motion.

A11y: onboarding-wizard inputs no longer strip the focus outline;
action cards and MeetAmico are keyboard-operable (role, tabIndex,
Enter/Space); profile inputs get real labels; edit-profile toggle gets
aria-label/expanded; vault-panel text-glyph arrows replaced with the
icon family; context-tree legend unhidden from AT; vault mount chips
join the accent selected pattern.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../src/components/amicode-default-model.tsx  |  4 +-
 .../components/amicode-defaults-capsule.tsx   | 20 ++---
 packages/app/src/components/titlebar.tsx      |  8 +-
 packages/app/src/components/vault-panel.tsx   | 12 ++-
 packages/app/src/design-polish.css            |  4 +
 .../src/pages/session/context-tree-panel.tsx  |  2 +-
 packages/ui/src/amicode/amicode.css           | 83 +++++++++++++++----
 packages/ui/src/amicode/ask-card.tsx          |  6 +-
 packages/ui/src/amicode/connections-tab.tsx   |  4 +-
 packages/ui/src/amicode/entity-rail.tsx       |  2 +-
 packages/ui/src/amicode/getting-started.tsx   |  5 +-
 packages/ui/src/amicode/home-cards.tsx        | 52 +++++++++---
 packages/ui/src/amicode/onboarding-wizard.tsx |  3 +-
 packages/ui/src/amicode/run-gallery.tsx       |  2 +-
 packages/ui/src/amicode/solver-toggle.tsx     | 12 +--
 15 files changed, 152 insertions(+), 67 deletions(-)

diff --git a/packages/app/src/components/amicode-default-model.tsx b/packages/app/src/components/amicode-default-model.tsx
index 4bebebaf1..2e7cd6c38 100644
--- a/packages/app/src/components/amicode-default-model.tsx
+++ b/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",
           }}
diff --git a/packages/app/src/components/amicode-defaults-capsule.tsx b/packages/app/src/components/amicode-defaults-capsule.tsx
index 019ad9309..cf18d3f54 100644
--- a/packages/app/src/components/amicode-defaults-capsule.tsx
+++ b/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)",
diff --git a/packages/app/src/components/titlebar.tsx b/packages/app/src/components/titlebar.tsx
index 8669dcac5..b3eb54112 100644
--- a/packages/app/src/components/titlebar.tsx
+++ b/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>
       )}
diff --git a/packages/app/src/components/vault-panel.tsx b/packages/app/src/components/vault-panel.tsx
index e4c9d57bc..d55cefa68 100644
--- a/packages/app/src/components/vault-panel.tsx
+++ b/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}
diff --git a/packages/app/src/design-polish.css b/packages/app/src/design-polish.css
index cf8d7cc81..12d292627 100644
--- a/packages/app/src/design-polish.css
+++ b/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));
   }
 }
diff --git a/packages/app/src/pages/session/context-tree-panel.tsx b/packages/app/src/pages/session/context-tree-panel.tsx
index ccfc251d1..da177091d 100644
--- a/packages/app/src/pages/session/context-tree-panel.tsx
+++ b/packages/app/src/pages/session/context-tree-panel.tsx
@@ -199,7 +199,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">
diff --git a/packages/ui/src/amicode/amicode.css b/packages/ui/src/amicode/amicode.css
index aeb0afe69..3047572be 100644
--- a/packages/ui/src/amicode/amicode.css
+++ b/packages/ui/src/amicode/amicode.css
@@ -40,7 +40,7 @@
 }
 .amc-wordmark {
   font-size: 11px;
-  font-weight: 800;
+  font-weight: 700;
   letter-spacing: 0.11em;
   color: var(--v2-text-text-accent);
 }
@@ -130,15 +130,14 @@
   border-radius: var(--radius-md);
   background: var(--v2-background-bg-layer-01);
   padding: 4px 8px;
-  font-size: 12.5px;
-  line-height: 17px;
+  font-size: 12px;
+  line-height: 16px;
   color: var(--v2-text-text-base);
   box-shadow: var(--v2-elevation-elements, 0 0.5px 0.5px rgba(0, 0, 0, 0.2));
   transition:
     background 0.16s ease,
     border-color 0.16s ease,
-    box-shadow 0.16s ease,
-    transform 0.12s ease;
+    box-shadow 0.16s ease;
 }
 [data-component="amicode-card"][data-clickable="true"] {
   cursor: pointer;
@@ -149,7 +148,8 @@
   box-shadow: var(--v2-elevation-raised, 0 1px 2px rgba(0, 0, 0, 0.25));
 }
 [data-component="amicode-card"][data-clickable="true"]:active {
-  transform: translateY(0.5px);
+  /* pressed = elevation drop, never a bounds-moving transform */
+  box-shadow: none;
 }
 [data-component="amicode-card"]:focus-visible {
   outline: 1px solid var(--v2-border-border-focus);
@@ -176,7 +176,7 @@
   overflow: hidden;
 }
 [data-component="amicode-card"] .amc-label {
-  font-weight: 640;
+  font-weight: 650;
   color: var(--v2-text-text-base);
   white-space: nowrap;
   flex-shrink: 0;
@@ -210,7 +210,7 @@
 [data-component="amicode-card"] .amc-diff .k { color: var(--v2-text-text-muted); }
 [data-component="amicode-card"] .amc-diff .v {
   font-family: var(--font-family-mono, ui-monospace, monospace);
-  font-size: 11.5px;
+  font-size: 11px;
   color: var(--v2-text-text-base);
 }
 [data-component="amicode-card"] .amc-diff .v.from { color: var(--v2-text-text-faint); }
@@ -283,7 +283,7 @@
 }
 [data-component="amicode-entity-view"] .amc-tier {
   font-family: var(--font-family-mono, ui-monospace, monospace);
-  font-size: 9px;
+  font-size: 10px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   font-weight: 600;
@@ -312,7 +312,7 @@
   gap: 10px;
   margin: 12px 4px 8px;
   font-family: var(--font-family-mono, ui-monospace, monospace);
-  font-size: 9px;
+  font-size: 10px;
   letter-spacing: 0.16em;
   text-transform: uppercase;
   color: var(--v2-text-text-faint);
@@ -430,7 +430,7 @@
 [data-component="amicode-entity-view"] .amc-ev-hist-summary {
   flex: 1;
   min-width: 0;
-  font-size: 11.5px;
+  font-size: 11px;
   color: var(--v2-text-text-faint);
   overflow-wrap: anywhere;
 }
@@ -439,8 +439,8 @@
   background: none;
   border: none;
   padding: 2px 4px;
-  font-size: 11.5px;
-  font-weight: 550;
+  font-size: 11px;
+  font-weight: 600;
   color: var(--v2-text-text-accent);
   cursor: pointer;
 }
@@ -679,6 +679,20 @@
   height: 14px;
   flex-shrink: 0;
 }
+[data-slot="amicode-rail-inspect"],
+[data-slot="amicode-rail-retry"] {
+  transition: background 0.16s ease, border-color 0.16s ease;
+}
+[data-slot="amicode-rail-inspect"]:hover,
+[data-slot="amicode-rail-retry"]:hover {
+  background: var(--v2-background-bg-layer-02);
+  border-color: var(--v2-border-border-strong);
+}
+[data-slot="amicode-rail-inspect"]:focus-visible,
+[data-slot="amicode-rail-retry"]:focus-visible {
+  outline: 1px solid var(--v2-border-border-focus);
+  outline-offset: 1px;
+}
 [data-component="amicode-entity-rail"] button.amc-rail-chip:hover {
   border-color: var(--v2-border-border-strong);
   background: var(--v2-background-bg-layer-02);
@@ -707,7 +721,7 @@
   background: var(--v2-background-bg-layer-03) !important;
 }
 [data-component="amicode-ask-card"] [data-slot="amicode-ask-option"]:not(:disabled):active {
-  transform: translateY(0.5px);
+  background: var(--accent-fill-soft) !important;
 }
 
 /* run window: subtle hover to signal it opens the Run entity */
@@ -970,7 +984,46 @@
   color: var(--v2-text-text-base); font-size: 11px; font-weight: 600; padding: 4px 12px; cursor: pointer;
 }
 [data-component="amicode-widget-preview"] .amc-wp-pin:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--accent) 20%, var(--v2-background-bg-layer-02));
+  background: var(--accent-fill-hover);
+}
+
+/* home cards: interaction states the inline styles can't express. The yellow
+ * CTA's feedback is elevation + opacity — the fill itself never changes hue. */
+[data-slot="amicode-card-meet-cta"]:hover {
+  box-shadow: 0 3px 14px var(--accent-fill-hover);
+}
+[data-slot="amicode-card-meet-cta"]:active {
+  opacity: 0.9;
+}
+[data-slot="amicode-card-meet-cta"]:focus-visible,
+[data-component="amicode-card-meet"]:focus-visible {
+  outline: 2px solid var(--v2-border-border-focus);
+  outline-offset: 2px;
+}
+[data-component="amicode-action-card"][data-clickable="true"] {
+  transition: background 0.16s ease, border-color 0.16s ease;
+}
+[data-component="amicode-action-card"][data-clickable="true"]:hover {
+  background: var(--v2-background-bg-layer-02);
+  border-color: var(--v2-border-border-strong);
+}
+[data-component="amicode-action-card"][data-clickable="true"]:focus-visible {
+  outline: 1px solid var(--v2-border-border-focus);
+  outline-offset: 2px;
+}
+[data-component="amc-secondary-btn"] {
+  transition: background 0.16s ease, border-color 0.16s ease;
+}
+[data-component="amc-secondary-btn"]:hover {
+  background: var(--accent-fill-soft);
+}
+[data-component="amc-secondary-btn"]:focus-visible,
+[data-slot="amicode-you-suggestion"]:focus-visible {
+  outline: 1px solid var(--v2-border-border-focus);
+  outline-offset: 1px;
+}
+[data-slot="amicode-you-suggestion"]:hover {
+  background: var(--v2-background-bg-layer-02);
 }
 [data-component="amicode-widget-preview"] .amc-wp-pin:disabled { cursor: default; }
 [data-component="amicode-widget-preview"] .amc-wp-pin[data-state="pinned"] {
diff --git a/packages/ui/src/amicode/ask-card.tsx b/packages/ui/src/amicode/ask-card.tsx
index df6f9d623..82f2b3ee9 100644
--- a/packages/ui/src/amicode/ask-card.tsx
+++ b/packages/ui/src/amicode/ask-card.tsx
@@ -74,13 +74,11 @@ export function AmicodeAskCard(props: { ask: AskInput; messageID?: string; sessi
                 gap: "2px",
                 "text-align": "left",
                 border:
-                  picked() === option
-                    ? "1px solid var(--v2-icon-icon-accent)"
-                    : "1px solid var(--v2-border-border-strong)",
+                  picked() === option ? "1px solid var(--accent-edge)" : "1px solid var(--v2-border-border-strong)",
                 "border-radius": "var(--radius-md)",
                 background: "var(--v2-background-bg-layer-02)",
                 color: "var(--v2-text-text-base)",
-                padding: "3px 10px",
+                padding: "4px 8px",
                 "font-size": "12px",
                 "line-height": "16px",
                 cursor: active() ? "pointer" : "default",
diff --git a/packages/ui/src/amicode/connections-tab.tsx b/packages/ui/src/amicode/connections-tab.tsx
index 1a76b55fe..3e1906b91 100644
--- a/packages/ui/src/amicode/connections-tab.tsx
+++ b/packages/ui/src/amicode/connections-tab.tsx
@@ -318,8 +318,8 @@ export function ConnectionCard(props: {
                   data-slot="amicode-connection-project"
                   data-selected={selected()}
                   style={{
-                    "border-color": selected() ? "var(--accent-edge)" : "var(--border-weak-base)",
-                    "background-color": selected() ? "var(--accent-fill-soft)" : "var(--surface-base)",
+                    "border-color": selected() ? "var(--accent-edge)" : "var(--v2-border-border-base)",
+                    "background-color": selected() ? "var(--accent-fill-soft)" : "var(--v2-background-bg-layer-01)",
                   }}
                 >
                   <input
diff --git a/packages/ui/src/amicode/entity-rail.tsx b/packages/ui/src/amicode/entity-rail.tsx
index 7fb4a0e20..e859e30da 100644
--- a/packages/ui/src/amicode/entity-rail.tsx
+++ b/packages/ui/src/amicode/entity-rail.tsx
@@ -268,7 +268,7 @@ export function AmicodeEntityRail(props: {
                   "border-radius": "var(--radius-md)",
                   background: "none",
                   color: "var(--v2-text-text-accent)",
-                  padding: "1px 8px",
+                  padding: "2px 8px",
                   font: "inherit",
                   "font-weight": "600",
                   cursor: "pointer",
diff --git a/packages/ui/src/amicode/getting-started.tsx b/packages/ui/src/amicode/getting-started.tsx
index 533b7de34..e7b1dfd8e 100644
--- a/packages/ui/src/amicode/getting-started.tsx
+++ b/packages/ui/src/amicode/getting-started.tsx
@@ -61,7 +61,7 @@ export function AmicodeStarterChips(props: {
   // The chips' OWN wrapping row (Kate: separate container from the folder
   // picker) — centered, quiet pills. Class-based styling so hover works.
   const pill =
-    "rounded-full border border-[var(--v2-border-border-strong)] bg-[var(--v2-background-bg-layer-02)] px-3 py-1 text-[12px] leading-4 whitespace-nowrap text-[var(--v2-text-text-muted)] cursor-pointer transition-colors duration-120 hover:text-[var(--v2-text-text-base)] hover:bg-[var(--v2-background-bg-layer-03)]"
+    "rounded-full border border-[var(--v2-border-border-strong)] bg-[var(--v2-background-bg-layer-02)] px-3 py-1 text-[12px] leading-4 whitespace-nowrap text-[var(--v2-text-text-muted)] cursor-pointer transition-colors duration-150 hover:text-[var(--v2-text-text-base)] hover:bg-[var(--v2-background-bg-layer-03)]"
   return (
     <div
       data-component="amicode-starter-chips"
@@ -152,9 +152,10 @@ export function AmicodeGettingStarted(props: {
             <button
               type="button"
               data-slot="amicode-gs-starter"
+              data-component="amc-secondary-btn"
               onClick={() => props.onStart(starter.prompt)}
               style={{
-                border: "1px solid var(--v2-icon-icon-accent)",
+                border: "1px solid var(--accent-edge)",
                 "border-radius": "var(--radius-md)",
                 background: "var(--v2-background-bg-layer-02)",
                 color: "var(--v2-text-text-base)",
diff --git a/packages/ui/src/amicode/home-cards.tsx b/packages/ui/src/amicode/home-cards.tsx
index 49b4b1865..358b7571e 100644
--- a/packages/ui/src/amicode/home-cards.tsx
+++ b/packages/ui/src/amicode/home-cards.tsx
@@ -133,6 +133,10 @@ const CARD: JSX.CSSProperties = {
   background: "var(--v2-background-bg-layer-01)",
   padding: "14px 16px",
 }
+// inline styles can't express @media — read the preference once; a mid-session
+// OS toggle settles on next mount, which is fine for decorative motion
+const reduceMotion = typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches
+
 const HERO_CARD: JSX.CSSProperties = { ...CARD }
 const EYEBROW: JSX.CSSProperties = {
   "font-size": "10px",
@@ -168,14 +172,15 @@ function PrimaryButton(props: { children: JSX.Element; onClick: () => void; slot
     <button
       type="button"
       data-slot={props.slot}
+      data-component="amc-secondary-btn"
       onClick={() => props.onClick()}
       style={{
         "align-self": "flex-start",
-        border: "1px solid var(--v2-icon-icon-accent)",
+        border: "1px solid var(--accent-edge)",
         "border-radius": "var(--radius-md)",
         background: "var(--v2-background-bg-layer-02)",
         color: "var(--v2-text-text-base)",
-        padding: "5px 12px",
+        padding: "4px 12px",
         "font-size": "12px",
         "line-height": "16px",
         cursor: "pointer",
@@ -212,16 +217,19 @@ function MeetAmicoCard(props: { onStart: (prompt: string) => void }) {
         props.onStart("")
       }}
       onKeyDown={(e) => {
-        if (e.key === "Enter" && !(e.target as HTMLElement).closest("button")) props.onStart("")
+        if ((e.key === "Enter" || e.key === " ") && !(e.target as HTMLElement).closest("button")) {
+          e.preventDefault()
+          props.onStart("")
+        }
       }}
       style={{
         ...HERO_CARD,
         position: "relative",
         overflow: "hidden",
         cursor: "pointer",
-        transform: hover() ? "translateY(-3px)" : "none",
+        // hover = elevation only — a bounds-moving lift jitters the grid
         "box-shadow": hover() ? "var(--v2-elevation-raised, 0 6px 20px rgba(0,0,0,0.18))" : "none",
-        transition: "transform 0.18s ease, box-shadow 0.18s ease",
+        transition: reduceMotion ? "none" : "box-shadow 0.18s ease",
       }}
     >
       {/* gold shine: sweeps on hover-in; opacity-fades + snaps back (transform
@@ -234,10 +242,10 @@ function MeetAmicoCard(props: { onStart: (prompt: string) => void }) {
           "pointer-events": "none",
           width: "55%",
           background:
-            "linear-gradient(105deg, transparent 0%, color-mix(in srgb, var(--v2-icon-icon-accent) 30%, transparent) 50%, transparent 100%)",
-          opacity: hover() ? "1" : "0",
-          transform: hover() ? "translateX(280%)" : "translateX(-160%)",
-          transition: hover() ? "transform 0.85s ease, opacity 0.12s ease" : "opacity 0.3s ease",
+            "linear-gradient(105deg, transparent 0%, var(--accent-fill-hover) 50%, transparent 100%)",
+          opacity: hover() && !reduceMotion ? "1" : "0",
+          transform: hover() && !reduceMotion ? "translateX(280%)" : "translateX(-160%)",
+          transition: reduceMotion ? "none" : hover() ? "transform 0.85s ease, opacity 0.12s ease" : "opacity 0.3s ease",
         }}
       />
       <div style={EYEBROW}>Meet Amico</div>
@@ -295,9 +303,9 @@ function MeetAmicoCard(props: { onStart: (prompt: string) => void }) {
           cursor: "pointer",
           background: "var(--accent, #fff676)",
           color: "var(--accent-ink, #111214)",
-          "font-size": "15px",
+          "font-size": "16px",
           "font-weight": "650",
-          "box-shadow": "0 2px 10px color-mix(in srgb, var(--v2-icon-icon-accent) 35%, transparent)",
+          "box-shadow": "0 2px 10px var(--accent-fill-hover)",
         }}
       >
         Open chat
@@ -550,6 +558,8 @@ function AboutYouCard(props: {
             type="button"
             data-slot="amicode-card-you-edit"
             title={props.onSave ? (editing() ? "Cancel editing" : "Edit profile") : "Edit profile in chat"}
+            aria-label={props.onSave ? (editing() ? "Cancel editing" : "Edit profile") : "Edit profile in chat"}
+            aria-expanded={editing()}
             onClick={() =>
               props.onSave ? (editing() ? (setEditing(false), setSuggestions([])) : beginEdit()) : props.onEdit()
             }
@@ -682,6 +692,7 @@ function AboutYouCard(props: {
                         style={FIELD}
                         value={draft().name}
                         placeholder="Name"
+                        aria-label="Name"
                         onInput={(e) => setDraft({ ...draft(), name: e.currentTarget.value })}
                         onKeyDown={pasteFallback((v) => setDraft({ ...draft(), name: v }))}
                       />
@@ -748,6 +759,7 @@ function AboutYouCard(props: {
                               style={{ ...FIELD, flex: "1" }}
                               value={draft().affiliation}
                               placeholder="University or company — search like LinkedIn"
+                              aria-label="Affiliation"
                               onInput={(e) => {
                                 setDraft({ ...draft(), affiliation: e.currentTarget.value })
                                 searchInstitutions(e.currentTarget.value)
@@ -778,6 +790,7 @@ function AboutYouCard(props: {
                                 {(sug) => (
                                   <button
                                     type="button"
+                                    data-slot="amicode-you-suggestion"
                                     onClick={() => pickInstitution(sug)}
                                     style={{
                                       display: "flex",
@@ -830,6 +843,7 @@ function AboutYouCard(props: {
                           style={FIELD}
                           value={draft().focus}
                           placeholder="What you work on"
+                          aria-label="Research focus"
                           onInput={(e) => setDraft({ ...draft(), focus: e.currentTarget.value })}
                           onKeyDown={pasteFallback((v) => setDraft({ ...draft(), focus: v }))}
                         />
@@ -839,6 +853,7 @@ function AboutYouCard(props: {
                           style={FIELD}
                           value={draft().scholar}
                           placeholder="Google Scholar URL (optional)"
+                          aria-label="Google Scholar URL"
                           onInput={(e) => setDraft({ ...draft(), scholar: e.currentTarget.value })}
                           onKeyDown={pasteFallback((v) => setDraft({ ...draft(), scholar: v }))}
                         />
@@ -853,10 +868,11 @@ function AboutYouCard(props: {
                               color: "var(--accent-ink, #111214)",
                               border: "none",
                               "border-radius": "var(--radius-md)",
-                              padding: "4px 10px",
+                              padding: "4px 8px",
                               "font-size": "12px",
                               "font-weight": "600",
-                              cursor: saving() ? "wait" : "pointer",
+                              cursor: saving() || resolvingLogo() > 0 ? "wait" : "pointer",
+                              opacity: saving() || resolvingLogo() > 0 ? "0.6" : "1",
                             }}
                           >
                             {saving() ? "Saving…" : resolvingLogo() > 0 ? "Finding logo…" : "Save"}
@@ -957,7 +973,17 @@ function ActionCard(props: { eyebrow: string; slot: string; onClick?: () => void
     <div
       data-component="amicode-action-card"
       data-slot={props.slot}
+      data-clickable={props.onClick ? "true" : undefined}
+      role={props.onClick ? "button" : undefined}
+      tabIndex={props.onClick ? 0 : undefined}
       onClick={() => props.onClick?.()}
+      onKeyDown={(e) => {
+        if (!props.onClick) return
+        if ((e.key === "Enter" || e.key === " ") && !(e.target as HTMLElement).closest("button, input, a")) {
+          e.preventDefault()
+          props.onClick()
+        }
+      }}
       style={{
         ...CARD,
         gap: "6px",
diff --git a/packages/ui/src/amicode/onboarding-wizard.tsx b/packages/ui/src/amicode/onboarding-wizard.tsx
index 9f36f942d..f1578baa3 100644
--- a/packages/ui/src/amicode/onboarding-wizard.tsx
+++ b/packages/ui/src/amicode/onboarding-wizard.tsx
@@ -39,10 +39,9 @@ const FIELD: Record<string, string> = {
   background: "var(--v2-background-bg-layer-02, transparent)",
   border: "1px solid var(--v2-border-border-base)",
   "border-radius": "var(--radius-md)",
-  padding: "9px 12px",
+  padding: "8px 12px",
   "font-size": "13px",
   color: "var(--v2-text-text-base)",
-  outline: "none",
 }
 const LABEL: Record<string, string> = {
   "font-size": "11px",
diff --git a/packages/ui/src/amicode/run-gallery.tsx b/packages/ui/src/amicode/run-gallery.tsx
index 77ce3ad09..da33f4e8d 100644
--- a/packages/ui/src/amicode/run-gallery.tsx
+++ b/packages/ui/src/amicode/run-gallery.tsx
@@ -38,7 +38,7 @@ export function AmicodeRunGallery(props: {
         position: "fixed",
         inset: "0",
         "z-index": "60",
-        background: "color-mix(in srgb, #000 62%, transparent)",
+        background: "color-mix(in srgb, #000 50%, transparent)",
         display: "flex",
         "flex-direction": "column",
       }}
diff --git a/packages/ui/src/amicode/solver-toggle.tsx b/packages/ui/src/amicode/solver-toggle.tsx
index 9a6545eec..fecc71bba 100644
--- a/packages/ui/src/amicode/solver-toggle.tsx
+++ b/packages/ui/src/amicode/solver-toggle.tsx
@@ -72,9 +72,9 @@ export function AmicodeSolverToggle() {
     display: "inline-flex",
     "align-items": "center",
     gap: "6px",
-    padding: "5px 12px",
+    padding: "4px 12px",
     "font-size": "12px",
-    "font-weight": active ? "650" : "450",
+    "font-weight": active ? "650" : "400",
     border: "none",
     cursor: "pointer",
     background: active ? "var(--accent-fill-soft)" : "transparent",
@@ -84,7 +84,7 @@ export function AmicodeSolverToggle() {
     <div
       data-component="amicode-solver-toggle"
       title="Solver — High-Performance runs in the cloud with your API key"
-      style={{ display: "flex", "align-items": "center", gap: "10px" }}
+      style={{ display: "flex", "align-items": "center", gap: "8px" }}
     >
       <span
         style={{
@@ -119,10 +119,10 @@ export function AmicodeSolverToggle() {
           Piccolissimo + Altissimo
           <span
             style={{
-              "font-size": "9px",
-              "font-weight": "750",
+              "font-size": "10px",
+              "font-weight": "700",
               "letter-spacing": "0.06em",
-              padding: "1px 5px",
+              padding: "0 4px",
               "border-radius": "var(--radius-sm)",
               background: "var(--accent, #fff676)",
               color: "var(--accent-ink, #111214)",

From b1835787f50cbb9cb37536d57f7df44900bbd223 Mon Sep 17 00:00:00 2001
From: kate bonner <katebonner277@gmail.com>
Date: Mon, 27 Jul 2026 16:51:48 -0400
Subject: [PATCH 2/3] =?UTF-8?q?a11y(amicode):=20the=20deferred=20audit=20i?=
 =?UTF-8?q?tems=20=E2=80=94=20combobox,=20canvas=20keyboard=20nav,=20discl?=
 =?UTF-8?q?osures,=20one=20input=20recipe?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Institution autocomplete is a real combobox: role/aria-expanded/
  aria-activedescendant, arrow-key navigation, Enter picks, Escape
  closes; options are listbox options with an active highlight.
- Context tree is keyboard-operable: the canvas takes focus, arrows walk
  the tree's flat order, Home/End jump, Enter/Space opens the focused
  node; the engine gained focus(id) and an aria-live region announces
  each node. role=img corrected to role=application.
- 'Amico remembers' details unfold inline as disclosures instead of
  hiding in a hover-only title tooltip.
- ONE text-input recipe: .amc-input (+ --compact) in amicode.css
  replaces the three divergent inline recipes across the onboarding
  wizard, profile editor, and connections forms — focus ring included so
  no caller ever strips an outline again.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 packages/app/src/i18n/en.ts                   |   2 +-
 .../src/pages/session/context-tree-panel.tsx  |  69 +++++++++-
 packages/ui/src/amicode/amicode.css           |  36 +++++-
 packages/ui/src/amicode/connections-tab.tsx   |  10 +-
 .../ui/src/amicode/context-tree-engine.ts     |  15 ++-
 packages/ui/src/amicode/home-cards.tsx        | 122 +++++++++++++++---
 packages/ui/src/amicode/onboarding-wizard.tsx |  20 +--
 7 files changed, 226 insertions(+), 48 deletions(-)

diff --git a/packages/app/src/i18n/en.ts b/packages/app/src/i18n/en.ts
index d18f49793..88b54c27b 100644
--- a/packages/app/src/i18n/en.ts
+++ b/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",
diff --git a/packages/app/src/pages/session/context-tree-panel.tsx b/packages/app/src/pages/session/context-tree-panel.tsx
index da177091d..746f90a5d 100644
--- a/packages/app/src/pages/session/context-tree-panel.tsx
+++ b/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()
@@ -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>
   )
diff --git a/packages/ui/src/amicode/amicode.css b/packages/ui/src/amicode/amicode.css
index 3047572be..6f94729c6 100644
--- a/packages/ui/src/amicode/amicode.css
+++ b/packages/ui/src/amicode/amicode.css
@@ -987,6 +987,37 @@
   background: var(--accent-fill-hover);
 }
 
+/* THE text input recipe — one geometry for every amicode text field (the
+ * onboarding wizard, the About-You profile editor, the Connections credential
+ * forms). Compact modifier for dense in-card forms. Focus ring included so no
+ * caller ever strips an outline again. */
+.amc-input {
+  width: 100%;
+  box-sizing: border-box;
+  background: var(--v2-background-bg-layer-02, transparent);
+  border: 1px solid var(--v2-border-border-base);
+  border-radius: var(--radius-md);
+  padding: 8px 12px;
+  font: inherit;
+  font-size: 13px;
+  color: var(--v2-text-text-base);
+}
+.amc-input--compact {
+  padding: 4px 8px;
+  font-size: 12px;
+}
+.amc-input::placeholder {
+  color: var(--v2-text-text-faint);
+}
+.amc-input:focus-visible {
+  outline: 2px solid var(--v2-border-border-focus);
+  outline-offset: -1px;
+}
+.amc-input:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
 /* home cards: interaction states the inline styles can't express. The yellow
  * CTA's feedback is elevation + opacity — the fill itself never changes hue. */
 [data-slot="amicode-card-meet-cta"]:hover {
@@ -1022,8 +1053,9 @@
   outline: 1px solid var(--v2-border-border-focus);
   outline-offset: 1px;
 }
-[data-slot="amicode-you-suggestion"]:hover {
-  background: var(--v2-background-bg-layer-02);
+[data-slot="amicode-you-suggestion"]:hover,
+[data-slot="amicode-you-suggestion"][data-active="true"] {
+  background: var(--v2-background-bg-layer-03, var(--v2-background-bg-layer-02));
 }
 [data-component="amicode-widget-preview"] .amc-wp-pin:disabled { cursor: default; }
 [data-component="amicode-widget-preview"] .amc-wp-pin[data-state="pinned"] {
diff --git a/packages/ui/src/amicode/connections-tab.tsx b/packages/ui/src/amicode/connections-tab.tsx
index 3e1906b91..cd7262f2c 100644
--- a/packages/ui/src/amicode/connections-tab.tsx
+++ b/packages/ui/src/amicode/connections-tab.tsx
@@ -415,7 +415,7 @@ export function ConnectionCard(props: {
                   value={username()}
                   disabled={model().formDisabled}
                   onInput={(event) => setUsername(event.currentTarget.value)}
-                  class="text-12-regular text-[var(--v2-text-text-base)] bg-[var(--v2-background-bg-layer-02)] rounded-md px-2 py-1.5 border border-[var(--v2-border-border-base)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--v2-border-border-focus)]"
+                  class="amc-input amc-input--compact"
                 />
                 <input
                   type="password"
@@ -426,7 +426,7 @@ export function ConnectionCard(props: {
                   value={password()}
                   disabled={model().formDisabled}
                   onInput={(event) => setPassword(event.currentTarget.value)}
-                  class="text-12-regular text-[var(--v2-text-text-base)] bg-[var(--v2-background-bg-layer-02)] rounded-md px-2 py-1.5 border border-[var(--v2-border-border-base)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--v2-border-border-focus)]"
+                  class="amc-input amc-input--compact"
                 />
               </Show>
               <Show when={entryKind() === "base-url-token"}>
@@ -440,7 +440,7 @@ export function ConnectionCard(props: {
                   value={baseUrl()}
                   disabled={model().formDisabled}
                   onInput={(event) => setBaseUrl(event.currentTarget.value)}
-                  class="text-12-regular text-[var(--v2-text-text-base)] bg-[var(--v2-background-bg-layer-02)] rounded-md px-2 py-1.5 border border-[var(--v2-border-border-base)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--v2-border-border-focus)]"
+                  class="amc-input amc-input--compact"
                 />
               </Show>
               <Show when={entryKind() === "base-url-token" || entryKind() === "pasqal-token"}>
@@ -453,7 +453,7 @@ export function ConnectionCard(props: {
                   value={token()}
                   disabled={model().formDisabled}
                   onInput={(event) => setToken(event.currentTarget.value)}
-                  class="text-12-regular text-[var(--v2-text-text-base)] bg-[var(--v2-background-bg-layer-02)] rounded-md px-2 py-1.5 border border-[var(--v2-border-border-base)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--v2-border-border-focus)]"
+                  class="amc-input amc-input--compact"
                 />
               </Show>
               <Show when={entryKind() === "pasqal-token"}>
@@ -467,7 +467,7 @@ export function ConnectionCard(props: {
                   value={projectId()}
                   disabled={model().formDisabled}
                   onInput={(event) => setProjectId(event.currentTarget.value)}
-                  class="text-12-regular text-[var(--v2-text-text-base)] bg-[var(--v2-background-bg-layer-02)] rounded-md px-2 py-1.5 border border-[var(--v2-border-border-base)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--v2-border-border-focus)]"
+                  class="amc-input amc-input--compact"
                 />
               </Show>
               <Button
diff --git a/packages/ui/src/amicode/context-tree-engine.ts b/packages/ui/src/amicode/context-tree-engine.ts
index 0ab630a05..227864f39 100644
--- a/packages/ui/src/amicode/context-tree-engine.ts
+++ b/packages/ui/src/amicode/context-tree-engine.ts
@@ -84,6 +84,8 @@ export interface ContextTreeEngine {
   setTheme(scheme: ContextTreeScheme): void
   /** a glance from the log: ring the node whose label matches */
   highlight(label: string): void
+  /** keyboard focus: ring + camera-glance a node by ID (host-driven nav) */
+  focus(id: string): void
   /** re-fit the camera to the whole tree (also clears manual pan/zoom) */
   fit(): void
   /** omit both to re-measure from the canvas box */
@@ -608,8 +610,10 @@ export function createContextTreeEngine(
           ctx.stroke()
         } else if (rt >= 1) n.ringT = -1
       }
-      // labels: turns + root always; leaves at rest tone, raised on hover
-      const la = isRoot || n.kind === "turn" ? 0.85 : hoveredNow || n.active ? 1 : 0.6
+      // labels: turns + root always; leaves at rest tone, raised on hover,
+      // keyboard focus, or a log glance
+      const glancedNow = glance !== null && glance.id === n.id
+      const la = isRoot || n.kind === "turn" ? 0.85 : hoveredNow || glancedNow || n.active ? 1 : 0.6
       ctx.font = `${n.kind === "turn" || isRoot ? "600 " : ""}10px JuliaMono, ui-monospace, SFMono-Regular, Menlo, monospace`
       const text = n.label.length > 30 ? n.label.slice(0, 29) + "…" : n.label
       const tw = ctx.measureText(text).width
@@ -648,6 +652,13 @@ export function createContextTreeEngine(
         glance = { id: n.id, until: beatNow + 3 }
       }
     },
+    focus: (id) => {
+      if (destroyed) return
+      const n = byId.get(id)
+      if (!n) return
+      n.ringT = beatNow
+      glance = { id: n.id, until: beatNow + 3 }
+    },
     fit: () => {
       userCam = false
       fitTarget()
diff --git a/packages/ui/src/amicode/home-cards.tsx b/packages/ui/src/amicode/home-cards.tsx
index 358b7571e..626dddd33 100644
--- a/packages/ui/src/amicode/home-cards.tsx
+++ b/packages/ui/src/amicode/home-cards.tsx
@@ -167,6 +167,57 @@ function Bullet(props: { children: JSX.Element; title?: string }) {
   )
 }
 
+/** One "Amico remembers" line. The detail used to live only in a title
+ *  tooltip — hover-only, invisible to keyboard and touch. Now a disclosure:
+ *  the row is a button that unfolds its detail inline. */
+function RememberRow(props: { title: string; detail: string }) {
+  const [open, setOpen] = createSignal(false)
+  const hasDetail = () => props.detail.trim() !== "" && props.detail.trim() !== props.title.trim()
+  return (
+    <div style={{ "min-width": "0" }}>
+      <button
+        type="button"
+        data-slot="amicode-you-remember"
+        aria-expanded={hasDetail() ? open() : undefined}
+        onClick={() => hasDetail() && setOpen(!open())}
+        style={{
+          display: "flex",
+          gap: "6px",
+          "align-items": "baseline",
+          "min-width": "0",
+          "max-width": "100%",
+          background: "none",
+          border: "none",
+          padding: "0",
+          "font-size": "12px",
+          "line-height": "18px",
+          "text-align": "left",
+          color: "var(--v2-text-text-base)",
+          cursor: hasDetail() ? "pointer" : "default",
+        }}
+      >
+        <span style={{ color: "var(--v2-text-text-accent)", "flex-shrink": "0" }} aria-hidden="true">
+          ›
+        </span>
+        <span style={{ overflow: "hidden", "text-overflow": "ellipsis", "white-space": "nowrap" }}>{props.title}</span>
+      </button>
+      <Show when={open() && hasDetail()}>
+        <div
+          data-slot="amicode-you-remember-detail"
+          style={{
+            "font-size": "11px",
+            "line-height": "16px",
+            color: "var(--v2-text-text-muted)",
+            padding: "0 0 4px 12px",
+          }}
+        >
+          {props.detail}
+        </div>
+      </Show>
+    </div>
+  )
+}
+
 function PrimaryButton(props: { children: JSX.Element; onClick: () => void; slot?: string }) {
   return (
     <button
@@ -406,6 +457,8 @@ function AboutYouCard(props: {
   const [saving, setSaving] = createSignal(false)
   const [draft, setDraft] = createSignal({ name: "", affiliation: "", focus: "", scholar: "", affiliation_logo: "" })
   const [suggestions, setSuggestions] = createSignal<{ name: string; domain: string; logo: string }[]>([])
+  // combobox keyboard state: the highlighted suggestion (-1 = none)
+  const [activeSug, setActiveSug] = createSignal(-1)
   const beginEdit = () => {
     setSuggestions([]) // a dropdown left open at cancel must not haunt the next edit
     const y = you()
@@ -523,16 +576,6 @@ function AboutYouCard(props: {
     apply(el.value.slice(0, start) + clip + el.value.slice(end))
   }
 
-  const FIELD: JSX.CSSProperties = {
-    width: "100%",
-    "box-sizing": "border-box",
-    background: "var(--v2-background-bg-layer-02, transparent)",
-    border: "1px solid var(--v2-border-border-base)",
-    "border-radius": "var(--radius-md)",
-    padding: "4px 8px",
-    "font-size": "12px",
-    color: "var(--v2-text-text-base)",
-  }
   const focusLine = createMemo(() => {
     const y = you()
     if (!y) return ""
@@ -689,7 +732,7 @@ function AboutYouCard(props: {
                       <input
                         data-slot="amicode-you-name"
                         data-amc-clipboard="self"
-                        style={FIELD}
+                        class="amc-input amc-input--compact"
                         value={draft().name}
                         placeholder="Name"
                         aria-label="Name"
@@ -756,22 +799,56 @@ function AboutYouCard(props: {
                             <input
                               data-slot="amicode-you-affiliation"
                               data-amc-clipboard="self"
-                              style={{ ...FIELD, flex: "1" }}
+                              class="amc-input amc-input--compact" style={{ flex: "1" }}
                               value={draft().affiliation}
                               placeholder="University or company — search like LinkedIn"
                               aria-label="Affiliation"
+                              role="combobox"
+                              aria-autocomplete="list"
+                              aria-expanded={suggestions().length > 0}
+                              aria-controls="amc-inst-listbox"
+                              aria-activedescendant={activeSug() >= 0 ? `amc-inst-option-${activeSug()}` : undefined}
                               onInput={(e) => {
                                 setDraft({ ...draft(), affiliation: e.currentTarget.value })
+                                setActiveSug(-1)
                                 searchInstitutions(e.currentTarget.value)
                               }}
-                              onKeyDown={pasteFallback((v) => {
-                                setDraft({ ...draft(), affiliation: v })
-                                searchInstitutions(v)
-                              })}
+                              onKeyDown={(e) => {
+                                const open = suggestions().length > 0
+                                if (open && e.key === "ArrowDown") {
+                                  e.preventDefault()
+                                  setActiveSug((activeSug() + 1) % suggestions().length)
+                                  return
+                                }
+                                if (open && e.key === "ArrowUp") {
+                                  e.preventDefault()
+                                  setActiveSug((activeSug() - 1 + suggestions().length) % suggestions().length)
+                                  return
+                                }
+                                if (open && e.key === "Enter" && activeSug() >= 0) {
+                                  e.preventDefault()
+                                  void pickInstitution(suggestions()[activeSug()])
+                                  setActiveSug(-1)
+                                  return
+                                }
+                                if (open && e.key === "Escape") {
+                                  e.preventDefault()
+                                  setSuggestions([])
+                                  setActiveSug(-1)
+                                  return
+                                }
+                                void pasteFallback((v) => {
+                                  setDraft({ ...draft(), affiliation: v })
+                                  searchInstitutions(v)
+                                })(e)
+                              }}
                             />
                           </div>
                           <Show when={suggestions().length > 0}>
                             <div
+                              id="amc-inst-listbox"
+                              role="listbox"
+                              aria-label="Institution suggestions"
                               style={{
                                 position: "absolute",
                                 top: "100%",
@@ -787,10 +864,15 @@ function AboutYouCard(props: {
                               }}
                             >
                               <For each={suggestions()}>
-                                {(sug) => (
+                                {(sug, i) => (
                                   <button
                                     type="button"
+                                    id={`amc-inst-option-${i()}`}
+                                    role="option"
+                                    aria-selected={activeSug() === i()}
+                                    data-active={activeSug() === i() ? "true" : undefined}
                                     data-slot="amicode-you-suggestion"
+                                    tabIndex={-1}
                                     onClick={() => pickInstitution(sug)}
                                     style={{
                                       display: "flex",
@@ -840,7 +922,7 @@ function AboutYouCard(props: {
                         <input
                           data-slot="amicode-you-focus"
                           data-amc-clipboard="self"
-                          style={FIELD}
+                          class="amc-input amc-input--compact"
                           value={draft().focus}
                           placeholder="What you work on"
                           aria-label="Research focus"
@@ -850,7 +932,7 @@ function AboutYouCard(props: {
                         <input
                           data-slot="amicode-you-scholar-input"
                           data-amc-clipboard="self"
-                          style={FIELD}
+                          class="amc-input amc-input--compact"
                           value={draft().scholar}
                           placeholder="Google Scholar URL (optional)"
                           aria-label="Google Scholar URL"
@@ -946,7 +1028,7 @@ function AboutYouCard(props: {
                   Amico remembers
                 </div>
                 <div style={{ display: "flex", "flex-direction": "column", gap: "3px" }}>
-                  <For each={y().remembers}>{(m) => <Bullet title={m.detail}>{m.title}</Bullet>}</For>
+                  <For each={y().remembers}>{(m) => <RememberRow title={m.title} detail={m.detail} />}</For>
                 </div>
               </Show>
 
diff --git a/packages/ui/src/amicode/onboarding-wizard.tsx b/packages/ui/src/amicode/onboarding-wizard.tsx
index f1578baa3..641ea01b9 100644
--- a/packages/ui/src/amicode/onboarding-wizard.tsx
+++ b/packages/ui/src/amicode/onboarding-wizard.tsx
@@ -33,16 +33,6 @@ export function shouldShowWizard(
   return !profile.affiliation && !profile.scholar && !profile.focus
 }
 
-const FIELD: Record<string, string> = {
-  width: "100%",
-  "box-sizing": "border-box",
-  background: "var(--v2-background-bg-layer-02, transparent)",
-  border: "1px solid var(--v2-border-border-base)",
-  "border-radius": "var(--radius-md)",
-  padding: "8px 12px",
-  "font-size": "13px",
-  color: "var(--v2-text-text-base)",
-}
 const LABEL: Record<string, string> = {
   "font-size": "11px",
   "font-weight": "650",
@@ -307,7 +297,7 @@ export function AmicodeOnboardingWizard(props: {
             <div>
               <div style={LABEL}>Name</div>
               <input
-                style={FIELD}
+                class="amc-input"
                 value={fields().name}
                 onInput={(e) => setFields({ ...fields(), name: e.currentTarget.value })}
                 placeholder="Ada Lovelace"
@@ -333,7 +323,7 @@ export function AmicodeOnboardingWizard(props: {
                   />
                 </Show>
                 <input
-                  style={FIELD}
+                  class="amc-input"
                   value={fields().affiliation}
                   onInput={(e) => {
                     setFields({ ...fields(), affiliation: e.currentTarget.value })
@@ -405,7 +395,7 @@ export function AmicodeOnboardingWizard(props: {
             <div>
               <div style={LABEL}>What you work on</div>
               <input
-                style={FIELD}
+                class="amc-input"
                 value={fields().focus}
                 onInput={(e) => setFields({ ...fields(), focus: e.currentTarget.value })}
                 placeholder="e.g. high-fidelity gates on transmons"
@@ -414,7 +404,7 @@ export function AmicodeOnboardingWizard(props: {
             <div>
               <div style={LABEL}>Google Scholar (optional)</div>
               <input
-                style={FIELD}
+                class="amc-input"
                 value={fields().scholar}
                 onInput={(e) => setFields({ ...fields(), scholar: e.currentTarget.value })}
                 placeholder="https://scholar.google.com/…"
@@ -567,7 +557,7 @@ export function AmicodeOnboardingWizard(props: {
                     <div style={LABEL}>Attach a vault</div>
                     <div style={{ display: "flex", gap: "6px", "align-items": "stretch" }}>
                       <input
-                        style={FIELD}
+                        class="amc-input"
                         value={attachRef()}
                         onInput={(e) => setAttachRef(e.currentTarget.value)}
                         onKeyDown={(e) => {

From faa56f788cc860bfed98673a765a659faa2cee44 Mon Sep 17 00:00:00 2001
From: kate bonner <katebonner277@gmail.com>
Date: Mon, 27 Jul 2026 17:40:02 -0400
Subject: [PATCH 3/3] feat(amicode): vault replaces the git review in the
 session side panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The side panel's Review tab, Git-changes list, and Unified/Split
controls are removed (researchers don't review diffs there — Kate
2026-07-27); the Vault browser takes that spot as a first-class tab.
One VaultBrowser body now serves two hosts: the session side panel
(vault tab, synced to the global vaultPanel store so the titlebar
button, palette command, and context-tree deep-links all land there)
and the standalone drawer, which now serves only non-session routes
(Landing/home). The file-tree column drops its changes/all pills and
always shows the full tree.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 packages/app/src/components/vault-browser.tsx | 296 ++++++++++++++++++
 packages/app/src/components/vault-panel.tsx   | 290 +----------------
 packages/app/src/pages/session.tsx            |  14 +-
 packages/app/src/pages/session/helpers.ts     |   7 +-
 .../src/pages/session/session-side-panel.tsx  | 202 ++++--------
 5 files changed, 373 insertions(+), 436 deletions(-)
 create mode 100644 packages/app/src/components/vault-browser.tsx

diff --git a/packages/app/src/components/vault-browser.tsx b/packages/app/src/components/vault-browser.tsx
new file mode 100644
index 000000000..c2fa07e2f
--- /dev/null
+++ b/packages/app/src/components/vault-browser.tsx
@@ -0,0 +1,296 @@
+// amicode: the vault browser BODY — mount chips, file tree, inline
+// markdown/source viewer — shared by its two hosts: the session side panel's
+// Vault tab (which replaced the git review; Kate 2026-07-27) and the
+// standalone drawer that serves vault access outside sessions (Landing/home).
+// All state rides the module-scope vaultPanel store, so the titlebar button,
+// the palette command, and context-tree deep-links land in whichever host is
+// mounted. Data: the read-only /amicode/vault-files + /amicode/vault-file
+// routes (loopback-gated server-side).
+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"
+import { useServer } from "@/context/server"
+import { amicodeGet } from "@/utils/amicode-fetch"
+import { vaultPanel } from "@/context/vault-panel"
+
+type Mount = { id: string; kind: string; writable: boolean }
+type Entry = { path: string; name: string; size: number; readable: boolean }
+type Dir = { name: string; path: string; dirs: Dir[]; files: Entry[] }
+
+function foldTree(files: Entry[]): Dir {
+  const root: Dir = { name: "", path: "", dirs: [], files: [] }
+  const dirOf = new Map<string, Dir>([["", root]])
+  const ensureDir = (p: string): Dir => {
+    const known = dirOf.get(p)
+    if (known) return known
+    const cut = p.lastIndexOf("/")
+    const parent = ensureDir(cut < 0 ? "" : p.slice(0, cut))
+    const dir: Dir = { name: cut < 0 ? p : p.slice(cut + 1), path: p, dirs: [], files: [] }
+    parent.dirs.push(dir)
+    dirOf.set(p, dir)
+    return dir
+  }
+  for (const f of files) {
+    const cut = f.path.lastIndexOf("/")
+    ensureDir(cut < 0 ? "" : f.path.slice(0, cut)).files.push(f)
+  }
+  return root
+}
+
+export function VaultBrowser(props: {
+  /** drawer host: renders a close X and arms Escape (back, then close) */
+  onClose?: () => void
+}) {
+  const language = useLanguage()
+  const server = useServer()
+
+  const [mountsRaw] = createResource(
+    () => (vaultPanel.opened() ? server.current : undefined),
+    (conn) => amicodeGet(conn, "/amicode/vaults").catch(() => undefined),
+  )
+  const mounts = createMemo<Mount[]>(() => {
+    const raw = mountsRaw() as { mounts?: Mount[] } | undefined
+    return Array.isArray(raw?.mounts) ? raw.mounts.filter((m) => typeof m?.id === "string") : []
+  })
+
+  const [chosenMount, setChosenMount] = createSignal<string | undefined>(undefined)
+  const mount = createMemo(() => {
+    const chosen = chosenMount()
+    if (chosen && mounts().some((m) => m.id === chosen)) return chosen
+    return mounts()[0]?.id
+  })
+
+  const [listingRaw] = createResource(
+    () => (vaultPanel.opened() && mount() && server.current ? { conn: server.current, mount: mount()! } : undefined),
+    (key) => amicodeGet(key.conn, `/amicode/vault-files?mount=${encodeURIComponent(key.mount)}`).catch(() => undefined),
+  )
+  const listing = createMemo(() => {
+    const raw = listingRaw() as { ok?: boolean; truncated?: boolean; files?: Entry[]; error?: string } | undefined
+    if (!raw) return undefined
+    if (!raw.ok || !Array.isArray(raw.files)) return { error: raw.error ?? "unreadable" } as const
+    return { tree: foldTree(raw.files), truncated: !!raw.truncated, total: raw.files.length } as const
+  })
+
+  const [expanded, setExpanded] = createSignal(new Set<string>(), { equals: false })
+  const toggleDir = (p: string) => {
+    const next = new Set(expanded())
+    if (next.has(p)) next.delete(p)
+    else next.add(p)
+    setExpanded(next)
+  }
+
+  const [selected, setSelected] = createSignal<Entry | undefined>(undefined)
+  const [fileRaw] = createResource(
+    () =>
+      vaultPanel.opened() && mount() && selected()?.readable && server.current
+        ? { conn: server.current, mount: mount()!, path: selected()!.path }
+        : undefined,
+    (key) =>
+      amicodeGet(
+        key.conn,
+        `/amicode/vault-file?mount=${encodeURIComponent(key.mount)}&path=${encodeURIComponent(key.path)}`,
+      ).catch(() => undefined),
+  )
+  const fileBody = createMemo(() => {
+    const raw = fileRaw() as { ok?: boolean; content?: string; error?: string } | undefined
+    if (!raw) return undefined
+    return raw.ok && typeof raw.content === "string" ? { content: raw.content } : { error: raw.error ?? "unreadable" }
+  })
+
+  // a context-tree click lands directly on its file: pick the mount, unfold
+  // the ancestors, select — then clear so the next open starts at the tree
+  createEffect(() => {
+    const target = vaultPanel.target()
+    if (!target || !vaultPanel.opened()) return
+    setChosenMount(target.mount)
+    const parts = target.path.split("/")
+    const next = new Set(expanded())
+    for (let i = 1; i < parts.length; i++) next.add(parts.slice(0, i).join("/"))
+    setExpanded(next)
+    setSelected({
+      path: target.path,
+      name: parts[parts.length - 1],
+      size: 0,
+      readable: true,
+    })
+    vaultPanel.clearTarget()
+  })
+
+  // drawer host only: Escape backs out of the viewer, then closes
+  if (props.onClose) {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== "Escape" || !vaultPanel.opened()) return
+      e.preventDefault()
+      if (selected()) setSelected(undefined)
+      else props.onClose?.()
+    }
+    window.addEventListener("keydown", onKeyDown)
+    onCleanup(() => window.removeEventListener("keydown", onKeyDown))
+  }
+
+  const renderDir = (dir: Dir, depth: number) => (
+    <>
+      <For each={[...dir.dirs].sort((a, b) => a.name.localeCompare(b.name))}>
+        {(sub) => (
+          <>
+            <button
+              type="button"
+              class="flex w-full cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-left text-12-regular text-text-base hover:bg-background-stronger focus-visible:outline focus-visible:outline-1 focus-visible:outline-border-focus-base"
+              style={{ "padding-left": `${8 + depth * 12}px` }}
+              aria-expanded={expanded().has(sub.path)}
+              onClick={() => toggleDir(sub.path)}
+            >
+              <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>
+          </>
+        )}
+      </For>
+      <For each={[...dir.files].sort((a, b) => a.name.localeCompare(b.name))}>
+        {(f) => (
+          <button
+            type="button"
+            class="flex w-full items-center gap-1.5 rounded-md px-2 py-1 text-left text-12-regular focus-visible:outline focus-visible:outline-1 focus-visible:outline-border-focus-base"
+            classList={{
+              "cursor-pointer text-text-base hover:bg-background-stronger": f.readable,
+              "cursor-default text-text-weaker": !f.readable,
+              "bg-background-stronger": selected()?.path === f.path,
+            }}
+            style={{ "padding-left": `${20 + depth * 12}px` }}
+            disabled={!f.readable}
+            title={f.readable ? f.path : language.t("amicode.vault.unreadable")}
+            onClick={() => f.readable && setSelected(f)}
+          >
+            <span class="truncate">{f.name}</span>
+          </button>
+        )}
+      </For>
+    </>
+  )
+
+  return (
+    <div class="flex h-full min-h-0 flex-col" data-component="amico-vault-browser">
+      <div class="flex h-9 shrink-0 items-center gap-2 border-b border-border-weaker-base px-3">
+        <Show
+          when={selected()}
+          fallback={<div class="text-12-medium text-text-base">{language.t("amicode.vault.title")}</div>}
+        >
+          <IconButton
+            icon="arrow-left"
+            variant="ghost"
+            onClick={() => setSelected(undefined)}
+            aria-label={language.t("amicode.vault.back")}
+          />
+          <div class="min-w-0 truncate text-12-medium text-text-base">{selected()!.name}</div>
+        </Show>
+        <div class="flex-1" />
+        <Show when={props.onClose}>
+          <IconButton
+            icon="close"
+            variant="ghost"
+            onClick={() => props.onClose?.()}
+            aria-label={language.t("amicode.vault.close")}
+          />
+        </Show>
+      </div>
+
+      <Show when={!selected()}>
+        <Show when={mounts().length > 1}>
+          <div class="flex shrink-0 flex-wrap items-center gap-1.5 border-b border-border-weaker-base px-3 py-2">
+            <For each={mounts()}>
+              {(m) => (
+                <button
+                  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-[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}
+                  onClick={() => {
+                    setChosenMount(m.id)
+                    setSelected(undefined)
+                  }}
+                >
+                  {m.id}
+                </button>
+              )}
+            </For>
+          </div>
+        </Show>
+        <div class="min-h-0 flex-1 overflow-y-auto px-1 py-2">
+          <Show
+            when={listing()}
+            fallback={
+              <div class="px-3 py-2 text-12-regular text-text-weak">
+                {mountsRaw.loading || listingRaw.loading
+                  ? `${language.t("common.loading")}${language.t("common.loading.ellipsis")}`
+                  : language.t("amicode.vault.empty")}
+              </div>
+            }
+          >
+            {(state) => (
+              <Show
+                when={"tree" in state() ? (state() as { tree: Dir }) : undefined}
+                fallback={<div class="px-3 py-2 text-12-regular text-text-weak">{language.t("amicode.vault.error")}</div>}
+              >
+                {(ok) => (
+                  <>
+                    {renderDir(ok().tree, 0)}
+                    <Show when={(state() as { truncated?: boolean }).truncated}>
+                      <div class="px-3 py-2 text-12-regular text-text-weaker">
+                        {language.t("amicode.vault.truncated")}
+                      </div>
+                    </Show>
+                  </>
+                )}
+              </Show>
+            )}
+          </Show>
+        </div>
+      </Show>
+
+      <Show when={selected()}>
+        <div class="min-h-0 flex-1 overflow-y-auto px-4 py-3">
+          <Show
+            when={fileBody()}
+            fallback={
+              <div class="text-12-regular text-text-weak">
+                {language.t("common.loading")}
+                {language.t("common.loading.ellipsis")}
+              </div>
+            }
+          >
+            {(body) => (
+              <Show
+                when={"content" in body() ? (body() as { content: string }) : undefined}
+                fallback={<div class="text-12-regular text-text-weak">{language.t("amicode.vault.error")}</div>}
+              >
+                {(ok) => (
+                  <Show
+                    when={/\.(md|txt)$/i.test(selected()!.name)}
+                    fallback={
+                      <pre class="overflow-x-auto whitespace-pre rounded-lg bg-background-stronger p-3 font-mono text-12-regular text-text-base">
+                        {ok().content}
+                      </pre>
+                    }
+                  >
+                    <Markdown text={ok().content} cacheKey={`vault:${mount()}:${selected()!.path}`} />
+                  </Show>
+                )}
+              </Show>
+            )}
+          </Show>
+        </div>
+      </Show>
+    </div>
+  )
+}
diff --git a/packages/app/src/components/vault-panel.tsx b/packages/app/src/components/vault-panel.tsx
index d55cefa68..ed851de83 100644
--- a/packages/app/src/components/vault-panel.tsx
+++ b/packages/app/src/components/vault-panel.tsx
@@ -1,293 +1,25 @@
-// amicode: the Vault panel — the vault, and every file that makes it up,
-// living IN the interface (Aaron, 2026-07-26). A dismissible drawer beside the
-// Chat (CONTEXT.md's Panel concept): pick a mount, browse its real files, and
-// read markdown / source inline. Data comes from the read-only
-// /amicode/vault-files + /amicode/vault-file routes (vault-browser.ts) — the
-// same mounts the agent itself reads through its per-mount grants.
-// 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"
+// amicode: the standalone Vault drawer — vault access OUTSIDE sessions
+// (Landing/home), where no session side panel exists. Inside a session the
+// side panel's Vault tab is the host (it replaced the git review; Kate
+// 2026-07-27), so the drawer stands down there — both hosts ride the same
+// vaultPanel store and render the same VaultBrowser body.
+import { Show } from "solid-js"
+import { useParams } from "@solidjs/router"
 import { useLanguage } from "@/context/language"
-import { useServer } from "@/context/server"
-import { amicodeGet } from "@/utils/amicode-fetch"
 import { vaultPanel } from "@/context/vault-panel"
-
-type Mount = { id: string; kind: string; writable: boolean }
-type Entry = { path: string; name: string; size: number; readable: boolean }
-type Dir = { name: string; path: string; dirs: Dir[]; files: Entry[] }
-
-function foldTree(files: Entry[]): Dir {
-  const root: Dir = { name: "", path: "", dirs: [], files: [] }
-  const dirOf = new Map<string, Dir>([["", root]])
-  const ensureDir = (p: string): Dir => {
-    const known = dirOf.get(p)
-    if (known) return known
-    const cut = p.lastIndexOf("/")
-    const parent = ensureDir(cut < 0 ? "" : p.slice(0, cut))
-    const dir: Dir = { name: cut < 0 ? p : p.slice(cut + 1), path: p, dirs: [], files: [] }
-    parent.dirs.push(dir)
-    dirOf.set(p, dir)
-    return dir
-  }
-  for (const f of files) {
-    const cut = f.path.lastIndexOf("/")
-    ensureDir(cut < 0 ? "" : f.path.slice(0, cut)).files.push(f)
-  }
-  return root
-}
+import { VaultBrowser } from "@/components/vault-browser"
 
 export function VaultPanel() {
   const language = useLanguage()
-  const server = useServer()
-
-  const [mountsRaw] = createResource(
-    () => (vaultPanel.opened() ? server.current : undefined),
-    (conn) => amicodeGet(conn, "/amicode/vaults").catch(() => undefined),
-  )
-  const mounts = createMemo<Mount[]>(() => {
-    const raw = mountsRaw() as { mounts?: Mount[] } | undefined
-    return Array.isArray(raw?.mounts) ? raw.mounts.filter((m) => typeof m?.id === "string") : []
-  })
-
-  const [chosenMount, setChosenMount] = createSignal<string | undefined>(undefined)
-  const mount = createMemo(() => {
-    const chosen = chosenMount()
-    if (chosen && mounts().some((m) => m.id === chosen)) return chosen
-    return mounts()[0]?.id
-  })
-
-  const [listingRaw] = createResource(
-    () => (vaultPanel.opened() && mount() && server.current ? { conn: server.current, mount: mount()! } : undefined),
-    (key) => amicodeGet(key.conn, `/amicode/vault-files?mount=${encodeURIComponent(key.mount)}`).catch(() => undefined),
-  )
-  const listing = createMemo(() => {
-    const raw = listingRaw() as { ok?: boolean; truncated?: boolean; files?: Entry[]; error?: string } | undefined
-    if (!raw) return undefined
-    if (!raw.ok || !Array.isArray(raw.files)) return { error: raw.error ?? "unreadable" } as const
-    return { tree: foldTree(raw.files), truncated: !!raw.truncated, total: raw.files.length } as const
-  })
-
-  const [expanded, setExpanded] = createSignal(new Set<string>(), { equals: false })
-  const toggleDir = (p: string) => {
-    const next = new Set(expanded())
-    if (next.has(p)) next.delete(p)
-    else next.add(p)
-    setExpanded(next)
-  }
-
-  const [selected, setSelected] = createSignal<Entry | undefined>(undefined)
-  const [fileRaw] = createResource(
-    () =>
-      vaultPanel.opened() && mount() && selected()?.readable && server.current
-        ? { conn: server.current, mount: mount()!, path: selected()!.path }
-        : undefined,
-    (key) =>
-      amicodeGet(
-        key.conn,
-        `/amicode/vault-file?mount=${encodeURIComponent(key.mount)}&path=${encodeURIComponent(key.path)}`,
-      ).catch(() => undefined),
-  )
-  const fileBody = createMemo(() => {
-    const raw = fileRaw() as { ok?: boolean; content?: string; error?: string } | undefined
-    if (!raw) return undefined
-    return raw.ok && typeof raw.content === "string" ? { content: raw.content } : { error: raw.error ?? "unreadable" }
-  })
-
-  // a context-tree click lands directly on its file: pick the mount, unfold
-  // the ancestors, select — then clear so the next open starts at the tree
-  createEffect(() => {
-    const target = vaultPanel.target()
-    if (!target || !vaultPanel.opened()) return
-    setChosenMount(target.mount)
-    const parts = target.path.split("/")
-    const next = new Set(expanded())
-    for (let i = 1; i < parts.length; i++) next.add(parts.slice(0, i).join("/"))
-    setExpanded(next)
-    setSelected({
-      path: target.path,
-      name: parts[parts.length - 1],
-      size: 0,
-      readable: true,
-    })
-    vaultPanel.clearTarget()
-  })
-
-  const onKeyDown = (e: KeyboardEvent) => {
-    if (e.key !== "Escape" || !vaultPanel.opened()) return
-    e.preventDefault()
-    if (selected()) setSelected(undefined)
-    else vaultPanel.close()
-  }
-  window.addEventListener("keydown", onKeyDown)
-  onCleanup(() => window.removeEventListener("keydown", onKeyDown))
-
-  const renderDir = (dir: Dir, depth: number) => (
-    <>
-      <For each={[...dir.dirs].sort((a, b) => a.name.localeCompare(b.name))}>
-        {(sub) => (
-          <>
-            <button
-              type="button"
-              class="flex w-full cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-left text-12-regular text-text-base hover:bg-background-stronger focus-visible:outline focus-visible:outline-1 focus-visible:outline-border-focus-base"
-              style={{ "padding-left": `${8 + depth * 12}px` }}
-              aria-expanded={expanded().has(sub.path)}
-              onClick={() => toggleDir(sub.path)}
-            >
-              <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>
-          </>
-        )}
-      </For>
-      <For each={[...dir.files].sort((a, b) => a.name.localeCompare(b.name))}>
-        {(f) => (
-          <button
-            type="button"
-            class="flex w-full items-center gap-1.5 rounded-md px-2 py-1 text-left text-12-regular focus-visible:outline focus-visible:outline-1 focus-visible:outline-border-focus-base"
-            classList={{
-              "cursor-pointer text-text-base hover:bg-background-stronger": f.readable,
-              "cursor-default text-text-weaker": !f.readable,
-              "bg-background-stronger": selected()?.path === f.path,
-            }}
-            style={{ "padding-left": `${20 + depth * 12}px` }}
-            disabled={!f.readable}
-            title={f.readable ? f.path : language.t("amicode.vault.unreadable")}
-            onClick={() => f.readable && setSelected(f)}
-          >
-            <span class="truncate">{f.name}</span>
-          </button>
-        )}
-      </For>
-    </>
-  )
-
+  const params = useParams()
   return (
-    <Show when={vaultPanel.opened()}>
+    <Show when={vaultPanel.opened() && !params.id}>
       <aside
         data-component="amico-vault-panel"
         aria-label={language.t("amicode.vault.title")}
         class="fixed bottom-2 left-18 top-12 z-40 flex w-[360px] max-w-[85vw] flex-col overflow-hidden rounded-xl border border-border-weaker-base bg-background-base shadow-[var(--v2-elevation-raised)]"
       >
-        <div class="flex h-9 shrink-0 items-center gap-2 border-b border-border-weaker-base px-3">
-          <Show
-            when={selected()}
-            fallback={<div class="text-12-medium text-text-base">{language.t("amicode.vault.title")}</div>}
-          >
-            <IconButton
-              icon="arrow-left"
-              variant="ghost"
-              onClick={() => setSelected(undefined)}
-              aria-label={language.t("amicode.vault.back")}
-            />
-            <div class="min-w-0 truncate text-12-medium text-text-base">{selected()!.name}</div>
-          </Show>
-          <div class="flex-1" />
-          <IconButton
-            icon="close"
-            variant="ghost"
-            onClick={() => vaultPanel.close()}
-            aria-label={language.t("amicode.vault.close")}
-          />
-        </div>
-
-        <Show when={!selected()}>
-          <Show when={mounts().length > 1}>
-            <div class="flex shrink-0 flex-wrap items-center gap-1.5 border-b border-border-weaker-base px-3 py-2">
-              <For each={mounts()}>
-                {(m) => (
-                  <button
-                    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-[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}
-                    onClick={() => {
-                      setChosenMount(m.id)
-                      setSelected(undefined)
-                    }}
-                  >
-                    {m.id}
-                  </button>
-                )}
-              </For>
-            </div>
-          </Show>
-          <div class="min-h-0 flex-1 overflow-y-auto px-1 py-2">
-            <Show
-              when={listing()}
-              fallback={
-                <div class="px-3 py-2 text-12-regular text-text-weak">
-                  {mountsRaw.loading || listingRaw.loading
-                    ? `${language.t("common.loading")}${language.t("common.loading.ellipsis")}`
-                    : language.t("amicode.vault.empty")}
-                </div>
-              }
-            >
-              {(state) => (
-                <Show
-                  when={"tree" in state() ? (state() as { tree: Dir }) : undefined}
-                  fallback={<div class="px-3 py-2 text-12-regular text-text-weak">{language.t("amicode.vault.error")}</div>}
-                >
-                  {(ok) => (
-                    <>
-                      {renderDir(ok().tree, 0)}
-                      <Show when={(state() as { truncated?: boolean }).truncated}>
-                        <div class="px-3 py-2 text-12-regular text-text-weaker">
-                          {language.t("amicode.vault.truncated")}
-                        </div>
-                      </Show>
-                    </>
-                  )}
-                </Show>
-              )}
-            </Show>
-          </div>
-        </Show>
-
-        <Show when={selected()}>
-          <div class="min-h-0 flex-1 overflow-y-auto px-4 py-3">
-            <Show
-              when={fileBody()}
-              fallback={
-                <div class="text-12-regular text-text-weak">
-                  {language.t("common.loading")}
-                  {language.t("common.loading.ellipsis")}
-                </div>
-              }
-            >
-              {(body) => (
-                <Show
-                  when={"content" in body() ? (body() as { content: string }) : undefined}
-                  fallback={<div class="text-12-regular text-text-weak">{language.t("amicode.vault.error")}</div>}
-                >
-                  {(ok) => (
-                    <Show
-                      when={/\.(md|txt)$/i.test(selected()!.name)}
-                      fallback={
-                        <pre class="overflow-x-auto whitespace-pre rounded-lg bg-background-stronger p-3 font-mono text-12-regular text-text-base">
-                          {ok().content}
-                        </pre>
-                      }
-                    >
-                      <Markdown text={ok().content} cacheKey={`vault:${mount()}:${selected()!.path}`} />
-                    </Show>
-                  )}
-                </Show>
-              )}
-            </Show>
-          </div>
-        </Show>
+        <VaultBrowser onClose={() => vaultPanel.close()} />
       </aside>
     </Show>
   )
diff --git a/packages/app/src/pages/session.tsx b/packages/app/src/pages/session.tsx
index f5949620a..9eae92fbe 100644
--- a/packages/app/src/pages/session.tsx
+++ b/packages/app/src/pages/session.tsx
@@ -1857,19 +1857,7 @@ export default function Page() {
           </Show>
         </div>
 
-        <SessionSidePanel
-          canReview={canReview}
-          diffs={reviewDiffs}
-          diffsReady={reviewReady}
-          empty={reviewEmptyText}
-          hasReview={hasReview}
-          reviewCount={reviewCount}
-          reviewPanel={reviewPanel}
-          activeDiff={tree.activeDiff}
-          focusReviewDiff={focusReviewDiff}
-          reviewSnap={ui.reviewSnap}
-          size={size}
-        />
+        <SessionSidePanel size={size} />
       </div>
 
       <TerminalPanel />
diff --git a/packages/app/src/pages/session/helpers.ts b/packages/app/src/pages/session/helpers.ts
index a1797e554..c896691a7 100644
--- a/packages/app/src/pages/session/helpers.ts
+++ b/packages/app/src/pages/session/helpers.ts
@@ -16,6 +16,8 @@ type TabsInput = {
   normalizeTab: (tab: string) => string
   review?: Accessor<boolean>
   hasReview?: Accessor<boolean>
+  /** the Vault tab (amicode) — a named surface like "context", never a file */
+  vaultOpen?: Accessor<boolean>
 }
 
 export const getSessionKey = (dir: string | undefined, id: string | undefined) => `${dir ?? ""}${id ? `/${id}` : ""}`
@@ -27,6 +29,7 @@ export function shouldShowFileTree(input: { desktopV2: boolean; showFileTree: bo
 export const createSessionTabs = (input: TabsInput) => {
   const review = input.review ?? (() => false)
   const hasReview = input.hasReview ?? (() => false)
+  const vaultOpen = input.vaultOpen ?? (() => false)
   const contextOpen = createMemo(() => input.tabs().active() === "context" || input.tabs().all().includes("context"))
   const openedTabs = createMemo(
     () => {
@@ -35,7 +38,7 @@ export const createSessionTabs = (input: TabsInput) => {
         .tabs()
         .all()
         .flatMap((tab) => {
-          if (tab === "context" || tab === "review") return []
+          if (tab === "context" || tab === "review" || tab === "vault") return []
           const value = input.pathFromTab(tab) ? input.normalizeTab(tab) : tab
           if (seen.has(value)) return []
           seen.add(value)
@@ -48,11 +51,13 @@ export const createSessionTabs = (input: TabsInput) => {
   const activeTab = createMemo(() => {
     const active = input.tabs().active()
     if (active === "context") return active
+    if (active === "vault" && vaultOpen()) return active
     if (active === "review" && review()) return active
     if (active && input.pathFromTab(active)) return input.normalizeTab(active)
 
     const first = openedTabs()[0]
     if (first) return first
+    if (vaultOpen()) return "vault"
     if (contextOpen()) return "context"
     if (review() && hasReview()) return "review"
     return "empty"
diff --git a/packages/app/src/pages/session/session-side-panel.tsx b/packages/app/src/pages/session/session-side-panel.tsx
index bff7c3e26..39d522840 100644
--- a/packages/app/src/pages/session/session-side-panel.tsx
+++ b/packages/app/src/pages/session/session-side-panel.tsx
@@ -8,11 +8,12 @@ import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
 import { Mark } from "@opencode-ai/ui/logo"
 import { DragDropProvider, DragDropSensors, DragOverlay, SortableProvider, closestCenter } from "@thisbeyond/solid-dnd"
 import type { DragEvent } from "@thisbeyond/solid-dnd"
-import type { SnapshotFileDiff, VcsFileDiff } from "@opencode-ai/sdk/v2"
 import { ConstrainDragYAxis, getDraggableId } from "@/utils/solid-dnd"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 
 import FileTree from "@/components/file-tree"
+import { VaultBrowser } from "@/components/vault-browser"
+import { vaultPanel } from "@/context/vault-panel"
 import { SessionContextUsage } from "@/components/session-context-usage"
 import { SessionContextTab, SortableTab, FileVisual } from "@/components/session"
 import { useCommand } from "@/context/command"
@@ -34,25 +35,7 @@ import {
 import { setSessionHandoff } from "@/pages/session/handoff"
 import { useSessionLayout } from "@/pages/session/session-layout"
 
-type RenderDiff = (SnapshotFileDiff & { file: string }) | VcsFileDiff
-
-function renderDiff(value: SnapshotFileDiff | VcsFileDiff): value is RenderDiff {
-  return typeof value.file === "string"
-}
-
-export function SessionSidePanel(props: {
-  canReview: () => boolean
-  diffs: () => (SnapshotFileDiff | VcsFileDiff)[]
-  diffsReady: () => boolean
-  empty: () => string
-  hasReview: () => boolean
-  reviewCount: () => number
-  reviewPanel: () => JSX.Element
-  activeDiff?: string
-  focusReviewDiff: (path: string) => void
-  reviewSnap: boolean
-  size: Sizing
-}) {
+export function SessionSidePanel(props: { size: Sizing }) {
   const layout = useLayout()
   const platform = usePlatform()
   const settings = useSettings()
@@ -67,7 +50,9 @@ export function SessionSidePanel(props: {
   const desktopV2 = () => platform.platform === "desktop" && settings.general.newLayoutDesigns()
   const shown = createMemo(() => !desktopV2() || settings.general.showFileTree())
 
-  const reviewOpen = createMemo(() => isDesktop() && view().reviewPanel.opened())
+  // the tabs-column open state (historically the review panel's flag — the
+  // persisted store key stays, the review UI is gone)
+  const tabsOpen = createMemo(() => isDesktop() && view().reviewPanel.opened())
   const fileOpen = createMemo(
     () =>
       isDesktop() &&
@@ -77,43 +62,14 @@ export function SessionSidePanel(props: {
         opened: layout.fileTree.opened(),
       }),
   )
-  const open = createMemo(() => reviewOpen() || fileOpen())
-  const reviewTab = createMemo(() => isDesktop())
+  const open = createMemo(() => tabsOpen() || fileOpen())
   const panelWidth = createMemo(() => {
     if (!open()) return "0px"
-    if (reviewOpen()) return "auto"
+    if (tabsOpen()) return "auto"
     return `${layout.fileTree.width()}px`
   })
   const treeWidth = createMemo(() => (fileOpen() ? `${layout.fileTree.width()}px` : "0px"))
 
-  const diffs = createMemo(() => props.diffs().filter(renderDiff))
-  const diffFiles = createMemo(() => diffs().map((d) => d.file))
-  const kinds = createMemo(() => {
-    const merge = (a: "add" | "del" | "mix" | undefined, b: "add" | "del" | "mix") => {
-      if (!a) return b
-      if (a === b) return a
-      return "mix" as const
-    }
-
-    const normalize = (p: string) => p.replaceAll("\\\\", "/").replace(/\/+$/, "")
-
-    const out = new Map<string, "add" | "del" | "mix">()
-    for (const diff of diffs()) {
-      const file = normalize(diff.file)
-      const kind = diff.status === "added" ? "add" : diff.status === "deleted" ? "del" : "mix"
-
-      out.set(file, kind)
-
-      const parts = file.split("/")
-      for (const [idx] of parts.slice(0, -1).entries()) {
-        const dir = parts.slice(0, idx + 1).join("/")
-        if (!dir) continue
-        out.set(dir, merge(out.get(dir), kind))
-      }
-    }
-    return out
-  })
-
   const empty = (msg: string) => (
     <div class="h-full flex flex-col">
       <div class="h-6 shrink-0" aria-hidden />
@@ -147,30 +103,32 @@ export function SessionSidePanel(props: {
     setActive: tabs().setActive,
   })
 
+  // vault tab <-> the global vaultPanel store: the titlebar button, palette
+  // command, and context-tree deep-links open the store; inside a session THIS
+  // is the host, so mirror store state into a "vault" tab (and back on close)
+  const vaultOpen = createMemo(() => vaultPanel.opened())
+  createEffect(() => {
+    if (!isDesktop()) return
+    if (vaultPanel.opened()) {
+      if (!view().reviewPanel.opened()) view().reviewPanel.open()
+      tabs().open("vault")
+      tabs().setActive("vault")
+    } else {
+      tabs().close("vault")
+    }
+  })
+
   const tabState = createSessionTabs({
     tabs,
     pathFromTab: file.pathFromTab,
     normalizeTab,
-    review: reviewTab,
-    hasReview: props.canReview,
+    vaultOpen,
   })
   const contextOpen = tabState.contextOpen
   const openedTabs = tabState.openedTabs
   const activeTab = tabState.activeTab
   const activeFileTab = tabState.activeFileTab
 
-  const fileTreeTab = () => layout.fileTree.tab()
-
-  const setFileTreeTabValue = (value: string) => {
-    if (value !== "changes" && value !== "all") return
-    layout.fileTree.setTab(value)
-  }
-
-  const showAllFiles = () => {
-    if (fileTreeTab() !== "changes") return
-    layout.fileTree.setTab("all")
-  }
-
   const [store, setStore] = createStore({
     activeDraggable: undefined as string | undefined,
   })
@@ -227,9 +185,9 @@ export function SessionSidePanel(props: {
         classList={{
           "pointer-events-none": !open(),
           "transition-[width] duration-[240ms] ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width] motion-reduce:transition-none":
-            !props.size.active() && !props.reviewSnap,
+            !props.size.active(),
           "rounded-[10px] shadow-[var(--v2-elevation-raised)] overflow-hidden": settings.general.newLayoutDesigns(),
-          "flex-1": reviewOpen(),
+          "flex-1": tabsOpen(),
         }}
         style={{ width: panelWidth() }}
       >
@@ -241,11 +199,11 @@ export function SessionSidePanel(props: {
             }}
           >
             <div
-              aria-hidden={!reviewOpen()}
-              inert={!reviewOpen()}
+              aria-hidden={!tabsOpen()}
+              inert={!tabsOpen()}
               class="relative min-w-0 h-full flex-1 overflow-hidden bg-background-base"
               classList={{
-                "pointer-events-none": !reviewOpen(),
+                "pointer-events-none": !tabsOpen(),
               }}
             >
               <div class="size-full min-w-0 h-full bg-background-base">
@@ -265,14 +223,22 @@ export function SessionSidePanel(props: {
                           onCleanup(stop)
                         }}
                       >
-                        <Show when={reviewTab() && props.canReview()}>
-                          <Tabs.Trigger value="review">
-                            <div class="flex items-center gap-1.5">
-                              <div>{language.t("session.tab.review")}</div>
-                              <Show when={props.hasReview()}>
-                                <div>{props.reviewCount()}</div>
-                              </Show>
-                            </div>
+                        <Show when={vaultOpen()}>
+                          <Tabs.Trigger
+                            value="vault"
+                            closeButton={
+                              <IconButton
+                                icon="close-small"
+                                variant="ghost"
+                                class="h-5 w-5"
+                                onClick={() => vaultPanel.close()}
+                                aria-label={language.t("amicode.vault.close")}
+                              />
+                            }
+                            hideCloseButton
+                            onMiddleClick={() => vaultPanel.close()}
+                          >
+                            <div>{language.t("amicode.vault.title")}</div>
                           </Tabs.Trigger>
                         </Show>
                         <Show when={contextOpen()}>
@@ -319,7 +285,7 @@ export function SessionSidePanel(props: {
                               class="!rounded-md"
                               onClick={() => {
                                 void import("@/components/dialog-select-file").then((x) => {
-                                  dialog.show(() => <x.DialogSelectFile mode="files" onOpenFile={showAllFiles} />)
+                                  dialog.show(() => <x.DialogSelectFile mode="files" />)
                                 })
                               }}
                               aria-label={language.t("command.file.open")}
@@ -329,9 +295,11 @@ export function SessionSidePanel(props: {
                       </Tabs.List>
                     </div>
 
-                    <Show when={reviewTab() && props.canReview()}>
-                      <Tabs.Content value="review" class="flex flex-col h-full overflow-hidden contain-strict">
-                        <Show when={reviewOpen() && activeTab() === "review"}>{props.reviewPanel()}</Show>
+                    <Show when={vaultOpen()}>
+                      <Tabs.Content value="vault" class="flex flex-col h-full overflow-hidden contain-strict">
+                        <Show when={activeTab() === "vault"}>
+                          <VaultBrowser />
+                        </Show>
                       </Tabs.Content>
                     </Show>
 
@@ -392,67 +360,15 @@ export function SessionSidePanel(props: {
                 style={{ width: treeWidth() }}
               >
                 <div
-                  class="h-full flex flex-col overflow-hidden group/filetree"
-                  classList={{ "border-l border-border-weaker-base": reviewOpen() }}
+                  class="h-full flex flex-col overflow-hidden group/filetree bg-background-stronger px-3"
+                  classList={{ "border-l border-border-weaker-base": tabsOpen() }}
                 >
-                  <Tabs
-                    variant="pill"
-                    value={fileTreeTab()}
-                    onChange={setFileTreeTabValue}
-                    class="h-full"
-                    data-scope="filetree"
-                  >
-                    <Tabs.List>
-                      <Tabs.Trigger value="changes" class="flex-1" classes={{ button: "w-full" }}>
-                        {props.reviewCount()}{" "}
-                        {language.t(
-                          props.reviewCount() === 1 ? "session.review.change.one" : "session.review.change.other",
-                        )}
-                      </Tabs.Trigger>
-                      <Tabs.Trigger value="all" class="flex-1" classes={{ button: "w-full" }}>
-                        {language.t("session.files.all")}
-                      </Tabs.Trigger>
-                    </Tabs.List>
-                    <Tabs.Content value="changes" class="bg-background-stronger px-3 py-0">
-                      <Switch>
-                        <Match when={props.hasReview() || !props.diffsReady()}>
-                          <Show
-                            when={props.diffsReady()}
-                            fallback={
-                              <div class="px-2 py-2 text-12-regular text-text-weak">
-                                {language.t("common.loading")}
-                                {language.t("common.loading.ellipsis")}
-                              </div>
-                            }
-                          >
-                            <FileTree
-                              path=""
-                              class="pt-3"
-                              allowed={diffFiles()}
-                              kinds={kinds()}
-                              draggable={false}
-                              active={props.activeDiff}
-                              onFileClick={(node) => props.focusReviewDiff(node.path)}
-                            />
-                          </Show>
-                        </Match>
-                      </Switch>
-                    </Tabs.Content>
-                    <Tabs.Content value="all" class="bg-background-stronger px-3 py-0">
-                      <Switch>
-                        <Match when={nofiles()}>{empty(language.t("session.files.empty"))}</Match>
-                        <Match when={true}>
-                          <FileTree
-                            path=""
-                            class="pt-3"
-                            modified={diffFiles()}
-                            kinds={kinds()}
-                            onFileClick={(node) => openTab(file.tab(node.path))}
-                          />
-                        </Match>
-                      </Switch>
-                    </Tabs.Content>
-                  </Tabs>
+                  <Switch>
+                    <Match when={nofiles()}>{empty(language.t("session.files.empty"))}</Match>
+                    <Match when={true}>
+                      <FileTree path="" class="pt-3" onFileClick={(node) => openTab(file.tab(node.path))} />
+                    </Match>
+                  </Switch>
                 </div>
                 <Show when={fileOpen()}>
                   <div onPointerDown={() => props.size.start()}>