all-hands-cli 0.1.0

package/.allhands/harness/src/tui/modal.ts

@@ -0,0 +1,232 @@
+/**
+ * Modal - Overlay modal component for TUI
+ *
+ * Used for:
+ * - Switch Spec selection
+ * - Activity Log view
+ * - Custom Flow selection
+ *
+ * Navigation:
+ * - j/k: Navigate items
+ * - u/d: Page up/down
+ * - Space/Enter: Select item
+ * - Esc: Close modal
+ */
+
+import blessed from 'blessed';
+
+export interface ModalItem {
+  id: string;
+  label: string;
+  type: 'header' | 'item';
+}
+
+export interface ModalOptions {
+  title: string;
+  items: ModalItem[];
+  onSelect: (id: string) => void;
+  onCancel: () => void;
+  onClear?: () => void;
+  scrollable?: boolean;
+  startFromBottom?: boolean;
+}
+
+export interface Modal {
+  box: blessed.Widgets.BoxElement;
+  selectedIndex: number;
+  destroy: () => void;
+  navigate: (delta: number) => void;
+  select: () => void;
+}
+
+export function createModal(
+  screen: blessed.Widgets.Screen,
+  options: ModalOptions
+): Modal {
+  const { title, items, onSelect, onCancel, onClear, scrollable = false, startFromBottom = false } = options;
+
+  // Calculate modal size
+  const width = Math.floor((screen.width as number) * 0.75);
+  const height = Math.min(items.length + 6, Math.floor(screen.height as number * 0.8));
+
+  // Create outer container (non-scrollable, holds border and help text)
+  const container = blessed.box({
+    parent: screen,
+    top: 'center',
+    left: 'center',
+    width,
+    height,
+    border: 'line',
+    label: ` ${title} `,
+    tags: true,
+    style: {
+      border: {
+        fg: '#c4b5fd',
+        bold: true,
+      },
+    },
+  });
+
+  // Height available for content (container height minus borders minus help text line)
+  const contentHeight = height - 4; // 2 for borders, 2 for help text area
+
+  // Create scrollable list inside the container
+  const list = blessed.list({
+    parent: container,
+    top: 0,
+    left: 0,
+    width: width - 4, // Account for container borders and padding
+    height: contentHeight,
+    tags: true,
+    scrollable: scrollable,
+    alwaysScroll: scrollable,
+    scrollbar: scrollable
+      ? {
+          ch: '┃',
+          track: {
+            bg: 'black',
+          },
+          style: {
+            fg: '#4A34C5',
+          },
+        }
+      : {
+          ch: ' ',
+        },
+    style: {
+      selected: {
+        inverse: true,
+      },
+    },
+    keys: false, // We handle keys ourselves
+    mouse: false,
+  });
+
+  // Add help text (fixed at bottom of container, outside scrollable area)
+  const helpText = onClear
+    ? '{#5c6370-fg}[Space] Select  [x] Close  [Esc] Cancel{/#5c6370-fg}'
+    : '{#5c6370-fg}[Space] Select  [Esc] Cancel{/#5c6370-fg}';
+  blessed.text({
+    parent: container,
+    bottom: 0,
+    left: 1,
+    content: helpText,
+    tags: true,
+  });
+
+  // Focus the container for key events
+  container.focus();
+
+  // Track selection state
+  let selectedIndex = 0;
+
+  // Find first/last selectable item based on startFromBottom
+  const selectableIndices = items
+    .map((item, index) => ({ item, index }))
+    .filter(({ item }) => item.type === 'item')
+    .map(({ index }) => index);
+
+  if (selectableIndices.length > 0) {
+    selectedIndex = startFromBottom
+      ? selectableIndices[selectableIndices.length - 1]
+      : selectableIndices[0];
+  }
+
+  // Track current scroll position manually since setItems resets it
+  let currentScrollPos = 0;
+
+  // Render items to the list
+  function renderItems(): void {
+    const lines: string[] = [];
+
+    items.forEach((item, index) => {
+      if (item.type === 'header') {
+        lines.push(`{#818cf8-fg}${item.label}{/#818cf8-fg}`);
+      } else {
+        const isSelected = index === selectedIndex;
+        const prefix = isSelected ? '{#a78bfa-fg}{bold}▸ ' : '  ';
+        const suffix = isSelected ? '{/bold}{/#a78bfa-fg}' : '';
+        lines.push(`${prefix}${item.label}${suffix}`);
+      }
+    });
+
+    // setItems resets scroll, so we need to restore it after
+    list.setItems(lines);
+    if (scrollable && currentScrollPos > 0) {
+      list.scrollTo(currentScrollPos);
+    }
+  }
+
+  // Scroll to ensure selected item is visible
+  function scrollToSelected(): void {
+    if (!scrollable || contentHeight <= 0) return;
+
+    // Calculate where selected item should be visible
+    // If selected item is below visible area, scroll down
+    if (selectedIndex >= currentScrollPos + contentHeight) {
+      currentScrollPos = selectedIndex - contentHeight + 1;
+    }
+    // If selected item is above visible area, scroll up
+    else if (selectedIndex < currentScrollPos) {
+      // If this is the first selectable item, scroll to top to show headers
+      if (selectedIndex === selectableIndices[0]) {
+        currentScrollPos = 0;
+      } else {
+        currentScrollPos = selectedIndex;
+      }
+    }
+
+    // Clamp scroll position (add 1 to maxScroll to ensure we can reach the true bottom)
+    const maxScroll = Math.max(0, items.length - contentHeight + 1);
+    currentScrollPos = Math.max(0, Math.min(currentScrollPos, maxScroll));
+
+    list.scrollTo(currentScrollPos);
+  }
+
+  // Navigation
+  function navigate(delta: number): void {
+    if (selectableIndices.length === 0) return;
+
+    const currentPos = selectableIndices.indexOf(selectedIndex);
+    let newPos = currentPos + delta;
+
+    // Clamp
+    newPos = Math.max(0, Math.min(selectableIndices.length - 1, newPos));
+    selectedIndex = selectableIndices[newPos];
+
+    renderItems();
+    scrollToSelected();
+    screen.render();
+  }
+
+  function select(): void {
+    const item = items[selectedIndex];
+    if (item && item.type === 'item') {
+      onSelect(item.id);
+    }
+  }
+
+  // Set up key bindings on container
+  container.key(['j', 'down'], () => navigate(1));
+  container.key(['k', 'up'], () => navigate(-1));
+  container.key(['u'], () => navigate(-5));
+  container.key(['d'], () => navigate(5));
+  container.key(['space', 'enter'], () => select());
+  container.key(['escape'], () => onCancel());
+  if (onClear) {
+    container.key(['x'], () => onClear());
+  }
+
+  // Initial render
+  renderItems();
+  scrollToSelected();
+  screen.render();
+
+  return {
+    box: container,
+    selectedIndex,
+    destroy: () => container.destroy(),
+    navigate,
+    select,
+  };
+}

