conductor-oss 0.7.1 → 0.9.0

package/web/.next/standalone/packages/web/src/components/board/WorkspaceKanban.tsx

@@ -1865,7 +1865,7 @@ export function WorkspaceKanban({
                                     router.push(
                                       `/sessions/${encodeURIComponent(
                                         primaryLinkedSession.id
-                                      )}?tab=chat`
+                                      )}`
                                     )
                                   }
                                   className="flex w-full items-center justify-between gap-2 rounded-[3px] border border-[rgba(255,255,255,0.05)] bg-[rgba(255,255,255,0.03)] px-2 py-1.5 text-left hover:bg-[var(--vk-bg-hover)]"
@@ -1921,7 +1921,7 @@ export function WorkspaceKanban({
                                       router.push(
                                         `/sessions/${encodeURIComponent(
                                           session.id
-                                        )}?tab=chat`
+                                        )}`
                                       )
                                     }
                                     className="flex w-full items-center justify-between gap-2 rounded-[3px] px-2 py-1.5 text-left hover:bg-[var(--vk-bg-hover)]"
@@ -1962,7 +1962,7 @@ export function WorkspaceKanban({
                                     router.push(
                                       `/sessions/${encodeURIComponent(
                                         unresolvedPrimaryLink
-                                      )}?tab=chat`
+                                      )}`
                                     )
                                   }
                                   className="flex w-full items-center justify-between gap-2 rounded-[3px] px-2 py-1.5 text-left hover:bg-[var(--vk-bg-hover)]"

package/web/.next/standalone/packages/web/src/components/layout/AppShell.tsx

@@ -75,7 +75,7 @@ export function AppShell({
   return (
     <div
       style={shellStyle}
-      className="relative flex h-dvh min-h-[100dvh] w-full max-w-full overflow-hidden bg-[var(--vk-bg-main)] text-[var(--vk-text-normal)]"
+      className="relative flex h-dvh min-h-[100dvh] w-full max-w-full overflow-hidden bg-[var(--vk-bg-main)] text-[var(--vk-text-normal)] [padding-top:env(safe-area-inset-top)] [padding-bottom:env(safe-area-inset-bottom)]"
     >
       {mobileSidebarOpen && (
         <button
@@ -88,7 +88,7 @@ export function AppShell({
 
       <aside
         className={cn(
-          "absolute inset-y-0 left-0 z-30 flex h-full w-[min(90vw,var(--workspace-sidebar-width))] flex-col border-r border-[var(--vk-border)] bg-[var(--vk-bg-panel)] transition-[transform,width] duration-200",
+          "absolute inset-y-0 left-0 z-30 flex h-full w-full max-w-none flex-col border-r border-[var(--vk-border)] bg-[var(--vk-bg-panel)] transition-[transform,width] duration-200 sm:w-[min(90vw,var(--workspace-sidebar-width))] sm:max-w-[28rem]",
           mobileSidebarOpen ? "translate-x-0" : "-translate-x-full",
           desktopSidebarOpen
             ? "lg:w-[var(--workspace-sidebar-width)]"
@@ -125,7 +125,7 @@ export function AppShell({
           <button
             type="button"
             onClick={onToggleSidebar}
-            className="absolute left-2 top-2 z-40 inline-flex h-7 w-7 items-center justify-center rounded-[4px] border border-[var(--vk-border)] bg-[var(--vk-bg-panel)] text-[var(--vk-text-muted)] hover:bg-[var(--vk-bg-hover)] lg:hidden"
+            className="absolute left-2 top-2 z-40 inline-flex h-8 w-8 items-center justify-center rounded-[6px] border border-[var(--vk-border)] bg-[var(--vk-bg-panel)] text-[var(--vk-text-muted)] shadow-[0_10px_24px_rgba(0,0,0,0.28)] hover:bg-[var(--vk-bg-hover)] lg:hidden"
             aria-label="Open workspace panel"
           >
             <PanelLeftOpen className="h-5 w-5" />

package/web/.next/standalone/packages/web/src/components/layout/Sidebar.tsx

@@ -218,11 +218,11 @@ function SessionDiffBadge({
   return (
     <span
       className={cn(
-        "shrink-0 rounded-[10px] px-3 py-1.5 font-mono text-[12px] leading-none tabular-nums",
+        "inline-flex shrink-0 items-center rounded-[10px] px-3 py-1.5 font-mono text-[12px] leading-none tabular-nums",
         isSelected ? "bg-[rgba(255,255,255,0.1)]" : "bg-[rgba(255,255,255,0.06)]",
       )}
     >
-      <span className="flex items-center gap-3">
+      <span className="inline-flex items-center gap-3">
         <span className="text-[#18c58f]">+{additions}</span>
         <span className="text-[#f26d6d]">−{deletions}</span>
       </span>
@@ -296,36 +296,35 @@ export function Sidebar({
   }, [filtered]);
 
   useEffect(() => {
-    const controller = new AbortController();
+    let cancelled = false;
     const sessionsToFetch = orderedSessions.filter((session) => {
       const cacheKey = getSessionDiffCacheKey(session);
       return diffStatsBySessionId[session.id]?.key !== cacheKey;
     });
 
     if (sessionsToFetch.length === 0) {
-      return () => controller.abort();
+      return () => {
+        cancelled = true;
+      };
     }
 
     void Promise.all(
       sessionsToFetch.map(async (session) => {
         const cacheKey = getSessionDiffCacheKey(session);
         try {
-          const response = await fetch(`/api/sessions/${encodeURIComponent(session.id)}/diff`, {
-            signal: controller.signal,
-          });
+          const response = await fetch(`/api/sessions/${encodeURIComponent(session.id)}/diff`);
           if (!response.ok) {
             return [session.id, { key: cacheKey, stats: null }] as const;
           }
           const payload = await response.json();
           return [session.id, { key: cacheKey, stats: parseSessionDiffPayload(payload) }] as const;
         } catch (error) {
-          if ((error as Error).name === "AbortError") {
-            return null;
-          }
+          console.error("Failed to load session diff stats", error);
           return [session.id, { key: cacheKey, stats: null }] as const;
         }
       }),
     ).then((entries) => {
+      if (cancelled) return;
       const resolvedEntries = entries.filter((entry): entry is readonly [string, SessionDiffStatsCacheEntry] => entry !== null);
       if (resolvedEntries.length === 0) return;
       setDiffStatsBySessionId((current) => {
@@ -337,7 +336,9 @@ export function Sidebar({
       });
     });
 
-    return () => controller.abort();
+    return () => {
+      cancelled = true;
+    };
   }, [diffStatsBySessionId, orderedSessions]);
 
   return (
@@ -381,7 +382,10 @@ export function Sidebar({
               const statusBadge = getStatusBadge(session, level);
               const sessionAgent = getSessionAgent(session);
               const isSelected = session.id === selectedId;
-              const isRunning = level === "working";
+              const isRunning = session.activity === "active"
+                || session.status === "spawning"
+                || session.status === "running"
+                || session.status === "working";
               const isArchiving = archivingId === session.id;
               const hasArchiveError = archiveError === session.id;
 
@@ -402,7 +406,7 @@ export function Sidebar({
                   <SessionRuntimeIcon running={isRunning} />
 
                   <span className="min-w-0 flex-1">
-                    <span className="flex items-start gap-2">
+                    <span className="flex min-w-0 items-start gap-2">
                       <span className="min-w-0 flex flex-1 items-center gap-2">
                         {sessionAgent ? (
                           <span
@@ -418,11 +422,18 @@ export function Sidebar({
                         </span>
                       </span>
                       {diffStats ? (
-                        <SessionDiffBadge
-                          additions={diffStats.additions}
-                          deletions={diffStats.deletions}
-                          isSelected={isSelected}
-                        />
+                        <>
+                          <span className="hidden shrink-0 sm:block">
+                            <SessionDiffBadge
+                              additions={diffStats.additions}
+                              deletions={diffStats.deletions}
+                              isSelected={isSelected}
+                            />
+                          </span>
+                          <span className="shrink-0 rounded-[8px] bg-[rgba(255,255,255,0.06)] px-2.5 py-1 text-[11px] font-medium sm:hidden">
+                            <span className={statusBadge.className}>{statusBadge.label}</span>
+                          </span>
+                        </>
                       ) : (
                         <span className="shrink-0 rounded-[8px] bg-[rgba(255,255,255,0.06)] px-2.5 py-1 text-[11px] font-medium">
                           <span className={statusBadge.className}>{statusBadge.label}</span>

package/web/.next/standalone/packages/web/src/components/layout/TopBar.tsx

@@ -10,8 +10,8 @@ interface TopBarProps {
 
 export const TopBar = memo(function TopBar({ title, onOpenPreferences }: TopBarProps) {
   return (
-    <header className="flex h-12 items-center border-b border-[var(--vk-border)] bg-[var(--vk-bg-panel)] px-4 text-[13px] text-[var(--vk-text-muted)] sm:h-14 sm:px-5 sm:text-[14px]">
-      <div className="min-w-0 flex-1 text-center">
+    <header className="flex h-11 items-center border-b border-[var(--vk-border)] bg-[var(--vk-bg-panel)] pl-12 pr-3 text-[13px] text-[var(--vk-text-muted)] sm:h-14 sm:px-5 sm:text-[14px]">
+      <div className="min-w-0 flex-1 text-left sm:text-center">
         <span className="block truncate font-medium tracking-[0.01em] text-[var(--vk-text-normal)]">
           {title ?? "All Projects"}
         </span>
@@ -21,7 +21,7 @@ export const TopBar = memo(function TopBar({ title, onOpenPreferences }: TopBarP
           <button
             type="button"
             onClick={onOpenPreferences}
-            className="inline-flex h-8 w-8 items-center justify-center rounded-[6px] text-[var(--vk-text-muted)] hover:bg-[var(--vk-bg-hover)] hover:text-[var(--vk-text-normal)]"
+            className="inline-flex h-9 w-9 items-center justify-center rounded-[6px] text-[var(--vk-text-muted)] hover:bg-[var(--vk-bg-hover)] hover:text-[var(--vk-text-normal)]"
             aria-label="Open preferences"
             title="Preferences"
           >

package/web/.next/standalone/packages/web/src/components/sessions/ChatPanel.tsx

@@ -4,6 +4,7 @@ import { useRouter } from "next/navigation";
 import {
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -1347,10 +1348,12 @@ export function ChatPanel({
 
   const endRef = useRef<HTMLDivElement | null>(null);
   const scrollContainerRef = useRef<HTMLDivElement | null>(null);
+  const composerRef = useRef<HTMLTextAreaElement | null>(null);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const modelMenuRef = useRef<HTMLDivElement | null>(null);
   const reasoningMenuRef = useRef<HTMLDivElement | null>(null);
   const shouldStickToBottomRef = useRef(true);
+  const previousScrollTopRef = useRef(0);
   const normalizedAgentName = agentName?.trim() || "";
   const normalizedSessionStatus = sessionStatus?.trim().toLowerCase() ?? "";
   const runtimeCatalog = useMemo(
@@ -1466,6 +1469,10 @@ export function ChatPanel({
     [displayEntries],
   );
 
+  const normalizeWhitespaceOnlyDraft = useCallback(() => {
+    setMessage((current) => (current.trim().length === 0 ? "" : current));
+  }, []);
+
   const updateBottomStickiness = useCallback(() => {
     const container = scrollContainerRef.current;
     if (!container) {
@@ -1473,26 +1480,66 @@ export function ChatPanel({
       return;
     }
 
+    previousScrollTopRef.current = container.scrollTop;
     const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
-    shouldStickToBottomRef.current = distanceFromBottom <= 80;
+    shouldStickToBottomRef.current = distanceFromBottom <= 16;
   }, []);
 
   const scrollToBottom = useCallback((behavior: ScrollBehavior) => {
     shouldStickToBottomRef.current = true;
-    if (typeof window === "undefined") {
+    const container = scrollContainerRef.current;
+    if (!container) {
       endRef.current?.scrollIntoView({ behavior, block: "end" });
       return;
     }
 
     window.requestAnimationFrame(() => {
-      endRef.current?.scrollIntoView({ behavior, block: "end" });
+      container.scrollTo({
+        top: container.scrollHeight,
+        behavior,
+      });
     });
   }, []);
 
   useEffect(() => {
     shouldStickToBottomRef.current = true;
+    previousScrollTopRef.current = 0;
   }, [sessionId]);
 
+  useLayoutEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) {
+      return;
+    }
+
+    if (shouldStickToBottomRef.current) {
+      previousScrollTopRef.current = container.scrollTop;
+      return;
+    }
+
+    container.scrollTop = previousScrollTopRef.current;
+  }, [feedItems, hasStreamingEntry, parserState, runtimeStatus, sending]);
+
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (document.hidden) {
+        return;
+      }
+      normalizeWhitespaceOnlyDraft();
+    };
+
+    const handleWindowFocus = () => {
+      normalizeWhitespaceOnlyDraft();
+    };
+
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    window.addEventListener("focus", handleWindowFocus);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+      window.removeEventListener("focus", handleWindowFocus);
+    };
+  }, [normalizeWhitespaceOnlyDraft]);
+
   const prevEntryCountRef = useRef(0);
   useEffect(() => {
     const count = displayEntries.length;
@@ -1606,7 +1653,7 @@ export function ChatPanel({
       setMessage("");
       setAttachments([]);
       if (data?.sessionId && data.sessionId !== sessionId) {
-        router.push(`/sessions/${encodeURIComponent(data.sessionId)}?tab=chat`);
+        router.push(`/sessions/${encodeURIComponent(data.sessionId)}`);
         return;
       }
       await refresh();
@@ -1733,7 +1780,12 @@ export function ChatPanel({
         <div
           ref={scrollContainerRef}
           onScroll={updateBottomStickiness}
-          className="flex-1 overflow-y-auto px-3 pt-3 sm:px-4"
+          onWheelCapture={(event) => {
+            if (event.deltaY < 0) {
+              shouldStickToBottomRef.current = false;
+            }
+          }}
+          className="flex-1 overflow-y-auto px-3 pt-3 sm:px-4 [overflow-anchor:none]"
         >
           <div className="mx-auto flex w-full max-w-[768px] flex-col gap-5 pb-6">
             {loading && displayEntries.length === 0 ? (
@@ -1955,8 +2007,12 @@ export function ChatPanel({
 
               <div className="px-2 py-2">
                 <textarea
+                  ref={composerRef}
                   value={message}
                   onChange={(event) => setMessage(event.target.value)}
+                  onFocus={() => {
+                    normalizeWhitespaceOnlyDraft();
+                  }}
                   onKeyDown={handleComposerKeyDown}
                   placeholder="Continue working on this task..."
                   rows={1}

package/web/.next/standalone/packages/web/src/components/sessions/SessionDetail.tsx

@@ -1,37 +1,51 @@
 "use client";
 
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import {
   FileCode,
   Globe,
   LayoutDashboard,
-  MessageSquare,
+  SquareTerminal,
 } from "lucide-react";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/Tabs";
 import { Card, CardContent } from "@/components/ui/Card";
 import { Badge } from "@/components/ui/Badge";
 import { useSession } from "@/hooks/useSession";
-import { AgentTileIcon } from "@/components/AgentTileIcon";
 import { SessionOverview } from "./SessionOverview";
 import { SessionDiff } from "./SessionDiff";
-import { ChatPanel } from "./ChatPanel";
 import { SessionPreview } from "./SessionPreview";
+import { SessionTerminal } from "./SessionTerminal";
+import type { TerminalInsertRequest } from "./terminalInsert";
 
 interface SessionDetailProps {
   sessionId: string;
 }
 
-type SessionTab = "overview" | "chat" | "diff" | "preview";
+type SessionTab = "overview" | "terminal" | "diff" | "preview";
 
 function resolveSessionTab(value: string | null): SessionTab {
-  if (value === "overview" || value === "chat" || value === "diff" || value === "preview") {
+  if (value === "overview" || value === "terminal" || value === "diff" || value === "preview") {
     return value;
   }
-  if (value === "terminal") {
-    return "chat";
+  return "terminal";
+}
+
+function getCompactSessionStatusLabel(status: string): string {
+  switch (status) {
+    case "needs_input":
+      return "input";
+    case "working":
+      return "working";
+    case "running":
+      return "running";
+    case "spawning":
+      return "spawn";
+    case "queued":
+      return "queued";
+    default:
+      return status.replace(/[_-]+/g, " ");
   }
-  return "chat";
 }
 
 export function SessionDetail({ sessionId }: SessionDetailProps) {
@@ -39,6 +53,9 @@ export function SessionDetail({ sessionId }: SessionDetailProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { session, loading, error } = useSession(sessionId);
+  const terminalInsertNonceRef = useRef(0);
+  const autoPreviewOpenedRef = useRef(false);
+  const [pendingTerminalInsert, setPendingTerminalInsert] = useState<TerminalInsertRequest | null>(null);
   const activeTab = useMemo(
     () => resolveSessionTab(searchParams.get("tab")),
     [searchParams],
@@ -46,7 +63,7 @@ export function SessionDetail({ sessionId }: SessionDetailProps) {
   const handleTabChange = useCallback((value: string) => {
     const nextTab = resolveSessionTab(value);
     const params = new URLSearchParams(searchParams.toString());
-    if (nextTab === "chat") {
+    if (nextTab === "terminal") {
       params.delete("tab");
     } else {
       params.set("tab", nextTab);
@@ -55,6 +72,25 @@ export function SessionDetail({ sessionId }: SessionDetailProps) {
     const nextUrl = nextQuery.length > 0 ? `${pathname}?${nextQuery}` : pathname;
     router.replace(nextUrl, { scroll: false });
   }, [pathname, router, searchParams]);
+  const queueTerminalInsert = useCallback((request: Omit<TerminalInsertRequest, "nonce">) => {
+    terminalInsertNonceRef.current += 1;
+    setPendingTerminalInsert({
+      nonce: terminalInsertNonceRef.current,
+      ...request,
+    });
+  }, []);
+  useEffect(() => {
+    autoPreviewOpenedRef.current = false;
+    terminalInsertNonceRef.current = 0;
+    setPendingTerminalInsert(null);
+  }, [sessionId]);
+  const handlePreviewConnectionChange = useCallback((connected: boolean) => {
+    if (!connected || activeTab !== "terminal" || autoPreviewOpenedRef.current) {
+      return;
+    }
+    autoPreviewOpenedRef.current = true;
+    handleTabChange("preview");
+  }, [activeTab, handleTabChange]);
 
   if (loading) {
     return (
@@ -96,63 +132,80 @@ export function SessionDetail({ sessionId }: SessionDetailProps) {
   const agentName = session.metadata["agent"]?.trim() ?? "";
   const sessionModel = session.metadata["model"]?.trim() ?? "";
   const sessionReasoningEffort = session.metadata["reasoningEffort"]?.trim() ?? "";
+  const compactStatusLabel = getCompactSessionStatusLabel(status);
 
   return (
     <div className="flex h-full min-h-0 flex-col">
-      <Tabs value={activeTab} onValueChange={handleTabChange} className="flex min-h-0 flex-1 flex-col gap-2 p-2 sm:p-3">
-        <div className="flex min-w-0 flex-col gap-2 sm:flex-row sm:items-center">
-          <TabsList className="w-full sm:w-fit">
-            <TabsTrigger value="overview">
+      <Tabs key={sessionId} value={activeTab} onValueChange={handleTabChange} className="flex min-h-0 flex-1 flex-col gap-1.5 p-1.5 sm:gap-2 sm:p-3">
+        <div className="flex min-w-0 flex-col gap-1.5 sm:gap-2">
+          <TabsList className="grid w-full grid-cols-4 sm:w-fit sm:inline-flex">
+            <TabsTrigger value="overview" className="justify-center px-2 text-[11px] sm:px-2.5 sm:text-[12px]">
               <LayoutDashboard className="h-3.5 w-3.5" />
               Overview
             </TabsTrigger>
-            <TabsTrigger value="chat">
-              {agentName
-                ? <AgentTileIcon seed={{ label: agentName }} className="h-6 w-6" />
-                : <MessageSquare className="h-3.5 w-3.5" />}
-              Chat
+            <TabsTrigger value="terminal" className="justify-center px-2 text-[11px] sm:px-2.5 sm:text-[12px]">
+              <SquareTerminal className="h-3.5 w-3.5" />
+              Terminal
             </TabsTrigger>
-            <TabsTrigger value="preview">
+            <TabsTrigger value="preview" className="justify-center px-2 text-[11px] sm:px-2.5 sm:text-[12px]">
               <Globe className="h-3.5 w-3.5" />
               Preview
             </TabsTrigger>
-            <TabsTrigger value="diff">
+            <TabsTrigger value="diff" className="justify-center px-2 text-[11px] sm:px-2.5 sm:text-[12px]">
               <FileCode className="h-3.5 w-3.5" />
               Diff
             </TabsTrigger>
           </TabsList>
-          <div className="flex min-w-0 items-center gap-2">
-            <Badge variant="outline" className="h-[23px]">
-              {status}
+          <div className="flex min-w-0 items-center justify-between gap-2">
+            <Badge variant="outline" className="h-[23px] max-w-full">
+              <span className="sm:hidden">{compactStatusLabel}</span>
+              <span className="hidden sm:inline">{status}</span>
             </Badge>
-            <span className="min-w-0 truncate font-mono text-[10px] text-[var(--vk-text-muted)]">{sessionId}</span>
+            <span className="font-mono text-[10px] text-[var(--vk-text-muted)] sm:hidden">{sessionId.slice(0, 6)}</span>
+            <span className="hidden min-w-0 truncate font-mono text-[10px] text-[var(--vk-text-muted)] sm:block">{sessionId}</span>
           </div>
         </div>
 
-        <TabsContent value="overview" className="min-h-0 flex-1 overflow-auto">
-          <SessionOverview session={session} />
-        </TabsContent>
+        <div className="relative min-h-0 flex-1">
+          <TabsContent value="overview" className="min-h-0 h-full overflow-auto">
+            <SessionOverview key={sessionId} session={session} />
+          </TabsContent>
 
-        <TabsContent value="chat" className="min-h-0 flex-1 overflow-hidden rounded-[3px] border border-[var(--vk-border)] bg-[#212121]">
-          <ChatPanel
-            sessionId={sessionId}
-            agentName={agentName}
-            projectId={session.projectId}
-            sessionModel={sessionModel}
-            sessionReasoningEffort={sessionReasoningEffort}
-          />
-        </TabsContent>
+          <TabsContent
+            value="terminal"
+            forceMount
+            className="min-h-0 h-full overflow-hidden rounded-[3px] border border-[var(--vk-border)] bg-[#212121] focus-visible:outline-none [&[hidden]]:block data-[state=inactive]:pointer-events-none data-[state=inactive]:absolute data-[state=inactive]:inset-0 data-[state=inactive]:invisible data-[state=inactive]:opacity-0"
+          >
+            <SessionTerminal
+              key={sessionId}
+              sessionId={sessionId}
+              agentName={agentName}
+              projectId={session.projectId}
+              sessionModel={sessionModel}
+              sessionReasoningEffort={sessionReasoningEffort}
+              sessionState={status}
+              active={activeTab === "terminal"}
+              pendingInsert={pendingTerminalInsert}
+            />
+          </TabsContent>
 
-        <TabsContent value="preview" className="min-h-0 flex-1 overflow-auto">
-          <SessionPreview
-            sessionId={sessionId}
-            projectId={session.projectId}
-          />
-        </TabsContent>
+          <TabsContent
+            value="preview"
+            forceMount
+            className="min-h-0 h-full overflow-auto focus-visible:outline-none [&[hidden]]:block data-[state=inactive]:pointer-events-none data-[state=inactive]:absolute data-[state=inactive]:inset-0 data-[state=inactive]:invisible data-[state=inactive]:opacity-0"
+          >
+            <SessionPreview
+              key={sessionId}
+              sessionId={sessionId}
+              onQueueTerminalInsert={queueTerminalInsert}
+              onConnectionChange={handlePreviewConnectionChange}
+            />
+          </TabsContent>
 
-        <TabsContent value="diff" className="min-h-0 flex-1 overflow-auto">
-          <SessionDiff sessionId={sessionId} />
-        </TabsContent>
+          <TabsContent value="diff" className="min-h-0 h-full overflow-auto">
+            <SessionDiff key={sessionId} sessionId={sessionId} />
+          </TabsContent>
+        </div>
       </Tabs>
     </div>
   );