@inneranimalmedia/agentsam-sdk 1.5.1 → 1.7.0

package/src/lib/scaffold/wizards/cms.js

@@ -0,0 +1,175 @@
+/**
+ * CMS Site Scaffold Wizard
+ *
+ * Guides the user step-by-step through scaffolding a
+ * Cloudflare Worker + D1 + R2 CMS site with:
+ *   - global nav
+ *   - reusable page templates
+ *   - optional blog, contact, about pages
+ *   - wrangler.toml ready to deploy
+ */
+
+import {
+  text,
+  select,
+  multiselect,
+  confirm,
+  spinner,
+  note,
+  isCancel,
+  cancel,
+} from '@clack/prompts';
+import pc from 'picocolors';
+import { writeFileTree } from '../writer.js';
+import { cmsTemplates } from '../templates/cms/index.js';
+
+export async function runCmsWizard() {
+  note('A Cloudflare Worker + D1 + R2 CMS site with reusable page templates.', 'CMS Site');
+
+  // ── Step 1: Project name ──────────────────────────────────────────────────
+  const projectName = await text({
+    message: 'Project name?',
+    placeholder: 'my-client-site',
+    validate(val) {
+      if (!val || val.trim().length === 0) return 'Required.';
+      if (!/^[a-z0-9-]+$/.test(val.trim())) return 'Lowercase letters, numbers, and hyphens only.';
+    },
+  });
+  if (isCancel(projectName)) { cancel('Cancelled.'); process.exit(0); }
+
+  // ── Step 2: Site title ────────────────────────────────────────────────────
+  const siteTitle = await text({
+    message: 'Site title?',
+    placeholder: 'Acme Corp',
+    validate(val) {
+      if (!val || val.trim().length === 0) return 'Required.';
+    },
+  });
+  if (isCancel(siteTitle)) { cancel('Cancelled.'); process.exit(0); }
+
+  // ── Step 3: Nav style ─────────────────────────────────────────────────────
+  const navStyle = await select({
+    message: 'Global nav style?',
+    options: [
+      { value: 'topbar', label: 'Top bar', hint: 'Horizontal links, fixed to top' },
+      { value: 'sidebar', label: 'Sidebar', hint: 'Left rail, collapsible on mobile' },
+      { value: 'minimal', label: 'Minimal', hint: 'Logo + hamburger only' },
+    ],
+  });
+  if (isCancel(navStyle)) { cancel('Cancelled.'); process.exit(0); }
+
+  // ── Step 4: Pages to include ──────────────────────────────────────────────
+  const pages = await multiselect({
+    message: 'Which pages do you want? (space to toggle, enter to confirm)',
+    options: [
+      { value: 'home',    label: 'Home',    hint: 'Landing / hero section' },
+      { value: 'about',   label: 'About',   hint: 'About us / team' },
+      { value: 'services', label: 'Services', hint: 'Services or products list' },
+      { value: 'blog',    label: 'Blog',    hint: 'D1-backed post list + detail' },
+      { value: 'contact', label: 'Contact', hint: 'Contact form → Resend email' },
+      { value: 'privacy', label: 'Privacy', hint: 'Privacy policy (static)' },
+    ],
+    required: true,
+  });
+  if (isCancel(pages)) { cancel('Cancelled.'); process.exit(0); }
+
+  // ── Step 5: Page template style ───────────────────────────────────────────
+  const templateStyle = await select({
+    message: 'Page template style?',
+    options: [
+      {
+        value: 'fragment',
+        label: 'R2 HTML fragments',
+        hint: 'Each section is a .html fragment stored in R2, assembled by the Worker',
+      },
+      {
+        value: 'json',
+        label: 'D1-driven JSON blocks',
+        hint: 'Page content stored in D1 as JSON blocks, rendered server-side',
+      },
+      {
+        value: 'static',
+        label: 'Static HTML',
+        hint: 'Pre-rendered HTML files, no D1 dependency',
+      },
+    ],
+  });
+  if (isCancel(templateStyle)) { cancel('Cancelled.'); process.exit(0); }
+
+  // ── Step 6: Contact form destination (only if contact page selected) ──────
+  let contactEmail = null;
+  if (pages.includes('contact')) {
+    contactEmail = await text({
+      message: 'Where should contact form submissions go? (email)',
+      placeholder: 'hello@example.com',
+      validate(val) {
+        if (!val || val.trim().length === 0) return 'Required for contact page.';
+        if (!val.includes('@')) return 'Enter a valid email.';
+      },
+    });
+    if (isCancel(contactEmail)) { cancel('Cancelled.'); process.exit(0); }
+  }
+
+  // ── Step 7: Cloudflare account details ────────────────────────────────────
+  const cfAccountId = await text({
+    message: 'Cloudflare account ID? (from dash.cloudflare.com → right sidebar)',
+    placeholder: 'abc123...',
+    validate(val) {
+      if (!val || val.trim().length === 0) return 'Required for wrangler.toml.';
+    },
+  });
+  if (isCancel(cfAccountId)) { cancel('Cancelled.'); process.exit(0); }
+
+  // ── Step 8: Confirm before writing ───────────────────────────────────────
+  const summary = [
+    `  Project:   ${pc.cyan(projectName)}`,
+    `  Title:     ${pc.cyan(siteTitle)}`,
+    `  Nav:       ${pc.cyan(navStyle)}`,
+    `  Pages:     ${pc.cyan(pages.join(', '))}`,
+    `  Template:  ${pc.cyan(templateStyle)}`,
+    contactEmail ? `  Contact:   ${pc.cyan(contactEmail)}` : null,
+  ].filter(Boolean).join('\n');
+
+  note(summary, 'Your scaffold');
+
+  const confirmed = await confirm({ message: 'Write files now?' });
+  if (isCancel(confirmed) || !confirmed) { cancel('Cancelled.'); process.exit(0); }
+
+  // ── Write files ───────────────────────────────────────────────────────────
+  const s = spinner();
+  s.start('Generating files...');
+
+  const config = {
+    projectName: projectName.trim(),
+    siteTitle: siteTitle.trim(),
+    navStyle,
+    pages,
+    templateStyle,
+    contactEmail: contactEmail?.trim() ?? null,
+    cfAccountId: cfAccountId.trim(),
+  };
+
+  const fileTree = cmsTemplates(config);
+
+  await writeFileTree(`./${config.projectName}`, fileTree);
+
+  s.stop(pc.green(`Files written to ./${config.projectName}/`));
+
+  note(
+    [
+      `cd ${config.projectName}`,
+      `npm install`,
+      ``,
+      `# Create your D1 database:`,
+      `npx wrangler d1 create ${config.projectName}`,
+      `# Copy the database_id into wrangler.toml [[d1_databases]] binding`,
+      ``,
+      `# Run the D1 migration:`,
+      `npx wrangler d1 execute ${config.projectName} --file=migrations/001_init.sql --remote`,
+      ``,
+      `# Deploy:`,
+      `npx wrangler deploy`,
+    ].join('\n'),
+    'Next steps'
+  );
+}

