quoxcli 0.0.0-stage → 0.2.0

package/lib/tui/views/ObjectivesView.jsx

@@ -0,0 +1,230 @@
+/**
+ * ObjectivesView — Objectives (autonomous multi-step goals) management view
+ *
+ * Left panel:  DataTable of objectives (title, status, progress)
+ * Right panel: DetailPanel with objective detail
+ *
+ * Features:
+ *   - `a` key approves a decomposed objective's plan (starts execution)
+ *   - `s` key starts an objective (decomposes into tasks)
+ *   - Auto-refreshes every 10 seconds via usePolledApi (only while active —
+ *     never polls in the background when another screen is showing)
+ *   - After `a`/`s`, an immediate refresh() is fired (decomposition/start
+ *     happens async server-side — see services/tasks/lib/objectiveDispatch.js
+ *     — so the list often hasn't caught up yet) and the acted-on row shows a
+ *     transient "starting…"/"decomposing…" hint until a subsequent fetch
+ *     (immediate refresh or the next 10s poll) reflects the new status.
+ *
+ * API (NOT org-scoped in the path — org/user scoping comes from the JWT):
+ *   GET  /api/objectives           (service: tasks) -> data.objectives
+ *   GET  /api/objectives/:id       (service: tasks) -> objective detail
+ *   POST /api/objectives/:id/approve-plan  (service: tasks)
+ *   POST /api/objectives/:id/start         (service: tasks)
+ */
+
+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 { usePolledApi } from '../hooks/usePolledApi.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: 'title',     label: 'Title',    width: 24 },
+  { key: 'status',    label: 'Status',   width: 14 },
+  { key: 'progress',  label: 'Progress', width: 10 },
+];
+
+/**
+ * Format raw objective data into table rows.
+ * `pendingAction` (if present) is `{ id, hint }` for an in-flight
+ * start/approve action whose effect hasn't shown up in `objectives` yet.
+ */
+function formatRows(objectives, pendingAction) {
+  if (!Array.isArray(objectives)) return [];
+  return objectives.map((o) => {
+    const isPending = pendingAction && pendingAction.id === o.id;
+    const statusText = `${styles.statusDot(o.status || 'unknown')} ${o.status || 'unknown'}`;
+    return {
+      ...o,
+      title:    o.title || o.name || o.id,
+      status:   isPending ? `${statusText} (${pendingAction.hint})` : statusText,
+      progress: (o.tasks_done != null || o.tasks_total != null)
+        ? `${o.tasks_done || 0}/${o.tasks_total || 0}`
+        : '--',
+      _raw: o,
+    };
+  });
+}
+
+/**
+ * Build a detail object for the right panel.
+ * `pendingAction` (if present and matching this objective) appends the
+ * transient "starting…"/"decomposing…" hint to the full-width Status line
+ * (the DataTable row's Status column is too narrow to show it in full).
+ */
+function buildDetail(raw, pendingAction) {
+  if (!raw) return null;
+  const isPending = pendingAction && pendingAction.id === raw.id;
+  return {
+    'Title':       raw.title || raw.name,
+    'ID':          raw.id,
+    'Status':      isPending ? `${raw.status} (${pendingAction.hint})` : raw.status,
+    'Description': raw.description,
+    'Team':        raw.team_id,
+    'Progress':    (raw.tasks_done != null || raw.tasks_total != null)
+      ? `${raw.tasks_done || 0}/${raw.tasks_total || 0}`
+      : '--',
+    'Created':     raw.created_at,
+    'Updated':     raw.updated_at,
+  };
+}
+
+// ── Component ─────────────────────────────────────────────────────────
+export function ObjectivesView() {
+  const ctx = useTui();
+  const { client, screen, showToast, orgVersion } = ctx;
+  const isActive = screen === 'objectives';
+  const orgId = getOrgId(ctx);
+
+  const [selected, setSelected] = useState(0);
+  const [filter, setFilter] = useState(undefined);
+  // In-flight start/approve action: { id, previousStatus, hint }. Cleared
+  // once a fetch shows the objective's status has actually moved on, or
+  // after a safety timeout if it hasn't.
+  const [pendingAction, setPendingAction] = useState(null);
+
+  // ── Data fetching (auto-refreshes every 10s, only while active) ─────
+  const { data, loading, error, refresh } = usePolledApi(
+    async () => {
+      const res = await client.get(resolveEndpoint('objectives.list').path, { service: resolveEndpoint('objectives.list').service, query: { status: filter } });
+      return res?.objectives || res?.items || (Array.isArray(res) ? res : []);
+    },
+    [client, orgVersion, filter],
+    { intervalMs: 10000, active: isActive }
+  );
+
+  const rows = formatRows(data, pendingAction);
+  const selectedRow = rows[selected];
+  const detail = selectedRow ? buildDetail(selectedRow._raw, pendingAction) : null;
+
+  // ── Clear the pending hint once the objective's status has moved on ──
+  useEffect(() => {
+    if (!pendingAction || !Array.isArray(data)) return;
+    const current = data.find((o) => o.id === pendingAction.id);
+    if (current && current.status !== pendingAction.previousStatus) {
+      setPendingAction(null);
+    }
+  }, [data, pendingAction]);
+
+  // Safety timeout: never leave the hint stuck if status genuinely hasn't
+  // changed by the time it fires (e.g. decomposition takes longer than this).
+  useEffect(() => {
+    if (!pendingAction) return;
+    const t = setTimeout(() => setPendingAction(null), 15000);
+    return () => clearTimeout(t);
+  }, [pendingAction]);
+
+  // ── Approve plan ──────────────────────────────────────────────────
+  const approvePlan = useCallback(async () => {
+    if (!selectedRow) return;
+    const id = selectedRow._raw.id;
+    try {
+      await client.post(resolveEndpoint('objectives.approve-plan', { id }).path, { service: resolveEndpoint('objectives.approve-plan', { id }).service });
+      showToast('Objective started', 'success');
+      setPendingAction({ id, previousStatus: selectedRow._raw.status, hint: 'starting…' });
+      refresh();
+    } catch (err) {
+      showToast(err.message, 'error');
+    }
+  }, [selectedRow, client, refresh, showToast]);
+
+  // ── Start objective ───────────────────────────────────────────────
+  const startObjective = useCallback(async () => {
+    if (!selectedRow) return;
+    const id = selectedRow._raw.id;
+    try {
+      await client.post(resolveEndpoint('objectives.start', { id }).path, { service: resolveEndpoint('objectives.start', { id }).service, body: {} });
+      showToast('Objective started', 'success');
+      setPendingAction({ id, previousStatus: selectedRow._raw.status, hint: 'decomposing…' });
+      refresh();
+    } catch (err) {
+      showToast(err.message, 'error');
+    }
+  }, [selectedRow, client, refresh, showToast]);
+
+  // ── Keyboard handling ──────────────────────────────────────────────
+  useInput((input, key) => {
+    if (!isActive) return;
+
+    // Manual refresh
+    if (matchKey('refresh', input, key)) {
+      refresh();
+      return;
+    }
+
+    // Approve plan
+    if (input === 'a') {
+      approvePlan();
+      return;
+    }
+
+    // Start objective
+    if (input === 's') {
+      startObjective();
+      return;
+    }
+  }, { isActive });
+
+  // ── Footer hint ────────────────────────────────────────────────────
+  const footer = 'a: approve  s: start  r: refresh  Esc: back';
+
+  // ── Render ─────────────────────────────────────────────────────────
+  return (
+    <Layout
+      title="Objectives"
+      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>
+          )}
+          <DataTable
+            columns={COLUMNS}
+            rows={rows}
+            selected={selected}
+            onSelectionChange={setSelected}
+            loading={loading}
+            emptyMessage="No objectives yet — press s to start one, or create via `quox objective create`"
+            active={isActive}
+          />
+        </Box>
+      }
+      right={
+        <DetailPanel
+          title={selectedRow ? (selectedRow._raw.title || selectedRow._raw.id) : undefined}
+          data={detail}
+        />
+      }
+    />
+  );
+}

