add collapsible sections to sidebar

staged/src/lib/Sidebar.svelte

@@ -159,6 +159,7 @@
 
   let collapsedDirs = $state(new Set<string>());
   let collapsedSearchResults = $state(new Set<string>());
+  let collapsedSections = $state(new Set<string>());
   let treeView = $state(false);
   let showCommitModal = $state(false);
   let copiedFeedback = $state(false);
@@ -473,6 +474,20 @@
     return collapsedDirs.has(path);
   }
 
+  function toggleSection(sectionName: string) {
+    const newSet = new Set(collapsedSections);
+    if (newSet.has(sectionName)) {
+      newSet.delete(sectionName);
+    } else {
+      newSet.add(sectionName);
+    }
+    collapsedSections = newSet;
+  }
+
+  function isSectionCollapsed(sectionName: string): boolean {
+    return collapsedSections.has(sectionName);
+  }
+
   async function toggleSearchResults(path: string) {
     const newSet = new Set(collapsedSearchResults);
     if (newSet.has(path)) {
@@ -1174,6 +1189,17 @@
       {#if needsReview.length > 0}
         <div class="section-header">
           <div class="section-left">
+            <button
+              class="section-collapse-btn"
+              onclick={() => toggleSection('changed')}
+              title={isSectionCollapsed('changed') ? 'Expand section' : 'Collapse section'}
+            >
+              {#if isSectionCollapsed('changed')}
+                <ChevronRight size={14} />
+              {:else}
+                <ChevronDown size={14} />
+              {/if}
+            </button>
             <button
               class="view-toggle"
               onclick={() => (treeView = !treeView)}
@@ -1206,19 +1232,32 @@
             {/if}
           </div>
         </div>
-        <ul class="tree-section">
-          {#if treeView}
-            {@render treeNodes(needsReviewTree, 0, false)}
-          {:else}
-            {@render flatFileList(needsReview, false)}
-          {/if}
-        </ul>
+        {#if !isSectionCollapsed('changed')}
+          <ul class="tree-section">
+            {#if treeView}
+              {@render treeNodes(needsReviewTree, 0, false)}
+            {:else}
+              {@render flatFileList(needsReview, false)}
+            {/if}
+          </ul>
+        {/if}
       {/if}
 
       <!-- Divider with REVIEWED label -->
       {#if reviewed.length > 0}
         <div class="section-header">
           <div class="section-left">
+            <button
+              class="section-collapse-btn"
+              onclick={() => toggleSection('reviewed')}
+              title={isSectionCollapsed('reviewed') ? 'Expand section' : 'Collapse section'}
+            >
+              {#if isSectionCollapsed('reviewed')}
+                <ChevronRight size={14} />
+              {:else}
+                <ChevronDown size={14} />
+              {/if}
+            </button>
             <button
               class="view-toggle"
               onclick={() => (treeView = !treeView)}
@@ -1255,7 +1294,7 @@
       {/if}
 
       <!-- Reviewed section -->
-      {#if reviewed.length > 0}
+      {#if reviewed.length > 0 && !isSectionCollapsed('reviewed')}
         <ul class="tree-section reviewed-section">
           {#if treeView}
             {@render treeNodes(reviewedTree, 0, true)}
@@ -1267,7 +1306,19 @@
 
       <!-- Reference Files section -->
       <div class="section-header">
-        <div class="section-left"></div>
+        <div class="section-left">
+          <button
+            class="section-collapse-btn"
+            onclick={() => toggleSection('reference')}
+            title={isSectionCollapsed('reference') ? 'Expand section' : 'Collapse section'}
+          >
+            {#if isSectionCollapsed('reference')}
+              <ChevronRight size={14} />
+            {:else}
+              <ChevronDown size={14} />
+            {/if}
+          </button>
+        </div>
         <div class="section-divider">
           <span class="divider-label">REFERENCE</span>
           {#if referenceFilesState.files.length > 0}
@@ -1284,7 +1335,7 @@
           </button>
         </div>
       </div>
-      {#if referenceFilesState.files.length > 0}
+      {#if referenceFilesState.files.length > 0 && !isSectionCollapsed('reference')}
         <ul class="tree-section reference-section">
           {#each referenceFilesState.files as refFile (refFile.path)}
             <li class="tree-item-wrapper">
@@ -1321,7 +1372,19 @@
 
       <!-- Comments section -->
       <div class="section-header comments-header">
-        <div class="section-left"></div>
+        <div class="section-left">
+          <button
+            class="section-collapse-btn"
+            onclick={() => toggleSection('comments')}
+            title={isSectionCollapsed('comments') ? 'Expand section' : 'Collapse section'}
+          >
+            {#if isSectionCollapsed('comments')}
+              <ChevronRight size={14} />
+            {:else}
+              <ChevronDown size={14} />
+            {/if}
+          </button>
+        </div>
         <div class="section-divider">
           <span class="divider-label">COMMENTS</span>
           {#if commentsState.comments.length > 0}
@@ -1348,7 +1411,7 @@
           {/if}
         </div>
       </div>
-      {#if commentsState.comments.length > 0}
+      {#if commentsState.comments.length > 0 && !isSectionCollapsed('comments')}
         <ul class="tree-section comments-section">
           {@render commentList()}
         </ul>
@@ -1357,7 +1420,19 @@
       <!-- Agent Chat section -->
       {#if agentState}
         <div class="section-header agent-header">
-          <div class="section-left"></div>
+          <div class="section-left">
+            <button
+              class="section-collapse-btn"
+              onclick={() => toggleSection('agent')}
+              title={isSectionCollapsed('agent') ? 'Expand section' : 'Collapse section'}
+            >
+              {#if isSectionCollapsed('agent')}
+                <ChevronRight size={14} />
+              {:else}
+                <ChevronDown size={14} />
+              {/if}
+            </button>
+          </div>
           <div class="section-divider">
             <span class="divider-label">AGENT</span>
           </div>
@@ -1404,7 +1479,7 @@
     </div>
 
     <!-- Agent Panel outside file-list for flex layout (takes remaining space) -->
-    {#if agentState}
+    {#if agentState && !isSectionCollapsed('agent')}
       <AgentPanel {repoPath} {spec} {files} {selectedFile} {agentState} />
     {/if}
   {/if}
@@ -1645,6 +1720,31 @@
     color: var(--text-muted);
   }
 
+  .section-collapse-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2px;
+    background: none;
+    border: none;
+    border-radius: 3px;
+    color: var(--text-muted);
+    cursor: pointer;
+    transition:
+      background-color 0.1s,
+      color 0.1s;
+  }
+
+  .section-collapse-btn:hover {
+    background-color: var(--bg-hover);
+    color: var(--text-primary);
+  }
+
+  .section-collapse-btn:focus-visible {
+    outline: 2px solid var(--text-accent);
+    outline-offset: -2px;
+  }
+
   .view-toggle {
     display: flex;
     align-items: center;

staged/src/lib/features/agent/AgentPanel.svelte

@@ -805,7 +805,7 @@
     display: flex;
     flex-direction: column;
     flex: 1;
-    min-height: 0;
+    min-height: 250px;
     padding: 0 12px;
   }
 
@@ -815,9 +815,11 @@
   }
 
   .agent-bottom {
-    flex-shrink: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
     padding: 8px 0 0;
-    margin-top: auto;
   }
 
   .agent-input-wrapper {
@@ -1131,6 +1133,10 @@
     border: 1px solid var(--border-subtle);
     border-radius: 6px;
     overflow: hidden;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
   }
 
   .agent-response-header {
@@ -1227,8 +1233,9 @@
     font-size: var(--size-sm);
     color: var(--text-primary);
     word-break: break-word;
-    max-height: 200px;
+    flex: 1;
     overflow-y: auto;
+    min-height: 0;
   }
 
   /* Markdown content styles */