@crystalplatforms/adm 0.2.3

package/src/tui/app.js

@@ -0,0 +1,442 @@
+const React = require('react');
+const { spawn } = require('child_process');
+const { createAppState } = require('./app-state');
+const { createSetupScreen } = require('./components/SetupScreen');
+const { resolveTheme } = require('../ui/theme');
+const { readConfig } = require('../config');
+
+function createApp(ink) {
+  const { Box, Text, useInput, useApp } = ink;
+  const SetupScreen = createSetupScreen(ink);
+
+  return function App() {
+    const stateRef = React.useRef(createAppState());
+    _lastAppState = stateRef.current;
+    const [messages, setMessages] = React.useState(stateRef.current.messages);
+    const [input, setInput] = React.useState('');
+    const [showSetup, setShowSetup] = React.useState(false);
+    const [spinnerFrame, setSpinnerFrame] = React.useState(0);
+    const { exit } = useApp();
+
+    const rerender = () => {
+      setMessages([...stateRef.current.messages]);
+      setShowSetup(stateRef.current.showSetup);
+    };
+
+    React.useEffect(() => {
+      if (!stateRef.current.aiLoading && !stateRef.current.upgradeLoading) return;
+      const id = setInterval(() => setSpinnerFrame(f => f + 1), 50);
+      return () => clearInterval(id);
+    });
+
+    useInput(async (ch, key) => {
+      // When setup screen is active, delegate input handling
+      if (stateRef.current.showSetup) {
+        if (key.escape) {
+          stateRef.current.exitSetup();
+          rerender();
+        }
+        return;
+      }
+
+      // Connect mode — platform selection
+      if (stateRef.current.connectStep === 'select') {
+        if (key.upArrow) {
+          stateRef.current.moveConnectCursor(-1);
+          rerender();
+          return;
+        }
+        if (key.downArrow) {
+          stateRef.current.moveConnectCursor(1);
+          rerender();
+          return;
+        }
+        if (key.return) {
+          stateRef.current.selectConnectPlatform();
+          setInput('');
+          rerender();
+          return;
+        }
+        if (key.escape) {
+          stateRef.current.cancelConnect();
+          rerender();
+          return;
+        }
+        return;
+      }
+
+      // Connect mode — token input
+      if (stateRef.current.connectStep === 'token') {
+        if (key.escape) {
+          stateRef.current.cancelConnect();
+          setInput('');
+          rerender();
+          return;
+        }
+        if (key.return) {
+          const token = input.trim();
+          if (token) {
+            await stateRef.current.submitConnectToken(token);
+          }
+          setInput('');
+          rerender();
+          return;
+        }
+        if (key.backspace || key.delete) {
+          setInput(prev => prev.slice(0, -1));
+          return;
+        }
+        if (ch && !key.ctrl && !key.meta) {
+          setInput(prev => prev + ch);
+        }
+        return;
+      }
+
+      // GitHub hub — action selection
+      if (stateRef.current.githubStep === 'select') {
+        if (key.upArrow) {
+          stateRef.current.moveGithubCursor(-1);
+          rerender();
+          return;
+        }
+        if (key.downArrow) {
+          stateRef.current.moveGithubCursor(1);
+          rerender();
+          return;
+        }
+        if (key.return) {
+          await stateRef.current.selectGithubItem();
+          setInput('');
+          rerender();
+          return;
+        }
+        if (key.escape) {
+          stateRef.current.cancelGithub();
+          rerender();
+          return;
+        }
+        return;
+      }
+
+      // Model token input
+      if (stateRef.current.modelStep === 'token') {
+        if (key.escape) {
+          stateRef.current.cancelModelToken();
+          setInput('');
+          rerender();
+          return;
+        }
+        if (key.return) {
+          const token = input.trim();
+          if (token) {
+            await stateRef.current.submitModelToken(token);
+          }
+          setInput('');
+          rerender();
+          return;
+        }
+        if (key.backspace || key.delete) {
+          setInput(prev => prev.slice(0, -1));
+          return;
+        }
+        if (ch && !key.ctrl && !key.meta) {
+          setInput(prev => prev + ch);
+        }
+        return;
+      }
+
+      // Confirmation prompt — y/N
+      if (stateRef.current.confirmStep) {
+        if (ch === 'y' || ch === 'Y') {
+          const result = await stateRef.current.confirmAction();
+          rerender();
+          if (result.shouldExit) {
+            exit();
+          }
+          if (result.shouldRestart) {
+            spawn('adm', [], { detached: true, stdio: 'ignore' }).unref();
+            exit();
+          }
+          return;
+        }
+        // Any other key (including n, Enter, Esc) cancels
+        stateRef.current.confirmCancel();
+        rerender();
+        return;
+      }
+
+      const ac = stateRef.current.autocomplete;
+
+      // Arrow keys — navigate autocomplete when visible
+      if (key.upArrow && ac.visible) {
+        stateRef.current.moveAutocompleteUp();
+        rerender();
+        return;
+      }
+      if (key.downArrow && ac.visible) {
+        stateRef.current.moveAutocompleteDown();
+        rerender();
+        return;
+      }
+
+      // Esc — close autocomplete if visible, else exit AI mode
+      if (key.escape) {
+        if (ac.visible) {
+          stateRef.current.closeAutocomplete();
+          rerender();
+          return;
+        }
+        stateRef.current.exitAI();
+        rerender();
+        return;
+      }
+
+      if (key.ctrl && ch === 'c') {
+        exit();
+        return;
+      }
+
+      // Tab — fill prompt with selected command
+      if (key.tab) {
+        if (ac.visible && ac.items.length > 0) {
+          const selected = stateRef.current.selectAutocompleteActive();
+          if (selected) {
+            setInput(selected + ' ');
+            stateRef.current.closeAutocomplete();
+            rerender();
+          }
+        }
+        return;
+      }
+
+      if (key.return) {
+        // If autocomplete is visible, execute selected command immediately
+        if (ac.visible && ac.items.length > 0) {
+          const selected = stateRef.current.selectAutocompleteActive();
+          if (selected) {
+            const cmd = selected.trim();
+            stateRef.current.messages.push({ text: cmd, type: 'user' });
+            stateRef.current.closeAutocomplete();
+            setInput('');
+            rerender();
+            const result = await stateRef.current.processInput(cmd);
+            rerender();
+            if (result.shouldExit) {
+              exit();
+            }
+          }
+          return;
+        }
+        const trimmed = input.trim();
+        if (trimmed === '') return;
+        stateRef.current.messages.push({ text: trimmed, type: 'user' });
+        setInput('');
+        // Pre-render so loading spinners appear immediately
+        if (stateRef.current.aiMode || trimmed === 'upgrade' || trimmed === '/upgrade') {
+          rerender();
+        }
+        const result = await stateRef.current.processInput(trimmed);
+        rerender();
+        if (result.shouldExit) {
+          exit();
+        }
+        return;
+      }
+
+      if (key.backspace || key.delete) {
+        const next = input.slice(0, -1);
+        setInput(next);
+        if (!next.startsWith('/')) {
+          stateRef.current.closeAutocomplete();
+        } else {
+          stateRef.current.updateAutocomplete(next);
+        }
+        rerender();
+        return;
+      }
+
+      if (ch && !key.ctrl && !key.meta) {
+        const next = input + ch;
+        setInput(next);
+        if (!stateRef.current.aiMode && next.startsWith('/')) {
+          stateRef.current.updateAutocomplete(next);
+          rerender();
+        }
+      }
+    });
+
+    const bar = stateRef.current.getStatusBar();
+    const aiMode = bar.aiMode;
+    const providerLabel = bar.activeProvider ? ` (${bar.activeProvider})` : '';
+
+    // Resolve theme colors from current theme name
+    const themeName = stateRef.current.themeState.current;
+    let tc;
+    try {
+      tc = resolveTheme({ theme: themeName }).colors;
+    } catch {
+      tc = resolveTheme({}).colors;
+    }
+
+    // When setup is active, render SetupScreen instead of main view
+    if (stateRef.current.showSetup) {
+      return React.createElement(
+        Box,
+        { flexDirection: 'column' },
+        // StatusBar
+        React.createElement(
+          Box,
+          { borderStyle: 'single', borderColor: tc.muted, paddingX: 1 },
+          React.createElement(Text, { color: tc.primary }, bar.themeName),
+          React.createElement(Text, { color: tc.muted }, ' │ '),
+          React.createElement(Text, { color: tc.accent }, 'Setup Wizard'),
+          React.createElement(Text, { color: tc.muted }, ' │ '),
+          React.createElement(Text, { color: tc.warning }, bar.version),
+        ),
+        React.createElement(SetupScreen, {
+          onExit: () => {
+            stateRef.current.exitSetup();
+            stateRef.current.markSetupDone();
+            rerender();
+          },
+          dryRun: stateRef.current.setupDryRun,
+          platform: process.platform,
+        }),
+      );
+    }
+
+    return React.createElement(
+      Box,
+      { flexDirection: 'column' },
+      // StatusBar
+      React.createElement(
+        Box,
+        { borderStyle: 'single', borderColor: tc.muted, paddingX: 1 },
+        React.createElement(Text, { color: tc.primary }, bar.themeName),
+        React.createElement(Text, { color: tc.muted }, ' │ '),
+        React.createElement(Text, { color: aiMode ? tc.success : tc.muted }, `AI: ${aiMode ? 'ON' : 'off'}${providerLabel}`),
+        React.createElement(Text, { color: tc.muted }, ' │ '),
+        React.createElement(Text, { color: tc.warning }, bar.version),
+      ),
+      // Messages
+      React.createElement(
+        Box,
+        { flexDirection: 'column', flexGrow: 1, paddingX: 1 },
+        ...messages.map((msg, i) => {
+          if (msg.type === 'user') {
+            return React.createElement(
+              Box,
+              { key: i, marginTop: 0, marginBottom: 0 },
+              React.createElement(Text, { wrap: 'wrap', backgroundColor: tc.muted, color: tc.text }, ` ${msg.text} `),
+            );
+          }
+          return React.createElement(Text, { key: i, wrap: 'wrap', color: msg.type === 'ai-error' ? tc.error || tc.text : tc.text }, msg.text);
+        }),
+      ),
+      // AI responding indicator
+      stateRef.current.aiLoading && React.createElement(
+        Box,
+        { paddingX: 1 },
+        React.createElement(Text, { color: tc.accent }, `${'◢◣◤◥'[spinnerFrame % 4]} Responding...`),
+      ),
+      // Connect selection list
+      stateRef.current.connectStep === 'select' && React.createElement(
+        Box,
+        { flexDirection: 'column', paddingX: 1 },
+        React.createElement(
+          Box,
+          null,
+          React.createElement(Text, { color: stateRef.current.connectCursor === 0 ? tc.accent : tc.muted },
+            stateRef.current.connectCursor === 0 ? '  ● GitHub' : '  ○ GitHub'),
+        ),
+        React.createElement(
+          Box,
+          null,
+          React.createElement(Text, { color: stateRef.current.connectCursor === 1 ? tc.accent : tc.muted },
+            stateRef.current.connectCursor === 1 ? '  ● GitLab' : '  ○ GitLab'),
+        ),
+        React.createElement(Text, { dimColor: true, color: tc.muted }, '  ↑↓ select · Enter confirm · ESC cancel'),
+      ),
+      // GitHub hub selection list
+      stateRef.current.githubStep === 'select' && React.createElement(
+        Box,
+        { flexDirection: 'column', paddingX: 1 },
+        ...['Status', 'PRs', 'Issues', 'Commits'].map((label, i) =>
+          React.createElement(
+            Box,
+            { key: i },
+            React.createElement(Text, { color: stateRef.current.githubCursor === i ? tc.accent : tc.muted },
+              stateRef.current.githubCursor === i ? `  ● ${label}` : `  ○ ${label}`),
+          )
+        ),
+        React.createElement(Text, { dimColor: true, color: tc.muted }, '  ↑↓ select · Enter confirm · ESC cancel'),
+      ),
+      // Upgrade loading spinner
+      stateRef.current.upgradeLoading && React.createElement(
+        Box,
+        { paddingX: 1 },
+        React.createElement(Text, { color: tc.accent }, `${'◢◣◤◥'[spinnerFrame % 4]} Checking for updates...`),
+      ),
+      // Confirmation prompt
+      stateRef.current.confirmStep && React.createElement(
+        Box,
+        { paddingX: 1 },
+        React.createElement(Text, { color: tc.warning }, `${stateRef.current.confirmStep.message} [y/N] `),
+        React.createElement(Text, { dimColor: true }, '█'),
+      ),
+      // Input bar — hidden during confirmation prompt
+      !stateRef.current.confirmStep && (() => {
+        const connectToken = stateRef.current.connectStep === 'token';
+        const modelToken = stateRef.current.modelStep === 'token';
+        const masked = connectToken || modelToken;
+        const label = aiMode ? 'AI> ' : connectToken ? 'Token: ' : modelToken ? 'API Key: ' : '> ';
+        const labelColor = aiMode ? tc.secondary : (connectToken || modelToken) ? tc.warning : tc.success;
+        const borderColor = aiMode ? tc.secondary : (connectToken || modelToken) ? tc.warning : tc.muted;
+        const textColor = aiMode ? tc.secondary : tc.text;
+        const placeholder = (!masked && !aiMode) ? stateRef.current.getPlaceholder(input) : null;
+        return React.createElement(
+          Box,
+          { borderStyle: 'single', borderColor, paddingX: 1 },
+          React.createElement(Text, { color: labelColor }, label),
+          React.createElement(Text, { color: textColor }, masked ? '*'.repeat(input.length) : input),
+          React.createElement(Text, { dimColor: true }, '█'),
+          placeholder && React.createElement(Text, { dimColor: true, color: tc.muted }, placeholder),
+        );
+      })(),
+      // Autocomplete list — below input bar
+      stateRef.current.autocomplete.visible && stateRef.current.autocomplete.items.length > 0 && React.createElement(
+        Box,
+        { flexDirection: 'column', paddingX: 1 },
+        ...stateRef.current.autocomplete.items.map((item, i) => {
+          const active = i === stateRef.current.autocomplete.selectedIndex;
+          return React.createElement(
+            Box,
+            { key: item.name },
+            React.createElement(Text, { bold: true, color: active ? tc.accent : tc.muted },
+              active ? '  ● /' + item.name : '  ○ /' + item.name),
+            React.createElement(Text, { color: active ? tc.text : tc.muted },
+              '  ' + item.description),
+          );
+        }),
+        React.createElement(Text, { dimColor: true, color: tc.muted }, '  ↑↓ navigate · Tab select · Enter run · ESC close'),
+      ),
+    );
+  };
+}
+
+let _lastAppState = null;
+
+async function boot() {
+  const ink = await import('ink');
+  const App = createApp(ink);
+  const { render } = ink;
+  const { waitUntilExit } = render(React.createElement(App));
+  await waitUntilExit();
+
+  // After TUI exits, show PATH refresh hint if setup installed tools
+  if (_lastAppState && _lastAppState.setupInstalled) {
+    console.log('\n  Tools installed! Run: source ~/.zshrc\n');
+  }
+}
+
+module.exports = { createApp, boot };

