tycono 0.1.96-beta.1 → 0.1.96-beta.2

package/package.json

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

package/src/tui/api.ts

@@ -150,6 +150,38 @@ export async function fetchActiveWaves(): Promise<{ waves: Array<{ waveId: strin
   return fetchJson('/api/waves/active');
 }
 
+/* ─── Setup API calls ─── */
+
+export interface TeamTemplate {
+  id: string;
+  name: string;
+  description: string;
+  roles: string[];
+}
+
+export interface ScaffoldResult {
+  path: string;
+  rolesCreated: number;
+}
+
+export async function fetchSetupTeams(): Promise<TeamTemplate[]> {
+  return fetchJson<TeamTemplate[]>('/api/setup/teams');
+}
+
+export async function postSetupScaffold(companyName: string, teamId: string): Promise<ScaffoldResult> {
+  return fetchJson<ScaffoldResult>('/api/setup/scaffold', {
+    method: 'POST',
+    body: { companyName, teamId },
+  });
+}
+
+export async function postSetupCodeRoot(codeRoot: string): Promise<{ ok: boolean }> {
+  return fetchJson<{ ok: boolean }>('/api/setup/code-root', {
+    method: 'POST',
+    body: { codeRoot },
+  });
+}
+
 /* ─── SSE stream ─── */
 
 export interface SSEConnection {

package/src/tui/app.tsx

@@ -23,6 +23,7 @@ import { StreamPanel } from './components/StreamPanel';
 import { CommandInput } from './components/CommandInput';
 import { WaveDialog } from './components/WaveDialog';
 import { HelpOverlay } from './components/HelpOverlay';
+import { SetupWizard } from './components/SetupWizard';
 import { useApi } from './hooks/useApi';
 import { useSSE } from './hooks/useSSE';
 import { useKeyboard } from './hooks/useKeyboard';
@@ -31,6 +32,7 @@ import { dispatchWave } from './api';
 
 type Panel = 'org' | 'sessions' | 'stream' | 'command';
 type Dialog = 'none' | 'wave' | 'help';
+type View = 'loading' | 'setup' | 'dashboard';
 
 const PANELS: Panel[] = ['org', 'sessions', 'stream', 'command'];
 
@@ -38,6 +40,21 @@ export const App: React.FC = () => {
   const { exit } = useApp();
   const api = useApi();
 
+  // Determine view: loading → setup (no company) → dashboard
+  const [view, setView] = useState<View>('loading');
+
+  React.useEffect(() => {
+    if (!api.loaded) return;
+    if (view === 'loading') {
+      setView(api.company ? 'dashboard' : 'setup');
+    }
+  }, [api.loaded, api.company, view]);
+
+  const handleSetupComplete = useCallback(() => {
+    api.refresh();
+    setView('dashboard');
+  }, [api]);
+
   const [activePanel, setActivePanel] = useState<Panel>('org');
   const [dialog, setDialog] = useState<Dialog>('none');
   const [selectedRoleIndex, setSelectedRoleIndex] = useState(0);
@@ -117,6 +134,25 @@ export const App: React.FC = () => {
     },
   }, keyboardEnabled);
 
+  // Loading state
+  if (view === 'loading') {
+    return (
+      <Box flexDirection="column" paddingX={1}>
+        <Text color="cyan" bold>TYCONO TUI</Text>
+        <Text color="gray">Connecting to API server...</Text>
+      </Box>
+    );
+  }
+
+  // Setup wizard — no company found
+  if (view === 'setup') {
+    return (
+      <Box flexDirection="column" paddingX={1}>
+        <SetupWizard onComplete={handleSetupComplete} />
+      </Box>
+    );
+  }
+
   // Error display
   if (api.error) {
     return (

package/src/tui/components/SetupWizard.tsx

@@ -0,0 +1,206 @@
+/**
+ * SetupWizard — step-by-step company setup when no company exists
+ *
+ * Steps:
+ *  1. Enter company name
+ *  2. Select team template
+ *  3. Enter code directory
+ *  4. Scaffold via API
+ */
+
+import React, { useState, useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import SelectInput from 'ink-select-input';
+import {
+  fetchSetupTeams,
+  postSetupScaffold,
+  postSetupCodeRoot,
+  type TeamTemplate,
+} from '../api';
+
+type Step = 'name' | 'team' | 'codeDir' | 'creating' | 'done' | 'error';
+
+interface SetupWizardProps {
+  onComplete(): void;
+}
+
+export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete }) => {
+  const [step, setStep] = useState<Step>('name');
+  const [companyName, setCompanyName] = useState('');
+  const [teams, setTeams] = useState<TeamTemplate[]>([]);
+  const [selectedTeam, setSelectedTeam] = useState<TeamTemplate | null>(null);
+  const [codeDir, setCodeDir] = useState('./code');
+  const [resultPath, setResultPath] = useState('');
+  const [resultRoles, setResultRoles] = useState(0);
+  const [errorMsg, setErrorMsg] = useState('');
+
+  // Load team templates on mount
+  useEffect(() => {
+    fetchSetupTeams()
+      .then(setTeams)
+      .catch((err) => {
+        setErrorMsg(`Failed to load team templates: ${err.message}`);
+        setStep('error');
+      });
+  }, []);
+
+  // Esc to cancel (only during input steps)
+  useInput((_input, key) => {
+    if (key.escape && (step === 'name' || step === 'team' || step === 'codeDir')) {
+      process.exit(0);
+    }
+  });
+
+  // Auto-transition after done
+  useEffect(() => {
+    if (step === 'done') {
+      const timer = setTimeout(onComplete, 2000);
+      return () => clearTimeout(timer);
+    }
+  }, [step, onComplete]);
+
+  /* ─── Step handlers ─── */
+
+  const handleNameSubmit = (value: string) => {
+    const trimmed = value.trim();
+    if (!trimmed) return;
+    setCompanyName(trimmed);
+    setStep('team');
+  };
+
+  const handleTeamSelect = (item: { value: string }) => {
+    const team = teams.find((t) => t.id === item.value) ?? null;
+    setSelectedTeam(team);
+    setStep('codeDir');
+  };
+
+  const handleCodeDirSubmit = async (value: string) => {
+    const dir = value.trim() || './code';
+    setCodeDir(dir);
+    setStep('creating');
+
+    try {
+      const result = await postSetupScaffold(companyName, selectedTeam?.id ?? 'minimal');
+      setResultPath(result.path ?? '');
+      setResultRoles(result.rolesCreated ?? 0);
+
+      await postSetupCodeRoot(dir);
+      setStep('done');
+    } catch (err) {
+      setErrorMsg(err instanceof Error ? err.message : 'Unknown error');
+      setStep('error');
+    }
+  };
+
+  /* ─── Render ─── */
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor="cyan"
+      paddingX={2}
+      paddingY={1}
+      width={56}
+    >
+      <Text bold color="cyan">{'\u2500\u2500\u2500'} TYCONO Setup {'\u2500\u2500\u2500'}</Text>
+
+      <Box marginTop={1}>
+        <Text color="gray">No company found. Let's set one up.</Text>
+      </Box>
+
+      {/* Step 1: Company Name */}
+      {step === 'name' && (
+        <Box flexDirection="column" marginTop={1}>
+          <Text bold>Step 1/3: Company Name</Text>
+          <Box marginTop={1}>
+            <Text color="green">&gt; </Text>
+            <TextInput
+              value={companyName}
+              onChange={setCompanyName}
+              onSubmit={handleNameSubmit}
+              placeholder="Enter your company name..."
+            />
+          </Box>
+          <Box marginTop={1}>
+            <Text color="gray" dimColor>[Enter: Next]  [Esc: Cancel]</Text>
+          </Box>
+        </Box>
+      )}
+
+      {/* Step 2: Team Template */}
+      {step === 'team' && (
+        <Box flexDirection="column" marginTop={1}>
+          <Text bold>Step 2/3: Team Template</Text>
+          <Box marginTop={1} flexDirection="column">
+            {teams.length > 0 ? (
+              <SelectInput
+                items={teams.map((t) => ({
+                  label: `${t.id}  ${t.description || t.roles.join(', ')}`,
+                  value: t.id,
+                }))}
+                onSelect={handleTeamSelect}
+              />
+            ) : (
+              <Text color="gray">Loading templates...</Text>
+            )}
+          </Box>
+          <Box marginTop={1}>
+            <Text color="gray" dimColor>[Enter: Select]  [Esc: Cancel]</Text>
+          </Box>
+        </Box>
+      )}
+
+      {/* Step 3: Code Directory */}
+      {step === 'codeDir' && (
+        <Box flexDirection="column" marginTop={1}>
+          <Text bold>Step 3/3: Code Directory</Text>
+          <Box marginTop={1}>
+            <Text color="green">&gt; </Text>
+            <TextInput
+              value={codeDir}
+              onChange={setCodeDir}
+              onSubmit={handleCodeDirSubmit}
+              placeholder="./code"
+            />
+          </Box>
+          <Box marginTop={1}>
+            <Text color="gray" dimColor>[Enter: Create]  [Esc: Cancel]</Text>
+          </Box>
+        </Box>
+      )}
+
+      {/* Creating... */}
+      {step === 'creating' && (
+        <Box flexDirection="column" marginTop={1}>
+          <Text color="yellow">Creating company...</Text>
+        </Box>
+      )}
+
+      {/* Done */}
+      {step === 'done' && (
+        <Box flexDirection="column" marginTop={1}>
+          <Text color="green">{'\u2705'} Company created!</Text>
+          {resultPath && (
+            <Text color="white">{'\uD83D\uDCC1'} {resultPath}</Text>
+          )}
+          <Text color="white">
+            {'\uD83D\uDC65'} {resultRoles} roles ({selectedTeam?.id ?? 'minimal'})
+          </Text>
+          <Box marginTop={1}>
+            <Text color="gray">Starting dashboard...</Text>
+          </Box>
+        </Box>
+      )}
+
+      {/* Error */}
+      {step === 'error' && (
+        <Box flexDirection="column" marginTop={1}>
+          <Text color="red">Error: {errorMsg}</Text>
+          <Text color="gray" dimColor>Press Ctrl+C to exit</Text>
+        </Box>
+      )}
+    </Box>
+  );
+};

package/src/tui/hooks/useApi.ts

@@ -21,6 +21,7 @@ export interface ApiState {
   execStatus: ExecStatus | null;
   activeWaveId: string | null;
   error: string | null;
+  loaded: boolean;
   refresh(): void;
 }
 
@@ -30,6 +31,7 @@ export function useApi(): ApiState {
   const [execStatus, setExecStatus] = useState<ExecStatus | null>(null);
   const [activeWaveId, setActiveWaveId] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [loaded, setLoaded] = useState(false);
   const mountedRef = useRef(true);
 
   const refresh = useCallback(async () => {
@@ -53,6 +55,7 @@ export function useApi(): ApiState {
       }
 
       setError(null);
+      setLoaded(true);
     } catch (err) {
       if (mountedRef.current) {
         setError(err instanceof Error ? err.message : 'API error');
@@ -70,5 +73,5 @@ export function useApi(): ApiState {
     };
   }, [refresh]);
 
-  return { company, sessions, execStatus, activeWaveId, error, refresh };
+  return { company, sessions, execStatus, activeWaveId, error, loaded, refresh };
 }