@neurocode-ai/app 1.18.8

package/src/pages/session/review-tab.tsx

@@ -0,0 +1,172 @@
+import { createEffect, onCleanup, type JSX } from "solid-js"
+import { makeEventListener } from "@solid-primitives/event-listener"
+import type { SnapshotFileDiff, VcsFileDiff } from "@neurocode-ai/sdk/v2"
+import type { FileDiffInfo } from "@neurocode-ai/client/promise"
+import { SessionReview } from "@neurocode-ai/session-ui/session-review"
+import type {
+  SessionReviewCommentActions,
+  SessionReviewCommentDelete,
+  SessionReviewCommentUpdate,
+} from "@neurocode-ai/session-ui/session-review"
+import type { SelectedLineRange } from "@/context/file"
+import { useSDK } from "@/context/sdk"
+import { useLayout } from "@/context/layout"
+import type { LineComment } from "@/context/comments"
+
+export type DiffStyle = "unified" | "split"
+
+type ReviewDiff = FileDiffInfo | SnapshotFileDiff | VcsFileDiff
+
+export interface SessionReviewTabProps {
+  title?: JSX.Element
+  empty?: JSX.Element
+  diffs: () => ReviewDiff[]
+  view: () => ReturnType<ReturnType<typeof useLayout>["view"]>
+  diffStyle: DiffStyle
+  onDiffStyleChange?: (style: DiffStyle) => void
+  onViewFile?: (file: string) => void
+  onLineComment?: (comment: { file: string; selection: SelectedLineRange; comment: string; preview?: string }) => void
+  onLineCommentUpdate?: (comment: SessionReviewCommentUpdate) => void
+  onLineCommentDelete?: (comment: SessionReviewCommentDelete) => void
+  lineCommentActions?: SessionReviewCommentActions
+  comments?: LineComment[]
+  focusedComment?: { file: string; id: string } | null
+  onFocusedCommentChange?: (focus: { file: string; id: string } | null) => void
+  focusedFile?: string
+  onScrollRef?: (el: HTMLDivElement | undefined) => void
+  commentMentions?: {
+    items: (query: string) => string[] | Promise<string[]>
+  }
+  classes?: {
+    root?: string
+    header?: string
+    container?: string
+  }
+}
+
+export function SessionReviewTab(props: SessionReviewTabProps) {
+  let scroll: HTMLDivElement | undefined
+  let restoreFrame: number | undefined
+  let userInteracted = false
+  let restored: { x: number; y: number } | undefined
+
+  const sdk = useSDK()
+  const layout = useLayout()
+
+  const readFile = async (path: string) => {
+    return sdk()
+      .client.file.read({ path })
+      .then((x) => x.data)
+      .catch((error) => {
+        console.debug("[session-review] failed to read file", { path, error })
+        return undefined
+      })
+  }
+
+  const handleInteraction = () => {
+    userInteracted = true
+
+    if (restoreFrame !== undefined) {
+      cancelAnimationFrame(restoreFrame)
+      restoreFrame = undefined
+    }
+  }
+
+  const doRestore = () => {
+    restoreFrame = undefined
+    const el = scroll
+    if (!el || !layout.ready() || userInteracted) return
+    if (el.clientHeight === 0 || el.clientWidth === 0) return
+
+    const s = props.view().scroll("review")
+    if (!s || (s.x === 0 && s.y === 0)) return
+
+    const maxY = Math.max(0, el.scrollHeight - el.clientHeight)
+    const maxX = Math.max(0, el.scrollWidth - el.clientWidth)
+
+    const targetY = Math.min(s.y, maxY)
+    const targetX = Math.min(s.x, maxX)
+
+    if (el.scrollTop === targetY && el.scrollLeft === targetX) return
+
+    if (el.scrollTop !== targetY) el.scrollTop = targetY
+    if (el.scrollLeft !== targetX) el.scrollLeft = targetX
+    restored = { x: el.scrollLeft, y: el.scrollTop }
+  }
+
+  const queueRestore = () => {
+    if (userInteracted || restoreFrame !== undefined) return
+    restoreFrame = requestAnimationFrame(doRestore)
+  }
+
+  const handleScroll = (event: Event & { currentTarget: HTMLDivElement }) => {
+    const el = event.currentTarget
+    const prev = restored
+    if (prev && el.scrollTop === prev.y && el.scrollLeft === prev.x) {
+      restored = undefined
+      return
+    }
+
+    restored = undefined
+    handleInteraction()
+    if (!layout.ready()) return
+    if (el.clientHeight === 0 || el.clientWidth === 0) return
+
+    props.view().setScroll("review", {
+      x: el.scrollLeft,
+      y: el.scrollTop,
+    })
+  }
+
+  createEffect(() => {
+    props.diffs().length
+    props.diffStyle
+    if (!layout.ready()) return
+    queueRestore()
+  })
+
+  onCleanup(() => {
+    if (restoreFrame !== undefined) cancelAnimationFrame(restoreFrame)
+    props.onScrollRef?.(undefined)
+  })
+
+  return (
+    <SessionReview
+      title={props.title}
+      empty={props.empty}
+      scrollRef={(el) => {
+        scroll = el
+        makeEventListener(el, "wheel", handleInteraction, { passive: true, capture: true })
+        makeEventListener(el, "mousewheel", handleInteraction, { passive: true, capture: true })
+        makeEventListener(el, "pointerdown", handleInteraction, { passive: true, capture: true })
+        makeEventListener(el, "touchstart", handleInteraction, { passive: true, capture: true })
+        makeEventListener(el, "keydown", handleInteraction, { capture: true })
+        props.onScrollRef?.(el)
+        queueRestore()
+      }}
+      onScroll={handleScroll}
+      onDiffRendered={queueRestore}
+      open={props.view().review.open()}
+      onOpenChange={props.view().review.setOpen}
+      classes={{
+        root: props.classes?.root ?? "pr-3",
+        header: props.classes?.header ?? "px-3",
+        container: props.classes?.container ?? "pl-3",
+      }}
+      diffs={props.diffs()}
+      diffStyle={props.diffStyle}
+      onDiffStyleChange={props.onDiffStyleChange}
+      onViewFile={props.onViewFile}
+      focusedFile={props.focusedFile}
+      readFile={readFile}
+      onLineComment={props.onLineComment}
+      onLineCommentUpdate={props.onLineCommentUpdate}
+      onLineCommentDelete={props.onLineCommentDelete}
+      lineCommentActions={props.lineCommentActions}
+      lineCommentMention={props.commentMentions}
+      comments={props.comments}
+      focusedComment={props.focusedComment}
+      onFocusedCommentChange={props.onFocusedCommentChange}
+    />
+  )
+}

