From c45093f7f0a43c89fe5a4d8bc7a48c47070a7c1a Mon Sep 17 00:00:00 2001
From: Ginanjar Noviawan <ginanjar@bunnydogstudio.com>
Date: Thu, 12 Mar 2026 09:17:59 +0700
Subject: [PATCH 01/18] style: redesign UI with Codex dark theme aesthetic

- Update CSS variables for darker background (#121212) and subtle grays
- Increase border-radius from 4px to 8px for modern rounded corners
- Standardize hover/focus states to use bg-secondary across components
- Update all UI components for consistent styling:
  - button, card, input, select, dialog, dropdown-menu
  - tabs, tooltip, scroll-area, sidebar, context-menu
  - menubar, navigation-menu
- Refresh ProjectSidebar and WorkspaceLayout layouts
- Update TitleBar with consistent styling

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/renderer/components/ProjectSidebar.tsx    | 18 ++++----
 src/renderer/components/TitleBar.tsx          |  2 +-
 src/renderer/components/ui/button.tsx         | 10 ++---
 src/renderer/components/ui/card.tsx           |  2 +-
 src/renderer/components/ui/context-menu.tsx   | 10 ++---
 src/renderer/components/ui/dialog.tsx         |  6 +--
 src/renderer/components/ui/dropdown-menu.tsx  | 14 +++----
 src/renderer/components/ui/input.tsx          |  2 +-
 src/renderer/components/ui/menubar.tsx        | 14 +++----
 .../components/ui/navigation-menu.tsx         |  4 +-
 src/renderer/components/ui/scroll-area.tsx    |  2 +-
 src/renderer/components/ui/select.tsx         |  6 +--
 src/renderer/components/ui/sidebar.tsx        |  4 +-
 src/renderer/components/ui/tabs.tsx           |  4 +-
 src/renderer/components/ui/tooltip.tsx        |  2 +-
 src/renderer/index.css                        | 42 +++++++++----------
 src/renderer/layouts/WorkspaceLayout.tsx      |  6 +--
 src/renderer/pages/AppPreferences.tsx         | 14 +++----
 18 files changed, 81 insertions(+), 81 deletions(-)

diff --git a/src/renderer/components/ProjectSidebar.tsx b/src/renderer/components/ProjectSidebar.tsx
index b078dce..5ba568e 100644
--- a/src/renderer/components/ProjectSidebar.tsx
+++ b/src/renderer/components/ProjectSidebar.tsx
@@ -310,15 +310,15 @@ export function ProjectSidebar({
   )
 
   return (
-    <aside className="w-64 bg-card border-r border-border flex flex-col flex-shrink-0">
+    <aside className="w-64 bg-sidebar border-r border-sidebar-border flex flex-col flex-shrink-0">
       {/* Header with inline + button */}
-      <div className="h-10 flex items-center justify-between px-4 border-b border-border">
-        <span className="text-xs font-semibold tracking-wider text-muted-foreground uppercase">
+      <div className="h-10 flex items-center justify-between px-4 border-b border-sidebar-border">
+        <span className="text-xs font-semibold tracking-wider text-sidebar-foreground uppercase">
           Projects
         </span>
         <button
           onClick={onNewProject}
-          className="group h-6 w-6 inline-flex items-center justify-center rounded hover:bg-secondary transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+          className="group h-6 w-6 inline-flex items-center justify-center rounded-md hover:bg-sidebar-accent transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
           title="New Project"
           aria-label="Create new project from header"
           data-testid="header-new-project"
@@ -376,7 +376,7 @@ export function ProjectSidebar({
               <div className="mt-2">
                 <button
                   onClick={() => setShowArchived(!showArchived)}
-                  className="w-full flex items-center px-4 py-2 text-xs font-semibold tracking-wider text-muted-foreground uppercase hover:bg-secondary/50 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                  className="w-full flex items-center px-4 py-2 text-xs font-semibold tracking-wider text-sidebar-foreground uppercase hover:bg-sidebar-accent/50 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
                   aria-expanded={showArchived}
                   aria-label={`Archived projects (${archivedProjects.length})`}
                 >
@@ -403,10 +403,10 @@ export function ProjectSidebar({
       </div>
 
       {/* Bottom toolbar - New Project only */}
-      <div className="border-t border-border p-2">
+      <div className="border-t border-sidebar-border p-2">
         <button
           onClick={onNewProject}
-          className="group w-full h-8 inline-flex items-center justify-center rounded hover:bg-secondary transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+          className="group w-full h-8 inline-flex items-center justify-center rounded-md hover:bg-sidebar-accent transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
           title="New Project"
           aria-label="Create new project from toolbar"
           data-testid="bottom-new-project"
@@ -505,7 +505,7 @@ function ProjectItem({
       onContextMenu={onContextMenu}
       className={cn(
         'w-full flex items-center px-0 py-2 transition-colors group text-left border-l-2',
-        isActive ? `${colors.border} bg-secondary` : `${colors.borderMuted} hover:bg-secondary/50`
+        isActive ? `${colors.border} bg-sidebar-accent` : `${colors.borderMuted} hover:bg-sidebar-accent/50`
       )}
       aria-current={isActive ? 'page' : undefined}
       aria-label={`Project: ${project.name}${isActive ? ' (active)' : ''}`}
@@ -529,7 +529,7 @@ function ProjectItem({
           onChange={(e) => onEditNameChange(e.target.value)}
           onKeyDown={handleKeyDown}
           onBlur={onSaveRename}
-          className="flex-1 bg-secondary border border-border rounded px-2 py-0.5 text-sm text-foreground outline-none focus:ring-1 focus:ring-primary mr-2"
+          className="flex-1 bg-sidebar-accent border border-border rounded-md px-2 py-0.5 text-sm text-foreground outline-none focus:ring-1 focus:ring-primary mr-2"
           onClick={(e) => e.stopPropagation()}
         />
       ) : (
diff --git a/src/renderer/components/TitleBar.tsx b/src/renderer/components/TitleBar.tsx
index 7751e06..5dd57a3 100644
--- a/src/renderer/components/TitleBar.tsx
+++ b/src/renderer/components/TitleBar.tsx
@@ -7,7 +7,7 @@ import { useUpdatePanelVisibility } from '@/hooks/use-app-settings'
 import { windowApi } from '@/lib/api'
 import { toast } from 'sonner'
 
-const focusableButtonClass = 'h-full px-3 hover:bg-secondary inline-flex items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset'
+const focusableButtonClass = 'h-full px-3 hover:bg-secondary/80 inline-flex items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset'
 
 export function TitleBar(): React.JSX.Element {
   const [isMaximized, setIsMaximized] = useState(false)
diff --git a/src/renderer/components/ui/button.tsx b/src/renderer/components/ui/button.tsx
index bcb73c9..7e104c7 100644
--- a/src/renderer/components/ui/button.tsx
+++ b/src/renderer/components/ui/button.tsx
@@ -5,21 +5,21 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {
         default: 'bg-primary text-primary-foreground hover:bg-primary/90',
         destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        outline: 'border border-input bg-background hover:bg-secondary hover:text-accent-foreground',
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        ghost: 'hover:bg-secondary hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline'
       },
       size: {
         default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
+        sm: 'h-9 rounded-lg px-3',
+        lg: 'h-11 rounded-lg px-8',
         icon: 'h-10 w-10'
       }
     },
diff --git a/src/renderer/components/ui/card.tsx b/src/renderer/components/ui/card.tsx
index a014766..f409f0d 100644
--- a/src/renderer/components/ui/card.tsx
+++ b/src/renderer/components/ui/card.tsx
@@ -6,7 +6,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
+      className={cn('rounded-xl border bg-card text-card-foreground shadow-sm', className)}
       {...props}
     />
   )
diff --git a/src/renderer/components/ui/context-menu.tsx b/src/renderer/components/ui/context-menu.tsx
index 36a79a8..3682c70 100644
--- a/src/renderer/components/ui/context-menu.tsx
+++ b/src/renderer/components/ui/context-menu.tsx
@@ -25,7 +25,7 @@ const ContextMenuSubTrigger = React.forwardRef<
   <ContextMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+      'flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none data-[state=open]:bg-secondary focus:bg-secondary',
       inset && 'pl-8',
       className
     )}
@@ -60,7 +60,7 @@ const ContextMenuContent = React.forwardRef<
     <ContextMenuPrimitive.Content
       ref={ref}
       className={cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-50 min-w-[8rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className
       )}
       {...props}
@@ -78,7 +78,7 @@ const ContextMenuItem = React.forwardRef<
   <ContextMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-secondary focus:text-accent-foreground',
       inset && 'pl-8',
       className
     )}
@@ -94,7 +94,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
   <ContextMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-secondary focus:text-accent-foreground',
       className
     )}
     checked={checked}
@@ -117,7 +117,7 @@ const ContextMenuRadioItem = React.forwardRef<
   <ContextMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-secondary focus:text-accent-foreground',
       className
     )}
     {...props}
diff --git a/src/renderer/components/ui/dialog.tsx b/src/renderer/components/ui/dialog.tsx
index a5bfc2b..e2d07bb 100644
--- a/src/renderer/components/ui/dialog.tsx
+++ b/src/renderer/components/ui/dialog.tsx
@@ -19,7 +19,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'fixed inset-0 z-50 bg-black/90 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className
     )}
     {...props}
