@jiggai/kitchen 0.3.1 → 0.3.3

package/src/components/AppShell.tsx

@@ -1,286 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { usePathname, useRouter } from "next/navigation";
-import { useEffect, useMemo, useState } from "react";
-import { ErrorBoundary } from "@/components/ErrorBoundary";
-import { fetchJson } from "@/lib/fetch-json";
-import { ThemeToggle } from "@/components/ThemeToggle";
-import { ToastProvider } from "@/components/ToastProvider";
-
-function Icon({ children }: { children: React.ReactNode }) {
-  return (
-    <span
-      className="grid size-7 place-items-center text-[color:var(--ck-text-secondary)]"
-      aria-hidden
-    >
-      {children}
-    </span>
-  );
-}
-
-function SideNavLink({
-  href,
-  label,
-  icon,
-  active,
-  collapsed,
-}: {
-  href: string;
-  label: string;
-  icon: React.ReactNode;
-  active: boolean;
-  collapsed: boolean;
-}) {
-  return (
-    <Link
-      href={href}
-      title={label}
-      className={
-        (
-          active
-            ? "flex items-center rounded-[var(--ck-radius-sm)] bg-white/10 text-sm font-medium text-[color:var(--ck-text-primary)]"
-            : "flex items-center rounded-[var(--ck-radius-sm)] text-sm font-medium text-[color:var(--ck-text-secondary)] transition-colors hover:bg-white/5 hover:text-[color:var(--ck-text-primary)]"
-        ) +
-        (collapsed ? " justify-center px-0 py-3" : " gap-4 px-4 py-3")
-      }
-    >
-      {icon}
-      {collapsed ? null : <span>{label}</span>}
-    </Link>
-  );
-}
-
-export function AppShell({ children }: { children: React.ReactNode }) {
-  const pathname = usePathname() || "/";
-  const router = useRouter();
-
-  const currentTeamId = useMemo(() => {
-    const m = pathname.match(/^\/teams\/([^/]+)(?:\/|$)/);
-    return m ? decodeURIComponent(m[1]) : null;
-  }, [pathname]);
-
-  const [collapsed, setCollapsed] = useState(false);
-
-  // Avoid hydration mismatch: render un-collapsed on the server, then sync from localStorage after mount.
-  useEffect(() => {
-    try {
-      const v = localStorage.getItem("ck-leftnav-collapsed");
-      // eslint-disable-next-line react-hooks/set-state-in-effect
-      setCollapsed(v === "1");
-    } catch {
-      // ignore
-    }
-  }, []);
-
-  function toggleCollapsed() {
-    setCollapsed((v) => {
-      const next = !v;
-      try {
-        localStorage.setItem("ck-leftnav-collapsed", next ? "1" : "0");
-      } catch {
-        // ignore
-      }
-      return next;
-    });
-  }
-
-  // Minimal team list (for switcher). We rely on existing /api/recipes.
-  const [teamIds, setTeamIds] = useState<string[]>([]);
-  useEffect(() => {
-    (async () => {
-      try {
-        const json = await fetchJson<{ agents?: Array<{ workspace?: string }> }>("/api/agents", { cache: "no-store" });
-        const agents = Array.isArray(json.agents)
-          ? (json.agents as Array<{ workspace?: string }> )
-          : [];
-
-        const s = new Set<string>();
-        for (const a of agents) {
-          const ws = String(a.workspace ?? "");
-          const parts = ws.split("/").filter(Boolean);
-          const wsPart = parts.find((p) => p.startsWith("workspace-")) ?? "";
-          if (!wsPart) continue;
-          const teamId = wsPart.slice("workspace-".length);
-          if (teamId && teamId !== "workspace") s.add(teamId);
-        }
-
-        setTeamIds(Array.from(s).sort());
-      } catch {
-        setTeamIds([]);
-      }
-    })();
-  }, []);
-
-  const globalNav = [
-    {
-      href: `/`,
-      label: "Home",
-      icon: (
-        <Icon>
-          <svg viewBox="0 0 24 24" className="h-6 w-6" fill="none" stroke="currentColor" strokeWidth="2">
-            <path d="M3 11l9-8 9 8" />
-            <path d="M5 10v10h14V10" />
-          </svg>
-        </Icon>
-      ),
-    },
-    {
-      href: `/recipes`,
-      label: "Recipes",
-      icon: (
-        <Icon>
-          <svg viewBox="0 0 24 24" className="h-6 w-6" fill="none" stroke="currentColor" strokeWidth="2">
-            <path d="M6 4h12v16H6z" />
-            <path d="M9 8h6" />
-            <path d="M9 12h6" />
-          </svg>
-        </Icon>
-      ),
-    },
-    {
-      href: `/tickets`,
-      label: "Tickets",
-      icon: (
-        <Icon>
-          <svg viewBox="0 0 24 24" className="h-6 w-6" fill="none" stroke="currentColor" strokeWidth="2">
-            <path d="M4 7h16v4a2 2 0 0 1 0 4v4H4v-4a2 2 0 0 0 0-4z" />
-          </svg>
-        </Icon>
-      ),
-    },
-    {
-      href: `/goals`,
-      label: "Goals",
-      icon: (
-        <Icon>
-          <svg viewBox="0 0 24 24" className="h-6 w-6" fill="none" stroke="currentColor" strokeWidth="2">
-            <circle cx="12" cy="12" r="9" />
-            <path d="M12 7v5l3 3" />
-          </svg>
-        </Icon>
-      ),
-    },
-    {
-      href: `/cron-jobs`,
-      label: "Cron jobs",
-      icon: (
-        <Icon>
-          <svg viewBox="0 0 24 24" className="h-6 w-6" fill="none" stroke="currentColor" strokeWidth="2">
-            <circle cx="12" cy="12" r="9" />
-            <path d="M12 7v5" />
-          </svg>
-        </Icon>
-      ),
-    },
-    {
-      href: `/settings`,
-      label: "Settings",
-      icon: (
-        <Icon>
-          <svg viewBox="0 0 24 24" className="h-6 w-6" fill="none" stroke="currentColor" strokeWidth="2">
-            <path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z" />
-            <path d="M19.4 15a7.9 7.9 0 0 0 .1-1l2-1.5-2-3.5-2.4.5a7.8 7.8 0 0 0-1.7-1L13.5 3h-4L8.6 6.5a7.8 7.8 0 0 0-1.7 1L4.5 7l-2 3.5 2 1.5a7.9 7.9 0 0 0 .1 1l-2 1.5 2 3.5 2.4-.5a7.8 7.8 0 0 0 1.7 1L10.5 21h4l.9-3.5a7.8 7.8 0 0 0 1.7-1l2.4.5 2-3.5-2-1.5Z" />
-          </svg>
-        </Icon>
-      ),
-    },
-  ];
-
-  const sideWidth = collapsed ? "w-16" : "w-72";
-
-  return (
-    <ToastProvider>
-      <div className="flex h-dvh w-dvw overflow-hidden">
-        <aside className={`flex shrink-0 flex-col border-r border-[color:var(--ck-border-subtle)] bg-[color:var(--ck-bg-glass)] backdrop-blur-[var(--ck-glass-blur)] ${sideWidth}`}>
-          <div className="flex h-14 items-center justify-between gap-2 border-b border-[color:var(--ck-border-subtle)] px-3">
-            <Link href="/" className="text-sm font-semibold tracking-tight" title="Home">
-              {collapsed ? "CK" : "Claw Kitchen"}
-            </Link>
-            <button
-              onClick={toggleCollapsed}
-              className="rounded-[var(--ck-radius-sm)] px-2 py-1 text-sm text-[color:var(--ck-text-secondary)] hover:bg-white/5 hover:text-[color:var(--ck-text-primary)]"
-              title={collapsed ? "Expand" : "Collapse"}
-            >
-              {collapsed ? "»" : "«"}
-            </button>
-          </div>
-
-          <div className="border-b border-[color:var(--ck-border-subtle)] p-2">
-            {collapsed ? (
-              <button
-                className="w-full rounded-[var(--ck-radius-sm)] bg-white/5 px-2 py-2 text-xs font-medium text-[color:var(--ck-text-secondary)] hover:bg-white/10"
-                title={currentTeamId ? `Team: ${currentTeamId}` : "Select team"}
-                onClick={() => {
-                  if (teamIds[0]) router.push(`/teams/${encodeURIComponent(teamIds[0])}`);
-                }}
-              >
-                👥
-              </button>
-            ) : (
-              <div className="flex flex-col gap-1">
-                <div className="px-2 pt-1 text-xs font-semibold uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">
-                  Team
-                </div>
-                <select
-                  value={currentTeamId ?? ""}
-                  onChange={(e) => {
-                    const id = e.target.value;
-                    if (id) router.push(`/teams/${encodeURIComponent(id)}`);
-                  }}
-                  className="w-full rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 px-2 py-2 text-sm text-[color:var(--ck-text-primary)]"
-                >
-                  <option value="">(select)</option>
-                  {teamIds.map((id) => (
-                    <option key={id} value={id}>
-                      {id}
-                    </option>
-                  ))}
-                </select>
-              </div>
-            )}
-          </div>
-
-          <nav className="min-h-0 flex-1 overflow-auto p-2">
-            <div className="mt-2 px-2 pb-2 pt-2">
-              {/* section label intentionally omitted */}
-            </div>
-            {globalNav.map((it) => (
-              <SideNavLink
-                key={it.href}
-                href={it.href}
-                label={it.label}
-                icon={<span aria-hidden>{it.icon}</span>}
-                collapsed={collapsed}
-                active={pathname === it.href || pathname.startsWith(it.href + "/")}
-              />
-            ))}
-          </nav>
-
-          <div className="flex items-center justify-between gap-2 border-t border-[color:var(--ck-border-subtle)] p-2">
-            <a
-              href="https://github.com/JIGGAI/ClawRecipes/tree/main/docs"
-              target="_blank"
-              rel="noreferrer"
-              className={
-                collapsed
-                  ? "mx-auto rounded-[var(--ck-radius-sm)] px-2 py-2 text-sm text-[color:var(--ck-text-secondary)] hover:bg-white/5 hover:text-[color:var(--ck-text-primary)]"
-                  : "rounded-[var(--ck-radius-sm)] px-3 py-2 text-sm font-medium text-[color:var(--ck-text-secondary)] hover:bg-white/5 hover:text-[color:var(--ck-text-primary)]"
-              }
-              title="Docs"
-            >
-              {collapsed ? "📖" : "Docs"}
-            </a>
-            {collapsed ? null : <ThemeToggle />}
-          </div>
-        </aside>
-
-        <div className="min-w-0 flex-1">
-          <main className="h-full overflow-auto p-4 md:p-6">
-            <ErrorBoundary>{children}</ErrorBoundary>
-          </main>
-        </div>
-      </div>
-    </ToastProvider>
-  );
-}

