@jiggai/kitchen 0.3.1 → 0.3.3

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

@@ -1,91 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { errorMessage } from "@/lib/errors";
-import { fetchJson } from "@/lib/fetch-json";
-
-type Mode = "off" | "prompt" | "on";
-
-export default function SettingsClient() {
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-  const [mode, setMode] = useState<Mode>("prompt");
-  const [msg, setMsg] = useState<string>("");
-
-  useEffect(() => {
-    (async () => {
-      setLoading(true);
-      setMsg("");
-      try {
-        const json = await fetchJson<{ ok?: boolean; value?: string; error?: string }>(
-          "/api/settings/cron-installation",
-          { cache: "no-store" }
-        );
-        if (!json.ok) throw new Error(json.error || "Failed to load config");
-        const v = String(json.value || "").trim();
-        if (v === "off" || v === "prompt" || v === "on") setMode(v);
-        else setMode("prompt");
-      } catch (e: unknown) {
-        setMsg(errorMessage(e));
-      } finally {
-        setLoading(false);
-      }
-    })();
-  }, []);
-
-  async function save(next: Mode) {
-    setSaving(true);
-    setMsg("");
-    try {
-      const json = await fetchJson<{ ok?: boolean; error?: string }>("/api/settings/cron-installation", {
-        method: "PUT",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify({ value: next }),
-      });
-      if (!json.ok) throw new Error(json.error || "Save failed");
-      setMode(next);
-      setMsg("Saved.");
-    } catch (e: unknown) {
-      setMsg(errorMessage(e));
-    } finally {
-      setSaving(false);
-    }
-  }
-
-  const Option = ({ value, title, help }: { value: Mode; title: string; help: string }) => (
-    <button
-      type="button"
-      onClick={() => save(value)}
-      disabled={loading || saving}
-      className={`ck-glass w-full text-left px-4 py-3 transition-colors hover:bg-white/10 ${
-        mode === value ? "border-[color:var(--ck-accent-red)]" : ""
-      }`}
-    >
-      <div className="flex items-baseline justify-between gap-3">
-        <div className="font-medium">{title}</div>
-        {mode === value ? (
-          <div className="text-xs font-medium text-[color:var(--ck-accent-red)]">Selected</div>
-        ) : null}
-      </div>
-      <div className="mt-1 text-sm text-[color:var(--ck-text-secondary)]">{help}</div>
-    </button>
-  );
-
-  return (
-    <div className="space-y-3">
-      <Option value="off" title="Off" help="Never install or reconcile recipe-defined cron jobs." />
-      <Option
-        value="prompt"
-        title="Prompt (default)"
-        help="Ask at scaffold time. Default answer should be No; jobs are installed disabled unless you opt in."
-      />
-      <Option value="on" title="On" help="Install/reconcile jobs during scaffold (enabledByDefault controls new jobs)." />
-
-      {msg ? (
-        <div className="mt-2 rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/20 p-3 text-sm">
-          {msg}
-        </div>
-      ) : null}
-    </div>
-  );
-}

package/src/app/teams/[teamId]/CloneTeamModal.tsx

