@amodalai/amodal 0.1.2

package/src/ui/ConfirmationPrompt.tsx

@@ -0,0 +1,75 @@
+/**
+ * @license
+ * Copyright 2025 Amodal Labs, Inc.
+ * SPDX-License-Identifier: MIT
+ */
+
+import type React from 'react';
+import {Box, Text, useInput} from 'ink';
+import {theme} from './theme.js';
+import type {ConfirmationRequest} from './types.js';
+
+interface ConfirmationPromptProps {
+  request: ConfirmationRequest;
+  queueSize?: number;
+  onRespond: (approved: boolean) => void;
+  onApproveAll?: () => void;
+  onRejectAll?: () => void;
+}
+
+export const ConfirmationPrompt: React.FC<ConfirmationPromptProps> = ({
+  request,
+  queueSize = 1,
+  onRespond,
+  onApproveAll,
+  onRejectAll,
+}) => {
+  useInput((input) => {
+    if (input === 'y' || input === 'Y') {
+      onRespond(true);
+    } else if (input === 'n' || input === 'N') {
+      onRespond(false);
+    } else if ((input === 'a' || input === 'A') && onApproveAll && queueSize > 1) {
+      onApproveAll();
+    } else if ((input === 'r' || input === 'R') && onRejectAll && queueSize > 1) {
+      onRejectAll();
+    }
+  });
+
+  return (
+    <Box
+      flexDirection="column"
+      marginTop={1}
+      borderStyle="round"
+      borderColor={theme.status.warning}
+      paddingLeft={1}
+      paddingRight={1}
+    >
+      <Box>
+        <Text color={theme.status.warning} bold>
+          Confirmation Required
+        </Text>
+        {queueSize > 1 ? (
+          <Text color={theme.ui.dim}> (1 of {queueSize})</Text>
+        ) : null}
+      </Box>
+      <Text bold>
+        {request.method} {request.endpoint}
+      </Text>
+      <Text wrap="wrap">{request.reason}</Text>
+      {request.escalated ? (
+        <Text color={theme.status.warning}>{'\u26A0'} Escalated — requires explicit approval</Text>
+      ) : null}
+      <Box marginTop={1} gap={2}>
+        <Text color={theme.status.success}>[y] Approve</Text>
+        <Text color={theme.status.error}>[n] Reject</Text>
+        {queueSize > 1 ? (
+          <>
+            <Text color={theme.status.success}>[a] Approve all</Text>
+            <Text color={theme.status.error}>[r] Reject all</Text>
+          </>
+        ) : null}
+      </Box>
+    </Box>
+  );
+};

package/src/ui/DiffRenderer.test.ts