package/src/lib/scaffold/wizards/worker-api.js

@@ -0,0 +1,76 @@
+/**
+ * Worker API Scaffold Wizard
+ * Bare Cloudflare Worker with typed route handlers and D1 binding.
+ */
+
+import {
+  text,
+  multiselect,
+  confirm,
+  spinner,
+  note,
+  isCancel,
+  cancel,
+} from '@clack/prompts';
+import pc from 'picocolors';
+import { writeFileTree } from '../writer.js';
+import { workerApiTemplates } from '../templates/worker-api/index.js';
+
+export async function runWorkerApiWizard() {
+  note('A typed Cloudflare Worker with route handlers, D1 binding, and CORS ready.', 'Worker API');
+
+  const projectName = await text({
+    message: 'Project name?',
+    placeholder: 'my-api-worker',
+    validate(val) {
+      if (!val || val.trim().length === 0) return 'Required.';
+      if (!/^[a-z0-9-]+$/.test(val.trim())) return 'Lowercase letters, numbers, and hyphens only.';
+    },
+  });
+  if (isCancel(projectName)) { cancel('Cancelled.'); process.exit(0); }
+
+  const routes = await multiselect({
+    message: 'Which route groups do you want?',
+    options: [
+      { value: 'health',  label: 'GET /health',         hint: 'Liveness check' },
+      { value: 'auth',    label: 'POST /auth/*',         hint: 'Token issue + verify' },
+      { value: 'users',   label: 'CRUD /users',          hint: 'D1-backed user records' },
+      { value: 'content', label: 'CRUD /content',        hint: 'Generic content/pages' },
+      { value: 'webhook', label: 'POST /webhooks/:type', hint: 'Inbound webhook receiver' },
+    ],
+    required: true,
+  });
+  if (isCancel(routes)) { cancel('Cancelled.'); process.exit(0); }
+
+  const cfAccountId = await text({
+    message: 'Cloudflare account ID?',
+    placeholder: 'abc123...',
+    validate(val) {
+      if (!val || val.trim().length === 0) return 'Required.';
+    },
+  });
+  if (isCancel(cfAccountId)) { cancel('Cancelled.'); process.exit(0); }
+
+  const confirmed = await confirm({ message: `Write files to ./${projectName.trim()}/?` });
+  if (isCancel(confirmed) || !confirmed) { cancel('Cancelled.'); process.exit(0); }
+
+  const s = spinner();
+  s.start('Generating files...');
+
+  const config = { projectName: projectName.trim(), routes, cfAccountId: cfAccountId.trim() };
+  const fileTree = workerApiTemplates(config);
+  await writeFileTree(`./${config.projectName}`, fileTree);
+
+  s.stop(pc.green(`Files written to ./${config.projectName}/`));
+
+  note(
+    [
+      `cd ${config.projectName}`,
+      `npm install`,
+      `npx wrangler d1 create ${config.projectName}`,
+      `npx wrangler d1 execute ${config.projectName} --file=migrations/001_init.sql --remote`,
+      `npx wrangler deploy`,
+    ].join('\n'),
+    'Next steps'
+  );
+}

