feat(webapp): switch themes from the account menu - #4547
Draft
samejr wants to merge 50 commits into
Draft
Conversation
Adds an "Appearance" submenu to the account popover listing System, Light and Dark, with a check against the current theme, saved through a new preferences endpoint behind the existing theme switcher flag. The account page's theme dropdown becomes the same icon-based segmented control (with Classic included), and its Theme and Contrast rows now match the layout of the Profile rows above them. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
|
Contributor
Observability mapAs of 20/100 over 426 measured of 442 entry points (base 20, no change) What this PR changed
FIX FIRST
AUDIT 3 of 50 sensitive mutations record an actor. 47 without one. What the score is made ofThe score and findings here are report-only and never gate the merge. Separately, a required test suite keeps this tool's symbol and route lists in sync with the code they name, and can fail a pull request that renames or removes a symbol they reference, or that adds the first route with a segment they anticipate. Each failure names the list to edit. The rules and their reasons: internal-packages/observability-map/README.md. |
Contributor
|
Note Reviews pausedIt 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 Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughThe PR adds reusable theme icons and shared theme option metadata. It adds a protected route that validates and saves theme preferences. The account menu now includes an appearance submenu with theme selection and an account link. The side-menu popover logic moves to a dedicated component. Account settings use centralized theme metadata and updated contrast controls. The slider supports marks and formatted value tooltips during hover and dragging. 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
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. Comment |
…lider Adds a "More options" link to the Appearance submenu pointing at the profile page, where the theme picker goes back to the standard select popover and now covers Classic too. The contrast slider moves from steps of 5 to 1 and gains a label above the handle showing the percentage while hovering, dragging or focused. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 5b364406-6ab2-452e-aa69-1b360a8fef71
📒 Files selected for processing (4)
apps/webapp/app/components/navigation/AppearanceMenuItem.tsxapps/webapp/app/components/primitives/Slider.tsxapps/webapp/app/components/themeOptions.tsapps/webapp/app/routes/account._index/route.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/webapp/app/components/navigation/AppearanceMenuItem.tsx
- apps/webapp/app/components/themeOptions.ts
📜 Review details
⏰ Context from checks skipped due to timeout. (12)
- GitHub Check: report
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (5, 12)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (10, 12)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (9, 12)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (1, 12)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (4, 12)
- GitHub Check: obsmap / 🧪 Unit Tests: Observability Map
- GitHub Check: typecheck / typecheck
- GitHub Check: runops-guard / runops-guard
- GitHub Check: code-quality / code-quality
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: Analyze (actions)
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{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 dynamicimport(); 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/v3or deprecatedclient.defineJob.
Add agentcrumbs while writing code using approved namespaces; mark lines with//@Crumbsor blocks with `// `#region` `@crumbs, and strip them before merging.
Files:
apps/webapp/app/components/primitives/Slider.tsxapps/webapp/app/routes/account._index/route.tsx
{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/primitives/Slider.tsxapps/webapp/app/routes/account._index/route.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use function declarations instead of default exports
Files:
apps/webapp/app/components/primitives/Slider.tsxapps/webapp/app/routes/account._index/route.tsx
apps/webapp/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/webapp.mdc)
apps/webapp/**/*.{ts,tsx}: Access environment variables through theenvexport ofenv.server.tsinstead of directly accessingprocess.env
Use subpath exports from@trigger.dev/corepackage instead of importing from the root@trigger.dev/corepathDo not reintroduce the removed v1 execution path;
RunEngineVersion.V1branches may only reject or finalize gracefully so v3 clients receive a clean 4xx, never a 5xx.
Files:
apps/webapp/app/components/primitives/Slider.tsxapps/webapp/app/routes/account._index/route.tsx
apps/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
For apps, use
typecheckfor verification and never usebuildas the correctness check.
Files:
apps/webapp/app/components/primitives/Slider.tsxapps/webapp/app/routes/account._index/route.tsx
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.
UseuseCallbackanduseMemoonly 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/primitives/Slider.tsxapps/webapp/app/routes/account._index/route.tsx
🧠 Learnings (20)
📚 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.tsxapps/webapp/app/routes/account._index/route.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.tsxapps/webapp/app/routes/account._index/route.tsx
📚 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/primitives/Slider.tsxapps/webapp/app/routes/account._index/route.tsx
📚 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/primitives/Slider.tsxapps/webapp/app/routes/account._index/route.tsx
📚 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/primitives/Slider.tsxapps/webapp/app/routes/account._index/route.tsx
📚 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/primitives/Slider.tsxapps/webapp/app/routes/account._index/route.tsx
📚 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/primitives/Slider.tsxapps/webapp/app/routes/account._index/route.tsx
📚 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/primitives/Slider.tsxapps/webapp/app/routes/account._index/route.tsx
📚 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/primitives/Slider.tsxapps/webapp/app/routes/account._index/route.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
📚 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.tsxapps/webapp/app/routes/account._index/route.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.tsxapps/webapp/app/routes/account._index/route.tsx
📚 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/primitives/Slider.tsxapps/webapp/app/routes/account._index/route.tsx
📚 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/primitives/Slider.tsxapps/webapp/app/routes/account._index/route.tsx
📚 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/primitives/Slider.tsxapps/webapp/app/routes/account._index/route.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.tsxapps/webapp/app/routes/account._index/route.tsx
📚 Learning: 2026-02-03T18:27:40.429Z
Learnt from: 0ski
Repo: triggerdotdev/trigger.dev PR: 2994
File: apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables/route.tsx:553-555
Timestamp: 2026-02-03T18:27:40.429Z
Learning: In apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables/route.tsx, the menu buttons (e.g., Edit with PencilSquareIcon) in the TableCellMenu are intentionally icon-only with no text labels as a compact UI pattern. This is a deliberate design choice for this route; preserve the icon-only behavior for consistency in this file.
Applied to files:
apps/webapp/app/routes/account._index/route.tsx
📚 Learning: 2026-07-22T11:16:06.546Z
Learnt from: samejr
Repo: triggerdotdev/trigger.dev PR: 4332
File: apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.regions/route.tsx:166-168
Timestamp: 2026-07-22T11:16:06.546Z
Learning: In the Trigger.dev web app, copy-interaction accessibility (keyboard and touch behavior for the copy affordance) is owned by the shared `CopyableText` `icon-right` primitive. When reviewing route-level code (e.g., admin debug panels and runs tables) that intentionally reuses this pattern, avoid suggesting divergent call-site-only accessibility fixes; instead, route any accessibility changes back to a holistic update of the `CopyableText` `icon-right` implementation so all reuse sites benefit consistently.
Applied to files:
apps/webapp/app/routes/account._index/route.tsx
📚 Learning: 2026-04-02T19:18:26.255Z
Learnt from: samejr
Repo: triggerdotdev/trigger.dev PR: 3319
File: apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions/route.tsx:179-189
Timestamp: 2026-04-02T19:18:26.255Z
Learning: In this repo’s route components that render the Inspector `ResizablePanelGroup` panels, it’s acceptable to pass `collapsed={!isShowingInspector}` together with a no-op `onCollapseChange={() => {}}` when panel visibility is intentionally controlled only by route parameters (e.g., `*Param` search/route params) rather than user drag/collapse interactions. Do not flag an empty/no-op `onCollapseChange` as “missing wiring” in these cases; only flag it when collapse state is expected to change based on user interaction.
Applied to files:
apps/webapp/app/routes/account._index/route.tsx
📚 Learning: 2026-05-12T21:04:00.184Z
Learnt from: ericallam
Repo: triggerdotdev/trigger.dev PR: 3542
File: apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.sessions._index/route.tsx:40-42
Timestamp: 2026-05-12T21:04:00.184Z
Learning: In triggerdotdev/trigger.dev route loader implementations (Remix `route.tsx` files under `apps/webapp/app/routes/**`), follow the existing convention for missing/unauthorized environment lookups: when `findEnvironmentBySlug` (or the equivalent env resolver) returns a falsy value, handle it by throwing `new Error("Environment not found")` rather than returning a `404` `Response` (i.e., do not flag this as “missing 404 response”). Changing the error-to-404 convention is a cross-cutting refactor and should be left out of individual PRs unless the PR explicitly addresses that broader migration.
Applied to files:
apps/webapp/app/routes/account._index/route.tsx
🔇 Additional comments (2)
apps/webapp/app/routes/account._index/route.tsx (2)
14-23: LGTM!Also applies to: 45-48
281-354: 🎯 Functional CorrectnessVerify the appearance controls in the running dashboard.
Check theme selection for System, Light, Dark, and Classic. Check the contrast label during hover, drag, and keyboard focus. Check expanded and collapsed layouts. Check browser console messages.
As per coding guidelines, “For dashboard changes, visually verify the running Remix app with Chrome DevTools MCP, using snapshots, screenshots, interaction, and console-message checks as appropriate.”
Source: Coding guidelines
The value label above the contrast handle is now purely hover-driven: it was also keyed off focus, which the thumb keeps after a click, leaving the label stuck on once clicked. The handle itself grows from 12px to 18px. Also halves the profile page theme picker and its popover, which was held open by a 180px floor, brightens its icons and labels, and widens the Appearance submenu to 144px. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Ticks the track at 20% and swaps the handle's label from a percentage to "Default" when it lands there. The tick uses Radix's own thumb-offset formula so it sits exactly under the handle's centre rather than a few pixels off. The label also gains an arrow pointing down at the handle. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: c7255f8c-acc5-4ca8-9ed9-5460b4509534
📒 Files selected for processing (2)
apps/webapp/app/components/primitives/Slider.tsxapps/webapp/app/routes/account._index/route.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/webapp/app/routes/account._index/route.tsx
📜 Review details
⏰ Context from checks skipped due to timeout. (19)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (12, 12)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (7, 12)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (9, 12)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (11, 12)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (6, 12)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (2, 12)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (10, 12)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (1, 12)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (3, 12)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (5, 12)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (4, 12)
- GitHub Check: runops-guard / runops-guard
- GitHub Check: e2e-webapp / 🧪 E2E Tests: Webapp
- GitHub Check: typecheck / typecheck
- GitHub Check: obsmap / 🧪 Unit Tests: Observability Map
- GitHub Check: report
- GitHub Check: code-quality / code-quality
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: Analyze (actions)
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{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 dynamicimport(); 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/v3or deprecatedclient.defineJob.
Add agentcrumbs while writing code using approved namespaces; mark lines with//@Crumbsor blocks with `// `#region` `@crumbs, and strip them before merging.
Files:
apps/webapp/app/components/primitives/Slider.tsx
{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/primitives/Slider.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use function declarations instead of default exports
Files:
apps/webapp/app/components/primitives/Slider.tsx
apps/webapp/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/webapp.mdc)
apps/webapp/**/*.{ts,tsx}: Access environment variables through theenvexport ofenv.server.tsinstead of directly accessingprocess.env
Use subpath exports from@trigger.dev/corepackage instead of importing from the root@trigger.dev/corepathDo not reintroduce the removed v1 execution path;
RunEngineVersion.V1branches may only reject or finalize gracefully so v3 clients receive a clean 4xx, never a 5xx.
Files:
apps/webapp/app/components/primitives/Slider.tsx
apps/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
For apps, use
typecheckfor verification and never usebuildas the correctness check.
Files:
apps/webapp/app/components/primitives/Slider.tsx
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.
UseuseCallbackanduseMemoonly 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/primitives/Slider.tsx
🧠 Learnings (16)
📚 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
📚 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
📚 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/primitives/Slider.tsx
📚 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/primitives/Slider.tsx
📚 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/primitives/Slider.tsx
📚 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/primitives/Slider.tsx
📚 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/primitives/Slider.tsx
📚 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/primitives/Slider.tsx
📚 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/primitives/Slider.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
📚 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
📚 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
📚 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/primitives/Slider.tsx
📚 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/primitives/Slider.tsx
📚 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/primitives/Slider.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
🔇 Additional comments (3)
apps/webapp/app/components/primitives/Slider.tsx (3)
63-63: KeepvalueTooltipon a controlled slider.This repeats the existing finding from the previous review.
currentValuefalls back todefaultValue, but an uncontrolled Radix slider does not update that prop after interaction, so the label can remain stale. The suppliedapps/webapp/app/routes/account._index/route.tsxcaller passes a controlledvalue; either enforce this contract inSliderPropsor track the live value internally. (raw.githubusercontent.com)#!/bin/bash set -euo pipefail rg -n -C 5 'valueTooltip|defaultValue|onValueChange|value=\{' \ apps/webapp --glob '*.{ts,tsx}' || true
2-2: LGTM!Also applies to: 15-19, 29-29, 39-46, 55-62, 64-65, 77-88, 111-120, 125-133
93-109: 🎯 Functional CorrectnessNo change needed for mark positioning.
Current
Sliderusages use horizontal LTR settings/scale controls, and there are no current callers using vertical, RTL, or inverted Radix geometry.
The trigger is now sized to the widest option, and its icon can no longer shrink - at the old width "System" and "Classic" squeezed it down to a sliver. The popover matches that width. The contrast label's arrow had its borders on the two left-hand edges rather than the two facing the handle; rotating a square clockwise sends the bottom and right edges downward, not the bottom and left. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Doubles the mark's height and hangs background-coloured borders either side of the 1px line, so it cuts through the track instead of blending into it. The border colour is a theme token, so it follows light mode too. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The mark's gap borders used background-bright, which is not what sits behind a settings row - the page there is background-dimmed, so the "gap" rendered as a slightly lighter stripe instead. Both colours now come from the slider variant, the line matches the track, and its ends are rounded. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The mark on the track becomes a button labelled "Reset to default" that snaps the handle back to 20% and saves, and brightens on hover. It stops its own pointer events reaching the track, which would otherwise drag the handle to the press instead. The handle still wins wherever the two overlap: the mark is drawn before the thumb, so the thumb takes the hover, the click and its own label. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
…toggle The high-contrast accent set - solid status badges, monochrome nav icons and the darker, unified icon colours - was tied to the Dark and Light themes. It moves to its own preference, off by default, so any theme can run either Classic's colours or the high-contrast ones. Comparing the two sets turned up 22 re-mapped tokens: three change hue outright (preview and preview branches yellow to blue, queue charts purple to blue) and the rest step down in lightness for white. The `system:` variant that carries the badge restyle across ~50 components now keys off the preference too. Classic's accents were drawn for dark cards and most sit under 3:1 on white, so the Light theme gets its own Classic-derived set: same hues, stepped down in lightness only, so yellows stay yellow and queues stay purple. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
…page Renames the section to "Interface and theme", adds descriptions to each row and grows the theme select a size. The new App sidebar row opens the side menu's own Customize modal - that modal builds its section list from the side menu's project context, which this page doesn't have, so the button deep links into the user's current environment and the param is consumed and stripped there. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Drops the row description a size (small to extra-small, 14px to 12px) and halves the title-to-description gap, both in the shared settings layout so every settings page follows. The gap moves to an exported constant, since the profile page hand-rolls its rows to match the Profile section's heights. Also describes what the Icon contrast switch does. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The App sidebar row now opens the modal in place instead of navigating into the app to open it there. The side menu's section list moves into its own module so both callers build it from one source - the profile page resolves the user's current environment in its loader and passes it in, since the list is keyed to a project and environment. Also grows the Customize button a size and lets the theme select hug its label. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Picking a theme from the account menu sometimes left the old one on screen. The switch waited for the write to come back through the root loader, but dismissing the popover unmounts the row that owns the fetcher, and without v3_fetcherPersist React Router drops an unmounted fetcher's revalidation. The POST had already gone out, so the preference saved and a refresh showed the new theme - which is why it looked intermittent. Both pickers now set the attribute themselves and let the write follow, sharing the resolution rule with useSystemThemeSync rather than restating it, and revert if the write comes back unsuccessful. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
bg-secondary is charcoal-650 and the hover was background-raised, which is charcoal-700 - a step down the scale, so the button dimmed. Hover now steps up to charcoal-600 (surface-control) on the dark themes, which is where it sat before the themes update. Light keeps darkening off white. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Same step the secondary button needed: bg-secondary is charcoal-650 and the hover was background-raised at charcoal-700, so it dimmed. Dark themes now hover to charcoal-600; light keeps darkening off white. Also drops the dropdown chevron's colour transition, the only animated hover on the trigger - the background change is instant, so the chevron was arriving late. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Adds minimal/medium: the same toggle as medium without the padded hover box, for rows that don't need the enlarged hit area. medium keeps it. The unchecked track still lightens on hover, so the control keeps an affordance without the surround. The checked fill moves from blue-500 to indigo-500, matching the primary accent the buttons and checkboxes use. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Moves it to minimal/medium so it matches Icon contrast. The old className carried a pr-3 that only made sense with the padded variant; without it the toggle lines up with the other controls in the column. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The handle sat at charcoal-200 on the dark themes, the brightest tone on the row. It rests a stop lower now and comes up to charcoal-200 on hover. Light reverses the direction - it rests white and dims to charcoal-200, since on a white page dimming is what reads as more prominent. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
…t 30% The slider no longer offers the bottom of the range, and the "Default" tick moves with it. Nothing about the stored value or the colours it drives changes - the number means what it always did, the control just starts at 15. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Off by default. It targets a marker class on the TextLink component rather than anchors generally, so nav items, buttons-as-links and decorative underlines (dashed tooltip terms, tab underlines) are untouched either way. TextLink itself never underlined - its two variants are colour-only - so this is the first underline it gets. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Every link that underlines itself instead of going through TextLink, copied into its surroundings and labelled, so each can be decided on. Also reworks the Underline links description. Remove the route and its storybook entry once the decisions are made. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Links that underlined themselves now either use TextLink or share its colour and the marker the "Underline links" preference targets, so the preference reaches them. TextLink gains `textLinkClassName` for the cases that can't be the component - markdown links that must stay in the inline flow, and triggers that aren't anchors - plus `reloadDocument` so LabelValueStack keeps its behaviour. Deletes the ProductHunt banner and its image, which nothing rendered. Left alone: the admin pages, and the underlines that aren't links (dashed tooltip terms, the dotted Vercel warning, URL-as-text, the focus affordance). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
…me-toggle # Conflicts: # apps/webapp/app/components/dashboard-agent/RunDiagnosisCard.tsx # apps/webapp/app/components/primitives/TextLink.tsx # apps/webapp/app/root.tsx
@trigger.dev/build
trigger.dev
@trigger.dev/core
@trigger.dev/python
@trigger.dev/react-hooks
@trigger.dev/redis-worker
@trigger.dev/rsc
@trigger.dev/schema-to-json
@trigger.dev/sdk
commit: |
Two flat variants, offered on the profile page only - the account menu keeps its three. Each takes its entire token set from Dark or Light (text, borders, controls, accents, charts, both contrast overlays) by joining those selectors, and then pins only the surfaces: page, side menu, cards and popovers all sit flat on black or white, so grid lines carry the layout rather than layered fills. The pinning blocks sit below the contrast overlays, so the contrast control still moves text, grid lines, borders and controls while the backgrounds hold at black or white at every level. Dark and Light are untouched. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Replaces the placeholder circles with the supplied artwork, and picks between them per active theme: the option matching the current end of the scale draws as a ring so the background reads through it, the opposing one as a solid disc in the foreground colour. Dark and Black show Black as a ring, Light and White show White as a ring. The appearance resolution joins the other theme resolution in useSystemThemeSync, and defaults to dark before the effect runs so the first client render agrees with the server's. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Replaces the heroicons desktop glyph in both theme pickers. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
…themes The section becomes two: Theme (interface theme, contrast) and Interface (app sidebar, icon contrast, underline links). With System selected, two rows appear below the theme picker for which theme each end of the OS setting lands on - Light or White, Dark or Black. Both save to the dashboard preferences. `system` resolution now goes through one helper shared by the sync effect, the optimistic click handlers and root's SSR pass. The pre-paint script reads the two ends off <html> so a fresh load paints the chosen variant rather than flashing plain Dark or Light first. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Matches the account menu's submenu title. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The two rows that pick which theme each end of the OS setting resolves to appeared and vanished instantly when Interface theme changed. They now animate the grid row track, which keeps them at their natural height, and fade with it. The transition covers `visibility` too: it holds the rows on screen for the whole collapse, then hides them so the selects inside leave the tab order once shut. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Scaffolding for the link audit that produced the Underline links preference. It served its purpose. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
…me-toggle One conflict, in SideMenu.tsx's pathBuilder import list: this branch had dropped the five section paths that moved to sideMenuSections.tsx, while main dropped v3ProjectPath after routing the project switcher through usePageSwitcher. Both removals are correct, so the merge keeps neither set — none of the six are referenced in the file any more. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
useThemeMode only counted `light` itself as a light theme, so White fell through to the dark branch. The toast rendered dark on a white page, and the agent logo picked its dark dot palette. It now classifies by theme family, reusing the enum that drives the "Light" end of the `system` preference so a new theme is only classified once. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
A Button only applied its variant text color when the label was a plain string. Anything else - a fragment, a span, text interleaved with a value - inherited the page color instead. On the dark themes that lands near white and reads as roughly right, so it went unnoticed; on Light and White it lands near black, leaving 1.35:1 labels on the indigo and red buttons. The label row now carries the color, so every child inherits it, and the call sites that pinned their label to text-bright inside a primary or danger button no longer fight it. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
A Button's loading spinner was always white, so on the neutral variants it was white-on-near-white once the theme was light. It now takes the variant's text color: still white on primary and danger, dark ink on secondary, tertiary and minimal when the theme is light. The muted spinner was a fixed dark navy for the same reason and now comes from theme tokens, so it stays muted against a light surface too. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Four spots still carried fixed neutral colors, so they kept their dark-theme appearance on Light and White: - the agent composer's stop button, a charcoal surface with a white glyph; both now follow the theme, since the surface goes light with it - the API keys "no scope" dot, which tracks the dimmed text color rather than a surface color that would all but vanish on a light card - chart reference-line labels and the dashed line itself Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Puts the flat pair in the same light-then-dark order as the Light and Dark options above them. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The button variant rendered a real <button> inside the tooltip trigger's own <button>. The browser parser splits nested buttons apart, so React failed to hydrate any page showing one. The trigger now adopts the button itself. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
…idebar A System/Light/Dark/White/Black segmented control sits above every story, defaulting to System, so components can be checked in each theme without touching the account preference — leaving the storybook hands the theme back. The sidebar's flat list becomes categories (Foundations, Actions, Forms, Menus & overlays, Feedback, Navigation, Data display, Runs & logs, Settings, Trigger Agent), and StoryKit adds shared page/section/grid scaffolding. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
New stories, all with static data and every variant/size/state in grid form: theme tokens, slider, pagination, sheet, copy & clipboard, dates & timers, run statuses (status combos, run icons, tags), log levels, indicators (pulsing dot, step number, animated number/arrow), settings rows, accordion + alert dialog, and the usage sparkline (the old sidebar's dead "usage" link). Extends input fields with SearchInput and InputOTP, date fields with the date-time and duration pickers, and cells with PropertyTable, LabelValueStack and MiddleTruncate. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The env dashboard defers its analytics queries: the presenters create the promises eagerly and the route only subscribes via typeddefer after further awaits. With ClickHouse unreachable the queries reject instantly — inside that gap — and Node treats the not-yet-subscribed rejection as unhandled and kills the whole server. The agent sparkline promises aren't consumed by the unified path at all, so with agents present those reject unhandled every time. Each deliberately un-awaited promise now carries a no-op backstop catch at creation. Consumers still receive rejections (the stats chips keep their error state); the process just no longer dies. With ClickHouse down the dashboard now renders with failed-stats placeholders. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
…title The storybook header's five theme segments each take mod+1..5, with a hover tooltip on the standard 500ms delay showing the theme and its key. The shortcuts live in this layout, so they only bind inside the storybook, and they preventDefault because browsers claim those keys for tab switching. Alongside them, an Icon contrast switch flips data-icon-contrast the same storybook-local way the theme control works — both hand the account preference back when you navigate away. "Storybook" becomes a Header2. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Each story now names the component files it covers under the title, using CopyableText so the name can be lifted straight into a search. StoryKit also gains a section-level name for pages covering several files, and a sub-section heading. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Audited every component against its story by extracting the variant keys each one declares. The gaps, now filled: - Buttons: was missing every extra-large size, the whole docs and ask-trigger families, secondary/small-icon and the three menu-item variants. Rewritten to drive off the family and size lists, so all 35 variants render and the page can't drift from the component again. - Popover: only the arrow trigger appeared. Now every trigger (custom, side menu, both ellipse orientations, plain), all four arrow variants, the layout options and each content side. - Tooltip: adds the dark variant, all four sides, the delay options and InfoIconTooltip. - Select: all six variants plus placeholder, dropdown icon, disabled and icon items, above the existing interactive demos. - Table: all four variants, the chevron/menu/blank-row cell types, and static ids in place of crypto.randomUUID() at render time. - Switch, Badge, InlineCode, SegmentedControl, Spinner and Shortcuts: rewritten to cover every variant, size and state. - Smaller fills: TextLink's three variants, Checkbox button/small, Input secondary-small, InfoPanel info, DetailCell small, CopyableText text-below, DurationPicker medium, AnimatingArrow extra-large. The agent gallery drops its own three-button theme toggle, now that the header control covers all five themes. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Dark's palette was already Classic's: Dark had no base block, so it inherited every @theme token and only re-declared 17 greys as contrast expressions whose 0% value was Classic's own. Comparing all 109 custom properties between the two themes at contrast 0 found no difference, so this is a rename plus a default change rather than a re-skin. - Dark is the default and the fallback for any unknown stored preference, so a saved "classic" resolves there once it stops parsing. No data migration. - Default contrast becomes 0, which is exactly Classic's palette, and the slider floor drops from 15 to 0 so that look stays reachable. The "Default" tick now agrees with the applied default instead of sitting at 30. - Flag-off and logged-out pages already pinned contrast to 0, so every unflagged user sees no change at all. Contrast now travels between charcoal stops instead of mixing toward #fff and #000. The ramp is a hand-picked set of cool-leaning greys whose tint peaks in the midtones, and mixing to pure white flattened that: at full contrast border-bright landed on a +8 blue lean where the ramp's own grey at that brightness carries +17. Interpolating stop to stop keeps every intermediate value inside the palette, and it no longer reaches pure white or black — the Black and White themes are there for that. Each token moves two stops, except the text group, which moves one so bright, dimmed and faint keep their spacing. Charts: Dark takes the brighter series colours back, and the darkened pair moves under the accessibility preference, where it also lines the dark themes up with Light so a chart doesn't shift hue when the OS flips. That preference is now "Distinguish without color", covering the contrast bump and the shape differentiation still to come. The stored key stays iconContrast. Verified by pixel-diffing every page against a Classic baseline captured first: the only differences are the renamed row, an animated spinner mid-frame and the slider thumb re-mapped to the new floor. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Same change as the dark side: contrast now interpolates between two stops on the greyscale rather than mixing toward #000, so the cool tint survives. Mixing to black hurt light more than dark - border-bright used to land on a +6 blue lean where the ramp's own grey at that brightness carries +18, and grid-bright went to +5 against +18. Light's greys are its own hand-picked set rather than charcoal stops, but they sit on the same scale and run straight into it: text-faint is charcoal-400, text-dimmed charcoal-500, text-bright charcoal-800. So the scale here is light's pale greys on top of the charcoal ramp. Because light's pale end is densely sampled while the mid-greys it travels into are charcoal's sparser stops, a step isn't a fixed perceptual distance. Each token therefore gets its own destination, picked to land near where that token sits today - which keeps the shape of the old per-token weights (25%, 28%, 32%, 38%...) instead of flattening them to one number. Ordering is enforced within each group; the groups already crossed one another at high contrast before this. Backgrounds move among light's own pale greys, since charcoal has nothing between c-100 and c-200 to hold them. Text is the one place this deliberately doesn't match today. At full contrast the old mixing drove text-bright to pure #000 and text-dimmed to #0e0f11, just 1.10:1 apart, so the bright/dimmed hierarchy vanished exactly when a user asked for more contrast. It now moves two stops like the dark side, holding the three text tones at the spacing they have at contrast 0. Contrast 0 is byte-identical to the palette light shipped, verified token by token, and every group stays monotonic at 0/30/50/100%. Also shortens the "Distinguish without color" description to fit one line, measured against the 544px row rather than guessed. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Light's overlay covered 14 tokens where dark's covered 17, and the three it missed were background-dimmed, background-bright and input-bg - the page and the cards. Measured as a share of painted background area, only 0.6% of the dashboard, 0.3% of the account page and 0.0% of the runs page changed when the slider moved, because 95-97% of every page is white and white was pinned. All six surfaces now travel two stops together, mirroring the dark side, so the gaps between the tiers are identical at both ends of the slider. Responding area goes to 95.4%, 96.7% and 97.3%. Contrast 0 is still byte-identical to light's shipped palette, and White pins all six afterwards so it stays flat. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Two things were wrong at high contrast in light. The side menu and title bar (background-bright) and the page behind them (background-dimmed) sit 0.035 luminance apart at contrast 0, and equal step counts closed that to 0.005 by 100% - the two read as one colour exactly when the user asked for more definition. The scale is unevenly spaced up here, so counting stops was the wrong measure. Destinations now come from a luminance target instead, roughly 0.13 per tier, which keeps every gap and widens the one that matters: bright stays above dimmed all the way, 0.035 -> 0.046. The whole stack also lands darker than before, so the slider does more. Grid lines went all the way to charcoal-400, which read as ruled paper over a table. They divide rows rather than outline anything, so they now stop a tier short of the borders: 1.65:1 against the page at full contrast where they were 2.8:1, still legible but no longer the loudest thing on screen. Contrast 0 is untouched, the stack stays monotonic at 0/50/100%, and White still pins all six surfaces flat. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
✅ Checklist
Testing
Ran the dashboard locally and switched between System, Light and Dark from the account menu — both in the expanded rail and in the collapsed rail, where the submenu nests inside Account — plus all four themes from the profile page, checking that
data-themefollowed each choice and persisted across reloads. Also dragged the contrast slider to confirm the percentage label tracks the handle and that the Appearance entry stays hidden for a non-admin while thehasThemeSwitcherflag is off.Changelog
Adds an Appearance submenu to the account popover listing System, Light and Dark with a check against the current theme and a "More options" link to your profile, saved through a new
/resources/preferences/themeendpoint behind the existing theme switcher flag. On Your profile the Theme and Contrast rows now match the layout of the Profile rows above them, and the contrast slider moves in steps of 1 with a percentage label above the handle.Screenshots
To attach: the Appearance submenu open in the account popover, and the Appearance section on Your profile.
💯
Open workspace in Conductor