@pellux/goodvibes-tui 1.17.0 → 1.19.0

package/src/panels/modals/memory-modal.ts

@@ -7,6 +7,8 @@ import type {
   ConfigModalView,
 } from '../../input/config-modal-types.ts';
 import { memoryRecordTemporalStatus } from '@pellux/goodvibes-sdk/platform/state';
+import type { MemoryConsolidationGatewayResolution, MemoryConsolidationProposal } from '../memory-consolidation-gateway.ts';
+import { classifyConsolidationFetchError } from '../memory-consolidation-gateway.ts';
 
 // ---------------------------------------------------------------------------
 // Memory → config-modal surface (group-B port). Two tabs: 'All Records'
@@ -63,8 +65,23 @@ export interface MemoryModalDeps {
       readonly indexUnavailableReason?: string | null | undefined;
     }>;
   };
+  /**
+   * Resolve the memory-consolidation-receipts gateway (memory-consolidation-gateway.ts),
+   * lazily — called fresh each time the Proposals tab (re)fetches, exactly like
+   * the Fleet panel's `resolveGateway` (fleet-gateway.ts / fleet-acts.ts). Absent
+   * in a session with no daemon-backed control plane wired: the Proposals tab
+   * then renders its "unavailable" honest state without ever attempting a fetch.
+   */
+  readonly resolveConsolidationGateway?: () => MemoryConsolidationGatewayResolution;
 }
 
+/** The Proposals tab's fetch state — one honest rendering per state, never a blend. */
+type ProposalsStatus =
+  | { readonly kind: 'loading' }
+  | { readonly kind: 'unavailable'; readonly reason: string }
+  | { readonly kind: 'error'; readonly message: string }
+  | { readonly kind: 'ready'; readonly proposals: readonly MemoryConsolidationProposal[] };
+
 /**
  * Client-side port of the SDK's MemoryStore.reviewQueue ranking
  * (memory-store-helpers.ts reviewQueueScore/isReviewCandidate): all four
@@ -104,11 +121,14 @@ class MemoryModalSurface implements ConfigModalSurface {
   private reviewRecords: MemoryRecordLike[] = [];
   /** Honest note on the last read: a wire failure (client mode) or the index-unavailable fallback reason — never silently dropped. */
   private loadNote: string | null = null;
+  /** The Proposals tab's fetch state — starts 'loading' whenever a gateway is wired (see refreshProposals). */
+  private proposalsStatus: ProposalsStatus = { kind: 'loading' };
   private requestRender: (() => void) | null = null;
 
   constructor(private readonly deps: MemoryModalDeps) {}
 
   private readonly reviewGate = (row: ConfigModalRow | null, tabId: string): boolean => tabId === 'review' && row !== null;
+  private readonly proposalsGate = (row: ConfigModalRow | null, tabId: string): boolean => tabId === 'proposals' && row !== null;
 
   readonly actions = [
     { key: 'enter', id: 'markReviewed', label: 'reviewed', enabledFor: this.reviewGate },
@@ -117,6 +137,13 @@ class MemoryModalSurface implements ConfigModalSurface {
     { key: 'f', id: 'markFresh', label: 'fresh', enabledFor: this.reviewGate },
     { key: 'd', id: 'remove', label: 'delete', enabledFor: (row: ConfigModalRow | null) => row !== null },
     { key: 'r', id: 'refresh', label: 'refresh' },
+    // Jump from a selected proposal to one of its affected records in the
+    // Review Queue tab. A DISTINCT key from 'enter' (not shared with
+    // markReviewed): ConfigModal.resolveAction matches the FIRST action bound
+    // to a key and returns null if THAT one's enabledFor fails, rather than
+    // trying the next action bound to the same key — so gating two different
+    // 'enter' actions by tabId alone would silently break one of them.
+    { key: 'v', id: 'jumpToReviewQueue', label: 'view in review queue', enabledFor: this.proposalsGate },
   ];
 
   onOpen(requestRender: () => void): void {
@@ -129,6 +156,10 @@ class MemoryModalSurface implements ConfigModalSurface {
   }
 
   private async refresh(): Promise<void> {
+    await Promise.all([this.refreshRecords(), this.refreshProposals()]);
+  }
+
+  private async refreshRecords(): Promise<void> {
     if (!this.deps.memoryRegistry) { this.allRecords = []; this.reviewRecords = []; this.loadNote = null; return; }
     try {
       const result = await this.deps.memoryRegistry.honestSearch({ limit: 100 });
@@ -142,10 +173,50 @@ class MemoryModalSurface implements ConfigModalSurface {
     this.requestRender?.();
   }
 
+  /**
+   * Lazy fetch of memory.consolidation.receipts (memory-consolidation-gateway.ts)
+   * — only attempted when this surface opens or refreshes, never polled. No
+   * gateway resolver wired at all (session has no daemon-backed control
+   * plane) renders the same honest "unavailable" state as a resolved-but-
+   * refused gateway (daemon disabled / no control-plane URL) or a 501/404
+   * from an older daemon with no consolidation scheduler — three different
+   * causes, one bucket, because from the operator's seat they mean the same
+   * thing: nothing to show, and no fault of theirs.
+   */
+  private async refreshProposals(): Promise<void> {
+    if (!this.deps.resolveConsolidationGateway) {
+      this.proposalsStatus = { kind: 'unavailable', reason: 'No consolidation gateway wired for this session.' };
+      return;
+    }
+    this.proposalsStatus = { kind: 'loading' };
+    this.requestRender?.();
+    const resolution = this.deps.resolveConsolidationGateway();
+    if (!resolution.available) {
+      this.proposalsStatus = { kind: 'unavailable', reason: resolution.reason };
+      return;
+    }
+    try {
+      const result = await resolution.gateway.fetchReceipts();
+      this.proposalsStatus = { kind: 'ready', proposals: result.pendingProposals };
+    } catch (error) {
+      this.proposalsStatus = classifyConsolidationFetchError(error);
+    }
+  }
+
   private recordFrom(id: string): MemoryRecordLike | undefined {
     return this.allRecords.find((r) => r.id === id) ?? this.reviewRecords.find((r) => r.id === id);
   }
 
+  /** First pending proposal that names a given record id, keyed for the Review Queue's reason correlation (item 3). */
+  private proposalsByRecordId(): Map<string, MemoryConsolidationProposal> {
+    const map = new Map<string, MemoryConsolidationProposal>();
+    if (this.proposalsStatus.kind !== 'ready') return map;
+    for (const proposal of this.proposalsStatus.proposals) {
+      for (const id of proposal.ids) if (!map.has(id)) map.set(id, proposal);
+    }
+    return map;
+  }
+
   private allTab(): ConfigModalTab {
     const rows: ConfigModalRow[] = this.allRecords.map((record) => ({
       id: record.id,
@@ -162,10 +233,25 @@ class MemoryModalSurface implements ConfigModalSurface {
   }
 
   private reviewTab(): ConfigModalTab {
-    const rows: ConfigModalRow[] = this.reviewRecords.map((record) => ({
-      id: record.id,
-      label: `${record.reviewState.padEnd(13)} ${String(record.confidence).padStart(3)}%  ${record.summary}${record.staleReason ? `  (stale: ${record.staleReason})` : ''}${temporalSuffix(record)}`,
-    }));
+    const proposalByRecord = this.proposalsByRecordId();
+    const rows: ConfigModalRow[] = this.reviewRecords.map((record) => {
+      // A contradiction proposal already carries its reason on the record
+      // itself (the daemon sets reviewState 'contradicted' + staleReason); a
+      // cross-scope-duplicate proposal marks the record 'fresh' with NO
+      // staleReason, so without this correlation those rows are bare and
+      // unexplained (item 3) — fall back to the fetched proposal's own
+      // reason only when the record didn't already carry one.
+      const proposal = record.staleReason ? undefined : proposalByRecord.get(record.id);
+      const reasonSuffix = record.staleReason
+        ? `  (stale: ${record.staleReason})`
+        : proposal
+          ? `  (${proposal.kind}: ${proposal.reason})`
+          : '';
+      return {
+        id: record.id,
+        label: `${record.reviewState.padEnd(13)} ${String(record.confidence).padStart(3)}%  ${record.summary}${reasonSuffix}${temporalSuffix(record)}`,
+      };
+    });
     return {
       id: 'review',
       label: 'Review Queue',
@@ -176,6 +262,40 @@ class MemoryModalSurface implements ConfigModalSurface {
     };
   }
 
+  /**
+   * The Proposals tab — WHAT the daemon's idle-time consolidation pass
+   * proposed (contradiction / cross-scope-duplicate / stale-delete) and is
+   * holding for human judgment, read lazily over memory.consolidation.receipts
+   * (memory-consolidation-gateway.ts). Three distinct honest states render as
+   * three distinct lines — 'loading' / 'unavailable' / 'error' never collapse
+   * into a shared "nothing to show" — plus the true empty state ('ready' with
+   * zero proposals) which is a fourth, equally honest line.
+   */
+  private proposalsTab(): ConfigModalTab {
+    const status = this.proposalsStatus;
+    const header = [`pending proposals ${status.kind === 'ready' ? status.proposals.length : 0}`];
+    if (status.kind === 'loading') {
+      return { id: 'proposals', label: 'Proposals', header, rows: [], emptyText: 'Loading pending proposals…' };
+    }
+    if (status.kind === 'unavailable') {
+      return { id: 'proposals', label: 'Proposals', header, rows: [], emptyText: `Pending proposals unavailable: ${status.reason}` };
+    }
+    if (status.kind === 'error') {
+      return { id: 'proposals', label: 'Proposals', header, rows: [], emptyText: `Could not fetch pending proposals: ${status.message}` };
+    }
+    const rows: ConfigModalRow[] = status.proposals.map((proposal, index) => ({
+      id: `proposal:${index}`,
+      label: `[${proposal.kind}] ${proposal.reason}  — ${proposal.ids.length} record${proposal.ids.length === 1 ? '' : 's'}: ${proposal.ids.join(', ')}`,
+    }));
+    return {
+      id: 'proposals',
+      label: 'Proposals',
+      header,
+      rows,
+      emptyText: 'No pending proposals — nothing awaiting judgment right now.',
+    };
+  }
+
   buildView(): ConfigModalView {
     if (!this.deps.memoryRegistry) {
       return {
@@ -187,12 +307,13 @@ class MemoryModalSurface implements ConfigModalSurface {
     return {
       title: 'Memory',
       ...(this.loadNote ? { degraded: this.loadNote } : {}),
-      tabs: [this.allTab(), this.reviewTab()],
+      tabs: [this.allTab(), this.reviewTab(), this.proposalsTab()],
     };
   }
 
   onAction(id: string, ctx: ConfigModalActionContext): void {
     if (id === 'refresh') { void this.refresh(); ctx.setStatus('Reloading memory records...'); return; }
+    if (id === 'jumpToReviewQueue') { this.handleJumpToReviewQueue(ctx); return; }
     const record = ctx.row ? this.recordFrom(ctx.row.id) : undefined;
     if (!record) return;
     const review = (state: string, confidence: number, reason?: string): void => {
@@ -209,6 +330,29 @@ class MemoryModalSurface implements ConfigModalSurface {
       case 'remove': void ctx.executeCommand?.('recall', ['remove', record.id]); ctx.setStatus(`Dispatched /recall remove ${record.id}.`); break;
     }
   }
+
+  /**
+   * The Proposals tab's "jump": move to the Review Queue tab with one of the
+   * selected proposal's affected records selected — the same host mechanism
+   * (`ctx.jumpToRow`) any future in-surface jump would use. A proposal's
+   * `ids` are not guaranteed to all be inside the review queue's top-24
+   * window, so this picks the first id that IS present there rather than
+   * assuming the first id always is; when none are, it says so honestly
+   * instead of jumping nowhere and leaving the user to wonder why.
+   */
+  private handleJumpToReviewQueue(ctx: ConfigModalActionContext): void {
+    if (this.proposalsStatus.kind !== 'ready' || !ctx.row) return;
+    const index = Number(ctx.row.id.slice('proposal:'.length));
+    const proposal = this.proposalsStatus.proposals[index];
+    if (!proposal) return;
+    const target = proposal.ids.find((id) => this.reviewRecords.some((r) => r.id === id));
+    if (!target) {
+      ctx.setStatus(`None of this proposal's ${proposal.ids.length} record(s) are in the current review-queue window.`);
+      return;
+    }
+    ctx.jumpToRow?.('review', target);
+    ctx.setStatus(`Jumped to ${target} in the Review Queue.`);
+  }
 }
 
 export function createMemoryModalSurface(deps: MemoryModalDeps): ConfigModalSurface {

package/src/panels/modals/pairing-modal.ts

@@ -6,42 +6,83 @@ import type {
   ConfigModalSurface,
   ConfigModalView,
 } from '../../input/config-modal-types.ts';
-import { encodeConnectionPayload, generateQrMatrix, renderQrToString } from '@pellux/goodvibes-sdk/platform/pairing';
+import { describeOriginPosture, generateQrMatrix, renderQrToString, type OriginPosture, type PairingHandoffOfferKind } from '@pellux/goodvibes-sdk/platform/pairing';
+import { formatPairingOffers, formatPostureCapabilities, pairingPostureNotice } from '../../core/pairing-offers.ts';
 
 // ---------------------------------------------------------------------------
-// QR Code → 'pairing' config-modal surface (group-B port). Connection
-// URL/token/username(/password) plus a scannable QR block — read/navigate only.
-// Token regeneration is a destructive mutation (it invalidates any live
-// companion session) that the panel gated behind an in-panel confirm; per
-// charter that confirm is never folded into a modal, so regenerate routes to a
-// command instead. `getConnectionInfo` is a lazy thunk (loaded once on first
-// buildView, cached) so a missing daemon home degrades honestly rather than
-// throwing at modal-registration time.
+// Device Pairing config-modal surface. Shows the web-app origin, the per-device
+// token's name, a masked token/deep-link pair, the offer set with plain-language
+// consequences, and a scannable QR of the `#pair=<token>` deep link — a camera
+// scan opens the web app already signed in. No raw JSON connection blob is ever
+// encoded.
 //
-// the regenerate action now dispatches the real `/qrcode regenerate`
-// verb (which rotates the shared operator-token store) and, once it resolves,
-// RE-PULLS the lazy connection-info thunk so the modal shows the rotated token +
-// QR in place without being re-opened. `confirm: true` keeps the two-press
-// guard so a stray keystroke never rotates a live companion's token.
+// `getConnectionInfo` is a lazy thunk (loaded once on first buildView, cached):
+// each modal open mints its OWN named per-device token, so a missing pairing
+// service degrades honestly to an "unavailable" state instead of throwing at
+// registration time. "new device token" clears the cache and re-pulls to mint a
+// fresh token + QR in place — non-destructive now, because a freshly minted
+// token no longer rotates a shared secret out from under a live device; old
+// tokens stay valid until explicitly revoked in the settings device surface.
 // ---------------------------------------------------------------------------
 
 export interface PairingModalConnectionInfo {
+  /** The web-app origin the deep link opens (e.g. http://workshop.local:3141). */
   readonly url: string;
+  /** The one-time pairing secret (masked unless revealed). */
   readonly token: string;
-  readonly username: string;
-  readonly password?: string;
-  readonly version?: string;
-  readonly surface?: string;
+  /** The per-device token's editable name. */
+  readonly tokenName: string;
+  /** The `#pair=<token>` deep link the QR encodes — opens the web app signed in. */
+  readonly deepLink: string;
+  /** The offer set this pairing carries (each declinable in the web app). */
+  readonly offers: readonly PairingHandoffOfferKind[];
+  /**
+   * The honest TLS/capability posture of the web origin the deep link opens
+   * (the SDK's describeOriginPosture / the handoff's `posture` field). The one
+   * honest LAN line and the labeled capability list both render from here — never
+   * from a locally-authored string. Absent when no web origin is known.
+   */
+  readonly posture?: OriginPosture | undefined;
 }
 export interface PairingModalControlPlaneSnapshot { readonly activeClientIds: readonly string[]; }
 export interface PairingModalReadModel<T> { getSnapshot(): T; }
 
+/** tailscale.get shape — the daemon's honest tailscale detection (quiet when absent). */
+export interface PairingTailscaleStatus {
+  readonly available: boolean;
+  readonly loggedIn: boolean;
+  readonly magicDnsName?: string | undefined;
+  readonly httpsUrl?: string | undefined;
+  readonly detail: string;
+  readonly lastServe?: PairingTailscaleServeReceipt | undefined;
+}
+/** tailscale.serve.run receipt — the one-action serve result rendered verbatim. */
+export interface PairingTailscaleServeReceipt {
+  readonly at: number;
+  readonly command: string;
+  readonly ok: boolean;
+  readonly url?: string | undefined;
+  readonly detail: string;
+}
+
 export interface PairingModalDeps {
   /** Lazy connection-info provider — returns null when the daemon/companion
    *  token cannot be resolved (honest degraded state instead of a throw). */
   readonly getConnectionInfo: () => PairingModalConnectionInfo | null;
   readonly controlPlaneReadModel?: PairingModalReadModel<PairingModalControlPlaneSnapshot>;
   readonly copyToClipboard?: (text: string) => void;
+  /**
+   * Probe tailscale (tailscale.get) once on open. Absent dep, a null result, or
+   * `available:false` all keep the tailscale affordance QUIET — never a nag.
+   * Present + available ⇒ the surface offers the one-action serve.
+   */
+  readonly probeTailscale?: () => Promise<PairingTailscaleStatus | null>;
+  /**
+   * Run tailscale.serve.run (behind the standard confirm) and return its receipt.
+   * Wired only when probeTailscale is; the resulting https MagicDNS URL and the
+   * receipt render in place.
+   */
+  readonly runTailscaleServe?: () => Promise<PairingTailscaleServeReceipt | null>;
 }
 
 // Fixed-width placeholder — deliberately NOT derived from the real secret's
@@ -50,20 +91,45 @@ const SECRET_MASK = '••••••••••••';
 
 class PairingModalSurface implements ConfigModalSurface {
   readonly name = 'pairing-modal';
-  readonly title = 'Companion Pairing';
+  readonly title = 'Device Pairing';
   private info: PairingModalConnectionInfo | null | undefined = undefined;
   private revealed = false;
   private requestRender: () => void = () => {};
+  /** tailscale.get result: undefined = not probed yet, null = probed/absent (stays quiet). */
+  private tailscale: PairingTailscaleStatus | null | undefined = undefined;
+  /** The receipt from a completed serve run, rendered verbatim under the affordance. */
+  private serveReceipt: PairingTailscaleServeReceipt | null = null;
+  /** True while a serve run is in flight (the action is single-shot). */
+  private serving = false;
 
   constructor(private readonly deps: PairingModalDeps) {}
 
   readonly actions = [
     { key: 'v', id: 'toggleReveal', label: 'reveal token' },
-    { key: 'c', id: 'copyToken', label: 'copy token', enabledFor: () => Boolean(this.deps.copyToClipboard) },
-    { key: 'r', id: 'regenerate', label: 'regenerate token', confirm: true },
+    { key: 'c', id: 'copyLink', label: 'copy link', enabledFor: () => Boolean(this.deps.copyToClipboard) },
+    { key: 'r', id: 'newToken', label: 'new device token' },
+    // The one-action serve affordance — offered ONLY when tailscale is detected
+    // and not already serving https; a second 't' press (the standard confirm)
+    // runs tailscale.serve.run. Absence keeps this key unadvertised and inert.
+    {
+      key: 't',
+      id: 'tailscaleServe',
+      label: 'serve over tailscale (https)',
+      confirm: true,
+      enabledFor: () => this.tailscale?.available === true && !this.serving,
+    },
   ];
 
-  onOpen(requestRender: () => void): void { this.requestRender = requestRender; }
+  onOpen(requestRender: () => void): void {
+    this.requestRender = requestRender;
+    // Probe tailscale once on open; the affordance stays quiet until (and unless)
+    // this resolves to an available status. Failures degrade to quiet absence.
+    if (this.deps.probeTailscale && this.tailscale === undefined) {
+      this.deps.probeTailscale()
+        .then((status) => { this.tailscale = status ?? null; this.requestRender(); })
+        .catch(() => { this.tailscale = null; this.requestRender(); });
+    }
+  }
 
   private ensureInfo(): PairingModalConnectionInfo | null {
     if (this.info === undefined) {
@@ -75,71 +141,130 @@ class PairingModalSurface implements ConfigModalSurface {
   buildView(): ConfigModalView {
     const info = this.ensureInfo();
     if (!info) {
-      return { title: 'Companion Pairing', degraded: 'Companion pairing is unavailable — the daemon connection info could not be resolved for this session.', tabs: [{ id: 'pairing', label: 'Pairing', rows: [] }] };
+      return { title: 'Device Pairing', degraded: 'Device pairing is unavailable — the pairing token service could not be resolved for this session.', tabs: [{ id: 'pairing', label: 'Pairing', rows: [] }] };
     }
-    const { url, token, username, password } = info;
+    const { url, token, tokenName, deepLink, offers, posture } = info;
     const displayToken = this.revealed ? token : SECRET_MASK;
-    const displayPassword = password !== undefined ? (this.revealed ? password : SECRET_MASK) : undefined;
+    // The deep link carries the one-time token, so it is masked with the token.
+    const displayLink = this.revealed ? deepLink : SECRET_MASK;
 
     const rows: ConfigModalRow[] = [];
-    rows.push(infoRow('intro', 'Scan with the GoodVibes companion app to pair this session.', { dim: true }));
-    rows.push(infoRow('url', `URL       ${url}`));
+    rows.push(infoRow('intro', 'Scan with the GoodVibes web app to pair this device — it opens already signed in.', { dim: true }));
+    rows.push(infoRow('url', `Web app   ${url}`));
+    rows.push(infoRow('name', `Device    ${tokenName}`));
     rows.push(infoRow('token', `Token     ${displayToken}`, { fg: MODAL_TONES.reasoning }));
-    rows.push(infoRow('username', `Username  ${username}`));
-    if (displayPassword !== undefined) rows.push(infoRow('password', `Password  ${displayPassword}`));
+    rows.push(infoRow('link', `Link      ${displayLink}`, { dim: true }));
     if (this.deps.controlPlaneReadModel) {
       const connected = this.deps.controlPlaneReadModel.getSnapshot().activeClientIds.length;
-      rows.push(infoRow('companions', `Companions connected: ${connected}`, connected > 0 ? { fg: MODAL_TONES.good } : { dim: true }));
+      rows.push(infoRow('companions', `Devices connected: ${connected}`, connected > 0 ? { fg: MODAL_TONES.good } : { dim: true }));
+    }
+
+    // The offer set carried by this pairing — each named with its plain-language
+    // consequence, each declinable in the web app.
+    if (offers.length > 0) {
+      rows.push(infoRow('offers-h', 'Offers (each declinable when you pair):', { dim: true }));
+      formatPairingOffers(offers).forEach((line, i) => rows.push(infoRow(`offer:${i}`, line)));
+    }
+    // The labeled browser-capability list — what the paired device actually gets
+    // over this origin (and, for a gated one, why not). Rendered from the posture,
+    // never hidden behind a dead button.
+    const capabilities = formatPostureCapabilities(posture);
+    if (capabilities.length > 0) {
+      rows.push(infoRow('caps-h', 'This device will get:', { dim: true }));
+      capabilities.forEach((line, i) => rows.push(infoRow(`cap:${i}`, line)));
     }
+    // The ONE honest LAN line — the SDK posture's own notice (LAN_PLAIN_HTTP_NOTICE),
+    // present only for the plain-http-on-LAN posture, never a nag elsewhere.
+    const notice = pairingPostureNotice(posture);
+    if (notice) rows.push(infoRow('posture', notice, { fg: MODAL_TONES.reasoning }));
+    // The tailscale serve affordance — quiet unless tailscale is detected.
+    this.appendTailscaleRows(rows);
 
-    // ASCII QR block — same payload shape as QrPanel.render(); the multi-line
-    // preformatted string is split into one non-selectable row per block row.
-    const payload = encodeConnectionPayload({
-      url, token, username,
-      ...(password !== undefined ? { password } : {}),
-      version: info.version ?? '0.0.0',
-      surface: info.surface ?? 'tui',
-    });
-    const qr = renderQrToString(generateQrMatrix(payload));
+    // ASCII QR of the deep link — a camera scan opens the web app already
+    // carrying the one-time token. No raw JSON blob is ever encoded. The
+    // multi-line preformatted string is split into one non-selectable row per row.
+    const qr = renderQrToString(generateQrMatrix(deepLink));
     qr.split('\n').forEach((line, i) => rows.push(infoRow(`qr:${i}`, line, { fg: MODAL_TONES.qrDark, bg: MODAL_TONES.qrLight })));
 
+    const hints = [this.revealed ? 'v hide token' : 'v reveal token'];
+    if (this.tailscale?.available && !this.serving) hints.push('t serve over tailscale');
     return {
-      title: 'Companion Pairing',
-      tabs: [{ id: 'pairing', label: 'Pairing', rows, hints: [this.revealed ? 'v hide token' : 'v reveal token'] }],
+      title: 'Device Pairing',
+      tabs: [{ id: 'pairing', label: 'Pairing', rows, hints }],
     };
   }
 
+  /**
+   * Append the tailscale section — quiet when tailscale is undetected or
+   * unavailable. When detected, the surface names the one-action serve; once a
+   * serve has produced (or tailscale already reports) an https MagicDNS URL, that
+   * URL and the serve receipt render verbatim so the encrypted path is visible.
+   */
+  private appendTailscaleRows(rows: ConfigModalRow[]): void {
+    const ts = this.tailscale;
+    if (!ts || !ts.available) return; // absence stays quiet
+    const httpsUrl = this.serveReceipt?.url ?? ts.httpsUrl;
+    if (httpsUrl) {
+      rows.push(infoRow('ts-h', 'Encrypted access (Tailscale):', { dim: true }));
+      rows.push(infoRow('ts-url', `  ${httpsUrl}`, { fg: MODAL_TONES.good }));
+    } else {
+      rows.push(infoRow('ts-h', 'Tailscale detected — press t to serve this app over https (MagicDNS).', { fg: MODAL_TONES.reasoning }));
+    }
+    const receipt = this.serveReceipt ?? ts.lastServe;
+    if (receipt) {
+      rows.push(infoRow('ts-receipt', `  ${receipt.ok ? '✓' : '✗'} ${receipt.detail}`, receipt.ok ? { dim: true } : { fg: MODAL_TONES.warn }));
+    } else if (this.serving) {
+      rows.push(infoRow('ts-serving', '  Serving over tailscale…', { dim: true }));
+    }
+  }
+
   onAction(id: string, ctx: ConfigModalActionContext): void {
     const info = this.ensureInfo();
     if (id === 'toggleReveal') { this.revealed = !this.revealed; this.requestRender(); return; }
-    if (id === 'copyToken') {
+    if (id === 'tailscaleServe') { this.runTailscaleServe(ctx); return; }
+    if (id === 'copyLink') {
       if (!this.deps.copyToClipboard || !info) { ctx.print('Clipboard not available.'); return; }
-      this.deps.copyToClipboard(info.token);
-      ctx.print('Token copied to clipboard.');
+      this.deps.copyToClipboard(info.deepLink);
+      ctx.print('Pairing link copied to clipboard.');
       return;
     }
-    if (id === 'regenerate') {
-      const dispatched = ctx.executeCommand?.('qrcode', ['regenerate']);
-      if (!dispatched) {
-        ctx.setStatus('Token rotation is unavailable in this runtime.');
-        return;
-      }
-      ctx.setStatus('Rotating pairing token…');
-      void dispatched
-        .then((ok) => {
-          if (ok === false) { ctx.setStatus('Token rotation did not complete.'); return; }
-          // Re-pull the lazy connection-info thunk: /qrcode regenerate rewrote
-          // the shared token store, so a fresh getConnectionInfo() reflects the
-          // rotated token + QR. ensureInfo caches on first build — clear it.
-          this.info = undefined;
-          this.revealed = false;
-          this.ensureInfo();
-          this.requestRender();
-          ctx.setStatus('Pairing token rotated — new token and QR loaded.');
-        })
-        .catch(() => { ctx.setStatus('Token rotation failed.'); });
+    if (id === 'newToken') {
+      // Each open mints its own named token; "new device token" just re-pulls the
+      // thunk to mint a fresh one + QR in place. Non-destructive: the prior token
+      // stays valid until it is revoked in /settings → security → devices.
+      this.info = undefined;
+      this.revealed = false;
+      this.ensureInfo();
+      this.requestRender();
+      ctx.setStatus('Minted a fresh device token and QR. Revoke old ones in /settings → security → devices.');
+      return;
     }
   }
+
+  /**
+   * Run the one-action tailscale serve (tailscale.serve.run) after the standard
+   * confirm has fired. The resulting https MagicDNS URL and receipt render in
+   * place; a failed run keeps its honest receipt detail rather than a dead row.
+   */
+  private runTailscaleServe(ctx: ConfigModalActionContext): void {
+    if (!this.deps.runTailscaleServe || this.serving) return;
+    this.serving = true;
+    this.requestRender();
+    this.deps.runTailscaleServe()
+      .then((receipt) => {
+        this.serving = false;
+        this.serveReceipt = receipt;
+        if (receipt?.ok && receipt.url) ctx.setStatus(`Serving over tailscale: ${receipt.url}`);
+        else if (receipt) ctx.setStatus(`Tailscale serve did not complete: ${receipt.detail}`);
+        this.requestRender();
+      })
+      .catch((err: unknown) => {
+        this.serving = false;
+        this.serveReceipt = { at: Date.now(), command: 'tailscale serve', ok: false, detail: err instanceof Error ? err.message : String(err) };
+        ctx.setStatus('Tailscale serve failed.');
+        this.requestRender();
+      });
+  }
 }
 
 export function createPairingModalSurface(deps: PairingModalDeps): ConfigModalSurface {
@@ -147,13 +272,18 @@ export function createPairingModalSurface(deps: PairingModalDeps): ConfigModalSu
 }
 
 /**
- * Deterministic golden fixture: a frozen connectionInfo literal (no real
- * token/QR generation call — encodeConnectionPayload/generateQrMatrix are pure
- * functions of this literal) and a frozen control-plane snapshot.
+ * Deterministic golden fixture: a frozen connectionInfo literal (the QR renders
+ * purely from its deepLink via generateQrMatrix) and a frozen control-plane
+ * snapshot.
  */
 export function pairingModalGoldenSurface(): ConfigModalSurface {
   const connectionInfo: PairingModalConnectionInfo = {
-    url: 'http://192.168.1.50:3141', token: 'golden-token-0123456789abcdef', username: 'golden-user', password: 'golden-pass', version: '0.0.0', surface: 'tui',
+    url: 'http://workshop.local:3141',
+    token: 'golden-token-0123456789abcdef',
+    tokenName: 'golden device',
+    deepLink: 'http://workshop.local:3141/#pair=golden-token-0123456789abcdef&offers=notifications~relay~passkey',
+    offers: ['notifications', 'relay', 'passkey'],
+    posture: describeOriginPosture('http://workshop.local:3141'),
   };
   return createPairingModalSurface({
     getConnectionInfo: () => connectionInfo,

package/src/panels/modals/security-modal.ts

@@ -74,6 +74,7 @@ class SecurityModalSurface implements ConfigModalSurface {
   readonly actions = [
     { key: 'f', id: 'preflight', label: 'preflight' },
     { key: 'i', id: 'jumpToIncident', label: 'jump to incident', enabledFor: () => Boolean(this.deps.readModel.getSnapshot().latestIncident) },
+    { key: 'd', id: 'manageDevices', label: 'manage devices' },
     { key: 'r', id: 'refresh', label: 'refresh audit' },
   ];
 
@@ -170,6 +171,11 @@ class SecurityModalSurface implements ConfigModalSurface {
     if (id === 'jumpToIncident' && this.deps.readModel.getSnapshot().latestIncident) {
       void ctx.executeCommand?.('panel', ['open', 'incident']);
       ctx.setStatus('Opened the incident surface (fleet).');
+      return;
+    }
+    if (id === 'manageDevices') {
+      ctx.openModal?.('devices-modal');
+      ctx.setStatus('Opened paired-device management.');
     }
   }
 }