@inneranimalmedia/agentsam-sdk 2.6.4 → 2.6.5

package/packages/agentsam-workbench/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@inneranimalmedia/agentsam-workbench",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Reusable AgentSam workbench primitives for agent threads, composer, browser, terminal and resizable work surfaces.",
+  "type": "module",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./agent": "./src/agent/index.ts",
+    "./agent/mini-agentsam.css": "./src/agent/mini-agentsam.css",
+    "./agent/contextual-composer.css": "./src/agent/contextual-composer.css",
+    "./shell": "./src/shell/index.ts",
+    "./browser": "./src/browser/index.ts",
+    "./terminal": "./src/terminal/index.ts",
+    "./projects": "./src/projects/index.ts",
+    "./timeline": "./src/timeline/index.ts",
+    "./project-control.css": "./src/project-control.css"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "test": "node --test test/*.test.mjs"
+  },
+  "dependencies": {
+    "@inneranimalmedia/agentsam-contracts": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "typescript": "^5.9.3"
+  }
+}

package/packages/agentsam-workbench/src/agent/AgentPanel.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+import type { AgentMessage, ModelOption } from '@inneranimalmedia/agentsam-contracts';
+import { AgentThread } from './Thread';
+import { AgentComposer } from './Composer';
+import { AgentModelSelect } from './ModelSelect';
+
+export interface AgentPanelProps {
+  messages: AgentMessage[];
+  draft: string;
+  onDraftChange: (value: string) => void;
+  onSend: () => void | Promise<void>;
+  onCancel?: () => void | Promise<void>;
+  streaming?: boolean;
+  models?: ModelOption[];
+  selectedModelId?: string;
+  onModelChange?: (modelId: string) => void;
+  renderMessage?: (message: AgentMessage, index: number) => ReactNode;
+  empty?: ReactNode;
+  header?: ReactNode;
+  className?: string;
+}
+
+export function AgentPanel(props: AgentPanelProps) {
+  const modelControl = props.models?.length && props.selectedModelId && props.onModelChange
+    ? <AgentModelSelect value={props.selectedModelId} models={props.models} onChange={props.onModelChange} />
+    : null;
+  return (
+    <section className={props.className} data-agent-panel="">
+      {props.header}
+      <AgentThread messages={props.messages} streaming={props.streaming} renderMessage={props.renderMessage} empty={props.empty} />
+      <AgentComposer
+        value={props.draft}
+        onChange={props.onDraftChange}
+        onSend={props.onSend}
+        onCancel={props.onCancel}
+        streaming={props.streaming}
+        toolbarStart={modelControl}
+      />
+    </section>
+  );
+}

package/packages/agentsam-workbench/src/agent/ArtifactCard.tsx

@@ -0,0 +1,9 @@
+import type { AgentArtifact } from '@inneranimalmedia/agentsam-contracts';
+
+export function ArtifactCard({ artifact, className, onOpen }: { artifact: AgentArtifact; className?: string; onOpen?: (artifact: AgentArtifact) => void }) {
+  return (
+    <button type="button" className={className} data-artifact-kind={artifact.kind} onClick={() => onOpen?.(artifact)}>
+      <span>{artifact.title ?? artifact.kind}</span>
+    </button>
+  );
+}

package/packages/agentsam-workbench/src/agent/Composer.tsx

@@ -0,0 +1,102 @@
+import { useRef, type KeyboardEvent, type ReactNode, type TextareaHTMLAttributes } from 'react';
+
+export interface AgentComposerProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSend: () => void | Promise<void>;
+  onCancel?: () => void | Promise<void>;
+  streaming?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  toolbarStart?: ReactNode;
+  toolbarEnd?: ReactNode;
+  sendControl?: ReactNode;
+  cancelControl?: ReactNode;
+  containerClassName?: string;
+  inputClassName?: string;
+  toolbarClassName?: string;
+  textareaProps?: Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange' | 'placeholder'>;
+  maxHeight?: number;
+}
+
+/**
+ * Presentation-only composer primitive.
+ *
+ * The host owns send/queue/cancel semantics. While streaming, a non-empty draft
+ * can still be submitted (for example to a FIFO follow-up queue) and Stop stays
+ * separately reachable.
+ */
+export function AgentComposer({
+  value,
+  onChange,
+  onSend,
+  onCancel,
+  streaming = false,
+  disabled = false,
+  placeholder = 'Work with AgentSam',
+  toolbarStart,
+  toolbarEnd,
+  sendControl,
+  cancelControl,
+  containerClassName,
+  inputClassName,
+  toolbarClassName,
+  textareaProps,
+  maxHeight = 220,
+}: AgentComposerProps) {
+  const areaRef = useRef<HTMLTextAreaElement>(null);
+
+  function resize() {
+    const el = areaRef.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    el.style.height = String(Math.min(el.scrollHeight, maxHeight)) + 'px';
+  }
+
+  function onKeyDown(event: KeyboardEvent<HTMLTextAreaElement>) {
+    textareaProps?.onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      if (!disabled && value.trim()) void onSend();
+    }
+  }
+
+  const defaultSend = <button type="button" disabled={disabled || !value.trim()} onClick={() => void onSend()}>Send</button>;
+  const defaultStop = <button type="button" onClick={() => void onCancel?.()}>Stop</button>;
+
+  return (
+    <div className={containerClassName} data-agent-composer="" aria-busy={streaming || undefined}>
+      <textarea
+        {...textareaProps}
+        ref={areaRef}
+        value={value}
+        rows={textareaProps?.rows ?? 1}
+        placeholder={placeholder}
+        disabled={disabled}
+        className={inputClassName}
+        aria-label={textareaProps?.['aria-label'] ?? placeholder}
+        onChange={(event) => {
+          onChange(event.target.value);
+          resize();
+        }}
+        onInput={(event) => {
+          textareaProps?.onInput?.(event);
+          resize();
+        }}
+        onKeyDown={onKeyDown}
+      />
+      <div className={toolbarClassName}>
+        {toolbarStart}
+        <span style={{ flex: 1 }} />
+        {toolbarEnd}
+        {streaming ? (
+          <>
+            {value.trim() ? (sendControl ?? defaultSend) : null}
+            {cancelControl ?? defaultStop}
+          </>
+        ) : (sendControl ?? defaultSend)}
+      </div>
+    </div>
+  );
+}

package/packages/agentsam-workbench/src/agent/ConnectedAgentPanel.tsx

