Two bugs reported after v2.2.0:
1. Input fields and textareas overflowed their container — typing in
Settings / SendModal / NewContactModal would push the border past
the card edge because the renderer's default box-sizing was
content-box and `width: 100%` + padding pushed widths past parents.
Added `*, *::before, *::after { box-sizing: border-box; }` to
index.html. Removes the need for per-element `boxSizing: 'border-box'`
(the existing sprinkles stay for clarity but are now redundant).
2. App went blank when opening a chat — any throw inside Conversation
propagated up through Shell and wiped the whole window, with no way
to navigate out. Added PaneBoundary, a React error boundary scoped
to one Shell pane, keyed on `${section}-(list|detail)` so it resets
when the user switches section. Now a crash shows an inline error
card with message + stack + Retry, while NavBar + StatusBar stay
usable.
Also hardened Conversation against edge cases that were candidates
for the original crash:
* `name` always falls back to shortAddr(address) if all other
branches produce an empty string.
* first letter used for the avatar is computed once, guarded
against empty input with a `?` fallback.
* Header name + short-address line get whiteSpace/overflow/ellipsis
so very long contacts no longer escape the 32px wide sub-column
the way they did for the reporter.
Fonts normalised in the global CSS too — inputs/textareas/buttons now
inherit `font-family` instead of the browser default, which was
breaking the visual rhythm in the Settings cards.
Two problems from the first alpha4 run reported as "blank window + CSP
warning in devtools":
1. CSP was set via <meta> in index.html with a strict policy (script-src
'self'). Vite's dev server uses eval() for HMR, which the strict CSP
blocked at module-load time, so the renderer never ran. The meta CSP
also conflicted with Electron's own security heuristics (hence the
warning even though *we* had a policy — Electron was looking for it
on the HTTP response).
Moved the CSP to electron/main.ts via session.webRequest
.onHeadersReceived. Dev profile enables 'unsafe-eval' + ws:/wss: for
HMR; production profile stays strict (no eval, no remote scripts,
connect-src still wide because the user picks arbitrary node URLs).
2. When window.dchain isn't available (preload failed to load, dev
misconfig, etc.), loadKeyFile() throws inside a useEffect. React
swallows async-effect throws, so the app renders blank forever.
Added:
- requireDchain() guard in storage.ts with an explicit error.
- App.tsx catches boot-effect errors and renders them inline.
- ErrorBoundary.tsx for render-time throws.
- window.addEventListener('error') in main.tsx as a last-resort
paint for throws that escape React entirely.
Also: npm script electron:dev now rebuilds main.ts before spawning
Electron (was a silent concurrency bug — TypeScript errors in main.ts
would produce stale dist-electron/).
PR #4 of the multi-device roadmap — desktop client groundwork. The shell
compiles and runs end-to-end on top of a v2.2.0 node; sections are
placeholders that later alphas fill in with real chat / feed / wallet /
contacts / settings content shared with the mobile client-app.
Scaffold:
* Vite + React + TypeScript renderer; Electron main/preload TS
compiled via a separate tsconfig.
* npm scripts — `dev` (concurrent Vite + Electron), `build`
(installer via electron-builder), `typecheck`.
* electron-builder targets: .dmg / .exe / .AppImage + .deb.
* CSP pins script-src 'self'; connect-src left open so the renderer
can hit any configured node.
Electron main + preload:
* Frame-less window, hiddenInset on macOS, custom-overlay on Windows,
drag region via CSS -webkit-app-region: drag on our TitleBar.
* contextIsolation on, nodeIntegration off, sandbox off (needed for
safeStorage in preload).
* window.dchain.keyfile.{load,save,delete,encryptionAvailable} —
keyfile lives in the OS keychain via Electron safeStorage, with a
plaintext fallback for OSes without an encryption backend.
* window.dchain.dialog.{openFile,saveFile}, .fs.{readText,writeText},
.app.{version,platform}. Everything else still goes over plain
fetch() in the renderer.
Shell (src/shell/):
* TitleBar — draggable 32px strip; DChain brand.
* NavBar — left 72px rail, six sections + Cmd+1..5 keybinds.
* StatusBar — ● online/connecting/offline dot, node URL, current
chain height (polls /api/netstats every 5s).
* Shell — composes the 3 panes; picks { List, Detail } by active
section.
Sections (all stubs — filling in alpha5+):
* Messages, Feed, Contacts, Profile — SectionPlaceholder with notes.
* Wallet — shows the balance reading from /api/address/{pub} as a
first real data binding.
* Settings — node-URL card with live ping + commit, identity card
(shows pub key), about card (reads Electron app.version via IPC).
Auth (src/auth/Welcome.tsx):
* Create — generates Ed25519 + X25519 via tweetnacl, saves via IPC.
* Import — Electron dialog.openFile → parses node.json → saves.
* Pair — stub routed; real poll loop reuses the mobile flow in
alpha5.
Lib (src/lib/):
* types.ts — KeyFile / Contact / Message / NodeSettings mirroring
client-app wire formats.
* storage.ts — keyfile via IPC, settings + contacts + device-registered
marker via localStorage.
* api.ts — fetch wrapper with setNodeUrl + onNodeUrlChange;
getNetStats, getIdentity, fetchDevices, getBalance bindings.
* store.ts — zustand { booted, keyFile, settings, contacts, section }.
docs/ROADMAP.md — desktop subsection updated with per-alpha breakdown.
Next (alpha5): Messages section wired to the relay mailbox, full
conversation view, and the pairing poll loop.
