@litfamily/litclaude 1.0.22 → 1.0.24

package/plugins/litclaude/lib/mod/frame.mjs

@@ -1,16 +1,28 @@
-// Turns a band model and one sampled frame into rows of coloured spans. A span is
-// { text, fg?, bg?, bold? }; the surface module draws each row as a line of Text elements. Every
-// row is fitted to the width it is given, counting Hangul and emoji as two cells, so nothing wraps.
+// Turns a band model and one sampled frame into the LIT card: four rows of coloured spans. A span is
+// { text, fg?, bg?, bold? }; the surface module draws each row as a line of Text elements. The card
+// draws its own rounded border so the top edge can carry the title and the bottom edge the live
+// figures, and every row is fitted to exactly the card's width, counting Hangul and emoji as two
+// cells, so nothing wraps and the card keeps its height whether LitClaude is working or idle.
+//
+//   ╭─ [🔥 LIT] · lit-loop ─────────────────────────── WORK ● ─╮
+//   │ ● PLAN ━━ [WORK] ━━ ○ REVIEW              goal ██░░░ 2/5 │
+//   │ skills [⚡ lit-plan] [⚡ litresearch] [↯ lit-docx]        │
+//   ╰─ ctx 42% ▰▰▱▱▱ · 5h 31% · git main ──────────────────────╯
+//
+// Each bracket pair stands for the two end cells of a filled pill: the brand on pink, the active
+// phase and this request's skills on the accent with dark text, skills from earlier requests on
+// dark grey. Those end cells are rounded Nerd Font caps in the pill's colour, or one cell of
+// padding in that colour with basic glyphs, so a pill is as wide in either glyph set.
 //
 // In a real Claude Code 2.1.292 terminal, a row whose only change is a non-ASCII glyph (a block,
 // symbol, Hangul or Nerd Font cell) keeps showing the old glyph; a change to ASCII text, or to the
 // colour of an ASCII cell, repaints. So every change is carried by ASCII: a bar cell is a space on
 // its colour and the leading cell fades in by colour, embers are ASCII sparks, labels pop in letter
-// by letter, a notice slides by its leading spaces, a glyph swaps only together with its words,
-// and each gate state has its own label.
+// by letter, a notice slides by its leading spaces, a chip's light moves over its ASCII name, and a
+// glyph swaps only together with the colour of its words.
 
-import { fitSegments, textWidth, truncateToWidth } from "./layout.mjs";
-import { barCells, gradientAt, lerpColor } from "./motion.mjs";
+import { textWidth, truncateToWidth } from "./layout.mjs";
+import { barCells, lerpColor } from "./motion.mjs";
 import { glyphSet } from "./settings.mjs";
 import { formatDuration } from "./view.mjs";
 
@@ -27,24 +39,22 @@ export const PALETTE = Object.freeze({
   white: "#e6edf3",
   dim: "#6e7681",
   faint: "#30363d",
-  cardBorder: "#3a2a4a",
 });
 
-const BRAND_STOPS = Object.freeze([PALETTE.orange, PALETTE.pink, PALETTE.cyan]);
-const PILL = Object.freeze({
-  brand: { bg: PALETTE.pink, fg: "#12060c" },
-  done: { bg: "#1d4d36", fg: "#b8f5cf" },
-  now: { bg: "#0aa6c2", fg: "#001318" },
-  todo: { bg: "#222a33", fg: "#8b949e" },
-  warn: { bg: "#c27a0a", fg: "#1a0f00" },
-});
-const INK = Object.freeze({ done: PALETTE.green, now: PALETTE.accent, todo: PALETTE.dim, warn: PALETTE.amber });
+// The status line's level colours (xterm 71, 178, 167) and its empty bar cells (238).
+const HUD = Object.freeze({ green: "#5faf5f", yellow: "#d7af00", red: "#d75f5f", empty: "#444444" });
+// Past this many columns the card stops growing, so a wide terminal does not stretch it thin.
+export const CARD_MAX = 80;
+// Pill colours: dark text on the bright fills, the muted pill for earlier skills and +N, the brand
+// pink of the status line's prefix, and the connectors between phases.
+const PILL = Object.freeze({ ink: "#0b0f14", muted: "#2d333b", mutedText: "#adb5bf", brand: PALETTE.pink, rail: "#46505c" });
 const TONE = Object.freeze({
   pink: { bar: PALETTE.pink, title: PALETTE.pinkText, icon: "🔥" },
   amber: { bar: PALETTE.amber, title: PALETTE.amber, icon: "⚠" },
   red: { bar: PALETTE.red, title: PALETTE.red, icon: "✗" },
 });
 const LABELS = Object.freeze({ plan: "PLAN", work: "WORK", review: "REVIEW" });
+const PHASES = Object.freeze(["plan", "work", "review"]);
 
 const span = (text, style = {}) => ({ text, ...style });
 export const rowWidth = (row) => row.reduce((sum, part) => sum + textWidth(part.text), 0);
@@ -68,8 +78,15 @@ export const clipRow = (row, cells) => {
   return out;
 };
 
