@inneranimalmedia/agentsam-sdk 2.6.10 → 2.6.12

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

@@ -1,4 +1,4 @@
-import { useEffect, useRef, type ReactNode, type UIEvent } from 'react';
+import { useEffect, useRef, type CSSProperties, type ReactNode, type UIEvent } from 'react';
 import type { AgentMessage } from '@inneranimalmedia/agentsam-contracts';
 
 export interface AgentThreadProps {
@@ -8,6 +8,8 @@ export interface AgentThreadProps {
   empty?: ReactNode;
   scrollerClassName?: string;
   listClassName?: string;
+  scrollerStyle?: CSSProperties;
+  listStyle?: CSSProperties;
   stickThreshold?: number;
 }
 
@@ -18,6 +20,8 @@ export function AgentThread({
   empty = null,
   scrollerClassName,
   listClassName,
+  scrollerStyle,
+  listStyle,
   stickThreshold = 80,
 }: AgentThreadProps) {
   const scroller = useRef<HTMLDivElement>(null);
@@ -35,8 +39,19 @@ export function AgentThread({
   }
 
   return (
-    <div ref={scroller} className={scrollerClassName} data-agent-thread="" onScroll={onScroll}>
-      <div className={listClassName}>
+    <div
+      ref={scroller}
+      className={scrollerClassName}
+      data-agent-thread=""
+      onScroll={onScroll}
+      style={
+        scrollerStyle ??
+        (scrollerClassName
+          ? undefined
+          : { minHeight: 0, flex: 1, overflowY: 'auto' })
+      }
+    >
+      <div className={listClassName} style={listStyle}>
         {messages.length === 0
           ? empty
           : messages.map((message, index) =>

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;
   }
 }
+

package/packages/agentsam-workbench/src/agent/index.ts

@@ -2,6 +2,7 @@ export * from './AgentPanel';
 export * from './Thread';
 export * from './Composer';
 export * from './ModelSelect';
+export * from './RunMode';
 export * from './ToolReceipt';
 export * from './ArtifactCard';
 export * from './ConnectedAgentPanel';
@@ -10,3 +11,5 @@ export * from './MiniAgentSam';
 export * from './ContextualComposer';
 
 export * from './ToolPermissionRequest';
+export * from './AgentConversationSurface';
+export * from './AgentRuntimeField';