Files
Shade/packages/shade-widgets
Sterister 96c20cb4b2 fix(session): remember where aliasSession moved a session
aliasSession knew that two labels name the same peer, then threw that
knowledge away. The binding lived only in the caller's memory, so a
restart lost it — and the peer could not repair it from its side.

First contact forces the receiver to label a session by the only sender
hint a relay surfaces, an 8-byte signing-key fingerprint (`fp:<hex>`).
Once the peer announces its canonical address, aliasSession moves the
session there. But the peer keeps sending under `fp:<hex>`, because its
transport derives the same label from the same hint every time. After a
restart the session sat under the canonical address, inbound frames
resolved to `fp:<hex>`, and nothing matched. The peer held a valid
session so it never re-ran X3DH: the failure was permanent, and only a
manual re-link cleared it.

Observed in Prism as `No session for address: fp:579c3b335d66e2c0` on
every receive for three days, with a phone whose every RPC timed out.

StorageProvider gains saveSessionAlias / getSessionAlias /
removeSessionAliasesFor, optional so third-party implementations keep
compiling, and implemented across all seven backends. Lookups resolve
through resolveLabel(), which runs BEFORE the peer mutex — locking the
alias while mutating the canonical session would let an aliased and a
canonical caller ratchet the same state concurrently.

A live session under a label always wins over an alias, and prekey
envelopes never resolve: both keep a re-link establishing a fresh
session instead of being redirected into the stale one. Aliases are
dropped in resetSession and acceptIdentityChange, and memoized so the
hot path costs no extra read.

The sdk.test.ts case that asserted a dead fp-label encoded the old
behaviour; it now pins the new contract.

Verified: 1166 tests pass (from 1160). With alias persistence disabled
as a negative control, 5 of the 6 new tests fail, including both
restart cases.

Also drops `baseUrl` from the consumer-strict tsconfig — removed in
TS 6.0, and it was failing the typecheck that gates publishing.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-13 19:36:31 +02:00
..

@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.