@pentoshi/clai 2.0.61 → 3.0.0

package/dist/tui-v2/components/transcript/compacted-row.d.ts

@@ -0,0 +1,19 @@
+/** @jsxImportSource @opentui/react */
+/**
+ * Compacted-context card — same shape as tool OUTPUT cards (CHAT-007).
+ *
+ * Auto and manual `/compact` both land here. Collapsed shows head + tail like
+ * tool output; Ctrl+O (global output expand) or click expands/collapses in place.
+ */
+import { type ReactNode } from "react";
+import type { CompactedItem } from "../../state/transcript-types.js";
+import type { Theme } from "../../rendering/theme.js";
+export declare function CompactedRow(props: {
+    item: CompactedItem;
+    theme: Theme;
+    /** Chat-pane columns (plan split/overlay already subtracted). */
+    contentWidth?: number | undefined;
+    /** Ctrl+O global / per-item expand (same flag as tool OUTPUT). */
+    expanded: boolean;
+    onToggle: () => void;
+}): ReactNode;

package/dist/tui-v2/components/transcript/compacted-row.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+/** @jsxImportSource @opentui/react */
+/**
+ * Compacted-context card — same shape as tool OUTPUT cards (CHAT-007).
+ *
+ * Auto and manual `/compact` both land here. Collapsed shows head + tail like
+ * tool output; Ctrl+O (global output expand) or click expands/collapses in place.
+ */
+import { useMemo } from "react";
+import { TextAttributes } from "@opentui/core";
+import { useTerminalDimensions } from "@opentui/react";
+import { displayCompactSummary } from "../../state/transcript-hydrate.js";
+import { renderMarkdownLines } from "../../rendering/render-markdown-lines.js";
+import { useClickWithoutDrag } from "./use-click-without-drag.js";
+const COLLAPSED_HEAD = 4;
+const COLLAPSED_TAIL = 4;
+export function CompactedRow(props) {
+    const { item, theme, contentWidth, expanded, onToggle } = props;
+    const { width: termWidth } = useTerminalDimensions();
+    // Card has border + horizontal padding (~4 cols of chrome).
+    const wrapWidth = Math.max(20, contentWidth != null
+        ? Math.max(20, contentWidth - 4)
+        : Math.max(40, termWidth - 10));
+    const summary = displayCompactSummary(item.summary);
+    const allLines = useMemo(() => renderMarkdownLines(summary, {
+        width: wrapWidth,
+        defaultFg: theme.foreground,
+        stripOuterIndent: true,
+    }), [summary, wrapWidth, theme.foreground]);
+    const bodyLines = useMemo(() => {
+        if (expanded || allLines.length <= COLLAPSED_HEAD + COLLAPSED_TAIL) {
+            return allLines.map((content) => ({ kind: "text", content }));
+        }
+        const hidden = allLines.length - COLLAPSED_HEAD - COLLAPSED_TAIL;
+        const out = [];
+        for (const content of allLines.slice(0, COLLAPSED_HEAD)) {
+            out.push({ kind: "text", content });
+        }
+        out.push({ kind: "gap", hidden });
+        for (const content of allLines.slice(-COLLAPSED_TAIL)) {
+            out.push({ kind: "text", content });
+        }
+        return out;
+    }, [allLines, expanded]);
+    const hiddenCount = bodyLines.find((l) => l.kind === "gap")?.hidden ?? 0;
+    const tokenLabel = item.beforeTokens > 0 || item.afterTokens > 0
+        ? `~${item.beforeTokens.toLocaleString()} → ~${item.afterTokens.toLocaleString()} tokens`
+        : "";
+    const click = useClickWithoutDrag(() => {
+        onToggle();
+    });
+    const footerHint = expanded
+        ? "expanded · click or Ctrl+O to collapse"
+        : hiddenCount > 0
+            ? `+${hiddenCount} more · click or Ctrl+O to expand`
+            : "click or Ctrl+O to expand";
+    const borderFg = theme.activity;
+    return (_jsxs("box", { id: item.id, border: true, borderStyle: "rounded", style: {
+            flexDirection: "column",
+            width: "100%",
+            marginBottom: 1,
+            borderColor: borderFg,
+            backgroundColor: theme.statusBackground,
+            paddingLeft: 1,
+            paddingRight: 1,
+            paddingTop: 0,
+            paddingBottom: 0,
+        }, onMouseDown: click.onMouseDown, onMouseUp: click.onMouseUp, children: [_jsxs("box", { style: {
+                    flexDirection: "row",
+                    width: "100%",
+                    paddingTop: 0,
+                    paddingBottom: 0,
+                }, children: [_jsx("text", { selectable: true, style: { fg: borderFg, attributes: TextAttributes.BOLD }, children: "\u2726 Compacted context" }), _jsx("text", { content: " ", selectable: true }), _jsx("text", { selectable: true, style: {
+                            fg: borderFg,
+                            bg: theme.chip,
+                            attributes: TextAttributes.BOLD,
+                        }, children: " memory " }), tokenLabel ? (_jsxs(_Fragment, { children: [_jsx("text", { content: " ", selectable: true }), _jsx("text", { selectable: true, style: { fg: theme.muted, attributes: TextAttributes.DIM }, children: tokenLabel })] })) : null] }), bodyLines.length > 0 ? (_jsxs("box", { style: {
+                    flexDirection: "column",
+                    width: "100%",
+                    marginTop: 0,
+                    flexShrink: 1,
+                }, children: [_jsx("text", { selectable: true, style: {
+                            fg: theme.white,
+                            bg: theme.chipTeal,
+                            attributes: TextAttributes.BOLD,
+                        }, children: " SUMMARY " }), bodyLines.map((line, i) => {
+                        if (line.kind === "gap") {
+                            return (_jsxs("text", { selectable: true, children: [_jsx("span", { style: { fg: theme.muted }, children: "│ " }), _jsx("span", { style: { fg: theme.muted, attributes: TextAttributes.DIM }, children: `··· ${line.hidden} lines more ···` })] }, `gap-${i}`));
+                        }
+                        // Prefixed gutter like tool OUTPUT rows; markdown body is StyledText.
+                        return (_jsxs("box", { style: { flexDirection: "row", width: "100%" }, children: [_jsx("text", { selectable: true, style: { fg: theme.muted }, children: "│ " }), _jsx("text", { content: line.content, selectable: true })] }, `l-${i}`));
+                    })] })) : null, _jsxs("box", { style: { flexDirection: "row", width: "100%", marginTop: 0 }, children: [_jsx("text", { selectable: false, style: { fg: theme.cyan }, children: "› " }), _jsx("text", { selectable: false, style: { fg: theme.cyan, attributes: TextAttributes.DIM }, children: footerHint })] })] }));
+}
+//# sourceMappingURL=compacted-row.js.map

