osobh/clawmates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP cleanup: split branch stash into 8 focused commits #2

Merged
osobh merged 8 commits from chore/wip-followups into main 2026-07-06 01:52:14 +00:00
Conversation 0 Commits 8 Files Changed 13
+24 -4
1 changed files with 24 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c5400e1007 - Show all commits
frontend/src/components/dashboard/Dashboard.tsx
+24 -4
View File
@@ -83,7 +83,7 @@ const railIcon: Record<Tier, React.ReactNode> = {
infra: (<svg width="20" height="20" viewBox="0 0 20 20"><rect x="3.5" y="4" width="13" height="5" rx="1.4" stroke="currentColor" strokeWidth="1.4" fill="none" /><rect x="3.5" y="11" width="13" height="5" rx="1.4" stroke="currentColor" strokeWidth="1.4" fill="none" /><circle cx="6.4" cy="6.5" r="1" fill="currentColor" /><circle cx="6.4" cy="13.5" r="1" fill="currentColor" /></svg>),
};
const TIER_TABS: { key: Tier; label: string }[] = [
{ key: "world", label: "WORLD" }, { key: "claw", label: "AGENT" }, { key: "infra", label: "INFRA" },
{ key: "world", label: "VIZ" }, { key: "claw", label: "AGENT" }, { key: "infra", label: "INFRA" },
];
const companyIcon = (size: number) => (
<svg width={size} height={size} viewBox="0 0 20 20"><rect x="3.5" y="5" width="6" height="11" rx="1" stroke="currentColor" strokeWidth="1.4" fill="none" /><rect x="10.5" y="2.5" width="6" height="13.5" rx="1" stroke="currentColor" strokeWidth="1.4" fill="none" /></svg>
@@ -452,6 +452,26 @@ export function Dashboard({ user, orgs, claws }: { user?: { display_name?: strin
const allAgents = orgs.flatMap((o) => o.companies.flatMap((c) => c.teams.flatMap((t) => t.agents)));
// World: the full expandable org→company→team→agent forest. Agents page: a flat list.
const worldRoots: TreeItem[] = orgs.map(orgNode);
// World canvas: when a node is selected, prune to just the branch that
// contains it — sibling orgs/companies/teams disappear so the visualization
// frames the selection alone. The left tree keeps the full forest.
const narrowRoots = (roots: TreeItem[], sel: string | null): TreeItem[] => {
if (!sel) return roots;
const prune = (n: TreeItem): TreeItem | null => {
if (n.id === sel) return n;
for (const c of n.children ?? []) {
const found = prune(c);
if (found) return { ...n, children: [found] };
}
return null;
};
for (const r of roots) {
const found = prune(r);
if (found) return [found];
}
return roots;
};
const worldCanvasRoots: TreeItem[] = narrowRoots(worldRoots, worldSel);
const treeRoots: TreeItem[] = isClaw ? allAgents.map(clawNode) : worldRoots;
const treeActiveId = isClaw ? agentId : worldSel;
const treeAutoExpand: string[] = [];
@@ -496,7 +516,7 @@ export function Dashboard({ user, orgs, claws }: { user?: { display_name?: strin
</Link>
<div style={{ width: 1, height: 22, background: "rgba(255,255,255,.08)" }} />
<div style={{ display: "flex", alignItems: "center", gap: 6, fontFamily: mono, fontSize: 12 }}>
<span style={crumbStyle(isWorld)} onClick={() => setTier("world")}>Large World</span>
<span style={crumbStyle(isWorld)} onClick={() => setTier("world")}>Visualizations</span>
<span style={{ color: "#3a3a40" }}>/</span>
<span style={crumbStyle(isClaw)} onClick={() => setTier("claw")}>Agents</span>
<span style={{ color: "#3a3a40" }}>/</span>
@@ -540,7 +560,7 @@ export function Dashboard({ user, orgs, claws }: { user?: { display_name?: strin
<div style={{ padding: "16px 16px 12px", borderBottom: "1px solid rgba(255,255,255,.06)", display: "flex", alignItems: "flex-start", gap: 8 }}>
<div style={{ flex: 1, minWidth: 0 }}>
<div style={{ fontFamily: mono, fontSize: 10, letterSpacing: ".12em", color: "#5a5a62", marginBottom: 6 }}>{orgs.length} ORG{orgs.length === 1 ? "" : "S"} · {allAgents.length} AGENTS</div>
<div style={{ fontSize: 18, fontWeight: 700, color: "#f3f3f5", letterSpacing: "-.01em" }}>Large World</div>
<div style={{ fontSize: 18, fontWeight: 700, color: "#f3f3f5", letterSpacing: "-.01em" }}>Visualizations</div>
</div>
<button type="button" onClick={() => { setSelectMode((v) => { if (v) setSelectedAgents(new Set()); return !v; }); }} title="Select to manage" aria-label="Select to manage" style={{ flex: "none", width: 34, height: 34, borderRadius: 9, border: `1px solid ${selectMode ? "rgba(255,111,97,.5)" : "rgba(255,255,255,.12)"}`, background: selectMode ? "rgba(255,111,97,.12)" : "transparent", color: selectMode ? "#ff6f61" : "#9a9aa2", cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><Wrench aria-hidden size={16} /></button>
</div>
@@ -589,7 +609,7 @@ export function Dashboard({ user, orgs, claws }: { user?: { display_name?: strin
<>
{/* Graph stage — condensed by the right slide-out's width. */}
<div style={{ position: "absolute", top: 0, bottom: 0, left: 0, right: "var(--world-width, 0px)", background: "radial-gradient(120% 90% at 55% 38%, #0e0e13 0%, #08080a 70%)", transition: "right var(--duration-normal) var(--ease-app)" }}>
<WorldCanvas roots={worldRoots} expanded={expanded} onToggleExpand={toggleExpand} selectedId={worldSel} onSelect={onWorldSelect} onOpenRuns={() => setRunsOpen(true)} />
<WorldCanvas roots={worldCanvasRoots} expanded={expanded} onToggleExpand={toggleExpand} selectedId={worldSel} onSelect={onWorldSelect} onOpenRuns={() => setRunsOpen(true)} />
{/* Open the slide-out (top-right) when it's closed. */}
{!worldPanelOpen ? (
<button type="button" aria-label="Open panel" title="Panel" onClick={() => setWorldPanelOpen(true)} style={{ position: "absolute", top: 14, right: 16, zIndex: 50, width: 38, height: 38, borderRadius: "50%", border: "1px solid rgba(255,111,97,.4)", background: "rgba(255,111,97,.08)", color: "#ff6f61", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}><PanelRight aria-hidden size={19} /></button>