@porkytheblack/garage-dashboard 0.1.0

package/components/session/new-session-dialog.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import * as React from "react";
+import { useRouter } from "next/navigation";
+import { Plus } from "lucide-react";
+import { toast } from "sonner";
+import { launchSession } from "@/lib/launch";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select";
+import { Spinner } from "@/components/shared";
+import type { WorkspaceDto, ProfileDto } from "@/lib/types";
+
+const DEFAULT_WS = "__default__";
+const DEFAULT_MODEL = "__default__";
+
+export function NewSessionDialog({ workspaces, profiles }: { workspaces: WorkspaceDto[]; profiles: ProfileDto[] }) {
+  const router = useRouter();
+  const [open, setOpen] = React.useState(false);
+  const [prompt, setPrompt] = React.useState("");
+  const [ws, setWs] = React.useState(DEFAULT_WS);
+  const [profile, setProfile] = React.useState(DEFAULT_MODEL);
+  const [mode, setMode] = React.useState("normal");
+  const [busy, setBusy] = React.useState(false);
+
+  // Show what the defaults actually resolve to. With exactly one profile, that
+  // profile *is* the default — name it instead of the generic "Default model".
+  const defaultModelLabel = profiles.length === 1 ? `Default — ${profiles[0].label}` : "Default model";
+
+  const create = async () => {
+    setBusy(true);
+    try {
+      const id = await launchSession({
+        prompt: prompt.trim() || undefined,
+        workspaceId: ws === DEFAULT_WS ? undefined : ws,
+        profileId: profile === DEFAULT_MODEL ? undefined : profile,
+        permissionMode: mode,
+      });
+      router.push(`/sessions/${id}`);
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Could not start the session");
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button>
+          <Plus /> New session
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>New session</DialogTitle>
+          <DialogDescription>Put an agent to work in a workspace. You can send the first instruction now or later.</DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-5 py-1">
+          <div className="flex flex-col gap-2">
+            <Label>First message <span className="font-normal text-faint">(optional)</span></Label>
+            <Textarea
+              autoFocus
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              placeholder="e.g. Add rate limiting to the API routes and write a test."
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div className="flex flex-col gap-2">
+              <Label>Workspace</Label>
+              <Select value={ws} onValueChange={setWs}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={DEFAULT_WS}>Default — managed folder</SelectItem>
+                  {workspaces.map((w) => (
+                    <SelectItem key={w.id} value={w.id}>
+                      {w.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-2">
+              <Label>Model</Label>
+              <Select value={profile} onValueChange={setProfile}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={DEFAULT_MODEL}>{defaultModelLabel}</SelectItem>
+                  {profiles.map((p) => (
+                    <SelectItem key={p.id} value={p.id}>
+                      {p.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label>Permission mode</Label>
+            <Select value={mode} onValueChange={setMode}>
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="normal">Normal — prompt for risky tools</SelectItem>
+                <SelectItem value="auto">Auto — auto-approve</SelectItem>
+                <SelectItem value="bypass">Bypass — no prompts</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        <DialogFooter className="mt-1">
+          <Button variant="ghost" onClick={() => setOpen(false)} disabled={busy}>
+            Cancel
+          </Button>
+          <Button onClick={create} disabled={busy}>
+            {busy ? <Spinner /> : <Plus />} Start session
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/components/session/reasoning-knob.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import * as React from "react";
+import { Brain, ChevronsUpDown } from "lucide-react";
+import { toast } from "sonner";
+import { api } from "@/lib/api";
+import { cn } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+} from "@/components/ui/dropdown-menu";
+import type { ProfileWire, ReasoningOption } from "@/lib/types";
+
+/**
+ * Reasoning-effort knob, inline in the composer next to the model switcher
+ * (the Cursor convention). Changing the level rewrites the profile's
+ * reasoning (`POST /models/profiles/:id/reasoning`) — which mints a new
+ * profile id — and swaps the live session onto it.
+ */
+export function ReasoningKnob({
+  profiles,
+  currentLabel,
+  onSwapped,
+}: {
+  profiles: ProfileWire[];
+  currentLabel: string | null;
+  onSwapped: (profileId: string, label: string) => void;
+}) {
+  const current = profiles.find((p) => p.label === currentLabel) ?? null;
+  const [options, setOptions] = React.useState<ReasoningOption[] | null>(null);
+  const [busy, setBusy] = React.useState(false);
+
+  React.useEffect(() => {
+    setOptions(null);
+    if (!current) return;
+    let cancelled = false;
+    api<{ options: ReasoningOption[] }>(
+      `/models/reasoning-options?provider=${encodeURIComponent(current.provider_id)}&model=${encodeURIComponent(current.model)}`,
+    )
+      .then((r) => !cancelled && setOptions(r.options ?? []))
+      .catch(() => !cancelled && setOptions([]));
+    return () => {
+      cancelled = true;
+    };
+  }, [current?.id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // No profile match or a model with no reasoning levels: nothing to show.
+  if (!current || options === null || options.length === 0) return null;
+
+  const level = current.reasoning_label ?? "off";
+
+  const pick = async (opt: ReasoningOption) => {
+    if (busy) return;
+    setBusy(true);
+    try {
+      const updated = await api<ProfileWire>(`/models/profiles/${current.id}/reasoning`, {
+        method: "POST",
+        body: { reasoning: opt.value ?? { kind: "off" } },
+      });
+      onSwapped(updated.id, updated.label);
+      toast.success(`Reasoning set to ${opt.label}`);
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Could not change reasoning");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          disabled={busy}
+          className={cn(
+            "inline-flex h-8 items-center gap-1.5 rounded-md border border-border bg-surface-2/60 px-2.5 text-[12.5px] font-medium shadow-sheen transition-colors hover:bg-elevated",
+            level !== "off" ? "text-brand-strong" : "text-muted-foreground",
+          )}
+          title="Reasoning effort"
+        >
+          <Brain className="size-3.5" />
+          {level}
+          <ChevronsUpDown className="size-3 text-faint" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" side="top" className="w-[230px]">
+        <DropdownMenuLabel className="text-[11px] uppercase tracking-wider text-faint">Reasoning effort</DropdownMenuLabel>
+        {options.map((opt) => (
+          <DropdownMenuItem key={opt.label} onClick={() => pick(opt)} className="flex flex-col items-start gap-0.5">
+            <span className={cn("text-[13px]", opt.label === level && "text-brand-strong")}>{opt.label}</span>
+            {opt.description && <span className="text-[11.5px] text-faint">{opt.description}</span>}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/components/session/session-switcher.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Check, ChevronsUpDown, MessageSquare } from "lucide-react";
+import { useQuery } from "@/lib/hooks";
+import { cn } from "@/lib/utils";
+import { timeAgo } from "@/lib/format";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
+import type { SessionDto } from "@/lib/types";
+
+const DOT: Record<string, string> = {
+  busy: "bg-warning",
+  provisioning: "bg-warning",
+  idle: "bg-muted-foreground/60",
+  error: "bg-destructive",
+  destroyed: "bg-muted-foreground/30",
+};
+
+/** Header switcher: jump between sessions without leaving the chat. Sessions
+ * you started keep running server-side whether or not they're open here. */
+export function SessionSwitcher({ currentId, title }: { currentId: string; title: string }) {
+  const router = useRouter();
+  const { data } = useQuery<{ sessions: SessionDto[] }>("/sessions");
+  const sessions = [...(data?.sessions ?? [])].sort((a, b) => b.last_activity.localeCompare(a.last_activity));
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button className="group flex min-w-0 items-center gap-1.5 rounded-md text-left outline-none focus-visible:ring-2 focus-visible:ring-ring/40">
+          <h1 className="truncate text-[17px] font-semibold tracking-tight">{title}</h1>
+          <ChevronsUpDown className="size-3.5 shrink-0 text-muted-foreground opacity-50 transition-opacity group-hover:opacity-100" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="max-h-[70vh] w-[300px] overflow-y-auto">
+        <DropdownMenuLabel>Switch session</DropdownMenuLabel>
+        {sessions.length === 0 && <div className="px-2.5 py-1.5 text-[12.5px] text-muted-foreground">No sessions.</div>}
+        {sessions.map((s) => (
+          <DropdownMenuItem key={s.id} onClick={() => router.push(`/sessions/${s.id}`)} className="gap-2.5">
+            <span className={cn("size-1.5 shrink-0 rounded-full", DOT[s.state] ?? "bg-muted-foreground/60")} />
+            <span className="min-w-0 flex-1 truncate">{s.title ?? "Untitled session"}</span>
+            <span className="shrink-0 text-[11px] text-muted-foreground">{timeAgo(s.last_activity)}</span>
+            {s.id === currentId && <Check className="size-3.5 shrink-0 text-brand" />}
+          </DropdownMenuItem>
+        ))}
+        <DropdownMenuSeparator />
+        <DropdownMenuItem asChild>
+          <Link href="/sessions">
+            <MessageSquare /> All sessions
+          </Link>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/components/shared.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import * as React from "react";
+import { Check, Copy, LoaderCircle, type LucideIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+/** Page title block: heading, optional supporting line, right-aligned actions. */
+export function PageHeader({
+  title,
+  description,
+  actions,
+  className,
+}: {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  actions?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("mb-7 flex flex-wrap items-start justify-between gap-4", className)}>
+      <div className="min-w-0">
+        <h1 className="text-[22px] font-semibold tracking-tight">{title}</h1>
+        {description && <p className="mt-1.5 max-w-[64ch] text-[13.5px] leading-relaxed text-muted-foreground">{description}</p>}
+      </div>
+      {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
+    </div>
+  );
+}
+
+/** Centered, calm empty state with a brand-tinted line icon. */
+export function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  action,
+  className,
+}: {
+  icon: LucideIcon;
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("flex animate-fade-in flex-col items-center justify-center px-6 py-16 text-center", className)}>
+      <div className="mb-4 grid size-12 place-items-center rounded-xl border border-border bg-surface-2 text-faint shadow-sheen">
+        <Icon className="size-5" />
+      </div>
+      <p className="text-[14px] font-medium text-foreground">{title}</p>
+      {description && <p className="mt-1.5 max-w-[42ch] text-[13px] leading-relaxed text-muted-foreground">{description}</p>}
+      {action && <div className="mt-5">{action}</div>}
+    </div>
+  );
+}
+
+export function ErrorState({ message, className }: { message: string; className?: string }) {
+  return (
+    <div
+      className={cn(
+        "flex items-start gap-2.5 rounded-lg border border-destructive/25 bg-destructive/[0.07] px-4 py-3 text-[13px]",
+        className,
+      )}
+    >
+      <span className="mt-1 size-1.5 shrink-0 rounded-full bg-destructive" />
+      <span className="text-foreground/90">{message}</span>
+    </div>
+  );
+}
+
+export function Spinner({ className }: { className?: string }) {
+  return <LoaderCircle className={cn("size-4 animate-spin", className)} />;
+}
+
+export function Loading({ label = "Loading…", className }: { label?: string; className?: string }) {
+  return (
+    <div className={cn("flex items-center justify-center gap-2.5 py-14 text-[13px] text-muted-foreground", className)}>
+      <Spinner /> {label}
+    </div>
+  );
+}
+
+const STATUS: Record<string, { label: string; dot: string; tone: string; pulse?: boolean }> = {
+  busy: { label: "running", dot: "bg-success", tone: "text-success", pulse: true },
+  provisioning: { label: "provisioning", dot: "bg-warning", tone: "text-warning", pulse: true },
+  idle: { label: "idle", dot: "bg-muted-foreground/60", tone: "text-muted-foreground" },
+  error: { label: "error", dot: "bg-destructive", tone: "text-destructive" },
+  destroyed: { label: "destroyed", dot: "bg-faint", tone: "text-faint" },
+};
+
+/** A quiet status indicator: a colored dot + label. Live states ripple. */
+export function SessionStatus({ state, className }: { state: string; className?: string }) {
+  const s = STATUS[state] ?? { label: state, dot: "bg-muted-foreground/60", tone: "text-muted-foreground" };
+  return (
+    <span className={cn("inline-flex items-center gap-1.5 text-[12.5px] font-medium", s.tone, className)}>
+      <span className="relative grid size-2 place-items-center">
+        {s.pulse && <span className={cn("absolute size-2 rounded-full opacity-60 animate-pulse-ring", s.dot)} />}
+        <span className={cn("relative size-2 rounded-full", s.dot)} />
+      </span>
+      {s.label}
+    </span>
+  );
+}
+
+/** Copy-to-clipboard icon button with a transient check. */
+export function CopyButton({ value, className, label }: { value: string; className?: string; label?: string }) {
+  const [copied, setCopied] = React.useState(false);
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1200);
+    } catch {
+      /* clipboard unavailable */
+    }
+  };
+  return (
+    <Button type="button" variant="ghost" size={label ? "sm" : "icon-sm"} className={cn("text-muted-foreground", className)} onClick={copy} title="Copy">
+      {copied ? <Check className="text-success" /> : <Copy />}
+      {label}
+    </Button>
+  );
+}
+
+/** Confirm-on-click destructive action. Stays inline; arms then confirms. */
+export function ConfirmButton({ onConfirm, label = "Delete", icon: Icon }: { onConfirm: () => void; label?: string; icon?: LucideIcon }) {
+  const [armed, setArmed] = React.useState(false);
+  React.useEffect(() => {
+    if (!armed) return;
+    const t = setTimeout(() => setArmed(false), 3000);
+    return () => clearTimeout(t);
+  }, [armed]);
+
+  if (armed) {
+    return (
+      <span className="inline-flex items-center gap-1.5">
+        <Button variant="destructive" size="sm" onClick={onConfirm}>
+          Confirm
+        </Button>
+        <Button variant="ghost" size="sm" onClick={() => setArmed(false)}>
+          Cancel
+        </Button>
+      </span>
+    );
+  }
+  return (
+    <Button variant="ghost" size="sm" className="text-muted-foreground hover:text-destructive" onClick={() => setArmed(true)}>
+      {Icon && <Icon />}
+      {label}
+    </Button>
+  );
+}
+
+/** Scroll container for list/detail pages: full height, centered max width. */
+export function Page({ children, className }: { children: React.ReactNode; className?: string }) {
+  return (
+    <div className="h-full overflow-y-auto">
+      <div className={cn("mx-auto w-full max-w-[1180px] animate-fade-in px-6 py-8 md:px-9", className)}>{children}</div>
+    </div>
+  );
+}
+
+/** A revealed secret: monospace, full-width, with a copy affordance. */
+export function SecretReveal({ value }: { value: string }) {
+  return (
+    <div className="flex items-center gap-2 rounded-lg border border-border bg-background p-2 pl-3 shadow-sheen">
+      <code className="min-w-0 flex-1 break-all font-mono text-[12.5px] text-foreground">{value}</code>
+      <CopyButton value={value} />
+    </div>
+  );
+}

package/components/theme-toggle.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "@/lib/theme";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+
+/** Quiet light/dark switch — sun in the dark, moon in the light. */
+export function ThemeToggle() {
+  const { resolved, setPref } = useTheme();
+  const next = resolved === "dark" ? "light" : "dark";
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          aria-label={`Switch to ${next} mode`}
+          onClick={() => setPref(next)}
+          className="grid size-8 place-items-center rounded-md text-faint transition-colors hover:bg-secondary hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+        >
+          {resolved === "dark" ? <Sun className="size-4" /> : <Moon className="size-4" />}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">{next === "light" ? "Light mode" : "Dark mode"}</TooltipContent>
+    </Tooltip>
+  );
+}

package/components/ui/avatar.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "@/lib/utils";
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn("flex h-full w-full items-center justify-center rounded-full bg-secondary text-xs font-medium text-foreground", className)}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

package/components/ui/badge.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "border-border bg-secondary text-muted-foreground",
+        outline: "border-border text-muted-foreground",
+        brand: "border-brand/30 bg-brand/10 text-brand",
+        success: "border-success/30 bg-success/10 text-success",
+        warning: "border-warning/30 bg-warning/10 text-warning",
+        destructive: "border-destructive/30 bg-destructive/10 text-destructive",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <span className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

package/components/ui/button.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-brand text-brand-foreground shadow-sheen hover:bg-brand-strong active:scale-[0.98]",
+        destructive:
+          "border border-destructive/30 bg-destructive/10 text-destructive hover:bg-destructive/20",
+        outline: "border border-border bg-transparent shadow-sheen hover:border-border-strong hover:bg-secondary hover:text-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sheen hover:bg-elevated",
+        ghost: "text-muted-foreground hover:bg-secondary hover:text-foreground",
+        link: "text-foreground underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-[13px]",
+        lg: "h-10 rounded-md px-6",
+        icon: "h-9 w-9",
+        "icon-sm": "h-8 w-8",
+      },
+    },
+    defaultVariants: { variant: "default", size: "default" },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/components/ui/card.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("rounded-lg border border-border bg-card text-card-foreground shadow-card", className)} {...props} />
+  ),
+);
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col gap-1.5 p-5", className)} {...props} />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("text-[15px] font-semibold leading-none tracking-tight", className)} {...props} />
+  ),
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("text-[13px] text-muted-foreground", className)} {...props} />
+  ),
+);
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-5 pt-0", className)} {...props} />,
+);
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center p-5 pt-0", className)} {...props} />
+  ),
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };