feat(web): Open sign-in window button for remote captcha pension sign-in

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: MotionPeak

web/src/accounts/AccountsView.test.tsx

@@ -1359,3 +1359,24 @@ describe('AccountsView — restores an in-flight sync after remount', () => {
     });
   });
 });
+
+describe('AccountsView — remote sign-in window', () => {
+  it('shows "Open sign-in window" linking to /vnc with the ticket while a run needs it', async () => {
+    const activeRun = {
+      runId: 'run-9', connectionId: 'c-pen-1', status: 'running' as const,
+      message: 'Waiting for you to finish signing in…', accountsCount: 0,
+      transactionsCount: 0, startedAt: '2026-06-24T10:00:00.000Z',
+      needsRemoteSignin: true, vncTicket: 'tkt-123',
+    };
+    const penConn = { ...CONNECTIONS.connections[3]!, lastStatus: 'running', activeRun };
+    installFetchMock({
+      ...FULL,
+      'GET /api/connections': () => ({ connections: [penConn] }),
+      'GET /api/scrape/run-9': () => ({ run: activeRun }),
+    });
+    render(<AccountsView />);
+    const link = await screen.findByRole('link', { name: /open sign-in window/i });
+    expect(link).toHaveAttribute('href', expect.stringContaining('/vnc/vnc_lite.html'));
+    expect(link).toHaveAttribute('href', expect.stringContaining('ticket=tkt-123'));
+  });
+});

web/src/accounts/AccountsView.tsx

@@ -73,8 +73,8 @@ interface RunStatus {
 type SyncState =
   | { kind: 'idle' }
   | { kind: 'starting' }
-  | { kind: 'running'; runId: string; message: string }
-  | { kind: 'needs-otp'; runId: string; message: string }
+  | { kind: 'running'; runId: string; message: string; signin?: { ticket: string } }
+  | { kind: 'needs-otp'; runId: string; message: string; signin?: { ticket: string } }
   | { kind: 'success'; accountsCount: number; transactionsCount: number }
   | { kind: 'error'; message: string };
 
@@ -279,11 +279,12 @@ export function AccountsView() {
   const pollRun = useCallback(async (connectionId: string, runId: string) => {
     try {
       const { run } = await api<{ run: RunStatus }>(`/scrape/${encodeURIComponent(runId)}`);
+      const signin = run.needsRemoteSignin && run.vncTicket ? { ticket: run.vncTicket } : undefined;
       if (run.status === 'running') {
-        setSyncForConnection(connectionId, { kind: 'running', runId, message: run.message });
+        setSyncForConnection(connectionId, { kind: 'running', runId, message: run.message, signin });
         schedule(connectionId, () => void pollRun(connectionId, runId), SCRAPE_POLL_INTERVAL_MS);
       } else if (run.status === 'needs-otp') {
-        setSyncForConnection(connectionId, { kind: 'needs-otp', runId, message: run.message });
+        setSyncForConnection(connectionId, { kind: 'needs-otp', runId, message: run.message, signin });
         // Keep polling — the OTP modal posts the code, then the run goes
         // back to running and eventually success/error.
         schedule(connectionId, () => void pollRun(connectionId, runId), SCRAPE_POLL_INTERVAL_MS);
@@ -382,11 +383,12 @@ export function AccountsView() {
         || ((cur.kind === 'running' || cur.kind === 'needs-otp') && cur.runId === run.runId)
       );
       if (alreadyTracking) continue;
+      const signin = run.needsRemoteSignin && run.vncTicket ? { ticket: run.vncTicket } : undefined;
       setSyncForConnection(
         conn.id,
         run.status === 'needs-otp'
-          ? { kind: 'needs-otp', runId: run.runId, message: run.message }
-          : { kind: 'running', runId: run.runId, message: run.message },
+          ? { kind: 'needs-otp', runId: run.runId, message: run.message, signin }
+          : { kind: 'running', runId: run.runId, message: run.message, signin },
       );
       void pollRun(conn.id, run.runId);
     }
@@ -859,6 +861,16 @@ function ConnectionCard({ connection, company, accounts, callbacks, showHistory
                 {syncing ? 'Syncing…' : 'Sync'}
               </button>
             )}
+            {(syncState.kind === 'running' || syncState.kind === 'needs-otp') && syncState.signin && (
+              <a
+                className="mini primary"
+                href={`/vnc/vnc_lite.html?path=${encodeURIComponent(`vnc/websockify?ticket=${syncState.signin.ticket}`)}&ticket=${encodeURIComponent(syncState.signin.ticket)}&autoconnect=true&resize=remote`}
+                target="_blank"
+                rel="noreferrer"
+              >
+                Open sign-in window
+              </a>
+            )}
             {connection.hasCredentials && showHistory && (
               <span className="conn-history-label">
                 <span className="conn-history-text">History</span>