feat(agents): show the Changes pane only when it's useful, toggled from the task header (#421)

The Changes pane took a fixed column next to every agent conversation, including tasks that changed nothing. It is now shown while the task has changes (so it appears when the agent first edits a file) and toggled from a Changes button with the file count in the task header; once toggled, the choice is kept per task.

Co-authored-by: a-rookie-of-C-language <186315048+a-rookie-of-C-language@users.noreply.github.com>

src/features/agents/Session.module.css

@@ -3,7 +3,7 @@
   min-height: 0;
   min-width: 0;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 280px;
+  grid-template-columns: minmax(0, 1fr) auto;
   background: var(--bg-editor);
   color: var(--fg);
 }
@@ -558,6 +558,42 @@
   flex-direction: column;
   min-height: 0;
   min-width: 0;
+  width: 280px;
+}
+.changesCollapsed {
+  width: 28px;
+  align-items: center;
+  padding-top: 4px;
+}
+.changesCollapsed > * {
+  flex: none;
+}
+.changesRail {
+  flex: 1;
+  min-height: 0;
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 0 8px;
+  border: none;
+  background: transparent;
+  color: var(--fg-subtle);
+  font: inherit;
+  cursor: pointer;
+}
+.changesRail:hover {
+  color: var(--fg-strong);
+}
+.changesRailLabel {
+  writing-mode: vertical-rl;
+  font-size: var(--fs-small);
+  letter-spacing: 0.02em;
+}
+.changesRailCount {
+  font-size: var(--fs-small);
+  color: var(--fg-muted);
 }
 .changesHeader {
   display: flex;

src/features/agents/SessionEditor.tsx

@@ -1216,10 +1216,58 @@ const KIND_COLOR: Partial<Record<AgentChange["kind"], string>> = {
   conflicted: "var(--vcs-conflict)",
 };
 
+const CHANGES_COLLAPSED_KEY = "openidea.agents.changesCollapsed.v1";
+
+function loadCollapsed(): boolean {
+  try {
+    const raw = globalThis.localStorage?.getItem(CHANGES_COLLAPSED_KEY);
+    // Collapsed on first run: the chat is the focus, the diff opens on demand.
+    return raw === null ? true : (JSON.parse(raw) as boolean);
+  } catch {
+    return true;
+  }
+}
+
+function saveCollapsed(value: boolean) {
+  try {
+    globalThis.localStorage?.setItem(CHANGES_COLLAPSED_KEY, JSON.stringify(value));
+  } catch {
+    /* storage unavailable */
+  }
+}
+
 function ChangesPane({ task, changes, head }: { task: AgentTask; changes: AgentChange[] | null; head: string | null }) {
   const [selected, setSelected] = useState<Set<string>>(() => new Set());
+  const [collapsed, setCollapsed] = useState<boolean>(loadCollapsed);
   const added = changes?.reduce((n, c) => n + c.added, 0) ?? 0;
   const removed = changes?.reduce((n, c) => n + c.removed, 0) ?? 0;
+  const toggleCollapsed = (next: boolean) => {
+    setCollapsed(next);
+    saveCollapsed(next);
+  };
+  if (collapsed) {
+    return (
+      <aside className={clsx(styles.changes, styles.changesCollapsed)} aria-label={tx("Changes")}>
+        <IconButton
+          icon="chevron-left"
+          title={tx("Show changes")}
+          size="small"
+          onClick={() => toggleCollapsed(false)}
+        />
+        <button
+          type="button"
+          className={styles.changesRail}
+          title={tx("Show changes")}
+          onClick={() => toggleCollapsed(false)}
+        >
+          <span className={styles.changesRailLabel}>
+            <T>Changes</T>
+          </span>
+          {changes && changes.length > 0 && <span className={styles.changesRailCount}>{changes.length}</span>}
+        </button>
+      </aside>
+    );
+  }
   return (
     <aside className={styles.changes} aria-label={tx("Changes")}>
       <div className={styles.changesHeader}>
@@ -1233,6 +1281,12 @@ function ChangesPane({ task, changes, head }: { task: AgentTask; changes: AgentC
         )}
         <span className={styles.bannerSpacer} />
         <IconButton icon="refresh" title="Refresh" size="small" onClick={() => void refreshChanges(task.id)} />
+        <IconButton
+          icon="chevron-right"
+          title={tx("Hide changes")}
+          size="small"
+          onClick={() => toggleCollapsed(true)}
+        />
       </div>
       {(head ?? task.base) && (
         <div className={styles.changesSummary}>

src/platform/locales/text/zh.json

@@ -906,6 +906,7 @@
   "Hide": "隐藏",
   "Hide Active Tool Window": "隐藏活动工具窗口",
   "Hide All Tool Windows": "隐藏所有工具窗口",
+  "Hide changes": "隐藏更改",
   "Hide Coverage": "隐藏覆盖率",
   "Hide Library Frames": "隐藏库帧",
   "Hide Replace": "隐藏替换",
@@ -1916,6 +1917,7 @@
   "Show Commit in Git Log": "在 Git 日志中显示提交",
   "Show Container Log": "显示容器日志",
   "Show Context Actions": "显示上下文操作",
+  "Show changes": "显示更改",
   "Show Coverage": "显示覆盖率",
   "Show Debug Tool Window": "显示调试工具窗口",
   "Show Diff": "显示差异",