kennel 0.2.1 → 0.2.2

package/kernel/apps/web/src/selection-context.ts

@@ -0,0 +1,68 @@
+import type { SelectionLines } from "./use-annotations"
+
+export type SelectionContext = {
+  path: string
+  folder: string
+  selection: string
+  source: string
+  start: number
+  end: number
+  lines?: SelectionLines
+  block: boolean
+}
+
+// Rendered Markdown is not a byte-for-byte copy of its source. Prefer a
+// unique literal match within the selected blocks; otherwise review the
+// complete source blocks (including Markdown syntax) before replacing them.
+export function selectionContext(
+  content: string,
+  selection: string,
+  path: string,
+  folder: string,
+  lines?: SelectionLines,
+): SelectionContext | undefined {
+  if (!selection.trim()) return undefined
+  const starts = [0]
+  for (let index = 0; index < content.length; index++) {
+    if (content[index] === "\n") starts.push(index + 1)
+  }
+  const start = lines ? starts[lines.start - 1] : 0
+  const end = lines ? (starts[lines.end] ?? content.length) : content.length
+  if (start === undefined || end <= start) return undefined
+  const block = content.slice(start, end)
+  const index = block.indexOf(selection)
+  if (index >= 0 && block.indexOf(selection, index + 1) < 0) {
+    return {
+      path,
+      folder,
+      selection,
+      source: selection,
+      start: start + index,
+      end: start + index + selection.length,
+      lines,
+      block: false,
+    }
+  }
+  // Without source positions, never guess which repeated/formatted text to edit.
+  if (!lines) return undefined
+  return {
+    path,
+    folder,
+    selection,
+    source: block,
+    start,
+    end,
+    lines,
+    block: true,
+  }
+}
+
+export type SelectionRequest = {
+  context: SelectionContext
+  mode: "ask" | "edit" | "auto"
+  question: string
+}
+
+export type SelectionResult = { answer: string } | { replacement: string }
+
+export { replaceSelection } from "@raggle-ai/kennel-api/shared/selection"

package/kernel/apps/web/src/selection-input.tsx

