@jiggai/kitchen 0.1.12 → 0.2.0

package/src/components/GoalFormFields.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useId } from "react";
+import type { GoalFormState, GoalStatus } from "@/lib/goals-client";
+
+export type { GoalFormState };
+
+/** Wraps goal form content with error display and action buttons. */
+export function GoalFormCard({
+  children,
+  error,
+  actions,
+}: {
+  children: ReactNode;
+  error: string | null;
+  actions: ReactNode;
+}) {
+  return (
+    <div className="ck-glass p-6 space-y-4">
+      {children}
+      {error ? <div className="text-sm text-red-300">{error}</div> : null}
+      {actions}
+    </div>
+  );
+}
+
+const inputClass =
+  "mt-1 w-full rounded-[var(--ck-radius-sm)] border border-[color:var(--ck-border-subtle)] bg-transparent px-3 py-2 text-sm";
+
+type Props = {
+  formState: GoalFormState;
+  /** When provided, renders the ID field (for create flow). */
+  idField?: { id: string; setId: (v: string) => void; suggestedId?: string };
+  /** When provided, shows updated timestamp next to body label. */
+  updatedAt?: string | null;
+  /** Body textarea height override (e.g. 260 for new page). */
+  bodyHeight?: string;
+};
+
+export function GoalFormFields({
+  formState,
+  idField,
+  updatedAt,
+  bodyHeight = "h-[320px]",
+}: Props) {
+  const { title, setTitle, status, setStatus, tagsRaw, setTagsRaw, teamsRaw, setTeamsRaw, body, setBody } = formState;
+  const baseId = useId();
+  const idInputId = `${baseId}-id`;
+  const titleInputId = `${baseId}-title`;
+  const statusSelectId = `${baseId}-status`;
+  const teamsInputId = `${baseId}-teams`;
+  const tagsInputId = `${baseId}-tags`;
+  const bodyTextareaId = `${baseId}-body`;
+  return (
+    <>
+      {idField ? (
+        <div>
+          <label htmlFor={idInputId} className="text-xs text-[color:var(--ck-text-tertiary)]">
+            ID
+          </label>
+          <input
+            id={idInputId}
+            className={`${inputClass} font-mono`}
+            value={idField.id}
+            onChange={(e) => idField.setId(e.target.value)}
+            placeholder="increase-trial-activation"
+            aria-describedby={`${baseId}-id-hint`}
+          />
+          <div id={`${baseId}-id-hint`} className="mt-1 text-xs text-[color:var(--ck-text-tertiary)]">
+            Lowercase letters, numbers, hyphens. Stored as <code className="font-mono">{idField.id || "<id>"}.md</code>
+            .
+            {idField.suggestedId && !idField.id.trim() ? (
+              <>
+                {" "}
+                Suggested:{" "}
+                <button type="button" className="underline" onClick={() => idField.setId(idField.suggestedId ?? "")}>
+                  {idField.suggestedId}
+                </button>
+              </>
+            ) : null}
+          </div>
+        </div>
+      ) : null}
+
+      <div>
+        <label htmlFor={titleInputId} className="text-xs text-[color:var(--ck-text-tertiary)]">
+          Title
+        </label>
+        <input
+          id={titleInputId}
+          className={inputClass}
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          placeholder={idField ? "Increase trial activation" : "Goal title"}
+        />
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+        <div>
+          <label htmlFor={statusSelectId} className="text-xs text-[color:var(--ck-text-tertiary)]">
+            Status
+          </label>
+          <select
+            id={statusSelectId}
+            className={inputClass}
+            value={status}
+            onChange={(e) => setStatus(e.target.value as GoalStatus)}
+            aria-label="Goal status"
+          >
+            <option value="planned">Planned</option>
+            <option value="active">Active</option>
+            <option value="done">Done</option>
+          </select>
+        </div>
+        <div>
+          <label htmlFor={teamsInputId} className="text-xs text-[color:var(--ck-text-tertiary)]">
+            Teams (comma-separated)
+          </label>
+          <input
+            id={teamsInputId}
+            className={inputClass}
+            value={teamsRaw}
+            onChange={(e) => setTeamsRaw(e.target.value)}
+            placeholder="development-team, marketing-team"
+          />
+        </div>
+        <div>
+          <label htmlFor={tagsInputId} className="text-xs text-[color:var(--ck-text-tertiary)]">
+            Tags (comma-separated)
+          </label>
+          <input
+            id={tagsInputId}
+            className={inputClass}
+            value={tagsRaw}
+            onChange={(e) => setTagsRaw(e.target.value)}
+            placeholder="onboarding, growth"
+          />
+        </div>
+      </div>
+
+      <div>
+        <div className="flex items-center justify-between">
+          <label htmlFor={bodyTextareaId} className="text-xs text-[color:var(--ck-text-tertiary)]">
+            Body (markdown)
+          </label>
+          {updatedAt != null ? (
+            <div className="text-xs text-[color:var(--ck-text-tertiary)]">
+              {updatedAt ? `updated ${new Date(updatedAt).toLocaleString()}` : ""}
+            </div>
+          ) : null}
+        </div>
+        <textarea
+          id={bodyTextareaId}
+          className={`mt-1 ${bodyHeight} w-full rounded-[var(--ck-radius-sm)] border border-[color:var(--ck-border-subtle)] bg-transparent px-3 py-2 font-mono text-sm`}
+          value={body}
+          onChange={(e) => setBody(e.target.value)}
+          placeholder="Write the goal here…"
+        />
+      </div>
+    </>
+  );
+}

