tycono 0.1.96-beta.23 → 0.1.96-beta.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tycono",
-  "version": "0.1.96-beta.23",
+  "version": "0.1.96-beta.25",
   "description": "Build an AI company. Watch them work.",
   "type": "module",
   "bin": {

package/src/tui/app.tsx

@@ -194,14 +194,14 @@ export const App: React.FC = () => {
   const addSystemMessage = useCallback((text: string, color: string = 'yellow') => {
     setSystemMessages(prev => {
       const next = [...prev, { id: ++sysLineId, text, color }];
-      return next.length > 50 ? next.slice(-50) : next;
+      return next.length > 30 ? next.slice(-30) : next;
     });
   }, []);
 
   const addSystemLines = useCallback((lines: StreamLine[]) => {
     setSystemMessages(prev => {
       const next = [...prev, ...lines];
-      return next.length > 80 ? next.slice(-80) : next;
+      return next.length > 40 ? next.slice(-40) : next;
     });
   }, []);
 

package/src/tui/components/CommandMode.tsx

@@ -261,8 +261,8 @@ export const CommandMode: React.FC<CommandModeProps> = ({
     if (line) eventLines.push(line);
   }
 
-  // Merge system messages and event lines
-  const allLines = [...systemMessages, ...eventLines];
+  // Merge system messages and event lines (cap total to prevent memory bloat)
+  const allLines = [...systemMessages, ...eventLines].slice(-200);
 
   // Split into committed (scrollback) and live (re-rendered)
   const newCommitted = allLines.slice(committedRef.current);
@@ -271,7 +271,9 @@ export const CommandMode: React.FC<CommandModeProps> = ({
     committedRef.current += toCommit.length;
   }
 
-  const committedLines = allLines.slice(0, committedRef.current);
+  // Cap committed to prevent Static from holding too many items
+  const rawCommitted = allLines.slice(0, committedRef.current);
+  const committedLines = rawCommitted.length > 100 ? rawCommitted.slice(-100) : rawCommitted;
   const liveLines = allLines.slice(committedRef.current);
 
   const handleSubmit = useCallback((value: string) => {

package/src/tui/components/OrgTree.tsx

@@ -67,7 +67,7 @@ function flattenTree(nodes: OrgNode[], prefix: string = '', isLast: boolean[] =
   return result;
 }
 
-export const OrgTree: React.FC<OrgTreeProps> = ({ tree, focused, selectedIndex, flatRoles }) => {
+export const OrgTree: React.FC<OrgTreeProps> = React.memo(({ tree, focused, selectedIndex, flatRoles }) => {
   const entries = flattenTree(tree);
 
   return (
@@ -103,4 +103,4 @@ export const OrgTree: React.FC<OrgTreeProps> = ({ tree, focused, selectedIndex,
       })}
     </Box>
   );
-};
+});

package/src/tui/components/PanelMode.tsx

@@ -12,7 +12,7 @@
  *   Esc               — return to Command Mode
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { Box, Text, useInput } from 'ink';
 import { OrgTree } from './OrgTree';
 import { StreamView } from './StreamView';
@@ -77,6 +77,9 @@ export const PanelMode: React.FC<PanelModeProps> = ({
     return () => { process.stdout.off('resize', onResize); };
   }, []);
 
+  // Memoize expensive strings
+  const separatorStr = useMemo(() => '\u2502\n'.repeat(Math.max(5, termHeight - 6)), [termHeight]);
+
   useInput((input, key) => {
     if (key.escape) {
       onEscape();
@@ -169,9 +172,9 @@ export const PanelMode: React.FC<PanelModeProps> = ({
           </Box>
         </Box>
 
-        {/* Vertical separator — fill available height */}
+        {/* Vertical separator — memoized to avoid regenerating on every render */}
         <Box flexDirection="column" marginX={0}>
-          <Text color="gray">{'\u2502\n'.repeat(Math.max(5, termHeight - 6))}</Text>
+          <Text color="gray">{separatorStr}</Text>
         </Box>
 
         {/* Right: Agent Detail + Stream */}

package/src/tui/hooks/useApi.ts

@@ -15,7 +15,7 @@ import {
   type ActiveSessionInfo,
 } from '../api';
 
-const POLL_INTERVAL = 3000; // 3 seconds
+const POLL_INTERVAL = 5000; // 5 seconds (reduce re-renders)
 
 export interface ActiveWaveInfo {
   waveId: string;

package/src/tui/hooks/useSSE.ts

@@ -1,13 +1,45 @@
 /**
  * useSSE — subscribe to wave SSE stream with auto-reconnect
+ *
+ * Performance: batches events and updates React state max once per 300ms
+ * to prevent fullscreen Panel Mode from re-rendering on every text chunk.
  */
 
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { subscribeToWaveStream, type SSEEvent, type SSEConnection } from '../api';
 
-const MAX_EVENTS = 500;
+const MAX_EVENTS = 150;
 const RECONNECT_DELAY_MS = 3000;
 const MAX_RECONNECT_DELAY_MS = 15000;
+const BATCH_INTERVAL_MS = 300; // Throttle: update React state max ~3x/sec
+
+/** Trim event data to prevent memory bloat */
+function trimEvent(event: SSEEvent): SSEEvent {
+  const data = { ...event.data };
+
+  if (typeof data.text === 'string' && data.text.length > 500) {
+    data.text = data.text.slice(0, 500);
+  }
+  if (typeof data.task === 'string' && data.task.length > 200) {
+    data.task = data.task.slice(0, 200);
+  }
+  if (typeof data.error === 'string' && data.error.length > 300) {
+    data.error = data.error.slice(0, 300);
+  }
+  if (typeof data.message === 'string' && data.message.length > 300) {
+    data.message = data.message.slice(0, 300);
+  }
+  if (data.input && typeof data.input === 'object') {
+    const inp = data.input as Record<string, unknown>;
+    const summary: Record<string, unknown> = {};
+    for (const [k, v] of Object.entries(inp)) {
+      summary[k] = typeof v === 'string' && v.length > 200 ? v.slice(0, 200) : v;
+    }
+    data.input = summary;
+  }
+
+  return { ...event, data };
+}
 
 export interface SSEState {
   events: SSEEvent[];
@@ -24,22 +56,43 @@ export function useSSE(waveId: string | null): SSEState {
   const reconnectAttemptRef = useRef(0);
   const maxSeqRef = useRef(0);
 
+  // Batch buffer — accumulate events, flush to React state periodically
+  const batchRef = useRef<SSEEvent[]>([]);
+  const batchTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const flushBatch = useCallback(() => {
+    batchTimerRef.current = null;
+    const batch = batchRef.current;
+    if (batch.length === 0) return;
+    batchRef.current = [];
+
+    setEvents((prev) => {
+      const next = [...prev, ...batch];
+      return next.length > MAX_EVENTS ? next.slice(-MAX_EVENTS) : next;
+    });
+  }, []);
+
   const clearEvents = useCallback(() => {
+    batchRef.current = [];
     setEvents([]);
     maxSeqRef.current = 0;
   }, []);
 
   useEffect(() => {
-    // Disconnect if waveId changed
     if (waveIdRef.current !== waveId) {
       connRef.current?.close();
       connRef.current = null;
       waveIdRef.current = waveId;
       reconnectAttemptRef.current = 0;
+      batchRef.current = [];
       if (reconnectTimerRef.current) {
         clearTimeout(reconnectTimerRef.current);
         reconnectTimerRef.current = null;
       }
+      if (batchTimerRef.current) {
+        clearTimeout(batchTimerRef.current);
+        batchTimerRef.current = null;
+      }
     }
 
     if (!waveId) {
@@ -50,39 +103,41 @@ export function useSSE(waveId: string | null): SSEState {
     const connect = (fromSeq: number) => {
       setStreamStatus('streaming');
 
-      // Only clear events on first connect (not reconnects)
       if (fromSeq === 0) {
         setEvents([]);
+        batchRef.current = [];
         maxSeqRef.current = 0;
       }
 
       const conn = subscribeToWaveStream(
         waveId,
         (event) => {
-          // Track max seq for reconnect resume
           if (event.seq !== undefined && event.seq > maxSeqRef.current) {
             maxSeqRef.current = event.seq;
           }
-          reconnectAttemptRef.current = 0; // Reset on successful event
+          reconnectAttemptRef.current = 0;
+
+          // Add to batch buffer (don't trigger React re-render yet)
+          batchRef.current.push(trimEvent(event));
 
-          setEvents((prev) => {
-            const next = [...prev, event];
-            return next.length > MAX_EVENTS ? next.slice(-MAX_EVENTS) : next;
-          });
+          // Schedule flush if not already scheduled
+          if (!batchTimerRef.current) {
+            batchTimerRef.current = setTimeout(flushBatch, BATCH_INTERVAL_MS);
+          }
         },
         (reason) => {
+          // Flush remaining events before status change
+          flushBatch();
+
           if (reason === 'done') {
             setStreamStatus('done');
           } else {
-            // Disconnected or error → auto-reconnect
             const attempt = reconnectAttemptRef.current++;
             const delay = Math.min(
               RECONNECT_DELAY_MS * Math.pow(1.5, attempt),
               MAX_RECONNECT_DELAY_MS,
             );
-
-            setStreamStatus('streaming'); // Keep showing streaming during reconnect
-
+            setStreamStatus('streaming');
             reconnectTimerRef.current = setTimeout(() => {
               reconnectTimerRef.current = null;
               if (waveIdRef.current === waveId) {
@@ -106,8 +161,12 @@ export function useSSE(waveId: string | null): SSEState {
         clearTimeout(reconnectTimerRef.current);
         reconnectTimerRef.current = null;
       }
+      if (batchTimerRef.current) {
+        clearTimeout(batchTimerRef.current);
+        batchTimerRef.current = null;
+      }
     };
-  }, [waveId]);
+  }, [waveId, flushBatch]);
 
   return { events, streamStatus, clearEvents };
 }