package/dist/tui-v2/components/transcript/compacted-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compacted-row.js","sourceRoot":"","sources":["../../../../src/tui-v2/components/transcript/compacted-row.tsx"],"names":[],"mappings":"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"}

package/dist/tui-v2/components/transcript/intro-card.d.ts

@@ -0,0 +1,19 @@
+/** @jsxImportSource @opentui/react */
+/**
+ * Startup intro / model card for OpenTUI v2.
+ *
+ * Same layout and colors as the legacy Ink TUI: chalk lines from
+ * `renderIntroHeaderLines` converted to OpenTUI `StyledText` so chips,
+ * badges, and the wordmark gradient keep their colors (not B&W).
+ * Always the first scroll child so it scrolls with chat.
+ */
+import { type ReactNode } from "react";
+import type { AppServices } from "../../bootstrap/composition-root.js";
+import type { Theme } from "../../rendering/theme.js";
+export interface IntroCardProps {
+    readonly services: AppServices;
+    readonly theme: Theme;
+    /** Available width of the chat pane (fallback: full terminal width). */
+    readonly width?: number | undefined;
+}
+export declare function IntroCard(props: IntroCardProps): ReactNode;

package/dist/tui-v2/components/transcript/intro-card.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "@opentui/react/jsx-runtime";
+/** @jsxImportSource @opentui/react */
+/**
+ * Startup intro / model card for OpenTUI v2.
+ *
+ * Same layout and colors as the legacy Ink TUI: chalk lines from
+ * `renderIntroHeaderLines` converted to OpenTUI `StyledText` so chips,
+ * badges, and the wordmark gradient keep their colors (not B&W).
+ * Always the first scroll child so it scrolls with chat.
+ */
+import { useMemo } from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import { homedir } from "node:os";
+import { ansiToStyledText } from "../../rendering/ansi-to-styled.js";
+import { renderIntroHeaderLines } from "../../../ui/intro-header.js";
+import { getCurrentVersion } from "../../../commands/update.js";
+import { getConfig } from "../../../store/config.js";
+import { safeCwd } from "../../../os/cwd.js";
+function displayWorkdir(workdir) {
+    const home = homedir();
+    return workdir.startsWith(home) ? `~${workdir.slice(home.length)}` : workdir;
+}
+export function IntroCard(props) {
+    const { services, width: widthProp } = props;
+    const { width: termWidth } = useTerminalDimensions();
+    const width = widthProp ?? Math.max(56, termWidth - 4);
+    const session = services.session.getState();
+    const permissions = getConfig().permissions ?? "default";
+    const version = getCurrentVersion();
+    const workdir = displayWorkdir(safeCwd());
+    const lines = useMemo(() => renderIntroHeaderLines({
+        width,
+        version,
+        mode: session.mode,
+        provider: session.provider ?? "default",
+        model: session.model ?? "",
+        permissions,
+        workdir,
+    }).map((line) => ansiToStyledText(line.length === 0 ? " " : line)), [
+        width,
+        version,
+        session.mode,
+        session.provider,
+        session.model,
+        permissions,
+        workdir,
+    ]);
+    return (_jsx("box", { id: "intro-card", style: { flexDirection: "column", width: "100%", marginBottom: 1 }, children: lines.map((content, i) => (_jsx("text", { content: content, selectable: false }, i))) }));
+}
+//# sourceMappingURL=intro-card.js.map

