From 56ee7af2b3575cd2f8021f269ae636fc22e73764 Mon Sep 17 00:00:00 2001
From: Ben <b.w.donnelly1@googlemail.com>
Date: Wed, 8 Apr 2026 22:36:06 +0200
Subject: [PATCH 1/2] Make PR drawer resizable with drag handle

Replace the fixed-width PR drawer with a resizable panel that can be
dragged between 250px and 800px wide. Adds a visible drag handle on the
left edge with accent hover/active states and prevents text selection
during resize.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/renderer/src/components/FocusView.tsx | 42 ++++++++++++++++++++---
 1 file changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/renderer/src/components/FocusView.tsx b/src/renderer/src/components/FocusView.tsx
index 9e5972a..15805bc 100644
--- a/src/renderer/src/components/FocusView.tsx
+++ b/src/renderer/src/components/FocusView.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef, useCallback } from 'react'
+import { useState, useRef, useCallback, useEffect } from 'react'
 import type { Session, ShellTerminal, ChangedFile } from '../types'
 import { useTerminalMount } from '../hooks/useTerminalMount'
 import { stripAnsi } from '../../../shared/stripAnsi'
@@ -42,6 +42,9 @@ export default function FocusView({
   const [terminalCollapsed, setTerminalCollapsed] = useState(false)
   const [showChanges, setShowChanges] = useState(false)
   const [showPrDrawer, setShowPrDrawer] = useState(false)
+  const [prDrawerWidth, setPrDrawerWidth] = useState(350)
+  const [prDragging, setPrDragging] = useState(false)
+  const prDragRef = useRef<{ startX: number; startW: number } | null>(null)
   const [editingSummary, setEditingSummary] = useState(false)
   const [summaryDraft, setSummaryDraft] = useState('')
   const summaryInputRef = useRef<HTMLTextAreaElement>(null)
@@ -60,8 +63,35 @@ export default function FocusView({
     [session.id]
   )
 
+  const handlePrDragStart = useCallback((e: React.MouseEvent) => {
+    e.preventDefault()
+    prDragRef.current = { startX: e.clientX, startW: prDrawerWidth }
+    setPrDragging(true)
+  }, [prDrawerWidth])
+
+  useEffect(() => {
+    const onMouseMove = (e: MouseEvent): void => {
+      if (!prDragRef.current) return
+      const delta = prDragRef.current.startX - e.clientX
+      const newWidth = Math.min(800, Math.max(250, prDragRef.current.startW + delta))
+      setPrDrawerWidth(newWidth)
+    }
+    const onMouseUp = (): void => {
+      if (prDragRef.current) {
+        prDragRef.current = null
+        setPrDragging(false)
+      }
+    }
+    document.addEventListener('mousemove', onMouseMove)
+    document.addEventListener('mouseup', onMouseUp)
+    return () => {
+      document.removeEventListener('mousemove', onMouseMove)
+      document.removeEventListener('mouseup', onMouseUp)
+    }
+  }, [])
+
   return (
-    <div className="h-full flex flex-col">
+    <div className={`h-full flex flex-col ${prDragging ? 'select-none cursor-col-resize' : ''}`}>
       {/* Toolbar */}
       <div className="flex items-center justify-between px-4 py-2 bg-surface-overlay border-b border-surface-border shrink-0">
         <div className="flex items-center gap-3 min-w-0 flex-1">
@@ -281,8 +311,12 @@ export default function FocusView({
         {/* PR drawer (right side) */}
         {showPrDrawer && session.pr && session.pr.state !== 'none' && (
           <>
-            <div className="w-px bg-surface-border shrink-0" />
-            <div className="w-[350px] min-w-[280px] max-w-[450px] shrink-0">
+            {/* Resize handle */}
+            <div
+              onMouseDown={handlePrDragStart}
+              className="w-1.5 shrink-0 cursor-col-resize bg-surface-border hover:bg-accent/40 active:bg-accent/60 transition-colors"
+            />
+            <div className="shrink-0" style={{ width: prDrawerWidth }}>
               <PrDrawer
                 cwd={session.cwd}
                 prNumber={session.pr.number}

From d743f12b74deeefc574359ccb0bf2fb2ae760e90 Mon Sep 17 00:00:00 2001
From: Ben <b.w.donnelly1@googlemail.com>
Date: Wed, 8 Apr 2026 22:40:59 +0200
Subject: [PATCH 2/2] Fix formatting in FocusView.tsx

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/renderer/src/components/FocusView.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/renderer/src/components/FocusView.tsx b/src/renderer/src/components/FocusView.tsx
index 15805bc..ef88942 100644
--- a/src/renderer/src/components/FocusView.tsx
+++ b/src/renderer/src/components/FocusView.tsx
@@ -63,11 +63,14 @@ export default function FocusView({
     [session.id]
   )
 
-  const handlePrDragStart = useCallback((e: React.MouseEvent) => {
-    e.preventDefault()
-    prDragRef.current = { startX: e.clientX, startW: prDrawerWidth }
-    setPrDragging(true)
-  }, [prDrawerWidth])
+  const handlePrDragStart = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault()
+      prDragRef.current = { startX: e.clientX, startW: prDrawerWidth }
+      setPrDragging(true)
+    },
+    [prDrawerWidth]
+  )
 
   useEffect(() => {
     const onMouseMove = (e: MouseEvent): void => {