Skip to content

Commit 07e8a3d

Browse files
justfinethankujustfinethanku
committed
Polish agent memory dashboard visuals
1 parent 82d0aa9 commit 07e8a3d

17 files changed

Lines changed: 335 additions & 164 deletions

‎dashboards/open-brain-dashboard-next/app/agent-memory/[id]/page.tsx‎

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -45,58 +45,57 @@ export default async function AgentMemoryDetailPage({
4545
}
4646

4747
return (
48-
<div className="space-y-6">
49-
<div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
50-
<div>
48+
<div className="space-y-4">
49+
<div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
50+
<div className="min-w-0">
5151
<Link
5252
href="/agent-memory"
5353
className="text-sm text-text-muted hover:text-violet transition-colors"
5454
>
5555
Back to Agent Memory
5656
</Link>
57-
<h1 className="mt-2 text-2xl font-semibold">Memory Inspector</h1>
58-
<p className="mt-1 text-sm text-text-secondary">
59-
Inspect provenance, policy, scope, and source references before this memory shapes future work.
60-
</p>
57+
<p className="ob1-section-label mt-4">Memory Inspector</p>
58+
<h1 className="mt-2 max-w-4xl truncate text-2xl font-semibold tracking-tight">
59+
{memory.summary}
60+
</h1>
6161
</div>
6262
<div className="flex flex-wrap gap-2">
6363
<form action={reviewAction}>
6464
<input type="hidden" name="action" value="evidence_only" />
65-
<button className="rounded-lg border border-border px-3 py-2 text-sm text-text-secondary hover:bg-bg-hover">
65+
<button className="ob1-command-button h-9 px-3 text-sm">
6666
Evidence only
6767
</button>
6868
</form>
6969
<form action={reviewAction}>
7070
<input type="hidden" name="action" value="confirm" />
71-
<button className="rounded-lg border border-success/30 px-3 py-2 text-sm text-success hover:bg-success/10">
71+
<button className="h-9 border border-success/30 px-3 text-sm text-success hover:bg-success/10">
7272
Confirm
7373
</button>
7474
</form>
7575
<form action={reviewAction}>
7676
<input type="hidden" name="action" value="reject" />
77-
<button className="rounded-lg border border-danger/30 px-3 py-2 text-sm text-danger hover:bg-danger/10">
77+
<button className="h-9 border border-danger/30 px-3 text-sm text-danger hover:bg-danger/10">
7878
Reject
7979
</button>
8080
</form>
8181
</div>
8282
</div>
8383

84-
<div className="grid gap-4 md:grid-cols-[minmax(0,1fr)_320px]">
84+
<div className="grid gap-4 md:grid-cols-[minmax(0,1fr)_340px]">
8585
<section className="space-y-4">
86-
<div className="rounded-lg border border-border bg-bg-surface p-5">
86+
<div className="ob1-glass-panel p-5">
8787
<div className="mb-3 flex flex-wrap gap-2">
8888
<StatusBadge value={memory.review_status} />
8989
<StatusBadge value={memory.lifecycle_status} />
9090
<ProvenanceBadge value={memory.provenance_status} />
9191
</div>
92-
<h2 className="text-lg font-medium">{memory.summary}</h2>
9392
<p className="mt-4 whitespace-pre-wrap text-sm leading-6 text-text-secondary">
9493
{memory.content}
9594
</p>
9695
</div>
9796

98-
<div className="rounded-lg border border-border bg-bg-surface p-5">
99-
<h2 className="mb-3 text-sm font-medium">Source References</h2>
97+
<div className="ob1-glass-panel p-5">
98+
<h2 className="ob1-section-label mb-3">Source References</h2>
10099
{memory.agent_memory_source_refs?.length ? (
101100
<div className="divide-y divide-border-subtle">
102101
{memory.agent_memory_source_refs.map((source) => (
@@ -118,22 +117,22 @@ export default async function AgentMemoryDetailPage({
118117
)}
119118
</div>
120119

121-
<div className="rounded-lg border border-border bg-bg-surface p-5">
122-
<h2 className="mb-3 text-sm font-medium">Metadata</h2>
123-
<pre className="max-h-[360px] overflow-auto rounded bg-bg-primary p-3 text-xs leading-5 text-text-secondary">
120+
<div className="ob1-glass-panel p-5">
121+
<h2 className="ob1-section-label mb-3">Metadata</h2>
122+
<pre className="max-h-[360px] overflow-auto border border-border-subtle bg-black/20 p-3 text-xs leading-5 text-text-secondary">
124123
{JSON.stringify(memory.metadata, null, 2)}
125124
</pre>
126125
</div>
127126
</section>
128127

129128
<aside className="space-y-4">
130-
<div className="rounded-lg border border-border bg-bg-surface p-4">
131-
<h2 className="mb-3 text-sm font-medium">Use Policy</h2>
129+
<div className="ob1-frost-panel p-4">
130+
<h2 className="ob1-section-label mb-3">Use Policy</h2>
132131
<MemoryRecordPolicy memory={memory} />
133132
</div>
134133

135-
<div className="rounded-lg border border-border bg-bg-surface p-4 text-sm">
136-
<h2 className="mb-3 text-sm font-medium">Scope</h2>
134+
<div className="ob1-glass-panel p-4 text-sm">
135+
<h2 className="ob1-section-label mb-3">Scope</h2>
137136
<dl className="space-y-2 text-xs">
138137
<Row label="Workspace" value={memory.workspace_id} />
139138
<Row label="Project" value={memory.project_id || "none"} />
@@ -143,8 +142,8 @@ export default async function AgentMemoryDetailPage({
143142
</dl>
144143
</div>
145144

146-
<div className="rounded-lg border border-border bg-bg-surface p-4 text-sm">
147-
<h2 className="mb-3 text-sm font-medium">Origin</h2>
145+
<div className="ob1-glass-panel p-4 text-sm">
146+
<h2 className="ob1-section-label mb-3">Origin</h2>
148147
<dl className="space-y-2 text-xs">
149148
<Row label="Created by" value={memory.created_by} />
150149
<Row label="Runtime" value={memory.runtime_name || "unknown"} />
@@ -155,7 +154,7 @@ export default async function AgentMemoryDetailPage({
155154
</dl>
156155
</div>
157156

158-
<div className="rounded-lg border border-border bg-bg-surface p-4 text-xs text-text-muted">
157+
<div className="ob1-glass-panel p-4 text-xs text-text-muted">
159158
<p className="break-all font-mono">ID: {memory.id}</p>
160159
{memory.thought_id && (
161160
<p className="mt-2 break-all font-mono">Thought: {memory.thought_id}</p>

‎dashboards/open-brain-dashboard-next/app/agent-memory/page.tsx‎

Lines changed: 51 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,14 @@ import type { AgentMemoryReviewAction } from "@/lib/types";
1717
export const dynamic = "force-dynamic";
1818

1919
const STATUSES = ["pending", "evidence_only", "confirmed", "rejected", "stale"] as const;
20+
const STATUS_LABELS: Record<string, string> = {
21+
pending: "Pending",
22+
evidence_only: "Evidence",
23+
confirmed: "Confirmed",
24+
rejected: "Rejected",
25+
stale: "Stale",
26+
all: "All",
27+
};
2028

2129
export default async function AgentMemoryPage({
2230
searchParams,
@@ -66,71 +74,61 @@ export default async function AgentMemoryPage({
6674
}
6775

6876
return (
69-
<div className="space-y-6">
70-
<div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
71-
<div>
72-
<h1 className="text-2xl font-semibold mb-1">Agent Memory</h1>
73-
<p className="text-text-secondary text-sm">
74-
Review what agents saved before it becomes reusable context.
75-
</p>
76-
</div>
77-
<Link
78-
href="/agent-memory/traces"
79-
className="inline-flex items-center justify-center rounded-lg border border-border bg-bg-elevated px-3 py-2 text-sm text-text-secondary hover:bg-bg-hover hover:text-text-primary transition-colors"
80-
>
81-
Recall traces
82-
</Link>
83-
</div>
84-
85-
<div className="flex flex-wrap items-center gap-2">
86-
{STATUSES.map((item) => (
77+
<div className="space-y-4">
78+
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
79+
<div className="flex flex-wrap items-center gap-2">
80+
{STATUSES.map((item) => (
81+
<Link
82+
key={item}
83+
href={statusUrl(item)}
84+
className={`border px-3 py-1.5 text-sm transition-colors ${
85+
status === item
86+
? "border-violet/30 bg-violet-surface text-violet"
87+
: "border-border bg-bg-surface text-text-secondary hover:bg-bg-hover hover:text-text-primary"
88+
}`}
89+
>
90+
{STATUS_LABELS[item]}
91+
</Link>
92+
))}
8793
<Link
88-
key={item}
89-
href={statusUrl(item)}
90-
className={`rounded-lg border px-3 py-1.5 text-sm transition-colors ${
91-
status === item
94+
href={statusUrl("all")}
95+
className={`border px-3 py-1.5 text-sm transition-colors ${
96+
status === "all"
9297
? "border-violet/30 bg-violet-surface text-violet"
93-
: "border-border bg-bg-surface text-text-secondary hover:bg-bg-hover"
98+
: "border-border bg-bg-surface text-text-secondary hover:bg-bg-hover hover:text-text-primary"
9499
}`}
95100
>
96-
{item}
101+
All
97102
</Link>
98-
))}
103+
</div>
104+
105+
<div className="flex flex-wrap items-center gap-3">
106+
<p className="font-mono text-xs text-text-muted">
107+
{workspaceId}
108+
<span className="mx-2 text-text-muted/60">/</span>
109+
{projectId || "all-projects"}
110+
</p>
99111
<Link
100-
href={statusUrl("all")}
101-
className={`rounded-lg border px-3 py-1.5 text-sm transition-colors ${
102-
status === "all"
103-
? "border-violet/30 bg-violet-surface text-violet"
104-
: "border-border bg-bg-surface text-text-secondary hover:bg-bg-hover"
105-
}`}
112+
href="/agent-memory/traces"
113+
className="ob1-command-button h-9 px-3 text-sm"
106114
>
107-
all
115+
Recall traces
108116
</Link>
109-
</div>
110-
111-
<div className="grid gap-3 text-xs text-text-muted md:grid-cols-3">
112-
<div className="rounded-lg border border-border bg-bg-surface p-3">
113-
Workspace <span className="font-mono text-text-secondary">{workspaceId}</span>
114-
</div>
115-
<div className="rounded-lg border border-border bg-bg-surface p-3">
116-
Project{" "}
117-
<span className="font-mono text-text-secondary">
118-
{projectId || "all projects"}
119-
</span>
120-
</div>
121-
<div className="rounded-lg border border-border bg-bg-surface p-3">
122-
Showing <span className="font-mono text-text-secondary">{data.count}</span>{" "}
123-
memories
124117
</div>
125118
</div>
126119

127120
{error && <p className="text-danger text-sm">{error}</p>}
128121

129-
<div className="overflow-hidden rounded-lg border border-border bg-bg-surface">
122+
<div className="ob1-glass-panel overflow-hidden">
130123
<table className="w-full text-sm">
131124
<thead>
132125
<tr className="border-b border-border text-xs uppercase tracking-wider text-text-muted">
133-
<th className="px-4 py-3 text-left font-medium">Memory</th>
126+
<th className="px-4 py-3 text-left font-medium">
127+
Memories:{" "}
128+
<span className="font-mono tracking-normal text-text-secondary">
129+
{data.count}/{limit}
130+
</span>
131+
</th>
134132
<th className="px-4 py-3 text-left font-medium w-48">Trust</th>
135133
<th className="px-4 py-3 text-left font-medium w-44">Policy</th>
136134
<th className="px-4 py-3 text-left font-medium w-40">Created</th>
@@ -146,7 +144,7 @@ export default async function AgentMemoryPage({
146144
</tr>
147145
) : (
148146
data.memories.map((memory) => (
149-
<tr key={memory.memory_id} className="align-top hover:bg-bg-hover transition-colors">
147+
<tr key={memory.memory_id} className="ob1-memory-row align-top">
150148
<td className="px-4 py-3">
151149
<Link
152150
href={`/agent-memory/${memory.memory_id}`}
@@ -191,21 +189,21 @@ export default async function AgentMemoryPage({
191189
<form action={reviewAction}>
192190
<input type="hidden" name="memory_id" value={memory.memory_id} />
193191
<input type="hidden" name="action" value="evidence_only" />
194-
<button className="rounded border border-border px-2 py-1 text-xs text-text-secondary hover:bg-bg-hover">
192+
<button className="border border-border px-2 py-1 text-xs text-text-secondary hover:bg-bg-hover hover:text-text-primary">
195193
Evidence
196194
</button>
197195
</form>
198196
<form action={reviewAction}>
199197
<input type="hidden" name="memory_id" value={memory.memory_id} />
200198
<input type="hidden" name="action" value="confirm" />
201-
<button className="rounded border border-success/30 px-2 py-1 text-xs text-success hover:bg-success/10">
199+
<button className="border border-success/30 px-2 py-1 text-xs text-success hover:bg-success/10">
202200
Confirm
203201
</button>
204202
</form>
205203
<form action={reviewAction}>
206204
<input type="hidden" name="memory_id" value={memory.memory_id} />
207205
<input type="hidden" name="action" value="reject" />
208-
<button className="rounded border border-danger/30 px-2 py-1 text-xs text-danger hover:bg-danger/10">
206+
<button className="border border-danger/30 px-2 py-1 text-xs text-danger hover:bg-danger/10">
209207
Reject
210208
</button>
211209
</form>

‎dashboards/open-brain-dashboard-next/app/agent-memory/traces/page.tsx‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,19 @@ export default async function RecallTracePage({
2626
}
2727

2828
return (
29-
<div className="space-y-6">
30-
<div>
29+
<div className="space-y-4">
30+
<div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
31+
<div>
3132
<Link
3233
href="/agent-memory"
3334
className="text-sm text-text-muted hover:text-violet transition-colors"
3435
>
3536
Back to Agent Memory
3637
</Link>
37-
<h1 className="mt-2 text-2xl font-semibold">Recall Trace</h1>
38-
<p className="mt-1 text-sm text-text-secondary">
38+
<p className="ob1-section-label mt-4">Retrieval Debugging</p>
39+
<h1 className="mt-2 text-2xl font-semibold tracking-tight">Recall Trace</h1>
40+
</div>
41+
<p className="max-w-md text-sm text-text-secondary md:text-right">
3942
Debug what an agent asked for, what OB1 returned, and what the agent used.
4043
</p>
4144
</div>
@@ -45,24 +48,24 @@ export default async function RecallTracePage({
4548
name="request_id"
4649
defaultValue={requestId}
4750
placeholder="Recall request id"
48-
className="min-w-0 flex-1 rounded-lg border border-border bg-bg-surface px-3 py-2 text-sm text-text-primary outline-none focus:border-violet"
51+
className="ob1-glass-panel min-w-0 flex-1 px-3 py-2 text-sm text-text-primary outline-none focus:border-violet"
4952
/>
50-
<button className="rounded-lg bg-violet px-4 py-2 text-sm font-medium text-white hover:bg-violet-dim transition-colors">
53+
<button className="border border-violet/35 bg-violet-surface px-4 py-2 text-sm font-medium text-violet hover:bg-violet/15 transition-colors">
5154
Load trace
5255
</button>
5356
</form>
5457

5558
{error && <p className="text-danger text-sm">{error}</p>}
5659

5760
{!requestId && (
58-
<div className="rounded-lg border border-border bg-bg-surface p-6 text-sm text-text-secondary">
61+
<div className="ob1-glass-panel p-6 text-sm text-text-secondary">
5962
Waiting for a recall request id from an OpenClaw run, API smoke harness, or Agent Memory API response.
6063
</div>
6164
)}
6265

6366
{data && (
6467
<div className="space-y-4">
65-
<section className="rounded-lg border border-border bg-bg-surface p-5">
68+
<section className="ob1-frost-panel p-5">
6669
<div className="mb-3 flex flex-wrap gap-2 text-xs text-text-muted">
6770
<span className="font-mono">{data.trace.request_id}</span>
6871
{data.trace.runtime_name && <span>{data.trace.runtime_name}</span>}
@@ -74,7 +77,7 @@ export default async function RecallTracePage({
7477
<h2 className="text-lg font-medium">{data.trace.query}</h2>
7578
</section>
7679

77-
<div className="overflow-hidden rounded-lg border border-border bg-bg-surface">
80+
<div className="ob1-glass-panel overflow-hidden">
7881
<table className="w-full text-sm">
7982
<thead>
8083
<tr className="border-b border-border text-xs uppercase tracking-wider text-text-muted">
@@ -87,7 +90,7 @@ export default async function RecallTracePage({
8790
</thead>
8891
<tbody className="divide-y divide-border-subtle">
8992
{data.items.map((item) => (
90-
<tr key={item.id} className="align-top hover:bg-bg-hover transition-colors">
93+
<tr key={item.id} className="ob1-memory-row align-top">
9194
<td className="px-4 py-3 font-mono text-xs text-text-muted">
9295
{item.rank}
9396
</td>
@@ -144,9 +147,9 @@ export default async function RecallTracePage({
144147
</table>
145148
</div>
146149

147-
<section className="rounded-lg border border-border bg-bg-surface p-5">
148-
<h2 className="mb-3 text-sm font-medium">Request Payload</h2>
149-
<pre className="max-h-[360px] overflow-auto rounded bg-bg-primary p-3 text-xs leading-5 text-text-secondary">
150+
<section className="ob1-glass-panel p-5">
151+
<h2 className="ob1-section-label mb-3">Request Payload</h2>
152+
<pre className="max-h-[360px] overflow-auto border border-border-subtle bg-black/20 p-3 text-xs leading-5 text-text-secondary">
150153
{JSON.stringify(data.trace.request_payload, null, 2)}
151154
</pre>
152155
</section>

0 commit comments

Comments
 (0)