@bubblebrain-ai/bubble 0.0.63 → 0.0.65

package/dist/tui/components/skills-panel.d.ts

@@ -0,0 +1,63 @@
+import { type Component, type Focusable, type TuiMouseEvent } from "@bubblebrain-ai/pi-tui";
+import type { SkillRegistry } from "../../skills/registry.js";
+import { type Theme } from "../model/theme.js";
+export interface SkillsPanelComponentOptions {
+    getTerminalRows(): number;
+    onClose(): void;
+    onRender(): void;
+    onSkillsChanged(): void;
+    /** Catalog budget in characters (the agent's setting); undefined uses the default. */
+    getCatalogChars?(): number | undefined;
+    theme?: Theme;
+}
+/** Grok-style centered Skill browser/manager opened by /skills. */
+export declare class SkillsPanelComponent implements Component, Focusable {
+    private readonly registry;
+    private readonly options;
+    focused: boolean;
+    private readonly search;
+    private searchActive;
+    private filter;
+    private selectedKey;
+    private hoveredKey;
+    private collapsedGroups;
+    private expandedSkills;
+    private actionBadges;
+    private offset;
+    private manuallyScrolled;
+    private bodyRows;
+    private frameWidth;
+    private closeHovered;
+    private filterHovered;
+    private searchHovered;
+    private hitRows;
+    private footerHits;
+    private selectableEntries;
+    constructor(registry: SkillRegistry, options: SkillsPanelComponentOptions);
+    render(width: number): string[];
+    handleInput(data: string): void;
+    handleMouse(event: TuiMouseEvent): boolean;
+    invalidate(): void;
+    private frameLine;
+    /** How much of the always-present catalog the enabled skills use, so users know when to prune. */
+    private catalogSummary;
+    private renderSearch;
+    private renderFooter;
+    private buildRows;
+    private skillDetailRows;
+    private resourceSummary;
+    private seedCollapsedGroups;
+    private ensureSelection;
+    private moveSelection;
+    private selectBoundary;
+    private selectedEntry;
+    private toggleExpanded;
+    private collapseSelected;
+    private toggleEnabled;
+    private cycleFilter;
+    private reload;
+    private startSearch;
+    private stopSearch;
+    private scroll;
+    private pruneBadges;
+}

package/dist/tui/components/skills-panel.js

