diff --git a/README.md b/README.md
index cf61261..0cc36da 100644
--- a/README.md
+++ b/README.md
@@ -40,36 +40,29 @@ npm install @invisible-labs/sdk@0.9.0-devnet
 The folder depends only on React and the public SDK. It imports no app components, routing, design system, Vite environment variables or private workspace packages.
 
 ```tsx
+import { useState } from "react";
 import { invisibleDevnet } from "@invisible-labs/sdk/presets";
-import { useInvisibleSession, usePrivateTransfers, useTransferStatus } from "./invisible";
-
-const coordinatorUrl = invisibleDevnet();
+import { usePrivateTransferController } from "./invisible";
+import { PrivateTransferWidget, type TransferTab } from "./invisible/ui";
+import "./invisible/styles.css";
 
 function PrivateTransfer() {
-  const connection = useInvisibleSession(coordinatorUrl);
-  const transfers = usePrivateTransfers(connection.session, coordinatorUrl);
-  const status = useTransferStatus(connection.session, transfers.selected, connection.fail);
-
-  return <>
-    <button onClick={() => void connection.connect()}>Connect</button>
-    <button disabled={!connection.session || !transfers.loaded || transfers.busy || transfers.creationBlocked}
-      onClick={() => void transfers.createTransfer({
-        amountSol: "1.5",
-        destination: "YOUR_SOLANA_DESTINATION_ADDRESS",
-        deadlineMs: 0,
-      })}>Create transfer</button>
-    <p>{status.view?.state}</p>
-    <p role="alert">{connection.error?.message ?? transfers.error?.message ?? status.error?.message}</p>
-  </>;
+  const controller = usePrivateTransferController(invisibleDevnet());
+  const [tab, setTab] = useState<TransferTab>("transfer");
+  return <PrivateTransferWidget controller={controller} tab={tab} onTabChange={setTab} />;
 }
 ```
 
-See [`src/App.tsx`](src/App.tsx) for the complete deposit, saved-transfer, Recovery Code and refund UI. See the [folder guide](src/invisible/README.md) for lifecycle and integration details.
+The controller opens one attested session and coordinates the existing hooks. The widget provides address input, review, deposit instructions, activity and refunds. It never opens another session. The parent controls the tab so navigation can be shared with its own header.
+
+For your own design, import the controller or individual hooks from `./invisible`; import only the display modules you need from `./invisible/ui`. UI styles are scoped to `.invisible-widget`. Wrap standalone display modules in that class, and customize `--invisible-*` variables on the wrapper. Do not copy the demo's global `src/style.css`.
+
+See the [folder guide](src/invisible/README.md) for module interfaces, lifecycle and safety rules. [`src/App.tsx`](src/App.tsx) only supplies the demo route, header and navigation.
 
 ## Ownership and safety
 
 - **SDK:** WebSocket transport, Noise, attestation, DKG/delegation, policy validation, recovery codes, typed errors and local transfer records.
-- **Hooks:** React cleanup, command concurrency, selected transfer, polling, refresh subscriptions and readable errors.
+- **Hooks/controller:** React cleanup, command concurrency, selected transfer, polling, refresh subscriptions, deposit/refund guards and readable errors.
 - **Application:** form/UI, external wallet deposit and your storage/privacy policy.
 - `SyncRequired` messages carry refresh hints. Only `sync` provides lifecycle truth.
 - Polling never overlaps; retries apply to reads. A failed attestation stops the session. Disconnect closes it; reconnect creates and attests a fresh one. Select a saved transfer to resume reads.
diff --git a/docs/adr/0003-reusable-transfer-ui.md b/docs/adr/0003-reusable-transfer-ui.md
new file mode 100644
index 0000000..6bf109b
--- /dev/null
+++ b/docs/adr/0003-reusable-transfer-ui.md
@@ -0,0 +1,35 @@
+# ADR-0003: Reusable transfer interface
+
+Status: Accepted
+Date: 2026-10-08
+
+## Problem
+
+The SDK hooks were copyable, but the demo App mixed session orchestration, financial eligibility and all display modules. Integrators could not copy the complete interface independently of the demo layout.
+
+## Options considered
+
+- Split JSX alone: financial guards remain tied to the demo.
+- Add a global store/provider: introduces another lifecycle and dependency surface.
+- Compose the existing hooks in one controller and export separate display modules.
+
+## Decision
+
+Use one headless controller per integration and pass it to display modules. Keep everything reusable inside `src/invisible/`, with separate headless/UI exports and scoped CSS. App owns demo configuration, layout and navigation. Keep draft input in the form and SDK protocol behavior in the existing hooks/package.
+
+## Why
+
+A consumer can copy one folder, use the complete widget or replace its presentation, while retaining the same command guards and authoritative status handling.
+
+## Risks
+
+A consumer composing individual modules must retain eligibility and review confirmation. Scoped CSS requires native nesting; dialogs/popovers/Web Locks retain their existing browser requirements. Widgets on the same origin share mutation markers.
+
+## Follow-up
+
+Verify the copied folder in an independent host, multiple instances, keyboard/mobile behavior and financial failure guards. Revisit dependencies only for a measured requirement.
+
+## References
+
+- [Integration interfaces](../../src/invisible/README.md)
+- [Original integration decision](0001-copyable-public-sdk-hooks.md)
diff --git a/docs/repo-actions.md b/docs/repo-actions.md
index 6a04996..9435163 100644
--- a/docs/repo-actions.md
+++ b/docs/repo-actions.md
@@ -5,7 +5,7 @@
 | `npm ci` | Install the pinned public dependencies | Lockfile installed; no GitHub token required |
 | `npm run dev` | Start Vite locally | URL printed; SDK session opens on page load; no financial mutation until review confirmation |
 | `npm run typecheck` | Validate TypeScript and public SDK types | Exit 0 |
-| `npm test` | Run adapter behavior tests | All tests pass |
+| `npm test` | Run hook/controller and reusable UI behavior tests | All tests pass |
 | `npm run build` | Typecheck and produce static assets | `dist/` created |
 | `npm run preview` | Serve the production bundle locally | Preview URL printed |
 | `npm run check` | Run tests and production build | Exit 0 |
