@litfamily/litclaude 1.0.31 → 1.0.32

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.0.32 - 2026-10-17
+
+- The desktop mod card has its look and motion back. 1.0.31 drew it with the app's plain boxes and text to stop it blinking, but that also took away its design and all of its animation. This release restores the animated card from 1.0.30. Its animations now start already visible, so when the app reloads the card after a real change, the card no longer fades in from blank or restarts its border light from the corner. The clock stays off the desktop card, so a running tool alone does not reload it. The terminal and phone cards are unchanged.
+
 ## 1.0.31 - 2026-10-17
 
 - In the Claude Code desktop app, the mod card used to blink: every real change, such as a new step, tool or skill, swapped in a whole new page, so the card went blank for a moment and its animations started over. The desktop card is now built from the app's own boxes and text, and a change updates only what moved. It looks the same but no longer animates. The terminal and phone cards are unchanged.

package/README.md

@@ -1,14 +1,14 @@
-<p align="center"><picture><source media="(prefers-reduced-motion: reduce)" srcset="https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.31/docs/assets/cover-motion-still.webp" /><img src="https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.31/docs/assets/cover-motion.webp" width="100%" alt="LitFamily motion cover: five armored robots power on one by one, the LitClaude robot wakes with glowing eyes and a lit frame, then LITFAMILY and KEEP THE WORK LIT. light up." /></picture></p>
+<p align="center"><picture><source media="(prefers-reduced-motion: reduce)" srcset="https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.32/docs/assets/cover-motion-still.webp" /><img src="https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.32/docs/assets/cover-motion.webp" width="100%" alt="LitFamily motion cover: five armored robots power on one by one, the LitClaude robot wakes with glowing eyes and a lit frame, then LITFAMILY and KEEP THE WORK LIT. light up." /></picture></p>
 
 <h1 align="center">LitClaude</h1>
 <p align="center"><strong>Keep the work lit.</strong></p>
 <p align="center">A Claude Code plugin that helps every session plan the work, build it, check it, and leave a note the next session can pick up.</p>
 <p align="center">
-  <img src="https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.31/docs/assets/readme/badge-version.svg" alt="1.0.31" />
-  <a href="https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.31/LICENSE"><img src="https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.31/docs/assets/readme/badge-license.svg" alt="MIT license" /></a>
+  <img src="https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.32/docs/assets/readme/badge-version.svg" alt="1.0.32" />
+  <a href="https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.32/LICENSE"><img src="https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.32/docs/assets/readme/badge-license.svg" alt="MIT license" /></a>
 </p>
 <p align="center">
-  <a href="https://github.com/wjgoarxiv/litclaude#readme">Full guide and skills gallery on GitHub</a> · <a href="https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.31/README_ko-KR.md">한국어</a>
+  <a href="https://github.com/wjgoarxiv/litclaude#readme">Full guide and skills gallery on GitHub</a> · <a href="https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.32/README_ko-KR.md">한국어</a>
 </p>
 
 Add `lit` to a Claude Code prompt and Claude pins the goal, writes a failing test first,
@@ -73,7 +73,7 @@ the `/plugin` menu.
 ## More
 
 - [Full guide and skills gallery on GitHub](https://github.com/wjgoarxiv/litclaude#readme)
-- [Privacy and network behavior](https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.31/docs/privacy.md)
-- [Migration and ownership conflicts](https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.31/docs/migration.md)
-- [Release history](https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.31/CHANGELOG.md)
-- [MIT license](https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.31/LICENSE)
+- [Privacy and network behavior](https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.32/docs/privacy.md)
+- [Migration and ownership conflicts](https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.32/docs/migration.md)
+- [Release history](https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.32/CHANGELOG.md)
+- [MIT license](https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.32/LICENSE)

package/README_ko-KR.md

@@ -1,14 +1,14 @@
-<p align="center"><picture><source media="(prefers-reduced-motion: reduce)" srcset="https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.31/docs/assets/cover-motion-still.webp" /><img src="https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.31/docs/assets/cover-motion.webp" width="100%" alt="LitFamily 모션 커버: 다섯 로봇 패널이 차례로 켜지고, LitClaude 로봇의 눈과 테두리가 빛난 뒤 LITFAMILY와 KEEP THE WORK LIT. 문구가 밝아지는 영상" /></picture></p>
+<p align="center"><picture><source media="(prefers-reduced-motion: reduce)" srcset="https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.32/docs/assets/cover-motion-still.webp" /><img src="https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.32/docs/assets/cover-motion.webp" width="100%" alt="LitFamily 모션 커버: 다섯 로봇 패널이 차례로 켜지고, LitClaude 로봇의 눈과 테두리가 빛난 뒤 LITFAMILY와 KEEP THE WORK LIT. 문구가 밝아지는 영상" /></picture></p>
 
 <h1 align="center">LitClaude</h1>
 <p align="center"><strong>Keep the work lit.</strong></p>
 <p align="center">Claude Code에서 세션마다 계획하고, 만들고, 확인한 뒤 다음 세션이 이어받을 기록을 남기게 돕는 플러그인입니다.</p>
 <p align="center">
-  <img src="https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.31/docs/assets/readme/badge-version.svg" alt="1.0.31" />
-  <a href="https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.31/LICENSE"><img src="https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.31/docs/assets/readme/badge-license.svg" alt="MIT license" /></a>
+  <img src="https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.32/docs/assets/readme/badge-version.svg" alt="1.0.32" />
+  <a href="https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.32/LICENSE"><img src="https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.32/docs/assets/readme/badge-license.svg" alt="MIT license" /></a>
 </p>
 <p align="center">
-  <a href="https://github.com/wjgoarxiv/litclaude/blob/main/README_ko-KR.md">전체 안내와 스킬 갤러리는 GitHub에서</a> · <a href="https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.31/README.md">English</a>
+  <a href="https://github.com/wjgoarxiv/litclaude/blob/main/README_ko-KR.md">전체 안내와 스킬 갤러리는 GitHub에서</a> · <a href="https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.32/README.md">English</a>
 </p>
 
 Claude Code 프롬프트에 `lit`을 붙이면 Claude가 목표를 고정하고, 실패하는 테스트를 먼저 쓰고,
@@ -71,7 +71,7 @@ LitClaude는 프로젝트 상태를 `.litclaude/`에 두고, 그 안의 `.gitign
 ## 더 보기
 
 - [전체 안내와 스킬 갤러리 (GitHub)](https://github.com/wjgoarxiv/litclaude/blob/main/README_ko-KR.md)
-- [개인정보와 네트워크 동작](https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.31/docs/privacy.md)
-- [이전과 소유권 충돌](https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.31/docs/migration.md)
-- [변경 이력](https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.31/CHANGELOG.md)
-- [MIT 라이선스](https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.31/LICENSE)
+- [개인정보와 네트워크 동작](https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.32/docs/privacy.md)
+- [이전과 소유권 충돌](https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.32/docs/migration.md)
+- [변경 이력](https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.32/CHANGELOG.md)
+- [MIT 라이선스](https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.32/LICENSE)

package/docs/assets/readme/badge-version.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="146" height="20" role="img" aria-label="release: 1.0.31"><title>release: 1.0.31</title><g shape-rendering="crispEdges"><rect width="49" height="20" fill="#080d14"/><rect x="49" width="97" height="20" fill="#ff6337"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="255" y="140" textLength="390" transform="scale(.1)">release</text><text x="965" y="140" textLength="870" transform="scale(.1)" fill="#080D14">1.0.31</text></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="146" height="20" role="img" aria-label="release: 1.0.32"><title>release: 1.0.32</title><g shape-rendering="crispEdges"><rect width="49" height="20" fill="#080d14"/><rect x="49" width="97" height="20" fill="#ff6337"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="255" y="140" textLength="390" transform="scale(.1)">release</text><text x="965" y="140" textLength="870" transform="scale(.1)" fill="#080D14">1.0.32</text></g></svg>

package/docs/hooks.md

@@ -462,22 +462,19 @@ step's spinner (`- \ | /`) and clock are ASCII, and a glyph swaps only together
 
 The desktop app's Code tab, and the other surfaces that are not a terminal, draw a mod's `Text` in
 a proportional font and cut each span to the cells it was laid out for, so the card above comes
-apart there. In the desktop app the mod builds the same five rows from the app's own boxes and
-text instead (`lib/mod/native-card.mjs`): a dark card with a rounded border, the LIT pill, the
-stage pills, the running tool, the skill chips and the usage figures, each row laid out by the app
-in its monospaced face. The app updates that card in place when something changes, so a new stage,
-tool or skill no longer blanks it. It holds still: the app's boxes and text have no animation, and
-the card shows the settled state with no entrances or crossfades.
-
-On a phone the card is one `Svg` drawing (`lib/mod/svg-card.mjs`): monospace text placed by
-counted cells, real pills and a rounded border. While LitClaude works it moves with SMIL animation
-inside the drawing: the pill and the border breathe and the step's spinner turns, and on `full` a
-light crosses the current stage and the current chips, a head runs the rail leaving it, the count
-bar's head shimmers and a comet runs around the border. An idle card is a still image.
-
-Neither the desktop card nor the phone drawing has the step clock or the loop countdown: a new
-drawing restarts the phone's animation, and the desktop card would only show a frozen clock. Both
-name the running tool and show the loop round, and are redrawn only when something you would
+apart there. On those surfaces the mod draws the same five rows as one `Svg` element instead
+(`lib/mod/svg-card.mjs`): monospace text placed by counted cells, real pills and a rounded border.
+It shows the settled state, with no entrances or crossfades. While LitClaude works it moves with
+SMIL animation inside the drawing, which the surface runs in a script-less sandboxed frame: the
+pill and the border breathe and the step's spinner turns, and on `full` a light crosses the
+current stage and the current chips, a head runs the rail leaving it, the count bar's head
+shimmers and a comet runs around the border. An idle card is a still image. The app loads each new
+drawing from scratch and restarts its animation, so this card names the running tool without its
+clock and shows the loop round without its countdown. Each animation starts part way through its
+cycle, so a freshly loaded card already looks like the running one: the border and the pill are
+lit, the light sits on its pill and the comet is part way round, not parked at the top-left
+corner. The app still blanks the card for a moment while it loads a new drawing; the mod cannot
+prevent that. It is redrawn only when something you would
 notice changes, such as the stage, the tool, a skill, a usage figure or the goal. While the card
 shows in a terminal and the app at once, the terminal's loop countdown and lane times wait for such
 a change too; its step clock keeps counting on its own.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@litfamily/litclaude",
-  "version": "1.0.31",
+  "version": "1.0.32",
   "description": "Claude Code plugin: add lit to a prompt and Claude plans, tests, checks and reviews the work, then leaves a handoff for the next session.",
   "type": "module",
   "bin": {

package/plugins/litclaude/.claude-plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "litclaude",
   "description": "Claude Code-native workflow plugin with a bounded-authority start-work lifecycle.",
-  "version": "1.0.31",
+  "version": "1.0.32",
   "author": {
     "name": "LitClaude contributors"
   },

package/plugins/litclaude/bin/litclaude-mcp.js

@@ -9,7 +9,7 @@ import {
 } from "../lib/wikify-knowledge.mjs";
 
 const protocolVersion = "2024-11-05";
-const serverVersion = "1.0.31";
+const serverVersion = "1.0.32";
 
 const publicSourceReadTool = {
   name: "public_source_read",

package/plugins/litclaude/hooks/lit-mod.mjs

@@ -14,7 +14,6 @@
 
 import { composeBand, composeEvidence } from "../lib/mod/frame.mjs";
 import { TIMINGS } from "../lib/mod/motion.mjs";
-import { composeNativeCard } from "../lib/mod/native-card.mjs";
 import { renderBand, renderRows } from "../lib/mod/render.mjs";
 import { accentFromSettings, normalizeModSettings, resolveGlyphs } from "../lib/mod/settings.mjs";
 import { composeSvgCard } from "../lib/mod/svg-card.mjs";
@@ -102,18 +101,17 @@ const stillModel = (model) => model && {
 };
 
 // What the card would show on each surface still attached. Invalidation redraws every surface at
-// once. A phone's Svg is loaded afresh with each new source, restarting its animations, and the
-// desktop's own-element card shows no clock; so while either is attached, time alone never
-// redraws: the Svg is compared by its drawing, the desktop and the terminal by the still model (the
-// terminal's surface module counts the step clock on by itself). A terminal on its own is compared
-// by the whole model, so its countdown and lane times move too.
+// once, and the desktop's Svg is loaded afresh with each new source, restarting its animations; so
+// while a drawing surface is attached, time alone never redraws: it is compared by its drawing and
+// the terminal by the still model (its surface module counts the step clock on by itself). A
+// terminal on its own is compared by the whole model, so its countdown and lane times move too.
 function drawnKey(live, model) {
   const kinds = new Set(Object.values(live.drawnOn));
   if (kinds.size === 0) return JSON.stringify(model);
-  const still = kinds.has("svg") || kinds.has("native");
+  const withSvg = kinds.has("svg");
   return [...kinds].map((kind) => (kind === "svg"
     ? (model?.visible ? composeSvgCard(model, { motion: live.motion, accent: live.accent }).source : "hidden")
-    : JSON.stringify(still ? stillModel(model) : model))).join("\n");
+    : JSON.stringify(withSvg ? stillModel(model) : model))).join("\n");
 }
 
 async function rebuild($, live) {
@@ -375,14 +373,10 @@ export const register = (on, options) => {
     const elements = $.ui.resolve(e);
     const columns = Math.max(20, e.props.bodyColumns ?? e.viewport?.columns ?? 80);
     let drawn = null;
-    const native = e.surface === "desktop";
-    live.drawnOn[e.surface] = native ? "native" : e.surface !== "terminal" && elements.Svg ? "svg" : "cells";
-    if (native) {
-      // The desktop draws Text in a proportional font, so the cell-built card comes apart there, and
-      // it loads each new Svg into a fresh frame, blanking it; it gets a card of flex rows instead.
-      if (model.visible) drawn = composeNativeCard(elements, model, { accent: live.accent });
-    } else if (e.surface !== "terminal" && elements.Svg) {
-      // A phone or editor draws Text in a proportional font too; it gets the card as one drawing.
+    live.drawnOn[e.surface] = e.surface !== "terminal" && elements.Svg ? "svg" : "cells";
+    if (e.surface !== "terminal" && elements.Svg) {
+      // A desktop or editor draws Text in a proportional font, so the cell-built card comes apart
+      // there; those surfaces get the card as one drawing instead.
       if (model.visible) {
         const { source, alt, animated } = composeSvgCard(model, { motion: settings.motion, accent: live.accent });
         drawn = elements.Svg({ source, alt, ...(animated ? { isInteractive: true } : {}) });

package/plugins/litclaude/lib/mod/svg-card.mjs

@@ -1,10 +1,10 @@
-// The LIT card as one SVG drawing, for the surfaces that are neither a terminal grid nor the desktop
-// app (which gets native-card.mjs). They draw a mod's Text in a proportional font and cut each span
-// to the cells it was given, so the terminal card's text border and its padded pills come apart
-// there. Those surfaces carry an `Svg` element instead, and this module draws the same card into
-// it: the brand pill, the discipline and the stage indicator on top, the workflow map (or the phase
-// track and progress when no family places the session), the detail line with the live step, the
-// skill chips (or the notice or the finish), and the live figures at the bottom.
+// The LIT card as one SVG drawing, for the surfaces that are not a terminal grid. The Claude desktop
+// app draws a mod's Text in a proportional font and cuts each span to the cells it was given, so the
+// terminal card's text border and its padded pills come apart there. Those surfaces carry an `Svg`
+// element instead, and this module draws the same card into it: the brand pill, the discipline and
+// the stage indicator on top, the workflow map (or the phase track and progress when no family
+// places the session), the detail line with the live step, the skill chips (or the notice or the
+// finish), and the live figures at the bottom.
 //
 // It draws the settled state of the model; the terminal's entrances and crossfades stay terminal
 // only. While LitClaude works and motion allows, SMIL animation in the drawing keeps it moving: the
@@ -13,7 +13,8 @@
 // head shimmers, the step spinner turns and a comet runs around the border (full only). Idle, it is
 // still. The drawing carries no step clock and no loop countdown: the surface loads each new
 // drawing afresh, restarting every animation, so a figure that moves with time alone would make the
-// card blink on every poll.
+// card blink on every poll. Each loop opens mid-cycle (see `loop`), so a fresh load starts on a
+// frame of the running card rather than on a dim border and a comet at the corner.
 //
 // Text is set in a monospace face and placed by counted cells (Hangul and emoji as two), so the
 // layout does not depend on measuring a font the drawing cannot see.
@@ -21,7 +22,7 @@
 import { textWidth, truncateToWidth } from "./layout.mjs";
 import { TIMINGS, barCells, gradientAt } from "./motion.mjs";
 
-export const C = Object.freeze({
+const C = Object.freeze({
   bg: "#0d1117",
   pink: "#ff2d95",
   orange: "#ff6337",
@@ -41,8 +42,8 @@ export const C = Object.freeze({
   hudYellow: "#d7af00",
   hudRed: "#d75f5f",
 });
-export const LABELS = Object.freeze({ plan: "PLAN", work: "WORK", review: "REVIEW" });
-export const PHASES = Object.freeze(["plan", "work", "review"]);
+const LABELS = Object.freeze({ plan: "PLAN", work: "WORK", review: "REVIEW" });
+const PHASES = Object.freeze(["plan", "work", "review"]);
 
 // Drawing units: CSS pixels at the card's natural size; the surface draws it at that width, up to its slot.
 export const SVG_CARD = Object.freeze({ width: 880, height: 160, font: 13, cell: 7.8, pad: 18 });
@@ -50,9 +51,17 @@ const ROW_Y = Object.freeze([28, 58, 86, 114, 142]);
 const PILL_H = 20;
 const FONT = "ui-monospace, 'SF Mono', SFMono-Regular, Menlo, 'JetBrains Mono', Consolas, monospace";
 
+// Timing of one looping animation, started `phase` of the way into its cycle. The surface loads
+// each new drawing afresh, so every loop would otherwise open on its first frame: the breathing at
+// its dimmest, the light off the pill's left edge, the comet parked at the top-left corner. A
+// negative begin opens each loop mid-cycle, in a frame that looks like the card already running.
+const loop = (ms, phase) => `dur="${ms}ms" begin="-${Math.round(ms * phase)}ms" repeatCount="indefinite"`;
+// The breathing pieces share one phase so the pill, the border and the count bar's head stay in step.
+const BREATH_PHASE = 0.25;
+
 const esc = (text) => String(text).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 const widthOf = (text) => textWidth(text) * SVG_CARD.cell;
-export const levelColor = (percent) => (percent >= 90 ? C.hudRed : percent >= 70 ? C.hudYellow : C.hudGreen);
+const levelColor = (percent) => (percent >= 90 ? C.hudRed : percent >= 70 ? C.hudYellow : C.hudGreen);
 
 // Edge spaces become offsets: an SVG text element drops leading and trailing whitespace.
 const text = (x, y, body, { fill = C.white, bold = false, anchor = "start" } = {}) => {
@@ -79,13 +88,13 @@ const pill = (x, y, label, { fill, ink, bold = true, sweep = false, breath = nul
   const w = widthOf(label) + 16;
   const top = y - PILL_H + 6;
   const parts = [`<rect x="${x.toFixed(1)}" y="${top}" width="${w.toFixed(1)}" height="${PILL_H}" rx="${PILL_H / 2}" fill="${fill}"/>`];
-  if (breath) parts.push(`<rect x="${x.toFixed(1)}" y="${top}" width="${w.toFixed(1)}" height="${PILL_H}" rx="${PILL_H / 2}" fill="${breath}" opacity="0"><animate attributeName="opacity" values="0;${breathPeak};0" dur="${TIMINGS.breath}ms" repeatCount="indefinite"/></rect>`);
+  if (breath) parts.push(`<rect x="${x.toFixed(1)}" y="${top}" width="${w.toFixed(1)}" height="${PILL_H}" rx="${PILL_H / 2}" fill="${breath}" opacity="0"><animate attributeName="opacity" values="0;${breathPeak};0" ${loop(TIMINGS.breath, BREATH_PHASE)}/></rect>`);
   if (sweep) parts.push(`<rect x="${x.toFixed(1)}" y="${top}" width="${w.toFixed(1)}" height="${PILL_H}" rx="${PILL_H / 2}" fill="url(#lit-sweep)"/>`);
   parts.push(text(x + 8, y, label, { fill: ink, bold }));
   return { markup: parts.join(""), end: x + w };
 };
 
-export const indicatorOf = (model, accent) => {
+const indicatorOf = (model, accent) => {
   if (model.completion) return { label: "DONE ✓", fill: C.green };
   if (model.idle) return { label: "idle", fill: C.dim, plain: true };
   const flow = model.workflow;
@@ -109,7 +118,7 @@ const topRow = (model, accent, animate) => {
   return brand.markup + title.markup + right;
 };
 
-export const rightOfPhases = (model, withProgress = true) => {
+const rightOfPhases = (model, withProgress = true) => {
   const pieces = [];
   if (model.ctxWarning) pieces.push([[`ctx ${model.ctxWarning.percent}% → ${model.ctxWarning.threshold}%`, { fill: C.amber, bold: true }]]);
   if (model.lanes.count > 0) pieces.push([[`● ${model.lanes.count} ${model.lanes.count === 1 ? "lane" : "lanes"}`, { fill: C.green }]]);
@@ -158,7 +167,7 @@ const phaseRow = (model, accent, animate) => {
   return out.join("");
 };
 
-export const mapColor = (accent, position) => gradientAt([C.orange, C.pink, accent], position);
+const mapColor = (accent, position) => gradientAt([C.orange, C.pink, accent], position);
 const shortLabel = (label) => label.replace(/^[A-Za-z]+/u, (word) => word.slice(0, 3));
 
 // Right-aligned groups after `x`, the leftmost dropped first when the row is short of room.
@@ -197,7 +206,7 @@ const mapRowSvg = (model, accent, animate) => {
         out.push(`<line x1="${x1.toFixed(1)}" y1="${y - 4}" x2="${x2.toFixed(1)}" y2="${y - 4}" stroke="${C.rail}" stroke-width="2.5" stroke-linecap="round"/>`);
         const filled = count && count.total > 0 ? Math.min(1, count.done / count.total) : 0;
         if (filled > 0) out.push(`<line x1="${x1.toFixed(1)}" y1="${y - 4}" x2="${(x1 + filled * layout.rail).toFixed(1)}" y2="${y - 4}" stroke="${mapColor(accent, mid)}" stroke-width="2.5" stroke-linecap="round"/>`);
-        if (animate.sweep) out.push(`<circle cx="${x1.toFixed(1)}" cy="${y - 4}" r="2.5" fill="#ffffff"><animate attributeName="cx" values="${x1.toFixed(1)};${x2.toFixed(1)}" dur="${TIMINGS.flow}ms" repeatCount="indefinite"/></circle>`);
+        if (animate.sweep) out.push(`<circle cx="${x1.toFixed(1)}" cy="${y - 4}" r="2.5" fill="#ffffff"><animate attributeName="cx" values="${x1.toFixed(1)};${x2.toFixed(1)}" ${loop(TIMINGS.flow, 0.5)}/></circle>`);
       } else {
         out.push(`<line x1="${x1.toFixed(1)}" y1="${y - 4}" x2="${x2.toFixed(1)}" y2="${y - 4}" stroke="${C.rail}" stroke-width="1.5" stroke-linecap="round" stroke-opacity="0.7"/>`);
       }
@@ -218,7 +227,7 @@ const mapRowSvg = (model, accent, animate) => {
   return out.join("");
 };
 
-export const VERDICT_FILL = Object.freeze({ pass: ["✓", C.green], fail: ["✗", C.red], pending: ["·", C.dim], running: ["●", C.amber] });
+const VERDICT_FILL = Object.freeze({ pass: ["✓", C.green], fail: ["✗", C.red], pending: ["·", C.dim], running: ["●", C.amber] });
 
 // └ task 3/7 ▮▮▮▯▯▯▯▯ · next ▸ <task> on the left, the spinner and the tool on the right.
 const detailRowSvg = (model, accent, animate) => {
@@ -232,7 +241,7 @@ const detailRowSvg = (model, accent, animate) => {
     out.push(text(nameEnd, y, model.step.name, { fill: C.white, anchor: "end" }));
     const cx = nameEnd - widthOf(model.step.name) - 10;
     out.push(`<circle cx="${cx.toFixed(1)}" cy="${y - 4}" r="4.5" fill="none" stroke="${accent}" stroke-width="1.8" stroke-dasharray="18 10.3">`
-      + (animate.breath ? `<animateTransform attributeName="transform" type="rotate" values="0 ${cx.toFixed(1)} ${y - 4};360 ${cx.toFixed(1)} ${y - 4}" dur="${TIMINGS.spin * 8}ms" repeatCount="indefinite"/>` : "")
+      + (animate.breath ? `<animateTransform attributeName="transform" type="rotate" values="0 ${cx.toFixed(1)} ${y - 4};360 ${cx.toFixed(1)} ${y - 4}" ${loop(TIMINGS.spin * 8, 0.5)}/>` : "")
       + "</circle>");
     right = width - cx + 10;
   }
@@ -252,7 +261,7 @@ const detailRowSvg = (model, accent, animate) => {
     const cells = barCells(total > 0 ? done / total : 0, 8);
     cells.forEach(({ glyph, color }, index) => out.push(`<rect x="${(x + index * 9).toFixed(1)}" y="${y - 10}" width="7" height="10" rx="1.5" fill="${glyph === "█" ? color : C.empty}"/>`));
     const head = cells.findLastIndex(({ glyph }) => glyph === "█");
-    if (head >= 0 && animate.sweep) out.push(`<rect x="${(x + head * 9).toFixed(1)}" y="${y - 10}" width="7" height="10" rx="1.5" fill="#ffffff" opacity="0"><animate attributeName="opacity" values="0;0.6;0" dur="${TIMINGS.breath}ms" repeatCount="indefinite"/></rect>`);
+    if (head >= 0 && animate.sweep) out.push(`<rect x="${(x + head * 9).toFixed(1)}" y="${y - 10}" width="7" height="10" rx="1.5" fill="#ffffff" opacity="0"><animate attributeName="opacity" values="0;0.6;0" ${loop(TIMINGS.breath, BREATH_PHASE)}/></rect>`);
     x += 8 * 9 + 4;
   }
   const pieces = [];
@@ -276,7 +285,7 @@ const detailRowSvg = (model, accent, animate) => {
   return out.join("");
 };
 
-export const TONES = Object.freeze({ pink: [C.pink, "#ff6fae", "🔥"], amber: [C.amber, C.amber, "⚠"], red: [C.red, C.red, "✗"] });
+const TONES = Object.freeze({ pink: [C.pink, "#ff6fae", "🔥"], amber: [C.amber, C.amber, "⚠"], red: [C.red, C.red, "✗"] });
 
 // Skill chips, or the notice or the finish while one is up, or the hint while nothing has fired.
 const middleRow = (model, accent, animate) => {
@@ -351,7 +360,7 @@ const bottomRow = (model, accent) => {
   return out.join("");
 };
 
-export const borderColor = (model, accent) => {
+const borderColor = (model, accent) => {
   if (model.warnings.some(({ tone }) => tone === "red")) return C.red;
   if (model.warnings.length) return C.amber;
   return model.idle ? C.faint : accent;
@@ -389,13 +398,13 @@ export const composeSvgCard = (model, { motion = "full", accent = "#5fd7ff" } =
   const edge = borderColor(model, accent);
   const perimeter = 1000;
   const defs = animate.sweep
-    ? `<defs><linearGradient id="lit-sweep" x1="0" x2="1" y1="0" y2="0"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="0.5" stop-color="#fff" stop-opacity="0.55"/><stop offset="1" stop-color="#fff" stop-opacity="0"/><animateTransform attributeName="gradientTransform" type="translate" values="-1.2 0;1.2 0" dur="${TIMINGS.sweep}ms" repeatCount="indefinite"/></linearGradient></defs>`
+    ? `<defs><linearGradient id="lit-sweep" x1="0" x2="1" y1="0" y2="0"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="0.5" stop-color="#fff" stop-opacity="0.55"/><stop offset="1" stop-color="#fff" stop-opacity="0"/><animateTransform attributeName="gradientTransform" type="translate" values="-1.2 0;1.2 0" ${loop(TIMINGS.sweep, 0.5)}/></linearGradient></defs>`
     : "";
   const frame = `<rect x="1" y="1" width="${width - 2}" height="${height - 2}" rx="14" fill="${C.bg}" stroke="${edge}" stroke-width="1.5"${model.idle ? ' stroke-opacity="0.8"' : ""}>`
-    + (animate.breath && !model.warnings.length ? `<animate attributeName="stroke-opacity" values="0.45;1;0.45" dur="${TIMINGS.breath}ms" repeatCount="indefinite"/>` : "")
+    + (animate.breath && !model.warnings.length ? `<animate attributeName="stroke-opacity" values="0.45;1;0.45" ${loop(TIMINGS.breath, BREATH_PHASE)}/>` : "")
     + "</rect>";
   const comet = animate.comet
-    ? `<rect x="1" y="1" width="${width - 2}" height="${height - 2}" rx="14" fill="none" stroke="url(#lit-comet)" stroke-width="2.5" stroke-linecap="round" pathLength="${perimeter}" stroke-dasharray="70 ${perimeter - 70}"><animate attributeName="stroke-dashoffset" values="0;-${perimeter}" dur="${TIMINGS.comet * 2}ms" repeatCount="indefinite"/></rect>`
+    ? `<rect x="1" y="1" width="${width - 2}" height="${height - 2}" rx="14" fill="none" stroke="url(#lit-comet)" stroke-width="2.5" stroke-linecap="round" pathLength="${perimeter}" stroke-dasharray="70 ${perimeter - 70}"><animate attributeName="stroke-dashoffset" values="0;-${perimeter}" ${loop(TIMINGS.comet * 2, 0.5)}/></rect>`
       + `<defs><linearGradient id="lit-comet" x1="0" x2="1" y1="0" y2="1"><stop offset="0" stop-color="${C.orange}"/><stop offset="0.6" stop-color="${C.pink}"/><stop offset="1" stop-color="#ffffff"/></linearGradient></defs>`
     : "";
   const body = [

package/plugins/litclaude/lib/mod/native-card.mjs

@@ -1,133 +0,0 @@
-// The LIT card in the desktop app's own elements: a bordered Box of flex rows and monospaced Text
-// spans, laid out by the app rather than by counted cells. The app draws a Box as a flex div and a
-// Text as a styled span (the host's StyledElement), so a new tree updates the page in place. The Svg
-// card it replaces was a whole document the app loaded into a fresh sandboxed frame on every real
-// change (the stage, the tool, a skill), which blanked the card and restarted its animations.
-//
-// It shows the same five rows and colours as the Svg card (svg-card.mjs): the brand pill, the
-// discipline and the stage indicator; the workflow map or the phase track with the lanes and
-// progress; the detail line with the running tool; the skill chips, the notice or the finish; the
-// usage figures. Box and Text carry no animation props, so this card is still; like the Svg card
-// it carries no step clock and no loop countdown, so time alone never changes the tree.
-
-import { barCells } from "./motion.mjs";
-import { C, LABELS, PHASES, TONES, VERDICT_FILL, borderColor, indicatorOf, levelColor, mapColor, rightOfPhases } from "./svg-card.mjs";
-
-const MAX_CHIPS = 6;
-
-/**
- * The card as one element tree from a surface's `{ Box, Text }`. `accent` is the HUD accent.
- */
-export const composeNativeCard = ({ Box, Text }, model, { accent = "#5fd7ff" } = {}) => {
-  const span = (body, { fill = C.white, bold = false, bg = null } = {}) => Text({
-    children: body,
-    color: fill,
-    mono: true,
-    wrap: "truncate-end",
-    ...(bg ? { backgroundColor: bg } : {}),
-    ...(bold ? { weight: "semibold" } : {}),
-  });
-  const pill = (label, fill, ink = C.ink, bold = true) => span(` ${label} `, { fill: ink, bg: fill, bold });
-  const pieces = (list) => list.map(([body, style]) => span(body, style));
-  const group = (children, gap = "xs") => Box({ flexDirection: "row", alignItems: "center", gap, flexShrink: 1, overflow: "hidden", children });
-  const joined = (groups) => groups.flatMap((list, index) => (index > 0 ? [span("·", { fill: C.faint }), ...pieces(list)] : pieces(list)));
-  const row = (left, right = []) => Box({
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    gap: "md",
-    children: [group(left.length ? left : [span(" ")]), ...(right.length ? [group(right)] : [])],
-  });
-
-  const indicator = indicatorOf(model, accent);
-  const top = row(
-    [pill("🔥 LIT", C.pink), span("·", { fill: C.dim }), span(model.title ?? "ready", model.idle ? { fill: C.dim } : { fill: accent, bold: true })],
-    [span(indicator.label, { fill: indicator.fill, bold: !indicator.plain })],
-  );
-
-  const nowFill = (isWork = true) => (model.idle ? C.muted : model.ctxWarning && isWork ? C.amber : accent);
-  const nowInk = model.idle ? C.mutedText : C.ink;
-  let track;
-  if (model.workflow) {
-    const { stages } = model.workflow;
-    const last = Math.max(1, stages.length - 1);
-    const left = [];
-    stages.forEach((stage, index) => {
-      if (index > 0) left.push(span("──", { fill: stage.state === "todo" ? C.rail : mapColor(accent, (index - 0.5) / last) }));
-      if (stage.state === "now") left.push(pill(stage.label, nowFill(), nowInk));
-      else left.push(span(`${stage.label} ${stage.state === "done" ? "✓" : "·"}`, { fill: stage.state === "done" ? mapColor(accent, index / last) : C.dim }));
-    });
-    track = row(left, joined(rightOfPhases(model, false)));
-  } else {
-    const left = [];
-    PHASES.forEach((id, index) => {
-      const state = model.phases[id];
-      if (index > 0) left.push(span("──", { fill: model.phases[PHASES[index - 1]] === "done" ? accent : C.rail }));
-      if (state === "now") left.push(pill(LABELS[id], nowFill(id === "work"), nowInk));
-      else left.push(span(`${state === "done" ? "●" : "○"} ${LABELS[id]}`, { fill: state === "done" ? accent : C.dim }));
-    });
-    track = row(left, joined(rightOfPhases(model)));
-  }
-
-  const flow = model.workflow;
-  const detailLeft = [];
-  if (flow) {
-    detailLeft.push(span("└", { fill: C.dim }));
-    const parts = [];
-    if (flow.count) {
-      const { done, total, unit } = flow.count;
-      const bar = barCells(total > 0 ? done / total : 0, 8).map(({ glyph, color }) => span("▮", { fill: glyph === "█" ? color : C.empty }));
-      parts.push([span(unit, { fill: C.dim }), Box({ flexDirection: "row", children: [span(`${done}`, { bold: true }), span(`/${total}`, { fill: C.dim })] }), Box({ flexDirection: "row", children: bar })]);
-    }
-    if (flow.verdicts) parts.push(flow.verdicts.map(({ name, state }) => span(`${name} ${VERDICT_FILL[state][0]}`, { fill: VERDICT_FILL[state][1] })));
-    for (const item of flow.items) parts.push([span(item)]);
-    if (flow.next) parts.push([span("next", { fill: C.dim }), span("▸", { fill: accent }), span(flow.next)]);
-    parts.forEach((part, index) => detailLeft.push(...(index > 0 ? [span("·", { fill: C.faint })] : []), ...part));
-  }
-  const detail = row(detailLeft, model.step ? [span("◌", { fill: accent }), span(model.step.name)] : []);
-
-  let middle;
-  if (model.completion) {
-    middle = row([span("✦", { fill: C.pink }), span("COMPLETE", { bold: true }), span(`· ${model.completion.detail ?? ""}`, { fill: C.green })]);
-  } else if (model.notice) {
-    const [bar, title, icon] = TONES[model.notice.tone] ?? TONES.pink;
-    middle = row([span("▌", { fill: bar }), span(`${icon} ${model.notice.title}`, { fill: title, bold: true }), ...(model.notice.detail ? [span(`· ${model.notice.detail}`, { fill: C.dim })] : [])]);
-  } else if (model.skills.length === 0) {
-    if (!model.idle && model.next && !model.workflow?.next) middle = row([span("▸", { fill: accent }), span(model.next)]);
-    else if (!model.idle) middle = row([span("no LitFamily skill yet in this request", { fill: C.dim })]);
-    else middle = row([span("no LitFamily skill yet · type", { fill: C.dim }), span("lit <task>", { fill: accent }), span("to start one", { fill: C.dim })]);
-  } else {
-    const shown = model.skills.slice(0, MAX_CHIPS).map((chip) => (chip.state === "current"
-      ? pill(`⚡ ${chip.id}`, accent)
-      : pill(`↯ ${chip.id}`, C.muted, C.mutedText, false)));
-    const rest = model.skills.length - MAX_CHIPS;
-    middle = row([span("skills", { fill: C.dim }), group(rest > 0 ? [...shown, pill(`+${rest}`, C.muted, C.dim, false)] : shown, "sm")]);
-  }
-
-  const bottomGroups = [];
-  const warning = model.warnings[0];
-  if (warning) {
-    const color = warning.tone === "red" ? C.red : C.amber;
-    bottomGroups.push([span(`${warning.tone === "red" ? "✗" : "⚠"} ${warning.subject}`, { fill: color, bold: true }), span(warning.text, { fill: color })]);
-  }
-  const { context, rates, git } = model.figures;
-  if (context !== null) {
-    const filled = Math.max(0, Math.min(5, Math.round(context / 20)));
-    const bar = Array.from({ length: 5 }, (_, i) => span("▮", { fill: i < filled ? accent : C.empty }));
-    bottomGroups.push([span("ctx", { fill: C.dim }), span(`${context}%`, { fill: accent }), Box({ flexDirection: "row", children: bar })]);
-  }
-  for (const rate of rates) bottomGroups.push([span(rate.label, { fill: C.dim }), span(`${rate.percent}%`, { fill: levelColor(rate.percent) })]);
-  if (git) bottomGroups.push([span("git", { fill: C.dim }), span(git, { fill: accent })]);
-  const bottom = row(bottomGroups.flatMap((list, index) => (index > 0 ? [span("·", { fill: C.faint }), ...list] : list)));
-
-  return Box({
-    flexDirection: "column",
-    gap: "xs",
-    paddingX: "md",
-    paddingY: "sm",
-    borderStyle: "round",
-    borderColor: borderColor(model, accent),
-    backgroundColor: C.bg,
-    children: [top, track, detail, middle, bottom],
-  });
-};