package/dist/tui-v2/components/transcript/intro-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"intro-card.js","sourceRoot":"","sources":["../../../../src/tui-v2/components/transcript/intro-card.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC;;;;;;;GAOG;AAEH,OAAO,EAAE,OAAO,EAAkB,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAGlC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAS7C,SAAS,cAAc,CAAC,OAAe;IACrC,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IACvB,OAAO,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;AAC/E,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAC7C,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,qBAAqB,EAAE,CAAC;IACrD,MAAM,KAAK,GAAG,SAAS,IAAI,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,SAAS,GAAG,CAAC,CAAC,CAAC;IAEvD,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;IAC5C,MAAM,WAAW,GAAG,SAAS,EAAE,CAAC,WAAW,IAAI,SAAS,CAAC;IACzD,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IACpC,MAAM,OAAO,GAAG,cAAc,CAAC,OAAO,EAAE,CAAC,CAAC;IAE1C,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CACH,sBAAsB,CAAC;QACrB,KAAK;QACL,OAAO;QACP,IAAI,EAAE,OAAO,CAAC,IAAI;QAClB,QAAQ,EAAE,OAAO,CAAC,QAAQ,IAAI,SAAS;QACvC,KAAK,EAAE,OAAO,CAAC,KAAK,IAAI,EAAE;QAC1B,WAAW;QACX,OAAO;KACR,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,EACpE;QACE,KAAK;QACL,OAAO;QACP,OAAO,CAAC,IAAI;QACZ,OAAO,CAAC,QAAQ;QAChB,OAAO,CAAC,KAAK;QACb,WAAW;QACX,OAAO;KACR,CACF,CAAC;IAEF,OAAO,CACL,cACE,EAAE,EAAC,YAAY,EACf,KAAK,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,EAAE,YAEjE,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CACzB,eAAc,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,IAAtC,CAAC,CAAyC,CACtD,CAAC,GACE,CACP,CAAC;AACJ,CAAC"}

package/dist/tui-v2/components/transcript/linkable-text.d.ts

@@ -0,0 +1,21 @@
+/** @jsxImportSource @opentui/react */
+/**
+ * Renders plain text with detected URLs/paths as real hyperlinks (P1
+ * "clickable links/file paths"; V2-055). `<a href>` emits the terminal's
+ * native OSC 8 hyperlink, so the host terminal's own click/modifier
+ * convention applies — there is no custom open-URL port to build here.
+ *
+ * Only absolute (`/...`) and home-relative (`~/...`) paths resolve to a
+ * `file://` href; a bare relative path (`./foo.ts`) has no reliable base
+ * directory at this layer, so it gets the accent color without a href rather
+ * than risking a link to the wrong file.
+ */
+import type { ReactNode } from "react";
+import type { Theme } from "../../rendering/theme.js";
+export declare function LinkableText(props: {
+    text: string;
+    theme: Theme;
+    fg?: string;
+    /** Default true; set false on clickable chrome (YOU bubble). */
+    selectable?: boolean;
+}): ReactNode;

package/dist/tui-v2/components/transcript/linkable-text.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "@opentui/react/jsx-runtime";
+/** @jsxImportSource @opentui/react */
+/**
+ * Renders plain text with detected URLs/paths as real hyperlinks (P1
+ * "clickable links/file paths"; V2-055). `<a href>` emits the terminal's
+ * native OSC 8 hyperlink, so the host terminal's own click/modifier
+ * convention applies — there is no custom open-URL port to build here.
+ *
+ * Only absolute (`/...`) and home-relative (`~/...`) paths resolve to a
+ * `file://` href; a bare relative path (`./foo.ts`) has no reliable base
+ * directory at this layer, so it gets the accent color without a href rather
+ * than risking a link to the wrong file.
+ */
+import { homedir } from "node:os";
+import { detectLinks } from "../../rendering/link-detector.js";
+function resolveHref(span) {
+    if (span.kind === "url")
+        return span.value;
+    const pathOnly = span.value.split(":")[0] ?? span.value;
+    if (pathOnly.startsWith("/"))
+        return `file://${pathOnly}`;
+    if (pathOnly.startsWith("~/"))
+        return `file://${homedir()}${pathOnly.slice(1)}`;
+    return undefined;
+}
+export function LinkableText(props) {
+    const { text, theme, fg, selectable = true } = props;
+    const spans = detectLinks(text);
+    if (spans.length === 0) {
+        return (_jsx("text", { selectable: selectable, style: { fg: fg ?? theme.foreground }, children: text }));
+    }
+    const nodes = [];
+    let cursor = 0;
+    for (const span of spans) {
+        if (span.start > cursor)
+            nodes.push(text.slice(cursor, span.start));
+        const href = resolveHref(span);
+        const key = `${span.start}-${span.end}`;
+        nodes.push(href ? (_jsx("a", { href: href, style: { fg: theme.accent }, children: span.value }, key)) : (_jsx("span", { style: { fg: theme.accent }, children: span.value }, key)));
+        cursor = span.end;
+    }
+    if (cursor < text.length)
+        nodes.push(text.slice(cursor));
+    return (_jsx("text", { selectable: selectable, style: { fg: fg ?? theme.foreground }, children: nodes }));
+}
+//# sourceMappingURL=linkable-text.js.map