package/src/components/ScaffoldOverlay.tsx

@@ -10,6 +10,12 @@ const stepLabel: Record<ScaffoldOverlayStep, string> = {
   3: "Serving them up hot…",
 };
 
+function getStepCircleClass(done: boolean, active: boolean): string {
+  if (done) return "bg-emerald-400";
+  if (active) return "bg-[var(--ck-accent-red)] animate-pulse";
+  return "bg-white/20";
+}
+
 export function ScaffoldOverlay({
   open,
   step,
@@ -54,16 +60,7 @@ export function ScaffoldOverlay({
               const done = s < step;
               return (
                 <div key={s} className="flex items-center gap-4">
-                  <div
-                    className={
-                      "h-4 w-4 rounded-full " +
-                      (done
-                        ? "bg-emerald-400"
-                        : active
-                          ? "bg-[var(--ck-accent-red)] animate-pulse"
-                          : "bg-white/20")
-                    }
-                  />
+                  <div className={"h-4 w-4 rounded-full " + getStepCircleClass(done, active)} />
                   <div className={done ? "text-[color:var(--ck-text-secondary)] line-through" : "text-[color:var(--ck-text-primary)]"}>
                     {stepLabel[s]}
                   </div>

package/src/components/ToastProvider.tsx

@@ -19,6 +19,18 @@ type ToastContextValue = {
 
 const ToastContext = createContext<ToastContextValue | null>(null);
 
+function randomHex(bytes: number): string {
+  const arr = new Uint8Array(bytes);
+  crypto.getRandomValues(arr);
+  return Array.from(arr, (b) => b.toString(16).padStart(2, "0")).join("");
+}
+
+function getToastMotionClass(state: "enter" | "show" | "leave"): string {
+  if (state === "enter") return "translate-x-[-16px] opacity-0";
+  if (state === "leave") return "translate-x-[-16px] opacity-0";
+  return "translate-x-0 opacity-100";
+}
+
 function ToastIcon({ kind }: { kind: ToastKind }) {
   if (kind === "success") {
     return (
@@ -69,23 +81,24 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
     [removeNow],
   );
 
+  const promoteToShow = useCallback((id: string) => {
+    setToasts((prev) => prev.map((x) => (x.id === id ? { ...x, state: "show" } : x)));
+  }, []);
+
   const push = useCallback(
     (t: Omit<Toast, "id">) => {
-      const id = `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+      const id = `${Date.now()}-${randomHex(8)}`;
       const toast: ToastInternal = { id, timeoutMs: 5000, state: "enter", ...t };
       setToasts((prev) => [toast, ...prev].slice(0, 4));
 
-      // Promote enter -> show on next tick so transitions apply.
-      window.setTimeout(() => {
-        setToasts((prev) => prev.map((x) => (x.id === id ? { ...x, state: "show" } : x)));
-      }, 10);
+      window.setTimeout(() => promoteToShow(id), 10);
 
       const ms = toast.timeoutMs;
       if (ms && ms > 0) {
         window.setTimeout(() => dismiss(id), ms);
       }
     },
-    [dismiss],
+    [dismiss, promoteToShow],
   );
 
   const value = useMemo(() => ({ push }), [push]);
@@ -100,20 +113,12 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
         className="pointer-events-none fixed inset-0 z-[100] flex items-end px-4 py-6 sm:p-6"
       >
         <div className="flex w-full flex-col items-start space-y-4">
-          {toasts.map((t) => {
-            const motion =
-              t.state === "enter"
-                ? "translate-x-[-16px] opacity-0"
-                : t.state === "leave"
-                  ? "translate-x-[-16px] opacity-0"
-                  : "translate-x-0 opacity-100";
-
-            return (
+          {toasts.map((t) => (
               <div
                 key={t.id}
                 className={
                   "pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg border bg-[color:var(--ck-toast-bg)] shadow-[var(--ck-shadow-2)] transition-all duration-200 ease-out border-[color:var(--ck-toast-border)] " +
-                  motion
+                  getToastMotionClass(t.state)
                 }
               >
                 <div className="p-4">
@@ -144,8 +149,7 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
                   </div>
                 </div>
               </div>
-            );
-          })}
+          ))}
         </div>
       </div>
     </ToastContext.Provider>

package/src/components/__tests__/ConfirmationModal.test.tsx

@@ -0,0 +1,109 @@
+import { describe, expect, it, vi, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup, within } from "@testing-library/react";
+import { ConfirmationModal } from "../ConfirmationModal";
+
+afterEach(cleanup);
+
+describe("ConfirmationModal", () => {
+  it("returns null when open is false", () => {
+    render(
+      <ConfirmationModal
+        open={false}
+        onClose={vi.fn()}
+        title="Confirm"
+        confirmLabel="Confirm"
+        onConfirm={vi.fn()}
+      >
+        <p>Body content</p>
+      </ConfirmationModal>
+    );
+    expect(screen.queryByText("Confirm")).toBeNull();
+  });
+
+  it("renders title, body, Cancel and Confirm when open", () => {
+    render(
+      <ConfirmationModal
+        open={true}
+        onClose={vi.fn()}
+        title="Delete item?"
+        confirmLabel="Delete"
+        onConfirm={vi.fn()}
+      >
+        <p>Are you sure?</p>
+      </ConfirmationModal>
+    );
+    expect(screen.getByText("Delete item?")).toBeTruthy();
+    expect(screen.getByText("Are you sure?")).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Cancel" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Delete" })).toBeTruthy();
+  });
+
+  it("calls onClose when Cancel clicked", () => {
+    const onClose = vi.fn();
+    render(
+      <ConfirmationModal
+        open={true}
+        onClose={onClose}
+        title="Confirm Close"
+        confirmLabel="OK"
+        onConfirm={vi.fn()}
+      >
+        <p>Body</p>
+      </ConfirmationModal>
+    );
+    const modal = screen.getByText("Confirm Close").closest(".rounded-2xl");
+    fireEvent.click(within(modal!).getByRole("button", { name: "Cancel" }));
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it("calls onConfirm when Confirm clicked", () => {
+    const onConfirm = vi.fn();
+    render(
+      <ConfirmationModal
+        open={true}
+        onClose={vi.fn()}
+        title="Confirm Submit"
+        confirmLabel="Submit"
+        onConfirm={onConfirm}
+      >
+        <p>Body</p>
+      </ConfirmationModal>
+    );
+    const modal = screen.getByText("Confirm Submit").closest(".rounded-2xl");
+    fireEvent.click(within(modal!).getByRole("button", { name: "Submit" }));
+    expect(onConfirm).toHaveBeenCalled();
+  });
+
+  it("shows error when provided", () => {
+    render(
+      <ConfirmationModal
+        open={true}
+        onClose={vi.fn()}
+        title="Confirm"
+        confirmLabel="Confirm"
+        onConfirm={vi.fn()}
+        error="Something failed"
+      >
+        <p>Body</p>
+      </ConfirmationModal>
+    );
+    expect(screen.getByText("Something failed")).toBeTruthy();
+  });
+
+  it("shows confirmBusyLabel when busy", () => {
+    render(
+      <ConfirmationModal
+        open={true}
+        onClose={vi.fn()}
+        title="Confirm"
+        confirmLabel="Confirm"
+        confirmBusyLabel="Confirming…"
+        onConfirm={vi.fn()}
+        busy={true}
+      >
+        <p>Body</p>
+      </ConfirmationModal>
+    );
+    expect(screen.getByRole("button", { name: "Confirming…" })).toBeTruthy();
+  });
+});

package/src/components/__tests__/ErrorBoundary.test.tsx

@@ -0,0 +1,39 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { ErrorBoundary } from "../ErrorBoundary";
+
+function ThrowError() {
+  throw new Error("Test error");
+}
+
+describe("ErrorBoundary", () => {
+  it("renders children when no error", () => {
+    render(
+      <ErrorBoundary>
+        <div data-testid="child">Hello</div>
+      </ErrorBoundary>
+    );
+    expect(screen.getByTestId("child").textContent).toBe("Hello");
+  });
+
+  it("renders fallback UI when child throws", () => {
+    render(
+      <ErrorBoundary>
+        <ThrowError />
+      </ErrorBoundary>
+    );
+    expect(screen.getByText("Something went wrong")).toBeTruthy();
+    expect(screen.getByText("Test error")).toBeTruthy();
+    expect(screen.getByRole("button", { name: /refresh page/i })).toBeTruthy();
+    expect(screen.getByRole("link", { name: /go home/i })).toBeTruthy();
+  });
+
+  it("renders custom fallback when provided", () => {
+    render(
+      <ErrorBoundary fallback={<div data-testid="custom">Custom fallback</div>}>
+        <ThrowError />
+      </ErrorBoundary>
+    );
+    expect(screen.getByTestId("custom").textContent).toBe("Custom fallback");
+  });
+});

package/src/components/__tests__/FileListWithOptionalToggle.test.tsx

@@ -0,0 +1,109 @@
+import { describe, expect, it, vi, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+
+afterEach(cleanup);
+import { FileListWithOptionalToggle } from "../FileListWithOptionalToggle";
+
+const files = [
+  { name: "SOUL.md", missing: false, required: true },
+  { name: "AGENTS.md", missing: true, required: false },
+  { name: "USER.md", missing: false, required: false },
+];
+
+describe("FileListWithOptionalToggle", () => {
+  it("renders title and file list", () => {
+    render(
+      <FileListWithOptionalToggle
+        title="Agent files"
+        files={files}
+        showOptionalFiles={true}
+        onShowOptionalChange={vi.fn()}
+        selectedFileName=""
+        onSelectFile={vi.fn()}
+      />
+    );
+    expect(screen.getByText("Agent files")).toBeTruthy();
+    expect(screen.getByText("SOUL.md")).toBeTruthy();
+    expect(screen.getByText("AGENTS.md")).toBeTruthy();
+    expect(screen.getByText("USER.md")).toBeTruthy();
+  });
+
+  it("filters optional missing files when showOptionalFiles is false", () => {
+    const { container } = render(
+      <FileListWithOptionalToggle
+        title="Filtered Files"
+        files={files}
+        showOptionalFiles={false}
+        onShowOptionalChange={vi.fn()}
+        selectedFileName=""
+        onSelectFile={vi.fn()}
+      />
+    );
+    expect(container.textContent).toContain("SOUL.md");
+    expect(container.textContent).toContain("USER.md");
+    expect(container.textContent).not.toContain("AGENTS.md");
+  });
+
+  it("shows all files when showOptionalFiles is true", () => {
+    const { container } = render(
+      <FileListWithOptionalToggle
+        title="All Files"
+        files={files}
+        showOptionalFiles={true}
+        onShowOptionalChange={vi.fn()}
+        selectedFileName=""
+        onSelectFile={vi.fn()}
+      />
+    );
+    expect(container.textContent).toContain("AGENTS.md");
+  });
+
+  it("calls onSelectFile when file clicked", () => {
+    const onSelectFile = vi.fn();
+    render(
+      <FileListWithOptionalToggle
+        title="Click Files"
+        files={files}
+        showOptionalFiles={true}
+        onShowOptionalChange={vi.fn()}
+        selectedFileName=""
+        onSelectFile={onSelectFile}
+      />
+    );
+    const buttons = screen.getAllByRole("button");
+    const soulButton = buttons.find((b) => b.textContent?.includes("SOUL.md"));
+    fireEvent.click(soulButton!);
+    expect(onSelectFile).toHaveBeenCalledWith("SOUL.md");
+  });
+
+  it("calls onShowOptionalChange when checkbox toggled", () => {
+    const onShowOptionalChange = vi.fn();
+    render(
+      <FileListWithOptionalToggle
+        title="Files"
+        files={files}
+        showOptionalFiles={false}
+        onShowOptionalChange={onShowOptionalChange}
+        selectedFileName=""
+        onSelectFile={vi.fn()}
+      />
+    );
+    fireEvent.click(screen.getByRole("checkbox"));
+    expect(onShowOptionalChange).toHaveBeenCalledWith(true);
+  });
+
+  it("shows Loading… when loading", () => {
+    render(
+      <FileListWithOptionalToggle
+        title="Files"
+        files={[]}
+        loading={true}
+        showOptionalFiles={true}
+        onShowOptionalChange={vi.fn()}
+        selectedFileName=""
+        onSelectFile={vi.fn()}
+      />
+    );
+    expect(screen.getByText("Loading…")).toBeTruthy();
+  });
+});

package/src/components/__tests__/GoalFormFields.test.tsx

@@ -0,0 +1,117 @@
+import { describe, expect, it, vi, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+
+afterEach(cleanup);
+import { GoalFormCard, GoalFormFields, type GoalFormState } from "../GoalFormFields";
+
+function makeFormState(overrides?: Partial<GoalFormState>): GoalFormState {
+  return {
+    title: "",
+    setTitle: vi.fn(),
+    status: "planned",
+    setStatus: vi.fn(),
+    tagsRaw: "",
+    setTagsRaw: vi.fn(),
+    teamsRaw: "",
+    setTeamsRaw: vi.fn(),
+    body: "",
+    setBody: vi.fn(),
+    ...overrides,
+  };
+}
+
+describe("GoalFormCard", () => {
+  it("renders children and actions", () => {
+    render(
+      <GoalFormCard error={null} actions={<button>Save</button>}>
+        <div data-testid="child">Form content</div>
+      </GoalFormCard>
+    );
+    expect(screen.getByTestId("child").textContent).toBe("Form content");
+    expect(screen.getByRole("button", { name: "Save" })).toBeTruthy();
+  });
+
+  it("shows error when provided", () => {
+    render(
+      <GoalFormCard error="Something went wrong" actions={<button>Save</button>}>
+        <div>Content</div>
+      </GoalFormCard>
+    );
+    expect(screen.getByText("Something went wrong")).toBeTruthy();
+  });
+
+  it("hides error when null", () => {
+    render(
+      <GoalFormCard error={null} actions={<button>Save</button>}>
+        <div data-testid="content">Content</div>
+      </GoalFormCard>
+    );
+    expect(screen.getByTestId("content")).toBeTruthy();
+    expect(screen.queryByText("Something went wrong")).toBeNull();
+  });
+});
+
+describe("GoalFormFields", () => {
+  it("renders title, status, tags, teams, body inputs", () => {
+    const formState = makeFormState({ title: "My goal", body: "Body text" });
+    render(<GoalFormFields formState={formState} />);
+
+    expect((screen.getByPlaceholderText("Goal title") as HTMLInputElement).value).toBe("My goal");
+    const textarea = screen.getByPlaceholderText("Write the goal here…");
+    expect((textarea as HTMLTextAreaElement).value).toBe("Body text");
+    expect(screen.getByRole("combobox")).toBeTruthy();
+  });
+
+  it("renders id field when idField provided", () => {
+    const setId = vi.fn();
+    const formState = makeFormState();
+    render(
+      <GoalFormFields
+        formState={formState}
+        idField={{ id: "my-id", setId, suggestedId: "suggested-id" }}
+      />
+    );
+    expect((screen.getByPlaceholderText("increase-trial-activation") as HTMLInputElement).value).toBe("my-id");
+  });
+
+  it("shows suggested id button when id is empty", () => {
+    const setId = vi.fn();
+    const formState = makeFormState();
+    render(
+      <GoalFormFields
+        formState={formState}
+        idField={{ id: "", setId, suggestedId: "suggested-id" }}
+      />
+    );
+    expect(screen.getByText("suggested-id")).toBeTruthy();
+  });
+
+  it("clicking suggested id button calls setId", () => {
+    const setId = vi.fn();
+    const formState = makeFormState();
+    render(
+      <GoalFormFields
+        formState={formState}
+        idField={{ id: "", setId, suggestedId: "suggested-id" }}
+      />
+    );
+    fireEvent.click(screen.getByText("suggested-id"));
+    expect(setId).toHaveBeenCalledWith("suggested-id");
+  });
+
+  it("calls setTitle when title input changes", () => {
+    const setTitle = vi.fn();
+    const formState = makeFormState({ setTitle });
+    render(<GoalFormFields formState={formState} />);
+    fireEvent.change(screen.getByPlaceholderText("Goal title"), { target: { value: "x" } });
+    expect(setTitle).toHaveBeenCalledWith("x");
+  });
+
+  it("calls setStatus when status select changes", () => {
+    const setStatus = vi.fn();
+    const formState = makeFormState({ setStatus });
+    render(<GoalFormFields formState={formState} />);
+    fireEvent.change(screen.getByRole("combobox"), { target: { value: "active" } });
+    expect(setStatus).toHaveBeenCalledWith("active");
+  });
+});