@amodalai/amodal 0.1.2

package/src/ui/InputBar.tsx

@@ -0,0 +1,105 @@
+/**
+ * @license
+ * Copyright 2025 Amodal Labs, Inc.
+ * SPDX-License-Identifier: MIT
+ */
+
+import type React from 'react';
+import {useState, useCallback} from 'react';
+import {Box, Text} from 'ink';
+import TextInput from 'ink-text-input';
+import Spinner from 'ink-spinner';
+import {theme} from './theme.js';
+import {parseSlashCommand} from './commands/index.js';
+
+interface InputBarProps {
+  onSubmit: (text: string) => void;
+  onSlashCommand?: (name: string, args: string) => void;
+  isStreaming: boolean;
+  elapsed?: number;
+  exploreQuery?: string;
+  activeToolName?: string;
+}
+
+function formatElapsed(seconds: number): string {
+  if (seconds < 60) return `${seconds}s`;
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  return `${m}m${s}s`;
+}
+
+export const InputBar: React.FC<InputBarProps> = ({
+  onSubmit,
+  onSlashCommand,
+  isStreaming,
+  elapsed = 0,
+  exploreQuery,
+  activeToolName,
+}) => {
+  const [value, setValue] = useState('');
+
+  const handleSubmit = useCallback(
+    (text: string) => {
+      const trimmed = text.trim();
+      if (!trimmed) return;
+
+      // Check for slash commands
+      if (onSlashCommand) {
+        const parsed = parseSlashCommand(trimmed);
+        if (parsed) {
+          onSlashCommand(parsed.name, parsed.args);
+          setValue('');
+          return;
+        }
+      }
+
+      onSubmit(trimmed);
+      setValue('');
+    },
+    [onSubmit, onSlashCommand],
+  );
+
+  if (isStreaming) {
+    const elapsedStr = elapsed > 0 ? ` (${formatElapsed(elapsed)})` : '';
+
+    let statusText: string;
+    if (exploreQuery) {
+      statusText = ` exploring "${exploreQuery}"${elapsedStr}`;
+    } else if (activeToolName) {
+      statusText = ` running ${activeToolName}${elapsedStr}`;
+    } else {
+      statusText = ` thinking${elapsedStr}`;
+    }
+
+    return (
+      <Box marginTop={1}>
+        <Text color={theme.text.accent}>
+          <Spinner type="dots" />
+        </Text>
+        <Text color={theme.ui.dim}>{statusText}</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      <Box>
+        <Text color={theme.border.default}>{'─'.repeat(process.stdout.columns || 80)}</Text>
+      </Box>
+      <Box>
+        <Text color={theme.text.accent} bold>
+          {'› '}
+        </Text>
+        <TextInput
+          value={value}
+          onChange={setValue}
+          onSubmit={handleSubmit}
+          placeholder="Type a message... (/help for commands)"
+        />
+      </Box>
+      <Box>
+        <Text color={theme.border.default}>{'─'.repeat(process.stdout.columns || 80)}</Text>
+      </Box>
+    </Box>
+  );
+};

package/src/ui/MessageList.tsx

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2025 Amodal Labs, Inc.
+ * SPDX-License-Identifier: MIT
+ */
+
+import type React from 'react';
+import {UserMessage} from './UserMessage.js';
+import {AssistantMessage} from './AssistantMessage.js';
+import type {ChatMessage} from './types.js';
+
+interface MessageListProps {
+  messages: ChatMessage[];
+  width?: number;
+}
+
+/**
+ * Pure render component — maps messages to UserMessage/AssistantMessage.
+ * No longer uses <Static>; parent controls scrolling.
+ */
+export const MessageList: React.FC<MessageListProps> = ({messages, width}) => (
+  <>
+    {messages.map((message) =>
+      message.role === 'user' ? (
+        <UserMessage key={message.id} text={message.text} />
+      ) : (
+        <AssistantMessage key={message.id} message={message} width={width} />
+      ),
+    )}
+  </>
+);

package/src/ui/NotificationBar.tsx

@@ -0,0 +1,64 @@
+/**
+ * @license
+ * Copyright 2025 Amodal Labs, Inc.
+ * SPDX-License-Identifier: MIT
+ */
+
+import type React from 'react';
+import {useEffect} from 'react';
+import {Box, Text} from 'ink';
+import {theme} from './theme.js';
+import type {NotificationInfo} from './types.js';
+
+interface NotificationBarProps {
+  notifications: NotificationInfo[];
+  onDismiss: (id: string) => void;
+}
+
+const notificationIcons: Record<NotificationInfo['type'], string> = {
+  credential_saved: '\uD83D\uDD11',
+  approved: '\u2713',
+  kb_proposal: '\uD83D\uDCCB',
+  field_scrub: '\uD83D\uDEE1\uFE0F',
+  info: '\u2139',
+  warning: '\u26A0',
+};
+
+const notificationColors: Record<NotificationInfo['type'], string> = {
+  credential_saved: theme.status.success,
+  approved: theme.status.success,
+  kb_proposal: theme.text.link,
+  field_scrub: theme.status.warning,
+  info: theme.text.link,
+  warning: theme.status.warning,
+};
+
+export const NotificationBar: React.FC<NotificationBarProps> = ({notifications, onDismiss}) => {
+  useEffect(() => {
+    if (notifications.length === 0) return;
+    const timers = notifications.map((n) =>
+      setTimeout(() => {
+        onDismiss(n.id);
+      }, 5000),
+    );
+    return () => {
+      timers.forEach((t) => {
+        clearTimeout(t);
+      });
+    };
+  }, [notifications, onDismiss]);
+
+  if (notifications.length === 0) return null;
+
+  return (
+    <Box flexDirection="column">
+      {notifications.map((n) => (
+        <Box key={n.id}>
+          <Text color={notificationColors[n.type]}>
+            {notificationIcons[n.type]} {n.message}
+          </Text>
+        </Box>
+      ))}
+    </Box>
+  );
+};

package/src/ui/ScrollableMessageList.tsx

@@ -0,0 +1,82 @@
+/**
+ * @license
+ * Copyright 2025 Amodal Labs, Inc.
+ * SPDX-License-Identifier: MIT
+ */
+
+import type React from 'react';
+import {useMemo} from 'react';
+import {Box, Text} from 'ink';
+import {UserMessage} from './UserMessage.js';
+import {AssistantMessage} from './AssistantMessage.js';
+import {StreamingView} from './StreamingView.js';
+import {theme} from './theme.js';
+import type {ChatMessage, ToolCallInfo, ExplorePhase} from './types.js';
+
+interface ScrollableMessageListProps {
+  messages: ChatMessage[];
+  width: number;
+  viewportHeight: number;
+  scrollTop: number;
+  isStreaming: boolean;
+  streamingText: string;
+  thinkingText: string;
+  toolCalls: ToolCallInfo[];
+  skills: string[];
+  explore: ExplorePhase | null;
+  error: string | null;
+}
+
+/**
+ * Renders messages and streaming content.
+ * Scroll viewport is handled by the terminal's native scrollback for now.
+ */
+export const ScrollableMessageList: React.FC<ScrollableMessageListProps> = ({
+  messages,
+  width,
+  isStreaming,
+  streamingText,
+  thinkingText,
+  toolCalls,
+  skills,
+  explore,
+  error,
+}) => {
+  const messageElements = useMemo(
+    () =>
+      messages.map((message) =>
+        message.role === 'user' ? (
+          <UserMessage key={message.id} text={message.text} />
+        ) : (
+          <AssistantMessage key={message.id} message={message} width={width} />
+        ),
+      ),
+    [messages, width],
+  );
+
+  return (
+    <Box flexDirection="column">
+      {messageElements}
+
+      {/* Live streaming content */}
+      {isStreaming ? (
+        <StreamingView
+          text={streamingText}
+          thinkingText={thinkingText}
+          toolCalls={toolCalls}
+          skills={skills}
+          explore={explore}
+          error={error}
+          width={width}
+        />
+      ) : null}
+
+      {/* Error display (non-streaming errors) */}
+      {!isStreaming && error ? (
+        <Box marginTop={1}>
+          <Text color={theme.status.error}>[error] {error}</Text>
+        </Box>
+      ) : null}
+    </Box>
+  );
+};

package/src/ui/SessionBrowser.test.ts

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2025 Amodal Labs, Inc.
+ * SPDX-License-Identifier: MIT
+ */
+
+import {describe, it, expect} from 'vitest';
+import type {SessionEntry} from './SessionBrowser.js';
+
+// Test the filtering logic independently
+function filterSessions(
+  sessions: SessionEntry[],
+  filter: string,
+): SessionEntry[] {
+  if (!filter) return sessions;
+  return sessions.filter(
+    (s) =>
+      s.id.includes(filter) ||
+      s.preview.toLowerCase().includes(filter.toLowerCase()),
+  );
+}
+
+describe('SessionBrowser filtering', () => {
+  const sessions: SessionEntry[] = [
+    {id: 'abc123', createdAt: '2025-01-01', messageCount: 5, preview: 'What is the error rate?'},
+    {id: 'def456', createdAt: '2025-01-02', messageCount: 3, preview: 'Deploy status check'},
+    {id: 'ghi789', createdAt: '2025-01-03', messageCount: 8, preview: 'Error investigation'},
+  ];
+
+  it('returns all sessions with empty filter', () => {
+    expect(filterSessions(sessions, '')).toHaveLength(3);
+  });
+
+  it('filters by id', () => {
+    const result = filterSessions(sessions, 'abc');
+    expect(result).toHaveLength(1);
+    expect(result[0]?.id).toBe('abc123');
+  });
+
+  it('filters by preview text (case-insensitive)', () => {
+    const result = filterSessions(sessions, 'error');
+    expect(result).toHaveLength(2);
+  });
+
+  it('returns empty for no matches', () => {
+    const result = filterSessions(sessions, 'zzz');
+    expect(result).toHaveLength(0);
+  });
+});

package/src/ui/SessionBrowser.tsx

@@ -0,0 +1,179 @@
+/**
+ * @license
+ * Copyright 2025 Amodal Labs, Inc.
+ * SPDX-License-Identifier: MIT
+ */
+
+import type React from 'react';
+import {useState, useEffect} from 'react';
+import {Box, Text, useInput} from 'ink';
+import http from 'node:http';
+import https from 'node:https';
+import {theme} from './theme.js';
+
+export interface SessionEntry {
+  id: string;
+  createdAt: string;
+  messageCount: number;
+  preview: string;
+}
+
+interface SessionBrowserProps {
+  baseUrl: string;
+  onSelect: (sessionId: string) => void;
+  onClose: () => void;
+}
+
+export const SessionBrowser: React.FC<SessionBrowserProps> = ({
+  baseUrl,
+  onSelect,
+  onClose,
+}) => {
+  const [sessions, setSessions] = useState<SessionEntry[]>([]);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [filter, setFilter] = useState('');
+  const [isSearching, setIsSearching] = useState(false);
+
+  useEffect(() => {
+    const url = new URL('/sessions', baseUrl);
+    const mod = url.protocol === 'https:' ? https : http;
+    const req = mod.request(
+      url,
+      { method: 'GET' },
+      (res) => {
+        let data = '';
+        res.setEncoding('utf8');
+        res.on('data', (chunk: string) => {
+          data += chunk;
+        });
+        res.on('end', () => {
+          try {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+            const parsed = JSON.parse(data) as {sessions: SessionEntry[]};
+            setSessions(parsed.sessions);
+          } catch {
+            setError('Failed to load sessions');
+          } finally {
+            setLoading(false);
+          }
+        });
+      },
+    );
+    req.on('error', (err) => {
+      setError(err.message);
+      setLoading(false);
+    });
+    req.end();
+  }, [baseUrl]);
+
+  const filtered = filter
+    ? sessions.filter(
+        (s) =>
+          s.id.includes(filter) || s.preview.toLowerCase().includes(filter.toLowerCase()),
+      )
+    : sessions;
+
+  useInput((input, key) => {
+    if (isSearching) {
+      if (key.escape) {
+        setIsSearching(false);
+        setFilter('');
+      } else if (key.return) {
+        setIsSearching(false);
+      } else if (key.backspace || key.delete) {
+        setFilter((prev) => prev.slice(0, -1));
+      } else if (input && !key.ctrl) {
+        setFilter((prev) => prev + input);
+      }
+      return;
+    }
+
+    if (key.escape) {
+      onClose();
+    } else if (input === 'j' || key.downArrow) {
+      setSelectedIndex((prev) => Math.min(prev + 1, filtered.length - 1));
+    } else if (input === 'k' || key.upArrow) {
+      setSelectedIndex((prev) => Math.max(prev - 1, 0));
+    } else if (key.return) {
+      const session = filtered[selectedIndex];
+      if (session) {
+        onSelect(session.id);
+      }
+    } else if (input === '/') {
+      setIsSearching(true);
+    }
+  });
+
+  if (loading) {
+    return (
+      <Box marginTop={1}>
+        <Text color={theme.ui.dim}>Loading sessions...</Text>
+      </Box>
+    );
+  }
+
+  if (error) {
+    return (
+      <Box marginTop={1} flexDirection="column">
+        <Text color={theme.status.error}>Error: {error}</Text>
+        <Text color={theme.ui.dim}>Press Esc to close</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      <Box marginBottom={1}>
+        <Text bold color={theme.text.accent}>
+          Sessions
+        </Text>
+        <Text color={theme.ui.dim}>
+          {' '}({filtered.length} of {sessions.length})
+        </Text>
+      </Box>
+
+      {isSearching ? (
+        <Box marginBottom={1}>
+          <Text color={theme.text.accent}>/ </Text>
+          <Text>{filter}</Text>
+          <Text color={theme.ui.dim}>_</Text>
+        </Box>
+      ) : filter ? (
+        <Box marginBottom={1}>
+          <Text color={theme.ui.dim}>filter: {filter}</Text>
+        </Box>
+      ) : null}
+
+      {filtered.length === 0 ? (
+        <Text color={theme.ui.dim}>No sessions found</Text>
+      ) : (
+        filtered.slice(0, 10).map((session, i) => {
+          const isSelected = i === selectedIndex;
+          return (
+            <Box key={session.id} gap={1}>
+              <Text color={isSelected ? theme.text.accent : theme.ui.dim}>
+                {isSelected ? '>' : ' '}
+              </Text>
+              <Text bold={isSelected} color={isSelected ? theme.text.primary : theme.text.secondary}>
+                {session.id.slice(0, 8)}
+              </Text>
+              <Text color={theme.ui.dim}>{session.createdAt}</Text>
+              <Text color={theme.text.secondary} wrap="truncate-end">
+                {session.preview}
+              </Text>
+            </Box>
+          );
+        })
+      )}
+
+      <Box marginTop={1} gap={2}>
+        <Text color={theme.ui.dim}>j/k navigate</Text>
+        <Text color={theme.ui.dim}>Enter select</Text>
+        <Text color={theme.ui.dim}>/ search</Text>
+        <Text color={theme.ui.dim}>Esc close</Text>
+      </Box>
+    </Box>
+  );
+};

package/src/ui/StatusMessage.tsx

@@ -0,0 +1,35 @@
+/**
+ * @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 StatusMessageProps {
+  type: 'info' | 'warning' | 'error' | 'success';
+  children: React.ReactNode;
+}
+
+const icons: Record<StatusMessageProps['type'], string> = {
+  info: '\u2139',
+  warning: '\u26A0',
+  error: '\u2717',
+  success: '\u2713',
+};
+
+const colors: Record<StatusMessageProps['type'], string> = {
+  info: theme.text.link,
+  warning: theme.status.warning,
+  error: theme.status.error,
+  success: theme.status.success,
+};
+
+export const StatusMessage: React.FC<StatusMessageProps> = ({type, children}) => (
+  <Box>
+    <Text color={colors[type]}>{icons[type]} </Text>
+    <Text color={colors[type]}>{children}</Text>
+  </Box>
+);

package/src/ui/StreamingView.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 {ToolCallDisplay} from './ToolCallDisplay.js';
+import {ThinkingDisplay} from './ThinkingDisplay.js';
+import {ExploreIndicator} from './ExploreIndicator.js';
+import type {ToolCallInfo, ExplorePhase} from './types.js';
+
+interface StreamingViewProps {
+  text: string;
+  thinkingText?: string;
+  toolCalls: ToolCallInfo[];
+  skills: string[];
+  explore?: ExplorePhase | null;
+  error: string | null;
+  width?: number;
+}
+
+export const StreamingView: React.FC<StreamingViewProps> = ({
+  text,
+  thinkingText,
+  toolCalls,
+  skills,
+  explore,
+  error,
+  width,
+}) => {
+  if (
+    !text &&
+    !thinkingText &&
+    toolCalls.length === 0 &&
+    !error &&
+    skills.length === 0 &&
+    !explore
+  ) {
+    return null;
+  }
+
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      {/* Activated skills */}
+      {skills.map((skill, i) => (
+        <Text key={i} color={theme.status.warning}>
+          {'  \u26A1 '}
+          {skill}
+        </Text>
+      ))}
+
+      {/* Explore phase indicator */}
+      {explore ? <ExploreIndicator phase={explore} /> : null}
+
+      {/* Thinking display */}
+      {thinkingText ? <ThinkingDisplay text={thinkingText} /> : null}
+
+      {/* Streaming text (raw, no markdown rendering mid-stream) */}
+      {text ? (
+        <Box>
+          <Text color={theme.text.accent}>{'\u2726 '}</Text>
+          <Text wrap="wrap">{text}</Text>
+        </Box>
+      ) : null}
+
+      {/* Active tool calls — running tools get full view, completed get compact */}
+      {toolCalls.map((tool) => (
+        <ToolCallDisplay
+          key={tool.toolId}
+          tool={tool}
+          width={width}
+          compact={tool.status !== 'running'}
+        />
+      ))}
+
+      {/* Error */}
+      {error ? (
+        <Box marginTop={1}>
+          <Text color={theme.status.error}>[error] {error}</Text>
+        </Box>
+      ) : null}
+    </Box>
+  );
+};

