@pellux/goodvibes-tui 0.27.0 → 0.28.0

package/src/panels/worktree-panel.ts

@@ -1,7 +1,8 @@
 import type { Line } from '../types/grid.ts';
 import { createEmptyLine } from '../types/grid.ts';
+import { basename } from 'node:path';
 import { ScrollableListPanel } from './scrollable-list-panel.ts';
-import { buildKeyValueLine, buildPanelLine, buildPanelWorkspace, DEFAULT_PANEL_PALETTE, resolvePrimaryScrollableSection, type PanelWorkspaceSection } from './polish.ts';
+import { buildAlignedRow, buildKeyValueLine, buildKeyboardHints, buildPanelLine, buildPanelWorkspace, DEFAULT_PANEL_PALETTE, resolvePrimaryScrollableSection, type ColumnSpec, type PanelWorkspaceSection } from './polish.ts';
 import { summarizeWorktreeOwnership, type WorktreeRegistry, type WorktreeStatusRecord } from '@/runtime/index.ts';
 
 const C = {
@@ -22,6 +23,44 @@ function stateColor(state: WorktreeStatusRecord['state']): string {
   }
 }
 
+/** Glyph that reads at a glance: ● active, ◌ paused/kept, ⊘ discard/cleanup. */
+function stateGlyph(state: WorktreeStatusRecord['state']): string {
+  switch (state) {
+    case 'active': return '●';
+    case 'paused':
+    case 'kept': return '◌';
+    default: return '⊘';
+  }
+}
+
+/**
+ * One worktree row, aligned with display-width-aware columns so a wide-char or
+ * long branch name never shoves the path column out of alignment. The active
+ * worktree is flagged with a ● glyph and selection uses the shared marker.
+ */
+function buildWorktreeRow(width: number, row: WorktreeStatusRecord, selected: boolean): Line {
+  const pathW = Math.max(8, width - (2 + 10 + 13 + 20) - 4 - 2);
+  const columns: ColumnSpec[] = [
+    { width: 2 },
+    { width: 10 },
+    { width: 13 },
+    { width: 20 },
+    { width: pathW },
+  ];
+  return buildAlignedRow(
+    width,
+    [
+      { text: stateGlyph(row.state), fg: stateColor(row.state) },
+      { text: row.kind, fg: C.info },
+      { text: row.state, fg: stateColor(row.state) },
+      { text: row.branch, fg: C.value },
+      { text: basename(row.path) || row.path, fg: C.dim },
+    ],
+    columns,
+    { selected, selectedBg: C.headerBg, marker: '▸' },
+  );
+}
+
 export class WorktreePanel extends ScrollableListPanel<WorktreeStatusRecord> {
   private rows: WorktreeStatusRecord[] = [];
   private loading = false;
@@ -52,13 +91,7 @@ export class WorktreePanel extends ScrollableListPanel<WorktreeStatusRecord> {
   }
 
   protected renderItem(row: WorktreeStatusRecord, index: number, _selected: boolean, width: number): Line {
-    const bg = index === this.selectedIndex ? C.headerBg : undefined;
-    return buildPanelLine(width, [
-      [` ${row.kind}`.padEnd(14), C.info, bg],
-      [` ${row.state}`.padEnd(16), stateColor(row.state), bg],
-      [` ${row.branch}`.padEnd(24), C.value, bg],
-      [` ${row.path}`.slice(0, Math.max(0, width - 56)), C.dim, bg],
-    ]);
+    return buildWorktreeRow(width, row, index === this.selectedIndex);
   }
 
   private async refresh(): Promise<void> {
@@ -80,7 +113,13 @@ export class WorktreePanel extends ScrollableListPanel<WorktreeStatusRecord> {
     if (this.loading && this.rows.length === 0) {
       sections.push({ title: 'Worktrees', lines: [buildPanelLine(width, [[' Loading worktree state...', C.info]])] });
     } else if (this.rows.length === 0) {
-      sections.push({ title: 'Worktrees', lines: [buildPanelLine(width, [[' No git worktrees discovered for this project.', C.dim]])] });
+      sections.push({
+        title: 'Worktrees',
+        lines: [
+          buildPanelLine(width, [[' No git worktrees discovered for this project yet.', C.dim]]),
+          buildPanelLine(width, [['  /worktree attach <path>', C.info], ['  register a worktree for orchestrator-managed lifecycle', C.dim]]),
+        ],
+      });
     } else {
       const summary = summarizeWorktreeOwnership(this.rows);
       sections.push({
@@ -142,20 +181,26 @@ export class WorktreePanel extends ScrollableListPanel<WorktreeStatusRecord> {
       };
       const resolvedWorktreesSection = resolvePrimaryScrollableSection(width, height, {
         intro: 'Orchestrator-owned worktree lifecycle, attachments, pause/resume posture, and cleanup state.',
-        footerLines: [buildPanelLine(width, [[' r refresh  /worktree inspect <path>  /worktree attach|pause|resume|keep|discard|cleanup ', C.dim]])],
+        footerLines: [buildKeyboardHints(width, [{ keys: '↑/↓', label: 'select' }, { keys: 'r', label: 'refresh' }, { keys: '/worktree inspect', label: '<path>' }, { keys: 'attach·pause·resume·keep·discard·cleanup', label: '' }], C)],
         palette: C,
         beforeSections: sections,
         section: {
           title: 'Worktrees',
-          scrollableLines: this.rows.map((row, absolute) => {
-            const bg = absolute === this.selectedIndex ? C.headerBg : undefined;
-            return buildPanelLine(width, [
-              [` ${row.kind}`.padEnd(14), C.info, bg],
-              [` ${row.state}`.padEnd(16), stateColor(row.state), bg],
-              [` ${row.branch}`.padEnd(24), C.value, bg],
-              [` ${row.path}`.slice(0, Math.max(0, width - 56)), C.dim, bg],
-            ]);
-          }),
+          fixedLines: [
+            buildAlignedRow(width, [
+              { text: '', fg: C.dim },
+              { text: 'KIND', fg: C.label, bold: true },
+              { text: 'STATE', fg: C.label, bold: true },
+              { text: 'BRANCH', fg: C.label, bold: true },
+              { text: 'WORKTREE', fg: C.label, bold: true },
+            ], [
+              { width: 2 }, { width: 10 }, { width: 13 }, { width: 20 },
+              { width: Math.max(8, width - (2 + 10 + 13 + 20) - 4 - 2) },
+            ], { marker: ' ' }),
+          ],
+          scrollableLines: this.rows.map((row, absolute) =>
+            buildWorktreeRow(width, row, absolute === this.selectedIndex),
+          ),
           selectedIndex: this.selectedIndex,
           scrollOffset: this.scrollStart,
           guardRows: 1,
@@ -173,7 +218,7 @@ export class WorktreePanel extends ScrollableListPanel<WorktreeStatusRecord> {
       title: 'Worktree Control Room',
       intro: 'Orchestrator-owned worktree lifecycle, attachments, pause/resume posture, and cleanup state.',
       sections,
-      footerLines: [buildPanelLine(width, [[' r refresh  /worktree inspect <path>  /worktree attach|pause|resume|keep|discard|cleanup ', C.dim]])],
+      footerLines: [buildKeyboardHints(width, [{ keys: '↑/↓', label: 'select' }, { keys: 'r', label: 'refresh' }, { keys: '/worktree inspect', label: '<path>' }, { keys: 'attach·pause·resume·keep·discard·cleanup', label: '' }], C)],
       palette: C,
     });
     while (lines.length < height) lines.push(createEmptyLine(width));

package/src/panels/wrfc-panel-format.ts

@@ -0,0 +1,133 @@
+import { truncateDisplay } from '../utils/terminal-width.ts';
+import type { WrfcState, Constraint, ConstraintFinding } from '@pellux/goodvibes-sdk/platform/agents';
+import { DEFAULT_PANEL_PALETTE, extendPalette } from './polish.ts';
+
+// ---------------------------------------------------------------------------
+// Colour palette + formatting helpers for the WRFC panel.
+//
+// Extracted from wrfc-panel.ts to keep that module under the architecture
+// line-count cap. Leaf module (only polish + terminal-width + sdk types); the
+// panel re-exports the public helpers so ./wrfc-panel.ts stays their import site.
+// ---------------------------------------------------------------------------
+export const C = extendPalette(DEFAULT_PANEL_PALETTE, {
+  // WRFC state-machine colours (domain status -- no shared equivalent)
+  passed:     '#22c55e', // green
+  failed:     '#ef4444', // red
+  reviewing:  '#eab308', // yellow
+  engineering:'#22d3ee', // cyan
+  fixing:     '#f97316', // orange
+  pending:    '#6b7280', // grey
+  gating:     '#a78bfa', // violet
+  committing: '#38bdf8', // sky
+  integrating:'#818cf8', // indigo
+
+  // Issue-severity ramp (domain -- no shared equivalent)
+  issueCrit:  '#ef4444',
+  issueMaj:   '#f97316',
+  issueMin:   '#eab308',
+  issueSug:   '#6b7280',
+
+  // Selection + divider chrome with no shared equivalent
+  selected:   '#1e40af', // selection bg
+  selectedFg: '#f8fafc',
+  border:     '#334155',
+});
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const SPARKLINE_CHARS = '._-:=+*#';
+
+export function sparkline(scores: number[], maxScore = 10): string {
+  if (scores.length === 0) return '';
+  return scores
+    .map(s => {
+      const ratio = Math.max(0, Math.min(1, s / maxScore));
+      const idx   = Math.round(ratio * (SPARKLINE_CHARS.length - 1));
+      return SPARKLINE_CHARS[idx];
+    })
+    .join('');
+}
+
+export function stateColor(state: WrfcState): string {
+  switch (state) {
+    case 'passed':          return C.passed;
+    case 'failed':          return C.failed;
+    case 'reviewing':       return C.reviewing;
+    case 'engineering':     return C.engineering;
+    case 'fixing':          return C.fixing;
+    case 'gating':
+    case 'awaiting_gates':  return C.gating;
+    case 'committing':      return C.committing;
+    case 'integrating':     return C.integrating;
+    default:                return C.pending;
+  }
+}
+
+export function stateLabel(state: WrfcState): string {
+  switch (state) {
+    case 'engineering':    return 'ENG';
+    case 'reviewing':      return 'REV';
+    case 'fixing':         return 'FIX';
+    case 'gating':         return 'GATE';
+    case 'awaiting_gates': return 'WAIT';
+    case 'committing':     return 'COMMIT';
+    case 'integrating':    return 'INTG';
+    case 'passed':         return 'PASS';
+    case 'failed':         return 'FAIL';
+    default:               return 'PEND';
+  }
+}
+
+export function issueColor(severity: string): string {
+  switch (severity) {
+    case 'critical': return C.issueCrit;
+    case 'major':    return C.issueMaj;
+    case 'minor':    return C.issueMin;
+    default:         return C.issueSug;
+  }
+}
+
+export function issuePrefix(severity: string): string {
+  switch (severity) {
+    case 'critical': return '[CRIT] ';
+    case 'major':    return '[MAJR] ';
+    case 'minor':    return '[MINR] ';
+    default:         return '[SUGG] ';
+  }
+}
+
+export function truncate(s: string, max: number): string {
+  return truncateDisplay(s, max);
+}
+
+// ---------------------------------------------------------------------------
+// Constraint helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Returns display tag, foreground colour, and dim flag for a single constraint
+ * based on whether a reviewer finding exists for it.
+ */
+export function constraintStatusMarker(
+  constraint: Constraint,
+  findings: ConstraintFinding[] | undefined,
+): { tag: string; fg: string; dim: boolean } {
+  const finding = findings?.find(f => f.constraintId === constraint.id);
+  if (!finding) {
+    return { tag: '[UNV]', fg: C.dim, dim: true };
+  }
+  if (finding.satisfied) {
+    return { tag: '[SAT]', fg: C.good, dim: false };
+  }
+  // Unsatisfied — use severity to pick colour and tag text
+  const sev = finding.severity ?? 'major';
+  let sevTag: string;
+  let fg: string;
+  switch (sev) {
+    case 'critical': sevTag = '[UNS CRIT]';  fg = C.issueCrit; break;
+    case 'minor':    sevTag = '[UNS MINOR]'; fg = C.issueMin;  break;
+    default:         sevTag = '[UNS MAJOR]'; fg = C.issueMaj;  break;
+  }
+  return { tag: sevTag, fg, dim: false };
+}

package/src/panels/wrfc-panel.ts

@@ -1,16 +1,15 @@
 import type { Line } from '../types/grid.ts';
 import type { WrfcChain, WrfcState, QualityGateResult } from '@pellux/goodvibes-sdk/platform/agents';
-import type { Constraint, ConstraintFinding } from '@pellux/goodvibes-sdk/platform/agents';
 import type { WrfcController } from '@pellux/goodvibes-sdk/platform/agents';
 import { BasePanel } from './base-panel.ts';
 import type { WorkflowEvent } from '@/runtime/index.ts';
 import type { UiEventFeed } from '../runtime/ui-events.ts';
 import {
+  buildMeterLine,
   buildPanelLine,
   buildPanelWorkspace,
   resolveScrollablePanelSection,
   DEFAULT_PANEL_PALETTE,
-  extendPalette,
   type PanelWorkspaceSection,
   buildSelectablePanelLine,
   buildStyledPanelLine,
@@ -45,131 +44,21 @@ const TERMINAL_STATES: readonly WrfcState[] = ['passed', 'failed'];
 const RESUMABLE_STATES: readonly WrfcState[] = ['pending', 'reviewing', 'fixing', 'awaiting_gates'];
 
 // ---------------------------------------------------------------------------
-// Colour palette
+// Colour palette + formatting helpers live in ./wrfc-panel-format.ts (extracted
+// to keep this module under the architecture line-count cap). Re-exported here
+// so ./wrfc-panel.ts remains their public import site.
 // ---------------------------------------------------------------------------
-const C = extendPalette(DEFAULT_PANEL_PALETTE, {
-  // WRFC state-machine colours (domain status -- no shared equivalent)
-  passed:     '#22c55e', // green
-  failed:     '#ef4444', // red
-  reviewing:  '#eab308', // yellow
-  engineering:'#22d3ee', // cyan
-  fixing:     '#f97316', // orange
-  pending:    '#6b7280', // grey
-  gating:     '#a78bfa', // violet
-  committing: '#38bdf8', // sky
-  integrating:'#818cf8', // indigo
-
-  // Issue-severity ramp (domain -- no shared equivalent)
-  issueCrit:  '#ef4444',
-  issueMaj:   '#f97316',
-  issueMin:   '#eab308',
-  issueSug:   '#6b7280',
-
-  // Selection + divider chrome with no shared equivalent
-  selected:   '#1e40af', // selection bg
-  selectedFg: '#f8fafc',
-  border:     '#334155',
-});
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-const SPARKLINE_CHARS = '._-:=+*#';
-
-export function sparkline(scores: number[], maxScore = 10): string {
-  if (scores.length === 0) return '';
-  return scores
-    .map(s => {
-      const ratio = Math.max(0, Math.min(1, s / maxScore));
-      const idx   = Math.round(ratio * (SPARKLINE_CHARS.length - 1));
-      return SPARKLINE_CHARS[idx];
-    })
-    .join('');
-}
-
-export function stateColor(state: WrfcState): string {
-  switch (state) {
-    case 'passed':          return C.passed;
-    case 'failed':          return C.failed;
-    case 'reviewing':       return C.reviewing;
-    case 'engineering':     return C.engineering;
-    case 'fixing':          return C.fixing;
-    case 'gating':
-    case 'awaiting_gates':  return C.gating;
-    case 'committing':      return C.committing;
-    case 'integrating':     return C.integrating;
-    default:                return C.pending;
-  }
-}
-
-export function stateLabel(state: WrfcState): string {
-  switch (state) {
-    case 'engineering':    return 'ENG';
-    case 'reviewing':      return 'REV';
-    case 'fixing':         return 'FIX';
-    case 'gating':         return 'GATE';
-    case 'awaiting_gates': return 'WAIT';
-    case 'committing':     return 'COMMIT';
-    case 'integrating':    return 'INTG';
-    case 'passed':         return 'PASS';
-    case 'failed':         return 'FAIL';
-    default:               return 'PEND';
-  }
-}
-
-function issueColor(severity: string): string {
-  switch (severity) {
-    case 'critical': return C.issueCrit;
-    case 'major':    return C.issueMaj;
-    case 'minor':    return C.issueMin;
-    default:         return C.issueSug;
-  }
-}
-
-function issuePrefix(severity: string): string {
-  switch (severity) {
-    case 'critical': return '[CRIT] ';
-    case 'major':    return '[MAJR] ';
-    case 'minor':    return '[MINR] ';
-    default:         return '[SUGG] ';
-  }
-}
-
-export function truncate(s: string, max: number): string {
-  if (s.length <= max) return s;
-  return s.slice(0, max - 3) + '...';
-}
-
-// ---------------------------------------------------------------------------
-// Constraint helpers
-// ---------------------------------------------------------------------------
-
-/**
- * Returns display tag, foreground colour, and dim flag for a single constraint
- * based on whether a reviewer finding exists for it.
- */
-export function constraintStatusMarker(
-  constraint: Constraint,
-  findings: ConstraintFinding[] | undefined,
-): { tag: string; fg: string; dim: boolean } {
-  const finding = findings?.find(f => f.constraintId === constraint.id);
-  if (!finding) {
-    return { tag: '[UNV]', fg: C.dim, dim: true };
-  }
-  if (finding.satisfied) {
-    return { tag: '[SAT]', fg: C.good, dim: false };
-  }
-  // Unsatisfied — use severity to pick colour and tag text
-  const sev = finding.severity ?? 'major';
-  let sevTag: string;
-  let fg: string;
-  switch (sev) {
-    case 'critical': sevTag = '[UNS CRIT]';  fg = C.issueCrit; break;
-    case 'minor':    sevTag = '[UNS MINOR]'; fg = C.issueMin;  break;
-    default:         sevTag = '[UNS MAJOR]'; fg = C.issueMaj;  break;
-  }
-  return { tag: sevTag, fg, dim: false };
-}
+import {
+  C,
+  sparkline,
+  stateColor,
+  stateLabel,
+  issueColor,
+  issuePrefix,
+  truncate,
+  constraintStatusMarker,
+} from './wrfc-panel-format.ts';
+export { sparkline, stateColor, stateLabel, truncate, constraintStatusMarker } from './wrfc-panel-format.ts';
 
 // ---------------------------------------------------------------------------
 // Panel
@@ -269,7 +158,9 @@ export class WrfcPanel extends BasePanel {
             width,
             ' No WRFC chains yet',
             'WRFC chains appear here as review/fix cycles execute. Expanded rows show scores, gates, issues, and failure detail.',
-            [],
+            [
+              { command: '/wrfc run <task>', summary: 'start a write-review-fix-commit chain for a task' },
+            ],
             DEFAULT_PANEL_PALETTE,
           ),
         },
@@ -344,6 +235,10 @@ export class WrfcPanel extends BasePanel {
         ]
       : [];
 
+    const totalChains = this.chains.length;
+    const stalledCount = this.chains.filter((c) => this.isStalled(c, now)).length;
+    const completedChains = passedCount + failedCount;
+    const meterWidth = Math.max(10, Math.min(24, width - 34));
     const summarySection: PanelWorkspaceSection = {
       title: 'Summary',
       lines: [
@@ -354,7 +249,16 @@ export class WrfcPanel extends BasePanel {
           [String(passedCount), DEFAULT_PANEL_PALETTE.good],
           ['   Failed ', DEFAULT_PANEL_PALETTE.label],
           [String(failedCount), failedCount > 0 ? DEFAULT_PANEL_PALETTE.bad : DEFAULT_PANEL_PALETTE.dim],
+          ['   Stalled ', DEFAULT_PANEL_PALETTE.label],
+          [String(stalledCount), stalledCount > 0 ? C.warn : DEFAULT_PANEL_PALETTE.dim],
         ]),
+        buildMeterLine(
+          width,
+          totalChains > 0 ? Math.round((completedChains / totalChains) * meterWidth) : 0,
+          meterWidth,
+          { filled: failedCount > 0 ? DEFAULT_PANEL_PALETTE.bad : DEFAULT_PANEL_PALETTE.good, empty: C.border, label: DEFAULT_PANEL_PALETTE.label },
+          { prefix: ' Resolved ', suffix: ` ${completedChains}/${totalChains} ` },
+        ),
       ],
     };
     const selectedSection: PanelWorkspaceSection = {

package/src/renderer/compaction-preview.ts

@@ -17,6 +17,7 @@
  */
 
 import { estimateConversationTokens } from '@pellux/goodvibes-sdk/platform/core';
+import { computeContextUsage } from '../core/context-usage.ts';
 import type { CompactionEvent } from '@pellux/goodvibes-sdk/platform/core';
 import type { ProviderMessage } from '@pellux/goodvibes-sdk/platform/providers';
 
@@ -58,7 +59,7 @@ export function buildCompactionPreview(opts: CompactionPreviewOptions): string {
   const tokensAfterEstimate = COMPACTION_OUTPUT_CEILING_ESTIMATE;
 
   const contextStr = contextWindow > 0
-    ? ` (${Math.round((tokensBefore / contextWindow) * 100)}% of ${fmtN(contextWindow)} context window)`
+    ? ` (${Math.round(computeContextUsage(tokensBefore, contextWindow).rawRatio * 100)}% of ${fmtN(contextWindow)} context window)`
     : '';
 
   const pinStr = pinnedMemoryCount > 0

package/src/renderer/compositor.ts

@@ -6,9 +6,15 @@ import type { SearchManager } from '../input/search.ts';
 import { allowTerminalWrite } from '../runtime/terminal-output-guard.ts';
 import { probeTermCaps, type TermColorCaps } from './term-caps.ts';
 import { DARK_THEME } from './theme.ts';
+import { UI_TONES } from './ui-primitives.ts';
 
 const T = DARK_THEME;
 
+// Accent / dim colors for the panel focus border. The focused pane's left
+// border column is drawn in the accent tone; the unfocused pane stays dim.
+const PANEL_FOCUS_ACCENT = UI_TONES.state.active; // bright blue
+const PANEL_BORDER_DIM = '238';
+
 export interface SelectionInfo {
   isCellSelected: (col: number, absoluteRow: number) => boolean;
   scrollTop: number;
@@ -22,16 +28,18 @@ export interface SearchInfo {
 }
 
 export interface PanelCompositeData {
-  /** Workspace-level tab bar spanning all open panels. */
+  /**
+   * The single consolidated workspace tab bar spanning all open panels across
+   * both panes. There are no per-pane tab bars — pane focus is shown by the
+   * accent border (see `topFocused`/`bottomFocused`).
+   */
   workspaceBar: Line;
-  /** Top pane: tab bar */
-  topTabBar?: Line;
   /** Top pane: panel content lines */
   topContent: Line[];
-  /** Whether the top pane is focused (affects separator color) */
+  /** Whether the top pane is focused (drives the accent border) */
   topFocused: boolean;
-  /** Bottom pane tab bar. Undefined = no bottom pane. */
-  bottomTabBar?: Line;
+  /** Whether a bottom pane is present (splits the panel area). */
+  hasBottomPane: boolean;
   /** Bottom pane content lines. Undefined = no bottom pane. */
   bottomContent?: Line[];
   /** Whether the bottom pane is focused */
@@ -113,29 +121,31 @@ export class Compositor {
     const offset = Math.max(0, vHeight - lineCount);
 
     // --- Pre-compute panel row layout when split pane is active ---
-    // When both top and bottom panes are visible, the panel area is split:
+    // A single consolidated workspace bar heads the panel area; there are no
+    // per-pane tab bars. When both panes are visible the layout is:
     //   row 0:              workspace tab bar
-    //   row 1:              top tab bar
-    //   rows 2..topH+1:     top content
-    //   row topH+2:         horizontal separator (───)
-    //   row topH+3:         bottom tab bar
-    //   rows topH+4..end:   bottom content
-    const hasBottomPane = hasPanel && panel!.bottomTabBar !== undefined;
+    //   rows 1..topH:       top content
+    //   row topH+1:         horizontal separator (───)
+    //   rows topH+2..end:   bottom content
+    const hasBottomPane = hasPanel && panel!.hasBottomPane;
     let topPaneHeight = 0;   // number of content rows in top pane
-    let bottomPaneHeight = 0;
     let hSepRow = -1;        // viewport row of the horizontal separator
     if (hasPanel && hasBottomPane) {
-      const panelAreaRows = Math.max(0, vHeight - 1); // subtract workspace tab bar
-      // top: 1 (tabbar) + topContent rows; bottom: 1 (sep) + 1 (tabbar) + bottomContent
-      const contentRows = Math.max(0, panelAreaRows - 3); // subtract top-tabbar + h-sep + bottom-tabbar
+      const panelAreaRows = Math.max(0, vHeight - 1); // subtract workspace bar
+      const contentRows = Math.max(0, panelAreaRows - 1); // subtract h-separator
       topPaneHeight = Math.max(1, Math.floor(contentRows * panel!.verticalSplitRatio));
-      bottomPaneHeight = Math.max(1, contentRows - topPaneHeight);
-      hSepRow = 2 + topPaneHeight; // workspace bar + top tab bar + top content rows
+      hSepRow = 1 + topPaneHeight; // workspace bar + top content rows
     }
 
-    const sepFg = hasPanel && panel!.separator
-      ? (panel!.topFocused || panel!.bottomFocused ? '244' : '238')
-      : '238';
+    const panelFocused = hasPanel && (panel!.topFocused || panel!.bottomFocused);
+    // Per-row left-border color: the focused pane's rows get the accent tone.
+    const borderFgForRow = (i: number): string => {
+      if (!hasPanel || !panel!.separator || !panelFocused) return PANEL_BORDER_DIM;
+      if (!hasBottomPane) return panel!.topFocused ? PANEL_FOCUS_ACCENT : PANEL_BORDER_DIM;
+      if (i === 0) return PANEL_FOCUS_ACCENT; // workspace bar — panel is focused
+      if (i <= topPaneHeight) return panel!.topFocused ? PANEL_FOCUS_ACCENT : PANEL_BORDER_DIM;
+      return panel!.bottomFocused ? PANEL_FOCUS_ACCENT : PANEL_BORDER_DIM;
+    };
 
     viewport.forEach((line, i) => {
       const screenY = viewportStartY + i;
@@ -163,9 +173,10 @@ export class Compositor {
 
         const p = panel!;
 
-        // Separator column (vertical bar between left and panel area)
+        // Separator column (vertical bar between left and panel area).
+        // Colored per-row so the focused pane shows a bright accent border.
         if (p.separator) {
-          newBuffer.setCell(sepX, screenY, createStyledCell('│', { fg: sepFg }));
+          newBuffer.setCell(sepX, screenY, createStyledCell('│', { fg: borderFgForRow(i) }));
         }
 
         const panelStartX = sepX + 1;
@@ -195,39 +206,31 @@ export class Compositor {
           const panelLine = i === 0 ? p.workspaceBar : p.topContent[i - 1];
           drawPanelLine(panelLine);
         } else {
-          // --- Two pane mode ---
+          // --- Two pane mode (single consolidated workspace bar) ---
           // Row layout (by viewport row i):
           //   i = 0:                      workspace tab bar
-          //   i = 1:                      top tab bar
-          //   2 <= i <= topPaneHeight+1:  top content[i-2]
+          //   1 <= i <= topPaneHeight:    top content[i-1]
           //   i = hSepRow:                horizontal separator
-          //   i = hSepRow+1:              bottom tab bar
-          //   i >= hSepRow+2:             bottom content[i - (hSepRow+2)]
+          //   i >= hSepRow+1:             bottom content[i - (hSepRow+1)]
           let panelLine: Line | undefined;
 
           if (i === 0) {
             panelLine = p.workspaceBar;
-          } else if (i === 1) {
-            panelLine = p.topTabBar;
-          } else if (i <= topPaneHeight + 1) {
-            panelLine = p.topContent[i - 2];
+          } else if (i <= topPaneHeight) {
+            panelLine = p.topContent[i - 1];
           } else if (i === hSepRow) {
-            // Horizontal separator between the two panes
-            // Render ─ chars across the panel width
-            const focusFg = p.bottomFocused ? '36' : '238'; // cyan if bottom pane focused
+            // Horizontal separator between the two panes. Accent when the bottom
+            // pane has focus so the divider reinforces the focus border.
+            const focusFg = p.bottomFocused ? PANEL_FOCUS_ACCENT : PANEL_BORDER_DIM;
             for (let x = 0; x < panelWidth; x++) {
               newBuffer.setCell(panelStartX + x, screenY, createStyledCell('─', { fg: focusFg }));
             }
-            // Also update the separator column char to T-junction (├):
-            // ├ connects the vertical left-separator with the horizontal pane divider,
-            // forming a clean T-shaped joint at the split point.
+            // T-junction (├) joins the vertical left-border with the pane divider.
             if (p.separator) {
               newBuffer.setCell(sepX, screenY, createStyledCell('├', { fg: focusFg }));
             }
-          } else if (i === hSepRow + 1) {
-            panelLine = p.bottomTabBar;
           } else {
-            panelLine = p.bottomContent?.[i - (hSepRow + 2)];
+            panelLine = p.bottomContent?.[i - (hSepRow + 1)];
           }
 
           if (i !== hSepRow) {
@@ -269,7 +272,7 @@ export class Compositor {
       for (let i = viewport.length; i < vHeight; i++) {
         const screenY = viewportStartY + i;
         if (screenY >= height) break;
-        newBuffer.setCell(sepX, screenY, createStyledCell('│', { fg: sepFg }));
+        newBuffer.setCell(sepX, screenY, createStyledCell('│', { fg: borderFgForRow(i) }));
       }
     }