@inneranimalmedia/agentsam-sdk 2.6.3 → 2.6.5

package/apps/client-cms-editor/frontend/src/surfaces/CmsGuidedChatHero.tsx

@@ -0,0 +1,121 @@
+import React, { useCallback, useState } from 'react';
+
+export const IAM_AGENT_CHAT_NEW_THREAD = 'iam:agent-chat:new-thread';
+export const IAM_AGENT_ENSURE_PANEL = 'iam:agent:ensure-panel';
+
+export type CmsGuidedChatHeroProps = {
+  siteSlug?: string | null;
+  siteName?: string | null;
+  onSend?: (message: string) => void;
+};
+
+export function CmsGuidedChatHero({ siteSlug, siteName, onSend }: CmsGuidedChatHeroProps) {
+  const [draft, setDraft] = useState('');
+
+  const placeholder = siteSlug
+    ? `What would you like to manage on ${siteName || siteSlug} today?`
+    : 'What would you like to manage in your CMS today?';
+
+  const openAgentRail = useCallback(() => {
+    if (typeof window !== 'undefined') {
+      window.dispatchEvent(new CustomEvent(IAM_AGENT_ENSURE_PANEL));
+    }
+  }, []);
+
+  const sendToAgent = useCallback(
+    (message: string) => {
+      if (onSend) {
+        onSend(message);
+        return;
+      }
+      openAgentRail();
+      if (typeof window !== 'undefined') {
+        window.dispatchEvent(
+          new CustomEvent(IAM_AGENT_CHAT_NEW_THREAD, {
+            detail: {
+              message,
+              ensureAgentPanel: false,
+              project_slug: siteSlug || undefined,
+              surface: 'cms',
+            },
+          }),
+        );
+      }
+    },
+    [onSend, openAgentRail, siteSlug],
+  );
+
+  const onSubmit = useCallback(() => {
+    const message = draft.trim();
+    if (!message) {
+      openAgentRail();
+      return;
+    }
+    sendToAgent(message);
+    setDraft('');
+  }, [draft, openAgentRail, sendToAgent]);
+
+  return (
+    <section className="iam-cms-guided-hero" aria-label="CMS guided chat">
+      <div className="iam-cms-guided-hero__copy">
+        <p className="iam-cms-guided-hero__kicker">AgentSam · CMS</p>
+        <h1 className="iam-cms-guided-hero__title">One goal. Infinite possibilities.</h1>
+        <p className="iam-cms-guided-hero__sub">Describe your goal. AgentSam handles the rest.</p>
+      </div>
+
+      <div className="iam-cms-guided-hero__compose">
+        <div className="iam-cms-guided-hero__compose-meta">
+          <span className="iam-cms-guided-hero__agent-pill">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+              <path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3Z" />
+            </svg>
+            Agent Sam
+          </span>
+          <span className="iam-cms-guided-hero__mode-pill">Auto</span>
+        </div>
+        <div className="iam-cms-guided-hero__compose-row">
+          <input
+            className="iam-cms-guided-hero__input"
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            placeholder={placeholder}
+            aria-label={placeholder}
+            onFocus={openAgentRail}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                onSubmit();
+              }
+            }}
+          />
+          <div className="iam-cms-guided-hero__tools">
+            <button type="button" className="iam-cms-guided-hero__icon-btn" aria-label="Voice input" disabled>
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+                <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" />
+                <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+                <line x1="12" x2="12" y1="19" y2="22" />
+              </svg>
+            </button>
+            <button type="button" className="iam-cms-guided-hero__icon-btn" aria-label="Attach" disabled>
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+                <path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" />
+              </svg>
+            </button>
+            <button
+              type="button"
+              className="iam-cms-guided-hero__send"
+              aria-label="Send to Agent Sam"
+              disabled={!draft.trim()}
+              onClick={onSubmit}
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+                <line x1="12" x2="12" y1="19" y2="5" />
+                <polyline points="5 12 12 5 19 12" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/apps/client-cms-editor/frontend/src/surfaces/CmsHubPage.tsx

