dsh-claude-style 0.19.4-dev.49 → 0.19.5-dev.50

package/docs/STYLE.md

@@ -2,6 +2,18 @@
 
 Design tokens for `dsh-claude-style`, recreating the Claude Code Desktop aesthetic.
 
+## Where the values live
+
+This page states the rule each look follows and the reason behind it. A value
+lives where it is used: colours, durations, easings and layers in
+`packages/client/src/theme/tokens.json`, a component's lengths in the stylesheet
+beside its feature, the mascots' frames in
+`packages/client/src/features/mascot/sheets.ts`, the page-scale arithmetic in
+`packages/client/src/shared/page-zoom.ts` and `page-scale.ts`. A rule that turns
+on one value quotes its token name; everything else is read from the file the
+rule names (D48). The three tables marked generated are written from
+`tokens.json` by `npm run build`; edit the JSON, not the tables.
+
 ## Palette
 
 Every look is a **colour card**: an accent, a canvas, a sidebar and the reader's
@@ -10,47 +22,50 @@ their own, a link per scheme. The first card is the default look. A card's dark
 outlines are drawn either as a lit highlight or as a flat surface step, and its
 brand art takes its colour from the ink or the accent (D30).
 
-The colour every token paints is a **tone** of one of those seeds: a lightness
-step from the seed, an absolute chroma or a multiple of the seed's, an optional
-hue shift and, on translucent surfaces, an alpha. The build resolves the tones
-into plain colours, so the page ships literals and nothing derives at runtime.
-The ladder is shared by every card; a card states only its seeds, its sidebar,
-its bubble and its traits.
+The colour every token paints is a **tone** of one of those seeds; the build
+resolves the tones into plain colours, so the page ships literals and nothing
+derives at runtime. The ladder is shared by every card; a card states only its
+seeds, its sidebar, its bubble and its traits.
 
-The reader authors a card of their own: four colours, shown and edited in
-the settings page beside the two brands. Every card can be picked; a brand card
+The reader authors a card of their own: four colours, shown and edited in the
+settings page beside the two brands. Every card can be picked; a brand card
 paints its own colours whatever the brand mark is, and a picked card offers
 「恢复跟随品牌」 to hand the colours back to the theme style's brand. The
-reader's palette is the same ladder written as relative colours
-(`oklch(from var(--dsh-claude-custom-accent) …)`), one block per brand and
-scheme, so the colours resolve in the page while the brand cards keep their
-literals; the image-colour choice (`Default`, `Accent`, `Text colour`) repaints
-the brand art from the same table (D30).
+reader's palette is the same ladder written as relative colours, one block per
+brand and scheme, so the colours resolve in the page while the brand cards keep
+their literals; the image-colour choice (`Default`, `Accent`, `Text colour`)
+repaints the brand art from the same table (D30).
 
 Rules:
 
-- Never pure black. The Claude card's light canvas is the desktop's `#FFFFFF`
-  with a `#FAFAFA` sidebar; its dark canvas is `#191919` with a `#1F1F1F`
-  sidebar. The DeepSeek card's light canvas is `#FBFCFF` with a `#F7F9FF`
-  sidebar; every surface, border and ink step around them is derived from that
-  canvas.
-  The reader's own message plate is the card's `bubble` fill: Claude's neutral
-  plate, DeepSeek's light blue `#ECF0FF`; the custom card derives it from its
-  own canvas, so a conversation bubble reads as the card that painted it.
+- Never pure black, never a cold gray. Each canvas pair — the Claude card's and
+  the DeepSeek card's — is read as one family: the canvas, its sidebar, its
+  borders and every ink step around them derive from that card's seed. The
+  reader's own message plate is the card's `bubble` fill, so a conversation
+  bubble reads as the card that painted it.
 - Accent usage stays under ~10% of visible elements.
 - Literal colours stay outside the ladder: the selection ring, the ripple's
   front, the peak and off-peak badges and the popover shadow.
 
 **The DeepSeek card** turns both schemes blue. Its accent is DeepSeek's brand
-blue `#4D6BFE` — the colour of its whale logo and of Deepy; the sidebar's whale
-and wordmark and the hero's fish take it as their ink. Its light canvas is
-`#FBFCFF` with a `#F7F9FF` sidebar and a light blue reader's bubble, its dark
-canvas a blue-black, and its dark outlines are surface steps rather than
-highlights. The
-skin's Claude marks (the account row's picture without an avatar) become
-DeepSeek's
-whale (`packages/assets/src/brand/deepseek-mark.svg`, the host's `FISH_LOGO_PATH`); the
-reasoning slider's accent follows whichever palette is in force.
+blue, the colour of its whale logo and of Deepy; the sidebar's whale and
+wordmark and the hero's fish take it as their ink. Its light canvas is a faint
+blue-white with a light blue reader's bubble, its dark canvas a blue-black, and
+its dark outlines are surface steps rather than highlights. The skin's Claude
+marks (the account row's picture without an avatar) become DeepSeek's whale
+(`packages/assets/src/brand/deepseek-mark.svg`, the host's `FISH_LOGO_PATH`);
+the reasoning slider's accent follows whichever palette is in force.
+
+**Host token bindings.** The skin supplies its palette through the host's own
+alias tokens, so a host control that reads more than one token for one surface
+has to be given all of them. A filled primary button is that case: the host takes
+the fill from `--dsw-alias-brand-primary`, but the hover from a monochrome step
+of its own scale and the label from a foreground token the skin leaves alone.
+`--dsw-alias-button-primary-fill` and `--dsw-alias-button-primary-hover`
+therefore state both steps in each card. Two fills are palette-specific rather
+than carried over from the dark base: a solid chip, lighter than the canvas in
+light, and an elevated fill, a surface above the canvas in light and a raised
+gray in dark.
 
 The tables below are generated from `packages/client/src/theme/tokens.json` by `npm run build`;
 edit the JSON, not the tables. A token's row names the tone it reads and the
@@ -174,26 +189,12 @@ card leaves unset.
 | `--dsh-claude-meter-valley` | literal | `#3d7550` | `#8cbf96` | `#3d7550` | `#8cbf96` | `var(--dsw-alias-state-success-primary)` | the off-peak rate badge, and the dated promotions priced below it |
 <!-- /generated:tokens -->
 
-**Host token bindings.** The skin supplies its palette through the host's own
-alias tokens, so a host control that reads more than one token for one surface
-has to be given all of them. A filled primary button is that case: the host takes
-the fill from `--dsw-alias-brand-primary`, but the hover from a monochrome step
-of its own scale (light `#43454a`, dark `#ebeef2`) and the label from a
-foreground token the skin leaves alone. `--dsw-alias-button-primary-fill` and
-`--dsw-alias-button-primary-hover` therefore state both steps in each card.
-Two fills are palette-specific rather than carried over from the dark base:
-`--dsw-alias-interactive-bg-hover-solid` (a solid chip, lighter than the canvas
-in light) and `--dsw-alias-button-elevated-fill` (a surface above the canvas in
-light, a raised gray in dark).
-
 ## Two palettes · 两套配色归属
 
 The Colours and Typefaces rows each choose who paints: **Claude** (the default)
 or **Follow the host**. Every rule that writes a host token carries the Claude
-gate in its selector — `[data-dsh-claude-palette="claude"]` for colours,
-`[data-dsh-claude-typeface="claude"]` for `--dsw-font-*` — and so does every
-rule that paints the skin's canvas onto the host's frame (`<html>`, `<body>`,
-`#root`, the sidebar and conversation
+gate in its selector, and so does every rule that paints the skin's canvas onto
+the host's frame (`<html>`, `<body>`, `#root`, the sidebar and conversation
 columns); the build refuses an ungated one. Under "follow the host" those rules
 drop out: the host's own tokens stand, or another theme plugin's, such as a
 wallpaper plugin that clears the canvas and turns the overlays to glass.
@@ -202,91 +203,82 @@ The skin's own surfaces read only its private tokens and host tokens. Under the
 host palette each private token is an alias of a host token (the token table's
 Host alias column), so those surfaces follow whoever paints the host's. A new
 private colour token gets its tone and its host alias in
-`packages/client/src/theme/tokens.json`; the build refuses a private token without an alias.
-Cards take the host's overlay layer rather than its canvas: a plugin that
-clears the canvas still gives its overlays a readable fill, and the shared
-popover card blurs what lies behind it (`blur(16px) saturate(1.4)`).
+`packages/client/src/theme/tokens.json`; the build refuses a private token
+without an alias.
+
+Cards take the host's overlay layer rather than its canvas: a plugin that clears
+the canvas still gives its overlays a readable fill, and the shared popover card
+blurs what lies behind it so its rows stay readable over a picture.
 
 Under the host typeface the skin's own faces fall back to the host's:
-`--dsh-claude-font-serif`, `-prose` and `-brand` to `--dsw-font-family` (the host
-carries no serif), `--dsh-claude-font-code` to `--ds-font-family-code`.
+`--dsh-claude-font-serif`, `-prose` and `-brand` to `--dsw-font-family` (the
+host carries no serif), `--dsh-claude-font-code` to `--ds-font-family-code`.
 
-The account-hold page keeps its own colours, reproducing a Claude screen.
-The reasoning slider and its trigger take the theme accent: the dot matrix and
-knob glow read `--dsh-claude-apex*`, and the level ramp reads
+The account-hold page keeps its own colours, reproducing a Claude screen. The
+reasoning slider and its trigger take the theme accent: the dot matrix and knob
+glow read `--dsh-claude-apex*`, and the level ramp reads
 `--dsh-claude-effort-*`. Translucent neutral hover tints and the usage panel's
 data colours stay literal; they read on any canvas. Every other colour that
 paints a surface, a text, a border or an accent reads a token.
 
 **The effort trigger's tone.** While the Composer tab's effort-accent row is on,
-the effort level's text in the composer's seat box and the card's level name
-take their colour from the rung in force. The caption and the scale ends keep
-their own caption inks. Every thinking rung has
-a place on one ramp between two ends mixed from the theme accent in OKLCH:
-`--dsh-claude-effort-low` toward the raised surface (less saturated, lower
-contrast) and `--dsh-claude-effort-high` toward the label ink (more contrast). The rung's
-place is its index over the ladder's span, so a four-stop ladder reads weak,
-two steps between, then strong. The hue starts at the theme accent and travels
-slightly toward red as the rung climbs: an accent above 180° leans toward 359°,
-one below 180° toward 0°, by a quarter of the distance at the top, while HSL
-keeps the saturation and lightness of the ramp step.
-The switch-off level and the model's own default level have no strength the catalog
-names, so both keep the resting ink (`--dsw-alias-label-secondary`). The row off
-leaves the resting ink on every rung.
+the effort level's text in the composer's seat box and the card's level name take
+their colour from the rung in force; the caption and the scale ends keep their
+own caption inks. Every thinking rung has one place on a single ramp between two
+ends mixed from the theme accent: the low end toward the raised surface (less
+saturated, lower contrast), the high end toward the label ink (more contrast),
+and the rung's index over the ladder's span places it. The hue starts at the
+theme accent and travels slightly toward red as the rung climbs. The switch-off
+level and the model's own default level have no strength the catalog names, so
+both keep the resting ink (`--dsw-alias-label-secondary`). The row off leaves the
+resting ink on every rung.
 
 **The composer's seat.** The model's name and the effort level share one box in
 the row, the way the host's own seat carries both texts: the box is the row's one
 item, it stands against the row's right end and grows leftward, and both of its
-cards hang from that right end. The box paints the hover plate — the two texts are
-two hit areas of one control, not two chips side by side — and the text under the
-pointer takes the stronger ink, except a level wearing the accent ramp, which keeps
-its rung and lets the plate answer the pointer. Each text is as wide as the words
-it shows, so a level's name changing width moves the box's left end and nothing
-else.
+cards hang from that right end. The box paints the hover plate — the two texts
+are two hit areas of one control, not two chips side by side — and the text under
+the pointer takes the stronger ink, except a level wearing the accent ramp, which
+keeps its rung and lets the plate answer the pointer. Each text is as wide as the
+words it shows, so a level's name changing width moves the box's left end and
+nothing else.
 
 ## Windows titlebar · 桌面顶栏
 
-On the Windows desktop the 40px caption row has no colour of its own: the
-sidebar and the conversation run to the window's top edge, each in its own
-fill (`--dsh-claude-sidebar-canvas`, `--dsh-claude-canvas`), and the sidebar's
-0.5px `--dsw-alias-border-l1` hairline runs with them from the top edge to the
-bottom. The conversation column and the fullscreen file panel lose the host's
-16px top-left corner, so the hairline meets them straight. The three window
-buttons sit on the page itself: no block of their own behind them, and they dim
-with a modal's mask like everything else. Their hover plate is the system's, a
-tint of the button glyph's colour.
+On the Windows desktop the caption row has no colour of its own: the sidebar and
+the conversation run to the window's top edge, each in its own fill, and the
+sidebar's hairline runs with them from the top edge to the bottom. The
+conversation column and the fullscreen file panel lose the host's top-left
+corner, so the hairline meets them straight. The three window buttons sit on the
+page itself: no block of their own behind them, and they dim with a modal's mask
+like everything else. Their hover plate is the system's, a tint of the button
+glyph's colour.
 
 ## Right sidebar · 右侧栏
 
-A panel docked in the right column is a card: 8px inside the column on every
-side, a 16px radius, the skin's 1px `--dsw-alias-border-l1` hairline and the
-host's own panel elevation (`--dsw-elevation-prominent` — a `.5px` stroke, a
-3px/8px drop and a 20px halo). The frame's canvas shows through the gap, and
-the host's `.5px` left border on the first dock column gives way to the
-hairline.
-
-The card hangs on what paints the column: a docked tab's pane
-(`[data-dockkit-host="dock"] > [data-dockkit-pane]`) or the column's own empty
-host (`[data-dockkit-empty]`), which the pane inside it leaves transparent. A
-panel pulled out of the sidebar becomes the host's own floating window
-(`[data-dockkit-host="float"]`) and keeps that window's frame; a split column
-gives each pane its own card, with the drag divider left on the seam between
-them.
-
-**Right sidebar card layout** (the Sidebar tab) chooses it: on is the card
-above; off drops every rule that draws one, so the pane stands in the host's
-own fill, flush with the column on all four sides, and a split's two panes meet
-at the dock's own resting line. Every card rule is gated on
+A panel docked in the right column is a card: inset from the column on every
+side, its radius from the shape scale, the skin's hairline and the host's own
+panel elevation. The frame's canvas shows through the gap, and the host's left
+border on the first dock column gives way to the hairline.
+
+The card hangs on what paints the column: a docked tab's pane or the column's own
+empty host, which the pane inside it leaves transparent. A panel pulled out of
+the sidebar becomes the host's own floating window and keeps that window's frame;
+a split column gives each pane its own card, with the drag divider left on the
+seam between them.
+
+**Right sidebar card layout** (the Sidebar tab) chooses it: on is the card above;
+off drops every rule that draws one, so the pane stands in the host's own fill,
+flush with the column on all four sides, and a split's two panes meet at the
+dock's own resting line. Every card rule is gated on
 `<body data-dsh-claude-dock-look="card">`, so off is the host's own panel look
 with nothing added.
 
 **The start page.** The host centers its stack of entries in a box that never
 grows, so a list taller than the pane was clipped at both ends, its first rows
-out of reach. On the card the stack scrolls: `justify-content: flex-start`,
-`margin-top: auto` on the first entry and `margin-bottom: auto` on the last.
-The two auto margins absorb the free space exactly as `center` did while the
-list fits, and fall to zero once it does not, so the stack starts at the top
-and scrolls to its end.
+out of reach. On the card the stack scrolls: the first entry's top margin and the
+last entry's bottom margin take the free space while the stack fits, and fall to
+zero once it does not, so the list starts at the top and scrolls to its end.
 
 ## Typography
 
@@ -294,49 +286,40 @@ and scrolls to its end.
 - **Sans UI** — chrome, body (`--dsw-font-family`).
 - **Mono** — code, technical labels (`--dsh-claude-font-code`).
 
-
 ## Shapes
 
-- Radius: 4 / 8 / 16 px; 12px for a popover card and 6px for its rows (the
-  popover table below); pills for CTAs (`9999px`). A shape copied from a host
-  control keeps that control's own geometry rather than the scale above: the
-  composer card's 18px (the host's 22px less 4), the inline composer's 14px and
-  11px, the permission and workspace segments' 7px, the view tabs' 5px, the
-  peak-rate and file pills' 999px.
+- Radius: a ladder of 4 / 8 / 16 px, a 12px popover card with 6px rows, and
+  pills for CTAs. A shape copied from a host control keeps that control's own
+  geometry rather than the ladder, and says so in the stylesheet beside its
+  feature.
 - Borders: 1px, and in dark not a colour but a highlight. The three border
-  tokens are one translucent white at `.09` / `.18` / `.30`, so a card, a panel,
-  a code block or a keycap reads as a chamfer catching the top light over
-  whatever fill it sits on rather than as a contour whose colour has to be
-  re-picked per surface. The light rungs stay the warm opaque ladder. A copy of a
-  host control keeps that control's own stroke: the inline composer's 1.6px stop
-  square.
+  tokens are one translucent white at three strengths, so a card, a panel, a
+  code block or a keycap reads as a chamfer catching the top light over whatever
+  fill it sits on rather than as a contour whose colour has to be re-picked per
+  surface. The light rungs stay the warm opaque ladder.
 - Separator: `--dsh-claude-divider`, a rung below the lightest border, drawn at
   0.5px on every line that only separates — the sidebar's foot area, the search
   panel's foot, the context stats, the settings rows, a menu's separators, the
-  file block's IN/OUT line and the transcript's `hr` (one device pixel on a
-  retina display; elsewhere `0.5px` rasterises to one physical pixel). A card, a
-  field and a popover keep their 1px border in l1, so an outline always reads
-  heavier than a separator inside it. The split between the sidebar and the
-  conversation stays 0.5px of l1 (`theme/chrome.css`); the Markdown table frame
-  and the trajectory chip stay 0.5px of l2 (`theme/typography.css`,
-  `features/chat-files`).
+  file block's IN/OUT line and the transcript's `hr`. The line belongs to the
+  layout rather than to a surface's opening animation, so one thickness covers
+  every separator a card holds. A card, a field and a popover keep their 1px
+  border in l1, so an outline always reads heavier than a separator inside it.
 - Spacing: 4 px rhythm.
 - Bottom edge: the transcript never fades behind the composer by shadow. The
   composer seat paints an opaque `var(--dsw-alias-bg-base)` bar across its own
   box (so the bar's height *is* the composer's height) and one
-  `--dsh-composer-fade-h` (40px) gradient band above it, running to transparent.
-  The same token is the transcript's bottom clearance, so the last turn rests
+  `--dsh-composer-fade-h` gradient band above it, running to transparent. The
+  same token is the transcript's bottom clearance, so the last turn rests
   exactly at the band's top edge. Never re-add background-coloured halo shadows
   to the card to hide the transcript: they have to be restated in every
   light / dark / focus / attachment rule, and every rule that resets the card's
   `box-shadow` inherits the job.
 - Focus: the composer field lights up — its hairline takes the input box's own
-  shadow colour (espresso `#141413` in light) with a 1px halo in the same tone
-  and a deeper drop shadow. Dark inverts the face: on the near-black canvas a
-  black edge carries no cue, so the hairline and halo become bright ivory —
-  the field visibly lights up instead of deepening. The footer tray below
-  follows the same hairline so the two tiers stay one outline. Accent is never
-  used for focus strokes. Every other control's keyboard ring is the host's own
+  shadow colour with a halo in the same tone and a deeper drop shadow; dark
+  inverts the face, so the hairline and halo become bright ivory rather than a
+  black edge on a near-black canvas. The footer tray below follows the same
+  hairline so the two tiers stay one outline. Accent is never used for focus
+  strokes. Every other control's keyboard ring is the host's own
   `:focus-visible` rule painting `--dsw-focus-ring-color`, which the skin states
   as the same ink; the skin's ring is a `:where()` fallback of no weight, so the
   rule of whichever layer owns the control — this skin's, the host's, or another
@@ -350,7 +333,7 @@ value (D9). One value per role, so a faster feedback or a calmer swap is one
 edit; the build refuses a time or a curve written anywhere else.
 
 - Feedback: a control answering hover, press or focus.
-- Reveal: content entering the chat area at the host's own 120 ms.
+- Reveal: content entering the chat area at the host's own pace.
 - Surface: an entrance — a menu, a popover, a panel, a dialog, a toast.
 - Exit: a dismissal, deliberately quicker than the entrance.
 - Travel: something moving along its own track (a fold's door, the reasoning
@@ -364,10 +347,9 @@ edit; the build refuses a time or a curve written anywhere else.
 - The presets these tokens feed live in `packages/client/src/shared/motion.css`:
   a surface arriving or leaving, a menu growing out of its trigger, a plain
   fade, one half of a wording swap, the pulse a placeholder and the sidebar's
-  ongoing light share, and the two paints
-  the waiting line's words can wear (a highlight band and a colour wash). A
-  feature that needs its own effect reads the tokens and keeps its own
-  keyframes.
+  ongoing light share, and the two paints the waiting line's words can wear (a
+  highlight band and a colour wash). A feature that needs its own effect reads
+  the tokens and keeps its own keyframes.
 
 The table below is generated from `packages/client/src/theme/tokens.json` by `npm run build`;
 edit the JSON, not the table.
@@ -455,12 +437,12 @@ edit the JSON, not the table.
 
 ## Layers
 
-A z-index the skin writes is one of two kinds (D9). Inside one box, siblings
-are ordered with a literal from -1 to 9: a fill painted under its own content,
-a label over its sliding pill, the composer's rows over one another. Anything
-that has to clear what the host draws around it — the composer's own controls,
-the window's title row, a floating card, a surface over the whole window —
-stands on a layer token, and the build refuses any other number.
+A z-index the skin writes is one of two kinds (D9). Inside one box, siblings are
+ordered with a literal from -1 to 9: a fill painted under its own content, a
+label over its sliding pill, the composer's rows over one another. Anything that
+has to clear what the host draws around it — the composer's own controls, the
+window's title row, a floating card, a surface over the whole window — stands on
+a layer token, and the build refuses any other number.
 
 The table below is generated from `packages/client/src/theme/tokens.json` by `npm run build`;
 edit the JSON, not the table.
@@ -479,21 +461,16 @@ edit the JSON, not the table.
 ## Text selection
 
 Selection is the one surface that leaves the palette on purpose — it is a
-transient gesture, not part of the interface, so it uses the platform's two
-solid paints and looks the same on both canvases:
-
-| State | Background | Text |
-|---|---|---|
-| Window focused | `#3366D0` | `#FFFFFF` |
-| Window unfocused | `#C7C7C6` | `#000000` |
+transient gesture, not part of the interface, so it uses the platform's two solid
+paints and looks the same on both canvases.
 
 Both are solid (never translucent) and `!important`, so they override whatever
 colour the text underneath carries — links, inline code, syntax tokens. CSS
 cannot read window focus: Chromium reaches the inactive paint through its own
 internal `-internal-inactive-selection-*` properties, which a stylesheet cannot
-address. `packages/client/src/features/composer/selection-mirror.ts` therefore mirrors `document.hasFocus()`
-onto `data-dsh-window-blur` and the stylesheet switches on that attribute; the
-selection itself survives the blur.
+address. `packages/client/src/features/composer/selection-mirror.ts` therefore
+mirrors `document.hasFocus()` onto `data-dsh-window-blur` and the stylesheet
+switches on that attribute; the selection itself survives the blur.
 
 The window's chrome is not text. The sidebar column and the conversation header
 take `user-select: none`: a press on a row or on the session title is a gesture
@@ -509,199 +486,140 @@ host's own crumb already carries the padding and the radius — with a tip under
 the segment naming the press, in the label ink on the canvas tone the usage
 panel's day tip uses. The segment carries the tip rather than the words because
 the host clips a crumb's overflow for its ellipsis. The press opens a field over
-the words' own line: canvas fill, a 1px ring in the selection blue, a 4px radius,
-and 1px to either side of the words with 3px above and below them, so the ring
-hugs the name the way Claude's own field does rather than laying a card over it.
-The field stands in the page's own space, so the reader's zoom keeps it on the
-title; a rename the host refuses keeps the field, ringed in the host's error
-tone.
+the words' own line, in the selection's blue and in the page's own space so the
+reader's zoom keeps it on the title; the field hugs the name the way Claude's own
+field does rather than laying a card over it. A rename the host refuses keeps the
+field, ringed in the host's error tone.
 
 ## Markdown material
 
 A quote is a **container**, not a link: it keeps the prose face on a neutral bar
-and wash (text `#B0AEA5`, light `#6E6A60`), and whatever sits inside it keeps its
-own material — links stay blue, inline-code chips stay warm red, file mentions
-stay link-blue. Never paint the quote itself with the link colour: the colour
-inherits into the block's inline code and mentions, which is exactly the leak
-that made every path inside a quote read as a link.
+and wash, and whatever sits inside it keeps its own material — links stay blue,
+inline-code chips stay warm red, file mentions stay link-blue. Never paint the
+quote itself with the link colour: the colour inherits into the block's inline
+code and mentions, which is exactly the leak that made every path inside a quote
+read as a link.
 
 **Inline file mentions are links, not code.** The host resolves a file path
 inside an inline code span to a button (`.fileMention`, hashed — match it with
 `[class*="_fileMention"]`) and paints it with its link alias. The generic
-inline-code chip rule is more specific than that class, so a mention inherits
-the chip's warm red unless a rule names it. A mention takes the link blue, weight
-500, and the link's underline (solid in the link tone at rest, solid and fully
-opaque on hover, same thickness and offset — the same treatment the skin gives an
-anchor); the chip itself is left alone — the same fill, hairline, radius and
-padding as any other inline code. Plain inline code keeps its warm text. Note the
-hover rule must set only `text-decoration-color`: the `text-decoration` shorthand
-resets `text-decoration-thickness` to `auto` and thins the line mid-hover.
+inline-code chip rule is more specific than that class, so a mention inherits the
+chip's warm red unless a rule names it. A mention takes the link blue, the link's
+weight and the link's underline — solid in the link tone at rest, solid and fully
+opaque on hover, same thickness and offset as an anchor; the chip itself is left
+alone, with the same fill, hairline, radius and padding as any other inline code,
+and plain inline code keeps its warm text. Note the hover rule must set only
+`text-decoration-color`: the `text-decoration` shorthand resets
+`text-decoration-thickness` to `auto` and thins the line mid-hover.
 
 ## Inline code
 
-The chip hugs its glyphs. The host builds it as an `inline-flex` box that
-inherits the prose line box — 23px for a 15px code size — which left ~5px of
-empty wash above and below the text. The skin sets `line-height: 1.2` on inline
-code (27px → 22px, with the 1px padding as the visible inset); lower values
-start clipping descenders. The fill, hairline, radius and size are unchanged.
+The chip hugs its glyphs. The host builds it as an `inline-flex` box that inherits
+the prose line box, which left empty wash above and below the text; the skin
+tightens the code's own line box so the wash sits on the text, stopping short of
+the value that starts clipping descenders. The fill, hairline, radius and size
+stay the host's.
 
 ## Popovers · 多选一弹层
 
 Every single-choice popover in the skin — the permission menu, the model picker,
 the account drawer, and the host's own menu primitive under the hero row's
-workspace and preset pickers — is meant to start from one recipe. New popovers
-take it rather than inventing a card.
-
-Two rules hold across all of them, both owned by `shared/popover.ts`. A
-pointer opens a card only after a **100 ms dwell** — long enough that crossing a
-28px trigger on the way somewhere else unfolds nothing — and the card closes
-100 ms after the pointer leaves. One card keeps its own number with the reason
-written where it is used: the model picker's levels close after 150 ms (the
-pointer has to cross level 1 to reach level 2). And **only one card is on screen
-at a time**: each popover registers its close path with `registerPopover(name,
-close)` and calls `closeOtherPopovers(name)` on the way open, so opening the
-model picker folds the permission menu, the account drawer and the host's hero
-menu.
-
-Every card the skin places stays inside the window: `positionAnchoredPopover`
-holds the resolved position inside the window's own pixels, so a card taller
-than the room beside its trigger begins at the window's top edge rather than
-drawing its lower rows past the bottom of the page.
+workspace and preset pickers — starts from one recipe. New popovers take it
+rather than inventing a card. The shell, its rows and the separator every card
+shares are written once in `shared/popover.css`; a card's heading and footer are
+its own.
+
+Two rules hold across all of them, both owned by `shared/popover.ts`. A pointer
+opens a card only after a short dwell — long enough that crossing a trigger on
+the way somewhere else unfolds nothing — and the card closes a short grace after
+the pointer leaves. A card that keeps its own numbers writes them where they are
+used, with the reason beside them: the model picker's levels close later,
+because the pointer has to cross level 1 to reach level 2. And **only one card is
+on screen at a time**: opening one closes the others through the shared registry,
+so opening the model picker folds the permission menu, the account drawer and the
+host's hero menu.
+
+Every card the skin places stays inside the window: the shared placement holds
+the resolved position inside the window's own pixels, so a card taller than the
+room beside its trigger begins at the window's top edge rather than drawing its
+lower rows past the bottom of the page.
 
 The context meter's popover is the host's own panel (it portals it, places it,
 and dismisses it), so the skin drives its trigger on hover and paints nothing of
 the shell itself. What it carries is described under "Context popover" below.
 
-**Card**
-
-| Property | Value |
-|---|---|
-| background | `var(--dsw-alias-bg-overlay)`; dark `#1e1e1d` |
-| border | `1px solid var(--dsw-alias-border-l1)`; dark the same stroke, which the dark ladder makes a highlight. The edge stays the card's own border: the box the placement reads and the opening animation scales keeps the paint path it has always had, and no stroke is drawn inside it |
-| radius | 12px |
-| shadow | `0 8px 24px rgba(20,20,19,.12), 0 2px 6px rgba(20,20,19,.08)`; dark `0 8px 28px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.45)` |
-| padding | 6px |
-| layout | flex column, `gap: 6px`; a list body stacks its rows 3px apart |
-| z-index | 99999, above the host's own menus (1100) |
-| open | `opacity 0 → 1`, `translateY(4px) scale(.98) → none`, `.15s ease`, origin on the anchor's side |
-
-**Row**
-
-| Property | Value |
-|---|---|
-| min-height | 32px — a floor, not a cap: a two-line row grows |
-| padding | `2px 7px` |
-| radius | 6px |
-| text | 13px / 20px, `var(--dsw-alias-label-primary)` |
-| hover | `var(--dsh-claude-hover-bg, rgba(0, 0, 0, .08))` |
-| icon | 16px, `var(--dsw-alias-label-secondary)` |
-| two-line row | name 13px / 16px at 500; description 11px / 14px in `label-tertiary` |
-| current row | trailing `IconCheckOutline16` in `var(--dsw-alias-brand-primary)` — the accent is what marks the choice |
-| disabled | `opacity: .4`, `cursor: not-allowed` |
-
-**Heading, separator, footer**
-
-- heading row: 11px / 16px at 600, `letter-spacing: .04em`, uppercase, `label-tertiary`, `padding: 6px 7px 2px`
-- separator: `0.5px` `var(--dsh-claude-divider)` — one rung below the lightest
-  border — `margin: 2px 4px`, drawn as a top border on a zero-height box. One
-  rule in the shared shell covers every separator in a card, the host's own menu
-  separators included, so the line is one thickness wherever it appears and does
-  not follow the card's opening scale
-- pinned footer: `margin-top` / `padding-top` 4px, and the same `0.5px` divider
-  line above it
-
-**Host surfaces**
-
-The host's dropdown menus are one shared primitive (primitives' `Menu`), and its
-two class-name families hash in opposite directions: the primitive ships inside
-the web shell as `_<local>_<hash>_<n>` (`_itemWrap_1nxmc_92`,
-`_itemLabel_1nxmc_174`), while the client-ui packages hash as `<hash>_<local>`
-(`daogkW_itemName`, `p_FcLG_cardWorkspaceTrigger`). A substring matcher therefore
-takes the longest stable piece of whichever family it targets — `_itemWrap_`,
-`_itemLabel_`, `_viewport_` on one side, `_itemName`, `_itemDesc` on the other —
-never the bare local name.
+**Host surfaces.** The host's dropdown menus are one shared primitive
+(primitives' `Menu`), and its two class-name families hash in opposite
+directions: the primitive ships inside the web shell as `_<local>_<hash>_<n>`,
+while the client-ui packages hash as `<hash>_<local>`. A substring matcher
+therefore takes the longest stable piece of whichever family it targets — the
+local name with its underscores — never the bare local name.
 
 The hero row's two pickers are that primitive, portaled to `<body>` with no
-marker of their own. `packages/client/src/features/hero-menu/hero-menu.ts` stamps the open card with
-`data-dsh-claude-hero-menu` and `features/hero-menu/hero-menu.css` restyles it; the
-host's other menus (sidebar row menus, the settings permission row, submenus)
-keep the host's own design on purpose. What that replaces: a 20px radius card
-with 4px padding, 40px rows at 10px radius, and 14px text.
-
-The stamp's value names the picker (`workspace` or `preset`), because the two
-cards differ. The preset card keeps the popover table's 32px rows for its
-two-line entries. The workspace card is Claude Code's folder menu: a 180px-min
-card with 4px padding, 26px plain-text rows (no folder glyph in front of each
-folder, no `＋` on the pinned add row) and the accent check on the current one.
-
-**The account card** is that primitive too, and it carries the skin's rows
-inside it. The host mounts it with nothing but its own three entries and places
-it from that geometry; `features/account/surface.ts` injects the skin's container
-a frame later, the card grows, and the host re-places it on the frame after the
-list changed. Nothing may be painted in between: the card would fade in at the
-height and the place it is about to leave — low, then jumping up mid-fade. So
-while the account row is armed the card stays unpainted (the same armed window
-that carries its one-shot entrance), and the feature stamps
-`data-dsh-claude-account-ready` once the skin's rows are inside it and its
-placement has been read twice with the same value. The entrance animation hangs
-on that stamp, so it plays on the card the reader will actually see.
-
-One footer control stays in the sidebar rather than becoming a row of that
-card: the update plugin's own button, which names itself with
+marker of their own. `packages/client/src/features/hero-menu/hero-menu.ts` stamps
+the open card with `data-dsh-claude-hero-menu` and
+`features/hero-menu/hero-menu.css` restyles it; the host's other menus (sidebar
+row menus, the settings permission row, submenus) keep the host's own design on
+purpose. The stamp's value names the picker (`workspace` or `preset`), because
+the two cards differ: the preset card keeps the recipe's rows for its two-line
+entries, and the workspace card is Claude Code's folder menu — a plain-text row
+per folder, no glyph in front of each, and the accent check on the current one.
+
+**The account card** is that primitive too, and it carries the skin's rows inside
+it. The host mounts it with its own three entries and places it from that
+geometry; the skin's rows arrive a frame later and the card grows, so anything
+painted in between would fade in at the height and the place the card is about to
+leave — low, then jumping up mid-fade. The card therefore stays unpainted while
+the account row is armed, and the feature stamps it ready once the skin's rows
+are inside it and its placement has settled; the entrance animation hangs on that
+stamp, so it plays on the card the reader will actually see.
+
+One footer control stays in the sidebar rather than becoming a row of that card:
+the update plugin's own button, which names itself with
 `data-dsh-plugin="update"` and `data-dsh-part="entry"`. The takeover leaves the
 plugin's node hidden in its slot and stands a copy of it at the right end of the
-account row — the plugin's words, mark, progress and press, at the pill's 22px
-height and 11px type — so a reader reaching for an update does not have to open
-the menu first. The rail has no room beside the icon and folds the copy away.
+account row — the plugin's words, mark, progress and press — so a reader reaching
+for an update does not have to open the menu first. The rail has no room beside
+the icon and folds the copy away.
 
 ## Context popover · 上下文弹层
 
 The context meter's popover is the host's own panel: the skin opens it by
-pressing the host's trigger (hover, with the shared 100 ms dwell and close
-grace, gated on the "open popovers on hover" preference; a click still works),
-and paints nothing of its shell or its dismissal. It mounts
-instead of toggling `data-open`, so the feature stamps the panel and it takes
-the cards' own short rise as a one-shot animation — same 4px, same `scale(.98)`,
-same 0.15s — and a surface the skin opens arrives the same way wherever it is
-the host's.
-
-Its horizontal place is the one thing the skin takes over. ui-chat hangs the
-panel from the anchor's LEFT edge and only then clamps it into the viewport
-(`useStatDialog`, align `start`), so a trigger at the end of the composer row
-leaves the panel against the window's right margin instead of under the ring.
-`features/context-stats/stats-binding.ts` reads the meter's right edge and the
-panel's own layout width — `offsetWidth`, not its rect: the entrance scales the
-box, and a transformed rect is two per cent narrower than the one that settles —
-and writes `--dsh-claude-context-panel-left` with the mark that turns it on;
-`features/composer/inline-bar.css` reads it with `!important`, which outranks the
-host's inline value. The reading is re-taken when the panel's box changes (a size
-subscription on the observation bus) and when the viewport moves (`reposition('viewport')`).
+pressing the host's trigger (hover, under the "open popovers on hover"
+preference; a click still works), and paints nothing of its shell or its
+dismissal. A surface the skin opens arrives the way every skin surface does — the
+cards' own short rise, as a one-shot animation.
+
+Its horizontal place is the one thing the skin takes over. The host hangs the
+panel from the anchor's left edge and only then clamps it into the viewport, so a
+trigger at the end of the composer row would leave the panel against the window's
+right margin instead of under the meter. `features/context-stats/` reads the
+meter's edge and the panel's layout width — its box width, not its scaled rect,
+since the entrance scales it — hands them to `features/composer/inline-bar.css`
+through a custom property that the sheet reads over the host's inline value, and
+re-reads when the panel's box or the viewport moves.
 
 What the skin appends to it is the session's numbers
-(`features/context-stats/session-stats.ts`), read from the host's `sessionStats`
-and `tokenUsage` projections — the same durable whole-log values the host's own
-pills render — never by opening the host's stat dialogs. The labels and the
-duration / token templates come from the host's `chat` locale namespace, so the
-two surfaces read the same words; the host's small formatting rules
-(`formatDuration`, `formatTokensPerSecond`, `formatExactTokens`,
-`formatCacheHitPercent`) are mirrored so the figures match character for
-character.
-
-The cost is the session's own. The host half prices every settlement at its
-own instant and route and answers the settled total over `SESSION_COST_PATH`;
-the browser adds the tokens the streaming answer has grown by at the output
-rate in force, so the figure moves with the written-back tokens and settles
-with them. It writes the shorter of four significant digits and four decimals,
-with the symbol of the `billingCurrency` setting (`¥0.0015`, `$0.0002`,
-`¥2.405`): the official CNY and USD tables are stored
-apart, so the setting picks a table rather than converting one. A model the
-official table does not carry is priced from the snapshot's catalogue — its
-published CNY line when the vendor has one, its USD list price converted at the
-snapshot's fixed rate otherwise; a model neither carries keeps the segment out
-of the line. On the line it
-stands between the written-back tokens and the cache share, and it is among the
-figures the ladder gives up when the line needs the room for the total; in the
-block it is the usage section's first row.
+(`features/context-stats/session-stats.ts`), read from the host's own
+`sessionStats` and `tokenUsage` projections — the same durable whole-log values
+the host's own pills render — never by opening the host's stat dialogs. The
+labels and the duration and token templates come from the host's `chat` locale
+namespace, so the two surfaces read the same words, and the host's formatting
+rules are mirrored so the figures match character for character.
+
+The cost is the session's own. The host half prices every settlement at its own
+instant and route and answers the settled total; the browser adds the tokens the
+streaming answer has grown by at the output rate in force, so the figure moves
+with the written-back tokens and settles with them. It writes the shorter of four
+significant digits and four decimals with the symbol of the `billingCurrency`
+setting: the official CNY and USD tables are stored apart, so the setting picks a
+table rather than converting one. A model the official table does not carry is
+priced from the snapshot's catalogue — its published CNY line when the vendor has
+one, its USD list price converted at the snapshot's fixed rate otherwise; a model
+neither carries keeps the segment out of the line. On the line it stands between
+the written-back tokens and the cache share, and it is among the figures the
+ladder gives up when the line needs the room for the total; in the block it is
+the usage section's first row.
 
 In the toolbar's placement the segment keeps its width across a session switch:
 the session's figure is replaced while the next one is being priced, so the
@@ -711,86 +629,68 @@ extends left, and the box stands as the currency symbol and a dash in
 of the line and back, and the whole bottom line re-lays around it. The box leads
 that line, so the room an amount does not need is the line's leading edge rather
 than a gap between two figures. On the line of its own the segment hugs its
-amount like every other figure: a box there would stand between the written-back
-figure and the cost and the figures would no longer keep one gap, so the line
-fits its figures again for the width the arriving amount needs. The
-`billingCurrency` choice's Off takes the segment out of the line altogether:
-nothing is drawn, and the browser asks the host for neither the price table nor
-the session's total.
+amount like every other figure: the line fits its figures again for the width the
+arriving amount needs. The `billingCurrency` choice's Off takes the segment out
+of the line altogether: nothing is drawn, and the browser asks the host for
+neither the price table nor the session's total.
 
 The settings page's custom price table (the row under the currency) writes a row
-per model — `model|input|cacheRead|output`, per million tokens in that currency —
-and a filled bucket overrides the tables' rate while a blank one leaves it alone.
-The rows travel to the host with the session's cost ask, so a settlement and the
-answer still streaming are priced from one set of rates; a model neither the
-tables nor a row prices leaves the segment out of the line as before. The
-editor's card is the modal's own: a 720px card on the window, and a page under
-760px folds each row into a card with the model above three labelled rates.
+per model, per million tokens in that currency; a filled bucket overrides the
+tables' rate while a blank one leaves it alone. The rows travel to the host with
+the session's cost ask, so a settlement and the answer still streaming are priced
+from one set of rates; a model neither the tables nor a row prices leaves the
+segment out of the line as before.
 
 Which figures appear follows the host's statistics row. Its detailed form gets
-the whole list. Its compact form carries only the output speed and the cache-hit
-share on the composer line, so the block keeps the four that row leaves out —
-the total time, the first-token average, the output speed and the cache-hit
-share. The total is the one figure the host has no word for (its dialog names
-the model's time and the tool calls' separately): it is their sum, labelled from
-the skin's own copy (`contextTotalTime`).
-
-The block: a 1px `var(--dsw-alias-border-l1)` rule and 10px above it, then per
-section an 11px / 16px heading at 600 in `label-tertiary` and a two-column grid
-(6px by 10px). A row is a stack: 12px / 16px label in `label-tertiary` over a
-14px / 20px value at 500 in `label-primary`, the value in tabular figures so
-numbers do not dance as they change. Rows follow the host's own rules — one
-appears only when its input exists — and the block is rewritten on every
-projection frame while the panel is open.
-
-While the projections have answered nothing, the block holds the numbers' place
-under the two real headings: bars at a row's own 37px (16 + 1 + 20) in the host's
-solid hover fill, pulsing over 1.6s (still under the reduced animation choice).
-The place is given up after 2s, so a host that serves no such projection ends at
-the panel it drew itself rather than keeping placeholder bars.
-
-**All five are aligned**: the account drawer was the outlier
-(8px row radius, 2px and 4px card gap, 8px padding, 220 / 260px min-width,
-z-index 1000 and 100000) and now follows the table above. The hero row's pickers are the host's own menu primitive, which differs in
-two ways that CSS cannot change: it mounts instead of toggling a `data-open`
-attribute, so it takes the same fade/scale as a one-shot `0.15s` animation; and
-the host places it *below* its trigger, which is where the composer sits — so
-`packages/client/src/features/hero-menu/hero-menu.ts` re-places it on the trigger the way the
-skin's own composer pickers sit: right-aligned with the trigger and opening
-upward by the same 6px air, flipping below only when the viewport leaves no room
-above, and clamped to the 8px viewport margin (`POPOVER_MARGIN`). The host
-re-runs its own placement from its anchor geometry on every frame while the card
-is open, so the position is handed over in two custom properties on the card
-(`--dsh-claude-hero-menu-x` / `--dsh-claude-hero-menu-y`, written by the same
-pass that stamps it) which `features/hero-menu/hero-menu.css` reads with
-`!important`; that declaration outranks the host's plain inline value.
+the whole list; its compact form carries only the output speed and the cache-hit
+share on the composer line, so the block keeps the four that row leaves out — the
+total time, the first-token average, the output speed and the cache-hit share.
+The total is the one figure the host has no word for (its dialog names the
+model's time and the tool calls' separately): it is their sum, labelled from the
+skin's own copy.
+
+The block is a rule under the figures and a two-column grid of sections, each
+with a heading and rows that stack a label over a value; values sit in tabular
+figures so numbers do not dance as they change, and a row appears only when its
+input exists. The block is rewritten on every projection frame while the panel is
+open. While the projections have answered nothing, the block holds the numbers'
+place under the two real headings with pulsing bars (still under the reduced
+animation choice), and gives the place up rather than keeping placeholders for a
+host that serves no such projection.
+
+**The hero row's pickers.** They follow the recipe above rather than numbers of
+their own, and they are the host's own menu primitive, which differs in two ways
+CSS cannot change: it mounts instead of toggling an open attribute, so it takes
+the same fade and scale as a one-shot animation; and the host places it below its
+trigger, which is where the composer sits. `features/hero-menu/hero-menu.ts`
+therefore re-places it on the trigger the way the skin's own composer pickers sit
+— right-aligned with the trigger and opening upward, flipping below only when the
+viewport leaves no room above — and hands the position to
+`features/hero-menu/hero-menu.css` through custom properties, which the sheet
+reads over the host's inline value.
 
 ## Context meter · 上下文计量
 
 **The trigger is a pie.** Where the host draws a ring of two circles, the meter
 draws two sectors on one centre: the share taken in the colour its occupancy fell
 on, the rest of the plate in the quiet tone beside it. The smaller share keeps
-the box's radius (8px) and the larger one steps in by up to 1.3px — half the
-lift — so a lopsided split reads as the smaller part standing out to the edge,
-15% and 85% mirror each other, and an even split is two half discs of one radius;
-the step eases to nothing as the split comes even. The seam is one width, 1.2px,
-shared between two strokes by the split: the occupied sector's stroke runs from
-the whole width at nothing taken to nothing at everything taken, the plate's is
-the mirror, and each is half the width at the even split. Each sector is cut by
-the stroke around the other's path, so the seam follows the whole boundary — both
-radii, the outer arc and the apex — and the two edges move with the split as the
-reading crosses the middle. The part that stands out is painted last: the plate
-above the even split, the reading's colour below it. The pie is 16px across, one
-pixel more than the ring's 14px cell on each side, and concentric with it; the
-ring keeps its cell and is hidden while the pie stands, so the trigger's layout
-and the room the composer keeps for it are the host's. The occupied sector takes
-the reading's own colour (the occupancy ramp, below), the plate the quiet tone
-beside it.
+the box's radius and the larger one steps in a little, so a lopsided split reads
+as the smaller part standing out to the edge, and the step eases to nothing as
+the split comes even. The seam is one width shared between two strokes by the
+split: the occupied sector's stroke runs from the whole width at nothing taken to
+nothing at everything taken, the plate's is the mirror, and each is half the
+width at the even split. Each sector is cut by the stroke around the other's
+path, so the seam follows the whole boundary — both radii, the outer arc and the
+apex — and the two edges move with the split as the reading crosses the middle.
+The part that stands out is painted last: the plate above the even split, the
+reading's colour below it. The pie is one pixel wider than the ring's cell on
+each side and concentric with it; the ring keeps its cell and is hidden while the
+pie stands, so the trigger's layout and the room the composer keeps for it are
+the host's.
 
 **The line of numbers.** On its own line under the card, each figure is plain
-text in the line's type (13px / 500, tabular figures), not a run of per-character
-spans: a reading that moves is chased from the value on show, closing about two
-thirds of the distance every 73ms and the rest within 220ms, a reading that lands
+text in the line's type with tabular figures, not a run of per-character spans: a
+reading that moves is chased from the value on show, a reading that lands
 mid-count becomes the new destination, and another session's numbers are chased
 from the ones on show too. Only the cache share's figure and the percent sign
 after it wear the band; the words before them keep the line's tone. A card too
@@ -800,139 +700,146 @@ figure into k / M / B.
 ## Search · 搜索
 
 **Sidebar box.** The box takes the brand's place in the logo row while the
-pointer is over the sidebar: 28px tall, 8px radius, a 1px `#E9E9E9` hairline on
-the white canvas fill (dark: `#232323` on `#1F1F1F`), a 16px search glyph in the
-secondary label, the "Search" label in the tertiary label at 14px, and the
-host's search shortcut as 20px keycaps at the right end. The New session row's
-own shortcut wears that same keycap: a 20px box with a 1px hairline, 4px radius
-and 12px secondary ink, and the `+` the host writes between the two keys goes,
-the way the box leaves it out. It is a button like the New session and Plugins
-rows below it: the pointer cursor, and on hover the same plate those rows take
-(`--dsh-claude-hover-bg`, dark `rgba(255, 255, 255, 0.08)`) laid over its
-opaque fill. Box and brand share one grid cell and cross-fade over 0.16s, the
-timing the workspace heading and its segmented control trade places with; the
-box is excluded from the window drag region. Standalone gives the box a row of
-its own under the brand row, shown without a hover; that row adds no inline
-padding, so the box's hairline stands on the two edges of the column's own
-inset and is exactly as wide as the New session plate below it. In the desktop
-titlebar mode the brand row rises 6px, since the sidebar column starts under
-the 40px titlebar — as far as it goes with the box still wholly below that
-edge, which clips the column. A box narrower than 200px keeps its glyph and
-label and leaves the keycaps out.
-
-**Palette.** A modal card set 8vh from the top, 760px wide at most, 16px radius,
-on the same white fill (dark `#191919`) under the host's mask. From the top: a
-17px borderless input with a 28px close button; the category chips (32px tall,
-8px radius, 14px, tertiary at rest and primary when current) sharing one
-sliding highlight at `rgba(20, 20, 19, 0.06)`; the list, capped at
-`min(520px, 62vh)`, with 13px tertiary section captions and 40px rows (8px
-radius, 15px title, an 18px glyph in the secondary label, a 13px tertiary detail
-after the title and an optional 13px tertiary excerpt line under it, the match
-inside it in the primary label at weight 500 with no fill); a hairline-topped footer
-of hints with 20px keycaps. The input text, the chips' text, the captions and
-the row glyphs all start on one vertical line 24px in from the card edge. The
-highlighted row takes `rgba(20, 20, 19, 0.05)` (dark `rgba(250, 249, 245, 0.07)`)
-and shows the Enter glyph; the others hide it. The card fades in and settles
-from 6px above at 98.5% scale over 0.18s; on close card and mask fade out
-together over 0.14s before the modal unmounts.
+pointer is over the sidebar: a short field the height of the row, a hairline on
+the canvas fill, a search glyph in the secondary label, the "Search" label in the
+tertiary label, and the host's search shortcut as keycaps at the right end. The
+New session row's own shortcut wears that same keycap, and the `+` the host
+writes between the two keys goes, the way the box leaves it out. It is a button
+like the New session and Plugins rows below it: the pointer cursor, and on hover
+the same plate those rows take laid over its opaque fill. Box and brand share one
+grid cell and cross-fade on the timing the workspace heading and its segmented
+control trade places with; the box is excluded from the window drag region.
+Standalone gives the box a row of its own under the brand row, shown without a
+hover; that row adds no inline padding, so the box's hairline stands on the two
+edges of the column's own inset and is exactly as wide as the New session plate
+below it. In the desktop titlebar mode the brand row rises, as far as it goes with
+the box still wholly below the titlebar edge, which clips the column. A box
+narrower than its keycaps need keeps its glyph and label and leaves them out.
+
+**Palette.** A modal card set down the window from the top, the host's mask under
+it, on the same canvas fill. From the top: a borderless input with a close
+button; the category chips sharing one sliding highlight; the list, capped
+against the page's own height token rather than `vh` (D81), with section captions
+and rows carrying a title, a glyph, a detail and an optional excerpt line, the
+match in the primary label with no fill; a hairline-topped footer of hints with
+keycaps. The input text, the chips' text, the captions and the row glyphs all
+start on one vertical line inside the card edge. The highlighted row takes a
+plate and shows the Enter glyph; the others hide it. The card fades in and settles
+from above at less than full scale; on close card and mask fade out together
+before the modal unmounts.
 
 ## Chat / Code switch · 聊天 / 代码切换
 
-With ds-bot installed, the switch is two 28×22 options on a 2px-padded plate
-with a 7px radius, each option 5px: chat bubbles and `</>`, 16px glyphs in the
-1.3px stroke the sidebar's glyphs use. It is painted on both sides of the switch
-by whoever paints the host's tokens — the theme on the Code side, ds-bot on the
-Chat side — so the plate is a translucent tint (`rgba(20, 20, 19, 0.06)`, dark
-`rgba(255, 255, 255, 0.08)`), the options take the tertiary label at rest and
-the primary on hover, and the checked one is cut from the conversation canvas
-(`--dsw-alias-bg-base`) with a 1px `rgba(20, 20, 19, 0.10)` drop (dark: a
-`rgba(255, 255, 255, 0.14)` fill and no drop). On the desktop it stands in the
-caption row, its right edge 12px inside the sidebar column's, centred in the
-row, and leaves the screen while the column is too narrow to keep 8px clear of
-the controls at the row's left end; on the web it is a cell of the sidebar's
-first row, before the collapse toggle. It moves nothing: there is no
-transition, since the press hands the whole page to the other side.
+With ds-bot installed, the switch is two options on a padded plate, each carrying
+its glyph in the stroke the sidebar's glyphs use. It is painted on both sides of
+the switch by whoever paints the host's tokens — the theme on the Code side,
+ds-bot on the Chat side — so the plate is a translucent tint, the options take
+the tertiary label at rest and the primary on hover, and the checked one is cut
+from the conversation canvas with a hairline of its own. On the desktop it stands
+in the caption row, its right edge inside the sidebar column's, centred in the
+row, and leaves the screen while the column is too narrow to keep clear of the
+controls at the row's left end; on the web it is a cell of the sidebar's first
+row, before the collapse toggle. It moves nothing: there is no transition, since
+the press hands the whole page to the other side.
 
 ## The waiting line · 模型正在做什么的那一行
 
 The host's running row, its divider and its live region stay as the host draws
 them. Its whale tail is DeepSeek's own character, so under the Claude brand the
-skin hides it and leads the line with its own loader: 4px dots of the accent in
-force in an 18 × 14 box, playing one of three motions
-(`features/chat-wait/wait-loader.ts`). Three dots bounce — each rising the
-skin's 8px and flattening against the floor as it leaves, half a second a bounce
-with the second dot starting two fifths of the period behind the first and the
-third three fifths. Three dots walk three lines through one point, 120° apart
-with the second line run the other way: each dot is a simple harmonic along its
-own line, the whole line taken in 1.25s, at the dot's own size at either end and
-shrinking to 0.55 as it crosses the middle, so no frame of the line motion draws
-a dot larger than the bouncing one. Four dots swap the corners of a 45 : 55
-rectangle, one pair and then the other, 2.4s a turn. The loader opens on one of
-the three at random and every 10s another takes over. A change never cuts and
-the box never empties: each dot of the motion leaving waits for its own still
-moment — the top of a hop, an end of a walk, a corner between two swaps — and the
-dot it is paired with in the motion arriving takes its place there, at its size,
-then travels into its own path over 480ms on the harmonic curve. The dots are
+skin hides it and leads the line with its own loader: dots of the accent in force
+in a small box, playing one of three motions
+(`features/chat-wait/wait-loader.ts`). Three dots bounce and flatten against the
+floor as they leave; three dots walk three lines through one point, each a simple
+harmonic along its own line, shrinking as it crosses the middle so no frame of
+the line motion draws a dot larger than the bouncing one; four dots swap the
+corners of a rectangle, one pair and then the other. The loader opens on one of
+the three at random and lets another take over on a slow clock. A change never
+cuts and the box never empties: each dot of the motion leaving waits for its own
+still moment — the top of a hop, an end of a walk, a corner between two swaps —
+and the dot it is paired with in the motion arriving takes its place there, at
+its size, then travels into its own path on the harmonic curve. The dots are
 paired so they travel least; from three dots to four one splits in two, and from
 four to three the spare one glides onto its partner and is gone where the two
-meet. Under the
-other brands the host's whale stands. The host's own
-shimmering words step aside for the skin's line beside it: the wording in the
-secondary label at 14px on a 24px line,
-the turn's clock 8px later in the caption at 13px with tabular figures, and the
-"No response yet" badge 8px after that (11px on a 16px line, 0 6px padding, a 5px
-radius, the warning label over 16% of itself). The line takes the row's own
-width and gives way inside it: the words are carried whole, so a clause the row
-has no room for is clipped where the room ends and the copy draws an ellipsis,
-with the loader, the clock and the badge keeping their places. The wording wears
-one of two paints, whichever the Motion tab's Waiting-line animation holds: a
-highlight band swept across it the way the host's own rows sweep — 1.5s a pass
-with the band resting the last third of it, in the host's shimmer tint — or a
-colour wash, the seven radial washes of `packages/client/src/shared/motion.css`
-over a grey ramp, orbiting the glyph box (5s an orbit while the hue turns a full
-circle over 4s), which is the effect transitions.dev ships as its Pro gradient
-text. A wording that changes runs both halves of the swap at once and is over in
-0.2s: the old one
-leaves upward with a 2px blur while the new one, parked one gap, enters from 4px
-below; under Reduced motion the band is left out, the wash holds its still frame,
-and the wording is written at once. The Motion tab's preview cards
-wear these same two paints (`packages/client/src/features/settings/settings.css`)
-and take turns between a state word and the host's own word for a wait, so a card
-shows the wording swap as well as the paint.
+meet. Under the other brands the host's whale stands.
+
+The host's own shimmering words step aside for the skin's line beside it: the
+wording in the secondary label on a line of its own, the turn's clock after it in
+the caption with tabular figures, and the "No response yet" badge after that. The
+line takes the row's own width and gives way inside it: the words are carried
+whole, so a clause the row has no room for is clipped where the room ends and the
+copy draws an ellipsis, with the loader, the clock and the badge keeping their
+places. The wording wears one of two paints, whichever the Motion tab's
+Waiting-line animation holds: a highlight band swept across it the way the host's
+own rows sweep, or a colour wash — the radial washes of
+`packages/client/src/shared/motion.css` over a grey ramp, orbiting the glyph box,
+the effect transitions.dev ships as its Pro gradient text. A wording that changes
+runs both halves of the swap at once: the old one leaves upward with a slight
+blur while the new one enters from below; under Reduced motion the band is left
+out, the wash holds its still frame, and the wording is written at once. The
+Motion tab's preview cards wear these same two paints
+(`packages/client/src/features/settings/settings.css`) and take turns between a
+state word and the host's own word for a wait, so a card shows the wording swap
+as well as the paint.
 
 With the chat area's own follow on, the row is pinned while the conversation
 follows its tail, at the place that follow's glide comes to rest — the