package/src/tui/autocomplete.js

@@ -0,0 +1,57 @@
+function createAutocomplete(getSuggestions, getCommandInfo) {
+  return {
+    visible: false,
+    items: [],
+    selectedIndex: 0,
+    _getSuggestions: getSuggestions,
+    _getCommandInfo: getCommandInfo,
+  };
+}
+
+function updateAutocomplete(state, input) {
+  if (!input.startsWith('/')) {
+    state.visible = false;
+    state.items = [];
+    state.selectedIndex = 0;
+    return;
+  }
+
+  const partial = input.slice(1);
+  const names = state._getSuggestions(partial);
+  const items = names.map(name => state._getCommandInfo(name)).filter(Boolean);
+  state.visible = true;
+  state.items = items;
+  if (state.selectedIndex >= items.length) {
+    state.selectedIndex = Math.max(0, items.length - 1);
+  }
+}
+
+function moveUp(state) {
+  if (!state.visible || state.items.length === 0) return;
+  state.selectedIndex = (state.selectedIndex - 1 + state.items.length) % state.items.length;
+}
+
+function moveDown(state) {
+  if (!state.visible || state.items.length === 0) return;
+  state.selectedIndex = (state.selectedIndex + 1) % state.items.length;
+}
+
+function selectActive(state) {
+  if (!state.visible || state.items.length === 0) return null;
+  return '/' + state.items[state.selectedIndex].name;
+}
+
+function closeAutocomplete(state) {
+  state.visible = false;
+  state.items = [];
+  state.selectedIndex = 0;
+}
+
+module.exports = {
+  createAutocomplete,
+  updateAutocomplete,
+  moveUp,
+  moveDown,
+  selectActive,
+  closeAutocomplete,
+};