Agents .brain: wrap anatomy cards in a .brain container (brain icon) + 4×2 grid
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:
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}
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user