@@ -0,0 +1,104 @@
+/**
+ * @license
+ * Copyright 2025 Amodal Labs, Inc.
+ * SPDX-License-Identifier: MIT
+ */
+
+import {describe, it, expect} from 'vitest';
+import {isDiffContent, parseDiff} from './DiffRenderer.js';
+
+describe('isDiffContent', () => {
+  it('detects unified diff with hunk headers', () => {
+    const diff = `--- a/file.ts
++++ b/file.ts
+@@ -1,3 +1,4 @@
+ line 1
++added line
+ line 2`;
+    expect(isDiffContent(diff)).toBe(true);
+  });
+
+  it('detects diff with only @@ markers', () => {
+    expect(isDiffContent('@@ -1,3 +1,4 @@\n+added')).toBe(true);
+  });
+
+  it('detects diff with --- and +++ pair', () => {
+    expect(isDiffContent('--- a/old\n+++ b/new')).toBe(true);
+  });
+
+  it('rejects non-diff content', () => {
+    expect(isDiffContent('just some text')).toBe(false);
+    expect(isDiffContent('hello\nworld')).toBe(false);
+  });
+
+  it('rejects content with only ---', () => {
+    expect(isDiffContent('--- separator\nsome content')).toBe(false);
+  });
+});
+
+describe('parseDiff', () => {
+  it('parses a simple unified diff', () => {
+    const diff = `--- a/file.ts
++++ b/file.ts
+@@ -1,3 +1,4 @@
+ context line
++added line
+ another context
+-removed line`;
+    const hunks = parseDiff(diff);
+    expect(hunks).toHaveLength(1);
+    expect(hunks[0]?.header).toBe('@@ -1,3 +1,4 @@');
+    expect(hunks[0]?.lines).toHaveLength(4);
+  });
+
+  it('parses multiple hunks', () => {
+    const diff = `--- a/file.ts
++++ b/file.ts
+@@ -1,3 +1,3 @@
+ line 1
+-old
++new
+@@ -10,3 +10,3 @@
+ line 10
+-old2
++new2`;
+    const hunks = parseDiff(diff);
+    expect(hunks).toHaveLength(2);
+  });
+
+  it('includes line numbers', () => {
+    const diff = `@@ -5,3 +5,4 @@
+ context
++added
+ more context
+-removed`;
+    const hunks = parseDiff(diff);
+    const lines = hunks[0]?.lines ?? [];
+    // First context line: old=5, new=5
+    expect(lines[0]?.oldLine).toBe(5);
+    expect(lines[0]?.newLine).toBe(5);
+    // Added line: no old, new=6
+    expect(lines[1]?.oldLine).toBeNull();
+    expect(lines[1]?.newLine).toBe(6);
+    // Context: old=6, new=7
+    expect(lines[2]?.oldLine).toBe(6);
+    expect(lines[2]?.newLine).toBe(7);
+    // Removed: old=7, no new
+    expect(lines[3]?.oldLine).toBe(7);
+    expect(lines[3]?.newLine).toBeNull();
+  });
+
+  it('returns empty for non-diff input', () => {
+    expect(parseDiff('not a diff')).toHaveLength(0);
+  });
+
+  it('detects file extension from headers', () => {
+    const diff = `--- a/src/utils.ts
++++ b/src/utils.ts
+@@ -1,1 +1,1 @@
+-old
++new`;
+    const hunks = parseDiff(diff);
+    expect(hunks[0]?.fileExt).toBe('ts');
+  });
+});

package/src/ui/DiffRenderer.tsx