package/src/components/ConfirmationModal.tsx

@@ -1,81 +0,0 @@
-"use client";
-
-import { createPortal } from "react-dom";
-
-/** Shared confirmation modal shell: overlay, title, body, optional error, Cancel + Confirm buttons. */
-export function ConfirmationModal({
-  open,
-  onClose,
-  title,
-  children,
-  error,
-  confirmLabel,
-  confirmBusyLabel,
-  onConfirm,
-  confirmDisabled,
-  busy,
-  confirmButtonClassName,
-}: {
-  open: boolean;
-  onClose: () => void;
-  title: string;
-  children: React.ReactNode;
-  /** Optional error message to show above footer */
-  error?: string | null;
-  confirmLabel: string;
-  confirmBusyLabel?: string;
-  onConfirm: () => void;
-  confirmDisabled?: boolean;
-  busy?: boolean;
-  /** Override confirm button styles (default: accent red) */
-  confirmButtonClassName?: string;
-}) {
-  if (!open) return null;
-
-  const isDisabled = confirmDisabled ?? false;
-  const isBusy = busy ?? false;
-  const btnLabel = isBusy && confirmBusyLabel ? confirmBusyLabel : confirmLabel;
-  const confirmClass =
-    confirmButtonClassName ??
-    "rounded-[var(--ck-radius-sm)] bg-[var(--ck-accent-red)] px-3 py-2 text-sm font-medium text-white shadow-[var(--ck-shadow-1)] transition-colors hover:bg-[var(--ck-accent-red-hover)] disabled:opacity-50";
-
-  const titleId = "confirmation-modal-title";
-  return createPortal(
-    <div className="fixed inset-0 z-[200]">
-      <div className="fixed inset-0 bg-black/60" onClick={onClose} aria-hidden="true" />
-      <div className="fixed inset-0 overflow-y-auto" role="dialog" aria-modal="true" aria-labelledby={titleId}>
-        <div className="flex min-h-full items-center justify-center p-4">
-          <div className="w-full max-w-lg rounded-2xl border border-white/10 bg-[color:var(--ck-bg-glass-strong)] p-5 shadow-[var(--ck-shadow-2)]">
-            <h2 id={titleId} className="text-lg font-semibold text-[color:var(--ck-text-primary)]">{title}</h2>
-            {children}
-
-            {error ? (
-              <div className="mt-4 rounded-[var(--ck-radius-sm)] border border-red-400/30 bg-red-500/10 p-3 text-sm text-red-100">
-                {error}
-              </div>
-            ) : null}
-
-            <div className="mt-6 flex items-center justify-end gap-2">
-              <button
-                type="button"
-                onClick={onClose}
-                className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 px-3 py-2 text-sm font-medium text-[color:var(--ck-text-primary)] hover:bg-white/10"
-              >
-                Cancel
-              </button>
-              <button
-                type="button"
-                disabled={isDisabled || isBusy}
-                onClick={onConfirm}
-                className={confirmClass}
-              >
-                {btnLabel}
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>,
-    document.body
-  );
-}

