Skip to content

Commit d41bd7c

Browse files
serge-the-devclaude
serge-the-dev
and
claude
committed
refactor(console): AgentDetail's 15 buttons take the vocabulary, and the file is done as far as the guard can see (#366)
126 → 69 was the previous commit; this takes the console to **54**. `AgentDetail` is the creator's agent editor and every one of its 15 hand-authored controls was ordinary — Save capabilities, Save surfaces, Save settings, Save All Settings, Export JSON, Save Version, Delete Agent, Rollback, Plan Agent, Approve and Create, Revise prompt, and the chat Send. Same rule as the sweep before it: the rendered type step is preserved (`text-sm` → `size="lg"`), padding and radius collapse — `rounded-xl` and `rounded-md` both become `rounded-lg`. Delete Agent moves from a filled `bg-danger` block to `variant="danger"`, which is the bordered treatment every other destructive control in the console now uses. The four `<button>` elements left in the file draw no box at all and are correctly outside this guard: the tab bar's `border-b-2` arms, two text-only `Remove` links, and two `&larr; Back` links. So the pin can be read as "this file is finished", which is not true of the three that hold the rest of the count (`BoardTab` 18, `InstanceDetail` 11, `RunDetail` 7 — mostly the classes §3 excludes on purpose). Verified: typecheck 11/11 · console unit tests 690 · biome --error-on-warnings · design-token + file-size gates · **e2e 355 passed** (chromium + webkit, including the 24px target-size guard, which is what would catch a size step that lost its floor). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
1 parent dbf82e2 commit d41bd7c

2 files changed

Lines changed: 22 additions & 17 deletions

File tree