@@ -0,0 +1,188 @@
+/**
+ * @license
+ * Copyright 2025 Amodal Labs, Inc.
+ * SPDX-License-Identifier: MIT
+ */
+
+import type React from 'react';
+import {Box, Text} from 'ink';
+import {theme} from './theme.js';
+
+interface DiffRendererProps {
+  diff: string;
+  width?: number;
+}
+
+export interface DiffLine {
+  type: 'context' | 'added' | 'removed';
+  content: string;
+  oldLine: number | null;
+  newLine: number | null;
+}
+
+export interface DiffHunk {
+  header: string;
+  lines: DiffLine[];
+  fileExt?: string;
+}
+
+/**
+ * Returns true if text looks like a unified diff.
+ */
+export function isDiffContent(text: string): boolean {
+  const lines = text.split('\n');
+  // Must have at least a hunk header or --- / +++ pair
+  return lines.some((l) => l.startsWith('@@')) ||
+    (lines.some((l) => l.startsWith('---')) && lines.some((l) => l.startsWith('+++')));
+}
+
+/**
+ * Parse a unified diff into structured hunks with line numbers.
+ */
+export function parseDiff(diff: string): DiffHunk[] {
+  const lines = diff.split('\n');
+  const hunks: DiffHunk[] = [];
+  let currentHunk: DiffHunk | null = null;
+  let oldLine = 0;
+  let newLine = 0;
+  let fileExt: string | undefined;
+
+  for (const line of lines) {
+    // Detect file extension from headers
+    if (line.startsWith('--- ') || line.startsWith('+++ ')) {
+      const match = /\.(\w+)$/.exec(line);
+      if (match) {
+        fileExt = match[1];
+      }
+      continue;
+    }
+
+    // Hunk header
+    const hunkMatch = /^@@\s+-(\d+)(?:,\d+)?\s+\+(\d+)(?:,\d+)?\s+@@/.exec(line);
+    if (hunkMatch) {
+      currentHunk = {
+        header: line,
+        lines: [],
+        fileExt,
+      };
+      hunks.push(currentHunk);
+      oldLine = parseInt(hunkMatch[1] ?? '0', 10);
+      newLine = parseInt(hunkMatch[2] ?? '0', 10);
+      continue;
+    }
+
+    if (!currentHunk) continue;
+
+    if (line.startsWith('+')) {
+      currentHunk.lines.push({
+        type: 'added',
+        content: line.slice(1),
+        oldLine: null,
+        newLine: newLine++,
+      });
+    } else if (line.startsWith('-')) {
+      currentHunk.lines.push({
+        type: 'removed',
+        content: line.slice(1),
+        oldLine: oldLine++,
+        newLine: null,
+      });
+    } else {
+      // Context line (starts with space or is empty)
+      currentHunk.lines.push({
+        type: 'context',
+        content: line.startsWith(' ') ? line.slice(1) : line,
+        oldLine: oldLine++,
+        newLine: newLine++,
+      });
+    }
+  }
+
+  return hunks;
+}
+
+function formatLineNum(n: number | null, width: number): string {
+  if (n === null) return ' '.repeat(width);
+  return String(n).padStart(width);
+}
+
+export const DiffRenderer: React.FC<DiffRendererProps> = ({diff, width}) => {
+  const hunks = parseDiff(diff);
+
+  // Fallback to simple rendering if parsing fails
+  if (hunks.length === 0) {
+    const lines = diff.split('\n');
+    return (
+      <Box flexDirection="column">
+        {lines.map((line, i) => {
+          const color = line.startsWith('+')
+            ? theme.status.success
+            : line.startsWith('-')
+              ? theme.status.error
+              : line.startsWith('@@')
+                ? theme.text.link
+                : theme.text.secondary;
+          return (
+            <Text key={i} color={color}>
+              {line}
+            </Text>
+          );
+        })}
+      </Box>
+    );
+  }
+
+  // Calculate gutter width
+  let maxLine = 0;
+  for (const hunk of hunks) {
+    for (const line of hunk.lines) {
+      if (line.oldLine !== null && line.oldLine > maxLine) maxLine = line.oldLine;
+      if (line.newLine !== null && line.newLine > maxLine) maxLine = line.newLine;
+    }
+  }
+  const gutterWidth = Math.max(3, String(maxLine).length);
+  const showGutter = (width ?? 80) > 60;
+
+  return (
+    <Box flexDirection="column">
+      {hunks.map((hunk, hi) => (
+        <Box key={hi} flexDirection="column">
+          {/* Gap indicator between non-contiguous hunks */}
+          {hi > 0 ? (
+            <Text color={theme.ui.dim}>{'  ···'}</Text>
+          ) : null}
+
+          {/* Hunk header */}
+          <Text color={theme.text.link}>{hunk.header}</Text>
+
+          {/* Lines */}
+          {hunk.lines.map((line, li) => {
+            const color =
+              line.type === 'added'
+                ? theme.status.success
+                : line.type === 'removed'
+                  ? theme.status.error
+                  : theme.text.secondary;
+            const prefix =
+              line.type === 'added' ? '+' : line.type === 'removed' ? '-' : ' ';
+
+            return (
+              <Box key={li}>
+                {showGutter ? (
+                  <Text color={theme.ui.dim}>
+                    {formatLineNum(line.oldLine, gutterWidth)}{' '}
+                    {formatLineNum(line.newLine, gutterWidth)}{' '}
+                  </Text>
+                ) : null}
+                <Text color={color}>
+                  {prefix}
+                  {line.content}
+                </Text>
+              </Box>
+            );
+          })}
+        </Box>
+      ))}
+    </Box>
+  );
+};