package/src/components/DeleteEntityModal.tsx

@@ -1,41 +0,0 @@
-"use client";
-
-import { ConfirmationModal } from "./ConfirmationModal";
-
-/** Shared delete confirmation modal: title, entity label in code, body text. */
-export function DeleteEntityModal({
-  open,
-  onClose,
-  title,
-  entityLabel,
-  bodyText,
-  onConfirm,
-  busy,
-  error,
-}: {
-  open: boolean;
-  onClose: () => void;
-  title: string;
-  entityLabel: string;
-  bodyText: string;
-  onConfirm: () => void;
-  busy?: boolean;
-  error?: string | null;
-}) {
-  return (
-    <ConfirmationModal
-      open={open}
-      onClose={onClose}
-      title={title}
-      confirmLabel="Delete"
-      confirmBusyLabel="Deleting…"
-      onConfirm={onConfirm}
-      busy={busy}
-      error={error ?? undefined}
-    >
-      <p className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">
-        {title} <code className="font-mono">{entityLabel}</code>? {bodyText}
-      </p>
-    </ConfirmationModal>
-  );
-}

package/src/components/ErrorBoundary.tsx

@@ -1,70 +0,0 @@
-"use client";
-
-import React from "react";
-import Link from "next/link";
-
-type Props = {
-  children: React.ReactNode;
-  fallback?: React.ReactNode;
-};
-
-type State = {
-  hasError: boolean;
-  error: Error | null;
-};
-
-/**
- * React Error Boundary for graceful crash handling.
- * Catches runtime errors in child components and shows a fallback UI.
- */
-export class ErrorBoundary extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = { hasError: false, error: null };
-  }
-
-  static getDerivedStateFromError(error: Error): State {
-    return { hasError: true, error };
-  }
-
-  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    console.error("ErrorBoundary caught:", error, errorInfo);
-  }
-
-  render() {
-    if (this.state.hasError && this.state.error) {
-      if (this.props.fallback) {
-        return this.props.fallback;
-      }
-      return (
-        <div className="ck-glass mx-auto max-w-2xl p-6 sm:p-8">
-          <h1 className="text-xl font-semibold tracking-tight text-[color:var(--ck-text-primary)]">
-            Something went wrong
-          </h1>
-          <p className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">
-            An unexpected error occurred. You can try refreshing the page or go back home.
-          </p>
-          <pre className="mt-4 overflow-auto rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 p-3 font-mono text-xs text-[color:var(--ck-text-secondary)]">
-            {this.state.error.message}
-          </pre>
-          <div className="mt-6 flex flex-wrap gap-3">
-            <button
-              type="button"
-              onClick={() => window.location.reload()}
-              className="rounded-[var(--ck-radius-sm)] bg-[var(--ck-accent-red)] px-4 py-2 text-sm font-medium text-white shadow-[var(--ck-shadow-1)] hover:bg-[var(--ck-accent-red)]/90"
-            >
-              Refresh page
-            </button>
-            <Link
-              href="/"
-              className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 px-4 py-2 text-sm font-medium text-[color:var(--ck-text-primary)] shadow-[var(--ck-shadow-1)] hover:bg-white/10"
-            >
-              Go home
-            </Link>
-          </div>
-        </div>
-      );
-    }
-    return this.props.children;
-  }
-}

