@litfamily/litclaude 1.0.30 → 1.0.31

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 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.
+
 ## 1.0.30 - 2026-10-16
 
 - The pre-write guard now refuses more of the lines that tell a reader what a document is not for, such as `This table is not a ranking.` or `이 문서는 제품을 비교하려는 것이 아닙니다.` These forms came from real sessions. Bold-label callouts such as `> **주의:** ...` are now read too, while ordinary quoted text is still skipped. Lines from manuals and lab reports that only look similar stay allowed, and a large flood of matches can no longer push the scan past its limit into an allowed write.

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.30/docs/assets/cover-motion-still.webp" /><img src="https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.30/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.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>
 
 <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.30/docs/assets/readme/badge-version.svg" alt="1.0.30" />
-  <a href="https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.30/LICENSE"><img src="https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.30/docs/assets/readme/badge-license.svg" alt="MIT license" /></a>
+  <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>
 </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.30/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.31/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.30/docs/privacy.md)
-- [Migration and ownership conflicts](https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.30/docs/migration.md)
-- [Release history](https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.30/CHANGELOG.md)
-- [MIT license](https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.30/LICENSE)
+- [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)

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.30/docs/assets/cover-motion-still.webp" /><img src="https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.30/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.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>
 
 <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.30/docs/assets/readme/badge-version.svg" alt="1.0.30" />
-  <a href="https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.30/LICENSE"><img src="https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.30/docs/assets/readme/badge-license.svg" alt="MIT license" /></a>
+  <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>
 </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.30/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.31/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.30/docs/privacy.md)
-- [이전과 소유권 충돌](https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.30/docs/migration.md)
-- [변경 이력](https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.30/CHANGELOG.md)
-- [MIT 라이선스](https://cdn.jsdelivr.net/npm/@litfamily/litclaude@1.0.30/LICENSE)
+- [개인정보와 네트워크 동작](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)

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.30"><title>release: 1.0.30</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.30</text></g></svg>
+<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>

package/docs/hooks.md

@@ -462,15 +462,22 @@ 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. 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. It is redrawn only when something you would
+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
 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.30",
+  "version": "1.0.31",
   "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.30",
+  "version": "1.0.31",
   "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.30";
+const serverVersion = "1.0.31";
 
 const publicSourceReadTool = {
   name: "public_source_read",

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

@@ -14,6 +14,7 @@
 
 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";
@@ -101,17 +102,18 @@ const stillModel = (model) => model && {
 };
 
 // What the card would show on each surface still attached. Invalidation redraws every surface at
-// 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.
+// 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.
 function drawnKey(live, model) {
   const kinds = new Set(Object.values(live.drawnOn));
   if (kinds.size === 0) return JSON.stringify(model);
-  const withSvg = kinds.has("svg");
+  const still = kinds.has("svg") || kinds.has("native");
   return [...kinds].map((kind) => (kind === "svg"
     ? (model?.visible ? composeSvgCard(model, { motion: live.motion, accent: live.accent }).source : "hidden")
-    : JSON.stringify(withSvg ? stillModel(model) : model))).join("\n");
+    : JSON.stringify(still ? stillModel(model) : model))).join("\n");
 }
 
 async function rebuild($, live) {
@@ -373,10 +375,14 @@ 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;
-    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.
+    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.
       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/native-card.mjs

@@ -0,0 +1,133 @@
+// 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],
+  });
+};

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

@@ -1,10 +1,10 @@
-// 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.
+// 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.
 //
 // 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
@@ -21,7 +21,7 @@
 import { textWidth, truncateToWidth } from "./layout.mjs";
 import { TIMINGS, barCells, gradientAt } from "./motion.mjs";
 
-const C = Object.freeze({
+export const C = Object.freeze({
   bg: "#0d1117",
   pink: "#ff2d95",
   orange: "#ff6337",
@@ -41,8 +41,8 @@ const C = Object.freeze({
   hudYellow: "#d7af00",
   hudRed: "#d75f5f",
 });
-const LABELS = Object.freeze({ plan: "PLAN", work: "WORK", review: "REVIEW" });
-const PHASES = Object.freeze(["plan", "work", "review"]);
+export const LABELS = Object.freeze({ plan: "PLAN", work: "WORK", review: "REVIEW" });
+export 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 });
@@ -52,7 +52,7 @@ const FONT = "ui-monospace, 'SF Mono', SFMono-Regular, Menlo, 'JetBrains Mono',
 
 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;
-const levelColor = (percent) => (percent >= 90 ? C.hudRed : percent >= 70 ? C.hudYellow : C.hudGreen);
+export 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" } = {}) => {
@@ -85,7 +85,7 @@ const pill = (x, y, label, { fill, ink, bold = true, sweep = false, breath = nul
   return { markup: parts.join(""), end: x + w };
 };
 
-const indicatorOf = (model, accent) => {
+export 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 +109,7 @@ const topRow = (model, accent, animate) => {
   return brand.markup + title.markup + right;
 };
 
-const rightOfPhases = (model, withProgress = true) => {
+export 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 +158,7 @@ const phaseRow = (model, accent, animate) => {
   return out.join("");
 };
 
-const mapColor = (accent, position) => gradientAt([C.orange, C.pink, accent], position);
+export 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.
@@ -218,7 +218,7 @@ const mapRowSvg = (model, accent, animate) => {
   return out.join("");
 };
 
-const VERDICT_FILL = Object.freeze({ pass: ["✓", C.green], fail: ["✗", C.red], pending: ["·", C.dim], running: ["●", C.amber] });
+export 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) => {
@@ -276,7 +276,7 @@ const detailRowSvg = (model, accent, animate) => {
   return out.join("");
 };
 
-const TONES = Object.freeze({ pink: [C.pink, "#ff6fae", "🔥"], amber: [C.amber, C.amber, "⚠"], red: [C.red, C.red, "✗"] });
+export 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 +351,7 @@ const bottomRow = (model, accent) => {
   return out.join("");
 };
 
-const borderColor = (model, accent) => {
+export 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;