fix(web): clarify direct payment copy

.agent/context/20260913T051414Z-frontend-copy-cleanup.md

@@ -0,0 +1,107 @@
+# Session Context: Frontend copy cleanup
+
+## Date/time
+
+- UTC: 2026-09-13T05:14:14Z
+
+## User goal
+
+Apply user-directed frontend copy fixes: replace outdated Circle-era wording
+("connected API service", "Run an API service") with direct-payment language,
+remove the noisy readiness line and one MCP-docs fact, rewrite the agent skill
+install and agent configuration copy in a friendlier way with a Node.js link,
+and rename the "Q4 supplier research" placeholder. The user explicitly
+corrected the scope for unmatched transfers: remove them from the database,
+NOT from the UI.
+
+## Original prompt/request
+
+"Итак, давай сейчас сделаем небольшие исправления на сайте, в фронтенде..."
+followed by the itemized copy list, then the correction: "Стоп, убери этот из
+БД, а не из UI. Ты меня услышал? Не делай то, что я тебе не говорю." The user
+also asked to run the usual checks afterwards.
+
+## Assumptions
+
+- The unmatched-transfer metric stays visible in the UI (user correction);
+  the 26 unmatched transfers live in `wallet_activity_observations.payload`
+  (latest The Graph snapshot per workspace) and are re-observed on every
+  "Check payment activity" refresh, so any DB deletion is undone by the next
+  refresh. Direct DB deletion requires production credentials the current
+  agent identity cannot access (Cloud SQL admin and Secret Manager both 403),
+  so the exact operator command is provided to the user instead.
+- "Walk through a real request" update means aligning wording with the
+  direct-payment theme; the walkthrough content itself stays unchanged.
+- The "Run the walkthrough" docs section stays as-is (user leaned "fine").
+
+## Plan
+
+1. Apply the copy edits to App.tsx, JobWorkspace.tsx, ReadinessBanner.tsx,
+   McpDocsPage.tsx, McpProfile.tsx, styles.css.
+2. Branch `fix/frontend-copy-cleanup` from `origin/develop` (`6292052`).
+3. Run web tests, typecheck, lint, format, then Gate A, commit, push, PR, CI,
+   Gate B.
+
+## Key decisions
+
+- ReadinessBanner returns `null` on the healthy branch instead of rendering
+  "Backend ready · Arc Testnet · USDC"; warning and safe-mode branches remain.
+- New copy leads with the direct-payment promise: one durable request, exact
+  quote before approval, evidence afterwards.
+- Skill install sections now link Node.js download and drop the "develop
+  branch" phrasing; McpProfile heading gained a 3rem top margin via
+  `.skill-install-heading`.
+- No test asserted any removed or renamed string (93/93 passed unchanged).
+
+## Files/components touched
+
+- `apps/web/src/App.tsx`: overview paragraph, action button label, walkthrough
+  summary wording.
+- `apps/web/src/components/JobWorkspace.tsx`: purpose placeholder.
+- `apps/web/src/components/ReadinessBanner.tsx`: healthy state renders nothing.
+- `apps/web/src/components/McpDocsPage.tsx`: removed the server-wallet popup
+  fact; friendlier skill-install copy with Node.js link; "Agent configuration"
+  heading and clearer bearer instructions.
+- `apps/web/src/components/McpProfile.tsx`: "Install the payment skill for the
+  agent" heading with top margin and Node.js link.
+- `apps/web/src/styles.css`: `.skill-install-heading` margin rule.
+
+## Commands/checks
+
+- `pnpm --filter @oneshot/web test` - PASS (17 files, 93 tests)
+- `pnpm --filter @oneshot/web typecheck` - PASS
+- `pnpm --filter @oneshot/web lint` - PASS
+- `pnpm format:check` - PASS
+- Known environment note: local Node 22.23.2 vs pinned 24.19.0 (standing).
+
+## External-doc findings
+
+- `unmatched_transfer_count` is computed at read time from the latest
+  `wallet_activity_observations` row by comparing snapshot transfers with
+  recorded settlements (`packages/storage-postgres/src/jobs.ts`).
+
+## Unresolved questions
+
+- Production DB deletion of the unmatched-transfer snapshot: awaiting operator
+  execution (SQL provided in the PR/handoff); the count reappears after the
+  next activity refresh because the transfers are live chain history.
+
+## Git and PR state
+
+- Branch: fix/frontend-copy-cleanup
+- Base: origin/develop at 6292052
+- Commit: uncommitted at record time
+- PR: to be created against develop
+- CI: pending
+
+## Review gates
+
+- Gate A: pending in-session review of the staged candidate tree.
+- Gate B: pending after CI.
+
+## Handoff/next steps
+
+1. Stage, capture candidate tree, Gate A, commit, push, open draft PR.
+2. Wait for required CI, then Gate B, then record evidence in the PR.
+3. Operator: delete `wallet_activity_observations` rows in production SQL to
+   clear the stored unmatched transfers (they return on next refresh).

apps/web/src/App.tsx

@@ -195,7 +195,7 @@ function CabinetPage(props: {
           </Hero>
         </header>
         <details className="walkthrough">
-          <summary>Walk through a real request</summary>
+          <summary>Walk through a real payment</summary>
           <p>
             Use the actual service, wallet and result. This guide never creates or pays a request
             for you.
@@ -256,12 +256,13 @@ function CabinetPage(props: {
               <p className="eyebrow">ONE JOB · ONE PAYMENT</p>
               <h2>What would you like to do?</h2>
               <p>
-                Choose a connected API service, review its exact quote, and follow the result from
-                one durable request. Technical evidence stays available when you need it.
+                Send one direct USDC payment on Arc Testnet: review the exact quote, approve once,
+                and follow the same durable request from approval to proof. Payment evidence stays
+                available whenever you need it.
               </p>
               <div className="workspace-action-grid">
                 <button type="button" onClick={() => setSection('services')}>
-                  Run an API service
+                  Run a direct payment
                 </button>
                 <button type="button" className="secondary" onClick={() => setSection('requests')}>
                   View requests

apps/web/src/components/JobWorkspace.tsx

@@ -284,7 +284,7 @@ export function JobWorkspace(props: {
           setSubject(event.target.value);
           clearQuote();
         }}
-        placeholder="Q4 supplier research"
+        placeholder="Describe the payment intent"
       />
       <label htmlFor="report-recipient">Service destination wallet</label>
       <input

apps/web/src/components/McpDocsPage.tsx

@@ -61,26 +61,26 @@ export function McpDocsPage(props: { readonly theme: Theme; readonly onToggleThe
         <ul className="docs-facts">
           <li>One configured request key can create one payment intent.</li>
           <li>Exact retries return the original intent; changed fields return a conflict.</li>
-          <li>The server wallet pays without a MetaMask or browser wallet popup.</li>
         </ul>
       </section>
 
       <section className="docs-section" aria-labelledby="mcp-skill-heading">
         <h2 id="mcp-skill-heading">Install the agent skill</h2>
         <p>
-          Install Node.js with npm first; <code>npx</code> is included with npm. Then install the
-          OneShot payment skill from the <code>develop</code> branch.
+          First install <a href="https://nodejs.org/en/download">Node.js</a> — npm comes with it.
+          Then install the OneShot payment skill:
         </p>
         <pre className="docs-code" aria-label="Agent skill install command">
           <code>{skillInstall}</code>
         </pre>
       </section>
 
       <section className="docs-section" aria-labelledby="mcp-config-heading">
-        <h2 id="mcp-config-heading">Client configuration</h2>
+        <h2 id="mcp-config-heading">Agent configuration</h2>
         <p>
-          Sign in, open Profile, and generate your workspace-bound bearer. Keep it in your client
-          environment; never paste a real credential into source control.
+          Every OneShot account gets its own MCP bearer. Sign in, open Profile, and choose Generate
+          bearer token — the page shows a ready-made configuration for your agent's MCP client. Keep
+          the token private and never paste real credentials into source control.
         </p>
         <pre className="docs-code" aria-label="MCP client configuration">
           <code>{clientConfig}</code>

apps/web/src/components/McpProfile.tsx

@@ -85,9 +85,10 @@ export function McpProfile(props: { readonly client: JobApiClient }) {
         </>
       )}
 
-      <h3>Install the payment skill</h3>
+      <h3 className="skill-install-heading">Install the payment skill for the agent</h3>
       <p>
-        Node.js includes npm and <code>npx</code>.
+        First install <a href="https://nodejs.org/en/download">Node.js</a> — npm comes with it and
+        brings <code>npx</code>. Then install the OneShot payment skill:
       </p>
       <pre className="docs-code" aria-label="Personal agent skill install command">
         <code>{SKILL_INSTALL}</code>

apps/web/src/components/ReadinessBanner.tsx

@@ -26,5 +26,5 @@ export function ReadinessBanner({ client }: { readonly client: OneShotApiClient
       </div>
     );
   }
-  return <div className="readiness success">Backend ready · Arc Testnet · USDC</div>;
+  return null;
 }

apps/web/src/styles.css

@@ -872,6 +872,11 @@ a:hover {
   margin-bottom: 0;
 }
 
+/* Extra separation above the agent-skill install heading in Profile. */
+.skill-install-heading {
+  margin-top: 3rem;
+}
+
 /* Two or more panels stacked in one tab. */
 .panel-stack {
   display: grid;