@@ -0,0 +1,194 @@
+import { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';
+import type {
+  AgentArtifact,
+  AgentCapability,
+  AgentContextProvider,
+  AgentEvent,
+  AgentMessage,
+  AgentRun,
+  AgentToolCall,
+  AgentWorkbenchAdapter,
+  ModelOption,
+} from '@inneranimalmedia/agentsam-contracts';
+import { AgentPanel } from './AgentPanel';
+
+export interface AgentSessionState {
+  messages: AgentMessage[];
+  draft: string;
+  models: ModelOption[];
+  capabilities: AgentCapability[];
+  toolCalls: AgentToolCall[];
+  artifacts: AgentArtifact[];
+  currentRun: AgentRun | null;
+  streaming: boolean;
+  error: string | null;
+}
+
+export interface UseAgentSessionOptions {
+  adapter: AgentWorkbenchAdapter;
+  contextProvider: AgentContextProvider;
+  conversationId: string;
+  initialMessages?: AgentMessage[];
+  initialModelId?: string;
+}
+
+function upsertById<T extends { id: string }>(items: T[], next: T) {
+  const index = items.findIndex((item) => item.id === next.id);
+  if (index < 0) return [...items, next];
+  const copy = [...items];
+  copy[index] = next;
+  return copy;
+}
+
+export function useAgentSession({
+  adapter,
+  contextProvider,
+  conversationId,
+  initialMessages = [],
+  initialModelId,
+}: UseAgentSessionOptions) {
+  const [messages, setMessages] = useState<AgentMessage[]>(initialMessages);
+  const [draft, setDraft] = useState('');
+  const [models, setModels] = useState<ModelOption[]>([]);
+  const [capabilities, setCapabilities] = useState<AgentCapability[]>([]);
+  const [toolCalls, setToolCalls] = useState<AgentToolCall[]>([]);
+  const [artifacts, setArtifacts] = useState<AgentArtifact[]>([]);
+  const [currentRun, setCurrentRun] = useState<AgentRun | null>(null);
+  const [selectedModelId, setSelectedModelId] = useState(initialModelId ?? '');
+  const [streaming, setStreaming] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let active = true;
+    Promise.resolve(adapter.getModels()).then((next) => {
+      if (!active) return;
+      setModels(next);
+      setSelectedModelId((current) => current || next.find((model) => !model.disabled)?.id || '');
+    }).catch((reason) => active && setError(String(reason instanceof Error ? reason.message : reason)));
+    Promise.resolve(adapter.getCapabilities()).then((next) => active && setCapabilities(next)).catch(() => {});
+    return () => { active = false; };
+  }, [adapter]);
+
+  useEffect(() => {
+    const onEvent = (event: AgentEvent) => {
+      if (event.type === 'message') {
+        setMessages((current) => upsertById(current, event.message));
+        return;
+      }
+      if (event.type === 'message.delta') {
+        setMessages((current) => {
+          const found = current.find((message) => message.id === event.messageId);
+          if (!found) {
+            return [...current, {
+              id: event.messageId,
+              role: 'assistant',
+              content: event.delta,
+              createdAt: Date.now(),
+            }];
+          }
+          return current.map((message) => message.id === event.messageId
+            ? { ...message, content: `${message.content}${event.delta}` }
+            : message);
+        });
+        return;
+      }
+      if (event.type === 'run.status') {
+        setStreaming(event.status === 'queued' || event.status === 'running');
+        setCurrentRun((run) => run?.id === event.runId ? { ...run, status: event.status, error: event.error } : run);
+        if (event.error) setError(event.error);
+        return;
+      }
+      if (event.type === 'tool') {
+        setToolCalls((current) => upsertById(current, event.toolCall));
+        return;
+      }
+      if (event.type === 'artifact') {
+        setArtifacts((current) => upsertById(current, event.artifact));
+        return;
+      }
+      if (event.type === 'error') setError(event.error);
+    };
+    return adapter.subscribe(conversationId, onEvent);
+  }, [adapter, conversationId]);
+
+  const send = useCallback(async () => {
+    const text = draft.trim();
+    if (!text || streaming) return;
+    setError(null);
+    const context = await contextProvider.getContext();
+    const optimistic: AgentMessage = {
+      id: `user_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
+      role: 'user',
+      content: text,
+      createdAt: Date.now(),
+      modelId: selectedModelId || undefined,
+    };
+    setMessages((current) => [...current, optimistic]);
+    setDraft('');
+    setStreaming(true);
+    try {
+      const run = await adapter.send({
+        conversationId,
+        text,
+        context,
+        modelId: selectedModelId || undefined,
+        capabilityIds: capabilities.filter((capability) => capability.enabled !== false).map((capability) => capability.id),
+      });
+      setCurrentRun(run);
+      setStreaming(run.status === 'queued' || run.status === 'running');
+    } catch (reason) {
+      setStreaming(false);
+      setError(String(reason instanceof Error ? reason.message : reason));
+    }
+  }, [adapter, capabilities, contextProvider, conversationId, draft, selectedModelId, streaming]);
+
+  const cancel = useCallback(async () => {
+    if (!currentRun) return;
+    await adapter.cancel(currentRun.id);
+  }, [adapter, currentRun]);
+
+  return useMemo(() => ({
+    messages,
+    draft,
+    setDraft,
+    models,
+    capabilities,
+    toolCalls,
+    artifacts,
+    currentRun,
+    selectedModelId,
+    setSelectedModelId,
+    streaming,
+    error,
+    send,
+    cancel,
+  }), [artifacts, cancel, capabilities, currentRun, draft, error, messages, models, selectedModelId, send, streaming, toolCalls]);
+}
+
+export interface ConnectedAgentPanelProps extends UseAgentSessionOptions {
+  className?: string;
+  header?: ReactNode;
+  empty?: ReactNode;
+  renderMessage?: (message: AgentMessage, index: number) => ReactNode;
+}
+
+export function ConnectedAgentPanel({ className, header, empty, renderMessage, ...options }: ConnectedAgentPanelProps) {
+  const session = useAgentSession(options);
+  return (
+    <AgentPanel
+      className={className}
+      header={header}
+      empty={empty}
+      messages={session.messages}
+      draft={session.draft}
+      onDraftChange={session.setDraft}
+      onSend={session.send}
+      onCancel={session.cancel}
+      streaming={session.streaming}
+      models={session.models}
+      selectedModelId={session.selectedModelId}
+      onModelChange={session.setSelectedModelId}
+      renderMessage={renderMessage}
+    />
+  );
+}