@nikcli-ai/app 0.0.6

package/src/pages/session/file-tab-scroll.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, test } from "bun:test"
+import { nextTabListScrollLeft } from "./file-tab-scroll"
+
+describe("nextTabListScrollLeft", () => {
+  test("does not scroll when width shrinks", () => {
+    const left = nextTabListScrollLeft({
+      prevScrollWidth: 500,
+      scrollWidth: 420,
+      clientWidth: 300,
+      prevContextOpen: false,
+      contextOpen: false,
+    })
+
+    expect(left).toBeUndefined()
+  })
+
+  test("scrolls to start when context tab opens", () => {
+    const left = nextTabListScrollLeft({
+      prevScrollWidth: 400,
+      scrollWidth: 500,
+      clientWidth: 320,
+      prevContextOpen: false,
+      contextOpen: true,
+    })
+
+    expect(left).toBe(0)
+  })
+
+  test("scrolls to right edge for new file tabs", () => {
+    const left = nextTabListScrollLeft({
+      prevScrollWidth: 500,
+      scrollWidth: 780,
+      clientWidth: 300,
+      prevContextOpen: true,
+      contextOpen: true,
+    })
+
+    expect(left).toBe(480)
+  })
+})

package/src/pages/session/file-tab-scroll.ts

@@ -0,0 +1,67 @@
+type Input = {
+  prevScrollWidth: number
+  scrollWidth: number
+  clientWidth: number
+  prevContextOpen: boolean
+  contextOpen: boolean
+}
+
+export const nextTabListScrollLeft = (input: Input) => {
+  if (input.scrollWidth <= input.prevScrollWidth) return
+  if (!input.prevContextOpen && input.contextOpen) return 0
+  if (input.scrollWidth <= input.clientWidth) return
+  return input.scrollWidth - input.clientWidth
+}
+
+export const createFileTabListSync = (input: { el: HTMLDivElement; contextOpen: () => boolean }) => {
+  let frame: number | undefined
+  let prevScrollWidth = input.el.scrollWidth
+  let prevContextOpen = input.contextOpen()
+
+  const update = () => {
+    const scrollWidth = input.el.scrollWidth
+    const clientWidth = input.el.clientWidth
+    const contextOpen = input.contextOpen()
+    const left = nextTabListScrollLeft({
+      prevScrollWidth,
+      scrollWidth,
+      clientWidth,
+      prevContextOpen,
+      contextOpen,
+    })
+
+    if (left !== undefined) {
+      input.el.scrollTo({
+        left,
+        behavior: "smooth",
+      })
+    }
+
+    prevScrollWidth = scrollWidth
+    prevContextOpen = contextOpen
+  }
+
+  const schedule = () => {
+    if (frame !== undefined) cancelAnimationFrame(frame)
+    frame = requestAnimationFrame(() => {
+      frame = undefined
+      update()
+    })
+  }
+
+  const onWheel = (e: WheelEvent) => {
+    if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return
+    input.el.scrollLeft += e.deltaY > 0 ? 50 : -50
+    e.preventDefault()
+  }
+
+  input.el.addEventListener("wheel", onWheel, { passive: false })
+  const observer = new MutationObserver(schedule)
+  observer.observe(input.el, { childList: true })
+
+  return () => {
+    input.el.removeEventListener("wheel", onWheel)
+    observer.disconnect()
+    if (frame !== undefined) cancelAnimationFrame(frame)
+  }
+}

package/src/pages/session/file-tabs.tsx

