Refine changes panel controls

packages/ui/src/components/layout/ContextPanel.tsx

@@ -199,7 +199,7 @@ const getTabLabel = (
   }
 
   if (tab.mode === 'diff') {
-    return tab.stagedDiff ? t('contextPanel.mode.stagedDiff') : t('contextPanel.mode.workingDiff');
+    return t('contextPanel.mode.diff');
   }
 
   return getModeLabel(tab.mode, t);
@@ -1997,6 +1997,7 @@ export const ContextPanel: React.FC = () => {
   const panelState = useUIStore((state) => (directoryKey ? state.contextPanelByDirectory[directoryKey] : undefined));
   const closeContextPanel = useUIStore((state) => state.closeContextPanel);
   const closeContextPanelTab = useUIStore((state) => state.closeContextPanelTab);
+  const openContextPanelTab = useUIStore((state) => state.openContextPanelTab);
   const toggleContextPanelExpanded = useUIStore((state) => state.toggleContextPanelExpanded);
   const setContextPanelWidth = useUIStore((state) => state.setContextPanelWidth);
   const setActiveContextPanelTab = useUIStore((state) => state.setActiveContextPanelTab);
@@ -2178,6 +2179,18 @@ export const ContextPanel: React.FC = () => {
 
   const activeChatTabID = activeTab?.mode === 'chat' ? activeTab.id : null;
 
+  const handleDiffScopeChange = React.useCallback((nextScope: 'working' | 'staged') => {
+    if (!directoryKey || activeTab?.mode !== 'diff') {
+      return;
+    }
+
+    openContextPanelTab(directoryKey, {
+      mode: 'diff',
+      targetPath: activeTab.targetPath,
+      stagedDiff: nextScope === 'staged',
+    });
+  }, [activeTab, directoryKey, openContextPanelTab]);
+
   const postThemeSyncToEmbeddedChat = React.useCallback(() => {
     if (typeof window === 'undefined') {
       return;
@@ -2286,6 +2299,7 @@ export const ContextPanel: React.FC = () => {
         pinSelectedFileHeaderToTopOnNavigate
         showOpenInEditorAction
         diffScope={activeTab.stagedDiff ? 'staged' : 'working'}
+        onDiffScopeChange={handleDiffScopeChange}
         targetFilePath={activeTab.targetPath}
         flushContent
       />

packages/ui/src/components/layout/Header.tsx

@@ -717,6 +717,7 @@ export const Header: React.FC<HeaderProps> = ({
   const openContextOverview = useUIStore((state) => state.openContextOverview);
   const openContextPlan = useUIStore((state) => state.openContextPlan);
   const openContextBrowser = useUIStore((state) => state.openContextBrowser);
+  const openContextPanelTab = useUIStore((state) => state.openContextPanelTab);
   const closeContextPanel = useUIStore((state) => state.closeContextPanel);
   const contextPanelByDirectory = useUIStore((state) => state.contextPanelByDirectory);
   const activeMainTab = useUIStore((state) => state.activeMainTab);
@@ -1495,6 +1496,21 @@ export const Header: React.FC<HeaderProps> = ({
     openContextPlan(directory);
   }, [closeContextPanel, contextPanelByDirectory, openContextPlan, openDirectory]);
 
+  const handleOpenContextChanges = React.useCallback(() => {
+    const directory = normalize(openDirectory || '');
+    if (!directory) {
+      return;
+    }
+
+    const panelState = contextPanelByDirectory[directory];
+    if (getActiveContextMode(panelState) === 'diff') {
+      closeContextPanel(directory);
+      return;
+    }
+
+    openContextPanelTab(directory, { mode: 'diff', stagedDiff: false });
+  }, [closeContextPanel, contextPanelByDirectory, openContextPanelTab, openDirectory]);
+
   const handleOpenContextBrowser = React.useCallback(() => {
     const directory = normalize(openDirectory || '');
     if (!directory) {
@@ -1519,6 +1535,15 @@ export const Header: React.FC<HeaderProps> = ({
     return getActiveContextMode(panelState) === 'plan';
   }, [contextPanelByDirectory, openDirectory]);
 
+  const isContextChangesActive = React.useMemo(() => {
+    const directory = normalize(openDirectory || '');
+    if (!directory) {
+      return false;
+    }
+    const panelState = contextPanelByDirectory[directory];
+    return getActiveContextMode(panelState) === 'diff';
+  }, [contextPanelByDirectory, openDirectory]);
+
   const isContextBrowserActive = React.useMemo(() => {
     const directory = normalize(openDirectory || '');
     if (!directory) {
@@ -1992,6 +2017,28 @@ export const Header: React.FC<HeaderProps> = ({
 
   const desktopSidebarActions = (
     <>
+      {!isVSCode ? (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              aria-label={t('header.actions.toggleChangesPanelAria')}
+              aria-pressed={isContextChangesActive}
+              onClick={handleOpenContextChanges}
+              className={desktopHeaderIconButtonClass}
+            >
+              <span className="relative h-5 w-5 overflow-hidden rounded-[2px]">
+                <span className="absolute left-[4px] top-[4px] h-3 w-[5px] bg-[var(--status-error)]/25" />
+                <span className="absolute right-[4px] top-[4px] h-3 w-[5px] bg-[var(--status-success)]/25" />
+                <Icon name="layout-column" className="absolute inset-0 h-5 w-5" />
+              </span>
+            </button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{t('header.actions.toggleChangesPanel')}</p>
+          </TooltipContent>
+        </Tooltip>
+      ) : null}
       {showPlanTab && (
         <Tooltip>
           <TooltipTrigger asChild>