tycono 0.1.96-beta.7 → 0.1.96-beta.9

package/README.md

@@ -5,8 +5,8 @@
 <h1 align="center">tycono</h1>
 
 <p align="center">
-  <strong>Build an AI company. Watch them work.</strong><br>
-  <sub>Infrastructure-as-Code defined servers. Company-as-Code defines organizations.</sub>
+  <strong>Cursor gives you one AI developer. Tycono gives you an AI team.</strong><br>
+  <sub>Give one order. Watch your AI team plan, build, and learn together.</sub>
 </p>
 
 <p align="center">
@@ -25,9 +25,11 @@
 
 ---
 
-**tycono** is an open-source platform that lets you define and run an AI-powered organization. Roles, authority, knowledge, and workflows — all defined in files, executed by AI agents, visualized in real time.
+Cursor, Lovable, Bolt — they all give you **one AI agent**. It helps, but you still drive everything.
 
-One command. Your AI company is running.
+**tycono** gives you an **AI team**. A CTO reviews architecture. Engineers write code. A PM breaks down tasks. QA catches bugs. You just give the order and watch them work.
+
+One command. Your AI team is running.
 
 ```bash
 npx tycono
@@ -83,16 +85,16 @@ Session 50 is dramatically smarter than session 1. Your company learns.
 
 ## Why Tycono?
 
-Coding agents simulate **one developer**. Tycono simulates **the entire company**.
+Same goal as Cursor, Lovable, Bolt — **get AI to do your work**. Different method.
 
-| | Single AI Agent | Tycono |
+| | Cursor / Lovable / Bolt | Tycono |
 |---|---|---|
-| **What it runs** | One agent, one context | Multiple roles with org hierarchy |
-| **Knowledge** | Resets every session | Compounds forever (AKB Pre-K/Post-K) |
-| **Authority** | Can do anything (or nothing) | Scoped — each role has clear boundaries |
-| **Delegation** | Manual prompt chaining | CEO dispatches, org chart routes automatically |
-| **Scale** | 1 agent | 7 → 700 agents |
-| **Visibility** | Terminal output | Real-time org tree + activity stream |
+| **Agents** | 1 AI helps you | **AI team works for you** |
+| **Your role** | Keep directing | **Give one order, watch** |
+| **Knowledge** | Resets every session | **Compounds forever** |
+| **Quality** | You review everything | **QA agent catches bugs** |
+| **Scale** | 1 task at a time | **Parallel across roles** |
+| **Visibility** | Editor / chat | **Real-time org tree** |
 
 ## Company-as-Code
 
@@ -258,9 +260,9 @@ npx tycono --version    # Show version
 - [x] CEO Wave dispatch with org-tree targeting
 - [x] AKB — Pre-K / Post-K knowledge loop
 - [x] Port Registry for multi-agent isolation
-- [ ] **TUI mode** — terminal-native multi-panel interface
+- [ ] **TUI mode** — terminal-native multi-panel interface *(in progress)*
 - [ ] Git worktree isolation per agent session
-- [ ] Desktop app (.dmg / .exe) — background execution, system notifications
+- [ ] **Desktop app** (.dmg / .exe) — background execution, notifications, no API key setup needed
 - [ ] Multi-LLM support (OpenAI, local models)
 
 ## Built with Tycono

package/package.json

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

package/src/tui/api.ts

@@ -16,7 +16,7 @@ export function getBaseUrl(): string {
 
 /* ─── HTTP helpers ─── */
 
-async function fetchJson<T>(path: string, options?: { method?: string; body?: unknown }): Promise<T> {
+export async function fetchJson<T>(path: string, options?: { method?: string; body?: unknown }): Promise<T> {
   const url = `${BASE_URL}${path}`;
   const method = options?.method ?? 'GET';
   const bodyStr = options?.body ? JSON.stringify(options.body) : undefined;

package/src/tui/app.tsx

@@ -1,46 +1,34 @@
 /**
- * TUI App — main layout with 4 panels
+ * TUI App v2 — Hybrid Mode (Command + Panel)
  *
- * Layout:
- * ┌─────────────────────────────────────────┐
- * │ StatusBar                               │
- * ├──────────────┬──────────────────────────┤
- * │ OrgTree      │ StreamPanel              │
- * │              │                          │
- * ├──────────────┤                          │
- * │ SessionList  │                          │
- * ├──────────────┴──────────────────────────┤
- * │ CommandInput                            │
- * └─────────────────────────────────────────┘
+ * Two modes:
+ *   Command Mode (default) — stream summary + command input (> prompt)
+ *   Panel Mode (Tab)       — Org Tree left + Role stream right
+ *
+ * Tab toggles between modes, Esc returns to Command Mode.
  */
 
 import React, { useState, useCallback, useMemo } from 'react';
-import { Box, Text, useApp } from 'ink';
+import { Box, Text, useApp, useInput } from 'ink';
 import { StatusBar } from './components/StatusBar';
-import { OrgTree } from './components/OrgTree';
-import { SessionList } from './components/SessionList';
-import { StreamPanel } from './components/StreamPanel';
-import { CommandInput } from './components/CommandInput';
-import { WaveDialog } from './components/WaveDialog';
-import { HelpOverlay } from './components/HelpOverlay';
+import { CommandMode, type StreamLine } from './components/CommandMode';
+import { PanelMode } from './components/PanelMode';
 import { SetupWizard } from './components/SetupWizard';
 import { useApi } from './hooks/useApi';
 import { useSSE } from './hooks/useSSE';
-import { useKeyboard } from './hooks/useKeyboard';
+import { useCommand } from './hooks/useCommand';
 import { buildOrgTree } from './store';
-import { dispatchWave } from './api';
 
-type Panel = 'org' | 'sessions' | 'stream' | 'command';
-type Dialog = 'none' | 'wave' | 'help';
+type Mode = 'command' | 'panel';
 type View = 'loading' | 'setup' | 'dashboard';
 
-const PANELS: Panel[] = ['org', 'sessions', 'stream', 'command'];
+let sysLineId = 100000;
 
 export const App: React.FC = () => {
   const { exit } = useApp();
   const api = useApi();
 
-  // Determine view: loading → setup (no company) → dashboard
+  // View state: loading -> setup (no company) -> dashboard
   const [view, setView] = useState<View>('loading');
 
   React.useEffect(() => {
@@ -55,16 +43,31 @@ export const App: React.FC = () => {
     setView('dashboard');
   }, [api]);
 
-  const [activePanel, setActivePanel] = useState<Panel>('org');
-  const [dialog, setDialog] = useState<Dialog>('none');
-  const [selectedRoleIndex, setSelectedRoleIndex] = useState(0);
-  const [selectedSessionIndex, setSelectedSessionIndex] = useState(0);
+  // Mode state
+  const [mode, setMode] = useState<Mode>('command');
+
+  // Wave state
   const [waveId, setWaveId] = useState<string | null>(null);
   const [waveStatus, setWaveStatus] = useState<'idle' | 'running' | 'done'>('idle');
 
-  // Derive active wave from API if we don't have one
+  // Panel mode state
+  const [selectedRoleIndex, setSelectedRoleIndex] = useState(0);
+  const [selectedRoleId, setSelectedRoleId] = useState<string | null>(null);
+
+  // System messages (command feedback displayed in stream area)
+  const [systemMessages, setSystemMessages] = useState<StreamLine[]>([]);
+
+  const addSystemMessage = useCallback((text: string, color: string = 'yellow') => {
+    setSystemMessages(prev => {
+      const next = [...prev, { id: ++sysLineId, text, color }];
+      return next.length > 50 ? next.slice(-50) : next;
+    });
+  }, []);
+
+  // Derive effective wave ID (from manual set or API polling)
   const effectiveWaveId = waveId ?? api.activeWaveId;
 
+  // SSE subscription
   const sse = useSSE(effectiveWaveId);
 
   // Build org tree
@@ -73,10 +76,12 @@ export const App: React.FC = () => {
   const statuses = api.execStatus?.statuses ?? {};
   const orgTree = useMemo(() => buildOrgTree(roles, statuses), [roles, statuses]);
 
-  // Count active
-  const activeCount = Object.values(statuses).filter(s => s === 'working' || s === 'streaming').length;
+  // Active count
+  const activeCount = Object.values(statuses).filter(
+    s => s === 'working' || s === 'streaming'
+  ).length;
 
-  // Determine wave status from SSE
+  // Derived wave status
   const derivedWaveStatus = useMemo(() => {
     if (sse.streamStatus === 'streaming') return 'running' as const;
     if (sse.streamStatus === 'done') return 'done' as const;
@@ -84,55 +89,94 @@ export const App: React.FC = () => {
     return waveStatus;
   }, [sse.streamStatus, waveStatus, activeCount]);
 
-  // Handle wave dispatch
-  const handleWaveSubmit = useCallback(async (directive: string) => {
-    setDialog('none');
-    try {
-      const result = await dispatchWave(directive);
-      setWaveId(result.waveId);
+  // Command handler
+  const { execute } = useCommand({
+    activeWaveId: effectiveWaveId,
+    onWaveStarted: (newWaveId) => {
+      setWaveId(newWaveId);
       setWaveStatus('running');
       sse.clearEvents();
       api.refresh();
-    } catch (err) {
-      // Show error briefly
-      console.error('Wave dispatch failed:', err);
-    }
-  }, [sse, api]);
-
-  // Keyboard actions — disabled when dialog is open
-  const keyboardEnabled = dialog === 'none';
-
-  useKeyboard({
-    onWave: () => setDialog('wave'),
-    onQuit: () => exit(),
-    onHelp: () => setDialog(dialog === 'help' ? 'none' : 'help'),
-    onTab: () => {
-      const idx = PANELS.indexOf(activePanel);
-      setActivePanel(PANELS[(idx + 1) % PANELS.length]);
-    },
-    onUp: () => {
-      if (activePanel === 'org') {
-        setSelectedRoleIndex(Math.max(0, selectedRoleIndex - 1));
-      } else if (activePanel === 'sessions') {
-        setSelectedSessionIndex(Math.max(0, selectedSessionIndex - 1));
-      }
     },
-    onDown: () => {
-      if (activePanel === 'org') {
-        setSelectedRoleIndex(Math.min(flatRoleIds.length - 1, selectedRoleIndex + 1));
-      } else if (activePanel === 'sessions') {
-        setSelectedSessionIndex(Math.min(Math.max(0, api.sessions.length - 1), selectedSessionIndex + 1));
-      }
-    },
-    onEnter: () => {
-      // Future: select role/session to show in stream
+    onStopped: () => {
+      setWaveStatus('idle');
+      api.refresh();
     },
-    onEscape: () => {
-      if (dialog !== 'none') {
-        setDialog('none');
+    onQuit: () => exit(),
+    onShowPanel: () => setMode('panel'),
+  });
+
+  // Handle command submission from CommandMode
+  const handleCommandSubmit = useCallback(async (input: string) => {
+    addSystemMessage(`> ${input}`, 'white');
+
+    const result = await execute(input);
+
+    switch (result.type) {
+      case 'wave_started':
+        addSystemMessage(`\u26A1 ${result.message}`, 'yellow');
+        break;
+      case 'directive_sent':
+        addSystemMessage(`\u26A1 ${result.message}`, 'yellow');
+        break;
+      case 'stopped':
+        addSystemMessage(`\u26A1 ${result.message}`, 'red');
+        break;
+      case 'error':
+        addSystemMessage(result.message, 'red');
+        break;
+      case 'help':
+        addSystemMessage('Commands:', 'cyan');
+        addSystemMessage('  wave <directive> [--continuous]  Start a wave', 'white');
+        addSystemMessage('  directive <text>                 Send directive to active wave', 'white');
+        addSystemMessage('  stop                             Stop all active executions', 'white');
+        addSystemMessage('  status                           Show current status', 'white');
+        addSystemMessage('  assign <role> <task>             Assign task to role', 'white');
+        addSystemMessage('  summary                          Show last wave summary', 'white');
+        addSystemMessage('  roles                            Show org tree (Panel Mode)', 'white');
+        addSystemMessage('  help                             Show this help', 'white');
+        addSystemMessage('  quit                             Exit TUI', 'white');
+        addSystemMessage('Keys: [Tab] panel  [Esc] back  [Ctrl+C] stop/quit', 'gray');
+        break;
+      case 'info':
+        if (result.message === '__status__') {
+          const wLabel = effectiveWaveId
+            ? `Wave ${effectiveWaveId.replace('wave-', '#')}: ${derivedWaveStatus}`
+            : 'No active wave';
+          addSystemMessage(wLabel, derivedWaveStatus === 'running' ? 'green' : 'gray');
+          addSystemMessage(`Sessions: ${api.sessions.length}  Active: ${activeCount}`, 'white');
+        } else if (result.message === '__summary__') {
+          addSystemMessage('Summary: not yet implemented', 'gray');
+        }
+        break;
+      case 'panel':
+        // mode already switched
+        break;
+      case 'quit':
+        // exit already called
+        break;
+      default:
+        if (result.message) {
+          addSystemMessage(result.message, 'green');
+        }
+    }
+  }, [execute, addSystemMessage, effectiveWaveId, derivedWaveStatus, api.sessions.length, activeCount]);
+
+  // Global key handler: Tab to toggle mode, Ctrl+C handling
+  useInput((input, key) => {
+    if (mode === 'command' && key.tab) {
+      setMode('panel');
+      return;
+    }
+    // Ctrl+C in command mode: stop wave or exit
+    if (key.ctrl && input === 'c') {
+      if (derivedWaveStatus === 'running') {
+        execute('stop');
+      } else {
+        exit();
       }
-    },
-  }, keyboardEnabled);
+    }
+  }, { isActive: mode === 'command' });
 
   // Loading state
   if (view === 'loading') {
@@ -144,7 +188,7 @@ export const App: React.FC = () => {
     );
   }
 
-  // Setup wizard — no company found
+  // Setup wizard
   if (view === 'setup') {
     return (
       <Box flexDirection="column" paddingX={1}>
@@ -160,49 +204,17 @@ export const App: React.FC = () => {
         <Text color="cyan" bold>TYCONO TUI</Text>
         <Text color="red">API Error: {api.error}</Text>
         <Text color="gray">Make sure the API server is running on the configured port.</Text>
-        <Text color="gray" dimColor>Press q to quit</Text>
+        <Text color="gray" dimColor>Press Ctrl+C to quit</Text>
       </Box>
     );
   }
 
-  // Help overlay
-  if (dialog === 'help') {
-    return (
-      <Box flexDirection="column">
-        <StatusBar
-          companyName={api.company?.name ?? 'Loading...'}
-          waveId={effectiveWaveId}
-          waveStatus={derivedWaveStatus}
-          activeCount={activeCount}
-          totalCost={0}
-        />
-        <HelpOverlay onClose={() => setDialog('none')} />
-      </Box>
-    );
-  }
-
-  // Wave dialog
-  if (dialog === 'wave') {
-    return (
-      <Box flexDirection="column">
-        <StatusBar
-          companyName={api.company?.name ?? 'Loading...'}
-          waveId={effectiveWaveId}
-          waveStatus={derivedWaveStatus}
-          activeCount={activeCount}
-          totalCost={0}
-        />
-        <WaveDialog
-          onSubmit={handleWaveSubmit}
-          onCancel={() => setDialog('none')}
-        />
-      </Box>
-    );
-  }
+  // Terminal full height
+  const termHeight = process.stdout.rows || 30;
 
   return (
-    <Box flexDirection="column">
-      {/* Status Bar */}
+    <Box flexDirection="column" height={termHeight}>
+      {/* Status Bar — always shown */}
       <StatusBar
         companyName={api.company?.name ?? 'Loading...'}
         waveId={effectiveWaveId}
@@ -213,54 +225,42 @@ export const App: React.FC = () => {
 
       {/* Separator */}
       <Box width="100%">
-        <Text color="gray">{'\u2500'.repeat(70)}</Text>
+        <Text color="gray">{'─'.repeat(process.stdout.columns || 70)}</Text>
       </Box>
 
-      {/* Main content: left (org + sessions) | right (stream) */}
-      <Box flexGrow={1}>
-        {/* Left column */}
-        <Box flexDirection="column" width={28}>
-          <OrgTree
-            tree={orgTree}
-            focused={activePanel === 'org'}
-            selectedIndex={selectedRoleIndex}
-            flatRoles={flatRoleIds}
-          />
-          <Box marginTop={1}>
-            <SessionList
-              sessions={api.sessions}
-              focused={activePanel === 'sessions'}
-              selectedIndex={selectedSessionIndex}
-            />
-          </Box>
-        </Box>
-
-        {/* Vertical separator */}
-        <Box flexDirection="column" marginX={0}>
-          <Text color="gray">{'\u2502\n'.repeat(15)}</Text>
-        </Box>
-
-        {/* Right column: Stream */}
-        <StreamPanel
+      {/* Mode content — fill remaining height */}
+      <Box flexGrow={1} flexDirection="column">
+      {mode === 'command' ? (
+        <CommandMode
           events={sse.events}
           allRoleIds={flatRoleIds}
-          focused={activePanel === 'stream'}
+          systemMessages={systemMessages}
+          onSubmit={handleCommandSubmit}
+        />
+      ) : (
+        <PanelMode
+          tree={orgTree}
+          flatRoles={flatRoleIds}
+          events={sse.events}
+          selectedRoleIndex={selectedRoleIndex}
+          selectedRoleId={selectedRoleId}
           streamStatus={sse.streamStatus}
           waveId={effectiveWaveId}
+          onMove={(dir) => {
+            if (dir === 'up') {
+              setSelectedRoleIndex(Math.max(0, selectedRoleIndex - 1));
+            } else {
+              setSelectedRoleIndex(Math.min(flatRoleIds.length - 1, selectedRoleIndex + 1));
+            }
+          }}
+          onSelect={() => {
+            const roleId = flatRoleIds[selectedRoleIndex] ?? null;
+            setSelectedRoleId(roleId === selectedRoleId ? null : roleId);
+          }}
+          onEscape={() => setMode('command')}
         />
+      )}
       </Box>
-
-      {/* Separator */}
-      <Box width="100%">
-        <Text color="gray">{'\u2500'.repeat(70)}</Text>
-      </Box>
-
-      {/* Command Input */}
-      <CommandInput
-        focused={activePanel === 'command'}
-        waveStatus={derivedWaveStatus}
-        dialog={dialog}
-      />
     </Box>
   );
 };