package/dist/tui-v2/components/transcript/linkable-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"linkable-text.js","sourceRoot":"","sources":["../../../../src/tui-v2/components/transcript/linkable-text.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAElC,OAAO,EAAE,WAAW,EAAiB,MAAM,kCAAkC,CAAC;AAG9E,SAAS,WAAW,CAAC,IAAc;IACjC,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK;QAAE,OAAO,IAAI,CAAC,KAAK,CAAC;IAC3C,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC;IACxD,IAAI,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC;QAAE,OAAO,UAAU,QAAQ,EAAE,CAAC;IAC1D,IAAI,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC;QAAE,OAAO,UAAU,OAAO,EAAE,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;IAChF,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,KAM5B;IACC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,UAAU,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IACrD,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;IAChC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,CACL,eAAM,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE,YAChE,IAAI,GACA,CACR,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,GAAgB,EAAE,CAAC;IAC9B,IAAI,MAAM,GAAG,CAAC,CAAC;IACf,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,IAAI,IAAI,CAAC,KAAK,GAAG,MAAM;YAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QACpE,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;QAC/B,MAAM,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;QACxC,KAAK,CAAC,IAAI,CACR,IAAI,CAAC,CAAC,CAAC,CACL,YAAa,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,MAAM,EAAE,YACjD,IAAI,CAAC,KAAK,IADL,GAAG,CAEP,CACL,CAAC,CAAC,CAAC,CACF,eAAgB,KAAK,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,MAAM,EAAE,YACxC,IAAI,CAAC,KAAK,IADF,GAAG,CAEP,CACR,CACF,CAAC;QACF,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC;IACpB,CAAC;IACD,IAAI,MAAM,GAAG,IAAI,CAAC,MAAM;QAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAEzD,OAAO,CACL,eAAM,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE,YAChE,KAAK,GACD,CACR,CAAC;AACJ,CAAC"}

package/dist/tui-v2/components/transcript/notice-row.d.ts

@@ -0,0 +1,14 @@
+/** @jsxImportSource @opentui/react */
+/**
+ * Renders a `NoticeItem` (CHAT-007, V2-051).
+ *
+ * Classic Ink: solid WARN / INFO / ERR badge, then body text that wraps in its
+ * own column so multi-line errors never paint over the badge.
+ */
+import type { ReactNode } from "react";
+import type { NoticeItem } from "../../state/transcript-types.js";
+import type { Theme } from "../../rendering/theme.js";
+export declare function NoticeRow(props: {
+    item: NoticeItem;
+    theme: Theme;
+}): ReactNode;

package/dist/tui-v2/components/transcript/notice-row.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { TextAttributes } from "@opentui/core";
+import { LinkableText } from "./linkable-text.js";
+function badge(level) {
+    // Fixed-width labels so wrap indent stays consistent across levels.
+    if (level === "warn")
+        return { label: " WARN ", fg: "#FFFFFF", bg: "#D97706" };
+    if (level === "error")
+        return { label: " ERR  ", fg: "#FFFFFF", bg: "#B91C1C" };
+    return { label: " INFO ", fg: "#FFFFFF", bg: "#334155" };
+}
+function bodyColor(level, theme) {
+    if (level === "warn")
+        return theme.activity;
+    if (level === "error")
+        return theme.mode;
+    return theme.cyan;
+}
+export function NoticeRow(props) {
+    const { item, theme } = props;
+    const b = badge(item.level);
+    return (_jsxs("box", { id: item.id, style: {
+            marginBottom: 1,
+            flexDirection: "row",
+            width: "100%",
+            alignItems: "flex-start",
+        }, children: [_jsx("text", { selectable: true, style: {
+                    fg: b.fg,
+                    bg: b.bg,
+                    attributes: TextAttributes.BOLD,
+                    flexShrink: 0,
+                }, children: b.label }), _jsx("box", { style: {
+                    flexGrow: 1,
+                    flexShrink: 1,
+                    flexDirection: "column",
+                    paddingLeft: 1,
+                    minWidth: 0,
+                }, children: _jsx(LinkableText, { text: item.text, theme: theme, fg: bodyColor(item.level, theme), selectable: true }) })] }));
+}
+//# sourceMappingURL=notice-row.js.map

package/dist/tui-v2/components/transcript/notice-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notice-row.js","sourceRoot":"","sources":["../../../../src/tui-v2/components/transcript/notice-row.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAG/C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,SAAS,KAAK,CAAC,KAAkB;IAC/B,oEAAoE;IACpE,IAAI,KAAK,KAAK,MAAM;QAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC;IAC/E,IAAI,KAAK,KAAK,OAAO;QAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC;IAChF,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC;AAC3D,CAAC;AAED,SAAS,SAAS,CAAC,KAAkB,EAAE,KAAY;IACjD,IAAI,KAAK,KAAK,MAAM;QAAE,OAAO,KAAK,CAAC,QAAQ,CAAC;IAC5C,IAAI,KAAK,KAAK,OAAO;QAAE,OAAO,KAAK,CAAC,IAAI,CAAC;IACzC,OAAO,KAAK,CAAC,IAAI,CAAC;AACpB,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,KAAyC;IACjE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAC9B,MAAM,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5B,OAAO,CACL,eACE,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,KAAK,EAAE;YACL,YAAY,EAAE,CAAC;YACf,aAAa,EAAE,KAAK;YACpB,KAAK,EAAE,MAAM;YACb,UAAU,EAAE,YAAY;SACzB,aAED,eACE,UAAU,QACV,KAAK,EAAE;oBACL,EAAE,EAAE,CAAC,CAAC,EAAE;oBACR,EAAE,EAAE,CAAC,CAAC,EAAE;oBACR,UAAU,EAAE,cAAc,CAAC,IAAI;oBAC/B,UAAU,EAAE,CAAC;iBACd,YAEA,CAAC,CAAC,KAAK,GACH,EACP,cACE,KAAK,EAAE;oBACL,QAAQ,EAAE,CAAC;oBACX,UAAU,EAAE,CAAC;oBACb,aAAa,EAAE,QAAQ;oBACvB,WAAW,EAAE,CAAC;oBACd,QAAQ,EAAE,CAAC;iBACZ,YAED,KAAC,YAAY,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,UAAU,SAAG,GACxF,IACF,CACP,CAAC;AACJ,CAAC"}

