@litfamily/litopencode 1.0.19 → 1.0.20

package/CHANGELOG.md

@@ -5,6 +5,10 @@ are tracked separately from this product history.
 
 ## Unreleased
 
+## 1.0.20 - 2026-10-12
+
+- The band along the bottom of OpenCode's main screen is now a small card that stays on screen for the whole session. The top edge shows LIT, the current workflow and its phase. The first row shows PLAN ━ WORK ━ REVIEW with the goal and the next task. The second row shows a chip for each LitOpenCode skill that ran: skills used by the current request are bright and get a short shine as they appear, then dim into a recent list when the answer is done, and extra chips fold into `+N`. The bottom edge shows context use, elapsed time and the git branch. Before you use lit in a session, the card shows the project's last goal. `band: false` still hides it and `band: { card: true }` still adds the detail card.
+
 ## 1.0.19 - 2026-10-11
 
 - The README is shorter for first-time readers. It says what LitOpenCode does, how to install it and what to type first, and the detail now lives in docs pages (guide, skills, screens and brand) in English and Korean. The GitHub page also plays a short film of a real session.

package/README-Ko-KR.md

@@ -1,13 +1,13 @@
-<p align="center"><picture><source media="(prefers-reduced-motion: reduce)" srcset="https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.19/docs/assets/cover-motion-still.webp" /><img src="https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.19/docs/assets/cover-motion.webp" width="100%" alt="LitFamily 모션 커버: 다섯 로봇 패널이 차례로 켜지고, LitOpenCode 로봇의 눈과 테두리가 빛난 뒤 LITFAMILY와 KEEP THE WORK LIT. 문구가 밝아지는 영상" /></picture></p>
+<p align="center"><picture><source media="(prefers-reduced-motion: reduce)" srcset="https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.20/docs/assets/cover-motion-still.webp" /><img src="https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.20/docs/assets/cover-motion.webp" width="100%" alt="LitFamily 모션 커버: 다섯 로봇 패널이 차례로 켜지고, LitOpenCode 로봇의 눈과 테두리가 빛난 뒤 LITFAMILY와 KEEP THE WORK LIT. 문구가 밝아지는 영상" /></picture></p>
 
 # LitOpenCode
 
 **LitOpenCode는 OpenCode용 워크플로 플러그인입니다. 프롬프트에 `lit`만 붙이면 계획하고, 만들고, 확인하고, 기록까지 남겨서 다음 세션이 어디서 멈췄는지 바로 압니다.**
 
 <p align="center">
-<a href="https://www.npmjs.com/package/@litfamily/litopencode"><img src="https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.19/docs/assets/readme/badge-version.svg" alt="1.0.19" /></a>
+<a href="https://www.npmjs.com/package/@litfamily/litopencode"><img src="https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.20/docs/assets/readme/badge-version.svg" alt="1.0.20" /></a>
 <a href="https://www.npmjs.com/package/@litfamily/litopencode"><img src="https://img.shields.io/npm/dm/@litfamily/litopencode?label=downloads&color=D7F75B" alt="월간 npm 다운로드 수" /></a>
-<a href="https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.19/LICENSE"><img src="https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.19/docs/assets/readme/badge-license.svg" alt="MIT 라이선스" /></a>
+<a href="https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.20/LICENSE"><img src="https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.20/docs/assets/readme/badge-license.svg" alt="MIT 라이선스" /></a>
 <a href="https://github.com/wjgoarxiv/litopencode"><img src="https://img.shields.io/github/stars/wjgoarxiv/litopencode?style=social" alt="GitHub 스타" /></a>
 </p>
 
