fix(app): guard comment accessor in message timeline (#17126)

packages/app/src/pages/session/message-timeline.tsx

@@ -778,31 +778,35 @@ export function MessageTimeline(props: {
                             <div class="flex w-max min-w-full justify-end gap-2">
                               <Index each={comments()}>
                                 {(commentAccessor: () => MessageComment) => {
-                                  const comment = createMemo(() => commentAccessor())
-                                  return (
-                                    <div class="shrink-0 max-w-[260px] rounded-[6px] border border-border-weak-base bg-background-stronger px-2.5 py-2">
-                                      <div class="flex items-center gap-1.5 min-w-0 text-11-medium text-text-strong">
-                                        <FileIcon
-                                          node={{ path: comment().path, type: "file" }}
-                                          class="size-3.5 shrink-0"
-                                        />
-                                        <span class="truncate">{getFilename(comment().path)}</span>
-                                        <Show when={comment().selection}>
-                                          {(selection) => (
-                                            <span class="shrink-0 text-text-weak">
-                                              {selection().startLine === selection().endLine
-                                                ? `:${selection().startLine}`
-                                                : `:${selection().startLine}-${selection().endLine}`}
-                                            </span>
-                                          )}
-                                        </Show>
-                                      </div>
-                                      <div class="pt-1 text-12-regular text-text-strong whitespace-pre-wrap break-words">
-                                        {comment().comment}
-                                      </div>
-                                    </div>
-                                  )
-                                }}
+                                   const comment = createMemo(() => commentAccessor())
+                                   return (
+                                     <Show when={comment()}>
+                                       {(c) => (
+                                         <div class="shrink-0 max-w-[260px] rounded-[6px] border border-border-weak-base bg-background-stronger px-2.5 py-2">
+                                           <div class="flex items-center gap-1.5 min-w-0 text-11-medium text-text-strong">
+                                             <FileIcon
+                                               node={{ path: c().path, type: "file" }}
+                                               class="size-3.5 shrink-0"
+                                             />
+                                             <span class="truncate">{getFilename(c().path)}</span>
+                                             <Show when={c().selection}>
+                                               {(selection) => (
+                                                 <span class="shrink-0 text-text-weak">
+                                                   {selection().startLine === selection().endLine
+                                                     ? `:${selection().startLine}`
+                                                     : `:${selection().startLine}-${selection().endLine}`}
+                                                 </span>
+                                               )}
+                                             </Show>
+                                           </div>
+                                           <div class="pt-1 text-12-regular text-text-strong whitespace-pre-wrap break-words">
+                                             {c().comment}
+                                           </div>
+                                         </div>
+                                       )}
+                                     </Show>
+                                   )
+                                 }}
                               </Index>
                             </div>
                           </div>