Omar SobhandClaude Opus 4.8
34f744734b
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]>
70 lines
3.2 KiB
TypeScript
70 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
// A compact popover listing the FULL topology taxonomy grouped by category
|
|
// (Traditional, Organic, Dynamic, Federated, Novel, Traditional/Future Gov).
|
|
// Executable kinds (the ones the cm-topology engine runs) get a "runnable" badge.
|
|
|
|
import { useState } from "react";
|
|
import { ChevronDown } from "lucide-react";
|
|
|
|
import { TOPOLOGY_CATEGORIES, topologyById } from "@/lib/topologies";
|
|
|
|
const mono = "'JetBrains Mono', ui-monospace, monospace";
|
|
|
|
export function TopologySelector({
|
|
value,
|
|
onChange,
|
|
label = "TOPOLOGY",
|
|
}: {
|
|
value: string;
|
|
onChange: (id: string) => void;
|
|
label?: string;
|
|
}) {
|
|
const [open, setOpen] = useState(false);
|
|
const current = topologyById(value);
|
|
|
|
return (
|
|
<div style={{ position: "relative" }}>
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen((v) => !v)}
|
|
style={{ display: "flex", alignItems: "center", gap: 8, padding: "5px 11px", borderRadius: 7, cursor: "pointer", background: "rgba(255,111,97,.14)", border: "1px solid rgba(255,111,97,.45)", color: "#ff8a7a", fontFamily: mono, fontSize: 11, fontWeight: 600 }}
|
|
>
|
|
<span style={{ fontSize: 9, letterSpacing: ".12em", color: "#ff8a7a99" }}>{label}</span>
|
|
{current?.label ?? "Select…"}
|
|
<ChevronDown size={12} />
|
|
</button>
|
|
|
|
{open ? (
|
|
<>
|
|
<button type="button" aria-label="Close" onClick={() => setOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 40, background: "transparent", border: 0 }} />
|
|
<div style={{ position: "absolute", top: "calc(100% + 6px)", left: 0, zIndex: 50, width: 320, maxHeight: 420, overflowY: "auto", borderRadius: 12, background: "#0d0d10", border: "1px solid rgba(255,255,255,.1)", boxShadow: "0 24px 60px rgba(0,0,0,.6)", padding: 8 }}>
|
|
{TOPOLOGY_CATEGORIES.map((cat) => (
|
|
<div key={cat.category} style={{ marginBottom: 6 }}>
|
|
<div style={{ fontFamily: mono, fontSize: 9, letterSpacing: ".12em", color: "#5a5a62", padding: "8px 8px 4px" }}>{cat.category.toUpperCase()}</div>
|
|
{cat.kinds.map((kind) => {
|
|
const on = kind.id === value;
|
|
return (
|
|
<button
|
|
key={kind.id}
|
|
type="button"
|
|
onClick={() => { onChange(kind.id); setOpen(false); }}
|
|
title={kind.blurb}
|
|
style={{ display: "flex", alignItems: "center", gap: 8, width: "100%", textAlign: "left", padding: "7px 9px", borderRadius: 8, cursor: "pointer", background: on ? "rgba(255,111,97,.12)" : "transparent", border: 0, color: on ? "#fff" : "#cfcfd5" }}
|
|
>
|
|
<span style={{ flex: 1, fontSize: 12, fontWeight: on ? 600 : 500 }}>{kind.label}</span>
|
|
{kind.executable ? (
|
|
<span style={{ fontFamily: mono, fontSize: 8, letterSpacing: ".06em", color: "#5fd08a", padding: "2px 6px", borderRadius: 5, background: "rgba(95,208,138,.1)", border: "1px solid rgba(95,208,138,.25)" }}>runnable</span>
|
|
) : null}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|