diff --git a/bun.lock b/bun.lock
index ccdd079236..525904f5cf 100644
--- a/bun.lock
+++ b/bun.lock
@@ -79,6 +79,7 @@
         "eslint": "^9.36.0",
         "eslint-plugin-react": "^7.37.5",
         "eslint-plugin-react-hooks": "^5.2.0",
+        "eslint-plugin-tailwindcss": "4.0.0-beta.0",
         "jest": "^30.1.3",
         "mermaid": "^11.12.0",
         "playwright": "^1.56.0",
@@ -1517,6 +1518,8 @@
 
     "eslint-plugin-react-hooks": ["eslint-plugin-react-hooks@5.2.0", "", { "peerDependencies": { "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0" } }, "sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg=="],
 
+    "eslint-plugin-tailwindcss": ["eslint-plugin-tailwindcss@4.0.0-beta.0", "", { "dependencies": { "fast-glob": "^3.2.5", "postcss": "^8.4.4", "synckit": "^0.11.4", "tailwind-api-utils": "^1.0.3" }, "peerDependencies": { "tailwindcss": "^3.4.0 || ^4.0.0" } }, "sha512-WWCajZgQu38Sd67ZCl2W6i3MRzqB0d+H8s4qV9iB6lBJbsDOIpIlj6R1Fj2FXkoWErbo05pZnZYbCGIU9o/DsA=="],
+
     "eslint-scope": ["eslint-scope@8.4.0", "", { "dependencies": { "esrecurse": "^4.3.0", "estraverse": "^5.2.0" } }, "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg=="],
 
     "eslint-visitor-keys": ["eslint-visitor-keys@4.2.1", "", {}, "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ=="],
@@ -2693,6 +2696,8 @@
 
     "synckit": ["synckit@0.11.11", "", { "dependencies": { "@pkgr/core": "^0.2.9" } }, "sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw=="],
 
+    "tailwind-api-utils": ["tailwind-api-utils@1.0.3", "", { "dependencies": { "enhanced-resolve": "^5.18.1", "jiti": "^2.4.2", "local-pkg": "^1.1.1" }, "peerDependencies": { "tailwindcss": "^3.3.0 || ^4.0.0 || ^4.0.0-beta" } }, "sha512-KpzUHkH1ug1sq4394SLJX38ZtpeTiqQ1RVyFTTSY2XuHsNSTWUkRo108KmyyrMWdDbQrLYkSHaNKj/a3bmA4sQ=="],
+
     "tailwind-merge": ["tailwind-merge@3.3.1", "", {}, "sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g=="],
 
     "tailwindcss": ["tailwindcss@4.1.15", "", {}, "sha512-k2WLnWkYFkdpRv+Oby3EBXIyQC8/s1HOFMBUViwtAh6Z5uAozeUSMQlIsn/c6Q2iJzqG6aJT3wdPaRNj70iYxQ=="],
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 15ab04f766..664ef02d06 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -2,6 +2,7 @@ import js from "@eslint/js";
 import { defineConfig } from "eslint/config";
 import react from "eslint-plugin-react";
 import reactHooks from "eslint-plugin-react-hooks";
