tycono 0.1.96-beta.30 → 0.1.96-beta.31

package/package.json

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

package/src/tui/app.tsx

@@ -404,17 +404,14 @@ export const App: React.FC = () => {
         addSystemMessage('  /new [text]          Create new wave', 'white');
         addSystemMessage('  /waves               List all waves', 'white');
         addSystemMessage('  /focus <n>           Switch to wave n', 'white');
-        addSystemMessage('  /agents              Agent tree + resources', 'white');
-        addSystemMessage('  /ports               Port allocations', 'white');
-        addSystemMessage('  /sessions            All sessions (kill/cleanup)', 'white');
+        addSystemMessage('  /agents              Wave \u2192 Role \u2192 Session tree', 'white');
+        addSystemMessage('  /sessions            Sessions + ports (kill/cleanup)', 'white');
         addSystemMessage('  /kill <id>           Kill a session', 'white');
         addSystemMessage('  /cleanup             Remove dead sessions', 'white');
-        addSystemMessage('  /status              Show current status', 'white');
-        addSystemMessage('  /assign <role> <task> Assign task to role', 'white');
-        addSystemMessage('  /roles               Org tree (Panel Mode)', 'white');
-        addSystemMessage('  /help                Show this help', 'white');
-        addSystemMessage('  /quit                Exit TUI', 'white');
-        addSystemMessage('Keys: [Tab] panel  [Esc] back  [Ctrl+C] quit', 'gray');
+        addSystemMessage('  /status              Current status', 'white');
+        addSystemMessage('  /help                This help', 'white');
+        addSystemMessage('  /quit                Exit', 'white');
+        addSystemMessage('Keys: [Tab] team panel  [1-9] wave  [Esc] back  [Ctrl+C] quit', 'gray');
         break;
       case 'info':
         if (result.message === '__status__') {
@@ -493,9 +490,9 @@ export const App: React.FC = () => {
             streamStatus={sse.streamStatus}
             waveId={focusedWaveId}
             activeSessions={api.activeSessions}
+            allSessions={api.sessions}
             waves={waves}
             focusedWaveId={focusedWaveId}
-            portSummary={api.portSummary}
             onMove={(dir) => {
               const nextIdx = dir === 'up'
                 ? Math.max(0, selectedRoleIndex - 1)
@@ -508,6 +505,10 @@ export const App: React.FC = () => {
               setSelectedRoleId(roleId === selectedRoleId ? null : roleId);
             }}
             onEscape={() => setMode('command')}
+            onFocusWave={(newWaveId) => {
+              setFocusedWaveId(newWaveId);
+              sse.clearEvents();
+            }}
           />
         </Box>
         <StatusBar

package/src/tui/components/PanelMode.tsx

@@ -1,15 +1,16 @@
 /**
- * PanelMode — Tab view: Org Tree (left) + Agent Detail + Stream (right)
+ * PanelMode — Wave-scoped team view
  *
- * Left:  Org Tree with status icons
- *        + compact resource summary (waves, ports)
- * Right: Selected role's resource info (port, worktree, browser)
- *        + event stream
+ * Shows focused wave's team state:
+ *   Left:  Wave title + Org Tree (wave-scoped status) + Wave tabs
+ *   Right: Selected role's resources + stream
  *
  * Navigation:
- *   j/k or arrow keys — move in Org Tree
- *   Enter             — select role to view its stream
- *   Esc               — return to Command Mode
+ *   j/k        — move in Org Tree (auto-selects)
+ *   1-9        — switch wave focus
+ *   Enter      — toggle filtered/all stream
+ *   Esc        — return to Command Mode
+ *   Ctrl+C     — quit
  */
 
 import React, { useState, useEffect, useMemo } from 'react';
@@ -17,7 +18,7 @@ import { Box, Text, useInput } from 'ink';
 import { OrgTree } from './OrgTree';
 import { StreamView } from './StreamView';
 import type { OrgNode } from '../store';
-import type { SSEEvent, ActiveSessionInfo } from '../api';
+import type { SSEEvent, ActiveSessionInfo, SessionInfo } from '../api';
 import type { WaveInfo } from '../hooks/useCommand';
 
 interface PanelModeProps {
@@ -29,23 +30,51 @@ interface PanelModeProps {
   streamStatus: 'idle' | 'streaming' | 'done' | 'error';
   waveId: string | null;
   activeSessions: ActiveSessionInfo[];
+  allSessions: SessionInfo[];
   waves: WaveInfo[];
   focusedWaveId: string | null;
-  portSummary: { active: number; totalPorts: number };
   onMove: (direction: 'up' | 'down') => void;
   onSelect: () => void;
   onEscape: () => void;
+  onFocusWave: (waveId: string) => void;
 }
 
-/** Find active session for a given roleId */
-function findSessionForRole(activeSessions: ActiveSessionInfo[], roleId: string): ActiveSessionInfo | null {
-  // Prefer active sessions, then any
-  return activeSessions.find(s => s.roleId === roleId && s.status === 'active')
-    ?? activeSessions.find(s => s.roleId === roleId)
-    ?? null;
+/** Get wave-scoped role statuses */
+function getWaveScopedStatuses(
+  allSessions: SessionInfo[],
+  focusedWaveId: string | null,
+): Record<string, string> {
+  if (!focusedWaveId) return {};
+  const statuses: Record<string, string> = {};
+  for (const s of allSessions) {
+    if (s.waveId !== focusedWaveId) continue;
+    if (s.status === 'active') {
+      statuses[s.roleId] = 'working';
+    } else if (!statuses[s.roleId]) {
+      statuses[s.roleId] = 'done';
+    }
+  }
+  return statuses;
+}
+
+/** Find active session for a role in focused wave */
+function findSessionForRole(
+  activeSessions: ActiveSessionInfo[],
+  allSessions: SessionInfo[],
+  roleId: string,
+  focusedWaveId: string | null,
+): ActiveSessionInfo | null {
+  // First try: session with matching waveId
+  if (focusedWaveId) {
+    const waveSes = allSessions.find(s => s.waveId === focusedWaveId && s.roleId === roleId && s.status === 'active');
+    if (waveSes) {
+      return activeSessions.find(s => s.sessionId === waveSes.id) ?? null;
+    }
+  }
+  // Fallback: any active session for this role
+  return activeSessions.find(s => s.roleId === roleId && s.status === 'active') ?? null;
 }
 
-/** Format elapsed time */
 function elapsed(startedAt: string): string {
   const ms = Date.now() - new Date(startedAt).getTime();
   if (ms < 60_000) return `${Math.floor(ms / 1000)}s`;
@@ -62,14 +91,14 @@ export const PanelMode: React.FC<PanelModeProps> = ({
   streamStatus,
   waveId,
   activeSessions,
+  allSessions,
   waves,
   focusedWaveId,
-  portSummary,
   onMove,
   onSelect,
   onEscape,
+  onFocusWave,
 }) => {
-  // Track terminal height for vertical separator
   const [termHeight, setTermHeight] = useState(process.stdout.rows || 30);
   useEffect(() => {
     const onResize = () => setTermHeight(process.stdout.rows || 30);
@@ -77,25 +106,35 @@ 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]);
+  const separatorStr = useMemo(() => '\u2502\n'.repeat(Math.max(5, termHeight - 8)), [termHeight]);
 
-  useInput((input, key) => {
-    if (key.escape) {
-      onEscape();
-      return;
-    }
-    if (key.upArrow || input === 'k') {
-      onMove('up');
-      return;
-    }
-    if (key.downArrow || input === 'j') {
-      onMove('down');
-      return;
+  // Wave-scoped statuses for Org Tree
+  const waveScopedStatuses = useMemo(
+    () => getWaveScopedStatuses(allSessions, focusedWaveId),
+    [allSessions, focusedWaveId],
+  );
+
+  // Override tree node statuses with wave-scoped values
+  const waveScopedTree = useMemo(() => {
+    function scopeNode(node: OrgNode): OrgNode {
+      return {
+        ...node,
+        status: waveScopedStatuses[node.role.id] ?? 'idle',
+        children: node.children.map(scopeNode),
+      };
     }
-    if (key.return) {
-      onSelect();
-      return;
+    return tree.map(scopeNode);
+  }, [tree, waveScopedStatuses]);
+
+  useInput((input, key) => {
+    if (key.escape) { onEscape(); return; }
+    if (key.upArrow || input === 'k') { onMove('up'); return; }
+    if (key.downArrow || input === 'j') { onMove('down'); return; }
+    if (key.return) { onSelect(); return; }
+    // 1-9: wave switch
+    const num = parseInt(input, 10);
+    if (num >= 1 && num <= 9 && num <= waves.length) {
+      onFocusWave(waves[num - 1].waveId);
     }
   });
 
@@ -108,9 +147,9 @@ export const PanelMode: React.FC<PanelModeProps> = ({
     ? flatRoles.includes(selectedRoleId) ? selectedRoleId : 'All'
     : 'All';
 
-  // Find resource info for selected role
+  // Find resource info for selected role (wave-scoped)
   const selectedSession = selectedRoleId
-    ? findSessionForRole(activeSessions, selectedRoleId)
+    ? findSessionForRole(activeSessions, allSessions, selectedRoleId, focusedWaveId)
     : null;
 
   // Focused wave info
@@ -119,29 +158,75 @@ export const PanelMode: React.FC<PanelModeProps> = ({
     ? waves.findIndex(w => w.waveId === focusedWaveId) + 1
     : 0;
 
+  // Wave session count for display
+  const waveSessionCount = focusedWaveId
+    ? allSessions.filter(s => s.waveId === focusedWaveId).length
+    : 0;
+
+  const leftWidth = 28;
+
   return (
     <Box flexDirection="column" flexGrow={1}>
-      {/* Main content: Org Tree left | Detail + Stream right */}
+      {/* Main content */}
       <Box flexGrow={1}>
-        {/* Left: Org Tree + Resource Summary */}
-        <Box flexDirection="column" width={28}>
+        {/* Left: Wave title + Org Tree + Wave tabs */}
+        <Box flexDirection="column" width={leftWidth}>
+          {/* Wave title */}
+          <Box paddingX={1} marginBottom={0}>
+            <Text color="green" bold>
+              W{focusedWaveIndex}
+            </Text>
+            <Text color="gray"> </Text>
+            <Text color="white" wrap="truncate">
+              {focusedWave?.directive ? focusedWave.directive.slice(0, leftWidth - 6) : '(idle)'}
+            </Text>
+          </Box>
+
+          {/* Session count */}
+          {waveSessionCount > 0 && (
+            <Box paddingX={1}>
+              <Text color="gray">{waveSessionCount} sessions</Text>
+            </Box>
+          )}
+
+          {/* Org Tree (wave-scoped statuses) */}
           <OrgTree
-            tree={tree}
+            tree={waveScopedTree}
             focused={true}
             selectedIndex={selectedRoleIndex}
             flatRoles={flatRoles}
-            ceoStatus={activeSessions.some(s => s.roleId === 'ceo' && s.status === 'active') ? 'working' : 'idle'}
+            ceoStatus={waveScopedStatuses['ceo'] ?? 'idle'}
           />
+
+          {/* Wave tabs at bottom */}
+          {waves.length > 1 && (
+            <Box paddingX={1} marginTop={1}>
+              {waves.map((w, i) => {
+                const isFocused = w.waveId === focusedWaveId;
+                return (
+                  <Box key={w.waveId} marginRight={1}>
+                    <Text
+                      color={isFocused ? 'green' : 'gray'}
+                      bold={isFocused}
+                      inverse={isFocused}
+                    >
+                      {` ${i + 1} `}
+                    </Text>
+                  </Box>
+                );
+              })}
+            </Box>
+          )}
         </Box>
 
-        {/* Vertical separator — memoized to avoid regenerating on every render */}
+        {/* Vertical separator */}
         <Box flexDirection="column" marginX={0}>
           <Text color="gray">{separatorStr}</Text>
         </Box>
 
         {/* Right: Agent Detail + Stream */}
         <Box flexGrow={1} flexDirection="column" overflow="hidden">
-          {/* Agent Resource Header — shown when a role is selected */}
+          {/* Agent Resource Header */}
           {selectedRoleId && selectedSession && (
             <Box flexDirection="column" paddingX={1} marginBottom={0}>
               <Box justifyContent="space-between">
@@ -151,54 +236,35 @@ export const PanelMode: React.FC<PanelModeProps> = ({
                   {selectedSession.startedAt ? ` (${elapsed(selectedSession.startedAt)})` : ''}
                 </Text>
               </Box>
-
-              {/* Ports */}
-              <Box>
-                <Text color="gray">Port  </Text>
-                <Text color="white">
-                  API:{selectedSession.ports.api} Vite:{selectedSession.ports.vite}
-                  {selectedSession.ports.hmr ? ` HMR:${selectedSession.ports.hmr}` : ''}
-                </Text>
-              </Box>
-
-              {/* Worktree */}
-              {selectedSession.worktreePath && (
+              {selectedSession.ports.api > 0 && (
                 <Box>
-                  <Text color="gray">Tree  </Text>
-                  <Text color="white">{selectedSession.worktreePath}</Text>
+                  <Text color="gray">Port  </Text>
+                  <Text color="white">
+                    API:{selectedSession.ports.api} Vite:{selectedSession.ports.vite}
+                    {selectedSession.ports.hmr ? ` HMR:${selectedSession.ports.hmr}` : ''}
+                  </Text>
                 </Box>
               )}
-
-              {/* Wave association */}
-              {selectedSession.waveId && (
+              {selectedSession.worktreePath && (
                 <Box>
-                  <Text color="gray">Wave  </Text>
-                  <Text color="white">
-                    {(() => {
-                      const wi = waves.findIndex(w => w.waveId === selectedSession.waveId);
-                      return wi >= 0 ? `Wave ${wi + 1}` : selectedSession.waveId;
-                    })()}
-                  </Text>
+                  <Text color="gray">Tree  </Text>
+                  <Text color="white">{selectedSession.worktreePath}</Text>
                 </Box>
               )}
-
-              {/* Task */}
               {selectedSession.task && (
                 <Box>
                   <Text color="gray">Task  </Text>
-                  <Text color="white">{selectedSession.task.slice(0, 60)}</Text>
+                  <Text color="white" wrap="truncate">{selectedSession.task.slice(0, 60)}</Text>
                 </Box>
               )}
-
               <Text color="gray">{'\u2500'.repeat(40)}</Text>
             </Box>
           )}
 
-          {/* Agent Resource Header — role selected but no active session */}
           {selectedRoleId && !selectedSession && (
             <Box flexDirection="column" paddingX={1} marginBottom={0}>
               <Text bold color="cyan">{selectedRoleId}</Text>
-              <Text color="gray">(no active session)</Text>
+              <Text color="gray">(not active in this wave)</Text>
               <Text color="gray">{'\u2500'.repeat(40)}</Text>
             </Box>
           )}
@@ -222,7 +288,7 @@ export const PanelMode: React.FC<PanelModeProps> = ({
       {/* Footer hints */}
       <Box paddingX={1} justifyContent="center">
         <Text color="gray" dimColor>
-          [j/k] move  [Enter] select  [Esc] back to command
+          [j/k] move  [Enter] all/role  {waves.length > 1 ? '[1-9] wave  ' : ''}[Esc] command  [Ctrl+C] quit
         </Text>
       </Box>
     </Box>