@poncho-ai/cli 0.27.1 → 0.28.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@poncho-ai/cli",
-  "version": "0.27.1",
+  "version": "0.28.1",
   "description": "CLI for building and deploying AI agents",
   "repository": {
     "type": "git",
@@ -27,7 +27,7 @@
     "react": "^19.2.4",
     "react-devtools-core": "^6.1.5",
     "yaml": "^2.8.1",
-    "@poncho-ai/harness": "0.25.0",
+    "@poncho-ai/harness": "0.26.0",
     "@poncho-ai/messaging": "0.7.0",
     "@poncho-ai/sdk": "1.5.0"
   },

package/src/index.ts

@@ -3594,6 +3594,14 @@ export const createRequestHandler = async (options?: {
       return;
     }
 
+    const todosMatch = pathname.match(/^\/api\/conversations\/([^/]+)\/todos$/);
+    if (todosMatch && request.method === "GET") {
+      const conversationId = decodeURIComponent(todosMatch[1] ?? "");
+      const todos = await harness.getTodos(conversationId);
+      writeJson(response, 200, { todos });
+      return;
+    }
+
     const conversationPathMatch = pathname.match(/^\/api\/conversations\/([^/]+)$/);
     if (conversationPathMatch) {
       const conversationId = decodeURIComponent(conversationPathMatch[1] ?? "");

package/src/web-ui-client.ts

@@ -27,6 +27,8 @@ export const getWebUiClientScript = (markedSource: string): string => `
         subagentsParentId: null,
         viewingSubagentId: null,
         parentConversationId: null,
+        todos: [],
+        todoPanelCollapsed: false,
       };
 
       const agentInitial = document.body.dataset.agentInitial || "A";
@@ -578,7 +580,9 @@ export const getWebUiClientScript = (markedSource: string): string => `
             state.activeMessages = [];
             state.contextTokens = 0;
             state.contextWindow = 0;
+            state.todos = [];
             updateContextRing();
+            renderTodoPanel();
             pushConversationUrl(null);
             elements.chatTitle.textContent = "";
             renderMessages([]);
@@ -610,6 +614,136 @@ export const getWebUiClientScript = (markedSource: string): string => `
         return item;
       };
 
+      const _todoPriorityOrder = { high: 0, medium: 1, low: 2 };
+      const _todoStatusOrder = { in_progress: 0, pending: 1, completed: 2 };
+      const _todoCompletedTimers = new Map();
+
+      const _scheduleCompletedHide = () => {
+        state.todos.forEach(function(todo) {
+          if (todo.status === "completed" && !_todoCompletedTimers.has(todo.id)) {
+            _todoCompletedTimers.set(todo.id, todo.updatedAt || Date.now());
+          }
+        });
+        const activeIds = new Set(state.todos.map(function(t) { return t.id; }));
+        for (const id of _todoCompletedTimers.keys()) {
+          if (!activeIds.has(id)) _todoCompletedTimers.delete(id);
+        }
+      };
+
+      const _getVisibleTodos = () => {
+        const now = Date.now();
+        const sorted = state.todos.slice().sort(function(a, b) {
+          const sp = (_todoStatusOrder[a.status] || 1) - (_todoStatusOrder[b.status] || 1);
+          if (sp !== 0) return sp;
+          const pp = (_todoPriorityOrder[a.priority] || 1) - (_todoPriorityOrder[b.priority] || 1);
+          if (pp !== 0) return pp;
+          return (a.createdAt || 0) - (b.createdAt || 0);
+        });
+        if (!state.todoPanelCollapsed) return sorted;
+        return sorted.filter(function(todo) {
+          if (todo.status !== "completed") return true;
+          const completedAt = _todoCompletedTimers.get(todo.id);
+          return !completedAt || (now - completedAt) < 30000;
+        });
+      };
+
+      let _todoHideTimer = null;
+      const _ensureHideTimer = () => {
+        if (_todoHideTimer) return;
+        _todoHideTimer = setInterval(function() {
+          const hasExpiring = state.todos.some(function(t) {
+            if (t.status !== "completed") return false;
+            const at = _todoCompletedTimers.get(t.id);
+            return at && (Date.now() - at) >= 30000;
+          });
+          if (hasExpiring && state.todoPanelCollapsed) renderTodoPanel();
+          if (!state.todos.length) {
+            clearInterval(_todoHideTimer);
+            _todoHideTimer = null;
+          }
+        }, 5000);
+      };
+
+      const _autoCollapseTodos = (live) => {
+        if (!live) {
+          state.todoPanelCollapsed = true;
+          return;
+        }
+        const hasActive = state.todos.some(function(t) {
+          return t.status === "pending" || t.status === "in_progress";
+        });
+        state.todoPanelCollapsed = !hasActive;
+      };
+
+      const renderTodoPanel = () => {
+        let panel = document.getElementById("todo-panel");
+        if (!panel) return;
+
+        _scheduleCompletedHide();
+        const visible = _getVisibleTodos();
+
+        if (!visible.length) {
+          panel.classList.add("hidden");
+          panel.innerHTML = "";
+          return;
+        }
+
+        panel.classList.remove("hidden");
+        if (state.todoPanelCollapsed) {
+          panel.classList.add("collapsed");
+        } else {
+          panel.classList.remove("collapsed");
+        }
+        _ensureHideTimer();
+
+        const completed = state.todos.filter(t => t.status === "completed").length;
+        const total = state.todos.length;
+
+        const statusIcon = (status) => {
+          if (status === "completed") return '<span class="todo-status todo-status-completed">\\u2713</span>';
+          if (status === "in_progress") return '<span class="todo-status todo-status-in-progress">\\u25CF</span>';
+          return '<span class="todo-status todo-status-pending">\\u25CB</span>';
+        };
+
+        const priorityBadge = (priority) => {
+          if (!priority || priority === "medium") return "";
+          return '<span class="todo-priority todo-priority-' + priority + '">' + priority + '</span>';
+        };
+
+        const isCollapsed = state.todoPanelCollapsed;
+
+        let html = '<div class="todo-panel-header" id="todo-panel-header">';
+        html += '<div class="todo-panel-title">';
+        html += '<span class="todo-panel-label">Todos</span>';
+        html += '<span class="todo-panel-progress">' + completed + '/' + total + ' done</span>';
+        html += '</div>';
+        html += '<span class="todo-panel-toggle' + (isCollapsed ? '' : ' open') + '"><svg viewBox="0 0 12 12" fill="none" width="12" height="12"><path d="M4.5 2.75L8 6L4.5 9.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>';
+        html += '</div>';
+
+        if (!isCollapsed) {
+          html += '<ul class="todo-panel-list">';
+          visible.forEach(function(todo) {
+            const isDone = todo.status === "completed";
+            html += '<li class="todo-item' + (isDone ? ' todo-item-done' : '') + '">';
+            html += statusIcon(todo.status);
+            html += '<span class="todo-item-content">' + escapeHtml(todo.content) + '</span>';
+            html += priorityBadge(todo.priority);
+            html += '</li>';
+          });
+          html += '</ul>';
+        }
+
+        panel.innerHTML = html;
+
+        const header = document.getElementById("todo-panel-header");
+        if (header) {
+          header.onclick = function() {
+            state.todoPanelCollapsed = !state.todoPanelCollapsed;
+            renderTodoPanel();
+          };
+        }
+      };
+
       const renderConversationList = () => {
         elements.list.innerHTML = "";
         const pending = state.conversations.filter(c => c.hasPendingApprovals);
@@ -624,21 +758,48 @@ export const getWebUiClientScript = (markedSource: string): string => `
             elements.list.appendChild(buildConversationItem(c));
             appendSubagentsIfActive(c.conversationId);
           }
-          if (rest.length > 0) {
+        }
+
+        const now = new Date();
+        const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+        const sevenDaysAgo = startOfToday - 7 * 86400000;
+
+        const latest = [];
+        const previous7 = [];
+        const older = [];
+        for (const c of rest) {
+          const ts = c.updatedAt || c.createdAt || 0;
+          if (ts >= startOfToday) {
+            latest.push(c);
+          } else if (ts >= sevenDaysAgo) {
+            previous7.push(c);
+          } else {
+            older.push(c);
+          }
+        }
+
+        let sectionRendered = pending.length > 0;
+        const appendSection = (items, labelText) => {
+          if (items.length === 0) return;
+          if (sectionRendered) {
             const divider = document.createElement("div");
             divider.className = "sidebar-section-divider";
             elements.list.appendChild(divider);
-            const recentLabel = document.createElement("div");
-            recentLabel.className = "sidebar-section-label";
-            recentLabel.textContent = "Recent";
-            elements.list.appendChild(recentLabel);
           }
-        }
+          const sectionLabel = document.createElement("div");
+          sectionLabel.className = "sidebar-section-label";
+          sectionLabel.textContent = labelText;
+          elements.list.appendChild(sectionLabel);
+          for (const c of items) {
+            elements.list.appendChild(buildConversationItem(c));
+            appendSubagentsIfActive(c.conversationId);
+          }
+          sectionRendered = true;
+        };
 
