@makemore/agent-frontend 2.8.3 → 2.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@makemore/agent-frontend",
-  "version": "2.8.3",
+  "version": "2.9.0",
   "description": "A lightweight chat widget for AI agents. Use as an embeddable script tag or import directly into React/Preact projects.",
   "type": "module",
   "main": "dist/chat-widget.cjs.js",
@@ -30,7 +30,7 @@
     "build:dev": "node build.js --dev",
     "build:embed": "esbuild src/index.js --bundle --minify --format=iife --global-name=ChatWidgetModule --outfile=dist/chat-widget.js",
     "watch": "node watch.js",
-    "copy": "cp -f dist/chat-widget.js ../django_agent_studio/static/agent-frontend/chat-widget.js 2>/dev/null || true && echo 'Copied to django_agent_studio'",
+    "copy": "mkdir -p ../django_agent_studio/static/agent-frontend && cp -f dist/chat-widget.js dist/chat-widget.css dist/chat-widget-markdown.js ../django_agent_studio/static/agent-frontend/ 2>/dev/null || true && echo 'Copied to django_agent_studio'",
     "prepublishOnly": "npm run build",
     "serve": "python -m http.server 8080"
   },

package/src/components/ChatWidget.js

@@ -10,9 +10,11 @@ import { InputForm } from './InputForm.js';
 import { Sidebar } from './Sidebar.js';
 import { ModelSelector } from './ModelSelector.js';
 import { TaskList } from './TaskList.js';
+import { DevToolbar } from './DevToolbar.js';
 import { useChat } from '../hooks/useChat.js';
 import { useModels } from '../hooks/useModels.js';
 import { useTasks } from '../hooks/useTasks.js';
+import { useSystems } from '../hooks/useSystems.js';
 import { createApiClient } from '../utils/api.js';
 import { createStorage, getContrastingTextColor } from '../utils/helpers.js';
 
@@ -55,8 +57,21 @@ export function ChatWidget({ config, onStateChange, markdownParser, apiRef }) {
     return createApiClient(config, getState, setState);
   }, [config, authToken, storage]);
 
-  // Chat hook
-  const chat = useChat(config, api, storage);
+  // Systems/agents discovery hook (for dev tools)
+  const systemsHook = useSystems(config, api, storage);
+
+  // Create a config override with the effective agent key from dev tools
+  const effectiveConfig = useMemo(() => {
+    if (!config.showDevTools) return config;
+    const effectiveKey = systemsHook.getEffectiveAgentKey();
+    if (effectiveKey && effectiveKey !== config.agentKey) {
+      return { ...config, agentKey: effectiveKey };
+    }
+    return config;
+  }, [config, systemsHook.getEffectiveAgentKey]);
+
+  // Chat hook — uses effective config so agentKey is dynamic
+  const chat = useChat(effectiveConfig, api, storage);
 
   // Models hook
   const models = useModels(config, api, storage);
