Skip to content

feat(webapp): Themes + contrast settings update - #4206

Merged
kathiekiwi merged 163 commits into
mainfrom
feat/light-theme
Aug 3, 2026
Merged

feat(webapp): Themes + contrast settings update#4206
kathiekiwi merged 163 commits into
mainfrom
feat/light-theme

Conversation

@kathiekiwi

@kathiekiwi kathiekiwi commented Jul 9, 2026

Copy link
Copy Markdown
Collaborator

Adds System Preferences, Dark and Light themes, gated by the hasThemeSwitcher feature flag (off by default — dark stays the default theme for everyone).

Old theme is now "Classic"and set as default.
"System preferences" theme has both Light and Dark modes and uses your laptop settings to use a correct one.
It has less color accents (specifically less colored text), and they are the same for both modes, only grayscale values change between them. And Light/Dark themes can be used separately.

New Contrast setting is available for System Preferences, Dark and Light themes - it changes the contrast for the whole app. All new visual Settings live in Account.

Screenshot 2026-07-23 at 22 34 17 Screenshot 2026-07-23 at 22 38 13

Light theme with 0 -> 100 Contrast

Screenshot 2026-07-23 at 22 42 35 Screenshot 2026-07-23 at 22 42 17

Dark theme with 0 -> 100 Contrast

Screenshot 2026-07-23 at 22 43 06 Screenshot 2026-07-23 at 22 42 00

@changeset-bot

changeset-bot Bot commented Jul 9, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: a792ebb

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@coderabbitai

coderabbitai Bot commented Jul 9, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

Walkthrough

Adds feature-gated account theme selection with persisted dark, light, system, classic, and contrast preferences. Extends runtime theme tokens and light-mode styling across the webapp, updates controls, status displays, routes, icons, and debug identifiers, and adds queue-metrics simulation and seeding tooling. Regenerates model pricing and catalog files with formatting-only changes.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Description check ⚠️ Warning The description explains the feature and includes screenshots, but it omits the issue reference, checklist, testing steps, and changelog section. Add the required template sections, including the issue reference, completed checklist, testing steps, and a concise changelog entry.
Docstring Coverage ⚠️ Warning Docstring coverage is 13.49% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly identifies the webapp theme and contrast settings changes.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches 💡 2
📝 Generate docstrings 💡
  • Create stacked PR
  • Commit on current branch
⚔️ Resolve merge conflicts 💡
  • Resolve merge conflict in branch feat/light-theme
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/light-theme

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@samejr samejr added the preview label Jul 9, 2026
@trigger-dot-bot

trigger-dot-bot Bot commented Jul 9, 2026

Copy link
Copy Markdown

Preview Deployment

Status Preview Commit Updated
⚪ Removed a792ebb Aug 3, 17:34 UTC

@pkg-pr-new

pkg-pr-new Bot commented Jul 11, 2026

Copy link
Copy Markdown

Open in StackBlitz

@trigger.dev/build

npm i https://pkg.pr.new/@trigger.dev/build@a8fa12f

trigger.dev

npm i https://pkg.pr.new/trigger.dev@a8fa12f

@trigger.dev/core

npm i https://pkg.pr.new/@trigger.dev/core@a8fa12f

@trigger.dev/python

npm i https://pkg.pr.new/@trigger.dev/python@a8fa12f

@trigger.dev/react-hooks

npm i https://pkg.pr.new/@trigger.dev/react-hooks@a8fa12f

@trigger.dev/redis-worker

npm i https://pkg.pr.new/@trigger.dev/redis-worker@a8fa12f

@trigger.dev/rsc

npm i https://pkg.pr.new/@trigger.dev/rsc@a8fa12f

@trigger.dev/schema-to-json

npm i https://pkg.pr.new/@trigger.dev/schema-to-json@a8fa12f

@trigger.dev/sdk

npm i https://pkg.pr.new/@trigger.dev/sdk@a8fa12f

commit: a8fa12f

coderabbitai[bot]

This comment was marked as resolved.

@kathiekiwi
kathiekiwi marked this pull request as ready for review July 11, 2026 22:04
devin-ai-integration[bot]

This comment was marked as resolved.

Workspace packages resolve to TS source via the @triggerdotdev/source
condition; server.ts keeps the Express/cluster/ws wiring with vite
middleware in dev and the ESM server bundle in prod. Fixes surfaced by
the stricter ESM pipeline: destructured route exports, server-only
imports in routes/components, CJS interop (redlock, cuid, regression),
browser node-global shims, font asset handling, and a websockets TDZ.
Restores the unit-testable export (removed to satisfy the Vite route
export rules) by extracting the helper out of the route file.
createActionApiRoute's loader handles CORS OPTIONS preflight; the
destructured exports never surfaced it (pre-existing), do it now.
devin-ai-integration[bot]

This comment was marked as resolved.

devin-ai-integration[bot]

This comment was marked as resolved.

coderabbitai[bot]

This comment was marked as resolved.

- semantic token overrides for light, trigger.light editor/code palettes
- Interface theme dropdown on /account, gated by hasThemeSwitcher flag
- unify light surfaces: buttons, inputs, radios, checkboxes, tabs, clipboard fields
- fix checkbox :read-only override and useThemeColor hydration mismatch
- resolve Firefox panel animation check from request UA
- re-resolve theme colors when data-theme changes
- narrow jsonb_set write for theme preference
- opaque amber for reasoning text in light mode
- keep dark-theme switch/radio thumb colors, white only in light
- pick avatar letter color by background luminance
- seed required preference fields when jsonb column is null
devin-ai-integration[bot]

This comment was marked as resolved.

Base automatically changed from feat/queue-metrics-and-health to main July 29, 2026 15:45
# Conflicts:
#	.server-changes/agent-detail-metrics-layout.md
#	.server-changes/paginate-concurrency-keys-table.md
#	.server-changes/queue-metrics-dashboard.md
#	apps/webapp/app/components/primitives/UsageSparkline.tsx
#	apps/webapp/app/components/query/QueryEditor.tsx
#	apps/webapp/app/components/queues/QueueControls.tsx
#	apps/webapp/app/components/queues/QueueMetricCards.tsx
#	apps/webapp/app/env.server.ts
#	apps/webapp/app/hooks/useMetricResourceQuery.ts
#	apps/webapp/app/presenters/v3/QueueListPresenter.server.ts
#	apps/webapp/app/presenters/v3/QueueMetricsPresenter.server.ts
#	apps/webapp/app/presenters/v3/RunQueueMetricsPresenter.server.ts
#	apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/ExamplesContent.tsx
#	apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/TableSchemaContent.tsx
#	apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx
#	apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues_.$queueParam/route.tsx
#	apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.standard.$taskParam/route.tsx
#	apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx
#	apps/webapp/app/routes/api.v1.query.schema.ts
#	apps/webapp/app/routes/resources.metric.tsx
#	apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsx
#	apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query.ai-generate.tsx
#	apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
#	apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsx
#	apps/webapp/app/routes/resources.queues.concurrency-keys.ts
#	apps/webapp/app/services/queryService.server.ts
#	apps/webapp/app/tailwind.css
#	apps/webapp/app/v3/querySchemas.ts
#	apps/webapp/app/v3/queueMetrics.server.ts
#	internal-packages/clickhouse/src/client/tsql.ts
#	internal-packages/run-engine/src/engine/systems/enqueueSystem.ts
#	internal-packages/tsql/src/query/schema.ts
devin-ai-integration[bot]

This comment was marked as resolved.

coderabbitai[bot]

This comment was marked as resolved.

- restore white spinners on primary buttons (GitHub connect, Vercel onboarding)
- resnap the contrast preview to the stored value when a save fails
- the dark backdrop reliably hides on the Light theme
- suppressHydrationWarning on <html> for the pre-paint system-theme script
- aria-labels for the theme select and contrast slider
- lowercase currentcolor for stylelint
- DashboardPreferences schema moves to a pure module so tests skip the server graph
- user-facing wording for the release note
An unfocused editor kept the resting cursor's line highlighted, which reads
as a gray bar across the top of the query editor on page load.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
apps/webapp/app/components/primitives/Select.tsx (1)

699-700: 🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick win

Make the Ariakit store hooks unconditional.

combobox?.useState(...) still calls React hooks conditionally, so hook order changes if useComboboxContext() returns different values across rerenders. Use Ariakit.useStoreState(combobox, "open") and Ariakit.useStoreState(combobox, "baseElement") instead.


ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 5415243a-b321-42a1-a3cf-c9b7f6973db3

📥 Commits

Reviewing files that changed from the base of the PR and between 57769c5 and 7c1561f.

📒 Files selected for processing (22)
  • .server-changes/light-theme.md
  • apps/webapp/app/components/BackgroundWrapper.tsx
  • apps/webapp/app/components/admin/debugTooltip.tsx
  • apps/webapp/app/components/code/codeMirrorTheme.ts
  • apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
  • apps/webapp/app/components/primitives/Buttons.tsx
  • apps/webapp/app/components/primitives/Select.tsx
  • apps/webapp/app/components/primitives/Slider.tsx
  • apps/webapp/app/components/queues/QueueMetricCards.tsx
  • apps/webapp/app/root.tsx
  • apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx
  • apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues_.$queueParam/route.tsx
  • apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.regions/route.tsx
  • apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.sso/route.tsx
  • apps/webapp/app/routes/account._index/route.tsx
  • apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsx
  • apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
  • apps/webapp/app/services/dashboardPreferences.server.ts
  • apps/webapp/app/tailwind.css
  • apps/webapp/app/utils/dashboardPreferences.ts
  • apps/webapp/package.json
  • apps/webapp/test/themePreference.test.ts
🚧 Files skipped from review as they are similar to previous changes (15)
  • apps/webapp/package.json
  • apps/webapp/app/components/queues/QueueMetricCards.tsx
  • apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsx
  • apps/webapp/app/components/admin/debugTooltip.tsx
  • apps/webapp/app/components/primitives/Buttons.tsx
  • apps/webapp/app/components/BackgroundWrapper.tsx
  • apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
  • apps/webapp/app/root.tsx
  • .server-changes/light-theme.md
  • apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.sso/route.tsx
  • apps/webapp/test/themePreference.test.ts
  • apps/webapp/app/routes/account._index/route.tsx
  • apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.regions/route.tsx
  • apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx
  • apps/webapp/app/routes/app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues.$queueParam/route.tsx
