🤖 fix: align TitleBar background with WorkspaceHeader

Changed TitleBar from bg-dark to bg-separator to match WorkspaceHeader
and create visual continuity across the top of the app.

Author: ibetitsmike

src/browser/App.stories.tsx

@@ -38,7 +38,10 @@ function setupMockAPI(options: {
     providers: {
       setProviderConfig: () => Promise.resolve({ success: true, data: undefined }),
       setModels: () => Promise.resolve({ success: true, data: undefined }),
-      getConfig: () => Promise.resolve({} as Record<string, { apiKeySet: boolean; baseUrl?: string; models?: string[] }>),
+      getConfig: () =>
+        Promise.resolve(
+          {} as Record<string, { apiKeySet: boolean; baseUrl?: string; models?: string[] }>
+        ),
       list: () => Promise.resolve([]),
     },
     workspace: {
@@ -558,7 +561,10 @@ export const ActiveWorkspaceWithChat: Story = {
             providers: {
               setProviderConfig: () => Promise.resolve({ success: true, data: undefined }),
               setModels: () => Promise.resolve({ success: true, data: undefined }),
-              getConfig: () => Promise.resolve({} as Record<string, { apiKeySet: boolean; baseUrl?: string; models?: string[] }>),
+              getConfig: () =>
+                Promise.resolve(
+                  {} as Record<string, { apiKeySet: boolean; baseUrl?: string; models?: string[] }>
+                ),
               list: () => Promise.resolve(["anthropic", "openai", "xai"]),
             },
             workspace: {

src/browser/api.ts

@@ -233,8 +233,7 @@ const webApi: IPCApi = {
   providers: {
     setProviderConfig: (provider, keyPath, value) =>
       invokeIPC(IPC_CHANNELS.PROVIDERS_SET_CONFIG, provider, keyPath, value),
-    setModels: (provider, models) =>
-      invokeIPC(IPC_CHANNELS.PROVIDERS_SET_MODELS, provider, models),
+    setModels: (provider, models) => invokeIPC(IPC_CHANNELS.PROVIDERS_SET_MODELS, provider, models),
     getConfig: () => invokeIPC(IPC_CHANNELS.PROVIDERS_GET_CONFIG),
     list: () => invokeIPC(IPC_CHANNELS.PROVIDERS_LIST),
   },

src/browser/components/TitleBar.tsx

@@ -220,7 +220,7 @@ export function TitleBar() {
   const showUpdateIndicator = true;
 
   return (
-    <div className="bg-dark border-border-light font-primary text-muted flex shrink-0 items-center justify-between border-b px-4 py-1 text-[11px] select-none">
+    <div className="bg-separator border-border-light font-primary text-muted flex h-8 shrink-0 items-center justify-between border-b px-4 text-[11px] select-none">
       <div className="mr-4 flex min-w-0 items-center gap-2">
         {showUpdateIndicator && (
           <TooltipWrapper>

src/browser/components/WorkspaceHeader.tsx

@@ -28,7 +28,7 @@ export const WorkspaceHeader: React.FC<WorkspaceHeaderProps> = ({
   }, [workspaceId]);
 
   return (
-    <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="bg-separator border-border-light flex h-8 items-center justify-between border-b px-[15px] [@media(max-width:768px)]:h-auto [@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">
         <WorkspaceStatusDot workspaceId={workspaceId} />
         <GitStatusIndicator

src/common/types/ipc.ts

@@ -248,7 +248,9 @@ export interface IPCApi {
       value: string
     ): Promise<Result<void, string>>;
     setModels(provider: string, models: string[]): Promise<Result<void, string>>;
-    getConfig(): Promise<Record<string, { apiKeySet: boolean; baseUrl?: string; models?: string[] }>>;
+    getConfig(): Promise<
+      Record<string, { apiKeySet: boolean; baseUrl?: string; models?: string[] }>
+    >;
     list(): Promise<string[]>;
   };
   fs?: {

src/node/services/ipcMain.ts

@@ -1539,8 +1539,10 @@ export class IpcMain {
       try {
         const config = this.config.loadProvidersConfig() ?? {};
         // Return a sanitized version (only whether API key is set, not the value)
-        const sanitized: Record<string, { apiKeySet: boolean; baseUrl?: string; models?: string[] }> =
-          {};
+        const sanitized: Record<
+          string,
+          { apiKeySet: boolean; baseUrl?: string; models?: string[] }
+        > = {};
         for (const [provider, providerConfig] of Object.entries(config)) {
           const baseUrl = providerConfig.baseUrl ?? providerConfig.baseURL;
           const models = providerConfig.models;