@neurocode-ai/app 1.18.8

package/src/pages/session/use-session-hash-scroll.ts

@@ -0,0 +1,202 @@
+import type { UserMessage } from "@neurocode-ai/sdk/v2"
+import { useLocation, useNavigate } from "@solidjs/router"
+import { createEffect, createMemo, onCleanup, onMount } from "solid-js"
+import { messageIdFromHash } from "./message-id-from-hash"
+
+export const useSessionHashScroll = (input: {
+  sessionKey: () => string
+  sessionID: () => string | undefined
+  messagesReady: () => boolean
+  visibleUserMessages: () => UserMessage[]
+  historyMore: () => boolean
+  historyLoading: () => boolean
+  loadMore: (sessionID: string) => Promise<void>
+  currentMessageId: () => string | undefined
+  pendingMessage: () => string | undefined
+  setPendingMessage: (value: string | undefined) => void
+  setActiveMessage: (message: UserMessage | undefined) => void
+  autoScroll: { pause: () => void; forceScrollToBottom: () => void }
+  scroller: () => HTMLDivElement | undefined
+  anchor: (id: string) => string
+  revealMessage?: (id: string) => void
+  scheduleScrollState: (el: HTMLDivElement) => void
+  consumePendingMessage: (key: string) => string | undefined
+}) => {
+  const visibleUserMessages = createMemo(() => input.visibleUserMessages())
+  const messageById = createMemo(() => new Map(visibleUserMessages().map((m) => [m.id, m])))
+  let pendingKey = ""
+  let clearing = false
+
+  const location = useLocation()
+  const navigate = useNavigate()
+
+  const frames = new Set<number>()
+  const queue = (fn: () => void) => {
+    const id = requestAnimationFrame(() => {
+      frames.delete(id)
+      fn()
+    })
+    frames.add(id)
+  }
+  const cancel = () => {
+    for (const id of frames) cancelAnimationFrame(id)
+    frames.clear()
+  }
+
+  const clearMessageHash = () => {
+    cancel()
+    input.consumePendingMessage(input.sessionKey())
+    if (input.pendingMessage()) input.setPendingMessage(undefined)
+    if (!location.hash) return
+    clearing = true
+    navigate(location.pathname + location.search, { replace: true })
+  }
+
+  const updateHash = (id: string) => {
+    const hash = `#${input.anchor(id)}`
+    if (location.hash === hash) return
+    clearing = false
+    navigate(location.pathname + location.search + hash, {
+      replace: true,
+    })
+  }
+
+  const scrollToElement = (el: HTMLElement, behavior: ScrollBehavior) => {
+    const root = input.scroller()
+    if (!root) return false
+
+    const a = el.getBoundingClientRect()
+    const b = root.getBoundingClientRect()
+    const sticky = root.querySelector("[data-session-title]")
+    const inset = sticky instanceof HTMLElement ? sticky.offsetHeight : 0
+    const top = Math.max(0, a.top - b.top + root.scrollTop - inset)
+    root.scrollTo({ top, behavior })
+    return true
+  }
+
+  const seek = (id: string, behavior: ScrollBehavior, left = 4): boolean => {
+    input.revealMessage?.(id)
+    const el = document.getElementById(input.anchor(id))
+    if (el) return scrollToElement(el, behavior)
+    if (left <= 0) return false
+    queue(() => {
+      seek(id, behavior, left - 1)
+    })
+    return false
+  }
+
+  const scrollToMessage = (message: UserMessage, behavior: ScrollBehavior = "smooth") => {
+    cancel()
+    if (input.currentMessageId() !== message.id) input.setActiveMessage(message)
+    input.revealMessage?.(message.id)
+
+    if (seek(message.id, behavior)) {
+      updateHash(message.id)
+      return
+    }
+
+    updateHash(message.id)
+  }
+
+  const applyHash = (behavior: ScrollBehavior) => {
+    const hash = location.hash.slice(1)
+    if (!hash) {
+      input.autoScroll.forceScrollToBottom()
+      const el = input.scroller()
+      if (el) input.scheduleScrollState(el)
+      return
+    }
+
+    const messageId = messageIdFromHash(hash)
+    if (messageId) {
+      input.autoScroll.pause()
+      const msg = messageById().get(messageId)
+      if (msg) {
+        scrollToMessage(msg, behavior)
+        return
+      }
+      return
+    }
+
+    const target = document.getElementById(hash)
+    if (target) {
+      input.autoScroll.pause()
+      scrollToElement(target, behavior)
+      return
+    }
+
+    input.autoScroll.forceScrollToBottom()
+    const el = input.scroller()
+    if (el) input.scheduleScrollState(el)
+  }
+
+  createEffect(() => {
+    const hash = location.hash
+    if (!hash) clearing = false
+    if (!input.sessionID() || !input.messagesReady()) return
+    cancel()
+    queue(() => applyHash("auto"))
+  })
+
+  createEffect(() => {
+    if (!input.sessionID() || !input.messagesReady()) return
+
+    visibleUserMessages()
+
+    let targetId = input.pendingMessage()
+    if (!targetId) {
+      const key = input.sessionKey()
+      if (pendingKey !== key) {
+        pendingKey = key
+        const next = input.consumePendingMessage(key)
+        if (next) {
+          input.setPendingMessage(next)
+          targetId = next
+        }
+      }
+    }
+
+    if (!targetId && !clearing) targetId = messageIdFromHash(location.hash)
+    if (!targetId) return
+
+    const pending = input.pendingMessage() === targetId
+    const msg = messageById().get(targetId)
+    if (!msg) return
+
+    if (pending) input.setPendingMessage(undefined)
+    if (input.currentMessageId() === targetId && !pending) return
+
+    input.autoScroll.pause()
+    cancel()
+    queue(() => scrollToMessage(msg, "auto"))
+  })
+
+  createEffect(() => {
+    const sessionID = input.sessionID()
+    if (!sessionID || !input.messagesReady()) return
+
+    visibleUserMessages()
+
+    let targetId = input.pendingMessage()
+    if (!targetId && !clearing) targetId = messageIdFromHash(location.hash)
+    if (!targetId) return
+    if (messageById().has(targetId)) return
+    if (!input.historyMore() || input.historyLoading()) return
+
+    void input.loadMore(sessionID)
+  })
+
+  onMount(() => {
+    if (typeof window !== "undefined" && "scrollRestoration" in window.history) {
+      window.history.scrollRestoration = "manual"
+    }
+  })
+
+  onCleanup(cancel)
+
+  return {
+    clearMessageHash,
+    scrollToMessage,
+    applyHash,
+  }
+}

