Redesign the native wallet for desktop and mobile

.impeccable/design.json

@@ -0,0 +1,166 @@
+{
+  "schemaVersion": 2,
+  "generatedAt": "2026-07-28T07:42:44.4879462Z",
+  "title": "Design System: BTC09 Wallet",
+  "extensions": {
+    "colorMeta": {
+      "carbon-ink": {
+        "role": "neutral",
+        "displayName": "Carbon Ink",
+        "tonalRamp": ["#101411", "#242b26", "#3a443d", "#566259", "#77837b", "#9ca69f", "#c5ccc7", "#edf0ee"]
+      },
+      "service-white": {
+        "role": "neutral",
+        "displayName": "Service White",
+        "tonalRamp": ["#172019", "#303a32", "#4a574d", "#68756b", "#8c988f", "#afb8b1", "#d3d9d4", "#eef2ee"]
+      },
+      "solder-mask": {
+        "role": "primary",
+        "displayName": "Solder Mask",
+        "tonalRamp": ["#08201a", "#123c32", "#205a4b", "#367866", "#579786", "#80b5a6", "#b0d2c8", "#e1eee9"]
+      },
+      "copper-mark": {
+        "role": "secondary",
+        "displayName": "Copper Mark",
+        "tonalRamp": ["#32140c", "#582315", "#833b24", "#b35632", "#d47a55", "#e9a58a", "#f3cfc0", "#fbefea"]
+      },
+      "connected-signal": {
+        "role": "tertiary",
+        "displayName": "Connected Signal",
+        "tonalRamp": ["#092219", "#103d2e", "#1c6b50", "#318d6e", "#55aa8b", "#83c5aa", "#b4decc", "#e5f3ed"]
+      },
+      "fault-signal": {
+        "role": "tertiary",
+        "displayName": "Fault Signal",
+        "tonalRamp": ["#2c0e0b", "#531b17", "#8f342e", "#b9554e", "#d87c75", "#eaa8a3", "#f4d0cd", "#fbeeed"]
+      }
+    },
+    "typographyMeta": {
+      "display": {
+        "displayName": "Instrument Readout",
+        "purpose": "Available balances and the payment review amount."
+      },
+      "headline": {
+        "displayName": "Screen Headline",
+        "purpose": "One restrained task title per screen."
+      },
+      "body": {
+        "displayName": "Operating Copy",
+        "purpose": "Direct instructions and consequences."
+      },
+      "label": {
+        "displayName": "Silkscreen Label",
+        "purpose": "Addresses, identifiers, heights, check codes, and structural labels."
+      }
+    },
+    "shadows": [],
+    "motion": [
+      {
+        "name": "state-change",
+        "value": "120ms ease",
+        "purpose": "Small color and border responses only; disabled when reduced motion is requested."
+      }
+    ],
+    "breakpoints": [
+      {
+        "name": "instrument-rail",
+        "value": "760px"
+      },
+      {
+        "name": "wide-rail",
+        "value": "1040px"
+      }
+    ]
+  },
+  "components": [
+    {
+      "name": "Primary Button",
+      "kind": "button",
+      "refersTo": "button-primary",
+      "description": "The single decisive action for a screen.",
+      "html": "<button class=\"ds-btn-primary\">Review payment</button>",
+      "css": ".ds-btn-primary { min-height: 52px; padding: 14px 18px; border: 1px solid #111713; border-radius: 2px; background: #111713; color: #ffffff; font: 750 16px/1.2 \"Segoe UI\", system-ui, sans-serif; transition: background 120ms ease, border-color 120ms ease; } .ds-btn-primary:hover { background: #0d2f28; border-color: #0d2f28; } .ds-btn-primary:focus-visible { outline: 3px solid #b35632; outline-offset: 2px; }"
+    },
+    {
+      "name": "Secondary Button",
+      "kind": "button",
+      "refersTo": "button-secondary",
+      "description": "A supporting action with full control weight.",
+      "html": "<button class=\"ds-btn-secondary\">Copy address</button>",
+      "css": ".ds-btn-secondary { min-height: 48px; padding: 13px 18px; border: 1px solid #8b9a91; border-radius: 2px; background: #f8faf7; color: #111713; font: 750 15px/1.2 \"Segoe UI\", system-ui, sans-serif; transition: border-color 120ms ease, background 120ms ease; } .ds-btn-secondary:hover { border-color: #123c32; background: #ffffff; } .ds-btn-secondary:focus-visible { outline: 3px solid #b35632; outline-offset: 2px; }"
+    },
+    {
+      "name": "Wallet Input",
+      "kind": "input",
+      "refersTo": "input",
+      "description": "A full-size field for payment addresses and amounts.",
+      "html": "<label class=\"ds-field\"><span>Recipient address</span><input placeholder=\"Paste BTC09 address\"></label>",
+      "css": ".ds-field { display: grid; gap: 7px; color: #111713; font: 700 14px/1.3 \"Segoe UI\", system-ui, sans-serif; } .ds-field input { min-height: 50px; padding: 12px 14px; border: 1px solid #8b9a91; border-radius: 2px; background: #ffffff; color: #111713; font: 400 16px/1.5 \"Segoe UI\", system-ui, sans-serif; } .ds-field input:focus-visible { outline: 3px solid #b35632; outline-offset: 2px; }"
+    },
+    {
+      "name": "Network Status",
+      "kind": "chip",
+      "refersTo": "status-pill",
+      "description": "A written connection state paired with an LED dot.",
+      "html": "<span class=\"ds-status\"><i></i>Connected</span>",
+      "css": ".ds-status { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #c2cbc4; border-radius: 999px; background: #f8faf7; color: #1c6b50; font: 700 11px/1.4 \"Cascadia Mono\", Consolas, monospace; } .ds-status i { width: 8px; height: 8px; border-radius: 50%; background: #1c6b50; }"
+    },
+    {
+      "name": "Instrument Panel",
+      "kind": "card",
+      "refersTo": "instrument-panel",
+      "description": "The dominant balance and payment-action field.",
+      "html": "<section class=\"ds-instrument\"><small>AVAILABLE BALANCE</small><strong>128.45 <em>09C</em></strong><span>Up to date · block 8,841</span></section>",
+      "css": ".ds-instrument { display: grid; gap: 12px; padding: 32px; border: 1px solid #0d2f28; border-radius: 2px; background: #123c32; color: #f3f6f1; } .ds-instrument small { color: #b8cbc3; font: 700 11px/1.4 \"Cascadia Mono\", Consolas, monospace; letter-spacing: .12em; } .ds-instrument strong { font: 800 52px/.95 \"Segoe UI\", system-ui, sans-serif; letter-spacing: -.03em; } .ds-instrument em { color: #b8cbc3; font: 700 14px/1.2 \"Cascadia Mono\", Consolas, monospace; font-style: normal; } .ds-instrument span { color: #b8cbc3; font: 400 14px/1.4 \"Segoe UI\", system-ui, sans-serif; }"
+    },
+    {
+      "name": "Desktop Instrument Rail",
+      "kind": "nav",
+      "description": "Persistent desktop wallet state and top-level navigation.",
+      "html": "<nav class=\"ds-rail\"><strong><b>09</b> BTC09 <small>WALLET</small></strong><button class=\"active\">Wallet</button><button>Activity</button><button>Settings</button><p>Keys stay on this device.</p></nav>",
+      "css": ".ds-rail { width: 220px; min-height: 420px; padding: 24px 16px; display: flex; flex-direction: column; gap: 4px; background: #123c32; color: #f3f6f1; font: 650 14px/1.3 \"Segoe UI\", system-ui, sans-serif; } .ds-rail strong { display: flex; align-items: center; gap: 9px; margin: 0 6px 28px; } .ds-rail strong b { padding: 11px 9px; border: 2px solid #b35632; font: 500 17px Georgia, serif; } .ds-rail strong small { color: #b8cbc3; } .ds-rail button { min-height: 52px; padding: 10px 12px; border: 1px solid transparent; border-radius: 2px; background: transparent; color: #b8cbc3; text-align: left; font: inherit; } .ds-rail button:hover, .ds-rail button.active { border-color: rgba(243,246,241,.34); background: rgba(243,246,241,.08); color: #f3f6f1; } .ds-rail button:focus-visible { outline: 3px solid #b35632; outline-offset: 2px; } .ds-rail p { margin: auto 10px 0; padding-top: 18px; border-top: 1px solid rgba(243,246,241,.18); color: #b8cbc3; font: 600 10px/1.5 \"Cascadia Mono\", Consolas, monospace; }"
+    }
+  ],
+  "narrative": {
+    "northStar": "The Inspectable Instrument",
+    "overview": "BTC09 Wallet feels like a purpose-built payment instrument rather than a token portfolio or a miniature marketing site. Its visual world comes from circuit-board silkscreen, bench instruments, and service documentation: every line indicates structure, every status has a label, and important actions visibly lead to their consequence. The experience stays composed and calm under normal use. Expression comes from disciplined geometry, the square 09 mark, trace-like dividers, instrument labels, and purposeful state changes.",
+    "keyCharacteristics": [
+      "Cool mineral surfaces with one established copper accent.",
+      "Flat, inspectable panels separated by trace lines and tonal fields.",
+      "Square or lightly relieved controls with unmistakable states.",
+      "Dense enough for desktop, direct enough for a phone.",
+      "Tabular amounts and readable technical identifiers."
+    ],
+    "rules": [
+      {
+        "name": "The Copper Limit Rule",
+        "body": "Copper identifies the product and decisive action; it never becomes a decorative wash.",
+        "section": "colors"
+      },
+      {
+        "name": "The Readout Rule",
+        "body": "Numeric values align; technical strings wrap or truncate deliberately; neither is shrunk into illegibility.",
+        "section": "typography"
+      },
+      {
+        "name": "The Bench Rule",
+        "body": "If a surface appears raised, it must be because the user can act on it or because it is temporarily above the working plane.",
+        "section": "elevation"
+      }
+    ],
+    "dos": [
+      "Do show the current network and payment state in words as well as color.",
+      "Do use trace lines to clarify hierarchy and relationships.",
+      "Do let the desktop app feel like desktop software.",
+      "Do reserve the largest type for balances and irreversible review moments.",
+      "Do retain familiar send, receive, activity, backup, and settings affordances."
+    ],
+    "donts": [
+      "Don't build a dark neon crypto dashboard.",
+      "Don't use warm cream cards, glass panels, floating gradients, or ornamental glow.",
+      "Don't decorate with generated coin renders or blockchain stock imagery.",
+      "Don't hide transaction consequences behind animation or technical jargon.",
+      "Don't introduce remote fonts, analytics, or assets that weaken the wallet's local security boundary."
+    ]
+  }
+}

