@inneranimalmedia/agentsam-sdk 2.6.11 → 2.6.12

package/packages/agentsam-vault/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inneranimalmedia/agentsam-vault",
-  "version": "2.6.11",
+  "version": "2.6.12",
   "type": "module",
   "description": "AgentSam credential vault core — contracts, AES-GCM crypto, provider registry, resolver. UI lives in agentsam-key-manager.",
   "main": "./src/index.js",

package/packages/agentsam-workbench/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inneranimalmedia/agentsam-workbench",
-  "version": "2.6.11",
+  "version": "2.6.12",
   "description": "Reusable AgentSam workbench primitives for agent threads, composer, browser, terminal and resizable work surfaces.",
   "type": "module",
   "main": "./dist/index.js",
@@ -49,13 +49,14 @@
   },
   "scripts": {
     "typecheck": "node scripts/ensure-local-deps.mjs && tsc --noEmit -p tsconfig.json",
-    "test": "node --test test/*.test.mjs",
+    "test": "npm run build && node --test test/*.test.mjs",
     "build": "node scripts/build.mjs",
     "prepack": "npm run build"
   },
   "dependencies": {
-    "@inneranimalmedia/agentsam-contracts": "2.6.11",
-    "@inneranimalmedia/agentsam-loading-scene": "2.6.11"
+    "@inneranimalmedia/agentsam-contracts": "2.6.12",
+    "@inneranimalmedia/agentsam-loading-scene": "2.6.12",
+    "lucide-react": "^0.510.0"
   },
   "peerDependencies": {
     "react": ">=18",

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

@@ -1,3 +1,4 @@
+import { ArrowUp, Maximize2, Minimize2, X } from 'lucide-react';
 import { useEffect, useRef, useState, type ReactNode, type CSSProperties } from 'react';
 
 export interface AnnotationSelection {
@@ -11,7 +12,7 @@ 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;
+  renderComposer?: (props: { value: string; onChange: (value: string) => void; onSend: () => void; busy: boolean; expanded: boolean }) => ReactNode;
   scope?: () => HTMLElement | null;
 }
 
@@ -24,6 +25,8 @@ export function MiniAgentSam({ selecting, onSelectingChange, onSubmit, renderCom
   const [value, setValue] = useState('');
   const [busy, setBusy] = useState(false);
   const [status, setStatus] = useState('');
+  const [expanded, setExpanded] = useState(false);
+  const lastTouch = useRef(0);
   const target = useRef<Element | null>(null);
   const panel = useRef<HTMLElement>(null);
   const [panelHeight, setPanelHeight] = useState(200);
@@ -66,6 +69,22 @@ export function MiniAgentSam({ selecting, onSelectingChange, onSubmit, renderCom
     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]);
+  useEffect(() => {
+    if (!expanded || !selection) return;
+    const previous = document.activeElement as HTMLElement | null;
+    const area = panel.current?.querySelector('textarea');
+    area?.focus();
+    const trap = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') { event.preventDefault(); event.stopImmediatePropagation(); setExpanded(false); return; }
+      if (event.key !== 'Tab') return;
+      const nodes = Array.from(panel.current?.querySelectorAll<HTMLElement>('button:not(:disabled), textarea, input, [tabindex="0"]') || []);
+      const first = nodes[0], last = nodes[nodes.length - 1];
+      if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last?.focus(); }
+      else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first?.focus(); }
+    };
+    window.addEventListener('keydown', trap, true);
+    return () => { window.removeEventListener('keydown', trap, true); previous?.focus(); };
+  }, [expanded, selection]);
   async function submit() {
     if (!value.trim() || !selection || busy) return;
     setBusy(true); setStatus('');
@@ -77,10 +96,15 @@ export function MiniAgentSam({ selecting, onSelectingChange, onSubmit, renderCom
   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></>}
+    {selection && expanded && <div className="mini-agentsam-review-backdrop" onClick={() => setExpanded(false)} />}
+    {selection && <section ref={panel} className="mini-agentsam-panel" data-expanded={expanded ? 'true' : 'false'} role={expanded ? 'dialog' : undefined} aria-modal={expanded ? true : undefined} aria-label={expanded ? 'Review annotation message' : 'miniAgentSam'} style={expanded ? undefined : style}
+      onDoubleClick={(event) => { if (!(event.target as Element).closest('button')) setExpanded(true); }}
+      onPointerUp={(event) => { if (event.pointerType !== 'touch' || (event.target as Element).closest('button')) return; const now = Date.now(); if (now - lastTouch.current < 300) setExpanded(true); lastTouch.current = now; }}>
+
+      <div className="mini-agentsam-heading"><span title={selection.label}>{selection.label || selection.tag}</span><button type="button" aria-label={expanded ? "Collapse message" : "Expand message"} title={expanded ? "Collapse message" : "Review entire message"} aria-expanded={expanded} onClick={() => setExpanded((value) => !value)}>{expanded ? <Minimize2 size={16} /> : <Maximize2 size={16} />}</button><button type="button" aria-label="Close miniAgentSam" onClick={() => { setSelection(null); setBounds(null); setExpanded(false); }}><X size={18} /></button></div>
+      {renderComposer ? renderComposer({ value, onChange: setValue, onSend: () => void submit(), busy, expanded }) : <><textarea aria-label="Annotation instructions" placeholder="Ask about this…" value={value} onChange={(event) => setValue(event.target.value)} /><button type="button" disabled={busy || !value.trim()} className="mini-agentsam-send" aria-label="Send annotation" onClick={() => void submit()}><ArrowUp size={18} /></button></>}
       {status && <p role="status">{status}</p>}
     </section>}
   </div>;
 }
+

package/packages/agentsam-workbench/src/agent/contextual-composer.css

@@ -1,3 +1,4 @@
+/* Fixed red values below express error/destructive status; surfaces and accents follow host semantics. */
 /* AgentSam CMS contextual composer — Sidekick-style select → suggest → generate */
 
 .as-contextual-shell {
@@ -5,31 +6,31 @@
   grid-template-columns: minmax(260px, 320px) 1fr minmax(280px, 360px);
   height: 100%;
   min-height: 480px;
-  background: #f4f4f5;
-  color: #18181b;
-  font: 13px/1.45 ui-sans-serif, system-ui, -apple-system, sans-serif;
+  background: var(--color-muted, #27272a);
+  color: var(--color-foreground, #f4f4f5);
+  font: 13px/1.45 var(--font-sans, ui-sans-serif, system-ui, sans-serif);
 }
 
 .as-contextual-canvas {
   position: relative;
   overflow: auto;
-  background: #fff;
-  border-inline: 1px solid #e4e4e7;
+  background: var(--color-card, #18181b);
+  border-inline: 1px solid var(--color-border, #ffffff1a);
 }
 
 /* —— Right composer —— */
 .as-contextual-composer {
   display: flex;
   flex-direction: column;
-  background: #fff;
-  border-left: 1px solid #e4e4e7;
+  background: var(--color-card, #18181b);
+  border-left: 1px solid var(--color-border, #ffffff1a);
   min-width: 0;
 }
 
 .as-contextual-composer.is-portable {
   border-radius: 16px;
   box-shadow: 0 12px 40px rgba(24, 24, 27, 0.14);
-  border: 1px solid #e4e4e7;
+  border: 1px solid var(--color-border, #ffffff1a);
 }
 
 .as-cc-header {
@@ -37,7 +38,7 @@
   align-items: center;
   gap: 4px;
   padding: 10px 12px;
-  border-bottom: 1px solid #f4f4f5;
+  border-bottom: 1px solid var(--color-muted, #27272a);
 }
 
 .as-cc-thread-switcher {
@@ -54,7 +55,7 @@
   border-radius: 8px;
 }
 
-.as-cc-thread-switcher:hover { background: #f4f4f5; }
+.as-cc-thread-switcher:hover { background: var(--color-muted, #27272a); }
 
 .as-cc-thread-title {
   overflow: hidden;
@@ -63,7 +64,7 @@
   font-weight: 600;
 }
 
-.as-cc-chevron { color: #71717a; font-size: 11px; }
+.as-cc-chevron { color: var(--color-muted-foreground, #a1a1aa); font-size: 11px; }
 
 .as-cc-icon-btn {
   width: 28px;
@@ -72,17 +73,17 @@
   border-radius: 8px;
   background: transparent;
   cursor: pointer;
-  color: #52525b;
+  color: var(--color-muted-foreground, #a1a1aa);
 }
 
-.as-cc-icon-btn:hover { background: #f4f4f5; }
+.as-cc-icon-btn:hover { background: var(--color-muted, #27272a); }
 
 .as-cc-thread-menu {
   display: flex;
   flex-direction: column;
   gap: 2px;
   padding: 8px;
-  border-bottom: 1px solid #f4f4f5;
+  border-bottom: 1px solid var(--color-muted, #27272a);
   max-height: 220px;
   overflow: auto;
 }
@@ -101,9 +102,9 @@
 }
 
 .as-cc-thread-menu button.active,
-.as-cc-thread-menu button:hover { background: #f4f4f5; }
+.as-cc-thread-menu button:hover { background: var(--color-muted, #27272a); }
 
-.as-cc-thread-menu span { color: #71717a; font-size: 12px; }
+.as-cc-thread-menu span { color: var(--color-muted-foreground, #a1a1aa); font-size: 12px; }
 
 .as-cc-body {
   flex: 1;
@@ -118,7 +119,7 @@
   place-content: center;
   gap: 12px;
   text-align: center;
-  color: #71717a;
+  color: var(--color-muted-foreground, #a1a1aa);
 }
 
 .as-cc-mascot {
@@ -127,8 +128,8 @@
   margin: 0 auto;
   border-radius: 18px;
   background:
-    radial-gradient(circle at 35% 35%, #c4b5fd, transparent 50%),
-    linear-gradient(145deg, #7c3aed, #4c1d95);
+    radial-gradient(circle at 35% 35%, var(--color-accent, #c8bda9), transparent 50%),
+    linear-gradient(145deg, var(--color-accent, #c8bda9), color-mix(in srgb, var(--color-accent, #c8bda9) 65%, black));
 }
 
 .as-cc-messages { display: flex; flex-direction: column; gap: 12px; }
@@ -142,7 +143,7 @@
 
 .as-cc-bubble.user {
   align-self: flex-end;
-  background: #f4f4f5;
+  background: var(--color-muted, #27272a);
 }
 
 .as-cc-bubble.assistant { align-self: flex-start; }
@@ -156,15 +157,15 @@
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  color: #71717a;
+  color: var(--color-muted-foreground, #a1a1aa);
   font-size: 12px;
 }
 
 .as-cc-spinner {
   width: 12px;
   height: 12px;
-  border: 2px solid #ddd6fe;
-  border-top-color: #7c3aed;
+  border: 2px solid color-mix(in srgb, var(--color-accent, #c8bda9) 30%, transparent);
+  border-top-color: var(--color-accent, #c8bda9);
   border-radius: 50%;
   animation: as-spin 0.7s linear infinite;
 }
@@ -178,15 +179,15 @@
   gap: 10px;
   align-items: start;
   text-align: left;
-  border: 1px solid #ddd6fe;
-  background: #faf5ff;
+  border: 1px solid color-mix(in srgb, var(--color-accent, #c8bda9) 30%, transparent);
+  background: color-mix(in srgb, var(--color-accent, #c8bda9) 10%, var(--color-card, #18181b));
   border-radius: 14px;
   padding: 12px;
   cursor: pointer;
 }
 
 .as-cc-suggestion-card:hover {
-  border-color: #a78bfa;
+  border-color: var(--color-accent, #c8bda9);
   box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08);
 }
 
@@ -196,8 +197,8 @@
   border-radius: 8px;
   display: grid;
   place-items: center;
-  background: #7c3aed;
-  color: #fff;
+  background: var(--color-accent, #c8bda9);
+  color: var(--color-card, #18181b);
   font-size: 12px;
 }
 
@@ -209,17 +210,17 @@
 }
 
 .as-cc-suggestion-copy strong {
-  color: #6d28d9;
+  color: var(--color-accent, #c8bda9);
   font-size: 14px;
 }
 
 .as-cc-suggestion-copy em {
   font-style: normal;
-  color: #52525b;
+  color: var(--color-muted-foreground, #a1a1aa);
   font-size: 12px;
 }
 
-.as-cc-suggestion-chevron { color: #a78bfa; font-size: 18px; line-height: 1; }
+.as-cc-suggestion-chevron { color: var(--color-accent, #c8bda9); font-size: 18px; line-height: 1; }
 
 .as-cc-feedback {
   display: flex;
@@ -237,7 +238,7 @@
 .as-cc-feedback button:hover { opacity: 1; }
 
 .as-cc-input {
-  border-top: 1px solid #f4f4f5;
+  border-top: 1px solid var(--color-muted, #27272a);
   padding: 10px 12px 14px;
   display: flex;
   flex-direction: column;
@@ -247,8 +248,8 @@
 .as-cc-scope-chip {
   align-self: flex-start;
   font-size: 11px;
-  color: #52525b;
-  background: #f4f4f5;
+  color: var(--color-muted-foreground, #a1a1aa);
+  background: var(--color-muted, #27272a);
   border-radius: 999px;
   padding: 3px 8px;
 }
@@ -257,10 +258,10 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  border: 1px solid #e4e4e7;
+  border: 1px solid var(--color-border, #ffffff1a);
   border-radius: 999px;
   padding: 4px 6px 4px 4px;
-  background: #fff;
+  background: var(--color-card, #18181b);
 }
 
 .as-cc-input-row input {
@@ -277,8 +278,8 @@
   height: 30px;
   border: 0;
   border-radius: 999px;
-  background: #18181b;
-  color: #fff;
+  background: var(--color-foreground, #f4f4f5);
+  color: var(--color-card, #18181b);
   cursor: pointer;
 }
 
@@ -287,9 +288,9 @@
 /* —— Generation preview (polished, not raw-first) —— */
 .as-gen-preview {
   margin: 0 12px 8px;
-  border: 1px solid #e9d5ff;
+  border: 1px solid var(--color-border, #ffffff1a);
   border-radius: 14px;
-  background: linear-gradient(180deg, #faf5ff, #fff);
+  background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent, #c8bda9) 10%, var(--color-card, #18181b)), var(--color-card, #18181b));
   overflow: hidden;
 }
 
@@ -301,14 +302,14 @@
 }
 
 .as-gen-title { font-weight: 700; }
-.as-gen-phase { color: #7c3aed; font-size: 12px; flex: 1; }
+.as-gen-phase { color: var(--color-accent, #c8bda9); font-size: 12px; flex: 1; }
 
 .as-gen-code-wrap {
   position: relative;
   margin: 0 10px;
   border-radius: 10px;
   overflow: hidden;
-  background: #0f172a;
+  background: var(--color-background, #111111);
 }
 
 .as-gen-code {
@@ -317,7 +318,7 @@
   overflow: auto;
   padding: 12px;
   font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
-  color: #c4b5fd;
+  color: var(--color-accent, #c8bda9);
   white-space: pre-wrap;
   word-break: break-word;
 }
@@ -338,7 +339,7 @@
 
 .as-gen-note {
   margin: 8px 12px 4px;
-  color: #71717a;
+  color: var(--color-muted-foreground, #a1a1aa);
   font-size: 12px;
 }
 
@@ -378,8 +379,8 @@
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  background: #fff;
-  border: 1px solid #e4e4e7;
+  background: var(--color-card, #18181b);
+  border: 1px solid var(--color-border, #ffffff1a);
   border-radius: 999px;
   padding: 6px 10px;
   box-shadow: 0 8px 24px rgba(24, 24, 27, 0.12);
@@ -392,12 +393,12 @@
   width: 14px;
   height: 14px;
   border-radius: 4px;
-  background: linear-gradient(145deg, #a78bfa, #7c3aed);
+  background: linear-gradient(145deg, var(--color-accent, #c8bda9), var(--color-accent, #c8bda9));
 }
 
 .as-thinking-chip button {
   border: 0;
-  background: #f4f4f5;
+  background: var(--color-muted, #27272a);
   border-radius: 4px;
   width: 18px;
   height: 18px;
@@ -410,15 +411,15 @@
   display: flex;
   flex-direction: column;
   min-width: 0;
-  background: #fafafa;
-  border-right: 1px solid #e4e4e7;
+  background: var(--color-background, #111111);
+  border-right: 1px solid var(--color-border, #ffffff1a);
 }
 
 .as-layers-tree {
   max-height: 38%;
   overflow: auto;
   padding: 12px;
-  border-bottom: 1px solid #e4e4e7;
+  border-bottom: 1px solid var(--color-border, #ffffff1a);
 }
 
 .as-layers-root {
@@ -446,15 +447,15 @@
 }
 
 .as-layer-list button.selected {
-  background: #ede9fe;
-  color: #5b21b6;
+  background: color-mix(in srgb, var(--color-accent, #c8bda9) 15%, transparent);
+  color: var(--color-accent, #c8bda9);
 }
 
 .as-layer-kind {
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: #a1a1aa;
+  color: var(--color-muted-foreground, #a1a1aa);
 }
 
 .as-prop-editor {
@@ -473,7 +474,7 @@
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: #71717a;
+  color: var(--color-muted-foreground, #a1a1aa);
 }
 
 .as-prop-group {
@@ -487,35 +488,35 @@
 }
 
 .as-prop-group.is-agent-flash {
-  background: #f5f3ff;
+  background: var(--color-muted, #27272a);
   box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.25);
 }
 
-.as-prop-group label { font-size: 12px; color: #52525b; }
+.as-prop-group label { font-size: 12px; color: var(--color-muted-foreground, #a1a1aa); }
 
 .as-prop-group textarea,
 .as-prop-group select,
 .as-prop-group input[type="number"] {
-  border: 1px solid #e4e4e7;
+  border: 1px solid var(--color-border, #ffffff1a);
   border-radius: 10px;
   padding: 8px 10px;
   font: inherit;
-  background: #fff;
+  background: var(--color-card, #18181b);
 }
 
 .as-rich-toolbar {
   display: flex;
   gap: 6px;
-  color: #71717a;
+  color: var(--color-muted-foreground, #a1a1aa);
   font-size: 12px;
 }
 
 .as-segmented {
   display: inline-flex;
-  border: 1px solid #e4e4e7;
+  border: 1px solid var(--color-border, #ffffff1a);
   border-radius: 10px;
   overflow: hidden;
-  background: #fff;
+  background: var(--color-card, #18181b);
 }
 
 .as-segmented button {
@@ -527,14 +528,14 @@
 }
 
 .as-segmented button.active {
-  background: #18181b;
-  color: #fff;
+  background: var(--color-foreground, #f4f4f5);
+  color: var(--color-card, #18181b);
 }
 
 .as-linkish {
   border: 0;
   background: transparent;
-  color: #6d28d9;
+  color: var(--color-accent, #c8bda9);
   text-align: left;
   padding: 0;
   cursor: pointer;
@@ -552,7 +553,7 @@
   width: 18px;
   height: 18px;
   border-radius: 6px;
-  border: 1px solid #e4e4e7;
+  border: 1px solid var(--color-border, #ffffff1a);
 }
 
 .as-toggle {
@@ -560,7 +561,7 @@
   height: 22px;
   border-radius: 999px;
   border: 0;
-  background: #d4d4d8;
+  background: var(--color-border, #ffffff1a);
   position: relative;
   cursor: pointer;
 }
@@ -573,11 +574,11 @@
   width: 18px;
   height: 18px;
   border-radius: 50%;
-  background: #fff;
+  background: var(--color-card, #18181b);
   transition: transform 0.15s ease;
 }
 
-.as-toggle.on { background: #7c3aed; }
+.as-toggle.on { background: var(--color-accent, #c8bda9); }
 .as-toggle.on::after { transform: translateX(18px); }
 
 .as-pad-row {
@@ -601,7 +602,7 @@
   text-align: left;
 }
 
-.as-cc-muted { color: #a1a1aa; padding: 8px; margin: 0; }
+.as-cc-muted { color: var(--color-muted-foreground, #a1a1aa); padding: 8px; margin: 0; }
 
 @media (max-width: 960px) {
   .as-contextual-shell {
@@ -609,3 +610,4 @@
     grid-template-rows: auto 1fr auto;
   }
 }
+