package/src/pages/session/session-layout.ts

@@ -0,0 +1,30 @@
+import { useParams } from "@solidjs/router"
+import { createMemo } from "solid-js"
+import { useLayout } from "@/context/layout"
+import { SessionRouteKey, SessionStateKey } from "@/utils/server-scope"
+import { useSDK } from "@/context/sdk"
+import { useServerSDK } from "@/context/server-sdk"
+import { base64Encode } from "@neurocode-ai/core/util/encode"
+
+export const useSessionKey = () => {
+  const params = useParams()
+  const sdk = useSDK()
+  const serverSDK = useServerSDK()
+  const scope = createMemo(() => serverSDK().scope)
+  const directory = createMemo(() => base64Encode(sdk().directory))
+  const workspaceKey = createMemo(() => SessionStateKey.from(scope(), SessionRouteKey.fromRoute(directory())))
+  const sessionKey = createMemo(() => SessionStateKey.from(scope(), SessionRouteKey.fromRoute(directory(), params.id)))
+  return { params, sessionKey, workspaceKey }
+}
+
+export const useSessionLayout = () => {
+  const layout = useLayout()
+  const { params, sessionKey, workspaceKey } = useSessionKey()
+  return {
+    params,
+    sessionKey,
+    workspaceKey,
+    tabs: createMemo(() => layout.tabs(sessionKey)),
+    view: createMemo(() => layout.view(sessionKey)),
+  }
+}

package/src/pages/session/session-lineage.ts

