fix(11): repair broken color patterns from CSS variable migration

- ChannelSidebar: replace inline color-mix style with Tailwind classes for task discussion icons
- MessageItem: replace broken priority config (color-mix inline) with Tailwind utility classes
- MessageItem: replace broken department badge hex-alpha pattern with Tailwind classes
- automation-config: restore ACCENT/LINE as hex values (used in template literal alpha suffixes)
- desktop-shell-service: set nativeTheme.themeSource to sync Windows title bar with app theme

src/main/desktop-shell-service.ts

@@ -8,6 +8,7 @@ import {
   dialog,
   Menu,
   nativeImage,
+  nativeTheme,
   net,
   protocol,
   session,
@@ -220,6 +221,9 @@ export function createDesktopShellService({
       },
     });
 
+    // Sync native theme with app to ensure Windows title bar matches content
+    nativeTheme.themeSource = "light";
+
     if (isDev && devServerUrl) {
       await mainWindow.loadURL(devServerUrl);
     } else {

src/renderer/components/automation/automation-config.ts

@@ -2,8 +2,11 @@ import type { AutomationAction, AutomationStatus, AutomationTrigger, WorkflowSta
 import { ArrowsClockwise, Eye, Funnel, Lightning, Pause, Play, Plus, Robot, Timer, Trash } from "@phosphor-icons/react"
 import { DEPARTMENT_OPTIONS } from "@shared/constants"
 
-export const ACCENT = "var(--primary)"
-export const LINE = "var(--border)"
+// ACCENT/LINE used in template literals for opacity suffixes like `${ACCENT}15`
+// Must be hex values (not CSS vars) so hex alpha notation works.
+// These are the primary/border colors from the OKLCH design tokens converted to hex.
+export const ACCENT = "#343434"
+export const LINE = "#ebebeb"
 
 export const triggerConfig: Record<AutomationTrigger, { label: string; description: string; icon: typeof Lightning }> = {
   task_status_changed: { label: "Task Status Changed", description: "When a task transitions to a new status", icon: ArrowsClockwise },

src/renderer/components/communication/ChannelSidebar.tsx

@@ -148,8 +148,8 @@ export function ChannelSidebar({
                   selectedChannelKey === discussion.key ? "bg-accent" : "hover:bg-muted/50"
                 }`}
               >
-                <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg" style={{ backgroundColor: "color-mix(in oklch, var(--primary) 12%, transparent)" }}>
-                  <Hash size={14} weight={selectedChannelKey === discussion.key ? "fill" : "regular"} style={{ color: "var(--primary)" }} />
+                <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-muted">
+                  <Hash size={14} weight={selectedChannelKey === discussion.key ? "fill" : "regular"} className="text-muted-foreground" />
                 </div>
                 <span className={`min-w-0 flex-1 truncate text-[13px] ${selectedChannelKey === discussion.key ? "font-semibold text-foreground" : "font-medium text-muted-foreground"}`}>
                   {discussion.label}

src/renderer/components/communication/MessageItem.tsx

@@ -13,10 +13,10 @@ import { getAgentInitials, formatMessageTime } from "../../lib/formatters"
 import { DEPARTMENT_COLORS } from "@shared/constants"
 
 
-const priorityConfig: Record<string, { label: string; color: string; bg: string }> = {
-  urgent: { label: "Urgent", color: "var(--destructive)", bg: "color-mix(in oklch, var(--destructive) 15%, transparent)" },
-  normal: { label: "Normal", color: "var(--muted-foreground)", bg: "color-mix(in oklch, var(--muted-foreground) 15%, transparent)" },
-  low: { label: "Low", color: "var(--muted-foreground)", bg: "color-mix(in oklch, var(--muted-foreground) 15%, transparent)" },
+const priorityConfig: Record<string, { label: string; className: string }> = {
+  urgent: { label: "Urgent", className: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400" },
+  normal: { label: "Normal", className: "bg-muted text-muted-foreground" },
+  low: { label: "Low", className: "bg-muted text-muted-foreground" },
 }
 
 function getDepartmentColor(department: DepartmentId | null | undefined): string {
@@ -87,8 +87,7 @@ export const MessageBubble = memo(function MessageBubble({
           ) : null}
           {agent?.department ? (
             <span
-              className="shrink-0 rounded-full px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-[0.08em]"
-              style={{ backgroundColor: `${deptColor}15`, color: deptColor }}
+              className="shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-[0.08em] text-muted-foreground"
             >
               {agent.department.replace("_", " ")}
             </span>
@@ -98,14 +97,10 @@ export const MessageBubble = memo(function MessageBubble({
           </span>
           {message.priority !== "normal" ? (
             <span
-              className="flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-[0.06em]"
-              style={{
-                backgroundColor: priorityConfig[message.priority].bg,
-                color: priorityConfig[message.priority].color,
-              }}
+              className={`flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-[0.06em] ${priorityConfig[message.priority]?.className ?? ""}`}
             >
               {message.priority === "urgent" ? <WarningCircle size={10} weight="fill" /> : null}
-              {priorityConfig[message.priority].label}
+              {priorityConfig[message.priority]?.label}
             </span>
           ) : null}
           {isUnread ? (