@neurocode-ai/app 1.18.8

package/src/pages/session/timeline/model.test.ts

@@ -0,0 +1,95 @@
+import { describe, expect, test } from "bun:test"
+import type { AssistantMessage, Message, UserMessage } from "@neurocode-ai/sdk/v2"
+import { isTimelineReady, loadOlderTimeline, selectUserMessages, selectVisibleUserMessages } from "./model"
+
+const user = (id: string) => ({ id, role: "user" }) as UserMessage
+const assistant = (id: string) => ({ id, role: "assistant" }) as AssistantMessage
+
+describe("timeline model", () => {
+  test("selects users and applies the revert boundary", () => {
+    const messages: Message[] = [user("msg_1"), assistant("msg_2"), user("msg_3"), user("msg_5")]
+    const users = selectUserMessages(messages)
+
+    expect(users.map((message) => message.id)).toEqual(["msg_1", "msg_3", "msg_5"])
+    expect(selectVisibleUserMessages(users, "msg_5").map((message) => message.id)).toEqual(["msg_1", "msg_3"])
+    expect(selectVisibleUserMessages(users)).toBe(users)
+  })
+
+  test("waits for an assistant-only load to hydrate its user root", () => {
+    expect(isTimelineReady([assistant("msg_2")], true)).toBe(false)
+    expect(isTimelineReady([user("msg_1"), assistant("msg_2")], true)).toBe(true)
+    expect(isTimelineReady([], false)).toBe(true)
+  })
+
+  test("loads exactly one opaque cursor page", async () => {
+    let calls = 0
+    const anchors: Array<string | boolean> = []
+
+    await loadOlderTimeline({
+      sessionID: () => "ses_test",
+      more: () => true,
+      loading: () => false,
+      loadMore: async () => {
+        calls += 1
+      },
+      before: () => anchors.push("before"),
+      after: (done) => anchors.push("after", done),
+    })
+
+    expect(calls).toBe(1)
+    expect(anchors).toEqual(["before", "after", true])
+  })
+
+  test("stops when a page adds no raw messages", async () => {
+    let calls = 0
+    await loadOlderTimeline({
+      sessionID: () => "ses_test",
+      more: () => true,
+      loading: () => false,
+      loadMore: async () => {
+        calls += 1
+      },
+    })
+
+    expect(calls).toBe(1)
+  })
+
+  test("does not restore an anchor after the session changes", async () => {
+    let sessionID = "ses_old"
+    let restore = 0
+
+    await loadOlderTimeline({
+      sessionID: () => sessionID,
+      more: () => true,
+      loading: () => false,
+      loadMore: async () => {
+        sessionID = "ses_new"
+      },
+      after: () => {
+        restore += 1
+      },
+    })
+
+    expect(restore).toBe(0)
+  })
+
+  test("releases the anchor when loading history fails", async () => {
+    let restore = 0
+
+    await expect(
+      loadOlderTimeline({
+        sessionID: () => "ses_test",
+        more: () => true,
+        loading: () => false,
+        loadMore: async () => {
+          throw new Error("history failed")
+        },
+        after: () => {
+          restore += 1
+        },
+      }),
+    ).rejects.toThrow("history failed")
+
+    expect(restore).toBe(1)
+  })
+})

package/src/pages/session/timeline/model.ts

