@litfamily/litclaude 1.0.21 → 1.0.22

package/plugins/litclaude/lib/lit-plan-persistence.mjs

@@ -6,7 +6,7 @@
 import { existsSync, mkdirSync, readdirSync, readFileSync, renameSync, rmSync, statSync, writeFileSync } from "node:fs";
 import { join, resolve } from "node:path";
 
-import { resolveProjectStateRoot } from "./project-state-root.mjs";
+import { ensureStateDirIgnored, resolveProjectStateRoot } from "./project-state-root.mjs";
 import { findProjectRoot } from "./rules/discovery.mjs";
 
 export const LIT_PLAN_MAX_BLOCKS = 2;
@@ -38,6 +38,7 @@ const readTurn = (cwd) => {
 const writeTurn = (cwd, state) => {
   const target = litPlanTurnPath(cwd);
   mkdirSync(join(target, ".."), { recursive: true });
+  ensureStateDirIgnored(target);
   const tmp = `${target}.tmp`;
   writeFileSync(tmp, JSON.stringify(state));
   renameSync(tmp, target);

package/plugins/litclaude/lib/litgoal/autoloop.mjs

@@ -5,6 +5,7 @@
 // than risk a runaway loop. State lives at `.litclaude/litgoal/autoloop.json`.
 import { existsSync, mkdirSync, readFileSync, renameSync, writeFileSync } from "node:fs";
 import { join } from "node:path";
+import { ensureStateDirIgnored } from "../project-state-root.mjs";
 import { appendLitgoalLedger } from "./ledger.mjs";
 import { litgoalGoalsPath, litgoalLedgerPath, litgoalLockDir, litgoalStateDir } from "./paths.mjs";
 import { readLitgoalState, withLitgoalLock, writeLitgoalState } from "./state.mjs";
@@ -40,6 +41,7 @@ export const readAutoloopState = (cwd = process.cwd()) => {
 export const writeAutoloopState = (cwd, state) => {
   const dir = litgoalStateDir(cwd);
   mkdirSync(dir, { recursive: true });
+  ensureStateDirIgnored(dir);
   const target = litgoalAutoloopPath(cwd);
   const tmp = `${target}.tmp`;
   writeFileSync(tmp, JSON.stringify(state));

package/plugins/litclaude/lib/litgoal/cli.mjs

@@ -1,5 +1,6 @@
 import { mkdirSync, writeFileSync } from "node:fs";
 import { dirname } from "node:path";
+import { ensureStateDirIgnored } from "../project-state-root.mjs";
 import { appendLitgoalLedger } from "./ledger.mjs";
 import {
   litgoalBriefPath,
@@ -193,6 +194,7 @@ const createGoals = (cwd, args) => {
     };
 
     mkdirSync(dirname(litgoalBriefPath(cwd)), { recursive: true });
+    ensureStateDirIgnored(litgoalBriefPath(cwd));
     writeFileSync(litgoalBriefPath(cwd), `${brief}\n`);
     writeLitgoalState(litgoalGoalsPath(cwd), state);
     // Fresh autoloop run -> reset the durable iteration counter so prior caps don't carry over.

package/plugins/litclaude/lib/litgoal/ledger.mjs

@@ -1,8 +1,11 @@
 import { appendFileSync, closeSync, fsyncSync, mkdirSync, openSync } from "node:fs";
 import { dirname } from "node:path";
 
+import { ensureStateDirIgnored } from "../project-state-root.mjs";
+
 export const appendLitgoalLedger = (path, entry) => {
   mkdirSync(dirname(path), { recursive: true });
+  ensureStateDirIgnored(path);
   const record = {
     timestamp: new Date().toISOString(),
     ...entry,

package/plugins/litclaude/lib/litgoal/state.mjs

@@ -1,6 +1,8 @@
 import { closeSync, existsSync, fsyncSync, mkdirSync, openSync, readFileSync, renameSync, rmSync, writeFileSync } from "node:fs";
 import { dirname } from "node:path";
 
+import { ensureStateDirIgnored } from "../project-state-root.mjs";
+
 export class LitgoalStateError extends Error {
   constructor(message, status = 65) {
     super(message);
@@ -21,6 +23,7 @@ export const readLitgoalState = (path, fallback = {}) => {
 export const writeLitgoalState = (path, state) => {
   const dir = dirname(path);
   mkdirSync(dir, { recursive: true });
+  ensureStateDirIgnored(dir);
   const tmpPath = `${path}.${process.pid}.${Date.now()}.tmp`;
   writeFileSync(tmpPath, `${JSON.stringify(state, null, 2)}\n`);
   // Flush tmp file data to disk before rename so the rename is durable.
@@ -46,6 +49,7 @@ const sleepSync = (milliseconds) => {
 
 export const withLitgoalLock = (lockDir, fn) => {
   mkdirSync(dirname(lockDir), { recursive: true });
+  ensureStateDirIgnored(lockDir);
   const startedAt = Date.now();
   while (true) {
     try {

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

@@ -0,0 +1,378 @@
+// 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.
+//
+// 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.
+
+import { fitSegments, textWidth, truncateToWidth } from "./layout.mjs";
+import { barCells, gradientAt, lerpColor } from "./motion.mjs";
+import { glyphSet } from "./settings.mjs";
+import { formatDuration } from "./view.mjs";
+
+export const PALETTE = Object.freeze({
+  pink: "#ff2d95",
+  pinkText: "#ff6fae",
+  orange: "#ff6337",
+  cyan: "#00e5ff",
+  accent: "#5fd7ff",
+  green: "#6bdb8f",
+  amber: "#ffaf3c",
+  red: "#ff5f5f",
+  violet: "#b48cff",
+  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 });
+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 span = (text, style = {}) => ({ text, ...style });
+export const rowWidth = (row) => row.reduce((sum, part) => sum + textWidth(part.text), 0);
+export const rowText = (row) => row.map(({ text }) => text).join("");
+
+// Cuts a row to `cells`, splitting the span that crosses the edge.
+export const clipRow = (row, cells) => {
+  const out = [];
+  let room = cells;
+  for (const part of row) {
+    if (room <= 0) break;
+    const width = textWidth(part.text);
+    if (width <= room) {
+      out.push(part);
+      room -= width;
+    } else {
+      out.push({ ...part, text: truncateToWidth(part.text, room, "") });
+      room = 0;
+    }
+  }
+  return out;
+};
+
+// 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.
+export const revealText = (label, reveal) => {
+  if (!(reveal > 0)) return null;
+  const chars = [...label];
+  const count = Math.max(1, Math.round(reveal * chars.length));
+  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 } = {}) => {
+  const chars = [...text];
+  const visible = chars.filter((ch) => ch.trim()).length;
+  let k = 0;
+  return chars.map((ch) => {
+    if (!ch.trim()) return span(ch);
+    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 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 })] : []),
+];
+
+const mixColors = (a, b, t) => ({ bg: lerpColor(a.bg, b.bg, t), fg: lerpColor(a.fg, b.fg, t) });
+
+// Colours 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 { 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 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;
+};
+
+const countText = (model) => (model.progress ? ` ${model.progress.done}/${model.progress.total}` : "");
+
+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 })];
+};
+
+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 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);
+
+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 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 })];
+};
+
+const segment = (id, priority, spans, extra = {}) => (spans && spans.length ? { id, priority, spans, width: rowWidth(spans), ...extra } : null);
+
+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));
+  });
+  return row;
+};
+
+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 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 kept = fitSegments(segments.filter(Boolean), columns, 2);
+  return assemble(kept, 2, { next: (width) => [span(truncateToWidth(`▸ ${model.next}`, width), { fg: PALETTE.white })] });
+};
+
+const noticeRow = (sample, columns) => {
+  if (!sample.notice) return null;
+  const { data, offset } = sample.notice;
+  const tone = TONE[data.tone] ?? TONE.pink;
+  const row = [
+    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);
+};
+
+const SPARKS = [".", "+", "*"];
+
+const completionRow = (sample, columns) => {
+  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 }),
+    span(` · ${completion.data.detail}`, { fg: lerpColor(PALETTE.dim, PALETTE.green, completion.detail) }),
+  ];
+  const row = [];
+  if (completion.embers !== null) {
+    const count = Math.max(0, Math.min(18, Math.floor((columns - 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);
+      const glyph = alpha < 0.05 ? " " : SPARKS[Math.min(2, Math.floor(alpha * 3))];
+      row.push(span(glyph, { fg: lerpColor(PALETTE.faint, i % 3 ? PALETTE.pink : PALETTE.amber, alpha) }), span(" "));
+    }
+    row.push(span("  "));
+  } else {
+    row.push(span("✦ ", { fg: PALETTE.pink }));
+  }
+  return clipRow([...row, ...words], columns);
+};
+
+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 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 GATE_STYLE = Object.freeze({
+  ok: (glyphs) => ({ glyph: glyphs.done, fg: PALETTE.green }),
+  pending: () => ({ glyph: "…", fg: PALETTE.amber }),
+  fail: (glyphs) => ({ glyph: glyphs.fail, fg: PALETTE.red }),
+});
+
+const gateEntries = (gates, glyphs) => gates.map((gate) => {
+  const style = GATE_STYLE[gate.state](glyphs);
+  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);
+  const rows = [];
+  const line = (...parts) => rows.push(clipRow(parts, columns));
+  if (tab === "lanes") {
+    if (evidence.lanes.length === 0) line(span("No subagents in this session.", { fg: PALETTE.dim }));
+    for (const lane of evidence.lanes) {
+      const color = lane.status === "failed" ? PALETTE.red : lane.status === "running" ? PALETTE.green : PALETTE.dim;
+      line(span(`${lane.status === "failed" ? glyphs.fail : glyphs.lane} `, { fg: color }), span(lane.name, { fg: PALETTE.white }), span(`  ${lane.type} · ${lane.status}${lane.quiet ? ` · quiet ${lane.quiet}` : ""}`, { fg: PALETTE.dim }));
+    }
+    return rows;
+  }
+  if (tab === "gates") {
+    if (evidence.work) line(span("plan  ", { fg: PALETTE.dim }), span(`${evidence.work.plan ?? "plan"} · ${evidence.work.done}/${evidence.work.total}`, { fg: PALETTE.white }));
+    if (evidence.gates.length === 0) line(span("No gate is armed in this session.", { fg: PALETTE.dim }));
+    for (const entry of gateEntries(evidence.gates, glyphs)) line(...entry);
+    if (evidence.icons) line(span("icons ", { fg: PALETTE.dim }), span(evidence.icons, { fg: PALETTE.dim }));
+    return rows;
+  }
+  const goal = evidence.goal;
+  if (!goal) {
+    line(span("No litgoal goal in this project for this session.", { fg: PALETTE.dim }));
+  } else {
+    line(span("goal  ", { fg: PALETTE.dim }), span(goal.objective, { fg: PALETTE.white, bold: true }), span(`  ${goal.status}`, { fg: PALETTE.dim }));
+    line(span(""));
+    for (const criterion of goal.criteria) {
+      const mark = criterion.status === "pass" ? [glyphs.done, PALETTE.green] : criterion.status === "fail" || criterion.status === "blocked" ? [glyphs.fail, PALETTE.red] : ["·", PALETTE.faint];
+      const tail = `  ${criterion.ago}`;
+      const description = truncateToWidth(criterion.description, Math.max(8, columns - textWidth(criterion.id) - textWidth(tail) - 5));
+      line(span(`${mark[0]} `, { fg: mark[1] }), span(criterion.id, { fg: PALETTE.white }), span(`  ${description}`, { fg: PALETTE.dim }), span(tail, { fg: PALETTE.dim }));
+    }
+    for (const blocker of goal.blockers) line(span(`${glyphs.flag} `, { fg: PALETTE.amber }), span(blocker, { fg: PALETTE.amber }));
+    if (goal.reviewBlocked) line(span(`${glyphs.flag} `, { fg: PALETTE.amber }), span("review: blocked", { fg: PALETTE.amber }));
+  }
+  if (evidence.timeline.length) {
+    line(span(""));
+    for (const entry of evidence.timeline) {
+      const color = entry.event.startsWith("evidence") ? PALETTE.accent : entry.event.startsWith("checkpoint") ? PALETTE.violet : PALETTE.green;
+      line(span(entry.ago.padEnd(10), { fg: PALETTE.dim }), span(entry.event.padEnd(20), { fg: color }), span(entry.detail, { fg: PALETTE.dim }));
+    }
+  }
+  return rows;
+};

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

@@ -0,0 +1,76 @@
+// Terminal cell arithmetic for the LIT band. The band is laid out by LitClaude itself rather than
+// left to wrap, so every width here is in terminal cells: Hangul, CJK and emoji take two, combining
+// marks and variation selectors none. Pure functions only; the mod runs them inside Claude Code and
+// the tests run them under Node.
+
+const ZERO_WIDTH = /[\p{Mn}\p{Me}​-‏︀-️]/u;
+const EMOJI = /\p{Emoji_Presentation}/u;
+
+const isWide = (code) =>
+  (code >= 0x1100 && code <= 0x115f)
+  || (code >= 0x2e80 && code <= 0x303e)
+  || (code >= 0x3041 && code <= 0x33ff)
+  || (code >= 0x3400 && code <= 0x4dbf)
+  || (code >= 0x4e00 && code <= 0x9fff)
+  || (code >= 0xa000 && code <= 0xa4cf)
+  || (code >= 0xa960 && code <= 0xa97f)
+  || (code >= 0xac00 && code <= 0xd7a3)
+  || (code >= 0xf900 && code <= 0xfaff)
+  || (code >= 0xfe30 && code <= 0xfe4f)
+  || (code >= 0xff00 && code <= 0xff60)
+  || (code >= 0xffe0 && code <= 0xffe6)
+  || (code >= 0x20000 && code <= 0x3fffd);
+
+export const charWidth = (ch) => {
+  const code = ch.codePointAt(0) ?? 0;
+  if (code < 0x20 || (code >= 0x7f && code < 0xa0)) return 0;
+  if (ZERO_WIDTH.test(ch)) return 0;
+  if (EMOJI.test(ch) || isWide(code)) return 2;
+  return 1;
+};
+
+export const textWidth = (text) => {
+  let width = 0;
+  for (const ch of String(text)) width += charWidth(ch);
+  return width;
+};
+
+export const truncateToWidth = (text, cells, ellipsis = "…") => {
+  const value = String(text);
+  if (cells <= 0) return "";
+  if (textWidth(value) <= cells) return value;
+  const room = cells - textWidth(ellipsis);
+  if (room <= 0) return ellipsis.slice(0, cells);
+  let out = "";
+  let width = 0;
+  for (const ch of value) {
+    const w = charWidth(ch);
+    if (width + w > room) break;
+    out += ch;
+    width += w;
+  }
+  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 };
+  });
+};

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

@@ -0,0 +1,101 @@
+// Motion vocabulary for the LIT band: easing curves, the approved timings, animated channels and
+// colour mixing. Entrances pop with ease-out-back, fills and colour changes run ease-in-out, exits
+// accelerate with ease-in. A channel is plain data ({ from, to, at, dur }) sampled against the
+// surface's frame clock, so the band module keeps no timers beyond the frames it is animating.
+
+export const EASE = Object.freeze({
+  linear: (x) => x,
+  outCubic: (x) => 1 - (1 - x) ** 3,
+  inCubic: (x) => x ** 3,
+  inOutCubic: (x) => (x < 0.5 ? 4 * x ** 3 : 1 - (-2 * x + 2) ** 3 / 2),
+  outBack: (x) => 1 + 2.7 * (x - 1) ** 3 + 1.7 * (x - 1) ** 2,
+});
+
+// Milliseconds. The user approved this faster set in the motion preview; `completion` bounds the
+// whole finish moment (shimmer plus embers) and `frame` is the redraw interval while animating.
+export const TIMINGS = Object.freeze({
+  stagger: 60,
+  entry: 160,
+  fill: 300,
+  flash: 400,
+  noticeIn: 220,
+  noticeOut: 150,
+  noticeHold: 4000,
+  crossfade: 140,
+  shimmer: 400,
+  embers: 1000,
+  completion: 1200,
+  exit: 150,
+  frame: 33,
+});
+
+// full: the approved motion. subtle: no overshoot, no shimmer or embers, three quarters the time.
+// off: every duration is zero, so the band draws its final frame and never starts a frame timer.
+export const motionProfile = (mode) => {
+  if (mode === "off") {
+    return { mode, duration: () => 0, enterEase: EASE.linear, noticeEase: EASE.linear, shimmer: false, embers: false };
+  }
+  if (mode === "subtle") {
+    return { mode, duration: (ms) => Math.round(ms * 0.75), enterEase: EASE.outCubic, noticeEase: EASE.outCubic, shimmer: false, embers: false };
+  }
+  return { mode: "full", duration: (ms) => ms, enterEase: EASE.outBack, noticeEase: EASE.outBack, shimmer: true, embers: true };
+};
+
+export const clamp01 = (x) => (x <= 0 ? 0 : x >= 1 ? 1 : x);
+
+// Progress through a window that opens at `at` and lasts `dur`; a zero-length window is complete.
+export const phase = (now, at, dur) => (dur <= 0 ? (now >= at ? 1 : 0) : clamp01((now - at) / dur));
+
+export const still = (value) => ({ from: value, to: value, at: 0, dur: 0 });
+
+export const sample = (channel, now, ease = EASE.inOutCubic) =>
+  channel.from + (channel.to - channel.from) * ease(phase(now, channel.at, channel.dur));
+
+export const retarget = (channel, to, now, dur) => {
+  if (channel.to === to) return channel;
+  const from = sample(channel, now);
+  return from === to ? still(to) : { from, to, at: now, dur };
+};
+
+export const isSettled = (channel, now) => channel.from === channel.to || now >= channel.at + channel.dur;
+
+const hexToRgb = (hex) => {
+  const value = String(hex).replace(/^#/u, "");
+  return [0, 2, 4].map((i) => Number.parseInt(value.slice(i, i + 2), 16) || 0);
+};
+
+export const lerpColor = (a, b, t) => {
+  const from = hexToRgb(a);
+  const to = hexToRgb(b);
+  const k = clamp01(t);
+  return `#${from.map((v, i) => Math.round(v + (to[i] - v) * k).toString(16).padStart(2, "0")).join("")}`;
+};
+
+export const gradientAt = (stops, position) => {
+  if (stops.length === 1) return lerpColor(stops[0], stops[0], 0);
+  const scaled = clamp01(position) * (stops.length - 1);
+  const index = Math.min(stops.length - 2, Math.floor(scaled));
+  return lerpColor(stops[index], stops[index + 1], scaled - index);
+};
+
+export const BAR_STOPS = Object.freeze(["#ff2d95", "#00e5ff"]);
+export const BAR_TRACK = "#30363d";
+
+// A bar of `cells` cells filled to `fraction`. Whole cells take the pink-to-cyan gradient; the
+// cell the fill is inside fades from the track colour to its gradient colour by how far it is
+// filled, so the bar moves continuously in colour rather than in eighth-cell glyphs (a glyph-only
+// change is not repainted inside a Claude Code Client region). While the bar moves, `glow` (0 to 1)
+// brightens that leading cell. Every filled or fading cell is a solid `█`; the rest is the track.
+export const barCells = (fraction, cells, glow = 0) => {
+  const filled = clamp01(fraction) * cells;
+  const full = Math.floor(filled + 1e-9);
+  const part = full < cells ? filled - full : 0;
+  const head = part > 1e-6 ? full : full - 1;
+  const gradient = (i) => gradientAt(BAR_STOPS, cells <= 1 ? 0 : i / (cells - 1));
+  const shine = (i, color) => (i === head && glow > 0 ? lerpColor(color, "#ffffff", glow * 0.7) : color);
+  return Array.from({ length: cells }, (_, i) => {
+    if (i < full) return { glyph: "█", color: shine(i, gradient(i)) };
+    if (i === full && part > 1e-6) return { glyph: "█", color: shine(i, lerpColor(BAR_TRACK, gradient(i), part)) };
+    return { glyph: "░", color: BAR_TRACK };
+  });
+};

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

@@ -0,0 +1,24 @@
+// Draws composed rows (frame.mjs) with a surface's element table: one row Box of Text spans per
+// line, inside a round-bordered card when the frame asks for one. It calls the element constructors
+// directly, so the band's surface module, the mod's static fallback and the tests share it.
+
+const textProps = (part) => {
+  const props = { children: part.text, wrap: "truncate-end" };
+  if (part.fg) props.color = part.fg;
+  if (part.bg) props.backgroundColor = part.bg;
+  if (part.bold) props.bold = true;
+  return props;
+};
+
+export const renderRows = ({ Box, Text }, rows) =>
+  rows.map((row) => {
+    const parts = row.filter(({ text }) => text.length > 0);
+    return Box({ flexDirection: "row", children: parts.length ? parts.map((part) => Text(textProps(part))) : [Text({ children: " " })] });
+  });
+
+export const renderBand = (elements, frame) => {
+  const children = renderRows(elements, frame.rows);
+  return frame.mode === "card"
+    ? elements.Box({ flexDirection: "column", borderStyle: "round", borderColor: frame.border, paddingX: 1, children })
+    : elements.Box({ flexDirection: "column", children });
+};