From d46c7356c3aba3f6e1a13011767ef1817be62702 Mon Sep 17 00:00:00 2001
From: JhiNResH <jhinresh@gmail.com>
Date: Tue, 8 Sep 2026 21:25:54 +0800
Subject: [PATCH] feat: add readable marketplace navigation and testnet job
 history

---
 src/__tests__/bnb-marketplace-journal.test.ts | 169 ++++++++++++
 src/__tests__/marketplace-navigation.test.ts  |  70 +++++
 src/app/activity/page.tsx                     |   6 +
 src/app/dashboard/page.tsx                    |   5 +-
 src/components/market/MarketJobs.tsx          | 102 +++++++
 src/components/market/Marketplace.module.css  | 125 ++++++---
 src/components/market/MarketplaceHeader.tsx   |  20 +-
 src/components/market/PermissionSetup.tsx     | 260 ++++++++++++------
 src/hooks/useMarketJobs.ts                    |  27 ++
 src/lib/bnb-marketplace-journal.ts            |  64 +++++
 src/lib/bnb-marketplace-recovery.ts           |  49 ++++
 vitest.config.ts                              |   1 +
 12 files changed, 756 insertions(+), 142 deletions(-)
 create mode 100644 src/__tests__/bnb-marketplace-journal.test.ts
 create mode 100644 src/__tests__/marketplace-navigation.test.ts
 create mode 100644 src/app/activity/page.tsx
 create mode 100644 src/components/market/MarketJobs.tsx
 create mode 100644 src/hooks/useMarketJobs.ts
 create mode 100644 src/lib/bnb-marketplace-journal.ts
 create mode 100644 src/lib/bnb-marketplace-recovery.ts