@@ -1,116 +0,0 @@
-"use client";
-
-import { useMemo, useState } from "react";
-import { ConfirmationModal } from "@/components/ConfirmationModal";
-import type { RecipeListItem } from "@/lib/recipes";
-import { slugifyId } from "@/lib/slugify";
-
-function getIdInputClass(state: "empty" | "available" | "taken"): string {
-  const base = "mt-1 w-full rounded-[var(--ck-radius-sm)] border bg-black/25 px-3 py-2 text-sm text-[color:var(--ck-text-primary)] ";
-  if (state === "available") return base + "border-emerald-400/50";
-  if (state === "taken") return base + "border-red-400/60";
-  return base + "border-white/10";
-}
-
-export function CloneTeamModal({
-  open,
-  onClose,
-  recipes,
-  onConfirm,
-}: {
-  open: boolean;
-  onClose: () => void;
-  recipes: RecipeListItem[];
-  onConfirm: (args: { id: string; name: string; scaffold: boolean }) => void;
-}) {
-  const [name, setName] = useState("");
-  const [id, setId] = useState("");
-  const [idTouched, setIdTouched] = useState(false);
-  const [scaffold, setScaffold] = useState(true);
-
-  const derivedId = useMemo(() => slugifyId(name, 80), [name]);
-  const effectiveId = idTouched ? id : derivedId;
-
-  const availability = useMemo(() => {
-    const v = effectiveId.trim();
-    if (!v) return { state: "empty" as const, exists: false };
-    const exists = recipes.some((r) => r.id === v);
-    return { state: exists ? ("taken" as const) : ("available" as const), exists };
-  }, [effectiveId, recipes]);
-
-  const canConfirm = !!name.trim() && !!effectiveId.trim() && availability.state !== "taken";
-
-  return (
-    <ConfirmationModal
-      open={open}
-      onClose={onClose}
-      title="Clone Team"
-      confirmLabel="Clone"
-      onConfirm={() => onConfirm({ id: effectiveId.trim(), name: name.trim(), scaffold })}
-      confirmDisabled={!canConfirm}
-    >
-      <p className="mt-1 text-sm text-[color:var(--ck-text-secondary)]">
-        Enter a new team name and id. The id will be used as the new custom recipe id.
-      </p>
-
-      <label className="mt-4 block text-xs font-medium text-[color:var(--ck-text-secondary)]">New team name</label>
-      <input
-        value={name}
-        onChange={(e) => setName(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)]"
-      />
-
-      <label className="mt-4 block text-xs font-medium text-[color:var(--ck-text-secondary)]">New team id</label>
-      <input
-        value={effectiveId}
-        onChange={(e) => {
-          setIdTouched(true);
-          setId(e.target.value);
-        }}
-        className={getIdInputClass(availability.state)}
-      />
-      <div className="mt-1 text-xs text-[color:var(--ck-text-tertiary)]">
-        {availability.state === "taken" && "That id is already taken."}
-        {availability.state === "available" && "Id is available."}
-      </div>
-
-      {availability.state === "taken" ? (
-        <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)]">Try one of these ids</div>
-          <div className="mt-2 flex flex-wrap gap-2">
-            {[`custom-${effectiveId.trim()}`, `my-${effectiveId.trim()}`, `${effectiveId.trim()}-2`, `${effectiveId.trim()}-alt`]
-              .filter((x) => x && x !== effectiveId.trim())
-              .map((x) => (
-                <button
-                  key={x}
-                  type="button"
-                  onClick={() => {
-                    setIdTouched(true);
-                    setId(x);
-                  }}
-                  className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 px-2.5 py-1.5 text-xs font-medium text-[color:var(--ck-text-primary)] hover:bg-white/10"
-                >
-                  {x}
-                </button>
-              ))}
-          </div>
-        </div>
-      ) : null}
-
-      <label className="mt-5 flex items-start gap-2 rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/20 p-3 text-sm text-[color:var(--ck-text-secondary)]">
-        <input
-          type="checkbox"
-          checked={scaffold}
-          onChange={(e) => setScaffold(e.target.checked)}
-          className="mt-1"
-        />
-        <span>
-          Also scaffold workspace files (recommended).<br />
-          <span className="text-xs text-[color:var(--ck-text-tertiary)]">
-            Creates the team workspace + standard file tree immediately so the cloned team is usable.
-          </span>
-        </span>
-      </label>
-    </ConfirmationModal>
-  );
-}

package/src/app/teams/[teamId]/OrchestratorPanel.tsx

