@ohzw/worktree-command-tui 0.1.1 → 0.1.3

package/dist/components/ActionPanel.js

@@ -1,5 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
+import { getOrderedNonActiveTags, projectAction, projectNote, projectPullRequest, projectUpstream, projectWorkingTree, sanitizeInlineText, } from '../core/worktree-projection.js';
+import { getScrollbarThumbRows, sliceListViewport } from '../terminal/viewport.js';
+export function getActionVariant(selectedRow, activePath) {
+    return projectAction(selectedRow, activePath).severity;
+}
+function formatUpstream(selectedRow) {
+    const upstream = projectUpstream(selectedRow);
+    if (upstream.kind === 'unavailable') {
+        return 'unavailable';
+    }
+    if (upstream.kind === 'none') {
+        return '-';
+    }
+    return `${upstream.branch} (↑${upstream.ahead} ↓${upstream.behind})`;
+}
 function getTagColor(tag) {
     if (tag === 'active') {
         return 'green';
@@ -15,145 +30,89 @@ function getTagColor(tag) {
     }
     return 'magenta';
 }
-export function getActionVariant(selectedRow, activePath) {
-    if (selectedRow.invalidReason) {
-        return 'error';
-    }
-    if (selectedRow.path === activePath) {
-        return 'success';
-    }
-    if ((selectedRow.workingTree?.conflicts ?? 0) > 0) {
-        return 'error';
-    }
-    if ((selectedRow.workingTree?.staged ?? 0) > 0
-        || (selectedRow.workingTree?.unstaged ?? 0) > 0
-        || (selectedRow.workingTree?.untracked ?? 0) > 0) {
-        return 'info';
-    }
-    return 'info';
-}
-function getNoteVariant(selectedRow) {
-    if (selectedRow.invalidReason || selectedRow.tags.includes('external')) {
-        return selectedRow.invalidReason ? 'error' : 'info';
-    }
-    if ((selectedRow.workingTree?.conflicts ?? 0) > 0) {
-        return 'error';
-    }
-    if ((selectedRow.workingTree?.staged ?? 0) > 0
-        || (selectedRow.workingTree?.unstaged ?? 0) > 0
-        || (selectedRow.workingTree?.untracked ?? 0) > 0) {
-        return 'info';
-    }
-    return 'info';
+function getTagLabel(tag) {
+    return tag === 'main' ? 'root' : tag;
 }
-function sanitizeInlineText(value) {
-    return value
-        .replace(/[\r\n\t\u2028\u2029]+/g, ' ')
-        .replace(/[\u0000-\u001f\u007f-\u009f]/g, '')
-        .replace(/\p{Cf}/gu, '')
-        .replace(/\s+/g, ' ')
-        .trim();
-}
-function formatUpstream(selectedRow) {
-    if (selectedRow.upstreamUnavailable) {
-        return 'unavailable';
+function getWorkingTreePartLabel(kind) {
+    if (kind === 'staged') {
+        return 'index';
     }
-    if (!selectedRow.upstream) {
-        return '-';
+    if (kind === 'unstaged') {
+        return 'worktree';
     }
-    return `${sanitizeInlineText(selectedRow.upstream.branch)} (↑${selectedRow.upstream.ahead} ↓${selectedRow.upstream.behind})`;
+    return kind;
 }
 function formatWorkingTree(selectedRow) {
-    if (!selectedRow.workingTree) {
+    const workingTree = projectWorkingTree(selectedRow);
+    if (workingTree.kind === 'unavailable') {
         return 'unavailable';
     }
-    const { staged, unstaged, untracked, conflicts } = selectedRow.workingTree;
-    if (staged === 0 && unstaged === 0 && untracked === 0 && conflicts === 0) {
+    if (workingTree.kind === 'clean') {
         return 'clean';
     }
-    const parts = [];
-    if (staged > 0) {
-        parts.push(`index ${staged}`);
-    }
-    if (unstaged > 0) {
-        parts.push(`worktree ${unstaged}`);
-    }
-    if (untracked > 0) {
-        parts.push(`untracked ${untracked}`);
-    }
-    if (conflicts > 0) {
-        parts.push(`conflicts ${conflicts}`);
-    }
+    const parts = workingTree.parts.map(part => `${getWorkingTreePartLabel(part.kind)} ${part.count}`);
     return `dirty (${parts.join(' · ')})`;
 }
+function formatUtcDateTime(timestampMs) {
+    if (timestampMs === undefined || !Number.isFinite(timestampMs)) {
+        return '-';
+    }
+    const iso = new Date(timestampMs).toISOString();
+    return `${iso.slice(0, 10)} ${iso.slice(11, 19)} UTC`;
+}
 function formatPullRequest(selectedRow) {
-    if (!selectedRow.pullRequest || selectedRow.pullRequest.kind === 'none') {
+    const pullRequest = projectPullRequest(selectedRow);
+    if (pullRequest.kind === 'none') {
         return 'none';
     }
-    if (selectedRow.pullRequest.kind === 'unavailable') {
+    if (pullRequest.kind === 'unavailable') {
         return 'unavailable';
     }
-    const draft = selectedRow.pullRequest.isDraft ? 'draft/' : '';
-    return `#${selectedRow.pullRequest.number} ${draft}${selectedRow.pullRequest.state.toLowerCase()} → ${sanitizeInlineText(selectedRow.pullRequest.baseBranch)}`;
+    const draft = pullRequest.isDraft ? 'draft/' : '';
+    const stateText = pullRequest.state.toLowerCase();
+    return `#${pullRequest.number} ${draft}${stateText} → ${pullRequest.baseBranch}`;
 }
-function getPullRequestLabel(selectedRow) {
-    if (selectedRow.pullRequest?.kind === 'found' && selectedRow.pullRequest.state !== 'OPEN') {
-        return 'Last PR';
-    }
-    return 'PR';
-}
-function getPullRequestTitleLabel(selectedRow) {
-    if (selectedRow.pullRequest?.kind === 'found' && selectedRow.pullRequest.state !== 'OPEN') {
-        return 'Last PR Title';
-    }
-    return 'PR Title';
-}
-export function getPullRequestColor(selectedRow) {
-    if (!selectedRow.pullRequest || selectedRow.pullRequest.kind === 'none') {
-        return undefined;
-    }
-    if (selectedRow.pullRequest.kind === 'unavailable') {
+function getPullRequestColorFromProjection(pullRequest) {
+    if (pullRequest.kind === 'unavailable') {
         return 'red';
     }
-    if (selectedRow.pullRequest.state !== 'OPEN') {
+    if (pullRequest.kind !== 'found' || pullRequest.isHistorical) {
         return undefined;
     }
-    return selectedRow.pullRequest.isDraft ? 'yellow' : 'green';
+    return pullRequest.isDraft ? 'yellow' : 'green';
+}
+export function getPullRequestColor(selectedRow) {
+    return getPullRequestColorFromProjection(projectPullRequest(selectedRow));
+}
+function getPullRequestLabel(pullRequest) {
+    return pullRequest.kind === 'found' && pullRequest.isHistorical ? 'Last PR' : 'PR';
+}
+function getPullRequestTitleLabel(pullRequest) {
+    return pullRequest.kind === 'found' && pullRequest.isHistorical ? 'Last PR Title' : 'PR Title';
+}
+function getPullRequestDimColor(pullRequest) {
+    return pullRequest.kind === 'found' && pullRequest.isHistorical;
 }
 function getActionMessage(selectedRow, activePath) {
-    if (selectedRow.invalidReason) {
+    const action = projectAction(selectedRow, activePath);
+    if (action.kind === 'blocked') {
         return 'Cannot start this worktree.';
     }
-    if (selectedRow.path === activePath) {
+    if (action.kind === 'active') {
         return 'Already active. Press s to stop the current session.';
     }
     return 'Press Enter to start here and switch the active session.';
 }
 function getNotes(selectedRow) {
-    if (selectedRow.invalidReason) {
-        return selectedRow.invalidReason;
+    const note = projectNote(selectedRow);
+    if (note.kind === 'invalid') {
+        return note.invalidReason;
     }
-    if (selectedRow.tags.includes('external')) {
+    if (note.kind === 'external') {
         return 'External worktree managed outside the main checkout path.';
     }
     return 'Ready to launch with the configured command in this worktree.';
 }
-function getOrderedTags(tags) {
-    const tagPriority = {
-        active: 0,
-        main: 1,
-        external: 2,
-        invalid: 3,
-    };
-    return [...tags].sort((a, b) => {
-        const aPriority = tagPriority[a] ?? 10;
-        const bPriority = tagPriority[b] ?? 10;
-        if (aPriority === bPriority) {
-            return a.localeCompare(b);
-        }
-        return aPriority - bPriority;
-    });
-}
 function getVariantColor(variant) {
     if (variant === 'success') {
         return 'green';
@@ -178,59 +137,52 @@ function section(label) {
 function divider() {
     return { text: ' ', dimColor: true };
 }
-function getPanelLines(selectedRow, activePath, compactDetails) {
+function getPanelLines(selectedRow, activePath, setupAvailable, compactDetails) {
     if (!selectedRow) {
         return [{ text: 'No worktrees found.', dimColor: true }];
     }
     const lines = [section('Identity')];
     const showFullPath = !compactDetails && selectedRow.shortPath !== selectedRow.path;
     const showTags = !compactDetails;
-    const pullRequestTitle = selectedRow.pullRequest?.kind === 'found' && !compactDetails
-        ? sanitizeInlineText(selectedRow.pullRequest.title)
-        : null;
+    const pullRequest = projectPullRequest(selectedRow);
+    const pullRequestTitle = pullRequest.kind === 'found' && !compactDetails ? pullRequest.title : null;
     lines.push({ text: `Branch: ${sanitizeInlineText(selectedRow.branch)}`, bold: true }, { text: `Path: ${sanitizeInlineText(selectedRow.shortPath)}` });
     if (showFullPath) {
         lines.push({ text: `Full Path: ${sanitizeInlineText(selectedRow.path)}` });
     }
     lines.push({ text: `HEAD: ${selectedRow.headSha || '-'}` });
+    lines.push({ text: `Branch Created: ${formatUtcDateTime(selectedRow.branchCreatedAtMs)}` });
     if (showTags) {
-        for (const tag of getOrderedTags(selectedRow.tags.filter(tag => tag !== 'active'))) {
-            lines.push({ text: tag.toUpperCase(), color: getTagColor(tag) });
+        for (const { tag } of getOrderedNonActiveTags(selectedRow.tags)) {
+            lines.push({ text: getTagLabel(tag).toUpperCase(), color: getTagColor(tag) });
         }
     }
     lines.push(divider(), section('Git / PR'), { text: `Upstream: ${formatUpstream(selectedRow)}` }, { text: `Status: ${formatWorkingTree(selectedRow)}` }, {
-        text: `${getPullRequestLabel(selectedRow)}: ${formatPullRequest(selectedRow)}`,
-        color: getPullRequestColor(selectedRow),
-        dimColor: selectedRow.pullRequest?.kind === 'found' && selectedRow.pullRequest.state !== 'OPEN',
+        text: `${getPullRequestLabel(pullRequest)}: ${formatPullRequest(selectedRow)}`,
+        color: getPullRequestColorFromProjection(pullRequest),
+        dimColor: getPullRequestDimColor(pullRequest),
     });
     if (pullRequestTitle) {
-        lines.push({ text: `${getPullRequestTitleLabel(selectedRow)}: ${pullRequestTitle}`, dimColor: selectedRow.pullRequest?.kind === 'found' && selectedRow.pullRequest.state !== 'OPEN' });
+        lines.push({ text: `${getPullRequestTitleLabel(pullRequest)}: ${pullRequestTitle}`, dimColor: getPullRequestDimColor(pullRequest) });
     }
     const actionVariant = getActionVariant(selectedRow, activePath);
-    const noteVariant = getNoteVariant(selectedRow);
-    lines.push(divider(), section('Action'), { text: `${getVariantIcon(actionVariant)} ${getActionMessage(selectedRow, activePath)}`, color: getVariantColor(actionVariant) }, section('Notes'), { text: `${getVariantIcon(noteVariant)} ${getNotes(selectedRow)}`, color: getVariantColor(noteVariant) });
+    const noteVariant = projectNote(selectedRow).severity;
+    lines.push(divider(), section('Action'), { text: `${getVariantIcon(actionVariant)} ${getActionMessage(selectedRow, activePath)}`, color: getVariantColor(actionVariant) });
+    if (setupAvailable) {
+        lines.push({ text: 'ℹ Press i to run setup in this worktree.', color: 'blue' });
+    }
+    lines.push(section('Notes'), { text: `${getVariantIcon(noteVariant)} ${getNotes(selectedRow)}`, color: getVariantColor(noteVariant) });
     return lines;
 }
-function getScrollbarThumbRows(totalLines, viewportHeight, scrollOffset) {
-    if (totalLines <= viewportHeight) {
-        return new Set();
-    }
-    const thumbSize = Math.max(1, Math.floor((viewportHeight / totalLines) * viewportHeight));
-    const maxScrollOffset = Math.max(1, totalLines - viewportHeight);
-    const thumbStart = Math.round((scrollOffset / maxScrollOffset) * (viewportHeight - thumbSize));
-    return new Set(Array.from({ length: thumbSize }, (_, index) => thumbStart + index));
-}
-export function ActionPanel({ selectedRow, activePath, stacked, width, height, compactDetails, scrollOffset = 0, }) {
-    const lines = getPanelLines(selectedRow, activePath, compactDetails ?? false);
-    const contentViewportHeight = height === undefined ? undefined : Math.max(1, height - 3);
-    const maxScrollOffset = contentViewportHeight === undefined ? 0 : Math.max(0, lines.length - contentViewportHeight);
-    const effectiveScrollOffset = Math.min(Math.max(scrollOffset, 0), maxScrollOffset);
-    const visibleLines = contentViewportHeight === undefined
-        ? lines
-        : lines.slice(effectiveScrollOffset, effectiveScrollOffset + contentViewportHeight);
-    const showScrollbar = contentViewportHeight !== undefined && lines.length > contentViewportHeight;
+export function ActionPanel({ selectedRow, activePath, setupAvailable, stacked, width, height, compactDetails, scrollOffset = 0, }) {
+    const lines = getPanelLines(selectedRow, activePath, setupAvailable, compactDetails ?? false);
+    const viewport = height === undefined ? undefined : sliceListViewport(lines, height - 3, scrollOffset);
+    const contentViewportHeight = viewport?.viewportHeight;
+    const effectiveScrollOffset = viewport?.scrollOffset ?? 0;
+    const visibleLines = viewport?.visibleItems ?? lines;
+    const showScrollbar = viewport !== undefined && lines.length > viewport.viewportHeight;
     const scrollbarThumbRows = showScrollbar
-        ? getScrollbarThumbRows(lines.length, contentViewportHeight, effectiveScrollOffset)
+        ? getScrollbarThumbRows(lines.length, viewport.viewportHeight, viewport.scrollOffset)
         : new Set();
     return (_jsxs(Box, { width: width, height: height, flexGrow: stacked ? 0 : 1, flexShrink: 1, borderStyle: "round", borderColor: "magenta", flexDirection: "column", paddingX: 1, overflow: "hidden", children: [_jsx(Text, { bold: true, color: "magenta", wrap: "truncate-end", children: "Selection / Action" }), _jsx(Box, { height: contentViewportHeight, flexDirection: "column", overflow: "hidden", children: visibleLines.map((line, index) => (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { flexGrow: 1, flexShrink: 1, children: _jsx(Text, { color: line.color, dimColor: line.dimColor, bold: line.bold, wrap: "truncate-end", children: line.text }) }), showScrollbar ? (_jsx(Text, { color: scrollbarThumbRows.has(index) ? 'magenta' : 'gray', dimColor: !scrollbarThumbRows.has(index), children: scrollbarThumbRows.has(index) ? '█' : '│' })) : null] }, `${effectiveScrollOffset + index}-${line.text}`))) })] }));
 }

package/dist/components/ContextBar.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
 import type { AppStatus } from '../core/runtime.js';
-export declare function ContextBar({ status }: {
+export declare function ContextBar({ status, setupAvailable, editorAvailable, confirmationOpen, }: {
     status: AppStatus;
+    setupAvailable: boolean;
+    editorAvailable: boolean;
+    confirmationOpen: boolean;
 }): React.JSX.Element;

package/dist/components/ContextBar.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { Box, Text } from 'ink';
 import { Spinner } from '@inkjs/ui';
+import { sanitizeInlineText } from '../core/worktree-projection.js';
 const KIND_TO_ICON = {
     idle: 'ℹ',
     starting: '⚠',
+    'setting-up': '⚠',
     running: '✓',
     stopping: '⚠',
     error: '✘',
@@ -11,11 +14,34 @@ const KIND_TO_ICON = {
 const KIND_TO_COLOR = {
     idle: 'blue',
     starting: 'yellow',
+    'setting-up': 'yellow',
     running: 'green',
     stopping: 'yellow',
     error: 'red',
 };
-export function ContextBar({ status }) {
-    const isBusy = status.kind === 'starting' || status.kind === 'stopping';
-    return (_jsxs(Box, { borderStyle: "round", borderColor: KIND_TO_COLOR[status.kind], flexDirection: "column", paddingX: 1, children: [isBusy ? (_jsx(Spinner, { label: `Status: ${status.kind} — ${status.message}` })) : (_jsxs(Text, { color: KIND_TO_COLOR[status.kind], wrap: "truncate-end", children: [KIND_TO_ICON[status.kind], " Status: ", status.kind, " \u2014 ", status.message] })), _jsx(Text, { dimColor: true, wrap: "truncate-end", children: "Keys: \u2191\u2193/jk move  g/G first/last  Wheel/PgUp/PgDn list & selection scroll  [/] log scroll  L full-screen logs  Enter start/switch  s stop  r refresh  q quit" })] }));
+function buildKeyHints(setupAvailable, editorAvailable, confirmationOpen) {
+    if (confirmationOpen) {
+        return [
+            { binding: 'd/y', label: 'Confirm' },
+            { binding: 'Esc/n/q', label: 'Cancel' },
+        ];
+    }
+    const hints = [
+        { binding: '↑↓/jk', label: 'Move' },
+        { binding: 'Enter', label: 'Switch' },
+    ];
+    if (setupAvailable) {
+        hints.push({ binding: 'i', label: 'Setup' });
+    }
+    if (editorAvailable) {
+        hints.push({ binding: 'e', label: 'Editor' });
+    }
+    hints.push({ binding: 'o', label: 'Open PR' }, { binding: 'd', label: 'Delete' }, { binding: 'L', label: 'Logs' }, { binding: 's', label: 'Stop' }, { binding: 'r', label: 'Refresh' }, { binding: '?', label: 'Help' }, { binding: 'q', label: 'Quit' });
+    return hints;
+}
+export function ContextBar({ status, setupAvailable, editorAvailable, confirmationOpen, }) {
+    const isBusy = status.kind === 'setting-up' || status.kind === 'starting' || status.kind === 'stopping';
+    const keyHints = buildKeyHints(setupAvailable, editorAvailable, confirmationOpen);
+    const statusMessage = sanitizeInlineText(status.message);
+    return (_jsxs(Box, { borderStyle: "round", borderColor: KIND_TO_COLOR[status.kind], flexDirection: "column", paddingX: 1, children: [isBusy ? (_jsx(Spinner, { label: `Status: ${status.kind} — ${statusMessage}` })) : (_jsxs(Text, { color: KIND_TO_COLOR[status.kind], wrap: "truncate-end", children: [KIND_TO_ICON[status.kind], " Status: ", status.kind, " \u2014 ", statusMessage] })), _jsx(Text, { wrap: "truncate-end", children: keyHints.map((hint, hintIndex) => (_jsxs(React.Fragment, { children: [hintIndex === 0 ? null : _jsx(Text, { dimColor: true, children: " | " }), _jsx(Text, { color: "white", children: hint.binding }), _jsxs(Text, { dimColor: true, children: [" ", hint.label] })] }, hint.binding))) })] }));
 }

package/dist/components/Header.js

@@ -1,5 +1,9 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
+import { sanitizeInlineText } from '../core/worktree-projection.js';
 export function Header({ repoName, namespace, activeBranch, }) {
-    return (_jsxs(Box, { borderStyle: "round", borderColor: "blue", flexDirection: "column", paddingX: 1, children: [_jsxs(Text, { bold: true, color: "blue", wrap: "truncate-end", children: ["Worktree Command TUI \u00B7 Repo: ", repoName] }), _jsxs(Text, { color: "green", wrap: "truncate-end", children: ["Active: ", activeBranch ?? '-'] }), _jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ["Namespace: ", namespace] })] }));
+    const safeRepoName = sanitizeInlineText(repoName);
+    const safeNamespace = sanitizeInlineText(namespace);
+    const safeActiveBranch = activeBranch === null ? '-' : sanitizeInlineText(activeBranch);
+    return (_jsxs(Box, { borderStyle: "round", borderColor: "blue", flexDirection: "column", paddingX: 1, children: [_jsxs(Text, { bold: true, color: "blue", wrap: "truncate-end", children: ["Worktree Command TUI \u00B7 Repo: ", safeRepoName] }), _jsxs(Text, { color: "green", wrap: "truncate-end", children: ["Active: ", safeActiveBranch] }), _jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ["Namespace: ", safeNamespace] })] }));
 }

package/dist/components/HelpWindow.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare function HelpWindow({ setupAvailable, editorAvailable, width, height }: {
+    setupAvailable: boolean;
+    editorAvailable: boolean;
+    width: number;
+    height: number;
+}): React.JSX.Element;

package/dist/components/HelpWindow.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+function buildHelpLines(setupAvailable, editorAvailable) {
+    const lines = [
+        { section: 'Movement', binding: '↑↓/jk', description: 'move selection' },
+        { section: 'Movement', binding: 'g/G', description: 'first/last' },
+        { section: 'Scroll', binding: 'Wheel', description: 'pane under cursor' },
+        { section: 'Scroll', binding: 'PageUp/PageDn', description: 'selection page' },
+        { section: 'Logs', binding: 'L', description: 'full-screen logs' },
+        { section: 'Logs', binding: '[/]', description: 'scroll log' },
+        { section: 'Actions', binding: 'Enter', description: 'start/switch worktree' },
+    ];
+    if (setupAvailable) {
+        lines.push({ section: 'Actions', binding: 'i', description: 'setup selected worktree' });
+    }
+    if (editorAvailable) {
+        lines.push({ section: 'Actions', binding: 'e', description: 'open selected worktree in editor' });
+    }
+    lines.push({ section: 'Actions', binding: 'o', description: 'open selected pull request' }, { section: 'Actions', binding: 'd', description: 'arm worktree deletion' }, { section: 'Actions', binding: 's', description: 'stop active session' }, { section: 'Actions', binding: 'r', description: 'refresh' }, { section: 'Actions', binding: 'q', description: 'quit' }, { section: 'Help', binding: 'Esc/q/?', description: 'close help' }, { section: 'Help', binding: 'd/y', description: 'confirm delete after arming' }, { section: 'Help', binding: 'Esc/n/q', description: 'cancel delete confirmation' });
+    return lines;
+}
+export function HelpWindow({ setupAvailable, editorAvailable, width, height }) {
+    let previousSection = '';
+    return (_jsxs(Box, { width: width, height: height, borderStyle: "round", borderColor: "blue", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "blue", wrap: "truncate-end", children: "Keyboard Help" }), _jsx(Text, { dimColor: true, wrap: "truncate-end", children: "Primary shortcuts are shown in the status footer. Advanced shortcuts live here." }), buildHelpLines(setupAvailable, editorAvailable).map(line => {
+                const section = line.section === previousSection ? '' : line.section;
+                previousSection = line.section;
+                return (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 10, children: _jsx(Text, { dimColor: true, wrap: "truncate-end", children: section }) }), _jsx(Box, { width: 16, children: _jsx(Text, { color: "white", wrap: "truncate-end", children: line.binding }) }), _jsx(Text, { dimColor: true, wrap: "truncate-end", children: line.description })] }, `${line.section}-${line.binding}`));
+            })] }));
+}

package/dist/components/LogPanel.d.ts

@@ -1,8 +1,15 @@
 import type { AppLogEntry } from '../core/runtime.js';
-type LineSpec = {
-    text: string;
-    color?: 'cyan';
+type LogColor = 'black' | 'red' | 'green' | 'yellow' | 'blue' | 'magenta' | 'cyan' | 'white' | 'gray';
+type LineStyle = {
+    color?: LogColor;
     dimColor?: boolean;
+    bold?: boolean;
+};
+type LineSegment = {
+    text: string;
+} & LineStyle;
+type LineSpec = {
+    segments: LineSegment[];
 };
 export declare function buildLogLines(logs: AppLogEntry[]): LineSpec[];
 export declare function LogPanel({ logs, width, height, scrollOffset, title, }: {