@@ -0,0 +1,69 @@
+import { createEffect, createMemo, createSignal, on, onCleanup } from "solid-js"
+import { sessionNotFoundError } from "@/utils/server-errors"
+
+type LineageStore<T> = { peek: (id: string) => T | undefined; resolve: (id: string) => Promise<unknown> }
+
+type Resolution<T> = { id: string; store: LineageStore<T> } & (
+  | { state: "pending" }
+  | { state: "settled" }
+  | { state: "failed"; failure: unknown }
+)
+
+// Reactive session lineage for the target session route, read from the sync store.
+// All session tabs on a server share one route instance, so the target session ID
+// changes in place; the effect is only a trigger that starts resolution for the
+// current target, and each run cancels the previous one through onCleanup so a
+// late result from an abandoned target is dropped. Resolution is imperative rather
+// than a resource on purpose: a resource created here would be created inside the
+// router's navigation transition, and suspending that transition deadlocks the URL
+// commit and double-mounts the session header portals from the transition's shadow
+// render.
+//
+// The returned accessor is a pure derivation. The sync cache is authoritative, and
+// status only applies while it matches the current target (store + session ID): on
+// navigation or store replacement the memo re-evaluates before the trigger runs,
+// so trusting a previous target's settlement would fabricate a not-found for a
+// session that simply has not resolved yet. Resolve failures rethrow on read so
+// the enclosing SessionRouteErrorBoundary renders the scoped session error.
+export function createSessionLineage<T>(sessionID: () => string, lineage: () => LineageStore<T>) {
+  const cached = createMemo(() => lineage().peek(sessionID()))
+  const [status, setStatus] = createSignal<Resolution<T>>()
+
+  createEffect(
+    on([sessionID, lineage] as const, ([id, store]) => {
+      let stale = false
+      onCleanup(() => {
+        stale = true
+      })
+      if (cached()) {
+        setStatus({ id, store, state: "settled" })
+        return
+      }
+      setStatus({ id, store, state: "pending" })
+      store
+        .resolve(id)
+        .then(() => {
+          if (!stale) setStatus({ id, store, state: "settled" })
+        })
+        .catch((failure) => {
+          if (!stale) setStatus({ id, store, state: "failed", failure })
+        })
+    }),
+  )
+
+  return createMemo(() => {
+    const id = sessionID()
+    const value = cached()
+    if (value) return value
+    const state = status()
+    if (state?.id !== id || state.store !== lineage()) return undefined
+    if (state.state === "failed") throw state.failure
+    // The viewed session is pinned (DirectoryDataProvider, directory-layout.tsx)
+    // and pinned lineages are exempt from cache pruning, so a lineage missing
+    // after settlement means the session (or an ancestor) was deleted, possibly
+    // by another client. Match the resolve error so the boundary shows the
+    // session not found fallback.
+    if (state.state === "settled") throw sessionNotFoundError(id)
+    return undefined
+  })
+}

package/src/pages/session/session-model-helpers.test.ts

@@ -0,0 +1,151 @@
+import { describe, expect, test } from "bun:test"
+import type { UserMessage } from "@neurocode-ai/sdk/v2"
+import { resetSessionModel, restorePromptModel, syncPromptModel, syncSessionModel } from "./session-model-helpers"
+
+const message = (input?: { agent?: string; model?: UserMessage["model"] }) =>
+  ({
+    id: "msg",
+    sessionID: "session",
+    role: "user",
+    time: { created: 1 },
+    agent: input?.agent ?? "build",
+    model: input?.model ?? { providerID: "anthropic", modelID: "claude-sonnet-4" },
+  }) as UserMessage
+
+describe("syncSessionModel", () => {
+  test("restores the last message through session state", () => {
+    const calls: unknown[] = []
+
+    syncSessionModel(
+      {
+        session: {
+          restore(value) {
+            calls.push(value)
+          },
+          reset() {},
+        },
+      },
+      message({ model: { providerID: "anthropic", modelID: "claude-sonnet-4", variant: "high" } }),
+    )
+
+    expect(calls).toEqual([
+      message({ model: { providerID: "anthropic", modelID: "claude-sonnet-4", variant: "high" } }),
+    ])
+  })
+})
+
+describe("resetSessionModel", () => {
+  test("clears draft session state", () => {
+    const calls: string[] = []
+
+    resetSessionModel({
+      session: {
+        reset() {
+          calls.push("reset")
+        },
+        restore() {},
+      },
+    })
+
+    expect(calls).toEqual(["reset"])
+  })
+})
+
+describe("syncPromptModel", () => {
+  test("stores the effective session model in prompt state", () => {
+    const calls: unknown[] = []
+
+    syncPromptModel(
+      {
+        model: {
+          current: () => ({ id: "claude-sonnet-4", provider: { id: "anthropic" } }),
+          set() {},
+          variant: { current: () => "high", set() {} },
+        },
+      },
+      {
+        model: {
+          current: () => undefined,
+          set: (model) => calls.push(model),
+        },
+      },
+    )
+
+    expect(calls).toEqual([{ providerID: "anthropic", modelID: "claude-sonnet-4", variant: "high" }])
+  })
+
+  test("does not rewrite an unchanged prompt model", () => {
+    const calls: unknown[] = []
+    const model = { providerID: "anthropic", modelID: "claude-sonnet-4", variant: "high" }
+
+    syncPromptModel(
+      {
+        model: {
+          current: () => ({ id: model.modelID, provider: { id: model.providerID } }),
+          set() {},
+          variant: { current: () => model.variant, set() {} },
+        },
+      },
+      {
+        model: {
+          current: () => model,
+          set: (value) => calls.push(value),
+        },
+      },
+    )
+
+    expect(calls).toEqual([])
+  })
+})
+
+describe("restorePromptModel", () => {
+  test("restores the persisted prompt model into session selection", () => {
+    const calls: unknown[] = []
+    const restored = restorePromptModel(
+      {
+        model: {
+          current: () => ({ id: "gpt", provider: { id: "openai" } }),
+          set: (model) => calls.push(model),
+          variant: {
+            current: () => undefined,
+            set: (variant) => calls.push(variant),
+          },
+        },
+      },
+      {
+        model: {
+          current: () => ({ providerID: "anthropic", modelID: "claude", variant: "high" }),
+          set() {},
+        },
+      },
+    )
+
+    expect(restored).toBe(true)
+    expect(calls).toEqual([{ providerID: "anthropic", modelID: "claude" }, "high"])
+  })
+
+  test("does nothing without a persisted prompt model", () => {
+    const calls: unknown[] = []
+    const restored = restorePromptModel(
+      {
+        model: {
+          current: () => ({ id: "gpt", provider: { id: "openai" } }),
+          set: (model) => calls.push(model),
+          variant: {
+            current: () => undefined,
+            set: (variant) => calls.push(variant),
+          },
+        },
+      },
+      {
+        model: {
+          current: () => undefined,
+          set() {},
+        },
+      },
+    )
+
+    expect(restored).toBe(false)
+    expect(calls).toEqual([])
+  })
+})