@@ -0,0 +1,128 @@
+import type { Message, UserMessage } from "@neurocode-ai/sdk/v2"
+import { createMemo, createResource, onCleanup, untrack, type Accessor } from "solid-js"
+import { useServerSync } from "@/context/server-sync"
+import { useSync } from "@/context/sync"
+import { same } from "@/utils/same"
+
+const emptyUserMessages: UserMessage[] = []
+const sessionFreshness = 15_000
+
+export function createTimelineModel(input: {
+  sessionID: Accessor<string | undefined>
+  revertMessageID: Accessor<string | undefined>
+}) {
+  const serverSync = useServerSync()
+  const sync = useSync()
+  let refreshFrame: number | undefined
+  let refreshTimer: number | undefined
+
+  const [resource] = createResource(
+    () => input.sessionID(),
+    (id) => {
+      clearRefresh()
+      if (!id) return
+
+      const cached = untrack(() => sync().data.message[id] !== undefined)
+      const stale = cached && !serverSync().session.fresh(id, sessionFreshness)
+
+      refreshFrame = requestAnimationFrame(() => {
+        refreshFrame = undefined
+        refreshTimer = window.setTimeout(() => {
+          refreshTimer = undefined
+          if (input.sessionID() !== id) return
+          untrack(() => {
+            if (stale) void sync().session.sync(id, { force: true })
+          })
+        }, 0)
+      })
+
+      return sync().session.sync(id)
+    },
+  )
+  const messages = createMemo(() => {
+    const id = input.sessionID()
+    return id ? (sync().data.message[id] ?? []) : []
+  })
+  const ready = createMemo(() => {
+    const id = input.sessionID()
+    return !id || isTimelineReady(sync().data.message[id], serverSync().session.history.loading(id))
+  })
+  const userMessages = createMemo(() => selectUserMessages(messages()), emptyUserMessages, { equals: same })
+  const visibleUserMessages = createMemo(
+    () => {
+      return selectVisibleUserMessages(userMessages(), input.revertMessageID())
+    },
+    emptyUserMessages,
+    { equals: same },
+  )
+  const more = createMemo(() => {
+    const id = input.sessionID()
+    return id ? sync().session.history.more(id) : false
+  })
+  const loading = createMemo(() => {
+    const id = input.sessionID()
+    return id ? sync().session.history.loading(id) : false
+  })
+  const loadOlder = async (options?: { before?: () => void; after?: (done: boolean) => void }) => {
+    return loadOlderTimeline({
+      sessionID: input.sessionID,
+      more,
+      loading,
+      loadMore: (sessionID) => sync().session.history.loadMore(sessionID),
+      before: options?.before,
+      after: options?.after,
+    })
+  }
+
+  onCleanup(clearRefresh)
+
+  return {
+    history: { loadOlder, loading, more },
+    lastUserMessage: createMemo(() => visibleUserMessages().at(-1)),
+    messages,
+    ready,
+    resource,
+    userMessages,
+    visibleUserMessages,
+  }
+
+  function clearRefresh() {
+    if (refreshFrame !== undefined) cancelAnimationFrame(refreshFrame)
+    if (refreshTimer !== undefined) window.clearTimeout(refreshTimer)
+    refreshFrame = undefined
+    refreshTimer = undefined
+  }
+}
+
+export function selectUserMessages(messages: Message[]) {
+  return messages.filter((message): message is UserMessage => message.role === "user")
+}
+
+export function isTimelineReady(messages: Message[] | undefined, loading: boolean) {
+  return messages !== undefined && (messages.some((message) => message.role === "user") || !loading)
+}
+
+export function selectVisibleUserMessages(messages: UserMessage[], revertMessageID?: string) {
+  if (!revertMessageID) return messages
+  return messages.filter((message) => message.id < revertMessageID)
+}
+
+export async function loadOlderTimeline(input: {
+  sessionID: Accessor<string | undefined>
+  more: Accessor<boolean>
+  loading: Accessor<boolean>
+  loadMore: (sessionID: string) => Promise<void>
+  before?: () => void
+  after?: (done: boolean) => void
+}) {
+  const id = input.sessionID()
+  if (!id || !input.more() || input.loading()) return
+
+  input.before?.()
+  await input.loadMore(id).catch((error) => {
+    if (input.sessionID() === id) input.after?.(true)
+    throw error
+  })
+  if (input.sessionID() !== id) return
+  input.after?.(true)
+}

package/src/pages/session/timeline/observe-element-offset.test.ts