-composer's own height, the fade band above it and the host's 16px transcript
-padding — with the canvas carried on down to the composer's top, since the
-host's clip leaves a strip under the row where the line a stream slide brings
-up would otherwise show below the line. The pin stands only while the host
-reports the tail (or the stream glide holds the position) and steps aside for
-the reader's own scrolling.
+composer's own height, the fade band above it and the host's transcript padding —
+with the canvas carried on down to the composer's top, since the host's clip
+leaves a strip under the row where the line a stream slide brings up would
+otherwise show below the line. The pin stands only while the host reports the
+tail (or the stream glide holds the position) and steps aside for the reader's
+own scrolling.
+
+## Process rows · 过程行
+
+An open process group lays its rows out one of two ways, whichever the Main
+window tab's Process rows card holds. Flat is the host's own list, an icon
+leading each row. Column is Claude Code's: the group's body becomes one card —
+the 1px card border and the ladder's 8px radius — and each row is one line of it,
+36px tall, inset 12px, with the 0.5px divider between rows and none above the
+first. No icon leads a row; a row that opens has a chevron trailing its words in
+the same ink, turning down while the row stands open, and its details open
+inside the card under it. The group's body has no maximum height or scrollbar;
+an opened thought keeps its own `min(400px, 50vh)` scrolling area. A trailing
+thought adds 6px below its line or details, leaving room above the card's bottom
+edge. A thought reads as the thought itself and a generic call as its tool and
+purpose, the kind word and its separator set aside; a named call keeps its verb
+(查找文件 · \*.md), and a row with no description keeps its title. The header
+with its counted line stays above the card, outside it. The Main window tab's
+two cards draw a small group in each layout with these same
+rules (`features/process-column/process-column.css`).
 
 ## Home layouts · 首页版面
 
 The new-conversation page has two arrangements. `homeLayout` (settings: Home
 layout) writes `data-dsh-claude-home-layout` onto `<body>` and
-`packages/client/src/features/home/home-panel.css` branches on it. Both are the host's own
-hero markup — the greeting, the workspace row, the dock and the composer card
-inside `…_composerStack …_composerHero` — so only the arrangement differs.
+`packages/client/src/features/home/home-panel.css` branches on it. Both are the
+host's own hero markup — the greeting, the workspace row, the dock and the
+composer card inside the composer stack — so only the arrangement differs.
 
 | | Classic | Studio |
 |---|---|---|
-| greeting | centred, 44.2px serif, brand mark on its line | top left, one fixed line naming the user ("What's up next, …?") in the 20px sans UI face, a 21px brand mark on its line |
-| composer card | vertically centred in the scroll body | the conversation's single-line inline form, resting on the window's bottom edge (16px foot) |
+| greeting | centred, in the display serif, brand mark on its line | top left, one fixed line naming the user, in the sans UI face, brand mark on its line |
+| composer card | vertically centred in the scroll body | the conversation's single-line inline form, resting on the window's bottom edge |
 | between them | — | the usage panel |
 | permission control | the segment group | the conversation's trigger and its card |
 | workspace / preset row | the card's footer tray | hairline chips directly above the card |
-| column width | the hero's centred box | a 720px composer column; the greeting and the panel form a 480px block against its left edge |
+| column width | the hero's centred box | a narrower composer column, with the greeting and the panel forming one block against its left edge |
+
+The Appearance tab's cards draw these arrangements as miniature pages rather
+than placeholder bars, exaggerating the content column and type for legibility
+at that size. The studio greeting and dashboard stand slightly narrower than
+the context row and composer. The dashboard uses the real panel, stat and
+heat-cell classes, including all six stats and the seven-day-row grid; the
+classic card keeps the centred brand greeting and the composer's footer tray
+(`features/home/home-preview.css`).
 
-The studio composer is stamped `data-composer-variant="inline"` (composer.ts's
+The studio composer is stamped `data-composer-variant="inline"` (the composer's
 pass reads the same preference), so the home card is drawn by the conversation's
-single-line stylesheet. The classic tray rules in `features/composer/card.css` are scoped
-away from studio with `:not([data-dsh-claude-home-layout="studio"])`. That is
-deliberate: they set `order: 1` / `order: 2` on the same boxes, and a competing
-rule would have to be out-specified rather than merely reordered — scoping them
-removes the contest.
+single-line stylesheet. The classic tray rules in `features/composer/card.css`
+are scoped away from studio on purpose: they set `order` on the same boxes, and a
+competing rule would have to be out-specified rather than merely reordered —
+scoping them removes the contest.
 
 **The usage panel.** It is a `conversation.input.dock` entry (the host's list
 seat between the greeting and the card; a list seat keys its entries by `id`),
@@ -943,89 +850,67 @@ workspace) has none; there the skin mounts the same component on a
 `display: contents` element of its own (`.dsh-claude-home-seat`) and drops it
 once the host's dock arrives. A window too short for the whole panel shrinks the
 panel, never the page: the greeting keeps the top edge, the chips and the card
-keep the bottom, and the panel scrolls between them with a 32px fade over its
-bottom edge that lifts over the last 32px of travel.
+keep the bottom, and the panel scrolls between them under a fade over its bottom
+edge.
 
 The cold start card waits for a workspace: the host marks it with a dashed ring
 and makes every control on it inert, so a press anywhere opens the workspace
-picker. In the studio form the ring sits on the single-line input box itself
-(the host's dashed stroke and colours, flat, no drop shadow), and the permission
-trigger fills the card's empty mode strip on the preset a new session starts in
-— disabled, like the rest of the card's controls.
-
-The panel is Claude Code's dashboard shape: a flat warm-gray wash (a
-`color-mix` of the label tone at 4% over the card tone, which flips with the
-theme on its own), an Overview/Models tab pair on the left of its head, and the
-All/30d/7d range pills on the right. The active tab and range pill are a gray
-chip one step below that wash — half the radius the 20px control would round to,
-so it reads as a rounded rectangle rather than a full pill. Overview carries six
-stat cells in a 3×2 grid under Claude Code's names (Sessions, Messages, Total
-tokens, Active days, Peak hour, Favorite model) whose tiles sit one clear step
-deeper than the panel (15% of the label tone) and set a 12px label over a 13px
-bold figure — the figure stays barely above its own label, which is also what
-lets a long model id such as deepseek-v4.1-flash sit on one line; the favourite
-model is a name, not a figure, and keeps the regular weight. Messages are the
-settled calls. Once the picked range's total passes one
-book, the yardstick line appears under the grid: sixty-five books from Tao Te
-Ching (7.6k tokens) to In Search of Lost Time (1.6M), the public-domain ones
-measured by feeding their full text to the o200k_base tokenizer (the English
-original or the standard English translation; Faust in German) and the rest
-estimated (1.3 tokens a word for English, 0.96 tokens a character for modern
-Chinese prose). The line states the rounded multiple as a share of the book
-("~2× the tokens in Moby-Dick"), never as an excess over it.
-The book is drawn afresh each time the page comes back to the new-conversation
-hero, and a range that has not reached it steps down to the longest book it has
-passed, so the range pills keep the same book whenever the totals allow. The heat
-grid takes one
-equal column per week (twenty-six weeks), square cells from a 3px gutter, in
-Claude Code's blue data ramp (`#3b6ecf` mixed in at the shares `HOME_HEAT_RAMP`
-in `packages/client/src/constants.ts` lists, over the neutral empty cell); because the columns are fractions of the panel's own width, the newest
-week can never fall past the edge. Hovering a cell raises Claude Code's day tip
-after a short rest: a solid pill in the label ink with the canvas tone for text
-(so it inverts with the theme), 13px medium, reading the day in the shell's
-language and the tokens that day spent ("Sep 9 — 15.9k tokens"), the same figure
-the cell's heat is bucketed from. The grid carries one pill and moves it onto the
-day the pointer names, so a crossing between two cells changes its words in place
-and leaves it standing over the gutters between them rather than building and
-dropping a box for every cell; it is centred on its day except where its own
-width would carry it past the panel's edge, and there it lines up with that
-cell's outer edge so it stays inside the panel, and it stands above its cell
-except where the cell holds more room below it, and there it hangs under the cell
-so it never reaches over the grid's top edge across the stat cells; its width is
-taken from the words it carries and its height from its own box
-(`packages/client/src/features/home/heat-tip.ts`).
-Models is Claude Code's own shape: one column
-per day of the chart's thirty-day window, stacked from the axis up with each
-model's slice in its rank's colour (ranks past the ramp share its last, grey
-step), four gridlines with their token labels in a 34px left gutter and every
-third column's date under it in the shell's language ("Aug 26"), and beneath it
-the ranked list — swatch, model name, the input/output split, and the share of
-the models shown — folding past six rows behind one "show more" row, which turns
-into "show less" once the list is open. The chart
-and the list write counts Claude Code's way: one decimal at most, no trailing
-".0", a lowercase k ("109M", "963.6k"). The list reads the roll-up's per-model
-buckets; the chart reads its per-day per-model map, so a day with nothing
-attributed to a model draws no stack. Each column is sized to its day's total
-against the axis top and each slice to its share of the day, so the column's
-rounding sits on the top of the stack. A range window filters the
-tiles (the peak hour included), the yardstick line and the model list; the heat
-grid and the chart keep their own windows.
+picker. In the studio form the ring sits on the single-line input box itself (the
+host's dashed stroke and colours, flat, no drop shadow), and the permission
+trigger fills the card's empty mode strip on the preset a new session starts in —
+disabled, like the rest of the card's controls.
+
+The panel is Claude Code's dashboard shape: a flat warm-gray wash that flips with
+the theme on its own, an Overview/Models tab pair on the left of its head, and the
+All/30d/7d range pills on the right. The active tab and range pill are a gray chip
+one step below that wash — half the radius the control would round to, so it
+reads as a rounded rectangle rather than a full pill. Overview carries six stat
+cells in a 3×2 grid under Claude Code's names (Sessions, Messages, Total tokens,
+Active days, Peak hour, Favorite model), whose tiles sit one clear step deeper
+than the panel, a label over a bold figure that stays barely above its own label
+— which is also what lets a long model id sit on one line; the favourite model is
+a name, not a figure, and keeps the regular weight. Messages are the settled
+calls.
+
+Once the picked range's total passes one book, the yardstick line appears under
+the grid. The books it measures and their counts are in
+`packages/client/src/features/home/home-figures.ts`; the line states the rounded
+multiple as a share of the book ("~2× the tokens in Moby-Dick"), never as an
+excess over it. The book is drawn afresh each time the page comes back to the
+new-conversation hero, and a range that has not reached it steps down to the
+longest book it has passed, so the range pills keep the same book whenever the
+totals allow.
+
+The heat grid takes one equal column per week, square cells from a gutter, in
+Claude Code's blue data ramp over the neutral empty cell; because the columns are
+fractions of the panel's own width, the newest week can never fall past the edge.
+Hovering a cell raises Claude Code's day tip after a short rest: a solid pill in
+the label ink with the canvas tone for text (so it inverts with the theme),
+reading the day in the shell's language and the tokens that day spent, the same
+figure the cell's heat is bucketed from. The grid carries one pill and moves it
+onto the day the pointer names, so a crossing between two cells changes its words
+in place and leaves it standing over the gutters between them; it is centred on
+its day except where its own width would carry it past the panel's edge, and
+stands above its cell except where the cell holds more room below it.
+
+Models is Claude Code's own shape: one column per day of the chart's window,
+stacked from the axis up with each model's slice in its rank's colour (ranks past
+the ramp share its last, grey step), gridlines with their token labels, and every
+third column's date under it in the shell's language, and beneath it the ranked
+list — swatch, model name, the input/output split, and the share of the models
+shown — folding past a short list behind one "show more" row, which turns into
+"show less" once the list is open. The chart and the list write counts Claude
+Code's way: one decimal at most, no trailing ".0", a lowercase k. Each column is
+sized to its day's total against the axis top and each slice to its share of the
+day, so the column's rounding sits on the top of the stack. A range window filters
+the tiles (the peak hour included), the yardstick line and the model list; the
+heat grid and the chart keep their own windows.
 
 Two sources, in this order: the host half's usage route, then the session list's
