@aaronbassett/midnight-local-devnet 0.3.0 → 0.4.0

package/dist/cli/dashboard/html.js

@@ -126,7 +126,6 @@ export function generateDashboardHtml({ wsUrl }) {
       border: 1px solid var(--mn-border);
       border-radius: 12px;
       position: relative;
-      overflow: hidden;
     }
 
     .header::before {
@@ -138,6 +137,8 @@ export function generateDashboardHtml({ wsUrl }) {
       height: 300px;
       background: radial-gradient(circle, rgba(59, 59, 255, 0.12) 0%, transparent 70%);
       pointer-events: none;
+      border-radius: inherit;
+      clip-path: inset(0 0 0 0 round 12px);
     }
 
     .header-left {
@@ -553,6 +554,374 @@ export function generateDashboardHtml({ wsUrl }) {
       word-break: break-all;
     }
 
+    /* --- Modal Overlay --- */
+    .modal-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(9, 9, 15, 0.85);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 150;
+      backdrop-filter: blur(4px);
+    }
+
+    .modal-dialog {
+      background: var(--mn-surface);
+      border: 1px solid var(--mn-border);
+      border-radius: 12px;
+      padding: 24px;
+      width: 480px;
+      max-width: 90vw;
+      max-height: 80vh;
+      overflow-y: auto;
+      box-shadow: 0 16px 64px rgba(9, 9, 15, 0.8);
+      animation: fadeInUp 0.2s ease-out;
+    }
+
+    .modal-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 20px;
+    }
+
+    .modal-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--mn-text);
+    }
+
+    .modal-close {
+      background: none;
+      border: none;
+      color: var(--mn-text-secondary);
+      cursor: pointer;
+      padding: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 6px;
+      transition: all 0.15s;
+    }
+
+    .modal-close:hover {
+      color: var(--mn-text);
+      background: var(--mn-surface-alt);
+    }
+
+    /* --- Import Modal Tabs --- */
+    .modal-tabs {
+      display: flex;
+      gap: 0;
+      margin-bottom: 16px;
+      border-bottom: 1px solid var(--mn-border);
+    }
+
+    .modal-tab {
+      flex: 1;
+      padding: 10px 16px;
+      background: none;
+      border: none;
+      border-bottom: 2px solid transparent;
+      color: var(--mn-text-secondary);
+      font-family: 'Inter', sans-serif;
+      font-size: 13px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.15s;
+    }
+
+    .modal-tab:hover {
+      color: var(--mn-text);
+    }
+
+    .modal-tab.active {
+      color: var(--mn-accent);
+      border-bottom-color: var(--mn-accent);
+    }
+
+    .modal-field {
+      margin-bottom: 14px;
+    }
+
+    .modal-label {
+      display: block;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--mn-text-secondary);
+      margin-bottom: 6px;
+    }
+
+    .modal-input {
+      width: 100%;
+      padding: 8px 12px;
+      border-radius: 6px;
+      border: 1px solid var(--mn-border);
+      background: var(--mn-surface-alt);
+      color: var(--mn-text);
+      font-family: 'Inter', sans-serif;
+      font-size: 13px;
+      outline: none;
+      transition: border-color 0.15s;
+    }
+
+    .modal-input:focus {
+      border-color: var(--mn-accent);
+    }
+
+    .modal-input.mono {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 12px;
+    }
+
+    .modal-actions {
+      display: flex;
+      gap: 8px;
+      justify-content: flex-end;
+      margin-top: 20px;
+    }
+
+    .modal-textarea {
+      width: 100%;
+      padding: 10px 12px;
+      background: var(--mn-bg);
+      border: 1px solid var(--mn-border);
+      border-radius: 8px;
+      color: var(--mn-text);
+      font-size: 13px;
+      resize: vertical;
+      min-height: 60px;
+      box-sizing: border-box;
+    }
+
+    .modal-textarea:focus {
+      outline: none;
+      border-color: var(--mn-accent);
+    }
+
+    .mnemonic-display {
+      padding: 14px;
+      background: var(--mn-bg);
+      border: 1px solid var(--mn-border);
+      border-radius: 8px;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 13px;
+      line-height: 1.8;
+      color: var(--mn-text);
+      word-spacing: 6px;
+      user-select: all;
+    }
+
+    .mnemonic-warning {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      padding: 10px 12px;
+      background: rgba(234, 179, 8, 0.08);
+      border: 1px solid rgba(234, 179, 8, 0.25);
+      border-radius: 8px;
+      font-size: 12px;
+      color: var(--mn-warning);
+      margin-bottom: 14px;
+    }
+
+    .file-drop-zone {
+      position: relative;
+      border: 2px dashed var(--mn-border);
+      border-radius: 8px;
+      padding: 24px;
+      text-align: center;
+      cursor: pointer;
+      transition: border-color 0.15s, background 0.15s;
+    }
+
+    .file-drop-zone:hover {
+      border-color: var(--mn-accent);
+      background: rgba(59, 59, 255, 0.04);
+    }
+
+    .file-drop-zone input[type="file"] {
+      position: absolute;
+      inset: 0;
+      opacity: 0;
+      cursor: pointer;
+    }
+
+    .file-preview-table {
+      width: 100%;
+      font-size: 12px;
+      border-collapse: collapse;
+      margin-top: 10px;
+    }
+
+    .file-preview-table th,
+    .file-preview-table td {
+      text-align: left;
+      padding: 6px 8px;
+      border-bottom: 1px solid var(--mn-border);
+    }
+
+    .file-preview-table th {
+      color: var(--mn-text-muted);
+      font-weight: 500;
+    }
+
+    .file-preview-table td.mono {
+      font-family: 'JetBrains Mono', monospace;
+    }
+
+    /* --- Wallet Selector Dropdown --- */
+    .wallet-selector {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex: 1;
+      min-width: 0;
+    }
+
+    .wallet-select {
+      flex: 1;
+      min-width: 0;
+      padding: 6px 10px;
+      border-radius: 6px;
+      border: 1px solid var(--mn-border);
+      background: var(--mn-surface-alt);
+      color: var(--mn-text);
+      font-family: 'Inter', sans-serif;
+      font-size: 13px;
+      cursor: pointer;
+      outline: none;
+      transition: border-color 0.15s;
+    }
+
+    .wallet-select:focus {
+      border-color: var(--mn-accent);
+    }
+
+    /* --- Inline Edit Input --- */
+    .inline-edit-input {
+      padding: 4px 8px;
+      border-radius: 4px;
+      border: 1px solid var(--mn-accent);
+      background: var(--mn-surface-alt);
+      color: var(--mn-text);
+      font-family: 'Inter', sans-serif;
+      font-size: 13px;
+      outline: none;
+      width: 180px;
+    }
+
+    /* --- Icon Button --- */
+    .icon-btn {
+      background: none;
+      border: none;
+      color: var(--mn-text-muted);
+      cursor: pointer;
+      padding: 4px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+      transition: all 0.15s;
+    }
+
+    .icon-btn:hover {
+      color: var(--mn-text);
+      background: var(--mn-surface-alt);
+    }
+
+    .icon-btn.danger:hover {
+      color: var(--mn-error);
+      background: rgba(239, 68, 68, 0.1);
+    }
+
+    /* --- Copy Button --- */
+    .copy-btn {
+      background: none;
+      border: none;
+      color: var(--mn-text-muted);
+      cursor: pointer;
+      padding: 4px 6px;
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      border-radius: 4px;
+      font-family: 'Inter', sans-serif;
+      font-size: 11px;
+      transition: all 0.15s;
+    }
+
+    .copy-btn:hover {
+      color: var(--mn-text);
+      background: var(--mn-surface-alt);
+    }
+
+    .copy-btn.copied {
+      color: var(--mn-success);
+    }
+
+    /* --- Pulsing Sync Animation --- */
+    @keyframes syncPulse {
+      0%, 100% { box-shadow: 0 0 0 0 var(--mn-accent-glow); }
+      50% { box-shadow: 0 0 12px 4px var(--mn-accent-glow); }
+    }
+
+    .sync-indicator {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 12px;
+      color: var(--mn-text-secondary);
+    }
+
+    .sync-spinner {
+      width: 14px;
+      height: 14px;
+      border: 2px solid var(--mn-border);
+      border-top-color: var(--mn-accent);
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+
+    .sync-glow {
+      animation: syncPulse 2s ease-in-out infinite;
+      border-radius: 12px;
+    }
+
+    /* --- Confirm Delete Inline Prompt --- */
+    .confirm-delete {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 10px;
+      background: var(--mn-surface-alt);
+      border: 1px solid rgba(239, 68, 68, 0.3);
+      border-radius: 6px;
+      font-size: 12px;
+      color: var(--mn-text-secondary);
+      animation: fadeInUp 0.15s ease-out;
+    }
+
+    .confirm-delete .btn {
+      padding: 4px 10px;
+      font-size: 11px;
+    }
+
+    /* --- Wallet Card Header Row --- */
+    .wallet-header-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 16px;
+    }
+
+    .wallet-address-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
     /* --- Connection Overlay --- */
     .connection-overlay {
       position: fixed;
@@ -622,6 +991,98 @@ export function generateDashboardHtml({ wsUrl }) {
     .toast.error { border-left: 3px solid var(--mn-error); }
     .toast.fade-out { animation: fadeOut 0.3s ease-out forwards; }
 
+    /* --- Card Footer (server time) --- */
+    .card-footer {
+      color: var(--mn-text-muted);
+      font-size: 11px;
+      text-align: right;
+      margin-top: 12px;
+    }
+
+    /* --- Disabled Button --- */
+    .btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    .btn-spinner {
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      border: 2px solid var(--mn-border);
+      border-top-color: currentColor;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+      flex-shrink: 0;
+    }
+
+    /* --- Polling Settings Popover --- */
+    .settings-wrapper {
+      position: relative;
+    }
+
+    .settings-popover {
+      position: absolute;
+      top: calc(100% + 8px);
+      right: 0;
+      width: 280px;
+      background: var(--mn-surface);
+      border: 1px solid var(--mn-border-bright);
+      border-radius: 10px;
+      padding: 16px;
+      z-index: 50;
+      box-shadow: 0 8px 32px rgba(9, 9, 15, 0.6);
+      animation: fadeInUp 0.15s ease-out;
+    }
+
+    .settings-title {
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--mn-text);
+      margin-bottom: 12px;
+    }
+
+    .settings-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 6px 0;
+    }
+
+    .settings-row:not(:last-child) {
+      border-bottom: 1px solid var(--mn-border);
+    }
+
+    .settings-label {
+      font-size: 12px;
+      color: var(--mn-text-secondary);
+    }
+
+    .settings-input {
+      width: 64px;
+      padding: 4px 8px;
+      border-radius: 4px;
+      border: 1px solid var(--mn-border);
+      background: var(--mn-surface-alt);
+      color: var(--mn-text);
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 12px;
+      text-align: center;
+      outline: none;
+      transition: border-color 0.15s;
+    }
+
+    .settings-input:focus {
+      border-color: var(--mn-accent);
+    }
+
+    .settings-unit {
+      font-size: 11px;
+      color: var(--mn-text-muted);
+      margin-left: 4px;
+    }
+
     /* --- Responsive --- */
     @media (max-width: 768px) {
       #app { padding: 12px; }
@@ -638,7 +1099,7 @@ export function generateDashboardHtml({ wsUrl }) {
 
   <script type="module">
     import { h, render } from 'preact';
-    import { useState, useEffect, useRef, useCallback } from 'preact/hooks';
+    import { useState, useEffect, useRef, useCallback, useMemo } from 'preact/hooks';
     import { html } from 'htm/preact';
 
     // --- Lucide icon SVGs (inline, stroke-based) ---
@@ -653,6 +1114,15 @@ export function generateDashboardHtml({ wsUrl }) {
       activity: html\`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"/></svg>\`,
       terminal: html\`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/></svg>\`,
       search: html\`<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>\`,
+      copy: html\`<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>\`,
+      pencil: html\`<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/></svg>\`,
+      trash: html\`<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>\`,
+      plus: html\`<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>\`,
+      x: html\`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>\`,
+      settings: html\`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>\`,
+      refresh: html\`<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>\`,
+      upload: html\`<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>\`,
+      key: html\`<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4"/><path d="m21 2-9.3 9.3"/><circle cx="7.5" cy="15.5" r="5.5"/></svg>\`,
     };
 
     // --- WebSocket URL (injected at generation time) ---
@@ -687,6 +1157,19 @@ export function generateDashboardHtml({ wsUrl }) {
       return 'var(--mn-success)';
     }
 
+    function formatTime(isoString) {
+      if (!isoString) return '--:--:--';
+      try {
+        const d = new Date(isoString);
+        if (isNaN(d.getTime())) return '--:--:--';
+        return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false });
+      } catch (e) {
+        return '--:--:--';
+      }
+    }
+
+    const POLLING_KEY = 'mn-polling-config';
+
     // --- Default state ---
     const defaultState = {
       node: { chain: null, name: null, version: null, blockHeight: null, avgBlockTime: null, peers: null, syncing: null },
@@ -701,6 +1184,8 @@ export function generateDashboardHtml({ wsUrl }) {
       containers: [],
       logs: [],
       networkStatus: 'unknown',
+      walletSyncStatus: 'idle',
+      serverTime: '',
     };
 
     // --- Toast component ---
@@ -731,9 +1216,102 @@ export function generateDashboardHtml({ wsUrl }) {
       \`;
     }
 
+    // --- PollingSettings ---
+    function PollingSettings({ sendMessage }) {
+      const [open, setOpen] = useState(false);
+      const [config, setConfig] = useState(() => {
+        try {
+          const raw = localStorage.getItem(POLLING_KEY);
+          if (raw) return JSON.parse(raw);
+        } catch (e) { /* ignore */ }
+        return { node: 5, indexer: 5, proofServer: 5 };
+      });
+
+      // Send saved polling config on mount
+      useEffect(() => {
+        const saved = config;
+        ['node', 'indexer', 'proofServer'].forEach(service => {
+          if (saved[service] && saved[service] !== 5) {
+            sendMessage({ type: 'command', action: 'set-polling', service, interval: saved[service] * 1000 });
+          }
+        });
+      }, []);
+
+      const handleChange = useCallback((service, value) => {
+        const num = Math.max(1, Math.min(60, parseInt(value, 10) || 5));
+        setConfig(prev => {
+          const updated = { ...prev, [service]: num };
+          localStorage.setItem(POLLING_KEY, JSON.stringify(updated));
+          return updated;
+        });
+        sendMessage({ type: 'command', action: 'set-polling', service, interval: num * 1000 });
+      }, [sendMessage]);
+
+      return html\`
+        <div class="settings-wrapper">
+          <button class="btn" onClick=\${() => setOpen(!open)} title="Polling Settings">
+            \${icons.settings}
+          </button>
+          \${open ? html\`
+            <div class="settings-popover">
+              <div class="settings-title">Polling Intervals</div>
+              <div class="settings-row">
+                <span class="settings-label">Node</span>
+                <div>
+                  <input class="settings-input" type="number" min="1" max="60"
+                         value=\${config.node}
+                         onChange=\${e => handleChange('node', e.target.value)} />
+                  <span class="settings-unit">sec</span>
+                </div>
+              </div>
+              <div class="settings-row">
+                <span class="settings-label">Indexer</span>
+                <div>
+                  <input class="settings-input" type="number" min="1" max="60"
+                         value=\${config.indexer}
+                         onChange=\${e => handleChange('indexer', e.target.value)} />
+                  <span class="settings-unit">sec</span>
+                </div>
+              </div>
+              <div class="settings-row">
+                <span class="settings-label">Proof Server</span>
+                <div>
+                  <input class="settings-input" type="number" min="1" max="60"
+                         value=\${config.proofServer}
+                         onChange=\${e => handleChange('proofServer', e.target.value)} />
+                  <span class="settings-unit">sec</span>
+                </div>
+              </div>
+            </div>
+          \` : null}
+        </div>
+      \`;
+    }
+
     // --- Header ---
-    function Header({ networkStatus, onStart, onStop }) {
+    function Header({ networkStatus, onStart, onStop, sendMessage }) {
       const statusLabel = networkStatus.charAt(0).toUpperCase() + networkStatus.slice(1);
+
+      const renderButtons = () => {
+        if (networkStatus === 'running') {
+          return html\`<button class="btn btn-danger" onClick=\${onStop}>\${icons.square} Stop</button>\`;
+        }
+        if (networkStatus === 'stopped') {
+          return html\`<button class="btn btn-primary" onClick=\${onStart}>\${icons.play} Start</button>\`;
+        }
+        if (networkStatus === 'starting') {
+          return html\`<button class="btn btn-primary" disabled><span class="btn-spinner"></span> Starting...</button>\`;
+        }
+        if (networkStatus === 'stopping') {
+          return html\`<button class="btn btn-danger" disabled><span class="btn-spinner"></span> Stopping...</button>\`;
+        }
+        // unknown — show both
+        return html\`
+          <button class="btn btn-primary" onClick=\${onStart}>\${icons.play} Start</button>
+          <button class="btn btn-danger" onClick=\${onStop}>\${icons.square} Stop</button>
+        \`;
+      };
+
       return html\`
         <div class="header fade-in">
           <div class="header-left">
@@ -744,15 +1322,15 @@ export function generateDashboardHtml({ wsUrl }) {
             </div>
           </div>
           <div class="header-actions">
-            <button class="btn btn-primary" onClick=\${onStart}>\${icons.play} Start</button>
-            <button class="btn btn-danger" onClick=\${onStop}>\${icons.square} Stop</button>
+            \${renderButtons()}
+            <\${PollingSettings} sendMessage=\${sendMessage} />
           </div>
         </div>
       \`;
     }
 
     // --- NodeCard ---
-    function NodeCard({ node, health }) {
+    function NodeCard({ node, health, serverTime }) {
       const blockTimeStr = node.avgBlockTime != null ? (node.avgBlockTime / 1000).toFixed(1) + 's' : '--';
       return html\`
         <div class="card fade-in" style="animation-delay: 0ms">
@@ -779,12 +1357,13 @@ export function generateDashboardHtml({ wsUrl }) {
               <span class="stat-row-value">\${node.version || '--'}</span>
             </div>
           </div>
+          <div class="card-footer">\${formatTime(serverTime)}</div>
         </div>
       \`;
     }
 
     // --- IndexerCard ---
-    function IndexerCard({ indexer, health }) {
+    function IndexerCard({ indexer, health, serverTime }) {
       return html\`
         <div class="card fade-in" style="animation-delay: 150ms">
           <div class="card-header">
@@ -802,15 +1381,19 @@ export function generateDashboardHtml({ wsUrl }) {
               <span class="stat-row-value">\${formatMs(indexer.responseTime)}</span>
             </div>
           </div>
+          <div class="card-footer">\${formatTime(serverTime)}</div>
         </div>
       \`;
     }
 
     // --- ProofServerCard ---
-    function ProofServerCard({ proofServer, health }) {
+    function ProofServerCard({ proofServer, health, serverTime }) {
       const capacity = proofServer.jobCapacity || 1;
       const processing = proofServer.jobsProcessing || 0;
       const pct = Math.min(100, (processing / capacity) * 100);
+      const proofVersionsDisplay = proofServer.proofVersions && proofServer.proofVersions.length > 0
+        ? proofServer.proofVersions.join(', ')
+        : 'None';
       return html\`
         <div class="card fade-in" style="animation-delay: 300ms">
           <div class="card-header">
@@ -833,41 +1416,548 @@ export function generateDashboardHtml({ wsUrl }) {
           </div>
           <div style="margin-top: 10px">
             <div class="stat-row">
-              <span class="stat-row-label">Version</span>
+              <span class="stat-row-label">Server Version</span>
               <span class="stat-row-value">\${proofServer.version || '--'}</span>
             </div>
+            <div class="stat-row">
+              <span class="stat-row-label">Proof Versions</span>
+              <span class="stat-row-value">\${proofVersionsDisplay}</span>
+            </div>
+          </div>
+          <div class="card-footer">\${formatTime(serverTime)}</div>
+        </div>
+      \`;
+    }
+
+    // --- localStorage helpers for wallet list ---
+    const WALLETS_KEY = 'mn-wallets';
+
+    function loadWallets() {
+      try {
+        const raw = localStorage.getItem(WALLETS_KEY);
+        if (raw) return JSON.parse(raw);
+      } catch (e) { /* ignore */ }
+      return [];
+    }
+
+    function saveWallets(wallets) {
+      localStorage.setItem(WALLETS_KEY, JSON.stringify(wallets));
+    }
+
+    // --- ImportWalletModal ---
+    function ImportWalletModal({ onClose, onImport, sendMessage, deriveResult, deriveAccountsResult }) {
+      const [tab, setTab] = useState('mnemonic');
+      const [mnemonic, setMnemonic] = useState('');
+      const [address, setAddress] = useState('');
+      const [displayName, setDisplayName] = useState('');
+      const [deriving, setDeriving] = useState(false);
+      const [derivedAddress, setDerivedAddress] = useState(null);
+
+      // File import state
+      const [fileAccounts, setFileAccounts] = useState(null);
+      const [fileError, setFileError] = useState(null);
+      const [derivingFile, setDerivingFile] = useState(false);
+      const [fileResults, setFileResults] = useState(null);
+
+      // Watch for derive-result coming in
+      useEffect(() => {
+        if (deriveResult && deriving) {
+          setDerivedAddress(deriveResult);
+          setDeriving(false);
+        }
+      }, [deriveResult, deriving]);
+
+      // Watch for derive-accounts-result
+      useEffect(() => {
+        if (deriveAccountsResult && derivingFile) {
+          setFileResults(deriveAccountsResult);
+          setDerivingFile(false);
+        }
+      }, [deriveAccountsResult, derivingFile]);
+
+      const handleDerive = useCallback(() => {
+        if (!mnemonic.trim()) return;
+        setDeriving(true);
+        setDerivedAddress(null);
+        sendMessage({ type: 'command', action: 'derive-address', mnemonic: mnemonic.trim() });
+      }, [mnemonic, sendMessage]);
+
+      const handleFileSelect = useCallback((e) => {
+        const file = e.target.files[0];
+        if (!file) return;
+        setFileError(null);
+        setFileResults(null);
+        const reader = new FileReader();
+        reader.onload = (ev) => {
+          try {
+            const data = JSON.parse(ev.target.result);
+            if (!data.accounts || !Array.isArray(data.accounts)) {
+              setFileError('Invalid format: expected { "accounts": [...] }');
+              return;
+            }
+            const withMnemonic = data.accounts.filter(a => a.mnemonic);
+            if (withMnemonic.length === 0) {
+              setFileError('No accounts with mnemonic phrases found');
+              return;
+            }
+            setFileAccounts(withMnemonic);
+          } catch (err) {
+            setFileError('Failed to parse JSON: ' + err.message);
+          }
+        };
+        reader.readAsText(file);
+      }, []);
+
+      const handleDeriveFile = useCallback(() => {
+        if (!fileAccounts) return;
+        setDerivingFile(true);
+        setFileResults(null);
+        sendMessage({
+          type: 'command',
+          action: 'derive-accounts',
+          accounts: fileAccounts.map(a => ({ name: a.name, mnemonic: a.mnemonic })),
+        });
+      }, [fileAccounts, sendMessage]);
+
+      const handleImportFile = useCallback(() => {
+        if (!fileResults) return;
+        for (const account of fileResults) {
+          onImport({
+            id: crypto.randomUUID(),
+            publicKey: account.address,
+            displayName: account.name || 'Imported Wallet',
+            hasMnemonic: true,
+          });
+        }
+        onClose();
+      }, [fileResults, onImport, onClose]);
+
+      const handleImport = useCallback(() => {
+        if (tab === 'mnemonic') {
+          if (!derivedAddress) return;
+          onImport({
+            id: crypto.randomUUID(),
+            publicKey: derivedAddress,
+            displayName: displayName.trim() || 'Imported Wallet',
+            hasMnemonic: true,
+          });
+        } else {
+          if (!address.trim()) return;
+          onImport({
+            id: crypto.randomUUID(),
+            publicKey: address.trim(),
+            displayName: displayName.trim() || 'Imported Wallet',
+          });
+        }
+        onClose();
+      }, [tab, derivedAddress, address, displayName, onImport, onClose]);
+
+      return html\`
+        <div class="modal-overlay" onClick=\${(e) => { if (e.target === e.currentTarget) onClose(); }}>
+          <div class="modal-dialog">
+            <div class="modal-header">
+              <span class="modal-title">Import Wallet</span>
+              <button class="modal-close" onClick=\${onClose}>\${icons.x}</button>
+            </div>
+            <div class="modal-tabs">
+              <button class="modal-tab \${tab === 'file' ? 'active' : ''}" onClick=\${() => setTab('file')}>File</button>
+              <button class="modal-tab \${tab === 'mnemonic' ? 'active' : ''}" onClick=\${() => { setTab('mnemonic'); setDerivedAddress(null); }}>Mnemonic</button>
+              <button class="modal-tab \${tab === 'address' ? 'active' : ''}" onClick=\${() => setTab('address')}>Address</button>
+            </div>
+            \${tab === 'file' ? html\`
+              <div class="modal-field">
+                <label class="modal-label">accounts.json File</label>
+                <div class="file-drop-zone">
+                  <input type="file" accept=".json,application/json" onChange=\${handleFileSelect} />
+                  <div style="color: var(--mn-text-muted); font-size: 13px;">
+                    \${icons.upload} Click to select accounts.json
+                  </div>
+                </div>
+              </div>
+              \${fileError ? html\`
+                <div style="color: var(--mn-error); font-size: 12px; margin-bottom: 10px;">\${fileError}</div>
+              \` : null}
+              \${fileAccounts && !fileResults ? html\`
+                <div style="margin-bottom: 14px;">
+                  <div style="font-size: 12px; color: var(--mn-text-muted); margin-bottom: 8px;">
+                    Found \${fileAccounts.length} account\${fileAccounts.length !== 1 ? 's' : ''} with mnemonics
+                  </div>
+                  <table class="file-preview-table">
+                    <thead><tr><th>Name</th><th>Mnemonic</th></tr></thead>
+                    <tbody>
+                      \${fileAccounts.map(a => html\`
+                        <tr>
+                          <td>\${a.name}</td>
+                          <td class="mono" style="color: var(--mn-text-muted);">\${a.mnemonic.split(' ').slice(0, 3).join(' ')}...</td>
+                        </tr>
+                      \`)}
+                    </tbody>
+                  </table>
+                  <div style="margin-top: 12px;">
+                    <button class="btn btn-primary" onClick=\${handleDeriveFile} disabled=\${derivingFile}>
+                      \${derivingFile ? html\`<span class="btn-spinner"></span> Deriving...
+                      \` : 'Derive Addresses'}
+                    </button>
+                  </div>
+                </div>
+              \` : null}
+              \${fileResults ? html\`
+                <div style="margin-bottom: 14px;">
+                  <div style="font-size: 12px; color: var(--mn-success); margin-bottom: 8px;">
+                    Derived \${fileResults.length} address\${fileResults.length !== 1 ? 'es' : ''}
+                  </div>
+                  <table class="file-preview-table">
+                    <thead><tr><th>Name</th><th>Address</th></tr></thead>
+                    <tbody>
+                      \${fileResults.map(a => html\`
+                        <tr>
+                          <td>\${a.name}</td>
+                          <td class="mono">\${truncateAddress(a.address)}</td>
+                        </tr>
+                      \`)}
+                    </tbody>
+                  </table>
+                </div>
+              \` : null}
+              <div class="modal-actions">
+                <button class="btn" onClick=\${onClose}>Cancel</button>
+                <button class="btn btn-primary" onClick=\${handleImportFile}
+                        disabled=\${!fileResults}>
+                  Import \${fileResults ? fileResults.length : ''} Wallet\${fileResults && fileResults.length !== 1 ? 's' : ''}
+                </button>
+              </div>
+            \` : tab === 'mnemonic' ? html\`
+              <div class="modal-field">
+                <label class="modal-label">Mnemonic Phrase</label>
+                <input class="modal-input mono" type="text" placeholder="Enter mnemonic words..."
+                       value=\${mnemonic} onInput=\${e => setMnemonic(e.target.value)} />
+              </div>
+              <div style="margin-bottom: 14px">
+                <button class="btn" onClick=\${handleDerive} disabled=\${deriving || !mnemonic.trim()}>
+                  \${deriving ? 'Deriving...' : 'Derive Address'}
+                </button>
+                \${derivedAddress ? html\`
+                  <div style="margin-top: 8px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--mn-success); word-break: break-all;">
+                    Derived: \${truncateAddress(derivedAddress)}
+                  </div>
+                \` : null}
+              </div>
+              <div class="modal-field">
+                <label class="modal-label">Display Name (optional)</label>
+                <input class="modal-input" type="text" placeholder="e.g. My Wallet"
+                       value=\${displayName} onInput=\${e => setDisplayName(e.target.value)} />
+              </div>
+              <div class="modal-actions">
+                <button class="btn" onClick=\${onClose}>Cancel</button>
+                <button class="btn btn-primary" onClick=\${handleImport}
+                        disabled=\${!derivedAddress}>
+                  Import
+                </button>
+              </div>
+            \` : html\`
+              <div class="modal-field">
+                <label class="modal-label">Public Key / Address</label>
+                <input class="modal-input mono" type="text" placeholder="Paste public key..."
+                       value=\${address} onInput=\${e => setAddress(e.target.value)} />
+              </div>
+              <div class="modal-field">
+                <label class="modal-label">Display Name (optional)</label>
+                <input class="modal-input" type="text" placeholder="e.g. My Wallet"
+                       value=\${displayName} onInput=\${e => setDisplayName(e.target.value)} />
+              </div>
+              <div class="modal-actions">
+                <button class="btn" onClick=\${onClose}>Cancel</button>
+                <button class="btn btn-primary" onClick=\${handleImport}
+                        disabled=\${!address.trim()}>
+                  Import
+                </button>
+              </div>
+            \`}
+          </div>
+        </div>
+      \`;
+    }
+
+    // --- GenerateWalletModal ---
+    function GenerateWalletModal({ onClose, onImport, sendMessage, generateResult }) {
+      const [generating, setGenerating] = useState(false);
+      const [result, setResult] = useState(null);
+      const [copied, setCopied] = useState(false);
+
+      useEffect(() => {
+        if (generateResult && generating) {
+          setResult(generateResult);
+          setGenerating(false);
+        }
+      }, [generateResult, generating]);
+
+      const handleGenerate = useCallback(() => {
+        setGenerating(true);
+        setResult(null);
+        setCopied(false);
+        sendMessage({ type: 'command', action: 'generate-wallet' });
+      }, [sendMessage]);
+
+      // Generate on mount
+      useEffect(() => { handleGenerate(); }, []);
+
+      const handleCopy = useCallback(() => {
+        if (!result) return;
+        navigator.clipboard.writeText(result.mnemonic).then(() => {
+          setCopied(true);
+          setTimeout(() => setCopied(false), 2000);
+        }).catch(() => {});
+      }, [result]);
+
+      const handleAdd = useCallback(() => {
+        if (!result) return;
+        onImport({
+          id: crypto.randomUUID(),
+          publicKey: result.address,
+          displayName: 'Generated Wallet',
+          hasMnemonic: true,
+        });
+        onClose();
+      }, [result, onImport, onClose]);
+
+      return html\`
+        <div class="modal-overlay" onClick=\${(e) => { if (e.target === e.currentTarget) onClose(); }}>
+          <div class="modal-dialog">
+            <div class="modal-header">
+              <span class="modal-title">Generate Wallet</span>
+              <button class="modal-close" onClick=\${onClose}>\${icons.x}</button>
+            </div>
+            \${generating ? html\`
+              <div style="text-align: center; padding: 24px 0;">
+                <span class="btn-spinner" style="width: 20px; height: 20px;"></span>
+                <div style="margin-top: 10px; color: var(--mn-text-muted); font-size: 13px;">Generating wallet...</div>
+              </div>
+            \` : result ? html\`
+              <div class="mnemonic-warning">
+                <span style="font-size: 16px; flex-shrink: 0;">!</span>
+                <span>Save this mnemonic phrase securely. It will not be shown again and cannot be recovered.</span>
+              </div>
+              <div class="modal-field">
+                <label class="modal-label">Mnemonic Phrase</label>
+                <div class="mnemonic-display">\${result.mnemonic}</div>
+              </div>
+              <div class="modal-field">
+                <label class="modal-label">Derived Address</label>
+                <div style="font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--mn-success); word-break: break-all;">
+                  \${result.address}
+                </div>
+              </div>
+              <div class="modal-actions" style="justify-content: space-between;">
+                <div style="display: flex; gap: 8px;">
+                  <button class="btn" onClick=\${handleCopy}>
+                    \${icons.copy} \${copied ? 'Copied!' : 'Copy Mnemonic'}
+                  </button>
+                  <button class="btn" onClick=\${handleGenerate}>
+                    \${icons.refresh} New
+                  </button>
+                </div>
+                <button class="btn btn-primary" onClick=\${handleAdd}>Add to Wallets</button>
+              </div>
+            \` : null}
           </div>
         </div>
       \`;
     }
 
     // --- WalletCard ---
-    function WalletCard({ wallet }) {
+    function WalletCard({ wallet, walletSyncStatus, sendMessage, onOpenImportModal, onOpenGenerateModal, importHandlerRef }) {
+      // Load wallets from localStorage, ensuring master wallet is always first
+      const [wallets, setWallets] = useState(() => {
+        const stored = loadWallets();
+        const hasMaster = stored.some(w => w.id === 'master');
+        if (!hasMaster) {
+          const masterEntry = { id: 'master', publicKey: wallet.address || '', displayName: 'Master Wallet' };
+          const all = [masterEntry, ...stored];
+          saveWallets(all);
+          return all;
+        }
+        return stored;
+      });
+
+      const [selectedId, setSelectedId] = useState('master');
+      const [editingId, setEditingId] = useState(null);
+      const [editName, setEditName] = useState('');
+      const [deletingId, setDeletingId] = useState(null);
+      const [copied, setCopied] = useState(false);
+
+      // Keep master wallet address in sync with server state
+      useEffect(() => {
+        if (wallet.address) {
+          setWallets(prev => {
+            const updated = prev.map(w => w.id === 'master' ? { ...w, publicKey: wallet.address } : w);
+            saveWallets(updated);
+            return updated;
+          });
+        }
+      }, [wallet.address]);
+
+      const selectedWallet = useMemo(() => {
+        return wallets.find(w => w.id === selectedId) || wallets[0] || null;
+      }, [wallets, selectedId]);
+
+      const isMaster = selectedWallet && selectedWallet.id === 'master';
+
+      const handleImportWallet = useCallback((newWallet) => {
+        setWallets(prev => {
+          const updated = [...prev, newWallet];
+          saveWallets(updated);
+          return updated;
+        });
+        setSelectedId(newWallet.id);
+      }, []);
+
+      // Expose import handler to parent via ref
+      useEffect(() => {
+        if (importHandlerRef) importHandlerRef.current = handleImportWallet;
+      }, [importHandlerRef, handleImportWallet]);
+
+      const handleStartEdit = useCallback((w) => {
+        setEditingId(w.id);
+        setEditName(w.displayName);
+      }, []);
+
+      const handleSaveEdit = useCallback(() => {
+        if (!editingId) return;
+        setWallets(prev => {
+          const updated = prev.map(w => w.id === editingId ? { ...w, displayName: editName.trim() || w.displayName } : w);
+          saveWallets(updated);
+          return updated;
+        });
+        setEditingId(null);
+      }, [editingId, editName]);
+
+      const handleDelete = useCallback((id) => {
+        setWallets(prev => {
+          const updated = prev.filter(w => w.id !== id);
+          saveWallets(updated);
+          return updated;
+        });
+        setDeletingId(null);
+        if (selectedId === id) setSelectedId('master');
+      }, [selectedId]);
+
+      const handleCopy = useCallback((text) => {
+        navigator.clipboard.writeText(text).then(() => {
+          setCopied(true);
+          setTimeout(() => setCopied(false), 1500);
+        }).catch(() => {});
+      }, []);
+
+      const showBalances = isMaster && walletSyncStatus !== 'syncing';
+      const displayAddress = selectedWallet ? selectedWallet.publicKey : null;
+
       return html\`
-        <div class="card full-width fade-in" style="animation-delay: 450ms">
+        <div class="card full-width fade-in \${walletSyncStatus === 'syncing' ? 'sync-glow' : ''}" style="animation-delay: 450ms">
           <div class="card-header">
             <div class="card-title">
               \${icons.wallet}
               Wallet
+              \${walletSyncStatus === 'syncing' ? html\`
+                <span class="sync-indicator">
+                  <span class="sync-spinner"></span>
+                  Syncing...
+                </span>
+              \` : null}
             </div>
             <span class="card-health-dot \${wallet.connected ? 'healthy' : 'unhealthy'}"></span>
           </div>
-          <div class="wallet-grid">
-            <div class="wallet-address" title=\${wallet.address || ''}>\${wallet.address ? truncateAddress(wallet.address) : 'No wallet connected'}</div>
-            <div class="balance-item">
-              <div class="balance-value">\${formatBalance(wallet.unshielded)}</div>
-              <div class="balance-label">NIGHT (Unshielded)</div>
+
+          <div class="wallet-header-row">
+            <div class="wallet-selector">
+              \${editingId === (selectedWallet && selectedWallet.id) ? html\`
+                <input class="inline-edit-input" type="text" value=\${editName}
+                       onInput=\${e => setEditName(e.target.value)}
+                       onBlur=\${handleSaveEdit}
+                       onKeyDown=\${e => { if (e.key === 'Enter') handleSaveEdit(); if (e.key === 'Escape') setEditingId(null); }}
+                       autofocus />
+              \` : html\`
+                <select class="wallet-select" value=\${selectedId}
+                        onChange=\${e => { setSelectedId(e.target.value); setDeletingId(null); }}>
+                  \${wallets.map(w => html\`
+                    <option key=\${w.id} value=\${w.id}>\${w.displayName}</option>
+                  \`)}
+                </select>
+              \`}
+              <button class="icon-btn" title="Rename wallet" onClick=\${() => selectedWallet && handleStartEdit(selectedWallet)}>
+                \${icons.pencil}
+              </button>
+              \${selectedWallet && selectedWallet.id !== 'master' ? html\`
+                <button class="icon-btn danger" title="Delete wallet" onClick=\${() => setDeletingId(selectedWallet.id)}>
+                  \${icons.trash}
+                </button>
+              \` : null}
+            </div>
+            <div style="display: flex; gap: 6px;">
+              <button class="btn" onClick=\${() => sendMessage({ type: 'command', action: 'sync-wallet' })}
+                      disabled=\${walletSyncStatus === 'syncing'} title="Sync wallet balances">
+                \${icons.refresh} Sync
+              </button>
+              <button class="btn" onClick=\${onOpenGenerateModal} title="Generate new wallet">
+                \${icons.key} Generate
+              </button>
+              <button class="btn" onClick=\${onOpenImportModal} title="Import wallet">
+                \${icons.plus} Import
+              </button>
             </div>
-            <div class="balance-item">
-              <div class="balance-value">\${formatBalance(wallet.shielded)}</div>
-              <div class="balance-label">NIGHT (Shielded)</div>
+          </div>
+
+          \${deletingId ? html\`
+            <div class="confirm-delete">
+              <span>Delete this wallet?</span>
+              <button class="btn btn-danger" onClick=\${() => handleDelete(deletingId)}>Yes, delete</button>
+              <button class="btn" onClick=\${() => setDeletingId(null)}>Cancel</button>
             </div>
-            <div class="balance-item">
-              <div class="balance-value">\${formatBalance(wallet.dust)}</div>
-              <div class="balance-label">DUST</div>
+          \` : null}
+
+          <div class="wallet-grid">
+            <div class="wallet-address">
+              <div class="wallet-address-row">
+                <span class="mono" title=\${displayAddress || ''} style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;">
+                  \${displayAddress ? truncateAddress(displayAddress) : 'No wallet connected'}
+                </span>
+                \${displayAddress ? html\`
+                  <button class="copy-btn \${copied ? 'copied' : ''}" onClick=\${() => handleCopy(displayAddress)}>
+                    \${icons.copy}
+                    \${copied ? 'Copied!' : 'Copy'}
+                  </button>
+                \` : null}
+              </div>
             </div>
+            \${showBalances ? html\`
+              <div class="balance-item">
+                <div class="balance-value">\${formatBalance(wallet.unshielded)}</div>
+                <div class="balance-label">NIGHT (Unshielded)</div>
+              </div>
+              <div class="balance-item">
+                <div class="balance-value">\${formatBalance(wallet.shielded)}</div>
+                <div class="balance-label">NIGHT (Shielded)</div>
+              </div>
+              <div class="balance-item">
+                <div class="balance-value">\${formatBalance(wallet.dust)}</div>
+                <div class="balance-label">DUST</div>
+              </div>
+            \` : isMaster && walletSyncStatus === 'syncing' ? html\`
+              <div class="balance-item" style="grid-column: 1 / -1; text-align: center;">
+                <div class="sync-indicator" style="justify-content: center;">
+                  <span class="sync-spinner"></span>
+                  Syncing balances...
+                </div>
+              </div>
+            \` : !isMaster ? html\`
+              <div class="balance-item" style="grid-column: 1 / -1; text-align: center;">
+                <div style="font-size: 13px; color: var(--mn-text-muted); padding: 8px 0;">
+                  \${selectedWallet && selectedWallet.hasMnemonic ? 'Derived address — balances not available' : 'Address only — balances not available'}
+                </div>
+              </div>
+            \` : null}
           </div>
         </div>
+
       \`;
     }
 
@@ -1017,6 +2107,19 @@ export function generateDashboardHtml({ wsUrl }) {
         }
       }, []);
 
+      const sendMessage = useCallback((msg) => {
+        if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+          wsRef.current.send(JSON.stringify(msg));
+        }
+      }, []);
+
+      const [deriveResult, setDeriveResult] = useState(null);
+      const [deriveAccountsResult, setDeriveAccountsResult] = useState(null);
+      const [generateResult, setGenerateResult] = useState(null);
+      const [showImportModal, setShowImportModal] = useState(false);
+      const [showGenerateModal, setShowGenerateModal] = useState(false);
+      const importHandlerRef = useRef(null);
+
       useEffect(() => {
         function connect() {
           const ws = new WebSocket(WS_URL);
@@ -1025,6 +2128,8 @@ export function generateDashboardHtml({ wsUrl }) {
           ws.addEventListener('open', () => {
             setConnected(true);
             backoff.current = 1000;
+            // Auto-sync wallet on first connect
+            ws.send(JSON.stringify({ type: 'command', action: 'sync-wallet' }));
           });
 
           ws.addEventListener('message', (event) => {
@@ -1034,6 +2139,12 @@ export function generateDashboardHtml({ wsUrl }) {
                 setState(msg.data);
               } else if (msg.type === 'result') {
                 addToast(msg.message || (msg.success ? 'Command succeeded' : 'Command failed'), msg.success ? 'success' : 'error');
+              } else if (msg.type === 'derive-result') {
+                setDeriveResult(msg.address || null);
+              } else if (msg.type === 'derive-accounts-result') {
+                setDeriveAccountsResult(msg.accounts || null);
+              } else if (msg.type === 'generate-result') {
+                setGenerateResult(msg);
               }
             } catch (e) {
               // ignore malformed messages
@@ -1069,19 +2180,36 @@ export function generateDashboardHtml({ wsUrl }) {
       return html\`
         <\${ConnectionStatus} connected=\${connected} />
         <\${ToastContainer} toasts=\${toasts} onRemove=\${removeToast} />
-        <\${Header} networkStatus=\${state.networkStatus} onStart=\${() => sendCommand('start')} onStop=\${() => sendCommand('stop')} />
+        <\${Header} networkStatus=\${state.networkStatus} onStart=\${() => sendCommand('start')} onStop=\${() => sendCommand('stop')} sendMessage=\${sendMessage} />
         <div class="cards-grid">
-          <\${NodeCard} node=\${state.node} health=\${state.health.node} />
-          <\${IndexerCard} indexer=\${state.indexer} health=\${state.health.indexer} />
-          <\${ProofServerCard} proofServer=\${state.proofServer} health=\${state.health.proofServer} />
+          <\${NodeCard} node=\${state.node} health=\${state.health.node} serverTime=\${state.serverTime} />
+          <\${IndexerCard} indexer=\${state.indexer} health=\${state.health.indexer} serverTime=\${state.serverTime} />
+          <\${ProofServerCard} proofServer=\${state.proofServer} health=\${state.health.proofServer} serverTime=\${state.serverTime} />
         </div>
         <div class="cards-grid">
-          <\${WalletCard} wallet=\${state.wallet} />
+          <\${WalletCard} wallet=\${state.wallet} walletSyncStatus=\${state.walletSyncStatus} sendMessage=\${sendMessage} onOpenImportModal=\${() => { setDeriveResult(null); setDeriveAccountsResult(null); setShowImportModal(true); }} onOpenGenerateModal=\${() => { setGenerateResult(null); setShowGenerateModal(true); }} importHandlerRef=\${importHandlerRef} />
         </div>
         <div class="cards-grid">
           <\${ResponseChart} health=\${state.health} />
         </div>
         <\${LogViewer} logs=\${state.logs} />
+        \${showImportModal ? html\`
+          <\${ImportWalletModal}
+            onClose=\${() => setShowImportModal(false)}
+            onImport=\${(w) => importHandlerRef.current && importHandlerRef.current(w)}
+            sendMessage=\${sendMessage}
+            deriveResult=\${deriveResult}
+            deriveAccountsResult=\${deriveAccountsResult}
+          />
+        \` : null}
+        \${showGenerateModal ? html\`
+          <\${GenerateWalletModal}
+            onClose=\${() => setShowGenerateModal(false)}
+            onImport=\${(w) => importHandlerRef.current && importHandlerRef.current(w)}
+            sendMessage=\${sendMessage}
+            generateResult=\${generateResult}
+          />
+        \` : null}
       \`;
     }