@@ -0,0 +1,132 @@
+import React, { useMemo } from 'react';
+import type { CmsDashboardSetupMode, CmsWorkspaceContext, CmsWorkspaceSite } from './types';
+import { CmsDashboard } from './CmsDashboard';
+import { CmsGuidedChatHero } from './CmsGuidedChatHero';
+import { CmsSiteSwitcher } from './CmsSiteSwitcher';
+import { buildCmsHubPath } from '@inneranimalmedia/agentsam-cms-backend/routing';
+import '../styles/cmsShell.css';
+
+export type CmsHubPageProps = {
+  context?: CmsWorkspaceContext | null;
+  sites: CmsWorkspaceSite[];
+  activeSiteSlug: string | null;
+  loading?: boolean;
+  error?: string | null;
+  onRetry?: () => void;
+  onSelectSite: (slug: string, path: string) => void | Promise<void>;
+  onNavigate: (path: string) => void;
+  onOpenDeployWizard?: () => void;
+  onSendChatMessage?: (message: string) => void;
+};
+
+export function CmsHubPage({
+  context = null,
+  sites = [],
+  activeSiteSlug,
+  loading = false,
+  error = null,
+  onRetry,
+  onSelectSite,
+  onNavigate,
+  onOpenDeployWizard,
+  onSendChatMessage,
+}: CmsHubPageProps) {
+  const resolvedSiteSlug = useMemo(() => {
+    if (activeSiteSlug) return activeSiteSlug;
+    const stored = sites.find((s) => s.slug === context?.project_slug);
+    if (context?.project_slug && stored) return context.project_slug;
+    if (sites.length === 1) return sites[0].slug;
+    if (sites.length > 0) return sites[0].slug;
+    return 'agentsam-sdk';
+  }, [activeSiteSlug, sites, context?.project_slug]);
+
+  const setupMode: CmsDashboardSetupMode = useMemo(() => {
+    if (loading) return 'loading';
+    if (sites.length === 0) return 'deploy';
+    if (resolvedSiteSlug) return 'active';
+    return 'pick-site';
+  }, [loading, sites.length, resolvedSiteSlug]);
+
+  const activeSite = useMemo(() => {
+    const rows = Array.isArray(sites) ? sites : [];
+    return rows.find((s) => s.slug === resolvedSiteSlug) || null;
+  }, [sites, resolvedSiteSlug]);
+
+  return (
+    <div className="iam-cms-shell iam-cms-hub-page">
+      <div className="iam-cms-hub-page__scroll">
+        <CmsGuidedChatHero
+          siteSlug={resolvedSiteSlug}
+          siteName={activeSite?.name || context?.project_name || resolvedSiteSlug}
+          onSend={onSendChatMessage}
+        />
+
+        <div className="iam-cms-hub-page__body">
+          <div className="iam-cms-hub-page__toolbar iam-cms-hub-page__toolbar--compact">
+            <CmsSiteSwitcher
+              sites={sites}
+              activeSlug={resolvedSiteSlug}
+              size="sm"
+              disabled={loading}
+              onSelect={(slug) => {
+                void onSelectSite(slug, buildCmsHubPath(slug));
+              }}
+              onNewSite={onOpenDeployWizard}
+            />
+            <div className="iam-cms-shell__actions">
+              {onRetry && (
+                <button
+                  type="button"
+                  className="iam-cms-shell__nav-link"
+                  onClick={() => onRetry()}
+                  disabled={loading}
+                >
+                  <svg
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    className={loading ? 'animate-spin' : ''}
+                    aria-hidden
+                  >
+                    <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+                    <path d="M3 3v5h5" />
+                    <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" />
+                    <path d="M16 21h5v-5" />
+                  </svg>
+                  Refresh
+                </button>
+              )}
+            </div>
+          </div>
+
+          {error ? (
+            <div className="iam-cms-card iam-cms-card--error" role="alert">
+              <p className="iam-cms-card__error-text">{error}</p>
+              {onRetry && (
+                <button type="button" className="iam-cms-btn iam-cms-btn--secondary" onClick={() => onRetry()}>
+                  Try again
+                </button>
+              )}
+            </div>
+          ) : (
+            <CmsDashboard
+              siteSlug={resolvedSiteSlug}
+              setupMode={setupMode}
+              site={activeSite}
+              sites={sites}
+              context={context}
+              onNavigate={onNavigate}
+              onSelectSite={onSelectSite}
+              onOpenDeployWizard={onOpenDeployWizard}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/apps/client-cms-editor/frontend/src/surfaces/CmsSiteSwitcher.tsx

@@ -0,0 +1,176 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import type { CmsWorkspaceSite } from './types';
+
+export type CmsSiteSwitcherProps = {
+  sites: CmsWorkspaceSite[];
+  activeSlug?: string | null;
+  onSelect: (slug: string) => void | Promise<void>;
+  onNewSite?: () => void;
+  disabled?: boolean;
+  size?: 'sm' | 'md';
+  className?: string;
+};
+
+function sortSites(sites: CmsWorkspaceSite[]): CmsWorkspaceSite[] {
+  return [...sites].sort((a, b) => {
+    const priA = Number(a.hub_priority) || 0;
+    const priB = Number(b.hub_priority) || 0;
+    if (priA !== priB) return priB - priA;
+    const fa = a.is_featured ? 1 : 0;
+    const fb = b.is_featured ? 1 : 0;
+    if (fa !== fb) return fb - fa;
+    return String(a.name || a.slug).localeCompare(String(b.name || b.slug));
+  });
+}
+
+function siteLabel(site: CmsWorkspaceSite): string {
+  return (site.name || site.slug || 'Site').trim();
+}
+
+function siteHint(site: CmsWorkspaceSite): string {
+  const domain = site.domain?.trim();
+  if (domain) return domain.replace(/^https?:\/\//, '').replace(/\/$/, '');
+  return site.slug;
+}
+
+export function CmsSiteSwitcher({
+  sites,
+  activeSlug,
+  onSelect,
+  onNewSite,
+  disabled = false,
+  size = 'md',
+  className = '',
+}: CmsSiteSwitcherProps) {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const rows = useMemo(() => sortSites(sites), [sites]);
+  const active = rows.find((s) => s.slug === activeSlug) || null;
+
+  useEffect(() => {
+    if (!open) return;
+    const onDoc = (e: MouseEvent) => {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', onDoc);
+    return () => document.removeEventListener('mousedown', onDoc);
+  }, [open]);
+
+  const onPick = (slug: string) => {
+    setOpen(false);
+    void onSelect(slug);
+  };
+
+  return (
+    <div
+      ref={rootRef}
+      className={`iam-cms-site-switcher iam-cms-site-switcher--${size} ${className}`}
+      data-open={open ? 'true' : undefined}
+    >
+      <button
+        type="button"
+        className="iam-cms-site-switcher__trigger"
+        disabled={disabled || rows.length === 0}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        onClick={() => setOpen((v) => !v)}
+      >
+        <div className="iam-cms-site-switcher__current">
+          <span className="iam-cms-site-switcher__title">
+            {active ? siteLabel(active) : rows.length === 0 ? 'No sites' : 'Select site'}
+          </span>
+          {size === 'md' && active && (
+            <span className="iam-cms-site-switcher__meta">{siteHint(active)}</span>
+          )}
+        </div>
+        <svg
+          className="iam-cms-site-switcher__chevron"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden
+        >
+          <path d="m7 15 5 5 5-5" />
+          <path d="m7 9 5-5 5 5" />
+        </svg>
+      </button>
+
+      {open && (
+        <div className="iam-cms-site-switcher__menu" role="listbox">
+          <div className="iam-cms-site-switcher__list">
+            {rows.map((s) => {
+              const isSelected = s.slug === activeSlug;
+              return (
+                <button
+                  key={s.slug}
+                  type="button"
+                  role="option"
+                  aria-selected={isSelected}
+                  className={`iam-cms-site-switcher__item ${isSelected ? 'iam-cms-site-switcher__item--active' : ''}`}
+                  onClick={() => onPick(s.slug)}
+                >
+                  <div className="iam-cms-site-switcher__item-main">
+                    <span className="iam-cms-site-switcher__item-title">{siteLabel(s)}</span>
+                    <span className="iam-cms-site-switcher__item-hint">{siteHint(s)}</span>
+                  </div>
+                  {isSelected && (
+                    <svg
+                      className="iam-cms-site-switcher__check"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      aria-hidden
+                    >
+                      <polyline points="20 6 9 17 4 12" />
+                    </svg>
+                  )}
+                </button>
+              );
+            })}
+          </div>
+
+          {onNewSite && (
+            <div className="iam-cms-site-switcher__footer">
+              <button
+                type="button"
+                className="iam-cms-site-switcher__action"
+                onClick={() => {
+                  setOpen(false);
+                  onNewSite();
+                }}
+              >
+                <svg
+                  width="14"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden
+                >
+                  <line x1="12" y1="5" x2="12" y2="19" />
+                  <line x1="5" y1="12" x2="19" y2="12" />
+                </svg>
+                Deploy new site
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/apps/client-cms-editor/frontend/src/surfaces/index.ts

@@ -0,0 +1,5 @@
+export * from './types';
+export * from './CmsGuidedChatHero';
+export * from './CmsSiteSwitcher';
+export * from './CmsDashboard';
+export * from './CmsHubPage';

package/apps/client-cms-editor/frontend/src/surfaces/types.ts

@@ -0,0 +1,48 @@
+export type CmsWorkspaceSite = {
+  slug: string;
+  name?: string;
+  domain?: string;
+  hub_priority?: number;
+  is_featured?: boolean;
+  status?: string;
+  theme?: Record<string, unknown>;
+  project_id?: string;
+  storefront_url?: string;
+};
+
+export type CmsWorkspaceContext = {
+  workspace_id?: string;
+  workspace_slug?: string;
+  project_id?: string;
+  project_slug?: string;
+  project_name?: string;
+  ui_label?: string;
+  is_operator_hub?: boolean;
+};
+
+export type CmsDashboardSetupMode = 'loading' | 'active' | 'deploy' | 'pick-site';
+
+export type CmsActivityRow = {
+  id?: string;
+  action?: string;
+  resource_type?: string;
+  resource_id?: string;
+  created_at?: number | string;
+  details?: string | Record<string, unknown>;
+};
+
+export type CmsModuleDef = {
+  id: string;
+  title: string;
+  desc: string;
+  sub?: string;
+  path?: string;
+  action?: 'structure' | 'import' | string;
+  cta: string;
+};
+
+export type CmsQuickAction = {
+  label: string;
+  path?: string;
+  action?: 'import' | string;
+};

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

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "allowImportingTsExtensions": true,
+    "types": [
+      "vite/client"
+    ],
+    "preserveSymlinks": true
+  },
+  "include": [
+    "src"
+  ]
+}

package/apps/client-cms-editor/frontend/vite.config.ts

@@ -0,0 +1,13 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    preserveSymlinks: true,
+  },
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+  },
+});