@@ -57,9 +57,9 @@ npm uninstall -g @litfamily/litopencode
 ## 더 보기
 
 - [GitHub의 사용 안내](https://github.com/wjgoarxiv/litopencode/blob/main/docs/guide-Ko-KR.md): 설치 옵션, 자동 인수인계, 문제 해결, 제거
-- [워크플로 상세 안내](https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.19/docs/reference-Ko-KR.md) · [English reference](https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.19/docs/reference.md)
-- [마이그레이션 안내](https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.19/docs/migration.md) · [Changelog](https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.19/CHANGELOG.md) · [개인정보와 네트워크 동작](https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.19/docs/privacy.md)
-- [LitFamily 허브](https://github.com/wjgoarxiv/litfamily) · [MIT 라이선스](https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.19/LICENSE) · [ASCII 글꼴 라이선스](https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.19/docs/assets/readme/JetBrainsMono-OFL.txt)
+- [워크플로 상세 안내](https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.20/docs/reference-Ko-KR.md) · [English reference](https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.20/docs/reference.md)
+- [마이그레이션 안내](https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.20/docs/migration.md) · [Changelog](https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.20/CHANGELOG.md) · [개인정보와 네트워크 동작](https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.20/docs/privacy.md)
+- [LitFamily 허브](https://github.com/wjgoarxiv/litfamily) · [MIT 라이선스](https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.20/LICENSE) · [ASCII 글꼴 라이선스](https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.20/docs/assets/readme/JetBrainsMono-OFL.txt)
 
 <details>
 <summary>ASCII 로고 복사</summary>

package/README.md

@@ -1,13 +1,13 @@
-<p align="center"><picture><source media="(prefers-reduced-motion: reduce)" srcset="https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.19/docs/assets/cover-motion-still.webp" /><img src="https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.19/docs/assets/cover-motion.webp" width="100%" alt="LitFamily motion cover: five armored robots power on one by one, the LitOpenCode 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/litopencode@1.0.20/docs/assets/cover-motion-still.webp" /><img src="https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.20/docs/assets/cover-motion.webp" width="100%" alt="LitFamily motion cover: five armored robots power on one by one, the LitOpenCode robot wakes with glowing eyes and a lit frame, then LITFAMILY and KEEP THE WORK LIT. light up." /></picture></p>
 
 # LitOpenCode
 
 **LitOpenCode is a workflow plugin for OpenCode. Add `lit` to a prompt and the work gets planned, built, checked and written down, so the next session knows where you stopped.**
 
 <p align="center">
-<a href="https://www.npmjs.com/package/@litfamily/litopencode"><img src="https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.19/docs/assets/readme/badge-version.svg" alt="1.0.19" /></a>
+<a href="https://www.npmjs.com/package/@litfamily/litopencode"><img src="https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.20/docs/assets/readme/badge-version.svg" alt="1.0.20" /></a>
 <a href="https://www.npmjs.com/package/@litfamily/litopencode"><img src="https://img.shields.io/npm/dm/@litfamily/litopencode?label=downloads&color=D7F75B" alt="npm downloads per month" /></a>
-<a href="https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.19/LICENSE"><img src="https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.19/docs/assets/readme/badge-license.svg" alt="MIT license" /></a>
+<a href="https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.20/LICENSE"><img src="https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.20/docs/assets/readme/badge-license.svg" alt="MIT license" /></a>
 <a href="https://github.com/wjgoarxiv/litopencode"><img src="https://img.shields.io/github/stars/wjgoarxiv/litopencode?style=social" alt="GitHub stars" /></a>
 </p>
 
@@ -57,9 +57,9 @@ npm uninstall -g @litfamily/litopencode
 ## More
 
 - [Guide on GitHub](https://github.com/wjgoarxiv/litopencode/blob/main/docs/guide.md): install options, automatic handoff, troubleshooting and removal.
-- [Workflow reference](https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.19/docs/reference.md)
-- [Migration notes](https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.19/docs/migration.md) · [Changelog](https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.19/CHANGELOG.md) · [Privacy and network behavior](https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.19/docs/privacy.md)
-- [LitFamily hub](https://github.com/wjgoarxiv/litfamily) · [MIT license](https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.19/LICENSE) · [ASCII font license](https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.19/docs/assets/readme/JetBrainsMono-OFL.txt)
+- [Workflow reference](https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.20/docs/reference.md)
+- [Migration notes](https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.20/docs/migration.md) · [Changelog](https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.20/CHANGELOG.md) · [Privacy and network behavior](https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.20/docs/privacy.md)
+- [LitFamily hub](https://github.com/wjgoarxiv/litfamily) · [MIT license](https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.20/LICENSE) · [ASCII font license](https://cdn.jsdelivr.net/npm/@litfamily/litopencode@1.0.20/docs/assets/readme/JetBrainsMono-OFL.txt)
 
 <details>
 <summary>Copy ASCII logo</summary>

package/dist/tui/mission-band.d.ts

@@ -1,29 +1,47 @@
 import { type MotionFrame } from "./mission-motion.ts";
-import type { MissionView } from "./mission-model.ts";
-import { type Line, type MissionPalette } from "./mission-text.ts";
+import { type MissionView } from "./mission-model.ts";
+import type { ChipShimmer, SkillChip } from "./mission-skills.ts";
+import { type LastMission, type Line, type MissionPalette } from "./mission-text.ts";
 export type BandOptions = {
     readonly enabled: boolean;
     readonly card: boolean;
 };
 /**
  * Reads the band switches from the plugin's tui.json options: `band: false` turns the band off,
- * `band: { card: true }` adds the card under the ribbon. Anything else keeps the defaults.
+ * `band: { card: true }` adds the detail card under the status card. Anything else keeps the defaults.
  */
 export declare function readBandOptions(options: unknown): BandOptions;
 /**
- * One ribbon row exactly `width` cells wide: pills, bar, the next task or a warning, and the elapsed
- * time, shedding parts in a fixed order so it never wraps. Idle sessions draw nothing.
+ * The skill chips row, exactly `width` cells: bright accent pills for the current request first, then
+ * dim recent names, and `+N` for the ones that do not fit. The label goes before any chip does.
  */
-export declare function bandRibbon(view: MissionView, frame: MotionFrame, palette: MissionPalette, width: number, place: {
+export declare function skillRow(chips: readonly SkillChip[], shimmer: ChipShimmer | undefined, palette: MissionPalette, width: number): Line;
+export type CardFigures = {
+    readonly contextPercent: number | null;
+    readonly branch?: string;
     readonly inLane: boolean;
-}): Line;
+};
+export type CardInputs = {
+    readonly view: MissionView;
+    readonly frame: MotionFrame;
+    readonly chips: readonly SkillChip[];
+    readonly shimmer?: ChipShimmer;
+    readonly figures: CardFigures;
+    /** The project's last goal, shown on the track while the session has no lit mission. */
+    readonly last?: LastMission;
+};
+/**
+ * The status card: four rows of exactly `width` cells whether the session is idle or working, so
+ * the prompt never moves. Each row sheds its own low-priority parts as the terminal narrows.
+ */
+export declare function statusCard(input: CardInputs, palette: MissionPalette, width: number): Line[];
 export type BandCard = {
     readonly title: string;
     readonly border: string;
     readonly rows: readonly Line[];
 };
 /**
- * The opt-in card under the ribbon. It keeps a fixed four rows whenever a goal exists, warnings
+ * The opt-in detail card under the status card. It keeps a fixed four rows whenever a goal exists, warnings
  * first, so turning a warning on or off never moves the prompt.
  */
 export declare function bandCard(view: MissionView, frame: MotionFrame, palette: MissionPalette, width: number): BandCard | undefined;

package/dist/tui/mission-band.js

@@ -1,11 +1,14 @@
-// The band: one full-width ribbon row in OpenCode's app_bottom slot that carries the lit mission on
-// the main screen, plus an opt-in card. It reuses the chip's pills, the panel's bar and the shared
-// motion frame, so the chip, the panel and the band always move together.
-import { mixHex, motionTiming } from "./mission-motion.js";
-import { cellWidth, chipGroups, chipSparkCells, chipSparkWidth, groupsWidth, lineWidth, missionPanel, progressBar, shimmerAt, statusSegments, truncateCells } from "./mission-text.js";
+// The band: a status card in OpenCode's full-width app_bottom slot that stays on screen for the
+// whole session, plus an opt-in detail card. Its border carries the LIT mark, the discipline and the
+// phase; row one is the phase track, row two the skill chips, and the bottom border the live figures.
+// It reuses the chip's pills, the panel's bar and the shared motion frame, so the chip, the panel and
+// the band always move together.
+import { ease, mixHex, motionTiming, seg } from "./mission-motion.js";
+import { contextWarnPercent, missionStatus } from "./mission-model.js";
+import { cellWidth, chipSparkCells, chipSparkWidth, fade, lineWidth, missionPanel, progressBar, shimmerAt, shine, statusSegments, stepPill, truncateCells } from "./mission-text.js";
 /**
  * Reads the band switches from the plugin's tui.json options: `band: false` turns the band off,
- * `band: { card: true }` adds the card under the ribbon. Anything else keeps the defaults.
+ * `band: { card: true }` adds the detail card under the status card. Anything else keeps the defaults.
  */
 export function readBandOptions(options) {
     const band = typeof options === "object" && options !== null ? options.band : undefined;
@@ -14,18 +17,6 @@ export function readBandOptions(options) {
     const card = typeof band === "object" && band !== null && band.card === true;
     return { enabled: true, card };
 }
-// Shedding order as the row narrows: step labels first, then the next-task text, then bar width,
-// then the time. Each plan is tried in turn and the first that fits wins.
-const plans = [
-    { tier: "full", bar: 18, text: true, time: true },
-    { tier: "medium", bar: 18, text: true, time: true },
-    { tier: "tight", bar: 18, text: true, time: true },
-    { tier: "tight", bar: 18, text: false, time: true },
-    { tier: "tight", bar: 10, text: false, time: true },
-    { tier: "tight", bar: 5, text: false, time: true },
-    { tier: "tight", bar: 0, text: false, time: true },
-    { tier: "tight", bar: 0, text: false, time: false }
-];
 const minimumText = 12;
 function elapsedText(minutes) {
     const total = Math.max(0, minutes ?? 0);
@@ -50,41 +41,224 @@ function trailing(view, frame, palette, room) {
         return [];
     return [{ text: "  ▸ ", fg: palette.muted }, { text: truncateCells(view.next, room - 4), fg: palette.text }];
 }
-/**
- * One ribbon row exactly `width` cells wide: pills, bar, the next task or a warning, and the elapsed
- * time, shedding parts in a fixed order so it never wraps. Idle sessions draw nothing.
- */
-export function bandRibbon(view, frame, palette, width, place) {
-    if (!view.active || width <= 0)
-        return [];
-    const time = { text: `⟳ ${elapsedText(view.elapsedMinutes)}${place.inLane ? " · in lane" : ""}`, fg: palette.muted };
+/** Cuts or pads a line to exactly `width` cells, keeping wide glyphs whole. */
+function fitLine(line, width, palette) {
+    const out = [];
+    let used = 0;
+    for (const segment of line) {
+        const room = width - used;
+        if (room <= 0)
+            break;
+        if (cellWidth(segment.text) <= room) {
+            out.push(segment);
+            used += cellWidth(segment.text);
+            continue;
+        }
+        let text = "";
+        let taken = 0;
+        for (const char of segment.text) {
+            const w = cellWidth(char);
+            if (taken + w > room)
+                break;
+            text += char;
+            taken += w;
+        }
+        if (text !== "")
+            out.push({ ...segment, text });
+        used += taken;
+        break;
+    }
+    if (used < width)
+        out.push({ text: " ".repeat(width - used), fg: palette.muted });
+    return out;
+}
+/** A border row: corner, optional left label, rule, optional right label, corner; undefined when it does not fit. */
+function ruled(lead, left, right, tail, width, border) {
+    const space = { text: " ", fg: border };
+    const l = left.length > 0 ? [space, ...left, space] : [];
+    const r = right.length > 0 ? [space, ...right, space] : [];
+    const fill = width - cellWidth(lead) - lineWidth(l) - lineWidth(r) - cellWidth(tail);
+    if (fill < 1)
+        return undefined;
+    return [{ text: lead, fg: border }, ...l, { text: "─".repeat(fill), fg: border }, ...r, { text: tail, fg: border }];
+}
+function borderColor(view, frame, palette) {
+    if (!view.active)
+        return palette.borderActive;
+    const enter = frame.chipEnter ? ease.outCubic(seg(frame.t, 0, motionTiming.entry)) : 1;
+    const done = view.complete ? (frame.celebrate === undefined ? 1 : ease.inOutCubic(seg(frame.celebrate, 0, motionTiming.crossfade))) : 0;
+    return mixHex(palette.borderActive, mixHex(mixHex(palette.accent, palette.warning, frame.warn), palette.success, done), enter);
+}
+/** The phase on the right of the title: always a glyph plus words. */
+function phaseLabel(view, frame, palette) {
+    if (!view.active)
+        return { text: "○ IDLE", fg: palette.muted };
+    const status = missionStatus(view);
+    if (status.tone === "success")
+        return { text: "✓ COMPLETE", fg: palette.success, bold: true };
+    if (status.tone === "warning")
+        return { text: `⚑ ${status.text}`, fg: mixHex(palette.info, palette.warning, Math.max(frame.warn, 0.5)), bold: true };
+    return { text: `● ${view.phase.toUpperCase()}`, fg: palette.info, bold: true };
+}
+function topLine(view, frame, palette, width, border) {
+    const brand = [{ text: "🔥 ", fg: palette.text }, { text: "LIT", fg: shine(palette.primary, palette, 0.5, shimmerAt(frame), 0.6), bold: true }];
+    const name = view.active ? view.discipline : "ready";
+    const right = [phaseLabel(view, frame, palette)];
+    const withName = (room) => [...brand, { text: " · ", fg: palette.muted }, { text: truncateCells(name, room), fg: view.active ? palette.text : palette.muted }];
+    const nameRoom = width - cellWidth("╭─") - lineWidth(withName(0)) - 2 - (lineWidth(right) + 2) - cellWidth("─╮") - 1;
+    const attempts = [];
+    if (nameRoom >= Math.min(4, cellWidth(name)))
+        attempts.push([withName(nameRoom), right]);
+    attempts.push([brand, right], [brand, []]);
+    for (const [left, label] of attempts) {
+        const line = ruled("╭─", left, label, "─╮", width, border);
+        if (line !== undefined)
+            return line;
+    }
+    return fitLine([{ text: "╭" + "─".repeat(Math.max(0, width)), fg: border }], width, palette);
+}
+/** The figures in the bottom border, most important first; the last ones go first when room runs out. */
+function figureParts(view, figures, palette) {
+    const parts = [];
+    if (figures.contextPercent !== null) {
+        const percent = Math.round(figures.contextPercent);
+        parts.push({ text: `ctx ${percent}%`, fg: percent >= contextWarnPercent ? palette.warning : palette.muted });
+    }
+    if (view.active)
+        parts.push({ text: `⟳ ${elapsedText(view.elapsedMinutes)}${figures.inLane ? " · in lane" : ""}`, fg: palette.muted });
+    if (figures.branch !== undefined)
+        parts.push({ text: `⎇ ${truncateCells(figures.branch, 24)}`, fg: palette.muted });
+    return parts;
+}
+function bottomLine(view, figures, palette, width, border) {
+    const parts = figureParts(view, figures, palette);
+    for (let count = parts.length; count >= 0; count -= 1) {
+        const right = [];
+        parts.slice(0, count).forEach((part, index) => right.push(...(index === 0 ? [] : [{ text: " · ", fg: palette.muted }]), part));
+        const line = ruled("╰", [], right, "─╯", width, border);
+        if (line !== undefined)
+            return line;
+    }
+    return fitLine([{ text: "╰" + "─".repeat(Math.max(0, width)), fg: border }], width, palette);
+}
+function trackPills(view, frame, palette, tight) {
+    const alpha = (index) => (frame.chipEnter ? ease.outCubic(seg(frame.t, index * motionTiming.stagger, motionTiming.entry)) : 1);
+    if (tight) {
+        const current = view.steps.find((step) => step.state === "now" || step.state === "warn") ?? view.steps[view.complete ? 2 : view.active ? 1 : 0];
+        return [fade(stepPill(current, view, frame, palette), alpha(0), palette)];
+    }
+    const out = [];
+    view.steps.forEach((step, index) => {
+        if (index > 0)
+            out.push(fade({ text: " ━ ", fg: view.steps[index - 1].state === "done" ? palette.success : palette.borderSubtle }, alpha(index), palette));
+        out.push(fade(stepPill(step, view, frame, palette), alpha(index), palette));
+    });
+    return out;
+}
+/** The text after the track in an idle session: the project's last goal, or how to start. */
+function idleText(last, palette, room) {
+    if (last === undefined || last.title === "")
+        return [{ text: "  ", fg: palette.muted }, { text: truncateCells("add lit to a prompt to start", room - 2), fg: palette.muted }];
+    const mark = last.complete ? { text: ` ✓ ${last.passed}/${last.total}`, fg: palette.success } : { text: ` ● ${last.passed}/${last.total}`, fg: palette.info };
+    const head = { text: "  last: ", fg: palette.muted };
+    return [head, { text: truncateCells(last.title, room - cellWidth(head.text) - cellWidth(mark.text)), fg: palette.text }, mark];
+}
+// Shedding order as the row narrows: the next-task text, bar width, the bar, the criteria count and
+// then the step labels. Each plan is tried in turn and the first that fits wins.
+const trackPlans = [
+    { tight: false, bar: 16, criteria: true, text: true },
+    { tight: false, bar: 16, criteria: true, text: false },
+    { tight: false, bar: 8, criteria: true, text: false },
+    { tight: false, bar: 0, criteria: true, text: false },
+    { tight: false, bar: 0, criteria: false, text: false },
+    { tight: true, bar: 0, criteria: false, text: false }
+];
+function trackRow(view, frame, palette, width, last) {
     const sweep = shimmerAt(frame);
-    for (const plan of plans) {
-        const pills = chipGroups(view, frame, palette, plan.tier, false).flat();
-        const bar = plan.bar > 0 && view.progress !== undefined ? [{ text: "  ", fg: palette.muted }, ...progressBar(frame.barRatio, plan.bar, palette, sweep)] : [];
-        const timeWidth = plan.time ? cellWidth(time.text) + 1 : 0;
-        const fixed = lineWidth(pills) + lineWidth(bar) + timeWidth;
+    const gap = { text: "  ", fg: palette.muted };
+    for (const plan of trackPlans) {
+        const pills = trackPills(view, frame, palette, plan.tight);
+        const bar = plan.bar > 0 && view.progress !== undefined ? [gap, ...progressBar(frame.barRatio, plan.bar, palette, sweep)] : [];
+        const goal = view.goal;
+        const criteria = plan.criteria && goal !== undefined ? [gap, { text: `${goal.passed}/${goal.total} criteria`, fg: goal.total > 0 && goal.passed === goal.total ? palette.success : palette.muted }] : [];
+        const fixed = lineWidth(pills) + lineWidth(bar) + lineWidth(criteria);
         if (fixed > width)
             continue;
         const room = width - fixed;
-        const after = trailing(view, frame, palette, room);
+        const after = plan.text ? (view.active ? trailing(view, frame, palette, room) : idleText(last, palette, room)) : [];
         const keepText = plan.text && after.length > 0 && (view.complete ? lineWidth(after) <= room : room >= minimumText);
         if (plan.text && after.length > 0 && !keepText)
             continue;
-        const body = [...pills, ...bar, ...(keepText ? after : [])];
-        let used = lineWidth(body) + timeWidth;
-        const sparks = frame.celebrate !== undefined && used + chipSparkWidth <= width ? chipSparkCells(frame.celebrate, palette) : undefined;
-        if (sparks !== undefined)
-            used += chipSparkWidth;
-        const gap = width - used + (plan.time ? 1 : 0);
+        const body = [...pills, ...bar, ...criteria, ...(keepText ? after : [])];
         // Sparks sit after the text, in the free space, so the pills never shift while they play.
-        return [...body, ...(sparks ?? []), { text: " ".repeat(Math.max(plan.time ? 1 : 0, gap)), fg: palette.muted }, ...(plan.time ? [time] : [])];
+        const sparks = frame.celebrate !== undefined && lineWidth(body) + chipSparkWidth <= width ? chipSparkCells(frame.celebrate, palette) ?? [] : [];
+        return fitLine([...body, ...sparks], width, palette);
     }
-    return [];
+    return fitLine(trackPills(view, frame, palette, true), width, palette);
+}
+function chipSegments(chip, shimmer, palette) {
+    const text = ` ${chip.name} `;
+    if (!chip.current)
+        return [{ text, fg: palette.muted, ...(palette.element === undefined ? {} : { bg: palette.element }) }];
+    const sweep = shimmer?.names.includes(chip.name) === true ? shimmer.sweep : -1;
+    if (sweep < 0)
+        return [{ text, fg: palette.onFill, bg: palette.accent, bold: true }];
+    const chars = [...text];
+    return chars.map((char, index) => ({ text: char, fg: palette.onFill, bg: shine(palette.accent, palette, index / (chars.length - 1), sweep, 0.3), bold: true }));
+}
+/**
+ * The skill chips row, exactly `width` cells: bright accent pills for the current request first, then
+ * dim recent names, and `+N` for the ones that do not fit. The label goes before any chip does.
+ */
+export function skillRow(chips, shimmer, palette, width) {
+    const label = { text: "skills ", fg: palette.muted };
+    if (chips.length === 0)
+        return fitLine([label, { text: " none yet", fg: palette.muted }], width, palette);
+    const pills = chips.map((chip) => chipSegments(chip, shimmer, palette));
+    const space = { text: " ", fg: palette.muted };
+    for (const lead of [[label], []]) {
+        const all = lineWidth(lead) + pills.reduce((total, pill, index) => total + lineWidth(pill) + (index === 0 ? 0 : 1), 0);
+        let shown = pills.length;
+        if (all > width) {
+            let used = lineWidth(lead);
+            shown = 0;
+            for (const pill of pills) {
+                const next = used + (shown === 0 ? 0 : 1) + lineWidth(pill);
+                if (next + cellWidth(` +${pills.length - shown - 1}`) > width)
+                    break;
+                used = next;
+                shown += 1;
+            }
+        }
+        if (shown === 0 && lead.length > 0)
+            continue;
+        const out = [...lead];
+        pills.slice(0, shown).forEach((pill, index) => out.push(...(index === 0 ? [] : [space]), ...pill));
+        if (shown < pills.length)
+            out.push({ text: `${shown === 0 ? "" : " "}+${pills.length - shown}`, fg: palette.muted });
+        return fitLine(out, width, palette);
+    }
+    return fitLine([{ text: `+${pills.length}`, fg: palette.muted }], width, palette);
+}
+/**
+ * The status card: four rows of exactly `width` cells whether the session is idle or working, so
+ * the prompt never moves. Each row sheds its own low-priority parts as the terminal narrows.
+ */
+export function statusCard(input, palette, width) {
+    const { view, frame } = input;
+    const border = borderColor(view, frame, palette);
+    const inner = width - 4;
+    const row = (content) => (inner < 0 ? fitLine([], width, palette) : [{ text: "│ ", fg: border }, ...fitLine(content, inner, palette), { text: " │", fg: border }]);
+    return [
+        topLine(view, frame, palette, width, border),
+        row(trackRow(view, frame, palette, Math.max(0, inner), input.last)),
+        row(skillRow(input.chips, input.shimmer, palette, Math.max(0, inner))),
+        bottomLine(view, input.figures, palette, width, border)
+    ];
 }
 const cardRows = 4;
 /**
- * The opt-in card under the ribbon. It keeps a fixed four rows whenever a goal exists, warnings
+ * The opt-in detail card under the status card. It keeps a fixed four rows whenever a goal exists, warnings
  * first, so turning a warning on or off never moves the prompt.
  */
 export function bandCard(view, frame, palette, width) {

package/dist/tui/mission-skills.d.ts

@@ -0,0 +1,38 @@
+export type SkillUse = {
+    readonly name: string;
+    readonly at: number;
+};
+export type SkillChip = {
+    readonly name: string;
+    readonly current: boolean;
+};
+/**
+ * One part as a skill use, or undefined. `at` is the owning message's time, used when the part
+ * carries no start time of its own. A failed call or a status read is not a firing.
+ */
+export declare function readSkillUse(part: unknown, at: number): SkillUse | undefined;
+/**
+ * The chips to draw: skills fired since `since` (the latest user message) are current while the
+ * session is busy, in the order they arrived; every other name is recent, newest first.
+ */
+export declare function skillChips(uses: readonly SkillUse[], turn: {
+    readonly since: number | undefined;
+    readonly busy: boolean;
+}): SkillChip[];
+export type ChipMotion = {
+    readonly at?: number;
+    readonly arrivals: readonly string[];
+};
+export declare const idleChipMotion: ChipMotion;
+/**
+ * Starts a shimmer over chips that just became current. On the first look at a session only current
+ * chips shimmer, since they belong to the running request; recent ones, the same chips again, or
+ * motion turned off leave the state as it is.
+ */
+export declare function planChipMotion(prev: readonly SkillChip[] | undefined, next: readonly SkillChip[], now: number, state: ChipMotion, enabled?: boolean): ChipMotion;
+export type ChipShimmer = {
+    readonly names: readonly string[];
+    readonly sweep: number;
+};
+/** The light sweep over arriving chips at `now`: its centre runs from just before to just past each chip. */
+export declare function chipShimmer(state: ChipMotion, now: number): ChipShimmer | undefined;

package/dist/tui/mission-skills.js

@@ -0,0 +1,81 @@
+// Skill chips for the band: which LitOpenCode skills fired in a session. Everything is read from what
+// OpenCode already stores: the built-in `skill` tool's calls, this plugin's own tool calls, and the
+// `metadata.litopencode` marks on user parts for bare `lit` routing and slash commands.
+import { litOpenCodeRuntimeSkills, litOpenCodeStaticOnlySkills } from "../skills.js";
+import { seg, motionTiming } from "./mission-motion.js";
+import { readLitMark } from "./mission-model.js";
+const ownSkills = new Set([...litOpenCodeRuntimeSkills, ...litOpenCodeStaticOnlySkills].map((skill) => skill.id));
+// LitOpenCode's own tools, by the chip each one shows. The `lit` tool activates lit-loop.
+const ownTools = { lit: "lit-loop", litwork: "litwork", "start-work": "start-work", "review-work": "review-work", wikify: "wikify" };
+const recentLimit = 12;
+function isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+/**
+ * One part as a skill use, or undefined. `at` is the owning message's time, used when the part
+ * carries no start time of its own. A failed call or a status read is not a firing.
+ */
+export function readSkillUse(part, at) {
+    if (!isRecord(part))
+        return undefined;
+    if (part.type === "tool" && typeof part.tool === "string" && isRecord(part.state)) {
+        const state = part.state;
+        if (state.status === "error")
+            return undefined;
+        const input = isRecord(state.input) ? state.input : {};
+        const start = isRecord(state.time) && typeof state.time.start === "number" ? state.time.start : at;
+        if (part.tool === "skill") {
+            return typeof input.name === "string" && ownSkills.has(input.name) ? { name: input.name, at: start } : undefined;
+        }
+        const name = ownTools[part.tool];
+        if (name === undefined || input.action === "status")
+            return undefined;
+        return { name, at: start };
+    }
+    const mark = readLitMark(part.metadata, at);
+    if (mark === undefined)
+        return undefined;
+    const name = mark.mode !== undefined && mark.mode !== "bounded-authority-lifecycle" ? mark.command ?? mark.mode : mark.command;
+    return name === undefined ? undefined : { name, at };
+}
+/**
+ * The chips to draw: skills fired since `since` (the latest user message) are current while the
+ * session is busy, in the order they arrived; every other name is recent, newest first.
+ */
+export function skillChips(uses, turn) {
+    const ordered = [...uses].sort((left, right) => left.at - right.at);
+    const last = new Map();
+    const current = [];
+    for (const use of ordered) {
+        last.set(use.name, use.at);
+        if (turn.busy && turn.since !== undefined && use.at >= turn.since && !current.includes(use.name))
+            current.push(use.name);
+    }
+    const recent = [...last.entries()]
+        .filter(([name]) => !current.includes(name))
+        .sort((left, right) => right[1] - left[1])
+        .slice(0, recentLimit)
+        .map(([name]) => ({ name, current: false }));
+    return [...current.map((name) => ({ name, current: true })), ...recent];
+}
+export const idleChipMotion = Object.freeze({ arrivals: Object.freeze([]) });
+/**
+ * Starts a shimmer over chips that just became current. On the first look at a session only current
+ * chips shimmer, since they belong to the running request; recent ones, the same chips again, or
+ * motion turned off leave the state as it is.
+ */
+export function planChipMotion(prev, next, now, state, enabled = true) {
+    if (!enabled)
+        return state;
+    const arrivals = next.filter((chip) => chip.current && !(prev ?? []).some((before) => before.name === chip.name && before.current)).map((chip) => chip.name);
+    return arrivals.length === 0 ? state : { at: now, arrivals };
+}
+/** The light sweep over arriving chips at `now`: its centre runs from just before to just past each chip. */
+export function chipShimmer(state, now) {
+    if (state.at === undefined || state.arrivals.length === 0)
+        return undefined;
+    const t = now - state.at;
+    if (t < 0 || t > motionTiming.shimmer)
+        return undefined;
+    return { names: state.arrivals, sweep: -0.2 + 1.4 * seg(t, 0, motionTiming.shimmer) };
+}

package/dist/tui/mission-source.d.ts

@@ -1,4 +1,5 @@
 import { type MissionInput, type TodoInput } from "./mission-model.ts";
+import { type SkillChip } from "./mission-skills.ts";
 type MessageLike = {
     readonly id: string;
     readonly role: string;
@@ -23,6 +24,9 @@ export type MissionStateSource = {
         readonly worktree?: string;
         readonly directory?: string;
     };
+    readonly vcs?: {
+        readonly branch?: string;
+    };
     readonly provider: ReadonlyArray<{
         readonly id: string;
         readonly models: Readonly<Record<string, {
@@ -42,6 +46,7 @@ export type MissionStateSource = {
         question(sessionID: string): ReadonlyArray<unknown>;
     };
     part(messageID: string): ReadonlyArray<{
+        readonly type?: string;
         readonly metadata?: unknown;
     }>;
 };
@@ -53,4 +58,11 @@ export declare function missionProjectRoot(paths: MissionStateSource["path"]): s
  */
 export declare function createLedgerReader(): (root: string | undefined) => unknown;
 export declare function readMissionInput(state: MissionStateSource, sessionID: string, ledger: unknown, now: number): MissionInput;
+export type CardInput = {
+    readonly chips: readonly SkillChip[];
+    readonly contextPercent: number | null;
+    readonly branch?: string;
+};
+/** What the band card shows beside the mission: the session's skill chips, context use and git branch. */
+export declare function readCardInput(state: MissionStateSource, sessionID: string): CardInput;
 export {};

package/dist/tui/mission-source.js

@@ -3,6 +3,7 @@
 import fs from "node:fs";
 import path from "node:path";
 import { readLitMark } from "./mission-model.js";
+import { readSkillUse, skillChips } from "./mission-skills.js";
 const ledgerByteLimit = 1024 * 1024;
 /** The same root the server plugin uses: the worktree unless it is the filesystem root, else the directory. */
 export function missionProjectRoot(paths) {
@@ -86,3 +87,26 @@ export function readMissionInput(state, sessionID, ledger, now) {
         now
     };
 }
+/** What the band card shows beside the mission: the session's skill chips, context use and git branch. */
+export function readCardInput(state, sessionID) {
+    const messages = state.session.messages(sessionID);
+    const uses = [];
+    let since;
+    for (const message of messages) {
+        const at = num(message.time?.created);
+        if (message.role === "user")
+            since = at;
+        for (const part of state.part(message.id)) {
+            const use = readSkillUse(part, at);
+            if (use !== undefined)
+                uses.push(use);
+        }
+    }
+    const status = state.session.status(sessionID)?.type;
+    const branch = state.vcs?.branch?.trim();
+    return {
+        chips: skillChips(uses, { since, busy: status === "busy" || status === "retry" }),
+        contextPercent: contextPercent(state, messages),
+        ...(branch === undefined || branch === "" ? {} : { branch })
+    };
+}

package/dist/tui/mission-text.d.ts

@@ -1,5 +1,5 @@
 import { type MotionFrame } from "./mission-motion.ts";
-import { type MissionView } from "./mission-model.ts";
+import { type MissionStep, type MissionView } from "./mission-model.ts";
 export type Segment = {
     readonly text: string;
     readonly fg: string;
@@ -53,12 +53,15 @@ export declare function truncateCells(value: string, max: number): string;
 export declare function padCells(value: string, width: number): string;
 export declare function lineWidth(line: Line): number;
 export declare function gradientAt(stops: readonly string[], position: number): string;
+/** A light pass along a row: `sweep` is its centre in 0..1 of the row, or negative when off. */
+export declare function shine(color: string, palette: MissionPalette, position: number, sweep: number, reach: number): string;
 export declare function shimmerAt(frame: MotionFrame): number;
 /**
  * A bar of `cells` cells filled to `ratio` with eighth-cell blocks, each cell its own step of the
  * primary-to-accent gradient. The empty track is a thin muted rule, never a dither.
  */
 export declare function progressBar(ratio: number, cells: number, palette: MissionPalette, sweep?: number): Segment[];
+export declare function stepPill(step: MissionStep, view: MissionView, frame: MotionFrame, palette: MissionPalette): Segment;
 export type ChipTier = "full" | "medium" | "tight";
 export type ChipGroup = readonly Segment[];
 /** The chip's pill groups for a tier; the five-segment bar is appended unless `withMicroBar` is false. */

package/dist/tui/mission-text.js

@@ -139,7 +139,7 @@ export function gradientAt(stops, position) {
     return mixHex(stops[index], stops[index + 1], scaled - index);
 }
 /** A light pass along a row: `sweep` is its centre in 0..1 of the row, or negative when off. */
-function shine(color, palette, position, sweep, reach) {
+export function shine(color, palette, position, sweep, reach) {
     if (sweep < 0)
         return color;
     const distance = Math.abs(position - sweep);
@@ -232,7 +232,7 @@ function stepLabel(step, state, view) {
         return [name, "⚑", count].filter((part) => part !== "").join(" ");
     return [name, state === "now" ? count : ""].filter((part) => part !== "").join(" ");
 }
-function stepPill(step, view, frame, palette) {
+export function stepPill(step, view, frame, palette) {
     const { state, doneMix } = shownState(step, view, frame);
     const before = pillStyle(step.id === "work" ? "now" : "todo", palette, frame.warn);
     const style = state === "done" && doneMix < 1 ? blendStyle(before, pillStyle("done", palette, frame.warn), doneMix, palette) : pillStyle(state, palette, frame.warn);

package/dist/tui.js

@@ -4,8 +4,9 @@ import { jsx } from "@opentui/solid/jsx-runtime";
 import { buildMissionView, lastMission, leadingNotice, missionNotices } from "./tui/mission-model.js";
 import { idleMotion, motionTiming, planMotion, sampleMotion } from "./tui/mission-motion.js";
 import { chipBudget, chipLine, homeLine, missionPanel, paletteFromTheme, panelWidth } from "./tui/mission-text.js";
-import { createLedgerReader, missionProjectRoot, readMissionInput } from "./tui/mission-source.js";
-import { bandCard, bandRibbon, readBandOptions } from "./tui/mission-band.js";
+import { createLedgerReader, missionProjectRoot, readCardInput, readMissionInput } from "./tui/mission-source.js";
+import { chipShimmer, idleChipMotion, planChipMotion } from "./tui/mission-skills.js";
+import { bandCard, readBandOptions, statusCard } from "./tui/mission-band.js";
 export const litOpenCodeTuiPluginId = "litopencode";
 const homeLineWidth = 69;
 const refreshDelayMs = 80;
@@ -61,7 +62,7 @@ const tui = async (api, options) => {
     }
     function anyMoving(now) {
         for (const entry of sessions.values())
-            if (sampleMotion(entry.motion, now).moving)
+            if (sampleMotion(entry.motion, now).moving || chipShimmer(entry.chipMotion, now) !== undefined)
                 return true;
         return false;
     }
@@ -83,15 +84,22 @@ const tui = async (api, options) => {
         const source = state();
         const ledger = readLedger(missionProjectRoot(source.path));
         const next = buildMissionView(readMissionInput(source, sessionID, ledger, now));
+        const card = readCardInput(source, sessionID);
         const entry = sessions.get(sessionID);
-        if (entry !== undefined && JSON.stringify(entry.view) === JSON.stringify(next))
+        const viewChanged = entry === undefined || JSON.stringify(entry.view) !== JSON.stringify(next);
+        if (!viewChanged && JSON.stringify(entry.card) === JSON.stringify(card))
             return;
-        if (entry !== undefined) {
+        if (entry !== undefined && viewChanged) {
             const notice = leadingNotice(missionNotices(entry.view, next));
             if (notice !== undefined)
                 api.ui.toast({ variant: notice.variant, title: notice.title, message: notice.message, duration: toastMs });
         }
-        sessions.set(sessionID, { view: next, motion: planMotion(entry?.view, next, now, entry?.motion ?? idleMotion, motionEnabled) });
+        sessions.set(sessionID, {
+            view: next,
+            card,
+            motion: viewChanged ? planMotion(entry?.view, next, now, entry?.motion ?? idleMotion, motionEnabled) : entry.motion,
+            chipMotion: planChipMotion(entry?.card.chips, card.chips, now, entry?.chipMotion ?? idleChipMotion, motionEnabled)
+        });
         setClock(now);
         setRevision(revision() + 1);
         ensureFrames();
@@ -129,14 +137,13 @@ const tui = async (api, options) => {
         });
     }
     // Opening a session loads its messages and parts over HTTP, which fires no bus event. Reading the
-    // reactive store here re-runs this effect as they arrive, so a resumed session lights up too.
+    // reactive store here re-runs this effect as they arrive, so a resumed session lights up too and its
+    // skill calls come back as chips.
     function watchSession(sessionID) {
         createEffect(() => {
             const source = state();
-            for (const message of source.session.messages(sessionID)) {
-                if (message.role === "user")
-                    void source.part(message.id).length;
-            }
+            for (const message of source.session.messages(sessionID))
+                void source.part(message.id).length;
             void source.session.todo(sessionID).length;
             void source.session.status(sessionID)?.type;
             scheduleRefresh();
@@ -151,6 +158,15 @@ const tui = async (api, options) => {
             return { view: entry.view, frame: sampleMotion(entry.motion, clock()) };
         };
     }
+    // The band shows every session, lit or not, so it reads the entry whether or not the mission is active.
+    function cardView(sessionID) {
+        return () => {
+            revision();
+            const entry = sessions.get(sessionID);
+            const now = clock();
+            return entry === undefined ? undefined : { ...entry, frame: sampleMotion(entry.motion, now), now };
+        };
+    }
     for (const type of refreshEvents) {
         api.event.on(type, scheduleRefresh);
     }
@@ -222,8 +238,9 @@ const tui = async (api, options) => {
             }
         }
     });
-    // The band: one full-width ribbon row under every route in app_bottom. It follows the session on
-    // screen; a child (subagent) session shows its parent's mission as a lane. Home shows no band.
+    // The band: a four-row status card under every session route in app_bottom, idle or working. It
+    // follows the session on screen; a child (subagent) session shows its parent's mission as a lane.
+    // Home shows no band.
     if (band.enabled) {
         api.slots.register({
             order: 50,
@@ -247,7 +264,7 @@ const tui = async (api, options) => {
                     });
                     const current = createMemo(() => {
                         const place = target();
-                        const snapshot = place === undefined ? undefined : sessionView(place.sessionID)();
+                        const snapshot = place === undefined ? undefined : cardView(place.sessionID)();
                         return snapshot === undefined || place === undefined ? undefined : { ...snapshot, inLane: place.inLane };
                     });
                     const visible = createMemo(() => current() !== undefined);
@@ -257,17 +274,27 @@ const tui = async (api, options) => {
                         return jsx("box", {
                             flexDirection: "column",
                             flexShrink: 0,
+                            paddingLeft: 1,
+                            paddingRight: 1,
                             get backgroundColor() { return palette().panel ?? "transparent"; },
                             children: () => {
                                 const snapshot = current();
                                 if (snapshot === undefined)
                                     return null;
                                 const colors = palette();
-                                const width = dimensions().width;
-                                const rows = [
-                                    jsx("box", { paddingLeft: 2, paddingRight: 2, flexShrink: 0, children: lineElement(bandRibbon(snapshot.view, snapshot.frame, colors, width - 4, { inLane: snapshot.inLane })) })
-                                ];
-                                const card = band.card ? bandCard(snapshot.view, snapshot.frame, colors, width - 2) : undefined;
+                                const width = dimensions().width - 2;
+                                const last = snapshot.view.active ? undefined : lastMission(readLedger(missionProjectRoot(state().path)));
+                                const shimmer = chipShimmer(snapshot.chipMotion, snapshot.now);
+                                const lines = statusCard({
+                                    view: snapshot.view,
+                                    frame: snapshot.frame,
+                                    chips: snapshot.card.chips,
+                                    ...(shimmer === undefined ? {} : { shimmer }),
+                                    figures: { contextPercent: snapshot.card.contextPercent, ...(snapshot.card.branch === undefined ? {} : { branch: snapshot.card.branch }), inLane: snapshot.inLane },
+                                    ...(last === undefined ? {} : { last })
+                                }, colors, width);
+                                const rows = lines.map(lineElement);
+                                const card = band.card ? bandCard(snapshot.view, snapshot.frame, colors, width) : undefined;
                                 if (card !== undefined) {
                                     rows.push(jsx("box", {
                                         border: true,
@@ -275,8 +302,6 @@ const tui = async (api, options) => {
                                         borderColor: card.border,
                                         title: card.title,
                                         titleColor: colors.text,
-                                        marginLeft: 1,
-                                        marginRight: 1,
                                         paddingLeft: 1,
                                         paddingRight: 1,
                                         flexShrink: 0,

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.19"><title>release: 1.0.19</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.19</text></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="146" height="20" role="img" aria-label="release: 1.0.20"><title>release: 1.0.20</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.20</text></g></svg>

package/docs/reference-Ko-KR.md

@@ -263,12 +263,26 @@ OpenCode 1.18은 `tui.json`이나 `tui.jsonc`의 `plugin` 배열에 적힌 TUI
   경고가 있으면 warning, 끝나면 success 색입니다. 안에는 두 줄짜리 `LIT`과 그 옆의 작업 이름·상태,
   굵은 목표 제목, 단계 줄, 1/8칸 블록으로 칠하고 빈 곳은 가는 선으로 둔 그라데이션 막대, 다음 할 일이나
   아직 통과하지 못한 기준, 기준 목록, 경고, 최근 증거 네 개가 들어갑니다.
-- 띠(band): 화면 맨 아래 전체 폭에 붙는 리본 한 줄입니다(OpenCode의 `app_bottom` 자리). 세션과
-  사이드바 아래를 모두 가로지릅니다. 알약, 1/8칸 막대, 다음 할 일, 첫 lit 턴부터 지난 시간(`⟳ 7m`)을
-  보여 줍니다. 경고가 열려 있는 동안에는 `▸ 다음 일` 자리에 `⚑ <내용>`이 들어갑니다. 세션의 첫 lit
-  턴에 나타나 lit 세션 내내 남으므로, 입력창은 한 번만 움직입니다. 하위(subagent) 세션에서는 부모
-  세션의 미션을 `· in lane`과 함께 보여 주고, 홈 화면에는 띠가 없습니다. 폭이 좁으면 단계 이름,
-  다음 할 일 글자, 막대 길이, 시간 순서로 덜어 내며 줄을 넘기지 않습니다. 완료 순간도 여기서 함께 보입니다.
+- 띠(band): 화면 맨 아래에 붙는 상태 카드입니다(OpenCode의 `app_bottom` 자리). 세션과 사이드바
+  아래를 모두 가로지릅니다. lit을 쓰든 안 쓰든 세션 내내 보이고, 쉴 때나 일할 때나 똑같이 네 줄이라
+  입력창이 움직이지 않습니다.
+  - 위 테두리 왼쪽에 `🔥 LIT · <작업 이름>`, 오른쪽에 단계가 붙습니다(`● WORK`, `⚑ review blocked`,
+    `✓ COMPLETE`, lit 턴 전에는 `○ IDLE`).
+  - 첫째 줄은 칩과 같은 알약으로 그린 단계 줄 `PLAN ━ WORK ━ REVIEW`, 1/8칸 막대, 목표의
+    `n/m criteria`, 다음 할 일입니다. 경고가 열려 있는 동안에는 `▸ 다음 일` 자리에 `⚑ <내용>`이
+    들어갑니다. 쉬는 세션에서는 흐린 단계 줄 옆에 프로젝트의 마지막 목표를, 목표가 없으면
+    `add lit to a prompt to start`를 보여 줍니다.
+  - 둘째 줄은 스킬 칩입니다. 세션에서 실행된 LitOpenCode 스킬이 여러 개 함께 보입니다. 지금 요청에서
+    실행된 스킬은 요청이 도는 동안 accent 색 알약으로 밝게 보이고, 새로 들어온 칩에는 빛이 짧게 한 번
+    지나갑니다. 턴이 끝나면 흐려져 최근 목록으로 남고(최근 것이 앞), 다시 실행되면 다시 밝아집니다.
+    자리가 모자라면 남은 칩을 `+N`으로 접습니다.
+  - 아래 테두리에는 context 사용량(75%부터 주황), 첫 lit 턴부터 지난 시간(`⟳ 7m`), git 브랜치가
+    붙습니다.
+
+  하위(subagent) 세션에서는 부모 세션의 카드를 `· in lane`과 함께 보여 주고, 홈 화면에는 띠가
+  없습니다. 폭이 좁으면 줄마다 덜 중요한 것부터 덜어 냅니다. 단계 줄은 다음 할 일 글자, 막대 길이,
+  막대, 기준 개수, 단계 이름 순서로, 아래 테두리는 브랜치, 시간, context 사용량 순서로 뺍니다. 줄을
+  넘기지는 않습니다. 완료 순간도 여기서 함께 보입니다.
 - 홈 화면 입력창 아래, OpenCode 팁 다음 줄: `🔥 lit ready · last: <목표> ✓ n/m`. 프로젝트 ledger에
   목표가 있을 때만 보입니다.
 - 경고는 색만 바꾸지 않고 늘 `⚑`와 글자를 함께 붙입니다. accent와 warning이 같은 색인 테마가 있기
@@ -281,6 +295,11 @@ OpenCode 1.18은 `tui.json`이나 `tui.jsonc`의 `plugin` 배열에 적힌 TUI
 
 데이터는 이미 있는 것만 읽고, TUI를 위해 새로 쓰는 파일은 없습니다.
 
+- 스킬 칩은 OpenCode가 이미 저장하는 세 곳에서 읽습니다. 이름이 LitOpenCode가 싣고 다니는 스킬인
+  내장 `skill` 도구 호출(다른 스킬은 빼고, 불러오기에 실패한 호출과 상태 조회는 실행으로 치지 않음),
+  이 플러그인의 `lit`, `litwork`, `start-work`, `review-work`, `wikify` 도구 호출, 그리고 맨 `lit`
+  라우팅과 슬래시 명령에 붙는 아래의 `metadata.litopencode` 표시입니다. "지금 요청"은 세션이 일하는
+  동안 마지막 사용자 메시지 이후에 실행된 것을 뜻합니다.
 - `lit`이 모드를 켜거나 명령이 실행될 때(`save-plan` 포함) 이 플러그인이 사용자 메시지 part에 붙이는
   `metadata.litopencode` 표시. 표시가 없는 세션은 쉬는 상태로 보고, 기본 `lit-loop` agent여도 칩과
   패널을 숨깁니다.
@@ -299,7 +318,7 @@ ease-out-back으로 160ms씩, 60ms 간격으로 들어오고, 막대는 300ms에
 띠 설정도 같은 옵션 객체에 적습니다.
 
 - `{ "band": false }`는 띠만 없애고 칩, 패널, 홈 줄은 그대로 둡니다.
-- `{ "band": { "card": true } }`는 리본 아래에 경고, 다음 할 일, 목표를 담은 둥근 카드를 붙입니다.
+- `{ "band": { "card": true } }`는 상태 카드 아래에 경고, 다음 할 일, 목표를 담은 둥근 상세 카드를 붙입니다.
   목표가 있는 동안 카드는 네 줄로 고정되어, 경고가 생기거나 사라져도 입력창이 움직이지 않습니다.
   카드는 기본으로 꺼져 있습니다.
 

package/docs/reference.md

@@ -366,13 +366,26 @@ What it draws:
   Inside: a two-row `LIT` with the discipline and a status beside it, the goal title in bold, the
   phase line, a gradient bar drawn in eighth-cell blocks over a thin rule, the next todo or open
   criterion, the criteria, warnings, and the last four evidence events.
-- A band: one full-width ribbon row at the bottom of the screen (OpenCode's `app_bottom` slot), under
-  the session and the sidebar alike. It shows the pills, an eighth-block bar, the next task and the
-  time since the first lit turn (`⟳ 7m`). While a warning is open, `⚑ <text>` takes the place of
-  `▸ next`. The row appears at the session's first lit turn and stays for the whole lit session, so
-  the prompt moves only once. A subagent session shows its parent's mission with `· in lane`; the
-  home screen has no band. When the row is narrow it drops, in order, the step labels, the next-task
-  text, bar width and then the time; it never wraps. The completion moment plays here too.
+- A band: a status card along the bottom of the screen (OpenCode's `app_bottom` slot), under the
+  session and the sidebar alike. It is on screen for the whole session, lit or not, and keeps the
+  same four rows idle or working, so the prompt never moves:
+  - the top border carries `🔥 LIT · <discipline>` on the left and the phase on the right
+    (`● WORK`, `⚑ review blocked`, `✓ COMPLETE`, or `○ IDLE` before any lit turn);
+  - row one is the phase track `PLAN ━ WORK ━ REVIEW` in the chip's pills, an eighth-block bar,
+    `n/m criteria` for the goal and the next task. While a warning is open, `⚑ <text>` takes the
+    place of `▸ next`. An idle session shows the dim track with the project's last goal, or
+    `add lit to a prompt to start`;
+  - row two holds the skill chips: every LitOpenCode skill that fired in the session, several at
+    once. Skills fired by the current request are bright accent pills while it runs, and a new one
+    gets a short light sweep as it arrives; when the turn ends they dim and stay as the recent list,
+    newest first, and firing one again brightens it. Chips that do not fit collapse into `+N`;
+  - the bottom border holds the context use (amber from 75%), the time since the first lit turn
+    (`⟳ 7m`) and the git branch.
+
+  A subagent session shows its parent's card with `· in lane`; the home screen has no band. When the
+  card is narrow each row drops its own low-priority parts: the track drops the next-task text, bar
+  width, the bar, the criteria count and then the step labels; the bottom border drops the branch,
+  then the time, then the context use. It never wraps. The completion moment plays here too.
 - A line under the home prompt, after OpenCode's tips: `🔥 lit ready · last: <goal> ✓ n/m`. It
   appears only when the project ledger holds a goal.
 - Warnings always carry `⚑` and words, not colour alone, because some themes use one colour for
@@ -387,6 +400,11 @@ What it draws:
 
 Where the data comes from, with nothing new written for the TUI:
 
+- The skill chips come from three places OpenCode already stores: the built-in `skill` tool's calls
+  whose name is a skill LitOpenCode ships (other skills are left out, and a failed load or a status
+  read is not a firing), this plugin's own `lit`, `litwork`, `start-work`, `review-work` and `wikify`
+  tool calls, and the `metadata.litopencode` marks below for bare `lit` routing and slash commands.
+  "Current" means fired since the latest user message while the session is busy.
 - The `metadata.litopencode` marks this plugin already attaches to user-message parts when `lit`
   activates a mode or a command runs (`save-plan` included). A session with no mark is idle and the
   chip and panel stay hidden, even on the default `lit-loop` agent.
@@ -407,8 +425,8 @@ manager or with `plugin_enabled`.
 Band options go in the same options object:
 
 - `{ "band": false }` removes the band and leaves the chip, the panel and the home line.
-- `{ "band": { "card": true } }` adds a rounded card under the ribbon with the warnings, the next
-  task and the goal. While a goal exists the card keeps a fixed four rows, so a warning arriving or
+- `{ "band": { "card": true } }` adds a rounded detail card under the status card with the warnings,
+  the next task and the goal. While a goal exists the card keeps a fixed four rows, so a warning arriving or
   clearing never moves the prompt. The card is off by default.
 
 A ledger written from another terminal (for example `litopencode record-evidence`) raises no

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@litfamily/litopencode",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "description": "Workflow plugin for OpenCode: add lit to a prompt and the work is planned, built, checked and written down so the next session can pick it up.",
   "keywords": [
     "opencode",