package/src/pages/session/session-model-helpers.ts

@@ -0,0 +1,63 @@
+import type { UserMessage } from "@neurocode-ai/sdk/v2"
+
+type Local = {
+  session: {
+    reset(): void
+    restore(msg: UserMessage): void
+  }
+}
+
+type ModelSelection = {
+  model: {
+    current(): { id: string; provider: { id: string } } | undefined
+    set(model: { providerID: string; modelID: string }): void
+    variant: {
+      current(): string | undefined
+      set(variant: string | undefined): void
+    }
+  }
+}
+
+type PromptState = {
+  model: {
+    current(): { providerID: string; modelID: string; variant?: string | null } | undefined
+    set(model: { providerID: string; modelID: string; variant?: string | null }): void
+  }
+}
+
+export const resetSessionModel = (local: Local) => {
+  local.session.reset()
+}
+
+export const syncSessionModel = (local: Local, msg: UserMessage) => {
+  local.session.restore(msg)
+}
+
+export const syncPromptModel = (local: ModelSelection, prompt: PromptState) => {
+  const model = local.model.current()
+  if (!model) return
+  const next = {
+    providerID: model.provider.id,
+    modelID: model.id,
+    variant: local.model.variant.current(),
+  }
+  const current = prompt.model.current()
+  if (current?.providerID === next.providerID && current.modelID === next.modelID && current.variant === next.variant)
+    return
+  prompt.model.set(next)
+}
+
+export const restorePromptModel = (local: ModelSelection, prompt: PromptState) => {
+  const model = prompt.model.current()
+  if (!model) return false
+  const current = local.model.current()
+  if (
+    current?.provider.id === model.providerID &&
+    current.id === model.modelID &&
+    local.model.variant.current() === (model.variant ?? undefined)
+  )
+    return true
+  local.model.set({ providerID: model.providerID, modelID: model.modelID })
+  local.model.variant.set(model.variant ?? undefined)
+  return true
+}

package/src/pages/session/session-ownership.ts

@@ -0,0 +1,37 @@
+import { createComputed, onCleanup } from "solid-js"
+
+export function createSessionOwnership(sessionKey: () => string) {
+  let current = sessionKey()
+  let generation = 0
+  const transition = () => {
+    const next = sessionKey()
+    if (next === current) return
+    current = next
+    generation++
+  }
+  createComputed(transition)
+  onCleanup(() => generation++)
+
+  return {
+    key: () => {
+      transition()
+      return `${generation}:${current}`
+    },
+    capture() {
+      transition()
+      const captured = generation
+      return {
+        key: `${captured}:${current}`,
+        current: () => {
+          transition()
+          return generation === captured
+        },
+        run<T>(action: () => T) {
+          transition()
+          if (generation !== captured) return
+          return action()
+        },
+      }
+    },
+  }
+}

package/src/pages/session/session-panel-layout.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, test } from "bun:test"
+import { sessionPanelLayout } from "./session-panel-layout"
+
+describe("sessionPanelLayout", () => {
+  test("keeps one V2 owner while changing panel geometry", () => {
+    expect(sessionPanelLayout({ review: false, terminal: false, files: false })).toEqual({
+      visible: false,
+      stacked: false,
+    })
+    expect(sessionPanelLayout({ review: false, terminal: true, files: false })).toEqual({
+      visible: true,
+      stacked: false,
+    })
+    expect(sessionPanelLayout({ review: true, terminal: true, files: false })).toEqual({
+      visible: true,
+      stacked: true,
+    })
+  })
+})

