kennel 0.2.1 → 0.2.3

package/kernel/apps/web/src/markdown-page.tsx

@@ -0,0 +1,444 @@
+import { lazy, Suspense, useEffect, useMemo, useRef, useState } from "react"
+import { QueryClientProvider } from "@tanstack/react-query"
+import { openPath } from "kennel-client"
+import {
+  ArrowLeft,
+  ArrowRight,
+  Download,
+  FileText,
+  FolderOpen,
+  Highlighter,
+  Link as LinkIcon,
+  Pencil,
+  Share2,
+  Sparkles,
+  X,
+} from "lucide-react"
+
+import type { ViewerAction } from "@raggle-ai/ui/components/viewer-options"
+import { markdownMetadata } from "@raggle-ai/markdown"
+import { SingleNotePage } from "@raggle-ai/notes/pages/single-note-page"
+import { toast, Toaster } from "@raggle-ai/ui/components/sonner"
+import { ViewerOptions } from "@raggle-ai/ui/components/viewer-options"
+
+import { copyPath } from "./copy-path"
+import { documentDownloadUrl, documentViewerParams } from "./document-url"
+import {
+  bridgeAllowedOrigins,
+  closePanel,
+  panelSelection,
+  panelState,
+  startBridge,
+} from "./host-bridge"
+import { localSource } from "./local-source"
+import { queryClient } from "./query-client"
+import { useAskAi } from "./use-ask-ai"
+import { useAskDraft } from "./use-ask-draft"
+import { useDocument } from "./use-document"
+import { ViewProvider } from "./view-context"
+import { ViewHeader } from "./view-header"
+import { useViewerCapabilities } from "./viewer-capabilities"
+import {
+  folderDocumentHref,
+  folderSectionHref,
+  parseViewerRoute,
+} from "./viewer-route"
+
+const SelectionPopup = lazy(async () => ({
+  default: (await import("./selection-popup")).SelectionPopup,
+}))
+const AskTray = lazy(async () => ({
+  default: (await import("./ask-tray")).AskTray,
+}))
+const LinkedSessionHeader = lazy(async () => ({
+  default: (await import("./linked-session-header")).LinkedSessionHeader,
+}))
+
+function DocumentView({
+  path,
+  folder,
+  session,
+  embedded = false,
+  panel = false,
+}: {
+  path: string
+  folder?: string
+  session?: string
+  embedded?: boolean
+  panel?: boolean
+}) {
+  const query = useDocument({
+    href: window.location.href,
+    folder,
+    path,
+    source: localSource,
+  })
+  const watch = documentViewerParams(window.location.href).get("watch") === "1"
+  const document = query.data
+  const content = useMemo(
+    () =>
+      document?.kind === "markdown"
+        ? markdownMetadata(document.content)
+        : {
+            body: document?.content ?? "",
+            entries: [] as [string, unknown][],
+            lineOffset: 0,
+            title: undefined,
+          },
+    [document],
+  )
+  const summary = useMemo(
+    () => ({ path, title: content.title ?? path.split("/").at(-1) ?? path }),
+    [path, content.title],
+  )
+  const { enabled, setEnabled } = useAskAi()
+  const { draft } = useAskDraft(folder ?? "")
+  const [composer, setComposer] = useState(false)
+  const [dismissed, setDismissed] = useState(false)
+  const capabilities = useViewerCapabilities()
+  const caps = capabilities.data
+  const localFolder = Boolean(folder?.startsWith("/"))
+  // Server-backed actions are driven by the capability surface, never by
+  // the absolute folder path alone: a remote phone must not be offered "Open
+  // in default app" or ACP actions that cannot exist on the server it hits.
+  const hostLocal = caps?.hostActions === "local"
+  const acpAvailable = caps?.acp === true
+  const ai =
+    acpAvailable &&
+    localFolder &&
+    Boolean(document && document.kind !== "html" && document.content)
+  const full = document?.root
+    ? `${document.root.replace(/\/+$/, "")}/${document.path}`
+    : path
+
+  const sharePreview = () => {
+    const value = window.location.href
+    const fallback = () => copyPath(value)
+    if (!navigator.share) {
+      fallback()
+      return
+    }
+    void navigator
+      .share({
+        title: summary.title,
+        text: `${summary.title} — Kennel preview`,
+        url: value,
+      })
+      .catch((error: unknown) => {
+        if (error instanceof DOMException && error.name === "AbortError") return
+        fallback()
+      })
+  }
+
+  const download = () => {
+    const href = document ? documentDownloadUrl(document) : undefined
+    if (!href || !document) {
+      toast.error("This preview cannot be downloaded")
+      return
+    }
+    const anchor = window.document.createElement("a")
+    anchor.href = href
+    anchor.download = document.path.split("/").at(-1) ?? "download"
+    window.document.body.append(anchor)
+    anchor.click()
+    anchor.remove()
+  }
+
+  const selectionAction: ViewerAction | null =
+    ai && document?.kind === "markdown"
+      ? {
+          kind: "checkbox",
+          id: "selection",
+          label: "AI text selection",
+          icon: <Highlighter aria-hidden="true" />,
+          description: "Select text to ask about it",
+          checked: enabled,
+          run: (checked: boolean) => {
+            setEnabled(checked)
+            setDismissed(false)
+          },
+        }
+      : null
+  const aiActions: ViewerAction[] = ai
+    ? [
+        { kind: "separator" },
+        { kind: "label", label: "AI" },
+        {
+          kind: "item",
+          id: "ask",
+          label: "Ask AI…",
+          icon: <Sparkles aria-hidden="true" />,
+          description: "Ask about this document",
+          run: () => {
+            setComposer(true)
+            setDismissed(false)
+          },
+        },
+        ...(selectionAction ? [selectionAction] : []),
+        { kind: "separator" },
+      ]
+    : []
+  const downloadAction: ViewerAction | null =
+    caps?.download !== false
+      ? {
+          kind: "item",
+          id: "download",
+          label: "Download",
+          icon: <Download aria-hidden="true" />,
+          disabled: !document,
+          disabledReason: "This preview cannot be downloaded",
+          run: download,
+        }
+      : null
+  const folderAction: ViewerAction | null =
+    hostLocal && folder
+      ? {
+          kind: "item",
+          id: "folder",
+          label: "Open containing folder",
+          icon: <FolderOpen aria-hidden="true" />,
+          run: () => {
+            const parent = path.includes("/")
+              ? `${folder}/${path.slice(0, path.lastIndexOf("/"))}`
+              : folder
+            window.location.assign(folderSectionHref(parent, "notes"))
+          },
+        }
+      : null
+  const openDefaultAction: ViewerAction | null =
+    hostLocal && localFolder && document?.kind === "markdown"
+      ? {
+          kind: "item",
+          id: "open-default",
+          label: "Open in default app",
+          icon: <Pencil aria-hidden="true" />,
+          run: () => {
+            void openPath(full).catch((error: unknown) =>
+              toast.error(
+                error instanceof Error ? error.message : "Could not open file.",
+              ),
+            )
+          },
+        }
+      : null
+  const actions: ViewerAction[] = [
+    { kind: "label", label: "File" },
+    {
+      kind: "item",
+      id: "copy",
+      label: "Copy file path",
+      icon: <FileText aria-hidden="true" />,
+      disabled: !document,
+      disabledReason: "Loading file…",
+      run: () => copyPath(full),
+    },
+    ...(folderAction ? [folderAction] : []),
+    ...(openDefaultAction ? [openDefaultAction] : []),
+    ...(downloadAction ? [downloadAction] : []),
+    ...aiActions,
+    { kind: "label", label: "Navigate" },
+    {
+      kind: "item",
+      id: "back",
+      label: "Back",
+      icon: <ArrowLeft aria-hidden="true" />,
+      run: () => window.history.back(),
+    },
+    {
+      kind: "item",
+      id: "forward",
+      label: "Forward",
+      icon: <ArrowRight aria-hidden="true" />,
+      run: () => window.history.forward(),
+    },
+    { kind: "separator" },
+    { kind: "label", label: "Share" },
+    {
+      kind: "item",
+      id: "share",
+      label: "Share preview…",
+      icon: <Share2 aria-hidden="true" />,
+      run: sharePreview,
+    },
+    {
+      kind: "item",
+      id: "copy-link",
+      label: "Copy link",
+      icon: <LinkIcon aria-hidden="true" />,
+      run: () => copyPath(window.location.href),
+    },
+    { kind: "separator" },
+    {
+      kind: "item",
+      id: "close",
+      label: "Close preview",
+      icon: <X aria-hidden="true" />,
+      variant: "destructive",
+      run: () =>
+        window.location.assign(
+          folder ? folderSectionHref(folder, "notes") : "/",
+        ),
+    },
+  ]
+  const showTray =
+    localFolder &&
+    !dismissed &&
+    (composer ||
+      enabled ||
+      draft.comments.length > 0 ||
+      draft.attachments.length > 0)
+
+  // Chat side-panel bridge: only with the explicit `panel=1` opt-in and a
+  // verifiable host origin. Hosts exchange close/resize/selection through the
+  // generic kennel: postMessage protocol (host-bridge.ts) with exact
+  // origin+sender checks; without `panel=1` nothing listens at all.
+  const sendSelectionRef = useRef<(() => void) | null>(null)
+  useEffect(() => {
+    if (!panel) {
+      sendSelectionRef.current = null
+      return
+    }
+    const allowed = bridgeAllowedOrigins(
+      window.location.href,
+      window.document.referrer,
+      window.opener?.origin,
+    )
+    if (!allowed.length) {
+      toast.error("Chat panel bridge has no trusted host origin")
+      return
+    }
+    const genericPost = (message: unknown) => {
+      for (const source of [window.parent, window.opener]) {
+        if (!source) continue
+        try {
+          source.postMessage(message, allowed[0])
+        } catch {
+          /* ignore per-source posting failures */
+        }
+      }
+    }
+    const offBridge = startBridge({
+      allowedOrigins: allowed,
+      post: genericPost,
+      windowRef: () => window,
+      onClose: () => closePanel(genericPost),
+      onResize: () =>
+        genericPost({
+          type: "kennel:state",
+          payload: panelState(document?.path, summary.title),
+        }),
+      onRequest: (kind) => {
+        if (kind === "selection") {
+          genericPost({
+            type: "kennel:selection",
+            payload: panelSelection(document?.path, summary.title),
+          })
+        } else if (kind === "state") {
+          genericPost({
+            type: "kennel:state",
+            payload: panelState(document?.path, summary.title),
+          })
+        }
+      },
+    })
+    const sendSelection = () => {
+      genericPost({
+        type: "kennel:selection",
+        payload: panelSelection(document?.path, summary.title),
+      })
+    }
+    sendSelectionRef.current = sendSelection
+    return () => {
+      offBridge()
+      sendSelectionRef.current = null
+    }
+  }, [document, panel, summary.title])
+
+  return (
+    <ViewProvider kind="document" folder={folder} document={summary}>
+      <SingleNotePage
+        embedded={embedded}
+        error={query.error?.message}
+        header={
+          <ViewHeader
+            options={<ViewerOptions actions={actions} />}
+            accessory={
+              panel ? (
+                <button
+                  type="button"
+                  className="app-options-trigger"
+                  aria-label="Send selection to chat"
+                  title="Send selection to chat"
+                  onClick={() => sendSelectionRef.current?.()}
+                >
+                  <Share2 aria-hidden="true" />
+                </button>
+              ) : null
+            }
+          />
+        }
+        live={watch}
+        loading={!document}
+        panel={panel}
+        sessionHeader={
+          session ? (
+            <Suspense fallback={null}>
+              <LinkedSessionHeader session={session} />
+            </Suspense>
+          ) : undefined
+        }
+        tray={
+          showTray && folder ? (
+            <Suspense fallback={<p role="status">Loading AI composer…</p>}>
+              <AskTray
+                folder={folder}
+                open={composer}
+                onClose={() => {
+                  setComposer(false)
+                  setDismissed(true)
+                  setEnabled(false)
+                }}
+                note={
+                  ai && document
+                    ? { path: document.path, content: document.content }
+                    : undefined
+                }
+              />
+            </Suspense>
+          ) : undefined
+        }
+        renderer={
+          document
+            ? {
+                document,
+                metadata: content,
+                folder,
+                session,
+                selection: enabled && acpAvailable,
+                documentHref: folderDocumentHref,
+                SelectionPopup,
+              }
+            : undefined
+        }
+      />
+    </ViewProvider>
+  )
+}
+
+export function MarkdownPage() {
+  const params = parseViewerRoute(window.location.href)
+  if (!params.document) return null
+  return (
+    <QueryClientProvider client={queryClient}>
+      <DocumentView
+        key={`${params.folder}:${params.document}`}
+        path={params.document}
+        folder={params.folder}
+        session={params.session}
+        embedded={params.embedded}
+        panel={params.panel}
+      />
+      <Toaster />
+    </QueryClientProvider>
+  )
+}