package/src/pages/session/v2/review-diff-kinds.test.ts

@@ -0,0 +1,70 @@
+import { describe, expect, test } from "bun:test"
+import { filterReviewFiles, reviewDiffDirectory, reviewDiffKinds, reviewDiffNeedsLoad } from "./review-diff-kinds"
+
+describe("reviewDiffKinds", () => {
+  test("maps file and directory kinds", () => {
+    const kinds = reviewDiffKinds([
+      { file: "src/a.ts", additions: 1, deletions: 0, status: "added" },
+      { file: "src/b.ts", additions: 0, deletions: 2, status: "deleted" },
+    ])
+
+    expect(kinds.get("src/a.ts")).toBe("add")
+    expect(kinds.get("src/b.ts")).toBe("del")
+    expect(kinds.get("src")).toBe("mix")
+  })
+
+  test("normalizes file and directory paths", () => {
+    const kinds = reviewDiffKinds([{ file: "\\src//lib/a.ts/", additions: 1, deletions: 1, status: "modified" }])
+
+    expect(kinds.get("src/lib/a.ts")).toBe("mix")
+    expect(kinds.get("src/lib")).toBe("mix")
+  })
+})
+
+describe("filterReviewFiles", () => {
+  test("filters by path substring", () => {
+    const files = ["src/a.ts", "src/b.ts", "lib/c.ts"]
+    expect(filterReviewFiles(files, "b.ts")).toEqual(["src/b.ts"])
+    expect(filterReviewFiles(files, "")).toEqual(files)
+  })
+})
+
+describe("reviewDiffNeedsLoad", () => {
+  test("loads changed files whose aggregate patch has no hunks", () => {
+    expect(
+      reviewDiffNeedsLoad({
+        file: "src/a.ts",
+        additions: 1,
+        deletions: 0,
+        patch: "diff --git a/src/a.ts b/src/a.ts\n--- a/src/a.ts\n+++ b/src/a.ts",
+      }),
+    ).toBe(true)
+  })
+
+  test("keeps complete patches and empty changes", () => {
+    expect(
+      reviewDiffNeedsLoad({
+        file: "src/a.ts",
+        additions: 1,
+        deletions: 0,
+        patch: "@@ -0,0 +1 @@\n+value",
+      }),
+    ).toBe(false)
+    expect(reviewDiffNeedsLoad({ file: "empty.txt", additions: 0, deletions: 0 })).toBe(false)
+  })
+})
+
+describe("reviewDiffDirectory", () => {
+  test("scopes nested files to their parent directory", () => {
+    expect(reviewDiffDirectory("/repo", "src/lib/a.ts")).toBe("/repo/src/lib")
+    expect(reviewDiffDirectory("C:\\repo", "src/lib/a.ts")).toBe("C:\\repo\\src\\lib")
+  })
+
+  test("does not rescope root files", () => {
+    expect(reviewDiffDirectory("/repo/", "README.md")).toBe("/repo")
+    expect(reviewDiffDirectory("/", "README.md")).toBe("/")
+    expect(reviewDiffDirectory("C:\\", "README.md")).toBe("C:\\")
+    expect(reviewDiffDirectory("/", "src/a.ts")).toBe("/src")
+    expect(reviewDiffDirectory("C:\\", "src/a.ts")).toBe("C:\\src")
+  })
+})

