byterover-cli 0.4.0 → 1.0.0

package/dist/tui/components/onboarding/onboarding-flow.js

@@ -8,24 +8,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text, useInput } from 'ink';
 import Spinner from 'ink-spinner';
 import { useCallback, useMemo, useState } from 'react';
-import { useAuth } from '../../contexts/auth-context.js';
-import { useConsumer } from '../../contexts/index.js';
-import { useActivityLogs, useCommands, useMode, useTheme } from '../../hooks/index.js';
+import { useAuth, useTransport } from '../../contexts/index.js';
+import { useActivityLogs, useCommands, useMode, useTheme, useUIHeights } from '../../hooks/index.js';
 import { useOnboarding } from '../../hooks/use-onboarding.js';
+import { calculateLogContentLimit } from '../../utils/log.js';
 import { EnterPrompt } from '../enter-prompt.js';
 import { LogItem } from '../execution/index.js';
 import { InlineConfirm, InlineInput, InlineSearch, InlineSelect } from '../inline-prompts/index.js';
 import { CopyablePrompt } from './copyable-prompt.js';
 import { OnboardingStep } from './onboarding-step.js';
 /** Example prompts for curate and query steps */
-const CURATE_PROMPT = 'brv curate "Auth uses JWT with 24h expiry. Tokens stored in httpOnly cookies"';
-const QUERY_PROMPT = 'brv query "How is authentication implemented?"';
+const CURATE_PROMPT = 'run `brv curate "Auth uses JWT with 24h expiry. Tokens stored in httpOnly cookies"`';
+const QUERY_PROMPT = 'run `brv query "How is authentication implemented?"`';
 /** Minimum output lines to show before truncation */
 const MIN_OUTPUT_LINES = 3;
-/** Reserved lines for onboarding step (title + description + borders + margins + onboard title + onboard description + content margin top) */
-const ONBOARDING_STEP_OVERHEAD = 8;
-/** Reserved lines for onboarding curate/query (content margin bottom + 1 line + prompt 'enter' to continue) */
-const ONBOARDING_CURATE_QUERY_OVER_BOTTOM = 3;
 /** Reserved lines for inline search (message + input + margins) */
 const INLINE_SEARCH_OVERHEAD = 3;
 /** Minimum visible items for inline search */
@@ -128,18 +124,30 @@ export const OnboardingFlow = ({ availableHeight }) => {
     const { theme: { colors }, } = useTheme();
     const { mode } = useMode();
     const { reloadAuth } = useAuth();
-    const { restart } = useConsumer();
+    const { client } = useTransport();
     const { handleSlashCommand } = useCommands();
     const { completeOnboarding, curateAcknowledged, currentStep, hasCurated, hasQueried, queryAcknowledged, setCurateAcknowledged, setQueryAcknowledged, totalSteps, } = useOnboarding();
     const { logs } = useActivityLogs();
-    // Calculate max output lines based on available height
-    // Reserve space for onboarding step title, description, borders, and margins
-    const maxOutputLines = Math.max(MIN_OUTPUT_LINES, availableHeight - ONBOARDING_STEP_OVERHEAD - ONBOARDING_CURATE_QUERY_OVER_BOTTOM);
-    // Calculate max visible items for inline search based on available height
-    const maxSearchItems = Math.max(MIN_SEARCH_ITEMS, maxOutputLines - INLINE_SEARCH_OVERHEAD);
+    const { messageItem } = useUIHeights();
     // Find running or queued curate/query logs
     const curateLog = useMemo(() => logs.find((log) => log.type === 'curate'), [logs]);
     const queryLog = useMemo(() => logs.find((log) => log.type === 'query'), [logs]);
+    // Onboarding UI overhead: step title (1) + description (1) + content margin top (1)
+    const onboardingOverhead = 3;
+    const enterPromptHeight = ((currentStep === 'curate' && hasCurated && !curateAcknowledged) ||
+        (currentStep === 'query' && hasQueried && !queryAcknowledged))
+        ? 4
+        : 0;
+    const activeLog = currentStep === 'curate' ? curateLog : currentStep === 'query' ? queryLog : null;
+    let maxOutputLines = MIN_OUTPUT_LINES;
+    if (activeLog) {
+        // Calculate available height for the log (subtract onboarding UI and EnterPrompt)
+        const logAvailableHeight = availableHeight - onboardingOverhead - enterPromptHeight;
+        const parts = calculateLogContentLimit(activeLog, logAvailableHeight, messageItem);
+        const contentPart = parts.find((p) => p.field === 'content');
+        maxOutputLines = Math.max(MIN_OUTPUT_LINES, contentPart?.lines ?? MIN_OUTPUT_LINES);
+    }
+    const maxSearchItems = Math.max(MIN_SEARCH_ITEMS, maxOutputLines - INLINE_SEARCH_OVERHEAD);
     // Streaming state for init command
     const [isRunningInit, setIsRunningInit] = useState(false);
     const [streamingMessages, setStreamingMessages] = useState([]);
@@ -173,8 +181,10 @@ export const OnboardingFlow = ({ availableHeight }) => {
                 await result.execute(onMessage, onPrompt);
                 // Reload auth to detect config change
                 await reloadAuth();
-                // Restart consumer to pick up new project state
-                await restart();
+                // Restart agent to pick up new project state
+                if (client) {
+                    await client.request('agent:restart', { reason: 'Project initialized' });
+                }
             }
             catch (error) {
                 const errorMessage = error instanceof Error ? error.message : String(error);
@@ -189,7 +199,7 @@ export const OnboardingFlow = ({ availableHeight }) => {
             setInitError(result.content);
             setIsRunningInit(false);
         }
-    }, [handleSlashCommand, isRunningInit, reloadAuth, restart]);
+    }, [handleSlashCommand, isRunningInit, reloadAuth, client]);
     // Process streaming messages to handle action_start/action_stop pairs
     const processedStreamingMessages = useMemo(() => processMessagesForActions(streamingMessages), [streamingMessages]);
     // Render streaming message with proper styling
