OpenTUI is here (#2685)

packages/opencode/src/cli/cmd/tui/routes/session/dialog-timeline.tsx

@@ -0,0 +1,37 @@
+import { createMemo, onMount } from "solid-js"
+import { useSync } from "@tui/context/sync"
+import { DialogSelect, type DialogSelectOption } from "@tui/ui/dialog-select"
+import type { TextPart } from "@opencode-ai/sdk"
+import { Locale } from "@/util/locale"
+import { DialogMessage } from "./dialog-message"
+import { useDialog } from "../../ui/dialog"
+
+export function DialogTimeline(props: { sessionID: string; onMove: (messageID: string) => void }) {
+  const sync = useSync()
+  const dialog = useDialog()
+
+  onMount(() => {
+    dialog.setSize("large")
+  })
+
+  const options = createMemo((): DialogSelectOption<string>[] => {
+    const messages = sync.data.message[props.sessionID] ?? []
+    const result = [] as DialogSelectOption<string>[]
+    for (const message of messages) {
+      if (message.role !== "user") continue
+      const part = (sync.data.part[message.id] ?? []).find((x) => x.type === "text" && !x.synthetic) as TextPart
+      if (!part) continue
+      result.push({
+        title: part.text.replace(/\n/g, " "),
+        value: message.id,
+        footer: Locale.time(message.time.created),
+        onSelect: (dialog) => {
+          dialog.replace(() => <DialogMessage messageID={message.id} sessionID={props.sessionID} />)
+        },
+      })
+    }
+    return result
+  })
+
+  return <DialogSelect onMove={(option) => props.onMove(option.value)} title="Timeline" options={options()} />
+}