kennel 0.2.0 → 0.2.2

package/kernel/plugins/calendar/src/calendar.tsx

@@ -0,0 +1,328 @@
+import { useState } from "react"
+import {
+  addDays,
+  addMonths,
+  addWeeks,
+  endOfWeek,
+  format,
+  isSameMonth,
+  startOfDay,
+  startOfMonth,
+  startOfWeek,
+} from "date-fns"
+import {
+  CalendarDays,
+  Check,
+  ChevronLeft,
+  ChevronRight,
+  Loader2,
+} from "lucide-react"
+
+import type { CalendarColor, CalendarEvent } from "./parse"
+import { dayContext } from "./context"
+import { CopyButton } from "./copy-button"
+import { eventsInRange, resolveColors } from "./parse"
+import { calendarTone, cn } from "./utils"
+import { DayView, MonthView, WeekView } from "./views"
+
+type View = "month" | "week" | "day"
+
+const weekStart = { weekStartsOn: 1 as const }
+
+function rangeLabel(view: View, date: Date) {
+  if (view === "day") return format(date, "EEEE, MMM d, yyyy")
+  if (view === "week") {
+    const start = startOfWeek(date, weekStart)
+    const end = endOfWeek(date, weekStart)
+    return isSameMonth(start, end)
+      ? `${format(start, "MMM d")} - ${format(end, "d, yyyy")}`
+      : `${format(start, "MMM d")} - ${format(end, "MMM d, yyyy")}`
+  }
+  return format(date, "MMMM yyyy")
+}
+
+function Header({
+  date,
+  onNavigate,
+  onToday,
+  onView,
+  view,
+}: {
+  date: Date
+  onNavigate: (direction: -1 | 1) => void
+  onToday: () => void
+  onView: (view: View) => void
+  view: View
+}) {
+  return (
+    <div className="flex flex-wrap items-center gap-2 border-b px-3 py-2">
+      <button
+        className="hover:bg-accent h-8 rounded-md border px-3 text-sm"
+        onClick={onToday}
+        type="button"
+      >
+        Today
+      </button>
+      <div className="flex items-center gap-0.5">
+        <button
+          aria-label="Previous"
+          className="hover:bg-accent flex size-8 items-center justify-center
+            rounded-md"
+          onClick={() => onNavigate(-1)}
+          type="button"
+        >
+          <ChevronLeft aria-hidden="true" className="size-4" />
+        </button>
+        <button
+          aria-label="Next"
+          className="hover:bg-accent flex size-8 items-center justify-center
+            rounded-md"
+          onClick={() => onNavigate(1)}
+          type="button"
+        >
+          <ChevronRight aria-hidden="true" className="size-4" />
+        </button>
+      </div>
+      <span className="min-w-0 flex-1 truncate text-sm font-medium">
+        {rangeLabel(view, date)}
+      </span>
+      <div
+        aria-label="Calendar view"
+        className="bg-muted flex shrink-0 rounded-md p-1"
+        role="tablist"
+      >
+        {(["month", "week", "day"] as const).map((item) => (
+          <button
+            aria-selected={view === item}
+            className={cn(
+              "rounded px-2 py-1 text-xs capitalize",
+              view === item && "bg-background shadow-sm",
+            )}
+            key={item}
+            onClick={() => onView(item)}
+            role="tab"
+            type="button"
+          >
+            {item}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function anchorDate(initialDate?: Date | string) {
+  if (!initialDate) return new Date()
+  const anchor = new Date(initialDate)
+  return Number.isNaN(anchor.getTime()) ? new Date() : anchor
+}
+
+function visible(events: CalendarEvent[], view: View, date: Date) {
+  if (view === "month") {
+    const start = startOfWeek(startOfMonth(date), weekStart)
+    return eventsInRange(events, start, addDays(start, 42))
+  }
+  if (view === "week") {
+    const start = startOfWeek(date, weekStart)
+    return eventsInRange(events, start, addDays(start, 7))
+  }
+  const start = startOfDay(date)
+  return eventsInRange(events, start, addDays(start, 1))
+}
+
+function EmptyView() {
+  return (
+    <div
+      className="flex flex-col items-center justify-center gap-2 px-6 py-16
+        text-center"
+    >
+      <CalendarDays
+        aria-hidden="true"
+        className="text-muted-foreground size-8"
+      />
+      <p className="text-muted-foreground text-sm">No events in this view.</p>
+    </div>
+  )
+}
+
+function LoadingView() {
+  return (
+    <div
+      aria-label="Loading calendar"
+      className="flex min-h-80 items-center justify-center"
+    >
+      <Loader2
+        aria-label="Loading"
+        className="text-muted-foreground size-6 animate-spin"
+        role="status"
+      />
+    </div>
+  )
+}
+
+function GroupFilter({
+  active,
+  groups,
+  onChange,
+}: {
+  active?: string
+  groups: Array<{ color?: CalendarColor; name: string }>
+  onChange: (group?: string) => void
+}) {
+  if (groups.length < 2) return null
+
+  return (
+    <div
+      aria-label="Calendar groups"
+      className="flex min-w-0 flex-1 gap-1 overflow-x-auto"
+    >
+      <button
+        aria-pressed={!active}
+        className={cn(
+          `focus-visible:ring-ring flex shrink-0 items-center gap-1.5
+          rounded-full border px-2.5 py-1 text-xs font-medium transition-colors
+          focus-visible:ring-2 focus-visible:outline-none`,
+          active
+            ? "bg-background hover:bg-muted"
+            : `border-slate-900 bg-slate-900 !text-white shadow-sm
+              dark:border-slate-100 dark:bg-slate-100 dark:!text-slate-900`,
+        )}
+        onClick={() => onChange(undefined)}
+        type="button"
+      >
+        {!active ? <Check aria-hidden="true" className="size-3" /> : null}
+        All
+      </button>
+      {groups.map((group) => {
+        const selected = active === group.name
+        const tone = calendarTone(group.color)
+        return (
+          <button
+            aria-pressed={selected}
+            className={cn(
+              `focus-visible:ring-ring flex shrink-0 items-center gap-1.5
+              rounded-full border px-2.5 py-1 text-xs font-medium
+              transition-colors focus-visible:ring-2 focus-visible:outline-none`,
+              selected ? tone.selected : tone.soft,
+            )}
+            key={group.name}
+            onClick={() => onChange(selected ? undefined : group.name)}
+            type="button"
+          >
+            {selected ? (
+              <Check aria-hidden="true" className="size-3" />
+            ) : (
+              <span
+                aria-hidden="true"
+                className={cn("size-2 rounded-full", tone.dot)}
+              />
+            )}
+            {group.name}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export function Calendar({
+  events,
+  className,
+  initialDate,
+  initialView = "month",
+  loading = false,
+}: {
+  events: CalendarEvent[]
+  className?: string
+  initialDate?: Date | string
+  initialView?: View
+  loading?: boolean
+}) {
+  const [date, setDate] = useState(() => anchorDate(initialDate))
+  const [view, setView] = useState<View>(initialView)
+  const [group, setGroup] = useState<string>()
+
+  const navigate = (direction: -1 | 1) => {
+    setDate((current) => {
+      if (view === "month") return addMonths(current, direction)
+      if (view === "week") return addWeeks(current, direction)
+      return addDays(current, direction)
+    })
+  }
+
+  const resolved = resolveColors(events)
+  const selectGroup = (next?: string) => {
+    setGroup(next)
+    if (!next) return
+    const first = resolved
+      .filter((event) => event.group === next)
+      .map((event) => event.start)
+      .sort((left, right) => left.getTime() - right.getTime())[0]
+    if (first) setDate(startOfDay(first))
+  }
+
+  const groupMap = new Map<string, CalendarColor | undefined>()
+  const firstStart = new Map<string, number>()
+  for (const event of resolved) {
+    if (!event.group || groupMap.has(event.group)) continue
+    groupMap.set(event.group, event.color)
+    firstStart.set(event.group, event.start.getTime())
+  }
+  // Chips follow the trip order: each group's earliest event date first.
+  const groups = [...groupMap]
+    .map(([name, color]) => ({ color, name }))
+    .sort(
+      (left, right) =>
+        (firstStart.get(left.name) ?? 0) - (firstStart.get(right.name) ?? 0) ||
+        left.name.localeCompare(right.name),
+    )
+  const filtered = group
+    ? resolved.filter((event) => event.group === group)
+    : resolved
+  const shown = visible(filtered, view, date)
+
+  return (
+    <div
+      className={cn(
+        "calendar-view overflow-hidden rounded-xl border",
+        className,
+      )}
+    >
+      <Header
+        date={date}
+        onNavigate={navigate}
+        onToday={() => setDate(new Date())}
+        onView={setView}
+        view={view}
+      />
+      <div className="flex items-center gap-2 border-b px-3 py-2">
+        {view === "day" ? (
+          <CopyButton
+            iconOnly
+            label="Copy day context"
+            value={dayContext(date, shown)}
+          />
+        ) : null}
+        <GroupFilter active={group} groups={groups} onChange={selectGroup} />
+        <span className="ml-auto rounded-md border px-2 py-0.5 text-xs">
+          {filtered.length}
+          {group ? ` of ${events.length}` : ""}{" "}
+          {filtered.length === 1 ? "event" : "events"}
+        </span>
+      </div>
+      {loading ? (
+        <LoadingView />
+      ) : filtered.length === 0 || shown.length === 0 ? (
+        <EmptyView />
+      ) : view === "month" ? (
+        <MonthView date={date} events={shown} />
+      ) : view === "week" ? (
+        <WeekView date={date} events={shown} />
+      ) : (
+        <DayView date={date} events={shown} />
+      )}
+    </div>
+  )
+}
+
+export type { View as CalendarView }

package/kernel/plugins/calendar/src/client.tsx

@@ -0,0 +1,139 @@
+import { useMemo } from "react"
+import { useQuery } from "@tanstack/react-query"
+
+import type { FolderPluginViewProps } from "@raggle-ai/folder-plugin/client"
+import { FolderFilterBar } from "@raggle-ai/ui/components/folder-filter-bar"
+import { useFolderFilter } from "@raggle-ai/ui/hooks/use-folder-filter"
+
+import { Calendar } from "./calendar"
+import { calendarManifest } from "./manifest"
+import { parseEvents } from "./parse"
+
+// Structurally identical to `ContentIssue` from `@raggle-ai/folder-plugin`;
+// kept local so the calendar package stays free of ui/library deps.
+export type CalendarIssue = {
+  path: string
+  message: string
+}
+
+export type CalendarPluginData = {
+  calendar?: {
+    count: number
+    items: Array<Record<string, unknown>>
+    startDate?: string
+    title?: string
+  }
+  folder: string
+  issues?: CalendarIssue[]
+  status?: "available" | "error" | "unavailable"
+}
+
+export function CalendarIssues({ issues }: { issues: CalendarIssue[] }) {
+  return (
+    <div className="rounded-md border border-[#9c3a3a]/40 p-4">
+      <p className="m-0 text-sm font-semibold text-[#9c3a3a]">
+        calendar.json is not valid.
+      </p>
+      <ul className="m-0 mt-2 list-disc space-y-1 pl-5 text-sm text-[#9c3a3a]">
+        {issues.map((issue, index) => (
+          <li key={index}>
+            <code className="text-[13px]">{issue.path}</code>: {issue.message}
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export function CalendarPlugin({
+  folder,
+  folderId,
+  request,
+}: FolderPluginViewProps) {
+  const query = useQuery({
+    enabled: Boolean(folder),
+    gcTime: 5 * 60_000,
+    queryFn: () => request(""),
+    queryKey: ["folder", folderId, "calendar", ""],
+    staleTime: 15_000,
+  })
+  const data = query.data as CalendarPluginData | undefined
+  const available = data?.status === "available"
+  const events = useMemo(
+    () => parseEvents(data?.calendar?.items ?? []),
+    [data?.calendar?.items],
+  )
+  // Shared folder filter over the event's owning `calendar.json` directory:
+  // a workspace root merges nested calendars, so chips narrow to folders.
+  const filter = useFolderFilter(events, {
+    getFolder: (event) => event.folder ?? null,
+    rootFolder: folder,
+  })
+
+  // Opening date: the calendar's own `startDate` when it sets one, otherwise
+  // today when it falls inside the event range, else the first event date so
+  // a calendar far from today opens on its content, not an empty view.
+  const initialDate = useMemo(() => {
+    const anchor = data?.calendar?.startDate
+    if (anchor) {
+      const date = new Date(anchor)
+      if (!Number.isNaN(date.getTime())) return date
+    }
+    if (!events.length) return undefined
+    const now = new Date()
+    const first = Math.min(...events.map((event) => event.start.getTime()))
+    const last = Math.max(...events.map((event) => event.end.getTime()))
+    return now.getTime() >= first && now.getTime() <= last
+      ? now
+      : new Date(first)
+  }, [data?.calendar?.startDate, events])
+
+  return (
+    <div
+      className="mx-auto grid w-full max-w-[1100px] min-w-0 grid-cols-1 gap-4
+        px-4 py-5"
+    >
+      {query.isPending ? (
+        <p className="text-muted-foreground m-0 text-sm">Loading calendar…</p>
+      ) : null}
+      {query.error ? (
+        <p className="m-0 text-sm text-[#9c3a3a]">Could not load calendar.</p>
+      ) : null}
+      {!query.error && data?.status === "error" && data.issues?.length ? (
+        <CalendarIssues issues={data.issues} />
+      ) : null}
+      {!query.isPending && !query.error && data && !available ? (
+        <p className="text-muted-foreground m-0 text-sm">
+          No calendar found in this folder.
+        </p>
+      ) : null}
+      {available && data?.calendar ? (
+        <>
+          <h1 className="m-0 text-xl font-semibold">
+            {data.calendar.title ?? "Calendar"}
+          </h1>
+          {filter.choices.length > 1 ? (
+            <FolderFilterBar
+              ariaLabel="Filter by folder"
+              choices={filter.choices}
+              onSelect={filter.setSelected}
+              selected={filter.effectiveSelected}
+              total={filter.total}
+            />
+          ) : null}
+          <Calendar
+            className="bg-background"
+            events={filter.visibleItems}
+            initialDate={initialDate}
+            loading={query.isPending}
+          />
+        </>
+      ) : null}
+    </div>
+  )
+}
+
+export const calendarClient = {
+  ...calendarManifest,
+  component: CalendarPlugin,
+}

package/kernel/plugins/calendar/src/context.ts

@@ -0,0 +1,48 @@
+import { format } from "date-fns"
+
+import type { CalendarEvent } from "./parse"
+import { eventSpan } from "./utils"
+
+export function eventContext(event: CalendarEvent) {
+  const lines = [
+    `## ${event.title}`,
+    "",
+    `- ID: ${event.id}`,
+    `- Start: ${event.start.toISOString()}`,
+    `- End: ${event.end.toISOString()}`,
+    `- All day: ${eventSpan(event).allDay ? "Yes" : "No"}`,
+    event.group ? `- Group: ${event.group}` : null,
+    event.status ? `- Status: ${event.status}` : null,
+    event.location ? `- Location: ${event.location}` : null,
+    event.organizer ? `- Organizer: ${event.organizer}` : null,
+    event.attendees?.length
+      ? `- Attendees: ${event.attendees.join(", ")}`
+      : null,
+    event.repeating ? `- Repeats: ${event.repeating}` : null,
+    event.repeatUntil
+      ? `- Repeat until: ${event.repeatUntil.toISOString()}`
+      : null,
+    event.excludeDates?.length
+      ? `- Excluded dates: ${event.excludeDates.map((date) => date.toISOString()).join(", ")}`
+      : null,
+    event.reminders?.length
+      ? `- Reminders: ${event.reminders.map((minutes) => (minutes === 0 ? "at start" : `${minutes} minutes before`)).join(", ")}`
+      : null,
+    event.tags?.length ? `- Tags: ${event.tags.join(", ")}` : null,
+    event.color ? `- Color: ${event.color}` : null,
+    event.url ? `- URL: ${event.url}` : null,
+    event.description ? "" : null,
+    event.description ?? null,
+  ]
+
+  return lines.filter((line): line is string => line !== null).join("\n")
+}
+
+export function dayContext(date: Date, events: CalendarEvent[]) {
+  const header = `# Calendar context for ${format(date, "EEEE, MMMM d, yyyy")}`
+  if (!events.length) return `${header}\n\nNo events.`
+  return `${header}\n\n${[...events]
+    .sort((left, right) => left.start.getTime() - right.start.getTime())
+    .map(eventContext)
+    .join("\n\n")}`
+}

package/kernel/plugins/calendar/src/copy-button.tsx

@@ -0,0 +1,66 @@
+import { useState } from "react"
+import { Check, Clipboard } from "lucide-react"
+
+import { cn } from "./utils"
+
+function fallbackCopy(value: string) {
+  const area = document.createElement("textarea")
+  area.value = value
+  area.setAttribute("readonly", "")
+  area.style.cssText = "position:fixed;left:-9999px;top:0"
+  document.body.append(area)
+  area.select()
+  const copied = document.execCommand("copy")
+  area.remove()
+  return copied
+}
+
+function copyText(value: string) {
+  const fallback = fallbackCopy(value)
+  if (!navigator.clipboard?.writeText) return Promise.resolve(fallback)
+  return navigator.clipboard.writeText(value).then(
+    () => true,
+    () => fallback,
+  )
+}
+
+export function CopyButton({
+  className,
+  iconOnly = false,
+  label,
+  value,
+}: {
+  className?: string
+  iconOnly?: boolean
+  label: string
+  value: string
+}) {
+  const [copied, setCopied] = useState(false)
+
+  return (
+    <button
+      aria-label={label}
+      className={cn(
+        "hover:bg-accent flex items-center gap-1 rounded-md border text-xs",
+        iconOnly ? "size-8 justify-center p-0" : "px-2 py-1",
+        className,
+      )}
+      onClick={() => {
+        void copyText(value).then((success) => {
+          if (!success) return
+          setCopied(true)
+          window.setTimeout(() => setCopied(false), 1_800)
+        })
+      }}
+      title={label}
+      type="button"
+    >
+      {copied ? (
+        <Check aria-hidden="true" className="size-3.5" />
+      ) : (
+        <Clipboard aria-hidden="true" className="size-3.5" />
+      )}
+      {iconOnly ? null : copied ? "Copied" : label}
+    </button>
+  )
+}