feat: **`globals.css`** — Edit `.chat-pane`: remove `width: 3… (+7 more)

- ✅ **`globals.css`** — Edit `.chat-pane`: remove `width: 380px`, add `min-width: 0`, `overflow: hidden`, `transition: width 0.2s ease`
- ✅ **`globals.css`** — Insert `.chat-resize-handle`, `.chat-header`, `.chat-collapse-btn` rules after `.chat-pane` block
- ✅ **`globals.css`** — Append `::-webkit-scrollbar` rules at end of file
- ✅ **`ChatPane.tsx`** — Full rewrite: new props interface, header strip, conditional body, inline width style
- ✅ **`App.tsx`** — Add `chatWidth` + `chatCollapsed` state with lazy localStorage initialisers
- ✅ **`App.tsx`** — Add two `useEffect` persistence hooks
- ✅ **`App.tsx`** — Add `handleResizeMouseDown` function
- ✅ **`App.tsx`** — Update `.main-content` JSX: insert conditional resize handle div, pass new props to `<ChatPane>`

1 files changed, 42 insertions, 0 deletions

diff --git a/renderer/src/App.tsx b/renderer/src/App.tsx
index 7d75196..c3eafd4 100644
--- a/renderer/src/App.tsx
+++ b/renderer/src/App.tsx
@@ -63,15 +63,47 @@ export function App() {
     () => (localStorage.getItem("cf-theme") as Theme) ?? "dark"
   );
 
+  const [chatWidth, setChatWidth] = useState<number>(
+    () => Number(localStorage.getItem("cf-chat-width")) || 380
+  );
+  const [chatCollapsed, setChatCollapsed] = useState<boolean>(
+    () => localStorage.getItem("cf-chat-collapsed") === "true"
+  );
+
   // Keep document.documentElement in sync and persist to localStorage
   useEffect(() => {
     document.documentElement.setAttribute("data-theme", theme);
     localStorage.setItem("cf-theme", theme);
   }, [theme]);
 
+  useEffect(() => {
+    localStorage.setItem("cf-chat-width", String(chatWidth));
+  }, [chatWidth]);
+
+  useEffect(() => {
+    localStorage.setItem("cf-chat-collapsed", String(chatCollapsed));
+  }, [chatCollapsed]);
+
   const handleToggleTheme = () =>
     setTheme((t) => (t === "dark" ? "light" : "dark"));
 
+  const handleResizeMouseDown = (e: React.MouseEvent) => {
+    e.preventDefault();
+    const startX = e.clientX;
+    const startWidth = chatWidth;
+    const onMove = (ev: MouseEvent) => {
+      const delta = startX - ev.clientX; // drag left = wider chat
+      const next = Math.max(180, Math.min(700, startWidth + delta));
+      setChatWidth(next);
+    };
+    const onUp = () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  };
+
   const hasChanges = documentContent !== originalContent;
 
   // Clear error after 5 seconds
@@ -380,6 +412,13 @@ export function App() {
           theme={theme}
         />
 
+        {!chatCollapsed && (
+          <div
+            className="chat-resize-handle"
+            onMouseDown={handleResizeMouseDown}
+          />
+        )}
+
         <ChatPane
           messages={messages}
           onSend={handleSendMessage}
@@ -390,6 +429,9 @@ export function App() {
               ? `Chat with Claude (${selectedSession.phase})...`
               : "Select a session to start"
           }
+          collapsed={chatCollapsed}
+          chatWidth={chatWidth}
+          onToggleCollapse={() => setChatCollapsed((c) => !c)}
         />
       </div>