Agents .brain: wrap anatomy cards in a .brain container (brain icon) + 4×2 grid
ci / gates (push) Successful in 16s
ci / rust (push) Failing after 9s
ci / frontend (push) Successful in 42s
ci / e2e (push) Has been skipped

The 8 section icon cards now sit inside a labeled .brain panel (Brain icon + '.brain'
header) arranged 4 per row × 2 rows.

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
This commit is contained in:
Omar Sobh
2026-06-27 11:49:54 -07:00
co-authored by Claude Opus 4.8
parent d9ee9f5328
commit 8b06ca11e8
@@ -8,7 +8,7 @@
// its "add tool" affordance).
import { useState, type ReactNode } from "react";
import { Check, Cpu, Database, Drama, Pencil, Plus, ScrollText, ShieldCheck, Workflow, Wrench, X, Zap } from "lucide-react";
import { Brain, Check, Cpu, Database, Drama, Pencil, Plus, ScrollText, ShieldCheck, Workflow, Wrench, X, Zap } from "lucide-react";
import type { DemoAgent } from "@/lib/dashboard-demo";
import { MarkdownText, PersonalityBody, mono, tag, type RawBrain } from "./anatomy-cards";
@@ -190,8 +190,15 @@ export function AnatomyGrid({ agent, brain, onSaved, onAddTool }: { agent: DemoA
return (
<>
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))", gap: 12, alignContent: "start" }}>
{sections.map((s) => <IconCard key={s.key} section={s} onClick={() => setOpen(s.key)} />)}
{/* The .brain container — brain icon + label, then a 4×2 grid of section cards. */}
<div style={{ borderRadius: 14, background: "#0c0c10", border: "1px solid rgba(201,138,240,.22)", padding: 16, boxShadow: "0 8px 22px rgba(0,0,0,.35)" }}>
<div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 14 }}>
<span style={{ width: 30, height: 30, flex: "none", borderRadius: 8, background: "rgba(201,138,240,.16)", border: "1px solid rgba(201,138,240,.4)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "#c98af0" }}><Brain size={17} /></span>
<span style={{ fontFamily: mono, fontSize: 13, fontWeight: 600, letterSpacing: ".05em", color: "#c98af0" }}>.brain</span>
</div>
<div style={{ display: "grid", gridTemplateColumns: "repeat(4, minmax(0, 1fr))", gap: 12 }}>
{sections.map((s) => <IconCard key={s.key} section={s} onClick={() => setOpen(s.key)} />)}
</div>
</div>
{active ? <SectionModal section={active} clawId={agent.id} onClose={() => setOpen(null)} onSaved={onSaved} onAddTool={onAddTool} /> : null}
</>