From b022e58d0773dac3bd55c4cc4d5bd93a74e187d3 Mon Sep 17 00:00:00 2001
From: Rohit C Prasad <rohit.prasad15@gmail.com>
Date: Fri, 14 Aug 2026 23:55:00 -0700
Subject: [PATCH] Label the coworker's justification on the tool-request card

A bare floating quote made readers infer what it was; 'Reason:' says it.
---
 surfaces/gui/e2e/toolreq.spec.ts                | 3 ++-
 surfaces/gui/src/components/ToolRequestCard.tsx | 6 +++++-
 surfaces/gui/src/styles.css                     | 3 +++
 3 files changed, 10 insertions(+), 2 deletions(-)

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 <code>{item.tool}</code>
         </span>
       </div>
-      {item.reason && <div className="dirreq-reason">“{item.reason}”</div>}
+      {item.reason && (
+        <div className="dirreq-reason">
+          <span className="toolreq-label">Reason:</span> “{item.reason}”
+        </div>
+      )}
       {/* 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 {