refactor: ui improvements, add project info, and update color theme

UI responsive improvements:
- Remove global button/overflow:hidden for natural scrolling
- Replace fixed 400px right panel with clamp(280px, 32vw, 460px)
- Remove SelectedFilesPanel key prop to prevent remounting jank
- Add overscroll-behavior: contain to all scroll containers
- Remove FileTreeView double border and nested overflow
- Remove arrow between branches, add :active row feedback
- Move filter checkbox inline with action buttons
- Add height-based media query for short windows
- Fix search input box-sizing

New features:
- Add project path and folder name in diff control bar
- Show "calculating..." in Total Tokens when busy

Color theme improvements:
- Update btn-primary to use subtle color mix for light/dark modes
- Update tab active indicator with softer color blend
- Update tab badge with subtle background and border
- Update token progress fill colors to be less saturated
- All colors now adapt properly to light and dark themes

Author: kccarlos

apps/desktop/src/App.css

@@ -39,7 +39,15 @@
 .btn:hover { background: color-mix(in oklab, currentColor 10%, transparent); }
 .btn:active { transform: translateY(1px); }
 .btn:disabled { opacity:.55; cursor:not-allowed; }
-.btn-primary { --_bg: var(--primary); --_fg: var(--primary-contrast); --_bd: color-mix(in oklab, var(--primary) 85%, black); }
+.btn-primary {
+  --_bg: color-mix(in oklab, var(--primary) 15%, var(--surface-2));
+  --_fg: color-mix(in oklab, var(--primary) 90%, currentColor);
+  --_bd: color-mix(in oklab, var(--primary) 40%, transparent);
+  font-weight: 500;
+}
+.btn-primary:hover {
+  --_bg: color-mix(in oklab, var(--primary) 25%, var(--surface-2));
+}
 .btn-ghost { --_bg: transparent; --_bd: var(--border-col); }
 .btn-icon { padding: var(--space-2); width:36px; height:36px; }
 
@@ -128,8 +136,8 @@
   grid-template-rows: auto auto 1fr;
   grid-template-columns: 1fr;
   height: 100vh;
-  width: 100vw;
-  overflow: hidden;
+  width: 100%;
+  min-height: 0;
 }
 
 .gc-header {
@@ -176,44 +184,56 @@
   overflow: hidden;
 }
 
