kira-wallet 0.1.0

package/viewer/static/workspace-model.js

@@ -0,0 +1,43 @@
+'use strict';
+(function (root) {
+  const pageSize = 50;
+  function catalog(tokens, filters = {}) {
+    const search = (filters.search || '').trim().toLowerCase();
+    const rows = tokens.filter(t => (filters.testnets || t.environment !== 'testnet')
+      && (!filters.network || filters.network === 'all' || String(t.chain_id) === String(filters.network))
+      && (filters.pricing !== 'priced' || (t.value_usd != null && !t.unpriced_count))
+      && (filters.pricing !== 'unpriced' || t.value_usd == null || t.unpriced_count > 0)
+      && (!search || [t.symbol, t.name, t.address || 'native'].some(v => String(v || '').toLowerCase().includes(search))));
+    const order = filters.sort || 'value';
+    rows.sort((a, b) => (order === 'name' ? String(a.name || a.symbol).localeCompare(String(b.name || b.symbol))
+      : order === 'wallets' ? b.wallet_count - a.wallet_count
+      : (b.value_usd ?? -Infinity) - (a.value_usd ?? -Infinity)) || String(a.id).localeCompare(String(b.id)));
+    const pages = Math.max(1, Math.ceil(rows.length / pageSize));
+    const page = Math.min(Math.max(1, filters.page || 1), pages);
+    return { rows: rows.slice((page - 1) * pageSize, page * pageSize), count: rows.length, page, pages };
+  }
+  const active = job => ['queued', 'running'].includes(job.state);
+  function jobPresentation(job, now = Date.now(), connected = true) {
+    const labels = { queued: 'Queued', running: 'Running', succeeded: 'Completed', partial: 'Saved with gaps', interrupted: 'Interrupted', failed: 'Failed', cancelled: 'Stopped' };
+    const start = job.state === 'queued' ? job.updated_at || job.created_at : job.started_at || job.created_at;
+    const end = active(job) ? now : Date.parse(job.updated_at);
+    const elapsed = Math.max(0, Math.floor((end - Date.parse(start)) / 1000));
+    const last = job.events?.at(-1)?.observed_at || job.updated_at;
+    const quiet = job.state === 'running' && now - Date.parse(last) > 60000;
+    return {
+      label: job.cancel_requested && active(job) ? 'Stopping' : labels[job.state] || 'Unknown',
+      active: active(job), spinner: connected && job.state === 'running', quiet,
+      elapsed: Number.isFinite(elapsed) ? elapsed : null,
+      timerLabel: job.state === 'queued' ? 'Waiting' : job.started_at ? 'Elapsed' : 'Since request',
+      freshness: !connected ? 'Connection lost. Last recorded state shown.' : quiet ? 'Awaiting a new stage update. Still marked running.' : '',
+    };
+  }
+  function duration(seconds) {
+    if (seconds == null) return 'Unknown';
+    const h = Math.floor(seconds / 3600), m = Math.floor(seconds % 3600 / 60), s = seconds % 60;
+    return (h ? h + 'h ' : '') + m + 'm ' + s + 's';
+  }
+  const api = { catalog, pageSize, active, jobPresentation, duration };
+  if (typeof module !== 'undefined' && module.exports) module.exports = api;
+  else root.KiraView = api;
+})(typeof globalThis !== 'undefined' ? globalThis : this);

package/viewer/static/workspace.css