package/src/pages/session/v2/review-diff-kinds.ts

@@ -0,0 +1,62 @@
+import type { SnapshotFileDiff, VcsFileDiff } from "@neurocode-ai/sdk/v2"
+import type { FileDiffInfo } from "@neurocode-ai/client/promise"
+import type { Kind } from "@/components/file-tree-v2"
+import { normalizeFileTreeV2Path } from "@/components/file-tree-v2-model"
+
+export type RenderDiff = FileDiffInfo | (SnapshotFileDiff & { file: string }) | VcsFileDiff
+
+export function normalizePath(p: string) {
+  return normalizeFileTreeV2Path(p)
+}
+
+export function filterRenderableDiff(value: FileDiffInfo | SnapshotFileDiff | VcsFileDiff): value is RenderDiff {
+  return typeof value.file === "string"
+}
+
+export function reviewDiffNeedsLoad(diff: RenderDiff) {
+  if (diff.additions === 0 && diff.deletions === 0) return false
+  return !diff.patch || !/^@@ /m.test(diff.patch)
+}
+
+export function reviewRootDirectory(root: string) {
+  return root === "/" || /^[A-Za-z]:[/\\]?$/.test(root) ? root : root.replace(/[/\\]+$/, "")
+}
+
+export function reviewDiffDirectory(root: string, file: string) {
+  const path = normalizePath(file)
+  const index = path.lastIndexOf("/")
+  const separator = root.includes("\\") ? "\\" : "/"
+  const base = reviewRootDirectory(root)
+  if (index < 0) return base
+  return `${base.endsWith(separator) ? base : base + separator}${path.slice(0, index).replaceAll("/", separator)}`
+}
+
+export function reviewDiffKinds(diffs: RenderDiff[]) {
+  const merge = (a: Kind | undefined, b: Kind) => {
+    if (!a) return b
+    if (a === b) return a
+    return "mix" as const
+  }
+
+  const out = new Map<string, Kind>()
+  for (const diff of diffs) {
+    const file = normalizePath(diff.file)
+    const kind = diff.status === "added" ? "add" : diff.status === "deleted" ? "del" : "mix"
+
+    out.set(file, kind)
+
+    const parts = file.split("/")
+    parts.slice(0, -1).forEach((_, idx) => {
+      const dir = parts.slice(0, idx + 1).join("/")
+      if (!dir) return
+      out.set(dir, merge(out.get(dir), kind))
+    })
+  }
+  return out
+}
+
+export function filterReviewFiles(files: string[], query: string) {
+  const value = query.trim().toLowerCase()
+  if (!value) return files
+  return files.filter((file) => file.toLowerCase().includes(value))
+}

