diff --git a/.env.example b/.env.example
index dda41bee262..17504880b7d 100644
--- a/.env.example
+++ b/.env.example
@@ -8,7 +8,3 @@ STUB_API_KEY=
 # Vite dev server port for Electron renderer process
 # Default: 4927. Auto-increments when creating new worktrees to avoid port conflicts
 VITE_DEV_SERVER_PORT=4927
-
-# Enable new UI layout (workspace tabs at top, worktree sidebar)
-# Set to 'true' to enable the new mock UI for visual iteration
-ENABLE_NEW_UI=false
diff --git a/apps/desktop/electron.vite.config.ts b/apps/desktop/electron.vite.config.ts
index f45a88842bf..b782939ab74 100644
--- a/apps/desktop/electron.vite.config.ts
+++ b/apps/desktop/electron.vite.config.ts
@@ -49,9 +49,6 @@ export default defineConfig({
 		define: {
 			"process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
 			"process.platform": JSON.stringify(process.platform),
-			"import.meta.env.ENABLE_NEW_UI": JSON.stringify(
-				process.env.ENABLE_NEW_UI || "false",
-			),
 			"import.meta.env.DEV_SERVER_PORT": JSON.stringify(getPortSync()),
 		},
 
diff --git a/apps/desktop/src/main/lib/tmux-manager.ts b/apps/desktop/src/main/lib/tmux-manager.ts
index 8e2aaf2a3e2..e6b82cb3927 100644
--- a/apps/desktop/src/main/lib/tmux-manager.ts
+++ b/apps/desktop/src/main/lib/tmux-manager.ts
@@ -1,9 +1,9 @@
+import { spawnSync } from "node:child_process";
 import { randomUUID } from "node:crypto";
 import { existsSync, readFileSync, writeFileSync } from "node:fs";
 import { mkdir } from "node:fs/promises";
 import os from "node:os";
 import { dirname, join } from "node:path";
-import { spawnSync } from "node:child_process";
 import type { BrowserWindow } from "electron";
 import { app } from "electron";
 import * as pty from "node-pty";
@@ -231,7 +231,9 @@ class TmuxManager {
 
 			// Resize the tmux window BEFORE attaching to ensure proper dimensions
 			// This is crucial for reconnection after restart
-			console.log(`[TmuxManager] Resizing tmux window ${sid} to ${cols}x${rows} before attach`);
+			console.log(
+				`[TmuxManager] Resizing tmux window ${sid} to ${cols}x${rows} before attach`,
+			);
 			const resizeResult = spawnSync("tmux", [
 				"-L",
 				this.TMUX_SOCKET,
@@ -253,13 +255,7 @@ class TmuxManager {
 
 			// Force tmux to refresh and reflow content at new size
 			// This ensures the pane content is properly wrapped for the new dimensions
-			spawnSync("tmux", [
-				"-L",
-				this.TMUX_SOCKET,
-				"refresh-client",
-				"-t",
-				sid,
-			]);
+			spawnSync("tmux", ["-L", this.TMUX_SOCKET, "refresh-client", "-t", sid]);
 
 			// Attach to the session via node-pty
 			console.log(`[TmuxManager] Attaching to session: ${sid}`);
@@ -289,10 +285,6 @@ class TmuxManager {
 
 			// Set up data listener
 			ptyProcess.onData((data: string) => {
-				// Debug: log what's coming from PTY
-				if (data.includes("1;2c") || data.includes("0;276")) {
-					console.log(`[TmuxManager] PTY output from ${sid}:`, JSON.stringify(data), `(length: ${data.length})`);
-				}
 				this.addTerminalMessage(sid, data);
 			});
 
@@ -445,7 +437,6 @@ class TmuxManager {
 			const session = this.sessions.get(sid);
 			if (session?.pty) {
 				// Debug: log what's being written
-				console.log(`[TmuxManager] Writing to ${sid}:`, JSON.stringify(data), `(length: ${data.length})`);
 				session.pty.write(data);
 				return true;
 			}
@@ -561,11 +552,8 @@ class TmuxManager {
 
 		// Return in-memory history if available
 		if (session.outputHistory.length > 0) {
-			console.log(`[TmuxManager] Returning ${session.outputHistory.length} bytes of cached history for ${sid}`);
 			return session.outputHistory;
 		}
-
-		console.log(`[TmuxManager] No cached history for ${sid}, tmux will send content on attach`);
 		return undefined;
 	}
 
@@ -631,9 +619,7 @@ class TmuxManager {
 				"utf-8",
 			);
 
-			console.log(
-				`[TmuxManager] Saved ${metadata.length} sessions to disk`,
-			);
+			console.log(`[TmuxManager] Saved ${metadata.length} sessions to disk`);
 		} catch (error) {
 			console.error("[TmuxManager] Failed to save sessions to disk:", error);
 		}
diff --git a/apps/desktop/src/renderer/screens/main/MainScreen.tsx b/apps/desktop/src/renderer/screens/main/MainScreen.tsx
index 9e60ff27fb4..766661d1e72 100644
--- a/apps/desktop/src/renderer/screens/main/MainScreen.tsx
+++ b/apps/desktop/src/renderer/screens/main/MainScreen.tsx
@@ -53,9 +53,8 @@ function DroppableMainContent({
 	return (
 		<div
 			ref={setNodeRef}
-			className={`flex-1 overflow-hidden m-1 rounded-lg relative ${
-				isOver ? "ring-2 ring-blue-500 ring-inset" : ""
-			}`}
+			className={`flex-1 overflow-hidden m-1 rounded-lg relative ${isOver ? "ring-2 ring-blue-500 ring-inset" : ""
+				}`}
 		>
 			{children}
 			{isOver && (
@@ -70,14 +69,11 @@ function DroppableMainContent({
 }
 
 export function MainScreen() {
-	// Check if new UI is enabled
-	const enableNewUI = import.meta.env.ENABLE_NEW_UI === "true";
-
-	// If new UI is enabled, render the new layout
-	if (enableNewUI) {
-		return <NewLayoutMain />;
-	}
+	// Use the new layout by default
+	return <NewLayoutMain />;
+}
 
+export function OldMainScreen() {
 	// Otherwise, render the original layout
 	const [isSidebarOpen, setIsSidebarOpen] = useState(true);
 	const [showSidebarOverlay, setShowSidebarOverlay] = useState(false);
@@ -1687,18 +1683,16 @@ export function MainScreen() {
 				)}
 
 				{/* Sidebar overlay when hidden and hovering */}
-				{!isSidebarOpen && showSidebarOverlay && workspaces && (
+				{!isSidebarOpen && showSidebarOverlay && currentWorkspace && (
 					<div
 						className="fixed left-0 top-0 bottom-0 w-80 z-40 animate-in slide-in-from-left duration-200"
 						onMouseLeave={() => setShowSidebarOverlay(false)}
 					>
 						<div className="h-full border-r border-neutral-800 bg-neutral-950/95 backdrop-blur-sm">
 							<Sidebar
-								workspaces={workspaces}
 								currentWorkspace={currentWorkspace}
 								onTabSelect={handleTabSelect}
 								onWorktreeCreated={handleWorktreeCreated}
-								onWorkspaceSelect={handleWorkspaceSelect}
 								onUpdateWorktree={handleUpdateWorktree}
 								selectedTabId={selectedTabId ?? undefined}
 								onCollapse={() => {
@@ -1723,13 +1717,11 @@ export function MainScreen() {
 							onCollapse={() => setIsSidebarOpen(false)}
 							onExpand={() => setIsSidebarOpen(true)}
 						>
-							{isSidebarOpen && workspaces && (
+							{isSidebarOpen && currentWorkspace && (
 								<Sidebar
-									workspaces={workspaces}
 									currentWorkspace={currentWorkspace}
 									onTabSelect={handleTabSelect}
 									onWorktreeCreated={handleWorktreeCreated}
-									onWorkspaceSelect={handleWorkspaceSelect}
 									onUpdateWorktree={handleUpdateWorktree}
 									selectedTabId={selectedTabId ?? undefined}
 									onCollapse={() => {
@@ -1756,16 +1748,14 @@ export function MainScreen() {
 											panel.expand();
 										}
 									}}
-									workspaceName={currentWorkspace?.name}
-									currentBranch={currentWorkspace?.branch}
 								/>
 
 								{/* Content Area */}
 								<DroppableMainContent isOver={isOverMainContent}>
 									{showDiffView &&
-									diffWorktreeId &&
-									diffWorktree &&
-									currentWorkspace ? (
+										diffWorktreeId &&
+										diffWorktree &&
+										currentWorkspace ? (
 										// Show diff view
 										<div className="w-full h-full">
 											<DiffTab
diff --git a/apps/desktop/src/renderer/screens/main/components/MainContent/TabContent.tsx b/apps/desktop/src/renderer/screens/main/components/MainContent/TabContent.tsx
index 0b45377a395..4f6364a8a82 100644
--- a/apps/desktop/src/renderer/screens/main/components/MainContent/TabContent.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/MainContent/TabContent.tsx
@@ -17,6 +17,7 @@ interface TabContentProps {
 	onTabFocus: (tabId: string) => void;
 	workspaceName?: string;
 	mainBranch?: string;
+	isVisibleInMosaic?: boolean; // Whether this tab is visible in a mosaic layout
 }
 
 /**
@@ -39,6 +40,7 @@ export default function TabContent({
 	onTabFocus,
 	workspaceName,
 	mainBranch,
+	isVisibleInMosaic = false,
 }: TabContentProps) {
 	const handleFocus = () => {
 		onTabFocus(tab.id);
@@ -71,6 +73,7 @@ export default function TabContent({
 					groupTabId={groupTabId}
 					selectedTabId={selectedTabId}
 					onFocus={handleFocus}
+					isVisibleInMosaic={isVisibleInMosaic}
 				/>
 			);
 
@@ -165,6 +168,7 @@ interface TerminalTabContentProps {
 	groupTabId: string; // ID of the parent group tab
 	selectedTabId?: string; // Currently selected tab ID
 	onFocus: () => void;
+	isVisibleInMosaic?: boolean; // Whether this tab is visible in a mosaic layout
 }
 
 function TerminalTabContent({
@@ -175,10 +179,13 @@ function TerminalTabContent({
 	groupTabId,
 	selectedTabId,
 	onFocus,
+	isVisibleInMosaic = false,
 }: TerminalTabContentProps) {
 	const terminalId = tab.id;
 	const terminalCreatedRef = useRef(false);
 	const isSelected = selectedTabId === tab.id;
+	// Terminal should be visible if it's either selected OR visible in a mosaic layout
+	const isVisible = isSelected || isVisibleInMosaic;
 
 	// Terminal creation and lifecycle
 	// NOTE: Actual terminal-create is now deferred to the Terminal component
@@ -234,7 +241,7 @@ function TerminalTabContent({
 			<Terminal
 				key={terminalId}
 				terminalId={terminalId}
-				hidden={!isSelected}
+				hidden={!isVisible}
 				onFocus={onFocus}
 				cwd={terminalCwd}
 			/>
diff --git a/apps/desktop/src/renderer/screens/main/components/MainContent/TabGroup.tsx b/apps/desktop/src/renderer/screens/main/components/MainContent/TabGroup.tsx
index e530b87932a..16db9e3e233 100644
--- a/apps/desktop/src/renderer/screens/main/components/MainContent/TabGroup.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/MainContent/TabGroup.tsx
@@ -193,6 +193,7 @@ export default function TabGroup({
 							onTabFocus={onTabFocus}
 							workspaceName={workspaceName}
 							mainBranch={mainBranch}
+							isVisibleInMosaic={true}
 						/>
 					</div>
 				</MosaicWindow>
@@ -259,16 +260,20 @@ export default function TabGroup({
 				.mosaic-theme-dark .mosaic-window {
 					background: #1a1a1a;
 					border: 1px solid #333;
+					outline: none;
+					transition: outline 0.15s ease;
 				}
 				.mosaic-theme-dark .mosaic-window .mosaic-window-toolbar {
 					background: #262626;
 					border-bottom: 1px solid #333;
 					height: 32px;
 					padding: 0 8px;
+					transition: background-color 0.15s ease;
 				}
 				.mosaic-theme-dark .mosaic-window .mosaic-window-title {
 					color: #e5e5e5;
 					font-size: 12px;
+					transition: color 0.15s ease;
 				}
 				.mosaic-theme-dark .mosaic-window-body {
 					background: #1a1a1a;
@@ -279,9 +284,8 @@ export default function TabGroup({
 				.mosaic-theme-dark .mosaic-split:hover {
 					background: #444;
 				}
-				.active-mosaic-window .mosaic-window {
-					border: 1px solid #3b82f6 !important;
-					box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
+				.active-mosaic-window .mosaic-window-toolbar {
+					background: #3a3a3a !important;
 				}
 			`}</style>
 		</div>
diff --git a/apps/desktop/src/renderer/screens/main/components/NewLayout/NewLayoutMain.tsx b/apps/desktop/src/renderer/screens/main/components/NewLayout/NewLayoutMain.tsx
index 7ee9236e4d4..77059b33b1d 100644
--- a/apps/desktop/src/renderer/screens/main/components/NewLayout/NewLayoutMain.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/NewLayout/NewLayoutMain.tsx
@@ -12,11 +12,11 @@ import { Background } from "../Background";
 import TabContent from "../MainContent/TabContent";
 import TabGroup from "../MainContent/TabGroup";
 import { PlaceholderState } from "../PlaceholderState";
-import { Sidebar } from "../Sidebar";
 import { DiffTab } from "../TabContent/components/DiffTab";
 import { AddTaskModal } from "./AddTaskModal";
 import { TaskTabs } from "./TaskTabs";
 import { WorktreeTabView } from "./WorktreeTabView";
+import { WorktreeTabsSidebar } from "./WorktreeTabsSidebar";
 
 // Mock tasks data - TODO: Replace with actual task data from backend
 const MOCK_TASKS = [
@@ -551,6 +551,13 @@ export const NewLayoutMain: React.FC = () => {
 						if (activeSelection?.worktreeId && activeSelection?.tabId) {
 							setSelectedWorktreeId(activeSelection.worktreeId);
 							setSelectedTabId(activeSelection.tabId);
+						} else if (workspace.worktrees && workspace.worktrees.length > 0) {
+							// Auto-select first worktree and its first tab if no selection exists
+							const firstWorktree = workspace.worktrees[0];
+							setSelectedWorktreeId(firstWorktree.id);
+							if (firstWorktree.tabs && firstWorktree.tabs.length > 0) {
+								setSelectedTabId(firstWorktree.tabs[0].id);
+							}
 						}
 					}
 				}
@@ -585,6 +592,15 @@ export const NewLayoutMain: React.FC = () => {
 			);
 			if (refreshedWorkspace) {
 				setCurrentWorkspace(refreshedWorkspace);
+
+				// Auto-select first worktree and tab if available
+				if (refreshedWorkspace.worktrees && refreshedWorkspace.worktrees.length > 0) {
+					const firstWorktree = refreshedWorkspace.worktrees[0];
+					setSelectedWorktreeId(firstWorktree.id);
+					if (firstWorktree.tabs && firstWorktree.tabs.length > 0) {
+						setSelectedTabId(firstWorktree.tabs[0].id);
+					}
+				}
 			}
 		};
 
@@ -612,18 +628,61 @@ export const NewLayoutMain: React.FC = () => {
 					onMouseLeave={() => setShowSidebarOverlay(false)}
 				>
 					<div className="h-full border-r border-neutral-800 bg-neutral-950/95 backdrop-blur-sm">
-						<Sidebar
-							workspaces={workspaces}
-							currentWorkspace={currentWorkspace}
-							onTabSelect={handleTabSelect}
-							onWorktreeCreated={handleWorktreeCreated}
-							onWorkspaceSelect={handleWorkspaceSelect}
-							onUpdateWorktree={handleUpdateWorktree}
-							selectedTabId={selectedTabId ?? undefined}
-							onCollapse={() => {
+						<WorktreeTabsSidebar
+							worktree={selectedWorktree || null}
+							selectedTabId={selectedTabId}
+							onTabSelect={(tabId) => {
+								if (selectedWorktreeId) {
+									handleTabSelect(selectedWorktreeId, tabId);
+								}
 								setShowSidebarOverlay(false);
 							}}
-							onShowDiff={handleShowDiff}
+							onTabClose={async (tabId) => {
+								if (!currentWorkspace || !selectedWorktreeId) return;
+
+								const result = await window.ipcRenderer.invoke("tab-delete", {
+									workspaceId: currentWorkspace.id,
+									worktreeId: selectedWorktreeId,
+									tabId,
+								});
+
+								if (result.success) {
+									await handleWorktreeCreated();
+								}
+							}}
+							onCreateTerminal={async () => {
+								if (!currentWorkspace || !selectedWorktreeId) return;
+
+								const result = await window.ipcRenderer.invoke("tab-create", {
+									workspaceId: currentWorkspace.id,
+									worktreeId: selectedWorktreeId,
+									name: "Terminal",
+									type: "terminal",
+								});
+
+								if (result.success && result.tab) {
+									handleTabSelect(selectedWorktreeId, result.tab.id);
+									await handleWorktreeCreated();
+								}
+								setShowSidebarOverlay(false);
+							}}
+							onCreatePreview={async () => {
+								if (!currentWorkspace || !selectedWorktreeId) return;
+
+								const result = await window.ipcRenderer.invoke("tab-create", {
+									workspaceId: currentWorkspace.id,
+									worktreeId: selectedWorktreeId,
+									name: "Preview",
+									type: "preview",
+								});
+
+								if (result.success && result.tab) {
+									handleTabSelect(selectedWorktreeId, result.tab.id);
+									await handleWorktreeCreated();
+								}
+								setShowSidebarOverlay(false);
+							}}
+							workspaceId={currentWorkspace?.id || null}
 						/>
 					</div>
 				</div>
@@ -631,15 +690,21 @@ export const NewLayoutMain: React.FC = () => {
 
 			<AppFrame>
 				<div className="flex flex-col h-full w-full">
-					{/* Task tabs at the top */}
+					{/* Worktree tabs at the top */}
 					<TaskTabs
 						onCollapseSidebar={handleCollapseSidebar}
 						onExpandSidebar={handleExpandSidebar}
 						isSidebarOpen={isSidebarOpen}
-						onAddTask={handleOpenAddTaskModal}
-						activeTaskId={activeTaskId}
-						onActiveTaskChange={setActiveTaskId}
-						openTasks={openTasks}
+						worktrees={currentWorkspace?.worktrees || []}
+						selectedWorktreeId={selectedWorktreeId}
+						onWorktreeSelect={(worktreeId) => {
+							setSelectedWorktreeId(worktreeId);
+							// Select first tab in the worktree
+							const worktree = currentWorkspace?.worktrees?.find(wt => wt.id === worktreeId);
+							if (worktree && worktree.tabs && worktree.tabs.length > 0) {
+								handleTabSelect(worktreeId, worktree.tabs[0].id);
+							}
+						}}
 					/>
 
 					{/* Main content area with resizable sidebar */}
@@ -658,22 +723,59 @@ export const NewLayoutMain: React.FC = () => {
 								onCollapse={() => setIsSidebarOpen(false)}
 								onExpand={() => setIsSidebarOpen(true)}
 							>
-								{isSidebarOpen && workspaces && (
-									<Sidebar
-										workspaces={workspaces}
-										currentWorkspace={currentWorkspace}
-										onTabSelect={handleTabSelect}
-										onWorktreeCreated={handleWorktreeCreated}
-										onWorkspaceSelect={handleWorkspaceSelect}
-										onUpdateWorktree={handleUpdateWorktree}
-										selectedTabId={selectedTabId ?? undefined}
-										onCollapse={() => {
-											const panel = sidebarPanelRef.current;
-											if (panel && !panel.isCollapsed()) {
-												panel.collapse();
+								{isSidebarOpen && (
+									<WorktreeTabsSidebar
+										worktree={selectedWorktree || null}
+										selectedTabId={selectedTabId}
+										onTabSelect={(tabId) => {
+											if (selectedWorktreeId) {
+												handleTabSelect(selectedWorktreeId, tabId);
+											}
+										}}
+										onTabClose={async (tabId) => {
+											if (!currentWorkspace || !selectedWorktreeId) return;
+
+											const result = await window.ipcRenderer.invoke("tab-delete", {
+												workspaceId: currentWorkspace.id,
+												worktreeId: selectedWorktreeId,
+												tabId,
+											});
+
+											if (result.success) {
+												await handleWorktreeCreated();
+											}
+										}}
+										onCreateTerminal={async () => {
+											if (!currentWorkspace || !selectedWorktreeId) return;
+
+											const result = await window.ipcRenderer.invoke("tab-create", {
+												workspaceId: currentWorkspace.id,
+												worktreeId: selectedWorktreeId,
+												name: "Terminal",
+												type: "terminal",
+											});
+
+											if (result.success && result.tab) {
+												handleTabSelect(selectedWorktreeId, result.tab.id);
+												await handleWorktreeCreated();
+											}
+										}}
+										onCreatePreview={async () => {
+											if (!currentWorkspace || !selectedWorktreeId) return;
+
+											const result = await window.ipcRenderer.invoke("tab-create", {
+												workspaceId: currentWorkspace.id,
+												worktreeId: selectedWorktreeId,
+												name: "Preview",
+												type: "preview",
+											});
+
+											if (result.success && result.tab) {
+												handleTabSelect(selectedWorktreeId, result.tab.id);
+												await handleWorktreeCreated();
 											}
 										}}
-										onShowDiff={handleShowDiff}
+										workspaceId={currentWorkspace?.id || null}
 									/>
 								)}
 							</ResizablePanel>
diff --git a/apps/desktop/src/renderer/screens/main/components/NewLayout/TaskTabs.tsx b/apps/desktop/src/renderer/screens/main/components/NewLayout/TaskTabs.tsx
index aa3bcb8d2d7..701fb50eb7c 100644
--- a/apps/desktop/src/renderer/screens/main/components/NewLayout/TaskTabs.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/NewLayout/TaskTabs.tsx
@@ -5,91 +5,27 @@ import {
 	HoverCardTrigger,
 } from "@superset/ui/hover-card";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip";
-import { PanelLeftClose, PanelLeftOpen, Plus } from "lucide-react";
+import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import type React from "react";
-import { useState } from "react";
-import { TaskAssignee } from "./TaskAssignee";
-import { StatusIndicator, type TaskStatus } from "./StatusIndicator";
+import type { Worktree } from "shared/types";
 
-interface MockTask {
-	id: string;
-	slug: string;
-	name: string;
-	status: TaskStatus;
-	branch: string;
-	description: string;
-	assignee: string;
-	assigneeAvatarUrl: string;
-	lastUpdated: string;
-}
-
-const MOCK_TASKS: MockTask[] = [
-	{
-		id: "1",
-		slug: "SSET-1",
-		name: "Homepage Redesign",
-		status: "working",
-		branch: "feature/homepage-redesign",
-		description: "Redesigning the homepage with new branding and improved UX",
-		assignee: "Alice",
-		assigneeAvatarUrl: "https://i.pravatar.cc/150?img=1",
-		lastUpdated: "2 hours ago",
-	},
-	{
-		id: "2",
-		slug: "SSET-2",
-		name: "API Integration",
-		status: "needs-feedback",
-		branch: "feature/api-integration",
-		description: "Integrate new REST API endpoints for user management",
-		assignee: "Bob",
-		assigneeAvatarUrl: "https://i.pravatar.cc/150?img=12",
-		lastUpdated: "1 day ago",
-	},
-	{
-		id: "3",
-		slug: "SSET-3",
-		name: "Bug Fixes",
-		status: "planning",
-		branch: "fix/various-bugs",
-		description: "Collection of bug fixes reported by users",
-		assignee: "Charlie",
-		assigneeAvatarUrl: "https://i.pravatar.cc/150?img=33",
-		lastUpdated: "3 days ago",
-	},
-	{
-		id: "4",
-		slug: "SSET-4",
-		name: "Performance Optimization",
-		status: "ready-to-merge",
-		branch: "perf/optimize-queries",
-		description: "Optimize database queries for faster page loads",
-		assignee: "Diana",
-		assigneeAvatarUrl: "https://i.pravatar.cc/150?img=9",
-		lastUpdated: "5 minutes ago",
-	},
-];
-
-interface TaskTabsProps {
+interface WorktreeTabsProps {
 	onCollapseSidebar: () => void;
 	onExpandSidebar: () => void;
 	isSidebarOpen: boolean;
-	onAddTask: () => void;
-	activeTaskId: string;
-	onActiveTaskChange: (taskId: string) => void;
-	openTasks: MockTask[];
+	worktrees: Worktree[];
+	selectedWorktreeId: string | null;
+	onWorktreeSelect: (worktreeId: string) => void;
 }
 
-export const TaskTabs: React.FC<TaskTabsProps> = ({
+export const TaskTabs: React.FC<WorktreeTabsProps> = ({
 	onCollapseSidebar,
 	onExpandSidebar,
 	isSidebarOpen,
-	onAddTask,
-	activeTaskId,
-	onActiveTaskChange,
-	openTasks,
+	worktrees,
+	selectedWorktreeId,
+	onWorktreeSelect,
 }) => {
-
 	return (
 		<div
 			className="flex items-end select-none bg-black/20"
@@ -140,53 +76,85 @@ export const TaskTabs: React.FC<TaskTabsProps> = ({
 					)}
 				</div>
 
-				{/* Task tabs */}
-				{openTasks.map((task) => {
-					const statusLabel = task.status === "planning" ? "Planning" :
-						task.status === "working" ? "Working" :
-						task.status === "needs-feedback" ? "Needs Feedback" :
-						"Ready to Merge";
+				{/* Worktree tabs */}
+				{worktrees.map((worktree) => {
+					// Use description as title if available, otherwise use branch name
+					const displayTitle = worktree.description || worktree.branch;
+
+					// Determine status color based on worktree state
+					const hasActivity = worktree.tabs && worktree.tabs.length > 0;
+					const hasPorts =
+						worktree.detectedPorts &&
+						Object.keys(worktree.detectedPorts).length > 0;
+					const statusColor = hasPorts
+						? "rgb(34, 197, 94)" // green - has running services
+						: hasActivity
+							? "rgb(234, 179, 8)" // yellow - has tabs/activity
+							: "rgb(156, 163, 175)"; // gray - inactive
 
 					return (
-						<HoverCard key={task.id} openDelay={200}>
+						<HoverCard key={worktree.id} openDelay={200}>
 							<HoverCardTrigger asChild>
 								<button
 									type="button"
-									onClick={() => onActiveTaskChange(task.id)}
+									onClick={() => onWorktreeSelect(worktree.id)}
 									className={`
 										flex items-center gap-2 px-3 h-8 rounded-t-md transition-all border-t border-x
 										${
-											activeTaskId === task.id
+											selectedWorktreeId === worktree.id
 												? "bg-neutral-900 text-white border-neutral-700 -mb-px"
 												: "bg-neutral-800/50 text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800 border-transparent"
 										}
 									`}
 								>
-									<StatusIndicator status={task.status} showLabel={false} />
-									<span className="text-sm whitespace-nowrap">
-										[{task.slug}] {task.name}
+									{/* Status indicator dot */}
+									<div className="relative" style={{ width: 8, height: 8 }}>
+										<svg
+											width={8}
+											height={8}
+											viewBox="0 0 8 8"
+											role="img"
+											aria-label="Worktree status indicator"
+										>
+											<circle cx={4} cy={4} r={4} fill={statusColor} />
+										</svg>
+										{hasPorts && (
+											<>
+												<span
+													className="absolute inset-0 rounded-full animate-ping opacity-75"
+													style={{ backgroundColor: statusColor }}
+												/>
+												<span
+													className="absolute inset-0 rounded-full"
+													style={{ backgroundColor: statusColor }}
+												/>
+											</>
+										)}
+									</div>
+									<span className="text-sm whitespace-nowrap max-w-[200px] truncate">
+										{displayTitle}
 									</span>
 								</button>
 							</HoverCardTrigger>
 							<HoverCardContent side="bottom" align="start" className="w-96">
 								<div className="space-y-3">
-									{/* Header with task slug/name and assignee */}
+									{/* Header with title */}
 									<div className="flex items-start justify-between gap-3">
 										<div className="flex-1 min-w-0">
-											<h4 className="font-semibold text-sm text-white">
-												[{task.slug}] {task.name}
-											</h4>
-											<p className="text-xs text-neutral-400 mt-1.5 leading-relaxed">
-												{task.description}
-											</p>
-										</div>
-
-										{/* Assignee in top-right */}
-										<div className="shrink-0">
-											<TaskAssignee
-												userName={task.assignee}
-												userAvatarUrl={task.assigneeAvatarUrl}
-											/>
+											{worktree.description ? (
+												<>
+													<h4 className="font-semibold text-sm text-white">
+														{worktree.description}
+													</h4>
+													<p className="text-xs text-neutral-400 mt-1.5 leading-relaxed">
+														Branch: {worktree.branch}
+													</p>
+												</>
+											) : (
+												<h4 className="font-semibold text-sm text-white">
+													{worktree.branch}
+												</h4>
+											)}
 										</div>
 									</div>
 
@@ -195,26 +163,52 @@ export const TaskTabs: React.FC<TaskTabsProps> = ({
 										<div className="flex items-center gap-2">
 											<span className="text-neutral-500">Status</span>
 											<div className="flex items-center gap-1.5">
-												<StatusIndicator
-													status={task.status}
-													showLabel={false}
-													size="sm"
-												/>
-												<span className="text-neutral-300">{statusLabel}</span>
+												<div
+													className="relative"
+													style={{ width: 8, height: 8 }}
+												>
+													<svg
+														width={8}
+														height={8}
+														viewBox="0 0 8 8"
+														role="img"
+														aria-label="Status indicator"
+													>
+														<circle cx={4} cy={4} r={4} fill={statusColor} />
+													</svg>
+												</div>
+												<span className="text-neutral-300">
+													{hasPorts
+														? "Running"
+														: hasActivity
+															? "Active"
+															: "Inactive"}
+												</span>
 											</div>
 										</div>
 
-										<div className="flex items-center gap-2">
-											<span className="text-neutral-500">Updated</span>
-											<span className="text-neutral-300">
-												{task.lastUpdated}
-											</span>
-										</div>
+										{worktree.tabs && worktree.tabs.length > 0 && (
+											<div className="flex items-center gap-2">
+												<span className="text-neutral-500">Tabs</span>
+												<span className="text-neutral-300">
+													{worktree.tabs.length}
+												</span>
+											</div>
+										)}
+
+										{!worktree.description && (
+											<div className="flex items-center gap-2 col-span-2">
+												<span className="text-neutral-500">Branch</span>
+												<span className="text-neutral-300 font-mono text-xs truncate">
+													{worktree.branch}
+												</span>
+											</div>
+										)}
 
 										<div className="flex items-center gap-2 col-span-2">
-											<span className="text-neutral-500">Branch</span>
+											<span className="text-neutral-500">Path</span>
 											<span className="text-neutral-300 font-mono text-xs truncate">
-												{task.branch}
+												{worktree.path}
 											</span>
 										</div>
 									</div>
@@ -223,16 +217,6 @@ export const TaskTabs: React.FC<TaskTabsProps> = ({
 						</HoverCard>
 					);
 				})}
-				<Tooltip>
-					<TooltipTrigger asChild>
-						<Button variant="ghost" size="icon-sm" className="ml-1" onClick={onAddTask}>
-							<Plus size={18} />
-						</Button>
-					</TooltipTrigger>
-					<TooltipContent side="bottom">
-						<p>Open task</p>
-					</TooltipContent>
-				</Tooltip>
 			</div>
 		</div>
 	);
diff --git a/apps/desktop/src/renderer/screens/main/components/NewLayout/WorktreeTabsSidebar.tsx b/apps/desktop/src/renderer/screens/main/components/NewLayout/WorktreeTabsSidebar.tsx
new file mode 100644
index 00000000000..bfe83dc7732
--- /dev/null
+++ b/apps/desktop/src/renderer/screens/main/components/NewLayout/WorktreeTabsSidebar.tsx
@@ -0,0 +1,149 @@
+import { Button } from "@superset/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip";
+import { Monitor, Plus, Terminal as TerminalIcon, X } from "lucide-react";
+import type React from "react";
+import type { Tab, Worktree } from "shared/types";
+
+interface WorktreeTabsSidebarProps {
+	worktree: Worktree | null;
+	selectedTabId: string | null;
+	onTabSelect: (tabId: string) => void;
+	onTabClose: (tabId: string) => void;
+	onCreateTerminal: () => void;
+	onCreatePreview: () => void;
+	workspaceId: string | null;
+}
+
+export const WorktreeTabsSidebar: React.FC<WorktreeTabsSidebarProps> = ({
+	worktree,
+	selectedTabId,
+	onTabSelect,
+	onTabClose,
+	onCreateTerminal,
+	onCreatePreview,
+	workspaceId,
+}) => {
+	if (!worktree || !workspaceId) {
+		return (
+			<div className="flex flex-col h-full p-4 text-neutral-400 text-sm">
+				<p>No worktree selected</p>
+			</div>
+		);
+	}
+
+	const tabs = worktree.tabs || [];
+
+	// Helper to get icon for tab type
+	const getTabIcon = (tab: Tab) => {
+		switch (tab.type) {
+			case "terminal":
+				return <TerminalIcon size={14} />;
+			case "preview":
+				return <Monitor size={14} />;
+			case "diff":
+				return <Monitor size={14} />;
+			default:
+				return <TerminalIcon size={14} />;
+		}
+	};
+
+	// Flatten tabs recursively (handle group tabs)
+	const flattenTabs = (tabs: Tab[], level = 0): Array<{ tab: Tab; level: number }> => {
+		const result: Array<{ tab: Tab; level: number }> = [];
+		for (const tab of tabs) {
+			result.push({ tab, level });
+			if (tab.type === "group" && tab.tabs) {
+				result.push(...flattenTabs(tab.tabs, level + 1));
+			}
+		}
+		return result;
+	};
+
+	const flatTabs = flattenTabs(tabs);
+
+	return (
+		<div className="flex flex-col h-full">
+			{/* Header with actions */}
+			<div className="flex items-center justify-between p-3 border-b border-neutral-800">
+				<h3 className="text-sm font-medium text-neutral-300">Tabs</h3>
+				<div className="flex items-center gap-1">
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<Button
+								variant="ghost"
+								size="icon-sm"
+								onClick={onCreateTerminal}
+								className="h-6 w-6 hover:bg-neutral-800/60 text-neutral-400 hover:text-neutral-200"
+							>
+								<Plus size={14} />
+							</Button>
+						</TooltipTrigger>
+						<TooltipContent side="bottom">
+							<p className="text-xs">New Terminal</p>
+						</TooltipContent>
+					</Tooltip>
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<Button
+								variant="ghost"
+								size="icon-sm"
+								onClick={onCreatePreview}
+								className="h-6 w-6 hover:bg-neutral-800/60 text-neutral-400 hover:text-neutral-200"
+							>
+								<Monitor size={14} />
+							</Button>
+						</TooltipTrigger>
+						<TooltipContent side="bottom">
+							<p className="text-xs">New Preview</p>
+						</TooltipContent>
+					</Tooltip>
+				</div>
+			</div>
+
+			{/* Tab list */}
+			<div className="flex-1 overflow-y-auto">
+				{flatTabs.length === 0 ? (
+					<div className="p-4 text-sm text-neutral-500">
+						No tabs yet. Create a terminal or preview to get started.
+					</div>
+				) : (
+					<div className="p-2">
+						{flatTabs.map(({ tab, level }) => (
+							<button
+								key={tab.id}
+								type="button"
+								onClick={() => onTabSelect(tab.id)}
+								className={`
+									w-full flex items-center justify-between gap-2 px-3 py-2 rounded-md text-sm transition-colors group
+									${
+										selectedTabId === tab.id
+											? "bg-neutral-800 text-neutral-100"
+											: "text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800/50"
+									}
+								`}
+								style={{ paddingLeft: `${12 + level * 16}px` }}
+							>
+								<div className="flex items-center gap-2 min-w-0">
+									{getTabIcon(tab)}
+									<span className="truncate">{tab.name}</span>
+								</div>
+								{tab.type !== "group" && (
+									<button
+										type="button"
+										onClick={(e) => {
+											e.stopPropagation();
+											onTabClose(tab.id);
+										}}
+										className="opacity-0 group-hover:opacity-100 hover:text-red-400 transition-opacity"
+									>
+										<X size={14} />
+									</button>
+								)}
+							</button>
+						))}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+};
diff --git a/apps/desktop/src/renderer/screens/main/components/Sidebar/Sidebar.tsx b/apps/desktop/src/renderer/screens/main/components/Sidebar/Sidebar.tsx
index bc311ad67d7..3d842e906f5 100644
--- a/apps/desktop/src/renderer/screens/main/components/Sidebar/Sidebar.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/Sidebar/Sidebar.tsx
@@ -1,23 +1,17 @@
-import { type MotionValue, useMotionValue } from "framer-motion";
 import { useEffect, useState } from "react";
 import type { Workspace, Worktree } from "shared/types";
 import {
 	CreateWorktreeButton,
 	CreateWorktreeModal,
 	SidebarHeader,
-	WorkspaceCarousel,
-	WorkspacePortIndicator,
-	WorkspaceSwitcher,
 	WorktreeList,
 } from "./components";
 
 interface SidebarProps {
-	workspaces: Workspace[];
 	currentWorkspace: Workspace | null;
 	onCollapse: () => void;
 	onTabSelect: (worktreeId: string, tabId: string) => void;
 	onWorktreeCreated: () => void;
-	onWorkspaceSelect: (workspaceId: string) => void;
 	onUpdateWorktree: (worktreeId: string, updatedWorktree: Worktree) => void;
 	selectedTabId: string | undefined;
 	isDragging?: boolean;
@@ -25,12 +19,10 @@ interface SidebarProps {
 }
 
 export function Sidebar({
-	workspaces,
 	currentWorkspace,
 	onCollapse,
 	onTabSelect,
 	onWorktreeCreated,
-	onWorkspaceSelect,
 	onUpdateWorktree,
 	selectedTabId,
 	isDragging = false,
@@ -51,16 +43,6 @@ export function Sidebar({
 	const [setupStatus, setSetupStatus] = useState<string | undefined>(undefined);
 	const [setupOutput, setSetupOutput] = useState<string | undefined>(undefined);
 
-	// Initialize with current workspace index
-	const currentIndex = workspaces.findIndex(
-		(w) => w.id === currentWorkspace?.id,
-	);
-	const initialIndex = currentIndex >= 0 ? currentIndex : 0;
-	const defaultScrollProgress = useMotionValue(initialIndex);
-	const [scrollProgress, setScrollProgress] = useState<MotionValue<number>>(
-		defaultScrollProgress,
-	);
-
 	// Auto-expand worktree if it contains the selected tab
 	useEffect(() => {
 		if (currentWorkspace && selectedTabId) {
@@ -230,43 +212,6 @@ export function Sidebar({
 		setSetupOutput(undefined);
 	};
 
-	const handleAddWorkspace = () => {
-		// Trigger the File -> Open Repository menu action
-		window.ipcRenderer.send("open-repository");
-	};
-
-	const handleRemoveWorkspace = async (
-		workspaceId: string,
-		workspaceName: string,
-	) => {
-		// Confirm deletion
-		const confirmed = window.confirm(
-			`Remove workspace "${workspaceName}"?\n\nAll terminal sessions for this workspace will be closed.`,
-		);
-
-		if (!confirmed) return;
-
-		try {
-			const result = await window.ipcRenderer.invoke("workspace-delete", {
-				id: workspaceId,
-				removeWorktree: false,
-			});
-			if (result.success) {
-				// If we deleted the current workspace, clear selection
-				if (currentWorkspace?.id === workspaceId) {
-					onWorkspaceSelect("");
-				}
-				// Refresh will happen via workspace-opened event
-				window.location.reload();
-			} else {
-				alert(`Failed to remove workspace: ${result.error || "Unknown error"}`);
-			}
-		} catch (error) {
-			console.error("Error removing workspace:", error);
-			alert(`Error: ${error instanceof Error ? error.message : String(error)}`);
-		}
-	};
-
 	const handleScanWorktrees = async () => {
 		if (!currentWorkspace) return;
 
@@ -299,38 +244,35 @@ export function Sidebar({
 
 	return (
 		<div className="flex flex-col h-full w-full select-none text-neutral-300 text-sm">
-			<WorkspaceCarousel
-				workspaces={workspaces}
-				currentWorkspace={currentWorkspace}
-				onWorkspaceSelect={onWorkspaceSelect}
-				onScrollProgress={setScrollProgress}
-				isDragging={isDragging}
-			>
-				{(workspace, isActive) => (
-					<>
-						<WorktreeList
-							currentWorkspace={workspace}
-							expandedWorktrees={expandedWorktrees}
-							onToggleWorktree={toggleWorktree}
-							onTabSelect={onTabSelect}
-							onReload={onWorktreeCreated}
-							onUpdateWorktree={onUpdateWorktree}
-							selectedTabId={selectedTabId}
-							onCloneWorktree={handleCloneWorktree}
-							onShowDiff={onShowDiff}
-							selectedWorktreeId={currentWorkspace?.activeWorktreeId}
-							showWorkspaceHeader={true}
-						/>
+			<SidebarHeader
+				onCollapse={onCollapse}
+				onScanWorktrees={handleScanWorktrees}
+				isScanningWorktrees={isScanningWorktrees}
+				hasWorkspace={!!currentWorkspace}
+			/>
+
+			<div className="flex-1 overflow-y-auto px-3">
+				<WorktreeList
+					currentWorkspace={currentWorkspace}
+					expandedWorktrees={expandedWorktrees}
+					onToggleWorktree={toggleWorktree}
+					onTabSelect={onTabSelect}
+					onReload={onWorktreeCreated}
+					onUpdateWorktree={onUpdateWorktree}
+					selectedTabId={selectedTabId}
+					onCloneWorktree={handleCloneWorktree}
+					onShowDiff={onShowDiff}
+					selectedWorktreeId={currentWorkspace?.activeWorktreeId}
+					showWorkspaceHeader={true}
+				/>
 
-						{workspace && (
-							<CreateWorktreeButton
-								onClick={handleCreateWorktree}
-								isCreating={isCreatingWorktree}
-							/>
-						)}
-					</>
+				{currentWorkspace && (
+					<CreateWorktreeButton
+						onClick={handleCreateWorktree}
+						isCreating={isCreatingWorktree}
+					/>
 				)}
-			</WorkspaceCarousel>
+			</div>
 
 			<CreateWorktreeModal
 				isOpen={showWorktreeModal}
diff --git a/apps/desktop/src/renderer/screens/main/components/TopBar/TopBar.tsx b/apps/desktop/src/renderer/screens/main/components/TopBar/TopBar.tsx
index 97e9f29d9ea..33a34405c73 100644
--- a/apps/desktop/src/renderer/screens/main/components/TopBar/TopBar.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/TopBar/TopBar.tsx
@@ -5,15 +5,11 @@ import { PanelLeftOpen } from "lucide-react";
 interface TopBarProps {
 	isSidebarOpen: boolean;
 	onOpenSidebar: () => void;
-	workspaceName?: string;
-	currentBranch?: string;
 }
 
 export function TopBar({
 	isSidebarOpen,
 	onOpenSidebar,
-	workspaceName,
-	currentBranch,
 }: TopBarProps) {
 	return (
 		<div