feat(webapp): switch themes from the account menu - #4547
Draft
samejr wants to merge 63 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 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>
TextLink's `token` variant underlined on hover while `primary` and `secondary` shifted color, so links inside themed surfaces behaved differently from every other link in the app - and the underline they grew on hover was indistinguishable from the one the "Underline links" preference adds. Give the link token a hover counterpart and point `token` at it, so the underline now means one thing only: the preference is on. The hover value travels the lavender ramp rather than mixing toward white, matching the theme's approach elsewhere. Dark lands halfway to lavender-300 (the full step reads as a flash, since the ramp is sparse either side of the 400 brand accent) for a perceptual step of 0.083 in oklab L, against primary's 0.086. Light travels *down* to lavender-700 instead: on white, more prominent means darker, which is also the direction text-dimmed -> text-bright already takes. Contrast improves on hover in both, 4.67 -> 6.60 on dark and 6.09 -> 7.53 on light. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Four places styled a link by hand instead of using TextLink's class helper,
and each drifted a different way:
- The TRQL guide's table of contents underlined on hover. This is the one
that was reported - it carried the preference's marker class, so with the
preference off it grew an underline on hover that looked exactly like the
preference being on.
- The investigation card's evidence link and the agent quota notice's
Upgrade link underlined on hover and, having no marker class, never
responded to the preference at all.
- The free-plan usage widget's Upgrade link had no hover state whatsoever.
All four now take `textLinkClassName("token")`, so they pick up the token
color, the color-shift hover and the preference in one go. The two that
need to sit on their own line keep `block` rather than adopting TextLink's
inline-flex layout.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Markdown links - agent chat, prompt and span details, the AI query explainer - were underlined permanently, because streamdown hard-codes `underline` onto every anchor it renders. So with "Underline links" off they were the only underlined body text in the app, and turning the preference on changed nothing about them. Reset the decoration on prose anchors and add them to the preference's selector, so they match every other body-text link: no underline by default, underlined when the preference is on. They can't carry the marker class themselves - streamdown owns the markup - hence the extra selector. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The hover step was sized to match TextLink's own indigo-500 -> indigo-400, which turns out to be too subtle to register as a hover at all - and in light mode it was half that again, because lavender-600 and 700 sit close together on the ramp. Take a full stop up the ramp on dark (lavender-300) and two stops down on light (lavender-800). Perceptual distance goes from 0.10 to 0.20 on dark and 0.05 to 0.11 on light, measured in oklab, against 0.22 for the largest hover step the app already uses (text-dimmed -> text-bright). Contrast improves in both directions: 4.67 -> 8.93 on dark, 6.09 -> 9.73 on white. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
TextLink's default variant hard-coded indigo-500, so it painted the same purple on a near-black card as on white. One value can't serve both: it measured 3.84:1 on the dark theme and 4.41:1 on light, either side of the 4.5:1 floor for body text, and on light it fell to 3.02:1 on hover because brightening on white *reduces* contrast. A `token` variant existed as the escape hatch, reading the theme's link token instead. Point `primary` at the same token and the escape hatch has nothing left to do, so it's gone - two variants where there were three, and no call site has to know which one is theme-safe. Every theme now clears AA at rest and on hover: 4.89 -> 9.55 dark, 5.58 -> 10.90 black, 5.85 -> 9.02 light, 6.31 -> 9.73 white. Links shift from #615fff to #826dff on the dark themes and to #6532f5 on the light ones. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Seven places styled something as a link with raw indigo, which meant they kept the same purple on a near-black card as on white and never followed the theme. Splitting them by what they actually are: Four read as links and now take `textLinkClassName()`, picking up the theme's link color, the color-shift hover and the "Underline links" preference - the concurrency page's inline "reset", "+ Add port" on both private-connection forms, "get in touch" on the regions page (which sits between two real TextLinks), and "Show more" on notification cards. None are anchors, which is what the class helper exists for. Two are labels inside a row that is itself the button - "View all" in the chart legend, "Upgrade" in the environment selector. They take the link color only: hover belongs to the row, and a row label isn't the body text the underline preference is for. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The checked track was a raw indigo-500, identical in all four themes, so it never matched the purple links use - lighter and bluer than the link color on the light themes, darker on the dark ones. Read the link token instead, so both accents are the same color and both follow the theme. The checked thumb goes white in every theme to go with it: the token is lighter than the old indigo on the dark themes, and an off-white thumb against it measured 2.80:1, under the 3:1 a control's parts need to stay distinguishable. Thumb-against-track now reads 3.76:1 on the dark themes and 6.31:1 on the light ones, up from 3.40 and 4.58. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The switch's checked track and the primary button were two different purples: the track had just moved onto the link token (lavender-400 on the dark themes) while the button was still a raw indigo-600, so they sat side by side on the account page visibly out of step. They can't both read --color-text-link, because a fill and a text color want opposite things. White button text needs 4.5:1 against the fill, which pins the fill dark; link text on a near-black page needs 4.5:1 against *that*, which pushes the link light. So this adds --color-accent-fill, in the same spirit as the existing error/success fill tokens, and points both at it. lavender-600 is a straight swap for indigo-600 - white on it measures 6.31:1 against the old 6.29:1 - and it's the value the light themes already use for link text, so link, button and switch all agree there. The switch's white thumb improves from 3.76:1 to 6.31:1 against the track. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
It was the only settings row description on the account page ending in one. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
… form The Profile section submitted Full name, Email address and the onboarding emails preference together behind a single Update button. Each row now writes on its own: the name and email rows show their current value as description text with a button that opens a small modal, and the onboarding switch writes straight to the database when you toggle it. Because a switch is now one click one write, with no submit button pacing things, this adds a per-user rate limit for profile writes - /account sits outside /api/* so the global API limiter never covered it - and the marketing emails write uses updateMany so a redundant toggle updates zero rows rather than churning the row and its updatedAt. The email row branches on whether any of your organizations has SSO set up with a live connection, in which case the modal explains that an admin has to make the change. That check is deliberately not the Enterprise plan flag, and it fails closed: if the SSO lookup errors we treat the account as provider-managed rather than allow a write we can't verify. On OSS, with no SSO plugin installed, it short-circuits before any query runs. Recovered from an interrupted session: this typechecks, but it had not been manually tested yet, and the SSO branch in particular still needs a run through. The account page file also carries three colour tweaks to the same rows made in parallel. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
…heme The log level badges were the odd ones out. ERROR and WARN already used tokens, but TRACE and INFO were raw palette purples and blues, and DEBUG was the only solid tile in the row - which left it a dark chip sitting in a white table on the light themes. Every chip is now a translucent wash of its own accent over whatever surface it lands on, drawn from tokens so the stronger-colours preference can reach them. Two more of the same kind: the calendar's selected day used text-text-bright, which is near-black on the light themes and measured 2.66:1 on indigo-600, so it now uses white; and a run's span title fell back to a raw blue-500 instead of the tasks token. The contrast audit storybook also now re-reads its measurements once CSS transitions have settled. Reading at the moment the theme attribute changes pairs the outgoing text colour with the already-updated background, which is how a perfectly fine button came out at 2.75:1. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
… tooltip The chip now sits to the left of the switch and fades in while the pointer is over the control, so flipping the toggle no longer dismisses it - a Radix tooltip closes on pointerdown, which fought the one interaction the preview exists for. Keyboard focus reveals it via :focus-visible rather than focus-within, so a click doesn't strand the chip on screen after the pointer has left. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
… edit icon The Full name and Email address rows put their current value in description text under the label. It now sits as normal text on the right of the row, just left of the action, so the label and the value read as one line and the rows match the shape of the switch and select rows around them. The action itself is now a square icon-only button carrying a pencil glyph rather than the words Update and Edit. The small-icon variant is a fixed 34px wide so a row of icon buttons with different glyph ratios lines up; here there is only one, so it's overridden to a true square against its own height. Inside the modals: the name dialog is titled Full name and its primary button now says Update rather than Edit, and both dialogs drop the label above the input, which only repeated the title a few pixels below it. The inputs carry an aria-label instead so they still have an accessible name. The new icon strokes in currentColor rather than white, so it follows the theme and the button's hover state - a hard-coded white glyph would have all but vanished on Light and White. 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