feat(web): add colored PR text preference

apps/web/src/components/ThreadStatusIndicators.tsx

@@ -31,6 +31,7 @@ import {
 import { useRender } from "@base-ui/react/use-render";
 import { type ReactNode, type AnimationEvent, type MouseEvent, type ReactElement } from "react";
 import { cn } from "../lib/utils";
+import { useClientSettings } from "../hooks/useSettings";
 import { revealThreadTerminal } from "../lib/revealThreadTerminal";
 
 import { useEnvironmentQuery } from "../state/query";
@@ -259,6 +260,7 @@ function PullRequestBadge({
   onOpenList: () => void;
   onOpenPullRequest: (event: MouseEvent<HTMLElement>, url?: string) => void;
 }) {
+  const colorizePullRequestText = useClientSettings((settings) => settings.colorizePullRequestText);
   const onClick = opensList
     ? (event: MouseEvent<HTMLElement>) => {
         event.preventDefault();
@@ -287,7 +289,9 @@ function PullRequestBadge({
           className={cn("contents font-normal text-xs tabular-nums", presentation.toneClassName)}
         >
           <presentation.Icon aria-hidden className="size-3 shrink-0" />
-          <span className="text-secondary-label">{presentation.text}</span>
+          <span className={colorizePullRequestText ? undefined : "text-secondary-label"}>
+            {presentation.text}
+          </span>
         </span>
       </TooltipTrigger>
       <TooltipPopup
@@ -831,6 +835,7 @@ export function ThreadSearchPullRequestNumber({
   enabled?: boolean;
   settled?: boolean;
 }) {
+  const colorizePullRequestText = useClientSettings((settings) => settings.colorizePullRequestText);
   const matched = pullRequestMatchesSearchQuery(thread, query);
   const supportsMultiplePullRequests = useSupportsMultiplePullRequests(thread.environmentId);
   const linked = useLinkedThreadPullRequest(
@@ -882,7 +887,9 @@ export function ThreadSearchPullRequestNumber({
     >
       {/* text-current opts out of the command palette's muted icon color. */}
       <presentation.Icon aria-hidden className="size-3 shrink-0 text-current" />
-      <span>{presentation.text}</span>
+      <span className={colorizePullRequestText ? undefined : "text-secondary-label"}>
+        {presentation.text}
+      </span>
     </span>
   );
 }

apps/web/src/components/settings/AppearanceSettingsPanel.tsx

@@ -275,6 +275,32 @@ export function AppearanceSettingsPanel() {
           }
         />
         <ThreadDetailsItemsRow />
+        <SettingsRow
+          {...searchableSetting("colorize-pull-request-text")}
+          description="Color sidebar PR numbers and stack counts to match their status icons."
+          resetAction={
+            settings.colorizePullRequestText !==
+            DEFAULT_UNIFIED_SETTINGS.colorizePullRequestText ? (
+              <SettingResetButton
+                label="color PR text"
+                onClick={() =>
+                  updateSettings({
+                    colorizePullRequestText: DEFAULT_UNIFIED_SETTINGS.colorizePullRequestText,
+                  })
+                }
+              />
+            ) : null
+          }
+          control={
+            <Switch
+              checked={settings.colorizePullRequestText}
+              onCheckedChange={(checked) =>
+                updateSettings({ colorizePullRequestText: Boolean(checked) })
+              }
+              aria-label="Color PR text"
+            />
+          }
+        />
         <SettingsRow
           {...searchableSetting("effort-display")}
           description="Show reasoning effort in the composer as its name, such as High, or as bars."

apps/web/src/components/settings/SettingsPanels.tsx

@@ -434,6 +434,9 @@ export function useSettingsRestore(onRestored?: () => void) {
       ? ["Diff colors"]
       : []),
     ...(settings.chatWidth !== DEFAULT_UNIFIED_SETTINGS.chatWidth ? ["Chat width"] : []),
+    ...(settings.colorizePullRequestText !== DEFAULT_UNIFIED_SETTINGS.colorizePullRequestText
+      ? ["Color PR text"]
+      : []),
     ...(settings.effortDisplay !== DEFAULT_UNIFIED_SETTINGS.effortDisplay
       ? ["Effort display"]
       : []),
@@ -609,6 +612,7 @@ export function useSettingsRestore(onRestored?: () => void) {
       appearanceContrast: DEFAULT_UNIFIED_SETTINGS.appearanceContrast,
       diffColorScheme: DEFAULT_UNIFIED_SETTINGS.diffColorScheme,
       chatWidth: DEFAULT_UNIFIED_SETTINGS.chatWidth,
+      colorizePullRequestText: DEFAULT_UNIFIED_SETTINGS.colorizePullRequestText,
       effortDisplay: DEFAULT_UNIFIED_SETTINGS.effortDisplay,
       mathRenderingEnabled: DEFAULT_UNIFIED_SETTINGS.mathRenderingEnabled,
       timestampFormat: DEFAULT_UNIFIED_SETTINGS.timestampFormat,

apps/web/src/components/settings/settingsSearch.ts

@@ -333,6 +333,12 @@ export const SETTINGS_SEARCH_ITEMS = [
       "customize show hide panel card environment editor scripts branch pull request git changes servers automations lineage usage limits 5 hour weekly quota tokens context window",
     ],
   },
+  {
+    id: "colorize-pull-request-text",
+    title: "Color PR text",
+    to: "/settings/appearance",
+    searchTerms: ["pull request merge request sidebar indicator badge number stack status color"],
+  },
   {
     id: "effort-display",
     title: "Effort display",

packages/contracts/src/settings.ts

@@ -357,6 +357,7 @@ export const ClientSettingsSchema = Schema.Struct({
   ),
   chatWidth: ChatWidth.pipe(Schema.withDecodingDefault(Effect.succeed("comfortable" as const))),
   effortDisplay: EffortDisplay.pipe(Schema.withDecodingDefault(Effect.succeed("label" as const))),
+  colorizePullRequestText: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(true))),
   loadBalancingEnabled: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(false))),
   loadBalancingWeights: LoadBalancingWeights.pipe(Schema.withDecodingDefault(Effect.succeed({}))),
   appearanceContrast: AppearanceContrast.pipe(
@@ -1770,6 +1771,7 @@ export const ClientSettingsPatch = Schema.Struct({
   diffColorScheme: Schema.optionalKey(DiffColorScheme),
   chatWidth: Schema.optionalKey(ChatWidth),
   effortDisplay: Schema.optionalKey(EffortDisplay),
+  colorizePullRequestText: Schema.optionalKey(Schema.Boolean),
   loadBalancingEnabled: Schema.optionalKey(Schema.Boolean),
   loadBalancingWeights: Schema.optionalKey(LoadBalancingWeights),
   appearanceContrast: Schema.optionalKey(AppearanceContrast),