+import tailwindcss from "eslint-plugin-tailwindcss";
 import tseslint from "typescript-eslint";
 
 /**
@@ -154,12 +155,21 @@ export default defineConfig([
     plugins: {
       react,
       "react-hooks": reactHooks,
+      tailwindcss,
       local: localPlugin,
     },
     settings: {
       react: {
         version: "detect",
       },
+      tailwindcss: {
+        // Don't try to load Tailwind config (v4 doesn't export resolveConfig)
+        config: false,
+        // CSS files to check
+        cssFiles: ["**/*.css", "!**/node_modules", "!**/.*", "!**/dist", "!**/build"],
+        // Disable callees check to avoid resolving config
+        callees: [],
+      },
     },
     rules: {
       ...react.configs.recommended.rules,
@@ -240,6 +250,15 @@ export default defineConfig([
       "react/react-in-jsx-scope": "off",
       "react/prop-types": "off",
 
+      // Tailwind CSS
+      "tailwindcss/classnames-order": "warn",
+      "tailwindcss/enforces-negative-arbitrary-values": "warn",
+      "tailwindcss/enforces-shorthand": "warn",
+      "tailwindcss/migration-from-tailwind-2": "warn",
+      "tailwindcss/no-arbitrary-value": "off",
+      "tailwindcss/no-contradicting-classname": "error",
+      "tailwindcss/no-custom-classname": "off",
+
       // Safe Node.js patterns
       "local/no-unsafe-child-process": "error",
       "local/no-sync-fs-methods": "error",
diff --git a/package.json b/package.json
index bf78009bb9..c327bec835 100644
--- a/package.json
+++ b/package.json
@@ -119,6 +119,7 @@
     "eslint": "^9.36.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-tailwindcss": "4.0.0-beta.0",
     "jest": "^30.1.3",
     "mermaid": "^11.12.0",
     "playwright": "^1.56.0",
diff --git a/src/App.tsx b/src/App.tsx
index b74b928a11..972ce225f4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -662,7 +662,7 @@ function AppInner() {
 
   return (
     <>
-      <div className="flex h-screen overflow-hidden bg-bg-dark [@media(max-width:768px)]:flex-col">
+      <div className="bg-bg-dark flex h-screen overflow-hidden [@media(max-width:768px)]:flex-col">
         <LeftSidebar
           projects={projects}
           workspaceMetadata={workspaceMetadata}
@@ -682,8 +682,8 @@ function AppInner() {
           sortedWorkspacesByProject={sortedWorkspacesByProject}
           workspaceRecency={workspaceRecency}
         />
-        <div className="flex-1 flex flex-col overflow-hidden min-w-0 [@media(max-width:768px)]:w-full">
-          <div className="flex-1 flex overflow-hidden [@media(max-width:768px)]:flex-col">
+        <div className="flex min-w-0 flex-1 flex-col overflow-hidden [@media(max-width:768px)]:w-full">
+          <div className="flex flex-1 overflow-hidden [@media(max-width:768px)]:flex-col">
             {selectedWorkspace ? (
               <ErrorBoundary
                 workspaceInfo={`${selectedWorkspace.projectName}/${selectedWorkspace.namedWorkspacePath?.split("/").pop() ?? selectedWorkspace.workspaceId}`}
@@ -701,7 +701,7 @@ function AppInner() {
               </ErrorBoundary>
             ) : (
               <div
-                className="text-center max-w-3xl mx-auto w-full [&_h2]:text-white [&_h2]:mb-4 [&_h2]:font-bold [&_h2]:tracking-tight [&_p]:text-muted [&_p]:leading-[1.6]"
+                className="[&_p]:text-muted mx-auto w-full max-w-3xl text-center [&_h2]:mb-4 [&_h2]:font-bold [&_h2]:tracking-tight [&_h2]:text-white [&_p]:leading-[1.6]"
                 style={{
                   padding: "clamp(40px, 10vh, 100px) 20px",
                   fontSize: "clamp(14px, 2vw, 16px)",
diff --git a/src/components/AIView.tsx b/src/components/AIView.tsx
index 47b66e4290..84bc8dd3f5 100644
--- a/src/components/AIView.tsx
+++ b/src/components/AIView.tsx
@@ -250,7 +250,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
         )}
         style={{ containerType: "inline-size" }}
       >
-        <div className="flex-1 flex flex-col items-center justify-center h-full text-placeholder text-center">
+        <div className="text-placeholder flex h-full flex-1 flex-col items-center justify-center text-center">
           <h3 className="m-0 mb-2.5 text-base font-medium">Loading workspace...</h3>
         </div>
       </div>
@@ -291,7 +291,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
         )}
         style={{ containerType: "inline-size" }}
       >
-        <div className="flex-1 flex flex-col items-center justify-center h-full text-placeholder text-center">
+        <div className="text-placeholder flex h-full flex-1 flex-col items-center justify-center text-center">
           <h3 className="m-0 mb-2.5 text-base font-medium">Loading workspace...</h3>
         </div>
       </div>
@@ -307,7 +307,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
         )}
         style={{ containerType: "inline-size" }}
       >
-        <div className="flex-1 flex flex-col items-center justify-center h-full text-placeholder text-center">
+        <div className="text-placeholder flex h-full flex-1 flex-col items-center justify-center text-center">
           <h3 className="m-0 mb-2.5 text-base font-medium">No Workspace Selected</h3>
           <p className="m-0 text-[13px]">
             Select a workspace from the sidebar to view and interact with Claude
@@ -327,10 +327,10 @@ const AIViewInner: React.FC<AIViewProps> = ({
     >
       <div
         ref={chatAreaRef}
-        className="flex-1 min-w-96 flex flex-col [@media(max-width:768px)]:min-w-0 [@media(max-width:768px)]:w-full [@media(max-width:768px)]:max-h-full"
+        className="flex min-w-96 flex-1 flex-col [@media(max-width:768px)]:max-h-full [@media(max-width:768px)]:w-full [@media(max-width:768px)]:min-w-0"
       >
-        <div className="py-1 px-[15px] bg-separator border-b border-border-light flex justify-between items-center [@media(max-width:768px)]:py-2 [@media(max-width:768px)]:pl-[60px] [@media(max-width:768px)]:flex-wrap [@media(max-width:768px)]:gap-2">
-          <div className="font-semibold text-foreground flex items-center gap-2 min-w-0 overflow-hidden">
+        <div className="bg-separator border-border-light flex items-center justify-between border-b px-[15px] py-1 [@media(max-width:768px)]:flex-wrap [@media(max-width:768px)]:gap-2 [@media(max-width:768px)]:py-2 [@media(max-width:768px)]:pl-[60px]">
+          <div className="text-foreground flex min-w-0 items-center gap-2 overflow-hidden font-semibold">
             <StatusIndicator
               streaming={canInterrupt}
               title={
@@ -342,16 +342,16 @@ const AIViewInner: React.FC<AIViewProps> = ({
               workspaceId={workspaceId}
               tooltipPosition="bottom"
             />
-            <span className="font-mono text-xs whitespace-nowrap overflow-hidden text-ellipsis min-w-0">
+            <span className="min-w-0 truncate font-mono text-xs">
               {projectName} / {branch}
             </span>
-            <span className="font-mono text-muted font-normal text-[11px] whitespace-nowrap overflow-hidden text-ellipsis min-w-0">
+            <span className="text-muted min-w-0 truncate font-mono text-[11px] font-normal">
               {namedWorkspacePath}
             </span>
             <TooltipWrapper inline>
               <button
                 onClick={handleOpenTerminal}
-                className="bg-transparent border-none cursor-pointer p-1 flex items-center justify-center text-muted transition-colors hover:text-foreground [&_svg]:w-4 [&_svg]:h-4"
+                className="text-muted hover:text-foreground flex cursor-pointer items-center justify-center border-none bg-transparent p-1 transition-colors [&_svg]:h-4 [&_svg]:w-4"
               >
                 <svg viewBox="0 0 16 16" fill="currentColor">
                   <path d="M0 2.75C0 1.784.784 1 1.75 1h12.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0114.25 15H1.75A1.75 1.75 0 010 13.25V2.75zm1.75-.25a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25H1.75zM7.25 8a.75.75 0 01-.22.53l-2.25 2.25a.75.75 0 01-1.06-1.06L5.44 8 3.72 6.28a.75.75 0 111.06-1.06l2.25 2.25c.141.14.22.331.22.53zm1.5 1.5a.75.75 0 000 1.5h3a.75.75 0 000-1.5h-3z" />
@@ -364,7 +364,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
           </div>
         </div>
 
-        <div className="flex-1 relative overflow-hidden">
+        <div className="relative flex-1 overflow-hidden">
           <div
             ref={contentRef}
             onWheel={markUserInteraction}
@@ -375,10 +375,10 @@ const AIViewInner: React.FC<AIViewProps> = ({
             aria-busy={canInterrupt}
             aria-label="Conversation transcript"
             tabIndex={0}
-            className="h-full overflow-y-auto p-[15px] whitespace-pre-wrap break-words leading-[1.5]"
+            className="h-full overflow-y-auto p-[15px] leading-[1.5] break-words whitespace-pre-wrap"
           >
             {mergedMessages.length === 0 ? (
-              <div className="flex-1 flex flex-col items-center justify-center h-full text-placeholder text-center [&_h3]:m-0 [&_h3]:mb-2.5 [&_h3]:text-base [&_h3]:font-medium [&_p]:m-0 [&_p]:text-[13px]">
+              <div className="text-placeholder flex h-full flex-1 flex-col items-center justify-center text-center [&_h3]:m-0 [&_h3]:mb-2.5 [&_h3]:text-base [&_h3]:font-medium [&_p]:m-0 [&_p]:text-[13px]">
                 <h3>No Messages Yet</h3>
                 <p>Send a message below to begin</p>
               </div>
@@ -404,7 +404,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
                       </div>
                       {isAtCutoff && (
                         <div
-                          className="my-5 py-3 px-[15px] text-xs font-medium text-center text-edit-mode bg-edit-mode/10"
+                          className="text-edit-mode bg-edit-mode/10 my-5 px-[15px] py-3 text-center text-xs font-medium"
                           style={{
                             borderBottom: "3px solid",
                             borderImage:
@@ -463,7 +463,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
             <button
               onClick={jumpToBottom}
               type="button"
-              className="absolute bottom-2 left-1/2 -translate-x-1/2 py-1 px-2 text-white border rounded-[20px] text-xs font-medium shadow-[0_4px_12px_rgba(0,0,0,0.3)] cursor-pointer transition-all duration-200 z-[100] font-primary backdrop-blur-[1px] hover:scale-105 active:scale-95"
+              className="font-primary absolute bottom-2 left-1/2 z-[100] -translate-x-1/2 cursor-pointer rounded-[20px] border px-2 py-1 text-xs font-medium text-white shadow-[0_4px_12px_rgba(0,0,0,0.3)] backdrop-blur-[1px] transition-all duration-200 hover:scale-105 active:scale-95"
               style={{
                 background: "hsl(from var(--color-assistant-border) h s l / 0.1)",
                 borderColor: "hsl(from var(--color-assistant-border) h s l / 0.4)",
diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx
index b1ab6ac212..47fa65aa2a 100644
--- a/src/components/ChatInput.tsx
+++ b/src/components/ChatInput.tsx
@@ -704,7 +704,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
 
   return (
     <div
-      className="relative pt-[5px] px-[15px] pb-[15px] bg-separator border-t border-border-light flex flex-col gap-1"
+      className="bg-separator border-border-light relative flex flex-col gap-1 border-t px-[15px] pt-[5px] pb-[15px]"
       style={{ containerType: "inline-size" }}
       data-component="ChatInputSection"
     >
@@ -717,7 +717,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
         ariaLabel="Slash command suggestions"
         listId={commandListId}
       />
-      <div className="flex gap-2.5 items-end" data-component="ChatInputControls">
+      <div className="flex items-end gap-2.5" data-component="ChatInputControls">
         <VimTextArea
           ref={inputRef}
           value={input}
@@ -742,13 +742,13 @@ export const ChatInput: React.FC<ChatInputProps> = ({
       <ImageAttachments images={imageAttachments} onRemove={handleRemoveImage} />
       <div className="flex flex-col gap-1" data-component="ChatModeToggles">
         {editingMessage && (
-          <div className="text-[11px] text-edit-mode font-medium">
+          <div className="text-edit-mode text-[11px] font-medium">
             Editing message ({formatKeybind(KEYBINDS.CANCEL_EDIT)} to cancel)
           </div>
         )}
         <div className="flex items-center">
           <ChatToggles modelString={preferredModel}>
-            <div className="flex items-center gap-1 mr-3 h-[11px] @[700px]:[&_.help-indicator-wrapper]:hidden">
+            <div className="mr-3 flex h-[11px] items-center gap-1 @[700px]:[&_.help-indicator-wrapper]:hidden">
               <ModelSelector
                 ref={modelSelectorRef}
                 value={preferredModel}
@@ -779,7 +779,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
               </span>
             </div>
           </ChatToggles>
-          <div className="flex items-center gap-1.5 ml-auto max-@[700px]:hidden">
+          <div className="max-@[700px]:hidden ml-auto flex items-center gap-1.5">
             <div
               className={cn(
                 "flex gap-0 bg-toggle-bg rounded",
diff --git a/src/components/ChatInputToast.tsx b/src/components/ChatInputToast.tsx
index 5960311f87..b9993cd4af 100644
--- a/src/components/ChatInputToast.tsx
+++ b/src/components/ChatInputToast.tsx
@@ -22,7 +22,7 @@ interface ChatInputToastProps {
 }
 
 export const SolutionLabel: React.FC<{ children: ReactNode }> = ({ children }) => (
-  <div className="text-muted-light text-[10px] mb-1 uppercase">{children}</div>
+  <div className="text-muted-light mb-1 text-[10px] uppercase">{children}</div>
 );
 
 export const ChatInputToast: React.FC<ChatInputToastProps> = ({ toast, onDismiss }) => {
@@ -61,19 +61,19 @@ export const ChatInputToast: React.FC<ChatInputToastProps> = ({ toast, onDismiss
 
   if (isRichError) {
     return (
-      <div className="absolute bottom-full left-[15px] right-[15px] mb-2 z-[1000] pointer-events-none [&>*]:pointer-events-auto">
+      <div className="pointer-events-none absolute right-[15px] bottom-full left-[15px] z-[1000] mb-2 [&>*]:pointer-events-auto">
         <div
           role="alert"
           aria-live="assertive"
-          className="bg-toast-fatal-bg border border-toast-fatal-border rounded px-3 py-2.5 text-xs text-danger-soft animate-[toastSlideIn_0.2s_ease-out] shadow-[0_4px_12px_rgba(0,0,0,0.3)]"
+          className="bg-toast-fatal-bg border-toast-fatal-border text-danger-soft animate-[toastSlideIn_0.2s_ease-out] rounded border px-3 py-2.5 text-xs shadow-[0_4px_12px_rgba(0,0,0,0.3)]"
         >
           <div className="flex items-start gap-1.5">
             <span className="text-sm leading-none">⚠</span>
             <div className="flex-1">
-              {toast.title && <div className="font-semibold mb-1.5">{toast.title}</div>}
-              <div className="text-light leading-[1.4] mt-1.5">{toast.message}</div>
+              {toast.title && <div className="mb-1.5 font-semibold">{toast.title}</div>}
+              <div className="text-light mt-1.5 leading-[1.4]">{toast.message}</div>
               {toast.solution && (
-                <div className="bg-dark rounded px-2 py-1.5 mt-2 font-monospace text-[11px] text-code-type">
+                <div className="bg-dark font-monospace text-code-type mt-2 rounded px-2 py-1.5 text-[11px]">
                   {toast.solution}
                 </div>
               )}
@@ -81,7 +81,7 @@ export const ChatInputToast: React.FC<ChatInputToastProps> = ({ toast, onDismiss
             <button
               onClick={handleDismiss}
               aria-label="Dismiss"
-              className="bg-transparent border-0 text-inherit cursor-pointer p-0 w-4 h-4 flex items-center justify-center text-base leading-none opacity-60 transition-opacity hover:opacity-100"
+              className="flex h-4 w-4 cursor-pointer items-center justify-center border-0 bg-transparent p-0 text-base leading-none text-inherit opacity-60 transition-opacity hover:opacity-100"
             >
               ×
             </button>
@@ -93,7 +93,7 @@ export const ChatInputToast: React.FC<ChatInputToastProps> = ({ toast, onDismiss
 
   // Regular toast for simple messages and success
   return (
-    <div className="absolute bottom-full left-[15px] right-[15px] mb-2 z-[1000] pointer-events-none [&>*]:pointer-events-auto">
+    <div className="pointer-events-none absolute right-[15px] bottom-full left-[15px] z-[1000] mb-2 [&>*]:pointer-events-auto">
       <div
         role={toast.type === "error" ? "alert" : "status"}
         aria-live={toast.type === "error" ? "assertive" : "polite"}
@@ -107,14 +107,14 @@ export const ChatInputToast: React.FC<ChatInputToastProps> = ({ toast, onDismiss
       >
         <span className="text-sm leading-none">{toast.type === "success" ? "✓" : "⚠"}</span>
         <div className="flex-1">
-          {toast.title && <div className="font-semibold mb-px text-[11px]">{toast.title}</div>}
+          {toast.title && <div className="mb-px text-[11px] font-semibold">{toast.title}</div>}
           <div className="opacity-90">{toast.message}</div>
         </div>
         {toast.type === "error" && (
           <button
             onClick={handleDismiss}
             aria-label="Dismiss"
-            className="bg-transparent border-0 text-inherit cursor-pointer p-0 w-4 h-4 flex items-center justify-center text-base leading-none opacity-60 transition-opacity hover:opacity-100"
+            className="flex h-4 w-4 cursor-pointer items-center justify-center border-0 bg-transparent p-0 text-base leading-none text-inherit opacity-60 transition-opacity hover:opacity-100"
           >
             ×
           </button>
diff --git a/src/components/CommandPalette.stories.tsx b/src/components/CommandPalette.stories.tsx
index a72b301865..a43a539695 100644
--- a/src/components/CommandPalette.stories.tsx
+++ b/src/components/CommandPalette.stories.tsx
@@ -132,7 +132,7 @@ const PaletteDemo: React.FC<{ autoOpen?: boolean }> = ({ autoOpen = true }) => {
     <>
       <button
         onClick={() => open()}
-        className="py-2 px-4 bg-accent-dark text-white border-none rounded cursor-pointer font-primary text-[13px] self-start hover:bg-accent-hover active:bg-accent-dark"
+        className="bg-accent-dark font-primary hover:bg-accent-hover active:bg-accent-dark cursor-pointer self-start rounded border-none px-4 py-2 text-[13px] text-white"
       >
         Open Command Palette (⌘⇧P)
       </button>
@@ -174,8 +174,8 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   render: () => (
-    <div className="min-h-[600px] bg-dark p-5 flex flex-col gap-5">
-      <div className="p-4 bg-separator border border-border-light rounded text-bright font-primary text-[13px] leading-[1.6] [&_kbd]:py-0.5 [&_kbd]:px-1.5 [&_kbd]:bg-dark [&_kbd]:border [&_kbd]:border-border-light [&_kbd]:rounded-[3px] [&_kbd]:font-monospace [&_kbd]:text-[11px]">
+    <div className="bg-dark flex min-h-[600px] flex-col gap-5 p-5">
+      <div className="bg-separator border-border-light text-bright font-primary [&_kbd]:bg-dark [&_kbd]:border-border-light [&_kbd]:font-monospace rounded border p-4 text-[13px] leading-[1.6] [&_kbd]:rounded-[3px] [&_kbd]:border [&_kbd]:px-1.5 [&_kbd]:py-0.5 [&_kbd]:text-[11px]">
         <strong>Command Palette</strong>
         <br />
         <br />
diff --git a/src/components/CommandPalette.tsx b/src/components/CommandPalette.tsx
index 658db47156..06da96b9cf 100644
--- a/src/components/CommandPalette.tsx
+++ b/src/components/CommandPalette.tsx
@@ -355,7 +355,7 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
 
   return (
     <div
-      className="fixed inset-0 bg-black/40 z-[2000] flex items-start justify-center pt-[10vh]"
+      className="fixed inset-0 z-[2000] flex items-start justify-center bg-black/40 pt-[10vh]"
       onMouseDown={() => {
         setActivePrompt(null);
         setPromptError(null);
@@ -364,12 +364,12 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
       }}
     >
       <Command
-        className="w-[min(720px,92vw)] bg-separator border border-border rounded-lg shadow-[0_10px_40px_rgba(0,0,0,0.4)] text-lighter font-primary overflow-hidden"
+        className="bg-separator border-border text-lighter font-primary w-[min(720px,92vw)] overflow-hidden rounded-lg border shadow-[0_10px_40px_rgba(0,0,0,0.4)]"
         onMouseDown={(e: React.MouseEvent) => e.stopPropagation()}
         shouldFilter={shouldUseCmdkFilter}
       >
         <Command.Input
-          className="w-full py-3 px-3.5 bg-darker text-lighter border-none outline-none text-sm border-b border-hover"
+          className="bg-darker text-lighter border-hover w-full border-b border-none px-3.5 py-3 text-sm outline-none"
           value={query}
           onValueChange={handleQueryChange}
           placeholder={
@@ -405,12 +405,12 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
             <Command.Group
               key={group.name}
               heading={group.name}
-              className="[&[cmdk-group]]:py-2 [&[cmdk-group]]:px-1.5 [&[cmdk-group-heading]]:py-1 [&[cmdk-group-heading]]:px-2.5 [&[cmdk-group-heading]]:text-subdued [&[cmdk-group-heading]]:text-[11px] [&[cmdk-group-heading]]:uppercase [&[cmdk-group-heading]]:tracking-[0.08em]"
+              className="[&[cmdk-group-heading]]:text-subdued [&[cmdk-group-heading]]:px-2.5 [&[cmdk-group-heading]]:py-1 [&[cmdk-group-heading]]:text-[11px] [&[cmdk-group-heading]]:tracking-[0.08em] [&[cmdk-group-heading]]:uppercase [&[cmdk-group]]:px-1.5 [&[cmdk-group]]:py-2"
             >
               {group.items.map((item) => (
                 <Command.Item
                   key={item.id}
-                  className="grid grid-cols-[1fr_auto] items-center gap-2 py-2 px-3 text-[13px] cursor-pointer rounded-md my-0.5 mx-1 hover:bg-hover aria-selected:bg-hover"
+                  className="hover:bg-hover aria-selected:bg-hover mx-1 my-0.5 grid cursor-pointer grid-cols-[1fr_auto] items-center gap-2 rounded-md px-3 py-2 text-[13px]"
                   onSelect={() => {
                     if ("prompt" in item && item.prompt) {
                       addRecent(item.id);
@@ -440,7 +440,7 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
                     )}
                   </div>
                   {"shortcutHint" in item && item.shortcutHint && (
-                    <span className="text-subdued text-[11px] font-monospace">
+                    <span className="text-subdued font-monospace text-[11px]">
                       {item.shortcutHint}
                     </span>
                   )}
@@ -449,7 +449,7 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
             </Command.Group>
           ))}
           {!hasAnyItems && (
-            <div className="p-4 text-gray text-[13px]">{emptyText ?? "No results"}</div>
+            <div className="text-gray p-4 text-[13px]">{emptyText ?? "No results"}</div>
           )}
         </Command.List>
       </Command>
diff --git a/src/components/CommandSuggestions.tsx b/src/components/CommandSuggestions.tsx
index a6d7696b38..fd607c3ea7 100644
--- a/src/components/CommandSuggestions.tsx
+++ b/src/components/CommandSuggestions.tsx
@@ -93,7 +93,7 @@ export const CommandSuggestions: React.FC<CommandSuggestionsProps> = ({
         activeSuggestion ? `${resolvedListId}-option-${activeSuggestion.id}` : undefined
       }
       data-command-suggestions
-      className="absolute bottom-full left-0 right-0 mb-2 bg-separator border border-border-light rounded shadow-[0_-4px_12px_rgba(0,0,0,0.4)] max-h-[200px] overflow-y-auto z-[100] flex flex-col"
+      className="bg-separator border-border-light absolute right-0 bottom-full left-0 z-[100] mb-2 flex max-h-[200px] flex-col overflow-y-auto rounded border shadow-[0_-4px_12px_rgba(0,0,0,0.4)]"
     >
       {suggestions.map((suggestion, index) => (
         <div
@@ -108,15 +108,13 @@ export const CommandSuggestions: React.FC<CommandSuggestionsProps> = ({
             index === selectedIndex ? "bg-accent-darker" : "bg-transparent"
           )}
         >
-          <div className="text-accent font-monospace text-xs flex-shrink-0">
-            {suggestion.display}
-          </div>
-          <div className="text-medium text-[11px] text-right overflow-hidden text-ellipsis whitespace-nowrap">
+          <div className="text-accent font-monospace shrink-0 text-xs">{suggestion.display}</div>
+          <div className="text-medium truncate text-right text-[11px]">
             {suggestion.description}
           </div>
         </div>
       ))}
-      <div className="px-2.5 py-1 border-t border-border-light bg-dark text-placeholder text-[10px] text-center flex-shrink-0 [&_span]:text-medium [&_span]:font-medium">
+      <div className="border-border-light bg-dark text-placeholder [&_span]:text-medium shrink-0 border-t px-2.5 py-1 text-center text-[10px] [&_span]:font-medium">
         <span>Tab</span> to complete • <span>↑↓</span> to navigate • <span>Esc</span> to dismiss
       </div>
     </div>
diff --git a/src/components/Context1MCheckbox.tsx b/src/components/Context1MCheckbox.tsx
index d9eb4df0cb..ea474c2088 100644
--- a/src/components/Context1MCheckbox.tsx
+++ b/src/components/Context1MCheckbox.tsx
@@ -16,18 +16,18 @@ export const Context1MCheckbox: React.FC<Context1MCheckboxProps> = ({ modelStrin
   }
 
   return (
-    <div className="flex items-center gap-1.5 ml-2">
-      <label className="flex items-center gap-1 text-[10px] text-foreground cursor-pointer select-none whitespace-nowrap overflow-hidden text-ellipsis hover:text-white">
+    <div className="ml-2 flex items-center gap-1.5">
+      <label className="text-foreground flex cursor-pointer items-center gap-1 truncate text-[10px] select-none hover:text-white">
         <input
           type="checkbox"
           checked={use1M}
           onChange={(e) => setUse1M(e.target.checked)}
-          className="cursor-pointer w-3 h-[11px] m-0 appearance-none border border-border-light rounded-sm bg-dark relative hover:border-accent checked:bg-accent checked:border-accent checked:after:content-[''] checked:after:absolute checked:after:left-[3px] checked:after:top-0 checked:after:w-1 checked:after:h-[6px] checked:after:border-solid checked:after:border-white checked:after:border-r-[1.5px] checked:after:border-b-[1.5px] checked:after:rotate-45"
+          className="border-border-light bg-dark hover:border-accent checked:bg-accent checked:border-accent relative m-0 h-[11px] w-3 cursor-pointer appearance-none rounded-sm border checked:after:absolute checked:after:top-0 checked:after:left-[3px] checked:after:h-[6px] checked:after:w-1 checked:after:rotate-45 checked:after:border-r-[1.5px] checked:after:border-b-[1.5px] checked:after:border-solid checked:after:border-white checked:after:content-['']"
         />
         1M Context
       </label>
       <TooltipWrapper inline>
-        <span className="cursor-help text-muted text-[10px] leading-none flex items-center">?</span>
+        <span className="text-muted flex cursor-help items-center text-[10px] leading-none">?</span>
         <Tooltip className="tooltip" align="center" width="auto">
           Enable 1M token context window (beta feature for Claude Sonnet 4/4.5)
         </Tooltip>
diff --git a/src/components/DirectorySelectModal.tsx b/src/components/DirectorySelectModal.tsx
index d65657e91d..d3b3a4dde4 100644
--- a/src/components/DirectorySelectModal.tsx
+++ b/src/components/DirectorySelectModal.tsx
@@ -82,9 +82,9 @@ export const DirectorySelectModal: React.FC = () => {
         onKeyDown={handleKeyDown}
         placeholder="/home/user/projects/my-project"
         autoFocus
-        className="w-full px-3 py-2 bg-modal-bg border border-border-medium rounded text-white text-sm font-mono mb-5 focus:outline-none focus:border-accent placeholder:text-muted"
+        className="bg-modal-bg border-border-medium focus:border-accent placeholder:text-muted mb-5 w-full rounded border px-3 py-2 font-mono text-sm text-white focus:outline-none"
       />
-      {error && <div className="text-error text-xs -mt-3 mb-3">{error}</div>}
+      {error && <div className="text-error -mt-3 mb-3 text-xs">{error}</div>}
       <ModalActions>
         <CancelButton onClick={handleCancel}>Cancel</CancelButton>
         <PrimaryButton onClick={handleSelect}>Select</PrimaryButton>
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
index fcce565307..65c5ac57ba 100644
--- a/src/components/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary.tsx
@@ -42,12 +42,12 @@ export class ErrorBoundary extends Component<Props, State> {
       }
 
       return (
-        <div className="p-5 bg-error-bg-dark border border-danger-soft rounded text-danger-soft m-5">
+        <div className="bg-error-bg-dark border-danger-soft text-danger-soft m-5 rounded border p-5">
           <h3 className="m-0 mb-2.5 text-base">
             Something went wrong{this.props.workspaceInfo && ` in ${this.props.workspaceInfo}`}
           </h3>
           {this.state.error && (
-            <pre className="my-2.5 p-2.5 bg-black/30 rounded-sm text-xs whitespace-pre-wrap break-all">
+            <pre className="my-2.5 rounded-sm bg-black/30 p-2.5 text-xs break-all whitespace-pre-wrap">
               {this.state.error.toString()}
               {this.state.errorInfo && (
                 <>
@@ -59,7 +59,7 @@ export class ErrorBoundary extends Component<Props, State> {
           )}
           <button
             onClick={this.handleReset}
-            className="py-2 px-4 bg-danger-soft text-white border-none rounded-sm cursor-pointer text-sm hover:bg-info-light"
+            className="bg-danger-soft hover:bg-info-light cursor-pointer rounded-sm border-none px-4 py-2 text-sm text-white"
           >
             Reset
           </button>
diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx
index 828fad2168..a3474d5707 100644
--- a/src/components/ErrorMessage.tsx
+++ b/src/components/ErrorMessage.tsx
@@ -8,9 +8,9 @@ interface ErrorMessageProps {
 
 export const ErrorMessage: React.FC<ErrorMessageProps> = ({ title, message, details }) => {
   return (
-    <div className="bg-error-bg text-error border border-error rounded p-3 my-2 font-mono text-sm leading-relaxed whitespace-pre-wrap break-words">
+    <div className="bg-error-bg text-error border-error my-2 rounded border p-3 font-mono text-sm leading-relaxed break-words whitespace-pre-wrap">
       {title && (
-        <div className="font-bold mb-2 flex items-center gap-2">
+        <div className="mb-2 flex items-center gap-2 font-bold">
           <span className="text-lg">⚠️</span>
           {title}
         </div>
diff --git a/src/components/GitStatusIndicatorView.tsx b/src/components/GitStatusIndicatorView.tsx
index 179388b0ae..6381290171 100644
--- a/src/components/GitStatusIndicatorView.tsx
+++ b/src/components/GitStatusIndicatorView.tsx
@@ -62,7 +62,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
   if (!gitStatus) {
     return (
       <span
-        className="text-accent text-[11px] flex items-center gap-1 mr-1.5 font-mono relative"
+        className="text-accent relative mr-1.5 flex items-center gap-1 font-mono text-[11px]"
         aria-hidden="true"
       />
     );
@@ -72,7 +72,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
   if (gitStatus.ahead === 0 && gitStatus.behind === 0 && !gitStatus.dirty) {
     return (
       <span
-        className="text-accent text-[11px] flex items-center gap-1 mr-1.5 font-mono relative"
+        className="text-accent relative mr-1.5 flex items-center gap-1 font-mono text-[11px]"
         aria-hidden="true"
       />
     );
@@ -81,7 +81,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
   // Render colored indicator characters
   const renderIndicators = (indicators: string) => {
     return (
-      <span className="text-placeholder whitespace-pre flex-shrink-0 font-mono mr-2">
+      <span className="text-placeholder mr-2 shrink-0 font-mono whitespace-pre">
         {Array.from(indicators).map((char, index) => (
           <span key={index} style={{ color: getIndicatorColor(index) }}>
             {char}
@@ -98,10 +98,10 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
     }
 
     return (
-      <div className="flex flex-col gap-0.5 mb-2 pb-2 border-b border-separator-light">
+      <div className="border-separator-light mb-2 flex flex-col gap-0.5 border-b pb-2">
         {branchHeaders.map((header, index) => (
           <div key={index} className="flex gap-2 font-mono leading-snug">
-            <span className="text-placeholder whitespace-pre flex-shrink-0 font-mono mr-2">
+            <span className="text-placeholder mr-2 shrink-0 font-mono whitespace-pre">
               {/* Create spacing to align with column */}
               {Array.from({ length: header.columnIndex }).map((_, i) => (
                 <span key={i} style={{ color: getIndicatorColor(i) }}>
@@ -128,8 +128,8 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
     const isTruncated = dirtyFiles.length > LIMIT;
 
     return (
-      <div className="mb-2 pb-2 border-b border-separator-light">
-        <div className="text-git-dirty font-semibold mb-1 font-mono">Uncommitted changes:</div>
+      <div className="border-separator-light mb-2 border-b pb-2">
+        <div className="text-git-dirty mb-1 font-mono font-semibold">Uncommitted changes:</div>
         <div className="flex flex-col gap-px">
           {displayFiles.map((line, index) => (
             <div
@@ -141,7 +141,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
           ))}
         </div>
         {isTruncated && (
-          <div className="text-muted-light italic mt-1 text-[10px]">
+          <div className="text-muted-light mt-1 text-[10px] italic">
             (showing {LIMIT} of {dirtyFiles.length} files)
           </div>
         )}
@@ -172,8 +172,8 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
             <div key={`${commit.hash}-${index}`} className="flex flex-col gap-0.5">
               <div className="flex gap-2 font-mono leading-snug">
                 {renderIndicators(commit.indicators)}
-                <span className="text-accent flex-shrink-0 select-all">{commit.hash}</span>
-                <span className="text-muted-light flex-shrink-0">{commit.date}</span>
+                <span className="text-accent shrink-0 select-all">{commit.hash}</span>
+                <span className="text-muted-light shrink-0">{commit.date}</span>
                 <span className="text-foreground flex-1 break-words">{commit.subject}</span>
               </div>
             </div>
@@ -208,7 +208,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
         ref={onContainerRef}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
-        className="text-accent text-[11px] flex items-center gap-1 mr-1.5 font-mono relative"
+        className="text-accent relative mr-1.5 flex items-center gap-1 font-mono text-[11px]"
       >
         {gitStatus.ahead > 0 && (
           <span className="flex items-center font-normal">↑{gitStatus.ahead}</span>
@@ -217,7 +217,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
           <span className="flex items-center font-normal">↓{gitStatus.behind}</span>
         )}
         {gitStatus.dirty && (
-          <span className="flex items-center font-normal text-git-dirty leading-none">*</span>
+          <span className="text-git-dirty flex items-center leading-none font-normal">*</span>
         )}
       </span>
 
diff --git a/src/components/ImageAttachments.tsx b/src/components/ImageAttachments.tsx
index 8f4dff0cdb..2f2c75ab7e 100644
--- a/src/components/ImageAttachments.tsx
+++ b/src/components/ImageAttachments.tsx
@@ -19,13 +19,13 @@ export const ImageAttachments: React.FC<ImageAttachmentsProps> = ({ images, onRe
       {images.map((image) => (
         <div
           key={image.id}
-          className="relative w-20 h-20 rounded overflow-hidden border border-border-light bg-dark"
+          className="border-border-light bg-dark relative h-20 w-20 overflow-hidden rounded border"
         >
-          <img src={image.url} alt="Attached image" className="w-full h-full object-cover" />
+          <img src={image.url} alt="Attached image" className="h-full w-full object-cover" />
           <button
             onClick={() => onRemove(image.id)}
             title="Remove image"
-            className="absolute top-1 right-1 w-5 h-5 rounded-full bg-black/70 text-white border-0 cursor-pointer flex items-center justify-center text-sm leading-none p-0 hover:bg-black/90"
+            className="absolute top-1 right-1 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full border-0 bg-black/70 p-0 text-sm leading-none text-white hover:bg-black/90"
           >
             ×
           </button>
diff --git a/src/components/KebabMenu.tsx b/src/components/KebabMenu.tsx
index 9a9d9ec546..8084418638 100644
--- a/src/components/KebabMenu.tsx
+++ b/src/components/KebabMenu.tsx
@@ -98,7 +98,7 @@ export const KebabMenu: React.FC<KebabMenuProps> = ({ items, className }) => {
         createPortal(
           <div
             ref={menuRef}
-            className="fixed bg-dark border border-border-light rounded-[3px] shadow-[0_4px_16px_rgba(0,0,0,0.8)] z-[10000] min-w-40 overflow-hidden"
+            className="bg-dark border-border-light fixed z-[10000] min-w-40 overflow-hidden rounded-[3px] border shadow-[0_4px_16px_rgba(0,0,0,0.8)]"
             style={{
               top: `${dropdownPosition.top}px`,
               left: `${dropdownPosition.left}px`,
@@ -120,7 +120,7 @@ export const KebabMenu: React.FC<KebabMenuProps> = ({ items, className }) => {
                 )}
               >
                 {item.emoji && (
-                  <span className="text-[13px] w-4 text-center flex-shrink-0">{item.emoji}</span>
+                  <span className="w-4 shrink-0 text-center text-[13px]">{item.emoji}</span>
                 )}
                 <span className="flex-1">{item.label}</span>
               </button>
diff --git a/src/components/Messages/AssistantMessage.tsx b/src/components/Messages/AssistantMessage.tsx
index c8d19e96f7..864fe89ae1 100644
--- a/src/components/Messages/AssistantMessage.tsx
+++ b/src/components/Messages/AssistantMessage.tsx
@@ -90,7 +90,7 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({
     // Empty streaming state
     if (isStreaming && !content) {
       return (
-        <div className="font-primary text-[13px] text-secondary italic">
+        <div className="font-primary text-secondary text-[13px] italic">
           Waiting for response...
         </div>
       );
@@ -111,7 +111,7 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({
     // Completed text renders as static content
     return content ? (
       showRaw ? (
-        <pre className="font-mono text-xs leading-relaxed text-text whitespace-pre-wrap break-words m-0 p-2 bg-code-bg rounded-sm">
+        <pre className="text-text bg-code-bg m-0 rounded-sm p-2 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap">
           {content}
         </pre>
       ) : (
@@ -129,7 +129,7 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({
       <div className="flex items-center gap-2">
         {modelName && <ModelDisplay modelString={modelName} />}
         {isCompacted && (
-          <span className="text-plan-mode font-medium text-[10px] px-1.5 py-0.5 bg-plan-mode/10 rounded-sm uppercase">
+          <span className="text-plan-mode bg-plan-mode/10 rounded-sm px-1.5 py-0.5 text-[10px] font-medium uppercase">
             {COMPACTED_EMOJI} compacted
           </span>
         )}
diff --git a/src/components/Messages/ChatBarrier/BaseBarrier.tsx b/src/components/Messages/ChatBarrier/BaseBarrier.tsx
index bce2371aab..efa05f7aa2 100644
--- a/src/components/Messages/ChatBarrier/BaseBarrier.tsx
+++ b/src/components/Messages/ChatBarrier/BaseBarrier.tsx
@@ -23,19 +23,19 @@ export const BaseBarrier: React.FC<BaseBarrierProps> = ({
       )}
     >
       <div
-        className="flex-1 h-px opacity-30"
+        className="h-px flex-1 opacity-30"
         style={{
           background: `linear-gradient(to right, transparent, ${color} 20%, ${color} 80%, transparent)`,
         }}
       />
       <div
-        className="font-mono text-[10px] uppercase tracking-wide whitespace-nowrap"
+        className="font-mono text-[10px] tracking-wide whitespace-nowrap uppercase"
         style={{ color }}
       >
         {text}
       </div>
       <div
-        className="flex-1 h-px opacity-30"
+        className="h-px flex-1 opacity-30"
         style={{
           background: `linear-gradient(to right, transparent, ${color} 20%, ${color} 80%, transparent)`,
         }}
diff --git a/src/components/Messages/ChatBarrier/RetryBarrier.tsx b/src/components/Messages/ChatBarrier/RetryBarrier.tsx
index 81c029119d..1be095f8bb 100644
--- a/src/components/Messages/ChatBarrier/RetryBarrier.tsx
+++ b/src/components/Messages/ChatBarrier/RetryBarrier.tsx
@@ -101,22 +101,22 @@ export const RetryBarrier: React.FC<RetryBarrierProps> = ({
           className
         )}
       >
-        <div className="flex items-center gap-3 flex-1">
+        <div className="flex flex-1 items-center gap-3">
           <span className="text-lg leading-none">🔄</span>
-          <div className="font-primary text-[13px] text-foreground font-medium">
+          <div className="font-primary text-foreground text-[13px] font-medium">
             {countdown === 0 ? (
               <>Retrying... (attempt {attempt + 1})</>
             ) : (
               <>
                 Retrying in{" "}
-                <span className="font-mono font-semibold text-warning">{countdown}s</span> (attempt{" "}
+                <span className="text-warning font-mono font-semibold">{countdown}s</span> (attempt{" "}
                 {attempt + 1})
               </>
             )}
           </div>
         </div>
         <button
-          className="bg-transparent border border-warning rounded px-4 py-2 font-primary text-xs font-semibold text-warning cursor-pointer transition-all duration-200 whitespace-nowrap hover:bg-warning-overlay hover:-translate-y-px active:translate-y-0 disabled:opacity-50 disabled:cursor-not-allowed"
+          className="border-warning font-primary text-warning hover:bg-warning-overlay cursor-pointer rounded border bg-transparent px-4 py-2 text-xs font-semibold whitespace-nowrap transition-all duration-200 hover:-translate-y-px active:translate-y-0 disabled:cursor-not-allowed disabled:opacity-50"
           onClick={handleStopAutoRetry}
         >
           Stop Auto-Retry
@@ -132,14 +132,14 @@ export const RetryBarrier: React.FC<RetryBarrierProps> = ({
           className
         )}
       >
-        <div className="flex items-center gap-3 flex-1">
+        <div className="flex flex-1 items-center gap-3">
           <span className="text-lg leading-none">⚠️</span>
-          <div className="font-primary text-[13px] text-foreground font-medium">
+          <div className="font-primary text-foreground text-[13px] font-medium">
             Stream interrupted
           </div>
         </div>
         <button
-          className="bg-warning border-none rounded px-4 py-2 font-primary text-xs font-semibold text-background cursor-pointer transition-all duration-200 whitespace-nowrap hover:brightness-120 hover:-translate-y-px active:translate-y-0 disabled:opacity-50 disabled:cursor-not-allowed"
+          className="bg-warning font-primary text-background cursor-pointer rounded border-none px-4 py-2 text-xs font-semibold whitespace-nowrap transition-all duration-200 hover:-translate-y-px hover:brightness-120 active:translate-y-0 disabled:cursor-not-allowed disabled:opacity-50"
           onClick={handleManualRetry}
         >
           Retry
diff --git a/src/components/Messages/ChatBarrier/StreamingBarrier.tsx b/src/components/Messages/ChatBarrier/StreamingBarrier.tsx
index 743d9442c4..98a0078758 100644
--- a/src/components/Messages/ChatBarrier/StreamingBarrier.tsx
+++ b/src/components/Messages/ChatBarrier/StreamingBarrier.tsx
@@ -18,10 +18,10 @@ export const StreamingBarrier: React.FC<StreamingBarrierProps> = ({
 }) => {
   return (
     <div className={`flex items-center justify-between gap-4 ${className ?? ""}`}>
-      <div className="flex items-center gap-2 flex-1">
+      <div className="flex flex-1 items-center gap-2">
         <BaseBarrier text={statusText} color="var(--color-assistant-border)" animate />
         {tokenCount !== undefined && (
-          <span className="font-mono text-[11px] text-assistant-border select-none whitespace-nowrap">
+          <span className="text-assistant-border font-mono text-[11px] whitespace-nowrap select-none">
             ~{tokenCount.toLocaleString()} tokens
             {tps !== undefined && tps > 0 && (
               <span className="text-text-dim ml-1">@ {tps} t/s</span>
@@ -29,7 +29,7 @@ export const StreamingBarrier: React.FC<StreamingBarrierProps> = ({
           </span>
         )}
       </div>
-      <div className="text-[11px] text-muted select-none whitespace-nowrap ml-auto">
+      <div className="text-muted ml-auto text-[11px] whitespace-nowrap select-none">
         {cancelText}
       </div>
     </div>
diff --git a/src/components/Messages/CompactingMessageContent.tsx b/src/components/Messages/CompactingMessageContent.tsx
index 302052b472..66b8a225ec 100644
--- a/src/components/Messages/CompactingMessageContent.tsx
+++ b/src/components/Messages/CompactingMessageContent.tsx
@@ -13,7 +13,7 @@ interface CompactingMessageContentProps {
 export const CompactingMessageContent: React.FC<CompactingMessageContentProps> = ({ children }) => {
   return (
     <div
-      className="max-h-[300px] overflow-hidden relative flex flex-col justify-end"
+      className="relative flex max-h-[300px] flex-col justify-end overflow-hidden"
       style={{
         maskImage:
           "linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.3) 5%, rgba(0,0,0,0.6) 10%, rgba(0,0,0,0.85) 15%, black 20%)",
diff --git a/src/components/Messages/CompactionBackground.tsx b/src/components/Messages/CompactionBackground.tsx
index 02e6186da0..ae3050b03f 100644
--- a/src/components/Messages/CompactionBackground.tsx
+++ b/src/components/Messages/CompactionBackground.tsx
@@ -7,9 +7,9 @@ import React from "react";
 
 export const CompactionBackground: React.FC = () => {
   return (
-    <div className="absolute inset-0 overflow-hidden pointer-events-none rounded-md">
+    <div className="pointer-events-none absolute inset-0 overflow-hidden rounded-md">
       <div
-        className="absolute inset-0 opacity-40 animate-[gradient-move_8s_ease_infinite]"
+        className="absolute inset-0 animate-[gradient-move_8s_ease_infinite] opacity-40"
         style={{
           background:
             "linear-gradient(-45deg, var(--color-plan-mode-alpha), color-mix(in srgb, var(--color-plan-mode) 30%, transparent), var(--color-plan-mode-alpha), color-mix(in srgb, var(--color-plan-mode) 25%, transparent))",
diff --git a/src/components/Messages/MessageWindow.tsx b/src/components/Messages/MessageWindow.tsx
index 034c4e97c2..85b752de3a 100644
--- a/src/components/Messages/MessageWindow.tsx
+++ b/src/components/Messages/MessageWindow.tsx
@@ -68,18 +68,18 @@ export const MessageWindow: React.FC<MessageWindowProps> = ({
     >
       {backgroundEffect}
       <div
-        className="relative z-10 py-1 px-3 bg-white/5 border-b border-white/10 flex justify-between items-center text-[11px] text-message-header font-medium"
+        className="text-message-header relative z-10 flex items-center justify-between border-b border-white/10 bg-white/5 px-3 py-1 text-[11px] font-medium"
         data-message-header
       >
-        <div className="flex items-baseline gap-3 min-w-0 flex-1" data-message-header-left>
+        <div className="flex min-w-0 flex-1 items-baseline gap-3" data-message-header-left>
           <div
-            className="font-mono inline-flex items-baseline uppercase tracking-wider whitespace-nowrap overflow-hidden min-w-0"
+            className="inline-flex min-w-0 items-baseline overflow-hidden font-mono tracking-wider whitespace-nowrap uppercase"
             data-message-type-label
           >
             {label}
           </div>
           {formattedTimestamp && (
-            <span className="text-[10px] font-normal font-mono opacity-50" data-message-timestamp>
+            <span className="font-mono text-[10px] font-normal opacity-50" data-message-timestamp>
               {formattedTimestamp}
             </span>
           )}
@@ -124,7 +124,7 @@ export const MessageWindow: React.FC<MessageWindowProps> = ({
       </div>
       <div className="relative z-10 p-3" data-message-content>
         {showJson ? (
-          <pre className="m-0 font-mono text-[11px] leading-snug whitespace-pre-wrap text-light bg-black/30 p-2 rounded-sm overflow-x-auto">
+          <pre className="text-light m-0 overflow-x-auto rounded-sm bg-black/30 p-2 font-mono text-[11px] leading-snug whitespace-pre-wrap">
             {JSON.stringify(message, null, 2)}
           </pre>
         ) : (
diff --git a/src/components/Messages/ModelDisplay.tsx b/src/components/Messages/ModelDisplay.tsx
index 3830c6708a..c91ef90f41 100644
--- a/src/components/Messages/ModelDisplay.tsx
+++ b/src/components/Messages/ModelDisplay.tsx
@@ -41,13 +41,13 @@ export const ModelDisplay: React.FC<ModelDisplayProps> = ({ modelString, showToo
     <span className="inline normal-case" data-model-display>
       {providerIcon && (
         <span
-          className="inline-block align-[-0.19em] w-[1.1em] h-[1.1em] mr-[0.3em] [&_svg]:block [&_svg]:w-full [&_svg]:h-full [&_svg_.st0]:fill-current [&_svg_path]:!fill-current [&_svg_circle]:!fill-current [&_svg_rect]:!fill-current"
+          className="mr-[0.3em] inline-block h-[1.1em] w-[1.1em] align-[-0.19em] [&_svg]:block [&_svg]:h-full [&_svg]:w-full [&_svg_.st0]:fill-current [&_svg_circle]:!fill-current [&_svg_path]:!fill-current [&_svg_rect]:!fill-current"
           data-model-icon
         >
           {providerIcon}
         </span>
       )}
-      <span className="font-mono inline">{displayName}</span>
+      <span className="inline font-mono">{displayName}</span>
     </span>
   );
 
diff --git a/src/components/Messages/ReasoningMessage.tsx b/src/components/Messages/ReasoningMessage.tsx
index 6fdd7f3fac..f4b791a423 100644
--- a/src/components/Messages/ReasoningMessage.tsx
+++ b/src/components/Messages/ReasoningMessage.tsx
@@ -52,10 +52,10 @@ export const ReasoningMessage: React.FC<ReasoningMessageProps> = ({ message, cla
       )}
     >
       <div
-        className="flex items-center justify-between gap-2 mb-1.5 cursor-pointer select-none"
+        className="mb-1.5 flex cursor-pointer items-center justify-between gap-2 select-none"
         onClick={toggleExpanded}
       >
-        <div className="flex items-center gap-2 text-[10px] uppercase tracking-wide text-thinking-mode font-semibold opacity-80">
+        <div className="text-thinking-mode flex items-center gap-2 text-[10px] font-semibold tracking-wide uppercase opacity-80">
           <span className="text-xs">💭</span>
           <span>Thinking</span>
         </div>
@@ -72,7 +72,7 @@ export const ReasoningMessage: React.FC<ReasoningMessageProps> = ({ message, cla
       </div>
 
       {isExpanded && (
-        <div className="font-primary text-sm leading-6 italic opacity-85 [&_p]:mb-1 [&_p]:mt-0 [&_p:last-child]:mb-0">
+        <div className="font-primary text-sm leading-6 italic opacity-85 [&_p]:mt-0 [&_p]:mb-1 [&_p:last-child]:mb-0">
           {renderContent()}
         </div>
       )}
diff --git a/src/components/Messages/StreamErrorMessage.tsx b/src/components/Messages/StreamErrorMessage.tsx
index 46bb20da09..e02bc0824e 100644
--- a/src/components/Messages/StreamErrorMessage.tsx
+++ b/src/components/Messages/StreamErrorMessage.tsx
@@ -13,19 +13,19 @@ export const StreamErrorMessage: React.FC<StreamErrorMessageProps> = ({ message,
 
   return (
     <div className={cn("bg-error-bg border border-error rounded px-5 py-4 my-3", className)}>
-      <div className="font-primary text-[13px] font-semibold text-error mb-3 flex items-center gap-2.5 tracking-wide">
+      <div className="font-primary text-error mb-3 flex items-center gap-2.5 text-[13px] font-semibold tracking-wide">
         <span className="text-base leading-none">●</span>
         <span>Stream Error</span>
-        <span className="font-mono text-[10px] text-secondary uppercase bg-black/40 px-2 py-0.5 rounded-sm tracking-wider">
+        <span className="text-secondary rounded-sm bg-black/40 px-2 py-0.5 font-mono text-[10px] tracking-wider uppercase">
           {message.errorType}
         </span>
         {showCount && (
-          <span className="font-mono text-[10px] text-error bg-red-500/15 px-2 py-0.5 rounded-sm tracking-wide font-semibold ml-auto">
+          <span className="text-error ml-auto rounded-sm bg-red-500/15 px-2 py-0.5 font-mono text-[10px] font-semibold tracking-wide">
             ×{message.errorCount}
           </span>
         )}
       </div>
-      <div className="font-mono text-[13px] text-foreground leading-relaxed break-words">
+      <div className="text-foreground font-mono text-[13px] leading-relaxed break-words">
         {message.error}
       </div>
     </div>
diff --git a/src/components/Messages/UserMessage.tsx b/src/components/Messages/UserMessage.tsx
index 37a46a427e..75968b3519 100644
--- a/src/components/Messages/UserMessage.tsx
+++ b/src/components/Messages/UserMessage.tsx
@@ -121,18 +121,18 @@ export const UserMessage: React.FC<UserMessageProps> = ({
       className={className}
     >
       {content && (
-        <pre className="m-0 font-mono text-xs leading-4 whitespace-pre-wrap break-words text-subtle opacity-90">
+        <pre className="text-subtle m-0 font-mono text-xs leading-4 break-words whitespace-pre-wrap opacity-90">
           {content}
         </pre>
       )}
       {message.imageParts && message.imageParts.length > 0 && (
-        <div className="flex flex-wrap gap-2 mt-2">
+        <div className="mt-2 flex flex-wrap gap-2">
           {message.imageParts.map((img, idx) => (
             <img
               key={idx}
               src={img.url}
               alt={`Attachment ${idx + 1}`}
-              className="max-w-80 max-h-[300px] rounded border border-border-light"
+              className="border-border-light max-h-[300px] max-w-80 rounded border"
             />
           ))}
         </div>
diff --git a/src/components/ModelSelector.tsx b/src/components/ModelSelector.tsx
index 18be0cfe16..64d7298369 100644
--- a/src/components/ModelSelector.tsx
+++ b/src/components/ModelSelector.tsx
@@ -185,7 +185,7 @@ export const ModelSelector = forwardRef<ModelSelectorRef, ModelSelectorProps>(
       return (
         <div ref={containerRef} className="relative flex items-center gap-1">
           <div
-            className="font-mono text-[10px] text-muted-light font-monospace leading-[11px] cursor-pointer py-0.5 px-1 rounded-sm transition-colors duration-200 whitespace-nowrap overflow-hidden text-ellipsis max-w-36 dir-rtl text-left hover:bg-hover"
+            className="text-muted-light font-monospace dir-rtl hover:bg-hover max-w-36 cursor-pointer truncate rounded-sm px-1 py-0.5 text-left font-mono text-[10px] leading-[11px] transition-colors duration-200"
             onClick={handleClick}
           >
             {value}
@@ -203,14 +203,14 @@ export const ModelSelector = forwardRef<ModelSelectorRef, ModelSelectorProps>(
             onChange={handleInputChange}
             onKeyDown={handleKeyDown}
             placeholder="provider:model-name"
-            className="text-[10px] text-light bg-dark border border-border-light rounded-sm py-0.5 px-1 font-monospace leading-[11px] w-48 outline-none focus:border-exec-mode"
+            className="text-light bg-dark border-border-light font-monospace focus:border-exec-mode w-48 rounded-sm border px-1 py-0.5 text-[10px] leading-[11px] outline-none"
           />
           {error && (
-            <div className="text-[9px] text-danger-soft font-monospace mt-0.5">{error}</div>
+            <div className="text-danger-soft font-monospace mt-0.5 text-[9px]">{error}</div>
           )}
         </div>
         {showDropdown && filteredModels.length > 0 && (
-          <div className="absolute bottom-full left-0 mb-1 bg-separator border border-border-light rounded shadow-[0_4px_12px_rgba(0,0,0,0.3)] z-[1000] min-w-80 max-h-[200px] overflow-y-auto">
+          <div className="bg-separator border-border-light absolute bottom-full left-0 z-[1000] mb-1 max-h-[200px] min-w-80 overflow-y-auto rounded border shadow-[0_4px_12px_rgba(0,0,0,0.3)]">
             {filteredModels.map((model, index) => (
               <div
                 key={model}
diff --git a/src/components/NewWorkspaceModal.tsx b/src/components/NewWorkspaceModal.tsx
index 6b116b4d63..893a37573b 100644
--- a/src/components/NewWorkspaceModal.tsx
+++ b/src/components/NewWorkspaceModal.tsx
@@ -100,10 +100,10 @@ const NewWorkspaceModal: React.FC<NewWorkspaceModalProps> = ({
       describedById={infoId}
     >
       <form onSubmit={(event) => void handleSubmit(event)}>
-        <div className="mb-5 [&_label]:block [&_label]:mb-2 [&_label]:text-foreground [&_label]:text-sm [&_input]:w-full [&_input]:py-2 [&_input]:px-3 [&_input]:bg-modal-bg [&_input]:border [&_input]:border-border-medium [&_input]:rounded [&_input]:text-white [&_input]:text-sm [&_input]:focus:outline-none [&_input]:focus:border-accent [&_input]:disabled:opacity-60 [&_input]:disabled:cursor-not-allowed [&_select]:w-full [&_select]:py-2 [&_select]:px-3 [&_select]:bg-modal-bg [&_select]:border [&_select]:border-border-medium [&_select]:rounded [&_select]:text-white [&_select]:text-sm [&_select]:focus:outline-none [&_select]:focus:border-accent [&_select]:disabled:opacity-60 [&_select]:disabled:cursor-not-allowed [&_select]:cursor-pointer [&_option]:bg-modal-bg [&_option]:text-white">
+        <div className="[&_label]:text-foreground [&_input]:bg-modal-bg [&_input]:border-border-medium [&_input]:focus:border-accent [&_select]:bg-modal-bg [&_select]:border-border-medium [&_select]:focus:border-accent [&_option]:bg-modal-bg mb-5 [&_input]:w-full [&_input]:rounded [&_input]:border [&_input]:px-3 [&_input]:py-2 [&_input]:text-sm [&_input]:text-white [&_input]:focus:outline-none [&_input]:disabled:cursor-not-allowed [&_input]:disabled:opacity-60 [&_label]:mb-2 [&_label]:block [&_label]:text-sm [&_option]:text-white [&_select]:w-full [&_select]:cursor-pointer [&_select]:rounded [&_select]:border [&_select]:px-3 [&_select]:py-2 [&_select]:text-sm [&_select]:text-white [&_select]:focus:outline-none [&_select]:disabled:cursor-not-allowed [&_select]:disabled:opacity-60">
           <label htmlFor="branchName">
             <TooltipWrapper inline>
-              <span className="underline decoration-dotted decoration-[#666] underline-offset-2 cursor-help">
+              <span className="cursor-help underline decoration-[#666] decoration-dotted underline-offset-2">
                 Workspace Branch Name:
               </span>
               <Tooltip width="wide" position="bottom" interactive>
@@ -134,10 +134,10 @@ const NewWorkspaceModal: React.FC<NewWorkspaceModalProps> = ({
             required
             aria-required="true"
           />
-          {error && <div className="text-danger-light text-[13px] mt-1.5">{error}</div>}
+          {error && <div className="text-danger-light mt-1.5 text-[13px]">{error}</div>}
         </div>
 
-        <div className="mb-5 [&_label]:block [&_label]:mb-2 [&_label]:text-foreground [&_label]:text-sm [&_input]:w-full [&_input]:py-2 [&_input]:px-3 [&_input]:bg-modal-bg [&_input]:border [&_input]:border-border-medium [&_input]:rounded [&_input]:text-white [&_input]:text-sm [&_input]:focus:outline-none [&_input]:focus:border-accent [&_input]:disabled:opacity-60 [&_input]:disabled:cursor-not-allowed [&_select]:w-full [&_select]:py-2 [&_select]:px-3 [&_select]:bg-modal-bg [&_select]:border [&_select]:border-border-medium [&_select]:rounded [&_select]:text-white [&_select]:text-sm [&_select]:focus:outline-none [&_select]:focus:border-accent [&_select]:disabled:opacity-60 [&_select]:disabled:cursor-not-allowed [&_select]:cursor-pointer [&_option]:bg-modal-bg [&_option]:text-white">
+        <div className="[&_label]:text-foreground [&_input]:bg-modal-bg [&_input]:border-border-medium [&_input]:focus:border-accent [&_select]:bg-modal-bg [&_select]:border-border-medium [&_select]:focus:border-accent [&_option]:bg-modal-bg mb-5 [&_input]:w-full [&_input]:rounded [&_input]:border [&_input]:px-3 [&_input]:py-2 [&_input]:text-sm [&_input]:text-white [&_input]:focus:outline-none [&_input]:disabled:cursor-not-allowed [&_input]:disabled:opacity-60 [&_label]:mb-2 [&_label]:block [&_label]:text-sm [&_option]:text-white [&_select]:w-full [&_select]:cursor-pointer [&_select]:rounded [&_select]:border [&_select]:px-3 [&_select]:py-2 [&_select]:text-sm [&_select]:text-white [&_select]:focus:outline-none [&_select]:disabled:cursor-not-allowed [&_select]:disabled:opacity-60">
           <label htmlFor="trunkBranch">Trunk Branch:</label>
           {hasBranches ? (
             <select
@@ -167,7 +167,7 @@ const NewWorkspaceModal: React.FC<NewWorkspaceModalProps> = ({
             />
           )}
           {!hasBranches && (
-            <div className="text-danger-light text-[13px] mt-1.5">
+            <div className="text-danger-light mt-1.5 text-[13px]">
               No branches were detected automatically. Enter the trunk branch manually.
             </div>
           )}
@@ -182,8 +182,8 @@ const NewWorkspaceModal: React.FC<NewWorkspaceModalProps> = ({
 
         {branchName.trim() && (
           <div>
-            <div className="text-xs text-muted mb-2 font-sans">Equivalent command:</div>
-            <div className="mt-5 p-3 bg-dark border border-border-light rounded font-mono text-[13px] text-light whitespace-pre-wrap break-all">
+            <div className="text-muted mb-2 font-sans text-xs">Equivalent command:</div>
+            <div className="bg-dark border-border-light text-light mt-5 rounded border p-3 font-mono text-[13px] break-all whitespace-pre-wrap">
               {formatNewCommand(branchName.trim(), trunkBranch.trim() || undefined)}
             </div>
           </div>
diff --git a/src/components/PinnedTodoList.tsx b/src/components/PinnedTodoList.tsx
index 24b4813244..21f57d3af5 100644
--- a/src/components/PinnedTodoList.tsx
+++ b/src/components/PinnedTodoList.tsx
@@ -32,9 +32,9 @@ export const PinnedTodoList: React.FC<PinnedTodoListProps> = ({ workspaceId }) =
   }
 
   return (
-    <div className="bg-panel-background border-t border-dashed border-[hsl(0deg_0%_28.64%)] m-0 max-h-[300px] overflow-y-auto">
+    <div className="bg-panel-background m-0 max-h-[300px] overflow-y-auto border-t border-dashed border-[hsl(0deg_0%_28.64%)]">
       <div
-        className="px-2 pt-1 pb-0.5 font-mono text-[10px] text-secondary font-semibold tracking-wider cursor-pointer select-none flex items-center gap-1 hover:opacity-80"
+        className="text-secondary flex cursor-pointer items-center gap-1 px-2 pt-1 pb-0.5 font-mono text-[10px] font-semibold tracking-wider select-none hover:opacity-80"
         onClick={() => setExpanded(!expanded)}
       >
         <span
diff --git a/src/components/ProjectSidebar.tsx b/src/components/ProjectSidebar.tsx
index d8729b1e71..8eef9ee3cf 100644
--- a/src/components/ProjectSidebar.tsx
+++ b/src/components/ProjectSidebar.tsx
@@ -134,16 +134,16 @@ const ProjectDragLayer: React.FC = () => {
   const abbrevPath = abbreviatePath(item.projectPath);
 
   return (
-    <div className="fixed pointer-events-none z-[9999] inset-0 cursor-grabbing">
+    <div className="pointer-events-none fixed inset-0 z-[9999] cursor-grabbing">
       <div style={{ transform: `translate(${currentOffset.x + 10}px, ${currentOffset.y + 10}px)` }}>
-        <div className="bg-hover/95 text-foreground py-1.5 px-3 border-l-[3px] border-l-accent shadow-[0_6px_24px_rgba(0,0,0,0.4)] rounded flex items-center w-fit max-w-72 min-w-44">
-          <span className="mr-1.5 text-text-dim text-xs">⠿</span>
-          <span className="mr-2 text-muted text-[10px]">▶</span>
-          <div className="flex-1 min-w-0">
-            <div className="text-foreground text-sm font-medium whitespace-nowrap overflow-hidden text-ellipsis tracking-[0.2px]">
+        <div className="bg-hover/95 text-foreground border-l-accent flex w-fit max-w-72 min-w-44 items-center rounded border-l-[3px] px-3 py-1.5 shadow-[0_6px_24px_rgba(0,0,0,0.4)]">
+          <span className="text-text-dim mr-1.5 text-xs">⠿</span>
+          <span className="text-muted mr-2 text-[10px]">▶</span>
+          <div className="min-w-0 flex-1">
+            <div className="text-foreground truncate text-sm font-medium tracking-[0.2px]">
               {name}
             </div>
-            <div className="text-muted-dark text-[11px] mt-0.5 whitespace-nowrap overflow-hidden text-ellipsis font-monospace">
+            <div className="text-muted-dark font-monospace mt-0.5 truncate text-[11px]">
               {abbrevPath}
             </div>
           </div>
@@ -416,21 +416,21 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
       <DndProvider backend={HTML5Backend}>
         <ProjectDragLayer />
         <div
-          className="flex flex-col flex-1 overflow-hidden font-primary"
+          className="font-primary flex flex-1 flex-col overflow-hidden"
           role="navigation"
           aria-label="Projects"
         >
           {!collapsed && (
             <>
-              <div className="flex justify-between items-center p-4 border-b border-dark">
-                <h2 className="m-0 text-[13px] font-semibold text-foreground uppercase tracking-[0.8px]">
+              <div className="border-dark flex items-center justify-between border-b p-4">
+                <h2 className="text-foreground m-0 text-[13px] font-semibold tracking-[0.8px] uppercase">
                   Projects
                 </h2>
                 <TooltipWrapper inline>
                   <button
                     onClick={onAddProject}
                     aria-label="Add project"
-                    className="w-6 h-6 bg-transparent text-foreground border border-transparent rounded cursor-pointer text-lg flex items-center justify-center p-0 transition-all duration-200 hover:bg-hover hover:border-border-light"
+                    className="text-foreground hover:bg-hover hover:border-border-light flex h-6 w-6 cursor-pointer items-center justify-center rounded border border-transparent bg-transparent p-0 text-lg transition-all duration-200"
                   >
                     +
                   </button>
@@ -441,11 +441,11 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
               </div>
               <div className="flex-1 overflow-y-auto">
                 {projects.size === 0 ? (
-                  <div className="py-8 px-4 text-center">
-                    <p className="text-muted text-[13px] mb-4">No projects</p>
+                  <div className="px-4 py-8 text-center">
+                    <p className="text-muted mb-4 text-[13px]">No projects</p>
                     <button
                       onClick={onAddProject}
-                      className="bg-accent text-white border-none rounded py-2 px-4 text-[13px] cursor-pointer transition-colors duration-200 hover:bg-accent-dark"
+                      className="bg-accent hover:bg-accent-dark cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white transition-colors duration-200"
                     >
                       Add Project
                     </button>
@@ -461,7 +461,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                     const isExpanded = expandedProjects.has(projectPath);
 
                     return (
-                      <div key={projectPath} className="border-b border-hover">
+                      <div key={projectPath} className="border-hover border-b">
                         <DraggableProjectItem
                           projectPath={projectPath}
                           onReorder={handleReorder}
@@ -482,24 +482,24 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                           <span
                             data-drag-handle
                             aria-hidden
-                            className="text-text-dim text-xs mr-1.5 cursor-grab opacity-0 select-none transition-opacity duration-150"
+                            className="text-text-dim mr-1.5 cursor-grab text-xs opacity-0 transition-opacity duration-150 select-none"
                           >
                             ⠿
                           </span>
                           <span
                             data-project-path={projectPath}
                             aria-hidden="true"
-                            className="text-muted text-[10px] mr-2 transition-transform duration-200 flex-shrink-0"
+                            className="text-muted mr-2 shrink-0 text-[10px] transition-transform duration-200"
                             style={{ transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)" }}
                           >
                             ▶
                           </span>
-                          <div className="flex-1 min-w-0 pr-2">
-                            <div className="text-foreground text-sm font-medium whitespace-nowrap overflow-hidden text-ellipsis tracking-[0.2px]">
+                          <div className="min-w-0 flex-1 pr-2">
+                            <div className="text-foreground truncate text-sm font-medium tracking-[0.2px]">
                               {projectName}
                             </div>
                             <TooltipWrapper inline>
-                              <div className="text-muted-dark text-[11px] mt-px whitespace-nowrap overflow-hidden text-ellipsis font-monospace">
+                              <div className="text-muted-dark font-monospace mt-px truncate text-[11px]">
                                 {abbreviatePath(projectPath)}
                               </div>
                               <Tooltip className="tooltip" align="left">
@@ -515,7 +515,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                               }}
                               aria-label={`Manage secrets for ${projectName}`}
                               data-project-path={projectPath}
-                              className="w-5 h-5 bg-transparent text-muted-dark border-none rounded-[3px] cursor-pointer text-sm flex items-center justify-center transition-all duration-200 opacity-0 flex-shrink-0 mr-1 hover:text-accent hover:bg-accent/10"
+                              className="text-muted-dark hover:text-accent hover:bg-accent/10 mr-1 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-[3px] border-none bg-transparent text-sm opacity-0 transition-all duration-200"
                             >
                               🔑
                             </button>
@@ -532,7 +532,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                               title="Remove project"
                               aria-label={`Remove project ${projectName}`}
                               data-project-path={projectPath}
-                              className="w-5 h-5 bg-transparent text-muted-dark border-none rounded-[3px] cursor-pointer text-base flex items-center justify-center transition-all duration-200 opacity-0 flex-shrink-0 hover:text-danger-light hover:bg-danger-light/10"
+                              className="text-muted-dark hover:text-danger-light hover:bg-danger-light/10 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-[3px] border-none bg-transparent text-base opacity-0 transition-all duration-200"
                             >
                               ×
                             </button>
@@ -544,12 +544,12 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
 
                         {isExpanded && (
                           <div id={workspaceListId} className="bg-separator">
-                            <div className="py-2 px-3 pl-[22px] border-b border-hover">
+                            <div className="border-hover border-b px-3 py-2 pl-[22px]">
                               <button
                                 onClick={() => onAddWorkspace(projectPath)}
                                 data-project-path={projectPath}
                                 aria-label={`Add workspace to ${projectName}`}
-                                className="w-full py-1.5 px-3 bg-transparent text-muted border border-dashed border-border-medium rounded cursor-pointer text-[13px] transition-all duration-200 text-left hover:bg-hover hover:border-border-darker hover:text-foreground"
+                                className="text-muted border-border-medium hover:bg-hover hover:border-border-darker hover:text-foreground w-full cursor-pointer rounded border border-dashed bg-transparent px-3 py-1.5 text-left text-[13px] transition-all duration-200"
                               >
                                 + New Workspace
                                 {selectedWorkspace?.projectPath === projectPath &&
@@ -592,7 +592,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                                             : `Expand workspaces older than ${formatOldWorkspaceThreshold()}`
                                         }
                                         aria-expanded={showOldWorkspaces}
-                                        className="w-full py-2 px-3 pl-[22px] bg-transparent text-muted border-none border-t border-hover cursor-pointer text-xs transition-all duration-150 flex items-center justify-between font-medium hover:bg-white/[0.03] hover:text-label [&:hover_.arrow]:text-label"
+                                        className="text-muted border-hover hover:text-label [&:hover_.arrow]:text-label flex w-full cursor-pointer items-center justify-between border-t border-none bg-transparent px-3 py-2 pl-[22px] text-xs font-medium transition-all duration-150 hover:bg-white/[0.03]"
                                       >
                                         <div className="flex items-center gap-1.5">
                                           <span>Older than {formatOldWorkspaceThreshold()}</span>
@@ -601,7 +601,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                                           </span>
                                         </div>
                                         <span
-                                          className="arrow text-[11px] text-text-dim transition-transform duration-200 ease-in-out"
+                                          className="arrow text-text-dim text-[11px] transition-transform duration-200 ease-in-out"
                                           style={{
                                             transform: showOldWorkspaces
                                               ? "rotate(90deg)"
@@ -629,7 +629,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
           <TooltipWrapper inline>
             <button
               onClick={onToggleCollapsed}
-              className="w-full h-9 bg-transparent text-muted border-none border-t border-dark cursor-pointer text-sm flex items-center justify-center p-0 transition-all duration-200 mt-auto hover:bg-hover hover:text-foreground"
+              className="text-muted border-dark hover:bg-hover hover:text-foreground mt-auto flex h-9 w-full cursor-pointer items-center justify-center border-t border-none bg-transparent p-0 text-sm transition-all duration-200"
             >
               {collapsed ? "»" : "«"}
             </button>
@@ -660,7 +660,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
           {removeError &&
             createPortal(
               <div
-                className="fixed max-w-96 p-3 px-4 bg-error-bg border border-error rounded-md text-error text-xs z-[10000] shadow-[0_4px_16px_rgba(0,0,0,0.5)] font-monospace leading-[1.4] whitespace-pre-wrap break-words pointer-events-auto"
+                className="bg-error-bg border-error text-error font-monospace pointer-events-auto fixed z-[10000] max-w-96 rounded-md border p-3 px-4 text-xs leading-[1.4] break-words whitespace-pre-wrap shadow-[0_4px_16px_rgba(0,0,0,0.5)]"
                 style={{
                   top: `${removeError.position.top}px`,
                   left: `${removeError.position.left}px`,
diff --git a/src/components/RightSidebar.tsx b/src/components/RightSidebar.tsx
index eba2b216d4..87543006cf 100644
--- a/src/components/RightSidebar.tsx
+++ b/src/components/RightSidebar.tsx
@@ -201,7 +201,7 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
       <div className={cn("flex-row h-full", !showCollapsed ? "flex" : "hidden")}>
         {/* Render meter when Review tab is active */}
         {selectedTab === "review" && (
-          <div className="w-5 bg-separator border-r border-border-light flex flex-col flex-shrink-0">
+          <div className="bg-separator border-border-light flex w-5 shrink-0 flex-col border-r">
             {verticalMeter}
           </div>
         )}
@@ -218,9 +218,9 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
           />
         )}
 
-        <div className="flex flex-col flex-1 min-w-0">
+        <div className="flex min-w-0 flex-1 flex-col">
           <div
-            className="flex bg-background-secondary border-b border-border [&>*]:flex-1"
+            className="bg-background-secondary border-border flex border-b [&>*]:flex-1"
             role="tablist"
             aria-label="Metadata views"
           >
diff --git a/src/components/RightSidebar/CodeReview/FileTree.tsx b/src/components/RightSidebar/CodeReview/FileTree.tsx
index c62c483fa2..e1531ae588 100644
--- a/src/components/RightSidebar/CodeReview/FileTree.tsx
+++ b/src/components/RightSidebar/CodeReview/FileTree.tsx
@@ -135,7 +135,7 @@ const TreeNodeContent: React.FC<{
         {node.isDirectory ? (
           <>
             <span
-              className="w-3 inline-block transition-transform duration-200"
+              className="inline-block w-3 transition-transform duration-200"
               style={{ transform: isOpen ? "rotate(90deg)" : "rotate(0deg)" }}
               data-toggle
               onClick={handleToggleClick}
@@ -246,20 +246,20 @@ export const FileTree: React.FC<FileTreeExternalProps> = ({
 
   return (
     <>
-      <div className="py-2 px-3 border-b border-border-light text-xs font-medium text-foreground font-primary flex items-center gap-2">
+      <div className="border-border-light text-foreground font-primary flex items-center gap-2 border-b px-3 py-2 text-xs font-medium">
         <span>Files Changed</span>
         {selectedPath && (
           <button
-            className="py-0.5 px-2 bg-transparent text-muted border-none rounded-[3px] text-[11px] cursor-pointer transition-all duration-200 font-primary ml-auto hover:bg-white/5 hover:text-foreground"
+            className="text-muted font-primary hover:text-foreground ml-auto cursor-pointer rounded-[3px] border-none bg-transparent px-2 py-0.5 text-[11px] transition-all duration-200 hover:bg-white/5"
             onClick={() => onSelectFile(null)}
           >
             Clear filter
           </button>
         )}
       </div>
-      <div className="flex-1 min-h-0 p-3 overflow-y-auto font-monospace text-xs">
+      <div className="font-monospace min-h-0 flex-1 overflow-y-auto p-3 text-xs">
         {isLoading && !root ? (
-          <div className="py-5 text-muted text-center">Loading file tree...</div>
+          <div className="text-muted py-5 text-center">Loading file tree...</div>
         ) : root ? (
           root.children.map((child) => (
             <TreeNodeContent
@@ -274,7 +274,7 @@ export const FileTree: React.FC<FileTreeExternalProps> = ({
             />
           ))
         ) : (
-          <div className="py-5 text-muted text-center">No files changed</div>
+          <div className="text-muted py-5 text-center">No files changed</div>
         )}
       </div>
     </>
diff --git a/src/components/RightSidebar/CodeReview/HunkViewer.tsx b/src/components/RightSidebar/CodeReview/HunkViewer.tsx
index 9e20506a55..a8a4b6e343 100644
--- a/src/components/RightSidebar/CodeReview/HunkViewer.tsx
+++ b/src/components/RightSidebar/CodeReview/HunkViewer.tsx
@@ -148,11 +148,11 @@ export const HunkViewer = React.memo<HunkViewerProps>(
         tabIndex={0}
         data-hunk-id={hunkId}
       >
-        <div className="bg-separator py-2 px-3 border-b border-border-light flex justify-between items-center font-monospace text-xs gap-2">
+        <div className="bg-separator border-border-light font-monospace flex items-center justify-between gap-2 border-b px-3 py-2 text-xs">
           {isRead && (
             <TooltipWrapper inline>
               <span
-                className="inline-flex items-center text-read text-sm mr-1"
+                className="text-read mr-1 inline-flex items-center text-sm"
                 aria-label="Marked as read"
               >
                 ✓
@@ -163,10 +163,10 @@ export const HunkViewer = React.memo<HunkViewerProps>(
             </TooltipWrapper>
           )}
           <div
-            className="text-foreground font-medium whitespace-nowrap overflow-hidden text-ellipsis min-w-0"
+            className="text-foreground min-w-0 truncate font-medium"
             dangerouslySetInnerHTML={{ __html: highlightedFilePath }}
           />
-          <div className="flex items-center gap-2 text-[11px] whitespace-nowrap flex-shrink-0">
+          <div className="flex shrink-0 items-center gap-2 text-[11px] whitespace-nowrap">
             {!isPureRename && (
               <span className="flex gap-2 text-[11px]">
                 {additions > 0 && <span className="text-success-light">+{additions}</span>}
@@ -179,7 +179,7 @@ export const HunkViewer = React.memo<HunkViewerProps>(
             {onToggleRead && (
               <TooltipWrapper inline>
                 <button
-                  className="bg-transparent border border-border-light rounded-[3px] py-0.5 px-1.5 text-muted text-[11px] cursor-pointer transition-all duration-200 flex items-center gap-1 hover:bg-white/5 hover:border-read hover:text-read active:scale-95"
+                  className="border-border-light text-muted hover:border-read hover:text-read flex cursor-pointer items-center gap-1 rounded-[3px] border bg-transparent px-1.5 py-0.5 text-[11px] transition-all duration-200 hover:bg-white/5 active:scale-95"
                   data-hunk-id={hunkId}
                   onClick={handleToggleRead}
                   aria-label={`Mark as read (${formatKeybind(KEYBINDS.TOGGLE_HUNK_READ)})`}
@@ -195,11 +195,11 @@ export const HunkViewer = React.memo<HunkViewerProps>(
         </div>
 
         {isPureRename ? (
-          <div className="p-3 text-muted text-[11px] flex items-center gap-2 bg-code-keyword-overlay-light before:content-['→'] before:text-sm before:text-code-keyword">
+          <div className="text-muted bg-code-keyword-overlay-light before:text-code-keyword flex items-center gap-2 p-3 text-[11px] before:text-sm before:content-['→']">
             Renamed from <code>{hunk.oldPath}</code>
           </div>
         ) : isExpanded ? (
-          <div className="py-1.5 px-2 font-monospace text-[11px] leading-[1.4] overflow-x-auto bg-code-bg grid grid-cols-[minmax(min-content,1fr)]">
+          <div className="font-monospace bg-code-bg grid grid-cols-[minmax(min-content,1fr)] overflow-x-auto px-2 py-1.5 text-[11px] leading-[1.4]">
             <SelectableDiffRenderer
               content={hunk.content}
               filePath={hunk.filePath}
@@ -219,7 +219,7 @@ export const HunkViewer = React.memo<HunkViewerProps>(
           </div>
         ) : (
           <div
-            className="py-2 px-3 text-center text-muted text-[11px] italic cursor-pointer hover:text-foreground"
+            className="text-muted hover:text-foreground cursor-pointer px-3 py-2 text-center text-[11px] italic"
             onClick={handleToggleExpand}
           >
             {isRead && "Hunk marked as read. "}Click to expand ({lineCount} lines) or press{" "}
@@ -229,7 +229,7 @@ export const HunkViewer = React.memo<HunkViewerProps>(
 
         {hasManualState && isExpanded && !isPureRename && (
           <div
-            className="py-2 px-3 text-center text-muted text-[11px] italic cursor-pointer hover:text-foreground"
+            className="text-muted hover:text-foreground cursor-pointer px-3 py-2 text-center text-[11px] italic"
             onClick={handleToggleExpand}
           >
             Click here or press {formatKeybind(KEYBINDS.TOGGLE_HUNK_COLLAPSE)} to collapse
diff --git a/src/components/RightSidebar/CodeReview/ReviewControls.tsx b/src/components/RightSidebar/CodeReview/ReviewControls.tsx
index 6f44933452..b979187551 100644
--- a/src/components/RightSidebar/CodeReview/ReviewControls.tsx
+++ b/src/components/RightSidebar/CodeReview/ReviewControls.tsx
@@ -82,7 +82,7 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
   const showSetDefault = filters.diffBase !== defaultBase;
 
   return (
-    <div className="py-2 px-3 bg-separator border-b border-border-light flex gap-3 items-center flex-wrap text-[11px]">
+    <div className="bg-separator border-border-light flex flex-wrap items-center gap-3 border-b px-3 py-2 text-[11px]">
       {onRefresh && <RefreshButton onClick={onRefresh} isLoading={isLoading} />}
       <label className="text-muted font-medium whitespace-nowrap">Base:</label>
       <input
@@ -93,7 +93,7 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
         onBlur={handleBaseBlur}
         onKeyDown={handleBaseKeyDown}
         placeholder="HEAD, main, etc."
-        className="py-1 px-2 bg-dark text-foreground border border-border-medium rounded text-[11px] font-mono w-36 transition-[border-color] duration-200 hover:border-accent focus:outline-none focus:border-accent placeholder:text-text-dim"
+        className="bg-dark text-foreground border-border-medium hover:border-accent focus:border-accent placeholder:text-text-dim w-36 rounded border px-2 py-1 font-mono text-[11px] transition-[border-color] duration-200 focus:outline-none"
       />
       <datalist id="base-suggestions">
         <option value="HEAD" />
@@ -109,13 +109,13 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
       {showSetDefault && (
         <button
           onClick={handleSetDefault}
-          className="py-0.5 px-2 bg-transparent text-muted border-none rounded text-[11px] cursor-pointer transition-all duration-200 font-primary whitespace-nowrap hover:bg-white-overlay-light hover:text-foreground"
+          className="text-muted font-primary hover:bg-white-overlay-light hover:text-foreground cursor-pointer rounded border-none bg-transparent px-2 py-0.5 text-[11px] whitespace-nowrap transition-all duration-200"
         >
           Set Default
         </button>
       )}
 
-      <label className="flex items-center gap-1.5 text-foreground text-[11px] cursor-pointer whitespace-nowrap hover:text-white [&_input[type='checkbox']]:cursor-pointer">
+      <label className="text-foreground flex cursor-pointer items-center gap-1.5 text-[11px] whitespace-nowrap hover:text-white [&_input[type='checkbox']]:cursor-pointer">
         <input
           type="checkbox"
           checked={filters.includeUncommitted}
@@ -124,7 +124,7 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
         Uncommitted
       </label>
 
-      <label className="flex items-center gap-1.5 text-foreground text-[11px] cursor-pointer whitespace-nowrap hover:text-white [&_input[type='checkbox']]:cursor-pointer">
+      <label className="text-foreground flex cursor-pointer items-center gap-1.5 text-[11px] whitespace-nowrap hover:text-white [&_input[type='checkbox']]:cursor-pointer">
         <input type="checkbox" checked={filters.showReadHunks} onChange={handleShowReadToggle} />
         Show read
       </label>
@@ -136,9 +136,9 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
         onRefresh={onRefresh}
       />
 
-      <div className="w-px h-4 bg-border-light" />
+      <div className="bg-border-light h-4 w-px" />
 
-      <div className="py-1 px-2.5 rounded font-medium text-[11px] bg-transparent border border-transparent whitespace-nowrap text-muted">
+      <div className="text-muted rounded border border-transparent bg-transparent px-2.5 py-1 text-[11px] font-medium whitespace-nowrap">
         {stats.read} read / {stats.total} total
       </div>
     </div>
diff --git a/src/components/RightSidebar/CodeReview/ReviewPanel.tsx b/src/components/RightSidebar/CodeReview/ReviewPanel.tsx
index 52cb5ec32a..861588b8f6 100644
--- a/src/components/RightSidebar/CodeReview/ReviewPanel.tsx
+++ b/src/components/RightSidebar/CodeReview/ReviewPanel.tsx
@@ -532,7 +532,7 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
       tabIndex={0}
       onFocus={() => setIsPanelFocused(true)}
       onBlur={() => setIsPanelFocused(false)}
-      className="flex flex-col h-full min-h-0 bg-dark [container-type:inline-size] [container-name:review-panel] outline-none focus-within:shadow-[inset_0_0_0_1px_rgba(0,122,204,0.2)]"
+      className="bg-dark [container-type:inline-size] flex h-full min-h-0 flex-col outline-none [container-name:review-panel] focus-within:shadow-[inset_0_0_0_1px_rgba(0,122,204,0.2)]"
     >
       {/* Always show controls so user can change diff base */}
       <ReviewControls
@@ -547,31 +547,31 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
       />
 
       {error ? (
-        <div className="p-6 text-danger-soft bg-danger-soft/10 border border-danger-soft/30 rounded m-3 font-monospace text-xs leading-[1.5] whitespace-pre-wrap break-words">
+        <div className="text-danger-soft bg-danger-soft/10 border-danger-soft/30 font-monospace m-3 rounded border p-6 text-xs leading-[1.5] break-words whitespace-pre-wrap">
           {error}
         </div>
       ) : isLoadingHunks && hunks.length === 0 && !fileTree ? (
-        <div className="flex items-center justify-center h-full text-muted text-sm">
+        <div className="text-muted flex h-full items-center justify-center text-sm">
           Loading diff...
         </div>
       ) : (
-        <div className="flex flex-row flex-1 min-h-0 overflow-hidden @[800px]:flex-col">
-          <div className="flex-1 min-h-0 flex flex-col overflow-hidden min-w-0 order-1">
+        <div className="flex min-h-0 flex-1 flex-row overflow-hidden @[800px]:flex-col">
+          <div className="order-1 flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
             {truncationWarning && (
-              <div className="bg-warning/10 border border-warning/30 rounded py-1.5 px-3 mx-3 my-3 text-warning text-[10px] flex items-center gap-1.5 leading-[1.3] before:content-['⚠️'] before:text-xs">
+              <div className="bg-warning/10 border-warning/30 text-warning mx-3 my-3 flex items-center gap-1.5 rounded border px-3 py-1.5 text-[10px] leading-[1.3] before:text-xs before:content-['⚠️']">
                 {truncationWarning}
               </div>
             )}
 
-            <div className="py-2 px-3 border-b border-border-light bg-separator">
-              <div className="flex items-stretch border border-border-light rounded overflow-hidden bg-dark transition-[border-color] duration-150 hover:border-border-gray focus-within:border-accent focus-within:hover:border-accent">
+            <div className="border-border-light bg-separator border-b px-3 py-2">
+              <div className="border-border-light bg-dark hover:border-border-gray focus-within:border-accent focus-within:hover:border-accent flex items-stretch overflow-hidden rounded border transition-[border-color] duration-150">
                 <input
                   ref={searchInputRef}
                   type="text"
                   placeholder={`Search in files and hunks... (${formatKeybind(KEYBINDS.FOCUS_REVIEW_SEARCH)})`}
                   value={searchState.input}
                   onChange={(e) => setSearchState({ ...searchState, input: e.target.value })}
-                  className="flex-1 py-1.5 px-2.5 bg-transparent border-none text-foreground text-xs font-sans leading-[1.4] outline-none flex items-center h-full placeholder:text-text-dim focus:bg-separator"
+                  className="text-foreground placeholder:text-text-dim focus:bg-separator flex h-full flex-1 items-center border-none bg-transparent px-2.5 py-1.5 font-sans text-xs leading-[1.4] outline-none"
                 />
                 <TooltipWrapper inline>
                   <button
@@ -616,32 +616,32 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
               </div>
             </div>
 
-            <div className="flex-1 min-h-0 overflow-y-auto p-3">
+            <div className="min-h-0 flex-1 overflow-y-auto p-3">
               {hunks.length === 0 ? (
-                <div className="flex flex-col items-center justify-start pt-12 px-6 pb-6 text-muted text-center gap-3">
-                  <div className="text-base font-medium text-foreground">No changes found</div>
+                <div className="text-muted flex flex-col items-center justify-start gap-3 px-6 pt-12 pb-6 text-center">
+                  <div className="text-foreground text-base font-medium">No changes found</div>
                   <div className="text-[13px] leading-[1.5]">
                     No changes found for the selected diff base.
                     <br />
                     Try selecting a different base or make some changes.
                   </div>
                   {diagnosticInfo && (
-                    <details className="mt-4 max-w-96 w-full bg-modal-bg border border-border-light rounded p-3 cursor-pointer [&_summary]:text-muted [&_summary]:text-xs [&_summary]:font-medium [&_summary]:select-none [&_summary]:list-none [&_summary]:flex [&_summary]:items-center [&_summary]:gap-1.5 [&_summary::-webkit-details-marker]:hidden [&_summary::before]:content-['▶'] [&_summary::before]:text-[10px] [&_summary::before]:transition-transform [&_summary::before]:duration-200 [&[open]_summary::before]:rotate-90">
+                    <details className="bg-modal-bg border-border-light [&_summary]:text-muted mt-4 w-full max-w-96 cursor-pointer rounded border p-3 [&_summary]:flex [&_summary]:list-none [&_summary]:items-center [&_summary]:gap-1.5 [&_summary]:text-xs [&_summary]:font-medium [&_summary]:select-none [&_summary::-webkit-details-marker]:hidden [&_summary::before]:text-[10px] [&_summary::before]:transition-transform [&_summary::before]:duration-200 [&_summary::before]:content-['▶'] [&[open]_summary::before]:rotate-90">
                       <summary>Show diagnostic info</summary>
-                      <div className="mt-3 font-monospace text-[11px] text-foreground leading-[1.6]">
-                        <div className="grid grid-cols-[140px_1fr] gap-3 py-1 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-border-light">
+                      <div className="font-monospace text-foreground mt-3 text-[11px] leading-[1.6]">
+                        <div className="[&:not(:last-child)]:border-border-light grid grid-cols-[140px_1fr] gap-3 py-1 [&:not(:last-child)]:border-b">
                           <div className="text-muted font-medium">Command:</div>
                           <div className="text-foreground break-all select-all">
                             {diagnosticInfo.command}
                           </div>
                         </div>
-                        <div className="grid grid-cols-[140px_1fr] gap-3 py-1 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-border-light">
+                        <div className="[&:not(:last-child)]:border-border-light grid grid-cols-[140px_1fr] gap-3 py-1 [&:not(:last-child)]:border-b">
                           <div className="text-muted font-medium">Output size:</div>
                           <div className="text-foreground break-all select-all">
                             {diagnosticInfo.outputLength.toLocaleString()} bytes
                           </div>
                         </div>
-                        <div className="grid grid-cols-[140px_1fr] gap-3 py-1 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-border-light">
+                        <div className="[&:not(:last-child)]:border-border-light grid grid-cols-[140px_1fr] gap-3 py-1 [&:not(:last-child)]:border-b">
                           <div className="text-muted font-medium">Files parsed:</div>
                           <div className="text-foreground break-all select-all">
                             {diagnosticInfo.fileDiffCount}
@@ -658,7 +658,7 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
                   )}
                 </div>
               ) : filteredHunks.length === 0 ? (
-                <div className="flex flex-col items-center justify-start pt-12 px-6 pb-6 text-muted text-center gap-3">
+                <div className="text-muted flex flex-col items-center justify-start gap-3 px-6 pt-12 pb-6 text-center">
                   <div className="text-[13px] leading-[1.5]">
                     {debouncedSearchTerm.trim()
                       ? `No hunks match "${debouncedSearchTerm}". Try a different search term.`
@@ -694,7 +694,7 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
 
           {/* FileTree positioning handled by CSS order property */}
           {(fileTree ?? isLoadingTree) && (
-            <div className="w-80 flex-shrink-0 border-l border-border-light flex flex-col overflow-hidden min-h-0 order-2 @[800px]:w-full @[800px]:h-auto @[800px]:flex-[0_0_auto] @[800px]:border-l-0 @[800px]:border-b @[800px]:border-border-light @[800px]:order-0">
+            <div className="border-border-light @[800px]:border-border-light order-2 flex min-h-0 w-80 shrink-0 flex-col overflow-hidden border-l @[800px]:order-0 @[800px]:h-auto @[800px]:w-full @[800px]:flex-[0_0_auto] @[800px]:border-b @[800px]:border-l-0">
               <FileTree
                 root={fileTree}
                 selectedPath={selectedFilePath}
diff --git a/src/components/RightSidebar/CodeReview/UntrackedStatus.tsx b/src/components/RightSidebar/CodeReview/UntrackedStatus.tsx
index ac8da8fc55..91c6b890b7 100644
--- a/src/components/RightSidebar/CodeReview/UntrackedStatus.tsx
+++ b/src/components/RightSidebar/CodeReview/UntrackedStatus.tsx
@@ -135,15 +135,15 @@ export const UntrackedStatus: React.FC<UntrackedStatusProps> = ({
       </div>
 
       {showTooltip && hasUntracked && (
-        <div className="absolute top-[calc(100%+8px)] right-0 bg-modal-bg border border-bg-medium rounded p-2 min-w-48 max-w-96 z-[1000] shadow-[0_4px_12px_rgba(0,0,0,0.3)] animate-in fade-in slide-in-from-top-1 duration-150">
-          <div className="text-[11px] font-semibold text-foreground mb-2 pb-1.5 border-b border-border-light">
+        <div className="bg-modal-bg border-bg-medium animate-in fade-in slide-in-from-top-1 absolute top-[calc(100%+8px)] right-0 z-[1000] max-w-96 min-w-48 rounded border p-2 shadow-[0_4px_12px_rgba(0,0,0,0.3)] duration-150">
+          <div className="text-foreground border-border-light mb-2 border-b pb-1.5 text-[11px] font-semibold">
             Untracked Files ({count})
           </div>
-          <div className="max-h-[200px] overflow-y-auto mb-2">
+          <div className="mb-2 max-h-[200px] overflow-y-auto">
             {untrackedFiles.map((file) => (
               <div
                 key={file}
-                className="text-[11px] text-label py-0.5 px-1 font-mono whitespace-nowrap overflow-hidden text-ellipsis hover:bg-bg-subtle"
+                className="text-label hover:bg-bg-subtle truncate px-1 py-0.5 font-mono text-[11px]"
               >
                 {file}
               </div>
diff --git a/src/components/RightSidebar/ConsumerBreakdown.tsx b/src/components/RightSidebar/ConsumerBreakdown.tsx
index 02b465eebc..41f6389988 100644
--- a/src/components/RightSidebar/ConsumerBreakdown.tsx
+++ b/src/components/RightSidebar/ConsumerBreakdown.tsx
@@ -12,16 +12,16 @@ interface ConsumerBreakdownProps {
 
 const ConsumerBreakdownComponent: React.FC<ConsumerBreakdownProps> = ({ consumers }) => {
   if (consumers.isCalculating) {
-    return <div className="text-secondary italic py-3">Calculating consumer breakdown...</div>;
+    return <div className="text-secondary py-3 italic">Calculating consumer breakdown...</div>;
   }
 
   if (consumers.consumers.length === 0) {
-    return <div className="text-text-dim italic py-3 text-left">No consumer data available</div>;
+    return <div className="text-text-dim py-3 text-left italic">No consumer data available</div>;
   }
 
   return (
     <>
-      <div className="text-muted text-xs mb-2">
+      <div className="text-muted mb-2 text-xs">
         Tokenizer: <span>{consumers.tokenizerName}</span>
       </div>
       <div className="flex flex-col gap-3">
@@ -37,9 +37,9 @@ const ConsumerBreakdownComponent: React.FC<ConsumerBreakdownProps> = ({ consumer
           const tokenDisplay = formatTokens(consumer.tokens);
 
           return (
-            <div key={consumer.name} className="flex flex-col gap-1 mb-2">
-              <div className="flex justify-between items-center mb-1">
-                <span className="text-foreground font-medium flex items-center gap-1">
+            <div key={consumer.name} className="mb-2 flex flex-col gap-1">
+              <div className="mb-1 flex items-center justify-between">
+                <span className="text-foreground flex items-center gap-1 font-medium">
                   {consumer.name}
                   {consumer.name === "web_search" && (
                     <TooltipWrapper inline>
@@ -56,7 +56,7 @@ const ConsumerBreakdownComponent: React.FC<ConsumerBreakdownProps> = ({ consumer
                 </span>
               </div>
               <div className="flex flex-col gap-1">
-                <div className="w-full h-2 bg-hover rounded overflow-hidden flex">
+                <div className="bg-hover flex h-2 w-full overflow-hidden rounded">
                   {consumer.fixedTokens && consumer.variableTokens ? (
                     <>
                       <div
@@ -85,7 +85,7 @@ const ConsumerBreakdownComponent: React.FC<ConsumerBreakdownProps> = ({ consumer
                   )}
                 </div>
                 {consumer.fixedTokens && consumer.variableTokens && (
-                  <div className="text-text-dim text-[11px] text-left">
+                  <div className="text-text-dim text-left text-[11px]">
                     Tool definition: {formatTokens(consumer.fixedTokens)} • Usage:{" "}
                     {formatTokens(consumer.variableTokens)}
                   </div>
diff --git a/src/components/RightSidebar/CostsTab.tsx b/src/components/RightSidebar/CostsTab.tsx
index 90aca67bd4..c4699e3650 100644
--- a/src/components/RightSidebar/CostsTab.tsx
+++ b/src/components/RightSidebar/CostsTab.tsx
@@ -70,7 +70,7 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
   if (!hasAnyData) {
     return (
       <div className="text-light font-primary text-[13px] leading-relaxed">
-        <div className="text-secondary text-center py-10 px-5">
+        <div className="text-secondary px-5 py-10 text-center">
           <p>No messages yet.</p>
           <p>Send a message to see token usage statistics.</p>
         </div>
@@ -161,9 +161,9 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
 
               return (
                 <>
-                  <div data-testid="context-usage" className="flex flex-col gap-1 mb-2 relative">
-                    <div className="flex justify-between items-baseline">
-                      <span className="text-foreground font-medium inline-flex items-baseline gap-1">
+                  <div data-testid="context-usage" className="relative mb-2 flex flex-col gap-1">
+                    <div className="flex items-baseline justify-between">
+                      <span className="text-foreground inline-flex items-baseline gap-1 font-medium">
                         Context Usage
                       </span>
                       <span className="text-muted text-xs">
@@ -173,7 +173,7 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
                       </span>
                     </div>
                     <div className="relative w-full">
-                      <div className="w-full h-1.5 bg-border-light rounded-[3px] overflow-hidden flex">
+                      <div className="bg-border-light flex h-1.5 w-full overflow-hidden rounded-[3px]">
                         {cachedPercentage > 0 && (
                           <div
                             className="h-full transition-[width] duration-300"
@@ -219,7 +219,7 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
                     </div>
                   </div>
                   {showWarning && (
-                    <div className="text-subtle text-[11px] mt-2 italic">
+                    <div className="text-subtle mt-2 text-[11px] italic">
                       Unknown model limits - showing relative usage only
                     </div>
                   )}
@@ -342,13 +342,13 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
               return (
                 <>
                   {totalCost !== undefined && totalCost >= 0 && (
-                    <div data-testid="cost-bar" className="flex flex-col gap-1 mb-2 relative">
+                    <div data-testid="cost-bar" className="relative mb-2 flex flex-col gap-1">
                       <div
                         data-testid="cost-header"
-                        className="flex justify-between items-baseline mb-2"
+                        className="mb-2 flex items-baseline justify-between"
                       >
-                        <div className="flex gap-3 items-center">
-                          <span className="text-foreground font-medium inline-flex items-baseline gap-1">
+                        <div className="flex items-center gap-3">
+                          <span className="text-foreground inline-flex items-baseline gap-1 font-medium">
                             Cost
                           </span>
                           <ToggleGroup
@@ -362,7 +362,7 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
                         </span>
                       </div>
                       <div className="relative w-full">
-                        <div className="w-full h-1.5 bg-border-light rounded-[3px] overflow-hidden flex">
+                        <div className="bg-border-light flex h-1.5 w-full overflow-hidden rounded-[3px]">
                           {cachedCostPercentage > 0 && (
                             <div
                               className="h-full transition-[width] duration-300"
@@ -410,17 +410,17 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
                   )}
                   <table
                     data-testid="cost-details"
-                    className="w-full mt-1 border-collapse text-[11px]"
+                    className="mt-1 w-full border-collapse text-[11px]"
                   >
                     <thead>
-                      <tr className="border-b border-border-light">
-                        <th className="text-left text-muted font-medium py-1 pr-2 [&:last-child]:text-right [&:last-child]:pr-0">
+                      <tr className="border-border-light border-b">
+                        <th className="text-muted py-1 pr-2 text-left font-medium [&:last-child]:pr-0 [&:last-child]:text-right">
                           Component
                         </th>
-                        <th className="text-left text-muted font-medium py-1 pr-2 [&:last-child]:text-right [&:last-child]:pr-0">
+                        <th className="text-muted py-1 pr-2 text-left font-medium [&:last-child]:pr-0 [&:last-child]:text-right">
                           Tokens
                         </th>
-                        <th className="text-left text-muted font-medium py-1 pr-2 [&:last-child]:text-right [&:last-child]:pr-0">
+                        <th className="text-muted py-1 pr-2 text-left font-medium [&:last-child]:pr-0 [&:last-child]:text-right">
                           Cost
                         </th>
                       </tr>
@@ -435,19 +435,19 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
 
                         return (
                           <tr key={component.name}>
-                            <td className="py-1 pr-2 text-foreground [&:last-child]:text-right [&:last-child]:pr-0">
+                            <td className="text-foreground py-1 pr-2 [&:last-child]:pr-0 [&:last-child]:text-right">
                               <div className="flex items-center gap-1.5">
                                 <div
-                                  className="w-2 h-2 rounded-sm flex-shrink-0"
+                                  className="h-2 w-2 shrink-0 rounded-sm"
                                   style={{ background: component.color }}
                                 />
                                 {component.name}
                               </div>
                             </td>
-                            <td className="py-1 pr-2 text-foreground [&:last-child]:text-right [&:last-child]:pr-0">
+                            <td className="text-foreground py-1 pr-2 [&:last-child]:pr-0 [&:last-child]:text-right">
                               {formatTokens(component.tokens)}
                             </td>
-                            <td className="py-1 pr-2 text-foreground [&:last-child]:text-right [&:last-child]:pr-0">
+                            <td className="text-foreground py-1 pr-2 [&:last-child]:pr-0 [&:last-child]:text-right">
                               {isNegligible ? (
                                 <span className="text-text-dim italic">{costDisplay}</span>
                               ) : (
@@ -467,7 +467,7 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
       )}
 
       <div className="mb-6">
-        <h3 className="text-subtle text-sm font-semibold m-0 mb-3 uppercase tracking-wide">
+        <h3 className="text-subtle m-0 mb-3 text-sm font-semibold tracking-wide uppercase">
           Breakdown by Consumer
         </h3>
         <ConsumerBreakdown consumers={consumers} />
diff --git a/src/components/RightSidebar/VerticalTokenMeter.tsx b/src/components/RightSidebar/VerticalTokenMeter.tsx
index 0334e02aad..83785e391e 100644
--- a/src/components/RightSidebar/VerticalTokenMeter.tsx
+++ b/src/components/RightSidebar/VerticalTokenMeter.tsx
@@ -11,29 +11,29 @@ const VerticalTokenMeterComponent: React.FC<{ data: TokenMeterData }> = ({ data
 
   return (
     <div
-      className="w-5 h-full flex flex-col items-center py-3 bg-separator border-l border-border-light"
+      className="bg-separator border-border-light flex h-full w-5 flex-col items-center border-l py-3"
       data-component="vertical-token-meter"
     >
       {data.maxTokens && (
         <div
-          className="font-primary text-[8px] font-semibold text-foreground mb-1 text-center flex-shrink-0"
+          className="font-primary text-foreground mb-1 shrink-0 text-center text-[8px] font-semibold"
           data-label="context-percentage"
         >
           {Math.round(data.totalPercentage)}
         </div>
       )}
       <div
-        className="flex-1 w-full flex flex-col items-center min-h-0"
+        className="flex min-h-0 w-full flex-1 flex-col items-center"
         data-wrapper="meter-wrapper"
       >
         <div
-          className="w-full flex flex-col items-center min-h-[20px]"
+          className="flex min-h-[20px] w-full flex-col items-center"
           style={{ flex: usagePercentage }}
           data-container="meter-container"
           data-usage-percentage={Math.round(usagePercentage)}
         >
           <div
-            className="flex-1 flex flex-col items-center w-full [&>*]:flex-1 [&>*]:flex [&>*]:flex-col"
+            className="flex w-full flex-1 flex-col items-center [&>*]:flex [&>*]:flex-1 [&>*]:flex-col"
             data-bar-wrapper="expand"
           >
             <TooltipWrapper data-tooltip-wrapper="vertical-meter">
@@ -45,16 +45,16 @@ const VerticalTokenMeterComponent: React.FC<{ data: TokenMeterData }> = ({ data
               />
               <Tooltip data-tooltip="meter-details">
                 <div
-                  className="flex flex-col gap-2 font-primary text-xs"
+                  className="font-primary flex flex-col gap-2 text-xs"
                   data-tooltip-content="usage-breakdown"
                 >
                   <div
-                    className="font-semibold text-[13px] text-foreground"
+                    className="text-foreground text-[13px] font-semibold"
                     data-tooltip-title="last-request"
                   >
                     Last Request
                   </div>
-                  <div className="border-t border-border-light my-1" data-divider="top" />
+                  <div className="border-border-light my-1 border-t" data-divider="top" />
                   {data.segments.map((seg, i) => (
                     <div
                       key={i}
@@ -66,7 +66,7 @@ const VerticalTokenMeterComponent: React.FC<{ data: TokenMeterData }> = ({ data
                     >
                       <div className="flex items-center gap-1.5">
                         <div
-                          className="w-2 h-2 rounded-full flex-shrink-0"
+                          className="h-2 w-2 shrink-0 rounded-full"
                           style={{ background: seg.color }}
                           data-dot={seg.type}
                         />
@@ -77,7 +77,7 @@ const VerticalTokenMeterComponent: React.FC<{ data: TokenMeterData }> = ({ data
                       </span>
                     </div>
                   ))}
-                  <div className="border-t border-border-light my-1" data-divider="bottom" />
+                  <div className="border-border-light my-1 border-t" data-divider="bottom" />
                   <div
                     className="text-muted text-[11px]"
                     data-summary="total"
@@ -88,7 +88,7 @@ const VerticalTokenMeterComponent: React.FC<{ data: TokenMeterData }> = ({ data
                     {data.maxTokens && ` / ${formatTokens(data.maxTokens)}`}
                     {data.maxTokens && ` (${data.totalPercentage.toFixed(1)}%)`}
                   </div>
-                  <div className="text-text-dim text-[10px] mt-2 italic">
+                  <div className="text-text-dim mt-2 text-[10px] italic">
                     💡 Expand your viewport to see full details
                   </div>
                 </div>
diff --git a/src/components/SecretsModal.tsx b/src/components/SecretsModal.tsx
index 03da6b06a3..13845920a1 100644
--- a/src/components/SecretsModal.tsx
+++ b/src/components/SecretsModal.tsx
@@ -138,11 +138,11 @@ const SecretsModal: React.FC<SecretsModalProps> = ({
         <p>Secrets are injected as environment variables to compute commands (e.g. Bash)</p>
       </ModalInfo>
 
-      <div className="flex-1 overflow-y-auto mb-4 min-h-[200px]">
+      <div className="mb-4 min-h-[200px] flex-1 overflow-y-auto">
         {secrets.length === 0 ? (
-          <div className="py-8 px-4 text-center text-muted text-[13px]">No secrets configured</div>
+          <div className="text-muted px-4 py-8 text-center text-[13px]">No secrets configured</div>
         ) : (
-          <div className="grid grid-cols-[1fr_1fr_auto_auto] gap-1 items-end [&>label]:text-[11px] [&>label]:text-muted [&>label]:mb-0.5">
+          <div className="[&>label]:text-muted grid grid-cols-[1fr_1fr_auto_auto] items-end gap-1 [&>label]:mb-0.5 [&>label]:text-[11px]">
             <label>Key</label>
             <label>Value</label>
             <div /> {/* Empty cell for eye icon column */}
@@ -155,7 +155,7 @@ const SecretsModal: React.FC<SecretsModalProps> = ({
                   onChange={(e) => updateSecret(index, "key", e.target.value)}
                   placeholder="SECRET_NAME"
                   disabled={isLoading}
-                  className="py-1.5 px-2.5 bg-modal-bg border border-border-medium rounded text-white text-[13px] font-mono w-full focus:outline-none focus:border-accent placeholder:text-text-dim"
+                  className="bg-modal-bg border-border-medium focus:border-accent placeholder:text-text-dim w-full rounded border px-2.5 py-1.5 font-mono text-[13px] text-white focus:outline-none"
                 />
                 <input
                   type={visibleSecrets.has(index) ? "text" : "password"}
@@ -163,13 +163,13 @@ const SecretsModal: React.FC<SecretsModalProps> = ({
                   onChange={(e) => updateSecret(index, "value", e.target.value)}
                   placeholder="secret value"
                   disabled={isLoading}
-                  className="py-1.5 px-2.5 bg-modal-bg border border-border-medium rounded text-white text-[13px] font-mono w-full focus:outline-none focus:border-accent placeholder:text-text-dim"
+                  className="bg-modal-bg border-border-medium focus:border-accent placeholder:text-text-dim w-full rounded border px-2.5 py-1.5 font-mono text-[13px] text-white focus:outline-none"
                 />
                 <button
                   type="button"
                   onClick={() => toggleVisibility(index)}
                   disabled={isLoading}
-                  className="bg-transparent border-none text-muted cursor-pointer text-base px-1 py-0.5 rounded-sm transition-all duration-200 flex items-center justify-center self-center hover:text-foreground"
+                  className="text-muted hover:text-foreground flex cursor-pointer items-center justify-center self-center rounded-sm border-none bg-transparent px-1 py-0.5 text-base transition-all duration-200"
                 >
                   <ToggleVisibilityIcon visible={visibleSecrets.has(index)} />
                 </button>
@@ -177,7 +177,7 @@ const SecretsModal: React.FC<SecretsModalProps> = ({
                   type="button"
                   onClick={() => removeSecret(index)}
                   disabled={isLoading}
-                  className="py-1.5 px-2.5 bg-transparent text-danger-light border border-danger-light rounded cursor-pointer text-[13px] transition-all duration-200 hover:bg-danger-light/10"
+                  className="text-danger-light border-danger-light hover:bg-danger-light/10 cursor-pointer rounded border bg-transparent px-2.5 py-1.5 text-[13px] transition-all duration-200"
                 >
                   ×
                 </button>
@@ -190,7 +190,7 @@ const SecretsModal: React.FC<SecretsModalProps> = ({
       <button
         onClick={addSecret}
         disabled={isLoading}
-        className="w-full py-2 px-3 bg-transparent text-muted border border-dashed border-border-medium rounded cursor-pointer text-[13px] transition-all duration-200 mb-4 hover:bg-hover hover:border-border-darker hover:text-foreground"
+        className="text-muted border-border-medium hover:bg-hover hover:border-border-darker hover:text-foreground mb-4 w-full cursor-pointer rounded border border-dashed bg-transparent px-3 py-2 text-[13px] transition-all duration-200"
       >
         + Add Secret
       </button>
diff --git a/src/components/StatusIndicator.stories.tsx b/src/components/StatusIndicator.stories.tsx
index 626086aab9..4dd8995a73 100644
--- a/src/components/StatusIndicator.stories.tsx
+++ b/src/components/StatusIndicator.stories.tsx
@@ -57,25 +57,25 @@ export const Unread: Story = {
 export const AllStates: Story = {
   args: { streaming: false, unread: false },
   render: () => (
-    <div className="flex gap-[30px] p-5 items-center flex-wrap">
-      <div className="flex flex-col gap-2 items-center">
+    <div className="flex flex-wrap items-center gap-[30px] p-5">
+      <div className="flex flex-col items-center gap-2">
         <StatusIndicator streaming={false} unread={false} />
-        <span className="text-[11px] text-muted-light font-primary">Default</span>
+        <span className="text-muted-light font-primary text-[11px]">Default</span>
       </div>
 
-      <div className="flex flex-col gap-2 items-center">
+      <div className="flex flex-col items-center gap-2">
         <StatusIndicator streaming={true} unread={false} />
-        <span className="text-[11px] text-muted-light font-primary">Streaming</span>
+        <span className="text-muted-light font-primary text-[11px]">Streaming</span>
       </div>
 
-      <div className="flex flex-col gap-2 items-center">
+      <div className="flex flex-col items-center gap-2">
         <StatusIndicator streaming={false} unread={true} />
-        <span className="text-[11px] text-muted-light font-primary">Unread</span>
+        <span className="text-muted-light font-primary text-[11px]">Unread</span>
       </div>
 
-      <div className="flex flex-col gap-2 items-center">
+      <div className="flex flex-col items-center gap-2">
         <StatusIndicator streaming={true} unread={true} />
-        <span className="text-[11px] text-muted-light font-primary">
+        <span className="text-muted-light font-primary text-[11px]">
           Streaming (unread ignored)
         </span>
       </div>
@@ -86,30 +86,30 @@ export const AllStates: Story = {
 export const DifferentSizes: Story = {
   args: { streaming: false, unread: false },
   render: () => (
-    <div className="flex gap-[30px] p-5 items-center flex-wrap">
-      <div className="flex flex-col gap-2 items-center">
+    <div className="flex flex-wrap items-center gap-[30px] p-5">
+      <div className="flex flex-col items-center gap-2">
         <StatusIndicator streaming={false} unread={true} size={4} />
-        <span className="text-[11px] text-muted-light font-primary">4px</span>
+        <span className="text-muted-light font-primary text-[11px]">4px</span>
       </div>
 
-      <div className="flex flex-col gap-2 items-center">
+      <div className="flex flex-col items-center gap-2">
         <StatusIndicator streaming={false} unread={true} size={8} />
-        <span className="text-[11px] text-muted-light font-primary">8px (default)</span>
+        <span className="text-muted-light font-primary text-[11px]">8px (default)</span>
       </div>
 
-      <div className="flex flex-col gap-2 items-center">
+      <div className="flex flex-col items-center gap-2">
         <StatusIndicator streaming={false} unread={true} size={12} />
-        <span className="text-[11px] text-muted-light font-primary">12px</span>
+        <span className="text-muted-light font-primary text-[11px]">12px</span>
       </div>
 
-      <div className="flex flex-col gap-2 items-center">
+      <div className="flex flex-col items-center gap-2">
         <StatusIndicator streaming={false} unread={true} size={16} />
-        <span className="text-[11px] text-muted-light font-primary">16px</span>
+        <span className="text-muted-light font-primary text-[11px]">16px</span>
       </div>
 
-      <div className="flex flex-col gap-2 items-center">
+      <div className="flex flex-col items-center gap-2">
         <StatusIndicator streaming={false} unread={true} size={20} />
-        <span className="text-[11px] text-muted-light font-primary">20px</span>
+        <span className="text-muted-light font-primary text-[11px]">20px</span>
       </div>
     </div>
   ),
@@ -245,17 +245,17 @@ export const InContext: Story = {
   render: () => {
     return (
       <div className="flex flex-col gap-2">
-        <div className="flex items-center gap-2 py-2 px-3 bg-modal-bg rounded font-primary text-[13px] text-bright">
+        <div className="bg-modal-bg font-primary text-bright flex items-center gap-2 rounded px-3 py-2 text-[13px]">
           <StatusIndicator streaming={false} unread={false} />
           <span>workspace-feature-branch</span>
         </div>
 
-        <div className="flex items-center gap-2 py-2 px-3 bg-modal-bg rounded font-primary text-[13px] text-bright">
+        <div className="bg-modal-bg font-primary text-bright flex items-center gap-2 rounded px-3 py-2 text-[13px]">
           <StatusIndicator streaming={true} unread={false} />
           <span>workspace-main (streaming)</span>
         </div>
 
-        <div className="flex items-center gap-2 py-2 px-3 bg-modal-bg rounded font-primary text-[13px] text-bright">
+        <div className="bg-modal-bg font-primary text-bright flex items-center gap-2 rounded px-3 py-2 text-[13px]">
           <StatusIndicator streaming={false} unread={true} />
           <span>workspace-bugfix (3 unread)</span>
         </div>
diff --git a/src/components/ThinkingSlider.stories.tsx b/src/components/ThinkingSlider.stories.tsx
index c6fd67135a..71c6e60169 100644
--- a/src/components/ThinkingSlider.stories.tsx
+++ b/src/components/ThinkingSlider.stories.tsx
@@ -39,19 +39,19 @@ export const Default: Story = {};
 
 export const DifferentModels: Story = {
   render: () => (
-    <div className="flex flex-col gap-[30px] p-10 bg-dark min-w-80">
+    <div className="bg-dark flex min-w-80 flex-col gap-[30px] p-10">
       <div>
-        <div className="text-xs text-muted-light font-primary mb-2">Claude Sonnet 4.5</div>
+        <div className="text-muted-light font-primary mb-2 text-xs">Claude Sonnet 4.5</div>
         <ThinkingSliderComponent modelString="anthropic:claude-sonnete-4-5" />
       </div>
 
       <div>
-        <div className="text-xs text-muted-light font-primary mb-2">Claude Opus 4.1</div>
+        <div className="text-muted-light font-primary mb-2 text-xs">Claude Opus 4.1</div>
         <ThinkingSliderComponent modelString="anthropic:claude-opus-4-1" />
       </div>
 
       <div>
-        <div className="text-xs text-muted-light font-primary mb-2">GPT-5 Codex</div>
+        <div className="text-muted-light font-primary mb-2 text-xs">GPT-5 Codex</div>
         <ThinkingSliderComponent modelString="openai:gpt-5-codex" />
       </div>
     </div>
@@ -60,12 +60,12 @@ export const DifferentModels: Story = {
 
 export const InteractiveDemo: Story = {
   render: () => (
-    <div className="flex flex-col gap-[30px] p-10 bg-dark min-w-80">
-      <div className="text-[13px] text-bright font-primary mb-2.5">
+    <div className="bg-dark flex min-w-80 flex-col gap-[30px] p-10">
+      <div className="text-bright font-primary mb-2.5 text-[13px]">
         Try moving the slider to see the purple glow effect intensify:
       </div>
       <ThinkingSliderComponent modelString="claude-3-5-sonnet-20241022" />
-      <div className="text-[11px] text-muted-light font-primary mt-2.5">
+      <div className="text-muted-light font-primary mt-2.5 text-[11px]">
         • <strong>Off</strong>: No thinking (gray)
         <br />• <strong>Low</strong>: Minimal thinking (light purple)
         <br />• <strong>Medium</strong>: Moderate thinking (purple)
@@ -95,17 +95,17 @@ export const InteractiveDemo: Story = {
 export const LockedThinking: Story = {
   args: { modelString: "openai:gpt-5-pro" },
   render: (args) => (
-    <div className="flex flex-col gap-[30px] p-10 bg-dark min-w-80">
-      <div className="text-[13px] text-bright font-primary mb-2.5">
+    <div className="bg-dark flex min-w-80 flex-col gap-[30px] p-10">
+      <div className="text-bright font-primary mb-2.5 text-[13px]">
         Some models have locked thinking levels based on their capabilities:
       </div>
       <div>
-        <div className="text-xs text-muted-light font-primary mb-2">
+        <div className="text-muted-light font-primary mb-2 text-xs">
           GPT-5-Pro (locked to &ldquo;high&rdquo;)
         </div>
         <ThinkingSliderComponent modelString={args.modelString} />
       </div>
-      <div className="text-[11px] text-muted-light font-primary mt-2.5">
+      <div className="text-muted-light font-primary mt-2.5 text-[11px]">
         Hover over the locked indicator to see why it&apos;s fixed.
       </div>
     </div>
diff --git a/src/components/ThinkingSlider.tsx b/src/components/ThinkingSlider.tsx
index 00a5c4f854..d3b4447f99 100644
--- a/src/components/ThinkingSlider.tsx
+++ b/src/components/ThinkingSlider.tsx
@@ -95,10 +95,10 @@ export const ThinkingSliderComponent: React.FC<ThinkingControlProps> = ({ modelS
 
     return (
       <TooltipWrapper>
-        <div className="flex items-center gap-2 ml-5">
-          <label className="text-[10px] text-subdued select-none">Thinking:</label>
+        <div className="ml-5 flex items-center gap-2">
+          <label className="text-subdued text-[10px] select-none">Thinking:</label>
           <span
-            className="min-w-11 uppercase select-none transition-all duration-200"
+            className="min-w-11 uppercase transition-all duration-200 select-none"
             style={textStyle}
             aria-live="polite"
             aria-label={`Thinking level fixed to ${fixedLevel}`}
@@ -127,8 +127,8 @@ export const ThinkingSliderComponent: React.FC<ThinkingControlProps> = ({ modelS
 
   return (
     <TooltipWrapper>
-      <div className="flex items-center gap-2 ml-5">
-        <label htmlFor={sliderId} className="text-[10px] text-subdued select-none">
+      <div className="ml-5 flex items-center gap-2">
+        <label htmlFor={sliderId} className="text-subdued text-[10px] select-none">
           Thinking:
         </label>
         <input
@@ -158,7 +158,7 @@ export const ThinkingSliderComponent: React.FC<ThinkingControlProps> = ({ modelS
           }
         />
         <span
-          className="min-w-11 uppercase select-none transition-all duration-200"
+          className="min-w-11 uppercase transition-all duration-200 select-none"
           style={textStyle}
           aria-live="polite"
         >
diff --git a/src/components/TipsCarousel.stories.tsx b/src/components/TipsCarousel.stories.tsx
index fae1099254..f2261b85d3 100644
--- a/src/components/TipsCarousel.stories.tsx
+++ b/src/components/TipsCarousel.stories.tsx
@@ -24,12 +24,12 @@ export const Default: Story = {
 
 export const WithExplanation: Story = {
   render: () => (
-    <div className="flex flex-col gap-5 p-5 bg-dark min-w-96">
-      <div className="text-[13px] text-bright font-primary">
+    <div className="bg-dark flex min-w-96 flex-col gap-5 p-5">
+      <div className="text-bright font-primary text-[13px]">
         Tips rotate automatically based on time. Hover to see the gradient effect:
       </div>
       <TipsCarousel fixedTipIndex={0} />
-      <div className="text-[11px] text-muted-light font-primary">
+      <div className="text-muted-light font-primary text-[11px]">
         Tips change every hour to provide variety and convey UX information.
       </div>
     </div>
@@ -38,10 +38,10 @@ export const WithExplanation: Story = {
 
 export const DebugControls: Story = {
   render: () => (
-    <div className="flex flex-col gap-5 p-5 bg-dark min-w-96">
-      <div className="text-[13px] text-bright font-primary">For debugging, you can use:</div>
+    <div className="bg-dark flex min-w-96 flex-col gap-5 p-5">
+      <div className="text-bright font-primary text-[13px]">For debugging, you can use:</div>
       <TipsCarousel fixedTipIndex={1} />
-      <div className="text-[11px] text-muted-light font-monospace p-3 bg-modal-bg rounded">
+      <div className="text-muted-light font-monospace bg-modal-bg rounded p-3 text-[11px]">
         <div>window.setTip(0) // Show first tip</div>
         <div>window.setTip(1) // Show second tip</div>
         <div>window.clearTip() // Return to auto-rotation</div>
@@ -53,10 +53,10 @@ export const DebugControls: Story = {
 export const InContext: Story = {
   render: () => {
     return (
-      <div className="flex items-center gap-3 py-2 px-3 bg-separator border-b border-border-light font-primary">
+      <div className="bg-separator border-border-light font-primary flex items-center gap-3 border-b px-3 py-2">
         <div className="flex items-center gap-2">
-          <span className="text-[11px] text-muted-light">Workspace:</span>
-          <span className="text-[11px] text-bright">main</span>
+          <span className="text-muted-light text-[11px]">Workspace:</span>
+          <span className="text-bright text-[11px]">main</span>
         </div>
         <div
           style={{
@@ -68,7 +68,7 @@ export const InContext: Story = {
           <TipsCarousel fixedTipIndex={0} />
         </div>
         <div className="flex items-center gap-2">
-          <span className="text-[11px] text-muted-light">Mode: Plan</span>
+          <span className="text-muted-light text-[11px]">Mode: Plan</span>
         </div>
       </div>
     );
diff --git a/src/components/TipsCarousel.tsx b/src/components/TipsCarousel.tsx
index 647d189509..c18b9efc33 100644
--- a/src/components/TipsCarousel.tsx
+++ b/src/components/TipsCarousel.tsx
@@ -80,7 +80,7 @@ export const TipsCarousel: React.FC<TipsCarouselProps> = ({ fixedTipIndex }) =>
       role="status"
       aria-live="polite"
       aria-atomic="true"
-      className="flex items-center gap-1.5 text-[11px] text-text font-primary leading-5 mt-[3px] px-2 py-1 rounded transition-all duration-300 cursor-default hover:bg-[linear-gradient(135deg,color-mix(in_srgb,var(--color-plan-mode),transparent_85%)_0%,color-mix(in_srgb,var(--color-exec-mode),transparent_85%)_50%,color-mix(in_srgb,var(--color-thinking-mode),transparent_85%)_100%)] [&:hover_.tip-label]:text-text [&:hover_.tip-content]:text-text [&:hover_.keybind]:text-white [&:hover_.command]:text-white"
+      className="text-text font-primary [&:hover_.tip-label]:text-text [&:hover_.tip-content]:text-text mt-[3px] flex cursor-default items-center gap-1.5 rounded px-2 py-1 text-[11px] leading-5 transition-all duration-300 hover:bg-[linear-gradient(135deg,color-mix(in_srgb,var(--color-plan-mode),transparent_85%)_0%,color-mix(in_srgb,var(--color-exec-mode),transparent_85%)_50%,color-mix(in_srgb,var(--color-thinking-mode),transparent_85%)_100%)] [&:hover_.command]:text-white [&:hover_.keybind]:text-white"
     >
       <span className="tip-label font-medium text-[color-mix(in_srgb,var(--color-text-secondary),transparent_20%)] transition-colors duration-300">
         Tip:
diff --git a/src/components/TitleBar.tsx b/src/components/TitleBar.tsx
index 1d5f263917..80313ee963 100644
--- a/src/components/TitleBar.tsx
+++ b/src/components/TitleBar.tsx
@@ -214,8 +214,8 @@ export function TitleBar() {
   const showUpdateIndicator = true;
 
   return (
-    <div className="px-4 py-2 bg-dark border-b border-border-light flex items-center justify-between font-primary text-[11px] text-muted select-none flex-shrink-0">
-      <div className="flex items-center gap-2 min-w-0 mr-4">
+    <div className="bg-dark border-border-light font-primary text-muted flex shrink-0 items-center justify-between border-b px-4 py-2 text-[11px] select-none">
+      <div className="mr-4 flex min-w-0 items-center gap-2">
         {showUpdateIndicator && (
           <TooltipWrapper>
             <div
@@ -242,12 +242,12 @@ export function TitleBar() {
             </Tooltip>
           </TooltipWrapper>
         )}
-        <div className="font-normal text-xs tracking-wider select-text cursor-text whitespace-nowrap overflow-hidden text-ellipsis min-w-0">
+        <div className="min-w-0 cursor-text truncate text-xs font-normal tracking-wider select-text">
           cmux {gitDescribe ?? "(dev)"}
         </div>
       </div>
       <TooltipWrapper>
-        <div className="text-[11px] opacity-70 cursor-default">{buildDate}</div>
+        <div className="cursor-default text-[11px] opacity-70">{buildDate}</div>
         <Tooltip align="right">Built at {extendedTimestamp}</Tooltip>
       </TooltipWrapper>
     </div>
diff --git a/src/components/TodoList.tsx b/src/components/TodoList.tsx
index 479670170a..003b9e260a 100644
--- a/src/components/TodoList.tsx
+++ b/src/components/TodoList.tsx
@@ -110,17 +110,15 @@ export const TodoList: React.FC<TodoListProps> = ({ todos }) => {
         return (
           <div
             key={index}
-            className="flex items-start gap-1.5 px-2 py-1 rounded border-l-2 font-monospace text-[11px] leading-[1.35]"
+            className="font-monospace flex items-start gap-1.5 rounded border-l-2 px-2 py-1 text-[11px] leading-[1.35]"
             style={{
               background: statusBgColors[todo.status],
               borderLeftColor: statusBorderColors[todo.status],
               color: "var(--color-text)",
             }}
           >
-            <div className="text-xs flex-shrink-0 mt-px opacity-80">
-              {getStatusIcon(todo.status)}
-            </div>
-            <div className="flex-1 min-w-0">
+            <div className="mt-px shrink-0 text-xs opacity-80">{getStatusIcon(todo.status)}</div>
+            <div className="min-w-0 flex-1">
               <div
                 className={cn(
                   "whitespace-nowrap",
diff --git a/src/components/ToggleGroup.stories.tsx b/src/components/ToggleGroup.stories.tsx
index 1ebba3ff81..61b5f8de74 100644
--- a/src/components/ToggleGroup.stories.tsx
+++ b/src/components/ToggleGroup.stories.tsx
@@ -260,7 +260,7 @@ export const WithStateDisplay: Story = {
           value={value}
           onChange={(newValue) => updateArgs({ value: newValue })}
         />
-        <div className="text-xs text-muted-light font-primary">
+        <div className="text-muted-light font-primary text-xs">
           Current selection: <strong className="text-bright">{value}</strong>
         </div>
       </div>
@@ -316,17 +316,17 @@ export const MultipleGroups: Story = {
     return (
       <div className="flex flex-col gap-5 p-5">
         <div>
-          <div className="text-[11px] text-muted-light mb-1.5 font-primary">Theme</div>
+          <div className="text-muted-light font-primary mb-1.5 text-[11px]">Theme</div>
           <ToggleGroup options={themeOptions} value={theme} onChange={handleThemeChange} />
         </div>
 
         <div>
-          <div className="text-[11px] text-muted-light mb-1.5 font-primary">Size</div>
+          <div className="text-muted-light font-primary mb-1.5 text-[11px]">Size</div>
           <ToggleGroup options={sizeOptions} value={size} onChange={handleSizeChange} />
         </div>
 
         <div>
-          <div className="text-[11px] text-muted-light mb-1.5 font-primary">Layout</div>
+          <div className="text-muted-light font-primary mb-1.5 text-[11px]">Layout</div>
           <ToggleGroup options={layoutOptions} value={layout} onChange={handleLayoutChange} />
         </div>
       </div>
diff --git a/src/components/ToggleGroup.tsx b/src/components/ToggleGroup.tsx
index 0cebe8476f..6388a2a655 100644
--- a/src/components/ToggleGroup.tsx
+++ b/src/components/ToggleGroup.tsx
@@ -14,7 +14,7 @@ interface ToggleGroupProps<T extends string> {
 
 export function ToggleGroup<T extends string>({ options, value, onChange }: ToggleGroupProps<T>) {
   return (
-    <div className="flex gap-0 bg-toggle-bg rounded">
+    <div className="bg-toggle-bg flex gap-0 rounded">
       {options.map((option) => {
         const isActive = value === option.value;
         return (
diff --git a/src/components/Tooltip.stories.tsx b/src/components/Tooltip.stories.tsx
index 11011cece1..20106be13d 100644
--- a/src/components/Tooltip.stories.tsx
+++ b/src/components/Tooltip.stories.tsx
@@ -18,7 +18,7 @@ export const BasicTooltip: Story = {
   args: { children: "This is a helpful tooltip" },
   render: () => (
     <TooltipWrapper>
-      <button className="py-2 px-4 bg-accent-dark text-white border-none rounded cursor-pointer font-primary text-[13px] hover:bg-accent-hover">
+      <button className="bg-accent-dark font-primary hover:bg-accent-hover cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white">
         Hover me
       </button>
       <Tooltip>This is a helpful tooltip</Tooltip>
@@ -64,16 +64,16 @@ export const BasicTooltip: Story = {
 export const TooltipPositions: Story = {
   args: { children: "Tooltip content" },
   render: () => (
-    <div className="flex gap-5 p-10 flex-wrap">
+    <div className="flex flex-wrap gap-5 p-10">
       <TooltipWrapper>
-        <button className="py-2 px-4 bg-accent-dark text-white border-none rounded cursor-pointer font-primary text-[13px] hover:bg-accent-hover">
+        <button className="bg-accent-dark font-primary hover:bg-accent-hover cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white">
           Top (default)
         </button>
         <Tooltip position="top">Tooltip appears above</Tooltip>
       </TooltipWrapper>
 
       <TooltipWrapper>
-        <button className="py-2 px-4 bg-accent-dark text-white border-none rounded cursor-pointer font-primary text-[13px] hover:bg-accent-hover">
+        <button className="bg-accent-dark font-primary hover:bg-accent-hover cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white">
           Bottom
         </button>
         <Tooltip position="bottom">Tooltip appears below</Tooltip>
@@ -85,23 +85,23 @@ export const TooltipPositions: Story = {
 export const TooltipAlignments: Story = {
   args: { children: "Tooltip content" },
   render: () => (
-    <div className="flex gap-5 p-10 flex-wrap">
+    <div className="flex flex-wrap gap-5 p-10">
       <TooltipWrapper>
-        <button className="py-2 px-4 bg-accent-dark text-white border-none rounded cursor-pointer font-primary text-[13px] hover:bg-accent-hover">
+        <button className="bg-accent-dark font-primary hover:bg-accent-hover cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white">
           Left Aligned
         </button>
         <Tooltip align="left">Left-aligned tooltip</Tooltip>
       </TooltipWrapper>
 
       <TooltipWrapper>
-        <button className="py-2 px-4 bg-accent-dark text-white border-none rounded cursor-pointer font-primary text-[13px] hover:bg-accent-hover">
+        <button className="bg-accent-dark font-primary hover:bg-accent-hover cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white">
           Center Aligned
         </button>
         <Tooltip align="center">Center-aligned tooltip</Tooltip>
       </TooltipWrapper>
 
       <TooltipWrapper>
-        <button className="py-2 px-4 bg-accent-dark text-white border-none rounded cursor-pointer font-primary text-[13px] hover:bg-accent-hover">
+        <button className="bg-accent-dark font-primary hover:bg-accent-hover cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white">
           Right Aligned
         </button>
         <Tooltip align="right">Right-aligned tooltip</Tooltip>
@@ -114,7 +114,7 @@ export const WideTooltip: Story = {
   args: { children: "Tooltip content" },
   render: () => (
     <TooltipWrapper>
-      <button className="py-2 px-4 bg-accent-dark text-white border-none rounded cursor-pointer font-primary text-[13px] hover:bg-accent-hover">
+      <button className="bg-accent-dark font-primary hover:bg-accent-hover cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white">
         Hover for detailed info
       </button>
       <Tooltip width="wide">
@@ -161,7 +161,7 @@ export const KeyboardShortcut: Story = {
   args: { children: "Tooltip content" },
   render: () => (
     <TooltipWrapper>
-      <button className="py-2 px-4 bg-accent-dark text-white border-none rounded cursor-pointer font-primary text-[13px] hover:bg-accent-hover">
+      <button className="bg-accent-dark font-primary hover:bg-accent-hover cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white">
         Save File
       </button>
       <Tooltip align="center">
@@ -175,7 +175,7 @@ export const LongContent: Story = {
   args: { children: "Tooltip content" },
   render: () => (
     <TooltipWrapper>
-      <button className="py-2 px-4 bg-accent-dark text-white border-none rounded cursor-pointer font-primary text-[13px] hover:bg-accent-hover">
+      <button className="bg-accent-dark font-primary hover:bg-accent-hover cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white">
         Documentation
       </button>
       <Tooltip width="wide">
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index e6d32b1e9d..d164f0e2bc 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -230,7 +230,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
     >
       {children}
       <div
-        className="absolute border-[5px] border-solid -translate-x-1/2"
+        className="absolute -translate-x-1/2 border-[5px] border-solid"
         style={tooltipState.arrowStyle}
       />
     </div>,
diff --git a/src/components/VimTextArea.tsx b/src/components/VimTextArea.tsx
index 0321350fe2..8d0b913987 100644
--- a/src/components/VimTextArea.tsx
+++ b/src/components/VimTextArea.tsx
@@ -155,7 +155,7 @@ export const VimTextArea = React.forwardRef<HTMLTextAreaElement, VimTextAreaProp
     return (
       <div style={{ width: "100%" }} data-component="VimTextAreaContainer">
         <div
-          className="text-[9px] text-vim-status tracking-[0.8px] select-none h-[11px] leading-[11px] mb-px flex items-center justify-between gap-1"
+          className="text-vim-status mb-px flex h-[11px] items-center justify-between gap-1 text-[9px] leading-[11px] tracking-[0.8px] select-none"
           aria-live="polite"
         >
           <div className="flex items-center gap-1">
@@ -190,7 +190,7 @@ export const VimTextArea = React.forwardRef<HTMLTextAreaElement, VimTextAreaProp
             )}
           </div>
           {showFocusHint && (
-            <div className="flex items-center gap-1 ml-auto font-mono">
+            <div className="ml-auto flex items-center gap-1 font-mono">
               <span>{formatKeybind(KEYBINDS.FOCUS_CHAT)} to focus</span>
             </div>
           )}
@@ -222,7 +222,7 @@ export const VimTextArea = React.forwardRef<HTMLTextAreaElement, VimTextAreaProp
             )}
           />
           {vimMode === "normal" && value.length === 0 && (
-            <div className="absolute w-2 h-4 bg-white/50 pointer-events-none left-2 top-1.5" />
+            <div className="pointer-events-none absolute top-1.5 left-2 h-4 w-2 bg-white/50" />
           )}
         </div>
       </div>
diff --git a/src/components/WorkspaceListItem.tsx b/src/components/WorkspaceListItem.tsx
index 25632fe729..5c04e7c0ca 100644
--- a/src/components/WorkspaceListItem.tsx
+++ b/src/components/WorkspaceListItem.tsx
@@ -162,7 +162,7 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
       >
         <TooltipWrapper inline>
           <button
-            className="opacity-0 bg-transparent text-muted border-none cursor-pointer text-base p-0 w-5 h-5 flex items-center justify-center transition-all duration-200 flex-shrink-0 col-start-1 hover:text-foreground hover:bg-white/10 hover:rounded-sm"
+            className="text-muted hover:text-foreground col-start-1 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center border-none bg-transparent p-0 text-base opacity-0 transition-all duration-200 hover:rounded-sm hover:bg-white/10"
             onClick={(e) => {
               e.stopPropagation();
               void onRemoveWorkspace(workspaceId, e.currentTarget);
@@ -183,7 +183,7 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
         />
         {isEditing ? (
           <input
-            className="bg-input-bg text-input-text border border-input-border rounded-sm px-1 py-0.5 text-[13px] font-inherit outline-none min-w-0 text-right focus:border-input-border-focus"
+            className="bg-input-bg text-input-text border-input-border font-inherit focus:border-input-border-focus min-w-0 rounded-sm border px-1 py-0.5 text-right text-[13px] outline-none"
             value={editingName}
             onChange={(e) => setEditingName(e.target.value)}
             onKeyDown={handleRenameKeyDown}
@@ -195,7 +195,7 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
           />
         ) : (
           <span
-            className="text-foreground text-[14px] whitespace-nowrap overflow-hidden text-ellipsis cursor-pointer px-1 py-0.5 rounded-sm transition-colors duration-200 min-w-0 text-right hover:bg-white/5"
+            className="text-foreground min-w-0 cursor-pointer truncate rounded-sm px-1 py-0.5 text-right text-[14px] transition-colors duration-200 hover:bg-white/5"
             onDoubleClick={(e) => {
               e.stopPropagation();
               startRenaming();
@@ -214,7 +214,7 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
         />
       </div>
       {renameError && isEditing && (
-        <div className="absolute top-full left-7 right-8 mt-1 px-2 py-1.5 bg-error-bg border border-error rounded-sm text-error text-xs z-10">
+        <div className="bg-error-bg border-error text-error absolute top-full right-8 left-7 z-10 mt-1 rounded-sm border px-2 py-1.5 text-xs">
           {renameError}
         </div>
       )}
diff --git a/src/components/shared/DiffRenderer.tsx b/src/components/shared/DiffRenderer.tsx
index ccdf8aded7..ebd375f57b 100644
--- a/src/components/shared/DiffRenderer.tsx
+++ b/src/components/shared/DiffRenderer.tsx
@@ -179,7 +179,7 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
   if (!highlightedChunks) {
     return (
       <div
-        className="m-0 py-1.5 bg-code-bg rounded grid overflow-y-auto overflow-x-auto [&_*]:text-[inherit]"
+        className="bg-code-bg m-0 grid overflow-auto rounded py-1.5 [&_*]:text-[inherit]"
         style={{
           fontSize: fontSize ?? "12px",
           lineHeight: 1.4,
@@ -194,7 +194,7 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
 
   return (
     <div
-      className="m-0 py-1.5 bg-code-bg rounded grid overflow-y-auto overflow-x-auto [&_*]:text-[inherit]"
+      className="bg-code-bg m-0 grid overflow-auto rounded py-1.5 [&_*]:text-[inherit]"
       style={{
         fontSize: fontSize ?? "12px",
         lineHeight: 1.4,
@@ -212,11 +212,11 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
               style={{ background: getDiffLineBackground(chunk.type) }}
             >
               <div
-                className="font-mono whitespace-pre flex px-2"
+                className="flex px-2 font-mono whitespace-pre"
                 style={{ color: getDiffLineColor(chunk.type) }}
               >
                 <span
-                  className="inline-block w-1 text-center shrink-0"
+                  className="inline-block w-1 shrink-0 text-center"
                   style={{
                     color: getContrastColor(chunk.type),
                     opacity: chunk.type === "add" || chunk.type === "remove" ? 0.9 : 0.6,
@@ -226,7 +226,7 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
                 </span>
                 {showLineNumbers && (
                   <span
-                    className="flex items-center justify-end min-w-9 pr-1 select-none shrink-0"
+                    className="flex min-w-9 shrink-0 items-center justify-end pr-1 select-none"
                     style={{
                       color: getContrastColor(chunk.type),
                       opacity: chunk.type === "add" || chunk.type === "remove" ? 0.9 : 0.6,
@@ -336,12 +336,12 @@ const ReviewNoteInput: React.FC<ReviewNoteInputProps> = React.memo(
 
     return (
       <div
-        className="py-1.5 px-2 bg-dark border-t m-0"
+        className="bg-dark m-0 border-t px-2 py-1.5"
         style={{ borderColor: "hsl(from var(--color-review-accent) h s l / 0.3)" }}
       >
         <textarea
           ref={textareaRef}
-          className="w-full px-2 py-1.5 font-mono text-xs leading-[1.4] bg-dark border rounded-sm text-text resize-none overflow-y-hidden placeholder:text-muted focus:outline-none focus:border-[hsl(from_var(--color-review-accent)_h_s_l_/_0.6)]"
+          className="bg-dark text-text placeholder:text-muted w-full resize-none overflow-y-hidden rounded-sm border px-2 py-1.5 font-mono text-xs leading-[1.4] focus:border-[hsl(from_var(--color-review-accent)_h_s_l_/_0.6)] focus:outline-none"
           style={{
             minHeight: "calc(12px * 1.4 * 3 + 12px)",
             borderColor: "hsl(from var(--color-review-accent) h s l / 0.4)",
@@ -480,7 +480,7 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
     if (!highlightedChunks || highlightedLineData.length === 0) {
       return (
         <div
-          className="m-0 py-1.5 bg-code-bg rounded grid overflow-y-auto overflow-x-auto [&_*]:text-[inherit]"
+          className="bg-code-bg m-0 grid overflow-auto rounded py-1.5 [&_*]:text-[inherit]"
           style={{
             fontSize: fontSize ?? "12px",
             lineHeight: 1.4,
@@ -498,7 +498,7 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
 
     return (
       <div
-        className="m-0 py-1.5 bg-code-bg rounded grid overflow-y-auto overflow-x-auto [&_*]:text-[inherit]"
+        className="bg-code-bg m-0 grid overflow-auto rounded py-1.5 [&_*]:text-[inherit]"
         style={{
           fontSize: fontSize ?? "12px",
           lineHeight: 1.4,
@@ -523,10 +523,10 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
                     : getDiffLineBackground(lineInfo.type),
                 }}
               >
-                <span className="absolute left-1 top-1/2 -translate-y-1/2 z-[1]">
+                <span className="absolute top-1/2 left-1 z-[1] -translate-y-1/2">
                   <TooltipWrapper inline>
                     <button
-                      className="opacity-0 bg-review-accent border-none rounded-sm w-3.5 h-3.5 p-0 cursor-pointer transition-opacity duration-150 flex items-center justify-center text-white font-bold shrink-0 group-hover:opacity-70 hover:!opacity-100 active:scale-90"
+                      className="bg-review-accent flex h-3.5 w-3.5 shrink-0 cursor-pointer items-center justify-center rounded-sm border-none p-0 font-bold text-white opacity-0 transition-opacity duration-150 group-hover:opacity-70 hover:!opacity-100 active:scale-90"
                       style={{
                         background: "var(--color-review-accent)",
                       }}
@@ -555,11 +555,11 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
                   </TooltipWrapper>
                 </span>
                 <div
-                  className="font-mono whitespace-pre flex px-2"
+                  className="flex px-2 font-mono whitespace-pre"
                   style={{ color: getDiffLineColor(lineInfo.type) }}
                 >
                   <span
-                    className="inline-block w-1 text-center shrink-0"
+                    className="inline-block w-1 shrink-0 text-center"
                     style={{
                       color: getContrastColor(lineInfo.type),
                       opacity: lineInfo.type === "add" || lineInfo.type === "remove" ? 0.9 : 0.6,
@@ -569,7 +569,7 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
                   </span>
                   {showLineNumbers && (
                     <span
-                      className="flex items-center justify-end min-w-9 pr-1 select-none shrink-0"
+                      className="flex min-w-9 shrink-0 items-center justify-end pr-1 select-none"
                       style={{
                         color: getContrastColor(lineInfo.type),
                         opacity: lineInfo.type === "add" || lineInfo.type === "remove" ? 0.9 : 0.6,
diff --git a/src/components/tools/BashToolCall.tsx b/src/components/tools/BashToolCall.tsx
index f50faa38dd..5247c02dff 100644
--- a/src/components/tools/BashToolCall.tsx
+++ b/src/components/tools/BashToolCall.tsx
@@ -67,11 +67,9 @@ export const BashToolCall: React.FC<BashToolCallProps> = ({
           <span>🔧</span>
           <Tooltip>bash</Tooltip>
         </TooltipWrapper>
-        <span className="text-text font-monospace whitespace-nowrap overflow-hidden text-ellipsis max-w-96">
-          {args.script}
-        </span>
+        <span className="text-text font-monospace max-w-96 truncate">{args.script}</span>
         <span
-          className="text-[10px] ml-2 whitespace-nowrap [@container(max-width:500px)]:hidden"
+          className="ml-2 text-[10px] whitespace-nowrap [@container(max-width:500px)]:hidden"
           style={{
             color: isPending ? "var(--color-pending)" : "var(--color-text-secondary)",
           }}
@@ -82,7 +80,7 @@ export const BashToolCall: React.FC<BashToolCallProps> = ({
         </span>
         {result && (
           <span
-            className="inline-block px-1.5 py-0.5 rounded text-[10px] font-medium ml-2 whitespace-nowrap flex-shrink-0"
+            className="ml-2 inline-block shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium whitespace-nowrap"
             style={{
               background: result.exitCode === 0 ? "#4caf50" : "#f44336",
               color: "white",
@@ -106,7 +104,7 @@ export const BashToolCall: React.FC<BashToolCallProps> = ({
               {result.success === false && result.error && (
                 <DetailSection>
                   <DetailLabel>Error</DetailLabel>
-                  <div className="text-danger text-[11px] px-2 py-1.5 bg-danger-overlay rounded border-l-2 border-danger">
+                  <div className="text-danger bg-danger-overlay border-danger rounded border-l-2 px-2 py-1.5 text-[11px]">
                     {result.error}
                   </div>
                 </DetailSection>
@@ -115,7 +113,7 @@ export const BashToolCall: React.FC<BashToolCallProps> = ({
               {result.output && (
                 <DetailSection>
                   <DetailLabel>Output</DetailLabel>
-                  <pre className="m-0 px-2 py-1.5 bg-code-bg rounded border-l-2 border-success text-[11px] leading-[1.4] whitespace-pre-wrap break-words max-h-[200px] overflow-y-auto">
+                  <pre className="bg-code-bg border-success m-0 max-h-[200px] overflow-y-auto rounded border-l-2 px-2 py-1.5 text-[11px] leading-[1.4] break-words whitespace-pre-wrap">
                     {result.output}
                   </pre>
                 </DetailSection>
diff --git a/src/components/tools/FileEditToolCall.tsx b/src/components/tools/FileEditToolCall.tsx
index 57a1ad7618..fd505c088f 100644
--- a/src/components/tools/FileEditToolCall.tsx
+++ b/src/components/tools/FileEditToolCall.tsx
@@ -83,7 +83,7 @@ function renderDiff(
     ));
   } catch (error) {
     return (
-      <div className="text-danger text-[11px] px-2 py-1.5 bg-danger-overlay rounded border-l-2 border-danger">
+      <div className="text-danger bg-danger-overlay border-danger rounded border-l-2 px-2 py-1.5 text-[11px]">
         Failed to parse diff: {String(error)}
       </div>
     );
@@ -133,19 +133,17 @@ export const FileEditToolCall: React.FC<FileEditToolCallProps> = ({
 
   return (
     <ToolContainer expanded={expanded}>
-      <ToolHeader className="cursor-default hover:text-secondary">
+      <ToolHeader className="hover:text-secondary cursor-default">
         <div
           onClick={toggleExpanded}
-          className="flex items-center gap-2 flex-1 cursor-pointer hover:text-text"
+          className="hover:text-text flex flex-1 cursor-pointer items-center gap-2"
         >
           <ExpandIcon expanded={expanded}>▶</ExpandIcon>
           <TooltipWrapper inline>
             <span>✏️</span>
             <Tooltip>{toolName}</Tooltip>
           </TooltipWrapper>
-          <span className="text-text font-monospace whitespace-nowrap overflow-hidden text-ellipsis max-w-96">
-            {filePath}
-          </span>
+          <span className="text-text font-monospace max-w-96 truncate">{filePath}</span>
         </div>
         {!(result && result.success && result.diff) && (
           <StatusIndicator status={status}>{getStatusDisplay(status)}</StatusIndicator>
@@ -164,7 +162,7 @@ export const FileEditToolCall: React.FC<FileEditToolCallProps> = ({
               {result.success === false && result.error && (
                 <DetailSection>
                   <DetailLabel>Error</DetailLabel>
-                  <div className="text-danger text-[11px] px-2 py-1.5 bg-danger-overlay rounded border-l-2 border-danger">
+                  <div className="text-danger bg-danger-overlay border-danger rounded border-l-2 px-2 py-1.5 text-[11px]">
                     {result.error}
                   </div>
                 </DetailSection>
@@ -173,7 +171,7 @@ export const FileEditToolCall: React.FC<FileEditToolCallProps> = ({
               {result.success && result.diff && (
                 <DiffContainer>
                   {showRaw ? (
-                    <pre className="m-0 whitespace-pre-wrap break-words">{result.diff}</pre>
+                    <pre className="m-0 break-words whitespace-pre-wrap">{result.diff}</pre>
                   ) : (
                     renderDiff(result.diff, filePath, onReviewNote)
                   )}
@@ -184,7 +182,7 @@ export const FileEditToolCall: React.FC<FileEditToolCallProps> = ({
 
           {status === "executing" && !result && (
             <DetailSection>
-              <div className="text-[11px] text-secondary">
+              <div className="text-secondary text-[11px]">
                 Waiting for result
                 <LoadingDots />
               </div>
diff --git a/src/components/tools/FileReadToolCall.tsx b/src/components/tools/FileReadToolCall.tsx
index fa29ff9477..654af05764 100644
--- a/src/components/tools/FileReadToolCall.tsx
+++ b/src/components/tools/FileReadToolCall.tsx
@@ -82,11 +82,9 @@ export const FileReadToolCall: React.FC<FileReadToolCallProps> = ({
           <span>📖</span>
           <Tooltip>file_read</Tooltip>
         </TooltipWrapper>
-        <span className="text-text font-monospace whitespace-nowrap overflow-hidden text-ellipsis max-w-96">
-          {filePath}
-        </span>
+        <span className="text-text font-monospace max-w-96 truncate">{filePath}</span>
         {result && result.success && parsedContent && (
-          <span className="text-secondary text-[10px] ml-2">
+          <span className="text-secondary ml-2 text-[10px]">
             read {formatBytes(parsedContent.actualBytes)} of {formatBytes(result.file_size)}
           </span>
         )}
@@ -96,7 +94,7 @@ export const FileReadToolCall: React.FC<FileReadToolCallProps> = ({
       {expanded && (
         <ToolDetails>
           <DetailSection>
-            <div className="flex flex-wrap gap-4 px-2 py-1.5 bg-code-bg rounded text-[11px] leading-[1.4]">
+            <div className="bg-code-bg flex flex-wrap gap-4 rounded px-2 py-1.5 text-[11px] leading-[1.4]">
               <div className="flex gap-1.5">
                 <span className="text-secondary font-medium">Path:</span>
                 <span className="text-text font-monospace break-all">{args.filePath}</span>
@@ -121,7 +119,7 @@ export const FileReadToolCall: React.FC<FileReadToolCallProps> = ({
               {result.success === false && result.error && (
                 <DetailSection>
                   <DetailLabel>Error</DetailLabel>
-                  <div className="text-danger text-[11px] px-2 py-1.5 bg-danger-overlay rounded border-l-2 border-danger">
+                  <div className="text-danger bg-danger-overlay border-danger rounded border-l-2 px-2 py-1.5 text-[11px]">
                     {result.error}
                   </div>
                 </DetailSection>
@@ -130,13 +128,13 @@ export const FileReadToolCall: React.FC<FileReadToolCallProps> = ({
               {result.success && result.content && parsedContent && (
                 <DetailSection>
                   <DetailLabel>Content</DetailLabel>
-                  <div className="m-0 px-2 py-1.5 bg-code-bg rounded text-[11px] leading-[1.4] max-h-[200px] overflow-y-auto flex">
-                    <div className="text-secondary opacity-40 pr-3 mr-2 border-r border-white/10 select-none text-right min-w-10 font-monospace">
+                  <div className="bg-code-bg m-0 flex max-h-[200px] overflow-y-auto rounded px-2 py-1.5 text-[11px] leading-[1.4]">
+                    <div className="text-secondary font-monospace mr-2 min-w-10 border-r border-white/10 pr-3 text-right opacity-40 select-none">
                       {parsedContent.lineNumbers.map((lineNum, i) => (
                         <div key={i}>{lineNum}</div>
                       ))}
                     </div>
-                    <pre className="m-0 p-0 whitespace-pre-wrap break-words flex-1 font-monospace">
+                    <pre className="font-monospace m-0 flex-1 p-0 break-words whitespace-pre-wrap">
                       {parsedContent.actualContent}
                     </pre>
                   </div>
diff --git a/src/components/tools/ProposePlanToolCall.tsx b/src/components/tools/ProposePlanToolCall.tsx
index cec89d34c4..90b08ecfd4 100644
--- a/src/components/tools/ProposePlanToolCall.tsx
+++ b/src/components/tools/ProposePlanToolCall.tsx
@@ -71,7 +71,7 @@ export const ProposePlanToolCall: React.FC<ProposePlanToolCallProps> = ({
       {expanded && (
         <ToolDetails>
           <div
-            className="p-3 rounded-md shadow-md"
+            className="rounded-md p-3 shadow-md"
             style={{
               background:
                 "linear-gradient(135deg, color-mix(in srgb, var(--color-plan-mode), transparent 92%) 0%, color-mix(in srgb, var(--color-plan-mode), transparent 95%) 100%)",
@@ -79,15 +79,15 @@ export const ProposePlanToolCall: React.FC<ProposePlanToolCallProps> = ({
             }}
           >
             <div
-              className="flex items-center gap-2 mb-3 pb-2"
+              className="mb-3 flex items-center gap-2 pb-2"
               style={{
                 borderBottom:
                   "1px solid color-mix(in srgb, var(--color-plan-mode), transparent 80%)",
               }}
             >
-              <div className="flex items-center gap-2 flex-1">
+              <div className="flex flex-1 items-center gap-2">
                 <div className="text-base">📋</div>
-                <div className="text-[13px] font-semibold text-plan-mode font-mono">
+                <div className="text-plan-mode font-mono text-[13px] font-semibold">
                   {args.title}
                 </div>
               </div>
@@ -135,7 +135,7 @@ export const ProposePlanToolCall: React.FC<ProposePlanToolCallProps> = ({
                 )}
                 <button
                   onClick={() => void handleCopy()}
-                  className="px-2 py-1 text-[10px] font-mono text-muted bg-transparent rounded-sm cursor-pointer transition-all duration-150 active:translate-y-px hover:text-plan-mode"
+                  className="text-muted hover:text-plan-mode cursor-pointer rounded-sm bg-transparent px-2 py-1 font-mono text-[10px] transition-all duration-150 active:translate-y-px"
                   style={{
                     border: "1px solid rgba(136, 136, 136, 0.3)",
                   }}
@@ -188,7 +188,7 @@ export const ProposePlanToolCall: React.FC<ProposePlanToolCallProps> = ({
             </div>
 
             {showRaw ? (
-              <pre className="font-mono text-xs leading-relaxed text-text whitespace-pre-wrap break-words m-0 p-2 bg-code-bg rounded-sm">
+              <pre className="text-text bg-code-bg m-0 rounded-sm p-2 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap">
                 {args.plan}
               </pre>
             ) : (
@@ -199,7 +199,7 @@ export const ProposePlanToolCall: React.FC<ProposePlanToolCallProps> = ({
 
             {status === "completed" && (
               <div
-                className="mt-3 pt-3 text-[11px] text-muted italic leading-normal"
+                className="text-muted mt-3 pt-3 text-[11px] leading-normal italic"
                 style={{
                   borderTop:
                     "1px solid color-mix(in srgb, var(--color-plan-mode), transparent 80%)",