feat(market): counter-offer negotiations + trade notifications

Offers were one-way (buyer proposes, seller accepts/declines) and fixed-slot
addressable events, so the buyer could never counter back and the haggling left
no trace. Now it's a thread.

- useMarketplaceOffers: every message gets a UNIQUE d (append-only) with a
  'role' tag (offer = buyer / response = seller), 'e' = the message it answers,
  and status. New counterOffer() plus respondToOffer(previous, status). Parsing
  still accepts the legacy fixed-slot d form when the role tag is absent.
- useListingOffers returns OfferThread[] (oldest first) with  = whose
  turn it is; useIncomingOffers returns the threads awaiting me (across listings).
- ListingOffersPanel: shows the volley, and accept/decline/counter (inline amount)
  for whichever side's turn it is, with withdraw on your own open offer. Counter
  notifications are nudged over DM too.
- New useTradeNotifications: incoming offers, counters and 'confirm our trade'
  requests, derived from events already addressed to the user.
- Bell: trade items render first in All and count toward the badge (vs seenAt).
- OS notifications: new 'trades' category in notificationPrefs + a trades source
  in OsNotificationBridge.
- NIP.md updated for the thread model (legacy form documented).

AGENTS.md

@@ -80,8 +80,16 @@ session with **no other memory of this project**. So:
   manages incoming requests, pending confirmations, and the user's trade records,
   and can **revoke** a record (`s=revoked`, excluded from reputation) for a dispute
   or mistake. Structured **offers** (kind `30403`, `useMarketplaceOffers` + the
-  `ListingOffersPanel`/`OfferDialog`) let a buyer propose an amount and the seller
+  `ListingOffersPanel`/`OfferDialog`) are a **counter-offer negotiation thread
-  accept/decline.
+  (2026-09-29):** every message is its own event with a **unique `d`** (append-only)
+  carrying `role` (`offer` = buyer / `response` = seller), `e` = the message it
+  answers, and `status`; either side can **accept / decline / withdraw / counter**
+  and `ListingOffersPanel` shows the volley + whose turn it is. Legacy fixed-slot
+  `d`s are still parsed (role inferred when the `role` tag is absent) — see NIP.md
+  → "Marketplace Offers". Trade/offer steps also feed **`useTradeNotifications`**
+  → the bell's **All** tab (`TradeNotificationCard`, counted in the badge against
+  `seenAt`) and OS notifications (new **`trades`** category in `notificationPrefs`,
+  wired in `OsNotificationBridge`).
 - **Cashu escrow** (marketplace): time-locked **P2PK** (lock to seller + buyer
   refund key + locktime) — see **`ESCROW.md`** and `src/lib/cashuEscrow.ts`
   (unit-tested). Protocol: `cashu_token` on the `31872`; each user advertises a

NIP.md

@@ -779,24 +779,36 @@ For trust and spam prevention, sellers should have a verified NIP-05 identifier.
 
 ## Marketplace Offers (kind 30403)
 
-A buyer's structured proposal for a listing, which the seller can accept or
+A structured **negotiation** over a listing. Either side can offer, counter,
-decline. SkateSpots-native (no existing NIP defines offers). Addressable, so an
+accept, decline, or withdraw — a back-and-forth thread, not a single request.
-offer/response can be updated in place.
 
-An **offer** is authored by the buyer; a **response** by the seller:
+**Every message is its own event with a UNIQUE `d`**, so counters never
+overwrite the message they answer (the thread is append-only). The current state
+of a negotiation is simply its newest message.
 
-| Field | Offer (`d = <buyer>:offer:<listing-d>`) | Response (`d = <seller>:offer-response:<buyer>`) |
+| Field | Value |
-| --- | --- | --- |
+| --- | --- |
-| `a` | the listing coord (`30402:<seller>:<d>`) | the listing coord |
+| `d` | `<author>:<role>:<listing-d>:<nonce>` — **unique**, one per message |
-| `p` | the **seller** | the **buyer** |
+| `a` | the listing coord (`30402:<seller>:<d>`) |
-| `e` | — | the **offer** event id being answered |
+| `p` | the **other party** (offer → seller; response → buyer) |
-| `status` | `open` \| `withdrawn` | `accepted` \| `declined` |
+| `e` | the message this one answers (a counter / accept / decline) — absent only on the first offer |
-| `amount` | optional `["amount","45000","SATS"]` | mirrored |
+| `role` | `offer` (authored by the buyer) \| `response` (authored by the seller) |
-| `alt` | `SkateSpots: marketplace offer` | same |
+| `status` | `open` \| `accepted` \| `declined` \| `withdrawn` |
+| `amount` | optional `["amount","45000","SATS"]` |
+| `alt` | `SkateSpots: marketplace offer` |
 
-`content` is an optional human message. Clients show a seller their incoming
+`content` is an optional human message. Either party may answer the newest `open`
-offers (open, `#p` = them) and a buyer their own offer plus the seller's
+message with a **counter** (`status=open`, new `amount`, `e` = the message being
-response. Payment is still arranged directly between the two skaters.
+answered), or **accept/decline** it. Negotiations are grouped by
+`(listing, buyer)` into threads; a thread is "awaiting" whoever did not author
+its newest `open` message.
+
+> ⚠️ Legacy events used fixed slots (`d = <buyer>:offer:<listing-d>` and
+> `<seller>:offer-response:<buyer>`, where a re-publish replaced the message).
+> Clients MUST still parse those (`role` inferred from the `d` marker when the
+> `role` tag is absent), but new messages use the unique-`d` thread form.
+
+Payment is still arranged directly between the two skaters.
 
 ## Community Contributions
 

src/components/ListingOffersPanel.tsx

@@ -4,14 +4,20 @@ import { nip19 } from 'nostr-tools';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
 import { useCurrentUser } from '@/hooks/useCurrentUser';
 import { useAuthor } from '@/hooks/useAuthor';
 import { useToast } from '@/hooks/useToast';