@@ -113,12 +128,13 @@ export function ChatWidget({ config, onStateChange, markdownParser, apiRef }) {
   // Load conversations for sidebar
   const loadConversations = useCallback(async () => {
     if (!config.showConversationSidebar) return;
-    
+
     setConversationsLoading(true);
     try {
-      const url = `${config.backendUrl}${config.apiPaths.conversations}?agent_key=${encodeURIComponent(config.agentKey)}`;
+      const agentKey = effectiveConfig.agentKey;
+      const url = `${config.backendUrl}${config.apiPaths.conversations}?agent_key=${encodeURIComponent(agentKey)}`;
       const response = await fetch(url, api.getFetchOptions({ method: 'GET' }));
-      
+
       if (response.ok) {
         const data = await response.json();
         setConversations(data.results || data);
@@ -129,7 +145,7 @@ export function ChatWidget({ config, onStateChange, markdownParser, apiRef }) {
     } finally {
       setConversationsLoading(false);
     }
-  }, [config, api]);
+  }, [config, effectiveConfig, api]);
 
   // Handlers
   const handleToggleSidebar = useCallback(() => {
@@ -243,6 +259,22 @@ export function ChatWidget({ config, onStateChange, markdownParser, apiRef }) {
         onToggleSidebar=${handleToggleSidebar}
       />
 
+      ${config.showDevTools && html`
+        <${DevToolbar}
+          systems=${systemsHook.systems}
+          agents=${systemsHook.agents}
+          selectedSystem=${systemsHook.selectedSystem}
+          selectedAgent=${systemsHook.selectedAgent}
+          selectedSystemVersion=${systemsHook.selectedSystemVersion}
+          selectedAgentVersion=${systemsHook.selectedAgentVersion}
+          onSelectSystem=${systemsHook.selectSystem}
+          onSelectAgent=${systemsHook.selectAgent}
+          onSelectSystemVersion=${systemsHook.selectSystemVersion}
+          onSelectAgentVersion=${systemsHook.selectAgentVersion}
+          disabled=${chat.isLoading}
+        />
+      `}
+
       ${config.showTasksTab !== false && html`
         <div class="cw-tabs">
           <button

package/src/components/DevToolbar.js

@@ -0,0 +1,135 @@
+/**
+ * DevToolbar component - system/agent/version picker for developers and testers.
+ *
+ * Always shows when rendered — displays info badges for single items,
+ * dropdowns when there are multiple options to choose from.
+ */
+
+import { html } from 'htm/preact';
+import { escapeHtml } from '../utils/helpers.js';
+
+export function DevToolbar({
+  systems,
+  agents,
+  selectedSystem,
+  selectedAgent,
+  selectedSystemVersion,
+  selectedAgentVersion,
+  onSelectSystem,
+  onSelectAgent,
+  onSelectSystemVersion,
+  onSelectAgentVersion,
+  disabled,
+}) {
+  // Find current system and agent objects
+  const currentSystem = systems.find(s => s.slug === selectedSystem);
+  const currentAgent = agents.find(a => a.slug === selectedAgent);
+
+  // Get versions for current selections
+  const systemVersions = currentSystem?.versions || [];
+  const agentVersions = currentAgent?.versions || [];
+
+  // Nothing loaded yet
+  if (systems.length === 0 && agents.length === 0) return null;
+
+  const hasMultipleSystems = systems.length > 1;
+  const hasMultipleAgents = agents.length > 1;
+  const hasMultipleSystemVersions = systemVersions.length > 1;
+  const hasMultipleAgentVersions = agentVersions.length > 1;
+
+  return html`
+    <div class="cw-dev-toolbar">
+      <div class="cw-dev-toolbar-label">
+        <span class="cw-dev-toolbar-icon">🛠️</span>
+        <span>Dev</span>
+      </div>
+
+      <div class="cw-dev-toolbar-selectors">
+        <!-- System -->
+        <div class="cw-dev-select-group">
+          <label class="cw-dev-label">System</label>
+          ${hasMultipleSystems ? html`
+            <select
+              class="cw-dev-select"
+              value=${selectedSystem || ''}
+              onChange=${(e) => onSelectSystem(e.target.value)}
+              disabled=${disabled}
+            >
+              ${systems.map(sys => html`
+                <option key=${sys.slug} value=${sys.slug}>
+                  ${sys.name}
+                </option>
+              `)}
+            </select>
+          ` : html`
+            <span class="cw-dev-badge">${currentSystem?.name || '—'}</span>
+          `}
+        </div>
+
+        <!-- System Version -->
+        <div class="cw-dev-select-group">
+          <label class="cw-dev-label">Sys Ver</label>
+          ${hasMultipleSystemVersions ? html`
+            <select
+              class="cw-dev-select"
+              value=${selectedSystemVersion || ''}
+              onChange=${(e) => onSelectSystemVersion(e.target.value || null)}
+              disabled=${disabled}
+            >
+              ${systemVersions.map(v => html`
+                <option key=${v.version} value=${v.version}>
+                  ${v.version}${v.is_active ? ' ✓' : ''}${v.is_draft ? ' (draft)' : ''}
+                </option>
+              `)}
+            </select>
+          ` : html`
+            <span class="cw-dev-badge">${systemVersions.length === 1 ? systemVersions[0].version : 'none'}</span>
+          `}
+        </div>
+
+        <!-- Agent -->
+        <div class="cw-dev-select-group">
+          <label class="cw-dev-label">Agent</label>
+          ${hasMultipleAgents ? html`
+            <select
+              class="cw-dev-select"
+              value=${selectedAgent || ''}
+              onChange=${(e) => onSelectAgent(e.target.value)}
+              disabled=${disabled}
+            >
+              ${agents.map(agent => html`
+                <option key=${agent.slug} value=${agent.slug}>
+                  ${agent.name}${currentSystem?.entry_agent?.slug === agent.slug ? ' ★' : ''}
+                </option>
+              `)}
+            </select>
+          ` : html`
+            <span class="cw-dev-badge">${currentAgent?.name || agents[0]?.name || '—'}${currentSystem?.entry_agent?.slug === (currentAgent?.slug || agents[0]?.slug) ? ' ★' : ''}</span>
+          `}
+        </div>
+
+        <!-- Agent Version -->
+        <div class="cw-dev-select-group">
+          <label class="cw-dev-label">Agent Ver</label>
+          ${hasMultipleAgentVersions ? html`
+            <select
+              class="cw-dev-select"
+              value=${selectedAgentVersion || ''}
+              onChange=${(e) => onSelectAgentVersion(e.target.value || null)}
+              disabled=${disabled}
+            >
+              ${agentVersions.map(v => html`
+                <option key=${v.version} value=${v.version}>
+                  ${v.version}${v.is_active ? ' ✓' : ''}${v.is_draft ? ' (draft)' : ''}
+                </option>
+              `)}
+            </select>
+          ` : html`
+            <span class="cw-dev-badge">${agentVersions.length === 1 ? agentVersions[0].version : (currentAgent?.active_version || '—')}</span>
+          `}
+        </div>
+      </div>
+    </div>
+  `;
+}
+

package/src/hooks/useSystems.js

@@ -0,0 +1,163 @@
+/**
+ * Systems hook - manages system/agent/version discovery and selection
+ * for developer/tester UI (DevToolbar).
+ */
+
+import { useState, useEffect, useCallback } from 'preact/hooks';
+
+const SYSTEM_KEY = 'cw_selected_system';
+const AGENT_KEY = 'cw_selected_agent';
+const SYSTEM_VERSION_KEY = 'cw_selected_system_version';
+const AGENT_VERSION_KEY = 'cw_selected_agent_version';
+
+export function useSystems(config, api, storage) {
+  const [systems, setSystems] = useState([]);
+  const [agents, setAgents] = useState([]);
+  const [selectedSystem, setSelectedSystem] = useState(null);
+  const [selectedAgent, setSelectedAgent] = useState(null);
+  const [selectedSystemVersion, setSelectedSystemVersion] = useState(null);
+  const [selectedAgentVersion, setSelectedAgentVersion] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Compute the effective agent key to use for runs
+  const getEffectiveAgentKey = useCallback(() => {
+    if (selectedAgent) return selectedAgent;
+    if (selectedSystem) {
+      const sys = systems.find(s => s.slug === selectedSystem);
+      if (sys?.entry_agent) return sys.entry_agent.slug;
+    }
+    return config.agentKey;
+  }, [selectedAgent, selectedSystem, systems, config.agentKey]);
+
+  // Load systems on mount
+  useEffect(() => {
+    if (!config.showDevTools) return;
+
+    const loadSystems = async () => {
+      setIsLoading(true);
+      try {
+        const response = await fetch(
+          `${config.backendUrl}${config.apiPaths.systems}`,
+          api.getFetchOptions({ method: 'GET' })
+        );
+
+        if (response.ok) {
+          const data = await response.json();
+          const systemsList = data.results || data;
+          setSystems(systemsList);
+
+          // Restore saved selection or auto-select if only 1 system
+          const saved = storage?.get(SYSTEM_KEY);
+          if (saved && systemsList.some(s => s.slug === saved)) {
+            setSelectedSystem(saved);
+          } else if (systemsList.length === 1) {
+            setSelectedSystem(systemsList[0].slug);
+          }
+        }
+      } catch (err) {
+        console.warn('[ChatWidget] Failed to load systems:', err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadSystems();
+  }, [config.backendUrl, config.apiPaths.systems, config.showDevTools, api, storage]);
+
+  // Load agents when system changes
+  useEffect(() => {
+    if (!config.showDevTools) return;
+
+    const loadAgents = async () => {
+      try {
+        const systemParam = selectedSystem ? `?system=${encodeURIComponent(selectedSystem)}` : '';
+        const response = await fetch(
+          `${config.backendUrl}${config.apiPaths.agents}${systemParam}`,
+          api.getFetchOptions({ method: 'GET' })
+        );
+
+        if (response.ok) {
+          const data = await response.json();
+          const agentsList = data.results || data;
+          setAgents(agentsList);
+
+          // Restore saved agent or default to entry agent
+          const saved = storage?.get(AGENT_KEY);
+          if (saved && agentsList.some(a => a.slug === saved)) {
+            setSelectedAgent(saved);
+          } else if (selectedSystem) {
+            const sys = systems.find(s => s.slug === selectedSystem);
+            if (sys?.entry_agent) {
+              setSelectedAgent(sys.entry_agent.slug);
+            }
+          }
+
+          // Restore saved agent version
+          const savedVersion = storage?.get(AGENT_VERSION_KEY);
+          if (savedVersion) {
+            setSelectedAgentVersion(savedVersion);
+          }
+        }
+      } catch (err) {
+        console.warn('[ChatWidget] Failed to load agents:', err);
+      }
+    };
+
+    loadAgents();
+  }, [config.backendUrl, config.apiPaths.agents, config.showDevTools, selectedSystem, api, storage, systems]);
+
+  // Select a system
+  const selectSystem = useCallback((slug) => {
+    setSelectedSystem(slug);
+    storage?.set(SYSTEM_KEY, slug);
+    // Reset agent selection — will be re-set by the agents useEffect
+    setSelectedAgent(null);
+    setSelectedAgentVersion(null);
+    storage?.set(AGENT_KEY, null);
+    storage?.set(AGENT_VERSION_KEY, null);
+    // Set system version
+    const sys = systems.find(s => s.slug === slug);
+    const activeVer = sys?.active_version || null;
+    setSelectedSystemVersion(activeVer);
+    storage?.set(SYSTEM_VERSION_KEY, activeVer);
+  }, [storage, systems]);
+
+  // Select an agent
+  const selectAgent = useCallback((slug) => {
+    setSelectedAgent(slug);
+    storage?.set(AGENT_KEY, slug);
+    // Reset agent version to active
+    const agent = agents.find(a => a.slug === slug);
+    const activeVer = agent?.active_version || null;
+    setSelectedAgentVersion(activeVer);
+    storage?.set(AGENT_VERSION_KEY, activeVer);
+  }, [storage, agents]);
+
+  // Select system version
+  const selectSystemVersion = useCallback((version) => {
+    setSelectedSystemVersion(version);
+    storage?.set(SYSTEM_VERSION_KEY, version);
+  }, [storage]);
+
+  // Select agent version
+  const selectAgentVersion = useCallback((version) => {
+    setSelectedAgentVersion(version);
+    storage?.set(AGENT_VERSION_KEY, version);
+  }, [storage]);
+
+  return {
+    systems,
+    agents,
+    selectedSystem,
+    selectedAgent,
+    selectedSystemVersion,
+    selectedAgentVersion,
+    isLoading,
+    selectSystem,
+    selectAgent,
+    selectSystemVersion,
+    selectAgentVersion,
+    getEffectiveAgentKey,
+  };
+}
+

package/src/index.js

@@ -52,6 +52,9 @@ class ChatWidgetInstance {
       document.body.appendChild(this.container);
     }
 
+    // Apply theme class
+    this._applyTheme();
+
     // Render the Preact component
     this._render();
 
@@ -59,6 +62,16 @@ class ChatWidgetInstance {
     return this;
   }
 
+  _applyTheme() {
+    if (!this.container) return;
+    this.container.classList.remove('cw-dark', 'cw-auto');
+    if (this.config.theme === 'dark') {
+      this.container.classList.add('cw-dark');
+    } else if (this.config.theme === 'auto') {
+      this.container.classList.add('cw-auto');
+    }
+  }
+
   _render(configOverrides = {}) {
     if (!this.container) return;
     render(
@@ -172,6 +185,10 @@ class ChatWidgetInstance {
       ...this.config,
       ...configUpdates,
     };
+    // Re-apply theme if it changed
+    if ('theme' in configUpdates) {
+      this._applyTheme();
+    }
     // Re-render with updated config
     this._render();
     console.log(`[ChatWidget] Instance ${this.instanceId} config updated`);

package/src/utils/config.js

@@ -41,6 +41,8 @@ export const DEFAULT_CONFIG = {
     ttsVoices: '/api/tts/voices/',
     ttsSetVoice: '/api/tts/set-voice/',
     models: '/api/agent-runtime/models/',
+    systems: '/api/agent-runtime/systems/',
+    agents: '/api/agent-runtime/agents/',
   },
 
   // API case style: 'camel', 'snake', or 'auto' (accepts both, sends camelCase)
@@ -49,6 +51,9 @@ export const DEFAULT_CONFIG = {
   // - 'auto': Accept both in responses, send snake_case in requests (default)
   apiCaseStyle: 'auto',
 
+  // Theme: 'light' (default), 'dark', or 'auto' (follows prefers-color-scheme)
+  theme: 'light',
+
   // UI options
   showConversationSidebar: true,
   showClearButton: true,
@@ -57,6 +62,7 @@ export const DEFAULT_CONFIG = {
   showVoiceSettings: true,
   showExpandButton: true,
   showModelSelector: false,
+  showDevTools: false,  // Show system/agent/version picker for developers/testers
   enableVoice: true,  // Enable voice input (speech-to-text)
 
   // Model selection