tycono 0.1.96-beta.0 → 0.1.96-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tycono",
-  "version": "0.1.96-beta.0",
+  "version": "0.1.96-beta.1",
   "description": "Build an AI company. Watch them work.",
   "type": "module",
   "bin": {
@@ -11,6 +11,7 @@
     "src/api/src/",
     "src/api/package.json",
     "src/shared/",
+    "src/tui/",
     "src/web/dist/",
     "templates/"
   ],

package/src/tui/api.ts

@@ -0,0 +1,241 @@
+/**
+ * TUI API Client — HTTP + SSE for communicating with Tycono API server
+ */
+
+import http from 'node:http';
+
+let BASE_URL = 'http://localhost:3000';
+
+export function setBaseUrl(url: string): void {
+  BASE_URL = url.replace(/\/$/, '');
+}
+
+export function getBaseUrl(): string {
+  return BASE_URL;
+}
+
+/* ─── HTTP helpers ─── */
+
+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;
+
+  return new Promise((resolve, reject) => {
+    const urlObj = new URL(url);
+    const req = http.request(
+      {
+        hostname: urlObj.hostname,
+        port: urlObj.port,
+        path: urlObj.pathname + urlObj.search,
+        method,
+        headers: {
+          'Content-Type': 'application/json',
+          ...(bodyStr ? { 'Content-Length': Buffer.byteLength(bodyStr) } : {}),
+        },
+      },
+      (res) => {
+        let data = '';
+        res.on('data', (chunk) => { data += chunk; });
+        res.on('end', () => {
+          try {
+            resolve(JSON.parse(data) as T);
+          } catch {
+            reject(new Error(`Invalid JSON from ${path}: ${data.slice(0, 200)}`));
+          }
+        });
+      },
+    );
+    req.on('error', reject);
+    if (bodyStr) req.write(bodyStr);
+    req.end();
+  });
+}
+
+/* ─── API Types ─── */
+
+export interface RoleInfo {
+  id: string;
+  name: string;
+  level: string;
+  reportsTo: string;
+  status: string;
+}
+
+export interface CompanyInfo {
+  name: string;
+  domain: string;
+  founded: string;
+  mission: string;
+  roles: RoleInfo[];
+}
+
+export interface SessionInfo {
+  id: string;
+  roleId: string;
+  title: string;
+  mode: string;
+  status: string;
+  source: string;
+  waveId?: string;
+  createdAt: string;
+}
+
+export interface ExecStatus {
+  statuses: Record<string, string>;
+  activeExecutions: Array<{
+    id: string;
+    roleId: string;
+    task: string;
+    startedAt: string;
+  }>;
+}
+
+export interface WaveResponse {
+  waveId: string;
+  supervisorSessionId?: string;
+  mode: string;
+  directive: string;
+}
+
+export interface SSEEvent {
+  seq: number;
+  ts: string;
+  type: string;
+  roleId: string;
+  data: Record<string, unknown>;
+}
+
+/* ─── API calls ─── */
+
+export async function fetchCompany(): Promise<CompanyInfo> {
+  return fetchJson<CompanyInfo>('/api/company');
+}
+
+export async function fetchRoles(): Promise<RoleInfo[]> {
+  return fetchJson<RoleInfo[]>('/api/roles');
+}
+
+export async function fetchSessions(): Promise<SessionInfo[]> {
+  return fetchJson<SessionInfo[]>('/api/sessions');
+}
+
+export async function fetchExecStatus(): Promise<ExecStatus> {
+  return fetchJson<ExecStatus>('/api/exec/status');
+}
+
+export async function dispatchWave(directive: string, options?: {
+  targetRoles?: string[];
+  continuous?: boolean;
+}): Promise<WaveResponse> {
+  return fetchJson<WaveResponse>('/api/jobs', {
+    method: 'POST',
+    body: {
+      type: 'wave',
+      directive,
+      targetRoles: options?.targetRoles,
+      continuous: options?.continuous ?? false,
+    },
+  });
+}
+
+export async function sendDirective(waveId: string, text: string): Promise<{ ok: boolean }> {
+  return fetchJson<{ ok: boolean }>(`/api/waves/${waveId}/directive`, {
+    method: 'POST',
+    body: { text },
+  });
+}
+
+export async function fetchActiveWaves(): Promise<{ waves: Array<{ waveId: string; sessionIds: string[] }> }> {
+  return fetchJson('/api/waves/active');
+}
+
+/* ─── SSE stream ─── */
+
+export interface SSEConnection {
+  close(): void;
+}
+
+export function subscribeToWaveStream(
+  waveId: string,
+  onEvent: (event: SSEEvent) => void,
+  onEnd?: (reason: string) => void,
+  fromSeq?: number,
+): SSEConnection {
+  const url = new URL(`${BASE_URL}/api/waves/${waveId}/stream`);
+  if (fromSeq) url.searchParams.set('from', String(fromSeq));
+
+  let destroyed = false;
+  let req: http.ClientRequest | null = null;
+
+  const connect = () => {
+    req = http.get(url.toString(), (res) => {
+      let buffer = '';
+
+      res.on('data', (chunk: Buffer) => {
+        if (destroyed) return;
+        buffer += chunk.toString();
+
+        // Parse SSE format
+        const parts = buffer.split('\n\n');
+        buffer = parts.pop() ?? '';
+
+        for (const part of parts) {
+          if (!part.trim() || part.startsWith(':')) continue;
+
+          const lines = part.split('\n');
+          let eventType = '';
+          let data = '';
+
+          for (const line of lines) {
+            if (line.startsWith('event: ')) {
+              eventType = line.slice(7);
+            } else if (line.startsWith('data: ')) {
+              data = line.slice(6);
+            }
+          }
+
+          if (eventType === 'activity' && data) {
+            try {
+              onEvent(JSON.parse(data) as SSEEvent);
+            } catch { /* ignore parse errors */ }
+          } else if (eventType === 'stream:end' && data) {
+            try {
+              const parsed = JSON.parse(data);
+              onEnd?.(parsed.reason ?? 'unknown');
+            } catch {
+              onEnd?.('unknown');
+            }
+          }
+        }
+      });
+
+      res.on('end', () => {
+        if (!destroyed) {
+          onEnd?.('disconnected');
+        }
+      });
+
+      res.on('error', () => {
+        if (!destroyed) {
+          onEnd?.('error');
+        }
+      });
+    });
+
+    req.on('error', () => {
+      if (!destroyed) {
+        onEnd?.('error');
+      }
+    });
+  };
+
+  connect();
+
+  return {
+    close() {
+      destroyed = true;
+      req?.destroy();
+    },
+  };
+}

