@jiggai/kitchen 0.1.12 → 0.2.0

package/src/components/AppShell.tsx

@@ -1,65 +1,286 @@
 "use client";
 
 import Link from "next/link";
-import { usePathname } from "next/navigation";
+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 NavLink({ href, label }: { href: string; label: string }) {
-  const pathname = usePathname();
-  const active = pathname === href || (href !== "/" && pathname.startsWith(href));
+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={
-        "rounded-[var(--ck-radius-sm)] px-3 py-1.5 text-sm font-medium transition-colors " +
-        (active
-          ? "bg-[var(--ck-accent-red)] text-white"
-          : "text-[color:var(--ck-text-secondary)] hover:bg-[color:var(--ck-bg-glass)] hover:text-[color:var(--ck-text-primary)]")
+        (
+          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")
       }
     >
-      {label}
+      {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="min-h-screen">
-      <header className="sticky top-0 z-50 border-b border-[color:var(--ck-border-subtle)] bg-[color:var(--ck-bg-glass)] backdrop-blur-[var(--ck-glass-blur)]">
-        <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-3">
-          <div className="flex items-center gap-3">
-            <Link href="/" className="text-sm font-semibold tracking-tight">
-              Claw Kitchen
+      <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>
-            <nav className="hidden items-center gap-1 sm:flex">
-              <NavLink href="/recipes" label="Recipes" />
-              <NavLink href="/tickets" label="Tickets" />
-              <NavLink href="/goals" label="Goals" />
-              {/* Channels hidden for release */}
-              <NavLink href="/cron-jobs" label="Cron jobs" />
-              <NavLink href="/settings" label="Settings" />
-            </nav>
+            <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="flex items-center gap-2">
+          <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="rounded-[var(--ck-radius-sm)] px-3 py-1.5 text-sm font-medium text-[color:var(--ck-text-secondary)] transition-colors hover:bg-[color:var(--ck-bg-glass)] hover:text-[color:var(--ck-text-primary)]"
+              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"
             >
-              Docs
+              {collapsed ? "📖" : "Docs"}
             </a>
-            <ThemeToggle />
+            {collapsed ? null : <ThemeToggle />}
           </div>
-        </div>
-      </header>
+        </aside>
 
-      <main className="mx-auto max-w-6xl px-4 py-8">{children}</main>
-    </div>
+        <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/{app/cron-jobs/DeleteCronJobModal.tsx → components/ConfirmationModal.tsx}

@@ -2,34 +2,52 @@
 
 import { createPortal } from "react-dom";
 
-export function DeleteCronJobModal({
+/** Shared confirmation modal shell: overlay, title, body, optional error, Cancel + Confirm buttons. */
+export function ConfirmationModal({
   open,
-  jobLabel,
   onClose,
+  title,
+  children,
+  error,
+  confirmLabel,
+  confirmBusyLabel,
   onConfirm,
+  confirmDisabled,
   busy,
-  error,
+  confirmButtonClassName,
 }: {
   open: boolean;
-  jobLabel: string;
-  busy?: boolean;
-  error?: string | null;
   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} />
-      <div className="fixed inset-0 overflow-y-auto">
+      <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)]">
-            <div className="text-lg font-semibold text-[color:var(--ck-text-primary)]">Delete cron job</div>
-            <p className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">
-              Delete cron job <code className="font-mono">{jobLabel}</code>? This removes it from the Gateway scheduler.
-              You can recreate it later.
-            </p>
+            <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">
@@ -47,17 +65,17 @@ export function DeleteCronJobModal({
               </button>
               <button
                 type="button"
-                disabled={busy}
+                disabled={isDisabled || isBusy}
                 onClick={onConfirm}
-                className="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)] hover:bg-[var(--ck-accent-red-hover)] disabled:opacity-50"
+                className={confirmClass}
               >
-                {busy ? "Deleting…" : "Delete"}
+                {btnLabel}
               </button>
             </div>
           </div>
         </div>
       </div>
     </div>,
-    document.body,
+    document.body
   );
 }

package/src/components/DeleteEntityModal.tsx

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

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

@@ -0,0 +1,86 @@
+"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>
+  );
+}