refactor(inbox): kami literary rewrite — drop tiles, cards, red stripe

The Inbox rendered every row as a heavy card: a 36x36 solid-fill icon
tile in ink-blue / destructive / warm-silver, a rounded border, a 3pt
red left stripe on urgent items, and a hover that fired a drop shadow
plus translate-y. Six loud signals, all fighting for the reader, all
breaking kami rules (no pure-hue tiles, no red accents outside
destructive buttons, no hard drop shadows, no unnecessary chrome).

Per Jony + Jobs consensus the surface collapses to one quiet canvas:

  - 36x36 color tile  -> removed. Icon is an 18px inline glyph, single
    ink-blue stroke for every type. Type meaning lives in the glyph
    shape (ShieldCheck / XCircle / Eye / ChatCircle / ...), not in
    background color.
  - 3pt red severity stripe -> removed. Urgency compresses to one
    signal: a 5px ink-blue dot before the timestamp, visible only for
    critical/high rows. Title also shifts from font-medium to
    font-semibold at the same threshold so the row carries a little
    more weight without shouting.
  - Card chrome (border, rounded, bg-card) -> removed. Rows sit flat
    on parchment, separated by a single border-b at --border/60
    hairline. Reads like a printed contents page instead of a trello
    board of cards.
  - Hover shadow-md + -translate-y-px -> removed (kami rule 8 bans
    hard drop shadows). Hover tints the row with bg-muted/40, which
    is the kami whisper-shadow equivalent for a list item.

AttentionRow gains a variant prop ("card" | "line", default "card")
so Dashboard's three existing call-sites keep their card rendering
untouched. The "line" branch rejects iconTileBg / rowBgClass /
borderAccentClass overrides — the two variants are orthogonal, not a
half-mixed code path.

inbox-helpers.tsx sheds every token that became dead after the
rewrite: typeConfig.color (constant var(--primary) for every type
after Jony's unification), severityColors, severityBorderClass, and
the unused bg field. Inbox routes icon color through tone="info"
instead of passing the redundant iconColor per row.

Note: the page shows 6 duplicate "Escalation from Maya Rodriguez"
rows and 5 duplicate "Escalation from Taylor Park" rows. That is a
backend dedup bug (same entity + same severity pushed multiple
times), not a visual issue. Flag for a dedicated follow-up; do not
paper over it in the renderer.

Reviewed by Karpathy against /karpathy-guidelines:
  - Surgical: pass
  - No overcomplication: pass
  - Variants orthogonal: pass
  - Orphans cleared: pass
  - API stability for Dashboard callers: pass
  - request_changes item (typeConfig.color is a constant dressed as
    data) addressed in this commit by dropping the field and routing
    through tone="info".

Typecheck and build:verify clean.

src/renderer/components/inbox/Inbox.tsx

@@ -8,7 +8,7 @@ import {
 import type { InboxItem, InboxItemType, SectionId } from "@shared/types";
 import { timeAgo } from "../../lib/formatters";
 import { useT } from "../../i18n";
-import { typeConfig, severityBorderClass } from "./inbox-helpers";
+import { typeConfig } from "./inbox-helpers";
 import { AttentionRow } from "../ui";
 
 interface InboxProps {
@@ -104,12 +104,15 @@ export function Inbox({ items, onNavigate }: InboxProps) {
           <div className="mt-1 text-[12px] text-muted-foreground">{t("inbox.noItemsNow")}</div>
         </div>
       ) : (
-        <div className="space-y-1.5">
+        <div>
           <AnimatePresence>
             {filteredItems.map((item, i) => {
               const config = typeConfig[item.type];
               const Icon = config.icon;
-              const title = <span className="truncate">{item.title}</span>;
+              const isUrgent = item.severity === "critical" || item.severity === "high";
+              const title = (
+                <span className={`truncate ${isUrgent ? "font-semibold" : "font-medium"}`}>{item.title}</span>
+              );
               const subtitle = (
                 <span className="flex items-center gap-2">
                   {item.agentName ? (
@@ -119,6 +122,9 @@ export function Inbox({ items, onNavigate }: InboxProps) {
                     </span>
                   ) : null}
                   <span className="truncate">{item.subtitle.slice(0, 80)}</span>
+                  {isUrgent ? (
+                    <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-primary" aria-hidden="true" />
+                  ) : null}
                   <span className="shrink-0 tabular-nums">{timeAgo(item.createdAt)}</span>
                 </span>
               );
@@ -127,11 +133,9 @@ export function Inbox({ items, onNavigate }: InboxProps) {
                   key={item.id}
                   index={i}
                   icon={Icon}
-                  iconColor={config.color}
-                  iconTileBg={config.bg}
-                  iconWeight="fill"
-                  rowBgClass="bg-card"
-                  borderAccentClass={`border-l-[3px] border-border hover:shadow-md hover:-translate-y-px ${severityBorderClass(item.severity)}`}
+                  tone="info"
+                  iconWeight={isUrgent ? "bold" : "regular"}
+                  variant="line"
                   title={title}
                   subtitle={subtitle}
                   onClick={() => handleItemClick(item)}

src/renderer/components/inbox/inbox-helpers.tsx

@@ -10,27 +10,15 @@ import {
 import type { InboxItemType } from "@shared/types";
 import { Card } from "../ui";
 
-export const typeConfig: Record<InboxItemType, { icon: React.ElementType; color: string; bg: string; label: string }> = {
-  pending_approval: { icon: ShieldCheck, color: "var(--destructive)", bg: "var(--muted-foreground)", label: "Approval" },
-  failed_run: { icon: XCircle, color: "var(--destructive)", bg: "var(--destructive)", label: "Failed Run" },
-  budget_warning: { icon: CurrencyCircleDollar, color: "var(--destructive)", bg: "var(--muted-foreground)", label: "Budget" },
-  blocked_task: { icon: Warning, color: "var(--destructive)", bg: "var(--destructive)", label: "Blocked" },
-  review_needed: { icon: Eye, color: "var(--primary)", bg: "var(--primary)", label: "Review" },
-  agent_message: { icon: ChatCircle, color: "var(--primary)", bg: "var(--primary)", label: "Message" },
+export const typeConfig: Record<InboxItemType, { icon: React.ElementType; label: string }> = {
+  pending_approval: { icon: ShieldCheck, label: "Approval" },
+  failed_run: { icon: XCircle, label: "Failed Run" },
+  budget_warning: { icon: CurrencyCircleDollar, label: "Budget" },
+  blocked_task: { icon: Warning, label: "Blocked" },
+  review_needed: { icon: Eye, label: "Review" },
+  agent_message: { icon: ChatCircle, label: "Message" },
 };
 
-export const severityColors: Record<string, string> = {
-  critical: "border-l-[color:var(--destructive)]",
-  high: "border-l-[color:var(--destructive)]",
-  medium: "border-l-[color:var(--primary)]",
-  low: "border-l-[color:var(--border)]",
-};
-
-export function severityBorderClass(severity: string | null | undefined): string {
-  if (!severity) return "border-l-[color:var(--border)]";
-  return severityColors[severity] ?? "border-l-[color:var(--border)]";
-}
-
 export function CompactMetric({ label, value, tone = "default", subtitle }: {
   label: string;
   value: string | number;