aimeat 1.2.0

package/dist/public/views/profile/services-tab.js

@@ -0,0 +1,281 @@
+/**
+ * @file services-tab.js
+ * @description Profile tab for publishing/managing services and browsing the catalogue.
+ * @version-history
+ *   v1.0.0 — 2026-03-17 — Refactor: replace inline styles with CSS classes; i18n for unit options and detail labels
+ */
+import { h } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { escHtml } from '/js/utils.js';
+import { Spinner } from './shared.js';
+import { useConfirm } from '/components/Modal.js';
+import { listMyServices, browse, publish, unpublish } from '/js/services/catalogue.js';
+import { apiGet } from '/js/api.js';
+
+const SERVICE_CATEGORIES = ['language','translation','analysis','generation','coding','data','image','audio','video','search','utility','other'];
+
+/** Fetch full detail for a single catalogue entry */
+async function fetchServiceDetail(id) {
+  const data = await apiGet('/v1/catalogue/' + encodeURIComponent(id));
+  return data?.data || data || {};
+}
+
+/** Format a date string for display */
+function fmtDate(s) {
+  if (!s) return null;
+  try { return new Date(s).toLocaleString(); } catch { return s; }
+}
+
+/** Render a JSON schema as a compact preview */
+function SchemaPreview({ schema, label }) {
+  if (!schema || typeof schema !== 'object' || Object.keys(schema).length === 0) return null;
+  let preview;
+  try { preview = JSON.stringify(schema, null, 2); } catch { preview = String(schema); }
+  return html`
+    <div class="svc-detail-row">
+      <span class="svc-detail-label">${label}</span>
+      <pre class="svc-detail-code">${preview}</pre>
+    </div>`;
+}
+
+/** Expandable service card used in both My Services and Catalogue */
+function ServiceCard({ svc, expanded, onToggle, actions }) {
+  const displayName = svc.display_name || svc.displayName || svc.name || '';
+  const category = svc.category || '';
+  const priceMorsels = svc.price_morsels ?? svc.pricing?.base_morsels ?? svc.pricing?.baseMorsels ?? 0;
+  const priceUnit = svc.unit || svc.pricing?.per_unit?.unit || '';
+
+  return html`
+    <div class="card card-clickable ${expanded ? 'svc-card-expanded' : ''}" onClick=${onToggle}>
+      <div class="card-header">
+        <div class="flex-row">
+          <span class="svc-expand-icon">${expanded ? '\u25BC' : '\u25B6'}</span>
+          <div class="card-title">${escHtml(displayName)}</div>
+        </div>
+        <div>
+          ${category && html`<span class="badge badge-info">${escHtml(category)}</span>`}
+          <span class="badge badge-success pf-badge-gap">${priceMorsels ? priceMorsels + ' \u2764\uFE0F' : t('profile.services.free')}</span>
+        </div>
+      </div>
+      <div class="card-subtitle">${escHtml(svc.description || '')}${svc.owner ? html` \u2502 ${escHtml(svc.owner)}` : ''}</div>
+      ${expanded && html`<${ServiceDetail} svc=${svc} />`}
+      ${expanded && actions && html`<div class="svc-detail-actions" onClick=${e => e.stopPropagation()}>${actions}</div>`}
+    </div>`;
+}
+
+/** Detail panel shown when a service card is expanded */
+function ServiceDetail({ svc }) {
+  const [detail, setDetail] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error_, setError] = useState(null);
+
+  const svcId = svc.id || svc.action_id;
+
+  useEffect(() => {
+    if (!svcId) return;
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    fetchServiceDetail(svcId).then(d => {
+      if (!cancelled) { setDetail(d); setLoading(false); }
+    }).catch(err => {
+      if (!cancelled) { setError(err.message || 'Failed to load details'); setLoading(false); }
+    });
+    return () => { cancelled = true; };
+  }, [svcId]);
+
+  if (loading) return html`<div class="svc-detail" onClick=${e => e.stopPropagation()}><${Spinner} text="Loading details..." /></div>`;
+  if (error_) return html`<div class="svc-detail" onClick=${e => e.stopPropagation()}><div class="svc-detail-error">${error_}</div></div>`;
+
+  // Merge local svc data with fetched detail (detail may have more fields)
+  const d = detail ? { ...svc, ...detail } : svc;
+
+  const description = d.description || '';
+  const webhookUrl = d.webhook_url || d.webhookUrl || '';
+  const priceMorsels = d.price_morsels ?? d.pricing?.base_morsels ?? d.pricing?.baseMorsels ?? 0;
+  const priceUnit = d.unit || d.pricing?.per_unit?.unit || '';
+  const tags = d.tags || [];
+  const inputSchema = d.input_schema || d.inputSchema || null;
+  const outputSchema = d.output_schema || d.outputSchema || null;
+  const createdAt = d.created_at || d.createdAt || '';
+  const estimatedTime = d.estimated_time_seconds || d.estimatedTimeSeconds || null;
+  const providerGaii = d.provider_gaii || d.providerGaii || '';
+
+  return html`
+    <div class="svc-detail" onClick=${e => e.stopPropagation()}>
+      ${description && html`
+        <div class="svc-detail-row">
+          <span class="svc-detail-label">${t('profile.services.descLabel')}</span>
+          <span class="svc-detail-value">${escHtml(description)}</span>
+        </div>`}
+      ${providerGaii && html`
+        <div class="svc-detail-row">
+          <span class="svc-detail-label">${t('profile.services.provider')}</span>
+          <span class="svc-detail-value mono">${escHtml(providerGaii)}</span>
+        </div>`}
+      <div class="svc-detail-row">
+        <span class="svc-detail-label">${t('profile.services.priceLabel')}</span>
+        <span class="svc-detail-value">${priceMorsels} morsels${priceUnit ? ' / ' + priceUnit : ''}</span>
+      </div>
+      ${webhookUrl && html`
+        <div class="svc-detail-row">
+          <span class="svc-detail-label">${t('profile.services.webhookLabel')}</span>
+          <span class="svc-detail-value mono">${escHtml(webhookUrl)}</span>
+        </div>`}
+      ${estimatedTime && html`
+        <div class="svc-detail-row">
+          <span class="svc-detail-label">${t('profile.services.estTime')}</span>
+          <span class="svc-detail-value">${estimatedTime}s</span>
+        </div>`}
+      ${tags.length > 0 && html`
+        <div class="svc-detail-row">
+          <span class="svc-detail-label">Tags</span>
+          <div class="svc-detail-tags">
+            ${tags.map(tag => html`<span class="badge badge-outline">${escHtml(tag)}</span>`)}
+          </div>
+        </div>`}
+      <${SchemaPreview} schema=${inputSchema} label="Input schema" />
+      <${SchemaPreview} schema=${outputSchema} label="Output schema" />
+      ${createdAt && html`
+        <div class="svc-detail-row">
+          <span class="svc-detail-label">Created</span>
+          <span class="svc-detail-value">${fmtDate(createdAt)}</span>
+        </div>`}
+    </div>`;
+}
+
+export default function ServicesTab({ session, showToast, onStats }) {
+  const { confirm, ConfirmUI } = useConfirm();
+  const [myServices, setMyServices] = useState(null);
+  const [catalogue, setCatalogue] = useState(null);
+  const [svcSubTab, setSvcSubTab] = useState('mine');
+  const [catFilter, setCatFilter] = useState('');
+  const [showPubForm, setShowPubForm] = useState(false);
+  const [expandedMine, setExpandedMine] = useState({});
+  const [expandedCat, setExpandedCat] = useState({});
+
+  useEffect(() => {
+    if (session) loadMyData();
+  }, [session]);
+
+  async function loadMyData() {
+    try {
+      const list = await listMyServices(session.owner);
+      setMyServices(list);
+      onStats?.({ services: list.length });
+    } catch { setMyServices([]); }
+  }
+
+  async function loadCatalogueData(cat) {
+    try {
+      const list = await browse(cat || undefined);
+      setCatalogue(list);
+    } catch { setCatalogue([]); }
+  }
+
+  async function publishService(name, desc, category, price, unit, webhook) {
+    const resp = await publish(name, desc, category, price, unit, webhook);
+    if (resp.ok !== false) { showToast(t('profile.services.published')); setShowPubForm(false); loadMyData(); }
+    else showToast(t('profile.error'), true);
+  }
+
+  async function unpublishService(id) {
+    confirm(t('profile.services.unpublishConfirm'), async () => {
+      const resp = await unpublish(id);
+      if (resp.ok === false) { showToast(resp.error?.message || t('profile.error'), true); return; }
+      showToast(t('profile.services.unpublished'));
+      loadMyData();
+    }, { danger: true });
+  }
+
+  function toggleMineExpand(id) {
+    setExpandedMine(prev => ({ ...prev, [id]: !prev[id] }));
+  }
+
+  function toggleCatExpand(id) {
+    setExpandedCat(prev => ({ ...prev, [id]: !prev[id] }));
+  }
+
+  const renderMyServices = () => {
+    if (!myServices) return html`<${Spinner} text=${t('profile.services.loading')} />`;
+    return html`
+      <button class="btn-primary mb-1" onClick=${() => setShowPubForm(!showPubForm)}>${t('profile.services.publishBtn')}</button>
+      ${showPubForm && html`<${PublishForm} onPublish=${publishService} onCancel=${() => setShowPubForm(false)} />`}
+      ${myServices.length === 0
+        ? html`<div class="empty">${t('profile.services.empty')}</div>`
+        : myServices.map(s => {
+            const svcId = s.id || s.action_id;
+            return html`<${ServiceCard}
+              svc=${s}
+              expanded=${!!expandedMine[svcId]}
+              onToggle=${() => toggleMineExpand(svcId)}
+              actions=${html`<button class="btn-danger" onClick=${() => unpublishService(svcId)}>${t('profile.delete')}</button>`}
+            />`;
+          })
+      }`;
+  };
+
+  const renderCatalogue = () => html`
+    <div class="action-bar">
+      <select class="input-field pf-select-narrow" value=${catFilter} onChange=${e => { setCatFilter(e.target.value); loadCatalogueData(e.target.value); }}>
+        <option value="">${t('profile.services.allCategories')}</option>
+        ${SERVICE_CATEGORIES.map(c => html`<option value=${c}>${c}</option>`)}
+      </select>
+    </div>
+    ${!catalogue ? html`<${Spinner} text=${t('profile.services.loading')} />`
+      : catalogue.length === 0 ? html`<div class="empty">${t('profile.services.catalogueEmpty')}</div>`
+      : catalogue.map(s => {
+          const svcId = s.id || s.action_id;
+          return html`<${ServiceCard}
+            svc=${s}
+            expanded=${!!expandedCat[svcId]}
+            onToggle=${() => toggleCatExpand(svcId)}
+          />`;
+        })
+    }`;
+
+  return html`
+    <div class="section-title">${t('profile.services.title')}</div>
+    <div class="section-desc">${t('profile.services.desc')}</div>
+    <div class="sub-tabs">
+      <button class="sub-tab ${svcSubTab === 'mine' ? 'active' : ''}" onClick=${() => setSvcSubTab('mine')}>${t('profile.services.mine')}</button>
+      <button class="sub-tab ${svcSubTab === 'catalogue' ? 'active' : ''}" onClick=${() => { setSvcSubTab('catalogue'); if (!catalogue) loadCatalogueData(catFilter); }}>${t('profile.services.catalogue')}</button>
+    </div>
+    ${svcSubTab === 'mine' ? renderMyServices() : renderCatalogue()}
+    <${ConfirmUI} />
+  `;
+}
+
+function PublishForm({ onPublish, onCancel }) {
+  const [name, setName] = useState('');
+  const [desc, setDesc] = useState('');
+  const [cat, setCat] = useState('language');
+  const [price, setPrice] = useState('0');
+  const [unit, setUnit] = useState('call');
+  const [webhook, setWebhook] = useState('');
+  return html`
+    <div class="create-form">
+      <div class="form-row"><label>${t('profile.services.nameLabel')}</label><input class="input-field" placeholder=${t('profile.services.namePlaceholder')} value=${name} onInput=${e => setName(e.target.value)} /></div>
+      <div class="form-row"><label>${t('profile.services.descLabel')}</label><textarea class="input-field" rows="3" placeholder=${t('profile.services.descPlaceholder')} value=${desc} onInput=${e => setDesc(e.target.value)}></textarea></div>
+      <div class="form-row"><label>${t('profile.services.categoryLabel')}</label>
+        <select class="input-field" value=${cat} onChange=${e => setCat(e.target.value)}>
+          ${SERVICE_CATEGORIES.map(c => html`<option value=${c}>${c}</option>`)}
+        </select>
+      </div>
+      <div class="form-row"><label>${t('profile.services.priceLabel')}</label><input type="number" class="input-field" value=${price} min="0" onInput=${e => setPrice(e.target.value)} /></div>
+      <div class="form-row"><label>${t('profile.services.unitLabel')}</label>
+        <select class="input-field" value=${unit} onChange=${e => setUnit(e.target.value)}>
+          <option value="call">${t('profile.services.unitPerCall')}</option><option value="minute">${t('profile.services.unitPerMinute')}</option>
+          <option value="token">${t('profile.services.unitPerToken')}</option><option value="task">${t('profile.services.unitPerTask')}</option>
+        </select>
+      </div>
+      <div class="form-row"><label>${t('profile.services.webhookLabel')}</label><input class="input-field" placeholder=${t('profile.services.webhookPlaceholder')} value=${webhook} onInput=${e => setWebhook(e.target.value)} /></div>
+      <div class="form-actions">
+        <button class="btn-primary" onClick=${() => onPublish(name, desc, cat, price, unit, webhook)}>${t('profile.services.publishSaveBtn')}</button>
+        <button class="btn-outline" onClick=${onCancel}>${t('profile.cancel')}</button>
+      </div>
+    </div>`;
+}

