+ setOpen(false)}
+ onChanged={() => void refresh()}
+ />
+ )}
+
+ )
+}
+
+/** One queued transfer, awaiting yes/no. */
+function PendingCard({ snapshot }: { snapshot: PendingSnapshot }): JSX.Element {
+ const [choice, setChoice] = useState({
+ cookies: true,
+ localStorage: true,
+ sessionStorage: snapshot.sessionStorageCount > 0
+ })
+ const [busy, setBusy] = useState(false)
+ const [result, setResult] = useState
+
+
+ {pending.length > 0 && (
+
+
+
+
+
+ Session Relay
+ {status?.paired && (
+
+
+ {status.browser ?? 'Browser'} connected
+
+ )}
+ + Send a site's live session from Chrome, Edge or Brave into Roxy's browser, so + you can debug a signed-in page without signing in again. Nothing transfers until you + click send in the extension, and nothing is applied until you approve it here. +
+
+ {pending.map((p) => (
+
+ )}
+
+ {open && (
+
+
+ )
+ }
+
+ return (
+
+
+ {result.cookiesSkippedPartitioned > 0 && (
+ + {result.cookiesSkippedPartitioned} partitioned{' '} + {result.cookiesSkippedPartitioned === 1 ? 'cookie was' : 'cookies were'} skipped — + Electron cannot store these in the right partition, so importing them would put them in + the wrong one. +
+ )} + {result.errors.map((e, i) => ( ++ {e} +
+ ))} +
+
+ )
+}
+
+function Pick({
+ label,
+ count,
+ checked,
+ onChange
+}: {
+ label: string
+ count: number
+ checked: boolean
+ onChange: (v: boolean) => void
+}): JSX.Element {
+ return (
+
+ )
+}
+
+/** Which browser's extensions page to send the user to. */
+const BROWSERS = [
+ { name: 'Chrome', url: 'chrome://extensions' },
+ { name: 'Edge', url: 'edge://extensions' },
+ { name: 'Brave', url: 'brave://extensions' }
+] as const
+
+/**
+ * The four-step install, plus pairing.
+ *
+ * The steps are manual because loading an unpacked extension is: we cannot
+ * click through another browser's UI. So the job here is to make each step
+ * unambiguous and to do the parts we CAN automate (copying the folder,
+ * revealing it, minting the code).
+ */
+function SetupDialog({
+ status,
+ onClose,
+ onChanged
+}: {
+ status: RelayStatus | null
+ onClose: () => void
+ onChanged: () => void
+}): JSX.Element {
+ const [installed, setInstalled] = useState<{ path: string; version: string } | null>(null)
+ const [busy, setBusy] = useState(false)
+ const [error, setError] = useState
+
+
+
+
+
+ {snapshot.browser} wants to send a session to Roxy
+
+
+ {snapshot.origin}
+
+
+ setChoice((c) => ({ ...c, cookies: v }))}
+ />
+ setChoice((c) => ({ ...c, localStorage: v }))}
+ />
+ setChoice((c) => ({ ...c, sessionStorage: v }))}
+ />
+
+
+ + Values are hidden and stay in Roxy's main process until you import. +
+ + + + {error &&{error}
} + +
+
+
+
+
+
,
+ document.body
+ )
+}
+
+function ManageBody({
+ status,
+ onChanged,
+ onClose
+}: {
+ status: RelayStatus | null
+ onChanged: () => void
+ onClose: () => void
+}): JSX.Element {
+ const last = status?.lastTransferAt
+ const seen = status?.lastSeenAt
+ const fmt = (t?: number): string => (t ? new Date(t).toLocaleString() : 'never')
+
+ return (
+ e.stopPropagation()}
+ >
+
+
+
+
+ {relayNotListening && (
+
+ {paired ? 'Session Relay' : 'Connect a browser'}
+
+
+
+ The relay could not open port {status?.port}. Another app is probably using it — close
+ it and restart Roxy.
+
+ )}
+
+ {paired ? (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {pairing ? (
+ void startPairing()} primary>
+ Show pairing code
+
+ )}
+
+
+ {error &&
+ )}
+ + Roxy copies it to your Documents folder, where your browser can load it. +
+
+ void install()} busy={busy} primary={!installed}>
+ {installed ? 'Save again' : 'Save extension'}
+
+ {installed && (
+ void api.relay.revealExtension()}>
+
+ )}
+
+ {installed && (
+
+
+ )}
+
+ {installed.path}
+
+
+
+ {BROWSERS.map((b) => (
+ void navigator.clipboard.writeText(b.url)}>
+
+ ))}
+
+
+ Browsers block other apps from opening chrome:// pages, so paste the
+ copied address into your browser's address bar.
+
+ The toggle is in the top-right of that page. It is what allows an extension to be + loaded from a folder. +
++ Click Load unpacked and choose + the folder from step 1. The Roxy icon appears in your toolbar. +
+
+
+ ) : (
+ + Click the Roxy icon in your browser and enter this code: +
+
+
+
+ {pairing.code}
+
+
+ Expires in {secondsLeft}s
+
+
+ {error}
} +
+
+ )
+}
+
+/**
+ * The hands-off settings: master switch, the sites that skip the prompt, and
+ * the blocklist that overrides both.
+ */
+function Automation({ status }: { status: RelayStatus | null }): JSX.Element {
+ const prefs = status?.prefs
+ const [blockDraft, setBlockDraft] = useState('')
+ const [error, setError] = useState-
+
+ Transfers only happen when you click send in the extension, and only after you approve them + here. +
+ +
+ {
+ await api.relay.installExtension()
+ onChanged()
+ }}
+ >
+
+ void api.relay.revealExtension()}>
+
+ {
+ await api.relay.unpair()
+ onChanged()
+ onClose()
+ }}
+ >
+ Disconnect
+
+
+
+
+
+
+ {/* Trusted */}
+
+ )
+}
+
+function Row({
+ label,
+ value,
+ mono
+}: {
+ label: string
+ value: string
+ mono?: boolean
+}): JSX.Element {
+ return (
+
+
+
+ {/* Blocked */}
+
+ Trusted sites ({prefs.trusted.length})
+
+ {prefs.trusted.length === 0 ? (
+ + None yet. Tick “Always allow” when you approve a transfer. +
+ ) : ( +-
+ {prefs.trusted.map((o) => (
+
-
+
+ {o} ++ +
+ ))}
+
+
+
+ {/* Activity — the audit trail for transfers that happened with no prompt. */}
+ {status.recent.length > 0 && (
+
+ Never transfer
+
+ + Covers the domain and all its subdomains, and overrides trust. Enforced by Roxy as well as + the extension. +
+
+ setBlockDraft(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') void addBlock()
+ }}
+ placeholder="bank.com"
+ spellCheck={false}
+ className="h-7 min-w-0 flex-1 rounded-md border border-border bg-surface-2 px-2 font-mono text-[11px] text-text outline-none placeholder:text-text-subtle focus:border-accent"
+ />
+ void addBlock()}>Add
+
+ {error && {error}
} + {prefs.blocked.length > 0 && ( +-
+ {prefs.blocked.map((b) => (
+
-
+
+ {b} ++ +
+ ))}
+
+
+ )}
+
+ Recent transfers
+
+ -
+ {status.recent.slice(0, 8).map((t, i) => (
+
-
+
+ {t.origin} ++ + {t.cookies}c{t.localStorage ? ` · ${t.localStorage}ls` : ''} + {t.auto ? ' · auto' : ''} + + + {new Date(t.at).toLocaleTimeString()} + +
+ ))}
+
+ {label}
+
+ {value}
+
+
+ )
+}
+
+function Step({
+ n,
+ title,
+ children,
+ last
+}: {
+ n: number
+ title: string
+ children: React.ReactNode
+ last?: boolean
+}): JSX.Element {
+ return (
+
+
+ )
+}
+
+function Btn({
+ children,
+ onClick,
+ primary,
+ danger,
+ busy
+}: {
+ children: React.ReactNode
+ onClick: () => void
+ primary?: boolean
+ danger?: boolean
+ busy?: boolean
+}): JSX.Element {
+ return (
+
+ )
+}
diff --git a/src/renderer/src/routes/Settings.tsx b/src/renderer/src/routes/Settings.tsx
index de63467..5e660da 100644
--- a/src/renderer/src/routes/Settings.tsx
+++ b/src/renderer/src/routes/Settings.tsx
@@ -18,6 +18,7 @@ import { randomSlug, slugToBranchSegment } from '@shared/slugs'
import { PageShell } from '../components/PageShell'
import { McpServers } from '../components/McpServers'
import { CookiePanel } from '../components/CookiePanel'
+import { SessionRelay } from '../components/SessionRelay'
import { ConfigBackup } from '../components/ConfigBackup'
import { ActivitySection } from '../components/ActivitySection'
import { ProviderLogo } from '../lib/providerLogos'
@@ -300,6 +301,10 @@ export default function Settings(): JSX.Element {
+
+
+ {n}
+
+ {!last && }
+
+
+ {title}
+ {children}
+
+