@jiggai/kitchen 0.1.12 → 0.2.0

package/src/app/tickets/TicketDetailClient.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState, useTransition } from "react";
+
+import { useToast } from "@/components/ToastProvider";
+import { errorMessage } from "@/lib/errors";
+import { fetchJson } from "@/lib/fetch-json";
+import { TicketAssignControl } from "@/app/tickets/[ticket]/TicketAssignControl";
+
+export function TicketDetailClient(props: {
+  teamId: string;
+  ticketId: string;
+  file: string;
+  markdown: string;
+  backHref?: string;
+  currentOwner?: string | null;
+}) {
+  const router = useRouter();
+  const toast = useToast();
+  const [isPending, startTransition] = useTransition();
+  const [error, setError] = useState<string | null>(null);
+  const [confirm, setConfirm] = useState<null | { kind: "goals" | "delete" }>(null);
+
+  async function moveToGoals() {
+    setError(null);
+    await fetchJson(`/api/teams/${encodeURIComponent(props.teamId)}/tickets/move-to-goals`, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ ticket: props.ticketId }),
+    });
+  }
+
+  async function deleteTicket() {
+    setError(null);
+    await fetchJson(`/api/teams/${encodeURIComponent(props.teamId)}/tickets/delete`, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ ticket: props.ticketId }),
+    });
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between gap-3">
+        <Link href={props.backHref ?? "/tickets"} className="text-sm font-medium hover:underline">
+          ← Back
+        </Link>
+        <span className="text-xs text-[color:var(--ck-text-tertiary)]">{props.file}</span>
+      </div>
+
+      {error ? (
+        <div className="ck-glass border border-[color:var(--ck-border-strong)] p-3 text-sm text-[color:var(--ck-text-primary)]">
+          {error}
+        </div>
+      ) : null}
+
+      {props.currentOwner !== undefined ? (
+        <TicketAssignControl teamId={props.teamId} ticket={props.ticketId} currentOwner={props.currentOwner ?? null} />
+      ) : null}
+
+      <div className="ck-glass p-4">
+        <div className="flex flex-wrap items-center justify-end gap-2">
+          <button
+            className="rounded border border-[color:var(--ck-border-subtle)] px-3 py-1.5 text-xs font-medium text-[color:var(--ck-text-secondary)] hover:border-[color:var(--ck-border-strong)]"
+            onClick={() => setConfirm({ kind: "goals" })}
+            disabled={isPending}
+          >
+            Move to Goals
+          </button>
+          <button
+            className="rounded border border-[color:var(--ck-accent-red)] bg-[color:var(--ck-accent-red-soft)] px-3 py-1.5 text-xs font-medium text-[color:var(--ck-accent-red)] hover:bg-[color:var(--ck-accent-red-soft-strong)]"
+            onClick={() => setConfirm({ kind: "delete" })}
+            disabled={isPending}
+          >
+            Delete Ticket
+          </button>
+        </div>
+      </div>
+
+      <div className="ck-glass p-6">
+        <pre className="whitespace-pre-wrap break-words text-sm leading-6 text-[color:var(--ck-text-primary)]">
+          {props.markdown}
+        </pre>
+      </div>
+
+      {confirm ? (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
+          <div className="ck-glass w-full max-w-lg rounded-[var(--ck-radius-md)] border border-[color:var(--ck-border-strong)] p-4">
+            <div className="text-sm font-semibold text-[color:var(--ck-text-primary)]">
+              {confirm.kind === "goals" ? "Move to Goals" : "Delete ticket"}
+            </div>
+
+            <div className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">
+              {confirm.kind === "goals" ? (
+                <>This will move the ticket out of the work lanes into <code>work/goals/</code> so it won’t be picked up by automation.</>
+              ) : (
+                <>This will permanently remove the ticket markdown file. Assignment stubs (if any) will be archived.</>
+              )}
+            </div>
+
+            <div className="mt-4 flex items-center justify-end gap-2">
+              <button
+                className="rounded border border-[color:var(--ck-border-subtle)] px-3 py-1.5 text-xs text-[color:var(--ck-text-secondary)]"
+                onClick={() => setConfirm(null)}
+                disabled={isPending}
+              >
+                Cancel
+              </button>
+              <button
+                className={
+                  confirm.kind === "delete"
+                    ? "rounded bg-[color:var(--ck-accent-red)] px-3 py-1.5 text-xs font-medium text-white"
+                    : "rounded bg-[color:var(--ck-accent)] px-3 py-1.5 text-xs font-medium text-black"
+                }
+                onClick={() => {
+                  const kind = confirm.kind;
+                  setConfirm(null);
+                  startTransition(() => {
+                    const op = kind === "goals" ? moveToGoals() : deleteTicket();
+                    op
+                      .then(() => {
+                        toast.push({
+                          kind: "success",
+                          message: kind === "delete" ? "Ticket deleted." : "Moved to Goals.",
+                        });
+                        if (kind === "delete") {
+                          router.push(props.backHref ?? "/tickets");
+                        } else {
+                          router.refresh();
+                        }
+                      })
+                      .catch((e: unknown) => setError(errorMessage(e)));
+                  });
+                }}
+                disabled={isPending}
+              >
+                Confirm
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/app/tickets/TicketsBoardClient.tsx

@@ -1,7 +1,6 @@
 "use client";
 
-import { useMemo, useState, useTransition } from "react";
-import { useRouter } from "next/navigation";
+import { useMemo, useState } from "react";
 import type { TicketStage, TicketSummary } from "@/lib/tickets";
 
 const STAGES: { key: TicketStage; label: string }[] = [
@@ -42,10 +41,13 @@ function formatAge(hours: number) {
   return `${Math.round(hours / 24)}d`;
 }
 
-export function TicketsBoardClient({ tickets }: { tickets: TicketSummary[] }) {
-  const router = useRouter();
-  const [isPending, startTransition] = useTransition();
-  const [error, setError] = useState<string | null>(null);
+export function TicketsBoardClient({
+  tickets,
+  basePath,
+}: {
+  tickets: TicketSummary[];
+  basePath: string;
+}) {
   const [dateFilter, setDateFilter] = useState<DateFilter>("30d");
   const [customFrom, setCustomFrom] = useState<string>("");
   const [customTo, setCustomTo] = useState<string>("");
@@ -106,20 +108,6 @@ export function TicketsBoardClient({ tickets }: { tickets: TicketSummary[] }) {
     return map;
   }, [filteredTickets]);
 
-  async function move(ticket: TicketSummary, to: TicketStage) {
-    setError(null);
-    const res = await fetch("/api/tickets/move", {
-      method: "POST",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({ ticket: ticket.id, to }),
-    });
-
-    if (!res.ok) {
-      const data = await res.json().catch(() => ({}));
-      throw new Error(data?.error ?? `Move failed (${res.status})`);
-    }
-  }
-
   return (
     <div className="space-y-4">
       <div className="flex flex-wrap items-center justify-between gap-3">
@@ -163,25 +151,15 @@ export function TicketsBoardClient({ tickets }: { tickets: TicketSummary[] }) {
               </label>
             </div>
           ) : null}
-
-          <div className="text-sm text-[color:var(--ck-text-secondary)]">{isPending ? "Updating…" : ""}</div>
         </div>
       </div>
 
-      {error ? (
-        <div className="ck-glass border border-[color:var(--ck-border-strong)] p-3 text-sm text-[color:var(--ck-text-primary)]">
-          {error}
-        </div>
-      ) : null}
-
       <div className="grid gap-4 lg:grid-cols-4">
         {STAGES.map(({ key, label }) => (
           <section key={key} className="ck-glass p-3">
             <div className="mb-3 flex items-center justify-between">
               <h2 className="text-sm font-semibold tracking-tight">{label}</h2>
-              <span className="text-xs text-[color:var(--ck-text-tertiary)]">
-                {byStage[key].length}
-              </span>
+              <span className="text-xs text-[color:var(--ck-text-tertiary)]">{byStage[key].length}</span>
             </div>
 
             <div className="space-y-2">
@@ -197,7 +175,7 @@ export function TicketsBoardClient({ tickets }: { tickets: TicketSummary[] }) {
                   className="rounded-[var(--ck-radius-sm)] border border-[color:var(--ck-border-subtle)] bg-[color:var(--ck-bg-glass-strong)] p-3"
                 >
                   <a
-                    href={`/tickets/${encodeURIComponent(t.id)}`}
+                    href={`${basePath}/${encodeURIComponent(t.id)}`}
                     className="block text-sm font-medium text-[color:var(--ck-text-primary)] hover:underline"
                   >
                     {String(t.number).padStart(4, "0")} — {t.title}
@@ -207,30 +185,6 @@ export function TicketsBoardClient({ tickets }: { tickets: TicketSummary[] }) {
                     <span>·</span>
                     <span>Age: {formatAge(t.ageHours)}</span>
                   </div>
-
-                  <div className="mt-2 flex items-center justify-between gap-2">
-                    <label className="text-xs text-[color:var(--ck-text-tertiary)]">
-                      Move
-                      <select
-                        className="ml-2 rounded border border-[color:var(--ck-border-subtle)] bg-transparent px-2 py-1 text-xs"
-                        defaultValue={t.stage}
-                        onChange={(e) => {
-                          const to = e.target.value as TicketStage;
-                          startTransition(() => {
-                            move(t, to)
-                              .then(() => router.refresh())
-                              .catch((err) => setError(err.message));
-                          });
-                        }}
-                      >
-                        {STAGES.map((s) => (
-                          <option key={s.key} value={s.key}>
-                            {s.label}
-                          </option>
-                        ))}
-                      </select>
-                    </label>
-                  </div>
                 </div>
               ))}
             </div>
@@ -239,7 +193,7 @@ export function TicketsBoardClient({ tickets }: { tickets: TicketSummary[] }) {
       </div>
 
       <p className="text-xs text-[color:var(--ck-text-tertiary)]">
-        Source of truth: development-team markdown tickets (via openclaw recipes move-ticket).
+        Source of truth: ticket markdown files in the team workspace.
       </p>
     </div>
   );

package/src/app/tickets/[ticket]/TicketAssignControl.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
+
+export function TicketAssignControl({
+  teamId,
+  ticket,
+  currentOwner,
+}: {
+  teamId?: string | null;
+  ticket: string;
+  currentOwner: string | null;
+}) {
+  const router = useRouter();
+  const [assignees, setAssignees] = useState<string[]>([]);
+  const [selected, setSelected] = useState<string>(currentOwner ?? "");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const url = teamId
+          ? `/api/teams/${encodeURIComponent(teamId)}/tickets/assignees`
+          : "/api/tickets/assignees";
+        const res = await fetch(url, { cache: "no-store" });
+        const json = (await res.json()) as { assignees?: string[] };
+        if (cancelled) return;
+        setAssignees(Array.isArray(json.assignees) ? json.assignees : []);
+      } catch {
+        if (cancelled) return;
+        setAssignees([]);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const options = useMemo(() => {
+    const base = new Set(assignees);
+    if (currentOwner) base.add(currentOwner);
+    return Array.from(base).sort();
+  }, [assignees, currentOwner]);
+
+  async function onAssign() {
+    setLoading(true);
+    setError(null);
+    try {
+      const url = teamId
+        ? `/api/teams/${encodeURIComponent(teamId)}/tickets/assign`
+        : "/api/tickets/assign";
+
+      const res = await fetch(url, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ ticket, assignee: selected }),
+      });
+
+      const json = (await res.json()) as { error?: string };
+      if (!res.ok) {
+        setError(json.error || "Assign failed");
+        return;
+      }
+
+      router.refresh();
+    } catch {
+      setError("Assign failed");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="ck-glass p-4">
+      <div className="flex flex-wrap items-center gap-3">
+        <div className="text-xs font-medium text-[color:var(--ck-text-tertiary)]">Assignee</div>
+        <select
+          className="rounded-md border border-white/10 bg-black/20 px-3 py-2 text-sm text-[color:var(--ck-text-primary)]"
+          value={selected}
+          onChange={(e) => setSelected(e.target.value)}
+        >
+          <option value="" disabled>
+            Select…
+          </option>
+          {options.map((a) => (
+            <option key={a} value={a}>
+              {a}
+            </option>
+          ))}
+        </select>
+
+        <button
+          type="button"
+          onClick={onAssign}
+          disabled={loading || !selected || selected === (currentOwner ?? "")}
+          className="rounded-md bg-emerald-600 px-3 py-2 text-sm font-semibold text-white hover:bg-emerald-500 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {loading ? "Assigning…" : "Assign"}
+        </button>
+
+        {currentOwner ? (
+          <div className="text-xs text-[color:var(--ck-text-tertiary)]">Currently: {currentOwner}</div>
+        ) : null}
+      </div>
+
+      {error ? <div className="mt-2 text-xs text-red-300">{error}</div> : null}
+    </div>
+  );
+}

package/src/app/tickets/[ticket]/page.tsx

@@ -1,5 +1,8 @@
-import Link from "next/link";
 import { getTicketMarkdown } from "@/lib/tickets";
+import { TicketDetailClient } from "@/app/tickets/TicketDetailClient";
+
+// Ticket detail should always reflect current stage/file; do not cache.
+export const dynamic = "force-dynamic";
 
 export default async function TicketDetailPage({
   params,
@@ -7,7 +10,8 @@ export default async function TicketDetailPage({
   params: Promise<{ ticket: string }>;
 }) {
   const { ticket } = await params;
-  const data = await getTicketMarkdown(ticket);
+  const teamId = "development-team";
+  const data = await getTicketMarkdown(teamId, ticket);
 
   if (!data) {
     return (
@@ -16,29 +20,17 @@ export default async function TicketDetailPage({
         <p className="mt-3 text-sm text-[color:var(--ck-text-secondary)]">
           Couldn’t locate “{ticket}” in backlog/in-progress/testing/done.
         </p>
-        <div className="mt-4">
-          <Link href="/tickets" className="text-sm font-medium hover:underline">
-            ← Back to tickets
-          </Link>
-        </div>
       </div>
     );
   }
 
   return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between gap-3">
-        <Link href="/tickets" className="text-sm font-medium hover:underline">
-          ← Back
-        </Link>
-        <span className="text-xs text-[color:var(--ck-text-tertiary)]">{data.file}</span>
-      </div>
-
-      <div className="ck-glass p-6">
-        <pre className="whitespace-pre-wrap break-words text-sm leading-6 text-[color:var(--ck-text-primary)]">
-          {data.markdown}
-        </pre>
-      </div>
-    </div>
+    <TicketDetailClient
+      teamId={teamId}
+      ticketId={data.id}
+      file={data.file}
+      markdown={data.markdown}
+      currentOwner={data.owner}
+    />
   );
 }

package/src/app/tickets/page.tsx

@@ -1,7 +1,10 @@
 import { listTickets } from "@/lib/tickets";
 import { TicketsBoardClient } from "@/app/tickets/TicketsBoardClient";
 
+// Tickets reflect live filesystem state; do not cache.
+export const dynamic = "force-dynamic";
+
 export default async function TicketsPage() {
-  const tickets = await listTickets();
-  return <TicketsBoardClient tickets={tickets} />;
+  const tickets = await listTickets("development-team");
+  return <TicketsBoardClient tickets={tickets} basePath="/tickets" />;
 }