@jiggai/kitchen 0.1.12 → 0.2.0

package/src/app/goals/[id]/goal-editor.tsx

@@ -1,140 +1,91 @@
 "use client";
 
 import Link from "next/link";
+import { GoalFormCard, GoalFormFields } from "@/components/GoalFormFields";
+import { errorMessage } from "@/lib/errors";
+import { fetchJson } from "@/lib/fetch-json";
+import { type GoalFrontmatter, type GoalStatus, useGoalFormState } from "@/lib/goals-client";
 import { useRouter } from "next/navigation";
-import { useEffect, useMemo, useState } from "react";
-
-type GoalStatus = "planned" | "active" | "done";
-
-type Goal = {
-  id: string;
-  title: string;
-  status: GoalStatus;
-  tags: string[];
-  teams: string[];
-  updatedAt: string;
-};
+import { useCallback, useEffect, useState } from "react";
 
 export default function GoalEditor({ goalId }: { goalId: string }) {
   const router = useRouter();
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
-
-  const [title, setTitle] = useState("");
-  const [status, setStatus] = useState<GoalStatus>("planned");
-  const [tagsRaw, setTagsRaw] = useState("");
-  const [teamsRaw, setTeamsRaw] = useState("");
-  const [body, setBody] = useState("");
   const [updatedAt, setUpdatedAt] = useState<string | null>(null);
 
-  const tags = useMemo(
-    () => tagsRaw.split(",").map((s) => s.trim()).filter(Boolean),
-    [tagsRaw]
-  );
-  const teams = useMemo(
-    () => teamsRaw.split(",").map((s) => s.trim()).filter(Boolean),
-    [teamsRaw]
-  );
-
-  useEffect(() => {
-    let cancelled = false;
-    (async () => {
-      setLoading(true);
-      setError(null);
-      try {
-        const res = await fetch(`/api/goals/${encodeURIComponent(goalId)}`, { cache: "no-store" });
-        const data = (await res.json()) as unknown;
-        const obj = (data && typeof data === "object") ? (data as Record<string, unknown>) : {};
-        if (cancelled) return;
-
-        if (!res.ok) {
-          setError(String(obj.error ?? "Failed to load goal"));
-          setLoading(false);
-          return;
-        }
-
-        const g = (obj.goal ?? {}) as Goal;
-        setTitle(g.title ?? "");
-        setStatus((g.status as GoalStatus) ?? "planned");
-        setTagsRaw((g.tags ?? []).join(", "));
-        setTeamsRaw((g.teams ?? []).join(", "));
-        setBody(String(obj.body ?? ""));
-        setUpdatedAt(g.updatedAt ?? null);
-        setLoading(false);
-      } catch (e: unknown) {
-        if (cancelled) return;
-        const msg = e instanceof Error ? e.message : String(e);
-        setError(msg);
-        setLoading(false);
-      }
-    })();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [goalId]);
+  const { formState, tags, teams } = useGoalFormState();
+  const { setTitle, setStatus, setTagsRaw, setTeamsRaw, setBody } = formState;
 
-  async function reload() {
+  const loadGoal = useCallback(async () => {
     setLoading(true);
     setError(null);
-    const res = await fetch(`/api/goals/${encodeURIComponent(goalId)}`, { cache: "no-store" });
-    const data = (await res.json()) as unknown;
-    const obj = (data && typeof data === "object") ? (data as Record<string, unknown>) : {};
-    if (!res.ok) {
-      setError(String(obj.error ?? "Failed to load goal"));
+    try {
+      const data = await fetchJson<{ goal: GoalFrontmatter; body: string }>(
+        `/api/goals/${encodeURIComponent(goalId)}`,
+        { cache: "no-store" }
+      );
+      const g = data.goal;
+      setTitle(g.title ?? "");
+      setStatus((g.status as GoalStatus) ?? "planned");
+      setTagsRaw((g.tags ?? []).join(", "));
+      setTeamsRaw((g.teams ?? []).join(", "));
+      setBody(data.body ?? "");
+      setUpdatedAt(g.updatedAt ?? null);
+    } catch (e: unknown) {
+      setError(errorMessage(e));
+    } finally {
       setLoading(false);
-      return;
     }
-    const g = (obj.goal ?? {}) as Goal;
-    setTitle(g.title ?? "");
-    setStatus((g.status as GoalStatus) ?? "planned");
-    setTagsRaw((g.tags ?? []).join(", "));
-    setTeamsRaw((g.teams ?? []).join(", "));
-    setBody(String(obj.body ?? ""));
-    setUpdatedAt(g.updatedAt ?? null);
-    setLoading(false);
-  }
+  }, [goalId, setTitle, setStatus, setTagsRaw, setTeamsRaw, setBody]);
+
+  useEffect(() => {
+    void loadGoal();
+  }, [loadGoal]);
 
   async function save() {
     setSaving(true);
     setError(null);
-    const res = await fetch(`/api/goals/${encodeURIComponent(goalId)}`, {
-      method: "PUT",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({ title, status, tags, teams, body }),
-    });
-    const data = await res.json();
-    if (!res.ok) {
-      setError(data?.error ?? "Failed to save");
+    try {
+      const data = await fetchJson<{ goal: GoalFrontmatter }>(
+        `/api/goals/${encodeURIComponent(goalId)}`,
+        {
+          method: "PUT",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({
+            title: formState.title,
+            status: formState.status,
+            tags,
+            teams,
+            body: formState.body,
+          }),
+        }
+      );
+      setUpdatedAt(data.goal.updatedAt ?? null);
+      router.push("/goals");
+    } catch (e: unknown) {
+      setError(errorMessage(e));
+    } finally {
       setSaving(false);
-      return;
     }
-    const g = data.goal as Goal;
-    setUpdatedAt(g.updatedAt ?? null);
-    setSaving(false);
-
-    // Save should behave like an editor "submit": return to the list.
-    router.push("/goals");
   }
 
   async function promoteToInbox() {
     setSaving(true);
     setError(null);
-    const res = await fetch(`/api/goals/${encodeURIComponent(goalId)}/promote`, {
-      method: "POST",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({}),
-    });
-    const data = await res.json();
-    if (!res.ok) {
-      setError(data?.error ?? "Failed to promote");
+    try {
+      await fetchJson(`/api/goals/${encodeURIComponent(goalId)}/promote`, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({}),
+      });
+      await loadGoal();
+    } catch (e: unknown) {
+      setError(errorMessage(e));
+    } finally {
       setSaving(false);
-      return;
     }
-
-    await reload();
-    setSaving(false);
   }
 
   async function deleteThisGoal() {
@@ -143,15 +94,14 @@ export default function GoalEditor({ goalId }: { goalId: string }) {
 
     setSaving(true);
     setError(null);
-    const res = await fetch(`/api/goals/${encodeURIComponent(goalId)}`, { method: "DELETE" });
-    const data = await res.json();
-    if (!res.ok) {
-      setError(data?.error ?? "Failed to delete");
+    try {
+      await fetchJson(`/api/goals/${encodeURIComponent(goalId)}`, { method: "DELETE" });
+      router.push("/goals");
+    } catch (e: unknown) {
+      setError(errorMessage(e));
+    } finally {
       setSaving(false);
-      return;
     }
-
-    router.push("/goals");
   }
 
   return (
@@ -163,67 +113,9 @@ export default function GoalEditor({ goalId }: { goalId: string }) {
         <div className="text-xs text-[color:var(--ck-text-tertiary)] font-mono">{goalId}</div>
       </div>
 
-      <div className="ck-glass p-6 space-y-4">
-        <div>
-          <div className="text-xs text-[color:var(--ck-text-tertiary)]">Title</div>
-          <input
-            className="mt-1 w-full rounded-[var(--ck-radius-sm)] border border-[color:var(--ck-border-subtle)] bg-transparent px-3 py-2 text-sm"
-            value={title}
-            onChange={(e) => setTitle(e.target.value)}
-            placeholder="Goal title"
-          />
-        </div>
-
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
-          <div>
-            <div className="text-xs text-[color:var(--ck-text-tertiary)]">Status</div>
-            <select
-              className="mt-1 w-full rounded-[var(--ck-radius-sm)] border border-[color:var(--ck-border-subtle)] bg-transparent px-3 py-2 text-sm"
-              value={status}
-              onChange={(e) => setStatus(e.target.value as GoalStatus)}
-            >
-              <option value="planned">Planned</option>
-              <option value="active">Active</option>
-              <option value="done">Done</option>
-            </select>
-          </div>
-          <div>
-            <div className="text-xs text-[color:var(--ck-text-tertiary)]">Teams (comma-separated)</div>
-            <input
-              className="mt-1 w-full rounded-[var(--ck-radius-sm)] border border-[color:var(--ck-border-subtle)] bg-transparent px-3 py-2 text-sm"
-              value={teamsRaw}
-              onChange={(e) => setTeamsRaw(e.target.value)}
-              placeholder="development-team, marketing-team"
-            />
-          </div>
-          <div>
-            <div className="text-xs text-[color:var(--ck-text-tertiary)]">Tags (comma-separated)</div>
-            <input
-              className="mt-1 w-full rounded-[var(--ck-radius-sm)] border border-[color:var(--ck-border-subtle)] bg-transparent px-3 py-2 text-sm"
-              value={tagsRaw}
-              onChange={(e) => setTagsRaw(e.target.value)}
-              placeholder="onboarding, growth"
-            />
-          </div>
-        </div>
-
-        <div>
-          <div className="flex items-center justify-between">
-            <div className="text-xs text-[color:var(--ck-text-tertiary)]">Body (markdown)</div>
-            <div className="text-xs text-[color:var(--ck-text-tertiary)]">
-              {updatedAt ? `updated ${new Date(updatedAt).toLocaleString()}` : ""}
-            </div>
-          </div>
-          <textarea
-            className="mt-1 h-[320px] 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>
-
-        {error ? <div className="text-sm text-red-300">{error}</div> : null}
-
+      <GoalFormCard
+        error={error}
+        actions={
         <div className="flex flex-wrap items-center gap-3">
           <button
             onClick={() => void save()}
@@ -233,7 +125,7 @@ export default function GoalEditor({ goalId }: { goalId: string }) {
             {saving ? "Saving…" : "Save"}
           </button>
           <button
-            onClick={() => void reload()}
+            onClick={() => void loadGoal()}
             disabled={saving}
             className="rounded-[var(--ck-radius-sm)] border border-[color:var(--ck-border-subtle)] px-3 py-2 text-sm"
           >
@@ -249,16 +141,19 @@ export default function GoalEditor({ goalId }: { goalId: string }) {
           <button
             onClick={() => void deleteThisGoal()}
             disabled={saving || loading}
-            className="rounded-[var(--ck-radius-sm)] border border-red-500/40 px-3 py-2 text-sm font-medium text-red-200"
+            className="rounded-[var(--ck-radius-sm)] border border-[color:rgba(255,59,48,0.45)] bg-[color:rgba(255,59,48,0.08)] px-3 py-2 text-sm font-medium text-[color:var(--ck-accent-red)] transition-colors hover:bg-[color:rgba(255,59,48,0.12)]"
           >
             Delete
           </button>
         </div>
-      </div>
+        }
+      >
+        <GoalFormFields formState={formState} updatedAt={updatedAt} />
+      </GoalFormCard>
 
       <div className="ck-glass p-6">
         <div className="text-sm font-medium">Preview</div>
-        <pre className="mt-2 whitespace-pre-wrap break-words text-sm leading-6 text-[color:var(--ck-text-primary)]">{body}</pre>
+        <pre className="mt-2 whitespace-pre-wrap break-words text-sm leading-6 text-[color:var(--ck-text-primary)]">{formState.body}</pre>
       </div>
 
       {loading ? <div className="text-sm text-[color:var(--ck-text-secondary)]">Loading…</div> : null}

package/src/app/goals/goals-client.tsx

@@ -1,17 +1,20 @@
 "use client";
 
 import Link from "next/link";
+import { errorMessage } from "@/lib/errors";
+import { fetchJson } from "@/lib/fetch-json";
+import { type GoalFrontmatter } from "@/lib/goals-client";
 import { useSearchParams } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
 
-type Goal = {
-  id: string;
-  title: string;
-  status: "planned" | "active" | "done";
-  tags: string[];
-  teams: string[];
-  updatedAt: string;
-};
+async function fetchGoals(): Promise<{ goals: GoalFrontmatter[]; error: string | null }> {
+  try {
+    const data = await fetchJson<{ goals?: GoalFrontmatter[] }>("/api/goals", { cache: "no-store" });
+    return { goals: data.goals ?? [], error: null };
+  } catch (e: unknown) {
+    return { goals: [], error: errorMessage(e) };
+  }
+}
 
 function Badge({ children }: { children: React.ReactNode }) {
   return (
@@ -22,7 +25,7 @@ function Badge({ children }: { children: React.ReactNode }) {
 }
 
 export default function GoalsClient() {
-  const [goals, setGoals] = useState<Goal[] | null>(null);
+  const [goals, setGoals] = useState<GoalFrontmatter[] | null>(null);
   const [error, setError] = useState<string | null>(null);
 
   const searchParams = useSearchParams();
@@ -34,25 +37,13 @@ export default function GoalsClient() {
     let cancelled = false;
     (async () => {
       try {
-        const res = await fetch("/api/goals", { cache: "no-store" });
-        const data = (await res.json()) as unknown;
+        const { goals: g, error: err } = await fetchGoals();
         if (cancelled) return;
-
-        const obj = (data && typeof data === "object") ? (data as Record<string, unknown>) : {};
-
-        if (!res.ok) {
-          const msg = obj.error ?? "Failed to load goals";
-          setError(String(msg));
-          setGoals([]);
-          return;
-        }
-
-        setError(null);
-        setGoals((obj.goals ?? []) as Goal[]);
+        setError(err);
+        setGoals(err ? [] : g);
       } catch (e: unknown) {
         if (cancelled) return;
-        const msg = e instanceof Error ? e.message : String(e);
-        setError(msg);
+        setError(errorMessage(e));
         setGoals([]);
       }
     })();
@@ -63,19 +54,16 @@ export default function GoalsClient() {
   }, []);
 
   async function reload() {
-    // reuse the same logic by forcing a page-level refetch
-    // (simple and avoids extra hooks)
     setGoals(null);
     setError(null);
-    const res = await fetch("/api/goals", { cache: "no-store" });
-    const data = (await res.json()) as unknown;
-    const obj = (data && typeof data === "object") ? (data as Record<string, unknown>) : {};
-    if (!res.ok) {
-      setError(String(obj.error ?? "Failed to load goals"));
+    try {
+      const { goals: g, error: err } = await fetchGoals();
+      setError(err);
+      setGoals(err ? [] : g);
+    } catch (e: unknown) {
+      setError(errorMessage(e));
       setGoals([]);
-      return;
     }
-    setGoals((obj.goals ?? []) as Goal[]);
   }
 
   const filtered = useMemo(() => {
@@ -96,7 +84,7 @@ export default function GoalsClient() {
     return c;
   }, [goals]);
 
-  function renderGoal(g: Goal) {
+  function renderGoal(g: GoalFrontmatter) {
     return (
       <Link
         key={g.id}
@@ -174,9 +162,10 @@ export default function GoalsClient() {
         <div className="ck-glass p-4 text-sm text-red-300">{error}</div>
       ) : null}
 
-      {goals == null ? (
+      {goals == null && (
         <div className="ck-glass p-6 text-sm text-[color:var(--ck-text-secondary)]">Loading…</div>
-      ) : filtered.length === 0 ? (
+      )}
+      {goals != null && filtered.length === 0 && (
         <div className="ck-glass p-6">
           <div className="text-sm text-[color:var(--ck-text-secondary)]">No goals yet.</div>
           <div className="mt-3">
@@ -185,9 +174,11 @@ export default function GoalsClient() {
             </Link>
           </div>
         </div>
-      ) : filterStatus !== "all" ? (
+      )}
+      {goals != null && filtered.length > 0 && filterStatus !== "all" && (
         <div className="space-y-3">{filtered.map(renderGoal)}</div>
-      ) : (
+      )}
+      {goals != null && filtered.length > 0 && filterStatus === "all" && (
         <div className="space-y-8">
           {(["active", "planned", "done"] as const).map((status) => {
             const section = filtered.filter((g) => g.status === status);

package/src/app/goals/new/page.tsx

@@ -1,65 +1,54 @@
 "use client";
 
 import Link from "next/link";
+import { GoalFormCard, GoalFormFields } from "@/components/GoalFormFields";
 import { useRouter } from "next/navigation";
 import { useMemo, useState } from "react";
-
-type GoalStatus = "planned" | "active" | "done";
-
-function slugify(input: string) {
-  return input
-    .toLowerCase()
-    .trim()
-    .replace(/[^a-z0-9\s-]/g, "")
-    .replace(/[\s_-]+/g, "-")
-    .replace(/-+/g, "-")
-    .replace(/^-+|-+$/g, "")
-    .slice(0, 64);
-}
+import { slugifyId } from "@/lib/slugify";
+import { errorMessage } from "@/lib/errors";
+import { fetchJson } from "@/lib/fetch-json";
+import { useGoalFormState } from "@/lib/goals-client";
 
 export default function NewGoalPage() {
   const router = useRouter();
 
   const [id, setId] = useState("");
-  const [title, setTitle] = useState("");
-  const [status, setStatus] = useState<GoalStatus>("planned");
-  const [tagsRaw, setTagsRaw] = useState("");
-  const [teamsRaw, setTeamsRaw] = useState("");
-  const [body, setBody] = useState(
-    "## Workflow\n<!-- goal-workflow -->\n- Use **Promote to inbox** to send this goal to the development-team inbox for scoping.\n- When promoted, set goal status to **active**.\n- Track implementation work via tickets (add links/IDs under a **Tickets** section in this goal).\n- When development is complete (all associated tickets marked done), set goal status to **done**.\n\n## Tickets\n- (add ticket links/ids)\n"
-  );
-
   const [error, setError] = useState<string | null>(null);
   const [saving, setSaving] = useState(false);
 
-  const tags = useMemo(() => tagsRaw.split(",").map((s) => s.trim()).filter(Boolean), [tagsRaw]);
-  const teams = useMemo(() => teamsRaw.split(",").map((s) => s.trim()).filter(Boolean), [teamsRaw]);
+  const defaultBody =
+    "## Workflow\n<!-- goal-workflow -->\n- Use **Promote to inbox** to send this goal to the development-team inbox for scoping.\n- When promoted, set goal status to **active**.\n- Track implementation work via tickets (add links/IDs under a **Tickets** section in this goal).\n- When development is complete (all associated tickets marked done), set goal status to **done**.\n\n## Tickets\n- (add ticket links/ids)\n";
+  const { formState, tags, teams } = useGoalFormState({ body: defaultBody });
+  const { title } = formState;
 
   const suggestedId = useMemo(() => {
-    const s = slugify(title);
+    const s = slugifyId(title, 64);
     return s.length >= 2 ? s : "";
   }, [title]);
 
   async function create() {
     setSaving(true);
     setError(null);
-
     const finalId = id.trim();
-
-    const res = await fetch("/api/goals", {
-      method: "POST",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({ id: finalId, title, status, tags, teams, body }),
-    });
-
-    const data = await res.json();
-    if (!res.ok) {
-      setError(data?.error ?? "Failed to create goal");
+    try {
+      await fetchJson("/api/goals", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          id: finalId,
+          title: formState.title,
+          status: formState.status,
+          tags,
+          teams,
+          body: formState.body,
+        }),
+      });
+      router.push(`/goals/${encodeURIComponent(finalId)}`);
+    } catch (e: unknown) {
+      setError(errorMessage(e));
+    } finally {
       setSaving(false);
-      return;
     }
-
-    router.push(`/goals/${encodeURIComponent(finalId)}`);
   }
 
   return (
@@ -68,93 +57,25 @@ export default function NewGoalPage() {
         ← Back
       </Link>
 
-      <div className="ck-glass p-6 space-y-4">
+      <GoalFormCard
+        error={error}
+        actions={
+          <button
+            onClick={() => void create()}
+            disabled={saving}
+            className="rounded-[var(--ck-radius-sm)] bg-[var(--ck-accent-red)] px-3 py-2 text-sm font-medium text-white disabled:opacity-50"
+          >
+            {saving ? "Creating…" : "Create"}
+          </button>
+        }
+      >
         <h1 className="text-xl font-semibold tracking-tight">Create goal</h1>
-
-        <div>
-          <div className="text-xs text-[color:var(--ck-text-tertiary)]">ID</div>
-          <input
-            className="mt-1 w-full rounded-[var(--ck-radius-sm)] border border-[color:var(--ck-border-subtle)] bg-transparent px-3 py-2 text-sm font-mono"
-            value={id}
-            onChange={(e) => setId(e.target.value)}
-            placeholder="increase-trial-activation"
-          />
-          <div className="mt-1 text-xs text-[color:var(--ck-text-tertiary)]">
-            Lowercase letters, numbers, hyphens. Stored as <code className="font-mono">{id || "<id>"}.md</code>.
-            {suggestedId && !id.trim() ? (
-              <>
-                {" "}Suggested:{" "}
-                <button className="underline" onClick={() => setId(suggestedId)}>
-                  {suggestedId}
-                </button>
-              </>
-            ) : null}
-          </div>
-        </div>
-
-        <div>
-          <div className="text-xs text-[color:var(--ck-text-tertiary)]">Title</div>
-          <input
-            className="mt-1 w-full rounded-[var(--ck-radius-sm)] border border-[color:var(--ck-border-subtle)] bg-transparent px-3 py-2 text-sm"
-            value={title}
-            onChange={(e) => setTitle(e.target.value)}
-            placeholder="Increase trial activation"
-          />
-        </div>
-
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
-          <div>
-            <div className="text-xs text-[color:var(--ck-text-tertiary)]">Status</div>
-            <select
-              className="mt-1 w-full rounded-[var(--ck-radius-sm)] border border-[color:var(--ck-border-subtle)] bg-transparent px-3 py-2 text-sm"
-              value={status}
-              onChange={(e) => setStatus(e.target.value as GoalStatus)}
-            >
-              <option value="planned">Planned</option>
-              <option value="active">Active</option>
-              <option value="done">Done</option>
-            </select>
-          </div>
-          <div>
-            <div className="text-xs text-[color:var(--ck-text-tertiary)]">Teams (comma-separated)</div>
-            <input
-              className="mt-1 w-full rounded-[var(--ck-radius-sm)] border border-[color:var(--ck-border-subtle)] bg-transparent px-3 py-2 text-sm"
-              value={teamsRaw}
-              onChange={(e) => setTeamsRaw(e.target.value)}
-              placeholder="development-team, marketing-team"
-            />
-          </div>
-          <div>
-            <div className="text-xs text-[color:var(--ck-text-tertiary)]">Tags (comma-separated)</div>
-            <input
-              className="mt-1 w-full rounded-[var(--ck-radius-sm)] border border-[color:var(--ck-border-subtle)] bg-transparent px-3 py-2 text-sm"
-              value={tagsRaw}
-              onChange={(e) => setTagsRaw(e.target.value)}
-              placeholder="onboarding, growth"
-            />
-          </div>
-        </div>
-
-        <div>
-          <div className="text-xs text-[color:var(--ck-text-tertiary)]">Body (markdown)</div>
-          <textarea
-            className="mt-1 h-[260px] 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>
-
-        {error ? <div className="text-sm text-red-300">{error}</div> : null}
-
-        <button
-          onClick={() => void create()}
-          disabled={saving}
-          className="rounded-[var(--ck-radius-sm)] bg-[var(--ck-accent-red)] px-3 py-2 text-sm font-medium text-white disabled:opacity-50"
-        >
-          {saving ? "Creating…" : "Create"}
-        </button>
-      </div>
+        <GoalFormFields
+          formState={formState}
+          idField={{ id, setId, suggestedId: suggestedId || undefined }}
+          bodyHeight="h-[260px]"
+        />
+      </GoalFormCard>
     </div>
   );
 }

package/src/app/layout.tsx

@@ -16,6 +16,14 @@ const geistMono = Geist_Mono({
 export const metadata: Metadata = {
   title: "Claw Kitchen",
   description: "Local-first UI for authoring ClawRecipes recipes and scaffolding agents/teams.",
+  icons: {
+    icon: [
+      { url: "/favicon.ico", sizes: "any" },
+      { url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
+      { url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
+    ],
+    apple: "/apple-touch-icon.png",
+  },
 };
 
 export default function RootLayout({