package/src/pages/session/v2/review-panel-v2-state.ts

@@ -0,0 +1,41 @@
+import {
+  SESSION_REVIEW_V2_SIDEBAR_WIDTH_DEFAULT,
+  SESSION_REVIEW_V2_SIDEBAR_WIDTH_MAX,
+  SESSION_REVIEW_V2_SIDEBAR_WIDTH_MIN,
+  type SessionReviewExpandMode,
+} from "@neurocode-ai/session-ui/v2/session-review-v2"
+import { createSignal } from "solid-js"
+import { createStore } from "solid-js/store"
+import { Persist, persisted } from "@/utils/persist"
+
+export function createReviewPanelV2State() {
+  const [store, setStore, , ready] = persisted(
+    Persist.global("review-panel-v2"),
+    createStore({
+      sidebarOpened: true,
+      sidebarWidth: SESSION_REVIEW_V2_SIDEBAR_WIDTH_DEFAULT,
+      expandMode: "collapse" as SessionReviewExpandMode,
+    }),
+  )
+  // The filter is transient by design: a persisted filter would silently hide
+  // files after a reload.
+  const [filter, setFilter] = createSignal("")
+
+  return {
+    sidebarOpened: () => store.sidebarOpened,
+    sidebarWidth: () => store.sidebarWidth,
+    sidebarTransition: ready,
+    filter,
+    setFilter,
+    expandMode: () => store.expandMode,
+    setExpandMode: (mode: SessionReviewExpandMode) => setStore("expandMode", mode),
+    resizeSidebar: (width: number) =>
+      setStore(
+        "sidebarWidth",
+        Math.min(SESSION_REVIEW_V2_SIDEBAR_WIDTH_MAX, Math.max(SESSION_REVIEW_V2_SIDEBAR_WIDTH_MIN, width)),
+      ),
+    toggleSidebar: () => setStore("sidebarOpened", (opened) => !opened),
+  }
+}
+
+export type ReviewPanelV2State = ReturnType<typeof createReviewPanelV2State>

package/src/pages/session/v2/review-panel-v2.tsx

