chore: release v4.5.13 (#4769)

## Summary
4 new features, 12 improvements, 5 bug fixes.

## Improvements
- `trigger.dev deploy` now asks the server whether to build with Depot
or the native build server unless `--native-build`, `--depot-build`, or
`--local-build` is passed, so the native build server can be rolled out
per organization without a CLI change. `--local-bundle` and `--detach`
now require `--native-build`.
([#4803](https://github.com/triggerdotdev/trigger.dev/pull/4803))
- Add an experimental `--local-bundle` deploy flag that runs the install
and bundling steps on your machine and uploads only the build output;
the image is still built remotely. Useful when your project's install
step needs tooling or credentials that only exist locally.
([#4331](https://github.com/triggerdotdev/trigger.dev/pull/4331))
- Send the CLI version header on all API requests so deployments are
attributable to a CLI version
([#4778](https://github.com/triggerdotdev/trigger.dev/pull/4778))
- A message that arrives mid-turn and is not injected into that turn is
now answered as the next turn, instead of being dropped. This is what
the `pendingMessages` docs have always described, and it applies to the
default too: configuring `pendingMessages` without a `shouldInject`
declines every batch, which previously meant every mid-turn message was
lost with no error at either end.
([#4795](https://github.com/triggerdotdev/trigger.dev/pull/4795))
  
  ```ts
  chat.agent({
  id: "my-chat",
  pendingMessages: {
    onReceived: ({ message }) =>
      logger.info("arrived mid-turn", { id: message.id }),
    // Only interrupt once the agent has started calling tools.
    shouldInject: ({ steps }) => steps.length > 0,
  },
  run: async ({ messages, signal }) =>
    streamText({
      model,
      messages,
      abortSignal: signal,
      // Required for injection. Without it nothing injects, and every
      // mid-turn message is answered as the next turn instead.
      ...chat.toStreamTextOptions(),
    }),
  });
  ```
  
A declined message keeps its place in the queue, so it survives a crash
and is answered by whichever run picks the conversation up. An injected
one is consumed at the moment it is injected, so it is never also
answered as a later turn.
- Browser chats now keep the active turn open across page reloads when
older completion records are replayed.
([#4643](https://github.com/triggerdotdev/trigger.dev/pull/4643))
- Add `chat.endAndContinue()` so fully hand-rolled custom chat agents
can hand a conversation off to a fresh run on the latest deployed task
version while preserving unconsumed Session input.
([#4647](https://github.com/triggerdotdev/trigger.dev/pull/4647))
- Custom chat agents now validate and parse client data declared with
`chat.withClientData({ schema })` before passing it to agent code.
([#4646](https://github.com/triggerdotdev/trigger.dev/pull/4646))

## Bug fixes
- Fixes a case where a chat could silently lose a message. If a message
arrived while the agent was between turns and a stop arrived after it,
the cursor the next boot resumed from could point past that message, so
it was never answered and no error was raised. This affected
`chat.agent`, not just custom agents.
([#4644](https://github.com/triggerdotdev/trigger.dev/pull/4644))
  
Fixes a recovered answer being cut off. After a crash the agent replays
the message it had not answered yet, but it was replaying the stop that
arrived after that message too, so the turn answering it was aborted the
moment it began. A stop is now only applied to the turn that was live
when it arrived. That holds however the stop got there: sent after the
last completed turn, or sent to a chat whose most recent turn was
completed by an older version of the SDK.
  
One limitation to know about: the recovered answer is persisted
correctly, but a chat page that stayed open across the crash keeps
showing the partial answer it had already received. Reload the page to
see the full recovered answer.
  
Also fixes a retried send being answered twice. When a send was retried
and its idempotency claim was lost, the agent could consume the same
message a second time.
  
Custom agent loops can now inspect pending chat input without consuming
it, and consume one record at a time, with `chat.messages.hasPending()`
and `chat.messages.next()`. Records carry stable identifiers so a
redelivery is recognisable.
  
  ```ts
  if (await chat.messages.hasPending()) {
  const record = await chat.messages.next({ timeoutInSeconds: 0 });
  if (record) handle(record.payload);
  }
  ```
  
`hasPending()` answers for messages alone, so a message sitting behind a
stop, or behind a record this version of the SDK does not recognise,
still reports as pending and is still delivered. Anything the agent has
no consumer for is discarded rather than left where it would make every
message queued behind it undeliverable. `chat.messages.next()` returning
`undefined` means no message became consumable before the timeout.
  
`chat.writeTurnComplete()`'s `sessionInEventId` is the cursor that is
safe to resume from, not the sequence of the record the turn answered.
It is held back behind any message still waiting to be handled, so a
value below the record you just handled is expected.
- Fixed a chat agent hanging after an interrupted turn: when a run was
killed mid-answer (out of memory, crash, or eviction) and only the one
message it was answering was still outstanding, the new run never
replied to it. That message is now re-answered on the new run.
([#4768](https://github.com/triggerdotdev/trigger.dev/pull/4768))
- Fix chat transport discarding the next turn after stopping generation.
`skipToTurnComplete` is now reset when a new message or action is sent,
so a message sent after `stopGeneration` streams normally instead of
leaving the chat stuck in a streaming state.
([#4744](https://github.com/triggerdotdev/trigger.dev/pull/4744))
- Fixes a message sent while the agent was mid-answer being lost if the
run then crashed. The cursor written at the end of each turn could point
past a message that had arrived during that turn but had not been
answered yet, so the next boot skipped it and no error was raised
anywhere. Such a message is now held until a turn actually takes it.
([#4795](https://github.com/triggerdotdev/trigger.dev/pull/4795))
  
This also removes the in-memory buffer those messages used to sit in, on
both `chat.agent` and `chat.createSession()`, so a message waiting for
its turn is durable rather than only present in the worker that received
it.

## Server changes

These changes affect the self-hosted Docker image and Trigger.dev Cloud:

- Self-hosted instances can now disable the admin dashboard and user
impersonation entirely. See the self-hosting docs for the new setting.
([#4774](https://github.com/triggerdotdev/trigger.dev/pull/4774))
- The dashboard has two new themes, Black and White, plus appearance
options for stronger colors and underlined links.
([#4547](https://github.com/triggerdotdev/trigger.dev/pull/4547))
- Deployment logs no longer jump to the bottom while you are reading
earlier output. Scroll up to pause auto-scroll, and scroll back down or
use the new scroll-to-bottom button in the log header to resume
following.
([#4776](https://github.com/triggerdotdev/trigger.dev/pull/4776))
- Customize the runs list: show, hide, and reorder columns, and add
smart columns that pull a value straight out of a run's payload,
metadata, or output. Your column choices are saved in the page URL, so
you can share a view, bookmark it, or save it straight to your
favorites.
([#4652](https://github.com/triggerdotdev/trigger.dev/pull/4652))
- Stop the browser offering to autofill or save environment variable
values as saved credentials.
([#4777](https://github.com/triggerdotdev/trigger.dev/pull/4777))
- Cut webapp CPU usage by about a quarter on the routes that workers
call most, freeing headroom at the same request rate. Detailed
event-loop blocking traces are no longer recorded by default, because
producing them was itself a large part of that cost.
([#4746](https://github.com/triggerdotdev/trigger.dev/pull/4746))
- When a runs list or runs.list API request spans too much data to
complete, it now returns a clear, actionable error asking you to narrow
the time range, instead of failing with a generic error.
([#4773](https://github.com/triggerdotdev/trigger.dev/pull/4773))
- Improved the performance and reliability of the runs list and the
runs.list API, especially for large projects and filtered views.
([#4763](https://github.com/triggerdotdev/trigger.dev/pull/4763))
- New Vercel connections now get version skew protection turned on
automatically, so each run uses the task version its deployment shipped
with. Automatic atomic deployments are deprecated and no longer offered
when you connect a project, but stay available in your Vercel
integration settings.
([#4741](https://github.com/triggerdotdev/trigger.dev/pull/4741))
- The Staging branch setting now shows an upgrade prompt on plans that
don't include a Staging environment, instead of looking editable and
then silently doing nothing when saved.
([#4784](https://github.com/triggerdotdev/trigger.dev/pull/4784))

<details>
<summary>Raw changeset output</summary>

# Releases
## @trigger.dev/build@4.5.13

### Patch Changes

- Updated dependencies:
  - `@trigger.dev/core@4.5.13`
## trigger.dev@4.5.13

### Patch Changes

- `trigger.dev deploy` now asks the server whether to build with Depot
or the native build server unless `--native-build`, `--depot-build`, or
`--local-build` is passed, so the native build server can be rolled out
per organization without a CLI change. `--local-bundle` and `--detach`
now require `--native-build`.
([#4803](https://github.com/triggerdotdev/trigger.dev/pull/4803))
- Add an experimental `--local-bundle` deploy flag that runs the install
and bundling steps on your machine and uploads only the build output;
the image is still built remotely. Useful when your project's install
step needs tooling or credentials that only exist locally.
([#4331](https://github.com/triggerdotdev/trigger.dev/pull/4331))
- Send the CLI version header on all API requests so deployments are
attributable to a CLI version
([#4778](https://github.com/triggerdotdev/trigger.dev/pull/4778))
- Updated dependencies:
  - `@trigger.dev/core@4.5.13`
  - `@trigger.dev/build@4.5.13`
  - `@trigger.dev/schema-to-json@4.5.13`
## @trigger.dev/core@4.5.13

### Patch Changes

- `trigger.dev deploy` now asks the server whether to build with Depot
or the native build server unless `--native-build`, `--depot-build`, or
`--local-build` is passed, so the native build server can be rolled out
per organization without a CLI change. `--local-bundle` and `--detach`
now require `--native-build`.
([#4803](https://github.com/triggerdotdev/trigger.dev/pull/4803))
- Add an experimental `--local-bundle` deploy flag that runs the install
and bundling steps on your machine and uploads only the build output;
the image is still built remotely. Useful when your project's install
step needs tooling or credentials that only exist locally.
([#4331](https://github.com/triggerdotdev/trigger.dev/pull/4331))
- A message that arrives mid-turn and is not injected into that turn is
now answered as the next turn, instead of being dropped. This is what
the `pendingMessages` docs have always described, and it applies to the
default too: configuring `pendingMessages` without a `shouldInject`
declines every batch, which previously meant every mid-turn message was
lost with no error at either end.
([#4795](https://github.com/triggerdotdev/trigger.dev/pull/4795))

  ```ts
  chat.agent({
    id: "my-chat",
    pendingMessages: {
      onReceived: ({ message }) =>
        logger.info("arrived mid-turn", { id: message.id }),
      // Only interrupt once the agent has started calling tools.
      shouldInject: ({ steps }) => steps.length > 0,
    },
    run: async ({ messages, signal }) =>
      streamText({
        model,
        messages,
        abortSignal: signal,
        // Required for injection. Without it nothing injects, and every
        // mid-turn message is answered as the next turn instead.
        ...chat.toStreamTextOptions(),
      }),
  });
  ```

A declined message keeps its place in the queue, so it survives a crash
and is answered by whichever run picks the conversation up. An injected
one is consumed at the moment it is injected, so it is never also
answered as a later turn.

- Fixes a case where a chat could silently lose a message. If a message
arrived while the agent was between turns and a stop arrived after it,
the cursor the next boot resumed from could point past that message, so
it was never answered and no error was raised. This affected
`chat.agent`, not just custom agents.
([#4644](https://github.com/triggerdotdev/trigger.dev/pull/4644))

Fixes a recovered answer being cut off. After a crash the agent replays
the message it had not answered yet, but it was replaying the stop that
arrived after that message too, so the turn answering it was aborted the
moment it began. A stop is now only applied to the turn that was live
when it arrived. That holds however the stop got there: sent after the
last completed turn, or sent to a chat whose most recent turn was
completed by an older version of the SDK.

One limitation to know about: the recovered answer is persisted
correctly, but a chat page that stayed open across the crash keeps
showing the partial answer it had already received. Reload the page to
see the full recovered answer.

Also fixes a retried send being answered twice. When a send was retried
and its idempotency claim was lost, the agent could consume the same
message a second time.

Custom agent loops can now inspect pending chat input without consuming
it, and consume one record at a time, with `chat.messages.hasPending()`
and `chat.messages.next()`. Records carry stable identifiers so a
redelivery is recognisable.

  ```ts
  if (await chat.messages.hasPending()) {
    const record = await chat.messages.next({ timeoutInSeconds: 0 });
    if (record) handle(record.payload);
  }
  ```

`hasPending()` answers for messages alone, so a message sitting behind a
stop, or behind a record this version of the SDK does not recognise,
still reports as pending and is still delivered. Anything the agent has
no consumer for is discarded rather than left where it would make every
message queued behind it undeliverable. `chat.messages.next()` returning
`undefined` means no message became consumable before the timeout.

`chat.writeTurnComplete()`'s `sessionInEventId` is the cursor that is
safe to resume from, not the sequence of the record the turn answered.
It is held back behind any message still waiting to be handled, so a
value below the record you just handled is expected.
## @trigger.dev/python@4.5.13

### Patch Changes

- Updated dependencies:
  - `@trigger.dev/sdk@4.5.13`
  - `@trigger.dev/core@4.5.13`
  - `@trigger.dev/build@4.5.13`
## @trigger.dev/react-hooks@4.5.13

### Patch Changes

- Updated dependencies:
  - `@trigger.dev/core@4.5.13`
## @trigger.dev/redis-worker@4.5.13

### Patch Changes

- Updated dependencies:
  - `@trigger.dev/core@4.5.13`
## @trigger.dev/rsc@4.5.13

### Patch Changes

- Updated dependencies:
  - `@trigger.dev/core@4.5.13`
## @trigger.dev/schema-to-json@4.5.13

### Patch Changes

- Updated dependencies:
  - `@trigger.dev/core@4.5.13`
## @trigger.dev/sdk@4.5.13

### Patch Changes

- Fixed a chat agent hanging after an interrupted turn: when a run was
killed mid-answer (out of memory, crash, or eviction) and only the one
message it was answering was still outstanding, the new run never
replied to it. That message is now re-answered on the new run.
([#4768](https://github.com/triggerdotdev/trigger.dev/pull/4768))
- Browser chats now keep the active turn open across page reloads when
older completion records are replayed.
([#4643](https://github.com/triggerdotdev/trigger.dev/pull/4643))
- Add `chat.endAndContinue()` so fully hand-rolled custom chat agents
can hand a conversation off to a fresh run on the latest deployed task
version while preserving unconsumed Session input.
([#4647](https://github.com/triggerdotdev/trigger.dev/pull/4647))
- Fix chat transport discarding the next turn after stopping generation.
`skipToTurnComplete` is now reset when a new message or action is sent,
so a message sent after `stopGeneration` streams normally instead of
leaving the chat stuck in a streaming state.
([#4744](https://github.com/triggerdotdev/trigger.dev/pull/4744))
- Custom chat agents now validate and parse client data declared with
`chat.withClientData({ schema })` before passing it to agent code.
([#4646](https://github.com/triggerdotdev/trigger.dev/pull/4646))
- Fixes a message sent while the agent was mid-answer being lost if the
run then crashed. The cursor written at the end of each turn could point
past a message that had arrived during that turn but had not been
answered yet, so the next boot skipped it and no error was raised
anywhere. Such a message is now held until a turn actually takes it.
([#4795](https://github.com/triggerdotdev/trigger.dev/pull/4795))

This also removes the in-memory buffer those messages used to sit in, on
both `chat.agent` and `chat.createSession()`, so a message waiting for
its turn is durable rather than only present in the worker that received
it.

- A message that arrives mid-turn and is not injected into that turn is
now answered as the next turn, instead of being dropped. This is what
the `pendingMessages` docs have always described, and it applies to the
default too: configuring `pendingMessages` without a `shouldInject`
declines every batch, which previously meant every mid-turn message was
lost with no error at either end.
([#4795](https://github.com/triggerdotdev/trigger.dev/pull/4795))

  ```ts
  chat.agent({
    id: "my-chat",
    pendingMessages: {
      onReceived: ({ message }) =>
        logger.info("arrived mid-turn", { id: message.id }),
      // Only interrupt once the agent has started calling tools.
      shouldInject: ({ steps }) => steps.length > 0,
    },
    run: async ({ messages, signal }) =>
      streamText({
        model,
        messages,
        abortSignal: signal,
        // Required for injection. Without it nothing injects, and every
        // mid-turn message is answered as the next turn instead.
        ...chat.toStreamTextOptions(),
      }),
  });
  ```

A declined message keeps its place in the queue, so it survives a crash
and is answered by whichever run picks the conversation up. An injected
one is consumed at the moment it is injected, so it is never also
answered as a later turn.

- Fixes a case where a chat could silently lose a message. If a message
arrived while the agent was between turns and a stop arrived after it,
the cursor the next boot resumed from could point past that message, so
it was never answered and no error was raised. This affected
`chat.agent`, not just custom agents.
([#4644](https://github.com/triggerdotdev/trigger.dev/pull/4644))

Fixes a recovered answer being cut off. After a crash the agent replays
the message it had not answered yet, but it was replaying the stop that
arrived after that message too, so the turn answering it was aborted the
moment it began. A stop is now only applied to the turn that was live
when it arrived. That holds however the stop got there: sent after the
last completed turn, or sent to a chat whose most recent turn was
completed by an older version of the SDK.

One limitation to know about: the recovered answer is persisted
correctly, but a chat page that stayed open across the crash keeps
showing the partial answer it had already received. Reload the page to
see the full recovered answer.

Also fixes a retried send being answered twice. When a send was retried
and its idempotency claim was lost, the agent could consume the same
message a second time.

Custom agent loops can now inspect pending chat input without consuming
it, and consume one record at a time, with `chat.messages.hasPending()`
and `chat.messages.next()`. Records carry stable identifiers so a
redelivery is recognisable.

  ```ts
  if (await chat.messages.hasPending()) {
    const record = await chat.messages.next({ timeoutInSeconds: 0 });
    if (record) handle(record.payload);
  }
  ```

`hasPending()` answers for messages alone, so a message sitting behind a
stop, or behind a record this version of the SDK does not recognise,
still reports as pending and is still delivered. Anything the agent has
no consumer for is discarded rather than left where it would make every
message queued behind it undeliverable. `chat.messages.next()` returning
`undefined` means no message became consumable before the timeout.

`chat.writeTurnComplete()`'s `sessionInEventId` is the cursor that is
safe to resume from, not the sequence of the record the turn answered.
It is held back behind any message still waiting to be handled, so a
value below the record you just handled is expected.

- Updated dependencies:
  - `@trigger.dev/core@4.5.13`

</details>

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.changeset/external-trace-id-per-run.md

@@ -1,5 +0,0 @@
----
-"@trigger.dev/core": patch
----
-
-Unrelated runs are no longer merged into a single trace in your external observability tool when they happen to execute on the same warm worker process.

.changeset/fair-queue-concurrency-slot-leak.md

@@ -1,5 +0,0 @@
----
-"@trigger.dev/redis-worker": patch
----
-
-Fair queue tenants can no longer get permanently stuck behind leaked concurrency slots. Slots are now freed on every path that finishes a message, a failed release no longer causes a message to run twice or lose its retry, and a background sweep frees any slot that does leak, so a tenant's queues recover on their own instead of needing manual cleanup.

.changeset/lucky-pillows-invite.md

@@ -1,5 +0,0 @@
----
-"@trigger.dev/core": patch
----
-
-Task metrics no longer go missing for projects that configure their own `metricExporters` or `metricReaders`, and the flush error that came with it is gone.

.changeset/node-24-project-default.md

@@ -1,5 +0,0 @@
----
-"trigger.dev": patch
----
-
-New projects created with `trigger init` use Node.js 24 by default. Deployments without explicit `runtime` now use their project's configured default runtime.

.changeset/prebuilt-base-images.md

@@ -1,5 +0,0 @@
----
-"trigger.dev": patch
----
-
-Deployment builds now use custom base layer images and no longer install system packages during every build. This improves layer caching resulting in both faster deployments and faster image pulls on the worker cluster side.

.changeset/smooth-schedule-windows.md

@@ -1,6 +0,0 @@
----
-"@trigger.dev/core": patch
-"@trigger.dev/sdk": patch
----
-
-Define stable execution windows on declarative scheduled tasks. Schedule API responses now expose both the nominal CRON time and its assigned time, while the dashboard shows configured windows and upcoming assignments.

.github/VOUCHED.td

@@ -29,4 +29,5 @@ Leafgard
 Rohan170603
 NERLOE
 Jakub-Vacek
-gtremper
+gtremper
+wuweiweiwu

.github/workflows/codeql.yml

@@ -0,0 +1,40 @@
+name: CodeQL
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+
+permissions: {}
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  analyze:
+    name: Analyze (${{ matrix.language }})
+    if: github.repository == 'triggerdotdev/trigger.dev'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      security-events: write # Upload SARIF to GitHub Security tab
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [actions, javascript-typescript]
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
+          persist-credentials: false
+
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@db488ddef3bf6cb639b32c2e9a7c0a7ea8271d28 # v4.37.8
+        with:
+          languages: ${{ matrix.language }}
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@db488ddef3bf6cb639b32c2e9a7c0a7ea8271d28 # v4.37.8
+        with:
+          category: /language:${{ matrix.language }}

.github/workflows/dashboard-agent-deploy.yml

@@ -3,9 +3,19 @@ name: "🤖 Deploy dashboard agent"
 # Deploys the @internal/dashboard-agent chat.agent to its Trigger.dev project
 # with --skip-promotion, so a deploy never becomes "current" on its own. The
 # consuming app cuts over by pinning DASHBOARD_AGENT_VERSION to the new version.
-# Runs a leg per environment (staging + prod), each gated by its own environment;
-# a push to main that touches the agent or its store triggers both. Version
-# numbers are per-environment, so pin each environment to its own leg's version.
+# Runs a leg per environment (staging + prod); a push to main that touches the
+# agent or its store deploys both. Version numbers are per-environment, so pin
+# each environment to its own leg's version.
+#
+# The deploy lands dormant, so it doesn't need a reviewer gate: nothing goes live
+# until DASHBOARD_AGENT_VERSION is flipped. The `environment:` below is kept only
+# to scope the deploy token per environment; its required-reviewers rule is
+# removed in repo settings so pushes deploy unattended. workflow_dispatch takes an
+# optional ref (SHA, branch, or tag) to deploy a specific commit instead of head.
+#
+# The deployed ref must be an ancestor of main, so only reviewed, merged code ever
+# runs with the deploy token (the checked-out build + trigger.config.ts execute
+# with it). A push is always on main; a dispatched ref is checked before deploy.
 
 on:
   push:
@@ -14,6 +24,11 @@ on:
       - "internal-packages/dashboard-agent/**"
       - "internal-packages/dashboard-agent-db/**"
   workflow_dispatch:
+    inputs:
+      ref:
+        description: "Commit SHA, branch, or tag to deploy. Defaults to the ref the workflow runs from."
+        required: false
+        type: string
 
 permissions: {}
 
@@ -27,9 +42,15 @@ jobs:
       max-parallel: 1
       matrix:
         environment: [staging, prod]
-    # Per-environment reviewer gate + source of the scoped deploy PAT.
+    # Kept to scope the deploy token per environment. The required-reviewers rule
+    # on these environments is removed in repo settings, so this no longer gates.
     environment: dashboard-agent-${{ matrix.environment }}
     concurrency:
+      # Queue a superseding deploy behind an in-flight one; do NOT cancel it.
+      # Cancelling the runner wouldn't stop the remote build (it finishes
+      # server-side), and a second concurrent deploy of the same project would
+      # race the indexer. Deploys are short now the gate is gone, so a brief queue
+      # is fine and can't pile up.
       group: dashboard-agent-deploy-${{ matrix.environment }}
       cancel-in-progress: false
     permissions:
@@ -41,8 +62,34 @@ jobs:
       - name: Checkout
         uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
+          # push: the pushed commit. workflow_dispatch: the input ref if given,
+          # otherwise the head of the ref the run was launched from.
+          ref: ${{ github.event.inputs.ref || github.sha }}
+          # Full history so the ancestor-of-main check below can find a merge base.
+          fetch-depth: 0
           persist-credentials: false
 
+      - name: Require the ref to be an ancestor of main
+        # The deploy token runs the checked-out code, so refuse anything that
+        # hasn't landed on main. A push is main's tip (ancestor of itself); this
+        # only ever rejects a dispatched, unmerged ref.
+        #
+        # NOTE: this in-file check only constrains WHICH commit is deployed. It
+        # can't protect the token on its own, because workflow_dispatch runs the
+        # workflow file from the selected ref. The real guard is the deployment
+        # branch policy on the dashboard-agent-* environments (main only), set in
+        # repo settings, which GitHub enforces server-side against GITHUB_REF.
+        run: |
+          set -euo pipefail
+          # An explicit `ref:` checkout doesn't create remote-tracking branches,
+          # so fetch main before comparing against it.
+          git fetch --no-tags --quiet origin +refs/heads/main:refs/remotes/origin/main
+          if ! git merge-base --is-ancestor HEAD origin/main; then
+            echo "::error::Refusing to deploy $(git rev-parse HEAD): not an ancestor of origin/main. Only merged code can be deployed."
+            exit 1
+          fi
+          echo "$(git rev-parse --short HEAD) is an ancestor of origin/main"
+
       - name: Setup pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5.0.0
         with:

.github/workflows/e2e-webapp-auth-full.yml

@@ -99,11 +99,10 @@ jobs:
         run: echo "DockerHub login skipped because secrets are not available."
 
       - name: 🐳 Pre-pull testcontainer images
-        if: ${{ env.DOCKERHUB_USERNAME }}
         run: |
           docker pull postgres:14
           docker pull redis:7.2
-          docker pull testcontainers/ryuk:0.11.0
+          docker pull testcontainers/ryuk:0.14.0
 
       - name: 📥 Download deps
         run: pnpm install --frozen-lockfile

.github/workflows/e2e-webapp.yml

@@ -16,8 +16,15 @@ jobs:
     name: "🧪 E2E Tests: Webapp"
     runs-on: warp-ubuntu-latest-x64-16x
     timeout-minutes: 30
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex: [1, 2]
+        shardTotal: [2]
     env:
       DOCKERHUB_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+      SHARD_INDEX: ${{ matrix.shardIndex }}
+      SHARD_TOTAL: ${{ matrix.shardTotal }}
     steps:
       - name: 🔧 Disable IPv6
         run: |
@@ -57,7 +64,7 @@ jobs:
           version: 10.33.2
 
       - name: ⎔ Setup node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: WarpBuilds/setup-node@bc639b444d583175926b588962199c247d23e8d3 # v6
         with:
           node-version: 24.18.0
           cache: "pnpm"
@@ -73,19 +80,52 @@ jobs:
         if: ${{ !env.DOCKERHUB_USERNAME }}
         run: echo "DockerHub login skipped because secrets are not available."
 
-      - name: 🐳 Pre-pull testcontainer images
-        if: ${{ env.DOCKERHUB_USERNAME }}
+      - name: 📥 Prepare deps and testcontainer images
         run: |
-          echo "Pre-pulling Docker images with authenticated session..."
-          docker pull postgres:14
-          docker pull redis:7.2
-          docker pull testcontainers/ryuk:0.11.0
-          docker pull ghcr.io/s2-streamstore/s2:0.40.0@sha256:b26249e2ede0949755f5af8028185dc2bcfc3aa2db21eb9610543d144eb6ee9d
-          docker pull minio/minio:latest
-          echo "Image pre-pull complete"
+          # Pull images concurrently with dependency installation. Retry each pull because
+          # registry timeouts are a recurring transient CI flake.
+          pull() {
+            for attempt in 1 2 3; do
+              docker pull "$1" && return 0
+              echo "::warning::docker pull $1 failed (attempt ${attempt}/3); retrying in 10s"
+              sleep 10
+            done
+            echo "::error::docker pull $1 failed after 3 attempts"
+            return 1
+          }
 
-      - name: 📥 Download deps
-        run: pnpm install --frozen-lockfile
+          pull_images() {
+            local pids=()
+            local failed=0
+            for image in \
+              postgres:14 \
+              redis:7.2 \
+              testcontainers/ryuk:0.14.0 \
+              ghcr.io/s2-streamstore/s2:0.40.0@sha256:b26249e2ede0949755f5af8028185dc2bcfc3aa2db21eb9610543d144eb6ee9d \
+              minio/minio:latest
+            do
+              pull "$image" &
+              pids+=("$!")
+            done
+            for pid in "${pids[@]}"; do
+              if ! wait "$pid"; then
+                failed=1
+              fi
+            done
+            return "$failed"
+          }
+
+          echo "Installing dependencies and pre-pulling Docker images..."
+          pull_images &
+          pull_pid=$!
+          install_status=0
+          pnpm install --frozen-lockfile || install_status=$?
+          pull_status=0
+          wait "$pull_pid" || pull_status=$?
+          if (( install_status != 0 || pull_status != 0 )); then
+            exit 1
+          fi
+          echo "Dependency install and image pre-pull complete"
 
       - name: 📀 Generate Prisma Client
         run: pnpm run generate
@@ -97,6 +137,6 @@ jobs:
         run: cd apps/webapp && pnpm exec playwright install chromium
 
       - name: 🧪 Run Webapp E2E Tests
-        run: cd apps/webapp && pnpm exec vitest run --config vitest.e2e.config.ts --reporter=default
+        run: cd apps/webapp && pnpm exec vitest run --config vitest.e2e.config.ts --reporter=default --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
         env:
           WEBAPP_TEST_VERBOSE: "1"

.github/workflows/unit-tests-internal.yml

@@ -78,7 +78,6 @@ jobs:
         run: echo "DockerHub login skipped because secrets are not available."
 
       - name: 🐳 Pre-pull testcontainer images
-        if: ${{ env.DOCKERHUB_USERNAME }}
         run: |
           # Retry each pull - DockerHub registry timeouts are a recurring transient CI flake.
           pull() {
@@ -96,7 +95,6 @@ jobs:
           pull clickhouse/clickhouse-server:26.2.19.43-alpine@sha256:c6ad6a7eb2fb5999df3adfb8b69a0c7222c68fa9b8f6b04a088564ebbc959251
           pull redis:7.2
           pull testcontainers/ryuk:0.14.0
-          pull electricsql/electric:1.2.4
           echo "Image pre-pull complete"
 
       - name: 📥 Download deps

.github/workflows/unit-tests-packages.yml

@@ -81,7 +81,6 @@ jobs:
         run: echo "DockerHub login skipped because secrets are not available."
 
       - name: 🐳 Pre-pull testcontainer images
-        if: ${{ env.DOCKERHUB_USERNAME }}
         run: |
           # Retry each pull - DockerHub registry timeouts are a recurring transient CI flake.
           pull() {
@@ -98,7 +97,6 @@ jobs:
           pull clickhouse/clickhouse-server:26.2.19.43-alpine@sha256:c6ad6a7eb2fb5999df3adfb8b69a0c7222c68fa9b8f6b04a088564ebbc959251
           pull redis:7.2
           pull testcontainers/ryuk:0.14.0
-          pull electricsql/electric:1.2.4
           pull otel/opentelemetry-collector-k8s:0.158.0@sha256:c09130a633196a5becee164411473a0932ecf223f94fda6dab5f22798ff9f376
           echo "Image pre-pull complete"
 

.github/workflows/unit-tests-webapp.yml

@@ -14,18 +14,18 @@ on:
 jobs:
   unitTests:
     name: "🧪 Unit Tests: Webapp"
-    # 10 shards on 16x machines: webapp test throughput is limited per-machine (one
-    # docker daemon + disk absorbing all the per-file Postgres/ClickHouse container
-    # spin-up), so many machines beats few big ones - fewer/bigger (3x32) measured
-    # SLOWER than 10x8. The 16x (vs 8x) gives the fork pool the CPU headroom the 8x
-    # runners lacked. Setup overhead per machine is ~1 min on warm runners.
+    # Webapp test throughput is limited per-machine (one docker daemon + disk absorbing
+    # all the per-file Postgres/ClickHouse container spin-up), so many machines beats
+    # few big ones - fewer/bigger (3x32) measured slower than 10x8. The 16x (vs 8x)
+    # gives the fork pool the CPU headroom the 8x runners lacked.
     runs-on: warp-ubuntu-latest-x64-16x
     strategy:
       # one flaky shard shouldn't cancel its siblings - lets us re-run only the failed shard
       fail-fast: false
       matrix:
-        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
-        shardTotal: [12]
+        shardIndex:
+          [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
+        shardTotal: [24]
     env:
       DOCKERHUB_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
       SHARD_INDEX: ${{ matrix.shardIndex }}
@@ -69,7 +69,7 @@ jobs:
           version: 10.33.2
 
       - name: ⎔ Setup node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: WarpBuilds/setup-node@bc639b444d583175926b588962199c247d23e8d3 # v6
         with:
           node-version: 24.18.0
           cache: "pnpm"
@@ -85,10 +85,10 @@ jobs:
         if: ${{ !env.DOCKERHUB_USERNAME }}
         run: echo "DockerHub login skipped because secrets are not available."
 
-      - name: 🐳 Pre-pull testcontainer images
-        if: ${{ env.DOCKERHUB_USERNAME }}
+      - name: 📥 Prepare deps and testcontainer images
         run: |
-          # Retry each pull - DockerHub registry timeouts are a recurring transient CI flake.
+          # Pull images concurrently with dependency installation. Retry each pull because
+          # DockerHub registry timeouts are a recurring transient CI flake.
           pull() {
             for attempt in 1 2 3; do
               docker pull "$1" && return 0
@@ -98,17 +98,41 @@ jobs:
             echo "::error::docker pull $1 failed after 3 attempts"
             return 1
           }
-          echo "Pre-pulling Docker images with authenticated session..."
-          pull postgres:14
-          pull clickhouse/clickhouse-server:26.2.19.43-alpine@sha256:c6ad6a7eb2fb5999df3adfb8b69a0c7222c68fa9b8f6b04a088564ebbc959251
-          pull redis:7.2
-          pull testcontainers/ryuk:0.14.0
-          pull electricsql/electric:1.2.4
-          pull minio/minio:latest
-          echo "Image pre-pull complete"
 
-      - name: 📥 Download deps
-        run: pnpm install --frozen-lockfile
+          pull_images() {
+            local pids=()
+            local failed=0
+            for image in \
+              postgres:14 \
+              postgres:17 \
+              clickhouse/clickhouse-server:26.2.19.43-alpine@sha256:c6ad6a7eb2fb5999df3adfb8b69a0c7222c68fa9b8f6b04a088564ebbc959251 \
+              redis:7.2 \
+              testcontainers/ryuk:0.14.0 \
+              electricsql/electric:1.2.4@sha256:20da3d0b0e74926c5623392db67fd56698b9e374c4aeb6cb5cadeb8fea171c36 \
+              minio/minio:latest
+            do
+              pull "$image" &
+              pids+=("$!")
+            done
+            for pid in "${pids[@]}"; do
+              if ! wait "$pid"; then
+                failed=1
+              fi
+            done
+            return "$failed"
+          }
+
+          echo "Installing dependencies and pre-pulling Docker images..."
+          pull_images &
+          pull_pid=$!
+          install_status=0
+          pnpm install --frozen-lockfile || install_status=$?
+          pull_status=0
+          wait "$pull_pid" || pull_status=$?
+          if (( install_status != 0 || pull_status != 0 )); then
+            exit 1
+          fi
+          echo "Dependency install and image pre-pull complete"
 
       - name: 📀 Generate Prisma Client
         run: pnpm run generate

.gitignore

@@ -87,3 +87,6 @@ ailogger-output.log
 observability-map.json
 
 .claude/worktrees/
+
+# CPU benchmark artifacts (profiles + summaries)
+.bench/

.oxlintrc.json

@@ -3,7 +3,7 @@
   "categories": {
     "correctness": "error"
   },
-  "plugins": ["typescript", "import", "react"],
+  "plugins": ["typescript", "import", "react", "jsx-a11y"],
   "jsPlugins": [
     "./oxlint-plugins/no-thrown-unawaited-redirect.mjs",
     "./oxlint-plugins/runops-residency.mjs",
@@ -34,7 +34,7 @@
     ],
     "no-empty-pattern": "off",
     "no-control-regex": "off",
-    "typescript/no-non-null-asserted-optional-chain": "off",
+    "typescript/no-non-null-asserted-optional-chain": "error",
     "no-unused-expressions": [
       "error",
       {
@@ -45,8 +45,87 @@
     "typescript/consistent-type-imports": "error",
     "import/no-duplicates": "error",
     "import/namespace": "off",
-    "react-hooks/exhaustive-deps": "off",
-    "react-hooks/rules-of-hooks": "off",
+    "react/exhaustive-deps": "error",
+    "react/rules-of-hooks": "off",
+    "guard-for-in": "error",
+    "symbol-description": "error",
+    "no-unneeded-ternary": "error",
+    "prefer-object-has-own": "error",
+    "no-redeclare": "error",
+    "no-multi-assign": "error",
+    "prefer-object-spread": "error",
+    "react/jsx-no-target-blank": "error",
+    "react/jsx-fragments": "error",
+    "react/self-closing-comp": "error",
+    "react/jsx-no-constructed-context-values": "error",
+    "react/no-children-prop": "error",
+    "react/no-danger-with-children": "error",
+    "react/no-direct-mutation-state": "error",
+    "react/no-find-dom-node": "error",
+    "react/no-is-mounted": "error",
+    "react/no-render-return-value": "error",
+    "react/no-string-refs": "error",
+    "react/no-unsafe": "error",
+    "react/no-will-update-set-state": "error",
+    "react/require-render-return": "error",
+    "react/style-prop-object": "error",
+    "react/void-dom-elements-no-children": "error",
+    "react/error-boundaries": "off",
+    "react/globals": "off",
+    "react/immutability": "off",
+    "react/incompatible-library": "off",
+    "react/preserve-manual-memoization": "off",
+    "react/purity": "off",
+    "react/refs": "off",
+    "react/set-state-in-effect": "off",
+    "react/set-state-in-render": "off",
+    "react/static-components": "off",
+    "react/unsupported-syntax": "off",
+    "react/use-memo": "off",
+    "react/void-use-memo": "off",
+    "react/checked-requires-onchange-or-readonly": "error",
+    "react/forward-ref-uses-ref": "error",
+    "react/iframe-missing-sandbox": "error",
+    "react/no-unknown-property": "error",
+    "jsx-a11y/alt-text": "error",
+    "jsx-a11y/aria-role": "error",
+    "jsx-a11y/click-events-have-key-events": "error",
+    "jsx-a11y/control-has-associated-label": [
+      "error",
+      {
+        "depth": 4,
+        "ignoreElements": ["audio", "canvas", "embed", "input", "textarea", "tr", "td", "video"]
+      }
+    ],
+    "jsx-a11y/label-has-associated-control": "error",
+    "jsx-a11y/no-autofocus": "off",
+    "jsx-a11y/no-noninteractive-element-interactions": "error",
+    "jsx-a11y/no-static-element-interactions": "error",
+    "jsx-a11y/prefer-tag-over-role": "off",
+    "jsx-a11y/anchor-ambiguous-text": "error",
+    "jsx-a11y/anchor-has-content": "error",
+    "jsx-a11y/anchor-is-valid": "error",
+    "jsx-a11y/aria-activedescendant-has-tabindex": "error",
+    "jsx-a11y/aria-props": "error",
+    "jsx-a11y/aria-proptypes": "error",
+    "jsx-a11y/aria-unsupported-elements": "error",
+    "jsx-a11y/autocomplete-valid": "error",
+    "jsx-a11y/heading-has-content": "error",
+    "jsx-a11y/html-has-lang": "error",
+    "jsx-a11y/iframe-has-title": "error",
+    "jsx-a11y/img-redundant-alt": "error",
+    "jsx-a11y/media-has-caption": "error",
+    "jsx-a11y/no-access-key": "error",
+    "jsx-a11y/no-aria-hidden-on-focusable": "error",
+    "jsx-a11y/no-distracting-elements": "error",
+    "jsx-a11y/no-redundant-roles": "error",
+    "jsx-a11y/role-has-required-aria-props": "error",
+    "jsx-a11y/role-supports-aria-props": "error",
+    "jsx-a11y/scope": "error",
+    "jsx-a11y/tabindex-no-positive": "error",
+    "no-lone-blocks": "error",
+    "typescript/prefer-function-type": "error",
+    "typescript/prefer-for-of": "error",
     "trigger/no-thrown-unawaited-redirect": "error",
     "trigger-prisma/no-unbounded-list-filter": "error",
     "trigger-prisma/no-unbounded-list-filter-in-args-helper": "error"
@@ -55,10 +134,42 @@
     {
       "files": ["apps/webapp/app/**/*.ts", "apps/webapp/app/**/*.tsx"],
       "rules": {
+        "react/button-has-type": "error",
+        "react/jsx-no-useless-fragment": "error",
+        "react/no-unstable-nested-components": "error",
+        "react/error-boundaries": "error",
+        "react/globals": "error",
+        "react/hooks": "error",
+        "react/immutability": "error",
+        "react/incompatible-library": "error",
+        "react/memo-dependencies": "error",
+        "react/no-deriving-state-in-effects": "error",
+        "react/preserve-manual-memoization": "error",
+        "react/purity": "error",
+        "react/refs": "error",
+        "react/set-state-in-effect": "error",
+        "react/set-state-in-render": "error",
+        "react/static-components": "error",
+        "react/unsupported-syntax": "error",
+        "react/use-memo": "error",
+        "react/void-use-memo": "error",
+        "react/rules-of-hooks": "error",
         "trigger-runops/no-control-plane-run-graph-access": "error",
         "trigger-runops/no-control-plane-in-runops-slot": "error"
       }
     },
+    {
+      "files": ["packages/react-hooks/src/**/*.ts", "packages/react-hooks/src/**/*.tsx"],
+      "rules": {
+        "react/rules-of-hooks": "error"
+      }
+    },
+    {
+      "files": ["**/*.ts", "**/*.tsx"],
+      "rules": {
+        "no-redeclare": "off"
+      }
+    },
     {
       "files": ["apps/webapp/app/**/*.test.ts", "apps/webapp/app/**/*.test.tsx"],
       "rules": {
@@ -72,6 +183,21 @@
         "trigger-prisma/no-unbounded-list-filter": "off",
         "trigger-prisma/no-unbounded-list-filter-in-args-helper": "off"
       }
+    },
+    {
+      "files": ["internal-packages/tsql/**"],
+      "rules": {
+        "prefer-object-has-own": "off"
+      }
+    },
+    {
+      "files": [
+        "apps/webapp/app/components/primitives/charts/Chart.tsx",
+        "apps/webapp/app/components/primitives/Timeline.tsx"
+      ],
+      "rules": {
+        "react/jsx-no-constructed-context-values": "off"
+      }
     }
   ]
 }

.server-changes/ai-tool-call-span-errors.md

@@ -1,6 +0,0 @@
----
-area: webapp
-type: fix
----
-
-Failed AI SDK tool call and embedding spans now show the error message and stack trace in the run inspector, below the tool input.

.server-changes/bound-env-layout-environment-load.md

@@ -1,6 +0,0 @@
----
-area: webapp
-type: improvement
----
-
-Dashboard pages load faster on projects with many preview branches by no longer loading every environment on each page.

.server-changes/ck-wildcard-queue-strand.md

@@ -1,6 +0,0 @@
----
-area: webapp
-type: fix
----
-
-Using `*` as a concurrency key no longer stops a queue from being processed. Triggering a single run with that key could leave the whole queue stalled, including runs using other concurrency keys on it, until something else was triggered on the same queue.

.server-changes/dequeue-worker-version-freshness.md

@@ -1,6 +0,0 @@
----
-area: webapp
-type: fix
----
-
-Fixed a brief window after promoting or rolling back a deployment where newly triggered runs could still execute on the previous version. New runs now pick up the current version immediately.

.server-changes/hide-root-api-key-creation-date.md

@@ -1,6 +0,0 @@
----
-area: webapp
-type: fix
----
-
-Root API keys no longer show an environment creation timestamp as their creation date.

.server-changes/improve-global-log-search.md

@@ -1,6 +0,0 @@
----
-area: webapp
-type: improvement
----
-
-Global log search now supports faster bounded substring matching and clearer time-range expansion.

.server-changes/org-settings-app-version.md

@@ -1,6 +0,0 @@
----
-area: webapp
-type: fix
----
-
-The app version shown on the organization settings page now reports the real version instead of v0.0.0.

.server-changes/paused-environment-stays-paused-after-deploy.md

@@ -1,6 +0,0 @@
----
-area: webapp
-type: fix
----
-
-Fix paused environments starting to run work again after a deploy: a paused environment now stays paused until you resume it.

.server-changes/settings-back-to-app-org.md

@@ -1,6 +0,0 @@
----
-area: webapp
-type: fix
----
-
-The "Back to app" button in organization settings now returns you to that organization instead of your most recently used one.

.server-changes/supervisor-org-placement-overrides.md

@@ -1,6 +0,0 @@
----
-area: supervisor
-type: feature
----
-
-Operators can now route an organization's runs to specific Kubernetes node pools.

.server-changes/transaction-resilience-during-db-interruptions.md

@@ -1,6 +0,0 @@
----
-area: webapp
-type: improvement
----
-
-Triggering tasks is now more resilient to brief, transient service interruptions, so short stalls are less likely to surface as errors.

.server-changes/ttl-runs-no-longer-stuck-after-requeue.md

@@ -1,6 +0,0 @@
----
-area: webapp
-type: fix
----
-
-Runs triggered with a `ttl` could get permanently stuck in the queued state if they started executing and were then requeued after a failure (for example a worker dying mid-run) once the TTL had already elapsed. Requeued runs now dequeue normally: a run's TTL only applies while it is waiting to start for the first time.

apps/webapp/app/assets/icons/AnimatedHourglassIcon.tsx

@@ -1,6 +1,6 @@
 import { useAnimate } from "framer-motion";
 import { HourglassIcon } from "lucide-react";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 
 export function AnimatedHourglassIcon({
   className,
@@ -10,18 +10,21 @@ export function AnimatedHourglassIcon({
   delay?: number;
 }) {
   const [scope, animate] = useAnimate();
+  const initialDelay = useRef(delay);
 
   useEffect(() => {
-    animate(
+    const controls = animate(
       [
         [scope.current, { rotate: 0 }, { duration: 0.7 }],
         [scope.current, { rotate: 180 }, { duration: 0.3 }],
         [scope.current, { rotate: 180 }, { duration: 0.7 }],
         [scope.current, { rotate: 360 }, { duration: 0.3 }],
       ],
-      { repeat: Infinity, delay }
+      { repeat: Infinity, delay: initialDelay.current }
     );
-  }, []);
+
+    return () => controls.stop();
+  }, [animate, scope]);
 
   return <HourglassIcon ref={scope} className={className} />;
 }

apps/webapp/app/assets/icons/CircleFilledIcon.tsx

@@ -0,0 +1,16 @@
+/** Solid circle. Paired with {@link CircleOutlineIcon} by the Black and White
+ *  theme options — the filled disc reads as the opposite of the active theme. */
+export function CircleFilledIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="12" cy="12" r="9" fill="currentColor" />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/CircleOutlineIcon.tsx

@@ -0,0 +1,16 @@
+/** Hollow circle. Paired with {@link CircleFilledIcon} by the Black and White
+ *  theme options, which show the active theme's background through the ring. */
+export function CircleOutlineIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="12" cy="12" r="8" stroke="currentColor" strokeWidth="2" />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/ColumnsIcon.tsx

@@ -0,0 +1,9 @@
+export function ColumnsIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" strokeWidth="2" />
+      <line x1="9" y1="19" x2="9" y2="5" stroke="currentColor" strokeWidth="2" />
+      <line x1="15" y1="19" x2="15" y2="5" stroke="currentColor" strokeWidth="2" />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/EditPencilIcon.tsx

@@ -0,0 +1,22 @@
+/** Pencil over a couple of text lines — editing a value in place. */
+export function EditPencilIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18.7573 3.6275L20.3732 5.24335C21.1542 6.0244 21.1542 7.29073 20.3732 8.07178L9.72032 18.7246C9.57777 18.8671 9.3957 18.9631 9.19759 19.0002L4.03377 19.9669L5.00052 14.8031C5.03765 14.6051 5.1336 14.4229 5.27604 14.2804L15.9289 3.6275C16.71 2.84645 17.9763 2.84645 18.7573 3.6275Z"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <line x1="17.6464" y1="10.3536" x2="13.6464" y2="6.35355" stroke="currentColor" />
+      <path d="M13 21L21 21" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+      <path d="M18 17L21 17" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/MonitorIcon.tsx

@@ -0,0 +1,21 @@
+/** Monitor on a stand — the System theme, which follows the OS appearance. */
+export function MonitorIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M21 13H3M11 17H13L14 21H10L11 17ZM5 17H19C20.1046 17 21 16.1046 21 15V6C21 4.89543 20.1046 4 19 4H5C3.89543 4 3 4.89543 3 6V15C3 16.1046 3.89543 17 5 17Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="square"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/MoonIcon.tsx

@@ -0,0 +1,21 @@
+/** Crescent moon — the dark theme. */
+export function MoonIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M20.9638 12.7674C19.8361 13.5447 18.4693 13.9998 16.9961 13.9998C13.1301 13.9998 9.99609 10.8657 9.99609 6.99975C9.99609 5.52667 10.4511 4.15987 11.2283 3.03223C6.61911 3.42277 3 7.28768 3 11.9979C3 16.9674 7.0286 20.996 11.9981 20.996C16.7084 20.996 20.5734 17.3767 20.9638 12.7674Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/ResetIcon.tsx

@@ -0,0 +1,20 @@
+export function ResetIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M7 3L4 6L7 9"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5 6H13.5C17.0899 6 20 8.91015 20 12.5C20 16.0899 17.0899 19 13.5 19H6"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/SmartColumnIcon.tsx

@@ -0,0 +1,13 @@
+/** Marks a smart column: in the runs table header, the Columns popover, and the dialog preview. */
+export function SmartColumnIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M5.94723 12.4318L12.3011 3.53646C12.9468 2.63242 14.3689 3.24855 14.1511 4.33794L13.1543 9.32131C13.0905 9.64031 13.3346 9.93793 13.6599 9.93793H17.2138C18.0524 9.93793 18.5402 10.8859 18.0527 11.5682L11.6989 20.4636C11.0532 21.3676 9.63107 20.7515 9.84895 19.6621L10.8456 14.6788C10.9095 14.3598 10.6654 14.0621 10.3401 14.0621H6.78622C5.9476 14.0621 5.45978 13.1142 5.94723 12.4318Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/SunIcon.tsx

@@ -0,0 +1,29 @@
+export function SunIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.5355 8.46447C17.4882 10.4171 17.4882 13.5829 15.5355 15.5355C13.5829 17.4882 10.4171 17.4882 8.46447 15.5355C6.51184 13.5829 6.51184 10.4171 8.46447 8.46447C10.4171 6.51184 13.5829 6.51184 15.5355 8.46447Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12 3V1M12 23V21M21 12H23M1 12H3M5.63603 5.63604L4.22182 4.22183M19.7782 19.7782L18.364 18.364M18.364 5.63606L19.7782 4.22184M4.22183 19.7782L5.63605 18.364"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/ToggleSwitchIcon.tsx

@@ -0,0 +1,23 @@
+/** Toggle switch, knob to the left. */
+export function ToggleSwitchIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.5 5H8.5C4.63401 5 1.5 8.13401 1.5 12C1.5 15.866 4.63401 19 8.5 19H15.5C19.366 19 22.5 15.866 22.5 12C22.5 8.13401 19.366 5 15.5 5Z"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <path
+        d="M8.5 15C10.1569 15 11.5 13.6569 11.5 12C11.5 10.3431 10.1569 9 8.5 9C6.84315 9 5.5 10.3431 5.5 12C5.5 13.6569 6.84315 15 8.5 15Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

apps/webapp/app/components/AskAI.tsx

@@ -76,7 +76,7 @@ function useAskAIState() {
       next.delete(ASK_AI_DEEP_LINK_PARAM);
       setSearchParams(next);
     }
-  }, [searchParams, openAskAI]);
+  }, [searchParams, setSearchParams, openAskAI]);
 
   return { isOpen, setIsOpen, initialQuery, openAskAI, closeAskAI };
 }
@@ -273,6 +273,7 @@ function ChatMessages({
   // Reset feedback state when conversation is reset
   useEffect(() => {
     if (conversation.length === 0) {
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setFeedbackGivenForQAs(new Set());
     }
   }, [conversation.length]);
@@ -543,8 +544,12 @@ function ChatInterface({ initialQuery }: { initialQuery?: string }) {
           />
           {isGeneratingAnswer ? (
             <SimpleTooltip
+              asChild
+              tabbable
               button={
-                <span
+                <button
+                  type="button"
+                  aria-label="Stop generating"
                   onClick={() => stopGeneration()}
                   className="group relative z-10 flex size-10 min-w-10 cursor-pointer items-center justify-center"
                 >
@@ -553,7 +558,7 @@ function ChatInterface({ initialQuery }: { initialQuery?: string }) {
                     className="absolute inset-0 animate-spin"
                     hoverEffect
                   />
-                </span>
+                </button>
               }
               content="Stop generating"
             />

apps/webapp/app/components/DevPresence.tsx

@@ -55,6 +55,7 @@ export function DevPresenceProvider({ children, enabled = true }: DevPresencePro
   useEffect(() => {
     // If disabled or no events
     if (!enabled || streamedEvents === null) {
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setIsConnected(undefined);
       return;
     }
@@ -80,7 +81,7 @@ export function DevPresenceProvider({ children, enabled = true }: DevPresencePro
   // Calculate isConnected and memoize the context value
   const contextValue = useMemo(() => {
     return { isConnected };
-  }, [isConnected, enabled]);
+  }, [isConnected]);
 
   return <DevPresenceContext.Provider value={contextValue}>{children}</DevPresenceContext.Provider>;
 }
@@ -113,6 +114,7 @@ export function useCrossEngineIsConnected({
 
   useEffect(() => {
     if (project.engine === "V2") {
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setCrossEngineIsConnected(isConnected);
       return;
     }

apps/webapp/app/components/ErrorDisplay.tsx

@@ -34,22 +34,16 @@ export function RouteErrorDisplay(options?: ErrorDisplayOptions) {
     );
   }
 
-  return (
-    <>
-      {isRouteErrorResponse(error) ? (
-        <ErrorDisplay
-          title={friendlyErrorDisplay(error.status, error.statusText).title}
-          message={
-            error.data.message ?? friendlyErrorDisplay(error.status, error.statusText).message
-          }
-          {...options}
-        />
-      ) : error instanceof Error ? (
-        <ErrorDisplay title={error.name} message={error.message} {...options} />
-      ) : (
-        <ErrorDisplay title="Oops" message={JSON.stringify(error)} {...options} />
-      )}
-    </>
+  return isRouteErrorResponse(error) ? (
+    <ErrorDisplay
+      title={friendlyErrorDisplay(error.status, error.statusText).title}
+      message={error.data.message ?? friendlyErrorDisplay(error.status, error.statusText).message}
+      {...options}
+    />
+  ) : error instanceof Error ? (
+    <ErrorDisplay title={error.name} message={error.message} {...options} />
+  ) : (
+    <ErrorDisplay title="Oops" message={JSON.stringify(error)} {...options} />
   );
 }
 

apps/webapp/app/components/Feedback.tsx

@@ -70,12 +70,13 @@ export function Feedback({
     ) {
       setOpen(false);
     }
-  }, [navigation.formAction, navigation.state, form.allErrors]);
+  }, [navigation.formAction, navigation.state, form.allErrors, setOpen]);
 
   // Handle URL param functionality
   useEffect(() => {
     const open = searchParams.get("feedbackPanel");
     if (open) {
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setType(open as FeedbackType);
       setOpen(true);
       // Clone instead of mutating in place
@@ -83,7 +84,7 @@ export function Feedback({
       next.delete("feedbackPanel");
       setSearchParams(next);
     }
-  }, [searchParams]);
+  }, [searchParams, setOpen, setSearchParams]);
 
   // Reset the topic to the default once the dialog closes, so reopening always starts fresh. The
   // dialog is now persistently mounted (hosted outside the popover), so without this it would keep

apps/webapp/app/components/LoginPageLayout.tsx

@@ -47,6 +47,7 @@ export function LoginPageLayout({
   const [randomQuote, setRandomQuote] = useState<QuoteType | null>(null);
   useEffect(() => {
     const randomIndex = Math.floor(Math.random() * quotes.length);
+    // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
     setRandomQuote(quotes[randomIndex]);
   }, []);
 

apps/webapp/app/components/SetupCommands.tsx

@@ -1,5 +1,5 @@
 import { CheckIcon, SparklesIcon } from "@heroicons/react/20/solid";
-import { createContext, useContext, useRef, useState } from "react";
+import { createContext, useContext, useMemo, useRef, useState } from "react";
 import { useAppOrigin } from "~/hooks/useAppOrigin";
 import { useProject } from "~/hooks/useProject";
 import { useTriggerCliTag } from "~/hooks/useTriggerCliTag";
@@ -24,10 +24,13 @@ const PackageManagerContext = createContext<PackageManagerContextType | undefine
 export function PackageManagerProvider({ children }: { children: React.ReactNode }) {
   const [activePackageManager, setActivePackageManager] = useState("npm");
 
+  const contextValue = useMemo(
+    () => ({ activePackageManager, setActivePackageManager }),
+    [activePackageManager]
+  );
+
   return (
-    <PackageManagerContext.Provider value={{ activePackageManager, setActivePackageManager }}>
-      {children}
-    </PackageManagerContext.Provider>
+    <PackageManagerContext.Provider value={contextValue}>{children}</PackageManagerContext.Provider>
   );
 }
 
@@ -54,7 +57,7 @@ function useApiUrl() {
   }
 }
 
-function getApiUrlArg() {
+function useApiUrlArg() {
   const apiUrl = useApiUrl();
   return apiUrl ? `-a ${apiUrl}` : undefined;
 }
@@ -67,7 +70,7 @@ type TabsProps = {
 export function InitCommandV3({ title }: TabsProps) {
   const project = useProject();
   const projectRef = project.externalRef;
-  const apiUrlArg = getApiUrlArg();
+  const apiUrlArg = useApiUrlArg();
   const triggerCliTag = useTriggerCliTag();
 
   const initCommandParts = [`trigger.dev@${triggerCliTag}`, "init", `-p ${projectRef}`, apiUrlArg];

apps/webapp/app/components/Shortcuts.tsx

@@ -6,6 +6,7 @@ import { ASK_AI_SHORTCUT, askAiCanOpen } from "~/components/dashboard-agent/ask-
 import { useDashboardAgentAvailable } from "~/components/dashboard-agent/dashboardAgentOpenRequest";
 import { NEW_CHAT_SHORTCUT } from "~/components/dashboard-agent/DashboardAgentHeader";
 import { TOGGLE_PANEL_SHORTCUT } from "~/components/dashboard-agent/dashboardAgentLauncher";
+import { COLUMNS_SHORTCUT } from "~/components/runs/v3/RunsDisplayOptions";
 import { useAskAiAvailability } from "~/hooks/useAskAiAvailability";
 import { useShortcutKeys } from "~/hooks/useShortcutKeys";
 import { Header3 } from "./primitives/Headers";
@@ -142,6 +143,9 @@ function ShortcutContent() {
           )}
           <div className="space-y-3">
             <Header3>Runs page</Header3>
+            <Shortcut name="Customize columns">
+              <ShortcutKey shortcut={COLUMNS_SHORTCUT} variant="medium/bright" />
+            </Shortcut>
             <Shortcut name="Bulk action: Cancel runs">
               <ShortcutKey shortcut={{ key: "c" }} variant="medium/bright" />
             </Shortcut>

apps/webapp/app/components/TriggerRotatingLogo.tsx

@@ -25,6 +25,7 @@ export function TriggerRotatingLogo() {
   useEffect(() => {
     // Already registered from a previous render
     if (customElements.get("spline-viewer")) {
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setIsSplineReady(true);
       return;
     }

apps/webapp/app/components/admin/FeatureFlagsDialog.tsx

@@ -1,5 +1,5 @@
 import { useFetcher } from "@remix-run/react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import stableStringify from "json-stable-stringify";
 import {
   Dialog,
@@ -54,6 +54,10 @@ export function FeatureFlagsDialog({
 }: FeatureFlagsDialogProps) {
   const loadFetcher = useFetcher<LoaderData>();
   const saveFetcher = useFetcher<ActionData>();
+  const loadFeatureFlags = loadFetcher.load;
+  const onOpenChangeRef = useRef(onOpenChange);
+  // oxlint-disable-next-line react/refs -- This ref intentionally coordinates an imperative integration outside React state.
+  onOpenChangeRef.current = onOpenChange;
 
   const [overrides, setOverrides] = useState<Record<string, unknown>>({});
   const [initialOverrides, setInitialOverrides] = useState<Record<string, unknown>>({});
@@ -64,16 +68,18 @@ export function FeatureFlagsDialog({
 
   useEffect(() => {
     if (open && orgId) {
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setSaveError(null);
       setOverrides({});
       setInitialOverrides({});
-      loadFetcher.load(`/admin/api/v2/orgs/${orgId}/feature-flags`);
+      loadFeatureFlags(`/admin/api/v2/orgs/${orgId}/feature-flags`);
     }
-  }, [open, orgId]);
+  }, [loadFeatureFlags, open, orgId]);
 
   useEffect(() => {
     if (loadFetcher.data) {
       const loaded = loadFetcher.data.orgFlags ?? {};
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setOverrides({ ...loaded });
       setInitialOverrides({ ...loaded });
     }
@@ -81,8 +87,9 @@ export function FeatureFlagsDialog({
 
   useEffect(() => {
     if (saveFetcher.data?.success) {
-      onOpenChange(false);
+      onOpenChangeRef.current(false);
     } else if (saveFetcher.data?.error) {
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setSaveError(saveFetcher.data.error);
     }
   }, [saveFetcher.data]);

apps/webapp/app/components/admin/backOffice/MaxProjectsSection.tsx

@@ -34,10 +34,12 @@ export function MaxProjectsSection({
   const [value, setValue] = useState(String(maximumProjectCount));
 
   useEffect(() => {
+    // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
     if (hasFieldErrors) setIsEditing(true);
   }, [hasFieldErrors]);
 
   useEffect(() => {
+    // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
     if (savedJustNow && !hasFieldErrors) setIsEditing(false);
   }, [savedJustNow, hasFieldErrors]);
 

apps/webapp/app/components/admin/backOffice/RateLimitSection.tsx

@@ -65,10 +65,12 @@ export function RateLimitSection({
   const [maxTokens, setMaxTokens] = useState(current ? String(current.maxTokens) : "");
 
   useEffect(() => {
+    // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
     if (hasFieldErrors) setIsEditing(true);
   }, [hasFieldErrors]);
 
   useEffect(() => {
+    // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
     if (savedJustNow && !hasFieldErrors) setIsEditing(false);
   }, [savedJustNow, hasFieldErrors]);
 

apps/webapp/app/components/admin/debugRun.tsx

@@ -45,10 +45,11 @@ function DebugRunDialog({ friendlyId }: { friendlyId: string }) {
 function DebugRunContent({ friendlyId }: { friendlyId: string }) {
   const fetcher = useTypedFetcher<typeof loader>();
   const isLoading = fetcher.state === "loading";
+  const load = fetcher.load;
 
   useEffect(() => {
-    fetcher.load(`/resources/taskruns/${friendlyId}/debug`);
-  }, [friendlyId]);
+    load(`/resources/taskruns/${friendlyId}/debug`);
+  }, [friendlyId, load]);
 
   return (
     <>

apps/webapp/app/components/admin/flagChangeList.ts

@@ -0,0 +1,56 @@
+import { derivedFlagsClearedWith } from "~/v3/featureFlags";
+
+export type FlagChange =
+  | { key: string; type: "added"; newVal: string }
+  | { key: string; type: "removed"; oldVal: string }
+  | { key: string; type: "changed"; oldVal: string; newVal: string };
+
+/**
+ * What a global flag save will do, for the confirm dialog.
+ *
+ * A graced primary that is unset also clears its stamps. Those keys are locked, so the caller
+ * filters them out of `initialValues` — the cascade therefore reads `storedValues`, which is the
+ * unfiltered set the loader returned. Reading `initialValues` finds nothing and understates the
+ * deletion, which is the defect this parameter exists to prevent.
+ */
+export function buildFlagChangeList(params: {
+  editableKeys: readonly string[];
+  lockedKeys: readonly string[];
+  initialValues: Record<string, unknown>;
+  storedValues: Record<string, unknown>;
+  newValues: Record<string, unknown>;
+}): FlagChange[] {
+  const { editableKeys, initialValues, storedValues, newValues } = params;
+
+  return editableKeys.flatMap<FlagChange>((key) => {
+    const wasSet = key in initialValues;
+    const isSet = key in newValues;
+    const oldVal = initialValues[key];
+    const newVal = newValues[key];
+
+    if (!wasSet && !isSet) return [];
+    if (wasSet && isSet && stableValue(oldVal) === stableValue(newVal)) return [];
+
+    if (!wasSet && isSet) {
+      return [{ key, type: "added", newVal: String(newVal) }];
+    }
+
+    if (wasSet && !isSet) {
+      // Only an unset clears the stamps. A change re-stamps instead.
+      const cascaded = derivedFlagsClearedWith(key)
+        .filter((derived) => derived in storedValues)
+        .map<FlagChange>((derived) => ({
+          key: derived,
+          type: "removed",
+          oldVal: String(storedValues[derived]),
+        }));
+      return [{ key, type: "removed", oldVal: String(oldVal) }, ...cascaded];
+    }
+
+    return [{ key, type: "changed", oldVal: String(oldVal), newVal: String(newVal) }];
+  });
+}
+
+function stableValue(value: unknown): string {
+  return JSON.stringify(value ?? null);
+}

apps/webapp/app/components/billing/BillingAlertsSection.tsx

@@ -119,6 +119,7 @@ export function BillingAlertsSection({
       return;
     }
 
+    // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
     setShowResetBanner(true);
 
     if (searchParams.get("alertsReset") !== "1") {
@@ -140,14 +141,18 @@ export function BillingAlertsSection({
   );
   const maxAlerts = isPercentageMode ? MAX_PERCENTAGE_ALERTS : MAX_ABSOLUTE_ALERTS;
 
+  /* oxlint-disable react/preserve-manual-memoization -- Stable derived thresholds prevent the synchronization effect from resetting local edits. */
   const savedThresholds = useMemo(
     () => storedAlertsToThresholds(alerts, billingLimitMode, effectiveLimitCents, planLimitCents),
     [alerts, billingLimitMode, effectiveLimitCents, planLimitCents]
   );
+  /* oxlint-enable react/preserve-manual-memoization */
   const savedEmails = useMemo(() => alerts.emails, [alerts.emails]);
-  const hasLegacySpikes = useMemo(
-    () => hasLegacySpikeAlertLevels(alerts, billingLimitMode, effectiveLimitCents, planLimitCents),
-    [alerts, billingLimitMode, effectiveLimitCents, planLimitCents]
+  const hasLegacySpikes = hasLegacySpikeAlertLevels(
+    alerts,
+    billingLimitMode,
+    effectiveLimitCents,
+    planLimitCents
   );
 
   const nextThresholdIdRef = useRef(savedThresholds.length);
@@ -185,6 +190,7 @@ export function BillingAlertsSection({
 
   useEffect(() => {
     nextThresholdIdRef.current = savedThresholds.length;
+    // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
     setThresholdRows(toThresholdRows(savedThresholds));
     setEmailValues(savedEmails.length > 0 ? [...savedEmails, ""] : [""]);
   }, [savedThresholds, savedEmails]);

apps/webapp/app/components/billing/BillingLimitConfigSection.tsx

@@ -20,6 +20,7 @@ import { Paragraph } from "~/components/primitives/Paragraph";
 import { RadioGroup, RadioGroupItem } from "~/components/primitives/RadioButton";
 import type { BillingLimitResult } from "~/services/billingLimit.schemas";
 import { formatCurrency } from "~/utils/numberFormatter";
+import { TextLink } from "~/components/primitives/TextLink";
 
 export const billingLimitFormSchema = z.discriminatedUnion("mode", [
   z.object({
@@ -126,6 +127,7 @@ export function BillingLimitConfigSection({
   const formRef = useRef<HTMLFormElement>(null);
 
   useEffect(() => {
+    // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
     setMode(resetMode);
     setCustomAmount(savedCustomAmount);
     setCancelInProgressRuns(savedCancelInProgressRuns);
@@ -338,10 +340,7 @@ function LimitReachedCalloutContent({
       When this limit is reached, queued runs will be held for {gracePeriodLabel}, then new triggers
       will be rejected until you increase or remove the limit. Limits are enforced with a short
       delay, so spend may briefly exceed the limit before grace begins. See our{" "}
-      <a href="https://trigger.dev/terms" className="underline">
-        terms
-      </a>{" "}
-      for refund policy details.
+      <TextLink href="https://trigger.dev/terms">terms</TextLink> for refund policy details.
       {cancelInProgressRuns ? (
         <> In-progress runs will be cancelled when the limit is hit.</>
       ) : null}

apps/webapp/app/components/billing/BillingLimitRecoveryPanel.tsx

@@ -63,6 +63,7 @@ export function BillingLimitRecoveryPanel({
   const formRef = useRef<HTMLFormElement>(null);
 
   useEffect(() => {
+    // oxlint-disable-next-line react/set-state-in-effect, react/no-deriving-state-in-effects -- A refreshed server recommendation intentionally resets this editable amount draft.
     setNewAmount(String(suggestedNewLimitDollars));
   }, [suggestedNewLimitDollars]);
 

apps/webapp/app/components/billing/FreePlanUsage.tsx

@@ -1,6 +1,7 @@
 import { ArrowUpCircleIcon } from "@heroicons/react/24/outline";
 import { Link } from "@remix-run/react";
 import { motion, useMotionValue, useTransform } from "framer-motion";
+import { textLinkClassName } from "~/components/primitives/TextLink";
 import { useThemeColor } from "~/hooks/useThemeColor";
 import { cn } from "~/utils/cn";
 
@@ -31,7 +32,7 @@ export function FreePlanUsage({ to, percentage }: { to: string; percentage: numb
           <ArrowUpCircleIcon className="h-5 w-5 shrink-0 text-text-dimmed" />
           <span className="truncate text-2sm text-text-bright">Free Plan</span>
         </div>
-        <Link to={to} className="shrink-0 text-2sm text-text-link focus-custom">
+        <Link to={to} className={cn(textLinkClassName(), "shrink-0 text-2sm")}>
           Upgrade
         </Link>
       </div>

apps/webapp/app/components/billing/UsageBar.tsx

@@ -106,7 +106,7 @@ type LegendProps = {
 
 function Legend({ text, value, position, percentage, tooltipContent }: LegendProps) {
   const flipLegendPositionValue = 80;
-  const flipLegendPosition = percentage > flipLegendPositionValue ? true : false;
+  const flipLegendPosition = percentage > flipLegendPositionValue;
   return (
     <div
       className={cn(

apps/webapp/app/components/code/AIQueryInput.tsx

@@ -61,10 +61,44 @@ export function AIQueryInput({
   // If mode is edit but there's no current query, switch to new
   useEffect(() => {
     if (mode === "edit" && !canEdit) {
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setMode("new");
     }
   }, [mode, canEdit]);
 
+  const processStreamEvent = useCallback(
+    (event: StreamEventType) => {
+      switch (event.type) {
+        case "thinking":
+          setThinking((prev) => prev + event.content);
+          break;
+        case "tool_call":
+          // Tool calls are handled silently — no UI text needed
+          break;
+        case "time_filter":
+          // Apply time filter immediately when the AI sets it
+          onTimeFilterChange?.(event.filter);
+          break;
+        case "result":
+          if (event.success) {
+            // Apply time filter if included in result (backup in case time_filter event was missed)
+            if (event.timeFilter) {
+              onTimeFilterChange?.(event.timeFilter);
+            }
+            onQueryGenerated(event.query);
+            setPrompt("");
+            setLastResult("success");
+            // Keep thinking visible to show what happened
+          } else {
+            setError(event.error);
+            setLastResult("error");
+          }
+          break;
+      }
+    },
+    [onQueryGenerated, onTimeFilterChange]
+  );
+
   const submitQuery = useCallback(
     async (queryPrompt: string, submitMode: AIQueryMode = mode) => {
       if (!queryPrompt.trim() || isLoading) return;
@@ -158,40 +192,7 @@ export function AIQueryInput({
         setIsLoading(false);
       }
     },
-    [isLoading, resourcePath, mode, getCurrentQuery]
-  );
-
-  const processStreamEvent = useCallback(
-    (event: StreamEventType) => {
-      switch (event.type) {
-        case "thinking":
-          setThinking((prev) => prev + event.content);
-          break;
-        case "tool_call":
-          // Tool calls are handled silently — no UI text needed
-          break;
-        case "time_filter":
-          // Apply time filter immediately when the AI sets it
-          onTimeFilterChange?.(event.filter);
-          break;
-        case "result":
-          if (event.success) {
-            // Apply time filter if included in result (backup in case time_filter event was missed)
-            if (event.timeFilter) {
-              onTimeFilterChange?.(event.timeFilter);
-            }
-            onQueryGenerated(event.query);
-            setPrompt("");
-            setLastResult("success");
-            // Keep thinking visible to show what happened
-          } else {
-            setError(event.error);
-            setLastResult("error");
-          }
-          break;
-      }
-    },
-    [onQueryGenerated, onTimeFilterChange]
+    [getCurrentQuery, isLoading, mode, processStreamEvent, resourcePath]
   );
 
   const handleSubmit = useCallback(

apps/webapp/app/components/code/ChartConfigPanel.tsx

@@ -568,6 +568,7 @@ function SeriesColorPicker({
       <PopoverTrigger asChild>
         <button
           type="button"
+          aria-label="Change series color"
           className="shrink-0 rounded p-0.5 hover:bg-background-raised"
           title="Change series color"
         >

apps/webapp/app/components/code/CodeBlock.tsx

@@ -221,35 +221,35 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
     const [modalCopied, setModalCopied] = useState(false);
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [isWrapped, setIsWrapped] = useState(wrap);
+    const normalizedCode = code?.trim() ?? "";
 
     const onCopied = useCallback(
       (event: React.MouseEvent<HTMLButtonElement>) => {
         event.preventDefault();
         event.stopPropagation();
-        navigator.clipboard.writeText(code);
+        navigator.clipboard.writeText(normalizedCode);
         setCopied(true);
         setTimeout(() => {
           setCopied(false);
         }, 1500);
       },
-      [code]
+      [normalizedCode]
     );
 
     const onModalCopied = useCallback(
       (event: React.MouseEvent<HTMLButtonElement>) => {
         event.preventDefault();
         event.stopPropagation();
-        navigator.clipboard.writeText(code);
+        navigator.clipboard.writeText(normalizedCode);
         setModalCopied(true);
         setTimeout(() => {
           setModalCopied(false);
         }, 1500);
       },
-      [code]
+      [normalizedCode]
     );
 
-    code = code?.trim() ?? "";
-    const lineCount = code.split("\n").length;
+    const lineCount = normalizedCode.split("\n").length;
     const maxLineWidth = lineCount.toString().length;
     let maxHeight: string | undefined = undefined;
     if (maxLines && lineCount > maxLines) {
@@ -345,7 +345,7 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
           {shouldHighlight ? (
             <HighlightCode
               theme={theme}
-              code={code}
+              code={normalizedCode}
               language={language}
               showLineNumbers={showLineNumbers}
               highlightLines={highlightLines}
@@ -373,7 +373,7 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
                 )}
                 dir="ltr"
               >
-                {highlightSearchText(code, searchTerm)}
+                {highlightSearchText(normalizedCode, searchTerm)}
               </pre>
             </div>
           )}
@@ -400,7 +400,7 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
             {shouldHighlight ? (
               <HighlightCode
                 theme={theme}
-                code={code}
+                code={normalizedCode}
                 language={language}
                 showLineNumbers={showLineNumbers}
                 highlightLines={highlightLines}
@@ -415,7 +415,7 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
                 className="overflow-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
               >
                 <pre className="relative mr-2 p-2 font-mono text-base leading-relaxed" dir="ltr">
-                  {highlightSearchText(code, searchTerm)}
+                  {highlightSearchText(normalizedCode, searchTerm)}
                 </pre>
               </div>
             )}
@@ -439,7 +439,7 @@ function Chrome({ title }: { title?: string }) {
       <div className="flex items-center justify-center">
         <div className={cn("rounded-sm px-3 py-0.5 text-xs text-text-faint")}>{title}</div>
       </div>
-      <div></div>
+      <div />
     </div>
   );
 }

apps/webapp/app/components/code/JSONEditor.tsx

@@ -94,6 +94,7 @@ export function JSONEditor(opts: JSONEditorProps) {
   const editor = useRef<HTMLDivElement>(null);
   const settings: Omit<UseCodeMirror, "onBlur"> = {
     ...opts,
+    // oxlint-disable-next-line react/refs -- This ref intentionally coordinates an imperative integration outside React state.
     container: editor.current,
     extensions,
     editable: !readOnly,

apps/webapp/app/components/code/TSQLEditor.tsx

@@ -196,6 +196,7 @@ export function TSQLEditor(opts: TSQLEditorProps) {
 
   const settings: Omit<UseCodeMirror, "onBlur"> = {
     ...opts,
+    // oxlint-disable-next-line react/refs -- This ref intentionally coordinates an imperative integration outside React state.
     container: editor.current,
     extensions,
     editable: !readOnly,
@@ -264,6 +265,7 @@ export function TSQLEditor(opts: TSQLEditorProps) {
 
   const showButtons = showClearButton || showCopyButton || showFormatButton || additionalActions;
 
+  /* oxlint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- The CodeMirror mount forwards pointer focus to CodeMirror's own keyboard-accessible editor. */
   return (
     <div
       className={cn("relative flex h-full flex-col", opts.className)}
@@ -337,6 +339,7 @@ export function TSQLEditor(opts: TSQLEditorProps) {
     </div>
   );
 }
+/* oxlint-enable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
 
 // SQL keywords that legitimately appear before parentheses with a space
 const SQL_KEYWORDS_BEFORE_PAREN = new Set([

apps/webapp/app/components/code/TSQLResultsTable.tsx

@@ -14,6 +14,7 @@ import {
   type ColumnFiltersState,
   type ColumnResizeMode,
   type FilterFn,
+  type Header,
   type SortDirection,
   type SortingState,
 } from "@tanstack/react-table";
@@ -223,6 +224,7 @@ const DebouncedInput = forwardRef<
   const [value, setValue] = useState(initialValue);
 
   useEffect(() => {
+    // oxlint-disable-next-line react/set-state-in-effect, react/no-deriving-state-in-effects -- Programmatic filter changes intentionally reset the debounced input draft.
     setValue(initialValue);
   }, [initialValue]);
 
@@ -241,6 +243,7 @@ const DebouncedInput = forwardRef<
 interface ColumnMeta {
   outputColumn: OutputColumnMetadata;
   alignment: "left" | "right";
+  prettyFormatting: boolean;
 }
 
 /**
@@ -489,6 +492,19 @@ function CellValueWrapper({
 /**
  * Render a cell value based on its type and optional customRenderType
  */
+function TSQLResultsCell(info: CellContext<RowData, unknown>) {
+  const meta = info.column.columnDef.meta as ColumnMeta;
+
+  return (
+    <CellValueWrapper
+      value={info.getValue()}
+      column={meta.outputColumn}
+      prettyFormatting={meta.prettyFormatting}
+      row={info.row.original}
+    />
+  );
+}
+
 function CellValue({
   value,
   column,
@@ -829,6 +845,37 @@ function CopyableCell({
   const [isHovered, setIsHovered] = useState(false);
   const { copy, copied } = useCopy(value);
 
+  // The button (with its aria-label) always sits in the same position in the tree, wrapped by
+  // the same SimpleTooltip, so it is never unmounted/remounted on hover (which would drop
+  // keyboard focus). The tooltip is left uncontrolled so Radix opens it only when the pointer or
+  // keyboard focus is actually on the button, not whenever the pointer is anywhere in this
+  // virtualized grid's cell. `focus-visible:` (not `focus:`) ensures keyboard focus reveals the
+  // button without leaving it visible after a mouse click moves outside the cell.
+  const copyButton = (
+    <button
+      type="button"
+      aria-label={copied ? "Copied" : "Copy"}
+      onClick={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        copy();
+      }}
+      className={cn(
+        "absolute right-1 top-1/2 z-10 flex size-6 -translate-y-1/2 items-center justify-center rounded border border-border-bright bg-background-hover transition-opacity focus-visible:pointer-events-auto focus-visible:opacity-100",
+        isHovered ? "opacity-100" : "pointer-events-none opacity-0",
+        copied
+          ? "text-green-500"
+          : "text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-text-bright"
+      )}
+    >
+      {copied ? (
+        <ClipboardCheckIcon className="size-3.5" />
+      ) : (
+        <ClipboardIcon className="size-3.5" />
+      )}
+    </button>
+  );
+
   return (
     <div
       className={cn(
@@ -842,37 +889,13 @@ function CopyableCell({
       onMouseLeave={() => setIsHovered(false)}
     >
       <span className="flex items-center truncate">{children}</span>
-      {isHovered && (
-        <span
-          onClick={(e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            copy();
-          }}
-          className="absolute right-1 top-1/2 z-10 flex -translate-y-1/2 cursor-pointer"
-        >
-          <SimpleTooltip
-            button={
-              <span
-                className={cn(
-                  "flex size-6 items-center justify-center rounded border border-border-bright bg-background-hover",
-                  copied
-                    ? "text-green-500"
-                    : "text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-text-bright"
-                )}
-              >
-                {copied ? (
-                  <ClipboardCheckIcon className="size-3.5" />
-                ) : (
-                  <ClipboardIcon className="size-3.5" />
-                )}
-              </span>
-            }
-            content={copied ? "Copied!" : "Copy"}
-            disableHoverableContent
-          />
-        </span>
-      )}
+      <SimpleTooltip
+        asChild
+        tabbable
+        button={copyButton}
+        content={copied ? "Copied!" : "Copy"}
+        disableHoverableContent
+      />
     </div>
   );
 }
@@ -906,6 +929,8 @@ function HeaderCellContent({
 
   const sortHighlighted = isCellHovered && !isFilterHovered;
 
+  /* oxlint-disable jsx-a11y/click-events-have-key-events -- The sortable header contains separate tooltip and filter controls that cannot be nested in a button. */
+  /* oxlint-disable jsx-a11y/no-static-element-interactions -- Preserve the existing full-header pointer target rather than nesting its child controls. */
   return (
     <div
       className={cn(
@@ -925,7 +950,7 @@ function HeaderCellContent({
           })}
         >
           <span className="truncate text-left">{children}</span>
-          <span className="flex shrink-0">
+          <span className="flex shrink-0" onClick={(event) => event.stopPropagation()}>
             <InfoIconTooltip
               content={tooltip}
               contentClassName="normal-case tracking-normal"
@@ -937,11 +962,17 @@ function HeaderCellContent({
       ) : (
         <span className="min-w-0 flex-1 truncate text-left">{children}</span>
       )}
-      {/* Sort indicator */}
+      {/* The full header remains a pointer target, while this dedicated control makes sorting keyboard-accessible without nesting the tooltip or filter controls. */}
       {canSort && (
-        <span
+        <button
+          type="button"
+          aria-label="Toggle sort"
+          onClick={(event) => {
+            event.stopPropagation();
+            onSortClick?.(event);
+          }}
           className={cn(
-            "shrink-0 transition-colors",
+            "shrink-0 rounded transition-colors focus-custom",
             sortHighlighted ? "text-text-bright" : "text-text-dimmed"
           )}
         >
@@ -952,10 +983,11 @@ function HeaderCellContent({
           ) : (
             <ChevronUpDownIcon className="size-4" />
           )}
-        </span>
+        </button>
       )}
       {onFilterClick && (
         <button
+          type="button"
           onClick={(e) => {
             e.stopPropagation();
             onFilterClick();
@@ -971,6 +1003,8 @@ function HeaderCellContent({
     </div>
   );
 }
+/* oxlint-enable jsx-a11y/click-events-have-key-events */
+/* oxlint-enable jsx-a11y/no-static-element-interactions */
 
 /**
  * Filter input cell for the filter row
@@ -1013,6 +1047,24 @@ function FilterCell({
   );
 }
 
+/* oxlint-disable jsx-a11y/no-static-element-interactions -- Column resizing is a pointer-drag interaction provided by TanStack Table. */
+function ColumnResizeHandle({ header }: { header: Header<RowData, unknown> }) {
+  return (
+    <div
+      onDoubleClick={() => header.column.resetSize()}
+      onMouseDown={header.getResizeHandler()}
+      onTouchStart={header.getResizeHandler()}
+      className={cn(
+        "absolute right-0 top-0 h-full w-0.5 cursor-col-resize touch-none select-none",
+        "opacity-0 group-hover/header:opacity-100",
+        "bg-surface-control hover:bg-indigo-500",
+        header.column.getIsResizing() && "bg-indigo-500 opacity-100"
+      )}
+    />
+  );
+}
+/* oxlint-enable jsx-a11y/no-static-element-interactions */
+
 export const TSQLResultsTable = memo(function TSQLResultsTable({
   rows,
   columns,
@@ -1053,17 +1105,11 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
         id: col.name,
         accessorKey: col.name,
         header: () => col.name,
-        cell: (info: CellContext<RowData, unknown>) => (
-          <CellValueWrapper
-            value={info.getValue()}
-            column={col}
-            prettyFormatting={prettyFormatting}
-            row={info.row.original}
-          />
-        ),
+        cell: TSQLResultsCell,
         meta: {
           outputColumn: col,
           alignment: isRightAlignedColumn(col) ? "right" : "left",
+          prettyFormatting,
         } as ColumnMeta,
         size: calculateColumnWidth(col.name, rows, col),
         filterFn: fuzzyFilter,
@@ -1075,6 +1121,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
   // Column resize mode: 'onChange' for real-time feedback, 'onEnd' for performance
   const columnResizeMode: ColumnResizeMode = "onChange";
 
+  // oxlint-disable-next-line react/incompatible-library -- TanStack Table is not compatible with compiler memoization.
   const table = useReactTable({
     data: rows,
     columns: columnDefs,
@@ -1211,18 +1258,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
                     >
                       {flexRender(header.column.columnDef.header, header.getContext())}
                     </HeaderCellContent>
-                    {/* Column resizer */}
-                    <div
-                      onDoubleClick={() => header.column.resetSize()}
-                      onMouseDown={header.getResizeHandler()}
-                      onTouchStart={header.getResizeHandler()}
-                      className={cn(
-                        "absolute right-0 top-0 h-full w-0.5 cursor-col-resize touch-none select-none",
-                        "opacity-0 group-hover/header:opacity-100",
-                        "bg-surface-control hover:bg-indigo-500",
-                        header.column.getIsResizing() && "bg-indigo-500 opacity-100"
-                      )}
-                    />
+                    <ColumnResizeHandle header={header} />
                   </th>
                 );
               })}

apps/webapp/app/components/code/TextEditor.tsx

@@ -48,6 +48,7 @@ export function TextEditor(opts: TextEditorProps) {
   const editor = useRef<HTMLDivElement>(null);
   const settings: Omit<UseCodeMirror, "onBlur"> = {
     ...opts,
+    // oxlint-disable-next-line react/refs -- This ref intentionally coordinates an imperative integration outside React state.
     container: editor.current,
     extensions,
     editable: !readOnly,

apps/webapp/app/components/dashboard-agent/AgentChart.tsx

@@ -93,6 +93,7 @@ export function AgentChart({
     // The block can render before `query` has streamed in; an empty query 400s.
     if (!block.query) return;
     if (!organizationId || !projectId || !environmentId) {
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setState({ status: "error", error: "No environment context to run the query." });
       return;
     }

apps/webapp/app/components/dashboard-agent/AgentUpgradeGate.tsx

@@ -1,6 +1,7 @@
 import { Link } from "@remix-run/react";
 import { AgentMonoLogo } from "~/components/primitives/AgentDotMatrix";
 import { LinkButton } from "~/components/primitives/Buttons";
+import { textLinkClassName } from "~/components/primitives/TextLink";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { v3BillingPath } from "~/utils/pathBuilder";
 import { ASK_AGENT_LABEL } from "./agent-identity";
@@ -48,10 +49,7 @@ export function AgentQuotaNotice({ remaining, limit }: { remaining: number; limi
         {remaining} of {limit} free messages left
       </span>
       <span aria-hidden>·</span>
-      <Link
-        to={v3BillingPath(organization)}
-        className="text-text-link underline-offset-2 hover:underline"
-      >
+      <Link to={v3BillingPath(organization)} className={textLinkClassName()}>
         Upgrade
       </Link>
     </div>

apps/webapp/app/components/dashboard-agent/AskAgentButton.tsx

@@ -21,7 +21,7 @@ export function AskAgentButton({
   fallback?: React.ReactNode;
 }) {
   const available = useDashboardAgentAvailable();
-  if (!available) return <>{fallback}</>;
+  if (!available) return fallback;
 
   const button = (
     <Button

apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx

@@ -281,7 +281,7 @@ export function DashboardAgent({
       cancelled = true;
       stop();
     };
-  }, [hasAccess, watching, actionPath, setPanelOpen, openChat]);
+  }, [hasAccess, watching, actionPath, setPanelOpen, openChat, rememberToasted]);
 
   // Zeroes the wake dot right away; the poll restores the truth if another chat has one. The
   // work count is not touched here: the panel derives it from the chat list.

apps/webapp/app/components/dashboard-agent/DashboardAgentChat.tsx

@@ -123,6 +123,7 @@ export function DashboardAgentChat({
   // The path this chat last rendered on. React never unmounts on a page teardown, so an
   // unmount whose live URL has moved is the router having navigated out from under it.
   const renderedPathRef = useRef(location.pathname);
+
   renderedPathRef.current = location.pathname;
 
   const transport = useTriggerChatTransport<typeof dashboardAgent>({
@@ -209,6 +210,7 @@ export function DashboardAgentChat({
   });
 
   const orderRef = useRef(createTranscriptOrder(initialMessages));
+
   const messages = orderTranscript(rawMessages, orderRef.current);
 
   // Read here, not in the panel, so it re-reads as each turn settles.
@@ -359,6 +361,7 @@ export function DashboardAgentChat({
   const navigatedRef = useRef<Set<string> | null>(null);
   if (navigatedRef.current === null) {
     navigatedRef.current = new Set();
+
     pendingNavigateIntents(initialMessages, navigatedRef.current);
   }
   useEffect(() => {
@@ -374,6 +377,7 @@ export function DashboardAgentChat({
   const watchProposedRef = useRef<Set<string> | null>(null);
   if (watchProposedRef.current === null) {
     watchProposedRef.current = new Set();
+
     pendingWatchIntents(initialMessages, watchProposedRef.current);
   }
   useEffect(() => {
@@ -388,6 +392,7 @@ export function DashboardAgentChat({
   }, [transport, chatId, aiStop]);
 
   const teardownRef = useRef<() => void>(() => {});
+
   teardownRef.current = () => {
     if (status !== "streaming" && status !== "submitted") return;
     const reason = unmountTeardown({
@@ -401,6 +406,7 @@ export function DashboardAgentChat({
 
   // Read by the settle effect, which must not re-run when the transcript changes.
   const messagesRef = useRef(messages);
+
   messagesRef.current = messages;
 
   const prevStatus = useRef(status);

apps/webapp/app/components/dashboard-agent/DashboardAgentComposer.tsx

@@ -54,11 +54,13 @@ export function DashboardAgentComposer({
   const sendButton = isStreaming ? (
     <Button
       variant="minimal/small"
-      className="aspect-square h-7 min-w-0 bg-charcoal-600 p-1 hover:bg-charcoal-550"
+      className="aspect-square h-7 min-w-0 bg-surface-control p-1 hover:bg-surface-control-hover"
       aria-label="Stop generating"
       tooltip="Stop generating"
       onClick={onStop}
-      LeadingIcon={<StopIcon className="size-4 text-white" />}
+      // Not text-white: this button's surface goes light with the theme, unlike
+      // the indigo Send button below it.
+      LeadingIcon={<StopIcon className="size-4 text-text-bright" />}
     />
   ) : (
     <Button

apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx

@@ -49,6 +49,7 @@ export function DashboardAgentHeader({
   onClose: () => void;
 }) {
   const [isHistoryOpen, setHistoryOpen] = useState(false);
+  const [historyOpenedAt, setHistoryOpenedAt] = useState<number | null>(null);
   const [pendingDelete, setPendingDelete] = useState<DashboardAgentChat | null>(null);
 
   return (
@@ -57,7 +58,10 @@ export function DashboardAgentHeader({
         open={isHistoryOpen}
         onOpenChange={(open) => {
           setHistoryOpen(open);
-          if (open) onOpenHistory();
+          if (open) {
+            setHistoryOpenedAt(Date.now());
+            onOpenHistory();
+          }
         }}
       >
         <PopoverArrowTrigger
@@ -74,19 +78,22 @@ export function DashboardAgentHeader({
           className="w-72 max-w-(--radix-popover-content-available-width) p-0"
           align="start"
         >
-          <DashboardAgentHistoryMenu
-            chats={chats}
-            currentChatId={currentChatId}
-            thinkingChatId={thinkingChatId}
-            onSelect={(chatId) => {
-              setHistoryOpen(false);
-              onSelectChat(chatId);
-            }}
-            onRequestDelete={(chat) => {
-              setHistoryOpen(false);
-              setPendingDelete(chat);
-            }}
-          />
+          {historyOpenedAt === null ? null : (
+            <DashboardAgentHistoryMenu
+              chats={chats}
+              currentChatId={currentChatId}
+              thinkingChatId={thinkingChatId}
+              now={historyOpenedAt}
+              onSelect={(chatId) => {
+                setHistoryOpen(false);
+                onSelectChat(chatId);
+              }}
+              onRequestDelete={(chat) => {
+                setHistoryOpen(false);
+                setPendingDelete(chat);
+              }}
+            />
+          )}
         </PopoverContent>
       </Popover>
 

apps/webapp/app/components/dashboard-agent/DashboardAgentHistory.tsx

@@ -80,17 +80,17 @@ export function DashboardAgentHistoryMenu({
   chats,
   currentChatId,
   thinkingChatId,
+  now,
   onSelect,
   onRequestDelete,
 }: {
   chats: DashboardAgentChat[];
   currentChatId: string;
   thinkingChatId?: string | null;
+  now: number;
   onSelect: (chatId: string) => void;
   onRequestDelete: (chat: DashboardAgentChat) => void;
 }) {
-  const now = Date.now();
-
   return (
     <div className="max-h-80 overflow-y-auto p-1.5 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
       {chats.length === 0 ? (

apps/webapp/app/components/dashboard-agent/DashboardAgentMessages.tsx

@@ -126,7 +126,9 @@ export function winningInvestigationOccurrences(messages: UIMessage[]): Map<stri
 function useInvestigationWinners(messages: UIMessage[]): Map<string, string> {
   const previous = useRef<Map<string, string>>();
   const next = useMemo(() => winningInvestigationOccurrences(messages), [messages]);
+  // oxlint-disable-next-line react/refs -- This ref intentionally coordinates an imperative integration outside React state.
   previous.current = reuseWinners(previous.current, next);
+  // oxlint-disable-next-line react/refs -- This ref intentionally coordinates an imperative integration outside React state.
   return previous.current;
 }
 
@@ -259,8 +261,8 @@ const DashboardAgentTurn = memo(function DashboardAgentTurn({
 }) {
   if (message.role === "user") {
     return (
-      <ChatTurn role="user">
-        <ChatText role="user" text={userText(message)} />
+      <ChatTurn speaker="user">
+        <ChatText speaker="user" text={userText(message)} />
       </ChatTurn>
     );
   }

apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx

@@ -5,7 +5,7 @@ import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from "r
 import { AgentSpinner } from "~/components/primitives/Spinner";
 import { useToast } from "~/components/primitives/Toast";
 import { useAgentPageContext } from "~/hooks/useAgentPageContext";
-import { useApiOrigin } from "~/hooks/useApiOrigin";
+import { useDashboardAgentBaseUrl } from "~/hooks/useDashboardAgentBaseUrl";
 import { useEnvironment } from "~/hooks/useEnvironment";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
@@ -104,7 +104,7 @@ export function DashboardAgentPanel({
   const project = useProject();
   const environment = useEnvironment();
   const user = useUser();
-  const apiOrigin = useApiOrigin();
+  const apiOrigin = useDashboardAgentBaseUrl();
   const location = useLocation();
   const pageContext = useAgentPageContext();
   const toast = useToast();
@@ -194,7 +194,7 @@ export function DashboardAgentPanel({
           toast.error("We couldn't load your previous chats. Try again in a moment.");
         }
       }),
-    [actionPath, organization.id, toast]
+    [actionPath, organization.id, toast, justRead, visibleChatId]
   );
 
   // Bumped on each open so a slower earlier open can't overwrite a newer one.
@@ -341,6 +341,7 @@ export function DashboardAgentPanel({
     handledOpenChatSeq.current = openChatRequest.seq;
     // Reloading the visible transcript would drop a turn in flight.
     if (openChatRequest.chatId === active?.chatId) return;
+
     void openChat(openChatRequest.chatId);
     // `active` is read, not tracked: a later change must not re-run the request.
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -357,6 +358,7 @@ export function DashboardAgentPanel({
     onChatRead?.(chatId, { leaving: false });
     visibleChatId.current = nextVisibleChat(chatId, { leaving: false });
     justRead.current.add(chatId);
+
     setChats((previous) => markChatListRead(previous, chatId));
     // Read again on the way out: a wake can land while the chat is open.
     return () => {
@@ -416,6 +418,7 @@ export function DashboardAgentPanel({
   }, []);
 
   const dismissWatchCard = () => dispatchWatchCard({ type: "dismissed" });
+  const activeChatId = active?.chatId;
 
   const submitWatch = useCallback(async () => {
     const draft = watchCard.draft;
@@ -429,7 +432,7 @@ export function DashboardAgentPanel({
       body.set("draft", JSON.stringify(draft));
       body.set("clientRequestId", clientRequestId);
       // A watch is chat-bound: with no chat open the server creates one.
-      if (active?.chatId) body.set("chatId", active.chatId);
+      if (activeChatId) body.set("chatId", activeChatId);
 
       const res = await fetch(actionPath, { method: "POST", body });
       const data = (await res.json()) as {
@@ -446,7 +449,7 @@ export function DashboardAgentPanel({
       }
 
       const messages = data.messages;
-      if (active?.chatId === data.chatId) {
+      if (activeChatId === data.chatId) {
         setAppendedMessages((current) => ({
           chatId: data.chatId!,
           messages,
@@ -474,8 +477,9 @@ export function DashboardAgentPanel({
   }, [
     watchCard.draft,
     watchCard.requestId,
-    active?.chatId,
+    activeChatId,
     actionPath,
+    organization.id,
     claimChatSlot,
     loadHistory,
   ]);
@@ -581,6 +585,7 @@ export function DashboardAgentPanel({
   // Not filtered to active: the wake banner needs watches that already fired.
   const chatWatches = activeChat?.watches ?? [];
 
+  /* oxlint-disable jsx-a11y/no-static-element-interactions -- Escape handling intentionally bubbles from focused controls inside the panel. */
   return (
     <div
       ref={panelRef}
@@ -667,3 +672,4 @@ export function DashboardAgentPanel({
     </div>
   );
 }
+/* oxlint-enable jsx-a11y/no-static-element-interactions */

apps/webapp/app/components/dashboard-agent/InvestigationCard.tsx

@@ -19,6 +19,8 @@ import {
   SeverityBadge,
   VerdictBadge,
 } from "./agent-badges";
+import { textLinkClassName } from "~/components/primitives/TextLink";
+import { cn } from "~/utils/cn";
 import { AgentCard, AgentCardBody, AgentCardHeader } from "./agent-card";
 import { ChatActionsRow } from "./chat-layout";
 import type { ResolvedUri } from "./ReportView";
@@ -65,7 +67,7 @@ function EvidenceItem({
         {resolved ? (
           <a
             href={resolved.url}
-            className="block break-all font-mono text-[10px] text-text-link transition hover:underline"
+            className={cn(textLinkClassName(), "block break-all font-mono text-[10px]")}
           >
             {resolved.label}
           </a>

apps/webapp/app/components/dashboard-agent/RunDiagnosisCard.tsx

@@ -101,7 +101,7 @@ function RunLink({ runId, className }: { runId: string; className?: string }) {
   const to = useRunPath(runId);
   if (!to) return <span className={cn("font-mono text-text-dimmed", className)}>{runId}</span>;
   return (
-    <TextLink to={to} variant="token" className={cn("underline", className)}>
+    <TextLink to={to} className={className}>
       {runId}
     </TextLink>
   );
@@ -116,10 +116,9 @@ function EvidenceReference({ reference }: { reference: string }) {
     return (
       <TextLink
         href={safeUrl}
-        variant="token"
         target="_blank"
         rel="noopener noreferrer"
-        className="font-mono text-xs underline"
+        className="font-mono text-xs"
       >
         {reference}
       </TextLink>

apps/webapp/app/components/dashboard-agent/WhenAgentUnavailable.tsx

@@ -6,5 +6,5 @@ export function WhenAgentUnavailable({ children }: { children: React.ReactNode }
     return null;
   }
 
-  return <>{children}</>;
+  return children;
 }

apps/webapp/app/components/dashboard-agent/agent-badges.tsx

@@ -15,13 +15,12 @@ export type AgentTone = "neutral" | "success" | "warning" | "error";
 // The `system:` overrides stop the Badge `small` variant tinting every chip blue.
 const TONE_BADGE: Record<AgentTone, string> = {
   neutral:
-    "border-border-bright text-text-dimmed system:border-transparent system:bg-charcoal-500/10 system:text-text-dimmed",
+    "border-border-bright text-text-dimmed system:border-transparent system:bg-charcoal-500 system:text-white",
   success:
-    "border-success/40 text-success system:border-transparent system:bg-success/10 system:text-success",
+    "border-success/40 text-success system:border-transparent system:bg-success system:text-white",
   warning:
-    "border-warning/40 text-warning system:border-transparent system:bg-warning/10 system:text-warning",
-  error:
-    "border-error/40 text-error system:border-transparent system:bg-error/10 system:text-error",
+    "border-warning/40 text-warning system:border-transparent system:bg-warning system:text-white",
+  error: "border-error/40 text-error system:border-transparent system:bg-error system:text-white",
 };
 
 export const TONE_ICON_COLOR: Record<AgentTone, string> = {
@@ -48,8 +47,9 @@ export function AgentBadge({
     <Badge
       variant="small"
       className={cn(
-        // `contrast-chip`: the tinted chip gains a ring as interface contrast rises.
-        "contrast-chip px-1.5 [&>span]:flex [&>span]:items-center [&>span]:gap-1",
+        // No `contrast-chip`: these fill solid, so its currentcolor ring would
+        // land as a white line inset into the fill.
+        "px-1.5 [&>span]:flex [&>span]:items-center [&>span]:gap-1",
         TONE_BADGE[tone],
         className
       )}

apps/webapp/app/components/dashboard-agent/chat-layout.tsx

@@ -57,11 +57,11 @@ export function ChatTranscript({
 }
 
 export function ChatTurn({
-  role = "assistant",
+  speaker = "assistant",
   bleed = false,
   children,
 }: {
-  role?: ChatRole;
+  speaker?: ChatRole;
   bleed?: boolean;
   children: React.ReactNode;
 }) {
@@ -71,7 +71,7 @@ export function ChatTurn({
         className={cn(
           bleed ? undefined : TRANSCRIPT_INSET_X,
           "min-w-0",
-          role === "user" ? "flex justify-end" : TURN_BODY_GAP
+          speaker === "user" ? "flex justify-end" : TURN_BODY_GAP
         )}
       >
         {children}
@@ -80,8 +80,8 @@ export function ChatTurn({
   );
 }
 
-export function ChatText({ role = "assistant", text }: { role?: ChatRole; text: string }) {
-  if (role === "user") {
+export function ChatText({ speaker = "assistant", text }: { speaker?: ChatRole; text: string }) {
+  if (speaker === "user") {
     return (
       <div className="max-w-[80%] rounded-lg bg-background-raised px-4 py-2.5 text-sm text-text-bright">
         <div className="whitespace-pre-wrap wrap-anywhere">{text}</div>

apps/webapp/app/components/dashboard-agent/report-sparkline.tsx

@@ -187,7 +187,7 @@ export function ReportFindingLine({
  * entities mono, verdict phrases bright and medium, everything else dimmed.
  * Colour stays reserved for severity, so emphasis here is weight only.
  */
-const QUANTITY_RE = /~?\d[\d,.]*\s?(?:%|×|\/min|ms\b|s\b|min\b|h\b)?/g;
+const QUANTITY_RE = /~?\d[\d,.]*\s?(?:%|×|\/min|ms\b|s\b|min\b|h\b)?/;
 
 const VERDICT_PHRASES = [
   "not your code",
@@ -249,7 +249,6 @@ export function ReportProse({ text, entities }: { text: string; entities?: strin
   segments = splitBy(
     segments,
     (t) => {
-      QUANTITY_RE.lastIndex = 0;
       const m = QUANTITY_RE.exec(t);
       return m && m[0].trim().length > 0 ? { start: m.index, end: m.index + m[0].length } : null;
     },

apps/webapp/app/components/dashboard-agent/tooltip-accessible-name.test.ts

@@ -60,7 +60,6 @@ const NO_AS_CHILD_BASELINE = new Set([
   "app/components/GitMetadata.tsx::LinkButton",
   "app/components/code/TSQLResultsTable.tsx::TextLink",
   "app/components/integrations/VercelLink.tsx::LinkButton",
-  "app/components/primitives/CopyButton.tsx::Button",
   "app/components/runs/v3/RunTag.tsx::Link",
   "app/components/runs/v3/TaskRunsTable.tsx::DialogTrigger",
   "app/routes/account.tokens/route.tsx::DialogTrigger",
@@ -90,6 +89,16 @@ function attrOf(node: JsxNode, name: string) {
   return open.attributes.properties.find((p) => ts.isJsxAttribute(p) && p.name.getText() === name);
 }
 
+function hasStaticTrueAttribute(node: JsxNode, name: string): boolean {
+  const attribute = attrOf(node, name);
+  if (!attribute || !ts.isJsxAttribute(attribute)) return false;
+  if (!attribute.initializer) return true;
+  return (
+    ts.isJsxExpression(attribute.initializer) &&
+    attribute.initializer.expression?.kind === ts.SyntaxKind.TrueKeyword
+  );
+}
+
 /** Text anywhere under the element, ignoring an expression that can render nothing. */
 function hasText(node: TsNode): boolean {
   if (!ts.isJsxElement(node)) return false;
@@ -179,7 +188,7 @@ function scanFile(file: string, relative: string): Violation[] {
       const initializer =
         buttonAttr && ts.isJsxAttribute(buttonAttr) ? buttonAttr.initializer : undefined;
       if (initializer && ts.isJsxExpression(initializer)) {
-        const asChild = !!attrOf(node, "asChild");
+        const asChild = hasStaticTrueAttribute(node, "asChild");
         for (const trigger of resolve(initializer.expression).flatMap(triggersIn)) {
           const named =
             !!attrOf(trigger, "aria-label") ||

apps/webapp/app/components/errors/ConfigureErrorAlerts.tsx

@@ -42,6 +42,19 @@ export const ErrorAlertsFormSchema = z.object({
   }, z.string().url().array()),
 });
 
+type SlackChannel = { id?: string; name?: string; is_private?: boolean };
+
+function renderSlackChannel(channels: SlackChannel[], value: string) {
+  const channel = channels.find((channel) => value === `${channel.id}/${channel.name}`);
+  if (!channel) return;
+
+  return (
+    <span className="text-text-bright">
+      <SlackChannelTitle {...channel} />
+    </span>
+  );
+}
+
 type ConfigureErrorAlertsProps = ErrorAlertChannelData & {
   connectToSlackHref?: string;
   formAction: string;
@@ -90,13 +103,15 @@ export function ConfigureErrorAlerts({
     }
   }, [fetcher.state, fetcher.data, closeHref, navigate, toast]);
 
-  const emailFieldValues = useRef<string[]>(
+  const [emailDefaultValues] = useState<string[]>(() =>
     existingEmails.length > 0 ? [...existingEmails.map((e) => e.email), ""] : [""]
   );
+  const emailFieldValues = useRef([...emailDefaultValues]);
 
-  const webhookFieldValues = useRef<string[]>(
+  const [webhookDefaultValues] = useState<string[]>(() =>
     existingWebhooks.length > 0 ? [...existingWebhooks.map((w) => w.url), ""] : [""]
   );
+  const webhookFieldValues = useRef([...webhookDefaultValues]);
 
   const [form, fields] = useForm<z.infer<typeof ErrorAlertsFormSchema>>({
     id: "configure-error-alerts",
@@ -105,8 +120,8 @@ export function ConfigureErrorAlerts({
     },
     shouldRevalidate: "onSubmit",
     defaultValue: {
-      emails: emailFieldValues.current,
-      webhooks: webhookFieldValues.current,
+      emails: emailDefaultValues,
+      webhooks: webhookDefaultValues,
     },
   });
   const { emails, webhooks, slackChannel, slackIntegrationId } = fields;
@@ -157,7 +172,7 @@ export function ConfigureErrorAlerts({
                           emailFieldValues.current[index] = e.target.value;
                           if (
                             emailFields.length === emailFieldValues.current.length &&
-                            emailFieldValues.current.every((v) => v !== "")
+                            emailFieldValues.current.every((value) => value !== "")
                           ) {
                             form.insert({ name: emails.name });
                           }
@@ -196,15 +211,7 @@ export function ConfigureErrorAlerts({
                       filter={(channel, search) =>
                         channel.name?.toLowerCase().includes(search.toLowerCase()) ?? false
                       }
-                      text={(value) => {
-                        const channel = slack.channels.find((s) => value === `${s.id}/${s.name}`);
-                        if (!channel) return;
-                        return (
-                          <span className="text-text-bright">
-                            <SlackChannelTitle {...channel} />
-                          </span>
-                        );
-                      }}
+                      text={(value) => renderSlackChannel(slack.channels, value)}
                     >
                       {(matches) => (
                         <>
@@ -319,7 +326,7 @@ export function ConfigureErrorAlerts({
                         webhookFieldValues.current[index] = e.target.value;
                         if (
                           webhookFields.length === webhookFieldValues.current.length &&
-                          webhookFieldValues.current.every((v) => v !== "")
+                          webhookFieldValues.current.every((value) => value !== "")
                         ) {
                           form.insert({ name: webhooks.name });
                         }

apps/webapp/app/components/errors/ErrorStatusBadge.tsx

@@ -34,7 +34,9 @@ export function ErrorStatusBadge({
   return (
     <span
       className={cn(
-        "contrast-chip inline-flex items-center rounded px-2 py-0.5 text-xs font-medium",
+        "inline-flex items-center rounded px-2 py-0.5 text-xs font-medium",
+        // The contrast ring is for tints; `bright` fills solid.
+        prominence !== "bright" && "contrast-chip",
         (prominence === "bright" ? brightStyles : subtleStyles)[status],
         className
       )}

apps/webapp/app/components/integrations/VercelBuildSettings.tsx

@@ -1,5 +1,6 @@
 import { Switch } from "~/components/primitives/Switch";
 import { LinkButton } from "~/components/primitives/Buttons";
+import { Badge } from "~/components/primitives/Badge";
 import { Label } from "~/components/primitives/Label";
 import {
   SettingsRow,
@@ -7,6 +8,7 @@ import {
   SettingsRowTitle,
 } from "~/components/primitives/SettingsLayout";
 import { cn } from "~/utils/cn";
+import { docsPath } from "~/utils/pathBuilder";
 import { Hint } from "~/components/primitives/Hint";
 import { TextLink } from "~/components/primitives/TextLink";
 import { SimpleTooltip } from "~/components/primitives/Tooltip";
@@ -17,6 +19,16 @@ import {
 } from "~/components/environments/EnvironmentLabel";
 import { envSlugToType, type EnvSlug } from "~/v3/vercel/vercelProjectIntegrationSchema";
 
+export const SKEW_PROTECTION_DOCS_PATH = docsPath("deployment/version-skew-protection");
+
+const SKEW_PROTECTION_MIN_SDK_VERSION: string | null = "4.5.12";
+
+export function skewProtectionVersionRequirement(): string {
+  return SKEW_PROTECTION_MIN_SDK_VERSION
+    ? `from SDK and CLI v${SKEW_PROTECTION_MIN_SDK_VERSION} and later`
+    : "from a recent SDK and CLI — see the docs for the exact version";
+}
+
 type BuildSettingsFieldsProps = {
   availableEnvSlugs: EnvSlug[];
   pullEnvVarsBeforeBuild: EnvSlug[];
@@ -37,7 +49,7 @@ type BuildSettingsFieldsProps = {
    * the pin status is unknown — distinct from "not set". */
   currentTriggerVersionFetchFailed?: boolean;
   /** Hide the section-level master toggles for "Pull env vars" and "Discover new env vars". */
-  hideSectionToggles?: boolean;
+  showAtomicDeployments?: boolean;
   layout?: "settings" | "card";
 };
 
@@ -55,7 +67,7 @@ export function BuildSettingsFields({
   onAutoPromoteChange,
   currentTriggerVersion,
   currentTriggerVersionFetchFailed,
-  hideSectionToggles,
+  showAtomicDeployments = true,
   layout = "card",
 }: BuildSettingsFieldsProps) {
   const isSlugDisabled = (slug: EnvSlug) => !!disabledEnvSlugs?.[slug];
@@ -126,7 +138,7 @@ export function BuildSettingsFields({
     ) : null;
 
   const atomicSections =
-    layout === "settings" ? (
+    layout === "settings" && showAtomicDeployments ? (
       <>
         <SettingsRow
           action={
@@ -140,11 +152,25 @@ export function BuildSettingsFields({
           }
         >
           <div className="flex-1 space-y-1">
-            <SettingsRowTitle>Atomic deployments</SettingsRowTitle>
+            <SettingsRowTitle>
+              <span className="flex items-center gap-2">
+                Atomic deployments <DeprecatedBadge />
+              </span>
+            </SettingsRowTitle>
             <SettingsRowDescription>
-              Promotes your Vercel deployment and your tasks together in Production, so your app
-              never runs against a mismatched task version. Requires turning off "Auto-assign Custom
-              Production Domains" on your Vercel project, which Trigger.dev does for you.{" "}
+              Version skew protection replaces this. It pins every run to the deployment that
+              triggered it, and works on its own {skewProtectionVersionRequirement()}. Atomic
+              deployments still work, so turn this off whenever you're ready.{" "}
+              <TextLink href={SKEW_PROTECTION_DOCS_PATH} target="_blank">
+                Read about version skew protection
+              </TextLink>
+              .
+            </SettingsRowDescription>
+            <SettingsRowDescription>
+              Atomic deployments promote your Vercel deployment and your tasks together in
+              Production, so your app never runs against a mismatched task version. This needs
+              "Auto-assign Custom Production Domains" turned off on your Vercel project, and
+              Trigger.dev takes care of that for you.{" "}
               <TextLink
                 href="https://trigger.dev/docs/vercel-integration#atomic-deployments"
                 target="_blank"
@@ -172,7 +198,7 @@ export function BuildSettingsFields({
         {atomicBuilds.includes("prod") && onAutoPromoteChange !== undefined && (
           <SettingsRow
             title="Auto promotion"
-            description="Once your tasks finish deploying, Trigger.dev promotes the Vercel deployment for you. Turn this off to promote from the Vercel dashboard yourself, and Trigger.dev will follow as soon as you do."
+            description="Part of atomic deployments, and only used while they are on. Once your tasks finish deploying, Trigger.dev promotes the Vercel deployment for you. Turn this off to promote from the Vercel dashboard yourself, and Trigger.dev will follow as soon as you do."
             action={
               <Switch
                 variant="medium"
@@ -194,7 +220,7 @@ export function BuildSettingsFields({
           <div className="mb-2">
             <div className="flex items-center justify-between">
               <Label>Pull env vars before build</Label>
-              {!hideSectionToggles && availableEnvSlugs.length > 1 && (
+              {availableEnvSlugs.length > 1 && (
                 <Switch
                   variant="small"
                   checked={
@@ -264,7 +290,7 @@ export function BuildSettingsFields({
           <div className="mb-2">
             <div className="flex items-center justify-between">
               <Label>Discover new env vars</Label>
-              {!hideSectionToggles && availableEnvSlugs.length > 1 && (
+              {availableEnvSlugs.length > 1 && (
                 <Switch
                   variant="small"
                   checked={
@@ -333,10 +359,14 @@ export function BuildSettingsFields({
       {atomicSections}
 
       {/* Atomic deployments */}
-      {layout === "card" && (
+      {layout === "card" && showAtomicDeployments && (
         <div>
           <div className="flex items-center justify-between">
-            <Label>Atomic deployments</Label>
+            <Label>
+              <span className="flex items-center gap-2">
+                Atomic deployments <DeprecatedBadge />
+              </span>
+            </Label>
             <Switch
               variant="small"
               checked={atomicBuilds.includes("prod")}
@@ -346,10 +376,18 @@ export function BuildSettingsFields({
             />
           </div>
           <Hint className="pr-6">
-            When enabled, production deployments wait for Vercel deployment to complete before
-            promoting the Trigger.dev deployment. This will disable the "Auto-assign Custom
-            Production Domains" option in your Vercel project settings to perform staged
-            deployments.{" "}
+            Version skew protection replaces this, and works on its own{" "}
+            {skewProtectionVersionRequirement()}.{" "}
+            <TextLink href={SKEW_PROTECTION_DOCS_PATH} target="_blank">
+              Read about version skew protection
+            </TextLink>
+            .
+          </Hint>
+          <Hint className="pr-6">
+            Atomic deployments promote your Vercel deployment and your tasks together in Production,
+            so your app never runs against a mismatched task version. This needs "Auto-assign Custom
+            Production Domains" turned off on your Vercel project, and Trigger.dev takes care of
+            that for you.{" "}
             <TextLink
               href="https://trigger.dev/docs/vercel-integration#atomic-deployments"
               target="_blank"
@@ -375,27 +413,48 @@ export function BuildSettingsFields({
       )}
 
       {/* Auto promotion — only visible when atomic deployments are on */}
-      {layout === "card" && atomicBuilds.includes("prod") && onAutoPromoteChange !== undefined && (
-        <div>
-          <div className="flex items-center justify-between">
-            <Label>Auto promotion</Label>
-            <Switch
-              variant="small"
-              checked={autoPromote ?? true}
-              onCheckedChange={onAutoPromoteChange}
-            />
+      {layout === "card" &&
+        showAtomicDeployments &&
+        atomicBuilds.includes("prod") &&
+        onAutoPromoteChange !== undefined && (
+          <div>
+            <div className="flex items-center justify-between">
+              <Label>Auto promotion</Label>
+              <Switch
+                variant="small"
+                checked={autoPromote ?? true}
+                onCheckedChange={onAutoPromoteChange}
+              />
+            </div>
+            <Hint className="pr-6">
+              When enabled, the integration automatically promotes the Vercel deployment after the
+              Trigger.dev build completes. Turn off to manually promote from your Vercel dashboard —
+              Trigger.dev will then promote automatically once you do.
+            </Hint>
           </div>
-          <Hint className="pr-6">
-            When enabled, the integration automatically promotes the Vercel deployment after the
-            Trigger.dev build completes. Turn off to manually promote from your Vercel dashboard —
-            Trigger.dev will then promote automatically once you do.
-          </Hint>
-        </div>
-      )}
+        )}
     </>
   );
 }
 
+function DeprecatedBadge() {
+  return (
+    <SimpleTooltip
+      asChild
+      button={
+        <Badge
+          variant="extra-small"
+          className="text-warning system:border-transparent system:bg-warning system:text-white"
+        >
+          Deprecated
+        </Badge>
+      }
+      content="Use version skew protection instead"
+      disableHoverableContent
+    />
+  );
+}
+
 function EnvToggleRow({
   slug,
   checked,

apps/webapp/app/components/integrations/VercelOnboardingModal.tsx

@@ -4,7 +4,7 @@ import {
   ChevronDownIcon,
   ChevronUpIcon,
 } from "@heroicons/react/20/solid";
-import { useFetcher, useNavigation, useSearchParams } from "@remix-run/react";
+import { useFetcher, useSearchParams } from "@remix-run/react";
 import { useTypedFetcher } from "remix-typedjson";
 import { Dialog, DialogContent, DialogHeader } from "~/components/primitives/Dialog";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
@@ -34,19 +34,17 @@ import {
   type EnvSlug,
   ALL_ENV_SLUGS,
   shouldSyncEnvVarForAnyEnvironment,
-  getAvailableEnvSlugs,
   getAvailableEnvSlugsForBuildSettings,
 } from "~/v3/vercel/vercelProjectIntegrationSchema";
 import { type VercelCustomEnvironment } from "~/models/vercelIntegration.server";
 import { type VercelOnboardingData } from "~/presenters/v3/VercelSettingsPresenter.server";
 import {
-  vercelAppInstallPath,
   v3ProjectSettingsIntegrationsPath,
   githubAppInstallPath,
   vercelResourcePath,
 } from "~/utils/pathBuilder";
 import type { loader } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel";
-import { useEffect, useState, useCallback, useRef } from "react";
+import { useEffect, useState, useCallback, useMemo, useRef } from "react";
 import { usePostHogTracking } from "~/hooks/usePostHog";
 import { TextLink } from "../primitives/TextLink";
 
@@ -78,7 +76,6 @@ function formatVercelTargets(targets: string[]): string {
 
 type OnboardingState =
   | "idle"
-  | "installing"
   | "loading-projects"
   | "project-selection"
   | "loading-env-mapping"
@@ -99,6 +96,7 @@ export function VercelOnboardingModal({
   hasStagingEnvironment,
   hasPreviewEnvironment,
   hasOrgIntegration,
+  onboardingDataUnavailable = false,
   nextUrl,
   onDataReload,
   vercelManageAccessUrl,
@@ -112,23 +110,27 @@ export function VercelOnboardingModal({
   hasStagingEnvironment: boolean;
   hasPreviewEnvironment: boolean;
   hasOrgIntegration: boolean;
+  onboardingDataUnavailable?: boolean;
   nextUrl?: string;
   onDataReload?: (vercelStagingEnvironment?: string) => void;
   vercelManageAccessUrl?: string;
 }) {
   const { capture, startSessionRecording } = usePostHogTracking();
-  const navigation = useNavigation();
   const fetcher = useTypedFetcher<typeof loader>();
   const envMappingFetcher = useFetcher();
   const completeOnboardingFetcher = useFetcher();
-  const { Form: _CompleteOnboardingForm } = completeOnboardingFetcher;
   const [searchParams] = useSearchParams();
   const origin = searchParams.get("origin");
   const fromMarketplaceContext = origin === "marketplace";
 
-  const availableProjects = onboardingData?.availableProjects || [];
-  const _hasProjectSelected = onboardingData?.hasProjectSelected ?? false;
-  const customEnvironments = onboardingData?.customEnvironments || [];
+  const availableProjects = useMemo(
+    () => onboardingData?.availableProjects ?? [],
+    [onboardingData?.availableProjects]
+  );
+  const customEnvironments = useMemo(
+    () => onboardingData?.customEnvironments ?? [],
+    [onboardingData?.customEnvironments]
+  );
   const envVars = onboardingData?.environmentVariables || [];
   const existingVars = onboardingData?.existingVariables || {};
   const hasCustomEnvs = customEnvironments.length > 0 && hasStagingEnvironment;
@@ -177,6 +179,7 @@ export function VercelOnboardingModal({
       hasSyncedStagingRef.current = false;
       hasSyncedPreviewRef.current = false;
     } else if (isOpen && state === "idle") {
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setState(computeInitialState());
     }
     prevIsOpenRef.current = isOpen;
@@ -217,10 +220,6 @@ export function VercelOnboardingModal({
     environmentId: string;
     displayName: string;
   } | null>(null);
-  const _availableEnvSlugsForOnboarding = getAvailableEnvSlugs(
-    hasStagingEnvironment,
-    hasPreviewEnvironment
-  );
   const availableEnvSlugsForOnboardingBuildSettings = getAvailableEnvSlugsForBuildSettings(
     hasStagingEnvironment,
     hasPreviewEnvironment
@@ -228,7 +227,7 @@ export function VercelOnboardingModal({
   const [pullEnvVarsBeforeBuild, setPullEnvVarsBeforeBuild] = useState<EnvSlug[]>(
     () => availableEnvSlugsForOnboardingBuildSettings
   );
-  const [atomicBuilds, setAtomicBuilds] = useState<EnvSlug[]>(() => ["prod"]);
+  const [atomicBuilds, setAtomicBuilds] = useState<EnvSlug[]>([]);
   const [discoverEnvVars, setDiscoverEnvVars] = useState<EnvSlug[]>(
     () => availableEnvSlugsForOnboardingBuildSettings
   );
@@ -256,6 +255,7 @@ export function VercelOnboardingModal({
   // Strip "stg" from build settings when the staging environment mapping is cleared
   useEffect(() => {
     if (!vercelStagingEnvironment) {
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setPullEnvVarsBeforeBuild((prev) => prev.filter((s) => s !== "stg"));
       setDiscoverEnvVars((prev) => prev.filter((s) => s !== "stg"));
     }
@@ -323,6 +323,7 @@ export function VercelOnboardingModal({
   useEffect(() => {
     if (!isOpen) {
       hasTriggeredMarketplaceRedirectRef.current = false;
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setIsRedirecting(false);
     }
   }, [isOpen]);
@@ -366,7 +367,6 @@ export function VercelOnboardingModal({
         }
         break;
 
-      case "installing":
       case "project-selection":
       case "env-mapping":
       case "env-var-sync":
@@ -384,6 +384,7 @@ export function VercelOnboardingModal({
       state === "loading-projects" &&
       onboardingData?.availableProjects !== undefined
     ) {
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setState("project-selection");
     }
   }, [state, onboardingData?.availableProjects, onboardingData?.authInvalid]);
@@ -394,6 +395,7 @@ export function VercelOnboardingModal({
       state === "loading-env-vars" &&
       onboardingData?.environmentVariables
     ) {
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setState("env-var-sync");
     }
   }, [state, onboardingData?.environmentVariables, onboardingData?.authInvalid]);
@@ -409,6 +411,7 @@ export function VercelOnboardingModal({
       trackOnboarding("vercel onboarding project selected", {
         vercel_project_name: selectedVercelProject?.name,
       });
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setState("loading-env-mapping");
       if (onDataReload) {
         onDataReload();
@@ -431,6 +434,7 @@ export function VercelOnboardingModal({
       const hasCustomEnvs =
         (onboardingData.customEnvironments?.length ?? 0) > 0 && hasStagingEnvironment;
       if (hasCustomEnvs && !fromMarketplaceContext) {
+        // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
         setState("env-mapping");
       } else {
         setState("loading-env-vars");
@@ -446,8 +450,6 @@ export function VercelOnboardingModal({
 
   const overlappingEnvVarsCount = enabledEnvVars.filter((v) => existingVars[v.key]).length;
 
-  const _isSubmitting = navigation.state === "submitting" || navigation.state === "loading";
-
   const actionUrl = vercelResourcePath(organizationSlug, projectSlug, environmentSlug);
 
   const handleToggleEnvVar = useCallback((key: string, enabled: boolean) => {
@@ -621,19 +623,6 @@ export function VercelOnboardingModal({
     gitHubAppInstallations.length,
   ]);
 
-  const _handleFinishOnboarding = useCallback(
-    (e: React.FormEvent<HTMLFormElement>) => {
-      e.preventDefault();
-      const form = e.currentTarget;
-      const formData = new FormData(form);
-      completeOnboardingFetcher.submit(formData, {
-        method: "post",
-        action: actionUrl,
-      });
-    },
-    [completeOnboardingFetcher, actionUrl]
-  );
-
   useEffect(() => {
     if (
       completeOnboardingFetcher.data &&
@@ -655,6 +644,7 @@ export function VercelOnboardingModal({
         }
         return;
       }
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setState("completed");
     }
   }, [completeOnboardingFetcher.data, completeOnboardingFetcher.state, state]);
@@ -669,6 +659,7 @@ export function VercelOnboardingModal({
           return;
         }
       }
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setState("completed");
     }
   }, [state, isGitHubConnectedForOnboarding, fromMarketplaceContext, nextUrl, trackOnboarding]);
@@ -683,13 +674,6 @@ export function VercelOnboardingModal({
     }
   }, [state, onClose, trackOnboarding, isGitHubConnectedForOnboarding]);
 
-  useEffect(() => {
-    if (state === "installing") {
-      const installUrl = vercelAppInstallPath(organizationSlug, projectSlug);
-      window.location.href = installUrl;
-    }
-  }, [state, organizationSlug, projectSlug]);
-
   useEffect(() => {
     if (
       envMappingFetcher.data &&
@@ -698,6 +682,7 @@ export function VercelOnboardingModal({
       envMappingFetcher.data.success &&
       envMappingFetcher.state === "idle"
     ) {
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setState("loading-env-vars");
     }
   }, [envMappingFetcher.data, envMappingFetcher.state]);
@@ -713,12 +698,14 @@ export function VercelOnboardingModal({
         selectedEnv = stagingEnv ?? customEnvironments[0];
       }
 
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setVercelStagingEnvironment({ environmentId: selectedEnv.id, displayName: selectedEnv.slug });
     }
   }, [state, customEnvironments, vercelStagingEnvironment]);
 
   useEffect(() => {
     if (state === "project-selection" && availableProjects.length > 0 && !selectedVercelProject) {
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setSelectedVercelProject(availableProjects[0]);
     }
   }, [state, availableProjects, selectedVercelProject]);
@@ -731,7 +718,6 @@ export function VercelOnboardingModal({
     state === "loading-projects" ||
     state === "loading-env-mapping" ||
     state === "loading-env-vars" ||
-    state === "installing" ||
     (state === "idle" && !onboardingData);
 
   if (isLoadingState) {
@@ -740,9 +726,7 @@ export function VercelOnboardingModal({
         open={isOpen}
         onOpenChange={(open) => {
           if (!open && !fromMarketplaceContext) {
-            if ((state as string) !== "completed") {
-              trackOnboarding("vercel onboarding abandoned");
-            }
+            trackOnboarding("vercel onboarding abandoned");
             onClose();
           }
         }}
@@ -754,9 +738,30 @@ export function VercelOnboardingModal({
               <span>Set up Vercel Integration</span>
             </div>
           </DialogHeader>
-          <div className="flex items-center justify-center py-8">
-            <Spinner color="blue" className="size-6" />
-          </div>
+          {onboardingDataUnavailable ? (
+            <div className="flex flex-col items-start gap-3 py-4">
+              <Paragraph variant="small">
+                We couldn't load your Vercel projects. The integration may have been removed or lost
+                access to this organization on Vercel.
+              </Paragraph>
+              <div className="flex items-center gap-2">
+                {onDataReload && (
+                  <Button variant="secondary/small" onClick={() => onDataReload()}>
+                    Try again
+                  </Button>
+                )}
+                {vercelManageAccessUrl && (
+                  <LinkButton to={vercelManageAccessUrl} target="_blank" variant="tertiary/small">
+                    Manage access on Vercel
+                  </LinkButton>
+                )}
+              </div>
+            </div>
+          ) : (
+            <div className="flex items-center justify-center py-8">
+              <Spinner color="blue" className="size-6" />
+            </div>
+          )}
         </DialogContent>
       </Dialog>
     );
@@ -1146,7 +1151,7 @@ export function VercelOnboardingModal({
             <div className="flex flex-col gap-4">
               <Header3>Build Settings</Header3>
               <Paragraph className="text-sm">
-                Configure how environment variables are pulled during builds and atomic deployments.
+                Configure how environment variables are pulled during builds.
               </Paragraph>
 
               <BuildSettingsFields
@@ -1158,6 +1163,7 @@ export function VercelOnboardingModal({
                 atomicBuilds={atomicBuilds}
                 onAtomicBuildsChange={setAtomicBuilds}
                 disabledEnvSlugs={disabledEnvSlugsForBuildSettings}
+                showAtomicDeployments={false}
               />
 
               <FormButtons

apps/webapp/app/components/logs/LogsLevelFilter.tsx

@@ -12,15 +12,15 @@ import {
 } from "~/components/primitives/Select";
 import { useSearchParams } from "~/hooks/useSearchParam";
 import { appliedSummary } from "~/components/runs/v3/SharedFilters";
-import type { LogLevel } from "~/presenters/v3/LogsListPresenter.server";
-import { cn } from "~/utils/cn";
+import { LogLevel } from "~/components/logs/LogLevel";
+import type { LogLevel as LogLevelValue } from "~/presenters/v3/LogsListPresenter.server";
 
-const allLogLevels: { level: LogLevel; label: string; color: string }[] = [
-  { level: "TRACE", label: "Trace", color: "text-purple-400" },
-  { level: "INFO", label: "Info", color: "text-blue-400" },
-  { level: "WARN", label: "Warning", color: "text-warning" },
-  { level: "ERROR", label: "Error", color: "text-error" },
-  { level: "DEBUG", label: "Debug", color: "text-text-dimmed" },
+const allLogLevels: { level: LogLevelValue; label: string }[] = [
+  { level: "TRACE", label: "Trace" },
+  { level: "INFO", label: "Info" },
+  { level: "WARN", label: "Warning" },
+  { level: "ERROR", label: "Error" },
+  { level: "DEBUG", label: "Debug" },
 ];
 
 // In the future we might add other levels or change which are available
@@ -28,23 +28,6 @@ function getAvailableLevels(): typeof allLogLevels {
   return allLogLevels;
 }
 
-function getLevelBadgeColor(level: LogLevel): string {
-  switch (level) {
-    case "ERROR":
-      return "text-error bg-error/10 border-error/20";
-    case "WARN":
-      return "text-warning bg-warning/10 border-warning/20";
-    case "TRACE":
-      return "text-purple-400 bg-purple-500/10 border-purple-500/20";
-    case "DEBUG":
-      return "text-text-dimmed bg-background-raised border-border-bright";
-    case "INFO":
-      return "text-blue-400 bg-blue-500/10 border-blue-500/20";
-    default:
-      return "text-text-dimmed bg-background-hover border-grid-bright";
-  }
-}
-
 const shortcut = { key: "l" };
 
 export function LogsLevelFilter() {
@@ -93,14 +76,9 @@ function LevelDropdown({ trigger }: { trigger: ReactNode }) {
               value={item.level}
               shortcut={shortcutFromIndex(index, { shortcutsEnabled: true })}
             >
-              <span
-                className={cn(
-                  "inline-flex items-center rounded border px-1.5 py-0.5 text-xs font-medium uppercase",
-                  getLevelBadgeColor(item.level)
-                )}
-              >
-                {item.level}
-              </span>
+              {/* The same chip the rows use, so the dropdown can't drift from the list */}
+              <LogLevel level={item.level} />
+              <span className="sr-only">{item.label}</span>
             </SelectItem>
           ))}
         </SelectList>

apps/webapp/app/components/logs/LogsTable.tsx

@@ -76,6 +76,7 @@ export function LogsTable({
   // Show load more spinner only after 0.2 seconds of loading time
   useEffect(() => {
     if (!isLoadingMore) {
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setShowLoadMoreSpinner(false);
       return;
     }
@@ -220,7 +221,7 @@ export function LogsTable({
 }
 
 function BlankState({ isLoading, onRefresh }: { isLoading?: boolean; onRefresh?: () => void }) {
-  if (isLoading) return <TableBlankRow colSpan={6}></TableBlankRow>;
+  if (isLoading) return <TableBlankRow colSpan={6} />;
 
   const handleRefresh = onRefresh ?? (() => window.location.reload());
 

apps/webapp/app/components/metrics/MiniLineChart.tsx

@@ -44,7 +44,7 @@ export type MiniLineChartProps = {
   throttled?: number[];
   /** Tooltip wording for the overlay buckets. Null omits the overlay line. */
   overlayLabel?: string | null;
-  /** Epoch ms of the first bucket's start. When omitted, the last bucket is anchored to now. */
+  /** Epoch ms of the first bucket's start. */
   bucketStartMs?: number;
   /** Width of each bucket in ms. Defaults to one hour. */
   bucketIntervalMs?: number;
@@ -92,7 +92,12 @@ export function MiniLineChart({
   showPeak = true,
 }: MiniLineChartProps) {
   const hasPeakOverride = peakOverride !== undefined;
-  if (!data || data.length === 0 || (data.every((v) => v === 0) && !hasPeakOverride)) {
+  if (
+    !data ||
+    data.length === 0 ||
+    bucketStartMs === undefined ||
+    (data.every((v) => v === 0) && !hasPeakOverride)
+  ) {
     return <span className="text-text-dimmed">–</span>;
   }
 
@@ -103,11 +108,9 @@ export function MiniLineChart({
   const max = Math.max(...data);
   const peak = peakOverride ?? max;
 
-  // Map each bucket to a dated point so the tooltip can show the window it represents. Buckets are
-  // `intervalMs` wide; if the caller didn't pass the first bucket's start, anchor the last bucket to
-  // now (hourly default).
+  // Map each bucket to a dated point so the tooltip can show the window it represents.
   const intervalMs = bucketIntervalMs ?? 3600_000;
-  const startMs = bucketStartMs ?? Date.now() - (data.length - 1) * intervalMs;
+  const startMs = bucketStartMs;
   const chartData: MiniLineChartDatum[] = data.map((count, i) => {
     const t = throttled?.[i] ?? 0;
     // Extend the mask one bucket forward (a segment needs both endpoints non-null), so even a

apps/webapp/app/components/metrics/SaveToDashboardDialog.tsx

@@ -88,6 +88,7 @@ export function SaveToDashboardDialog({
   useEffect(() => {
     if (customDashboards.length > 0 && !selectedDashboardId) {
       const available = customDashboards.find((d) => d.widgetCount < widgetLimit);
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setSelectedDashboardId(available?.friendlyId ?? customDashboards[0].friendlyId);
     }
   }, [customDashboards, selectedDashboardId, widgetLimit]);

apps/webapp/app/components/navigation/AppearanceMenuItem.tsx

@@ -0,0 +1,73 @@
+import { EllipsisHorizontalIcon } from "@heroicons/react/20/solid";
+import { useFetcher } from "@remix-run/react";
+import { useEffect } from "react";
+import { useTypedRouteLoaderData } from "remix-typedjson";
+import { ToggleSwitchIcon } from "~/assets/icons/ToggleSwitchIcon";
+import { PopoverMenuItem } from "~/components/primitives/Popover";
+import { THEME_OPTIONS } from "~/components/themeOptions";
+import { applyThemePreference } from "~/hooks/useSystemThemeSync";
+import { type loader as rootLoader } from "~/root";
+import { accountPath } from "~/utils/pathBuilder";
+import { normalizeThemePreference, type ThemePreference } from "~/utils/themePreference";
+import { SideMenuPopoverSubMenu } from "./SideMenuPopoverSubMenu";
+import { SIDE_MENU_POPOVER_ITEM_ICON, SIDE_MENU_POPOVER_ITEM_LABEL } from "./sideMenuTypes";
+
+const THEME_ACTION_PATH = "/resources/preferences/theme";
+
+export function AppearanceMenuItem() {
+  const rootData = useTypedRouteLoaderData<typeof rootLoader>("root");
+  const fetcher = useFetcher<{ success?: boolean }>();
+  const savedTheme = rootData?.themePreference;
+  const systemThemes = rootData?.systemThemes;
+
+  // A failed write would otherwise leave the optimistic theme on screen.
+  useEffect(() => {
+    if (fetcher.state !== "idle" || !fetcher.data || fetcher.data.success || !savedTheme) return;
+    applyThemePreference(savedTheme, systemThemes);
+  }, [fetcher.state, fetcher.data, savedTheme, systemThemes]);
+
+  if (!rootData?.showThemeSwitcher) {
+    return null;
+  }
+
+  const pendingTheme = fetcher.formData?.get("theme");
+  const theme =
+    typeof pendingTheme === "string"
+      ? normalizeThemePreference(pendingTheme)
+      : rootData.themePreference;
+
+  const pickTheme = (value: ThemePreference) => {
+    // Dismissing the popover unmounts this row, and an unmounted fetcher's
+    // revalidation is dropped, so apply the theme here rather than waiting.
+    applyThemePreference(value, rootData.systemThemes);
+    fetcher.submit({ theme: value }, { method: "post", action: THEME_ACTION_PATH });
+  };
+
+  return (
+    <SideMenuPopoverSubMenu title="Appearance" icon={ToggleSwitchIcon} contentClassName="min-w-36">
+      <div className="flex flex-col gap-1 p-1">
+        {THEME_OPTIONS.map((option) => (
+          <PopoverMenuItem
+            key={option.value}
+            title={option.label}
+            icon={option.icon}
+            leadingIconClassName={SIDE_MENU_POPOVER_ITEM_ICON}
+            className={SIDE_MENU_POPOVER_ITEM_LABEL}
+            isSelected={theme === option.value}
+            onClick={() => pickTheme(option.value)}
+          />
+        ))}
+      </div>
+      <div className="flex flex-col gap-1 border-t border-grid-bright p-1">
+        <PopoverMenuItem
+          to={accountPath()}
+          title="More options"
+          icon={EllipsisHorizontalIcon}
+          leadingIconClassName={SIDE_MENU_POPOVER_ITEM_ICON}
+          className={SIDE_MENU_POPOVER_ITEM_LABEL}
+          isSelected={!THEME_OPTIONS.some((option) => option.value === theme)}
+        />
+      </div>
+    </SideMenuPopoverSubMenu>
+  );
+}

apps/webapp/app/components/navigation/CustomizeSidebarDialog.tsx

@@ -45,6 +45,8 @@ export type SidebarCustomizationPayload = {
   sectionItemOrder: Record<string, string[]> | null;
   favorites?: Array<{ id: string; label: string }>;
   removedFavoriteIds?: string[];
+  /** Item ids this dialog rendered, so the write leaves ids it never saw alone. */
+  knownItemIds: string[];
 };
 
 type DialogState = {
@@ -248,6 +250,7 @@ export function CustomizeSidebarDialog({
         ? favoriteOrder.map((id) => ({ id, label: state.labels[id] ?? "" }))
         : undefined,
       removedFavoriteIds: state.removed.length > 0 ? state.removed : undefined,
+      knownItemIds: sections.flatMap((section) => section.items.map((item) => item.id)),
     };
 
     onConfirm(payload);

apps/webapp/app/components/navigation/DashboardDialogs.tsx

@@ -52,6 +52,7 @@ function useCreateDashboard({
 
   useEffect(() => {
     if (navigation.formAction === formAction && navigation.state === "loading") {
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setIsOpen(false);
     }
   }, [navigation.formAction, navigation.state, formAction]);

apps/webapp/app/components/navigation/EnvironmentSelector.tsx

@@ -195,7 +195,7 @@ export function EnvironmentSelector({
                       className={ENV_POPOVER_ITEM_LABEL}
                       iconClassName={ENV_POPOVER_ITEM_ICON}
                     />
-                    <span className={cn("text-indigo-500", ENV_POPOVER_ITEM_LABEL)}>Upgrade</span>
+                    <span className={cn("text-text-link", ENV_POPOVER_ITEM_LABEL)}>Upgrade</span>
                   </div>
                 }
                 isSelected={false}
@@ -213,7 +213,7 @@ export function EnvironmentSelector({
                       className={ENV_POPOVER_ITEM_LABEL}
                       iconClassName={ENV_POPOVER_ITEM_ICON}
                     />
-                    <span className={cn("text-indigo-500", ENV_POPOVER_ITEM_LABEL)}>Upgrade</span>
+                    <span className={cn("text-text-link", ENV_POPOVER_ITEM_LABEL)}>Upgrade</span>
                   </div>
                 }
                 isSelected={false}
@@ -249,6 +249,7 @@ function Branches({
   }, []);
 
   useEffect(() => {
+    // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
     setMenuOpen(false);
   }, [navigation.location?.pathname]);
 

apps/webapp/app/components/navigation/FavoritePageButton.tsx

@@ -1,23 +1,14 @@
 import { StarIcon as StarIconOutline } from "@heroicons/react/24/outline";
 import { StarIcon as StarIconSolid } from "@heroicons/react/20/solid";
-import { useFetcher, useLocation, useSearchParams } from "@remix-run/react";
+import { useLocation, useSearchParams } from "@remix-run/react";
 import { useEffect } from "react";
-import { useIsImpersonating } from "~/hooks/useOrganizations";
 import { useShortcutKeys } from "~/hooks/useShortcutKeys";
 import { useOptionalUser } from "~/hooks/useUser";
 import { cn } from "~/utils/cn";
 import { Button } from "../primitives/Buttons";
 import { ShortcutKey } from "../primitives/ShortcutKey";
 import { SimpleTooltip } from "../primitives/Tooltip";
-import {
-  buildFavoriteLabel,
-  canonicalFavoriteUrl,
-  FAVORITE_SEARCH_PARAM,
-  FAVORITES_ACTION_PATH,
-  favoritePageUrl,
-  resolvePageMeta,
-  useFavorites,
-} from "./favoritePages";
+import { FAVORITE_SEARCH_PARAM, useFavoritePageToggle, useFavorites } from "./favoritePages";
 
 /**
  * The star in the page header that favorites the current page (full URL, including filters and
@@ -31,15 +22,10 @@ export function FavoritePageButton({
   className?: string;
 }) {
   const user = useOptionalUser();
-  const isImpersonating = useIsImpersonating();
   const location = useLocation();
   const favorites = useFavorites();
-  const fetcher = useFetcher();
   const [, setSearchParams] = useSearchParams();
-
-  // The marker param and pagination position never count toward URL identity, so paging through
-  // a favorited view keeps the same favorite (and never saves a soon-stale cursor)
-  const url = favoritePageUrl(location.pathname, location.search);
+  const { isFavorited, pageName, canFavorite, toggle } = useFavoritePageToggle(pageTitle);
 
   // A marker that isn't one of this user's favorites came from a shared link (or a favorite
   // that's since been removed): clean it from the URL so the page behaves like a normal visit.
@@ -58,34 +44,8 @@ export function FavoritePageButton({
       { replace: true, preventScrollReset: true }
     );
   }, [hasForeignMarker, setSearchParams]);
-  const existing = favorites.find((favorite) => canonicalFavoriteUrl(favorite.url) === url);
-  const isFavorited = existing !== undefined;
-  // The tooltip names the favorite: its custom name once saved, else the label saving would use
-  // (which includes detail-page ids and filter summaries, e.g. "Runs: Completed, last 7d")
-  const pageName =
-    existing?.label ?? buildFavoriteLabel(location.pathname, location.search, pageTitle);
 
-  const toggle = () => {
-    if (existing) {
-      fetcher.submit(
-        { intent: "remove", id: existing.id },
-        { method: "POST", action: FAVORITES_ACTION_PATH }
-      );
-    } else {
-      fetcher.submit(
-        {
-          intent: "add",
-          id: crypto.randomUUID(),
-          url,
-          label: buildFavoriteLabel(location.pathname, location.search, pageTitle),
-          icon: resolvePageMeta(location.pathname).icon,
-        },
-        { method: "POST", action: FAVORITES_ACTION_PATH }
-      );
-    }
-  };
-
-  const showButton = user !== undefined && !isImpersonating;
+  const showButton = canFavorite;
 
   // Option+F reports event.key "ƒ" on macOS, but the hotkeys matcher falls back to the physical
   // event.code ("KeyF"), so the standard hook captures it; exact modifier matching keeps the

apps/webapp/app/components/navigation/FavoritesSection.tsx

@@ -49,6 +49,7 @@ export function FavoriteMenuItem({
 
   // Watch search too: navigating to a favorite can change only the search on the same pathname
   useEffect(() => {
+    // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
     setMenuOpen(false);
   }, [navigation.location?.pathname, navigation.location?.search]);
 

apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx

@@ -1,6 +1,6 @@
 import { ArrowUpRightIcon } from "@heroicons/react/20/solid";
 import { motion } from "framer-motion";
-import { Fragment, useState } from "react";
+import { useState } from "react";
 import { BookIcon } from "~/assets/icons/BookIcon";
 import { BulbIcon } from "~/assets/icons/BulbIcon";
 import { DropdownIcon } from "~/assets/icons/DropdownIcon";
@@ -129,7 +129,7 @@ export function HelpAndFeedback({
           sideOffset={isCollapsed ? 8 : 4}
           align="start"
         >
-          <Fragment>
+          <>
             {/* This popover lives in the app layout, above both AI hosts, so it opens them
                 through their open-request bridges rather than context. The hosts register the
                 keystrokes; this only shows them. */}
@@ -232,7 +232,7 @@ export function HelpAndFeedback({
                 target="_blank"
               />
             </div>
-          </Fragment>
+          </>
         </PopoverContent>
       </Popover>
       {/* Hosted outside the popover so closing the menu can't unmount the form mid-submit. */}

apps/webapp/app/components/navigation/NotificationCard.tsx

@@ -2,6 +2,7 @@ import { XMarkIcon } from "@heroicons/react/20/solid";
 import { useLayoutEffect, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import { cn } from "~/utils/cn";
+import { textLinkClassName } from "~/components/primitives/TextLink";
 
 export function NotificationCard({
   title,
@@ -87,7 +88,7 @@ export function NotificationCard({
           <button
             type="button"
             onClick={handleToggleExpand}
-            className="relative z-20 mt-0.5 text-xs text-indigo-400 hover:text-indigo-300"
+            className={cn(textLinkClassName(), "relative z-20 mt-0.5 text-xs")}
           >
             {isExpanded ? "Show less" : "Show more"}
           </button>
@@ -109,7 +110,7 @@ function getMarkdownComponents(onLinkClick?: () => void) {
         href={href}
         target="_blank"
         rel="noopener noreferrer"
-        className="relative z-20 text-indigo-400 underline transition-colors hover:text-indigo-300"
+        className={cn(textLinkClassName(), "relative z-20")}
         onClick={(e) => {
           e.stopPropagation();
           onLinkClick?.();

apps/webapp/app/components/navigation/NotificationPanel.tsx

@@ -42,60 +42,70 @@ export function NotificationPanel({
     notifications: Notification[];
   };
   const [dismissedIds, setDismissedIds] = useState<Set<string>>(new Set());
-  const dismissFetcher = useFetcher();
+  const { submit: submitDismiss } = useFetcher();
   const seenIdsRef = useRef<Set<string>>(new Set());
-  const seenFetcher = useFetcher();
+  const { submit: submitSeen } = useFetcher();
   const clickedIdsRef = useRef<Set<string>>(new Set());
-  const clickFetcher = useFetcher();
+  const { submit: submitClick } = useFetcher();
 
   const visibleNotifications = notifications.filter((n) => !dismissedIds.has(n.id));
   const notification = visibleNotifications[0] ?? null;
+  const notificationId = notification?.id;
 
-  const handleDismiss = useCallback((id: string) => {
-    setDismissedIds((prev) => new Set(prev).add(id));
+  const handleDismiss = useCallback(
+    (id: string) => {
+      setDismissedIds((prev) => new Set(prev).add(id));
 
-    dismissFetcher.submit(
-      {},
-      {
-        method: "POST",
-        action: `/resources/platform-notifications/${id}/dismiss`,
-      }
-    );
-  }, []);
+      submitDismiss(
+        {},
+        {
+          method: "POST",
+          action: `/resources/platform-notifications/${id}/dismiss`,
+        }
+      );
+    },
+    [submitDismiss]
+  );
 
-  const fireClickBeacon = useCallback((id: string) => {
-    if (clickedIdsRef.current.has(id)) return;
-    clickedIdsRef.current.add(id);
+  const fireClickBeacon = useCallback(
+    (id: string) => {
+      if (clickedIdsRef.current.has(id)) return;
+      clickedIdsRef.current.add(id);
 
-    clickFetcher.submit(
-      {},
-      {
-        method: "POST",
-        action: `/resources/platform-notifications/${id}/clicked`,
-      }
-    );
-  }, []);
+      submitClick(
+        {},
+        {
+          method: "POST",
+          action: `/resources/platform-notifications/${id}/clicked`,
+        }
+      );
+    },
+    [submitClick]
+  );
 
   // Fire seen beacon
-  const fireSeenBeacon = useCallback((n: Notification) => {
-    if (seenIdsRef.current.has(n.id)) return;
-    seenIdsRef.current.add(n.id);
+  const fireSeenBeacon = useCallback(
+    (id: string) => {
+      if (seenIdsRef.current.has(id)) return;
+      seenIdsRef.current.add(id);
 
-    seenFetcher.submit(
-      {},
-      {
-        method: "POST",
-        action: `/resources/platform-notifications/${n.id}/seen`,
-      }
-    );
-  }, []);
+      submitSeen(
+        {},
+        {
+          method: "POST",
+          action: `/resources/platform-notifications/${id}/seen`,
+        }
+      );
+    },
+    [submitSeen]
+  );
 
   // Beacon current notification on mount
   useEffect(() => {
-    if (notification && !hasIncident) {
-      fireSeenBeacon(notification);
+    if (notificationId && !hasIncident) {
+      fireSeenBeacon(notificationId);
     }
-  }, [notification?.id, hasIncident]);
+  }, [notificationId, hasIncident, fireSeenBeacon]);
 
   if (!notification) {
     return null;

apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx

@@ -2,6 +2,7 @@ import { ArrowLeftIcon } from "@heroicons/react/24/solid";
 import { BellIcon } from "~/assets/icons/BellIcon";
 import { ChainLinkIcon } from "~/assets/icons/ChainLinkIcon";
 import { CreditCardIcon } from "~/assets/icons/CreditCardIcon";
+import { FolderOpenIcon } from "~/assets/icons/FolderOpenIcon";
 import { PadlockIcon } from "~/assets/icons/PadlockIcon";
 import { UsageIcon } from "~/assets/icons/UsageIcon";
 import { RolesIcon } from "~/assets/icons/RolesIcon";
@@ -15,6 +16,7 @@ import { type MatchedOrganization } from "~/hooks/useOrganizations";
 import { cn } from "~/utils/cn";
 import {
   organizationPath,
+  organizationProjectsPath,
   organizationRolesPath,
   organizationSettingsPath,
   organizationSlackIntegrationPath,
@@ -49,11 +51,13 @@ export function OrganizationSettingsSideMenu({
   buildInfo,
   isUsingPlugin,
   isSsoUsingPlugin,
+  hasProjectRuntimeUpdate,
 }: {
   organization: MatchedOrganization;
   buildInfo: BuildInfo;
   isUsingPlugin: boolean;
   isSsoUsingPlugin: boolean;
+  hasProjectRuntimeUpdate: boolean;
 }) {
   const { isManagedCloud } = useFeatures();
   const featureFlags = useFeatureFlags();
@@ -127,6 +131,22 @@ export function OrganizationSettingsSideMenu({
               ) : null}
             </>
           )}
+          <SideMenuItem
+            name="Projects"
+            icon={FolderOpenIcon}
+            activeIconColor="text-text-bright"
+            inactiveIconColor="text-text-dimmed"
+            to={organizationProjectsPath(organization)}
+            data-action="projects"
+            badge={
+              hasProjectRuntimeUpdate ? (
+                <>
+                  <span aria-hidden className="size-2 shrink-0 rounded-full bg-warning" />
+                  <span className="sr-only">Runtime update available.</span>
+                </>
+              ) : undefined
+            }
+          />
           <SideMenuItem
             name="Team"
             icon={UserGroupIcon}