package/src/ui/SubagentDisplay.tsx

@@ -0,0 +1,57 @@
+/**
+ * @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 {SubagentEventInfo} from './types.js';
+
+interface SubagentDisplayProps {
+  events: SubagentEventInfo[];
+}
+
+export const SubagentDisplay: React.FC<SubagentDisplayProps> = ({events}) => {
+  if (events.length === 0) return null;
+
+  return (
+    <Box flexDirection="column" paddingLeft={2}>
+      {events.map((event, i) => {
+        const isLast = i === events.length - 1;
+        const prefix = isLast ? '└─' : '├─';
+
+        if (event.error) {
+          return (
+            <Text key={i} color={theme.status.error}>
+              {prefix} {event.agentName}: {event.error}
+            </Text>
+          );
+        }
+
+        if (event.text) {
+          return (
+            <Text key={i} color={theme.text.secondary}>
+              {prefix} {event.agentName}: {event.text}
+            </Text>
+          );
+        }
+
+        if (event.toolName) {
+          return (
+            <Text key={i} color={theme.ui.dim}>
+              {prefix} {event.agentName} › {event.toolName}
+            </Text>
+          );
+        }
+
+        return (
+          <Text key={i} color={theme.ui.dim}>
+            {prefix} {event.agentName} [{event.eventType}]
+          </Text>
+        );
+      })}
+    </Box>
+  );
+};