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

package/src/tui/components/StatusBar.tsx

@@ -1,5 +1,6 @@
 /**
- * StatusBar — top bar showing company name, wave status, active count, cost
+ * StatusBar — bottom bar (Claude Code style)
+ * Shows: company name, wave index [focused/total], active roles, ports, cost
  */
 
 import React from 'react';
@@ -7,43 +8,61 @@ import { Box, Text } from 'ink';
 
 interface StatusBarProps {
   companyName: string;
-  waveId: string | null;
+  waveIndex: number;      // 1-based focused wave index (0 = none)
+  waveCount: number;      // total waves
   waveStatus: 'idle' | 'running' | 'done';
   activeCount: number;
+  portCount: number;       // total allocated ports
   totalCost: number;
 }
 
 export const StatusBar: React.FC<StatusBarProps> = ({
   companyName,
-  waveId,
+  waveIndex,
+  waveCount,
   waveStatus,
   activeCount,
+  portCount,
   totalCost,
 }) => {
-  const waveLabel = waveId
-    ? `Wave ${waveId.replace('wave-', '#')} ${waveStatus === 'running' ? '\u25CF' : waveStatus === 'done' ? '\u2713' : ''} ${waveStatus}`
-    : 'No active wave';
+  const statusDot = waveStatus === 'running' ? ' \u25CF'
+    : waveStatus === 'done' ? ' \u2713'
+    : '';
+
+  const waveLabel = waveIndex > 0
+    ? `Wave ${waveIndex}${statusDot}`
+    : '';
+
+  // Show [1/3] only when 2+ waves
+  const countLabel = waveCount >= 2 ? ` [${waveIndex}/${waveCount}]` : '';
 
   return (
-    <Box
-      width="100%"
-      paddingX={1}
-      justifyContent="space-between"
-    >
-      <Box>
-        <Text bold color="cyan">TYCONO</Text>
-        <Text color="white"> </Text>
-        <Text color="white">{companyName}</Text>
-      </Box>
-      <Box>
-        <Text color={waveStatus === 'running' ? 'green' : 'gray'}>
-          {waveLabel}
-        </Text>
-        <Text color="white">  </Text>
-        <Text color="yellow">{activeCount} active</Text>
-        <Text color="white">  </Text>
-        <Text color="green">${totalCost.toFixed(2)}</Text>
-      </Box>
+    <Box width="100%" paddingX={1}>
+      <Text color="cyan" bold>Tycono</Text>
+      <Text color="gray"> | </Text>
+      <Text color="white">{companyName}</Text>
+      {waveLabel && (
+        <>
+          <Text color="gray"> | </Text>
+          <Text color={waveStatus === 'running' ? 'green' : 'gray'}>
+            {waveLabel}{countLabel}
+          </Text>
+        </>
+      )}
+      {activeCount > 0 && (
+        <>
+          <Text color="gray"> | </Text>
+          <Text color="yellow">{activeCount} active</Text>
+        </>
+      )}
+      {portCount > 0 && (
+        <>
+          <Text color="gray"> | </Text>
+          <Text color="blue">{portCount} ports</Text>
+        </>
+      )}
+      <Text color="gray"> | </Text>
+      <Text color="green">${totalCost.toFixed(2)}</Text>
     </Box>
   );
 };

package/src/tui/components/{StreamPanel.tsx → StreamView.tsx}

@@ -1,5 +1,7 @@
 /**
- * StreamPanel — right panel showing real-time SSE event stream
+ * StreamView — detailed stream panel for Panel Mode (right side)
+ * Shows full event details with timestamps for a selected role.
+ * Reuses the rendering logic from StreamPanel v1 but with the v2 layout.
  */
 
 import React from 'react';
@@ -7,12 +9,12 @@ import { Box, Text } from 'ink';
 import type { SSEEvent } from '../api';
 import { getRoleColor } from '../theme';
 
