@jiggai/kitchen 0.1.11 → 0.2.0

package/src/app/teams/[teamId]/team-editor/TeamMemoryTab.tsx

@@ -0,0 +1,349 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { errorMessage } from "@/lib/errors";
+
+type MemoryItem = {
+  ts: string;
+  author: string;
+  type: string;
+  content: string;
+  source?: unknown;
+  _file?: string;
+  _line?: number;
+};
+
+type PinnedItem = MemoryItem & {
+  pinnedAt: string;
+  pinnedBy: string;
+  _key: string;
+};
+
+function memoryKey(it: { _file?: string; _line?: number }): string {
+  return `${it._file ?? ""}:${it._line ?? 0}`;
+}
+
+export function TeamMemoryTab({ teamId }: { teamId: string }) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [files, setFiles] = useState<string[]>([]);
+  const [pinnedItems, setPinnedItems] = useState<PinnedItem[]>([]);
+  const [items, setItems] = useState<MemoryItem[]>([]);
+
+  const [newType, setNewType] = useState("learning");
+  const [newContent, setNewContent] = useState("");
+  const [newSource, setNewSource] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [pinningKey, setPinningKey] = useState<string | null>(null);
+
+  async function refresh() {
+    setLoading(true);
+    setError("");
+    try {
+      const res = await fetch(`/api/teams/memory?teamId=${encodeURIComponent(teamId)}`, { cache: "no-store" });
+      const json = (await res.json()) as {
+        ok?: boolean;
+        error?: string;
+        files?: string[];
+        pinnedItems?: PinnedItem[];
+        items?: MemoryItem[];
+      };
+      if (!res.ok || !json.ok) throw new Error(json.error || "Failed to load memory");
+      setFiles(Array.isArray(json.files) ? json.files : []);
+      setPinnedItems(Array.isArray(json.pinnedItems) ? json.pinnedItems : []);
+      setItems(Array.isArray(json.items) ? json.items : []);
+    } catch (e: unknown) {
+      setError(errorMessage(e));
+      setFiles([]);
+      setPinnedItems([]);
+      setItems([]);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    void refresh();
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- refresh is defined inline; teamId is the only intended trigger.
+  }, [teamId]);
+
+  const examples = useMemo(
+    () => [
+      { label: "decision", value: "decision" },
+      { label: "learning", value: "learning" },
+      { label: "bug", value: "bug" },
+      { label: "customer", value: "customer" },
+      { label: "release", value: "release" },
+    ],
+    []
+  );
+
+  const pinnedKeySet = useMemo(() => new Set(pinnedItems.map((x) => x._key)), [pinnedItems]);
+
+  async function pin(it: MemoryItem) {
+    const key = memoryKey(it);
+    if (!it._file || !it._line) return;
+
+    setPinningKey(key);
+    setError("");
+    try {
+      const payload = {
+        op: "pin",
+        ts: new Date().toISOString(),
+        actor: `${teamId}-lead`,
+        key: { file: "team.jsonl", line: it._line },
+        item: { ts: it.ts, author: it.author, type: it.type, content: it.content, source: it.source },
+      };
+      const res = await fetch(`/api/teams/memory?teamId=${encodeURIComponent(teamId)}`, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+      const json = (await res.json()) as { ok?: boolean; error?: string };
+      if (!res.ok || !json.ok) throw new Error(json.error || "Failed to pin");
+      await refresh();
+    } catch (e: unknown) {
+      setError(errorMessage(e));
+    } finally {
+      setPinningKey(null);
+    }
+  }
+
+  async function unpin(it: { _file?: string; _line?: number }) {
+    const key = memoryKey(it);
+    if (!it._file || !it._line) return;
+
+    setPinningKey(key);
+    setError("");
+    try {
+      const payload = {
+        op: "unpin",
+        ts: new Date().toISOString(),
+        actor: `${teamId}-lead`,
+        key: { file: "team.jsonl", line: it._line },
+      };
+      const res = await fetch(`/api/teams/memory?teamId=${encodeURIComponent(teamId)}`, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+      const json = (await res.json()) as { ok?: boolean; error?: string };
+      if (!res.ok || !json.ok) throw new Error(json.error || "Failed to unpin");
+      await refresh();
+    } catch (e: unknown) {
+      setError(errorMessage(e));
+    } finally {
+      setPinningKey(null);
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="ck-glass p-4">
+        <div className="flex items-start justify-between gap-3">
+          <div>
+            <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">Team memory (file-first)</div>
+            <div className="mt-1 text-xs text-[color:var(--ck-text-tertiary)]">
+              Stored in <span className="font-mono">shared-context/memory/*.jsonl</span>. Items must be attributable.
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={refresh}
+            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"
+          >
+            Refresh
+          </button>
+        </div>
+
+        {error ? (
+          <div className="mt-3 rounded border border-red-400/30 bg-red-500/10 p-2 text-sm text-red-100">{error}</div>
+        ) : null}
+
+        <div className="mt-3 text-xs text-[color:var(--ck-text-secondary)]">Files: {files.length ? files.join(", ") : "(none)"}</div>
+      </div>
+
+      <div className="ck-glass p-4">
+        <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">Add memory item</div>
+        <div className="mt-3 grid grid-cols-1 gap-3 md:grid-cols-2">
+          <label className="block">
+            <div className="text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">type</div>
+            <select
+              value={newType}
+              onChange={(e) => setNewType(e.target.value)}
+              className="mt-1 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)]"
+            >
+              {examples.map((x) => (
+                <option key={x.value} value={x.value}>
+                  {x.label}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <label className="block">
+            <div className="text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">source (ticket/pr/path)</div>
+            <input
+              value={newSource}
+              onChange={(e) => setNewSource(e.target.value)}
+              className="mt-1 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)]"
+              placeholder="e.g. ticket 0088, PR https://..., shared-context/DECISIONS.md"
+            />
+          </label>
+
+          <label className="block md:col-span-2">
+            <div className="text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">content</div>
+            <textarea
+              value={newContent}
+              onChange={(e) => setNewContent(e.target.value)}
+              className="mt-1 h-[110px] w-full resize-none rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 p-2 text-sm text-[color:var(--ck-text-primary)]"
+              placeholder="Write a small, specific memory item…"
+            />
+          </label>
+
+          <div className="md:col-span-2">
+            <button
+              type="button"
+              disabled={saving || !newContent.trim()}
+              onClick={async () => {
+                setSaving(true);
+                setError("");
+                try {
+                  const payload = {
+                    op: "append",
+                    ts: new Date().toISOString(),
+                    author: `${teamId}-lead`,
+                    type: newType,
+                    content: newContent.trim(),
+                    source: newSource.trim() ? { text: newSource.trim() } : undefined,
+                    file: "team.jsonl",
+                  };
+                  const res = await fetch(`/api/teams/memory?teamId=${encodeURIComponent(teamId)}`, {
+                    method: "POST",
+                    headers: { "content-type": "application/json" },
+                    body: JSON.stringify(payload),
+                  });
+                  const json = (await res.json()) as { ok?: boolean; error?: string };
+                  if (!res.ok || !json.ok) throw new Error(json.error || "Failed to append memory");
+                  setNewContent("");
+                  setNewSource("");
+                  await refresh();
+                } catch (e: unknown) {
+                  setError(errorMessage(e));
+                } finally {
+                  setSaving(false);
+                }
+              }}
+              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)] disabled:opacity-50"
+            >
+              {saving ? "Saving…" : "Append to team.jsonl"}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="ck-glass p-4">
+        <div className="flex items-center justify-between gap-2">
+          <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">Pinned memory</div>
+          <div className="text-xs text-[color:var(--ck-text-tertiary)]">{pinnedItems.length} pinned</div>
+        </div>
+
+        {loading ? <div className="mt-3 text-sm text-[color:var(--ck-text-secondary)]">Loading…</div> : null}
+
+        <div className="mt-3 space-y-3">
+          {pinnedItems.length ? (
+            pinnedItems.map((it) => (
+              <div key={it._key} className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 p-3">
+                <div className="flex flex-wrap items-center justify-between gap-2">
+                  <div className="text-xs text-[color:var(--ck-text-tertiary)]">
+                    <span className="font-mono">{it.ts}</span>
+                    <span className="mx-2">•</span>
+                    <span className="rounded bg-white/5 px-2 py-0.5 font-mono">{it.type}</span>
+                    <span className="mx-2">•</span>
+                    <span className="font-mono">{it.author}</span>
+                    <span className="mx-2">•</span>
+                    <span className="font-mono">pinned {it.pinnedAt}</span>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => void unpin(it)}
+                    disabled={pinningKey === it._key}
+                    className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 px-2 py-1 text-xs font-medium text-[color:var(--ck-text-primary)] hover:bg-white/10 disabled:opacity-50"
+                  >
+                    {pinningKey === it._key ? "Unpinning…" : "Unpin"}
+                  </button>
+                </div>
+
+                <div className="mt-2 whitespace-pre-wrap text-sm text-[color:var(--ck-text-primary)]">{it.content}</div>
+
+                {it.source ? (
+                  <pre className="mt-2 overflow-auto rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/30 p-2 text-[10px] text-[color:var(--ck-text-secondary)]">
+                    {JSON.stringify(it.source, null, 2)}
+                  </pre>
+                ) : null}
+              </div>
+            ))
+          ) : (
+            <div className="text-sm text-[color:var(--ck-text-secondary)]">No pinned items yet.</div>
+          )}
+        </div>
+      </div>
+
+      <div className="ck-glass p-4">
+        <div className="flex items-center justify-between gap-2">
+          <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">Recent memory</div>
+          <div className="text-xs text-[color:var(--ck-text-tertiary)]">Showing {items.length} (max 200)</div>
+        </div>
+
+        {loading ? <div className="mt-3 text-sm text-[color:var(--ck-text-secondary)]">Loading…</div> : null}
+
+        <div className="mt-3 space-y-3">
+          {items.length ? (
+            items.map((it) => {
+              const k = memoryKey(it);
+              const isPinned = pinnedKeySet.has(k);
+              return (
+                <div key={`${it._file ?? "?"}:${it._line ?? 0}`} className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 p-3">
+                  <div className="flex flex-wrap items-center justify-between gap-2">
+                    <div className="text-xs text-[color:var(--ck-text-tertiary)]">
+                      <span className="font-mono">{it.ts}</span>
+                      <span className="mx-2">•</span>
+                      <span className="rounded bg-white/5 px-2 py-0.5 font-mono">{it.type}</span>
+                      <span className="mx-2">•</span>
+                      <span className="font-mono">{it.author}</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      {it._file ? (
+                        <span className="text-[10px] text-[color:var(--ck-text-tertiary)] font-mono">
+                          {it._file}:{it._line}
+                        </span>
+                      ) : null}
+                      <button
+                        type="button"
+                        onClick={() => void pin(it)}
+                        disabled={isPinned || pinningKey === k || !it._file || !it._line}
+                        className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 px-2 py-1 text-xs font-medium text-[color:var(--ck-text-primary)] hover:bg-white/10 disabled:opacity-50"
+                      >
+                        {isPinned ? "Pinned" : pinningKey === k ? "Pinning…" : "Pin"}
+                      </button>
+                    </div>
+                  </div>
+
+                  <div className="mt-2 whitespace-pre-wrap text-sm text-[color:var(--ck-text-primary)]">{it.content}</div>
+
+                  {it.source ? (
+                    <pre className="mt-2 overflow-auto rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/30 p-2 text-[10px] text-[color:var(--ck-text-secondary)]">
+                      {JSON.stringify(it.source, null, 2)}
+                    </pre>
+                  ) : null}
+                </div>
+              );
+            })
+          ) : (
+            <div className="text-sm text-[color:var(--ck-text-secondary)]">No memory items yet.</div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/app/teams/[teamId]/team-editor/TeamRecipeTab.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import type { RecipeListItem } from "./types";
+
+type TeamRecipeTabProps = {
+  loading?: boolean;
+  fromId: string;
+  setFromId: (v: string) => void;
+  toId: string;
+  setToId: (v: string) => void;
+  toName: string;
+  setToName: (v: string) => void;
+  canEditTargetId: boolean;
+  teamRecipes: RecipeListItem[];
+  lockedFromId: string | null;
+  lockedFromName: string | null;
+  provenanceMissing: boolean;
+  saving: boolean;
+  teamIdValid: boolean;
+  targetIdValid: boolean;
+  targetIsBuiltin: boolean;
+  loadedRecipeHash: string | null;
+  teamMetaRecipeHash: string | null;
+  publishing: boolean;
+  content: string;
+  setContent: (v: string) => void;
+  setLoadedRecipeHash: (v: string | null) => void;
+  recipeLoadError: string;
+  onSaveCustom: (overwrite: boolean) => void;
+  onPublishOpen: () => void;
+  onDeleteOpen: () => void;
+};
+
+export function TeamRecipeTab(props: TeamRecipeTabProps) {
+  const p = props;
+  return (
+    <>
+      <div className="mt-6 grid grid-cols-1 gap-4 lg:grid-cols-2">
+        <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)]">Custom recipe target</div>
+            {p.loading ? (
+              <div className="text-xs text-[color:var(--ck-text-tertiary)]">Loading team…</div>
+            ) : null}
+          </div>
+          <label className="mt-3 block text-xs font-medium text-[color:var(--ck-text-secondary)]">Team id</label>
+          <input
+            value={p.toId}
+            onChange={(e) => p.setToId(e.target.value)}
+            disabled={!p.canEditTargetId}
+            className="mt-1 w-full rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 px-3 py-2 text-sm text-[color:var(--ck-text-primary)] disabled:opacity-70"
+          />
+          <div className="mt-1 text-xs text-[color:var(--ck-text-tertiary)]">
+            This is the custom recipe id that will be created when you save.
+          </div>
+          <label className="mt-3 block text-xs font-medium text-[color:var(--ck-text-secondary)]">Team name</label>
+          <input
+            value={p.toName}
+            onChange={(e) => p.setToName(e.target.value)}
+            className="mt-1 w-full rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 px-3 py-2 text-sm text-[color:var(--ck-text-primary)]"
+          />
+          <div className="mt-4 grid grid-cols-1 gap-2">
+            <button
+              type="button"
+              disabled={p.saving || !p.teamIdValid || !p.targetIdValid || p.targetIsBuiltin}
+              onClick={() => p.onSaveCustom(true)}
+              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)] disabled:opacity-50"
+            >
+              {p.saving ? "Saving" : "Save"}
+            </button>
+            <button
+              type="button"
+              disabled={
+                p.saving ||
+                !p.teamIdValid ||
+                !p.targetIdValid ||
+                p.targetIsBuiltin ||
+                !p.loadedRecipeHash ||
+                !p.teamMetaRecipeHash ||
+                p.loadedRecipeHash === p.teamMetaRecipeHash
+              }
+              onClick={p.onPublishOpen}
+              className="rounded-[var(--ck-radius-sm)] bg-emerald-600 px-3 py-2 text-sm font-medium text-white shadow-[var(--ck-shadow-1)] disabled:opacity-50"
+            >
+              {p.publishing ? "Publishing" : "Publish changes"}
+            </button>
+            <button
+              type="button"
+              disabled={p.saving}
+              onClick={p.onDeleteOpen}
+              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)] disabled:opacity-50"
+            >
+              Delete Team
+            </button>
+          </div>
+        </div>
+        <div className="ck-glass-strong p-4">
+          <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">Notes</div>
+          <div className="mt-3 rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/20 p-3">
+            <div className="text-xs font-medium text-[color:var(--ck-text-secondary)]">Parent recipe (locked)</div>
+            <select
+              disabled
+              className="mt-2 w-full rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 px-3 py-2 text-sm text-[color:var(--ck-text-primary)] disabled:opacity-70"
+              value={p.fromId}
+              onChange={(e) => p.setFromId(e.target.value)}
+            >
+              {p.teamRecipes.map((r) => (
+                <option key={`${r.source}:${r.id}`} value={r.id}>
+                  {r.id} ({r.source})
+                </option>
+              ))}
+            </select>
+            {p.lockedFromId && (
+              <div className="mt-2 text-xs text-[color:var(--ck-text-tertiary)]">
+                <code>{p.lockedFromId}</code>
+                {p.lockedFromName ? ` (${p.lockedFromName})` : ""}
+              </div>
+            )}
+            {!p.lockedFromId && p.provenanceMissing && (
+              <div className="mt-2 text-xs text-[color:var(--ck-text-tertiary)]">
+                Provenance not found for this team.
+              </div>
+            )}
+          </div>
+          <ul className="mt-4 list-disc space-y-1 pl-5 text-sm text-[color:var(--ck-text-secondary)]">
+            <li>Save writes the custom recipe file identified by Team id.</li>
+            <li>Publish changes re-scaffolds this team from your custom recipe.</li>
+            <li>Delete Team runs openclaw recipes remove-team.</li>
+          </ul>
+        </div>
+      </div>
+      <div className="mt-6 ck-glass-strong p-4">
+        <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">Recipe markdown</div>
+        {p.recipeLoadError ? (
+          <div className="mt-3 rounded-[var(--ck-radius-sm)] border border-red-400/30 bg-red-500/10 p-3 text-sm text-red-100">
+            {p.recipeLoadError}
+          </div>
+        ) : null}
+        <textarea
+          value={p.content}
+          onChange={(e) => {
+            p.setContent(e.target.value);
+            p.setLoadedRecipeHash(null);
+          }}
+          className="mt-2 h-[55vh] w-full resize-none rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 p-3 font-mono text-xs text-[color:var(--ck-text-primary)]"
+          spellCheck={false}
+        />
+      </div>
+    </>
+  );
+}

package/src/app/teams/[teamId]/team-editor/TeamSkillsTab.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+type TeamSkillsTabProps = {
+  teamId: string;
+  skillsList: string[];
+  availableSkills: string[];
+  skillsLoading: boolean;
+  selectedSkill: string;
+  setSelectedSkill: (v: string) => void;
+  installingSkill: boolean;
+  teamSkillMsg: string;
+  teamSkillError: string;
+  onInstallSkill: () => Promise<void>;
+};
+
+export function TeamSkillsTab(props: TeamSkillsTabProps) {
+  const p = props;
+  return (
+    <div className="mt-6 ck-glass-strong p-4">
+      <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">Skills</div>
+      <p className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">
+        Skills installed in this team workspace. For agent-specific skills, open the agent from the Agents tab.
+      </p>
+      <div className="mt-4">
+        <div className="text-xs font-medium text-[color:var(--ck-text-secondary)]">Installed</div>
+        <ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-[color:var(--ck-text-secondary)]">
+          {p.skillsList.length ? p.skillsList.map((s) => <li key={s}>{s}</li>) : <li>None installed.</li>}
+        </ul>
+      </div>
+      <div className="mt-5 rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/15 p-3">
+        <div className="text-xs font-medium text-[color:var(--ck-text-secondary)]">Add a skill</div>
+        <div className="mt-2 flex flex-col gap-2 sm:flex-row sm:items-center">
+          <select
+            value={p.selectedSkill}
+            onChange={(e) => p.setSelectedSkill(e.target.value)}
+            disabled={p.installingSkill || p.skillsLoading || !p.availableSkills.length}
+            className="w-full rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 px-3 py-2 text-sm text-[color:var(--ck-text-primary)]"
+          >
+            {p.availableSkills.length
+              ? p.availableSkills.map((s) => <option key={s} value={s}>{s}</option>)
+              : <option value="">No skills found</option>}
+          </select>
+          <button
+            type="button"
+            disabled={p.installingSkill || p.skillsLoading || !p.selectedSkill}
+            onClick={p.onInstallSkill}
+            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)] disabled:opacity-50"
+          >
+            {p.installingSkill ? "Adding" : "Add"}
+          </button>
+        </div>
+        {p.teamSkillError && (
+          <div className="mt-3 rounded-[var(--ck-radius-sm)] border border-red-400/30 bg-red-500/10 p-3 text-sm text-red-100">
+            {p.teamSkillError}
+          </div>
+        )}
+        {p.teamSkillMsg && (
+          <div className="mt-3 rounded-[var(--ck-radius-sm)] border border-emerald-400/30 bg-emerald-500/10 p-3 text-sm text-emerald-100">
+            {p.teamSkillMsg}
+          </div>
+        )}
+        <div className="mt-2 text-xs text-[color:var(--ck-text-tertiary)]">
+          Uses openclaw recipes install-skill with team-id {p.teamId}.
+        </div>
+      </div>
+    </div>
+  );
+}