@@ -1,255 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useState } from "react";
-
-import { fetchJson } from "@/lib/fetch-json";
-import { OrchestratorSetupModal } from "./OrchestratorSetupModal";
-
-type OrchestratorState =
-  | {
-      ok: true;
-      teamId: string;
-      present: false;
-      reason?: string;
-    }
-  | {
-      ok: true;
-      teamId: string;
-      present: true;
-      agent: { id: string; identityName?: string; workspace: string };
-      tmuxSessions: Array<{ name: string; attached: boolean; windows?: number; created?: string }>;
-      worktrees: Array<{ path: string; branch?: string; sha?: string }>;
-      activeTasksSummary: null | { path: string; taskCount?: number; rawType?: string };
-      settingsPaths: string[];
-    }
-  | {
-      ok: false;
-      error: string;
-    };
-
-export function OrchestratorPanel({ teamId }: { teamId: string }) {
-  const [loading, setLoading] = useState(true);
-  const [state, setState] = useState<OrchestratorState | null>(null);
-  const [lastLoadedAt, setLastLoadedAt] = useState<string | null>(null);
-  const [setupOpen, setSetupOpen] = useState(false);
-
-  const load = useCallback(async () => {
-    setLoading(true);
-    try {
-      const json = await fetchJson<OrchestratorState>(
-        `/api/teams/orchestrator?teamId=${encodeURIComponent(teamId)}`,
-        { cache: "no-store" }
-      );
-      setState(json);
-      setLastLoadedAt(new Date().toISOString());
-    } catch (e: unknown) {
-      setState({ ok: false, error: e instanceof Error ? e.message : String(e) });
-      setLastLoadedAt(new Date().toISOString());
-    } finally {
-      setLoading(false);
-    }
-  }, [teamId]);
-
-  useEffect(() => {
-    void load();
-  }, [load]);
-
-  if (loading) {
-    return <div className="mt-6 ck-glass-strong p-4">Loading orchestrator state…</div>;
-  }
-
-  if (!state) {
-    return <div className="mt-6 ck-glass-strong p-4">No orchestrator state available.</div>;
-  }
-
-  if (!state.ok) {
-    return (
-      <div className="mt-6 ck-glass-strong p-4">
-        <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">Orchestrator</div>
-        <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">
-          {state.error}
-        </div>
-      </div>
-    );
-  }
-
-  if (!state.present) {
-    return (
-      <div className="mt-6 ck-glass-strong p-4">
-        <div className="flex flex-wrap items-start justify-between gap-3">
-          <div>
-            <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">Orchestrator</div>
-            <p className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">No swarm/orchestrator detected for this team.</p>
-          </div>
-          <button
-            type="button"
-            onClick={() => setSetupOpen(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)] hover:bg-[var(--ck-accent-red-hover)]"
-          >
-            Add Orchestrator
-          </button>
-        </div>
-
-        <div className="mt-3 rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/20 p-3 text-sm text-[color:var(--ck-text-secondary)]">
-          <div className="text-xs font-medium text-[color:var(--ck-text-tertiary)]">Detection</div>
-          <div className="mt-1 font-mono text-xs">{state.reason || "(no reason provided)"}</div>
-        </div>
-
-        <p className="mt-3 text-sm text-[color:var(--ck-text-secondary)]">
-          Default convention is <code>&lt;teamId&gt;-swarm-orchestrator</code>. Once installed, this tab will show: tmux sessions,
-          git worktrees/branches, and active task state.
-        </p>
-
-        <OrchestratorSetupModal
-          open={setupOpen}
-          onClose={() => setSetupOpen(false)}
-          teamId={teamId}
-          onInstalled={() => {
-            setSetupOpen(false);
-            void load();
-          }}
-        />
-      </div>
-    );
-  }
-
-  return (
-    <div className="mt-6 ck-glass-strong p-4">
-      <div className="flex flex-wrap items-start justify-between gap-3">
-        <div>
-          <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">Orchestrator</div>
-          <div className="mt-1 text-xs text-[color:var(--ck-text-secondary)]">
-            Agent: <span className="font-mono">{state.agent.id}</span>
-            {state.agent.identityName ? ` (${state.agent.identityName})` : ""}
-          </div>
-          <div className="mt-1 text-xs text-[color:var(--ck-text-secondary)]">
-            Workspace: <span className="font-mono">{state.agent.workspace}</span>
-          </div>
-        </div>
-
-        <div className="flex items-center gap-3">
-          <div className="text-xs text-[color:var(--ck-text-tertiary)]">
-            {lastLoadedAt ? (
-              <span>
-                Last updated: <span className="font-mono">{lastLoadedAt}</span>
-              </span>
-            ) : null}
-          </div>
-          <button
-            type="button"
-            onClick={() => void load()}
-            disabled={loading}
-            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)] shadow-[var(--ck-shadow-1)] transition-colors hover:bg-white/10 active:bg-white/15 disabled:opacity-50"
-          >
-            {loading ? "Refreshing…" : "Refresh"}
-          </button>
-        </div>
-      </div>
-
-      <div className="mt-5 grid grid-cols-1 gap-4 lg:grid-cols-2">
-        <section className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/20 p-3">
-          <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">tmux sessions</div>
-          {state.tmuxSessions.length ? (
-            <ul className="mt-2 space-y-2">
-              {state.tmuxSessions.map((s) => (
-                <li key={s.name} className="text-sm text-[color:var(--ck-text-secondary)]">
-                  <span className="font-mono">{s.name}</span>
-                  <span className="ml-2 text-xs text-[color:var(--ck-text-tertiary)]">
-                    attached={String(s.attached)}
-                    {typeof s.windows === "number" ? ` windows=${s.windows}` : ""}
-                  </span>
-                </li>
-              ))}
-            </ul>
-          ) : (
-            <div className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">No sessions detected (or tmux not running).</div>
-          )}
-        </section>
-
-        <section className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/20 p-3">
-          <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">git worktrees</div>
-          {state.worktrees.length ? (
-            <ul className="mt-2 space-y-2">
-              {state.worktrees.map((w) => (
-                <li key={w.path} className="text-sm text-[color:var(--ck-text-secondary)]">
-                  <div className="font-mono text-xs">{w.path}</div>
-                  <div className="text-xs text-[color:var(--ck-text-tertiary)]">
-                    {w.branch ? w.branch : "(no branch)"}
-                    {w.sha ? ` @ ${w.sha.slice(0, 7)}` : ""}
-                  </div>
-                </li>
-              ))}
-            </ul>
-          ) : (
-            <div className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">No worktrees detected.</div>
-          )}
-        </section>
-      </div>
-
-      <section className="mt-4 rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/20 p-3">
-        <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">Active tasks</div>
-        {state.activeTasksSummary ? (
-          <div className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">
-            <div className="font-mono text-xs">{state.activeTasksSummary.path}</div>
-            <div className="mt-1 text-xs text-[color:var(--ck-text-tertiary)]">
-              {typeof state.activeTasksSummary.taskCount === "number" ? `tasks=${state.activeTasksSummary.taskCount}` : "tasks=?"}
-              {state.activeTasksSummary.rawType ? ` type=${state.activeTasksSummary.rawType}` : ""}
-            </div>
-          </div>
-        ) : (
-          <div className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">No active-tasks.json found.</div>
-        )}
-      </section>
-
-      <section className="mt-4 rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/20 p-3">
-        <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">CLI quick actions</div>
-        <p className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">
-          The orchestrator is designed to be driven from the CLI (and usually tmux). Common commands:
-        </p>
-        <ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-[color:var(--ck-text-secondary)]">
-          <li>
-            <span className="font-mono text-xs">tmux ls</span>
-            <span className="ml-2 text-xs text-[color:var(--ck-text-tertiary)]">(list sessions)</span>
-          </li>
-          <li>
-            <span className="font-mono text-xs">tmux attach -t &lt;session&gt;</span>
-            <span className="ml-2 text-xs text-[color:var(--ck-text-tertiary)]">(jump into a running swarm)</span>
-          </li>
-          <li>
-            <span className="font-mono text-xs">git -C {state.agent.workspace} worktree list</span>
-            <span className="ml-2 text-xs text-[color:var(--ck-text-tertiary)]">(inspect worktrees)</span>
-          </li>
-        </ul>
-        <p className="mt-3 text-xs text-[color:var(--ck-text-tertiary)]">
-          Note: ClawKitchen is read-only here; it surfaces status and pointers, but does not run or attach to tmux.
-        </p>
-      </section>
-
-      <section className="mt-4 rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/20 p-3">
-        <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">Human approval gate (recommended)</div>
-        <p className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">
-          For workflows that publish, deploy, or send outbound messages, keep a <strong>human approval step</strong>.
-        </p>
-        <ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-[color:var(--ck-text-secondary)]">
-          <li>Generate a proposed change/post as a draft.</li>
-          <li>Send the draft to a bound messaging channel (e.g. Telegram) for approval.</li>
-          <li>Only execute the final action after explicit approve/deny.</li>
-        </ul>
-      </section>
-
-      <section className="mt-4 rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/20 p-3">
-        <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">Where to change settings</div>
-        <p className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">
-          These are the common knobs for a swarm/orchestrator scaffold (read-only references):
-        </p>
-        <ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-[color:var(--ck-text-secondary)]">
-          {state.settingsPaths.map((p) => (
-            <li key={p} className="font-mono text-xs">
-              {p}
-            </li>
-          ))}
-        </ul>
-      </section>
-    </div>
-  );
-}

