fix(app): distinguish selected sidebar rows

Give selected rows their own semantic surface so selection remains visible through hover while badges, status rings, and action scrims inherit the correct backdrop.

packages/app/src/styles/theme.ts

@@ -204,17 +204,22 @@ const darkStatusDotColors = {
 };
 
 // Semantic color tokens - Layer-based system
-const lightSemanticColors = {
+const lightSurfaces = {
   // Surfaces (layers) - shifted one step lighter
   surface0: "#ffffff", // App background
   surface1: "#fafafa", // Subtle hover (was zinc-100, now zinc-50)
   surface2: "#f4f4f5", // Elevated: badges, inputs, sheets (was zinc-200, now zinc-100)
   surface3: "#e4e4e7", // Highest elevation (was zinc-300, now zinc-200)
   surface4: "#d4d4d8", // Extra emphasis (was zinc-400, now zinc-300)
+} as const;
+
+const lightSemanticColors = {
+  ...lightSurfaces,
   surfaceDiffEmpty: "#f6f6f6", // Empty side of split diff rows, between surface1 and surface2 and biased toward surface2
-  surfaceSidebar: "#f4f4f5", // Sidebar background (darker than main)
-  surfaceSidebarHover: "#e9e9ec", // Sidebar hover (darker in light mode)
-  surfaceWorkspace: "#ffffff", // Workspace main background
+  surfaceSidebar: lightSurfaces.surface2, // Sidebar background (darker than main)
+  surfaceSidebarHover: lightSurfaces.surface1,
+  surfaceSidebarSelected: lightSurfaces.surface2,
+  surfaceWorkspace: lightSurfaces.surface0, // Workspace main background
 
   // Text
   foreground: "#1a1a1e",
@@ -294,7 +299,6 @@ interface DarkThemeConfig {
   surface4: string;
   surfaceDiffEmpty: string;
   surfaceSidebar: string;
-  surfaceSidebarHover: string;
   foregroundMuted: string;
   foregroundExtraMuted: string;
   border: string;
@@ -333,7 +337,8 @@ function buildDarkSemanticColors(tint: DarkThemeConfig) {
     surface4: tint.surface4,
     surfaceDiffEmpty: tint.surfaceDiffEmpty,
     surfaceSidebar: tint.surfaceSidebar,
-    surfaceSidebarHover: tint.surfaceSidebarHover,
+    surfaceSidebarHover: tint.surface1,
+    surfaceSidebarSelected: tint.surface2,
     surfaceWorkspace: tint.surface1,
 
     foreground: "#fafafa",
@@ -397,7 +402,6 @@ const paseoDarkColors = buildDarkSemanticColors({
   surface4: "#595B5B",
   surfaceDiffEmpty: "#252827",
   surfaceSidebar: "#141716",
-  surfaceSidebarHover: "#1c1f1e",
   foregroundMuted: "#A1A5A4",
   foregroundExtraMuted: "#717574",
   border: "#252B2A",
@@ -418,7 +422,6 @@ const zincDarkColors = buildDarkSemanticColors({
   surface4: "#52525b",
   surfaceDiffEmpty: "#242427",
   surfaceSidebar: "#131316",
-  surfaceSidebarHover: "#1b1b1e",
   foregroundMuted: "#a1a1aa",
   foregroundExtraMuted: "#71717a",
   border: "#27272a",
@@ -440,7 +443,6 @@ const midnightDarkColors = buildDarkSemanticColors({
   surface4: "#535564",
   surfaceDiffEmpty: "#222430",
   surfaceSidebar: "#121420",
-  surfaceSidebarHover: "#1a1c28",
   foregroundMuted: "#9a9db0",
   foregroundExtraMuted: "#6b6e82",
   border: "#242636",
@@ -461,7 +463,6 @@ const claudeDarkColors = buildDarkSemanticColors({
   surface4: "#605d5b",
   surfaceDiffEmpty: "#2a2826",
   surfaceSidebar: "#1a1918",
-  surfaceSidebarHover: "#222120",
   foregroundMuted: "#ada9a5",
   foregroundExtraMuted: "#78746f",
   border: "#2c2a27",
@@ -482,7 +483,6 @@ const ghosttyDarkColors = buildDarkSemanticColors({
   surface4: "#5b6175",
   surfaceDiffEmpty: "#323643",
   surfaceSidebar: "#21252d",
-  surfaceSidebarHover: "#292d36",
   foregroundMuted: "#c8ccd8",
   foregroundExtraMuted: "#a0a4b2",
   border: "#353a47",
@@ -656,8 +656,6 @@ const pureBlackDarkColors = buildDarkSemanticColors({
   surface4: "#2d2d2d",
   surfaceDiffEmpty: "#0c0c0c",
   surfaceSidebar: "#000000",
-  // Selected sidebar rows share this surface with hover, so it must remain visible at rest.
-  surfaceSidebarHover: "#161616",
   foregroundMuted: "#a1a1aa",
   foregroundExtraMuted: "#71717a",
   border: "#1c1c1c",