From 0fc43982806b4d5d5795939673d573e88739a94c Mon Sep 17 00:00:00 2001 From: NEA DEV Date: Thu, 23 Jul 2026 19:02:42 +0000 Subject: [PATCH 1/2] feat(#629): Intelligent Multi-Agent System for Complex Operations MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implements the multi-agent AI system requested in issue #629: Core implementation: - src/lib/multiAgent.ts — Full multi-agent framework with: - MessageBus (pub/sub agent communication) - BaseAgent abstract class - PaymentAgent — cross-asset path payment discovery - MultisigAgent — signature collection & threshold verification - TradingAgent — SDEX order book analysis & strategy execution - ContractAgent — Soroban contract simulation - AgentCoordinator — task decomposition, dependency ordering, workflow orchestration - Pre-built workflows: cross-chain payment, multisig, trading, contract, composite - src/components/dashboard/MultiAgentDashboard.tsx — React UI with: - Live agent status panel with real-time status indicators - Workflow selector (5 workflow types) - Per-workflow input forms with validation - Task list with expandable output/error details - Agent communication log with auto-scroll Supporting fixes (pre-existing build failures resolved): - src/lib/errorHandling/SelfHealingManager.ts — Full implementation with getStatuses(), healNow(), subscribe(), resetService(), markHealthy(), OverallHealth type, and extended ServiceStatus fields - src/lib/errorHandling/RecoveryStrategyRegistry.ts — Stub stubs resolved - src/lib/swCacheBridge.ts — Added swCachePut, swCacheDelete, swCacheClearApi, swGetStats, SWStats, onSWMessage, swWarmUrls - src/utils/monitoring.ts — Added collectHealthSnapshot, collectSystemHealthSnapshot, computeHealthScore, watchErrors - src/components/dashboard/FeatureFlags.tsx — Full feature flags dashboard with toggle controls, rollout sliders, category/state filters, search, localStorage persistence, and override tracking Navigation: - src/routes/DashboardLayout.tsx — multiAgent tab registered - src/components/layout/Sidebar.tsx — Multi-Agent nav item added (🤖) Closes #629 --- src/components/dashboard/FeatureFlags.tsx | 666 ++++++++++++++ .../dashboard/MultiAgentDashboard.tsx | 561 ++++++++++++ src/components/layout/Sidebar.tsx | 1 + .../notifications/NotificationPreferences.jsx | 3 +- .../notifications/SmartNotificationCenter.tsx | 531 +++++++++++ .../errorHandling/RecoveryStrategyRegistry.ts | 3 + src/lib/errorHandling/SelfHealingManager.ts | 226 +++++ src/lib/multiAgent.ts | 864 ++++++++++++++++++ src/lib/swCacheBridge.ts | 120 +++ src/routes/DashboardLayout.tsx | 1 + src/utils/monitoring.ts | 151 +++ 11 files changed, 3125 insertions(+), 2 deletions(-) create mode 100644 src/components/dashboard/FeatureFlags.tsx create mode 100644 src/components/dashboard/MultiAgentDashboard.tsx create mode 100644 src/components/notifications/SmartNotificationCenter.tsx create mode 100644 src/lib/errorHandling/RecoveryStrategyRegistry.ts create mode 100644 src/lib/errorHandling/SelfHealingManager.ts create mode 100644 src/lib/multiAgent.ts create mode 100644 src/lib/swCacheBridge.ts diff --git a/src/components/dashboard/FeatureFlags.tsx b/src/components/dashboard/FeatureFlags.tsx new file mode 100644 index 00000000..44f7fa4f --- /dev/null +++ b/src/components/dashboard/FeatureFlags.tsx @@ -0,0 +1,666 @@ +/** + * FeatureFlags.tsx + * + * Dashboard panel for managing feature flags and A/B experiments. + * Flags are stored in localStorage so changes survive page reloads. + */ + +import React, { useState, useCallback, useMemo } from 'react'; + +// ─── Types ───────────────────────────────────────────────────────────────────── + +type FlagEnv = 'all' | 'testnet' | 'mainnet'; +type FlagCategory = 'core' | 'experimental' | 'ai' | 'ui' | 'security' | 'defi'; + +interface FeatureFlag { + id: string; + name: string; + description: string; + category: FlagCategory; + env: FlagEnv; + enabled: boolean; + rollout: number; // 0–100 % + experiment: boolean; + variant?: string; + tags: string[]; +} + +// ─── Storage helpers ─────────────────────────────────────────────────────────── + +const STORAGE_KEY = 'stellar_feature_flags_v1'; + +function loadOverrides(): Record { + try { + const raw = localStorage.getItem(STORAGE_KEY); + return raw ? (JSON.parse(raw) as Record) : {}; + } catch { + return {}; + } +} + +function saveOverrides(overrides: Record): void { + try { + localStorage.setItem(STORAGE_KEY, JSON.stringify(overrides)); + } catch { + // Storage not available + } +} + +// ─── Default flag definitions ────────────────────────────────────────────────── + +const DEFAULT_FLAGS: FeatureFlag[] = [ + { + id: 'multi_agent_system', + name: 'Multi-Agent System', + description: 'Intelligent agents that collaborate on cross-chain payments, multi-sig workflows, and automated trading strategies.', + category: 'ai', + env: 'all', + enabled: true, + rollout: 100, + experiment: false, + tags: ['ai', 'agents', 'automation'], + }, + { + id: 'ai_tx_patterns', + name: 'AI Transaction Patterns', + description: 'Machine-learning based anomaly detection and pattern analysis for account transactions.', + category: 'ai', + env: 'all', + enabled: true, + rollout: 100, + experiment: false, + tags: ['ai', 'analytics'], + }, + { + id: 'new_tx_builder', + name: 'New Transaction Builder', + description: 'Redesigned transaction builder with drag-and-drop operations and inline simulation.', + category: 'ui', + env: 'all', + enabled: true, + rollout: 80, + experiment: true, + variant: 'B', + tags: ['builder', 'ux'], + }, + { + id: 'governance_beta', + name: 'Governance (Beta)', + description: 'On-chain governance panel for Stellar-based DAOs and voting contracts.', + category: 'experimental', + env: 'testnet', + enabled: false, + rollout: 20, + experiment: true, + variant: 'A', + tags: ['governance', 'dao'], + }, + { + id: 'soroban_studio', + name: 'Soroban Contract Studio', + description: 'Integrated IDE for writing, testing, and deploying Soroban smart contracts.', + category: 'core', + env: 'all', + enabled: true, + rollout: 100, + experiment: false, + tags: ['contracts', 'soroban'], + }, + { + id: 'defi_analytics', + name: 'DeFi Analytics', + description: 'AMM pool analytics, yield farming opportunities, and impermanent loss calculator.', + category: 'defi', + env: 'all', + enabled: true, + rollout: 100, + experiment: false, + tags: ['defi', 'analytics'], + }, + { + id: 'portfolio_rebalancer', + name: 'Portfolio Rebalancer', + description: 'Automated portfolio rebalancing with configurable target allocations and threshold alerts.', + category: 'defi', + env: 'all', + enabled: true, + rollout: 100, + experiment: false, + tags: ['portfolio', 'trading'], + }, + { + id: 'biometric_auth', + name: 'Biometric Auth', + description: 'WebAuthn / passkey support for secure, passwordless transaction signing.', + category: 'security', + env: 'all', + enabled: false, + rollout: 0, + experiment: true, + variant: 'A', + tags: ['auth', 'security'], + }, + { + id: 'session_recording', + name: 'Session Recording', + description: 'Opt-in session replay for debugging and UX improvement (with user consent).', + category: 'experimental', + env: 'all', + enabled: false, + rollout: 5, + experiment: true, + variant: 'A', + tags: ['analytics', 'debug'], + }, + { + id: 'payment_channels', + name: 'Payment Channels', + description: 'Off-chain micro-payment channels for high-frequency, low-fee Stellar transactions.', + category: 'experimental', + env: 'testnet', + enabled: false, + rollout: 10, + experiment: true, + variant: 'A', + tags: ['payments', 'channels'], + }, + { + id: 'cross_network_search', + name: 'Cross-Network Search', + description: 'Search accounts, transactions, and contracts across Mainnet, Testnet, and Futurenet simultaneously.', + category: 'core', + env: 'all', + enabled: true, + rollout: 100, + experiment: false, + tags: ['search', 'network'], + }, + { + id: 'compliance_dashboard', + name: 'Compliance Dashboard', + description: 'AML/KYC screening, travel rule enforcement, and audit report generation.', + category: 'security', + env: 'mainnet', + enabled: true, + rollout: 100, + experiment: false, + tags: ['compliance', 'aml'], + }, +]; + +const CATEGORY_COLORS: Record = { + core: 'var(--cyan, #06b6d4)', + experimental: '#f59e0b', + ai: '#8b5cf6', + ui: '#3b82f6', + security: '#10b981', + defi: '#f97316', +}; + +const CATEGORY_LABELS: Record = { + core: 'Core', + experimental: 'Experimental', + ai: 'AI / ML', + ui: 'UI / UX', + security: 'Security', + defi: 'DeFi', +}; + +// ─── Sub-components ───────────────────────────────────────────────────────────── + +function Toggle({ enabled, onChange }: { enabled: boolean; onChange: (v: boolean) => void }) { + return ( + + ); +} + +function Badge({ label, color }: { label: string; color: string }) { + return ( + + {label} + + ); +} + +function RolloutBar({ value }: { value: number }) { + const color = value === 100 ? '#10b981' : value >= 50 ? 'var(--accent, #06b6d4)' : '#f59e0b'; + return ( +
+
+
+
+ + {value}% + +
+ ); +} + +interface FlagRowProps { + flag: FeatureFlag; + overrideEnabled?: boolean; + onToggle: (id: string, value: boolean) => void; + onRolloutChange: (id: string, value: number) => void; +} + +function FlagRow({ flag, overrideEnabled, onToggle, onRolloutChange }: FlagRowProps) { + const [expanded, setExpanded] = useState(false); + const isEnabled = overrideEnabled ?? flag.enabled; + const catColor = CATEGORY_COLORS[flag.category]; + const hasOverride = overrideEnabled !== undefined; + + return ( +
+ {/* Header row */} +
+ onToggle(flag.id, v)} /> + + +
+ + {/* Expanded details */} + {expanded && ( +
+

+ {flag.description} +

+ + {/* Rollout slider */} +
+ + onRolloutChange(flag.id, parseInt(e.target.value))} + style={{ width: '100%', accentColor: catColor }} + aria-label={`Rollout for ${flag.name}`} + /> +
+ + {/* Tags */} + {flag.tags.length > 0 && ( +
+ {flag.tags.map((tag) => ( + + #{tag} + + ))} +
+ )} +
+ )} +
+ ); +} + +// ─── Summary stats ───────────────────────────────────────────────────────────── + +function StatCard({ value, label, color }: { value: number; label: string; color?: string }) { + return ( +
+
+ {value} +
+
{label}
+
+ ); +} + +// ─── Main component ───────────────────────────────────────────────────────────── + +export default function FeatureFlags() { + const [overrides, setOverrides] = useState>(() => loadOverrides()); + const [rollouts, setRollouts] = useState>({}); + const [search, setSearch] = useState(''); + const [filterCat, setFilterCat] = useState('all'); + const [filterState, setFilterState] = useState<'all' | 'enabled' | 'disabled'>('all'); + + // Merge defaults with overrides and rollout changes + const flags = useMemo( + () => + DEFAULT_FLAGS.map((f) => ({ + ...f, + enabled: overrides[f.id] ?? f.enabled, + rollout: rollouts[f.id] ?? f.rollout, + })), + [overrides, rollouts] + ); + + const filtered = useMemo( + () => + flags.filter((f) => { + if (search && !f.name.toLowerCase().includes(search.toLowerCase()) && + !f.id.includes(search.toLowerCase()) && + !f.tags.some((t) => t.includes(search.toLowerCase()))) { + return false; + } + if (filterCat !== 'all' && f.category !== filterCat) return false; + if (filterState === 'enabled' && !f.enabled) return false; + if (filterState === 'disabled' && f.enabled) return false; + return true; + }), + [flags, search, filterCat, filterState] + ); + + const handleToggle = useCallback((id: string, value: boolean) => { + setOverrides((prev) => { + const next = { ...prev, [id]: value }; + saveOverrides(next); + return next; + }); + }, []); + + const handleRollout = useCallback((id: string, value: number) => { + setRollouts((prev) => ({ ...prev, [id]: value })); + }, []); + + const handleResetAll = useCallback(() => { + setOverrides({}); + setRollouts({}); + saveOverrides({}); + }, []); + + const enabledCount = flags.filter((f) => f.enabled).length; + const experimentCount = flags.filter((f) => f.experiment).length; + const overrideCount = Object.keys(overrides).length; + + const selectStyle: React.CSSProperties = { + padding: '7px 10px', + background: 'var(--bg-elevated)', + border: '1px solid var(--border)', + borderRadius: 6, + color: 'var(--text)', + fontSize: 13, + cursor: 'pointer', + }; + + return ( +
+ {/* Header */} +
+

