Proposal: interface review remediation for apps/web (a11y, contrast, design tokens)

apps/desktop/src/backend/DesktopBackendPool.ts

@@ -238,8 +238,8 @@ export const layer = Layer.effect(
             { reason },
           );
           yield* electronDialog.showErrorBox(
-            "WSL backend is still unavailable",
-            `${reason}\n\nT3 Code will use the Windows backend for this launch and retry WSL the next time the app starts.`,
+            "WSL environment is still unavailable",
+            `${reason}\n\nT3 Code will use the Windows environment for this launch and retry WSL the next time the app starts.`,
           );
           yield* appSettings.applyWslWindowsFallbackInMemory;
           return true;
@@ -249,8 +249,8 @@ export const layer = Layer.effect(
           reason,
         });
         yield* electronDialog.showErrorBox(
-          "WSL backend couldn't start",
-          `${reason}\n\nFalling back to the Windows backend so T3 Code can open. Re-enable the WSL backend from Settings > Connections once the WSL distro is fixed.`,
+          "WSL environment couldn't start",
+          `${reason}\n\nFalling back to the Windows environment so T3 Code can open. Re-enable the WSL environment from Settings > Connections once the WSL distro is fixed.`,
         );
         // Fully disable the WSL backend — both flags, matching the "Switch to
         // Windows" recovery path — so the manager's next restart re-resolves the

apps/desktop/src/wsl/DesktopWslEnvironment.ts

@@ -123,11 +123,11 @@ export const formatWslShellTransportFailureReason = (
 ): string | null => {
   switch (failure) {
     case "timeout":
-      return "WSL backend preflight timed out while probing for Node.js. WSL may be slow to start; retry, or check that the distro is healthy.";
+      return "WSL environment preflight timed out while probing for Node.js. WSL may be slow to start; retry, or check that the distro is healthy.";
     case "spawn":
-      return "WSL backend preflight could not start wsl.exe to probe for Node.js. Check that WSL is installed and the distro is accessible.";
+      return "WSL environment preflight could not start wsl.exe to probe for Node.js. Check that WSL is installed and the distro is accessible.";
     case "process":
-      return "WSL backend preflight lost communication with wsl.exe while probing for Node.js. Retry, or check that the distro is healthy.";
+      return "WSL environment preflight lost communication with wsl.exe while probing for Node.js. Retry, or check that the distro is healthy.";
     case null:
       return null;
   }
@@ -542,7 +542,7 @@ const ensureNodePtyImpl = (
         ok: false,
         reason:
           nodeOnlyReason ??
-          "The bundled WSL backend binary (node-pty) could not be loaded in this distro. This usually means an unsupported CPU architecture or incompatible system libraries (glibc). Use a glibc-based x64/arm64 WSL distro such as Ubuntu; if you already are, please report this with your distro and the output of `uname -m`.",
+          "The bundled WSL environment binary (node-pty) could not be loaded in this distro. This usually means an unsupported CPU architecture or incompatible system libraries (glibc). Use a glibc-based x64/arm64 WSL distro such as Ubuntu; if you already are, please report this with your distro and the output of `uname -m`.",
         fatal: true,
       } as const;
     }

apps/web/src/browser/BrowserDeviceToolbar.tsx

