@neurocode-ai/session-ui 1.18.8

package/src/v2/components/session-progress-indicator-v2.stories.tsx

@@ -0,0 +1,66 @@
+// @ts-nocheck
+import { SessionProgressIndicatorV2 } from "./session-progress-indicator-v2"
+
+const docs = `### Overview
+Animated 5×5 dot grid loader for in-progress session state.
+
+Derived from Figma \`_sessionProgressIndicator\` with 8-frame rotation.
+
+### API
+- Accepts standard SVG props.
+
+### Behavior
+- CSS keyframes drive per-dot opacity across 8 frames (1.2s loop).
+- Center dot stays at full opacity throughout the cycle.
+
+### Accessibility
+- Sets \`aria-hidden="true"\` by default.
+
+### Theming
+- Uses \`currentColor\` via \`--v2-icon-icon-muted\`.
+`
+
+export default {
+  title: "UI V2/SessionProgressIndicator",
+  id: "components-session-progress-indicator-v2",
+  component: SessionProgressIndicatorV2,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: docs,
+      },
+    },
+  },
+}
+
+export const Basic = {
+  render: () => <SessionProgressIndicatorV2 />,
+}
+
+export const Sizes = {
+  render: () => (
+    <div style={{ display: "flex", gap: "16px", "align-items": "center" }}>
+      <SessionProgressIndicatorV2 width={12} height={12} />
+      <SessionProgressIndicatorV2 />
+      <SessionProgressIndicatorV2 width={24} height={24} />
+    </div>
+  ),
+}
+
+export const OnDark = {
+  render: () => (
+    <div
+      style={{
+        display: "flex",
+        gap: "16px",
+        "align-items": "center",
+        padding: "16px",
+        "background-color": "#171717",
+        color: "#c7c7c7",
+      }}
+    >
+      <SessionProgressIndicatorV2 />
+    </div>
+  ),
+}

package/src/v2/components/session-progress-indicator-v2.tsx

@@ -0,0 +1,32 @@
+import { For, splitProps, type ComponentProps } from "solid-js"
+import "./session-progress-indicator-v2.css"
+
+const grid = 5
+const dot = 2
+const gap = 1
+const origin = 1.5
+const dots = Array.from({ length: grid * grid }, (_, index) => ({
+  index,
+  x: origin + (index % grid) * (dot + gap),
+  y: origin + Math.floor(index / grid) * (dot + gap),
+}))
+
+export function SessionProgressIndicatorV2(props: ComponentProps<"svg">) {
+  const [local, rest] = splitProps(props, ["class", "classList", "width", "height"])
+  return (
+    <svg
+      {...rest}
+      class={local.class}
+      classList={local.classList}
+      width={local.width ?? 16}
+      height={local.height ?? 16}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      data-component="session-progress-indicator-v2"
+      aria-hidden={rest["aria-hidden"] ?? "true"}
+    >
+      <For each={dots}>{(cell) => <rect data-dot={cell.index} x={cell.x} y={cell.y} width={dot} height={dot} />}</For>
+    </svg>
+  )
+}

package/src/v2/components/session-review-empty-changes-v2.tsx

@@ -0,0 +1,17 @@
+import { useI18n } from "@neurocode-ai/ui/context/i18n"
+import { Icon } from "@neurocode-ai/ui/v2/icon"
+import "./session-review-v2.css"
+
+export function SessionReviewEmptyChangesV2() {
+  const i18n = useI18n()
+
+  return (
+    <div data-slot="session-review-v2-empty-changes">
+      <Icon name="review" size="large" />
+      <div data-slot="session-review-v2-empty-changes-title">{i18n.t("ui.sessionReviewV2.empty.changes.title")}</div>
+      <div data-slot="session-review-v2-empty-changes-description">
+        {i18n.t("ui.sessionReviewV2.empty.changes.description")}
+      </div>
+    </div>
+  )
+}

package/src/v2/components/session-review-empty-no-git-v2.tsx