package/dist/tui-v2/components/transcript/search-bar.d.ts

@@ -0,0 +1,19 @@
+/** @jsxImportSource @opentui/react */
+/**
+ * Transcript search input (CHAT/V2-057). Purely a text field plus a match
+ * counter; query matching and index navigation live in the renderer-
+ * independent `transcript-search.ts` and are owned by `TranscriptView`, which
+ * also handles Escape (global key handling can't be typed on `<input>`'s
+ * React props — see that component for why).
+ */
+import type { ReactNode } from "react";
+import type { Theme } from "../../rendering/theme.js";
+export interface SearchBarProps {
+    readonly theme: Theme;
+    readonly query: string;
+    readonly matchCount: number;
+    readonly activeOrdinal: number;
+    readonly onQueryChange: (value: string) => void;
+    readonly onSubmit: () => void;
+}
+export declare function SearchBar(props: SearchBarProps): ReactNode;

package/dist/tui-v2/components/transcript/search-bar.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+export function SearchBar(props) {
+    const { theme, query, matchCount, activeOrdinal, onQueryChange, onSubmit } = props;
+    const status = matchCount > 0 ? `${activeOrdinal}/${matchCount}` : query ? "no matches" : "";
+    return (_jsxs("box", { style: { flexDirection: "row", backgroundColor: theme.statusBackground, paddingLeft: 1 }, children: [_jsx("text", { style: { fg: theme.muted }, children: "type:filter  " }), _jsx("input", { focused: true, value: query, onInput: onQueryChange, onSubmit: onSubmit, textColor: theme.foreground, backgroundColor: theme.statusBackground, style: { flexGrow: 1 } }), _jsxs("text", { style: { fg: theme.muted }, children: [" ", status, "  \u00B7  enter:next  \u00B7  esc:close"] })] }));
+}
+//# sourceMappingURL=search-bar.js.map

package/dist/tui-v2/components/transcript/search-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-bar.js","sourceRoot":"","sources":["../../../../src/tui-v2/components/transcript/search-bar.tsx"],"names":[],"mappings":";AAqBA,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACnF,MAAM,MAAM,GAAG,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,aAAa,IAAI,UAAU,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7F,OAAO,CACL,eAAK,KAAK,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,CAAC,gBAAgB,EAAE,WAAW,EAAE,CAAC,EAAE,aAC3F,eAAM,KAAK,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,KAAK,EAAE,8BAAsB,EACtD,gBACE,OAAO,QACP,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,KAAK,CAAC,UAAU,EAC3B,eAAe,EAAE,KAAK,CAAC,gBAAgB,EACvC,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,GACtB,EACF,gBAAM,KAAK,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,KAAK,EAAE,aAC7B,GAAG,EACH,MAAM,+CACF,IACH,CACP,CAAC;AACJ,CAAC"}

package/dist/tui-v2/components/transcript/thinking-block.d.ts

@@ -0,0 +1,22 @@
+/** @jsxImportSource @opentui/react */
+/**
+ * Renders a `ThinkingItem` (CHAT-006, V2-053).
+ *
+ * Live stream: while the model is still reasoning (`item.streaming`), the body
+ * is always shown — same as the classic TUI's thinking preview. After the
+ * block is finalized, the body follows the global Ctrl+T toggle (or a per-
+ * block override from clicking the header).
+ *
+ * Placement: thinking rows always precede the ◆ Response / tool cards for
+ * the same model step (agent emits thinking-block before assistant-message
+ * and tool-call). Violet accent distinguishes reasoning from green replies.
+ */
+import type { ReactNode } from "react";
+import type { ThinkingItem } from "../../state/transcript-types.js";
+import type { Theme } from "../../rendering/theme.js";
+export declare function ThinkingBlock(props: {
+    item: ThinkingItem;
+    theme: Theme;
+    expanded: boolean;
+    onToggle: () => void;
+}): ReactNode;

package/dist/tui-v2/components/transcript/thinking-block.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { TextAttributes } from "@opentui/core";
+export function ThinkingBlock(props) {
+    const { item, theme, expanded, onToggle } = props;
+    // Always show live content while streaming; after finalize, honor toggle.
+    const showBody = item.streaming || expanded;
+    const onMouseUp = (event) => {
+        event.preventDefault();
+        // Only allow collapse/expand once the block is complete.
+        if (item.streaming)
+            return;
+        onToggle();
+    };
+    const header = item.streaming
+        ? "✦ thinking…"
+        : showBody
+            ? "▾ thinking"
+            : "▸ thinking · ctrl+t or click to view";
+    return (_jsxs("box", { id: item.id, style: { flexDirection: "column", marginBottom: 1, width: "100%" }, children: [_jsx("box", { onMouseUp: onMouseUp, style: { flexDirection: "row" }, children: _jsx("text", { selectable: true, style: {
+                        fg: theme.thinking,
+                        attributes: TextAttributes.ITALIC,
+                    }, children: header }) }), showBody && item.content ? (_jsx("box", { style: { flexDirection: "column", paddingLeft: 2 }, children: _jsx("text", { selectable: true, style: {
+                        fg: theme.thinking,
+                        attributes: TextAttributes.ITALIC,
+                    }, children: item.content }) })) : null] }));
+}
+//# sourceMappingURL=thinking-block.js.map

package/dist/tui-v2/components/transcript/thinking-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"thinking-block.js","sourceRoot":"","sources":["../../../../src/tui-v2/components/transcript/thinking-block.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,cAAc,EAAmB,MAAM,eAAe,CAAC;AAIhE,MAAM,UAAU,aAAa,CAAC,KAK7B;IACC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAClD,0EAA0E;IAC1E,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,IAAI,QAAQ,CAAC;IAC5C,MAAM,SAAS,GAAG,CAAC,KAAiB,EAAQ,EAAE;QAC5C,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,yDAAyD;QACzD,IAAI,IAAI,CAAC,SAAS;YAAE,OAAO;QAC3B,QAAQ,EAAE,CAAC;IACb,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS;QAC3B,CAAC,CAAC,aAAa;QACf,CAAC,CAAC,QAAQ;YACR,CAAC,CAAC,YAAY;YACd,CAAC,CAAC,sCAAsC,CAAC;IAE7C,OAAO,CACL,eAAK,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,aAClF,cAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,YACxD,eACE,UAAU,QACV,KAAK,EAAE;wBACL,EAAE,EAAE,KAAK,CAAC,QAAQ;wBAClB,UAAU,EAAE,cAAc,CAAC,MAAM;qBAClC,YAEA,MAAM,GACF,GACH,EACL,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAC1B,cAAK,KAAK,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,EAAE,YACrD,eACE,UAAU,QACV,KAAK,EAAE;wBACL,EAAE,EAAE,KAAK,CAAC,QAAQ;wBAClB,UAAU,EAAE,cAAc,CAAC,MAAM;qBAClC,YAEA,IAAI,CAAC,OAAO,GACR,GACH,CACP,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC"}

package/dist/tui-v2/components/transcript/tool-card.d.ts

@@ -0,0 +1,26 @@
+/** @jsxImportSource @opentui/react */
+/**
+ * Tool card: flat single-border pane (classic parity — no 3D depth / outer plate).
+ *
+ * Click (body or footer) opens the full-output pager modal — unless the card is
+ * already expanded in place via Ctrl+O. Ctrl+O expands every card to show the
+ * full cleaned body; click does not toggle expand (classic: keyboard expands,
+ * click opens the unbounded viewer).
+ *
+ * tool.batch: parent card nests one mini-card per sub-tool. Click the parent
+ * (header/footer) for the full batch; click a sub-card for that call only.
+ * Ctrl+O expands sub-bodies in place the same as a normal tool.
+ */
+import type { ReactNode } from "react";
+import type { OutputSpool } from "../../../app/events/event-buffer.js";
+import type { AppServices } from "../../bootstrap/composition-root.js";
+import type { ToolItem } from "../../state/transcript-types.js";
+import type { Theme } from "../../rendering/theme.js";
+export declare function ToolCard(props: {
+    item: ToolItem;
+    theme: Theme;
+    spool: OutputSpool;
+    expanded: boolean;
+    services: AppServices;
+    onToggle: () => void;
+}): ReactNode;

package/dist/tui-v2/components/transcript/tool-card.js