@@ -0,0 +1,199 @@
+import { expect, test } from "bun:test"
+import { type Virtualizer } from "@tanstack/solid-virtual"
+import { mutationNodesContainElement, observeElementOffsetReconnectAware } from "./observe-element-offset"
+
+test("matches only the scroll element or an ancestor containing it", () => {
+  const route = document.createElement("section")
+  const viewport = document.createElement("div")
+  const child = document.createElement("div")
+  const sibling = document.createElement("div")
+  route.append(viewport)
+  viewport.append(child)
+
+  expect(mutationNodesContainElement([viewport], viewport)).toBe(true)
+  expect(mutationNodesContainElement([route], viewport)).toBe(true)
+  expect(mutationNodesContainElement([child, sibling], viewport)).toBe(false)
+})
+
+test("reports a divergent native offset once and ignores equal offsets and unrelated mutations", async () => {
+  const route = document.createElement("section")
+  const viewport = document.createElement("div")
+  const unrelated = document.createElement("div")
+  route.append(viewport)
+  document.body.append(route)
+  const instance = {
+    scrollElement: viewport,
+    targetWindow: window,
+    scrollOffset: 79_400,
+    options: {
+      horizontal: false,
+      isRtl: false,
+      isScrollingResetDelay: 0,
+      useScrollendEvent: false,
+    },
+  } as unknown as Virtualizer<HTMLDivElement, HTMLDivElement>
+  const calls: [number, boolean][] = []
+  const cleanup = observeElementOffsetReconnectAware(instance, (offset, isScrolling) => {
+    calls.push([offset, isScrolling])
+    instance.scrollOffset = offset
+  })
+
+  document.body.append(unrelated)
+  unrelated.remove()
+  await frames(2)
+  expect(calls).toEqual([])
+
+  route.remove()
+  document.body.append(route)
+  await new Promise((resolve) => setTimeout(resolve, 0))
+  await frames(3)
+  expect(calls).toEqual([[0, false]])
+
+  route.remove()
+  document.body.append(route)
+  await new Promise((resolve) => setTimeout(resolve, 0))
+  await frames(3)
+  expect(calls).toEqual([[0, false]])
+
+  cleanup?.()
+  route.remove()
+})
+
+test("keeps checking until stale reset-delay callbacks can no longer win", async () => {
+  const route = document.createElement("section")
+  const viewport = document.createElement("div")
+  route.append(viewport)
+  document.body.append(route)
+  const instance = {
+    scrollElement: viewport,
+    targetWindow: window,
+    scrollOffset: 79_400,
+    options: {
+      horizontal: false,
+      isRtl: false,
+      isScrollingResetDelay: 20,
+      useScrollendEvent: false,
+    },
+  } as unknown as Virtualizer<HTMLDivElement, HTMLDivElement>
+  const calls: number[] = []
+  const cleanup = observeElementOffsetReconnectAware(instance, (offset) => {
+    calls.push(offset)
+    instance.scrollOffset = offset
+  })
+
+  route.remove()
+  document.body.append(route)
+  await new Promise((resolve) => setTimeout(resolve, 0))
+  await frames(1)
+  expect(instance.scrollOffset).toBe(0)
+
+  instance.scrollOffset = 79_400
+  await new Promise((resolve) => setTimeout(resolve, 25))
+  await frames(3)
+
+  expect(instance.scrollOffset).toBe(0)
+  expect(calls).toEqual([0, 0])
+  cleanup?.()
+  route.remove()
+})
+
+test.each([
+  { name: "LTR", isRtl: false, expected: 240 },
+  { name: "RTL", isRtl: true, expected: -240 },
+])("reports the TanStack horizontal $name offset after reconnect", async ({ isRtl, expected }) => {
+  const route = document.createElement("section")
+  const viewport = document.createElement("div")
+  route.append(viewport)
+  document.body.append(route)
+  viewport.scrollLeft = 240
+  const instance = {
+    scrollElement: viewport,
+    targetWindow: window,
+    scrollOffset: 0,
+    options: {
+      horizontal: true,
+      isRtl,
+      isScrollingResetDelay: 0,
+      useScrollendEvent: false,
+    },
+  } as unknown as Virtualizer<HTMLDivElement, HTMLDivElement>
+  const calls: [number, boolean][] = []
+  const cleanup = observeElementOffsetReconnectAware(instance, (offset, isScrolling) => {
+    calls.push([offset, isScrolling])
+    instance.scrollOffset = offset
+  })
+
+  route.remove()
+  document.body.append(route)
+  await new Promise((resolve) => setTimeout(resolve, 0))
+  await frames(3)
+
+  expect(calls).toEqual([[expected, false]])
+  cleanup?.()
+  route.remove()
+})
+
+test("cleanup suppresses an already queued delegated offset callback", async () => {
+  const viewport = document.createElement("div")
+  document.body.append(viewport)
+  viewport.scrollTop = 100
+  const instance = {
+    scrollElement: viewport,
+    targetWindow: window,
+    scrollOffset: 0,
+    options: {
+      horizontal: false,
+      isRtl: false,
+      isScrollingResetDelay: 10,
+      useScrollendEvent: false,
+    },
+  } as unknown as Virtualizer<HTMLDivElement, HTMLDivElement>
+  const calls: [number, boolean][] = []
+  const cleanup = observeElementOffsetReconnectAware(instance, (offset, isScrolling) =>
+    calls.push([offset, isScrolling]),
+  )
+
+  viewport.dispatchEvent(new Event("scroll"))
+  cleanup?.()
+  await new Promise((resolve) => setTimeout(resolve, 25))
+
+  expect(calls).toEqual([[100, true]])
+  viewport.remove()
+})
+
+test("cleanup cancels reconnect checks and delegated offset observation", async () => {
+  const route = document.createElement("section")
+  const viewport = document.createElement("div")
+  route.append(viewport)
+  document.body.append(route)
+  const instance = {
+    scrollElement: viewport,
+    targetWindow: window,
+    scrollOffset: 0,
+    options: {
+      horizontal: false,
+      isRtl: false,
+      isScrollingResetDelay: 50,
+      useScrollendEvent: false,
+    },
+  } as unknown as Virtualizer<HTMLDivElement, HTMLDivElement>
+  const calls: number[] = []
+  const cleanup = observeElementOffsetReconnectAware(instance, (offset) => calls.push(offset))
+
+  route.remove()
+  document.body.append(route)
+  await new Promise((resolve) => setTimeout(resolve, 0))
+  cleanup?.()
+  instance.scrollOffset = 100
+  viewport.dispatchEvent(new Event("scroll"))
+  await frames(4)
+
+  expect(calls).toEqual([])
+  route.remove()
+})
+
+async function frames(count: number) {
+  for (let index = 0; index < count; index++) {
+    await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
+  }
+}

