cleanup header titles of col a and col b

src/renderer/src/App.tsx

@@ -36,7 +36,7 @@ function Splitter({ orientation = 'v', onDelta }: { orientation?: 'v' | 'h'; onD
   return <div className={'splitter' + (orientation === 'h' ? ' h' : '') + (drag ? ' drag' : '')} onMouseDown={down} />
 }
 
-function RightColumn({ width }: { width: number }): React.ReactElement {
+function RightColumn({ width, onFocus }: { width: number; onFocus: () => void }): React.ReactElement {
   const [topFrac, setTopFrac] = useState(() => loadNum('helder.topFrac', 0.52))
   const ref = useRef<HTMLDivElement>(null)
   useEffect(() => saveNum('helder.topFrac', topFrac), [topFrac])
@@ -45,7 +45,7 @@ function RightColumn({ width }: { width: number }): React.ReactElement {
     setTopFrac((f) => Math.max(0.18, Math.min(0.82, (f * h + dy) / h)))
   }
   return (
-    <div className="col right-col" style={{ width, flex: '0 0 ' + width + 'px' }}>
+    <div className="col right-col" style={{ width, flex: '0 0 ' + width + 'px' }} onMouseDownCapture={onFocus}>
       <div ref={ref} style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
         <div style={{ flex: '0 0 ' + (topFrac * 100) + '%', minHeight: 0, display: 'flex' }}>
           <Terminal kind="agent" />
@@ -130,22 +130,37 @@ export function App(): React.ReactElement {
     toast('Discarded changes', path)
   }
 
-  // Columns are proportional — Source Control 10%, Explorer 10%, Editor 40%
-  // (flex:1, takes the remainder), Right column 40% — and re-apply on resize.
-  // Dragging a splitter still adjusts them until the next window resize.
-  const [gitW, setGitW] = useState(() => Math.round(window.innerWidth * 0.1))
-  const [treeW, setTreeW] = useState(() => Math.round(window.innerWidth * 0.1))
-  const [rightW, setRightW] = useState(() => Math.round(window.innerWidth * 0.4))
+  // Proportional columns, two regimes (Editor C is the flex remainder):
+  //   ≥ 1650px (roomy) → Git 10% · Explorer 10% · Editor 40% · Right 40%
+  //                      (no focus-driven changes — everything fits)
+  //   < 1650px (tight) → Git 15% · Explorer 15%, Editor/Right react to focus:
+  //                      default Editor 40% / Right 30%
+  //                      focus editor → Editor 50% / Right 20%
+  //                      focus agent/terminal → Editor 20% / Right 50%
+  // Re-applied on resize + focus change; dragging still works in between.
+  const FOCUS_RESIZE_BELOW = 1650
+  const [focusZone, setFocusZone] = useState<'default' | 'editor' | 'terminal'>('default')
+  const [gitW, setGitW] = useState(() => Math.round(window.innerWidth * 0.15))
+  const [treeW, setTreeW] = useState(() => Math.round(window.innerWidth * 0.15))
+  const [rightW, setRightW] = useState(() => Math.round(window.innerWidth * 0.3))
   useEffect(() => {
-    function applyProportions(): void {
+    function apply(): void {
       const w = window.innerWidth
+      if (w >= FOCUS_RESIZE_BELOW) {
         setGitW(Math.round(w * 0.1))
         setTreeW(Math.round(w * 0.1))
         setRightW(Math.round(w * 0.4))
+      } else {
+        setGitW(Math.round(w * 0.15))
+        setTreeW(Math.round(w * 0.15))
+        const rightFrac = focusZone === 'terminal' ? 0.5 : focusZone === 'editor' ? 0.2 : 0.3
+        setRightW(Math.round(w * rightFrac))
       }
-    window.addEventListener('resize', applyProportions)
-    return () => window.removeEventListener('resize', applyProportions)
-  }, [])
+    }
+    apply()
+    window.addEventListener('resize', apply)
+    return () => window.removeEventListener('resize', apply)
+  }, [focusZone])
 
   // Seed explorer expansion from the tree's `open` flags once per opened project.
   const seededRoot = useRef<string | null | undefined>(undefined)
@@ -222,6 +237,7 @@ export function App(): React.ReactElement {
 
   function openFile(path: string, opts: { diff?: boolean; line?: number } = {}): void {
     const changed = !!proj.diffs[path]
+    setFocusZone('editor')
     actions.ensureFile(path)
     setTabs((t) => t.some((x) => x.path === path) ? t : [...t, { path }])
     setActive(path)
@@ -370,12 +386,12 @@ export function App(): React.ReactElement {
             <FileTree tree={proj.tree} openDirs={openDirs} toggleDir={toggleDir} onOpen={openFile}
               onContext={openMenu} activePath={active} changeMap={changeMap} committed={NO_COMMITTED} />
           ) : (
-            <div className="phead"><span>Explorer</span></div>
+            <div className="tree-body" />
           )}
         </div>
         <Splitter onDelta={(dx) => setTreeW((w) => clamp(w + dx, 160, 520))} />
 
-        <div className="col editor-col">
+        <div className="col editor-col" onMouseDownCapture={() => setFocusZone('editor')}>
           <Editor tabs={resolvedTabs} active={active} mode={mode}
             setMode={(m) => { if (active) { setTabMode((mm) => ({ ...mm, [active]: m })); setSplitFor(null) } }}
             onActivate={setActive} onClose={closeTab} onContext={openMenu}
@@ -390,7 +406,7 @@ export function App(): React.ReactElement {
         })} />
 
         {/* keyed by root so the PTYs respawn in the new cwd when the project switches */}
-        {proj.ready && <RightColumn key={proj.root ?? 'none'} width={rightW} />}
+        {proj.ready && <RightColumn key={proj.root ?? 'none'} width={rightW} onFocus={() => setFocusZone('terminal')} />}
       </div>
 
       {/* status bar */}

src/renderer/src/components.tsx

@@ -107,14 +107,9 @@ export function GitPanel({ branch, changes, staged, committed, commitMsg, setCom
 
   return (
     <Fragment>
-      <div className="phead">
-        {Icon.branch()}<span>Source Control</span>
-        <span className="ct">{visible.length}</span>
-      </div>
-
       <div className="commit-box">
         <textarea className="commit-input" rows={1} value={commitMsg} spellCheck={false}
-          placeholder={stagedList.length ? `Message — ⇧↵ to commit ${stagedList.length}` : 'Message (stage a file to commit)'}
+          placeholder="Shift+Enter to commit"
           onChange={(e) => setCommitMsg(e.target.value)}
           onKeyDown={(e) => { if (e.key === 'Enter' && (e.shiftKey || e.metaKey || e.ctrlKey) && canCommit) { e.preventDefault(); onCommit() } }} />
       </div>
@@ -223,10 +218,6 @@ export function FileTree({ tree, openDirs, toggleDir, onOpen, onContext, activeP
 }): React.ReactElement {
   return (
     <Fragment>
-      <div className="phead">
-        <span>Explorer</span>
-        <span style={{ marginLeft: 'auto', color: 'var(--fg-3)', textTransform: 'none', letterSpacing: 0, fontFamily: 'var(--mono)', fontSize: 10.5 }}>{tree.name}</span>
-      </div>
       <div className="tree-body">
         <TreeNode node={tree} depth={0} openDirs={openDirs} toggleDir={toggleDir}
           onOpen={onOpen} onContext={onContext} activePath={activePath} changeMap={changeMap} committed={committed} />