@makemore/agent-frontend 2.3.0 → 2.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@makemore/agent-frontend",
-  "version": "2.3.0",
+  "version": "2.7.0",
   "description": "A lightweight chat widget for AI agents built with Preact. Embed conversational AI into any website with a single script tag.",
   "type": "module",
   "main": "dist/chat-widget.js",

package/src/components/ChatWidget.js

@@ -9,8 +9,10 @@ import { MessageList } from './MessageList.js';
 import { InputForm } from './InputForm.js';
 import { Sidebar } from './Sidebar.js';
 import { ModelSelector } from './ModelSelector.js';
+import { TaskList } from './TaskList.js';
 import { useChat } from '../hooks/useChat.js';
 import { useModels } from '../hooks/useModels.js';
+import { useTasks } from '../hooks/useTasks.js';
 import { createApiClient } from '../utils/api.js';
 import { createStorage } from '../utils/helpers.js';
 
@@ -21,6 +23,7 @@ export function ChatWidget({ config, onStateChange, markdownParser, apiRef }) {
   const [debugMode, setDebugMode] = useState(false);
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [conversations, setConversations] = useState([]);
+  const [activeTab, setActiveTab] = useState('chat'); // 'chat' or 'tasks'
   const [conversationsLoading, setConversationsLoading] = useState(false);
 
   // TTS state
@@ -57,6 +60,9 @@ export function ChatWidget({ config, onStateChange, markdownParser, apiRef }) {
   // Models hook
   const models = useModels(config, api, storage);
 
+  // Tasks hook
+  const tasks = useTasks(config, api);
+
   // Track current agent from messages (for multi-agent systems)
   useEffect(() => {
     // Look for the most recent sub_agent_start or sub_agent_end message
@@ -152,6 +158,14 @@ export function ChatWidget({ config, onStateChange, markdownParser, apiRef }) {
     });
   }, [chat, enableTTS, models.selectedModel]);
 
+  // Handle tab switching
+  const handleTabChange = useCallback((tab) => {
+    setActiveTab(tab);
+    if (tab === 'tasks') {
+      tasks.loadTaskList();
+    }
+  }, [tasks]);
+
   // Expose imperative API to parent
   useEffect(() => {
     if (apiRef) {
@@ -221,39 +235,71 @@ export function ChatWidget({ config, onStateChange, markdownParser, apiRef }) {
         onToggleSidebar=${handleToggleSidebar}
       />
 
+      ${config.showTasksTab !== false && html`
+        <div class="cw-tabs">
+          <button
+            class=${`cw-tab ${activeTab === 'chat' ? 'cw-tab-active' : ''}`}
+            onClick=${() => handleTabChange('chat')}
+          >
+            Chat
+          </button>
+          <button
+            class=${`cw-tab ${activeTab === 'tasks' ? 'cw-tab-active' : ''}`}
+            onClick=${() => handleTabChange('tasks')}
+          >
+            Tasks ${tasks.progress.total > 0 ? html`<span class="cw-tab-badge">${tasks.progress.completed}/${tasks.progress.total}</span>` : ''}
+          </button>
+        </div>
+      `}
+
       ${debugMode && html`<div class="cw-status-bar"><span>🐛 Debug</span></div>`}
 
-      <${MessageList}
-        messages=${chat.messages}
-        isLoading=${chat.isLoading}
-        hasMoreMessages=${chat.hasMoreMessages}
-        loadingMoreMessages=${chat.loadingMoreMessages}
-        onLoadMore=${chat.loadMoreMessages}
-        debugMode=${debugMode}
-        markdownParser=${markdownParser}
-        emptyStateTitle=${config.emptyStateTitle}
-        emptyStateMessage=${config.emptyStateMessage}
-      />
+      ${activeTab === 'chat' ? html`
+        <${MessageList}
+          messages=${chat.messages}
+          isLoading=${chat.isLoading}
+          hasMoreMessages=${chat.hasMoreMessages}
+          loadingMoreMessages=${chat.loadingMoreMessages}
+          onLoadMore=${chat.loadMoreMessages}
+          onEditMessage=${chat.editMessage}
+          onRetryMessage=${chat.retryMessage}
+          debugMode=${debugMode}
+          markdownParser=${markdownParser}
+          emptyStateTitle=${config.emptyStateTitle}
+          emptyStateMessage=${config.emptyStateMessage}
+        />
 
-      ${chat.error && html`<div class="cw-error-bar">${chat.error}</div>`}
+        ${chat.error && html`<div class="cw-error-bar">${chat.error}</div>`}
 
-      ${config.showModelSelector && models.availableModels.length > 0 && html`
-        <${ModelSelector}
-          availableModels=${models.availableModels}
-          selectedModel=${models.selectedModel}
-          onSelectModel=${models.selectModel}
-          disabled=${chat.isLoading}
+        ${config.showModelSelector && models.availableModels.length > 0 && html`
+          <${ModelSelector}
+            availableModels=${models.availableModels}
+            selectedModel=${models.selectedModel}
+            onSelectModel=${models.selectModel}
+            disabled=${chat.isLoading}
+          />
+        `}
+
+        <${InputForm}
+          onSend=${handleSend}
+          onCancel=${chat.cancelRun}
+          isLoading=${chat.isLoading}
+          placeholder=${config.placeholder}
+          primaryColor=${config.primaryColor}
+          enableVoice=${config.enableVoice}
+        />
+      ` : html`
+        <${TaskList}
+          tasks=${tasks.tasks}
+          progress=${tasks.progress}
+          isLoading=${tasks.isLoading}
+          error=${tasks.error}
+          onUpdate=${tasks.updateTask}
+          onRemove=${tasks.removeTask}
+          onClear=${tasks.clearTasks}
+          onRefresh=${tasks.loadTaskList}
         />
       `}
-
-      <${InputForm}
-        onSend=${handleSend}
-        onCancel=${chat.cancelRun}
-        isLoading=${chat.isLoading}
-        placeholder=${config.placeholder}
-        primaryColor=${config.primaryColor}
-        enableVoice=${config.enableVoice}
-      />
     </div>
   `;
 }

package/src/components/Message.js

@@ -3,7 +3,7 @@
  */
 
 import { html } from 'htm/preact';
-import { useState } from 'preact/hooks';
+import { useState, useRef, useEffect } from 'preact/hooks';
 import { escapeHtml, parseMarkdown, formatFileSize, getFileTypeIcon } from '../utils/helpers.js';
 
 // Debug payload viewer component
@@ -26,9 +26,103 @@ function DebugPayload({ msg, show, onToggle }) {
   `;
 }
 
-export function Message({ msg, debugMode, markdownParser }) {
+// Edit/Retry action buttons for user messages
+function MessageActions({ onEdit, onRetry, isLoading, position, showEdit = true }) {
+  if (isLoading) return null;
+
+  return html`
+    <div class="cw-message-actions cw-message-actions-${position || 'left'}">
+      ${showEdit && html`
+        <button
+          class="cw-message-action-btn"
+          onClick=${onEdit}
+          title="Edit message"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
+          </svg>
+        </button>
+      `}
+      <button
+        class="cw-message-action-btn"
+        onClick=${onRetry}
+        title="Retry from here"
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M21 2v6h-6"></path>
+          <path d="M3 12a9 9 0 0 1 15-6.7L21 8"></path>
+          <path d="M3 22v-6h6"></path>
+          <path d="M21 12a9 9 0 0 1-15 6.7L3 16"></path>
+        </svg>
+      </button>
+    </div>
+  `;
+}
+
+// Inline edit form for editing a message
+function InlineEditForm({ initialContent, onSave, onCancel }) {
+  const [content, setContent] = useState(initialContent);
+  const textareaRef = useRef(null);
+
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.focus();
+      textareaRef.current.setSelectionRange(content.length, content.length);
+      // Auto-resize
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px';
+    }
+  }, []);
+
+  const handleInput = (e) => {
+    setContent(e.target.value);
+    // Auto-resize textarea
+    e.target.style.height = 'auto';
+    e.target.style.height = e.target.scrollHeight + 'px';
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      if (content.trim()) {
+        onSave(content.trim());
+      }
+    } else if (e.key === 'Escape') {
+      onCancel();
+    }
+  };
+
+  return html`
+    <div class="cw-inline-edit">
+      <textarea
+        ref=${textareaRef}
+        class="cw-inline-edit-input"
+        value=${content}
+        onInput=${handleInput}
+        onKeyDown=${handleKeyDown}
+        rows="1"
+      />
+      <div class="cw-inline-edit-actions">
+        <button
+          class="cw-inline-edit-btn cw-inline-edit-cancel"
+          onClick=${onCancel}
+          title="Cancel (Esc)"
+        >Cancel</button>
+        <button
+          class="cw-inline-edit-btn cw-inline-edit-save"
+          onClick=${() => content.trim() && onSave(content.trim())}
+          disabled=${!content.trim()}
+          title="Save & Resend (Enter)"
+        >Save & Send</button>
+      </div>
+    </div>
+  `;
+}
+
+export function Message({ msg, debugMode, markdownParser, onEdit, onRetry, isLoading, messageIndex }) {
   const [expanded, setExpanded] = useState(false);
   const [showPayload, setShowPayload] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
 
   const isUser = msg.role === 'user';
   const isSystem = msg.role === 'system';
@@ -139,10 +233,68 @@ export function Message({ msg, debugMode, markdownParser }) {
     `;
   };
 
+  // Handle edit save - always triggers a new run with the (possibly edited) content
+  const handleEditSave = (newContent) => {
+    setIsEditing(false);
+    if (onEdit) {
+      onEdit(messageIndex, newContent);
+    }
+  };
+
+  // Handle retry (resend same message)
+  const handleRetry = () => {
+    if (onRetry) {
+      onRetry(messageIndex);
+    }
+  };
+
+  // Show inline edit form for user messages in edit mode
+  if (isUser && isEditing) {
+    return html`
+      <div class=${rowClasses} style="position: relative;">
+        ${renderAttachments()}
+        <${InlineEditForm}
+          initialContent=${msg.content}
+          onSave=${handleEditSave}
+          onCancel=${() => setIsEditing(false)}
+        />
+      </div>
+    `;
+  }
+
+  // Show edit/retry actions for user messages (on left side since user messages are on right)
+  const showUserActions = isUser && onEdit && onRetry;
+  // Show retry-only for assistant messages (below the message)
+  const isAssistant = msg.role === 'assistant';
+  const showAssistantRetry = isAssistant && onRetry && !isLoading;
+  const hasActions = showUserActions || showAssistantRetry;
+
   return html`
-    <div class=${rowClasses} style="position: relative;">
+    <div class="${rowClasses} ${hasActions ? 'cw-message-row-with-actions' : ''}">
       ${renderAttachments()}
-      <div class=${classes} dangerouslySetInnerHTML=${{ __html: content }} />
+      ${showUserActions && html`
+        <div class="cw-user-actions-wrapper">
+          <${MessageActions}
+            onEdit=${() => setIsEditing(true)}
+            onRetry=${handleRetry}
+            isLoading=${isLoading}
+            position="left"
+            showEdit=${true}
+          />
+          <div class=${classes} dangerouslySetInnerHTML=${{ __html: content }} />
+        </div>
+      `}
+      ${!showUserActions && html`
+        <div class=${classes} dangerouslySetInnerHTML=${{ __html: content }} />
+      `}
+      ${showAssistantRetry && html`
+        <${MessageActions}
+          onRetry=${handleRetry}
+          isLoading=${isLoading}
+          position="right"
+          showEdit=${false}
+        />
+      `}
       ${debugMode && html`<${DebugPayload} msg=${msg} show=${showPayload} onToggle=${() => setShowPayload(!showPayload)} />`}
     </div>
   `;

package/src/components/MessageList.js

@@ -13,6 +13,8 @@ export function MessageList({
   hasMoreMessages,
   loadingMoreMessages,
   onLoadMore,
+  onEditMessage,
+  onRetryMessage,
   debugMode,
   markdownParser,
   emptyStateTitle,
@@ -83,12 +85,16 @@ export function MessageList({
         </div>
       `}
       
-      ${messages.map(msg => html`
-        <${Message} 
-          key=${msg.id} 
-          msg=${msg} 
+      ${messages.map((msg, index) => html`
+        <${Message}
+          key=${msg.id}
+          msg=${msg}
+          messageIndex=${index}
           debugMode=${debugMode}
           markdownParser=${markdownParser}
+          onEdit=${onEditMessage}
+          onRetry=${onRetryMessage}
+          isLoading=${isLoading}
         />
       `)}
       

package/src/components/TaskList.js

@@ -0,0 +1,183 @@
+/**
+ * TaskList component - displays and manages the user's task list
+ */
+
+import { html } from 'htm/preact';
+import { useState, useCallback } from 'preact/hooks';
+
+// State icons for tasks
+const STATE_ICONS = {
+  not_started: '○',
+  in_progress: '◐',
+  complete: '●',
+  cancelled: '⊘',
+};
+
+const STATE_LABELS = {
+  not_started: 'Not Started',
+  in_progress: 'In Progress',
+  complete: 'Complete',
+  cancelled: 'Cancelled',
+};
+
+function TaskItem({ task, onUpdate, onRemove, depth = 0 }) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editName, setEditName] = useState(task.name);
+
+  const handleStateToggle = useCallback(() => {
+    // Cycle through states: not_started -> in_progress -> complete
+    const nextState = {
+      not_started: 'in_progress',
+      in_progress: 'complete',
+      complete: 'not_started',
+      cancelled: 'not_started',
+    };
+    onUpdate(task.id, { state: nextState[task.state] || 'not_started' });
+  }, [task, onUpdate]);
+
+  const handleSaveEdit = useCallback(() => {
+    if (editName.trim() && editName !== task.name) {
+      onUpdate(task.id, { name: editName.trim() });
+    }
+    setIsEditing(false);
+  }, [task, editName, onUpdate]);
+
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === 'Enter') handleSaveEdit();
+    if (e.key === 'Escape') {
+      setEditName(task.name);
+      setIsEditing(false);
+    }
+  }, [handleSaveEdit, task.name]);
+
+  const stateClass = `cw-task-state-${task.state.replace('_', '-')}`;
+
+  return html`
+    <div class="cw-task-item ${stateClass}" style=${{ paddingLeft: `${depth * 16 + 8}px` }}>
+      <button 
+        class="cw-task-state-btn" 
+        onClick=${handleStateToggle}
+        title=${STATE_LABELS[task.state]}
+      >
+        ${STATE_ICONS[task.state]}
+      </button>
+      
+      ${isEditing ? html`
+        <input
+          type="text"
+          class="cw-task-edit-input"
+          value=${editName}
+          onInput=${(e) => setEditName(e.target.value)}
+          onBlur=${handleSaveEdit}
+          onKeyDown=${handleKeyDown}
+          autoFocus
+        />
+      ` : html`
+        <span 
+          class="cw-task-name" 
+          onClick=${() => setIsEditing(true)}
+          title="Click to edit"
+        >
+          ${task.name}
+        </span>
+      `}
+      
+      <button 
+        class="cw-task-remove-btn" 
+        onClick=${() => onRemove(task.id)}
+        title="Remove task"
+      >
+        ×
+      </button>
+    </div>
+  `;
+}
+
+export function TaskList({ 
+  tasks, 
+  progress, 
+  isLoading, 
+  error, 
+  onUpdate, 
+  onRemove, 
+  onClear,
+  onRefresh 
+}) {
+  // Build tree structure from flat tasks
+  const buildTree = useCallback((tasks) => {
+    const taskMap = new Map();
+    const roots = [];
+    
+    // First pass: create map
+    tasks.forEach(task => {
+      taskMap.set(task.id, { ...task, children: [] });
+    });
+    
+    // Second pass: build tree
+    tasks.forEach(task => {
+      const node = taskMap.get(task.id);
+      if (task.parent_id && taskMap.has(task.parent_id)) {
+        taskMap.get(task.parent_id).children.push(node);
+      } else {
+        roots.push(node);
+      }
+    });
+    
+    return roots;
+  }, []);
+
+  const renderTask = useCallback((task, depth = 0) => {
+    return html`
+      <${TaskItem}
+        key=${task.id}
+        task=${task}
+        depth=${depth}
+        onUpdate=${onUpdate}
+        onRemove=${onRemove}
+      />
+      ${task.children?.map(child => renderTask(child, depth + 1))}
+    `;
+  }, [onUpdate, onRemove]);
+
+  const taskTree = buildTree(tasks);
+
+  if (isLoading && tasks.length === 0) {
+    return html`<div class="cw-tasks-loading">Loading tasks...</div>`;
+  }
+
+  return html`
+    <div class="cw-tasks-container">
+      <div class="cw-tasks-header">
+        <div class="cw-tasks-progress">
+          <span class="cw-tasks-progress-text">
+            ${progress.completed}/${progress.total} complete
+          </span>
+          <div class="cw-tasks-progress-bar">
+            <div 
+              class="cw-tasks-progress-fill" 
+              style=${{ width: `${progress.percent_complete}%` }}
+            />
+          </div>
+        </div>
+        <div class="cw-tasks-actions">
+          <button class="cw-tasks-action-btn" onClick=${onRefresh} title="Refresh">↻</button>
+          ${tasks.length > 0 && html`
+            <button class="cw-tasks-action-btn" onClick=${onClear} title="Clear all">🗑</button>
+          `}
+        </div>
+      </div>
+      
+      ${error && html`<div class="cw-tasks-error">${error}</div>`}
+      
+      <div class="cw-tasks-list">
+        ${taskTree.length === 0 ? html`
+          <div class="cw-tasks-empty">
+            <p>No tasks yet</p>
+            <p class="cw-tasks-empty-hint">Tasks will appear here when the agent creates them</p>
+          </div>
+        ` : taskTree.map(task => renderTask(task))}
+      </div>
+    </div>
+  `;
+}
+