diff --git a/src/__tests__/bnb-marketplace-journal.test.ts b/src/__tests__/bnb-marketplace-journal.test.ts
new file mode 100644
index 0000000..38bc93d
--- /dev/null
+++ b/src/__tests__/bnb-marketplace-journal.test.ts
@@ -0,0 +1,169 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { encodeAbiParameters, encodeEventTopics, encodeFunctionData, type Hash } from "viem";
+import { BNB_MARKETPLACE_AGENTS } from "@/lib/bnb-marketplace";
+import { BNB_MARKETPLACE_CONTRACTS as contracts, bnbMarketplaceCommerceAbi } from "@/lib/bnb-marketplace-chain";
+import { boundedSellerResponse, journalKey, jobStatus, readMarketJobs, saveMarketJob, withMarketJobLock, type JournalStorage, type MarketJob } from "@/lib/bnb-marketplace-journal";
+import { verifyFundedMarketJob } from "@/lib/bnb-marketplace-recovery";
+
+const buyer = "0x1111111111111111111111111111111111111111";
+const other = "0x2222222222222222222222222222222222222222";
+const createHash = `0x${"a".repeat(64)}` as Hash;
+const fundHash = `0x${"b".repeat(64)}` as Hash;
+afterEach(() => vi.unstubAllGlobals());
+function fixture(index = 0): MarketJob {
+  const agent = BNB_MARKETPLACE_AGENTS[index];
+  return { id: "d631ef01-7c40-4015-a02a-c52f2cec68c6", wallet: buyer, chainId: 97, slug: agent.slug,
+    quote: { quoteHash: `0x${"c".repeat(64)}`, feeAmount: agent.maxFeeAmount, wallet: agent.agentWallet }, jobId: "42",
+    transactions: [{ hash: createHash, state: "confirmed" }, null, null, null, { hash: fundHash, state: "submitted" }],
+    delivery: "not-requested", createdAt: 1788860000000, updatedAt: 1788860000000 };
+}
+function storage(): JournalStorage {
+  const data = new Map<string, string>();
+  return { getItem: (key) => data.get(key) ?? null, setItem: (key, value) => { data.set(key, value); } };
+}
+function chain(job: MarketJob) {
+  const agent = BNB_MARKETPLACE_AGENTS.find(a => a.slug === job.slug)!;
+  const description = JSON.stringify({ version: 1, chainId: 97, agentId: agent.agentId, typedSelector: agent.selector, policy: contracts.policy, quoteHash: job.quote.quoteHash });
+  const create = { hash: createHash, chainId: 97, from: buyer, to: contracts.commerce, value: 0n,
+    input: encodeFunctionData({ abi: bnbMarketplaceCommerceAbi, functionName: "createJob", args: [agent.agentWallet, contracts.router, 2000000000n, description, contracts.router] }) };
+  const fund = { hash: fundHash, chainId: 97, from: buyer, to: contracts.commerce, value: 0n,
+    input: encodeFunctionData({ abi: bnbMarketplaceCommerceAbi, functionName: "fund", args: [42n, BigInt(job.quote.feeAmount), "0x"] }) };
+  const event = { address: contracts.commerce,
+    topics: encodeEventTopics({ abi: bnbMarketplaceCommerceAbi, eventName: "JobCreated", args: { jobId: 42n, client: buyer, provider: agent.agentWallet } }),
+    data: encodeAbiParameters([{ type: "address" }, { type: "uint256" }, { type: "address" }], [contracts.router, 2000000000n, contracts.router]),
+    blockNumber: 10n, transactionHash: createHash, logIndex: 0, transactionIndex: 0, blockHash: createHash, removed: false };
+  const createReceipt = { status: "success", transactionHash: createHash, blockNumber: 10n, logs: [event] };
+  const fundReceipt = { status: "success", transactionHash: fundHash, blockNumber: 11n, logs: [] };
+  const reader = {
+    getChainId: vi.fn(async () => 97),
+    getTransaction: vi.fn(async ({ hash }: { hash: string }) => hash === createHash ? create : fund),
+    getTransactionReceipt: vi.fn(async ({ hash }: { hash: string }) => hash === createHash ? createReceipt : fundReceipt),
+  };
+  return { create, fund, event, createReceipt, fundReceipt, reader: reader as unknown as Parameters<typeof verifyFundedMarketJob>[0] };
+}
+
+describe("wallet-scoped browser job journal", () => {
+  it("rejects a second tab's operation while the wallet lock is held", async () => {
+    vi.stubGlobal("navigator", { locks: { request: async (_key: string, _options: unknown, callback: (lock: null) => unknown) => callback(null) } });
+    const operation = vi.fn();
+    await expect(withMarketJobLock(buyer, operation)).rejects.toThrow("Another tab");
+    expect(operation).not.toHaveBeenCalled();
+  });
+  it("fails closed without Web Locks instead of silently allowing concurrent payment flows", async () => {
+    vi.stubGlobal("navigator", {});
+    const operation = vi.fn();
+    await expect(withMarketJobLock(buyer, operation)).rejects.toThrow("Web Locks");
+    expect(operation).not.toHaveBeenCalled();
+  });
+  it("persists real hashes and restores them after a new read, never inventing jobs", () => {
+    const db = storage();
+    expect(readMarketJobs(db, buyer)).toEqual([]);
+    const job = fixture();
+    saveMarketJob(db, job);
+    expect(readMarketJobs(db, buyer)).toEqual([job]);
+    expect(readMarketJobs(db, other)).toEqual([]);
+    expect(journalKey("0x" + "a".repeat(40))).toBe(journalKey("0x" + "A".repeat(40)));
+  });
+  it("updates a job without duplicating it or removing earlier jobs", () => {
+    const db = storage(); const job = fixture(); saveMarketJob(db, job);
+    saveMarketJob(db, { ...job, delivery: "uncertain" });
+    expect(readMarketJobs(db, buyer)).toHaveLength(1);
+    expect(readMarketJobs(db, buyer)[0].delivery).toBe("uncertain");
+  });
+  it.each([0, 1, 2, 3, 4])("retains a submitted hash across a refresh before step %i confirms", index => {
+    const db = storage(); const job = fixture();
+    job.transactions = [null, null, null, null, null];
+    job.transactions[index] = { hash: fundHash, state: "submitted" };
+    saveMarketJob(db, job);
+    const restored = readMarketJobs(db, buyer)[0];
+    expect(restored.transactions[index]).toEqual({ hash: fundHash, state: "submitted" });
+    expect(restored.delivery).toBe("not-requested");
+    expect(restored.transactions.filter(Boolean)).toHaveLength(1);
+  });
+  it("preserves corrupted data and stops instead of silently resetting payment history", () => {
+    const db = storage(); db.setItem(journalKey(buyer), "{broken");
+    expect(() => saveMarketJob(db, fixture())).toThrow();
+    expect(db.getItem(journalKey(buyer))).toBe("{broken");
+  });
+  it("blocks quota errors", () => {
+    const db = storage(); db.setItem = () => { throw new Error("quota"); };
+    expect(() => saveMarketJob(db, fixture())).toThrow("quota");
+  });
+  it("does not evict history at its limit", () => {
+    const db = storage();
+    const records = Array.from({ length: 100 }, (_, i) => ({ ...fixture(), id: `d631ef01-7c40-4015-a02a-${String(i).padStart(12, "0")}` }));
+    db.setItem(journalKey(buyer), JSON.stringify(records));
+    expect(() => saveMarketJob(db, fixture())).toThrow("100-job");
+    expect(readMarketJobs(db, buyer)).toHaveLength(100);
+  });
+  it("does not accept another wallet's record under this key", () => {
+    const db = storage(); db.setItem(journalKey(buyer), JSON.stringify([{ ...fixture(), wallet: other }]));
+    expect(() => readMarketJobs(db, buyer)).toThrow();
+  });
+  it("property: rejects malformed hashes, networks, timestamps, and job ids", () => {
+    const db = storage();
+    for (let i = 0; i < 128; i++) {
+      const job = fixture();
+      const bad = i % 4 === 0 ? { ...job, chainId: 56 } : i % 4 === 1 ? { ...job, jobId: "9".repeat(79 + i) } :
+        i % 4 === 2 ? { ...job, createdAt: 9e15 + i } : { ...job, quote: { ...job.quote, quoteHash: "0x" + "g".repeat(i) } };
+      db.setItem(journalKey(buyer), JSON.stringify([bad]));
+      expect(() => readMarketJobs(db, buyer), `case=${i}`).toThrow();
+    }
+  });
+  it("caps saved responses and does not label acceptance as execution", () => {
+    expect(boundedSellerResponse({ text: "a".repeat(100000) }).length).toBeLessThan(32100);
+    expect(jobStatus({ ...fixture(), delivery: "response-received" })).toContain("execution not verified");
+    expect(jobStatus(fixture())).toContain("check chain");
+  });
+});
+
+describe("read-only funded job recovery", () => {
+  it.each([0, 1, 2, 3])("verifies real encoded transactions for category %i without a write client", async index => {
+    const job = fixture(index); const { reader } = chain(job);
+    await expect(verifyFundedMarketJob(reader, job, buyer)).resolves.toEqual({ jobId: "42", quoteHash: job.quote.quoteHash });
+    expect(Object.keys(reader).sort()).toEqual(["getChainId", "getTransaction", "getTransactionReceipt"]);
+  });
+  it("recovers job id from chain when saving the id was interrupted", async () => {
+    const job = fixture(); const { reader } = chain(job);
+    await expect(verifyFundedMarketJob(reader, { ...job, jobId: null }, buyer)).resolves.toMatchObject({ jobId: "42" });
+  });
+  it("does not recover a partial setup or trust a saved confirmed label", async () => {
+    const job = fixture(); job.transactions[4] = null;
+    const { reader } = chain(job);
+    await expect(verifyFundedMarketJob(reader, job, buyer)).rejects.toThrow("Funding is not recorded");
+  });
+  it("rejects another active wallet", async () => {
+    const job = fixture(); await expect(verifyFundedMarketJob(chain(job).reader, job, other)).rejects.toThrow("different wallet");
+  });
+  it.each(["from", "to", "chainId", "value", "hash"] as const)("rejects altered funding transaction %s", async field => {
+    const job = fixture(); const test = chain(job);
+    Object.assign(test.fund, { [field]: field === "chainId" ? 56 : field === "value" ? 1n : field === "hash" ? createHash : other });
+    await expect(verifyFundedMarketJob(test.reader, job, buyer)).rejects.toThrow();
+  });
+  it.each(["status", "transactionHash", "blockNumber"] as const)("rejects failed or inconsistent receipt %s", async field => {
+    const job = fixture(); const test = chain(job);
+    Object.assign(test.fundReceipt, { [field]: field === "status" ? "reverted" : field === "blockNumber" ? 9n : createHash });
+    await expect(verifyFundedMarketJob(test.reader, job, buyer)).rejects.toThrow();
+  });
+  it("rejects unavailable receipts rather than treating them as unfunded", async () => {
+    const job = fixture(); const test = chain(job);
+    vi.mocked(test.reader.getTransactionReceipt).mockRejectedValue(new Error("not found"));
+    await expect(verifyFundedMarketJob(test.reader, job, buyer)).rejects.toThrow("not found");
+  });
+  it("rejects forged events emitted by another contract", async () => {
+    const job = fixture(); const test = chain(job); Object.assign(test.event, { address: other });
+    await expect(verifyFundedMarketJob(test.reader, job, buyer)).rejects.toThrow("event not found");
+  });
+  it("rejects a different RPC network", async () => {
+    const job = fixture(); const test = chain(job); vi.mocked(test.reader.getChainId).mockResolvedValue(56);
+    await expect(verifyFundedMarketJob(test.reader, job, buyer)).rejects.toThrow("Testnet");
+  });
+  it("property: rejects modified quote hashes, job ids and fees in local storage", async () => {
+    for (let i = 0; i < 128; i++) {
+      const job = fixture(i % 4); const test = chain(job);
+      const changed = i % 3 === 0 ? { ...job, jobId: String(43 + i) } : i % 3 === 1 ?
+        { ...job, quote: { ...job.quote, feeAmount: String(i + 1) } } : { ...job, quote: { ...job.quote, quoteHash: `0x${"d".repeat(64)}` } };
+      await expect(verifyFundedMarketJob(test.reader, changed, buyer), `case=${i}`).rejects.toThrow();
+    }
+  });
+});
diff --git a/src/__tests__/marketplace-navigation.test.ts b/src/__tests__/marketplace-navigation.test.ts
new file mode 100644
index 0000000..36d3745
--- /dev/null
+++ b/src/__tests__/marketplace-navigation.test.ts
@@ -0,0 +1,70 @@
+import React from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { MarketJobs } from "@/components/market/MarketJobs";
+import { MarketplaceHeader } from "@/components/market/MarketplaceHeader";
+
+const state = vi.hoisted(() => ({
+  ready: true, authenticated: false, pathname: "/dashboard", wallets: [] as { address: string }[],
+  history: { jobs: [] as unknown[], loaded: true, error: null as string | null },
+}));
+vi.mock("@privy-io/react-auth", () => ({
+  usePrivy: () => ({ ready: state.ready, authenticated: state.authenticated, login: vi.fn(), logout: vi.fn(), user: null }),
+  useWallets: () => ({ wallets: state.wallets }),
+}));
+vi.mock("@/hooks/useMarketJobs", () => ({ useMarketJobs: () => state.history }));
+vi.mock("next/navigation", () => ({ usePathname: () => state.pathname }));
+vi.mock("next/link", () => ({ default: ({ children, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => React.createElement("a", props, children) }));
+vi.mock("next/image", () => ({ default: ({ priority: _priority, ...props }: React.ImgHTMLAttributes<HTMLImageElement> & { priority?: boolean }) => React.createElement("img", props) }));
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  state.ready = true; state.authenticated = false; state.pathname = "/dashboard"; state.wallets = [];
+  state.history = { jobs: [], loaded: true, error: null };
+});
+function render(component: React.ReactElement) {
+  vi.stubGlobal("React", React);
+  return renderToStaticMarkup(component);
+}
+describe("marketplace navigation and truthful job states", () => {
+  it.each(["/dashboard", "/activity", "/market"])("has distinct routes and correct active nav on %s", pathname => {
+    state.pathname = pathname;
+    const html = render(React.createElement(MarketplaceHeader));
+    expect(html).toContain('href="/dashboard"');
+    expect(html).toContain('href="/activity"');
+    expect(html).not.toContain('href="/create"');
+    expect(html.match(/aria-current="page"/g)).toHaveLength(1);
+    expect(html).toMatch(new RegExp(`href="${pathname === "/market" ? "/" : pathname}"[^>]+aria-current="page"`));
+  });
+  it("shows a connect state instead of redirecting or fabricated history", () => {
+    const html = render(React.createElement(MarketJobs));
+    expect(html).toContain("Connect to see your jobs");
+    expect(html).toContain("Saved on this browser only");
+    expect(html).not.toContain("Studio Desk");
+  });
+  it("shows a genuine empty state after connecting", () => {
+    state.authenticated = true; state.wallets = [{ address: "0x" + "1".repeat(40) }];
+    const html = render(React.createElement(MarketJobs, { activity: true }));
+    expect(html).toContain("No jobs saved here yet");
+    expect(html).toContain("Explore agents");
+    expect(html).not.toContain("Check funding &amp; retry delivery");
+  });
+  it("does not substitute an empty state for unreadable history", () => {
+    state.authenticated = true; state.wallets = [{ address: "0x" + "1".repeat(40) }];
+    state.history.error = "Saved history is unavailable";
+    const html = render(React.createElement(MarketJobs));
+    expect(html).toContain('role="alert"');
+    expect(html).not.toContain("No jobs saved here yet");
+  });
+  it("renders saved transaction links without treating seller text as HTML or completed execution", () => {
+    state.authenticated = true; state.wallets = [{ address: "0x" + "1".repeat(40) }];
+    state.history.jobs = [{ id: "test", slug: "studio-desk-rebalancer", jobId: "42", createdAt: 1788860000000,
+      transactions: [{ hash: "0x" + "a".repeat(64), state: "confirmed" }, null, null, null, null],
+      delivery: "response-received", response: '<script>alert("test")</script>' }];
+    const html = render(React.createElement(MarketJobs, { activity: true }));
+    expect(html).toContain("https://testnet.bscscan.com/tx/");
+    expect(html).toContain("execution not verified");
+    expect(html).toContain("&lt;script&gt;");
+    expect(html).not.toContain("<script>");
+  });
+});
diff --git a/src/app/activity/page.tsx b/src/app/activity/page.tsx
new file mode 100644
index 0000000..96dad5e
--- /dev/null
+++ b/src/app/activity/page.tsx
@@ -0,0 +1,6 @@
+import { MarketplaceFrame } from "@/components/market/MarketplaceFrame";
+import { MarketJobs } from "@/components/market/MarketJobs";
+
+export default function ActivityPage() {
+  return <MarketplaceFrame primaryWord="YOUR" accentWord="ACTIVITY" note={"Read the receipt.\nCheck the chain."}><MarketJobs activity /></MarketplaceFrame>;
+}
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 24119b8..298151d 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -1,5 +1,6 @@
-import { redirect } from "next/navigation";
+import { MarketplaceFrame } from "@/components/market/MarketplaceFrame";
+import { MarketJobs } from "@/components/market/MarketJobs";
 
 export default function DashboardPage() {
-  redirect("/");
+  return <MarketplaceFrame primaryWord="YOUR" accentWord="AGENTS" note={"One wallet.\nYour saved jobs."}><MarketJobs /></MarketplaceFrame>;
 }