-        for (const c of rest) {
-          elements.list.appendChild(buildConversationItem(c));
-          appendSubagentsIfActive(c.conversationId);
-        }
+        appendSection(latest, "Latest");
+        appendSection(previous7, "Previous 7 days");
+        appendSection(older, "Older");
       };
 
       const appendSubagentsIfActive = (conversationId) => {
@@ -1018,12 +1179,22 @@ export const getWebUiClientScript = (markedSource: string): string => `
           loadSubagents(subagentParentId);
         }
 
+        try {
+          const todosPayload = await api("/api/conversations/" + encodeURIComponent(conversationId) + "/todos");
+          state.todos = todosPayload.todos || [];
+        } catch (_e) {
+          state.todos = [];
+        }
+        _autoCollapseTodos();
+        renderTodoPanel();
+
         updateContextRing();
-        renderMessages(state.activeMessages, false, { forceScrollBottom: true });
+        var willStream = !!payload.hasActiveRun;
+        renderMessages(state.activeMessages, willStream, { forceScrollBottom: true });
         if (!state.viewingSubagentId) {
           elements.prompt.focus();
         }
-        if (payload.hasActiveRun && !state.isStreaming) {
+        if (willStream) {
           setStreaming(true);
           streamConversationEvents(conversationId, { liveOnly: true }).finally(() => {
             if (state.activeConversationId === conversationId) {
@@ -1120,6 +1291,13 @@ export const getWebUiClientScript = (markedSource: string): string => `
                 payload.conversation.messages || [],
                 allPending,
               );