package/src/pages/session/session-panel-layout.ts

@@ -0,0 +1,6 @@
+export function sessionPanelLayout(input: { review: boolean; terminal: boolean; files: boolean }) {
+  return {
+    visible: input.review || input.terminal || input.files,
+    stacked: input.review && input.terminal,
+  }
+}

package/src/pages/session/session-panel-width.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, test } from "bun:test"
+import {
+  clampSessionPanelWidth,
+  REVIEW_PANE_WIDTH_MIN,
+  REVIEW_PANE_WIDTH_MIN_SPLIT,
+  SESSION_PANEL_WIDTH_MIN,
+  sessionPanelWidthMax,
+} from "./session-panel-width"
+
+describe("sessionPanelWidthMax", () => {
+  test("reserves the unified review pane minimum", () => {
+    expect(sessionPanelWidthMax({ available: 1700, split: false })).toBe(1700 - REVIEW_PANE_WIDTH_MIN)
+  })
+
+  test("reserves a larger minimum for split diffs", () => {
+    expect(sessionPanelWidthMax({ available: 1700, split: true })).toBe(1700 - REVIEW_PANE_WIDTH_MIN_SPLIT)
+    expect(REVIEW_PANE_WIDTH_MIN_SPLIT).toBeGreaterThan(REVIEW_PANE_WIDTH_MIN)
+  })
+
+  test("lets the chat panel take everything beyond the review pane minimum", () => {
+    // Regression: the old cap was 45% of the window, forcing the review pane
+    // to at least 55% of the window regardless of content.
+    const available = 3440
+    expect(sessionPanelWidthMax({ available, split: false })).toBeGreaterThan(available * 0.45)
+  })
+
+  test("never drops below the chat panel minimum on small windows", () => {
+    expect(sessionPanelWidthMax({ available: 600, split: true })).toBe(SESSION_PANEL_WIDTH_MIN)
+    expect(sessionPanelWidthMax({ available: 0, split: false })).toBe(SESSION_PANEL_WIDTH_MIN)
+  })
+})
+
+describe("clampSessionPanelWidth", () => {
+  test("keeps widths already within the limit", () => {
+    expect(clampSessionPanelWidth({ width: 800, available: 1700, split: false })).toBe(800)
+  })
+
+  test("forces the width down when the window shrinks", () => {
+    expect(clampSessionPanelWidth({ width: 1600, available: 1700, split: false })).toBe(1700 - REVIEW_PANE_WIDTH_MIN)
+    expect(clampSessionPanelWidth({ width: 1600, available: 1700, split: true })).toBe(
+      1700 - REVIEW_PANE_WIDTH_MIN_SPLIT,
+    )
+  })
+
+  test("holds the chat panel minimum when there is no room for both", () => {
+    expect(clampSessionPanelWidth({ width: 1600, available: 700, split: true })).toBe(SESSION_PANEL_WIDTH_MIN)
+  })
+
+  test("skips clamping before the layout is measured", () => {
+    expect(clampSessionPanelWidth({ width: 1600, available: undefined, split: false })).toBe(1600)
+  })
+})

package/src/pages/session/session-panel-width.ts

@@ -0,0 +1,19 @@
+// The review pane has no width of its own: it takes whatever the chat panel
+// leaves behind. Instead of capping the chat panel at a fraction of the window
+// (which forces the review pane to grow with the monitor), reserve a fixed
+// minimum for the review pane and let the chat panel take everything else.
+export const SESSION_PANEL_WIDTH_MIN = 450
+export const REVIEW_PANE_WIDTH_MIN = 480
+export const REVIEW_PANE_WIDTH_MIN_SPLIT = 800
+
+export function sessionPanelWidthMax(input: { available: number; split: boolean }) {
+  const pane = input.split ? REVIEW_PANE_WIDTH_MIN_SPLIT : REVIEW_PANE_WIDTH_MIN
+  return Math.max(SESSION_PANEL_WIDTH_MIN, input.available - pane)
+}
+
+// `available` is undefined until the layout row is first measured; render the
+// stored width untouched until then to avoid a first-frame snap.
+export function clampSessionPanelWidth(input: { width: number; available: number | undefined; split: boolean }) {
+  if (input.available === undefined) return input.width
+  return Math.min(input.width, sessionPanelWidthMax({ available: input.available, split: input.split }))
+}