-import { useOfferActions, useListingOffers, type MarketplaceOffer } from '@/hooks/useMarketplaceOffers';
+import {
+  useOfferActions,
+  useListingOffers,
+  type MarketplaceOffer,
+  type OfferThread,
+} from '@/hooks/useMarketplaceOffers';
 import { useSendDirectMessage } from '@/hooks/useDirectMessages';
 import { genUserName } from '@/lib/genUserName';
 import type { MarketplaceItem } from '@/lib/types';
-import { Handshake, CheckCircle, X, Loader2 } from 'lucide-react';
+import { Handshake, CheckCircle, X, Loader2, ArrowLeftRight, Undo2 } from 'lucide-react';
 
 function PeerName({ pubkey }: { pubkey: string }) {
   const author = useAuthor(pubkey);
@@ -36,40 +42,49 @@ function statusBadge(status: MarketplaceOffer['status']) {
   }
 }
 
+function amountLabel(m: MarketplaceOffer): string {
+  return m.amount ? `${m.amount.toLocaleString()} ${m.currency ?? 'SATS'}` : 'no amount';
+}
+
 /**
- * Offers for a listing: the seller sees incoming offers with accept/decline;
+ * Offers for a listing, as a **negotiation thread**. Either side can accept,
- * a buyer sees their own offer and the seller's response.
+ * decline, withdraw, or **counter** with a new amount — and it's always clear
+ * whose turn it is.
  */
 export function ListingOffersPanel({ item, isOwner }: { item: MarketplaceItem; isOwner: boolean }) {
   const { user } = useCurrentUser();
   const { data } = useListingOffers({ pubkey: item.pubkey, identifier: item.identifier });
-  const { respondToOffer } = useOfferActions();
+  const { respondToOffer, counterOffer } = useOfferActions();
   const { mutateAsync: sendDM } = useSendDirectMessage();
   const { toast } = useToast();
   const [busy, setBusy] = useState<string | null>(null);
+  const [counterFor, setCounterFor] = useState<string | null>(null);
+  const [counterAmount, setCounterAmount] = useState('');
 
   if (!user || !data) return null;
 
-  const respond = async (offer: MarketplaceOffer, status: 'accepted' | 'declined') => {
+  const mine = data.threads.filter((t) => t.buyer === user.pubkey || t.seller === user.pubkey);
-    setBusy(offer.id);
+  if (mine.length === 0) return null;
+
+  const nudge = async (to: string, content: string) => {
     try {
-      await respondToOffer(offer, status);
+      await sendDM({ recipients: to, content });
-      // Best-effort nudge to the buyer via NIP-17 DM.
-      try {
-        await sendDM({
-          recipients: offer.buyer,
-          content:
-            status === 'accepted'
-              ? '✅ Your offer was accepted! Message the seller to arrange the handoff.'
-              : '❌ Your offer was declined.',
-        });
     } catch {
-        /* DM optional */
+      /* DM is a best-effort extra nudge; the event itself already carries it */
     }
-      toast({
+  };
-        title: status === 'accepted' ? 'Offer accepted' : 'Offer declined',
+
-        description: 'The buyer will see your response.',
+  const respond = async (thread: OfferThread, status: 'accepted' | 'declined') => {
-      });
+    setBusy(thread.latest.id);
+    try {
+      await respondToOffer(thread.latest, status);
+      await nudge(
+        thread.latest.author,
+        status === 'accepted'
+          ? '✅ Your offer was accepted! Message to arrange the handoff.'
+          : '❌ Your offer was declined.',
+      );
+      toast({ title: status === 'accepted' ? 'Offer accepted' : 'Offer declined' });
     } catch (e) {
       toast({
         title: 'Could not respond',
@@ -81,10 +96,10 @@ export function ListingOffersPanel({ item, isOwner }: { item: MarketplaceItem; i
     }
   };
 
-  const withdraw = async (offer: MarketplaceOffer) => {
+  const withdraw = async (thread: OfferThread) => {
-    setBusy(offer.id);
+    setBusy(thread.latest.id);
     try {
-      await respondToOffer(offer, 'withdrawn');
+      await respondToOffer(thread.latest, 'withdrawn');
       toast({ title: 'Offer withdrawn' });
     } catch (e) {
       toast({
@@ -97,50 +112,154 @@ export function ListingOffersPanel({ item, isOwner }: { item: MarketplaceItem; i
     }
   };
 
-  // Seller view: incoming offers on their listing.
+  const sendCounter = async (thread: OfferThread) => {
-  if (isOwner) {
+    const amount = Number(counterAmount);
-    const incoming = data.offers.filter((o) => o.seller === user.pubkey);
+    if (!counterAmount.trim() || !Number.isFinite(amount) || amount <= 0) {
-    if (incoming.length === 0) return null;
+      toast({ title: 'Enter a counter amount', variant: 'destructive' });
+      return;
+    }
+    setBusy(thread.latest.id);
+    try {
+      await counterOffer({
+        listing: { pubkey: item.pubkey, identifier: item.identifier },
+        previous: thread.latest,
+        amount,
+      });
+      await nudge(thread.latest.author, `↩️ Counter-offer: ${amount.toLocaleString()} sats`);
+      toast({ title: 'Counter-offer sent', description: 'It’s their turn now.' });
+      setCounterFor(null);
+      setCounterAmount('');
+    } catch (e) {
+      toast({
+        title: 'Could not send the counter',
+        description: e instanceof Error ? e.message : 'Something went wrong.',
+        variant: 'destructive',
+      });
+    } finally {
+      setBusy(null);
+    }
+  };
+
   return (
     <Card className="bg-black/90 border-2 border-orange-500/25">
       <CardContent className="space-y-3 p-4">
         <h3 className="flex items-center gap-2 text-sm font-bold uppercase tracking-wide text-orange-400">
-            <Handshake className="h-4 w-4" /> Offers ({incoming.length})
+          <Handshake className="h-4 w-4" /> {isOwner ? `Offers (${mine.length})` : 'Your negotiations'}
         </h3>
-          {incoming.map((offer) => {
+
-            const response = data.responses.find((r) => r.offerId === offer.id);
+        {mine.map((thread) => {
+          const latest = thread.latest;
+          const other = latest.author === user.pubkey
+            ? latest.buyer === user.pubkey
+              ? latest.seller
+              : latest.buyer
+            : latest.author;
+          const myTurn = thread.awaiting === user.pubkey;
+          const history = thread.messages.slice(0, -1);
+
           return (
-              <div key={offer.id} className="rounded-xl border border-white/10 bg-white/[0.03] p-3 space-y-1.5">
+            <div
-                <div className="flex items-center gap-2">
+              key={`${thread.listingCoord}:${thread.buyer}`}
-                  <span className="text-sm text-gray-200"><PeerName pubkey={offer.buyer} /></span>
+              className="space-y-2 rounded-xl border border-white/10 bg-white/[0.03] p-3"
-                  {offer.amount ? (
+            >
-                    <span className="text-sm font-bold text-[#ccff00]">
+              <div className="flex flex-wrap items-center gap-2">
-                      {offer.amount.toLocaleString()} {offer.currency ?? 'SATS'}
+                <span className="text-sm text-gray-200">
+                  <PeerName pubkey={other} />
                 </span>
-                  ) : null}
+                {statusBadge(latest.status)}
-                  {response ? statusBadge(response.status) : statusBadge(offer.status)}
+                <span className="ml-auto text-sm font-bold text-[#ccff00]">{amountLabel(latest)}</span>
               </div>
-                {offer.message && <p className="text-xs text-gray-400">{offer.message}</p>}
+
-                {!response && offer.status === 'open' && (
+              {/* Earlier rounds — the volley, so the haggling is visible. */}
+              {history.length > 0 && (
+                <div className="space-y-0.5 border-l border-white/10 pl-2">
+                  {history.map((m) => (
+                    <p key={m.id} className="text-[11px] text-gray-500">
+                      {m.author === user.pubkey ? 'You' : 'Them'}: {amountLabel(m)}
+                      {m.status !== 'open' ? ` · ${m.status}` : ''}
+                    </p>
+                  ))}
+                </div>
+              )}
+
+              {latest.message && <p className="text-xs text-gray-400">{latest.message}</p>}
+
+              {/* My turn: accept, decline, or counter. */}
+              {myTurn && (
+                <>
                   <div className="flex gap-2 pt-1">
                     <Button
                       size="sm"
-                      onClick={() => respond(offer, 'accepted')}
+                      onClick={() => respond(thread, 'accepted')}
-                      disabled={busy === offer.id}
+                      disabled={busy === latest.id}
                       className="flex-1 gap-1.5 bg-[#ccff00] font-bold text-black hover:bg-[#ccff00]/90"
                     >
-                      {busy === offer.id ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <CheckCircle className="h-3.5 w-3.5" />}
+                      {busy === latest.id ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <CheckCircle className="h-3.5 w-3.5" />}
                       Accept
                     </Button>
                     <Button
                       size="sm"
                       variant="outline"
-                      onClick={() => respond(offer, 'declined')}
+                      onClick={() => respond(thread, 'declined')}
-                      disabled={busy === offer.id}
+                      disabled={busy === latest.id}
                       className="flex-1 gap-1.5 border-red-500/30 text-red-400 hover:bg-red-500/10"
                     >
                       <X className="h-3.5 w-3.5" /> Decline
                     </Button>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => {
+                        setCounterFor(counterFor === latest.id ? null : latest.id);
+                        setCounterAmount(latest.amount ? String(Math.round(latest.amount)) : '');
+                      }}
+                      className="flex-1 gap-1.5 border-orange-500/40 text-orange-400 hover:bg-orange-500/10"
+                    >
+                      <ArrowLeftRight className="h-3.5 w-3.5" /> Counter
+                    </Button>
+                  </div>
+                  {counterFor === latest.id && (
+                    <div className="flex items-center gap-2">
+                      <Input
+                        autoFocus
+                        type="number"
+                        inputMode="numeric"
+                        value={counterAmount}
+                        onChange={(e) => setCounterAmount(e.target.value)}
+                        placeholder="Your counter (sats)"
+                        className="h-9 border-white/15 bg-white/5 text-sm text-white"
+                      />
+                      <Button
+                        size="sm"
+                        onClick={() => sendCounter(thread)}
+                        disabled={busy === latest.id}
+                        className="shrink-0 gap-1.5 bg-orange-500 font-bold text-black hover:bg-orange-500/90"
+                      >
+                        {busy === latest.id ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : null}
+                        Send
+                      </Button>
+                    </div>
+                  )}
+                </>
+              )}
+
+              {/* Their turn: waiting, with the option to pull my own offer. */}
+              {!myTurn && latest.status === 'open' && (
+                <div className="flex items-center gap-2">
+                  <p className="flex-1 text-xs text-gray-500">
+                    Waiting on <PeerName pubkey={other} /> — your turn will come back if they counter.
+                  </p>
+                  {latest.author === user.pubkey && (
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => withdraw(thread)}
+                      disabled={busy === latest.id}
+                      className="shrink-0 gap-1.5 border-white/15"
+                    >
+                      <Undo2 className="h-3.5 w-3.5" /> Withdraw
+                    </Button>
+                  )}
                 </div>
               )}
             </div>
@@ -150,42 +269,3 @@ export function ListingOffersPanel({ item, isOwner }: { item: MarketplaceItem; i
     </Card>
   );
 }
-
-  // Buyer view: my own offer + the seller's response.
-  const myOffer = data.offers.find((o) => o.buyer === user.pubkey);
-  if (!myOffer) return null;
-  const response = data.responses.find((r) => r.offerId === myOffer.id);
-
-  return (
-    <Card className="bg-black/90 border-2 border-orange-500/25">
-      <CardContent className="space-y-2 p-4">
-        <h3 className="flex items-center gap-2 text-sm font-bold uppercase tracking-wide text-orange-400">
-          <Handshake className="h-4 w-4" /> Your offer
-        </h3>
-        <div className="flex items-center gap-2">
-          {myOffer.amount ? (
-            <span className="text-sm font-bold text-[#ccff00]">
-              {myOffer.amount.toLocaleString()} {myOffer.currency ?? 'SATS'}
-            </span>
-          ) : (
-            <span className="text-sm text-gray-300">Offer</span>
-          )}
-          {statusBadge(response ? response.status : myOffer.status)}
-        </div>
-        {response?.message && <p className="text-xs text-gray-400">{response.message}</p>}
-        {!response && myOffer.status === 'open' && (
-          <Button
-            size="sm"
-            variant="outline"
-            onClick={() => withdraw(myOffer)}
-            disabled={busy === myOffer.id}
-            className="w-full border-white/15 gap-1.5"
-          >
-            {busy === myOffer.id ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : null}
-            Withdraw offer
-          </Button>
-        )}
-      </CardContent>
-    </Card>
-  );
-}

src/components/NotificationBell.tsx

@@ -11,10 +11,12 @@ import { CrewInviteCard } from '@/components/CrewInviteCard';
 import { JoinRequestCard } from '@/components/JoinRequestCard';
 import { CollectiveJoinRequestCard } from '@/components/CollectiveJoinRequestCard';
 import { ActivityNotificationCard } from '@/components/ActivityNotificationCard';
+import { TradeNotificationCard } from '@/components/TradeNotificationCard';
 import { ImageWithFallback } from '@/components/ImageWithFallback';
 import { EmptyState as SharedEmptyState } from '@/components/EmptyState';
 import { useCrewNotifications, useIsPendingMember } from '@/hooks/useCrewNotifications';
 import { useActivityNotifications } from '@/hooks/useActivityNotifications';
+import { useTradeNotifications } from '@/hooks/useTradeNotifications';
 import { useNotificationsRead } from '@/hooks/useNotificationsRead';
 import { useNewsletterIssues } from '@/hooks/useNewsletterIssues';
 import { useNewsletterRead } from '@/hooks/useNewsletterRead';
@@ -207,6 +209,10 @@ export function NotificationBell({ className }: { className?: string }) {
   const { notifications: activity, isLoading: activityLoading } = useActivityNotifications();
   const { lastRead, seenAt, markAllRead } = useNotificationsRead();
 
+  // Buying/selling steps: an offer on your listing, a counter it's your turn to
+  // answer, or a request to confirm a completed trade.
+  const { notifications: tradeNotifs, isLoading: tradeLoading } = useTradeNotifications(user?.pubkey);
+
   // Newsletter mailbox — only nags subscribers, but always browsable in the tab.
   const { data: newsletterIssues = [], isLoading: newsletterLoading } = useNewsletterIssues();
   const { lastRead: newsletterLastRead, markNewsletterRead } = useNewsletterRead();
@@ -238,6 +244,12 @@ export function NotificationBell({ className }: { className?: string }) {
     [activity, lastRead],
   );
 
+  // Trades are actionable like crew items — they count until acknowledged.
+  const unreadTrades = useMemo(
+    () => tradeNotifs.filter((t) => t.createdAt > seenAt).length,
+    [tradeNotifs, seenAt],
+  );
+
   // Unread newsletter issues (only counts for subscribers).
   const unreadNewsletter = useMemo(
     () =>
@@ -248,7 +260,7 @@ export function NotificationBell({ className }: { className?: string }) {
   );
 
   // Badge = only UNACKNOWLEDGED items, so "Mark read" actually clears it.
-  const badgeTotal = unreadCrew + unreadActivity + unreadNewsletter;
+  const badgeTotal = unreadCrew + unreadActivity + unreadNewsletter + unreadTrades;
 
   // Opening the bell marks social + crew as read (and newsletter, since the
   // News tab is right there). Newsletter read state also clears on the /newsletter page.
@@ -259,7 +271,7 @@ export function NotificationBell({ className }: { className?: string }) {
     }
   }, [open, markAllRead, markNewsletterRead]);
 
-  const isLoading = crewLoading || activityLoading;
+  const isLoading = crewLoading || activityLoading || tradeLoading;
 
   if (!user) return null;
 
@@ -373,10 +385,19 @@ export function NotificationBell({ className }: { className?: string }) {
                   <Loader2 className="h-4 w-4 animate-spin" /> Checking for updates…
                 </div>
               )}
-              {!isLoading && crewTotal === 0 && activity.length === 0 && newsletterIssues.length === 0 && (
+              {!isLoading && crewTotal === 0 && activity.length === 0 && newsletterIssues.length === 0 && tradeNotifs.length === 0 && (
-                <EmptyState label="Zaps, reactions, replies, newsletter drops and crew activity will show up here." />
+                <EmptyState label="Offers, trades, zaps, replies, newsletter drops and crew activity will show up here." />
               )}
               <div className="space-y-2.5">
+                {/* Buying/selling steps first — they're the most time-sensitive. */}
+                {tradeNotifs.map((n) => (
+                  <TradeNotificationCard
+                    key={n.id}
+                    notification={n}
+                    unread={n.createdAt > seenAt}
+                    onNavigate={() => setOpen(false)}
+                  />
+                ))}
                 {joinRequests.map(({ request, crew, endorsements }) => (
                   <JoinRequestCard key={request.id} request={request} crew={crew} endorsements={endorsements} compact />
                 ))}

src/components/OsNotificationBridge.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useCurrentUser } from '@/hooks/useCurrentUser';
 import { useActivityNotifications, type ActivityNotification } from '@/hooks/useActivityNotifications';
+import { useTradeNotifications, tradeNotificationText, type TradeNotification } from '@/hooks/useTradeNotifications';
 import { useCrewNotifications } from '@/hooks/useCrewNotifications';
 import { useNewsletterIssues } from '@/hooks/useNewsletterIssues';
 import { useNewsletterSubscription } from '@/hooks/useNewsletterSubscription';
@@ -190,6 +191,23 @@ function dmCandidate(envelope: DmEnvelope): Candidate {
   };
 }
 
+function tradeCandidate(n: TradeNotification): Candidate {
+  const title =
+    n.type === 'trade-request'
+      ? 'Confirm a trade'
+      : n.type === 'counter'
+        ? 'Counter-offer'
+        : 'New offer on your listing';
+  return {
+    key: `trade:${n.id}`,
+    source: 'trades',
+    createdAt: n.createdAt,
+    title,
+    body: tradeNotificationText(n),
+    path: `/listing/${n.listingPubkey}/${n.listingIdentifier}`,
+  };
+}
+
 function newsletterCandidate(issue: SkateNewsletterIssue): Candidate {
   return {
     key: `newsletter:${issue.id}`,
@@ -239,12 +257,14 @@ export function OsNotificationBridge() {
 
 function NotificationEngine({ prefs }: { prefs: NotificationPrefs }) {
   const navigate = useNavigate();
+  const { user } = useCurrentUser();
   const { notifications: activity, isLoading: activityLoading } = useActivityNotifications();
   const { invites, listedCrews, joinRequests, collectiveRequests, isLoading: crewLoading } =
     useCrewNotifications();
   const { data: issues = [], isLoading: newsletterLoading } = useNewsletterIssues();
   const { isSubscribed } = useNewsletterSubscription();
   const { data: envelopes = [], isFetched: dmFetched } = useDmEnvelopes(true);
+  const { notifications: tradeNotifs, isLoading: tradeLoading } = useTradeNotifications(user?.pubkey);
 
   // Loaded lazily and mutated directly (never state) so bookkeeping can't cause
   // a render loop.
@@ -275,6 +295,7 @@ function NotificationEngine({ prefs }: { prefs: NotificationPrefs }) {
     [issues, isSubscribed],
   );
   const dmItems = useMemo(() => envelopes.map(dmCandidate), [envelopes]);
+  const tradeItems = useMemo(() => tradeNotifs.map(tradeCandidate), [tradeNotifs]);
 
   useEffect(() => {
     const seen = seenRef.current;
@@ -285,6 +306,7 @@ function NotificationEngine({ prefs }: { prefs: NotificationPrefs }) {
       { name: 'crew', ready: !crewLoading, items: crewItems },
       { name: 'newsletter', ready: !newsletterLoading, items: newsletterItems },
       { name: 'dms', ready: dmFetched, items: dmItems },
+      { name: 'trades', ready: !tradeLoading, items: tradeItems },
     ];
 
     let changed = false;
@@ -326,10 +348,12 @@ function NotificationEngine({ prefs }: { prefs: NotificationPrefs }) {
     crewItems,
     newsletterItems,
     dmItems,
+    tradeItems,
     activityLoading,
     crewLoading,
     newsletterLoading,
     dmFetched,
+    tradeLoading,
     prefs,
   ]);
 

src/components/TradeNotificationCard.tsx

@@ -0,0 +1,64 @@
+import { Link } from 'react-router-dom';
+import { nip19 } from 'nostr-tools';
+import { ArrowLeftRight, Handshake, BadgeCheck } from 'lucide-react';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { useAuthor } from '@/hooks/useAuthor';
+import { genUserName } from '@/lib/genUserName';
+import { tradeNotificationText, type TradeNotification } from '@/hooks/useTradeNotifications';
+import { cn } from '@/lib/utils';
+
+const TYPE_META: Record<
+  TradeNotification['type'],
+  { icon: typeof Handshake; className: string; label: string }
+> = {
+  offer: { icon: Handshake, className: 'bg-[#ccff00]/15 text-[#ccff00]', label: 'New offer' },
+  counter: { icon: ArrowLeftRight, className: 'bg-orange-500/15 text-orange-400', label: 'Counter-offer' },
+  'trade-request': { icon: BadgeCheck, className: 'bg-teal-500/15 text-teal-300', label: 'Confirm a trade' },
+};
+
+/** A buying/selling step in the notification bell. */
+export function TradeNotificationCard({
+  notification,
+  unread,
+  onNavigate,
+}: {
+  notification: TradeNotification;
+  unread: boolean;
+  onNavigate?: () => void;
+}) {
+  const author = useAuthor(notification.counterparty);
+  const name = author.data?.metadata?.name ?? genUserName(notification.counterparty);
+  const pic = author.data?.metadata?.picture;
+  const meta = TYPE_META[notification.type];
+  const Icon = meta.icon;
+  const to = `/listing/${notification.listingPubkey}/${notification.listingIdentifier}`;
+
+  return (
+    <Link
+      to={to}
+      onClick={onNavigate}
+      className={cn(
+        'flex items-start gap-3 rounded-xl border p-3 transition-colors hover:border-[#ccff00]/40 hover:bg-white/[0.05]',
+        unread ? 'border-[#ccff00]/25 bg-[#ccff00]/[0.05]' : 'border-white/10 bg-white/[0.02]',
+      )}
+    >
+      <div className={cn('flex h-9 w-9 shrink-0 items-center justify-center rounded-xl', meta.className)}>
+        <Icon className="h-4 w-4" />
+      </div>
+      <div className="min-w-0 flex-1">
+        <p className="text-[10px] font-black uppercase tracking-widest text-gray-500">{meta.label}</p>
+        <p className="flex items-center gap-1.5 text-sm leading-snug text-gray-200">
+          <Avatar className="h-4 w-4">
+            <AvatarImage src={pic} alt={name} />
+            <AvatarFallback className="text-[8px]">{name.slice(0, 2).toUpperCase()}</AvatarFallback>
+          </Avatar>
+          <span className="font-bold text-white">{name}</span>
+        </p>
+        <p className="mt-0.5 text-xs text-gray-400">{tradeNotificationText(notification)}</p>
+        <p className="mt-1 text-[10px] font-bold uppercase tracking-wide text-[#ccff00]">
+          {notification.type === 'trade-request' ? 'Open listing' : 'Review the offer'} →
+        </p>
+      </div>
+    </Link>
+  );
+}

src/hooks/useMarketplaceOffers.ts

@@ -6,16 +6,21 @@ import { useSkateRelays } from '@/hooks/useSkateRelays';
 import { MARKETPLACE_ITEM_KIND } from '@/lib/types';
 
 /**
- * Marketplace offers — a buyer's structured proposal ("I'll give X for this"),
+ * Marketplace offers — a structured negotiation over a listing, documented in
- * which the seller can accept or decline. SkateSpots-native, documented in
  * `NIP.md`.
  *
- * Kind `30403` (addressable):
+ * Kind `30403` (addressable), one event per message:
- *   offer    → d = `<buyer>:offer:<listing-d>`,   a = listing, p = seller
+ *   a  = the listing (`30402:<pubkey>:<d>`)
- *   response → d = `<seller>:offer-response:<buyer>`, a = listing, p = buyer,
+ *   p  = the OTHER party
- *              e = the buyer's offer event id
+ *   e  = the message this one answers (a counter / an accept / a decline)
- * state lives in a `status` tag: open | accepted | declined | withdrawn.
+ *   role = 'offer' (sent by the buyer) | 'response' (sent by the seller)
+ *   status = open | accepted | declined | withdrawn
+ *   amount = <sats> SATS
+ * Every message uses a UNIQUE `d`, so the whole back-and-forth is a durable
+ * thread (both sides can counter as many times as they like). The current state
+ * of a negotiation is simply its newest message.
  */
+
 export const OFFER_KIND = 30403;
 
 export type OfferStatus = 'open' | 'accepted' | 'declined' | 'withdrawn';
@@ -24,7 +29,7 @@ export type OfferRole = 'offer' | 'response';
 export interface MarketplaceOffer {
   id: string;
   role: OfferRole;
-  /** Author: the buyer for an offer, the seller for a response. */
+  /** Author of this message (buyer for `offer`, seller for `response`). */
   author: string;
   buyer: string;
   seller: string;
@@ -35,8 +40,8 @@ export interface MarketplaceOffer {
   currency?: string;
   status: OfferStatus;
   message: string;
-  /** The offer event id this response answers (responses only). */
+  /** The message this one answers (`e`), when it's a counter/accept/decline. */
-  offerId?: string;
+  replyTo?: string;
   createdAt: number;
   event: NostrEvent;
 }
@@ -60,7 +65,15 @@ export function parseOffer(event: NostrEvent): MarketplaceOffer | null {
   const coord = parseListingCoord(a);
   if (!d || !a || !coord) return null;
 
-  const role: OfferRole = d.includes(':offer-response:') ? 'response' : 'offer';
+  // Explicit `role` tag wins; fall back to the legacy `d` marker.
+  const roleTag = tag(event, 'role');
+  const role: OfferRole =
+    roleTag === 'response' || roleTag === 'offer'
+      ? roleTag
+      : d.includes(':offer-response:')
+        ? 'response'
+        : 'offer';
+
   const counterparty = tag(event, 'p');
   const amountTag = event.tags.find(([n]) => n === 'amount');
   const status = (tag(event, 'status') as OfferStatus) ?? 'open';
@@ -81,7 +94,7 @@ export function parseOffer(event: NostrEvent): MarketplaceOffer | null {
     currency: amountTag?.[2],
     status,
     message: event.content,
-    offerId: tag(event, 'e'),
+    replyTo: tag(event, 'e'),
     createdAt: event.created_at,
     event,
   };
@@ -97,49 +110,92 @@ function dedupeNewest(events: NostrEvent[]): NostrEvent[] {
   return [...byD.values()];
 }
 
-/** All offers + responses for a listing. */
+/** One negotiation between a buyer and the seller, oldest message first. */
+export interface OfferThread {
+  buyer: string;
+  seller: string;
+  listingCoord: string;
+  messages: MarketplaceOffer[];
+  /** The message that currently represents the thread's state. */
+  latest: MarketplaceOffer;
+  /** Whose turn it is to answer (null when accepted/declined/withdrawn). */
+  awaiting: string | null;
+}
+
+function toThreads(messages: MarketplaceOffer[]): OfferThread[] {
+  const byPair = new Map<string, MarketplaceOffer[]>();
+  for (const m of messages) {
+    if (!m.buyer || !m.seller) continue;
+    const key = `${m.listingCoord}|${m.buyer}`;
+    const list = byPair.get(key) ?? [];
+    list.push(m);
+    byPair.set(key, list);
+  }
+
+  const threads: OfferThread[] = [];
+  for (const list of byPair.values()) {
+    const sorted = [...list].sort((a, b) => a.createdAt - b.createdAt || a.id.localeCompare(b.id));
+    const latest = sorted[sorted.length - 1];
+    // `open` means the other party must answer; any terminal status ends it.
+    const awaiting =
+      latest.status === 'open'
+        ? latest.author === latest.buyer
+          ? latest.seller
+          : latest.buyer
+        : null;
+    threads.push({
+      buyer: latest.buyer,
+      seller: latest.seller,
+      listingCoord: latest.listingCoord,
+      messages: sorted,
+      latest,
+      awaiting,
+    });
+  }
+  return threads.sort((a, b) => b.latest.createdAt - a.latest.createdAt);
+}
+
+/** Every negotiation thread on a listing. */
 export function useListingOffers(listing?: { pubkey: string; identifier: string }) {
   const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
   const coord = listing ? `${MARKETPLACE_ITEM_KIND}:${listing.pubkey}:${listing.identifier}` : undefined;
 
-  return useQuery<{ offers: MarketplaceOffer[]; responses: MarketplaceOffer[] }>({
+  return useQuery<{ threads: OfferThread[] }>({
     queryKey: ['listing-offers', coord, getQueryKeySuffix()],
     enabled: !!coord,
     staleTime: 60 * 1000,
     queryFn: async () => {
-      if (!coord) return { offers: [], responses: [] };
+      if (!coord) return { threads: [] };
       const events = await querySkateContent(
-        [{ kinds: [OFFER_KIND], '#a': [coord], limit: 100 }],
+        [{ kinds: [OFFER_KIND], '#a': [coord], limit: 200 }],
         { signal: AbortSignal.timeout(8000) },
       );
-      const parsed = dedupeNewest(events)
+      const messages = dedupeNewest(events)
         .map(parseOffer)
         .filter((o): o is MarketplaceOffer => !!o);
-      return {
+      return { threads: toThreads(messages) };
-        offers: parsed.filter((o) => o.role === 'offer'),
-        responses: parsed.filter((o) => o.role === 'response'),
-      };
     },
   });
 }
 
-/** Offers received by a seller (open, addressed to them). */
+/** Negotiations where it's `pubkey`'s turn to answer (across every listing). */
-export function useIncomingOffers(sellerPubkey: string | undefined) {
+export function useIncomingOffers(pubkey: string | undefined) {
   const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
 
-  return useQuery<MarketplaceOffer[]>({
+  return useQuery<OfferThread[]>({
-    queryKey: ['incoming-offers', sellerPubkey, getQueryKeySuffix()],
+    queryKey: ['incoming-offers', pubkey, getQueryKeySuffix()],
-    enabled: !!sellerPubkey,
+    enabled: !!pubkey,
     staleTime: 60 * 1000,
     queryFn: async () => {
-      if (!sellerPubkey) return [];
+      if (!pubkey) return [];
       const events = await querySkateContent(
-        [{ kinds: [OFFER_KIND], '#p': [sellerPubkey], limit: 100 }],
+        [{ kinds: [OFFER_KIND], '#p': [pubkey], limit: 200 }],
         { signal: AbortSignal.timeout(8000) },
       );
-      return dedupeNewest(events)
+      const messages = dedupeNewest(events)
         .map(parseOffer)
-        .filter((o): o is MarketplaceOffer => !!o && o.role === 'offer' && o.status === 'open');
+        .filter((o): o is MarketplaceOffer => !!o);
+      return toThreads(messages).filter((t) => t.awaiting === pubkey);
     },
   });
 }
@@ -148,61 +204,85 @@ export function useOfferActions() {
   const { user } = useCurrentUser();
   const { mutateAsync: publish } = useNostrPublish();
 
-  const createOffer = async ({
+  /**
+   * Publish one negotiation message. `d` is unique per message so the thread is
+   * append-only (a counter never overwrites the message it answers).
+   */
+  const publishMessage = async ({
     listing,
+    counterparty,
     amount,
     currency = 'SATS',
     note,
+    status = 'open',
+    replyTo,
   }: {
     listing: { pubkey: string; identifier: string };
+    /** The other party — tagged `p` so the message reaches them. */
+    counterparty: string;
     amount?: number;
     currency?: string;
     note?: string;
+    status?: OfferStatus;
+    replyTo?: string;
   }) => {
     if (!user) throw new Error('Log in to make an offer.');
+    if (counterparty === user.pubkey) throw new Error('Pick the other party, not yourself.');
+    // A buyer's messages are `offer`s; the listing owner's are `response`s.
+    const role: OfferRole = user.pubkey === listing.pubkey ? 'response' : 'offer';
     const coord = `${MARKETPLACE_ITEM_KIND}:${listing.pubkey}:${listing.identifier}`;
+
     const tags: string[][] = [
-      ['d', `${user.pubkey}:offer:${listing.identifier}`],
+      ['d', `${user.pubkey}:${role}:${listing.identifier}:${Date.now().toString(36)}`],
       ['a', coord],
-      ['p', listing.pubkey],
+      ['role', role],
-      ['status', 'open'],
+      ['status', status],
+      ['p', counterparty],
       ['alt', 'SkateSpots: marketplace offer'],
     ];
+    if (replyTo) tags.push(['e', replyTo]);
     if (amount && amount > 0) tags.push(['amount', String(amount), currency]);
-    await publish({
+
-      kind: OFFER_KIND,
+    await publish({ kind: OFFER_KIND, content: note?.trim() || '', tags });
-      content: note?.trim() || '',
-      tags,
-    });
   };
 
-  /** Seller responds to a buyer's offer (accept/decline), or buyer withdraws. */
+  /** Buyer: open the negotiation. */
-  const respondToOffer = async (offer: MarketplaceOffer, status: OfferStatus, note?: string) => {
+  const createOffer = (args: { listing: { pubkey: string; identifier: string }; amount?: number; currency?: string; note?: string }) =>
-    if (!user) throw new Error('Log in to respond.');
+    publishMessage({ ...args, counterparty: args.listing.pubkey });
-    const isBuyerWithdrawing = user.pubkey === offer.buyer && status === 'withdrawn';
 
-    const tags: string[][] = isBuyerWithdrawing
+  /** Either side answers with a new amount — the counter-offer volley. */
-      ? [
+  const counterOffer = (args: {
-          ['d', `${offer.buyer}:offer:${offer.listingIdentifier}`],
+    listing: { pubkey: string; identifier: string };
-          ['a', offer.listingCoord],
+    previous: MarketplaceOffer;
-          ['p', offer.seller],
+    amount?: number;
-        ]
+    currency?: string;
-      : [
+    note?: string;
-          ['d', `${user.pubkey}:offer-response:${offer.buyer}`],
+  }) =>
-          ['a', offer.listingCoord],
+    publishMessage({
-          ['p', offer.buyer],
+      listing: args.listing,
-          ['e', offer.id],
+      counterparty: args.previous.author,
-        ];
+      amount: args.amount,
-    tags.push(['status', status], ['alt', 'SkateSpots: marketplace offer']);
+      currency: args.currency,
-    const amountTag = offer.event.tags.find(([n]) => n === 'amount');
+      note: args.note,
-    if (amountTag && !isBuyerWithdrawing) tags.push(amountTag);
+      status: 'open',
-
+      replyTo: args.previous.id,
-    await publish({
-      kind: OFFER_KIND,
-      content: note?.trim() || offer.message,
-      tags,
     });
-  };
 
-  return { createOffer, respondToOffer };
+  /** Accept / decline / withdraw — always answering the current message. */
+  const respondToOffer = (
+    previous: MarketplaceOffer,
+    status: Extract<OfferStatus, 'accepted' | 'declined' | 'withdrawn'>,
+    note?: string,
+  ) =>
+    publishMessage({
+      listing: { pubkey: previous.listingPubkey, identifier: previous.listingIdentifier },
+      counterparty: previous.author,
+      amount: status === 'accepted' ? previous.amount : undefined,
+      currency: previous.currency,
+      note: note ?? previous.message,
+      status,
+      replyTo: previous.id,
+    });
+
+  return { createOffer, counterOffer, respondToOffer };
 }

src/hooks/useTradeNotifications.ts

@@ -0,0 +1,81 @@
+import { useMemo } from 'react';
+import { useIncomingOffers, type MarketplaceOffer } from '@/hooks/useMarketplaceOffers';
+import { useIncomingTradeRequests } from '@/hooks/useTradeAttestations';
+
+/**
+ * Trade/offer activity for the logged-in user — the buying/selling steps that
+ * deserve a nudge: a new offer on your listing, a counter-offer it's your turn
+ * to answer, and a request to confirm a completed trade.
+ *
+ * All of it is derived from events already addressed to the user, so it needs no
+ * extra infrastructure — the same events power the bell and the OS notifications.
+ */
+export type TradeNotificationType = 'offer' | 'counter' | 'trade-request';
+
+export interface TradeNotification {
+  id: string;
+  type: TradeNotificationType;
+  createdAt: number;
+  /** The other party (buyer for an offer, the requester for a request). */
+  counterparty: string;
+  amount?: number;
+  currency?: string;
+  listingPubkey: string;
+  listingIdentifier: string;
+  /** Present for offer/counter items, so the UI can act inline. */
+  offer?: MarketplaceOffer;
+}
+
+export function useTradeNotifications(pubkey: string | undefined) {
+  const { data: incoming = [], isLoading: offersLoading } = useIncomingOffers(pubkey);
+  const { data: requests = [], isLoading: requestsLoading } = useIncomingTradeRequests(pubkey);
+
+  const notifications = useMemo<TradeNotification[]>(() => {
+    const out: TradeNotification[] = [];
+
+    // Offers / counter-offers where it is the user's turn to answer.
+    for (const thread of incoming) {
+      const latest = thread.latest;
+      out.push({
+        id: latest.id,
+        type: latest.replyTo ? 'counter' : 'offer',
+        createdAt: latest.createdAt,
+        counterparty: latest.author,
+        amount: latest.amount,
+        currency: latest.currency,
+        listingPubkey: latest.listingPubkey,
+        listingIdentifier: latest.listingIdentifier,
+        offer: latest,
+      });
+    }
+
+    // "Please confirm our trade" requests (buyer → seller).
+    for (const r of requests) {
+      out.push({
+        id: r.event.id,
+        type: 'trade-request',
+        createdAt: r.event.created_at,
+        counterparty: r.requestor,
+        listingPubkey: r.listing.pubkey,
+        listingIdentifier: r.listing.identifier,
+      });
+    }
+
+    return out.sort((a, b) => b.createdAt - a.createdAt);
+  }, [incoming, requests]);
+
+  return { notifications, isLoading: offersLoading || requestsLoading };
+}
+
+export function tradeNotificationText(n: TradeNotification): string {
+  switch (n.type) {
+    case 'offer':
+      return n.amount ? `offered ${n.amount.toLocaleString()} ${n.currency ?? 'SATS'}` : 'made an offer';
+    case 'counter':
+      return n.amount ? `countered with ${n.amount.toLocaleString()} ${n.currency ?? 'SATS'}` : 'sent a counter-offer';
+    case 'trade-request':
+      return 'asked you to confirm a trade';
+    default:
+      return 'needs your attention';
+  }
+}

src/lib/notificationPrefs.ts

@@ -9,7 +9,7 @@
  * nothing is requested from the OS until the user turns them on in Settings.
  */
 
-export type NotificationCategory = 'dms' | 'crew' | 'social' | 'newsletter' | 'reminders';
+export type NotificationCategory = 'dms' | 'crew' | 'social' | 'newsletter' | 'reminders' | 'trades';
 
 export interface NotificationPrefs {
   /** Master switch. Off until the user explicitly enables notifications. */
@@ -22,6 +22,8 @@ export interface NotificationPrefs {
   social: boolean;
   /** New SkateSpots newsletter drops (subscribers only). */
   newsletter: boolean;
+  /** Marketplace offers, counter-offers and trade confirmations. */
+  trades: boolean;
   /** Scheduled event reminders (Android app — fires even when the app is closed). */
   reminders: boolean;
 }
@@ -34,6 +36,7 @@ export const DEFAULT_NOTIFICATION_PREFS: NotificationPrefs = {
   crew: true,
   social: true,
   newsletter: true,
+  trades: true,
   reminders: true,
 };
 
@@ -47,5 +50,6 @@ export const NOTIFICATION_CATEGORIES: Array<{
   { key: 'crew', label: 'Crews', hint: 'Invites, join requests and membership confirmations' },
   { key: 'social', label: 'Zaps, replies & mentions', hint: 'Reactions, reposts, zaps, replies and event updates' },
   { key: 'newsletter', label: 'Newsletter', hint: 'New SkateSpots drops (subscribers only)' },
+  { key: 'trades', label: 'Offers & trades', hint: 'Offers, counter-offers and trade confirmations' },
   { key: 'reminders', label: 'Event reminders', hint: "A nudge an hour before events you're going to (Android app)" },
 ];