-own projection block (`tokenUsage`, `modelSelection`, `sessionListMetadata`).
-The second answers in a few milliseconds and carries per-model totals without the
-four buckets, which is what the list falls back to when the first cannot answer.
-The first reads the cost-meter ledger for the days it knows — its
-`<provider>:<model>` split becomes the per-model cells, one model across providers
-merged into one — takes the dates past the ledger's newest day from the accurate
-per-event fold, and keeps the two apart by date rather than adding them; the
-sessions behind the ledger's days and the logs written on the folded ones are one
-union. Both carry each day's session ids, which a range window unions into one
-distinct session count. Only the fold knows the settlement hours: it keeps one
-hour histogram per day, which a range window sums into its own peak hour, and the
-ledger's own days carry none — the ledger's figures land first, and the peak hour
-of the folded days lands a moment later. The panel names
-which one it drew from, and a figure neither can answer is a dash.
+own projection block (`tokenUsage`, `modelSelection`, `sessionListMetadata`). The
+session list carries per-model totals without the four buckets, which is what the
+list falls back to when the route cannot answer. The panel names which one it
+drew from, and a figure neither can answer is a dash.
 
 The skeleton keeps the frame's geometry — six fixed-size stat cells, a heat grid
 of a fixed cell count, and on the models tab the chart's frame with three
@@ -1038,69 +923,39 @@ placeholder, a zero day draws the grid's own base tone.
 Claude Code's pixel crab is the mascot under the Claude brand (or when picked in
 the Mascot row). It stands where Deepy does — the composer card's top edge on
 both home layouts, the input area or the panel that replaces its card in a
-conversation (unless Where it appears keeps it to the home page) — and follows
-the same states with the same keys. It is drawn on a 52×36 grid of cells at 2px
-a cell, crisp (`pixelated`, 104×72px): feet on the bottom row, on the edge of
-what it stands on; the right claw four cells in from the grid's right edge, so
-it stands 8px inside the card's right edge, where the 18px corner starts to
-round, and the four spare cells take a lean, a note or a sparkle. The resting
-crab — shell 16×12 cells, claws 4×4, eyes 2×2, four legs 2×4 — is 48×32px
-(columns 24–47, rows 20–35) and only it takes the pointer. The shell is the clay
-accent `#d97757` in both themes, the side-on back `#b9603f`, the eyes `#141413`;
-the props (the laptop, the thought bubble, letters, notes, the hard hat) are an
-ink mask filled with the tertiary label ink. Every frame lasts 80ms, Claude
-Code's pace. Its laptop frames are Claude Code's own routine; the rest are drawn
-by `scripts/draw-crab.py` after the same character. With the animation choice
-resolved to "reduced" each state holds its still frame; a click or a pull still
-plays its reaction.
-
-| State | Animation | Still frame |
-|---|---|---|
-| idle, every 20–40 s a look around, a claw wave or Claude Code's whole laptop routine | `idle`, `idle-look`, `idle-wave`, `idle-laptop` | 0 |
-| the model reasons or has not answered: eyes up to a thought bubble | `thinking` | 18 |
-| the model writes or tools run: 1 / 2 / 3+ sessions at work (typing / headphones / typing in a hard hat) | `typing` / `music` / `building` | 0 / 0 / 0 |
-| subagents running: 1 / 2+ (headphones / conducting) | `music` / `conducting` | 0 / 0 |
-| a compaction runs: squashed | `compacting` | 3 |
-| an approval, a question or a plan review waits: an exclamation mark | `notification` | 0 |
-| a tool call or a turn failed (4.8 s): crossed eyes, a shake | `error` | 4 |
-| a turn or a compaction finished (5.2 s): hops, claws up | `happy` | 3 |
-| a quiet minute / the next pointer move or key | `sleeping` / `waking` | 0 / 11 |
-| a click on the left / right half, four quick clicks, a pull | `poke-left` / `poke-right`, `tickle`, `drag` | 0 |
+conversation (unless Where it appears keeps it to the home page) — and follows the
+same states with the same keys. Its frames, its crop boxes and the frame each
+state holds under reduced motion are in
+`packages/client/src/features/mascot/sheets.ts`, the table the build cuts the
+sheets from; the art is drawn by `scripts/draw-crab.py` after Claude Code's
+character. The shell keeps the clay accent in both themes and the props (the
+laptop, the thought bubble, letters, notes, the hard hat) are an ink mask filled
+with the tertiary label ink, so the mascot reads as part of the card it stands on.
+
+Only the resting crab takes the pointer. With the animation choice resolved to
+"reduced" each state holds its still frame; a click or a pull still plays its
+reaction.
 
 ## Deepy · 小鲸鱼
 
-Under the DeepSeek brand (or when picked in the Mascot row) the mascot is
-Deepy, the pixel whale of the Deepy theme pack: a 52×52 grid of logical pixels drawn at 2px a pixel (a 104px
-square), its ground line — row 48.5, the middle of its shadow — on the top edge
-of what it stands on. Every sheet's crop box reaches 3px past that ground line,
-and the whale paints over the host's cards, so its box is lifted by those 3px:
-the sprite's last row lands on the card's top edge, and the shadow's tail stays
-off the card instead of being stamped across it. Its box is 8px in from the
-right end of the card it stands over. On the home page that is the composer card
-(both layouts); in a conversation it is the whole input area, and the panel that
-replaces the card while the reader is asked for something (those panels start
-6–8px above their card). Every frame lasts 50ms. The sheets carry five device
-pixels to a logical pixel and are scaled down smoothly, so the whale stays crisp
-from 1× to 2× screens without `image-rendering: pixelated`, which would drop
-rows on a downscale. The body is Deepy's blue `#4E6FFF` with a navy `#142660`
-outline and a white belly in both themes; on the dark canvas the outline and the
-soft shadow recede and the blue body carries the shape. Only the resting body
-(columns 12–44, rows 30–48) takes the pointer. With the animation choice
-resolved to "reduced" each state holds its still frame; a click or a pull still
-plays its reaction.
-
-| State | Animation | Still frame |
-|---|---|---|
-| idle, every 20–40 s a look around or a spout | `idle`, `idle-look`, `idle-spout` | 0 |
-| the model reasons or has not answered | `thinking` | 20 |
-| the model writes or tools run: 1 / 2 / 3+ sessions at work | `typing` / `music` / `building` | 16 / 0 / 0 |
-| subagents running: 1 / 2+ | `music` / `conducting` | 0 / 6 |
-| a compaction runs | `compacting` | 20 |
-| an approval, a question or a plan review waits | `notification` | 12 |
-| a tool call or a turn failed (4.8 s) | `error` | 24 |
-| a turn or a compaction finished (5.2 s) | `happy` | 44 |
-| a quiet minute (no work, no pointer move or key) / the next pointer move or key | `sleeping` / `waking` | 10 / 29 |
-| a click on the face / the tail, four quick clicks, a pull | `poke-left` / `poke-right`, `tickle`, `drag` | 0 |
+Under the DeepSeek brand (or when picked in the Mascot row) the mascot is Deepy,
+the pixel whale of the Deepy theme pack. Its sheets, crop boxes and still frames
+are in `features/mascot/sheets.ts`, like the crab's, and the two share one state
+machine, so a state added for one is a state for both. Its body is Deepy's blue
+with a navy outline and a white belly in both themes; on the dark canvas the
+outline and the soft shadow recede and the body carries the shape.
+
+Its ground line sits on the top edge of what it stands on, and its crop box
+reaches past that line, so the box is lifted by that margin: the sprite's last
+row lands on the card's top edge and the shadow's tail stays off the card instead
+of being stamped across it. Its box is inset from the right end of the card it
+stands over — on the home page the composer card under both layouts, in a
+conversation the whole input area, and the panel that replaces the card while the
+reader is asked for something. The sheets are scaled down smoothly so the whale
+stays crisp from 1× to 2× screens without `image-rendering: pixelated`, which
+would drop rows on a downscale. Only the resting body takes the pointer. With the
+animation choice resolved to "reduced" each state holds its still frame; a click
+or a pull still plays its reaction.
 
 ## Implementation notes
 
@@ -1118,4 +973,3 @@ plays its reaction.
   whole: `packages/client/src/shared/page-scale.ts` gives each one a space one pixel to one
   pixel with the window (D81), and a rule that caps a card against the window reads
   `--dsh-claude-page-height` / `--dsh-claude-page-width` rather than `vh` / `vw`.
-