@inneranimalmedia/agentsam-sdk 2.6.3 → 2.6.5

package/apps/client-cms-editor/bin/agentsam-cms.mjs

@@ -0,0 +1,229 @@
+#!/usr/bin/env node
+import fs from 'node:fs';
+import path from 'node:path';
+import { spawnSync } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
+
+const packageRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const sdkRoot = path.resolve(packageRoot, '../..');
+const manifestPath = path.join(packageRoot, 'agentsam.app.json');
+const PERSISTENCE = new Set(['sqlite', 'd1', 'localStorage']);
+
+function usage() {
+  console.log(`
+AgentSam CMS Editor
+
+  agentsam-cms [preview]
+  agentsam-cms info
+  agentsam-cms doctor
+  agentsam-cms scaffold <directory> [--persistence sqlite|d1|localStorage]
+
+preview
+  Run the app preview script when present.
+
+info
+  Print the AgentSam app manifest.
+
+doctor
+  Verify frontend/backend/shared layout.
+
+scaffold
+  Copy editable source into a new directory.
+  sqlite       local authority for desktop/offline use
+  d1           cloud authority through the CMS API
+  localStorage browser draft cache only; never authoritative
+`.trim());
+}
+
+function info() {
+  console.log(JSON.stringify(JSON.parse(fs.readFileSync(manifestPath, 'utf8')), null, 2));
+}
+
+function doctor() {
+  const required = ['frontend', 'backend', 'shared', 'bin', 'package.json', 'agentsam.app.json'];
+  const missing = required.filter((rel) => !fs.existsSync(path.join(packageRoot, rel)));
+  if (missing.length) {
+    console.error('doctor failed; missing:', missing.join(', '));
+    process.exit(1);
+  }
+  console.log('✓ client-cms-editor layout ok');
+}
+
+function parseScaffoldArgs(args) {
+  const target = args[0];
+  let persistence = 'sqlite';
+  for (let i = 1; i < args.length; i += 1) {
+    if (args[i] === '--persistence') {
+      persistence = String(args[i + 1] || '').trim();
+      i += 1;
+    }
+  }
+  if (!PERSISTENCE.has(persistence)) {
+    throw new Error(`unsupported persistence "${persistence}"; choose sqlite, d1, or localStorage`);
+  }
+  return { target, persistence };
+}
+
+const COPY_SKIP = new Set(['node_modules', 'dist', 'coverage', '.git', '.wrangler', '.agentsam']);
+
+function copySource(source, target) {
+  fs.cpSync(source, target, {
+    recursive: true,
+    filter(candidate) {
+      if (candidate === source) return true;
+      return !candidate
+        .split(path.sep)
+        .some((part) => COPY_SKIP.has(part));
+    },
+  });
+}
+
+function readJson(file) {
+  return JSON.parse(fs.readFileSync(file, 'utf8'));
+}
+
+function writeJson(file, value) {
+  fs.writeFileSync(file, `${JSON.stringify(value, null, 2)}
+`);
+}
+
+function makeStandaloneWorkspace(targetRoot) {
+  const rootPackage = path.join(targetRoot, 'package.json');
+  const rootPkg = readJson(rootPackage);
+  rootPkg.workspaces = [...new Set([...(rootPkg.workspaces || []), 'packages/*'])];
+  writeJson(rootPackage, rootPkg);
+
+  const packageFiles = [
+    path.join(targetRoot, 'frontend/package.json'),
+    path.join(targetRoot, 'shared/cms/package.json'),
+  ];
+  for (const file of packageFiles) {
+    if (!fs.existsSync(file)) continue;
+    const pkg = readJson(file);
+    for (const section of ['dependencies', 'devDependencies']) {
+      if (!pkg[section]) continue;
+      for (const name of [
+        '@inneranimalmedia/agentsam-contracts',
+        '@inneranimalmedia/agentsam-workbench',
+      ]) {
+        if (pkg[section][name]?.startsWith?.('file:')) pkg[section][name] = '0.1.0';
+      }
+    }
+    writeJson(file, pkg);
+  }
+}
+
+function runtimeConfig(persistence) {
+  if (persistence === 'sqlite') {
+    return {
+      schema: 'agentsam.cms.runtime.v1',
+      app_id: 'client-cms-editor',
+      run_target: 'local',
+      authority: 'sqlite',
+      cache: 'localStorage',
+      cache_only: false,
+    };
+  }
+  if (persistence === 'd1') {
+    return {
+      schema: 'agentsam.cms.runtime.v1',
+      app_id: 'client-cms-editor',
+      run_target: 'cloudflare',
+      authority: 'd1',
+      cache: 'localStorage',
+      cache_only: false,
+    };
+  }
+  return {
+    schema: 'agentsam.cms.runtime.v1',
+    app_id: 'client-cms-editor',
+    run_target: 'browser',
+    authority: null,
+    cache: 'localStorage',
+    cache_only: true,
+    note: 'localStorage is a draft/offline cache only; configure SQLite or D1 before authoritative publish.',
+  };
+}
+
+function scaffold(targetArg, { persistence = 'sqlite' } = {}) {
+  if (!targetArg) throw new Error('scaffold requires a target directory');
+  const targetRoot = path.resolve(process.cwd(), targetArg);
+  if (fs.existsSync(targetRoot) && fs.readdirSync(targetRoot).length) {
+    throw new Error(`target directory is not empty: ${targetRoot}`);
+  }
+  fs.mkdirSync(targetRoot, { recursive: true });
+
+  for (const relative of [
+    'frontend',
+    'backend',
+    'shared',
+    'bin',
+    '.gitignore',
+    'package.json',
+    'README.md',
+    'agentsam.app.json',
+    'IMPORT_PROVENANCE.json',
+  ]) {
+    const source = path.join(packageRoot, relative);
+    if (!fs.existsSync(source)) continue;
+    copySource(source, path.join(targetRoot, relative));
+  }
+
+  const portablePackages = [
+    'agentsam-contracts',
+    'agentsam-workbench',
+  ];
+  for (const name of portablePackages) {
+    const source = path.join(sdkRoot, 'packages', name);
+    if (!fs.existsSync(source)) {
+      throw new Error(`required scaffold package missing: packages/${name}`);
+    }
+    copySource(source, path.join(targetRoot, 'packages', name));
+  }
+  makeStandaloneWorkspace(targetRoot);
+
+  const stateDir = path.join(targetRoot, '.agentsam');
+  fs.mkdirSync(stateDir, { recursive: true });
+  fs.writeFileSync(
+    path.join(stateDir, 'cms-runtime.json'),
+    `${JSON.stringify(runtimeConfig(persistence), null, 2)}\n`,
+  );
+
+  console.log(`✓ scaffolded CMS editor into ${targetRoot}`);
+  console.log(`  persistence: ${persistence}${persistence === 'localStorage' ? ' (cache only)' : ''}`);
+}
+
+function preview(args) {
+  const pkg = JSON.parse(fs.readFileSync(path.join(packageRoot, 'package.json'), 'utf8'));
+  const script = pkg.scripts?.preview ? 'preview' : pkg.scripts?.dev ? 'dev' : null;
+  if (!script) {
+    console.error('no preview/dev script in package.json');
+    process.exit(1);
+  }
+  const npmCmd = process.platform === 'win32' ? 'npm.cmd' : 'npm';
+  const result = spawnSync(npmCmd, ['run', script, '--', ...args], {
+    cwd: packageRoot,
+    stdio: 'inherit',
+    shell: process.platform === 'win32',
+  });
+  process.exit(result.status ?? 1);
+}
+
+const [cmd = 'preview', ...rest] = process.argv.slice(2);
+try {
+  if (cmd === '--help' || cmd === '-h' || cmd === 'help') usage();
+  else if (cmd === 'info') info();
+  else if (cmd === 'doctor') doctor();
+  else if (cmd === 'scaffold') {
+    const { target, persistence } = parseScaffoldArgs(rest);
+    scaffold(target, { persistence });
+  } else if (cmd === 'preview') preview(rest);
+  else {
+    console.error(`unknown command: ${cmd}`);
+    usage();
+    process.exit(1);
+  }
+} catch (err) {
+  console.error(String(err?.message || err));
+  process.exit(1);
+}

