kennel 0.2.1 → 0.2.2

package/kernel/packages/ui/src/components/file-renderer.tsx

@@ -0,0 +1,466 @@
+import type { DocumentResponse } from "kennel-client"
+import type { ComponentProps, ComponentType, ReactNode } from "react"
+import { Suspense, useMemo } from "react"
+
+import type { markdownMetadata } from "@raggle-ai/markdown"
+import { BarkdownContent } from "@raggle-ai/markdown"
+import { Link } from "@raggle-ai/ui/components/link"
+
+import {
+  documentRendererOverride,
+  markdownComponentExtensions,
+} from "../lib/document-extensions"
+import { rewriteDocumentMedia } from "../lib/media-urls"
+import {
+  headingId,
+  obsidianMarkdown,
+  resolveMarkdownLink,
+  resolveObsidianLink,
+} from "../lib/obsidian-links"
+import { sourceBlockComponents } from "../lib/source-components"
+
+function documentLinkHref(
+  document: string,
+  folder: string | undefined,
+  session: string | undefined,
+  documentHref?: (folder: string, document: string) => string,
+) {
+  const href =
+    folder && documentHref
+      ? documentHref(folder, document)
+      : `?file=${encodeURIComponent(document)}`
+  return session
+    ? `${href}${href.includes("?") ? "&" : "?"}session=${encodeURIComponent(session)}`
+    : href
+}
+
+export function ObsidianLink({
+  currentDocument,
+  folder,
+  href,
+  session,
+  documentHref,
+  ...props
+}: ComponentProps<"a"> & {
+  currentDocument: string
+  folder?: string
+  session?: string
+  documentHref?: (folder: string, document: string) => string
+}) {
+  const marker = "/_obsidian-link/"
+  let raw: string | undefined
+  if (href?.startsWith(marker)) {
+    try {
+      raw = decodeURIComponent(href.slice(marker.length))
+    } catch {
+      raw = undefined
+    }
+  }
+  const link = raw
+    ? resolveObsidianLink(raw, currentDocument)
+    : href
+      ? resolveMarkdownLink(href, currentDocument)
+      : undefined
+  if (!link) return <Link href={href} {...props} />
+  const fragment = link.heading ? headingId(link.heading) : ""
+  const target = link.reference
+    ? documentLinkHref(link.reference, folder, session, documentHref)
+    : ""
+  return (
+    <Link
+      href={fragment ? `${target}#${fragment}` : target || undefined}
+      {...props}
+    />
+  )
+}
+
+function ImageRenderer({ document }: { document: DocumentResponse }) {
+  const name = document.path.split("/").at(-1) ?? document.path
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-4 p-6">
+      <img
+        alt={name}
+        className="max-h-[min(70vh,70dvh)] max-w-full rounded-lg border
+          border-[#e7ebe7] object-contain"
+        src={document.rawUrl}
+      />
+      <small className="text-[0.8rem] text-[#6c7a6d]">{name}</small>
+    </div>
+  )
+}
+
+function extensionOf(path: string) {
+  return path.slice(path.lastIndexOf(".") + 1).toLowerCase()
+}
+
+function MetadataValue({ value }: { value: unknown }) {
+  if (Array.isArray(value))
+    return (
+      <span className="flex flex-wrap gap-1.5">
+        {value.map((item, index) => (
+          <span
+            className="rounded-full bg-[#e7ebe7] px-2 py-0.5 text-[0.8rem]"
+            key={`${index}-${String(item)}`}
+          >
+            {String(item)}
+          </span>
+        ))}
+      </span>
+    )
+  if (typeof value === "boolean") return value ? "Yes" : "No"
+  if (typeof value === "object" && value) return JSON.stringify(value)
+  return String(value ?? "")
+}
+
+/**
+ * Document details panel from the Markdown frontmatter. Collapsed by default —
+ * the reader expands it when the metadata matters.
+ */
+function FileFrontmatter({ entries }: { entries: [string, unknown][] }) {
+  return (
+    <details
+      className="mb-5 rounded-lg border border-[#e7ebe7] bg-[#fafbfa] px-4 py-3"
+    >
+      <summary className="flex cursor-pointer items-center gap-2 font-semibold">
+        <span>Document details</span>
+        <small className="text-[0.8rem] font-normal text-[#6c7a6d]">
+          {entries.length} fields
+        </small>
+      </summary>
+      <dl className="mt-3 grid gap-2">
+        {entries.map(([key, value]) => (
+          <div
+            className="grid grid-cols-[140px_1fr] items-start gap-3
+              max-[767px]:grid-cols-1"
+            key={key}
+          >
+            <dt
+              className="text-[0.8rem] font-semibold text-[#5a6b5c] capitalize"
+            >
+              {key.replaceAll(/[-_]/g, " ")}
+            </dt>
+            <dd className="m-0 text-[0.85rem] text-[#2f382f]">
+              <MetadataValue value={value} />
+            </dd>
+          </div>
+        ))}
+      </dl>
+    </details>
+  )
+}
+
+function CodeRenderer({ document }: { document: DocumentResponse }) {
+  return (
+    <pre
+      className="m-0 overflow-auto rounded-lg bg-[#f8f9f8] p-4 text-[0.85rem]
+        leading-[1.6]"
+      data-code-language={extensionOf(document.path)}
+    >
+      <code>{document.content}</code>
+    </pre>
+  )
+}
+
+function parseDelimited(content: string, delimiter: "," | "\t"): string[][] {
+  const rows: string[][] = []
+  let row: string[] = []
+  let field = ""
+  let quoted = false
+  for (let index = 0; index < content.length; index += 1) {
+    const character = content[index]
+    if (quoted) {
+      if (character === '"' && content[index + 1] === '"') {
+        field += '"'
+        index += 1
+        continue
+      }
+      if (character === '"') {
+        quoted = false
+        continue
+      }
+      field += character
+      continue
+    }
+    if (character === '"' && field === "") {
+      quoted = true
+      continue
+    }
+    if (character === delimiter) {
+      row.push(field)
+      field = ""
+      continue
+    }
+    if (character === "\n" || character === "\r") {
+      if (character === "\r" && content[index + 1] === "\n") index += 1
+      row.push(field)
+      if (row.some((cell) => cell !== "")) rows.push(row)
+      row = []
+      field = ""
+      continue
+    }
+    field += character
+  }
+  row.push(field)
+  if (row.some((cell) => cell !== "")) rows.push(row)
+  return rows
+}
+
+function TableRenderer({ document }: { document: DocumentResponse }) {
+  const delimiter = document.path.toLowerCase().endsWith(".tsv") ? "\t" : ","
+  const rows = useMemo(
+    () => parseDelimited(document.content, delimiter),
+    [document.content, delimiter],
+  )
+  const header = rows[0] ?? []
+  const body = rows.length > 1 ? rows.slice(1) : []
+  return (
+    <div className="overflow-auto p-4">
+      <table className="w-full border-collapse text-left text-[0.85rem]">
+        <thead>
+          <tr>
+            {header.map((cell, index) => (
+              <th
+                className="border-b border-[#e7ebe7] bg-[#fafbfa] px-3 py-2
+                  font-semibold text-[#435447]"
+                key={index}
+              >
+                {cell}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {body.map((cells, rowIndex) => (
+            <tr key={rowIndex} className="odd:bg-white">
+              {cells.map((cell, index) => (
+                <td
+                  className="border-b border-[#eef1ec] px-3 py-2 text-[#2f382f]"
+                  key={index}
+                >
+                  {cell}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+function emlHeaders(content: string) {
+  const blank = content.search(/\r?\n\r?\n/)
+  const raw = blank === -1 ? content : content.slice(0, blank)
+  const body =
+    blank === -1
+      ? ""
+      : content.slice(blank + (content.startsWith("\r\n\r\n", blank) ? 4 : 2))
+  const headers = new Map<string, string>()
+  let current: string | undefined
+  for (const line of raw.split(/\r?\n/)) {
+    if (/^[\t ]/.test(line) && current) {
+      headers.set(current, `${headers.get(current)} ${line.trim()}`)
+      continue
+    }
+    const match = /^([^:\s]+):\s*(.*)$/.exec(line)
+    if (!match) continue
+    current = (match[1] ?? "").toLowerCase()
+    headers.set(current, (match[2] ?? "").trim())
+  }
+  return { body, headers }
+}
+
+function EmlRenderer({ document }: { document: DocumentResponse }) {
+  const { body, headers } = useMemo(
+    () => emlHeaders(document.content),
+    [document.content],
+  )
+  const subject =
+    headers.get("subject") ?? document.path.split("/").at(-1) ?? document.path
+  const from = headers.get("from") ?? "Unknown sender"
+  const to = headers.get("to") ?? "Unknown recipient"
+  const date = headers.get("date") ?? "Unknown date"
+  const html = body.includes("<html") || body.includes("<!DOCTYPE html")
+  const headerEntries: [string, string][] = [
+    ["From", from],
+    ["To", to],
+    ["Date", date],
+  ]
+  return (
+    <article className="min-h-0">
+      <div className="border-b border-[#e7ebe7] bg-[#fafbfa] px-6 py-5">
+        <h2 className="m-0 mb-3 text-lg font-semibold text-[#2f382f]">
+          {subject}
+        </h2>
+        <dl className="m-0 grid gap-1">
+          {headerEntries.map(([label, value]) => (
+            <div
+              className="grid grid-cols-[70px_1fr] gap-3 text-[0.8rem]"
+              key={label}
+            >
+              <dt className="font-semibold text-[#5a6b5c]">{label}</dt>
+              <dd className="m-0 text-[#2f382f]">{value}</dd>
+            </div>
+          ))}
+        </dl>
+      </div>
+      {html ? (
+        <iframe
+          className="h-[min(60vh,60dvh)] w-full"
+          sandbox=""
+          srcDoc={body}
+          title={subject}
+        />
+      ) : (
+        <pre
+          className="m-0 overflow-auto p-6 text-[0.85rem] leading-[1.6]
+            whitespace-pre-wrap text-[#2f382f]"
+        >
+          {body}
+        </pre>
+      )}
+    </article>
+  )
+}
+
+function BinaryRenderer({ document }: { document: DocumentResponse }) {
+  const name = document.path.split("/").at(-1) ?? document.path
+  const href = document.rawUrl
+    ? `${document.rawUrl}${document.rawUrl.includes("?") ? "&" : "?"}download=1`
+    : undefined
+  return (
+    <div
+      className="flex h-full flex-col items-center justify-center gap-4 p-6
+        text-center"
+    >
+      <p className="m-0 text-[0.9rem] text-[#6c7a6d]">
+        Kennel cannot render this file type inline.
+      </p>
+      {href ? (
+        <a
+          className="rounded-lg border border-[#d8ddd4] bg-white px-4 py-2
+            text-[0.85rem] font-semibold text-[#24543a]"
+          href={href}
+        >
+          Download {name}
+        </a>
+      ) : (
+        <small className="text-[0.8rem] text-[#6c7a6d]">{name}</small>
+      )}
+    </div>
+  )
+}
+
+export function FileRenderer({
+  document,
+  metadata,
+  folder,
+  session,
+  selection = false,
+  documentHref,
+  SelectionPopup,
+}: {
+  document: DocumentResponse
+  metadata: ReturnType<typeof markdownMetadata>
+  folder?: string
+  session?: string
+  selection?: boolean
+  documentHref?: (folder: string, document: string) => string
+  SelectionPopup?: ComponentType<{
+    children: ReactNode
+    content: string
+    folder: string
+    path: string
+  }>
+}) {
+  const components = useMemo(
+    () => ({
+      ...sourceBlockComponents(metadata.lineOffset),
+      ...markdownComponentExtensions(),
+      a: (props: ComponentProps<"a">) => (
+        <ObsidianLink
+          {...props}
+          currentDocument={document.path}
+          folder={folder}
+          session={session}
+          documentHref={documentHref}
+        />
+      ),
+    }),
+    [metadata.lineOffset, document.path, folder, session, documentHref],
+  )
+  const markdownRoot = folder ?? document.root ?? ""
+  const headingCopyPath = markdownRoot
+    ? `${markdownRoot.replace(/\/+$/, "")}/${document.path}`
+    : undefined
+  const markdown =
+    document.kind === "markdown" ? (
+      <BarkdownContent
+        components={components}
+        headingCopyPath={headingCopyPath}
+        mode="markdown"
+        value={rewriteDocumentMedia(
+          obsidianMarkdown(metadata.body),
+          markdownRoot,
+          document.path,
+        )}
+      />
+    ) : null
+  const override = useMemo(() => documentRendererOverride(document), [document])
+  const body =
+    document.kind === "markdown" &&
+    selection &&
+    folder?.startsWith("/") &&
+    SelectionPopup ? (
+      <Suspense fallback={markdown}>
+        <SelectionPopup
+          key={`${folder}:${document.path}`}
+          path={document.path}
+          folder={folder}
+          content={document.content}
+        >
+          {markdown}
+        </SelectionPopup>
+      </Suspense>
+    ) : override ? (
+      <override.component document={document} />
+    ) : document.kind === "markdown" ? (
+      markdown
+    ) : document.kind === "html" ? (
+      <iframe
+        className="h-full min-h-[min(60vh,60dvh)] w-full rounded-lg border
+          border-[#e7ebe7]"
+        sandbox=""
+        srcDoc={document.content}
+        title={document.path}
+      />
+    ) : document.kind === "text" ? (
+      <pre
+        className="m-0 overflow-auto rounded-lg bg-[#f8f9f8] p-4 text-[0.85rem]
+          leading-[1.6]"
+      >
+        {document.content}
+      </pre>
+    ) : document.kind === "code" ? (
+      <CodeRenderer document={document} />
+    ) : document.kind === "image" ? (
+      <ImageRenderer document={document} />
+    ) : document.kind === "table" ? (
+      <TableRenderer document={document} />
+    ) : document.kind === "eml" ? (
+      <EmlRenderer document={document} />
+    ) : (
+      <BinaryRenderer document={document} />
+    )
+  return (
+    <article
+      className="min-h-0 flex-1 overflow-auto px-6 py-5"
+      style={{ paddingBottom: "calc(var(--ask-tray-height, 0px) + 20px)" }}
+    >
+      {metadata.entries.length ? (
+        <FileFrontmatter entries={metadata.entries} />
+      ) : null}
+      {body}
+    </article>
+  )
+}

package/kernel/packages/ui/src/components/filter-chip-panel.tsx

@@ -0,0 +1,157 @@
+"use client"
+
+import { useState } from "react"
+import { Check, ChevronDown } from "lucide-react"
+import { Popover as PopoverPrimitive } from "radix-ui"
+
+import { cn } from "@raggle-ai/ui/lib/utils"
+
+export type FilterChipOption = {
+  readonly value: string
+  readonly label: string
+  /** Optional count shown right-aligned and muted on the chip. */
+  readonly count?: number
+}
+
+export type FilterChipPanelProps = {
+  /** Accessible name for the trigger button. */
+  readonly ariaLabel?: string
+  /** Wrapper classes (the trigger row). */
+  readonly className?: string
+  /** Uppercase label of the trigger button, e.g. "Tags". */
+  readonly label: string
+  /** Controlled selected values; an empty array means "no filter". */
+  readonly selected: readonly string[]
+  readonly onChange: (selected: readonly string[]) => void
+  readonly options: ReadonlyArray<FilterChipOption>
+  /** Count on the "All" chip; defaults to the options count. */
+  readonly total?: number
+}
+
+/**
+ * Expand/collapse multi-select filter: a trigger button reveals a chip
+ * wall of options; clicking chips toggles them in and out of the
+ * selection so the parent can filter in real time. Solid, token-
+ * independent styling (explicit white surface and slate text) so the
+ * panel stays opaque in host views without popover design tokens.
+ * Closes on Escape or outside click, like any popover.
+ */
+export function FilterChipPanel({
+  ariaLabel,
+  className,
+  label,
+  selected,
+  onChange,
+  options,
+  total,
+}: FilterChipPanelProps) {
+  const [open, setOpen] = useState(false)
+  const isSelected = (value: string) => selected.includes(value)
+  const toggle = (value: string) =>
+    onChange(
+      isSelected(value)
+        ? selected.filter((entry) => entry !== value)
+        : [...selected, value],
+    )
+
+  const allCount =
+    total ?? options.reduce((sum, option) => sum + (option.count ?? 0), 0)
+
+  return (
+    <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
+      <PopoverPrimitive.Trigger
+        aria-label={ariaLabel ?? label}
+        className={cn(
+          `flex h-8 items-center gap-1.5 rounded-md border border-slate-200
+          bg-white px-3 text-sm font-medium text-slate-900 shadow-xs
+          transition-colors outline-none hover:bg-slate-50
+          focus-visible:border-slate-400 focus-visible:ring-[3px]
+          focus-visible:ring-slate-200/60 disabled:cursor-not-allowed
+          disabled:opacity-50`,
+          className,
+        )}
+      >
+        {label}
+        {selected.length ? (
+          <span
+            className="rounded-full bg-slate-900 px-1.5 text-[0.75rem]
+              font-semibold text-white"
+          >
+            {selected.length}
+          </span>
+        ) : null}
+        <ChevronDown
+          aria-hidden="true"
+          className={cn(
+            "size-4 text-slate-400 transition-transform",
+            open && "rotate-180",
+          )}
+        />
+      </PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+          className={cn(
+            `z-50 max-h-72 max-w-[calc(100vw-2rem)] min-w-[12rem]
+            overflow-y-auto rounded-lg border border-slate-200 bg-white p-2
+            text-slate-950 shadow-lg`,
+            `data-[state=open]:animate-in data-[state=closed]:animate-out
+            data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0
+            data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95
+            data-[side=bottom]:slide-in-from-top-2
+            data-[side=top]:slide-in-from-bottom-2`,
+          )}
+          align="start"
+          sideOffset={4}
+        >
+          <div className="flex flex-wrap items-center gap-1.5">
+            <button
+              aria-pressed={selected.length === 0}
+              onClick={() => onChange([])}
+              type="button"
+              className={chip(selected.length === 0)}
+            >
+              All
+              <span className={chipCount(selected.length === 0)}>
+                {allCount}
+              </span>
+            </button>
+            {options.map((option) => {
+              const active = isSelected(option.value)
+              return (
+                <button
+                  aria-pressed={active}
+                  key={option.value}
+                  onClick={() => toggle(option.value)}
+                  type="button"
+                  className={chip(active)}
+                >
+                  {active ? (
+                    <Check aria-hidden="true" className="size-3.5" />
+                  ) : null}
+                  {option.label}
+                  {typeof option.count === "number" ? (
+                    <span className={chipCount(active)}>{option.count}</span>
+                  ) : null}
+                </button>
+              )
+            })}
+          </div>
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  )
+}
+
+const chip = (active: boolean) =>
+  `inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-xs
+  font-medium transition-colors focus-visible:outline-2
+  focus-visible:outline-slate-500 focus-visible:outline-offset-1 ${
+    active
+      ? "border-slate-900 bg-slate-900 text-white"
+      : "border-slate-200 bg-white text-slate-600 hover:bg-slate-100"
+  }`
+
+const chipCount = (active: boolean) =>
+  `rounded-full px-1.5 ${
+    active ? "bg-slate-700 text-slate-200" : "bg-slate-100 text-slate-400"
+  }`