clarity-ai 5.0.0 → 5.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-ai",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "Premium OpenCode-style terminal AI agent — streaming, tools, multiline composer, virtual scroll, code blocks",
   "type": "module",
   "bin": {

package/src/app.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useRef, useEffect } from 'react';
+import React, { useState, useCallback } from 'react';
 import { Box } from 'ink';
 import { Banner } from './components/Banner.js';
 import { MessageList } from './components/MessageList.js';
@@ -17,7 +17,6 @@ export function App({ config }) {
   const [showCommands, setShowCommands] = useState(false);
   const [showModels, setShowModels] = useState(false);
   const [showBanner, setShowBanner] = useState(true);
-  const streamRef = useRef('');
 
   const onSubmit = useCallback(async (input) => {
     if (input.startsWith('/')) {
@@ -53,10 +52,12 @@ export function App({ config }) {
         messages: state.messages,
         thinking: state.thinking,
         streamContent,
+        agentStatus: state.agentStatus,
+        toolExecutions: state.toolExecutions,
       })
     ),
     showCommands
-      ? h(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center' },
+      ? h(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center' },
           h(Box, { backgroundColor: '#0A0A0A', borderStyle: 'round', borderColor: '#333', paddingX: 2, paddingY: 1 },
             h(CommandPicker, {
               query: '',
@@ -67,7 +68,7 @@ export function App({ config }) {
         )
       : null,
     showModels
-      ? h(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center' },
+      ? h(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center' },
           h(Box, { backgroundColor: '#0A0A0A', borderStyle: 'round', borderColor: '#333', paddingX: 2, paddingY: 1 },
             h(ModelPicker, {
               onSelect: handleModelSelect,

package/src/chat.js

@@ -11,13 +11,16 @@ export function createChatState() {
     awaitingKey: false,
     blockedProvider: null,
     agentMode: true,
-    tokenCount: 0,
-    idCounter: 0,
+    agentStatus: '',
+    toolExecutions: [],
+    thoughtTimer: null,
   };
 }
 
 let msgId = 0;
+let execId = 0;
 function nextId() { return 'm' + (++msgId); }
+function nextExecId() { return 'x' + (++execId); }
 
 export async function handleSend(state, setState, input, model, provider, onStreamContent) {
   if (!input.trim() || state.awaitingKey) return;
@@ -28,6 +31,9 @@ export async function handleSend(state, setState, input, model, provider, onStre
     messages: [...s.messages, userMsg],
     thinking: true,
     streamContent: '',
+    agentStatus: 'Processing...',
+    toolExecutions: [],
+    thoughtTimer: Date.now(),
   }));
   onStreamContent('');
 
@@ -37,9 +43,7 @@ export async function handleSend(state, setState, input, model, provider, onStre
         role: m.role === 'error' ? 'assistant' : m.role,
         content: m.content,
       };
-      if (m.role === 'tool' && m.tool_call_id) {
-        base.tool_call_id = m.tool_call_id;
-      }
+      if (m.role === 'tool' && m.tool_call_id) base.tool_call_id = m.tool_call_id;
       if (m.role === 'assistant' && m.toolCalls) {
         base.tool_calls = m.toolCalls.map(tc => ({
           id: tc.id, type: 'function',
@@ -51,21 +55,23 @@ export async function handleSend(state, setState, input, model, provider, onStre
 
     await processStream(provider, model, history, state.agentMode, setState, onStreamContent);
   } catch (err) {
-    if (err.type) {
-      handleError(setState, err);
-    } else {
-      setState(s => ({
-        ...s, thinking: false, streamContent: '',
-        messages: [...s.messages, { id: nextId(), role: 'error', content: err.message || 'Unknown error' }],
-      }));
-    }
+    const thoughtTime = state.thoughtTimer ? Date.now() - state.thoughtTimer : 0;
+    setState(s => ({
+      ...s, thinking: false, streamContent: '', agentStatus: '', toolExecutions: [], thoughtTimer: null,
+      messages: [...s.messages, {
+        id: nextId(), role: 'error',
+        content: err.hint || err.message || 'Request failed',
+        type: err.type,
+        duration: thoughtTime,
+      }],
+    }));
     onStreamContent('');
   }
 }
 
 async function processStream(provider, model, history, agentMode, setState, onStreamContent, depth = 0) {
-  if (depth > 10) {
-    setState(s => ({ ...s, thinking: false, streamContent: '' }));
+  if (depth > 8) {
+    setState(s => ({ ...s, thinking: false, streamContent: '', agentStatus: '', toolExecutions: [], thoughtTimer: null }));
     onStreamContent('');
     return;
   }
@@ -79,63 +85,148 @@ async function processStream(provider, model, history, agentMode, setState, onSt
   }
 
   let buffer = '';
-  let toolCalls = null;
+  let toolCallsData = null;
+  let thoughtTime = Date.now();
 
   try {
     for await (const event of stream) {
       if (event.type === 'token') {
         buffer += event.content;
         onStreamContent(buffer);
+        setState(s => ({ ...s, agentStatus: 'Writing response...' }));
       } else if (event.type === 'tool_calls') {
-        toolCalls = event.calls;
+        toolCallsData = event.calls;
+      } else if (event.type === 'done') {
+      } else if (event.type === 'timeout') {
+        setState(s => ({
+          ...s, agentStatus: 'Stream stalled, completing...',
+          messages: [...s.messages, { id: nextId(), role: 'system', content: 'Stream timeout — response may be incomplete' }],
+        }));
       } else if (event.type === 'error') {
-        handleError(setState, event);
+        setState(s => ({ ...s, thinking: false, streamContent: '', agentStatus: '', toolExecutions: [], thoughtTimer: null }));
+        setState(s => ({
+          ...s,
+          messages: [...s.messages, { id: nextId(), role: 'error', content: event.hint || event.message }],
+        }));
         onStreamContent('');
         return;
       }
     }
   } catch (err) {
-    if (err.type === 'rate_limit') { await sleep(2000); return processStream(provider, model, history, agentMode, setState, onStreamContent, depth); }
+    if (err.type === 'rate_limit') {
+      await sleep(2000);
+      setState(s => ({ ...s, agentStatus: 'Retrying after rate limit...' }));
+      return processStream(provider, model, history, agentMode, setState, onStreamContent, depth);
+    }
     throw err;
   }
 
+  const elapsed = Date.now() - thoughtTime;
+
   if (buffer) {
     setState(s => ({
       ...s,
-      messages: [...s.messages, { id: nextId(), role: 'assistant', content: buffer, streaming: false }],
+      messages: [...s.messages, { id: nextId(), role: 'assistant', content: buffer, duration: elapsed }],
       streamContent: '',
+      agentStatus: '',
     }));
     onStreamContent('');
   } else {
-    setState(s => ({ ...s, streamContent: '' }));
+    setState(s => ({ ...s, streamContent: '', agentStatus: '' }));
     onStreamContent('');
   }
 
-  if (toolCalls && toolCalls.length > 0 && agentMode) {
+  if (toolCallsData && toolCallsData.length > 0 && agentMode) {
+    const execs = toolCallsData.map(tc => ({
+      execId: nextExecId(),
+      tcId: tc.id,
+      name: tc.function.name,
+      args: tc.function.arguments,
+      status: 'running',
+      startTime: Date.now(),
+      duration: 0,
+      result: '',
+    }));
+
+    setState(s => ({
+      ...s,
+      toolExecutions: execs,
+      agentStatus: 'Running tools...',
+    }));
+
     const toolResults = [];
-    for (const tc of toolCalls) {
+    for (let i = 0; i < toolCallsData.length; i++) {
+      const tc = toolCallsData[i];
       const { name, arguments: argsStr } = tc.function;
       let args;
       try { args = JSON.parse(argsStr); } catch { args = {}; }
-      const result = await executeTool(name, args);
+
+      setState(s => ({
+        ...s,
+        agentStatus: '' + name + '(' + JSON.stringify(args).slice(0, 60) + ')',
+        toolExecutions: s.toolExecutions.map(x =>
+          x.execId === execs[i].execId ? { ...x, status: 'running' } : x
+        ),
+      }));
+
+      let result, error;
+      const toolStart = Date.now();
+      try {
+        result = await executeTool(name, args);
+      } catch (e) {
+        error = e.message;
+        result = 'Error: ' + e.message;
+      }
+      const toolDuration = Date.now() - toolStart;
+
       toolResults.push({ tool_call_id: tc.id, role: 'tool', content: result, name });
+
+      setState(s => ({
+        ...s,
+        toolExecutions: s.toolExecutions.map(x =>
+          x.execId === execs[i].execId
+            ? { ...x, status: error ? 'failed' : 'completed', duration: toolDuration, result, error }
+            : x
+        ),
+      }));
     }
 
+    setState(s => ({
+      ...s,
+      agentStatus: 'Processing results...',
+    }));
+
+    const totalThoughtTime = Date.now() - thoughtTime;
+
     setState(s => ({
       ...s,
       messages: [
         ...s.messages,
-        { id: nextId(), role: 'assistant', content: buffer || '', toolCalls, streaming: false },
+        {
+          id: nextId(),
+          role: 'assistant',
+          content: buffer || '',
+          toolCalls: toolCallsData,
+          toolResults: toolResults.map((tr, i) => ({
+            ...tr,
+            execId: execs[i]?.execId,
+            duration: execs[i]?.duration,
+            status: execs[i]?.status,
+          })),
+          duration: totalThoughtTime,
+        },
         ...toolResults.map(tr => ({
           id: nextId(), role: 'tool', content: tr.content,
           tool_call_id: tr.tool_call_id, toolName: tr.name,
         })),
       ],
+      toolExecutions: [],
+      agentStatus: '',
     }));
 
     const newHistory = [
       ...history,
-      { role: 'assistant', content: buffer || null, tool_calls: toolCalls.map(tc => ({
+      { role: 'assistant', content: buffer || null, tool_calls: toolCallsData.map(tc => ({
         id: tc.id, type: 'function',
         function: { name: tc.function.name, arguments: tc.function.arguments },
       }))},
@@ -143,21 +234,17 @@ async function processStream(provider, model, history, agentMode, setState, onSt
     ];
 
     await processStream(provider, model, newHistory, agentMode, setState, onStreamContent, depth + 1);
+  } else {
+    setState(s => ({
+      ...s,
+      thinking: false,
+      agentStatus: '',
+      toolExecutions: [],
+      thoughtTimer: null,
+    }));
   }
 }
 
-function handleError(setState, err) {
-  setState(s => ({
-    ...s, thinking: false, streamContent: '',
-    messages: [...s.messages, {
-      id: nextId(),
-      role: 'error',
-      content: err.hint || err.message,
-      type: err.type,
-    }],
-  }));
-}
-
 export async function handleCommand(input, state, setState, modelSetter, providerSetter, model, provider) {
   const parts = input.trim().split(/\s+/);
   const cmd = parts[0];
@@ -185,13 +272,7 @@ export async function handleCommand(input, state, setState, modelSetter, provide
       }));
       break;
     case '/clear':
-      setState(s => ({ ...s, messages: [], streamContent: '' }));
-      break;
-    case '/theme':
-      setState(s => ({
-        ...s,
-        messages: [...s.messages, { id: nextId(), role: 'system', content: 'Themes: dark (only theme available)' }],
-      }));
+      setState(s => ({ ...s, messages: [], streamContent: '', toolExecutions: [], agentStatus: '' }));
       break;
     case '/export': {
       const text = state.messages.map(m => '[' + m.role + '] ' + m.content).join('\n\n');
@@ -211,7 +292,6 @@ export async function handleCommand(input, state, setState, modelSetter, provide
         '/provider               Switch provider',
         '/agent                  Toggle agent mode',
         '/clear                  Clear conversation',
-        '/theme                  Change color theme',
         '/export                 Export conversation',
         '/help                   Show this help',
         '/exit                   Exit CLARITY',

package/src/components/MessageBubble.js

@@ -1,75 +1,102 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Box, Text } from 'ink';
 import { CodeBlock } from './CodeBlock.js';
 import { ThinkingBlock } from './ThinkingBlock.js';
 import { ToolCard } from './ToolCard.js';
 const { createElement: h } = React;
-const termWidth = () => process.stdout.columns || 80;
+const tw = () => process.stdout.columns || 80;
 
 function parseContent(text) {
   if (!text) return [{ type: 'text', content: '' }];
   const parts = [];
-  const codeBlockRegex = /```(\w*)\n?([\s\S]*?)```/g;
-  let lastIdx = 0;
-  let match;
-
-  while ((match = codeBlockRegex.exec(text)) !== null) {
-    if (match.index > lastIdx) {
-      parts.push({ type: 'text', content: text.slice(lastIdx, match.index) });
-    }
-    parts.push({ type: 'code', lang: match[1] || 'text', code: match[2] });
-    lastIdx = match.index + match[0].length;
-  }
-
-  if (lastIdx < text.length) {
-    parts.push({ type: 'text', content: text.slice(lastIdx) });
+  const cb = /```(\w*)\n?([\s\S]*?)```/g;
+  let last = 0, m;
+  while ((m = cb.exec(text)) !== null) {
+    if (m.index > last) parts.push({ type: 'text', content: text.slice(last, m.index) });
+    parts.push({ type: 'code', lang: m[1] || 'text', code: m[2] });
+    last = m.index + m[0].length;
   }
-
-  return parts.length > 0 ? parts : [{ type: 'text', content: text }];
+  if (last < text.length) parts.push({ type: 'text', content: text.slice(last) });
+  return parts.length ? parts : [{ type: 'text', content: text }];
 }
 
-function TextContent({ text }) {
+function TextContent({ text, color }) {
   const lines = text.split('\n');
-  const w = termWidth();
   return h(Box, { flexDirection: 'column' },
     lines.map((line, i) =>
       h(Box, { key: i, flexDirection: 'row' },
-        h(Text, { color: '#7B2FFF', wrap: 'wrap' }, '\u2502'),
+        h(Text, { color: color || '#7B2FFF' }, '\u2502'),
         h(Text, { color: '#E0E0E0', wrap: 'wrap' }, ' ' + (line || ' '))
       )
     )
   );
 }
 
-function UserContent({ text }) {
-  const lines = text.split('\n');
-  const w = termWidth();
-  return h(Box, { flexDirection: 'column', backgroundColor: '#1A0A2E' },
-    lines.map((line, i) =>
-      h(Box, { key: i, flexDirection: 'row', backgroundColor: '#1A0A2E' },
-        h(Text, { color: '#9B59FF', backgroundColor: '#1A0A2E' }, '\u2502'),
-        h(Text, { color: '#C39BD3', backgroundColor: '#1A0A2E', wrap: 'wrap' }, ' ' + (line || ' '))
-      )
-    )
+function ThoughtBlock({ toolResults, duration }) {
+  const [collapsed, setCollapsed] = useState(true);
+  const items = toolResults || [];
+  const timeStr = duration ? (duration < 1000 ? duration + 'ms' : (duration / 1000).toFixed(1) + 's') : '';
+
+  return h(Box, { flexDirection: 'column', marginY: 0 },
+    h(Box, { flexDirection: 'row' },
+      h(Text, { color: '#7B2FFF' }, '\u2502'),
+      h(Text, {
+        color: '#555',
+        bold: false,
+        wrap: 'truncate-end',
+      }, ' ' + (collapsed ? '\u25B6' : '\u25BC') + ' Thought' + (timeStr ? ' (' + timeStr + ')' : '')),
+    ),
+    collapsed
+      ? null
+      : h(Box, { flexDirection: 'column', paddingLeft: 2 },
+          items.map((tr, i) => {
+            const isLast = i === items.length - 1;
+            const prefix = isLast ? '\u2514\u2500' : '\u251C\u2500';
+            const icon = tr.status === 'failed' ? '\u2716' : '\u2714';
+            const col = tr.status === 'failed' ? '#FF4455' : '#00FF88';
+            const td = tr.duration ? ' ' + tr.duration + 'ms' : '';
+            return h(Box, { key: tr.execId || i, flexDirection: 'column' },
+              h(Box, { flexDirection: 'row' },
+                h(Text, { color: '#555' }, '  ' + prefix + ' '),
+                h(Text, { color: col }, icon + ' ' + tr.name + td),
+              ),
+              tr.content && tr.content.length < 200
+                ? h(Box, { paddingLeft: 4 },
+                    h(Text, { color: '#AAA', wrap: 'wrap' }, String(tr.content).slice(0, tw() - 10))
+                  )
+                : null
+            );
+          })
+        )
   );
 }
 
 export function MessageBubble({ msg, isStreaming }) {
-  const w = termWidth();
+  const w = tw();
 
   if (msg.role === 'user') {
+    const lines = String(msg.content).split('\n');
     return h(Box, { flexDirection: 'column', marginBottom: 1, marginTop: 1 },
       h(Box, { flexDirection: 'row' },
         h(Text, { color: '#FF6B6B', bold: true }, '\u276F'),
         h(Text, { color: '#FF6B6B', bold: true }, ' YOU '),
         h(Text, { color: '#9B59FF' }, '\u2500'.repeat(Math.max(0, w - 14))),
       ),
-      h(UserContent, { text: String(msg.content) })
+      h(Box, { flexDirection: 'column', backgroundColor: '#1A0A2E' },
+        lines.map((line, i) =>
+          h(Box, { key: i, flexDirection: 'row', backgroundColor: '#1A0A2E' },
+            h(Text, { color: '#9B59FF', backgroundColor: '#1A0A2E' }, '\u2502'),
+            h(Text, { color: '#C39BD3', backgroundColor: '#1A0A2E', wrap: 'wrap' }, ' ' + (line || ' '))
+          )
+        )
+      )
     );
   }
 
   if (msg.role === 'assistant') {
     const parts = useMemo(() => parseContent(msg.content), [msg.content]);
+    const hasToolResults = msg.toolResults && msg.toolResults.length > 0;
+
     return h(Box, { flexDirection: 'column', marginBottom: 1 },
       h(Box, { flexDirection: 'row' },
         msg.streaming
@@ -81,20 +108,29 @@ export function MessageBubble({ msg, isStreaming }) {
           ? h(Text, { color: '#00D4FF' }, ' \u25CF streaming')
           : null
       ),
-      parts.map((part, i) => {
-        if (part.type === 'code') {
-          return h(CodeBlock, { key: i, code: part.code, language: part.lang, termWidth: w });
-        }
-        return h(TextContent, { key: i, text: part.content });
-      })
+      hasToolResults
+        ? h(ThoughtBlock, { toolResults: msg.toolResults, duration: msg.duration })
+        : null,
+      parts.length > 0 && parts[0].content
+        ? parts.map((part, i) =>
+            part.type === 'code'
+              ? h(CodeBlock, { key: i, code: part.code, language: part.lang, termWidth: w })
+              : h(TextContent, { key: i, text: part.content })
+          )
+        : null,
+      msg.duration && !hasToolResults
+        ? h(Box, { flexDirection: 'row' },
+            h(Text, { color: '#7B2FFF' }, '\u2502'),
+            h(Text, { color: '#555' }, ' + Response: ' + (msg.duration < 1000 ? msg.duration + 'ms' : (msg.duration / 1000).toFixed(1) + 's'))
+          )
+        : null
     );
   }
 
   if (msg.role === 'tool') {
     return h(ToolCard, {
       name: msg.toolName || 'tool',
-      args: msg.args,
-      status: msg.status || (msg.error ? 'failed' : 'completed'),
+      status: msg.error ? 'failed' : 'completed',
       duration: msg.duration,
       result: msg.content,
       error: msg.error,

package/src/components/MessageList.js

@@ -1,107 +1,111 @@
-import React, { useState, useRef, useCallback, useMemo } from 'react';
+import React, { useState, useRef, useMemo } from 'react';
 import { Box, Text, useInput } from 'ink';
 import { MessageBubble } from './MessageBubble.js';
-import { LoadingIndicator } from './LoadingIndicator.js';
+import { ToolCard } from './ToolCard.js';
 const { createElement: h } = React;
 
-export function MessageList({ messages, thinking, streamContent, onJumpToLatest }) {
-  const [scrollOffset, setScrollOffset] = useState(0);
-  const [userScrolled, setUserScrolled] = useState(false);
-  const termHeight = process.stdout.rows ? process.stdout.rows - 6 : 20;
-  const maxVisible = termHeight - 2;
-
-  const totalItems = messages.length + (thinking || streamContent ? 1 : 0);
-  const atBottom = scrollOffset >= Math.max(0, totalItems - maxVisible);
-
-  const visibleEnd = Math.min(totalItems, scrollOffset + maxVisible);
-  const visibleStart = Math.max(0, visibleEnd - maxVisible);
-
-  function scrollTo(offset) {
-    const max = Math.max(0, totalItems - maxVisible);
-    const clamped = Math.max(0, Math.min(max, offset));
-    setScrollOffset(clamped);
-    if (clamped < max) setUserScrolled(true);
-    else setUserScrolled(false);
-  }
-
-  function scrollDown() {
-    const max = Math.max(0, totalItems - maxVisible);
-    if (scrollOffset < max) {
-      setScrollOffset(s => Math.min(max, s + 1));
-      setUserScrolled(true);
-    }
-  }
-
-  function scrollUp() {
-    if (scrollOffset > 0) {
-      setScrollOffset(s => Math.max(0, s - 1));
-      setUserScrolled(true);
-    }
-  }
+function ToolExecutionTree({ executions }) {
+  if (!executions || executions.length === 0) return null;
+  return h(Box, { flexDirection: 'column', marginLeft: 2, marginY: 1 },
+    executions.map((exec, i) => {
+      const isLast = i === executions.length - 1;
+      const prefix = isLast ? '\u2514\u2500' : '\u251C\u2500';
+      const icon = exec.status === 'completed' ? '\u2714' :
+                   exec.status === 'failed' ? '\u2716' : '\u25CF';
+      const color = exec.status === 'completed' ? '#00FF88' :
+                    exec.status === 'failed' ? '#FF4455' : '#00D4FF';
+      const timeStr = exec.duration ? ' ' + exec.duration + 'ms' : '';
+      return h(Box, { key: exec.execId, flexDirection: 'column' },
+        h(Box, { flexDirection: 'row' },
+          h(Text, { color: '#555' }, '  ' + prefix + ' '),
+          h(Text, { color }, ' ' + icon + ' ' + exec.name + timeStr),
+        ),
+        exec.status === 'completed' && exec.result
+          ? h(Box, { paddingLeft: 6 },
+              h(Text, { color: '#AAA', wrap: 'wrap' },
+                String(exec.result).slice(0, termTrunc())
+              )
+            )
+          : null,
+        exec.status === 'running'
+          ? h(Box, { paddingLeft: 6 },
+              h(Text, { color: '#555' }, 'running...')
+            )
+          : null,
+      );
+    })
+  );
+}
 
-  function pageDown() {
-    const max = Math.max(0, totalItems - maxVisible);
-    setScrollOffset(s => {
-      const next = Math.min(max, s + maxVisible);
-      if (next >= max) setUserScrolled(false);
-      else setUserScrolled(true);
-      return next;
-    });
-  }
+const termTrunc = () => Math.min(process.stdout.columns || 80, 120);
 
-  function pageUp() {
-    setScrollOffset(s => {
-      const next = Math.max(0, s - maxVisible);
-      setUserScrolled(true);
-      return next;
-    });
-  }
+function AgentStatusLine({ agentStatus, executions }) {
+  if (!agentStatus && (!executions || executions.length === 0)) return null;
+  return h(Box, { flexDirection: 'column', marginLeft: 2, marginBottom: 1 },
+    agentStatus
+      ? h(Box, { flexDirection: 'row' },
+          h(Text, { color: '#7B2FFF' }, '\u2502'),
+          h(Text, { color: '#00D4FF' }, ' \u25CF ' + agentStatus)
+        )
+      : null,
+    executions && executions.length > 0
+      ? h(ToolExecutionTree, { executions })
+      : null,
+  );
+}
 
-  function goHome() {
-    setScrollOffset(0);
-    setUserScrolled(true);
-  }
+export function MessageList({ messages, thinking, streamContent, agentStatus, toolExecutions }) {
+  const [scrollOffset, setScrollOffset] = useState(0);
+  const [userScrolled, setUserScrolled] = useState(false);
+  const termHeight = process.stdout.rows ? process.stdout.rows - 6 : 20;
+  const maxVisible = Math.max(termHeight - 3, 5);
 
-  function goEnd() {
-    const max = Math.max(0, totalItems - maxVisible);
-    setScrollOffset(max);
-    setUserScrolled(false);
-  }
+  const extraEntries = (thinking || streamContent) ? 1 : 0;
+  const totalItems = messages.length + extraEntries;
+  const maxOffset = Math.max(0, totalItems - maxVisible);
 
   useInput((input, key) => {
-    if (key.upArrow && !key.ctrl) scrollUp();
-    if (key.downArrow && !key.ctrl) scrollDown();
-    if (key.pageUp || (key.downArrow && key.ctrl && !key.shift)) pageUp();
-    if (key.pageDown || (key.upArrow && key.ctrl && !key.shift)) pageDown();
-    if (key.home) goHome();
-    if (key.end) goEnd();
+    if (key.upArrow && !key.ctrl) { setScrollOffset(s => { const n = Math.max(0, s - 1); if (n < maxOffset) setUserScrolled(true); return n; }); }
+    if (key.downArrow && !key.ctrl) { setScrollOffset(s => { const n = Math.min(maxOffset, s + 1); if (n >= maxOffset) setUserScrolled(false); return n; }); }
+    if (key.pageUp) { setScrollOffset(s => { const n = Math.max(0, s - maxVisible); setUserScrolled(true); return n; }); }
+    if (key.pageDown) { setScrollOffset(s => { const n = Math.min(maxOffset, s + maxVisible); if (n >= maxOffset) setUserScrolled(false); else setUserScrolled(true); return n; }); }
+    if (key.home) { setScrollOffset(0); setUserScrolled(true); }
+    if (key.end) { setScrollOffset(maxOffset); setUserScrolled(false); }
   });
 
-  if (atBottom && !userScrolled) {
-    const max = Math.max(0, totalItems - maxVisible);
-    if (scrollOffset !== max) setScrollOffset(max);
+  if (!userScrolled && scrollOffset < maxOffset) {
+    setScrollOffset(maxOffset);
   }
 
-  const visibleMessages = messages.slice(visibleStart, visibleEnd);
+  const visibleEnd = Math.min(totalItems, scrollOffset + maxVisible);
+  const visibleStart = Math.max(0, visibleEnd - maxVisible);
+  const visibleMsgs = messages.slice(visibleStart, visibleEnd);
+  const showStreaming = (thinking || streamContent) && visibleEnd >= totalItems - 1;
 
   return h(Box, { flexDirection: 'column', flexGrow: 1 },
-    h(Box, { flexDirection: 'column', flexGrow: 1, paddingX: 0 },
-      visibleMessages.map((msg) =>
-        h(MessageBubble, {
-          key: msg.id,
-          msg,
-          isStreaming: false,
-        })
+    h(Box, { flexDirection: 'column', flexGrow: 1 },
+      visibleMsgs.map(msg =>
+        h(MessageBubble, { key: msg.id, msg, isStreaming: false })
       ),
-      (thinking || streamContent) && visibleEnd >= totalItems - 1
-        ? streamContent
-          ? h(MessageBubble, { key: 'streaming', msg: { id: 'stream', role: 'assistant', content: streamContent, streaming: true }, isStreaming: true })
-          : h(LoadingIndicator, { key: 'thinking', label: 'Thinking' })
+      showStreaming
+        ? h(Box, { flexDirection: 'column' },
+            h(AgentStatusLine, { agentStatus, executions: toolExecutions }),
+            streamContent
+              ? h(MessageBubble, {
+                  key: 'streaming',
+                  msg: { id: 'stream', role: 'assistant', content: streamContent, streaming: true },
+                  isStreaming: true
+                })
+              : h(Box, { marginLeft: 2, flexDirection: 'row' },
+                  h(Text, { color: '#7B2FFF' }, '\u2502'),
+                  h(Text, { color: '#00D4FF' }, ' \u25CF thinking...')
+                )
+          )
         : null
     ),
     userScrolled
       ? h(Box, { flexDirection: 'row', justifyContent: 'center' },
-          h(Text, { color: '#00D4FF', bold: true, backgroundColor: '#1A1A2E' },
+          h(Text, { color: '#00D4FF', bold: true, backgroundColor: '#1A1A2E', wrap: 'truncate-end' },
             ' \u25B2 Jump to latest (End) '
           )
         )

package/src/providers/streaming.js

@@ -1,6 +1,15 @@
+function readWithTimeout(reader, timeoutMs) {
+  return Promise.race([
+    reader.read(),
+    new Promise((_, reject) =>
+      setTimeout(() => reject(new Error('timeout')), timeoutMs)
+    ),
+  ]);
+}
+
 export async function* streamResponse(endpoint, body, apiKey, extraHeaders = {}) {
   const controller = new AbortController();
-  const timeoutId = setTimeout(() => controller.abort(), 30000);
+  const fetchTimeoutId = setTimeout(() => controller.abort(), 15000);
 
   try {
     const res = await fetch(endpoint, {
@@ -14,7 +23,7 @@ export async function* streamResponse(endpoint, body, apiKey, extraHeaders = {})
       signal: controller.signal,
     });
 
-    clearTimeout(timeoutId);
+    clearTimeout(fetchTimeoutId);
 
     if (!res.ok) {
       const text = await res.text();
@@ -26,13 +35,34 @@ export async function* streamResponse(endpoint, body, apiKey, extraHeaders = {})
     const decoder = new TextDecoder();
     let buffer = '';
     const toolCallsMap = new Map();
+    let hasContent = false;
+    let idleTimeout = 15000;
 
     while (true) {
-      const { done, value } = await reader.read();
+      let result;
+      try {
+        result = await readWithTimeout(reader, idleTimeout);
+      } catch (err) {
+        if (err.message === 'timeout') {
+          if (hasContent) {
+            yield { type: 'timeout', message: 'Stream idle for ' + idleTimeout + 'ms' };
+          }
+          const toolCalls = Array.from(toolCallsMap.values());
+          if (toolCalls.length > 0) {
+            yield { type: 'tool_calls', calls: toolCalls };
+          }
+          return;
+        }
+        throw err;
+      }
+
+      const { done, value } = result;
       if (done) break;
+
       buffer += decoder.decode(value, { stream: true });
       const lines = buffer.split('\n');
       buffer = lines.pop() || '';
+
       for (const line of lines) {
         if (line.startsWith('data: ')) {
           const data = line.slice(6).trim();
@@ -51,6 +81,8 @@ export async function* streamResponse(endpoint, body, apiKey, extraHeaders = {})
             const delta = choice.delta;
 
             if (delta?.content) {
+              hasContent = true;
+              idleTimeout = 15000;
               yield { type: 'token', content: delta.content };
             }
 
@@ -88,6 +120,7 @@ export async function* streamResponse(endpoint, body, apiKey, extraHeaders = {})
       yield { type: 'tool_calls', calls: toolCalls };
     }
   } finally {
-    clearTimeout(timeoutId);
+    clearTimeout(fetchTimeoutId);
+    try { controller.abort(); } catch {}
   }
 }