@amodalai/amodal 0.1.2

package/src/templates/config-template.ts

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2025 Amodal Labs, Inc.
+ * SPDX-License-Identifier: MIT
+ */
+
+export interface ConfigTemplateOptions {
+  name: string;
+  provider: 'anthropic' | 'openai' | 'google';
+}
+
+/**
+ * Generates the default config.json content for a new project.
+ */
+export function generateConfigTemplate(options: ConfigTemplateOptions): string {
+  const modelMap: Record<string, string> = {
+    anthropic: 'claude-sonnet-4-20250514',
+    openai: 'gpt-4o',
+    google: 'gemini-2.0-flash',
+  };
+
+  const envKeyMap: Record<string, string> = {
+    anthropic: 'ANTHROPIC_API_KEY',
+    openai: 'OPENAI_API_KEY',
+    google: 'GOOGLE_API_KEY',
+  };
+
+  const model = modelMap[options.provider] ?? modelMap['anthropic'];
+  const envKey = envKeyMap[options.provider] ?? envKeyMap['anthropic'];
+
+  const config = {
+    name: options.name,
+    version: '1.0.0',
+    models: {
+      main: {
+        provider: options.provider,
+        model,
+        apiKey: `\${${envKey}}`,
+      },
+    },
+  };
+
+  return JSON.stringify(config, null, 2) + '\n';
+}

package/src/templates/deployment-templates.test.ts

@@ -0,0 +1,99 @@
+/**
+ * @license
+ * Copyright 2025 Amodal Labs, Inc.
+ * SPDX-License-Identifier: MIT
+ */
+
+import {describe, it, expect} from 'vitest';
+import {generateDockerfile} from './dockerfile-template.js';
+import {generateCompose} from './compose-template.js';
+import {extractEnvVars} from './env-template.js';
+
+describe('generateDockerfile', () => {
+  it('should generate valid Dockerfile', () => {
+    const content = generateDockerfile();
+    expect(content).toContain('FROM node:20-slim AS builder');
+    expect(content).toContain('FROM node:20-slim AS production');
+    expect(content).toContain('EXPOSE 3847');
+  });
+
+  it('should include multi-stage build', () => {
+    const content = generateDockerfile();
+    expect(content).toContain('AS builder');
+    expect(content).toContain('AS production');
+    expect(content).toContain('COPY --from=builder');
+  });
+
+  it('should set NODE_ENV', () => {
+    const content = generateDockerfile();
+    expect(content).toContain('NODE_ENV=production');
+  });
+});
+
+describe('generateCompose', () => {
+  it('should use service name', () => {
+    const content = generateCompose('my-agent');
+    expect(content).toContain('my-agent:');
+  });
+
+  it('should sanitize special characters in service name', () => {
+    const content = generateCompose('My Agent v2.0');
+    expect(content).toContain('my-agent-v2-0:');
+  });
+
+  it('should include health check', () => {
+    const content = generateCompose('test');
+    expect(content).toContain('healthcheck:');
+    expect(content).toContain('/health');
+  });
+
+  it('should reference .env.production', () => {
+    const content = generateCompose('test');
+    expect(content).toContain('.env.production');
+  });
+
+  it('should expose port 3847', () => {
+    const content = generateCompose('test');
+    expect(content).toContain('3847:3847');
+  });
+});
+
+describe('extractEnvVars', () => {
+  it('should extract env:VAR_NAME references', () => {
+    const json = '{"key": "env:MY_API_KEY", "model": "env:MODEL_NAME"}';
+    const vars = extractEnvVars(json);
+    expect(vars).toEqual(['MODEL_NAME', 'MY_API_KEY']);
+  });
+
+  it('should deduplicate vars', () => {
+    const json = '{"a": "env:MY_KEY", "b": "env:MY_KEY"}';
+    const vars = extractEnvVars(json);
+    expect(vars).toEqual(['MY_KEY']);
+  });
+
+  it('should return empty for no env refs', () => {
+    const json = '{"key": "literal-value"}';
+    expect(extractEnvVars(json)).toEqual([]);
+  });
+
+  it('should handle complex nested JSON', () => {
+    const json = JSON.stringify({
+      models: {
+        main: {provider: 'env:PROVIDER', model: 'env:MODEL'},
+      },
+      platform: {apiKey: 'env:API_KEY'},
+    });
+    const vars = extractEnvVars(json);
+    expect(vars).toEqual(['API_KEY', 'MODEL', 'PROVIDER']);
+  });
+
+  it('should sort results alphabetically', () => {
+    const json = '{"z": "env:ZEBRA", "a": "env:ALPHA"}';
+    const vars = extractEnvVars(json);
+    expect(vars).toEqual(['ALPHA', 'ZEBRA']);
+  });
+
+  it('should handle empty string', () => {
+    expect(extractEnvVars('')).toEqual([]);
+  });
+});