@@ -0,0 +1,463 @@
+/* Workspace refinement: paper, ink and a lavender notebook.
+   Body and controls use the system UI face. Only scene captions use a serif. */
+:root {
+  --bg: #f8f7f4;
+  --ink: #292733;
+  --secondary: #665e70;
+  --muted: #716779;
+  --line: #e4dfe8;
+  --accent: #69518b;
+  --accent-soft: #eee8f5;
+  --sidebar: #22232d;
+  --type-caption: 12px;
+  --type-body: 14px;
+  --type-label: 13px;
+  --control-height: 44px;
+  --icon-size: 18px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+}
+body, main { background: var(--bg); color: var(--ink); }
+body { font-size: var(--type-body); line-height: 1.5; letter-spacing: 0; }
+p { letter-spacing: 0; }
+button, input, textarea, select { font: inherit; letter-spacing: 0; }
+button, a { touch-action: manipulation; }
+:is(input, textarea, button, a, select, summary):focus-visible { outline: 2px solid #8064b1; outline-offset: 3px; }
+h1, h2, h3 { letter-spacing: -.025em; }
+.ui-icon { width: var(--icon-size); height: var(--icon-size); flex: none; display: block; stroke-width: 1.75; }
+.primary-button, .quiet-button, .settings-button, .send-button, .icon-button, [data-close-dialog] {
+  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+  min-height: var(--control-height); border-radius: 10px; line-height: 20px;
+  font-size: var(--type-label); font-weight: 500; padding: 11px 14px;
+}
+.primary-button { background: var(--accent); border-color: var(--accent); color: #fff; }
+.primary-button:hover { background: #594176; border-color: #594176; }
+.quiet-button { background: #fcfafc; border-color: #d8cfdf; color: #594469; }
+.quiet-button:hover { background: #eee8f5; border-color: #bbaeC9; }
+button:disabled { opacity: .55; }
+.icon-button, [data-close-dialog] { padding: 0; min-width: 44px; color: var(--secondary); }
+.icon-button svg, [data-close-dialog] svg { width: 18px; height: 18px; }
+
+/* Navigation. The icon and name occupy two stable columns. */
+.sidebar { width: 232px; background: var(--sidebar); border: 0; color: #eeeaf4; padding: 28px 18px 20px; z-index: 3; }
+.brand { padding: 0 6px; gap: 10px; font-size: 28px; font-weight: 600; letter-spacing: -.035em; line-height: 1.15; }
+.brand-logo { width: 44px; height: 44px; border-radius: 12px; }
+.brand-caption { color: #bdb6ca; font-size: 10px; font-weight: 500; letter-spacing: .07em; line-height: 1.4; margin-top: 4px; }
+.brand[aria-current] { color: #fff; }
+.workspace-label, .sidebar-label { color: #bdb6ca; font-size: 11px; letter-spacing: .07em; font-weight: 500; }
+.workspace-label { margin: 32px 8px 16px; }
+.sidebar-intro { display: flex; gap: 12px; margin: 0 8px 8px; }
+.sidebar-intro p { font-size: 13px; color: #d0c8dc; line-height: 1.6; margin: 0; }
+.sidebar-line { width: 2px; background: #a590ce; border-radius: 2px; }
+.sidebar-label { margin: 30px 8px 12px; padding: 0; }
+.sidebar-label span { background: #393644; color: #d4c9e5; font-size: 11px; }
+#wallet-list { overflow: auto; min-height: 70px; max-height: calc(100dvh - 490px); scrollbar-width: thin; }
+.wallet-button:not(.home-button) { grid-template-columns: 20px minmax(0, 1fr); padding: 12px 10px; gap: 10px; border-radius: 10px; min-height: 60px; }
+.wallet-button { color: #e2dceb; }
+.wallet-button:hover { background: #2f2d3b; }
+.wallet-button.active { background: #40374f; border-color: #625075; color: #f4edff; }
+.wallet-nav-name { font-size: 14px; font-weight: 500; line-height: 1.4; }
+.wallet-nav-address { display: block; font-size: 12px; color: #b6aac6; line-height: 1.5; margin-top: 3px; }
+.wallet-glyph { color: #b9a7d1; width: 20px; height: 20px; }
+.wallet-glyph svg { width: 20px; height: 20px; }
+.wallet-arrow { display: none; }
+.user-controls { margin-top: auto; padding-top: 24px; display: grid; gap: 8px; }
+.user-controls .primary-button { justify-content: flex-start; background: #bda9df; border-color: #bda9df; color: #2e253d; font-size: 13px; padding: 11px 12px; }
+.user-controls .primary-button:hover { background: #cbb8e9; }
+.settings-button { justify-content: flex-start; background: transparent; border: 1px solid #5b5366; color: #e0d7eb; font-size: 13px; padding: 11px 12px; }
+.settings-button:hover { background: #332d40; }
+.user-controls p { font-size: 11px; color: #bcb0cb; line-height: 1.6; text-align: left; margin: 4px 2px 16px; }
+.sidebar-bottom { margin-top: 0; border-color: #4d445b; color: #c8bdd5; font-size: 11px; gap: 7px; flex-wrap: wrap; }
+.read-only { color: #bcb0cb; font-size: 11px; }
+.status-dot { background: #abcdb7; }
+
+/* Page hierarchy and recorded financial values. */
+main { margin-left: 232px; width: calc(100% - 232px); }
+.topbar { height: 60px; background: #fbfaf7; border-color: var(--line); padding: 0 28px; gap: 12px; }
+.breadcrumb { font-size: 13px; }
+.breadcrumb a { min-height: 44px; display: flex; align-items: center; }
+.breadcrumb [aria-current] { color: #51465d; }
+.sync-status { font-size: 12px; color: var(--secondary); }
+.sync-status .sync-dot { background: #806692; }
+.demo-badge { font-size: 10px; letter-spacing: .06em; color: #69527b; }
+.workspace-tabs { min-height: 56px; border-bottom: 1px solid var(--line); display: flex; align-items: stretch; gap: 28px; padding: 0 28px; background: #fbfaf7; }
+.workspace-tabs > a { position: relative; display: flex; align-items: center; gap: 8px; color: var(--secondary); font-size: 14px; white-space: nowrap; min-height: 56px; }
+.workspace-tabs > a[aria-current] { color: #302639; font-weight: 600; }
+.workspace-tabs > a[aria-current]::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: #806299; }
+.workspace-tabs > a > span:not(:empty) { font-size: 11px; background: #eae2f1; color: #624c79; padding: 1px 6px; border-radius: 5px; line-height: 18px; }
+.mobile-pane-control { display: none; }
+.content { padding: 28px; max-width: 1800px; }
+.workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 38%); gap: 28px; align-items: start; }
+.evidence-pane { min-width: 0; }
+.home-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 4px 0; }
+.home-heading h1 { font-size: clamp(32px, 2.7vw, 42px); font-weight: 600; line-height: 1.2; letter-spacing: -.035em; margin: 0 0 14px; }
+.home-heading p { font-size: 14px; color: var(--secondary); line-height: 1.6; margin: 0; }
+.eyebrow, .home-heading .eyebrow, .view-heading .eyebrow { font-size: 11px; line-height: 1.5; font-weight: 600; color: #705a80; letter-spacing: .075em; margin-bottom: 12px; }
+.edition-mark { font: italic 28px Georgia, serif; color: #9a83aa; margin-bottom: 8px; white-space: nowrap; }
+.home-summary { display: block; margin-top: 28px; padding: 24px; border: 1px solid #dfd6e8; border-radius: 16px; background: #efeaf5; }
+.total-value, .wallet-card-value, .account-value { font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
+.home-summary .total-value { font-size: clamp(36px, 3.2vw, 48px); color: #372b43; font-weight: 500; line-height: 1.15; margin-top: 10px; }
+.home-summary .valuation-note, .valuation-note { color: var(--secondary); font-size: 12px; line-height: 1.6; margin-top: 12px; max-width: none; }
+.home-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid #dcd1e6; }
+.home-stats .summary-stat { padding-left: 0; border: none; gap: 6px; }
+.summary-label, .home-stats .summary-label { font-size: 12px; color: #685571; line-height: 1.4; }
+.stat-note, .home-stats .stat-note { font-size: 12px; color: var(--secondary); line-height: 1.5; white-space: normal; }
+.home-stats strong { font-size: 26px; font-weight: 500; color: #463550; letter-spacing: -.025em; }
+.dashboard-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 28px; }
+.section-heading { margin-bottom: 14px; gap: 12px; align-items: baseline; flex-wrap: wrap; }
+.section-heading h2 { font-size: 18px; font-weight: 600; line-height: 1.4; }
+.section-note { font-size: 12px; color: var(--secondary); line-height: 1.5; white-space: normal; }
+.wallet-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
+.wallet-card { padding: 18px; background: #fcfbfa; border-color: #e3dce7; border-radius: 12px; min-width: 0; }
+.wallet-card-heading { gap: 10px; align-items: center; }
+.wallet-card-identity { min-width: 0; overflow: hidden; }
+.wallet-card-identity strong { font-size: 14px; font-weight: 500; line-height: 1.4; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.wallet-card-identity > span { font-size: 12px; color: var(--secondary); line-height: 1.5; }
+.wallet-card-value { font-size: 28px; font-weight: 500; line-height: 1.2; margin: 20px 0 10px; }
+.wallet-card-meta { font-size: 12px; color: var(--secondary); line-height: 1.6; display: block; }
+.wallet-card-meta > span:last-child { display: none; }
+.card-wallet-icon { width: 36px; height: 36px; border-radius: 10px; flex: none; background: #eee7f5; }
+.card-wallet-icon svg { width: 20px; height: 20px; }
+.card-arrow { font-size: 18px; line-height: 1; color: #796188; }
+.card-arrow, .detail-arrow { display: inline-flex; align-items: center; flex: none; }
+.card-arrow .ui-icon, .detail-arrow .ui-icon { width: 16px; height: 16px; }
+.allocation-progress { height: 4px; }
+.network-allocation { padding: 4px 18px; border-color: #e3dce7; border-radius: 12px; }
+.network-row { padding: 18px 0; }
+.network-label, .network-value { font-size: 14px; line-height: 1.4; }
+.network-row-meta { font-size: 12px; color: var(--secondary); margin: 9px 0; }
+.largest-holdings { margin-top: 28px; }
+.home-holdings { display: block; border-radius: 12px; border-color: #e3dce7; padding: 0 18px; }
+.home-holding { padding: 16px 0; border: 0; border-bottom: 1px solid #e7e0eb; background: transparent; }
+.home-holding:last-child { border: 0; }
+.home-holding:hover { background: transparent; }
+.holding-value { font-size: 14px; }
+.coin-icon { width: 32px; height: 32px; color: #66556e; background: #f0edf4; }
+.chain-icon { color: #fff; background: #796489; }
+.chain-fallback { font-size: 11px; }
+.symbol { font-size: 14px; font-weight: 500; line-height: 1.4; color: #45354f; }
+.token-description { font-size: 12px; line-height: 1.5; color: var(--secondary); }
+.home-holding .token-description { font-size: 12px; color: var(--secondary); }
+.empty p { font-size: 14px; color: var(--secondary); }
+.page-footer { font-size: 12px; color: var(--secondary); flex-wrap: wrap; line-height: 1.6; margin-top: 24px; gap: 8px; }
+
+/* Kira keeps a visible composer while her recorded notes scroll. */
+.kira-panel { position: sticky; top: 24px; height: calc(100dvh - 168px); min-height: 500px; max-height: calc(100dvh - 48px); display: flex; flex-direction: column; background: #f0edf5; border: 1px solid #dfd6e8; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 24px #3a294708; }
+.kira-panel-heading { display: flex; justify-content: space-between; align-items: center; padding: 22px 22px 0; gap: 12px; flex: none; }
+.kira-panel-heading .eyebrow { font-size: 10px; margin-bottom: 6px; color: #725781; letter-spacing: .065em; }
+.kira-panel-heading h2 { font-size: 27px; font-weight: 600; color: #443050; gap: 9px; line-height: 1.2; }
+.kira-spark { color: #9076a4; font-size: 20px; font-weight: 400; }
+.local-badge { padding: 5px 8px; border: 1px solid #d6c8e2; border-radius: 7px; font-size: 11px; line-height: 1.5; color: #695076; white-space: nowrap; }
+.kira-scene { height: 205px; position: relative; flex: none; overflow: hidden; margin: 8px 0 0; background: radial-gradient(ellipse at 78% 75%, #e1d5ea, transparent 67%); }
+.kira-scene img { position: absolute; right: 4px; bottom: -17px; width: 180px; height: 228px; object-fit: contain; object-position: center bottom; }
+.scene-caption { position: relative; z-index: 1; max-width: 47%; padding: 46px 0 0 22px; display: flex; flex-direction: column; gap: 12px; }
+.scene-caption > span:first-child { font: italic 25px/1.2 Georgia, serif; color: #70537f; letter-spacing: -.02em; }
+.scene-rule { width: 30px; height: 1px; background: #b3a0c4; }
+.scene-caption small { font-size: 12px; line-height: 1.5; color: #705a7e; max-width: 145px; }
+.kira-conversation { padding: 18px 22px 20px; overflow: auto; flex: 1; min-height: 80px; border-top: 1px solid #dfd5e8; scrollbar-width: thin; }
+.briefing-meta { display: flex; align-items: center; gap: 7px; color: #6e537d; font-size: 12px; line-height: 1.5; margin-bottom: 14px; flex-wrap: wrap; }
+.briefing-meta > span:last-child { margin-left: auto; font-size: 10px; letter-spacing: .035em; color: #71617d; }
+.briefing-dot { height: 5px; width: 5px; border-radius: 50%; background: #8d72a2; flex: none; }
+.kira-note { display: block; background: #fbfafc; border-color: #dfd5e8; border-radius: 12px; padding: 18px; margin: 0; color: #5f4b6e; }
+.kira-note-label { font-size: 10px; letter-spacing: .065em; line-height: 1.5; color: #775b85; margin-bottom: 10px; }
+.kira-note p { font-size: 14px; line-height: 1.65; letter-spacing: 0; color: #5e4b6a; }
+.kira-note summary { font-size: 12px; line-height: 1.5; margin-top: 14px; color: #735481; padding: 6px 0; }
+.kira-note details p { font-size: 13px; line-height: 1.65; color: #685374; }
+.kira-quick-actions { display: grid; gap: 0; margin-top: 12px; }
+.kira-quick-actions button { min-height: 44px; padding: 11px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: none; border: 0; border-bottom: 1px solid #ddd2e7; color: #6d507d; font-size: 13px; line-height: 20px; text-align: left; }
+.kira-quick-actions button:hover { color: #4c2e60; }
+.kira-quick-actions button:last-child { border: 0; }
+.kira-quick-actions .ui-icon { width: 16px; height: 16px; }
+.composer { background: #f8f5fb; border-top: 1px solid #dfd2e8; padding: 16px 22px; flex: none; }
+.composer > label { font-size: 12px; color: #71547f; font-weight: 500; }
+.composer textarea { width: 100%; resize: vertical; min-height: 56px; max-height: 100px; background: none; border: 0; display: block; padding: 10px 0 4px; color: #493254; font-size: 14px; line-height: 1.5; }
+.composer textarea::placeholder { color: #7c6889; opacity: 1; }
+.composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.composer-footer > span { font-size: 12px; line-height: 1.5; color: #766081; }
+.send-button { border: 0; background: #e2d8ed; color: #745981; width: 44px; height: 44px; padding: 0; opacity: .65; }
+.send-button .ui-icon { width: 20px; height: 20px; }
+.composer > p { font-size: 12px; color: #765c83; margin: 8px 0 0; line-height: 1.5; }
+.text-button { background: none; border: 0; padding: 6px 2px; color: #654378; font-size: inherit; line-height: 1.5; text-decoration: underline; text-underline-offset: 3px; }
+.view-heading h1 { font-size: 36px; font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }
+.view-heading > p { font-size: 14px; line-height: 1.65; color: var(--secondary); max-width: 560px; margin-bottom: 24px; }
+
+/* Wallets, token details and filters share the same type scale. */
+.wallet-heading { flex-wrap: wrap; }
+.wallet-heading h1 { font-size: 32px; line-height: 1.2; overflow-wrap: anywhere; }
+.wallet-address { flex-wrap: wrap; font-size: 12px; overflow-wrap: anywhere; color: var(--secondary); }
+#address { max-width: 100%; overflow-wrap: anywhere; }
+.wallet-actions { background: #eeebf2; padding: 6px; border: 1px solid #dfd6e7; border-radius: 12px; justify-content: flex-start; gap: 6px; margin-bottom: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.wallet-actions button { background: #fcfafc; border: 0; white-space: normal; min-height: 44px; font-size: 13px; padding: 10px 8px; }
+.portfolio-summary { grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; padding-bottom: 24px; }
+.portfolio-summary .valuation { grid-column: 1 / -1; }
+.portfolio-summary .total-value { font-size: 42px; }
+.portfolio-summary .summary-stat { border: 0; padding-left: 0; }
+.summary-stat strong { font-size: 26px; }
+.holdings-toolbar { flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
+.holdings-toolbar .filters { flex-wrap: wrap; width: 100%; gap: 8px; }
+.holdings h2 { font-size: 18px; }
+.token-search { flex: 1; }
+.token-search input { width: 100%; max-width: none; font-size: 14px; min-height: 44px; }
+.chain-select select { font-size: 13px; min-height: 44px; }
+.chain-select svg { top: 16px; }
+.segment button { min-height: 38px; font-size: 13px; }
+.chain-heading { gap: 12px; }
+.chain-name { flex-wrap: wrap; font-size: 15px; }
+.chain-assets, .chain-total, .filter-note, .tag, .count-badge { font-size: 12px; color: var(--secondary); }
+.detail-heading h1 { font-size: 32px; line-height: 1.2; }
+.detail-heading p { font-size: 14px; color: var(--secondary); line-height: 1.6; }
+.detail-facts, .account-grid { grid-template-columns: 1fr; gap: 14px; }
+.fact-panel, .account-card { padding: 22px; border-radius: 12px; }
+.fact-panel h2 { font-size: 17px; }
+.fact-panel dt, .account-facts dt, .account-meta, .account-footnote { color: var(--secondary); font-size: 12px; line-height: 1.5; }
+.fact-panel dd, .account-facts dd { font-size: 13px; color: #5e4b6a; line-height: 1.5; }
+.detail-note { font-size: 12px; line-height: 1.6; color: var(--secondary); }
+.account-value { font-size: 32px; }
+.table-wrap { border-radius: 12px; }
+.token-table td, .token-table th { padding: 16px 12px; }
+.token-table td { font-size: 14px; }
+.amount, .token-price, .token-value { font-size: 14px; line-height: 1.5; }
+.token-table th { font-size: 12px; color: var(--secondary); }
+.coin-title { min-width: 0; overflow: hidden; }
+.token-description, .symbol { max-width: 180px; }
+.market-link { font-size: 12px; display: inline-flex; align-items: center; min-height: 32px; }
+.price-basis, .native-label, .unpriced { font-size: 12px; line-height: 1.5; color: var(--secondary); }
+.token-catalog-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
+.catalog-search { grid-column: 1 / -1; }
+.token-catalog-controls input, .token-catalog-controls select, .activity-toolbar select { width: 100%; min-width: 0; border: 1px solid #d5cadd; background: #fdfbfe; color: #604a6c; border-radius: 10px; padding: 11px 12px; font-size: 13px; line-height: 20px; min-height: 44px; }
+.catalog-meta { font-size: 12px; display: flex; justify-content: space-between; gap: 12px; align-items: center; margin: 20px 0 16px; color: var(--secondary); flex-wrap: wrap; }
+.checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--secondary); min-height: 36px; }
+.catalog-table { table-layout: fixed; }
+.catalog-table th:first-child { width: 43%; }
+.catalog-table th:nth-child(2) { width: 25%; }
+.catalog-table th:nth-child(3) { width: 10%; }
+.catalog-table th:nth-child(4) { width: 22%; text-align: right; }
+.catalog-table td:last-child { text-align: right; }
+.pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; color: var(--secondary); font-size: 12px; }
+.pagination button { min-height: 44px; padding: 11px 12px; font-size: 13px; }
+
+/* Job states remain evidence, with readable timing and stage details. */
+.active-work { border: 1px solid #d1c2e0; background: #ece5f5; border-radius: 12px; padding: 14px 16px; margin-bottom: 24px; color: #665073; display: grid; gap: 8px; }
+.active-work a { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; flex-wrap: wrap; }
+.active-work strong { font-weight: 500; color: #5d4472; }
+.active-work p { margin: 6px 0 0; font-size: 12px; line-height: 1.6; }
+.active-work small { font-size: 12px; }
+.active-work .spinner { margin-right: 7px; }
+.research-jobs { padding: 20px; border-radius: 12px; background: #fcfafc; margin-bottom: 0; }
+.activity-toolbar { display: flex; align-items: center; gap: 12px; margin: 18px 0; flex-wrap: wrap; }
+.activity-toolbar select { width: 155px; }
+.activity-toolbar > span { font-size: 12px; color: var(--secondary); line-height: 1.6; }
+.job-row { align-items: flex-start; padding: 20px 0; gap: 12px; flex-wrap: wrap; }
+.job-identity { font-size: 14px; flex: 1; min-width: min(100%, 200px); }
+.job-identity p { font-size: 13px; line-height: 1.6; }
+.job-identity strong { font-size: 14px; font-weight: 500; }
+.job-state { font-size: 12px; border-radius: 6px; padding: 4px 8px; line-height: 20px; white-space: nowrap; }
+.job-state.running, .job-state.queued { background: #ece4f5; color: #705087; }
+.job-state.cancelled { background: #eeebf0; color: #6d5c7a; }
+.job-state.failed { background: #f7e9e5; color: #93513f; }
+.job-state.interrupted, .job-state.partial { background: #f8eddb; color: #806029; }
+.job-state.succeeded { background: #e9f0eb; color: #446950; }
+.job-actions { margin-left: auto; }
+.job-actions .quiet-button { font-size: 13px; min-height: 44px; padding: 11px 12px; }
+.job-identity small { font-size: 12px; line-height: 1.7; color: var(--secondary); }
+.job-identity a { font-size: 13px; line-height: 1.5; }
+.job-identity .job-freshness { color: #87662e; }
+.job-stages { font-size: 13px; }
+.job-stages summary { font-size: 13px; color: #755385; padding: 6px 0; }
+.job-stages li span { font-size: 12px; line-height: 1.6; }
+.job-timer { font-variant-numeric: tabular-nums; }
+.spinner { display: inline-block; width: 12px; height: 12px; border: 1.5px solid #c7b5d9; border-top-color: #785295; border-radius: 50%; vertical-align: -1px; margin-right: 5px; animation: research-spin 1s linear infinite; }
+@keyframes research-spin { to { transform: rotate(360deg); } }
+.research-dialog { padding: 28px; }
+.dialog-heading h2 { font-size: 21px; letter-spacing: -.025em; }
+.dialog-heading button { min-width: 44px; min-height: 44px; flex: none; }
+.research-dialog p, .research-dialog label { font-size: 14px; line-height: 1.6; }
+.research-dialog .form-note, .assistant-gate p { font-size: 12px; line-height: 1.6; }
+.research-dialog input:not([type=checkbox]), .research-dialog textarea, .research-dialog select { font-size: 14px; min-height: 44px; }
+.history-row { font-size: 14px; line-height: 1.6; }
+.history-row small, .comparison-result small { font-size: 12px; }
+
+/* Watching connection keeps selection, session and saved addresses distinct. */
+.watching-dialog { width: min(520px, calc(100% - 32px)); }
+.watching-dialog [hidden], #wallet-session-panel[hidden] { display: none; }
+.watching-dialog .text-button { min-height: 44px; padding: 10px 2px; margin-right: 12px; }
+.wallet-entry-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #eee9f3; padding: 4px; border-radius: 12px; margin: 22px 0; }
+.wallet-entry-modes button { min-height: 44px; padding: 9px 8px; border: 0; background: transparent; color: var(--secondary); border-radius: 9px; font: inherit; font-weight: 500; cursor: pointer; }
+.wallet-entry-modes button[aria-pressed=true] { color: var(--ink); background: #fff; box-shadow: 0 1px 4px #30213e12; }
+.watching-dialog.is-review .wallet-entry-modes { margin: 16px 0; }
+.watching-dialog.is-review .wallet-preview { padding: 16px; }
+.watching-dialog h3 { font-size: 14px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 8px; }
+.wallet-choices { display: grid; gap: 8px; margin: 16px 0; }
+.wallet-choice { display: flex; align-items: center; gap: 12px; padding: 14px; width: 100%; min-height: 64px; text-align: left; color: var(--ink); background: #fff; border: 1px solid #ded6e6; border-radius: 12px; font: inherit; cursor: pointer; }
+.wallet-choice:hover, .wallet-choice[aria-pressed=true] { border-color: #9475aa; background: #f6f1fa; }
+.wallet-choice img { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; flex: none; }
+.wallet-choice > span:not(.wallet-choice-arrow) { flex: 1; min-width: 0; }
+.wallet-choice strong, .wallet-choice small { display: block; overflow-wrap: anywhere; }
+.wallet-choice strong { font-size: 14px; font-weight: 500; line-height: 1.45; }
+.wallet-choice small { color: var(--secondary); font-size: 12px; line-height: 1.5; margin-top: 3px; }
+.wallet-choice-arrow { display: flex; flex: none; color: #76578e; }
+.wallet-account img { display: none; }
+.wallet-account small { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.7; }
+.wallet-accounts-section { border-top: 1px solid #e2dce8; padding-top: 20px; margin-top: 20px; }
+.research-dialog .wallet-connection-status { font-size: 13px; color: #5f4474; }
+.wallet-connection-status:empty { display: none; }
+.wallet-preview { background: #f0edf5; border: 1px solid #ddd2e6; border-radius: 12px; padding: 18px; margin: 18px 0; }
+.wallet-preview dl { margin: 12px 0 0; }
+.wallet-preview dt { color: var(--secondary); font-size: 12px; line-height: 1.5; margin-top: 12px; }
+.wallet-preview dd { margin: 4px 0 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
+#wallet-preview-address, #wallet-submission-address { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
+.wallet-submission-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
+.wallet-submission-actions .quiet-button { min-height: 44px; padding: 10px 12px; }
+.wallet-preview p { margin-bottom: 0; }
+.wallet-demo-note, .wallet-unavailable { padding: 14px 16px; background: #f2edf6; border-radius: 10px; }
+.wallet-existing a { color: #684484; text-underline-offset: 3px; }
+#wallet-register { width: 100%; }
+.wallet-session-panel { border-top: 1px solid #4b4058; padding-top: 8px; margin-bottom: 14px; }
+#wallet-session { justify-content: flex-start; text-align: left; color: #d8cce4; font-size: 12px; min-height: 44px; }
+#wallet-session-name { display: block; font-size: 12px; color: #c2b5cc; overflow-wrap: anywhere; }
+#wallet-session-name:empty { display: none; }
+
+/* Compact panes use the same card layout on every viewport. */
+@media (max-width: 1400px) {
+  .wallet-cards { grid-template-columns: 1fr; }
+  .edition-mark { display: none; }
+  .token-catalog-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .token-catalog-controls > label:last-child { grid-column: 1 / -1; }
+  .evidence-pane .token-table, .evidence-pane .token-table tbody { display: block; }
+  .evidence-pane .token-table thead, .evidence-pane .token-table colgroup { display: none; }
+  .evidence-pane .token-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); }
+  .evidence-pane .token-table tr:last-child { border-bottom: 0; }
+  .evidence-pane .token-table td { display: block; padding: 0; border: 0; text-align: right; }
+  .evidence-pane .token-table td:first-child { grid-column: 1; grid-row: 1; text-align: left; }
+  .evidence-pane .token-table td:nth-child(4) { grid-column: 2; grid-row: 1; align-self: center; }
+  .evidence-pane .token-table td:nth-child(2) { grid-column: 1; grid-row: 2; text-align: left; margin-left: 42px; }
+  .evidence-pane .token-table td:nth-child(3) { grid-column: 2; grid-row: 2; }
+  .evidence-pane .token-table td:nth-child(5) { grid-column: 1 / -1; grid-row: 3; text-align: left; margin-left: 42px; }
+  .evidence-pane .mobile-label { display: block; font-size: 11px; color: var(--secondary); margin-bottom: 3px; }
+  .evidence-pane .symbol, .evidence-pane .token-description { max-width: 100%; }
+}
+@media (min-width: 1550px) {
+  .workspace { grid-template-columns: minmax(0, 1fr) minmax(390px, 36%); gap: 36px; }
+  .content { padding: 36px 40px; }
+  .topbar, .workspace-tabs { padding-left: 40px; padding-right: 40px; }
+  .dashboard-grid { grid-template-columns: 1.12fr 1fr; gap: 24px; }
+  .wallet-cards { grid-template-columns: 1fr; }
+  .kira-scene { height: 260px; }
+  .kira-scene img { height: 280px; width: 220px; right: 16px; }
+  .scene-caption { padding-top: 70px; }
+  .scene-caption > span:first-child { font-size: 30px; }
+}
+@media (min-width: 981px) and (max-width: 1150px) {
+  .sidebar { width: 216px; padding-left: 14px; padding-right: 14px; }
+  main { margin-left: 216px; width: calc(100% - 216px); }
+  .content { padding: 24px; }
+  .workspace { gap: 20px; grid-template-columns: minmax(0, 1fr) 320px; }
+  .topbar, .workspace-tabs { padding-left: 24px; padding-right: 24px; }
+  .home-summary { padding: 20px; }
+  .home-summary .total-value { font-size: 36px; }
+  .home-stats { gap: 8px; }
+  .kira-panel-heading, .kira-conversation, .composer { padding-left: 18px; padding-right: 18px; }
+  .kira-panel-heading .eyebrow { max-width: 150px; }
+  .scene-caption { padding-left: 18px; }
+  .scene-caption > span:first-child { font-size: 23px; }
+}
+@media (min-width: 981px) and (max-height: 800px) {
+  .kira-panel { min-height: 0; }
+  .kira-scene { height: 150px; }
+  .kira-scene img { height: 178px; width: 150px; bottom: -18px; }
+  .scene-caption { padding-top: 26px; gap: 8px; }
+  .scene-caption > span:first-child { font-size: 23px; }
+  .kira-panel-heading { padding-top: 16px; }
+  .kira-panel-heading h2 { font-size: 25px; }
+  .composer { padding-top: 12px; padding-bottom: 12px; }
+  .kira-conversation { padding-top: 14px; }
+}
+/* Let short desktop windows scroll the complete panel, including its composer. */
+@media (min-width: 981px) and (max-height: 650px) {
+  .kira-panel { position: static; height: auto; max-height: none; }
+  .kira-conversation { flex: none; overflow: visible; }
+}
+@media (max-width: 980px) {
+  .sidebar { position: static; width: 100%; padding: 16px 20px 12px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
+  .brand { padding: 0; font-size: 25px; }
+  .brand-logo { width: 40px; height: 40px; }
+  .brand-caption { font-size: 10px; }
+  .workspace-label, .sidebar-intro, .sidebar-label, .sidebar-bottom { display: none; }
+  #wallet-list { width: 100%; order: 3; display: flex; overflow: auto; max-height: none; min-height: 0; gap: 8px; margin: 0; }
+  .wallet-button:not(.home-button) { width: auto; min-width: 164px; padding: 9px 12px; min-height: 56px; flex-shrink: 0; border-color: #51445e; }
+  .user-controls { display: flex; gap: 8px; margin-left: auto; margin-top: 0; padding: 0; }
+  .user-controls .primary-button { min-height: 44px; padding: 11px 12px; white-space: nowrap; }
+  .settings-button { min-height: 44px; min-width: 44px; width: 44px; padding: 0; justify-content: center; }
+  .settings-label, .user-controls p { display: none; }
+  .wallet-session-panel { order: 4; width: 100%; display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; }
+  #wallet-session { flex: none; }
+  #wallet-session-name { min-width: 0; }
+  .app { display: block; }
+  main { width: 100%; margin: 0; }
+  .topbar { height: 44px; padding: 0 20px; }
+  .sync-status { display: none; }
+  .demo-badge { font-size: 10px; margin: 0; }
+  .workspace-tabs { height: auto; min-height: 52px; padding: 0 20px; gap: 24px; flex-wrap: wrap; }
+  .workspace-tabs > a { min-height: 52px; }
+  .mobile-pane-control { display: flex; width: 100%; border-top: 1px solid var(--line); gap: 6px; padding: 10px 0; }
+  .mobile-pane-control button { font-size: 14px; min-height: 44px; border: 1px solid transparent; border-radius: 9px; padding: 10px 16px; background: none; color: #776384; flex: 1; font-weight: 500; }
+  .mobile-pane-control button[aria-pressed=true] { border-color: #d5c4e2; background: #eee6f5; color: #66427b; }
+  .content { padding: 26px 20px; }
+  .workspace { display: block; }
+  .kira-panel { display: none; position: static; height: max(600px, calc(100dvh - 370px)); min-height: 0; max-height: none; }
+  .workspace[data-pane=kira] .evidence-pane { display: none; }
+  .workspace[data-pane=kira] .kira-panel { display: flex; }
+  .home-heading h1 { font-size: 34px; }
+  .home-summary { padding: 24px; margin-top: 24px; }
+  .home-summary .total-value { font-size: 42px; }
+  .wallet-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .edition-mark { display: block; }
+  .kira-scene { height: 170px; }
+  .kira-scene img { width: 170px; height: 195px; right: 12px; bottom: -15px; }
+  .scene-caption { padding-top: 30px; max-width: 46%; }
+  .scene-caption > span:first-child { font-size: 25px; }
+  .job-row { flex-direction: column; }
+  .job-actions { align-self: flex-end; }
+  .job-identity a { display: inline; margin-left: 8px; }
+  .research-jobs { padding: 18px; }
+  .research-dialog { padding: 22px; }
+  .research-dialog input:not([type=checkbox]), .research-dialog textarea, .research-dialog select,
+  .composer textarea, .token-search input, .token-catalog-controls input { font-size: 16px; }
+}
+@media (max-width: 520px) {
+  .brand-caption { display: none; }
+  .watching-label { display: none; }
+  .wallet-cards { grid-template-columns: 1fr; }
+  .edition-mark { display: none; }
+  .home-heading h1, .view-heading h1 { font-size: 32px; }
+  .home-summary { padding: 22px 20px; }
+  .home-stats { gap: 10px; }
+  .home-stats strong { font-size: 24px; }
+  .token-catalog-controls { grid-template-columns: 1fr; }
+  .token-catalog-controls > label { grid-column: 1 / -1; }
+  .kira-panel-heading, .kira-conversation, .composer { padding-left: 18px; padding-right: 18px; }
+  .scene-caption { padding-left: 18px; }
+  .kira-panel-heading .eyebrow { max-width: 150px; }
+  .kira-scene img { right: 4px; width: 160px; }
+  .wallet-heading h1, .detail-heading h1 { font-size: 30px; }
+}
+@media (max-width: 360px) {
+  .sidebar { padding: 14px 16px 12px; gap: 8px; }
+  .brand { font-size: 23px; gap: 7px; }
+  .brand-logo { width: 32px; height: 32px; }
+  .user-controls .primary-button { padding: 11px 9px; font-size: 12px; gap: 6px; }
+  .user-controls .primary-button .ui-icon { width: 16px; height: 16px; }
+  .topbar, .workspace-tabs { padding-left: 16px; padding-right: 16px; }
+  .workspace-tabs { gap: 20px; }
+  .workspace-tabs > a { font-size: 13px; gap: 5px; }
+  .content { padding: 24px 16px; }
+  .home-heading h1 { font-size: 29px; }
+  .home-summary .total-value { font-size: 36px; }
+  .home-stats { gap: 8px; }
+  .home-summary { padding: 20px 16px; }
+  .kira-panel-heading { gap: 8px; }
+  .kira-panel-heading .eyebrow { max-width: 138px; }
+  .local-badge { font-size: 10px; padding: 4px 6px; }
+  .scene-caption > span:first-child { font-size: 23px; }
+  .scene-caption small { max-width: 112px; }
+}
+@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

package/viewer/static/workspace.js

@@ -0,0 +1,102 @@
+'use strict';
+let catalogPage = 1;
+let briefingMode = 'view';
+let catalogTimer;
+function catalogFilters() {
+  return { search: $('all-token-search').value, network: $('all-token-network').value,
+    pricing: $('all-token-pricing').value, sort: $('all-token-sort').value,
+    testnets: $('all-token-testnets').checked, page: catalogPage };
+}
+function renderCatalog() {
+  if (!state) return;
+  const result = KiraView.catalog(state.details.tokens, catalogFilters());
+  catalogPage = result.page;
+  $('all-token-result').textContent = result.count + (result.count === 1 ? ' token · ' : ' tokens · ') + (result.count ? ((result.page - 1) * 50 + 1) + '–' + Math.min(result.page * 50, result.count) + ' shown' : 'none shown');
+  $('tokens-page').textContent = result.page + ' / ' + result.pages;
+  $('tokens-prev').disabled = result.page === 1;
+  $('tokens-next').disabled = result.page === result.pages;
+  $('all-token-empty').hidden = result.count > 0;
+  $('all-token-body').innerHTML = result.rows.map(a => {
+    const network = state.details.networks.find(n => n.id === a.chain_id);
+    return `<tr><td><a class="token-name token-link" href="${tokenHref(a.id)}">${coinIcon(a)}<div class="coin-title"><div class="symbol">${escapeHTML(a.symbol)}</div><div class="token-description">${escapeHTML(network?.name || 'Chain ' + a.chain_id)}${a.environment === 'testnet' ? ' · Testnet' : ''}</div></div></a></td><td><span class="mobile-label">Total balance</span><span class="amount" title="${escapeHTML(a.balance)}">${quantity(a.balance)}</span></td><td><span class="mobile-label">Wallets</span>${a.wallet_count}</td><td><span class="token-value">${a.environment === 'testnet' ? 'Testnet' : money(a.value_usd)}</span>${a.unpriced_count ? '<div class="price-basis">' + a.unpriced_count + ' unpriced</div>' : ''}</td></tr>`;
+  }).join('');
+  bindImages();
+}
+function renderWorkspace() {
+  if (!state) return;
+  $('tokens-view').hidden = selectedView !== 'tokens';
+  $('activity-view').hidden = selectedView !== 'activity';
+  document.querySelectorAll('[data-view]').forEach(link => {
+    const current = link.dataset.view === selectedView || (link.dataset.view === 'home' && ['wallet', 'token', 'network'].includes(selectedView));
+    if (current) link.setAttribute('aria-current', 'page'); else link.removeAttribute('aria-current');
+  });
+  if (selectedView === 'home') $('brand-home').setAttribute('aria-current', 'page'); else $('brand-home').removeAttribute('aria-current');
+  $('all-token-count').textContent = state.details.tokens.filter(t => t.environment !== 'testnet').length;
+  if (selectedView === 'tokens') {
+    renderBreadcrumb([{ label: 'Home', href: '#/home' }, { label: 'All tokens' }]);
+    document.title = 'All tokens · Kira Wallet';
+    const network = $('all-token-network').value;
+    const recordedChains = new Set(state.details.tokens.map(t => t.chain_id));
+    $('all-token-network').innerHTML = '<option value="all">All networks</option>' + state.details.networks.filter(n => recordedChains.has(n.id)).map(n => `<option value="${n.id}">${escapeHTML(n.name)}${n.environment === 'testnet' ? ' · Testnet' : ''}</option>`).join('');
+    $('all-token-network').value = [...$('all-token-network').options].some(o => o.value === network) ? network : 'all';
+    $('sync-label').textContent = 'Latest recorded holdings'; renderCatalog();
+  } else if (selectedView === 'activity') {
+    renderBreadcrumb([{ label: 'Home', href: '#/home' }, { label: 'Activity' }]);
+    document.title = 'Activity · Kira Wallet'; $('sync-label').textContent = 'Local research history';
+  }
+  renderBriefing();
+}
+function renderBriefing() {
+  if (!state) return;
+  renderKiraNote();
+  const active = typeof jobList !== 'undefined' && jobList.some(KiraView.active);
+  const gaps = state.wallets.reduce((sum, w) => sum + w.chains.filter(c => c.environment === 'mainnet' && (!c.complete || !c.rpc_available)).length, 0);
+  let art = 'welcome', caption = 'A little perspective.', note = 'Here to make sense of it.';
+  if (active) { art = 'research'; caption = 'Following the evidence.'; note = 'Research is in progress.'; }
+  else if (gaps && briefingMode === 'coverage') { art = 'attention'; caption = 'A closer look.'; note = 'Some facts are still missing.'; }
+  else if (selectedView === 'activity') { art = 'review'; caption = 'Every step, recorded.'; note = 'Good research leaves a trail.'; }
+  else if (['token', 'network', 'tokens', 'wallet'].includes(selectedView)) { art = 'explain'; caption = 'Let’s look a little closer.'; note = 'Context makes the difference.'; }
+  const src = art === 'welcome' ? '/kira.png' : '/kira-' + art + '.png';
+  if ($('kira-scene-art').getAttribute('src') !== src) $('kira-scene-art').src = src;
+  $('kira-scene-art').alt = { welcome: 'Kira holding her research notebook', research: 'Kira writing while researching', explain: 'Kira explaining a finding', review: 'Kira reviewing saved notes', attention: 'Kira carefully checking incomplete evidence' }[art];
+  $('kira-mood').textContent = caption; $('kira-scene-note').textContent = note;
+  $('kira-context').textContent = selectedView === 'wallet' ? currentWallet()?.name || 'Wallet' : selectedView === 'token' ? state.details.tokens.find(t => t.id === selectedToken)?.symbol || 'Token' : selectedView === 'network' ? state.details.networks.find(n => n.id === selectedNetwork)?.name || 'Network' : { home: 'Portfolio overview', tokens: 'All tokens', activity: 'Research activity' }[selectedView];
+  if (briefingMode === 'coverage') {
+    const selected = selectedView === 'wallet' ? [currentWallet()].filter(Boolean) : state.wallets;
+    const missing = selected.flatMap(w => w.chains.filter(c => c.environment === 'mainnet' && (!c.complete || !c.rpc_available)).map(c => w.name + ' · ' + c.name + (!c.rpc_available ? ': RPC unavailable' : ': incomplete discovery')));
+    $('kira-note-text').textContent = missing.length ? 'These recorded coverage gaps need a closer look: ' + missing.slice(0, 6).join('; ') + (missing.length > 6 ? '; and ' + (missing.length - 6) + ' more.' : '.') + ' Missing data does not mean zero holdings.' : 'No mainnet coverage gaps are flagged in this recorded view. This does not prove that every possible token has been discovered.';
+  } else if (selectedView === 'tokens') {
+    const tokens = state.details.tokens.filter(t => t.environment !== 'testnet');
+    $('kira-note-text').textContent = `There are ${tokens.length} recorded mainnet tokens. ${tokens.filter(t => t.value_usd == null || t.unpriced_count > 0).length} have unpriced amounts. I keep tokens on different networks separate, even when their symbols match.`;
+  } else if (selectedView === 'activity') {
+    const running = typeof jobList === 'undefined' ? 0 : jobList.filter(KiraView.active).length;
+    $('kira-note-text').textContent = running ? `${running} local research ${running === 1 ? 'job is' : 'jobs are'} in progress. The timeline shows the last recorded stage, elapsed time and freshness. A quiet stage is not proof that a worker stopped.` : 'There is no recorded job in progress. Completed work stays in the timeline, along with partial results, interruptions and failed attempts.';
+  }
+}
+for (const id of ['all-token-network', 'all-token-pricing', 'all-token-sort', 'all-token-testnets']) $(id).addEventListener('change', () => { catalogPage = 1; renderCatalog(); });
+$('all-token-search').addEventListener('input', () => { clearTimeout(catalogTimer); catalogTimer = setTimeout(() => { catalogPage = 1; renderCatalog(); }, 120); });
+$('tokens-prev').addEventListener('click', () => { catalogPage--; renderCatalog(); });
+$('tokens-next').addEventListener('click', () => { catalogPage++; renderCatalog(); });
+function setWorkspacePane(pane) {
+  document.querySelector('.workspace').dataset.pane = pane;
+  document.querySelectorAll('.mobile-pane-control [data-pane]').forEach(button => button.setAttribute('aria-pressed', String(button.dataset.pane === pane)));
+}
+document.querySelectorAll('.mobile-pane-control [data-pane]').forEach(button => button.addEventListener('click', () => {
+  setWorkspacePane(button.dataset.pane);
+  if (button.dataset.pane === 'kira' && matchMedia('(max-width: 980px)').matches) {
+    document.querySelector('.workspace').scrollIntoView({ block: 'start', behavior: 'instant' });
+  }
+}));
+// Explicit navigation must reveal the selected evidence, including same-route clicks.
+document.addEventListener('click', event => {
+  if (event.target.closest('a[href^="#/"]')) setWorkspacePane('portfolio');
+});
+document.querySelectorAll('[data-brief]').forEach(button => button.addEventListener('click', () => {
+  if (button.dataset.brief === 'coverage') { briefingMode = 'coverage'; renderBriefing(); }
+  else if (button.dataset.brief === 'unpriced') { briefingMode = 'view'; $('all-token-pricing').value = 'unpriced'; catalogPage = 1; navigate('#/tokens'); renderCatalog(); }
+  else { briefingMode = 'view'; navigate('#/activity'); }
+  if (button.dataset.brief !== 'coverage') document.querySelector('.mobile-pane-control [data-pane="portfolio"]').click();
+}));
+window.addEventListener('hashchange', () => { briefingMode = 'view'; setWorkspacePane('portfolio'); renderWorkspace(); });
+try { localStorage.removeItem('kira-draft'); } catch { /* Drafts are now memory-only. */ }
+renderWorkspace();