quoxcli 0.0.0-stage → 0.2.0

package/lib/tui/keys.js

@@ -0,0 +1,87 @@
+/**
+ * QuoxCLI TUI Keybindings
+ *
+ * Defines keyboard shortcuts for the TUI and help overlay entries.
+ * Vim-style navigation (h/j/k/l) plus standard arrow keys.
+ *
+ * Exports:
+ *   KEYS     - action name → key arrays (for useInput matching)
+ *   KEY_HELP - ordered list of { keys, desc } for the help overlay
+ */
+
+// ── Key mappings ──────────────────────────────────────────────────────
+export const KEYS = {
+  up:       ['up', 'k'],
+  down:     ['down', 'j'],
+  left:     ['left', 'h'],
+  right:    ['right', 'l'],
+  select:   ['return'],
+  back:     ['escape'],
+  tab:      ['tab'],
+  search:   ['/'],
+  help:     ['?'],
+  quit:     ['q'],
+  refresh:  ['r'],
+  delete:   ['d'],
+  edit:     ['e'],
+  create:   ['c'],
+  nextPage: ['n'],
+  prevPage: ['p'],
+  // Command palette. Ctrl+K can't be expressed as a plain input string
+  // (matchKey's default case only compares `input === binding`), so the
+  // Ctrl+K half is detected directly in app.jsx via `key.ctrl && input
+  // === 'k'`. ':' works here since it's a normal single character.
+  palette:  [':'],
+};
+
+// ── Help overlay entries ──────────────────────────────────────────────
+export const KEY_HELP = [
+  { keys: '\u2191/k  \u2193/j',  desc: 'Navigate' },
+  { keys: 'Enter',               desc: 'Select' },
+  { keys: 'Esc',                 desc: 'Back' },
+  { keys: 'Tab',                 desc: 'Switch panel' },
+  { keys: '/',                   desc: 'Search' },
+  { keys: '?',                   desc: 'Help' },
+  { keys: 'q',                   desc: 'Quit' },
+  { keys: 'r',                   desc: 'Refresh' },
+  { keys: 'n / p',               desc: 'Next / prev page' },
+  { keys: 'c',                   desc: 'Create' },
+  { keys: 'd',                   desc: 'Delete' },
+  { keys: 'e',                   desc: 'Edit' },
+  { keys: 'Ctrl+K / :',          desc: 'Command palette' },
+  { keys: '1-0 o i v g h',       desc: 'Jump to screen (anywhere)' },
+];
+
+/**
+ * Check whether a key + input flags match a named action.
+ *
+ * Usage with ink's useInput:
+ *   useInput((input, key) => {
+ *     if (matchKey('up', input, key)) { ... }
+ *   });
+ *
+ * @param {string} action - key from KEYS (e.g. 'up', 'quit')
+ * @param {string} input  - the raw character from useInput
+ * @param {Object} key    - the key flags from useInput ({ return, escape, tab, upArrow, downArrow, leftArrow, rightArrow })
+ * @returns {boolean}
+ */
+export function matchKey(action, input, key) {
+  const bindings = KEYS[action];
+  if (!bindings) return false;
+
+  for (const binding of bindings) {
+    switch (binding) {
+      case 'up':     if (key.upArrow)    return true; break;
+      case 'down':   if (key.downArrow)  return true; break;
+      case 'left':   if (key.leftArrow)  return true; break;
+      case 'right':  if (key.rightArrow) return true; break;
+      case 'return': if (key.return)     return true; break;
+      case 'escape': if (key.escape)     return true; break;
+      case 'tab':    if (key.tab)        return true; break;
+      default:
+        if (input === binding) return true;
+    }
+  }
+
+  return false;
+}

package/lib/tui/registry.js

@@ -0,0 +1,49 @@
+/**
+ * SCREEN_REGISTRY — single source of truth for navigable TUI screens
+ *
+ * Consumed by:
+ *   - components/Palette.jsx  — command-palette search + result list
+ *   - app.jsx                 — global jump-key (hotkey -> screen id) map
+ *   - components/Layout.jsx   — breadcrumb title lookup
+ *
+ * Mirrors MainMenu.jsx's MENU_ITEMS (same ids/hotkeys) but lives outside
+ * views/ so non-view files (app.jsx, Palette, Layout) can import it
+ * without reaching into MainMenu.jsx.
+ *
+ * Each entry: { id, title, keywords, hotkey }
+ *   id       - matches app.jsx SCREENS / VIEW_COMPONENTS key
+ *   title    - human-readable label (palette list + breadcrumb segment)
+ *   keywords - extra terms the palette substring-matches against
+ *   hotkey   - single-char global jump key (1-0, then o/i/v/g/h)
+ */
+
+export const SCREEN_REGISTRY = [
+  { id: 'fleet',       title: 'Fleet',         keywords: ['status', 'agents', 'health', 'hosts'],            hotkey: '1' },
+  { id: 'agents',      title: 'Agents',        keywords: ['activate', 'deactivate', 'tools'],                hotkey: '2' },
+  { id: 'tools',       title: 'Tools',         keywords: ['catalog', 'install', 'manage'],                   hotkey: '3' },
+  { id: 'orgs',        title: 'Organizations', keywords: ['org', 'members', 'divisions', 'switch'],          hotkey: '4' },
+  { id: 'memory',      title: 'Memory',        keywords: ['entities', 'conversations', 'search'],            hotkey: '5' },
+  { id: 'brain',       title: 'Brain',         keywords: ['quoxbrain', 'brain2', 'notes', 'knowledge', 'vaults', 'second brain', 'search'], hotkey: 'b' },
+  { id: 'workflows',   title: 'Workflows',     keywords: ['crud', 'run', 'steps', 'versions'],                hotkey: '6' },
+  { id: 'chat',        title: 'Chat',          keywords: ['commanderq', 'interactive'],                      hotkey: '7' },
+  { id: 'admin',       title: 'Admin',         keywords: ['config', 'api keys', 'services', 'logs', 'retention'], hotkey: '8' },
+  { id: 'files',       title: 'Files',         keywords: ['upload', 'download', 'list', 'delete'],           hotkey: '9' },
+  { id: 'backups',     title: 'Backups',       keywords: ['restore', 'verify', 'schedules'],                 hotkey: '0' },
+  { id: 'objectives',  title: 'Objectives',    keywords: ['goals', 'plan', 'approve', 'start', 'track'],     hotkey: 'o' },
+  { id: 'inbox',       title: 'Inbox',         keywords: ['hitl', 'approvals', 'review', 'approve', 'deny'], hotkey: 'i' },
+  { id: 'vault',       title: 'Vault',         keywords: ['credentials', 'test', 'expiry', 'activity'],      hotkey: 'v' },
+  { id: 'governance',  title: 'Governance',    keywords: ['ward', 'volt', 'evidence', 'policies', 'approvals'], hotkey: 'g' },
+  { id: 'health',      title: 'Health',        keywords: ['service health', 'incidents', 'sparklines'],      hotkey: 'h' },
+];
+
+/** Screen id -> title, with 'menu' -> 'Main' added for the breadcrumb root. */
+export const SCREEN_TITLES = {
+  menu: 'Main',
+  ...Object.fromEntries(SCREEN_REGISTRY.map((entry) => [entry.id, entry.title])),
+};
+
+/** Screen id -> registry entry. */
+export const SCREEN_BY_ID = Object.fromEntries(SCREEN_REGISTRY.map((entry) => [entry.id, entry]));
+
+/** hotkey -> screen id, for the global jump-key handler in app.jsx. */
+export const SCREEN_BY_HOTKEY = Object.fromEntries(SCREEN_REGISTRY.map((entry) => [entry.hotkey, entry.id]));

package/lib/tui/theme.js