package/src/components/FileListWithOptionalToggle.tsx

@@ -1,86 +0,0 @@
-"use client";
-
-export type FileListWithOptionalToggleEntry = {
-  name: string;
-  missing: boolean;
-  required?: boolean;
-};
-
-function getFileButtonClass(selectedFileName: string, fName: string): string {
-  const isSelected = selectedFileName === fName;
-  const base = "w-full rounded-[var(--ck-radius-sm)] px-3 py-2 text-left text-sm";
-  if (isSelected) {
-    return `${base} bg-white/10 text-[color:var(--ck-text-primary)]`;
-  }
-  return `${base} text-[color:var(--ck-text-secondary)] hover:bg-white/5`;
-}
-
-export function FileListWithOptionalToggle({
-  title,
-  files,
-  loading,
-  showOptionalFiles,
-  onShowOptionalChange,
-  selectedFileName,
-  onSelectFile,
-  renderItemExtra,
-}: {
-  title: string;
-  files: FileListWithOptionalToggleEntry[];
-  loading?: boolean;
-  showOptionalFiles: boolean;
-  onShowOptionalChange: (v: boolean) => void;
-  selectedFileName: string;
-  onSelectFile: (name: string) => void;
-  renderItemExtra?: (f: FileListWithOptionalToggleEntry) => React.ReactNode;
-}) {
-  const filtered = showOptionalFiles ? files : files.filter((f) => f.required || !f.missing);
-
-  return (
-    <div className="ck-glass-strong p-4">
-      <div className="flex items-center justify-between gap-3">
-        <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">{title}</div>
-        <label className="flex items-center gap-2 text-xs text-[color:var(--ck-text-secondary)]">
-          <input
-            type="checkbox"
-            checked={showOptionalFiles}
-            onChange={(e) => onShowOptionalChange(e.target.checked)}
-          />
-          Show optional
-        </label>
-      </div>
-      <div className="mt-2 text-xs text-[color:var(--ck-text-tertiary)]">
-        Default view hides optional missing files to reduce noise.
-      </div>
-      <ul className="mt-3 space-y-1">
-        {loading ? <li className="text-sm text-[color:var(--ck-text-secondary)]">Loading…</li> : null}
-        {filtered.map((f) => (
-          <li key={f.name}>
-            <div className="flex items-center gap-2">
-              <button
-                type="button"
-                onClick={() => onSelectFile(f.name)}
-                className={getFileButtonClass(selectedFileName, f.name)}
-              >
-                <span
-                  className={
-                    f.required ? "text-[color:var(--ck-text-primary)]" : "text-[color:var(--ck-text-secondary)]"
-                  }
-                >
-                  {f.name}
-                </span>
-                <span className="ml-2 text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">
-                  {f.required ? "required" : "optional"}
-                </span>
-                {f.missing ? (
-                  <span className="ml-2 text-xs text-[color:var(--ck-text-tertiary)]">missing</span>
-                ) : null}
-              </button>
-              {renderItemExtra?.(f)}
-            </div>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}