@@ -199,7 +209,7 @@ export const OnboardingFlow = ({ availableHeight }) => {
             if (msg.isActionRunning) {
                 return (_jsxs(Text, { color: colors.text, children: [_jsx(Spinner, { type: "dots" }), " ", msg.content] }, msg.id));
             }
-            return (_jsxs(Text, { color: colors.text, children: [msg.content, msg.stopMessage ? `... ${msg.stopMessage}` : ''] }, msg.id));
+            return (_jsx(Text, { color: colors.text, children: msg.stopMessage ? `... ${msg.stopMessage}` : '' }, msg.id));
         }
         // Regular messages
         let color = colors.text;
@@ -272,8 +282,8 @@ export const OnboardingFlow = ({ availableHeight }) => {
     // Render init step content
     const renderInitContent = () => {
         if (isRunningInit) {
-            const { displayMessages: liveMessages, skippedLines } = getMessagesFromEnd(processedStreamingMessages, maxOutputLines);
-            return (_jsx(Box, { flexDirection: "column", width: "100%", children: _jsxs(Box, { borderColor: colors.border, borderStyle: "round", flexDirection: "column", paddingX: 1, paddingY: 0, width: "100%", children: [skippedLines > 0 && (_jsxs(Text, { color: colors.secondary, dimColor: true, children: ["\u2191 ", skippedLines, " more lines above"] })), liveMessages.map((streamMsg) => renderStreamingMessage(streamMsg)), renderActivePrompt()] }) }));
+            const { displayMessages: liveMessages } = getMessagesFromEnd(processedStreamingMessages, maxOutputLines);
+            return (_jsx(Box, { flexDirection: "column", width: "100%", children: _jsxs(Box, { borderColor: colors.border, borderStyle: "single", flexDirection: "column", paddingX: 1, paddingY: 0, width: "100%", children: [liveMessages.map((streamMsg) => renderStreamingMessage(streamMsg)), renderActivePrompt()] }) }));
         }
         if (initError) {
             return (_jsxs(Box, { flexDirection: "column", rowGap: 1, children: [_jsxs(Text, { color: colors.errorText, children: ["Error: ", initError] }), _jsx(EnterPrompt, { action: "try again", active: mode === 'activity' && currentStep === 'init' && !isRunningInit && !activePrompt, onEnter: runInit })] }));
@@ -284,19 +294,19 @@ export const OnboardingFlow = ({ availableHeight }) => {
     const renderCurateContent = () => {
         // Show execution progress if curate is running
         if (curateLog) {
-            return (_jsxs(Box, { flexDirection: "column", width: "100%", children: [_jsx(LogItem, { log: curateLog, maxContentLines: maxOutputLines }), hasCurated && !curateAcknowledged && (_jsx(EnterPrompt, { action: "continue", active: mode === 'activity' && currentStep === 'curate', onEnter: () => setCurateAcknowledged(true) }))] }));
+            return (_jsxs(Box, { flexDirection: "column", width: "100%", children: [_jsx(LogItem, { heights: { ...messageItem, maxContentLines: maxOutputLines }, log: curateLog }), hasCurated && !curateAcknowledged && (_jsx(EnterPrompt, { action: "continue", active: mode === 'activity' && currentStep === 'curate', onEnter: () => setCurateAcknowledged(true) }))] }));
         }
         // Show copyable prompt when waiting
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: colors.dimText, wrap: "wrap", children: "Copy this command and paste it to your AI agent:" }), _jsx(CopyablePrompt, { isActive: mode === 'activity' && currentStep === 'curate', prompt: CURATE_PROMPT }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: colors.dimText, children: [_jsx(Spinner, { type: "dots" }), " Waiting for curate..."] }), _jsx(Text, { color: colors.dimText, children: " (Press Esc to skip)" })] })] }));
+        return (_jsxs(Box, { backgroundColor: colors.bg2, flexDirection: "column", padding: 1, width: "100%", children: [_jsx(Text, { color: colors.text, wrap: "wrap", children: "Try saying this to your AI Agent:" }), _jsx(Box, { marginBottom: 1, paddingLeft: 4, children: _jsx(Text, { color: colors.primary, wrap: "wrap", children: CURATE_PROMPT }) }), _jsxs(Text, { children: [_jsx(CopyablePrompt, { buttonLabel: '[ctrl+y] to copy', isActive: mode === 'activity' && currentStep === 'curate', textToCopy: CURATE_PROMPT }), _jsx(Text, { color: colors.dimText, children: " | [Esc] to skip onboarding" })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.dimText, children: "Waiting for curate..." }) })] }));
     };
     // Render query step content
     const renderQueryContent = () => {
         // Show execution progress if query is running
         if (queryLog) {
-            return (_jsxs(Box, { flexDirection: "column", width: "100%", children: [_jsx(LogItem, { log: queryLog, maxContentLines: maxOutputLines }), hasQueried && !queryAcknowledged && (_jsx(EnterPrompt, { action: "continue", active: mode === 'activity' && currentStep === 'query', onEnter: () => setQueryAcknowledged(true) }))] }));
+            return (_jsxs(Box, { flexDirection: "column", width: "100%", children: [_jsx(LogItem, { heights: { ...messageItem, maxContentLines: maxOutputLines }, log: queryLog }), hasQueried && !queryAcknowledged && (_jsx(EnterPrompt, { action: "continue", active: mode === 'activity' && currentStep === 'query', onEnter: () => setQueryAcknowledged(true) }))] }));
         }
         // Show copyable prompt when waiting
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: colors.dimText, wrap: "wrap", children: "Copy this command and paste it to your AI agent:" }), _jsx(CopyablePrompt, { isActive: mode === 'activity' && currentStep === 'query', prompt: QUERY_PROMPT }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: colors.dimText, children: [_jsx(Spinner, { type: "dots" }), " Waiting for query..."] }), _jsx(Text, { color: colors.dimText, children: " (Press Esc to skip)" })] })] }));
+        return (_jsxs(Box, { backgroundColor: colors.bg2, flexDirection: "column", padding: 1, width: "100%", children: [_jsx(Text, { color: colors.text, wrap: "wrap", children: "You can now query your memory:" }), _jsx(Box, { marginBottom: 1, paddingLeft: 4, children: _jsx(Text, { color: colors.primary, wrap: "wrap", children: QUERY_PROMPT }) }), _jsxs(Text, { children: [_jsx(CopyablePrompt, { buttonLabel: '[ctrl+y] to copy', isActive: mode === 'activity' && currentStep === 'query', textToCopy: QUERY_PROMPT }), _jsx(Text, { color: colors.dimText, children: " | [Esc] to skip onboarding" })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.dimText, children: "Waiting for query..." }) })] }));
     };
     // Render complete step content
     const renderCompleteContent = () => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: colors.dimText, wrap: "wrap", children: "Activity logs will appear here as you use brv curate and brv query." }), _jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsx(Text, { color: colors.dimText, children: "Tips:" }), _jsx(Text, { color: colors.dimText, children: "- Press [Tab] to switch to commands view" }), _jsx(Text, { color: colors.dimText, children: "- Use /push to sync your context to the cloud" }), _jsx(Text, { color: colors.dimText, children: "- Use /gen-rules to generate agent rules" }), _jsx(Text, { color: colors.dimText, children: "- Type / for available commands" })] }), _jsx(EnterPrompt, { action: "finish onboarding", active: mode === 'activity' && currentStep === 'complete', onEnter: () => completeOnboarding() })] }));

package/dist/tui/components/scrollable-list.js

@@ -5,7 +5,7 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
  * Generic scrollable list that works reliably with Ink's layout.
  * Uses item-based slicing with dynamic height calculation.
  */
-import { Box, Text, useInput } from 'ink';
+import { Box, Spacer, Text, useInput } from 'ink';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 export function ScrollableList({ autoScrollToBottom = true, availableHeight, estimateItemHeight = () => 1, isActive = true, items, keyExtractor, onScroll, renderItem, scrollStep = 1, showIndicator = true, }) {
     const [scrollOffset, setScrollOffset] = useState(0);
@@ -16,11 +16,7 @@ export function ScrollableList({ autoScrollToBottom = true, availableHeight, est
             return { visibleEndIndex: 0, visibleItems: [], visibleStartIndex: 0 };
         }
         // Calculate heights of all items
-        const itemHeights = [];
-        for (let i = 0; i < totalItems; i++) {
-            const h = estimateItemHeight(items[i], i);
-            itemHeights.push(h);
-        }
+        const itemHeights = items.map((item, index) => estimateItemHeight(item, index));
         // Reserve space for indicators (1 line each)
         const indicatorSpace = showIndicator ? 2 : 0;
         const contentHeight = Math.max(1, availableHeight - indicatorSpace);
@@ -46,10 +42,16 @@ export function ScrollableList({ autoScrollToBottom = true, availableHeight, est
     const maxOffset = useMemo(() => {
         if (totalItems === 0)
             return 0;
-        // Find the minimum start index that shows the last item
-        let maxStart = totalItems - 1;
         const indicatorSpace = showIndicator ? 2 : 0;
         const contentHeight = Math.max(1, availableHeight - indicatorSpace);
+        // Calculate total height of all items
+        const totalHeight = items.reduce((sum, item, index) => sum + estimateItemHeight(item, index), 0);
+        // If all items fit, maxOffset should be 0
+        if (totalHeight <= contentHeight) {
+            return 0;
+        }
+        // Find the minimum start index that shows the last item
+        let maxStart = totalItems - 1;
         let accumulatedHeight = 0;
         for (let i = totalItems - 1; i >= 0; i--) {
             const h = estimateItemHeight(items[i], i);
@@ -114,8 +116,8 @@ export function ScrollableList({ autoScrollToBottom = true, availableHeight, est
     const canScrollDown = scrollOffset < maxOffset;
     const itemsAbove = visibleStartIndex;
     const itemsBelow = totalItems - visibleEndIndex;
-    return (_jsxs(Box, { flexDirection: "column", width: "100%", children: [showIndicator && canScrollUp && (_jsx(Box, { justifyContent: "center", children: _jsxs(Text, { dimColor: true, children: ["\u2191 ", itemsAbove, " more above"] }) })), visibleItems.map((item, idx) => {
+    return (_jsxs(Box, { flexDirection: "column", height: availableHeight, justifyContent: "space-between", overflowY: "hidden", width: "100%", children: [showIndicator && canScrollUp && (_jsx(Box, { justifyContent: "center", children: _jsxs(Text, { dimColor: true, children: ["\u2191 ", itemsAbove, " more above"] }) })), visibleItems.map((item, idx) => {
                 const actualIndex = visibleStartIndex + idx;
                 return _jsx(React.Fragment, { children: renderItem(item, actualIndex) }, keyExtractor(item, actualIndex));
-            }), showIndicator && canScrollDown && (_jsx(Box, { justifyContent: "center", children: _jsxs(Text, { dimColor: true, children: ["\u2193 ", itemsBelow, " more below"] }) }))] }));
+            }), _jsx(Spacer, {}), showIndicator && canScrollDown && (_jsx(Box, { justifyContent: "center", children: _jsxs(Text, { dimColor: true, children: ["\u2193 ", itemsBelow, " more below"] }) }))] }));
 }

package/dist/tui/components/suggestions.js

@@ -9,28 +9,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { Box, Text, useInput } from 'ink';
 import { useEffect, useMemo, useRef } from 'react';
-import { useMode } from '../contexts/use-mode.js';
-import { useTheme } from '../contexts/use-theme.js';
+import { useMode } from '../contexts/mode-context.js';
+import { useTheme } from '../contexts/theme-context.js';
 import { useSlashCompletion } from '../hooks/index.js';
+import { CommandDetails } from './command-details.js';
 const MAX_VISIBLE_ITEMS = 5;
-/**
- * Format usage string from args, flags, and subcommands
- */
-function formatUsage(label, args, flags, subCommands) {
-    let usage = label;
-    if (subCommands?.length) {
-        usage += ' <subcommand>';
-    }
-    if (args?.length) {
-        const argsStr = args.map((a) => (a.required ? `<${a.name}>` : `[${a.name}]`)).join(' ');
-        usage += ` ${argsStr}`;
-    }
-    if (flags?.length) {
-        const flagsStr = flags.map((f) => `[--${f.name}]`).join(' ');
-        usage += ` ${flagsStr}`;
-    }
-    return usage;
-}
 export const Suggestions = ({ input, onInsert, onSelect }) => {
     const { theme: { colors }, } = useTheme();
     const { mode, setMode } = useMode();
@@ -64,21 +47,40 @@ export const Suggestions = ({ input, onInsert, onSelect }) => {
             setMode('console');
         }
     }, [mode, suggestions.length, isCommandAttempt, hasMatchedCommand, setMode]);
-    // Calculate visible window based on selected index
+    // - No indicators: 5 items
+    // - One indicator (top OR bottom): 4 items + 1 indicator
+    // - Both indicators: 3 items + 2 indicators
     const { visibleSuggestions, windowStart } = useMemo(() => {
-        if (suggestions.length <= MAX_VISIBLE_ITEMS) {
+        const totalItems = suggestions.length;
+        const totalHeight = MAX_VISIBLE_ITEMS; // 5 lines total
+        // All items fit, no indicators needed
+        if (totalItems <= totalHeight) {
             return { visibleSuggestions: suggestions, windowStart: 0 };
         }
-        // Calculate window start to keep selected item visible
-        let start = 0;
-        if (activeIndex >= MAX_VISIBLE_ITEMS) {
-            start = activeIndex - MAX_VISIBLE_ITEMS + 1;
+        let maxVisibleItems;
+        let start;
+        // Near start: no top indicator needed
+        if (activeIndex < 3) {
+            maxVisibleItems = totalHeight - 1; // 4 items + bottom indicator
+            start = 0;
+        }
+        // Near end: no bottom indicator needed
+        else if (activeIndex >= totalItems - 3) {
+            maxVisibleItems = totalHeight - 1; // top indicator + 4 items
+            start = Math.max(0, totalItems - maxVisibleItems);
+        }
+        // Middle: both indicators needed
+        else {
+            maxVisibleItems = totalHeight - 2; // top indicator + 3 items + bottom indicator
+            // Try to center activeIndex in the viewport
+            const centerOffset = Math.floor(maxVisibleItems / 2);
+            start = activeIndex - centerOffset;
+            // Adjust if we went past the end
+            const maxStart = totalItems - maxVisibleItems;
+            start = Math.min(start, maxStart);
         }
-        // Ensure we don't go past the end
-        const maxStart = suggestions.length - MAX_VISIBLE_ITEMS;
-        start = Math.min(start, maxStart);
         return {
-            visibleSuggestions: suggestions.slice(start, start + MAX_VISIBLE_ITEMS),
+            visibleSuggestions: suggestions.slice(start, start + maxVisibleItems),
             windowStart: start,
         };
     }, [suggestions, activeIndex]);
@@ -138,7 +140,7 @@ export const Suggestions = ({ input, onInsert, onSelect }) => {
     // Don't show when user is typing arguments for a known command
     if (suggestions.length === 0) {
         if (isCommandAttempt && !hasMatchedCommand && input.trim().length > 1) {
-            return (_jsx(Box, { borderColor: colors.border, borderStyle: "single", paddingX: 1, children: _jsx(Text, { color: colors.dimText, children: "No commands found" }) }));
+            return (_jsx(Box, { borderColor: colors.border, borderStyle: "single", height: 7, paddingX: 1, children: _jsx(Text, { color: colors.dimText, children: "No commands found" }) }));
         }
         return null;
     }
@@ -147,16 +149,12 @@ export const Suggestions = ({ input, onInsert, onSelect }) => {
     const labelWidth = Math.max(maxLabelLength, 12);
     // Get the selected suggestion
     const selectedSuggestion = activeIndex >= 0 ? suggestions[activeIndex] : null;
-    const hasDetails = selectedSuggestion &&
-        (selectedSuggestion.args?.length || selectedSuggestion.flags?.length || selectedSuggestion.subCommands?.length);
     // Calculate if there are more items above/below
     const hasMoreAbove = windowStart > 0;
-    const hasMoreBelow = windowStart + MAX_VISIBLE_ITEMS < suggestions.length;
-    return (_jsxs(Box, { borderColor: colors.border, borderStyle: "single", flexDirection: "column", paddingX: 1, children: [hasMoreAbove && (_jsxs(Text, { color: colors.dimText, dimColor: true, children: ["\u2191 ", windowStart, " more above"] })), visibleSuggestions.map((suggestion, index) => {
-                const actualIndex = windowStart + index;
-                const isActive = actualIndex === activeIndex;
-                return (_jsxs(Box, { children: [_jsxs(Text, { backgroundColor: isActive ? colors.dimText : undefined, color: colors.text, children: [isActive ? '❯ ' : '  ', suggestion.label.padEnd(labelWidth)] }), _jsxs(Text, { color: colors.dimText, children: [" ", suggestion.description || ''] })] }, suggestion.value));
-            }), hasMoreBelow && (_jsxs(Text, { color: colors.dimText, dimColor: true, children: ["\u2193 ", suggestions.length - windowStart - MAX_VISIBLE_ITEMS, " more below"] })), hasDetails && (_jsxs(Box, { borderColor: colors.border, borderStyle: "single", borderTop: true, flexDirection: "column", marginTop: 0, children: [_jsxs(Text, { color: colors.text, children: ["Usage:", ' ', formatUsage(selectedSuggestion.label, selectedSuggestion.args, selectedSuggestion.flags, selectedSuggestion.subCommands)] }), selectedSuggestion.subCommands?.map((sub) => (_jsxs(Text, { color: colors.dimText, children: ['  ', _jsx(Text, { color: colors.text, children: sub.name.padEnd(labelWidth + 2) }), '  ', sub.description] }, sub.name))), selectedSuggestion.args?.map((arg) => (_jsxs(Text, { color: colors.dimText, children: ['  ', _jsx(Text, { color: colors.text, children: (arg.required ? `<${arg.name}>` : `[${arg.name}]`).padEnd(labelWidth + 2) }), '  ', arg.description] }, arg.name))), selectedSuggestion.flags?.map((flag) => (_jsxs(Text, { color: colors.dimText, children: ['  ', _jsx(Text, { color: colors.text, children: (flag.type === 'file'
-                                    ? `${flag.char || '@'}file`
-                                    : (flag.char ? `-${flag.char}, ` : '') + `--${flag.name}`).padEnd(labelWidth + 2) }), '  ', flag.description, flag.default !== undefined && _jsxs(Text, { children: [" (default: ", String(flag.default), ")"] })] }, flag.name)))] }))] }));
+    const hasMoreBelow = windowStart + visibleSuggestions.length < suggestions.length;
+    return (_jsxs(Box, { borderColor: colors.border, borderStyle: "single", columnGap: 1, height: 7, paddingX: 1, children: [_jsxs(Box, { flexDirection: 'column', flexShrink: 0, children: [hasMoreAbove && (_jsxs(Text, { color: colors.dimText, dimColor: true, children: ["\u2191 ", windowStart, " more"] })), visibleSuggestions.map((suggestion, index) => {
+                        const actualIndex = windowStart + index;
+                        const isActive = actualIndex === activeIndex;
+                        return (_jsx(Box, { children: _jsxs(Text, { backgroundColor: isActive ? colors.dimText : undefined, color: colors.text, children: [isActive ? '❯ ' : '  ', suggestion.label.padEnd(labelWidth)] }) }, suggestion.value));
+                    }), hasMoreBelow && (_jsxs(Text, { color: colors.dimText, dimColor: true, children: ["\u2193 ", suggestions.length - windowStart - visibleSuggestions.length, " more"] }))] }), _jsx(CommandDetails, { labelWidth: labelWidth, selectedSuggestion: selectedSuggestion })] }));
 };

package/dist/tui/components/tab-bar.d.ts

@@ -2,9 +2,10 @@
  * Tab Bar Component
  */
 import React from 'react';
-import type { TabId } from '../types.js';
+import type { Tab, TabId } from '../types.js';
 interface TabBarProps {
     activeTab: TabId;
+    tabs: Tab[];
 }
 export declare const TabBar: React.FC<TabBarProps>;
 export {};

package/dist/tui/components/tab-bar.js

@@ -4,9 +4,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { Box, Text } from 'ink';
 import React from 'react';
-import { TABS } from '../constants.js';
-import { useTheme } from '../contexts/use-theme.js';
-export const TabBar = ({ activeTab }) => {
+import { useTheme } from '../contexts/theme-context.js';
+export const TabBar = ({ activeTab, tabs = [] }) => {
     const { theme: { colors }, } = useTheme();
-    return (_jsxs(Box, { alignItems: "flex-end", paddingX: 1, width: "100%", children: [_jsx(Box, { borderColor: colors.border, borderLeft: false, borderRight: false, borderStyle: "single", height: "100%", width: 2 }), TABS.map((tab) => (_jsxs(React.Fragment, { children: [_jsx(Box, { borderBottomColor: activeTab === tab.id ? colors.primary : colors.border, borderColor: colors.border, borderLeft: false, borderRight: false, borderStyle: "single", children: _jsx(Text, { children: tab.label }) }), _jsx(Box, { borderColor: colors.border, borderLeft: false, borderRight: false, borderStyle: "single", height: "100%", width: 6 })] }, tab.id))), _jsx(Box, { borderColor: colors.border, borderLeft: false, borderRight: false, borderStyle: "single", flexGrow: 1, height: "100%" })] }));
+    return (_jsxs(Box, { alignItems: "flex-end", paddingX: 1, width: "100%", children: [_jsx(Box, { borderColor: colors.border, borderLeft: false, borderRight: false, borderStyle: "single", height: "100%", width: 2 }), tabs.map((tab) => (_jsxs(React.Fragment, { children: [_jsx(Box, { borderBottomColor: activeTab === tab.id ? colors.primary : colors.border, borderColor: colors.border, borderLeft: false, borderRight: false, borderStyle: "single", children: _jsx(Text, { children: tab.label }) }), _jsx(Box, { borderColor: colors.border, borderLeft: false, borderRight: false, borderStyle: "single", height: "100%", width: 6 })] }, tab.id))), _jsx(Box, { borderColor: colors.border, borderLeft: false, borderRight: false, borderStyle: "single", flexGrow: 1, height: "100%" })] }));
 };

package/dist/tui/constants.d.ts

@@ -3,9 +3,4 @@
  */
 import type { Tab } from './types.js';
 export declare const TABS: Tab[];
-export declare const LAYOUT: {
-    readonly footerHeight: 2;
-    readonly headerHeight: 4;
-    readonly tabBarHeight: 2;
-};
 export declare const DEFAULT_TAB: "activity";

package/dist/tui/constants.js

@@ -5,9 +5,4 @@ export const TABS = [
     { id: 'activity', label: 'Activity' },
     { id: 'console', label: 'Console' },
 ];
-export const LAYOUT = {
-    footerHeight: 2,
-    headerHeight: 4,
-    tabBarHeight: 2,
-};
 export const DEFAULT_TAB = 'activity';

package/dist/tui/contexts/auth-context.js

@@ -12,10 +12,11 @@ import { OAuthService } from '../../infra/auth/oauth-service.js';
 import { OidcDiscoveryService } from '../../infra/auth/oidc-discovery-service.js';
 import { SystemBrowserLauncher } from '../../infra/browser/system-browser-launcher.js';
 import { CallbackHandler } from '../../infra/http/callback-handler.js';
-import { FileGlobalConfigStore } from "../../infra/storage/file-global-config-store.js";
+import { FileGlobalConfigStore } from '../../infra/storage/file-global-config-store.js';
 import { MixpanelTrackingService } from '../../infra/tracking/mixpanel-tracking-service.js';
 import { LoginUseCase } from '../../infra/usecase/login-use-case.js';
 import { HttpUserService } from '../../infra/user/http-user-service.js';
+import { useAuthPolling } from '../hooks/use-auth-polling.js';
 import { useServices } from './services-context.js';
 const AuthContext = createContext(undefined);
 /**
@@ -129,6 +130,12 @@ export function AuthProvider({ children, initialAuthToken, initialBrvConfig }) {
             setIsInitialConfigLoaded(true);
         });
     }, [reloadBrvConfig]);
+    // Auth state polling - check token validity and refresh if needed
+    useAuthPolling({
+        authToken,
+        onTokenChange: setAuthToken,
+        tokenStore,
+    });
     // Memoize context value
     const value = useMemo(() => ({
         authState,
@@ -140,7 +147,7 @@ export function AuthProvider({ children, initialAuthToken, initialBrvConfig }) {
         login,
         loginOutput,
         reloadAuth,
-        reloadBrvConfig
+        reloadBrvConfig,
     }), [authToken, brvConfig, isInitialConfigLoaded, isLoggingIn, loginOutput, authState, isAuthorized, login, reloadAuth]);
     return _jsx(AuthContext.Provider, { value: value, children: children });
 }

package/dist/tui/contexts/{use-commands.js → commands-context.js}

@@ -18,10 +18,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { load } from '../../infra/repl/commands/index.js';
-import { useSlashCommandProcessor } from '../hooks/index.js';
+import { useSlashCommandProcessor, useTerminalBreakpoint } from '../hooks/index.js';
+import { useServices } from './services-context.js';
 const CommandsContext = createContext(undefined);
 export function CommandsProvider({ children }) {
     const [commands, setCommands] = useState([]);
+    const { version } = useServices();
+    const { breakpoint, columns, rows } = useTerminalBreakpoint();
     useEffect(() => {
         const abortController = new AbortController();
         async function loadCommands() {
@@ -33,10 +36,8 @@ export function CommandsProvider({ children }) {
         };
     }, []);
     const commandContext = useMemo(() => ({
-        slashCommands: commands,
-        // version:, -> need pass version here
-        // syncService:, -> need pass sync service here
-    }), [commands]);
+        version,
+    }), [breakpoint, columns, rows, version]);
     const { handleSlashCommand } = useSlashCommandProcessor(commandContext, commands);
     const contextValue = useMemo(() => ({
         commands,

package/dist/tui/contexts/index.d.ts

@@ -2,5 +2,10 @@
  * TUI Contexts
  */
 export * from './auth-context.js';
-export * from './consumer.js';
+export * from './commands-context.js';
+export * from './mode-context.js';
+export * from './onboarding-context.js';
 export * from './services-context.js';
+export * from './tasks-context.js';
+export * from './theme-context.js';
+export * from './transport-context.js';

package/dist/tui/contexts/index.js

@@ -2,5 +2,10 @@
  * TUI Contexts
  */
 export * from './auth-context.js';
-export * from './consumer.js';
+export * from './commands-context.js';
+export * from './mode-context.js';
+export * from './onboarding-context.js';
 export * from './services-context.js';
+export * from './tasks-context.js';
+export * from './theme-context.js';
+export * from './transport-context.js';

package/dist/tui/contexts/onboarding-context.d.ts

@@ -2,7 +2,7 @@
  * Onboarding Context
  *
  * Global context for managing onboarding state and step derivation.
- * State is derived from brvConfig and sessionExecutions.
+ * State is derived from brvConfig and tasks from transport events.
  *
  * Usage:
  * ```tsx

package/dist/tui/contexts/onboarding-context.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Onboarding Context
  *
  * Global context for managing onboarding state and step derivation.
- * State is derived from brvConfig and sessionExecutions.
+ * State is derived from brvConfig and tasks from transport events.
  *
  * Usage:
  * ```tsx
@@ -12,8 +12,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useAuth } from './auth-context.js';
-import { useConsumer } from './index.js';
 import { useServices } from './services-context.js';
+import { useTasks } from './tasks-context.js';
 const OnboardingContext = createContext(undefined);
 /**
  * Provider for onboarding state
@@ -31,7 +31,7 @@ const OnboardingContext = createContext(undefined);
 const ONBOARDING_COOLDOWN_MS = 7 * 24 * 60 * 60 * 1000;
 export function OnboardingProvider({ children }) {
     const { brvConfig, isInitialConfigLoaded } = useAuth();
-    const { sessionExecutions } = useConsumer();
+    const { tasks } = useTasks();
     const { onboardingPreferenceStore, trackingService } = useServices();
     const isInitialized = brvConfig !== undefined;
     // Track if we've already checked initial config state
@@ -95,16 +95,16 @@ export function OnboardingProvider({ children }) {
             trackingService.track('onboarding:query_completed');
         }
     }, [trackingService]);
-    // Check for completed curate/query executions in session
+    // Check for completed curate/query tasks in session
     const { hasCurated, hasQueried } = useMemo(() => {
         let curateCompleted = false;
         let queryCompleted = false;
-        for (const { execution } of sessionExecutions) {
-            if (execution.status === 'completed') {
-                if (execution.type === 'curate') {
+        for (const task of tasks.values()) {
+            if (task.status === 'completed') {
+                if (task.type === 'curate') {
                     curateCompleted = true;
                 }
-                else if (execution.type === 'query') {
+                else if (task.type === 'query') {
                     queryCompleted = true;
                 }
             }
@@ -113,7 +113,7 @@ export function OnboardingProvider({ children }) {
                 break;
         }
         return { hasCurated: curateCompleted, hasQueried: queryCompleted };
-    }, [sessionExecutions]);
+    }, [tasks]);
     // Derive current step (considering acknowledgment)
     // Stay on curate/query step until user acknowledges the completion
     const currentStep = useMemo(() => {

package/dist/tui/contexts/tasks-context.d.ts

@@ -0,0 +1,84 @@
+import React from 'react';
+import type { TaskErrorData, ToolErrorType } from '../../core/domain/transport/schemas.js';
+import { TaskStats } from '../types/ui.js';
+/**
+ * Task status derived from task lifecycle events.
+ */
+export type TaskStatus = 'cancelled' | 'completed' | 'created' | 'error' | 'started';
+/**
+ * Tool call tracking with status from toolResult.
+ */
+export type ToolCallEvent = {
+    args: Record<string, unknown>;
+    callId?: string;
+    error?: string;
+    errorType?: ToolErrorType;
+    result?: unknown;
+    sessionId: string;
+    status: 'completed' | 'error' | 'running';
+    toolName: string;
+};
+/**
+ * Task data aggregated from transport events.
+ */
+export type Task = {
+    /** Task completion timestamp */
+    completedAt?: number;
+    /** Task content/prompt */
+    content: string;
+    /** Task creation timestamp */
+    createdAt: number;
+    /** Error data if task failed */
+    error?: TaskErrorData;
+    /** File paths for curate --files */
+    files?: string[];
+    /** Input of query/curate */
+    input: string;
+    /** Result string if task completed */
+    result?: string;
+    /** Session ID from LLM events */
+    sessionId?: string;
+    /** Task start timestamp */
+    startedAt?: number;
+    /** Current task status */
+    status: TaskStatus;
+    /** Unique task identifier */
+    taskId: string;
+    /** Tool calls executed during task */
+    toolCalls: ToolCallEvent[];
+    /** Task type */
+    type: 'curate' | 'query';
+};
+/**
+ * Context value for tasks state.
+ */
+export type TasksContextValue = {
+    /** Clear all tasks from memory */
+    clearTasks: () => void;
+    /** Get a specific task by ID */
+    getTask: (taskId: string) => Task | undefined;
+    /** Transport statistics */
+    stats: TaskStats;
+    /** Map of all tasks by taskId */
+    tasks: Map<string, Task>;
+};
+/**
+ * Provider component that subscribes to task events and maintains task state.
+ * Tracks task lifecycle and LLM tool calls for all tasks.
+ *
+ * Event Flow:
+ * 1. task:created → Create task with 'created' status
+ * 2. task:started → Update to 'started' status
+ * 3. llmservice:toolCall → Add tool call with 'running' status
+ * 4. llmservice:toolResult → Update tool call status to 'completed' or 'error'
+ * 5. llmservice:response → Update task result content from LLM response
+ * 6. task:completed | task:error | task:cancelled → Terminal state
+ */
+export declare function TasksProvider({ children }: {
+    children: React.ReactNode;
+}): React.ReactElement;
+/**
+ * Hook to access tasks context.
+ * Must be used within a TasksProvider.
+ */
+export declare function useTasks(): TasksContextValue;