@@ -0,0 +1,103 @@
+/**
+ * QuoxCLI TUI Theme
+ *
+ * Color palette matching QuoxCORE brand (blue/cyan/violet gradient).
+ * Inspired by QuoxBastion's BubbleTea TUI theme.
+ *
+ * Exports:
+ *   colors  - hex color values
+ *   styles  - chalk formatting functions
+ *   BORDERS - box-drawing characters for panels
+ */
+
+import chalk from 'chalk';
+
+// ── Brand color palette ───────────────────────────────────────────────
+export const colors = {
+  // Brand gradient
+  primary:    '#3B82F6',   // electric blue
+  secondary:  '#6366F1',   // indigo
+  accent:     '#C084FC',   // lilac
+
+  // Status
+  success:    '#22C55E',
+  error:      '#EF4444',
+  warning:    '#FBBF24',
+
+  // Highlights
+  cyberBlue:  '#38BDF8',
+  info:       '#38BDF8',
+
+  // Text hierarchy
+  text:       '#E4E4E7',
+  textMuted:  '#A1A1AA',
+  dim:        '#71717A',
+  subtle:     '#3F3F46',
+
+  // Backgrounds
+  bgPanel:    '#111827',
+  bgHighlight:'#1E293B',
+};
+
+// ── Chalk-based style functions ───────────────────────────────────────
+export const styles = {
+  // Headings
+  title:      (t) => chalk.hex(colors.primary).bold(t),
+  subtitle:   (t) => chalk.hex(colors.secondary)(t),
+  heading:    (t) => chalk.hex(colors.accent).bold(t),
+
+  // Text
+  text:       (t) => chalk.hex(colors.text)(t),
+  muted:      (t) => chalk.hex(colors.textMuted)(t),
+  dim:        (t) => chalk.hex(colors.dim)(t),
+  subtle:     (t) => chalk.hex(colors.subtle)(t),
+
+  // Status
+  success:    (t) => chalk.hex(colors.success)(t),
+  error:      (t) => chalk.hex(colors.error).bold(t),
+  warning:    (t) => chalk.hex(colors.warning)(t),
+  info:       (t) => chalk.hex(colors.cyberBlue)(t),
+
+  // Brand
+  primary:    (t) => chalk.hex(colors.primary)(t),
+  secondary:  (t) => chalk.hex(colors.secondary)(t),
+  accent:     (t) => chalk.hex(colors.accent)(t),
+  cyber:      (t) => chalk.hex(colors.cyberBlue).bold(t),
+
+  // Compound
+  label:      (t) => chalk.hex(colors.textMuted).bold(t),
+  key:        (t) => chalk.hex(colors.cyberBlue).bold(t),
+  value:      (t) => chalk.hex(colors.text)(t),
+  badge:      (t) => chalk.hex(colors.bgPanel).bgHex(colors.primary).bold(` ${t} `),
+  badgeAccent:(t) => chalk.hex(colors.bgPanel).bgHex(colors.accent).bold(` ${t} `),
+
+  // Inline status indicators
+  statusDot: (status) => {
+    const map = {
+      online:  chalk.hex(colors.success)('\u25CF'),
+      healthy: chalk.hex(colors.success)('\u25CF'),
+      active:  chalk.hex(colors.success)('\u25CF'),
+      warning: chalk.hex(colors.warning)('\u25CF'),
+      degraded:chalk.hex(colors.warning)('\u25CF'),
+      error:   chalk.hex(colors.error)('\u25CF'),
+      offline: chalk.hex(colors.error)('\u25CF'),
+      unknown: chalk.hex(colors.dim)('\u25CB'),
+    };
+    return map[status] || map.unknown;
+  },
+};
+
+// ── Box-drawing border characters ─────────────────────────────────────
+export const BORDERS = {
+  topLeft:     '\u256D',   // ╭
+  topRight:    '\u256E',   // ╮
+  bottomLeft:  '\u2570',   // ╰
+  bottomRight: '\u256F',   // ╯
+  horizontal:  '\u2500',   // ─
+  vertical:    '\u2502',   // │
+  teeRight:    '\u251C',   // ├
+  teeLeft:     '\u2524',   // ┤
+  teeDown:     '\u252C',   // ┬
+  teeUp:       '\u2534',   // ┴
+  cross:       '\u253C',   // ┼
+};

package/lib/tui/views/AdminView.jsx