-interface StreamPanelProps {
+interface StreamViewProps {
   events: SSEEvent[];
   allRoleIds: string[];
-  focused: boolean;
   streamStatus: 'idle' | 'streaming' | 'done' | 'error';
   waveId: string | null;
+  roleLabel: string;
 }
 
 function formatTime(ts: string): string {
@@ -24,126 +26,98 @@ function formatTime(ts: string): string {
   }
 }
 
-function renderEvent(event: SSEEvent, allRoleIds: string[]): { rolePart: string; roleColor: string; content: string; contentColor: string } {
-  const roleColor = getRoleColor(event.roleId, allRoleIds);
-  const rolePart = event.roleId;
-
+function renderEvent(event: SSEEvent, allRoleIds: string[]): { content: string; contentColor: string } | null {
   switch (event.type) {
     case 'msg:start':
       return {
-        rolePart,
-        roleColor,
         content: `\u25B6 Started: ${(event.data.task as string)?.slice(0, 60) ?? ''}`,
         contentColor: 'green',
       };
 
-    case 'msg:done':
+    case 'msg:done': {
+      const turns = event.data.turns as number | undefined;
       return {
-        rolePart,
-        roleColor,
-        content: '\u2713 Done',
-        contentColor: 'gray',
+        content: `\u2713 Done${turns ? ` (${turns} turns)` : ''}`,
+        contentColor: 'green',
       };
+    }
 
     case 'msg:error':
       return {
-        rolePart,
-        roleColor,
         content: `\u2717 Error: ${(event.data.error as string)?.slice(0, 60) ?? ''}`,
         contentColor: 'red',
       };
 
-    case 'text':
-      return {
-        rolePart,
-        roleColor,
-        content: ((event.data.text as string) ?? '').slice(0, 120),
-        contentColor: 'white',
-      };
-
-    case 'thinking':
-      return {
-        rolePart,
-        roleColor,
-        content: `(thinking) ${((event.data.text as string) ?? '').slice(0, 80)}`,
-        contentColor: 'gray',
-      };
-
-    case 'tool:start':
+    case 'text': {
+      const text = ((event.data.text as string) ?? '').slice(0, 120);
+      if (!text.trim()) return null;
+      return { content: text, contentColor: 'white' };
+    }
+
+    case 'tool:start': {
+      const name = (event.data.name as string) ?? 'tool';
+      const input = event.data.input;
+      let detail = '';
+      if (input && typeof input === 'object') {
+        const inp = input as Record<string, unknown>;
+        if (inp.file_path) detail = ` ${String(inp.file_path)}`;
+        else if (inp.command) detail = ` ${String(inp.command).slice(0, 60)}`;
+        else detail = ` ${JSON.stringify(input).slice(0, 60)}`;
+      }
       return {
-        rolePart,
-        roleColor,
-        content: `\u2192 ${event.data.name as string ?? 'tool'}${event.data.input ? ` ${JSON.stringify(event.data.input).slice(0, 60)}` : ''}`,
+        content: `\u2192 ${name}${detail}`,
         contentColor: 'gray',
       };
+    }
 
     case 'tool:result':
       return {
-        rolePart,
-        roleColor,
         content: `\u2190 ${(event.data.name as string) ?? 'tool'} done`,
         contentColor: 'gray',
       };
 
     case 'dispatch:start':
       return {
-        rolePart,
-        roleColor,
         content: `\u21D2 dispatch ${event.data.targetRole as string ?? ''}: ${(event.data.task as string)?.slice(0, 50) ?? ''}`,
         contentColor: 'yellow',
       };
 
     case 'dispatch:done':
       return {
-        rolePart,
-        roleColor,
         content: `\u21D0 ${event.data.targetRole as string ?? ''} completed`,
         contentColor: 'yellow',
       };
 
     case 'msg:awaiting_input':
       return {
-        rolePart,
-        roleColor,
         content: '? Awaiting input...',
         contentColor: 'yellow',
       };
 
+    // Hidden events
+    case 'thinking':
     case 'heartbeat:tick':
     case 'heartbeat:skip':
-      return {
-        rolePart,
-        roleColor,
-        content: `\u2665 ${event.type === 'heartbeat:tick' ? 'tick' : 'skip'}`,
-        contentColor: 'gray',
-      };
+    case 'prompt:assembled':
+    case 'trace:response':
+      return null;
 
     default:
-      return {
-        rolePart,
-        roleColor,
-        content: event.type,
-        contentColor: 'gray',
-      };
+      return null;
   }
 }
 
-export const StreamPanel: React.FC<StreamPanelProps> = ({
+export const StreamView: React.FC<StreamViewProps> = ({
   events,
   allRoleIds,
-  focused,
   streamStatus,
   waveId,
+  roleLabel,
 }) => {
-  // Show last N events that fit
   const maxVisible = 20;
   const visibleEvents = events.slice(-maxVisible);
 
-  // Filter out heartbeat noise for display
-  const displayEvents = visibleEvents.filter(
-    e => e.type !== 'heartbeat:tick' && e.type !== 'heartbeat:skip'
-      && e.type !== 'prompt:assembled' && e.type !== 'trace:response'
-  );
+  const turnCount = events.filter(e => e.type === 'text' || e.type === 'tool:start').length;
 
   const statusLabel = streamStatus === 'streaming' ? '\u25CF streaming'
     : streamStatus === 'done' ? '\u2713 done'
@@ -153,27 +127,33 @@ export const StreamPanel: React.FC<StreamPanelProps> = ({
   return (
     <Box flexDirection="column" paddingX={1} flexGrow={1}>
       <Box justifyContent="space-between">
-        <Text bold color={focused ? 'cyan' : 'gray'}>
-          {'\u2500\u2500'} Stream {waveId ? `(${waveId})` : ''} {'\u2500\u2500'}
+        <Text bold color="cyan">
+          Stream ({roleLabel})
+        </Text>
+        <Text color={streamStatus === 'streaming' ? 'green' : 'gray'}>
+          {statusLabel} {turnCount > 0 ? `turn ${turnCount}` : ''}
         </Text>
-        <Text color={streamStatus === 'streaming' ? 'green' : 'gray'}>{statusLabel}</Text>
       </Box>
 
-      {displayEvents.length === 0 && (
+      {visibleEvents.length === 0 && (
         <Box marginTop={1}>
           <Text color="gray" dimColor>
-            {waveId ? 'Waiting for events...' : 'No active stream. Press [w] to start a wave.'}
+            {waveId
+              ? `Streaming... waiting for ${roleLabel !== 'All' ? roleLabel + ' ' : ''}events`
+              : 'No active stream. Dispatch a wave to start.'}
           </Text>
         </Box>
       )}
 
-      {displayEvents.map((event, i) => {
-        const { rolePart, roleColor, content, contentColor } = renderEvent(event, allRoleIds);
+      {visibleEvents.map((event, i) => {
+        const rendered = renderEvent(event, allRoleIds);
+        if (!rendered) return null;
+        const roleColor = getRoleColor(event.roleId, allRoleIds);
         return (
           <Box key={`${event.seq}-${i}`}>
             <Text color="gray" dimColor>{formatTime(event.ts)} </Text>
-            <Text color={roleColor} bold>{rolePart.padEnd(12)}</Text>
-            <Text color={contentColor}>{content}</Text>
+            <Text color={roleColor} bold>{event.roleId.padEnd(12)}</Text>
+            <Text color={rendered.contentColor}>{rendered.content}</Text>
           </Box>
         );
       })}

package/src/tui/hooks/useApi.ts

@@ -8,18 +8,29 @@ import {
   fetchSessions,
   fetchExecStatus,
   fetchActiveWaves,
+  fetchActiveSessions,
   type CompanyInfo,
   type SessionInfo,
   type ExecStatus,
+  type ActiveSessionInfo,
 } from '../api';
 
 const POLL_INTERVAL = 3000; // 3 seconds
 
+export interface ActiveWaveInfo {
+  waveId: string;
+  sessionIds: string[];
+  directive?: string;
+  startedAt?: number;
+}
+
 export interface ApiState {
   company: CompanyInfo | null;
   sessions: SessionInfo[];
   execStatus: ExecStatus | null;
-  activeWaveId: string | null;
+  activeWaves: ActiveWaveInfo[];
+  activeSessions: ActiveSessionInfo[];
+  portSummary: { active: number; totalPorts: number };
   error: string | null;
   loaded: boolean;
   refresh(): void;
@@ -29,18 +40,21 @@ export function useApi(): ApiState {
   const [company, setCompany] = useState<CompanyInfo | null>(null);
   const [sessions, setSessions] = useState<SessionInfo[]>([]);
   const [execStatus, setExecStatus] = useState<ExecStatus | null>(null);
-  const [activeWaveId, setActiveWaveId] = useState<string | null>(null);
+  const [activeWaves, setActiveWaves] = useState<ActiveWaveInfo[]>([]);
+  const [activeSessions, setActiveSessions] = useState<ActiveSessionInfo[]>([]);
+  const [portSummary, setPortSummary] = useState<{ active: number; totalPorts: number }>({ active: 0, totalPorts: 0 });
   const [error, setError] = useState<string | null>(null);
   const [loaded, setLoaded] = useState(false);
   const mountedRef = useRef(true);
 
   const refresh = useCallback(async () => {
     try {
-      const [comp, sess, exec, waves] = await Promise.all([
+      const [comp, sess, exec, waves, activeSess] = await Promise.all([
         fetchCompany().catch(() => null),
         fetchSessions().catch(() => []),
         fetchExecStatus().catch(() => null),
         fetchActiveWaves().catch(() => ({ waves: [] })),
+        fetchActiveSessions().catch(() => ({ sessions: [], summary: { active: 0, totalPorts: 0 } })),
       ]);
 
       if (!mountedRef.current) return;
@@ -49,11 +63,18 @@ export function useApi(): ApiState {
       setSessions(Array.isArray(sess) ? sess : []);
       if (exec) setExecStatus(exec);
 
-      // Find active wave
+      // Store full active waves array
       if (waves.waves && waves.waves.length > 0) {
-        setActiveWaveId(waves.waves[0].waveId);
+        setActiveWaves(waves.waves.map((w: { waveId: string; sessionIds: string[] }) => ({
+          waveId: w.waveId,
+          sessionIds: w.sessionIds ?? [],
+        })));
       }
 
+      // Active sessions (port/resource visibility)
+      setActiveSessions(activeSess.sessions ?? []);
+      setPortSummary(activeSess.summary ?? { active: 0, totalPorts: 0 });
+
       setError(null);
       setLoaded(true);
     } catch (err) {
@@ -73,5 +94,5 @@ export function useApi(): ApiState {
     };
   }, [refresh]);
 
-  return { company, sessions, execStatus, activeWaveId, error, loaded, refresh };
+  return { company, sessions, execStatus, activeWaves, activeSessions, portSummary, error, loaded, refresh };
 }

package/src/tui/hooks/useCommand.ts

@@ -0,0 +1,162 @@
+/**
+ * useCommand — input handler for TUI v2 (Multi-Wave)
+ *
+ * Default: natural language → sendDirective to focused wave
+ * Commands (/ prefix):
+ *   /waves               — list all waves
+ *   /focus <n>           — switch to nth wave
+ *   /new [text]          — create new wave (optionally with directive)
+ *   /agents              — show wave→agent tree with resources
+ *   /ports               — show port allocations
+ *   /status              — show current wave + session status
+ *   /assign <role> <task> — assign task to specific role
+ *   /roles               — show org tree (Panel Mode)
+ *   /help                — show help
+ *   /quit                — exit
+ */
+
+import { useCallback } from 'react';
+import { dispatchWave, sendDirective, fetchJson } from '../api';
+
+export interface WaveInfo {
+  waveId: string;
+  directive: string;
+  startedAt: number;
+}
+
+export interface CommandResult {
+  type: 'success' | 'error' | 'info' | 'wave_started' | 'directive_sent' | 'stopped' | 'quit' | 'help' | 'panel' | 'waves_list' | 'focus_changed' | 'agents' | 'ports';
+  message: string;
+  waveId?: string;
+}
+
+async function postAssign(roleId: string, task: string): Promise<{ waveId?: string }> {
+  return fetchJson<{ waveId?: string }>('/api/jobs', {
+    method: 'POST',
+    body: {
+      type: 'assign',
+      roleId,
+      task,
+    },
+  });
+}
+
+export interface UseCommandOptions {
+  focusedWaveId: string | null;
+  waves: WaveInfo[];
+  onWaveCreated: (waveId: string, directive: string) => void;
+  onFocusWave: (waveId: string) => void;
+  onQuit: () => void;
+  onShowPanel: () => void;
+}
+
+export function useCommand(options: UseCommandOptions) {
+  const { focusedWaveId, waves, onWaveCreated, onFocusWave, onQuit, onShowPanel } = options;
+
+  const execute = useCallback(async (input: string): Promise<CommandResult> => {
+    const trimmed = input.trim();
+    if (!trimmed) return { type: 'info', message: '' };
+
+    // Slash commands
+    if (trimmed.startsWith('/')) {
+      const parts = trimmed.slice(1).split(/\s+/);
+      const cmd = parts[0].toLowerCase();
+      const args = parts.slice(1).join(' ');
+
+      switch (cmd) {
+        case 'waves': {
+          return { type: 'waves_list', message: '__waves__' };
+        }
+
+        case 'focus': {
+          const idx = parseInt(args, 10);
+          if (isNaN(idx) || idx < 1 || idx > waves.length) {
+            return { type: 'error', message: `Usage: /focus <1-${waves.length}>` };
+          }
+          const target = waves[idx - 1];
+          onFocusWave(target.waveId);
+          return { type: 'focus_changed', message: `Focused on Wave ${idx}`, waveId: target.waveId };
+        }
+
+        case 'new': {
+          const directive = args || undefined;
+          try {
+            const result = await dispatchWave(directive);
+            onWaveCreated(result.waveId, directive ?? '');
+            return {
+              type: 'wave_started',
+              message: `Wave created`,
+              waveId: result.waveId,
+            };
+          } catch (err) {
+            return { type: 'error', message: `New wave failed: ${err instanceof Error ? err.message : 'unknown'}` };
+          }
+        }
+
+        case 'agents':
+          return { type: 'agents', message: '__agents__' };
+
+        case 'ports':
+          return { type: 'ports', message: '__ports__' };
+
+        case 'status':
+          return { type: 'info', message: '__status__' };
+
+        case 'assign': {
+          const spaceIdx = args.indexOf(' ');
+          if (spaceIdx === -1 || !args) {
+            return { type: 'error', message: 'Usage: /assign <role> <task>' };
+          }
+          const roleId = args.slice(0, spaceIdx);
+          const task = args.slice(spaceIdx + 1);
+          try {
+            const result = await postAssign(roleId, task);
+            return { type: 'success', message: `Task assigned to ${roleId}`, waveId: result.waveId };
+          } catch (err) {
+            return { type: 'error', message: `Assign failed: ${err instanceof Error ? err.message : 'unknown'}` };
+          }
+        }
+
+        case 'roles':
+          onShowPanel();
+          return { type: 'panel', message: '' };
+
+        case 'help':
+          return { type: 'help', message: '__help__' };
+
+        case 'quit':
+        case 'exit':
+          onQuit();
+          return { type: 'quit', message: 'Goodbye!' };
+
+        default:
+          return { type: 'error', message: `Unknown command: /${cmd}. Type /help for commands.` };
+      }
+    }
+
+    // Default: natural language → directive to focused wave
+    if (focusedWaveId) {
+      try {
+        await sendDirective(focusedWaveId, trimmed);
+        return { type: 'directive_sent', message: `Directive sent` };
+      } catch (err) {
+        return { type: 'error', message: `Failed: ${err instanceof Error ? err.message : 'unknown'}` };
+      }
+    } else {
+      // No focused wave — create one with the directive
+      try {
+        const result = await dispatchWave(trimmed);
+        onWaveCreated(result.waveId, trimmed);
+        return {
+          type: 'wave_started',
+          message: `Wave created`,
+          waveId: result.waveId,
+        };
+      } catch (err) {
+        return { type: 'error', message: `Wave failed: ${err instanceof Error ? err.message : 'unknown'}` };
+      }
+    }
+  }, [focusedWaveId, waves, onWaveCreated, onFocusWave, onQuit, onShowPanel]);
+
+  return { execute };
+}