aimeat 1.2.0

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

@@ -0,0 +1,220 @@
+/**
+ * @file work-tab.js
+ * @description Profile tab for managing incoming and outgoing work requests.
+ *   Displays inbox (received) and sent work items with accept/decline/deliver actions
+ *   and a rating modal for completed deliveries.
+ * @version-history
+ *   v1.0.0 — 2026-03-16 — Initial work tab
+ *   v1.1.0 — 2026-03-17 — Replace inline styles with CSS classes; i18n for action labels
+ */
+import { h } from 'preact';
+import { useState, useEffect, 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 { listInbox, listSent, submitRating, acceptWork, rejectWork, deliverWork, updateProgress } from '/js/services/work.js';
+
+export default function WorkTab({ session, showToast, onStats }) {
+  const [workInbox, setWorkInbox] = useState(null);
+  const [workSent, setWorkSent] = useState(null);
+  const [workSubTab, setWorkSubTab] = useState('inbox');
+  const [rateModal, setRateModal] = useState(null);
+  const [deliverModal, setDeliverModal] = useState(null);
+  const [actionLoading, setActionLoading] = useState(null);
+
+  useEffect(() => {
+    if (session) loadData();
+  }, [session]);
+
+  async function loadData() {
+    try {
+      const inbox = await listInbox();
+      setWorkInbox(inbox);
+      onStats?.({ work: inbox.length });
+    } catch { setWorkInbox([]); }
+    try {
+      const sent = await listSent();
+      setWorkSent(sent);
+    } catch { setWorkSent([]); }
+  }
+
+  async function handleRate(workId, rating, comment) {
+    if (!rating) { showToast(t('profile.work.selectRating'), true); return; }
+    const resp = await submitRating(workId, rating, comment);
+    if (resp.ok === false) { showToast(resp.error?.message || t('profile.error'), true); return; }
+    showToast(t('profile.work.ratingSubmitted'));
+    setRateModal(null);
+    loadData();
+  }
+
+  async function handleAccept(tc) {
+    setActionLoading(tc);
+    try {
+      const resp = await acceptWork(tc);
+      if (resp.ok === false) { showToast(resp.error?.message || t('profile.work.accepted'), true); return; }
+      showToast(t('profile.work.accepted'));
+      loadData();
+    } catch (e) {
+      showToast(e.message || t('profile.work.accepted'), true);
+    } finally {
+      setActionLoading(null);
+    }
+  }
+
+  async function handleReject(tc) {
+    setActionLoading(tc);
+    try {
+      const resp = await rejectWork(tc);
+      if (resp.ok === false) { showToast(resp.error?.message || t('profile.work.declined'), true); return; }
+      showToast(t('profile.work.declined'));
+      loadData();
+    } catch (e) {
+      showToast(e.message || t('profile.work.declined'), true);
+    } finally {
+      setActionLoading(null);
+    }
+  }
+
+  async function handleDeliver(tc, result) {
+    setActionLoading(tc);
+    try {
+      const resp = await deliverWork(tc, result);
+      if (resp.ok === false) { showToast(resp.error?.message || t('profile.work.delivered'), true); return; }
+      showToast(t('profile.work.delivered'));
+      setDeliverModal(null);
+      loadData();
+    } catch (e) {
+      showToast(e.message || t('profile.work.delivered'), true);
+    } finally {
+      setActionLoading(null);
+    }
+  }
+
+  function statusBadgeClass(status) {
+    switch (status) {
+      case 'completed': return 'badge-success';
+      case 'accepted':
+      case 'in_progress': return 'badge-info';
+      case 'delivered': return 'badge-warn';
+      case 'pending':
+      case 'offered': return 'badge-muted';
+      case 'rejected':
+      case 'cancelled': return 'badge-danger';
+      default: return 'badge-muted';
+    }
+  }
+
+  function renderList(items, type) {
+    if (!items) return html`<${Spinner} text=${t('profile.work.loading')} />`;
+    if (items.length === 0) return html`<div class="empty">${t(type === 'sent' ? 'profile.work.sentEmpty' : 'profile.work.empty')}</div>`;
+    return items.map(w => {
+      const tc = w.tc || w.id || w.work_id;
+      const isLoading = actionLoading === tc;
+      const status = w.status || '-';
+      const isPending = status === 'pending' || status === 'offered';
+      const isActive = status === 'accepted' || status === 'in_progress';
+
+      return html`
+        <div class="card">
+          <div class="card-header">
+            <div class="card-title">${escHtml(w.description || w.action_name || '-')}</div>
+            <span class="badge ${statusBadgeClass(status)}">${status}</span>
+          </div>
+          <div class="card-subtitle">
+            ${type === 'sent' ? t('profile.work.provider') + ': ' + escHtml(w.provider_gaii || '-') : t('profile.work.from') + ': ' + escHtml(w.requester_gaii || '-')}
+            ${w.price_morsels != null ? ' \u2502 ' + t('profile.work.cost') + ': ' + w.price_morsels + ' \u2764\uFE0F' : ''}
+            ${w.created_at ? ' \u2502 ' + timeAgo(w.created_at) : ''}
+          </div>
+
+          ${type === 'inbox' && isPending && html`
+            <div class="card-actions flex-row">
+              <button class="btn-primary btn-sm" disabled=${isLoading} onClick=${() => handleAccept(tc)}>
+                ${isLoading ? '...' : t('profile.work.accepted')}
+              </button>
+              <button class="btn-outline btn-sm" disabled=${isLoading} onClick=${() => handleReject(tc)}>
+                ${isLoading ? '...' : t('profile.work.declined')}
+              </button>
+            </div>
+          `}
+
+          ${type === 'inbox' && isActive && html`
+            <div class="card-actions flex-row">
+              <button class="btn-primary btn-sm" disabled=${isLoading} onClick=${() => setDeliverModal({ tc, desc: w.description || w.action_name })}>
+                ${t('profile.work.deliver')}
+              </button>
+            </div>
+          `}
+
+          ${type === 'sent' && w.status === 'delivered' && html`
+            <button class="btn-sm mt-xs" onClick=${() => setRateModal({ workId: tc, desc: w.description || w.action_name })}>${t('profile.work.rateBtn')}</button>
+          `}
+        </div>
+      `;
+    });
+  }
+
+  return html`
+    <div class="section-title">${t('profile.work.title')}</div>
+    <div class="section-desc">${t('profile.work.desc')}</div>
+    <div class="sub-tabs">
+      <button class="sub-tab ${workSubTab === 'inbox' ? 'active' : ''}" onClick=${() => setWorkSubTab('inbox')}>${t('profile.work.inbox')}</button>
+      <button class="sub-tab ${workSubTab === 'sent' ? 'active' : ''}" onClick=${() => setWorkSubTab('sent')}>${t('profile.work.sent')}</button>
+    </div>
+    ${workSubTab === 'inbox' ? renderList(workInbox, 'inbox') : renderList(workSent, 'sent')}
+
+    ${rateModal && html`<${RateModal} desc=${rateModal.desc}
+      onSubmit=${(r, c) => handleRate(rateModal.workId, r, c)}
+      onCancel=${() => setRateModal(null)} />`}
+
+    ${deliverModal && html`<${DeliverModal} desc=${deliverModal.desc}
+      loading=${actionLoading === deliverModal.tc}
+      onSubmit=${(result) => handleDeliver(deliverModal.tc, result)}
+      onCancel=${() => setDeliverModal(null)} />`}
+  `;
+}
+
+function RateModal({ desc, onSubmit, onCancel }) {
+  const [rating, setRating] = useState(0);
+  const [comment, setComment] = useState('');
+  return html`
+    <div class="modal-overlay" onClick=${e => { if (e.target.className.includes('modal-overlay')) onCancel(); }}>
+      <div class="modal">
+        <h3>${t('profile.work.rateTitle')}</h3>
+        <p class="text-meta mb-1">${t('profile.work.rateDesc')} ${escHtml(desc || '')}</p>
+        <div class="star-rating mb-1">
+          ${[1,2,3,4,5].map(i => html`
+            <span class="star ${i <= rating ? 'active' : ''}" onClick=${() => setRating(i)}>\u2605</span>
+          `)}
+        </div>
+        <div class="form-row"><label>${t('profile.work.commentLabel')}</label><textarea class="input-field" rows="2" value=${comment} onInput=${e => setComment(e.target.value)}></textarea></div>
+        <div class="form-actions">
+          <button class="btn-primary" onClick=${() => onSubmit(rating, comment)}>${t('profile.work.submitRating')}</button>
+          <button class="btn-outline" onClick=${onCancel}>${t('profile.cancel')}</button>
+        </div>
+      </div>
+    </div>`;
+}
+
+function DeliverModal({ desc, loading, onSubmit, onCancel }) {
+  const [result, setResult] = useState('');
+  return html`
+    <div class="modal-overlay" onClick=${e => { if (e.target.className.includes('modal-overlay')) onCancel(); }}>
+      <div class="modal">
+        <h3>${t('profile.work.deliver')}</h3>
+        <p class="text-meta mb-1">${t('profile.work.delivering')}: ${escHtml(desc || '')}</p>
+        <div class="form-row">
+          <label>${t('profile.work.commentLabel')}</label>
+          <textarea class="input-field" rows="4" placeholder="Describe the completed work or attach results..."
+            value=${result} onInput=${e => setResult(e.target.value)}></textarea>
+        </div>
+        <div class="form-actions">
+          <button class="btn-primary" disabled=${loading} onClick=${() => onSubmit(result || undefined)}>
+            ${loading ? t('profile.work.delivering') : t('profile.work.deliver')}
+          </button>
+          <button class="btn-outline" disabled=${loading} onClick=${onCancel}>${t('profile.cancel')}</button>
+        </div>
+      </div>
+    </div>`;
+}

package/dist/public/views/profile.js

@@ -0,0 +1,271 @@
+import { h } from 'preact';
+import { useState, useEffect, useCallback, useRef, useMemo } 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 { useViewCSS } from '/components/useViewCSS.js';
+import { getSession, getNodeUrl, onAuthChange } from '/js/services/auth.js';
+import { connect, disconnect, onUpdate, offUpdate } from '/lib/live-updates.js';
+import { listAgents } from '/js/services/agents.js';
+import { getWallet } from '/js/services/wallet.js';
+import * as memoryService from '/js/services/memory.js';
+import { listMyServices } from '/js/services/catalogue.js';
+import { listInbox } from '/js/services/work.js';
+import { listApps } from '/js/services/apps.js';
+import * as nodesService from '/js/services/nodes.js';
+
+// === Landing page (adaptive dashboard) ===
+import LandingPage, { computeTier } from './profile/landing-page.js';
+
+// === Tab modules (lazy-loaded on first visit, stay mounted) ===
+import PortfolioTab from './profile/portfolio-tab.js';
+import AgentsTab from './profile/agents-tab.js';
+import ChatSessionsTab from './profile/chat-sessions-tab.js';
+import McpTab from './profile/mcp-tab.js';
+import WalletTab from './profile/wallet-tab.js';
+import MemoryTab from './profile/memory-tab.js';
+import WorkTab from './profile/work-tab.js';
+import ServicesTab from './profile/services-tab.js';
+import BoardsTab from './profile/boards-tab.js';
+import AppsTab from './profile/apps-tab.js';
+import ExtensionsTab from './profile/extensions-tab.js';
+import FederationTab from './profile/federation-tab.js';
+import NodesTab from './profile/nodes-tab.js';
+import AccessTab from './profile/access-tab.js';
+import DataWalletTab from './profile/data-wallet-tab.js';
+import NodeStatsTab from './profile/node-stats-tab.js';
+import SecurityTab from './profile/security-tab.js';
+import EmailTab from './profile/email-tab.js';
+import KnowledgeTab from './profile/knowledge-tab.js';
+import OrganismsTab from './profile/organisms-tab.js';
+import NotificationsTab from './profile/notifications-tab.js';
+import GeneratorTab from './profile/generator-tab.js';
+import FoundryTab from './profile/foundry-tab.js';
+import CalibratorTab from './profile/calibrator-tab.js';
+import PackagesTab from './profile/packages-tab.js';
+
+// Each tab has a minTier: 'new' | 'active' | 'experienced'
+// Tabs with minTier <= current tier are visible in the tab bar.
+// Deep links (?tab=X) bypass tier filtering.
+const TABS = [
+  { id: 'portfolio',     key: 'portfolio.tabLabel',          component: PortfolioTab,      minTier: 'active' },
+  { id: 'agents',        key: 'profile.tabs.agents',         component: AgentsTab,         minTier: 'active' },
+  { id: 'chatsessions',  key: 'profile.tabs.chatSessions',   component: ChatSessionsTab,   minTier: 'active' },
+  { id: 'mcp',           key: 'profile.tabs.mcp',            component: McpTab,            minTier: 'active' },
+  { id: 'wallet',        key: 'profile.tabs.wallet',         component: WalletTab,         minTier: 'new' },
+  { id: 'knowledge',     key: 'knowledge.tabLabel',          component: KnowledgeTab,      minTier: 'active' },
+  { id: 'organisms',     key: 'profile.tabs.organisms',      component: OrganismsTab,      minTier: 'active' },
+  { id: 'memory',        key: 'profile.tabs.memory',         component: MemoryTab,         minTier: 'new' },
+  { id: 'work',          key: 'profile.tabs.work',           component: WorkTab,           minTier: 'active' },
+  { id: 'actions',       key: 'profile.tabs.services',       component: ServicesTab,       minTier: 'active' },
+  { id: 'boards',        key: 'profile.tabs.boards',         component: BoardsTab,         minTier: 'active' },
+  { id: 'apps',          key: 'profile.tabs.apps',           component: AppsTab,           minTier: 'active' },
+  { id: 'extensions',    key: 'profile.tabs.extensions',     component: ExtensionsTab,     minTier: 'active' },
+  { id: 'federation',    key: 'profile.tabs.federation',     component: FederationTab,     minTier: 'experienced' },
+  { id: 'nodes',         key: 'profile.tabs.nodes',          component: NodesTab,          minTier: 'experienced' },
+  { id: 'access',        key: 'profile.tabs.access',         component: AccessTab,         minTier: 'new' },
+  { id: 'dataWallet',    key: 'profile.tabs.dataWallet',     component: DataWalletTab,     minTier: 'active' },
+  { id: 'nodeStats',     key: 'profile.tabs.nodeStats',      component: NodeStatsTab,      minTier: 'experienced' },
+  { id: 'security',      key: 'profile.tabs.security',       component: SecurityTab,       minTier: 'experienced' },
+  { id: 'email',         key: 'profile.tabs.email',          component: EmailTab,          minTier: 'new' },
+  { id: 'notifications', key: 'profile.tabs.notifications',  component: NotificationsTab,  minTier: 'active' },
+  { id: 'generator',     key: 'profile.generator.tabLabel',  component: GeneratorTab,      minTier: 'active' },
+  { id: 'foundry',       key: 'profile.foundry.tabLabel',    component: FoundryTab,        minTier: 'active' },
+  { id: 'calibrator',   key: 'profile.calibrator.tabLabel', component: CalibratorTab,     minTier: 'active' },
+  { id: 'packages',      key: 'profile.tabs.packages',       component: PackagesTab,       minTier: 'active' },
+];
+
+export default function Profile({ navigate, locale }) {
+  const NODE_URL = getNodeUrl();
+  const [session, setSession] = useState(null);
+  const savedTab = () => {
+    const id = localStorage.getItem('aimeat-profile-tab');
+    // Default to 'home' (landing page) instead of a specific tab
+    if (id === 'home') return 'home';
+    return id && TABS.some(t => t.id === id) ? id : 'home';
+  };
+  const [activeTab, setActiveTab] = useState(savedTab);
+  const [visitedTabs, setVisitedTabs] = useState(() => {
+    const initial = savedTab();
+    return initial === 'home' ? new Set() : new Set([initial]);
+  });
+  const [stats, setStats] = useState({
+    agents: '-', chatSessions: '-', balance: '-', memory: '-',
+    services: '-', work: '-', apps: '-', files: '-', nodes: '-',
+  });
+  const [toast, setToast] = useState(null);
+  const toastTimer = useRef(null);
+
+  const showToast = useCallback((msg, isError) => {
+    if (toastTimer.current) clearTimeout(toastTimer.current);
+    setToast({ msg, isError });
+    toastTimer.current = setTimeout(() => setToast(null), 3000);
+  }, []);
+
+  const updateStats = useCallback((partial) => {
+    setStats(prev => ({ ...prev, ...partial }));
+  }, []);
+
+  // Compute tier from stats + session (re-computed on every stats change)
+  const tier = useMemo(() => {
+    if (!session) return 'new';
+    return computeTier(stats, session);
+  }, [stats, session]);
+
+  // visibleTabs kept for deep-link support — tab bar removed from UI
+  // but tier filtering still applies to which tabs can be navigated to via landing page
+
+  // Auth listener
+  useEffect(() => {
+    const s = getSession();
+    if (s) setSession(s);
+    return onAuthChange(() => {
+      const ns = getSession();
+      setSession(ns);
+      if (!ns) {
+        setActiveTab('home');
+        setVisitedTabs(new Set());
+        localStorage.removeItem('aimeat-profile-tab');
+      }
+    });
+  }, []);
+
+  // URL tab param (deep links bypass tier filtering)
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const tab = params.get('tab');
+    if (tab && TABS.some(t => t.id === tab)) {
+      setActiveTab(tab);
+      setVisitedTabs(prev => { const next = new Set(prev); next.add(tab); return next; });
+    }
+  }, []);
+
+  useViewCSS('/css/views/profile.css');
+
+  // Load all stats on mount so the stats bar shows counts immediately
+  useEffect(() => {
+    if (!session) return;
+    const owner = session.owner;
+    Promise.allSettled([
+      listAgents(owner),
+      getWallet(),
+      memoryService.listMemories(),
+      memoryService.listFiles(),
+      listMyServices(owner),
+      listInbox(),
+      listApps(),
+      nodesService.listNodes(),
+    ]).then(([agents, wallet, memories, files, services, work, apps, nodes]) => {
+      const s = {};
+      if (agents.status === 'fulfilled') {
+        const list = agents.value;
+        s.agents = Array.isArray(list) ? list.length : 0;
+        s.chatSessions = Array.isArray(list) ? list.filter(a => a.owner === owner && a.name?.startsWith('session-')).length : 0;
+      }
+      if (wallet.status === 'fulfilled') {
+        const w = wallet.value?.data || wallet.value || {};
+        s.balance = w.balance ?? '-';
+      }
+      if (memories.status === 'fulfilled') {
+        const list = memories.value;
+        s.memory = Array.isArray(list) ? list.length : 0;
+      }
+      if (files.status === 'fulfilled') {
+        const list = files.value;
+        s.files = Array.isArray(list) ? list.length : 0;
+      }
+      if (services.status === 'fulfilled') {
+        const list = services.value;
+        s.services = Array.isArray(list) ? list.length : 0;
+      }
+      if (work.status === 'fulfilled') {
+        const list = work.value;
+        s.work = Array.isArray(list) ? list.length : 0;
+      }
+      if (apps.status === 'fulfilled') {
+        const list = apps.value;
+        s.apps = Array.isArray(list) ? list.filter(a => a.owner === owner).length : 0;
+      }
+      if (nodes.status === 'fulfilled') {
+        const list = nodes.value;
+        s.nodes = Array.isArray(list) ? list.length : 0;
+      }
+      updateStats(s);
+    });
+  }, [session]);
+
+  // SSE live updates — broadcast custom event so tabs can re-fetch
+  useEffect(() => {
+    if (!session) return;
+    const notifyTabs = () => {
+      window.dispatchEvent(new CustomEvent('aimeat-live-update'));
+    };
+    connect(() => getSession()?.jwt);
+    onUpdate(notifyTabs);
+    return () => {
+      offUpdate(notifyTabs);
+      disconnect();
+    };
+  }, [session]);
+
+  // Tab switching
+  function switchTab(tabId) {
+    setActiveTab(tabId);
+    localStorage.setItem('aimeat-profile-tab', tabId);
+    if (tabId !== 'home') {
+      setVisitedTabs(prev => {
+        const next = new Set(prev);
+        next.add(tabId);
+        return next;
+      });
+    }
+  }
+
+  // Not logged in
+  if (!session) {
+    return html`
+      <div class="bg-aurora" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none">
+        <div class="aurora-wave"></div><div class="aurora-wave"></div><div class="aurora-wave"></div>
+      </div>
+      <div class="pf">
+        <div class="login-prompt">
+          <h1>\u{1F496} ${t('profile.signInTitle')}</h1>
+          <p>${t('profile.signInDesc')}</p>
+        </div>
+      </div>`;
+  }
+
+  // Common props passed to all tabs
+  const tabProps = { session, showToast, onStats: updateStats, navigate, locale };
+
+  // Render a tab component by ID — called by LandingPage to show content inline
+  const renderTab = useCallback((tabId) => {
+    const tab = TABS.find(t => t.id === tabId);
+    if (!tab) return null;
+    return html`<${tab.component} ...${tabProps} />`;
+  }, [tabProps]);
+
+  // Get tab label by ID
+  const getTabLabel = useCallback((tabId) => {
+    const tab = TABS.find(t => t.id === tabId);
+    return tab ? t(tab.key) : tabId;
+  }, []);
+
+  return html`
+    <div class="pf">
+      <${LandingPage}
+        tier=${tier}
+        stats=${stats}
+        session=${session}
+        navigate=${navigate}
+        showToast=${showToast}
+        locale=${locale}
+        renderTab=${renderTab}
+        getTabLabel=${getTabLabel}
+      />
+    </div>
+
+    <!-- Toast -->
+    ${toast && html`<div class="pf toast-container"><div class="toast ${toast?.isError ? 'error' : ''}">${toast?.msg}</div></div>`}`;
+}