-.diff-bar-arrow {
-  font-size: 1.25rem;
-  color: var(--border-col);
-  padding: 0 var(--space-2);
+.diff-bar-project-info {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  background: color-mix(in oklab, var(--surface-1) 50%, transparent);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-sm);
+  color: inherit;
+  opacity: 0.8;
+}
+
+.diff-bar-project-name {
+  font-weight: 500;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .gc-main-content {
   display: grid;
-  grid-template-columns: 1fr 400px;
+  grid-template-columns: minmax(320px, 1fr) clamp(280px, 32vw, 460px);
   gap: var(--space-4);
   padding: var(--space-4);
-  overflow: hidden;
   min-height: 0;
 }
 
 .gc-left-panel {
   display: flex;
   flex-direction: column;
-  overflow: hidden;
   border: 1px solid var(--border-col);
   border-radius: var(--radius-lg);
   background: var(--surface-1);
   min-height: 0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .gc-right-panel {
   display: flex;
   flex-direction: column;
-  overflow: hidden;
   border: 1px solid var(--border-col);
   border-radius: var(--radius-lg);
   background: var(--surface-1);
   min-height: 0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .gc-content {
-  flex: 1;
-  overflow: hidden;
+  flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   min-height: 0;
@@ -226,6 +246,26 @@
   }
 }
 
+@media (max-width: 900px) {
+  .gc-main-content {
+    padding: var(--space-3);
+    gap: var(--space-3);
+  }
+}
+
+/* Height-based media query for short desktop windows */
+@media (max-height: 700px) {
+  .gc-header {
+    padding: var(--space-2) var(--space-4);
+  }
+  .gc-diff-bar {
+    padding: var(--space-2) var(--space-4);
+  }
+  .left-panel-controls {
+    padding: var(--space-3);
+  }
+}
+
 .gc-button {
   display: inline-flex;
   align-items: center;
@@ -306,6 +346,8 @@
   flex-direction: column;
   gap: var(--space-1);
   overflow-y: auto;
+  min-height: 0;
+  overscroll-behavior: contain;
 }
 
 .selected-file-row {
@@ -744,8 +786,16 @@ button {
 }
 
 /* Rows & hovers */
-.tree-row, .selected-file-row { border-radius: var(--radius-sm); }
-.tree-row:hover, .selected-file-row:hover { background: color-mix(in oklab, currentColor 8%, transparent); }
+.tree-row, .selected-file-row {
+  border-radius: var(--radius-sm);
+  transition: background 0.1s ease, transform 0.05s ease;
+}
+.tree-row:hover, .selected-file-row:hover {
+  background: color-mix(in oklab, currentColor 8%, transparent);
+}
+.tree-row:active, .selected-file-row:active {
+  transform: translateY(1px);
+}
 
 /* Status bar */
 .status-bar {
@@ -983,32 +1033,36 @@ button {
   position: sticky;
   top: 0;
   z-index: 10;
-  background: var(--surface-1);
-  padding: var(--space-4);
+  background: color-mix(in oklab, var(--surface-1) 95%, transparent);
+  backdrop-filter: blur(8px);
+  padding: var(--space-3);
   border-bottom: 1px solid var(--border-col);
   display: flex;
   flex-direction: column;
-  gap: var(--space-3);
+  gap: var(--space-2);
 }
 
-.tree-action-buttons {
+.tree-controls-row {
   display: flex;
+  align-items: center;
+  justify-content: space-between;
   gap: var(--space-2);
   flex-wrap: wrap;
 }
 
-.tree-filter-controls {
+.tree-action-buttons {
   display: flex;
-  align-items: center;
+  gap: var(--space-1);
 }
 
 .tree-filter-checkbox {
   display: flex;
   align-items: center;
   gap: var(--space-2);
-  font-size: 13px;
+  font-size: 12px;
   cursor: pointer;
   user-select: none;
+  white-space: nowrap;
 }
 
 .tree-filter-checkbox input[type="checkbox"] {
@@ -1017,13 +1071,13 @@ button {
 
 .tree-search-input {
   position: relative;
-  width: 100%;
 }
 
 .tree-search-input input {
   width: 100%;
   font-size: 13px;
   padding-right: var(--space-8);
+  box-sizing: border-box;
 }
 
 /* Search clear button */
@@ -1058,8 +1112,9 @@ button {
 .left-panel-tree-container {
   flex: 1;
   overflow: auto;
-  padding: var(--space-2);
+  padding: var(--space-3);
   min-height: 0;
+  overscroll-behavior: contain;
 }
 
 /* Enhanced FileTreeView styling removed to restore original tree design */
@@ -1106,7 +1161,8 @@ button {
 
 .tab-nav-item.active {
   opacity: 1;
-  border-bottom-color: var(--primary);
+  border-bottom-color: color-mix(in oklab, var(--primary) 80%, currentColor);
+  color: color-mix(in oklab, var(--primary) 70%, currentColor);
 }
 
 .tab-badge {
@@ -1117,16 +1173,18 @@ button {
   height: 20px;
   padding: 0 var(--space-2);
   border-radius: 10px;
-  background: var(--primary);
-  color: var(--primary-contrast);
+  background: color-mix(in oklab, var(--primary) 20%, var(--surface-2));
+  color: color-mix(in oklab, var(--primary) 80%, currentColor);
   font-size: 11px;
   font-weight: 600;
+  border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
 }
 
 .tab-content {
   flex: 1;
   overflow: auto;
   min-height: 0;
+  overscroll-behavior: contain;
 }
 
 /* Selected files container */
@@ -1241,13 +1299,13 @@ button {
 
 .token-progress-fill {
   height: 100%;
-  background: var(--primary);
+  background: color-mix(in oklab, var(--primary) 60%, var(--surface-2));
   transition: width 0.3s ease;
   border-radius: 2px;
 }
 
 .token-progress-fill.over-limit {
-  background: #ef4444;
+  background: color-mix(in oklab, #ef4444 70%, var(--surface-2));
 }
 
 .copy-button {

apps/desktop/src/App.tsx

@@ -523,22 +523,23 @@ function AppContent() {
             onFlip={flipBranches}
             onRefresh={refreshRepo}
             disabled={isLoading}
+            projectName={currentDir ? currentDir.split('/').pop() || currentDir : undefined}
+            projectPath={currentDir || undefined}
           />
 
           <div className="gc-main-content">
             {/* Left panel: File tree */}
             <div className="gc-left-panel">
               {/* Tree controls - sticky */}
               <div className="left-panel-controls">
-                {/* File tree controls */}
-                <div className="tree-action-buttons">
-                  <button onClick={expandAll} className="btn btn-ghost btn-icon" title="Expand All" disabled={!fileTree}><ChevronsDown size={14} /></button>
-                  <button onClick={collapseAll} className="btn btn-ghost btn-icon" title="Collapse All" disabled={!fileTree}><ChevronsUp size={14} /></button>
-                  <button onClick={() => selectAll(treeFilter)} className="btn btn-ghost btn-icon" title="Select All" disabled={!fileTree}><CheckSquare size={14} /></button>
-                  <button onClick={() => deselectAll(treeFilter)} className="btn btn-ghost btn-icon" title="Deselect All" disabled={!fileTree}><Square size={14} /></button>
-                </div>
-
-                <div className="tree-filter-controls">
+                {/* File tree controls and filter checkbox in one row */}
+                <div className="tree-controls-row">
+                  <div className="tree-action-buttons">
+                    <button onClick={expandAll} className="btn btn-ghost btn-icon" title="Expand All" disabled={!fileTree}><ChevronsDown size={14} /></button>
+                    <button onClick={collapseAll} className="btn btn-ghost btn-icon" title="Collapse All" disabled={!fileTree}><ChevronsUp size={14} /></button>
+                    <button onClick={() => selectAll(treeFilter)} className="btn btn-ghost btn-icon" title="Select All" disabled={!fileTree}><CheckSquare size={14} /></button>
+                    <button onClick={() => deselectAll(treeFilter)} className="btn btn-ghost btn-icon" title="Deselect All" disabled={!fileTree}><Square size={14} /></button>
+                  </div>
                   <label className="tree-filter-checkbox">
                     <input type="checkbox" checked={showChangedOnly} onChange={(e) => setShowChangedOnly(e.target.checked)} />
                     Filter changed files only
@@ -601,7 +602,6 @@ function AppContent() {
                 {activeTab === 'files' ? (
                   <div className="selected-files-container">
                     <SelectedFilesPanel
-                      key={`sel-${selectedPaths.size}`}
                       selectedPaths={selectedPaths}
                       statusByPath={statusByPath}
                       onUnselect={(path) => toggleSelect(path)}

apps/desktop/src/components/ContextFooter.tsx

@@ -20,7 +20,7 @@ export function ContextFooter({
   copyFlash,
   disabled = false,
 }: ContextFooterProps) {
-  const { total: filesTokens } = useTokenCountsContext()
+  const { total: filesTokens, busy } = useTokenCountsContext()
   const totalTokens = filesTokens + instructionsTokens + fileTreeTokens
   const percentage = limit > 0 ? Math.min((totalTokens / limit) * 100, 100) : 0
   const isOverLimit = totalTokens > limit
@@ -48,7 +48,11 @@ export function ContextFooter({
         <div className="token-row token-total">
           <span className="token-label">Total Tokens:</span>
           <span className={`token-value ${isOverLimit ? 'over-limit' : ''}`}>
-            {totalTokens.toLocaleString()} / {limit.toLocaleString()}
+            {busy ? (
+              <span style={{ opacity: 0.7 }}>calculating...</span>
+            ) : (
+              `${totalTokens.toLocaleString()} / ${limit.toLocaleString()}`
+            )}
           </span>
         </div>
       </div>

apps/desktop/src/components/DiffControlBar.test.tsx

@@ -159,6 +159,6 @@ describe('DiffControlBar', () => {
 
     expect(container.querySelector('.gc-diff-bar')).toBeInTheDocument()
     expect(container.querySelector('.diff-bar-branch-selector')).toBeInTheDocument()
-    expect(container.querySelector('.diff-bar-arrow')).toBeInTheDocument()
+    // Arrow removed - swap button is sufficient visual indicator
   })
 })

apps/desktop/src/components/DiffControlBar.tsx

@@ -1,4 +1,4 @@
-import { ArrowLeftRight, RefreshCw } from 'lucide-react'
+import { ArrowLeftRight, RefreshCw, Folder } from 'lucide-react'
 
 type DiffControlBarProps = {
   branches: string[]
@@ -9,6 +9,8 @@ type DiffControlBarProps = {
   onFlip: () => void
   onRefresh: () => void
   disabled?: boolean
+  projectName?: string
+  projectPath?: string
 }
 
 export function DiffControlBar({
@@ -20,12 +22,22 @@ export function DiffControlBar({
   onFlip,
   onRefresh,
   disabled = false,
+  projectName,
+  projectPath,
 }: DiffControlBarProps) {
   const formatBranchLabel = (branch: string) =>
     branch === '__WORKDIR__' ? 'My Working Directory' : branch
 
   return (
     <div className="gc-diff-bar">
+      {projectName && (
+        <div className="diff-bar-project-info">
+          <Folder size={16} style={{ opacity: 0.6 }} />
+          <span className="diff-bar-project-name" title={projectPath || projectName}>
+            {projectName}
+          </span>
+        </div>
+      )}
       <div className="diff-bar-branch-selector">
         <label htmlFor="base-branch-select" className="diff-bar-label">Base</label>
         <select
@@ -52,8 +64,6 @@ export function DiffControlBar({
         <ArrowLeftRight size={18} />
       </button>
 
-      <div className="diff-bar-arrow">→</div>
-
       <div className="diff-bar-branch-selector">
         <label htmlFor="compare-branch-select" className="diff-bar-label">Compare</label>
         <select