@pellux/goodvibes-tui 0.20.0 → 0.20.1

package/src/renderer/mcp-workspace.ts

@@ -1,297 +1,237 @@
-import type { Line } from '../types/grid.ts';
-import { createEmptyLine, createStyledCell } from '../types/grid.ts';
 import type { McpWorkspace, McpWorkspaceRow } from '../input/mcp-workspace.ts';
-import { getDisplayWidth, wrapText } from '../utils/terminal-width.ts';
-
-const C = {
-  border: '#64748b',
-  title: '#67e8f9',
-  section: '#93c5fd',
-  text: '#e2e8f0',
-  muted: '#94a3b8',
-  dim: '#64748b',
-  selectedBg: '#223049',
-  panelBg: '#101720',
-  detailBg: '#111827',
-  good: '#22c55e',
-  warn: '#f59e0b',
-  bad: '#ef4444',
-  info: '#38bdf8',
-};
-
-type Style = Partial<Omit<Line[number], 'char'>>;
-
-function line(width: number, bg?: string): Line {
-  const out = createEmptyLine(width);
-  if (bg) {
-    for (let i = 0; i < out.length; i += 1) out[i] = createStyledCell(' ', { bg });
-  }
-  return out;
-}
-
-function write(out: Line, x: number, maxWidth: number, text: string, style: Style = {}): void {
-  let col = x;
-  let used = 0;
-  for (const ch of text) {
-    const w = getDisplayWidth(ch);
-    if (w <= 0) continue;
-    if (used + w > maxWidth || col >= out.length) break;
-    out[col] = createStyledCell(ch, style);
-    if (w > 1 && col + 1 < out.length) out[col + 1] = createStyledCell(' ', style);
-    col += w;
-    used += w;
-  }
-}
-
-function hline(width: number, left: string, fill: string, right: string): Line {
-  const out = line(width);
-  if (width <= 0) return out;
-  out[0] = createStyledCell(left, { fg: C.border });
-  for (let i = 1; i < width - 1; i += 1) out[i] = createStyledCell(fill, { fg: C.border });
-  if (width > 1) out[width - 1] = createStyledCell(right, { fg: C.border });
-  return out;
-}
-
-function content(width: number, bg = C.panelBg): Line {
-  const out = line(width, bg);
-  if (width > 0) out[0] = createStyledCell('|', { fg: C.border, bg });
-  if (width > 1) out[width - 1] = createStyledCell('|', { fg: C.border, bg });
-  return out;
-}
-
-function putVertical(out: Line, x: number, bg = C.panelBg): void {
-  if (x <= 0 || x >= out.length - 1) return;
-  out[x] = createStyledCell('|', { fg: C.border, bg });
-}
+import type { Line } from '../types/grid.ts';
+import { wrapText } from '../utils/terminal-width.ts';
+import { GLYPHS } from './ui-primitives.ts';
+import {
+  getFullscreenWorkspaceMetrics,
+  padDisplay,
+  renderFullscreenWorkspace,
+  stableWindow,
+  WORKSPACE_PALETTE as PALETTE,
+  type WorkspaceRow,
+} from './fullscreen-workspace.ts';
 
 function statusColor(text: string): string {
-  if (text.includes('failed') || text.includes('Save failed') || text.includes('Remove failed')) return C.bad;
-  if (text.includes('attention') || text.includes('quarantine')) return C.warn;
-  return C.muted;
+  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 ? C.good : C.warn;
+  return connected ? PALETTE.good : PALETTE.warn;
 }
 
 function rowLabel(row: McpWorkspaceRow): string {
-  if (row.type === 'server') return `${row.server.connected ? '[on] ' : '[off]'} ${row.server.name}`;
-  return `+ ${row.label}`;
+  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.role} / ${server.trustMode} / ${server.freshness} / ${server.source}`;
+    return `${server.connected ? 'connected' : 'offline'} · ${server.role} · ${server.trustMode} · schema ${server.freshness}`;
   }
   return row.detail;
 }
 
-function renderHeader(width: number, workspace: McpWorkspace): Line[] {
-  const top = hline(width, '+', '-', '+');
-  write(top, 2, Math.max(0, width - 4), ' MCP Workspace / Servers ', { fg: C.title, bold: true });
-  const state = workspace.mode === 'browse' ? 'Browser' : workspace.mode === 'form' ? 'Edit Server' : 'Confirm Remove';
-  write(top, Math.max(2, width - state.length - 4), state.length, state, { fg: C.section });
-  return [top];
-}
+function buildLeftRows(workspace: McpWorkspace, height: number): WorkspaceRow[] {
+  const rendered: WorkspaceRow[] = [];
+  let selectedRenderedIndex = 0;
+  let sawServerGroup = false;
+  let sawActionGroup = false;
 
-function renderLeftRail(workspace: McpWorkspace, width: number, height: number): Line[] {
-  const rows = workspace.rows;
-  const out: Line[] = [];
-  const selected = workspace.selectedIndex;
-  const visible = Math.max(1, height - 2);
-  const start = rows.length <= visible ? 0 : Math.max(0, Math.min(selected - Math.floor(visible / 2), rows.length - visible));
-  const end = Math.min(rows.length, start + visible);
-  const title = line(width, C.detailBg);
-  write(title, 1, width - 2, 'Servers and actions', { fg: C.section, bold: true, bg: C.detailBg });
-  out.push(title);
-  if (start > 0) {
-    const above = line(width, C.panelBg);
-    write(above, 1, width - 2, `^ ${start} item(s) above`, { fg: C.dim, bg: C.panelBg });
-    out.push(above);
-  }
-  for (let index = start; index < end && out.length < height; index += 1) {
-    const row = rows[index]!;
-    const selectedRow = index === selected && workspace.mode === 'browse';
-    const bg = selectedRow ? C.selectedBg : C.panelBg;
-    const item = line(width, bg);
-    write(item, 1, 2, selectedRow ? '>' : ' ', { fg: C.text, bg, bold: selectedRow });
-    write(item, 3, width - 4, rowLabel(row), {
-      fg: row.type === 'server' ? connectedColor(row.server.connected) : C.info,
-      bg,
-      bold: selectedRow || row.type === 'action',
-    });
-    out.push(item);
-    if (row.type === 'server' && out.length < height) {
-      const detail = line(width, bg);
-      write(detail, 5, width - 6, rowDetail(row), { fg: C.muted, bg });
-      out.push(detail);
+  workspace.rows.forEach((row, rowIndex) => {
+    if (row.type === 'server' && !sawServerGroup) {
+      rendered.push({ text: 'SERVERS', kind: 'group', bold: true });
+      sawServerGroup = true;
     }
+    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;
+    }
+
+    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',
+    });
+  });
+
+  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 (end < rows.length && out.length < height) {
-    const below = line(width, C.panelBg);
-    write(below, 1, width - 2, `v ${rows.length - end} item(s) below`, { fg: C.dim, bg: C.panelBg });
-    out.push(below);
+  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 (out.length < height) out.push(line(width, C.panelBg));
-  return out.slice(0, height);
+  while (rows.length < height) rows.push({ text: '', kind: 'empty' });
+  return rows.slice(0, height);
 }
 
-function selectedDetailLines(workspace: McpWorkspace, width: number): string[] {
+function selectedDetailLines(workspace: McpWorkspace, width: number): WorkspaceRow[] {
+  const lines: string[] = [];
   if (workspace.mode === 'form') {
     const field = workspace.formFields[workspace.formIndex];
-    return [
+    lines.push(
       workspace.editingServerName ? `Editing server: ${workspace.editingServerName}` : 'Adding an MCP server',
-      'This writes the selected project/global MCP config and reloads the runtime. External Claude/Desktop config files remain untouched.',
+      'Write a server through the SDK MCP config manager, then reload the live runtime without restarting the TUI.',
       field ? `${field.label}: ${field.help}` : '',
-      'Use Up/Down to choose fields. Type to edit text fields. Left/Right cycles role and trust mode. Enter saves only on Save and reload.',
-    ];
-  }
-  if (workspace.mode === 'delete-confirm') {
-    return [
+      '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') {
+    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.',
-    ];
-  }
-  const selected = workspace.selectedRow;
-  if (!selected) return ['No MCP rows available.'];
-  if (selected.type === 'action') {
-    return [selected.label, selected.detail];
+    );
+  } 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}` : ''}`] : []),
+      );
+    }
   }
-  const server = selected.server;
-  return [
-    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}` : ''}`] : []),
-  ];
-}
 
-function renderDetails(workspace: McpWorkspace, width: number, height: number): Line[] {
-  const out: Line[] = [];
-  const header = line(width, C.detailBg);
-  write(header, 1, width - 2, workspace.mode === 'browse' ? 'Selected MCP server' : 'MCP server form', {
-    fg: C.section,
-    bold: true,
-    bg: C.detailBg,
+  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,
+    }));
   });
-  out.push(header);
-  const wrapped = selectedDetailLines(workspace, width - 4).flatMap((entry) => wrapText(entry, Math.max(1, width - 4)));
-  for (const text of wrapped) {
-    const next = line(width, C.detailBg);
-    write(next, 1, width - 2, text, { fg: C.text, bg: C.detailBg });
-    out.push(next);
-    if (out.length >= height) break;
-  }
-  while (out.length < height) out.push(line(width, C.detailBg));
-  return out.slice(0, height);
 }
 
-function renderForm(workspace: McpWorkspace, width: number, height: number): Line[] {
-  const out: Line[] = [];
+function buildFormRows(workspace: McpWorkspace, width: number, height: number): WorkspaceRow[] {
+  const rows: WorkspaceRow[] = [];
   const fields = workspace.formFields;
-  const labelWidth = Math.min(22, Math.max(14, Math.floor(width * 0.24)));
-  const visible = Math.max(1, height - 1);
-  const start = fields.length <= visible ? 0 : Math.max(0, Math.min(workspace.formIndex - Math.floor(visible / 2), fields.length - visible));
-  for (let index = start; index < fields.length && out.length < height; index += 1) {
+  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 bg = selected ? C.selectedBg : C.panelBg;
-    const row = line(width, bg);
-    write(row, 1, 2, selected ? '>' : ' ', { fg: C.text, bg, bold: selected });
-    write(row, 3, labelWidth, field.label, { fg: field.id === 'save' ? C.good : field.id === 'cancel' ? C.warn : C.muted, bg, bold: selected });
-    if (field.id === 'save' || field.id === 'cancel') {
-      write(row, labelWidth + 5, width - labelWidth - 6, field.help, { fg: C.muted, bg });
-    } else {
-      const display = field.value.length > 0 ? field.value : '(empty)';
-      write(row, labelWidth + 5, width - labelWidth - 6, display, { fg: field.editable ? C.text : C.info, bg, bold: selected });
-    }
-    out.push(row);
+    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,
+    });
   }
-  while (out.length < height) out.push(line(width, C.panelBg));
-  return out.slice(0, height);
+  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 renderTools(workspace: McpWorkspace, width: number, height: number): Line[] {
-  const out: Line[] = [];
+function buildToolRows(workspace: McpWorkspace, width: number, height: number): WorkspaceRow[] {
   const server = workspace.selectedServer?.name;
   const tools = server ? workspace.tools.filter((tool) => tool.serverName === server) : workspace.tools;
-  const header = line(width, C.panelBg);
+  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}`;
-  write(header, 1, width - 2, label, { fg: C.section, bold: true, bg: C.panelBg });
-  out.push(header);
+  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 },
+  ];
+
   if (tools.length === 0) {
-    const empty = line(width, C.panelBg);
-    write(empty, 1, width - 2, workspace.loadingTools ? 'Loading tool list from connected MCP servers.' : 'No tools cached for the selected server. Press t to refresh.', { fg: C.muted, bg: C.panelBg });
-    out.push(empty);
+    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,
+    });
   } else {
-    for (const tool of tools.slice(0, Math.max(0, height - 1))) {
-      const row = line(width, C.panelBg);
-      write(row, 1, Math.min(34, width - 2), `${tool.serverName}:${tool.toolName}`, { fg: C.info, bg: C.panelBg });
-      write(row, Math.min(38, width - 2), Math.max(0, width - 40), tool.description ?? '', { fg: C.muted, bg: C.panelBg });
-      out.push(row);
+    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,
+      });
     }
   }
