feat: add AskUserDialog for UI component of AskUser tool (#17344)

Co-authored-by: jacob314 <jacob314@gmail.com>
2026-04-21 02:24:09 -07:00 · 2026-01-23 15:42:48 -05:00
parent 25c0802b52
commit 2c0cc7b9a5
10 changed files with 3009 additions and 1 deletions
@@ -0,0 +1,110 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { Text, Box } from 'ink';
+import { theme } from '../../semantic-colors.js';
+
+/**
+ * Represents a single tab in the TabHeader.
+ */
+export interface Tab {
+  /** Unique identifier for this tab */
+  key: string;
+  /** Header text displayed in the tab indicator */
+  header: string;
+  /** Optional custom status icon for this tab */
+  statusIcon?: string;
+  /** Whether this is a special tab (like "Review") - uses different default icon */
+  isSpecial?: boolean;
+}
+
+/**
+ * Props for the TabHeader component.
+ */
+export interface TabHeaderProps {
+  /** Array of tab definitions */
+  tabs: Tab[];
+  /** Currently active tab index */
+  currentIndex: number;
+  /** Set of indices for tabs that show a completion indicator */
+  completedIndices?: Set<number>;
+  /** Show navigation arrow hints on sides (default: true) */
+  showArrows?: boolean;
+  /** Show status icons (checkmark/box) before tab headers (default: true) */
+  showStatusIcons?: boolean;
+  /**
+   * Custom status icon renderer. Return undefined to use default icons.
+   * Default icons: '✓' for completed, '□' for incomplete, '≡' for special tabs
+   */
+  renderStatusIcon?: (
+    tab: Tab,
+    index: number,
+    isCompleted: boolean,
+  ) => string | undefined;
+}
+
+/**
+ * A header component that displays tab indicators for multi-tab interfaces.
+ *
+ * Renders in the format: `← Tab1 │ Tab2 │ Tab3 →`
+ *
+ * Features:
+ * - Shows completion status (✓ or □) per tab
+ * - Highlights current tab with accent color
+ * - Supports special tabs (like "Review") with different icons
+ * - Customizable status icons
+ */
+export function TabHeader({
+  tabs,
+  currentIndex,
+  completedIndices = new Set(),
+  showArrows = true,
+  showStatusIcons = true,
+  renderStatusIcon,
+}: TabHeaderProps): React.JSX.Element | null {
+  if (tabs.length <= 1) return null;
+
+  const getStatusIcon = (tab: Tab, index: number): string => {
+    const isCompleted = completedIndices.has(index);
+
+    // Try custom renderer first
+    if (renderStatusIcon) {
+      const customIcon = renderStatusIcon(tab, index, isCompleted);
+      if (customIcon !== undefined) return customIcon;
+    }
+
+    // Use tab's own icon if provided
+    if (tab.statusIcon) return tab.statusIcon;
+
+    // Default icons
+    if (tab.isSpecial) return '\u2261'; // ≡
+    return isCompleted ? '\u2713' : '\u25A1'; // ✓ or □
+  };
+
+  return (
+    <Box flexDirection="row" marginBottom={1}>
+      {showArrows && <Text color={theme.text.secondary}>{'\u2190 '}</Text>}
+      {tabs.map((tab, i) => (
+        <React.Fragment key={tab.key}>
+          {i > 0 && <Text color={theme.text.secondary}>{' \u2502 '}</Text>}
+          {showStatusIcons && (
+            <Text color={theme.text.secondary}>{getStatusIcon(tab, i)} </Text>
+          )}
+          <Text
+            color={
+              i === currentIndex ? theme.text.accent : theme.text.secondary
+            }
+            bold={i === currentIndex}
+          >
+            {tab.header}
+          </Text>
+        </React.Fragment>
+      ))}
+      {showArrows && <Text color={theme.text.secondary}>{' \u2192'}</Text>}
+    </Box>
+  );
+}