package/apps/client-cms-editor/frontend/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AgentSam CMS Studio</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/apps/client-cms-editor/frontend/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@inneranimalmedia/agentsam-cms-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles/studio.css": "./src/styles/studio.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "test": "vitest run --passWithNoTests"
+  },
+  "dependencies": {
+    "@inneranimalmedia/agentsam-cms-backend": "0.1.0",
+    "@inneranimalmedia/agentsam-cms-shared": "0.1.0",
+    "@inneranimalmedia/agentsam-contracts": "file:../../../packages/agentsam-contracts",
+    "@inneranimalmedia/agentsam-workbench": "file:../../../packages/agentsam-workbench",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^5.0.4",
+    "typescript": "^5.9.3",
+    "vite": "^6.4.3",
+    "vitest": "^4.1.11"
+  }
+}

package/apps/client-cms-editor/frontend/src/AgentSamDrawer.tsx

@@ -0,0 +1,188 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { AgentPrincipal, AgentWorkbenchAdapter } from '@inneranimalmedia/agentsam-contracts';
+import { ConnectedAgentPanel } from '@inneranimalmedia/agentsam-workbench/agent';
+import { createCmsAgentContextProvider } from '@inneranimalmedia/agentsam-cms-shared';
+import './styles/agentsam-drawer.css';
+
+export type AgentSamDrawerProps = {
+  open: boolean;
+  onClose: () => void;
+  adapter?: AgentWorkbenchAdapter | null;
+  principal?: AgentPrincipal | null;
+  projectId: string;
+  conversationId: string;
+  route?: string;
+  pageId?: string | null;
+  sectionId?: string | null;
+  blockId?: string | null;
+  selectionLabel?: string | null;
+  pendingPrompt?: string | null;
+  onPendingPromptConsumed?: () => void;
+};
+
+/**
+ * FnF-style AgentSam Side Assistant — docked slide-in chat.
+ * Ports fuelnfreetime admin agentsam drawer UX into the CMS editor shell.
+ */
+export function AgentSamDrawer({
+  open,
+  onClose,
+  adapter,
+  principal,
+  projectId,
+  conversationId,
+  route,
+  pageId,
+  sectionId,
+  blockId,
+  selectionLabel,
+  pendingPrompt,
+  onPendingPromptConsumed,
+}: AgentSamDrawerProps) {
+  const contextProvider = useMemo(() => createCmsAgentContextProvider(() => ({
+    principal: principal || {
+      accountId: 'demo',
+      authUserId: 'demo',
+      displayName: 'Demo',
+    },
+    projectId,
+    route,
+    pageId,
+    sectionId,
+    blockId,
+  })), [principal, projectId, route, pageId, sectionId, blockId]);
+
+  const status = selectionLabel
+    ? `Editing “${selectionLabel}”`
+    : 'Context-aware admin chat';
+
+  return (
+    <aside
+      className={`agentsam-dock${open ? ' is-open' : ''}`}
+      id="agentsam-dock"
+      aria-hidden={open ? 'false' : 'true'}
+      data-annotation-control=""
+    >
+      <div className="agentsam-drawer drawer-mounted" aria-label="AgentSam Side Assistant">
+        <header className="agentsam-head">
+          <div className="agentsam-brand">
+            <div className="agentsam-mark" aria-hidden="true">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+                <path d="M12 3l1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
+              </svg>
+            </div>
+            <div>
+              <strong>AgentSam Side Assistant</strong>
+              <span>{status}</span>
+            </div>
+          </div>
+          <button type="button" className="agentsam-close" onClick={onClose} aria-label="Close AgentSam Side Assistant">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              <path d="M18 6 6 18" />
+              <path d="m6 6 12 12" />
+            </svg>
+          </button>
+        </header>
+
+        {adapter ? (
+          <ConnectedAgentPanel
+            className="agentsam-connected"
+            adapter={adapter}
+            contextProvider={contextProvider}
+            conversationId={conversationId}
+            header={null}
+            empty={<div className="agentsam-empty">Ask about this page, sections, or publish flow. I’ll use the current CMS selection.</div>}
+          />
+        ) : (
+          <DemoDrawerChat
+            selectionLabel={selectionLabel}
+            pendingPrompt={pendingPrompt}
+            onPendingPromptConsumed={onPendingPromptConsumed}
+          />
+        )}
+      </div>
+    </aside>
+  );
+}
+
+function DemoDrawerChat({
+  selectionLabel,
+  pendingPrompt,
+  onPendingPromptConsumed,
+}: {
+  selectionLabel?: string | null;
+  pendingPrompt?: string | null;
+  onPendingPromptConsumed?: () => void;
+}) {
+  const [messages, setMessages] = useState<{ role: 'user' | 'assistant'; text: string }[]>([
+    {
+      role: 'assistant',
+      text: 'Ask about this page, store operations, customers, content, or repository work. I’ll route the request using the current CMS context.',
+    },
+  ]);
+  const [value, setValue] = useState('');
+  const [busy, setBusy] = useState(false);
+  const logRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!pendingPrompt?.trim()) return;
+    void send(pendingPrompt);
+    onPendingPromptConsumed?.();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pendingPrompt]);
+
+  useEffect(() => {
+    logRef.current?.scrollTo({ top: logRef.current.scrollHeight });
+  }, [messages, busy]);
+
+  async function send(raw: string) {
+    const text = raw.trim();
+    if (!text || busy) return;
+    setBusy(true);
+    setValue('');
+    setMessages((prev) => [...prev, { role: 'user', text }]);
+    await new Promise((r) => setTimeout(r, 420));
+    const scope = selectionLabel ? ` for “${selectionLabel}”` : '';
+    setMessages((prev) => [
+      ...prev,
+      {
+        role: 'assistant',
+        text: `Got it${scope}. In demo mode this drawer mirrors the FnF Side Assistant — bind an AgentSam adapter to run live tools.`,
+      },
+    ]);
+    setBusy(false);
+  }
+
+  return (
+    <>
+      <div className="agentsam-messages" ref={logRef} role="log" aria-live="polite">
+        {messages.map((msg, i) => (
+          <div key={`${msg.role}-${i}`} className={`agentsam-msg agentsam-msg--${msg.role}`}>
+            {msg.text}
+          </div>
+        ))}
+        {busy && <div className="agentsam-msg agentsam-msg--assistant agentsam-msg--typing">Thinking…</div>}
+      </div>
+      <form
+        className="agentsam-compose"
+        onSubmit={(event) => {
+          event.preventDefault();
+          void send(value);
+        }}
+      >
+        <textarea
+          rows={2}
+          placeholder="Ask anything…"
+          value={value}
+          onChange={(event) => setValue(event.target.value)}
+          disabled={busy}
+        />
+        <button type="submit" className="agentsam-send" disabled={busy || !value.trim()} aria-label="Send">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+            <path d="M5 12h13M12 5l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </button>
+      </form>
+    </>
+  );
+}