package/src/lib/scaffold/writer.js

@@ -0,0 +1,22 @@
+/**
+ * Writes a nested file-tree object to disk.
+ *
+ * fileTree shape:
+ * {
+ *   'src/index.js': '// content',
+ *   'wrangler.toml': '...',
+ *   'migrations/001_init.sql': '...',
+ * }
+ */
+
+import fs from 'fs/promises';
+import path from 'path';
+
+export async function writeFileTree(baseDir, fileTree) {
+  for (const [relativePath, content] of Object.entries(fileTree)) {
+    const fullPath = path.join(baseDir, relativePath);
+    const dir = path.dirname(fullPath);
+    await fs.mkdir(dir, { recursive: true });
+    await fs.writeFile(fullPath, content, 'utf8');
+  }
+}

package/src/ui/splash-xterm.js

@@ -0,0 +1,290 @@
+/**
+ * @file src/ui/splash-xterm.js
+ * @description In-app splash renderer for xterm.js panels.
+ *
+ * Same choreography as splash.js (CLI) but writes to an xterm Terminal
+ * instance instead of process.stdout. Used by XTermShell.tsx.
+ *
+ * Usage in XTermShell.tsx:
+ *   import { runXtermSplash } from '@inneranimalmedia/agentsam-sdk/ui/splash-xterm';
+ *   import { getXtermOptions } from '@inneranimalmedia/agentsam-sdk/ui/theme';
+ *
+ *   const targetType = connection?.target_type ?? 'platform_vm';
+ *   const term = new Terminal({
+ *     ...getXtermOptions(targetType),
+ *     cols: dimensions.cols,
+ *     rows: dimensions.rows,
+ *   });
+ *
+ *   // After term.open(containerRef.current):
+ *   const stopFlicker = await runXtermSplash(term, {
+ *     apiBase: 'https://inneranimalmedia.com',
+ *     workspaceId: activeWorkspace?.id,
+ *     authToken: session?.token,
+ *     targetType,
+ *     skipArt: !isFirstSession,
+ *   });
+ *
+ *   // On cleanup:
+ *   return () => { stopFlicker(); term.dispose(); };
+ */
+
+import { PALETTE, getLaneTheme } from './theme.js';
+import { probeAll } from './splash.js';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// xterm write helpers
+// ─────────────────────────────────────────────────────────────────────────────
+
+const ESC = '\x1b';
+const CSI = `${ESC}[`;
+
+const X = {
+  reset:     `${CSI}0m`,
+  bold:      `${CSI}1m`,
+  hide:      `${CSI}?25l`,
+  show:      `${CSI}?25h`,
+  clearLine: `${CSI}2K\r`,
+  up:        (n = 1) => `${CSI}${n}A`,
+  fg: (hex) => {
+    const h = hex.replace('#', '');
+    const r = parseInt(h.slice(0, 2), 16);
+    const g = parseInt(h.slice(2, 4), 16);
+    const b = parseInt(h.slice(4, 6), 16);
+    return `${CSI}38;2;${r};${g};${b}m`;
+  },
+};
+
+const sleep = (ms) => new Promise(r => setTimeout(r, ms));
+
+// ─────────────────────────────────────────────────────────────────────────────
+// COLOR BUILDER (per-lane)
+// ─────────────────────────────────────────────────────────────────────────────
+
+function buildColors() {
+  const R = X.reset;
+  const B = X.bold;
+  return {
+    R, B,
+    TEAL:   X.fg(PALETTE.teal300),
+    AMBER:  X.fg(PALETTE.amber300),
+    STONE:  X.fg('#3a3530'),
+    STONE2: X.fg('#2a2520'),
+    VINE:   X.fg('#1a4a2a'),
+    VINE2:  X.fg('#0f6b3a'),
+    FIRE1:  X.fg('#f97316'),
+    FIRE2:  X.fg('#ef4444'),
+    FIREY:  X.fg('#fef08a'),
+    GRILL:  X.fg('#1e2830'),
+    GRILL2: X.fg('#2d3d4a'),
+    PELT:   X.fg('#8b6f5a'),
+    DIM:    X.fg('#444444'),
+    GHOST:  X.fg('#888888'),
+    WHT:    X.fg('#e2e8f0'),
+  };
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// SCENE DATA
+// ─────────────────────────────────────────────────────────────────────────────
+
+function gorillaRows(C) {
+  const { R, GRILL, GRILL2, PELT, DIM } = C;
+  return [
+    `            ${DIM}░░▒${R}${GRILL2}▓▓▓▓▓▓▓▓${R}${DIM}▒░░${R}`,
+    `          ${DIM}░${R}${GRILL2}▒▓▓${R}${GRILL}█████████████${R}${GRILL2}▓▓▒${R}${DIM}░${R}`,
+    `         ${GRILL2}▒▓${R}${GRILL}███${R}${GRILL2}▒▒${R}${GRILL}████████${R}${GRILL2}▒▒${R}${GRILL}███${R}${GRILL2}▓▒${R}`,
+    `         ${GRILL2}▓${R}${GRILL}████${R}  ${DIM}▒▒▒▒▒▒▒▒${R}  ${GRILL}████${R}${GRILL2}▓${R}`,
+    `        ${GRILL}▓███${R}${GRILL2}▒${R} ${PELT}██${R}${DIM}▒${R}${PELT}████${R}${DIM}▒${R}${PELT}██${R} ${GRILL2}▒${R}${GRILL}███▓${R}`,
+    `        ${GRILL}████${R}  ${PELT}███${R}${DIM}▒▒▒▒${R}${PELT}███${R}  ${GRILL}████${R}`,
+    `        ${GRILL}████${R}${GRILL2}▒${R}  ${PELT}██████████${R}  ${GRILL2}▒${R}${GRILL}████${R}`,
+    `        ${GRILL}████${R}   ${DIM}▒▒▒▒▒▒▒▒▒▒${R}   ${GRILL}████${R}`,
+    `       ${GRILL2}▒${R}${GRILL}████${R}${GRILL2}▓▓▓${R}${GRILL}████████████${R}${GRILL2}▓▓▓${R}${GRILL}████${R}${GRILL2}▒${R}`,
+    `       ${GRILL}██████████████████████████${R}`,
+    `     ${DIM}▒▒${R}${GRILL}████████${R}${GRILL2}▒▒▒▒▒▒▒▒▒▒▒▒${R}${GRILL}████████${R}${DIM}▒▒${R}`,
+    `    ${PELT}▓${R}${GRILL}██████████${R}${DIM}░░░░░░░░░░░░░░${R}${GRILL}██████████${R}${PELT}▓${R}`,
+  ];
+}
+
+function titleBoxLines(C) {
+  const { R, B, TEAL, AMBER } = C;
+  const wide = 26;
+  const h = `${TEAL}═${R}`;
+  return [
+    `${TEAL}╔${R}${h.repeat(wide)}${TEAL}╗${R}`,
+    `${TEAL}║${R}  ${B}${AMBER}INNERANIMAL MEDIA${R}  ${TEAL}║${R}`,
+    `${TEAL}║${R}  ${TEAL}inneranimalmedia.com${R}     ${TEAL}║${R}`,
+    `${TEAL}╚${R}${h.repeat(wide)}${TEAL}╝${R}`,
+  ];
+}
+
+function ladderRows(C) {
+  const { R, TEAL } = C;
+  return [
+    `    ${TEAL}║${R}   ${TEAL}║${R}`,
+    `    ${TEAL}╠═══╣${R}`,
+    `    ${TEAL}║${R}   ${TEAL}║${R}`,
+    `    ${TEAL}╠═══╣${R}`,
+    `    ${TEAL}║${R}   ${TEAL}║${R}`,
+    `    ${TEAL}╠═══╣${R}`,
+    `    ${TEAL}║${R}   ${TEAL}║${R}`,
+  ];
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// HUD RENDER
+// ─────────────────────────────────────────────────────────────────────────────
+
+const HUD_ITEMS = [
+  { key: 'workspace', icon: '⊞', label: 'Workspace' },
+  { key: 'runtime',   icon: '▣', label: 'Runtime'   },
+  { key: 'tunnel',    icon: '⟁', label: 'Tunnel'    },
+  { key: 'agent',     icon: '⬡', label: 'Agent'     },
+];
+
+const READY_LABELS = {
+  workspace: 'active',
+  runtime:   'ready',
+  tunnel:    'connected',
+  agent:     'online',
+};
+
+function renderHUDLine(states, C) {
+  const { R, B, TEAL, GHOST, WHT, DIM } = C;
+  return HUD_ITEMS.map((item, i) => {
+    const state = states[item.key] || 'checking';
+    let stateStr;
+    if (state === 'ready') {
+      stateStr = `${TEAL}● ${READY_LABELS[item.key]}${R}`;
+    } else if (state === 'checking') {
+      stateStr = `${GHOST}◌ checking...${R}`;
+    } else if (state === 'error') {
+      stateStr = `${X.fg('#ef4444')}✗ error${R}`;
+    } else {
+      stateStr = `${X.fg('#666666')}○ offline${R}`;
+    }
+    const div = i < HUD_ITEMS.length - 1 ? `  ${DIM}│${R}  ` : '';
+    return `${GHOST}${item.icon}${R}  ${B}${WHT}${item.label}${R}  ${stateStr}${div}`;
+  }).join('');
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// MAIN XTERM SPLASH
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * @param {import('@xterm/xterm').Terminal} term
+ * @param {object} opts
+ * @param {string}  opts.apiBase
+ * @param {string}  opts.workspaceId
+ * @param {string}  opts.authToken
+ * @param {'user_hosted_tunnel'|'platform_vm'|'sandbox'} opts.targetType
+ * @param {boolean} opts.skipArt
+ * @returns {Promise<() => void>} stopFlicker — call on unmount
+ */
+export async function runXtermSplash(term, {
+  apiBase = '',
+  workspaceId = '',
+  authToken = '',
+  targetType = 'platform_vm',
+  skipArt = false,
+} = {}) {
+
+  const lane = getLaneTheme(targetType);
+  const C = buildColors();
+  const { R, B, TEAL, AMBER, GHOST, WHT, DIM, STONE, STONE2, FIRE1, FIRE2 } = C;
+  const PRIMARY = X.fg(lane.colors.primary);
+  const W = term.cols || 80;
+
+  const w  = (s) => term.write(s);
+  const wl = (s = '') => term.write(s + '\r\n');
+
+  w(X.hide);
+  w(`${ESC}c`); // full reset
+  await sleep(60);
+
+  // cd verb flash
+  w(`  ${GHOST}$ ${R}${AMBER}cd ~/inneranimalmedia${R}`);
+  await sleep(340);
+  w(`\r${X.clearLine}`);
+  await sleep(60);
+
+  if (!skipArt) {
+    wl();
+
+    const rows  = gorillaRows(C);
+    const title = titleBoxLines(C);
+    const TITLE_START = 3;
+
+    for (let i = 0; i < rows.length; i++) {
+      const titleIdx = i - TITLE_START;
+      const titlePart = (titleIdx >= 0 && titleIdx < title.length)
+        ? '  ' + title[titleIdx]
+        : '';
+      wl(`  ${rows[i]}${titlePart}`);
+      await sleep(24);
+    }
+
+    wl();
+
+    // Torches
+    w(`  ${FIRE1}  ▓▓▓${R}`);
+    await sleep(90);
+    wl(`${' '.repeat(Math.max(0, W - 14))}${FIRE2}▓▓▓${R}`);
+    await sleep(30);
+
+    // Ledge
+    w('  ');
+    for (let i = 0; i < W - 4; i++) {
+      w((i % 2 === 0) ? `${STONE}█${R}` : `${STONE2}▓${R}`);
+      await sleep(4);
+    }
+    wl();
+    wl(`  ${DIM}${'╌'.repeat(W - 4)}${R}`);
+    await sleep(50);
+
+    // Ladder
+    for (const rung of ladderRows(C)) {
+      wl(rung);
+      await sleep(30);
+    }
+  }
+
+  wl();
+
+  // Start prompt
+  await sleep(skipArt ? 0 : 70);
+  wl(`        ${B}${AMBER}Start ${PRIMARY}▸${R}`);
+  await sleep(40);
+  wl(`        ${GHOST}Type a command to begin.${R}`);
+  await sleep(skipArt ? 0 : 70);
+  wl();
+
+  // HUD — fire probes in parallel
+  const probePromise = probeAll({ apiBase, workspaceId, authToken });
+  const initStates = { workspace: 'checking', runtime: 'checking', tunnel: 'checking', agent: 'checking' };
+
+  wl(`  ${DIM}${'─'.repeat(W - 4)}${R}`);
+  wl();
+  w(`  ${renderHUDLine(initStates, C)}`);
+  wl(); wl();
+  wl(`  ${DIM}${'─'.repeat(W - 4)}${R}`);
+  wl();
+
+  // Update HUD in-place when probes resolve
+  const LINES_BELOW = 4;
+  probePromise.then(resolved => {
+    w(X.up(LINES_BELOW));
+    w(`\r${X.clearLine}`);
+    w(`  ${renderHUDLine(resolved, C)}`);
+    w('\r\n'.repeat(LINES_BELOW));
+    w(X.show);
+    w(`  ${PRIMARY}>${R}  `);
+  });
+
+  // Torch flicker is handled via CSS animation on the panel wrapper
+  // (terminal-lanes.css) — xterm.js decoration API in Phase 2.
+  return () => {};
+}
+
+export default { runXtermSplash };