snow-ai 0.3.5 → 0.3.7

package/dist/ui/components/MarkdownRenderer.js

@@ -1,159 +1,22 @@
 import React from 'react';
-import { Box, Text } from 'ink';
+import { Text } from 'ink';
 import { highlight } from 'cli-highlight';
-export default function MarkdownRenderer({ content, color }) {
-    const blocks = parseMarkdown(content);
-    return (React.createElement(Box, { flexDirection: "column" }, blocks.map((block, index) => {
-        if (block.type === 'code') {
-            return (React.createElement(Box, { key: index, flexDirection: "column", marginY: 0 },
-                React.createElement(Box, { borderStyle: "round", borderColor: "blue" },
-                    React.createElement(Box, { flexDirection: "column" },
-                        block.language && (React.createElement(Text, { backgroundColor: "green", color: "white" }, block.language)),
-                        React.createElement(Text, null, highlightCode(block.code, block.language))))));
-        }
-        // Render heading
-        if (block.type === 'heading') {
-            const headingColors = ['cyan', 'blue', 'magenta', 'yellow'];
-            const headingColor = headingColors[block.level - 1] || 'white';
-            return (React.createElement(Box, { key: index, marginY: 0 },
-                React.createElement(Text, { bold: true, color: headingColor }, renderInlineFormatting(block.content))));
-        }
-        // Render list
-        if (block.type === 'list') {
-            return (React.createElement(Box, { key: index, flexDirection: "column", marginY: 0 }, block.items.map((item, itemIndex) => (React.createElement(Box, { key: itemIndex },
-                React.createElement(Text, { color: "yellow" }, "\u2022 "),
-                React.createElement(Text, { color: color }, renderInlineFormatting(item)))))));
-        }
-        // Render text with inline formatting
-        return (React.createElement(Box, { key: index, flexDirection: "column" }, block.content
-            .split('\n')
-            .map((line, lineIndex) => (React.createElement(Text, { key: lineIndex, color: color }, line === '' ? ' ' : renderInlineFormatting(line))))));
-    })));
-}
-function parseMarkdown(content) {
-    const blocks = [];
-    const lines = content.split('\n');
-    let i = 0;
-    while (i < lines.length) {
-        const line = lines[i] ?? '';
-        // Check for code block - support ```language or just ```
-        const codeBlockMatch = line.match(/^```(.*)$/);
-        if (codeBlockMatch) {
-            const language = codeBlockMatch[1]?.trim() || '';
-            const codeLines = [];
-            i++;
-            // Collect code block lines
-            while (i < lines.length) {
-                const currentLine = lines[i] ?? '';
-                if (currentLine.trim().startsWith('```')) {
-                    break;
-                }
-                codeLines.push(currentLine);
-                i++;
-            }
-            blocks.push({
-                type: 'code',
-                language,
-                code: codeLines.join('\n'),
-            });
-            i++; // Skip closing ```
-            continue;
-        }
-        // Check for heading (# ## ### ####)
-        const headingMatch = line.match(/^(#{1,6})\s+(.+)$/);
-        if (headingMatch) {
-            blocks.push({
-                type: 'heading',
-                level: headingMatch[1].length,
-                content: headingMatch[2].trim(),
-            });
-            i++;
-            continue;
-        }
-        // Check for list item (* or -)
-        const listMatch = line.match(/^[\s]*[*\-]\s+(.+)$/);
-        if (listMatch) {
-            const listItems = [listMatch[1].trim()];
-            i++;
-            // Collect consecutive list items
-            while (i < lines.length) {
-                const currentLine = lines[i] ?? '';
-                const nextListMatch = currentLine.match(/^[\s]*[*\-]\s+(.+)$/);
-                if (!nextListMatch) {
-                    break;
-                }
-                listItems.push(nextListMatch[1].trim());
-                i++;
+// @ts-expect-error - cli-markdown doesn't have TypeScript definitions
+import cliMarkdown from 'cli-markdown';
+export default function MarkdownRenderer({ content }) {
+    // Use cli-markdown for elegant markdown rendering with syntax highlighting
+    const rendered = cliMarkdown(content, {
+        // Enable syntax highlighting for code blocks
+        code: (code, language) => {
+            if (!language)
+                return code;
+            try {
+                return highlight(code, { language, ignoreIllegals: true });
             }
-            blocks.push({
-                type: 'list',
-                items: listItems,
-            });
-            continue;
-        }
-        // Collect text lines until next code block, heading, or list
-        const textLines = [];
-        while (i < lines.length) {
-            const currentLine = lines[i] ?? '';
-            if (currentLine.trim().startsWith('```') ||
-                currentLine.match(/^#{1,6}\s+/) ||
-                currentLine.match(/^[\s]*[*\-]\s+/)) {
-                break;
+            catch {
+                return code;
             }
-            textLines.push(currentLine);
-            i++;
-        }
-        if (textLines.length > 0) {
-            blocks.push({
-                type: 'text',
-                content: textLines.join('\n'),
-            });
-        }
-    }
-    return blocks;
-}
-function highlightCode(code, language) {
-    try {
-        // If no language specified, try to auto-detect or just return the code
-        if (!language) {
-            return code;
-        }
-        // Map common language aliases to cli-highlight supported names
-        const languageMap = {
-            js: 'javascript',
-            ts: 'typescript',
-            py: 'python',
-            rb: 'ruby',
-            sh: 'bash',
-            shell: 'bash',
-            cs: 'csharp',
-            'c#': 'csharp',
-            cpp: 'cpp',
-            'c++': 'cpp',
-            yml: 'yaml',
-            md: 'markdown',
-        };
-        const mappedLanguage = languageMap[language.toLowerCase()] || language.toLowerCase();
-        return highlight(code, { language: mappedLanguage, ignoreIllegals: true });
-    }
-    catch {
-        // If highlighting fails, return the code as-is
-        return code;
-    }
-}
-function renderInlineFormatting(text) {
-    // Handle inline code `code` - remove backticks
-    text = text.replace(/`([^`]+)`/g, (_, code) => {
-        // Use ANSI codes for inline code styling
-        return `\x1b[36m${code}\x1b[0m`;
-    });
-    // Handle bold **text** or __text__ - remove markers
-    text = text.replace(/(\*\*|__)([^*_]+)\1/g, (_, __, content) => {
-        return `\x1b[1m${content}\x1b[0m`;
-    });
-    // Handle italic *text* or _text_ (but not part of bold) - remove markers
-    text = text.replace(/(?<!\*)(\*)(?!\*)([^*]+)\1(?!\*)/g, (_, __, content) => {
-        return `\x1b[3m${content}\x1b[0m`;
+        },
     });
-    return text;
+    return React.createElement(Text, null, rendered);
 }

package/dist/ui/components/MessageList.js

@@ -24,7 +24,7 @@ const MessageList = memo(({ messages, animationFrame, maxMessages = 6 }) => {
                     : message.role === 'subagent'
                         ? '◈'
                         : '❆'),
-            React.createElement(Box, { marginLeft: 1, marginBottom: 1, flexDirection: "column" }, message.role === 'command' ? (React.createElement(Text, { color: "gray" },
+            React.createElement(Box, { marginLeft: 1, flexDirection: "column" }, message.role === 'command' ? (React.createElement(Text, { color: "gray" },
                 "\u2514\u2500 ",
                 message.commandName)) : message.role === 'subagent' ? (React.createElement(React.Fragment, null,
                 React.createElement(Text, { color: "magenta", dimColor: true },
@@ -32,12 +32,12 @@ const MessageList = memo(({ messages, animationFrame, maxMessages = 6 }) => {
                     message.subAgent?.agentName,
                     message.subAgent?.isComplete ? ' ✓' : ' ...'),
                 React.createElement(Box, { marginLeft: 2 },
-                    React.createElement(MarkdownRenderer, { content: message.content || ' ', color: "gray" })))) : (React.createElement(React.Fragment, null,
-                React.createElement(MarkdownRenderer, { content: message.content || ' ', color: message.role === 'user' ? 'gray' : undefined }),
+                    React.createElement(Text, { color: "gray" }, message.content || ' ')))) : (React.createElement(React.Fragment, null,
+                message.role === 'user' ? (React.createElement(Text, { color: "gray" }, message.content || ' ')) : (React.createElement(MarkdownRenderer, { content: message.content || ' ' })),
                 (message.systemInfo ||
                     message.files ||
                     message.files ||
-                    message.images) && (React.createElement(Box, { marginTop: 1, flexDirection: "column" },
+                    message.images) && (React.createElement(Box, { flexDirection: "column" },
                     message.systemInfo && (React.createElement(React.Fragment, null,
                         React.createElement(Text, { color: "gray", dimColor: true },
                             "\u2514\u2500 Platform: ",

package/dist/ui/components/SessionListScreen.js

@@ -3,7 +3,7 @@ import { Box, Text, useInput, useStdout } from 'ink';
 import Gradient from 'ink-gradient';
 import { Alert } from '@inkjs/ui';
 import ScrollableSelectInput from './ScrollableSelectInput.js';
-import { sessionManager } from '../../utils/sessionManager.js';
+import { sessionManager, } from '../../utils/sessionManager.js';
 export default function SessionListScreen({ onBack, onSelectSession }) {
     const [sessions, setSessions] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -53,22 +53,35 @@ export default function SessionListScreen({ onBack, onSelectSession }) {
     // Create select items with truncated labels
     const selectItems = useMemo(() => {
         const terminalWidth = stdout?.columns || 80;
-        // Increase margin and ensure minimum width
-        const maxLabelWidth = Math.max(20, terminalWidth - 20);
+        // Reserve space for indicators (✔ + ❯ + spacing) and margins
+        const reservedSpace = 30;
+        const maxLabelWidth = Math.max(30, terminalWidth - reservedSpace);
         return sessions.map(session => {
             const timeString = formatDate(session.updatedAt);
             const title = session.title || 'Untitled';
-            const label = `${title} (${session.messageCount}) - ${timeString}`;
-            // Truncate if too long with safer boundary check
-            let truncatedLabel = label;
-            if (label.length > maxLabelWidth) {
-                const maxLength = Math.max(10, maxLabelWidth - 3);
-                truncatedLabel = label.substring(0, maxLength) + '...';
+            // Format: "Title • 5 msgs • 2h ago"
+            const messageInfo = `${session.messageCount} msg${session.messageCount !== 1 ? 's' : ''}`;
+            const fullLabel = `${title} • ${messageInfo} • ${timeString}`;
+            // Truncate if too long - prioritize showing the title
+            let truncatedLabel = fullLabel;
+            if (fullLabel.length > maxLabelWidth) {
+                const ellipsis = '...';
+                const suffixLength = messageInfo.length + timeString.length + 6; // " • " x2 + "..."
+                const availableForTitle = maxLabelWidth - suffixLength - ellipsis.length;
+                if (availableForTitle > 10) {
+                    const truncatedTitle = title.substring(0, availableForTitle);
+                    truncatedLabel = `${truncatedTitle}${ellipsis} • ${messageInfo} • ${timeString}`;
+                }
+                else {
+                    // If terminal is too narrow, just truncate the whole thing
+                    truncatedLabel =
+                        fullLabel.substring(0, maxLabelWidth - ellipsis.length) + ellipsis;
+                }
             }
             return {
                 label: truncatedLabel,
                 value: session.id,
-                isMarked: selectedSessions.has(session.id)
+                isMarked: selectedSessions.has(session.id),
             };
         });
     }, [sessions, formatDate, stdout?.columns, selectedSessions]);
@@ -96,10 +109,14 @@ export default function SessionListScreen({ onBack, onSelectSession }) {
         const ids = Array.from(selectedSessions);
         const deletionResults = await Promise.all(ids.map(async (id) => ({
             id,
-            success: await sessionManager.deleteSession(id)
+            success: await sessionManager.deleteSession(id),
         })));
-        const succeededIds = deletionResults.filter(result => result.success).map(result => result.id);
-        const failedIds = deletionResults.filter(result => !result.success).map(result => result.id);
+        const succeededIds = deletionResults
+            .filter(result => result.success)
+            .map(result => result.id);
+        const failedIds = deletionResults
+            .filter(result => !result.success)
+            .map(result => result.id);
         if (succeededIds.length > 0) {
             setSessions(previous => previous.filter(session => !succeededIds.includes(session.id)));
             setSelectedSessions(previous => {
@@ -113,13 +130,13 @@ export default function SessionListScreen({ onBack, onSelectSession }) {
         if (failedIds.length > 0) {
             setActionMessage({
                 type: 'error',
-                text: `Failed to delete ${failedIds.length} conversation${failedIds.length > 1 ? 's' : ''}.`
+                text: `Failed to delete ${failedIds.length} conversation${failedIds.length > 1 ? 's' : ''}.`,
             });
         }
         else if (succeededIds.length > 0) {
             setActionMessage({
                 type: 'info',
-                text: `Deleted ${succeededIds.length} conversation${succeededIds.length > 1 ? 's' : ''}.`
+                text: `Deleted ${succeededIds.length} conversation${succeededIds.length > 1 ? 's' : ''}.`,
             });
         }
         else {
@@ -182,7 +199,8 @@ export default function SessionListScreen({ onBack, onSelectSession }) {
                     sessions.length,
                     " conversation",
                     sessions.length !== 1 ? 's' : '',
-                    " available"))),
+                    ' ',
+                    "available"))),
         React.createElement(Box, { marginBottom: 1, flexShrink: 0 },
             React.createElement(ScrollableSelectInput, { items: selectItems, limit: listLimit, onSelect: handleSelect, onToggleItem: handleToggleItem, onDeleteSelection: handleDeleteSelected, selectedValues: selectedSessions, indicator: ({ isSelected }) => (React.createElement(Text, { color: isSelected ? 'green' : 'gray' }, isSelected ? '❯ ' : '  ')), renderItem: ({ isSelected, isMarked, label }) => (React.createElement(Text, null,
                     React.createElement(Text, { color: isMarked ? 'green' : 'gray' }, isMarked ? '✔ ' : '  '),
@@ -192,5 +210,7 @@ export default function SessionListScreen({ onBack, onSelectSession }) {
                 React.createElement(Alert, { variant: actionMessage.type }, actionMessage.text))) : null,
             React.createElement(Alert, { variant: "info" },
                 "\u2191\u2193 navigate \u2022 Space mark \u2022 D delete \u2022 Enter select \u2022 Esc return \u2022 R refresh",
-                selectedSessions.size > 0 ? ` • ${selectedSessions.size} selected` : ''))));
+                selectedSessions.size > 0
+                    ? ` • ${selectedSessions.size} selected`
+                    : ''))));
 }

package/dist/ui/components/ToolResultPreview.js

@@ -9,7 +9,10 @@ export default function ToolResultPreview({ toolName, result, maxLines = 5 }) {
         // Try to parse JSON result
         const data = JSON.parse(result);
         // Handle different tool types
-        if (toolName === 'filesystem-read') {
+        if (toolName.startsWith('subagent-')) {
+            return renderSubAgentPreview(data, maxLines);
+        }
+        else if (toolName === 'filesystem-read') {
             return renderReadPreview(data, maxLines);
         }
         else if (toolName === 'filesystem-list') {
@@ -40,6 +43,23 @@ export default function ToolResultPreview({ toolName, result, maxLines = 5 }) {
         return null;
     }
 }
+function renderSubAgentPreview(data, maxLines) {
+    // Sub-agent results have format: { success: boolean, result: string }
+    if (!data.result)
+        return null;
+    // Split the result into lines
+    const lines = data.result.split('\n').filter((line) => line.trim());
+    const previewLines = lines.slice(0, maxLines);
+    const hasMore = lines.length > maxLines;
+    return (React.createElement(Box, { flexDirection: "column", marginLeft: 2 },
+        previewLines.map((line, idx) => (React.createElement(Text, { key: idx, color: "gray", dimColor: true },
+            idx === previewLines.length - 1 && !hasMore ? '└─ ' : '├─ ',
+            line.length > 80 ? line.slice(0, 80) + '...' : line))),
+        hasMore && (React.createElement(Text, { color: "gray", dimColor: true },
+            "\u2514\u2500 ... (",
+            lines.length - maxLines,
+            " more lines)"))));
+}
 function renderReadPreview(data, maxLines) {
     if (!data.content)
         return null;
@@ -77,7 +97,7 @@ function renderListPreview(data, maxLines) {
 }
 function renderACEPreview(toolName, data, maxLines) {
     // Handle ace-text-search results
-    if (toolName === 'ace-text-search' || toolName === 'ace_text_search') {
+    if (toolName === 'ace-text-search' || toolName === 'ace-text_search') {
         if (!data || data.length === 0) {
             return (React.createElement(Box, { marginLeft: 2 },
                 React.createElement(Text, { color: "gray", dimColor: true }, "\u2514\u2500 No matches found")));
@@ -100,7 +120,7 @@ function renderACEPreview(toolName, data, maxLines) {
                 " more matches)"))));
     }
     // Handle ace-search-symbols results
-    if (toolName === 'ace-search-symbols' || toolName === 'ace_search_symbols') {
+    if (toolName === 'ace-search-symbols' || toolName === 'ace-search_symbols') {
         const symbols = data.symbols || [];
         if (symbols.length === 0) {
             return (React.createElement(Box, { marginLeft: 2 },
@@ -124,7 +144,7 @@ function renderACEPreview(toolName, data, maxLines) {
                 " more symbols)"))));
     }
     // Handle ace-find-references results
-    if (toolName === 'ace-find-references' || toolName === 'ace_find_references') {
+    if (toolName === 'ace-find-references' || toolName === 'ace-find_references') {
         const references = Array.isArray(data) ? data : [];
         if (references.length === 0) {
             return (React.createElement(Box, { marginLeft: 2 },
@@ -146,7 +166,7 @@ function renderACEPreview(toolName, data, maxLines) {
                 " more references)"))));
     }
     // Handle ace-find-definition result
-    if (toolName === 'ace-find-definition' || toolName === 'ace_find_definition') {
+    if (toolName === 'ace-find-definition' || toolName === 'ace-find_definition') {
         if (!data) {
             return (React.createElement(Box, { marginLeft: 2 },
                 React.createElement(Text, { color: "gray", dimColor: true }, "\u2514\u2500 Definition not found")));
@@ -163,7 +183,7 @@ function renderACEPreview(toolName, data, maxLines) {
                 data.line)));
     }
     // Handle ace-file-outline result
-    if (toolName === 'ace-file-outline' || toolName === 'ace_file_outline') {
+    if (toolName === 'ace-file-outline' || toolName === 'ace-file_outline') {
         const symbols = Array.isArray(data) ? data : [];
         if (symbols.length === 0) {
             return (React.createElement(Box, { marginLeft: 2 },
@@ -186,7 +206,7 @@ function renderACEPreview(toolName, data, maxLines) {
                 " more symbols)"))));
     }
     // Handle ace-semantic-search result
-    if (toolName === 'ace-semantic-search' || toolName === 'ace_semantic_search') {
+    if (toolName === 'ace-semantic-search' || toolName === 'ace-semantic_search') {
         const totalResults = (data.symbols?.length || 0) + (data.references?.length || 0);
         if (totalResults === 0) {
             return (React.createElement(Box, { marginLeft: 2 },

package/dist/ui/components/UsagePanel.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function UsagePanel(): React.JSX.Element;