tycono 0.1.96-beta.24 → 0.1.96-beta.26

package/package.json

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

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();
@@ -116,14 +119,6 @@ export const PanelMode: React.FC<PanelModeProps> = ({
     ? waves.findIndex(w => w.waveId === focusedWaveId) + 1
     : 0;
 
-  // Count sessions per wave for summary
-  const waveSessionCounts = new Map<string, number>();
-  for (const s of activeSessions) {
-    if (s.waveId) {
-      waveSessionCounts.set(s.waveId, (waveSessionCounts.get(s.waveId) ?? 0) + 1);
-    }
-  }
-
   return (
     <Box flexDirection="column" flexGrow={1}>
       {/* Main content: Org Tree left | Detail + Stream right */}
@@ -136,42 +131,11 @@ export const PanelMode: React.FC<PanelModeProps> = ({
             selectedIndex={selectedRoleIndex}
             flatRoles={flatRoles}
           />
-
-          {/* Resource Summary — below org tree */}
-          <Box flexDirection="column" paddingX={1} marginTop={1}>
-            <Text color="gray">{'\u2500'.repeat(24)}</Text>
-
-            {/* Waves */}
-            {waves.length > 0 && (
-              <Box flexDirection="column">
-                {waves.map((w, i) => {
-                  const isFocused = w.waveId === focusedWaveId;
-                  const count = waveSessionCounts.get(w.waveId) ?? 0;
-                  return (
-                    <Box key={w.waveId}>
-                      <Text color={isFocused ? 'green' : 'gray'}>
-                        {isFocused ? '\u25B8' : ' '} W{i + 1}
-                      </Text>
-                      <Text color="gray"> {count > 0 ? `${count} agents` : 'idle'}</Text>
-                    </Box>
-                  );
-                })}
-              </Box>
-            )}
-
-            {/* Port summary */}
-            {portSummary.totalPorts > 0 && (
-              <Box marginTop={0}>
-                <Text color="blue">{portSummary.totalPorts} ports</Text>
-                <Text color="gray"> allocated</Text>
-              </Box>
-            )}
-          </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,10 +1,8 @@
 /**
  * useSSE — subscribe to wave SSE stream with auto-reconnect
  *
- * Events are stored with trimmed data to prevent OOM:
- * - text/thinking: keep only displayable portion
- * - msg:start task: truncate long supervisor prompts
- * - tool inputs: summarize
+ * 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';
@@ -13,12 +11,12 @@ import { subscribeToWaveStream, type SSEEvent, type SSEConnection } from '../api
 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 };
 
-  // Truncate large text fields
   if (typeof data.text === 'string' && data.text.length > 500) {
     data.text = data.text.slice(0, 500);
   }
@@ -31,16 +29,11 @@ function trimEvent(event: SSEEvent): SSEEvent {
   if (typeof data.message === 'string' && data.message.length > 300) {
     data.message = data.message.slice(0, 300);
   }
-  // Summarize tool inputs
   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)) {
-      if (typeof v === 'string' && v.length > 200) {
-        summary[k] = v.slice(0, 200);
-      } else {
-        summary[k] = v;
-      }
+      summary[k] = typeof v === 'string' && v.length > 200 ? v.slice(0, 200) : v;
     }
     data.input = summary;
   }
@@ -63,7 +56,24 @@ 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;
   }, []);
@@ -74,10 +84,15 @@ export function useSSE(waveId: string | null): SSEState {
       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) {
@@ -90,6 +105,7 @@ export function useSSE(waveId: string | null): SSEState {
 
       if (fromSeq === 0) {
         setEvents([]);
+        batchRef.current = [];
         maxSeqRef.current = 0;
       }
 
@@ -101,13 +117,18 @@ export function useSSE(waveId: string | null): SSEState {
           }
           reconnectAttemptRef.current = 0;
 
-          const trimmed = trimEvent(event);
-          setEvents((prev) => {
-            const next = [...prev, trimmed];
-            return next.length > MAX_EVENTS ? next.slice(-MAX_EVENTS) : next;
-          });
+          // Add to batch buffer (don't trigger React re-render yet)
+          batchRef.current.push(trimEvent(event));
+
+          // 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 {
@@ -140,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 };
 }