package/src/templates/dockerfile-template.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2025 Amodal Labs, Inc.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generate a production Dockerfile for amodal runtime.
+ */
+export function generateDockerfile(): string {
+  return `# Multi-stage build for amodal runtime
+# Generated by: amodal deploy init
+
+# Stage 1: Build
+FROM node:20-slim AS builder
+WORKDIR /app
+COPY package.json pnpm-lock.yaml* package-lock.json* ./
+RUN corepack enable && corepack prepare pnpm@latest --activate 2>/dev/null || npm install
+COPY . .
+RUN if [ -f pnpm-lock.yaml ]; then pnpm install --frozen-lockfile; else npm ci; fi
+
+# Stage 2: Production
+FROM node:20-slim AS production
+WORKDIR /app
+ENV NODE_ENV=production
+COPY --from=builder /app .
+EXPOSE 3847
+CMD ["node", "node_modules/@amodalai/runtime/dist/src/index.js"]
+`;
+}

package/src/templates/env-template.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2025 Amodal Labs, Inc.
+ * SPDX-License-Identifier: MIT
+ */
+
+const ENV_PATTERN = /env:([A-Z_][A-Z0-9_]*)/g;
+
+/**
+ * Extract all env:VAR_NAME references from JSON config strings.
+ *
+ * Returns a deduplicated list of environment variable names.
+ */
+export function extractEnvVars(jsonString: string): string[] {
+  const vars = new Set<string>();
+  let match: RegExpExecArray | null;
+
+  // Reset regex state
+  ENV_PATTERN.lastIndex = 0;
+  while ((match = ENV_PATTERN.exec(jsonString)) !== null) {
+    if (match[1]) {
+      vars.add(match[1]);
+    }
+  }
+
+  return [...vars].sort();
+}

package/src/templates/knowledge-template.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2025 Amodal Labs, Inc.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generates a starter knowledge.md.
+ */
+export function generateKnowledgeTemplate(): string {
+  return `---
+title: Domain Knowledge
+---
+
+## Getting Started
+
+Add domain-specific knowledge here. Good knowledge documents include:
+
+- **Terminology**: Define domain-specific terms the agent should understand
+- **Baselines**: What "normal" looks like for key metrics
+- **Common patterns**: Recurring scenarios the agent should recognize
+- **Decision frameworks**: How to prioritize or categorize findings
+`;
+}

package/src/templates/skill-template.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2025 Amodal Labs, Inc.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generates a starter SKILL.md.
+ */
+export function generateSkillTemplate(): string {
+  return `---
+name: general-analysis
+description: General-purpose analysis skill — customize for your domain
+trigger: When the user asks for investigation or analysis
+---
+
+## Analysis
+
+Customize this skill for your specific domain. A good skill tells the agent:
+
+1. **What to investigate** — the scope and constraints
+2. **How to gather data** — which connections and endpoints to use
+3. **How to reason** — the analytical framework to apply
+4. **How to present findings** — the format and level of detail
+5. **What to avoid** — common pitfalls and anti-patterns
+`;
+}

package/src/ui/AskUserPrompt.tsx