+              if (typeof payload.conversation.contextTokens === "number") {
+                state.contextTokens = payload.conversation.contextTokens;
+              }
+              if (typeof payload.conversation.contextWindow === "number" && payload.conversation.contextWindow > 0) {
+                state.contextWindow = payload.conversation.contextWindow;
+              }
+              updateContextRing();
               renderMessages(state.activeMessages, payload.hasActiveRun);
             }
             if (payload.hasActiveRun) {
@@ -1335,6 +1513,11 @@ export const getWebUiClientScript = (markedSource: string): string => `
                         state.contextTokens += payload.outputTokenEstimate;
                         updateContextRing();
                       }
+                      if (toolName !== "todo_list" && toolName.startsWith("todo_") && payload.output && typeof payload.output === "object" && Array.isArray(payload.output.todos)) {
+                        state.todos = payload.output.todos;
+                        _autoCollapseTodos(true);
+                        renderTodoPanel();
+                      }
                       renderIfActiveConversation(true);
                     }
                     if (eventName === "tool:error") {
@@ -1370,6 +1553,10 @@ export const getWebUiClientScript = (markedSource: string): string => `
                     if (eventName === "compaction:completed") {
                       didCompact = true;
                       removeActiveActivityForTool(assistantMessage, "__compaction__");
+                      if (typeof payload.tokensAfter === "number") {
+                        state.contextTokens = payload.tokensAfter;
+                        updateContextRing();
+                      }
                       renderIfActiveConversation(true);
                     }
                     if (eventName === "browser:status" && payload.active) {
@@ -2157,6 +2344,11 @@ export const getWebUiClientScript = (markedSource: string): string => `
                     state.contextTokens += payload.outputTokenEstimate;
                     updateContextRing();
                   }
+                  if (toolName !== "todo_list" && toolName.startsWith("todo_") && payload.output && typeof payload.output === "object" && Array.isArray(payload.output.todos)) {
+                    state.todos = payload.output.todos;
+                    _autoCollapseTodos(true);
+                    renderTodoPanel();
+                  }
                   renderIfActiveConversation(true);
                 }
                 if (eventName === "tool:error") {
@@ -2194,6 +2386,10 @@ export const getWebUiClientScript = (markedSource: string): string => `
                 if (eventName === "compaction:completed") {
                   didCompact = true;
                   removeActiveActivityForTool(assistantMessage, "__compaction__");
+                  if (typeof payload.tokensAfter === "number") {
+                    state.contextTokens = payload.tokensAfter;
+                    updateContextRing();
+                  }
                   renderIfActiveConversation(true);
                 }
                 if (eventName === "browser:status" && payload.active) {
@@ -2440,8 +2636,10 @@ export const getWebUiClientScript = (markedSource: string): string => `
         state.parentConversationId = null;
         state.subagents = [];
         state.subagentsParentId = null;
+        state.todos = [];
         updateSubagentUi();
         updateContextRing();
+        renderTodoPanel();
         pushConversationUrl(null);
         elements.chatTitle.textContent = "";
         renderMessages([]);

package/src/web-ui-styles.ts

@@ -983,6 +983,8 @@ export const WEB_UI_STYLES = `
     }
     .composer-inner { max-width: 680px; margin: 0 auto; }
     .composer-shell {
+      position: relative;
+      z-index: 1;
       background: var(--bg-alt);
       border: 1px solid var(--border-3);
       border-radius: 24px;
@@ -1550,6 +1552,114 @@ export const WEB_UI_STYLES = `
       text-decoration: underline;
     }
 
+    /* Todo panel — inside composer-inner, above the input shell */
+    #todo-panel {
+      max-height: 240px;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      font-size: 13px;
+      background: var(--surface-2);
+      border-radius: 14px 14px 0 0;
+      padding-bottom: 24px;
+      margin-bottom: -24px;
+    }
+    #todo-panel.hidden { display: none; }
+
+    .todo-panel-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 6px 14px;
+      flex-shrink: 0;
+      cursor: pointer;
+      user-select: none;
+    }
+    .todo-panel-header:hover {
+      background: var(--surface-1);
+    }
+    #todo-panel.collapsed {
+      padding-bottom: 0;
+    }
+    #todo-panel.collapsed .todo-panel-header {
+      padding-bottom: 30px;
+    }
+    .todo-panel-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .todo-panel-label {
+      font-weight: 600;
+      color: var(--fg);
+      font-size: 11px;
+    }
+    .todo-panel-progress {
+      font-size: 11px;
+      color: var(--fg-3);
+    }
+    .todo-panel-toggle {
+      color: var(--fg-5);
+      display: flex;
+      align-items: center;
+      transition: transform 0.15s ease;
+    }
+    .todo-panel-toggle.open {
+      transform: rotate(90deg);
+    }
+
+    .todo-panel-list {
+      list-style: none;
+      margin: 0;
+      padding: 0 0 4px;
+      overflow-y: auto;
+      flex: 1;
+    }
+    .todo-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      padding: 4px 14px;
+      color: var(--fg-2);
+      line-height: 1.4;
+    }
+    .todo-item-done {
+      opacity: 0.5;
+    }
+    .todo-item-done .todo-item-content {
+      text-decoration: line-through;
+    }
+    .todo-item-content {
+      flex: 1;
+      word-break: break-word;
+    }
+
+    .todo-status {
+      flex-shrink: 0;
+      width: 16px;
+      text-align: center;
+      line-height: 1.4;
+    }
+    .todo-status-completed { color: #4ade80; }
+    .todo-status-in-progress { color: #facc15; }
+    .todo-status-pending { color: var(--fg-5); }
+
+    .todo-priority {
+      flex-shrink: 0;
+      font-size: 10px;
+      padding: 1px 5px;
+      border-radius: 4px;
+      line-height: 1.4;
+    }
+    .todo-priority-high {
+      color: #f87171;
+      background: rgba(248,113,113,0.12);
+    }
+    .todo-priority-low {
+      color: var(--fg-5);
+      background: var(--surface-1);
+    }
+
     /* Reduced motion */
     @media (prefers-reduced-motion: reduce) {
       *, *::before, *::after {

package/src/web-ui.ts

@@ -162,6 +162,7 @@ ${WEB_UI_STYLES}
           </div>
           <form id="composer" class="composer">
             <div class="composer-inner">
+              <div id="todo-panel" class="hidden"></div>
               <div id="attachment-preview" class="attachment-preview" style="display:none"></div>
               <div class="composer-shell">
                 <button id="attach-btn" class="attach-btn" type="button" title="Attach files">