@@ -0,0 +1,582 @@
+import { homedir } from "node:os";
+import { dirname } from "node:path";
+import chalk from "chalk";
+import { Input, decodeKittyPrintable, matchesKey, truncateToWidth, visibleWidth, wrapTextWithAnsi, } from "@bubblebrain-ai/pi-tui";
+import { buildSkillCatalog } from "../../skills/format.js";
+import { parseTerminalMouseWheel } from "../model/terminal-mouse.js";
+import { darkTheme } from "../model/theme.js";
+import { themeBackground, themeDim, themeForeground } from "../model/theme-style.js";
+const GROUP_ORDER = ["project", "user", "configured"];
+const GROUP_LABEL = {
+    project: "Project",
+    user: "User",
+    configured: "Config",
+};
+const MAX_PANEL_HEIGHT = 34;
+function fit(value, width, ellipsis = "") {
+    if (width <= 0)
+        return "";
+    const clipped = truncateToWidth(value, width, ellipsis);
+    return clipped + " ".repeat(Math.max(0, width - visibleWidth(clipped)));
+}
+function alignSides(left, right, width) {
+    if (width <= 0)
+        return "";
+    if (!right)
+        return fit(left, width, "…");
+    const rightWidth = Math.min(visibleWidth(right), Math.max(0, Math.floor(width * 0.48)));
+    const clippedRight = truncateToWidth(right, rightWidth, "…");
+    const gap = 2;
+    const leftWidth = Math.max(0, width - visibleWidth(clippedRight) - gap);
+    return `${fit(left, leftWidth, "…")}${" ".repeat(gap)}${clippedRight}`;
+}
+function friendlyPath(path) {
+    const home = homedir();
+    if (path === home)
+        return "~";
+    if (path.startsWith(`${home}/`))
+        return `~/${path.slice(home.length + 1)}`;
+    return path;
+}
+function skillSourceLabel(skill) {
+    return friendlyPath(dirname(skill.rootDir));
+}
+function sourceKey(source) {
+    return `group:${source}`;
+}
+function skillKey(name) {
+    return `skill:${name}`;
+}
+function filterLabel(filter) {
+    if (filter === "enabled")
+        return "Enabled";
+    if (filter === "disabled")
+        return "Disabled";
+    return "All";
+}
+function nextFilter(filter) {
+    if (filter === "all")
+        return "enabled";
+    if (filter === "enabled")
+        return "disabled";
+    return "all";
+}
+function matchesSkill(skill, query) {
+    if (!query)
+        return { matches: true, nameHit: true };
+    const needle = query.toLocaleLowerCase();
+    const nameHit = skill.meta.name.toLocaleLowerCase().includes(needle)
+        || (skill.meta.author ?? "").toLocaleLowerCase().includes(needle);
+    const descriptionHit = skill.meta.description.toLocaleLowerCase().includes(needle);
+    const tagsHit = (skill.meta.tags ?? []).some((tag) => tag.toLocaleLowerCase().includes(needle));
+    return { matches: nameHit || descriptionHit || tagsHit, nameHit };
+}
+/** Grok-style centered Skill browser/manager opened by /skills. */
+export class SkillsPanelComponent {
+    registry;
+    options;
+    focused = false;
+    search = new Input({ prompt: "" });
+    searchActive = false;
+    filter = "all";
+    selectedKey;
+    hoveredKey;
+    collapsedGroups = new Set();
+    expandedSkills = new Set();
+    actionBadges = new Map();
+    offset = 0;
+    manuallyScrolled = false;
+    bodyRows = 0;
+    frameWidth = 0;
+    closeHovered = false;
+    filterHovered = false;
+    searchHovered = false;
+    hitRows = [];
+    footerHits = [];
+    selectableEntries = [];
+    constructor(registry, options) {
+        this.registry = registry;
+        this.options = options;
+        this.seedCollapsedGroups();
+        this.search.onBackspaceAtStart = () => this.stopSearch();
+    }
+    render(width) {
+        const theme = this.options.theme ?? darkTheme;
+        const frameWidth = Math.max(1, Math.floor(width));
+        const frameHeight = Math.max(1, Math.min(MAX_PANEL_HEIGHT, this.options.getTerminalRows() - 6));
+        this.frameWidth = frameWidth;
+        if (frameWidth < 40 || frameHeight < 12) {
+            return [truncateToWidth("Skills requires a 40 × 12 terminal · Esc close", frameWidth, "")]
+                .slice(0, frameHeight);
+        }
+        this.pruneBadges();
+        const innerWidth = frameWidth - 2;
+        const horizontal = "─".repeat(innerWidth);
+        const close = this.closeHovered ? chalk.bold(themeForeground(theme.inputText, "[✗]")) : themeForeground(theme.muted, "[✗]");
+        const topDashCount = Math.max(0, frameWidth - 7);
+        const top = themeForeground(theme.border, `┌${"─".repeat(topDashCount)}`) + ` ${close} ` + themeForeground(theme.border, "┐");
+        const bottom = themeForeground(theme.border, `└${horizontal}┘`);
+        const separator = themeForeground(theme.border, `├${horizontal}┤`);
+        const tab = this.frameLine(`  ${chalk.bold(themeForeground(theme.inputText, themeBackground(theme.traceHoverBg, " Skills ")))}  ${themeForeground(theme.muted, this.catalogSummary())}`, innerWidth);
+        const search = this.frameLine(this.renderSearch(innerWidth), innerWidth);
+        const footerRows = this.searchActive ? 0 : 2;
+        this.bodyRows = Math.max(1, frameHeight - 5 - footerRows);
+        const contentWidth = Math.max(1, innerWidth - 4);
+        const rows = this.buildRows(contentWidth);
+        this.selectableEntries = rows
+            .map((row) => row.selectable)
+            .filter((entry) => !!entry);
+        this.ensureSelection();
+        const selectedLine = rows.findIndex((row) => row.key === this.selectedKey);
+        if (selectedLine >= 0 && !this.manuallyScrolled) {
+            if (selectedLine < this.offset)
+                this.offset = selectedLine;
+            if (selectedLine >= this.offset + this.bodyRows)
+                this.offset = selectedLine - this.bodyRows + 1;
+        }
+        this.offset = Math.max(0, Math.min(this.offset, Math.max(0, rows.length - this.bodyRows)));
+        this.hitRows = [];
+        this.footerHits = [];
+        const visible = rows.slice(this.offset, this.offset + this.bodyRows);
+        while (visible.length < this.bodyRows)
+            visible.push({ text: "" });
+        const bodyStart = 4;
+        const body = visible.map((row, index) => {
+            const localY = bodyStart + index;
+            if (row.selectable && row.key)
+                this.hitRows[localY] = { kind: "entry", key: row.key };
+            const selected = !!row.key && row.key === this.selectedKey && !this.searchActive;
+            const hovered = !!row.key && row.key === this.hoveredKey;
+            const content = `  ${fit(row.text, contentWidth, "…")}  `;
+            const styled = selected
+                ? chalk.bold(themeForeground(theme.inputText, themeBackground(theme.traceSelectedBg, fit(content, innerWidth))))
+                : hovered
+                    ? themeForeground(theme.inputText, themeBackground(theme.traceHoverBg, fit(content, innerWidth)))
+                    : themeBackground(theme.backgroundPanel, fit(content, innerWidth));
+            return `${themeForeground(theme.border, "│")}${styled}${themeForeground(theme.border, "│")}`;
+        });
+        const footer = this.searchActive ? [] : this.renderFooter(innerWidth, bodyStart + this.bodyRows);
+        return [top, tab, search, separator, ...body, ...footer, bottom]
+            .slice(0, frameHeight)
+            .map((line) => truncateToWidth(line, frameWidth, ""));
+    }
+    handleInput(data) {
+        const wheel = parseTerminalMouseWheel(data);
+        if (wheel.length > 0) {
+            for (const direction of wheel)
+                this.scroll(direction === "up" ? -3 : 3);
+            return;
+        }
+        if (this.searchActive) {
+            if (matchesKey(data, "escape"))
+                return this.stopSearch();
+            if (matchesKey(data, "up"))
+                return this.moveSelection(-1);
+            if (matchesKey(data, "down"))
+                return this.moveSelection(1);
+            if (matchesKey(data, "pageUp"))
+                return this.moveSelection(-Math.max(1, this.bodyRows - 1));
+            if (matchesKey(data, "pageDown"))
+                return this.moveSelection(Math.max(1, this.bodyRows - 1));
+            if (matchesKey(data, "enter"))
+                return this.toggleExpanded();
+            const before = this.search.getValue();
+            this.search.focused = this.focused;
+            this.search.handleInput(data);
+            if (this.search.getValue() !== before) {
+                this.selectedKey = undefined;
+                this.offset = 0;
+                this.manuallyScrolled = false;
+            }
+            this.options.onRender();
+            return;
+        }
+        if (matchesKey(data, "escape"))
+            return this.options.onClose();
+        const printable = decodeKittyPrintable(data) ?? data;
+        if (printable === "/")
+            return this.startSearch();
+        if (printable === "f")
+            return this.cycleFilter();
+        if (printable === "r")
+            return this.reload();
+        if (matchesKey(data, "space"))
+            return this.toggleEnabled();
+        if (matchesKey(data, "up") || printable === "k")
+            return this.moveSelection(-1);
+        if (matchesKey(data, "down") || printable === "j")
+            return this.moveSelection(1);
+        if (matchesKey(data, "pageUp"))
+            return this.moveSelection(-Math.max(1, this.bodyRows - 1));
+        if (matchesKey(data, "pageDown"))
+            return this.moveSelection(Math.max(1, this.bodyRows - 1));
+        if (matchesKey(data, "home"))
+            return this.selectBoundary("first");
+        if (matchesKey(data, "end") || printable === "G")
+            return this.selectBoundary("last");
+        if (matchesKey(data, "enter") || matchesKey(data, "right") || printable === "l")
+            return this.toggleExpanded(false);
+        if (matchesKey(data, "left") || printable === "h")
+            return this.collapseSelected();
+    }
+    handleMouse(event) {
+        if (event.kind === "leave") {
+            const changed = this.closeHovered || this.filterHovered || this.searchHovered || this.hoveredKey !== undefined;
+            this.closeHovered = false;
+            this.filterHovered = false;
+            this.searchHovered = false;
+            this.hoveredKey = undefined;
+            return changed;
+        }
+        const overClose = event.y === 0
+            && event.x >= Math.max(0, this.frameWidth - 6)
+            && event.x < this.frameWidth - 1;
+        const hit = this.hitRows[event.y] ?? this.footerHits.find((candidate) => (event.y === candidate.row
+            && event.x >= (candidate.start ?? 0)
+            && event.x < (candidate.end ?? 0)));
+        const overSearch = event.y === 2 && event.x > 1 && event.x < this.frameWidth - 14;
+        const overFilter = event.y === 2 && event.x >= Math.max(1, this.frameWidth - 14) && event.x < this.frameWidth - 1;
+        const overEntryKey = hit?.kind === "entry" ? hit.key : undefined;
+        if (event.kind === "move") {
+            const changed = this.closeHovered !== overClose
+                || this.searchHovered !== overSearch
+                || this.filterHovered !== overFilter
+                || this.hoveredKey !== overEntryKey;
+            this.closeHovered = overClose;
+            this.searchHovered = overSearch;
+            this.filterHovered = overFilter;
+            this.hoveredKey = overEntryKey;
+            return changed;
+        }
+        if (event.release || (event.button & 3) !== 0)
+            return false;
+        if (overClose) {
+            this.options.onClose();
+            return true;
+        }
+        if (overSearch) {
+            this.startSearch();
+            return true;
+        }
+        if (overFilter || hit?.kind === "filter") {
+            this.cycleFilter();
+            return true;
+        }
+        if (hit?.kind === "footer-reload") {
+            this.reload();
+            return true;
+        }
+        if (hit?.kind === "footer-toggle") {
+            this.toggleEnabled();
+            return true;
+        }
+        if (hit?.kind === "entry" && hit.key) {
+            this.selectedKey = hit.key;
+            this.manuallyScrolled = false;
+            this.toggleExpanded();
+            return true;
+        }
+        return false;
+    }
+    invalidate() {
+        this.search.invalidate?.();
+    }
+    frameLine(content, width) {
+        const theme = this.options.theme ?? darkTheme;
+        return `${themeForeground(theme.border, "│")}${themeBackground(theme.backgroundPanel, fit(content, width))}${themeForeground(theme.border, "│")}`;
+    }
+    /** How much of the always-present catalog the enabled skills use, so users know when to prune. */
+    catalogSummary() {
+        const catalog = buildSkillCatalog(this.registry.summaries(), { budgetChars: this.options.getCatalogChars?.() });
+        if (catalog.budgetChars === 0)
+            return "catalog off · skill_search only";
+        const duplicates = this.registry.getDiagnostics().filter((d) => d.message.startsWith("Duplicate skill name")).length;
+        return [
+            `catalog ${catalog.chars.toLocaleString("en-US")}/${catalog.budgetChars.toLocaleString("en-US")} chars`,
+            `${catalog.listed} listed`,
+            catalog.unlisted ? `${catalog.unlisted} not listed` : "",
+            duplicates ? `${duplicates} duplicate${duplicates === 1 ? "" : "s"} ignored` : "",
+        ].filter(Boolean).join(" · ");
+    }
+    renderSearch(innerWidth) {
+        const theme = this.options.theme ?? darkTheme;
+        const filter = filterLabel(this.filter);
+        const filterText = this.filterHovered || this.filter !== "all"
+            ? themeForeground(theme.inputText, themeBackground(theme.traceHoverBg, ` f ${filter} `))
+            : themeForeground(theme.muted, ` f ${filter} `);
+        const filterWidth = visibleWidth(` f ${filter} `);
+        const leftWidth = Math.max(1, innerWidth - filterWidth - 3);
+        let left;
+        if (this.searchActive) {
+            this.search.focused = this.focused;
+            left = this.search.render(leftWidth)[0] ?? "";
+        }
+        else {
+            this.search.focused = false;
+            left = this.searchHovered
+                ? themeForeground(theme.inputText, "/ to search")
+                : themeDim(theme.dim, "/ to search");
+        }
+        return fit(`  ${fit(left, leftWidth)} ${filterText}`, innerWidth);
+    }
+    renderFooter(innerWidth, firstRow) {
+        const theme = this.options.theme ?? darkTheme;
+        const actionPlain = "space toggle  ·  f filter  ·  r reload  ·  / search";
+        const navPlain = "↑/↓ navigate  ·  Enter expand  ·  Esc close";
+        const actionLeft = Math.max(0, Math.floor((innerWidth - visibleWidth(actionPlain)) / 2));
+        const navLeft = Math.max(0, Math.floor((innerWidth - visibleWidth(navPlain)) / 2));
+        const action = fit(`${" ".repeat(actionLeft)}${themeDim(theme.dim, actionPlain)}`, innerWidth);
+        const nav = fit(`${" ".repeat(navLeft)}${themeDim(theme.dim, navPlain)}`, innerWidth);
+        const toggleAt = actionPlain.indexOf("space toggle");
+        const filterAt = actionPlain.indexOf("f filter");
+        const reloadAt = actionPlain.indexOf("r reload");
+        this.footerHits = [
+            { kind: "footer-toggle", start: 1 + actionLeft + toggleAt, end: 1 + actionLeft + toggleAt + "space toggle".length, row: firstRow },
+            { kind: "filter", start: 1 + actionLeft + filterAt, end: 1 + actionLeft + filterAt + "f filter".length, row: firstRow },
+            { kind: "footer-reload", start: 1 + actionLeft + reloadAt, end: 1 + actionLeft + reloadAt + "r reload".length, row: firstRow },
+        ];
+        return [this.frameLine(action, innerWidth), this.frameLine(nav, innerWidth)];
+    }
+    buildRows(contentWidth) {
+        const theme = this.options.theme ?? darkTheme;
+        const query = this.search.getValue().trim().toLocaleLowerCase();
+        const rows = [];
+        const records = this.registry.all();
+        for (const source of GROUP_ORDER) {
+            const members = records
+                .filter((skill) => skill.source === source)
+                .filter((skill) => {
+                const enabled = this.registry.isEnabled(skill.meta.name);
+                if (this.filter === "enabled" && !enabled)
+                    return false;
+                if (this.filter === "disabled" && enabled)
+                    return false;
+                return matchesSkill(skill, query).matches;
+            })
+                .sort((a, b) => {
+                const aMatch = matchesSkill(a, query);
+                const bMatch = matchesSkill(b, query);
+                if (aMatch.nameHit !== bMatch.nameHit)
+                    return aMatch.nameHit ? -1 : 1;
+                return a.meta.name.localeCompare(b.meta.name);
+            });
+            if (members.length === 0)
+                continue;
+            const forcedOpen = query.length > 0;
+            const collapsed = !forcedOpen && this.collapsedGroups.has(source);
+            const groupEntry = { key: sourceKey(source), kind: "group", group: source };
+            rows.push({
+                key: groupEntry.key,
+                selectable: groupEntry,
+                text: `${collapsed ? "›" : "⌄"} ${GROUP_LABEL[source]} (${members.length} skill${members.length === 1 ? "" : "s"})`,
+            });
+            if (collapsed)
+                continue;
+            for (const skill of members) {
+                const enabled = this.registry.isEnabled(skill.meta.name);
+                const badge = this.actionBadges.get(skill.meta.name)?.text;
+                const status = badge
+                    ? themeForeground(theme.accent, `[${badge}]`)
+                    : enabled
+                        ? ""
+                        : themeForeground(theme.error, "[disabled]");
+                const author = skill.meta.author ? ` · ${skill.meta.author}` : "";
+                const right = `${status}${status && (author || skillSourceLabel(skill)) ? " " : ""}(${skillSourceLabel(skill)}${author})`;
+                const key = skillKey(skill.meta.name);
+                const entry = { key, kind: "skill", group: source, skill };
+                const left = `  ${this.selectedKey === key && !this.searchActive ? "›" : " "} ${skill.meta.name}`;
+                rows.push({
+                    key,
+                    selectable: entry,
+                    text: enabled
+                        ? alignSides(left, right, contentWidth)
+                        : themeDim(theme.dim, alignSides(left, right, contentWidth)),
+                });
+                if (this.expandedSkills.has(skill.meta.name)) {
+                    rows.push(...this.skillDetailRows(skill, contentWidth));
+                }
+            }
+        }
+        if (rows.length === 0) {
+            const message = records.length === 0
+                ? "No skills discovered. Add SKILL.md under ~/.bubble/skills or .bubble/skills."
+                : query
+                    ? `No skills matched “${this.search.getValue().trim()}”.`
+                    : `No ${filterLabel(this.filter).toLocaleLowerCase()} skills.`;
+            rows.push({ text: themeForeground(theme.muted, message) });
+        }
+        return rows;
+    }
+    skillDetailRows(skill, width) {
+        const theme = this.options.theme ?? darkTheme;
+        const indent = "      ";
+        const detailWidth = Math.max(1, width - visibleWidth(indent));
+        const rows = wrapTextWithAnsi(themeForeground(theme.muted, skill.meta.description), detailWidth)
+            .map((line) => ({ text: `${indent}${line}` }));
+        const fields = [
+            ["path", friendlyPath(skill.skillFile)],
+            ["author", skill.meta.author],
+            ["tools", skill.meta.allowedTools?.join(", ")],
+            ["tags", skill.meta.tags?.join(", ")],
+            ["resources", this.resourceSummary(skill)],
+            ["model invocation", skill.meta.disableModelInvocation ? "manual only" : undefined],
+        ];
+        for (const [label, value] of fields) {
+            if (!value)
+                continue;
+            const prefix = `${indent}${themeDim(theme.dim, `${label}:`)} `;
+            const prefixWidth = visibleWidth(`${indent}${label}: `);
+            const wrapped = wrapTextWithAnsi(themeForeground(theme.muted, value), Math.max(1, width - prefixWidth));
+            rows.push({ text: `${prefix}${wrapped[0] ?? ""}` });
+            for (const continuation of wrapped.slice(1)) {
+                rows.push({ text: `${" ".repeat(prefixWidth)}${continuation}` });
+            }
+        }
+        return rows;
+    }
+    resourceSummary(skill) {
+        const parts = [
+            skill.resources.references.length > 0 ? `${skill.resources.references.length} references` : "",
+            skill.resources.scripts.length > 0 ? `${skill.resources.scripts.length} scripts` : "",
+            skill.resources.assets.length > 0 ? `${skill.resources.assets.length} assets` : "",
+        ].filter(Boolean);
+        return parts.length > 0 ? parts.join(" · ") : undefined;
+    }
+    seedCollapsedGroups() {
+        for (const skill of this.registry.all())
+            this.collapsedGroups.add(skill.source);
+    }
+    ensureSelection() {
+        if (this.selectableEntries.length === 0) {
+            this.selectedKey = undefined;
+            return;
+        }
+        if (!this.selectedKey || !this.selectableEntries.some((entry) => entry.key === this.selectedKey)) {
+            this.selectedKey = this.selectableEntries[0].key;
+        }
+    }
+    moveSelection(delta) {
+        if (this.selectableEntries.length === 0)
+            return;
+        const current = Math.max(0, this.selectableEntries.findIndex((entry) => entry.key === this.selectedKey));
+        const next = Math.max(0, Math.min(this.selectableEntries.length - 1, current + delta));
+        this.selectedKey = this.selectableEntries[next].key;
+        this.manuallyScrolled = false;
+        this.options.onRender();
+    }
+    selectBoundary(boundary) {
+        if (this.selectableEntries.length === 0)
+            return;
+        this.selectedKey = boundary === "first"
+            ? this.selectableEntries[0].key
+            : this.selectableEntries[this.selectableEntries.length - 1].key;
+        this.manuallyScrolled = false;
+        this.options.onRender();
+    }
+    selectedEntry() {
+        return this.selectableEntries.find((entry) => entry.key === this.selectedKey);
+    }
+    toggleExpanded(collapseOnly = false) {
+        const entry = this.selectedEntry();
+        if (!entry)
+            return;
+        this.manuallyScrolled = false;
+        if (entry.kind === "group") {
+            const collapsed = this.collapsedGroups.has(entry.group);
+            if (collapseOnly && !collapsed)
+                this.collapsedGroups.add(entry.group);
+            else if (!collapseOnly) {
+                if (collapsed)
+                    this.collapsedGroups.delete(entry.group);
+                else
+                    this.collapsedGroups.add(entry.group);
+            }
+        }
+        else if (entry.skill) {
+            const name = entry.skill.meta.name;
+            const expanded = this.expandedSkills.has(name);
+            if (collapseOnly && expanded)
+                this.expandedSkills.delete(name);
+            else if (!collapseOnly) {
+                if (expanded)
+                    this.expandedSkills.delete(name);
+                else
+                    this.expandedSkills.add(name);
+            }
+        }
+        this.options.onRender();
+    }
+    collapseSelected() {
+        this.toggleExpanded(true);
+    }
+    toggleEnabled() {
+        const entry = this.selectedEntry();
+        if (entry?.kind !== "skill" || !entry.skill)
+            return;
+        const name = entry.skill.meta.name;
+        const enabled = !this.registry.isEnabled(name);
+        if (!this.registry.setEnabled(name, enabled))
+            return;
+        this.actionBadges.set(name, { text: enabled ? "enabled" : "disabled", expiresAt: Date.now() + 1_500 });
+        this.options.onSkillsChanged();
+        setTimeout(() => {
+            const badge = this.actionBadges.get(name);
+            if (badge && badge.expiresAt <= Date.now()) {
+                this.actionBadges.delete(name);
+                this.options.onRender();
+            }
+        }, 1_550);
+        this.options.onRender();
+    }
+    cycleFilter() {
+        this.filter = nextFilter(this.filter);
+        this.selectedKey = undefined;
+        this.offset = 0;
+        this.manuallyScrolled = false;
+        this.options.onRender();
+    }
+    reload() {
+        this.registry.reload();
+        this.seedCollapsedGroups();
+        this.selectedKey = undefined;
+        this.offset = 0;
+        this.manuallyScrolled = false;
+        this.options.onSkillsChanged();
+        this.options.onRender();
+    }
+    startSearch() {
+        if (this.searchActive)
+            return;
+        this.searchActive = true;
+        this.hoveredKey = undefined;
+        this.manuallyScrolled = false;
+        this.search.focused = this.focused;
+        this.options.onRender();
+    }
+    stopSearch() {
+        if (!this.searchActive && !this.search.getValue())
+            return;
+        this.searchActive = false;
+        this.search.setValue("");
+        this.search.focused = false;
+        this.selectedKey = undefined;
+        this.offset = 0;
+        this.manuallyScrolled = false;
+        this.options.onRender();
+    }
+    scroll(delta) {
+        const next = Math.max(0, this.offset + delta);
+        if (next === this.offset)
+            return;
+        this.offset = next;
+        this.manuallyScrolled = true;
+        this.options.onRender();
+    }
+    pruneBadges() {
+        const now = Date.now();
+        for (const [name, badge] of this.actionBadges) {
+            if (badge.expiresAt <= now)
+                this.actionBadges.delete(name);
+        }
+    }
+}

