indent wrapped todo items properly

3 files changed, 36 insertions, 12 deletions

diff --git a/packages/opencode/src/cli/cmd/tui/component/todo-item.tsx b/packages/opencode/src/cli/cmd/tui/component/todo-item.tsx
new file mode 100644
index 000000000..71c7db0fc
--- /dev/null
+++ b/packages/opencode/src/cli/cmd/tui/component/todo-item.tsx
@@ -0,0 +1,32 @@
+import { useTheme } from "../context/theme"
+
+export interface TodoItemProps {
+  status: string
+  content: string
+}
+
+export function TodoItem(props: TodoItemProps) {
+  const { theme } = useTheme()
+
+  return (
+    <box flexDirection="row" gap={0}>
+      <text
+        flexShrink={0}
+        style={{
+          fg: props.status === "in_progress" ? theme.success : theme.textMuted,
+        }}
+      >
+        [{props.status === "completed" ? "✓" : " "}]{" "}
+      </text>
+      <text
+        flexGrow={1}
+        wrapMode="word"
+        style={{
+          fg: props.status === "in_progress" ? theme.success : theme.textMuted,
+        }}
+      >
+        {props.content}
+      </text>
+    </box>
+  )
+}
diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
index 826fa2acf..c685d8c66 100644
--- a/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
+++ b/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
@@ -48,6 +48,7 @@ import { useKeybind } from "@tui/context/keybind"
 import { Header } from "./header"
 import { parsePatch } from "diff"
 import { useDialog } from "../../ui/dialog"
+import { TodoItem } from "../../component/todo-item"
 import { DialogMessage } from "./dialog-message"
 import type { PromptInfo } from "../../component/prompt/history"
 import { iife } from "@/util/iife"
@@ -1849,11 +1850,7 @@ ToolRegistry.register<typeof TodoWriteTool>({
         <Show when={props.metadata.todos?.length}>
           <box>
             <For each={props.input.todos ?? []}>
-              {(todo) => (
-                <text style={{ fg: todo.status === "in_progress" ? theme.success : theme.textMuted }}>
-                  [{todo.status === "completed" ? "✓" : " "}] {todo.content}
-                </text>
-              )}
+              {(todo) => <TodoItem status={todo.status} content={todo.content} />}
             </For>
           </box>
         </Show>
diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx
index 0bc4e860f..22f2ecc0d 100644
--- a/packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx
+++ b/packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx
@@ -10,6 +10,7 @@ import { Installation } from "@/installation"
 import { useKeybind } from "../../context/keybind"
 import { useDirectory } from "../../context/directory"
 import { useKV } from "../../context/kv"
+import { TodoItem } from "../../component/todo-item"
 
 export function Sidebar(props: { sessionID: string }) {
   const sync = useSync()
@@ -215,13 +216,7 @@ export function Sidebar(props: { sessionID: string }) {
                   </text>
                 </box>
                 <Show when={todo().length <= 2 || expanded.todo}>
-                  <For each={todo()}>
-                    {(todo) => (
-                      <text style={{ fg: todo.status === "in_progress" ? theme.success : theme.textMuted }}>
-                        [{todo.status === "completed" ? "✓" : " "}] {todo.content}
-                      </text>
-                    )}
-                  </For>
+                  <For each={todo()}>{(todo) => <TodoItem status={todo.status} content={todo.content} />}</For>
                 </Show>
               </box>
             </Show>