@@ -0,0 +1,58 @@
+import { useState } from "react"
+import { Plus } from "lucide-react"
+
+import { Button } from "@raggle-ai/ui/components/button"
+import { toast } from "@raggle-ai/ui/components/sonner"
+
+import type { SelectionContext } from "./selection-context"
+import { useAskDraft } from "./use-ask-draft"
+
+export function SelectionInput({
+  context,
+  onClose,
+}: {
+  context: SelectionContext
+  onClose: () => void
+}) {
+  const [comment, setComment] = useState("")
+  const { add } = useAskDraft(context.folder)
+
+  return (
+    <div
+      className="overflow-hidden rounded-xl border border-[#dce3dc] bg-white
+        text-[#233025] shadow-lg"
+    >
+      <form
+        className="flex items-center gap-2 p-2"
+        onSubmit={(event) => {
+          event.preventDefault()
+          if (!comment.trim()) return
+          add(context, comment)
+          toast.success("Comment added to your message")
+          onClose()
+        }}
+      >
+        <input
+          aria-label="Comment on selected text"
+          className="min-w-0 flex-1 rounded-md bg-transparent px-2 py-1.5
+            text-sm outline-none placeholder:text-[#798579] focus-visible:ring-1
+            focus-visible:ring-[#c6d3c7]"
+          value={comment}
+          onChange={(event) => setComment(event.target.value)}
+          placeholder="Add a question or editing instruction…"
+        />
+        <Button
+          size="icon"
+          className="size-8 shrink-0 rounded-lg bg-[#2f4a38] text-white
+            hover:bg-[#27402f]"
+          type="submit"
+          disabled={!comment.trim()}
+          aria-label="Add comment to message"
+          title="Add to message"
+        >
+          <Plus className="size-4" aria-hidden="true" />
+        </Button>
+      </form>
+    </div>
+  )
+}

package/kernel/apps/web/src/selection-popup.tsx

@@ -0,0 +1,155 @@
+import type { ReactNode } from "react"
+import { useEffect, useLayoutEffect, useRef, useState } from "react"
+import { createPortal } from "react-dom"
+
+import { selectionLines } from "@raggle-ai/ui/lib/source-components"
+
+import type { SelectionContext } from "./selection-context"
+import { selectionContext } from "./selection-context"
+import { SelectionInput } from "./selection-input"
+import { useAskAi } from "./use-ask-ai"
+
+type Selection = { context: SelectionContext; rect: DOMRect }
+
+export function SelectionPopup({
+  children,
+  content,
+  folder,
+  path,
+}: {
+  children: ReactNode
+  content: string
+  folder: string
+  path: string
+}) {
+  const { enabled } = useAskAi()
+  const wrapper = useRef<HTMLDivElement>(null)
+  const popup = useRef<HTMLDivElement>(null)
+  const [selected, setSelected] = useState<Selection>()
+  const [position, setPosition] = useState({ left: 8, top: 8 })
+
+  useEffect(() => {
+    if (!enabled || !folder.startsWith("/")) return
+    let timer: ReturnType<typeof setTimeout>
+    const inside = (target: EventTarget | null) =>
+      target instanceof Node && popup.current?.contains(target)
+    const read = () => {
+      if (inside(document.activeElement)) return
+      const selection = window.getSelection()
+      const range = selection?.rangeCount ? selection.getRangeAt(0) : undefined
+      const text = selection?.toString() ?? ""
+      if (
+        !range ||
+        !text.trim() ||
+        !wrapper.current?.contains(range.commonAncestorContainer)
+      ) {
+        setSelected(undefined)
+        return
+      }
+      const context = selectionContext(
+        content,
+        text,
+        path,
+        folder,
+        selectionLines(range),
+      )
+      if (!context) {
+        setSelected(undefined)
+        return
+      }
+      const rect = range.getBoundingClientRect()
+      setSelected((previous) =>
+        previous?.context.start === context.start &&
+        previous.context.end === context.end &&
+        previous.context.selection === text
+          ? previous
+          : { context, rect },
+      )
+    }
+    const schedule = () => {
+      clearTimeout(timer)
+      timer = setTimeout(read, 150)
+    }
+    const down = (event: PointerEvent) => {
+      if (!inside(event.target)) setSelected(undefined)
+    }
+    const escape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setSelected(undefined)
+        window.getSelection()?.removeAllRanges()
+      }
+    }
+    const scroll = (event: Event) => {
+      if (!inside(event.target)) setSelected(undefined)
+    }
+    document.addEventListener("selectionchange", schedule)
+    document.addEventListener("pointerup", schedule)
+    document.addEventListener("keyup", schedule)
+    document.addEventListener("pointerdown", down)
+    document.addEventListener("keydown", escape)
+    document.addEventListener("scroll", scroll, true)
+    window.addEventListener("resize", read)
+    return () => {
+      clearTimeout(timer)
+      document.removeEventListener("selectionchange", schedule)
+      document.removeEventListener("pointerup", schedule)
+      document.removeEventListener("keyup", schedule)
+      document.removeEventListener("pointerdown", down)
+      document.removeEventListener("keydown", escape)
+      document.removeEventListener("scroll", scroll, true)
+      window.removeEventListener("resize", read)
+    }
+  }, [enabled, content, folder, path])
+
+  useLayoutEffect(() => {
+    if (!selected || !popup.current) return
+    const element = popup.current
+    const place = () => {
+      const { width, height } = element.getBoundingClientRect()
+      setPosition({
+        left: Math.max(
+          8,
+          Math.min(
+            selected.rect.left + selected.rect.width / 2 - width / 2,
+            window.innerWidth - width - 8,
+          ),
+        ),
+        // Above the selection, clamped to the viewport rather than a bottom bar.
+        top: Math.max(8, selected.rect.top - height - 8),
+      })
+    }
+    place()
+    const observer = new ResizeObserver(place)
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [selected])
+
+  return (
+    <div ref={wrapper} className="contents">
+      {children}
+      {enabled && selected
+        ? createPortal(
+            <div
+              data-selection-ai
+              ref={popup}
+              role="region"
+              aria-label="Selection AI"
+              className="fixed z-50 max-h-[70dvh]
+                w-[min(420px,calc(100vw-16px))] overflow-y-auto"
+              style={position}
+            >
+              <SelectionInput
+                key={`${path}:${selected.context.start}:${selected.context.end}`}
+                context={selected.context}
+                onClose={() => {
+                  setSelected(undefined)
+                  window.getSelection()?.removeAllRanges()
+                }}
+              />
+            </div>,
+            document.body,
+          )
+        : null}
+    </div>
+  )
+}

package/kernel/apps/web/src/session-transcript-page.tsx

@@ -0,0 +1,152 @@
+import { useCallback, useState } from "react"
+import { useQuery } from "@tanstack/react-query"
+import { useLocation, useNavigate } from "@tanstack/react-router"
+import { Terminal } from "lucide-react"
+
+import type { SessionTranscript } from "@raggle-ai/ui/chat"
+import { Button } from "@raggle-ai/ui/components/button"
+import { FolderMobileBar } from "@raggle-ai/ui/components/folder-mobile-bar"
+import { FolderSessionPage } from "@raggle-ai/ui/components/folder-session-page"
+
+import { LiveSessionControls } from "./live-session-controls"
+import { localSource } from "./local-source"
+import {
+  folderDocumentHref,
+  folderPathId,
+  folderSectionHref,
+  parseViewerRoute,
+} from "./viewer-route"
+
+function sessionTranscriptUrl(origin: string, sessionId: string) {
+  const url = new URL("/api/session", origin)
+  url.searchParams.set("sessionId", sessionId)
+  return `${url.pathname}${url.search}`
+}
+
+export function SessionTranscriptPage() {
+  const location = useLocation()
+  const href = `${window.location.origin}${location.href}`
+  const params = parseViewerRoute(href)
+
+  const sessionId = params.sessionId
+  const folder = params.folder
+
+  const query = useQuery<SessionTranscript>({
+    enabled: !!(sessionId && folder),
+    gcTime: 10 * 60_000,
+    queryFn: async () => {
+      if (!sessionId) throw new Error("No session ID")
+      const response = await fetch(
+        sessionTranscriptUrl(window.location.origin, sessionId),
+      )
+      if (!response.ok) {
+        const message = (await response.text()).trim()
+        throw new Error(message || "Could not load session.")
+      }
+      return (await response.json()) as SessionTranscript
+    },
+    queryKey: ["session", sessionId],
+    staleTime: 30_000,
+  })
+
+  const fileHref = useCallback(
+    (reference: string) => {
+      if (!folder) return null
+      return folderDocumentHref(folder, reference)
+    },
+    [folder],
+  )
+
+  const backHref = folder ? folderSectionHref(folder, "sessions") : "/"
+  const folderName =
+    (folder ?? "Kennel").replace(/\/+$/, "").split("/").pop() ?? "Kennel"
+  const homeHref = folder ? `/folder/${folderPathId(folder)}/sessions` : "/"
+
+  return (
+    <SessionPageWithLive
+      backHref={backHref}
+      error={query.error ? String(query.error) : ""}
+      fileHref={fileHref}
+      folderName={folderName}
+      homeHref={homeHref}
+      loading={query.isLoading}
+      session={query.data}
+    />
+  )
+}
+
+function SessionPageWithLive({
+  backHref,
+  error,
+  fileHref,
+  folderName,
+  homeHref,
+  loading,
+  session,
+}: {
+  backHref: string
+  error: string
+  fileHref: (reference: string) => string | null
+  folderName: string
+  homeHref: string
+  loading: boolean
+  session?: SessionTranscript
+}) {
+  const [showLive, setShowLive] = useState(false)
+  const navigate = useNavigate()
+
+  const onBack = () => {
+    void navigate({ to: backHref })
+  }
+
+  return (
+    <div>
+      <FolderMobileBar
+        backHref={backHref}
+        backLabel="Sessions"
+        canOpen
+        homeHref={homeHref}
+        name={folderName}
+        onOpen={() => void localSource.openRoot?.()}
+      />
+      {showLive ? (
+        <main className="session-page has-live-bar">
+          <LiveSessionControls />
+        </main>
+      ) : (
+        <main
+          className={session ? "session-page has-live-bar" : "session-page"}
+        >
+          <FolderSessionPage
+            error={error}
+            fileHref={fileHref}
+            loading={loading}
+            onBack={onBack}
+            session={session}
+          />
+        </main>
+      )}
+
+      {/* Fixed bottom toggle bar */}
+      {session ? (
+        <div className="live-agent-bar">
+          <div className="live-agent-bar-inner">
+            {showLive ? null : (
+              <p className="text-muted-foreground m-0 flex-1 text-xs">
+                Session: {session.title}
+              </p>
+            )}
+            <Button
+              size="sm"
+              variant={showLive ? "default" : "outline"}
+              onClick={() => setShowLive((v) => !v)}
+            >
+              <Terminal className="mr-1.5 size-4" />
+              {showLive ? "View Transcript" : "Live Agent"}
+            </Button>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/kernel/apps/web/src/use-annotations.ts

@@ -0,0 +1,162 @@
+import { useCallback, useMemo, useRef, useState } from "react"
+
+export type SelectionLines = {
+  end: number
+  start: number
+}
+
+export type Annotation = {
+  id: string
+  lines?: SelectionLines
+  selection: string
+  comments: string[]
+}
+
+function excerpt(text: string) {
+  const collapsed = text.replace(/\s+/g, " ").trim()
+  if (collapsed.length <= 140) return collapsed
+  return `${collapsed.slice(0, 137)}…`
+}
+
+export function formatLines(lines?: SelectionLines) {
+  if (!lines) return ""
+  if (lines.start === lines.end) return ` (line ${lines.start})`
+  return ` (lines ${lines.start}–${lines.end})`
+}
+
+export function formatAnnotations(path: string, annotations: Annotation[]) {
+  const blocks = annotations.map((annotation, index) => {
+    const comments = annotation.comments
+      .map((comment) => `   - ${comment}`)
+      .join("\n")
+    return `${index + 1}. "${excerpt(annotation.selection)}"${formatLines(annotation.lines)}\n${comments}`
+  })
+  return [`Comments on ${path}`, "", ...blocks].join("\n").trim()
+}
+
+async function postJson(path: string, body: unknown) {
+  const response = await fetch(path, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body),
+  })
+  if (!response.ok) {
+    const message = (await response.text()).trim()
+    throw new Error(message || `HTTP ${response.status}`)
+  }
+  return (await response.json()) as Record<string, unknown>
+}
+
+export function useAnnotations({
+  path,
+  session,
+}: {
+  path: string
+  /** Chat session (`client:nativeId`) that comments are sent to via ACP. */
+  session?: string
+}) {
+  const [annotations, setAnnotations] = useState<Annotation[]>([])
+  const [copied, setCopied] = useState(false)
+  const live = useRef<string | undefined>(undefined)
+  const [sending, setSending] = useState(false)
+  const [sent, setSent] = useState(false)
+  const [sendError, setSendError] = useState("")
+
+  const addComment = useCallback(
+    (selection: string, comment: string, lines?: SelectionLines) => {
+      setAnnotations((current) => {
+        const existing = current.find(
+          (annotation) =>
+            annotation.selection === selection &&
+            annotation.lines?.start === lines?.start &&
+            annotation.lines?.end === lines?.end,
+        )
+        if (!existing) {
+          return [
+            ...current,
+            { comments: [comment], id: crypto.randomUUID(), lines, selection },
+          ]
+        }
+        return current.map((annotation) =>
+          annotation.id === existing.id
+            ? { ...annotation, comments: [...annotation.comments, comment] }
+            : annotation,
+        )
+      })
+    },
+    [],
+  )
+
+  const removeAnnotation = useCallback((id: string) => {
+    setAnnotations((current) =>
+      current.filter((annotation) => annotation.id !== id),
+    )
+  }, [])
+
+  const text = useMemo(
+    () => formatAnnotations(path, annotations),
+    [path, annotations],
+  )
+
+  const count = useMemo(
+    () =>
+      annotations.reduce(
+        (total, annotation) => total + annotation.comments.length,
+        0,
+      ),
+    [annotations],
+  )
+
+  const copy = useCallback(async () => {
+    await navigator.clipboard.writeText(text)
+    setCopied(true)
+    window.setTimeout(() => setCopied(false), 1800)
+  }, [text])
+
+  // Lazily connect a live ACP session with the referenced chat session
+  // loaded, so comments continue that conversation with its full context.
+  // The browser session is reused across sends and dropped on any failure.
+  const send = useCallback(async () => {
+    if (!session || sending) return
+    setSending(true)
+    setSendError("")
+    try {
+      if (!live.current) {
+        const separator = session.indexOf(":")
+        const connected = await postJson("/api/acp/connect", {
+          client: separator > 0 ? session.slice(0, separator) : undefined,
+          resumeId: session,
+        })
+        live.current = String(connected.sessionId)
+      }
+      await postJson("/api/acp/send", { sessionId: live.current, text })
+      setSent(true)
+      window.setTimeout(() => setSent(false), 1800)
+    } catch (error) {
+      if (live.current)
+        void postJson("/api/acp/disconnect", {
+          sessionId: live.current,
+        }).catch(() => {})
+      live.current = undefined
+      setSendError(
+        error instanceof Error ? error.message : "Could not send comments.",
+      )
+    } finally {
+      setSending(false)
+    }
+  }, [session, sending, text])
+
+  return {
+    addComment,
+    annotations,
+    copied,
+    copy,
+    count,
+    removeAnnotation,
+    send,
+    sendError,
+    sending,
+    sent,
+    text,
+  }
+}

package/kernel/apps/web/src/use-ask-ai.ts

@@ -0,0 +1,26 @@
+import { useSyncExternalStore } from "react"
+
+// One opt-in switch shared by document headers and selection surfaces.
+// Deliberately session-only: reopening the app never enables selection capture.
+let enabled = false
+const listeners = new Set<() => void>()
+const subscribe = (listener: () => void) => {
+  listeners.add(listener)
+  return () => {
+    listeners.delete(listener)
+  }
+}
+const snapshot = () => enabled
+
+export function setAskAi(value: boolean) {
+  if (enabled === value) return
+  enabled = value
+  for (const listener of listeners) listener()
+}
+
+export function useAskAi() {
+  return {
+    enabled: useSyncExternalStore(subscribe, snapshot, () => false),
+    setEnabled: setAskAi,
+  }
+}

package/kernel/apps/web/src/use-ask-draft.ts

@@ -0,0 +1,27 @@
+import { useSyncExternalStore } from "react"
+
+import type { AskDraft } from "./ask-draft"
+import { createAskDraft } from "./ask-draft"
+
+const stores = new Map<string, ReturnType<typeof createAskDraft>>()
+const empty: AskDraft = { comments: [], attachments: [] }
+
+export function useAskDraft(folder: string) {
+  let store = stores.get(folder)
+  if (!store) {
+    let storage: Storage | undefined
+    try {
+      storage = window.sessionStorage
+    } catch {
+      /* Some browsers disable storage. */
+    }
+    store = createAskDraft(folder, storage)
+    stores.set(folder, store)
+  }
+  const draft = useSyncExternalStore(
+    store.subscribe,
+    store.snapshot,
+    () => empty,
+  )
+  return { draft, ...store }
+}

package/kernel/apps/web/src/use-document.ts

@@ -0,0 +1,37 @@
+import { useQuery } from "@tanstack/react-query"
+
+import type { BarkdownSource } from "@raggle-ai/markdown/explorer"
+
+import {
+  documentResponse,
+  documentViewerParams,
+  fetchDocument,
+} from "./document-url"
+import { folderPathId } from "./viewer-route"
+
+export function useDocument({
+  href,
+  folder,
+  path,
+  source,
+}: {
+  href: string
+  folder?: string
+  path: string
+  source: BarkdownSource
+}) {
+  const watch = documentViewerParams(href).get("watch") === "1"
+  return useQuery({
+    gcTime: 30 * 60_000,
+    queryKey: ["document", folder ? folderPathId(folder) : "dropped", path],
+    queryFn: async () => {
+      if (folder?.startsWith("/")) return fetchDocument(href, path)
+      const result = await source.read()
+      const document = result.documents.find((item) => item.path === path)
+      if (!document) throw new Error("Document not found.")
+      return documentResponse(Response.json({ ...document, root: result.root }))
+    },
+    refetchInterval: watch ? 1_500 : undefined,
+    staleTime: 15_000,
+  })
+}