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, 51 insertions, 29 deletions

diff --git a/renderer/src/components/ChatPane.tsx b/renderer/src/components/ChatPane.tsx
index 917d462..40e682c 100644
--- a/renderer/src/components/ChatPane.tsx
+++ b/renderer/src/components/ChatPane.tsx
@@ -7,6 +7,9 @@ interface ChatPaneProps {
   isLoading: boolean;
   disabled: boolean;
   placeholder: string;
+  collapsed: boolean;
+  chatWidth: number;
+  onToggleCollapse: () => void;
 }
 
 export function ChatPane({
@@ -15,6 +18,9 @@ export function ChatPane({
   isLoading,
   disabled,
   placeholder,
+  collapsed,
+  chatWidth,
+  onToggleCollapse,
 }: ChatPaneProps) {
   const [input, setInput] = useState("");
   const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -30,37 +36,53 @@ export function ChatPane({
   };
 
   return (
-    <div className="chat-pane">
-      <div className="chat-messages">
-        {messages.map((msg) => (
-          <div key={msg.id} className={`message ${msg.role}`}>
-            <div className="message-content">{msg.content}</div>
-          </div>
-        ))}
-        {isLoading && (
-          <div className="message assistant loading">
-            <div className="message-content">Thinking...</div>
-          </div>
-        )}
-        <div ref={messagesEndRef} />
-      </div>
-
-      <div className="chat-input">
-        <input
-          type="text"
-          value={input}
-          onChange={(e) => setInput(e.target.value)}
-          onKeyDown={(e) => e.key === "Enter" && !e.shiftKey && handleSend()}
-          placeholder={placeholder}
-          disabled={disabled || isLoading}
-        />
-        <button
-          onClick={handleSend}
-          disabled={disabled || isLoading || !input.trim()}
-        >
-          Send
+    <div
+      className="chat-pane"
+      style={{ width: collapsed ? 28 : chatWidth }}
+    >
+      <div className="chat-header">
+        {!collapsed && <span>Chat</span>}
+        <button className="chat-collapse-btn" onClick={onToggleCollapse}>
+          {collapsed ? "⟨" : "⟩"}
         </button>
       </div>
+
+      {!collapsed && (
+        <>
+          <div className="chat-messages">
+            {messages.map((msg) => (
+              <div key={msg.id} className={`message ${msg.role}`}>
+                <div className="message-content">{msg.content}</div>
+              </div>
+            ))}
+            {isLoading && (
+              <div className="message assistant loading">
+                <div className="message-content">Thinking...</div>
+              </div>
+            )}
+            <div ref={messagesEndRef} />
+          </div>
+
+          <div className="chat-input">
+            <input
+              type="text"
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={(e) =>
+                e.key === "Enter" && !e.shiftKey && handleSend()
+              }
+              placeholder={placeholder}
+              disabled={disabled || isLoading}
+            />
+            <button
+              onClick={handleSend}
+              disabled={disabled || isLoading || !input.trim()}
+            >
+              Send
+            </button>
+          </div>
+        </>
+      )}
     </div>
   );
 }