package/kernel/apps/web/src/notes-page.tsx

@@ -0,0 +1,103 @@
+import type { ReactElement } from "react"
+import { useState } from "react"
+import { useLocation } from "@tanstack/react-router"
+import { Plus } from "lucide-react"
+
+import { FolderNotesList } from "@raggle-ai/notes/ui/folder-notes-list"
+import { Button } from "@raggle-ai/ui/components/button"
+
+import { useAiInput } from "./ai-input"
+import { useFolderNotes } from "./use-folder-notes"
+import {
+  folderDocumentHref,
+  folderPathId,
+  folderSectionHref,
+  parseViewerRoute,
+} from "./viewer-route"
+
+export function NotesPage(): ReactElement {
+  const location = useLocation()
+  const [composerOpen, setComposerOpen] = useState(false)
+  const href = `${window.location.origin}${location.href}`
+  const folder = parseViewerRoute(href).folder
+  const aiInput = useAiInput(folder)
+  const folderId = folder ? folderPathId(folder) : "none"
+  // Metadata events are handled once by the shared shell.
+  const { local: query, linked, files, retryLinked } = useFolderNotes(href)
+
+  return (
+    <>
+      <FolderNotesList
+        key={folderId}
+        action={
+          aiInput ? (
+            <button
+              aria-controls="bark-composer"
+              aria-expanded={composerOpen}
+              aria-label={composerOpen ? "Hide bark input" : "Open bark input"}
+              className="inline-flex items-center gap-2 rounded-md border px-3
+                py-1.5 text-sm"
+              onClick={() => setComposerOpen((open) => !open)}
+              title={composerOpen ? "Hide bark input" : "Open bark input"}
+              type="button"
+            >
+              <Plus aria-hidden="true" className="size-4" />
+            </button>
+          ) : undefined
+        }
+        documentHref={(file) => {
+          const target = file.folder ?? folder
+          return target
+            ? folderDocumentHref(target, file.relativePath)
+            : file.relativePath
+        }}
+        error={query.error ? String(query.error) : ""}
+        files={files}
+        folder={folder}
+        folderHref={(source) => folderSectionHref(source, "notes")}
+        loading={query.isLoading}
+      />
+      {query.error ? (
+        <button className="px-4" onClick={() => void query.refetch()}>
+          Retry local notes
+        </button>
+      ) : null}
+      {linked.isLoading ? (
+        <p role="status" className="text-muted-foreground px-4 text-sm">
+          Loading linked notes…
+        </p>
+      ) : null}
+      {linked.error ? (
+        <p role="alert" className="px-4 text-sm">
+          Linked notes could not load.{" "}
+          <button type="button" onClick={retryLinked}>
+            Retry
+          </button>
+        </p>
+      ) : null}
+      {aiInput ? (
+        <Button
+          aria-controls="bark-composer"
+          aria-expanded={composerOpen}
+          aria-label={composerOpen ? "Hide bark input" : "Open bark input"}
+          className="mobile-bark-toggle"
+          onClick={() => setComposerOpen((open) => !open)}
+          title={composerOpen ? "Hide bark input" : "Open bark input"}
+          type="button"
+          variant="outline"
+        >
+          <Plus aria-hidden="true" />
+        </Button>
+      ) : null}
+      {composerOpen && aiInput ? (
+        <section
+          aria-label="AI composer"
+          className="ai-input-host"
+          id="bark-composer"
+        >
+          <aiInput.Composer />
+        </section>
+      ) : null}
+    </>
+  )
+}

