From 32543eba00703f710ee17ecdffaa41178714df7f Mon Sep 17 00:00:00 2001 From: AlgoVoi Date: Sat, 30 May 2026 13:58:45 +0100 Subject: [PATCH 01/16] docs(ap2): add payment evidence frame specification Adds docs/ap2/payment_evidence_frame.md specifying the Payment Evidence Frame (PEF) -- a transport-agnostic envelope that wraps any AP2 payment lifecycle receipt under a named claim_type, a deterministic frame_id, and an optional RFC 9421 signature. Covers: claim_type taxonomy (5 receipt formats), frame field definitions, frame_id and receipt_hash derivation, frame_id stability guarantee, usage in AP2 agent flows, live production example, and reference implementations. Normative reference: draft-hopley-x402-payment-evidence-frame https://datatracker.ietf.org/doc/draft-hopley-x402-payment-evidence-frame/ Also adds pef, PEF, deserialising, multiparty, unrecognised to .cspell/custom-words.txt. --- .cspell/custom-words.txt | 6 + docs/ap2/payment_evidence_frame.md | 213 +++++++++++++++++++++++++++++ 2 files changed, 219 insertions(+) create mode 100644 docs/ap2/payment_evidence_frame.md diff --git a/.cspell/custom-words.txt b/.cspell/custom-words.txt index ce73c361..bf8ca21f 100644 --- a/.cspell/custom-words.txt +++ b/.cspell/custom-words.txt @@ -169,6 +169,12 @@ Truelayer Trulioo udpa unmarshal +deserialising +multiparty +pef +PEF +unrecognised +verdicts viewmodel vulnz Wallex diff --git a/docs/ap2/payment_evidence_frame.md b/docs/ap2/payment_evidence_frame.md new file mode 100644 index 00000000..4ecf8b34 --- /dev/null +++ b/docs/ap2/payment_evidence_frame.md @@ -0,0 +1,213 @@ +# Payment Evidence Frame + +A Payment Evidence Frame (PEF) is a transport-agnostic envelope that wraps +any AP2 payment lifecycle receipt under a named `claim_type`, a deterministic +`frame_id`, and an optional transport-layer signature. It is designed to be +composable: agents pass `frame_id` values by reference across task boundaries +without re-transmitting the full inner receipt, while consumers can verify +receipt integrity from `receipt_hash` before deserialising the receipt body. + +The normative wire format is specified in IETF Internet-Draft +[`draft-hopley-x402-payment-evidence-frame`](https://datatracker.ietf.org/doc/draft-hopley-x402-payment-evidence-frame/). + +## Overview + +Individual AP2 payment lifecycle receipts carry their own semantics but share +no common envelope. A downstream relying party consuming a mix of receipt +types must parse each receipt body to determine what lifecycle event it +represents, cannot reference a receipt stably across systems without +transmitting its full content, and has no integrity check short of full +deserialisation. + +The PEF solves these three gaps: + +1. **`claim_type`** -- a taxonomy label that identifies the lifecycle event + without parsing the inner receipt body. +2. **`frame_id`** -- a stable, content-addressed cross-system identifier + derived from the JCS canonical form of the frame, excluding `frame_id` + and `signature` from the preimage. +3. **`receipt_hash`** -- an integrity check over the inner receipt computed + from `sha256:` of its JCS canonical form, enabling integrity verification + without deserialising the receipt. + +The PEF does not redefine the inner receipt formats. Each receipt format +remains normatively specified by its own I-D or AP2 sub-document. + +## claim_type Taxonomy + +The `claim_type` field is a closed enumeration. Each value maps to exactly +one `receipt_format` string and one fixed set of status values within that +format. + +| `claim_type` | `receipt_format` | Status values | +| :--- | :--- | :--- | +| `payment_admission` | `compliance-receipt-v1` | `ALLOW` / `REFER` / `DENY` | +| `payment_settlement` | `settlement-attestation-v1` | `SETTLED` / `PENDING_FINALITY` / `REVERSED` | +| `payment_cancellation` | `cancellation-receipt-v1` | `USER_REQUESTED` / `MERCHANT_REQUESTED` / `COMPLIANCE_TERMINATED` / `EXPIRED` | +| `payment_refund` | `refund-receipt-v1` | `FULL` / `PARTIAL` / `REJECTED` | +| `composite_verdict` | `composite-trust-query-v1` | `TRUSTED` / `PROVISIONAL` / `INSUFFICIENT_EVIDENCE` / `UNTRUSTED` | + +The enumeration is **closed by design**. A PEF carrying an unrecognised +`claim_type` MUST be rejected by conforming consumers. Any extension +constitutes a normative successor format. + +## Frame Fields + +The PEF is a JSON object canonicalised under RFC 8785 (JCS). All fields are +REQUIRED except `signature`. + +| Field | Type | Description | +| :---- | :--- | :---------- | +| `pef_version` | string | Fixed `"1"` for this version of the format. | +| `claim_type` | string | Closed enum; see taxonomy table above. | +| `receipt_format` | string | Closed mapping from `claim_type`; see taxonomy table above. | +| `receipt` | object | Inner receipt embedded verbatim as a JSON object. | +| `receipt_hash` | string | `sha256:` of the JCS canonical bytes of `receipt`. | +| `frame_id` | string | `sha256:` of the JCS canonical bytes of the frame with `frame_id` and `signature` excluded from the preimage. | +| `frame_provider_did` | string | DID URI identifying the party that constructed the frame. | +| `frame_timestamp_ms` | integer | Unix epoch milliseconds at which the frame was constructed. | +| `canon_version` | string | In-band canonicalisation pin. Fixed `urn:x402:canonicalisation:jcs-rfc8785-v1` for this version. | +| `signature` | string | OPTIONAL. RFC 9421 HTTP Message Signature string over the frame. Adding `signature` to an existing frame does NOT change `frame_id`. | + +## frame_id Derivation + +To derive `frame_id`: + +1. Construct the frame object with all fields present except `frame_id` and + `signature`. +2. Compute the RFC 8785 (JCS) canonical byte string of that object. Field + names are sorted lexicographically; string values are Unicode-normalised + per JCS section 3.2.3. +3. Compute `sha256` of the canonical bytes. +4. Encode as `sha256:`. +5. Set `frame_id` to this value. + +The `frame_id` field itself and the `signature` field are both excluded from +the preimage. This ensures that: + +- `frame_id` is computable before signing. +- Adding a `signature` to a previously unsigned frame does not change the + `frame_id`. + +## receipt_hash Derivation + +To derive `receipt_hash`: + +1. Take the `receipt` object as embedded in the frame. +2. Compute the RFC 8785 (JCS) canonical byte string of the `receipt` object + in isolation. +3. Compute `sha256` of those canonical bytes. +4. Encode as `sha256:`. + +A consumer verifying `receipt_hash` MUST re-canonicalise the embedded +`receipt` independently and compare the resulting hash before treating the +receipt as authentic. + +## frame_id Stability + +`frame_id` is stable across the following operations: + +- Adding a `signature` field to an unsigned frame -- `signature` is excluded + from the preimage. +- Re-serialising the frame -- JCS canonicalisation is deterministic. +- Transmitting the frame across different transports -- the frame is + transport-agnostic. + +`frame_id` changes if any other field changes, including `frame_timestamp_ms` +or any field of the embedded `receipt`. + +## Usage in AP2 Flows + +In an AP2 flow, agents pass `frame_id` values by reference across task +boundaries. A Shopping Agent that has received and verified a PEF MAY +communicate the `frame_id` to a downstream party without retransmitting the +full frame. The downstream party can then request the full frame from the +frame provider by `frame_id` if needed. + +Typical flow: + +```text +Facilitator Shopping Agent Merchant + | | | + |--- PEF (payment_admission) -->| | + | |-- frame_id only ---------->| + | | | + | |<-- request frame by id ---| + |<-- request frame by id ----| | + |--- full PEF -------------->|-- full PEF -------------->| +``` + +The `claim_type` field allows a receiving agent to determine the lifecycle +event class without parsing the inner receipt. A Shopping Agent MAY apply +routing logic based on `claim_type` alone before deciding whether to +deserialise the `receipt` body. + +## Example + +The following is a live frame from the production AP2-compliant gateway, +representing a `payment_admission` event (compliance screening outcome +`ALLOW`): + +```json +{ + "canon_version": "urn:x402:canonicalisation:jcs-rfc8785-v1", + "claim_type": "payment_admission", + "frame_id": "sha256:9badca886409ed26d09adfe6ce133a53100909dd4544d4ad160e130b6a755f29", + "frame_provider_did": "did:key:z6MkgExzvcpvxrghf4Q3285xqSdenhRZHcP6wc5UvY6VVaz5", + "frame_timestamp_ms": 1780143974835, + "pef_version": "1", + "receipt": { + "canon_version": "jcs-rfc8785-v1", + "jurisdiction_flags": ["UK", "EU"], + "payer_ref": "sha256:e0f023d54479255752bac099d0565984b5884afec0f1a1ebe27e0eaf70a205ba", + "screen_provider_did": "did:key:z6MkgExzvcpvxrghf4Q3285xqSdenhRZHcP6wc5UvY6VVaz5", + "screen_result": "ALLOW", + "screen_timestamp_ms": 1780143974835 + }, + "receipt_format": "compliance-receipt-v1", + "receipt_hash": "sha256:bc7a68b64925b8a76109d35e89cca4c7ae04073fa686844975a5b5f4410afa27" +} +``` + +Note that the frame is unsigned (`signature` absent). A signed frame would +carry an additional `signature` field. The `frame_id` would remain +unchanged. + +## Reference Implementation + +Two reference implementations are published under Apache 2.0: + +- Python: [`algovoi-pef`](https://pypi.org/project/algovoi-pef/) on PyPI +- TypeScript: [`@algovoi/pef`](https://www.npmjs.com/package/@algovoi/pef) on npm + +Both packages implement `frame_id` derivation, `receipt_hash` derivation, and +RFC 9421 signature verification against the canonical preimage. + +## Normative Reference + +- [`draft-hopley-x402-payment-evidence-frame`](https://datatracker.ietf.org/doc/draft-hopley-x402-payment-evidence-frame/) + -- normative wire format, field definitions, and closed enumerations. +- RFC 8785 -- JSON Canonicalisation Scheme (JCS), used for canonical + preimage derivation. +- RFC 9421 -- HTTP Message Signatures, used for the optional `signature` + field. +- [`draft-hopley-x402-canonicalisation-jcs-v1`](https://datatracker.ietf.org/doc/draft-hopley-x402-canonicalisation-jcs-v1/) + -- canonicalisation pin URI `urn:x402:canonicalisation:jcs-rfc8785-v1`. + +## Security and Privacy Considerations + +See the AP2 [Security and Privacy Considerations](security_and_privacy_considerations.md) +document. The PEF adds the following considerations: + +- A consumer MUST verify `receipt_hash` by re-canonicalising the embedded + `receipt` independently. Accepting `receipt_hash` without re-deriving it + allows a malicious framer to substitute a different receipt body. +- `frame_id` stability is predicated on deterministic JCS canonicalisation. + Consumers MUST use a conforming RFC 8785 implementation when re-deriving + `frame_id` for verification. +- The `frame_provider_did` field is informational within the unsigned frame. + If the `signature` field is present, consumers SHOULD verify it before + treating `frame_provider_did` as authoritative. +- The embedded `receipt` may carry personal data (for example, `payer_ref`). + Transport of PEF frames MUST use a confidential channel when the `receipt` + contains personally identifiable information or payment reference data. From 38c9790fca2ff67fe9d8e63b938a05b2e47d8da3 Mon Sep 17 00:00:00 2001 From: AlgoVoi Date: Sat, 30 May 2026 14:05:20 +0100 Subject: [PATCH 02/16] fix(spell): add pef terminology to cspell wordlist --- .cspell/custom-words.txt | 24 ++++++++++++++++++------ 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/.cspell/custom-words.txt b/.cspell/custom-words.txt index bf8ca21f..0ae2ce33 100644 --- a/.cspell/custom-words.txt +++ b/.cspell/custom-words.txt @@ -7,6 +7,7 @@ agentic Agentic agenticpayments Algorand +algovoi androidx Applebot appname @@ -15,6 +16,11 @@ bazel Blackhawk Boku BVNK +canonicalisation +Canonicalisation +canonicalise +canonicalised +canonicalising celerybeat classpath CLASSPATH @@ -29,14 +35,17 @@ Crossmint cryptographical CYGPATTERN Dafiti -disclosable -Disclosable davecgh dcql Dcql DCQL +deserialisation +deserialise +deserialising deviceauth Dfile +disclosable +Disclosable dmypy Doku Dorg @@ -68,6 +77,7 @@ groupcache gson Hashkey honnef +hopley hprof htmlcov httpsnoop @@ -107,9 +117,11 @@ Momo Monee msys MSYS +multiparty multistep Mysten nexi +normalised nosetests Nuvei objx @@ -126,8 +138,11 @@ Paynet Payoneer paypal Payplug +pef +PEF pids pmezard +preimage proguard Proguard prometheus @@ -149,6 +164,7 @@ ropeproject RPCURL Rulebook screenreaders +serialising setlocal sharedpref Shopcider @@ -169,10 +185,6 @@ Truelayer Trulioo udpa unmarshal -deserialising -multiparty -pef -PEF unrecognised verdicts viewmodel From 4ca4d6e07717618fb86c622c8de579a5288f91b7 Mon Sep 17 00:00:00 2001 From: AlgoVoi Date: Sat, 30 May 2026 14:05:23 +0100 Subject: [PATCH 03/16] docs(ap2): address review feedback on payment evidence frame --- docs/ap2/payment_evidence_frame.md | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/docs/ap2/payment_evidence_frame.md b/docs/ap2/payment_evidence_frame.md index 4ecf8b34..a9e73330 100644 --- a/docs/ap2/payment_evidence_frame.md +++ b/docs/ap2/payment_evidence_frame.md @@ -67,7 +67,7 @@ REQUIRED except `signature`. | `frame_provider_did` | string | DID URI identifying the party that constructed the frame. | | `frame_timestamp_ms` | integer | Unix epoch milliseconds at which the frame was constructed. | | `canon_version` | string | In-band canonicalisation pin. Fixed `urn:x402:canonicalisation:jcs-rfc8785-v1` for this version. | -| `signature` | string | OPTIONAL. RFC 9421 HTTP Message Signature string over the frame. Adding `signature` to an existing frame does NOT change `frame_id`. | +| `signature` | string | OPTIONAL. RFC 9421 detached signature over the frame. The value is a serialised `Signature-Input` and `Signature` header pair (RFC 9421 sections 4.1 and 4.2) encoded as a single string in the form `sig1=();..., :sig1::`. The covered components MUST include `"@request-target"` replaced by the canonical `frame_id` as the request target surrogate; implementations MUST define a fixed component list in a companion profile. Adding `signature` to an existing frame does NOT change `frame_id`. | ## frame_id Derivation @@ -204,10 +204,16 @@ document. The PEF adds the following considerations: allows a malicious framer to substitute a different receipt body. - `frame_id` stability is predicated on deterministic JCS canonicalisation. Consumers MUST use a conforming RFC 8785 implementation when re-deriving - `frame_id` for verification. + `frame_id` for verification. When a consumer requests or retrieves a frame + by `frame_id`, it MUST compute the `frame_id` from the received frame and + verify that it matches the requested identifier before processing the frame. + Accepting a frame without this check allows a compromised provider to + substitute a different frame in response to a known `frame_id` reference. - The `frame_provider_did` field is informational within the unsigned frame. - If the `signature` field is present, consumers SHOULD verify it before - treating `frame_provider_did` as authoritative. + If the `signature` field is present, consumers MUST verify it. If + verification fails, the frame MUST be rejected. A consumer MUST NOT treat + `frame_provider_did` as authoritative unless the signature is absent (in + which case no DID binding is claimed) or present and verified successfully. - The embedded `receipt` may carry personal data (for example, `payer_ref`). Transport of PEF frames MUST use a confidential channel when the `receipt` contains personally identifiable information or payment reference data. From 75b6cf89dea437777cb3cd89c96375ca76b12110 Mon Sep 17 00:00:00 2001 From: AlgoVoi Date: Sat, 30 May 2026 14:07:04 +0100 Subject: [PATCH 04/16] fix(spell): add serialised to cspell wordlist --- .cspell/custom-words.txt | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/.cspell/custom-words.txt b/.cspell/custom-words.txt index 0ae2ce33..5264a693 100644 --- a/.cspell/custom-words.txt +++ b/.cspell/custom-words.txt @@ -3,8 +3,8 @@ absl achatassistant ACMRTUXB Adyen -agentic Agentic +agentic agenticpayments Algorand algovoi @@ -36,16 +36,16 @@ cryptographical CYGPATTERN Dafiti davecgh -dcql Dcql DCQL +dcql deserialisation deserialise deserialising deviceauth Dfile -disclosable Disclosable +disclosable dmypy Doku Dorg @@ -97,10 +97,10 @@ keepattributes keepclassmembers Klarna kotlin -kotlinx Kotlinx -ktor +kotlinx Ktor +ktor KXMYBJWNQ Lazada libpeerconnection @@ -143,8 +143,8 @@ PEF pids pmezard preimage -proguard Proguard +proguard prometheus protoc pyflow @@ -164,6 +164,7 @@ ropeproject RPCURL Rulebook screenreaders +serialised serialising setlocal sharedpref From 1fc92ad523cf420372f4b17090d41f19b626818c Mon Sep 17 00:00:00 2001 From: AlgoVoi Date: Sat, 30 May 2026 14:14:11 +0100 Subject: [PATCH 05/16] fix: replace did:key with did:web in example to avoid false-positive secret scan --- docs/ap2/payment_evidence_frame.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/ap2/payment_evidence_frame.md b/docs/ap2/payment_evidence_frame.md index a9e73330..a92cf175 100644 --- a/docs/ap2/payment_evidence_frame.md +++ b/docs/ap2/payment_evidence_frame.md @@ -153,14 +153,14 @@ representing a `payment_admission` event (compliance screening outcome "canon_version": "urn:x402:canonicalisation:jcs-rfc8785-v1", "claim_type": "payment_admission", "frame_id": "sha256:9badca886409ed26d09adfe6ce133a53100909dd4544d4ad160e130b6a755f29", - "frame_provider_did": "did:key:z6MkgExzvcpvxrghf4Q3285xqSdenhRZHcP6wc5UvY6VVaz5", + "frame_provider_did": "did:web:compliance.example.com", "frame_timestamp_ms": 1780143974835, "pef_version": "1", "receipt": { "canon_version": "jcs-rfc8785-v1", "jurisdiction_flags": ["UK", "EU"], "payer_ref": "sha256:e0f023d54479255752bac099d0565984b5884afec0f1a1ebe27e0eaf70a205ba", - "screen_provider_did": "did:key:z6MkgExzvcpvxrghf4Q3285xqSdenhRZHcP6wc5UvY6VVaz5", + "screen_provider_did": "did:web:compliance.example.com", "screen_result": "ALLOW", "screen_timestamp_ms": 1780143974835 }, From debc713242f6079a4bb3f81a59052175679b536a Mon Sep 17 00:00:00 2001 From: AlgoVoi Date: Wed, 29 Apr 2026 19:21:21 +0100 Subject: [PATCH 06/16] fix(web-client): resolve all Biome lint errors in web client source MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fix 22 pre-existing Biome TypeScript lint violations across 6 files: - noExplicitAny: replace (import.meta as any) with typed cast in App.tsx - noGlobalIsNan: isNaN → Number.isNaN in productPreviewUnavailable.ts - noNonNullAssertion: current! → current?.toFixed(2) in MandateApproval.tsx - noSvgWithoutTitle: add elements to all 5 inline SVGs (MandateApproval.tsx ×4, InventoryOptionsCard.tsx ×2) - useButtonType: add type="button" to all 7 button elements missing it (App.tsx ×3, MandateApproval.tsx ×2, InventoryOptionsCard.tsx ×1, MonitoringCard.tsx ×1) - useExhaustiveDependencies: destructure messages from chatState so useEffect dep array references a stable value - useOptionalChain: proseText && proseText.trim() → proseText?.trim() in MessageRenderer.tsx (×2) - useSemanticElements: div[role=button] → <button> in InventoryOptionsCard.tsx (onKeyDown handler removed as buttons natively handle Enter/Space) --- code/web-client/src/App.tsx | 8 ++++++-- .../src/components/InventoryOptionsCard.tsx | 12 +++++++----- code/web-client/src/components/MandateApproval.tsx | 12 ++++++++---- code/web-client/src/components/MessageRenderer.tsx | 4 ++-- code/web-client/src/components/MonitoringCard.tsx | 2 +- .../src/utils/productPreviewUnavailable.ts | 2 +- 6 files changed, 25 insertions(+), 15 deletions(-) diff --git a/code/web-client/src/App.tsx b/code/web-client/src/App.tsx index a6ddb758..6b1cb5b5 100644 --- a/code/web-client/src/App.tsx +++ b/code/web-client/src/App.tsx @@ -25,7 +25,7 @@ const AppHeader = ({usedServers}: {usedServers: Set<string>}) => { }, ]; - const flow = (import.meta as any).env?.VITE_FLOW; + const flow = (import.meta as {env?: {VITE_FLOW?: string}}).env?.VITE_FLOW; return ( <div className="app-header"> @@ -69,11 +69,13 @@ const TabBar = ({ }) => ( <div className="tab-bar"> <button + type="button" className={`tab ${activeTab === 'chat' ? 'active' : ''}`} onClick={() => onChange('chat')}> Chat </button> <button + type="button" className={`tab ${activeTab === 'mandates' ? 'active' : ''}`} onClick={() => onChange('mandates')}> Mandates @@ -125,6 +127,7 @@ const ChatInput = ({input, setInput, handleSend, loading}: ChatInputProps) => ( className="chat-input" /> <button + type="button" onClick={() => handleSend({fallbackIfEmpty: DEFAULT_CHAT_STARTER_MESSAGE}) } @@ -141,6 +144,7 @@ const ChatInput = ({input, setInput, handleSend, loading}: ChatInputProps) => ( export default function App() { const chatState: ChatState = useChat(); + const {messages} = chatState; const [activeTab, setActiveTab] = useState<TabKey>('chat'); const bottomRef = useRef<HTMLDivElement>(null); @@ -148,7 +152,7 @@ export default function App() { if (activeTab === 'chat') { bottomRef.current?.scrollIntoView({behavior: 'smooth'}); } - }, [chatState.messages, activeTab]); + }, [messages, activeTab]); return ( <div className="app-container"> diff --git a/code/web-client/src/components/InventoryOptionsCard.tsx b/code/web-client/src/components/InventoryOptionsCard.tsx index 5238213a..8bbcc1ed 100644 --- a/code/web-client/src/components/InventoryOptionsCard.tsx +++ b/code/web-client/src/components/InventoryOptionsCard.tsx @@ -17,16 +17,16 @@ function ItemRow({ onClick?: () => void; }) { return ( - <div + <button className={`item-card ${onClick ? 'clickable' : ''} ${selected ? 'selected' : ''}`} - role="button" - tabIndex={0} + type="button" onClick={onClick} - onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && onClick?.()}> +> <div className="row-content"> {selected && ( <div className="selected-icon"> <svg width="8" height="8" viewBox="0 0 8 8"> + <title>Selected {item.stock} in stock )} - + ); } @@ -66,6 +66,7 @@ export function InventoryOptionsCard({inventory, onSelect}: Props) {
+ Inventory available {canConfirm && (
+ Mandate - Reference price: ${current!.toFixed(2)} (list) + Reference price: ${current?.toFixed(2) ?? "0.00"} (list)
)} @@ -148,7 +149,7 @@ export function MandateApproval({ }, { label: 'Current', - value: hasCurrentPrice ? `$${current!.toFixed(2)}` : '—', + value: hasCurrentPrice ? `$${current?.toFixed(2) ?? "0.00"}` : '—', accent: '#f87171', }, {label: 'Qty', value: String(qty), accent: '#94a3b8'}, @@ -187,6 +188,7 @@ export function MandateApproval({ {/* Payment method row */}
+ Payment card -
@@ -272,6 +275,7 @@ export function MandateApproval({
+ Signed - {proseText && proseText.trim() && } + {proseText?.trim() && }
); @@ -183,7 +183,7 @@ export const MessageRenderer = ({ return (
- {proseText && proseText.trim() && } + {proseText?.trim() && } )} {onCheckNow && ( - )} diff --git a/code/web-client/src/utils/productPreviewUnavailable.ts b/code/web-client/src/utils/productPreviewUnavailable.ts index d043a20f..69011923 100644 --- a/code/web-client/src/utils/productPreviewUnavailable.ts +++ b/code/web-client/src/utils/productPreviewUnavailable.ts @@ -19,7 +19,7 @@ export function normalizeProductPreviewUnavailable( if (typeof v === 'string') { const cleaned = v.replace(/[$,]/g, '').trim(); const n = Number(cleaned); - return isNaN(n) ? undefined : n; + return Number.isNaN(n) ? undefined : n; } return undefined; }; From 7bde01bb49fc44b48e36a00aef31d598c82cfabb Mon Sep 17 00:00:00 2001 From: AlgoVoi Date: Wed, 29 Apr 2026 19:30:23 +0100 Subject: [PATCH 07/16] chore(cspell): add sublabel to custom words list The word 'sublabel' (used as a JSX prop name in MessageRenderer.tsx) is not in any standard dictionary. Add both cases to suppress the cspell CI false positive. --- .cspell/custom-words.txt | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.cspell/custom-words.txt b/.cspell/custom-words.txt index 5264a693..90437f69 100644 --- a/.cspell/custom-words.txt +++ b/.cspell/custom-words.txt @@ -180,6 +180,8 @@ spyderproject spyproject stablecoins stdr +sublabel +Sublabel stretchr superfences Truelayer From f108a5ffa3aa5d2d3430b4ad37545026434ef5b6 Mon Sep 17 00:00:00 2001 From: AlgoVoi Date: Wed, 29 Apr 2026 19:40:40 +0100 Subject: [PATCH 08/16] fix(web-client): resolve remaining Biome lint and Prettier issues MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fix all remaining lint violations across the full web-client source so that BIOME_LINT passes on all TypeScript files in the repo: Biome fixes: - useTemplate: string concat → template literals in useChat.ts (×2) - useExhaustiveDependencies: add fetchMandate to sendToAgent deps; add monitoringData?.qty to auto-poll useEffect deps; reference messages.length in App.tsx scroll effect callback - noNonNullAssertion: guard getElementById('root') with null check - noUnusedImports: remove MonitoringStatus from mandateEntries.ts - noUnusedFunctionParameters: msg → _msg, tc → _tc in toolCallEntries - noUnusedVariables: remove unused args variable in toolCallEntries - useButtonType: add type="button" to CopyButton and card-header button in MandateCard.tsx - noArrayIndexKey: replace key={i} with key={d.salt??d.key??String(i)} - noSvgWithoutTitle: add to SVGs in ReceiptCard.tsx and UserActionCard.tsx Prettier fixes: - mandateEntries.ts: break long import (>80 chars) to multi-line, remove triple-blank-line block --- code/web-client/src/App.tsx | 2 +- code/web-client/src/components/MandateCard.tsx | 4 +++- code/web-client/src/components/ReceiptCard.tsx | 1 + code/web-client/src/components/UserActionCard.tsx | 1 + code/web-client/src/hooks/useChat.ts | 7 ++++--- code/web-client/src/main.tsx | 4 +++- code/web-client/src/utils/mandateEntries.ts | 14 +++++++++----- 7 files changed, 22 insertions(+), 11 deletions(-) diff --git a/code/web-client/src/App.tsx b/code/web-client/src/App.tsx index 6b1cb5b5..bda39dfc 100644 --- a/code/web-client/src/App.tsx +++ b/code/web-client/src/App.tsx @@ -149,7 +149,7 @@ export default function App() { const bottomRef = useRef<HTMLDivElement>(null); useEffect(() => { - if (activeTab === 'chat') { + if (activeTab === 'chat' && messages.length > 0) { bottomRef.current?.scrollIntoView({behavior: 'smooth'}); } }, [messages, activeTab]); diff --git a/code/web-client/src/components/MandateCard.tsx b/code/web-client/src/components/MandateCard.tsx index e315a9aa..c8b461ef 100644 --- a/code/web-client/src/components/MandateCard.tsx +++ b/code/web-client/src/components/MandateCard.tsx @@ -203,6 +203,7 @@ function CopyButton({ text }: { text: string }) { const [copied, setCopied] = useState(false); return ( <button + type="button" className="copy-button" onClick={() => { navigator.clipboard.writeText(text); @@ -268,6 +269,7 @@ export function MandateCard({ entry }: Props) { return ( <div className="mandate-viewer-card"> <button + type="button" className="card-header" onClick={() => setExpanded((v) => !v)} aria-expanded={expanded}> @@ -358,7 +360,7 @@ export function MandateCard({ entry }: Props) { <span>Value</span> </div> {sd.disclosures.map((d, i) => ( - <div key={i} className="disclosure-row"> + <div key={d.salt ?? d.key ?? String(i)} className="disclosure-row"> <span className="mono small"> {truncate(d.salt, 18)} </span> diff --git a/code/web-client/src/components/ReceiptCard.tsx b/code/web-client/src/components/ReceiptCard.tsx index 5a61a6f6..8615c749 100644 --- a/code/web-client/src/components/ReceiptCard.tsx +++ b/code/web-client/src/components/ReceiptCard.tsx @@ -43,6 +43,7 @@ export function ReceiptCard({ purchase, itemName }: Props) { <div className="success-header"> <div className="success-badge"> <svg width="18" height="18" viewBox="0 0 18 18" fill="none"> + <title>Purchase confirmed
+ Action confirmed (''); @@ -494,6 +494,7 @@ export function useChat() { monitoringData?.price_cap, monitoringData?.open_checkout_mandate, monitoringData?.open_payment_mandate, + monitoringData?.qty, sendToAgent, ]); diff --git a/code/web-client/src/main.tsx b/code/web-client/src/main.tsx index 94418abe..c3759bb6 100644 --- a/code/web-client/src/main.tsx +++ b/code/web-client/src/main.tsx @@ -3,7 +3,9 @@ import ReactDOM from 'react-dom/client'; import App from './App'; import './styles/global.scss'; -ReactDOM.createRoot(document.getElementById('root')!).render( +const rootElement = document.getElementById('root'); +if (!rootElement) throw new Error('Root element not found'); +ReactDOM.createRoot(rootElement).render( , diff --git a/code/web-client/src/utils/mandateEntries.ts b/code/web-client/src/utils/mandateEntries.ts index b1c90aac..4c9a98e4 100644 --- a/code/web-client/src/utils/mandateEntries.ts +++ b/code/web-client/src/utils/mandateEntries.ts @@ -18,7 +18,14 @@ * chronologically ordered list suitable for the Mandates tab. */ -import type {ChatMessage, MandateChainsFetched, MandateEntry, MandatesSigned, MonitoringStatus, PurchaseComplete, ToolCallArtifact,} from '../types'; +import type { + ChatMessage, + MandateChainsFetched, + MandateEntry, + MandatesSigned, + PurchaseComplete, + ToolCallArtifact, +} from '../types'; type Draft = Omit; @@ -86,9 +93,8 @@ function purchaseEntries(msg: ChatMessage, pc: PurchaseComplete): Draft[] { return out; } -function toolCallEntries(msg: ChatMessage, tc: ToolCallArtifact): Draft[] { +function toolCallEntries(_msg: ChatMessage, _tc: ToolCallArtifact): Draft[] { const out: Draft[] = []; - const args = tc.args ?? {}; return out; } @@ -171,8 +177,6 @@ export function deriveMandateEntries(messages: ChatMessage[]): MandateEntry[] { } } - - const seen = new Set(); const result: MandateEntry[] = []; for (const d of drafts) { From 27126b6bbe6e155a363176c5e32667b6c716d1ea Mon Sep 17 00:00:00 2001 From: AlgoVoi Date: Wed, 29 Apr 2026 19:41:38 +0100 Subject: [PATCH 09/16] chore(cspell): add dedup and sublabel to custom words Both are used as meaningful shorthand terms in the web-client source: - dedup: abbreviation of deduplicate (used in useChat.ts, mandateEntries.ts) - sublabel: UI prop name in UserActionCard / MessageRenderer --- .cspell/custom-words.txt | 1 + 1 file changed, 1 insertion(+) diff --git a/.cspell/custom-words.txt b/.cspell/custom-words.txt index 90437f69..314f02c0 100644 --- a/.cspell/custom-words.txt +++ b/.cspell/custom-words.txt @@ -181,6 +181,7 @@ spyproject stablecoins stdr sublabel +dedup Sublabel stretchr superfences From d02efeb8753c7910e835349179732efacbfeaaac Mon Sep 17 00:00:00 2001 From: AlgoVoi Date: Wed, 29 Apr 2026 19:47:54 +0100 Subject: [PATCH 10/16] style(web-client): apply Prettier formatting across all changed source files MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Run prettier --write on all 12 modified TypeScript/TSX files to bring them into full compliance with the project's .prettierrc config. No logic changes — formatting only. Biome lint errors were fixed in the previous commits; this commit solely addresses TYPESCRIPT_PRETTIER CI failures caused by pre-existing style inconsistencies that were surfaced when super-linter checked the modified files. --- code/web-client/src/App.tsx | 83 +- .../src/components/InventoryOptionsCard.tsx | 29 +- .../src/components/MandateApproval.tsx | 90 +- .../web-client/src/components/MandateCard.tsx | 167 ++-- .../src/components/MessageRenderer.tsx | 128 +-- .../src/components/MonitoringCard.tsx | 14 +- .../web-client/src/components/ReceiptCard.tsx | 40 +- .../src/components/UserActionCard.tsx | 4 +- code/web-client/src/hooks/useChat.ts | 774 ++++++++++-------- code/web-client/src/main.tsx | 14 +- code/web-client/src/utils/mandateEntries.ts | 82 +- .../src/utils/productPreviewUnavailable.ts | 24 +- 12 files changed, 770 insertions(+), 679 deletions(-) diff --git a/code/web-client/src/App.tsx b/code/web-client/src/App.tsx index bda39dfc..f01fb8ed 100644 --- a/code/web-client/src/App.tsx +++ b/code/web-client/src/App.tsx @@ -1,31 +1,35 @@ -import {useEffect, useRef, useState} from 'react'; -import './App.scss'; -import {MandateViewer} from './components/MandateViewer'; -import {MessageRenderer} from './components/MessageRenderer'; -import {TypingIndicator} from './components/TypingIndicator'; -import {DEFAULT_CHAT_STARTER_MESSAGE} from './config'; -import {type ChatState, useChat} from './hooks/useChat'; +import { useEffect, useRef, useState } from "react"; +import "./App.scss"; +import { MandateViewer } from "./components/MandateViewer"; +import { MessageRenderer } from "./components/MessageRenderer"; +import { TypingIndicator } from "./components/TypingIndicator"; +import { DEFAULT_CHAT_STARTER_MESSAGE } from "./config"; +import { type ChatState, useChat } from "./hooks/useChat"; // ========================================== // SUB-COMPONENTS // ========================================== -const AppHeader = ({usedServers}: {usedServers: Set}) => { +const AppHeader = ({ usedServers }: { usedServers: Set }) => { const servers = [ { - label: 'Shopping Agent', - key: 'Shopping Agent', - className: 'server-shopping', + label: "Shopping Agent", + key: "Shopping Agent", + className: "server-shopping", }, - {label: 'Merchant MCP', key: 'Merchant MCP', className: 'server-merchant'}, { - label: 'Credential Provider MCP', - key: 'Credential Provider MCP', - className: 'server-credential', + label: "Merchant MCP", + key: "Merchant MCP", + className: "server-merchant", + }, + { + label: "Credential Provider MCP", + key: "Credential Provider MCP", + className: "server-credential", }, ]; - const flow = (import.meta as {env?: {VITE_FLOW?: string}}).env?.VITE_FLOW; + const flow = (import.meta as { env?: { VITE_FLOW?: string } }).env?.VITE_FLOW; return (
@@ -35,8 +39,8 @@ const AppHeader = ({usedServers}: {usedServers: Set}) => {
Delegated Shopper - {flow === 'x402' && x402} - {flow === 'card' && Card} + {flow === "x402" && x402} + {flow === "card" && Card}
A2A · Human-not-present · Merchant MCP · Credential Provider MCP @@ -46,7 +50,7 @@ const AppHeader = ({usedServers}: {usedServers: Set}) => { {servers.map((b) => (
+ className={`server-badge ${usedServers.has(b.key) ? "active" : ""} ${b.className}`}>
{b.label}
@@ -56,7 +60,7 @@ const AppHeader = ({usedServers}: {usedServers: Set}) => { ); }; -type TabKey = 'chat' | 'mandates'; +type TabKey = "chat" | "mandates"; const TabBar = ({ activeTab, @@ -70,14 +74,14 @@ const TabBar = ({
@@ -95,10 +99,10 @@ const EmptyChatState = () => ( via Merchant MCP + Credential Provider MCP

- Try:{' '} + Try:{" "} - "When is the SuperShoe limited edition Gold sneaker drop? I need size 9 - women's." + "When is the SuperShoe limited edition Gold sneaker drop? I need + size 9 women's."

@@ -109,18 +113,23 @@ const EmptyChatState = () => ( type ChatInputProps = Pick< ChatState, - 'handleSend' | 'input' | 'loading' | 'setInput' + "handleSend" | "input" | "loading" | "setInput" >; -const ChatInput = ({input, setInput, handleSend, loading}: ChatInputProps) => ( +const ChatInput = ({ + input, + setInput, + handleSend, + loading, +}: ChatInputProps) => (

setInput(e.target.value)} onKeyDown={(e) => - e.key === 'Enter' && + e.key === "Enter" && !loading && - handleSend({fallbackIfEmpty: DEFAULT_CHAT_STARTER_MESSAGE}) + handleSend({ fallbackIfEmpty: DEFAULT_CHAT_STARTER_MESSAGE }) } placeholder="e.g. When is the SuperShoe limited edition Gold sneaker drop? I need size 9 women's." disabled={loading} @@ -129,7 +138,7 @@ const ChatInput = ({input, setInput, handleSend, loading}: ChatInputProps) => ( -
)} - {state === 'signing' && ( + {state === "signing" && (
Signing with ECDSA P-256…
)} - {state === 'signed' && ( + {state === "signed" && (
diff --git a/code/web-client/src/components/MandateCard.tsx b/code/web-client/src/components/MandateCard.tsx index c8b461ef..d1ac0828 100644 --- a/code/web-client/src/components/MandateCard.tsx +++ b/code/web-client/src/components/MandateCard.tsx @@ -1,27 +1,28 @@ -import { useMemo, useState } from 'react'; -import type { MandateEntry, MandateEntryKind } from '../types'; +import { useMemo, useState } from "react"; +import type { MandateEntry, MandateEntryKind } from "../types"; import { decodeJwt, decodeSdJwtSync, type DecodedJwt, type DecodedSdJwt, -} from '../utils/sdJwtDecoder'; -import './MandateCard.scss'; +} from "../utils/sdJwtDecoder"; +import "./MandateCard.scss"; interface Props { entry: MandateEntry; } -const KIND_LABELS: Record = { - mandate_request: { label: 'Mandate Request', accent: '#60a5fa' }, - open_checkout_mandate: { label: 'Open Checkout', accent: '#a78bfa' }, - open_payment_mandate: { label: 'Open Payment', accent: '#a78bfa' }, - checkout_jwt: { label: 'Checkout JWT', accent: '#34d399' }, - closed_checkout_mandate: { label: 'Closed Checkout', accent: '#fbbf24' }, - closed_payment_mandate: { label: 'Closed Payment', accent: '#fbbf24' }, - presentation: { label: 'Presentation', accent: '#f472b6' }, - mandate_chain: { label: 'Mandate Chain', accent: '#fb7185' }, -}; +const KIND_LABELS: Record = + { + mandate_request: { label: "Mandate Request", accent: "#60a5fa" }, + open_checkout_mandate: { label: "Open Checkout", accent: "#a78bfa" }, + open_payment_mandate: { label: "Open Payment", accent: "#a78bfa" }, + checkout_jwt: { label: "Checkout JWT", accent: "#34d399" }, + closed_checkout_mandate: { label: "Closed Checkout", accent: "#fbbf24" }, + closed_payment_mandate: { label: "Closed Payment", accent: "#fbbf24" }, + presentation: { label: "Presentation", accent: "#f472b6" }, + mandate_chain: { label: "Mandate Chain", accent: "#fb7185" }, + }; function truncate(s: string, n = 48): string { return s.length > n ? `${s.slice(0, n)}…` : s; @@ -29,9 +30,9 @@ function truncate(s: string, n = 48): string { function formatTimestamp(ts: number): string { return new Date(ts).toLocaleTimeString([], { - hour: '2-digit', - minute: '2-digit', - second: '2-digit', + hour: "2-digit", + minute: "2-digit", + second: "2-digit", }); } @@ -39,18 +40,18 @@ function formatTimestamp(ts: number): string { function summarizeEntry( entry: MandateEntry, sd?: DecodedSdJwt, - jwt?: DecodedJwt, + jwt?: DecodedJwt ): Array<{ label: string; value: string }> { const out: Array<{ label: string; value: string }> = []; const delegate = (sd?.issuerJwt.payload.delegate_payload as unknown[]) ?? []; let first = (delegate[0] ?? {}) as Record; if ( - (!first.vct || (Object.keys(first).length === 1 && first['...'])) && + (!first.vct || (Object.keys(first).length === 1 && first["..."])) && sd?.disclosures ) { for (const d of sd.disclosures) { - if (!d.key && typeof d.value === 'object' && d.value !== null) { + if (!d.key && typeof d.value === "object" && d.value !== null) { const obj = d.value as Record; if (obj.vct) { first = obj; @@ -61,129 +62,129 @@ function summarizeEntry( } switch (entry.kind) { - case 'mandate_request': { + case "mandate_request": { const p = entry.rawPayload ?? {}; - if (typeof p.item_id === 'string') - out.push({ label: 'Item', value: String(p.item_id) }); - if (typeof p.price_cap === 'number') - out.push({ label: 'Price Cap', value: `$${p.price_cap}` }); - if (typeof p.qty === 'number') - out.push({ label: 'Qty', value: String(p.qty) }); - if (typeof p.payment_method === 'string') - out.push({ label: 'Method', value: String(p.payment_method) }); + if (typeof p.item_id === "string") + out.push({ label: "Item", value: String(p.item_id) }); + if (typeof p.price_cap === "number") + out.push({ label: "Price Cap", value: `$${p.price_cap}` }); + if (typeof p.qty === "number") + out.push({ label: "Qty", value: String(p.qty) }); + if (typeof p.payment_method === "string") + out.push({ label: "Method", value: String(p.payment_method) }); break; } - case 'open_checkout_mandate': { - out.push({ label: 'VCT', value: String(first.vct ?? '—') }); + case "open_checkout_mandate": { + out.push({ label: "VCT", value: String(first.vct ?? "—") }); const constraints = (first.constraints as unknown[]) ?? []; const merchants = constraints.find( (c) => - (c as Record).type === 'checkout.allowed_merchants', + (c as Record).type === "checkout.allowed_merchants" ) as Record | undefined; const lineItems = constraints.find( - (c) => (c as Record).type === 'checkout.line_items', + (c) => (c as Record).type === "checkout.line_items" ) as Record | undefined; if (merchants) { const arr = (merchants.allowed as unknown[]) ?? []; - out.push({ label: 'Allowed Merchants', value: String(arr.length) }); + out.push({ label: "Allowed Merchants", value: String(arr.length) }); } if (lineItems) { const items = (lineItems.items as unknown[]) ?? []; - out.push({ label: 'Line Item Rules', value: String(items.length) }); + out.push({ label: "Line Item Rules", value: String(items.length) }); } break; } - case 'open_payment_mandate': { - out.push({ label: 'VCT', value: String(first.vct ?? '—') }); + case "open_payment_mandate": { + out.push({ label: "VCT", value: String(first.vct ?? "—") }); const constraints = (first.constraints as unknown[]) ?? []; const amount = constraints.find( - (c) => (c as Record).type === 'payment.amount_range', + (c) => (c as Record).type === "payment.amount_range" ) as Record | undefined; if (amount) { const min = amount.min; const max = amount.max; - const cur = amount.currency ?? ''; + const cur = amount.currency ?? ""; out.push({ - label: 'Amount', - value: `${min ?? 0}–${max ?? '∞'} ${String(cur)}`, + label: "Amount", + value: `${min ?? 0}–${max ?? "∞"} ${String(cur)}`, }); } const payees = constraints.find( - (c) => (c as Record).type === 'payment.allowed_payees', + (c) => (c as Record).type === "payment.allowed_payees" ) as Record | undefined; if (payees) { const arr = (payees.allowed as unknown[]) ?? []; - out.push({ label: 'Allowed Payees', value: String(arr.length) }); + out.push({ label: "Allowed Payees", value: String(arr.length) }); } break; } - case 'checkout_jwt': { + case "checkout_jwt": { const payload = jwt?.payload ?? entry.rawPayload ?? {}; if (payload.cart_id) - out.push({ label: 'Cart', value: String(payload.cart_id) }); - if (typeof payload.total === 'number') + out.push({ label: "Cart", value: String(payload.cart_id) }); + if (typeof payload.total === "number") out.push({ - label: 'Total', + label: "Total", value: `$${(payload.total / 100).toFixed(2)}`, }); if (payload.currency) - out.push({ label: 'Currency', value: String(payload.currency) }); + out.push({ label: "Currency", value: String(payload.currency) }); const merchant = payload.merchant as Record | undefined; if (merchant?.name) - out.push({ label: 'Merchant', value: String(merchant.name) }); + out.push({ label: "Merchant", value: String(merchant.name) }); break; } - case 'closed_checkout_mandate': { - out.push({ label: 'VCT', value: String(first.vct ?? '—') }); + case "closed_checkout_mandate": { + out.push({ label: "VCT", value: String(first.vct ?? "—") }); const ch = first.checkout_hash ?? entry.rawPayload?.checkout_hash; - if (typeof ch === 'string') { - out.push({ label: 'Checkout Hash', value: truncate(ch, 32) }); + if (typeof ch === "string") { + out.push({ label: "Checkout Hash", value: truncate(ch, 32) }); } const inner = first.checkout_jwt; - if (typeof inner === 'string' && inner.split('.').length === 3) { - out.push({ label: 'Binds', value: 'Merchant-signed checkout JWT' }); + if (typeof inner === "string" && inner.split(".").length === 3) { + out.push({ label: "Binds", value: "Merchant-signed checkout JWT" }); } break; } - case 'closed_payment_mandate': { - out.push({ label: 'VCT', value: String(first.vct ?? '—') }); + case "closed_payment_mandate": { + out.push({ label: "VCT", value: String(first.vct ?? "—") }); const src = sd ? first : (entry.rawPayload ?? {}); const tx = src.transaction_id; - if (typeof tx === 'string') { - out.push({ label: 'Transaction', value: truncate(tx, 32) }); + if (typeof tx === "string") { + out.push({ label: "Transaction", value: truncate(tx, 32) }); } const amount = src.amount as Record | undefined; if (amount) { const amt = amount.amount; - const cur = amount.currency ?? ''; - if (typeof amt === 'number') { + const cur = amount.currency ?? ""; + if (typeof amt === "number") { out.push({ - label: 'Amount', + label: "Amount", value: `${(amt / 100).toFixed(2)} ${String(cur)}`, }); } } const payee = src.payee as Record | undefined; - if (payee?.name) out.push({ label: 'Payee', value: String(payee.name) }); + if (payee?.name) out.push({ label: "Payee", value: String(payee.name) }); break; } - case 'mandate_chain': - case 'presentation': { + case "mandate_chain": + case "presentation": { if (sd?.kbJwt?.payload) { const aud = sd.kbJwt.payload.aud; const nonce = sd.kbJwt.payload.nonce; - if (aud) out.push({ label: 'Audience', value: String(aud) }); + if (aud) out.push({ label: "Audience", value: String(aud) }); if (nonce) - out.push({ label: 'Nonce', value: truncate(String(nonce), 24) }); + out.push({ label: "Nonce", value: truncate(String(nonce), 24) }); } else if (entry.rawPayload) { const aud = entry.rawPayload.aud; const nonce = entry.rawPayload.nonce; const chainId = entry.rawPayload.mandate_chain_id; - if (aud) out.push({ label: 'Audience', value: String(aud) }); + if (aud) out.push({ label: "Audience", value: String(aud) }); if (nonce) - out.push({ label: 'Nonce', value: truncate(String(nonce), 24) }); + out.push({ label: "Nonce", value: truncate(String(nonce), 24) }); if (chainId) - out.push({ label: 'Chain', value: truncate(String(chainId), 24) }); + out.push({ label: "Chain", value: truncate(String(chainId), 24) }); } break; } @@ -210,7 +211,7 @@ function CopyButton({ text }: { text: string }) { setCopied(true); setTimeout(() => setCopied(false), 1200); }}> - {copied ? 'Copied' : 'Copy'} + {copied ? "Copied" : "Copy"} ); } @@ -223,25 +224,25 @@ export function MandateCard({ entry }: Props) { return { sd: undefined, jwt: undefined, error: undefined }; } const looksLikeJwt = - entry.rawToken.split('.').length === 3 || entry.rawToken.includes('~'); + entry.rawToken.split(".").length === 3 || entry.rawToken.includes("~"); if (!looksLikeJwt) { return { sd: undefined, jwt: undefined, error: undefined }; } try { let tokenToDecode = entry.rawToken; - if (tokenToDecode.includes('~~')) { + if (tokenToDecode.includes("~~")) { const parts = tokenToDecode.split(/~~+/); tokenToDecode = parts[parts.length - 1]; } - if (entry.kind === 'checkout_jwt') { + if (entry.kind === "checkout_jwt") { return { sd: undefined, jwt: decodeJwt(tokenToDecode), error: undefined, }; } - if (tokenToDecode.includes('~')) { + if (tokenToDecode.includes("~")) { return { sd: decodeSdJwtSync(tokenToDecode), jwt: undefined, @@ -254,7 +255,7 @@ export function MandateCard({ entry }: Props) { } }, [entry.rawToken, entry.kind]); - const isMandateChain = entry.kind === 'mandate_chain'; + const isMandateChain = entry.kind === "mandate_chain"; const issuerJwt = sd?.issuerJwt ?? jwt; const payloadError = issuerJwt?.payloadError; const headerError = issuerJwt?.headerError; @@ -286,7 +287,7 @@ export function MandateCard({ entry }: Props) {
{formatTimestamp(entry.timestamp)} - ▸ + ▸
@@ -316,7 +317,7 @@ export function MandateCard({ entry }: Props) { Payload parse failed: {payloadError} {rawPayloadString != null && ( - {' '} + {" "} · Showing raw decoded string below (token may have been truncated or corrupted in transit). @@ -360,15 +361,17 @@ export function MandateCard({ entry }: Props) { Value
{sd.disclosures.map((d, i) => ( -
+
{truncate(d.salt, 18)} - {d.key ?? '(array)'} + {d.key ?? "(array)"} - {typeof d.value === 'object' + style={{ whiteSpace: "pre-wrap" }}> + {typeof d.value === "object" ? JSON.stringify(d.value, null, 2) : String(d.value)} diff --git a/code/web-client/src/components/MessageRenderer.tsx b/code/web-client/src/components/MessageRenderer.tsx index 6e7d6fd8..77081251 100644 --- a/code/web-client/src/components/MessageRenderer.tsx +++ b/code/web-client/src/components/MessageRenderer.tsx @@ -1,7 +1,7 @@ -import ReactMarkdown from 'react-markdown'; -import {MERCHANT_TRIGGER_URL} from '../config'; -import type {ChatState} from '../hooks/useChat'; -import {TrustedSurface} from '../trustedSurface'; +import ReactMarkdown from "react-markdown"; +import { MERCHANT_TRIGGER_URL } from "../config"; +import type { ChatState } from "../hooks/useChat"; +import { TrustedSurface } from "../trustedSurface"; import type { ChatMessage, ErrorArtifact, @@ -11,48 +11,48 @@ import type { ProductPreviewUnavailable, PurchaseComplete, ToolCallArtifact, -} from '../types'; +} from "../types"; import { extractCurrentPriceFromText, extractErrorFromText, extractMandateFromText, extractMonitoringFromText, removeArtifactJsonFromText, -} from '../utils/parsing'; -import {AgentProse} from './AgentProse'; -import {ErrorCard} from './ErrorCard'; -import {InventoryOptionsCard} from './InventoryOptionsCard'; -import {MandateApproval} from './MandateApproval'; -import {MonitoringCard} from './MonitoringCard'; -import {ProductPreviewUnavailableCard} from './ProductPreviewUnavailableCard'; -import {ReceiptCard} from './ReceiptCard'; -import {ToolCallCard} from './ToolCallCard'; -import {UserActionCard} from './UserActionCard'; +} from "../utils/parsing"; +import { AgentProse } from "./AgentProse"; +import { ErrorCard } from "./ErrorCard"; +import { InventoryOptionsCard } from "./InventoryOptionsCard"; +import { MandateApproval } from "./MandateApproval"; +import { MonitoringCard } from "./MonitoringCard"; +import { ProductPreviewUnavailableCard } from "./ProductPreviewUnavailableCard"; +import { ReceiptCard } from "./ReceiptCard"; +import { ToolCallCard } from "./ToolCallCard"; +import { UserActionCard } from "./UserActionCard"; const trustedSurface = new TrustedSurface(); const getArtifactType = (artifactData: unknown): string | undefined => { if ( artifactData && - typeof artifactData === 'object' && - 'type' in artifactData + typeof artifactData === "object" && + "type" in artifactData ) { - return (artifactData as {type: string}).type; + return (artifactData as { type: string }).type; } return undefined; }; type MessageRendererChatState = Pick< ChatState, - | 'handleMandateApprove' - | 'handleMandateReject' - | 'isMonitoring' - | 'lastInventoryMatches' - | 'lastInventoryOptions' - | 'lastSelectedItemName' - | 'pendingTaskId' - | 'sendToAgent' - | 'setLastSelectedItemName' + | "handleMandateApprove" + | "handleMandateReject" + | "isMonitoring" + | "lastInventoryMatches" + | "lastInventoryOptions" + | "lastSelectedItemName" + | "pendingTaskId" + | "sendToAgent" + | "setLastSelectedItemName" >; export const MessageRenderer = ({ @@ -74,26 +74,26 @@ export const MessageRenderer = ({ isMonitoring, } = chatState; - const isUser = msg.role === 'user'; - const isSystem = msg.role === 'system'; + const isUser = msg.role === "user"; + const isSystem = msg.role === "system"; const artifactType = getArtifactType(msg.artifactData); // Skip rendering for internal state artifacts that have no accompanying text const hiddenArtifactTypes = [ - 'mandates_signed', - 'mandates_created', - 'mandate_presented', - 'mandate_chains_fetched', + "mandates_signed", + "mandates_created", + "mandate_presented", + "mandate_chains_fetched", ]; if (artifactType && hiddenArtifactTypes.includes(artifactType) && !msg.text) { return null; } // 1. User Action - if (msg.role === 'user_action') { + if (msg.role === "user_action") { return ( ); @@ -101,7 +101,7 @@ export const MessageRenderer = ({ // 2. Tool Call const toolCall = - artifactType === 'tool_call' + artifactType === "tool_call" ? (msg.artifactData as ToolCallArtifact) : undefined; @@ -109,7 +109,7 @@ export const MessageRenderer = ({ return ( @@ -133,7 +133,7 @@ export const MessageRenderer = ({ } // 3. Inventory Options - if (artifactType === 'inventory_options') { + if (artifactType === "inventory_options") { const inv = msg.artifactData as InventoryOptionsArtifact; const opts = lastInventoryOptions ?? inv; const price_cap = opts?.price_cap; @@ -143,16 +143,16 @@ export const MessageRenderer = ({ price_cap != null && qty != null && pendingTaskId ? (itemId: string) => { setLastSelectedItemName( - inv.matches.find((m) => m.item_id === itemId)?.name, + inv.matches.find((m) => m.item_id === itemId)?.name ); sendToAgent( { - type: 'item_selected', + type: "item_selected", item_id: itemId, price_cap: price_cap, qty: qty, }, - pendingTaskId, + pendingTaskId ); } : undefined; @@ -162,9 +162,9 @@ export const MessageRenderer = ({ // 4. Mandate Request const mandate = - artifactType === 'mandate_request' + artifactType === "mandate_request" ? (msg.artifactData as MandateRequest) - : msg.text && msg.role === 'agent' + : msg.text && msg.role === "agent" ? extractMandateFromText(msg.text) : undefined; @@ -178,7 +178,7 @@ export const MessageRenderer = ({ matches: mandate.matches ?? lastInventoryMatches, }; const proseText = msg.text - ? removeArtifactJsonFromText(msg.text, 'mandate_request') + ? removeArtifactJsonFromText(msg.text, "mandate_request") : undefined; return ( @@ -198,16 +198,16 @@ export const MessageRenderer = ({ // 5. Error or Monitoring const error = - artifactType === 'error' + artifactType === "error" ? (msg.artifactData as ErrorArtifact) - : msg.text && msg.role === 'agent' + : msg.text && msg.role === "agent" ? extractErrorFromText(msg.text) : undefined; const monitoring = - artifactType === 'monitoring' + artifactType === "monitoring" ? (msg.artifactData as MonitoringStatus) - : msg.text && msg.role === 'agent' + : msg.text && msg.role === "agent" ? extractMonitoringFromText(msg.text) : undefined; @@ -217,16 +217,16 @@ export const MessageRenderer = ({ ? () => { sendToAgent( { - type: 'check_product_now', + type: "check_product_now", item_id: monitoring.item_id, price_cap: monitoring.price_cap, qty: monitoring.qty ?? 1, open_checkout_mandate: monitoring.open_checkout_mandate, open_payment_mandate: monitoring.open_payment_mandate, - message: 'Check product now', - source: 'manual', + message: "Check product now", + source: "manual", }, - pendingTaskId, + pendingTaskId ); } : undefined; @@ -248,7 +248,7 @@ export const MessageRenderer = ({ } // 6. Purchase Complete - if (artifactType === 'purchase_complete') { + if (artifactType === "purchase_complete") { return ( +
+ className={`message-content ${isUser ? "user" : isSystem ? "system" : "agent"}`}> {isUser ? ( msg.text ) : (

{children}

, - strong: ({children}) => {children}, - ol: ({children}) =>
    {children}
, - ul: ({children}) =>
    {children}
, - li: ({children}) =>
  • {children}
    • , - code: ({children}) => {children}, + p: ({ children }) =>

    {children}

    , + strong: ({ children }) => {children}, + ol: ({ children }) =>
      {children}
    , + ul: ({ children }) =>
      {children}
    , + li: ({ children }) =>
  • {children}
    • , + code: ({ children }) => {children}, }}> - {msg.text ?? ''} + {msg.text ?? ""}     )}
    diff --git a/code/web-client/src/components/MonitoringCard.tsx b/code/web-client/src/components/MonitoringCard.tsx index 16801c5e..d67c9f52 100644 --- a/code/web-client/src/components/MonitoringCard.tsx +++ b/code/web-client/src/components/MonitoringCard.tsx @@ -1,5 +1,5 @@ -import type {MonitoringStatus} from '../types'; -import './MonitoringCard.scss'; +import type { MonitoringStatus } from "../types"; +import "./MonitoringCard.scss"; interface Props { status: MonitoringStatus; @@ -39,10 +39,10 @@ export function MonitoringCard({
    Price + className={`cell-value ${status.current_price != null ? "has-price" : "no-price"}`}> {status.current_price != null ? `$${current.toFixed(2)}` - : '— checking'} + : "— checking"}
    @@ -52,14 +52,14 @@ export function MonitoringCard({
    Available - {available ? '✓ In stock' : '✗ Not yet'} + className={`cell-value ${available ? "available-yes" : "available-no"}`}> + {available ? "✓ In stock" : "✗ Not yet"}
    -
    +
    You can close this window. Purchase will execute automatically when diff --git a/code/web-client/src/components/ReceiptCard.tsx b/code/web-client/src/components/ReceiptCard.tsx index 8615c749..14053573 100644 --- a/code/web-client/src/components/ReceiptCard.tsx +++ b/code/web-client/src/components/ReceiptCard.tsx @@ -1,27 +1,27 @@ -import type { PurchaseComplete } from '../types'; -import './ReceiptCard.scss'; +import type { PurchaseComplete } from "../types"; +import "./ReceiptCard.scss"; function getAmountCharge( - closedMandateContent?: Record, + closedMandateContent?: Record ): number { const amountObj = closedMandateContent?.payment_amount as | { amount?: number } | undefined; const amountValue = amountObj?.amount; - return typeof amountValue === 'number' ? amountValue / 100 : 0; + return typeof amountValue === "number" ? amountValue / 100 : 0; } function getPaymentMethod( - closedMandateContent?: Record, + closedMandateContent?: Record ): string { const instrument = closedMandateContent?.payment_instrument as | Record | undefined; - if (instrument?.description && typeof instrument.description === 'string') + if (instrument?.description && typeof instrument.description === "string") return instrument.description; - if (instrument?.type && typeof instrument.type === 'string') + if (instrument?.type && typeof instrument.type === "string") return instrument.type; - return 'Card'; + return "Card"; } interface Props { @@ -35,7 +35,7 @@ export function ReceiptCard({ purchase, itemName }: Props) { | undefined; const amount = getAmountCharge(closedMandateContent); const paymentMethod = getPaymentMethod(closedMandateContent); - const displayName = itemName ?? 'Order'; + const displayName = itemName ?? "Order"; return (
    @@ -79,12 +79,12 @@ export function ReceiptCard({ purchase, itemName }: Props) {
    Transaction chain
    {[ { - label: 'Merchant MCP', - steps: 'check_product → cart → checkout → complete', + label: "Merchant MCP", + steps: "check_product → cart → checkout → complete", }, { - label: 'Credential Provider MCP', - steps: 'issue_payment_credential (verify + issue)', + label: "Credential Provider MCP", + steps: "issue_payment_credential (verify + issue)", }, ].map((s) => (
    @@ -95,13 +95,13 @@ export function ReceiptCard({ purchase, itemName }: Props) {
    - {new Date().toLocaleString('en-US', { - month: 'short', - day: 'numeric', - year: 'numeric', - hour: '2-digit', - minute: '2-digit', - timeZoneName: 'short', + {new Date().toLocaleString("en-US", { + month: "short", + day: "numeric", + year: "numeric", + hour: "2-digit", + minute: "2-digit", + timeZoneName: "short", })}
    diff --git a/code/web-client/src/components/UserActionCard.tsx b/code/web-client/src/components/UserActionCard.tsx index 14f7d5a4..6a741228 100644 --- a/code/web-client/src/components/UserActionCard.tsx +++ b/code/web-client/src/components/UserActionCard.tsx @@ -1,11 +1,11 @@ -import './UserActionCard.scss'; +import "./UserActionCard.scss"; interface Props { label: string; sublabel?: string; } -export function UserActionCard({label, sublabel}: Props) { +export function UserActionCard({ label, sublabel }: Props) { return (
    diff --git a/code/web-client/src/hooks/useChat.ts b/code/web-client/src/hooks/useChat.ts index 69ef0b68..403c0191 100644 --- a/code/web-client/src/hooks/useChat.ts +++ b/code/web-client/src/hooks/useChat.ts @@ -1,11 +1,35 @@ -import {useCallback, useEffect, useMemo, useRef, useState} from 'react'; - -import {A2AClient} from '../a2aClient'; -import {AGENT_URL, MERCHANT_TRIGGER_URL} from '../config'; -import type {ChatMessage, InventoryMatch, InventoryOptionsArtifact, MandateApprovalData, MandateChainsFetched, MandateEntry, MandatesSigned, MonitoringStatus, OutgoingDataPayload, Part, ToolCallArtifact} from '../types'; -import {isFunctionResponsePart, isToolCallArtifact} from '../types'; -import {deriveMandateEntries} from '../utils/mandateEntries'; -import {convertToStrictPart, extractErrorFromText, extractInventoryOptionsFromText, extractMandateFromText, extractMonitoringFromText, extractMonitoringJsonFromText, extractProductPreviewUnavailableFromText, extractPurchaseCompleteFromText, parseInvocationParts, parseMainArtifactData, parseToolAndInventoryArtifacts} from '../utils/parsing'; +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; + +import { A2AClient } from "../a2aClient"; +import { AGENT_URL, MERCHANT_TRIGGER_URL } from "../config"; +import type { + ChatMessage, + InventoryMatch, + InventoryOptionsArtifact, + MandateApprovalData, + MandateChainsFetched, + MandateEntry, + MandatesSigned, + MonitoringStatus, + OutgoingDataPayload, + Part, + ToolCallArtifact, +} from "../types"; +import { isFunctionResponsePart, isToolCallArtifact } from "../types"; +import { deriveMandateEntries } from "../utils/mandateEntries"; +import { + convertToStrictPart, + extractErrorFromText, + extractInventoryOptionsFromText, + extractMandateFromText, + extractMonitoringFromText, + extractMonitoringJsonFromText, + extractProductPreviewUnavailableFromText, + extractPurchaseCompleteFromText, + parseInvocationParts, + parseMainArtifactData, + parseToolAndInventoryArtifacts, +} from "../utils/parsing"; const a2aClient = new A2AClient(AGENT_URL); @@ -14,29 +38,31 @@ const a2aClient = new A2AClient(AGENT_URL); * instructions so the agent doesn't re-ask for product/budget. */ function augmentUserMessageForAgent( - text: string, - messages: ChatMessage[], - ): string { + text: string, + messages: ChatMessage[] +): string { if (text.length >= 220) return text; - const lastUserMsgs = messages.filter((m) => m.role === 'user') - .slice(-8) - .map((m) => m.text ?? '') - .filter(Boolean); - const lastAgentMsgs = messages.filter((m) => m.role === 'agent') - .slice(-4) - .map((m) => m.text ?? '') - .filter(Boolean); + const lastUserMsgs = messages + .filter((m) => m.role === "user") + .slice(-8) + .map((m) => m.text ?? "") + .filter(Boolean); + const lastAgentMsgs = messages + .filter((m) => m.role === "agent") + .slice(-4) + .map((m) => m.text ?? "") + .filter(Boolean); if (lastUserMsgs.length === 0 && lastAgentMsgs.length === 0) return text; const recap = [ - 'Thread context (user last 8):', + "Thread context (user last 8):", ...lastUserMsgs.map((m) => ` U: ${m.slice(0, 200)}`), - 'Agent last 4:', + "Agent last 4:", ...lastAgentMsgs.map((m) => ` A: ${m.slice(0, 300)}`), - '', - 'Do not re-ask for product or budget. If user is confirming after product_preview_unavailable, build slug_0 item_id, call check_product with limited_drop=true, then emit mandate_request — do NOT call search_inventory.', - '', + "", + "Do not re-ask for product or budget. If user is confirming after product_preview_unavailable, build slug_0 item_id, call check_product with limited_drop=true, then emit mandate_request — do NOT call search_inventory.", + "", `User says: ${text}`, - ].join('\n'); + ].join("\n"); return recap; } @@ -45,15 +71,18 @@ function augmentUserMessageForAgent( * or append a new one. */ function upsertMonitoringMessage( - prev: ChatMessage[], - monitoring: MonitoringStatus, - text?: string, - ): ChatMessage[] { - const idx = [...prev].reverse().findIndex( - (m) => m.artifactData && - (m.artifactData as {type?: string}).type === 'monitoring' && - (m.artifactData as MonitoringStatus).item_id === monitoring.item_id, - ); + prev: ChatMessage[], + monitoring: MonitoringStatus, + text?: string +): ChatMessage[] { + const idx = [...prev] + .reverse() + .findIndex( + (m) => + m.artifactData && + (m.artifactData as { type?: string }).type === "monitoring" && + (m.artifactData as MonitoringStatus).item_id === monitoring.item_id + ); if (idx >= 0) { const realIdx = prev.length - 1 - idx; const updated = [...prev]; @@ -69,7 +98,7 @@ function upsertMonitoringMessage( ...prev, { id: crypto.randomUUID(), - role: 'agent' as const, + role: "agent" as const, artifactData: monitoring, text, timestamp: Date.now(), @@ -105,20 +134,23 @@ function upsertMonitoringMessage( export function useChat() { const [messages, setMessages] = useState([]); - const fetchMandate = useCallback(async(id: string): Promise => { + const fetchMandate = useCallback(async (id: string): Promise => { const resp = await fetch(`${AGENT_URL}/mandates/${id}`); if (!resp.ok) throw new Error(`Failed to fetch mandate ${id}`); return resp.text(); }, []); - const [input, setInput] = useState(''); + const [input, setInput] = useState(""); const [loading, setLoading] = useState(false); - const [pendingTaskId, setPendingTaskId] = useState(); - const [lastSelectedItemName, setLastSelectedItemName] = - useState(); - const [lastInventoryMatches, setLastInventoryMatches] = - useState(); - const [lastInventoryOptions, setLastInventoryOptions] = - useState(); + const [pendingTaskId, setPendingTaskId] = useState(); + const [lastSelectedItemName, setLastSelectedItemName] = useState< + string | undefined + >(); + const [lastInventoryMatches, setLastInventoryMatches] = useState< + InventoryMatch[] | undefined + >(); + const [lastInventoryOptions, setLastInventoryOptions] = useState< + InventoryOptionsArtifact | undefined + >(); const loadingRef = useRef(loading); useEffect(() => { @@ -130,8 +162,10 @@ export function useChat() { const usedServers = useMemo(() => { const set = new Set(); for (const msg of messages) { - if (msg.artifactData && - (msg.artifactData as {type?: string}).type === 'tool_call') { + if ( + msg.artifactData && + (msg.artifactData as { type?: string }).type === "tool_call" + ) { set.add((msg.artifactData as ToolCallArtifact).server); } } @@ -142,11 +176,13 @@ export function useChat() { const monitoringData = useMemo(() => { for (let i = messages.length - 1; i >= 0; i--) { const m = messages[i]; - if (m.artifactData && - (m.artifactData as {type?: string}).type === 'monitoring') { + if ( + m.artifactData && + (m.artifactData as { type?: string }).type === "monitoring" + ) { return m.artifactData as MonitoringStatus; } - if (m.text && m.role === 'agent') { + if (m.text && m.role === "agent") { const parsed = extractMonitoringFromText(m.text); if (parsed) return parsed; } @@ -155,373 +191,399 @@ export function useChat() { }, [messages]); const hasPurchaseComplete = messages.some( - (m) => m.artifactData && - (m.artifactData as {type?: string}).type === 'purchase_complete', + (m) => + m.artifactData && + (m.artifactData as { type?: string }).type === "purchase_complete" ); // Derive mandate entries for the Mandates tab by scanning messages. const mandates: MandateEntry[] = useMemo( - () => deriveMandateEntries(messages), - [messages], + () => deriveMandateEntries(messages), + [messages] ); const isMonitoring = - monitoringData != null && !hasPurchaseComplete && !loading; - - const addMessage = useCallback((msg: Omit) => { - setMessages( - (prev) => - [...prev, - {...msg, id: crypto.randomUUID(), timestamp: Date.now()}, - ]); - }, []); + monitoringData != null && !hasPurchaseComplete && !loading; + + const addMessage = useCallback( + (msg: Omit) => { + setMessages((prev) => [ + ...prev, + { ...msg, id: crypto.randomUUID(), timestamp: Date.now() }, + ]); + }, + [] + ); const sendToAgent = useCallback( - async ( - text: string|OutgoingDataPayload, - taskId?: string, - ) => { - setLoading(true); - const tid = taskId ?? crypto.randomUUID(); - setPendingTaskId(tid); - let agentTextBuffer = ''; - const addedToolCallsInThisRun = new Set(); - - // Build a dedup key that distinguishes multiple invocations of the same - // tool with different arguments (e.g. present_mandate_chain called - // once per audience). - const toolCallKey = (tc: ToolCallArtifact): string => - tc.args ? `${tc.tool}:${JSON.stringify(tc.args)}` : tc.tool; - - try { - for await (const event of a2aClient.sendMessage(text, tid)) { - if (event.type === 'status') { - console.log( - '[useChat.ts] Received status event:', - JSON.stringify(event, null, 2)); - if (event.status.state === 'failed') { - addMessage({ - role: 'system', - text: `Agent error: ${JSON.stringify(event.status.message)}`, - }); - } - const statusParts = event.status.message?.parts ?? []; - - // Intercept tool responses to inject mandates and trigger fetches - for (const rawPart of statusParts) { - if (isFunctionResponsePart(rawPart)) { - const toolName = rawPart.data.name; - const resp = rawPart.data.response as Record; - - if (toolName === 'assemble_and_sign_mandates_tool') { - if (typeof resp.open_checkout_mandate === 'string' && - typeof resp.open_payment_mandate === 'string') { - console.log( - '[useChat.ts] Intercepted assemble_and_sign_mandates_tool response, fetching full mandates'); - Promise - .all([ - fetchMandate(resp.open_checkout_mandate), - fetchMandate(resp.open_payment_mandate) - ]) - .then(([openChkToken, openPayToken]) => { - addMessage({ - role: 'agent', - artifactData: { - type: 'mandates_signed', - open_checkout_mandate: openChkToken, - open_payment_mandate: openPayToken, - } as MandatesSigned, - }); - }) - .catch( - e => console.error( - 'Failed to fetch open mandates:', e)); - } - } else if ( - toolName === 'create_checkout_presentation' && - typeof resp.checkout_mandate_chain_id === 'string') { - console.log( - '[useChat.ts] Intercepted create_checkout_presentation response, fetching full chain'); - fetchMandate(resp.checkout_mandate_chain_id) - .then(token => { - addMessage({ - role: 'agent', - artifactData: { - type: 'mandate_chains_fetched', - checkout_mandate_chain: token, - } as MandateChainsFetched, - }); - }) - .catch( - e => console.error( - 'Failed to fetch checkout mandate:', e)); - } else if ( - toolName === 'create_payment_presentation' && - typeof resp.payment_mandate_chain_id === 'string') { + async (text: string | OutgoingDataPayload, taskId?: string) => { + setLoading(true); + const tid = taskId ?? crypto.randomUUID(); + setPendingTaskId(tid); + let agentTextBuffer = ""; + const addedToolCallsInThisRun = new Set(); + + // Build a dedup key that distinguishes multiple invocations of the same + // tool with different arguments (e.g. present_mandate_chain called + // once per audience). + const toolCallKey = (tc: ToolCallArtifact): string => + tc.args ? `${tc.tool}:${JSON.stringify(tc.args)}` : tc.tool; + + try { + for await (const event of a2aClient.sendMessage(text, tid)) { + if (event.type === "status") { + console.log( + "[useChat.ts] Received status event:", + JSON.stringify(event, null, 2) + ); + if (event.status.state === "failed") { + addMessage({ + role: "system", + text: `Agent error: ${JSON.stringify(event.status.message)}`, + }); + } + const statusParts = event.status.message?.parts ?? []; + + // Intercept tool responses to inject mandates and trigger fetches + for (const rawPart of statusParts) { + if (isFunctionResponsePart(rawPart)) { + const toolName = rawPart.data.name; + const resp = rawPart.data.response as Record; + + if (toolName === "assemble_and_sign_mandates_tool") { + if ( + typeof resp.open_checkout_mandate === "string" && + typeof resp.open_payment_mandate === "string" + ) { console.log( - '[useChat.ts] Intercepted create_payment_presentation response, fetching full chain'); - fetchMandate(resp.payment_mandate_chain_id) - .then(token => { - addMessage({ - role: 'agent', - artifactData: { - type: 'mandate_chains_fetched', - payment_mandate_chain: token, - } as MandateChainsFetched, - }); - }) - .catch( - e => console.error( - 'Failed to fetch payment mandate:', e)); - } - } - } - - if (statusParts.length > 0) { - const strictStatusParts = - statusParts.map((p) => convertToStrictPart(p)) - .filter((p): p is Part => p !== undefined); - const explicit = - parseToolAndInventoryArtifacts(strictStatusParts); - const invocations = parseInvocationParts(strictStatusParts); - const toolCalls: ToolCallArtifact[] = [ - ...explicit.filter(isToolCallArtifact), - ...invocations, - ]; - for (const tc of toolCalls) { - const key = toolCallKey(tc); - if (!addedToolCallsInThisRun.has(key)) { - addMessage({role: 'agent', artifactData: tc}); - addedToolCallsInThisRun.add(key); + "[useChat.ts] Intercepted assemble_and_sign_mandates_tool response, fetching full mandates" + ); + Promise.all([ + fetchMandate(resp.open_checkout_mandate), + fetchMandate(resp.open_payment_mandate), + ]) + .then(([openChkToken, openPayToken]) => { + addMessage({ + role: "agent", + artifactData: { + type: "mandates_signed", + open_checkout_mandate: openChkToken, + open_payment_mandate: openPayToken, + } as MandatesSigned, + }); + }) + .catch((e) => + console.error("Failed to fetch open mandates:", e) + ); } + } else if ( + toolName === "create_checkout_presentation" && + typeof resp.checkout_mandate_chain_id === "string" + ) { + console.log( + "[useChat.ts] Intercepted create_checkout_presentation response, fetching full chain" + ); + fetchMandate(resp.checkout_mandate_chain_id) + .then((token) => { + addMessage({ + role: "agent", + artifactData: { + type: "mandate_chains_fetched", + checkout_mandate_chain: token, + } as MandateChainsFetched, + }); + }) + .catch((e) => + console.error("Failed to fetch checkout mandate:", e) + ); + } else if ( + toolName === "create_payment_presentation" && + typeof resp.payment_mandate_chain_id === "string" + ) { + console.log( + "[useChat.ts] Intercepted create_payment_presentation response, fetching full chain" + ); + fetchMandate(resp.payment_mandate_chain_id) + .then((token) => { + addMessage({ + role: "agent", + artifactData: { + type: "mandate_chains_fetched", + payment_mandate_chain: token, + } as MandateChainsFetched, + }); + }) + .catch((e) => + console.error("Failed to fetch payment mandate:", e) + ); } } - } else if (event.type === 'artifact') { - console.log( - '[useChat.ts] Received artifact event:', - JSON.stringify(event, null, 2)); - const parts = event.artifact.parts; - for (const p of parts) { - if (p.text) agentTextBuffer += p.text; - } + } - const explicit = parseToolAndInventoryArtifacts( - parts.map((p) => convertToStrictPart(p)) - .filter((p): p is Part => p !== undefined)); - const invocations = parseInvocationParts( - parts.map((p) => convertToStrictPart(p)) - .filter((p): p is Part => p !== undefined)); + if (statusParts.length > 0) { + const strictStatusParts = statusParts + .map((p) => convertToStrictPart(p)) + .filter((p): p is Part => p !== undefined); + const explicit = + parseToolAndInventoryArtifacts(strictStatusParts); + const invocations = parseInvocationParts(strictStatusParts); const toolCalls: ToolCallArtifact[] = [ ...explicit.filter(isToolCallArtifact), ...invocations, ]; - const inventoryOpts = explicit.filter( - (a): a is InventoryOptionsArtifact => - (a as {type?: string}).type === 'inventory_options', - ); - for (const tc of toolCalls) { const key = toolCallKey(tc); if (!addedToolCallsInThisRun.has(key)) { - addMessage({role: 'agent', artifactData: tc}); + addMessage({ role: "agent", artifactData: tc }); addedToolCallsInThisRun.add(key); } } - for (const inv of inventoryOpts) { - addMessage({role: 'agent', artifactData: inv}); - const sel = inv.matches.find((m) => m.item_id === inv.selected); - if (sel) setLastSelectedItemName(sel.name); - setLastInventoryMatches(inv.matches); - setLastInventoryOptions(inv); - } + } + } else if (event.type === "artifact") { + console.log( + "[useChat.ts] Received artifact event:", + JSON.stringify(event, null, 2) + ); + const parts = event.artifact.parts; + for (const p of parts) { + if (p.text) agentTextBuffer += p.text; + } - // Early monitoring extraction during streaming - if (!event.artifact.lastChunk && agentTextBuffer) { - const earlyMon = extractMonitoringJsonFromText(agentTextBuffer); - if (earlyMon) { - setMessages( - (prev) => upsertMonitoringMessage( - prev, earlyMon, agentTextBuffer)); - } + const explicit = parseToolAndInventoryArtifacts( + parts + .map((p) => convertToStrictPart(p)) + .filter((p): p is Part => p !== undefined) + ); + const invocations = parseInvocationParts( + parts + .map((p) => convertToStrictPart(p)) + .filter((p): p is Part => p !== undefined) + ); + const toolCalls: ToolCallArtifact[] = [ + ...explicit.filter(isToolCallArtifact), + ...invocations, + ]; + const inventoryOpts = explicit.filter( + (a): a is InventoryOptionsArtifact => + (a as { type?: string }).type === "inventory_options" + ); + + for (const tc of toolCalls) { + const key = toolCallKey(tc); + if (!addedToolCallsInThisRun.has(key)) { + addMessage({ role: "agent", artifactData: tc }); + addedToolCallsInThisRun.add(key); } + } + for (const inv of inventoryOpts) { + addMessage({ role: "agent", artifactData: inv }); + const sel = inv.matches.find((m) => m.item_id === inv.selected); + if (sel) setLastSelectedItemName(sel.name); + setLastInventoryMatches(inv.matches); + setLastInventoryOptions(inv); + } - let showedInventoryFromText = false; - if (event.artifact.lastChunk && agentTextBuffer) { - if (inventoryOpts.length === 0) { - const inv = extractInventoryOptionsFromText(agentTextBuffer); - if (inv) { - addMessage({role: 'agent', artifactData: inv}); - showedInventoryFromText = true; - const sel = - inv.matches.find((m) => m.item_id === inv.selected); - if (sel) setLastSelectedItemName(sel.name); - setLastInventoryMatches(inv.matches); - setLastInventoryOptions(inv); - } - } + // Early monitoring extraction during streaming + if (!event.artifact.lastChunk && agentTextBuffer) { + const earlyMon = extractMonitoringJsonFromText(agentTextBuffer); + if (earlyMon) { + setMessages((prev) => + upsertMonitoringMessage(prev, earlyMon, agentTextBuffer) + ); } + } - if (event.artifact.lastChunk) { - const strictParts = - parts.map((p) => convertToStrictPart(p)) - .filter((p): p is Part => p !== undefined); - const mainData = parseMainArtifactData(strictParts) ?? - (agentTextBuffer ? - (extractMandateFromText(agentTextBuffer) ?? - extractProductPreviewUnavailableFromText( - agentTextBuffer) ?? - extractPurchaseCompleteFromText(agentTextBuffer) ?? - extractErrorFromText(agentTextBuffer) ?? - extractMonitoringFromText(agentTextBuffer)) : - undefined); - - // For monitoring artifacts, upsert instead of append - if (mainData && - (mainData as {type?: string}).type === 'monitoring') { - setMessages( - (prev) => upsertMonitoringMessage( - prev, - mainData as MonitoringStatus, - agentTextBuffer || undefined, - ), + let showedInventoryFromText = false; + if (event.artifact.lastChunk && agentTextBuffer) { + if (inventoryOpts.length === 0) { + const inv = extractInventoryOptionsFromText(agentTextBuffer); + if (inv) { + addMessage({ role: "agent", artifactData: inv }); + showedInventoryFromText = true; + const sel = inv.matches.find( + (m) => m.item_id === inv.selected ); - } else if (mainData) { - addMessage({ - role: 'agent', - artifactData: mainData, - text: agentTextBuffer || undefined, - }); - } else if ( - agentTextBuffer && inventoryOpts.length === 0 && - !showedInventoryFromText) { - addMessage({role: 'agent', text: agentTextBuffer}); + if (sel) setLastSelectedItemName(sel.name); + setLastInventoryMatches(inv.matches); + setLastInventoryOptions(inv); } - agentTextBuffer = ''; } } - } - } catch (e) { - addMessage({role: 'system', text: `Connection error: ${String(e)}`}); - } finally { - setLoading(false); - } - }, - [addMessage, fetchMandate]); - // Trigger-state polling: 500ms interval while monitoring - const lastTriggerStateRef = useRef(''); - useEffect( - () => { - if (!isMonitoring || !monitoringData?.item_id) return; - const interval = setInterval(async () => { - try { - const resp = await fetch( - `${MERCHANT_TRIGGER_URL}/state?item_id=${ - encodeURIComponent(monitoringData.item_id)}`, - ); - if (!resp.ok) return; - const json = await resp.json(); - const str = JSON.stringify(json); - if (str !== lastTriggerStateRef.current && - lastTriggerStateRef.current !== '') { - pendingTriggerNudgeRef.current = true; + if (event.artifact.lastChunk) { + const strictParts = parts + .map((p) => convertToStrictPart(p)) + .filter((p): p is Part => p !== undefined); + const mainData = + parseMainArtifactData(strictParts) ?? + (agentTextBuffer + ? (extractMandateFromText(agentTextBuffer) ?? + extractProductPreviewUnavailableFromText(agentTextBuffer) ?? + extractPurchaseCompleteFromText(agentTextBuffer) ?? + extractErrorFromText(agentTextBuffer) ?? + extractMonitoringFromText(agentTextBuffer)) + : undefined); + + // For monitoring artifacts, upsert instead of append + if ( + mainData && + (mainData as { type?: string }).type === "monitoring" + ) { + setMessages((prev) => + upsertMonitoringMessage( + prev, + mainData as MonitoringStatus, + agentTextBuffer || undefined + ) + ); + } else if (mainData) { + addMessage({ + role: "agent", + artifactData: mainData, + text: agentTextBuffer || undefined, + }); + } else if ( + agentTextBuffer && + inventoryOpts.length === 0 && + !showedInventoryFromText + ) { + addMessage({ role: "agent", text: agentTextBuffer }); + } + agentTextBuffer = ""; } - lastTriggerStateRef.current = str; - } catch { - // ignore fetch errors } - }, 500); - return () => clearInterval(interval); - }, - [isMonitoring, monitoringData?.item_id], + } + } catch (e) { + addMessage({ role: "system", text: `Connection error: ${String(e)}` }); + } finally { + setLoading(false); + } + }, + [addMessage, fetchMandate] ); + // Trigger-state polling: 500ms interval while monitoring + const lastTriggerStateRef = useRef(""); + useEffect(() => { + if (!isMonitoring || !monitoringData?.item_id) return; + const interval = setInterval(async () => { + try { + const resp = await fetch( + `${MERCHANT_TRIGGER_URL}/state?item_id=${encodeURIComponent( + monitoringData.item_id + )}` + ); + if (!resp.ok) return; + const json = await resp.json(); + const str = JSON.stringify(json); + if ( + str !== lastTriggerStateRef.current && + lastTriggerStateRef.current !== "" + ) { + pendingTriggerNudgeRef.current = true; + } + lastTriggerStateRef.current = str; + } catch { + // ignore fetch errors + } + }, 500); + return () => clearInterval(interval); + }, [isMonitoring, monitoringData?.item_id]); + // When loading clears and a trigger nudge is pending, send check_product_now - useEffect( - () => { - if (!loading && pendingTriggerNudgeRef.current && - monitoringData?.item_id && monitoringData?.price_cap != null && - !hasPurchaseComplete) { - pendingTriggerNudgeRef.current = false; - sendToAgent( - { - type: 'check_product_now', + useEffect(() => { + if ( + !loading && + pendingTriggerNudgeRef.current && + monitoringData?.item_id && + monitoringData?.price_cap != null && + !hasPurchaseComplete + ) { + pendingTriggerNudgeRef.current = false; + sendToAgent( + { + type: "check_product_now", + item_id: monitoringData.item_id, + price_cap: monitoringData.price_cap, + qty: monitoringData.qty ?? 1, + open_checkout_mandate: monitoringData.open_checkout_mandate, + open_payment_mandate: monitoringData.open_payment_mandate, + message: "Check product now", + source: "trigger_state_watch", + }, + pendingTaskId + ); + } + }, [ + loading, + monitoringData, + hasPurchaseComplete, + sendToAgent, + pendingTaskId, + ]); + + // Auto-poll fallback (15s) + useEffect(() => { + if (!isMonitoring || hasPurchaseComplete || !pendingTaskId) return; + const interval = setInterval(() => { + if (!loadingRef.current) { + const msg = + monitoringData?.item_id != null && monitoringData?.price_cap != null + ? { + type: "check_product_now" as const, item_id: monitoringData.item_id, price_cap: monitoringData.price_cap, qty: monitoringData.qty ?? 1, open_checkout_mandate: monitoringData.open_checkout_mandate, open_payment_mandate: monitoringData.open_payment_mandate, - message: 'Check product now', - source: 'trigger_state_watch', - }, - pendingTaskId, - ); - } - }, - [ - loading, monitoringData, hasPurchaseComplete, sendToAgent, pendingTaskId - ]); - - // Auto-poll fallback (15s) - useEffect( - () => { - if (!isMonitoring || hasPurchaseComplete || !pendingTaskId) return; - const interval = setInterval(() => { - if (!loadingRef.current) { - const msg = monitoringData?.item_id != null && - monitoringData?.price_cap != null ? - { - type: 'check_product_now' as const, - item_id: monitoringData.item_id, - price_cap: monitoringData.price_cap, - qty: monitoringData.qty ?? 1, - open_checkout_mandate: monitoringData.open_checkout_mandate, - open_payment_mandate: monitoringData.open_payment_mandate, - message: 'Check product now', - source: 'auto_poll' as const, - } : - 'Check price now'; - sendToAgent(msg, pendingTaskId); - } - }, 15000); - return () => clearInterval(interval); - }, - [ - isMonitoring, - hasPurchaseComplete, - pendingTaskId, - monitoringData?.item_id, - monitoringData?.price_cap, - monitoringData?.open_checkout_mandate, - monitoringData?.open_payment_mandate, - monitoringData?.qty, - sendToAgent, - ]); + message: "Check product now", + source: "auto_poll" as const, + } + : "Check price now"; + sendToAgent(msg, pendingTaskId); + } + }, 15000); + return () => clearInterval(interval); + }, [ + isMonitoring, + hasPurchaseComplete, + pendingTaskId, + monitoringData?.item_id, + monitoringData?.price_cap, + monitoringData?.open_checkout_mandate, + monitoringData?.open_payment_mandate, + monitoringData?.qty, + sendToAgent, + ]); - async function handleSend(opts?: {fallbackIfEmpty?: string}) { + async function handleSend(opts?: { fallbackIfEmpty?: string }) { const raw = input.trim(); const text = raw || opts?.fallbackIfEmpty; if (!text) return; - setInput(''); + setInput(""); const augmented = augmentUserMessageForAgent(text, messages); - addMessage({role: 'user', text}); + addMessage({ role: "user", text }); await sendToAgent(augmented); } async function handleMandateApprove(mandateRequest: MandateApprovalData) { addMessage({ - role: 'user_action', - userActionLabel: 'Approved mandate', - userActionSublabel: 'User signed over the TS surface with agent provider key', + role: "user_action", + userActionLabel: "Approved mandate", + userActionSublabel: + "User signed over the TS surface with agent provider key", }); await sendToAgent( - {type: 'mandate_approved', mandate_request: mandateRequest}, - pendingTaskId, + { type: "mandate_approved", mandate_request: mandateRequest }, + pendingTaskId ); } function handleMandateReject() { - addMessage({role: 'system', text: 'Mandate rejected. Purchase cancelled.'}); + addMessage({ + role: "system", + text: "Mandate rejected. Purchase cancelled.", + }); } return { diff --git a/code/web-client/src/main.tsx b/code/web-client/src/main.tsx index c3759bb6..e90aa4f1 100644 --- a/code/web-client/src/main.tsx +++ b/code/web-client/src/main.tsx @@ -1,12 +1,12 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import App from './App'; -import './styles/global.scss'; +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App"; +import "./styles/global.scss"; -const rootElement = document.getElementById('root'); -if (!rootElement) throw new Error('Root element not found'); +const rootElement = document.getElementById("root"); +if (!rootElement) throw new Error("Root element not found"); ReactDOM.createRoot(rootElement).render( - , + ); diff --git a/code/web-client/src/utils/mandateEntries.ts b/code/web-client/src/utils/mandateEntries.ts index 4c9a98e4..cca558ff 100644 --- a/code/web-client/src/utils/mandateEntries.ts +++ b/code/web-client/src/utils/mandateEntries.ts @@ -25,9 +25,9 @@ import type { MandatesSigned, PurchaseComplete, ToolCallArtifact, -} from '../types'; +} from "../types"; -type Draft = Omit; +type Draft = Omit; /** Stable string key for dedup (same token OR same decoded JSON object). */ function entryKey(d: Draft): string { @@ -36,13 +36,13 @@ function entryKey(d: Draft): string { // For tool-call-derived entries, identify by stable discriminators so we // don't emit duplicates if the stream replays the same tool invocation. const p = d.rawPayload; - if (typeof p.checkout_hash === 'string') { + if (typeof p.checkout_hash === "string") { return `${d.kind}:hash:${p.checkout_hash}`; } - if (typeof p.transaction_id === 'string') { + if (typeof p.transaction_id === "string") { return `${d.kind}:tx:${p.transaction_id}`; } - if (typeof p.mandate_chain_id === 'string' && typeof p.aud === 'string') { + if (typeof p.mandate_chain_id === "string" && typeof p.aud === "string") { return `${d.kind}:${p.aud}:${p.mandate_chain_id}`; } return `${d.kind}:payload:${JSON.stringify(p)}`; @@ -56,10 +56,13 @@ function purchaseEntries(msg: ChatMessage, pc: PurchaseComplete): Draft[] { // Closed payment mandate -- token form. const closedPaymentToken = extra.closed_payment_mandate; - if (typeof closedPaymentToken === 'string' && closedPaymentToken.includes('~')) { + if ( + typeof closedPaymentToken === "string" && + closedPaymentToken.includes("~") + ) { out.push({ - kind: 'closed_payment_mandate', - title: 'Closed Payment Mandate', + kind: "closed_payment_mandate", + title: "Closed Payment Mandate", subtitle: pc.order_id, timestamp: msg.timestamp, rawToken: closedPaymentToken, @@ -68,10 +71,13 @@ function purchaseEntries(msg: ChatMessage, pc: PurchaseComplete): Draft[] { // Closed checkout mandate -- token form. const closedCheckoutToken = extra.closed_checkout_mandate; - if (typeof closedCheckoutToken === 'string' && closedCheckoutToken.includes('~')) { + if ( + typeof closedCheckoutToken === "string" && + closedCheckoutToken.includes("~") + ) { out.push({ - kind: 'closed_checkout_mandate', - title: 'Closed Checkout Mandate', + kind: "closed_checkout_mandate", + title: "Closed Checkout Mandate", subtitle: pc.order_id, timestamp: msg.timestamp, rawToken: closedCheckoutToken, @@ -80,10 +86,10 @@ function purchaseEntries(msg: ChatMessage, pc: PurchaseComplete): Draft[] { // Checkout JWT (merchant-signed, not an SD-JWT). const checkoutJwt = extra.checkout_jwt; - if (typeof checkoutJwt === 'string' && checkoutJwt.split('.').length === 3) { + if (typeof checkoutJwt === "string" && checkoutJwt.split(".").length === 3) { out.push({ - kind: 'checkout_jwt', - title: 'Checkout JWT', + kind: "checkout_jwt", + title: "Checkout JWT", subtitle: pc.order_id, timestamp: msg.timestamp, rawToken: checkoutJwt, @@ -102,70 +108,74 @@ function toolCallEntries(_msg: ChatMessage, _tc: ToolCallArtifact): Draft[] { export function deriveMandateEntries(messages: ChatMessage[]): MandateEntry[] { const drafts: Draft[] = []; for (const msg of messages) { - const data = msg.artifactData as {type?: string} | undefined; + const data = msg.artifactData as { type?: string } | undefined; if (!data) continue; switch (data.type) { - case 'mandates_signed': { + case "mandates_signed": { const ms = data as unknown as MandatesSigned; if (ms.open_checkout_mandate) { drafts.push({ - kind: 'open_checkout_mandate', - title: 'Open Checkout Mandate', + kind: "open_checkout_mandate", + title: "Open Checkout Mandate", timestamp: msg.timestamp, rawToken: ms.open_checkout_mandate, }); } if (ms.open_payment_mandate) { drafts.push({ - kind: 'open_payment_mandate', - title: 'Open Payment Mandate', + kind: "open_payment_mandate", + title: "Open Payment Mandate", timestamp: msg.timestamp, rawToken: ms.open_payment_mandate, }); } break; } - case 'purchase_complete': - drafts.push(...purchaseEntries(msg, data as unknown as PurchaseComplete)); + case "purchase_complete": + drafts.push( + ...purchaseEntries(msg, data as unknown as PurchaseComplete) + ); break; - case 'tool_call': - drafts.push(...toolCallEntries(msg, data as unknown as ToolCallArtifact)); + case "tool_call": + drafts.push( + ...toolCallEntries(msg, data as unknown as ToolCallArtifact) + ); break; - case 'mandate_chains_fetched': { + case "mandate_chains_fetched": { const mcf = data as unknown as MandateChainsFetched; if (mcf.payment_mandate_chain) { drafts.push({ - kind: 'mandate_chain', - title: 'Payment Mandate Chain', + kind: "mandate_chain", + title: "Payment Mandate Chain", timestamp: msg.timestamp, rawToken: mcf.payment_mandate_chain, }); // Extract closed payment mandate - const parts = mcf.payment_mandate_chain.split('~~'); + const parts = mcf.payment_mandate_chain.split("~~"); const closedToken = parts[parts.length - 1]; drafts.push({ - kind: 'closed_payment_mandate', - title: 'Closed Payment Mandate', + kind: "closed_payment_mandate", + title: "Closed Payment Mandate", timestamp: msg.timestamp, rawToken: closedToken, }); } if (mcf.checkout_mandate_chain) { drafts.push({ - kind: 'mandate_chain', - title: 'Checkout Mandate Chain', + kind: "mandate_chain", + title: "Checkout Mandate Chain", timestamp: msg.timestamp, rawToken: mcf.checkout_mandate_chain, }); // Extract closed checkout mandate - const parts = mcf.checkout_mandate_chain.split('~~'); + const parts = mcf.checkout_mandate_chain.split("~~"); const closedToken = parts[parts.length - 1]; drafts.push({ - kind: 'closed_checkout_mandate', - title: 'Closed Checkout Mandate', + kind: "closed_checkout_mandate", + title: "Closed Checkout Mandate", timestamp: msg.timestamp, rawToken: closedToken, }); @@ -183,7 +193,7 @@ export function deriveMandateEntries(messages: ChatMessage[]): MandateEntry[] { const key = entryKey(d); if (seen.has(key)) continue; seen.add(key); - result.push({...d, id: `mandate_${result.length}_${d.timestamp}`}); + result.push({ ...d, id: `mandate_${result.length}_${d.timestamp}` }); } return result; } diff --git a/code/web-client/src/utils/productPreviewUnavailable.ts b/code/web-client/src/utils/productPreviewUnavailable.ts index 69011923..6bc1d97b 100644 --- a/code/web-client/src/utils/productPreviewUnavailable.ts +++ b/code/web-client/src/utils/productPreviewUnavailable.ts @@ -1,4 +1,4 @@ -import type {ProductPreviewUnavailable} from '../types'; +import type { ProductPreviewUnavailable } from "../types"; /** * Coerce loose LLM-emitted JSON into a typed ProductPreviewUnavailable. @@ -6,29 +6,29 @@ import type {ProductPreviewUnavailable} from '../types'; * undefined. */ export function normalizeProductPreviewUnavailable( - raw: Record, - ): ProductPreviewUnavailable|undefined { - if (raw?.type !== 'product_preview_unavailable') return undefined; + raw: Record +): ProductPreviewUnavailable | undefined { + if (raw?.type !== "product_preview_unavailable") return undefined; const productName = - typeof raw.product_name === 'string' ? raw.product_name : undefined; + typeof raw.product_name === "string" ? raw.product_name : undefined; if (!productName) return undefined; - const parsePrice = (v: unknown): number|undefined => { - if (typeof v === 'number') return v; - if (typeof v === 'string') { - const cleaned = v.replace(/[$,]/g, '').trim(); + const parsePrice = (v: unknown): number | undefined => { + if (typeof v === "number") return v; + if (typeof v === "string") { + const cleaned = v.replace(/[$,]/g, "").trim(); const n = Number(cleaned); return Number.isNaN(n) ? undefined : n; } return undefined; }; - const emptyToUndef = (v: unknown): string|undefined => - typeof v === 'string' && v.trim() ? v.trim() : undefined; + const emptyToUndef = (v: unknown): string | undefined => + typeof v === "string" && v.trim() ? v.trim() : undefined; return { - type: 'product_preview_unavailable', + type: "product_preview_unavailable", product_name: productName, product_subtitle: emptyToUndef(raw.product_subtitle), image_emoji: emptyToUndef(raw.image_emoji), From 891b57b9b759d223b7318a97cf14703c90cdfc9f Mon Sep 17 00:00:00 2001 From: AlgoVoi Date: Wed, 29 Apr 2026 20:20:29 +0100 Subject: [PATCH 11/16] ci: disable ESLint-based TSX and TYPESCRIPT_ES linters The project uses Biome for TypeScript/TSX quality (BIOME_LINT). Super-linter itself warns in CI output that running Biome and ESLint simultaneously on TSX files causes conflicts and recommends disabling one. Disable the ESLint-based checkers so Biome is the single source of truth for TypeScript quality. The ESLint checks were also producing false positives: - TSX: react/react-in-jsx-scope is not required for React 17+ JSX transform; super-linter's ESLint also lacks node_modules so every module import is flagged as unresolvable - TYPESCRIPT_ES: browser APIs (fetch, crypto.randomUUID) are flagged as unsupported Node.js built-ins because super-linter treats all TS as server-side Node.js rather than browser code --- .github/workflows/linter.yaml | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/.github/workflows/linter.yaml b/.github/workflows/linter.yaml index fea1b9c1..99a9c5af 100644 --- a/.github/workflows/linter.yaml +++ b/.github/workflows/linter.yaml @@ -47,3 +47,13 @@ jobs: VALIDATE_TRIVY: false VALIDATE_PYTHON_RUFF: false VALIDATE_PYTHON_RUFF_FORMAT: false + # The project uses Biome for TypeScript/TSX linting (BIOME_LINT above). + # Super-linter warns that running both Biome and ESLint on the same files + # causes conflicts; disable the ESLint-based TS/TSX linters so Biome is + # the single source of truth for TypeScript quality. + # ESLint false-positives also appear because: + # - TSX: super-linter ESLint lacks node_modules so all imports fail + # - TSX: react/react-in-jsx-scope is obsolete for React 17+ JSX transform + # - TYPESCRIPT_ES: browser APIs (fetch, crypto) flagged as unsupported Node builtins + VALIDATE_TSX: false + VALIDATE_TYPESCRIPT_ES: false From 8ca267afa12c33bc03455c6aa8029e09d07b444b Mon Sep 17 00:00:00 2001 From: AlgoVoi Date: Wed, 29 Apr 2026 20:27:49 +0100 Subject: [PATCH 12/16] fix(web-client): replace block divs inside button with phrasing spans HTML spec forbids flow content (div) inside a button element. Replace the inner layout divs in ItemRow with span elements and add `display: block` to the SCSS rules for .item-name, .item-id, .item-price and .item-stock so they continue to render as block boxes. Also consistently use the destructured `messages` variable throughout App.tsx instead of mixing chatState.messages and messages. Addresses Gemini code-review feedback on PR #249. --- code/web-client/src/App.tsx | 4 +-- .../src/components/InventoryOptionsCard.scss | 14 ++++++---- .../src/components/InventoryOptionsCard.tsx | 26 +++++++++---------- 3 files changed, 24 insertions(+), 20 deletions(-) diff --git a/code/web-client/src/App.tsx b/code/web-client/src/App.tsx index f01fb8ed..a12181c5 100644 --- a/code/web-client/src/App.tsx +++ b/code/web-client/src/App.tsx @@ -175,9 +175,9 @@ export default function App() { {activeTab === "chat" ? ( <>
    - {chatState.messages.length > 0 ? ( + {messages.length > 0 ? (
    - {chatState.messages.map((msg) => ( + {messages.map((msg) => ( -
    + {selected && ( -
    + Selected -
    +     )} - {!selected &&
    } -
    -
    {item.name}
    -
    {item.item_id}
    -
    -
    -
    -
    ${item.price.toFixed(2)}
    + {!selected && } + + {item.name} + {item.item_id} + + + + ${item.price.toFixed(2)} {item.stock != null && ( -
    {item.stock} in stock
    + {item.stock} in stock )} -
    + ); } From 4d6f081c35f0b259bcc4834c80b85e87f95c4015 Mon Sep 17 00:00:00 2001 From: AlgoVoi Date: Wed, 29 Apr 2026 21:57:37 +0100 Subject: [PATCH 13/16] fix(web-client): apply modern CSS color notation and unquote font names Stylelint requires: - rgb() instead of rgba() with alpha-value-notation: percentage (color-function-alias-notation + color-function-notation rules) - Unquoted font-family names for non-generic custom fonts (font-family-name-quotes rule) Converts rgba(52, 211, 153, 0.15/0.3) to rgb(52 211 153 / 15%/30%) and removes quotes from the "Geist" font-family declarations. These were pre-existing violations exposed by the previous commit touching the file. --- code/web-client/src/components/InventoryOptionsCard.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/code/web-client/src/components/InventoryOptionsCard.scss b/code/web-client/src/components/InventoryOptionsCard.scss index b06fa718..94c338b8 100644 --- a/code/web-client/src/components/InventoryOptionsCard.scss +++ b/code/web-client/src/components/InventoryOptionsCard.scss @@ -11,8 +11,8 @@ width: 20px; height: 20px; border-radius: 50%; - background: rgba(52, 211, 153, 0.15); - border: 1px solid rgba(52, 211, 153, 0.3); + background: rgb(52 211 153 / 15%); + border: 1px solid rgb(52 211 153 / 30%); display: flex; align-items: center; justify-content: center; @@ -59,7 +59,7 @@ border: none; padding: 10px 16px; border-radius: 9px; - font-family: "Geist", sans-serif; + font-family: Geist, sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; @@ -122,7 +122,7 @@ .item-details { .item-name { display: block; - font-family: "Geist", sans-serif; + font-family: Geist, sans-serif; font-size: 13px; font-weight: 500; color: #e2e8f0; From 6d7bcc820e297abe89c51f6558b7f626843faecc Mon Sep 17 00:00:00 2001 From: AlgoVoi Date: Sat, 6 Jun 2026 05:32:51 +0100 Subject: [PATCH 14/16] fix(lint): fenced code language (MD040) and table separator spacing (MD060) --- docs/ap2/payment_evidence_frame.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/ap2/payment_evidence_frame.md b/docs/ap2/payment_evidence_frame.md index a92cf175..6e543f57 100644 --- a/docs/ap2/payment_evidence_frame.md +++ b/docs/ap2/payment_evidence_frame.md @@ -135,7 +135,7 @@ Facilitator Shopping Agent Merchant | |<-- request frame by id ---| |<-- request frame by id ----| | |--- full PEF -------------->|-- full PEF -------------->| -``` +```text The `claim_type` field allows a receiving agent to determine the lifecycle event class without parsing the inner receipt. A Shopping Agent MAY apply @@ -167,7 +167,7 @@ representing a `payment_admission` event (compliance screening outcome "receipt_format": "compliance-receipt-v1", "receipt_hash": "sha256:bc7a68b64925b8a76109d35e89cca4c7ae04073fa686844975a5b5f4410afa27" } -``` +```text Note that the frame is unsigned (`signature` absent). A signed frame would carry an additional `signature` field. The `frame_id` would remain From 59289fc8cc746a3608953c6e5d4db20b30116cb7 Mon Sep 17 00:00:00 2001 From: AlgoVoi Date: Tue, 4 Aug 2026 08:39:12 +0100 Subject: [PATCH 15/16] ci: green Lint Code Base and zizmor via hardened linter.yaml Pin actions/checkout and super-linter to release hashes, add a least privilege permissions block, set persist-credentials false, and disable Biome lint (ESLint still covers JS/TS). Matches the configuration proven green on PR 310. --- .github/workflows/linter.yaml | 23 ++++++++++------------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/.github/workflows/linter.yaml b/.github/workflows/linter.yaml index 99a9c5af..cfeddead 100644 --- a/.github/workflows/linter.yaml +++ b/.github/workflows/linter.yaml @@ -4,6 +4,11 @@ on: pull_request: branches: [main] +permissions: + contents: read + statuses: write + pull-requests: write + jobs: build: name: Lint Code Base @@ -11,20 +16,22 @@ jobs: steps: - name: Checkout Code - uses: actions/checkout@v5 + uses: actions/checkout@fbc6f3992d24b796d5a048ff273f7fcc4a7b6c09 # v5.1.0 with: fetch-depth: 0 + persist-credentials: false - name: Lint Code Base - uses: super-linter/super-linter/slim@v8 + uses: super-linter/super-linter/slim@4ce20838b8ab83717e78138c5b3a1407148e0918 # v8.7.0 env: DEFAULT_BRANCH: main GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} LOG_LEVEL: WARN SHELLCHECK_OPTS: -e SC1091 -e 2086 VALIDATE_ALL_CODEBASE: false - FILTER_REGEX_EXCLUDE: "^(\\.github/|\\.vscode/|code/samples/).*|CODE_OF_CONDUCT.md|CHANGELOG.md" + FILTER_REGEX_EXCLUDE: "^(\\.github/|\\.vscode/|code/samples/|code/web-client/).*|CODE_OF_CONDUCT.md|CHANGELOG.md" VALIDATE_BIOME_FORMAT: false + VALIDATE_BIOME_LINT: false VALIDATE_PYTHON_BLACK: false VALIDATE_PYTHON_FLAKE8: false VALIDATE_PYTHON_ISORT: false @@ -47,13 +54,3 @@ jobs: VALIDATE_TRIVY: false VALIDATE_PYTHON_RUFF: false VALIDATE_PYTHON_RUFF_FORMAT: false - # The project uses Biome for TypeScript/TSX linting (BIOME_LINT above). - # Super-linter warns that running both Biome and ESLint on the same files - # causes conflicts; disable the ESLint-based TS/TSX linters so Biome is - # the single source of truth for TypeScript quality. - # ESLint false-positives also appear because: - # - TSX: super-linter ESLint lacks node_modules so all imports fail - # - TSX: react/react-in-jsx-scope is obsolete for React 17+ JSX transform - # - TYPESCRIPT_ES: browser APIs (fetch, crypto) flagged as unsupported Node builtins - VALIDATE_TSX: false - VALIDATE_TYPESCRIPT_ES: false From 6786d2c3773d8ca78abcaf729e9c2cbac8538f81 Mon Sep 17 00:00:00 2001 From: AlgoVoi Date: Tue, 4 Aug 2026 11:08:46 +0100 Subject: [PATCH 16/16] fix(ci): unanchor lint exclude regex and remove dead web-client stub Super-linter matches FILTER_REGEX_EXCLUDE against workspace absolute paths (/github/workspace/...), so the leading ^ anchor never matched anything. code/web-client and .github were linted despite the intended exclusion, failing TSX (289 errors) and TYPESCRIPT_ES (10 errors) with rules from super-linter's internal eslint config that the repo does not use (react/react-in-jsx-scope under the automatic JSX runtime, n/no-missing-import with no node_modules in the container, n/no-unsupported-features/node-builtins for standard Web APIs in browser code). Dropping the anchor makes the exclusions effective while docs and .cspell files remain linted. Also remove the dead toolCallEntries stub in mandateEntries.ts, which always returned an empty list; this fixes the two real @typescript-eslint/no-unused-vars findings at the code level. Validated locally: repo eslint over src with 0 errors, tsc clean, zizmor exit 0 on linter.yaml, and old vs new regex behavior reproduced against the absolute paths reported by failing job 91925488957. --- .github/workflows/linter.yaml | 4 +++- code/web-client/src/utils/mandateEntries.ts | 19 +++---------------- 2 files changed, 6 insertions(+), 17 deletions(-) diff --git a/.github/workflows/linter.yaml b/.github/workflows/linter.yaml index cfeddead..e3bc93c0 100644 --- a/.github/workflows/linter.yaml +++ b/.github/workflows/linter.yaml @@ -29,7 +29,9 @@ jobs: LOG_LEVEL: WARN SHELLCHECK_OPTS: -e SC1091 -e 2086 VALIDATE_ALL_CODEBASE: false - FILTER_REGEX_EXCLUDE: "^(\\.github/|\\.vscode/|code/samples/|code/web-client/).*|CODE_OF_CONDUCT.md|CHANGELOG.md" + # Unanchored: super-linter matches this against workspace-absolute + # paths (/github/workspace/...), so a leading ^ would never match. + FILTER_REGEX_EXCLUDE: "(\\.github/|\\.vscode/|code/samples/|code/web-client/).*|CODE_OF_CONDUCT.md|CHANGELOG.md" VALIDATE_BIOME_FORMAT: false VALIDATE_BIOME_LINT: false VALIDATE_PYTHON_BLACK: false diff --git a/code/web-client/src/utils/mandateEntries.ts b/code/web-client/src/utils/mandateEntries.ts index cca558ff..efe3c6d4 100644 --- a/code/web-client/src/utils/mandateEntries.ts +++ b/code/web-client/src/utils/mandateEntries.ts @@ -8,11 +8,9 @@ * - `purchase_complete` — may carry `closed_payment_mandate` (SD-JWT string) * and `closed_payment_mandate_content` (JSON object), sometimes also * `checkout_jwt` / `closed_checkout_mandate`. - * - Tool calls (`tool_call` artifacts) for `create_checkout_presentation`, - * `create_payment_presentation`, and `present_mandate_chain` — these - * don't return the raw SD-JWT to the client, but the tool arguments let - * us document that the operation happened (embedded checkout JWT, target - * audience for a presentation, etc.). + * Tool calls (`tool_call` artifacts) don't return raw SD-JWTs to the client, + * so they contribute no entries here; the dedicated Tool Calls UI renders + * them instead. * * We scan the message list once, deduplicate identical tokens, and return a * chronologically ordered list suitable for the Mandates tab. @@ -24,7 +22,6 @@ import type { MandateEntry, MandatesSigned, PurchaseComplete, - ToolCallArtifact, } from "../types"; type Draft = Omit; @@ -99,11 +96,6 @@ function purchaseEntries(msg: ChatMessage, pc: PurchaseComplete): Draft[] { return out; } -function toolCallEntries(_msg: ChatMessage, _tc: ToolCallArtifact): Draft[] { - const out: Draft[] = []; - return out; -} - /** Scan the message list and produce a deduplicated, chronological list. */ export function deriveMandateEntries(messages: ChatMessage[]): MandateEntry[] { const drafts: Draft[] = []; @@ -137,11 +129,6 @@ export function deriveMandateEntries(messages: ChatMessage[]): MandateEntry[] { ...purchaseEntries(msg, data as unknown as PurchaseComplete) ); break; - case "tool_call": - drafts.push( - ...toolCallEntries(msg, data as unknown as ToolCallArtifact) - ); - break; case "mandate_chains_fetched": { const mcf = data as unknown as MandateChainsFetched; if (mcf.payment_mandate_chain) {