@@ -0,0 +1,516 @@
+import { type ValidComponent, createEffect, createMemo, For, Match, on, onCleanup, Show, Switch } from "solid-js"
+import { createStore } from "solid-js/store"
+import { Dynamic } from "solid-js/web"
+import { checksum } from "@nikcli-ai/util/encode"
+import { decode64 } from "@/utils/base64"
+import { showToast } from "@nikcli-ai/ui/toast"
+import { LineComment as LineCommentView, LineCommentEditor } from "@nikcli-ai/ui/line-comment"
+import { Mark } from "@nikcli-ai/ui/logo"
+import { Tabs } from "@nikcli-ai/ui/tabs"
+import { useLayout } from "@/context/layout"
+import { useFile, type SelectedLineRange } from "@/context/file"
+import { useComments } from "@/context/comments"
+import { useLanguage } from "@/context/language"
+
+export function FileTabContent(props: {
+  tab: string
+  activeTab: () => string
+  tabs: () => ReturnType<ReturnType<typeof useLayout>["tabs"]>
+  view: () => ReturnType<ReturnType<typeof useLayout>["view"]>
+  handoffFiles: () => Record<string, SelectedLineRange | null> | undefined
+  file: ReturnType<typeof useFile>
+  comments: ReturnType<typeof useComments>
+  language: ReturnType<typeof useLanguage>
+  codeComponent: NonNullable<ValidComponent>
+  addCommentToContext: (input: {
+    file: string
+    selection: SelectedLineRange
+    comment: string
+    preview?: string
+    origin?: "review" | "file"
+  }) => void
+}) {
+  let scroll: HTMLDivElement | undefined
+  let scrollFrame: number | undefined
+  let pending: { x: number; y: number } | undefined
+  let codeScroll: HTMLElement[] = []
+
+  const path = createMemo(() => props.file.pathFromTab(props.tab))
+  const state = createMemo(() => {
+    const p = path()
+    if (!p) return
+    return props.file.get(p)
+  })
+  const contents = createMemo(() => state()?.content?.content ?? "")
+  const cacheKey = createMemo(() => checksum(contents()))
+  const isImage = createMemo(() => {
+    const c = state()?.content
+    return c?.encoding === "base64" && c?.mimeType?.startsWith("image/") && c?.mimeType !== "image/svg+xml"
+  })
+  const isSvg = createMemo(() => {
+    const c = state()?.content
+    return c?.mimeType === "image/svg+xml"
+  })
+  const isBinary = createMemo(() => state()?.content?.mimeType?.startsWith("application/") || false)
+  const svgContent = createMemo(() => {
+    if (!isSvg()) return
+    const c = state()?.content
+    if (!c) return
+    if (c.encoding !== "base64") return c.content
+    return decode64(c.content)
+  })
+
+  const svgDecodeFailed = createMemo(() => {
+    if (!isSvg()) return false
+    const c = state()?.content
+    if (!c) return false
+    if (c.encoding !== "base64") return false
+    return svgContent() === undefined
+  })
+
+  const svgToast = { shown: false }
+  createEffect(() => {
+    if (!svgDecodeFailed()) return
+    if (svgToast.shown) return
+    svgToast.shown = true
+    showToast({
+      variant: "error",
+      title: props.language.t("toast.file.loadFailed.title"),
+      description: "Invalid base64 content.",
+    })
+  })
+  const svgPreviewUrl = createMemo(() => {
+    if (!isSvg()) return
+    const c = state()?.content
+    if (!c) return
+    if (c.encoding === "base64") return `data:image/svg+xml;base64,${c.content}`
+    return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(c.content)}`
+  })
+  const imageDataUrl = createMemo(() => {
+    if (!isImage()) return
+    const c = state()?.content
+    return `data:${c?.mimeType};base64,${c?.content}`
+  })
+  const selectedLines = createMemo(() => {
+    const p = path()
+    if (!p) return null
+    if (props.file.ready()) return props.file.selectedLines(p) ?? null
+    return props.handoffFiles()?.[p] ?? null
+  })
+
+  let wrap: HTMLDivElement | undefined
+
+  const fileComments = createMemo(() => {
+    const p = path()
+    if (!p) return []
+    return props.comments.list(p)
+  })
+
+  const commentedLines = createMemo(() => fileComments().map((comment) => comment.selection))
+
+  const [note, setNote] = createStore({
+    openedComment: null as string | null,
+    commenting: null as SelectedLineRange | null,
+    draft: "",
+    positions: {} as Record<string, number>,
+    draftTop: undefined as number | undefined,
+  })
+
+  const openedComment = () => note.openedComment
+  const setOpenedComment = (
+    value: typeof note.openedComment | ((value: typeof note.openedComment) => typeof note.openedComment),
+  ) => setNote("openedComment", value)
+
+  const commenting = () => note.commenting
+  const setCommenting = (value: typeof note.commenting | ((value: typeof note.commenting) => typeof note.commenting)) =>
+    setNote("commenting", value)
+
+  const draft = () => note.draft
+  const setDraft = (value: typeof note.draft | ((value: typeof note.draft) => typeof note.draft)) =>
+    setNote("draft", value)
+
+  const positions = () => note.positions
+  const setPositions = (value: typeof note.positions | ((value: typeof note.positions) => typeof note.positions)) =>
+    setNote("positions", value)
+
+  const draftTop = () => note.draftTop
+  const setDraftTop = (value: typeof note.draftTop | ((value: typeof note.draftTop) => typeof note.draftTop)) =>
+    setNote("draftTop", value)
+
+  const commentLabel = (range: SelectedLineRange) => {
+    const start = Math.min(range.start, range.end)
+    const end = Math.max(range.start, range.end)
+    if (start === end) return `line ${start}`
+    return `lines ${start}-${end}`
+  }
+
+  const getRoot = () => {
+    const el = wrap
+    if (!el) return
+
+    const host = el.querySelector("diffs-container")
+    if (!(host instanceof HTMLElement)) return
+
+    const root = host.shadowRoot
+    if (!root) return
+
+    return root
+  }
+
+  const findMarker = (root: ShadowRoot, range: SelectedLineRange) => {
+    const line = Math.max(range.start, range.end)
+    const node = root.querySelector(`[data-line="${line}"]`)
+    if (!(node instanceof HTMLElement)) return
+    return node
+  }
+
+  const markerTop = (wrapper: HTMLElement, marker: HTMLElement) => {
+    const wrapperRect = wrapper.getBoundingClientRect()
+    const rect = marker.getBoundingClientRect()
+    return rect.top - wrapperRect.top + Math.max(0, (rect.height - 20) / 2)
+  }
+
+  const updateComments = () => {
+    const el = wrap
+    const root = getRoot()
+    if (!el || !root) {
+      setPositions({})
+      setDraftTop(undefined)
+      return
+    }
+
+    const next: Record<string, number> = {}
+    for (const comment of fileComments()) {
+      const marker = findMarker(root, comment.selection)
+      if (!marker) continue
+      next[comment.id] = markerTop(el, marker)
+    }
+
+    setPositions(next)
+
+    const range = commenting()
+    if (!range) {
+      setDraftTop(undefined)
+      return
+    }
+
+    const marker = findMarker(root, range)
+    if (!marker) {
+      setDraftTop(undefined)
+      return
+    }
+
+    setDraftTop(markerTop(el, marker))
+  }
+
+  const scheduleComments = () => {
+    requestAnimationFrame(updateComments)
+  }
+
+  createEffect(() => {
+    fileComments()
+    scheduleComments()
+  })
+
+  createEffect(() => {
+    const range = commenting()
+    scheduleComments()
+    if (!range) return
+    setDraft("")
+  })
+
+  createEffect(() => {
+    const focus = props.comments.focus()
+    const p = path()
+    if (!focus || !p) return
+    if (focus.file !== p) return
+    if (props.activeTab() !== props.tab) return
+
+    const target = fileComments().find((comment) => comment.id === focus.id)
+    if (!target) return
+
+    setOpenedComment(target.id)
+    setCommenting(null)
+    props.file.setSelectedLines(p, target.selection)
+    requestAnimationFrame(() => props.comments.clearFocus())
+  })
+
+  const getCodeScroll = () => {
+    const el = scroll
+    if (!el) return []
+
+    const host = el.querySelector("diffs-container")
+    if (!(host instanceof HTMLElement)) return []
+
+    const root = host.shadowRoot
+    if (!root) return []
+
+    return Array.from(root.querySelectorAll("[data-code]")).filter(
+      (node): node is HTMLElement => node instanceof HTMLElement && node.clientWidth > 0,
+    )
+  }
+
+  const queueScrollUpdate = (next: { x: number; y: number }) => {
+    pending = next
+    if (scrollFrame !== undefined) return
+
+    scrollFrame = requestAnimationFrame(() => {
+      scrollFrame = undefined
+
+      const out = pending
+      pending = undefined
+      if (!out) return
+
+      props.view().setScroll(props.tab, out)
+    })
+  }
+
+  const handleCodeScroll = (event: Event) => {
+    const el = scroll
+    if (!el) return
+
+    const target = event.currentTarget
+    if (!(target instanceof HTMLElement)) return
+
+    queueScrollUpdate({
+      x: target.scrollLeft,
+      y: el.scrollTop,
+    })
+  }
+
+  const syncCodeScroll = () => {
+    const next = getCodeScroll()
+    if (next.length === codeScroll.length && next.every((el, i) => el === codeScroll[i])) return
+
+    for (const item of codeScroll) {
+      item.removeEventListener("scroll", handleCodeScroll)
+    }
+
+    codeScroll = next
+
+    for (const item of codeScroll) {
+      item.addEventListener("scroll", handleCodeScroll)
+    }
+  }
+
+  const restoreScroll = () => {
+    const el = scroll
+    if (!el) return
+
+    const s = props.view()?.scroll(props.tab)
+    if (!s) return
+
+    syncCodeScroll()
+
+    if (codeScroll.length > 0) {
+      for (const item of codeScroll) {
+        if (item.scrollLeft !== s.x) item.scrollLeft = s.x
+      }
+    }
+
+    if (el.scrollTop !== s.y) el.scrollTop = s.y
+    if (codeScroll.length > 0) return
+    if (el.scrollLeft !== s.x) el.scrollLeft = s.x
+  }
+
+  const handleScroll = (event: Event & { currentTarget: HTMLDivElement }) => {
+    if (codeScroll.length === 0) syncCodeScroll()
+
+    queueScrollUpdate({
+      x: codeScroll[0]?.scrollLeft ?? event.currentTarget.scrollLeft,
+      y: event.currentTarget.scrollTop,
+    })
+  }
+
+  createEffect(
+    on(
+      () => state()?.loaded,
+      (loaded) => {
+        if (!loaded) return
+        requestAnimationFrame(restoreScroll)
+      },
+      { defer: true },
+    ),
+  )
+
+  createEffect(
+    on(
+      () => props.file.ready(),
+      (ready) => {
+        if (!ready) return
+        requestAnimationFrame(restoreScroll)
+      },
+      { defer: true },
+    ),
+  )
+
+  createEffect(
+    on(
+      () => props.tabs().active() === props.tab,
+      (active) => {
+        if (!active) return
+        if (!state()?.loaded) return
+        requestAnimationFrame(restoreScroll)
+      },
+    ),
+  )
+
+  onCleanup(() => {
+    for (const item of codeScroll) {
+      item.removeEventListener("scroll", handleCodeScroll)
+    }
+
+    if (scrollFrame === undefined) return
+    cancelAnimationFrame(scrollFrame)
+  })
+
+  const renderCode = (source: string, wrapperClass: string) => (
+    <div
+      ref={(el) => {
+        wrap = el
+        scheduleComments()
+      }}
+      class={`relative overflow-hidden ${wrapperClass}`}
+    >
+      <Dynamic
+        component={props.codeComponent}
+        file={{
+          name: path() ?? "",
+          contents: source,
+          cacheKey: cacheKey(),
+        }}
+        enableLineSelection
+        selectedLines={selectedLines()}
+        commentedLines={commentedLines()}
+        onRendered={() => {
+          requestAnimationFrame(restoreScroll)
+          requestAnimationFrame(scheduleComments)
+        }}
+        onLineSelected={(range: SelectedLineRange | null) => {
+          const p = path()
+          if (!p) return
+          props.file.setSelectedLines(p, range)
+          if (!range) setCommenting(null)
+        }}
+        onLineSelectionEnd={(range: SelectedLineRange | null) => {
+          if (!range) {
+            setCommenting(null)
+            return
+          }
+
+          setOpenedComment(null)
+          setCommenting(range)
+        }}
+        overflow="scroll"
+        class="select-text"
+      />
+      <For each={fileComments()}>
+        {(comment) => (
+          <LineCommentView
+            id={comment.id}
+            top={positions()[comment.id]}
+            open={openedComment() === comment.id}
+            comment={comment.comment}
+            selection={commentLabel(comment.selection)}
+            onMouseEnter={() => {
+              const p = path()
+              if (!p) return
+              props.file.setSelectedLines(p, comment.selection)
+            }}
+            onClick={() => {
+              const p = path()
+              if (!p) return
+              setCommenting(null)
+              setOpenedComment((current) => (current === comment.id ? null : comment.id))
+              props.file.setSelectedLines(p, comment.selection)
+            }}
+          />
+        )}
+      </For>
+      <Show when={commenting()}>
+        {(range) => (
+          <Show when={draftTop() !== undefined}>
+            <LineCommentEditor
+              top={draftTop()}
+              value={draft()}
+              selection={commentLabel(range())}
+              onInput={(value) => setDraft(value)}
+              onCancel={() => setCommenting(null)}
+              onSubmit={(value) => {
+                const p = path()
+                if (!p) return
+                props.addCommentToContext({
+                  file: p,
+                  selection: range(),
+                  comment: value,
+                  origin: "file",
+                })
+                setCommenting(null)
+              }}
+              onPopoverFocusOut={(e: FocusEvent) => {
+                const current = e.currentTarget as HTMLDivElement
+                const target = e.relatedTarget
+                if (target instanceof Node && current.contains(target)) return
+
+                setTimeout(() => {
+                  if (!document.activeElement || !current.contains(document.activeElement)) {
+                    setCommenting(null)
+                  }
+                }, 0)
+              }}
+            />
+          </Show>
+        )}
+      </Show>
+    </div>
+  )
+
+  return (
+    <Tabs.Content
+      value={props.tab}
+      class="mt-3 relative"
+      ref={(el: HTMLDivElement) => {
+        scroll = el
+        restoreScroll()
+      }}
+      onScroll={handleScroll}
+    >
+      <Switch>
+        <Match when={state()?.loaded && isImage()}>
+          <div class="px-6 py-4 pb-40">
+            <img
+              src={imageDataUrl()}
+              alt={path()}
+              class="max-w-full"
+              onLoad={() => requestAnimationFrame(restoreScroll)}
+            />
+          </div>
+        </Match>
+        <Match when={state()?.loaded && isSvg()}>
+          <div class="flex flex-col gap-4 px-6 py-4">
+            {renderCode(svgContent() ?? "", "")}
+            <Show when={svgPreviewUrl()}>
+              <div class="flex justify-center pb-40">
+                <img src={svgPreviewUrl()} alt={path()} class="max-w-full max-h-96" />
+              </div>
+            </Show>
+          </div>
+        </Match>
+        <Match when={state()?.loaded && isBinary()}>
+          <div class="h-full px-6 pb-42 flex flex-col items-center justify-center text-center gap-6">
+            <Mark class="w-14 opacity-10" />
+            <div class="flex flex-col gap-2 max-w-md">
+              <div class="text-14-semibold text-text-strong truncate">{path()?.split("/").pop()}</div>
+              <div class="text-14-regular text-text-weak">{props.language.t("session.files.binaryContent")}</div>
+            </div>
+          </div>
+        </Match>
+        <Match when={state()?.loaded}>{renderCode(contents(), "pb-40")}</Match>
+        <Match when={state()?.loading}>
+          <div class="px-6 py-4 text-text-weak">{props.language.t("common.loading")}...</div>
+        </Match>
+        <Match when={state()?.error}>{(err) => <div class="px-6 py-4 text-text-weak">{err()}</div>}</Match>
+      </Switch>
+    </Tabs.Content>
+  )
+}

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

@@ -0,0 +1,61 @@
+import { describe, expect, test } from "bun:test"
+import { combineCommandSections, createOpenReviewFile, focusTerminalById } from "./helpers"
+
+describe("createOpenReviewFile", () => {
+  test("opens and loads selected review file", () => {
+    const calls: string[] = []
+    const openReviewFile = createOpenReviewFile({
+      showAllFiles: () => calls.push("show"),
+      tabForPath: (path) => {
+        calls.push(`tab:${path}`)
+        return `file://${path}`
+      },
+      openTab: (tab) => calls.push(`open:${tab}`),
+      loadFile: (path) => calls.push(`load:${path}`),
+    })
+
+    openReviewFile("src/a.ts")
+
+    expect(calls).toEqual(["show", "tab:src/a.ts", "open:file://src/a.ts", "load:src/a.ts"])
+  })
+})
+
+describe("focusTerminalById", () => {
+  test("focuses textarea when present", () => {
+    document.body.innerHTML = `<div id="terminal-wrapper-one"><div data-component="terminal"><textarea></textarea></div></div>`
+
+    const focused = focusTerminalById("one")
+
+    expect(focused).toBe(true)
+    expect(document.activeElement?.tagName).toBe("TEXTAREA")
+  })
+
+  test("falls back to terminal element focus", () => {
+    document.body.innerHTML = `<div id="terminal-wrapper-two"><div data-component="terminal" tabindex="0"></div></div>`
+    const terminal = document.querySelector('[data-component="terminal"]') as HTMLElement
+    let pointerDown = false
+    terminal.addEventListener("pointerdown", () => {
+      pointerDown = true
+    })
+
+    const focused = focusTerminalById("two")
+
+    expect(focused).toBe(true)
+    expect(document.activeElement).toBe(terminal)
+    expect(pointerDown).toBe(true)
+  })
+})
+
+describe("combineCommandSections", () => {
+  test("keeps section order stable", () => {
+    const result = combineCommandSections([
+      [{ id: "a", title: "A" }],
+      [
+        { id: "b", title: "B" },
+        { id: "c", title: "C" },
+      ],
+    ])
+
+    expect(result.map((item) => item.id)).toEqual(["a", "b", "c"])
+  })
+})