You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Adds /todos (alias /todo) to the TUI: a dialog showing the agent's live task list for the current session. Everything below the dialog already existed (the todowrite tool, the todo table, the todo.updated SSE event, and the sync store's todo map), so the dialog is a pure read of reactive state and updates in place while the agent works, no polling:
consttodos=createMemo(()=>sync.data.todo[props.sessionID]??[])// ...<Showwhen={todos().length>0}fallback={<textfg={theme.textMuted}>No todos in this session yet</text>}><box><Foreach={todos()}>{(item)=><TodoItemstatus={item.status}content={item.content}/>}</For></box><textfg={theme.textMuted}>{done()}/{todos().length}completed</text></Show>
Unlike the existing sidebar todo panel, which hides itself once every item is completed and needs a wide terminal (or the overlay toggle), the dialog shows the full list including completed items and works at any width. Rows reuse the existing TodoItem component so styling stays consistent with the sidebar and transcript renderings.
How did you verify your code works?
bunx tsgo --noEmit in packages/tui: clean
bun test in packages/tui: 198 pass
Screenshots / recordings
N/A (dialog reuses the existing TodoItem rows; no new visual language)
Checklist
I have tested my changes locally
I have not included unrelated changes in this PR
Need help on this PR? Tag @codesmith-bot with what you need. Autofix is enabled.
Summary by CodeRabbit
New Features
Added a live todo list dialog for sessions, showing completed items and progress counts.
Added /todos and /todo commands to open the todo list for the current session.
Added an empty state and escape control for easier navigation.
Adds a DialogTodos component that displays synchronized session todos, including completed items and counts. Adds /todos and /todo session commands to open the dialog for the active session.
Changes
Session todo viewing
Layer / File(s)
Summary
Todo dialog rendering packages/tui/src/component/dialog-todos.tsx
Adds DialogTodos with synchronized todo data, completion counts, empty-state rendering, and escape dismissal.
Session todo command packages/tui/src/routes/session/index.tsx
Adds the View todos command with /todos and /todo aliases. The command opens DialogTodos for the active session.
sequenceDiagram
participant User
participant SessionCommand
participant DialogTodos
participant SyncStore
User->>SessionCommand: Execute /todos or /todo
SessionCommand->>DialogTodos: Open for active session
DialogTodos->>SyncStore: Read session todos
SyncStore-->>DialogTodos: Return todos including completed items
DialogTodos-->>User: Render todo list and completion count
The title clearly identifies the new TUI /todos command and its purpose of viewing the agent task list.
Description check
✅ Passed
The description includes the issue, change type, implementation details, verification results, UI note, and completed checklist.
Linked Issues check
✅ Passed
The changes implement issue #70 by adding /todos and /todo, showing all session tasks reactively, including completed items, in a dialog suitable for narrow terminals.
Out of Scope Changes check
✅ Passed
The changes are limited to the todos dialog and session command wiring, which directly support the linked issue objectives.
Docstring Coverage
✅ Passed
No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing Touches📝 Generate docstrings
Create stacked PR
Commit on current branch
🧪 Generate unit tests (beta)
Create PR with unit tests
Commit unit tests in branch todos-command
Warning
There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.
🔧 ESLint
If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.
ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration.
Comment @coderabbitai help to get the list of available commands.
We reviewed changes in ba2adba...a6ee57e on this pull request. Below is the summary for the review, and you can see the individual issues we found as inline review comments.
AI Review is run only on demand for your team. We're only showing results of static analysis review right now. To trigger AI Review, comment @deepsourcebot review on this thread.
Line 18 destructures theme from the theme context. Keep the context object and access themeContext.theme to preserve object context.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/tui/src/component/dialog-todos.tsx` at line 18, Update the theme
access in the component to retain the object returned by useTheme, then read the
value through themeContext.theme instead of destructuring theme. Preserve the
existing theme usage behavior.
Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@packages/tui/src/component/dialog-todos.tsx`:
- Line 18: Update the theme access in the component to retain the object
returned by useTheme, then read the value through themeContext.theme instead of
destructuring theme. Preserve the existing theme usage behavior.
ℹ️ Review info⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 50bb9016-2849-4864-a327-70ab441bdb29
📥 Commits
Reviewing files that changed from the base of the PR and between ba2adba and a6ee57e.
The reason will be displayed to describe this comment to others. Learn more.
Unexpected function declaration in the global scope, wrap in an IIFE for a local variable, assign as global property for a global variable
It is considered a best practice to avoid 'polluting' the global scope with variables that are intended to be local to the script. Global variables created from a script can produce name collisions with global variables created from another script, which will usually lead to runtime errors or unexpected behavior. It is mostly useful for browser scripts.
The reason will be displayed to describe this comment to others. Learn more.
This is an ES module export at module scope, not a global-scope declaration; it matches the export pattern of every other dialog component in the TUI package.
The reason will be displayed to describe this comment to others. Learn more.
Unknown property 'paddingLeft' found
React components use JSX, not HTML.
So we need to use JSX attributes and React replicate the respective HTML property/attribute while rendering.
Use of HTML property in JSX can sometimes lead to errors.
For example, class is a keyword in JavaScript (JSX is an extension of JavaScript), so it will throw an error.
However, in HTML it is a valid attribute.
Note: If you use React with Web Components, use the class attribute instead.
The reason will be displayed to describe this comment to others. Learn more.
Unknown property 'paddingRight' found
React components use JSX, not HTML.
So we need to use JSX attributes and React replicate the respective HTML property/attribute while rendering.
Use of HTML property in JSX can sometimes lead to errors.
For example, class is a keyword in JavaScript (JSX is an extension of JavaScript), so it will throw an error.
However, in HTML it is a valid attribute.
Note: If you use React with Web Components, use the class attribute instead.
The reason will be displayed to describe this comment to others. Learn more.
False positive: this is a SolidJS component using @OpenTui's terminal renderer, where paddingRight is a valid prop on the box intrinsic element; React DOM rules do not apply.
The reason will be displayed to describe this comment to others. Learn more.
Unknown property 'gap' found
React components use JSX, not HTML.
So we need to use JSX attributes and React replicate the respective HTML property/attribute while rendering.
Use of HTML property in JSX can sometimes lead to errors.
For example, class is a keyword in JavaScript (JSX is an extension of JavaScript), so it will throw an error.
However, in HTML it is a valid attribute.
Note: If you use React with Web Components, use the class attribute instead.
The reason will be displayed to describe this comment to others. Learn more.
Unknown property 'paddingBottom' found
React components use JSX, not HTML.
So we need to use JSX attributes and React replicate the respective HTML property/attribute while rendering.
Use of HTML property in JSX can sometimes lead to errors.
For example, class is a keyword in JavaScript (JSX is an extension of JavaScript), so it will throw an error.
However, in HTML it is a valid attribute.
Note: If you use React with Web Components, use the class attribute instead.
The reason will be displayed to describe this comment to others. Learn more.
Unknown property 'fg' found
React components use JSX, not HTML.
So we need to use JSX attributes and React replicate the respective HTML property/attribute while rendering.
Use of HTML property in JSX can sometimes lead to errors.
For example, class is a keyword in JavaScript (JSX is an extension of JavaScript), so it will throw an error.
However, in HTML it is a valid attribute.
Note: If you use React with Web Components, use the class attribute instead.
The reason will be displayed to describe this comment to others. Learn more.
Unknown property 'attributes' found
React components use JSX, not HTML.
So we need to use JSX attributes and React replicate the respective HTML property/attribute while rendering.
Use of HTML property in JSX can sometimes lead to errors.
For example, class is a keyword in JavaScript (JSX is an extension of JavaScript), so it will throw an error.
However, in HTML it is a valid attribute.
Note: If you use React with Web Components, use the class attribute instead.
The reason will be displayed to describe this comment to others. Learn more.
Unknown property 'fg' found
React components use JSX, not HTML.
So we need to use JSX attributes and React replicate the respective HTML property/attribute while rendering.
Use of HTML property in JSX can sometimes lead to errors.
For example, class is a keyword in JavaScript (JSX is an extension of JavaScript), so it will throw an error.
However, in HTML it is a valid attribute.
Note: If you use React with Web Components, use the class attribute instead.
The reason will be displayed to describe this comment to others. Learn more.
Unknown property 'fg' found
React components use JSX, not HTML.
So we need to use JSX attributes and React replicate the respective HTML property/attribute while rendering.
Use of HTML property in JSX can sometimes lead to errors.
For example, class is a keyword in JavaScript (JSX is an extension of JavaScript), so it will throw an error.
However, in HTML it is a valid attribute.
Note: If you use React with Web Components, use the class attribute instead.
The reason will be displayed to describe this comment to others. Learn more.
Unknown property 'fg' found
React components use JSX, not HTML.
So we need to use JSX attributes and React replicate the respective HTML property/attribute while rendering.
Use of HTML property in JSX can sometimes lead to errors.
For example, class is a keyword in JavaScript (JSX is an extension of JavaScript), so it will throw an error.
However, in HTML it is a valid attribute.
Note: If you use React with Web Components, use the class attribute instead.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
![deepsource-io[bot]](https://avatars.githubusercontent.com/in/16372?s=60&v=4){kind=small}
Issue for this PR
Closes #70
Type of change
What does this PR do?
Adds
/todos(alias/todo) to the TUI: a dialog showing the agent's live task list for the current session. Everything below the dialog already existed (thetodowritetool, thetodotable, thetodo.updatedSSE event, and the sync store'stodomap), so the dialog is a pure read of reactive state and updates in place while the agent works, no polling:Unlike the existing sidebar todo panel, which hides itself once every item is completed and needs a wide terminal (or the overlay toggle), the dialog shows the full list including completed items and works at any width. Rows reuse the existing
TodoItemcomponent so styling stays consistent with the sidebar and transcript renderings.How did you verify your code works?
bunx tsgo --noEmitinpackages/tui: cleanbun testinpackages/tui: 198 passScreenshots / recordings
N/A (dialog reuses the existing TodoItem rows; no new visual language)
Checklist
Need help on this PR? Tag
@codesmith-botwith what you need. Autofix is enabled.Summary by CodeRabbit
/todosand/todocommands to open the todo list for the current session.