@pellux/goodvibes-tui 2.0.20 → 2.1.0

package/src/renderer/mcp-workspace.ts

@@ -1,237 +1,200 @@
+/**
+ * renderMcpWorkspace, the MCP server workspace as a kit modal with a list and a detail side:
+ * the server and action list on the left (✦ servers / actions groups, a ● or
+ * ○ connection marker, the selected row as the gradient) and the selected
+ * row's details in an element inset on the right (connection, trust, launch
+ * command, allowed paths and hosts, quarantine, the server's tools, and the
+ * status line). The add/edit form and the remove confirmation are sub-views
+ * of the same modal: Esc returns from them to the browser.
+ */
+
 import type { McpWorkspace, McpWorkspaceRow } from '../input/mcp-workspace.ts';
-import type { Line } from '@pellux/goodvibes-sdk/platform/types';
-import { wrapText } from '../utils/terminal-width.ts';
-import { GLYPHS } from './ui-primitives.ts';
+import { activeTokens } from './theme.ts';
 import {
-  getFullscreenWorkspaceMetrics,
-  padDisplay,
-  renderFullscreenWorkspace,
-  stableWindow,
-  WORKSPACE_PALETTE as PALETTE,
-  type WorkspaceRow,
-} from './fullscreen-workspace.ts';
+  beginModal,
+  finishModal,
+  searchRow,
+  scrollCountText,
+  type KitHint,
+  type ModalFrame,
+  type SurfaceLayer,
+} from './surface-kit.ts';
+import { drawList, type KitRow } from './surface-kit-list.ts';
+import { inset } from './surface-kit-parts.ts';
+import { drawTextBlock, splitListDetail, textBlockHeight, type TextLine } from './surface-kit-extra.ts';
 
 function statusColor(text: string): string {
-  if (text.includes('failed') || text.includes('Save failed') || text.includes('Remove failed')) return PALETTE.bad;
-  if (text.includes('attention') || text.includes('quarantine')) return PALETTE.warn;
-  return PALETTE.muted;
-}
-
-function connectedColor(connected: boolean): string {
-  return connected ? PALETTE.good : PALETTE.warn;
+  const t = activeTokens();
+  if (text.includes('failed')) return t.error;
+  if (text.includes('attention') || text.includes('quarantine')) return t.warning;
+  return t.textMuted;
 }
 
