@amodalai/amodal 0.1.2

package/src/ui/useElapsedTime.ts

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright 2025 Amodal Labs, Inc.
+ * SPDX-License-Identifier: MIT
+ */
+
+import {useState, useEffect, useRef} from 'react';
+
+/**
+ * Returns elapsed seconds since mount or last reset.
+ * Resets when `isStreaming` flips to true.
+ */
+export function useElapsedTime(isStreaming: boolean): number {
+  const [elapsed, setElapsed] = useState(0);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const wasStreamingRef = useRef(false);
+
+  useEffect(() => {
+    // Reset when streaming starts
+    if (isStreaming && !wasStreamingRef.current) {
+      setElapsed(0);
+    }
+    wasStreamingRef.current = isStreaming;
+
+    if (isStreaming) {
+      intervalRef.current = setInterval(() => {
+        setElapsed((prev) => prev + 1);
+      }, 1000);
+    } else if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [isStreaming]);
+
+  return elapsed;
+}

package/src/ui/useResponsiveLayout.test.ts

@@ -0,0 +1,54 @@
+/**
+ * @license
+ * Copyright 2025 Amodal Labs, Inc.
+ * SPDX-License-Identifier: MIT
+ */
+
+import {describe, it, expect} from 'vitest';
+import {getResponsiveLayout} from './useResponsiveLayout.js';
+
+describe('getResponsiveLayout', () => {
+  it('narrow terminal (40 cols)', () => {
+    const layout = getResponsiveLayout(40);
+    expect(layout.isNarrow).toBe(true);
+    expect(layout.contentWidth).toBe(40);
+    expect(layout.toolCardWidth).toBe(36); // 40 - 4
+    expect(layout.showGutter).toBe(false);
+  });
+
+  it('medium terminal (70 cols)', () => {
+    const layout = getResponsiveLayout(70);
+    expect(layout.isNarrow).toBe(false);
+    expect(layout.contentWidth).toBe(70);
+    expect(layout.toolCardWidth).toBe(66); // 70 - 4
+    expect(layout.showGutter).toBe(false);
+  });
+
+  it('wide terminal (120 cols)', () => {
+    const layout = getResponsiveLayout(120);
+    expect(layout.isNarrow).toBe(false);
+    expect(layout.contentWidth).toBe(120);
+    expect(layout.toolCardWidth).toBe(80); // capped at 80
+    expect(layout.showGutter).toBe(true);
+  });
+
+  it('exact narrow threshold (60 cols)', () => {
+    const layout = getResponsiveLayout(60);
+    expect(layout.isNarrow).toBe(false);
+  });
+
+  it('below narrow threshold (59 cols)', () => {
+    const layout = getResponsiveLayout(59);
+    expect(layout.isNarrow).toBe(true);
+  });
+
+  it('exact gutter threshold (80 cols)', () => {
+    const layout = getResponsiveLayout(80);
+    expect(layout.showGutter).toBe(true);
+  });
+
+  it('narrow terminal caps tool width at 50', () => {
+    const layout = getResponsiveLayout(58);
+    expect(layout.toolCardWidth).toBe(50); // min(58-4, 50)
+  });
+});

package/src/ui/useResponsiveLayout.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2025 Amodal Labs, Inc.
+ * SPDX-License-Identifier: MIT
+ */
+
+export interface ResponsiveLayout {
+  isNarrow: boolean;
+  contentWidth: number;
+  toolCardWidth: number;
+  showGutter: boolean;
+}
+
+const NARROW_THRESHOLD = 60;
+const GUTTER_THRESHOLD = 80;
+const MAX_TOOL_WIDTH = 80;
+const NARROW_TOOL_WIDTH = 50;
+
+/**
+ * Returns layout parameters based on terminal column width.
+ */
+export function getResponsiveLayout(cols: number): ResponsiveLayout {
+  const isNarrow = cols < NARROW_THRESHOLD;
+  return {
+    isNarrow,
+    contentWidth: cols,
+    toolCardWidth: isNarrow
+      ? Math.min(cols - 4, NARROW_TOOL_WIDTH)
+      : Math.min(cols - 4, MAX_TOOL_WIDTH),
+    showGutter: cols >= GUTTER_THRESHOLD,
+  };
+}

package/src/ui/useScroll.test.ts

@@ -0,0 +1,99 @@
+/**
+ * @license
+ * Copyright 2025 Amodal Labs, Inc.
+ * SPDX-License-Identifier: MIT
+ */
+
+import {describe, it, expect} from 'vitest';
+
+// Test scroll clamping logic independently from the React hook
+function clampScroll(
+  scrollTop: number,
+  contentHeight: number,
+  viewportHeight: number,
+): number {
+  const maxScroll = Math.max(0, contentHeight - viewportHeight);
+  return Math.max(0, Math.min(scrollTop, maxScroll));
+}
+
+function isAtBottom(
+  scrollTop: number,
+  contentHeight: number,
+  viewportHeight: number,
+): boolean {
+  const maxScroll = Math.max(0, contentHeight - viewportHeight);
+  return scrollTop >= maxScroll || contentHeight <= viewportHeight;
+}
+
+function autoScrollTarget(
+  currentTop: number,
+  wasAtBottom: boolean,
+  contentHeight: number,
+  viewportHeight: number,
+): number {
+  if (!wasAtBottom) return currentTop;
+  return Math.max(0, contentHeight - viewportHeight);
+}
+
+describe('scroll clamping', () => {
+  it('clamps to zero minimum', () => {
+    expect(clampScroll(-10, 100, 50)).toBe(0);
+  });
+
+  it('clamps to max scroll', () => {
+    // max = 100 - 50 = 50
+    expect(clampScroll(60, 100, 50)).toBe(50);
+  });
+
+  it('allows valid scroll positions', () => {
+    expect(clampScroll(25, 100, 50)).toBe(25);
+  });
+
+  it('handles content smaller than viewport', () => {
+    expect(clampScroll(10, 30, 50)).toBe(0);
+  });
+
+  it('handles equal content and viewport', () => {
+    expect(clampScroll(5, 50, 50)).toBe(0);
+  });
+});
+
+describe('isAtBottom', () => {
+  it('is true when scrolled to max', () => {
+    expect(isAtBottom(50, 100, 50)).toBe(true);
+  });
+
+  it('is true when content fits viewport', () => {
+    expect(isAtBottom(0, 30, 50)).toBe(true);
+  });
+
+  it('is false when not at max', () => {
+    expect(isAtBottom(25, 100, 50)).toBe(false);
+  });
+
+  it('is true at exact max', () => {
+    expect(isAtBottom(50, 100, 50)).toBe(true);
+  });
+
+  it('is true beyond max', () => {
+    expect(isAtBottom(60, 100, 50)).toBe(true);
+  });
+});
+
+describe('autoScrollTarget', () => {
+  it('auto-scrolls when at bottom', () => {
+    expect(autoScrollTarget(50, true, 120, 50)).toBe(70);
+  });
+
+  it('stays put when not at bottom', () => {
+    expect(autoScrollTarget(25, false, 120, 50)).toBe(25);
+  });
+
+  it('handles growing content from empty', () => {
+    expect(autoScrollTarget(0, true, 60, 50)).toBe(10);
+  });
+
+  it('stays at 0 when content fits', () => {
+    expect(autoScrollTarget(0, true, 30, 50)).toBe(0);
+  });
+});

package/src/ui/useScroll.ts

@@ -0,0 +1,97 @@
+/**
+ * @license
+ * Copyright 2025 Amodal Labs, Inc.
+ * SPDX-License-Identifier: MIT
+ */
+
+import {useState, useCallback, useEffect, useRef} from 'react';
+
+export interface ScrollState {
+  scrollTop: number;
+  isAtBottom: boolean;
+  scrollToBottom: () => void;
+  scrollBy: (delta: number) => void;
+  scrollToTop: () => void;
+  setContentHeight: (height: number) => void;
+  setViewportHeight: (height: number) => void;
+}
+
+/**
+ * Manages scroll state for a virtual viewport.
+ * Auto-scrolls to bottom when new content arrives while already at bottom.
+ */
+export function useScroll(autoScrollOnContent: boolean): ScrollState {
+  const [scrollTop, setScrollTop] = useState(0);
+  const contentHeightRef = useRef(0);
+  const viewportHeightRef = useRef(0);
+  const isAtBottomRef = useRef(true);
+
+  const getMaxScroll = useCallback(
+    () => Math.max(0, contentHeightRef.current - viewportHeightRef.current),
+    [],
+  );
+
+  const clamp = useCallback(
+    (value: number) => Math.max(0, Math.min(value, getMaxScroll())),
+    [getMaxScroll],
+  );
+
+  const scrollToBottom = useCallback(() => {
+    const max = getMaxScroll();
+    setScrollTop(max);
+    isAtBottomRef.current = true;
+  }, [getMaxScroll]);
+
+  const scrollToTop = useCallback(() => {
+    setScrollTop(0);
+    isAtBottomRef.current = contentHeightRef.current <= viewportHeightRef.current;
+  }, []);
+
+  const scrollBy = useCallback(
+    (delta: number) => {
+      setScrollTop((prev) => {
+        const next = clamp(prev + delta);
+        isAtBottomRef.current = next >= getMaxScroll();
+        return next;
+      });
+    },
+    [clamp, getMaxScroll],
+  );
+
+  const setContentHeight = useCallback(
+    (height: number) => {
+      contentHeightRef.current = height;
+      // Auto-scroll if we were at bottom
+      if (autoScrollOnContent && isAtBottomRef.current) {
+        const max = Math.max(0, height - viewportHeightRef.current);
+        setScrollTop(max);
+      }
+    },
+    [autoScrollOnContent],
+  );
+
+  const setViewportHeight = useCallback((height: number) => {
+    viewportHeightRef.current = height;
+  }, []);
+
+  // Keep isAtBottom in sync
+  const isAtBottom = scrollTop >= getMaxScroll() || contentHeightRef.current <= viewportHeightRef.current;
+  isAtBottomRef.current = isAtBottom;
+
+  // Auto-scroll to bottom on initial render
+  useEffect(() => {
+    if (autoScrollOnContent && isAtBottomRef.current) {
+      scrollToBottom();
+    }
+  }, [autoScrollOnContent, scrollToBottom]);
+
+  return {
+    scrollTop,
+    isAtBottom,
+    scrollToBottom,
+    scrollBy,
+    scrollToTop,
+    setContentHeight,
+    setViewportHeight,
+  };
+}

package/src/ui/useSessionResume.test.ts

@@ -0,0 +1,80 @@
+/**
+ * @license
+ * Copyright 2025 Amodal Labs, Inc.
+ * SPDX-License-Identifier: MIT
+ */
+
+import {describe, it, expect} from 'vitest';
+import {convertSessionMessages} from './useSessionResume.js';
+import type {SessionMessage} from './types.js';
+
+describe('convertSessionMessages', () => {
+  it('converts user messages', () => {
+    const input: SessionMessage[] = [
+      {role: 'user', text: 'hello'},
+    ];
+    const result = convertSessionMessages(input);
+    expect(result).toHaveLength(1);
+    expect(result[0]?.role).toBe('user');
+    expect(result[0]?.text).toBe('hello');
+    expect(result[0]?.id).toMatch(/^resume-/);
+  });
+
+  it('converts assistant messages with tool calls', () => {
+    const input: SessionMessage[] = [
+      {
+        role: 'assistant',
+        text: 'Found the data',
+        tool_calls: [
+          {
+            tool_name: 'request',
+            tool_id: 't1',
+            args: {url: '/api/data'},
+            status: 'success',
+            result: '{"ok": true}',
+            duration_ms: 120,
+          },
+        ],
+        skills: ['triage'],
+        thinking: 'Analyzing the query',
+      },
+    ];
+    const result = convertSessionMessages(input);
+    expect(result).toHaveLength(1);
+    expect(result[0]?.toolCalls).toHaveLength(1);
+    expect(result[0]?.toolCalls?.[0]?.toolName).toBe('request');
+    expect(result[0]?.toolCalls?.[0]?.durationMs).toBe(120);
+    expect(result[0]?.skills).toContain('triage');
+    expect(result[0]?.thinking).toBe('Analyzing the query');
+  });
+
+  it('handles messages without optional fields', () => {
+    const input: SessionMessage[] = [
+      {role: 'assistant', text: 'Simple response'},
+    ];
+    const result = convertSessionMessages(input);
+    expect(result[0]?.toolCalls).toBeUndefined();
+    expect(result[0]?.skills).toBeUndefined();
+    expect(result[0]?.thinking).toBeUndefined();
+  });
+
+  it('converts a full conversation', () => {
+    const input: SessionMessage[] = [
+      {role: 'user', text: 'What is the error rate?'},
+      {role: 'assistant', text: 'The error rate is 2.3%'},
+      {role: 'user', text: 'Why?'},
+      {role: 'assistant', text: 'Due to timeout issues'},
+    ];
+    const result = convertSessionMessages(input);
+    expect(result).toHaveLength(4);
+    expect(result[0]?.role).toBe('user');
+    expect(result[1]?.role).toBe('assistant');
+    expect(result[2]?.role).toBe('user');
+    expect(result[3]?.role).toBe('assistant');
+  });
+
+  it('handles empty array', () => {
+    const result = convertSessionMessages([]);
+    expect(result).toHaveLength(0);
+  });
+});

package/src/ui/useSessionResume.ts

@@ -0,0 +1,102 @@
+/**
+ * @license
+ * Copyright 2025 Amodal Labs, Inc.
+ * SPDX-License-Identifier: MIT
+ */
+
+import {useState, useEffect} from 'react';
+import http from 'node:http';
+import https from 'node:https';
+import type {ChatMessage, SessionMessage} from './types.js';
+
+let nextResumeId = 0;
+function genResumeId(): string {
+  return `resume-${++nextResumeId}`;
+}
+
+/**
+ * Convert server SessionMessage[] to ChatMessage[].
+ */
+export function convertSessionMessages(
+  sessionMessages: SessionMessage[],
+): ChatMessage[] {
+  return sessionMessages.map((msg) => ({
+    id: genResumeId(),
+    role: msg.role,
+    text: msg.text,
+    toolCalls: msg.tool_calls?.map((tc) => ({
+      toolId: tc.tool_id,
+      toolName: tc.tool_name,
+      args: tc.args,
+      status: tc.status,
+      result: tc.result,
+      error: tc.error,
+      durationMs: tc.duration_ms,
+    })),
+    skills: msg.skills,
+    thinking: msg.thinking,
+  }));
+}
+
+export interface UseSessionResumeResult {
+  messages: ChatMessage[] | null;
+  loading: boolean;
+  error: string | null;
+}
+
+/**
+ * Fetches a session from the runtime server and converts messages.
+ */
+export function useSessionResume(
+  sessionId: string | null,
+  baseUrl: string,
+): UseSessionResumeResult {
+  const [messages, setMessages] = useState<ChatMessage[] | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!sessionId) return;
+
+    setLoading(true);
+    setError(null);
+
+    const url = new URL(`/session/${encodeURIComponent(sessionId)}`, 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 {
+              session_id: string;
+              messages: SessionMessage[];
+            };
+            const converted = convertSessionMessages(parsed.messages);
+            setMessages(converted);
+          } catch {
+            setError('Failed to parse session data');
+          } finally {
+            setLoading(false);
+          }
+        });
+      },
+    );
+
+    req.on('error', (err) => {
+      setError(err.message);
+      setLoading(false);
+    });
+
+    req.end();
+  }, [sessionId, baseUrl]);
+
+  return {messages, loading, error};
+}

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": ".",
+    "composite": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["src/**/*.test.ts", "dist"],
+  "references": [
+    { "path": "../core" },
+    { "path": "../runtime" }
+  ]
+}

package/vitest.config.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2025 Amodal Labs, Inc.
+ * SPDX-License-Identifier: MIT
+ */
+
+/// <reference types="vitest" />
+import {defineConfig} from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    include: ['src/**/*.test.ts'],
+    exclude: ['**/node_modules/**', '**/dist/**'],
+    environment: 'node',
+    globals: true,
+    testTimeout: 60000,
+    hookTimeout: 60000,
+    pool: 'forks',
+  },
+});