reigncode-app 1.3.2

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

@@ -0,0 +1,170 @@
+import { createEffect, onCleanup, type JSX } from "solid-js"
+import type { FileDiff } from "@reign-labs/sdk/v2"
+import { SessionReview } from "@reign-labs/ui/session-review"
+import type {
+  SessionReviewCommentActions,
+  SessionReviewCommentDelete,
+  SessionReviewCommentUpdate,
+} from "@reign-labs/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"
+
+export interface SessionReviewTabProps {
+  title?: JSX.Element
+  empty?: JSX.Element
+  diffs: () => FileDiff[]
+  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) => void
+  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)
+    if (scroll) {
+      scroll.removeEventListener("wheel", handleInteraction, { capture: true })
+      scroll.removeEventListener("mousewheel", handleInteraction, { capture: true })
+      scroll.removeEventListener("pointerdown", handleInteraction, { capture: true })
+      scroll.removeEventListener("touchstart", handleInteraction, { capture: true })
+      scroll.removeEventListener("keydown", handleInteraction, { capture: true })
+    }
+  })
+
+  return (
+    <SessionReview
+      title={props.title}
+      empty={props.empty}
+      scrollRef={(el) => {
+        scroll = el
+        el.addEventListener("wheel", handleInteraction, { passive: true, capture: true })
+        el.addEventListener("mousewheel", handleInteraction, { passive: true, capture: true })
+        el.addEventListener("pointerdown", handleInteraction, { passive: true, capture: true })
+        el.addEventListener("touchstart", handleInteraction, { passive: true, capture: true })
+        el.addEventListener("keydown", handleInteraction, { passive: true, 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}
+      comments={props.comments}
+      focusedComment={props.focusedComment}
+      onFocusedCommentChange={props.onFocusedCommentChange}
+    />
+  )
+}

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

@@ -0,0 +1,20 @@
+import { useParams } from "@solidjs/router"
+import { createMemo } from "solid-js"
+import { useLayout } from "@/context/layout"
+
+export const useSessionKey = () => {
+  const params = useParams()
+  const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
+  return { params, sessionKey }
+}
+
+export const useSessionLayout = () => {
+  const layout = useLayout()
+  const { params, sessionKey } = useSessionKey()
+  return {
+    params,
+    sessionKey,
+    tabs: createMemo(() => layout.tabs(sessionKey)),
+    view: createMemo(() => layout.view(sessionKey)),
+  }
+}

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

@@ -0,0 +1,51 @@
+import { describe, expect, test } from "bun:test"
+import type { UserMessage } from "@reign-labs/sdk/v2"
+import { resetSessionModel, syncSessionModel } from "./session-model-helpers"
+
+const message = (input?: Partial<Pick<UserMessage, "agent" | "model" | "variant">>) =>
+  ({
+    id: "msg",
+    sessionID: "session",
+    role: "user",
+    time: { created: 1 },
+    agent: input?.agent ?? "build",
+    model: input?.model ?? { providerID: "anthropic", modelID: "claude-sonnet-4" },
+    variant: input?.variant,
+  }) as UserMessage
+
+describe("syncSessionModel", () => {
+  test("restores the last message through session state", () => {
+    const calls: unknown[] = []
+
+    syncSessionModel(
+      {
+        session: {
+          restore(value) {
+            calls.push(value)
+          },
+          reset() {},
+        },
+      },
+      message({ variant: "high" }),
+    )
+
+    expect(calls).toEqual([message({ variant: "high" })])
+  })
+})
+
+describe("resetSessionModel", () => {
+  test("clears draft session state", () => {
+    const calls: string[] = []
+
+    resetSessionModel({
+      session: {
+        reset() {
+          calls.push("reset")
+        },
+        restore() {},
+      },
+    })
+
+    expect(calls).toEqual(["reset"])
+  })
+})

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

@@ -0,0 +1,16 @@
+import type { UserMessage } from "@reign-labs/sdk/v2"
+
+type Local = {
+  session: {
+    reset(): void
+    restore(msg: UserMessage): void
+  }
+}
+
+export const resetSessionModel = (local: Local) => {
+  local.session.reset()
+}
+
+export const syncSessionModel = (local: Local, msg: UserMessage) => {
+  local.session.restore(msg)
+}