Repository navigation
Provider env vars table and reworked accent color picker - #3026
Conversation
Ported from #2451. Co-authored-by: ss <[email protected]> Co-Authored-By: Claude Opus 4.8 <[email protected]>
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 3 potential issues.
Bugbot Autofix prepared fixes for all 3 issues found in the latest run.
- ✅ Fixed: Swatch match ignores hex case
- Added .toLowerCase() in normalizeProviderAccentColor so all hex values are consistently lowercased, matching the lowercase swatch constants.
- ✅ Fixed: Custom panel ignores value updates
- Added a useEffect that calls setHsv(initialHsv) whenever the memoized initialHsv changes, keeping the panel in sync with external value updates.
- ✅ Fixed: Hex field blocks incremental edits
- Introduced a local hexInput state with focus tracking so partial keystrokes update the visible input, while only committing when a full valid hex is entered.
Or push these changes by commenting:
@cursor push 14f4f95377
Preview (14f4f95377)
diff --git a/apps/web/src/components/settings/ProviderAccentColorPicker.tsx b/apps/web/src/components/settings/ProviderAccentColorPicker.tsx
--- a/apps/web/src/components/settings/ProviderAccentColorPicker.tsx
+++ b/apps/web/src/components/settings/ProviderAccentColorPicker.tsx
@@ -87,8 +87,21 @@
const { onCommit } = props;
const initialHsv = useMemo(() => hexToHsv(props.value), [props.value]);
const [hsv, setHsv] = useState(initialHsv);
+
+ useEffect(() => {
+ setHsv(initialHsv);
+ }, [initialHsv]);
+
const currentColor = hsvToHex(hsv.h, hsv.s, hsv.v);
+ const [hexInput, setHexInput] = useState(currentColor);
+ const hexInputFocused = useRef(false);
+ useEffect(() => {
+ if (!hexInputFocused.current) {
+ setHexInput(currentColor);
+ }
+ }, [currentColor]);
+
const commitHsv = useCallback(
(nextHsv: typeof hsv) => {
setHsv(nextHsv);
@@ -162,12 +175,21 @@
/>
</div>
<input
- value={currentColor}
+ value={hexInput}
+ onFocus={() => {
+ hexInputFocused.current = true;
+ }}
+ onBlur={() => {
+ hexInputFocused.current = false;
+ setHexInput(currentColor);
+ }}
onChange={(event) => {
const nextColor = event.currentTarget.value;
- if (!/^#[\da-f]{6}$/i.test(nextColor)) return;
- setHsv(hexToHsv(nextColor));
- props.onCommit(nextColor);
+ setHexInput(nextColor);
+ if (/^#[\da-f]{6}$/i.test(nextColor)) {
+ setHsv(hexToHsv(nextColor));
+ props.onCommit(nextColor);
+ }
}}
className="h-8 rounded-md border border-input bg-background px-2 font-mono text-xs text-foreground outline-none transition-colors focus:border-ring"
aria-label="Custom hex accent color"
diff --git a/apps/web/src/providerInstances.ts b/apps/web/src/providerInstances.ts
--- a/apps/web/src/providerInstances.ts
+++ b/apps/web/src/providerInstances.ts
@@ -84,7 +84,7 @@
export function normalizeProviderAccentColor(value: string | undefined): string | undefined {
const trimmed = value?.trim();
if (!trimmed) return undefined;
- return /^#[0-9a-fA-F]{6}$/u.test(trimmed) ? trimmed : undefined;
+ return /^#[0-9a-fA-F]{6}$/u.test(trimmed) ? trimmed.toLowerCase() : undefined;
}
/**You can send follow-ups to the cloud agent here.
Reviewed by Cursor Bugbot for commit 2210b24. Configure here.
| PROVIDER_ACCENT_SWATCHES.includes(normalized as (typeof PROVIDER_ACCENT_SWATCHES)[number]) | ||
| ? normalized | ||
| : ""; | ||
| const customSelected = Boolean(normalized && selectedValue === ""); |
There was a problem hiding this comment.
Swatch match ignores hex case
Medium Severity
Preset swatch selection uses exact PROVIDER_ACCENT_SWATCHES.includes on normalizeProviderAccentColor output, which preserves hex letter case. Stored accents like #2563EB no longer match lowercase presets, so the UI treats them as custom and leaves no preset highlighted—unlike the removed picker that compared with toLowerCase().
Reviewed by Cursor Bugbot for commit 2210b24. Configure here.
| }) { | ||
| const { onCommit } = props; | ||
| const initialHsv = useMemo(() => hexToHsv(props.value), [props.value]); | ||
| const [hsv, setHsv] = useState(initialHsv); |
There was a problem hiding this comment.
Custom panel ignores value updates
Medium Severity
ProviderCustomColorPanel derives initialHsv from props.value but keeps local hsv only in useState(initialHsv). When the accent changes externally while the popover stays mounted—e.g. picking a preset swatch with the custom popover open—the plane and hex field keep showing the previous color.
Reviewed by Cursor Bugbot for commit 2210b24. Configure here.
| if (!/^#[\da-f]{6}$/i.test(nextColor)) return; | ||
| setHsv(hexToHsv(nextColor)); | ||
| props.onCommit(nextColor); | ||
| }} |
There was a problem hiding this comment.
Hex field blocks incremental edits
Low Severity
The custom hex input is controlled by currentColor and its onChange returns unless the entire value matches # plus six hex digits. Intermediate keystrokes or backspacing never update state, so users cannot edit the field character-by-character—only paste a full valid hex in one step.
Reviewed by Cursor Bugbot for commit 2210b24. Configure here.
ApprovabilityVerdict: Needs human review UI refactor for env vars table and color picker. Two medium-severity unresolved comments identify functional bugs in the new color picker (case-sensitive hex matching, state sync issues) that should be addressed before merging. You can customize Macroscope's approvability policy. Learn more. |
|
🚀 Expo continuous deployment is ready!
|
…MIT ONLY, DO NOT SQUASH (#100) * fix: maintain reasoning selections for multiple providers (pingdotgg#2760) * [codex] Bump Effect to beta.73 and migrate compatibility APIs (pingdotgg#2840) Co-authored-by: codex <[email protected]> * Add Claude Opus 4.8 support (pingdotgg#2849) * Migrate TypeScript checks to Effect TSGo (pingdotgg#2851) * Extract collection performance refactors from mobile stack (pingdotgg#2854) Co-authored-by: codex <[email protected]> * Extract independent web cleanup from mobile stack (pingdotgg#2855) Co-authored-by: Julius Marminge <[email protected]> Co-authored-by: codex <[email protected]> * Ensure Electron runtime is installed in release workflow (pingdotgg#2861) * T3 Code Mobile [WIP] (pingdotgg#2013) Co-authored-by: codex <[email protected]> Co-authored-by: Julius Marminge <[email protected]> Co-authored-by: Yash Singh <[email protected]> * chore: add vendored reference repo subtree sync tooling (pingdotgg#2902) Co-authored-by: codex <[email protected]> * Use HttpApi for Environment APIs & standardize authn/authz (pingdotgg#2858) Co-authored-by: codex <[email protected]> * chore: add Alchemy reference repo subtree (pingdotgg#2918) Co-authored-by: codex <[email protected]> * fix(desktop): Include standard Linux AppImage icons for Niri/Noctalia (pingdotgg#2915) * Probe Cursor models via list_available_models (pingdotgg#2428) Co-authored-by: codex <[email protected]> Co-authored-by: Julius Marminge <[email protected]> * Migrate workspace to Vite+ and pnpm (pingdotgg#2899) Co-authored-by: Julius Marminge <[email protected]> Co-authored-by: Cursor Agent <[email protected]> * test(web): CI stability - prebundle react-dom client for browser tests (pingdotgg#2928) * fix(ssh): Surface redacted stdout for failed commands (pingdotgg#2920) * fix(desktop): Preserve SSH HTTP auth status (pingdotgg#2923) Co-authored-by: Julius Marminge <[email protected]> * fix: build web before desktop release packaging (pingdotgg#2934) Co-authored-by: Julius Marminge <[email protected]> * ci: let setup-vp install dependencies (pingdotgg#2936) Co-authored-by: Julius Marminge <[email protected]> * fix(release): surface desktop packaging subprocess output (pingdotgg#2937) Co-authored-by: Julius Marminge <[email protected]> * chore: setup eas ci (pingdotgg#2911) Co-authored-by: Julius Marminge <[email protected]> * fix(release): use workspace electron-builder for desktop packaging (pingdotgg#2938) Co-authored-by: Julius Marminge <[email protected]> * [codex] remove duplicated pnpm root config (pingdotgg#2939) Co-authored-by: Julius Marminge <[email protected]> * fix(release): install dependency closures in partial jobs (pingdotgg#2941) Co-authored-by: Julius Marminge <[email protected]> * [codex] split ci workflow jobs (pingdotgg#2940) Co-authored-by: Julius Marminge <[email protected]> * [codex] fix mobile native static analysis source discovery (pingdotgg#2942) Co-authored-by: Julius Marminge <[email protected]> * fix(release): preserve desktop artifact arch (pingdotgg#2943) Co-authored-by: Julius Marminge <[email protected]> * [codex] Fix desktop packaging patched dependencies (pingdotgg#2944) Co-authored-by: codex <[email protected]> * [codex] Filter staged desktop patched dependencies (pingdotgg#2945) Co-authored-by: codex <[email protected]> * fix(release): install hosted web workspace closure (pingdotgg#2949) * fix(cli): bundle patched diff parser dependency (pingdotgg#2957) Co-authored-by: Julius Marminge <[email protected]> * Prevent settings layout shifts with scrollbar gutters (pingdotgg#2960) * [codex] fix release finalize install (pingdotgg#2961) Co-authored-by: Julius Marminge <[email protected]> * fix(source-control): handle self-hosted GitLab, multi-account GitHub auth & azure devops web url (pingdotgg#2480) Co-authored-by: Julius Marminge <[email protected]> * [codex] Avoid shell for Node executable spawns (pingdotgg#2952) Co-authored-by: Julius Marminge <[email protected]> * [codex] Avoid shell for Windows environment probe (pingdotgg#2951) Co-authored-by: Julius Marminge <[email protected]> * fix(composer): support spaces in file mentions (pingdotgg#2625) * [codex] Avoid shell for system executables (pingdotgg#2950) Co-authored-by: Julius Marminge <[email protected]> * feat(relay): Add managed relay tunnels and APN service (pingdotgg#2837) Co-authored-by: codex <[email protected]> * Restructure documentation into topical folders (pingdotgg#2963) * move * dont fail if env-file is unspecified * fallback to None when RELAY_DOMAIN is unset * implicit install from vp * forward args directly * bump alchemy to fix absolute drizzle schema out * bump alchemy to fix drizzle schema out attempt 2 * Migrate tests to vite-plus test APIs (pingdotgg#2964) * remove `vp staged` * publish deploy status on relay deploy workflow * Use pnpm for server publish workflow (pingdotgg#2966) * Rename function for publishing arguments to vp pm (pingdotgg#2967) * Remove duplicate 'publish' argument in CLI script * Refactor recoverable Effect fallbacks to orElseSucceed (pingdotgg#2968) * document vp instead of mise * link * cleanup * tip * we support cursor, duhhh * include @latest * fix(cloud): use Electron fetch for proxying Clerk IPC requests (pingdotgg#2973) * fix: handle Claude Agent SDK 0.3.x system messages to stop runtime-warning flood (pingdotgg#2872) Co-authored-by: Julius Marminge <[email protected]> * "claude system message" instead of "runtime warning" when using 4.8 from claude code (pingdotgg#2972) * fix(desktop): stop looping macOS TCC permission prompts (pingdotgg#2745) Co-authored-by: Julius Marminge <[email protected]> Co-authored-by: Julius Marminge <[email protected]> * Annotate relay error spans with schema fields (pingdotgg#2976) * [codex] Enrich relay authorization diagnostics (pingdotgg#2977) Co-authored-by: codex <[email protected]> * [codex] Extract infrastructure, telemetry, and test tooling (pingdotgg#2994) Co-authored-by: codex <[email protected]> * feat(grok): add Grok CLI provider via ACP (pingdotgg#2809) Co-authored-by: Julius Marminge <[email protected]> * [codex] Fix main CI Effect test runtimes (pingdotgg#3008) Co-authored-by: codex <[email protected]> * Add Claude Fable 5 model (pingdotgg#3009) Co-authored-by: codex <[email protected]> * chore(release): prepare v0.0.26 * [codex] Rebrand T3 Cloud as T3 Connect (pingdotgg#3011) Co-authored-by: codex <[email protected]> * Fix Clerk browser test mock (pingdotgg#3013) Co-authored-by: codex <[email protected]> * chore(release): prepare v0.0.27 * Bundle DM Sans and JetBrains Mono fonts instead of Google Fonts (pingdotgg#3014) Co-authored-by: ss <[email protected]> Co-authored-by: Claude Opus 4.8 <[email protected]> * Mute icons in labeled controls and suppress popup focus rings (pingdotgg#3015) Co-authored-by: ss <[email protected]> Co-authored-by: Claude Opus 4.8 <[email protected]> * Polish dialog/alert surfaces and unauthenticated provider banner (pingdotgg#3016) Co-authored-by: ss <[email protected]> Co-authored-by: Claude Opus 4.8 <[email protected]> * fix(marketing) : marketing showing wrong icons on linux (pingdotgg#2696) Co-authored-by: Julius Marminge <[email protected]> * Misc markdown styling improvements (pingdotgg#3017) Co-authored-by: ss <[email protected]> Co-authored-by: Claude Opus 4.8 <[email protected]> Co-authored-by: codex <[email protected]> Co-authored-by: Cursor Agent <[email protected]> Co-authored-by: cursor[bot] <206951365+cursor[bot]@users.noreply.github.com> * Model picker UI Improvements, Virtualize Model List (pingdotgg#3021) Co-authored-by: ss <[email protected]> Co-authored-by: Claude Opus 4.8 <[email protected]> * Provider env vars table and reworked accent color picker (pingdotgg#3026) Co-authored-by: ss <[email protected]> Co-authored-by: Claude Opus 4.8 <[email protected]> * Polish branch picker trigger, scroll fade, and list layout (pingdotgg#3024) Co-authored-by: ss <[email protected]> Co-authored-by: Claude Opus 4.8 <[email protected]> Co-authored-by: Cursor Agent <[email protected]> * Polish web context menu fallback and sidebar icon actions (pingdotgg#3025) Co-authored-by: ss <[email protected]> Co-authored-by: Claude Opus 4.8 <[email protected]> * Composer polish: focus ring, send/stop buttons, command menu, context meter, answer panel (pingdotgg#3018) Co-authored-by: ss <[email protected]> Co-authored-by: Claude Opus 4.8 <[email protected]> Co-authored-by: codex <[email protected]> * Extract changed files card with compact aligned diff stats (pingdotgg#3023) Co-authored-by: ss <[email protected]> Co-authored-by: Claude Opus 4.8 <[email protected]> Co-authored-by: codex <[email protected]> * ci: fix vp test invocation (-r and --filter are mutually exclusive) --------- Co-authored-by: Adam Buchweitz <[email protected]> Co-authored-by: Julius Marminge <[email protected]> Co-authored-by: codex <[email protected]> Co-authored-by: Ibrahim Elkamali <[email protected]> Co-authored-by: Theo Browne <[email protected]> Co-authored-by: Julius Marminge <[email protected]> Co-authored-by: Yash Singh <[email protected]> Co-authored-by: Mike Olson <[email protected]> Co-authored-by: Julius Marminge <[email protected]> Co-authored-by: Cursor Agent <[email protected]> Co-authored-by: Julius Marminge <[email protected]> Co-authored-by: Guilherme Vieira <[email protected]> Co-authored-by: Abdul Azeez <[email protected]> Co-authored-by: Peter Hozák <[email protected]> Co-authored-by: Ishan <[email protected]> Co-authored-by: Milosz Jankiewicz <[email protected]> Co-authored-by: t3-code[bot] <269035359+t3-code[bot]@users.noreply.github.com> Co-authored-by: ss <[email protected]> Co-authored-by: Claude Opus 4.8 <[email protected]> Co-authored-by: Ruzbyte <[email protected]> Co-authored-by: cursor[bot] <206951365+cursor[bot]@users.noreply.github.com> Co-authored-by: aaditagrawal <[email protected]>
) Co-authored-by: ss <[email protected]> Co-authored-by: Claude Opus 4.8 <[email protected]>
) Co-authored-by: ss <[email protected]> Co-authored-by: Claude Opus 4.8 <[email protected]>
) Co-authored-by: ss <[email protected]> Co-authored-by: Claude Opus 4.8 <[email protected]>



Ports the provider-settings part of #2451 by @sandersonstabo, rebased onto current main.
Table(newui/table.tsx) with alternating rows, a Sensitive column with the sharedCheckbox, and per-row remove — much less visual noise (Julius's "sensitive column is waaaay too big" feedback)ProviderAccentColorPickerbuilt on Spell UI'sColorSelector: preset swatches + a custom-color swatch opening a flush popover picker, a reserved X clear button (no layout shift), and a debounced commit (commitDelayMs) fixing the color-picker lag when dragging rapidlyoverflow-visibleso the color popover isn't clippedInitials on accent badges are untouched (kept, per Julius's feedback on #2451). The provider status copy/tooltip changes from the original PR were not ported.
Part of splitting #2451 into reviewable frontend-only pieces.
🤖 Generated with Claude Code
Note
Low Risk
Frontend-only settings UI; env var persistence logic is unchanged aside from control presentation.
Overview
Reworks provider instance settings UI: accent colors and environment variables get cleaner editors, and popovers/icons align with the card surface.
Accent color moves out of
ProviderInstanceCardintoProviderAccentColorPickerwith preset swatches (ColorSelector), a pipette swatch opening an HSV panel (saturation/value plane, hue slider, hex input), a reserved clear control, and 120ms debounced commits to reduce lag while dragging.components.jsonadds the@spellregistry (alongside existing UI registries).Environment variables switch from stacked bordered rows and native checkboxes to a
Tablelayout with a compact Sensitive column using the sharedCheckbox.Layout polish:
SettingsSectioncards useoverflow-visibleso the color popover isn’t clipped; provider card icons passindicatorBackground="var(--card)"and status rings usering-cardso dots/badges sit on the card. Minor spacing on the settings “Restore defaults” icon.Reviewed by Cursor Bugbot for commit e1bbe1a. Bugbot is set up for automated code reviews on this repo. Configure here.
Note
Add provider env vars table and rework accent color picker in provider settings
ProviderAccentColorPickerin ProviderInstanceCard.tsx with a new shared component that supports HSV/hex custom color input, swatch selection, and a 120ms debounced commit with flush-on-unmount.ProviderEnvironmentSectionfrom a grid of inputs to a semantic table using new table.tsx UI primitives and aCheckboxcomponent.Macroscope summarized e1bbe1a.