@inneranimalmedia/agentsam-sdk 2.6.10 → 2.6.12

package/packages/agentsam-workbench/src/agent/mini-agentsam.css

@@ -1,12 +1,230 @@
-[data-mini-agentsam] { --mini-surface: var(--nav-surface, #292929); --mini-text: var(--nav-text, #f5f5f5); --mini-muted: var(--nav-muted, #c2c2c2); --mini-border: var(--nav-border, #ffffff26); --mini-accent: var(--nav-accent, #a78bfa); font: 400 14px/1.5 var(--nav-font, system-ui); color: var(--mini-text); }
+[data-mini-agentsam] {
+  --mini-surface: var(--nav-surface, #292929);
+  --mini-surface-raised: color-mix(in srgb, var(--mini-surface) 92%, white 8%);
+  --mini-text: var(--nav-text, #f5f5f5);
+  --mini-muted: var(--nav-muted, #c2c2c2);
+  --mini-border: var(--nav-border, #ffffff26);
+  --mini-accent: var(--nav-accent, #8b5cf6);
+  --mini-accent-strong: var(--composer-mode-accent-strong, var(--mini-accent));
+  font: 400 14px/1.5 var(--nav-font, system-ui);
+  color: var(--mini-text);
+}
+
 [data-annotation-selecting] iframe { pointer-events: none; }
 [data-annotation-selecting] { cursor: crosshair; }
-.mini-agentsam-outline { position: fixed; pointer-events: none; z-index: 9998; border: 2px solid var(--mini-accent); border-radius: 6px; }
-.mini-agentsam-hint { position: fixed; z-index: 10000; top: 64px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 24px); border-radius: 24px; padding: 10px 16px; background: var(--mini-surface); color: var(--mini-text); box-shadow: 0 0 0 1px var(--mini-border); }
-.mini-agentsam-panel { position: fixed; z-index: 10000; width: 360px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 80px); overflow-y: auto; pointer-events: auto; border-radius: 20px; padding: 12px; background: color-mix(in srgb, var(--mini-surface) 90%, transparent); color: var(--mini-text); backdrop-filter: blur(24px) saturate(110%); box-shadow: 0 0 0 1px var(--mini-border), 0 16px 48px #00000028; }
-.mini-agentsam-heading { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--mini-muted); }
-.mini-agentsam-heading span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.mini-agentsam-heading button { font-size: 22px; min-width: 40px; min-height: 40px; }
-.mini-agentsam-panel textarea { width: 100%; resize: vertical; min-height: 64px; background: transparent; color: var(--mini-text); font: inherit; padding: 8px; }
-.mini-agentsam-panel textarea::placeholder { color: var(--mini-muted); }
-.mini-agentsam-panel p { font-size: 12px; margin: 8px; }
+
+.mini-agentsam-outline {
+  position: fixed;
+  z-index: 9998;
+  pointer-events: none;
+  border: 2px solid var(--mini-accent);
+  border-radius: 8px;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mini-accent) 14%, transparent);
+}
+
+.mini-agentsam-hint {
+  position: fixed;
+  z-index: 10000;
+  top: 64px;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: calc(100vw - 24px);
+  border: 1px solid var(--mini-border);
+  border-radius: 999px;
+  padding: 9px 14px;
+  background: color-mix(in srgb, var(--mini-surface) 92%, transparent);
+  color: var(--mini-text);
+  backdrop-filter: blur(20px) saturate(120%);
+  box-shadow: 0 12px 36px #0004;
+}
+
+.mini-agentsam-panel {
+  position: fixed;
+  z-index: 10000;
+  width: 360px;
+  max-width: calc(100vw - 24px);
+  max-height: calc(100dvh - 80px);
+  overflow: visible;
+  pointer-events: auto;
+  border: 1px solid var(--mini-border);
+  border-radius: 20px;
+  padding: 10px;
+  background: color-mix(in srgb, var(--mini-surface) 94%, transparent);
+  color: var(--mini-text);
+  backdrop-filter: blur(24px) saturate(118%);
+  box-shadow: 0 18px 56px #0006;
+}
+
+.mini-agentsam-heading {
+  display: flex;
+  min-height: 36px;
+  align-items: center;
+  gap: 4px;
+  padding: 0 2px 6px 6px;
+  font-size: 11px;
+  color: var(--mini-muted);
+  user-select: none;
+}
+
+.mini-agentsam-heading span {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mini-agentsam-heading button {
+  display: grid;
+  width: 32px;
+  height: 32px;
+  flex: 0 0 32px;
+  place-items: center;
+  border: 0;
+  border-radius: 9px;
+  background: transparent;
+  color: var(--mini-muted);
+  cursor: pointer;
+}
+
+.mini-agentsam-heading button:hover,
+.mini-agentsam-heading button:focus-visible {
+  background: var(--nav-hover, #ffffff0d);
+  color: var(--mini-text);
+  outline: none;
+}
+
+.mini-agentsam-composer {
+  --composer-mode-accent: var(--mini-accent);
+  display: flex;
+  min-height: 112px;
+  flex-direction: column;
+  border: 1px solid color-mix(in srgb, var(--composer-mode-accent) 34%, var(--mini-border));
+  border-radius: 16px;
+  padding: 10px 10px 8px;
+  background: color-mix(in srgb, var(--mini-surface-raised) 90%, transparent);
+  box-shadow: inset 0 1px 0 #ffffff08;
+  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
+}
+
+.mini-agentsam-composer:focus-within {
+  border-color: color-mix(in srgb, var(--composer-mode-accent) 84%, var(--mini-border));
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--composer-mode-accent) 36%, transparent),
+    0 0 0 4px color-mix(in srgb, var(--composer-mode-accent) 13%, transparent),
+    inset 0 1px 0 #ffffff0b;
+}
+
+.mini-agentsam-input {
+  display: block;
+  width: 100%;
+  min-height: 54px;
+  max-height: 120px;
+  flex: 1;
+  resize: none;
+  overflow-y: auto;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: var(--mini-text);
+  font: inherit;
+  line-height: 1.5;
+  padding: 4px 3px 8px;
+  scrollbar-width: thin;
+}
+
+.mini-agentsam-input::placeholder { color: var(--mini-muted); }
+
+.mini-agentsam-toolbar {
+  display: flex;
+  min-height: 36px;
+  align-items: center;
+  gap: 6px;
+  padding-top: 2px;
+}
+
+.mini-agentsam-panel .agentsam-plugin-menu {
+  position: static;
+  margin-top: 8px;
+  max-height: min(240px, 35dvh);
+  overflow-y: auto;
+}
+
+.mini-agentsam-panel p {
+  margin: 7px 6px 2px;
+  font-size: 12px;
+  color: var(--mini-muted);
+}
+
+.mini-agentsam-send {
+  display: inline-grid;
+  width: 36px;
+  height: 36px;
+  flex: 0 0 36px;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--composer-send-bg, var(--mini-accent-strong));
+  color: var(--composer-send-fg, #fff);
+  cursor: pointer;
+  box-shadow: inset 0 0 0 1px #ffffff12;
+  transition: transform 120ms ease, opacity 120ms ease, background 120ms ease;
+}
+
+.mini-agentsam-send svg {
+  display: block;
+  transform: none;
+}
+
+.mini-agentsam-send:hover:not(:disabled) { transform: translateY(-1px); }
+.mini-agentsam-send:active:not(:disabled) { transform: translateY(0); }
+.mini-agentsam-send:disabled { opacity: .38; cursor: default; }
+
+.mini-agentsam-review-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  pointer-events: auto;
+  background: #0009;
+  backdrop-filter: blur(10px);
+}
+
+.mini-agentsam-panel[data-expanded="true"] {
+  z-index: 10001;
+  left: 50%;
+  top: 50%;
+  width: min(760px, calc(100vw - 32px));
+  max-height: calc(100dvh - 48px);
+  transform: translate(-50%, -50%);
+  padding: 14px;
+  background: var(--mini-surface);
+  overflow: visible;
+}
+
+.mini-agentsam-panel[data-expanded="true"] .mini-agentsam-composer {
+  min-height: min(58dvh, 560px);
+}
+
+.mini-agentsam-panel[data-expanded="true"] .mini-agentsam-input {
+  min-height: min(48dvh, 460px);
+  max-height: min(58dvh, 560px) !important;
+  overflow-y: auto;
+}
+
+@media (max-width: 520px) {
+  .mini-agentsam-panel {
+    width: calc(100vw - 20px);
+    max-width: none;
+  }
+  .mini-agentsam-panel[data-expanded="true"] {
+    width: calc(100vw - 20px);
+    max-height: calc(100dvh - 20px);
+    padding: 10px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mini-agentsam-composer,
+  .mini-agentsam-send { transition: none; }
+}

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

@@ -4,3 +4,7 @@ export * from './browser';
 export * from './terminal';
 export * from './projects';
 export * from './timeline';
+
+export * from './manufacturing';
+
+export * from './widgets';

package/packages/agentsam-workbench/src/manufacturing/PreflightIndicator.tsx

@@ -0,0 +1,203 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+export type PreflightStatus =
+  | 'ready'
+  | 'ready_with_warning'
+  | 'ready_with_transform'
+  | 'prepared_for_digitization'
+  | 'needs_variant'
+  | 'unsupported';
+
+export interface PreflightIssueView {
+  code: string;
+  message: string;
+  action?: string | null;
+}
+
+export interface PreflightIndicatorProps {
+  status: PreflightStatus;
+  effectivePpi?: number | null;
+  readyPpi?: number | null;
+  minimumPpi?: number | null;
+  issues?: readonly PreflightIssueView[];
+  actions?: readonly string[];
+  onAction?: (action: string) => void;
+  compact?: boolean;
+  title?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+
+const STATUS_COPY: Record<PreflightStatus, { label: string; tone: string }> = {
+  ready: { label: 'Production ready', tone: 'ready' },
+  ready_with_warning: { label: 'Usable with warning', tone: 'warning' },
+  ready_with_transform: { label: 'Quick fix available', tone: 'transform' },
+  prepared_for_digitization: { label: 'Prepared for digitization', tone: 'handoff' },
+  needs_variant: { label: 'Needs another asset variant', tone: 'error' },
+  unsupported: { label: 'Unsupported for this process', tone: 'error' },
+};
+
+const ACTION_LABELS: Record<string, string> = {
+  trim_alpha: 'Auto-Crop Alpha',
+  vectorize_monochrome: 'Convert to Monochrome Vector',
+  scale_to_safe_zone: 'Scale to Fit Safe Zone',
+  normalize_svg: 'Normalize SVG',
+  outline_text: 'Outline Text',
+  lossless_optimize: 'Optimize Losslessly',
+};
+
+function labelForAction(action: string) {
+  if (ACTION_LABELS[action]) return ACTION_LABELS[action];
+  if (action.startsWith('normalize_color_space:')) return 'Normalize Color';
+  if (action.startsWith('convert:')) return 'Convert Format';
+  if (action.startsWith('rasterize:')) return 'Rasterize for Print';
+  return action
+    .replace(/[:_-]+/g, ' ')
+    .replace(/\b\w/g, (value) => value.toUpperCase());
+}
+
+function qualityPercent(
+  effectivePpi: number | null | undefined,
+  readyPpi: number | null | undefined,
+) {
+  if (!effectivePpi || !readyPpi) return null;
+  return Math.max(0, Math.min(100, (effectivePpi / readyPpi) * 100));
+}
+
+export function PreflightIndicator({
+  status,
+  effectivePpi,
+  readyPpi,
+  minimumPpi,
+  issues = [],
+  actions = [],
+  onAction,
+  compact = false,
+  title = 'Print quality',
+  className,
+  style,
+}: PreflightIndicatorProps) {
+  const state = STATUS_COPY[status];
+  const quality = qualityPercent(effectivePpi, readyPpi);
+  const uniqueActions = [...new Set(actions)];
+
+  return (
+    <section
+      className={className}
+      data-agentsam-preflight=""
+      data-preflight-status={status}
+      data-preflight-tone={state.tone}
+      style={{
+        border: '1px solid var(--agentsam-preflight-border, rgba(90, 92, 98, 0.24))',
+        borderRadius: 12,
+        padding: compact ? 10 : 14,
+        background: 'var(--agentsam-preflight-bg, rgba(255,255,255,0.72))',
+        display: 'grid',
+        gap: compact ? 8 : 10,
+        ...style,
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'baseline',
+          justifyContent: 'space-between',
+          gap: 12,
+        }}
+      >
+        <strong style={{ fontSize: compact ? 12 : 13, fontWeight: 650 }}>{title}</strong>
+        <span
+          data-preflight-state=""
+          style={{
+            fontSize: 11,
+            opacity: 0.72,
+            textAlign: 'right',
+          }}
+        >
+          {state.label}
+        </span>
+      </div>
+
+      {quality != null ? (
+        <div style={{ display: 'grid', gap: 5 }}>
+          <div
+            aria-label={`Effective print resolution ${Math.round(effectivePpi!)} PPI`}
+            role="meter"
+            aria-valuemin={0}
+            aria-valuemax={readyPpi || 300}
+            aria-valuenow={Math.round(effectivePpi!)}
+            style={{
+              height: 5,
+              borderRadius: 999,
+              overflow: 'hidden',
+              background: 'var(--agentsam-preflight-track, rgba(90,92,98,0.14))',
+            }}
+          >
+            <div
+              style={{
+                height: '100%',
+                width: `${quality}%`,
+                borderRadius: 'inherit',
+                background:
+                  status === 'needs_variant' || status === 'unsupported'
+                    ? 'var(--agentsam-preflight-error, #9f4d4d)'
+                    : status === 'ready_with_warning'
+                      ? 'var(--agentsam-preflight-warning, #a87320)'
+                      : 'var(--agentsam-preflight-ready, #54745b)',
+                transition: 'width 120ms ease',
+              }}
+            />
+          </div>
+          <div
+            style={{
+              display: 'flex',
+              gap: 10,
+              fontSize: 11,
+              opacity: 0.72,
+            }}
+          >
+            <span>{Math.round(effectivePpi!)} PPI effective</span>
+            {readyPpi ? <span>{Math.round(readyPpi)} target</span> : null}
+            {minimumPpi && minimumPpi !== readyPpi ? (
+              <span>{Math.round(minimumPpi)} minimum</span>
+            ) : null}
+          </div>
+        </div>
+      ) : null}
+
+      {!compact && issues.length ? (
+        <div style={{ display: 'grid', gap: 4 }}>
+          {issues.slice(0, 3).map((issue) => (
+            <div key={issue.code} style={{ fontSize: 12, lineHeight: 1.35, opacity: 0.82 }}>
+              {issue.message}
+            </div>
+          ))}
+        </div>
+      ) : null}
+
+      {uniqueActions.length && onAction ? (
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
+          {uniqueActions.slice(0, compact ? 2 : 4).map((action) => (
+            <button
+              key={action}
+              type="button"
+              onClick={() => onAction(action)}
+              style={{
+                border: '1px solid var(--agentsam-preflight-button-border, rgba(70,72,76,0.24))',
+                borderRadius: 8,
+                padding: compact ? '5px 8px' : '6px 9px',
+                background: 'var(--agentsam-preflight-button-bg, rgba(255,255,255,0.82))',
+                color: 'inherit',
+                font: 'inherit',
+                fontSize: 11,
+                cursor: 'pointer',
+              }}
+            >
+              {labelForAction(action)}
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </section>
+  );
+}

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

@@ -0,0 +1,2 @@
+export * from './PreflightIndicator';
+export * from './loading';

package/packages/agentsam-workbench/src/manufacturing/loading.ts

@@ -0,0 +1,147 @@
+import type {
+  LoadingSceneController,
+  LoadingSceneSemantic,
+  MetricPointProgress,
+} from '@inneranimalmedia/agentsam-loading-scene';
+
+export type ManufacturingLoadingState =
+  | 'UPLOADING'
+  | 'PREFLIGHT_CHECK'
+  | 'NORMALIZING_COLOR'
+  | 'VECTORIZING'
+  | 'COMPILING_MANUFACTURING'
+  | 'DIGITIZATION_HANDOFF';
+
+export type ReceiptLoadingState =
+  | 'VERIFYING_HASHES'
+  | 'PERSISTING_RECEIPT'
+  | 'CLEANING_WORKSPACE';
+
+interface PipelineStateConfig {
+  semantic: LoadingSceneSemantic;
+  label: string;
+  detail: string;
+}
+
+const MANUFACTURING_STATES: Record<ManufacturingLoadingState, PipelineStateConfig> = {
+  UPLOADING: {
+    semantic: 'asset_ingest',
+    label: 'Ingesting master artwork',
+    detail: 'Raster/vector parser',
+  },
+  PREFLIGHT_CHECK: {
+    semantic: 'preflight',
+    label: 'Evaluating physical print resolution',
+    detail: 'Calculating effective PPI from placement geometry',
+  },
+  NORMALIZING_COLOR: {
+    semantic: 'color_normalization',
+    label: 'Normalizing production color',
+    detail: 'Color profile and transparency normalization',
+  },
+  VECTORIZING: {
+    semantic: 'vectorization',
+    label: 'Tracing production paths',
+    detail: 'Raster boundary to monochrome vector',
+  },
+  COMPILING_MANUFACTURING: {
+    semantic: 'manufacturing_compile',
+    label: 'Compiling manufacturing derivative',
+    detail: 'Provider profile validation and export',
+  },
+  DIGITIZATION_HANDOFF: {
+    semantic: 'digitization_handoff',
+    label: 'Preparing digitization handoff',
+    detail: 'Embroidery source is prepared, not yet a stitch file',
+  },
+};
+
+const RECEIPT_STATES: Record<ReceiptLoadingState, PipelineStateConfig> = {
+  VERIFYING_HASHES: {
+    semantic: 'verification',
+    label: 'Verifying snapshot integrity',
+    detail: 'Pre/post hashes and stale-write evidence',
+  },
+  PERSISTING_RECEIPT: {
+    semantic: 'receipt_persistence',
+    label: 'Persisting receipt envelope',
+    detail: 'agentsam.receipt.v1 to durable catalog storage',
+  },
+  CLEANING_WORKSPACE: {
+    semantic: 'workspace_cleanup',
+    label: 'Cleaning ephemeral workspace',
+    detail: 'Reclaiming local temporary storage',
+  },
+};
+
+export interface PipelineTransitionOptions {
+  label?: string;
+  detail?: string;
+  progress?: number | null;
+  metricPoints?: MetricPointProgress;
+}
+
+function createController<TState extends string>(
+  controller: LoadingSceneController,
+  states: Record<TState, PipelineStateConfig>,
+  operationId: string,
+) {
+  let started = false;
+  let completed = false;
+
+  function transitionTo(state: TState, options: PipelineTransitionOptions = {}) {
+    const config = states[state];
+    if (!config || completed) return;
+
+    const payload = {
+      operationId,
+      semantic: config.semantic,
+      label: options.label || config.label,
+      detail: options.detail || config.detail,
+      progress: options.progress,
+      metricPoints: options.metricPoints,
+    };
+
+    if (!started) {
+      controller.start({ ...payload, scope: 'asset' });
+      started = true;
+      return;
+    }
+
+    controller.activity(payload);
+  }
+
+  return {
+    transitionTo,
+    complete() {
+      if (!started || completed) return;
+      completed = true;
+      controller.complete(operationId);
+    },
+    fail(detail?: string) {
+      if (!started || completed) return;
+      completed = true;
+      controller.fail(operationId, detail);
+    },
+    destroy() {
+      if (started && !completed) controller.complete(operationId);
+      completed = true;
+    },
+  };
+}
+
+export function createManufacturingLoadingController(
+  controller: LoadingSceneController,
+  { operationId = 'manufacturing-preflight' }: { operationId?: string } = {},
+) {
+  return createController(controller, MANUFACTURING_STATES, operationId);
+}
+
+export function createReceiptPipelineLoadingController(
+  controller: LoadingSceneController,
+  { operationId = 'receipt-pipeline' }: { operationId?: string } = {},
+) {
+  return createController(controller, RECEIPT_STATES, operationId);
+}
+
+export { MANUFACTURING_STATES, RECEIPT_STATES };

package/packages/agentsam-workbench/src/widgets/BuiltinWidget.tsx

@@ -0,0 +1,22 @@
+import { CountdownWidget } from './CountdownWidget';
+
+export interface BuiltinWidgetProps {
+  widgetId: string;
+  compact?: boolean;
+  configuration?: Record<string, unknown>;
+}
+
+export function BuiltinWidget({
+  widgetId,
+  compact = false,
+  configuration = {},
+}: BuiltinWidgetProps) {
+  if (widgetId === 'countdown') {
+    const requested = Number(configuration.durationMs);
+    const durationMs = Number.isFinite(requested) && requested > 0
+      ? requested
+      : 5 * 60_000;
+    return <CountdownWidget durationMs={durationMs} compact={compact} />;
+  }
+  return null;
+}

package/packages/agentsam-workbench/src/widgets/CountdownWidget.tsx

@@ -0,0 +1,68 @@
+import type { CSSProperties } from 'react';
+import { formatCountdown } from './countdown';
+import { useCountdown } from './useCountdown';
+
+export interface CountdownWidgetProps {
+  durationMs: number;
+  label?: string;
+  autoStart?: boolean;
+  compact?: boolean;
+  onComplete?: () => void;
+  className?: string;
+  style?: CSSProperties;
+}
+
+export function CountdownWidget({
+  durationMs,
+  label = 'Time remaining',
+  autoStart = false,
+  compact = false,
+  onComplete,
+  className,
+  style,
+}: CountdownWidgetProps) {
+  const countdown = useCountdown({ durationMs, autoStart, onComplete });
+  const primaryLabel =
+    countdown.phase === 'running'
+      ? 'Pause'
+      : countdown.phase === 'paused'
+        ? 'Resume'
+        : countdown.phase === 'complete'
+          ? 'Start again'
+          : 'Start';
+
+  const onPrimary = () => {
+    if (countdown.phase === 'running') countdown.pause();
+    else if (countdown.phase === 'paused') countdown.resume();
+    else countdown.start();
+  };
+
+  return (
+    <div
+      className={['agentsam-countdown', className].filter(Boolean).join(' ')}
+      data-countdown-phase={countdown.phase}
+      data-compact={compact ? 'true' : 'false'}
+      style={style}
+    >
+      <div
+        className="agentsam-countdown__time"
+        role="timer"
+        aria-label={label}
+        aria-live="off"
+      >
+        {formatCountdown(countdown.remainingMs)}
+      </div>
+      <div className="agentsam-countdown__controls">
+        <button type="button" className="agentsam-widget-button agentsam-widget-button--primary" onClick={onPrimary}>
+          {primaryLabel}
+        </button>
+        <button type="button" className="agentsam-widget-button" onClick={() => countdown.reset()}>
+          Reset
+        </button>
+      </div>
+      <span className="agentsam-countdown__status" role="status" aria-live="polite">
+        {countdown.phase === 'complete' ? 'Timer complete.' : ''}
+      </span>
+    </div>
+  );
+}