.impeccable/surfaces/desktop-assets-index-html.md

@@ -0,0 +1,17 @@
+---
+version: 1
+slug: "desktop-assets-index-html"
+primary_target: "desktop/assets/index.html"
+related_targets: ["desktop/assets/app.css","desktop/assets/app.js","desktop/assets/miner.css","desktop/assets/miner.js","tools/desktop/native-smoke.mjs"]
+---
+
+# BTC09 Bundled Desktop Wallet Surface
+
+- **Scope / mode:** The core-hosted surface packaged inside the Windows, macOS, and Linux Tauri wallet. Operate.
+- **Audience / job:** Desktop users creating or restoring an encrypted wallet, checking funds, receiving, reviewing and sending payments, reading history, combining small payments, backing up, and optionally mining from the full client.
+- **Primary task:** Keep the wallet state and next safe action obvious without hiding desktop evidence or reducing the application to a phone-sized column.
+- **Evidence / content:** Use only authenticated loopback-core status, wallet, activity, preview, cleanup, backup, and miner data. Do not invent price, exchange, latency, or portfolio data.
+- **Chosen direction:** The Inspectable Instrument. The bundled desktop UI uses the same solder-mask rail, copper square mark, flat trace panels, restrained typography, and explicit review hierarchy as the Android/iPhone surface.
+- **Memorable moment:** The balance and action bay reads as one instrument, followed by a flat ledger where receive, send, activity, cleanup, backup, and mining retain their full desktop capabilities.
+- **Constraints:** Preserve loopback token authentication, CSRF, navigation policy, wallet-only build stripping, recovery confirmation, local password encryption, 48 px primary controls, readable identifiers, and the existing core API.
+- **Verification:** `tools/desktop/native-smoke.mjs` must exercise the embedded assets from a freshly built wallet-only core, assert the instrument geometry and colors, capture onboarding/receive/send/activity, and confirm the miner surface is absent.

