feat: live diff panel alongside session terminal

Session tab now has a "Show Diffs" toggle button. When enabled,
the terminal splits horizontally: live session on the left, diff
review panel on the right. Diffs auto-refresh every 5 seconds while
the session is active.

DiffReview component gains refreshInterval prop (auto-poll) and
compact prop (narrower file tree for side panel use).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: zanetworker

web/src/components/DiffReview.tsx

@@ -23,9 +23,11 @@ interface FileDiff {
 
 interface Props {
   sessionFile: string;
+  refreshInterval?: number;
+  compact?: boolean;
 }
 
-export function DiffReview({ sessionFile }: Props) {
+export function DiffReview({ sessionFile, refreshInterval, compact }: Props) {
   const [files, setFiles] = useState<FileDiff[]>([]);
   const [totalAdded, setTotalAdded] = useState(0);
   const [totalRemoved, setTotalRemoved] = useState(0);
@@ -37,22 +39,32 @@ export function DiffReview({ sessionFile }: Props) {
 
   useEffect(() => {
     if (!sessionFile) return;
-    setLoading(true);
-    fetch(`/api/sessions/diffs?file=${encodeURIComponent(sessionFile)}`)
-      .then(r => r.ok ? r.json() : null)
-      .then(data => {
-        if (data) {
-          setFiles(data.files || []);
-          setTotalAdded(data.totalAdded || 0);
-          setTotalRemoved(data.totalRemoved || 0);
-          if (data.files?.length > 0) {
-            setSelectedFile(data.files[0].path);
+
+    const fetchDiffs = (isInitial: boolean) => {
+      if (isInitial) setLoading(true);
+      fetch(`/api/sessions/diffs?file=${encodeURIComponent(sessionFile)}`)
+        .then(r => r.ok ? r.json() : null)
+        .then(data => {
+          if (data) {
+            setFiles(data.files || []);
+            setTotalAdded(data.totalAdded || 0);
+            setTotalRemoved(data.totalRemoved || 0);
+            if (isInitial && data.files?.length > 0) {
+              setSelectedFile(data.files[0].path);
+            }
           }
-        }
-        setLoading(false);
-      })
-      .catch(() => setLoading(false));
-  }, [sessionFile]);
+          if (isInitial) setLoading(false);
+        })
+        .catch(() => { if (isInitial) setLoading(false); });
+    };
+
+    fetchDiffs(true);
+
+    if (refreshInterval && refreshInterval > 0) {
+      const id = setInterval(() => fetchDiffs(false), refreshInterval);
+      return () => clearInterval(id);
+    }
+  }, [sessionFile, refreshInterval]);
 
   if (loading) {
     return (
@@ -110,7 +122,7 @@ export function DiffReview({ sessionFile }: Props) {
       <div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
         {/* File tree */}
         <div style={{
-          width: 240, borderRight: '1px solid var(--border)',
+          width: compact ? 180 : 240, borderRight: '1px solid var(--border)',
           overflowY: 'auto', flexShrink: 0,
         }}>
           <input

web/src/components/RightPanel.tsx

@@ -27,6 +27,7 @@ export function RightPanel({ agent, onClose, isFullscreen, onToggleFullscreen }:
     return saved ? parseInt(saved) : 440;
   });
   const [isResizing, setIsResizing] = useState(false);
+  const [showSessionDiffs, setShowSessionDiffs] = useState(false);
   const panelRef = useRef<HTMLDivElement>(null);
 
   const turns = useTraceStream(agent.SessionID, agent.SessionFile);
@@ -357,18 +358,37 @@ export function RightPanel({ agent, onClose, isFullscreen, onToggleFullscreen }:
                   {agent.ProviderName === 'codex' ? 'Session will resume with --full-auto' : 'Session will resume with --dangerously-skip-permissions'}
                 </span>
               )}
+              <button
+                onClick={() => setShowSessionDiffs(prev => !prev)}
+                style={{
+                  marginLeft: 'auto', padding: '2px 8px', borderRadius: 3,
+                  border: `1px solid ${showSessionDiffs ? 'var(--green)' : 'var(--border)'}`,
+                  background: showSessionDiffs ? 'rgba(105,223,115,0.1)' : 'transparent',
+                  color: showSessionDiffs ? 'var(--green)' : 'var(--fg-3)',
+                  fontSize: 10, fontWeight: 600, cursor: 'pointer',
+                }}
+              >
+                {showSessionDiffs ? '✓ Diffs' : 'Show Diffs'}
+              </button>
             </div>
           )}
-          <div style={{ flex: 1, position: 'relative', minHeight: 0, overflow: 'hidden' }}>
-            {sessionMounted && (
-              <SessionView
-                tmuxSession={agent.TMuxSession || undefined}
-                sessionId={agent.SessionID || undefined}
-                provider={agent.ProviderName || undefined}
-                workingDir={agent.WorkingDir || undefined}
-                skipPermissions={skipPermissions}
-                key={`${agent.TMuxSession || agent.SessionID}-${skipPermissions}`}
-              />
+          <div style={{ flex: 1, display: 'flex', minHeight: 0, overflow: 'hidden' }}>
+            <div style={{ flex: 1, position: 'relative', minHeight: 0, overflow: 'hidden' }}>
+              {sessionMounted && (
+                <SessionView
+                  tmuxSession={agent.TMuxSession || undefined}
+                  sessionId={agent.SessionID || undefined}
+                  provider={agent.ProviderName || undefined}
+                  workingDir={agent.WorkingDir || undefined}
+                  skipPermissions={skipPermissions}
+                  key={`${agent.TMuxSession || agent.SessionID}-${skipPermissions}`}
+                />
+              )}
+            </div>
+            {showSessionDiffs && (
+              <div style={{ width: '50%', borderLeft: '1px solid var(--border)', display: 'flex', flexDirection: 'column', minHeight: 0 }}>
+                <DiffReview sessionFile={agent.SessionFile} refreshInterval={5000} compact />
+              </div>
             )}
           </div>
         </div>