Add autobuyer page capture, browser extension, and desktop clicker

Builds the pipeline the autobuyer needs: see the page, find an element,
click it.

extension/ — MV3 Chromium extension. Polls /api/autobuyer/status and,
while on, scrapes the target tab's HTML and posts it back. Also serves
locate requests: focuses the window, scrolls the element into view, and
reports its position. host_permissions is scoped to tradeify plus
localhost so it cannot read other sites — an empty target pattern would
otherwise capture whatever tab happened to be active, including banking
or mail.

app/api/autobuyer/ — status toggle, capture store, and the locate request
queue. CORS is open because the extension's origin changes every time an
unpacked extension is reloaded.

app/autobuyer/page.tsx — ON switch, source view (default) and a rendered
view. The render uses sandbox="allow-scripts" without allow-same-origin:
the page's own JS is needed because sites ship content at opacity:0 and
fade it in, but the frame must not reach the dashboard's same-origin API
routes, which serve firm credentials.

clicker/ — Python CLI. Asks the extension where a selector is, adds the
element rect to the window's screen position and the browser chrome
height to get desktop coordinates, then clicks with a human motion model
(curved path, eased velocity, occasional overshoot, dwell before press).
Raises the browser application first, since macOS consumes a click on an
unfocused window rather than delivering it.

Refuses to click when the element is covered by an overlay, when the
coordinates fall off-screen, or when the browser cannot be confirmed
frontmost.

Verified: API round-trips, capture pruning, locate claim-once semantics,
motion geometry and timing, and focus activation — the last two against
stubs, since pyautogui and pyobjc are not installed here. NOT verified
end to end: Chrome is still running a stale build of the extension, so a
locate request has never completed against a real page and no real click
has been sent.

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

app/api/autobuyer/capture/route.ts

@@ -0,0 +1,80 @@
+import { NextRequest } from 'next/server';
+import { saveCapture, getLatestCapture, clearCaptures } from '@/lib/db';
+import { corsJson, corsPreflight } from '../cors';
+
+/** Guard against a runaway page dumping tens of megabytes into SQLite every poll. */
+const MAX_HTML_BYTES = 8 * 1024 * 1024;
+
+interface CapturePayload {
+    url?: string;
+    title?: string;
+    html?: string;
+    viewport?: unknown;
+    elements?: unknown;
+    capturedAt?: number;
+}
+
+/** Written by the Chromium extension each time it scrapes the target tab. */
+export async function POST(req: NextRequest) {
+    try {
+        const body = await req.json() as CapturePayload;
+
+        if (typeof body.html !== 'string' || typeof body.url !== 'string') {
+            return corsJson({ error: '`url` and `html` are required' }, { status: 400 });
+        }
+        if (body.html.length > MAX_HTML_BYTES) {
+            return corsJson({ error: `HTML exceeds ${MAX_HTML_BYTES} bytes` }, { status: 413 });
+        }
+
+        const capturedAt = typeof body.capturedAt === 'number' ? body.capturedAt : Date.now();
+
+        saveCapture({
+            url: body.url,
+            title: typeof body.title === 'string' ? body.title : '',
+            html: body.html,
+            viewport: JSON.stringify(body.viewport ?? {}),
+            elements: JSON.stringify(body.elements ?? []),
+            captured_at: capturedAt,
+        });
+
+        return corsJson({ ok: true, capturedAt, bytes: body.html.length });
+    } catch (err: any) {
+        return corsJson({ error: err?.message ?? 'Failed to save capture' }, { status: 500 });
+    }
+}
+
+/** Read by the AutoBuyer page. Pass `?since=<capturedAt>` to skip re-sending
+ *  an unchanged capture — the HTML blob is megabytes and the page polls often. */
+export async function GET(req: NextRequest) {
+    const row = getLatestCapture();
+    if (!row) return corsJson({ capture: null });
+
+    const since = Number(req.nextUrl.searchParams.get('since'));
+    if (Number.isFinite(since) && since > 0 && since >= row.captured_at) {
+        return corsJson({ unchanged: true });
+    }
+
+    return corsJson({
+        capture: {
+            url: row.url,
+            title: row.title,
+            html: row.html,
+            viewport: safeParse(row.viewport, {}),
+            elements: safeParse(row.elements, []),
+            capturedAt: row.captured_at,
+        },
+    });
+}
+
+export async function DELETE() {
+    clearCaptures();
+    return corsJson({ ok: true });
+}
+
+export async function OPTIONS() {
+    return corsPreflight();
+}
+
+function safeParse<T>(json: string, fallback: T): T {
+    try { return JSON.parse(json) as T; } catch { return fallback; }
+}

app/api/autobuyer/cors.ts

@@ -0,0 +1,19 @@
+import { NextResponse } from 'next/server';
+
+/** The Chromium extension calls these routes from a background service worker,
+ *  whose Origin is `chrome-extension://<id>`. The id changes every time the
+ *  unpacked extension is reloaded, so we allow any origin — these routes are
+ *  only ever reachable on the LAN behind the port-3000 firewall rule. */
+export const CORS_HEADERS = {
+    'Access-Control-Allow-Origin': '*',
+    'Access-Control-Allow-Methods': 'GET, POST, PATCH, DELETE, OPTIONS',
+    'Access-Control-Allow-Headers': 'Content-Type',
+} as const;
+
+export function corsJson(body: unknown, init?: { status?: number }) {
+    return NextResponse.json(body, { status: init?.status ?? 200, headers: CORS_HEADERS });
+}
+
+export function corsPreflight() {
+    return new NextResponse(null, { status: 204, headers: CORS_HEADERS });
+}

app/api/autobuyer/locate/claim/route.ts

@@ -0,0 +1,21 @@
+import { claimLocateRequest } from '@/lib/db';
+import { corsJson, corsPreflight } from '../../cors';
+
+/** The extension takes the oldest pending request. Claiming marks it in-flight so
+ *  the next poll doesn't run the same click a second time. */
+export async function POST() {
+    const row = claimLocateRequest();
+    if (!row) return corsJson({ request: null });
+    return corsJson({
+        request: {
+            id: row.id,
+            selector: row.selector,
+            index: row.match_index,
+            urlPattern: row.url_pattern,
+        },
+    });
+}
+
+export async function OPTIONS() {
+    return corsPreflight();
+}

app/api/autobuyer/locate/result/route.ts

@@ -0,0 +1,27 @@
+import { NextRequest } from 'next/server';
+import { resolveLocateRequest, getLocateRequest } from '@/lib/db';
+import { corsJson, corsPreflight } from '../../cors';
+
+/** The extension reports back where the element landed, or why it couldn't. */
+export async function POST(req: NextRequest) {
+    try {
+        const body = await req.json() as { id?: unknown; result?: unknown; error?: unknown };
+        const id = Number(body.id);
+        if (!Number.isInteger(id) || id <= 0) {
+            return corsJson({ error: '`id` is required' }, { status: 400 });
+        }
+        if (!getLocateRequest(id)) {
+            return corsJson({ error: 'No such request' }, { status: 404 });
+        }
+
+        const error = typeof body.error === 'string' && body.error ? body.error : null;
+        resolveLocateRequest(id, error ? null : (body.result ?? null), error);
+        return corsJson({ ok: true });
+    } catch (err: any) {
+        return corsJson({ error: err?.message ?? 'Failed to record result' }, { status: 500 });
+    }
+}
+
+export async function OPTIONS() {
+    return corsPreflight();
+}

app/api/autobuyer/locate/route.ts

@@ -0,0 +1,42 @@
+import { NextRequest } from 'next/server';
+import { createLocateRequest, getLocateRequest } from '@/lib/db';
+import { corsJson, corsPreflight } from '../cors';
+
+/** Python enqueues "find this selector and tell me where it is on screen". */
+export async function POST(req: NextRequest) {
+    try {
+        const body = await req.json() as { selector?: unknown; index?: unknown; urlPattern?: unknown };
+        if (typeof body.selector !== 'string' || !body.selector.trim()) {
+            return corsJson({ error: '`selector` is required' }, { status: 400 });
+        }
+        const index = Number.isInteger(body.index) ? Number(body.index) : 0;
+        const urlPattern = typeof body.urlPattern === 'string' ? body.urlPattern : '';
+
+        const row = createLocateRequest(body.selector.trim(), index, urlPattern);
+        return corsJson({ id: row.id, status: row.status });
+    } catch (err: any) {
+        return corsJson({ error: err?.message ?? 'Failed to queue request' }, { status: 500 });
+    }
+}
+
+/** Python polls `?id=` until the extension resolves it. */
+export async function GET(req: NextRequest) {
+    const id = Number(req.nextUrl.searchParams.get('id'));
+    if (!Number.isInteger(id) || id <= 0) {
+        return corsJson({ error: '`id` is required' }, { status: 400 });
+    }
+    const row = getLocateRequest(id);
+    if (!row) return corsJson({ error: 'No such request' }, { status: 404 });
+
+    return corsJson({
+        id: row.id,
+        selector: row.selector,
+        status: row.status,
+        result: row.result ? JSON.parse(row.result) : null,
+        error: row.error,
+    });
+}
+
+export async function OPTIONS() {
+    return corsPreflight();
+}

app/api/autobuyer/status/route.ts

@@ -0,0 +1,31 @@
+import { NextRequest } from 'next/server';
+import { getSetting, setSetting, countPendingLocate } from '@/lib/db';
+import { corsJson, corsPreflight } from '../cors';
+
+/** Polled by the Chromium extension every few seconds, and by the AutoBuyer page.
+ *  `pendingLocate` rides along so the extension learns about queued clicks without
+ *  a second request on every tick. */
+export async function GET() {
+    return corsJson({
+        enabled: getSetting('autobuyer_enabled') === '1',
+        pendingLocate: countPendingLocate(),
+    });
+}
+
+/** Flipped by the ON/OFF button on the AutoBuyer page. */
+export async function PATCH(req: NextRequest) {
+    try {
+        const body = await req.json() as { enabled?: unknown };
+        if (typeof body.enabled !== 'boolean') {
+            return corsJson({ error: '`enabled` must be a boolean' }, { status: 400 });
+        }
+        setSetting('autobuyer_enabled', body.enabled ? '1' : '0');
+        return corsJson({ enabled: body.enabled });
+    } catch (err: any) {
+        return corsJson({ error: err?.message ?? 'Failed to set status' }, { status: 500 });
+    }
+}
+
+export async function OPTIONS() {
+    return corsPreflight();
+}