From b7b57221b7007c2001d51bd833177983b3d4ac0d Mon Sep 17 00:00:00 2001 From: ANonABento Date: Fri, 21 Aug 2026 16:51:02 -0400 Subject: [PATCH] fix(roster): prompt measure, edit form shape, board-only controls in the tab bar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Three things that only showed up once there was real data in the view. ## The prompt looked cropped The Instructions card spanned both columns (~1050px) while the prose inside was capped at max-w-prose (~65ch), so the text stopped well short of the card edge and read as truncated. The cap was right, the card was wrong. Now the card sits in one column, which is ~530px ≈ 75ch on its own — the right measure — so the cap comes off and the text fills its container. ## The edit form was a very tall single column max-w-lg with twelve stacked controls. Widened to max-w-3xl and laid out as a two-column grid with group headings, so it reads as three short groups instead of one long scroll: Identity Name | What it does, Runtime | Model, Portrait Behaviour System prompt Tools MCP config path, Allowed tools, Skills Model was lifted out of the Behaviour group to sit beside Runtime — they're the same decision, and it was otherwise alone in a half-width column with dead space next to it. Textareas, lists and the (long) MCP path take the full row; short inputs pair up. Script agents leave Runtime unpaired, which is honest — there is nothing to put beside it. ## Board-only controls removed from the Roster New workspace, checklist, archived tasks and spend are all board/workspace concerns. On a global agent roster they did nothing, so they now render only on the board. Settings stays, since it's app-wide. Verified: tsc, eslint, IPC check 209, vitest 429, production build clean, and both editor variants plus the dossier walked in Chrome. --- src/components/layout/tab-bar.tsx | 43 +++++++++------- src/components/roster/agent-dossier.tsx | 10 ++-- src/components/roster/agent-editor.tsx | 68 +++++++++++++++++-------- 3 files changed, 78 insertions(+), 43 deletions(-) diff --git a/src/components/layout/tab-bar.tsx b/src/components/layout/tab-bar.tsx index 2c18b9e1..6375c20b 100644 --- a/src/components/layout/tab-bar.tsx +++ b/src/components/layout/tab-bar.tsx @@ -391,24 +391,33 @@ export function TabBar() { Below `sm` only the essentials (Settings + Cost) stay — the rest collapse to keep the centered tab cluster from colliding with the right-side icons. New workspace / checklist / archived view stay - reachable via Cmd+T, Cmd+K, and the command palette respectively. */} + reachable via Cmd+T, Cmd+K, and the command palette respectively. + + Everything except Settings is a board/workspace concern — new + workspace, that workspace's checklist, its archived tasks, its + spend. None of them mean anything while you're looking at a global + agent roster, so they come out rather than sit there inert. */}
- - { - setShowAddDialog(true) - }} - /> - - - - {activeWorkspaceId && ( - { - setShowDashboard(true) - }} - /> + {activeSection === 'board' && ( + <> + + { + setShowAddDialog(true) + }} + /> + + + + {activeWorkspaceId && ( + { + setShowDashboard(true) + }} + /> + )} + )}
diff --git a/src/components/roster/agent-dossier.tsx b/src/components/roster/agent-dossier.tsx index d0f925f5..6507e984 100644 --- a/src/components/roster/agent-dossier.tsx +++ b/src/components/roster/agent-dossier.tsx @@ -144,11 +144,13 @@ function LlmSections({ config }: { config: LlmConfig }) { return ( <> -
+
{config.systemPrompt ? ( - // Prose gets a measure cap: the pane is wide enough to run ~150 - // characters per line, which is well past comfortable reading. -

+ // Deliberately NOT spanning both columns: a full-width card ran the + // prose to ~150 characters, and capping the text inside a full-width + // card just made it look cropped. One column is ~75ch — the right + // measure — so the card itself carries it. +

{config.systemPrompt}

) : ( diff --git a/src/components/roster/agent-editor.tsx b/src/components/roster/agent-editor.tsx index 00b261a4..9523c2c3 100644 --- a/src/components/roster/agent-editor.tsx +++ b/src/components/roster/agent-editor.tsx @@ -39,17 +39,23 @@ const GRADIENTS: { from: string; to: string }[] = [ const inputClass = 'w-full rounded-lg border border-border-default bg-bg px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary/50 focus:border-accent focus:outline-none' +/** + * One labelled control. Short inputs sit two-up in the form grid; anything + * that needs room (textareas, lists) takes `full` and spans the row. + */ function Field({ label, hint, + full = false, children, }: { label: string hint?: string + full?: boolean children: ReactNode }) { return ( -
+
{children} {hint &&

{hint}

} @@ -57,6 +63,17 @@ function Field({ ) } +/** Group heading inside the form, so twelve controls read as three groups. */ +function FormSection({ title }: { title: string }) { + return ( +
+

+ {title} +

+
+ ) +} + /** Newline-separated text <-> string[], so lists stay editable as plain text. */ const linesToList = (v: string) => v @@ -176,7 +193,7 @@ export function AgentEditor({ agent, seed, onSave, onCancel }: Props) { aria-modal="true" aria-label={agent ? 'Edit agent' : 'New agent'} data-testid="agent-editor" - className="flex max-h-[85vh] w-full max-w-lg flex-col rounded-xl border border-border-default bg-bg shadow-2xl" + className="flex max-h-[85vh] w-full max-w-3xl flex-col rounded-xl border border-border-default bg-bg shadow-2xl" > {/* Header */}
@@ -198,7 +215,8 @@ export function AgentEditor({ agent, seed, onSave, onCancel }: Props) { {/* Scrollable body */}
-
+
+ - + {llm && ( + + { + patchLlm({ model: e.target.value }) + }} + placeholder="e.g. opus" + /> + + )} + +
{GRADIENTS.map((g) => (