-  while (out.length < height) out.push(line(width, C.panelBg));
-  return out.slice(0, height);
+
+  while (rows.length < height) rows.push({ text: '', kind: 'empty' });
+  return rows.slice(0, height);
 }
 
-function renderBody(workspace: McpWorkspace, width: number, height: number): Line[] {
-  const leftWidth = Math.min(42, Math.max(28, Math.floor(width * 0.28)));
-  const rightWidth = Math.max(10, width - leftWidth - 3);
-  const topHeight = Math.max(8, Math.min(14, Math.floor(height * 0.34)));
-  const bottomHeight = Math.max(1, height - topHeight - 1);
-  const left = renderLeftRail(workspace, leftWidth, height);
-  const details = renderDetails(workspace, rightWidth, topHeight);
-  const bottom = workspace.mode === 'form'
-    ? renderForm(workspace, rightWidth, bottomHeight)
-    : renderTools(workspace, rightWidth, bottomHeight);
-  const right = [...details, line(rightWidth, C.panelBg), ...bottom].slice(0, height);
-  const out: Line[] = [];
-  for (let i = 0; i < height; i += 1) {
-    const row = content(width);
-    const leftRow = left[i] ?? line(leftWidth, C.panelBg);
-    const rightRow = right[i] ?? line(rightWidth, C.panelBg);
-    for (let x = 0; x < leftWidth && x + 1 < row.length; x += 1) row[x + 1] = leftRow[x] ?? createStyledCell(' ');
-    putVertical(row, leftWidth + 1);
-    for (let x = 0; x < rightWidth && leftWidth + 3 + x < row.length - 1; x += 1) {
-      row[leftWidth + 3 + x] = rightRow[x] ?? createStyledCell(' ');
-    }
-    out.push(row);
-  }
-  return out;
+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 },
+  ];
+  while (rows.length < height) rows.push({ text: '', kind: 'empty' });
+  return rows.slice(0, height);
 }
 