package/src/ui/ExpandableContent.tsx

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright 2025 Amodal Labs, Inc.
+ * SPDX-License-Identifier: MIT
+ */
+
+import type React from 'react';
+import {useState} from 'react';
+import {Box, Text, useInput} from 'ink';
+import {theme} from './theme.js';
+
+interface ExpandableContentProps {
+  title: string;
+  content: string;
+  defaultExpanded?: boolean;
+  maxCollapsedLines?: number;
+}
+
+export const ExpandableContent: React.FC<ExpandableContentProps> = ({
+  title,
+  content,
+  defaultExpanded = false,
+  maxCollapsedLines = 5,
+}) => {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const lines = content.split('\n');
+  const shouldCollapse = lines.length > maxCollapsedLines;
+
+  useInput((_input, key) => {
+    if (key.return && shouldCollapse) {
+      setExpanded((prev) => !prev);
+    }
+  });
+
+  if (!shouldCollapse) {
+    return (
+      <Text color={theme.text.secondary} wrap="truncate-end">
+        {content}
+      </Text>
+    );
+  }
+
+  if (!expanded) {
+    return (
+      <Box>
+        <Text color={theme.ui.dim}>
+          {'\u25B8 '}
+          {title} ({lines.length} lines)
+        </Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column">
+      <Text color={theme.ui.dim}>
+        {'\u25BE '}
+        {title}
+      </Text>
+      {lines.map((line, i) => (
+        <Box key={i}>
+          <Text color={theme.text.accent}>{'\u2502 '}</Text>
+          <Text color={theme.text.secondary}>{line}</Text>
+        </Box>
+      ))}
+    </Box>
+  );
+};

package/src/ui/ExploreIndicator.tsx

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2025 Amodal Labs, Inc.
+ * SPDX-License-Identifier: MIT
+ */
+
+import type React from 'react';
+import {Box, Text} from 'ink';
+import Spinner from 'ink-spinner';
+import {theme} from './theme.js';
+import type {ExplorePhase} from './types.js';
+
+interface ExploreIndicatorProps {
+  phase: ExplorePhase;
+}
+
+export const ExploreIndicator: React.FC<ExploreIndicatorProps> = ({phase}) => {
+  if (phase.active) {
+    return (
+      <Box>
+        <Text color={theme.text.link}>
+          <Spinner type="dots" />
+          {' \uD83D\uDD0D Exploring: '}
+        </Text>
+        <Text color={theme.text.secondary}>&quot;{phase.query}&quot;</Text>
+      </Box>
+    );
+  }
+
+  const tokenStr = phase.tokensUsed
+    ? ` (${(phase.tokensUsed / 1000).toFixed(1)}K tokens)`
+    : '';
+
+  return (
+    <Box>
+      <Text color={theme.ui.dim}>
+        {'\uD83D\uDD0D Explored: "'}
+        {phase.query}
+        {'"'}
+        {tokenStr}
+      </Text>
+    </Box>
+  );
+};

package/src/ui/Footer.tsx

@@ -0,0 +1,87 @@
+/**
+ * @license
+ * Copyright 2025 Amodal Labs, Inc.
+ * SPDX-License-Identifier: MIT
+ */
+
+import type React from 'react';
+import {Box, Text} from 'ink';
+import {theme} from './theme.js';
+import type {TokenUsageInfo} from './types.js';
+
+interface FooterProps {
+  isStreaming: boolean;
+  hasPendingQuestion: boolean;
+  hasPendingConfirmation?: boolean;
+  tokenUsage?: TokenUsageInfo;
+  cwd?: string;
+  modelName?: string;
+  isNarrow?: boolean;
+}
+
+function formatTokens(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+  return String(n);
+}
+
+function shortenCwd(cwd: string): string {
+  const home = process.env['HOME'] ?? '';
+  if (home && cwd.startsWith(home)) {
+    return '~' + cwd.slice(home.length);
+  }
+  // If too long, show last 2 segments
+  const parts = cwd.split('/');
+  if (parts.length > 3) {
+    return '~/...' + '/' + parts.slice(-2).join('/');
+  }
+  return cwd;
+}
+
+export const Footer: React.FC<FooterProps> = ({
+  isStreaming,
+  hasPendingQuestion,
+  hasPendingConfirmation,
+  tokenUsage,
+  cwd,
+  modelName,
+  isNarrow,
+}) => {
+  // Line 1: shortcuts
+  let hints: string;
+  if (hasPendingConfirmation) {
+    hints = '[y] approve  [n] reject  Ctrl+C exit';
+  } else if (hasPendingQuestion) {
+    hints = 'Enter answer  \u00B7  Ctrl+C exit';
+  } else if (isStreaming) {
+    hints = 'waiting...  \u00B7  Ctrl+C exit';
+  } else if (isNarrow) {
+    hints = 'Enter send  \u00B7  Ctrl+C exit';
+  } else {
+    hints = 'Enter send  \u00B7  j/k scroll  \u00B7  Ctrl+E expand tool  \u00B7  /help  \u00B7  Ctrl+C exit';
+  }
+
+  // Line 2: model + tokens + cwd
+  const infoParts: string[] = [];
+  if (modelName || tokenUsage?.model) {
+    const model = modelName ?? tokenUsage?.model ?? '';
+    // Shorten model name (e.g., "claude-sonnet-4-20250514" → "claude-sonnet-4")
+    const shortModel = model.replace(/-\d{8}$/, '');
+    infoParts.push(shortModel);
+  }
+  if (tokenUsage && tokenUsage.totalTokens > 0) {
+    infoParts.push(`${formatTokens(tokenUsage.totalTokens)} tokens`);
+  }
+  if (cwd && !isNarrow) {
+    infoParts.push(shortenCwd(cwd));
+  }
+
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      <Text color={theme.ui.dim}>{hints}</Text>
+      {infoParts.length > 0 ? (
+        <Text color={theme.ui.muted}>{infoParts.join(' | ')}</Text>
+      ) : null}
+    </Box>
+  );
+};

