kennel 0.2.1 → 0.2.2

package/kernel/apps/web/src/annotations.tsx

@@ -0,0 +1,430 @@
+import type { ReactNode } from "react"
+import { useEffect, useRef, useState } from "react"
+import {
+  Check,
+  ChevronDown,
+  ChevronUp,
+  Copy,
+  MessageSquarePlus,
+  MessagesSquare,
+  Send,
+  Trash2,
+} from "lucide-react"
+
+import type { SelectionLines } from "./use-annotations.js"
+import { CommentDialog, CommentForm } from "./comment-form.js"
+import { formatLines, useAnnotations } from "./use-annotations.js"
+import { useLinkedSession } from "./use-linked-session.js"
+
+type Popup = {
+  below: boolean
+  lines?: SelectionLines
+  selection: string
+  x: number
+  y: number
+}
+
+function fileName(path: string) {
+  return path.split("/").pop() ?? path
+}
+
+function clampPopupX(x: number) {
+  const half = 100
+  return Math.min(Math.max(x, half), window.innerWidth - half)
+}
+
+// Walk up from a selection endpoint to the nearest element stamped by
+// rehypeSourceLines; block-level line ranges are the granularity an LLM
+// needs to find the passage in the source file.
+function sourceLine(node: Node, which: "end" | "start") {
+  let element = node instanceof Element ? node : node.parentElement
+  while (element) {
+    const value =
+      element.getAttribute(`data-line-${which}`) ??
+      element.getAttribute("data-line-start")
+    if (value) return Number(value)
+    element = element.parentElement
+  }
+  return undefined
+}
+
+function selectionLines(range: Range): SelectionLines | undefined {
+  const start = sourceLine(range.startContainer, "start")
+  const end = sourceLine(range.endContainer, "end")
+  if (!start || !end) return undefined
+  return { end, start }
+}
+
+export function Annotations({
+  children,
+  path,
+  session,
+}: {
+  children: ReactNode
+  path: string
+  session?: string
+}) {
+  const {
+    addComment,
+    annotations,
+    copied,
+    copy,
+    count,
+    removeAnnotation,
+    send,
+    sendError,
+    sending,
+    sent,
+  } = useAnnotations({ path, session })
+  const { title: sessionTitle } = useLinkedSession(session)
+  const wrapper = useRef<HTMLDivElement>(null)
+  const popupRef = useRef<HTMLDivElement>(null)
+  const dialogRef = useRef<HTMLFormElement>(null)
+  const commentDialogOpen = useRef(false)
+  const selectionTimer = useRef<number | undefined>(undefined)
+  const [popup, setPopup] = useState<Popup>()
+  const [commenting, setCommenting] = useState(false)
+  const [commentOpen, setCommentOpen] = useState(false)
+  const [mobile, setMobile] = useState(
+    () => window.matchMedia("(max-width: 767px)").matches,
+  )
+  const [open, setOpen] = useState(false)
+
+  useEffect(() => {
+    commentDialogOpen.current = commentOpen || commenting
+  }, [commentOpen, commenting])
+
+  useEffect(() => {
+    const query = window.matchMedia("(max-width: 767px)")
+    const resize = () => setMobile(query.matches)
+    query.addEventListener("change", resize)
+    return () => query.removeEventListener("change", resize)
+  }, [])
+
+  useEffect(() => {
+    const insidePopup = (target: EventTarget | null) =>
+      target instanceof Node && Boolean(popupRef.current?.contains(target))
+    const insideDialog = (target: EventTarget | null) =>
+      target instanceof Node && Boolean(dialogRef.current?.contains(target))
+    const close = (event: MouseEvent) => {
+      if (commentDialogOpen.current || insidePopup(event.target)) return
+      setPopup(undefined)
+    }
+    const read = (event?: Event) => {
+      if (
+        commentDialogOpen.current ||
+        (event && (insidePopup(event.target) || insideDialog(event.target)))
+      )
+        return
+      const selection = window.getSelection()
+      const range =
+        selection && selection.rangeCount > 0 && !selection.isCollapsed
+          ? selection.getRangeAt(0)
+          : undefined
+      const text = selection?.toString().replace(/\s+/g, " ").trim() ?? ""
+      if (
+        !range ||
+        !text ||
+        !wrapper.current?.contains(range.commonAncestorContainer)
+      ) {
+        setPopup(undefined)
+        return
+      }
+      const rect = range.getBoundingClientRect()
+      const touch = window.matchMedia("(pointer: coarse)").matches
+      const below = touch || rect.top < 160
+      setPopup({
+        below,
+        lines: selectionLines(range),
+        selection: text,
+        x: rect.left + rect.width / 2,
+        y: rect.bottom,
+      })
+    }
+    const escape = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return
+      setPopup(undefined)
+      setCommenting(false)
+    }
+    const scroll = (event: Event) => {
+      if (commentDialogOpen.current || insidePopup(event.target)) return
+      setPopup(undefined)
+    }
+    // Mobile selection is signalled by selectionchange rather than pointer
+    // events; debounce so drag/selection-handle adjustments settle first.
+    const selectionchange = () => {
+      if (popupRef.current?.contains(document.activeElement)) return
+      window.clearTimeout(selectionTimer.current)
+      selectionTimer.current = window.setTimeout(() => read(), 200)
+    }
+    document.addEventListener("mousedown", close)
+    document.addEventListener("mouseup", read)
+    document.addEventListener("pointerup", read)
+    document.addEventListener("keyup", read)
+    document.addEventListener("keydown", escape)
+    document.addEventListener("scroll", scroll, true)
+    document.addEventListener("selectionchange", selectionchange)
+    return () => {
+      document.removeEventListener("mousedown", close)
+      document.removeEventListener("mouseup", read)
+      document.removeEventListener("pointerup", read)
+      document.removeEventListener("keyup", read)
+      document.removeEventListener("keydown", escape)
+      document.removeEventListener("scroll", scroll, true)
+      document.removeEventListener("selectionchange", selectionchange)
+      window.clearTimeout(selectionTimer.current)
+    }
+  }, [])
+
+  const submit = (comment: string) => {
+    if (popup && comment) addComment(popup.selection, comment, popup.lines)
+    setPopup(undefined)
+    setCommenting(false)
+    setCommentOpen(false)
+    window.getSelection()?.removeAllRanges()
+  }
+
+  const closeComment = () => {
+    setCommentOpen(false)
+    setCommenting(false)
+    setPopup(undefined)
+    window.getSelection()?.removeAllRanges()
+  }
+
+  const beginComment = () => {
+    if (mobile) {
+      setCommentOpen(true)
+      return
+    }
+    setCommenting(true)
+  }
+
+  const updateCommentOpen = (nextOpen: boolean) => {
+    if (nextOpen) {
+      setCommentOpen(true)
+      return
+    }
+    closeComment()
+  }
+
+  return (
+    <div className="contents" ref={wrapper}>
+      {children}
+      {popup || count > 0 ? (
+        <div
+          className="pointer-events-none fixed right-0
+            bottom-[max(16px,env(safe-area-inset-bottom))] left-0 z-40 flex
+            flex-col items-center gap-2
+            pr-[max(12px,env(safe-area-inset-right))]
+            pl-[max(12px,env(safe-area-inset-left))] [&>*]:pointer-events-auto"
+        >
+          {popup ? (
+            <div
+              className="max-[767px]:w-[min(560px,calc(100vw-24px))]
+                max-[767px]:max-w-full min-[768px]:fixed min-[768px]:z-50
+                min-[768px]:-translate-x-1/2
+                min-[768px]:-translate-y-[calc(100%+10px)]
+                min-[768px]:data-[below]:translate-y-2.5"
+              data-below={popup.below || undefined}
+              ref={popupRef}
+              style={{ left: clampPopupX(popup.x), top: popup.y }}
+            >
+              {commenting && !mobile ? (
+                <CommentForm
+                  editorClassName="min-h-24"
+                  onCancel={closeComment}
+                  onSubmit={submit}
+                  selection={popup.selection}
+                />
+              ) : (
+                <div
+                  className="contents max-[767px]:grid max-[767px]:w-full
+                    max-[767px]:grid-cols-[minmax(0,1fr)_auto]
+                    max-[767px]:items-center max-[767px]:gap-2
+                    max-[767px]:rounded-xl max-[767px]:border
+                    max-[767px]:border-[rgb(255_255_255/0.72)]
+                    max-[767px]:bg-[rgb(255_255_255/0.94)] max-[767px]:p-1.5
+                    max-[767px]:shadow-[0_16px_40px_rgb(31_41_55/0.16),0_2px_8px_rgb(31_41_55/0.08)]
+                    max-[767px]:backdrop-blur-[18px]
+                    max-[767px]:backdrop-saturate-[140%]"
+                >
+                  <blockquote
+                    className="hidden max-[767px]:m-0 max-[767px]:line-clamp-2
+                      max-[767px]:min-w-0 max-[767px]:border-l-[3px]
+                      max-[767px]:border-[#c6d3c7] max-[767px]:px-2
+                      max-[767px]:py-[5px] max-[767px]:text-[0.8rem]
+                      max-[767px]:leading-[1.35] max-[767px]:text-[#46543f]"
+                  >
+                    {popup.selection}
+                  </blockquote>
+                  <button
+                    className="inline-flex cursor-pointer items-center gap-1.5
+                      rounded-full border border-[rgb(255_255_255/0.72)]
+                      bg-[rgb(255_255_255/0.92)] px-3 py-[7px] text-[0.82rem]
+                      font-semibold whitespace-nowrap text-[#2f382f]
+                      shadow-[0_12px_32px_rgb(31_41_55/0.16),0_2px_8px_rgb(31_41_55/0.08)]
+                      backdrop-blur-[16px] backdrop-saturate-[140%]
+                      hover:bg-white max-[767px]:min-h-10
+                      max-[767px]:border-[#2f4a38] max-[767px]:bg-[#2f4a38]
+                      max-[767px]:text-[#f4f7f4] max-[767px]:shadow-none"
+                    onClick={beginComment}
+                    onMouseDown={(event) => event.preventDefault()}
+                    type="button"
+                  >
+                    <MessageSquarePlus aria-hidden="true" size={14} />
+                    Comment
+                  </button>
+                </div>
+              )}
+            </div>
+          ) : null}
+          {open && count > 0 ? (
+            <div
+              className="max-h-[min(50vh,420px)] w-[min(560px,calc(100vw-24px))]
+                max-w-full overflow-auto rounded-[14px] border
+                border-[rgb(255_255_255/0.72)] bg-[rgb(255_255_255/0.95)] px-4
+                py-3.5
+                shadow-[0_24px_56px_rgb(31_41_55/0.2),0_4px_12px_rgb(31_41_55/0.08)]
+                backdrop-blur-[20px] backdrop-saturate-[140%]"
+            >
+              <header
+                className="flex items-center justify-between gap-3 border-b
+                  border-[#edf0ec] pb-2.5 text-[0.85rem] font-semibold
+                  text-[#3f4a40]"
+              >
+                <span>Comments on {fileName(path)}</span>
+                <span className="text-[0.78rem] font-medium text-[#6c7a6d]">
+                  {count} comment{count === 1 ? "" : "s"}
+                </span>
+              </header>
+              <ol className="mt-3 grid list-none gap-3.5 p-0">
+                {annotations.map((annotation) => (
+                  <li className="grid gap-1.5" key={annotation.id}>
+                    <div className="flex items-start gap-2">
+                      <blockquote
+                        className="m-0 min-w-0 flex-1 rounded border-l-[3px]
+                          border-[#c6d3c7] bg-[#f4f6f3] px-2.5 py-1.5
+                          text-[0.82rem] leading-[1.45] wrap-anywhere
+                          text-[#46543f]"
+                      >
+                        {annotation.selection}
+                      </blockquote>
+                      {annotation.lines ? (
+                        <small
+                          className="mt-[7px] flex-none text-[0.72rem]
+                            whitespace-nowrap text-[#8a968b]"
+                        >
+                          {formatLines(annotation.lines).trim()}
+                        </small>
+                      ) : null}
+                      <button
+                        aria-label="Remove annotation"
+                        className="grid size-6 flex-none cursor-pointer
+                          place-items-center rounded-md text-[#8a968b]
+                          hover:bg-[#f0e8e6] hover:text-[#9c3a3a]
+                          pointer-coarse:size-10 pointer-coarse:rounded-[10px]"
+                        onClick={() => removeAnnotation(annotation.id)}
+                        type="button"
+                      >
+                        <Trash2 aria-hidden="true" size={13} />
+                      </button>
+                    </div>
+                    <ul className="m-0 grid gap-1 p-0 pl-[22px]">
+                      {annotation.comments.map((comment, index) => (
+                        <li
+                          className="text-[0.84rem] leading-[1.5] wrap-anywhere
+                            text-[#2f382f] marker:text-[#9db8a2]"
+                          key={`${index}-${comment}`}
+                        >
+                          {comment}
+                        </li>
+                      ))}
+                    </ul>
+                  </li>
+                ))}
+              </ol>
+            </div>
+          ) : null}
+          {sendError ? (
+            <p
+              className="m-0 w-[min(560px,calc(100vw-24px))] max-w-full
+                rounded-xl border border-[#e8c8c5] bg-[#fdf4f3] px-3.5 py-2.5
+                text-[0.8rem] leading-[1.4] text-[#9c3a3a]
+                shadow-[0_16px_40px_rgb(31_41_55/0.16),0_2px_8px_rgb(31_41_55/0.08)]"
+            >
+              Could not send to {session}: {sendError}
+            </p>
+          ) : null}
+          {count > 0 ? (
+            <div
+              className="inline-flex gap-1.5 rounded-full border
+                border-[rgb(255_255_255/0.72)] bg-[rgb(255_255_255/0.9)] p-1.5
+                shadow-[0_16px_40px_rgb(31_41_55/0.16),0_2px_8px_rgb(31_41_55/0.08)]
+                backdrop-blur-[18px] backdrop-saturate-[140%]"
+            >
+              <button
+                className="inline-flex cursor-pointer items-center gap-1.5
+                  rounded-full px-3.5 py-[7px] text-[0.82rem] font-semibold
+                  whitespace-nowrap text-[#2f382f]
+                  hover:bg-[rgb(47_56_47/0.07)]"
+                onClick={() => setOpen(!open)}
+                type="button"
+              >
+                <MessagesSquare aria-hidden="true" size={14} />
+                <span>
+                  {count} annotation{count === 1 ? "" : "s"}
+                </span>
+                {open ? (
+                  <ChevronDown aria-hidden="true" size={14} />
+                ) : (
+                  <ChevronUp aria-hidden="true" size={14} />
+                )}
+              </button>
+              <button
+                className="inline-flex cursor-pointer items-center gap-1.5
+                  rounded-full bg-[#2f4a38] px-3.5 py-[7px] text-[0.82rem]
+                  font-semibold whitespace-nowrap text-[#f4f7f4]
+                  hover:bg-[#27402f]"
+                onClick={() => void copy()}
+                type="button"
+              >
+                {copied ? (
+                  <Check aria-hidden="true" size={14} />
+                ) : (
+                  <Copy aria-hidden="true" size={14} />
+                )}
+                {copied ? "Copied" : "Copy"}
+              </button>
+              {session ? (
+                <button
+                  className="inline-flex cursor-pointer items-center gap-1.5
+                    rounded-full bg-[#2f4a38] px-3.5 py-[7px] text-[0.82rem]
+                    font-semibold whitespace-nowrap text-[#f4f7f4]
+                    hover:bg-[#27402f] disabled:cursor-wait disabled:opacity-70"
+                  disabled={sending}
+                  onClick={() => void send()}
+                  title={`Send comments to ${sessionTitle}`}
+                  type="button"
+                >
+                  {sent ? (
+                    <Check aria-hidden="true" size={14} />
+                  ) : (
+                    <Send aria-hidden="true" size={14} />
+                  )}
+                  {sending ? "Sending…" : sent ? "Sent" : "Send"}
+                </button>
+              ) : null}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+      <CommentDialog
+        onOpenChange={updateCommentOpen}
+        onSubmit={submit}
+        open={commentOpen}
+        ref={dialogRef}
+        selection={popup?.selection ?? ""}
+      />
+    </div>
+  )
+}

package/kernel/apps/web/src/api/client.ts

@@ -0,0 +1,3 @@
+// Compatibility for existing imports; no second transport or client instance.
+export { api as viewerApi } from "~/api-client"
+export type { DocumentEditInput, FolderEntitiesSearch } from "~/api-client"

package/kernel/apps/web/src/api/errors.ts

@@ -0,0 +1 @@
+export { ApiClientError, expectedError } from "~/api-client"

package/kernel/apps/web/src/api/events.ts

@@ -0,0 +1,42 @@
+/** Discovery completion belongs to one folder, not every open viewer tab. */
+export function subscribeFolderEvent(
+  event: string,
+  folder: string | undefined,
+  listener: () => void,
+) {
+  return subscribeApiEvent(event, (message) => {
+    let data: unknown
+    try {
+      data = JSON.parse((message as MessageEvent<string>).data)
+    } catch {
+      return
+    }
+    if (
+      data &&
+      typeof data === "object" &&
+      "path" in data &&
+      data.path === folder
+    )
+      listener()
+  })
+}
+
+let source: EventSource | undefined
+let subscribers = 0
+/** Share one SSE connection across mounted views; browser reconnects automatically. */
+export function subscribeApiEvent(
+  event: string,
+  listener: (event: Event) => void,
+) {
+  source ??= new EventSource("/api/events")
+  const current = source
+  subscribers++
+  current.addEventListener(event, listener)
+  return () => {
+    current.removeEventListener(event, listener)
+    if (--subscribers === 0) {
+      current.close()
+      source = undefined
+    }
+  }
+}