package/dist/public/views/profile/shared.js

@@ -0,0 +1,58 @@
+/**
+ * @file shared.js
+ * @description Shared components and utilities for profile tab modules.
+ *   Exports: Spinner, recipientBadge, isExpiringSoon, VisibilityPill, ToggleSwitch, GlassCard.
+ * @version-history
+ *   v1.0.0 — 2026-03-07 — Initial shared helpers (Spinner, recipientBadge, isExpiringSoon)
+ *   v1.1.0 — 2026-03-17 — Add VisibilityPill, ToggleSwitch, GlassCard components; refactor recipientBadge to CSS classes
+ */
+import { h } from 'preact';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+
+/** Loading spinner. */
+export function Spinner({ text }) {
+  return html`<span class="spinner"></span><span class="loading-text">${text || t('profile.loading')}</span>`;
+}
+
+/** Render a colored recipient-type badge. */
+export function recipientBadge(recipient) {
+  const r = recipient || '';
+  let label, cls;
+  if (r === '*')                        { label = t('permissions.badgeWildcard'); cls = 'badge-wildcard'; }
+  else if (r.startsWith('ghii:'))       { label = t('permissions.badgeGhii');     cls = 'badge-ghii'; }
+  else if (r.startsWith('organism.'))   { label = t('permissions.badgeOrganism'); cls = 'badge-organism'; }
+  else if (r.startsWith('domain:'))     { label = t('permissions.badgeDomain');   cls = 'badge-domain'; }
+  else if (r.startsWith('node:'))       { label = t('permissions.badgeNode');     cls = 'badge-node'; }
+  else                                  { label = t('permissions.badgeGaii');     cls = 'badge-gaii'; }
+  return html`<span class="badge-label ${cls}">${label}</span>`;
+}
+
+/** Check if a consent is expiring within 7 days. */
+export function isExpiringSoon(expiresAt) {
+  if (!expiresAt) return false;
+  const diff = new Date(expiresAt) - Date.now();
+  return diff > 0 && diff < 7 * 86400000;
+}
+
+/** Shared visibility toggle pill (memory-tab, knowledge-tab). */
+export function VisibilityPill({ visibility, onClick }) {
+  return html`<button class="vis-pill vis-${visibility}" onClick=${onClick}>
+    ${t('profile.visibility.' + visibility)}
+  </button>`;
+}
+
+/** Shared toggle switch (notifications-tab, email-tab). */
+export function ToggleSwitch({ checked, onChange, label }) {
+  return html`<label class="pf-toggle">
+    <input type="checkbox" checked=${checked} onChange=${onChange} class="pf-toggle-input" />
+    <span class="pf-toggle-slider"></span>
+    ${label && html`<span class="pf-toggle-label">${label}</span>`}
+  </label>`;
+}
+
+/** Glass-style card container (email-tab, notifications-tab). */
+export function GlassCard({ children }) {
+  return html`<div class="pf-glass-card">${children}</div>`;
+}

package/dist/public/views/profile/wallet-tab.js

@@ -0,0 +1,272 @@
+/**
+ * @file wallet-tab.js
+ * @description Profile tab for morsel wallet: balance overview, lifetime stats,
+ *   morsel request form, and transaction history with expandable details.
+ * @version-history
+ *   v1.0.0 — 2026-03-16 — Initial wallet tab
+ *   v1.1.0 — 2026-03-17 — Replace inline styles with CSS classes
+ */
+import { h } from 'preact';
+import { useState, useEffect, useCallback, useRef } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { escHtml, timeAgo } from '/js/utils.js';
+import { Spinner } from './shared.js';
+import { getWallet, getTransactions, requestMorsels } from '/js/services/wallet.js';
+
+/**
+ * Copy text to clipboard, return true on success.
+ */
+async function copyToClipboard(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch { return false; }
+}
+
+/**
+ * Map backend transaction type to a display label.
+ */
+function txTypeLabel(tx) {
+  const type = tx.type || '';
+  if (type === 'allowance' || type === 'daily_allowance') return t('profile.wallet.allowance');
+  if (type === 'welcome_bonus') return t('profile.wallet.welcomeBonus');
+  if (type === 'earned') return t('profile.wallet.earned');
+  if (type === 'spent') return t('profile.wallet.spent');
+  // Fallback based on amount sign
+  return tx.amount > 0 ? t('profile.wallet.earned') : t('profile.wallet.shared');
+}
+
+export default function WalletTab({ session, showToast, onStats }) {
+  const [walletData, setWalletData] = useState(null);
+  const [walletTx, setWalletTx] = useState(null);
+  const [expandedTx, setExpandedTx] = useState(null);
+  const [copiedId, setCopiedId] = useState(null);
+  const [balanceCopied, setBalanceCopied] = useState(false);
+
+  // Request form state
+  const [reqAmount, setReqAmount] = useState('');
+  const [reqReason, setReqReason] = useState('');
+  const [reqLoading, setReqLoading] = useState(false);
+
+  useEffect(() => {
+    if (session) loadData();
+  }, [session]);
+
+  // Live update listener
+  const liveRef = useRef(loadData);
+  liveRef.current = loadData;
+  useEffect(() => {
+    const handler = () => liveRef.current();
+    window.addEventListener('aimeat-live-update', handler);
+    return () => window.removeEventListener('aimeat-live-update', handler);
+  }, []);
+
+  async function loadData() {
+    try {
+      const resp = await getWallet();
+      const w = resp?.data || resp || {};
+      setWalletData(w);
+      onStats?.({ balance: w.balance ?? '-' });
+      try {
+        const tx = await getTransactions(20);
+        setWalletTx(tx);
+      } catch { setWalletTx([]); }
+    } catch { setWalletData(null); }
+  }
+
+  const toggleTx = useCallback((id) => {
+    setExpandedTx(prev => prev === id ? null : id);
+  }, []);
+
+  async function handleCopyBalance() {
+    const w = walletData;
+    const text = `Balance: ${w.balance ?? 0} | Available: ${(w.balance ?? 0) - (w.in_escrow ?? w.escrow ?? 0)} | Escrow: ${w.in_escrow ?? w.escrow ?? 0}`;
+    const ok = await copyToClipboard(text);
+    if (ok) {
+      setBalanceCopied(true);
+      setTimeout(() => setBalanceCopied(false), 2000);
+    }
+  }
+
+  async function handleCopyTx(tx, e) {
+    e.stopPropagation();
+    const lines = [
+      `ID: ${tx.id || '-'}`,
+      `Type: ${tx.type || '-'}`,
+      `Amount: ${tx.amount}`,
+      tx.counterparty_gaii ? `Counterparty: ${tx.counterparty_gaii}` : null,
+      tx.tracking_code ? `Tracking: ${tx.tracking_code}` : null,
+      tx.timestamp ? `Time: ${tx.timestamp}` : null,
+    ].filter(Boolean).join('\n');
+    const ok = await copyToClipboard(lines);
+    if (ok) {
+      setCopiedId(tx.id);
+      setTimeout(() => setCopiedId(null), 2000);
+    }
+  }
+
+  async function handleRequestMorsels(e) {
+    e.preventDefault();
+    const amount = parseInt(reqAmount, 10);
+    if (!amount || amount <= 0) return;
+    setReqLoading(true);
+    try {
+      const resp = await requestMorsels(amount, reqReason || undefined);
+      const granted = resp?.granted ?? amount;
+      const newBalance = resp?.new_balance ?? '?';
+      const msg = t('profile.wallet.requestSuccess')
+        .replace('{amount}', granted)
+        .replace('{balance}', newBalance);
+      showToast?.(msg, 'success');
+      setReqAmount('');
+      setReqReason('');
+      // Reload wallet data to reflect new balance
+      await loadData();
+    } catch (err) {
+      showToast?.(t('profile.wallet.requestError') + ': ' + (err.message || t('profile.unknownError')), 'error');
+    } finally {
+      setReqLoading(false);
+    }
+  }
+
+  if (!walletData) return html`<${Spinner} text=${t('profile.wallet.loading')} />`;
+  const w = walletData;
+  const escrow = w.in_escrow ?? w.escrow ?? 0;
+  const lifetime = w.lifetime || {};
+
+  return html`
+    <div class="section-title">${t('profile.wallet.title')}</div>
+    <div class="section-desc">${t('profile.wallet.desc')}</div>
+
+    <!-- Balance overview cards -->
+    <div class="wallet-overview">
+      <div class="wallet-card">
+        <div class="amount neutral">${w.balance ?? 0}</div>
+        <div class="wlabel">${t('profile.wallet.balance')}</div>
+      </div>
+      <div class="wallet-card">
+        <div class="amount neutral">${escrow}</div>
+        <div class="wlabel">${t('profile.wallet.inEscrow')}</div>
+      </div>
+      <div class="wallet-card">
+        <div class="amount positive">${(w.balance ?? 0) - escrow}</div>
+        <div class="wlabel">${t('profile.wallet.available')}</div>
+      </div>
+      <div class="wallet-card">
+        <div class="amount neutral">${w.daily_allowance?.amount ?? w.daily_allowance ?? 50}</div>
+        <div class="wlabel">${t('profile.wallet.dailyAllowance')}</div>
+      </div>
+    </div>
+
+    <!-- Copy balance button -->
+    <div class="mb-1">
+      <button class="btn-outline btn-sm" onClick=${handleCopyBalance}>
+        ${balanceCopied ? t('profile.wallet.copied') : t('profile.wallet.copyBalance')}
+      </button>
+    </div>
+
+    <!-- Lifetime stats -->
+    ${(lifetime.earned != null || lifetime.spent != null) && html`
+      <div class="section-title">${t('profile.wallet.lifetime')}</div>
+      <div class="wallet-lifetime">
+        <div class="wl-stat"><div class="wl-val wl-val-success">${lifetime.earned ?? 0}</div><div class="wl-label">${t('profile.wallet.lifetimeEarned')}</div></div>
+        <div class="wl-stat"><div class="wl-val wl-val-danger">${lifetime.spent ?? 0}</div><div class="wl-label">${t('profile.wallet.lifetimeSpent')}</div></div>
+        <div class="wl-stat"><div class="wl-val">${lifetime.received_allowance ?? 0}</div><div class="wl-label">${t('profile.wallet.lifetimeAllowance')}</div></div>
+        <div class="wl-stat"><div class="wl-val">${lifetime.welcome_bonus ?? 0}</div><div class="wl-label">${t('profile.wallet.lifetimeWelcome')}</div></div>
+      </div>
+    `}
+
+    <!-- Request morsels form -->
+    <div class="wallet-request">
+      <div class="wr-title">${t('profile.wallet.requestTitle')}</div>
+      <div class="wr-desc">${t('profile.wallet.requestDesc')}</div>
+      <form onSubmit=${handleRequestMorsels}>
+        <div class="wr-row">
+          <div class="wr-field">
+            <label>${t('profile.wallet.requestAmount')}</label>
+            <input type="number" min="1" max="500" step="1"
+              value=${reqAmount}
+              onInput=${e => setReqAmount(e.target.value)}
+              placeholder=${t('profile.wallet.requestAmountHint')}
+              class="wallet-input-w"
+              required />
+          </div>
+          <div class="wr-field wallet-reason-field">
+            <label>${t('profile.wallet.requestReason')}</label>
+            <input type="text"
+              value=${reqReason}
+              onInput=${e => setReqReason(e.target.value)}
+              placeholder=${t('profile.wallet.requestReasonPlaceholder')} />
+          </div>
+          <button type="submit" class="btn-primary btn-sm" disabled=${reqLoading}>
+            ${reqLoading ? t('profile.wallet.requesting') : t('profile.wallet.requestBtn')}
+          </button>
+        </div>
+      </form>
+    </div>
+
+    <!-- Transaction history -->
+    <div class="section-title section-title-spaced">${t('profile.wallet.recentTx')}</div>
+    ${(!walletTx || walletTx.length === 0)
+      ? html`<div class="empty">${t('profile.wallet.empty')}</div>`
+      : html`<div class="card"><div class="tx-list">
+          ${walletTx.map(tx => {
+            const isCredit = tx.amount > 0;
+            const typeLabel = txTypeLabel(tx);
+            const isExpanded = expandedTx === tx.id;
+            const isCopied = copiedId === tx.id;
+            return html`
+              <div class="tx-item-wrap">
+                <div class="tx-item" onClick=${() => toggleTx(tx.id)}>
+                  <div>
+                    <span class="tx-type">${typeLabel}</span>
+                    ${' '}
+                    <span class="work-desc-text">${escHtml(tx.description || tx.memo || '')}</span>
+                  </div>
+                  <div class="work-tx-right">
+                    <div>
+                      <div class="tx-amount ${isCredit ? 'credit' : 'debit'}">${isCredit ? '+' : ''}${tx.amount}</div>
+                      <div class="tx-date">${tx.timestamp ? timeAgo(tx.timestamp) : (tx.created_at ? timeAgo(tx.created_at) : '')}</div>
+                    </div>
+                    <span class="expand-arrow">${isExpanded ? '\u25B2' : '\u25BC'}</span>
+                  </div>
+                </div>
+                ${isExpanded && html`
+                  <div class="tx-detail">
+                    ${tx.id && html`
+                      <span class="tx-detail-label">ID</span>
+                      <span class="tx-detail-value">${escHtml(tx.id)}</span>
+                    `}
+                    ${tx.type && html`
+                      <span class="tx-detail-label">Type</span>
+                      <span class="tx-detail-value">${escHtml(tx.type)}</span>
+                    `}
+                    ${tx.counterparty_gaii && html`
+                      <span class="tx-detail-label">${t('profile.wallet.counterparty')}</span>
+                      <span class="tx-detail-value">${escHtml(tx.counterparty_gaii)}</span>
+                    `}
+                    ${tx.tracking_code && html`
+                      <span class="tx-detail-label">${t('profile.wallet.trackingCode')}</span>
+                      <span class="tx-detail-value">${escHtml(tx.tracking_code)}</span>
+                    `}
+                    ${tx.timestamp && html`
+                      <span class="tx-detail-label">${t('profile.wallet.timestamp')}</span>
+                      <span class="tx-detail-value">${new Date(tx.timestamp).toLocaleString()}</span>
+                    `}
+                    ${!tx.counterparty_gaii && !tx.tracking_code && !tx.timestamp && html`
+                      <span class="tx-detail-value work-grid-span">${t('profile.wallet.noDetails')}</span>
+                    `}
+                    <div class="work-grid-span">
+                      <button class="btn-outline btn-sm" onClick=${(e) => handleCopyTx(tx, e)}>
+                        ${isCopied ? t('profile.wallet.copied') : t('profile.wallet.copyTx')}
+                      </button>
+                    </div>
+                  </div>
+                `}
+              </div>`;
+          })}
+        </div></div>`
+    }`;
+}