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,90 @@
|
||||
"use client";
|
||||
|
||||
// ClawSync revision history for an agent's .brain — list revisions (from the
|
||||
// .onion sidecar) and roll back to any prior one. GET /revisions + POST /rollback.
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { History, RotateCcw, Camera } from "lucide-react";
|
||||
|
||||
const mono = "'JetBrains Mono', ui-monospace, monospace";
|
||||
|
||||
type Revision = { revision: number; branch_id: number; annotation: string | null; is_snapshot: boolean };
|
||||
|
||||
export function BrainHistoryModal({ clawId, clawName, onClose, onRolledBack }: { clawId: string; clawName: string; onClose: () => void; onRolledBack: () => void }) {
|
||||
const [revs, setRevs] = useState<Revision[] | null>(null);
|
||||
const [busy, setBusy] = useState<number | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
|
||||
window.addEventListener("keydown", onKey);
|
||||
return () => window.removeEventListener("keydown", onKey);
|
||||
}, [onClose]);
|
||||
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
(async () => {
|
||||
try {
|
||||
const res = await fetch(`/api/claws/${clawId}/brain/revisions`);
|
||||
const data = res.ok ? await res.json() : { revisions: [] };
|
||||
if (alive) setRevs(Array.isArray(data.revisions) ? data.revisions : []);
|
||||
} catch { if (alive) setRevs([]); }
|
||||
})();
|
||||
return () => { alive = false; };
|
||||
}, [clawId]);
|
||||
|
||||
async function rollback(revision: number) {
|
||||
if (busy !== null) return;
|
||||
setBusy(revision); setError(null);
|
||||
try {
|
||||
const res = await fetch(`/api/claws/${clawId}/brain/rollback`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ revision }) });
|
||||
if (!res.ok) { setError(`Rollback failed (${res.status})`); setBusy(null); return; }
|
||||
onRolledBack();
|
||||
onClose();
|
||||
} catch { setError("Network error"); setBusy(null); }
|
||||
}
|
||||
|
||||
const sorted = revs ? [...revs].sort((a, b) => b.revision - a.revision) : [];
|
||||
|
||||
return (
|
||||
<div onClick={onClose} role="presentation" style={{ position: "fixed", inset: 0, zIndex: 120, background: "rgba(0,0,0,.62)", backdropFilter: "blur(4px)", display: "flex", alignItems: "center", justifyContent: "center", padding: 24, animation: "cm-fade .18s ease" }}>
|
||||
<div onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" aria-label="Brain history" style={{ width: "100%", maxWidth: 500, maxHeight: "80vh", display: "flex", flexDirection: "column", borderRadius: 16, background: "#0d0d10", border: "1px solid rgba(255,255,255,.1)", boxShadow: "0 30px 90px rgba(0,0,0,.6)", overflow: "hidden", animation: "scale-in .18s ease" }}>
|
||||
<div style={{ flex: "none", display: "flex", alignItems: "center", gap: 11, padding: "18px 20px", borderBottom: "1px solid rgba(255,255,255,.07)" }}>
|
||||
<span style={{ width: 34, height: 34, flex: "none", borderRadius: 9, background: "rgba(127,200,255,.12)", border: "1px solid rgba(127,200,255,.3)", display: "flex", alignItems: "center", justifyContent: "center", color: "#7fc8ff" }}><History size={17} /></span>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontSize: 17, fontWeight: 700, color: "#f3f3f5" }}>Brain history</div>
|
||||
<div style={{ fontSize: 12.5, color: "#8a8a92", marginTop: 2 }}>{clawName}'s <code>.brain</code> revisions — roll back to any prior state.</div>
|
||||
</div>
|
||||
<button type="button" onClick={onClose} aria-label="Close" style={{ width: 28, height: 28, flex: "none", borderRadius: 8, border: "1px solid rgba(255,255,255,.12)", background: "transparent", color: "#9a9aa2", cursor: "pointer" }}>✕</button>
|
||||
</div>
|
||||
|
||||
<div style={{ flex: 1, minHeight: 0, overflowY: "auto", padding: 14 }}>
|
||||
{revs === null ? (
|
||||
<div style={{ fontFamily: mono, fontSize: 11, color: "#7fc8ff", padding: 8 }}>Loading revisions…</div>
|
||||
) : sorted.length === 0 ? (
|
||||
<div style={{ fontSize: 13, color: "#8a8a92", padding: 8, lineHeight: 1.5 }}>No revisions yet. Apply or refine a brain on this agent and its history starts here — every change becomes a revision you can roll back to.</div>
|
||||
) : (
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
|
||||
{sorted.map((r, idx) => (
|
||||
<div key={r.revision} style={{ display: "flex", alignItems: "center", gap: 10, borderRadius: 10, border: "1px solid rgba(255,255,255,.08)", background: "#101013", padding: "10px 12px" }}>
|
||||
<span style={{ fontFamily: mono, fontSize: 11, fontWeight: 700, color: "#7fc8ff", minWidth: 30 }}>r{r.revision}</span>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{ fontSize: 12.5, color: "#e6e6ea", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.annotation || "(no message)"}</div>
|
||||
<div style={{ display: "flex", gap: 8, marginTop: 2 }}>
|
||||
{idx === 0 ? <span style={{ fontFamily: mono, fontSize: 9, color: "#7fd0a0" }}>CURRENT</span> : null}
|
||||
{r.is_snapshot ? <span style={{ fontFamily: mono, fontSize: 9, color: "#c98af0", display: "inline-flex", alignItems: "center", gap: 3 }}><Camera size={9} />snapshot</span> : null}
|
||||
</div>
|
||||
</div>
|
||||
{idx === 0 ? null : (
|
||||
<button type="button" disabled={busy !== null} onClick={() => rollback(r.revision)} style={{ flex: "none", display: "inline-flex", alignItems: "center", gap: 5, padding: "6px 10px", borderRadius: 8, border: "1px solid rgba(127,200,255,.3)", background: busy === r.revision ? "rgba(127,200,255,.2)" : "transparent", color: "#7fc8ff", fontSize: 11.5, fontWeight: 600, cursor: busy !== null ? "default" : "pointer" }}><RotateCcw size={12} />{busy === r.revision ? "Rolling back…" : "Roll back"}</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{error ? <div style={{ fontSize: 12, color: "#ff8a7a", padding: "8px 4px 0" }}>{error}</div> : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user