feat(gui): pixel-perfect Figma UI redesign - Inline navbar menu with hover dropdowns - New Cortex logo branding - Tab styling with seamless editor fusion - Background color #131217 - Remove footer and empty state cards - Simplified Session.tsx

Author: Factory Bot

cortex-gui/mcp-server/src/index.ts

@@ -380,26 +380,17 @@ function registerTools() {
 
 // Main entry point
 async function main() {
-  try {
-    // Connect to Cortex Desktop socket server
-    console.error("[MCP Server] Connecting to Cortex Desktop...");
-    await socketClient.connect();
-    console.error("[MCP Server] Connected to Cortex Desktop");
-
-    // Register all tools
-    registerTools();
-
-    // Start the MCP server with stdio transport
-    const transport = new StdioServerTransport();
-    await server.connect(transport);
-    console.error("[MCP Server] Cortex Desktop MCP Server running on stdio");
-  } catch (error) {
-    console.error("[MCP Server] Fatal error:", error);
-    process.exit(1);
-  }
+  // Register all tools FIRST (before connecting transport)
+  registerTools();
+
+  // Create and connect stdio transport
+  const transport = new StdioServerTransport();
+  await server.connect(transport);
+
+  // Connect to Cortex Desktop socket in background (don't block MCP initialization)
+  socketClient.connect().catch(() => {
+    // Silent fail - Cortex Desktop may not be running
+  });
 }
 
-main().catch((error) => {
-  console.error("[MCP Server] Fatal error:", error);
-  process.exit(1);
-});
+main();

cortex-gui/src-tauri/src/window.rs

@@ -308,7 +308,7 @@ pub async fn create_new_window(app: AppHandle, path: Option<String>) -> Result<(
         url.push_str(&format!("&project={}", url_encode(&normalized)));
     }
 
-    let window = WebviewWindowBuilder::new(&app, label, WebviewUrl::App(url.into()))
+    let window = WebviewWindowBuilder::new(&app, label.clone(), WebviewUrl::App(url.into()))
         .title("Cortex")
         .inner_size(1200.0, 800.0)
         .decorations(false) // Custom title bar is used
@@ -320,6 +320,22 @@ pub async fn create_new_window(app: AppHandle, path: Option<String>) -> Result<(
     // Apply vibrancy effect for glassmorphism
     apply_window_vibrancy(&window);
 
+    // Fallback: show window after 3 seconds if frontend hasn't signaled ready
+    // This prevents invisible windows if frontend fails to load
+    let window_clone = window.clone();
+    let label_clone = label.clone();
+    tauri::async_runtime::spawn(async move {
+        tokio::time::sleep(std::time::Duration::from_secs(3)).await;
+        // Only show if window is still not visible
+        if let Ok(visible) = window_clone.is_visible() {
+            if !visible {
+                info!("Fallback: showing window {} after timeout", label_clone);
+                let _ = window_clone.show();
+                let _ = window_clone.set_focus();
+            }
+        }
+    });
+
     Ok(())
 }
 

cortex-gui/src/components/editor/CodeEditor.tsx

@@ -5932,7 +5932,8 @@ const commandMap: Record<string, string> = {
     <div 
       class="flex-1 flex flex-col overflow-hidden relative transition-all duration-300"
       style={{ 
-        background: "var(--jb-canvas)",
+        // Figma design: Editor background must match active tab for seamless fusion
+        background: "var(--figma-bg-secondary, #1A1A1A)",
         "box-shadow": agentActive() ? "inset 0 0 0 2px #f97316" : "none", // Orange border when agent is active
       }}
       onDragEnter={handleDragEnter}

cortex-gui/src/components/editor/EditorGridPanel.tsx

@@ -21,7 +21,6 @@ import {
 import { EditorGrid, type EditorGridState, type DropPosition } from "./EditorGrid";
 import { useEditor } from "@/context/EditorContext";
 import { CodeEditor } from "./CodeEditor";
-import { Breadcrumbs } from "./Breadcrumbs";
 import { ImageViewer, isImageFile, SVGPreview, isSVGFile } from "../viewers";
 import { Card, Text } from "@/components/ui";
 import { Icon } from "../ui/Icon";
@@ -188,9 +187,6 @@ function EditorCellRenderer(props: EditorCellRendererProps) {
             "outline-offset": "-2px",
           }}
         >
-          {/* Breadcrumbs */}
-          <Breadcrumbs file={fileAccessor()} groupId={props.cellId} />
-
           {/* Content based on file type */}
           <Show
             when={isSvg()}

cortex-gui/src/components/editor/MultiBuffer.tsx

@@ -2,7 +2,6 @@ import { Show, createSignal, createMemo, createEffect, onMount, onCleanup, JSX,
 import { useEditor, SplitDirection, OpenFile, EditorGroup } from "@/context/EditorContext";
 import { CodeEditor } from "./CodeEditor";
 import { TabBar } from "./TabBar";
-import { Breadcrumbs } from "./Breadcrumbs";
 import { ImageViewer, isImageFile, SVGPreview, isSVGFile } from "../viewers";
 import { Icon } from "../ui/Icon";
 import { Card, Text } from "@/components/ui";
@@ -101,7 +100,8 @@ function EditorGroupPanel(props: EditorGroupPanelProps) {
       style={{
         outline: props.isActive ? "2px solid var(--accent)" : "none",
         "outline-offset": "-2px",
-        background: "var(--background-base)",
+        // Figma design: Container background for tab bar area
+        background: "var(--figma-bg-primary, #131217)",
       }}
       onClick={props.onActivate}
       onDragOver={handleDragOver}
@@ -241,8 +241,6 @@ function FileViewer(props: FileViewerProps) {
           when={isNonSvgImage()}
           fallback={
             <div class="flex-1 flex flex-col min-h-0 overflow-hidden">
-              {/* Breadcrumbs navigation - positioned below tabs, above editor */}
-              <Breadcrumbs file={props.file} groupId={props.groupId} />
               <CodeEditor file={props.file} groupId={props.groupId} />
             </div>
           }

cortex-gui/src/components/editor/TabBar.tsx

@@ -181,6 +181,8 @@ interface TabProps {
   dropPosition?: "left" | "right" | null;
   isFirstTab?: boolean;
   isLastTab?: boolean;
+  isBeforeActive?: boolean;
+  isAfterActive?: boolean;
   /** Tab decorations from diagnostics/git */
   decoration?: TabDecoration;
 }
@@ -251,48 +253,66 @@ function Tab(props: TabProps) {
     if (props.dropPosition === "right") classes.push("drop-target-right");
     if (props.isFirstTab) classes.push("first-tab");
     if (props.isLastTab) classes.push("last-tab");
+    if (props.isBeforeActive) classes.push("before-active");
+    if (props.isAfterActive) classes.push("after-active");
 
     // Icon class for padding adjustment
     classes.push("has-icon", "tab-actions-right");
 
     return classes.join(" ");
   });
 
-// Tab dimensions based on design specs - Trae Dark Minimal Floating Card Style
+// Tab dimensions based on Figma design specs
+  // Active tab: #1A1A1A background, merged with editor (no bottom border)
+  // Inactive tabs: transparent background, muted text color
   const getTabStyle = () => {
     const baseStyle: Record<string, string> = {
       "box-sizing": "border-box",
-      padding: "0 14px",
+      padding: "0 16px",
       "outline-offset": "-2px",
-      border: "none", // NO borders in Trae style
+      border: "none",
+      display: "flex",
+      "align-items": "center",
+      gap: "8px",
     };
 
     // Apply decoration color override
     const dec = decoration();
     const decorationColor = dec.color;
 
-    // Trae Dark Minimal: Active tab merges with editor
-    // JetBrains compact tabs: 28px height
+    // Figma design: Active tab merges seamlessly with editor (#1A1A1A)
     if (props.isActive) {
-      baseStyle.height = "28px";
-      // Rounded top corners (6px), flat bottom to merge with editor
-      baseStyle["border-radius"] = "6px 6px 0 0";
-      baseStyle.background = tokens.colors.surface.canvas;
-      baseStyle.color = decorationColor ?? tokens.colors.text.primary;
-      // Subtle shadow for floating card effect
-      baseStyle["box-shadow"] = "0 -1px 3px var(--jb-shadow-color, rgba(0, 0, 0, 0.15))";
+      baseStyle.height = "100%";
+      baseStyle["border-radius"] = "0";
+      // Same background as editor panel - seamless merge
+      baseStyle.background = "var(--figma-bg-secondary, #1A1A1A)";
+      baseStyle.color = decorationColor ?? "var(--figma-text-primary, #FFFFFF)";
+      baseStyle["box-shadow"] = "none";
       baseStyle["z-index"] = "10";
+      // Active tab: NO border, merges with editor
+      baseStyle.border = "none";
     } else {
-      // Inactive tabs are same height with muted text
-      baseStyle.height = "28px";
-      baseStyle["border-radius"] = "4px 4px 0 0";
-      baseStyle.background = isHovered() ? tokens.colors.interactive.hover : "transparent";
-      // Apply decoration color or default colors
+      // Inactive tabs: #131217 background, muted text
+      baseStyle.height = "100%";
+      baseStyle["border-radius"] = "0";
+      baseStyle.background = isHovered() 
+        ? "rgba(255, 255, 255, 0.06)" 
+        : "#131217";
+      // Figma: subtle border - only right border to avoid double borders
+      baseStyle["border-top"] = "1px solid rgba(255, 255, 255, 0.15)";
+      baseStyle["border-bottom"] = "1px solid rgba(255, 255, 255, 0.15)";
+      baseStyle["border-right"] = "1px solid rgba(255, 255, 255, 0.15)";
+      baseStyle["border-left"] = "none";
       if (decorationColor) {
         baseStyle.color = decorationColor;
       } else {
-        baseStyle.color = isHovered() ? tokens.colors.text.primary : tokens.colors.text.muted;
+        // Figma design: inactive tabs have more muted text (#666 vs #808080)
+        baseStyle.color = isHovered() 
+          ? "var(--figma-text-primary, #FFFFFF)" 
+          : "rgba(255, 255, 255, 0.8)";
       }
+      // Inactive tabs slightly dimmed per Figma design
+      baseStyle.opacity = isHovered() ? "1" : "0.85";
     }
 
     // Sticky compact = 38px × 38px
@@ -311,7 +331,7 @@ function Tab(props: TabProps) {
     // Fit mode = minimum space needed (80px min, 200px max)
     else if (sizingMode() === "fit") {
       baseStyle["min-width"] = "80px";
-      baseStyle["max-width"] = "200px";
+      baseStyle["max-width"] = "fit-content";
       baseStyle["flex-shrink"] = "0";
       baseStyle["flex-grow"] = "0";
       baseStyle.width = "auto";
@@ -432,12 +452,10 @@ function Tab(props: TabProps) {
 
       {/* Tab content - 8px gap for proper icon-to-text spacing */}
       <div 
-        class="tab-label flex items-center min-w-0 w-full"
+        class="tab-label flex items-center w-full"
         style={{ 
           "line-height": "35px",
-          flex: "1",
           "white-space": "nowrap",
-          overflow: "hidden",
           gap: "8px", // Design spec: 8px spacing from text
         }}
       >
@@ -456,7 +474,7 @@ function Tab(props: TabProps) {
 
         {/* File icon - 16px with 8px spacing (hidden in compact pinned mode) */}
         <Show when={!(props.isPinned && stickyMode() === "compact")}>
-          <FileIcon name={props.file.name} size={16} />
+          <FileIcon name={props.file.name.split(/[/\\\\]/).pop() || props.file.name} size={16} />
         </Show>
 
         {/* Pin icon indicator for pinned tabs (shown after file icon in non-compact mode) */}
@@ -477,20 +495,22 @@ function Tab(props: TabProps) {
         {/* Preview tabs have italic title, deleted files have strikethrough */}
         <Show when={!(props.isPinned && stickyMode() === "compact")}>
           <span 
-            class="truncate flex-1"
+            
             style={{ 
               "font-size": "var(--jb-font-size-sm)",
               "font-style": (props.isPreview || decoration().italic) ? "italic" : "normal",
               "font-weight": props.isActive ? "500" : "400",
               "text-decoration": decoration().strikethrough ? "line-through" : "none",
-              // Use decoration color if available, otherwise default colors
+              // Full filename display with ellipsis for very long names
               color: decoration().color ?? (props.isActive 
                 ? tokens.colors.text.primary
                 : tokens.colors.text.muted),
               transition: "color 150ms ease-out, font-style 150ms ease-out, text-decoration 150ms ease-out",
+              
             }}
+            title={props.file.name.split(/[/\\\\]/).pop() || props.file.name}
           >
-            {props.file.name}
+            {props.file.name.split(/[/\\\\]/).pop() || props.file.name}
           </span>
         </Show>
 
@@ -955,16 +975,16 @@ export function TabBar(props: TabBarProps) {
 
   return (
     <div 
-      class={`tabs-and-actions-container relative flex items-end shrink-0 ${wrapTabs() ? "wrapping" : ""}`}
+      class={`tabs-and-actions-container relative flex items-stretch shrink-0 ${wrapTabs() ? "wrapping" : ""}`}
       style={{ 
-        // JetBrains compact: 28px tab bar height
-        height: wrapTabs() ? "auto" : "28px",
-        "min-height": "28px",
-        // Inherit from parent card for consistent surface color
-        background: "inherit",
+        // Figma design: 47px tab bar height
+        height: wrapTabs() ? "auto" : "36px",
+        "min-height": "36px",
+        // Figma: Dark background for tab bar, active tab merges with editor
+        background: "var(--figma-bg-primary, #131217)",
         border: "none",
         // Minimal padding
-        padding: "0 2px",
+        padding: "0",
       }}
     >
       {/* Scroll left button - hidden when tab wrapping is enabled */}
@@ -973,8 +993,7 @@ export function TabBar(props: TabBarProps) {
           onClick={scrollLeft}
           class="w-6 flex items-center justify-center transition-colors z-10 rounded"
           style={{ 
-            height: "28px",
-            color: tokens.colors.text.muted,
+            height: "100%", color: tokens.colors.text.muted,
             border: "none",
             "margin-right": "2px",
           }}
@@ -989,7 +1008,7 @@ export function TabBar(props: TabBarProps) {
         class={`tabs-container flex-1 flex items-stretch no-scrollbar ${wrapTabs() ? "wrapping" : "overflow-x-auto"}`}
         style={{
           // JetBrains compact: 28px height
-          height: wrapTabs() ? "auto" : "28px",
+          height: wrapTabs() ? "auto" : "36px",
           "scrollbar-width": "none", // Firefox
           ...(wrapTabs() ? { "flex-wrap": "wrap" } : {}),
         }}
@@ -1003,9 +1022,18 @@ export function TabBar(props: TabBarProps) {
             const isLast = index() === sortedFiles().length - 1;
             const isPinned = isTabPinned(file.id);
 
+            // Check if this tab is adjacent to the active tab
+            const files = sortedFiles();
+            const currentActiveId = activeFileId();
+            const activeIdx = files.findIndex(f => f.id === currentActiveId);
+            const currentIdx = index();
+            const isBeforeActive = currentIdx === activeIdx - 1 && activeIdx > 0;
+            const isAfterActive = currentIdx === activeIdx + 1 && activeIdx < files.length - 1;
+            
             return (
               <div
                 ref={tabRef}
+                style={{ display: "contents" }}
                 onDragOver={(e) => tabRef && handleDragOver(e, file.id, tabRef)}
                 onDragLeave={handleDragLeave}
                 onDrop={(e) => handleDrop(e, file.id)}
@@ -1041,6 +1069,8 @@ export function TabBar(props: TabBarProps) {
                   dropPosition={state.overId === file.id ? state.position : null}
                   isFirstTab={isFirst}
                   isLastTab={isLast}
+                  isBeforeActive={isBeforeActive}
+                  isAfterActive={isAfterActive}
                 />
               </div>
             );
@@ -1061,8 +1091,7 @@ export function TabBar(props: TabBarProps) {
           onClick={scrollRight}
           class="w-6 flex items-center justify-center transition-colors z-10 rounded"
           style={{ 
-            height: "28px",
-            color: tokens.colors.text.muted,
+            height: "100%", color: tokens.colors.text.muted,
             border: "none",
             "margin-left": "2px",
           }}
@@ -1085,8 +1114,7 @@ export function TabBar(props: TabBarProps) {
           }}
           class="w-7 flex items-center justify-center transition-colors rounded"
           style={{ 
-            height: "28px",
-            color: tokens.colors.text.muted,
+            height: "100%", color: tokens.colors.text.muted,
             border: "none",
             "margin-left": tokens.spacing.sm,
           }}
@@ -1103,8 +1131,7 @@ export function TabBar(props: TabBarProps) {
             onClick={() => setShowOverflow(!showOverflow())}
             class="w-7 flex items-center justify-center transition-colors rounded"
             style={{ 
-              height: "28px",
-              color: tokens.colors.text.muted,
+              height: "100%", color: tokens.colors.text.muted,
               border: "none",
             }}
             title="Show all tabs"
@@ -1132,8 +1159,7 @@ export function TabBar(props: TabBarProps) {
           }}
           class="w-7 flex items-center justify-center transition-colors rounded"
           style={{ 
-            height: "28px",
-            color: tokens.colors.text.muted,
+            height: "100%", color: tokens.colors.text.muted,
             border: "none",
           }}
           title="Close split"