Large World graph, agent platform, brain stack & dashboard rebuild
Frontend - Large World: collapse org/company/team tiers into one expandable React Flow hierarchy (WorldFlow) with per-click expand, persisted node positions, a compact tree sidebar, wrench multi-select delete across levels, and a sized right slide-out (phone/tablet/full) showing an agent summary + drill button. - Agent page: GitHub-style animated contribution grid (VitalsCard), collapsible System Prompt + Personality cards, restructured anatomy cards, bigger avatar with name/title header row, Markdown/JSON-aware rendering, brain registry + history, avatar generate/upload. - User-icon menu (Infrastructure/Brains/Tools/Profile/Credits) + ToolPanel; Master Planner deploy wizard (Specialists/Swarm/Scheduled/Triggered); Team Runs view; reap-progress modal; dashboard is the single live interface. Backend - cm-brain crate (.brain as the agent definition) + brain apply/history. - Hard-purge reap (FK-ordered) + sandbox release + SSE batch-delete. - Swarm self-verifying loop, mode-aware planner, web.search tool, webhooks (migration 0013), org/company/team delete endpoints, scheduler sweeps. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
This commit is contained in:
Omar Sobh
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
9f266d5806
commit
34f744734b
@@ -0,0 +1,294 @@
|
||||
"use client";
|
||||
|
||||
// Brain Registry rail on the claw page: search ClawBrainHub, click a card to
|
||||
// slide out a content overview (what's inside, empty vs populated), and Add a
|
||||
// brain to the SELECTED agent (POST /api/claws/{id}/brain/apply → cards repopulate).
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Brain, Check, Plus, Search, Sparkles, X } from "lucide-react";
|
||||
|
||||
const mono = "'JetBrains Mono', ui-monospace, monospace";
|
||||
|
||||
type BrainListing = {
|
||||
reference: string;
|
||||
owner: string;
|
||||
name: string;
|
||||
version: string;
|
||||
description: string;
|
||||
trust_score: number;
|
||||
size_bytes: number;
|
||||
};
|
||||
type SectionText = { populated: boolean; chars: number; preview: string };
|
||||
type BrainPreview = {
|
||||
reference: string;
|
||||
size_bytes: number;
|
||||
system_prompt: SectionText;
|
||||
agent_md: SectionText;
|
||||
personality: SectionText;
|
||||
skills: string[];
|
||||
tools: [string, string][];
|
||||
memory_count: number;
|
||||
memory_recent: string[];
|
||||
runtime: boolean;
|
||||
provenance: boolean;
|
||||
};
|
||||
|
||||
function Badge({ on, label }: { on: boolean; label: string }) {
|
||||
return (
|
||||
<span style={{ fontFamily: mono, fontSize: 9, padding: "2px 7px", borderRadius: 5, color: on ? "#7fd0a0" : "#7a7a82", background: on ? "rgba(95,208,138,.12)" : "rgba(255,255,255,.04)", border: `1px solid ${on ? "rgba(95,208,138,.3)" : "rgba(255,255,255,.08)"}` }}>{label}</span>
|
||||
);
|
||||
}
|
||||
|
||||
function kb(n: number) { return n >= 1024 ? `${(n / 1024).toFixed(1)} KB` : `${n} B`; }
|
||||
|
||||
type Axis = { score?: number; notes?: string };
|
||||
type EnhResult = {
|
||||
new_reference: string | null;
|
||||
label?: string;
|
||||
analysis?: { effectiveness?: Axis; exploitability?: Axis; personality?: Axis; tools_access?: Axis; summary?: string };
|
||||
};
|
||||
|
||||
export function BrainRegistryPanel({ clawId, clawName, onApplied, onClose }: { clawId: string; clawName: string; onApplied: () => void; onClose: () => void }) {
|
||||
const [query, setQuery] = useState("");
|
||||
const [items, setItems] = useState<BrainListing[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [busyRef, setBusyRef] = useState<string | null>(null);
|
||||
const [doneRefs, setDoneRefs] = useState<Set<string>>(new Set());
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [selectedRef, setSelectedRef] = useState<string | null>(null);
|
||||
const [preview, setPreview] = useState<BrainPreview | null>(null);
|
||||
const [pvLoading, setPvLoading] = useState(false);
|
||||
const [enhancing, setEnhancing] = useState(false);
|
||||
const [enhProgress, setEnhProgress] = useState<{ pct: number; label: string } | null>(null);
|
||||
const [enhResult, setEnhResult] = useState<EnhResult | null>(null);
|
||||
const [enhError, setEnhError] = useState<string | null>(null);
|
||||
const [listBump, setListBump] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
const t = setTimeout(() => {
|
||||
setLoading(true);
|
||||
fetch(`/api/brainhub/search?q=${encodeURIComponent(query)}`, { cache: "no-store" })
|
||||
.then((r) => (r.ok ? r.json() : []))
|
||||
.then((d) => { if (alive) { setItems(Array.isArray(d) ? d : []); setLoading(false); } })
|
||||
.catch(() => { if (alive) { setItems([]); setLoading(false); } });
|
||||
}, 250);
|
||||
return () => { alive = false; clearTimeout(t); };
|
||||
}, [query, listBump]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedRef) return;
|
||||
let alive = true;
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect -- reset overview on selection change
|
||||
setPreview(null);
|
||||
setPvLoading(true);
|
||||
setEnhProgress(null); setEnhResult(null); setEnhError(null); setEnhancing(false);
|
||||
fetch(`/api/brainhub/preview?ref=${encodeURIComponent(selectedRef)}`, { cache: "no-store" })
|
||||
.then((r) => (r.ok ? r.json() : null))
|
||||
.then((d) => { if (alive) { setPreview(d); setPvLoading(false); } })
|
||||
.catch(() => { if (alive) { setPreview(null); setPvLoading(false); } });
|
||||
return () => { alive = false; };
|
||||
}, [selectedRef]);
|
||||
|
||||
async function enhance(reference: string) {
|
||||
setEnhError(null); setEnhResult(null); setEnhProgress({ pct: 2, label: "Starting…" }); setEnhancing(true);
|
||||
try {
|
||||
const res = await fetch("/api/brainhub/enhance", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ reference }) });
|
||||
if (!res.ok || !res.body) { setEnhError(`Enhance failed (${res.status})`); setEnhancing(false); return; }
|
||||
const reader = res.body.getReader();
|
||||
const dec = new TextDecoder();
|
||||
let buf = "";
|
||||
for (;;) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
buf += dec.decode(value, { stream: true });
|
||||
let i;
|
||||
while ((i = buf.indexOf("\n\n")) >= 0) {
|
||||
const frame = buf.slice(0, i); buf = buf.slice(i + 2);
|
||||
const line = frame.split("\n").find((l) => l.startsWith("data:"));
|
||||
if (!line) continue;
|
||||
let evt: { stage?: string; pct?: number; label?: string } & EnhResult;
|
||||
try { evt = JSON.parse(line.slice(5).trim()); } catch { continue; }
|
||||
if (evt.stage === "error") { setEnhError(evt.label || "Enhance error"); setEnhancing(false); }
|
||||
else if (evt.stage === "done") {
|
||||
setEnhResult(evt);
|
||||
setEnhProgress({ pct: 100, label: evt.label || "Done" });
|
||||
setEnhancing(false);
|
||||
// Re-read the committed (enhanced) version so every section shows the
|
||||
// new contents, and refresh the list so the new version appears.
|
||||
if (evt.new_reference) {
|
||||
fetch(`/api/brainhub/preview?ref=${encodeURIComponent(evt.new_reference)}`, { cache: "no-store" })
|
||||
.then((r) => (r.ok ? r.json() : null))
|
||||
.then((d) => { if (d) setPreview(d); })
|
||||
.catch(() => {});
|
||||
}
|
||||
setListBump((b) => b + 1);
|
||||
}
|
||||
else { setEnhProgress({ pct: evt.pct ?? 0, label: evt.label || "" }); }
|
||||
}
|
||||
}
|
||||
setEnhancing(false);
|
||||
} catch { setEnhError("Network error"); setEnhancing(false); }
|
||||
}
|
||||
|
||||
async function add(reference: string) {
|
||||
setBusyRef(reference); setError(null);
|
||||
try {
|
||||
const res = await fetch(`/api/claws/${clawId}/brain/apply`, {
|
||||
method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ reference }),
|
||||
});
|
||||
if (!res.ok) { setError("Couldn't add that brain — try again."); setBusyRef(null); return; }
|
||||
setDoneRefs((p) => { const n = new Set(p); n.add(reference); return n; });
|
||||
setBusyRef(null);
|
||||
onApplied();
|
||||
} catch { setError("Network error"); setBusyRef(null); }
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ position: "absolute", inset: 0, background: "#0b0b0e", borderRight: "1px solid rgba(255,255,255,.07)" }}>
|
||||
{/* Search panel */}
|
||||
<div style={{ position: "absolute", top: 0, bottom: 0, left: 0, width: 220, borderRight: "1px solid rgba(255,255,255,.06)", display: "flex", flexDirection: "column", padding: "14px 13px" }}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 6 }}>
|
||||
<span style={{ flex: 1, display: "inline-flex", alignItems: "center", gap: 6, fontFamily: mono, fontSize: 10, letterSpacing: ".1em", color: "#ff8a7a" }}><Brain aria-hidden size={12} />BRAIN REGISTRY</span>
|
||||
<button type="button" onClick={onClose} aria-label="Close registry" style={{ flex: "none", width: 22, height: 22, borderRadius: 6, border: "1px solid rgba(255,255,255,.12)", background: "transparent", color: "#9a9aa2", cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><X size={12} /></button>
|
||||
</div>
|
||||
<div style={{ fontSize: 11.5, color: "#8a8a92", marginTop: 7 }}>Search the hub and add a brain to <span style={{ color: "#cfcfd5" }}>{clawName}</span>.</div>
|
||||
<div style={{ position: "relative", marginTop: 10 }}>
|
||||
<Search aria-hidden size={13} style={{ position: "absolute", left: 9, top: 9, color: "#5a5a62" }} />
|
||||
<input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search brains…" autoFocus style={{ width: "100%", boxSizing: "border-box", padding: "7px 9px 7px 28px", borderRadius: 8, border: "1px solid rgba(255,255,255,.12)", background: "#141417", color: "#eaeaee", fontSize: 12.5 }} />
|
||||
</div>
|
||||
<div style={{ marginTop: 12, fontFamily: mono, fontSize: 9.5, color: "#55555c", lineHeight: 1.7 }}>Results appear to the right →<br />Click a result for its contents, then Enhance or Add.</div>
|
||||
</div>
|
||||
{/* Results panel */}
|
||||
<div style={{ position: "absolute", top: 0, bottom: 0, left: 220, right: 0, display: "flex", flexDirection: "column", background: "#0a0a0d" }}>
|
||||
<div style={{ flex: "none", padding: "14px 13px 9px", borderBottom: "1px solid rgba(255,255,255,.06)", fontFamily: mono, fontSize: 9.5, letterSpacing: ".1em", color: "#6a6a72" }}>RESULTS{items.length ? ` · ${items.length}` : ""}{query ? ` · “${query}”` : ""}</div>
|
||||
<div style={{ flex: 1, minHeight: 0, overflowY: "auto", padding: 10 }}>
|
||||
{error ? <div style={{ fontSize: 11, color: "#ff8a7a", marginBottom: 8 }}>{error}</div> : null}
|
||||
{loading ? (
|
||||
<div style={{ fontFamily: mono, fontSize: 11, color: "#6a6a72", padding: 8 }}>Loading…</div>
|
||||
) : items.length === 0 ? (
|
||||
<div style={{ fontSize: 11.5, color: "#6a6a72", padding: 8, lineHeight: 1.5 }}>No brains found.{query ? "" : " Publish one with “Push to Hub”."}</div>
|
||||
) : (
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
|
||||
{items.map((b) => {
|
||||
const done = doneRefs.has(b.reference);
|
||||
const busy = busyRef === b.reference;
|
||||
const sel = selectedRef === b.reference;
|
||||
return (
|
||||
<div key={b.reference} onClick={() => setSelectedRef(b.reference)} style={{ borderRadius: 10, border: `1px solid ${sel ? "rgba(255,111,97,.5)" : "rgba(255,255,255,.08)"}`, background: sel ? "rgba(255,111,97,.06)" : "#101013", padding: 10, cursor: "pointer" }}>
|
||||
<div style={{ display: "flex", alignItems: "flex-start", gap: 8 }}>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{ fontSize: 12.5, fontWeight: 600, color: "#eaeaee", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{b.name}</div>
|
||||
<div style={{ fontFamily: mono, fontSize: 9.5, color: "#6a6a72" }}>{b.owner} · v{b.version}{b.trust_score > 0 ? ` · trust ${Math.round(b.trust_score)}` : ""}</div>
|
||||
</div>
|
||||
<button type="button" disabled={busy || done} onClick={(e) => { e.stopPropagation(); add(b.reference); }} aria-label={`Add ${b.name}`} title={done ? "Added" : "Add to agent"} style={{ flex: "none", display: "flex", alignItems: "center", justifyContent: "center", width: 28, height: 28, borderRadius: 8, border: `1px solid ${done ? "rgba(95,208,138,.4)" : "rgba(255,111,97,.4)"}`, background: done ? "rgba(95,208,138,.12)" : "rgba(255,111,97,.08)", color: done ? "#5fd08a" : "#ff6f61", cursor: busy || done ? "default" : "pointer" }}>
|
||||
{done ? <Check size={14} /> : busy ? <span style={{ fontFamily: mono, fontSize: 9 }}>…</span> : <Plus size={15} />}
|
||||
</button>
|
||||
</div>
|
||||
{b.description ? <div style={{ fontSize: 11, color: "#8a8a92", marginTop: 6, lineHeight: 1.45, display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden" }}>{b.description}</div> : null}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Detail slide-out — to the RIGHT of the rail. */}
|
||||
{selectedRef ? (
|
||||
<div style={{ position: "absolute", top: 0, left: "100%", width: 340, height: "100%", background: "#0d0d11", borderRight: "1px solid rgba(255,255,255,.08)", boxShadow: "18px 0 40px rgba(0,0,0,.45)", zIndex: 8, display: "flex", flexDirection: "column", animation: "cm-fade .15s ease" }}>
|
||||
<div style={{ flex: "none", display: "flex", alignItems: "center", gap: 8, padding: "13px 13px 11px", borderBottom: "1px solid rgba(255,255,255,.06)" }}>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{ fontFamily: mono, fontSize: 9.5, letterSpacing: ".1em", color: "#6a6a72" }}>BRAIN CONTENTS{enhResult?.new_reference ? " · ENHANCED" : ""}</div>
|
||||
<div style={{ fontSize: 13, fontWeight: 700, color: "#f3f3f5", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{enhResult?.new_reference ?? selectedRef}</div>
|
||||
</div>
|
||||
<button type="button" onClick={() => setSelectedRef(null)} aria-label="Close" style={{ flex: "none", width: 26, height: 26, borderRadius: 7, border: "1px solid rgba(255,255,255,.12)", background: "transparent", color: "#9a9aa2", cursor: "pointer" }}><X size={13} /></button>
|
||||
</div>
|
||||
<div style={{ flex: 1, minHeight: 0, overflowY: "auto", padding: 13, display: "flex", flexDirection: "column", gap: 12 }}>
|
||||
{pvLoading ? (
|
||||
<div style={{ fontFamily: mono, fontSize: 11, color: "#6a6a72" }}>Reading brain…</div>
|
||||
) : !preview ? (
|
||||
<div style={{ fontSize: 11.5, color: "#ff8a7a" }}>Couldn’t read this brain.</div>
|
||||
) : (
|
||||
<>
|
||||
<div style={{ fontFamily: mono, fontSize: 9.5, color: "#5a5a62" }}>{kb(preview.size_bytes)}</div>
|
||||
{([
|
||||
["System prompt", preview.system_prompt],
|
||||
["AGENTS.md (how it operates)", preview.agent_md],
|
||||
["Personality", preview.personality],
|
||||
] as [string, SectionText][]).map(([label, st]) => (
|
||||
<div key={label}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 7, marginBottom: 5 }}>
|
||||
<span style={{ fontSize: 11.5, fontWeight: 600, color: "#cfcfd5" }}>{label}</span>
|
||||
<span style={{ flex: 1 }} />
|
||||
<Badge on={st.populated} label={st.populated ? `${st.chars} chars` : "empty"} />
|
||||
</div>
|
||||
{st.populated ? <div style={{ fontFamily: mono, fontSize: 10, color: "#8a8a92", lineHeight: 1.5, maxHeight: 92, overflow: "hidden", whiteSpace: "pre-wrap" }}>{st.preview}{st.chars > st.preview.length ? "…" : ""}</div> : null}
|
||||
</div>
|
||||
))}
|
||||
<div>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 7, marginBottom: 5 }}>
|
||||
<span style={{ fontSize: 11.5, fontWeight: 600, color: "#cfcfd5" }}>Skills</span>
|
||||
<span style={{ flex: 1 }} />
|
||||
<Badge on={preview.skills.length > 0} label={preview.skills.length > 0 ? String(preview.skills.length) : "empty"} />
|
||||
</div>
|
||||
{preview.skills.length > 0 ? <div style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>{preview.skills.map((s) => <span key={s} style={{ fontFamily: mono, fontSize: 10, color: "#cfcfd5", padding: "2px 7px", borderRadius: 5, background: "rgba(255,255,255,.05)" }}>{s}</span>)}</div> : null}
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 7, marginBottom: 5 }}>
|
||||
<span style={{ fontSize: 11.5, fontWeight: 600, color: "#cfcfd5" }}>Tools</span>
|
||||
<span style={{ flex: 1 }} />
|
||||
<Badge on={preview.tools.length > 0} label={preview.tools.length > 0 ? String(preview.tools.length) : "empty"} />
|
||||
</div>
|
||||
{preview.tools.length > 0 ? <div style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>{preview.tools.map(([n, s]) => <span key={n} style={{ fontFamily: mono, fontSize: 10, color: "#cfcfd5", padding: "2px 7px", borderRadius: 5, background: "rgba(255,255,255,.05)" }}>{n} · {s}</span>)}</div> : null}
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 7, marginBottom: 5 }}>
|
||||
<span style={{ fontSize: 11.5, fontWeight: 600, color: "#cfcfd5" }}>Memory</span>
|
||||
<span style={{ flex: 1 }} />
|
||||
<Badge on={preview.memory_count > 0} label={preview.memory_count > 0 ? `${preview.memory_count} entries` : "empty"} />
|
||||
</div>
|
||||
{preview.memory_recent.length > 0 ? <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>{preview.memory_recent.map((m, i) => <div key={i} style={{ fontFamily: mono, fontSize: 9.5, color: "#7a7a82", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{m}</div>)}</div> : null}
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: 7 }}>
|
||||
<Badge on={preview.runtime} label={`runtime ${preview.runtime ? "✓" : "—"}`} />
|
||||
<Badge on={preview.provenance} label={`provenance ${preview.provenance ? "✓" : "—"}`} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ flex: "none", padding: 12, borderTop: "1px solid rgba(255,255,255,.06)", display: "flex", flexDirection: "column", gap: 9 }}>
|
||||
{enhProgress ? (
|
||||
<div>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", fontFamily: mono, fontSize: 9.5, color: "#9a9aa2", marginBottom: 4 }}><span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{enhProgress.label}</span><span>{enhProgress.pct}%</span></div>
|
||||
<div style={{ height: 5, borderRadius: 3, background: "rgba(255,255,255,.08)", overflow: "hidden" }}><div style={{ width: `${enhProgress.pct}%`, height: "100%", background: "linear-gradient(90deg,#c98af0,#ff6f61)", transition: "width .3s ease" }} /></div>
|
||||
</div>
|
||||
) : null}
|
||||
{enhError ? <div style={{ fontSize: 11, color: "#ff8a7a" }}>{enhError}</div> : null}
|
||||
{enhResult ? (
|
||||
<div style={{ borderRadius: 8, border: "1px solid rgba(201,138,240,.3)", background: "rgba(201,138,240,.06)", padding: 9, fontSize: 10.5, color: "#cfcfd5" }}>
|
||||
<div style={{ fontFamily: mono, fontSize: 9, color: "#c98af0", marginBottom: 5 }}>OPUS 4.8 REVIEW</div>
|
||||
{enhResult.analysis ? (
|
||||
<div style={{ display: "flex", flexWrap: "wrap", gap: 5, marginBottom: 6 }}>
|
||||
{([["effectiveness", "Effect"], ["exploitability", "Exploit"], ["personality", "Persona"], ["tools_access", "Tools"]] as const).map(([k, short]) => {
|
||||
const sc = enhResult.analysis?.[k]?.score;
|
||||
return sc != null ? <span key={k} style={{ fontFamily: mono, fontSize: 9.5, padding: "2px 6px", borderRadius: 5, background: "rgba(255,255,255,.06)" }}>{short} {sc}/10</span> : null;
|
||||
})}
|
||||
</div>
|
||||
) : null}
|
||||
{enhResult.analysis?.summary ? <div style={{ color: "#9a9aa2", lineHeight: 1.45 }}>{enhResult.analysis.summary}</div> : null}
|
||||
{enhResult.new_reference ? <div style={{ fontFamily: mono, fontSize: 9.5, color: "#7fd0a0", marginTop: 6 }}>✓ committed {enhResult.new_reference}</div> : <div style={{ fontFamily: mono, fontSize: 9.5, color: "#e8b465", marginTop: 6 }}>enhanced — not committed (push not permitted)</div>}
|
||||
</div>
|
||||
) : null}
|
||||
<button type="button" disabled={enhancing} onClick={() => enhance(selectedRef)} style={{ width: "100%", padding: "9px 0", borderRadius: 9, border: "1px solid rgba(201,138,240,.45)", background: "rgba(201,138,240,.1)", color: "#d9b3f5", fontSize: 12, fontWeight: 600, cursor: enhancing ? "default" : "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 7 }}>
|
||||
<Sparkles size={14} />{enhancing ? "Enhancing…" : "Enhance with Opus 4.8"}
|
||||
</button>
|
||||
<button type="button" disabled={busyRef === selectedRef || doneRefs.has(selectedRef)} onClick={() => add(selectedRef)} style={{ width: "100%", padding: "9px 0", borderRadius: 9, border: 0, background: doneRefs.has(selectedRef) ? "rgba(95,208,138,.18)" : "#ff6f61", color: doneRefs.has(selectedRef) ? "#7fd0a0" : "#1a0d0b", fontSize: 12.5, fontWeight: 700, cursor: busyRef === selectedRef || doneRefs.has(selectedRef) ? "default" : "pointer" }}>
|
||||
{doneRefs.has(selectedRef) ? "✓ Added" : busyRef === selectedRef ? "Adding…" : `Add to ${clawName}`}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user