quoxcli 0.0.0-stage → 0.2.0

package/lib/tui/views/AgentView.jsx

@@ -0,0 +1,204 @@
+/**
+ * AgentView — Agent management view
+ *
+ * Left panel:  DataTable of agents (name, level, status, tools count)
+ * Right panel: DetailPanel with agent detail + tool list
+ *
+ * Features:
+ *   - `a` key toggles activate/deactivate on the selected agent
+ *   - Shows tool assignments in detail panel
+ *
+ * API (org-scoped):
+ *   GET /api/orgs/:orgId/agents         (service: auth) -> data.agents
+ *   GET /api/orgs/:orgId/agents/:id     (service: auth) -> agent detail
+ */
+
+import React, { useState, useCallback } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { Layout } from '../components/Layout.jsx';
+import { DataTable } from '../components/DataTable.jsx';
+import { DetailPanel } from '../components/DetailPanel.jsx';
+import { useApi } from '../hooks/useApi.js';
+import { useTui } from '../app.jsx';
+import { matchKey } from '../keys.js';
+import { colors, styles } from '../theme.js';
+import { resolveEndpoint } from '../../api/endpoints.js';
+
+// ── Helpers ───────────────────────────────────────────────────────────
+
+/**
+ * Safely extract the org ID from TUI context.
+ */
+function getOrgId(ctx) {
+  return ctx?.auth?.getUser?.()?.org_id
+    || ctx?.config?.getActiveProfile?.()?.auth?.org_id
+    || null;
+}
+
+// ── Column definitions ────────────────────────────────────────────────
+const COLUMNS = [
+  { key: 'name',       label: 'Name',    width: 18 },
+  { key: 'level',      label: 'Level',   width: 8 },
+  { key: 'status',     label: 'Status',  width: 12 },
+  { key: 'toolCount',  label: 'Tools',   width: 8 },
+];
+
+/**
+ * Format raw agent data into table rows.
+ */
+function formatRows(agents) {
+  if (!Array.isArray(agents)) return [];
+  return agents.map((a) => ({
+    ...a,
+    name:      a.name || a.display_name || a.id,
+    level:     a.level != null ? String(a.level) : '--',
+    status:    `${styles.statusDot(a.status || a.state || 'unknown')} ${a.status || a.state || 'unknown'}`,
+    toolCount: Array.isArray(a.tools) ? String(a.tools.length) : (a.tool_count != null ? String(a.tool_count) : '--'),
+    _raw: a,
+  }));
+}
+
+/**
+ * Build a detail object for the right panel.
+ */
+function buildDetail(raw) {
+  if (!raw) return null;
+  const detail = {
+    'Name':        raw.name || raw.display_name,
+    'ID':          raw.id,
+    'Level':       raw.level,
+    'Status':      raw.status || raw.state,
+    'Description': raw.description,
+    'Category':    raw.category,
+    'Created':     raw.created_at,
+    'Updated':     raw.updated_at,
+  };
+
+  // Add tools as a list
+  if (Array.isArray(raw.tools) && raw.tools.length > 0) {
+    detail['Tools'] = raw.tools.map((t) => (typeof t === 'string' ? t : t.name || t.id)).join(', ');
+  }
+
+  // Add capabilities
+  if (Array.isArray(raw.capabilities) && raw.capabilities.length > 0) {
+    detail['Capabilities'] = raw.capabilities.join(', ');
+  }
+
+  return detail;
+}
+
+// ── Component ─────────────────────────────────────────────────────────
+export function AgentView() {
+  const ctx = useTui();
+  const { client, screen, orgVersion } = ctx;
+  const isActive = screen === 'agents';
+  const orgId = getOrgId(ctx);
+
+  const [selected, setSelected] = useState(0);
+  const [actionMsg, setActionMsg] = useState(null);
+
+  // ── Data fetching (refetches when the active org changes) ───────────
+  const { data, loading, error, refresh } = useApi(
+    async () => {
+      if (!orgId) return [];
+      const res = await client.get(resolveEndpoint('agents.list', { orgId }).path, { service: resolveEndpoint('agents.list', { orgId }).service });
+      return res?.agents || [];
+    },
+    [client, orgId, orgVersion]
+  );
+
+  const rows = formatRows(data);
+  const selectedRow = rows[selected];
+  const detail = selectedRow ? buildDetail(selectedRow._raw) : null;
+
+  // ── Toggle activate/deactivate ──────────────────────────────────────
+  const toggleAgent = useCallback(async () => {
+    if (!selectedRow || !orgId) return;
+    const raw = selectedRow._raw;
+    const agentId = raw.id;
+    const currentStatus = raw.status || raw.state;
+    const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
+
+    try {
+      await client.patch(resolveEndpoint('agents.update', { orgId, agentId }).path, {
+        service: resolveEndpoint('agents.update', { orgId, agentId }).service,
+        body: { status: newStatus },
+      });
+      setActionMsg(`Agent ${raw.name || agentId} set to ${newStatus}`);
+      refresh();
+    } catch (err) {
+      setActionMsg(`Failed: ${err.message}`);
+    }
+
+    // Clear message after 3 seconds
+    setTimeout(() => setActionMsg(null), 3000);
+  }, [selectedRow, orgId, client, refresh]);
+
+  // ── Keyboard handling ──────────────────────────────────────────────
+  useInput((input, key) => {
+    if (!isActive) return;
+
+    // Manual refresh
+    if (matchKey('refresh', input, key)) {
+      refresh();
+      return;
+    }
+
+    // Toggle activate/deactivate
+    if (input === 'a') {
+      toggleAgent();
+      return;
+    }
+  }, { isActive });
+
+  // ── Footer hint ────────────────────────────────────────────────────
+  const footer = [
+    '\u2191/k \u2193/j Navigate',
+    'a Activate/Deactivate',
+    'r Refresh',
+    'Esc Back',
+  ].join('  ');
+
+  // ── Render ─────────────────────────────────────────────────────────
+  return (
+    <Layout
+      title="Agents"
+      subtitle={orgId ? `org: ${orgId}` : '(no org)'}
+      footer={footer}
+      left={
+        <Box flexDirection="column">
+          {error && (
+            <Box marginBottom={1}>
+              <Text color={colors.error}>Error: {error.message}</Text>
+            </Box>
+          )}
+          {!orgId && !loading && (
+            <Box marginBottom={1}>
+              <Text color={colors.warning}>No organization selected. Switch orgs first.</Text>
+            </Box>
+          )}
+          {actionMsg && (
+            <Box marginBottom={1}>
+              <Text color={colors.info}>{actionMsg}</Text>
+            </Box>
+          )}
+          <DataTable
+            columns={COLUMNS}
+            rows={rows}
+            selected={selected}
+            onSelectionChange={setSelected}
+            loading={loading}
+            emptyMessage={orgId ? 'No agents — create one via `quox agent create`' : 'Select an organization first'}
+            active={isActive}
+          />
+        </Box>
+      }
+      right={
+        <DetailPanel
+          title={selectedRow ? (selectedRow._raw.name || selectedRow._raw.id) : undefined}
+          data={detail}
+        />
+      }
+    />
+  );
+}