@@ -0,0 +1,255 @@
+import { createMemo, createResource, createSignal, Show, type JSX } from "solid-js"
+import type { SnapshotFileDiff, VcsFileDiff } from "@neurocode-ai/sdk/v2"
+import type { FileDiffInfo } from "@neurocode-ai/client/promise"
+import {
+  SESSION_REVIEW_V2_SIDEBAR_WIDTH_MAX,
+  SESSION_REVIEW_V2_SIDEBAR_WIDTH_MIN,
+  SessionReviewV2,
+  SessionReviewV2Sidebar,
+} from "@neurocode-ai/session-ui/v2/session-review-v2"
+import { SessionReviewFilePreviewV2 } from "@neurocode-ai/session-ui/v2/session-review-file-preview-v2"
+import { DiffChanges } from "@neurocode-ai/ui/v2/diff-changes-v2"
+import type {
+  SessionReviewComment,
+  SessionReviewCommentActions,
+  SessionReviewCommentDelete,
+  SessionReviewCommentUpdate,
+  SessionReviewDiffStyle,
+  SessionReviewFocus,
+  SessionReviewLineComment,
+} from "@neurocode-ai/session-ui/session-review"
+import FileTreeV2 from "@/components/file-tree-v2"
+import { useLanguage } from "@/context/language"
+import { useSDK } from "@/context/sdk"
+import {
+  filterRenderableDiff,
+  filterReviewFiles,
+  reviewDiffKinds,
+  reviewDiffNeedsLoad,
+  type RenderDiff,
+} from "@/pages/session/v2/review-diff-kinds"
+import type { ReviewPanelV2State } from "@/pages/session/v2/review-panel-v2-state"
+import { applyFileListKeyDown, SessionFileListV2 } from "@/pages/session/v2/session-file-list-v2"
+
+type ReviewDiff = FileDiffInfo | SnapshotFileDiff | VcsFileDiff
+
+export type ReviewPanelV2Props = {
+  title?: JSX.Element
+  empty?: JSX.Element
+  diffs: () => ReviewDiff[]
+  diffsReady: () => boolean
+  diffVersion?: number
+  loadDiff?: (path: string, version?: number) => Promise<RenderDiff | undefined>
+  activeFile?: string
+  onSelectFile: (path: string) => void
+  diffStyle: SessionReviewDiffStyle
+  onDiffStyleChange?: (style: SessionReviewDiffStyle) => void
+  state: ReviewPanelV2State
+  onLineComment?: (comment: SessionReviewLineComment) => void
+  onLineCommentUpdate?: (comment: SessionReviewCommentUpdate) => void
+  onLineCommentDelete?: (comment: SessionReviewCommentDelete) => void
+  lineCommentActions?: SessionReviewCommentActions
+  comments?: SessionReviewComment[]
+  focusedComment?: SessionReviewFocus | null
+  onFocusedCommentChange?: (focus: SessionReviewFocus | null) => void
+}
+
+export function ReviewPanelV2(props: ReviewPanelV2Props) {
+  const sdk = useSDK()
+
+  const diffs = createMemo(() => props.diffs().filter(filterRenderableDiff))
+  const filteredFiles = createMemo(() =>
+    filterReviewFiles(
+      diffs().map((diff) => diff.file),
+      props.state.filter(),
+    ),
+  )
+  const searching = createMemo(() => props.state.filter().trim().length > 0)
+  const kinds = createMemo(() => reviewDiffKinds(diffs()))
+  // Changes-only trees omit "M" — every row is already a change; A/D stay visible.
+  const treeKinds = createMemo(() => new Map([...kinds()].filter(([, kind]) => kind !== "mix")))
+  const activeDiff = createMemo(() => {
+    // A focused comment takes over the preview until the preview applies it and
+    // clears the focus; the owner then persists the file as the active selection.
+    const focus = props.focusedComment
+    if (focus && diffs().some((diff) => diff.file === focus.file)) return focus.file
+    const active = props.activeFile
+    if (searching()) return active
+    const files = filteredFiles()
+    if (active && files.includes(active)) return active
+    return files[0]
+  })
+  const sourceActiveItem = createMemo(() => diffs().find((diff) => diff.file === activeDiff()))
+  const detailSource = createMemo(() => {
+    const diff = sourceActiveItem()
+    const load = props.loadDiff
+    if (!diff || !load || !reviewDiffNeedsLoad(diff)) return
+    return { diff, load, version: props.diffVersion }
+  })
+  const [loadedDiff] = createResource(detailSource, async ({ diff, load, version }) => {
+    const value = await load(diff.file, version)
+    if (value?.file !== diff.file) return
+    return { source: diff, version, value }
+  })
+
+  const activeItem = createMemo(() => {
+    const source = sourceActiveItem()
+    if (loadedDiff.state !== "ready") return source
+    const loaded = loadedDiff()
+    if (loaded && loaded.source === source && loaded.version === props.diffVersion) return loaded.value
+    return source
+  })
+
+  const readFile = async (path: string) =>
+    sdk()
+      .client.file.read({ path })
+      .then((x) => x.data)
+      .catch((error) => {
+        console.debug("[session-review-v2] failed to read file", { path, error })
+        return undefined
+      })
+
+  return (
+    <SessionReviewV2
+      title={props.title}
+      stats={<DiffChanges changes={diffs()} />}
+      empty={props.empty}
+      sidebarOpen={props.state.sidebarOpened()}
+      sidebar={
+        // Always mounted: the sidebar header hosts the changes-mode dropdown,
+        // which must stay reachable when the current mode has zero diffs.
+        <ReviewPanelV2Sidebar
+          title={props.title}
+          state={props.state}
+          diffsReady={props.diffsReady}
+          onSelectFile={props.onSelectFile}
+          diffs={diffs}
+          filteredFiles={filteredFiles}
+          searching={searching}
+          kinds={treeKinds}
+          activeDiff={activeDiff}
+        />
+      }
+      activeFile={activeDiff()}
+      files={filteredFiles()}
+      onSelectFile={props.onSelectFile}
+      diffStyle={props.diffStyle}
+      onDiffStyleChange={props.onDiffStyleChange}
+      expandMode={props.state.expandMode()}
+      onExpandModeChange={props.state.setExpandMode}
+      hasDiffs={diffs().length > 0}
+      preview={
+        // Key on the file path, not the diff object identity, so refreshed diff data
+        // updates the mounted preview instead of remounting the whole viewer.
+        <Show when={activeDiff()} keyed>
+          {(file) => (
+            <Show when={activeItem()}>
+              {(diff) => (
+                <SessionReviewFilePreviewV2
+                  file={file}
+                  diff={diff()}
+                  diffStyle={props.diffStyle}
+                  expandMode={props.state.expandMode()}
+                  readFile={readFile}
+                  onLineComment={props.onLineComment}
+                  onLineCommentUpdate={props.onLineCommentUpdate}
+                  onLineCommentDelete={props.onLineCommentDelete}
+                  lineCommentActions={props.lineCommentActions}
+                  comments={props.comments}
+                  focusedComment={props.focusedComment}
+                  onFocusedCommentChange={props.onFocusedCommentChange}
+                />
+              )}
+            </Show>
+          )}
+        </Show>
+      }
+    />
+  )
+}
+
+function ReviewPanelV2Sidebar(props: {
+  title?: JSX.Element
+  state: ReviewPanelV2State
+  diffsReady: () => boolean
+  onSelectFile: (path: string) => void
+  diffs: () => RenderDiff[]
+  filteredFiles: () => string[]
+  searching: () => boolean
+  kinds: () => ReturnType<typeof reviewDiffKinds>
+  activeDiff: () => string | undefined
+}) {
+  const language = useLanguage()
+  const [explicitHighlight, setExplicitHighlight] = createSignal<string | undefined>()
+  const highlightedPath = createMemo(() => {
+    if (!props.searching()) return undefined
+    const files = props.filteredFiles()
+    if (files.length === 0) return undefined
+    const explicit = explicitHighlight()
+    if (explicit && files.includes(explicit)) return explicit
+    return files[0]
+  })
+
+  const onFilterKeyDown = (event: KeyboardEvent & { currentTarget: HTMLInputElement }) => {
+    if (!props.searching()) return
+    applyFileListKeyDown(event, props.filteredFiles(), highlightedPath(), {
+      onHighlight: setExplicitHighlight,
+      onSelect: props.onSelectFile,
+    })
+  }
+
+  return (
+    <SessionReviewV2Sidebar
+      open={props.state.sidebarOpened()}
+      transition={props.state.sidebarTransition()}
+      title={props.title}
+      stats={<DiffChanges changes={props.diffs()} />}
+      filter={props.state.filter()}
+      onFilterChange={props.state.setFilter}
+      onFilterKeyDown={onFilterKeyDown}
+      width={props.state.sidebarWidth()}
+      onWidthChange={props.state.resizeSidebar}
+      minWidth={SESSION_REVIEW_V2_SIDEBAR_WIDTH_MIN}
+      maxWidth={SESSION_REVIEW_V2_SIDEBAR_WIDTH_MAX}
+    >
+      <Show
+        when={props.diffsReady()}
+        fallback={
+          <div class="px-2 py-2 text-12-regular text-text-weak">
+            {language.t("common.loading")}
+            {language.t("common.loading.ellipsis")}
+          </div>
+        }
+      >
+        <Show
+          when={props.searching()}
+          fallback={
+            <FileTreeV2
+              allowed={props.filteredFiles()}
+              kinds={props.kinds()}
+              draggable={false}
+              active={props.activeDiff()}
+              onFileClick={(node) => props.onSelectFile(node.path)}
+            />
+          }
+        >
+          <Show
+            when={props.filteredFiles().length > 0}
+            fallback={<div class="px-2 py-2 text-12-regular text-text-weak">{language.t("palette.empty")}</div>}
+          >
+            <SessionFileListV2
+              files={props.filteredFiles()}
+              kinds={props.kinds()}
+              active={props.activeDiff()}
+              highlighted={highlightedPath()}
+              onFileClick={(path) => {
+                setExplicitHighlight(path)
+                props.onSelectFile(path)
+              }}
+            />
+          </Show>
+        </Show>
+      </Show>
+    </SessionReviewV2Sidebar>
+  )
+}