package/src/app/teams/[teamId]/OrchestratorSetupModal.tsx

@@ -1,184 +0,0 @@
-"use client";
-
-import { useMemo, useState } from "react";
-import { createPortal } from "react-dom";
-import { fetchJson } from "@/lib/fetch-json";
-
-function slugifyId(input: string) {
-  return String(input ?? "")
-    .toLowerCase()
-    .trim()
-    .replace(/[^a-z0-9]+/g, "-")
-    .replace(/^-+|-+$/g, "")
-    .replace(/--+/g, "-");
-}
-
-export function OrchestratorSetupModal({
-  open,
-  onClose,
-  teamId,
-  onInstalled,
-}: {
-  open: boolean;
-  onClose: () => void;
-  teamId: string;
-  onInstalled: () => void;
-}) {
-  const defaultAgentId = useMemo(() => `${teamId}-swarm-orchestrator`, [teamId]);
-  const [agentId, setAgentId] = useState(defaultAgentId);
-  const [repoDir, setRepoDir] = useState("");
-  const [worktreeRoot, setWorktreeRoot] = useState("/home/control/swarm-worktrees");
-  const [baseRef, setBaseRef] = useState("origin/main");
-  const [applyConfig, setApplyConfig] = useState(true);
-  const [makeExecutable, setMakeExecutable] = useState(true);
-
-  const [submitting, setSubmitting] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [result, setResult] = useState<{ orchestratorAgentId: string; workspace: string } | null>(null);
-
-  const normalized = useMemo(() => {
-    const effectiveAgentId = slugifyId(agentId);
-    return { effectiveAgentId };
-  }, [agentId]);
-
-  if (!open) return null;
-
-  return createPortal(
-    <div className="fixed inset-0 z-[210]">
-      <div
-        className="fixed inset-0 bg-black/60"
-        onClick={() => {
-          if (!submitting) onClose();
-        }}
-      />
-      <div className="fixed inset-0 overflow-y-auto">
-        <div className="flex min-h-full items-center justify-center p-4">
-          <div className="w-full max-w-xl 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)]">Add Orchestrator</div>
-            <p className="mt-1 text-sm text-[color:var(--ck-text-secondary)]">
-              This will scaffold a new <span className="font-mono text-xs">swarm-orchestrator</span> agent workspace for this team and
-              prefill its config.
-            </p>
-
-            <label className="mt-4 block text-xs font-medium text-[color:var(--ck-text-secondary)]">Orchestrator agent id</label>
-            <input
-              value={agentId}
-              onChange={(e) => setAgentId(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-1 text-xs text-[color:var(--ck-text-tertiary)]">
-              Default: <span className="font-mono">{defaultAgentId}</span> (normalized: <span className="font-mono">{normalized.effectiveAgentId}</span>)
-            </div>
-
-            <label className="mt-4 block text-xs font-medium text-[color:var(--ck-text-secondary)]">Repo directory (SWARM_REPO_DIR)</label>
-            <input
-              value={repoDir}
-              onChange={(e) => setRepoDir(e.target.value)}
-              placeholder="/home/control/clawkitchen"
-              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-3 md:grid-cols-2">
-              <div>
-                <label className="block text-xs font-medium text-[color:var(--ck-text-secondary)]">Worktree root (SWARM_WORKTREE_ROOT)</label>
-                <input
-                  value={worktreeRoot}
-                  onChange={(e) => setWorktreeRoot(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-1 text-xs text-[color:var(--ck-text-tertiary)]">Recommend a dedicated folder outside the repo.</div>
-              </div>
-
-              <div>
-                <label className="block text-xs font-medium text-[color:var(--ck-text-secondary)]">Base ref (SWARM_BASE_REF)</label>
-                <input
-                  value={baseRef}
-                  onChange={(e) => setBaseRef(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>
-            </div>
-
-            <label className="mt-5 flex items-start gap-2 rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/20 p-3 text-sm text-[color:var(--ck-text-secondary)]">
-              <input type="checkbox" checked={applyConfig} onChange={(e) => setApplyConfig(e.target.checked)} className="mt-1" />
-              <span>
-                Add this agent to OpenClaw config (recommended).<br />
-                <span className="text-xs text-[color:var(--ck-text-tertiary)]">
-                  This will modify <span className="font-mono">~/.openclaw/openclaw.json</span> to add <span className="font-mono">{normalized.effectiveAgentId}</span>.
-                </span>
-              </span>
-            </label>
-
-            <label className="mt-3 flex items-start gap-2 rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/20 p-3 text-sm text-[color:var(--ck-text-secondary)]">
-              <input type="checkbox" checked={makeExecutable} onChange={(e) => setMakeExecutable(e.target.checked)} className="mt-1" />
-              <span>
-                Make scripts executable (developer convenience).<br />
-                <span className="text-xs text-[color:var(--ck-text-tertiary)]">
-                  Runs <span className="font-mono">chmod +x .clawdbot/*.sh</span> in the orchestrator workspace.
-                </span>
-              </span>
-            </label>
-
-            {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">{error}</div>
-            ) : null}
-
-            {result ? (
-              <div className="mt-4 rounded-[var(--ck-radius-sm)] border border-emerald-400/30 bg-emerald-500/10 p-3 text-sm text-emerald-100">
-                Installed <span className="font-mono">{result.orchestratorAgentId}</span> → <span className="font-mono">{result.workspace}</span>
-              </div>
-            ) : null}
-
-            <div className="mt-6 flex items-center justify-end gap-2">
-              <button
-                type="button"
-                onClick={onClose}
-                disabled={submitting}
-                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 disabled:opacity-50"
-              >
-                Cancel
-              </button>
-              <button
-                type="button"
-                disabled={submitting || !normalized.effectiveAgentId || !repoDir.trim()}
-                onClick={async () => {
-                  setSubmitting(true);
-                  setError(null);
-                  setResult(null);
-                  try {
-                    const json = await fetchJson<
-                      | { ok: true; orchestratorAgentId: string; workspace: string }
-                      | { ok: false; error: string }
-                    >("/api/teams/orchestrator/install", {
-                      method: "POST",
-                      headers: { "content-type": "application/json" },
-                      body: JSON.stringify({
-                        teamId,
-                        orchestratorAgentId: normalized.effectiveAgentId,
-                        repoDir: repoDir.trim(),
-                        worktreeRoot: worktreeRoot.trim(),
-                        baseRef: baseRef.trim(),
-                        applyConfig,
-                        makeExecutable,
-                      }),
-                    });
-                    if (!json.ok) throw new Error(json.error);
-                    setResult({ orchestratorAgentId: json.orchestratorAgentId, workspace: json.workspace });
-                    onInstalled();
-                  } catch (e: unknown) {
-                    setError(e instanceof Error ? e.message : String(e));
-                  } finally {
-                    setSubmitting(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)] hover:bg-[var(--ck-accent-red-hover)] disabled:opacity-50"
-              >
-                {submitting ? "Installing…" : "Install"}
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  , document.body);
-}