tycono 0.1.96-beta.2 → 0.1.96-beta.21

package/src/tui/hooks/useSSE.ts

@@ -1,11 +1,13 @@
 /**
- * useSSE — subscribe to wave SSE stream
+ * useSSE — subscribe to wave SSE stream with auto-reconnect
  */
 
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { subscribeToWaveStream, type SSEEvent, type SSEConnection } from '../api';
 
 const MAX_EVENTS = 500;
+const RECONNECT_DELAY_MS = 3000;
+const MAX_RECONNECT_DELAY_MS = 15000;
 
 export interface SSEState {
   events: SSEEvent[];
@@ -18,9 +20,13 @@ export function useSSE(waveId: string | null): SSEState {
   const [streamStatus, setStreamStatus] = useState<'idle' | 'streaming' | 'done' | 'error'>('idle');
   const connRef = useRef<SSEConnection | null>(null);
   const waveIdRef = useRef<string | null>(null);
+  const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const reconnectAttemptRef = useRef(0);
+  const maxSeqRef = useRef(0);
 
   const clearEvents = useCallback(() => {
     setEvents([]);
+    maxSeqRef.current = 0;
   }, []);
 
   useEffect(() => {
@@ -29,6 +35,11 @@ export function useSSE(waveId: string | null): SSEState {
       connRef.current?.close();
       connRef.current = null;
       waveIdRef.current = waveId;
+      reconnectAttemptRef.current = 0;
+      if (reconnectTimerRef.current) {
+        clearTimeout(reconnectTimerRef.current);
+        reconnectTimerRef.current = null;
+      }
     }
 
     if (!waveId) {
@@ -36,32 +47,65 @@ export function useSSE(waveId: string | null): SSEState {
       return;
     }
 
-    setStreamStatus('streaming');
-    setEvents([]);
+    const connect = (fromSeq: number) => {
+      setStreamStatus('streaming');
+
+      // Only clear events on first connect (not reconnects)
+      if (fromSeq === 0) {
+        setEvents([]);
+        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
+
+          setEvents((prev) => {
+            const next = [...prev, event];
+            return next.length > MAX_EVENTS ? next.slice(-MAX_EVENTS) : next;
+          });
+        },
+        (reason) => {
+          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
 
-    const conn = subscribeToWaveStream(
-      waveId,
-      (event) => {
-        setEvents((prev) => {
-          const next = [...prev, event];
-          return next.length > MAX_EVENTS ? next.slice(-MAX_EVENTS) : next;
-        });
-      },
-      (reason) => {
-        if (reason === 'done') {
-          setStreamStatus('done');
-        } else if (reason === 'error') {
-          setStreamStatus('error');
-        } else {
-          setStreamStatus('done');
-        }
-      },
-    );
-
-    connRef.current = conn;
+            reconnectTimerRef.current = setTimeout(() => {
+              reconnectTimerRef.current = null;
+              if (waveIdRef.current === waveId) {
+                connect(maxSeqRef.current);
+              }
+            }, delay);
+          }
+        },
+        fromSeq,
+      );
+
+      connRef.current = conn;
+    };
+
+    connect(0);
 
     return () => {
-      conn.close();
+      connRef.current?.close();
+      connRef.current = null;
+      if (reconnectTimerRef.current) {
+        clearTimeout(reconnectTimerRef.current);
+        reconnectTimerRef.current = null;
+      }
     };
   }, [waveId]);
 

package/src/tui/store.ts

@@ -97,3 +97,15 @@ export function buildOrgTree(roles: RoleInfo[], statuses: Record<string, string>
 
   return roots;
 }
+
+/** Flatten org tree into visual top-to-bottom order of role IDs */
+export function flattenOrgRoleIds(nodes: OrgNode[]): string[] {
+  const result: string[] = [];
+  for (const node of nodes) {
+    result.push(node.role.id);
+    if (node.children.length > 0) {
+      result.push(...flattenOrgRoleIds(node.children));
+    }
+  }
+  return result;
+}

package/src/tui/components/CommandInput.tsx

@@ -1,32 +0,0 @@
-/**
- * CommandInput — bottom bar with command input and shortcut hints
- */
-
-import React from 'react';
-import { Box, Text } from 'ink';
-
-interface CommandInputProps {
-  focused: boolean;
-  waveStatus: 'idle' | 'running' | 'done';
-  dialog: string;
-}
-
-export const CommandInput: React.FC<CommandInputProps> = ({ focused, waveStatus, dialog }) => {
-  if (dialog !== 'none') return null;
-
-  return (
-    <Box width="100%" paddingX={1} justifyContent="space-between">
-      <Box>
-        <Text color="green" bold>&gt; </Text>
-        <Text color={focused ? 'white' : 'gray'}>
-          {waveStatus === 'running' ? 'Wave running...' : 'Ready'}
-        </Text>
-      </Box>
-      <Box>
-        <Text color="gray" dimColor>
-          [w]ave  [?]help  [q]uit  [Tab]panel
-        </Text>
-      </Box>
-    </Box>
-  );
-};

package/src/tui/components/HelpOverlay.tsx

@@ -1,51 +0,0 @@
-/**
- * HelpOverlay — keyboard shortcut reference
- */
-
-import React from 'react';
-import { Box, Text, useInput } from 'ink';
-
-interface HelpOverlayProps {
-  onClose(): void;
-}
-
-const shortcuts = [
-  ['w', 'Wave dispatch'],
-  ['q', 'Quit'],
-  ['?', 'Toggle help'],
-  ['Tab', 'Cycle panels'],
-  ['j/k', 'Navigate (in focused panel)'],
-  ['Enter', 'Select'],
-  ['Esc', 'Close dialog / deselect'],
-] as const;
-
-export const HelpOverlay: React.FC<HelpOverlayProps> = ({ onClose }) => {
-  useInput((input, key) => {
-    if (input === '?' || input === 'q' || key.escape) {
-      onClose();
-    }
-  });
-
-  return (
-    <Box
-      flexDirection="column"
-      borderStyle="round"
-      borderColor="yellow"
-      paddingX={2}
-      paddingY={1}
-    >
-      <Text bold color="yellow">{'\u2500\u2500'} Keyboard Shortcuts {'\u2500\u2500'}</Text>
-      <Box marginTop={1} flexDirection="column">
-        {shortcuts.map(([key, desc]) => (
-          <Box key={key}>
-            <Text color="cyan" bold>{key.padEnd(8)}</Text>
-            <Text color="white">{desc}</Text>
-          </Box>
-        ))}
-      </Box>
-      <Box marginTop={1}>
-        <Text color="gray" dimColor>Press ? or Esc to close</Text>
-      </Box>
-    </Box>
-  );
-};

package/src/tui/components/SessionList.tsx

@@ -1,74 +0,0 @@
-/**
- * SessionList — left bottom panel showing session history
- */
-
-import React from 'react';
-import { Box, Text } from 'ink';
-import type { SessionInfo } from '../api';
-
-interface SessionListProps {
-  sessions: SessionInfo[];
-  focused: boolean;
-  selectedIndex: number;
-}
-
-function sourceIcon(source: string): string {
-  switch (source) {
-    case 'wave': return 'W';
-    case 'dispatch': return 'D';
-    case 'chat': return 'C';
-    case 'consult': return 'Q';
-    default: return '?';
-  }
-}
-
-function statusSymbol(status: string): { icon: string; color: string } {
-  switch (status) {
-    case 'active':
-      return { icon: '\u25CF', color: 'green' };
-    case 'closed':
-      return { icon: '\u2713', color: 'gray' };
-    default:
-      return { icon: '\u25CB', color: 'gray' };
-  }
-}
-
-export const SessionList: React.FC<SessionListProps> = ({ sessions, focused, selectedIndex }) => {
-  // Show most recent first, limit to 10
-  const sorted = [...sessions]
-    .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
-    .slice(0, 10);
-
-  return (
-    <Box flexDirection="column" paddingX={1}>
-      <Text bold color={focused ? 'cyan' : 'gray'}>
-        {'\u2500\u2500'} Sessions ({sessions.length}) {'\u2500\u2500'}
-      </Text>
-      {sorted.length === 0 && (
-        <Text color="gray" dimColor>No sessions yet</Text>
-      )}
-      {sorted.map((session, i) => {
-        const isSelected = focused && i === selectedIndex;
-        const { icon, color } = statusSymbol(session.status);
-        const title = session.title || session.roleId;
-        const src = sourceIcon(session.source);
-
-        return (
-          <Box key={session.id}>
-            <Text color={color}>{icon}</Text>
-            <Text> </Text>
-            <Text color="gray">[{src}]</Text>
-            <Text> </Text>
-            <Text
-              color={isSelected ? 'cyan' : 'white'}
-              bold={isSelected}
-              inverse={isSelected}
-            >
-              {title.length > 25 ? title.slice(0, 24) + '\u2026' : title}
-            </Text>
-          </Box>
-        );
-      })}
-    </Box>
-  );
-};

package/src/tui/components/WaveDialog.tsx

@@ -1,56 +0,0 @@
-/**
- * WaveDialog — modal for wave dispatch input
- */
-
-import React, { useState } from 'react';
-import { Box, Text, useInput } from 'ink';
-import TextInput from 'ink-text-input';
-
-interface WaveDialogProps {
-  onSubmit(directive: string): void;
-  onCancel(): void;
-}
-
-export const WaveDialog: React.FC<WaveDialogProps> = ({ onSubmit, onCancel }) => {
-  const [directive, setDirective] = useState('');
-
-  useInput((_input, key) => {
-    if (key.escape) {
-      onCancel();
-    }
-  });
-
-  const handleSubmit = (value: string) => {
-    const trimmed = value.trim();
-    if (trimmed) {
-      onSubmit(trimmed);
-    }
-  };
-
-  return (
-    <Box
-      flexDirection="column"
-      borderStyle="round"
-      borderColor="cyan"
-      paddingX={2}
-      paddingY={1}
-    >
-      <Text bold color="cyan">{'\u2500\u2500'} Wave Dispatch {'\u2500\u2500'}</Text>
-      <Box marginTop={1}>
-        <Text color="white">Directive: </Text>
-      </Box>
-      <Box marginTop={0}>
-        <Text color="green">&gt; </Text>
-        <TextInput
-          value={directive}
-          onChange={setDirective}
-          onSubmit={handleSubmit}
-          placeholder="Type your wave directive..."
-        />
-      </Box>
-      <Box marginTop={1}>
-        <Text color="gray" dimColor>[Enter: Dispatch]  [Esc: Cancel]</Text>
-      </Box>
-    </Box>
-  );
-};

package/src/tui/hooks/useKeyboard.ts

@@ -1,62 +0,0 @@
-/**
- * useKeyboard — global keyboard shortcuts for TUI
- */
-
-import { useInput } from 'ink';
-
-export interface KeyboardActions {
-  onWave(): void;
-  onQuit(): void;
-  onHelp(): void;
-  onTab(): void;
-  onUp(): void;
-  onDown(): void;
-  onEnter(): void;
-  onEscape(): void;
-}
-
-export function useKeyboard(actions: KeyboardActions, enabled: boolean): void {
-  useInput((input, key) => {
-    if (!enabled) return;
-
-    if (input === 'w') {
-      actions.onWave();
-      return;
-    }
-
-    if (input === 'q') {
-      actions.onQuit();
-      return;
-    }
-
-    if (input === '?') {
-      actions.onHelp();
-      return;
-    }
-
-    if (key.tab) {
-      actions.onTab();
-      return;
-    }
-
-    if (key.upArrow || input === 'k') {
-      actions.onUp();
-      return;
-    }
-
-    if (key.downArrow || input === 'j') {
-      actions.onDown();
-      return;
-    }
-
-    if (key.return) {
-      actions.onEnter();
-      return;
-    }
-
-    if (key.escape) {
-      actions.onEscape();
-      return;
-    }
-  });
-}