@@ -0,0 +1,28 @@
+import { FileIcon } from "@neurocode-ai/ui/file-icon"
+import { useI18n } from "@neurocode-ai/ui/context/i18n"
+import { ButtonV2 } from "@neurocode-ai/ui/v2/button-v2"
+import "./session-review-v2.css"
+
+export type SessionReviewEmptyNoGitV2Props = {
+  pending: boolean
+  onInitGit: () => void
+}
+
+export function SessionReviewEmptyNoGitV2(props: SessionReviewEmptyNoGitV2Props) {
+  const i18n = useI18n()
+
+  return (
+    <div data-slot="session-review-v2-empty-no-git">
+      <FileIcon node={{ path: ".gitignore", type: "file" }} mono />
+      <div data-slot="session-review-v2-empty-no-git-title">{i18n.t("ui.sessionReviewV2.empty.noGit.title")}</div>
+      <div data-slot="session-review-v2-empty-no-git-description">
+        {i18n.t("ui.sessionReviewV2.empty.noGit.description")}
+      </div>
+      <ButtonV2 variant="neutral" size="normal" disabled={props.pending} onClick={props.onInitGit}>
+        {props.pending
+          ? i18n.t("ui.sessionReviewV2.empty.noGit.actionLoading")
+          : i18n.t("ui.sessionReviewV2.empty.noGit.action")}
+      </ButtonV2>
+    </div>
+  )
+}

package/src/v2/components/session-review-file-preview-v2-virtualize.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect, test } from "bun:test"
+import { shouldVirtualizeReviewDiff } from "./session-review-file-preview-v2-virtualize"
+
+describe("shouldVirtualizeReviewDiff", () => {
+  test("renders small diffs directly", () => {
+    expect(shouldVirtualizeReviewDiff({ additionLines: 500, deletionLines: 500 })).toBe(false)
+  })
+
+  test("virtualizes large diffs", () => {
+    expect(shouldVirtualizeReviewDiff({ additionLines: 501, deletionLines: 1 })).toBe(true)
+    expect(shouldVirtualizeReviewDiff({ additionLines: 1, deletionLines: 501 })).toBe(true)
+  })
+})

package/src/v2/components/session-review-file-preview-v2-virtualize.ts

@@ -0,0 +1,5 @@
+const lineThreshold = 500
+
+export function shouldVirtualizeReviewDiff(input: { additionLines: number; deletionLines: number }) {
+  return Math.max(input.additionLines, input.deletionLines) > lineThreshold
+}

package/src/v2/components/session-review-file-preview-v2.tsx