@@ -172,7 +172,7 @@ export function BrowserDeviceToolbar({
 
   return (
     <div
-      className="sticky left-0 top-0 z-50 flex items-center gap-0.5 overflow-x-auto border-b border-border/70 bg-background/95 px-1.5 shadow-xs backdrop-blur-md [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+      className="sticky start-0 top-0 z-50 flex items-center gap-0.5 overflow-x-auto border-b border-border/70 bg-background/95 px-1.5 shadow-xs backdrop-blur-md [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
       style={{ width, height: BROWSER_DEVICE_TOOLBAR_HEIGHT }}
       role="toolbar"
       aria-label="Browser device toolbar"
@@ -193,7 +193,7 @@ export function BrowserDeviceToolbar({
       }}
     >
       {width >= 560 ? (
-        <span className="mr-0.5 shrink-0 text-[11px] font-medium text-muted-foreground">
+        <span className="me-0.5 shrink-0 text-2xs font-medium text-muted-foreground">
           Dimensions
         </span>
       ) : null}
@@ -327,7 +327,7 @@ export function BrowserDeviceToolbar({
         size="icon-xs"
         type="button"
         aria-label="Close device toolbar"
-        className="sticky right-0 ml-auto bg-background/95"
+        className="sticky end-0 ms-auto bg-background/95"
         disabled={pending}
         onClick={() => {
           apply({ _tag: "fill" }, null);

apps/web/src/browser/BrowserViewportResizeHandles.tsx

@@ -32,7 +32,7 @@ type HandleKind = "horizontal" | "vertical" | "corner";
 const EDGE_BUTTON_CLASS =
   "group absolute z-20 touch-none border-0 bg-transparent p-0 outline-none before:absolute before:-inset-1 before:content-[''] focus-visible:bg-foreground/[0.04]";
 const EDGE_GRIP_CLASS =
-  "pointer-events-none absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center text-muted-foreground/55 transition-colors duration-150 group-hover:text-foreground/85 group-focus-visible:text-foreground group-active:text-foreground";
+  "pointer-events-none absolute start-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center text-muted-foreground transition-colors duration-150 group-hover:text-foreground/85 group-focus-visible:text-foreground group-active:text-foreground";
 
 function ResizeHandle(props: {
   readonly direction: BrowserViewportResizeDirection;
@@ -89,8 +89,8 @@ function ResizeHandle(props: {
             className={cn("relative block size-3", mirrorCorner && "-scale-x-100")}
             aria-hidden="true"
           >
-            <span className="absolute bottom-[3px] left-0 h-px w-3 -rotate-45 rounded-full bg-current" />
-            <span className="absolute bottom-0 left-[5px] h-px w-2 -rotate-45 rounded-full bg-current" />
+            <span className="absolute bottom-[3px] start-0 h-px w-3 -rotate-45 rounded-full bg-current" />
+            <span className="absolute bottom-0 start-[5px] h-px w-2 -rotate-45 rounded-full bg-current" />
           </span>
         )}
       </span>

apps/web/src/browser/HostedBrowserWebview.tsx

@@ -243,7 +243,7 @@ export function HostedBrowserWebview(props: {
             />
             {activeDrag ? (
               <div
-                className="pointer-events-none absolute z-40 -translate-x-1/2 rounded-md border border-border/80 bg-background/95 px-2 py-1 text-[11px] font-medium tabular-nums text-foreground shadow-md backdrop-blur-sm"
+                className="pointer-events-none absolute z-40 -translate-x-1/2 rounded-md border border-border/80 bg-background/95 px-2 py-1 text-2xs font-medium tabular-nums text-foreground shadow-md backdrop-blur-sm"
                 style={{
                   left: layout.viewportX + layout.viewportWidth / 2,
                   top: layout.viewportY + 10,

apps/web/src/cloud/useCloudLinkController.ts

@@ -57,7 +57,7 @@ export function useCloudLinkController() {
     setOperationError(traceId ? `${message} Trace ID: ${traceId}` : message);
     toastManager.add({
       type: "error",
-      title: "Could not update T3 Connect",
+      title: "Couldn't update T3 Connect",
       description: message,
       data: traceId
         ? {

apps/web/src/components/AppSidebarLayout.tsx

@@ -84,7 +84,7 @@ function SidebarControl() {
                 "pointer-events-auto",
                 isSidebarVisible &&
                   stageBackdropVariant &&
-                  "[:hover,[data-pressed]]:bg-white/15 focus-visible:ring-white/90 focus-visible:ring-offset-blue-700 [&_svg]:stroke-white/90! [&_svg]:opacity-100! [&_svg]:hover:stroke-white!",
+                  "[:hover,[data-pressed]]:bg-white/15 focus-visible:ring-white/90 focus-visible:ring-offset-blue-700 [&_svg]:stroke-white! [&_svg]:opacity-90! [&_svg]:hover:opacity-100!",
               )}
               aria-label="Toggle main sidebar"
             />
@@ -167,7 +167,7 @@ export function AppSidebarLayout({ children }: { children: ReactNode }) {
         collapsible="offcanvas"
         data-app-sidebar=""
         data-sidebar-version={useSidebarV2Theme ? "v2" : "v1"}
-        className="border-r border-sidebar-border bg-sidebar text-sidebar-foreground"
+        className="border-e border-sidebar-border bg-sidebar text-sidebar-foreground"
         resizable={{
           maxWidth: sidebarMaximumWidth,
           minWidth: THREAD_SIDEBAR_MIN_WIDTH,

apps/web/src/components/BranchToolbar.tsx

@@ -125,7 +125,7 @@ const MobileRunContextSelector = memo(function MobileRunContextSelector({
 
   if (isLocked) {
     return (
-      <span className="inline-flex min-w-0 max-w-[48%] flex-1 items-center justify-start gap-1 rounded-md border border-transparent px-[calc(--spacing(2)-1px)] text-sm font-medium text-muted-foreground/70 md:hidden">
+      <span className="inline-flex min-w-0 max-w-[48%] flex-1 items-center justify-start gap-1 rounded-md border border-transparent px-[calc(--spacing(2)-1px)] text-sm font-medium text-muted-foreground md:hidden">
         {triggerContent}
       </span>
     );
@@ -135,7 +135,7 @@ const MobileRunContextSelector = memo(function MobileRunContextSelector({
     <Menu>
       <MenuTrigger
         render={<Button variant="ghost" size="xs" />}
-        className="min-w-0 max-w-[48%] flex-1 justify-start text-muted-foreground/70 hover:text-foreground/80 md:hidden"
+        className="min-w-0 max-w-[48%] flex-1 justify-start text-muted-foreground hover:text-foreground/80 md:hidden"
       >
         {triggerContent}
         <ChevronDownIcon className="size-3 shrink-0 opacity-50" />
@@ -345,7 +345,7 @@ export const BranchToolbar = memo(function BranchToolbar({
       )}
 
       <BranchToolbarBranchSelector
-        className="min-w-0 flex-1 justify-end md:ml-auto md:flex-none"
+        className="min-w-0 flex-1 justify-end md:ms-auto md:flex-none"
         environmentId={environmentId}
         threadId={threadId}
         {...(draftId ? { draftId } : {})}

apps/web/src/components/BranchToolbarBranchSelector.tsx

@@ -77,7 +77,7 @@ interface BranchToolbarBranchSelectorProps {
 }
 
 function toBranchActionErrorMessage(error: unknown): string {
-  return error instanceof Error ? error.message : "An error occurred.";
+  return error instanceof Error ? error.message : "That didn't go through. Try again.";
 }
 
 function getBranchTriggerLabel(input: {
@@ -310,9 +310,9 @@ export function BranchToolbarBranchSelector({
   const [isBranchActionPending, startBranchActionTransition] = useTransition();
   const totalBranchCount = branchRefState.data?.totalCount ?? 0;
   const branchStatusText = isInitialBranchesLoadPending
-    ? "Loading refs..."
+    ? "Loading refs…"
     : isFetchingNextPage
-      ? "Loading more refs..."
+      ? "Loading more refs…"
       : hasNextPage
         ? `Showing ${refs.length} of ${totalBranchCount} refs`
         : null;
@@ -334,7 +334,7 @@ export function BranchToolbarBranchSelector({
         toastManager.add(
           stackedThreadToast({
             type: "error",
-            title: "Failed to copy branch name",
+            title: "Couldn't copy branch name",
             description: toBranchActionErrorMessage(error),
           }),
         );
@@ -420,7 +420,7 @@ export function BranchToolbarBranchSelector({
         toastManager.add(
           stackedThreadToast({
             type: "error",
-            title: "Failed to switch ref.",
+            title: "Couldn't switch ref",
             description: toBranchActionErrorMessage(squashAtomCommandFailure(checkoutResult)),
           }),
         );
@@ -456,7 +456,7 @@ export function BranchToolbarBranchSelector({
         toastManager.add(
           stackedThreadToast({
             type: "error",
-            title: "Failed to create and switch ref.",
+            title: "Couldn't create and switch ref",
             description: toBranchActionErrorMessage(squashAtomCommandFailure(createBranchResult)),
           }),
         );
@@ -675,7 +675,7 @@ export function BranchToolbarBranchSelector({
       >
         <div className="flex w-full min-w-0 items-center justify-between gap-2">
           <span className="min-w-0 flex-1 truncate">{itemValue}</span>
-          {badge && <span className="shrink-0 text-[10px] text-muted-foreground/45">{badge}</span>}
+          {badge && <span className="shrink-0 text-2xs text-decorative-foreground">{badge}</span>}
         </div>
       </ComboboxItem>
     );
@@ -710,7 +710,7 @@ export function BranchToolbarBranchSelector({
                   aria-label={branchPrTooltip}
                   onClick={(event) => openPrLink(event, branchPrStatus.url)}
                   className={cn(
-                    "inline-flex shrink-0 items-center gap-0.5 rounded px-1 py-0.5 text-[11px] font-medium tabular-nums transition-colors hover:bg-muted/60",
+                    "inline-flex shrink-0 items-center gap-0.5 rounded px-1 py-0.5 text-2xs font-medium tabular-nums transition-colors hover:bg-muted/60",
                     branchPrStatus.colorClass,
                   )}
                 />
@@ -731,7 +731,7 @@ export function BranchToolbarBranchSelector({
         >
           <ComboboxTrigger
             render={<Button variant="ghost" size="xs" />}
-            className="min-w-0 max-w-full text-muted-foreground/70 hover:text-foreground/80"
+            className="min-w-0 max-w-full text-muted-foreground hover:text-foreground/80"
             disabled={isInitialBranchesLoadPending || isBranchActionPending}
           >
             <GitBranchIcon className="size-3 shrink-0 opacity-70" />
@@ -745,12 +745,12 @@ export function BranchToolbarBranchSelector({
           <div className="relative -translate-y-px border-b border-border/70 pb-1.5 transition-colors focus-within:border-ring">
             <SearchIcon
               aria-hidden="true"
-              className="pointer-events-none absolute top-1.5 left-0 size-4 shrink-0 text-muted-foreground/55"
+              className="pointer-events-none absolute top-1.5 start-0 size-4 shrink-0 text-muted-foreground opacity-55"
             />
             <ComboboxInput
               className="[&_input]:h-6.5 [&_input]:ps-5 [&_input]:font-sans [&_input]:leading-6.5"
               inputClassName="rounded-none bg-transparent text-sm"
-              placeholder="Search refs..."
+              placeholder="Search refs…"
               showTrigger={false}
               size="sm"
               unstyled
@@ -760,7 +760,22 @@ export function BranchToolbarBranchSelector({
           </div>
         </div>
         <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
-          <ComboboxEmpty>No refs found.</ComboboxEmpty>
+          <ComboboxEmpty>
+            {branchQuery.trim().length > 0 ? (
+              <span className="flex flex-col items-center gap-1">
+                <span>No refs match “{branchQuery.trim()}”.</span>
+                <button
+                  type="button"
+                  className="underline underline-offset-2"
+                  onClick={() => setBranchQuery("")}
+                >
+                  Clear search
+                </button>
+              </span>
+            ) : (
+              "No refs in this repository yet. Type a name to create one."
+            )}
+          </ComboboxEmpty>
           <div className="relative min-h-0 w-full max-h-56 flex-1 overflow-hidden">
             <ComboboxListVirtualized className="size-full min-w-0 p-0">
               <LegendList<string>

apps/web/src/components/BranchToolbarEnvModeSelector.tsx

@@ -50,7 +50,7 @@ export const BranchToolbarEnvModeSelector = memo(function BranchToolbarEnvModeSe
 
   if (envLocked) {
     return (
-      <span className="inline-flex items-center gap-1 border border-transparent px-[calc(--spacing(3)-1px)] text-sm font-medium text-muted-foreground/70 sm:text-xs">
+      <span className="inline-flex items-center gap-1 border border-transparent px-[calc(--spacing(3)-1px)] text-sm font-medium text-muted-foreground sm:text-xs">
         {activeWorktreePath ? (
           <>
             <FolderGitIcon className="size-3" />

apps/web/src/components/BranchToolbarEnvironmentSelector.tsx

@@ -43,7 +43,7 @@ export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvir
 
   if (envLocked || onEnvironmentChange === undefined) {
     return (
-      <span className="inline-flex items-center gap-1 border border-transparent px-[calc(--spacing(3)-1px)] text-sm font-medium text-muted-foreground/70 sm:text-xs">
+      <span className="inline-flex items-center gap-1 border border-transparent px-[calc(--spacing(3)-1px)] text-sm font-medium text-muted-foreground sm:text-xs">
         {activeEnvironment?.isPrimary ? (
           <MonitorIcon className="size-3" />
         ) : (