feat: add Codex-style task execution experience

dashboard/src/api/modules/octopThreads.ts

@@ -1,6 +1,36 @@
 import type { HitlPendingPayload } from "../types/hitl";
 import { request } from "../request";
 
+export type ThreadTaskItemStatus =
+  | "pending"
+  | "in_progress"
+  | "completed"
+  | "cancelled";
+
+export interface ThreadTaskItem {
+  id: string;
+  content: string;
+  status: ThreadTaskItemStatus;
+}
+
+export interface ThreadTaskState {
+  thread_id: string;
+  available: boolean;
+  status: "idle" | "active" | "completed";
+  items: ThreadTaskItem[];
+  completed: number;
+  total: number;
+}
+
+export interface ThreadTaskSummary extends ThreadTaskState {
+  agent_id: string;
+  title: string | null;
+  last_active: number;
+  created_at: number;
+  turn_active: boolean;
+  turn_started_at: number | null;
+}
+
 export interface OctopThread {
   thread_id: string;
   title: string | null;
@@ -39,6 +69,8 @@ export interface OctopThreadHistory {
   /** Pending tool approval for this thread (survives page reload). */
   hitl_pending?: HitlPendingPayload | null;
   artifacts?: string[];
+  /** Authoritative DeepAgents todo projection from the thread checkpoint. */
+  task_state?: ThreadTaskState;
 }
 
 export interface OctopThreadPatch {
@@ -97,6 +129,32 @@ export const octopThreadsApi = {
     );
   },
 
+  taskState: (agentId: string, threadId: string) =>
+    request<ThreadTaskState>(
+      `/agents/${encodeURIComponent(agentId)}/threads/${encodeURIComponent(
+        threadId,
+      )}/task-state`,
+    ),
+
+  tasks: (
+    agentId: string,
+    status: "active" | "completed" | "all" = "all",
+    limit = 50,
+  ) =>
+    request<ThreadTaskSummary[]>(
+      `/agents/${encodeURIComponent(
+        agentId,
+      )}/thread-tasks?status=${status}&limit=${limit}`,
+    ),
+
+  cancelTurn: (agentId: string, threadId: string) =>
+    request<{ thread_id: string; cancelled: boolean }>(
+      `/agents/${encodeURIComponent(agentId)}/threads/${encodeURIComponent(
+        threadId,
+      )}/cancel`,
+      { method: "POST" },
+    ),
+
   contextUsage: (
     agentId: string,
     threadId: string,

dashboard/src/components/BrowserAiPanel.tsx

@@ -131,6 +131,7 @@ export default function BrowserAiPanel({
     bootError,
     messages,
     isStreaming,
+    taskPlan,
     send,
     cancelStream,
   } = useAgentThreadChat(agentId);
@@ -636,6 +637,7 @@ export default function BrowserAiPanel({
         ) : (
           <MessageList
             messages={messages}
+            taskPlan={taskPlan}
             isStreaming={isStreaming}
             sessionKey={threadId ?? undefined}
             onCancel={cancelStream}

dashboard/src/components/TodoProgressPanel.module.less

@@ -7,13 +7,99 @@
 }
 
 .todoProgressPanel {
+  overflow: hidden;
   margin-top: 0;
   margin-bottom: 10px;
-  border-color: var(--fn-border-primary, rgba(22, 119, 255, 0.18));
+  border: 1px solid var(--fn-border-primary, rgba(22, 119, 255, 0.18));
+  border-radius: 11px;
   background: var(--fn-bg-elevated, #fff);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
 }
 
+.todoPanelHeader {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  gap: 9px;
+  align-items: center;
+  width: 100%;
+  padding: 11px 12px 9px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+
+.todoPanelIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  background: rgba(22, 119, 255, 0.09);
+  color: #1677ff;
+}
+
+.todoPanelHeading {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.todoPanelHeading strong {
+  color: var(--fn-text-primary);
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.todoPanelHeading span {
+  overflow: hidden;
+  color: var(--fn-text-tertiary);
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.todoPanelProgressMeta {
+  color: var(--fn-text-secondary);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+
+.todoPanelChevron {
+  color: var(--fn-text-tertiary);
+  transition: transform 0.18s ease;
+}
+
+.todoPanelChevronCollapsed {
+  transform: rotate(-90deg);
+}
+
+.todoPanelProgressTrack {
+  height: 2px;
+  margin: 0 12px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--fn-border-secondary, rgba(0, 0, 0, 0.07));
+}
+
+.todoPanelProgressTrack span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: #1677ff;
+  transition: width 0.25s ease;
+}
+
+.todoPanelList {
+  margin: 0;
+  padding: 10px 12px 12px;
+  border: 0;
+  background: transparent;
+}
+
 .followingProcessSummary {
   margin-top: 6px;
 }

dashboard/src/components/TodoProgressPanel.tsx

@@ -1,10 +1,13 @@
 import {
   CheckCircle2,
+  ChevronDown,
   Circle,
   CircleDot,
+  ListChecks,
   Loader2,
   XCircle,
 } from "lucide-react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   countCompletedTodos,
@@ -33,11 +36,13 @@ export function TodoListView({
   isStreaming = false,
   className,
   variant = "inline",
+  showHeader = true,
 }: {
   items: readonly TodoListItem[];
   isStreaming?: boolean;
   className?: string;
   variant?: "inline" | "panel";
+  showHeader?: boolean;
 }) {
   const { t } = useTranslation();
   if (items.length === 0) return null;
@@ -54,18 +59,20 @@ export function TodoListView({
         .filter(Boolean)
         .join(" ")}
     >
-      <div className={styles.todoListHeader}>
-        <div className={styles.todoListTitle}>
-          {t("chatUsage.todoListTitle", "Task progress")}
+      {showHeader ? (
+        <div className={styles.todoListHeader}>
+          <div className={styles.todoListTitle}>
+            {t("chatUsage.todoListTitle", "Task progress")}
+          </div>
+          <div className={styles.todoListSummary}>
+            {t("chatUsage.todoListSummary", {
+              completed,
+              total: items.length,
+              defaultValue: "{{completed}}/{{total}} done",
+            })}
+          </div>
         </div>
-        <div className={styles.todoListSummary}>
-          {t("chatUsage.todoListSummary", {
-            completed,
-            total: items.length,
-            defaultValue: "{{completed}}/{{total}} done",
-          })}
-        </div>
-      </div>
+      ) : null}
       <ul className={styles.todoListItems}>
         {items.map((item) => (
           <li key={item.id} className={styles.todoListItem}>
@@ -102,14 +109,62 @@ export function TodoProgressPanel({
   isStreaming?: boolean;
   followingProcessSummary?: boolean;
 }) {
+  const { t } = useTranslation();
+  const [collapsed, setCollapsed] = useState(false);
+  const completed = countCompletedTodos(items);
+  const current =
+    items.find((item) => item.status === "in_progress") ||
+    items.find((item) => item.status === "pending");
+  const percent = items.length
+    ? Math.round((completed / items.length) * 100)
+    : 0;
   return (
-    <TodoListView
-      items={items}
-      isStreaming={isStreaming}
-      variant="panel"
-      className={
-        followingProcessSummary ? styles.followingProcessSummary : undefined
-      }
-    />
+    <div
+      className={`${styles.todoProgressPanel} ${
+        followingProcessSummary ? styles.followingProcessSummary : ""
+      }`}
+    >
+      <button
+        type="button"
+        className={styles.todoPanelHeader}
+        onClick={() => setCollapsed((value) => !value)}
+        aria-expanded={!collapsed}
+      >
+        <span className={styles.todoPanelIcon}>
+          <ListChecks size={15} />
+        </span>
+        <span className={styles.todoPanelHeading}>
+          <strong>{t("chatUsage.todoListTitle", "Task progress")}</strong>
+          <span>
+            {current?.content ||
+              t("chatUsage.todoListSummary", {
+                completed,
+                total: items.length,
+                defaultValue: "{{completed}}/{{total}} done",
+              })}
+          </span>
+        </span>
+        <span className={styles.todoPanelProgressMeta}>
+          {completed}/{items.length}
+        </span>
+        <ChevronDown
+          size={14}
+          className={`${styles.todoPanelChevron} ${
+            collapsed ? styles.todoPanelChevronCollapsed : ""
+          }`}
+        />
+      </button>
+      <div className={styles.todoPanelProgressTrack}>
+        <span style={{ width: `${percent}%` }} />
+      </div>
+      {!collapsed ? (
+        <TodoListView
+          items={items}
+          isStreaming={isStreaming}
+          showHeader={false}
+          className={styles.todoPanelList}
+        />
+      ) : null}
+    </div>
   );
 }

dashboard/src/hooks/useAgentThreadChat.ts

@@ -15,8 +15,14 @@ export function useAgentThreadChat(agentId: string | null) {
   const [booting, setBooting] = useState(false);
   const [bootError, setBootError] = useState<string | null>(null);
 
-  const { messages, isStreaming, sendMessage, cancelStream, loadHistory } =
-    useChat(threadId, agentId);
+  const {
+    messages,
+    isStreaming,
+    taskPlan,
+    sendMessage,
+    cancelStream,
+    loadHistory,
+  } = useChat(threadId, agentId);
 
   useEffect(() => {
     if (!agentId) {
@@ -83,6 +89,7 @@ export function useAgentThreadChat(agentId: string | null) {
     bootError,
     messages,
     isStreaming,
+    taskPlan,
     send,
     cancelStream,
   };