From 3b1193c4be69d0c4ba8062d786c4f5483bf2ac9e Mon Sep 17 00:00:00 2001
From: Bolin Huang <ibh@live.com>
Date: Thu, 25 Jun 2026 13:43:18 -0700
Subject: [PATCH 01/18] polish(ui): introduce archival technical style

---
 web/DESIGN_SPEC.md                           | 29 ++++++----
 web/src/app/globals.css                      | 61 +++++++++++++++-----
 web/src/app/layout.tsx                       | 12 +++-
 web/src/app/page.tsx                         |  9 ++-
 web/src/components/DashboardLayoutEditor.tsx | 55 ++++++++++++------
 web/src/components/Header.tsx                |  8 +--
 web/src/components/Tree/TreeModule.tsx       | 47 ++++++++-------
 web/src/components/Tree/TreeServer.tsx       | 12 ++--
 web/tailwind.config.js                       |  1 +
 9 files changed, 155 insertions(+), 79 deletions(-)

diff --git a/web/DESIGN_SPEC.md b/web/DESIGN_SPEC.md
index 788be14..d975e2d 100644
--- a/web/DESIGN_SPEC.md
+++ b/web/DESIGN_SPEC.md
@@ -1,20 +1,23 @@
-# OPAQUE Design Spec — Quiet Instrumentality
+# OPAQUE Design Spec — Archival Technical Minimalism
 
-> 安静的工具主义。这份文档是所有 UI 决策的最终依据；新代码与这里冲突时，改代码。
+> 档案式工具面板美学。这份文档是所有 UI 决策的最终依据；新代码与这里冲突时，改代码。
 
 ## The idea
 
-OPAQUE reads like a well-set technical almanac: high information density delivered in a low voice.
-Editorial minimalism meets wabi-sabi — serif carries the human voice, monospace carries the honest
-numbers, whitespace carries the breathing room. **Restraint itself is the identity: others add
-effects; we don't.**
+OPAQUE reads like a personal dashboard printed as a technical archive: high information density,
+quiet hierarchy, paper texture, instrument-panel precision. Editorial minimalism meets archival
+spec sheets — serif carries the human voice, condensed labels carry the catalog system, monospace
+carries the honest numbers, whitespace carries the breathing room. **Restraint itself is the
+identity: others add effects; we don't.**
 
-Three lineages, one temperament:
+Four lineages, one temperament:
 
 - **Wabi-sabi** — paper-like surfaces, hairline rules, asymmetry tolerated, time made visible
   ("2 days ago" matters more than a spinner).
 - **Editorial minimalism** — Goudy serif titles set like book headings; content reads in columns;
   typography is the layout.
+- **Technical archives** — spec labels, section codes, thin rules, small tables, diagrams, and
+  instrument-like status marks. Every artifact-looking element must encode information.
 - **Quiet brutalism** — sharp 2px corners, honest borders, no decoration that isn't information.
 
 ## Hard rules
@@ -25,10 +28,13 @@ These are enforceable review criteria, not vibes.
 
 - `font-serif` (Sorts Mill Goudy, 400) — **titles only**: welcome line, section titles, panel/module
   titles, group headers. Never for body, buttons, labels, or data.
+- `font-condensed` (IBM Plex Sans Condensed) — catalog labels: section codes, buttons, settings
+  labels, spec chips, small uppercase headers. It gives the interface its archival / instrument
+  tone without turning body copy into a poster.
 - `font-body` (system sans) — everything that is prose or UI copy.
 - `font-mono` — all data: numbers, timestamps, urls, types, meta lines, status words.
 - Numerals never jitter: `font-variant-numeric: tabular-nums` is set globally on `body`.
-- Labels above data use `text-[10px] uppercase tracking-wider text-text-tertiary`.
+- Labels above data use `.opaque-spec-label`; cross-section kickers use `.opaque-kicker`.
 
 ### Color
 
@@ -50,6 +56,8 @@ These are enforceable review criteria, not vibes.
 - `accent-blue` is legacy; do not introduce new uses on the dashboard.
 - Alpha-on-token utilities (e.g. `bg-surface-sunken/50`) are fine — the tokens resolve to full
   colors, so Tailwind composites the alpha normally in both themes.
+- The page canvas uses a subtle CSS-only paper grain and faint horizontal rule. It must remain
+  barely perceptible: if it competes with text, it is too strong.
 
 ### Motion
 
@@ -97,9 +105,8 @@ Non-interactive things (section titles, labels, data rows that aren't links) nev
 - **Each glanceable widget is its own top-level section.** weather / calendar / markets are
   independent single-module roots (not bundled under a "Today" section), each freely placeable and
   resizable on the layout grid. media and posts remain multi-module roots.
-- Section title sits flush-left above its content with **no trailing rule**; the title alone opens
-  the section. The page has no decorative hairlines between a title and its body, and no rule above
-  the welcome line.
+- Section headers are small spec strips: a non-persistent section code (`A:01 / weather`), a serif
+  title, and one hairline rule. The code/rule provide location and grouping, not decoration.
 - Depth comes from spacing, not elevation or outlines. Radius is `rounded-sm` (2px) where anything
   is rounded; `rounded-full` only for status dots and pills.
 - A single module root carries its name once — in the section header. The module panel inside it
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index e898884..b1c9319 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -31,13 +31,13 @@
         --text-secondary: rgba(26, 29, 31, 0.75);
         --text-tertiary: rgba(26, 29, 31, 0.55);
         --text-muted: rgba(26, 29, 31, 0.4);
-        --background: 255 255 255;
-        --surface: rgba(250, 250, 250, 0.8);
-        --surface-elevated: 255 255 255;
-        --surface-sunken: 247 247 247;
-        --border-light: 237 237 237;
-        --border-medium: 222 222 222;
-        --border-strong: 208 208 208;
+        --background: 250 248 243;
+        --surface: rgba(248, 246, 240, 0.82);
+        --surface-elevated: 253 251 246;
+        --surface-sunken: 243 241 235;
+        --border-light: 229 226 218;
+        --border-medium: 214 210 201;
+        --border-strong: 196 191 181;
         --ink-100: 247 247 247;
         --ink-200: 232 232 232;
         --ink-300: 218 218 218;
@@ -47,8 +47,10 @@
         --ink-700: 85 85 85;
         --ink-800: 51 51 51;
         --ink-900: 17 17 17;
-        /* The page canvas (one notch off pure white, like aged paper). */
-        --page-bg: #FAFAFA;
+        /* The page canvas: warm off-white, closer to archival paper than UI chrome. */
+        --page-bg: #F7F5EF;
+        --paper-grain: rgba(17, 17, 17, 0.026);
+        --paper-rule: rgba(17, 17, 17, 0.018);
     }
 
     /* --- Dark palette: ink canvas, paper-light text. Quiet Instrumentality
@@ -90,12 +92,19 @@
         --ink-800: 214 215 220;
         --ink-900: 236 237 240;
         --page-bg: #161719;
+        --paper-grain: rgba(236, 237, 240, 0.026);
+        --paper-rule: rgba(236, 237, 240, 0.018);
     }
 
     body {
         @apply min-h-screen bg-[var(--page-bg)] font-body text-text-primary;
         /* Numerals never jitter (see DESIGN_SPEC.md — Type). */
         font-variant-numeric: tabular-nums;
