feat(web): New design brings back color where it means something

apps/web/src/components/CommandPalette.logic.ts

@@ -809,8 +809,8 @@ export function buildPaletteRemoteSourceReadiness(
       : {
           ...entry,
           hint: entry.hint.replace(
-            "Open Source Control settings",
-            "Open Settings -> Source Control",
+            "Open source control settings",
+            "Open Settings -> Source control",
           ),
         };
   };

apps/web/src/components/CommandPalette.tsx

@@ -1081,7 +1081,7 @@ function OpenCommandPaletteDialog(props: {
               }
             />
             <TooltipPopup align="end" side="left">
-              {disabledHint ?? "Open Settings -> Source Control to configure this provider."}
+              {disabledHint ?? "Open Settings -> Source control to configure this provider."}
             </TooltipPopup>
           </Tooltip>
         </span>

apps/web/src/components/DiffPanel.tsx

@@ -175,7 +175,9 @@ function DiffFileHeaderSuffix({
 }) {
   return (
     <>
-      <DiffFilePathCopyButton filePath={filePath} />
+      <span data-diff-copy-path className="inline-flex">
+        <DiffFilePathCopyButton filePath={filePath} />
+      </span>
       {hasStat ? (
         <DiffFileStatus error={error} truncated={truncated} retry={() => onRetry(filePath)} />
       ) : null}
@@ -661,7 +663,7 @@ export default function DiffPanel({
 
   const headerRow = (
     <>
-      <div className="flex min-w-0 flex-1 items-center gap-3 [-webkit-app-region:no-drag]">
+      <div className="@container/diff-refs flex min-w-0 flex-1 items-center gap-3 [-webkit-app-region:no-drag]">
         <DropdownMenu>
           <DropdownMenuTrigger
             render={<Button size="xs" variant="secondary" />}
@@ -717,7 +719,9 @@ export default function DiffPanel({
             <Tooltip>
               <TooltipTrigger
                 render={
-                  <span className="flex min-w-[min(3rem,calc(100%-2.75rem))] items-center gap-2 overflow-hidden" />
+                  // Too narrow for both refs, the New design keeps the target readable and drops
+                  // the head, which is the thread's own branch.
+                  <span className="flex min-w-[min(3rem,calc(100%-2.75rem))] items-center gap-2 overflow-hidden redesign:@max-[20rem]/diff-refs:hidden" />
                 }
               >
                 <span className="min-w-0 max-w-48 truncate">
@@ -729,6 +733,18 @@ export default function DiffPanel({
                 {`${selectedGitSource.headRef ?? "HEAD"} → ${selectedGitSource.baseRef}`}
               </TooltipPopup>
             </Tooltip>
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <span aria-hidden className="hidden redesign:@max-[20rem]/diff-refs:inline" />
+                }
+              >
+                vs
+              </TooltipTrigger>
+              <TooltipPopup side="top">
+                {`${selectedGitSource.headRef ?? "HEAD"} → ${selectedGitSource.baseRef}`}
+              </TooltipPopup>
+            </Tooltip>
             <Combobox
               items={baseRefItems}
               filteredItems={filteredBaseRefItems}
@@ -743,7 +759,7 @@ export default function DiffPanel({
             >
               <ComboboxTrigger
                 render={<Button variant="ghost-muted" size="xs" />}
-                className="min-w-9 max-w-48 shrink"
+                className="min-w-9 max-w-48 shrink redesign:shrink-0"
                 aria-label={`Change comparison target. Currently ${selectedGitSource.baseRef}`}
               >
                 <span className="min-w-0 truncate">{selectedGitSource.baseRef}</span>

apps/web/src/components/DiffWorkerPoolProvider.tsx

@@ -3,13 +3,14 @@ import { WorkerPoolManager } from "@pierre/diffs/worker";
 import DiffsWorker from "@pierre/diffs/worker/worker.js?worker";
 import * as Schema from "effect/Schema";
 import { useEffect, useState, useSyncExternalStore, type ReactNode } from "react";
+import { subscribeClientSettings } from "../hooks/useSettings";
 import { getRenderedAppearance, subscribeRenderedAppearance } from "../hooks/useTheme";
 import { resolveDiffThemeName } from "../lib/diffRendering";
 import { PREFERRED_HIGHLIGHTER } from "../lib/syntaxHighlighting";
 
 export class DiffWorkerError extends Schema.TaggedError<DiffWorkerError>()("DiffWorkerError", {
   operation: Schema.Literals(["create-worker", "get-render-options", "set-render-options"]),
-  themeName: Schema.Literals(["pierre-light", "pierre-dark"]),
+  themeName: Schema.Literals(["pierre-light", "pierre-dark", "t3-light"]),
   cause: Schema.Defect(),
 }) {
   override get message(): string {
@@ -72,7 +73,12 @@ function createDiffWorkerPool(poolSize: number) {
   );
   return {
     pool,
-    unsubscribeTheme: subscribeRenderedAppearance(() => applyDiffWorkerTheme(pool)),
+    unsubscribeTheme: (() => {
+      const apply = () => applyDiffWorkerTheme(pool);
+      // The New design picks the light syntax palette, so a settings change can switch it too.
+      const unsubscribes = [subscribeRenderedAppearance(apply), subscribeClientSettings(apply)];
+      return () => unsubscribes.forEach((unsubscribe) => unsubscribe());
+    })(),
     consumers: 0,
     idleTimer: undefined,
   };

apps/web/src/components/GitActionsControl.tsx

@@ -205,7 +205,7 @@ function getPublishProviderReadiness(input: {
   if (!discovered) {
     return {
       ready: false,
-      hint: "Provider status unavailable. Open Settings -> Source Control and rescan.",
+      hint: "Provider status unavailable. Open Settings -> Source control and rescan.",
     };
   }
   if (discovered.status !== "available") {
@@ -216,7 +216,7 @@ function getPublishProviderReadiness(input: {
       ready: false,
       hint:
         Option.getOrNull(discovered.auth.detail) ??
-        `${discovered.label} is not authenticated. Open Settings -> Source Control for setup guidance.`,
+        `${discovered.label} is not authenticated. Open Settings -> Source control for setup guidance.`,
     };
   }
   return { ready: true, hint: null };
@@ -673,7 +673,7 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {
                         />
                         <TooltipPopup side="top" align="end">
                           {readiness.hint ??
-                            "Open Settings -> Source Control to configure this provider."}
+                            "Open Settings -> Source control to configure this provider."}
                         </TooltipPopup>
                       </Tooltip>
                     </div>
@@ -1153,11 +1153,11 @@ export default function GitActionsControl({
       : null;
   const gitActionProgress = resolveGitActionProgressPresentation(vcsActionState);
   const redesign = useClientSettings((s) => s.redesignEnabled);
-  // A fresh draft with nothing to commit, push, or diff hides those rows until there is work.
+  // A fresh draft or a thread with no turns hides commit, push, and diff rows until there is work.
   const quietEmptyDraft =
     redesign &&
     isPanel &&
-    draftId !== undefined &&
+    (draftId !== undefined || activeServerThreadShell?.latestRun === null) &&
     gitActionProgress === null &&
     !gitStatusError &&
     quickAction.disabled &&

apps/web/src/components/Sidebar.tsx

@@ -59,7 +59,7 @@ import {
 } from "@t3tools/contracts";
 import type { OlderSettledScope } from "@t3tools/client-runtime/state/threads";
 
-import { FolderIcon, ListFilterIcon, PlusIcon, SettingsIcon } from "lucide-react";
+import { ChevronDownIcon, FolderIcon, ListFilterIcon, PlusIcon, SettingsIcon } from "lucide-react";
 import {
   useEffect,
   useLayoutEffect,
@@ -3210,9 +3210,14 @@ export default function Sidebar({ routeReveal }: { routeReveal: SidebarRouteReve
                             olderSettledShelf.retry();
                             showMoreSettled();
                           }}
-                          className="flex h-9 w-full cursor-pointer items-center gap-2.5 rounded-md px-2.5 text-left text-sm text-sidebar-muted-foreground/55 hover:bg-sidebar-row-hover hover:text-sidebar-foreground disabled:cursor-default"
+                          className="flex h-9 w-full cursor-pointer items-center gap-2.5 rounded-md px-2.5 text-left text-sm text-sidebar-muted-foreground/55 hover:bg-sidebar-row-hover hover:text-sidebar-foreground disabled:cursor-default redesign:text-sidebar-muted-foreground"
                         >
-                          <PlusIcon aria-hidden className="size-4 shrink-0" />
+                          {/* The New design keeps plus for "add" and uses a chevron to reveal more. */}
+                          <PlusIcon aria-hidden className="size-4 shrink-0 redesign:hidden" />
+                          <ChevronDownIcon
+                            aria-hidden
+                            className="hidden size-4 shrink-0 redesign:block"
+                          />
                           {olderSettledShelf.loading
                             ? "Loading"
                             : olderSettledShelf.failed

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

@@ -3,6 +3,7 @@ import { ChatCanvasContext } from "./ChatCanvasContext";
 import { resolveChatCanvasLayout, type ChatCanvasPreview } from "./chatCanvasLayout";
 import type { PreviewMiniPlayerObstacles } from "../preview/previewMiniPlayerLayout";
 import { observeResize } from "../../lib/observeResize";
+import { useClientSettings } from "~/hooks/useSettings";
 
 export function ChatCanvas({
   composerOverlayElement,
@@ -93,6 +94,7 @@ export function ChatCanvas({
     if (timelineElement) observed.push(timelineElement);
     return observeResize(observed, measure);
   }, [composerOverlayElement, timelineElement, detailsCardTopInset]);
+  const redesign = useClientSettings((s) => s.redesignEnabled);
   const container = { width: measurements.width, height: measurements.height };
   const findBar =
     detailsCardTopInset > 0
@@ -111,6 +113,7 @@ export function ChatCanvas({
       preview,
       detailsCard,
       findBar,
+      centerBesideDetails: redesign,
     }),
     previewKey: preview?.key ?? null,
     reportPreview,

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

@@ -61,7 +61,7 @@ export const ModelListRow = memo(function ModelListRow(props: {
     >
       <div className="min-w-0 flex-1 text-left">
         <div className="flex min-w-0 items-center gap-2">
-          <div className="min-w-0 truncate text-xs font-medium leading-snug">
+          <div className="min-w-0 truncate text-xs font-medium leading-snug redesign:text-sm redesign:font-normal">
             {props.useTriggerLabel
               ? getTriggerDisplayModelLabel(model)
               : getDisplayModelName(
@@ -101,9 +101,6 @@ export const ModelListRow = memo(function ModelListRow(props: {
       </div>
 
       <div className="flex shrink-0 items-center gap-1.5">
-        {props.showSelection && props.isSelected ? (
-          <CheckIcon className="size-3.5" aria-hidden="true" />
-        ) : null}
         {props.jumpLabel ? <Kbd>{props.jumpLabel}</Kbd> : null}
         <Tooltip>
           <TooltipTrigger
@@ -125,7 +122,9 @@ export const ModelListRow = memo(function ModelListRow(props: {
                 <StarIcon
                   className={cn(
                     "size-3.5 sm:size-3",
-                    props.isFavorite && "fill-current text-warning",
+                    props.isFavorite
+                      ? "fill-current text-warning"
+                      : "redesign:opacity-0 redesign:group-hover:opacity-100 redesign:group-data-highlighted:opacity-100 redesign:in-focus-visible:opacity-100 redesign:pointer-coarse:opacity-100",
                   )}
                 />
               </Button>
@@ -135,6 +134,13 @@ export const ModelListRow = memo(function ModelListRow(props: {
             {props.isFavorite ? "Remove from favorites" : "Add to favorites"}
           </TooltipPopup>
         </Tooltip>
+        {/* Last, and always reserved, so stars and the check keep fixed columns. */}
+        {props.showSelection ? (
+          <CheckIcon
+            className={cn("size-3.5", !props.isSelected && "invisible")}
+            aria-hidden="true"
+          />
+        ) : null}
       </div>
     </ComboboxItem>
   );

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

@@ -49,6 +49,7 @@ import {
   shortcutLabelForCommand,
 } from "../../keybindings";
 import {
+  useClientSettings,
   useEnvironmentModelPreferences,
   useToggleEnvironmentModelFavorite,
 } from "~/hooks/useSettings";
@@ -190,10 +191,12 @@ function modelJumpLabelsByKey(
 function ModelPickerProviderNotices({
   setupEntries,
   updateRequiredNotices,
+  emptyLabel,
   onRequestClose,
   onOpenProviderSetup,
 }: {
   setupEntries: ReadonlyArray<ProviderInstanceEntry>;
+  emptyLabel: string;
   updateRequiredNotices: ReadonlyArray<{ instanceId: ProviderInstanceId; notice: string }>;
   onRequestClose: (() => void) | undefined;
   onOpenProviderSetup: ((instanceId: ProviderInstanceId) => void) | undefined;
@@ -221,7 +224,7 @@ function ModelPickerProviderNotices({
           ))}
         </div>
       ) : (
-        <ComboboxEmpty className="empty:h-0">No models found</ComboboxEmpty>
+        <ComboboxEmpty className="empty:h-0">{emptyLabel}</ComboboxEmpty>
       )}
       {updateRequiredNotices.map(({ instanceId, notice }) => (
         <p
@@ -584,6 +587,9 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
 
   const isLocked = lockedProvider !== null;
   const isSearching = searchQuery.trim().length > 0;
+  // Inside one provider's tab the provider line repeats the selected rail icon on every row.
+  const redesign = useClientSettings((s) => s.redesignEnabled);
+  const rowsMixProviders = !redesign || isSearching || selectedInstanceId === "favorites";
   const lockedDisabledInstanceIds = (() => {
     if (!isLocked) {
       return undefined;
@@ -949,8 +955,10 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
                       className="group w-full cursor-pointer"
                     >
                       <div className="min-w-0 flex-1 text-left">
-                        <div className="text-xs font-medium leading-snug">Legacy models</div>
-                        <div className="mt-1 text-xs font-normal leading-snug text-muted-foreground/70">
+                        <div className="text-xs font-medium leading-snug redesign:text-sm redesign:font-normal">
+                          Legacy models
+                        </div>
+                        <div className="mt-1 text-xs font-normal leading-snug text-muted-foreground/70 redesign:text-muted-foreground">
                           {legacySection.legacyModels.length} models
                         </div>
                       </div>
@@ -989,8 +997,8 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
                         ? selectedModelKeySet.has(modelKey)
                         : modelKey === activeModelKey
                     }
-                    showSelection={selectedModelKeys !== undefined}
-                    showProvider
+                    showSelection={selectedModelKeys !== undefined || redesign}
+                    showProvider={rowsMixProviders || Boolean(model.subProvider)}
                     preferShortName={!isLocked}
                     useTriggerLabel={false}
                     showNewBadge={model.badge === "new"}
@@ -1005,6 +1013,11 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
             <ModelPickerProviderNotices
               setupEntries={providerSetupEntries}
               updateRequiredNotices={updateRequiredNotices}
+              emptyLabel={
+                selectedInstanceId === "favorites" && !isSearching
+                  ? "No favorites yet"
+                  : "No models found"
+              }
               onRequestClose={onRequestClose}
               onOpenProviderSetup={onOpenProviderSetup}
             />

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

@@ -26,7 +26,7 @@ function describeUnavailableInstance(entry: ProviderInstanceEntry): string {
 }
 
 const SELECTED_INDICATOR_CLASS =
-  "pointer-events-none absolute -right-1 top-1/2 z-10 h-5 w-0.75 -translate-y-1/2 rounded-l-full bg-primary";
+  "pointer-events-none absolute -right-1 top-1/2 z-10 h-5 w-0.75 -translate-y-1/2 rounded-l-full bg-primary redesign:right-1 redesign:rounded-full";
 const BADGE_BASE_CLASS =
   "pointer-events-none absolute -right-0.5 top-0.5 z-10 flex size-3.5 items-center justify-center rounded-full bg-transparent shadow-sm ";
 const NEW_BADGE_CLASS = `${BADGE_BASE_CLASS} text-update-foreground `;

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

@@ -410,9 +410,6 @@ export const OpenInPicker = memo(function OpenInPicker({
             className={cn(
               isPanel ? THREAD_DETAILS_PANEL_ICON_CLASS : "size-3.5",
               getOpenInIconClass(primaryOption.kind),
-              // Full-color app icons outshout the panel's line icons until the row is in use.
-              isPanel &&
-                "redesign:grayscale redesign:dark:opacity-70 redesign:group-hover/details-split:grayscale-0 redesign:dark:group-hover/details-split:opacity-100 redesign:group-has-[[data-popup-open]]/details-split:grayscale-0 redesign:dark:group-has-[[data-popup-open]]/details-split:opacity-100",
               // A hairline keeps pale app icons from dissolving into the card.
               isPanel &&
                 primaryOption.kind === "brand" &&

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

@@ -53,10 +53,22 @@ export function ThreadDetailsControl({
           "relative inline-flex shrink-0 cursor-pointer items-center whitespace-nowrap border outline-none transition-[box-shadow,scale] [&:not([aria-haspopup]):not(:disabled):not([aria-disabled=true])]:will-change-[scale] [&:active:not([aria-haspopup])]:scale-[0.97] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 disabled:pointer-events-none disabled:opacity-64 aria-disabled:cursor-not-allowed aria-disabled:opacity-64 [&_svg]:shrink-0",
           parts[part],
           multiline && "h-auto min-h-8 py-0.75 disabled:opacity-100 sm:h-auto",
-          tone === "muted" && "text-muted-foreground/70 hover:text-foreground/80",
-          tone === "primary" && "text-primary hover:text-primary",
+          tone === "muted" &&
+            "text-muted-foreground/70 hover:text-foreground/80 redesign:text-muted-foreground",
+          tone === "primary" &&
+            // The row surface forces a faint hover fill with !important; the solid pill keeps its own.
+            "text-primary hover:text-primary redesign:bg-primary redesign:text-primary-foreground redesign:hover:text-primary-foreground redesign:hover:!bg-primary/85 redesign:data-pressed:!bg-primary/85 redesign:dark:hover:!bg-primary/85 redesign:dark:data-pressed:!bg-primary/85",
           tone === "destructive" &&
             "text-destructive hover:text-destructive data-pressed:text-destructive",
+          // PR row actions share one 20px pill with a 1px inset focus ring that stays clear of the
+          // label. The solid pill draws it in the canvas color so it shows against the fill.
+          part === "meta" &&
+            (tone === "primary" || tone === "destructive") &&
+            "redesign:h-5 redesign:focus-visible:ring-offset-0 redesign:focus-visible:ring-1",
+          part === "meta" && tone === "primary" && "redesign:focus-visible:ring-background",
+          part === "meta" &&
+            tone === "destructive" &&
+            "redesign:bg-destructive/10 redesign:hover:!bg-destructive/16 redesign:data-pressed:!bg-destructive/16 redesign:dark:hover:!bg-destructive/16 redesign:dark:data-pressed:!bg-destructive/16",
           className,
         ),
       },

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

@@ -439,7 +439,7 @@ export function ThreadDetailsPrRow({
       {detail !== null && (showChecks || trailingAction !== null || watching) ? (
         <div className="pb-1.5">
           {openRow(detail.title, "row", true)}
-          <div className="flex h-5 min-w-0 items-center gap-0.5 ps-9 pe-1 text-xs text-muted-foreground">
+          <div className="flex h-5 min-w-0 items-center gap-0.5 ps-9 pe-1 text-xs text-muted-foreground redesign:pe-2.5">
             <span className="me-1 shrink-0 tabular-nums">#{number}</span>
             {showChecks && checksRollup !== null ? (
               <PullRequestChecksPopover