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

package/src/tui/components/CommandMode.tsx

@@ -0,0 +1,277 @@
+/**
+ * CommandMode — chat-first mode
+ *
+ * User = CEO. Supervisor (ceo role) = user's AI proxy.
+ * - Supervisor responses: shown directly (no prefix), like a conversation
+ * - Team activity: indented with roleId, concise
+ * - System prompts, internal noise: filtered out
+ */
+
+import React, { useState, useCallback } from 'react';
+import { Box, Text } from 'ink';
+import TextInput from 'ink-text-input';
+import type { SSEEvent } from '../api';
+import { getRoleColor } from '../theme';
+
+const MAX_STREAM_LINES = 30;
+const SUPERVISOR_ROLE = 'ceo';
+
+export interface StreamLine {
+  id: number;
+  text: string;
+  color: string;
+  prefix?: string;
+  prefixColor?: string;
+  indent?: boolean;
+}
+
+interface CommandModeProps {
+  events: SSEEvent[];
+  allRoleIds: string[];
+  systemMessages: StreamLine[];
+  onSubmit: (input: string) => void;
+}
+
+let lineCounter = 0;
+
+/** Filter out system prompt noise from text */
+function isSystemNoise(text: string): boolean {
+  const t = text.trim();
+  if (!t) return true;
+  // System prompt fragments
+  if (t.startsWith('## Your Role')) return true;
+  if (t.startsWith('You are')) return true;
+  if (t.startsWith('[CEO Supervisor]')) return true;
+  if (t.startsWith('[Question from')) return true;
+  if (t.includes('⛔ AKB Rule')) return true;
+  if (t.includes('⛔  Read the')) return true;
+  if (t.startsWith('⛔')) return true;
+  return false;
+}
+
+/** Convert SSE event to stream lines */
+export function summarizeEvent(event: SSEEvent, allRoleIds: string[]): StreamLine | null {
+  const isSupervisor = event.roleId === SUPERVISOR_ROLE;
+  const roleColor = getRoleColor(event.roleId, allRoleIds);
+
+  switch (event.type) {
+    case 'text': {
+      const text = ((event.data.text as string) ?? '');
+      if (isSystemNoise(text)) return null;
+
+      if (isSupervisor) {
+        // Supervisor text → direct response (no prefix, generous length)
+        return {
+          id: ++lineCounter,
+          text: text.slice(0, 200),
+          color: 'white',
+        };
+      } else {
+        // Team text → indented with role prefix, concise
+        return {
+          id: ++lineCounter,
+          prefix: event.roleId,
+          prefixColor: roleColor,
+          text: text.slice(0, 80),
+          color: 'white',
+          indent: true,
+        };
+      }
+    }
+
+    case 'dispatch:start': {
+      const target = (event.data.targetRole as string) ?? '';
+      const task = ((event.data.task as string) ?? '');
+      // Filter out system prompt from task display
+      const cleanTask = task.replace(/⛔[^⛔]*⛔[^"]*/g, '').trim().slice(0, 50);
+      if (isSupervisor) {
+        return {
+          id: ++lineCounter,
+          text: `→ ${target} 배정${cleanTask ? ': ' + cleanTask : ''}`,
+          color: 'yellow',
+        };
+      }
+      return {
+        id: ++lineCounter,
+        prefix: event.roleId,
+        prefixColor: roleColor,
+        text: `→ ${target} 배정`,
+        color: 'yellow',
+        indent: true,
+      };
+    }
+
+    case 'dispatch:done': {
+      const target = (event.data.targetRole as string) ?? '';
+      return {
+        id: ++lineCounter,
+        prefix: event.roleId,
+        prefixColor: roleColor,
+        text: `← ${target} 완료`,
+        color: 'yellow',
+        indent: !isSupervisor,
+      };
+    }
+
+    case 'tool:start': {
+      const toolName = (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).split('/').pop()}`;
+        else if (inp.command) detail = ` ${String(inp.command).slice(0, 40)}`;
+      }
+
+      if (isSupervisor) {
+        // Supervisor tool use → subtle
+        return {
+          id: ++lineCounter,
+          text: `  → ${toolName}${detail}`,
+          color: 'gray',
+        };
+      }
+      return {
+        id: ++lineCounter,
+        prefix: event.roleId,
+        prefixColor: roleColor,
+        text: `→ ${toolName}${detail}`,
+        color: 'gray',
+        indent: true,
+      };
+    }
+
+    case 'msg:start': {
+      if (isSupervisor) return null; // Hide supervisor start (noise)
+      const task = ((event.data.task as string) ?? '');
+      const cleanTask = task.replace(/⛔[^⛔]*⛔[^"]*/g, '').trim().slice(0, 40);
+      return {
+        id: ++lineCounter,
+        prefix: event.roleId,
+        prefixColor: roleColor,
+        text: `▶ ${cleanTask || 'started'}`,
+        color: 'green',
+        indent: true,
+      };
+    }
+
+    case 'msg:done': {
+      const turns = event.data.turns as number | undefined;
+      if (isSupervisor) return null; // Hide supervisor done
+      return {
+        id: ++lineCounter,
+        prefix: event.roleId,
+        prefixColor: roleColor,
+        text: `✓ done${turns ? ` (${turns} turns)` : ''}`,
+        color: 'green',
+        indent: true,
+      };
+    }
+
+    case 'msg:error': {
+      if (isSupervisor) return null; // Supervisor errors handled by system messages
+      const error = ((event.data.error as string) ?? '').slice(0, 60);
+      return {
+        id: ++lineCounter,
+        prefix: event.roleId,
+        prefixColor: roleColor,
+        text: `✗ ${error}`,
+        color: 'red',
+        indent: true,
+      };
+    }
+
+    case 'msg:awaiting_input':
+      return {
+        id: ++lineCounter,
+        text: isSupervisor ? '...' : `  ${event.roleId}: waiting`,
+        color: 'yellow',
+      };
+
+    // Hidden
+    case 'thinking':
+    case 'heartbeat:tick':
+    case 'heartbeat:skip':
+    case 'prompt:assembled':
+    case 'trace:response':
+    case 'tool:result':
+      return null;
+
+    default:
+      return null;
+  }
+}
+
+export const CommandMode: React.FC<CommandModeProps> = ({
+  events,
+  allRoleIds,
+  systemMessages,
+  onSubmit,
+}) => {
+  const [input, setInput] = useState('');
+
+  // Convert events to stream lines
+  const eventLines: StreamLine[] = [];
+  for (const event of events) {
+    const line = summarizeEvent(event, allRoleIds);
+    if (line) eventLines.push(line);
+  }
+
+  // Merge system messages and event lines, show last MAX_STREAM_LINES
+  const allLines = [...systemMessages, ...eventLines].slice(-MAX_STREAM_LINES);
+
+  const handleSubmit = useCallback((value: string) => {
+    const trimmed = value.trim();
+    if (trimmed) {
+      onSubmit(trimmed);
+    }
+    setInput('');
+  }, [onSubmit]);
+
+  return (
+    <Box flexDirection="column" flexGrow={1}>
+      {/* Stream area */}
+      <Box flexDirection="column" flexGrow={1} paddingX={1} overflow="hidden">
+        {allLines.length === 0 && (
+          <Box marginTop={1}>
+            <Text color="gray" dimColor>
+              Type a message to your AI team, or /help for commands.
+            </Text>
+          </Box>
+        )}
+        {allLines.map((line) => (
+          <Box key={line.id}>
+            {line.indent && <Text>  </Text>}
+            {line.prefix && (
+              <Text color={line.prefixColor} bold>
+                {(line.prefix).padEnd(12)}
+              </Text>
+            )}
+            <Text color={line.color}>{line.text}</Text>
+          </Box>
+        ))}
+      </Box>
+
+      {/* Separator */}
+      <Box width="100%">
+        <Text color="gray">{'─'.repeat(process.stdout.columns || 70)}</Text>
+      </Box>
+
+      {/* Input */}
+      <Box paddingX={1} justifyContent="space-between">
+        <Box>
+          <Text color="yellow" bold>&gt; </Text>
+          <TextInput
+            value={input}
+            onChange={setInput}
+            onSubmit={handleSubmit}
+            placeholder=""
+          />
+        </Box>
+        <Box>
+          <Text color="gray" dimColor>[Tab] panel</Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+};

package/src/tui/components/OrgTree.tsx

@@ -32,7 +32,6 @@ function statusColor(status: string): string {
 
 interface FlatEntry {
   roleId: string;
-  name: string;
   level: string;
   status: string;
   prefix: string;
@@ -47,15 +46,14 @@ function flattenTree(nodes: OrgNode[], prefix: string = '', isLast: boolean[] =
 
     let linePrefix = '';
     for (let j = 0; j < isLast.length; j++) {
-      linePrefix += isLast[j] ? '   ' : '\u2502  ';
+      linePrefix += isLast[j] ? '   ' : '│  ';
     }
     linePrefix += isLast.length > 0 || i > 0 || nodes.length > 1
-      ? (last ? '\u2514\u2500 ' : '\u251C\u2500 ')
+      ? (last ? '└─ ' : '├─ ')
       : '';
 
     result.push({
       roleId: node.role.id,
-      name: node.role.name || node.role.id,
       level: node.role.level,
       status: node.status,
       prefix: linePrefix,
@@ -72,19 +70,9 @@ function flattenTree(nodes: OrgNode[], prefix: string = '', isLast: boolean[] =
 export const OrgTree: React.FC<OrgTreeProps> = ({ tree, focused, selectedIndex, flatRoles }) => {
   const entries = flattenTree(tree);
 
-  // Map flatRoles index to entries
-  const flatRoleIdToEntryIdx = new Map<number, number>();
-  let roleIdx = 0;
-  for (let i = 0; i < entries.length; i++) {
-    if (roleIdx < flatRoles.length && flatRoles[roleIdx] === entries[i].roleId) {
-      flatRoleIdToEntryIdx.set(roleIdx, i);
-      roleIdx++;
-    }
-  }
-
   return (
     <Box flexDirection="column" paddingX={1}>
-      <Text bold color={focused ? 'cyan' : 'gray'}>\u2500\u2500 Org Tree \u2500\u2500</Text>
+      <Text bold color={focused ? 'cyan' : 'gray'}>{'── Org Tree ──'}</Text>
       <Box marginTop={1}>
         <Text color="yellow" bold>{'\uD83D\uDC51'} CEO</Text>
       </Box>
@@ -108,9 +96,8 @@ export const OrgTree: React.FC<OrgTreeProps> = ({ tree, focused, selectedIndex,
               bold={isSelected}
               inverse={isSelected}
             >
-              {entry.level === 'c-level' ? entry.name : entry.name}
+              {entry.roleId}
             </Text>
-            <Text color="gray" dimColor> {entry.roleId}</Text>
           </Box>
         );
       })}

package/src/tui/components/PanelMode.tsx

@@ -0,0 +1,265 @@
+/**
+ * PanelMode — Tab view: Org Tree (left) + Agent Detail + Stream (right)
+ *
+ * Left:  Org Tree with status icons
+ *        + compact resource summary (waves, ports)
+ * Right: Selected role's resource info (port, worktree, browser)
+ *        + event stream
+ *
+ * Navigation:
+ *   j/k or arrow keys — move in Org Tree
+ *   Enter             — select role to view its stream
+ *   Esc               — return to Command Mode
+ */
+
+import React, { useState, useEffect } from 'react';
+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 { WaveInfo } from '../hooks/useCommand';
+
+interface PanelModeProps {
+  tree: OrgNode[];
+  flatRoles: string[];
+  events: SSEEvent[];
+  selectedRoleIndex: number;
+  selectedRoleId: string | null;
+  streamStatus: 'idle' | 'streaming' | 'done' | 'error';
+  waveId: string | null;
+  activeSessions: ActiveSessionInfo[];
+  waves: WaveInfo[];
+  focusedWaveId: string | null;
+  portSummary: { active: number; totalPorts: number };
+  onMove: (direction: 'up' | 'down') => void;
+  onSelect: () => void;
+  onEscape: () => 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;
+}
+
+/** 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`;
+  if (ms < 3600_000) return `${Math.floor(ms / 60_000)}m`;
+  return `${Math.floor(ms / 3600_000)}h`;
+}
+
+export const PanelMode: React.FC<PanelModeProps> = ({
+  tree,
+  flatRoles,
+  events,
+  selectedRoleIndex,
+  selectedRoleId,
+  streamStatus,
+  waveId,
+  activeSessions,
+  waves,
+  focusedWaveId,
+  portSummary,
+  onMove,
+  onSelect,
+  onEscape,
+}) => {
+  // Track terminal height for vertical separator
+  const [termHeight, setTermHeight] = useState(process.stdout.rows || 30);
+  useEffect(() => {
+    const onResize = () => setTermHeight(process.stdout.rows || 30);
+    process.stdout.on('resize', onResize);
+    return () => { process.stdout.off('resize', onResize); };
+  }, []);
+
+  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;
+    }
+  });
+
+  // Filter events for selected role
+  const roleEvents = selectedRoleId
+    ? events.filter((e) => e.roleId === selectedRoleId)
+    : events;
+
+  const roleLabel = selectedRoleId
+    ? flatRoles.includes(selectedRoleId) ? selectedRoleId : 'All'
+    : 'All';
+
+  // Find resource info for selected role
+  const selectedSession = selectedRoleId
+    ? findSessionForRole(activeSessions, selectedRoleId)
+    : null;
+
+  // Focused wave info
+  const focusedWave = waves.find(w => w.waveId === focusedWaveId);
+  const focusedWaveIndex = focusedWaveId
+    ? 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 */}
+      <Box flexGrow={1}>
+        {/* Left: Org Tree + Resource Summary */}
+        <Box flexDirection="column" width={28}>
+          <OrgTree
+            tree={tree}
+            focused={true}
+            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 */}
+        <Box flexDirection="column" marginX={0}>
+          <Text color="gray">{'\u2502\n'.repeat(Math.max(5, termHeight - 6))}</Text>
+        </Box>
+
+        {/* Right: Agent Detail + Stream */}
+        <Box flexGrow={1} flexDirection="column" overflow="hidden">
+          {/* Agent Resource Header — shown when a role is selected */}
+          {selectedRoleId && selectedSession && (
+            <Box flexDirection="column" paddingX={1} marginBottom={0}>
+              <Box justifyContent="space-between">
+                <Text bold color="cyan">{selectedRoleId}</Text>
+                <Text color={selectedSession.status === 'active' ? 'green' : 'gray'}>
+                  {selectedSession.status === 'active' ? '\u25CF' : '\u25CB'} {selectedSession.status}
+                  {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 && (
+                <Box>
+                  <Text color="gray">Tree  </Text>
+                  <Text color="white">{selectedSession.worktreePath}</Text>
+                </Box>
+              )}
+
+              {/* Wave association */}
+              {selectedSession.waveId && (
+                <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>
+                </Box>
+              )}
+
+              {/* Task */}
+              {selectedSession.task && (
+                <Box>
+                  <Text color="gray">Task  </Text>
+                  <Text color="white">{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">{'\u2500'.repeat(40)}</Text>
+            </Box>
+          )}
+
+          {/* Stream */}
+          <StreamView
+            events={roleEvents}
+            allRoleIds={flatRoles}
+            streamStatus={streamStatus}
+            waveId={waveId}
+            roleLabel={roleLabel}
+          />
+        </Box>
+      </Box>
+
+      {/* Separator */}
+      <Box width="100%">
+        <Text color="gray">{'\u2500'.repeat(process.stdout.columns || 70)}</Text>
+      </Box>
+
+      {/* Footer hints */}
+      <Box paddingX={1} justifyContent="center">
+        <Text color="gray" dimColor>
+          [j/k] move  [Enter] select  [Esc] back to command
+        </Text>
+      </Box>
+    </Box>
+  );
+};

package/src/tui/components/SetupWizard.tsx

@@ -76,11 +76,18 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete }) => {
   };
 
   const handleCodeDirSubmit = async (value: string) => {
-    const dir = value.trim() || './code';
+    const path = await import('node:path');
+    const fs = await import('node:fs');
+    const dir = path.resolve(value.trim() || './code');
     setCodeDir(dir);
     setStep('creating');
 
     try {
+      // Ensure code directory exists
+      if (!fs.existsSync(dir)) {
+        fs.mkdirSync(dir, { recursive: true });
+      }
+
       const result = await postSetupScaffold(companyName, selectedTeam?.id ?? 'minimal');
       setResultPath(result.path ?? '');
       setResultRoles(result.rolesCreated ?? 0);
@@ -104,7 +111,7 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete }) => {
       paddingY={1}
       width={56}
     >
-      <Text bold color="cyan">{'\u2500\u2500\u2500'} TYCONO Setup {'\u2500\u2500\u2500'}</Text>
+      <Text bold color="cyan">{'───'} TYCONO Setup {'───'}</Text>
 
       <Box marginTop={1}>
         <Text color="gray">No company found. Let's set one up.</Text>
@@ -137,7 +144,7 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete }) => {
             {teams.length > 0 ? (
               <SelectInput
                 items={teams.map((t) => ({
-                  label: `${t.id}  ${t.description || t.roles.join(', ')}`,
+                  label: `${t.id}  ${t.roles.map(r => typeof r === 'string' ? r : r.name || r.id).join(', ')}`,
                   value: t.id,
                 }))}
                 onSelect={handleTeamSelect}