package/dist/tui/components/stats-panel.d.ts

@@ -0,0 +1,40 @@
+import { type Component, type Focusable, type TuiMouseEvent } from "@bubblebrain-ai/pi-tui";
+import { type StatsRange, type UsageStatsBundle } from "../../stats/usage.js";
+import { type Theme } from "../model/theme.js";
+export interface StatsPanelComponentOptions {
+    getTerminalRows(): number;
+    onClose(): void;
+    onRender(): void;
+    theme?: Theme;
+}
+export declare function buildStatsPanelLines(bundle: UsageStatsBundle, range: StatsRange, contentWidth: number, expandedModels?: boolean, theme?: Theme): string[];
+/** A /context-style usage overlay with range switching and scrolling. */
+export declare class StatsPanelComponent implements Component, Focusable {
+    private readonly bundle;
+    private readonly options;
+    focused: boolean;
+    private range;
+    private offset;
+    private bodyRows;
+    private contentRows;
+    private frameWidth;
+    private tabHits;
+    private modelToggleHit;
+    private hoveredTab;
+    private modelToggleHovered;
+    private closeHovered;
+    private modelsExpanded;
+    constructor(bundle: UsageStatsBundle, options: StatsPanelComponentOptions);
+    render(width: number): string[];
+    handleInput(data: string): void;
+    handleMouse(event: TuiMouseEvent): boolean;
+    invalidate(): void;
+    private frameLine;
+    private renderTabs;
+    private renderFooter;
+    private stepRange;
+    private selectRange;
+    private toggleModels;
+    private scroll;
+    private setOffset;
+}