‎store/console/src/lib/control-shapes.test.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,11 @@ function sweep(root: string, find = findHandAuthoredControls) {
9494
// screen where someone types a legal name or a salary because the agent refused to guess. The
9595
// vocabulary has no step above `lg`, and inventing one for three controls is the table-describing-
9696
// one-call-site failure §3 warns about.
97-
const PINNED = { "store/console": 69, "store/admin": 15, "agents/coder/web": 47 };
97+
//
98+
// 69 → 54: `AgentDetail`'s 15, all of them ordinary. Its four remaining `<button>` elements draw no
99+
// box at all (the tab bar's `border-b-2` arms, two text-only `Remove` links, two `&larr; Back`
100+
// links), so this file is finished as far as this guard can see.
101+
const PINNED = { "store/console": 54, "store/admin": 15, "agents/coder/web": 47 };
98102

99103
describe.each([
100104
["store/console", CONSOLE_SRC],

‎store/console/src/pages/AgentDetail.tsx‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useState, useEffect, useCallback, useRef } from "react";
2+
import Button from "../components/Button";
23
import Page from "../components/Page";
34
import { useParams, useNavigate } from "react-router-dom";
45
import { api } from "@proagentstore/sdk/client";
@@ -345,7 +346,7 @@ export default function AgentDetail() {
345346
</div>
346347
<div className="flex gap-1.5 pt-3 border-t border-line shrink-0">
347348
<input aria-label="Message this agent" value={chatInput} onChange={e => setChatInput(e.target.value)} onKeyDown={e => { if (e.key === "Enter") sendMessage(); }} placeholder="Send a message..." className="flex-1 bg-panel border border-line rounded-xl px-4 py-2.5 text-sm" />
348-
<button type="button" onClick={sendMessage} className="px-4 py-2.5 bg-accent text-white rounded-xl font-bold text-sm hover:bg-accent-hover">Send</button>
349+
<Button variant="primary" size="lg" onClick={sendMessage}>Send</Button>
349350
</div>
350351
</div>
351352
)}
@@ -468,7 +469,7 @@ export default function AgentDetail() {
468469
</label>
469470
</div>
470471
<div className="flex gap-2 mt-3">
471-
<button type="button" onClick={saveCapabilities} className="text-xs px-3 py-1.5 rounded-lg bg-accent text-white font-bold">Save capabilities</button>
472+
<Button variant="primary" onClick={saveCapabilities}>Save capabilities</Button>
472473
</div>
473474
</div>
474475

@@ -501,8 +502,8 @@ export default function AgentDetail() {
501502
{surfaces.length === 0 && <div className="text-xs text-muted-soft">No custom surfaces yet — add one to ship your own UI.</div>}
502503
</div>
503504
<div className="flex gap-2 mt-3">
504-
<button type="button" disabled={!surfacesEnabled} onClick={() => setSurfaces(cs => [...cs, { clientId: localRowId(), id: "", label: "", bundleUrl: "" }])} className="text-xs px-3 py-1.5 rounded-lg border border-line text-muted font-semibold disabled:opacity-40">+ Add surface</button>
505-
<button type="button" disabled={!surfacesEnabled} onClick={saveSurfaces} className="text-xs px-3 py-1.5 rounded-lg bg-accent text-white font-bold disabled:opacity-40">Save surfaces</button>
505+
<Button disabled={!surfacesEnabled} onClick={() => setSurfaces(cs => [...cs, { clientId: localRowId(), id: "", label: "", bundleUrl: "" }])}>+ Add surface</Button>
506+
<Button variant="primary" disabled={!surfacesEnabled} onClick={saveSurfaces}>Save surfaces</Button>
506507
</div>
507508
</div>
508509

@@ -544,16 +545,16 @@ export default function AgentDetail() {
544545
{sFields.length === 0 && <div className="text-xs text-muted-soft">No subscriber settings yet — add a field to give subscribers typed configuration.</div>}
545546
</div>
546547
<div className="flex gap-2 mt-3">
547-
<button type="button" onClick={() => setSFields(fs => [...fs, { clientId: localRowId(), id: "", label: "", type: "select", description: "", optionsText: "", defaultValue: "", voiceLanguage: false }])} className="text-xs px-3 py-1.5 rounded-lg border border-line text-muted font-semibold">+ Add field</button>
548-
<button type="button" onClick={saveSettingsSchema} className="text-xs px-3 py-1.5 rounded-lg bg-accent text-white font-bold">Save settings</button>
548+
<Button onClick={() => setSFields(fs => [...fs, { clientId: localRowId(), id: "", label: "", type: "select", description: "", optionsText: "", defaultValue: "", voiceLanguage: false }])}>+ Add field</Button>
549+
<Button variant="primary" onClick={saveSettingsSchema}>Save settings</Button>
549550
</div>
550551
</div>
551552

552553
<div className="flex gap-2 flex-wrap">
553-
<button type="button" onClick={saveSettings} className="text-sm px-4 py-2 rounded-xl bg-accent text-white font-bold hover:bg-accent-hover">Save All Settings</button>
554-
<button type="button" onClick={exportAgent} className="text-sm px-3 py-2 rounded-xl border border-line text-muted font-semibold">Export JSON</button>
555-
<button type="button" onClick={saveVersion} className="text-sm px-3 py-2 rounded-xl border border-line text-muted font-semibold">Save Version</button>
556-
<button type="button" onClick={deleteAgent} className="text-sm px-3 py-2 rounded-xl bg-danger text-white font-semibold hover:opacity-90">Delete Agent</button>
554+
<Button variant="primary" size="lg" onClick={saveSettings}>Save All Settings</Button>
555+
<Button size="lg" onClick={exportAgent}>Export JSON</Button>
556+
<Button size="lg" onClick={saveVersion}>Save Version</Button>
557+
<Button variant="danger" size="lg" onClick={deleteAgent}>Delete Agent</Button>
557558
</div>
558559

559560
{/* Versions */}
@@ -568,11 +569,11 @@ export default function AgentDetail() {
568569
<span className="text-sm text-muted ml-2">{v.description}</span>
569570
<span className="text-xs text-muted-soft ml-2">{new Date(v.created_at).toLocaleString()}</span>
570571
</div>
571-
<button type="button" onClick={async () => {
572+
<Button size="sm" onClick={async () => {
572573
if (!confirm(`Rollback to v${v.version_num}?`)) return;
573574
await api(`/v1/agents/${id}/versions/${v.id}/rollback`, { method: "POST" });
574575
loadAgent();
575-
}} className="text-xs px-2.5 py-1 rounded-md border border-line text-muted font-semibold">Rollback</button>
576+
}}>Rollback</Button>
576577
</div>
577578
))}
578579
</div>
@@ -704,8 +705,8 @@ function CreateAgent() {
704705
className="min-h-[120px]"
705706
/>
706707
<div className="flex gap-2 mt-4">
707-
<button type="button" onClick={buildPlan} disabled={planning} className="text-sm px-4 py-2 rounded-xl bg-accent text-white font-bold hover:bg-accent-hover disabled:opacity-60">{planning ? "Planning..." : "Plan Agent"}</button>
708-
<button type="button" onClick={() => navigate("/agents")} className="text-sm px-3 py-2 rounded-xl border border-line text-muted font-semibold">Cancel</button>
708+
<Button variant="primary" size="lg" onClick={buildPlan} disabled={planning}>{planning ? "Planning..." : "Plan Agent"}</Button>
709+
<Button size="lg" onClick={() => navigate("/agents")}>Cancel</Button>
709710
</div>
710711
{error && <div className="text-danger text-sm mt-2">{error}</div>}
711712
</div>
@@ -775,8 +776,8 @@ function CreateAgent() {
775776
)}
776777

777778
<div className="flex gap-2 mt-5">
778-
<button type="button" onClick={execute} disabled={executing} className="text-sm px-4 py-2 rounded-xl bg-accent text-white font-bold hover:bg-accent-hover disabled:opacity-60">{executing ? "Creating..." : "Approve and Create"}</button>
779-
<button type="button" onClick={() => setPlan(null)} className="text-sm px-3 py-2 rounded-xl border border-line text-muted font-semibold">Revise prompt</button>
779+
<Button variant="primary" size="lg" onClick={execute} disabled={executing}>{executing ? "Creating..." : "Approve and Create"}</Button>
780+
<Button size="lg" onClick={() => setPlan(null)}>Revise prompt</Button>
780781
</div>
781782
</div>
782783
)}

0 commit comments

Comments
 (0)