package/.allhands/harness/src/tui/prompts-pane.ts

@@ -0,0 +1,186 @@
+/**
+ * Prompts Pane - Center area showing prompt list by status
+ *
+ * Order:
+ * 1. Active (in_progress) at top
+ * 2. Unimplemented (pending) next
+ * 3. Implemented (done) at bottom
+ *
+ * Each section sorted by prompt number.
+ */
+
+import blessed from 'blessed';
+
+export interface PromptItem {
+  number: number;
+  title: string;
+  status: 'pending' | 'in_progress' | 'done';
+  path: string;
+}
+
+const ACTIONS_WIDTH = 24;
+const HEADER_HEIGHT = 3;
+
+export function createPromptsPane(
+  screen: blessed.Widgets.Screen,
+  prompts: PromptItem[],
+  selectedIndex?: number
+): blessed.Widgets.BoxElement {
+  // Create outer container (non-scrollable, holds border and help text)
+  const container = blessed.box({
+    parent: screen,
+    top: HEADER_HEIGHT,
+    left: ACTIONS_WIDTH,
+    width: '50%-12',
+    height: `100%-${HEADER_HEIGHT}`,
+    border: {
+      type: 'line',
+    },
+    label: ' Prompts ',
+    tags: true,
+    style: {
+      border: {
+        fg: '#4A34C5',
+      },
+    },
+  });
+
+  // Calculate content area height (container minus borders minus help text line)
+  const containerHeight = typeof container.height === 'number' ? container.height : (screen.height as number) - HEADER_HEIGHT;
+  const contentHeight = containerHeight - 3; // 2 for borders, 1 for help text
+
+  // Create scrollable content area inside the container
+  const scrollArea = blessed.box({
+    parent: container,
+    top: 0,
+    left: 0,
+    width: '100%-2',
+    height: contentHeight,
+    tags: true,
+    scrollable: true,
+    alwaysScroll: true,
+    scrollbar: {
+      ch: '┃',
+      track: {
+        bg: 'black',
+      },
+      style: {
+        fg: '#4A34C5',
+      },
+    },
+  });
+
+  // Sort prompts by status then number
+  const sorted = sortPrompts(prompts);
+  const { content, selectedLineNumber } = formatPromptsContentWithLineInfo(sorted, selectedIndex);
+
+  scrollArea.setContent(content);
+
+  // Scroll to ensure selected item is visible
+  if (selectedLineNumber !== undefined && selectedLineNumber >= 0) {
+    const visibleHeight = contentHeight;
+
+    // Only scroll if selected line would be outside visible area
+    if (selectedLineNumber >= visibleHeight) {
+      // Scroll to put selected line in the middle of visible area when possible
+      const scrollOffset = Math.max(0, selectedLineNumber - Math.floor(visibleHeight / 2));
+      scrollArea.scrollTo(scrollOffset);
+    }
+  }
+
+  // Add help text at bottom of container (fixed position, outside scroll area)
+  blessed.text({
+    parent: container,
+    bottom: 0,
+    left: 1,
+    content: '{#5c6370-fg}u/d: Page Up/Down{/#5c6370-fg}',
+    tags: true,
+  });
+
+  return container;
+}
+
+function sortPrompts(prompts: PromptItem[]): PromptItem[] {
+  const inProgress = prompts
+    .filter((p) => p.status === 'in_progress')
+    .sort((a, b) => a.number - b.number);
+
+  const pending = prompts
+    .filter((p) => p.status === 'pending')
+    .sort((a, b) => a.number - b.number);
+
+  const done = prompts
+    .filter((p) => p.status === 'done')
+    .sort((a, b) => a.number - b.number);
+
+  return [...inProgress, ...pending, ...done];
+}
+
+interface PromptsContentResult {
+  content: string;
+  selectedLineNumber?: number;
+}
+
+function formatPromptsContentWithLineInfo(prompts: PromptItem[], selectedIndex?: number): PromptsContentResult {
+  if (prompts.length === 0) {
+    return { content: '{#5c6370-fg}  No prompts found{/#5c6370-fg}' };
+  }
+
+  const lines: string[] = [];
+  let currentStatus: string | null = null;
+  let itemIndex = 0;
+  let selectedLineNumber: number | undefined;
+
+  for (const prompt of prompts) {
+    // Add section separator when status changes
+    if (prompt.status !== currentStatus) {
+      if (currentStatus !== null) {
+        lines.push('{#3a3f5c-fg}━━━━━━━━━━━━━━━━━━━━━━━━{/#3a3f5c-fg}');
+      }
+      currentStatus = prompt.status;
+    }
+
+    const isSelected = selectedIndex === itemIndex;
+    if (isSelected) {
+      selectedLineNumber = lines.length; // Track the line number (0-indexed)
+    }
+    const line = formatPromptLine(prompt, isSelected);
+    lines.push(line);
+    itemIndex++;
+  }
+
+  return { content: lines.join('\n'), selectedLineNumber };
+}
+
+function formatPromptLine(prompt: PromptItem, isSelected: boolean): string {
+  const icon = getStatusIcon(prompt.status);
+  const numStr = String(prompt.number).padStart(2, '0');
+
+  // Truncate title if too long
+  const maxTitleLen = 30;
+  let title = prompt.title;
+  if (title.length > maxTitleLen) {
+    title = title.substring(0, maxTitleLen - 3) + '...';
+  }
+
+  const content = `${icon} ${numStr}. ${title}`;
+
+  if (isSelected) {
+    return `{inverse}${content}{/inverse}`;
+  }
+
+  return content;
+}
+
+function getStatusIcon(status: string): string {
+  switch (status) {
+    case 'done':
+      return '{#10b981-fg}✓{/#10b981-fg}';
+    case 'in_progress':
+      return '{#a78bfa-fg}▶{/#a78bfa-fg}';
+    case 'pending':
+      return '{#5c6370-fg}○{/#5c6370-fg}';
+    default:
+      return '?';
+  }
+}