+// Clips a row to `cells` and pads it with spaces to exactly that width.
+const fitRow = (row, cells) => {
+  const clipped = clipRow(row, cells);
+  const missing = cells - rowWidth(clipped);
+  return missing > 0 ? [...clipped, span(" ".repeat(missing))] : clipped;
+};
+
 // A label popping in: the first `reveal` share of its characters, and while ease-out-back carries
-// the reveal past 1, a cell or two of extra padding so the pill visibly overshoots and settles.
+// the reveal past 1, a cell or two of extra padding so the label visibly overshoots and settles.
 export const revealText = (label, reveal) => {
   if (!(reveal > 0)) return null;
   const chars = [...label];
@@ -77,146 +94,235 @@ export const revealText = (label, reveal) => {
   return chars.slice(0, Math.min(count, chars.length)).join("") + " ".repeat(Math.max(0, count - chars.length));
 };
 
-const gradientSpans = (text, stops, { shimmer = null, bold = true } = {}) => {
+// Text inside a pill, one span per character, when a light is passing: the fill brightens around
+// `shimmer` (0 to 1 across the visible characters). Without a light the text stays one span.
+const litText = (text, style, shimmer) => {
+  if (shimmer === null || shimmer === undefined) return [span(text, style)];
   const chars = [...text];
   const visible = chars.filter((ch) => ch.trim()).length;
   let k = 0;
   return chars.map((ch) => {
-    if (!ch.trim()) return span(ch);
+    if (!ch.trim()) return span(ch, { ...style });
     const position = visible <= 1 ? 0 : k / (visible - 1);
     k += 1;
-    let fg = gradientAt(stops, position);
-    if (shimmer !== null && Math.abs(position - shimmer) < 0.18) fg = lerpColor(fg, "#ffffff", (1 - Math.abs(position - shimmer) / 0.18) * 0.75);
-    return span(ch, { fg, bold });
+    const near = Math.abs(position - shimmer);
+    return span(ch, near < 0.18 ? { ...style, bg: lerpColor(style.bg, "#ffffff", (1 - near / 0.18) * 0.6) } : { ...style });
   });
 };
 
-const pillSpans = (text, colors, glyphs, bold = true) => [
-  ...(glyphs.capLeft ? [span(glyphs.capLeft, { fg: colors.bg })] : []),
-  span(text, { fg: colors.fg, bg: colors.bg, bold }),
-  ...(glyphs.capRight ? [span(glyphs.capRight, { fg: colors.bg })] : []),
-];
+// A filled pill around `body` (spans that already carry the fill as `bg`): rounded caps in the
+// fill colour where the glyph set has them, one cell of padding in the fill otherwise.
+const pill = (body, fill, glyphs) => (glyphs.capLeft
+  ? [span(glyphs.capLeft, { fg: fill }), ...body, span(glyphs.capRight, { fg: fill })]
+  : [span(" ", { bg: fill }), ...body, span(" ", { bg: fill })]);
 
-const mixColors = (a, b, t) => ({ bg: lerpColor(a.bg, b.bg, t), fg: lerpColor(a.fg, b.fg, t) });
+const inkOf = (accent) => ({ done: lerpColor(accent, PALETTE.dim, 0.45), now: accent, todo: PALETTE.dim, warn: PALETTE.amber });
 
-// Colours of one phase in this frame: the crossfade from its previous state, then the amber mix for
+// Colour of one phase in this frame: the crossfade from its previous state, then the amber mix for
 // the work phase while the context warning is up.
-const phaseColors = (id, sample, palette) => {
+const phaseColor = (id, sample, ink) => {
   const { from, to, mix } = sample.phases[id];
-  let colors = palette === PILL ? mixColors(PILL[from], PILL[to], mix) : { fg: lerpColor(INK[from], INK[to], mix) };
-  if (id === "work" && sample.warn > 0) colors = palette === PILL ? mixColors(colors, PILL.warn, sample.warn) : { fg: lerpColor(colors.fg, INK.warn, sample.warn) };
-  return colors;
+  const color = lerpColor(ink[from], ink[to], mix);
+  return id === "work" && sample.warn > 0 ? lerpColor(color, ink.warn, sample.warn) : color;
 };
 
-const phaseGlyph = (id, model, sample, glyphs) => {
-  // The warning glyph swaps on the same frame the ASCII `ctx` text appears, so the row repaints.
-  if (id === "work" && sample.warn > 0.02) return glyphs.warn;
-  return glyphs[sample.phases[id].to] ?? glyphs.todo;
-};
+// The warning glyph swaps on the same frame the ASCII `ctx` text appears, so the row repaints.
+const warned = (id, sample) => id === "work" && sample.warn > 0.02;
 
-const countText = (model) => (model.progress ? ` ${model.progress.done}/${model.progress.total}` : "");
+const segment = (id, priority, spans, joiner = "  ") => (spans && spans.length ? { id, priority, spans, joiner, width: rowWidth(spans) } : null);
 
-const brandSpans = (sample, glyphs, nerd) => {
-  const shimmer = sample.completion?.shimmer ?? null;
-  const reveal = revealText(nerd ? "🔥 LIT" : "(🔥 LIT)", sample.pills[0]);
-  if (reveal === null) return [];
-  if (!nerd) return gradientSpans(reveal, BRAND_STOPS, { shimmer });
-  if (shimmer === null) return pillSpans(reveal, PILL.brand, glyphs);
-  const lit = gradientSpans(reveal, [PILL.brand.fg, PILL.brand.fg], { shimmer }).map((part) => ({ ...part, bg: PILL.brand.bg }));
-  return [span(glyphs.capLeft, { fg: PILL.brand.bg }), ...lit, span(glyphs.capRight, { fg: PILL.brand.bg })];
+// Keeps segments in display order, dropping the highest priority numbers first until the joined
+// row fits `room`; each kept segment after the first is preceded by its own joiner.
+const fitJoined = (segments, room) => {
+  let kept = segments.filter(Boolean);
+  const total = () => kept.reduce((sum, part, index) => sum + part.width + (index > 0 ? textWidth(part.joiner) : 0), 0);
+  while (kept.length > 0 && total() > room) {
+    const worst = kept.reduce((a, b) => (b.priority >= a.priority ? b : a));
+    kept = kept.filter((part) => part !== worst);
+  }
+  return kept;
 };
 
-const barSegment = (model, sample, cells) => {
-  if (!model.progress) return null;
-  const bar = barCells(sample.fill, cells, sample.fillGlow ?? 0).map(({ glyph, color }) => (glyph === "█" ? span(" ", { bg: color }) : span(glyph, { fg: color })));
-  return [
-    ...bar,
-    span("  "),
-    span(String(model.progress.done), { fg: lerpColor(PALETTE.white, PALETTE.cyan, Math.max(sample.flash, sample.fillGlow ?? 0)), bold: true }),
-    span(`/${model.progress.total}`, { fg: PALETTE.dim }),
-  ];
-};
+const joinSegments = (kept, joinerColor) => kept.flatMap((part, index) => (index > 0 ? [span(part.joiner, { fg: joinerColor }), ...part.spans] : part.spans));
 
-const loopSegment = (model, glyphs, suffix = "") => (model.autoloop
-  ? [span(`${glyphs.loop} ${model.autoloop.n}/${model.autoloop.max}`, { fg: PALETTE.violet }), span(` · ${formatDuration(model.autoloop.leftMs)}${suffix}`, { fg: PALETTE.dim })]
-  : null);
+// An edge of the card: `open` and `close` are its corners, `left` its title or figures and
+// `right` the phase indicator, with the rule filling whatever room is left.
+const edgeRow = (open, left, right, close, width, color) => {
+  const tail = right.length ? [span(" "), ...right, span(` ${close}`, { fg: color })] : [span(close, { fg: color })];
+  const fill = Math.max(1, width - textWidth(open) - rowWidth(left) - 1 - rowWidth(tail));
+  return clipRow([span(open, { fg: color }), ...left, span(" "), span("─".repeat(fill), { fg: color }), ...tail], width);
+};
 
-const ctxSegment = (model, sample) => {
-  const warning = model.ctxWarning;
-  if (!warning || sample.warn <= 0.02) return null;
-  return [span(`ctx ${warning.percent}% → ${warning.threshold}%`, { fg: lerpColor(PALETTE.dim, PALETTE.amber, sample.warn), bold: sample.warn > 0.5 })];
+const brandSpans = (sample, glyphs) => {
+  const reveal = revealText("🔥 LIT", sample.pills[0]);
+  if (reveal === null) return [];
+  return pill(litText(reveal, { fg: PILL.ink, bg: PILL.brand, bold: true }, sample.completion?.shimmer ?? null), PILL.brand, glyphs);
+};
+const indicatorSpans = (model, sample, glyphs, accent) => {
+  if (sample.completion) return [span(`DONE ${glyphs.done}`, { fg: PALETTE.green, bold: true })];
+  if (model.idle) return [span("idle", { fg: PALETTE.dim })];
+  const current = PHASES.find((id) => model.phases[id] === "now");
+  if (current) return [span(`${LABELS[current]} ${warned(current, sample) ? glyphs.warn : glyphs.now}`, { fg: phaseColor(current, sample, inkOf(accent)), bold: true })];
+  if (PHASES.every((id) => model.phases[id] === "done") && model.lanes.count === 0) return [span(`DONE ${glyphs.done}`, { fg: PALETTE.green, bold: true })];
+  return [span(`LIVE ${glyphs.now}`, { fg: accent, bold: true })];
 };
 
-const lanesSegment = (model, glyphs) => {
-  if (model.lanes.count === 0) return null;
-  const dots = model.lanes.list.slice(0, 4).map((lane) => span(glyphs.lane, { fg: lane.status === "stalled" ? PALETTE.amber : PALETTE.green }));
-  return [...dots, span(` ${model.lanes.count} ${model.lanes.count === 1 ? "lane" : "lanes"}`, { fg: PALETTE.dim })];
+// ╭─ [🔥 LIT] · <discipline> ──── <PHASE ●> ─╮. On a narrow card the phase indicator goes first,
+// then the discipline shortens, then it goes too.
+const topEdge = (model, sample, { width, glyphs, accent, edge }) => {
+  const brand = brandSpans(sample, glyphs);
+  const right = indicatorSpans(model, sample, glyphs, accent);
+  const name = model.title ?? "ready";
+  const nameStyle = model.idle ? { fg: PALETTE.dim } : { fg: accent, bold: true };
+  const title = (text) => (text ? [span(" · ", { fg: PALETTE.dim }), span(text, nameStyle)] : []);
+  const fixed = textWidth("╭─ ") + rowWidth(brand) + 1 + 1;
+  const withRight = fixed + rowWidth(title(name)) + 1 + rowWidth(right) + textWidth(" ─╮");
+  if (withRight <= width) return edgeRow("╭─ ", [...brand, ...title(name)], right, "─╮", width, edge);
+  const room = width - fixed - textWidth("─╮") - textWidth(" · ");
+  const shown = room >= 4 ? truncateToWidth(name, room) : "";
+  return edgeRow("╭─ ", [...brand, ...title(shown)], [], "─╮", width, edge);
 };
 
-const segment = (id, priority, spans, extra = {}) => (spans && spans.length ? { id, priority, spans, width: rowWidth(spans), ...extra } : null);
+const barSpans = (fraction, sample, cells) => barCells(fraction, cells, sample.fillGlow ?? 0)
+  .map(({ glyph, color }) => (glyph === "█" ? span(" ", { bg: color }) : span(glyph, { fg: color })));
+
+// The right half of the phase row: a context warning, the lanes, the autoloop budget and the
+// progress of the plan or goal, dropped in that priority order when the row is narrow.
+const progressSegment = (model, sample, glyphs, cells) => {
+  if (model.progress) {
+    const label = model.progress.unit === "tasks" ? "tasks" : "goal";
+    return segment("progress", 1, [
+      span(`${label} `, { fg: PALETTE.dim }),
+      ...barSpans(sample.fill, sample, cells),
+      span(" "),
+      span(String(model.progress.done), { fg: lerpColor(PALETTE.white, PALETTE.cyan, Math.max(sample.flash, sample.fillGlow ?? 0)), bold: true }),
+      span(`/${model.progress.total}`, { fg: PALETTE.dim }),
+    ]);
+  }
+  const goal = model.goal;
+  if (!goal) return null;
+  const met = goal.status === "complete";
+  return segment("progress", 1, [
+    span("goal ", { fg: PALETTE.dim }),
+    span(met ? `${glyphs.done} ` : "", { fg: PALETTE.green }),
+    span(`${goal.passed}/${goal.total}`, { fg: met ? PALETTE.green : PALETTE.white, bold: met }),
+  ]);
+};
 
-const assemble = (kept, gap, fitted = {}) => {
-  const row = [];
-  kept.forEach((part, index) => {
-    if (index > 0) row.push(span(" ".repeat(kept[index - 1].trailingSeparator && part.kind === "phase" ? 1 : gap)));
-    let spans = part.spans;
-    if (part.trailingSeparator && kept[index + 1]?.kind !== "phase") spans = spans.slice(0, -1);
-    row.push(...(fitted[part.id] ? fitted[part.id](part.width) : spans));
+// ● PLAN ━━ [WORK] ━━ ○ REVIEW: the active phase is a pill on the accent (amber while the context
+// warning is up), done phases a dim-accent dot and the rest a dim ring. Each form of a label is
+// as wide as the others, so a phase changing state never moves the row.
+const phaseTrack = (model, sample, { glyphs, accent, rail, short }) => {
+  const ink = inkOf(accent);
+  const out = [];
+  PHASES.forEach((id, index) => {
+    const label = short ? LABELS[id][0] : LABELS[id];
+    const state = sample.phases[id].to;
+    const shown = revealText(state === "now" ? label : `${state === "done" ? "●" : "○"} ${label}`, sample.pills[index + 1]);
+    if (shown === null) return;
+    if (out.length) out.push(span(` ${glyphs.rail.repeat(rail)} `, { fg: sample.phases[PHASES[index - 1]].to === "done" ? ink.done : PILL.rail }));
+    if (state === "now") {
+      const fill = model.idle ? lerpColor(phaseColor(id, sample, ink), PILL.muted, 0.5) : phaseColor(id, sample, ink);
+      out.push(...pill([span(shown.slice(0, label.length).padEnd(label.length), { fg: PILL.ink, bg: fill, bold: true })], fill, glyphs));
+    } else {
+      out.push(span(warned(id, sample) ? shown.replace(/^[●○]/u, glyphs.warn) : shown, { fg: phaseColor(id, sample, ink) }));
+    }
   });
-  return row;
+  return out;
 };
 
-const nextSegment = (model) => {
-  if (!model.next) return null;
-  const text = `▸ ${model.next}`;
-  return segment("next", 4, [span(text, { fg: PALETTE.white })], { minWidth: Math.min(12, textWidth(text)) });
+const phaseRow = (model, sample, { inner, glyphs, accent }) => {
+  const variants = [{ rail: 2, short: false }, { rail: 1, short: false }, { rail: 1, short: true }];
+  const tracks = variants.map((variant) => phaseTrack(model, sample, { glyphs, accent, ...variant }));
+  const right = [];
+  if (sample.rest > 0) {
+    const warning = model.ctxWarning && sample.warn > 0.02
+      ? [span(`ctx ${model.ctxWarning.percent}% → ${model.ctxWarning.threshold}%`, { fg: lerpColor(PALETTE.dim, PALETTE.amber, sample.warn), bold: sample.warn > 0.5 })]
+      : null;
+    right.push(segment("ctx", 1, warning));
+    if (model.lanes.count > 0) {
+      const dots = model.lanes.list.slice(0, 4).map((lane) => span(glyphs.lane, { fg: lane.status === "stalled" ? PALETTE.amber : PALETTE.green }));
+      right.push(segment("lanes", 3, [...dots, span(` ${model.lanes.count} ${model.lanes.count === 1 ? "lane" : "lanes"}`, { fg: PALETTE.dim })]));
+    }
+    if (model.autoloop) {
+      right.push(segment("loop", 4, [span(`${glyphs.loop} ${model.autoloop.n}/${model.autoloop.max}`, { fg: PALETTE.violet }), span(` · ${formatDuration(model.autoloop.leftMs)}`, { fg: PALETTE.dim })]));
+    }
+    right.push(progressSegment(model, sample, glyphs, inner >= 70 ? 8 : 5));
+  }
+  const track = tracks.find((candidate) => rowWidth(candidate) + 2 + 10 <= inner) ?? tracks.at(-1);
+  const kept = fitJoined(right, inner - rowWidth(track) - 2);
+  const tail = joinSegments(kept, PALETTE.faint);
+  if (!tail.length) return fitRow(track, inner);
+  return fitRow([...track, span(" ".repeat(Math.max(2, inner - rowWidth(track) - rowWidth(tail)))), ...tail], inner);
 };
 
-const ribbonRow = (model, sample, { columns, glyphs, nerd }) => {
-  const segments = [segment("brand", 0, brandSpans(sample, glyphs, nerd))];
-  ["plan", "work", "review"].forEach((id, index) => {
-    const label = nerd
-      ? `${phaseGlyph(id, model, sample, glyphs)} ${LABELS[id]}${id === "work" ? countText(model) : ""}`
-      : `${LABELS[id]} ${phaseGlyph(id, model, sample, glyphs)}${id === "work" ? countText(model) : ""}`;
-    const text = revealText(label, sample.pills[index + 1]);
-    if (text === null) return;
-    const colors = phaseColors(id, sample, nerd ? PILL : INK);
-    const spans = nerd
-      ? pillSpans(text, colors, glyphs, sample.phases[id].to !== "todo" || id === "work")
-      : [span(text, { fg: colors.fg, bold: sample.phases[id].to === "now" || (id === "work" && sample.warn > 0.5) })];
-    const separator = !nerd && id !== "review";
-    segments.push(segment(id, id === "work" ? 0 : 3, separator ? [...spans, span(` ${glyphs.link}`, { fg: PALETTE.faint })] : spans, { kind: "phase", trailingSeparator: separator }));
-  });
-  if (sample.rest > 0) {
-    const cells = columns >= 110 ? 10 : columns >= 80 ? 7 : 5;
-    segments.push(segment("bar", 2, barSegment(model, sample, cells)));
-    const ctx = ctxSegment(model, sample);
-    segments.push(ctx ? segment("ctx", 1, ctx) : nextSegment(model));
-    segments.push(segment("lanes", 5, lanesSegment(model, glyphs)));
-    segments.push(segment("loop", 6, loopSegment(model, glyphs)));
+const CHIP_TONE = Object.freeze({
+  current: (accent) => ({ fill: accent, text: PILL.ink }),
+  recent: () => ({ fill: PILL.muted, text: PILL.mutedText }),
+});
+
+// One chip pill: the bolt and the skill name, on the accent for this request or muted for an
+// earlier one. A chip that just arrived carries full motion's light along its name, or fills up
+// from the muted pill under subtle; a chip changing state crossfades its colours.
+const chipSpans = (chip, timed, glyphs, accent) => {
+  const to = timed?.to ?? chip.state;
+  const from = timed?.from ?? to;
+  const mix = timed?.mix ?? 1;
+  const arrive = timed?.arrive ?? 1;
+  let fill = lerpColor(CHIP_TONE[from](accent).fill, CHIP_TONE[to](accent).fill, mix);
+  const text = lerpColor(CHIP_TONE[from](accent).text, CHIP_TONE[to](accent).text, mix);
+  if (arrive < 1 && (timed?.shimmer === null || timed?.shimmer === undefined)) fill = lerpColor(PILL.muted, fill, arrive);
+  const bold = to === "current";
+  return pill([
+    span(`${to === "current" ? glyphs.bolt : glyphs.recentBolt} `, { fg: text, bg: fill }),
+    ...litText(chip.id, { fg: text, bg: fill, bold }, timed?.shimmer),
+  ], fill, glyphs);
+};
+
+const mutedPill = (text, glyphs) => pill([span(text, { fg: PALETTE.dim, bg: PILL.muted })], PILL.muted, glyphs);
+
+const chipsRow = (model, sample, { inner, glyphs, accent }) => {
+  const chips = model.skills;
+  if (chips.length === 0) {
+    if (!model.idle && model.next) return fitRow([span("▸ ", { fg: accent }), span(truncateToWidth(model.next, inner - 2), { fg: PALETTE.white })], inner);
+    if (!model.idle) return fitRow([span("no LitFamily skill yet in this request", { fg: PALETTE.dim })], inner);
+    const hints = [
+      [span("no LitFamily skill yet · type ", { fg: PALETTE.dim }), span("lit <task>", { fg: accent }), span(" to start one", { fg: PALETTE.dim })],
+      [span("no skill yet · type ", { fg: PALETTE.dim }), span("lit <task>", { fg: accent })],
+      [span("type ", { fg: PALETTE.dim }), span("lit <task>", { fg: accent })],
+    ];
+    return fitRow(hints.find((hint) => rowWidth(hint) <= inner) ?? hints.at(-1), inner);
+  }
+  const row = inner >= 30 ? [span("skills", { fg: PALETTE.dim })] : [];
+  let shown = 0;
+  for (const chip of chips) {
+    const entry = chipSpans(chip, sample.chips?.[chip.id], glyphs, accent);
+    const gap = row.length ? [span(" ")] : [];
+    const rest = chips.length - shown - 1;
+    const reserve = rest > 0 ? 1 + rowWidth(mutedPill(`+${rest}`, glyphs)) : 0;
+    if (rowWidth(row) + rowWidth(gap) + rowWidth(entry) + reserve > inner) break;
+    row.push(...gap, ...entry);
+    shown += 1;
   }
-  const kept = fitSegments(segments.filter(Boolean), columns, 2);
-  return assemble(kept, 2, { next: (width) => [span(truncateToWidth(`▸ ${model.next}`, width), { fg: PALETTE.white })] });
+  if (shown < chips.length) row.push(...(row.length ? [span(" ")] : []), ...mutedPill(`+${chips.length - shown}`, glyphs));
+  return fitRow(row, inner);
 };
 
-const noticeRow = (sample, columns) => {
-  if (!sample.notice) return null;
+const noticeRow = (sample, inner) => {
   const { data, offset } = sample.notice;
   const tone = TONE[data.tone] ?? TONE.pink;
-  const row = [
+  return fitRow([
     span(" ".repeat(offset)),
     span("▎", { fg: tone.bar }),
     span(` ${tone.icon} ${data.title}`, { fg: tone.title, bold: true }),
     ...(data.detail ? [span(`  · ${data.detail}`, { fg: PALETTE.dim })] : []),
-  ];
-  return clipRow(row, columns);
+  ], inner);
 };
 
 const SPARKS = [".", "+", "*"];
 
-const completionRow = (sample, columns) => {
+const completionRow = (sample, inner) => {
   const completion = sample.completion;
-  if (!completion) return null;
   const glow = completion.embers === null ? 0 : 0.6 * Math.sin(Math.PI * completion.embers);
   const words = [
     span("COMPLETE", { fg: lerpColor(lerpColor(PALETTE.dim, PALETTE.white, completion.title), PALETTE.pinkText, glow), bold: true }),
@@ -224,7 +330,7 @@ const completionRow = (sample, columns) => {
   ];
   const row = [];
   if (completion.embers !== null) {
-    const count = Math.max(0, Math.min(18, Math.floor((columns - rowWidth(words) - 2) / 2)));
+    const count = Math.max(0, Math.min(18, Math.floor((inner - rowWidth(words) - 2) / 2)));
     for (let i = 0; i < count; i += 1) {
       const life = Math.min(1, Math.max(0, completion.embers * 1.6 - i * 0.04));
       const alpha = life <= 0 || life >= 1 ? 0 : Math.sin(life * Math.PI);
@@ -235,32 +341,60 @@ const completionRow = (sample, columns) => {
   } else {
     row.push(span("✦ ", { fg: PALETTE.pink }));
   }
-  return clipRow([...row, ...words], columns);
+  return fitRow([...row, ...words], inner);
 };
 
-const laneEntry = (lane, glyphs) => {
-  const state = lane.status === "stalled"
-    ? { glyph: glyphs.lane, fg: PALETTE.amber, word: "quiet" }
-    : lane.status === "waiting" || lane.status === "idle"
-      ? { glyph: glyphs.idleLane, fg: PALETTE.faint, word: "waiting" }
-      : { glyph: glyphs.lane, fg: PALETTE.green, word: "working" };
-  const elapsed = lane.elapsedMs === null ? "" : ` ${formatDuration(lane.elapsedMs)}`;
-  return [span(state.glyph, { fg: state.fg }), span(` ${lane.name}`, { fg: PALETTE.white }), span(`  ${state.word}${elapsed}`, { fg: PALETTE.dim })];
+const levelColor = (percent) => (percent >= 90 ? HUD.red : percent >= 70 ? HUD.yellow : HUD.green);
+
+// ╰─ ctx 42% ▰▰▱▱▱ · 5h 31% · git main ───╯, or a warning first when one is up. The branch goes
+// first on a narrow card, then the rate window, then the context bar.
+const bottomEdge = (model, { width, glyphs, accent, edge }) => {
+  const { context, rate, git } = model.figures;
+  const warning = model.warnings[0];
+  const segments = [];
+  if (warning) {
+    const color = warning.tone === "red" ? PALETTE.red : PALETTE.amber;
+    segments.push(segment("warning", 0, [span(`${warning.tone === "red" ? glyphs.fail : "⚠"} ${warning.subject}`, { fg: color, bold: true }), span(` ${warning.text}`, { fg: color })], " · "));
+  }
+  if (context !== null) {
+    segments.push(segment("ctx", 1, [span("ctx ", { fg: PALETTE.dim }), span(`${context}%`, { fg: accent })], " · "));
+    const filled = Math.max(0, Math.min(5, Math.round(context / 20)));
+    segments.push(segment("ctxbar", 2, [span("▰".repeat(filled), { fg: accent }), span("▱".repeat(5 - filled), { fg: HUD.empty })], " "));
+  }
+  if (rate) segments.push(segment("rate", 3, [span(`${rate.label} `, { fg: PALETTE.dim }), span(`${rate.percent}%`, { fg: levelColor(rate.percent) })], " · "));
+  if (git) segments.push(segment("git", 4, [span(`${glyphs.branch} `, { fg: PALETTE.dim }), span(git, { fg: accent })], " · "));
+  const room = width - textWidth("╰─ ") - 1 - 1 - textWidth("─╯");
+  let kept = fitJoined(segments, room);
+  if (kept[0]?.id === "ctxbar") kept = kept.slice(1);
+  if (kept.length === 0 && warning) kept = [{ ...segments[0], spans: clipRow(segments[0].spans, room) }];
+  return edgeRow("╰─ ", joinSegments(kept, edge), [], "─╯", width, edge);
 };
 
-const listRow = (label, entries, columns) => {
-  const row = [span(`${label} `, { fg: PALETTE.dim })];
-  let shown = 0;
-  for (const entry of entries) {
-    const gap = shown > 0 ? [span("    ")] : [];
-    const rest = entries.length - shown - 1;
-    const reserve = rest > 0 ? textWidth(`  +${rest}`) : 0;
-    if (rowWidth(row) + rowWidth(gap) + rowWidth(entry) + reserve > columns) break;
-    row.push(...gap, ...entry);
-    shown += 1;
-  }
-  if (shown < entries.length) row.push(span(`  +${entries.length - shown}`, { fg: PALETTE.dim }));
-  return clipRow(row, columns);
+const edgeColor = (model, accent) => {
+  if (model.warnings.some(({ tone }) => tone === "red")) return PALETTE.red;
+  if (model.warnings.length) return PALETTE.amber;
+  return lerpColor(PALETTE.faint, accent, model.idle ? 0.35 : 0.6);
+};
+
+/**
+ * The card for one frame: `{ mode: "card", border, width, rows }`, always four rows (top edge,
+ * phase row, chips row, bottom edge), each exactly `width` cells: the terminal's columns up to
+ * CARD_MAX. `accent` is the status line's accent colour (settings.mjs accentFromSettings).
+ */
+export const composeBand = (model, sample, { columns, glyphs: glyphMode = "basic", accent = PALETTE.accent }) => {
+  const glyphs = glyphSet(glyphMode);
+  const width = Math.max(12, Math.min(CARD_MAX, columns));
+  const inner = width - 4;
+  const edge = edgeColor(model, accent);
+  const side = (row) => [span("│ ", { fg: edge }), ...row, span(" │", { fg: edge })];
+  const options = { width, inner, glyphs, accent, edge };
+  const middle = sample.completion ? completionRow(sample, inner) : sample.notice ? noticeRow(sample, inner) : chipsRow(model, sample, options);
+  return {
+    mode: "card",
+    border: edge,
+    width,
+    rows: [topEdge(model, sample, options), side(phaseRow(model, sample, options)), side(middle), bottomEdge(model, options)],
+  };
 };
 
 const GATE_STYLE = Object.freeze({
@@ -274,64 +408,6 @@ const gateEntries = (gates, glyphs) => gates.map((gate) => {
   return [span(style.glyph, { fg: style.fg }), span(` ${gate.label}`, { fg: PALETTE.dim })];
 });
 
-const warningRow = (warning, glyphs, columns) => {
-  const color = warning.tone === "red" ? PALETTE.red : PALETTE.amber;
-  return clipRow([
-    span(warning.tone === "red" ? glyphs.fail : "⚠", { fg: color }),
-    span(` ${warning.subject}`, { fg: PALETTE.white }),
-    span(` ${warning.text}`, { fg: color }),
-    span(` — ${warning.hint}`, { fg: PALETTE.dim }),
-  ], columns);
-};
-
-const phaseLine = (model, sample, { columns, glyphs }) => {
-  const railLength = columns >= 100 ? 6 : columns >= 80 ? 3 : 1;
-  const segments = [segment("brand", 0, sample.pills[0] > 0 ? gradientSpans(revealText("🔥 L I T", sample.pills[0]), BRAND_STOPS, { shimmer: sample.completion?.shimmer ?? null }) : [])];
-  const phaseSpans = [];
-  ["plan", "work", "review"].forEach((id, index) => {
-    const text = revealText(`${phaseGlyph(id, model, sample, glyphs)} ${LABELS[id]}`, sample.pills[index + 1]);
-    if (text === null) return;
-    const colors = phaseColors(id, sample, INK);
-    if (phaseSpans.length) {
-      const leftDone = sample.phases[["plan", "work", "review"][index - 1]].to === "done";
-      phaseSpans.push(span(` ${glyphs.rail.repeat(railLength)} `, { fg: leftDone ? PALETTE.green : PALETTE.faint }));
-    }
-    phaseSpans.push(span(text, { fg: colors.fg, bold: sample.phases[id].to === "now" }));
-  });
-  segments.push(segment("phases", 1, phaseSpans));
-  if (sample.rest > 0) {
-    segments.push(segment("bar", 2, barSegment(model, sample, columns >= 90 ? 14 : 8)));
-    segments.push(segment("ctx", 1, ctxSegment(model, sample)));
-    segments.push(segment("loop", 4, loopSegment(model, glyphs, " left")));
-  }
-  return assemble(fitSegments(segments.filter(Boolean), columns, 3), 3);
-};
-
-/**
- * The whole band for one frame: `{ mode, border, rows }`. `mode` is `card` (a round-bordered box,
- * `columns` minus its border and padding inside) when two or more lanes run or a warning needs a
- * row of its own, else `ribbon`.
- */
-export const composeBand = (model, sample, { columns, glyphs: glyphMode = "basic" }) => {
-  const glyphs = glyphSet(glyphMode);
-  const nerd = glyphMode === "nerd";
-  const extras = [noticeRow(sample, columns), completionRow(sample, columns)].filter(Boolean);
-  if (!model.card) {
-    return { mode: "ribbon", border: null, rows: [ribbonRow(model, sample, { columns, glyphs, nerd }), ...extras] };
-  }
-  const inner = Math.max(10, columns - 4);
-  const rows = [phaseLine(model, sample, { columns: inner, glyphs })];
-  if (sample.rest > 0) {
-    if (model.next) rows.push(clipRow([span("next  ", { fg: PALETTE.dim }), span(truncateToWidth(model.next, inner - 6), { fg: PALETTE.white })], inner));
-    if (model.lanes.count > 0) rows.push(listRow("lanes", model.lanes.list.map((lane) => laneEntry(lane, glyphs)), inner));
-    if (model.gates.length > 0) rows.push(listRow("gates", gateEntries(model.gates, glyphs), inner));
-    for (const warning of model.warnings) rows.push(warningRow(warning, glyphs, inner));
-  }
-  rows.push(...[noticeRow(sample, inner), completionRow(sample, inner)].filter(Boolean));
-  const border = model.warnings.some(({ tone }) => tone === "red") ? PALETTE.red : model.warnings.length ? PALETTE.amber : PALETTE.cardBorder;
-  return { mode: "card", border, rows };
-};
-
 /** Rows for the evidence pane's tab (`goal`, `lanes` or `gates`), fitted to `columns`. */
 export const composeEvidence = (evidence, tab, { columns, glyphs: glyphMode = "basic" }) => {
   const glyphs = glyphSet(glyphMode);

package/plugins/litclaude/lib/mod/layout.mjs

@@ -51,26 +51,3 @@ export const truncateToWidth = (text, cells, ellipsis = "…") => {
   }
   return `${out.trimEnd()}${ellipsis}`;
 };
-
-// Segments arrive in display order with a priority (lower numbers outlast higher ones) and an
-// optional `minWidth`, which marks the one flexible segment (the next task) that may shrink. Fitting
-// drops the highest priority numbers until the row fits with that segment at its minimum, then lets
-// it grow back into whatever room is left. Returns the kept segments, in display order, with widths.
-export const fitSegments = (segments, columns, gap = 1) => {
-  let kept = segments.map((segment) => ({ ...segment, natural: segment.width }));
-  const isFlexible = (segment) => Number.isFinite(segment.minWidth);
-  const total = () => kept.reduce((sum, segment) => sum + (isFlexible(segment) ? Math.min(segment.minWidth, segment.natural) : segment.width), 0)
-    + Math.max(0, kept.length - 1) * gap;
-  while (kept.length > 0 && total() > columns) {
-    const worst = kept.reduce((a, b) => (b.priority >= a.priority ? b : a));
-    kept = kept.filter((segment) => segment !== worst);
-  }
-  let spare = columns - total();
-  return kept.map(({ natural, ...segment }) => {
-    if (!isFlexible(segment)) return segment;
-    const base = Math.min(segment.minWidth, natural);
-    const width = Math.min(natural, base + spare);
-    spare -= width - base;
-    return { ...segment, width };
-  });
-};