@vectorasystems/cli 0.1.0

package/src/tui/App.js

@@ -0,0 +1,73 @@
+// TUI root — Ink application
+import React, { useState, useEffect } from 'react';
+import { Box, Text, useApp, useInput } from 'ink';
+import { Header } from './components/Header.js';
+import { ProjectList } from './components/ProjectList.js';
+import { PhaseTimeline } from './components/PhaseTimeline.js';
+import { StatusBar } from './components/StatusBar.js';
+import { useProject } from './hooks/useProject.js';
+import { checkHealth, getMe } from '../lib/api-client.js';
+import { getCredentials } from '../lib/auth-store.js';
+
+export default function App() {
+  const { exit } = useApp();
+  const [connected, setConnected] = useState(true);
+  const [orgName, setOrgName] = useState(null);
+  const [view, setView] = useState('projects'); // 'projects' | 'detail'
+  const { project, phases, artifacts, loading, refresh, projectId } = useProject();
+
+  // Check connectivity and auth on mount
+  useEffect(() => {
+    checkHealth().then((h) => setConnected(h.status !== 'unreachable'));
+    getCredentials().then(async (creds) => {
+      if (creds?.apiToken) {
+        try {
+          const me = await getMe(creds.apiToken);
+          setOrgName(me.orgName);
+        } catch { /* ignore */ }
+      }
+    });
+  }, []);
+
+  // Keyboard shortcuts
+  useInput((input, key) => {
+    if (input === 'q' || (key.ctrl && input === 'c')) {
+      exit();
+    }
+    if (input === 'r') {
+      refresh();
+    }
+    if (input === 'p') {
+      setView('projects');
+    }
+    if (key.escape) {
+      setView('projects');
+    }
+  });
+
+  return React.createElement(Box, { flexDirection: 'column', padding: 1 },
+    React.createElement(Header, { connected }),
+
+    loading
+      ? React.createElement(Text, { dimColor: true }, 'Loading...')
+      : view === 'projects'
+        ? React.createElement(ProjectList, {
+            onSelect: (id) => {
+              setView('detail');
+              refresh();
+            },
+          })
+        : React.createElement(Box, { flexDirection: 'column', gap: 1 },
+            project && React.createElement(Box, { flexDirection: 'column' },
+              React.createElement(Text, { bold: true, color: 'cyan' }, project.name),
+              React.createElement(Text, { dimColor: true }, `${project.orchestratorId} · ${project.status}`),
+            ),
+            React.createElement(PhaseTimeline, { phases }),
+            artifacts.length > 0 && React.createElement(Text, { dimColor: true },
+              `${artifacts.length} artifact(s)`
+            ),
+          ),
+
+    React.createElement(StatusBar, { project, orgName, connected }),
+  );
+}

package/src/tui/components/Header.js

@@ -0,0 +1,18 @@
+// TUI component — brand header
+import React from 'react';
+import { Box, Text } from 'ink';
+
+export function Header({ connected = true }) {
+  return React.createElement(Box, { flexDirection: 'column', marginBottom: 1 },
+    React.createElement(Box, { gap: 1 },
+      React.createElement(Text, { bold: true, color: 'cyan' }, 'VECTORA'),
+      React.createElement(Text, { dimColor: true }, '│'),
+      React.createElement(Text, { dimColor: true }, 'CLI Dashboard'),
+      React.createElement(Box, { flexGrow: 1 }),
+      React.createElement(Text, { color: connected ? 'green' : 'red' },
+        connected ? '● connected' : '● offline'
+      ),
+    ),
+    React.createElement(Text, { dimColor: true }, '─'.repeat(60)),
+  );
+}

package/src/tui/components/PhaseTimeline.js

@@ -0,0 +1,31 @@
+// TUI component — phase timeline visualization
+import React from 'react';
+import { Box, Text } from 'ink';
+
+export function PhaseTimeline({ phases = [] }) {
+  if (phases.length === 0) {
+    return React.createElement(Box, { flexDirection: 'column' },
+      React.createElement(Text, { bold: true, color: 'cyan' }, 'Phases'),
+      React.createElement(Text, { dimColor: true }, 'No phases run yet.'),
+    );
+  }
+
+  return React.createElement(Box, { flexDirection: 'column' },
+    React.createElement(Text, { bold: true, color: 'cyan' }, 'Phase Timeline'),
+    ...phases.map((phase, i) => {
+      const icon = phase.status === 'completed' ? '✓' :
+                   phase.status === 'failed' ? '✗' :
+                   phase.status === 'running' ? '◉' : '○';
+      const color = phase.status === 'completed' ? 'green' :
+                    phase.status === 'failed' ? 'red' :
+                    phase.status === 'running' ? 'yellow' : 'gray';
+      const duration = phase.durationMs ? ` (${(phase.durationMs / 1000).toFixed(1)}s)` : '';
+
+      return React.createElement(Box, { key: phase.id ?? i, gap: 1 },
+        React.createElement(Text, { color }, icon),
+        React.createElement(Text, null, phase.phaseType),
+        React.createElement(Text, { dimColor: true }, phase.status + duration),
+      );
+    }),
+  );
+}

