@pellux/goodvibes-agent 1.0.37 → 1.0.39

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

@@ -1,18 +1,14 @@
 import type { Line } from '../../types/grid.ts';
-import { fitDisplay, getDisplayWidth, truncateDisplay, wrapText } from '../../utils/terminal-width.ts';
+import { getDisplayWidth, truncateDisplay, wrapText } from '../../utils/terminal-width.ts';
 import {
-  createOverlayBoxLayout,
-  createOverlayContentLine,
-  createOverlayFilledBorderLine,
-  DEFAULT_OVERLAY_PALETTE,
-  OVERLAY_GLYPHS,
-  putOverlayText,
-} from '../overlay-box.ts';
-import { clamp, drawVerticalRule, fillWidth } from '../fullscreen-primitives.ts';
-import { UI_TONES } from '../ui-primitives.ts';
+  getFullscreenWorkspaceMetrics,
+  renderFullscreenWorkspace,
+  stableWindow,
+  WORKSPACE_PALETTE as PALETTE,
+  type WorkspaceRow,
+} from '../fullscreen-workspace.ts';
+import { GLYPHS } from '../ui-primitives.ts';
 import {
-  getOnboardingWizardBodyRows,
-  getOnboardingWizardVisibleFieldCount,
   type OnboardingWizardController,
   type OnboardingWizardFieldDefinition,
   type OnboardingWizardStepDefinition,
@@ -45,106 +41,49 @@ function stepGlyph(
   step: OnboardingWizardStepDefinition,
   stepIndex: number,
 ): { readonly glyph: string; readonly fg: string } {
-  if (stepIndex === wizard.stepIndex) {
-    return { glyph: OVERLAY_GLYPHS.selected, fg: UI_TONES.state.active };
-  }
+  if (stepIndex === wizard.stepIndex) return { glyph: GLYPHS.navigation.selected, fg: PALETTE.info };
 
   const total = wizard.getStepFieldCount(stepIndex);
   const completed = wizard.getCompletedFieldCount(stepIndex);
-  if (wizard.isStepDirty(stepIndex)) {
-    return { glyph: '◈', fg: UI_TONES.state.warn };
-  }
-  if (total > 0 && completed === total) {
-    return { glyph: '✓', fg: UI_TONES.state.good };
-  }
-  return { glyph: '•', fg: UI_TONES.fg.muted };
+  if (wizard.isStepDirty(stepIndex)) return { glyph: GLYPHS.status.review, fg: PALETTE.warn };
+  if (total > 0 && completed === total) return { glyph: GLYPHS.status.success, fg: PALETTE.good };
+  return { glyph: GLYPHS.status.pending, fg: PALETTE.muted };
 }
 
-function fieldBadgeTone(
+function fieldRowPrefix(
   wizard: OnboardingWizardController,
   field: OnboardingWizardFieldDefinition,
+  selected: boolean,
 ): string {
-  if (field.kind === 'status') return UI_TONES.state.info;
-  if (field.kind === 'modelPicker') return UI_TONES.state.info;
-  if (field.kind === 'acknowledgement') {
-    const label = wizard.getFieldValueLabel(field);
-    return label === 'Accepted' ? UI_TONES.state.good : label === 'Pending' ? UI_TONES.state.warn : UI_TONES.fg.muted;
-  }
-  if (field.kind === 'checklist') {
-    return wizard.getFieldValue(field) ? UI_TONES.state.good : UI_TONES.fg.muted;
-  }
-  if (field.kind === 'radio') return UI_TONES.state.active;
-  if (field.kind === 'text' || field.kind === 'masked') {
-    const missingRequired = wizard.getFieldValueLabel(field) === 'Missing';
-    if (missingRequired) return UI_TONES.state.warn;
-    if (field.kind === 'masked') return UI_TONES.state.warn;
-  }
-  return UI_TONES.fg.secondary;
+  if (selected) return `${GLYPHS.navigation.selected} `;
+  if (wizard.isFieldDirty(field.id)) return `${GLYPHS.status.skipped} `;
+  if (field.kind === 'checklist') return (wizard.getFieldValue(field) as boolean) ? `${GLYPHS.status.success} ` : '□ ';
+  if (field.kind === 'acknowledgement') return (wizard.getFieldValue(field) as boolean) ? `${GLYPHS.status.success} ` : '□ ';
+  if (field.kind === 'action') return `${GLYPHS.navigation.next} `;
+  if (field.kind === 'radio') return `${GLYPHS.status.active} `;
+  return '  ';
 }
 
-function buildFieldRows(
+function fieldColor(
   wizard: OnboardingWizardController,
-  visibleFields: number,
-  capacity: number,
-): readonly RenderedFieldRow[] {
-  wizard.ensureSelectionVisible(visibleFields);
-  const fields = wizard.currentStep.fields;
-  const rows: RenderedFieldRow[] = [];
-  if (fields.length === 0 || capacity <= 0) return rows;
-
-  const allRows: RenderedFieldRow[] = [];
-  fields.forEach((field, absoluteIndex) => {
-    const spacerRows = Math.max(0, field.spacerBeforeRows ?? 0);
-    for (let index = 0; index < spacerRows; index += 1) {
-      allRows.push({ kind: 'empty' });
-    }
-    allRows.push({ kind: 'field', field, absoluteIndex });
-  });
-
-  const selectedFieldIndex = wizard.getSelectedFieldIndex();
-  const selectedRowIndex = Math.max(0, allRows.findIndex((row) => row.kind === 'field' && row.absoluteIndex === selectedFieldIndex));
-  const scrollFieldIndex = wizard.scrollOffsets[wizard.stepIndex] ?? 0;
-  const scrollRowIndex = allRows.findIndex((row) => row.kind === 'field' && row.absoluteIndex === scrollFieldIndex);
-  const maxStart = Math.max(0, allRows.length - capacity);
-  let start = clamp(scrollRowIndex >= 0 ? scrollRowIndex : 0, 0, maxStart);
-
-  if (selectedRowIndex < start) start = selectedRowIndex;
-  if (selectedRowIndex >= start + capacity) start = selectedRowIndex - capacity + 1;
-  start = clamp(start, 0, maxStart);
-
-  if (capacity > 1 && start > 0 && selectedRowIndex === start) start = Math.max(0, start - 1);
-  if (capacity > 1 && start + capacity < allRows.length && selectedRowIndex === start + capacity - 1) {
-    start = Math.min(maxStart, start + 1);
-  }
-
-  rows.push(...allRows.slice(start, start + capacity));
-  const firstVisibleRow = rows[0];
-  if (
-    start > 0
-    && rows.length > 0
-    && !(firstVisibleRow?.kind === 'field' && firstVisibleRow.absoluteIndex === selectedFieldIndex)
-  ) {
-    rows[0] = {
-      kind: 'moreAbove',
-      text: `${OVERLAY_GLYPHS.moreAbove} ${start} more above`,
-    };
-  }
-
-  const hiddenBelow = Math.max(0, allRows.length - (start + capacity));
-  const lastVisibleRow = rows[rows.length - 1];
-  if (
-    hiddenBelow > 0
-    && rows.length > 0
-    && !(lastVisibleRow?.kind === 'field' && lastVisibleRow.absoluteIndex === selectedFieldIndex)
-  ) {
-    rows[rows.length - 1] = {
-      kind: 'moreBelow',
-      text: `${OVERLAY_GLYPHS.moreBelow} ${hiddenBelow} more below`,
-    };
-  }
+  field: OnboardingWizardFieldDefinition,
+  selected: boolean,
+): string {
+  if (selected) return PALETTE.text;
+  if (field.kind === 'status' || field.kind === 'modelPicker') return PALETTE.info;
+  if (field.kind === 'masked') return PALETTE.warn;
+  if (field.kind === 'acknowledgement') return (wizard.getFieldValue(field) as boolean) ? PALETTE.good : PALETTE.warn;
+  if (field.kind === 'checklist') return (wizard.getFieldValue(field) as boolean) ? PALETTE.good : PALETTE.muted;
+  if (wizard.getFieldValueLabel(field) === 'Missing') return PALETTE.warn;
+  return PALETTE.text;
+}
 
-  while (rows.length < capacity) rows.push({ kind: 'empty' });
-  return rows.slice(0, capacity);
+function formatEditingValue(value: string, multiline: boolean): string {
+  if (!multiline) return value;
+  const lines = value.split(/\r?\n/);
+  if (lines.length <= 1) return value;
+  const preview = lines[lines.length - 1] ?? '';
+  return `${preview} (${lines.length} lines)`;
 }
 
 function fieldHint(
@@ -162,7 +101,7 @@ function fieldHint(
     const editingValue = field.kind === 'masked' && wizard.editBuffer.length > 0
       ? '•'.repeat(Math.min(12, Math.max(4, wizard.editBuffer.length)))
       : formatEditingValue(rawValue, field.kind === 'text' && field.multiline === true);
-    return `Editing: ${editingValue}█`;
+    return `Editing: ${editingValue}${GLYPHS.surface.cursor}`;
   }
 
   if (selected && field.kind === 'modelPicker') return `${field.hint} Press Enter to open picker.`;
@@ -175,28 +114,6 @@ function fieldHint(
   return field.hint;
 }
 
-function formatEditingValue(value: string, multiline: boolean): string {
-  if (!multiline) return value;
-  const lines = value.split(/\r?\n/);
-  if (lines.length <= 1) return value;
-  const preview = lines[lines.length - 1] ?? '';
-  return `${preview} (${lines.length} lines)`;
-}
-
-function fieldRowPrefix(
-  wizard: OnboardingWizardController,
-  field: OnboardingWizardFieldDefinition,
-  selected: boolean,
-): string {
-  if (selected) return `${OVERLAY_GLYPHS.selected} `;
-  if (wizard.isFieldDirty(field.id)) return '◇ ';
-  if (field.kind === 'checklist') return (wizard.getFieldValue(field) as boolean) ? '✓ ' : '□ ';
-  if (field.kind === 'acknowledgement') return (wizard.getFieldValue(field) as boolean) ? '✓ ' : '□ ';
-  if (field.kind === 'action') return '▶ ';
-  if (field.kind === 'radio') return '◉ ';
-  return '  ';
-}
-
 function selectedFieldText(wizard: OnboardingWizardController): {
   readonly title: string;
   readonly hint: string;
@@ -212,12 +129,7 @@ function selectedFieldText(wizard: OnboardingWizardController): {
   }
 
   const field = wizard.getSelectedField();
-  if (!field) {
-    return {
-      title: 'Selected: none',
-      hint: 'No selectable row is active on this screen.',
-    };
-  }
+  if (!field) return { title: 'Selected: none', hint: 'No selectable row is active on this screen.' };
 
   return {
     title: `Selected: ${field.label} [${wizard.getFieldValueLabel(field)}]`,
@@ -225,54 +137,14 @@ function selectedFieldText(wizard: OnboardingWizardController): {
   };
 }
 
-function renderFieldRow(
-  line: Line,
-  wizard: OnboardingWizardController,
-  fieldRow: RenderedFieldRow,
-  startX: number,
-  width: number,
-): void {
-  if (fieldRow.kind === 'empty') return;
-
-  if (fieldRow.kind === 'moreAbove' || fieldRow.kind === 'moreBelow') {
-    putOverlayText(line, startX + 1, width - 2, truncateDisplay(fieldRow.text, width - 2), {
-      fg: UI_TONES.fg.muted,
-      bg: UI_TONES.bg.base,
-      dim: true,
-    });
-    return;
-  }
-
-  const selected = fieldRow.absoluteIndex === wizard.getSelectedFieldIndex();
-  const field = fieldRow.field;
-  const fieldBg = selected ? DEFAULT_OVERLAY_PALETTE.selectedBg : UI_TONES.bg.base;
-  fillWidth(line, startX, width, fieldBg);
-
-  const badge = truncateDisplay(`[${wizard.getFieldValueLabel(field)}]`, Math.max(8, Math.floor(width * 0.34)));
-  const badgeWidth = getDisplayWidth(badge);
-  const labelWidth = Math.max(0, width - badgeWidth - 4);
-  const prefix = fieldRowPrefix(wizard, field, selected);
-
-  putOverlayText(line, startX + 1, labelWidth, truncateDisplay(`${prefix}${field.label}`, labelWidth), {
-    fg: UI_TONES.fg.primary,
-    bg: fieldBg,
-    bold: selected,
-  });
-  putOverlayText(line, startX + width - badgeWidth - 1, badgeWidth, badge, {
-    fg: fieldBadgeTone(wizard, field),
-    bg: fieldBg,
-    bold: selected,
-  });
-}
-
 function footerText(wizard: OnboardingWizardController): string {
   if (wizard.isEditingTextField()) {
     return wizard.isEditingMultilineTextField()
-      ? '[Enter] Save value  [Ctrl-J] New line  [Esc] Cancel edit  [Backspace] Delete char  [Del/Ctrl+U] Clear value'
-      : '[Enter] Save value  [Esc] Cancel edit  [Backspace] Delete char  [Del/Ctrl+U] Clear value';
+      ? 'Controls: [Enter] save · [Ctrl-J] new line · [Esc] cancel · [Backspace] delete · [Del/Ctrl+U] clear'
+      : 'Controls: [Enter] save · [Esc] cancel · [Backspace] delete · [Del/Ctrl+U] clear';
   }
 
-  return '[Enter] Toggle/open  [Esc] Close  [Tab/Shift+Tab] Screen  [↑↓] Move  [Del/Ctrl+U] Clear input';
+  return 'Controls: [Enter] toggle/open · [Esc] close · [Tab/Shift+Tab] screen · [Up/Down] move · [Del/Ctrl+U] clear';
 }
 
 function controlsText(wizard: OnboardingWizardController): string {
@@ -281,352 +153,199 @@ function controlsText(wizard: OnboardingWizardController): string {
       ? 'Controls: Enter saves, Ctrl-J inserts a line, Esc cancels, Backspace deletes, Del clears.'
       : 'Controls: Enter saves, Esc cancels, Backspace deletes, Del clears.';
   }
+
   return 'Controls: Enter selects, Del clears, Tab moves.';
 }
 
-function renderWideLayout(
+function buildFieldRows(
   wizard: OnboardingWizardController,
-  width: number,
-  viewportHeight: number,
-  layout: ReturnType<typeof createOverlayBoxLayout>,
-): Line[] {
-  const lines: Line[] = [];
-  const bodyRows = getOnboardingWizardBodyRows(viewportHeight);
-  const visibleFields = getOnboardingWizardVisibleFieldCount(viewportHeight);
-  const currentStep = wizard.currentStep;
-  const borderFg = DEFAULT_OVERLAY_PALETTE.borderFg;
-  const headerBg = UI_TONES.bg.title;
-  const railBg = UI_TONES.bg.section;
-  const bodyBg = UI_TONES.bg.base;
-  const summaryBg = UI_TONES.bg.summary;
-  const innerLeft = layout.margin + 1;
-  const availableInner = layout.innerWidth - 2;
-  const leftWidthBase = layout.innerWidth >= 150 ? 32 : layout.innerWidth >= 108 ? 28 : 24;
-  const rightWidthBase = layout.innerWidth >= 150 ? 34 : layout.innerWidth >= 108 ? 32 : 24;
-  const minCenterWidth = layout.innerWidth >= 120 ? 48 : 40;
-  let leftWidth = Math.min(leftWidthBase, Math.max(20, availableInner - minCenterWidth - 12));
-  let rightWidth = Math.min(rightWidthBase, Math.max(22, availableInner - minCenterWidth - leftWidth));
-  let centerWidth = layout.innerWidth - leftWidth - rightWidth - 2;
-
-  if (centerWidth < minCenterWidth) {
-    const deficit = minCenterWidth - centerWidth;
-    const leftCut = Math.min(Math.max(0, leftWidth - 20), Math.ceil(deficit / 2));
-    leftWidth -= leftCut;
-    rightWidth -= Math.min(Math.max(0, rightWidth - 22), deficit - leftCut);
-    centerWidth = layout.innerWidth - leftWidth - rightWidth - 2;
-  }
-
-  const leftStart = innerLeft;
-  const leftSeparatorX = leftStart + leftWidth;
-  const centerStart = leftSeparatorX + 1;
-  const rightSeparatorX = centerStart + centerWidth;
-  const rightStart = rightSeparatorX + 1;
-  const descriptionLines = wrapText(currentStep.description, Math.max(18, centerWidth - 2)).slice(0, 2);
-  const summaryLines = [
-    currentStep.summaryTitle,
-    ...currentStep.summaryLines.slice(0, 2),
-    `Fields ${wizard.getCompletedFieldCount(wizard.stepIndex)}/${wizard.getStepFieldCount(wizard.stepIndex)} complete`,
-    changedScreensLabel(wizard),
-  ];
-  const selectedText = selectedFieldText(wizard);
-  const selectedHintLines = wrapText(selectedText.hint, Math.max(18, centerWidth - 2)).slice(0, 3);
-  const fieldStartRow = 8;
-  const fieldRows = buildFieldRows(wizard, visibleFields, Math.max(0, bodyRows - fieldStartRow));
+  visibleFields: number,
+  capacity: number,
+): readonly RenderedFieldRow[] {
+  wizard.ensureSelectionVisible(visibleFields);
+  const fields = wizard.currentStep.fields;
+  const rows: RenderedFieldRow[] = [];
+  if (fields.length === 0 || capacity <= 0) return rows;
 
-  const topLine = createOverlayFilledBorderLine(
-    width,
-    layout,
-    OVERLAY_GLYPHS.topLeft,
-    OVERLAY_GLYPHS.horizontal,
-    OVERLAY_GLYPHS.topRight,
-    borderFg,
-    headerBg,
-  );
-  putOverlayText(topLine, layout.margin + 2, layout.width - 4, 'Onboarding Wizard', {
-    fg: UI_TONES.fg.primary,
-    bg: headerBg,
-    bold: true,
-  });
-  const meta = `${modeLabel(wizard.mode)}  ${wizard.stepIndex + 1}/${wizard.steps.length}  ${changedScreensLabel(wizard)}`;
-  putOverlayText(topLine, Math.max(layout.margin + 2, layout.margin + layout.width - getDisplayWidth(meta) - 3), layout.width - 4, meta, {
-    fg: UI_TONES.fg.secondary,
-    bg: headerBg,
-  });
-  lines.push(topLine);
-
-  const headerLine = createOverlayContentLine(width, layout, borderFg, headerBg);
-  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', {
-    fg: UI_TONES.fg.secondary,
-    bg: railBg,
-    bold: true,
-  });
-  putOverlayText(headerLine, centerStart + 1, centerWidth - 2, truncateDisplay(currentStep.title, centerWidth - 2), {
-    fg: UI_TONES.state.active,
-    bg: headerBg,
-    bold: true,
-  });
-  putOverlayText(headerLine, rightStart + 1, rightWidth - 2, 'Summary', {
-    fg: UI_TONES.fg.secondary,
-    bg: summaryBg,
-    bold: true,
+  const allRows: RenderedFieldRow[] = [];
+  fields.forEach((field, absoluteIndex) => {
+    const spacerRows = Math.max(0, field.spacerBeforeRows ?? 0);
+    for (let index = 0; index < spacerRows; index += 1) allRows.push({ kind: 'empty' });
+    allRows.push({ kind: 'field', field, absoluteIndex });
   });
-  lines.push(headerLine);
 
-  lines.push(createOverlayFilledBorderLine(
-    width,
-    layout,
-    OVERLAY_GLYPHS.teeLeft,
-    OVERLAY_GLYPHS.horizontal,
-    OVERLAY_GLYPHS.teeRight,
-    borderFg,
-    bodyBg,
-  ));
-
-  for (let row = 0; row < bodyRows; row += 1) {
-    const line = createOverlayContentLine(width, layout, borderFg, bodyBg);
-    fillWidth(line, leftStart, leftWidth, railBg);
-    fillWidth(line, centerStart, centerWidth, bodyBg);
-    fillWidth(line, rightStart, rightWidth, summaryBg);
-    drawVerticalRule(line, leftSeparatorX, borderFg);
-    drawVerticalRule(line, rightSeparatorX, borderFg);
-
-    if (row === 0) {
-      putOverlayText(line, centerStart + 1, centerWidth - 2, truncateDisplay(currentStep.title, centerWidth - 2), {
-        fg: UI_TONES.fg.primary,
-        bg: bodyBg,
-        bold: true,
-      });
-    } else if (row === 1) {
-      putOverlayText(line, centerStart + 1, centerWidth - 2, descriptionLines[0] ?? '', {
-        fg: UI_TONES.fg.secondary,
-        bg: bodyBg,
-      });
-    } else if (row === 2) {
-      putOverlayText(line, centerStart + 1, centerWidth - 2, descriptionLines[1] ?? '', {
-        fg: UI_TONES.fg.secondary,
-        bg: bodyBg,
-      });
-    } else if (row === 3) {
-      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) {
-      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 && row <= 7) {
-      fillWidth(line, centerStart, centerWidth, DEFAULT_OVERLAY_PALETTE.selectedBg);
-      putOverlayText(line, centerStart + 1, centerWidth - 2, selectedHintLines[row - 5] ?? '', {
-        fg: UI_TONES.fg.secondary,
-        bg: DEFAULT_OVERLAY_PALETTE.selectedBg,
-      });
-    } else {
-      renderFieldRow(line, wizard, fieldRows[row - fieldStartRow] ?? { kind: 'empty' }, centerStart, centerWidth);
-    }
+  const selectedFieldIndex = wizard.getSelectedFieldIndex();
+  const selectedRowIndex = Math.max(0, allRows.findIndex((row) => row.kind === 'field' && row.absoluteIndex === selectedFieldIndex));
+  const scrollFieldIndex = wizard.scrollOffsets[wizard.stepIndex] ?? 0;
+  const scrollRowIndex = allRows.findIndex((row) => row.kind === 'field' && row.absoluteIndex === scrollFieldIndex);
+  const maxStart = Math.max(0, allRows.length - capacity);
+  let start = Math.max(0, Math.min(scrollRowIndex >= 0 ? scrollRowIndex : 0, maxStart));
 
-    const step = wizard.steps[row] ?? null;
-    if (step) {
-      const stepState = stepGlyph(wizard, step, row);
-      const completion = `${wizard.getCompletedFieldCount(row)}/${wizard.getStepFieldCount(row)}`;
-      const completionWidth = getDisplayWidth(completion);
-      const stepLabelWidth = Math.max(0, leftWidth - completionWidth - 4);
-      putOverlayText(line, leftStart + 1, stepLabelWidth, truncateDisplay(`${stepState.glyph} ${row + 1}. ${step.shortLabel}`, stepLabelWidth), {
-        fg: stepState.fg,
-        bg: railBg,
-        bold: row === wizard.stepIndex,
-      });
-      putOverlayText(line, Math.max(leftStart + 1, leftStart + leftWidth - completionWidth - 2), completionWidth, completion, {
-        fg: wizard.isStepDirty(row) ? UI_TONES.state.warn : UI_TONES.fg.muted,
-        bg: railBg,
-      });
-    }
+  if (selectedRowIndex < start) start = selectedRowIndex;
+  if (selectedRowIndex >= start + capacity) start = selectedRowIndex - capacity + 1;
+  start = Math.max(0, Math.min(start, maxStart));
 
-    const summaryText = summaryLines[row];
-    if (summaryText) {
-      putOverlayText(line, rightStart + 1, rightWidth - 2, truncateDisplay(summaryText, rightWidth - 2), {
-        fg: row === 0 ? UI_TONES.state.info : UI_TONES.fg.secondary,
-        bg: summaryBg,
-        bold: row === 0,
-        dim: row > 0,
-      });
-    }
+  if (capacity > 1 && start > 0 && selectedRowIndex === start) start = Math.max(0, start - 1);
+  if (capacity > 1 && start + capacity < allRows.length && selectedRowIndex === start + capacity - 1) {
+    start = Math.min(maxStart, start + 1);
+  }
 
-    lines.push(line);
+  rows.push(...allRows.slice(start, start + capacity));
+  const firstVisibleRow = rows[0];
+  if (
+    start > 0
+    && rows.length > 0
+    && !(firstVisibleRow?.kind === 'field' && firstVisibleRow.absoluteIndex === selectedFieldIndex)
+  ) {
+    rows[0] = { kind: 'moreAbove', text: `${GLYPHS.navigation.moreAbove} ${start} more above` };
   }
 
-  lines.push(createOverlayFilledBorderLine(
-    width,
-    layout,
-    OVERLAY_GLYPHS.teeLeft,
-    OVERLAY_GLYPHS.horizontal,
-    OVERLAY_GLYPHS.teeRight,
-    borderFg,
-    bodyBg,
-  ));
-
-  const footer = createOverlayFilledBorderLine(
-    width,
-    layout,
-    OVERLAY_GLYPHS.bottomLeft,
-    OVERLAY_GLYPHS.horizontal,
-    OVERLAY_GLYPHS.bottomRight,
-    borderFg,
-    headerBg,
-  );
-  putOverlayText(footer, layout.margin + 2, layout.width - 4, truncateDisplay(footerText(wizard), layout.width - 4), {
-    fg: UI_TONES.fg.muted,
-    bg: headerBg,
-    dim: true,
-  });
-  lines.push(footer);
+  const hiddenBelow = Math.max(0, allRows.length - (start + capacity));
+  const lastVisibleRow = rows[rows.length - 1];
+  if (
+    hiddenBelow > 0
+    && rows.length > 0
+    && !(lastVisibleRow?.kind === 'field' && lastVisibleRow.absoluteIndex === selectedFieldIndex)
+  ) {
+    rows[rows.length - 1] = { kind: 'moreBelow', text: `${GLYPHS.navigation.moreBelow} ${hiddenBelow} more below` };
+  }
 
-  return lines.slice(0, viewportHeight);
+  while (rows.length < capacity) rows.push({ kind: 'empty' });
+  return rows.slice(0, capacity);
 }
 
-function renderCollapsedLayout(
-  wizard: OnboardingWizardController,
+function pushWrapped(
+  rows: WorkspaceRow[],
+  text: string,
   width: number,
-  viewportHeight: number,
-  layout: ReturnType<typeof createOverlayBoxLayout>,
-): Line[] {
-  const lines: Line[] = [];
-  const bodyRows = getOnboardingWizardBodyRows(viewportHeight);
-  const visibleFields = getOnboardingWizardVisibleFieldCount(viewportHeight);
-  const currentStep = wizard.currentStep;
-  const borderFg = DEFAULT_OVERLAY_PALETTE.borderFg;
-  const headerBg = UI_TONES.bg.title;
-  const bodyBg = UI_TONES.bg.base;
-  const innerStart = layout.margin + 1;
-  const innerWidth = layout.innerWidth;
-  const descriptionLines = wrapText(currentStep.description, Math.max(14, innerWidth - 2)).slice(0, 2);
-  const selectedText = selectedFieldText(wizard);
-  const selectedHintLines = wrapText(selectedText.hint, Math.max(14, innerWidth - 2)).slice(0, 3);
-  const fieldStartRow = 8;
-  const fieldRows = buildFieldRows(wizard, visibleFields, Math.max(0, bodyRows - fieldStartRow));
-
-  const topLine = createOverlayFilledBorderLine(
-    width,
-    layout,
-    OVERLAY_GLYPHS.topLeft,
-    OVERLAY_GLYPHS.horizontal,
-    OVERLAY_GLYPHS.topRight,
-    borderFg,
-    headerBg,
-  );
-  putOverlayText(topLine, layout.margin + 2, layout.width - 4, 'Onboarding Wizard', {
-    fg: UI_TONES.fg.primary,
-    bg: headerBg,
-    bold: true,
-  });
-  const meta = `${wizard.stepIndex + 1}/${wizard.steps.length} • ${changedScreensLabel(wizard)}`;
-  putOverlayText(topLine, Math.max(layout.margin + 2, layout.margin + layout.width - getDisplayWidth(meta) - 3), layout.width - 4, meta, {
-    fg: UI_TONES.fg.secondary,
-    bg: headerBg,
-  });
-  lines.push(topLine);
-
-  const headerLine = createOverlayContentLine(width, layout, borderFg, 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,
-    bold: true,
+  options: Partial<WorkspaceRow> = {},
+): void {
+  if (text.length === 0) {
+    rows.push({ text: '', kind: 'empty' });
+    return;
+  }
+  for (const line of wrapText(text, Math.max(1, width))) {
+    rows.push({ text: line, ...options });
+  }
+}
+
+function buildStepRows(wizard: OnboardingWizardController, height: number): WorkspaceRow[] {
+  const rendered = wizard.steps.map((step, stepIndex): WorkspaceRow => {
+    const selected = stepIndex === wizard.stepIndex;
+    const state = stepGlyph(wizard, step, stepIndex);
+    const completion = `${wizard.getCompletedFieldCount(stepIndex)}/${wizard.getStepFieldCount(stepIndex)}`;
+    return {
+      text: `${state.glyph} ${stepIndex + 1}. ${step.shortLabel} ${completion}`,
+      selected,
+      kind: 'item',
+      fg: state.fg,
+      bold: selected,
+    };
   });
-  lines.push(headerLine);
 
-  lines.push(createOverlayFilledBorderLine(
-    width,
-    layout,
-    OVERLAY_GLYPHS.teeLeft,
-    OVERLAY_GLYPHS.horizontal,
-    OVERLAY_GLYPHS.teeRight,
-    borderFg,
-    bodyBg,
-  ));
-
-  for (let row = 0; row < bodyRows; row += 1) {
-    const line = createOverlayContentLine(width, layout, borderFg, bodyBg);
-    fillWidth(line, innerStart, innerWidth, bodyBg);
-
-    if (row === 0) {
-      putOverlayText(line, innerStart + 1, innerWidth - 2, truncateDisplay(currentStep.title, innerWidth - 2), {
-        fg: UI_TONES.fg.primary,
-        bg: bodyBg,
-        bold: true,
-      });
-    } else if (row === 1) {
-      putOverlayText(line, innerStart + 1, innerWidth - 2, descriptionLines[0] ?? '', {
-        fg: UI_TONES.fg.secondary,
-        bg: bodyBg,
-      });
-    } else if (row === 2) {
-      putOverlayText(line, innerStart + 1, innerWidth - 2, descriptionLines[1] ?? '', {
-        fg: UI_TONES.fg.secondary,
-        bg: bodyBg,
-      });
-    } else if (row === 3) {
-      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) {
-      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 && row <= 7) {
-      fillWidth(line, innerStart, innerWidth, DEFAULT_OVERLAY_PALETTE.selectedBg);
-      putOverlayText(line, innerStart + 1, innerWidth - 2, selectedHintLines[row - 5] ?? '', {
-        fg: UI_TONES.fg.secondary,
-        bg: DEFAULT_OVERLAY_PALETTE.selectedBg,
-      });
-    } else {
-      renderFieldRow(line, wizard, fieldRows[row - fieldStartRow] ?? { kind: 'empty' }, innerStart, innerWidth);
+  const visible = Math.max(1, height);
+  const window = stableWindow(rendered.length, wizard.stepIndex, 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 step(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 step(s) below`, kind: 'more', fg: PALETTE.dim, dim: true };
+  }
+  while (rows.length < height) rows.push({ text: '', kind: 'empty' });
+  return rows.slice(0, height);
+}
+
+function buildContextRows(wizard: OnboardingWizardController, width: number): WorkspaceRow[] {
+  const step = wizard.currentStep;
+  const selected = selectedFieldText(wizard);
+  const rows: WorkspaceRow[] = [
+    { text: step.title, fg: PALETTE.title, bold: true },
+  ];
+  const pushSummaryRows = () => {
+    rows.push({ text: 'Summary', fg: PALETTE.subtitle, bold: true });
+    rows.push({ text: step.summaryTitle, fg: PALETTE.info, bold: true });
+    for (const line of step.summaryLines.slice(0, 4)) {
+      pushWrapped(rows, line, width, { fg: PALETTE.text });
     }
+    rows.push({
+      text: `Fields ${wizard.getCompletedFieldCount(wizard.stepIndex)}/${wizard.getStepFieldCount(wizard.stepIndex)} complete · ${changedScreensLabel(wizard)}`,
+      fg: wizard.dirtyStepCount > 0 ? PALETTE.warn : PALETTE.muted,
+    });
+  };
+  const pushSelectedRows = () => {
+    rows.push({ text: selected.title, fg: PALETTE.info, bold: true });
+    pushWrapped(rows, selected.hint, width, { fg: PALETTE.text });
+    pushWrapped(rows, controlsText(wizard), width, { fg: PALETTE.info });
+  };
 
-    lines.push(line);
+  pushWrapped(rows, step.description, width, { fg: PALETTE.text });
+  rows.push({ text: '', kind: 'empty' });
+
+  if (wizard.isEditingTextField()) {
+    pushSelectedRows();
+    rows.push({ text: '', kind: 'empty' });
+    pushSummaryRows();
+  } else {
+    pushSummaryRows();
+    rows.push({ text: '', kind: 'empty' });
+    pushSelectedRows();
   }
 
-  lines.push(createOverlayFilledBorderLine(
-    width,
-    layout,
-    OVERLAY_GLYPHS.teeLeft,
-    OVERLAY_GLYPHS.horizontal,
-    OVERLAY_GLYPHS.teeRight,
-    borderFg,
-    bodyBg,
-  ));
-
-  const footer = createOverlayFilledBorderLine(
-    width,
-    layout,
-    OVERLAY_GLYPHS.bottomLeft,
-    OVERLAY_GLYPHS.horizontal,
-    OVERLAY_GLYPHS.bottomRight,
-    borderFg,
-    headerBg,
-  );
-  putOverlayText(footer, layout.margin + 2, layout.width - 4, truncateDisplay(footerText(wizard), layout.width - 4), {
-    fg: UI_TONES.fg.muted,
-    bg: headerBg,
-    dim: true,
+  if (wizard.hydrationPending || wizard.hydrationError !== null || wizard.applyFeedback !== null) {
+    rows.push({ text: '', kind: 'empty' });
+  }
+  if (wizard.hydrationPending) {
+    rows.push({ text: 'Loading current settings...', fg: PALETTE.info, bold: true });
+  }
+  if (wizard.hydrationError !== null) {
+    pushWrapped(rows, `Current settings could not load: ${wizard.hydrationError}`, width, { fg: PALETTE.bad, bold: true });
+  }
+  if (wizard.applyFeedback !== null) {
+    const feedbackColor = wizard.applyFeedback.severity === 'error'
+      ? PALETTE.bad
+      : wizard.applyFeedback.severity === 'warning'
+        ? PALETTE.warn
+        : PALETTE.info;
+    rows.push({ text: wizard.applyFeedback.title, fg: feedbackColor, bold: true });
+    pushWrapped(rows, wizard.applyFeedback.summary, width, { fg: PALETTE.text });
+    for (const message of wizard.applyFeedback.messages) {
+      pushWrapped(rows, message, width, { fg: PALETTE.muted });
+    }
+  }
+
+  return rows;
+}
+
+function formatFieldRowText(wizard: OnboardingWizardController, field: OnboardingWizardFieldDefinition, selected: boolean, width: number): string {
+  const badge = `[${wizard.getFieldValueLabel(field)}]`;
+  const badgeWidth = getDisplayWidth(badge);
+  const labelWidth = Math.max(1, width - badgeWidth - 2);
+  const label = truncateDisplay(`${fieldRowPrefix(wizard, field, selected)}${field.label}`, labelWidth);
+  return `${label}${' '.repeat(Math.max(1, width - getDisplayWidth(label) - badgeWidth))}${badge}`;
+}
+
+function buildControlRows(wizard: OnboardingWizardController, width: number, height: number): WorkspaceRow[] {
+  const visibleFields = Math.max(1, height);
+  const fieldRows = buildFieldRows(wizard, visibleFields, height);
+  const rows = fieldRows.map((row): WorkspaceRow => {
+    if (row.kind === 'empty') return { text: '', kind: 'empty' };
+    if (row.kind === 'moreAbove' || row.kind === 'moreBelow') {
+      return { text: row.text, kind: 'more', fg: PALETTE.dim, dim: true };
+    }
+
+    const selected = row.absoluteIndex === wizard.getSelectedFieldIndex();
+    return {
+      text: formatFieldRowText(wizard, row.field, selected, width),
+      selected,
+      kind: 'item',
+      fg: fieldColor(wizard, row.field, selected),
+      bold: selected || row.field.kind === 'action',
+    };
   });
-  lines.push(footer);
 
-  return lines.slice(0, viewportHeight);
+  while (rows.length < height) rows.push({ text: '', kind: 'empty' });
+  return rows.slice(0, height);
 }
 
 export function renderOnboardingWizard(
@@ -634,9 +353,28 @@ export function renderOnboardingWizard(
   width: number,
   viewportHeight: number,
 ): Line[] {
-  const layout = createOverlayBoxLayout(width, 0, Math.max(20, width));
-  const collapsed = layout.innerWidth < 86;
-  return collapsed
-    ? renderCollapsedLayout(wizard, width, viewportHeight, layout)
-    : renderWideLayout(wizard, width, viewportHeight, layout);
+  const layoutOptions = {
+    width,
+    height: viewportHeight,
+    leftWidth: width < 90 ? undefined : 30,
+    contextRatio: 0.42,
+    minContextRows: 8,
+  };
+  const metrics = getFullscreenWorkspaceMetrics(layoutOptions);
+
+  return renderFullscreenWorkspace({
+    width,
+    height: viewportHeight,
+    title: 'GoodVibes Agent / Onboarding Wizard',
+    stateLabel: `${modeLabel(wizard.mode)} · ${wizard.stepIndex + 1}/${wizard.steps.length} · ${changedScreensLabel(wizard)}`,
+    leftHeader: 'Steps',
+    mainHeader: wizard.currentStep.title,
+    leftRows: buildStepRows(wizard, metrics.bodyRows),
+    contextRows: buildContextRows(wizard, metrics.contextWidth),
+    controlRows: buildControlRows(wizard, metrics.contextWidth, metrics.controlRows),
+    footer: footerText(wizard),
+    leftWidth: layoutOptions.leftWidth,
+    contextRatio: layoutOptions.contextRatio,
+    minContextRows: layoutOptions.minContextRows,
+  });
 }