@@ -0,0 +1,175 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@opentui/react/jsx-runtime";
+import { TextAttributes } from "@opentui/core";
+import { batchSummaryLine, formatBatchSectionForPager, isBatchToolName, parseBatchSections, presentBatchSection, } from "../../rendering/batch-sections.js";
+import { presentOutput, presentTool } from "../../rendering/tool-presenter.js";
+import { openToolOutputPager } from "../../rendering/open-tool-output.js";
+import { LinkableText } from "./linkable-text.js";
+import { useClickWithoutDrag } from "./use-click-without-drag.js";
+const STATUS_COLOR = {
+    running: "activity",
+    ok: "response",
+    failed: "mode",
+    blocked: "mode",
+};
+function OutputLines(props) {
+    const { lines, theme, gutterFg } = props;
+    // Tool/output body: CLAI wordmark magenta (same as task-pane border / logo "I").
+    const bodyFg = theme.magenta;
+    return (_jsx(_Fragment, { children: lines.map((line, i) => {
+            const isGap = line.startsWith("···");
+            return (_jsxs("text", { selectable: true, children: [_jsx("span", { style: { fg: isGap ? theme.muted : gutterFg }, children: "│ " }), _jsx("span", { style: {
+                            fg: isGap ? theme.muted : bodyFg,
+                            attributes: isGap ? TextAttributes.DIM : TextAttributes.NONE,
+                        }, children: line })] }, i));
+        }) }));
+}
+function BatchSubCard(props) {
+    const { section, theme, expanded, parentExpanded, onOpen } = props;
+    const presented = presentBatchSection(section, expanded);
+    const borderFg = section.ok ? theme.response : theme.mode;
+    const statusFg = borderFg;
+    // Click (no drag) opens pager; drag-select copies output lines.
+    const click = useClickWithoutDrag(() => {
+        if (parentExpanded)
+            return;
+        onOpen(section);
+    });
+    let footerHint;
+    if (presented.hasBody) {
+        if (expanded) {
+            footerHint = "expanded · Ctrl+O to collapse";
+        }
+        else if (presented.hiddenAboveCount > 0) {
+            footerHint = `+${presented.hiddenAboveCount} more · click for full · Ctrl+O to expand`;
+        }
+        else {
+            footerHint = "click for full · Ctrl+O to expand";
+        }
+    }
+    return (_jsxs("box", { border: true, borderStyle: "rounded", style: {
+            flexDirection: "column",
+            width: "100%",
+            marginTop: 1,
+            marginBottom: 0,
+            borderColor: borderFg,
+            // Match parent face — no second elevated plate.
+            backgroundColor: theme.statusBackground,
+            paddingLeft: 1,
+            paddingRight: 1,
+            paddingTop: 0,
+            paddingBottom: 0,
+        }, onMouseDown: click.onMouseDown, onMouseUp: click.onMouseUp, children: [_jsxs("box", { style: { flexDirection: "row", width: "100%" }, children: [_jsxs("text", { selectable: true, style: { fg: statusFg, attributes: TextAttributes.BOLD }, children: [presented.glyph, " ", presented.name] }), _jsx("text", { content: " ", selectable: true }), _jsx("text", { selectable: true, style: { fg: statusFg, bg: theme.chip, attributes: TextAttributes.BOLD }, children: ` ${presented.statusLabel} ` }), _jsx("text", { content: " ", selectable: true }), _jsxs("text", { selectable: true, style: { fg: theme.muted, attributes: TextAttributes.DIM }, children: ["#", section.index] })] }), presented.lines.length > 0 ? (_jsx("box", { style: {
+                    flexDirection: "column",
+                    width: "100%",
+                    marginTop: 0,
+                    flexShrink: 1,
+                }, children: _jsx(OutputLines, { lines: presented.lines, theme: theme, gutterFg: borderFg }) })) : null, footerHint ? (_jsxs("box", { style: { flexDirection: "row", width: "100%", marginTop: 0 }, children: [_jsx("text", { selectable: false, style: { fg: theme.cyan }, children: "› " }), _jsx("text", { selectable: false, style: { fg: theme.cyan, attributes: TextAttributes.DIM }, children: footerHint })] })) : null] }));
+}
+export function ToolCard(props) {
+    const { item, theme, spool, expanded, services } = props;
+    const { glyph, statusLabel, name, argsLabel, argsDisplay, detail } = presentTool(item);
+    const tail = spool.tail(item.toolCallId);
+    const spoolState = spool.state(item.toolCallId);
+    const batchSections = isBatchToolName(item.name) && item.status !== "running" && tail
+        ? parseBatchSections(tail)
+        : [];
+    const isBatch = batchSections.length > 0;
+    const { lines, hiddenAboveCount, truncatedNotice } = isBatch
+        ? { lines: [], hiddenAboveCount: 0, truncatedNotice: undefined }
+        : presentOutput(tail, spoolState, expanded);
+    const statusFg = theme[STATUS_COLOR[item.status]];
+    const highlight = item.status === "running"
+        ? theme.activity
+        : item.status === "ok"
+            ? theme.toolBorder
+            : theme.mode;
+    const hasBody = isBatch ||
+        lines.length > 0 ||
+        item.outputBytes > 0 ||
+        Boolean(item.artifactPath);
+    /** Open unbounded pager for the whole tool (or full batch). */
+    const openFull = () => {
+        if (expanded)
+            return;
+        if (item.status === "running" && !hasBody)
+            return;
+        void openToolOutputPager(services, item);
+    };
+    // Click without drag opens pager; drag-select includes output text.
+    const openFullClick = useClickWithoutDrag(openFull);
+    const openSection = (section) => {
+        void openToolOutputPager(services, {
+            toolCallId: item.toolCallId,
+            name: section.name,
+            argsDisplay: `#${section.index}`,
+            artifactPath: undefined,
+        }, {
+            bodyOverride: formatBatchSectionForPager(section),
+            titleOverride: `${section.name} · #${section.index}`,
+            skipArtifact: true,
+        });
+    };
+    // Footer: keyboard expand always advertised; click-for-modal only when collapsed.
+    let footerHint;
+    if (item.status !== "running" && hasBody) {
+        if (expanded) {
+            footerHint = isBatch
+                ? "expanded · Ctrl+O to collapse · click a sub-tool for its full output"
+                : "expanded · Ctrl+O to collapse";
+        }
+        else if (isBatch) {
+            footerHint = "click batch for full · click a sub-tool · Ctrl+O to expand";
+        }
+        else if (hiddenAboveCount > 0) {
+            footerHint = `+${hiddenAboveCount} more · click for full · Ctrl+O to expand`;
+        }
+        else {
+            footerHint = "click for full · Ctrl+O to expand";
+        }
+    }
+    else if (item.status === "running" && hasBody && !expanded) {
+        footerHint = "click for full · Ctrl+O to expand";
+    }
+    const summary = isBatch ? batchSummaryLine(batchSections) : undefined;
+    const summaryFg = isBatch && batchSections.some((s) => !s.ok) ? theme.mode : theme.muted;
+    return (_jsxs("box", { id: item.id, border: true, borderStyle: "rounded", style: {
+            flexDirection: "column",
+            width: "100%",
+            marginBottom: 1,
+            borderColor: highlight,
+            // Flat face only — no layered header/well plate outside the border.
+            backgroundColor: theme.statusBackground,
+            paddingLeft: 1,
+            paddingRight: 1,
+            paddingTop: 0,
+            paddingBottom: 0,
+        }, children: [_jsxs("box", { style: {
+                    flexDirection: "row",
+                    width: "100%",
+                    paddingTop: 0,
+                    paddingBottom: 0,
+                }, onMouseDown: openFullClick.onMouseDown, onMouseUp: openFullClick.onMouseUp, children: [_jsxs("text", { selectable: true, style: { fg: statusFg, attributes: TextAttributes.BOLD }, children: [glyph, " ", name] }), _jsx("text", { content: " ", selectable: true }), _jsx("text", { selectable: true, style: { fg: statusFg, bg: theme.chip, attributes: TextAttributes.BOLD }, children: ` ${statusLabel} ` }), isBatch ? (_jsxs(_Fragment, { children: [_jsx("text", { content: " ", selectable: true }), _jsx("text", { selectable: true, style: { fg: theme.muted, attributes: TextAttributes.DIM }, children: "batch" })] })) : null] }), argsDisplay && argsLabel ? (_jsxs("box", { style: { flexDirection: "row", width: "100%", marginTop: 0 }, children: [_jsxs("text", { selectable: true, style: { fg: theme.muted }, children: [argsLabel, ": "] }), _jsx("text", { selectable: true, style: { fg: theme.cyan }, children: argsDisplay })] })) : null, detail ? _jsx(LinkableText, { text: detail, theme: theme, fg: theme.mode, selectable: true }) : null, summary ? (_jsx("text", { selectable: true, style: { fg: summaryFg, attributes: TextAttributes.DIM }, children: summary })) : null, isBatch
+                ? batchSections.map((section) => (_jsx(BatchSubCard, { section: section, theme: theme, expanded: expanded, parentExpanded: expanded, onOpen: openSection }, `${item.id}-sub-${section.index}`)))
+                : null, !isBatch && lines.length > 0 ? (_jsxs("box", { style: {
+                    flexDirection: "column",
+                    width: "100%",
+                    paddingLeft: 0,
+                    paddingRight: 0,
+                    paddingTop: 0,
+                    paddingBottom: 0,
+                    marginTop: 0,
+                    flexShrink: 1,
+                }, onMouseDown: openFullClick.onMouseDown, onMouseUp: openFullClick.onMouseUp, children: [_jsx("text", { selectable: true, style: { fg: theme.white, bg: theme.chipTeal, attributes: TextAttributes.BOLD }, children: " OUTPUT " }), _jsx(OutputLines, { lines: lines, theme: theme, gutterFg: theme.muted })] })) : null, item.artifactPath ? (_jsxs("box", { style: { flexDirection: "row", width: "100%", marginTop: 0 }, children: [_jsx("text", { selectable: true, style: { fg: theme.white, bg: theme.chipTeal, attributes: TextAttributes.BOLD }, children: " SAVED " }), _jsx("text", { content: " ", selectable: true }), _jsx(LinkableText, { text: item.artifactPath, theme: theme, fg: theme.cyan, selectable: true })] })) : null, truncatedNotice ? (_jsx("text", { selectable: true, style: { fg: theme.muted, attributes: TextAttributes.ITALIC }, children: truncatedNotice })) : null, footerHint ? (_jsxs("box", { style: {
+                    flexDirection: "row",
+                    width: "100%",
+                    marginTop: 0,
+                    marginBottom: 0,
+                    paddingBottom: 0,
+                }, ...(expanded
+                    ? {}
+                    : {
+                        onMouseDown: openFullClick.onMouseDown,
+                        onMouseUp: openFullClick.onMouseUp,
+                    }), children: [_jsx("text", { selectable: false, style: { fg: theme.cyan }, children: "› " }), _jsx("text", { selectable: false, style: { fg: theme.cyan, attributes: TextAttributes.DIM }, children: footerHint })] })) : null] }));
+}
+//# sourceMappingURL=tool-card.js.map