Interactive, responsive prototypes for the Relay app overhaul, built on the shipped v3.5-a neutral-first system (tokens.css, verbatim). One universal collapsible rail and a principal top-bar search (⌘K command palette) span every screen. Staged here to riff and confirm before the screens land in relay-app.
Screens confirmed onto the real nav (shell.html's canonical rail groups) and built on the identical shell anatomy — rail, ⌘K top-bar search, list-shell facets. Land in relay-app in tandem.
How the Root Manifest is set up and incorporated across the app: the per-user entry vertex projected into many lenses (agent boot, the Overview home, the Graph Map) from one engine. Cross-page breakdown, the shape-encoded node vocabulary (type = shape, never colour), and the recurring “live projection” callout.
The app home renders the owner projection of the Root Manifest — the same map the agent gets at boot and the Graph Map draws (one ground truth, three lenses). A quiet setup nudge (dismissible, one line) points at the dedicated welcome.html screen instead of hosting the full onboarding card inline. Counts strip, unclaimed callout, Streams with attention-share health meters, Series, open Sessions, and Recent relays with read-only provenance (created / claimed / forwarded · sender · via_code when present). The topbar bell is now a working inbox popover with quick notification options (email digest / push alerts). Pointers only, never bodies. Nodes drawn in the gc-* kit vocabulary (RCTX-396) so they swap to the real components with no drift. Fail-open: ?state=empty · ?state=loading.
Getting started, split off Overview onto its own route: a welcome header, a three-step "how Relay works" explainer, and the full-emphasis multi-step setup card (verify email → connect an agent → receive the welcome Code → send your first relay → invite a teammate). Reached from the Overview .setup-nudge or the bell's "Finish setting up" notice, never gating — a plain Skip for now returns to Overview. Same shell, no active rail item (not a permanent destination). The compact tertiary version still lives on Profile → Setup.
The design system at a glance, rendered with the shipped CSS — tokens & accent roles, type registers, buttons (ink-flip), badges/chips/status dots, the Code artifact, cards, editorial head, the tool help card (.fi-panel), timeline, empty states — plus the quiet easter eggs (code scramble, signal ripple, console greeting). Light/dark.
The Graph's object vocabulary, interactive: the settled shape alphabet (type = shape, never colour), live type-filter chips wired to the honest counter, .gc-li ranked-twin rows with selection, Code chips (copy + scramble egg), the edge dash grammar, and a playground that composes a row and shows the exact shipped markup. Rendered with the verbatim graph/graph.css.
The universal collapsible rail (56 ↔ 220, brand-mark toggle, hover labels, tier hairlines), workspace switcher, top bar with ⌘K + a now-working bell popover (unread inbox + email/push notification-option toggles) — mirroring the live nav structure, with the slated IA changes annotated (#606 org-connections, #456 status fold, #609 account hub) plus a note on onboarding's move to its own screen.
Every screen in the live app with its v3.5 conformance state — shipped / partial / legacy — source module, and the issue that moves it. The honest per-screen burn-down for epic #475/#449.
The shared list-shell anatomy — direction pills · status/state filters · saved views · active-filter chips · count · sort · density (cards / compact / table) · pager — over 120 rows. Search is the top-bar ⌘K palette, not a per-screen box. Outgoing/Incoming vocabulary, honest time, Code copy + scramble, received-tint cards. Full light/dark + mobile — one universal collapsible rail (56px icon rail, tap to expand as an overlay) and a filter sheet; no bottom tab bar.
Named sequences of context, one thread per series. Status pills (All / Active / Archived), Starred / Mine / Has-updates, participant avatars, relay counts, latest Code, and the same density toggle. Table view has click-to-sort columns (Name / Relays / Status / Scope / Updated).
AI agent sessions with the distinctive bits: Open / Closed status, handoff chains (continues / handed off / chained), the agent model, Stream linkage, and workspace. Filter by Handoffs; sort the table by Session / Status / Agent / Relays / Updated.
Stream's own toolbar — search bar, sort dropdown (Last activity / Stalest first / Most items / Recently read / Title A→Z / Created), and the combinable status/type/tag filter-chip row — is the brief's confirmed "most complete, natural donor pattern" and is kept as-is, not redesigned into Transfers' popover facets. The one real gap: Stream renders its entire filtered list with no pager. Adds Transfers' pager component (range · ‹ page numbers › · page size 25/50/100) below the list, plus the personal focus-area hero card, unread pills, staleness-coded age, and a weight bar per card. The has-content guard for the "Meet Stream" intro is already shipped (feature-intro.ts / stream.ts, #455/#604) — not re-touched here.
The Send form's own progressive disclosure — essentials (title, content, recipient, visibility, max receives) plus the already-shipped "More options" disclosure (tags, expiry, bring-back, series) — is already shipped (send-claim.ts's send-more-options + updateSendMoreOptionsCount()) and reproduced here as-is, not redesigned. The real, confirmed gap was the empty right half of the viewport: adds a live recipient-side preview that updates on every keystroke — the claim-landing card a recipient would actually see (title, sender identity, content preview, visibility badge, tags, receives-left/unlimited, expiry), modeled on doClaimPreview()'s real fields.
The unsectioned ~10-card scroll (Plan, Agreements, Profile, Communications, Privacy & Defaults, Session Relays, Slack, Notifications, Loop, Danger Zone) gets a sticky anchor rail — Account / Notifications / Integrations / Program / Danger — with scroll-spy, chosen over tabs so nothing (a skeleton, an error state) ever hides behind an unselected panel. EC-confirmed scope (2026-07-18 issue comment), not a fresh interpretation: change-password UI is omitted entirely (Relay is OTP-only — already gone from the real settings.ts/index.html too, confirmed by re-reading them), the timezone picker defaults to the browser-detected zone instead of first-alphabetical (also already fixed in datetime.ts — this prototype mirrors the real fix rather than re-deriving it), and Export moves out of Danger Zone into its own non-destructive "Data" card near Privacy. Demo strip toggles every async card (Plan/Loop/Slack/Notifications/Communications/Agreements/Autojoin) through loading-skeleton and failure states.
Tags (stub) and the shipped server-side Labels (stub — already live, 2026-07-18) sit alongside the new Objects tab (default/active here): a real cross-type table over the whole relay object base — relays, series, sessions, streams in one place. Type facet with counts, a text/tag filter, click-to-sort columns (Name/Title, Type, Status, Updated), a count line, and the Transfers pager component reused near-verbatim. Row click opens a peek drawer with per-type fields and a real "Open in Transfers / Series / Sessions / Stream →" link — every in-scope object type already has a live destination today, so none of the four needed a "#488 coming soon" stub. Table is written so a future deleted-only variant (Trash, #607) or search drill-down (#456) doesn't require a rewrite.
The object map — Streams, Series, Sessions, Relays, Resources and the edges between them — as a live screen in the shell (the same projection the Manifest and Overview draw, higher N). Map / List, type filters, an arrange lens (Force / Time / Orbit / Heat / Owner), time window, and honest counts. Focus mode tucks the rail, top bar, and header for a full-frame canvas, with the controls behind a window-shade pull-tab (F / Esc, top-edge hover on desktop, tap on touch). Saved views recall / save / rename filter+lens+window presets in the shared .view chip idiom.
The member-facing half of the billing lifecycle, on the shipped rail (Billing sits under Account). Plan and seats, usage against the plan contract, invoices and receipts, payment method. Its core is the three states the platform actually resolves: active, past_due (retrying, full access retained) and unpaid (dunning exhausted, effective tier drops to the Free contract). Switch state in the header and the usage ceilings move to Free with over-limit treatment, the alert band offers the hosted invoice, and the document row flips to Pay invoice — nothing is deleted and billing stays reachable in every state. Deep-linkable: ?state=retrying / ?state=paused. Mirrors relay-platform RCTX-996 / 997 / 998; documents anticipate RCTX-993.
Org-admin self-service RBAC (the org plane). Members with base-role dropdowns, org groups (Engineering / Contractors / On-call), and a New-group form whose capability picker locks what you don't hold — the delegation firewall made visible (members.role.assign / owner-only stay locked; platform capabilities never appear). Read-only role reference matrix. The platform plane lives in the console (concepts/console-v35/ → Roles & access). Model: briefs/SPEC.rbac.md.
The Connect screen in the shell — a two-act flow that unifies the MCP connector with the universal agent launcher. Act 1: the MCP-URL hero (click-to-copy) + a client picker tiered by install mechanism — one-click deep link (Claude · Cursor · VS Code, + Insiders), copy-a-command CLI (Claude Code), config snippet (ChatGPT, Windsurf, Zed, Kiro, …) — each swapping its setup inline. A live handshake pulse (breathe → check → spark) then reveals Act 2: the shippable launcher, pre-filled with a starter Code. ?state=connected shows the per-agent connection cards; ?theme=dark for dark. Ports connect-experience.html onto the shell. Brief: BRIEF.connect-activation.
Every screen in the neutral dark ramp (canvas darkest, cards lighter; teal #2dd4bf, ink-flip buttons). Append ?theme=dark to any prototype.
Riffing on the same shell anatomy but not yet confirmed into shell.html's canonical nav groups. Moves up into "App shell — as shipped" once the IA is agreed and it's wired into the real rail.
The Search Experience v2 plan (relay-board PRD.search-experience-v2) made clickable: the full /search screen and the ⌘K palette sharing one parser, scorer, and result-row spec. Two-pass results (instant local pass → engine pass merging in), narrowing operators (type: in: status: from: #tag) with live chips, facet rail with honest counts, the annotations the API already computes finally rendered (unread dot, ⚡ agent-touched), Code-status card gated on real intent (an existing Code, or typed uppercase — "deploy" no longer summons a status card over its own results), zero-query discovery (pick up where you left off · unread · agents active now), saved searches + settled-only recents, and the URL as shareable state. Demo hooks: ?q=… · ?cmdk=1 · ?theme=dark. Full light/dark + mobile.
Map and manage who you're connected to — people and organizations. "Waiting on you" / "Waiting on them" sections surface pending connection requests, modeling the fix for the approve+connect gap on relay claims: today it auto-links instantly with no second approval; this concept makes the recipient (Ada) accept first, and both sides then see it here as Connected. Built on the confirmed rail/⌘K shell — ties into shell.html's #606 "Org Connections leaves the rail" note as one candidate landing spot.
Same concept screen in the neutral dark ramp.
The custody flip inside the shipped shell anatomy — real sidebar with a functional workspace switcher (dropdown + [/] cycling, lens-flip transition), topbar with region readout and the bell popover carrying guided switches, and the Transfers screen strictly scoped per context: claim simulator, Pass → across joined workspaces, per-object provenance timelines. This is what RCTX-979 feels like in the actual app. Keys: [ ] · 1-3 · h · b · j/k · o · p · t theme.
Clickable prototype for SPEC-address-custody-v1 / RCTX-979 with the rulings baked in: strict scoping (v1's blend toggle is resolved and removed), the org-tagged bell with guided switching (tap → lens flips → lands on the item), one-tap Home, per-membership address mapping (1:1 picker), the claim simulator (mapped / unmapped / entitlement-lapsed fallback), and — new in v2 — Pass → between joined workspaces with the per-object timeline carrying provenance across the wall, visible from both sides (data crosses org walls only as a relay). App-side only; console is a separate surface.
relay-app/packages/ui/tokens.css (copied here as tokens.css) — role-split dual-value teal, neutral surfaces, Cormorant Garamond / Outfit / JetBrains Mono. One universal collapsible rail + top-bar ⌘K search span every screen. Graph and Connect are now live screens in the shell.#page-connect now.