@@ -36,13 +36,13 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-card p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-xl',
         className
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-lg opacity-70 ring-offset-background transition-opacity hover:bg-secondary hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
diff --git a/src/renderer/components/ui/dropdown-menu.tsx b/src/renderer/components/ui/dropdown-menu.tsx
index 10f85ae..f39cd94 100644
--- a/src/renderer/components/ui/dropdown-menu.tsx
+++ b/src/renderer/components/ui/dropdown-menu.tsx
@@ -25,7 +25,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-accent focus:bg-accent',
+      'flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none data-[state=open]:bg-secondary focus:bg-secondary',
       inset && 'pl-8',
       className
     )}
@@ -44,7 +44,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      'z-50 min-w-[8rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
       className
     )}
     {...props}
@@ -61,7 +61,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-50 min-w-[8rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className
       )}
       {...props}
@@ -79,7 +79,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
+      'relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-secondary focus:text-accent-foreground',
       inset && 'pl-8',
       className
     )}
@@ -95,7 +95,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
+      'relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-secondary focus:text-accent-foreground',
       className
     )}
     checked={checked}
@@ -118,7 +118,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
+      'relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-secondary focus:text-accent-foreground',
       className
     )}
     {...props}
@@ -153,7 +153,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    className={cn('-mx-1 my-1 h-px bg-border', className)}
     {...props}
   />
 ))
diff --git a/src/renderer/components/ui/input.tsx b/src/renderer/components/ui/input.tsx
index e6fe6c0..8cf90c0 100644
--- a/src/renderer/components/ui/input.tsx
+++ b/src/renderer/components/ui/input.tsx
@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          'flex h-10 w-full rounded-lg border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
           className
         )}
         ref={ref}
diff --git a/src/renderer/components/ui/menubar.tsx b/src/renderer/components/ui/menubar.tsx
index e7e1864..2e60d57 100644
--- a/src/renderer/components/ui/menubar.tsx
+++ b/src/renderer/components/ui/menubar.tsx
@@ -36,7 +36,7 @@ const MenubarTrigger = React.forwardRef<
   <MenubarPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+      'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none data-[state=open]:bg-secondary data-[state=open]:text-accent-foreground focus:bg-secondary focus:text-accent-foreground',
       className
     )}
     {...props}
@@ -53,7 +53,7 @@ const MenubarSubTrigger = React.forwardRef<
   <MenubarPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-secondary data-[state=open]:text-accent-foreground focus:bg-secondary focus:text-accent-foreground',
       inset && 'pl-8',
       className
     )}
@@ -72,7 +72,7 @@ const MenubarSubContent = React.forwardRef<
   <MenubarPrimitive.SubContent
     ref={ref}
     className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      'z-50 min-w-[8rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
       className
     )}
     {...props}
@@ -91,7 +91,7 @@ const MenubarContent = React.forwardRef<
       alignOffset={alignOffset}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-50 min-w-[12rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className
       )}
       {...props}
@@ -109,7 +109,7 @@ const MenubarItem = React.forwardRef<
   <MenubarPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-secondary focus:text-accent-foreground',
       inset && 'pl-8',
       className
     )}
@@ -125,7 +125,7 @@ const MenubarCheckboxItem = React.forwardRef<
   <MenubarPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-secondary focus:text-accent-foreground',
       className
     )}
     checked={checked}
@@ -148,7 +148,7 @@ const MenubarRadioItem = React.forwardRef<
   <MenubarPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-secondary focus:text-accent-foreground',
       className
     )}
     {...props}
diff --git a/src/renderer/components/ui/navigation-menu.tsx b/src/renderer/components/ui/navigation-menu.tsx
index 3530949..342911e 100644
--- a/src/renderer/components/ui/navigation-menu.tsx
+++ b/src/renderer/components/ui/navigation-menu.tsx
@@ -35,7 +35,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
 const NavigationMenuItem = NavigationMenuPrimitive.Item
 
 const navigationMenuTriggerStyle = cva(
-  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50'
+  'group inline-flex h-10 w-max items-center justify-center rounded-lg bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-secondary hover:text-accent-foreground focus:bg-secondary focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-secondary/50 data-[state=open]:bg-secondary/50'
 )
 
 const NavigationMenuTrigger = React.forwardRef<
@@ -80,7 +80,7 @@ const NavigationMenuViewport = React.forwardRef<
   <div className={cn('absolute left-0 top-full flex justify-center')}>
     <NavigationMenuPrimitive.Viewport
       className={cn(
-        'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
+        'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-lg border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
         className
       )}
       ref={ref}
diff --git a/src/renderer/components/ui/scroll-area.tsx b/src/renderer/components/ui/scroll-area.tsx
index fc2f417..9689565 100644
--- a/src/renderer/components/ui/scroll-area.tsx
+++ b/src/renderer/components/ui/scroll-area.tsx
@@ -36,7 +36,7 @@ const ScrollBar = React.forwardRef<
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-muted" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ))
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
diff --git a/src/renderer/components/ui/select.tsx b/src/renderer/components/ui/select.tsx
index 12cb7f4..6a1d5a3 100644
--- a/src/renderer/components/ui/select.tsx
+++ b/src/renderer/components/ui/select.tsx
@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      'flex h-10 w-full items-center justify-between rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       className
     )}
     {...props}
@@ -66,7 +66,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-lg border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         position === 'popper' &&
           'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className
@@ -109,7 +109,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
+      'relative flex w-full cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-secondary focus:text-accent-foreground',
       className
     )}
     {...props}
diff --git a/src/renderer/components/ui/sidebar.tsx b/src/renderer/components/ui/sidebar.tsx
index 9d134dc..a41e9fa 100644
--- a/src/renderer/components/ui/sidebar.tsx
+++ b/src/renderer/components/ui/sidebar.tsx
@@ -491,7 +491,7 @@ const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li
 SidebarMenuItem.displayName = 'SidebarMenuItem'
 
 const sidebarMenuButtonVariants = cva(
-  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-lg p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
   {
     variants: {
       variant: {
@@ -693,7 +693,7 @@ const SidebarMenuSubButton = React.forwardRef<
       data-size={size}
       data-active={isActive}
       className={cn(
-        'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
+        'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-lg px-2 text-sidebar-foreground outline-none ring-sidebar-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
         'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
         size === 'sm' && 'text-xs',
         size === 'md' && 'text-sm',
diff --git a/src/renderer/components/ui/tabs.tsx b/src/renderer/components/ui/tabs.tsx
index d906dfa..95641e5 100644
--- a/src/renderer/components/ui/tabs.tsx
+++ b/src/renderer/components/ui/tabs.tsx
@@ -12,7 +12,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+      'inline-flex h-10 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
       className
     )}
     {...props}
@@ -27,7 +27,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all data-[state=active]:bg-card data-[state=active]:text-foreground data-[state=active]:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
       className
     )}
     {...props}
diff --git a/src/renderer/components/ui/tooltip.tsx b/src/renderer/components/ui/tooltip.tsx
index e84aa62..0437de4 100644
--- a/src/renderer/components/ui/tooltip.tsx
+++ b/src/renderer/components/ui/tooltip.tsx
@@ -17,7 +17,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      'z-50 overflow-hidden rounded-lg border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
       className
     )}
     {...props}
diff --git a/src/renderer/index.css b/src/renderer/index.css
index 0b7d8a0..80c9cff 100644
--- a/src/renderer/index.css
+++ b/src/renderer/index.css
@@ -6,15 +6,15 @@
 
 @layer base {
   :root {
-    /* Background layers */
-    --background: 0 0% 12%; /* #1E1E1E */
+    /* Background layers - Codex dark theme */
+    --background: 0 0% 7%; /* #121212 - darker main background */
     --foreground: 0 0% 90%;
 
     /* Surface colors for layered UI */
-    --card: 0 0% 14%; /* #252526 */
+    --card: 0 0% 11%; /* #1c1c1c - slightly elevated surface */
     --card-foreground: 0 0% 90%;
 
-    --popover: 0 0% 14%;
+    --popover: 0 0% 11%;
     --popover-foreground: 0 0% 90%;
 
     /* Primary - IDE Blue */
@@ -22,11 +22,11 @@
     --primary-foreground: 0 0% 100%;
 
     /* Secondary - Muted surface */
-    --secondary: 0 0% 18%;
+    --secondary: 0 0% 15%; /* #262626 */
     --secondary-foreground: 0 0% 70%;
 
     /* Muted elements */
-    --muted: 0 0% 20%;
+    --muted: 0 0% 18%; /* #2e2e2e */
     --muted-foreground: 0 0% 50%;
 
     /* Accent for highlights */
@@ -37,20 +37,20 @@
     --destructive: 0 84% 60%;
     --destructive-foreground: 0 0% 100%;
 
-    /* Borders */
-    --border: 240 4% 26%; /* #3F3F46 zinc-700 */
-    --input: 240 4% 26%;
+    /* Borders - subtle dark borders */
+    --border: 0 0% 20%; /* #333333 */
+    --input: 0 0% 20%;
     --ring: 217 91% 60%;
 
-    --radius: 0.25rem;
+    --radius: 0.5rem; /* 8px - rounded corners */
 
     /* Terminal-specific */
     --terminal-bg: 0 0% 7%; /* #121212 */
     --terminal-fg: 0 0% 85%;
 
     /* Surface layers */
-    --surface-dark: 0 0% 14%; /* #252526 */
-    --surface-darker: 0 0% 10%;
+    --surface-dark: 0 0% 11%; /* #1c1c1c */
+    --surface-darker: 0 0% 7%;
 
     /* Status bar (VS Code style) */
     --status-bar: 217 91% 40%; /* #007acc */
@@ -65,14 +65,14 @@
     --project-pink: 330 81% 60%;
     --project-orange: 25 95% 53%;
 
-    /* Sidebar */
-    --sidebar-background: 0 0% 14%;
+    /* Sidebar - darker than main content */
+    --sidebar-background: 0 0% 9%; /* #171717 */
     --sidebar-foreground: 0 0% 70%;
     --sidebar-primary: 217 91% 60%;
     --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 0 0% 18%;
+    --sidebar-accent: 0 0% 15%; /* #262626 */
     --sidebar-accent-foreground: 0 0% 90%;
-    --sidebar-border: 240 4% 26%;
+    --sidebar-border: 0 0% 20%;
     --sidebar-ring: 217 91% 60%;
   }
 }
