kennel 0.2.0 → 0.2.2

package/kernel/packages/ui/src/components/session-icon.tsx

@@ -0,0 +1,124 @@
+import type { FolderSession } from "@raggle-ai/ui/lib/folder-activity"
+
+export function SessionIcon({ client }: { client: FolderSession["client"] }) {
+  if (client === "claude")
+    return (
+      <span className="session-mark is-claude" aria-label="Claude">
+        <svg viewBox="0 0 512 512" aria-hidden="true">
+          <path d="M447.957 233.579H512v66.176h-64v64.597h-31.723v62.315H384v-62.315h-31.723v62.315H320v-62.315H192v62.315h-32.256v-62.315H128v62.315H95.723v-62.315H64v-64.619H0V233.6h64V106.667h383.957v126.912zm-319.957 0h31.744v-60.736H128v60.736zm224.213 0H384v-60.736h-31.787v60.736z" />
+        </svg>
+      </span>
+    )
+
+  if (client === "codex")
+    return (
+      <span className="session-mark is-codex" aria-label="Codex">
+        <svg viewBox="0 0 512 512" aria-hidden="true">
+          <path
+            d="M416.096 0H95.904C42.844 0 0 42.844 0 95.904v320.192C0 469.156 42.844 512 95.904 512h320.192C469.156 512 512 469.156 512 416.096V95.904C512 42.844 469.156 0 416.096 0z"
+            fill="#fff"
+          />
+          <path
+            d="M193.365 114.817a97.67 97.67 0 0 1 48.746-6.656c21.333 2.453 40.342 11.52 57.024 27.2.214.213.512.362.789.448.299.085.598.085.918 0a97.195 97.195 0 0 1 64.981 5.866l1.003.47 2.474 1.216a97.813 97.813 0 0 1 46.678 51.179 98.24 98.24 0 0 1 6.72 34.027c.32 8.789-.64 17.579-2.859 26.09a2.645 2.645 0 0 0 .64 2.453c12.672 12.95 21.077 28.374 25.237 46.294 6.166 30.4-.149 57.813-18.923 82.219l-2.901 3.541a97.024 97.024 0 0 1-46.955 29.611 2.56 2.56 0 0 0-1.728 1.622c-4.075 11.755-8.171 21.824-15.787 31.872-19.2 25.323-47.403 39.381-79.168 39.21-25.323-.128-47.765-9.386-67.349-27.776a2.325 2.325 0 0 0-2.24-.512c-8.277 2.667-16.64 3.051-25.685 2.944a94.677 94.677 0 0 1-41.493-9.941 97.131 97.131 0 0 1-34.347-28.48c-3.243-4.309-6.464-8.363-8.832-13.163a123.669 123.669 0 0 1-7.893-20.501 97.6 97.6 0 0 1-.299-49.024 2.837 2.837 0 0 0 .128-1.195 1.771 1.771 0 0 0-.576-1.024 95.296 95.296 0 0 1-22.059-35.221 83.157 83.157 0 0 1-5.355-25.429 110.784 110.784 0 0 1 3.008-34.134c7.189-23.723 20.949-42.347 41.237-55.851 4.523-3.008 8.811-5.355 12.821-7.04a134.187 134.187 0 0 1 13.781-4.843 2.133 2.133 0 0 0 1.386-1.408 96.256 96.256 0 0 1 17.685-34.453 96.853 96.853 0 0 1 39.211-29.611zm74.283 225.387a13.653 13.653 0 0 0-12.821 13.568 13.653 13.653 0 0 0 12.821 13.568h77.568l.768.021a13.653 13.653 0 0 0 13.589-13.589 13.653 13.653 0 0 0-13.589-13.589l-.768.021h-77.568zm-87.125-99.818a13.653 13.653 0 0 0-11.584-6.486 13.653 13.653 0 0 0-12.011 19.947l27.136 47.445-27.008 45.568a13.611 13.611 0 0 0 23.36 13.845l31.019-52.373a13.589 13.589 0 0 0 .107-13.653l-31.019-54.293z"
+            fill="url(#session-codex-gradient)"
+          />
+          <defs>
+            <linearGradient
+              id="session-codex-gradient"
+              x1="256"
+              y1="64"
+              x2="256"
+              y2="448"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor="#b1a7ff" />
+              <stop offset=".5" stopColor="#7a9dff" />
+              <stop offset="1" stopColor="#3941ff" />
+            </linearGradient>
+          </defs>
+        </svg>
+      </span>
+    )
+
+  if (client === "cursor")
+    return (
+      <span className="session-mark is-cursor" aria-label="Cursor">
+        <svg viewBox="0 0 512 512" aria-hidden="true">
+          <rect width="512" height="512" rx="122" fill="#000" />
+          <path
+            d="m255.428 423 148.991-83.5L255.428 256l-148.99 83.5 148.99 83.5z"
+            fill="url(#session-cursor-bottom)"
+          />
+          <path
+            d="M404.419 339.5v-167L255.428 89v167l148.991 83.5z"
+            fill="url(#session-cursor-right)"
+          />
+          <path
+            d="m255.428 89 148.991-83.5v167l-148.991-83.5V89z"
+            fill="url(#session-cursor-left)"
+          />
+          <path
+            d="M404.419 172.5 255.428 423V256l148.991-83.5h297.981z"
+            fill="#e4e4e4"
+          />
+          <path
+            d="m255.428 256-148.991 83.5v167l148.991-83.5h297.981z"
+            fill="#fff"
+          />
+          <defs>
+            <linearGradient
+              id="session-cursor-bottom"
+              x1="255.428"
+              y1="256"
+              x2="255.428"
+              y2="423"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop offset=".16" stopColor="#fff" stopOpacity=".39" />
+              <stop offset=".658" stopColor="#fff" stopOpacity=".8" />
+              <stop offset="1" stopColor="#fff" stopOpacity="0" />
+            </linearGradient>
+            <linearGradient
+              id="session-cursor-right"
+              x1="404.419"
+              y1="256"
+              x2="257.482"
+              y2="339.5"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop offset=".182" stopColor="#fff" stopOpacity=".31" />
+              <stop offset=".715" stopColor="#fff" stopOpacity="0" />
+            </linearGradient>
+            <linearGradient
+              id="session-cursor-left"
+              x1="255.428"
+              y1="89"
+              x2="112.292"
+              y2="342.802"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor="#fff" stopOpacity=".6" />
+              <stop offset=".667" stopColor="#fff" stopOpacity=".22" />
+            </linearGradient>
+          </defs>
+        </svg>
+      </span>
+    )
+
+  if (client === "opencode")
+    return (
+      <span className="session-mark is-opencode" aria-label="OpenCode">
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M8.3 7.2 3.5 12l4.8 4.8 1.9-1.9L7.3 12l2.9-2.9-1.9-1.9Zm7.4 0-1.9 1.9 2.9 2.9-2.9 2.9 1.9 1.9 4.8-4.8-4.8-4.8Z" />
+        </svg>
+      </span>
+    )
+
+  return (
+    <span className="session-mark is-pi" aria-label="Pi">
+      <svg viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M7 7.6h10v2.8h-2.5V20h-3V10.4H9.8V20H7V7.6Zm0-3.5h10v2.4H7V4.1Z" />
+      </svg>
+    </span>
+  )
+}

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

@@ -0,0 +1,157 @@
+"use client"
+
+import * as React from "react"
+import { XIcon } from "lucide-react"
+import { Dialog as SheetPrimitive } from "radix-ui"
+
+import { cn } from "@raggle-ai/ui/lib/utils"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        `data-[state=open]:animate-in data-[state=closed]:animate-out
+        data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0
+        z-50 bg-black/50`,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          `bg-background data-[state=open]:animate-in
+          data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4
+          shadow-lg transition ease-in-out data-[state=closed]:duration-300
+          data-[state=open]:duration-500`,
+          side === "right" &&
+            `data-[state=closed]:slide-out-to-right
+            data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4
+            border-l sm:max-w-sm`,
+          side === "left" &&
+            `data-[state=closed]:slide-out-to-left
+            data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4
+            border-r sm:max-w-sm`,
+          side === "top" &&
+            `data-[state=closed]:slide-out-to-top
+            data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b`,
+          side === "bottom" &&
+            `data-[state=closed]:slide-out-to-bottom
+            data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto
+            border-t`,
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close
+          className="ring-offset-background focus:ring-ring
+            data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs
+            opacity-70 transition-opacity hover:opacity-100 focus:ring-2
+            focus:ring-offset-2 focus:outline-hidden
+            disabled:pointer-events-none"
+        >
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}