@inneranimalmedia/agentsam-sdk 2.6.4 → 2.6.7

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

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+
+export type GoalStatusStripProps = {
+  icon?: ReactNode;
+  label?: ReactNode;
+  title: ReactNode;
+  preview?: ReactNode;
+  elapsed?: ReactNode;
+  actions?: ReactNode;
+  className?: string;
+};
+
+export function GoalStatusStrip({
+  icon,
+  label = 'Pursuing goal',
+  title,
+  preview,
+  elapsed,
+  actions,
+  className,
+}: GoalStatusStripProps) {
+  return (
+    <div className={className} data-agent-goal-status="">
+      <div className="flex min-w-0 items-center gap-2">
+        {icon ? <span className="shrink-0">{icon}</span> : null}
+        <div className="min-w-0 flex-1">
+          <div className="flex min-w-0 items-baseline gap-1.5 text-xs">
+            <span className="shrink-0 font-semibold">{label}</span>
+            <span className="min-w-0 truncate font-normal opacity-55">{title}</span>
+          </div>
+          {preview ? <div className="mt-0.5 truncate text-[11px] opacity-45">{preview}</div> : null}
+        </div>
+        {elapsed ? <span className="shrink-0 text-[11px] opacity-45">{elapsed}</span> : null}
+        {actions ? <div className="flex shrink-0 items-center gap-0.5">{actions}</div> : null}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,86 @@
+import { useEffect, useRef, useState, type ReactNode, type CSSProperties } from 'react';
+
+export interface AnnotationSelection {
+  id: string;
+  label: string;
+  page: string;
+  tag: string;
+  text: string;
+}
+export interface MiniAgentSamProps {
+  selecting: boolean;
+  onSelectingChange: (value: boolean) => void;
+  onSubmit: (prompt: string, selection: AnnotationSelection) => void | Promise<void>;
+  renderComposer?: (props: { value: string; onChange: (value: string) => void; onSend: () => void; busy: boolean }) => ReactNode;
+  scope?: () => HTMLElement | null;
+}
+
+/** Portable DOM annotation surface. Selection supplies context, never edit authority.
+ * Theme inherits --mini-* / --nav-* tokens; transport and resource resolution belong to the host.
+ */
+export function MiniAgentSam({ selecting, onSelectingChange, onSubmit, renderComposer, scope }: MiniAgentSamProps) {
+  const [selection, setSelection] = useState<AnnotationSelection | null>(null);
+  const [bounds, setBounds] = useState<DOMRect | null>(null);
+  const [value, setValue] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [status, setStatus] = useState('');
+  const target = useRef<Element | null>(null);
+  const panel = useRef<HTMLElement>(null);
+  const [panelHeight, setPanelHeight] = useState(200);
+  useEffect(() => {
+    if (!selecting) return;
+    setSelection(null); setBounds(null); setStatus('');
+    const root = scope?.() || document.body;
+    const ignored = (element: Element) => Boolean(element.closest('[data-mini-agentsam], [data-annotation-control]'));
+    root.setAttribute('data-annotation-selecting', 'true');
+    const over = (event: PointerEvent) => {
+      if (!(event.target instanceof Element)) return;
+      const element = event.target;
+      if (ignored(element)) return;
+      target.current = element;
+      setBounds(element.getBoundingClientRect());
+    };
+    const click = (event: MouseEvent) => {
+      if (!(event.target instanceof Element)) return;
+      const element = event.target;
+      if (ignored(element)) return;
+      event.preventDefault(); event.stopPropagation();
+      const resource = element.closest('[data-agentsam-resource]') || element;
+      const clean = (text: string | null, max = 180) => (text || '').replace(/\s+/g, ' ').trim().slice(0, max);
+      const editableSelector = 'input,textarea,select,[contenteditable]:not([contenteditable="false"])';
+      const editable = element.matches(editableSelector)
+        || Boolean(element.closest(editableSelector))
+        || resource.matches(editableSelector)
+        || Boolean(resource.querySelector(editableSelector));
+      setSelection({ id: clean(resource.getAttribute('data-agentsam-resource') || resource.id || resource.tagName), label: clean(resource.getAttribute('aria-label') || resource.getAttribute('alt') || (editable ? 'Input field' : resource.textContent)), page: location.pathname, tag: resource.tagName.toLowerCase(), text: editable ? '[field value withheld]' : clean(resource.textContent, 300) });
+      target.current = resource; setBounds(resource.getBoundingClientRect()); onSelectingChange(false);
+    };
+    root.addEventListener('pointerover', over, true); root.addEventListener('click', click, true);
+    return () => { root.removeAttribute('data-annotation-selecting'); root.removeEventListener('pointerover', over, true); root.removeEventListener('click', click, true); };
+  }, [selecting, scope, onSelectingChange]);
+  useEffect(() => {
+    const update = () => { if (target.current?.isConnected) setBounds(target.current.getBoundingClientRect()); else { setSelection(null); setBounds(null); } };
+    const escape = (event: KeyboardEvent) => { if (event.key === 'Escape' && !event.defaultPrevented) { onSelectingChange(false); setSelection(null); setBounds(null); } };
+    window.addEventListener('scroll', update, true); window.addEventListener('resize', update); window.addEventListener('keydown', escape);
+    const observer = new MutationObserver(update); observer.observe(document.body, { childList: true, subtree: true });
+    return () => { observer.disconnect(); window.removeEventListener('scroll', update, true); window.removeEventListener('resize', update); window.removeEventListener('keydown', escape); };
+  }, [onSelectingChange]);
+  useEffect(() => { if (!panel.current) return; const observer = new ResizeObserver(() => setPanelHeight(panel.current?.offsetHeight || 200)); observer.observe(panel.current); return () => observer.disconnect(); }, [selection]);
+  async function submit() {
+    if (!value.trim() || !selection || busy) return;
+    setBusy(true); setStatus('');
+    try { await onSubmit(value, selection); setValue(''); setStatus('Added to your conversation.'); }
+    catch (error) { setStatus(error instanceof Error ? error.message : 'Could not send. Try again.'); }
+    finally { setBusy(false); }
+  }
+  const style: CSSProperties = bounds && typeof window !== 'undefined' ? { left: Math.max(12, Math.min(window.innerWidth - 372, bounds.left + bounds.width / 2 - 180)), top: Math.max(64, Math.min(window.innerHeight - panelHeight - 12, bounds.bottom + 12 + panelHeight < window.innerHeight ? bounds.bottom + 12 : bounds.top - panelHeight - 12)) } : {};
+  return <div data-mini-agentsam="" style={{ pointerEvents: 'none' }}>
+    {selecting && <div className="mini-agentsam-hint" role="status">Select an element to annotate · Esc to cancel</div>}
+    {bounds && (selecting || selection) && <div className="mini-agentsam-outline" style={{ left: bounds.left, top: bounds.top, width: bounds.width, height: bounds.height }} />}
+    {selection && <section ref={panel} className="mini-agentsam-panel" aria-label="miniAgentSam" style={style}>
+      <div className="mini-agentsam-heading"><span title={selection.label}>{selection.label || selection.tag}</span><button type="button" aria-label="Close miniAgentSam" onClick={() => { setSelection(null); setBounds(null); }}>×</button></div>
+      {renderComposer ? renderComposer({ value, onChange: setValue, onSend: () => void submit(), busy }) : <><textarea aria-label="Annotation instructions" placeholder="Ask about this…" value={value} onChange={(event) => setValue(event.target.value)} /><button type="button" disabled={busy || !value.trim()} onClick={() => void submit()}>Send</button></>}
+      {status && <p role="status">{status}</p>}
+    </section>}
+  </div>;
+}

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

@@ -0,0 +1,19 @@
+import type { ModelOption } from '@inneranimalmedia/agentsam-contracts';
+
+export interface AgentModelSelectProps {
+  value: string;
+  models: ModelOption[];
+  onChange: (modelId: string) => void;
+  className?: string;
+  ariaLabel?: string;
+}
+
+export function AgentModelSelect({ value, models, onChange, className, ariaLabel = 'Select model' }: AgentModelSelectProps) {
+  return (
+    <select value={value} className={className} aria-label={ariaLabel} onChange={(event) => onChange(event.target.value)}>
+      {models.map((model) => (
+        <option key={model.id} value={model.id} disabled={model.disabled}>{model.label}</option>
+      ))}
+    </select>
+  );
+}

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

@@ -0,0 +1,56 @@
+import { useEffect, useRef, type ReactNode, type UIEvent } from 'react';
+import type { AgentMessage } from '@inneranimalmedia/agentsam-contracts';
+
+export interface AgentThreadProps {
+  messages: AgentMessage[];
+  streaming?: boolean;
+  renderMessage?: (message: AgentMessage, index: number) => ReactNode;
+  empty?: ReactNode;
+  scrollerClassName?: string;
+  listClassName?: string;
+  stickThreshold?: number;
+}
+
+export function AgentThread({
+  messages,
+  streaming = false,
+  renderMessage,
+  empty = null,
+  scrollerClassName,
+  listClassName,
+  stickThreshold = 80,
+}: AgentThreadProps) {
+  const scroller = useRef<HTMLDivElement>(null);
+  const stick = useRef(true);
+
+  useEffect(() => {
+    const el = scroller.current;
+    if (!el || !stick.current) return;
+    el.scrollTop = el.scrollHeight;
+  }, [messages, streaming]);
+
+  function onScroll(event: UIEvent<HTMLDivElement>) {
+    const el = event.currentTarget;
+    stick.current = el.scrollHeight - el.scrollTop - el.clientHeight < stickThreshold;
+  }
+
+  return (
+    <div ref={scroller} className={scrollerClassName} data-agent-thread="" onScroll={onScroll}>
+      <div className={listClassName}>
+        {messages.length === 0
+          ? empty
+          : messages.map((message, index) =>
+              renderMessage ? renderMessage(message, index) : <DefaultMessage key={message.id} message={message} />,
+            )}
+      </div>
+    </div>
+  );
+}
+
+function DefaultMessage({ message }: { message: AgentMessage }) {
+  return (
+    <article data-agent-role={message.role} data-agent-message-id={message.id}>
+      <div>{message.content}</div>
+    </article>
+  );
+}

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

@@ -0,0 +1,94 @@
+import type {
+  AgentToolPermissionDecision,
+  AgentToolPermissionRequest as AgentToolPermissionRequestContract,
+} from '@inneranimalmedia/agentsam-contracts';
+
+export interface ToolPermissionRequestProps {
+  request: AgentToolPermissionRequestContract;
+  busy?: boolean;
+  className?: string;
+  onDecision: (decision: AgentToolPermissionDecision) => void | Promise<void>;
+}
+
+function permissionSummary(request: AgentToolPermissionRequestContract) {
+  if (request.summary) return request.summary;
+  const provider = request.provider ? ' through ' + request.provider : '';
+  return 'AgentSam wants to use ' + request.displayName + provider + '.';
+}
+
+export function ToolPermissionRequest({
+  request,
+  busy = false,
+  className,
+  onDecision,
+}: ToolPermissionRequestProps) {
+  const titleId = request.id + '-title';
+  const descriptionId = request.id + '-description';
+  const rootClass = 'agentsam-tool-permission-overlay' + (className ? ' ' + className : '');
+  return (
+    <div className={rootClass} role="presentation">
+      <section
+        className="agentsam-tool-permission-card"
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        aria-describedby={descriptionId}
+      >
+        <header className="agentsam-tool-permission-header">
+          <div className="agentsam-tool-permission-mark" aria-hidden="true">AS</div>
+          <div>
+            <h2 id={titleId}>Allow AgentSam to use {request.displayName}?</h2>
+            <p id={descriptionId}>{permissionSummary(request)}</p>
+          </div>
+        </header>
+
+        <div className="agentsam-tool-permission-body">
+          <dl className="agentsam-tool-permission-facts">
+            <div><dt>Tool</dt><dd>{request.toolKey}</dd></div>
+            {request.provider ? <div><dt>Provider</dt><dd>{request.provider}</dd></div> : null}
+            {request.scope ? <div><dt>Scope</dt><dd>{request.scope}</dd></div> : null}
+            {request.riskLevel ? <div><dt>Risk</dt><dd>{request.riskLevel}</dd></div> : null}
+          </dl>
+
+          {request.sharedData?.length ? (
+            <div className="agentsam-tool-permission-shared">
+              <h3>Sharing data includes:</h3>
+              <dl>
+                {request.sharedData.map((item) => (
+                  <div key={item.label + ':' + item.value}>
+                    <dt>{item.label}</dt>
+                    <dd>{item.value}</dd>
+                  </div>
+                ))}
+              </dl>
+            </div>
+          ) : null}
+
+          {request.destructive ? (
+            <p className="agentsam-tool-permission-warning">
+              This action may modify or delete data. Review the scope before allowing it.
+            </p>
+          ) : null}
+        </div>
+
+        <footer className="agentsam-tool-permission-actions">
+          <button type="button" disabled={busy} onClick={() => void onDecision('deny')}>
+            Deny
+          </button>
+          <span className="agentsam-tool-permission-spacer" />
+          <button type="button" disabled={busy} onClick={() => void onDecision('allow_once')}>
+            Allow once
+          </button>
+          <button
+            type="button"
+            className="agentsam-tool-permission-primary"
+            disabled={busy}
+            onClick={() => void onDecision('allow_session')}
+          >
+            Allow for this session
+          </button>
+        </footer>
+      </section>
+    </div>
+  );
+}

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

@@ -0,0 +1,11 @@
+import type { AgentToolCall } from '@inneranimalmedia/agentsam-contracts';
+
+export function ToolReceipt({ call, className }: { call: AgentToolCall; className?: string }) {
+  return (
+    <div className={className} data-tool-status={call.status} data-tool-name={call.name}>
+      <strong>{call.name}</strong>
+      <span>{call.status}</span>
+      {call.error ? <p>{call.error}</p> : null}
+    </div>
+  );
+}