package/src/tui/app.tsx

@@ -0,0 +1,230 @@
+/**
+ * TUI App — main layout with 4 panels
+ *
+ * Layout:
+ * ┌─────────────────────────────────────────┐
+ * │ StatusBar                               │
+ * ├──────────────┬──────────────────────────┤
+ * │ OrgTree      │ StreamPanel              │
+ * │              │                          │
+ * ├──────────────┤                          │
+ * │ SessionList  │                          │
+ * ├──────────────┴──────────────────────────┤
+ * │ CommandInput                            │
+ * └─────────────────────────────────────────┘
+ */
+
+import React, { useState, useCallback, useMemo } from 'react';
+import { Box, Text, useApp } 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 { useApi } from './hooks/useApi';
+import { useSSE } from './hooks/useSSE';
+import { useKeyboard } from './hooks/useKeyboard';
+import { buildOrgTree } from './store';
+import { dispatchWave } from './api';
+
+type Panel = 'org' | 'sessions' | 'stream' | 'command';
+type Dialog = 'none' | 'wave' | 'help';
+
+const PANELS: Panel[] = ['org', 'sessions', 'stream', 'command'];
+
+export const App: React.FC = () => {
+  const { exit } = useApp();
+  const api = useApi();
+
+  const [activePanel, setActivePanel] = useState<Panel>('org');
+  const [dialog, setDialog] = useState<Dialog>('none');
+  const [selectedRoleIndex, setSelectedRoleIndex] = useState(0);
+  const [selectedSessionIndex, setSelectedSessionIndex] = useState(0);
+  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
+  const effectiveWaveId = waveId ?? api.activeWaveId;
+
+  const sse = useSSE(effectiveWaveId);
+
+  // Build org tree
+  const roles = api.company?.roles ?? [];
+  const flatRoleIds = useMemo(() => roles.map(r => r.id), [roles]);
+  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;
+
+  // Determine wave status from SSE
+  const derivedWaveStatus = useMemo(() => {
+    if (sse.streamStatus === 'streaming') return 'running' as const;
+    if (sse.streamStatus === 'done') return 'done' as const;
+    if (waveStatus === 'running' && activeCount > 0) return 'running' as const;
+    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);
+      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
+    },
+    onEscape: () => {
+      if (dialog !== 'none') {
+        setDialog('none');
+      }
+    },
+  }, keyboardEnabled);
+
+  // Error display
+  if (api.error) {
+    return (
+      <Box flexDirection="column" paddingX={1}>
+        <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>
+      </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>
+    );
+  }
+
+  return (
+    <Box flexDirection="column">
+      {/* Status Bar */}
+      <StatusBar
+        companyName={api.company?.name ?? 'Loading...'}
+        waveId={effectiveWaveId}
+        waveStatus={derivedWaveStatus}
+        activeCount={activeCount}
+        totalCost={0}
+      />
+
+      {/* Separator */}
+      <Box width="100%">
+        <Text color="gray">{'\u2500'.repeat(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
+          events={sse.events}
+          allRoleIds={flatRoleIds}
+          focused={activePanel === 'stream'}
+          streamStatus={sse.streamStatus}
+          waveId={effectiveWaveId}
+        />
+      </Box>
+
+      {/* Separator */}
+      <Box width="100%">
+        <Text color="gray">{'\u2500'.repeat(70)}</Text>
+      </Box>
+
+      {/* Command Input */}
+      <CommandInput
+        focused={activePanel === 'command'}
+        waveStatus={derivedWaveStatus}
+        dialog={dialog}
+      />
+    </Box>
+  );
+};

package/src/tui/components/CommandInput.tsx

@@ -0,0 +1,32 @@
+/**
+ * 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

@@ -0,0 +1,51 @@
+/**
+ * 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/OrgTree.tsx

@@ -0,0 +1,119 @@
+/**
+ * OrgTree — left panel showing organization hierarchy with real-time status
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import type { OrgNode } from '../store';
+import { statusIcon } from '../theme';
+
+interface OrgTreeProps {
+  tree: OrgNode[];
+  focused: boolean;
+  selectedIndex: number;
+  flatRoles: string[];
+}
+
+function statusColor(status: string): string {
+  switch (status) {
+    case 'working':
+    case 'streaming':
+      return 'green';
+    case 'done':
+      return 'gray';
+    case 'error':
+      return 'red';
+    case 'awaiting_input':
+      return 'yellow';
+    default:
+      return 'gray';
+  }
+}
+
+interface FlatEntry {
+  roleId: string;
+  name: string;
+  level: string;
+  status: string;
+  prefix: string;
+}
+
+function flattenTree(nodes: OrgNode[], prefix: string = '', isLast: boolean[] = []): FlatEntry[] {
+  const result: FlatEntry[] = [];
+
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    const last = i === nodes.length - 1;
+
+    let linePrefix = '';
+    for (let j = 0; j < isLast.length; j++) {
+      linePrefix += isLast[j] ? '   ' : '\u2502  ';
+    }
+    linePrefix += isLast.length > 0 || i > 0 || nodes.length > 1
+      ? (last ? '\u2514\u2500 ' : '\u251C\u2500 ')
+      : '';
+
+    result.push({
+      roleId: node.role.id,
+      name: node.role.name || node.role.id,
+      level: node.role.level,
+      status: node.status,
+      prefix: linePrefix,
+    });
+
+    if (node.children.length > 0) {
+      result.push(...flattenTree(node.children, '', [...isLast, last]));
+    }
+  }
+
+  return result;
+}
+
+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>
+      <Box marginTop={1}>
+        <Text color="yellow" bold>{'\uD83D\uDC51'} CEO</Text>
+      </Box>
+      {entries.map((entry, i) => {
+        const isSelected = focused && flatRoles[selectedIndex] === entry.roleId;
+        const icon = statusIcon(entry.status);
+        const color = statusColor(entry.status);
+
+        return (
+          <Box key={entry.roleId + '-' + i}>
+            <Text color="gray">{entry.prefix}</Text>
+            <Text
+              color={color}
+              bold={entry.status === 'working'}
+            >
+              {icon}
+            </Text>
+            <Text> </Text>
+            <Text
+              color={isSelected ? 'cyan' : 'white'}
+              bold={isSelected}
+              inverse={isSelected}
+            >
+              {entry.level === 'c-level' ? entry.name : entry.name}
+            </Text>
+            <Text color="gray" dimColor> {entry.roleId}</Text>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};