@@ -0,0 +1,398 @@
+/**
+ * AdminView — Admin panel with tabbed navigation
+ *
+ * Tabs: Config | Keys | Services | Logs | Retention
+ *
+ * Each tab has its own DataTable sourced from admin API endpoints.
+ * Tab key cycles through tabs.
+ *
+ * API (all service: auth):
+ *   GET /api/admin/config           -> key-value pairs
+ *   GET /api/admin/keys             -> table (id, name, prefix, role, last_used)
+ *   GET /api/admin/services         -> table (id, name, status, url)
+ *   GET /api/admin/logs             -> table (timestamp, user_email, action, detail)
+ *   GET /api/admin/retention/config -> key-value pairs
+ */
+
+import React, { useState, useEffect, 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';
+
+// ── Tab definitions ───────────────────────────────────────────────────
+const TABS = ['Config', 'Keys', 'Services', 'Logs', 'Retention'];
+
+// ── Column definitions per tab ────────────────────────────────────────
+const CONFIG_COLUMNS = [
+  { key: 'key',   label: 'Key',   width: 28 },
+  { key: 'value', label: 'Value', width: 36 },
+];
+
+const KEYS_COLUMNS = [
+  { key: 'id',        label: 'ID',        width: 10 },
+  { key: 'name',      label: 'Name',      width: 18 },
+  { key: 'prefix',    label: 'Prefix',    width: 12 },
+  { key: 'role',      label: 'Role',      width: 12 },
+  { key: 'last_used', label: 'Last Used', width: 14 },
+];
+
+const SERVICES_COLUMNS = [
+  { key: 'id',     label: 'ID',     width: 10 },
+  { key: 'name',   label: 'Name',   width: 18 },
+  { key: 'status', label: 'Status', width: 12 },
+  { key: 'url',    label: 'URL',    width: 28 },
+];
+
+const LOGS_COLUMNS = [
+  { key: 'timestamp',  label: 'Time',   width: 20 },
+  { key: 'user_email', label: 'User',   width: 20 },
+  { key: 'action',     label: 'Action', width: 14 },
+  { key: 'detail',     label: 'Detail', width: 20 },
+];
+
+const RETENTION_COLUMNS = [
+  { key: 'key',   label: 'Key',   width: 28 },
+  { key: 'value', label: 'Value', width: 36 },
+];
+
+// ── Row formatters ────────────────────────────────────────────────────
+
+function formatConfigRows(data) {
+  if (!data || typeof data !== 'object') return [];
+  if (Array.isArray(data)) {
+    return data.map((item) => ({
+      key:   item.key || item.name || '',
+      value: String(item.value != null ? item.value : ''),
+      _raw:  item,
+    }));
+  }
+  // Object key-value pairs
+  return Object.entries(data).map(([k, v]) => ({
+    key:   k,
+    value: String(v != null ? v : ''),
+    _raw:  { key: k, value: v },
+  }));
+}
+
+function formatKeysRows(keys) {
+  if (!Array.isArray(keys)) return [];
+  return keys.map((k) => ({
+    id:        k.id || '--',
+    name:      k.name || k.display_name || '--',
+    prefix:    k.prefix || '--',
+    role:      k.role || '--',
+    last_used: k.last_used ? formatDate(k.last_used) : '--',
+    _raw: k,
+  }));
+}
+
+function formatServicesRows(services) {
+  if (!Array.isArray(services)) return [];
+  return services.map((s) => ({
+    id:     s.id || '--',
+    name:   s.name || s.display_name || '--',
+    status: `${styles.statusDot(s.status || 'unknown')} ${s.status || 'unknown'}`,
+    url:    s.url || s.endpoint || '--',
+    _raw: s,
+  }));
+}
+
+function formatLogsRows(logs) {
+  if (!Array.isArray(logs)) return [];
+  return logs.map((l) => ({
+    timestamp:  l.timestamp ? formatDate(l.timestamp) : '--',
+    user_email: l.user_email || l.email || l.user || '--',
+    action:     l.action || l.type || '--',
+    detail:     truncate(l.detail || l.message || l.description || '', 18),
+    _raw: l,
+  }));
+}
+
+// ── Detail builders ───────────────────────────────────────────────────
+
+function buildConfigDetail(raw) {
+  if (!raw) return null;
+  return {
+    'Key':   raw.key || raw.name,
+    'Value': raw.value,
+  };
+}
+
+function buildKeyDetail(raw) {
+  if (!raw) return null;
+  return {
+    'ID':         raw.id,
+    'Name':       raw.name || raw.display_name,
+    'Prefix':     raw.prefix,
+    'Role':       raw.role,
+    'Last Used':  raw.last_used,
+    'Created':    raw.created_at,
+    'Expires':    raw.expires_at || '--',
+  };
+}
+
+function buildServiceDetail(raw) {
+  if (!raw) return null;
+  return {
+    'ID':       raw.id,
+    'Name':     raw.name || raw.display_name,
+    'Status':   raw.status,
+    'URL':      raw.url || raw.endpoint,
+    'Version':  raw.version || '--',
+    'Uptime':   raw.uptime || '--',
+    'Last Check': raw.last_check || raw.checked_at || '--',
+  };
+}
+
+function buildLogDetail(raw) {
+  if (!raw) return null;
+  return {
+    'Timestamp': raw.timestamp,
+    'User':      raw.user_email || raw.email || raw.user,
+    'Action':    raw.action || raw.type,
+    'Detail':    raw.detail || raw.message || raw.description,
+    'IP':        raw.ip || raw.ip_address || '--',
+    'ID':        raw.id,
+  };
+}
+
+function buildRetentionDetail(raw) {
+  if (!raw) return null;
+  return {
+    'Key':   raw.key || raw.name,
+    'Value': raw.value,
+  };
+}
+
+// ── Utility ───────────────────────────────────────────────────────────
+
+function truncate(str, max) {
+  if (!str) return '';
+  const s = String(str).replace(/\n/g, ' ');
+  return s.length > max ? s.slice(0, max - 1) + '\u2026' : s;
+}
+
+function formatDate(iso) {
+  if (!iso) return '--';
+  try {
+    const d = new Date(iso);
+    return d.toISOString().slice(0, 16).replace('T', ' ');
+  } catch {
+    return String(iso).slice(0, 16);
+  }
+}
+
+// ── Component ─────────────────────────────────────────────────────────
+export function AdminView() {
+  const ctx = useTui();
+  const { client, screen, orgVersion } = ctx;
+  const isActive = screen === 'admin';
+
+  const [activeTab, setActiveTab] = useState(0);
+  const [selected, setSelected] = useState(0);
+
+  // ── Fetch config (refetches when the active org changes) ────────────
+  const { data: configData, loading: configLoading, error: configError, refresh: refreshConfig } = useApi(
+    async () => {
+      const res = await client.get(resolveEndpoint('admin.config.list').path, { service: resolveEndpoint('admin.config.list').service });
+      return res?.config || res || {};
+    },
+    [client, orgVersion]
+  );
+
+  // ── Fetch keys ────────────────────────────────────────────────────
+  const { data: keysData, loading: keysLoading, error: keysError, refresh: refreshKeys } = useApi(
+    async () => {
+      const res = await client.get(resolveEndpoint('admin.keys.list').path, { service: resolveEndpoint('admin.keys.list').service });
+      return res?.keys || [];
+    },
+    [client, orgVersion]
+  );
+
+  // ── Fetch services ────────────────────────────────────────────────
+  const { data: servicesData, loading: servicesLoading, error: servicesError, refresh: refreshServices } = useApi(
+    async () => {
+      const res = await client.get(resolveEndpoint('admin.services.list').path, { service: resolveEndpoint('admin.services.list').service });
+      return res?.services || [];
+    },
+    [client, orgVersion]
+  );
+
+  // ── Fetch logs ────────────────────────────────────────────────────
+  const { data: logsData, loading: logsLoading, error: logsError, refresh: refreshLogs } = useApi(
+    async () => {
+      const res = await client.get(resolveEndpoint('admin.logs.list').path, { service: resolveEndpoint('admin.logs.list').service });
+      return res?.logs || [];
+    },
+    [client, orgVersion]
+  );
+
+  // ── Fetch retention ───────────────────────────────────────────────
+  const { data: retentionData, loading: retentionLoading, error: retentionError, refresh: refreshRetention } = useApi(
+    async () => {
+      const res = await client.get(resolveEndpoint('admin.retention.config.list').path, { service: resolveEndpoint('admin.retention.config.list').service });
+      return res?.config || res || {};
+    },
+    [client, orgVersion]
+  );
+
+  // ── Active tab data ─────────────────────────────────────────────────
+  let columns, rows, detail, loading, error;
+
+  switch (activeTab) {
+    case 0: // Config
+      columns = CONFIG_COLUMNS;
+      rows = formatConfigRows(configData);
+      detail = rows[selected] ? buildConfigDetail(rows[selected]._raw) : null;
+      loading = configLoading;
+      error = configError;
+      break;
+    case 1: // Keys
+      columns = KEYS_COLUMNS;
+      rows = formatKeysRows(keysData);
+      detail = rows[selected] ? buildKeyDetail(rows[selected]._raw) : null;
+      loading = keysLoading;
+      error = keysError;
+      break;
+    case 2: // Services
+      columns = SERVICES_COLUMNS;
+      rows = formatServicesRows(servicesData);
+      detail = rows[selected] ? buildServiceDetail(rows[selected]._raw) : null;
+      loading = servicesLoading;
+      error = servicesError;
+      break;
+    case 3: // Logs
+      columns = LOGS_COLUMNS;
+      rows = formatLogsRows(logsData);
+      detail = rows[selected] ? buildLogDetail(rows[selected]._raw) : null;
+      loading = logsLoading;
+      error = logsError;
+      break;
+    case 4: // Retention
+      columns = RETENTION_COLUMNS;
+      rows = formatConfigRows(retentionData);
+      detail = rows[selected] ? buildRetentionDetail(rows[selected]._raw) : null;
+      loading = retentionLoading;
+      error = retentionError;
+      break;
+  }
+
+  // ── Reset selection on tab change ───────────────────────────────────
+  useEffect(() => {
+    setSelected(0);
+  }, [activeTab]);
+
+  // ── Refresh current tab ─────────────────────────────────────────────
+  const refreshCurrent = useCallback(() => {
+    const refreshers = [refreshConfig, refreshKeys, refreshServices, refreshLogs, refreshRetention];
+    refreshers[activeTab]?.();
+  }, [activeTab, refreshConfig, refreshKeys, refreshServices, refreshLogs, refreshRetention]);
+
+  // ── Keyboard handling ──────────────────────────────────────────────
+  useInput((input, key) => {
+    if (!isActive) return;
+
+    // Tab to switch sub-tabs
+    if (matchKey('tab', input, key)) {
+      setActiveTab((t) => (t + 1) % TABS.length);
+      return;
+    }
+
+    // Manual refresh
+    if (matchKey('refresh', input, key)) {
+      refreshCurrent();
+      return;
+    }
+  }, { isActive });
+
+  // ── Tab bar rendering ──────────────────────────────────────────────
+  const tabBar = (
+    <Box marginBottom={1}>
+      {TABS.map((tab, i) => {
+        const isSel = i === activeTab;
+        return (
+          <React.Fragment key={tab}>
+            {i > 0 && <Text color={colors.subtle}> | </Text>}
+            <Text
+              color={isSel ? colors.cyberBlue : colors.dim}
+              bold={isSel}
+              underline={isSel}
+            >
+              {tab}
+            </Text>
+          </React.Fragment>
+        );
+      })}
+      <Text color={colors.dim}>  (Tab to switch)</Text>
+    </Box>
+  );
+
+  // ── Detail title ───────────────────────────────────────────────────
+  let detailTitle;
+  if (rows[selected]) {
+    switch (activeTab) {
+      case 0: detailTitle = rows[selected]._raw.key || rows[selected]._raw.name || 'Config'; break;
+      case 1: detailTitle = rows[selected]._raw.name || rows[selected]._raw.display_name || 'Key'; break;
+      case 2: detailTitle = rows[selected]._raw.name || rows[selected]._raw.display_name || 'Service'; break;
+      case 3: detailTitle = rows[selected]._raw.action || rows[selected]._raw.type || 'Log Entry'; break;
+      case 4: detailTitle = rows[selected]._raw.key || rows[selected]._raw.name || 'Retention'; break;
+    }
+  }
+
+  // ── Footer hint ────────────────────────────────────────────────────
+  const footer = [
+    '\u2191/k \u2193/j Navigate',
+    'Tab Switch tab',
+    'r Refresh',
+    'Esc Back',
+  ].join('  ');
+
+  // ── Render ─────────────────────────────────────────────────────────
+  return (
+    <Layout
+      title="Admin"
+      subtitle={TABS[activeTab]}
+      footer={footer}
+      left={
+        <Box flexDirection="column">
+          {/* Tab bar */}
+          {tabBar}
+
+          {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 config values set',
+              'No API keys — create one via `quox admin key create`',
+              'No services registered',
+              'No audit events yet',
+              'No retention settings configured',
+            ][activeTab]}
+            active={isActive}
+          />
+        </Box>
+      }
+      right={
+        <DetailPanel
+          title={detailTitle}
+          data={detail}
+        />
+      }
+    />
+  );
+}