kennel 0.2.2 → 0.2.5

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

@@ -1,328 +0,0 @@
-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

@@ -1,139 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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>
-  )
-}