loops wizard: extract AutoProvisionCard to stay under 1250 lines

Co-Authored-By: Claude Opus 4.7 <[email protected]>
2026-07-18 16:23:13 -07:00
parent 65b19b0fc5
commit 279d785f5b
2 changed files with 104 additions and 71 deletions
@@ -0,0 +1,93 @@
+"use client";
+
+import type { CSSProperties } from "react";
+import type { AutoProvisionResponse } from "@/lib/api/research";
+
+const mono =
+  "ui-monospace, SFMono-Regular, SF Mono, Menlo, Monaco, Consolas, monospace";
+
+export function AutoProvisionCard({
+  autoTeam,
+  autoProvisioning,
+  autoProvisionError,
+  disabled,
+  onProvision,
+  hintStyle,
+  primaryBtn,
+  description,
+}: {
+  autoTeam: AutoProvisionResponse | null;
+  autoProvisioning: boolean;
+  autoProvisionError: string | null;
+  disabled: boolean;
+  onProvision: () => void;
+  hintStyle: CSSProperties;
+  primaryBtn: CSSProperties;
+  description?: string;
+}) {
+  return (
+    <div
+      style={{
+        padding: 12,
+        borderRadius: 8,
+        border: `1px solid ${autoTeam ? "rgba(95,208,138,.35)" : "rgba(94,200,216,.35)"}`,
+        background: autoTeam
+          ? "rgba(95,208,138,.06)"
+          : "rgba(94,200,216,.06)",
+        display: "flex",
+        flexDirection: "column",
+        gap: 10,
+      }}
+    >
+      <span
+        style={{
+          fontFamily: mono,
+          fontSize: 12,
+          color: autoTeam ? "#83e6a5" : "#7cd6e0",
+        }}
+      >
+        {autoTeam
+          ? `Team ready · ${autoTeam.agents.length} agents · ${autoTeam.topology_kind}`
+          : "No team yet? Auto-provision one from the task."}
+      </span>
+      {!autoTeam && (
+        <p style={hintStyle}>
+          {description ??
+            "We ask Claude Sonnet 5 to derive 3–5 roles from the task above, then create each agent + wire them in."}
+        </p>
+      )}
+      {autoTeam ? (
+        <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
+          {autoTeam.agents.map((a) => (
+            <span
+              key={a.agent_id}
+              style={{
+                fontFamily: mono,
+                fontSize: 11,
+                padding: "3px 8px",
+                borderRadius: 999,
+                border: "1px solid rgba(255,255,255,.14)",
+                background: "rgba(255,255,255,.04)",
+                color: "#d7d7db",
+              }}
+            >
+              {a.role_slot} · {a.display_name}
+            </span>
+          ))}
+        </div>
+      ) : (
+        <button
+          type="button"
+          onClick={onProvision}
+          disabled={disabled}
+          style={{ ...primaryBtn, opacity: disabled ? 0.5 : 1 }}
+        >
+          {autoProvisioning ? "Provisioning…" : "Auto-provision team"}
+        </button>
+      )}
+      {autoProvisionError && (
+        <p style={{ ...hintStyle, color: "#ff8a7a" }}>{autoProvisionError}</p>
+      )}
+    </div>
+  );
+}