kennel 0.2.1 → 0.2.2

package/kernel/packages/ui/src/components/menubar.tsx

@@ -0,0 +1,323 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import { Menubar as MenubarPrimitive } from "radix-ui"
+
+import { cn } from "@raggle-ai/ui/lib/utils"
+
+function Menubar({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
+  return (
+    <MenubarPrimitive.Root
+      data-slot="menubar"
+      className={cn(
+        `bg-background flex h-9 items-center gap-1 rounded-md border p-1
+        shadow-xs`,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return (
+    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+  )
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
+  return (
+    <MenubarPrimitive.Trigger
+      data-slot="menubar-trigger"
+      className={cn(
+        `focus:bg-accent focus:text-accent-foreground
+        data-[state=open]:bg-accent data-[state=open]:text-accent-foreground
+        flex items-center rounded-sm px-2 py-1 text-sm font-medium
+        outline-hidden select-none`,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarContent({
+  className,
+  align = "start",
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
+  return (
+    <MenubarPortal>
+      <MenubarPrimitive.Content
+        data-slot="menubar-content"
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          `bg-popover text-popover-foreground data-[state=open]:animate-in
+          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=left]:slide-in-from-right-2
+          data-[side=right]:slide-in-from-left-2
+          data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem]
+          origin-(--radix-menubar-content-transform-origin) overflow-hidden
+          rounded-md border p-1 shadow-md`,
+          className,
+        )}
+        {...props}
+      />
+    </MenubarPortal>
+  )
+}
+
+function MenubarItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenubarPrimitive.Item
+      data-slot="menubar-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        `focus:bg-accent focus:text-accent-foreground
+        data-[variant=destructive]:text-destructive
+        data-[variant=destructive]:focus:bg-destructive/10
+        dark:data-[variant=destructive]:focus:bg-destructive/20
+        data-[variant=destructive]:focus:text-destructive
+        data-[variant=destructive]:*:[svg]:!text-destructive
+        [&_svg:not([class*='text-'])]:text-muted-foreground relative flex
+        cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm
+        outline-hidden select-none data-[disabled]:pointer-events-none
+        data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none
+        [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
+  return (
+    <MenubarPrimitive.CheckboxItem
+      data-slot="menubar-checkbox-item"
+      className={cn(
+        `focus:bg-accent focus:text-accent-foreground relative flex
+        cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm
+        outline-hidden select-none data-[disabled]:pointer-events-none
+        data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0
+        [&_svg:not([class*='size-'])]:size-4`,
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute left-2 flex size-3.5
+          items-center justify-center"
+      >
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  )
+}
+
+function MenubarRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
+  return (
+    <MenubarPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      className={cn(
+        `focus:bg-accent focus:text-accent-foreground relative flex
+        cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm
+        outline-hidden select-none data-[disabled]:pointer-events-none
+        data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0
+        [&_svg:not([class*='size-'])]:size-4`,
+        className,
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute left-2 flex size-3.5
+          items-center justify-center"
+      >
+        <MenubarPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  )
+}
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.Label
+      data-slot="menubar-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
+  return (
+    <MenubarPrimitive.Separator
+      data-slot="menubar-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="menubar-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.SubTrigger
+      data-slot="menubar-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        `focus:bg-accent focus:text-accent-foreground
+        data-[state=open]:bg-accent data-[state=open]:text-accent-foreground
+        flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm
+        outline-none select-none data-[inset]:pl-8`,
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto h-4 w-4" />
+    </MenubarPrimitive.SubTrigger>
+  )
+}
+
+function MenubarSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
+  return (
+    <MenubarPrimitive.SubContent
+      data-slot="menubar-sub-content"
+      className={cn(
+        `bg-popover text-popover-foreground 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=left]:slide-in-from-right-2
+        data-[side=right]:slide-in-from-left-2
+        data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem]
+        origin-(--radix-menubar-content-transform-origin) overflow-hidden
+        rounded-md border p-1 shadow-lg`,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Menubar,
+  MenubarPortal,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarGroup,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarItem,
+  MenubarShortcut,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+}

package/kernel/packages/ui/src/components/navigation-menu.tsx

@@ -0,0 +1,210 @@
+import * as React from "react"
+import { cva } from "class-variance-authority"
+import { ChevronDownIcon } from "lucide-react"
+import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui"
+
+import { cn } from "@raggle-ai/ui/lib/utils"
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        `group/navigation-menu relative flex max-w-max flex-1 items-center
+        justify-center`,
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        "group flex flex-1 list-none items-center justify-center gap-1",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props}
+    />
+  )
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
+)
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon
+        className="relative top-[1px] ml-1 size-3 transition duration-300
+          group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        `data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out
+        data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out
+        data-[motion=from-end]:slide-in-from-right-52
+        data-[motion=from-start]:slide-in-from-left-52
+        data-[motion=to-end]:slide-out-to-right-52
+        data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2
+        pr-2.5 md:absolute md:w-auto`,
+        `group-data-[viewport=false]/navigation-menu:bg-popover
+        group-data-[viewport=false]/navigation-menu:text-popover-foreground
+        group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in
+        group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out
+        group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95
+        group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95
+        group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0
+        group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0
+        group-data-[viewport=false]/navigation-menu:top-full
+        group-data-[viewport=false]/navigation-menu:mt-1.5
+        group-data-[viewport=false]/navigation-menu:overflow-hidden
+        group-data-[viewport=false]/navigation-menu:rounded-md
+        group-data-[viewport=false]/navigation-menu:border
+        group-data-[viewport=false]/navigation-menu:shadow
+        group-data-[viewport=false]/navigation-menu:duration-200
+        **:data-[slot=navigation-menu-link]:focus:ring-0
+        **:data-[slot=navigation-menu-link]:focus:outline-none`,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div
+      className={cn(
+        "absolute top-full left-0 isolate z-50 flex justify-center",
+      )}
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          `origin-top-center bg-popover text-popover-foreground
+          data-[state=open]:animate-in data-[state=closed]:animate-out
+          data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative
+          mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full
+          overflow-hidden rounded-md border shadow
+          md:w-[var(--radix-navigation-menu-viewport-width)]`,
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        `data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent
+        data-[active=true]:bg-accent/50
+        data-[active=true]:text-accent-foreground hover:bg-accent
+        hover:text-accent-foreground focus:bg-accent
+        focus:text-accent-foreground focus-visible:ring-ring/50
+        [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1
+        rounded-sm p-2 text-sm transition-all outline-none
+        focus-visible:ring-[3px] focus-visible:outline-1
+        [&_svg:not([class*='size-'])]:size-4`,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        `data-[state=visible]:animate-in data-[state=hidden]:animate-out
+        data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1]
+        flex h-1.5 items-end justify-center overflow-hidden`,
+        className,
+      )}
+      {...props}
+    >
+      <div
+        className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm
+          shadow-md"
+      />
+    </NavigationMenuPrimitive.Indicator>
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+}

package/kernel/packages/ui/src/components/note-card.tsx

@@ -0,0 +1,149 @@
+import { Link2 } from "lucide-react"
+
+import type { FolderFile } from "@raggle-ai/ui/lib/folder-activity"
+import { CopyContextButton } from "@raggle-ai/ui/components/copy-context"
+import { relativeTime } from "@raggle-ai/ui/lib/folder-activity"
+
+/**
+ * Agent-friendly text context for one note file, in the same shape the tasks
+ * and mail plugins copy. Points the model at the note file so it can read
+ * the authoritative content before answering.
+ */
+export const noteItemContext = (file: FolderFile) =>
+  [
+    // "You are helping edit or review a note. Use the context below to locate the file, read it, and answer or propose edits grounded in its content.",
+    // "",
+    // "Instructions for the LLM:",
+    // "- Read the note file first; it is the authoritative content.",
+    // "- Match the note's existing structure (headings, frontmatter) when proposing edits.",
+    // "- If information is missing, state what to read next rather than inventing content.",
+    // "- Return: 1) what the note covers, 2) the answer or next concrete edit.",
+    // "",
+    // "Note context:",
+    // `- Path: `,
+    `${file.folder ? `${file.folder}/${file.relativePath}` : file.relativePath}`,
+  ]
+    .filter((line): line is string => line != null)
+    .join("\n")
+
+/**
+ * Agent-friendly context for a bare note reference (a relative path, a
+ * `path#fragment` pointer, or a URL) such as the notes linked from a task's
+ * `todo.json`. No file metadata is known, so the model gets the reference
+ * and the folder to resolve it against.
+ */
+export const noteReferenceContext = (reference: string, folder?: string) =>
+  [
+    "You are helping with a note that another item references. Use the context below to locate and read the note, then ground your answer in its content.",
+    "",
+    "Note context:",
+    `- Reference: ${reference}`,
+    folder ? `- Source folder: ${folder}` : null,
+  ]
+    .filter((line): line is string => line != null)
+    .join("\n")
+
+const noteFolderName = (folder: string) =>
+  folder
+    .replace(/[\\/]+$/, "")
+    .split(/[\\/]/)
+    .at(-1) ?? folder
+
+/**
+ * One note as a card, shared by the main Notes tab and every surface that
+ * links to notes (a task's note references, …): the title opens the note
+ * document, the secondary line shows the path and relative activity time,
+ * and the copy-context affordance hands the note to an LLM.
+ */
+export function NoteCard({
+  title,
+  path,
+  activityAt,
+  href,
+  linkedFolder,
+  folderHref,
+  context,
+  contextLabel,
+}: {
+  /** Main label: the note's file name or reference. */
+  title: string
+  /** Secondary line: the note's path or full reference text. */
+  path?: string
+  /** Last activity time, rendered with `relativeTime` beside the path. */
+  activityAt?: number
+  /** Opens the note document; without it the card renders as a label. */
+  href?: string
+  /** Owning linked folder; renders the "Linked · {folder}" footer. */
+  linkedFolder?: string
+  /** Opens the linked folder; without it the footer renders as plain text. */
+  folderHref?: string
+  /** Copy-context payload for this note (string or builder). */
+  context: string | (() => string | Promise<string>)
+  /** Accessible name for the copy button; defaults to the title. */
+  contextLabel?: string
+}) {
+  const heading = (
+    <span className="grid min-w-0 gap-1">
+      <span className="font-semibold break-words">{title}</span>
+      {path ? (
+        <span className="text-[0.82rem] break-all text-[#6c7a6d]">
+          {path}
+          {activityAt ? ` · ${relativeTime(activityAt)}` : ""}
+        </span>
+      ) : null}
+    </span>
+  )
+  return (
+    <div
+      className="grid gap-1 rounded-xl border border-[#e7ebe7] bg-white
+        text-[#2f382f] shadow-[0_1px_2px_rgb(31_41_55/0.05)] hover:bg-[#fafbfa]"
+    >
+      <div className="flex items-start">
+        {href ? (
+          <a
+            className="grid min-w-0 flex-1 gap-1 px-4 pt-3 pb-3 no-underline"
+            href={href}
+          >
+            {heading}
+          </a>
+        ) : (
+          <div className="grid min-w-0 flex-1 gap-1 px-4 pt-3 pb-3">
+            {heading}
+          </div>
+        )}
+        <CopyContextButton
+          className="mt-2 mr-2.5 shrink-0 text-[#6c7a6d] hover:text-[#2f382f]"
+          context={context}
+          label={contextLabel ?? `Copy context for ${title}`}
+        />
+      </div>
+      {linkedFolder ? (
+        folderHref ? (
+          <a
+            className="mx-4 mb-3 inline-flex w-fit max-w-[calc(100%-2rem)]
+              items-center gap-1 text-xs text-[#6c7a6d] underline
+              underline-offset-4"
+            href={folderHref}
+            title={linkedFolder}
+          >
+            <Link2 aria-hidden="true" className="size-3 shrink-0" />
+            <span className="break-all">
+              Linked · {noteFolderName(linkedFolder)}
+            </span>
+          </a>
+        ) : (
+          <span
+            className="mx-4 mb-3 inline-flex w-fit items-center gap-1 text-xs
+              text-[#6c7a6d]"
+            title={linkedFolder}
+          >
+            <Link2 aria-hidden="true" className="size-3 shrink-0" />
+            <span className="break-all">
+              Linked · {noteFolderName(linkedFolder)}
+            </span>
+          </span>
+        )
+      ) : null}
+    </div>
+  )
+}