-function renderFooter(width: number, workspace: McpWorkspace): Line[] {
-  const status = content(width, C.detailBg);
-  const statusText = workspace.lastError ? workspace.status : workspace.status;
-  write(status, 2, width - 4, statusText, { fg: statusColor(statusText), bg: C.detailBg });
-  const controls = content(width, C.detailBg);
-  const text = workspace.mode === 'form'
-    ? 'Up/Down field  Type edit  Left/Right cycle  Enter save/cancel row  Esc back'
-    : workspace.mode === 'delete-confirm'
-      ? 'y confirm  n/Esc cancel'
-      : 'Up/Down choose  Enter edit/action  a add  e edit  d remove  r reload  t tools  Esc close';
-  write(controls, 2, width - 4, text, { fg: C.muted, bg: C.detailBg });
-  return [status, controls, hline(width, '+', '-', '+')];
+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 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';
 }
 
 export function renderMcpWorkspace(workspace: McpWorkspace, width: number, height: number): Line[] {
-  const safeWidth = Math.max(40, width);
-  const safeHeight = Math.max(12, height);
-  const bodyHeight = Math.max(1, safeHeight - 4);
-  const lines = [
-    ...renderHeader(safeWidth, workspace),
-    ...renderBody(workspace, safeWidth, bodyHeight),
-    ...renderFooter(safeWidth, workspace),
-  ];
-  return lines.slice(0, safeHeight);
+  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}`;
+
+  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),
+  });
 }

package/src/renderer/onboarding/onboarding-wizard.ts

@@ -1,5 +1,4 @@
 import type { Line } from '../../types/grid.ts';
-import { createStyledCell } from '../../types/grid.ts';
 import { fitDisplay, getDisplayWidth, truncateDisplay, wrapText } from '../../utils/terminal-width.ts';
 import {
   createOverlayBoxLayout,
@@ -9,6 +8,7 @@ import {
   OVERLAY_GLYPHS,
   putOverlayText,
 } from '../overlay-box.ts';
+import { clamp, drawVerticalRule, fillWidth } from '../fullscreen-primitives.ts';
 import { UI_TONES } from '../ui-primitives.ts';
 import {
   getOnboardingWizardBodyRows,
@@ -28,32 +28,6 @@ type RenderedFieldRow =
       readonly absoluteIndex: number;
     };
 
-function clamp(value: number, min: number, max: number): number {
-  return Math.max(min, Math.min(max, value));
-}
-
-function fillRange(line: Line, startX: number, width: number, bg: string): void {
-  for (let x = startX; x < Math.min(line.length, startX + width); x += 1) {
-    const cell = line[x];
-    if (!cell) continue;
-    line[x] = createStyledCell(cell.char, {
-      fg: cell.fg,
-      bg,
-      bold: cell.bold,
-      dim: cell.dim,
-      underline: cell.underline,
-      italic: cell.italic,
-      strikethrough: cell.strikethrough,
-      link: cell.link,
-    });
-  }
-}
-
-function drawVerticalRule(line: Line, x: number, fg: string, bg = ''): void {
-  if (x < 0 || x >= line.length) return;
-  line[x] = createStyledCell('│', { fg, bg });
-}
-
 function modeLabel(mode: OnboardingWizardController['mode']): string {
   if (mode === 'edit') return 'Edit existing';
   if (mode === 'reopen') return 'Reopen review';
@@ -250,7 +224,7 @@ function renderFieldRow(
   const selected = fieldRow.absoluteIndex === wizard.getSelectedFieldIndex();
   const field = fieldRow.field;
   const fieldBg = selected ? DEFAULT_OVERLAY_PALETTE.selectedBg : UI_TONES.bg.base;
-  fillRange(line, startX, width, fieldBg);
+  fillWidth(line, startX, width, fieldBg);
 
   const badge = truncateDisplay(`[${wizard.getFieldValueLabel(field)}]`, Math.max(8, Math.floor(width * 0.34)));
   const badgeWidth = getDisplayWidth(badge);
@@ -354,9 +328,9 @@ function renderWideLayout(
   lines.push(topLine);
 
   const headerLine = createOverlayContentLine(width, layout, borderFg, headerBg);
-  fillRange(headerLine, leftStart, leftWidth, railBg);
-  fillRange(headerLine, centerStart, centerWidth, headerBg);
-  fillRange(headerLine, rightStart, rightWidth, summaryBg);
+  fillWidth(headerLine, leftStart, leftWidth, railBg);
+  fillWidth(headerLine, centerStart, centerWidth, headerBg);
+  fillWidth(headerLine, rightStart, rightWidth, summaryBg);
   drawVerticalRule(headerLine, leftSeparatorX, borderFg, headerBg);
   drawVerticalRule(headerLine, rightSeparatorX, borderFg, headerBg);
   putOverlayText(headerLine, leftStart + 1, leftWidth - 2, 'Steps', {
@@ -388,9 +362,9 @@ function renderWideLayout(
 
   for (let row = 0; row < bodyRows; row += 1) {
     const line = createOverlayContentLine(width, layout, borderFg, bodyBg);
-    fillRange(line, leftStart, leftWidth, railBg);
-    fillRange(line, centerStart, centerWidth, bodyBg);
-    fillRange(line, rightStart, rightWidth, summaryBg);
+    fillWidth(line, leftStart, leftWidth, railBg);
+    fillWidth(line, centerStart, centerWidth, bodyBg);
+    fillWidth(line, rightStart, rightWidth, summaryBg);
     drawVerticalRule(line, leftSeparatorX, borderFg);
     drawVerticalRule(line, rightSeparatorX, borderFg);
 
@@ -411,20 +385,20 @@ function renderWideLayout(
         bg: bodyBg,
       });
     } else if (row === 3) {
-      fillRange(line, centerStart, centerWidth, railBg);
+      fillWidth(line, centerStart, centerWidth, railBg);
       putOverlayText(line, centerStart + 1, centerWidth - 2, truncateDisplay(controlsText(wizard), centerWidth - 2), {
         fg: UI_TONES.state.info,
         bg: railBg,
       });
     } else if (row === 4) {
-      fillRange(line, centerStart, centerWidth, DEFAULT_OVERLAY_PALETTE.selectedBg);
+      fillWidth(line, centerStart, centerWidth, DEFAULT_OVERLAY_PALETTE.selectedBg);
       putOverlayText(line, centerStart + 1, centerWidth - 2, truncateDisplay(`Focus: ${selectedText.title.replace(/^Selected: /, '')}`, centerWidth - 2), {
         fg: UI_TONES.fg.primary,
         bg: DEFAULT_OVERLAY_PALETTE.selectedBg,
         bold: true,
       });
     } else if (row === 5) {
-      fillRange(line, centerStart, centerWidth, DEFAULT_OVERLAY_PALETTE.selectedBg);
+      fillWidth(line, centerStart, centerWidth, DEFAULT_OVERLAY_PALETTE.selectedBg);
       putOverlayText(line, centerStart + 1, centerWidth - 2, truncateDisplay(selectedText.hint, centerWidth - 2), {
         fg: UI_TONES.fg.secondary,
         bg: DEFAULT_OVERLAY_PALETTE.selectedBg,
@@ -534,7 +508,7 @@ function renderCollapsedLayout(
   lines.push(topLine);
 
   const headerLine = createOverlayContentLine(width, layout, borderFg, headerBg);
-  fillRange(headerLine, innerStart, innerWidth, headerBg);
+  fillWidth(headerLine, innerStart, innerWidth, headerBg);
   putOverlayText(headerLine, innerStart + 1, innerWidth - 2, fitDisplay(`${modeLabel(wizard.mode)} • ${currentStep.shortLabel}`, innerWidth - 2), {
     fg: UI_TONES.state.active,
     bg: headerBg,
@@ -554,7 +528,7 @@ function renderCollapsedLayout(
 
   for (let row = 0; row < bodyRows; row += 1) {
     const line = createOverlayContentLine(width, layout, borderFg, bodyBg);
-    fillRange(line, innerStart, innerWidth, bodyBg);
+    fillWidth(line, innerStart, innerWidth, bodyBg);
 
     if (row === 0) {
       putOverlayText(line, innerStart + 1, innerWidth - 2, truncateDisplay(currentStep.title, innerWidth - 2), {
@@ -573,20 +547,20 @@ function renderCollapsedLayout(
         bg: bodyBg,
       });
     } else if (row === 3) {
-      fillRange(line, innerStart, innerWidth, UI_TONES.bg.section);
+      fillWidth(line, innerStart, innerWidth, UI_TONES.bg.section);
       putOverlayText(line, innerStart + 1, innerWidth - 2, truncateDisplay(controlsText(wizard), innerWidth - 2), {
         fg: UI_TONES.state.info,
         bg: UI_TONES.bg.section,
       });
     } else if (row === 4) {
-      fillRange(line, innerStart, innerWidth, DEFAULT_OVERLAY_PALETTE.selectedBg);
+      fillWidth(line, innerStart, innerWidth, DEFAULT_OVERLAY_PALETTE.selectedBg);
       putOverlayText(line, innerStart + 1, innerWidth - 2, truncateDisplay(`Focus: ${selectedText.title.replace(/^Selected: /, '')}`, innerWidth - 2), {
         fg: UI_TONES.fg.primary,
         bg: DEFAULT_OVERLAY_PALETTE.selectedBg,
         bold: true,
       });
     } else if (row === 5) {
-      fillRange(line, innerStart, innerWidth, DEFAULT_OVERLAY_PALETTE.selectedBg);
+      fillWidth(line, innerStart, innerWidth, DEFAULT_OVERLAY_PALETTE.selectedBg);
       putOverlayText(line, innerStart + 1, innerWidth - 2, truncateDisplay(selectedText.hint, innerWidth - 2), {
         fg: UI_TONES.fg.secondary,
         bg: DEFAULT_OVERLAY_PALETTE.selectedBg,