package/apps/client-cms-editor/frontend/src/CmsAgentSurface.tsx

@@ -0,0 +1,191 @@
+import { useEffect, useMemo, useState } from 'react';
+import type { AgentPrincipal, AgentWorkbenchAdapter } from '@inneranimalmedia/agentsam-contracts';
+import { ConnectedAgentPanel } from '@inneranimalmedia/agentsam-workbench/agent';
+import {
+  ContextualComposerHost,
+  type ComposerSelection,
+  type ComposerSuggestion,
+  type GenerationPhase,
+  type LayerNode,
+  type PropertyInspectorValues,
+  phaseLabel,
+} from '@inneranimalmedia/agentsam-workbench/agent';
+import { createCmsAgentContextProvider } from '@inneranimalmedia/agentsam-cms-shared';
+import '@inneranimalmedia/agentsam-workbench/agent/contextual-composer.css';
+
+export type CmsAgentSurfaceProps = {
+  /** Required for classic ConnectedAgentPanel; optional when `contextual` (demo / local stubs). */
+  adapter?: AgentWorkbenchAdapter | null;
+  principal?: AgentPrincipal | null;
+  projectId: string;
+  conversationId: string;
+  route?: string;
+  pageId?: string | null;
+  sectionId?: string | null;
+  blockId?: string | null;
+  publicationRevision?: number | null;
+  className?: string;
+  /** When true, use the Sidekick-style contextual composer shell instead of the plain ConnectedAgentPanel. */
+  contextual?: boolean;
+  selection?: ComposerSelection | null;
+  layers?: LayerNode[];
+  pageLabel?: string;
+  propertyValues?: PropertyInspectorValues;
+  onPropertyChange?: (patch: Partial<PropertyInspectorValues>) => void;
+  onSelectLayer?: (id: string) => void;
+  onRemoveBlock?: () => void;
+  children?: React.ReactNode;
+};
+
+/**
+ * CMS-specific adapter around the shared AgentSam workbench.
+ * Host supplies authenticated principal + explicit CMS selection state.
+ *
+ * `contextual` enables the select → suggest → generate → land loop
+ * (see docs/CMS_CONTEXTUAL_COMPOSER.md). FnF layout: left inspector · canvas · right composer.
+ */
+export function CmsAgentSurface({
+  adapter,
+  principal,
+  projectId,
+  conversationId,
+  route,
+  pageId,
+  sectionId,
+  blockId,
+  publicationRevision,
+  className,
+  contextual = false,
+  selection = null,
+  layers = [],
+  pageLabel = 'Home page',
+  propertyValues,
+  onPropertyChange,
+  onSelectLayer,
+  onRemoveBlock,
+  children,
+}: CmsAgentSurfaceProps) {
+  const contextProvider = useMemo(() => createCmsAgentContextProvider(() => ({
+    principal: principal || {
+      accountId: 'demo',
+      authUserId: 'demo',
+      displayName: 'Demo',
+    },
+    projectId,
+    route,
+    pageId,
+    sectionId,
+    blockId,
+    publicationRevision,
+  })), [blockId, pageId, principal, projectId, publicationRevision, route, sectionId]);
+
+  const [values, setValues] = useState<PropertyInspectorValues>(
+    propertyValues || {
+      text: selection?.label || '',
+      width: 'fit',
+      maxWidth: 'normal',
+      align: 'left',
+      typographyPreset: 'Heading 4',
+      background: false,
+      padding: { top: 0, bottom: 0, left: 0, right: 0 },
+    },
+  );
+  const [flashKeys, setFlashKeys] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (!propertyValues) return;
+    setValues((prev) => ({ ...prev, ...propertyValues, padding: { ...(prev.padding || { top: 0, bottom: 0, left: 0, right: 0 }), ...(propertyValues.padding || {}) } }));
+  }, [propertyValues]);
+
+  if (!contextual) {
+    if (!adapter) {
+      return (
+        <div className={className} data-cms-agent-empty="">
+          Agent adapter is required for the classic panel. Pass `contextual` for the FnF composer shell.
+        </div>
+      );
+    }
+    return (
+      <ConnectedAgentPanel
+        className={className}
+        adapter={adapter}
+        contextProvider={contextProvider}
+        conversationId={conversationId}
+        header={<div data-cms-agent-header="">AgentSam · CMS</div>}
+        empty={<div data-cms-agent-empty="">Where should we begin?</div>}
+      />
+    );
+  }
+
+  return (
+    <ContextualComposerHost
+      selection={selection}
+      layers={layers}
+      pageLabel={pageLabel}
+      propertyValues={values}
+      flashKeys={flashKeys}
+      onFlashKeys={setFlashKeys}
+      onPropertyChange={(patch) => {
+        setValues((prev) => ({ ...prev, ...patch, padding: { ...(prev.padding || { top: 0, bottom: 0, left: 0, right: 0 }), ...(patch.padding || {}) } }));
+        onPropertyChange?.(patch);
+      }}
+      onSelectLayer={(id) => onSelectLayer?.(id)}
+      onRemoveBlock={onRemoveBlock}
+      planSuggestion={async (prompt, sel) => demoPlanSuggestion(prompt, sel)}
+      runGeneration={async (suggestion, emit, signal) => demoRunGeneration(suggestion, emit, signal)}
+    >
+      <div className={className} data-cms-agent-contextual="">
+        {children || (
+          <div style={{ padding: 24, color: '#71717a' }}>
+            Select a block in the canvas. AgentSam proposes a prebuilt solution scoped to that selection.
+          </div>
+        )}
+      </div>
+    </ContextualComposerHost>
+  );
+}
+
+function demoPlanSuggestion(prompt: string, selection: ComposerSelection | null): ComposerSuggestion {
+  const label = selection?.label || 'this block';
+  const lower = prompt.toLowerCase();
+  if (lower.includes('announcement') || lower.includes('scroll')) {
+    return {
+      id: `sug_${Date.now()}`,
+      title: 'Create a scroll-controlled announcement bar',
+      rationale: `This will replace “${label}” with a prebuilt scroll-triggered announcement bar you can theme in the inspector.`,
+      selectionId: selection?.id,
+      selectionLabel: selection?.label,
+    };
+  }
+  return {
+    id: `sug_${Date.now()}`,
+    title: `Refine “${label}”`,
+    rationale: 'Apply a focused edit to the selected element using the shared block model (same fields the left inspector owns).',
+    selectionId: selection?.id,
+    selectionLabel: selection?.label,
+  };
+}
+
+async function demoRunGeneration(
+  suggestion: ComposerSuggestion,
+  emit: (partial: { phase?: GenerationPhase; label?: string; codeLines?: string[] }) => void,
+  signal: AbortSignal,
+) {
+  const phases: GenerationPhase[] = ['reading', 'drafting', 'writing-styles', 'wiring-settings'];
+  const lines: string[] = [];
+  for (const phase of phases) {
+    if (signal.aborted) throw new DOMException('Aborted', 'AbortError');
+    emit({ phase, label: phaseLabel(phase) });
+    await new Promise((r) => setTimeout(r, 280));
+    lines.push(`// ${phaseLabel(phase)}`);
+    lines.push(`apply("${suggestion.title.replace(/"/g, '\\"')}");`);
+    emit({ codeLines: [...lines] });
+  }
+  emit({ phase: 'done', label: phaseLabel('done') });
+  return {
+    confirmation: `Applied “${suggestion.title}” to ${suggestion.selectionLabel || 'the selection'}.`,
+    propertyPatch: suggestion.selectionLabel
+      ? { text: suggestion.selectionLabel }
+      : undefined,
+  };
+}