@@ -0,0 +1,58 @@
+/**
+ * @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 {theme} from './theme.js';
+import type {AskUserQuestion} from './types.js';
+
+interface AskUserPromptProps {
+  question: AskUserQuestion;
+  onRespond: (askId: string, answer: string) => void;
+}
+
+export const AskUserPrompt: React.FC<AskUserPromptProps> = ({question, onRespond}) => {
+  const [value, setValue] = useState('');
+
+  const handleSubmit = useCallback(
+    (text: string) => {
+      const trimmed = text.trim();
+      if (!trimmed) return;
+      onRespond(question.askId, trimmed);
+      setValue('');
+    },
+    [onRespond, question.askId],
+  );
+
+  return (
+    <Box
+      flexDirection="column"
+      marginTop={1}
+      borderStyle="round"
+      borderColor={theme.text.accent}
+      paddingLeft={1}
+      paddingRight={1}
+    >
+      <Text color={theme.text.accent} bold>
+        Agent Question
+      </Text>
+      <Text wrap="wrap">{question.text}</Text>
+      <Box marginTop={1}>
+        <Text color={theme.text.accent} bold>
+          {'\u203A '}
+        </Text>
+        <TextInput
+          value={value}
+          onChange={setValue}
+          onSubmit={handleSubmit}
+          placeholder="Type your answer..."
+        />
+      </Box>
+    </Box>
+  );
+};

package/src/ui/AssistantMessage.tsx

@@ -0,0 +1,51 @@
+/**
+ * @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 {MarkdownDisplay} from './markdown/MarkdownDisplay.js';
+import {ToolCallDisplay} from './ToolCallDisplay.js';
+import {ThinkingDisplay} from './ThinkingDisplay.js';
+import type {ChatMessage} from './types.js';
+
+interface AssistantMessageProps {
+  message: ChatMessage;
+  width?: number;
+}
+
+export const AssistantMessage: React.FC<AssistantMessageProps> = ({
+  message,
+  width,
+}) => (
+  <Box flexDirection="column" marginTop={1}>
+    {/* Skills activated */}
+    {message.skills?.map((skill, i) => (
+      <Text key={i} color={theme.status.warning}>
+        {'  \u26A1 '}
+        {skill}
+      </Text>
+    ))}
+
+    {/* Collapsed thinking */}
+    {message.thinking ? <ThinkingDisplay text={message.thinking} collapsed /> : null}
+
+    {/* Tool calls — inline before text (matches actual execution order) */}
+    {message.toolCalls?.map((tool) => (
+      <ToolCallDisplay key={tool.toolId} tool={tool} width={width} compact />
+    ))}
+
+    {/* Main text with markdown */}
+    {message.text ? (
+      <Box>
+        <Text color={theme.text.accent}>{'\u25C6 '}</Text>
+        <Box flexDirection="column" width={width ? width - 4 : undefined}>
+          <MarkdownDisplay text={message.text} width={width ? width - 4 : undefined} />
+        </Box>
+      </Box>
+    ) : null}
+  </Box>
+);

package/src/ui/ChatApp.tsx