@@ -0,0 +1,290 @@
+import { getDirectory, getFilename } from "@neurocode-ai/core/util/path"
+import type { SelectedLineRange } from "@pierre/diffs"
+import { DiffChanges } from "@neurocode-ai/ui/v2/diff-changes-v2"
+import { FileIcon } from "@neurocode-ai/ui/file-icon"
+import { useFileComponent } from "@neurocode-ai/ui/context/file"
+import { useI18n } from "@neurocode-ai/ui/context/i18n"
+import { mediaKindFromPath } from "../../pierre/media"
+import { cloneSelectedLineRange, previewSelectedLines } from "../../pierre/selection-bridge"
+import type { FileContent, SnapshotFileDiff, VcsFileDiff } from "@neurocode-ai/sdk/v2"
+import type { FileDiffInfo } from "@neurocode-ai/client/promise"
+import { createEffect, createMemo, onCleanup, Show, untrack } from "solid-js"
+import { createStore } from "solid-js/store"
+import { Dynamic } from "solid-js/web"
+import { normalize, text, type ViewDiff } from "../../components/session-diff"
+import type {
+  SessionReviewComment,
+  SessionReviewCommentActions,
+  SessionReviewCommentDelete,
+  SessionReviewCommentUpdate,
+  SessionReviewDiffStyle,
+  SessionReviewFocus,
+  SessionReviewLineComment,
+} from "../../components/session-review"
+import type { SessionReviewExpandMode } from "./session-review-v2"
+import { createLineCommentControllerV2 } from "./line-comment-annotations-v2"
+import { shouldVirtualizeReviewDiff } from "./session-review-file-preview-v2-virtualize"
+import { LineCommentV2OverflowIcon } from "@neurocode-ai/ui/v2/line-comment-v2"
+import { MenuV2 } from "@neurocode-ai/ui/v2/menu-v2"
+import "./session-review-v2.css"
+
+type ReviewDiff = (SnapshotFileDiff & { file: string }) | FileDiffInfo | VcsFileDiff
+
+export type SessionReviewFilePreviewV2Props = {
+  file: string
+  diff: ReviewDiff
+  diffStyle: SessionReviewDiffStyle
+  expandMode?: SessionReviewExpandMode
+  readFile?: (path: string) => Promise<FileContent | undefined>
+  onLineComment?: (comment: SessionReviewLineComment) => void
+  onLineCommentUpdate?: (comment: SessionReviewCommentUpdate) => void
+  onLineCommentDelete?: (comment: SessionReviewCommentDelete) => void
+  lineCommentActions?: SessionReviewCommentActions
+  comments?: SessionReviewComment[]
+  focusedComment?: SessionReviewFocus | null
+  onFocusedCommentChange?: (focus: SessionReviewFocus | null) => void
+}
+
+function statusLabel(status: ViewDiff["status"]) {
+  if (status === "added") return "A"
+  if (status === "deleted") return "D"
+  return "M"
+}
+
+function statusType(status: ViewDiff["status"]) {
+  if (status === "added") return "added"
+  if (status === "deleted") return "deleted"
+  return "modified"
+}
+
+function selectionSide(range: SelectedLineRange) {
+  return range.endSide ?? range.side ?? "additions"
+}
+
+function selectionPreview(diff: ViewDiff, range: SelectedLineRange) {
+  const side = selectionSide(range)
+  const contents = text(diff, side)
+  if (contents.length === 0) return undefined
+  return previewSelectedLines(contents, range)
+}
+
+function ReviewCommentMenuV2(props: {
+  labels: SessionReviewCommentActions
+  onEdit: VoidFunction
+  onDelete: VoidFunction
+}) {
+  return (
+    <div onMouseDown={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()}>
+      <MenuV2 gutter={4}>
+        <MenuV2.Trigger
+          as="button"
+          type="button"
+          data-slot="line-comment-v2-overflow"
+          aria-label={props.labels.moreLabel}
+        >
+          <LineCommentV2OverflowIcon />
+        </MenuV2.Trigger>
+        <MenuV2.Portal>
+          <MenuV2.Content>
+            <MenuV2.Item onSelect={props.onEdit}>{props.labels.editLabel}</MenuV2.Item>
+            <MenuV2.Item onSelect={props.onDelete}>{props.labels.deleteLabel}</MenuV2.Item>
+          </MenuV2.Content>
+        </MenuV2.Portal>
+      </MenuV2>
+    </div>
+  )
+}
+
+export function SessionReviewFilePreviewV2(props: SessionReviewFilePreviewV2Props) {
+  const i18n = useI18n()
+  const fileComponent = useFileComponent()
+  let scrollRef: HTMLDivElement | undefined
+  let focusToken = 0
+
+  const [store, setStore] = createStore({
+    selection: null as SelectedLineRange | null,
+    commenting: null as SelectedLineRange | null,
+    opened: null as string | null,
+  })
+
+  const view = createMemo(() => ({
+    ...normalize(props.diff),
+    preloaded: "preloaded" in props.diff ? props.diff.preloaded : undefined,
+  }))
+  const diffCanRender = createMemo(() => view().additions !== 0 || view().deletions !== 0)
+  const mediaKind = createMemo(() => mediaKindFromPath(props.file))
+  const comments = createMemo(() => (props.comments ?? []).filter((comment) => comment.file === props.file))
+  const commentedLines = createMemo(() => comments().map((comment) => comment.selection))
+  const lineCommentsEnabled = () => props.onLineComment != null
+
+  const commentsUi = createLineCommentControllerV2<SessionReviewComment>({
+    comments,
+    label: i18n.t("ui.lineComment.submit"),
+    draftKey: () => props.file,
+    state: {
+      opened: () => store.opened,
+      setOpened: (id) => setStore("opened", id),
+      selected: () => store.selection,
+      setSelected: (range) => setStore("selection", range),
+      commenting: () => store.commenting,
+      setCommenting: (range) => setStore("commenting", range),
+    },
+    getSide: selectionSide,
+    onSubmit: ({ comment, selection }) => {
+      props.onLineComment?.({
+        file: props.file,
+        selection,
+        comment,
+        preview: selectionPreview(view(), selection),
+      })
+    },
+    onUpdate: ({ id, comment, selection }) => {
+      props.onLineCommentUpdate?.({
+        id,
+        file: props.file,
+        selection,
+        comment,
+        preview: selectionPreview(view(), selection),
+      })
+    },
+    onDelete: (comment) => {
+      props.onLineCommentDelete?.({
+        id: comment.id,
+        file: props.file,
+      })
+    },
+    editSubmitLabel: props.lineCommentActions?.saveLabel,
+    renderCommentActions: props.lineCommentActions
+      ? (comment, controls) => (
+          <ReviewCommentMenuV2 labels={props.lineCommentActions!} onEdit={controls.edit} onDelete={controls.remove} />
+        )
+      : undefined,
+  })
+
+  onCleanup(() => {
+    focusToken++
+  })
+
+  createEffect(() => {
+    const focus = props.focusedComment
+    if (!focus) return
+    if (focus.file !== props.file) {
+      // The focused file has no mounted preview (e.g. not in the current diff
+      // set); clear the focus anyway so it cannot hijack a later diff refresh.
+      // V1 clears unconditionally the same way.
+      untrack(() => {
+        const token = focusToken
+        requestAnimationFrame(() => {
+          if (token !== focusToken) return
+          props.onFocusedCommentChange?.(null)
+        })
+      })
+      return
+    }
+
+    untrack(() => {
+      setStore("opened", focus.id)
+
+      const comment = (props.comments ?? []).find((item) => item.file === focus.file && item.id === focus.id)
+      if (comment) setStore("selection", cloneSelectedLineRange(comment.selection))
+
+      // The diff renders asynchronously, so poll for the comment anchor before
+      // scrolling; clear the focus once handled so revisiting the file does not
+      // re-open a stale comment (mirrors the v1 review behavior).
+      focusToken++
+      const token = focusToken
+      const scrollTo = (attempt: number) => {
+        if (token !== focusToken) return
+        const anchor = scrollRef?.querySelector(`[data-comment-id="${focus.id}"]`)
+        if (anchor instanceof HTMLElement) {
+          anchor.scrollIntoView({ block: "center" })
+          return
+        }
+        if (attempt >= 120) return
+        requestAnimationFrame(() => scrollTo(attempt + 1))
+      }
+      requestAnimationFrame(() => scrollTo(0))
+      requestAnimationFrame(() => {
+        if (token !== focusToken) return
+        props.onFocusedCommentChange?.(null)
+      })
+    })
+  })
+
+  const expandUnchanged = () => props.expandMode === "expand"
+
+  const diffViewer = () => (
+    <Dynamic
+      component={fileComponent}
+      mode="diff"
+      fileDiff={view().fileDiff}
+      preloadedDiff={view().preloaded}
+      diffStyle={props.diffStyle}
+      expandUnchanged={expandUnchanged()}
+      virtualize={shouldVirtualizeReviewDiff({
+        additionLines: view().fileDiff.additionLines.length,
+        deletionLines: view().fileDiff.deletionLines.length,
+      })}
+      hunkSeparators={view().fileDiff.isPartial ? "simple" : "line-info-basic"}
+      enableLineSelection={lineCommentsEnabled()}
+      enableGutterUtility={lineCommentsEnabled()}
+      onLineSelected={(range: SelectedLineRange | null) => {
+        if (!lineCommentsEnabled()) return
+        commentsUi.onLineSelected(range)
+      }}
+      onLineSelectionEnd={(range: SelectedLineRange | null) => {
+        if (!lineCommentsEnabled()) return
+        commentsUi.onLineSelectionEnd(range)
+      }}
+      onLineNumberSelectionEnd={commentsUi.onLineNumberSelectionEnd}
+      annotations={commentsUi.annotations()}
+      renderAnnotation={commentsUi.renderAnnotation}
+      renderGutterUtility={lineCommentsEnabled() ? commentsUi.renderGutterUtility : undefined}
+      selectedLines={store.selection}
+      commentedLines={commentedLines()}
+      media={{
+        mode: "auto",
+        path: props.file,
+        deleted: view().status === "deleted",
+        readFile: view().status === "deleted" ? undefined : props.readFile,
+      }}
+    />
+  )
+
+  return (
+    <>
+      <div data-slot="session-review-v2-file-header">
+        <div data-slot="session-review-v2-file-title">
+          <div data-slot="session-review-v2-file-status" data-type={statusType(view().status)}>
+            {statusLabel(view().status)}
+          </div>
+          <FileIcon node={{ path: props.file, type: "file" }} />
+          <span data-slot="session-review-v2-file-name">{getFilename(props.file)}</span>
+          <Show when={props.file.includes("/")}>
+            <span data-slot="session-review-v2-file-path">{getDirectory(props.file)}</span>
+          </Show>
+        </div>
+        <div data-slot="session-review-v2-file-diff">
+          <DiffChanges changes={view()} />
+        </div>
+      </div>
+      <div
+        ref={(el) => {
+          scrollRef = el
+        }}
+        data-slot="session-review-v2-diff-scroll"
+      >
+        <Show
+          when={diffCanRender() || mediaKind()}
+          fallback={
+            <div data-slot="session-review-v2-empty">
+              <span class="text-12-regular text-text-weak">{i18n.t("ui.fileMedia.binary.title")}</span>
+            </div>
+          }
+        >
+          {diffViewer()}
+        </Show>
+      </div>
+    </>
+  )
+}