@hartvig/developer-control-center 0.8.5 → 0.8.7

package/src/ui/app.tsx

@@ -13,7 +13,7 @@ interface AppProps {
   runtime: Runtime;
 }
 
-type Mode = 'normal' | 'search' | 'confirm' | 'input' | 'popup';
+type Mode = 'normal' | 'search' | 'confirm' | 'input' | 'popup' | 'help';
 
 interface PopupState {
   title: string;
@@ -26,6 +26,35 @@ type Pane = 'commands' | 'status';
 const PROFILE_GROUP_ID = '__profiles';
 const GROUP_ORDER = ['Development', 'Build', 'Deploy', 'Management', 'Demo'];
 
+type HelpEntry =
+  | { kind: 'header'; text: string }
+  | { kind: 'key'; key: string; desc: string }
+  | { kind: 'spacer' }
+  | { kind: 'hint' };
+
+const helpEntries: HelpEntry[] = [
+  { kind: 'header', text: 'Navigation' },
+  { kind: 'key', key: '↑/↓', desc: 'Navigate commands' },
+  { kind: 'key', key: 'Enter', desc: 'Run selected command' },
+  { kind: 'key', key: 'Space', desc: 'Multi-select / open group' },
+  { kind: 'key', key: 'Tab', desc: 'Toggle pane focus' },
+  { kind: 'key', key: '/', desc: 'Search/filter commands' },
+  { kind: 'spacer' },
+  { kind: 'header', text: 'Output pane' },
+  { kind: 'key', key: '↑/↓', desc: 'Scroll line by line' },
+  { kind: 'key', key: 'PgUp/PgDn', desc: 'Scroll 10 lines' },
+  { kind: 'key', key: 'Esc', desc: 'Back to commands' },
+  { kind: 'spacer' },
+  { kind: 'header', text: 'Global' },
+  { kind: 'key', key: '?', desc: 'Toggle this help' },
+  { kind: 'key', key: 'Esc', desc: 'Back / deselect / quit' },
+  { kind: 'key', key: 'Ctrl+C', desc: 'Quit' },
+  { kind: 'spacer' },
+  { kind: 'hint' },
+];
+
+const HELP_CONTENT_LINES = helpEntries.length;
+
 function commandsForProfile(config: ProkomConfig, profile?: string): ProkomCommand[] {
   const base = config.baseCommands ?? config.commands;
   const profileCommands = profile ? (config.profiles?.[profile]?.commands ?? []) : [];
@@ -68,14 +97,14 @@ export const App: React.FC<AppProps> = ({ config, runtime }) => {
   );
   const [currentGroup, setCurrentGroup] = useState<string | null>(null);
   const [multiSelected, setMultiSelected] = useState<Set<string>>(new Set());
+  const [helpScroll, setHelpScroll] = useState(0);
   const [activeProfile, setActiveProfile] = useState<string | undefined>(config.profile);
-  const menuRows = config.menuRows ?? 8;
+  const terminalRows = stdout?.rows ?? 24;
+  const dynamicRows = Math.max(4, terminalRows - 7);
+  const menuRows = config.menuRows ?? dynamicRows;
   const outputRows = config.outputRows ?? menuRows;
   const terminalColumns = stdout?.columns ?? 120;
-  const availablePaneWidth = Math.max(90, terminalColumns - 4);
   const statusPaneWidth = 28;
-  const commandPaneWidth = Math.min(52, Math.max(34, Math.floor(availablePaneWidth * 0.34)));
-  const outputPaneWidth = Math.max(30, availablePaneWidth - commandPaneWidth - statusPaneWidth - 2);
 
   const activeCommands = useMemo(
     () => commandsForProfile(config, activeProfile),
@@ -84,7 +113,19 @@ export const App: React.FC<AppProps> = ({ config, runtime }) => {
 
   useEffect(() => {
     runtime.taskRunner.setCommands(activeCommands);
-  }, [activeCommands, runtime]);
+  }, [activeCommands, runtime]  );
+
+  const commandPaneWidth = useMemo(() => {
+    const padding = 6;
+    const maxLabel = activeCommands.reduce((max, cmd) => {
+      const label = cmd.toggle ? `Start ${cmd.label}` : cmd.label;
+      return Math.max(max, label.length);
+    }, 0);
+    return Math.min(Math.max(maxLabel + padding + 2, 20), terminalColumns - statusPaneWidth - 6);
+  }, [activeCommands, terminalColumns, statusPaneWidth]);
+
+  const outputPaneWidth = Math.max(20, terminalColumns - commandPaneWidth - statusPaneWidth - 4);
+  const helpScrollMax = Math.max(0, HELP_CONTENT_LINES - outputRows);
 
   const modeRef = useRef(mode);
   modeRef.current = mode;
@@ -198,10 +239,16 @@ export const App: React.FC<AppProps> = ({ config, runtime }) => {
 
   const filteredItems = useMemo((): MenuItem[] => {
     if (!searchQuery) return menuItems;
-    return menuItems.filter((item) =>
-      item.label.toLowerCase().includes(searchQuery.toLowerCase()),
+    const q = searchQuery.toLowerCase();
+    const topLevel = menuItems.filter((item) =>
+      item.label.toLowerCase().includes(q),
+    );
+    if (!hasGroups || currentGroup) return topLevel;
+    const groupCommands = activeCommands.filter(
+      (cmd) => cmd.group && cmd.label.toLowerCase().includes(q),
     );
-  }, [menuItems, searchQuery]);
+    return groupCommands.length > 0 ? [...topLevel, ...groupCommands] : topLevel;
+  }, [menuItems, searchQuery, hasGroups, currentGroup, activeCommands]);
 
   useEffect(() => {
     if (selectedIndex >= filteredItems.length && filteredItems.length > 0) {
@@ -215,15 +262,17 @@ export const App: React.FC<AppProps> = ({ config, runtime }) => {
 
   const selCount = multiSelected.size;
   const selectedItem = filteredItems[selectedIndex];
-  const footerText = selectedItem
-    ? isProfileOption(selectedItem)
-      ? selectedItem.active
-        ? `Active profile: ${selectedItem.label}`
-        : `Switch to ${selectedItem.label} profile`
-      : 'count' in selectedItem
-        ? `Open ${selectedItem.label}`
-        : selectedItem.description ?? 'Enter to run, Space to select, / to search, Tab to focus output'
-    : 'Enter to run, Space to select, / to search, Tab to focus output';
+  const footerText = mode === 'help'
+    ? 'Press ? or Esc to close help'
+    : selectedItem
+      ? isProfileOption(selectedItem)
+        ? selectedItem.active
+          ? `Active profile: ${selectedItem.label}`
+          : `Switch to ${selectedItem.label} profile`
+        : 'count' in selectedItem
+          ? `Open ${selectedItem.label}`
+          : selectedItem.description ?? 'Enter to run, Space to select, / to search, Tab focus, ? help'
+      : 'Enter to run, Space to select, / to search, Tab focus, ? help';
 
   const runSingle = useCallback((cmd: ProkomCommand) => {
     if (cmd.id === 'demo-confirm-overlay') {
@@ -247,7 +296,9 @@ export const App: React.FC<AppProps> = ({ config, runtime }) => {
       if (task?.status === 'running') {
         runtime.taskRunner.stop(cmd);
       } else {
-        runtime.taskRunner.run(cmd);
+        runtime.taskRunner.run(cmd).catch((e: unknown) => {
+          process.stderr.write(`[dcc] run error: ${e}\n`);
+        });
       }
     } else if (cmd.confirm) {
       setConfirmingCmd(cmd);
@@ -257,7 +308,9 @@ export const App: React.FC<AppProps> = ({ config, runtime }) => {
       setInputValue('');
       setMode('input');
     } else {
-      runtime.taskRunner.run(cmd);
+      runtime.taskRunner.run(cmd).catch((e: unknown) => {
+        process.stderr.write(`[dcc] run error: ${e}\n`);
+      });
     }
   }, [runtime]);
 
@@ -284,7 +337,9 @@ export const App: React.FC<AppProps> = ({ config, runtime }) => {
     for (const cmd of activeCommands) {
       if (selected.has(cmd.id)) {
         if (!cmd.confirm && !cmd.input) {
-          runtime.taskRunner.run(cmd);
+          runtime.taskRunner.run(cmd).catch((e: unknown) => {
+            process.stderr.write(`[dcc] run error: ${e}\n`);
+          });
         }
       }
     }
@@ -362,6 +417,14 @@ export const App: React.FC<AppProps> = ({ config, runtime }) => {
       return;
     }
 
+    if (modeRef.current === 'help') {
+      if (key.escape || input === '?') {
+        setHelpScroll(0);
+        setMode('normal');
+        return;
+      }
+    }
+
     if (mode === 'search') {
       if (key.escape) {
         setSearchQuery('');
@@ -394,7 +457,28 @@ export const App: React.FC<AppProps> = ({ config, runtime }) => {
       return;
     }
 
+    if (input === '?' && modeRef.current === 'normal') {
+      setHelpScroll(0);
+      setMode('help');
+      return;
+    }
+
     if (focusedPane === 'status') {
+      if (modeRef.current === 'help') {
+        if (key.upArrow) {
+          setHelpScroll((s) => Math.max(0, s - 1));
+        } else if (key.downArrow) {
+          setHelpScroll((s) => Math.min(helpScrollMax, s + 1));
+        } else if (key.pageUp) {
+          setHelpScroll((s) => Math.max(0, s - 10));
+        } else if (key.pageDown) {
+          setHelpScroll((s) => Math.min(helpScrollMax, s + 10));
+        } else if (key.escape) {
+          setFocusedPane('commands');
+        }
+        return;
+      }
+
       if (key.escape) {
         setFocusedPane('commands');
       } else if (key.upArrow) {
@@ -586,16 +670,52 @@ export const App: React.FC<AppProps> = ({ config, runtime }) => {
         <Box width={1} />
         <MetricsPanel tasks={tasks} menuRows={outputRows} width={statusPaneWidth} />
         <Box width={1} />
-        <StatusPanel
-          tasks={tasks}
-          width={outputPaneWidth}
-          scrollOffsets={scrollOffsets}
-          focusedPane={focusedPane}
-          confirmingCommand={mode === 'confirm' ? confirmingCmd : null}
-          inputCommand={mode === 'input' ? inputCmd : null}
-          inputValue={inputValue}
-          menuRows={outputRows}
-        />
+        {mode === 'help' ? (
+          <Panel
+            title="Help"
+            titleColor={focusedPane === 'status' ? 'cyan' : 'white'}
+            titleExtra={
+              helpScrollMax > 0
+                ? <Text>{` ${helpScroll > 0 ? '▲' : ''}${helpScroll < helpScrollMax ? ' ▼' : ''}`}</Text>
+                : undefined
+            }
+            titleExtraWidth={helpScrollMax > 0 ? 4 : 0}
+            borderColor={focusedPane === 'status' ? 'cyan' : 'white'}
+            height={outputRows + 2}
+            width={outputPaneWidth}
+          >
+            <Box flexDirection="column" paddingLeft={2}>
+              {helpEntries.slice(helpScroll, helpScroll + outputRows).map((entry, i) => {
+                switch (entry.kind) {
+                  case 'header':
+                    return <Box key={i + helpScroll}><Text bold color="cyan">{entry.text}</Text></Box>;
+                  case 'key':
+                    return (
+                      <Box key={i + helpScroll}>
+                        <Text color="yellow">  {entry.key.padEnd(10)}</Text>
+                        <Text>{entry.desc}</Text>
+                      </Box>
+                    );
+                  case 'spacer':
+                    return <Box key={i + helpScroll}><Text> </Text></Box>;
+                  case 'hint':
+                    return <Box key={i + helpScroll}><Text color="gray">? or Esc to close</Text></Box>;
+                }
+              })}
+            </Box>
+          </Panel>
+        ) : (
+          <StatusPanel
+            tasks={tasks}
+            width={outputPaneWidth}
+            scrollOffsets={scrollOffsets}
+            focusedPane={focusedPane}
+            confirmingCommand={mode === 'confirm' ? confirmingCmd : null}
+            inputCommand={mode === 'input' ? inputCmd : null}
+            inputValue={inputValue}
+            menuRows={outputRows}
+          />
+        )}
       </Box>
 
       <Box>

package/src/ui/command-list.test.tsx

@@ -0,0 +1,124 @@
+import { describe, it, expect } from 'vitest';
+import React from 'react';
+import { render } from 'ink-testing-library';
+import { CommandList } from './command-list.js';
+
+const baseProps = {
+  items: [],
+  selectedIndex: 0,
+  width: 50,
+  menuRows: 10,
+};
+
+describe('CommandList', () => {
+  it('shows no commands configured when empty', () => {
+    const { lastFrame } = render(<CommandList {...baseProps} />);
+    expect(lastFrame()).toContain('No commands configured');
+  });
+
+  it('renders command items', () => {
+    const items = [
+      { id: 'build', label: 'Build', command: 'npm run build' },
+      { id: 'test', label: 'Test', command: 'npm test' },
+    ];
+    const { lastFrame } = render(<CommandList {...baseProps} items={items} />);
+    const frame = lastFrame();
+    expect(frame).toContain('Build');
+    expect(frame).toContain('Test');
+  });
+
+  it('shows cursor on selected item', () => {
+    const items = [
+      { id: 'build', label: 'Build', command: 'npm run build' },
+      { id: 'test', label: 'Test', command: 'npm test' },
+    ];
+    const { lastFrame } = render(
+      <CommandList {...baseProps} items={items} selectedIndex={0} />,
+    );
+    expect(lastFrame()).toContain('❯');
+  });
+
+  it('shows group headers', () => {
+    const items = [
+      { id: 'dev', label: 'Development', count: 2 },
+      { id: 'build', label: 'Build', command: 'npm run build' },
+    ];
+    const { lastFrame } = render(<CommandList {...baseProps} items={items} />);
+    const frame = lastFrame();
+    expect(frame).toContain('▶ Development');
+  });
+
+  it('renders profile options', () => {
+    const items = [
+      { kind: 'profile' as const, id: 'p1', label: 'Production', active: false },
+    ];
+    const { lastFrame } = render(<CommandList {...baseProps} items={items} />);
+    const frame = lastFrame();
+    expect(frame).toContain('Production');
+    expect(frame).toContain('○');
+  });
+
+  it('shows active profile with filled circle', () => {
+    const items = [
+      { kind: 'profile' as const, id: 'p1', label: 'Default', active: true },
+    ];
+    const { lastFrame } = render(<CommandList {...baseProps} items={items} />);
+    expect(lastFrame()).toContain('●');
+  });
+
+  it('shows multi-select checkboxes', () => {
+    const items = [
+      { id: 'a', label: 'A', command: 'echo a' },
+      { id: 'b', label: 'B', command: 'echo b' },
+    ];
+    const { lastFrame } = render(
+      <CommandList {...baseProps} items={items} multiSelected={new Set(['a'])} />,
+    );
+    expect(lastFrame()).toContain('[✓]');
+  });
+
+  it('shows cwd badge when present', () => {
+    const items = [
+      { id: 'build', label: 'Build', command: 'npm run build', cwd: '/tmp' },
+    ];
+    const { lastFrame } = render(<CommandList {...baseProps} items={items} />);
+    expect(lastFrame()).toContain('/tmp');
+  });
+
+  it('shows pipeline badge', () => {
+    const items = [
+      { id: 'pipe', label: 'Pipeline', command: '', pipelineSteps: ['a', 'b'] },
+    ];
+    const { lastFrame } = render(<CommandList {...baseProps} items={items} />);
+    expect(lastFrame()).toContain('pipeline');
+  });
+
+  it('shows watch badge', () => {
+    const items = [
+      { id: 'w', label: 'Watch', command: 'npm run dev', watch: true },
+    ];
+    const { lastFrame } = render(<CommandList {...baseProps} items={items} />);
+    expect(lastFrame()).toContain('watch');
+  });
+
+  it('shows focused border color when focused', () => {
+    const items = [
+      { id: 'build', label: 'Build', command: 'npm run build' },
+    ];
+    const { lastFrame } = render(
+      <CommandList {...baseProps} items={items} focused={true} />,
+    );
+    expect(lastFrame()).toContain('Commands');
+  });
+
+  it('shows selection count in title', () => {
+    const items = [
+      { id: 'a', label: 'A', command: 'echo a' },
+      { id: 'b', label: 'B', command: 'echo b' },
+    ];
+    const { lastFrame } = render(
+      <CommandList {...baseProps} items={items} selCount={2} multiSelected={new Set(['a', 'b'])} />,
+    );
+    expect(lastFrame()).toContain('(2 selected)');
+  });
+});

package/src/ui/metrics-panel.test.tsx

@@ -0,0 +1,128 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import React, { act } from 'react';
+import { render } from 'ink-testing-library';
+import fs from 'fs';
+import { MetricsPanel } from './metrics-panel.js';
+
+function makeMetricsData(overrides: Record<string, any> = {}) {
+  return JSON.stringify({
+    version: '1.0.0',
+    latestTest: { label: 'Unit Tests', status: 'success', time: Date.now() - 60000 },
+    latestBuild: { status: 'failure', time: Date.now() - 120000 },
+    ...overrides,
+  });
+}
+
+vi.mock('fs', () => ({
+  default: {
+    readFileSync: vi.fn(() => makeMetricsData()),
+    writeFileSync: vi.fn(),
+    mkdirSync: vi.fn(),
+    existsSync: vi.fn(),
+  },
+  readFileSync: vi.fn(() => makeMetricsData()),
+  writeFileSync: vi.fn(),
+  mkdirSync: vi.fn(),
+  existsSync: vi.fn(),
+}));
+
+const mockReadFileSync = () => vi.mocked(fs).readFileSync;
+
+const mockTasks = (entries: Record<string, any>): Map<string, any> =>
+  new Map(Object.entries(entries)) as Map<string, any>;
+
+describe('MetricsPanel', () => {
+  const baseProps = {
+    tasks: new Map(),
+    width: 28,
+    menuRows: 10,
+  };
+
+  beforeEach(() => {
+    mockReadFileSync().mockReturnValue(makeMetricsData());
+  });
+
+  it('shows idle status when no tasks are running', () => {
+    const { lastFrame } = render(<MetricsPanel {...baseProps} />);
+    expect(lastFrame()).toContain('idle');
+  });
+
+  it('displays the package version', () => {
+    const { lastFrame } = render(<MetricsPanel {...baseProps} />);
+    expect(lastFrame()).toContain('Version: 1.0.0');
+  });
+
+  it('shows active task count for running tasks', async () => {
+    const tasks = mockTasks({
+      build: { id: 'build', label: 'Build', status: 'running', startTime: Date.now() },
+      test: { id: 'test', label: 'Test', status: 'running', startTime: Date.now() },
+    });
+    const { lastFrame, rerender } = render(<MetricsPanel {...baseProps} />);
+    await act(async () => {
+      rerender(<MetricsPanel {...baseProps} tasks={tasks} />);
+    });
+    const frame = lastFrame();
+    expect(frame).toContain('Active: 2');
+    expect(frame).toContain('running');
+  });
+
+  it('shows test passed status with time ago', () => {
+    const { lastFrame } = render(<MetricsPanel {...baseProps} />);
+    const frame = lastFrame();
+    expect(frame).toContain('Tests: passed');
+    expect(frame).toContain('1m ago');
+  });
+
+  it('shows test failure status', () => {
+    mockReadFileSync().mockReturnValue(makeMetricsData({
+      latestTest: { label: 'Tests', status: 'failure', time: Date.now() - 30000 },
+    }));
+    const { lastFrame } = render(<MetricsPanel {...baseProps} />);
+    expect(lastFrame()).toContain('Tests: failed');
+  });
+
+  it('shows no test run when no test data', () => {
+    mockReadFileSync().mockReturnValue(makeMetricsData({ latestTest: undefined }));
+    const { lastFrame } = render(<MetricsPanel {...baseProps} />);
+    expect(lastFrame()).toContain('Tests: no run');
+  });
+
+  it('shows build failed status', () => {
+    const { lastFrame } = render(<MetricsPanel {...baseProps} />);
+    expect(lastFrame()).toContain('Build: failed');
+  });
+
+  it('shows build passed status', () => {
+    mockReadFileSync().mockReturnValue(makeMetricsData({
+      latestBuild: { status: 'success', time: Date.now() - 300000 },
+    }));
+    const { lastFrame } = render(<MetricsPanel {...baseProps} />);
+    expect(lastFrame()).toContain('Build: passed');
+  });
+
+  it('shows no build run when no build data', () => {
+    mockReadFileSync().mockReturnValue(makeMetricsData({ latestBuild: undefined }));
+    const { lastFrame } = render(<MetricsPanel {...baseProps} />);
+    expect(lastFrame()).toContain('Build: no run');
+  });
+
+  it('shows last git push timestamp', () => {
+    const pushTime = new Date('2026-06-24T10:00:00').getTime();
+    mockReadFileSync().mockReturnValue(makeMetricsData({
+      lastGitPush: { label: 'main', time: pushTime },
+    }));
+    const { lastFrame } = render(<MetricsPanel {...baseProps} />);
+    expect(lastFrame()).toContain('2026-06-24 10:00');
+  });
+
+  it('shows push dash when no push data', () => {
+    const { lastFrame } = render(<MetricsPanel {...baseProps} />);
+    expect(lastFrame()).toContain('Push: -');
+  });
+
+  it('shows version dash when package.json is missing', () => {
+    mockReadFileSync().mockImplementation(() => { throw new Error('ENOENT'); });
+    const { lastFrame } = render(<MetricsPanel {...baseProps} />);
+    expect(lastFrame()).toContain('Version: -');
+  });
+});

package/src/ui/metrics-panel.tsx

@@ -3,6 +3,7 @@ import path from 'path';
 import React, { useEffect, useState } from 'react';
 import { Box, Text } from 'ink';
 import { TaskState, TaskStatus } from '../status/types.js';
+import { PERSISTENCE_DIR } from '../core/persistence.js';
 import { Panel } from './panel.js';
 
 interface MetricsPanelProps {
@@ -10,7 +11,7 @@ interface MetricsPanelProps {
   menuRows: number;
   width: number;
 }
-const METRICS_FILE = path.join(process.cwd(), '.developer-control-center', 'metrics.json');
+const METRICS_FILE = path.join(process.cwd(), PERSISTENCE_DIR, 'metrics.json');
 
 interface MetricsState {
   projectRunning: boolean;
@@ -31,12 +32,6 @@ interface MetricsState {
   packageVersion: string;
 }
 
-const INITIAL_METRICS: MetricsState = {
-  projectRunning: false,
-  activeTasks: 0,
-  packageVersion: loadPackageVersion(),
-};
-
 function loadPackageVersion(): string {
   try {
     const packageJson = JSON.parse(
@@ -49,16 +44,21 @@ function loadPackageVersion(): string {
 }
 
 function loadMetrics(): MetricsState {
+  const base = {
+    projectRunning: false,
+    activeTasks: 0,
+    packageVersion: loadPackageVersion(),
+  };
   try {
     const persisted = JSON.parse(fs.readFileSync(METRICS_FILE, 'utf-8')) as MetricsState;
     return {
-      ...INITIAL_METRICS,
+      ...base,
       latestTest: persisted.latestTest,
       latestBuild: persisted.latestBuild,
       lastGitPush: persisted.lastGitPush,
     };
   } catch {
-    return INITIAL_METRICS;
+    return base;
   }
 }
 
@@ -169,7 +169,7 @@ export const MetricsPanel: React.FC<MetricsPanelProps> = ({ tasks, menuRows, wid
   }, [tasks]);
 
   return (
-    <Panel title="Status" width={width} height={menuRows + 2}>
+    <Panel title="Status" titleColor="white" width={width} height={menuRows + 2}>
       <Box paddingLeft={1}>
         <Text color={metrics.projectRunning ? 'yellow' : 'gray'}>
           Project: {metrics.projectRunning ? 'running' : 'idle'}

package/src/ui/panel.test.tsx

@@ -0,0 +1,84 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import React from 'react';
+import { Box, Text } from 'ink';
+import { render } from 'ink-testing-library';
+import { Panel } from './panel.js';
+
+describe('Panel', () => {
+  it('renders the title in the top border', () => {
+    const { lastFrame } = render(
+      <Panel title="Test" width={20} height={5}>
+        <React.Fragment />
+      </Panel>,
+    );
+    const frame = lastFrame();
+    expect(frame).toContain('╭─ Test');
+  });
+
+  it('renders proper bottom border', () => {
+    const { lastFrame } = render(
+      <Panel title="Test" width={20} height={5}>
+        <React.Fragment />
+      </Panel>,
+    );
+    const frame = lastFrame();
+    expect(frame).toContain('╰');
+  });
+
+  it('renders side borders for each content row', () => {
+    const { lastFrame } = render(
+      <Panel title="Test" width={20} height={5}>
+        <React.Fragment />
+      </Panel>,
+    );
+    const frame = lastFrame()!;
+    const lines = frame.split('\n');
+    expect(lines.length).toBe(5);
+    expect(lines[1].startsWith('│')).toBe(true);
+    expect(lines[1].endsWith('│')).toBe(true);
+    expect(lines[2].startsWith('│')).toBe(true);
+    expect(lines[2].endsWith('│')).toBe(true);
+    expect(lines[3].startsWith('│')).toBe(true);
+    expect(lines[3].endsWith('│')).toBe(true);
+  });
+
+  it('renders children in the content area', () => {
+    const { lastFrame } = render(
+      <Panel title="Test" width={20} height={5}>
+        <Box><Text>hello</Text></Box>
+      </Panel>,
+    );
+    const frame = lastFrame();
+    expect(frame).toContain('hello');
+  });
+
+  it('shows "↑N more" when hiddenAbove is set', () => {
+    const { lastFrame } = render(
+      <Panel title="Test" width={30} height={5} hiddenAbove={3}>
+        <React.Fragment />
+      </Panel>,
+    );
+    const frame = lastFrame();
+    expect(frame).toContain('↑3 more');
+  });
+
+  it('shows "↓N more" when hiddenBelow is set', () => {
+    const { lastFrame } = render(
+      <Panel title="Test" width={30} height={5} hiddenBelow={2}>
+        <React.Fragment />
+      </Panel>,
+    );
+    const frame = lastFrame();
+    expect(frame).toContain('↓2 more');
+  });
+
+  it('renders titleExtra next to the title', () => {
+    const { lastFrame } = render(
+      <Panel title="Main" width={30} height={5} titleExtra={<Text> [extra]</Text>}>
+        <React.Fragment />
+      </Panel>,
+    );
+    const frame = lastFrame();
+    expect(frame).toContain('[extra]');
+  });
+});