@@ -0,0 +1,283 @@
+/**
+ * @license
+ * Copyright 2025 Amodal Labs, Inc.
+ * SPDX-License-Identifier: MIT
+ */
+
+import type React from 'react';
+import {useCallback, useEffect} from 'react';
+import {Box, Text, useApp, useInput, useStdout} from 'ink';
+import {useChat} from './useChat.js';
+import {ScrollableMessageList} from './ScrollableMessageList.js';
+import {InputBar} from './InputBar.js';
+import {Header} from './Header.js';
+import {Footer} from './Footer.js';
+import {NotificationBar} from './NotificationBar.js';
+import {AskUserPrompt} from './AskUserPrompt.js';
+import {ConfirmationPrompt} from './ConfirmationPrompt.js';
+import {StatusMessage} from './StatusMessage.js';
+import {SessionBrowser} from './SessionBrowser.js';
+import {FullScreenLayout} from './FullScreenLayout.js';
+import {theme} from './theme.js';
+import {useScroll} from './useScroll.js';
+import {useElapsedTime} from './useElapsedTime.js';
+import {useSessionResume} from './useSessionResume.js';
+import {getResponsiveLayout} from './useResponsiveLayout.js';
+import {getCommand} from './commands/index.js';
+
+interface ChatAppProps {
+  baseUrl: string;
+  tenantId: string;
+  resumeSessionId?: string;
+  fullscreen?: boolean;
+}
+
+// Approximate row counts for layout calculation
+const HEADER_ROWS = 2;
+const FOOTER_ROWS = 3;
+const INPUT_ROWS = 2;
+
+export const ChatApp: React.FC<ChatAppProps> = ({
+  baseUrl,
+  tenantId,
+  resumeSessionId,
+  fullscreen,
+}) => {
+  const {state, sendMessage, respondToQuestion, respondToConfirmation, dismissNotification, dispatch} =
+    useChat(baseUrl, tenantId);
+  const {exit} = useApp();
+  const {stdout} = useStdout();
+  const width = stdout?.columns ?? 80;
+  const rows = stdout?.rows ?? 24;
+
+  const layout = getResponsiveLayout(width);
+  const elapsed = useElapsedTime(state.isStreaming);
+
+  // Scroll management
+  const viewportHeight = Math.max(rows - HEADER_ROWS - FOOTER_ROWS - INPUT_ROWS, 5);
+  const scroll = useScroll(true);
+
+  // Update viewport height
+  useEffect(() => {
+    scroll.setViewportHeight(viewportHeight);
+  }, [viewportHeight, scroll]);
+
+  // Auto-scroll when messages or streaming content changes
+  useEffect(() => {
+    // Estimate content height as number of messages * ~3 lines each + streaming
+    const estimatedHeight = state.messages.length * 3 +
+      (state.isStreaming ? 5 : 0) +
+      state.activeToolCalls.length * 4;
+    scroll.setContentHeight(estimatedHeight);
+  }, [state.messages.length, state.isStreaming, state.activeToolCalls.length, scroll]);
+
+  // Session resume
+  const resume = useSessionResume(resumeSessionId ?? null, baseUrl);
+  useEffect(() => {
+    if (resume.messages && resumeSessionId) {
+      dispatch({
+        type: 'RESUME_SESSION',
+        sessionId: resumeSessionId,
+        messages: resume.messages,
+      });
+    }
+  }, [resume.messages, resumeSessionId, dispatch]);
+
+  // Keyboard navigation for scrolling
+  const canScroll = !state.isStreaming && !state.pendingQuestion && !state.pendingConfirmation && !state.showSessionBrowser;
+  useInput((_input, key) => {
+    if (key.ctrl && _input === 'c') {
+      exit();
+      return;
+    }
+
+    if (!canScroll) return;
+
+    // j/k line scroll
+    if (_input === 'j') {
+      scroll.scrollBy(1);
+    } else if (_input === 'k') {
+      scroll.scrollBy(-1);
+    }
+
+    // Page up/down
+    if (key.pageUp) {
+      scroll.scrollBy(-viewportHeight);
+    } else if (key.pageDown) {
+      scroll.scrollBy(viewportHeight);
+    }
+
+    // Home/End (map to Meta+< and Meta+>)
+    if (key.home) {
+      scroll.scrollToTop();
+    } else if (key.end) {
+      scroll.scrollToBottom();
+    }
+  });
+
+  // Slash command handler
+  const handleSlashCommand = useCallback(
+    (name: string, args: string) => {
+      const cmd = getCommand(name);
+      if (!cmd) {
+        dispatch({type: 'LOCAL_MESSAGE', text: `Unknown command: /${name}. Type /help for available commands.`});
+        return;
+      }
+      const result = cmd.execute(args, state);
+      switch (result.type) {
+        case 'message':
+          dispatch({type: 'LOCAL_MESSAGE', text: result.text ?? ''});
+          break;
+        case 'clear':
+          dispatch({type: 'CLEAR_HISTORY'});
+          break;
+        case 'noop':
+          break;
+        default:
+          break;
+      }
+    },
+    [state, dispatch],
+  );
+
+  // Confirmation queue handlers
+  const handleApproveAll = useCallback(() => {
+    for (let i = 0; i < state.confirmationQueue.length; i++) {
+      respondToConfirmation(true);
+    }
+  }, [state.confirmationQueue.length, respondToConfirmation]);
+
+  const handleRejectAll = useCallback(() => {
+    for (let i = 0; i < state.confirmationQueue.length; i++) {
+      respondToConfirmation(false);
+    }
+  }, [state.confirmationQueue.length, respondToConfirmation]);
+
+  // Session browser handlers
+  const handleSessionSelect = useCallback(
+    (sessionId: string) => {
+      dispatch({type: 'HIDE_SESSION_BROWSER'});
+      // Trigger resume by re-mounting — for now just dispatch
+      dispatch({type: 'LOCAL_MESSAGE', text: `Resuming session ${sessionId}...`});
+    },
+    [dispatch],
+  );
+
+  const handleSessionBrowserClose = useCallback(() => {
+    dispatch({type: 'HIDE_SESSION_BROWSER'});
+  }, [dispatch]);
+
+  // Get first running tool name for InputBar
+  const activeToolName = state.activeToolCalls.find((t) => t.status === 'running')?.toolName;
+  const exploreQuery = state.explorePhase?.active ? state.explorePhase.query : undefined;
+  const cwd = process.cwd();
+
+  const currentConfirmation = state.confirmationQueue[0] ?? state.pendingConfirmation;
+
+  const headerEl = (
+    <Header sessionId={state.sessionId} isStreaming={state.isStreaming} isNarrow={layout.isNarrow} />
+  );
+
+  const footerEl = (
+    <Footer
+      isStreaming={state.isStreaming}
+      hasPendingQuestion={!!state.pendingQuestion}
+      hasPendingConfirmation={!!currentConfirmation}
+      tokenUsage={state.tokenUsage}
+      cwd={cwd}
+      modelName={state.tokenUsage.model ?? undefined}
+      isNarrow={layout.isNarrow}
+    />
+  );
+
+  const content = (
+    <>
+      {/* Resume loading indicator */}
+      {resume.loading ? (
+        <Box marginBottom={1}>
+          <StatusMessage type="info">Resuming session...</StatusMessage>
+        </Box>
+      ) : null}
+      {resume.error ? (
+        <Box marginBottom={1}>
+          <StatusMessage type="error">Resume failed: {resume.error}</StatusMessage>
+        </Box>
+      ) : null}
+
+      {/* Scrollable message viewport */}
+      <ScrollableMessageList
+        messages={state.messages}
+        width={width}
+        viewportHeight={viewportHeight}
+        scrollTop={scroll.scrollTop}
+        isStreaming={state.isStreaming}
+        streamingText={state.streamingText}
+        thinkingText={state.thinkingText}
+        toolCalls={state.activeToolCalls}
+        skills={state.activatedSkills}
+        explore={state.explorePhase}
+        error={state.error}
+      />
+
+      {/* Scroll position indicator */}
+      {!scroll.isAtBottom && !state.isStreaming ? (
+        <Box justifyContent="center">
+          <Text color={theme.ui.dim}>{'\u2193'} more below</Text>
+        </Box>
+      ) : null}
+
+      {/* Notifications */}
+      <NotificationBar notifications={state.notifications} onDismiss={dismissNotification} />
+
+      {/* Session Browser overlay */}
+      {state.showSessionBrowser ? (
+        <SessionBrowser
+          baseUrl={baseUrl}
+          onSelect={handleSessionSelect}
+          onClose={handleSessionBrowserClose}
+        />
+      ) : null}
+
+      {/* Input area — conditional on pending prompts */}
+      {!state.showSessionBrowser ? (
+        currentConfirmation ? (
+          <ConfirmationPrompt
+            request={currentConfirmation}
+            queueSize={state.confirmationQueue.length}
+            onRespond={respondToConfirmation}
+            onApproveAll={handleApproveAll}
+            onRejectAll={handleRejectAll}
+          />
+        ) : state.pendingQuestion ? (
+          <AskUserPrompt question={state.pendingQuestion} onRespond={respondToQuestion} />
+        ) : (
+          <InputBar
+            onSubmit={sendMessage}
+            onSlashCommand={handleSlashCommand}
+            isStreaming={state.isStreaming}
+            elapsed={elapsed}
+            exploreQuery={exploreQuery}
+            activeToolName={activeToolName}
+          />
+        )
+      ) : null}
+    </>
+  );
+
+  if (fullscreen) {
+    return (
+      <FullScreenLayout header={headerEl} footer={footerEl}>
+        {content}
+      </FullScreenLayout>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" width={width}>
+      {headerEl}
+      {content}
+      {footerEl}
+    </Box>
+  );
+};
+