@@ -86,7 +86,7 @@
     @apply bg-background text-foreground font-sans antialiased;
   }
 
-  /* Custom scrollbar */
+  /* Custom scrollbar - Codex style */
   ::-webkit-scrollbar {
     width: 10px;
     height: 10px;
@@ -97,12 +97,12 @@
   }
 
   ::-webkit-scrollbar-thumb {
-    background: hsl(0 0% 35%);
+    background: hsl(0 0% 25%);
     border-radius: 5px;
   }
 
   ::-webkit-scrollbar-thumb:hover {
-    background: hsl(0 0% 45%);
+    background: hsl(0 0% 35%);
   }
 
   .scrollbar-hide::-webkit-scrollbar {
@@ -121,9 +121,9 @@
     @apply inline-block w-2.5 h-5 bg-muted-foreground animate-pulse;
   }
 
-  /* Glass effect for modals */
+  /* Glass effect for modals - Codex style */
   .glass-panel {
-    background: hsla(0, 0%, 14%, 0.95);
+    background: hsla(0, 0%, 11%, 0.95);
     backdrop-filter: blur(12px);
   }
 
diff --git a/src/renderer/layouts/WorkspaceLayout.tsx b/src/renderer/layouts/WorkspaceLayout.tsx
index 1710159..4d30f9e 100644
--- a/src/renderer/layouts/WorkspaceLayout.tsx
+++ b/src/renderer/layouts/WorkspaceLayout.tsx
@@ -815,7 +815,7 @@ export default function WorkspaceLayout(): React.JSX.Element {
         <main className="flex-1 flex flex-col min-w-0">
           {projects.length === 0 ? (
             /* No Projects Empty State */
-            <div className="flex-1 flex flex-col items-center justify-center bg-terminal-bg px-6">
+            <div className="flex-1 flex flex-col items-center justify-center bg-background px-6">
               <motion.div
                 initial={{ opacity: 0, scale: 0.9 }}
                 animate={{ opacity: 1, scale: 1 }}
@@ -833,7 +833,7 @@ export default function WorkspaceLayout(): React.JSX.Element {
                 </p>
                 <button
                   onClick={() => setIsNewProjectModalOpen(true)}
-                  className="px-6 py-2.5 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors text-sm font-medium shadow-sm hover:shadow"
+                  className="px-6 py-2.5 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium shadow-sm hover:shadow"
                 >
                   Create Your First Project
                 </button>
@@ -875,7 +875,7 @@ export default function WorkspaceLayout(): React.JSX.Element {
                   </PaneDndProvider>
                 </div>
               ) : (
-                <div className="flex-1 overflow-hidden bg-terminal-bg relative">
+                <div className="flex-1 overflow-hidden bg-background relative">
                   <div className="w-full h-full">
                     <Outlet />
                   </div>
diff --git a/src/renderer/pages/AppPreferences.tsx b/src/renderer/pages/AppPreferences.tsx
index 7bf1125..96a82c0 100644
--- a/src/renderer/pages/AppPreferences.tsx
+++ b/src/renderer/pages/AppPreferences.tsx
@@ -171,7 +171,7 @@ export default function AppPreferences(): React.JSX.Element {
                   <select
                     value={fontFamily}
                     onChange={(e) => handleFontFamilyChange(e.target.value)}
-                    className="w-full bg-secondary/50 border border-border rounded-md px-3 py-2 text-sm text-foreground focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-shadow"
+                    className="w-full bg-secondary/50 border border-border rounded-lg px-3 py-2 text-sm text-foreground focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-shadow"
                   >
                     {FONT_FAMILY_OPTIONS.map((option) => (
                       <option key={option.value} value={option.value}>
@@ -215,7 +215,7 @@ export default function AppPreferences(): React.JSX.Element {
                   <select
                     value={bufferSize}
                     onChange={(e) => handleBufferSizeChange(parseInt(e.target.value))}
-                    className="w-full bg-secondary/50 border border-border rounded-md px-3 py-2 text-sm text-foreground focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-shadow"
+                    className="w-full bg-secondary/50 border border-border rounded-lg px-3 py-2 text-sm text-foreground focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-shadow"
                   >
                     {BUFFER_SIZE_OPTIONS.map((option) => (
                       <option key={option.value} value={option.value}>
@@ -236,7 +236,7 @@ export default function AppPreferences(): React.JSX.Element {
                   <select
                     value={maxTerminals}
                     onChange={(e) => handleMaxTerminalsChange(parseInt(e.target.value))}
-                    className="w-full bg-secondary/50 border border-border rounded-md px-3 py-2 text-sm text-foreground focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-shadow"
+                    className="w-full bg-secondary/50 border border-border rounded-lg px-3 py-2 text-sm text-foreground focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-shadow"
                   >
                     {MAX_TERMINALS_OPTIONS.map((option) => (
                       <option key={option.value} value={option.value}>
@@ -303,7 +303,7 @@ export default function AppPreferences(): React.JSX.Element {
                       return match?.path ?? defaultShell
                     })()}
                     onChange={(e) => handleDefaultShellChange(e.target.value)}
-                    className="w-full bg-secondary/50 border border-border rounded-md px-3 py-2 text-sm text-foreground focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-shadow"
+                    className="w-full bg-secondary/50 border border-border rounded-lg px-3 py-2 text-sm text-foreground focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-shadow"
                   >
                     <option value="">System Default</option>
                     {availableShells?.available?.map((shell) => (
@@ -368,7 +368,7 @@ export default function AppPreferences(): React.JSX.Element {
                     value={orphanDetectionTimeout ?? 600000}
                     onChange={(e) => handleOrphanTimeoutChange(e.target.value ? parseInt(e.target.value) : null)}
                     disabled={!orphanDetectionEnabled}
-                    className="w-full bg-secondary/50 border border-border rounded-md px-3 py-2 text-sm text-foreground focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-shadow disabled:opacity-50 disabled:cursor-not-allowed"
+                    className="w-full bg-secondary/50 border border-border rounded-lg px-3 py-2 text-sm text-foreground focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-shadow disabled:opacity-50 disabled:cursor-not-allowed"
                   >
                     {ORPHAN_TIMEOUT_OPTIONS.map((option) => (
                       <option key={option.value} value={option.value}>
@@ -522,7 +522,7 @@ export default function AppPreferences(): React.JSX.Element {
                   <button
                     onClick={checkForUpdates}
                     disabled={isChecking}
-                    className="flex items-center gap-2 px-4 py-2 bg-primary hover:bg-primary/90 disabled:bg-primary/50 disabled:cursor-not-allowed border border-primary rounded-md text-sm text-primary-foreground transition-colors"
+                    className="flex items-center gap-2 px-4 py-2 bg-primary hover:bg-primary/90 disabled:bg-primary/50 disabled:cursor-not-allowed border border-primary rounded-lg text-sm text-primary-foreground transition-colors"
                   >
                     <Download size={16} />
                     {isChecking ? 'Checking for updates...' : 'Check for Updates'}
@@ -595,7 +595,7 @@ export default function AppPreferences(): React.JSX.Element {
               <div className="w-2/3">
                 <button
                   onClick={() => setIsResetDialogOpen(true)}
-                  className="flex items-center gap-2 px-4 py-2 bg-card hover:bg-secondary border border-border rounded-md text-sm text-foreground transition-colors"
+                  className="flex items-center gap-2 px-4 py-2 bg-card hover:bg-secondary border border-border rounded-lg text-sm text-foreground transition-colors"
                 >
                   <RotateCcw size={16} />
                   Reset to Defaults

From 5277f91c5b4ae242964eecd1a6bd0dd67c107e14 Mon Sep 17 00:00:00 2001
From: Ginanjar Noviawan <ginanjar@bunnydogstudio.com>
Date: Thu, 12 Mar 2026 09:29:42 +0700
Subject: [PATCH 02/18] style: remove panel borders and add rounded corners for
 Codex aesthetic

- Remove border-r from ProjectSidebar, add rounded-xl with margin
- Add rounded-xl to FileExplorer container with margin
- Add rounded-xl to main content area in WorkspaceLayout
- Add rounded-xl to terminal pane content area
- Creates floating card-style panels matching Codex reference

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/renderer/components/ProjectSidebar.tsx             | 6 +++---
 src/renderer/components/file-explorer/FileExplorer.tsx | 4 ++--
 src/renderer/components/workspace/PaneContent.tsx      | 2 +-
 src/renderer/layouts/WorkspaceLayout.tsx               | 8 ++++----
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/renderer/components/ProjectSidebar.tsx b/src/renderer/components/ProjectSidebar.tsx
index 5ba568e..79d9488 100644
--- a/src/renderer/components/ProjectSidebar.tsx
+++ b/src/renderer/components/ProjectSidebar.tsx
@@ -310,9 +310,9 @@ export function ProjectSidebar({
   )
 
   return (
-    <aside className="w-64 bg-sidebar border-r border-sidebar-border flex flex-col flex-shrink-0">
+    <aside className="w-64 bg-sidebar flex flex-col flex-shrink-0 m-2 mr-0 rounded-xl">
       {/* Header with inline + button */}
-      <div className="h-10 flex items-center justify-between px-4 border-b border-sidebar-border">
+      <div className="h-10 flex items-center justify-between px-4 border-b border-sidebar-border rounded-t-xl">
         <span className="text-xs font-semibold tracking-wider text-sidebar-foreground uppercase">
           Projects
         </span>
@@ -403,7 +403,7 @@ export function ProjectSidebar({
       </div>
 
       {/* Bottom toolbar - New Project only */}
-      <div className="border-t border-sidebar-border p-2">
+      <div className="border-t border-sidebar-border p-2 rounded-b-xl">
         <button
           onClick={onNewProject}
           className="group w-full h-8 inline-flex items-center justify-center rounded-md hover:bg-sidebar-accent transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
diff --git a/src/renderer/components/file-explorer/FileExplorer.tsx b/src/renderer/components/file-explorer/FileExplorer.tsx
index b13f7c8..ceb6bd8 100644
--- a/src/renderer/components/file-explorer/FileExplorer.tsx
+++ b/src/renderer/components/file-explorer/FileExplorer.tsx
@@ -418,11 +418,11 @@ export function FileExplorer(): React.JSX.Element {
   return (
     <div
       ref={containerRef}
-      className="h-full flex flex-col bg-background text-foreground"
+      className="h-full flex flex-col bg-background text-foreground m-2 ml-0 rounded-xl"
       tabIndex={0}
     >
       {/* Header */}
-      <div className="flex items-center justify-between px-3 h-10 border-b border-border flex-shrink-0">
+      <div className="flex items-center justify-between px-3 h-10 border-b border-border flex-shrink-0 rounded-t-xl">
         <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
           Explorer
         </span>
diff --git a/src/renderer/components/workspace/PaneContent.tsx b/src/renderer/components/workspace/PaneContent.tsx
index 97eb171..82d4044 100644
--- a/src/renderer/components/workspace/PaneContent.tsx
+++ b/src/renderer/components/workspace/PaneContent.tsx
@@ -114,7 +114,7 @@ export function PaneContent({
         defaultShell={defaultShell}
       />
 
-      <div className="flex-1 overflow-hidden bg-terminal-bg relative">
+      <div className="flex-1 overflow-hidden bg-terminal-bg relative rounded-xl m-1">
         <div
           className={cn(
             'w-full h-full relative transition-all duration-150 ease-out',
diff --git a/src/renderer/layouts/WorkspaceLayout.tsx b/src/renderer/layouts/WorkspaceLayout.tsx
index 4d30f9e..453b578 100644
--- a/src/renderer/layouts/WorkspaceLayout.tsx
+++ b/src/renderer/layouts/WorkspaceLayout.tsx
@@ -812,10 +812,10 @@ export default function WorkspaceLayout(): React.JSX.Element {
         )}
 
         {/* Main Content */}
-        <main className="flex-1 flex flex-col min-w-0">
+        <main className="flex-1 flex flex-col min-w-0 m-2 rounded-xl bg-card overflow-hidden">
           {projects.length === 0 ? (
             /* No Projects Empty State */
-            <div className="flex-1 flex flex-col items-center justify-center bg-background px-6">
+            <div className="flex-1 flex flex-col items-center justify-center bg-background px-6 rounded-xl">
               <motion.div
                 initial={{ opacity: 0, scale: 0.9 }}
                 animate={{ opacity: 1, scale: 1 }}
@@ -833,7 +833,7 @@ export default function WorkspaceLayout(): React.JSX.Element {
                 </p>
                 <button
                   onClick={() => setIsNewProjectModalOpen(true)}
-                  className="px-6 py-2.5 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium shadow-sm hover:shadow"
+                  className="px-6 py-2.5 bg-primary text-primary-foreground rounded-xl hover:bg-primary/90 transition-colors text-sm font-medium shadow-sm hover:shadow"
                 >
                   Create Your First Project
                 </button>
@@ -875,7 +875,7 @@ export default function WorkspaceLayout(): React.JSX.Element {
                   </PaneDndProvider>
                 </div>
               ) : (
-                <div className="flex-1 overflow-hidden bg-background relative">
+                <div className="flex-1 overflow-hidden bg-background relative rounded-xl m-2">
                   <div className="w-full h-full">
                     <Outlet />
                   </div>

From 16e13532e558c440b7968baca903777ce026d4b1 Mon Sep 17 00:00:00 2001
From: Ginanjar Noviawan <ginanjar@bunnydogstudio.com>
Date: Thu, 12 Mar 2026 09:34:14 +0700
Subject: [PATCH 03/18] style: make scrollbar thinner (6px) for minimal Codex
 aesthetic

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/renderer/index.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/renderer/index.css b/src/renderer/index.css
index 80c9cff..6da8d19 100644
--- a/src/renderer/index.css
+++ b/src/renderer/index.css
@@ -88,8 +88,8 @@
 
   /* Custom scrollbar - Codex style */
   ::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
+    width: 6px;
+    height: 6px;
   }
 
   ::-webkit-scrollbar-track {
@@ -98,7 +98,7 @@
 
   ::-webkit-scrollbar-thumb {
     background: hsl(0 0% 25%);
-    border-radius: 5px;
+    border-radius: 3px;
   }
 
   ::-webkit-scrollbar-thumb:hover {

From 3fcccb6d2ed11314d0d580ef853b27072060c7ad Mon Sep 17 00:00:00 2001
From: Ginanjar Noviawan <ginanjar@bunnydogstudio.com>
Date: Thu, 12 Mar 2026 09:35:34 +0700
Subject: [PATCH 04/18] style: reduce scrollbar to 4px for ultra-minimal look

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/renderer/index.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/renderer/index.css b/src/renderer/index.css
index 6da8d19..a7f5ac3 100644
--- a/src/renderer/index.css
+++ b/src/renderer/index.css
@@ -88,8 +88,8 @@
 
   /* Custom scrollbar - Codex style */
   ::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
+    width: 4px;
+    height: 4px;
   }
 
   ::-webkit-scrollbar-track {
@@ -98,7 +98,7 @@
 
   ::-webkit-scrollbar-thumb {
     background: hsl(0 0% 25%);
-    border-radius: 3px;
+    border-radius: 2px;
   }
 
   ::-webkit-scrollbar-thumb:hover {

From cda434c9096f74a99520aba3e2de4c05786c0646 Mon Sep 17 00:00:00 2001
From: Ginanjar Noviawan <ginanjar@bunnydogstudio.com>
Date: Thu, 12 Mar 2026 09:38:08 +0700
Subject: [PATCH 05/18] style: use background color for title bar, remove
 border

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/renderer/components/TitleBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/TitleBar.tsx b/src/renderer/components/TitleBar.tsx
index 5dd57a3..99f2d56 100644
--- a/src/renderer/components/TitleBar.tsx
+++ b/src/renderer/components/TitleBar.tsx
@@ -43,7 +43,7 @@ export function TitleBar(): React.JSX.Element {
 
   return (
     <header
-      className="h-8 flex items-center bg-card border-b border-border select-none shrink-0"
+      className="h-8 flex items-center bg-background select-none shrink-0"
     >
       <div
         className="flex items-center h-full px-3"

From 731cad9804fc3b5f52028cb680345fd3e3d39d06 Mon Sep 17 00:00:00 2001
From: Ginanjar Noviawan <ginanjar@bunnydogstudio.com>
Date: Thu, 12 Mar 2026 09:39:41 +0700
Subject: [PATCH 06/18] style: reduce tab text size from text-sm to text-xs

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/renderer/components/workspace/EditorTab.tsx       | 2 +-
 src/renderer/components/workspace/WorkspaceTabBar.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/workspace/EditorTab.tsx b/src/renderer/components/workspace/EditorTab.tsx
index 1df4438..4fa69c0 100644
--- a/src/renderer/components/workspace/EditorTab.tsx
+++ b/src/renderer/components/workspace/EditorTab.tsx
@@ -88,7 +88,7 @@ export function EditorTab({
         <Icon size={14} className={cn('mr-2 flex-shrink-0', isActive ? 'text-primary' : '')} />
         <span
           className={cn(
-            'text-sm font-medium truncate',
+            'text-xs font-medium truncate',
             isActive && 'text-foreground'
           )}
         >
diff --git a/src/renderer/components/workspace/WorkspaceTabBar.tsx b/src/renderer/components/workspace/WorkspaceTabBar.tsx
index d91f596..da8f75a 100644
--- a/src/renderer/components/workspace/WorkspaceTabBar.tsx
+++ b/src/renderer/components/workspace/WorkspaceTabBar.tsx
@@ -138,12 +138,12 @@ function TerminalTabInline({
             }}
             onBlur={handleSave}
             onClick={(e) => e.stopPropagation()}
-            className="text-sm font-medium bg-transparent border-b border-primary outline-none w-full"
+            className="text-xs font-medium bg-transparent border-b border-primary outline-none w-full"
           />
         ) : (
           <span
             onDoubleClick={handleDoubleClick}
-            className={cn('text-sm font-medium', isActive && 'text-foreground')}
+            className={cn('text-xs font-medium', isActive && 'text-foreground')}
           >
             {terminal.name}
           </span>

From 3da95080894e5c12fcf07259a834d25f111cbca1 Mon Sep 17 00:00:00 2001
From: Ginanjar Noviawan <ginanjar@bunnydogstudio.com>
Date: Thu, 12 Mar 2026 09:46:13 +0700
Subject: [PATCH 07/18] style: make ResizableHandle transparent for cleaner
 panel separation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/renderer/components/ui/resizable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/ui/resizable.tsx b/src/renderer/components/ui/resizable.tsx
index 02a985b..eedfe57 100644
--- a/src/renderer/components/ui/resizable.tsx
+++ b/src/renderer/components/ui/resizable.tsx
@@ -24,7 +24,7 @@ const ResizableHandle = ({
 }) => (
   <ResizablePrimitive.PanelResizeHandle
     className={cn(
-      'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+      'relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-panel-group-direction=vertical]>div]:rotate-90',
       className
     )}
     {...props}

From 8ba4f999771cb6e956d4c1ba5c0a4134944ecd93 Mon Sep 17 00:00:00 2001
From: Ginanjar Noviawan <ginanjar@bunnydogstudio.com>
Date: Thu, 12 Mar 2026 09:51:49 +0700
Subject: [PATCH 08/18] fix: restructure File Explorer as separate panel

- Move FileExplorer outside ResizablePanelGroup to be sibling of main content
- Fix FileExplorer to have fixed width (w-64) like ProjectSidebar
- Creates proper visual hierarchy: background -> sidebar -> main content -> file explorer
- All panels now float separately with rounded corners

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/file-explorer/FileExplorer.tsx |  2 +-
 src/renderer/layouts/WorkspaceLayout.tsx      | 21 +++++++------------
 2 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/src/renderer/components/file-explorer/FileExplorer.tsx b/src/renderer/components/file-explorer/FileExplorer.tsx
index ceb6bd8..382af2d 100644
--- a/src/renderer/components/file-explorer/FileExplorer.tsx
+++ b/src/renderer/components/file-explorer/FileExplorer.tsx
@@ -418,7 +418,7 @@ export function FileExplorer(): React.JSX.Element {
   return (
     <div
       ref={containerRef}
-      className="h-full flex flex-col bg-background text-foreground m-2 ml-0 rounded-xl"
+      className="w-64 flex flex-col bg-background text-foreground m-2 mr-0 rounded-xl flex-shrink-0"
       tabIndex={0}
     >
       {/* Header */}
diff --git a/src/renderer/layouts/WorkspaceLayout.tsx b/src/renderer/layouts/WorkspaceLayout.tsx
index 453b578..1e68616 100644
--- a/src/renderer/layouts/WorkspaceLayout.tsx
+++ b/src/renderer/layouts/WorkspaceLayout.tsx
@@ -844,9 +844,9 @@ export default function WorkspaceLayout(): React.JSX.Element {
               {isWorkspaceRoute ? (
                 <div className="flex-1 flex min-h-0">
                   <PaneDndProvider>
-                    <ResizablePanelGroup direction="horizontal">
-                      {/* Center Panel: Pane Tree */}
-                      <ResizablePanel defaultSize={isExplorerVisible ? 80 : 100}>
+                    <ResizablePanelGroup direction="horizontal" className="flex-1">
+                      {/* Center Panel: Pane Tree - takes full width when explorer hidden */}
+                      <ResizablePanel defaultSize={100}>
                         <PaneRenderer
                           node={paneRoot}
                           onNewTerminal={(paneId) => {
@@ -861,18 +861,13 @@ export default function WorkspaceLayout(): React.JSX.Element {
                           defaultShell={activeProject?.defaultShell || appDefaultShell}
                         />
                       </ResizablePanel>
-
-                      {/* File Explorer Panel (Right, full height) */}
-                      {isExplorerVisible && (
-                        <>
-                          <ResizableHandle />
-                          <ResizablePanel defaultSize={20} minSize={10} maxSize={40}>
-                            <FileExplorer />
-                          </ResizablePanel>
-                        </>
-                      )}
                     </ResizablePanelGroup>
                   </PaneDndProvider>
+
+                  {/* File Explorer - separate floating panel like ProjectSidebar */}
+                  {isExplorerVisible && (
+                    <FileExplorer />
+                  )}
                 </div>
               ) : (
                 <div className="flex-1 overflow-hidden bg-background relative rounded-xl m-2">

From e7af3ff45f4a4a342d509c188077e5f42ad4d9c3 Mon Sep 17 00:00:00 2001
From: Ginanjar Noviawan <ginanjar@bunnydogstudio.com>
Date: Thu, 12 Mar 2026 09:53:42 +0700
Subject: [PATCH 09/18] fix: wrap FileExplorer in PaneDndProvider for drag-drop
 context

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/renderer/layouts/WorkspaceLayout.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/renderer/layouts/WorkspaceLayout.tsx b/src/renderer/layouts/WorkspaceLayout.tsx
index 1e68616..6985141 100644
--- a/src/renderer/layouts/WorkspaceLayout.tsx
+++ b/src/renderer/layouts/WorkspaceLayout.tsx
@@ -864,9 +864,11 @@ export default function WorkspaceLayout(): React.JSX.Element {
                     </ResizablePanelGroup>
                   </PaneDndProvider>
 
-                  {/* File Explorer - separate floating panel like ProjectSidebar */}
+                  {/* File Explorer - separate floating panel with its own PaneDndProvider */}
                   {isExplorerVisible && (
-                    <FileExplorer />
+                    <PaneDndProvider>
+                      <FileExplorer />
+                    </PaneDndProvider>
                   )}
                 </div>
               ) : (

From 45251d9f13bf7504edbfaecbb77b7aa4a99dd982 Mon Sep 17 00:00:00 2001
From: Ginanjar Noviawan <ginanjar@bunnydogstudio.com>
Date: Thu, 12 Mar 2026 09:57:20 +0700
Subject: [PATCH 10/18] fix: properly separate main content and file explorer
 with flex layout

- Wrap center content in flex-1 min-w-0 container
- Wrap file explorer in flex-shrink-0 container
- Prevents overlap between main content and right sidebar

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/renderer/layouts/WorkspaceLayout.tsx | 51 +++++++++++++-----------
 1 file changed, 27 insertions(+), 24 deletions(-)

diff --git a/src/renderer/layouts/WorkspaceLayout.tsx b/src/renderer/layouts/WorkspaceLayout.tsx
index 6985141..11c1061 100644
--- a/src/renderer/layouts/WorkspaceLayout.tsx
+++ b/src/renderer/layouts/WorkspaceLayout.tsx
@@ -842,33 +842,36 @@ export default function WorkspaceLayout(): React.JSX.Element {
           ) : (
             <>
               {isWorkspaceRoute ? (
-                <div className="flex-1 flex min-h-0">
-                  <PaneDndProvider>
-                    <ResizablePanelGroup direction="horizontal" className="flex-1">
-                      {/* Center Panel: Pane Tree - takes full width when explorer hidden */}
-                      <ResizablePanel defaultSize={100}>
-                        <PaneRenderer
-                          node={paneRoot}
-                          onNewTerminal={(paneId) => {
-                            handleCreateTerminalInPane(paneId)
-                          }}
-                          onNewTerminalWithShell={(paneId, shell) => {
-                            handleCreateTerminalInPane(paneId, shell.path)
-                          }}
-                          onCloseTerminal={handleCloseTerminal}
-                          onRenameTerminal={renameTerminal}
-                          onCloseEditorTab={handleCloseEditorTab}
-                          defaultShell={activeProject?.defaultShell || appDefaultShell}
-                        />
-                      </ResizablePanel>
-                    </ResizablePanelGroup>
-                  </PaneDndProvider>
+                <div className="flex-1 flex min-h-0 gap-0">
+                  <div className="flex-1 min-w-0">
+                    <PaneDndProvider>
+                      <ResizablePanelGroup direction="horizontal" className="h-full">
+                        <ResizablePanel defaultSize={100}>
+                          <PaneRenderer
+                            node={paneRoot}
+                            onNewTerminal={(paneId) => {
+                              handleCreateTerminalInPane(paneId)
+                            }}
+                            onNewTerminalWithShell={(paneId, shell) => {
+                              handleCreateTerminalInPane(paneId, shell.path)
+                            }}
+                            onCloseTerminal={handleCloseTerminal}
+                            onRenameTerminal={renameTerminal}
+                            onCloseEditorTab={handleCloseEditorTab}
+                            defaultShell={activeProject?.defaultShell || appDefaultShell}
+                          />
+                        </ResizablePanel>
+                      </ResizablePanelGroup>
+                    </PaneDndProvider>
+                  </div>
 
                   {/* File Explorer - separate floating panel with its own PaneDndProvider */}
                   {isExplorerVisible && (
-                    <PaneDndProvider>
-                      <FileExplorer />
-                    </PaneDndProvider>
+                    <div className="flex-shrink-0">
+                      <PaneDndProvider>
+                        <FileExplorer />
+                      </PaneDndProvider>
+                    </div>
                   )}
                 </div>
               ) : (

From 9405dc90747689fb6ceef844ce894a309cb1dc53 Mon Sep 17 00:00:00 2001
From: Ginanjar Noviawan <ginanjar@bunnydogstudio.com>
Date: Thu, 12 Mar 2026 10:07:44 +0700
Subject: [PATCH 11/18] fix: restructure layout - separate FileExplorer from
 main content

- Move FileExplorer outside main element to be sibling
- Main content: flex-1 with m-2 mr-0 (margin only on left)
- FileExplorer: flex-shrink-0 with w-64, m-2 (margin only on right)
- Creates proper floating panels at same level: ProjectSidebar | MainContent | FileExplorer
- Remove rounded-xl m-1 from PaneContent to prevent overflow

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/workspace/PaneContent.tsx      |   2 +-
 src/renderer/layouts/WorkspaceLayout.tsx      | 135 +++++++++---------
 2 files changed, 67 insertions(+), 70 deletions(-)

diff --git a/src/renderer/components/workspace/PaneContent.tsx b/src/renderer/components/workspace/PaneContent.tsx
index 82d4044..97eb171 100644
--- a/src/renderer/components/workspace/PaneContent.tsx
+++ b/src/renderer/components/workspace/PaneContent.tsx
@@ -114,7 +114,7 @@ export function PaneContent({
         defaultShell={defaultShell}
       />
 
-      <div className="flex-1 overflow-hidden bg-terminal-bg relative rounded-xl m-1">
+      <div className="flex-1 overflow-hidden bg-terminal-bg relative">
         <div
           className={cn(
             'w-full h-full relative transition-all duration-150 ease-out',
diff --git a/src/renderer/layouts/WorkspaceLayout.tsx b/src/renderer/layouts/WorkspaceLayout.tsx
index 11c1061..e918642 100644
--- a/src/renderer/layouts/WorkspaceLayout.tsx
+++ b/src/renderer/layouts/WorkspaceLayout.tsx
@@ -811,82 +811,79 @@ export default function WorkspaceLayout(): React.JSX.Element {
           />
         )}
 
-        {/* Main Content */}
-        <main className="flex-1 flex flex-col min-w-0 m-2 rounded-xl bg-card overflow-hidden">
-          {projects.length === 0 ? (
-            /* No Projects Empty State */
-            <div className="flex-1 flex flex-col items-center justify-center bg-background px-6 rounded-xl">
-              <motion.div
-                initial={{ opacity: 0, scale: 0.9 }}
-                animate={{ opacity: 1, scale: 1 }}
-                transition={{ duration: 0.4, ease: 'easeOut' }}
-                className="flex flex-col items-center text-center max-w-md"
-              >
-                <div className="mb-6">
-                  <FolderKanban className="w-24 h-24 text-muted-foreground/50" />
-                </div>
-                <h2 className="text-xl font-semibold text-foreground mb-2">
-                  No Projects Yet
-                </h2>
-                <p className="text-muted-foreground text-sm mb-6 leading-relaxed">
-                  Create your first project to organize your terminals, snapshots, and commands
-                </p>
-                <button
-                  onClick={() => setIsNewProjectModalOpen(true)}
-                  className="px-6 py-2.5 bg-primary text-primary-foreground rounded-xl hover:bg-primary/90 transition-colors text-sm font-medium shadow-sm hover:shadow"
+        {/* Main Content and File Explorer Container */}
+        <div className="flex-1 flex min-h-0 gap-0">
+          {/* Main Content Area */}
+          <main className="flex-1 flex flex-col min-w-0 m-2 mr-0 rounded-xl bg-card overflow-hidden">
+            {projects.length === 0 ? (
+              /* No Projects Empty State */
+              <div className="flex-1 flex flex-col items-center justify-center bg-background px-6 rounded-xl">
+                <motion.div
+                  initial={{ opacity: 0, scale: 0.9 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  transition={{ duration: 0.4, ease: 'easeOut' }}
+                  className="flex flex-col items-center text-center max-w-md"
                 >
-                  Create Your First Project
-                </button>
-              </motion.div>
-            </div>
-          ) : (
-            <>
-              {isWorkspaceRoute ? (
-                <div className="flex-1 flex min-h-0 gap-0">
-                  <div className="flex-1 min-w-0">
+                  <div className="mb-6">
+                    <FolderKanban className="w-24 h-24 text-muted-foreground/50" />
+                  </div>
+                  <h2 className="text-xl font-semibold text-foreground mb-2">
+                    No Projects Yet
+                  </h2>
+                  <p className="text-muted-foreground text-sm mb-6 leading-relaxed">
+                    Create your first project to organize your terminals, snapshots, and commands
+                  </p>
+                  <button
+                    onClick={() => setIsNewProjectModalOpen(true)}
+                    className="px-6 py-2.5 bg-primary text-primary-foreground rounded-xl hover:bg-primary/90 transition-colors text-sm font-medium shadow-sm hover:shadow"
+                  >
+                    Create Your First Project
+                  </button>
+                </motion.div>
+              </div>
+            ) : (
+              <>
+                {isWorkspaceRoute ? (
+                  <div className="flex-1 min-h-0">
                     <PaneDndProvider>
-                      <ResizablePanelGroup direction="horizontal" className="h-full">
-                        <ResizablePanel defaultSize={100}>
-                          <PaneRenderer
-                            node={paneRoot}
-                            onNewTerminal={(paneId) => {
-                              handleCreateTerminalInPane(paneId)
-                            }}
-                            onNewTerminalWithShell={(paneId, shell) => {
-                              handleCreateTerminalInPane(paneId, shell.path)
-                            }}
-                            onCloseTerminal={handleCloseTerminal}
-                            onRenameTerminal={renameTerminal}
-                            onCloseEditorTab={handleCloseEditorTab}
-                            defaultShell={activeProject?.defaultShell || appDefaultShell}
-                          />
-                        </ResizablePanel>
-                      </ResizablePanelGroup>
+                      <PaneRenderer
+                        node={paneRoot}
+                        onNewTerminal={(paneId) => {
+                          handleCreateTerminalInPane(paneId)
+                        }}
+                        onNewTerminalWithShell={(paneId, shell) => {
+                          handleCreateTerminalInPane(paneId, shell.path)
+                        }}
+                        onCloseTerminal={handleCloseTerminal}
+                        onRenameTerminal={renameTerminal}
+                        onCloseEditorTab={handleCloseEditorTab}
+                        defaultShell={activeProject?.defaultShell || appDefaultShell}
+                      />
                     </PaneDndProvider>
                   </div>
-
-                  {/* File Explorer - separate floating panel with its own PaneDndProvider */}
-                  {isExplorerVisible && (
-                    <div className="flex-shrink-0">
-                      <PaneDndProvider>
-                        <FileExplorer />
-                      </PaneDndProvider>
+                ) : (
+                  <div className="flex-1 overflow-hidden bg-background relative rounded-xl">
+                    <div className="w-full h-full">
+                      <Outlet />
                     </div>
-                  )}
-                </div>
-              ) : (
-                <div className="flex-1 overflow-hidden bg-background relative rounded-xl m-2">
-                  <div className="w-full h-full">
-                    <Outlet />
                   </div>
-                </div>
-              )}
-
-              {/* Status Bar */}
-              <StatusBar project={activeProject} />
-            </>
+                )}
+
+                {/* Status Bar */}
+                <StatusBar project={activeProject} />
+              </>
+            )}
+          </main>
+
+          {/* File Explorer - separate floating panel */}
+          {isExplorerVisible && (
+            <div className="flex-shrink-0">
+              <PaneDndProvider>
+                <FileExplorer />
+              </PaneDndProvider>
+            </div>
           )}
-        </main>
+        </div>
       </div>
 
       {/* Modals */}

From 13935fe81e81c212f81fb90f55089930d29cd2d2 Mon Sep 17 00:00:00 2001
From: Ginanjar Noviawan <ginanjar@bunnydogstudio.com>
Date: Thu, 12 Mar 2026 10:15:45 +0700
Subject: [PATCH 12/18] fix: add h-full to terminal containers for proper
 display

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/renderer/components/workspace/PaneContent.tsx | 2 +-
 src/renderer/layouts/WorkspaceLayout.tsx          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/workspace/PaneContent.tsx b/src/renderer/components/workspace/PaneContent.tsx
index 97eb171..c45a6d0 100644
--- a/src/renderer/components/workspace/PaneContent.tsx
+++ b/src/renderer/components/workspace/PaneContent.tsx
@@ -114,7 +114,7 @@ export function PaneContent({
         defaultShell={defaultShell}
       />
 
-      <div className="flex-1 overflow-hidden bg-terminal-bg relative">
+      <div className="flex-1 overflow-hidden bg-terminal-bg relative h-full">
         <div
           className={cn(
             'w-full h-full relative transition-all duration-150 ease-out',
diff --git a/src/renderer/layouts/WorkspaceLayout.tsx b/src/renderer/layouts/WorkspaceLayout.tsx
index e918642..78e5c39 100644
--- a/src/renderer/layouts/WorkspaceLayout.tsx
+++ b/src/renderer/layouts/WorkspaceLayout.tsx
@@ -844,7 +844,7 @@ export default function WorkspaceLayout(): React.JSX.Element {
             ) : (
               <>
                 {isWorkspaceRoute ? (
-                  <div className="flex-1 min-h-0">
+                  <div className="flex-1 min-h-0 h-full">
                     <PaneDndProvider>
                       <PaneRenderer
                         node={paneRoot}

From fcd87433353e45c4b4d4bff681457188e868232e Mon Sep 17 00:00:00 2001
From: Ginanjar Noviawan <ginanjar@bunnydogstudio.com>
Date: Thu, 12 Mar 2026 10:29:19 +0700
Subject: [PATCH 13/18] fix: restructure layout with proper padding and height

- Move padding to parent container (p-2) instead of individual margins
- Add h-full to all containers for proper flex height propagation
- Fix terminal blank screen by ensuring proper height chain
- Add gap between panels using ml-2/mr-2 instead of m-2

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/renderer/components/ProjectSidebar.tsx    |  2 +-
 .../components/file-explorer/FileExplorer.tsx |  2 +-
 src/renderer/layouts/WorkspaceLayout.tsx      | 34 ++++++++++---------
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/renderer/components/ProjectSidebar.tsx b/src/renderer/components/ProjectSidebar.tsx
index 79d9488..4736eb0 100644
--- a/src/renderer/components/ProjectSidebar.tsx
+++ b/src/renderer/components/ProjectSidebar.tsx
@@ -310,7 +310,7 @@ export function ProjectSidebar({
   )
 
   return (
-    <aside className="w-64 bg-sidebar flex flex-col flex-shrink-0 m-2 mr-0 rounded-xl">
+    <aside className="w-64 bg-sidebar flex flex-col flex-shrink-0 rounded-xl h-full">
       {/* Header with inline + button */}
       <div className="h-10 flex items-center justify-between px-4 border-b border-sidebar-border rounded-t-xl">
         <span className="text-xs font-semibold tracking-wider text-sidebar-foreground uppercase">
diff --git a/src/renderer/components/file-explorer/FileExplorer.tsx b/src/renderer/components/file-explorer/FileExplorer.tsx
index 382af2d..648e483 100644
--- a/src/renderer/components/file-explorer/FileExplorer.tsx
+++ b/src/renderer/components/file-explorer/FileExplorer.tsx
@@ -418,7 +418,7 @@ export function FileExplorer(): React.JSX.Element {
   return (
     <div
       ref={containerRef}
-      className="w-64 flex flex-col bg-background text-foreground m-2 mr-0 rounded-xl flex-shrink-0"
+      className="w-64 flex flex-col bg-background text-foreground rounded-xl flex-shrink-0 h-full"
       tabIndex={0}
     >
       {/* Header */}
diff --git a/src/renderer/layouts/WorkspaceLayout.tsx b/src/renderer/layouts/WorkspaceLayout.tsx
index 78e5c39..1718c2a 100644
--- a/src/renderer/layouts/WorkspaceLayout.tsx
+++ b/src/renderer/layouts/WorkspaceLayout.tsx
@@ -795,26 +795,28 @@ export default function WorkspaceLayout(): React.JSX.Element {
     <div className="h-screen flex flex-col overflow-hidden bg-background">
       <TitleBar />
 
-      <div className="flex-1 flex overflow-hidden min-h-0">
+      <div className="flex-1 flex overflow-hidden min-h-0 h-full p-2 gap-0">
         {/* Sidebar */}
         {isSidebarVisible && (
-          <ProjectSidebar
-            projects={projects}
-            activeProjectId={activeProjectId}
-            onSelectProject={selectProject}
-            onNewProject={() => setIsNewProjectModalOpen(true)}
-            onUpdateProject={updateProject}
-            onDeleteProject={deleteProject}
-            onArchiveProject={archiveProject}
-            onRestoreProject={restoreProject}
-            onReorderProjects={reorderProjects}
-          />
+          <div className="mr-2">
+            <ProjectSidebar
+              projects={projects}
+              activeProjectId={activeProjectId}
+              onSelectProject={selectProject}
+              onNewProject={() => setIsNewProjectModalOpen(true)}
+              onUpdateProject={updateProject}
+              onDeleteProject={deleteProject}
+              onArchiveProject={archiveProject}
+              onRestoreProject={restoreProject}
+              onReorderProjects={reorderProjects}
+            />
+          </div>
         )}
 
         {/* Main Content and File Explorer Container */}
-        <div className="flex-1 flex min-h-0 gap-0">
+        <div className="flex-1 flex min-h-0 h-full gap-0">
           {/* Main Content Area */}
-          <main className="flex-1 flex flex-col min-w-0 m-2 mr-0 rounded-xl bg-card overflow-hidden">
+          <main className="flex-1 flex flex-col min-w-0 rounded-xl bg-card overflow-hidden">
             {projects.length === 0 ? (
               /* No Projects Empty State */
               <div className="flex-1 flex flex-col items-center justify-center bg-background px-6 rounded-xl">
@@ -844,7 +846,7 @@ export default function WorkspaceLayout(): React.JSX.Element {
             ) : (
               <>
                 {isWorkspaceRoute ? (
-                  <div className="flex-1 min-h-0 h-full">
+                  <div className="flex-1 min-h-0 h-full overflow-hidden">
                     <PaneDndProvider>
                       <PaneRenderer
                         node={paneRoot}
@@ -877,7 +879,7 @@ export default function WorkspaceLayout(): React.JSX.Element {
 
           {/* File Explorer - separate floating panel */}
           {isExplorerVisible && (
-            <div className="flex-shrink-0">
+            <div className="flex-shrink-0 ml-2">
               <PaneDndProvider>
                 <FileExplorer />
               </PaneDndProvider>

From 244f570f47bbb2420e12bccb6712f9955a9d6784 Mon Sep 17 00:00:00 2001
From: Ginanjar Noviawan <ginanjar@bunnydogstudio.com>
Date: Thu, 12 Mar 2026 10:53:18 +0700
Subject: [PATCH 14/18] fix: resolve layout and terminal issues after sidebar
 redesign

- Show "Connecting..." loading state instead of blank when PTY ID is pending
- Prevent Ctrl+B from toggling file explorer when xterm terminal is focused
- Add overflow-hidden and min-w-0 to prevent main content width overflow

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/renderer/components/workspace/PaneContent.tsx | 7 ++++++-
 src/renderer/layouts/WorkspaceLayout.tsx          | 4 ++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/workspace/PaneContent.tsx b/src/renderer/components/workspace/PaneContent.tsx
index c45a6d0..ac88222 100644
--- a/src/renderer/components/workspace/PaneContent.tsx
+++ b/src/renderer/components/workspace/PaneContent.tsx
@@ -154,7 +154,12 @@ export function PaneContent({
                 // CRITICAL: Skip rendering if terminal doesn't have a PTY ID yet
                 // This prevents spawn loops when workspace tabs aren't fully synced
                 if (!terminal.ptyId) {
-                  return null
+                  const isVisible = activeTab?.id === tab.id
+                  return (
+                    <div key={tab.id} className={isVisible ? 'w-full h-full flex items-center justify-center text-muted-foreground text-sm' : 'hidden'}>
+                      Connecting...
+                    </div>
+                  )
                 }
                 const isVisible = activeTab?.id === tab.id
                 return (
diff --git a/src/renderer/layouts/WorkspaceLayout.tsx b/src/renderer/layouts/WorkspaceLayout.tsx
index 1718c2a..2c1b3ba 100644
--- a/src/renderer/layouts/WorkspaceLayout.tsx
+++ b/src/renderer/layouts/WorkspaceLayout.tsx
@@ -392,7 +392,7 @@ export default function WorkspaceLayout(): React.JSX.Element {
     const handleKeyDown = (e: KeyboardEvent) => {
       // Skip if typing in an input/textarea/editable element
       const target = e.target instanceof HTMLElement ? e.target : document.body
-      const isInEditor = target.closest('.cm-content') || target.closest('.bn-editor')
+      const isInEditor = target.closest('.cm-content') || target.closest('.bn-editor') || target.closest('.xterm')
       const isInInput =
         target.tagName === 'INPUT' ||
         target.tagName === 'TEXTAREA' ||
@@ -814,7 +814,7 @@ export default function WorkspaceLayout(): React.JSX.Element {
         )}
 
         {/* Main Content and File Explorer Container */}
-        <div className="flex-1 flex min-h-0 h-full gap-0">
+        <div className="flex-1 flex min-h-0 h-full gap-0 overflow-hidden min-w-0">
           {/* Main Content Area */}
           <main className="flex-1 flex flex-col min-w-0 rounded-xl bg-card overflow-hidden">
             {projects.length === 0 ? (

From 9faf9d0c759b13adf797f39e7f541100ad1288d4 Mon Sep 17 00:00:00 2001
From: Ginanjar Noviawan <ginanjar@bunnydogstudio.com>
Date: Thu, 12 Mar 2026 11:14:29 +0700
Subject: [PATCH 15/18] fix: review fixes - tab contrast, terminal shortcut
 guard, menu radius, version label

- Change active tab bg from bg-card to bg-muted for contrast
- Split xterm out of isInEditor into separate isInTerminal boolean
- Fix ContextMenuSubTrigger rounded-md to rounded-sm for consistency
- Replace bottom New Project button with Termul version label

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/renderer/components/ProjectSidebar.tsx  | 16 +++++-----------
 src/renderer/components/ui/context-menu.tsx |  2 +-
 src/renderer/components/ui/tabs.tsx         |  2 +-
 src/renderer/layouts/WorkspaceLayout.tsx    |  9 +++++----
 4 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/src/renderer/components/ProjectSidebar.tsx b/src/renderer/components/ProjectSidebar.tsx
index 4736eb0..4c76229 100644
--- a/src/renderer/components/ProjectSidebar.tsx
+++ b/src/renderer/components/ProjectSidebar.tsx
@@ -402,17 +402,11 @@ export function ProjectSidebar({
         )}
       </div>
 
-      {/* Bottom toolbar - New Project only */}
-      <div className="border-t border-sidebar-border p-2 rounded-b-xl">
-        <button
-          onClick={onNewProject}
-          className="group w-full h-8 inline-flex items-center justify-center rounded-md hover:bg-sidebar-accent transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
-          title="New Project"
-          aria-label="Create new project from toolbar"
-          data-testid="bottom-new-project"
-        >
-          <Plus size={16} className="text-muted-foreground group-hover:text-foreground" />
-        </button>
+      {/* Bottom toolbar - Version */}
+      <div className="p-2 rounded-b-xl">
+        <div className="w-full h-8 inline-flex items-center justify-center">
+          <span className="text-xs text-muted-foreground">Termul v0.3.0-4</span>
+        </div>
       </div>
 
       {/* Context Menu */}
diff --git a/src/renderer/components/ui/context-menu.tsx b/src/renderer/components/ui/context-menu.tsx
index 3682c70..713daa5 100644
--- a/src/renderer/components/ui/context-menu.tsx
+++ b/src/renderer/components/ui/context-menu.tsx
@@ -25,7 +25,7 @@ const ContextMenuSubTrigger = React.forwardRef<
   <ContextMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none data-[state=open]:bg-secondary focus:bg-secondary',
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-secondary focus:bg-secondary',
       inset && 'pl-8',
       className
     )}
diff --git a/src/renderer/components/ui/tabs.tsx b/src/renderer/components/ui/tabs.tsx
index 95641e5..144ef89 100644
--- a/src/renderer/components/ui/tabs.tsx
+++ b/src/renderer/components/ui/tabs.tsx
@@ -27,7 +27,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all data-[state=active]:bg-card data-[state=active]:text-foreground data-[state=active]:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=active]:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
       className
     )}
     {...props}
diff --git a/src/renderer/layouts/WorkspaceLayout.tsx b/src/renderer/layouts/WorkspaceLayout.tsx
index 2c1b3ba..554feef 100644
--- a/src/renderer/layouts/WorkspaceLayout.tsx
+++ b/src/renderer/layouts/WorkspaceLayout.tsx
@@ -392,7 +392,8 @@ export default function WorkspaceLayout(): React.JSX.Element {
     const handleKeyDown = (e: KeyboardEvent) => {
       // Skip if typing in an input/textarea/editable element
       const target = e.target instanceof HTMLElement ? e.target : document.body
-      const isInEditor = target.closest('.cm-content') || target.closest('.bn-editor') || target.closest('.xterm')
+      const isInEditor = target.closest('.cm-content') || target.closest('.bn-editor')
+      const isInTerminal = !!target.closest('.xterm')
       const isInInput =
         target.tagName === 'INPUT' ||
         target.tagName === 'TEXTAREA' ||
@@ -425,9 +426,9 @@ export default function WorkspaceLayout(): React.JSX.Element {
         return
       }
 
-      // Ctrl+B - toggle file explorer (skip when in editor/input so BlockNote bold works)
+      // Ctrl+B - toggle file explorer (skip when in editor/input/terminal)
       if (e.ctrlKey && e.key === 'b' && !e.shiftKey && !e.altKey) {
-        if (!isInEditor && !isInInput) {
+        if (!isInEditor && !isInInput && !isInTerminal) {
           e.preventDefault()
           void updatePanelVisibility('fileExplorerVisible', !isExplorerVisible).catch((error) => {
             toast.error(
@@ -441,7 +442,7 @@ export default function WorkspaceLayout(): React.JSX.Element {
       }
 
       if (matchesShortcut(e, getActiveKey('sidebarToggle'))) {
-        if (!isInEditor && !isInInput) {
+        if (!isInEditor && !isInInput && !isInTerminal) {
           e.preventDefault()
           e.stopPropagation()
           void updatePanelVisibility('sidebarVisible', !isSidebarVisible).catch((error) => {

From dfdaba8d1e544cefe1d72bcb6be838d522f6cf9e Mon Sep 17 00:00:00 2001
From: Ginanjar Noviawan <ginanjar@bunnydogstudio.com>
Date: Thu, 12 Mar 2026 11:23:41 +0700
Subject: [PATCH 16/18] fix: clear stale file explorer on project removal,
 allow sidebar toggle in terminal

- Clear explorer root path when activeProject becomes null
- Guard FileExplorer render on activeProject?.path being truthy
- Remove isInTerminal check from configurable sidebarToggle shortcut

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/renderer/layouts/WorkspaceLayout.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/renderer/layouts/WorkspaceLayout.tsx b/src/renderer/layouts/WorkspaceLayout.tsx
index 554feef..ce5a0c8 100644
--- a/src/renderer/layouts/WorkspaceLayout.tsx
+++ b/src/renderer/layouts/WorkspaceLayout.tsx
@@ -123,7 +123,13 @@ export default function WorkspaceLayout(): React.JSX.Element {
   // Sync file explorer root path and register project root watcher when project changes
   useEffect(() => {
     const nextRootPathCandidate = activeProject?.path
-    if (typeof nextRootPathCandidate !== 'string' || activeProjectId === prevProjectIdRef.current) {
+    if (!activeProject || typeof nextRootPathCandidate !== 'string') {
+      // Project removed or has no path — clear explorer root
+      useFileExplorerStore.getState().setRootPath('')
+      prevProjectIdRef.current = activeProjectId
+      return
+    }
+    if (activeProjectId === prevProjectIdRef.current) {
       return
     }
 
@@ -442,7 +448,7 @@ export default function WorkspaceLayout(): React.JSX.Element {
       }
 
       if (matchesShortcut(e, getActiveKey('sidebarToggle'))) {
-        if (!isInEditor && !isInInput && !isInTerminal) {
+        if (!isInEditor && !isInInput) {
           e.preventDefault()
           e.stopPropagation()
           void updatePanelVisibility('sidebarVisible', !isSidebarVisible).catch((error) => {
@@ -879,7 +885,7 @@ export default function WorkspaceLayout(): React.JSX.Element {
           </main>
 
           {/* File Explorer - separate floating panel */}
-          {isExplorerVisible && (
+          {isExplorerVisible && activeProject?.path && (
             <div className="flex-shrink-0 ml-2">
               <PaneDndProvider>
                 <FileExplorer />

From e84a8a7c6aa95745b3622c7c9543955d01fefdba Mon Sep 17 00:00:00 2001
From: Ginanjar Noviawan <ginanjar@bunnydogstudio.com>
Date: Thu, 12 Mar 2026 11:26:14 +0700
Subject: [PATCH 17/18] test: update ProjectSidebar test for version label
 replacing new project button

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/renderer/components/ProjectSidebar.test.tsx | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/renderer/components/ProjectSidebar.test.tsx b/src/renderer/components/ProjectSidebar.test.tsx
index 4f56e38..3ad1f10 100644
--- a/src/renderer/components/ProjectSidebar.test.tsx
+++ b/src/renderer/components/ProjectSidebar.test.tsx
@@ -251,15 +251,10 @@ describe('ProjectSidebar', () => {
     expect(onNewProject).toHaveBeenCalled()
   })
 
-  it('should call onNewProject when bottom + button is clicked', () => {
-    const onNewProject = vi.fn()
-    renderWithRouter({ onNewProject })
+  it('should show version label at the bottom', () => {
+    renderWithRouter({})
 
-    // Use data-testid for robust button selection
-    const bottomButton = screen.getByTestId('bottom-new-project')
-    fireEvent.click(bottomButton)
-
-    expect(onNewProject).toHaveBeenCalled()
+    expect(screen.getByText(/Termul v/)).toBeInTheDocument()
   })
 
   it('should show empty state when no projects', () => {

From 7fe257ba59c1a5dfd563bb26e3bf473ad13505ef Mon Sep 17 00:00:00 2001
From: Ginanjar Noviawan <ginanjar@bunnydogstudio.com>
Date: Thu, 12 Mar 2026 11:32:31 +0700
Subject: [PATCH 18/18] fix: guard against empty path in explorer root sync and
 clean up stale watcher

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/renderer/layouts/WorkspaceLayout.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/renderer/layouts/WorkspaceLayout.tsx b/src/renderer/layouts/WorkspaceLayout.tsx
index ce5a0c8..286855d 100644
--- a/src/renderer/layouts/WorkspaceLayout.tsx
+++ b/src/renderer/layouts/WorkspaceLayout.tsx
@@ -123,9 +123,13 @@ export default function WorkspaceLayout(): React.JSX.Element {
   // Sync file explorer root path and register project root watcher when project changes
   useEffect(() => {
     const nextRootPathCandidate = activeProject?.path
-    if (!activeProject || typeof nextRootPathCandidate !== 'string') {
-      // Project removed or has no path — clear explorer root
+    if (!activeProject || typeof nextRootPathCandidate !== 'string' || nextRootPathCandidate === '') {
+      // Project removed or has no path — clear explorer root and unwatch
       useFileExplorerStore.getState().setRootPath('')
+      if (watchedRootPathRef.current) {
+        filesystemApi.unwatchDirectory(watchedRootPathRef.current)
+        watchedRootPathRef.current = null
+      }
       prevProjectIdRef.current = activeProjectId
       return
     }