package/lib/tui/views/OrgView.jsx

@@ -0,0 +1,229 @@
+/**
+ * OrgView — Organization management view
+ *
+ * Left panel:  DataTable of orgs (name, slug, members count)
+ * Right panel: DetailPanel with org detail (owner, plan, created)
+ *
+ * Features:
+ *   - `s` key switches active org (updates config)
+ *   - Shows current org with a marker in the table
+ *
+ * API:
+ *   GET /api/orgs  (service: auth) -> data.orgs or data.organizations
+ */
+
+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 } from '../theme.js';
+import { resolveEndpoint } from '../../api/endpoints.js';
+
+// ── Helpers ───────────────────────────────────────────────────────────
+
+/**
+ * Safely extract the current 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: 'marker',  label: ' ',       width: 3 },
+  { key: 'name',    label: 'Name',    width: 22 },
+  { key: 'slug',    label: 'Slug',    width: 16 },
+  { key: 'members', label: 'Members', width: 10 },
+];
+
+/**
+ * Format raw org data into table rows.
+ * Marks the currently active org with a star.
+ */
+function formatRows(orgs, currentOrgId) {
+  if (!Array.isArray(orgs)) return [];
+  return orgs.map((o) => {
+    const id = o.id || o.org_id;
+    const isCurrent = id === currentOrgId;
+    return {
+      marker:  isCurrent ? '\u2605' : ' ',
+      name:    o.name || o.display_name || id,
+      slug:    o.slug || '--',
+      members: o.member_count != null
+        ? String(o.member_count)
+        : (Array.isArray(o.members) ? String(o.members.length) : '--'),
+      _raw: o,
+      _isCurrent: isCurrent,
+    };
+  });
+}
+
+/**
+ * Build a detail object for the right panel.
+ */
+function buildDetail(raw, isCurrent) {
+  if (!raw) return null;
+  return {
+    'Name':         raw.name || raw.display_name,
+    'ID':           raw.id || raw.org_id,
+    'Slug':         raw.slug,
+    'Owner':        raw.owner || raw.owner_email || raw.owner_id,
+    'Plan':         raw.plan || raw.subscription || '--',
+    'Members':      raw.member_count != null
+      ? raw.member_count
+      : (Array.isArray(raw.members) ? raw.members.length : '--'),
+    'Active Org':   isCurrent,
+    'Created':      raw.created_at,
+    'Updated':      raw.updated_at,
+    'Description':  raw.description,
+  };
+}
+
+/**
+ * Merge an `auth.switch-org` response into the stored auth blob — the shared
+ * contract with `quox org switch`. The response carries the new org's info and
+ * (critically) an org-scoped access_token; persisting only a local org_id
+ * without this token leaves the OLD org's token in place. Exported for tests.
+ */
+export function mergeSwitchedOrgAuth(prevAuth, data, fallbackOrgId) {
+  const authData = { ...(prevAuth || {}) };
+  if (data?.org) {
+    authData.org_id = data.org.id;
+    authData.org_name = data.org.name;
+    authData.org_slug = data.org.slug;
+    authData.org_role = data.role;
+  } else {
+    authData.org_id = fallbackOrgId;
+  }
+  if (data?.access_token) authData.access_token = data.access_token;
+  return authData;
+}
+
+// ── Component ─────────────────────────────────────────────────────────
+export function OrgView() {
+  const ctx = useTui();
+  const { client, config, screen, onOrgChange } = ctx;
+  const isActive = screen === 'orgs';
+  const currentOrgId = getOrgId(ctx);
+
+  const [selected, setSelected] = useState(0);
+  const [actionMsg, setActionMsg] = useState(null);
+
+  // ── Data fetching ───────────────────────────────────────────────────
+  const { data, loading, error, refresh } = useApi(
+    async () => {
+      const res = await client.get(resolveEndpoint('orgs.list').path, { service: resolveEndpoint('orgs.list').service });
+      return res?.orgs || res?.organizations || [];
+    },
+    [client]
+  );
+
+  const rows = formatRows(data, currentOrgId);
+  const selectedRow = rows[selected];
+  const detail = selectedRow
+    ? buildDetail(selectedRow._raw, selectedRow._isCurrent)
+    : null;
+
+  // ── Switch active org ──────────────────────────────────────────────
+  const switchOrg = useCallback(async () => {
+    if (!selectedRow) return;
+    const raw = selectedRow._raw;
+    const newOrgId = raw.id || raw.org_id;
+
+    if (newOrgId === currentOrgId) {
+      setActionMsg('Already the active org');
+      setTimeout(() => setActionMsg(null), 2000);
+      return;
+    }
+
+    setActionMsg('Switching…');
+    try {
+      // Mirror `quox org switch`: POST switch-org to obtain the org-scoped
+      // access_token + canonical org info, then persist BOTH. The old code
+      // only poked a local org_id, leaving the previous org's token in place
+      // so every subsequent refetch hit the new org with the wrong token.
+      const ep = resolveEndpoint('auth.switch-org');
+      const data = await client.post(ep.path, { service: ep.service, body: { org_id: newOrgId } });
+      const nextAuth = mergeSwitchedOrgAuth(config?.getAuth?.(), data, newOrgId);
+      config?.setAuth?.(nextAuth);
+
+      setActionMsg(`Switched to ${data?.org?.name || raw.name || newOrgId}`);
+      refresh();
+      // Notify org-scoped views so they refetch against the new org.
+      onOrgChange?.();
+    } catch (err) {
+      setActionMsg(`Failed to switch: ${err.message}`);
+    }
+
+    setTimeout(() => setActionMsg(null), 3000);
+  }, [selectedRow, currentOrgId, client, config, refresh, onOrgChange]);
+
+  // ── Keyboard handling ──────────────────────────────────────────────
+  useInput((input, key) => {
+    if (!isActive) return;
+
+    // Switch org
+    if (input === 's') {
+      switchOrg();
+      return;
+    }
+
+    // Manual refresh
+    if (matchKey('refresh', input, key)) {
+      refresh();
+      return;
+    }
+  }, { isActive });
+
+  // ── Footer hint ────────────────────────────────────────────────────
+  const footer = [
+    '\u2191/k \u2193/j Navigate',
+    's Switch org',
+    'r Refresh',
+    'Esc Back',
+  ].join('  ');
+
+  // ── Render ─────────────────────────────────────────────────────────
+  return (
+    <Layout
+      title="Organizations"
+      subtitle={currentOrgId ? `active: ${currentOrgId}` : '(none active)'}
+      footer={footer}
+      left={
+        <Box flexDirection="column">
+          {error && (
+            <Box marginBottom={1}>
+              <Text color={colors.error}>Error: {error.message}</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="No organizations — create one via `quox org create`"
+            active={isActive}
+          />
+        </Box>
+      }
+      right={
+        <DetailPanel
+          title={selectedRow ? (selectedRow._raw.name || 'Organization') : undefined}
+          data={detail}
+        />
+      }
+    />
+  );
+}

package/lib/tui/views/ToolView.jsx

@@ -0,0 +1,221 @@
+/**
+ * ToolView — Tool catalog browser
+ *
+ * Left panel:  DataTable of tools (name, type, category)
+ * Right panel: DetailPanel with tool description and parameters
+ *
+ * API (org-scoped):
+ *   GET /api/orgs/:orgId/tools  (service: auth) -> data.tools
+ *   Tool detail comes from the list data itself (no separate endpoint needed).
+ */
+
+import React, { useState, 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';
+
+// ── 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: 22 },
+  { key: 'type',     label: 'Type',     width: 14 },
+  { key: 'category', label: 'Category', width: 14 },
+];
+
+/**
+ * Format raw tool data into table rows.
+ */
+function formatRows(tools) {
+  if (!Array.isArray(tools)) return [];
+  return tools.map((t) => ({
+    name:     t.name || t.display_name || t.id,
+    type:     t.type || '--',
+    category: t.category || '--',
+    _raw: t,
+  }));
+}
+
+/**
+ * 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,
+    'Type':        raw.type,
+    'Category':    raw.category,
+    'Description': raw.description,
+    'Version':     raw.version,
+    'Enabled':     raw.enabled != null ? raw.enabled : raw.active,
+    'Created':     raw.created_at,
+  };
+
+  // Parameters
+  if (raw.parameters || raw.input_schema) {
+    const params = raw.parameters || raw.input_schema;
+    if (typeof params === 'object') {
+      detail['Parameters'] = params;
+    }
+  }
+
+  // Tags
+  if (Array.isArray(raw.tags) && raw.tags.length > 0) {
+    detail['Tags'] = raw.tags;
+  }
+
+  return detail;
+}
+
+/**
+ * Filter rows by search term (matches name, type, category).
+ */
+function filterRows(rows, search) {
+  if (!search) return rows;
+  const term = search.toLowerCase();
+  return rows.filter((r) =>
+    (r.name || '').toLowerCase().includes(term) ||
+    (r.type || '').toLowerCase().includes(term) ||
+    (r.category || '').toLowerCase().includes(term)
+  );
+}
+
+// ── Component ─────────────────────────────────────────────────────────
+export function ToolView() {
+  const ctx = useTui();
+  const { client, screen, setInputMode, orgVersion } = ctx;
+  const isActive = screen === 'tools';
+  const orgId = getOrgId(ctx);
+
+  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]);
+
+  // ── Data fetching (refetches when the active org changes) ───────────
+  const { data, loading, error, refresh } = useApi(
+    async () => {
+      if (!orgId) return [];
+      const res = await client.get(resolveEndpoint('tools.list', { orgId }).path, { service: resolveEndpoint('tools.list', { orgId }).service });
+      return res?.tools || [];
+    },
+    [client, orgId, orgVersion]
+  );
+
+  const allRows = formatRows(data);
+  const rows = filterRows(allRows, search);
+  const selectedRow = rows[selected];
+  const detail = selectedRow ? buildDetail(selectedRow._raw) : null;
+
+  // ── Keyboard handling ──────────────────────────────────────────────
+  useInput((input, key) => {
+    if (!isActive) return;
+
+    // Toggle search focus
+    if (matchKey('search', input, key) && !searchActive) {
+      setSearchActive(true);
+      return;
+    }
+
+    // Escape from search
+    if (searchActive && matchKey('back', input, key)) {
+      setSearchActive(false);
+      return;
+    }
+
+    if (searchActive) return; // Let SearchInput handle keys
+
+    // Manual refresh
+    if (matchKey('refresh', input, key)) {
+      refresh();
+      return;
+    }
+  }, { isActive });
+
+  // ── Reset selection when search changes ────────────────────────────
+  const handleSearchChange = (val) => {
+    setSearch(val);
+    setSelected(0);
+  };
+
+  // ── Footer hint ────────────────────────────────────────────────────
+  const footer = searchActive
+    ? 'Type to filter  Esc Cancel search'
+    : [
+        '\u2191/k \u2193/j Navigate',
+        '/ Search',
+        'r Refresh',
+        'Esc Back',
+      ].join('  ');
+
+  // ── Render ─────────────────────────────────────────────────────────
+  return (
+    <Layout
+      title="Tools"
+      subtitle={orgId ? `${rows.length} tools` : '(no org)'}
+      footer={footer}
+      left={
+        <Box flexDirection="column">
+          {/* Search bar */}
+          <Box marginBottom={1}>
+            <SearchInput
+              placeholder="Filter tools..."
+              value={search}
+              onChange={handleSearchChange}
+              active={searchActive}
+            />
+          </Box>
+
+          {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>
+          )}
+          <DataTable
+            columns={COLUMNS}
+            rows={rows}
+            selected={selected}
+            onSelectionChange={setSelected}
+            loading={loading}
+            emptyMessage={search ? `No tools match "${search}" — press Esc to clear the filter` : 'No tools installed — add one via `quox tool create` or `quox tool install`'}
+            active={isActive && !searchActive}
+          />
+        </Box>
+      }
+      right={
+        <DetailPanel
+          title={selectedRow ? (selectedRow._raw.name || selectedRow._raw.id) : undefined}
+          data={detail}
+        />
+      }
+    />
+  );
+}