UI polish: design-system + a11y audit sweep (stacked on #65)

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

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

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

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

packages/app/src/components/titlebar.tsx

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

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

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

packages/app/src/design-polish.css

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

packages/app/src/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">

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"] {

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",

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

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",