package/src/tui/components/ProjectList.js

@@ -0,0 +1,43 @@
+// TUI component — project list with selection
+import React, { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import SelectInput from 'ink-select-input';
+import { getProjects } from '../../lib/api-client.js';
+import { setConfigValue, getConfigValue } from '../../lib/config-store.js';
+
+export function ProjectList({ onSelect }) {
+  const [projects, setProjects] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const activeId = getConfigValue('defaultProject');
+
+  useEffect(() => {
+    getProjects().then((p) => {
+      setProjects(p);
+      setLoading(false);
+    }).catch(() => setLoading(false));
+  }, []);
+
+  if (loading) {
+    return React.createElement(Text, { dimColor: true }, 'Loading projects...');
+  }
+
+  if (projects.length === 0) {
+    return React.createElement(Text, { dimColor: true }, 'No projects. Create one with: vectora projects create <name>');
+  }
+
+  const items = projects.map((p) => ({
+    label: `${p.id === activeId ? '● ' : '  '}${p.name} (${p.orchestratorId})`,
+    value: p.id,
+  }));
+
+  return React.createElement(Box, { flexDirection: 'column' },
+    React.createElement(Text, { bold: true, color: 'cyan' }, 'Projects'),
+    React.createElement(SelectInput, {
+      items,
+      onSelect: (item) => {
+        setConfigValue('defaultProject', item.value);
+        if (onSelect) onSelect(item.value);
+      },
+    }),
+  );
+}

package/src/tui/components/StatusBar.js

@@ -0,0 +1,19 @@
+// TUI component — bottom status bar
+import React from 'react';
+import { Box, Text } from 'ink';
+
+export function StatusBar({ project, orgName, connected }) {
+  return React.createElement(Box, { marginTop: 1 },
+    React.createElement(Text, { dimColor: true }, '─'.repeat(60)),
+    React.createElement(Box, { gap: 2 },
+      project
+        ? React.createElement(Text, { dimColor: true }, `Project: ${project.name}`)
+        : React.createElement(Text, { dimColor: true }, 'No project selected'),
+      orgName && React.createElement(Text, { dimColor: true }, `Org: ${orgName}`),
+      React.createElement(Text, { color: connected ? 'green' : 'red' },
+        connected ? '● Online' : '● Offline'
+      ),
+      React.createElement(Text, { dimColor: true }, 'q: quit'),
+    ),
+  );
+}

package/src/tui/hooks/useApi.js

@@ -0,0 +1,43 @@
+// TUI hook — API calls with auth + loading/error state
+import { useState, useCallback } from 'react';
+import { requireToken } from '../../lib/auth-store.js';
+
+export function useApi() {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const apiFetch = useCallback(async (fn) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await fn();
+      setLoading(false);
+      return result;
+    } catch (err) {
+      setError(err.message ?? 'API error');
+      setLoading(false);
+      return null;
+    }
+  }, []);
+
+  return { apiFetch, loading, error };
+}
+
+export function useToken() {
+  const [token, setToken] = useState(null);
+  const [tokenError, setTokenError] = useState(null);
+
+  const getToken = useCallback(async () => {
+    if (token) return token;
+    try {
+      const t = await requireToken();
+      setToken(t);
+      return t;
+    } catch (err) {
+      setTokenError(err.message);
+      return null;
+    }
+  }, [token]);
+
+  return { getToken, token, tokenError };
+}

package/src/tui/hooks/useProject.js

@@ -0,0 +1,41 @@
+// TUI hook — current project context
+import { useState, useEffect, useCallback } from 'react';
+import { getProject, getProjectPhases, getProjectArtifacts } from '../../lib/api-client.js';
+import { getConfigValue } from '../../lib/config-store.js';
+
+export function useProject() {
+  const [project, setProject] = useState(null);
+  const [phases, setPhases] = useState([]);
+  const [artifacts, setArtifacts] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const projectId = getConfigValue('defaultProject');
+
+  const refresh = useCallback(async () => {
+    if (!projectId) {
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    try {
+      const [p, ph, art] = await Promise.all([
+        getProject(projectId),
+        getProjectPhases(projectId),
+        getProjectArtifacts(projectId),
+      ]);
+      setProject(p);
+      setPhases(ph);
+      setArtifacts(art);
+      setError(null);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [projectId]);
+
+  useEffect(() => { refresh(); }, [refresh]);
+
+  return { project, phases, artifacts, loading, error, refresh, projectId };
+}