Adds the foundations Prism's web client (and any future browser-based Shade app) needs: at-rest-encrypted IndexedDB storage that mirrors the SQLite backend byte-for-byte at the AAD/nonce level, browser-safe subpath imports so Vite/webpack/esbuild stop hitting bun:sqlite, and KeyManager support for argon2id and N-factor composite unlock. @shade/storage-encrypted - EncryptedIndexedDBStorage (subpath: /idb) — full StorageProvider using one object store per _enc table; reuses aeadSeal/aeadOpen + row-codec sealers so a row sealed under the SQLite or Postgres backend decrypts under IDB given the same KeyManager. bumpPeerIdentityVersion is atomic under one IDB transaction. - KeyManager argon2id source — memory-hard KDF for low-entropy secrets (PINs). Backed by @noble/hashes/argon2 (already a transitive dep). DEFAULT_ARGON2ID exported (m=64 MiB, t=3, p=1). - KeyManager composite source — HKDF-combine N sub-sources into one master. Every source mandatory; order significant by design; composite-of-composite rejected; optional info string for app-level domain separation. - Subpath exports (/crypto, /sqlite, /postgres, /idb) plus a `browser` condition on the default import that resolves to a barrel excluding the Bun- and Postgres-specific entries. Browser bundles no longer pull bun:sqlite transitively. Tests - 73 tests in shade-storage-encrypted (was 31). New coverage: argon2id determinism + reject paths, composite same-factors → same master, wrong-PIN/passphrase/order-swap → different master, info domain separation, all 28 StorageProvider methods on EncryptedIndexedDBStorage, fingerprint-mismatch rejection, and cross-impl roundtrip with EncryptedSQLiteStorage proving the AAD/ nonce derivation is implementation-agnostic. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@shade/widgets
Embeddable React widgets for live Shade observability. Drop them into any React dashboard (Nova, Orchestrator, your own apps) to show what's happening in your Shade deployment.
Install
bun add @shade/widgets react react-dom
Quick start
import { ShadeProvider, IdentityCard, SessionList, RecentActivity } from '@shade/widgets';
function MyDashboard() {
return (
<ShadeProvider
observerUrl="https://shade.example.com/shade-observer"
token={process.env.SHADE_TOKEN!}
>
<IdentityCard />
<SessionList />
<RecentActivity />
</ShadeProvider>
);
}
You need a running @shade/observer endpoint for the widgets to talk to.
Components
| Component | Description |
|---|---|
<IdentityCard /> |
Your fingerprint, registration ID, init/rotation timestamps |
<SessionList /> |
Active Shade sessions with per-session message counts and DH ratchet steps |
<PrekeyStock lowThreshold={5} /> |
Gauge of remaining one-time prekeys with low-stock warning |
<RecentActivity limit={50} /> |
Live SSE feed of events flowing through the system |
<ServerStatus /> |
Prekey server stats (registered identities, fetches, replenishes, rate limits) |
<FingerprintCompare /> |
Paste a safety number to verify it matches your identity |
<WidgetCatalog /> |
Meta-widget letting users pick which widgets to display |
Letting users pick widgets
<ShadeProvider observerUrl="..." token="...">
<WidgetCatalog
available={['identity', 'sessions', 'prekeys', 'activity', 'server']}
defaultLayout={['identity', 'sessions', 'activity']}
/>
</ShadeProvider>
User selections persist to localStorage. Pass onLayoutChange to override with your own persistence.
Theming
<ShadeProvider observerUrl="..." token="..." themeMode="auto">
Modes: dark (default), light, auto (matches prefers-color-scheme).
Each widget renders self-contained CSS via inline styles — no Tailwind, no external CSS file, no conflicts with your host app.
Hooks
For custom layouts, use the underlying hooks directly:
import { useShadeState, useShadeEvents } from '@shade/widgets';
function CustomWidget() {
const { state, loading } = useShadeState();
const { events, connected } = useShadeEvents();
// ... render whatever you want
}
Polling interval
Default poll for /api/state is 5 seconds. Override:
<ShadeProvider observerUrl="..." token="..." pollIntervalMs={2000}>
The SSE event stream updates instantly regardless of poll interval.