kennel 0.2.0 → 0.2.2

package/kernel/packages/ui/src/components/folder-filter-bar.tsx

@@ -0,0 +1,191 @@
+import type { ReactNode } from "react"
+import { createContext, useContext } from "react"
+import { Check, Folder, FolderSearch } from "lucide-react"
+
+import type { FolderFilterChoice } from "@raggle-ai/ui/lib/folder-filter"
+import { Badge } from "@raggle-ai/ui/components/badge"
+import { Button } from "@raggle-ai/ui/components/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@raggle-ai/ui/components/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@raggle-ai/ui/components/popover"
+import { cn } from "@raggle-ai/ui/lib/utils"
+
+export type FolderFilterIconRenderer = (folder: string) => ReactNode
+
+const FolderFilterIconContext = createContext<FolderFilterIconRenderer>(() => (
+  <Folder aria-hidden="true" />
+))
+
+/** Hosts supply metadata-backed icons without coupling plugins to a transport. */
+export function FolderFilterIconProvider({
+  children,
+  renderIcon,
+}: {
+  children: ReactNode
+  renderIcon: FolderFilterIconRenderer
+}) {
+  return (
+    <FolderFilterIconContext.Provider value={renderIcon}>
+      {children}
+    </FolderFilterIconContext.Provider>
+  )
+}
+
+/** Reuse the host's folder identity icon in folder labels outside the filter. */
+export function FolderContextIcon({ folder }: { folder: string }) {
+  const renderIcon = useContext(FolderFilterIconContext)
+  return <>{renderIcon(folder)}</>
+}
+
+/** Shared icon cell — same look in quick chips and dropdown rows. */
+function folderIcon(renderIcon: FolderFilterIconRenderer, folder: string) {
+  return (
+    <span
+      aria-hidden="true"
+      className="inline-flex size-4 shrink-0 items-center justify-center
+        [&>img]:size-full [&>img]:rounded-sm [&>img]:object-contain
+        [&>svg]:size-full"
+    >
+      {renderIcon(folder)}
+    </span>
+  )
+}
+
+/**
+ * Multi-select folder filter as a single "Folder (count)" button. The
+ * count badge shows how many folders are selected, or the total when
+ * nothing is filtered. The popover holds a searchable command list with
+ * an "All folders" row that clears back to everything; every folder row
+ * toggles into the selection in real time.
+ *
+ * Rows are portal-mounted on open (like this repo's Select), so closed
+ * dropdown content is not in the SSR/tree — the trigger carries the
+ * accessible count instead.
+ */
+export function FolderFilterBar({
+  allLabel = "All folders",
+  ariaLabel = "Filter by folder",
+  choices,
+  onSelect,
+  selected,
+  total,
+}: {
+  /** Label of the row that clears the selection. */
+  allLabel?: string
+  /** Accessible name for the filter trigger. */
+  ariaLabel?: string
+  choices: FolderFilterChoice[]
+  /** All currently selected owning folders; pass [] to show everything. */
+  onSelect: (folders: readonly string[]) => void
+  /** Currently selected owning folders; empty means "all". */
+  selected: readonly string[]
+  /** Count shown on the trigger while nothing is selected. */
+  total: number
+}) {
+  const renderIcon = useContext(FolderFilterIconContext)
+  const isSelected = (folder: string) => selected.includes(folder)
+  const toggle = (folder: string) =>
+    isSelected(folder)
+      ? onSelect(selected.filter((entry) => entry !== folder))
+      : onSelect([...selected, folder])
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          aria-label={ariaLabel}
+          className="gap-1.5 border-[#dde1dc] bg-white text-[0.82rem]
+            font-medium text-[#4a554b] hover:bg-[#f3f5f2]"
+          size="sm"
+          type="button"
+          variant="outline"
+        >
+          <FolderSearch aria-hidden="true" className="size-4 text-[#6c7a6d]" />
+          Folder
+          <Badge
+            className="ml-0.5 bg-[#dce8de] px-1.5 text-[#3f6048]"
+            variant="secondary"
+          >
+            {selected.length > 0 ? selected.length : total}
+          </Badge>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        className="w-72 overflow-hidden p-0"
+        sideOffset={6}
+      >
+        <Command>
+          <CommandInput placeholder="Search folders…" />
+          <CommandList>
+            <CommandEmpty>No folders match</CommandEmpty>
+            <CommandGroup>
+              <CommandItem onSelect={() => onSelect([])} value="__all__">
+                <FolderSearch
+                  aria-hidden="true"
+                  className="size-4 text-[#6c7a6d]"
+                />
+                <span>{allLabel}</span>
+                <span
+                  className={cn(
+                    "ml-auto text-[0.75rem] font-medium",
+                    selected.length === 0 ? "text-[#3f6048]" : "text-[#6c7a6d]",
+                  )}
+                >
+                  {total}
+                </span>
+                {selected.length === 0 ? (
+                  <Check aria-hidden="true" className="size-4 text-[#3f6048]" />
+                ) : null}
+              </CommandItem>
+            </CommandGroup>
+            <CommandGroup heading="Folders">
+              {choices.map((choice) => {
+                const active = isSelected(choice.folder)
+                return (
+                  <CommandItem
+                    key={choice.folder}
+                    onSelect={() => toggle(choice.folder)}
+                    title={choice.folder}
+                    value={choice.folder}
+                  >
+                    {folderIcon(renderIcon, choice.folder)}
+                    <span className="truncate">
+                      {choice.relativePath === ""
+                        ? "This folder"
+                        : choice.label}
+                    </span>
+                    <span
+                      className={cn(
+                        "ml-auto text-[0.75rem] font-medium",
+                        active ? "text-[#3f6048]" : "text-[#6c7a6d]",
+                      )}
+                    >
+                      {choice.count}
+                    </span>
+                    {active ? (
+                      <Check
+                        aria-hidden="true"
+                        className="size-4 shrink-0 text-[#3f6048]"
+                      />
+                    ) : null}
+                  </CommandItem>
+                )
+              })}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/kernel/packages/ui/src/components/folder-image.tsx

@@ -0,0 +1,18 @@
+import { useState } from "react"
+import { Folder } from "lucide-react"
+
+import type { FolderIcon } from "@raggle-ai/ui/lib/folder-activity"
+
+function FolderImage({ icon }: { icon?: FolderIcon }) {
+  const [failed, setFailed] = useState<string>()
+  const src = icon
+    ? (icon.url ?? `data:${icon.mediaType};base64,${icon.data}`)
+    : undefined
+  if (!src || failed === src) return <Folder aria-hidden="true" />
+
+  return (
+    <img alt="" aria-hidden="true" onError={() => setFailed(src)} src={src} />
+  )
+}
+
+export { FolderImage }

package/kernel/packages/ui/src/components/folder-landing.tsx

@@ -0,0 +1,70 @@
+import type { ReactNode } from "react"
+
+import type {
+  FolderMetadata,
+  // Sessions functionality is commented out (can be re-enabled).
+  // FolderSession,
+  FolderTab,
+} from "@raggle-ai/ui/lib/folder-activity"
+import { FolderActivity } from "@raggle-ai/ui/components/folder-activity"
+
+export function FolderLanding({
+  children,
+  collectionHref,
+  collectionId,
+  data,
+  documentHref,
+  error,
+  folder,
+  folderHref,
+  onFindProject,
+  onOpenFolder,
+  onOpenPath,
+  // Sessions functionality is commented out (can be re-enabled).
+  // sessionTranscriptHref,
+  pluginHref,
+  tab,
+  tabHref,
+  view,
+}: {
+  children?: ReactNode
+  collectionHref?: (id: string) => string
+  collectionId?: string
+  data?: FolderMetadata
+  documentHref: (path: string) => string
+  error: string
+  folder?: string
+  folderHref: (path: string) => string
+  onFindProject?: () => void
+  onOpenFolder?: () => void
+  /** Host action: open a physical file in the default app (local hosts only). */
+  onOpenPath?: (path: string) => void
+  // Sessions functionality is commented out (can be re-enabled).
+  // sessionTranscriptHref?: (session: FolderSession) => string
+  pluginHref: (id: string) => string
+  tab?: FolderTab
+  tabHref: (tab: FolderTab) => string
+  view?: { pluginId: string; subpath?: string }
+}) {
+  return (
+    <FolderActivity
+      children={children}
+      collectionHref={collectionHref}
+      collectionId={collectionId}
+      data={data}
+      documentHref={documentHref}
+      error={error}
+      folder={folder}
+      folderHref={folderHref}
+      onFindProject={onFindProject}
+      onOpenFolder={onOpenFolder}
+      onOpenPath={onOpenPath}
+      // Sessions functionality is commented out (can be re-enabled).
+      // sessionTranscriptHref={sessionTranscriptHref}
+      pluginHref={pluginHref}
+      tab={tab}
+      tabHref={tabHref}
+      view={view}
+    />
+  )
+}

package/kernel/packages/ui/src/components/folder-list.tsx

@@ -0,0 +1,140 @@
+import type { ReactNode } from "react"
+import { useState } from "react"
+import { ExternalLink } from "lucide-react"
+
+import { useLinkComponent } from "@raggle-ai/ui/components/link"
+
+export type FolderListFilter<Item> = {
+  key: string
+  label: string
+  predicate: (item: Item) => boolean
+}
+
+/**
+ * Extract the target path from a kennel host-action href (built by the
+ * server as `/api/open-path?path=<encoded physical path>`). Returns the raw
+ * path so hosts can call it through their API wrapper instead of navigating.
+ */
+export function openPathHrefValue(href: string): string | undefined {
+  try {
+    const value = new URL(href, "http://127.0.0.1").searchParams.get("path")
+    return value ?? undefined
+  } catch {
+    return undefined
+  }
+}
+
+export function FolderList<Item>({
+  className,
+  empty,
+  filteredEmpty = empty,
+  filters = [],
+  getClassName,
+  getHref,
+  getKey,
+  getOpenAction,
+  getOpenHref,
+  getOpenLabel,
+  items,
+  renderActions,
+  renderItem,
+}: {
+  className: string
+  empty: ReactNode
+  filteredEmpty?: ReactNode
+  filters?: FolderListFilter<Item>[]
+  getClassName?: (item: Item) => string | undefined
+  getHref?: (item: Item) => string | undefined
+  getKey: (item: Item) => string
+  /**
+   * In-view viewer action for the row's "open" control. When provided the
+   * control renders as a button calling this callback instead of an anchor
+   * that would navigate the browser to the API URL.
+   */
+  getOpenAction?: (item: Item) => void
+  getOpenHref?: (item: Item) => string | undefined
+  getOpenLabel?: (item: Item) => string
+  items: Item[]
+  renderActions?: (item: Item) => ReactNode
+  renderItem: (item: Item) => ReactNode
+}) {
+  const [filter, setFilter] = useState("all")
+  const RowLink = useLinkComponent()
+  const selected = filters.find((item) => item.key === filter)
+  const visible = selected ? items.filter(selected.predicate) : items
+
+  if (!items.length) return <>{empty}</>
+
+  return (
+    <>
+      {filters.length ? (
+        <div className="landing-list-filters">
+          {[
+            { count: items.length, key: "all", label: "All" },
+            ...filters.map((item) => ({
+              count: items.filter(item.predicate).length,
+              key: item.key,
+              label: item.label,
+            })),
+          ].map((item) => (
+            <button
+              aria-pressed={filter === item.key}
+              key={item.key}
+              onClick={() => setFilter(item.key)}
+              type="button"
+            >
+              {item.label}
+              <small>{item.count}</small>
+            </button>
+          ))}
+        </div>
+      ) : null}
+      {visible.length ? (
+        <ul className={`landing-list ${className}`}>
+          {visible.map((item) => {
+            const href = getHref?.(item)
+            const openHref = getOpenHref?.(item)
+            const content = renderItem(item)
+            const openLabel = getOpenLabel?.(item) ?? "Open item"
+            return (
+              <li className={getClassName?.(item)} key={getKey(item)}>
+                {href ? (
+                  <RowLink className="landing-list-row" href={href}>
+                    {content}
+                  </RowLink>
+                ) : (
+                  <div className="landing-list-row">{content}</div>
+                )}
+                {openHref ? (
+                  getOpenAction ? (
+                    <button
+                      className="landing-list-open"
+                      type="button"
+                      aria-label={openLabel}
+                      title={openLabel}
+                      onClick={() => getOpenAction(item)}
+                    >
+                      <ExternalLink aria-hidden="true" />
+                    </button>
+                  ) : (
+                    <a
+                      className="landing-list-open"
+                      href={openHref}
+                      aria-label={openLabel}
+                      title={openLabel}
+                    >
+                      <ExternalLink aria-hidden="true" />
+                    </a>
+                  )
+                ) : null}
+                {renderActions?.(item)}
+              </li>
+            )
+          })}
+        </ul>
+      ) : (
+        <>{filteredEmpty}</>
+      )}
+    </>
+  )
+}

package/kernel/packages/ui/src/components/folder-metadata.tsx

@@ -0,0 +1,107 @@
+import type { ReactNode } from "react"
+import { useState } from "react"
+import { Check, Folder } from "lucide-react"
+
+import { copyText } from "@raggle-ai/ui/components/copy-context"
+import { cn } from "@raggle-ai/ui/lib/utils"
+
+/** Leaf name of a folder path, shared by the landing header and agent cards. */
+export function folderName(folder: string | undefined) {
+  return (
+    folder
+      ?.replace(/[\\/]+$/, "")
+      .split(/[\\/]/)
+      .at(-1) ?? "Folder"
+  )
+}
+
+/**
+ * Compact folder identity: icon and leaf name, with an optional path
+ * subtitle. With `href`, the unit links to that folder in the host. Otherwise
+ * it is a copy affordance — clicking it copies `path` to the clipboard (the
+ * full path is also the hover tooltip). Without a `path` it renders as a
+ * plain, non-interactive identity line.
+ */
+export function FolderMetadata({
+  className,
+  href,
+  icon,
+  path,
+  name = folderName(path),
+  showPath = false,
+  size = "default",
+}: {
+  className?: string
+  /** Optional local viewer link for the folder. */
+  href?: string
+  /** Folder icon; defaults to a plain folder glyph. */
+  icon?: ReactNode
+  /** Folder path copied on click, or shown as the linked folder tooltip. */
+  path?: string
+  /** Display name; defaults to the leaf name of `path`. */
+  name?: string
+  /** When true, renders `path` as a muted subtitle under the name. */
+  showPath?: boolean
+  /** Display scale for a compact or prominent folder identity. */
+  size?: "default" | "large"
+}) {
+  const [copied, setCopied] = useState(false)
+
+  const copy = async () => {
+    if (!path) return
+    try {
+      await copyText(path)
+      setCopied(true)
+      window.setTimeout(() => setCopied(false), 1500)
+    } catch {
+      // Clipboard unavailable: keep this a plain display rather than an error.
+    }
+  }
+
+  const content = (
+    <>
+      <span aria-hidden="true" className="folder-metadata-icon">
+        {icon ?? <Folder className="size-3.5" />}
+      </span>
+      <span className="folder-metadata-name">{name}</span>
+      {path && showPath ? (
+        <small className="folder-metadata-path" title={path}>
+          {path}
+        </small>
+      ) : null}
+      {copied ? (
+        <Check aria-hidden="true" className="folder-metadata-copied" />
+      ) : null}
+    </>
+  )
+
+  const classNames = cn(
+    `folder-metadata inline-flex max-w-full min-w-0 items-center gap-1.5
+      text-left font-normal`,
+    size === "large" ? "folder-metadata--large" : undefined,
+    path && !href ? "cursor-pointer bg-transparent p-0" : undefined,
+    className,
+  )
+
+  if (href) {
+    return (
+      <a className={classNames} href={href} title={path}>
+        {content}
+      </a>
+    )
+  }
+
+  return path ? (
+    <button
+      aria-label={`Copy ${name} folder path to the clipboard`}
+      className={classNames}
+      title={path}
+      type="button"
+      onClick={() => void copy()}
+    >
+      {content}
+    </button>
+  ) : (
+    <div className={classNames}>{content}</div>
+  )
+}

package/kernel/packages/ui/src/components/folder-mobile-bar.tsx

@@ -0,0 +1,60 @@
+import type { ReactNode } from "react"
+
+import type {
+  FolderIcon,
+  FolderMetadata,
+} from "@raggle-ai/ui/lib/folder-activity"
+import { folderBarActions } from "@raggle-ai/ui/components/app-options"
+import { AppViewHeader } from "@raggle-ai/ui/components/app-view-header"
+import { FolderImage } from "@raggle-ai/ui/components/folder-image"
+
+export function FolderMobileBar({
+  backHref,
+  backLabel = "Back",
+  canOpen,
+  folder,
+  homeHref,
+  icon,
+  name,
+  onOpen,
+  onOpenFolder,
+  rightAction,
+  ...context
+}: {
+  backHref?: string
+  backLabel?: string
+  canOpen: boolean
+  homeHref: string
+  icon?: FolderIcon
+  name: string
+  onOpen: () => void
+  /** Host action: reveal the folder in the OS file manager (local hosts only). */
+  onOpenFolder?: () => void
+  rightAction?: ReactNode
+  folder?: string
+  folderHref?: (path: string) => string
+  collectionHref?: (id: string) => string
+  workspace?: FolderMetadata["workspace"]
+}) {
+  return (
+    <>
+      <AppViewHeader
+        {...context}
+        className="mobile-view-header"
+        folder={folder}
+        homeHref={homeHref}
+        name={name}
+        icon={<FolderImage icon={icon} />}
+        actions={folderBarActions({
+          backHref,
+          backLabel,
+          canBrowse: canOpen,
+          folderPath: folder,
+          onBrowse: onOpen,
+          onOpenFolder,
+        })}
+      />
+      {rightAction}
+    </>
+  )
+}