package/src/pages/session/timeline/observe-element-offset.ts

@@ -0,0 +1,73 @@
+import { observeElementOffset, type Virtualizer } from "@tanstack/solid-virtual"
+
+export function observeElementOffsetReconnectAware<TScrollElement extends Element, TItemElement extends Element>(
+  instance: Virtualizer<TScrollElement, TItemElement>,
+  callback: (offset: number, isScrolling: boolean) => void,
+) {
+  let active = true
+  const deliver = (offset: number, isScrolling: boolean) => {
+    if (!active) return
+    callback(offset, isScrolling)
+  }
+  const cleanupOffset = observeElementOffset(instance, deliver)
+  const element = instance.scrollElement
+  const targetWindow = instance.targetWindow
+  const root = element?.closest("main") ?? element?.ownerDocument.body
+  if (!element || !targetWindow || !root)
+    return () => {
+      active = false
+      cleanupOffset?.()
+    }
+
+  let removed = false
+  let frame: number | undefined
+  const clearCheck = () => {
+    if (frame === undefined) return
+    targetWindow.cancelAnimationFrame(frame)
+    frame = undefined
+  }
+  const startCheck = () => {
+    clearCheck()
+    const deadline = targetWindow.performance.now() + instance.options.isScrollingResetDelay
+    let framesAfterDeadline = 0
+    const check = (time: number) => {
+      frame = undefined
+      if (element.isConnected) {
+        const offset = instance.options.horizontal
+          ? element.scrollLeft * (instance.options.isRtl ? -1 : 1)
+          : element.scrollTop
+        if (instance.scrollOffset === null || Math.abs(offset - instance.scrollOffset) > 1) deliver(offset, false)
+      }
+      if (time >= deadline) framesAfterDeadline += 1
+      if (framesAfterDeadline >= 2) return
+      frame = targetWindow.requestAnimationFrame(check)
+    }
+    frame = targetWindow.requestAnimationFrame(check)
+  }
+  const observer = new targetWindow.MutationObserver((records) => {
+    if (!active) return
+    records.forEach((record) => {
+      if (record.target === element || element.contains(record.target)) return
+      if (mutationNodesContainElement(record.removedNodes, element)) {
+        removed = true
+        clearCheck()
+      }
+      if (!removed || !element.isConnected || !mutationNodesContainElement(record.addedNodes, element)) return
+      removed = false
+      startCheck()
+    })
+  })
+  // Session routes are replaced below persistent main; body is the fallback for isolated hosts.
+  observer.observe(root, { childList: true, subtree: true })
+
+  return () => {
+    active = false
+    observer.disconnect()
+    clearCheck()
+    cleanupOffset?.()
+  }
+}
+
+export function mutationNodesContainElement(nodes: Iterable<Node>, element: Element) {
+  return [...nodes].some((node) => node === element || node.contains(element))
+}