-function rowLabel(row: McpWorkspaceRow): string {
-  if (row.type === 'server') return `${row.server.name} (${row.server.source})`;
-  return row.label;
-}
-
-function rowDetail(row: McpWorkspaceRow): string {
-  if (row.type === 'server') {
-    const server = row.server;
-    return `${server.connected ? 'connected' : 'offline'} · ${server.role} · ${server.trustMode} · schema ${server.freshness}`;
+function browseRows(workspace: McpWorkspace): KitRow[] {
+  const t = activeTokens();
+  const rows: KitRow[] = [];
+  const visible = workspace.visibleRows;
+  const servers = visible.filter((row) => row.type === 'server');
+  rows.push({ header: 'Servers', headerRight: `${workspace.servers.filter((s) => s.connected).length}/${workspace.servers.length} connected` });
+  if (servers.length === 0) {
+    rows.push({ label: workspace.servers.length === 0 ? 'No configured servers' : 'No servers match', muted: true });
   }
-  return row.detail;
-}
-
-function buildLeftRows(workspace: McpWorkspace, height: number): WorkspaceRow[] {
-  const rendered: WorkspaceRow[] = [];
-  let selectedRenderedIndex = 0;
-  let sawServerGroup = false;
-  let sawActionGroup = false;
-
-  workspace.rows.forEach((row, rowIndex) => {
-    if (row.type === 'server' && !sawServerGroup) {
-      rendered.push({ text: 'SERVERS', kind: 'group', bold: true });
-      sawServerGroup = true;
+  let sawAction = false;
+  visible.forEach((row: McpWorkspaceRow, index) => {
+    const selected = workspace.mode === 'browse' && index === workspace.selectedIndex;
+    if (row.type === 'server') {
+      rows.push({
+        label: row.server.name,
+        desc: row.server.source,
+        mark: row.server.connected ? '●' : '○',
+        markFg: row.server.connected ? t.success : t.warning,
+        right: row.server.quarantineReason ? 'quarantined' : row.server.connected ? '' : 'offline',
+        rightFg: row.server.quarantineReason ? t.error : t.textFaint,
+        selected,
+      });
+      return;
     }
-    if (row.type === 'action' && !sawActionGroup) {
-      if (!sawServerGroup) rendered.push({ text: 'SERVERS', kind: 'group', bold: true });
-      if (workspace.servers.length === 0) rendered.push({ text: '  No configured servers', kind: 'item', fg: PALETTE.dim, dim: true });
-      rendered.push({ text: 'ACTIONS', kind: 'group', bold: true });
-      sawActionGroup = true;
+    if (!sawAction) {
+      rows.push({ header: 'Actions' });
+      sawAction = true;
     }
-
-    const selected = workspace.mode === 'browse' && rowIndex === workspace.selectedIndex;
-    if (selected) selectedRenderedIndex = rendered.length;
-    const marker = selected ? GLYPHS.navigation.selected : row.type === 'server' ? (row.server.connected ? '✓' : '•') : '+';
-    rendered.push({
-      text: `  ${marker} ${rowLabel(row)}`,
-      selected,
-      kind: 'item',
-      fg: row.type === 'server' ? connectedColor(row.server.connected) : PALETTE.info,
-      bold: selected || row.type === 'action',
-    });
+    rows.push({ label: row.label, mark: '+', markFg: t.info, selected });
   });
-
-  const visible = Math.max(1, height);
-  const window = stableWindow(rendered.length, selectedRenderedIndex, visible);
-  const rows = rendered.slice(window.start, window.end);
-  if (window.start > 0 && rows.length > 0) {
-    rows[0] = { text: `${GLYPHS.navigation.moreAbove} ${window.start} more row(s) above`, kind: 'more', fg: PALETTE.dim, dim: true };
-  }
-  if (window.end < rendered.length && rows.length > 0) {
-    rows[rows.length - 1] = { text: `${GLYPHS.navigation.moreBelow} ${rendered.length - window.end} more row(s) below`, kind: 'more', fg: PALETTE.dim, dim: true };
-  }
-  while (rows.length < height) rows.push({ text: '', kind: 'empty' });
-  return rows.slice(0, height);
+  return rows;
 }
 
-function selectedDetailLines(workspace: McpWorkspace, width: number): WorkspaceRow[] {
-  const lines: string[] = [];
-  if (workspace.mode === 'form') {
-    const field = workspace.formFields[workspace.formIndex];
-    lines.push(
-      workspace.editingServerName ? `Editing server: ${workspace.editingServerName}` : 'Adding an MCP server',
-      'Write a server through the SDK MCP config manager, then reload the live runtime without restarting the TUI.',
-      field ? `${field.label}: ${field.help}` : '',
-      'Project scope writes to this workspace. Global scope writes to your user MCP config. External Claude/Desktop config files are shown but not edited here.',
-    );
-  } else if (workspace.mode === 'delete-confirm') {
+function detailLines(workspace: McpWorkspace): TextLine[] {
+  const t = activeTokens();
+  const title = (text: string): TextLine => ({ text, style: { fg: t.text, bold: true } });
+  const body = (text: string): TextLine => ({ text, style: { fg: t.textMuted } });
+  const lines: TextLine[] = [];
+  const selected = workspace.selectedRow;
+  if (!selected) {
+    lines.push(body(workspace.query ? `No rows match "${workspace.query}".` : 'No MCP rows available.'));
+  } else if (selected.type === 'action') {
+    lines.push(title(selected.label), body(selected.detail));
+  } else {
+    const server = selected.server;
     lines.push(
-      `Remove configured server: ${workspace.editingServerName ?? '(unknown)'}`,
-      'This removes the selected writable project/global config entry and reloads MCP runtime state.',
-      'Press y to remove, n or Esc to cancel.',
+      title(server.name),
+      { text: `${server.connected ? 'connected' : 'offline'} · ${server.source} · schema ${server.freshness}`, style: { fg: server.connected ? t.success : t.warning } },
+      { text: '' },
+      body(`Role ${server.role} · trust ${server.trustMode}`),
+      body(`Command ${server.command ? `${server.command}${server.args?.length ? ` ${server.args.join(' ')}` : ''}` : '(runtime only; no launch config found)'}`),
+      body(`Allowed paths ${server.allowedPaths.length > 0 ? server.allowedPaths.join(', ') : '(none)'}`),
+      body(`Allowed hosts ${server.allowedHosts.length > 0 ? server.allowedHosts.join(', ') : '(none)'}`),
     );
-  } else {
-    const selected = workspace.selectedRow;
-    if (!selected) lines.push('No MCP rows available.');
-    else if (selected.type === 'action') lines.push(selected.label, selected.detail);
-    else {
-      const server = selected.server;
-      lines.push(
-        server.name,
-        `Connected: ${server.connected ? 'yes' : 'no'}    Source: ${server.source}    Schema: ${server.freshness}`,
-        `Role: ${server.role}    Trust: ${server.trustMode}`,
-        `Command: ${server.command ? `${server.command}${server.args?.length ? ` ${server.args.join(' ')}` : ''}` : '(runtime only; no launch config found)'}`,
-        `Allowed paths: ${server.allowedPaths.length > 0 ? server.allowedPaths.join(', ') : '(none)'}`,
-        `Allowed hosts: ${server.allowedHosts.length > 0 ? server.allowedHosts.join(', ') : '(none)'}`,
-        ...(server.quarantineReason ? [`Quarantine: ${server.quarantineReason}${server.quarantineDetail ? ` - ${server.quarantineDetail}` : ''}`] : []),
-      );
+    if (server.quarantineReason) {
+      lines.push({ text: `Quarantine: ${server.quarantineReason}${server.quarantineDetail ? ` - ${server.quarantineDetail}` : ''}`, style: { fg: t.error } });
     }
   }
-
-  lines.push('', `Status: ${workspace.status}`);
-  return lines.flatMap((text, index): WorkspaceRow[] => {
-    if (text === '') return [{ text: '', dim: true }];
-    return wrapText(text, Math.max(1, width)).map((wrapped, wrapIndex): WorkspaceRow => ({
-      text: wrapped,
-      fg: index === 0 ? PALETTE.title : text.startsWith('Status:') ? statusColor(workspace.status) : PALETTE.text,
-      bold: index === 0 && wrapIndex === 0,
-      dim: text.length === 0,
-    }));
-  });
-}
-
-function buildFormRows(workspace: McpWorkspace, width: number, height: number): WorkspaceRow[] {
-  const rows: WorkspaceRow[] = [];
-  const fields = workspace.formFields;
-  const labelWidth = Math.min(24, Math.max(14, Math.floor(width * 0.24)));
-  const valueWidth = Math.max(12, width - labelWidth - 20);
-  rows.push({
-    text: `  ${padDisplay('Field', labelWidth)}  ${padDisplay('Value', valueWidth)}  ${padDisplay('Edit', 10)}`,
-    fg: PALETTE.muted,
-    bold: true,
-  });
-
-  const visible = Math.max(1, height - 2);
-  const window = stableWindow(fields.length, workspace.formIndex, visible);
-  if (window.start > 0) rows.push({ text: `${GLYPHS.navigation.moreAbove} ${window.start} more field(s) above`, kind: 'more', fg: PALETTE.dim, dim: true });
-  for (let index = window.start; index < window.end; index += 1) {
-    const field = fields[index]!;
-    const selected = index === workspace.formIndex;
-    const marker = selected ? GLYPHS.navigation.selected : ' ';
-    const value = field.id === 'save' || field.id === 'cancel'
-      ? field.help
-      : field.value.length > 0 ? field.value : '(empty)';
-    rows.push({
-      text: `${marker} ${padDisplay(field.label, labelWidth)}  ${padDisplay(value, valueWidth)}  ${padDisplay(field.editable ? 'text' : 'cycle/action', 12)}`,
-      selected,
-      fg: field.id === 'save' ? PALETTE.good : field.id === 'cancel' ? PALETTE.warn : field.editable ? PALETTE.text : PALETTE.info,
-      bold: selected,
-    });
-  }
-  if (window.end < fields.length) rows.push({ text: `${GLYPHS.navigation.moreBelow} ${fields.length - window.end} more field(s) below`, kind: 'more', fg: PALETTE.dim, dim: true });
-  while (rows.length < height) rows.push({ text: '', kind: 'empty' });
-  return rows.slice(0, height);
-}
-
-function buildToolRows(workspace: McpWorkspace, width: number, height: number): WorkspaceRow[] {
+  lines.push({ text: '' });
   const server = workspace.selectedServer?.name;
   const tools = server ? workspace.tools.filter((tool) => tool.serverName === server) : workspace.tools;
-  const toolWidth = Math.min(36, Math.max(18, Math.floor(width * 0.34)));
-  const serverWidth = Math.min(24, Math.max(12, Math.floor(width * 0.20)));
-  const descriptionWidth = Math.max(12, width - toolWidth - serverWidth - 8);
-  const label = workspace.loadingTools
-    ? 'Tools: loading...'
-    : server
-      ? `Tools for ${server}: ${tools.length}`
-      : `Tools: ${tools.length}`;
-  const rows: WorkspaceRow[] = [
-    { text: label, fg: PALETTE.subtitle, bold: true },
-    { text: `  ${padDisplay('Tool', toolWidth)}  ${padDisplay('Server', serverWidth)}  ${padDisplay('Description', descriptionWidth)}`, fg: PALETTE.muted, bold: true },
-  ];
-
+  lines.push(title(workspace.loadingTools ? 'Tools: loading' : server ? `Tools for ${server}: ${tools.length}` : `Tools: ${tools.length}`));
   if (tools.length === 0) {
-    rows.push({
-      text: workspace.loadingTools ? 'Loading tool list from connected MCP servers.' : 'No tools cached for the selected server. Press t to refresh.',
-      fg: PALETTE.muted,
-      dim: true,
-    });
+    lines.push(body(workspace.loadingTools ? 'Loading the tool list from connected MCP servers.' : 'No tools cached for the selected server. Press t to refresh.'));
   } else {
-    for (const tool of tools.slice(0, Math.max(0, height - rows.length))) {
-      rows.push({
-        text: `  ${padDisplay(tool.toolName, toolWidth)}  ${padDisplay(tool.serverName, serverWidth)}  ${padDisplay(tool.description ?? '', descriptionWidth)}`,
-        fg: PALETTE.text,
-      });
+    for (const tool of tools) {
+      lines.push({ text: `${tool.toolName}${server ? '' : ` (${tool.serverName})`}${tool.description ? `  ${tool.description}` : ''}`, style: { fg: t.textMuted } });
     }
   }
+  return lines;
+}
 
-  while (rows.length < height) rows.push({ text: '', kind: 'empty' });
-  return rows.slice(0, height);
+function formRows(workspace: McpWorkspace): KitRow[] {
+  const t = activeTokens();
+  return workspace.formFields.map((field, index) => {
+    const selected = index === workspace.formIndex;
+    const isAction = field.id === 'save' || field.id === 'cancel';
+    const value = isAction ? undefined : field.value.length > 0 ? field.value : '(empty)';
+    return {
+      label: field.label,
+      desc: value !== undefined && selected && field.editable ? `${field.value}▏` : value,
+      right: !isAction && !field.editable ? '←→' : undefined,
+      labelFg: field.id === 'save' ? t.success : field.id === 'cancel' ? t.warning : undefined,
+      bold: isAction,
+      selected,
+    };
+  });
 }
 
-function buildDeleteRows(workspace: McpWorkspace, height: number): WorkspaceRow[] {
-  const rows: WorkspaceRow[] = [
-    { text: `${GLYPHS.navigation.selected} Confirm remove ${workspace.editingServerName ?? '(unknown)'}`, selected: true, fg: PALETTE.bad, bold: true },
-    { text: '  Cancel and return to MCP server browser', fg: PALETTE.muted },
+function formLines(workspace: McpWorkspace): TextLine[] {
+  const t = activeTokens();
+  const field = workspace.formFields[workspace.formIndex];
+  // The selected field's help leads: it is what the user needs right now.
+  return [
+    ...(field ? [{ text: field.label, style: { fg: t.text, bold: true } }, { text: field.help, style: { fg: t.textMuted } }, { text: '' }] : []),
+    { text: workspace.editingServerName ? `Editing server: ${workspace.editingServerName}` : 'Adding an MCP server', style: { fg: t.text, bold: true } },
+    { text: 'Writes a server through the SDK MCP config manager, then reloads the live runtime without restarting the TUI.', style: { fg: t.textMuted } },
+    { text: '' },
+    { text: 'Project scope writes to this workspace. Global scope writes to your user MCP config. External Claude/Desktop config files are shown but not edited here.', style: { fg: t.textFaint } },
   ];
-  while (rows.length < height) rows.push({ text: '', kind: 'empty' });
-  return rows.slice(0, height);
 }
 
-function buildControlRows(workspace: McpWorkspace, width: number, height: number): WorkspaceRow[] {
-  if (workspace.mode === 'form') return buildFormRows(workspace, width, height);
-  if (workspace.mode === 'delete-confirm') return buildDeleteRows(workspace, height);
-  return buildToolRows(workspace, width, height);
+function hintsFor(workspace: McpWorkspace): KitHint[] {
+  if (workspace.mode === 'form') return [['↑↓', 'field'], ['←→', 'cycle'], ['type', 'edit'], ['⏎', 'save or cancel row'], ['esc', 'back']];
+  if (workspace.mode === 'delete-confirm') return [['y', 'remove'], ['n', 'cancel'], ['esc', 'back']];
+  return [['↑↓', 'move'], ['⏎', 'edit or run'], ['a', 'add'], ['d', 'remove'], ['r', 'reload'], ['t', 'tools']];
 }
 
-function footerText(workspace: McpWorkspace): string {
-  if (workspace.mode === 'form') return 'Focus server form · Up/Down field · Left/Right cycle · Type edit · Enter save/cancel row · Esc back';
-  if (workspace.mode === 'delete-confirm') return 'Focus remove confirmation · y confirm · n/Esc cancel';
-  return 'Focus MCP workspace · Up/Down choose · Enter edit/action · a add · d remove · r reload · t tools · Esc close';
+function drawDetailInset(f: ModalFrame, split: ReturnType<typeof splitListDetail>, lines: readonly TextLine[]): void {
+  const t = activeTokens();
+  const p = inset(f.canvas, split.detailX, split.detailY, split.detailW, split.detailH);
+  const width = p.r - p.l + 1;
+  const need = textBlockHeight(lines, width);
+  const room = p.bottom - p.top + 1;
+  if (need <= room) {
+    drawTextBlock(f.canvas, p.l, p.top, width, lines, p.bottom);
+    return;
+  }
+  // Keep the last inset row for an honest count of what did not fit.
+  drawTextBlock(f.canvas, p.l, p.top, width, lines, p.bottom - 1);
+  f.canvas.put(p.l, p.bottom, `${need - room + 1} more lines`, { fg: t.textFaint });
 }
 
-export function renderMcpWorkspace(workspace: McpWorkspace, width: number, height: number): Line[] {
-  const metrics = getFullscreenWorkspaceMetrics({ width, height });
-  const connected = workspace.servers.filter((server) => server.connected).length;
-  const stateLabel = workspace.mode === 'browse' ? 'Browse' : workspace.mode === 'form' ? 'Edit Server' : 'Confirm Remove';
-  const mainHeader = workspace.mode === 'form'
-    ? 'MCP server form'
-    : workspace.mode === 'delete-confirm'
-      ? 'Remove MCP server'
-      : `Servers ${connected}/${workspace.servers.length} connected · Tools ${workspace.tools.length}`;
+export function renderMcpWorkspace(workspace: McpWorkspace, screenWidth: number, screenHeight: number): SurfaceLayer {
+  const t = activeTokens();
+  const crumbs = workspace.mode === 'form'
+    ? [workspace.editingServerName ? 'Edit server' : 'Add server']
+    : workspace.mode === 'delete-confirm' ? ['Remove server'] : [];
+  const f = beginModal(screenWidth, screenHeight, { title: 'MCP servers', crumbs, hints: hintsFor(workspace) });
+
+  // Status sits under both sides, wrapped in full.
+  const status: TextLine[] = [{ text: `Status: ${workspace.status}`, style: { fg: statusColor(workspace.status) } }];
+  const statusRows = textBlockHeight(status, f.r - f.l + 1);
+  const bodyBottom = f.bottom - statusRows - 1;
+  drawTextBlock(f.canvas, f.l, bodyBottom + 2, f.r - f.l + 1, status, f.bottom);
+
+  let top = f.top;
+  if (workspace.mode === 'browse') {
+    const total = workspace.rows.length;
+    searchRow(f, top, workspace.query, 'Filter servers and actions', workspace.query ? `${workspace.visibleRows.length} of ${total}` : `${workspace.tools.length} tools`);
+    top += 2;
+  }
 
-  return renderFullscreenWorkspace({
-    width,
-    height,
-    title: 'MCP Workspace / Servers',
-    stateLabel,
-    leftHeader: 'Servers',
-    mainHeader,
-    leftRows: buildLeftRows(workspace, metrics.bodyRows),
-    contextRows: selectedDetailLines(workspace, metrics.contextWidth),
-    controlRows: buildControlRows(workspace, metrics.contextWidth, metrics.controlRows),
-    footer: footerText(workspace),
-  });
+  if (workspace.mode === 'delete-confirm') {
+    const split = splitListDetail(f.l, f.r, top, bodyBottom, 0.45, 3);
+    drawList(f.canvas, {
+      rows: [
+        { label: `Remove ${workspace.editingServerName ?? '(unknown)'}`, danger: true, selected: true, mark: '✕', markFg: t.error, right: 'y' },
+        { label: 'Cancel and return to the server browser', right: 'n' },
+      ],
+      top: split.top, bottom: split.bottom, x0: split.x0, x1: split.x1,
+    });
+    drawDetailInset(f, split, [
+      { text: `Remove configured server: ${workspace.editingServerName ?? '(unknown)'}`, style: { fg: t.text, bold: true } },
+      { text: 'This removes the selected writable project or global config entry and reloads the MCP runtime.', style: { fg: t.textMuted } },
+      { text: '' },
+      { text: 'Press y to remove, n or Esc to cancel.', style: { fg: t.warning } },
+    ]);
+    return finishModal(f);
+  }
+
+  const rows = workspace.mode === 'form' ? formRows(workspace) : browseRows(workspace);
+  const split = splitListDetail(f.l, f.r, top, bodyBottom, 0.45);
+  const res = drawList(f.canvas, { rows, top: split.top, bottom: split.bottom, x0: split.x0, x1: split.x1 });
+  f.hintRight = scrollCountText(res.above, res.below);
+  drawDetailInset(f, split, workspace.mode === 'form' ? formLines(workspace) : detailLines(workspace));
+  return finishModal(f);
 }