Trigger a Trigger.dev v4 task from a React frontend and render live run progress with @trigger.dev/react-hooks

Documented steps

1. On the backend mint a scoped trigger token: `import { auth } from "@trigger.dev/sdk"; const triggerToken = await auth.createTriggerPublicToken("my-task");` — pass an array for several tasks, or `{ multipleUse: true }` to allow reuse (https://trigger.dev/docs/realtime/auth).
2. Pass that token to the client, never the secret key.
3. In a `"use client"` component: `import { useTaskTrigger } from "@trigger.dev/react-hooks"; const { submit, handle, error, isLoading } = useTaskTrigger<typeof myTask>("my-task", { accessToken: triggerToken });` and call `submit(payload)` from the handler (https://trigger.dev/docs/realtime/react-hooks/triggering).
4. Render live progress with `const { run, error } = useRealtimeRun(runId, { accessToken: publicAccessToken });` and read `run.status` / `run.metadata` (https://trigger.dev/docs/realtime/react-hooks/subscribe).
5. To watch many runs, use `useRealtimeRunsWithTag(tag)` instead of one subscription per run.
6. For broader read access mint a Public Access Token server-side: `await auth.createPublicToken({ scopes: { read: { tasks: [...], tags: [...] } }, expirationTime: "1hr" })`.
7. Trim payload size with `skipColumns` (e.g. `["payload", "output"]`) on `useRealtimeRun`, and use the `onComplete` callback to react when the run finishes.