package/kernel/apps/web/src/plugins.ts

@@ -0,0 +1,53 @@
+import { lazy } from "react"
+import { externalFolderPlugins } from "@/external-plugins"
+
+import type { FolderPluginClient } from "@raggle-ai/folder-plugin/client"
+import { agentsManifest } from "@raggle-ai/agents/manifest"
+import { calendarManifest } from "@raggle-ai/calendar/manifest"
+import { mailManifest } from "@raggle-ai/mail/manifest"
+import { projectsManifest } from "@raggle-ai/projects/manifest"
+import { tasksManifest } from "@raggle-ai/tasks/manifest"
+
+// Keep navigation metadata cheap. Import only the selected plugin's UI;
+// never construct an import path from an untrusted URL segment.
+export const folderPlugins: FolderPluginClient[] = [
+  {
+    ...calendarManifest,
+    component: lazy(async () => ({
+      default: (await import("@raggle-ai/calendar/client")).calendarClient
+        .component,
+    })),
+  },
+  {
+    ...mailManifest,
+    component: lazy(async () => ({
+      default: (await import("@raggle-ai/mail/client")).mailClient.component,
+    })),
+  },
+  {
+    ...agentsManifest,
+    component: lazy(async () => ({
+      default: (await import("@raggle-ai/agents/client")).agentsClient
+        .component,
+    })),
+  },
+  {
+    ...tasksManifest,
+    component: lazy(async () => ({
+      default: (await import("@raggle-ai/tasks/client")).tasksClient.component,
+    })),
+  },
+  {
+    ...projectsManifest,
+    component: lazy(async () => ({
+      default: (await import("@raggle-ai/projects/client")).projectsClient
+        .component,
+    })),
+  },
+  ...externalFolderPlugins,
+]
+
+const byId = new Map(folderPlugins.map((plugin) => [plugin.id, plugin]))
+export function getFolderPlugin(id: string | undefined) {
+  return id ? byId.get(id) : undefined
+}