feat(C-2): shop management UI and Foundry purchase flow

Add transaction history to shop inventory widget, create standalone
transaction log widget for entity pages, and enhance Foundry shop
window with purchase flow via Chronicle API.

- Add transaction history toggle and display to shop_inventory.js
- Create transaction_log.js widget for entity page layout blocks
- Register transaction_log block type in block registry (armory addon)
- Add blockTransactionLog templ component as widget mount point
- Enhance Foundry shop-widget.mjs with purchase execution
- Add buy button click handlers and stock validation
- Include relation ID and currency in drag-and-drop data

https://claude.ai/code/session_01WJEjfBqjZaGatHiXXXDupo

Author: claude

foundry-module/scripts/shop-widget.mjs

@@ -59,12 +59,19 @@ export class ShopWidget {
    * @param {object} msg
    */
   onMessage(msg) {
-    if (msg.type !== 'entity.updated') return;
+    // Refresh on entity updates.
+    if (msg.type === 'entity.updated') {
+      const entityId = msg.payload?.id;
+      if (entityId && this._openWindows.has(entityId)) {
+        this._openWindows.get(entityId).refresh();
+      }
+    }
 
-    // Refresh any open shop windows for the updated entity.
-    const entityId = msg.payload?.id;
-    if (entityId && this._openWindows.has(entityId)) {
-      this._openWindows.get(entityId).refresh();
+    // Refresh on relation changes (stock depleted after purchase).
+    if (msg.type === 'relation.metadata_updated' || msg.type === 'relation.deleted') {
+      for (const window of this._openWindows.values()) {
+        window.refresh();
+      }
     }
   }
 
@@ -153,12 +160,14 @@ class ShopWindow extends HandlebarsApplicationMixin(ApplicationV2) {
         .filter((r) => r.metadata && (r.metadata.price !== undefined || r.metadata.quantity !== undefined))
         .map((r) => ({
           id: r.targetEntityId,
+          relationId: r.id,
           name: r.targetEntityName || 'Unknown Item',
           image_path: null, // Chronicle entities use FA icons, not image URLs.
           icon: r.targetEntityIcon || 'fa-box',
           color: r.targetEntityColor || '#6b7280',
           type: r.targetEntityType || '',
           price: r.metadata.price,
+          currency: r.metadata.currency || 'gp',
           quantity: r.metadata.quantity,
           in_stock: r.metadata.in_stock !== false,
           description: r.metadata.description || '',
@@ -204,6 +213,7 @@ class ShopWindow extends HandlebarsApplicationMixin(ApplicationV2) {
       itemEl.setAttribute('draggable', 'true');
       itemEl.addEventListener('dragstart', (event) => {
         const itemId = itemEl.dataset.itemId;
+        const relationId = itemEl.dataset.relationId;
         const itemData = this._inventory.find((item) => item.id === itemId) || {};
         event.dataTransfer.setData(
           'text/plain',
@@ -216,12 +226,78 @@ class ShopWindow extends HandlebarsApplicationMixin(ApplicationV2) {
               [FLAG_SCOPE]: {
                 shopEntityId: this._entityId,
                 chronicleItemId: itemId,
+                shopRelationId: relationId ? parseInt(relationId) : undefined,
+                shopPrice: itemData.price,
+                shopCurrency: itemData.currency || 'gp',
               },
             },
           })
         );
       });
     });
+
+    // Buy button click handler.
+    el.querySelectorAll('.shop-buy-btn').forEach((btn) => {
+      btn.addEventListener('click', async () => {
+        const itemId = btn.dataset.itemId;
+        const relationId = btn.dataset.relationId;
+        const itemData = this._inventory.find((item) => item.id === itemId) || {};
+        await this._executePurchase(itemData, relationId);
+      });
+    });
+  }
+
+  /**
+   * Execute a purchase via the Chronicle API.
+   * Creates a transaction record and decrements shop stock.
+   * @param {object} itemData - Shop inventory item.
+   * @param {string} relationId - Shop inventory relation ID.
+   * @private
+   */
+  async _executePurchase(itemData, relationId) {
+    // Determine the buyer (currently controlled character or selected actor).
+    const buyer = game.user.character;
+    if (!buyer) {
+      ui.notifications.warn('No character assigned — select a character in User Configuration to purchase items.');
+      return;
+    }
+
+    const buyerEntityId = buyer.getFlag(FLAG_SCOPE, 'entityId');
+    if (!buyerEntityId) {
+      ui.notifications.warn('Your character is not synced with Chronicle. Sync it first to make purchases.');
+      return;
+    }
+
+    // Check stock.
+    if (itemData.quantity !== undefined && itemData.quantity !== null && itemData.quantity <= 0) {
+      ui.notifications.warn(`${itemData.name} is out of stock.`);
+      return;
+    }
+
+    try {
+      const result = await this._api.post('/armory/purchase', {
+        shop_entity_id: this._entityId,
+        item_entity_id: itemData.id,
+        buyer_entity_id: buyerEntityId,
+        relation_id: relationId ? parseInt(relationId) : 0,
+        quantity: 1,
+        price_paid: itemData.price ? `${itemData.price} ${itemData.currency || 'gp'}` : '',
+        currency: itemData.currency || 'gp',
+        price_numeric: typeof itemData.price === 'number' ? itemData.price : parseFloat(itemData.price) || 0,
+        transaction_type: 'purchase',
+      });
+
+      if (result) {
+        ui.notifications.info(`${buyer.name} purchased ${itemData.name}!`);
+
+        // Refresh shop window to show updated stock.
+        await this.refresh();
+      }
+    } catch (err) {
+      console.error('Chronicle: Purchase failed', err);
+      const msg = err?.message || 'Purchase failed';
+      ui.notifications.error(`Purchase failed: ${msg}`);
+    }
   }
 
   async close(options) {

internal/plugins/entities/block_registry_core.go

@@ -85,6 +85,13 @@ func RegisterCoreBlocks(r *BlockRegistry) {
 		return blockInventory(ctx.CC, ctx.Entity, ctx.CSRFToken)
 	})
 
+	r.Register(BlockMeta{
+		Type: "transaction_log", Label: "Transaction Log", Icon: "fa-receipt",
+		Description: "Purchase and sale history for shops", Addon: "armory",
+	}, func(ctx BlockRenderContext) templ.Component {
+		return blockTransactionLog(ctx.CC, ctx.Entity)
+	})
+
 	r.Register(BlockMeta{
 		Type: "text_block", Label: "Text Block", Icon: "fa-align-left",
 		Description: "Custom static HTML content",

internal/plugins/entities/show.templ

@@ -430,6 +430,17 @@ templ blockShopInventory(cc *campaigns.CampaignContext, entity *Entity, csrfToke
 	></div>
 }
 
+// blockTransactionLog renders a transaction history widget mount point.
+// Shows purchase, sale, gift, and restock transactions for a shop entity.
+templ blockTransactionLog(cc *campaigns.CampaignContext, entity *Entity) {
+	<div
+		data-widget="transaction_log"
+		data-transactions-endpoint={ fmt.Sprintf("/campaigns/%s/armory/shops/%s/transactions", cc.Campaign.ID, entity.ID) }
+		data-campaign-url={ fmt.Sprintf("/campaigns/%s", cc.Campaign.ID) }
+		data-entity-id={ entity.ID }
+	></div>
+}
+
 // blockDivider renders a visual separator between content sections.
 templ blockDivider() {
 	<hr class="border-edge my-2"/>

static/js/widgets/shop_inventory.js

@@ -24,11 +24,18 @@ Chronicle.register('shop_inventory', {
     var editable = el.dataset.editable === 'true';
     var csrfToken = el.dataset.csrfToken || '';
 
+    // Transaction endpoints derive from the campaign URL.
+    var txEndpoint = campaignUrl + '/armory/transactions';
+    var purchaseEndpoint = campaignUrl + '/armory/purchase';
+
     // Internal state.
     var state = {
       items: [],
       loading: true,
       addMode: false,
+      showTransactions: false,
+      transactions: [],
+      txLoading: false,
       searchQuery: '',
       searchResults: [],
       searchTimer: null,
@@ -91,6 +98,26 @@ Chronicle.register('shop_inventory', {
       '.shop-inv-action-btn.blue { background: #3b82f6; }',
       '.shop-inv-action-btn.blue:hover:not(:disabled) { background: #2563eb; }',
       '.shop-inv-label { font-size: 0.6875rem; color: #6b7280; font-weight: 500; }',
+      '.shop-inv-tx-toggle { font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 0.25rem; background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; cursor: pointer; margin-left: 0.375rem; }',
+      '.dark .shop-inv-tx-toggle { background: #374151; color: #9ca3af; border-color: #4b5563; }',
+      '.shop-inv-tx-toggle:hover { background: #e5e7eb; }',
+      '.dark .shop-inv-tx-toggle:hover { background: #4b5563; }',
+      '.shop-inv-tx-section { margin-top: 0.75rem; border-top: 1px solid #e5e7eb; padding-top: 0.75rem; }',
+      '.dark .shop-inv-tx-section { border-color: #374151; }',
+      '.shop-inv-tx-title { font-size: 0.75rem; font-weight: 600; color: #6b7280; margin-bottom: 0.5rem; }',
+      '.shop-inv-tx-list { display: flex; flex-direction: column; gap: 0.25rem; }',
+      '.shop-inv-tx-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.375rem; font-size: 0.75rem; border-radius: 0.25rem; }',
+      '.shop-inv-tx-row:nth-child(even) { background: #f9fafb; }',
+      '.dark .shop-inv-tx-row:nth-child(even) { background: #1f2937; }',
+      '.shop-inv-tx-type { font-weight: 500; text-transform: capitalize; min-width: 4rem; }',
+      '.shop-inv-tx-type.purchase { color: #059669; }',
+      '.shop-inv-tx-type.sale { color: #2563eb; }',
+      '.shop-inv-tx-type.gift { color: #8b5cf6; }',
+      '.shop-inv-tx-type.restock { color: #d97706; }',
+      '.shop-inv-tx-detail { flex: 1; color: #4b5563; }',
+      '.dark .shop-inv-tx-detail { color: #9ca3af; }',
+      '.shop-inv-tx-price { font-weight: 500; color: #d97706; white-space: nowrap; }',
+      '.shop-inv-tx-date { color: #9ca3af; font-size: 0.6875rem; white-space: nowrap; }',
     ].join('\n');
     el.appendChild(style);
 
@@ -152,9 +179,101 @@ Chronicle.register('shop_inventory', {
         wrapper.appendChild(list);
       }
 
+      // Transaction history section.
+      if (editable) {
+        var txToggle = document.createElement('button');
+        txToggle.className = 'shop-inv-tx-toggle';
+        txToggle.innerHTML = '<i class="fas fa-receipt"></i> ' + (state.showTransactions ? 'Hide Transactions' : 'Transactions');
+        txToggle.onclick = function () {
+          state.showTransactions = !state.showTransactions;
+          if (state.showTransactions && state.transactions.length === 0) {
+            loadTransactions();
+          }
+          render();
+        };
+        header.appendChild(txToggle);
+      }
+
+      if (state.showTransactions) {
+        wrapper.appendChild(renderTransactionSection());
+      }
+
       el.appendChild(wrapper);
     }
 
+    function renderTransactionSection() {
+      var section = document.createElement('div');
+      section.className = 'shop-inv-tx-section';
+
+      var title = document.createElement('div');
+      title.className = 'shop-inv-tx-title';
+      title.textContent = 'Recent Transactions';
+      section.appendChild(title);
+
+      if (state.txLoading) {
+        var loading = document.createElement('div');
+        loading.className = 'shop-inv-empty';
+        loading.textContent = 'Loading transactions...';
+        section.appendChild(loading);
+      } else if (state.transactions.length === 0) {
+        var empty = document.createElement('div');
+        empty.className = 'shop-inv-empty';
+        empty.textContent = 'No transactions recorded.';
+        section.appendChild(empty);
+      } else {
+        var list = document.createElement('div');
+        list.className = 'shop-inv-tx-list';
+        for (var i = 0; i < state.transactions.length; i++) {
+          list.appendChild(renderTransactionRow(state.transactions[i]));
+        }
+        section.appendChild(list);
+      }
+      return section;
+    }
+
+    function renderTransactionRow(tx) {
+      var row = document.createElement('div');
+      row.className = 'shop-inv-tx-row';
+
+      var typeSpan = document.createElement('span');
+      typeSpan.className = 'shop-inv-tx-type ' + (tx.transaction_type || '');
+      typeSpan.textContent = tx.transaction_type || 'unknown';
+      row.appendChild(typeSpan);
+
+      var detail = document.createElement('span');
+      detail.className = 'shop-inv-tx-detail';
+      var parts = [];
+      if (tx.item_name) parts.push(tx.item_name);
+      if (tx.quantity > 1) parts.push('x' + tx.quantity);
+      if (tx.buyer_name) parts.push('\u2192 ' + tx.buyer_name);
+      detail.textContent = parts.join(' ');
+      row.appendChild(detail);
+
+      if (tx.price_paid) {
+        var price = document.createElement('span');
+        price.className = 'shop-inv-tx-price';
+        price.textContent = tx.price_paid;
+        row.appendChild(price);
+      }
+
+      var date = document.createElement('span');
+      date.className = 'shop-inv-tx-date';
+      date.textContent = formatTxDate(tx.created_at);
+      row.appendChild(date);
+
+      return row;
+    }
+
+    function formatTxDate(isoStr) {
+      if (!isoStr) return '';
+      try {
+        var d = new Date(isoStr);
+        return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+      } catch (e) {
+        return '';
+      }
+    }
+
     function renderItem(item) {
       var meta = item.metadata || {};
       var isCustom = !item.targetEntityID;
@@ -577,6 +696,35 @@ Chronicle.register('shop_inventory', {
         });
     }
 
+    // Load transaction history for this shop entity.
+    function loadTransactions() {
+      // Extract entity ID from the relations endpoint.
+      // Format: /campaigns/:id/entities/:eid/relations
+      var parts = relationsEndpoint.split('/');
+      var eidIdx = parts.indexOf('entities');
+      var entityId = eidIdx >= 0 ? parts[eidIdx + 1] : '';
+      if (!entityId) return;
+
+      state.txLoading = true;
+      render();
+
+      Chronicle.apiFetch(txEndpoint + '?shop=' + encodeURIComponent(entityId) + '&per_page=20', { method: 'GET' })
+        .then(function (res) {
+          if (!res.ok) throw new Error('Failed to load transactions');
+          return res.json();
+        })
+        .then(function (data) {
+          state.transactions = data.data || [];
+          state.txLoading = false;
+          render();
+        })
+        .catch(function (err) {
+          console.error('Shop inventory: failed to load transactions', err);
+          state.txLoading = false;
+          render();
+        });
+    }
+
     // Initial load.
     loadInventory();
     loadEntityTypes();