diff --git a/surfaces/gui/e2e/toolreq.spec.ts b/surfaces/gui/e2e/toolreq.spec.ts index 5e420e5f..fb812a0e 100644 --- a/surfaces/gui/e2e/toolreq.spec.ts +++ b/surfaces/gui/e2e/toolreq.spec.ts @@ -16,7 +16,8 @@ test("request_tool surfaces a card naming the tool, the reason and the pinned ve await ask(page); const card = page.locator(".dirreq-card"); await expect(card).toContainText("gitleaks"); - await expect(card).toContainText("scan the git history for committed secrets"); + // The coworker's justification is labeled, not a bare floating quote. + await expect(card).toContainText("Reason: “scan the git history for committed secrets”"); // The fact strip is the product's voice: version, publisher, checksum — kept apart from // the coworker's quoted reason (mixing them is what made the card confusing, 2026-08-14). const facts = card.locator(".toolreq-facts"); diff --git a/surfaces/gui/src/components/ToolRequestCard.tsx b/surfaces/gui/src/components/ToolRequestCard.tsx index 9847e59c..25963154 100644 --- a/surfaces/gui/src/components/ToolRequestCard.tsx +++ b/surfaces/gui/src/components/ToolRequestCard.tsx @@ -21,7 +21,11 @@ export function ToolRequestCard({ The coworker needs {item.tool} - {item.reason &&
“{item.reason}”
} + {item.reason && ( +
+ Reason: “{item.reason}” +
+ )} {/* The fact strip is the PRODUCT speaking (registry metadata), styled apart from the coworker's quoted ask above — mixing the two voices is what made the card confusing. */} {item.installable ? ( diff --git a/surfaces/gui/src/styles.css b/surfaces/gui/src/styles.css index 24c49792..64effa43 100644 --- a/surfaces/gui/src/styles.css +++ b/surfaces/gui/src/styles.css @@ -794,6 +794,9 @@ button.btn.danger { color: var(--accent); } .dirreq-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; color: var(--ink); } .dirreq-head .ico { color: var(--accent); } .dirreq-reason { font-size: 13px; color: var(--muted); font-style: italic; margin: 6px 0 10px; } +/* the coworker's justification gets an explicit label — the quote alone made readers + work out what the italic line was */ +.toolreq-label { font-style: normal; font-weight: 600; color: var(--ink); } /* request_tool fact strip — the product's own metadata (version, publisher, checksum), deliberately NOT italic so it can't be misread as the coworker still talking */ .toolreq-facts {