package/lib/tui/views/BackupView.jsx

@@ -0,0 +1,225 @@
+/**
+ * BackupView — Backup management view
+ *
+ * Left panel:  DataTable of backups (id, label, type, size, status, created_at)
+ * Right panel: DetailPanel with backup detail
+ *
+ * Features:
+ *   - `v` key verifies the selected backup
+ *   - `r` key refreshes backup list
+ *   - Action messages auto-clear after 3s
+ *
+ * API (org-scoped):
+ *   GET  /api/orgs/:orgId/backups                (service: auth) -> data.backups
+ *   POST /api/orgs/:orgId/backups/:id/verify     (service: auth) -> verify result
+ *   POST /api/orgs/:orgId/backups/:id/restore    (service: auth) -> restore result
+ */
+
+import React, { useState, useCallback } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { Layout } from '../components/Layout.jsx';
+import { DataTable } from '../components/DataTable.jsx';
+import { DetailPanel } from '../components/DetailPanel.jsx';
+import { useApi } from '../hooks/useApi.js';
+import { useTui } from '../app.jsx';
+import { matchKey } from '../keys.js';
+import { colors, styles } from '../theme.js';
+import { resolveEndpoint } from '../../api/endpoints.js';
+
+// ── Helpers ───────────────────────────────────────────────────────────
+
+/**
+ * Safely extract the org ID from TUI context.
+ */
+function getOrgId(ctx) {
+  try {
+    return ctx?.auth?.getUser?.()?.org_id || ctx?.config?.getActiveProfile?.()?.auth?.org_id || '';
+  } catch { return ''; }
+}
+
+/**
+ * Format bytes into a human-readable file size.
+ */
+function formatFileSize(bytes) {
+  if (bytes == null || isNaN(bytes)) return '--';
+  const num = Number(bytes);
+  if (num === 0) return '0 B';
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(num) / Math.log(1024));
+  const size = (num / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0);
+  return `${size} ${units[i]}`;
+}
+
+/**
+ * Format a date string for display.
+ */
+function formatDate(iso) {
+  if (!iso) return '--';
+  try {
+    const d = new Date(iso);
+    return d.toISOString().slice(0, 10);
+  } catch {
+    return String(iso).slice(0, 10);
+  }
+}
+
+// ── Column definitions ────────────────────────────────────────────────
+const COLUMNS = [
+  { key: 'id',      label: 'ID',      width: 10 },
+  { key: 'label',   label: 'Label',   width: 18 },
+  { key: 'type',    label: 'Type',    width: 10 },
+  { key: 'size',    label: 'Size',    width: 10 },
+  { key: 'status',  label: 'Status',  width: 12 },
+  { key: 'created', label: 'Created', width: 12 },
+];
+
+/**
+ * Format raw backup data into table rows.
+ */
+function formatRows(backups) {
+  if (!Array.isArray(backups)) return [];
+  return backups.map((b) => ({
+    id:      b.id ? String(b.id).slice(0, 8) : '--',
+    label:   b.label || b.name || b.description || '--',
+    type:    b.type || b.backup_type || '--',
+    size:    formatFileSize(b.size || b.file_size),
+    status:  `${styles.statusDot(b.status || 'unknown')} ${b.status || 'unknown'}`,
+    created: formatDate(b.created_at),
+    _raw: b,
+  }));
+}
+
+/**
+ * Build a detail object for the right panel.
+ */
+function buildDetail(raw) {
+  if (!raw) return null;
+  return {
+    'ID':          raw.id,
+    'Label':       raw.label || raw.name,
+    'Type':        raw.type || raw.backup_type,
+    'Status':      raw.status,
+    'Size':        formatFileSize(raw.size || raw.file_size),
+    'Description': raw.description || '--',
+    'Created':     raw.created_at,
+    'Completed':   raw.completed_at || '--',
+    'Verified':    raw.verified_at || (raw.verified ? 'Yes' : '--'),
+    'Checksum':    raw.checksum || raw.hash || '--',
+    'Path':        raw.path || raw.file_path || '--',
+  };
+}
+
+// ── Component ─────────────────────────────────────────────────────────
+export function BackupView() {
+  const ctx = useTui();
+  const { client, screen, orgVersion } = ctx;
+  const isActive = screen === 'backups';
+  const orgId = getOrgId(ctx);
+
+  const [selected, setSelected] = useState(0);
+  const [actionMsg, setActionMsg] = useState(null);
+
+  // ── Data fetching (refetches when the active org changes) ───────────
+  const { data, loading, error, refresh } = useApi(
+    async () => {
+      if (!orgId) return [];
+      const res = await client.get(resolveEndpoint('backups.list', { orgId }).path, { service: resolveEndpoint('backups.list', { orgId }).service });
+      return res?.backups || [];
+    },
+    [client, orgId, orgVersion]
+  );
+
+  const rows = formatRows(data);
+  const selectedRow = rows[selected];
+  const detail = selectedRow ? buildDetail(selectedRow._raw) : null;
+
+  // ── Verify backup ──────────────────────────────────────────────────
+  const verifyBackup = useCallback(async () => {
+    if (!selectedRow || !orgId) return;
+    const raw = selectedRow._raw;
+    const backupId = raw.id;
+
+    try {
+      setActionMsg('Verifying...');
+      const res = await client.post(resolveEndpoint('backups.verify', { orgId, backupId }).path, {
+        service: resolveEndpoint('backups.verify', { orgId, backupId }).service,
+        body: {},
+      });
+      const result = res?.status || res?.verified ? 'verified' : 'complete';
+      setActionMsg(`Backup "${raw.label || raw.name || backupId}" ${result}`);
+      refresh();
+    } catch (err) {
+      setActionMsg(`Verify failed: ${err.message}`);
+    }
+
+    setTimeout(() => setActionMsg(null), 3000);
+  }, [selectedRow, orgId, client, refresh]);
+
+  // ── Keyboard handling ──────────────────────────────────────────────
+  useInput((input, key) => {
+    if (!isActive) return;
+
+    // Manual refresh
+    if (matchKey('refresh', input, key)) {
+      refresh();
+      return;
+    }
+
+    // Verify backup
+    if (input === 'v' && selectedRow) {
+      verifyBackup();
+      return;
+    }
+  }, { isActive });
+
+  // ── Footer hint ────────────────────────────────────────────────────
+  const footer = [
+    '\u2191/k \u2193/j Navigate',
+    'v Verify',
+    'r Refresh',
+    'Esc Back',
+  ].join('  ');
+
+  // ── Render ─────────────────────────────────────────────────────────
+  return (
+    <Layout
+      title="Backups"
+      subtitle={orgId ? `${rows.length} backups` : '(no org)'}
+      footer={footer}
+      left={
+        <Box flexDirection="column">
+          {error && (
+            <Box marginBottom={1}>
+              <Text color={colors.error}>Error: {error.message}</Text>
+            </Box>
+          )}
+          {!orgId && !loading && (
+            <Box marginBottom={1}>
+              <Text color={colors.warning}>No organization selected.</Text>
+            </Box>
+          )}
+          {actionMsg && (
+            <Box marginBottom={1}>
+              <Text color={colors.info}>{actionMsg}</Text>
+            </Box>
+          )}
+          <DataTable
+            columns={COLUMNS}
+            rows={rows}
+            selected={selected}
+            onSelectionChange={setSelected}
+            loading={loading}
+            emptyMessage={orgId ? 'No backups — create one via `quox backup create`' : 'Select an organization first'}
+            active={isActive}
+          />
+        </Box>
+      }
+      right={
+        <DetailPanel
+          title={selectedRow ? (selectedRow._raw.label || selectedRow._raw.name || 'Backup') : undefined}
+          data={detail}
+        />
+      }
+    />
+  );
+}

package/lib/tui/views/BrainView.jsx

@@ -0,0 +1,223 @@
+/**
+ * BrainView — Quox Qortex search screen
+ *
+ * Left panel:  status header (note count + milestone) + search box +
+ *              DataTable of search results
+ * Right panel: DetailPanel for the selected result
+ *
+ * Features:
+ *   - `/` key focuses the search input
+ *   - Search posts to the brain semantic/keyword search API
+ *   - Result detail shows title, kind, vault, snippet, score
+ *
+ * API:
+ *   GET  /brain/status  (service: quoxbrain) -> { noteCount, sources, status, milestone }
+ *   POST /brain/search  (service: quoxbrain, body: { query, limit }) -> { results, tookMs }
+ */
+
+import React, { useState, useCallback, useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { Layout } from '../components/Layout.jsx';
+import { DataTable } from '../components/DataTable.jsx';
+import { DetailPanel } from '../components/DetailPanel.jsx';
+import { SearchInput } from '../components/SearchInput.jsx';
+import { useApi } from '../hooks/useApi.js';
+import { useTui } from '../app.jsx';
+import { matchKey } from '../keys.js';
+import { colors } from '../theme.js';
+import { resolveEndpoint } from '../../api/endpoints.js';
+
+// ── Column definitions ────────────────────────────────────────────────
+const RESULT_COLUMNS = [
+  { key: 'title',   label: 'Title',   width: 26 },
+  { key: 'kind',    label: 'Kind',    width: 12 },
+  { key: 'snippet', label: 'Snippet', width: 32 },
+];
+
+// ── Row formatters ────────────────────────────────────────────────────
+
+function formatResultRows(results) {
+  if (!Array.isArray(results)) return [];
+  return results.map((r) => ({
+    title:   truncate(r.title || r.noteId || 'Untitled', 24),
+    kind:    r.kind || '--',
+    snippet: truncate(r.snippet || '', 30),
+    _raw: r,
+  }));
+}
+
+function buildResultDetail(raw) {
+  if (!raw) return null;
+  return {
+    'Title':   raw.title,
+    'Kind':    raw.kind,
+    'Vault':   raw.vaultId,
+    'Path':    raw.relPath,
+    'Heading': raw.headingPath,
+    'Score':   raw.score != null ? raw.score.toFixed(2) : undefined,
+    'Snippet': raw.snippet,
+    'Updated': raw.updatedAt,
+    'Note ID': raw.noteId,
+  };
+}
+
+// ── Utility ───────────────────────────────────────────────────────────
+
+function truncate(str, max) {
+  if (!str) return '';
+  const s = String(str).replace(/\n/g, ' ');
+  return s.length > max ? s.slice(0, max - 1) + '…' : s;
+}
+
+function formatMilestone(status) {
+  if (!status) return '';
+  const parts = [];
+  if (status.noteCount != null) parts.push(`${status.noteCount} notes`);
+  if (status.milestone) parts.push(status.milestone);
+  return parts.join('  |  ');
+}
+
+// ── Component ─────────────────────────────────────────────────────────
+export function BrainView() {
+  const ctx = useTui();
+  const { client, screen, setInputMode, orgVersion } = ctx;
+  const isActive = screen === 'brain';
+
+  const [selected, setSelected] = useState(0);
+  const [search, setSearch] = useState('');
+  const [searchActive, setSearchActive] = useState(false);
+
+  // ── Input-mode registry: claim 'input' while the search box is
+  // focused so global shortcuts (e.g. '?') don't steal keystrokes.
+  useEffect(() => {
+    if (searchActive) setInputMode?.('input');
+    else if (isActive) setInputMode?.('nav');
+  }, [searchActive, isActive, setInputMode]);
+
+  // ── Fetch brain status (note count + milestone) ──────────────────────
+  const { data: statusData, loading: statusLoading, refresh: refreshStatus } = useApi(
+    async () => {
+      const res = await client.get(resolveEndpoint('brain.status.list').path, {
+        service: resolveEndpoint('brain.status.list').service,
+      });
+      return res || null;
+    },
+    [client, orgVersion]
+  );
+
+  // ── Fetch search results (only when a query has been submitted) ─────
+  const { data: resultsData, loading: resultsLoading, error: resultsError, refresh: refreshResults } = useApi(
+    async () => {
+      if (!search) return [];
+      const res = await client.post(resolveEndpoint('brain.search.list').path, {
+        service: resolveEndpoint('brain.search.list').service,
+        body: { query: search, limit: 20 },
+      });
+      return res?.results || [];
+    },
+    [client, search, orgVersion]
+  );
+
+  const rows = formatResultRows(resultsData);
+  const detail = rows[selected] ? buildResultDetail(rows[selected]._raw) : null;
+
+  // ── Reset selection when results change ─────────────────────────────
+  useEffect(() => {
+    setSelected(0);
+  }, [resultsData]);
+
+  // ── Search submit ───────────────────────────────────────────────────
+  const handleSearchSubmit = useCallback(() => {
+    setSearchActive(false);
+    setSelected(0);
+    refreshResults();
+  }, [refreshResults]);
+
+  // ── Refresh all ─────────────────────────────────────────────────────
+  const refreshAll = useCallback(() => {
+    refreshStatus();
+    refreshResults();
+  }, [refreshStatus, refreshResults]);
+
+  // ── Keyboard handling ──────────────────────────────────────────────
+  useInput((input, key) => {
+    if (!isActive) return;
+
+    // Focus search
+    if (matchKey('search', input, key) && !searchActive) {
+      setSearchActive(true);
+      return;
+    }
+
+    // Escape from search
+    if (searchActive && matchKey('back', input, key)) {
+      setSearchActive(false);
+      return;
+    }
+
+    // Let SearchInput handle keys when focused
+    if (searchActive) return;
+
+    // Manual refresh
+    if (matchKey('refresh', input, key)) {
+      refreshAll();
+      return;
+    }
+  }, { isActive });
+
+  // ── Footer hint ────────────────────────────────────────────────────
+  const footer = searchActive
+    ? 'Type to search  Enter Submit  Esc Cancel'
+    : [
+        '↑/k ↓/j Navigate',
+        '/ Search',
+        'r Refresh',
+        'Esc Back',
+      ].join('  ');
+
+  const detailTitle = rows[selected] ? (rows[selected]._raw.title || 'Result') : undefined;
+
+  // ── Render ─────────────────────────────────────────────────────────
+  return (
+    <Layout
+      title="Brain"
+      subtitle={statusLoading ? 'loading...' : formatMilestone(statusData)}
+      footer={footer}
+      left={
+        <Box flexDirection="column">
+          <Box marginBottom={1}>
+            <SearchInput
+              placeholder="Search the brain..."
+              value={search}
+              onChange={setSearch}
+              onSubmit={handleSearchSubmit}
+              active={searchActive}
+            />
+          </Box>
+
+          {resultsError && (
+            <Box marginBottom={1}>
+              <Text color={colors.error}>Error: {resultsError.message}</Text>
+            </Box>
+          )}
+
+          <DataTable
+            columns={RESULT_COLUMNS}
+            rows={rows}
+            selected={selected}
+            onSelectionChange={setSelected}
+            loading={resultsLoading}
+            emptyMessage={search ? 'No results match your search' : 'Type a query and press Enter to search'}
+            active={isActive && !searchActive}
+          />
+        </Box>
+      }
+      right={
+        <DetailPanel
+          title={detailTitle}
+          data={detail}
+        />
+      }
+    />
+  );
+}