package/src/ui/FullScreenLayout.tsx

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright 2025 Amodal Labs, Inc.
+ * SPDX-License-Identifier: MIT
+ */
+
+import type React from 'react';
+import {Box, useStdout} from 'ink';
+import {useAlternateBuffer} from './useAlternateBuffer.js';
+
+interface FullScreenLayoutProps {
+  header: React.ReactNode;
+  footer: React.ReactNode;
+  children: React.ReactNode;
+}
+
+/**
+ * Full-screen layout using alternate buffer.
+ * Header pinned to top, footer pinned to bottom, children fill the middle.
+ */
+export const FullScreenLayout: React.FC<FullScreenLayoutProps> = ({
+  header,
+  footer,
+  children,
+}) => {
+  const {stdout} = useStdout();
+  const rows = stdout?.rows ?? 24;
+
+  useAlternateBuffer(true);
+
+  return (
+    <Box flexDirection="column" height={rows}>
+      {/* Pinned header */}
+      {header}
+
+      {/* Scrollable middle */}
+      <Box flexDirection="column" flexGrow={1}>
+        {children}
+      </Box>
+
+      {/* Pinned footer */}
+      {footer}
+    </Box>
+  );
+};

package/src/ui/Header.tsx

@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright 2025 Amodal Labs, Inc.
+ * SPDX-License-Identifier: MIT
+ */
+
+import type React from 'react';
+import {Box, Text} from 'ink';
+import Spinner from 'ink-spinner';
+import {theme} from './theme.js';
+
+// ASCII art banner — compact 3-line logo
+const BANNER = [
+  '  ▄▀█ █▀▄▀█ █▀█ █▀▄ ▄▀█ █░░',
+  '  █▀█ █░▀░█ █▄█ █▄▀ █▀█ █▄▄',
+];
+
+interface HeaderProps {
+  sessionId: string | null;
+  isStreaming: boolean;
+  isNarrow?: boolean;
+}
+
+export const Header: React.FC<HeaderProps> = ({sessionId, isStreaming, isNarrow}) => (
+  <Box flexDirection="column" marginBottom={1}>
+    {!isNarrow ? (
+      <Box flexDirection="column">
+        {BANNER.map((line, i) => (
+          <Text key={i} color={theme.text.accent} bold>{line}</Text>
+        ))}
+      </Box>
+    ) : null}
+    <Box>
+      {isNarrow ? (
+        <Text color={theme.text.accent} bold>am</Text>
+      ) : null}
+      {sessionId ? (
+        <Text color={theme.ui.dim}>  {'\u25C6'} {isNarrow ? sessionId.slice(0, 4) : `session ${sessionId.slice(0, 8)}`}</Text>
+      ) : null}
+      <Text color={theme.ui.dim}> {'\u25C6'} </Text>
+      {isStreaming ? (
+        <Text color={theme.status.warning}>
+          <Spinner type="dots" /> streaming
+        </Text>
+      ) : (
+        <Text color={theme.ui.dim}>ready</Text>
+      )}
+    </Box>
+  </Box>
+);