feat: Solace Bank Group PLC Treasury Management Portal

- Web3 authentication with MetaMask, WalletConnect, Coinbase wallet options
- Demo mode for testing without wallet
- Overview dashboard with KPI cards, asset allocation, positions, accounts, alerts
- Transaction Builder module (full IDE-style drag-and-drop canvas with 28 gap fixes)
- Accounts module with multi-account/subaccount hierarchical structures
- Treasury Management module with positions table and 14-day cash forecast
- Financial Reporting module with IPSAS, US GAAP, IFRS compliance
- Compliance & Risk module with KYC/AML/Sanctions monitoring
- Settlement & Clearing module with DVP/FOP/PVP operations
- Settings with role-based permissions and enterprise controls
- Dark theme professional UI with Solace Bank branding
- HashRouter for static hosting compatibility

Co-Authored-By: Nakamoto, S <defi@defi-oracle.io>

.agents/skills/testing-transactflow/SKILL.md

@@ -0,0 +1,63 @@
+# Testing TransactFlow IDE
+
+## Overview
+TransactFlow is a React 18 + TypeScript + Vite app using @xyflow/react for a drag-and-drop graph editor. It deploys as a static frontend site (no backend).
+
+## Deployed URL
+https://dist-dgoompqy.devinapps.com
+
+## Local Dev
+```bash
+cd /home/ubuntu/repos/transaction-builder
+npm install
+npm run dev  # starts on localhost:5174
+```
+
+## Testing Approach
+
+### Tool Selection
+- **Browser tool**: Use for most UI interactions (clicking, typing, verifying DOM state via console). Works well for buttons, inputs, tabs, dropdowns.
+- **Playwright CDP**: Required for drag-and-drop testing. React Flow's drag-and-drop uses native browser events that synthetic DOM events cannot replicate. Connect via `chromium.connectOverCDP('http://127.0.0.1:<port>')`. The Chrome CDP port may be ephemeral — find it with `ss -tlnp 2>/dev/null | grep chrome`.
+- **Browser console**: Use `document.querySelector`/`querySelectorAll` for DOM assertions. Returns exact counts and text content for verification.
+
+### Key Patterns
+
+#### React Controlled Inputs
+React controlled inputs (`<input value={state} onChange={...}>`) cannot be cleared via `element.value = ''` + synthetic events. React manages the value internally. **Workaround**: Reload the page to reset state rather than fighting React's control.
+
+#### devinid Drift After DOM Changes
+The browser tool assigns `devinid` attributes based on current DOM state. After significant DOM changes (collapsing accordions, opening modals, switching tabs), cached devinids become invalid. **Workaround**: Re-query the HTML or reload the page after major DOM mutations to get fresh devinids.
+
+#### Keyboard Shortcuts (Ctrl+K, Ctrl+B, etc.)
+Browser automation tools may intercept `Ctrl+K` before it reaches the page. Synthetic `KeyboardEvent` dispatch on `window` also might not trigger React's state updates reliably. **Workaround**: Use the UI button that triggers the same action (e.g., Command Palette icon button instead of Ctrl+K).
+
+#### Command Palette
+The command palette overlay renders as `.command-palette` with input `.command-palette-input` and results `.command-palette-results`. Commands are `.command-item` elements with `.command-label` text. The palette input might not have a visible devinid in truncated HTML — search the full page HTML file for `placeholder="Type a command"`.
+
+### Component Architecture (for test assertions)
+- **TitleBar**: Mode selector (`.mode-selector` / `.mode-dropdown` / `.mode-option`), search bar, validate/simulate/execute buttons
+- **ActivityBar**: 10 `.activity-btn` icon buttons
+- **LeftPanel**: Search input, filter buttons (All/Favorites/Recent), `.component-category` with `.category-header` and `.category-items`, `.component-item` elements
+- **Canvas**: React Flow container, `.canvas-empty-content` (shown when `nodes.length === 0`), `.canvas-inspector` with node/connection counts
+- **RightPanel**: `.chat-header-agent` shows active agent name, `.agent-tab` buttons for switching, `.chat-message.user` and `.chat-message.agent` for messages, agent responses have 800ms delay
+- **BottomPanel**: `.bottom-tab` buttons, `.system-800-card` (6 cards), `.settlement-table` (4 rows), `.audit-content` with `.audit-entry` elements
+- **CommandPalette**: `.command-palette-overlay`, `.command-palette`, `.command-item`, `.command-label`
+
+### Test Data (hardcoded in source)
+- Default favorites: Transfer, Swap, KYC (Set in LeftPanel.tsx)
+- 7 component categories, 56 total components
+- 7 agent types: Builder, Compliance, Routing, ISO-20022, Settlement, Risk, Documentation
+- 6 system status cards in 800 System tab
+- 4 settlement queue rows (includes TX-2024-0847)
+- Audit trail contains SESSION_START and ENGINE_LOAD events
+- 4 session modes: Sandbox, Simulate, Live, Compliance Review
+- Builder agent responds with "Transfer" (when input doesn't contain "swap") or "Swap" (when it does)
+- Compliance agent responds with "No policy violations"
+
+## Devin Secrets Needed
+None — this is a purely frontend static site with no auth required.
+
+## Common Issues
+- If Chrome CDP port is not 29229, the browser was launched with `--remote-debugging-port=0` (random). Restart browser via `browser(action="restart")` and find the new port.
+- React Flow nodes require native browser drag events. Use Playwright's `dragTo()` method, not synthetic `DragEvent` dispatch.
+- After page reload, all React state resets (nodes cleared, chat history cleared, filters reset to defaults). Plan test sequences accordingly.