diff --git a/src/App.test.tsx b/src/App.test.tsx
index f7c776a..c07656a 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -1,8 +1,11 @@
+import { createRef, useState, type FormEvent } from "react";
 import { act, cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import { createSession, type Session, TransportError } from "@invisible-labs/sdk";
 import { contractRequest, listPersistedTransfers, requestRefund, sync, type ContractRequestResult, type PersistedTransfer, SUPPORTED_TOTAL_DEADLINE_MS } from "@invisible-labs/sdk/user";
 import App from "./App";
+import { usePrivateTransferController } from "./invisible";
+import { PrivateTransferWidget, TransferReview, type TransferTab } from "./invisible/ui";
 
 vi.mock("@invisible-labs/sdk", async importOriginal => {
   const actual = await importOriginal<typeof import("@invisible-labs/sdk")>();
@@ -123,3 +126,41 @@ it("never displays expired or terminal deposit instructions or terminal bearer m
   expect(screen.queryByText("Recovery Code")).toBeNull();
   expect(screen.queryByRole("button", { name: "Request refund" })).toBeNull();
 });
+
+it("two copied widgets keep independent inputs, payout choices and accessible identifiers", async () => {
+  const COORDINATOR_URL = "wss://coordinator.example/ws-noise";
+  function Integration({ name }: { name: string }) {
+    const controller = usePrivateTransferController(COORDINATOR_URL);
+    const [tab, setTab] = useState<TransferTab>("transfer");
+    return <section aria-label={name}><PrivateTransferWidget controller={controller} tab={tab} onTabChange={setTab} /></section>;
+  }
+  render(<><Integration name="First widget" /><Integration name="Second widget" /></>);
+  await waitFor(() => expect(createSession).toHaveBeenCalledTimes(2));
+  const first = screen.getByRole("region", { name: "First widget" });
+  const second = screen.getByRole("region", { name: "Second widget" });
+  fireEvent.change(within(first).getByLabelText("Destination address"), { target: { value: DESTINATION } });
+  expect((within(second).getByLabelText("Destination address") as HTMLInputElement).value).toBe("");
+  const firstChoices = within(first).getAllByRole("radio", { hidden: true });
+  const secondChoices = within(second).getAllByRole("radio", { hidden: true });
+  fireEvent.click(firstChoices[1]);
+  expect((firstChoices[1] as HTMLInputElement).checked).toBe(true);
+  expect((secondChoices[0] as HTMLInputElement).checked).toBe(true);
+  const ids = [...document.querySelectorAll("[id]")].map(node => node.id);
+  expect(new Set(ids).size).toBe(ids.length);
+  expect(within(first).getByRole("button", { name: "Transfer settings" }).getAttribute("popovertarget"))
+    .not.toBe(within(second).getByRole("button", { name: "Transfer settings" }).getAttribute("popovertarget"));
+  expect(contractRequest).not.toHaveBeenCalled();
+  expect(requestRefund).not.toHaveBeenCalled();
+});
+
+it("the reusable review confirms without submitting its host form", async () => {
+  const ref = createRef<HTMLDialogElement>();
+  const onConfirm = vi.fn(async () => {});
+  const onSubmit = vi.fn((event: FormEvent) => event.preventDefault());
+  render(<form onSubmit={onSubmit}><TransferReview ref={ref} canCreate={true} input={{ amountSol: "1.5", destination: DESTINATION, deadlineMs: 0 }} onConfirm={onConfirm} /></form>);
+  act(() => ref.current!.showModal());
+  fireEvent.click(screen.getByRole("button", { name: "Create private transfer" }));
+  expect(onConfirm).toHaveBeenCalledTimes(1);
+  expect(onSubmit).not.toHaveBeenCalled();
+  expect(contractRequest).not.toHaveBeenCalled();
+});
diff --git a/src/App.tsx b/src/App.tsx
index 0366faa..9075d4b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,207 +1,61 @@
-import { useEffect, useRef, useState, type FormEvent } from "react";
-import { publicKey } from "@invisible-labs/sdk";
+import { useState } from "react";
 import { invisibleDevnet } from "@invisible-labs/sdk/presets";
-import {
-  INSTANT_PAYOUT_WINDOW_MS, MIN_ENTRY_AMOUNT_LAMPORTS, MAX_ENTRY_AMOUNT_LAMPORTS,
-  SUPPORTED_TOTAL_DEADLINE_MS, recoveryCodeToHex,
-} from "@invisible-labs/sdk/user";
-import { formatSol, isTerminalState, parseSolAmount, toUiError, useInvisibleSession, usePrivateTransfers, useTransferStatus, type InvisibleUiError } from "./invisible";
-
-const COORDINATOR_URL = import.meta.env.VITE_INVISIBLE_COORDINATOR_URL?.trim() || invisibleDevnet();
-const MILLISECONDS_PER_MINUTE = 60_000;
-const MILLISECONDS_PER_HOUR = 60 * MILLISECONDS_PER_MINUTE;
-const MILLISECONDS_PER_DAY = 24 * MILLISECONDS_PER_HOUR;
-const ADDRESS_PREVIEW_LENGTH = 6;
-const SOURCE_URL = "https://github.com/Invisible-Labs/invisible-sdk-react-example";
+import { usePrivateTransferController } from "./invisible";
+import { PrivateTransferWidget, type TransferTab } from "./invisible/ui";
+import "./invisible/styles.css";
+
+const COORDINATOR_URL =
+  import.meta.env.VITE_INVISIBLE_COORDINATOR_URL?.trim() || invisibleDevnet();
+const SOURCE_URL =
+  "https://github.com/Invisible-Labs/invisible-sdk-react-example";
 const DOCS_URL = "https://docs.invisible.exchange/docs/sdk/";
-const SETTINGS_ID = "transfer-settings";
-const HELP_ID = "integration-help";
-const shortAddress = (address: string) => `${address.slice(0, ADDRESS_PREVIEW_LENGTH)}...${address.slice(-ADDRESS_PREVIEW_LENGTH)}`;
-function windowLabel(windowMs: number) {
-  if (windowMs === INSTANT_PAYOUT_WINDOW_MS) return "Instant";
-  const [duration, unit] = windowMs >= MILLISECONDS_PER_DAY ? [windowMs / MILLISECONDS_PER_DAY, "day"] : windowMs >= MILLISECONDS_PER_HOUR ? [windowMs / MILLISECONDS_PER_HOUR, "hour"] : [windowMs / MILLISECONDS_PER_MINUTE, "minute"];
-  return `${duration} ${unit}${duration === 1 ? "" : "s"}`;
-}
-const PHASE_LABELS: Record<string, string> = {
-  awaiting_deposit: "Waiting for deposit", activating: "Activating transfer", waiting_for_liquidity: "Waiting for liquidity",
-  retry_delayed: "Settlement delayed", recovery_required: "Recovery needed", matched_scheduled: "Payout scheduled",
-  locked_pending_payout: "Preparing payout", submitted: "Payout submitted", confirming: "Confirming payout",
-  completed: "Transfer complete", refund_pending: "Refund pending", refunded: "Refund complete", expired: "Transfer expired",
-};
-const ICON_PATHS = {
-  arrow: "M12 4v16m-7-7 7 7 7-7", chevron: "m6 9 6 6 6-6", close: "m6 6 12 12M6 18 18 6",
-  clock: "M12 7v5l3 2", check: "m5 12 4 4L19 6", copy: "M9 9h11v11H9zM5 15H3V3h12v2",
-  help: "M9.5 8a2.5 2.5 0 1 1 4 2c-1 .6-1.5 1-1.5 2m0 4h.01",
-  settings: "M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8M9 3h6l1 3 3 1 2 5-2 5-3 1-1 3H9l-1-3-3-1-2-5 2-5 3-1z",
-} as const;
-function Icon({ name }: { name: keyof typeof ICON_PATHS }) {
-  return <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
-    {(name === "clock" || name === "help") && <circle cx="12" cy="12" r="9" />}<path d={ICON_PATHS[name]} />
-  </svg>;
-}
-function SolIcon() {
-  return <span className="sol-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="m5 4 16 0-3 4H2zm-3 6h16l3 4H5zm3 6h16l-3 4H2z" /></svg></span>;
-}
-function ErrorMessage({ error }: { error: InvisibleUiError | null }) {
-  return error ? <p role="alert" className="error">{error.message}{error.remoteAccepted ? " This request was already accepted. Check its saved status before submitting again." : ""}</p> : null;
-}
-function CopyValue({ label, value }: { label: string; value: string }) {
-  const [error, setError] = useState<InvisibleUiError | null>(null);
-  const [copied, setCopied] = useState(false);
-  async function copy() {
-    try { await navigator.clipboard.writeText(value); setCopied(true); setError(null); }
-    catch (error) { setError(toUiError(error)); }
-  }
-  return <div className="copy-value"><span className="muted">{label}</span><div><code>{value}</code><button className="icon-button" type="button" aria-label={copied ? `${label} copied` : `Copy ${label}`} onClick={copy}><Icon name={copied ? "check" : "copy"} /></button></div><ErrorMessage error={error} /></div>;
-}
 
 export default function App() {
-  const connection = useInvisibleSession(COORDINATOR_URL);
-  const transfers = usePrivateTransfers(connection.session, COORDINATOR_URL);
-  const status = useTransferStatus(connection.session, transfers.selected, connection.fail);
-  const [tab, setTab] = useState<"transfer" | "activity">("transfer");
-  const [amountSol, setAmountSol] = useState("");
-  const [destination, setDestination] = useState("");
-  const [deadlineMs, setDeadlineMs] = useState(INSTANT_PAYOUT_WINDOW_MS);
-  const [formError, setFormError] = useState<InvisibleUiError | null>(null);
-  const reviewDialog = useRef<HTMLDialogElement>(null);
-  const transfer = transfers.selected;
-  const snapshot = status.view?.actor_sync?.snapshot;
-  const isTerminal = status.view ? isTerminalState(status.view.state) : transfer?.stage === "terminal-cleaned";
-  const ready = connection.phase === "connected";
-  const canCreate = ready && transfers.loaded && !transfers.busy && !transfers.creationBlocked;
-  const canRefund = ready && status.fresh && snapshot?.refundability === "available_now" && !transfers.refundBlocked && !transfers.busy;
-  const depositExpiry = transfer?.depositExpiresAtMs;
-  const coordinatorNow = Date.now() + ((transfer?.coordinatorTimestampMs ?? transfer?.updatedAtMs ?? Date.now()) - (transfer?.updatedAtMs ?? Date.now()));
-  const depositExpired = depositExpiry !== undefined && coordinatorNow >= depositExpiry;
-  const canDeposit = !depositExpired && ready && transfer?.stage === "ready" && transfer.status === "awaiting_deposit" &&
-    !isTerminal && (status.view === null || status.view.state === "awaiting_deposit");
-
-  // Session setup is read-only. Financial commands remain explicit user actions.
-  useEffect(() => { void connection.connect(); }, [connection.connect]);
-  useEffect(() => {
-    if (status.fresh && status.view) {
-      transfers.reconcileRefund(status.view);
-      if (isTerminalState(status.view.state)) void transfers.reload().catch(connection.fail);
-    }
-  }, [status.fresh, status.view, transfers.reconcileRefund, transfers.reload, connection.fail]);
-
-  function review(event: FormEvent) {
-    event.preventDefault();
-    if (!canCreate) return;
-    try {
-      parseSolAmount(amountSol);
-      const address = destination.trim();
-      publicKey(address);
-      setDestination(address);
-      setFormError(null);
-      reviewDialog.current?.showModal();
-    } catch (error) { setFormError(toUiError(error)); }
-  }
-  async function create() {
-    if (!canCreate) return;
-    reviewDialog.current?.close();
-    await transfers.createTransfer({ amountSol, destination, deadlineMs });
-    setTab("activity");
-  }
-  function reconnect() { connection.disconnect(); void connection.connect(); }
-
-  return <>
-    <header className="app-header">
-      <a className="brand" href={SOURCE_URL} aria-label="Invisible source"><span className="diamond" aria-hidden="true">◇</span><span>Invisible</span></a>
-      <nav aria-label="Main navigation">
-        <button className={tab === "transfer" ? "nav-active" : ""} onClick={() => setTab("transfer")}>Transfer</button>
-        <button className={tab === "activity" ? "nav-active" : ""} onClick={() => setTab("activity")}>Activity</button>
-        <a href={DOCS_URL} target="_blank" rel="noreferrer">Docs<Icon name="chevron" /></a>
-      </nav>
-      <span className="network" title={`Invisible connection: ${connection.phase}`}><span className={`connection-dot phase-${connection.phase}`} />Solana devnet</span>
-    </header>
-
-    <main className="app-main">
-      <div className="toolbar">
-        <div className="tabs" role="tablist" aria-label="Private transfer" onKeyDown={event => {
-          if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
-          event.preventDefault();
-          const next = event.key === "Home" ? "transfer" : event.key === "End" ? "activity" : tab === "transfer" ? "activity" : "transfer";
-          setTab(next);
-          event.currentTarget.querySelector<HTMLButtonElement>(`#${next}-tab`)?.focus();
-        }}>
-          <button role="tab" id="transfer-tab" tabIndex={tab === "transfer" ? 0 : -1} aria-selected={tab === "transfer"} aria-controls="transfer-panel" onClick={() => setTab("transfer")}>Transfer</button>
-          <button role="tab" id="activity-tab" tabIndex={tab === "activity" ? 0 : -1} aria-selected={tab === "activity"} aria-controls="activity-panel" onClick={() => setTab("activity")}>Activity{transfers.transfers.length > 0 && <span className="count">{transfers.transfers.length}</span>}</button>
-        </div>
-        <div className="toolbar-tools">
-          <button className="icon-button" title="Transfer activity" aria-label="Transfer activity" onClick={() => setTab("activity")}><Icon name="clock" /></button>
-          <button className="icon-button settings-trigger" aria-label="Transfer settings" popoverTarget={SETTINGS_ID}><Icon name="settings" /></button>
-        </div>
-      </div>
-      <div id={SETTINGS_ID} popover="auto" className="settings-popover">
-        <h2>Transfer settings</h2>
-        <fieldset className="payout-options"><legend>Payout window</legend>{SUPPORTED_TOTAL_DEADLINE_MS.map(windowMs => <label key={windowMs}><input type="radio" name="payout-window" value={windowMs} checked={deadlineMs === windowMs} onChange={() => setDeadlineMs(windowMs)} /><span>{windowLabel(windowMs)}</span><Icon name="check" /></label>)}</fieldset>
-        <div className="settings-row"><span>Network</span><span className="muted">Solana devnet</span></div>
-        <p className="hint">Scheduled payouts follow the accepted coordinator policy. Only devnet SOL is supported.</p>
-      </div>
-
-      <section id="transfer-panel" role="tabpanel" aria-labelledby="transfer-tab" hidden={tab !== "transfer"}>
-        <form onSubmit={review}>
-          <div className="amount-card">
-            <label className="muted" htmlFor="amount">Send</label>
-            <div className="amount-row"><input id="amount" aria-label="SOL amount" required inputMode="decimal" autoComplete="off" placeholder="0" value={amountSol} onChange={event => setAmountSol(event.target.value)} /><span className="token-pill"><SolIcon />SOL</span></div>
-            <div className="card-caption"><span>Solana devnet</span><span>{formatSol(MIN_ENTRY_AMOUNT_LAMPORTS)} - {formatSol(MAX_ENTRY_AMOUNT_LAMPORTS)} SOL</span></div>
-          </div>
-          <div className="flow-arrow" aria-hidden="true"><Icon name="arrow" /></div>
-          <div className="recipient-card">
-            <label className="muted" htmlFor="destination">Destination address</label>
-            <div className="address-field"><SolIcon /><input id="destination" required autoComplete="off" spellCheck={false} placeholder="Paste a Solana address" value={destination} onChange={event => setDestination(event.target.value)} /></div>
-            <div className="card-caption"><span>Solana devnet</span><span>{windowLabel(deadlineMs)}</span></div>
-          </div>
-          <button className="primary-action" disabled={!canCreate || !amountSol.trim() || !destination.trim()}>{transfers.busy ? "Creating transfer..." : connection.phase === "connecting" ? "Connecting..." : !ready ? "Connection unavailable" : !amountSol.trim() ? "Enter an amount" : !destination.trim() ? "Enter a destination address" : "Review transfer"}</button>
-          {connection.phase === "error" && <button className="text-button retry-button" type="button" disabled={transfers.busy} onClick={reconnect}>Retry connection</button>}
-        </form>
-        <p className="form-footnote">No wallet connection needed. Fund the deposit from your own wallet.</p>
-      </section>
-
-      <section id="activity-panel" role="tabpanel" aria-labelledby="activity-tab" hidden={tab !== "activity"}>
-        {transfers.transfers.length === 0 ? <div className="empty-state"><Icon name="clock" /><h2>No transfers yet</h2><p>Your saved transfers will appear here.</p><button className="text-button" onClick={() => setTab("transfer")}>Create a transfer</button></div> : <>
-          <div className="transfer-list" aria-label="Saved transfers">{transfers.transfers.map(record => <button className={`transfer-item ${record.swapId === transfers.selectedId ? "selected" : ""}`} key={record.swapId} disabled={transfers.busy} onClick={() => transfers.select(record.swapId)}><SolIcon /><span><strong>{formatSol(record.amountLamports)} SOL</strong><small>{shortAddress(record.destinationAddress)}</small></span><span className="muted">{record.status.replaceAll("_", " ")}</span></button>)}</div>
-          {transfer && <article className="status-card">
-            <div className="status-heading"><h2 aria-live="polite">{snapshot ? PHASE_LABELS[snapshot.settlement_phase] ?? snapshot.settlement_phase : status.view?.state ?? transfer.status}</h2><button className="icon-button" aria-label="Refresh status" disabled={!ready || isTerminal} onClick={status.refresh}><Icon name="clock" /></button></div>
-            {!status.fresh && <p className="hint">Last known state. Reconnect to refresh.</p>}
-            {canDeposit && <>
-              <p>Save your Recovery Code, then send exactly <strong>{formatSol(transfer.amountLamports)} devnet SOL</strong> to this deposit address.</p>
-              <CopyValue key={transfer.depositAddress} label="Deposit address" value={transfer.depositAddress!} />
-              {depositExpiry && <p className="hint">Deposit before <time dateTime={new Date(depositExpiry).toISOString()}>{new Date(depositExpiry).toLocaleString()}</time>. Do not fund an expired address.</p>}
-            </>}
-            {depositExpired && transfer.stage === "ready" && !isTerminal && <p role="status">The deposit window expired. Do not send funds; refresh status.</p>}
-            {transfer.stage === "allocation" && <p role="alert" className="error">Initialization did not finish. Do not send funds. Check the saved transfer before trying again.</p>}
-            {transfer.recoveryCode && !isTerminal && <details className="recovery"><summary>Recovery Code <span className="muted">Keep private</span></summary><CopyValue key={transfer.swapId} label="Recovery Code" value={recoveryCodeToHex(transfer.recoveryCode)} /></details>}
-            {snapshot && <dl className="status-facts"><div><dt>Net payout</dt><dd>{formatSol(transfer.policySnapshot.net_payout_lamports)} SOL</dd></div><div><dt>Settled</dt><dd>{formatSol(snapshot.settled_amount_lamports)} SOL</dd></div><div><dt>Refund availability</dt><dd>{snapshot.refundability.replaceAll("_", " ")}</dd></div><div><dt>Refund outcome</dt><dd>{snapshot.refund_status ?? "None"}</dd></div></dl>}
-            {status.view && <ul className="payouts" aria-label="Confirmed payouts">{status.view.fragments_executed.map(payout => <li key={`${payout.index}:${payout.tx_signature}`}><span>{formatSol(payout.amount_lamports)} SOL to {shortAddress(payout.destination_address)}</span><a href={`https://solscan.io/tx/${encodeURIComponent(payout.tx_signature)}?cluster=devnet`} target="_blank" rel="noreferrer">View payout ↗</a></li>)}{status.view.withdraw_execution && <li><span>{formatSol(status.view.withdraw_execution.amount_lamports)} SOL refunded to {shortAddress(status.view.withdraw_execution.destination_address)}</span><a href={`https://solscan.io/tx/${encodeURIComponent(status.view.withdraw_execution.tx_signature)}?cluster=devnet`} target="_blank" rel="noreferrer">View refund ↗</a></li>}</ul>}
-            <ErrorMessage error={status.error} />
-            {!isTerminal && <RefundForm key={transfer.swapId} hasRecoveryCode={!!transfer.recoveryCode} canRefund={canRefund} blocked={transfers.refundBlocked} onRefund={async recoveryInput => { if (status.view && canRefund) { await transfers.refund(transfer, status.view, recoveryInput); status.refresh(); } }} />}
-          </article>}
-        </>}
-        {connection.phase === "error" && <button className="text-button retry-button" disabled={transfers.busy} onClick={reconnect}>Retry connection</button>}
-      </section>
-      {transfers.creationBlocked && <p role="status" className="notice">An incomplete or uncertain request is saved. <button className="text-button" onClick={() => setTab("activity")}>Review activity</button> before creating another transfer.</p>}
-      <ErrorMessage error={connection.error} /><ErrorMessage error={transfers.error} /><ErrorMessage error={formError} />
-    </main>
-
-    <dialog ref={reviewDialog} aria-labelledby="review-title" className="review-dialog"><div className="dialog-content">
-      <div className="dialog-heading"><h2 id="review-title">Review transfer</h2><button className="icon-button" aria-label="Close review" onClick={() => reviewDialog.current?.close()}><Icon name="close" /></button></div>
-      <div className="review-amount"><SolIcon /><strong>{amountSol || "0"} SOL</strong></div><p className="muted">Private transfer on Solana devnet</p>
-      <dl className="status-facts"><div><dt>Recipient</dt><dd className="full-address">{destination}</dd></div><div><dt>Payout window</dt><dd>{windowLabel(deadlineMs)}</dd></div></dl>
-      <p className="hint">Create the deposit address, save your Recovery Code, then send the exact deposit from your own wallet. The accepted policy determines fees and the final payout.</p>
-      <button className="primary-action" disabled={!canCreate} onClick={() => void create()}>Create private transfer</button>
-    </div></dialog>
-    <button className="help-button icon-button" aria-label="Help and documentation" popoverTarget={HELP_ID}><Icon name="help" /></button>
-    <div id={HELP_ID} popover="auto" className="help-popover"><h2>Invisible example</h2><p className="hint">Devnet beta. Your Recovery Code is stored in this browser. Browser storage is not an encrypted vault.</p><a href={DOCS_URL} target="_blank" rel="noreferrer">SDK documentation ↗</a><a href={SOURCE_URL} target="_blank" rel="noreferrer">Source and integration guide ↗</a><button className="text-button" disabled={transfers.busy || connection.phase === "connecting"} onClick={reconnect}>Reconnect to Invisible</button></div>
-  </>;
-}
-function RefundForm({ hasRecoveryCode, canRefund, blocked, onRefund }: { hasRecoveryCode: boolean; canRefund: boolean; blocked: boolean; onRefund: (code: string) => Promise<void> }) {
-  const [code, setCode] = useState("");
-  return <form className="refund-form" onSubmit={event => { event.preventDefault(); if (canRefund) void onRefund(code).then(() => setCode("")); }}>
-    {!hasRecoveryCode && <label>Recovery Code<input type="password" autoComplete="off" value={code} onChange={event => setCode(event.target.value)} /></label>}
-    <p className="hint">Refunds return to the original deposit wallet. Acceptance is pending until status confirms the outcome.</p><button className="secondary-action" disabled={!canRefund || (!hasRecoveryCode && !code.trim())}>Request refund</button>
-    {blocked && <p role="status" className="notice">A refund is pending or uncertain. Refresh status before submitting again.</p>}
-  </form>;
+  const controller = usePrivateTransferController(COORDINATOR_URL);
+  const [tab, setTab] = useState<TransferTab>("transfer");
+  const { connection } = controller;
+  return (
+    <>
+      <header className="app-header">
+        <a className="brand" href={SOURCE_URL} aria-label="Invisible source">
+          <span className="diamond" aria-hidden="true">
+            ◇
+          </span>
+          <span>Invisible</span>
+        </a>
+        <nav aria-label="Main navigation">
+          <button
+            className={tab === "transfer" ? "nav-active" : ""}
+            onClick={() => setTab("transfer")}
+          >
+            Transfer
+          </button>
+          <button
+            className={tab === "activity" ? "nav-active" : ""}
+            onClick={() => setTab("activity")}
+          >
+            Activity
+          </button>
+          <a href={DOCS_URL} target="_blank" rel="noreferrer">
+            Docs<span aria-hidden="true">↗</span>
+          </a>
+        </nav>
+        <span
+          className="network"
+          title={`Invisible connection: ${connection.phase}`}
+        >
+          <span className={`connection-dot phase-${connection.phase}`} />
+          Solana devnet
+        </span>
+      </header>
+
+      <main className="app-main">
+        <PrivateTransferWidget
+          controller={controller}
+          tab={tab}
+          onTabChange={setTab}
+        />
+      </main>
+    </>
+  );
 }
diff --git a/src/invisible/README.md b/src/invisible/README.md
index b31b382..f213b58 100644
--- a/src/invisible/README.md
+++ b/src/invisible/README.md
@@ -2,6 +2,12 @@
 
 Imports: `react`, `@invisible-labs/sdk`, `/user` and `/events`. The root app selects its route through the SDK's `/presets` entrypoint. Copy every module here; tests are optional in the consuming application.
 
+## Entrypoints
+
+- `index.ts`: hooks and controller, without UI or CSS imports.
+- `ui.ts`: reusable display modules. Import `styles.css` separately.
+- `usePrivateTransferController(url)`: opens one session, composes the hooks, reconciles fresh refund status and exposes guarded actions and display eligibility. Terminal or unrelated snapshots cannot authorize a refund. Create one controller per integration and pass it to its display modules.
+
 ## Hooks
 
 | Hook | Owns | Main outputs |
@@ -61,8 +67,33 @@ SDK automatic persistence does not contain the material required for arbitrary p
 
 ## Customize
 
-Keep the hooks and replace `App.tsx` with your UI. Use the SDK's amount limits and supported payout windows, and its `publicKey`/Recovery Code constructors. Keep `busy`, `creationBlocked`, fresh refund eligibility and cleanup guards when replacing buttons.
+Keep the hooks/controller and replace the display modules with your UI. Use the SDK's amount limits and supported payout windows, and its `publicKey`/Recovery Code constructors. Keep `busy`, `creationBlocked`, fresh refund eligibility and cleanup guards when replacing buttons.
 
-If you add refund UI, call `reconcileRefund(status.view)` after a fresh sync and refresh after requesting a refund, as `App.tsx` does. An acceptance receipt must never render as a completed refund.
+The controller already calls `reconcileRefund(status.view)` after a fresh sync and refreshes after requesting a refund. When composing only the individual hooks, retain that same ordering. An acceptance receipt must never render as a completed refund.
 
 Wallet connection and deposit submission belong to your existing wallet layer. Do not automatically send or repeat a wallet transaction from a polling effect.
+
+## Display modules
+
+| Export from `ui.ts` | Interface |
+| --- | --- |
+| `PrivateTransferWidget` | `controller`, controlled `tab`, `onTabChange` |
+| `TransferForm` | Amount/address state and review; supplied deadline, eligibility, phase and callbacks |
+| `PayoutWindowPicker` | Controlled SDK-supported `value` and `onChange` |
+| `TransferReview` | Validated input, dialog ref, eligibility and explicit confirmation callback |
+| `TransferActivity` / `TransferDetails` | Shared controller for saved transfers, deposit/recovery display and refunds |
+| `Dialog`, `CopyValue`, `ErrorMessage`, icons | Shared display behavior, without opening SDK sessions |
+
+Use `PrivateTransferWidget` for a complete interface, or compose these modules under a `.invisible-widget` wrapper. Every instance creates its own input/dialog/popover identifiers and radio-group name. The controller owns protocol-related eligibility; the form owns draft values; the parent/widget owns navigation and payout selection.
+
+`styles.css` uses scoped native CSS nesting. It changes no body, root or sibling styles. Customize tokens on your wrapper, for example:
+
+```css
+.invisible-widget {
+  --invisible-accent: #8b5cf6;
+  --invisible-accent-hover: #a78bfa;
+  --invisible-accent-tint: #8b5cf614;
+}
+```
+
+Reuse native dialog/popover behavior and retain the keyboard focus styles. Two controllers using the same coordinator and origin share the existing mutation-marker protection; separate widgets do not create a new financial authority.
diff --git a/src/invisible/components/PayoutWindowPicker.tsx b/src/invisible/components/PayoutWindowPicker.tsx
new file mode 100644
index 0000000..ac91caf
--- /dev/null
+++ b/src/invisible/components/PayoutWindowPicker.tsx
@@ -0,0 +1,32 @@
+import { useId } from "react";
+import { SUPPORTED_TOTAL_DEADLINE_MS } from "@invisible-labs/sdk/user";
+import { windowLabel } from "../presentation";
+import { Icon } from "../ui/Icons";
+
+export function PayoutWindowPicker({
+  value,
+  onChange,
+}: {
+  value: number;
+  onChange: (windowMs: number) => void;
+}) {
+  const name = useId();
+  return (
+    <fieldset className="payout-options">
+      <legend>Payout window</legend>
+      {SUPPORTED_TOTAL_DEADLINE_MS.map((windowMs) => (
+        <label key={windowMs}>
+          <input
+            type="radio"
+            name={name}
+            value={windowMs}
+            checked={value === windowMs}
+            onChange={() => onChange(windowMs)}
+          />
+          <span>{windowLabel(windowMs)}</span>
+          <Icon name="check" />
+        </label>
+      ))}
+    </fieldset>
+  );
+}
diff --git a/src/invisible/components/PrivateTransferWidget.tsx b/src/invisible/components/PrivateTransferWidget.tsx
new file mode 100644
index 0000000..ac378ae
--- /dev/null
+++ b/src/invisible/components/PrivateTransferWidget.tsx
@@ -0,0 +1,193 @@
+import { useId, useState } from "react";
+import { INSTANT_PAYOUT_WINDOW_MS } from "@invisible-labs/sdk/user";
+import { PayoutWindowPicker } from "./PayoutWindowPicker";
+import type { PrivateTransferController } from "../usePrivateTransferController";
+import { Icon } from "../ui/Icons";
+import { ErrorMessage } from "../ui/ErrorMessage";
+import { TransferForm } from "./TransferForm";
+import { TransferActivity } from "./TransferActivity";
+
+export type TransferTab = "transfer" | "activity";
+const SOURCE_URL =
+  "https://github.com/Invisible-Labs/invisible-sdk-react-example";
+const DOCS_URL = "https://docs.invisible.exchange/docs/sdk/";
+
+export function PrivateTransferWidget({
+  controller,
+  tab,
+  onTabChange,
+}: {
+  controller: PrivateTransferController;
+  tab: TransferTab;
+  onTabChange: (tab: TransferTab) => void;
+}) {
+  const settingsId = useId();
+  const [deadlineMs, setDeadlineMs] = useState(INSTANT_PAYOUT_WINDOW_MS);
+  const helpId = useId();
+  const transferTabId = useId();
+  const activityTabId = useId();
+  const transferPanelId = useId();
+  const activityPanelId = useId();
+  const { transfers, connection, canCreate } = controller;
+  return (
+    <div className="invisible-widget">
+      <div className="toolbar">
+        <div
+          className="tabs"
+          role="tablist"
+          aria-label="Private transfer"
+          onKeyDown={(event) => {
+            if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key))
+              return;
+            event.preventDefault();
+            const next =
+              event.key === "Home"
+                ? "transfer"
+                : event.key === "End"
+                  ? "activity"
+                  : tab === "transfer"
+                    ? "activity"
+                    : "transfer";
+            onTabChange(next);
+            event.currentTarget
+              .querySelector<HTMLButtonElement>(
+                `[id="${next === "transfer" ? transferTabId : activityTabId}"]`,
+              )
+              ?.focus();
+          }}
+        >
+          <button
+            type="button"
+            role="tab"
+            id={transferTabId}
+            tabIndex={tab === "transfer" ? 0 : -1}
+            aria-selected={tab === "transfer"}
+            aria-controls={transferPanelId}
+            onClick={() => onTabChange("transfer")}
+          >
+            Transfer
+          </button>
+          <button
+            type="button"
+            role="tab"
+            id={activityTabId}
+            tabIndex={tab === "activity" ? 0 : -1}
+            aria-selected={tab === "activity"}
+            aria-controls={activityPanelId}
+            onClick={() => onTabChange("activity")}
+          >
+            Activity
+            {transfers.transfers.length > 0 && (
+              <span className="count">{transfers.transfers.length}</span>
+            )}
+          </button>
+        </div>
+        <div className="toolbar-tools">
+          <button
+            type="button"
+            className="icon-button"
+            title="Transfer activity"
+            aria-label="Transfer activity"
+            onClick={() => onTabChange("activity")}
+          >
+            <Icon name="clock" />
+          </button>
+          <button
+            type="button"
+            className="icon-button settings-trigger"
+            aria-label="Transfer settings"
+            popoverTarget={settingsId}
+          >
+            <Icon name="settings" />
+          </button>
+          <button
+            type="button"
+            className="icon-button help-trigger"
+            aria-label="Help and documentation"
+            popoverTarget={helpId}
+          >
+            <Icon name="help" />
+          </button>
+        </div>
+      </div>
+      <div id={settingsId} popover="auto" className="settings-popover">
+        <h2>Transfer settings</h2>
+        <PayoutWindowPicker value={deadlineMs} onChange={setDeadlineMs} />
+        <div className="settings-row">
+          <span>Network</span>
+          <span className="muted">Solana devnet</span>
+        </div>
+        <p className="hint">
+          Scheduled payouts follow the accepted coordinator policy. Only devnet
+          SOL is supported.
+        </p>
+      </div>
+
+      <section
+        id={transferPanelId}
+        role="tabpanel"
+        aria-labelledby={transferTabId}
+        hidden={tab !== "transfer"}
+      >
+        <TransferForm
+          deadlineMs={deadlineMs}
+          canCreate={canCreate}
+          busy={transfers.busy}
+          phase={connection.phase}
+          onReconnect={controller.reconnect}
+          onCreate={async (input) => {
+            await controller.createTransfer(input);
+            onTabChange("activity");
+          }}
+        />
+      </section>
+      <section
+        id={activityPanelId}
+        role="tabpanel"
+        aria-labelledby={activityTabId}
+        hidden={tab !== "activity"}
+      >
+        <TransferActivity
+          controller={controller}
+          onCreate={() => onTabChange("transfer")}
+        />
+      </section>
+      {transfers.creationBlocked && (
+        <p role="status" className="notice">
+          An incomplete or uncertain request is saved.{" "}
+          <button
+            type="button"
+            className="text-button"
+            onClick={() => onTabChange("activity")}
+          >
+            Review activity
+          </button>{" "}
+          before creating another transfer.
+        </p>
+      )}
+      <ErrorMessage error={connection.error} />
+      <ErrorMessage error={transfers.error} />
+      <div id={helpId} popover="auto" className="help-popover">
+        <h2>Invisible example</h2>
+        <p className="hint">
+          Devnet beta. Your Recovery Code is stored in this browser. Browser
+          storage is not an encrypted vault.
+        </p>
+        <a href={DOCS_URL} target="_blank" rel="noreferrer">
+          SDK documentation ↗
+        </a>
+        <a href={SOURCE_URL} target="_blank" rel="noreferrer">
+          Source and integration guide ↗
+        </a>
+        <button
+          type="button"
+          className="text-button"
+          disabled={transfers.busy || connection.phase === "connecting"}
+          onClick={controller.reconnect}
+        >
+          Reconnect to Invisible
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/invisible/components/TransferActivity.tsx b/src/invisible/components/TransferActivity.tsx
new file mode 100644
index 0000000..c5b0c23
--- /dev/null
+++ b/src/invisible/components/TransferActivity.tsx
@@ -0,0 +1,63 @@
+import { formatSol } from "../amount";
+import { shortAddress } from "../presentation";
+import type { PrivateTransferController } from "../usePrivateTransferController";
+import { Icon, SolIcon } from "../ui/Icons";
+import { TransferDetails } from "./TransferDetails";
+
+export function TransferActivity({
+  controller,
+  onCreate,
+}: {
+  controller: PrivateTransferController;
+  onCreate: () => void;
+}) {
+  const { transfers, connection } = controller;
+  return (
+    <>
+      {transfers.transfers.length === 0 ? (
+        <div className="empty-state">
+          <Icon name="clock" />
+          <h2>No transfers yet</h2>
+          <p>Your saved transfers will appear here.</p>
+          <button type="button" className="text-button" onClick={onCreate}>
+            Create a transfer
+          </button>
+        </div>
+      ) : (
+        <>
+          <div className="transfer-list" aria-label="Saved transfers">
+            {transfers.transfers.map((record) => (
+              <button
+                type="button"
+                className={`transfer-item ${record.swapId === transfers.selectedId ? "selected" : ""}`}
+                key={record.swapId}
+                disabled={transfers.busy}
+                onClick={() => transfers.select(record.swapId)}
+              >
+                <SolIcon />
+                <span>
+                  <strong>{formatSol(record.amountLamports)} SOL</strong>
+                  <small>{shortAddress(record.destinationAddress)}</small>
+                </span>
+                <span className="muted">
+                  {record.status.replaceAll("_", " ")}
+                </span>
+              </button>
+            ))}
+          </div>
+          <TransferDetails controller={controller} />
+        </>
+      )}
+      {connection.phase === "error" && (
+        <button
+          type="button"
+          className="text-button retry-button"
+          disabled={transfers.busy}
+          onClick={controller.reconnect}
+        >
+          Retry connection
+        </button>
+      )}
+    </>
+  );
+}
diff --git a/src/invisible/components/TransferDetails.tsx b/src/invisible/components/TransferDetails.tsx
new file mode 100644
index 0000000..c99356e
--- /dev/null
+++ b/src/invisible/components/TransferDetails.tsx
@@ -0,0 +1,234 @@
+import { useState } from "react";
+import { recoveryCodeToHex } from "@invisible-labs/sdk/user";
+import { formatSol } from "../amount";
+import { shortAddress } from "../presentation";
+import type { PrivateTransferController } from "../usePrivateTransferController";
+import { Icon } from "../ui/Icons";
+import { ErrorMessage } from "../ui/ErrorMessage";
+import { CopyValue } from "../ui/CopyValue";
+
+const PHASE_LABELS: Record<string, string> = {
+  awaiting_deposit: "Waiting for deposit",
+  activating: "Activating transfer",
+  waiting_for_liquidity: "Waiting for liquidity",
+  retry_delayed: "Settlement delayed",
+  recovery_required: "Recovery needed",
+  matched_scheduled: "Payout scheduled",
+  locked_pending_payout: "Preparing payout",
+  submitted: "Payout submitted",
+  confirming: "Confirming payout",
+  completed: "Transfer complete",
+  refund_pending: "Refund pending",
+  refunded: "Refund complete",
+  expired: "Transfer expired",
+};
+export function TransferDetails({
+  controller,
+}: {
+  controller: PrivateTransferController;
+}) {
+  const {
+    transfer,
+    status,
+    snapshot,
+    ready,
+    isTerminal,
+    canDeposit,
+    depositExpiry,
+    depositExpired,
+    canRefund,
+    transfers,
+    requestRefund,
+  } = controller;
+  if (!transfer) return null;
+  return (
+    <article className="status-card">
+      <div className="status-heading">
+        <h2 aria-live="polite">
+          {snapshot
+            ? (PHASE_LABELS[snapshot.settlement_phase] ??
+              snapshot.settlement_phase)
+            : (status.view?.state ?? transfer.status)}
+        </h2>
+        <button
+          type="button"
+          className="icon-button"
+          aria-label="Refresh status"
+          disabled={!ready || isTerminal}
+          onClick={status.refresh}
+        >
+          <Icon name="clock" />
+        </button>
+      </div>
+      {!status.fresh && (
+        <p className="hint">Last known state. Reconnect to refresh.</p>
+      )}
+      {canDeposit && (
+        <>
+          <p>
+            Save your Recovery Code, then send exactly{" "}
+            <strong>{formatSol(transfer.amountLamports)} devnet SOL</strong> to
+            this deposit address.
+          </p>
+          <CopyValue
+            key={transfer.depositAddress}
+            label="Deposit address"
+            value={transfer.depositAddress!}
+          />
+          {depositExpiry && (
+            <p className="hint">
+              Deposit before{" "}
+              <time dateTime={new Date(depositExpiry).toISOString()}>
+                {new Date(depositExpiry).toLocaleString()}
+              </time>
+              . Do not fund an expired address.
+            </p>
+          )}
+        </>
+      )}
+      {depositExpired && transfer.stage === "ready" && !isTerminal && (
+        <p role="status">
+          The deposit window expired. Do not send funds; refresh status.
+        </p>
+      )}
+      {transfer.stage === "allocation" && (
+        <p role="alert" className="error">
+          Initialization did not finish. Do not send funds. Check the saved
+          transfer before trying again.
+        </p>
+      )}
+      {transfer.recoveryCode && !isTerminal && (
+        <details className="recovery">
+          <summary>
+            Recovery Code <span className="muted">Keep private</span>
+          </summary>
+          <CopyValue
+            key={transfer.swapId}
+            label="Recovery Code"
+            value={recoveryCodeToHex(transfer.recoveryCode)}
+          />
+        </details>
+      )}
+      {snapshot && (
+        <dl className="status-facts">
+          <div>
+            <dt>Net payout</dt>
+            <dd>
+              {formatSol(transfer.policySnapshot.net_payout_lamports)} SOL
+            </dd>
+          </div>
+          <div>
+            <dt>Settled</dt>
+            <dd>{formatSol(snapshot.settled_amount_lamports)} SOL</dd>
+          </div>
+          <div>
+            <dt>Refund availability</dt>
+            <dd>{snapshot.refundability.replaceAll("_", " ")}</dd>
+          </div>
+          <div>
+            <dt>Refund outcome</dt>
+            <dd>{snapshot.refund_status ?? "None"}</dd>
+          </div>
+        </dl>
+      )}
+      {status.view && (
+        <ul className="payouts" aria-label="Confirmed payouts">
+          {status.view.fragments_executed.map((payout) => (
+            <li key={`${payout.index}:${payout.tx_signature}`}>
+              <span>
+                {formatSol(payout.amount_lamports)} SOL to{" "}
+                {shortAddress(payout.destination_address)}
+              </span>
+              <a
+                href={`https://solscan.io/tx/${encodeURIComponent(payout.tx_signature)}?cluster=devnet`}
+                target="_blank"
+                rel="noreferrer"
+              >
+                View payout ↗
+              </a>
+            </li>
+          ))}
+          {status.view.withdraw_execution && (
+            <li>
+              <span>
+                {formatSol(status.view.withdraw_execution.amount_lamports)} SOL
+                refunded to{" "}
+                {shortAddress(
+                  status.view.withdraw_execution.destination_address,
+                )}
+              </span>
+              <a
+                href={`https://solscan.io/tx/${encodeURIComponent(status.view.withdraw_execution.tx_signature)}?cluster=devnet`}
+                target="_blank"
+                rel="noreferrer"
+              >
+                View refund ↗
+              </a>
+            </li>
+          )}
+        </ul>
+      )}
+      <ErrorMessage error={status.error} />
+      {!isTerminal && (
+        <RefundForm
+          key={transfer.swapId}
+          hasRecoveryCode={!!transfer.recoveryCode}
+          canRefund={canRefund}
+          blocked={transfers.refundBlocked}
+          onRefund={requestRefund}
+        />
+      )}
+    </article>
+  );
+}
+function RefundForm({
+  hasRecoveryCode,
+  canRefund,
+  blocked,
+  onRefund,
+}: {
+  hasRecoveryCode: boolean;
+  canRefund: boolean;
+  blocked: boolean;
+  onRefund: (code: string) => Promise<void>;
+}) {
+  const [code, setCode] = useState("");
+  return (
+    <form
+      className="refund-form"
+      onSubmit={(event) => {
+        event.preventDefault();
+        if (canRefund) void onRefund(code).then(() => setCode(""));
+      }}
+    >
+      {!hasRecoveryCode && (
+        <label>
+          Recovery Code
+          <input
+            type="password"
+            autoComplete="off"
+            value={code}
+            onChange={(event) => setCode(event.target.value)}
+          />
+        </label>
+      )}
+      <p className="hint">
+        Refunds return to the original deposit wallet. Acceptance is pending
+        until status confirms the outcome.
+      </p>
+      <button
+        type="submit"
+        className="secondary-action"
+        disabled={!canRefund || (!hasRecoveryCode && !code.trim())}
+      >
+        Request refund
+      </button>
+      {blocked && (
+        <p role="status" className="notice">
+          A refund is pending or uncertain. Refresh status before submitting
+          again.
+        </p>
+      )}
+    </form>
+  );
+}
diff --git a/src/invisible/components/TransferForm.tsx b/src/invisible/components/TransferForm.tsx
new file mode 100644
index 0000000..dcb12ad
--- /dev/null
+++ b/src/invisible/components/TransferForm.tsx
@@ -0,0 +1,152 @@
+import { useId, useRef, useState, type FormEvent } from "react";
+import { publicKey } from "@invisible-labs/sdk";
+import {
+  MIN_ENTRY_AMOUNT_LAMPORTS,
+  MAX_ENTRY_AMOUNT_LAMPORTS,
+} from "@invisible-labs/sdk/user";
+import { formatSol, parseSolAmount } from "../amount";
+import { toUiError, type InvisibleUiError } from "../errors";
+import type { PrivateTransferController } from "../usePrivateTransferController";
+import { windowLabel } from "../presentation";
+import { Icon, SolIcon } from "../ui/Icons";
+import { ErrorMessage } from "../ui/ErrorMessage";
+import { TransferReview } from "./TransferReview";
+
+export function TransferForm({
+  deadlineMs,
+  canCreate,
+  busy,
+  phase,
+  onCreate,
+  onReconnect,
+}: {
+  deadlineMs: number;
+  canCreate: boolean;
+  busy: boolean;
+  phase: PrivateTransferController["connection"]["phase"];
+  onCreate: PrivateTransferController["createTransfer"];
+  onReconnect: () => void;
+}) {
+  const amountId = useId();
+  const destinationId = useId();
+  const [amountSol, setAmountSol] = useState("");
+  const [destination, setDestination] = useState("");
+  const [formError, setFormError] = useState<InvisibleUiError | null>(null);
+  const reviewDialog = useRef<HTMLDialogElement>(null);
+  const ready = phase === "connected";
+  function review(event: FormEvent) {
+    event.preventDefault();
+    if (!canCreate) return;
+    try {
+      parseSolAmount(amountSol);
+      const address = destination.trim();
+      publicKey(address);
+      setDestination(address);
+      setFormError(null);
+      reviewDialog.current?.showModal();
+    } catch (error) {
+      setFormError(toUiError(error));
+    }
+  }
+  async function create() {
+    if (!canCreate) return;
+    reviewDialog.current?.close();
+    await onCreate({ amountSol, destination, deadlineMs });
+  }
+
+  return (
+    <>
+      <form onSubmit={review}>
+        <div className="amount-card">
+          <label className="muted" htmlFor={amountId}>
+            Send
+          </label>
+          <div className="amount-row">
+            <input
+              id={amountId}
+              aria-label="SOL amount"
+              required
+              inputMode="decimal"
+              autoComplete="off"
+              placeholder="0"
+              value={amountSol}
+              onChange={(event) => setAmountSol(event.target.value)}
+            />
+            <span className="token-pill">
+              <SolIcon />
+              SOL
+            </span>
+          </div>
+          <div className="card-caption">
+            <span>Solana devnet</span>
+            <span>
+              {formatSol(MIN_ENTRY_AMOUNT_LAMPORTS)} -{" "}
+              {formatSol(MAX_ENTRY_AMOUNT_LAMPORTS)} SOL
+            </span>
+          </div>
+        </div>
+        <div className="flow-arrow" aria-hidden="true">
+          <Icon name="arrow" />
+        </div>
+        <div className="recipient-card">
+          <label className="muted" htmlFor={destinationId}>
+            Destination address
+          </label>
+          <div className="address-field">
+            <SolIcon />
+            <input
+              id={destinationId}
+              required
+              autoComplete="off"
+              spellCheck={false}
+              placeholder="Paste a Solana address"
+              value={destination}
+              onChange={(event) => setDestination(event.target.value)}
+            />
+          </div>
+          <div className="card-caption">
+            <span>Solana devnet</span>
+            <span>{windowLabel(deadlineMs)}</span>
+          </div>
+        </div>
+        <button
+          type="submit"
+          className="primary-action"
+          disabled={!canCreate || !amountSol.trim() || !destination.trim()}
+        >
+          {busy
+            ? "Creating transfer..."
+            : phase === "connecting"
+              ? "Connecting..."
+              : !ready
+                ? "Connection unavailable"
+                : !amountSol.trim()
+                  ? "Enter an amount"
+                  : !destination.trim()
+                    ? "Enter a destination address"
+                    : "Review transfer"}
+        </button>
+        {phase === "error" && (
+          <button
+            className="text-button retry-button"
+            type="button"
+            disabled={busy}
+            onClick={onReconnect}
+          >
+            Retry connection
+          </button>
+        )}
+      </form>
+      <p className="form-footnote">
+        No wallet connection needed. Fund the deposit from your own wallet.
+      </p>
+      <ErrorMessage error={formError} />
+      <TransferReview
+        ref={reviewDialog}
+        input={{ amountSol, destination, deadlineMs }}
+        canCreate={canCreate}
+        onConfirm={create}
+      />
+    </>
+  );
+}
diff --git a/src/invisible/components/TransferReview.tsx b/src/invisible/components/TransferReview.tsx
new file mode 100644
index 0000000..5400a32
--- /dev/null
+++ b/src/invisible/components/TransferReview.tsx
@@ -0,0 +1,56 @@
+import type { Ref } from "react";
+import type { PrivateTransferInput } from "../usePrivateTransferController";
+import { windowLabel } from "../presentation";
+import { SolIcon } from "../ui/Icons";
+import { Dialog } from "../ui/Dialog";
+
+export function TransferReview({
+  input,
+  canCreate,
+  onConfirm,
+  ref,
+}: {
+  input: PrivateTransferInput;
+  canCreate: boolean;
+  onConfirm: () => Promise<void>;
+  ref: Ref<HTMLDialogElement>;
+}) {
+  const { amountSol, destination, deadlineMs } = input;
+  return (
+    <Dialog
+      ref={ref}
+      title="Review transfer"
+      closeLabel="Close review"
+      className="review-dialog"
+    >
+      <div className="review-amount">
+        <SolIcon />
+        <strong>{amountSol || "0"} SOL</strong>
+      </div>
+      <p className="muted">Private transfer on Solana devnet</p>
+      <dl className="status-facts">
+        <div>
+          <dt>Recipient</dt>
+          <dd className="full-address">{destination}</dd>
+        </div>
+        <div>
+          <dt>Payout window</dt>
+          <dd>{windowLabel(deadlineMs)}</dd>
+        </div>
+      </dl>
+      <p className="hint">
+        Create the deposit address, save your Recovery Code, then send the exact
+        deposit from your own wallet. The accepted policy determines fees and
+        the final payout.
+      </p>
+      <button
+        type="button"
+        className="primary-action"
+        disabled={!canCreate}
+        onClick={() => void onConfirm()}
+      >
+        Create private transfer
+      </button>
+    </Dialog>
+  );
+}
diff --git a/src/invisible/index.ts b/src/invisible/index.ts
index 417d47c..3863fc5 100644
--- a/src/invisible/index.ts
+++ b/src/invisible/index.ts
@@ -3,3 +3,4 @@ export { usePrivateTransfers } from "./usePrivateTransfers";
 export { useTransferStatus, isTerminalState } from "./useTransferStatus";
 export { parseSolAmount, formatSol } from "./amount";
 export { toUiError, type InvisibleUiError } from "./errors";
+export { usePrivateTransferController, type PrivateTransferController, type PrivateTransferInput } from "./usePrivateTransferController";
diff --git a/src/invisible/invisible.test.tsx b/src/invisible/invisible.test.tsx
index 73259cf..62600f4 100644
--- a/src/invisible/invisible.test.tsx
+++ b/src/invisible/invisible.test.tsx
@@ -1,4 +1,4 @@
-import { act, cleanup, renderHook } from "@testing-library/react";
+import { act, cleanup, renderHook, waitFor } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { AttestationError, CommandError, StorageError, TransportError, closeSession, createSession, type Session } from "@invisible-labs/sdk";
 import { contractRequest, listPersistedTransfers, requestRefund, type ContractRequestResult, type PersistedTransfer, type SyncUserResponse } from "@invisible-labs/sdk/user";
@@ -8,6 +8,7 @@ import { toUiError } from "./errors";
 import { hasPendingMutation, mutationKey, runMutation } from "./mutations";
 import { useInvisibleSession } from "./useInvisibleSession";
 import { usePrivateTransfers } from "./usePrivateTransfers";
+import { usePrivateTransferController } from "./usePrivateTransferController";
 import { useTransferStatus } from "./useTransferStatus";
 import { sync } from "@invisible-labs/sdk/user";
 
@@ -262,3 +263,50 @@ describe("sync and WebSocket hints", () => {
     expect(requestRefund).not.toHaveBeenCalled();
   });
 });
+
+it("the composed controller restores records, gates commands and keeps an uncertain refund blocked after reconnect", async () => {
+  vi.mocked(createSession).mockResolvedValue(session);
+  vi.mocked(requestRefund).mockRejectedValue(new TransportError("CONNECTION_LOST", "Unknown refund"));
+  const { result } = renderHook(() => usePrivateTransferController(URL));
+  await act(async () => {
+    await result.current.createTransfer({ amountSol: "1.5", destination: DESTINATION, deadlineMs: 0 });
+    await result.current.requestRefund("");
+  });
+  expect(contractRequest).not.toHaveBeenCalled();
+  expect(requestRefund).not.toHaveBeenCalled();
+  await waitFor(() => expect(result.current.canRefund).toBe(true));
+  expect(createSession).toHaveBeenCalledTimes(1);
+  await act(async () => { await result.current.requestRefund(""); });
+  expect(requestRefund).toHaveBeenCalledExactlyOnceWith(session, { swapId: transfer.swapId, syncSecret: transfer.syncSecret, recoveryCode: transfer.recoveryCode });
+  expect(result.current.canRefund).toBe(false);
+  await act(async () => { result.current.reconnect(); });
+  await waitFor(() => expect(createSession).toHaveBeenCalledTimes(2));
+  await waitFor(() => expect(result.current.transfers.loaded).toBe(true));
+  await act(async () => { await result.current.requestRefund(""); });
+  expect(requestRefund).toHaveBeenCalledTimes(1);
+  expect(result.current.transfers.refundBlocked).toBe(true);
+});
+
+it.each(["completed", "refunded", "failed"] as const)("the headless controller refuses a refund in terminal state %s even with stale eligibility", async state => {
+  vi.mocked(createSession).mockResolvedValue(session);
+  vi.mocked(sync).mockResolvedValue({ ...view(), state });
+  const { result } = renderHook(() => usePrivateTransferController(URL));
+  await waitFor(() => expect(result.current.status.fresh).toBe(true));
+  expect(result.current.isTerminal).toBe(true);
+  expect(result.current.canRefund).toBe(false);
+  expect(result.current.canDeposit).toBe(false);
+  await act(async () => { await result.current.requestRefund(""); });
+  expect(requestRefund).not.toHaveBeenCalled();
+});
+
+it("the headless controller refuses eligibility belonging to another transfer", async () => {
+  vi.mocked(createSession).mockResolvedValue(session);
+  vi.mocked(sync).mockResolvedValue(view("other-transfer"));
+  const { result } = renderHook(() => usePrivateTransferController(URL));
+  await waitFor(() => expect(result.current.status.error).not.toBeNull());
+  expect(result.current.status.fresh).toBe(false);
+  expect(result.current.status.view).toBeNull();
+  expect(result.current.canRefund).toBe(false);
+  await act(async () => { await result.current.requestRefund(""); });
+  expect(requestRefund).not.toHaveBeenCalled();
+});
diff --git a/src/invisible/presentation.ts b/src/invisible/presentation.ts
new file mode 100644
index 0000000..3b53459
--- /dev/null
+++ b/src/invisible/presentation.ts
@@ -0,0 +1,18 @@
+import { INSTANT_PAYOUT_WINDOW_MS } from "@invisible-labs/sdk/user";
+
+const MILLISECONDS_PER_MINUTE = 60_000;
+const MILLISECONDS_PER_HOUR = 60 * MILLISECONDS_PER_MINUTE;
+const MILLISECONDS_PER_DAY = 24 * MILLISECONDS_PER_HOUR;
+const ADDRESS_PREVIEW_LENGTH = 6;
+export const shortAddress = (address: string) =>
+  `${address.slice(0, ADDRESS_PREVIEW_LENGTH)}...${address.slice(-ADDRESS_PREVIEW_LENGTH)}`;
+export function windowLabel(windowMs: number) {
+  if (windowMs === INSTANT_PAYOUT_WINDOW_MS) return "Instant";
+  const [duration, unit] =
+    windowMs >= MILLISECONDS_PER_DAY
+      ? [windowMs / MILLISECONDS_PER_DAY, "day"]
+      : windowMs >= MILLISECONDS_PER_HOUR
+        ? [windowMs / MILLISECONDS_PER_HOUR, "hour"]
+        : [windowMs / MILLISECONDS_PER_MINUTE, "minute"];
+  return `${duration} ${unit}${duration === 1 ? "" : "s"}`;
+}
diff --git a/src/invisible/styles.css b/src/invisible/styles.css
new file mode 100644
index 0000000..b131fb6
--- /dev/null
+++ b/src/invisible/styles.css
@@ -0,0 +1,676 @@
+.invisible-widget {
+  position: relative;
+  anchor-scope: all;
+  box-sizing: border-box;
+  color-scheme: dark;
+  --invisible-background: #131313;
+  --invisible-surface: #1f1f1f;
+  --invisible-surface-hover: #292929;
+  --invisible-selected: #303030;
+  --invisible-text: #ffffff;
+  --invisible-muted: #9b9b9b;
+  --invisible-quiet: #6b6b6b;
+  --invisible-accent: #ff37c7;
+  --invisible-accent-hover: #ff5ed1;
+  --invisible-accent-tint: #ff37c714;
+  --invisible-danger: #ff9898;
+  --invisible-border: #333333;
+  --invisible-overlay: #00000066;
+  --invisible-solana: #b89cfa;
+  --invisible-radius-card: 24px;
+  --invisible-radius-button: 20px;
+  --invisible-radius-dialog: 16px;
+  --invisible-radius-pill: 999px;
+  --invisible-card-width: 480px;
+  --invisible-dialog-width: 400px;
+  --invisible-popover-width: 320px;
+  --invisible-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-family: var(--invisible-font);
+  color: var(--invisible-text);
+  background: var(--invisible-background);
+  line-height: 1.4;
+  font-synthesis: none;
+  -webkit-font-smoothing: antialiased;
+
+  * {
+    box-sizing: border-box;
+  }
+  button,
+  input {
+    font: inherit;
+    color: inherit;
+  }
+  button,
+  a,
+  summary {
+    -webkit-tap-highlight-color: transparent;
+  }
+  button {
+    border: 0;
+    cursor: pointer;
+    background: none;
+  }
+  button:disabled {
+    cursor: not-allowed;
+  }
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+  a:hover {
+    color: var(--invisible-text);
+  }
+  :focus-visible {
+    outline: 2px solid var(--invisible-accent);
+    outline-offset: 3px;
+  }
+  button,
+  a {
+    transition:
+      color 100ms,
+      background-color 100ms,
+      opacity 100ms;
+  }
+  button:not(:disabled):active {
+    transform: scale(0.98);
+  }
+  h2,
+  p {
+    margin: 0;
+  }
+  h2 {
+    font-size: 18px;
+    font-weight: 500;
+  }
+  [hidden] {
+    display: none !important;
+  }
+  .muted {
+    color: var(--invisible-muted);
+  }
+  .toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 5px;
+    margin-bottom: 5px;
+    height: 36px;
+  }
+  .tabs {
+    display: flex;
+    gap: 12px;
+  }
+  .tabs button {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    padding: 8px 12px;
+    border-radius: var(--invisible-radius-pill);
+    color: var(--invisible-muted);
+    font-size: 16px;
+    font-weight: 500;
+  }
+  .tabs button[aria-selected="true"] {
+    background: var(--invisible-selected);
+    color: var(--invisible-text);
+  }
+  .tabs button:hover {
+    color: var(--invisible-text);
+  }
+  .count {
+    font-size: 11px;
+    background: var(--invisible-surface);
+    padding: 1px 5px;
+    border-radius: var(--invisible-radius-pill);
+  }
+  .toolbar-tools {
+    display: flex;
+    gap: 8px;
+  }
+  .icon-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 5px;
+    border-radius: var(--invisible-radius-pill);
+    color: var(--invisible-muted);
+    flex-shrink: 0;
+  }
+  .icon-button:hover {
+    background: var(--invisible-surface-hover);
+    color: var(--invisible-text);
+  }
+  .icon-button:disabled {
+    opacity: 0.4;
+  }
+  .amount-card,
+  .recipient-card {
+    height: 136px;
+    padding: 16px;
+    border-radius: var(--invisible-radius-card);
+  }
+  .amount-card {
+    border: 1px solid var(--invisible-border);
+  }
+  .recipient-card {
+    background: var(--invisible-surface);
+    margin-top: 4px;
+    height: auto;
+  }
+  .amount-card > label,
+  .recipient-card > label {
+    font-size: 16px;
+  }
+  .amount-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    margin: 6px 0 8px;
+    height: 44px;
+  }
+  .amount-row input {
+    font-size: 36px;
+    font-weight: 400;
+    line-height: 1.2;
+    min-width: 0;
+  }
+  .amount-row input {
+    background: none;
+    border: 0;
+    padding: 0;
+    width: 100%;
+  }
+  .amount-row input::placeholder {
+    color: var(--invisible-quiet);
+    opacity: 1;
+  }
+  .card-caption {
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+    font-size: 14px;
+    color: var(--invisible-muted);
+  }
+  .token-pill {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    flex-shrink: 0;
+    padding: 4px 10px 4px 4px;
+    height: 38px;
+    border-radius: var(--invisible-radius-pill);
+    font-weight: 600;
+  }
+  .token-pill {
+    border: 1px solid var(--invisible-border);
+  }
+  .sol-icon {
+    display: inline-flex;
+    width: 28px;
+    height: 28px;
+    border-radius: var(--invisible-radius-pill);
+    align-items: center;
+    justify-content: center;
+    background: var(--invisible-background);
+    flex-shrink: 0;
+  }
+  .sol-icon svg {
+    width: 21px;
+    height: 21px;
+    fill: var(--invisible-solana);
+  }
+  .flow-arrow {
+    width: 40px;
+    height: 40px;
+    border: 4px solid var(--invisible-background);
+    border-radius: var(--invisible-radius-dialog);
+    background: var(--invisible-surface);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: -18px auto -22px;
+    position: relative;
+    z-index: 1;
+    color: var(--invisible-text);
+  }
+  .flow-arrow svg {
+    width: 24px;
+    height: 24px;
+  }
+  .primary-action,
+  .secondary-action {
+    width: 100%;
+    padding: 16px 20px;
+    border-radius: var(--invisible-radius-button);
+    font-size: 18px;
+    font-weight: 600;
+    margin-top: 4px;
+    background: var(--invisible-accent);
+    min-height: 55px;
+  }
+  .primary-action:hover:not(:disabled) {
+    background: var(--invisible-accent-hover);
+  }
+  .primary-action:disabled {
+    background: var(--invisible-surface);
+    color: var(--invisible-muted);
+  }
+  .secondary-action {
+    background: var(--invisible-accent-tint);
+    color: var(--invisible-accent);
+    font-size: 16px;
+  }
+  .secondary-action:disabled {
+    color: var(--invisible-quiet);
+    background: var(--invisible-surface);
+  }
+  .form-footnote {
+    color: var(--invisible-quiet);
+    text-align: center;
+    font-size: 12px;
+    margin: 16px 12px;
+  }
+  .text-button {
+    color: var(--invisible-accent);
+    padding: 0;
+    font-size: inherit;
+  }
+  .text-button:hover {
+    color: var(--invisible-accent-hover);
+  }
+  .text-button:disabled {
+    opacity: 0.5;
+  }
+  .retry-button {
+    display: block;
+    margin: 12px auto;
+  }
+  .hint {
+    font-size: 13px;
+    color: var(--invisible-muted);
+    line-height: 1.5;
+  }
+  .error,
+  .notice {
+    font-size: 14px;
+    line-height: 1.5;
+    margin-top: 12px;
+    overflow-wrap: anywhere;
+  }
+  .error {
+    color: var(--invisible-danger);
+  }
+  .notice {
+    color: var(--invisible-muted);
+    padding: 12px;
+    background: var(--invisible-surface);
+    border-radius: var(--invisible-radius-dialog);
+  }
+  [popover],
+  dialog {
+    color: var(--invisible-text);
+    background: var(--invisible-background);
+    border: 1px solid var(--invisible-border);
+    border-radius: var(--invisible-radius-dialog);
+    padding: 0;
+  }
+  [popover]::backdrop {
+    background: transparent;
+  }
+  .settings-trigger {
+    anchor-name: --settings;
+  }
+  .help-trigger {
+    anchor-name: --help;
+  }
+  .settings-popover {
+    width: min(var(--invisible-popover-width), calc(100vw - 24px));
+    padding: 16px;
+    margin: 0;
+    inset: 184px auto auto
+      max(
+        12px,
+        calc(
+          50% + var(--invisible-card-width) / 2 - var(--invisible-popover-width)
+        )
+      );
+  }
+  .settings-popover h2 {
+    margin-bottom: 16px;
+  }
+  .payout-options {
+    border: 0;
+    padding: 0;
+    margin: 0;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+  }
+  .payout-options legend {
+    padding: 0;
+    margin-bottom: 12px;
+    font-size: 14px;
+  }
+  .payout-options label {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 12px;
+    background: var(--invisible-surface);
+    border: 1px solid var(--invisible-border);
+    border-radius: var(--invisible-radius-dialog);
+    font-size: 14px;
+    cursor: pointer;
+  }
+  .payout-options label:hover {
+    background: var(--invisible-surface-hover);
+  }
+  .payout-options input {
+    position: absolute;
+    opacity: 0;
+    width: 1px;
+    height: 1px;
+  }
+  .payout-options label:has(:checked) {
+    border-color: var(--invisible-accent);
+    color: var(--invisible-accent);
+    background: var(--invisible-accent-tint);
+  }
+  .payout-options label:has(:focus-visible) {
+    outline: 2px solid var(--invisible-muted);
+    outline-offset: 3px;
+  }
+  .payout-options label > svg {
+    opacity: 0;
+    flex-shrink: 0;
+  }
+  .payout-options label:has(:checked) > svg {
+    opacity: 1;
+  }
+  .settings-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin: 16px 0;
+    font-size: 14px;
+  }
+  dialog {
+    width: min(var(--invisible-dialog-width), calc(100% - 24px));
+    max-height: calc(100dvh - 32px);
+    overflow: auto;
+  }
+  dialog::backdrop {
+    background: var(--invisible-overlay);
+  }
+  .dialog-content {
+    padding: 20px;
+  }
+  .dialog-heading {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 20px;
+  }
+  .address-field {
+    margin: 12px 0;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    border-radius: var(--invisible-radius-button);
+    background: var(--invisible-background);
+    padding: 12px;
+  }
+  .address-field:focus-within {
+    outline: 2px solid var(--invisible-muted);
+    outline-offset: 3px;
+  }
+  .address-field input {
+    min-width: 0;
+    width: 100%;
+    border: 0;
+    background: none;
+    font-size: 16px;
+    padding: 4px 0;
+  }
+  .address-field input:focus-visible {
+    outline: none;
+  }
+  .review-amount {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 32px;
+    margin-bottom: 8px;
+  }
+  .review-amount strong {
+    font-weight: 500;
+  }
+  .review-dialog .primary-action {
+    margin-top: 20px;
+  }
+  .full-address {
+    overflow-wrap: anywhere;
+    max-width: 65%;
+  }
+  .empty-state {
+    padding: 48px 16px;
+    text-align: center;
+    border: 1px solid var(--invisible-border);
+    border-radius: var(--invisible-radius-card);
+    color: var(--invisible-muted);
+  }
+  .empty-state > svg {
+    width: 40px;
+    height: 40px;
+    color: var(--invisible-quiet);
+    margin-bottom: 16px;
+  }
+  .empty-state h2 {
+    color: var(--invisible-text);
+  }
+  .empty-state p {
+    font-size: 14px;
+    margin: 8px 0 20px;
+  }
+  .transfer-list {
+    border: 1px solid var(--invisible-border);
+    border-radius: var(--invisible-radius-card);
+    padding: 8px;
+    margin-bottom: 8px;
+  }
+  .transfer-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    padding: 12px 8px;
+    text-align: left;
+    border-radius: var(--invisible-radius-dialog);
+  }
+  .transfer-item:hover,
+  .transfer-item.selected {
+    background: var(--invisible-surface);
+  }
+  .transfer-item > span:nth-child(2) {
+    flex: 1;
+  }
+  .transfer-item strong,
+  .transfer-item small {
+    display: block;
+  }
+  .transfer-item strong {
+    font-size: 16px;
+    font-weight: 500;
+  }
+  .transfer-item small {
+    font-size: 12px;
+    color: var(--invisible-muted);
+    margin-top: 2px;
+  }
+  .transfer-item > .muted {
+    font-size: 12px;
+    text-align: right;
+    max-width: 35%;
+  }
+  .status-card {
+    background: var(--invisible-surface);
+    padding: 20px;
+    border-radius: var(--invisible-radius-card);
+    font-size: 14px;
+  }
+  .status-heading {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 16px;
+  }
+  .status-card p {
+    margin-bottom: 12px;
+  }
+  .copy-value {
+    margin: 16px 0;
+    font-size: 12px;
+  }
+  .copy-value > div {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    background: var(--invisible-background);
+    border-radius: var(--invisible-radius-dialog);
+    padding: 12px;
+    margin-top: 6px;
+  }
+  .copy-value code {
+    flex: 1;
+    min-width: 0;
+    overflow-wrap: anywhere;
+    font-size: 13px;
+  }
+  .recovery {
+    padding: 12px 0;
+    border-top: 1px solid var(--invisible-border);
+    border-bottom: 1px solid var(--invisible-border);
+  }
+  .recovery summary {
+    cursor: pointer;
+  }
+  .recovery summary .muted {
+    font-size: 12px;
+    float: right;
+  }
+  .status-facts {
+    margin: 20px 0;
+    font-size: 14px;
+  }
+  .status-facts > div {
+    display: flex;
+    justify-content: space-between;
+    align-items: start;
+    gap: 16px;
+    margin: 12px 0;
+  }
+  .status-facts dt {
+    color: var(--invisible-muted);
+  }
+  .status-facts dd {
+    margin: 0;
+    text-align: right;
+  }
+  .payouts {
+    list-style: none;
+    padding: 0;
+    font-size: 13px;
+  }
+  .payouts li {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin-bottom: 12px;
+    overflow-wrap: anywhere;
+  }
+  .payouts a {
+    color: var(--invisible-accent);
+  }
+  .refund-form {
+    border-top: 1px solid var(--invisible-border);
+    padding-top: 16px;
+    margin-top: 16px;
+  }
+  .refund-form label {
+    display: block;
+  }
+  .refund-form input {
+    width: 100%;
+    margin: 8px 0;
+    padding: 12px;
+    background: var(--invisible-background);
+    border: 1px solid var(--invisible-border);
+    border-radius: var(--invisible-radius-dialog);
+  }
+  .help-popover {
+    width: min(var(--invisible-popover-width), calc(100% - 24px));
+    padding: 20px;
+    margin: 0;
+    inset: auto auto 52px 12px;
+  }
+  .help-popover h2 {
+    margin-bottom: 12px;
+  }
+  .help-popover a,
+  .help-popover .text-button {
+    display: block;
+    font-size: 14px;
+    margin-top: 16px;
+  }
+  @supports (position-anchor: --settings) {
+    .settings-popover,
+    .help-popover {
+      inset: auto;
+      top: anchor(bottom);
+      right: anchor(right);
+      margin-top: 8px;
+      position-try-fallbacks: flip-block, flip-inline;
+    }
+    .settings-popover {
+      position-anchor: --settings;
+    }
+    .help-popover {
+      position-anchor: --help;
+    }
+  }
+  @media (max-width: 600px) {
+    .tabs {
+      gap: 8px;
+    }
+    .tabs button {
+      font-size: 14px;
+    }
+    .amount-row input {
+      font-size: 34px;
+    }
+    .card-caption {
+      font-size: 12px;
+    }
+    .primary-action {
+      font-size: 16px;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    button,
+    a {
+      transition: none;
+    }
+    button:not(:disabled):active {
+      transform: none;
+    }
+  }
+}
diff --git a/src/invisible/ui.ts b/src/invisible/ui.ts
new file mode 100644
index 0000000..26d3e43
--- /dev/null
+++ b/src/invisible/ui.ts
@@ -0,0 +1,13 @@
+export {
+  PrivateTransferWidget,
+  type TransferTab,
+} from "./components/PrivateTransferWidget";
+export { TransferForm } from "./components/TransferForm";
+export { PayoutWindowPicker } from "./components/PayoutWindowPicker";
+export { TransferReview } from "./components/TransferReview";
+export { TransferActivity } from "./components/TransferActivity";
+export { TransferDetails } from "./components/TransferDetails";
+export { Dialog } from "./ui/Dialog";
+export { CopyValue } from "./ui/CopyValue";
+export { ErrorMessage } from "./ui/ErrorMessage";
+export { Icon, SolIcon } from "./ui/Icons";
diff --git a/src/invisible/ui/CopyValue.tsx b/src/invisible/ui/CopyValue.tsx
new file mode 100644
index 0000000..5695541
--- /dev/null
+++ b/src/invisible/ui/CopyValue.tsx
@@ -0,0 +1,35 @@
+import { useState } from "react";
+import { toUiError, type InvisibleUiError } from "../errors";
+import { Icon } from "./Icons";
+import { ErrorMessage } from "./ErrorMessage";
+
+export function CopyValue({ label, value }: { label: string; value: string }) {
+  const [error, setError] = useState<InvisibleUiError | null>(null);
+  const [copied, setCopied] = useState(false);
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      setError(null);
+    } catch (error) {
+      setError(toUiError(error));
+    }
+  }
+  return (
+    <div className="copy-value">
+      <span className="muted">{label}</span>
+      <div>
+        <code>{value}</code>
+        <button
+          className="icon-button"
+          type="button"
+          aria-label={copied ? `${label} copied` : `Copy ${label}`}
+          onClick={copy}
+        >
+          <Icon name={copied ? "check" : "copy"} />
+        </button>
+      </div>
+      <ErrorMessage error={error} />
+    </div>
+  );
+}
diff --git a/src/invisible/ui/Dialog.tsx b/src/invisible/ui/Dialog.tsx
new file mode 100644
index 0000000..9cde18c
--- /dev/null
+++ b/src/invisible/ui/Dialog.tsx
@@ -0,0 +1,36 @@
+import { useId, type ReactNode, type Ref } from "react";
+import { Icon } from "./Icons";
+
+export function Dialog({
+  title,
+  closeLabel,
+  ref,
+  children,
+  className = "",
+}: {
+  title: string;
+  closeLabel: string;
+  ref: Ref<HTMLDialogElement>;
+  children: ReactNode;
+  className?: string;
+}) {
+  const titleId = useId();
+  return (
+    <dialog ref={ref} aria-labelledby={titleId} className={className}>
+      <div className="dialog-content">
+        <div className="dialog-heading">
+          <h2 id={titleId}>{title}</h2>
+          <button
+            type="button"
+            className="icon-button"
+            aria-label={closeLabel}
+            onClick={(event) => event.currentTarget.closest("dialog")?.close()}
+          >
+            <Icon name="close" />
+          </button>
+        </div>
+        {children}
+      </div>
+    </dialog>
+  );
+}
diff --git a/src/invisible/ui/ErrorMessage.tsx b/src/invisible/ui/ErrorMessage.tsx
new file mode 100644
index 0000000..a932638
--- /dev/null
+++ b/src/invisible/ui/ErrorMessage.tsx
@@ -0,0 +1,12 @@
+import type { InvisibleUiError } from "../errors";
+
+export function ErrorMessage({ error }: { error: InvisibleUiError | null }) {
+  return error ? (
+    <p role="alert" className="error">
+      {error.message}
+      {error.remoteAccepted
+        ? " This request was already accepted. Check its saved status before submitting again."
+        : ""}
+    </p>
+  ) : null;
+}
diff --git a/src/invisible/ui/Icons.tsx b/src/invisible/ui/Icons.tsx
new file mode 100644
index 0000000..49f0715
--- /dev/null
+++ b/src/invisible/ui/Icons.tsx
@@ -0,0 +1,40 @@
+const ICON_PATHS = {
+  arrow: "M12 4v16m-7-7 7 7 7-7",
+  chevron: "m6 9 6 6 6-6",
+  close: "m6 6 12 12M6 18 18 6",
+  clock: "M12 7v5l3 2",
+  check: "m5 12 4 4L19 6",
+  copy: "M9 9h11v11H9zM5 15H3V3h12v2",
+  help: "M9.5 8a2.5 2.5 0 1 1 4 2c-1 .6-1.5 1-1.5 2m0 4h.01",
+  settings:
+    "M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8M9 3h6l1 3 3 1 2 5-2 5-3 1-1 3H9l-1-3-3-1-2-5 2-5 3-1z",
+} as const;
+export function Icon({ name }: { name: keyof typeof ICON_PATHS }) {
+  return (
+    <svg
+      aria-hidden="true"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      {(name === "clock" || name === "help") && (
+        <circle cx="12" cy="12" r="9" />
+      )}
+      <path d={ICON_PATHS[name]} />
+    </svg>
+  );
+}
+export function SolIcon() {
+  return (
+    <span className="sol-icon" aria-hidden="true">
+      <svg viewBox="0 0 24 24">
+        <path d="m5 4 16 0-3 4H2zm-3 6h16l3 4H5zm3 6h16l-3 4H2z" />
+      </svg>
+    </span>
+  );
+}
diff --git a/src/invisible/usePrivateTransferController.ts b/src/invisible/usePrivateTransferController.ts
new file mode 100644
index 0000000..81361d1
--- /dev/null
+++ b/src/invisible/usePrivateTransferController.ts
@@ -0,0 +1,108 @@
+import { useCallback, useEffect } from "react";
+import { useInvisibleSession } from "./useInvisibleSession";
+import { usePrivateTransfers } from "./usePrivateTransfers";
+import { useTransferStatus, isTerminalState } from "./useTransferStatus";
+
+export type PrivateTransferInput = Parameters<
+  ReturnType<typeof usePrivateTransfers>["createTransfer"]
+>[0];
+
+/** One session owner; presentation consumers share this controller. */
+export function usePrivateTransferController(coordinatorUrl: string) {
+  const connection = useInvisibleSession(coordinatorUrl);
+  const transfers = usePrivateTransfers(connection.session, coordinatorUrl);
+  const status = useTransferStatus(
+    connection.session,
+    transfers.selected,
+    connection.fail,
+  );
+  const transfer = transfers.selected;
+  const snapshot = status.view?.actor_sync?.snapshot;
+  const isTerminal = status.view
+    ? isTerminalState(status.view.state)
+    : transfer?.stage === "terminal-cleaned";
+  const ready = connection.phase === "connected";
+  const canCreate =
+    ready && transfers.loaded && !transfers.busy && !transfers.creationBlocked;
+  const canRefund =
+    ready &&
+    !isTerminal &&
+    snapshot?.contract_id === transfer?.swapId &&
+    status.fresh &&
+    snapshot?.refundability === "available_now" &&
+    !transfers.refundBlocked &&
+    !transfers.busy;
+  const depositExpiry = transfer?.depositExpiresAtMs;
+  const coordinatorNow =
+    Date.now() +
+    ((transfer?.coordinatorTimestampMs ?? transfer?.updatedAtMs ?? Date.now()) -
+      (transfer?.updatedAtMs ?? Date.now()));
+  const depositExpired =
+    depositExpiry !== undefined && coordinatorNow >= depositExpiry;
+  const canDeposit =
+    !depositExpired &&
+    ready &&
+    transfer?.stage === "ready" &&
+    transfer.status === "awaiting_deposit" &&
+    !isTerminal &&
+    (status.view === null || status.view.state === "awaiting_deposit");
+
+  // Session setup is read-only. Financial commands remain explicit user actions.
+  useEffect(() => {
+    void connection.connect();
+  }, [connection.connect]);
+  useEffect(() => {
+    if (status.fresh && status.view) {
+      transfers.reconcileRefund(status.view);
+      if (isTerminalState(status.view.state))
+        void transfers.reload().catch(connection.fail);
+    }
+  }, [
+    status.fresh,
+    status.view,
+    transfers.reconcileRefund,
+    transfers.reload,
+    connection.fail,
+  ]);
+
+  const reconnect = useCallback(() => {
+    connection.disconnect();
+    void connection.connect();
+  }, [connection.disconnect, connection.connect]);
+  const createTransfer = useCallback(
+    async (input: PrivateTransferInput) => {
+      if (canCreate) await transfers.createTransfer(input);
+    },
+    [canCreate, transfers.createTransfer],
+  );
+  const requestRefund = useCallback(
+    async (recoveryInput: string) => {
+      if (transfer && status.view && canRefund) {
+        await transfers.refund(transfer, status.view, recoveryInput);
+        status.refresh();
+      }
+    },
+    [transfer, status.view, canRefund, transfers.refund, status.refresh],
+  );
+
+  return {
+    connection,
+    transfers,
+    status,
+    transfer,
+    snapshot,
+    isTerminal,
+    ready,
+    canCreate,
+    canRefund,
+    depositExpiry,
+    depositExpired,
+    canDeposit,
+    reconnect,
+    createTransfer,
+    requestRefund,
+  };
+}
+export type PrivateTransferController = ReturnType<
+  typeof usePrivateTransferController
+>;
diff --git a/src/style.css b/src/style.css
index 7ad05de..de978f3 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,27 +1,15 @@
 :root {
   color-scheme: dark;
   --background: #131313;
-  --surface: #1f1f1f;
-  --surface-hover: #292929;
-  --selected: #303030;
   --text: #ffffff;
   --muted: #9b9b9b;
   --quiet: #6b6b6b;
   --accent: #ff37c7;
   --accent-hover: #ff5ed1;
-  --accent-tint: #ff37c714;
   --danger: #ff9898;
-  --border: #333333;
-  --overlay: #00000066;
   --positive: #40c9a1;
-  --solana: #b89cfa;
-  --radius-card: 24px;
-  --radius-button: 20px;
-  --radius-dialog: 16px;
   --radius-pill: 999px;
   --card-width: 480px;
-  --dialog-width: 400px;
-  --popover-width: 320px;
   --header-height: 72px;
   --font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   font-family: var(--font);
@@ -31,151 +19,121 @@
   font-synthesis: none;
   -webkit-font-smoothing: antialiased;
 }
-* { box-sizing: border-box; }
-body { margin: 0; }
-button, input { font: inherit; color: inherit; }
-button, a, summary { -webkit-tap-highlight-color: transparent; }
-button { border: 0; cursor: pointer; background: none; }
-button:disabled { cursor: not-allowed; }
-a { color: inherit; text-decoration: none; }
-a:hover { color: var(--text); }
-:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
-button, a { transition: color 100ms, background-color 100ms, opacity 100ms; }
-button:not(:disabled):active { transform: scale(.98); }
-h2, p { margin: 0; }
-h2 { font-size: 18px; font-weight: 500; }
-[hidden] { display: none !important; }
-.muted { color: var(--muted); }
-.app-header { height: var(--header-height); display: flex; align-items: center; padding: 12px 20px; gap: 32px; }
-.brand { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font-size: 22px; font-weight: 500; }
-.brand:hover { color: var(--accent-hover); }
-.diamond { font-size: 34px; line-height: 1; }
-.app-header nav { display: flex; align-items: center; gap: 28px; }
-.app-header nav button, .app-header nav a { display: inline-flex; align-items: center; gap: 4px; padding: 8px 0; font-size: 20px; color: var(--muted); }
-.app-header nav button:hover, .app-header nav .nav-active { color: var(--text); }
-.app-header nav svg { width: 14px; transform: rotate(-45deg); }
-.network { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 14px; color: var(--muted); white-space: nowrap; }
-.connection-dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--quiet); }
-.connection-dot.phase-connected { background: var(--positive); }
-.connection-dot.phase-connecting { background: var(--accent); }
-.connection-dot.phase-error { background: var(--danger); }
-.app-main { width: min(var(--card-width), calc(100% - 16px)); margin: 66px auto 80px; }
-.toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0 5px; margin-bottom: 5px; height: 36px; }
-.tabs { display: flex; gap: 12px; }
-.tabs button { display: flex; gap: 6px; align-items: center; padding: 8px 12px; border-radius: var(--radius-pill); color: var(--muted); font-size: 16px; font-weight: 500; }
-.tabs button[aria-selected="true"] { background: var(--selected); color: var(--text); }
-.tabs button:hover { color: var(--text); }
-.count { font-size: 11px; background: var(--surface); padding: 1px 5px; border-radius: var(--radius-pill); }
-.toolbar-tools { display: flex; gap: 8px; }
-.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 5px; border-radius: var(--radius-pill); color: var(--muted); flex-shrink: 0; }
-.icon-button:hover { background: var(--surface-hover); color: var(--text); }
-.icon-button:disabled { opacity: .4; }
-.amount-card, .recipient-card { height: 136px; padding: 16px; border-radius: var(--radius-card); }
-.amount-card { border: 1px solid var(--border); }
-.recipient-card { background: var(--surface); margin-top: 4px; height: auto; }
-.amount-card > label, .recipient-card > label { font-size: 16px; }
-.amount-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 8px; height: 44px; }
-.amount-row input { font-size: 36px; font-weight: 400; line-height: 1.2; min-width: 0; }
-.amount-row input { background: none; border: 0; padding: 0; width: 100%; }
-.amount-row input::placeholder { color: var(--quiet); opacity: 1; }
-.card-caption { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--muted); }
-.token-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; padding: 4px 10px 4px 4px; height: 38px; border-radius: var(--radius-pill); font-weight: 600; }
-.token-pill { border: 1px solid var(--border); }
-.sol-icon { display: inline-flex; width: 28px; height: 28px; border-radius: var(--radius-pill); align-items: center; justify-content: center; background: var(--background); flex-shrink: 0; }
-.sol-icon svg { width: 21px; height: 21px; fill: var(--solana); }
-.flow-arrow { width: 40px; height: 40px; border: 4px solid var(--background); border-radius: var(--radius-dialog); background: var(--surface); display: flex; align-items: center; justify-content: center; margin: -18px auto -22px; position: relative; z-index: 1; color: var(--text); }
-.flow-arrow svg { width: 24px; height: 24px; }
-.primary-action, .secondary-action { width: 100%; padding: 16px 20px; border-radius: var(--radius-button); font-size: 18px; font-weight: 600; margin-top: 4px; background: var(--accent); min-height: 55px; }
-.primary-action:hover:not(:disabled) { background: var(--accent-hover); }
-.primary-action:disabled { background: var(--surface); color: var(--muted); }
-.secondary-action { background: var(--accent-tint); color: var(--accent); font-size: 16px; }
-.secondary-action:disabled { color: var(--quiet); background: var(--surface); }
-.form-footnote { color: var(--quiet); text-align: center; font-size: 12px; margin: 16px 12px; }
-.text-button { color: var(--accent); padding: 0; font-size: inherit; }
-.text-button:hover { color: var(--accent-hover); }
-.text-button:disabled { opacity: .5; }
-.retry-button { display: block; margin: 12px auto; }
-.hint { font-size: 13px; color: var(--muted); line-height: 1.5; }
-.error, .notice { font-size: 14px; line-height: 1.5; margin-top: 12px; overflow-wrap: anywhere; }
-.error { color: var(--danger); }
-.notice { color: var(--muted); padding: 12px; background: var(--surface); border-radius: var(--radius-dialog); }
-[popover], dialog { color: var(--text); background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-dialog); padding: 0; }
-[popover]::backdrop { background: transparent; }
-.settings-trigger { anchor-name: --settings; }
-.settings-popover { width: min(var(--popover-width), calc(100vw - 24px)); padding: 16px; margin: 0; inset: 184px auto auto max(12px, calc(50% + var(--card-width) / 2 - var(--popover-width))); }
-@supports (position-anchor: --settings) { .settings-popover { position-anchor: --settings; inset: auto; top: anchor(bottom); right: anchor(right); margin-top: 8px; } }
-.settings-popover h2 { margin-bottom: 16px; }
-.payout-options { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
-.payout-options legend { padding: 0; margin-bottom: 12px; font-size: 14px; }
-.payout-options label { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-dialog); font-size: 14px; cursor: pointer; }
-.payout-options label:hover { background: var(--surface-hover); }
-.payout-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
-.payout-options label:has(:checked) { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }
-.payout-options label:has(:focus-visible) { outline: 2px solid var(--muted); outline-offset: 3px; }
-.payout-options label > svg { opacity: 0; flex-shrink: 0; }
-.payout-options label:has(:checked) > svg { opacity: 1; }
-.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0; font-size: 14px; }
-dialog { width: min(var(--dialog-width), calc(100% - 24px)); max-height: calc(100dvh - 32px); overflow: auto; }
-dialog::backdrop { background: var(--overlay); }
-.dialog-content { padding: 20px; }
-.dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
-.address-field { margin: 12px 0; display: flex; gap: 8px; align-items: center; border-radius: var(--radius-button); background: var(--background); padding: 12px; }
-.address-field:focus-within { outline: 2px solid var(--muted); outline-offset: 3px; }
-.address-field input { min-width: 0; width: 100%; border: 0; background: none; font-size: 16px; padding: 4px 0; }
-.address-field input:focus-visible { outline: none; }
-.review-amount { display: flex; align-items: center; gap: 12px; font-size: 32px; margin-bottom: 8px; }
-.review-amount strong { font-weight: 500; }
-.review-dialog .primary-action { margin-top: 20px; }
-.full-address { overflow-wrap: anywhere; max-width: 65%; }
-.empty-state { padding: 48px 16px; text-align: center; border: 1px solid var(--border); border-radius: var(--radius-card); color: var(--muted); }
-.empty-state > svg { width: 40px; height: 40px; color: var(--quiet); margin-bottom: 16px; }
-.empty-state h2 { color: var(--text); }
-.empty-state p { font-size: 14px; margin: 8px 0 20px; }
-.transfer-list { border: 1px solid var(--border); border-radius: var(--radius-card); padding: 8px; margin-bottom: 8px; }
-.transfer-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 8px; text-align: left; border-radius: var(--radius-dialog); }
-.transfer-item:hover, .transfer-item.selected { background: var(--surface); }
-.transfer-item > span:nth-child(2) { flex: 1; }
-.transfer-item strong, .transfer-item small { display: block; }
-.transfer-item strong { font-size: 16px; font-weight: 500; }
-.transfer-item small { font-size: 12px; color: var(--muted); margin-top: 2px; }
-.transfer-item > .muted { font-size: 12px; text-align: right; max-width: 35%; }
-.status-card { background: var(--surface); padding: 20px; border-radius: var(--radius-card); font-size: 14px; }
-.status-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
-.status-card p { margin-bottom: 12px; }
-.copy-value { margin: 16px 0; font-size: 12px; }
-.copy-value > div { display: flex; align-items: center; gap: 12px; background: var(--background); border-radius: var(--radius-dialog); padding: 12px; margin-top: 6px; }
-.copy-value code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
-.recovery { padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
-.recovery summary { cursor: pointer; }
-.recovery summary .muted { font-size: 12px; float: right; }
-.status-facts { margin: 20px 0; font-size: 14px; }
-.status-facts > div { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin: 12px 0; }
-.status-facts dt { color: var(--muted); }
-.status-facts dd { margin: 0; text-align: right; }
-.payouts { list-style: none; padding: 0; font-size: 13px; }
-.payouts li { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; overflow-wrap: anywhere; }
-.payouts a { color: var(--accent); }
-.refund-form { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 16px; }
-.refund-form label { display: block; }
-.refund-form input { width: 100%; margin: 8px 0; padding: 12px; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-dialog); }
-.help-button { position: fixed; bottom: 12px; left: 12px; color: var(--text); anchor-name: --help; }
-.help-popover { width: min(var(--popover-width), calc(100% - 24px)); padding: 20px; margin: 0; inset: auto auto 52px 12px; }
-.help-popover h2 { margin-bottom: 12px; }
-.help-popover a, .help-popover .text-button { display: block; font-size: 14px; margin-top: 16px; }
+body {
+  margin: 0;
+}
+.app-header {
+  :where(button, a) {
+    font: inherit;
+    color: inherit;
+    background: none;
+    border: 0;
+    cursor: pointer;
+    text-decoration: none;
+  }
+  :focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 3px;
+  }
+}
+.app-header {
+  box-sizing: border-box;
+  height: var(--header-height);
+  display: flex;
+  align-items: center;
+  padding: 12px 20px;
+  gap: 32px;
+}
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--accent);
+  font-size: 22px;
+  font-weight: 500;
+}
+.brand:hover {
+  color: var(--accent-hover);
+}
+.diamond {
+  font-size: 34px;
+  line-height: 1;
+}
+.app-header nav {
+  display: flex;
+  align-items: center;
+  gap: 28px;
+}
+.app-header nav button,
+.app-header nav a {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 0;
+  font-size: 20px;
+  color: var(--muted);
+}
+.app-header nav button:hover,
+.app-header nav .nav-active {
+  color: var(--text);
+}
+.app-header nav svg {
+  width: 14px;
+  transform: rotate(-45deg);
+}
+.network {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+  font-size: 14px;
+  color: var(--muted);
+  white-space: nowrap;
+}
+.connection-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: var(--radius-pill);
+  background: var(--quiet);
+}
+.connection-dot.phase-connected {
+  background: var(--positive);
+}
+.connection-dot.phase-connecting {
+  background: var(--accent);
+}
+.connection-dot.phase-error {
+  background: var(--danger);
+}
+.app-main {
+  width: min(var(--card-width), calc(100% - 16px));
+  margin: 66px auto 80px;
+}
 @media (max-width: 600px) {
-  .app-header { gap: 16px; padding: 12px 16px; }
-  .brand { font-size: 18px; gap: 4px; }
-  .diamond { font-size: 28px; }
-  .app-header nav { gap: 16px; }
-  .app-header nav button { display: none; }
-  .app-header nav a { font-size: 14px; }
-  .network { font-size: 12px; }
-  .app-main { margin-top: 26px; }
-  .tabs { gap: 8px; }
-  .tabs button { font-size: 14px; }
-  .settings-popover { top: 140px; right: 12px; left: auto; }
-  .amount-row input { font-size: 34px; }
-  .card-caption { font-size: 12px; }
-  .primary-action { font-size: 16px; }
-}
-@media (prefers-reduced-motion: reduce) { button, a { transition: none; } button:not(:disabled):active { transform: none; } }
+  .app-header {
+    gap: 16px;
+    padding: 12px 16px;
+  }
+  .brand {
+    font-size: 18px;
+    gap: 4px;
+  }
+  .diamond {
+    font-size: 28px;
+  }
+  .app-header nav {
+    gap: 16px;
+  }
+  .app-header nav button {
+    display: none;
+  }
+  .app-header nav a {
+    font-size: 14px;
+  }
+  .network {
+    font-size: 12px;
+  }
+  .app-main {
+    margin-top: 26px;
+  }
+}