package/src/pages/session/timeline/projection.test.ts

@@ -0,0 +1,96 @@
+import { describe, expect, test } from "bun:test"
+import type { PartGroup } from "@neurocode-ai/session-ui/message-part"
+import { reuseTimelineRows } from "./row-reconciliation"
+import { TimelineRow } from "./timeline-row"
+
+const context = (key: string, partIDs: string[], userMessageID = "user-1") =>
+  new TimelineRow.AssistantPart({
+    userMessageID,
+    group: {
+      key,
+      type: "context",
+      refs: partIDs.map((partID) => ({ messageID: "assistant-1", partID })),
+    } satisfies PartGroup,
+    previousAssistantPart: false,
+  })
+
+const user = (userMessageID = "user-1") => new TimelineRow.UserMessage({ userMessageID, anchor: true })
+const keys = (rows: TimelineRow.TimelineRow[]) => rows.map(TimelineRow.key)
+
+describe("reuseTimelineRows", () => {
+  test.each([
+    {
+      name: "reuses an unchanged context group",
+      previous: [context("context:a", ["a", "b"])],
+      rows: [context("context:a", ["a", "b"])],
+      expected: ["assistant-part:user-1:context:a"],
+      reused: [[0, 0]],
+    },
+    {
+      name: "preserves the group key when a member is appended",
+      previous: [context("context:a", ["a"])],
+      rows: [context("context:a", ["a", "b"])],
+      expected: ["assistant-part:user-1:context:a"],
+      reused: [],
+    },
+    {
+      name: "preserves the group key when the first member is removed",
+      previous: [context("context:a", ["a", "b"])],
+      rows: [context("context:b", ["b"])],
+      expected: ["assistant-part:user-1:context:a"],
+      reused: [],
+    },
+    {
+      name: "lets only the natural owner retain an old key after a split",
+      previous: [context("context:a", ["a", "b"])],
+      rows: [context("context:a", ["a"]), context("context:b", ["b"])],
+      expected: ["assistant-part:user-1:context:a", "assistant-part:user-1:context:b"],
+      reused: [],
+    },
+    {
+      name: "chooses the earliest prior key when groups merge",
+      previous: [context("context:a", ["a"]), context("context:b", ["b"])],
+      rows: [context("context:b", ["b", "a"])],
+      expected: ["assistant-part:user-1:context:a"],
+      reused: [],
+    },
+    {
+      name: "reserves an old key for its natural owner when two new groups compete",
+      previous: [context("context:a", ["a", "b"])],
+      rows: [context("context:b", ["b"]), context("context:a", ["a"])],
+      expected: ["assistant-part:user-1:context:b", "assistant-part:user-1:context:a"],
+      reused: [],
+    },
+    {
+      name: "does not reuse context identity across user messages",
+      previous: [context("context:a", ["a", "b"], "user-1")],
+      rows: [context("context:b", ["b"], "user-2")],
+      expected: ["assistant-part:user-2:context:b"],
+      reused: [],
+    },
+    {
+      name: "reuses an unaffected ordinary row",
+      previous: [user()],
+      rows: [user()],
+      expected: ["user-message:user-1"],
+      reused: [[0, 0]],
+    },
+    {
+      name: "does not create accidental key collisions",
+      previous: [context("context:a", ["a", "b", "c"])],
+      rows: [context("context:b", ["b"]), context("context:a", ["a"]), context("context:c", ["c"])],
+      expected: [
+        "assistant-part:user-1:context:b",
+        "assistant-part:user-1:context:a",
+        "assistant-part:user-1:context:c",
+      ],
+      reused: [],
+    },
+  ])("$name", ({ previous, rows, expected, reused }) => {
+    const result = reuseTimelineRows([...previous], [...rows])
+
+    expect(keys(result)).toEqual([...expected])
+    expect(new Set(keys(result)).size).toBe(result.length)
+    reused.forEach(([resultIndex, previousIndex]) => expect(result[resultIndex]).toBe(previous[previousIndex]))
+  })
+})