.impeccable/surfaces/walletapp-src-mobile-html.md

@@ -0,0 +1,17 @@
+---
+version: 1
+slug: "walletapp-src-mobile-html"
+primary_target: "walletapp/src/mobile.html"
+related_targets: ["walletapp/src/mobile.css","walletapp/src/mobile.js"]
+---
+
+# BTC09 Wallet Surface
+
+- **Scope / mode:** Wallet operations across desktop and phone webviews. Operate.
+- **Audience / job:** New and existing 09C holders checking funds, receiving, reviewing and sending payments, reading confirmations, and protecting recovery access without terminal knowledge.
+- **Primary task:** Make current wallet state and the next safe payment action obvious. Preserve the complete create, restore, lock, backup, receive, send, activity, and settings flows.
+- **Evidence / content:** Use only wallet-plugin status, address, height, activity, preview, and recovery data already available. Do not invent price, peers, latency, portfolio, or exchange data.
+- **Chosen direction:** The Inspectable Instrument, composition A. A desktop instrument rail anchors a dominant balance/action field and aligned transaction ledger; on phones it collapses to the established bottom navigation.
+- **Memorable moment:** A payment moves from input to an explicit review readout with destination, fee, total, and check code shown like an inspectable instrument result.
+- **Constraints:** Self-custody, local assets only, no analytics, no terminal language, 48 px touch targets, keyboard focus, reduced motion, readable identifiers, and no color-only state.
+- **Unresolved:** Trusted platform signing and store distribution are release concerns, not interface claims.