+        background-image:
+            radial-gradient(circle at 1px 1px, var(--paper-grain) 0.65px, transparent 0),
+            linear-gradient(to bottom, transparent 0, transparent 23px, var(--paper-rule) 24px);
+        background-size: 18px 18px, 100% 24px;
+        background-attachment: fixed;
     }
 
     /* Quiet focus: a thin ink outline, visible everywhere, never a glow.
@@ -722,14 +731,38 @@ input:-webkit-autofill:active {
         @apply border-border-medium bg-surface-elevated;
     }
 
+    .opaque-paper-surface {
+        @apply border border-border-light bg-surface-elevated/70;
+    }
+
+    .opaque-kicker {
+        @apply font-condensed text-[10px] font-medium uppercase tracking-[0.16em] text-text-tertiary;
+    }
+
+    .opaque-spec-label {
+        @apply font-condensed text-[10px] font-medium uppercase tracking-[0.14em] text-text-tertiary;
+    }
+
+    .opaque-spec-value {
+        @apply font-mono text-[10px] text-text-secondary;
+    }
+
+    .opaque-spec-chip {
+        @apply inline-flex items-center gap-1.5 rounded-sm border border-border-light bg-surface-sunken/45 px-2 py-1 font-condensed text-[10px] font-medium uppercase tracking-[0.12em] text-text-secondary;
+    }
+
+    .opaque-technical-rule {
+        @apply h-px w-full bg-border-light;
+    }
+
     .opaque-button {
         height: var(--opaque-header-control-size);
-        @apply inline-flex items-center justify-center gap-1 rounded-sm border border-border-light bg-surface-elevated px-2 text-[11px] font-medium text-text-secondary transition-colors hover:border-border-medium hover:bg-surface-sunken hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-45;
+        @apply inline-flex items-center justify-center gap-1 rounded-sm border border-border-light bg-surface-elevated px-2 font-condensed text-[11px] font-medium uppercase tracking-[0.08em] text-text-secondary transition-colors hover:border-border-medium hover:bg-surface-sunken hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-45;
     }
 
     .opaque-button-primary {
         height: var(--opaque-header-control-size);
-        @apply inline-flex items-center justify-center gap-1 rounded-sm border border-text-primary bg-text-primary px-2 text-[11px] font-medium text-background transition-colors hover:bg-ink-800 disabled:cursor-not-allowed disabled:border-border-medium disabled:bg-surface-sunken disabled:text-text-muted;
+        @apply inline-flex items-center justify-center gap-1 rounded-sm border border-text-primary bg-text-primary px-2 font-condensed text-[11px] font-medium uppercase tracking-[0.08em] text-background transition-colors hover:bg-ink-800 disabled:cursor-not-allowed disabled:border-border-medium disabled:bg-surface-sunken disabled:text-text-muted;
     }
 
     .opaque-button svg,
@@ -743,7 +776,7 @@ input:-webkit-autofill:active {
     }
 
     .opaque-input {
-        @apply h-8 rounded-sm border border-border-light bg-surface-elevated px-2 text-xs text-text-primary transition-colors placeholder:text-text-muted focus:border-border-strong focus:ring-0;
+        @apply h-8 rounded-sm border border-border-light bg-surface-elevated/70 px-2 text-xs text-text-primary transition-colors placeholder:text-text-muted focus:border-border-strong focus:ring-0;
     }
 
     .opaque-toolbar-icon {
@@ -759,7 +792,7 @@ input:-webkit-autofill:active {
 
     .opaque-toolbar-counter {
         height: var(--opaque-header-control-size);
-        @apply hidden items-center gap-1 rounded-sm border border-border-light bg-surface-sunken px-2 font-mono text-[11px] font-medium text-text-primary md:flex;
+        @apply hidden items-center gap-1 rounded-sm border border-border-light bg-surface-sunken px-2 font-condensed text-[11px] font-medium uppercase tracking-[0.1em] text-text-primary md:flex;
     }
 
     .opaque-toolbar-counter svg {
@@ -822,7 +855,7 @@ input:-webkit-autofill:active {
     }
 
     .opaque-menu-badge {
-        @apply rounded-sm bg-ink-900 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-background;
+        @apply rounded-sm bg-ink-900 px-1.5 py-0.5 font-condensed text-[9px] font-semibold uppercase tracking-[0.14em] text-background;
     }
 
     .opaque-menu-account {
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
index 473c216..600a597 100644
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Sorts_Mill_Goudy } from "next/font/google";
+import { IBM_Plex_Sans_Condensed, Sorts_Mill_Goudy } from "next/font/google";
 import CookieBanner from "@/components/CookieBanner";
 import ThemeWatcher from "@/components/ThemeWatcher";
 import { THEME_INIT_SCRIPT } from "@/lib/theme";
@@ -14,6 +14,14 @@ const serif = Sorts_Mill_Goudy({
   variable: "--font-serif",
 });
 
+const condensed = IBM_Plex_Sans_Condensed({
+  subsets: ["latin"],
+  weight: ["400", "500", "600"],
+  style: ["normal"],
+  display: "swap",
+  variable: "--font-condensed",
+});
+
 export const metadata: Metadata = {
   title: "OPAQUE",
   description: "A quiet dashboard for bookmarks, applications, and servers",
@@ -29,7 +37,7 @@ export default function RootLayout({
   // React hydrates. This suppresses only the <html> element's own attribute
   // diff, not any child-subtree mismatch.
   return (
-    <html lang="en" className={serif.variable} suppressHydrationWarning>
+    <html lang="en" className={`${serif.variable} ${condensed.variable}`} suppressHydrationWarning>
       <head>
         {/* Apply the saved theme before first paint so there is no flash. */}
         <script dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }} />
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 49368e5..c15516a 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -302,7 +302,7 @@ export default function HomePage() {
     return (
       <div className="flex min-h-screen flex-col">
         <Header />
-        <div className="relative flex-1 overflow-x-hidden bg-background">
+        <div className="relative flex-1 overflow-x-hidden">
           <div className="relative z-10 flex min-h-full items-center justify-center">
             <div className="space-y-6 text-center">
               <div className="mx-auto h-0.5 w-12 bg-accent-red"></div>
@@ -333,7 +333,7 @@ export default function HomePage() {
     return (
       <div className="flex min-h-screen flex-col">
         <Header />
-        <div className="relative flex-1 overflow-x-hidden bg-background">
+        <div className="relative flex-1 overflow-x-hidden">
           <div className="relative z-10 flex min-h-full items-center justify-center">
             <div className="space-y-6 text-center">
               <div className="mx-auto h-0.5 w-8 bg-ink-300"></div>
@@ -370,10 +370,13 @@ export default function HomePage() {
         onReset={resetEditing}
         onSave={saveDashboard}
       />
-      <div className="relative flex-1 overflow-x-hidden bg-background">
+      <div className="relative flex-1 overflow-x-hidden">
         <div className="relative z-10">
           <div id="dashboard" className="relative flex min-h-full flex-col py-16">
             <div className="mx-6 animate-fade-in sm:mx-8 lg:mx-12 xl:mx-16 2xl:mx-24">
+              <div className="opaque-kicker mb-2">
+                OPAQUE / DAILY INDEX
+              </div>
               <p className="font-serif text-sm leading-none text-text-secondary">
                 {timeGreeting()}{displayName ? `, ${displayName}` : ''}
                 <span className="text-text-muted"> — {todayLabel()}</span>
diff --git a/web/src/components/DashboardLayoutEditor.tsx b/web/src/components/DashboardLayoutEditor.tsx
index a524d55..1f21e86 100644
--- a/web/src/components/DashboardLayoutEditor.tsx
+++ b/web/src/components/DashboardLayoutEditor.tsx
@@ -41,6 +41,16 @@ const SWITCH_BUFFER = 10;
 const MAX_CLONE_WIDTH = 360;
 // How many skeleton blocks the clone draws at most (one per branch, capped).
 const MAX_CLONE_SKELETON_BLOCKS = 4;
+const SECTION_CODES: Record<string, string> = {
+  weather: 'A:01',
+  calendar: 'A:02',
+  markets: 'A:03',
+  media: 'B:01',
+  posts: 'B:02',
+  bookmarks: 'C:01',
+  applications: 'C:02',
+  servers: 'D:01',
+};
 
 interface GeomCell {
   root: string;
@@ -634,21 +644,32 @@ interface SectionHeaderProps {
 
 function SectionHeader({ tree, isEditing, isPlaceholder, onGripPointerDown }: SectionHeaderProps) {
   const label = getRootLabel(tree.root);
+  const code = SECTION_CODES[tree.root] || 'X:00';
   return (
-    <div className={`mb-6 flex items-center gap-3 transition-opacity ${isPlaceholder ? 'opacity-30' : ''}`}>
-      {isEditing && (
-        <button
-          type="button"
-          onPointerDown={(event) => onGripPointerDown(event, tree.root, label)}
-          className="inline-flex h-5 w-5 cursor-grab touch-none items-center justify-center text-text-muted transition-colors hover:text-text-primary active:cursor-grabbing"
-          aria-label={`Drag ${label} section`}
-          title="Drag to rearrange"
-        >
-          <IconGripVertical className="h-3.5 w-3.5" />
-        </button>
-      )}
-      <div className="font-serif text-base leading-none text-text-secondary">
-        {label}
+    <div className={`mb-5 transition-opacity ${isPlaceholder ? 'opacity-30' : ''}`}>
+      <div className="flex items-end justify-between gap-4 border-b border-border-light pb-2">
+        <div className="flex min-w-0 items-end gap-3">
+          {isEditing && (
+            <button
+              type="button"
+              onPointerDown={(event) => onGripPointerDown(event, tree.root, label)}
+              className="inline-flex h-5 w-5 cursor-grab touch-none items-center justify-center text-text-muted transition-colors hover:text-text-primary active:cursor-grabbing"
+              aria-label={`Drag ${label} section`}
+              title="Drag to rearrange"
+            >
+              <IconGripVertical className="h-3.5 w-3.5" />
+            </button>
+          )}
+          <div className="min-w-0">
+            <div className="opaque-kicker">{code} / {tree.root}</div>
+            <div className="mt-1 truncate font-serif text-base leading-none text-text-secondary">
+              {label}
+            </div>
+          </div>
+        </div>
+        <div className="hidden flex-shrink-0 font-condensed text-[10px] font-medium uppercase tracking-[0.14em] text-text-muted sm:block">
+          {isEditing ? 'layout unlocked' : 'field notes'}
+        </div>
       </div>
     </div>
   );
@@ -666,7 +687,7 @@ function PlaceholderBody({ label, height }: { label: string; height: number | nu
       style={style}
       className="flex items-center justify-center rounded-sm border border-dashed border-border-strong bg-surface-sunken/40"
     >
-      <span className="font-mono text-[10px] uppercase tracking-wider text-text-tertiary">
+      <span className="opaque-kicker">
         {label}
       </span>
     </div>
@@ -696,10 +717,10 @@ function DragClone({ drag }: { drag: DragState }) {
     // data-overlay: a drag is in progress and owns Escape (cancels the drag);
     // the global Escape shortcut must not also discard the whole draft.
     <div style={style} data-overlay className="opaque-drag-clone">
-      <div className="flex h-full w-full flex-col overflow-hidden rounded-md border border-border-medium bg-surface-elevated shadow-floating">
+      <div className="flex h-full w-full flex-col overflow-hidden rounded-sm border border-border-medium bg-surface-elevated shadow-floating">
         <div className="flex items-center gap-2 border-b border-border-light px-3 py-2">
           <IconGripVertical className="h-3.5 w-3.5 text-text-muted" />
-          <span className="truncate text-xs font-medium uppercase tracking-wider text-text-secondary">
+          <span className="truncate font-condensed text-xs font-medium uppercase tracking-[0.14em] text-text-secondary">
             {drag.label}
           </span>
         </div>
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index e772942..a7600f1 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -126,15 +126,15 @@ export default function Header({
     };
 
     return (
-        <header className="flex min-h-14 items-center justify-between border-b border-border-light bg-surface-elevated/95 px-6 py-3">
+        <header className="flex min-h-14 items-center justify-between border-b border-border-light bg-surface-elevated/80 px-6 py-3 backdrop-blur-[2px]">
             {pathname === '/login' && (
-                <div className="text-sm font-medium tracking-tight text-text-primary">OPAQUE</div>
+                <div className="font-condensed text-sm font-semibold uppercase tracking-[0.18em] text-text-primary">OPAQUE</div>
             )}
 
             {pathname === '/' && (
                 <nav className="flex w-full items-center justify-between gap-4">
                     <div className="flex min-w-0 items-center gap-4">
-                        <div className="text-sm font-medium tracking-tight text-text-primary">
+                        <div className="font-condensed text-sm font-semibold uppercase tracking-[0.18em] text-text-primary">
                             OPAQUE
                         </div>
                         <form onSubmit={handleSearchSubmit} className="relative hidden sm:block">
@@ -157,7 +157,7 @@ export default function Header({
 
                     <div className="flex items-center gap-2">
                         {isEditing && (
-                            <div className="hidden items-center gap-2 text-xs text-text-tertiary sm:flex">
+                            <div className="hidden items-center gap-2 font-condensed text-[10px] font-medium uppercase tracking-[0.14em] text-text-tertiary sm:flex">
                                 <span className="h-1.5 w-1.5 rounded-full bg-accent-green" />
                                 <span>{isDirty ? 'Editing' : 'No changes'}</span>
                             </div>
diff --git a/web/src/components/Tree/TreeModule.tsx b/web/src/components/Tree/TreeModule.tsx
index 5c68a63..5e29929 100644
--- a/web/src/components/Tree/TreeModule.tsx
+++ b/web/src/components/Tree/TreeModule.tsx
@@ -78,7 +78,7 @@ interface TabDragProps {
 }
 
 const moduleInputClass = 'opaque-input w-full focus:border-ink-700';
-const moduleLabelClass = 'block text-[10px] uppercase tracking-wider text-text-tertiary';
+const moduleLabelClass = 'opaque-spec-label block';
 const moduleGridBaseClass = 'relative grid w-full max-w-[90rem] flex-1 items-start justify-start';
 const moduleGridGapClass = 'gap-x-6 gap-y-8 md:gap-x-10 md:gap-y-10';
 const mediaModuleGridGapClass = 'gap-x-8 gap-y-10 md:gap-x-12 md:gap-y-12';
@@ -948,22 +948,25 @@ function ModulePanel({
           {header ? (
             <div className="min-w-0 flex-1">{header}</div>
           ) : (
-            <div className="flex min-w-0 items-center gap-2">
+            <div className="flex min-w-0 items-start gap-2">
               <ModuleIcon moduleType={module.moduleType} className="h-4 w-4 text-text-secondary" />
-              {href ? (
-                <a
-                  href={href}
-                  target="_blank"
-                  rel="noreferrer"
-                  className="truncate font-serif text-sm text-text-primary no-underline hover:text-ink-800"
-                >
-                  {title}
-                </a>
-              ) : (
-                <div className="truncate font-serif text-sm text-text-primary">
-                  {title}
-                </div>
-              )}
+              <div className="min-w-0">
+                <div className="opaque-kicker">{module.moduleType}</div>
+                {href ? (
+                  <a
+                    href={href}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="mt-0.5 block truncate font-serif text-sm text-text-primary no-underline hover:text-ink-800"
+                  >
+                    {title}
+                  </a>
+                ) : (
+                  <div className="mt-0.5 truncate font-serif text-sm text-text-primary">
+                    {title}
+                  </div>
+                )}
+              </div>
             </div>
           )}
           {statusControl}
@@ -1001,7 +1004,7 @@ function WeatherWidget({ module, state }: { module: ModuleBranch; state: ModuleD
           <div className="mt-3 grid grid-cols-3 gap-2">
             {data.forecast.map((day) => (
               <div key={day.date} title={day.condition}>
-                <div className="text-[10px] uppercase tracking-wider text-text-tertiary">
+                <div className="opaque-spec-label">
                   {formatWeekday(day.date)}
                 </div>
                 <div className="mt-1 font-mono text-[11px] text-text-secondary">
@@ -1299,7 +1302,7 @@ function MediaInsightBadges({ items }: { items: MediaInsight[] }) {
                 : 'border-border-light bg-surface-sunken/35'
           }`}
         >
-          <div className="truncate font-mono text-[9px] uppercase tracking-wider text-text-muted">
+          <div className="opaque-spec-label truncate text-text-muted">
             {item.label}
           </div>
           <div className="mt-0.5 truncate font-mono text-[11px] font-medium text-text-primary">
@@ -1326,7 +1329,7 @@ function MediaLibraryChips({
   return (
     <div className="mb-4">
       <div className="mb-2 flex items-center justify-between gap-2">
-        <div className="text-[10px] uppercase tracking-wider text-text-tertiary">
+        <div className="opaque-spec-label">
           Libraries
         </div>
         <div className="font-mono text-[10px] text-text-muted">
@@ -1337,7 +1340,7 @@ function MediaLibraryChips({
         {visible.map((library) => (
           <span
             key={library.id}
-            className="inline-flex max-w-full items-center gap-1.5 rounded-sm border border-border-light bg-surface-sunken/45 px-2 py-1 text-[11px] text-text-secondary"
+            className="inline-flex max-w-full items-center gap-1.5 rounded-sm border border-border-light bg-surface-sunken/45 px-2 py-1 font-condensed text-[11px] font-medium text-text-secondary"
             title={[
               library.name,
               library.type ? formatMediaLibraryType(library.type) : '',
@@ -1347,7 +1350,7 @@ function MediaLibraryChips({
             <span className="min-w-0 max-w-[9rem] truncate text-text-primary">{library.name}</span>
             <span className="font-mono text-[10px] text-text-muted">{formatCompactNumber(library.count)}</span>
             {library.type && (
-              <span className="hidden font-mono text-[9px] uppercase tracking-wider text-text-muted sm:inline">
+              <span className="hidden text-[9px] uppercase tracking-[0.12em] text-text-muted sm:inline">
                 {formatMediaLibraryType(library.type)}
               </span>
             )}
@@ -1410,7 +1413,7 @@ function MediaRecentlyAdded({
           type="button"
           onClick={() => setCollapsed(!collapsed)}
           aria-expanded={!collapsed}
-          className="group/recenthead flex items-center gap-1 text-[10px] uppercase tracking-wider text-text-tertiary transition-colors hover:text-text-secondary"
+          className="group/recenthead flex items-center gap-1 font-condensed text-[10px] font-medium uppercase tracking-[0.14em] text-text-tertiary transition-colors hover:text-text-secondary"
         >
           <IconChevronDown
             className={`h-3 w-3 transition-transform ${collapsed ? '-rotate-90' : ''}`}
diff --git a/web/src/components/Tree/TreeServer.tsx b/web/src/components/Tree/TreeServer.tsx
index 8dce484..03f71d6 100644
--- a/web/src/components/Tree/TreeServer.tsx
+++ b/web/src/components/Tree/TreeServer.tsx
@@ -448,7 +448,7 @@ const TreeServer: React.FC<TreeServerProps> = ({
 function ServerStatusBadge({ online }: { online: boolean }) {
   return (
     <div
-      className={`inline-flex h-5 items-center gap-1.5 rounded-sm border px-1.5 font-mono text-[10px] uppercase tracking-wider ${
+      className={`inline-flex h-5 items-center gap-1.5 rounded-sm border px-1.5 font-condensed text-[10px] font-medium uppercase tracking-[0.14em] ${
         online
           ? 'border-accent-green/25 bg-accent-green/10 text-accent-green-dark'
           : 'border-border-light bg-surface-sunken/45 text-text-muted'
@@ -474,7 +474,7 @@ function ServerUsageCard({
   return (
     <div className="rounded-sm border border-border-light bg-surface-sunken/35 p-2">
       <div className="flex items-center justify-between">
-        <div className="text-[10px] uppercase tracking-wider text-text-tertiary">{label}</div>
+        <div className="opaque-spec-label">{label}</div>
         <div className="font-mono text-[11px] font-medium text-text-primary">{valueLabel}</div>
       </div>
       <div className="mt-2 h-1 w-full overflow-hidden rounded-full bg-border-light">
@@ -491,7 +491,7 @@ function ServerLoadCard({ stats }: { stats: ServerStats }) {
   return (
     <div className="rounded-sm border border-border-light bg-surface-sunken/35 p-2">
       <div className="flex items-center justify-between gap-2">
-        <div className="text-[10px] uppercase tracking-wider text-text-tertiary">Load</div>
+        <div className="opaque-spec-label">Load</div>
         <div className="font-mono text-[11px] font-medium text-text-primary">
           {stats.cores || '-'} cores
         </div>
@@ -538,7 +538,7 @@ function ServerFactChips({ stats }: { stats: ServerStats }) {
           key={fact.label}
           className="inline-flex min-w-0 items-center gap-1.5 rounded-sm border border-border-light bg-surface-elevated/60 px-2 py-1 text-[11px]"
         >
-          <span className="font-mono text-[9px] uppercase tracking-wider text-text-muted">
+          <span className="font-condensed text-[9px] font-medium uppercase tracking-[0.14em] text-text-muted">
             {fact.label}
           </span>
           <span className="max-w-[8.5rem] truncate font-mono text-[10px] text-text-secondary">
@@ -571,7 +571,7 @@ function ServerTrendPanel({
   return (
     <div className="mt-4 rounded-sm border border-border-light bg-surface-sunken/25 p-2.5">
       <div className="mb-2 flex items-center justify-between gap-2">
-        <div className="text-[10px] uppercase tracking-wider text-text-tertiary">
+        <div className="opaque-spec-label">
           24h telemetry
         </div>
         <div className="font-mono text-[10px] text-text-muted">
@@ -607,7 +607,7 @@ function TrendMini({
   return (
     <div className="min-w-0 rounded-sm bg-surface-elevated/60 p-1.5">
       <div className="mb-1 flex items-center justify-between gap-1">
-        <div className="truncate text-[10px] uppercase tracking-wider text-text-tertiary">
+        <div className="opaque-spec-label truncate">
           {label}
         </div>
         <div className="truncate font-mono text-[10px] text-text-secondary">
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 2d0a8e4..35e64f6 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -52,6 +52,7 @@ module.exports = {
       fontFamily: {
         body: ['ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', "Segoe UI", 'Roboto', "Helvetica Neue", 'Arial', "Noto Sans", 'sans-serif'],
         mono: ['ui-monospace', 'SFMono-Regular', '"SF Mono"', 'Menlo', 'Consolas', '"Liberation Mono"', 'monospace'],
+        condensed: ['var(--font-condensed)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
         serif: ['var(--font-serif)', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
       },
       borderRadius: {

From 0873a5ed583fdb977f67776e7d782e6b9f4977d6 Mon Sep 17 00:00:00 2001
From: Bolin Huang <ibh@live.com>
Date: Thu, 25 Jun 2026 23:30:17 -0700
Subject: [PATCH 02/18] Revert "polish(ui): introduce archival technical style"

This reverts commit 3b1193c4be69d0c4ba8062d786c4f5483bf2ac9e.
---
 web/DESIGN_SPEC.md                           | 29 ++++------
 web/src/app/globals.css                      | 61 +++++---------------
 web/src/app/layout.tsx                       | 12 +---
 web/src/app/page.tsx                         |  9 +--
 web/src/components/DashboardLayoutEditor.tsx | 55 ++++++------------
 web/src/components/Header.tsx                |  8 +--
 web/src/components/Tree/TreeModule.tsx       | 47 +++++++--------
 web/src/components/Tree/TreeServer.tsx       | 12 ++--
 web/tailwind.config.js                       |  1 -
 9 files changed, 79 insertions(+), 155 deletions(-)

diff --git a/web/DESIGN_SPEC.md b/web/DESIGN_SPEC.md
index d975e2d..788be14 100644
--- a/web/DESIGN_SPEC.md
+++ b/web/DESIGN_SPEC.md
@@ -1,23 +1,20 @@
-# OPAQUE Design Spec — Archival Technical Minimalism
+# OPAQUE Design Spec — Quiet Instrumentality
 
-> 档案式工具面板美学。这份文档是所有 UI 决策的最终依据；新代码与这里冲突时，改代码。
+> 安静的工具主义。这份文档是所有 UI 决策的最终依据；新代码与这里冲突时，改代码。
 
 ## The idea
 
-OPAQUE reads like a personal dashboard printed as a technical archive: high information density,
-quiet hierarchy, paper texture, instrument-panel precision. Editorial minimalism meets archival
-spec sheets — serif carries the human voice, condensed labels carry the catalog system, monospace
-carries the honest numbers, whitespace carries the breathing room. **Restraint itself is the
-identity: others add effects; we don't.**
+OPAQUE reads like a well-set technical almanac: high information density delivered in a low voice.
+Editorial minimalism meets wabi-sabi — serif carries the human voice, monospace carries the honest
+numbers, whitespace carries the breathing room. **Restraint itself is the identity: others add
+effects; we don't.**
 
-Four lineages, one temperament:
+Three lineages, one temperament:
 
 - **Wabi-sabi** — paper-like surfaces, hairline rules, asymmetry tolerated, time made visible
   ("2 days ago" matters more than a spinner).
 - **Editorial minimalism** — Goudy serif titles set like book headings; content reads in columns;
   typography is the layout.
-- **Technical archives** — spec labels, section codes, thin rules, small tables, diagrams, and
-  instrument-like status marks. Every artifact-looking element must encode information.
 - **Quiet brutalism** — sharp 2px corners, honest borders, no decoration that isn't information.
 
 ## Hard rules
@@ -28,13 +25,10 @@ These are enforceable review criteria, not vibes.
 
 - `font-serif` (Sorts Mill Goudy, 400) — **titles only**: welcome line, section titles, panel/module
   titles, group headers. Never for body, buttons, labels, or data.
-- `font-condensed` (IBM Plex Sans Condensed) — catalog labels: section codes, buttons, settings
-  labels, spec chips, small uppercase headers. It gives the interface its archival / instrument
-  tone without turning body copy into a poster.
 - `font-body` (system sans) — everything that is prose or UI copy.
 - `font-mono` — all data: numbers, timestamps, urls, types, meta lines, status words.
 - Numerals never jitter: `font-variant-numeric: tabular-nums` is set globally on `body`.
-- Labels above data use `.opaque-spec-label`; cross-section kickers use `.opaque-kicker`.
+- Labels above data use `text-[10px] uppercase tracking-wider text-text-tertiary`.
 
 ### Color
 
@@ -56,8 +50,6 @@ These are enforceable review criteria, not vibes.
 - `accent-blue` is legacy; do not introduce new uses on the dashboard.
 - Alpha-on-token utilities (e.g. `bg-surface-sunken/50`) are fine — the tokens resolve to full
   colors, so Tailwind composites the alpha normally in both themes.
-- The page canvas uses a subtle CSS-only paper grain and faint horizontal rule. It must remain
-  barely perceptible: if it competes with text, it is too strong.
 
 ### Motion
 
@@ -105,8 +97,9 @@ Non-interactive things (section titles, labels, data rows that aren't links) nev
 - **Each glanceable widget is its own top-level section.** weather / calendar / markets are
   independent single-module roots (not bundled under a "Today" section), each freely placeable and
   resizable on the layout grid. media and posts remain multi-module roots.
-- Section headers are small spec strips: a non-persistent section code (`A:01 / weather`), a serif
-  title, and one hairline rule. The code/rule provide location and grouping, not decoration.
+- Section title sits flush-left above its content with **no trailing rule**; the title alone opens
+  the section. The page has no decorative hairlines between a title and its body, and no rule above
+  the welcome line.
 - Depth comes from spacing, not elevation or outlines. Radius is `rounded-sm` (2px) where anything
   is rounded; `rounded-full` only for status dots and pills.
 - A single module root carries its name once — in the section header. The module panel inside it
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index b1c9319..e898884 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -31,13 +31,13 @@
         --text-secondary: rgba(26, 29, 31, 0.75);
         --text-tertiary: rgba(26, 29, 31, 0.55);
         --text-muted: rgba(26, 29, 31, 0.4);
-        --background: 250 248 243;
-        --surface: rgba(248, 246, 240, 0.82);
-        --surface-elevated: 253 251 246;
-        --surface-sunken: 243 241 235;
-        --border-light: 229 226 218;
-        --border-medium: 214 210 201;
-        --border-strong: 196 191 181;
+        --background: 255 255 255;
+        --surface: rgba(250, 250, 250, 0.8);
+        --surface-elevated: 255 255 255;
+        --surface-sunken: 247 247 247;
+        --border-light: 237 237 237;
+        --border-medium: 222 222 222;
+        --border-strong: 208 208 208;
         --ink-100: 247 247 247;
         --ink-200: 232 232 232;
         --ink-300: 218 218 218;
@@ -47,10 +47,8 @@
         --ink-700: 85 85 85;
         --ink-800: 51 51 51;
         --ink-900: 17 17 17;
-        /* The page canvas: warm off-white, closer to archival paper than UI chrome. */
-        --page-bg: #F7F5EF;
-        --paper-grain: rgba(17, 17, 17, 0.026);
-        --paper-rule: rgba(17, 17, 17, 0.018);
+        /* The page canvas (one notch off pure white, like aged paper). */
+        --page-bg: #FAFAFA;
     }
 
     /* --- Dark palette: ink canvas, paper-light text. Quiet Instrumentality
@@ -92,19 +90,12 @@
         --ink-800: 214 215 220;
         --ink-900: 236 237 240;
         --page-bg: #161719;
-        --paper-grain: rgba(236, 237, 240, 0.026);
-        --paper-rule: rgba(236, 237, 240, 0.018);
     }
 
     body {
         @apply min-h-screen bg-[var(--page-bg)] font-body text-text-primary;
         /* Numerals never jitter (see DESIGN_SPEC.md — Type). */
         font-variant-numeric: tabular-nums;
-        background-image:
-            radial-gradient(circle at 1px 1px, var(--paper-grain) 0.65px, transparent 0),
-            linear-gradient(to bottom, transparent 0, transparent 23px, var(--paper-rule) 24px);
-        background-size: 18px 18px, 100% 24px;
-        background-attachment: fixed;
     }
 
     /* Quiet focus: a thin ink outline, visible everywhere, never a glow.
@@ -731,38 +722,14 @@ input:-webkit-autofill:active {
         @apply border-border-medium bg-surface-elevated;
     }
 
-    .opaque-paper-surface {
-        @apply border border-border-light bg-surface-elevated/70;
-    }
-
-    .opaque-kicker {
-        @apply font-condensed text-[10px] font-medium uppercase tracking-[0.16em] text-text-tertiary;
-    }
-
-    .opaque-spec-label {
-        @apply font-condensed text-[10px] font-medium uppercase tracking-[0.14em] text-text-tertiary;
-    }
-
-    .opaque-spec-value {
-        @apply font-mono text-[10px] text-text-secondary;
-    }
-
-    .opaque-spec-chip {
-        @apply inline-flex items-center gap-1.5 rounded-sm border border-border-light bg-surface-sunken/45 px-2 py-1 font-condensed text-[10px] font-medium uppercase tracking-[0.12em] text-text-secondary;
-    }
-
-    .opaque-technical-rule {
-        @apply h-px w-full bg-border-light;
-    }
-
     .opaque-button {
         height: var(--opaque-header-control-size);
-        @apply inline-flex items-center justify-center gap-1 rounded-sm border border-border-light bg-surface-elevated px-2 font-condensed text-[11px] font-medium uppercase tracking-[0.08em] text-text-secondary transition-colors hover:border-border-medium hover:bg-surface-sunken hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-45;
+        @apply inline-flex items-center justify-center gap-1 rounded-sm border border-border-light bg-surface-elevated px-2 text-[11px] font-medium text-text-secondary transition-colors hover:border-border-medium hover:bg-surface-sunken hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-45;
     }
 
     .opaque-button-primary {
         height: var(--opaque-header-control-size);
-        @apply inline-flex items-center justify-center gap-1 rounded-sm border border-text-primary bg-text-primary px-2 font-condensed text-[11px] font-medium uppercase tracking-[0.08em] text-background transition-colors hover:bg-ink-800 disabled:cursor-not-allowed disabled:border-border-medium disabled:bg-surface-sunken disabled:text-text-muted;
+        @apply inline-flex items-center justify-center gap-1 rounded-sm border border-text-primary bg-text-primary px-2 text-[11px] font-medium text-background transition-colors hover:bg-ink-800 disabled:cursor-not-allowed disabled:border-border-medium disabled:bg-surface-sunken disabled:text-text-muted;
     }
 
     .opaque-button svg,
@@ -776,7 +743,7 @@ input:-webkit-autofill:active {
     }
 
     .opaque-input {
-        @apply h-8 rounded-sm border border-border-light bg-surface-elevated/70 px-2 text-xs text-text-primary transition-colors placeholder:text-text-muted focus:border-border-strong focus:ring-0;
+        @apply h-8 rounded-sm border border-border-light bg-surface-elevated px-2 text-xs text-text-primary transition-colors placeholder:text-text-muted focus:border-border-strong focus:ring-0;
     }
 
     .opaque-toolbar-icon {
@@ -792,7 +759,7 @@ input:-webkit-autofill:active {
 
     .opaque-toolbar-counter {
         height: var(--opaque-header-control-size);
-        @apply hidden items-center gap-1 rounded-sm border border-border-light bg-surface-sunken px-2 font-condensed text-[11px] font-medium uppercase tracking-[0.1em] text-text-primary md:flex;
+        @apply hidden items-center gap-1 rounded-sm border border-border-light bg-surface-sunken px-2 font-mono text-[11px] font-medium text-text-primary md:flex;
     }
 
     .opaque-toolbar-counter svg {
@@ -855,7 +822,7 @@ input:-webkit-autofill:active {
     }
 
     .opaque-menu-badge {
-        @apply rounded-sm bg-ink-900 px-1.5 py-0.5 font-condensed text-[9px] font-semibold uppercase tracking-[0.14em] text-background;
+        @apply rounded-sm bg-ink-900 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-background;
     }
 
     .opaque-menu-account {
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
index 600a597..473c216 100644
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { IBM_Plex_Sans_Condensed, Sorts_Mill_Goudy } from "next/font/google";
+import { Sorts_Mill_Goudy } from "next/font/google";
 import CookieBanner from "@/components/CookieBanner";
 import ThemeWatcher from "@/components/ThemeWatcher";
 import { THEME_INIT_SCRIPT } from "@/lib/theme";
@@ -14,14 +14,6 @@ const serif = Sorts_Mill_Goudy({
   variable: "--font-serif",
 });
 
-const condensed = IBM_Plex_Sans_Condensed({
-  subsets: ["latin"],
-  weight: ["400", "500", "600"],
-  style: ["normal"],
-  display: "swap",
-  variable: "--font-condensed",
-});
-
 export const metadata: Metadata = {
   title: "OPAQUE",
   description: "A quiet dashboard for bookmarks, applications, and servers",
@@ -37,7 +29,7 @@ export default function RootLayout({
   // React hydrates. This suppresses only the <html> element's own attribute
   // diff, not any child-subtree mismatch.
   return (
-    <html lang="en" className={`${serif.variable} ${condensed.variable}`} suppressHydrationWarning>
+    <html lang="en" className={serif.variable} suppressHydrationWarning>
       <head>
         {/* Apply the saved theme before first paint so there is no flash. */}
         <script dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }} />
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index c15516a..49368e5 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -302,7 +302,7 @@ export default function HomePage() {
     return (
       <div className="flex min-h-screen flex-col">
         <Header />
-        <div className="relative flex-1 overflow-x-hidden">
+        <div className="relative flex-1 overflow-x-hidden bg-background">
           <div className="relative z-10 flex min-h-full items-center justify-center">
             <div className="space-y-6 text-center">
               <div className="mx-auto h-0.5 w-12 bg-accent-red"></div>
@@ -333,7 +333,7 @@ export default function HomePage() {
     return (
       <div className="flex min-h-screen flex-col">
         <Header />
-        <div className="relative flex-1 overflow-x-hidden">
+        <div className="relative flex-1 overflow-x-hidden bg-background">
           <div className="relative z-10 flex min-h-full items-center justify-center">
             <div className="space-y-6 text-center">
               <div className="mx-auto h-0.5 w-8 bg-ink-300"></div>
@@ -370,13 +370,10 @@ export default function HomePage() {
         onReset={resetEditing}
         onSave={saveDashboard}
       />
-      <div className="relative flex-1 overflow-x-hidden">
+      <div className="relative flex-1 overflow-x-hidden bg-background">
         <div className="relative z-10">
           <div id="dashboard" className="relative flex min-h-full flex-col py-16">
             <div className="mx-6 animate-fade-in sm:mx-8 lg:mx-12 xl:mx-16 2xl:mx-24">
-              <div className="opaque-kicker mb-2">
-                OPAQUE / DAILY INDEX
-              </div>
               <p className="font-serif text-sm leading-none text-text-secondary">
                 {timeGreeting()}{displayName ? `, ${displayName}` : ''}
                 <span className="text-text-muted"> — {todayLabel()}</span>
diff --git a/web/src/components/DashboardLayoutEditor.tsx b/web/src/components/DashboardLayoutEditor.tsx
index 1f21e86..a524d55 100644
--- a/web/src/components/DashboardLayoutEditor.tsx
+++ b/web/src/components/DashboardLayoutEditor.tsx
@@ -41,16 +41,6 @@ const SWITCH_BUFFER = 10;
 const MAX_CLONE_WIDTH = 360;
 // How many skeleton blocks the clone draws at most (one per branch, capped).
 const MAX_CLONE_SKELETON_BLOCKS = 4;
-const SECTION_CODES: Record<string, string> = {
-  weather: 'A:01',
-  calendar: 'A:02',
-  markets: 'A:03',
-  media: 'B:01',
-  posts: 'B:02',
-  bookmarks: 'C:01',
-  applications: 'C:02',
-  servers: 'D:01',
-};
 
 interface GeomCell {
   root: string;
@@ -644,32 +634,21 @@ interface SectionHeaderProps {
 
 function SectionHeader({ tree, isEditing, isPlaceholder, onGripPointerDown }: SectionHeaderProps) {
   const label = getRootLabel(tree.root);
-  const code = SECTION_CODES[tree.root] || 'X:00';
   return (
-    <div className={`mb-5 transition-opacity ${isPlaceholder ? 'opacity-30' : ''}`}>
-      <div className="flex items-end justify-between gap-4 border-b border-border-light pb-2">
-        <div className="flex min-w-0 items-end gap-3">
-          {isEditing && (
-            <button
-              type="button"
-              onPointerDown={(event) => onGripPointerDown(event, tree.root, label)}
-              className="inline-flex h-5 w-5 cursor-grab touch-none items-center justify-center text-text-muted transition-colors hover:text-text-primary active:cursor-grabbing"
-              aria-label={`Drag ${label} section`}
-              title="Drag to rearrange"
-            >
-              <IconGripVertical className="h-3.5 w-3.5" />
-            </button>
-          )}
-          <div className="min-w-0">
-            <div className="opaque-kicker">{code} / {tree.root}</div>
-            <div className="mt-1 truncate font-serif text-base leading-none text-text-secondary">
-              {label}
-            </div>
-          </div>
-        </div>
-        <div className="hidden flex-shrink-0 font-condensed text-[10px] font-medium uppercase tracking-[0.14em] text-text-muted sm:block">
-          {isEditing ? 'layout unlocked' : 'field notes'}
-        </div>
+    <div className={`mb-6 flex items-center gap-3 transition-opacity ${isPlaceholder ? 'opacity-30' : ''}`}>
+      {isEditing && (
+        <button
+          type="button"
+          onPointerDown={(event) => onGripPointerDown(event, tree.root, label)}
+          className="inline-flex h-5 w-5 cursor-grab touch-none items-center justify-center text-text-muted transition-colors hover:text-text-primary active:cursor-grabbing"
+          aria-label={`Drag ${label} section`}
+          title="Drag to rearrange"
+        >
+          <IconGripVertical className="h-3.5 w-3.5" />
+        </button>
+      )}
+      <div className="font-serif text-base leading-none text-text-secondary">
+        {label}
       </div>
     </div>
   );
@@ -687,7 +666,7 @@ function PlaceholderBody({ label, height }: { label: string; height: number | nu
       style={style}
       className="flex items-center justify-center rounded-sm border border-dashed border-border-strong bg-surface-sunken/40"
     >
-      <span className="opaque-kicker">
+      <span className="font-mono text-[10px] uppercase tracking-wider text-text-tertiary">
         {label}
       </span>
     </div>
@@ -717,10 +696,10 @@ function DragClone({ drag }: { drag: DragState }) {
     // data-overlay: a drag is in progress and owns Escape (cancels the drag);
     // the global Escape shortcut must not also discard the whole draft.
     <div style={style} data-overlay className="opaque-drag-clone">
-      <div className="flex h-full w-full flex-col overflow-hidden rounded-sm border border-border-medium bg-surface-elevated shadow-floating">
+      <div className="flex h-full w-full flex-col overflow-hidden rounded-md border border-border-medium bg-surface-elevated shadow-floating">
         <div className="flex items-center gap-2 border-b border-border-light px-3 py-2">
           <IconGripVertical className="h-3.5 w-3.5 text-text-muted" />
-          <span className="truncate font-condensed text-xs font-medium uppercase tracking-[0.14em] text-text-secondary">
+          <span className="truncate text-xs font-medium uppercase tracking-wider text-text-secondary">
             {drag.label}
           </span>
         </div>
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index a7600f1..e772942 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -126,15 +126,15 @@ export default function Header({
     };
 
     return (
-        <header className="flex min-h-14 items-center justify-between border-b border-border-light bg-surface-elevated/80 px-6 py-3 backdrop-blur-[2px]">
+        <header className="flex min-h-14 items-center justify-between border-b border-border-light bg-surface-elevated/95 px-6 py-3">
             {pathname === '/login' && (
-                <div className="font-condensed text-sm font-semibold uppercase tracking-[0.18em] text-text-primary">OPAQUE</div>
+                <div className="text-sm font-medium tracking-tight text-text-primary">OPAQUE</div>
             )}
 
             {pathname === '/' && (
                 <nav className="flex w-full items-center justify-between gap-4">
                     <div className="flex min-w-0 items-center gap-4">
-                        <div className="font-condensed text-sm font-semibold uppercase tracking-[0.18em] text-text-primary">
+                        <div className="text-sm font-medium tracking-tight text-text-primary">
                             OPAQUE
                         </div>
                         <form onSubmit={handleSearchSubmit} className="relative hidden sm:block">
@@ -157,7 +157,7 @@ export default function Header({
 
                     <div className="flex items-center gap-2">
                         {isEditing && (
-                            <div className="hidden items-center gap-2 font-condensed text-[10px] font-medium uppercase tracking-[0.14em] text-text-tertiary sm:flex">
+                            <div className="hidden items-center gap-2 text-xs text-text-tertiary sm:flex">
                                 <span className="h-1.5 w-1.5 rounded-full bg-accent-green" />
                                 <span>{isDirty ? 'Editing' : 'No changes'}</span>
                             </div>
diff --git a/web/src/components/Tree/TreeModule.tsx b/web/src/components/Tree/TreeModule.tsx
index 5e29929..5c68a63 100644
--- a/web/src/components/Tree/TreeModule.tsx
+++ b/web/src/components/Tree/TreeModule.tsx
@@ -78,7 +78,7 @@ interface TabDragProps {
 }
 
 const moduleInputClass = 'opaque-input w-full focus:border-ink-700';
-const moduleLabelClass = 'opaque-spec-label block';
+const moduleLabelClass = 'block text-[10px] uppercase tracking-wider text-text-tertiary';
 const moduleGridBaseClass = 'relative grid w-full max-w-[90rem] flex-1 items-start justify-start';
 const moduleGridGapClass = 'gap-x-6 gap-y-8 md:gap-x-10 md:gap-y-10';
 const mediaModuleGridGapClass = 'gap-x-8 gap-y-10 md:gap-x-12 md:gap-y-12';
@@ -948,25 +948,22 @@ function ModulePanel({
           {header ? (
             <div className="min-w-0 flex-1">{header}</div>
           ) : (
-            <div className="flex min-w-0 items-start gap-2">
+            <div className="flex min-w-0 items-center gap-2">
               <ModuleIcon moduleType={module.moduleType} className="h-4 w-4 text-text-secondary" />
-              <div className="min-w-0">
-                <div className="opaque-kicker">{module.moduleType}</div>
-                {href ? (
-                  <a
-                    href={href}
-                    target="_blank"
-                    rel="noreferrer"
-                    className="mt-0.5 block truncate font-serif text-sm text-text-primary no-underline hover:text-ink-800"
-                  >
-                    {title}
-                  </a>
-                ) : (
-                  <div className="mt-0.5 truncate font-serif text-sm text-text-primary">
-                    {title}
-                  </div>
-                )}
-              </div>
+              {href ? (
+                <a
+                  href={href}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="truncate font-serif text-sm text-text-primary no-underline hover:text-ink-800"
+                >
+                  {title}
+                </a>
+              ) : (
+                <div className="truncate font-serif text-sm text-text-primary">
+                  {title}
+                </div>
+              )}
             </div>
           )}
           {statusControl}
@@ -1004,7 +1001,7 @@ function WeatherWidget({ module, state }: { module: ModuleBranch; state: ModuleD
           <div className="mt-3 grid grid-cols-3 gap-2">
             {data.forecast.map((day) => (
               <div key={day.date} title={day.condition}>
-                <div className="opaque-spec-label">
+                <div className="text-[10px] uppercase tracking-wider text-text-tertiary">
                   {formatWeekday(day.date)}
                 </div>
                 <div className="mt-1 font-mono text-[11px] text-text-secondary">
@@ -1302,7 +1299,7 @@ function MediaInsightBadges({ items }: { items: MediaInsight[] }) {
                 : 'border-border-light bg-surface-sunken/35'
           }`}
         >
-          <div className="opaque-spec-label truncate text-text-muted">
+          <div className="truncate font-mono text-[9px] uppercase tracking-wider text-text-muted">
             {item.label}
           </div>
           <div className="mt-0.5 truncate font-mono text-[11px] font-medium text-text-primary">
@@ -1329,7 +1326,7 @@ function MediaLibraryChips({
   return (
     <div className="mb-4">
       <div className="mb-2 flex items-center justify-between gap-2">
-        <div className="opaque-spec-label">
+        <div className="text-[10px] uppercase tracking-wider text-text-tertiary">
           Libraries
         </div>
         <div className="font-mono text-[10px] text-text-muted">
@@ -1340,7 +1337,7 @@ function MediaLibraryChips({
         {visible.map((library) => (
           <span
             key={library.id}
-            className="inline-flex max-w-full items-center gap-1.5 rounded-sm border border-border-light bg-surface-sunken/45 px-2 py-1 font-condensed text-[11px] font-medium text-text-secondary"
+            className="inline-flex max-w-full items-center gap-1.5 rounded-sm border border-border-light bg-surface-sunken/45 px-2 py-1 text-[11px] text-text-secondary"
             title={[
               library.name,
               library.type ? formatMediaLibraryType(library.type) : '',
@@ -1350,7 +1347,7 @@ function MediaLibraryChips({
             <span className="min-w-0 max-w-[9rem] truncate text-text-primary">{library.name}</span>
             <span className="font-mono text-[10px] text-text-muted">{formatCompactNumber(library.count)}</span>
             {library.type && (
-              <span className="hidden text-[9px] uppercase tracking-[0.12em] text-text-muted sm:inline">
+              <span className="hidden font-mono text-[9px] uppercase tracking-wider text-text-muted sm:inline">
                 {formatMediaLibraryType(library.type)}
               </span>
             )}
@@ -1413,7 +1410,7 @@ function MediaRecentlyAdded({
           type="button"
           onClick={() => setCollapsed(!collapsed)}
           aria-expanded={!collapsed}
-          className="group/recenthead flex items-center gap-1 font-condensed text-[10px] font-medium uppercase tracking-[0.14em] text-text-tertiary transition-colors hover:text-text-secondary"
+          className="group/recenthead flex items-center gap-1 text-[10px] uppercase tracking-wider text-text-tertiary transition-colors hover:text-text-secondary"
         >
           <IconChevronDown
             className={`h-3 w-3 transition-transform ${collapsed ? '-rotate-90' : ''}`}
diff --git a/web/src/components/Tree/TreeServer.tsx b/web/src/components/Tree/TreeServer.tsx
index 03f71d6..8dce484 100644
--- a/web/src/components/Tree/TreeServer.tsx
+++ b/web/src/components/Tree/TreeServer.tsx
@@ -448,7 +448,7 @@ const TreeServer: React.FC<TreeServerProps> = ({
 function ServerStatusBadge({ online }: { online: boolean }) {
   return (
     <div
-      className={`inline-flex h-5 items-center gap-1.5 rounded-sm border px-1.5 font-condensed text-[10px] font-medium uppercase tracking-[0.14em] ${
+      className={`inline-flex h-5 items-center gap-1.5 rounded-sm border px-1.5 font-mono text-[10px] uppercase tracking-wider ${
         online
           ? 'border-accent-green/25 bg-accent-green/10 text-accent-green-dark'
           : 'border-border-light bg-surface-sunken/45 text-text-muted'
@@ -474,7 +474,7 @@ function ServerUsageCard({
   return (
     <div className="rounded-sm border border-border-light bg-surface-sunken/35 p-2">
       <div className="flex items-center justify-between">
-        <div className="opaque-spec-label">{label}</div>
+        <div className="text-[10px] uppercase tracking-wider text-text-tertiary">{label}</div>
         <div className="font-mono text-[11px] font-medium text-text-primary">{valueLabel}</div>
       </div>
       <div className="mt-2 h-1 w-full overflow-hidden rounded-full bg-border-light">
@@ -491,7 +491,7 @@ function ServerLoadCard({ stats }: { stats: ServerStats }) {
   return (
     <div className="rounded-sm border border-border-light bg-surface-sunken/35 p-2">
       <div className="flex items-center justify-between gap-2">
-        <div className="opaque-spec-label">Load</div>
+        <div className="text-[10px] uppercase tracking-wider text-text-tertiary">Load</div>
         <div className="font-mono text-[11px] font-medium text-text-primary">
           {stats.cores || '-'} cores
         </div>
@@ -538,7 +538,7 @@ function ServerFactChips({ stats }: { stats: ServerStats }) {
           key={fact.label}
           className="inline-flex min-w-0 items-center gap-1.5 rounded-sm border border-border-light bg-surface-elevated/60 px-2 py-1 text-[11px]"
         >
-          <span className="font-condensed text-[9px] font-medium uppercase tracking-[0.14em] text-text-muted">
+          <span className="font-mono text-[9px] uppercase tracking-wider text-text-muted">
             {fact.label}
           </span>
           <span className="max-w-[8.5rem] truncate font-mono text-[10px] text-text-secondary">
@@ -571,7 +571,7 @@ function ServerTrendPanel({
   return (
     <div className="mt-4 rounded-sm border border-border-light bg-surface-sunken/25 p-2.5">
       <div className="mb-2 flex items-center justify-between gap-2">
-        <div className="opaque-spec-label">
+        <div className="text-[10px] uppercase tracking-wider text-text-tertiary">
           24h telemetry
         </div>
         <div className="font-mono text-[10px] text-text-muted">
@@ -607,7 +607,7 @@ function TrendMini({
   return (
     <div className="min-w-0 rounded-sm bg-surface-elevated/60 p-1.5">
       <div className="mb-1 flex items-center justify-between gap-1">
-        <div className="opaque-spec-label truncate">
+        <div className="truncate text-[10px] uppercase tracking-wider text-text-tertiary">
           {label}
         </div>
         <div className="truncate font-mono text-[10px] text-text-secondary">
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 35e64f6..2d0a8e4 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -52,7 +52,6 @@ module.exports = {
       fontFamily: {
         body: ['ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', "Segoe UI", 'Roboto', "Helvetica Neue", 'Arial', "Noto Sans", 'sans-serif'],
         mono: ['ui-monospace', 'SFMono-Regular', '"SF Mono"', 'Menlo', 'Consolas', '"Liberation Mono"', 'monospace'],
-        condensed: ['var(--font-condensed)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
         serif: ['var(--font-serif)', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
       },
       borderRadius: {

From 836f72429f4f861a8689c3a19c43182b6a36b14c Mon Sep 17 00:00:00 2001
From: Bolin Huang <ibh@live.com>
Date: Thu, 25 Jun 2026 23:40:34 -0700
Subject: [PATCH 03/18] refactor(server): redesign telemetry as a paper spec
 sheet
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Introduce shared Archival Technical Minimalism primitives (specPrimitives.tsx):
SpecCaption (hairline-ruled mono section header), SpecRow/SpecRows (aligned
tabular-number ledger), SpecMetric (gauge cell with a hairline-tracked bar),
MetaChip/MetaChipGroup (borderless metadata), and one Sparkline language.

Rebuild the server card with them instead of boxes-in-boxes: a clean header on
a hairline rule, a 3-up CPU/Mem/Disk gauge strip, a two-column facts ledger
(mem/disk/uptime · net in/out/cores·temp), and a single 24h telemetry strip of
three labeled sparklines. Removes ServerUsageCard/ServerLoadCard/
ServerFactChips/ServerTrendPanel/TrendMini/TrendSparkline and the duplicated
local sparklinePoints. Preserves status/stale, all metrics, load, trends, and
edit/drag. Glanceable instrument panel, not a monitoring SaaS card.
---
 web/src/components/Tree/TreeServer.tsx     | 243 +++++--------------
 web/src/components/Tree/specPrimitives.tsx | 270 +++++++++++++++++++++
 2 files changed, 334 insertions(+), 179 deletions(-)
 create mode 100644 web/src/components/Tree/specPrimitives.tsx

diff --git a/web/src/components/Tree/TreeServer.tsx b/web/src/components/Tree/TreeServer.tsx
index 8dce484..e827e90 100644
--- a/web/src/components/Tree/TreeServer.tsx
+++ b/web/src/components/Tree/TreeServer.tsx
@@ -19,6 +19,7 @@ import { DEFAULT_SERVER_ICON } from '@/lib/svg';
 import { SERVER_ICON_PRESETS } from '@/lib/iconPresets';
 import IconField from '@/components/IconField';
 import SectionAddControl from '@/components/Tree/SectionAddControl';
+import { Sparkline, SpecMetric, SpecRow, SpecRows } from '@/components/Tree/specPrimitives';
 
 interface ServerTree {
   root: string;
@@ -389,17 +390,17 @@ const TreeServer: React.FC<TreeServerProps> = ({
               </div>
             ) : (
               <>
-                <div className="mb-3.5 flex items-start justify-between gap-3">
-                  <div className="flex min-w-0 items-center gap-3">
+                <div className="flex items-start justify-between gap-3 border-b border-border-light pb-3">
+                  <div className="flex min-w-0 items-center gap-2.5">
                     {renderDragHandle(server)}
-                    <div className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-sm border border-border-light bg-surface-elevated text-text-secondary">
-                      <SvgIcon svg={server.icon} fallback={DEFAULT_SERVER_ICON} className="h-5 w-5" />
+                    <div className="flex h-7 w-7 flex-shrink-0 items-center justify-center text-text-secondary">
+                      <SvgIcon svg={server.icon} fallback={DEFAULT_SERVER_ICON} className="h-[18px] w-[18px]" />
                     </div>
                     <div className="min-w-0">
-                      <div className="truncate text-sm font-medium leading-tight text-text-primary">
+                      <div className="truncate text-[13px] font-medium leading-tight text-text-primary">
                         {server.name}
                       </div>
-                      <div className="mt-1 truncate font-mono text-xs leading-tight text-text-tertiary">
+                      <div className="mt-0.5 truncate font-mono text-[11px] leading-tight text-text-tertiary">
                         {removeProtocol(server.url)}
                       </div>
                     </div>
@@ -420,17 +421,36 @@ const TreeServer: React.FC<TreeServerProps> = ({
                   </div>
                 </div>
 
-                <div className="grid grid-cols-2 gap-2">
-                  <ServerUsageCard label="CPU" valueLabel={`${stats.cpu.toFixed(1)}%`} percent={stats.cpu} />
-                  <ServerUsageCard label="Memory" valueLabel={`${memoryPercent}%`} percent={memoryPercent} />
-                  <ServerUsageCard label="Storage" valueLabel={`${diskPercent}%`} percent={diskPercent} />
-                  <ServerLoadCard stats={stats} />
+                {/* Primary load: three hairline-tracked gauges on a shared grid. */}
+                <div className="mt-3 grid grid-cols-3 gap-x-5">
+                  <SpecMetric label="CPU" value={`${stats.cpu.toFixed(0)}%`} bar={stats.cpu} tone={usageTone(stats.cpu)} />
+                  <SpecMetric label="Mem" value={`${memoryPercent}%`} bar={memoryPercent} tone={usageTone(memoryPercent)} />
+                  <SpecMetric label="Disk" value={`${diskPercent}%`} bar={diskPercent} tone={usageTone(diskPercent)} />
                 </div>
 
-                <ServerFactChips stats={stats} />
+                {/* Secondary facts as a two-column ledger — no boxed sub-cards. */}
+                <div className="mt-3.5 grid grid-cols-2 gap-x-6">
+                  <SpecRows>
+                    <SpecRow label="Mem" value={`${formatBytes(stats.memory.used)} / ${formatBytes(stats.memory.total)}`} valueTone="secondary" />
+                    <SpecRow label="Disk" value={`${formatBytes(stats.disk.used)} / ${formatBytes(stats.disk.total)}`} valueTone="secondary" />
+                    <SpecRow label="Up" value={stats.uptime || '-'} valueTone="secondary" />
+                  </SpecRows>
+                  <SpecRows>
+                    <SpecRow label="Net ↓" value={formatBandwidth(stats.network.in)} valueTone="secondary" />
+                    <SpecRow label="Net ↑" value={formatBandwidth(stats.network.out)} valueTone="secondary" />
+                    <SpecRow
+                      label={stats.temperature > 0 ? 'Cores / °C' : 'Cores'}
+                      value={stats.temperature > 0
+                        ? `${stats.cores || '-'} / ${Math.round(stats.temperature)}°`
+                        : `${stats.cores || '-'}`}
+                      valueTone="secondary"
+                      title={stats.load?.length ? `Load: ${stats.load.slice(0, 3).map(formatLoadValue).join(' · ')}` : undefined}
+                    />
+                  </SpecRows>
+                </div>
 
                 {!isEditing && (
-                  <ServerTrendPanel
+                  <ServerTrendStrip
                     samples={metricHistories[server.id] || []}
                     stats={stats}
                   />
@@ -448,10 +468,8 @@ const TreeServer: React.FC<TreeServerProps> = ({
 function ServerStatusBadge({ online }: { online: boolean }) {
   return (
     <div
-      className={`inline-flex h-5 items-center gap-1.5 rounded-sm border px-1.5 font-mono text-[10px] uppercase tracking-wider ${
-        online
-          ? 'border-accent-green/25 bg-accent-green/10 text-accent-green-dark'
-          : 'border-border-light bg-surface-sunken/45 text-text-muted'
+      className={`inline-flex items-center gap-1.5 font-mono text-[10px] uppercase tracking-[0.14em] ${
+        online ? 'text-accent-green-dark' : 'text-text-muted'
       }`}
     >
       <span className={`h-1.5 w-1.5 rounded-full ${online ? 'bg-accent-green' : 'bg-ink-300'}`} />
@@ -460,97 +478,18 @@ function ServerStatusBadge({ online }: { online: boolean }) {
   );
 }
 
-function ServerUsageCard({
-  label,
-  valueLabel,
-  percent: rawPercent,
-}: {
-  label: string;
-  valueLabel: string;
-  percent: number;
-}) {
-  const normalized = Math.max(0, Math.min(100, rawPercent));
-
-  return (
-    <div className="rounded-sm border border-border-light bg-surface-sunken/35 p-2">
-      <div className="flex items-center justify-between">
-        <div className="text-[10px] uppercase tracking-wider text-text-tertiary">{label}</div>
-        <div className="font-mono text-[11px] font-medium text-text-primary">{valueLabel}</div>
-      </div>
-      <div className="mt-2 h-1 w-full overflow-hidden rounded-full bg-border-light">
-        <div
-          className={`h-full rounded-full transition-all ${normalized < 70 ? 'bg-accent-green' : normalized < 90 ? 'bg-accent-amber' : 'bg-accent-red'}`}
-          style={{ width: `${normalized}%` }}
-        />
-      </div>
-    </div>
-  );
-}
-
-function ServerLoadCard({ stats }: { stats: ServerStats }) {
-  return (
-    <div className="rounded-sm border border-border-light bg-surface-sunken/35 p-2">
-      <div className="flex items-center justify-between gap-2">
-        <div className="text-[10px] uppercase tracking-wider text-text-tertiary">Load</div>
-        <div className="font-mono text-[11px] font-medium text-text-primary">
-          {stats.cores || '-'} cores
-        </div>
-      </div>
-      <div className="mt-1.5 truncate font-mono text-[10px] text-text-tertiary">
-        {stats.load?.slice(0, 3).map(formatLoadValue).join(' / ') || '-'}
-      </div>
-    </div>
-  );
+// Usage thresholds → gauge tone. Quiet until it matters: moss under load,
+// amber as it tightens, rust when critical.
+function usageTone(value: number): 'neutral' | 'ok' | 'warn' | 'crit' {
+  if (value >= 90) return 'crit';
+  if (value >= 70) return 'warn';
+  if (value > 0) return 'ok';
+  return 'neutral';
 }
 
-function ServerFactChips({ stats }: { stats: ServerStats }) {
-  const facts = [
-    {
-      label: 'Mem',
-      value: `${formatBytes(stats.memory.used)} / ${formatBytes(stats.memory.total)}`,
-    },
-    {
-      label: 'Disk',
-      value: `${formatBytes(stats.disk.used)} / ${formatBytes(stats.disk.total)}`,
-    },
-    {
-      label: 'In',
-      value: formatBandwidth(stats.network.in),
-    },
-    {
-      label: 'Out',
-      value: formatBandwidth(stats.network.out),
-    },
-    {
-      label: 'Up',
-      value: stats.uptime || '-',
-    },
-    ...(stats.temperature > 0 ? [{
-      label: 'Temp',
-      value: `${Math.round(stats.temperature)}C`,
-    }] : []),
-  ];
-
-  return (
-    <div className="mt-3 flex flex-wrap gap-1.5">
-      {facts.map((fact) => (
-        <span
-          key={fact.label}
-          className="inline-flex min-w-0 items-center gap-1.5 rounded-sm border border-border-light bg-surface-elevated/60 px-2 py-1 text-[11px]"
-        >
-          <span className="font-mono text-[9px] uppercase tracking-wider text-text-muted">
-            {fact.label}
-          </span>
-          <span className="max-w-[8.5rem] truncate font-mono text-[10px] text-text-secondary">
-            {fact.value}
-          </span>
-        </span>
-      ))}
-    </div>
-  );
-}
-
-function ServerTrendPanel({
+// A single telemetry strip: three labeled sparklines on a shared grid, titled
+// by a hairline caption with the sample count. Replaces the boxed trend panel.
+function ServerTrendStrip({
   samples,
   stats,
 }: {
@@ -569,24 +508,22 @@ function ServerTrendPanel({
     : 'waiting';
 
   return (
-    <div className="mt-4 rounded-sm border border-border-light bg-surface-sunken/25 p-2.5">
-      <div className="mb-2 flex items-center justify-between gap-2">
-        <div className="text-[10px] uppercase tracking-wider text-text-tertiary">
+    <div className="mt-4">
+      <div className="flex items-baseline justify-between gap-3 border-b border-border-light pb-1.5">
+        <span className="font-mono text-[10px] uppercase tracking-[0.14em] text-text-tertiary">
           24h telemetry
-        </div>
-        <div className="font-mono text-[10px] text-text-muted">
-          {sampleLabel}
-        </div>
+        </span>
+        <span className="font-mono text-[10px] tabular-nums text-text-muted">{sampleLabel}</span>
       </div>
-      <div className="grid grid-cols-3 gap-2">
-        <TrendMini label="CPU" valueLabel={`${stats.cpu.toFixed(0)}%`} values={cpuValues} />
-        <TrendMini
-          label="Memory"
+      <div className="mt-2.5 grid grid-cols-3 gap-x-5">
+        <TrendColumn label="CPU" valueLabel={`${stats.cpu.toFixed(0)}%`} values={cpuValues} />
+        <TrendColumn
+          label="Mem"
           valueLabel={`${percent(stats.memory.used, stats.memory.total)}%`}
           values={memoryValues}
         />
-        <TrendMini
-          label="Network"
+        <TrendColumn
+          label="Net"
           valueLabel={formatBandwidth(stats.network.in + stats.network.out)}
           values={networkValues}
         />
@@ -595,7 +532,7 @@ function ServerTrendPanel({
   );
 }
 
-function TrendMini({
+function TrendColumn({
   label,
   valueLabel,
   values,
@@ -605,45 +542,16 @@ function TrendMini({
   values: number[];
 }) {
   return (
-    <div className="min-w-0 rounded-sm bg-surface-elevated/60 p-1.5">
-      <div className="mb-1 flex items-center justify-between gap-1">
-        <div className="truncate text-[10px] uppercase tracking-wider text-text-tertiary">
+    <div className="min-w-0">
+      <div className="mb-1 flex items-baseline justify-between gap-1.5">
+        <span className="truncate font-mono text-[9px] uppercase tracking-wider text-text-muted">
           {label}
-        </div>
-        <div className="truncate font-mono text-[10px] text-text-secondary">
+        </span>
+        <span className="shrink-0 font-mono text-[10px] tabular-nums text-text-secondary">
           {valueLabel}
-        </div>
+        </span>
       </div>
-      <TrendSparkline values={values} />
-    </div>
-  );
-}
-
-function TrendSparkline({ values }: { values: number[] }) {
-  const points = sparklinePoints(values);
-
-  if (!points) {
-    return <div className="h-7 rounded-sm bg-surface-sunken/45" />;
-  }
-
-  return (
-    <div className="h-7 overflow-hidden">
-      <svg
-        viewBox="0 0 72 28"
-        preserveAspectRatio="none"
-        className="h-full w-full text-ink-500"
-        aria-label="Server telemetry trend"
-      >
-        <polyline
-          points={points}
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="1.25"
-          vectorEffect="non-scaling-stroke"
-          strokeLinejoin="round"
-          strokeLinecap="round"
-        />
-      </svg>
+      <Sparkline values={values} width={72} height={24} fill ariaLabel={`${label} 24h trend`} />
     </div>
   );
 }
@@ -695,29 +603,6 @@ function formatBandwidth(bytesPerSecond: number): string {
   return `${formatBytes(bytesPerSecond)}/s`;
 }
 
-function sparklinePoints(values: number[], width = 72, height = 28) {
-  const finiteValues = values.map(Number).filter(Number.isFinite);
-  if (finiteValues.length === 0) return '';
-
-  const points = finiteValues.length === 1
-    ? [finiteValues[0], finiteValues[0]]
-    : finiteValues;
-  const min = Math.min(...points);
-  const max = Math.max(...points);
-  const span = max - min || 1;
-  const xStep = width / (points.length - 1);
-
-  return points.map((value, index) => {
-    const x = index * xStep;
-    const y = height - ((value - min) / span) * (height - 4) - 2;
-    return `${roundCoordinate(x)},${roundCoordinate(y)}`;
-  }).join(' ');
-}
-
-function roundCoordinate(value: number) {
-  return Math.round(value * 100) / 100;
-}
-
 function reorder<T>(
   items: T[],
   fromIndex: number,
diff --git a/web/src/components/Tree/specPrimitives.tsx b/web/src/components/Tree/specPrimitives.tsx
new file mode 100644
index 0000000..3fb9b8a
--- /dev/null
+++ b/web/src/components/Tree/specPrimitives.tsx
@@ -0,0 +1,270 @@
+import React from 'react';
+
+// ---------------------------------------------------------------------------
+// Archival Technical Minimalism — shared visual primitives.
+//
+// The dashboard's structure comes from alignment and hairline rules, not from
+// nested rounded cards. These primitives encode that discipline so every module
+// (Media, Server, …) reads like a printed spec sheet: a mono caption header, a
+// ledger of label/value rows on a shared grid, borderless metadata chips, and a
+// single sparkline language. Colors are token-driven so dark mode follows.
+// ---------------------------------------------------------------------------
+
+/**
+ * A technical sub-section header: a small mono caption on the left, optional
+ * aside on the right, sitting on a hairline rule. Used to title a block inside
+ * a module (e.g. "Libraries", "Telemetry") without a boxed container.
+ */
+export function SpecCaption({
+  children,
+  aside,
+  className = '',
+}: {
+  children: React.ReactNode;
+  aside?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={`flex items-baseline justify-between gap-3 border-b border-border-light pb-1.5 ${className}`}
+    >
+      <span className="font-mono text-[10px] uppercase tracking-[0.14em] text-text-tertiary">
+        {children}
+      </span>
+      {aside != null && (
+        <span className="font-mono text-[10px] tabular-nums text-text-muted">{aside}</span>
+      )}
+    </div>
+  );
+}
+
+/**
+ * One ledger row: a label on the left, a value on the right, baseline-aligned.
+ * Inside a {@link SpecRows} group the rows share dotted hairline separators, so
+ * a stack of these reads as a single aligned table rather than separate cards.
+ */
+export function SpecRow({
+  label,
+  value,
+  valueTone = 'primary',
+  title,
+}: {
+  label: React.ReactNode;
+  value: React.ReactNode;
+  valueTone?: 'primary' | 'secondary' | 'accent' | 'warning' | 'danger';
+  title?: string;
+}) {
+  const toneClass =
+    valueTone === 'accent'
+      ? 'text-accent-green-dark'
+      : valueTone === 'warning'
+        ? 'text-accent-amber-dark'
+        : valueTone === 'danger'
+          ? 'text-accent-red-dark'
+          : valueTone === 'secondary'
+            ? 'text-text-secondary'
+            : 'text-text-primary';
+
+  return (
+    <div className="flex items-baseline justify-between gap-3 py-1" title={title}>
+      <span className="min-w-0 truncate font-mono text-[10px] uppercase tracking-wider text-text-tertiary">
+        {label}
+      </span>
+      <span className={`shrink-0 font-mono text-[11px] tabular-nums ${toneClass}`}>{value}</span>
+    </div>
+  );
+}
+
+/** Groups {@link SpecRow}s with hairline dividers — the ledger body. */
+export function SpecRows({ children }: { children: React.ReactNode }) {
+  return <div className="divide-y divide-border-light/70">{children}</div>;
+}
+
+/**
+ * A compact metric cell for a glanceable grid: tiny mono label above a tabular
+ * value, optionally over a hairline-tracked bar. No border — cells sit on a
+ * shared column grid and are separated by whitespace + an optional baseline bar.
+ */
+export function SpecMetric({
+  label,
+  value,
+  bar,
+  tone = 'neutral',
+}: {
+  label: string;
+  value: string;
+  /** 0–100; when provided a thin progress bar is drawn under the value. */
+  bar?: number;
+  tone?: 'neutral' | 'ok' | 'warn' | 'crit';
+}) {
+  const barColor =
+    tone === 'crit'
+      ? 'bg-accent-red'
+      : tone === 'warn'
+        ? 'bg-accent-amber'
+        : tone === 'ok'
+          ? 'bg-accent-green'
+          : 'bg-ink-400';
+
+  return (
+    <div className="min-w-0">
+      <div className="flex items-baseline justify-between gap-1.5">
+        <span className="truncate font-mono text-[9px] uppercase tracking-wider text-text-muted">
+          {label}
+        </span>
+        <span className="shrink-0 font-mono text-[11px] tabular-nums font-medium text-text-primary">
+          {value}
+        </span>
+      </div>
+      {bar != null && (
+        <div className="mt-1.5 h-px w-full bg-border-light">
+          <div
+            className={`h-px ${barColor} transition-all`}
+            style={{ width: `${Math.max(0, Math.min(100, bar))}%` }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * A borderless metadata chip: mono label + tabular value separated by a hairline
+ * divider, laid out inline. Replaces bordered "badge" pills. Group several with
+ * {@link MetaChipGroup}.
+ */
+export function MetaChip({
+  label,
+  value,
+  tone = 'neutral',
+  title,
+}: {
+  label: string;
+  value: React.ReactNode;
+  tone?: 'neutral' | 'accent' | 'warning';
+  title?: string;
+}) {
+  const valueClass =
+    tone === 'accent'
+      ? 'text-accent-green-dark'
+      : tone === 'warning'
+        ? 'text-accent-amber-dark'
+        : 'text-text-secondary';
+
+  return (
+    <span
+      className="inline-flex items-stretch overflow-hidden rounded-[2px] bg-surface-sunken/60"
+      title={title}
+    >
+      <span className="px-1.5 py-0.5 font-mono text-[9px] uppercase tracking-wider text-text-muted">
+        {label}
+      </span>
+      <span
+        className={`border-l border-border-light px-1.5 py-0.5 font-mono text-[10px] tabular-nums ${valueClass}`}
+      >
+        {value}
+      </span>
+    </span>
+  );
+}
+
+export function MetaChipGroup({ children }: { children: React.ReactNode }) {
+  return <div className="flex flex-wrap gap-1">{children}</div>;
+}
+
+/**
+ * The dashboard's one sparkline language: a thin polyline with an optional area
+ * fill, drawn on a non-scaling stroke so it stays crisp at any width. Tone maps
+ * to the trend's meaning; default ink keeps it quiet.
+ */
+export function Sparkline({
+  values,
+  width = 96,
+  height = 26,
+  tone = 'ink',
+  fill = false,
+  className = '',
+  ariaLabel = 'Trend',
+}: {
+  values: number[];
+  width?: number;
+  height?: number;
+  tone?: 'ink' | 'accent' | 'up' | 'down';
+  fill?: boolean;
+  className?: string;
+  ariaLabel?: string;
+}) {
+  const coords = sparklineCoords(values, width, height);
+
+  const colorClass =
+    tone === 'accent'
+      ? 'text-accent-green'
+      : tone === 'up'
+        ? 'text-accent-green-dark'
+        : tone === 'down'
+          ? 'text-accent-red-dark'
+          : 'text-ink-400';
+
+  if (!coords) {
+    // Flat baseline so the row keeps its height when there is no series yet.
+    return (
+      <div className={`flex items-center ${className}`} style={{ height }} aria-hidden>
+        <div className="h-px w-full bg-border-light" />
+      </div>
+    );
+  }
+
+  const line = coords.map((point) => `${point.x},${point.y}`).join(' ');
+  const area = `0,${height} ${line} ${width},${height}`;
+
+  return (
+    <div className={`overflow-hidden ${className}`} style={{ height }}>
+      <svg
+        viewBox={`0 0 ${width} ${height}`}
+        preserveAspectRatio="none"
+        className={`h-full w-full ${colorClass}`}
+        aria-label={ariaLabel}
+      >
+        {fill && <polygon points={area} fill="currentColor" opacity={0.08} />}
+        <polyline
+          points={line}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.25"
+          vectorEffect="non-scaling-stroke"
+          strokeLinejoin="round"
+          strokeLinecap="round"
+        />
+      </svg>
+    </div>
+  );
+}
+
+interface SparkPoint {
+  x: number;
+  y: number;
+}
+
+// Shared sparkline geometry: pads a single value into a flat line, normalizes
+// to the box with a 2px vertical inset so the stroke never clips at the edges.
+function sparklineCoords(values: number[], width: number, height: number): SparkPoint[] | null {
+  const finite = values.map(Number).filter(Number.isFinite);
+  if (finite.length === 0) return null;
+
+  const series = finite.length === 1 ? [finite[0], finite[0]] : finite;
+  const min = Math.min(...series);
+  const max = Math.max(...series);
+  const span = max - min || 1;
+  const inset = 2;
+  const usable = height - inset * 2;
+  const xStep = width / (series.length - 1);
+
+  return series.map((value, index) => ({
+    x: round(index * xStep),
+    y: round(height - inset - ((value - min) / span) * usable),
+  }));
+}
+
+function round(value: number) {
+  return Math.round(value * 10) / 10;
+}

From 9be49c5a7edd05c4c2d32d23f4cb998b50430732 Mon Sep 17 00:00:00 2001
From: Bolin Huang <ibh@live.com>
Date: Thu, 25 Jun 2026 23:43:11 -0700
Subject: [PATCH 04/18] =?UTF-8?q?refactor(media):=20provider=20spec=20shee?=
 =?UTF-8?q?t=20=E2=80=94=20stat=20ledger,=20borderless=20chips,=20clean=20?=
 =?UTF-8?q?covers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rework MediaWidget toward the archival system and align Plex/Jellyfin/Emby/
Radarr/Sonarr to one shape:
- Provider key stats now render as a borderless two-column ledger (MediaStatLedger)
  directly under the status line, replacing the bordered MediaInsightBadges grid.
- Libraries use the shared borderless MetaChip language instead of bordered pills.
- Recent covers drop the grey border+fill for a faint hairline ring so the
  original artwork reads cleanly; letter fallbacks use the serif face.
- Now-playing / queue thumbnails match the same hairline ring; progress bars are
  crisp 1px hairlines.
Section order tightened (status → stats → now playing → queue → libraries →
recent) and inner rules use consistent SpecCaption-style hairline headers.
---
 web/src/components/Tree/TreeModule.tsx | 94 +++++++++++++-------------
 1 file changed, 46 insertions(+), 48 deletions(-)

diff --git a/web/src/components/Tree/TreeModule.tsx b/web/src/components/Tree/TreeModule.tsx
index 5c68a63..75aba93 100644
--- a/web/src/components/Tree/TreeModule.tsx
+++ b/web/src/components/Tree/TreeModule.tsx
@@ -53,6 +53,7 @@ import {
   type DropPlacement,
 } from '@/lib/drag';
 import SectionAddControl from '@/components/Tree/SectionAddControl';
+import { MetaChip, MetaChipGroup } from '@/components/Tree/specPrimitives';
 
 interface ModuleTree {
   root: string;
@@ -1123,18 +1124,22 @@ function MediaWidget({ module, state }: { module: ModuleBranch; state: ModuleDat
         <ModuleBodyState state={state} skeleton="media" />
       ) : (
         <>
-          <div className="mb-4 flex items-baseline justify-between gap-3 border-b border-border-light pb-3">
-            <div className="flex items-center gap-1.5 font-mono text-[10px] uppercase tracking-wider text-accent-green">
+          <div className="flex items-baseline justify-between gap-3 border-b border-border-light pb-2.5">
+            <div className={`flex items-center gap-1.5 font-mono text-[10px] uppercase tracking-[0.14em] ${streamCount > 0 ? 'text-accent-green-dark' : 'text-text-tertiary'}`}>
               <span className={`h-1.5 w-1.5 rounded-full ${streamCount > 0 ? 'bg-accent-green' : 'bg-ink-300'}`} />
               {streamCount > 0 ? `${streamCount} playing` : data.status}
             </div>
-            <div className="font-mono text-[10px] text-text-tertiary">
+            <div className="font-mono text-[10px] tabular-nums text-text-muted">
               {data.detail || data.service}
             </div>
           </div>
 
+          {overview && overview.insights.length > 0 && (
+            <MediaStatLedger items={overview.insights} />
+          )}
+
           {nowPlaying.length > 0 && (
-            <div className="mb-5 space-y-3 border-b border-border-light pb-4">
+            <div className="mt-4 space-y-3">
               {nowPlaying.map((item) => (
                 <NowPlayingRow key={item.id} item={item} />
               ))}
@@ -1142,8 +1147,8 @@ function MediaWidget({ module, state }: { module: ModuleBranch; state: ModuleDat
           )}
 
           {queue.length > 0 && (
-            <div className="mb-5 border-b border-border-light pb-4">
-              <div className="mb-2.5 flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-text-tertiary">
+            <div className="mt-4">
+              <div className="mb-2 flex items-center gap-1.5 font-mono text-[10px] uppercase tracking-[0.14em] text-text-tertiary">
                 <IconDownload className="h-3 w-3" />
                 Downloading
               </div>
@@ -1155,10 +1160,6 @@ function MediaWidget({ module, state }: { module: ModuleBranch; state: ModuleDat
             </div>
           )}
 
-          {overview && overview.insights.length > 0 && (
-            <MediaInsightBadges items={overview.insights} />
-          )}
-
           {overview && overview.libraries.length > 0 && (
             <MediaLibraryChips
               libraries={overview.libraries}
@@ -1285,26 +1286,30 @@ function dedupeMediaInsights(insights: MediaInsight[]) {
   });
 }
 
-function MediaInsightBadges({ items }: { items: MediaInsight[] }) {
+// Provider key stats as a borderless two-column ledger: label left, tabular
+// value right, hairline dividers. Reads like a spec sheet and stays consistent
+// across providers regardless of which stats each one reports.
+function MediaStatLedger({ items }: { items: MediaInsight[] }) {
+  const toneClass = (tone: MediaInsight['tone']) =>
+    tone === 'accent'
+      ? 'text-accent-green-dark'
+      : tone === 'warning'
+        ? 'text-accent-amber-dark'
+        : 'text-text-primary';
+
   return (
-    <div className="mb-4 grid grid-cols-2 gap-1.5 sm:grid-cols-4">
+    <div className="mt-3 grid grid-cols-2 gap-x-6 gap-y-0">
       {items.map((item) => (
         <div
           key={item.id}
-          className={`rounded-sm border px-2 py-1.5 ${
-            item.tone === 'accent'
-              ? 'border-accent-green/25 bg-accent-green/10'
-              : item.tone === 'warning'
-                ? 'border-accent-amber/25 bg-accent-amber/10'
-                : 'border-border-light bg-surface-sunken/35'
-          }`}
+          className="flex items-baseline justify-between gap-3 border-b border-border-light/70 py-1"
         >
-          <div className="truncate font-mono text-[9px] uppercase tracking-wider text-text-muted">
+          <span className="min-w-0 truncate font-mono text-[10px] uppercase tracking-wider text-text-tertiary">
             {item.label}
-          </div>
-          <div className="mt-0.5 truncate font-mono text-[11px] font-medium text-text-primary">
+          </span>
+          <span className={`shrink-0 font-mono text-[11px] tabular-nums ${toneClass(item.tone)}`}>
             {item.value || '-'}
-          </div>
+          </span>
         </div>
       ))}
     </div>
@@ -1324,45 +1329,38 @@ function MediaLibraryChips({
   const hidden = sorted.length - visible.length;
 
   return (
-    <div className="mb-4">
-      <div className="mb-2 flex items-center justify-between gap-2">
-        <div className="text-[10px] uppercase tracking-wider text-text-tertiary">
+    <div className="mt-4">
+      <div className="mb-2 flex items-baseline justify-between gap-3 border-b border-border-light pb-1.5">
+        <span className="font-mono text-[10px] uppercase tracking-[0.14em] text-text-tertiary">
           Libraries
-        </div>
-        <div className="font-mono text-[10px] text-text-muted">
+        </span>
+        <span className="font-mono text-[10px] tabular-nums text-text-muted">
           {totalItems > 0 ? `${formatCompactNumber(totalItems)} items` : `${libraries.length} total`}
-        </div>
+        </span>
       </div>
-      <div className="flex flex-wrap gap-1.5">
+      <MetaChipGroup>
         {visible.map((library) => (
-          <span
+          <MetaChip
             key={library.id}
-            className="inline-flex max-w-full items-center gap-1.5 rounded-sm border border-border-light bg-surface-sunken/45 px-2 py-1 text-[11px] text-text-secondary"
+            label={library.name}
+            value={formatCompactNumber(library.count)}
             title={[
               library.name,
               library.type ? formatMediaLibraryType(library.type) : '',
               `${formatCompactNumber(library.count)} items`,
             ].filter(Boolean).join(' · ')}
-          >
-            <span className="min-w-0 max-w-[9rem] truncate text-text-primary">{library.name}</span>
-            <span className="font-mono text-[10px] text-text-muted">{formatCompactNumber(library.count)}</span>
-            {library.type && (
-              <span className="hidden font-mono text-[9px] uppercase tracking-wider text-text-muted sm:inline">
-                {formatMediaLibraryType(library.type)}
-              </span>
-            )}
-          </span>
+          />
         ))}
         {(hidden > 0 || expanded) && (
           <button
             type="button"
             onClick={() => setExpanded((value) => !value)}
-            className="inline-flex items-center rounded-sm border border-border-light px-2 py-1 font-mono text-[10px] text-text-muted transition-colors hover:border-border-medium hover:bg-surface-sunken hover:text-text-secondary"
+            className="inline-flex items-center rounded-[2px] px-1.5 py-0.5 font-mono text-[10px] text-text-muted transition-colors hover:bg-surface-sunken hover:text-text-secondary"
           >
             {expanded ? 'Show less' : `+${hidden} more`}
           </button>
         )}
-      </div>
+      </MetaChipGroup>
     </div>
   );
 }
@@ -1467,7 +1465,7 @@ function MediaRecentCell({
 }) {
   const body = (
     <>
-      <div className="relative aspect-[2/3] overflow-hidden rounded-sm border border-border-light bg-surface-sunken transition-colors group-hover/recent:border-border-medium">
+      <div className="relative aspect-[2/3] overflow-hidden rounded-[2px] bg-surface-sunken ring-1 ring-border-light/60 transition group-hover/recent:ring-border-medium">
         {item.imageUrl ? (
           <Image
             src={item.imageUrl}
@@ -1479,7 +1477,7 @@ function MediaRecentCell({
             className="h-full w-full object-cover"
           />
         ) : (
-          <div className="flex h-full w-full items-center justify-center text-[10px] text-text-muted">
+          <div className="flex h-full w-full items-center justify-center font-serif text-base text-text-muted">
             {item.title.slice(0, 1)}
           </div>
         )}
@@ -1579,7 +1577,7 @@ function NowPlayingRow({ item }: { item: MediaNowPlayingItem }) {
   const meta = [item.user, item.device].filter(Boolean).join(' · ');
   return (
     <div className="flex items-center gap-2.5">
-      <div className="relative h-12 w-8 flex-shrink-0 overflow-hidden rounded-sm border border-border-light bg-surface-sunken">
+      <div className="relative h-12 w-8 flex-shrink-0 overflow-hidden rounded-[2px] bg-surface-sunken ring-1 ring-border-light/60">
         {item.imageUrl ? (
           <Image
             src={item.imageUrl}
@@ -1645,9 +1643,9 @@ function MediaProgressBar({
 }) {
   const pct = Math.round(Math.max(0, Math.min(1, value)) * 100);
   return (
-    <div className={`h-0.5 w-full overflow-hidden rounded-full bg-border-light ${className}`}>
+    <div className={`h-px w-full overflow-hidden bg-border-light ${className}`}>
       <div
-        className={`h-full rounded-full ${tone === 'accent' ? 'bg-accent-green' : 'bg-ink-500'}`}
+        className={`h-full transition-all ${tone === 'accent' ? 'bg-accent-green' : 'bg-ink-500'}`}
         style={{ width: `${pct}%` }}
       />
     </div>

From b0aa0c05e81956199115fe6d70f2d0914bfd66a1 Mon Sep 17 00:00:00 2001
From: Bolin Huang <ibh@live.com>
Date: Thu, 25 Jun 2026 23:45:08 -0700
Subject: [PATCH 05/18] refactor(weather/calendar/markets): paper-instrument
 hierarchy
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Weather: forecast becomes a per-day ledger (weekday · condition · right-aligned
tabular hi/lo) instead of a cramped 3-up grid, so condition text is readable
without noise; location/humidity move to a mono caption beside the temperature.
Calendar: month grid reads like a printed instrument — mono tabular day numbers,
quieter weekday rail, and a precise solid-ink current-day marker (inverse text,
theme-safe) replacing the heavy bordered box.
Markets: adopt the shared Sparkline (tone follows the day's direction) and add
tabular-nums to change/price; list structure unchanged.
Removes the now-dead local MarketSparkline + sparklinePoints/roundSvgNumber.
---
 web/src/components/Tree/TreeModule.tsx | 129 ++++++++++---------------
 1 file changed, 49 insertions(+), 80 deletions(-)

diff --git a/web/src/components/Tree/TreeModule.tsx b/web/src/components/Tree/TreeModule.tsx
index 75aba93..2b0a099 100644
--- a/web/src/components/Tree/TreeModule.tsx
+++ b/web/src/components/Tree/TreeModule.tsx
@@ -53,7 +53,7 @@ import {
   type DropPlacement,
 } from '@/lib/drag';
 import SectionAddControl from '@/components/Tree/SectionAddControl';
-import { MetaChip, MetaChipGroup } from '@/components/Tree/specPrimitives';
+import { MetaChip, MetaChipGroup, Sparkline } from '@/components/Tree/specPrimitives';
 
 interface ModuleTree {
   root: string;
@@ -787,9 +787,12 @@ function CalendarWidget({ module }: { module: ModuleBranch }) {
             </button>
           </div>
         </div>
-        <div className="grid grid-cols-7 gap-y-1 text-center">
+        <div className="grid grid-cols-7 text-center">
           {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((weekday, index) => (
-            <div key={`${weekday}-${index}`} className="pb-1.5 text-[10px] font-medium uppercase tracking-wider text-text-tertiary">
+            <div
+              key={`${weekday}-${index}`}
+              className="pb-2 font-mono text-[9px] font-medium uppercase tracking-[0.12em] text-text-muted"
+            >
               {weekday}
             </div>
           ))}
@@ -797,13 +800,22 @@ function CalendarWidget({ module }: { module: ModuleBranch }) {
             <button
               key={cell.key}
               type="button"
-              className={`mx-auto flex h-7 w-7 items-center justify-center text-xs transition-colors hover:bg-surface-sunken ${
-                cell.inMonth ? 'text-text-primary' : 'text-text-muted'
-              } ${cell.isToday ? 'border border-ink-500 bg-surface-sunken text-text-primary' : ''}`}
+              className="group/day flex h-7 items-center justify-center"
               title={calendarCellTitle(cell.date)}
               aria-label={calendarCellTitle(cell.date)}
+              aria-current={cell.isToday ? 'date' : undefined}
             >
-              {cell.date.getDate()}
+              <span
+                className={`flex h-6 w-6 items-center justify-center rounded-[2px] font-mono text-[11px] tabular-nums transition-colors ${
+                  cell.isToday
+                    ? 'bg-text-primary font-medium text-background'
+                    : cell.inMonth
+                      ? 'text-text-secondary group-hover/day:bg-surface-sunken group-hover/day:text-text-primary'
+                      : 'text-text-muted/60 group-hover/day:bg-surface-sunken'
+                }`}
+              >
+                {cell.date.getDate()}
+              </span>
             </button>
           ))}
         </div>
@@ -984,33 +996,37 @@ function WeatherWidget({ module, state }: { module: ModuleBranch; state: ModuleD
         <ModuleBodyState state={state} skeleton="weather" />
       ) : (
         <>
-          <div>
-            <div>
-              <div className="text-3xl font-light leading-none tracking-tight text-text-primary">
+          <div className="flex items-start justify-between gap-3">
+            <div className="min-w-0">
+              <div className="text-[2.5rem] font-light leading-none tracking-tight text-text-primary">
                 {Math.round(data.temperature)}°
               </div>
-              <div className="mt-2 text-xs text-text-tertiary">
+              <div className="mt-2 truncate text-xs text-text-secondary" title={data.condition}>
                 {data.condition}
               </div>
             </div>
-            <div className="mt-4 border-t border-border-light pt-3 font-mono text-[10px] leading-relaxed text-text-tertiary">
-              <span className="text-text-secondary">{data.location}</span>
-              <span className="mx-1.5 text-text-muted">·</span>
-              <span>{Math.round(data.humidity)}% humidity</span>
+            <div className="shrink-0 text-right font-mono text-[10px] leading-relaxed text-text-muted">
+              <div className="truncate text-text-secondary" title={data.location}>{data.location}</div>
+              <div className="mt-0.5 tabular-nums">{Math.round(data.humidity)}% RH</div>
             </div>
           </div>
-          <div className="mt-3 grid grid-cols-3 gap-2">
+          <div className="mt-4 border-t border-border-light pt-1">
             {data.forecast.map((day) => (
-              <div key={day.date} title={day.condition}>
-                <div className="text-[10px] uppercase tracking-wider text-text-tertiary">
+              <div
+                key={day.date}
+                className="flex items-baseline gap-3 border-b border-border-light/70 py-1.5 last:border-0"
+                title={day.condition}
+              >
+                <span className="w-8 shrink-0 font-mono text-[10px] uppercase tracking-wider text-text-tertiary">
                   {formatWeekday(day.date)}
-                </div>
-                <div className="mt-1 font-mono text-[11px] text-text-secondary">
-                  {Math.round(day.high)}/{Math.round(day.low)}
-                </div>
-                <div className="mt-0.5 truncate text-[10px] leading-tight text-text-muted">
+                </span>
+                <span className="min-w-0 flex-1 truncate text-[11px] text-text-tertiary">
                   {day.condition}
-                </div>
+                </span>
+                <span className="shrink-0 font-mono text-[11px] tabular-nums text-text-secondary">
+                  {Math.round(day.high)}°
+                  <span className="ml-1 text-text-muted">{Math.round(day.low)}°</span>
+                </span>
               </div>
             ))}
           </div>
@@ -1046,12 +1062,18 @@ function MarketsWidget({ module, state }: { module: ModuleBranch; state: ModuleD
                     {quote.name}
                   </div>
                 </div>
-                <MarketSparkline values={quote.sparkline} />
+                <Sparkline
+                  values={quote.sparkline}
+                  width={56}
+                  height={24}
+                  tone={quote.changePercent >= 0 ? 'up' : 'down'}
+                  ariaLabel={`${quote.symbol} recent trend`}
+                />
                 <div className="min-w-0 text-right font-mono">
-                  <div className={`text-xs font-medium leading-tight tracking-tight ${trendTone}`}>
+                  <div className={`text-xs font-medium leading-tight tracking-tight tabular-nums ${trendTone}`}>
                     {change}
                   </div>
-                  <div className="mt-1 truncate text-[11px] leading-tight text-text-secondary">
+                  <div className="mt-1 truncate text-[11px] leading-tight tabular-nums text-text-secondary">
                     {formatMarketPrice(quote.price, quote.currency)}
                   </div>
                 </div>
@@ -1064,39 +1086,6 @@ function MarketsWidget({ module, state }: { module: ModuleBranch; state: ModuleD
   );
 }
 
-function MarketSparkline({
-  values,
-}: {
-  values: number[];
-}) {
-  const points = sparklinePoints(values, 56, 24);
-
-  if (!points) {
-    return <div className="h-[24px]" />;
-  }
-
-  return (
-    <div className="h-[24px] w-full overflow-hidden">
-      <svg
-        viewBox="0 0 56 24"
-        preserveAspectRatio="none"
-        className="h-full w-full text-ink-400"
-        aria-label="Recent price trend"
-      >
-        <polyline
-          points={points}
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="1.25"
-          vectorEffect="non-scaling-stroke"
-          strokeLinejoin="round"
-          strokeLinecap="round"
-        />
-      </svg>
-    </div>
-  );
-}
-
 function MediaWidget({ module, state }: { module: ModuleBranch; state: ModuleDataState }) {
   const data = state.data?.kind === 'media' ? state.data as MediaModuleData : null;
   const nowPlaying = data?.nowPlaying ?? [];
@@ -2854,26 +2843,6 @@ function marketTrendTone(changePercent: number) {
   return changePercent > 0 ? 'text-accent-green-dark' : 'text-accent-red-dark';
 }
 
-function sparklinePoints(values: number[], width = 120, height = 28) {
-  const points = values.filter((value) => Number.isFinite(value));
-  if (points.length < 2) return '';
-
-  const min = Math.min(...points);
-  const max = Math.max(...points);
-  const span = max - min || 1;
-  const xStep = width / (points.length - 1);
-
-  return points.map((value, index) => {
-    const x = index * xStep;
-    const y = height - ((value - min) / span) * height;
-    return `${roundSvgNumber(x)},${roundSvgNumber(y)}`;
-  }).join(' ');
-}
-
-function roundSvgNumber(value: number) {
-  return Math.round(value * 10) / 10;
-}
-
 function formatCompactNumber(value: number) {
   return new Intl.NumberFormat(undefined, {
     notation: 'compact',

From 50eabdd08b834c0efda538dc0168472862452160 Mon Sep 17 00:00:00 2001
From: Bolin Huang <ibh@live.com>
Date: Thu, 25 Jun 2026 23:46:33 -0700
Subject: [PATCH 06/18] refactor(posts): technical underlined tabs + tabular
 meta
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tabs: mono uppercase labels with a solid-ink active underline that overlays the
baseline rule (1.5px), and idle tabs reveal a faint hairline on hover with a
smooth 200ms fade — reads as printed technical tabs, not boxed controls. The
sliding hover rail and edit-mode tab composition (stacked sources shown as one
tabbed module) are preserved. Post meta uses tabular-nums and a quieter source
caption.
---
 web/src/components/Tree/TreeModule.tsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/web/src/components/Tree/TreeModule.tsx b/web/src/components/Tree/TreeModule.tsx
index 2b0a099..9495654 100644
--- a/web/src/components/Tree/TreeModule.tsx
+++ b/web/src/components/Tree/TreeModule.tsx
@@ -1790,7 +1790,7 @@ function PostStackTabs({
             type="button"
             onClick={() => onSelect(source.id)}
             {...dragProps}
-            className={`group relative text-[10px] uppercase tracking-wider transition-colors ${
+            className={`group relative font-mono text-[10px] uppercase tracking-[0.12em] transition-colors ${
               framed ? '-mb-px pb-2' : 'pb-1'
             } ${
               draggable ? 'cursor-grab active:cursor-grabbing' : ''
@@ -1804,10 +1804,14 @@ function PostStackTabs({
             <span className="inline-block max-w-[9rem] truncate">
               {postModuleTabLabel(source)}
             </span>
+            {/* Active tab: a solid ink underline that sits over the baseline
+                rule; idle tabs reveal a faint hairline on hover. */}
             <span
               aria-hidden
-              className={`absolute bottom-0 left-0 h-px w-full transition-colors ${
-                isSelected ? 'bg-ink-700' : 'bg-transparent group-hover:bg-border-medium'
+              className={`absolute -bottom-px left-0 h-[1.5px] w-full transition-all duration-200 ${
+                isSelected
+                  ? 'bg-text-primary opacity-100'
+                  : 'bg-border-medium opacity-0 group-hover:opacity-100'
               }`}
             />
           </button>
@@ -1932,10 +1936,10 @@ function PostsContent({
                 read ? 'text-text-muted' : 'text-text-tertiary group-hover:text-text-secondary'
               }`}
             >
-              <span>{post.source}</span>
-              {(post.meta || post.publishedAt) && <span>·</span>}
-              {post.meta && <span className="truncate">{post.meta}</span>}
-              {post.publishedAt && <span className="flex-shrink-0">{formatRelativeTime(post.publishedAt)}</span>}
+              <span className="uppercase tracking-wider text-text-muted">{post.source}</span>
+              {(post.meta || post.publishedAt) && <span className="text-text-muted">·</span>}
+              {post.meta && <span className="truncate tabular-nums">{post.meta}</span>}
+              {post.publishedAt && <span className="flex-shrink-0 tabular-nums">{formatRelativeTime(post.publishedAt)}</span>}
             </div>
           </a>
         );

From ee3be3bc1468d44921a648a52bc637a51057db06 Mon Sep 17 00:00:00 2001
From: Bolin Huang <ibh@live.com>
Date: Thu, 25 Jun 2026 23:54:47 -0700
Subject: [PATCH 07/18] docs(design): codify spec-sheet primitives for
 data-dense modules
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a Structure subsection documenting the Archival Technical Minimalism
primitives introduced for Media + Server (specPrimitives.tsx): the no-boxes-in-
boxes rule, SpecCaption/SpecRow/SpecMetric/MetaChip/Sparkline vocabulary, and
the bare-label status convention. New pattern → spec first, per CLAUDE.md.
---
 web/DESIGN_SPEC.md | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/web/DESIGN_SPEC.md b/web/DESIGN_SPEC.md
index 788be14..1f1805e 100644
--- a/web/DESIGN_SPEC.md
+++ b/web/DESIGN_SPEC.md
@@ -107,6 +107,27 @@ Non-interactive things (section titles, labels, data rows that aren't links) nev
 - WYSIWYG: edit mode must not reshape view mode. Nothing appears in edit mode that occupies layout
   space the view mode doesn't have (edit affordances live in headers, overlays, or handles).
 
+### Spec-sheet primitives (data-dense modules)
+
+Modules that report structured data — media providers, server telemetry — render like a printed
+spec sheet, **not** as a stack of nested cards. The shared primitives in
+`components/Tree/specPrimitives.tsx` encode this; reach for them before inventing per-module markup.
+
+- **No boxes-in-boxes.** A module never wraps sub-groups in their own bordered/`bg-surface` cards.
+  Internal structure comes from hairline rules and a shared alignment grid.
+- **`SpecCaption`** titles a block: a mono `uppercase tracking-[0.14em]` caption on a single
+  bottom hairline, with an optional tabular aside on the right. This is the only internal "header".
+- **`SpecRow` / `SpecRows`** are the ledger: label left (mono, tertiary), value right (mono,
+  `tabular-nums`), baseline-aligned, separated by faint dividers. Two ledgers side by side make a
+  two-column fact sheet.
+- **`SpecMetric`** is a glanceable gauge: tiny label + tabular value over an optional **1px** bar on
+  a hairline track (`bg-border-light`). Tone (ok/warn/crit → moss/amber/rust) appears only under load.
+- **`MetaChip` / `MetaChipGroup`** replace bordered "badges": a borderless `surface-sunken` chip,
+  label and value split by a single hairline. Use for repeated metadata (library counts, facts).
+- **`Sparkline`** is the one trend language: a 1.25px non-scaling polyline with an optional 8%-opacity
+  area fill. `tone` carries meaning (`up`/`down`/`accent`), default `ink` stays quiet. No chart libs.
+- Status reads as a bare mono label + dot (`online` moss, `stale` muted) — not a filled pill.
+
 ## Litmus tests
 
 Before shipping UI, ask:

From 8d170fc2c0b50914c5fbd1e468b8f81e017f469e Mon Sep 17 00:00:00 2001
From: Bolin Huang <ibh@live.com>
Date: Fri, 26 Jun 2026 00:18:54 -0700
Subject: [PATCH 08/18] =?UTF-8?q?feat(calendar):=20archival=20month-ledger?=
 =?UTF-8?q?=20slice=20=E2=80=94=20SpecHeader,=20registration=20today,=20we?=
 =?UTF-8?q?ek=20numbers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Introduce the dashboard's signature archival devices and apply them to Calendar
as a vertical slice (style probe before rolling out to other modules):

- SpecHeader: a filed-record index line — fixed module code (CAL) + provenance
  (LOCAL) on the left, a registration mark (⌖) + serial (2026·06) on the right,
  on one hairline rule. The site-wide motif that makes a module read as an
  archived record, not a generic card.
- RegistrationMark: four corner crop-ticks framing content; the new focus/today
  marker (instrument target, not a filled highlight).
- Stamp: one mono stamped-label status language (live/idle/±/syncing) for reuse.

Calendar is rebuilt as a month ledger: a WK week-number gutter column (the
technical tell), mono tabular days, printed-grey out-of-month + lighter weekend
days, and the registration-mark today cell replacing the solid-ink square.
Adds isoWeekNumber + formatMonthSerial helpers. No grain, no card border,
WYSIWYG and dark-mode tokens intact.
---
 web/src/components/Tree/TreeModule.tsx     | 136 ++++++++++++++-------
 web/src/components/Tree/specPrimitives.tsx | 124 +++++++++++++++++++
 2 files changed, 217 insertions(+), 43 deletions(-)

diff --git a/web/src/components/Tree/TreeModule.tsx b/web/src/components/Tree/TreeModule.tsx
index 9495654..225fb30 100644
--- a/web/src/components/Tree/TreeModule.tsx
+++ b/web/src/components/Tree/TreeModule.tsx
@@ -53,7 +53,13 @@ import {
   type DropPlacement,
 } from '@/lib/drag';
 import SectionAddControl from '@/components/Tree/SectionAddControl';
-import { MetaChip, MetaChipGroup, Sparkline } from '@/components/Tree/specPrimitives';
+import {
+  MetaChip,
+  MetaChipGroup,
+  RegistrationMark,
+  Sparkline,
+  SpecHeader,
+} from '@/components/Tree/specPrimitives';
 
 interface ModuleTree {
   root: string;
@@ -743,6 +749,13 @@ function LiveModuleWidget({ module }: { module: ModuleBranch }) {
 function CalendarWidget({ module }: { module: ModuleBranch }) {
   const [calendarMonth, setCalendarMonth] = useState(() => startOfMonth(new Date()));
   const cells = useMemo(() => calendarCells(calendarMonth), [calendarMonth]);
+  // Group the 42-cell grid into 6 week rows so each can carry its ISO week no.
+  const weeks = useMemo(() => {
+    const rows: (typeof cells)[] = [];
+    for (let i = 0; i < cells.length; i += 7) rows.push(cells.slice(i, i + 7));
+    return rows;
+  }, [cells]);
+  const isCurrentMonth = startOfMonth(new Date()).getTime() === calendarMonth.getTime();
 
   const moveMonth = (offset: number) => {
     setCalendarMonth((currentMonth) => (
@@ -750,73 +763,99 @@ function CalendarWidget({ module }: { module: ModuleBranch }) {
     ));
   };
 
+  // Column template: a narrow week-number gutter + 7 equal day columns. The
+  // gutter is what turns the month into a technical ledger.
+  const gridCols = 'grid grid-cols-[1.75rem_repeat(7,minmax(0,1fr))]';
+
   return (
     <ModulePanel module={module}>
-      <div>
-        <div className="mb-3 flex items-center justify-between gap-2 border-b border-border-light pb-2">
-          <div className="font-mono text-[11px] uppercase tracking-wider text-text-secondary">
-            {formatCalendarMonth(calendarMonth)}
-          </div>
-          <div className="flex items-center gap-1 text-text-muted">
+      <SpecHeader
+        code="CAL"
+        source="LOCAL"
+        serial={formatMonthSerial(calendarMonth)}
+        right={(
+          <div className="flex items-center gap-0.5 text-text-muted">
             <button
               type="button"
               onClick={() => moveMonth(-1)}
-              className="flex h-5 w-5 items-center justify-center hover:bg-surface-sunken hover:text-text-primary"
+              className="flex h-5 w-5 items-center justify-center transition-colors hover:text-text-primary"
               aria-label="Previous month"
               title="Previous month"
             >
-              &lsaquo;
+              <IconChevronLeft className="h-3.5 w-3.5" />
             </button>
             <button
               type="button"
               onClick={() => setCalendarMonth(startOfMonth(new Date()))}
-              className="flex h-5 w-5 items-center justify-center hover:bg-surface-sunken hover:text-text-primary"
+              className={`flex h-5 w-5 items-center justify-center transition-colors hover:text-text-primary ${isCurrentMonth ? 'text-text-secondary' : ''}`}
               aria-label="Current month"
-              title="Current month"
+              title="Jump to current month"
             >
-              <span className="h-1.5 w-1.5 rounded-full bg-current" />
+              <span className={`h-1.5 w-1.5 ${isCurrentMonth ? 'bg-text-primary' : 'border border-current'}`} />
             </button>
             <button
               type="button"
               onClick={() => moveMonth(1)}
-              className="flex h-5 w-5 items-center justify-center hover:bg-surface-sunken hover:text-text-primary"
+              className="flex h-5 w-5 items-center justify-center transition-colors hover:text-text-primary"
               aria-label="Next month"
               title="Next month"
             >
-              &rsaquo;
+              <IconChevronRight className="h-3.5 w-3.5" />
             </button>
           </div>
-        </div>
-        <div className="grid grid-cols-7 text-center">
+        )}
+      />
+
+      <div className="mt-2.5">
+        <div className={`${gridCols} text-center`}>
+          <div aria-hidden className="font-mono text-[8px] uppercase tracking-wider text-text-muted/70">
+            WK
+          </div>
           {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((weekday, index) => (
             <div
               key={`${weekday}-${index}`}
-              className="pb-2 font-mono text-[9px] font-medium uppercase tracking-[0.12em] text-text-muted"
+              className={`pb-2 font-mono text-[9px] font-medium uppercase tracking-[0.12em] ${
+                index === 0 || index === 6 ? 'text-text-muted/60' : 'text-text-muted'
+              }`}
             >
               {weekday}
             </div>
           ))}
-          {cells.map((cell) => (
-            <button
-              key={cell.key}
-              type="button"
-              className="group/day flex h-7 items-center justify-center"
-              title={calendarCellTitle(cell.date)}
-              aria-label={calendarCellTitle(cell.date)}
-              aria-current={cell.isToday ? 'date' : undefined}
-            >
-              <span
-                className={`flex h-6 w-6 items-center justify-center rounded-[2px] font-mono text-[11px] tabular-nums transition-colors ${
-                  cell.isToday
-                    ? 'bg-text-primary font-medium text-background'
-                    : cell.inMonth
-                      ? 'text-text-secondary group-hover/day:bg-surface-sunken group-hover/day:text-text-primary'
-                      : 'text-text-muted/60 group-hover/day:bg-surface-sunken'
-                }`}
-              >
-                {cell.date.getDate()}
-              </span>
-            </button>
+        </div>
+        <div className="space-y-px">
+          {weeks.map((week) => (
+            <div key={week[0].key} className={`${gridCols} text-center`}>
+              <div className="flex h-7 items-center justify-center font-mono text-[9px] tabular-nums text-text-muted/55">
+                {isoWeekNumber(week[0].date)}
+              </div>
+              {week.map((cell, dayIndex) => {
+                const isWeekend = dayIndex === 0 || dayIndex === 6;
+                return (
+                  <button
+                    key={cell.key}
+                    type="button"
+                    className="group/day flex h-7 items-center justify-center"
+                    title={calendarCellTitle(cell.date)}
+                    aria-label={calendarCellTitle(cell.date)}
+                    aria-current={cell.isToday ? 'date' : undefined}
+                  >
+                    <RegistrationMark active={cell.isToday} size={5} className="h-6 w-6">
+                      <span
+                        className={`font-mono text-[11px] tabular-nums transition-colors ${
+                          cell.isToday
+                            ? 'font-medium text-text-primary'
+                            : cell.inMonth
+                              ? `${isWeekend ? 'text-text-tertiary' : 'text-text-secondary'} group-hover/day:text-text-primary`
+                              : 'text-text-muted/45 group-hover/day:text-text-muted'
+                        }`}
+                      >
+                        {cell.date.getDate()}
+                      </span>
+                    </RegistrationMark>
+                  </button>
+                );
+              })}
+            </div>
           ))}
         </div>
       </div>
@@ -2774,11 +2813,22 @@ function startOfMonth(date: Date) {
   return new Date(date.getFullYear(), date.getMonth(), 1);
 }
 
-function formatCalendarMonth(date: Date) {
-  return new Intl.DateTimeFormat(undefined, {
-    month: 'short',
-    year: 'numeric',
-  }).format(date);
+// Month code for the spec header, e.g. "2026·06" — a filed-record serial, not a
+// prose month name.
+function formatMonthSerial(date: Date) {
+  return `${date.getFullYear()}·${String(date.getMonth() + 1).padStart(2, '0')}`;
+}
+
+// ISO-8601 week number (weeks start Monday; week 1 contains the first Thursday).
+function isoWeekNumber(date: Date) {
+  const target = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+  const dayNumber = (target.getUTCDay() + 6) % 7; // Mon=0 … Sun=6
+  target.setUTCDate(target.getUTCDate() - dayNumber + 3); // nearest Thursday
+  const firstThursday = new Date(Date.UTC(target.getUTCFullYear(), 0, 4));
+  const firstDayNumber = (firstThursday.getUTCDay() + 6) % 7;
+  firstThursday.setUTCDate(firstThursday.getUTCDate() - firstDayNumber + 3);
+  const week = 1 + Math.round((target.getTime() - firstThursday.getTime()) / (7 * 24 * 3600 * 1000));
+  return String(week).padStart(2, '0');
 }
 
 function calendarCells(monthDate: Date) {
diff --git a/web/src/components/Tree/specPrimitives.tsx b/web/src/components/Tree/specPrimitives.tsx
index 3fb9b8a..a5bec67 100644
--- a/web/src/components/Tree/specPrimitives.tsx
+++ b/web/src/components/Tree/specPrimitives.tsx
@@ -38,6 +38,130 @@ export function SpecCaption({
   );
 }
 
+/**
+ * A registration / crop mark: four corner ticks framing a content box, the way a
+ * print sheet marks a registered area. The site's signature "focus/today" frame
+ * — used instead of a filled highlight so a marked cell reads as an instrument
+ * target, not a button. Renders its children centered inside the marked area.
+ */
+export function RegistrationMark({
+  children,
+  active = true,
+  size = 6,
+  className = '',
+}: {
+  children: React.ReactNode;
+  /** When false, ticks are hidden (children render bare) — for hover/idle. */
+  active?: boolean;
+  /** Tick arm length in px. */
+  size?: number;
+  className?: string;
+}) {
+  const arm = `${size}px`;
+  const tick = active ? 'border-text-primary' : 'border-transparent';
+  return (
+    <span className={`relative inline-flex items-center justify-center ${className}`}>
+      <span aria-hidden className={`pointer-events-none absolute left-0 top-0 border-l border-t ${tick}`} style={{ width: arm, height: arm }} />
+      <span aria-hidden className={`pointer-events-none absolute right-0 top-0 border-r border-t ${tick}`} style={{ width: arm, height: arm }} />
+      <span aria-hidden className={`pointer-events-none absolute bottom-0 left-0 border-b border-l ${tick}`} style={{ width: arm, height: arm }} />
+      <span aria-hidden className={`pointer-events-none absolute bottom-0 right-0 border-b border-r ${tick}`} style={{ width: arm, height: arm }} />
+      {children}
+    </span>
+  );
+}
+
+type StampTone = 'live' | 'idle' | 'positive' | 'negative' | 'syncing' | 'warning';
+
+/**
+ * A stamped status label: a tiny mono uppercase code, optionally with a leading
+ * dot, drawn like an inspection stamp rather than a filled pill. One consistent
+ * status language across the dashboard (online/stale/today/±/syncing).
+ */
+export function Stamp({
+  children,
+  tone = 'idle',
+  dot = true,
+  className = '',
+}: {
+  children: React.ReactNode;
+  tone?: StampTone;
+  dot?: boolean;
+  className?: string;
+}) {
+  const text =
+    tone === 'live' || tone === 'positive'
+      ? 'text-accent-green-dark'
+      : tone === 'negative'
+        ? 'text-accent-red-dark'
+        : tone === 'warning'
+          ? 'text-accent-amber-dark'
+          : tone === 'syncing'
+            ? 'text-text-secondary'
+            : 'text-text-muted';
+  const dotColor =
+    tone === 'live' || tone === 'positive'
+      ? 'bg-accent-green'
+      : tone === 'negative'
+        ? 'bg-accent-red'
+        : tone === 'warning'
+          ? 'bg-accent-amber'
+          : 'bg-ink-300';
+
+  return (
+    <span className={`inline-flex items-center gap-1 font-mono text-[9px] uppercase tracking-[0.16em] ${text} ${className}`}>
+      {dot && <span className={`h-1 w-1 rounded-full ${dotColor} ${tone === 'syncing' ? 'animate-pulse' : ''}`} />}
+      {children}
+    </span>
+  );
+}
+
+/**
+ * The module's archival index header: a fixed semantic code (e.g. CAL) and a
+ * data-source label (LOCAL / LIVE / CACHED) on the left, an optional serial /
+ * coordinate on the right beside a registration mark — all on one hairline rule.
+ * This is the dashboard's signature "filed record" header.
+ */
+export function SpecHeader({
+  code,
+  source,
+  serial,
+  right,
+  className = '',
+}: {
+  /** Fixed module code, e.g. "CAL", "SRV", "WTHR". */
+  code: string;
+  /** Provenance tag, e.g. "LOCAL", "LIVE", "CACHED". */
+  source?: string;
+  /** Right-aligned serial / coordinate, e.g. "2026·06". */
+  serial?: string;
+  /** Extra right-side controls (nav, refresh) rendered after the serial. */
+  right?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={`flex items-center justify-between gap-3 border-b border-border-light pb-2 ${className}`}>
+      <div className="flex min-w-0 items-center gap-2 font-mono text-[10px] uppercase tracking-[0.16em]">
+        <span className="text-text-secondary">{code}</span>
+        {source && (
+          <>
+            <span aria-hidden className="text-text-muted">/</span>
+            <span className="text-text-muted">{source}</span>
+          </>
+        )}
+      </div>
+      <div className="flex shrink-0 items-center gap-2.5">
+        {serial && (
+          <span className="flex items-center gap-1.5 font-mono text-[10px] tabular-nums tracking-wider text-text-muted">
+            <span aria-hidden className="text-text-tertiary">⌖</span>
+            {serial}
+          </span>
+        )}
+        {right}
+      </div>
+    </div>
+  );
+}
+
 /**
  * One ledger row: a label on the left, a value on the right, baseline-aligned.
  * Inside a {@link SpecRows} group the rows share dotted hairline separators, so

From 673d69fa761193286de16d4d5c9f5cf03786a134 Mon Sep 17 00:00:00 2001
From: Bolin Huang <ibh@live.com>
Date: Fri, 26 Jun 2026 00:26:14 -0700
Subject: [PATCH 09/18] feat(markets/weather/server): apply archival SpecHeader
 + Stamp motif
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Thread an optional specHeader slot through ModulePanel (+ renderModuleStatusControl
to keep refresh/status in its right slot), then roll the motif out:

- Markets: MKT / LIVE header with a '<n> SYM' serial; each row reads as a ticker
  instrument; delta becomes a stamped ▲/▼ signed figure (positive/negative tone).
  Removes the now-unused marketTrendTone.
- Weather: WTHR / LIVE header (°C/°F serial); temperature reads as a measurement
  figure with a unit tick; station metadata (location, RH) aligned right.
- Server: an SRV / LIVE (or STALE) index line above the device label; status now
  uses the shared Stamp primitive instead of an ad-hoc badge.

No new card borders; dark-mode tokens intact.
---
 web/src/components/Tree/TreeModule.tsx | 104 ++++++++++++++++++++-----
 web/src/components/Tree/TreeServer.tsx |  52 +++++++------
 2 files changed, 111 insertions(+), 45 deletions(-)

diff --git a/web/src/components/Tree/TreeModule.tsx b/web/src/components/Tree/TreeModule.tsx
index 225fb30..a731c47 100644
--- a/web/src/components/Tree/TreeModule.tsx
+++ b/web/src/components/Tree/TreeModule.tsx
@@ -948,6 +948,7 @@ function ModulePanel({
   href,
   titleOverride,
   header,
+  specHeader,
   children,
 }: {
   module: ModuleBranch;
@@ -956,6 +957,12 @@ function ModulePanel({
   titleOverride?: string;
   /** Replaces the icon + title cluster, e.g. a tab bar acting as the header. */
   header?: React.ReactNode;
+  /**
+   * Archival SpecHeader that becomes the whole panel header. Build it with
+   * `renderModuleStatusControl(state)` in its `right` slot to keep refresh +
+   * status. Replaces the default single-root status line.
+   */
+  specHeader?: React.ReactNode;
   children: React.ReactNode;
 }) {
   const statusClass = state?.error
@@ -991,7 +998,9 @@ function ModulePanel({
   // Borderless: structure comes from spacing, not a card outline (DESIGN_SPEC).
   return (
     <section className="relative">
-      {titleInSectionHeader ? (
+      {specHeader ? (
+        <div className="mb-3">{specHeader}</div>
+      ) : titleInSectionHeader ? (
         statusControl && (
           <div className="mb-2 flex h-5 items-center justify-end">{statusControl}</div>
         )
@@ -1026,27 +1035,74 @@ function ModulePanel({
   );
 }
 
+// Refresh button + status dot, for use in a SpecHeader's `right` slot so the
+// archival header carries the same controls the default panel header would.
+function renderModuleStatusControl(state: ModuleDataState, label: string) {
+  const statusClass = state.error
+    ? 'bg-accent-red'
+    : state.isLoading
+      ? 'bg-ink-300'
+      : 'bg-accent-green';
+  return (
+    <div className="flex items-center gap-2">
+      <button
+        type="button"
+        onClick={state.refresh}
+        className="flex h-5 w-5 items-center justify-center text-text-muted transition-colors hover:text-text-primary"
+        aria-label={`Refresh ${label}`}
+        title="Refresh"
+      >
+        <IconRefresh className={`h-3 w-3 ${state.isLoading ? 'animate-spin' : ''}`} />
+      </button>
+      <div
+        className={`h-1.5 w-1.5 rounded-full ${statusClass}`}
+        title={state.error || (state.isLoading ? 'Loading' : 'Online')}
+      />
+    </div>
+  );
+}
+
 function WeatherWidget({ module, state }: { module: ModuleBranch; state: ModuleDataState }) {
   const data = state.data?.kind === 'weather' ? state.data as WeatherModuleData : null;
 
+  const unit = data?.temperatureUnit === 'fahrenheit' ? 'F' : 'C';
+
   return (
-    <ModulePanel module={module} state={state}>
+    <ModulePanel
+      module={module}
+      state={state}
+      specHeader={(
+        <SpecHeader
+          code="WTHR"
+          source="LIVE"
+          serial={`°${unit}`}
+          right={renderModuleStatusControl(state, 'Weather')}
+        />
+      )}
+    >
       {!data ? (
         <ModuleBodyState state={state} skeleton="weather" />
       ) : (
         <>
+          {/* Station reading: a large measurement figure with a unit tick, the
+              condition as a caption, and station metadata aligned right. */}
           <div className="flex items-start justify-between gap-3">
             <div className="min-w-0">
-              <div className="text-[2.5rem] font-light leading-none tracking-tight text-text-primary">
-                {Math.round(data.temperature)}°
+              <div className="flex items-start gap-0.5 text-text-primary">
+                <span className="text-[2.5rem] font-light leading-none tracking-tight tabular-nums">
+                  {Math.round(data.temperature)}
+                </span>
+                <span className="mt-1 font-mono text-sm text-text-tertiary">°{unit}</span>
               </div>
               <div className="mt-2 truncate text-xs text-text-secondary" title={data.condition}>
                 {data.condition}
               </div>
             </div>
-            <div className="shrink-0 text-right font-mono text-[10px] leading-relaxed text-text-muted">
-              <div className="truncate text-text-secondary" title={data.location}>{data.location}</div>
-              <div className="mt-0.5 tabular-nums">{Math.round(data.humidity)}% RH</div>
+            <div className="shrink-0 text-right font-mono text-[10px] leading-relaxed">
+              <div className="max-w-[9rem] truncate text-text-secondary" title={data.location}>{data.location}</div>
+              <div className="mt-1 tabular-nums text-text-muted">
+                <span className="text-text-tertiary">RH</span> {Math.round(data.humidity)}%
+              </div>
             </div>
           </div>
           <div className="mt-4 border-t border-border-light pt-1">
@@ -1079,22 +1135,33 @@ function MarketsWidget({ module, state }: { module: ModuleBranch; state: ModuleD
   const data = state.data?.kind === 'markets' ? state.data as MarketsModuleData : null;
 
   return (
-    <ModulePanel module={module} state={state}>
+    <ModulePanel
+      module={module}
+      state={state}
+      specHeader={(
+        <SpecHeader
+          code="MKT"
+          source="LIVE"
+          serial={data ? `${data.quotes.length} SYM` : undefined}
+          right={renderModuleStatusControl(state, 'Markets')}
+        />
+      )}
+    >
       {!data ? (
         <ModuleBodyState state={state} skeleton="markets" />
       ) : (
-        <div className="-my-1 divide-y divide-border-light">
+        <div className="-mt-1 divide-y divide-border-light/70">
           {data.quotes.map((quote) => {
-            const change = `${quote.changePercent >= 0 ? '+' : ''}${quote.changePercent.toFixed(2)}%`;
-            const trendTone = marketTrendTone(quote.changePercent);
+            const up = quote.changePercent >= 0;
+            const change = `${up ? '+' : ''}${quote.changePercent.toFixed(2)}%`;
 
             return (
               <div
                 key={quote.symbol}
-                className="grid grid-cols-[minmax(0,1fr)_56px_minmax(4.5rem,auto)] items-center gap-3 py-2.5"
+                className="grid grid-cols-[minmax(0,1fr)_56px_minmax(5rem,auto)] items-center gap-3 py-2.5"
               >
                 <div className="min-w-0">
-                  <div className="truncate font-mono text-xs font-medium uppercase leading-tight tracking-tight text-text-primary">
+                  <div className="truncate font-mono text-xs font-medium uppercase leading-tight tracking-wide text-text-primary">
                     {quote.symbol}
                   </div>
                   <div className="mt-1 truncate text-[10px] leading-tight text-text-tertiary">
@@ -1105,11 +1172,13 @@ function MarketsWidget({ module, state }: { module: ModuleBranch; state: ModuleD
                   values={quote.sparkline}
                   width={56}
                   height={24}
-                  tone={quote.changePercent >= 0 ? 'up' : 'down'}
+                  tone={up ? 'up' : 'down'}
                   ariaLabel={`${quote.symbol} recent trend`}
                 />
                 <div className="min-w-0 text-right font-mono">
-                  <div className={`text-xs font-medium leading-tight tracking-tight tabular-nums ${trendTone}`}>
+                  {/* Delta as a stamped figure: a tick glyph + signed percent. */}
+                  <div className={`flex items-center justify-end gap-1 text-xs font-medium leading-tight tabular-nums ${up ? 'text-accent-green-dark' : 'text-accent-red-dark'}`}>
+                    <span aria-hidden className="text-[9px]">{up ? '▲' : '▼'}</span>
                     {change}
                   </div>
                   <div className="mt-1 truncate text-[11px] leading-tight tabular-nums text-text-secondary">
@@ -2892,11 +2961,6 @@ function formatMarketPrice(value: number, currency?: string) {
   return value.toFixed(4);
 }
 
-function marketTrendTone(changePercent: number) {
-  if (Math.abs(changePercent) < 0.005) return 'text-text-secondary';
-  return changePercent > 0 ? 'text-accent-green-dark' : 'text-accent-red-dark';
-}
-
 function formatCompactNumber(value: number) {
   return new Intl.NumberFormat(undefined, {
     notation: 'compact',
diff --git a/web/src/components/Tree/TreeServer.tsx b/web/src/components/Tree/TreeServer.tsx
index e827e90..2dcab0b 100644
--- a/web/src/components/Tree/TreeServer.tsx
+++ b/web/src/components/Tree/TreeServer.tsx
@@ -19,7 +19,7 @@ import { DEFAULT_SERVER_ICON } from '@/lib/svg';
 import { SERVER_ICON_PRESETS } from '@/lib/iconPresets';
 import IconField from '@/components/IconField';
 import SectionAddControl from '@/components/Tree/SectionAddControl';
-import { Sparkline, SpecMetric, SpecRow, SpecRows } from '@/components/Tree/specPrimitives';
+import { Sparkline, SpecMetric, SpecRow, SpecRows, Stamp } from '@/components/Tree/specPrimitives';
 
 interface ServerTree {
   root: string;
@@ -390,28 +390,21 @@ const TreeServer: React.FC<TreeServerProps> = ({
               </div>
             ) : (
               <>
-                <div className="flex items-start justify-between gap-3 border-b border-border-light pb-3">
-                  <div className="flex min-w-0 items-center gap-2.5">
-                    {renderDragHandle(server)}
-                    <div className="flex h-7 w-7 flex-shrink-0 items-center justify-center text-text-secondary">
-                      <SvgIcon svg={server.icon} fallback={DEFAULT_SERVER_ICON} className="h-[18px] w-[18px]" />
-                    </div>
-                    <div className="min-w-0">
-                      <div className="truncate text-[13px] font-medium leading-tight text-text-primary">
-                        {server.name}
-                      </div>
-                      <div className="mt-0.5 truncate font-mono text-[11px] leading-tight text-text-tertiary">
-                        {removeProtocol(server.url)}
-                      </div>
-                    </div>
+                {/* Archival index line: fixed code + provenance, status stamped
+                    on the right — the same SpecHeader motif as other modules. */}
+                <div className="mb-2.5 flex items-center justify-between gap-3 border-b border-border-light pb-2">
+                  <div className="flex min-w-0 items-center gap-2 font-mono text-[10px] uppercase tracking-[0.16em]">
+                    <span className="text-text-secondary">SRV</span>
+                    <span aria-hidden className="text-text-muted">/</span>
+                    <span className="text-text-muted">{isStale ? 'STALE' : 'LIVE'}</span>
                   </div>
-                  <div className="flex items-center gap-2">
+                  <div className="flex items-center gap-2.5">
                     <ServerStatusBadge online={stats.status === 'online' && !isStale} />
                     {isEditing && (
                       <button
                         type="button"
                         onClick={() => setEditingServerId(server.id)}
-                        className="flex h-7 w-7 items-center justify-center rounded-sm text-text-muted hover:bg-surface-sunken hover:text-text-primary"
+                        className="flex h-5 w-5 items-center justify-center text-text-muted transition-colors hover:text-text-primary"
                         aria-label={`Edit ${server.name}`}
                         title="Edit server"
                       >
@@ -421,6 +414,22 @@ const TreeServer: React.FC<TreeServerProps> = ({
                   </div>
                 </div>
 
+                {/* Device label (the "drawer" header): icon + name + endpoint. */}
+                <div className="flex min-w-0 items-center gap-2.5">
+                  {renderDragHandle(server)}
+                  <div className="flex h-7 w-7 flex-shrink-0 items-center justify-center text-text-secondary">
+                    <SvgIcon svg={server.icon} fallback={DEFAULT_SERVER_ICON} className="h-[18px] w-[18px]" />
+                  </div>
+                  <div className="min-w-0">
+                    <div className="truncate text-[13px] font-medium leading-tight text-text-primary">
+                      {server.name}
+                    </div>
+                    <div className="mt-0.5 truncate font-mono text-[11px] leading-tight text-text-tertiary">
+                      {removeProtocol(server.url)}
+                    </div>
+                  </div>
+                </div>
+
                 {/* Primary load: three hairline-tracked gauges on a shared grid. */}
                 <div className="mt-3 grid grid-cols-3 gap-x-5">
                   <SpecMetric label="CPU" value={`${stats.cpu.toFixed(0)}%`} bar={stats.cpu} tone={usageTone(stats.cpu)} />
@@ -467,14 +476,7 @@ const TreeServer: React.FC<TreeServerProps> = ({
 
 function ServerStatusBadge({ online }: { online: boolean }) {
   return (
-    <div
-      className={`inline-flex items-center gap-1.5 font-mono text-[10px] uppercase tracking-[0.14em] ${
-        online ? 'text-accent-green-dark' : 'text-text-muted'
-      }`}
-    >
-      <span className={`h-1.5 w-1.5 rounded-full ${online ? 'bg-accent-green' : 'bg-ink-300'}`} />
-      {online ? 'online' : 'stale'}
-    </div>
+    <Stamp tone={online ? 'live' : 'idle'}>{online ? 'online' : 'stale'}</Stamp>
   );
 }
 

From 34a49cba662c201be1ba5ddb4f474bff43378ff4 Mon Sep 17 00:00:00 2001
From: Bolin Huang <ibh@live.com>
Date: Fri, 26 Jun 2026 00:28:56 -0700
Subject: [PATCH 10/18] =?UTF-8?q?feat(media/posts):=20apply=20archival=20m?=
 =?UTF-8?q?otif=20=E2=80=94=20MED=20index=20+=20Stamp,=20IDX=20tabs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Media: provider status line becomes a MED / <service> index with the live
  session count (or status) rendered as a Stamp instead of an ad-hoc dot label.
- Posts: stacked header gains an IDX tag and the active source tab carries a
  small filled stamp marker (the 'current divider'), keeping the sliding hover
  rail and underline. RegistrationMark stays reserved for box-framed current
  items (calendar today), per the sparse-usage rule.

lint, test:unit (13/13), build all pass.
---
 web/src/components/Tree/TreeModule.tsx | 46 +++++++++++++++++---------
 1 file changed, 31 insertions(+), 15 deletions(-)

diff --git a/web/src/components/Tree/TreeModule.tsx b/web/src/components/Tree/TreeModule.tsx
index a731c47..94689b8 100644
--- a/web/src/components/Tree/TreeModule.tsx
+++ b/web/src/components/Tree/TreeModule.tsx
@@ -59,6 +59,7 @@ import {
   RegistrationMark,
   Sparkline,
   SpecHeader,
+  Stamp,
 } from '@/components/Tree/specPrimitives';
 
 interface ModuleTree {
@@ -1221,14 +1222,19 @@ function MediaWidget({ module, state }: { module: ModuleBranch; state: ModuleDat
         <ModuleBodyState state={state} skeleton="media" />
       ) : (
         <>
-          <div className="flex items-baseline justify-between gap-3 border-b border-border-light pb-2.5">
-            <div className={`flex items-center gap-1.5 font-mono text-[10px] uppercase tracking-[0.14em] ${streamCount > 0 ? 'text-accent-green-dark' : 'text-text-tertiary'}`}>
-              <span className={`h-1.5 w-1.5 rounded-full ${streamCount > 0 ? 'bg-accent-green' : 'bg-ink-300'}`} />
-              {streamCount > 0 ? `${streamCount} playing` : data.status}
-            </div>
-            <div className="font-mono text-[10px] tabular-nums text-text-muted">
-              {data.detail || data.service}
+          {/* Provider index line: MED code + provenance on the left, live
+              session count or status stamped on the right. */}
+          <div className="flex items-center justify-between gap-3 border-b border-border-light pb-2">
+            <div className="flex min-w-0 items-center gap-2 font-mono text-[10px] uppercase tracking-[0.16em]">
+              <span className="text-text-secondary">MED</span>
+              <span aria-hidden className="text-text-muted">/</span>
+              <span className="truncate text-text-muted" title={data.detail || data.service}>
+                {data.service}
+              </span>
             </div>
+            <Stamp tone={streamCount > 0 ? 'live' : 'idle'}>
+              {streamCount > 0 ? `${streamCount} playing` : data.status}
+            </Stamp>
           </div>
 
           {overview && overview.insights.length > 0 && (
@@ -1850,12 +1856,17 @@ function PostsStackLive({
       module={selectedModule}
       state={state}
       header={(
-        <PostStackTabs
-          modules={modules}
-          selectedId={selectedModule.id}
-          onSelect={onSelect}
-          framed={false}
-        />
+        <div className="flex min-w-0 items-center justify-between gap-3">
+          <PostStackTabs
+            modules={modules}
+            selectedId={selectedModule.id}
+            onSelect={onSelect}
+            framed={false}
+          />
+          <span className="shrink-0 font-mono text-[9px] uppercase tracking-[0.16em] text-text-muted">
+            IDX
+          </span>
+        </div>
       )}
     >
       <PostsContent data={data} state={state} />
@@ -1909,8 +1920,13 @@ function PostStackTabs({
             }`}
             title={draggable ? 'Drag to reorder · click to select' : undefined}
           >
-            <span className="inline-block max-w-[9rem] truncate">
-              {postModuleTabLabel(source)}
+            <span className="inline-flex max-w-[10rem] items-center gap-1.5">
+              {/* Active tab carries a small filled stamp — the "current divider". */}
+              <span
+                aria-hidden
+                className={`h-1 w-1 shrink-0 transition-colors ${isSelected ? 'bg-text-primary' : 'bg-transparent'}`}
+              />
+              <span className="truncate">{postModuleTabLabel(source)}</span>
             </span>
             {/* Active tab: a solid ink underline that sits over the baseline
                 rule; idle tabs reveal a faint hairline on hover. */}

From 22e58682caf36c8de02a1b23d1f6057eeffb5963 Mon Sep 17 00:00:00 2001
From: Bolin Huang <ibh@live.com>
Date: Fri, 26 Jun 2026 12:43:07 -0700
Subject: [PATCH 11/18] feat(states): archival loading / empty / error
 treatments
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Loading: skeletons become a blank archive record filling in — faint ruled
  label ticks + empty value slots (hairline 'Slot's), a calm recordSweep opacity
  animation (reduced-motion aware) instead of a generic pulse. The media
  skeleton drops its bordered sub-boxes to match the borderless ledger.
- Empty: a blank catalog card — a 'NIL' stamp over a hairline + one terse line.
- Error: an inspection note — a 'NO READING' ✕ stamp over a faint rust rule with
  the message beneath, instead of a red SaaS alert.

Shared via ModuleBodyState/EmptyModuleState so every module inherits them.
---
 web/src/app/globals.css                |  19 +++
 web/src/components/Tree/TreeModule.tsx | 153 +++++++++++++++----------
 2 files changed, 111 insertions(+), 61 deletions(-)

diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index e898884..6d3f858 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -216,6 +216,25 @@ input:-webkit-autofill:active {
     animation: subtleFloat 6s ease-in-out infinite;
 }
 
+/* Loading: a blank archive record filling. A slow, low-contrast sweep across
+   the empty value slots — quieter and more "ink filling paper" than a pulse. */
+@keyframes recordSweep {
+    0% { opacity: 0.5; }
+    50% { opacity: 1; }
+    100% { opacity: 0.5; }
+}
+
+.animate-record-sweep {
+    animation: recordSweep 1.8s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .animate-record-sweep {
+        animation: none;
+        opacity: 0.7;
+    }
+}
+
 @keyframes dragClonePickUp {
     from {
         transform: scale(1);
diff --git a/web/src/components/Tree/TreeModule.tsx b/web/src/components/Tree/TreeModule.tsx
index 94689b8..fd9954a 100644
--- a/web/src/components/Tree/TreeModule.tsx
+++ b/web/src/components/Tree/TreeModule.tsx
@@ -2082,33 +2082,65 @@ function ModuleBodyState({
   skeleton?: ModuleSkeletonKind;
 }) {
   if (state.error) {
-    return (
-      <div className="min-h-16 text-[11px] leading-relaxed text-accent-red-dark">
-        {state.error}
-      </div>
-    );
+    return <InspectionNote>{state.error}</InspectionNote>;
   }
 
   return <ModuleSkeleton kind={skeleton} />;
 }
 
-const skeletonBar = 'rounded-sm bg-surface-sunken';
-const skeletonBarSoft = 'rounded-sm bg-border-light';
+// An error rendered as a stamped inspection note rather than a red alert: a mono
+// "NO READING" stamp over a hairline, with the terse message beneath.
+function InspectionNote({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-16">
+      <div className="flex items-center gap-1.5 border-b border-accent-red/25 pb-1.5 font-mono text-[9px] uppercase tracking-[0.16em] text-accent-red-dark">
+        <span aria-hidden>✕</span>
+        No reading
+      </div>
+      <div className="mt-2 font-mono text-[11px] leading-relaxed text-text-tertiary">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// An empty value slot in a loading record: a faint baseline that reads as a
+// ruled blank waiting to be filled (not a solid grey bar).
+function Slot({ className = '', style }: { className?: string; style?: React.CSSProperties }) {
+  return <span className={`inline-block h-px bg-border-medium align-middle ${className}`} style={style} />;
+}
+
+// One ledger row in a loading record: a faint label tick on the left, an empty
+// value slot on the right — the blank-form look.
+function SkeletonRow({ labelW = 'w-10', valueW = 'w-12' }: { labelW?: string; valueW?: string }) {
+  return (
+    <div className="flex items-baseline justify-between gap-3 py-1">
+      <Slot className={labelW} />
+      <Slot className={valueW} />
+    </div>
+  );
+}
 
-// Loading placeholders that echo each module's real content structure, so the
-// panel doesn't reshape when live data arrives.
+// Loading placeholders that echo each module's real spec-sheet structure, so the
+// panel doesn't reshape when live data arrives — a blank archive record filling
+// in, not a generic shimmer.
 function ModuleSkeleton({ kind }: { kind: ModuleSkeletonKind }) {
   if (kind === 'weather') {
     return (
-      <div className="animate-pulse" aria-hidden>
-        <div className={`h-8 w-20 ${skeletonBar}`} />
-        <div className={`mt-2 h-2.5 w-24 ${skeletonBarSoft}`} />
-        <div className={`mt-4 h-2 w-36 ${skeletonBarSoft}`} />
-        <div className="mt-4 grid grid-cols-3 gap-2 border-t border-border-light pt-3">
+      <div className="animate-record-sweep" aria-hidden>
+        <div className="flex items-start justify-between">
+          <span className="inline-block h-7 w-16 bg-surface-sunken" />
+          <div className="flex flex-col items-end gap-1.5 pt-1">
+            <Slot className="w-24" />
+            <Slot className="w-12" />
+          </div>
+        </div>
+        <div className="mt-4 space-y-px border-t border-border-light pt-2">
           {[0, 1, 2].map((index) => (
-            <div key={index}>
-              <div className={`h-2 w-8 ${skeletonBarSoft}`} />
-              <div className={`mt-1.5 h-2.5 w-12 ${skeletonBar}`} />
+            <div key={index} className="flex items-baseline gap-3 py-1.5">
+              <Slot className="w-8" />
+              <Slot className="flex-1" />
+              <Slot className="w-12" />
             </div>
           ))}
         </div>
@@ -2118,17 +2150,17 @@ function ModuleSkeleton({ kind }: { kind: ModuleSkeletonKind }) {
 
   if (kind === 'markets') {
     return (
-      <div className="-my-1 animate-pulse divide-y divide-border-light" aria-hidden>
+      <div className="-mt-1 animate-record-sweep divide-y divide-border-light/70" aria-hidden>
         {[0, 1, 2, 3].map((index) => (
-          <div key={index} className="grid grid-cols-[minmax(4.75rem,0.9fr)_minmax(4.25rem,1fr)_minmax(4.5rem,auto)] items-center gap-3 py-2.5">
-            <div>
-              <div className={`h-2.5 w-12 ${skeletonBar}`} />
-              <div className={`mt-1.5 h-2 w-16 ${skeletonBarSoft}`} />
+          <div key={index} className="grid grid-cols-[minmax(0,1fr)_56px_minmax(5rem,auto)] items-center gap-3 py-2.5">
+            <div className="space-y-1.5">
+              <Slot className="w-12" />
+              <Slot className="w-16" />
             </div>
-            <div className={`h-[26px] w-full ${skeletonBarSoft}`} />
-            <div className="justify-self-end">
-              <div className={`h-2.5 w-12 ${skeletonBar}`} />
-              <div className={`mt-1.5 h-2 w-14 ${skeletonBarSoft}`} />
+            <Slot className="w-full" />
+            <div className="justify-self-end space-y-1.5 text-right">
+              <Slot className="ml-auto w-12" />
+              <Slot className="ml-auto w-14" />
             </div>
           </div>
         ))}
@@ -2138,46 +2170,37 @@ function ModuleSkeleton({ kind }: { kind: ModuleSkeletonKind }) {
 
   if (kind === 'media') {
     return (
-      <div className="animate-pulse" aria-hidden>
-        <div className="mb-4 flex items-baseline justify-between border-b border-border-light pb-3">
-          <div className={`h-2 w-12 ${skeletonBar}`} />
-          <div className={`h-2 w-16 ${skeletonBarSoft}`} />
+      <div className="animate-record-sweep" aria-hidden>
+        <div className="flex items-center justify-between border-b border-border-light pb-2">
+          <Slot className="w-16" />
+          <Slot className="w-12" />
         </div>
-        <div className="mb-4 grid grid-cols-4 gap-1.5">
-          {[0, 1, 2, 3].map((index) => (
-            <div key={index} className="rounded-sm border border-border-light bg-surface-sunken/35 p-2">
-              <div className={`h-2 w-10 ${skeletonBarSoft}`} />
-              <div className={`mt-1.5 h-2.5 w-8 ${skeletonBar}`} />
-            </div>
-          ))}
+        <div className="mt-3 grid grid-cols-2 gap-x-6">
+          <div className="space-y-0">
+            <SkeletonRow />
+            <SkeletonRow />
+          </div>
+          <div className="space-y-0">
+            <SkeletonRow />
+            <SkeletonRow />
+          </div>
         </div>
-        <div className="mb-4 flex flex-wrap gap-1.5">
-          {[0, 1, 2, 3, 4].map((index) => (
-            <div key={index} className={`h-5 rounded-sm border border-border-light bg-surface-sunken/45 ${index % 2 === 0 ? 'w-20' : 'w-24'}`} />
+        <div className="mt-4 flex flex-wrap gap-1">
+          {[0, 1, 2, 3].map((index) => (
+            <span key={index} className={`h-4 bg-surface-sunken/60 ${index % 2 === 0 ? 'w-16' : 'w-20'}`} />
           ))}
         </div>
-        <div className="mt-5 border-t border-border-light pt-4">
-          <div className={`h-2 w-24 ${skeletonBarSoft}`} />
-          <div className="mt-3 grid grid-cols-4 gap-2.5">
-            {[0, 1, 2, 3].map((index) => (
-              <div key={index}>
-                <div className={`aspect-[2/3] ${skeletonBar}`} />
-                <div className={`mt-1.5 h-2 w-full ${skeletonBarSoft}`} />
-              </div>
-            ))}
-          </div>
-        </div>
       </div>
     );
   }
 
   if (kind === 'posts') {
     return (
-      <div className="animate-pulse space-y-3.5" aria-hidden>
+      <div className="-mx-2 animate-record-sweep space-y-3.5 px-2" aria-hidden>
         {[0, 1, 2, 3, 4].map((index) => (
-          <div key={index}>
-            <div className={`h-2.5 ${skeletonBar}`} style={{ width: `${82 - (index % 3) * 14}%` }} />
-            <div className={`mt-1.5 h-2 w-2/5 ${skeletonBarSoft}`} />
+          <div key={index} className="space-y-1.5">
+            <Slot style={{ width: `${82 - (index % 3) * 14}%` }} />
+            <Slot className="w-2/5" />
           </div>
         ))}
       </div>
@@ -2185,18 +2208,26 @@ function ModuleSkeleton({ kind }: { kind: ModuleSkeletonKind }) {
   }
 
   return (
-    <div className="min-h-16 animate-pulse space-y-2.5" aria-hidden>
-      <div className={`h-2.5 w-3/4 ${skeletonBar}`} />
-      <div className={`h-2.5 w-1/2 ${skeletonBarSoft}`} />
-      <div className={`h-2.5 w-2/3 ${skeletonBarSoft}`} />
+    <div className="min-h-16 animate-record-sweep space-y-2.5" aria-hidden>
+      <Slot className="w-3/4" />
+      <Slot className="w-1/2" />
+      <Slot className="w-2/3" />
     </div>
   );
 }
 
+// Empty = a blank catalog card: a faint dashed-ruled record area with a "NIL"
+// stamp and a one-line note. Quiet, not an illustration.
 function EmptyModuleState({ children }: { children: React.ReactNode }) {
   return (
-    <div className="min-h-16 text-[11px] leading-relaxed text-text-tertiary">
-      {children}
+    <div className="min-h-16">
+      <div className="flex items-center gap-1.5 border-b border-border-light pb-1.5 font-mono text-[9px] uppercase tracking-[0.16em] text-text-muted">
+        <span aria-hidden className="h-1 w-1 bg-ink-300" />
+        Nil
+      </div>
+      <div className="mt-2 text-[11px] leading-relaxed text-text-tertiary">
+        {children}
+      </div>
     </div>
   );
 }

From 256f8b6f3c12074139981a282a66a71d69c12d16 Mon Sep 17 00:00:00 2001
From: Bolin Huang <ibh@live.com>
Date: Fri, 26 Jun 2026 12:46:20 -0700
Subject: [PATCH 12/18] feat(hover): mechanical cursor/guide-rule affordances
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Markets rows: a left guide-rule grows in on hover like a ruler cursor, and the
  symbol nudges off it — instrument-selector feel instead of a flat bg tint.
- Calendar cells: RegistrationMark gains an opt-in hoverTickClass so a hovered
  day reveals faint corner ticks (the same 'cursor lands here' language as the
  today marker), kept to a literal class so the JIT generates it.

lint, build pass.
---
 web/src/components/Tree/TreeModule.tsx     | 17 ++++++++++++++---
 web/src/components/Tree/specPrimitives.tsx | 20 +++++++++++++++-----
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/web/src/components/Tree/TreeModule.tsx b/web/src/components/Tree/TreeModule.tsx
index fd9954a..5f73fb2 100644
--- a/web/src/components/Tree/TreeModule.tsx
+++ b/web/src/components/Tree/TreeModule.tsx
@@ -840,7 +840,12 @@ function CalendarWidget({ module }: { module: ModuleBranch }) {
                     aria-label={calendarCellTitle(cell.date)}
                     aria-current={cell.isToday ? 'date' : undefined}
                   >
-                    <RegistrationMark active={cell.isToday} size={5} className="h-6 w-6">
+                    <RegistrationMark
+                      active={cell.isToday}
+                      hoverTickClass="group-hover/day:border-text-muted"
+                      size={5}
+                      className="h-6 w-6"
+                    >
                       <span
                         className={`font-mono text-[11px] tabular-nums transition-colors ${
                           cell.isToday
@@ -1159,9 +1164,15 @@ function MarketsWidget({ module, state }: { module: ModuleBranch; state: ModuleD
             return (
               <div
                 key={quote.symbol}
-                className="grid grid-cols-[minmax(0,1fr)_56px_minmax(5rem,auto)] items-center gap-3 py-2.5"
+                className="group/inst relative grid grid-cols-[minmax(0,1fr)_56px_minmax(5rem,auto)] items-center gap-3 py-2.5"
               >
-                <div className="min-w-0">
+                {/* Mechanical hover: a left guide-rule slides in like a ruler
+                    cursor, and the symbol nudges off it. */}
+                <span
+                  aria-hidden
+                  className="pointer-events-none absolute -left-2 top-1/2 h-0 w-px -translate-y-1/2 bg-text-primary transition-all duration-200 group-hover/inst:h-[calc(100%-10px)]"
+                />
+                <div className="min-w-0 transition-transform duration-200 group-hover/inst:translate-x-1">
                   <div className="truncate font-mono text-xs font-medium uppercase leading-tight tracking-wide text-text-primary">
                     {quote.symbol}
                   </div>
diff --git a/web/src/components/Tree/specPrimitives.tsx b/web/src/components/Tree/specPrimitives.tsx
index a5bec67..b18f5b9 100644
--- a/web/src/components/Tree/specPrimitives.tsx
+++ b/web/src/components/Tree/specPrimitives.tsx
@@ -47,24 +47,34 @@ export function SpecCaption({
 export function RegistrationMark({
   children,
   active = true,
+  hoverTickClass = '',
   size = 6,
   className = '',
 }: {
   children: React.ReactNode;
   /** When false, ticks are hidden (children render bare) — for hover/idle. */
   active?: boolean;
+  /**
+   * Static Tailwind class(es) revealing faint ticks on a parent hover group when
+   * not already active, e.g. "group-hover/day:border-text-muted". Must be a
+   * literal so the JIT can see it — never build it dynamically.
+   */
+  hoverTickClass?: string;
   /** Tick arm length in px. */
   size?: number;
   className?: string;
 }) {
   const arm = `${size}px`;
-  const tick = active ? 'border-text-primary' : 'border-transparent';
+  // Active = solid ink ticks. Otherwise, optionally a faint tick on parent hover.
+  const tick = active
+    ? 'border-text-primary'
+    : `border-transparent ${hoverTickClass}`;
   return (
     <span className={`relative inline-flex items-center justify-center ${className}`}>
-      <span aria-hidden className={`pointer-events-none absolute left-0 top-0 border-l border-t ${tick}`} style={{ width: arm, height: arm }} />
-      <span aria-hidden className={`pointer-events-none absolute right-0 top-0 border-r border-t ${tick}`} style={{ width: arm, height: arm }} />
-      <span aria-hidden className={`pointer-events-none absolute bottom-0 left-0 border-b border-l ${tick}`} style={{ width: arm, height: arm }} />
-      <span aria-hidden className={`pointer-events-none absolute bottom-0 right-0 border-b border-r ${tick}`} style={{ width: arm, height: arm }} />
+      <span aria-hidden className={`pointer-events-none absolute left-0 top-0 border-l border-t transition-colors ${tick}`} style={{ width: arm, height: arm }} />
+      <span aria-hidden className={`pointer-events-none absolute right-0 top-0 border-r border-t transition-colors ${tick}`} style={{ width: arm, height: arm }} />
+      <span aria-hidden className={`pointer-events-none absolute bottom-0 left-0 border-b border-l transition-colors ${tick}`} style={{ width: arm, height: arm }} />
+      <span aria-hidden className={`pointer-events-none absolute bottom-0 right-0 border-b border-r transition-colors ${tick}`} style={{ width: arm, height: arm }} />
       {children}
     </span>
   );

From fb1745f69ed695df77c23cb998ff8c744518c264 Mon Sep 17 00:00:00 2001
From: Bolin Huang <ibh@live.com>
Date: Fri, 26 Jun 2026 12:47:47 -0700
Subject: [PATCH 13/18] docs(design): codify signature archival system; fix
 Weather location width

- Weather: let the station location take remaining width (temperature is shrink-0)
  so common city names like 'San Francisco, California' no longer truncate early.
- DESIGN_SPEC: add a 'Signature archival elements' section documenting the three
  memory-point devices (SpecHeader codes/provenance, RegistrationMark for
  current-only, Stamp status language), each module's archival form, the
  in-character loading/empty/error states, and the mechanical-hover rule.
---
 web/DESIGN_SPEC.md                     | 30 ++++++++++++++++++++++++++
 web/src/components/Tree/TreeModule.tsx |  6 +++---
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/web/DESIGN_SPEC.md b/web/DESIGN_SPEC.md
index 1f1805e..b60d68c 100644
--- a/web/DESIGN_SPEC.md
+++ b/web/DESIGN_SPEC.md
@@ -128,6 +128,36 @@ spec sheet, **not** as a stack of nested cards. The shared primitives in
   area fill. `tone` carries meaning (`up`/`down`/`accent`), default `ink` stays quiet. No chart libs.
 - Status reads as a bare mono label + dot (`online` moss, `stale` muted) — not a filled pill.
 
+### Signature archival elements (the memory points)
+
+OPAQUE should read as a *private archive instrument*, not a generic dashboard. Three signature
+devices (and only these — resist adding more) carry that identity. They come from object-ness —
+codes, registration marks, stamps — never from paper grain or scan textures (we add none).
+
+- **`SpecHeader`** — every data module opens with a filed-record index line: a fixed module code +
+  provenance on the left (`CAL / LOCAL`, `WTHR / LIVE`, `MKT / LIVE`, `MED / <PROVIDER>`, `SRV / LIVE`,
+  `IDX`), and an optional serial beside a `⌖` registration mark on the right (`2026·06`, `4 SYM`,
+  `°F`). Codes are stable semantic labels, not derived coordinates. This repeating line is *the*
+  memory point — keep it on every module.
+- **`RegistrationMark`** — four corner crop-ticks framing a value. The site's "current / active"
+  marker: calendar *today*, and (faintly, on hover via `hoverTickClass`) the cell the cursor is on.
+  Reserved for genuinely singular current items — never a general highlight. Solid ink when active.
+- **`Stamp`** — the one status language, drawn like an inspection stamp (mono uppercase + small dot),
+  never a filled pill: `online`/`stale`, media `N playing`, market `▲/▼` deltas, `syncing` (pulsing).
+
+Each module also takes a distinct-but-related *archival form*: Calendar = month **ledger** (a `WK`
+week-number gutter, registration today); Weather = station **bulletin** (measurement figure + unit
+tick + station metadata); Markets = ticker **instrument list** (oscilloscope traces, stamped deltas);
+Media = catalog **drawer** per provider; Server = telemetry **instrument**; Posts = **index** with
+folder-divider tabs.
+
+State pages stay in-character: **loading** is a blank record filling (hairline value `Slot`s + a calm
+`recordSweep`, never a generic pulse); **empty** is a blank catalog card (`NIL` stamp + one terse
+line); **error** is an inspection note (`NO READING ✕` over a faint rust rule), never a red alert.
+
+Interaction is mechanical, not web-app: hover slides a guide-rule / reveals registration ticks like a
+ruler cursor — not a flat background tint.
+
 ## Litmus tests
 
 Before shipping UI, ask:
diff --git a/web/src/components/Tree/TreeModule.tsx b/web/src/components/Tree/TreeModule.tsx
index 5f73fb2..dcf8446 100644
--- a/web/src/components/Tree/TreeModule.tsx
+++ b/web/src/components/Tree/TreeModule.tsx
@@ -1093,7 +1093,7 @@ function WeatherWidget({ module, state }: { module: ModuleBranch; state: ModuleD
           {/* Station reading: a large measurement figure with a unit tick, the
               condition as a caption, and station metadata aligned right. */}
           <div className="flex items-start justify-between gap-3">
-            <div className="min-w-0">
+            <div className="shrink-0">
               <div className="flex items-start gap-0.5 text-text-primary">
                 <span className="text-[2.5rem] font-light leading-none tracking-tight tabular-nums">
                   {Math.round(data.temperature)}
@@ -1104,8 +1104,8 @@ function WeatherWidget({ module, state }: { module: ModuleBranch; state: ModuleD
                 {data.condition}
               </div>
             </div>
-            <div className="shrink-0 text-right font-mono text-[10px] leading-relaxed">
-              <div className="max-w-[9rem] truncate text-text-secondary" title={data.location}>{data.location}</div>
+            <div className="min-w-0 flex-1 text-right font-mono text-[10px] leading-relaxed">
+              <div className="truncate text-text-secondary" title={data.location}>{data.location}</div>
               <div className="mt-1 tabular-nums text-text-muted">
                 <span className="text-text-tertiary">RH</span> {Math.round(data.humidity)}%
               </div>

From 63d0a851f55e9cfdc2f5f8187d1ac00a51f542d6 Mon Sep 17 00:00:00 2001
From: Bolin Huang <ibh@live.com>
Date: Sat, 27 Jun 2026 00:41:12 -0700
Subject: [PATCH 14/18] feat(edit): restrained drafting-mode affordances
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Edit mode now reads like laying work out on a drafting sheet, without changing
controls or drag behaviour:
- Each section header shows a small mono grid coordinate (A:1, B:2, …) beside its
  grip — a plate number on a technical sheet, derived from the live row/column.
- While a section is dragged, a very faint drafting grid fades in behind the
  layout (.drafting-surface, toggled by data-drafting). Off at rest; view mode
  untouched; WYSIWYG preserved.

lint, build pass.
---
 web/src/app/globals.css                      | 15 +++++++
 web/src/components/DashboardLayoutEditor.tsx | 42 ++++++++++++++------
 2 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index 6d3f858..a6d07ca 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -228,6 +228,21 @@ input:-webkit-autofill:active {
     animation: recordSweep 1.8s ease-in-out infinite;
 }
 
+/* Edit mode "drafting surface": while a section is being dragged, a very faint
+   drafting grid fades in behind the layout — like laying work out on a cutting
+   mat. Off at rest; never affects view mode. */
+.drafting-surface {
+    background-image: none;
+    background-size: 24px 24px;
+    transition: background-color 180ms ease;
+}
+
+.drafting-surface[data-drafting] {
+    background-image:
+        linear-gradient(to right, rgb(var(--border-light) / 0.5) 1px, transparent 1px),
+        linear-gradient(to bottom, rgb(var(--border-light) / 0.5) 1px, transparent 1px);
+}
+
 @media (prefers-reduced-motion: reduce) {
     .animate-record-sweep {
         animation: none;
diff --git a/web/src/components/DashboardLayoutEditor.tsx b/web/src/components/DashboardLayoutEditor.tsx
index a524d55..3af4222 100644
--- a/web/src/components/DashboardLayoutEditor.tsx
+++ b/web/src/components/DashboardLayoutEditor.tsx
@@ -477,12 +477,14 @@ export default function DashboardLayoutEditor({
     <div
       ref={containerRef}
       data-layout-editor
-      className="mx-6 flex flex-col gap-10 sm:mx-8 md:gap-12 lg:mx-12 xl:mx-16 xl:gap-14 2xl:mx-24"
+      data-drafting={isDragActive ? 'true' : undefined}
+      className="drafting-surface mx-6 flex flex-col gap-10 sm:mx-8 md:gap-12 lg:mx-12 xl:mx-16 xl:gap-14 2xl:mx-24"
     >
-      {rows.map((row) => (
+      {rows.map((row, rowIndex) => (
         <LayoutRow
           key={row.rowId}
           row={row}
+          rowIndex={rowIndex}
           isEditing={isEditing}
           renderSection={renderSection}
           draggingRoot={drag?.root ?? null}
@@ -536,6 +538,7 @@ function NewRowIndicator({ edge }: { edge: RowDropEdge }) {
 
 interface LayoutRowProps {
   row: DashboardLayoutRow;
+  rowIndex: number;
   isEditing: boolean;
   renderSection: (tree: Tree) => ReactNode;
   draggingRoot: string | null;
@@ -549,6 +552,7 @@ interface LayoutRowProps {
 
 function LayoutRow({
   row,
+  rowIndex,
   isEditing,
   renderSection,
   draggingRoot,
@@ -589,6 +593,7 @@ function LayoutRow({
                 tree={cell.tree}
                 isEditing={isEditing}
                 isPlaceholder={isPlaceholder}
+                coordinate={`${String.fromCharCode(65 + colIndex)}:${rowIndex + 1}`}
                 onGripPointerDown={onGripPointerDown}
               />
 
@@ -629,23 +634,34 @@ interface SectionHeaderProps {
   tree: Tree;
   isEditing: boolean;
   isPlaceholder: boolean;
+  /** Drafting coordinate (e.g. "A:2") shown by the grip in edit mode. */
+  coordinate?: string;
   onGripPointerDown: (event: ReactPointerEvent<HTMLElement>, root: string, label: string) => void;
 }
 
-function SectionHeader({ tree, isEditing, isPlaceholder, onGripPointerDown }: SectionHeaderProps) {
+function SectionHeader({ tree, isEditing, isPlaceholder, coordinate, onGripPointerDown }: SectionHeaderProps) {
   const label = getRootLabel(tree.root);
   return (
-    <div className={`mb-6 flex items-center gap-3 transition-opacity ${isPlaceholder ? 'opacity-30' : ''}`}>
+    <div className={`mb-6 flex items-center gap-2.5 transition-opacity ${isPlaceholder ? 'opacity-30' : ''}`}>
       {isEditing && (
-        <button
-          type="button"
-          onPointerDown={(event) => onGripPointerDown(event, tree.root, label)}
-          className="inline-flex h-5 w-5 cursor-grab touch-none items-center justify-center text-text-muted transition-colors hover:text-text-primary active:cursor-grabbing"
-          aria-label={`Drag ${label} section`}
-          title="Drag to rearrange"
-        >
-          <IconGripVertical className="h-3.5 w-3.5" />
-        </button>
+        <>
+          {/* Drafting coordinate — a small mono grid reference, like a plate
+              number on a technical sheet. */}
+          {coordinate && (
+            <span className="select-none font-mono text-[9px] tabular-nums tracking-wider text-text-muted/70">
+              {coordinate}
+            </span>
+          )}
+          <button
+            type="button"
+            onPointerDown={(event) => onGripPointerDown(event, tree.root, label)}
+            className="inline-flex h-5 w-5 cursor-grab touch-none items-center justify-center text-text-muted transition-colors hover:text-text-primary active:cursor-grabbing"
+            aria-label={`Drag ${label} section`}
+            title="Drag to rearrange"
+          >
+            <IconGripVertical className="h-3.5 w-3.5" />
+          </button>
+        </>
       )}
       <div className="font-serif text-base leading-none text-text-secondary">
         {label}

From 3ef8dc973ba4759b50e815aecbf454a367b1a54e Mon Sep 17 00:00:00 2001
From: Bolin Huang <ibh@live.com>
Date: Sun, 28 Jun 2026 23:21:37 -0700
Subject: [PATCH 15/18] feat(type): adopt Geist + Geist Mono for body and data
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the system sans/mono stacks with Geist (prose/UI) and Geist Mono (all
data) via next/font/google — the archival 'spec sheet' voice needs a consistent
technical typeface across platforms, not whatever the OS ships. Exposes
--font-sans / --font-mono and points tailwind font-body / font-mono at them;
serif titles (Sorts Mill Goudy) unchanged. No new dependency; build fetches the
faces. This is the foundation for the document-shell + mechanical-number passes.
---
 web/src/app/layout.tsx | 25 ++++++++++++++++++++++---
 web/tailwind.config.js |  4 ++--
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
index 473c216..e4a9cda 100644
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -1,11 +1,11 @@
 import type { Metadata } from "next";
-import { Sorts_Mill_Goudy } from "next/font/google";
+import { Geist, Geist_Mono, Sorts_Mill_Goudy } from "next/font/google";
 import CookieBanner from "@/components/CookieBanner";
 import ThemeWatcher from "@/components/ThemeWatcher";
 import { THEME_INIT_SCRIPT } from "@/lib/theme";
 import "./globals.css";
 
-// Serif display face for titles / section headings. Body text stays sans.
+// Serif display face for titles / section headings.
 const serif = Sorts_Mill_Goudy({
   subsets: ["latin"],
   weight: ["400"],
@@ -14,6 +14,21 @@ const serif = Sorts_Mill_Goudy({
   variable: "--font-serif",
 });
 
+// Technical grotesk for prose/UI, and its companion mono for all data — the
+// archival "spec sheet" voice. Replaces the system stacks so the dashboard has a
+// consistent typographic personality across platforms.
+const sans = Geist({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-sans",
+});
+
+const mono = Geist_Mono({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-mono",
+});
+
 export const metadata: Metadata = {
   title: "OPAQUE",
   description: "A quiet dashboard for bookmarks, applications, and servers",
@@ -29,7 +44,11 @@ export default function RootLayout({
   // React hydrates. This suppresses only the <html> element's own attribute
   // diff, not any child-subtree mismatch.
   return (
-    <html lang="en" className={serif.variable} suppressHydrationWarning>
+    <html
+      lang="en"
+      className={`${serif.variable} ${sans.variable} ${mono.variable}`}
+      suppressHydrationWarning
+    >
       <head>
         {/* Apply the saved theme before first paint so there is no flash. */}
         <script dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }} />
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 2d0a8e4..3c9f96e 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -50,8 +50,8 @@ module.exports = {
         },
       },
       fontFamily: {
-        body: ['ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', "Segoe UI", 'Roboto', "Helvetica Neue", 'Arial', "Noto Sans", 'sans-serif'],
-        mono: ['ui-monospace', 'SFMono-Regular', '"SF Mono"', 'Menlo', 'Consolas', '"Liberation Mono"', 'monospace'],
+        body: ['var(--font-sans)', 'ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', "Segoe UI", 'Roboto', "Helvetica Neue", 'Arial', "Noto Sans", 'sans-serif'],
+        mono: ['var(--font-mono)', 'ui-monospace', 'SFMono-Regular', '"SF Mono"', 'Menlo', 'Consolas', '"Liberation Mono"', 'monospace'],
         serif: ['var(--font-serif)', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
       },
       borderRadius: {

From 8f133925340934c91c3f1c9ae02448cf375ea0b2 Mon Sep 17 00:00:00 2001
From: Bolin Huang <ibh@live.com>
Date: Sun, 28 Jun 2026 23:25:52 -0700
Subject: [PATCH 16/18] feat(shell): wrap dashboard in an archival document
 frame
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The motif now reaches the page level so the dashboard reads as one filed sheet,
not floating modules:
- A masthead band above the greeting: OPAQUE wordmark + 'personal archive', and
  mono datestamp fields on the right (SHEET 01/01 · DATE <ISO> · TZ <offset>),
  on a hairline rule. Date/TZ computed client-side to avoid SSR locale mismatch.
- Faint registration / crop corners on the content frame (DocumentFrame) — the
  edges of a printed sheet.
- Footer becomes a colophon mirroring the masthead: DOC · SCALE 1:1 · PAGE 01/01
  · © OPAQUE, aligned to the same page margins.

Token-driven; dark-mode safe; header controls untouched.
---
 web/src/app/page.tsx          | 71 ++++++++++++++++++++++++++++++++++-
 web/src/components/Footer.tsx | 29 +++++++++++---
 2 files changed, 94 insertions(+), 6 deletions(-)

diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 49368e5..99c37a6 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -373,8 +373,10 @@ export default function HomePage() {
       <div className="relative flex-1 overflow-x-hidden bg-background">
         <div className="relative z-10">
           <div id="dashboard" className="relative flex min-h-full flex-col py-16">
+            <DocumentFrame />
             <div className="mx-6 animate-fade-in sm:mx-8 lg:mx-12 xl:mx-16 2xl:mx-24">
-              <p className="font-serif text-sm leading-none text-text-secondary">
+              <DocumentMasthead />
+              <p className="mt-5 font-serif text-sm leading-none text-text-secondary">
                 {timeGreeting()}{displayName ? `, ${displayName}` : ''}
                 <span className="text-text-muted"> — {todayLabel()}</span>
               </p>
@@ -581,6 +583,73 @@ function todayLabel() {
   }).format(new Date())
 }
 
+// ISO-8601 date (YYYY-MM-DD) for the masthead — a filed-record datestamp.
+function isoDateStamp(date = new Date()) {
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
+}
+
+function localTimeZoneCode() {
+  try {
+    // e.g. "GMT-7" — a terse station/zone marker, not a long name.
+    const parts = new Intl.DateTimeFormat(undefined, { timeZoneName: 'shortOffset' }).formatToParts(new Date())
+    return parts.find((part) => part.type === 'timeZoneName')?.value?.replace(/\s/g, '') || 'LOCAL'
+  } catch {
+    return 'LOCAL'
+  }
+}
+
+// The filed-document masthead: a wordmark + provenance on the left and mono
+// datestamp / zone fields on the right, on one hairline rule. Makes the whole
+// dashboard read as a single archived sheet rather than floating modules.
+function DocumentMasthead() {
+  const [stamp, setStamp] = useState({ date: '', tz: '' })
+  // Compute client-side only — avoids an SSR/client locale + tz mismatch.
+  useEffect(() => {
+    setStamp({ date: isoDateStamp(), tz: localTimeZoneCode() })
+  }, [])
+
+  return (
+    <div className="flex items-end justify-between gap-4 border-b border-border-medium pb-2">
+      <div className="flex items-baseline gap-3">
+        <span className="font-mono text-[11px] font-medium uppercase tracking-[0.3em] text-text-primary">
+          OPAQUE
+        </span>
+        <span className="font-mono text-[9px] uppercase tracking-[0.16em] text-text-muted">
+          Personal archive
+        </span>
+      </div>
+      <div className="flex items-center gap-4 font-mono text-[9px] uppercase tracking-[0.14em] text-text-muted tabular-nums">
+        <MastheadField label="Sheet" value="01 / 01" />
+        <MastheadField label="Date" value={stamp.date || '—'} />
+        <MastheadField label="TZ" value={stamp.tz || '—'} />
+      </div>
+    </div>
+  )
+}
+
+function MastheadField({ label, value }: { label: string; value: string }) {
+  return (
+    <span className="flex items-center gap-1.5">
+      <span className="text-text-muted/70">{label}</span>
+      <span className="text-text-secondary">{value}</span>
+    </span>
+  )
+}
+
+// Faint registration / crop corners on the content frame — the page edges of a
+// printed sheet. Decorative but cheap and consistent with the archival motif.
+function DocumentFrame() {
+  const corner = 'pointer-events-none absolute h-3 w-3 border-border-medium'
+  return (
+    <div aria-hidden className="pointer-events-none absolute inset-x-3 inset-y-6 sm:inset-x-5 lg:inset-x-9 xl:inset-x-[3.25rem] 2xl:inset-x-20">
+      <span className={`${corner} left-0 top-0 border-l border-t`} />
+      <span className={`${corner} right-0 top-0 border-r border-t`} />
+      <span className={`${corner} bottom-0 left-0 border-b border-l`} />
+      <span className={`${corner} bottom-0 right-0 border-b border-r`} />
+    </div>
+  )
+}
+
 function newId() {
   if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
     return crypto.randomUUID()
diff --git a/web/src/components/Footer.tsx b/web/src/components/Footer.tsx
index 0dca25b..793bcb2 100644
--- a/web/src/components/Footer.tsx
+++ b/web/src/components/Footer.tsx
@@ -1,9 +1,28 @@
+// Document footer: a filed-sheet colophon — provenance + scale/ratio on the
+// left, page number and © on the right, on one hairline rule. Mirrors the
+// masthead so the dashboard reads as a bounded archived sheet.
 export default function Footer() {
     return (
-        <footer className="flex flex-col items-end justify-end bg-surface-elevated px-6 py-3 border-t border-border-light">
-            <p className="cursor-default text-xs text-text-tertiary tracking-wide">
-                © OPAQUE
-            </p>
+        <footer className="border-t border-border-light bg-surface-elevated">
+            <div className="mx-6 flex items-center justify-between gap-4 py-3 font-mono text-[9px] uppercase tracking-[0.14em] text-text-muted tabular-nums sm:mx-8 lg:mx-12 xl:mx-16 2xl:mx-24">
+                <div className="flex items-center gap-4">
+                    <span className="flex items-center gap-1.5">
+                        <span className="text-text-muted/70">Doc</span>
+                        <span className="text-text-secondary">OPAQUE·DASH</span>
+                    </span>
+                    <span className="hidden items-center gap-1.5 sm:flex">
+                        <span className="text-text-muted/70">Scale</span>
+                        <span className="text-text-secondary">1:1</span>
+                    </span>
+                </div>
+                <div className="flex items-center gap-4">
+                    <span className="flex items-center gap-1.5">
+                        <span className="text-text-muted/70">Page</span>
+                        <span className="text-text-secondary">01 / 01</span>
+                    </span>
+                    <span className="text-text-tertiary">© OPAQUE</span>
+                </div>
+            </div>
         </footer>
     )
-} 
\ No newline at end of file
+}

From 4fdee0e9f0cc89d8186d70ee99aa81167ce0b4fd Mon Sep 17 00:00:00 2001
From: Bolin Huang <ibh@live.com>
Date: Sun, 28 Jun 2026 23:29:56 -0700
Subject: [PATCH 17/18] feat(motion): mechanical odometer readouts on live
 values
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a RollingNumber primitive — each digit is a 0-9 reel that rolls to the new
value when it changes, like a mechanical counter / instrument. Non-digit glyphs
stay fixed; animates only after the first change (no roll-from-zero on load);
honors prefers-reduced-motion. Wired into the values that actually update on
poll: markets price + delta, the weather temperature, and the server CPU/Mem/Disk
gauges (via SpecMetric). Tabular + monospaced so columns never shift.

tsc, lint, build pass; verified baseline alignment in browser.
---
 web/src/components/Tree/TreeModule.tsx     | 21 ++++--
 web/src/components/Tree/specPrimitives.tsx | 78 ++++++++++++++++++++--
 2 files changed, 88 insertions(+), 11 deletions(-)

diff --git a/web/src/components/Tree/TreeModule.tsx b/web/src/components/Tree/TreeModule.tsx
index dcf8446..cc64134 100644
--- a/web/src/components/Tree/TreeModule.tsx
+++ b/web/src/components/Tree/TreeModule.tsx
@@ -57,6 +57,7 @@ import {
   MetaChip,
   MetaChipGroup,
   RegistrationMark,
+  RollingNumber,
   Sparkline,
   SpecHeader,
   Stamp,
@@ -1095,9 +1096,11 @@ function WeatherWidget({ module, state }: { module: ModuleBranch; state: ModuleD
           <div className="flex items-start justify-between gap-3">
             <div className="shrink-0">
               <div className="flex items-start gap-0.5 text-text-primary">
-                <span className="text-[2.5rem] font-light leading-none tracking-tight tabular-nums">
-                  {Math.round(data.temperature)}
-                </span>
+                <RollingNumber
+                  value={String(Math.round(data.temperature))}
+                  className="text-[2.5rem] font-light leading-none tracking-tight"
+                  ariaLabel={`${Math.round(data.temperature)} degrees ${unit}`}
+                />
                 <span className="mt-1 font-mono text-sm text-text-tertiary">°{unit}</span>
               </div>
               <div className="mt-2 truncate text-xs text-text-secondary" title={data.condition}>
@@ -1189,12 +1192,16 @@ function MarketsWidget({ module, state }: { module: ModuleBranch; state: ModuleD
                 />
                 <div className="min-w-0 text-right font-mono">
                   {/* Delta as a stamped figure: a tick glyph + signed percent. */}
-                  <div className={`flex items-center justify-end gap-1 text-xs font-medium leading-tight tabular-nums ${up ? 'text-accent-green-dark' : 'text-accent-red-dark'}`}>
+                  <div className={`flex items-center justify-end gap-1 text-xs font-medium leading-tight ${up ? 'text-accent-green-dark' : 'text-accent-red-dark'}`}>
                     <span aria-hidden className="text-[9px]">{up ? '▲' : '▼'}</span>
-                    {change}
+                    <RollingNumber value={change} ariaLabel={`${quote.symbol} change ${change}`} />
                   </div>
-                  <div className="mt-1 truncate text-[11px] leading-tight tabular-nums text-text-secondary">
-                    {formatMarketPrice(quote.price, quote.currency)}
+                  <div className="mt-1 flex justify-end">
+                    <RollingNumber
+                      value={formatMarketPrice(quote.price, quote.currency)}
+                      className="text-[11px] leading-tight text-text-secondary"
+                      ariaLabel={`${quote.symbol} price ${formatMarketPrice(quote.price, quote.currency)}`}
+                    />
                   </div>
                 </div>
               </div>
diff --git a/web/src/components/Tree/specPrimitives.tsx b/web/src/components/Tree/specPrimitives.tsx
index b18f5b9..ec0e80d 100644
--- a/web/src/components/Tree/specPrimitives.tsx
+++ b/web/src/components/Tree/specPrimitives.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 // ---------------------------------------------------------------------------
 // Archival Technical Minimalism — shared visual primitives.
@@ -246,9 +246,10 @@ export function SpecMetric({
         <span className="truncate font-mono text-[9px] uppercase tracking-wider text-text-muted">
           {label}
         </span>
-        <span className="shrink-0 font-mono text-[11px] tabular-nums font-medium text-text-primary">
-          {value}
-        </span>
+        <RollingNumber
+          value={value}
+          className="shrink-0 font-mono text-[11px] font-medium text-text-primary"
+        />
       </div>
       {bar != null && (
         <div className="mt-1.5 h-px w-full bg-border-light">
@@ -402,3 +403,72 @@ function sparklineCoords(values: number[], width: number, height: number): Spark
 function round(value: number) {
   return Math.round(value * 10) / 10;
 }
+
+// ---------------------------------------------------------------------------
+// Mechanical readout — an odometer/flip number for live values.
+//
+// Renders a pre-formatted numeric string where each *digit* is a vertical reel
+// of 0–9 that rolls to the current digit when the value changes, like a
+// mechanical counter or instrument. Non-digit glyphs (., ,, $, %, -, space)
+// stay fixed. Animates only on change; honors prefers-reduced-motion. Keep the
+// string monospaced + tabular at the call site so columns don't shift.
+// ---------------------------------------------------------------------------
+
+const DIGITS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+
+export function RollingNumber({
+  value,
+  className = '',
+  ariaLabel,
+}: {
+  /** Already-formatted display string, e.g. "$728.96", "58", "-2.88%". */
+  value: string;
+  className?: string;
+  ariaLabel?: string;
+}) {
+  const [animate, setAnimate] = useState(false);
+  const prev = useRef(value);
+
+  useEffect(() => {
+    if (prev.current !== value) {
+      setAnimate(true);
+      prev.current = value;
+    }
+  }, [value]);
+
+  return (
+    <span
+      className={`inline-flex items-center tabular-nums ${className}`}
+      aria-label={ariaLabel ?? value}
+      role={ariaLabel ? undefined : 'text'}
+    >
+      {value.split('').map((char, index) =>
+        DIGITS.includes(char) ? (
+          <Reel key={index} digit={Number(char)} animate={animate} />
+        ) : (
+          <span key={index} aria-hidden className="inline-block">
+            {char === ' ' ? ' ' : char}
+          </span>
+        ),
+      )}
+    </span>
+  );
+}
+
+// A single digit reel: a 10-row column translated so the active digit sits in
+// view. The transition runs only after the first change (animate=true), so the
+// initial paint doesn't roll from 0.
+function Reel({ digit, animate }: { digit: number; animate: boolean }) {
+  return (
+    <span aria-hidden className="relative inline-block h-[1em] overflow-hidden align-bottom" style={{ width: '0.62em' }}>
+      <span
+        className={`flex flex-col ${animate ? 'motion-safe:transition-transform motion-safe:duration-500 motion-safe:ease-[cubic-bezier(0.2,0.8,0.2,1)]' : ''}`}
+        style={{ transform: `translateY(-${digit}em)` }}
+      >
+        {DIGITS.map((d) => (
+          <span key={d} className="h-[1em] leading-[1em]">{d}</span>
+        ))}
+      </span>
+    </span>
+  );
+}

From 2926ef723cbd4aa28f2bf486050a5ee7e228f117 Mon Sep 17 00:00:00 2001
From: Bolin Huang <ibh@live.com>
Date: Sun, 28 Jun 2026 23:32:03 -0700
Subject: [PATCH 18/18] docs(design): document the page shell, Geist type, and
 mechanical readouts

Record the bold-pass conventions in DESIGN_SPEC: Geist / Geist Mono as the
body/data voice, the document shell (masthead + registration frame + footer
colophon = 'the page is a filed sheet'), and RollingNumber mechanical readouts
for live values (the one place motion is expressive, with the usage limits).
---
 web/DESIGN_SPEC.md | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/web/DESIGN_SPEC.md b/web/DESIGN_SPEC.md
index b60d68c..a0d1bbf 100644
--- a/web/DESIGN_SPEC.md
+++ b/web/DESIGN_SPEC.md
@@ -25,8 +25,10 @@ These are enforceable review criteria, not vibes.
 
 - `font-serif` (Sorts Mill Goudy, 400) — **titles only**: welcome line, section titles, panel/module
   titles, group headers. Never for body, buttons, labels, or data.
-- `font-body` (system sans) — everything that is prose or UI copy.
-- `font-mono` — all data: numbers, timestamps, urls, types, meta lines, status words.
+- `font-body` (Geist) — everything that is prose or UI copy. A technical grotesk, not the system
+  sans — the dashboard must read with a consistent typographic voice across platforms.
+- `font-mono` (Geist Mono) — all data: numbers, timestamps, urls, types, meta lines, status words.
+  This is the workhorse of the archival motif; nearly every SpecHeader / ledger / stamp uses it.
 - Numerals never jitter: `font-variant-numeric: tabular-nums` is set globally on `body`.
 - Labels above data use `text-[10px] uppercase tracking-wider text-text-tertiary`.
 
@@ -158,6 +160,22 @@ line); **error** is an inspection note (`NO READING ✕` over a faint rust rule)
 Interaction is mechanical, not web-app: hover slides a guide-rule / reveals registration ticks like a
 ruler cursor — not a flat background tint.
 
+**The page is a filed sheet.** The dashboard is wrapped in a document shell so the whole thing reads
+as one archived record, not floating modules:
+- A **masthead** above the greeting — `OPAQUE` wordmark + `personal archive` on the left, mono
+  datestamp fields on the right (`SHEET 01/01 · DATE <ISO> · TZ <offset>`), on a hairline rule.
+  Date/TZ are computed client-side (avoid SSR locale mismatch).
+- Faint **registration / crop corners** on the content frame (`DocumentFrame`) — the page edges.
+- A **footer colophon** mirroring the masthead: `DOC · SCALE 1:1 · PAGE 01/01 · © OPAQUE`, on the
+  same page margins.
+
+**Live numbers are mechanical readouts.** Values that change on poll use `RollingNumber` — each digit
+is a 0–9 reel that rolls to the new value like a counter/instrument (markets price + delta, weather
+temperature, server CPU/mem/disk). Animate only after the first change (no roll-from-zero on load),
+honor `prefers-reduced-motion`, keep the string monospaced + tabular so columns never shift. This is
+the one place motion is *expressive* rather than purely functional — use it only for genuinely live
+figures, never for static labels.
+
 ## Litmus tests
 
 Before shipping UI, ask: