fix(web): add consistent settings controls and utility tooltips

apps/web/src/components/chat/ComposerControl.tsx

@@ -24,10 +24,9 @@ function composerControlClassName(
       : "h-7 gap-1.5 px-2.5 font-medium text-secondary-label [&_svg:not([class*='text-'])]:text-muted-foreground hover:text-foreground sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4",
     "aria-pressed:surface-selected-soft aria-pressed:text-strong-foreground aria-pressed:hover:surface-ghost-hover",
     variant === "settings"
-      ? "surface-raised text-foreground hover:surface-raised-hover data-pressed:surface-raised-hover"
+      ? "surface-well text-foreground"
       : "hover:surface-ghost-hover data-pressed:surface-ghost-hover",
-    // Settings rows set it beside `SelectTrigger size="sm"`, so it takes the same heights.
-    variant === "settings" && size === "sm" && "h-8 sm:h-7",
+    variant === "settings" && "h-7 sm:h-7",
     className,
   );
 }

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

@@ -115,6 +115,7 @@ function CheckoutGroupingSelect({ member }: { member: SidebarProjectGroupMember
       }}
     >
       <SelectTrigger
+        variant="well"
         size="sm"
         title={
           selection === "inherit"

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

@@ -146,7 +146,11 @@ export function SourceControlAccountSettings({
                       });
                     }}
                   >
-                    <SelectTrigger size="sm" aria-label={`${label} account for ${group.host}`}>
+                    <SelectTrigger
+                      variant="well"
+                      size="sm"
+                      aria-label={`${label} account for ${group.host}`}
+                    >
                       <SelectValue>
                         {(value: string) =>
                           value === ACTIVE_ACCOUNT ? (

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

@@ -209,7 +209,7 @@ function TelemetryExportForm() {
               <div className="flex gap-2">
                 <Input
                   id={key}
-                  size="sm"
+                  size="settings"
                   type="url"
                   pattern="[Hh][Tt][Tt][Pp][Ss]?://.*"
                   title="Enter an HTTP or HTTPS endpoint, or leave empty to disable export."

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

@@ -1,5 +1,3 @@
-import { ChevronDownIcon } from "lucide-react";
-
 import { updateClientSettings, useClientSettings } from "../../hooks/useSettings";
 import { ThreadDetailsItemsMenuItems } from "../chat/ThreadDetailsItemsMenu";
 import {
@@ -8,7 +6,7 @@ import {
   RESET_THREAD_DETAILS_ITEMS,
   THREAD_DETAILS_ITEMS,
 } from "../chat/threadDetailsItems";
-import { Button } from "../ui/button";
+import { SelectButton } from "../ui/select";
 import { Menu, MenuPopup, MenuTrigger } from "../ui/menu";
 import { SettingResetButton, SettingsRow } from "./settingsLayout";
 import { searchableSetting } from "./settingsSearch";
@@ -32,18 +30,15 @@ export function ThreadDetailsItemsRow() {
         <Menu>
           <MenuTrigger
             render={
-              <Button
-                variant="secondary"
+              <SelectButton
+                variant="well"
                 size="sm"
                 className="w-full @min-[26rem]/settings-row:w-40"
                 aria-label={`Thread details: ${enabled} of ${THREAD_DETAILS_ITEMS.length} on`}
               />
             }
           >
-            <span className="flex-1 text-start">
-              {enabled} of {THREAD_DETAILS_ITEMS.length} on
-            </span>
-            <ChevronDownIcon aria-hidden />
+            {enabled} of {THREAD_DETAILS_ITEMS.length} on
           </MenuTrigger>
           <MenuPopup align="end">
             <ThreadDetailsItemsMenuItems />

apps/web/src/components/sidebar/SidebarChrome.tsx

@@ -13,6 +13,7 @@ import {
   SidebarStageBackdrop,
   useEnvironmentStageLabel,
 } from "../SidebarStageBackdrop";
+import { TooltipProvider } from "../ui/tooltip";
 import { Badge } from "../ui/badge";
 import { T3Wordmark } from "../T3Wordmark";
 import {
@@ -168,41 +169,43 @@ const SidebarUtilityMenu = memo(function SidebarUtilityMenu() {
   };
 
   return (
-    <SidebarMenu className="flex-row items-center">
-      {isOnUtilityPage ? (
-        <SidebarMenuItem className="min-w-0 flex-1">
-          <SidebarMenuButton size="control" onClick={handleBackClick}>
-            <ArrowLeftIcon />
-            <span>Back</span>
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-      ) : (
-        // Keep the three utilities in the design's compact, icon-only row.
-        <SidebarMenuItem className="shrink-0">
-          <div className="flex gap-1">
-            <SidebarUtilityItem
-              icon={<SettingsIcon className="size-4" />}
-              label="Settings"
-              onClick={handleSettingsClick}
-            />
-            {pullRequestsSupported ? (
+    <TooltipProvider>
+      <SidebarMenu className="flex-row items-center">
+        {isOnUtilityPage ? (
+          <SidebarMenuItem className="min-w-0 flex-1">
+            <SidebarMenuButton size="control" onClick={handleBackClick}>
+              <ArrowLeftIcon />
+              <span>Back</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        ) : (
+          // Keep the three utilities in the design's compact, icon-only row.
+          <SidebarMenuItem className="shrink-0">
+            <div className="flex gap-1">
               <SidebarUtilityItem
-                icon={<PullRequestGlyph.pullRequest className="size-4" />}
-                label="Pull Requests"
-                onClick={handlePullRequestsClick}
+                icon={<SettingsIcon className="size-4" />}
+                label="Settings"
+                onClick={handleSettingsClick}
               />
-            ) : null}
-            <SidebarUtilityItem
-              icon={<ChartNoAxesColumnIcon className="size-4" />}
-              label="Usage"
-              onClick={handleUsageClick}
-            />
-          </div>
-        </SidebarMenuItem>
-      )}
-      <SidebarThreadUndoNotice />
-      <SidebarUpdatePill />
-    </SidebarMenu>
+              {pullRequestsSupported ? (
+                <SidebarUtilityItem
+                  icon={<PullRequestGlyph.pullRequest className="size-4" />}
+                  label="Pull Requests"
+                  onClick={handlePullRequestsClick}
+                />
+              ) : null}
+              <SidebarUtilityItem
+                icon={<ChartNoAxesColumnIcon className="size-4" />}
+                label="Usage"
+                onClick={handleUsageClick}
+              />
+            </div>
+          </SidebarMenuItem>
+        )}
+        <SidebarThreadUndoNotice />
+        <SidebarUpdatePill />
+      </SidebarMenu>
+    </TooltipProvider>
   );
 });
 

apps/web/src/components/ui/button.tsx

@@ -122,6 +122,8 @@ const contentButtonVariants = cva("outline-none", {
       "action-row-destructive":
         "flex h-7.5 items-center gap-2 rounded-control px-2 text-start text-label text-destructive-foreground hover:surface-ghost-hover focus-visible:surface-ghost-hover disabled:pointer-events-none disabled:opacity-64",
       tab: "inline-flex h-7 min-w-0 max-w-80 cursor-pointer items-center gap-1.75 rounded-control px-2.5 text-left text-control text-muted-foreground [-webkit-app-region:no-drag] hover:surface-ghost-hover hover:text-foreground focus-visible:inset-ring-2 focus-visible:inset-ring-ring",
+      breadcrumb:
+        "inline-flex h-7 min-w-0 cursor-pointer items-center gap-1.75 rounded-control px-2.5 text-left text-control [&>:first-child]:shrink-0 text-muted-foreground [-webkit-app-region:no-drag] hover:surface-ghost-hover hover:text-foreground focus-visible:inset-ring-2 focus-visible:inset-ring-ring",
       "tab-close":
         "flex size-4 cursor-pointer items-center justify-center rounded-kbd text-foreground opacity-0 [-webkit-app-region:no-drag] group-hover/tab:opacity-100 focus-visible:opacity-100 focus-visible:inset-ring-2 focus-visible:inset-ring-ring",
     },

apps/web/src/components/ui/input.tsx

@@ -4,7 +4,7 @@ import type * as React from "react";
 import { cn } from "~/lib/utils";
 
 type InputProps = Omit<InputPrimitive.Props & React.RefAttributes<HTMLInputElement>, "size"> & {
-  size?: "sm" | "compact" | "default" | "lg" | number;
+  size?: "sm" | "compact" | "settings" | "default" | "lg" | number;
   font?: "default" | "mono";
   placeholderTone?: "default" | "dim";
   unstyled?: boolean;
@@ -25,6 +25,8 @@ function Input({
     placeholderTone === "dim" && "placeholder:text-dim-foreground",
     size === "compact" &&
       "h-7 px-[calc(--spacing(2.5)-1px)] text-meta leading-7 sm:h-7 sm:leading-7",
+    size === "settings" &&
+      "h-6.5 px-[calc(--spacing(2.5)-1px)] leading-6.5 sm:h-6.5 sm:leading-6.5",
     size === "sm" && "h-7.5 px-[calc(--spacing(2.5)-1px)] leading-7.5 sm:h-6.5 sm:leading-6.5",
     size === "lg" && "h-9.5 leading-9.5 sm:h-8.5 sm:leading-8.5",
     props.type === "search" &&

apps/web/src/components/ui/number-field.tsx

@@ -12,7 +12,7 @@ export function NumberField({
   size = "default",
   ...props
 }: NumberFieldPrimitive.Root.Props & {
-  size?: "sm" | "default";
+  size?: "sm" | "compact" | "default";
 }): React.ReactElement {
   const generatedId = React.useId();
   const fieldId = id ?? generatedId;
@@ -54,7 +54,7 @@ export function NumberFieldDecrement({
   return (
     <NumberFieldPrimitive.Decrement
       className={cn(
-        "relative flex shrink-0 cursor-pointer items-center justify-center rounded-s-[calc(var(--control-radius)-1px)] in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:surface-ghost-hover hover:[&_svg]:text-foreground",
+        "relative flex shrink-0 cursor-pointer items-center justify-center rounded-s-[calc(var(--control-radius)-1px)] in-data-[size=compact]:px-1 in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:surface-ghost-hover hover:[&_svg]:text-foreground",
         className,
       )}
       data-slot="number-field-decrement"
@@ -72,7 +72,7 @@ export function NumberFieldIncrement({
   return (
     <NumberFieldPrimitive.Increment
       className={cn(
-        "relative flex shrink-0 cursor-pointer items-center justify-center rounded-e-[calc(var(--control-radius)-1px)] in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:surface-ghost-hover hover:[&_svg]:text-foreground",
+        "relative flex shrink-0 cursor-pointer items-center justify-center rounded-e-[calc(var(--control-radius)-1px)] in-data-[size=compact]:px-1 in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:surface-ghost-hover hover:[&_svg]:text-foreground",
         className,
       )}
       data-slot="number-field-increment"
@@ -93,6 +93,7 @@ export function NumberFieldInput({
         // With a unit the value hugs it and the pair centers between the steppers.
         "group-data-has-unit/number-field:ms-auto group-data-has-unit/number-field:w-auto group-data-has-unit/number-field:min-w-[2ch] group-data-has-unit/number-field:max-w-[7ch] group-data-has-unit/number-field:grow-0 group-data-has-unit/number-field:pe-1 group-data-has-unit/number-field:text-end group-data-has-unit/number-field:field-sizing-content",
         "h-8.5 in-data-[size=sm]:h-7.5 w-full min-w-0 grow bg-transparent in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] text-center tabular-nums in-data-[size=sm]:leading-7.5 leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] sm:h-7.5 sm:in-data-[size=sm]:h-6.5 sm:in-data-[size=sm]:leading-8.5 sm:leading-7.5",
+        "in-data-[size=compact]:h-6.5 in-data-[size=compact]:leading-6.5 in-data-[size=compact]:px-1 sm:in-data-[size=compact]:h-6.5 sm:in-data-[size=compact]:leading-6.5",
         className,
       )}
       data-slot="number-field-input"

apps/web/src/components/ui/select.tsx

@@ -22,6 +22,7 @@ const selectTriggerVariants = cva(
         // The raised recipe; open and focused trade the rim for the ring stroke.
         default:
           "w-full min-w-36 surface-raised text-foreground [:hover,[data-pressed]]:not-data-popup-open:surface-raised-hover focus-visible:not-data-disabled:surface-focus data-popup-open:not-data-disabled:surface-focus aria-invalid:not-data-disabled:surface-invalid focus-visible:aria-invalid:not-data-disabled:surface-invalid-focus data-popup-open:aria-invalid:not-data-disabled:surface-invalid [&_svg:not([class*='text-'])]:text-muted-foreground",
+        well: "w-full min-w-36 surface-well text-foreground [:hover,[data-pressed]]:not-data-popup-open:surface-well focus-visible:not-data-disabled:surface-focus data-popup-open:not-data-disabled:surface-focus aria-invalid:not-data-disabled:surface-invalid focus-visible:aria-invalid:not-data-disabled:surface-invalid-focus data-popup-open:aria-invalid:not-data-disabled:surface-invalid [&_svg:not([class*='text-'])]:text-muted-foreground",
         ghost:
           "border-transparent text-secondary-label focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-ring [:hover,[data-pressed],[data-popup-open]]:surface-ghost-hover [:hover,[data-pressed],[data-popup-open]]:text-foreground [&_svg:not([class*='text-'])]:text-muted-foreground",
       },
@@ -85,14 +86,17 @@ function SelectTrigger({
 function SelectButton({
   className,
   size = "default",
+  variant = "default",
   children,
   leadingIcon,
   render,
   ...props
 }: useRender.ComponentProps<"button"> &
-  Pick<VariantProps<typeof selectTriggerVariants>, "size"> & { leadingIcon?: React.ReactNode }) {
+  Pick<VariantProps<typeof selectTriggerVariants>, "size" | "variant"> & {
+    leadingIcon?: React.ReactNode;
+  }) {
   const defaultProps = {
-    className: cn(selectTriggerVariants({ size }), className),
+    className: cn(selectTriggerVariants({ size, variant }), className),
     "data-slot": "select-trigger",
     type: render ? undefined : ("button" as const),
   };