failproofai 0.0.1-beta.1

package/.next/standalone/app/components/session-hooks-panel.tsx

@@ -0,0 +1,394 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import {
+  ShieldCheck,
+  ShieldX,
+  ShieldAlert,
+  Shield,
+  ChevronDown,
+} from "lucide-react";
+import PaginationControls from "@/app/components/pagination-controls";
+import { searchHookActivityAction } from "@/app/actions/get-hook-activity";
+import type { HookActivityPayload } from "@/app/actions/get-hook-activity";
+import { useAutoRefresh } from "@/contexts/AutoRefreshContext";
+import { formatRelativeTime } from "@/lib/format-duration";
+import { CopyButton } from "@/app/components/copy-button";
+
+function formatAbsoluteTime(ts: number): string {
+  return new Date(ts).toLocaleString(undefined, {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+}
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+// -- Badge Components --
+
+function DecisionBadge({ decision }: { decision: "allow" | "deny" | "instruct" }) {
+  if (decision === "deny") {
+    return (
+      <span className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[0.65rem] font-semibold tracking-wide uppercase bg-red-500/10 text-red-400 border border-red-500/20">
+        <ShieldX className="h-3 w-3" />
+        Deny
+      </span>
+    );
+  }
+  if (decision === "instruct") {
+    return (
+      <span className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[0.65rem] font-semibold tracking-wide uppercase bg-amber-500/10 text-amber-400 border border-amber-500/20">
+        <ShieldAlert className="h-3 w-3" />
+        Instruct
+      </span>
+    );
+  }
+  return (
+    <span className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[0.65rem] font-semibold tracking-wide uppercase bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
+      <ShieldCheck className="h-3 w-3" />
+      Allow
+    </span>
+  );
+}
+
+function EventTypeBadge({ eventType }: { eventType: string }) {
+  return (
+    <span className="inline-flex items-center rounded px-1.5 py-0.5 text-[0.6rem] font-medium bg-muted text-muted-foreground border border-border/50">
+      {eventType}
+    </span>
+  );
+}
+
+function ModeBadge({ mode }: { mode: string }) {
+  const isDefault = mode === "default";
+  return (
+    <span
+      className={`inline-flex items-center rounded px-1.5 py-0.5 text-[0.6rem] font-medium border ${
+        isDefault
+          ? "bg-sky-500/10 text-sky-400 border-sky-500/20"
+          : "bg-amber-500/10 text-amber-400 border-amber-500/20"
+      }`}
+    >
+      {mode}
+    </span>
+  );
+}
+
+function DurationDisplay({ ms }: { ms: number }) {
+  const color =
+    ms > 500
+      ? "text-red-400"
+      : ms > 100
+        ? "text-amber-400"
+        : "text-muted-foreground";
+  return <span className={`font-mono text-[0.7rem] ${color}`}>{formatDuration(ms)}</span>;
+}
+
+// -- Decision Pill Toggle --
+
+function DecisionPills({
+  value,
+  onChange,
+}: {
+  value: "" | "allow" | "deny" | "instruct";
+  onChange: (v: "" | "allow" | "deny" | "instruct") => void;
+}) {
+  const opts: { label: string; value: "" | "allow" | "deny" | "instruct" }[] = [
+    { label: "All", value: "" },
+    { label: "Allow", value: "allow" },
+    { label: "Instruct", value: "instruct" },
+    { label: "Deny", value: "deny" },
+  ];
+  return (
+    <div className="inline-flex items-center rounded-md border border-border bg-muted/30 p-0.5">
+      {opts.map((opt) => (
+        <button
+          key={opt.value}
+          onClick={() => onChange(opt.value)}
+          className={`px-2.5 py-1 text-[0.65rem] font-medium rounded transition-all ${
+            value === opt.value
+              ? opt.value === "deny"
+                ? "bg-red-500/15 text-red-400 shadow-sm"
+                : opt.value === "allow"
+                  ? "bg-emerald-500/15 text-emerald-400 shadow-sm"
+                  : opt.value === "instruct"
+                    ? "bg-amber-500/15 text-amber-400 shadow-sm"
+                    : "bg-background text-foreground shadow-sm"
+              : "text-muted-foreground hover:text-foreground"
+          }`}
+        >
+          {opt.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+// -- Expandable Detail Panel --
+
+function SessionHooksDetailPanel({
+  item,
+}: {
+  item: HookActivityPayload["entries"][number];
+}) {
+  return (
+    <tr>
+      <td colSpan={9} className="px-0 py-0">
+        <div className="px-6 py-3 bg-muted/20 border-t border-border/30 space-y-2 text-xs animate-expand">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-1.5">
+            <div>
+              <span className="text-muted-foreground">Session ID: </span>
+              <span className="font-mono text-foreground">
+                {item.sessionId ?? "\u2014"}
+              </span>
+              {item.sessionId && <CopyButton text={item.sessionId} />}
+            </div>
+            <div>
+              <span className="text-muted-foreground">CWD: </span>
+              <span className="font-mono text-foreground">{item.cwd ?? "\u2014"}</span>
+              {item.cwd && <CopyButton text={item.cwd} />}
+            </div>
+            <div>
+              <span className="text-muted-foreground">Transcript: </span>
+              <span className="font-mono text-foreground break-all">
+                {item.transcriptPath ?? "\u2014"}
+              </span>
+            </div>
+          </div>
+          {item.reason && (
+            <div>
+              <span className="text-muted-foreground">Full reason: </span>
+              <span className="text-foreground">{item.reason}</span>
+            </div>
+          )}
+        </div>
+      </td>
+    </tr>
+  );
+}
+
+// -- Main Component --
+
+interface SessionHooksPanelProps {
+  sessionId: string;
+  initialData: HookActivityPayload;
+}
+
+export default function SessionHooksPanel({ sessionId, initialData }: SessionHooksPanelProps) {
+  const { intervalSec } = useAutoRefresh();
+
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [page, setPage] = useState(1);
+  const [data, setData] = useState<HookActivityPayload>(initialData);
+  const [expandedRow, setExpandedRow] = useState<number | null>(null);
+
+  // Filter state (no URL sync — local to this panel)
+  const [filterDecision, setFilterDecision] = useState<"" | "allow" | "deny" | "instruct">("");
+  const [filterEventType, setFilterEventType] = useState("");
+  const [filterPolicy, setFilterPolicy] = useState("");
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const filtersRef = useRef({ filterDecision, filterEventType, filterPolicy });
+  filtersRef.current = { filterDecision, filterEventType, filterPolicy };
+
+  const hasActiveFilters = filterDecision !== "" || filterEventType !== "" || filterPolicy !== "";
+
+  const fetchData = useCallback(async (p: number) => {
+    try {
+      const { filterDecision: fd, filterEventType: fe, filterPolicy: fp } = filtersRef.current;
+      const result = await searchHookActivityAction(
+        {
+          sessionId,
+          decision: fd || undefined,
+          eventType: fe || undefined,
+          policyName: fp || undefined,
+        },
+        p,
+      );
+      setData(result);
+    } catch {
+      // Non-critical
+    }
+  }, [sessionId]);
+
+  // Fetch on mount and poll
+  useEffect(() => {
+    fetchData(page);
+    const ms = intervalSec > 0 ? intervalSec * 1000 : 5000;
+    const id = setInterval(() => fetchData(page), ms);
+    return () => clearInterval(id);
+  }, [page, fetchData, intervalSec]);
+
+  // Reset to page 1 when filters change (debounced)
+  useEffect(() => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      setPage(1);
+      setExpandedRow(null);
+      fetchData(1);
+    }, 300);
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filterDecision, filterEventType, filterPolicy]);
+
+  const items = data.entries;
+  const totalPages = data.totalPages;
+
+  const toggleRow = (idx: number) => {
+    setExpandedRow((prev) => (prev === idx ? null : idx));
+  };
+
+  return (
+    <div>
+      <button
+        onClick={() => setIsCollapsed((prev) => !prev)}
+        className="flex items-center gap-2 hover:opacity-80 transition-opacity"
+      >
+        <ChevronDown
+          className={`w-4 h-4 text-muted-foreground transition-transform ${isCollapsed ? "-rotate-90" : ""}`}
+        />
+        <span className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+          Hook Logs
+        </span>
+      </button>
+      {!isCollapsed && (
+      <div className="mt-2 bg-card border border-border rounded-lg overflow-hidden shadow-sm">
+      {/* Filter bar */}
+      <div className="flex flex-wrap items-center gap-3 px-4 py-2.5 border-b border-border bg-muted/20">
+        <DecisionPills value={filterDecision} onChange={setFilterDecision} />
+        <select
+          value={filterEventType}
+          onChange={(e) => setFilterEventType(e.target.value)}
+          className="h-7 rounded-md border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-primary/40 focus:border-primary/40 transition-shadow"
+        >
+          <option value="">All Events</option>
+          <option value="PreToolUse">PreToolUse</option>
+          <option value="PostToolUse">PostToolUse</option>
+          <option value="SessionStart">SessionStart</option>
+          <option value="SessionEnd">SessionEnd</option>
+          <option value="UserPromptSubmit">UserPromptSubmit</option>
+          <option value="PermissionRequest">PermissionRequest</option>
+        </select>
+        <div className="relative">
+          <input
+            type="text"
+            value={filterPolicy}
+            onChange={(e) => setFilterPolicy(e.target.value)}
+            placeholder="Filter by policy…"
+            className="h-7 rounded-md border border-border bg-background px-2.5 text-xs text-foreground placeholder:text-muted-foreground w-44 focus:outline-none focus:ring-2 focus:ring-primary/40 focus:border-primary/40 transition-shadow"
+          />
+        </div>
+      </div>
+
+      {items.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-12 px-4">
+          <Shield className="h-10 w-10 text-muted-foreground/30" />
+          <p className="text-sm text-muted-foreground mt-3">
+            {hasActiveFilters ? "No matching hook events." : "No hook events found."}
+          </p>
+        </div>
+      ) : (
+        <div className="overflow-x-auto">
+          <table className="w-full text-xs">
+            <thead>
+              <tr className="text-left text-muted-foreground border-b border-border bg-muted/30">
+                <th className="px-4 py-2.5 font-medium w-6" />
+                <th className="px-3 py-2.5 font-medium">Decision</th>
+                <th className="px-3 py-2.5 font-medium">Event</th>
+                <th className="px-3 py-2.5 font-medium">Tool</th>
+                <th className="px-3 py-2.5 font-medium">Policy</th>
+                <th className="px-3 py-2.5 font-medium">Reason</th>
+                <th className="px-3 py-2.5 font-medium">Duration</th>
+                <th className="px-3 py-2.5 font-medium">Mode</th>
+                <th className="px-3 py-2.5 font-medium text-right">Time</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-border/30">
+              {items.map((item, i) => {
+                const isDeny = item.decision === "deny";
+                const isExpanded = expandedRow === i;
+                const isInstruct = item.decision === "instruct";
+                return (
+                  <React.Fragment key={`${item.timestamp}-${i}`}>
+                    <tr
+                      onClick={() => toggleRow(i)}
+                      className={`cursor-pointer transition-colors ${
+                        isDeny
+                          ? "bg-red-500/[0.03] hover:bg-red-500/[0.07] border-l-2 border-l-red-500/40"
+                          : isInstruct
+                            ? "bg-amber-500/[0.03] hover:bg-amber-500/[0.07] border-l-2 border-l-amber-500/40"
+                            : i % 2 === 0
+                              ? "hover:bg-muted/30"
+                              : "bg-muted/[0.04] hover:bg-muted/30"
+                      } ${isExpanded ? "bg-muted/20" : ""}`}
+                    >
+                      <td className="px-4 py-2">
+                        <ChevronDown
+                          className={`h-3.5 w-3.5 text-muted-foreground transition-transform duration-150 ${
+                            isExpanded ? "rotate-0" : "-rotate-90"
+                          }`}
+                        />
+                      </td>
+                      <td className="px-3 py-2">
+                        <DecisionBadge decision={item.decision} />
+                      </td>
+                      <td className="px-3 py-2">
+                        <EventTypeBadge eventType={item.eventType} />
+                      </td>
+                      <td className="px-3 py-2 font-mono text-foreground">
+                        {item.toolName ?? "\u2014"}
+                      </td>
+                      <td className="px-3 py-2 font-mono text-foreground">
+                        {item.policyName ?? "\u2014"}
+                      </td>
+                      <td
+                        className="px-3 py-2 text-muted-foreground truncate max-w-[240px]"
+                        title={item.reason ?? ""}
+                      >
+                        {item.reason ?? "\u2014"}
+                      </td>
+                      <td className="px-3 py-2">
+                        <DurationDisplay ms={item.durationMs} />
+                      </td>
+                      <td className="px-3 py-2">
+                        {item.permissionMode ? (
+                          <ModeBadge mode={item.permissionMode} />
+                        ) : (
+                          "\u2014"
+                        )}
+                      </td>
+                      <td
+                        className="px-3 py-2 text-right text-muted-foreground whitespace-nowrap"
+                        title={formatAbsoluteTime(item.timestamp)}
+                      >
+                        {formatRelativeTime(item.timestamp)}
+                      </td>
+                    </tr>
+                    {isExpanded && <SessionHooksDetailPanel item={item} />}
+                  </React.Fragment>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+      <PaginationControls
+        currentPage={page}
+        totalPages={totalPages}
+        onPageChange={(p) => {
+          setPage(p);
+          setExpandedRow(null);
+        }}
+      />
+      </div>
+      )}
+    </div>
+  );
+}

package/.next/standalone/app/components/sessions-list.tsx

@@ -0,0 +1,227 @@
+/**
+ * Sessions List — displays session log files for a project with date
+ * preset / custom-range filtering, session ID search, and pagination.
+ */
+"use client";
+
+import { useState, useMemo, useEffect, useRef } from "react";
+import { SessionFile } from "@/lib/projects";
+import { formatDate } from "@/lib/utils";
+import {
+  FILTER_PRESETS,
+  ITEMS_PER_PAGE,
+  filterByDate,
+  rehydrateDates,
+} from "@/lib/date-filters";
+import { useFilterState } from "@/lib/use-filter-state";
+import { useUrlParams } from "@/lib/use-url-params";
+import {
+  presetToParam, paramToPreset,
+  dateRangeToParams, paramsToDateRange,
+  pageToParam, paramToPage,
+} from "@/lib/url-filter-serializers";
+import { File, Search } from "lucide-react";
+import Link from "next/link";
+import PaginationControls from "./pagination-controls";
+import DatePickerInput from "./date-picker-input";
+import { CopyButton } from "./copy-button";
+
+
+interface SessionsListProps {
+  files: SessionFile[];
+  projectName: string;
+}
+
+function filterBySessionId(files: SessionFile[], query: string): SessionFile[] {
+  const trimmed = query.trim().toLowerCase();
+  if (!trimmed) return files;
+  return files.filter((f) => f.sessionId?.toLowerCase().includes(trimmed));
+}
+
+export default function SessionsList({ files, projectName }: SessionsListProps) {
+  const url = useUrlParams();
+  const mountedRef = useRef(false);
+
+  // Read initial state from URL
+  const [sessionIdFilter, setSessionIdFilter] = useState(() => url.get("sid") ?? "");
+
+  const {
+    filterPreset, dateRange, currentPage, setCurrentPage,
+    handlePresetChange, handleDateRangeChange, clearFilters: clearDateFilters,
+  } = useFilterState([sessionIdFilter], {
+    filterPreset: paramToPreset(url.get("preset")),
+    dateRange: paramsToDateRange(url.get("from"), url.get("to")),
+    currentPage: paramToPage(url.get("page")),
+  });
+
+  // Write state changes back to URL
+  useEffect(() => {
+    if (!mountedRef.current) {
+      mountedRef.current = true;
+      return;
+    }
+    url.setAll({
+      preset: presetToParam(filterPreset),
+      ...dateRangeToParams(dateRange),
+      sid: sessionIdFilter || undefined,
+      page: pageToParam(currentPage),
+    });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filterPreset, dateRange, sessionIdFilter, currentPage]);
+
+  const clearFilters = () => {
+    clearDateFilters();
+    setSessionIdFilter("");
+  };
+
+  const normalizedFiles = useMemo(() => rehydrateDates(files), [files]);
+
+  const filteredFiles = useMemo(() => {
+    const byDate = filterByDate(normalizedFiles, filterPreset, dateRange);
+    const byId = filterBySessionId(byDate, sessionIdFilter);
+    return byId.sort((a, b) => b.lastModified.getTime() - a.lastModified.getTime());
+  }, [normalizedFiles, sessionIdFilter, filterPreset, dateRange]);
+
+  const totalPages = Math.max(1, Math.ceil(filteredFiles.length / ITEMS_PER_PAGE));
+  useEffect(() => {
+    if (currentPage > totalPages) setCurrentPage(totalPages);
+  }, [currentPage, totalPages, setCurrentPage]);
+  const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+  const endIndex = Math.min(startIndex + ITEMS_PER_PAGE, filteredFiles.length);
+  const paginatedFiles = filteredFiles.slice(startIndex, endIndex);
+
+  const hasActiveFilters =
+    filterPreset !== "all" || dateRange.from !== null || dateRange.to !== null || sessionIdFilter !== "";
+
+  return (
+    <div className="space-y-4">
+      {/* Filters */}
+      <div className="bg-card border border-border rounded-lg p-4 flex flex-col gap-4">
+        {/* Preset Filters + Refresh */}
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="text-sm font-medium text-foreground">Filter by:</span>
+          {FILTER_PRESETS.map((preset) => (
+            <button
+              key={preset.value}
+              onClick={() => handlePresetChange(preset.value)}
+              className={`px-3 py-1.5 text-sm rounded-md transition-colors ${
+                filterPreset === preset.value
+                  ? "bg-primary text-primary-foreground"
+                  : "bg-muted text-muted-foreground hover:bg-muted/80"
+              }`}
+            >
+              {preset.label}
+            </button>
+          ))}
+
+        </div>
+
+        {/* Custom Date Range */}
+        <div className="flex flex-wrap items-center gap-4">
+          <span className="text-sm font-medium text-foreground">Custom Range:</span>
+          <div className="flex items-center gap-2">
+            <DatePickerInput id="date-from" value={dateRange.from} onChange={(v) => handleDateRangeChange("from", v)} aria-label="Filter from date" />
+            <span className="text-muted-foreground">to</span>
+            <DatePickerInput id="date-to" value={dateRange.to} onChange={(v) => handleDateRangeChange("to", v)} aria-label="Filter to date" />
+          </div>
+        </div>
+
+        {/* Session ID Search */}
+        <div className="flex items-center gap-2">
+          <Search className="w-4 h-4 text-muted-foreground" />
+          <span className="text-sm font-medium text-foreground">Filter by Session ID:</span>
+          <input
+            type="text"
+            value={sessionIdFilter}
+            onChange={(e) => setSessionIdFilter(e.target.value)}
+            placeholder="Enter session ID (UUID)"
+            className="px-3 py-2 text-sm bg-input border border-border rounded-md text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-all hover:border-primary/50 flex-1 max-w-md"
+            aria-label="Filter by session ID"
+          />
+          {hasActiveFilters && (
+            <button
+              onClick={clearFilters}
+              className="px-3 py-2 text-sm bg-muted text-muted-foreground hover:bg-muted/80 rounded-md transition-colors"
+            >
+              Clear
+            </button>
+          )}
+        </div>
+
+        {/* Results Count */}
+        <div className="text-sm text-muted-foreground">
+          {filteredFiles.length === 0 ? (
+            "No sessions found"
+          ) : (
+            <>
+              Showing {startIndex + 1}-{endIndex} of {filteredFiles.length} sessions
+              {filteredFiles.length !== normalizedFiles.length && (
+                <span className="ml-1">(filtered from {normalizedFiles.length} total)</span>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Sessions Table */}
+      <div className="bg-card border border-border rounded-lg overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead>
+              <tr className="border-b border-border bg-muted/50">
+                <th scope="col" className="px-4 py-3 text-left text-sm font-semibold text-foreground w-12">
+                  <span className="sr-only">Icon</span>
+                </th>
+                <th scope="col" className="px-4 py-3 text-left text-sm font-semibold text-foreground">SessionId</th>
+                <th scope="col" className="px-4 py-3 text-left text-sm font-semibold text-foreground">Modified</th>
+              </tr>
+            </thead>
+            <tbody>
+              {paginatedFiles.length === 0 ? (
+                <tr>
+                  <td colSpan={3} className="px-4 py-8 text-center text-muted-foreground">
+                    No sessions found matching the filter.
+                  </td>
+                </tr>
+              ) : (
+                paginatedFiles.map((file) => (
+                  <tr key={file.path} className="border-b border-border hover:bg-muted/50 transition-colors">
+                    <td className="px-4 py-3">
+                      <File className="w-5 h-5 text-primary" />
+                    </td>
+                    <td className="px-4 py-3 max-w-md">
+                      <div className="flex items-center gap-1">
+                        {file.sessionId ? (
+                          <>
+                            <Link
+                              href={`/project/${encodeURIComponent(projectName)}/session/${encodeURIComponent(file.sessionId)}`}
+                              className="font-semibold text-foreground hover:text-primary transition-colors break-words break-all inline-block max-w-full"
+                            >
+                              {file.name.replace(/\.jsonl$/, "")}
+                            </Link>
+                            <CopyButton text={file.sessionId} />
+                          </>
+                        ) : (
+                          <span className="font-semibold text-foreground break-words break-all inline-block max-w-full">
+                            {file.name.replace(/\.jsonl$/, "")}
+                          </span>
+                        )}
+                      </div>
+                    </td>
+                    <td className="px-4 py-3 text-sm text-muted-foreground">
+                      {file.lastModifiedFormatted || formatDate(file.lastModified)}
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+
+        {filteredFiles.length > 0 && (
+          <PaginationControls currentPage={currentPage} totalPages={totalPages} onPageChange={setCurrentPage} />
+        )}
+      </div>
+    </div>
+  );
+}

package/.next/standalone/app/components/toast.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { useSyncExternalStore, useCallback, useEffect, useState } from "react";
+
+interface Toast {
+  id: number;
+  message: string;
+}
+
+let toasts: Toast[] = [];
+let nextId = 0;
+const listeners = new Set<() => void>();
+
+function emitChange() {
+  for (const listener of listeners) listener();
+}
+
+export function toast(message: string) {
+  const id = nextId++;
+  toasts = [...toasts, { id, message }];
+  emitChange();
+  setTimeout(() => {
+    toasts = toasts.filter((t) => t.id !== id);
+    emitChange();
+  }, 2500);
+}
+
+function subscribe(listener: () => void) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+function getSnapshot() {
+  return toasts;
+}
+
+export function Toaster() {
+  const items = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2">
+      {items.map((t) => (
+        <ToastItem key={t.id} message={t.message} />
+      ))}
+    </div>
+  );
+}
+
+function ToastItem({ message }: { message: string }) {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    requestAnimationFrame(() => setVisible(true));
+    const timer = setTimeout(() => setVisible(false), 2000);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <div
+      className={`bg-card border border-border text-foreground text-sm px-4 py-2 rounded-lg shadow-lg transition-opacity duration-300 ${
+        visible ? "opacity-100" : "opacity-0"
+      }`}
+    >
+      {message}
+    </div>
+  );
+}