### Release notes Surface the agent's current plan (from `todo_write` tool calls) as a persistent "Plan" section in the session detail sidebar, so users can see task progress at a glance without expanding individual activity log entries. ### Problem to solve The `todo_write` tool is used by Duo Developer (and other flow agents) to track a plan as a list of tasks with statuses (`pending`, `in_progress`, `completed`, `cancelled`). Today, on the **session detail page** (`/groups/:group/-/automate/agent_sessions/:id`), this data is only visible inside collapsible activity log entries — users must manually expand each `todo_write` entry and guess which one is the latest. The **chat panel** already extracts and renders the latest todo state as a top-level plan card (via `message_tool_start_flow.vue`). The session detail page should do the same. ### Proposal Add a "Plan" section to `AgentFlowInfo` (the session info sidebar), below the existing session metadata. All building blocks already exist — no backend or GraphQL changes are needed. #### Changes 1. **`agent_flow_info.vue`** — Accept `duoMessages` and `status` as props, compute `latestTodoToolInfo` using the existing `WorkflowUtils.findLatestTodoToolInfo()`, render the existing `TodoChecklist` component in a new section titled "Plan". Add a progress summary line (e.g. "2 of 5 completed"). 2. **`agent_flow_details.vue`** — Add `duoMessages` and `status` to the `agentFlowInfoProps` computed object. Both are already available as props on this component. Because the template uses `v-bind="agentFlowInfoProps"` for both the full-page and side-panel instances of `AgentFlowInfo`, this single change covers both render sites. 3. **`todo_checklist.vue`** — Add an optional progress summary computed property. 4. **No backend changes** — `get_agent_flow.query.graphql` already fetches `latestCheckpoint.duoMessages.toolInfo`. #### Wireframe ``` ┌─────────────────────────────────────────────┐ │ Session information │ │ AI Item: developer/v1 │ │ Session ID: #42 │ │ Status: ● Running │ │ Started: Jun 18, 2026, 10:23 AM │ │ ... │ ├─────────────────────────────────────────────┤ │ ✅ Plan │ │ ┌─────────────────────────────────────────┐ │ │ │ ✓ Read duo_base_tool.py │ │ │ │ ✓ Create branch from main │ │ │ │ ◎ Extract pagination logic │ │ │ │ ○ Add pagination tests │ │ │ │ ○ Run test suite │ │ │ └─────────────────────────────────────────┘ │ │ 2 of 5 completed │ └─────────────────────────────────────────────┘ ``` #### Side panel behavior `agent_flow_details.vue` renders `AgentFlowInfo` in two places: - **Full-page view** (`!isSidePanelView`) — `AgentFlowInfo` is a static sidebar column. The Plan section is always visible alongside the activity log. - **Side panel view** (`isSidePanelView`) — `AgentFlowInfo` is wrapped in a `GlCollapse` toggled by `infoToggleStates` (Apollo `@client` reactive var keyed by `ai_panel:<workflowId>`). The Plan section appears/disappears with the rest of the session info when the user toggles the info panel. - **Maximized**: info panel renders as a 30%-width column to the right (`lg:gl-border-l`). `TodoChecklist` reflows naturally in this layout. - **Not maximized**: info panel stacks vertically above the activity log (`gl-border-b`). The Plan section sits between session metadata and the activity log. Since both render sites use `v-bind="agentFlowInfoProps"`, the plan section works identically in both contexts with no additional wiring. #### Existing building blocks | Component/Utility | File | Status | |---|---|---| | `findLatestTodoToolInfo()` | `ee/app/assets/javascripts/ai/duo_agentic_chat/utils/workflow_utils.js` | ✅ Written & tested | | `TodoChecklist.vue` | `ee/app/assets/javascripts/ai/duo_agents_platform/components/common/todo_checklist.vue` | ✅ Exists | | `TODO_STATUS_ICON` | `ee/app/assets/javascripts/ai/duo_agents_platform/constants.js` | ✅ Exists | | `toolMap` entry for `todo_write` | `ee/app/assets/javascripts/ai/duo_agents_platform/icon_utils.js` | ✅ Exists | | Chat panel reference impl | `ee/app/assets/javascripts/ai/duo_agentic_chat/components/messages/message_tool_start_flow.vue` | ✅ Working | #### Implementation notes - **Terminal state**: When the flow reaches a terminal status, `in_progress` items should show a static icon instead of a spinner. The existing `flowFinished` prop on `TodoChecklist` already handles this. - **Reactive updates**: The session detail page polls `getAgentFlow` while running. The plan section updates reactively as new `todo_write` events arrive — no subscription changes needed. - **No plan**: When `duoMessages` contains no `todo_write` entries (e.g., legacy workflows), the Plan section is simply not rendered. - **Feature flag**: Consider gating behind `duo_session_plan_section` for incremental rollout. ### Intended users * [Sasha (Software Developer)](https://handbook.gitlab.com/handbook/product/personas/#sasha-software-developer) ### Feature Usage Metrics Track impressions of the Plan section on the session detail page via an internal event when `hasPlan` is true on render. ### Does this feature require an audit event? No.