package/src/pages/session/timeline/projection.ts

@@ -0,0 +1,81 @@
+import type { SessionMessageInfo } from "@neurocode-ai/client/promise"
+import type { AssistantMessage, Message, Part, SessionStatus, UserMessage } from "@neurocode-ai/sdk/v2"
+import { createMemo, type Accessor } from "solid-js"
+import { reuseTimelineRows } from "./row-reconciliation"
+import { Timeline, TimelineRow } from "./rows"
+
+export { reuseTimelineRows } from "./row-reconciliation"
+
+export function createTimelineProjection(input: {
+  messages: Accessor<Message[]>
+  userMessages: Accessor<UserMessage[]>
+  sessionMessages: Accessor<SessionMessageInfo[]>
+  parts: (messageID: string) => Part[]
+  status: Accessor<SessionStatus>
+  showReasoningSummaries: Accessor<boolean>
+  inlineComments: Accessor<boolean>
+}) {
+  const messageByID = createMemo(() => new Map(input.messages().map((message) => [message.id, message] as const)))
+  const assistantMessagesByParent = createMemo(() => {
+    const result = new Map<string, AssistantMessage[]>()
+    input.messages().forEach((message) => {
+      if (message.role !== "assistant") return
+      const messages = result.get(message.parentID)
+      if (messages) {
+        messages.push(message)
+        return
+      }
+      result.set(message.parentID, [message])
+    })
+    return result
+  })
+  const projection = createMemo(() =>
+    Timeline.constructSessionMessageRows(
+      input.sessionMessages(),
+      (messageID) => messageByID().get(messageID) as UserMessage | AssistantMessage | undefined,
+      input.parts,
+      input.showReasoningSummaries(),
+      input.status().type,
+      input.inlineComments(),
+      input.userMessages(),
+    ),
+  )
+  const activeMessageID = createMemo(() => projection().activeMessageID)
+  const rows = createMemo((previous: TimelineRow.TimelineRow[] | undefined) =>
+    reuseTimelineRows(previous, projection().rows),
+  )
+  const rowByKey = createMemo(() => new Map(rows().map((row) => [TimelineRow.key(row), row] as const)))
+  const messageRowIndex = createMemo(() => {
+    const result = new Map<string, number>()
+    rows().forEach((row, index) => {
+      if (!("userMessageID" in row) || result.has(row.userMessageID)) return
+      result.set(row.userMessageID, index)
+    })
+    return result
+  })
+  const messageLastRowIndex = createMemo(() => {
+    const result = new Map<string, number>()
+    rows().forEach((row, index) => {
+      if ("userMessageID" in row) result.set(row.userMessageID, index)
+    })
+    return result
+  })
+  const lastAssistantGroupKey = createMemo(() => {
+    const result = new Map<string, string>()
+    rows().forEach((row) => {
+      if (row._tag === "AssistantPart") result.set(row.userMessageID, row.group.key)
+    })
+    return result
+  })
+
+  return {
+    activeMessageID,
+    assistantMessagesByParent,
+    lastAssistantGroupKey,
+    messageByID,
+    messageRowIndex,
+    messageLastRowIndex,
+    rowByKey,
+    rows,
+  }
+}