Files
Shade/packages/shade-widgets
Sterister 7520b11b25
Some checks failed
Test / test (push) Has been cancelled
Docker build and publish / docker (push) Has been cancelled
Publish / publish (push) Has been cancelled
release(v4.2.0): pull-mode streams for browser @shade/files
4.1.0's HTTP RPC for browsers capped at inline payloads (≤ 256 KiB).
4.2.0 unlocks streams: server queues outbound chunks + control
envelopes per peer, browser long-polls the queue. Browser-to-server
writes ride the existing /v1/transfer/<id>/chunk POST routes
unchanged.

For Dispatch this unlocks mod-jar uploads (50 MB) and world-backup
downloads (100+ MB) — the actual reason browser-side @shade/files
matters.

### New API

@shade/sdk:
- shade.transferQueueRoute(opts?) — Hono app with /queue +
  /v1/transfer/* routes. Auto-configures the queue transport.
- shade.configureTransfers extended: transport + envelopeTransport
  override slots; resolveBaseUrl optional when both supplied.

@shade/transfer:
- OutboundQueue — per-peer monotonic event log with long-poll
  semantics, idle-eviction GC, ring-buffered to maxEventsPerPeer.
- QueueTransferTransport — enqueues instead of POSTing.

@shade/files:
- httpClient({ outboundQueueUrl, transferBaseUrl }) — when set,
  starts a long-poll drainer + builds a streams-bridge. fs.read /
  fs.write of >256 KiB work end-to-end.
- startQueueDrainer(shade, opts) — exported helper for advanced
  consumers driving their own drainer.

### Implementation notes

- ClientStreamsBridge's TransformStream had HWM=0 by default which
  stalled the drainer's await chain at chunk 4 (writer.write pended
  before the consumer's reader was attached). Bumped to HWM=64 so
  the receive loop can buffer ahead of the consumer.

### Tests

3 new integration tests in tests/integration/http-rpc-streams.test.ts:
4 MiB streamed read round-trip, inline-only error path, idle-timeout
long-poll behaviour.

Wire-compatible. Source-compatible. Lockstep bump to 4.2.0.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-03 23:27:06 +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.