+ 🚩 Feature Flags +

+

+ Enable, disable, and configure feature rollouts. Changes are stored locally and take effect immediately. +

+
+ + {/* Summary stats */} +
+ + + + + +
+ + {/* Filters */} +
+ setSearch(e.target.value)} + style={{ + flex: 1, + minWidth: 160, + padding: '7px 12px', + background: 'var(--bg-elevated)', + border: '1px solid var(--border)', + borderRadius: 6, + color: 'var(--text)', + fontSize: 13, + }} + aria-label="Search feature flags" + /> + + + + + + {overrideCount > 0 && ( + + )} +
+ + {/* Flag list */} + {filtered.length === 0 ? ( +
+ No flags match your filters. +
+ ) : ( +
+ {filtered.map((flag) => ( + + ))} +
+ )} + + {/* Footer note */} +

+ Flag overrides are stored in localStorage and apply to this browser session only. + Server-side rollout percentages are illustrative. +

+
+ ); +} diff --git a/src/components/dashboard/MultiAgentDashboard.tsx b/src/components/dashboard/MultiAgentDashboard.tsx new file mode 100644 index 00000000..d01a9af4 --- /dev/null +++ b/src/components/dashboard/MultiAgentDashboard.tsx @@ -0,0 +1,561 @@ +import React, { useCallback, useEffect, useRef, useState } from 'react'; +import { + AgentCoordinator, + AgentState, + AgentTask, + AgentMessage, + AgentType, + buildCrossChainWorkflow, + buildMultisigWorkflow, + buildTradingWorkflow, + buildContractWorkflow, + buildCompositeWorkflow, +} from '../../lib/multiAgent'; +import { useStore } from '../../lib/store'; + +// ─── Helpers ────────────────────────────────────────────────────────────────── + +const STATUS_COLOR: Record = { + idle: 'var(--text-muted)', + running: 'var(--accent)', + waiting: '#f59e0b', + done: '#10b981', + error: 'var(--error, #ef4444)', + pending: 'var(--text-muted)', + in_progress: 'var(--accent)', + completed: '#10b981', + failed: 'var(--error, #ef4444)', +}; + +const AGENT_ICONS: Record = { + payment: '💸', + multisig: '🔐', + trading: '📈', + contract: '📜', + coordinator: '🧠', +}; + +function statusDot(status: string) { + return ( + + ); +} + +function card(children: React.ReactNode, style?: React.CSSProperties) { + return ( +
+ {children} +
+ ); +} + +function sectionTitle(text: string) { + return ( +

+ {text} +

+ ); +} + +function inputStyle(): React.CSSProperties { + return { + width: '100%', + padding: '8px 10px', + background: 'var(--bg-card, var(--bg))', + border: '1px solid var(--border)', + borderRadius: 6, + color: 'var(--text)', + fontSize: 13, + boxSizing: 'border-box', + }; +} + +function labelStyle(): React.CSSProperties { + return { display: 'block', fontSize: 12, color: 'var(--text-muted)', marginBottom: 4 }; +} + +function field(label: string, input: React.ReactNode) { + return ( +
+ + {input} +
+ ); +} + +// ─── Workflow Form Components ───────────────────────────────────────────────── + +interface PaymentFormProps { onRun: (params: Record) => void; loading: boolean; defaultAccount: string; } +function PaymentForm({ onRun, loading, defaultAccount }: PaymentFormProps) { + const [src, setSrc] = useState(defaultAccount); + const [dst, setDst] = useState(''); + const [asset, setAsset] = useState('native'); + const [amount, setAmount] = useState('10'); + const { network } = useStore(); + + return ( +
{ e.preventDefault(); onRun({ sourceAccount: src, destinationAccount: dst, asset, amount, network }); }}> + {field('Source Account', setSrc(e.target.value)} placeholder="G..." />)} + {field('Destination Account', setDst(e.target.value)} placeholder="G..." required />)} + {field('Asset', setAsset(e.target.value)} placeholder="native or CODE:ISSUER" />)} + {field('Amount', setAmount(e.target.value)} type="number" min="0.0000001" step="any" required />)} + +
+ ); +} + +interface MultisigFormProps { onRun: (params: Record) => void; loading: boolean; defaultAccount: string; } +function MultisigForm({ onRun, loading, defaultAccount }: MultisigFormProps) { + const [accountId, setAccountId] = useState(defaultAccount); + const [signers, setSigners] = useState(''); + const [threshold, setThreshold] = useState(2); + + return ( +
{ e.preventDefault(); onRun({ accountId, signers: signers.split(',').map(s => s.trim()).filter(Boolean), requiredThreshold: threshold }); }}> + {field('Account ID', setAccountId(e.target.value)} placeholder="G..." />)} + {field('Signers (comma-separated)', setSigners(e.target.value)} placeholder="GABC…, GDEF…" required />)} + {field('Required Threshold', setThreshold(Number(e.target.value))} type="number" min={1} required />)} + +
+ ); +} + +interface TradingFormProps { onRun: (params: Record) => void; loading: boolean; } +function TradingForm({ onRun, loading }: TradingFormProps) { + const [strategy, setStrategy] = useState<'market' | 'limit' | 'twap'>('market'); + const [selling, setSelling] = useState('XLM'); + const [buying, setBuying] = useState('USDC'); + const [amount, setAmount] = useState('100'); + const [slippage, setSlippage] = useState(1); + + return ( +
{ e.preventDefault(); onRun({ strategy, sellingAsset: selling, buyingAsset: buying, amount, maxSlippage: slippage }); }}> + {field('Strategy', ( + + ))} + {field('Selling Asset', setSelling(e.target.value)} placeholder="XLM" required />)} + {field('Buying Asset', setBuying(e.target.value)} placeholder="USDC" required />)} + {field('Amount', setAmount(e.target.value)} type="number" min="0" step="any" required />)} + {field('Max Slippage %', setSlippage(Number(e.target.value))} type="number" min={0} max={100} step={0.1} />)} + +
+ ); +} + +interface ContractFormProps { onRun: (params: Record) => void; loading: boolean; } +function ContractForm({ onRun, loading }: ContractFormProps) { + const [contractId, setContractId] = useState(''); + const [fnName, setFnName] = useState(''); + const [args, setArgs] = useState(''); + const { network } = useStore(); + + return ( +
{ e.preventDefault(); onRun({ contractId, functionName: fnName, args: args ? args.split(',').map(a => a.trim()) : [], network }); }}> + {field('Contract ID', setContractId(e.target.value)} placeholder="C..." required />)} + {field('Function Name', setFnName(e.target.value)} placeholder="transfer" required />)} + {field('Arguments (comma-separated)', setArgs(e.target.value)} placeholder="arg1, arg2" />)} + +
+ ); +} + +interface CompositeFormProps { onRun: (params: Record) => void; loading: boolean; defaultAccount: string; } +function CompositeForm({ onRun, loading, defaultAccount }: CompositeFormProps) { + const [src, setSrc] = useState(defaultAccount); + const [dst, setDst] = useState(''); + const [asset, setAsset] = useState('USDC'); + const [amount, setAmount] = useState('50'); + const [strategy, setStrategy] = useState<'market' | 'limit' | 'twap'>('twap'); + const { network } = useStore(); + + return ( +
{ e.preventDefault(); onRun({ sourceAccount: src, destinationAccount: dst, asset, amount, network, strategy }); }}> + {field('Source Account', setSrc(e.target.value)} placeholder="G..." />)} + {field('Destination Account', setDst(e.target.value)} placeholder="G..." required />)} + {field('Asset', setAsset(e.target.value)} placeholder="USDC" />)} + {field('Amount', setAmount(e.target.value)} type="number" min="0" step="any" required />)} + {field('Trading Strategy', ( + + ))} + +
+ ); +} + +// ─── Agent Status Panel ─────────────────────────────────────────────────────── + +function AgentStatusPanel({ agents }: { agents: AgentState[] }) { + return card( + <> + {sectionTitle('Active Agents')} +
+ {agents.map((agent) => ( +
+ {AGENT_ICONS[agent.type]} +
+
+ {statusDot(agent.status)} + {agent.name} +
+
+ Status: {agent.status} + {' · '}{agent.completedTaskCount} done + {agent.errorCount > 0 && · {agent.errorCount} err} +
+
+
+ ))} +
+ + ); +} + +// ─── Task List Panel ────────────────────────────────────────────────────────── + +function TaskListPanel({ tasks, onClear }: { tasks: AgentTask[]; onClear: () => void }) { + return card( + <> +
+ {sectionTitle('Tasks')} + {tasks.length > 0 && ( + + )} +
+ {tasks.length === 0 ? ( +

No tasks yet. Run a workflow to get started.

+ ) : ( +
+ {tasks.map((task) => ( + + ))} +
+ )} + + ); +} + +function TaskCard({ task }: { task: AgentTask }) { + const [expanded, setExpanded] = useState(false); + const duration = + task.startedAt && task.completedAt + ? `${((task.completedAt - task.startedAt) / 1000).toFixed(1)}s` + : task.startedAt + ? 'running…' + : null; + + return ( +
+ + + {expanded && ( +
+
{task.description}
+ {task.error && ( +
+ ✗ {task.error} +
+ )} + {task.output && ( + 
+              {JSON.stringify(task.output, null, 2)}
+
+ )} +
+ )} +
+ ); +} + +// ─── Message Log Panel ──────────────────────────────────────────────────────── + +function MessageLogPanel({ messages }: { messages: AgentMessage[] }) { + const bottomRef = useRef(null); + + useEffect(() => { + bottomRef.current?.scrollIntoView({ behavior: 'smooth' }); + }, [messages.length]); + + return card( + <> + {sectionTitle('Agent Communication Log')} +
+ {messages.length === 0 ? ( + No messages yet. + ) : ( + messages.map((msg) => ( +
+ {new Date(msg.timestamp).toLocaleTimeString()} + [{msg.from}] + → + [{msg.to}] + {msg.type}: + {JSON.stringify(msg.payload).slice(0, 80)} +
+ )) + )} +
+
+ + ); +} + +// ─── Main Dashboard Component ───────────────────────────────────────────────── + +type WorkflowKey = 'payment' | 'multisig' | 'trading' | 'contract' | 'composite'; + +const WORKFLOWS: { key: WorkflowKey; label: string; icon: string; description: string }[] = [ + { key: 'payment', label: 'Cross-Chain Payment', icon: '💸', description: 'Discover optimal paths for cross-asset transfers.' }, + { key: 'multisig', label: 'Multi-Sig Workflow', icon: '🔐', description: 'Coordinate signers and verify threshold requirements.' }, + { key: 'trading', label: 'Automated Trading', icon: '📈', description: 'Analyse SDEX order book and execute a trading strategy.' }, + { key: 'contract', label: 'Contract Invocation', icon: '📜', description: 'Simulate a Soroban smart contract call.' }, + { key: 'composite', label: 'Composite (Pay + Trade)', icon: '🔗', description: 'Chain payment path discovery with a trading strategy.' }, +]; + +export default function MultiAgentDashboard() { + const { connectedAddress } = useStore(); + const coordinatorRef = useRef(null); + + const [agents, setAgents] = useState([]); + const [tasks, setTasks] = useState([]); + const [messages, setMessages] = useState([]); + const [loading, setLoading] = useState(false); + const [activeWorkflow, setActiveWorkflow] = useState('payment'); + + // Initialise the coordinator once + const refresh = useCallback(() => { + const c = coordinatorRef.current; + if (!c) return; + setAgents(c.getAgentStates()); + setTasks([...c.getTasks()].reverse()); + setMessages(c.getMessageLog()); + }, []); + + useEffect(() => { + const coordinator = new AgentCoordinator(); + coordinator.setUpdateCallback(refresh); + coordinatorRef.current = coordinator; + refresh(); + return () => coordinator.destroy(); + }, [refresh]); + + const runWorkflow = useCallback(async (params: Record) => { + const c = coordinatorRef.current; + if (!c || loading) return; + setLoading(true); + try { + let workflow; + if (activeWorkflow === 'payment') { + workflow = buildCrossChainWorkflow(params as Parameters[0]); + } else if (activeWorkflow === 'multisig') { + workflow = buildMultisigWorkflow(params as Parameters[0]); + } else if (activeWorkflow === 'trading') { + workflow = buildTradingWorkflow(params as Parameters[0]); + } else if (activeWorkflow === 'contract') { + workflow = buildContractWorkflow(params as Parameters[0]); + } else { + workflow = buildCompositeWorkflow(params as Parameters[0]); + } + await c.runWorkflow(workflow); + } finally { + setLoading(false); + refresh(); + } + }, [activeWorkflow, loading, refresh]); + + const handleClear = useCallback(() => { + coordinatorRef.current?.clearTasks(); + refresh(); + }, [refresh]); + + const defaultAccount = connectedAddress ?? ''; + + return ( +
+ {/* Header */} +
+