diff --git a/src/components/market/MarketJobs.tsx b/src/components/market/MarketJobs.tsx
new file mode 100644
index 0000000..c925bb1
--- /dev/null
+++ b/src/components/market/MarketJobs.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import Link from "next/link";
+import { usePrivy, useWallets } from "@privy-io/react-auth";
+import { createPublicClient, http } from "viem";
+import { BNB_TESTNET_EXPLORER, getBnbMarketplaceAgent } from "@/lib/bnb-marketplace";
+import { BNB_MARKETPLACE_CHAIN } from "@/lib/bnb-marketplace-chain";
+import { boundedSellerResponse, JOB_STEPS, jobStatus, readMarketJobs, saveMarketJob, withMarketJobLock, type MarketJob } from "@/lib/bnb-marketplace-journal";
+import { verifyFundedMarketJob } from "@/lib/bnb-marketplace-recovery";
+import { useMarketJobs } from "@/hooks/useMarketJobs";
+import styles from "./Marketplace.module.css";
+
+export function MarketJobs({ activity = false }: { activity?: boolean }) {
+  const { ready, authenticated, login } = usePrivy();
+  const { wallets } = useWallets();
+  const wallet = authenticated ? wallets[0]?.address : undefined;
+  const activeWallet = useRef(wallet);
+  activeWallet.current = wallet;
+  const mounted = useRef(true);
+  useEffect(() => {
+    mounted.current = true;
+    return () => { mounted.current = false; };
+  }, []);
+  const { jobs, loaded, error: storageError } = useMarketJobs(wallet);
+  const [busy, setBusy] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  async function recover(saved: MarketJob) {
+    if (!wallet || busy) return;
+    setBusy(saved.id);
+    setError(null);
+    try {
+      await withMarketJobLock(wallet, async () => {
+        const record = readMarketJobs(window.localStorage, wallet).find((item) => item.id === saved.id);
+        if (!record) throw new Error("The saved job could not be found. No new payment was made.");
+        if (record.delivery === "response-received") return;
+        const reader = createPublicClient({ chain: BNB_MARKETPLACE_CHAIN, transport: http(undefined, { timeout: 12_000, retryCount: 0 }) });
+        const verified = await verifyFundedMarketJob(reader, record, wallet);
+        if (!mounted.current || activeWallet.current?.toLowerCase() !== wallet.toLowerCase()) throw new Error("Wallet changed. Select the original wallet and try again.");
+        const updated: MarketJob = { ...record, jobId: verified.jobId, delivery: "requested", updatedAt: Date.now(), error: undefined };
+        saveMarketJob(window.localStorage, updated);
+        try {
+          const response = await fetch("/api/bnb-marketplace/activate", {
+            method: "POST", headers: { "content-type": "application/json" },
+            body: JSON.stringify({ action: "notify_funded", slug: record.slug, ...verified }),
+          });
+          const body = await response.json();
+          if (!response.ok) throw new Error(body.error ?? "Seller did not confirm the request.");
+          saveMarketJob(window.localStorage, { ...updated, delivery: "response-received", response: boundedSellerResponse(body.result), updatedAt: Date.now() });
+        } catch (cause) {
+          saveMarketJob(window.localStorage, { ...updated, delivery: "uncertain", error: "Delivery response could not be saved or confirmed. Inspect the seller/job before retrying.", updatedAt: Date.now() });
+          throw cause;
+        }
+      });
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "Recovery failed. No new payment was made.");
+    } finally { setBusy(null); }
+  }
+
+  return (
+    <section className={styles.jobsContent} aria-labelledby="jobs-title">
+      <p className={styles.kicker}>YOUR WALLET / BSC TESTNET</p>
+      <h1 id="jobs-title">{activity ? "Activity" : "My agents"}</h1>
+      <p>{activity ? "Review transaction links and seller responses from your testnet jobs." : "Find the agents you hired and pick up an interrupted delivery."}</p>
+      <p className={styles.journalNote}>Saved on this browser only, for the selected wallet. Other devices and older jobs are not imported. Saved statuses are observations, not live execution or investment results.</p>
+      {!ready ? <p role="status">Loading wallet…</p> : !authenticated ? (
+        <div className={styles.jobCard}><h2>Connect to see your jobs.</h2><p>We never ask for a private key.</p><button className={styles.primaryButton} onClick={login}>Connect wallet →</button></div>
+      ) : !wallet ? <p role="status">Select a connected wallet to view its history.</p> : !loaded ? <p role="status">Loading saved jobs…</p> : (
+        <>
+          <p className={styles.journalNote}>Wallet: {wallet}</p>
+          {storageError ? <p className={styles.errorNote} role="alert">{storageError}</p> : !jobs.length ? (
+            <div className={styles.jobCard}><h2>No jobs saved here yet.</h2><p>Choose an agent and fund a testnet job. Its transactions will appear here. If you already paid on another device, check that device or the explorer before paying again.</p><Link className={styles.primaryButton} href="/market">Explore agents →</Link></div>
+          ) : jobs.map((job) => {
+            const agent = getBnbMarketplaceAgent(job.slug)!;
+            return (
+              <article key={job.id} className={styles.jobCard}>
+                <h2>{agent.name}</h2>
+                <span className={styles.jobStatus}>{jobStatus(job)}</span>
+                <p>{agent.task} · {job.jobId ? `Job #${job.jobId}` : "Job ID not confirmed"}</p>
+                <time dateTime={new Date(job.createdAt).toISOString()}>{new Date(job.createdAt).toLocaleString()}</time>
+                {(activity || !job.response) && <ol className={styles.jobEvents}>{JOB_STEPS.map((label, index) => (
+                  <li key={label}><span>{label}</span>{job.transactions[index] ? <a href={`${BNB_TESTNET_EXPLORER}/tx/${job.transactions[index]!.hash}`} target="_blank" rel="noreferrer">Saved: {job.transactions[index]!.state} ↗</a> : <span>No hash saved</span>}</li>
+                ))}</ol>}
+                {job.error && <p>{job.error}</p>}
+                {job.response && <details><summary>Seller response — not proof of completed execution</summary><pre>{job.response}</pre></details>}
+                {!job.transactions[4] && <p className={styles.journalNote}>This setup was interrupted. Review its transactions before starting again; automatic payment replay is disabled.</p>}
+                {job.transactions[4] && job.delivery !== "response-received" && <p className={styles.journalNote}>Recovery checks the original create/fund transactions on chain 97. It sends no payment. A retry can repeat the delivery request if the previous response was lost.</p>}
+                <div className={styles.jobActions}>
+                  {job.transactions[4] && job.delivery !== "response-received" && <button className={styles.primaryButton} disabled={Boolean(busy)} onClick={() => recover(job)}>{busy === job.id ? "Checking chain…" : "Check funding & retry delivery"}</button>}
+                  <Link className={styles.secondaryButton} href={`/market/${job.slug}`}>View agent →</Link>
+                  {!activity && <Link className={styles.secondaryButton} href="/activity">View activity →</Link>}
+                </div>
+              </article>
+            );
+          })}
+        </>
+      )}
+      {error && <p className={styles.errorNote} role="alert">{error}</p>}
+    </section>
+  );
+}
diff --git a/src/components/market/Marketplace.module.css b/src/components/market/Marketplace.module.css
index 4df1576..6dc3776 100644
--- a/src/components/market/Marketplace.module.css
+++ b/src/components/market/Marketplace.module.css
@@ -85,7 +85,7 @@
   justify-content: center;
   padding: 0 4px;
   color: var(--market-muted);
-  font-size: 10px;
+  font-size: 12px;
 }
 
 .nav .active {
@@ -111,7 +111,7 @@
 .stepLabel,
 .fieldLabel {
   font-family: var(--font-mono), ui-monospace, Menlo, monospace;
-  font-size: 8px;
+  font-size: 12px;
   font-weight: 700;
   line-height: 1;
   letter-spacing: 0.13em;
@@ -131,7 +131,7 @@
   justify-content: center;
   border: 1px solid var(--market-line-strong);
   padding: 0 16px;
-  font-size: 10px;
+  font-size: 12px;
   font-weight: 800;
   cursor: pointer;
   transition: background-color 300ms cubic-bezier(0.23, 1, 0.32, 1), color 300ms cubic-bezier(0.23, 1, 0.32, 1), border-color 300ms cubic-bezier(0.23, 1, 0.32, 1);
@@ -178,7 +178,7 @@
 .railTop {
   color: var(--market-yellow);
   font-family: var(--font-mono), ui-monospace, Menlo, monospace;
-  font-size: 8px;
+  font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.14em;
 }
@@ -212,7 +212,7 @@
 .railNote {
   margin: 0;
   color: var(--market-muted);
-  font-size: 10px;
+  font-size: 12px;
   line-height: 1.62;
   white-space: pre-line;
 }
@@ -264,7 +264,7 @@
 .homeCopy p {
   max-width: 540px;
   margin: 0;
-  font-size: 13px;
+  font-size: 16px;
 }
 
 .homeStart {
@@ -290,17 +290,17 @@
 .homeStart li b {
   color: var(--market-yellow);
   font-family: var(--font-mono), ui-monospace, Menlo, monospace;
-  font-size: 8px;
+  font-size: 12px;
 }
 
 .homeStart li strong {
-  font-size: 10px;
+  font-size: 12px;
 }
 
 .searchLabel {
   display: block;
   color: var(--market-muted);
-  font-size: 9px;
+  font-size: 12px;
 }
 
 .searchControl {
@@ -325,7 +325,7 @@
   outline: 0;
   background: transparent;
   color: var(--market-text);
-  font-size: 10px;
+  font-size: 12px;
 }
 
 .categoryHeader {
@@ -374,7 +374,7 @@
   max-width: 380px;
   margin: 0;
   color: #aeb6c2;
-  font-size: 11px;
+  font-size: 12px;
   line-height: 1.5;
 }
 
@@ -384,7 +384,7 @@
 
 .categoryArrow {
   justify-self: end;
-  font-size: 9px;
+  font-size: 12px;
 }
 
 .categoryRow:hover .categoryArrow {
@@ -447,7 +447,7 @@
   background: #11130f;
   color: var(--market-yellow);
   font-family: var(--font-mono), ui-monospace, Menlo, monospace;
-  font-size: 10px;
+  font-size: 12px;
   font-style: normal;
   font-weight: 850;
 }
@@ -455,7 +455,7 @@
 .agentHeading small {
   color: var(--market-muted);
   font-family: var(--font-mono), ui-monospace, Menlo, monospace;
-  font-size: 8px;
+  font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.1em;
 }
@@ -471,7 +471,7 @@
 .agentHeading p {
   margin: 0;
   color: var(--market-muted);
-  font-size: 10px;
+  font-size: 12px;
 }
 
 .panelLead {
@@ -496,7 +496,7 @@
 .boundaryHeader span,
 .boundaryHeader strong {
   font-family: var(--font-mono), ui-monospace, Menlo, monospace;
-  font-size: 8px;
+  font-size: 12px;
   letter-spacing: 0.11em;
 }
 
@@ -527,7 +527,7 @@
 .summaryRows small {
   display: block;
   color: var(--market-muted);
-  font-size: 8px;
+  font-size: 12px;
 }
 
 .boundaryGrid strong,
@@ -535,7 +535,7 @@
 .summaryRows strong {
   display: block;
   margin-top: 7px;
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .boundaryNote {
@@ -543,7 +543,7 @@
   padding: 12px 14px;
   border-top: 1px solid #343a43;
   color: var(--market-muted);
-  font-size: 9px;
+  font-size: 12px;
 }
 
 .actions {
@@ -556,7 +556,7 @@
   display: flex;
   gap: 8px;
   margin-top: 16px;
-  font-size: 9px;
+  font-size: 12px;
 }
 
 .controlNote strong {
@@ -598,7 +598,7 @@
   background: #15191f;
   color: #aeb5bf;
   padding: 0 10px;
-  font-size: 8px;
+  font-size: 12px;
   cursor: pointer;
 }
 
@@ -614,7 +614,7 @@
   grid-template-columns: 1.15fr 1.25fr 0.55fr 55px;
   align-items: center;
   border-top: 1px solid var(--market-line);
-  font-size: 9px;
+  font-size: 12px;
 }
 
 .tableLabels {
@@ -637,7 +637,7 @@
   border: 1px solid #4b535e;
   color: var(--market-yellow);
   font-family: var(--font-mono), ui-monospace, Menlo, monospace;
-  font-size: 9px;
+  font-size: 12px;
   font-style: normal;
   font-weight: 800;
 }
@@ -676,7 +676,7 @@
 
 .emptyState p {
   color: var(--market-muted);
-  font-size: 10px;
+  font-size: 12px;
 }
 
 .backLink {
@@ -684,7 +684,7 @@
   display: inline-flex;
   align-items: center;
   color: var(--market-muted);
-  font-size: 9px;
+  font-size: 12px;
   font-weight: 750;
 }
 
@@ -712,7 +712,7 @@
 .factGrid p {
   margin: 8px 0 0;
   color: var(--market-muted);
-  font-size: 9px;
+  font-size: 12px;
   line-height: 1.4;
 }
 
@@ -731,7 +731,7 @@
   grid-template-columns: 44px 1fr auto;
   align-items: center;
   border-bottom: 1px solid var(--market-line);
-  font-size: 9px;
+  font-size: 12px;
 }
 
 .controlList b {
@@ -752,7 +752,7 @@
 .actionPanel > p {
   max-width: 340px;
   color: var(--market-muted);
-  font-size: 11px;
+  font-size: 12px;
   line-height: 1.5;
 }
 
@@ -780,11 +780,11 @@
   background: #252a32;
   color: var(--market-yellow);
   font-family: var(--font-mono), ui-monospace, Menlo, monospace;
-  font-size: 9px;
+  font-size: 12px;
 }
 
 .startSteps span {
-  font-size: 9px;
+  font-size: 12px;
 }
 
 .fullWidth {
@@ -799,7 +799,7 @@
   display: block;
   margin-top: 12px;
   color: var(--market-muted);
-  font-size: 8px;
+  font-size: 12px;
   line-height: 1.45;
 }
 
@@ -825,7 +825,7 @@
 .fieldHeading span {
   color: var(--market-yellow);
   font-family: var(--font-mono), ui-monospace, Menlo, monospace;
-  font-size: 9px;
+  font-size: 12px;
   font-weight: 800;
 }
 
@@ -860,7 +860,7 @@
   display: grid;
   place-items: center;
   border: 1px solid var(--market-line-strong);
-  font-size: 9px;
+  font-size: 12px;
 }
 
 .choiceSelected .choiceMark {
@@ -875,14 +875,14 @@
 }
 
 .choice strong {
-  font-size: 10px;
+  font-size: 12px;
 }
 
 .choice small,
 .choice em {
   margin-top: 4px;
   color: var(--market-muted);
-  font-size: 8px;
+  font-size: 12px;
   font-style: normal;
 }
 
@@ -894,7 +894,7 @@
 
 .field p {
   color: var(--market-muted);
-  font-size: 9px;
+  font-size: 12px;
 }
 
 .inputControl {
@@ -928,7 +928,7 @@
 .summaryAgent small {
   display: block;
   color: var(--market-muted);
-  font-size: 8px;
+  font-size: 12px;
 }
 
 .summaryAgent strong {
@@ -962,7 +962,7 @@
 .reviewNote strong,
 .reviewedNote strong {
   display: block;
-  font-size: 10px;
+  font-size: 12px;
 }
 
 .reviewNote span,
@@ -970,7 +970,7 @@
   display: block;
   margin-top: 5px;
   color: var(--market-muted);
-  font-size: 9px;
+  font-size: 12px;
 }
 
 .reviewedNote {
@@ -983,7 +983,7 @@
   border-left: 3px solid #f6465d;
   background: var(--market-base);
   color: #ff8796;
-  font-size: 9px;
+  font-size: 12px;
   line-height: 1.5;
 }
 
@@ -996,7 +996,7 @@
   background: var(--market-base);
   color: #aeb6c2;
   font-family: var(--font-mono), ui-monospace, Menlo, monospace;
-  font-size: 8px;
+  font-size: 12px;
   line-height: 1.5;
   white-space: pre-wrap;
   word-break: break-word;
@@ -1009,6 +1009,40 @@
   cursor: not-allowed;
 }
 
+/* Readable product type, with the locked black/yellow visual hierarchy. */
+.app { font-size: 16px; line-height: 1.5; }
+.nav a, .connectButton, .primaryButton, .secondaryButton,
+.filterButton, .agentTableRow, .backLink, .controlList > div,
+.boundaryGrid strong, .summaryRows strong, .startSteps span { font-size: 14px; }
+.primaryButton, .secondaryButton, .connectButton, .filterButton { min-height: 44px; }
+.panelLead, .actionPanel > p, .emptyState p, .factGrid p,
+.boundaryNote, .reviewNote span, .reviewedNote span { font-size: 14px; line-height: 1.6; }
+.meta, .networkLabel { line-height: 1.5; letter-spacing: 0.08em; }
+.agentTableRow { gap: 12px; padding: 16px 0; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) 82px 54px; }
+.agentCell, .agentTableRow > span { min-width: 0; overflow-wrap: anywhere; }
+.agentTableRow > span:nth-child(3) { overflow-wrap: normal; white-space: nowrap; }
+.searchLabel input { font-size: 16px; }
+.agentCell i { flex-shrink: 0; }
+.listHeader { grid-template-columns: 1fr; gap: 20px; }
+.listHeader .searchLabel { width: 100%; }
+.tableLabels { font-size: 12px; }
+.homeIntro, .homeStart, .boundary, .summaryPanel, .focusPanel, .listPanel { min-width: 0; }
+.boundaryHeader { gap: 12px; flex-wrap: wrap; }
+.primaryButton, .secondaryButton { padding: 12px 16px; text-align: center; }
+.jobsContent { min-width: 0; padding: 40px; max-width: 1200px; width: 100%; }
+.jobsContent h1 { font-size: clamp(32px, 4vw, 48px); margin: 0 0 16px; line-height: 1.1; }
+.jobsContent > p { max-width: 720px; color: var(--market-muted); }
+.jobCard { margin: 24px 0; padding: 24px; border: 1px solid var(--market-line); background: var(--market-panel); overflow-wrap: anywhere; }
+.jobCard h2 { font-size: 22px; margin: 0 0 8px; }
+.jobCard p { margin: 12px 0; }
+.jobActions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
+.jobStatus { color: var(--market-yellow); font-size: 14px; }
+.jobEvents { padding: 0; list-style: none; }
+.jobEvents li { border-top: 1px solid var(--market-line); padding: 12px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 14px; }
+.jobCard a:not(.primaryButton):not(.secondaryButton) { text-decoration: underline; text-underline-offset: 4px; }
+.jobCard time, .journalNote { color: var(--market-muted); font-size: 14px; }
+.jobCard pre { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow: auto; }
+
 @media (prefers-reduced-motion: reduce) {
   .connectButton,
   .primaryButton,
@@ -1020,7 +1054,7 @@
 
 @media (max-width: 1100px) {
   .header {
-    grid-template-columns: 220px 1fr 240px;
+    grid-template-columns: 180px 1fr auto;
   }
 
   .directoryFrame {
@@ -1036,17 +1070,20 @@
   }
 }
 
-@media (max-width: 800px) {
+@media (max-width: 900px) {
   .header {
     grid-template-columns: 1fr auto;
     padding: 0 20px;
   }
 
-  .nav,
   .networkLabel {
     display: none;
   }
 
+  .nav { display: flex; grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; gap: 20px; padding: 8px 0; }
+  .network { grid-column: 2; grid-row: 1; }
+  .jobsContent { padding: 28px 20px; }
+  .jobCard { padding: 20px; }
   .frame,
   .directoryFrame {
     grid-template-columns: 1fr;
diff --git a/src/components/market/MarketplaceHeader.tsx b/src/components/market/MarketplaceHeader.tsx
index b6e55f6..4dab19d 100644
--- a/src/components/market/MarketplaceHeader.tsx
+++ b/src/components/market/MarketplaceHeader.tsx
@@ -2,12 +2,15 @@
 
 import Image from "next/image";
 import Link from "next/link";
-import { usePrivy } from "@privy-io/react-auth";
+import { usePathname } from "next/navigation";
+import { usePrivy, useWallets } from "@privy-io/react-auth";
 import styles from "./Marketplace.module.css";
 
 export function MarketplaceHeader() {
-  const { ready, authenticated, login, logout, user } = usePrivy();
-  const wallet = user?.wallet?.address;
+  const pathname = usePathname();
+  const { ready, authenticated, login, logout } = usePrivy();
+  const { wallets } = useWallets();
+  const wallet = wallets[0]?.address;
   const accountLabel = wallet ? `${wallet.slice(0, 5)}…${wallet.slice(-4)}` : "Connected";
 
   return (
@@ -18,10 +21,13 @@ export function MarketplaceHeader() {
       </Link>
 
       <nav className={styles.nav} aria-label="Primary navigation">
-        <Link href="/" className={styles.active}>Market</Link>
-        <Link href="/dashboard">My agents</Link>
-        <Link href="/dashboard">Activity</Link>
-        <Link href="/create">Build</Link>
+        {[
+          { href: "/", label: "Market", active: pathname === "/" || pathname.startsWith("/market") },
+          { href: "/dashboard", label: "My agents", active: pathname === "/dashboard" },
+          { href: "/activity", label: "Activity", active: pathname === "/activity" },
+        ].map((item) => (
+          <Link key={item.href} href={item.href} className={item.active ? styles.active : undefined} aria-current={item.active ? "page" : undefined}>{item.label}</Link>
+        ))}
       </nav>
 
       <div className={styles.network}>
diff --git a/src/components/market/PermissionSetup.tsx b/src/components/market/PermissionSetup.tsx
index 55938d8..f8e1657 100644
--- a/src/components/market/PermissionSetup.tsx
+++ b/src/components/market/PermissionSetup.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import Link from "next/link";
 import { usePrivy, useWallets } from "@privy-io/react-auth";
 import { createPublicClient, createWalletClient, custom, formatUnits, getAddress, http, parseEventLogs, type Hash } from "viem";
@@ -15,6 +15,8 @@ import {
 } from "@/lib/bnb-marketplace-chain";
 import { useBnbMarketplaceAgents } from "@/hooks/useBnbMarketplaceAgents";
 import { getMarketplaceActivationAction } from "@/lib/bnb-marketplace-activation-flow";
+import { boundedSellerResponse, readMarketJobs, saveMarketJob, withMarketJobLock, type MarketJob } from "@/lib/bnb-marketplace-journal";
+import { useMarketJobs } from "@/hooks/useMarketJobs";
 import styles from "./Marketplace.module.css";
 
 type StepState = "waiting" | "active" | "done" | "error";
@@ -41,6 +43,13 @@ export function PermissionSetup({ agent }: { agent: BnbMarketplaceAgent }) {
   const liveAgent = agents.find((item) => item.slug === agent.slug) ?? agent;
   const { ready, authenticated, login } = usePrivy();
   const { wallets } = useWallets();
+  const walletAddress = authenticated ? wallets[0]?.address : undefined;
+  const activeWallet = useRef(walletAddress);
+  activeWallet.current = walletAddress;
+  const mounted = useRef(true);
+  const record = useRef<MarketJob | null>(null);
+  const { jobs, loaded, error: historyError } = useMarketJobs(walletAddress);
+  const interrupted = jobs.find((job) => job.slug === agent.slug && job.delivery !== "response-received");
   const [steps, setSteps] = useState(INITIAL_STEPS);
   const [quote, setQuote] = useState<Quote | null>(null);
   const [jobId, setJobId] = useState<string | null>(null);
@@ -50,23 +59,59 @@ export function PermissionSetup({ agent }: { agent: BnbMarketplaceAgent }) {
 
   const activationReady = liveAgent.registryStatus === "live" && liveAgent.endpointStatus === "live";
 
+  useEffect(() => {
+    mounted.current = true;
+    return () => { mounted.current = false; };
+  }, []);
+
+  useEffect(() => {
+    setQuote(null);
+    setJobId(null);
+    setResult(null);
+    setSteps(INITIAL_STEPS);
+    setError(null);
+  }, [walletAddress]);
+
+  function persist(update: Partial<MarketJob>) {
+    if (!record.current) return;
+    record.current = { ...record.current, ...update, updatedAt: Date.now() };
+    saveMarketJob(window.localStorage, record.current);
+  }
+
+  function assertSameWallet() {
+    if (!mounted.current || !record.current || activeWallet.current?.toLowerCase() !== record.current.wallet.toLowerCase()) {
+      throw new Error("Wallet changed. Transaction progress was saved for the original wallet. Open Activity before continuing.");
+    }
+  }
+
   function updateStep(index: number, update: Partial<ActivationStep>) {
-    setSteps((current) => current.map((step, stepIndex) => stepIndex === index ? { ...step, ...update } : step));
+    if (record.current && index < 5 && update.hash) {
+      const transactions = [...record.current.transactions];
+      transactions[index] = { hash: update.hash, state: update.state === "done" ? "confirmed" : "submitted" };
+      persist({ transactions });
+    }
+    if (mounted.current && activeWallet.current?.toLowerCase() === record.current?.wallet.toLowerCase()) {
+      setSteps((current) => current.map((step, stepIndex) => stepIndex === index ? { ...step, ...update } : step));
+    }
   }
 
   async function waitForSuccess(publicClient: ReturnType<typeof createPublicClient>, hash: Hash) {
     const receipt = await publicClient.waitForTransactionReceipt({ hash });
+    if (receipt.transactionHash.toLowerCase() !== hash.toLowerCase()) throw new Error("Transaction was replaced. Inspect your wallet and saved Activity before continuing.");
     if (receipt.status !== "success") throw new Error(`Transaction ${hash.slice(0, 10)}… mined with failure status.`);
     return receipt;
   }
 
   async function requestDelivery(fundedJobId: string, fundedQuote: Quote) {
+    assertSameWallet();
+    persist({ delivery: "requested" });
     updateStep(5, { state: "active" });
     const deliveryBody = await responseJson(await fetch("/api/bnb-marketplace/activate", {
       method: "POST", headers: { "content-type": "application/json" },
       body: JSON.stringify({ action: "notify_funded", slug: liveAgent.slug, jobId: fundedJobId, quoteHash: fundedQuote.quoteHash }),
     }));
-    setResult(deliveryBody.result as Record<string, unknown>);
+    persist({ delivery: "response-received", response: boundedSellerResponse(deliveryBody.result), error: undefined });
+    if (mounted.current && activeWallet.current?.toLowerCase() === record.current?.wallet.toLowerCase()) setResult(deliveryBody.result as Record<string, unknown>);
     updateStep(5, { state: "done" });
   }
 
@@ -79,101 +124,135 @@ export function PermissionSetup({ agent }: { agent: BnbMarketplaceAgent }) {
       setError("Registry or seller endpoint is unavailable. Activation remains disabled.");
       return;
     }
+    if (!walletAddress || !loaded || historyError || interrupted || running) {
+      setError("Review your saved activity before starting another payment for this agent.");
+      return;
+    }
     setRunning(true);
     setError(null);
     setResult(null);
 
     try {
-      const action = getMarketplaceActivationAction(Boolean(quote), jobId);
-      if (action === "quote") {
-        const quoteBody = await responseJson(await fetch("/api/bnb-marketplace/activate", {
-          method: "POST", headers: { "content-type": "application/json" },
-          body: JSON.stringify({ action: "quote", slug: liveAgent.slug }),
-        }));
-        setQuote(quoteBody.quote as Quote);
-        return;
-      }
+      await withMarketJobLock(walletAddress, async () => {
+        if (!mounted.current || activeWallet.current?.toLowerCase() !== walletAddress.toLowerCase()) throw new Error("Wallet changed. Reconnect and request a new quote.");
+        const previous = readMarketJobs(window.localStorage, walletAddress).find((job) => job.slug === agent.slug && job.delivery !== "response-received");
+        if (previous) throw new Error("An interrupted job already exists. Open Activity; do not repeat its payment.");
+        record.current = null;
+        const action = getMarketplaceActivationAction(Boolean(quote), jobId);
+        if (action === "quote") {
+          const quoteBody = await responseJson(await fetch("/api/bnb-marketplace/activate", {
+            method: "POST", headers: { "content-type": "application/json" },
+            body: JSON.stringify({ action: "quote", slug: liveAgent.slug }),
+          }));
+          if (!mounted.current || activeWallet.current?.toLowerCase() !== walletAddress.toLowerCase()) throw new Error("Wallet changed. Request a new quote.");
+          setQuote(quoteBody.quote as Quote);
+          return;
+        }
 
-      if (!quote) throw new Error("Signed quote is no longer available.");
-      const nextQuote = quote;
-      if (action === "notify") {
-        if (!jobId) throw new Error("Funded job is no longer available.");
-        await requestDelivery(jobId, nextQuote);
-        return;
-      }
+        if (!quote) throw new Error("Signed quote is no longer available.");
+        const nextQuote = quote;
+        if (action === "notify") {
+          throw new Error("Open Activity to verify funding and recover delivery without another payment.");
+        }
 
-      setSteps(INITIAL_STEPS);
+        setSteps(INITIAL_STEPS);
 
-      const wallet = wallets[0];
-      if (!wallet) throw new Error("Connect a BSC Testnet wallet first.");
-      await wallet.switchChain(97);
-      const provider = await wallet.getEthereumProvider();
-      const account = getAddress(wallet.address);
-      const walletClient = createWalletClient({ account, chain: BNB_MARKETPLACE_CHAIN, transport: custom(provider) });
-      const publicClient = createPublicClient({ chain: BNB_MARKETPLACE_CHAIN, transport: http() });
+        const wallet = wallets[0];
+        if (!wallet) throw new Error("Connect a BSC Testnet wallet first.");
+        await wallet.switchChain(97);
+        const provider = await wallet.getEthereumProvider();
+        const account = getAddress(wallet.address);
+        if (account.toLowerCase() !== walletAddress.toLowerCase() || activeWallet.current?.toLowerCase() !== walletAddress.toLowerCase()) throw new Error("Wallet changed. Request a new quote.");
+        const walletClient = createWalletClient({ account, chain: BNB_MARKETPLACE_CHAIN, transport: custom(provider) });
+        const publicClient = createPublicClient({ chain: BNB_MARKETPLACE_CHAIN, transport: http() });
 
-      const feeAmount = BigInt(nextQuote.feeAmount);
-      const description = JSON.stringify({
-        version: 1, task: liveAgent.task, agentId: liveAgent.agentId, quoteHash: nextQuote.quoteHash,
-        typedSelector: liveAgent.selector, policy: BNB_MARKETPLACE_CONTRACTS.policy, chainId: 97,
-      });
-      const expiredAt = BigInt(Math.floor(Date.now() / 1_000) + 3_600);
-
-      updateStep(0, { state: "active" });
-      const createHash = await walletClient.writeContract({
-        address: BNB_MARKETPLACE_CONTRACTS.commerce,
-        abi: bnbMarketplaceCommerceAbi,
-        functionName: "createJob",
-        args: [liveAgent.agentWallet, BNB_MARKETPLACE_CONTRACTS.router, expiredAt, description, BNB_MARKETPLACE_CONTRACTS.router],
-      });
-      updateStep(0, { state: "active", hash: createHash });
-      const createReceipt = await waitForSuccess(publicClient, createHash);
-      const created = parseEventLogs({ abi: bnbMarketplaceCommerceAbi, eventName: "JobCreated", logs: createReceipt.logs });
-      const nextJobId = created[0]?.args.jobId;
-      if (nextJobId === undefined) throw new Error("Confirmed createJob receipt did not contain JobCreated.");
-      updateStep(0, { state: "done", hash: createHash });
-
-      updateStep(1, { state: "active" });
-      const registerHash = await walletClient.writeContract({
-        address: BNB_MARKETPLACE_CONTRACTS.router, abi: bnbMarketplaceRouterAbi,
-        functionName: "registerJob", args: [nextJobId, BNB_MARKETPLACE_CONTRACTS.policy],
-      });
-      updateStep(1, { state: "active", hash: registerHash });
-      await waitForSuccess(publicClient, registerHash);
-      updateStep(1, { state: "done", hash: registerHash });
-
-      updateStep(2, { state: "active" });
-      const budgetHash = await walletClient.writeContract({
-        address: BNB_MARKETPLACE_CONTRACTS.commerce, abi: bnbMarketplaceCommerceAbi,
-        functionName: "setBudget", args: [nextJobId, feeAmount, "0x"],
-      });
-      updateStep(2, { state: "active", hash: budgetHash });
-      await waitForSuccess(publicClient, budgetHash);
-      updateStep(2, { state: "done", hash: budgetHash });
-
-      updateStep(3, { state: "active" });
-      const approveHash = await walletClient.writeContract({
-        address: BNB_MARKETPLACE_CONTRACTS.paymentToken, abi: bnbMarketplaceTokenAbi,
-        functionName: "approve", args: [BNB_MARKETPLACE_CONTRACTS.commerce, feeAmount],
-      });
-      updateStep(3, { state: "active", hash: approveHash });
-      await waitForSuccess(publicClient, approveHash);
-      updateStep(3, { state: "done", hash: approveHash });
-
-      updateStep(4, { state: "active" });
-      const fundHash = await walletClient.writeContract({
-        address: BNB_MARKETPLACE_CONTRACTS.commerce, abi: bnbMarketplaceCommerceAbi,
-        functionName: "fund", args: [nextJobId, feeAmount, "0x"],
+        const feeAmount = BigInt(nextQuote.feeAmount);
+        const description = JSON.stringify({
+          version: 1, task: liveAgent.task, agentId: liveAgent.agentId, quoteHash: nextQuote.quoteHash,
+          typedSelector: liveAgent.selector, policy: BNB_MARKETPLACE_CONTRACTS.policy, chainId: 97,
+        });
+        const expiredAt = BigInt(Math.floor(Date.now() / 1_000) + 3_600);
+
+        record.current = {
+          id: crypto.randomUUID(), wallet: account, chainId: 97, slug: agent.slug,
+          quote: { quoteHash: nextQuote.quoteHash, feeAmount: nextQuote.feeAmount, wallet: nextQuote.wallet },
+          jobId: null, transactions: [null, null, null, null, null], delivery: "not-requested",
+          createdAt: Date.now(), updatedAt: Date.now(),
+        };
+        persist({});
+
+        updateStep(0, { state: "active" });
+        assertSameWallet();
+        const createHash = await walletClient.writeContract({
+          address: BNB_MARKETPLACE_CONTRACTS.commerce,
+          abi: bnbMarketplaceCommerceAbi,
+          functionName: "createJob",
+          args: [liveAgent.agentWallet, BNB_MARKETPLACE_CONTRACTS.router, expiredAt, description, BNB_MARKETPLACE_CONTRACTS.router],
+        });
+        updateStep(0, { state: "active", hash: createHash });
+        const createReceipt = await waitForSuccess(publicClient, createHash);
+        const created = parseEventLogs({ abi: bnbMarketplaceCommerceAbi, eventName: "JobCreated", logs: createReceipt.logs.filter((log) => log.address.toLowerCase() === BNB_MARKETPLACE_CONTRACTS.commerce.toLowerCase()) });
+        const nextJobId = created[0]?.args.jobId;
+        if (nextJobId === undefined) throw new Error("Confirmed createJob receipt did not contain JobCreated.");
+        if (created[0].args.client.toLowerCase() !== account.toLowerCase() || created[0].args.provider.toLowerCase() !== liveAgent.agentWallet.toLowerCase()) throw new Error("Created job did not match the expected wallet and agent.");
+        persist({ jobId: nextJobId.toString() });
+        updateStep(0, { state: "done", hash: createHash });
+
+        updateStep(1, { state: "active" });
+        assertSameWallet();
+        const registerHash = await walletClient.writeContract({
+          address: BNB_MARKETPLACE_CONTRACTS.router, abi: bnbMarketplaceRouterAbi,
+          functionName: "registerJob", args: [nextJobId, BNB_MARKETPLACE_CONTRACTS.policy],
+        });
+        updateStep(1, { state: "active", hash: registerHash });
+        await waitForSuccess(publicClient, registerHash);
+        updateStep(1, { state: "done", hash: registerHash });
+
+        updateStep(2, { state: "active" });
+        assertSameWallet();
+        const budgetHash = await walletClient.writeContract({
+          address: BNB_MARKETPLACE_CONTRACTS.commerce, abi: bnbMarketplaceCommerceAbi,
+          functionName: "setBudget", args: [nextJobId, feeAmount, "0x"],
+        });
+        updateStep(2, { state: "active", hash: budgetHash });
+        await waitForSuccess(publicClient, budgetHash);
+        updateStep(2, { state: "done", hash: budgetHash });
+
+        updateStep(3, { state: "active" });
+        assertSameWallet();
+        const approveHash = await walletClient.writeContract({
+          address: BNB_MARKETPLACE_CONTRACTS.paymentToken, abi: bnbMarketplaceTokenAbi,
+          functionName: "approve", args: [BNB_MARKETPLACE_CONTRACTS.commerce, feeAmount],
+        });
+        updateStep(3, { state: "active", hash: approveHash });
+        await waitForSuccess(publicClient, approveHash);
+        updateStep(3, { state: "done", hash: approveHash });
+
+        updateStep(4, { state: "active" });
+        assertSameWallet();
+        const fundHash = await walletClient.writeContract({
+          address: BNB_MARKETPLACE_CONTRACTS.commerce, abi: bnbMarketplaceCommerceAbi,
+          functionName: "fund", args: [nextJobId, feeAmount, "0x"],
+        });
+        updateStep(4, { state: "active", hash: fundHash });
+        await waitForSuccess(publicClient, fundHash);
+        updateStep(4, { state: "done", hash: fundHash });
+        const fundedJobId = nextJobId.toString();
+        setJobId(fundedJobId);
+        await requestDelivery(fundedJobId, nextQuote);
       });
-      updateStep(4, { state: "active", hash: fundHash });
-      await waitForSuccess(publicClient, fundHash);
-      updateStep(4, { state: "done", hash: fundHash });
-      const fundedJobId = nextJobId.toString();
-      setJobId(fundedJobId);
-      await requestDelivery(fundedJobId, nextQuote);
     } catch (cause) {
       setSteps((current) => current.map((step) => step.state === "active" ? { ...step, state: "error" } : step));
       setError(cause instanceof Error ? cause.message : "Testnet activation failed");
+      if (record.current) {
+        try {
+          persist({
+            transactions: record.current.transactions.map((transaction) => transaction?.state === "submitted" ? { ...transaction, state: "uncertain" } : transaction),
+            delivery: record.current.delivery === "requested" ? "uncertain" : record.current.delivery,
+            error: (cause instanceof Error ? cause.message : "Activation interrupted").slice(0, 1000),
+          });
+        } catch { setError("Job history could not be saved. Stop here and check your wallet's transactions before trying again."); }
+      }
     } finally {
       setRunning(false);
     }
@@ -229,22 +308,25 @@ export function PermissionSetup({ agent }: { agent: BnbMarketplaceAgent }) {
 
         <div className={result ? styles.reviewedNote : styles.reviewNote} aria-live="polite">
           <strong>{result ? "Agent response received" : "Testnet only"}</strong>
-          <span>{result ? `Job ${jobId ?? ""} was funded and delivery was requested.` : "No mainnet transaction is available in this flow. You approve every testnet call."}</span>
+          <span>{result ? `Job ${jobId ?? ""} was funded and a seller response was received. Completed execution is not verified.` : "No mainnet transaction is available in this flow. You approve every testnet call."}</span>
         </div>
 
         {error && <div className={styles.errorNote} role="alert">{error}</div>}
+        {historyError && <div className={styles.errorNote} role="alert">{historyError}</div>}
+        {interrupted && !running && <div className={styles.reviewNote}><strong>Saved job needs review</strong><span>Open Activity to check its transactions or recover delivery. Starting another payment here is disabled.</span></div>}
         {result && <pre className={styles.receiptData}>{JSON.stringify(result, null, 2)}</pre>}
 
         <button
           type="button"
           className={`${styles.primaryButton} ${styles.fullWidth}`}
           onClick={activate}
-          disabled={!ready || running || !activationReady || Boolean(result)}
+          disabled={!ready || running || !activationReady || Boolean(result) || Boolean(interrupted) || Boolean(historyError) || (authenticated && (!walletAddress || !loaded))}
         >
-          {!authenticated ? "Connect wallet →" : running ? "Waiting…" : result ? "Activated on testnet ✓" : jobId ? "Retry delivery →" : quote ? "Fund testnet job →" : "Request signed quote →"}
+          {!authenticated ? "Connect wallet →" : running ? "Waiting…" : result ? "Seller response saved" : interrupted ? "Review saved job in Activity" : quote ? "Fund testnet job →" : "Request signed quote →"}
         </button>
+        <Link href="/activity" className={`${styles.secondaryButton} ${styles.fullWidth}`}>View saved activity →</Link>
         <Link href={`/market/${liveAgent.slug}`} className={`${styles.secondaryButton} ${styles.fullWidth}`}>Back to agent</Link>
-        <small className={styles.finePrint}>Requires testnet BNB for gas and the quoted test $U fee. No private key is sent to AgentShack or the seller.</small>
+        <small className={styles.finePrint}>Requires testnet BNB and test $U. Job history is saved on this browser for this wallet; other devices are not synced. No private key is sent to AgentShack or the seller.</small>
       </aside>
     </>
   );
diff --git a/src/hooks/useMarketJobs.ts b/src/hooks/useMarketJobs.ts
new file mode 100644
index 0000000..06a7697
--- /dev/null
+++ b/src/hooks/useMarketJobs.ts
@@ -0,0 +1,27 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { readMarketJobs, type MarketJob } from "@/lib/bnb-marketplace-journal";
+
+export function useMarketJobs(wallet?: string) {
+  const [snapshot, setSnapshot] = useState<{ wallet?: string; jobs: MarketJob[]; error: string | null }>({ jobs: [], error: null });
+  useEffect(() => {
+    function refresh() {
+      try {
+        setSnapshot({ wallet, jobs: wallet ? readMarketJobs(window.localStorage, wallet) : [], error: null });
+      } catch {
+        setSnapshot({ wallet, jobs: [], error: "This browser could not read this wallet's job history. Existing records were not changed. Do not repeat a payment until you check its transaction." });
+      }
+    }
+    refresh();
+    window.addEventListener("storage", refresh);
+    window.addEventListener("focus", refresh);
+    window.addEventListener("agentshack-jobs", refresh);
+    return () => {
+      window.removeEventListener("storage", refresh);
+      window.removeEventListener("focus", refresh);
+      window.removeEventListener("agentshack-jobs", refresh);
+    };
+  }, [wallet]);
+  return snapshot.wallet === wallet ? { ...snapshot, loaded: true } : { wallet, jobs: [], error: null, loaded: false };
+}
diff --git a/src/lib/bnb-marketplace-journal.ts b/src/lib/bnb-marketplace-journal.ts
new file mode 100644
index 0000000..9bb8a2a
--- /dev/null
+++ b/src/lib/bnb-marketplace-journal.ts
@@ -0,0 +1,64 @@
+import { z } from "zod";
+import { getBnbMarketplaceAgent } from "@/lib/bnb-marketplace";
+
+const hash = z.string().regex(/^0x[0-9a-fA-F]{64}$/);
+const address = z.string().regex(/^0x[0-9a-fA-F]{40}$/);
+const uint = z.string().regex(/^\d{1,78}$/);
+export const JOB_STEPS = ["Create job", "Register policy", "Set budget", "Approve exact fee", "Fund job"] as const;
+export const journalRecordSchema = z.object({
+  id: z.string().uuid(), wallet: address, chainId: z.literal(97),
+  slug: z.string().refine((value) => Boolean(getBnbMarketplaceAgent(value))),
+  quote: z.object({ quoteHash: hash, feeAmount: uint, wallet: address }).strict(),
+  jobId: uint.nullable(),
+  transactions: z.array(z.object({ hash, state: z.enum(["submitted", "confirmed", "uncertain", "reverted"]) }).strict().nullable()).length(5),
+  delivery: z.enum(["not-requested", "requested", "response-received", "uncertain"]),
+  response: z.string().max(32_100).optional(), error: z.string().max(1_000).optional(),
+  createdAt: z.number().int().positive().max(8_640_000_000_000_000), updatedAt: z.number().int().positive().max(8_640_000_000_000_000),
+}).strict();
+export type MarketJob = z.infer<typeof journalRecordSchema>;
+export type JournalStorage = Pick<Storage, "getItem" | "setItem">;
+
+export function journalKey(wallet: string) {
+  return `agentshack:jobs:v1:97:${address.parse(wallet).toLowerCase()}`;
+}
+
+export function readMarketJobs(storage: JournalStorage, wallet: string): MarketJob[] {
+  const raw = storage.getItem(journalKey(wallet));
+  if (raw === null) return [];
+  if (raw.length > 4_000_000) throw new Error("Saved job history is too large. Do not start another payment in this browser.");
+  const parsed = z.array(journalRecordSchema).max(100).parse(JSON.parse(raw));
+  if (parsed.some((job) => job.wallet.toLowerCase() !== wallet.toLowerCase()) || new Set(parsed.map((job) => job.id)).size !== parsed.length) {
+    throw new Error("Saved history does not match this wallet.");
+  }
+  return parsed.sort((a, b) => b.createdAt - a.createdAt);
+}
+
+export function saveMarketJob(storage: JournalStorage, job: MarketJob) {
+  const valid = journalRecordSchema.parse(job);
+  const jobs = readMarketJobs(storage, valid.wallet);
+  const next = [valid, ...jobs.filter((item) => item.id !== valid.id)];
+  if (next.length > 100) throw new Error("This browser has reached its 100-job history limit. Existing records were preserved.");
+  // Write before moving to another transaction. Quota/security errors stop the flow.
+  storage.setItem(journalKey(valid.wallet), JSON.stringify(next));
+  if (typeof window !== "undefined") window.dispatchEvent(new Event("agentshack-jobs"));
+}
+
+export function jobStatus(job: MarketJob) {
+  if (job.delivery === "response-received") return "Seller response saved · execution not verified";
+  if (job.transactions[4]) return "Funding submitted · check chain before delivery";
+  if (job.transactions.some(Boolean)) return "Interrupted setup · review transactions";
+  return "Setup started · no transaction hash saved";
+}
+
+export function boundedSellerResponse(value: unknown) {
+  const text = JSON.stringify(value, null, 2) ?? "null";
+  return text.length > 32_000 ? `${text.slice(0, 32_000)}\n[Saved response truncated at 32 KB]` : text;
+}
+
+export async function withMarketJobLock<T>(wallet: string, operation: () => Promise<T>): Promise<T> {
+  if (!navigator.locks) throw new Error("This browser cannot safely coordinate wallet jobs. Use a browser with Web Locks support.");
+  return navigator.locks.request(journalKey(wallet), { ifAvailable: true }, async (lock) => {
+    if (!lock) throw new Error("Another tab is working on this wallet. Finish that task first.");
+    return operation();
+  });
+}
diff --git a/src/lib/bnb-marketplace-recovery.ts b/src/lib/bnb-marketplace-recovery.ts
new file mode 100644
index 0000000..cc76437
--- /dev/null
+++ b/src/lib/bnb-marketplace-recovery.ts
@@ -0,0 +1,49 @@
+import { decodeFunctionData, parseEventLogs, type Hash, type PublicClient } from "viem";
+import { getBnbMarketplaceAgent } from "@/lib/bnb-marketplace";
+import { BNB_MARKETPLACE_CONTRACTS as contracts, bnbMarketplaceCommerceAbi } from "@/lib/bnb-marketplace-chain";
+import { journalRecordSchema, type MarketJob } from "@/lib/bnb-marketplace-journal";
+
+type Reader = Pick<PublicClient, "getChainId" | "getTransaction" | "getTransactionReceipt">;
+const same = (a: string | null | undefined, b: string) => a?.toLowerCase() === b.toLowerCase();
+
+// Saved browser state is an observation, never proof or authority for another payment.
+// Recovery only reads chain data and returns a notification target; it cannot send money.
+export async function verifyFundedMarketJob(reader: Reader, saved: MarketJob, wallet: string) {
+  const job = journalRecordSchema.parse(saved);
+  const agent = getBnbMarketplaceAgent(job.slug)!;
+  if (!same(job.wallet, wallet) || !same(job.quote.wallet, agent.agentWallet)) throw new Error("Saved job belongs to a different wallet or agent.");
+  if (await reader.getChainId() !== 97) throw new Error("Recovery requires BSC Testnet (97).");
+  const createHash = job.transactions[0]?.hash as Hash | undefined;
+  const fundHash = job.transactions[4]?.hash as Hash | undefined;
+  if (!createHash || !fundHash) throw new Error("Funding is not recorded. Review the saved transactions; no payment will be repeated.");
+  const [create, fund, createReceipt, fundReceipt] = await Promise.all([
+    reader.getTransaction({ hash: createHash }), reader.getTransaction({ hash: fundHash }),
+    reader.getTransactionReceipt({ hash: createHash }), reader.getTransactionReceipt({ hash: fundHash }),
+  ]);
+  for (const [transaction, receipt, hash] of [[create, createReceipt, createHash], [fund, fundReceipt, fundHash]] as const) {
+    if (transaction.chainId !== 97 || !same(transaction.from, wallet) || !same(transaction.to, contracts.commerce) || transaction.value !== 0n ||
+      !same(transaction.hash, hash) || !same(receipt.transactionHash, hash) || receipt.status !== "success") {
+      throw new Error("Transaction is pending, failed, or does not match the expected buyer and testnet contract.");
+    }
+  }
+  if (fundReceipt.blockNumber < createReceipt.blockNumber) throw new Error("Funding precedes job creation.");
+  const creation = decodeFunctionData({ abi: bnbMarketplaceCommerceAbi, data: create.input });
+  const funding = decodeFunctionData({ abi: bnbMarketplaceCommerceAbi, data: fund.input });
+  if (creation.functionName !== "createJob" || funding.functionName !== "fund") throw new Error("Unexpected transaction call.");
+  const [provider, evaluator, , description, hook] = creation.args;
+  if (!same(provider, agent.agentWallet) || !same(evaluator, contracts.router) || !same(hook, contracts.router)) throw new Error("Job parties do not match the curated service.");
+  const terms = JSON.parse(description);
+  if (terms.version !== 1 || terms.chainId !== 97 || terms.agentId !== agent.agentId || terms.typedSelector !== agent.selector ||
+    typeof terms.policy !== "string" || !same(terms.policy, contracts.policy) || typeof terms.quoteHash !== "string" || !same(terms.quoteHash, job.quote.quoteHash)) {
+    throw new Error("Onchain job terms do not match the saved quote.");
+  }
+  const events = parseEventLogs({ abi: bnbMarketplaceCommerceAbi, eventName: "JobCreated", logs: createReceipt.logs.filter((log) => same(log.address, contracts.commerce)) });
+  const event = events.find((item) => same(item.args.client, wallet) && same(item.args.provider, agent.agentWallet));
+  if (!event || !same(event.args.evaluator, contracts.router) || !same(event.args.hook, contracts.router)) throw new Error("Expected JobCreated event not found.");
+  const [fundedId, amount, options] = funding.args;
+  if (event.args.jobId !== fundedId || (job.jobId !== null && job.jobId !== fundedId.toString()) || options !== "0x" ||
+    amount <= 0n || amount > BigInt(agent.maxFeeAmount) || amount !== BigInt(job.quote.feeAmount)) {
+    throw new Error("Funding does not match this job or its exact fee.");
+  }
+  return { jobId: fundedId.toString(), quoteHash: job.quote.quoteHash };
+}
diff --git a/vitest.config.ts b/vitest.config.ts
index 7c7932f..e8e6068 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -2,6 +2,7 @@ import { defineConfig } from 'vitest/config';
 import path from 'path';
 
 export default defineConfig({
+  oxc: { jsx: { runtime: 'automatic' } },
   test: {
     environment: 'node',
     globals: true,