fix(amicode): pad entity-view modal + remove card-family gold tint

packages/app/src/pages/session/message-timeline.tsx

@@ -338,7 +338,7 @@ export function MessageTimeline(props: {
         <Dialog title={`AMICO · ${entityLabel(kind)}`} fit>
           {/* fit-to-content goes near-fullscreen on run entities (long paths +
               history) — cap the panel and let it scroll internally instead */}
-          <div style={{ width: "min(680px, 90vw)", "max-height": "68vh", "overflow-y": "auto" }}>
+          <div style={{ width: "100%", "max-height": "68vh", "overflow-y": "auto" }}>
             <AmicodeEntityView
               view={problemView()}
               kind={kind}
@@ -362,17 +362,19 @@ export function MessageTimeline(props: {
     dialog.show(
       () => (
         <Dialog title={language.t("amicode.problems.title")} fit>
-          <AmicodeProblemSwitcher
-            view={problemsView()}
-            onStartPrompt={(text) => {
-              dialog.close()
-              startPrompt(prompt, text)
-            }}
-            onRetry={() => void refetchProblems()}
-            retryLabel={language.t("amicode.retry")}
-            openLabel={language.t("amicode.problems.open")}
-            newLabel={language.t("amicode.problems.new")}
-          />
+          <div style={{ width: "100%", "max-height": "68vh", "overflow-y": "auto" }}>
+            <AmicodeProblemSwitcher
+              view={problemsView()}
+              onStartPrompt={(text) => {
+                dialog.close()
+                startPrompt(prompt, text)
+              }}
+              onRetry={() => void refetchProblems()}
+              retryLabel={language.t("amicode.retry")}
+              openLabel={language.t("amicode.problems.open")}
+              newLabel={language.t("amicode.problems.new")}
+            />
+          </div>
         </Dialog>
       ),
       () => setSwitcherOpen(false),

packages/ui/src/amicode/amicode.css

@@ -64,11 +64,10 @@
   max-width: 100%;
   min-width: 0;
   text-align: left;
-  /* No side rail — identity comes from the accent-tinted wash + hairline and
-     the bright H-mark. A faint gold border reads as "AMICO" without a bar. */
-  border: 1px solid color-mix(in srgb, var(--v2-icon-icon-accent) 22%, var(--v2-border-border-base));
+  /* Rail-free and tint-free: neutral hairline + surface, no gold accent. */
+  border: 1px solid var(--v2-border-border-base);
   border-radius: 9px;
-  background: color-mix(in srgb, var(--v2-icon-icon-accent) 6%, var(--v2-background-bg-layer-01));
+  background: var(--v2-background-bg-layer-01);
   padding: 5px 9px 5px 10px;
   font-size: 12.5px;
   line-height: 17px;
@@ -84,11 +83,9 @@
   cursor: pointer;
 }
 [data-component="amicode-card"][data-clickable="true"]:hover {
-  background: color-mix(in srgb, var(--v2-icon-icon-accent) 11%, var(--v2-background-bg-layer-01));
-  border-color: color-mix(in srgb, var(--v2-icon-icon-accent) 42%, var(--v2-border-border-base));
-  box-shadow:
-    var(--v2-elevation-raised, 0 1px 2px rgba(0, 0, 0, 0.25)),
-    0 0 0 3px color-mix(in srgb, var(--v2-icon-icon-accent) 8%, transparent);
+  background: var(--v2-background-bg-layer-02);
+  border-color: var(--v2-border-border-strong);
+  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);
@@ -209,7 +206,7 @@
 [data-component="amicode-entity-view"] {
   display: flex;
   flex-direction: column;
-  padding: 4px 4px 0;
+  padding: 4px 20px 20px;
   color: var(--v2-text-text-base);
 }
 
@@ -527,11 +524,10 @@
 [data-component="amicode-entity-rail"],
 [data-component="amicode-ask-card"],
 [data-component="amicode-run-window"] {
-  /* Same rail-free treatment as the receipt card: gold-tinted hairline + a
-     whisper of accent wash, so the whole AMICO family shares one identity. */
-  border: 1px solid color-mix(in srgb, var(--v2-icon-icon-accent) 20%, var(--v2-border-border-base));
+  /* Rail-free and tint-free: neutral hairline + surface across the AMICO family. */
+  border: 1px solid var(--v2-border-border-base);
   border-radius: 9px;
-  background: color-mix(in srgb, var(--v2-icon-icon-accent) 5%, var(--v2-background-bg-layer-01));
+  background: var(--v2-background-bg-layer-01);
   box-shadow: var(--v2-elevation-elements, 0 0.5px 0.5px rgba(0, 0, 0, 0.2));
 }
 
@@ -572,6 +568,6 @@
   transition: background 0.16s ease, border-color 0.16s ease;
 }
 [data-component="amicode-run-window"]:hover {
-  border-color: color-mix(in srgb, var(--v2-icon-icon-accent) 40%, var(--v2-border-border-base));
-  background: color-mix(in srgb, var(--v2-icon-icon-accent) 8%, var(--v2-background-bg-layer-01));
+  border-color: var(--v2-border-border-strong);
+  background: var(--v2-background-bg-layer-02);
 }

packages/ui/src/amicode/problem-switcher.tsx

@@ -1,4 +1,5 @@
 import { For, Show, createMemo } from "solid-js"
+import { DateTime } from "luxon"
 import type { ProblemsView } from "./problem"
 
 // AMICODE ring-2 problem switcher (spec B): dialog BODY opened from the rail's
@@ -8,6 +9,12 @@ import type { ProblemsView } from "./problem"
 // agent calls amicode_problem, which moves the active pointer (all writes
 // through ring 0). Presentation-only; the app owns fetching + the Dialog.
 
+// Raw ISO recorded-at → relative ("2 hours ago"); falls back to the raw string.
+function relTime(iso: string): string {
+  const dt = DateTime.fromISO(iso)
+  return dt.isValid ? (dt.toRelative() ?? iso) : iso
+}
+
 export function AmicodeProblemSwitcher(props: {
   view: ProblemsView | undefined // undefined → loading skeleton
   onStartPrompt: (text: string) => void
@@ -22,7 +29,7 @@ export function AmicodeProblemSwitcher(props: {
   })
 
   return (
-    <div class="flex flex-col gap-2 pl-6 pr-2.5 pb-3" data-component="amicode-problem-switcher">
+    <div class="flex flex-col gap-2 px-5 pt-1 pb-3" data-component="amicode-problem-switcher">
       <Show
         when={props.view}
         fallback={<div class="h-8 rounded-md bg-surface-raised-base animate-pulse" aria-hidden />}
@@ -70,7 +77,7 @@ export function AmicodeProblemSwitcher(props: {
                   <div class="flex-1" />
                   <span class="text-12-regular text-text-weak shrink-0">{problem.entityKinds.length} entities</span>
                   <Show when={problem.recorded}>
-                    <span class="text-11-regular text-text-weaker shrink-0">{problem.recorded}</span>
+                    <span class="text-11-regular text-text-weaker shrink-0">{relTime(problem.recorded ?? "")}</span>
                   </Show>
                   <button
                     type="button"

packages/ui/src/components/message-part.css

@@ -841,8 +841,6 @@
     flex: 1;
     min-height: 0;
     padding: 8px 8px 0;
-    /* amicode: Amico accent treatment (display-only) */
-    border-left: 3px solid var(--v2-icon-icon-accent);
   }
 
   [data-slot="question-header"] {