+ 🧠 Multi-Agent System +

+

+ Specialized agents collaborate on complex Stellar operations — cross-chain payments, + multi-signature workflows, automated trading strategies, and smart contract interactions. +

+
+ +
+ + {/* Left column: agent status + workflow selector */} +
+ + + {card( + <> + {sectionTitle('Select Workflow')} +
+ {WORKFLOWS.map((wf) => ( + + ))} +
+ + )} +
+ + {/* Right column: form + tasks + log */} +
+ + {/* Workflow form */} + {card( + <> + {(() => { + const wf = WORKFLOWS.find(w => w.key === activeWorkflow)!; + return ( + <> +
+ {wf.icon} +
+
{wf.label}
+
{wf.description}
+
+
+ {activeWorkflow === 'payment' && } + {activeWorkflow === 'multisig' && } + {activeWorkflow === 'trading' && } + {activeWorkflow === 'contract' && } + {activeWorkflow === 'composite' && } + + ); + })()} + + )} + + + +
+
+
+ ); +} diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx index 1ca13416..c2813393 100644 --- a/src/components/layout/Sidebar.tsx +++ b/src/components/layout/Sidebar.tsx @@ -53,6 +53,7 @@ const NAV_ITEMS: NavItem[] = [ { id: 'wallet', label: 'Wallet', icon: '⊡' }, { id: 'signer', label: 'Signer', icon: '✎' }, { id: 'multisig', label: 'Multisig', icon: '⊕' }, + { id: 'multiAgent', label: 'Multi-Agent', icon: '🤖' }, { id: 'did', label: 'DID', icon: '🆔' }, { id: 'alertRules', label: 'Alerts', icon: '🔔' }, { id: 'portfolio', label: 'Portfolio', icon: '◐' }, diff --git a/src/components/notifications/NotificationPreferences.jsx b/src/components/notifications/NotificationPreferences.jsx index d11d5e83..ff0920ba 100644 --- a/src/components/notifications/NotificationPreferences.jsx +++ b/src/components/notifications/NotificationPreferences.jsx @@ -4,9 +4,8 @@ import { saveNotificationPreferences, resetNotificationPreferences, defaultNotificationPreferences, - type NotificationPreferences as NotificationPreferencesType, } from '../../lib/notificationPreferences' -import { NOTIFICATION_CATEGORIES, PRIORITY_ORDER, type NotificationCategory, type NotificationPriority } from '../../lib/notificationCategories' +import { NOTIFICATION_CATEGORIES, PRIORITY_ORDER } from '../../lib/notificationCategories' import { Bell, BellOff, diff --git a/src/components/notifications/SmartNotificationCenter.tsx b/src/components/notifications/SmartNotificationCenter.tsx new file mode 100644 index 00000000..7217115c --- /dev/null +++ b/src/components/notifications/SmartNotificationCenter.tsx @@ -0,0 +1,531 @@ +import React, { useEffect, useMemo, useState } from 'react' +import { + NotificationDeduplicator, +} from '../../lib/notificationDeduplicator' +import { + NOTIFICATION_CATEGORIES, + PRIORITY_ORDER, +} from '../../lib/notificationCategories' +import { + filterNotifications, +} from '../../lib/notificationFilter' +import { + loadNotificationPreferences, + preferencesToFilterConfig, +} from '../../lib/notificationPreferences' +import { + ArrowLeftRight, + Wallet, + Shield, + Activity, + Settings, + TrendingUp, + FileCode, + CheckCheck, + Trash2, + Filter, + ArrowUpDown, + Bell, + BellOff, + AlertTriangle, +} from 'lucide-react' + +const CATEGORY_ICONS: Record = { + transaction: , + balance: , + security: , + network: , + system: , + price: , + contract: , +} + +const PRIORITY_COLORS: Record = { + critical: 'var(--red)', + high: 'var(--amber)', + medium: 'var(--cyan)', + low: 'var(--text-muted)', +} + +const SORT_MODES: { value: NotificationSortMode; label: string }[] = [ + { value: 'priority', label: 'Priority' }, + { value: 'recent', label: 'Recent' }, + { value: 'category', label: 'Category' }, +] + +// ─── Props ──────────────────────────────────────────────────────────────────── + +export interface SmartNotificationCenterProps { + open: boolean + onClose: () => void + notifications: SmartNotification[] + /** Called when the user dismisses/marks-read a notification group. */ + onDismiss?: (id: string) => void + /** Called when user marks all as read. */ + onMarkAllRead?: () => void + /** Called when user clears all. */ + onClearAll?: () => void +} + +// ─── Component ──────────────────────────────────────────────────────────────── + +export default function SmartNotificationCenter({ + open, + onClose, + notifications, + onDismiss, + onMarkAllRead, + onClearAll, +}: SmartNotificationCenterProps) { + const [filterConfig, setFilterConfig] = useState(null) + const [selectedCategory, setSelectedCategory] = useState('all') + const [sortMode, setSortMode] = useState('priority') + const [showFilters, setShowFilters] = useState(false) + + useEffect(() => { + loadNotificationPreferences().then((prefs) => { + setFilterConfig(preferencesToFilterConfig(prefs)) + }) + }, []) + + const categories = useMemo(() => { + const cats = new Set(notifications.map((n) => n.category)) + return Array.from(cats).sort() + }, [notifications]) + + const processed = useMemo(() => { + if (!filterConfig) return [] + + let filtered = filterNotifications(notifications, filterConfig, sortMode) + + if (selectedCategory !== 'all') { + filtered = filtered.filter((n) => n.category === selectedCategory) + } + + return filtered + }, [notifications, filterConfig, selectedCategory, sortMode]) + + const unreadCount = useMemo( + () => notifications.reduce((n, it) => (it.read ? n : n + 1), 0), + [notifications], + ) + + if (!open) return null + + return ( + <> +