📜 Review details
⏰ Context from checks skipped due to timeout. (14)
  • GitHub Check: webapp / 🧪 Unit Tests: Webapp (11, 12)
  • GitHub Check: webapp / 🧪 Unit Tests: Webapp (7, 12)
  • GitHub Check: webapp / 🧪 Unit Tests: Webapp (3, 12)
  • GitHub Check: webapp / 🧪 Unit Tests: Webapp (12, 12)
  • GitHub Check: webapp / 🧪 Unit Tests: Webapp (8, 12)
  • GitHub Check: webapp / 🧪 Unit Tests: Webapp (2, 12)
  • GitHub Check: webapp / 🧪 Unit Tests: Webapp (5, 12)
  • GitHub Check: webapp / 🧪 Unit Tests: Webapp (1, 12)
  • GitHub Check: webapp / 🧪 Unit Tests: Webapp (9, 12)
  • GitHub Check: webapp / 🧪 Unit Tests: Webapp (6, 12)
  • GitHub Check: webapp / 🧪 Unit Tests: Webapp (10, 12)
  • GitHub Check: webapp / 🧪 Unit Tests: Webapp (4, 12)
  • GitHub Check: e2e-webapp / 🧪 E2E Tests: Webapp
  • GitHub Check: internal / 🧪 Unit Tests: Internal
🧰 Additional context used
📓 Path-based instructions (8)
**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{ts,tsx}: Use types over interfaces for TypeScript
Avoid using enums; prefer string unions or const objects instead

**/*.{ts,tsx}: Prefer static imports over dynamic import(); use dynamic imports only for unresolvable circular dependencies, genuine performance code splitting, or conditional runtime loading.
Import Trigger.dev tasks from @trigger.dev/sdk; never use @trigger.dev/sdk/v3 or deprecated client.defineJob.
Add agentcrumbs while writing code using approved namespaces; mark lines with // @Crumbs or blocks with `// `#region` `@crumbs, and strip them before merging.

Files:

  • apps/webapp/app/components/code/codeMirrorTheme.ts
  • apps/webapp/app/components/primitives/Slider.tsx
  • apps/webapp/app/components/primitives/Select.tsx
  • apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
  • apps/webapp/app/utils/dashboardPreferences.ts
  • apps/webapp/app/services/dashboardPreferences.server.ts
{packages/core,apps/webapp}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use zod for validation in packages/core and apps/webapp

Files:

  • apps/webapp/app/components/code/codeMirrorTheme.ts
  • apps/webapp/app/components/primitives/Slider.tsx
  • apps/webapp/app/components/primitives/Select.tsx
  • apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
  • apps/webapp/app/utils/dashboardPreferences.ts
  • apps/webapp/app/services/dashboardPreferences.server.ts
**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use function declarations instead of default exports

Files:

  • apps/webapp/app/components/code/codeMirrorTheme.ts
  • apps/webapp/app/components/primitives/Slider.tsx
  • apps/webapp/app/components/primitives/Select.tsx
  • apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
  • apps/webapp/app/utils/dashboardPreferences.ts
  • apps/webapp/app/services/dashboardPreferences.server.ts
**/*.ts

📄 CodeRabbit inference engine (.cursor/rules/otel-metrics.mdc)

**/*.ts: When creating or editing OTEL metrics (counters, histograms, gauges), ensure metric attributes have low cardinality by using only enums, booleans, bounded error codes, or bounded shard IDs
Do not use high-cardinality attributes in OTEL metrics such as UUIDs/IDs (envId, userId, runId, projectId, organizationId), unbounded integers (itemCount, batchSize, retryCount), timestamps (createdAt, startTime), or free-form strings (errorMessage, taskName, queueName)
When exporting OTEL metrics via OTLP to Prometheus, be aware that the exporter automatically adds unit suffixes to metric names (e.g., 'my_duration_ms' becomes 'my_duration_ms_milliseconds', 'my_counter' becomes 'my_counter_total'). Account for these transformations when writing Grafana dashboards or Prometheus queries

Files:

  • apps/webapp/app/components/code/codeMirrorTheme.ts
  • apps/webapp/app/utils/dashboardPreferences.ts
  • apps/webapp/app/services/dashboardPreferences.server.ts
apps/webapp/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/webapp.mdc)

apps/webapp/**/*.{ts,tsx}: Access environment variables through the env export of env.server.ts instead of directly accessing process.env
Use subpath exports from @trigger.dev/core package instead of importing from the root @trigger.dev/core path

Do not reintroduce the removed v1 execution path; RunEngineVersion.V1 branches may only reject or finalize gracefully so v3 clients receive a clean 4xx, never a 5xx.

Files:

  • apps/webapp/app/components/code/codeMirrorTheme.ts
  • apps/webapp/app/components/primitives/Slider.tsx
  • apps/webapp/app/components/primitives/Select.tsx
  • apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
  • apps/webapp/app/utils/dashboardPreferences.ts
  • apps/webapp/app/services/dashboardPreferences.server.ts
apps/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

For apps, use typecheck for verification and never use build as the correctness check.

Files:

  • apps/webapp/app/components/code/codeMirrorTheme.ts
  • apps/webapp/app/components/primitives/Slider.tsx
  • apps/webapp/app/components/primitives/Select.tsx
  • apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
  • apps/webapp/app/utils/dashboardPreferences.ts
  • apps/webapp/app/services/dashboardPreferences.server.ts
apps/webapp/app/**/*.{ts,tsx}

📄 CodeRabbit inference engine (apps/webapp/CLAUDE.md)

apps/webapp/app/**/*.{ts,tsx}: For dashboard changes, visually verify the running Remix app with Chrome DevTools MCP, using snapshots, screenshots, interaction, and console-message checks as appropriate.
Use useCallback and useMemo only for context provider values, expensive derived data used as a dependency, or stable references required by dependency arrays; do not wrap ordinary event handlers or trivial computations.
Use named constants for sentinel or placeholder values instead of scattering raw string literals across comparisons.

Files:

  • apps/webapp/app/components/code/codeMirrorTheme.ts
  • apps/webapp/app/components/primitives/Slider.tsx
  • apps/webapp/app/components/primitives/Select.tsx
  • apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
  • apps/webapp/app/utils/dashboardPreferences.ts
  • apps/webapp/app/services/dashboardPreferences.server.ts
apps/webapp/app/**/*.ts

📄 CodeRabbit inference engine (apps/webapp/CLAUDE.md)

apps/webapp/app/**/*.ts: Never use request.signal to detect client disconnects. Use getRequestAbortSignal() from app/services/httpAsyncStorage.server.ts, which is wired to Express response close events.
Access environment variables through the env export from app/env.server.ts; never use process.env directly.
Always use Prisma findFirst instead of findUnique.
Always use the $transaction helper from ~/db.server, never call prisma.$transaction or $replica.$transaction directly. Pass isolation levels as strings, use Serializable for correctness-critical read-then-write invariants, and guard possibly undefined helper results when a definite value is required.

Files:

  • apps/webapp/app/components/code/codeMirrorTheme.ts
  • apps/webapp/app/utils/dashboardPreferences.ts
  • apps/webapp/app/services/dashboardPreferences.server.ts
🧠 Learnings (20)
📚 Learning: 2026-03-22T13:26:12.060Z
Learnt from: ericallam
Repo: triggerdotdev/trigger.dev PR: 3244
File: apps/webapp/app/components/code/TextEditor.tsx:81-86
Timestamp: 2026-03-22T13:26:12.060Z
Learning: In the triggerdotdev/trigger.dev codebase, do not flag `navigator.clipboard.writeText(...)` calls for `missing-await`/`unhandled-promise` issues. These clipboard writes are intentionally invoked without `await` and without `catch` handlers across the project; keep that behavior consistent when reviewing TypeScript/TSX files (e.g., usages like in `apps/webapp/app/components/code/TextEditor.tsx`).

Applied to files:

  • apps/webapp/app/components/code/codeMirrorTheme.ts
  • apps/webapp/app/components/primitives/Slider.tsx
  • apps/webapp/app/components/primitives/Select.tsx
  • apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
  • apps/webapp/app/utils/dashboardPreferences.ts
  • apps/webapp/app/services/dashboardPreferences.server.ts
📚 Learning: 2026-03-22T19:24:14.403Z
Learnt from: matt-aitken
Repo: triggerdotdev/trigger.dev PR: 3187
File: apps/webapp/app/v3/services/alerts/deliverErrorGroupAlert.server.ts:200-204
Timestamp: 2026-03-22T19:24:14.403Z
Learning: In the triggerdotdev/trigger.dev codebase, webhook URLs are not expected to contain embedded credentials/secrets (e.g., fields like `ProjectAlertWebhookProperties` should only hold credential-free webhook endpoints). During code review, if you see logging or inclusion of raw webhook URLs in error messages, do not automatically treat it as a credential-leak/secrets-in-logs issue by default—first verify the URL does not contain embedded credentials (for example, no username/password in the URL, no obvious secret/token query params or fragments). If the URL is credential-free per this project’s conventions, allow the logging.

Applied to files:

  • apps/webapp/app/components/code/codeMirrorTheme.ts
  • apps/webapp/app/components/primitives/Slider.tsx
  • apps/webapp/app/components/primitives/Select.tsx
  • apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
  • apps/webapp/app/utils/dashboardPreferences.ts
  • apps/webapp/app/services/dashboardPreferences.server.ts
📚 Learning: 2026-05-18T08:21:27.694Z
Learnt from: d-cs
Repo: triggerdotdev/trigger.dev PR: 3632
File: apps/webapp/sentry.server.ts:4-21
Timestamp: 2026-05-18T08:21:27.694Z
Learning: When handling Prisma error P1001 ("Can't reach database server") in TypeScript, don’t assume a single error shape. Prisma can surface P1001 via two different error classes/fields: `PrismaClientKnownRequestError` exposes it as `err.code === "P1001"` (common during mid-query connection drops), while `PrismaClientInitializationError` exposes it as `err.errorCode === "P1001"` (common on client startup failure). Therefore, predicates should use `err.code === "P1001" || err.errorCode === "P1001"`. Do not flag `err.code === "P1001"` as “unreachable/never matches,” as it is expected in production.

Applied to files:

  • apps/webapp/app/components/code/codeMirrorTheme.ts
  • apps/webapp/app/components/primitives/Slider.tsx
  • apps/webapp/app/components/primitives/Select.tsx
  • apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
  • apps/webapp/app/utils/dashboardPreferences.ts
  • apps/webapp/app/services/dashboardPreferences.server.ts
📚 Learning: 2026-05-18T08:21:27.694Z
Learnt from: d-cs
Repo: triggerdotdev/trigger.dev PR: 3632
File: apps/webapp/sentry.server.ts:4-21
Timestamp: 2026-05-18T08:21:27.694Z
Learning: When handling Prisma errors for P1001 ("Can't reach database server"), do not assume it only appears under a single property name. Prisma may surface P1001 via either `PrismaClientKnownRequestError` (`err.code === "P1001"`, e.g., mid-query connection drops) or `PrismaClientInitializationError` (`err.errorCode === "P1001"`, e.g., client startup connection failure). To reliably detect the condition, check `err.code === "P1001" || err.errorCode === "P1001"`, and avoid review rules that would incorrectly flag `err.code === "P1001"` as unreachable/never-matching.

Applied to files:

  • apps/webapp/app/components/code/codeMirrorTheme.ts
  • apps/webapp/app/components/primitives/Slider.tsx
  • apps/webapp/app/components/primitives/Select.tsx
  • apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
  • apps/webapp/app/utils/dashboardPreferences.ts
  • apps/webapp/app/services/dashboardPreferences.server.ts
📚 Learning: 2026-06-13T19:53:13.759Z
Learnt from: ericallam
Repo: triggerdotdev/trigger.dev PR: 3937
File: packages/trigger-sdk/skills/realtime-and-frontend/SKILL.md:258-260
Timestamp: 2026-06-13T19:53:13.759Z
Learning: When reviewing code that uses `trigger.dev/react-hooks`’s `useRealtimeRun`, preserve the call signature where the first argument is the full realtime handle object (not `handle.id`). This is intentional to maintain type-safety and is consistent with the official docs; do not suggest changing the first argument from the handle object to `handle.id`.

Applied to files:

  • apps/webapp/app/components/code/codeMirrorTheme.ts
  • apps/webapp/app/components/primitives/Slider.tsx
  • apps/webapp/app/components/primitives/Select.tsx
  • apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
  • apps/webapp/app/utils/dashboardPreferences.ts
  • apps/webapp/app/services/dashboardPreferences.server.ts
📚 Learning: 2026-06-17T17:13:49.929Z
Learnt from: matt-aitken
Repo: triggerdotdev/trigger.dev PR: 3948
File: apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions.$bulkActionParam/route.tsx:48-62
Timestamp: 2026-06-17T17:13:49.929Z
Learning: In triggerdotdev/trigger.dev, within `dashboardLoader`/`dashboardAction` (or similar context resolver code) whenever you resolve an organization ID from an organization slug for RBAC/enterprise authorization scope, always read from the primary Prisma client (`prisma`), not `$replica`. Using `$replica` can hit replica-lag and cause the RBAC lookup/authorization to run without the correct org scope (bypassing intended role enforcement). Implement the slug→org lookup with `prisma.organization.findFirst(...)` (or equivalent primary-client query) and add an inline comment documenting why the primary client is required (replica lag could lead to unscoped RBAC checks).

Applied to files:

  • apps/webapp/app/components/code/codeMirrorTheme.ts
  • apps/webapp/app/components/primitives/Slider.tsx
  • apps/webapp/app/components/primitives/Select.tsx
  • apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
  • apps/webapp/app/utils/dashboardPreferences.ts
  • apps/webapp/app/services/dashboardPreferences.server.ts
📚 Learning: 2026-06-23T13:04:21.413Z
Learnt from: carderne
Repo: triggerdotdev/trigger.dev PR: 4023
File: apps/webapp/app/services/upsertBranch.server.ts:14-18
Timestamp: 2026-06-23T13:04:21.413Z
Learning: In TypeScript, it’s valid to `import { type X }` and then use `typeof X` in a type-only position, e.g. `type Alias = z.infer<typeof X>`. The `type` modifier suppresses the runtime import, but the type checker still has the full exported type so `z.infer<typeof X>` can resolve correctly. In code reviews, don’t flag this as a TypeScript compile error as long as `typeof X` is used in a type context (e.g., with `z.infer`, `type` aliases, generics), not as a runtime value.

Applied to files:

  • apps/webapp/app/components/code/codeMirrorTheme.ts
  • apps/webapp/app/components/primitives/Slider.tsx
  • apps/webapp/app/components/primitives/Select.tsx
  • apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
  • apps/webapp/app/utils/dashboardPreferences.ts
  • apps/webapp/app/services/dashboardPreferences.server.ts
📚 Learning: 2026-05-12T21:04:05.815Z
Learnt from: ericallam
Repo: triggerdotdev/trigger.dev PR: 3542
File: apps/webapp/app/components/sessions/v1/SessionStatus.tsx:1-3
Timestamp: 2026-05-12T21:04:05.815Z
Learning: In this Remix + TypeScript codebase, do not flag a server/client boundary violation when a file imports only types from a module matching `*.server`.

Specifically, it’s safe to import types using `import type { Foo } from "*.server"` or `import { type Foo } from "*.server"` because TypeScript erases type-only imports at compile time and they emit no JavaScript, so they won’t cross the Remix server/client bundle boundary.

Only raise the boundary concern for value imports (e.g., `import { Foo }` without `type`, or `import Foo`), since those produce JavaScript output.

Applied to files:

  • apps/webapp/app/components/code/codeMirrorTheme.ts
  • apps/webapp/app/components/primitives/Slider.tsx
  • apps/webapp/app/components/primitives/Select.tsx
  • apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
  • apps/webapp/app/utils/dashboardPreferences.ts
  • apps/webapp/app/services/dashboardPreferences.server.ts
📚 Learning: 2026-06-25T18:21:51.905Z
Learnt from: carderne
Repo: triggerdotdev/trigger.dev PR: 4039
File: apps/webapp/app/routes/invite-revoke.tsx:0-0
Timestamp: 2026-06-25T18:21:51.905Z
Learning: During the Zod v4 migration in the triggerdotdev/trigger.dev webapp, ensure any imports from `conform-to/zod` use the Zod-4 subpath: `conform-to/zod/v4` (e.g., `import { parseWithZod } from "conform-to/zod/v4"`). Do not import from the package root `conform-to/zod`, because it is the Zod 3 implementation and may load Zod-3-only symbols (e.g., `ZodBranded`, `ZodEffects`), which can throw at module load (notably with `zod4.4.3`). This should be enforced across `apps/webapp/**/*` where helpers like `parseWithZod` and `conformZodMessage` are used.

Applied to files:

  • apps/webapp/app/components/code/codeMirrorTheme.ts
  • apps/webapp/app/components/primitives/Slider.tsx
  • apps/webapp/app/components/primitives/Select.tsx
  • apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
  • apps/webapp/app/utils/dashboardPreferences.ts
  • apps/webapp/app/services/dashboardPreferences.server.ts
📚 Learning: 2026-07-03T17:10:21.498Z
Learnt from: 0ski
Repo: triggerdotdev/trigger.dev PR: 4148
File: apps/webapp/app/models/orgMember.server.ts:149-168
Timestamp: 2026-07-03T17:10:21.498Z
Learning: In triggerdotdev/trigger.dev, `User.email` (Prisma schema: `internal-packages/database/prisma/schema.prisma`) currently does NOT use `citext` and does NOT have a `lower(email)` functional unique index. Therefore, do not introduce Prisma queries like `where: { email: { equals: <value>, mode: "insensitive" } }` (or any case-insensitive lookup) against `User.email`, because it can force sequential scans of the `users` table under load. During review, ensure email is normalized (e.g., lowercased/trimmed) before both writes and subsequent lookups, and if true case-insensitive behavior/uniqueness is required, implement it via a separate app-wide migration (e.g., switch to `citext` and/or add a functional unique index with backfill) rather than bolting it onto individual feature PRs.

Applied to files:

  • apps/webapp/app/components/code/codeMirrorTheme.ts
  • apps/webapp/app/components/primitives/Slider.tsx
  • apps/webapp/app/components/primitives/Select.tsx
  • apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
  • apps/webapp/app/utils/dashboardPreferences.ts
  • apps/webapp/app/services/dashboardPreferences.server.ts
📚 Learning: 2026-06-04T18:16:35.386Z
Learnt from: nicktrn
Repo: triggerdotdev/trigger.dev PR: 3836
File: apps/supervisor/src/backpressure/backpressureMonitor.ts:3-5
Timestamp: 2026-06-04T18:16:35.386Z
Learning: When reviewing TypeScript in this repo, apply the rule “prefer type aliases over interfaces” only to data/object shapes and union/intersection type modeling. If an interface is being used as a behavioral contract for collaborators to implement (e.g., method-shape interfaces that define required behavior, such as `BackpressureLogger` / `BackpressureSignalSource` in `apps/supervisor/src/backpressure/backpressureMonitor.ts`), keep it as an `interface` and do not flag it as a type-alias-vs-interface violation.

Applied to files:

  • apps/webapp/app/components/code/codeMirrorTheme.ts
  • apps/webapp/app/utils/dashboardPreferences.ts
  • apps/webapp/app/services/dashboardPreferences.server.ts
📚 Learning: 2026-06-09T17:58:04.699Z
Learnt from: 0ski
Repo: triggerdotdev/trigger.dev PR: 3879
File: apps/webapp/app/models/vercelIntegration.server.ts:619-630
Timestamp: 2026-06-09T17:58:04.699Z
Learning: In this codebase, outbound raw `fetch` calls should typically rely on Node/undici’s default request timeout (about ~300s) rather than adding a per-call `AbortController` + `setTimeout` wrapper inside individual functions (e.g. in files like `apps/webapp/app/models/vercelIntegration.server.ts`). During code review, do not flag the absence of a per-call timeout on a single `fetch` as an issue; if per-call timeouts are needed, they should be implemented via a codebase-wide convention (e.g., a shared fetch wrapper or documented pattern) rather than ad-hoc per-function changes.

Applied to files:

  • apps/webapp/app/components/code/codeMirrorTheme.ts
  • apps/webapp/app/utils/dashboardPreferences.ts
  • apps/webapp/app/services/dashboardPreferences.server.ts
📚 Learning: 2026-02-11T16:37:32.429Z
Learnt from: matt-aitken
Repo: triggerdotdev/trigger.dev PR: 3019
File: apps/webapp/app/components/primitives/charts/Card.tsx:26-30
Timestamp: 2026-02-11T16:37:32.429Z
Learning: In projects using react-grid-layout, avoid relying on drag-handle class to imply draggability. Ensure drag-handle elements only affect dragging when the parent grid item is configured draggable in the layout; conditionally apply cursor styles based on the draggable prop. This improves correctness and accessibility.

Applied to files:

  • apps/webapp/app/components/primitives/Slider.tsx
  • apps/webapp/app/components/primitives/Select.tsx
  • apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
📚 Learning: 2026-07-28T21:57:20.061Z
Learnt from: samejr
Repo: triggerdotdev/trigger.dev PR: 4411
File: apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.team/route.tsx:818-843
Timestamp: 2026-07-28T21:57:20.061Z
Learning: When using Radix UI `DialogClose` with `asChild` (e.g., Trigger.dev dashboard components), note that it injects `type="button"` into its child via `Slot`. If the child is a local `Button` that forwards its `type` prop to the native `<button>`, then placing it inside a `<form>` will *not* submit unless you explicitly set `type="submit"` (or otherwise override the injected type / wire up submission behavior). Review form actions to ensure the intended submit vs non-submit behavior is preserved.

Applied to files:

  • apps/webapp/app/components/primitives/Slider.tsx
  • apps/webapp/app/components/primitives/Select.tsx
  • apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
📚 Learning: 2026-04-16T14:21:15.229Z
Learnt from: ericallam
Repo: triggerdotdev/trigger.dev PR: 3368
File: apps/webapp/app/components/logs/LogsTaskFilter.tsx:135-163
Timestamp: 2026-04-16T14:21:15.229Z
Learning: When rendering lists of task registry items in apps/webapp (e.g., <SelectItem /> rows) and using `key={item.slug}`, do not flag it as potentially non-unique. In trigger.dev’s `TaskIdentifier` table, the DB constraint `@unique([runtimeEnvironmentId, slug])` guarantees `slug` is unique within a given runtime environment, so `item.slug` is safe as the React key as long as the list is derived from that registry/constraint (and not from a legacy query that could produce duplicate slugs).

Applied to files:

  • apps/webapp/app/components/primitives/Slider.tsx
  • apps/webapp/app/components/primitives/Select.tsx
  • apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
📚 Learning: 2026-05-08T21:00:20.973Z
Learnt from: samejr
Repo: triggerdotdev/trigger.dev PR: 3538
File: apps/webapp/app/components/primitives/Resizable.tsx:60-78
Timestamp: 2026-05-08T21:00:20.973Z
Learning: In the triggerdotdev/trigger.dev codebase, treat Zod as a boundary validation tool (API handlers, request/response validation, and storage/DB read/write validation), not as inline render-time validation inside React components/primitive UI code. For render-time guards, prefer small manual type-narrowing checks (e.g., a short predicate like ~10–20 lines) over importing Zod into UI primitives, to avoid per-render schema-parse overhead and unnecessary abstraction. Use the manual guard approach unless you truly need schema validation at a boundary; only then introduce Zod.

Applied to files:

  • apps/webapp/app/components/primitives/Slider.tsx
  • apps/webapp/app/components/primitives/Select.tsx
  • apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
📚 Learning: 2026-06-25T18:21:55.847Z
Learnt from: carderne
Repo: triggerdotdev/trigger.dev PR: 4039
File: apps/webapp/app/routes/invite-resend.tsx:0-0
Timestamp: 2026-06-25T18:21:55.847Z
Learning: In the triggerdotdev/trigger.dev Zod 4 migration, avoid importing from the root package `conform-to/zod` in webapp code. It can resolve to the Zod 3 build and may crash at module load under Zod 4. When reviewing TypeScript/TSX files in `apps/webapp`, prefer importing from the Zod 4 subpath `conform-to/zod/v4` for Zod 4-compatible schemas/types.

Applied to files:

  • apps/webapp/app/components/primitives/Slider.tsx
  • apps/webapp/app/components/primitives/Select.tsx
  • apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
📚 Learning: 2026-06-25T18:21:54.729Z
Learnt from: carderne
Repo: triggerdotdev/trigger.dev PR: 4039
File: apps/webapp/app/routes/confirm-basic-details.tsx:0-0
Timestamp: 2026-06-25T18:21:54.729Z
Learning: For Remix + TypeScript files that use Conform v1 (conform-to/react) and its getInputProps helper, when you intend to suppress the helper-provided default value for non-checkbox/non-radio inputs (e.g., hidden inputs managed via an explicit value prop), use the Conform v1 option key `value: false`. Do not recommend `defaultValue: false` here, because `defaultValue` is not a valid option key for these input types in Conform v1 typings.

Applied to files:

  • apps/webapp/app/components/primitives/Slider.tsx
  • apps/webapp/app/components/primitives/Select.tsx
  • apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
📚 Learning: 2026-03-26T09:02:07.973Z
Learnt from: myftija
Repo: triggerdotdev/trigger.dev PR: 3274
File: apps/webapp/app/services/runsReplicationService.server.ts:922-924
Timestamp: 2026-03-26T09:02:07.973Z
Learning: When parsing Trigger.dev task run annotations in server-side services, keep `TaskRun.annotations` strictly conforming to the `RunAnnotations` schema from `trigger.dev/core/v3`. If the code already uses `RunAnnotations.safeParse` (e.g., in a `#parseAnnotations` helper), treat that as intentional/necessary for atomic, schema-accurate annotation handling. Do not recommend relaxing the annotation payload schema or using a permissive “passthrough” parse path, since the annotations are expected to be written atomically in one operation and should not contain partial/legacy payloads that would require a looser parser.

Applied to files:

  • apps/webapp/app/services/dashboardPreferences.server.ts
📚 Learning: 2026-05-05T09:38:02.512Z
Learnt from: d-cs
Repo: triggerdotdev/trigger.dev PR: 3523
File: apps/webapp/app/routes/api.v3.batches.ts:178-181
Timestamp: 2026-05-05T09:38:02.512Z
Learning: When reviewing code that catches `ServiceValidationError` in `*.server.ts` files, do not blindly forward `error.status` to HTTP responses, because SVEs may be thrown with non-default statuses (e.g., 400/500) and forwarding them can cause client-visible behavioral regressions (e.g., surfacing 500s to clients). Prefer a safe default response status of `error.status ?? 422`, but only after confirming via the reachable call graph that the caught `ServiceValidationError` instances are expected to carry those non-default statuses; otherwise, normalize to `422` to avoid unexpected client-visible 5xx behavior.

Applied to files:

  • apps/webapp/app/services/dashboardPreferences.server.ts
🔇 Additional comments (7)
apps/webapp/app/utils/dashboardPreferences.ts (1)

1-86: LGTM!

apps/webapp/app/services/dashboardPreferences.server.ts (1)

4-27: LGTM!

apps/webapp/app/tailwind.css (1)

300-302: LGTM!

apps/webapp/app/components/code/codeMirrorTheme.ts (1)

87-90: LGTM!

Also applies to: 104-108

apps/webapp/app/components/primitives/Slider.tsx (1)

39-46: 🎯 Functional Correctness

Verify the Account contrast slider in the running dashboard.

Use Chrome DevTools MCP to verify snapshots, keyboard operation, focus styling, and console messages. Confirm that the thumb exposes the supplied accessible name. Use typecheck for apps/webapp; do not use a build as the correctness check.

As per coding guidelines, “For dashboard changes, visually verify the running Remix app with Chrome DevTools MCP” and “For apps, use typecheck for verification.”

Also applies to: 62-64

Source: Coding guidelines

apps/webapp/app/components/integrations/VercelOnboardingModal.tsx (2)

20-20: LGTM!


758-758: LGTM!

devin-ai-integration[bot]

This comment was marked as resolved.

- the root loader reads hasThemeSwitcher through a short process-level TTL
  cache instead of a per-request database query
- the invite envelope icon follows the System-theme grayscale treatment
devin-ai-integration[bot]

This comment was marked as resolved.

…hemes

The mono treatment assumes an icon carries the state; sparkline totals have
none, so uncoloring them erased the p95 and throttled warnings entirely.
coderabbitai[bot]

This comment was marked as resolved.

devin-ai-integration[bot]

This comment was marked as resolved.

Overrides made a scoped resolution reusable across scopes for the TTL, and
a missing row resolves through defaultValue, so it belongs in the cache key.
devin-ai-integration[bot]

This comment was marked as resolved.

…ences blob

theme and contrast degrade to undefined on their own instead of failing the
blob's validation, which reset favorites, side-menu layout and current
project - permanently after the next preference write.
The team can dogfood the new themes on production before the
hasThemeSwitcher flag flips for everyone.
# Conflicts:
#	apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx
devin-ai-integration[bot]

This comment was marked as resolved.

…flag

The settings page read hasThemeSwitcher fresh while the root loader read it
through the 30s cache, so right after a flip a user could save a theme the
shell wasn't applying yet. Both now share the same cached read.
devin-ai-integration[bot]

This comment was marked as resolved.

…ller

A shallow copy shared the inner projects container between every user
without saved preferences on the process.
@kathiekiwi
kathiekiwi merged commit fbd6df3 into main Aug 3, 2026
32 checks passed
@kathiekiwi
kathiekiwi deleted the feat/light-theme branch August 3, 2026 17:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants