quoxcli 0.0.0-stage → 0.2.0

package/lib/tui/views/HealthView.jsx

@@ -0,0 +1,216 @@
+/**
+ * HealthView — btop-style live health dashboard
+ *
+ * Single full-width panel showing:
+ *   - Overall status dot (derived from per-service statuses)
+ *   - A live Sparkline trend of "healthy service count" across recent polls
+ *   - A dense list of services with status dot + status + latency
+ *   - Recent governance incidents (best-effort, defensive)
+ *
+ * Auto-refreshes every 5 seconds via usePolledApi (only while active).
+ * `r` manually refreshes; Esc is handled by the parent app shell.
+ *
+ * API:
+ *   GET /api/v1/health/aggregate  (service: collector) -> { services: [...] } | { checks: [...] }
+ *     each entry: { name, status, latency_ms }
+ *   GET /governance/incidents     (service: collector) -> { incidents: [...] } (best-effort, defensive)
+ */
+
+import React, { useState, useEffect, useRef } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { FullLayout } from '../components/Layout.jsx';
+import { Sparkline } from '../components/Sparkline.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';
+
+// ── Auto-refresh interval (ms) ───────────────────────────────────────
+const REFRESH_INTERVAL = 5_000;
+
+// ── History cap for the trend sparkline ──────────────────────────────
+const MAX_HISTORY = 40;
+
+// ── Statuses considered "healthy" for the overall roll-up ───────────
+const HEALTHY_STATUSES = new Set(['healthy', 'online', 'active', 'up', 'ok']);
+
+function isHealthy(status) {
+  return HEALTHY_STATUSES.has(status);
+}
+
+/**
+ * Defensively unwrap the aggregate response into a services array —
+ * accepts { services: [...] }, { checks: [...] }, or a bare array.
+ */
+function unwrapServices(data) {
+  if (!data) return [];
+  if (Array.isArray(data)) return data;
+  if (Array.isArray(data.services)) return data.services;
+  if (Array.isArray(data.checks)) return data.checks;
+  return [];
+}
+
+/**
+ * Defensively unwrap an incidents response into an array.
+ */
+function unwrapIncidents(data) {
+  if (!data) return [];
+  if (Array.isArray(data)) return data;
+  if (Array.isArray(data.incidents)) return data.incidents;
+  if (Array.isArray(data.data)) return data.data;
+  if (Array.isArray(data.items)) return data.items;
+  return [];
+}
+
+function formatServiceRow(s) {
+  const status = s.status || s.state || 'unknown';
+  const latency = s.latency_ms ?? s.latencyMs ?? s.latency;
+  return {
+    name: s.name || s.service || s.id || 'unknown',
+    status,
+    latency: latency != null ? `${Number(latency).toFixed(0)}ms` : '--',
+    _raw: s,
+  };
+}
+
+function formatIncidentRows(incidents) {
+  return unwrapIncidents(incidents)
+    .slice(0, 8)
+    .map((i, idx) => ({
+      id: i.id != null ? String(i.id) : `incident-${idx}`,
+      title: i.title || i.summary || i.description || 'incident',
+      severity: i.severity || i.level || '--',
+    }));
+}
+
+// ── Component ─────────────────────────────────────────────────────────
+export function HealthView() {
+  const ctx = useTui();
+  const { client, screen } = ctx;
+  const isActive = screen === 'health';
+
+  // ── Health trend history (accumulated across polls) ──────────────────
+  const historyRef = useRef([]);
+  const [history, setHistory] = useState([]);
+
+  // ── Fetch aggregate health, polled every 5s while active ─────────────
+  const { data, loading, error, refresh } = usePolledApi(
+    async () => {
+      const res = await client.get(resolveEndpoint('v1.health.aggregate.list').path, { service: resolveEndpoint('v1.health.aggregate.list').service });
+      return res || {};
+    },
+    [client],
+    { intervalMs: REFRESH_INTERVAL, active: isActive }
+  );
+
+  // ── Fetch recent governance incidents, best-effort ────────────────────
+  const { data: incidentsData } = usePolledApi(
+    async () => {
+      try {
+        const res = await client.get(resolveEndpoint('governance.incidents.list').path, { service: resolveEndpoint('governance.incidents.list').service });
+        return res;
+      } catch {
+        // Endpoint may not exist / may 404 — skip silently, view still works.
+        return [];
+      }
+    },
+    [client],
+    { intervalMs: REFRESH_INTERVAL, active: isActive }
+  );
+
+  const services = unwrapServices(data);
+  const rows = services.map(formatServiceRow);
+  const incidents = formatIncidentRows(incidentsData);
+
+  // ── Accumulate a healthy-service-count trend for the sparkline ───────
+  useEffect(() => {
+    if (!data) return;
+    const healthyCount = services.filter((s) => isHealthy(s.status || s.state)).length;
+
+    historyRef.current = [...historyRef.current, healthyCount].slice(-MAX_HISTORY);
+    setHistory(historyRef.current);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
+
+  // ── Keyboard handling ──────────────────────────────────────────────
+  useInput((input, key) => {
+    if (!isActive) return;
+
+    // Manual refresh
+    if (matchKey('refresh', input, key)) {
+      refresh();
+      return;
+    }
+  }, { isActive });
+
+  // ── Overall roll-up status ────────────────────────────────────────
+  const overallStatus = rows.length === 0
+    ? 'unknown'
+    : rows.every((r) => isHealthy(r.status))
+      ? 'healthy'
+      : 'degraded';
+
+  // ── Footer hint ────────────────────────────────────────────────────
+  const footer = 'r: refresh  Esc: back';
+
+  // ── Render ─────────────────────────────────────────────────────────
+  return (
+    <FullLayout
+      title="Health"
+      subtitle={loading ? '(refreshing...)' : `${rows.length} services`}
+      footer={footer}
+    >
+      <Box flexDirection="column">
+        {error && (
+          <Box marginBottom={1}>
+            <Text color={colors.error}>Error: {error.message}</Text>
+          </Box>
+        )}
+
+        <Box marginBottom={1}>
+          <Text color={colors.textMuted}>Overall: </Text>
+          <Text>{styles.statusDot(overallStatus)} </Text>
+          <Text color={colors.text}>{overallStatus}</Text>
+        </Box>
+
+        {history.length > 0 && (
+          <Box marginBottom={1}>
+            <Text color={colors.textMuted}>Trend: </Text>
+            <Sparkline data={history} width={40} color={colors.cyberBlue} />
+            <Text color={colors.dim}>  ({history[history.length - 1]}/{rows.length} healthy)</Text>
+          </Box>
+        )}
+
+        <Box flexDirection="column" marginBottom={1}>
+          {loading && rows.length === 0 && (
+            <Text color={colors.dim}>Loading...</Text>
+          )}
+          {!loading && rows.length === 0 && (
+            <Text color={colors.dim}>No service health data available</Text>
+          )}
+          {rows.map((r) => (
+            <Box key={r.name}>
+              <Text>{styles.statusDot(r.status)} </Text>
+              <Text color={colors.text} bold>{r.name.padEnd(16)}</Text>
+              <Text color={colors.dim}>{String(r.status).padEnd(12)}</Text>
+              <Text color={colors.textMuted}>{r.latency}</Text>
+            </Box>
+          ))}
+        </Box>
+
+        {incidents.length > 0 && (
+          <Box flexDirection="column">
+            <Text color={colors.accent} bold>Recent Incidents</Text>
+            {incidents.map((i, idx) => (
+              <Box key={`${i.id}-${idx}`}>
+                <Text color={colors.warning}>{String(i.severity).padEnd(10)}</Text>
+                <Text color={colors.text}>{i.title}</Text>
+              </Box>
+            ))}
+          </Box>
+        )}
+      </Box>
+    </FullLayout>
+  );
+}

package/lib/tui/views/InboxView.jsx

@@ -0,0 +1,228 @@
+/**
+ * InboxView — HITL approvals inbox
+ *
+ * Left panel:  DataTable of inbox items (title, type, status, created)
+ * Right panel: DetailPanel with inbox item detail
+ *
+ * Features:
+ *   - `a` key approves the selected item
+ *   - `d` key denies the selected item
+ *   - Auto-refreshes every 10 seconds via usePolledApi (only while active —
+ *     never polls in the background when another screen is showing)
+ *   - Stats header (pending/total etc) fetched separately
+ *
+ * API (org-scoped):
+ *   GET  /api/orgs/:orgId/inbox/stats          (service: auth) -> stats
+ *   GET  /api/orgs/:orgId/inbox                (service: auth) -> data.items
+ *   GET  /api/orgs/:orgId/inbox/:id            (service: auth) -> item detail
+ *   POST /api/orgs/:orgId/inbox/:id/respond    (service: auth) -> { action, comment }
+ */
+
+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 { 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: 28 },
+  { key: 'type',     label: 'Type',    width: 12 },
+  { key: 'status',   label: 'Status',  width: 12 },
+  { key: 'created',  label: 'Created', width: 12 },
+];
+
+// ── Auto-refresh interval (ms) ───────────────────────────────────────
+const REFRESH_INTERVAL = 10_000;
+
+/**
+ * Format raw inbox data into table rows.
+ */
+function formatRows(items) {
+  if (!Array.isArray(items)) return [];
+  return items.map((i) => ({
+    ...i,
+    title:   i.title || i.subject || i.id,
+    type:    i.type || i.kind || '--',
+    status:  `${styles.statusDot(i.status || 'unknown')} ${i.status || 'unknown'}`,
+    created: i.created_at ? String(i.created_at).slice(0, 10) : '--',
+    _raw: i,
+  }));
+}
+
+/**
+ * Build a detail object for the right panel.
+ */
+function buildDetail(raw) {
+  if (!raw) return null;
+  return {
+    'Title':      raw.title || raw.subject,
+    'ID':         raw.id,
+    'Type':       raw.type || raw.kind,
+    'Status':     raw.status,
+    'Priority':   raw.priority,
+    'Description':raw.description || raw.body,
+    'Requested By': raw.requested_by || raw.requester,
+    'Created':    raw.created_at,
+    'Updated':    raw.updated_at,
+  };
+}
+
+// ── Component ─────────────────────────────────────────────────────────
+export function InboxView() {
+  const ctx = useTui();
+  const { client, screen, showToast, orgVersion } = ctx;
+  const isActive = screen === 'inbox';
+  const orgId = getOrgId(ctx);
+
+  const [selected, setSelected] = useState(0);
+
+  // ── Data fetching (auto-refreshes every 10s, only while active) ─────
+  const { data, loading, error, refresh } = usePolledApi(
+    async () => {
+      if (!orgId) return [];
+      const res = await client.get(resolveEndpoint('inbox.list', { orgId }).path, { service: resolveEndpoint('inbox.list', { orgId }).service, query: { status: 'all' } });
+      return res?.items || res?.inbox || (Array.isArray(res) ? res : []);
+    },
+    [client, orgId, orgVersion],
+    { intervalMs: REFRESH_INTERVAL, active: isActive }
+  );
+
+  // ── Stats header ──────────────────────────────────────────────────
+  const { data: stats } = usePolledApi(
+    async () => {
+      if (!orgId) return null;
+      return client.get(resolveEndpoint('inbox.stats.list', { orgId }).path, { service: resolveEndpoint('inbox.stats.list', { orgId }).service });
+    },
+    [client, orgId, orgVersion],
+    { intervalMs: REFRESH_INTERVAL, active: isActive }
+  );
+
+  // ── Formatted rows ─────────────────────────────────────────────────
+  const rows = formatRows(data);
+  const selectedRow = rows[selected];
+  const detail = selectedRow ? buildDetail(selectedRow._raw) : null;
+  const isEmptyInbox = !!orgId && !loading && !error && rows.length === 0;
+
+  // ── Respond to selected item (approve/deny) ──────────────────────────
+  const respond = useCallback(async (action) => {
+    if (!selectedRow || !orgId) return;
+    const itemId = selectedRow._raw.id;
+
+    try {
+      await client.post(resolveEndpoint('inbox.respond', { orgId, itemId }).path, {
+        service: resolveEndpoint('inbox.respond', { orgId, itemId }).service,
+        body: { action },
+      });
+      showToast(action === 'approve' ? 'Approved' : 'Denied', 'success');
+      refresh();
+    } catch (err) {
+      showToast(err.message, 'error');
+    }
+  }, [selectedRow, orgId, client, showToast, refresh]);
+
+  // ── Keyboard handling ──────────────────────────────────────────────
+  useInput((input, key) => {
+    if (!isActive) return;
+
+    // Manual refresh
+    if (matchKey('refresh', input, key)) {
+      refresh();
+      return;
+    }
+
+    // Approve
+    if (input === 'a') {
+      respond('approve');
+      return;
+    }
+
+    // Deny
+    if (input === 'd') {
+      respond('reject');
+      return;
+    }
+  }, { isActive });
+
+  // ── Stats summary line ────────────────────────────────────────────
+  const statsLine = stats
+    ? Object.entries(stats)
+      .filter(([, v]) => typeof v === 'number' || typeof v === 'string')
+      .map(([k, v]) => `${k}: ${v}`)
+      .join('  ')
+    : null;
+
+  // ── Footer hint ────────────────────────────────────────────────────
+  const footer = [
+    '↑/k ↓/j Navigate',
+    'a: approve',
+    'd: deny',
+    'r: refresh',
+    'Esc: back',
+  ].join('  ');
+
+  // ── Render ─────────────────────────────────────────────────────────
+  return (
+    <Layout
+      title="Inbox"
+      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 active org. Switch orgs first.</Text>
+            </Box>
+          )}
+          {statsLine && (
+            <Box marginBottom={1}>
+              <Text color={colors.info}>{statsLine}</Text>
+            </Box>
+          )}
+          {isEmptyInbox ? (
+            <Box paddingY={1}>
+              <Text color={colors.success}>Inbox zero — nothing awaiting approval ✓</Text>
+            </Box>
+          ) : (
+            <DataTable
+              columns={COLUMNS}
+              rows={rows}
+              selected={selected}
+              onSelectionChange={setSelected}
+              loading={loading}
+              emptyMessage={orgId ? 'No inbox items found' : 'No active org'}
+              active={isActive}
+            />
+          )}
+        </Box>
+      }
+      right={
+        <DetailPanel
+          title={selectedRow ? (selectedRow._raw.title || selectedRow._raw.id) : undefined}
+          data={detail}
+        />
+      }
+    />
+  );
+}