From ee8a115cf08933007836ac2ab6de3141ad4a7b1f Mon Sep 17 00:00:00 2001
From: lexlian <9305752+lexlian@users.noreply.github.com>
Date: Sat, 20 Jun 2026 22:48:20 +0800
Subject: [PATCH] fix(app): use For instead of Index for todo dock reactivity

The TodoList component rendered todos with Solid's <Index>, which only
re-renders on array length or item reference changes. The global todo
store updates via reconcile({ key: "id" }), preserving item references
for matched IDs, so in-place status/content changes were invisible to
<Index>. Switching to <For> diffs by value reference and re-runs the
render prop on item updates, matching the working TUI sidebar pattern
at packages/tui/src/feature-plugins/sidebar/todo.tsx.

Closes #33063
---
 .../session/composer/session-todo-dock.tsx    | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/app/src/pages/session/composer/session-todo-dock.tsx b/packages/app/src/pages/session/composer/session-todo-dock.tsx
index fccbeec1774e..f9b03fb6f707 100644
--- a/packages/app/src/pages/session/composer/session-todo-dock.tsx
+++ b/packages/app/src/pages/session/composer/session-todo-dock.tsx
@@ -7,7 +7,7 @@ import { useSpring } from "@opencode-ai/ui/motion-spring"
 import { TextReveal } from "@opencode-ai/ui/text-reveal"
 import { TextStrikethrough } from "@opencode-ai/ui/text-strikethrough"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
-import { Index, createEffect, createMemo } from "solid-js"
+import { Index, createEffect, createMemo, For } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useLanguage } from "@/context/language"
 
@@ -210,40 +210,40 @@ function TodoList(props: { todos: Todo[] }) {
           setStore("stuck", e.currentTarget.scrollTop > 0)
         }}
       >
-        <Index each={props.todos}>
+        <For each={props.todos}>
           {(todo) => (
             <Checkbox
               readOnly
-              checked={todo().status === "completed"}
-              indeterminate={todo().status === "in_progress"}
-              data-in-progress={todo().status === "in_progress" ? "" : undefined}
-              data-state={todo().status}
-              icon={dot(todo().status)}
+              checked={todo.status === "completed"}
+              indeterminate={todo.status === "in_progress"}
+              data-in-progress={todo.status === "in_progress" ? "" : undefined}
+              data-state={todo.status}
+              icon={dot(todo.status)}
               style={{
                 "--checkbox-align": "flex-start",
                 "--checkbox-offset": "1px",
                 transition: "opacity 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1))",
-                opacity: todo().status === "pending" ? "0.94" : "1",
+                opacity: todo.status === "pending" ? "0.94" : "1",
               }}
             >
               <TextStrikethrough
-                active={todo().status === "completed" || todo().status === "cancelled"}
-                text={todo().content}
+                active={todo.status === "completed" || todo.status === "cancelled"}
+                text={todo.content}
                 class="text-14-regular min-w-0 break-words"
                 style={{
                   "line-height": "var(--line-height-normal)",
                   transition:
                     "color 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)), opacity 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1))",
                   color:
-                    todo().status === "completed" || todo().status === "cancelled"
+                    todo.status === "completed" || todo.status === "cancelled"
                       ? "var(--text-weak)"
                       : "var(--text-strong)",
-                  opacity: todo().status === "pending" ? "0.92" : "1",
+                  opacity: todo.status === "pending" ? "0.92" : "1",
                 }}
               />
             </Checkbox>
           )}
-        </Index>
+        </For>
       </div>
       <div
         class="pointer-events-none absolute top-0 left-0 right-0 h-4 transition-opacity duration-150"