Commit 91c8d4771ccb503a9dde65190b87db642df0a6ea | the-knife

apps/desktop/src/settings/DesktopClientSettings.test.ts+1

...	@@ -41,6 +41,7 @@ const clientSettings: ClientSettings = {	...	@@ -41,6 +41,7 @@ const clientSettings: ClientSettings = {
41	fontSizeTerminal: 12,	41	fontSizeTerminal: 12,
42	fontSmoothing: true,	42	fontSmoothing: true,
43	glassOpacity: 80,	43	glassOpacity: 80,
		44	panelAnimationDurationMs: 0,
44	planModeEnabled: false,	45	planModeEnabled: false,
45	showSkillsInSlashMenu: false,	46	showSkillsInSlashMenu: false,
46	providerModelPreferences: {},	47	providerModelPreferences: {},

apps/web/src/components/AppSidebarLayout.tsx+10-1

...	@@ -17,6 +17,7 @@ import { resolveShortcutCommand, shortcutLabelForCommand } from "../keybindings"	...	@@ -17,6 +17,7 @@ import { resolveShortcutCommand, shortcutLabelForCommand } from "../keybindings"
17	import { cn, isMacPlatform } from "../lib/utils";	17	import { cn, isMacPlatform } from "../lib/utils";
18	import { primaryServerKeybindingsAtom } from "../state/server";	18	import { primaryServerKeybindingsAtom } from "../state/server";
19	import { useEnvironmentIdentificationMode, useLegacySidebarEnabled } from "../hooks/useSettings";	19	import { useEnvironmentIdentificationMode, useLegacySidebarEnabled } from "../hooks/useSettings";
		20	import { usePanelAnimationSettings } from "../panelAnimations";
20	import LegacyThreadSidebar from "./LegacySidebar";	21	import LegacyThreadSidebar from "./LegacySidebar";
21	import ThreadSidebar from "./Sidebar";	22	import ThreadSidebar from "./Sidebar";
22	import { SidebarChromeHeader } from "./sidebar/SidebarChrome";	23	import { SidebarChromeHeader } from "./sidebar/SidebarChrome";
...	@@ -148,6 +149,8 @@ function ProjectProjectionRetention() {	...	@@ -148,6 +149,8 @@ function ProjectProjectionRetention() {
148	export function AppSidebarLayout({ children }: { children: ReactNode }) {	149	export function AppSidebarLayout({ children }: { children: ReactNode }) {
149	const navigate = useNavigate();	150	const navigate = useNavigate();
150	const legacySidebarEnabled = useLegacySidebarEnabled();	151	const legacySidebarEnabled = useLegacySidebarEnabled();
		152	const { active: panelAnimationsActive, durationMs: panelAnimationDurationMs } =
		153	usePanelAnimationSettings();
151	// Settings routes show the settings nav in place of whichever thread	154	// Settings routes show the settings nav in place of whichever thread
152	// sidebar is active.	155	// sidebar is active.
153	const pathname = useLocation({ select: (location) => location.pathname });	156	const pathname = useLocation({ select: (location) => location.pathname });
...	@@ -175,6 +178,7 @@ export function AppSidebarLayout({ children }: { children: ReactNode }) {	...	@@ -175,6 +178,7 @@ export function AppSidebarLayout({ children }: { children: ReactNode }) {
175	});	178	});
176	const sidebarProviderStyle = {	179	const sidebarProviderStyle = {
177	"--sidebar-width": `${sidebarWidth}px`,	180	"--sidebar-width": `${sidebarWidth}px`,
		181	"--panel-animation-duration": `${panelAnimationDurationMs}ms`,
178	...(isMacosDesktop && !isWindowFullscreen	182	...(isMacosDesktop && !isWindowFullscreen
179	? { "--workspace-controls-left": MACOS_TRAFFIC_LIGHTS_LEFT_INSET }	183	? { "--workspace-controls-left": MACOS_TRAFFIC_LIGHTS_LEFT_INSET }
180	: {}),	184	: {}),
...	@@ -218,7 +222,12 @@ export function AppSidebarLayout({ children }: { children: ReactNode }) {	...	@@ -218,7 +222,12 @@ export function AppSidebarLayout({ children }: { children: ReactNode }) {
218	}, [navigate, pathname]);	222	}, [navigate, pathname]);
219		223
220	return (	224	return (
221	<SidebarProvider className="h-dvh! min-h-0!" defaultOpen style={sidebarProviderStyle}>	225	<SidebarProvider
		226	className="h-dvh! min-h-0!"
		227	data-panel-animations={panelAnimationsActive ? "true" : "false"}
		228	defaultOpen
		229	style={sidebarProviderStyle}
		230	>
222	<ProjectProjectionRetention />	231	<ProjectProjectionRetention />
223	<Sidebar	232	<Sidebar
224	side="left"	233	side="left"

apps/web/src/components/ChatView.tsx+147-79

 @@ -217,6 +217,7 @@ import {
   useEnvironmentSettings,
 } from "../hooks/useSettings";
 import { useNowMinute } from "../hooks/useNowMinute";
+import { usePanelAnimationSettings, usePanelPresence } from "../panelAnimations";
 import { useNewThreadHandler } from "../hooks/useHandleNewThread";
 import { useThreadActions } from "../hooks/useThreadActions";
 import { resolveAppModelSelectionForInstance } from "../modelSelection";
 @@ -741,7 +742,7 @@ function serverTerminalIdsStrictSubsetOfClient(
 interface PersistentThreadTerminalDrawerProps {
   threadRef: { environmentId: EnvironmentId; threadId: ThreadId };
   threadId: ThreadId;
-  visible: boolean;
+  active: boolean;
   launchContext: PersistentTerminalLaunchContext | null;
   focusRequestId: number;
   splitShortcutLabel: string | undefined;
 @@ -755,7 +756,7 @@ interface PersistentThreadTerminalDrawerProps {
 const PersistentThreadTerminalDrawer = memo(function PersistentThreadTerminalDrawer({
   threadRef,
   threadId,
-  visible,
+  active,
   launchContext,
   focusRequestId,
   splitShortcutLabel,
 @@ -779,6 +780,7 @@ const PersistentThreadTerminalDrawer = memo(function PersistentThreadTerminalDra
   const terminalUiState = useTerminalUiStateStore((state) =>
     selectThreadTerminalUiState(state.terminalUiStateByThreadKey, threadRef),
   );
+  const visible = active && terminalUiState.terminalOpen;
   const knownTerminalSessions = useKnownTerminalSessions({
     environmentId: threadRef.environmentId,
     threadId,
 @@ -1063,41 +1065,51 @@ const PersistentThreadTerminalDrawer = memo(function PersistentThreadTerminalDra
     [onAddTerminalContext, visible],
   );
-  if (!project || !terminalUiState.terminalOpen || !cwd) {
+  if (!project || (!terminalUiState.terminalOpen && !active) || !cwd) {
     return null;
   }
   return (
-    <div className={visible ? undefined : "hidden"}>
+    <div
-      <ThreadTerminalDrawer
+      className={cn(
-        threadRef={threadRef}
+        "grid shrink-0 overflow-clip",
-        threadId={threadId}
+        active ? (visible ? "grid-rows-[1fr]" : "grid-rows-[0fr]") : "hidden",
-        cwd={cwd}
+        active &&
-        worktreePath={effectiveWorktreePath}
+          "[[data-panel-animations=true]_&]:transition-[grid-template-rows] [[data-panel-animations=true]_&]:[transition-duration:var(--panel-animation-duration)] [[data-panel-animations=true]_&]:ease-out",
-        runtimeEnv={runtimeEnv}
+        active && visible && "[[data-panel-animations=true]_&]:starting:grid-rows-[0fr]!",
-        visible={visible}
+      )}
-        height={terminalUiState.terminalHeight}
+    >
-        // Known-session order is MRU and changes on focus; persisted store order keeps sidebar labels stable.
+      <div className="min-h-0 overflow-clip">
-        terminalIds={terminalUiState.terminalIds}
+        <ThreadTerminalDrawer
-        activeTerminalId={terminalUiState.activeTerminalId}
+          threadRef={threadRef}
-        terminalGroups={terminalUiState.terminalGroups}
+          threadId={threadId}
-        activeTerminalGroupId={terminalUiState.activeTerminalGroupId}
+          cwd={cwd}
-        focusRequestId={focusRequestId + localFocusRequestId + (visible ? 1 : 0)}
+          worktreePath={effectiveWorktreePath}
-        onSplitTerminal={splitTerminal}
+          runtimeEnv={runtimeEnv}
-        onSplitTerminalVertical={splitTerminalVertical}
+          visible={visible}
-        onNewTerminal={createNewTerminal}
+          height={terminalUiState.terminalHeight}
-        splitShortcutLabel={visible ? splitShortcutLabel : undefined}
+          // Known-session order is MRU and changes on focus; persisted store order keeps sidebar labels stable.
-        splitVerticalShortcutLabel={visible ? splitVerticalShortcutLabel : undefined}
+          terminalIds={terminalUiState.terminalIds}
-        newShortcutLabel={visible ? newShortcutLabel : undefined}
+          activeTerminalId={terminalUiState.activeTerminalId}
-        closeShortcutLabel={visible ? closeShortcutLabel : undefined}
+          terminalGroups={terminalUiState.terminalGroups}
-        keybindings={keybindings}
+          activeTerminalGroupId={terminalUiState.activeTerminalGroupId}
-        onActiveTerminalChange={activateTerminal}
+          focusRequestId={focusRequestId + localFocusRequestId + (visible ? 1 : 0)}
-        onCloseTerminal={closeTerminal}
+          onSplitTerminal={splitTerminal}
-        onHeightChange={setTerminalHeight}
+          onSplitTerminalVertical={splitTerminalVertical}
-        onAddTerminalContext={handleAddTerminalContext}
+          onNewTerminal={createNewTerminal}
-        terminalLabelsById={terminalLabelsById}
+          splitShortcutLabel={visible ? splitShortcutLabel : undefined}
-        terminalLaunchLocationsById={terminalLaunchLocationsById}
+          splitVerticalShortcutLabel={visible ? splitVerticalShortcutLabel : undefined}
-      />
+          newShortcutLabel={visible ? newShortcutLabel : undefined}
+          closeShortcutLabel={visible ? closeShortcutLabel : undefined}
+          keybindings={keybindings}
+          onActiveTerminalChange={activateTerminal}
+          onCloseTerminal={closeTerminal}
+          onHeightChange={setTerminalHeight}
+          onAddTerminalContext={handleAddTerminalContext}
+          terminalLabelsById={terminalLabelsById}
+          terminalLaunchLocationsById={terminalLaunchLocationsById}
+        />
+      </div>
     </div>
   );
 });
 @@ -1791,8 +1803,6 @@ function ChatViewContent(props: ChatViewProps) {
   );
   const refreshVcsStatus = useAtomCommand(vcsEnvironment.refreshStatus, { reportFailure: false });
   const sidebarPrRefreshKeyRef = useRef<string | null>(null);
-  const activeFileSurface =
-    activeRightPanelSurface?.kind === "file" ? activeRightPanelSurface : null;
   const activePreviewState = useThreadPreviewState(activeThreadRef);
   const activePreviewServerEpoch = activePreviewState.serverEpoch;
   const resolvePreviewRuntimeTabId = useMemo(
 @@ -1820,6 +1830,34 @@ function ChatViewContent(props: ChatViewProps) {
   );
   const previewPanelOpen = activeRightPanelKind === "preview" && isPreviewSupportedInRuntime();
   const rightPanelOpen = rightPanelState.isOpen;
+  const { active: panelAnimationsActive, durationMs: panelAnimationDurationMs } =
+    usePanelAnimationSettings();
+  const activeTerminalDrawerPresence = usePanelPresence(
+    Boolean(activeThreadKey && terminalUiState.terminalOpen),
+    true,
+    panelAnimationsActive,
+    activeThreadKey,
+    panelAnimationDurationMs,
+  );
+  const rightPanelPresenceValue = useMemo(
+    () => ({
+      activeSurface: activeRightPanelSurface,
+      surfaces: rightPanelState.surfaces,
+    }),
+    [activeRightPanelSurface, rightPanelState.surfaces],
+  );
+  const rightPanelPresence = usePanelPresence(
+    rightPanelOpen && activeThreadRef !== null,
+    rightPanelPresenceValue,
+    panelAnimationsActive,
+    activeThreadKey,
+    panelAnimationDurationMs,
+  );
+  const rightPanelPresent = rightPanelPresence.present;
+  const rightPanelControlsInPanel =
+    rightPanelPresent && (!shouldUseRightPanelSheet || rightPanelOpen);
+  const renderedRightPanelSurface = rightPanelPresence.value?.activeSurface ?? null;
+  const renderedRightPanelSurfaces = rightPanelPresence.value?.surfaces ?? [];
   const canMaximizeRightPanel = rightPanelOpen && !shouldUseRightPanelSheet;
   const rightPanelMaximized =
     canMaximizeRightPanel && maximizedRightPanelThreadKey === routeThreadKey;
 @@ -1882,7 +1920,7 @@ function ChatViewContent(props: ChatViewProps) {
         currentThreadIds,
         openThreadIds: existingOpenTerminalThreadKeys,
         activeThreadId: activeThreadKey,
-        activeThreadTerminalOpen: Boolean(activeThreadKey && terminalUiState.terminalOpen),
+        activeThreadTerminalOpen: activeTerminalDrawerPresence.present,
         maxHiddenThreadCount: MAX_HIDDEN_MOUNTED_TERMINAL_THREADS,
       });
       return currentThreadIds.length === nextThreadIds.length &&
 @@ -1890,7 +1928,7 @@ function ChatViewContent(props: ChatViewProps) {
         ? currentThreadIds
         : nextThreadIds;
     });
-  }, [activeThreadKey, existingOpenTerminalThreadKeys, terminalUiState.terminalOpen]);
+  }, [activeTerminalDrawerPresence.present, activeThreadKey, existingOpenTerminalThreadKeys]);
   const latestTurnSettled = isLatestTurnSettled(activeLatestTurn, activeThread?.session ?? null);
   const activeProjectRef = useMemo(
     () =>
 @@ -7095,29 +7133,39 @@ function ChatViewContent(props: ChatViewProps) {
   const panelLayoutControls = (
     <div
       className={cn(
-        // One inset in both states: the controls move between containers when
+        // Keep one viewport anchor inside the header's no-drag region. The
-        // the right panel opens, and a different right offset made them jump
+        // header can shrink behind the right panel without moving the controls.
-        // sideways on every toggle.
+        "pointer-events-none fixed top-[var(--workspace-controls-top)] right-[var(--workspace-controls-right)] z-50 mr-px flex h-[var(--workspace-topbar-height)] items-center gap-1 [-webkit-app-region:no-drag]",
-        "absolute top-[var(--workspace-controls-top)] right-[var(--workspace-controls-right)] z-50 mr-px flex h-[var(--workspace-topbar-height)] items-center gap-1 [-webkit-app-region:no-drag]",
       )}
       data-workspace-titlebar-controls
     >
-      {rightPanelOpen && !shouldUseRightPanelSheet ? (
+      {!shouldUseRightPanelSheet ? (
-        <RightPanelMaximizeControl
+        <span
-          maximized={rightPanelMaximized}
+          aria-hidden={!rightPanelOpen}
-          onToggle={toggleRightPanelMaximized}
+          className={cn(
-        />
+            "flex shrink-0",
+            panelAnimationsActive &&
+              "motion-safe:transition-opacity motion-safe:[transition-duration:var(--panel-animation-duration)] motion-safe:ease-out",
+            rightPanelOpen ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0",
+          )}
+          inert={!rightPanelOpen}
+        >
+          <RightPanelMaximizeControl
+            maximized={rightPanelMaximized}
+            onToggle={toggleRightPanelMaximized}
+          />
+        </span>
       ) : null}
-      {panelToggleControls}
+      <div className="pointer-events-auto flex h-full items-center">{panelToggleControls}</div>
     </div>
   );
   const rightPanelContent = activeThreadRef ? (
-    activeRightPanelSurface?.kind === "preview" ? (
+    renderedRightPanelSurface?.kind === "preview" ? (
       <Suspense fallback={null}>
         <PreviewPanel
           mode="embedded"
           threadRef={activeThreadRef}
-          tabId={activeRightPanelSurface.resourceId}
+          tabId={renderedRightPanelSurface.resourceId}
           configuredUrls={configuredPreviewUrls}
           visible
           onSendAnnotation={(annotation, image) => {
 @@ -7125,10 +7173,10 @@ function ChatViewContent(props: ChatViewProps) {
           }}
         />
       </Suspense>
-    ) : activeRightPanelSurface?.kind === "terminal" ? (
+    ) : renderedRightPanelSurface?.kind === "terminal" ? (
       <PersistentThreadTerminalPanel
         threadRef={activeThreadRef}
-        surface={activeRightPanelSurface}
+        surface={renderedRightPanelSurface}
         launchContext={activeTerminalLaunchContext ?? null}
         focusRequestId={terminalFocusRequestId}
         keybindings={keybindings}
 @@ -7143,7 +7191,7 @@ function ChatViewContent(props: ChatViewProps) {
         newShortcutLabel={newTerminalShortcutLabel ?? undefined}
         closeShortcutLabel={closeTerminalShortcutLabel ?? undefined}
       />
-    ) : activeRightPanelSurface?.kind === "diff" ? (
+    ) : renderedRightPanelSurface?.kind === "diff" ? (
       <Suspense fallback={null}>
         <DiffPanel
           key={`${activeThreadKey}:${diffPanelGitStatusResolutionKey}`}
 @@ -7153,26 +7201,26 @@ function ChatViewContent(props: ChatViewProps) {
           workspaceMutationId={workspaceMutationId}
         />
       </Suspense>
-    ) : activeRightPanelSurface?.kind === "pull-request" && !pullRequestsCapabilityKnown ? (
+    ) : renderedRightPanelSurface?.kind === "pull-request" && !pullRequestsCapabilityKnown ? (
       <PullRequestDetailGhost />
-    ) : activeRightPanelSurface?.kind === "pull-request" && !supportsPullRequests ? (
+    ) : renderedRightPanelSurface?.kind === "pull-request" && !supportsPullRequests ? (
       <PullRequestsUnavailableState
         title="Pull requests unavailable"
         error="Update this environment's T3 Code server to browse pull requests."
       />
-    ) : activeRightPanelSurface?.kind === "pull-request" ? (
+    ) : renderedRightPanelSurface?.kind === "pull-request" ? (
       // No onClose: the surface tab's own X owns closing here, and a second X in the header
       // would be the same action twice. The thread context also drops the checkout button, so it
       // is only right for the thread's own pull request, whose branch is already under the
       // reader's feet. A link the agent wrote can open any other one here, and that one has to be
       // checkable out like it is anywhere else.
       <PullRequestDetailPanel
-        key={`${activeRightPanelSurface.repository}#${activeRightPanelSurface.number}`}
+        key={`${renderedRightPanelSurface.repository}#${renderedRightPanelSurface.number}`}
         environmentId={activeThread.environmentId}
         reference={{
-          projectId: activeRightPanelSurface.projectId as ProjectId,
+          projectId: renderedRightPanelSurface.projectId as ProjectId,
-          repository: activeRightPanelSurface.repository,
+          repository: renderedRightPanelSurface.repository,
-          number: activeRightPanelSurface.number,
+          number: renderedRightPanelSurface.number,
         }}
         context={
           isThreadOwnPullRequest(
 @@ -7182,9 +7230,9 @@ function ChatViewContent(props: ChatViewProps) {
               number: activeThreadPr?.number ?? null,
             },
             {
-              projectId: activeRightPanelSurface.projectId,
+              projectId: renderedRightPanelSurface.projectId,
-              repository: activeRightPanelSurface.repository,
+              repository: renderedRightPanelSurface.repository,
-              number: activeRightPanelSurface.number,
+              number: renderedRightPanelSurface.number,
             },
           )
             ? "thread"
 @@ -7193,13 +7241,14 @@ function ChatViewContent(props: ChatViewProps) {
         composerDraftTarget={composerDraftTarget}
         onStateChange={handlePullRequestTabStatusChange}
       />
-    ) : activeRightPanelSurface?.kind === "agents" ? (
+    ) : renderedRightPanelSurface?.kind === "agents" ? (
       <AgentsPanel
         model={agentPanelModel}
         environmentId={activeThreadRef?.environmentId ?? null}
         threadId={activeThreadRef?.threadId ?? null}
       />
-    ) : (activeRightPanelSurface?.kind === "files" || activeRightPanelSurface?.kind === "file") &&
+    ) : (renderedRightPanelSurface?.kind === "files" ||
+        renderedRightPanelSurface?.kind === "file") &&
       activeProject &&
       activeWorkspaceRoot ? (
       <Suspense fallback={null}>
 @@ -7213,14 +7262,25 @@ function ChatViewContent(props: ChatViewProps) {
           keybindings={keybindings}
           availableEditors={availableEditors}
           relativePath={
-            activeRightPanelSurface.kind === "file" ? activeRightPanelSurface.relativePath : null
+            renderedRightPanelSurface.kind === "file"
+              ? renderedRightPanelSurface.relativePath
+              : null
+          }
+          revealLine={
+            renderedRightPanelSurface.kind === "file"
+              ? (renderedRightPanelSurface.revealLine ?? null)
+              : null
+          }
+          revealRequestId={
+            renderedRightPanelSurface.kind === "file"
+              ? renderedRightPanelSurface.revealRequestId
+              : 0
           }
-          revealLine={activeFileSurface?.revealLine ?? null}
-          revealRequestId={activeFileSurface?.revealRequestId ?? 0}
           onOpenFile={openFileSurface}
           onPendingChange={handleFilePendingChange}
           selectedFilePending={
-            activeFileSurface !== null && pendingFileSurfaceIds.has(activeFileSurface.id)
+            renderedRightPanelSurface.kind === "file" &&
+            pendingFileSurfaceIds.has(renderedRightPanelSurface.id)
           }
           workspaceMutationId={workspaceMutationId}
         />
 @@ -7235,7 +7295,6 @@ function ChatViewContent(props: ChatViewProps) {
   return (
     <div className="relative flex min-h-0 min-w-0 flex-1 overflow-hidden bg-background">
-      {rightPanelOpen && !shouldUseRightPanelSheet ? panelLayoutControls : null}
       <div
         className={cn(
           "flex min-h-0 min-w-0 flex-col overflow-x-hidden",
 @@ -7250,7 +7309,7 @@ function ChatViewContent(props: ChatViewProps) {
           reserveNativeControls={reserveTitleBarControlInset && !inlineRightPanelOwnsTitleBar}
           className="relative bg-background"
         >
-          {!rightPanelOpen ? panelLayoutControls : null}
+          {!shouldUseRightPanelSheet || !rightPanelControlsInPanel ? panelLayoutControls : null}
           <ChatHeader
             {...(!supportsPullRequests || activeProjectRepository === null
               ? {}
 @@ -7639,7 +7698,7 @@ function ChatViewContent(props: ChatViewProps) {
             key={mountedThreadKey}
             threadRef={mountedThreadRef}
             threadId={mountedThreadRef.threadId}
-            visible={mountedThreadKey === activeThreadKey && terminalUiState.terminalOpen}
+            active={mountedThreadKey === activeThreadKey}
             launchContext={
               mountedThreadKey === activeThreadKey ? (activeTerminalLaunchContext ?? null) : null
             }
 @@ -7654,12 +7713,13 @@ function ChatViewContent(props: ChatViewProps) {
         ))}
       </div>
-      {!shouldUseRightPanelSheet && rightPanelOpen && activeThreadRef ? (
+      {rightPanelPresent && !shouldUseRightPanelSheet && activeThreadRef ? (
         <RightPanelTabs
           mode="inline"
+          open={rightPanelOpen}
           maximized={rightPanelMaximized}
-          surfaces={rightPanelState.surfaces}
+          surfaces={renderedRightPanelSurfaces}
-          activeSurfaceId={activeRightPanelSurface?.id ?? null}
+          activeSurfaceId={renderedRightPanelSurface?.id ?? null}
           pendingSurfaceIds={pendingFileSurfaceIds}
           previewSessions={activePreviewState.sessions}
           desktopByTabId={activePreviewState.desktopByTabId}
 @@ -7690,17 +7750,25 @@ function ChatViewContent(props: ChatViewProps) {
           {rightPanelContent}
         </RightPanelTabs>
       ) : null}
-      {shouldUseRightPanelSheet && rightPanelOpen && activeThreadRef ? (
+      {rightPanelPresent && shouldUseRightPanelSheet && activeThreadRef ? (
-        <RightPanelSheet open onClose={closePreviewPanel}>
+        <RightPanelSheet
+          animationDurationMs={panelAnimationsActive ? panelAnimationDurationMs : 0}
+          open={rightPanelOpen}
+          onClose={closePreviewPanel}
+        >
           <RightPanelTabs
             mode="sheet"
             // Same effective inset as the closed-state titlebar controls
             // (pr-3 in the tab bar plus this pixel equals the absolute
             // right inset plus mr-px), so the cluster does not creep when
             // the sheet opens.
-            layoutControls={<div className="mr-px flex items-center">{panelToggleControls}</div>}
+            layoutControls={
-            surfaces={rightPanelState.surfaces}
+              rightPanelOpen ? (
-            activeSurfaceId={activeRightPanelSurface?.id ?? null}
+                <div className="mr-px flex items-center">{panelToggleControls}</div>
+              ) : null
+            }
+            surfaces={renderedRightPanelSurfaces}
+            activeSurfaceId={renderedRightPanelSurface?.id ?? null}
             pendingSurfaceIds={pendingFileSurfaceIds}
             previewSessions={activePreviewState.sessions}
             desktopByTabId={activePreviewState.desktopByTabId}

apps/web/src/components/RightPanelSheet.tsx+2

...	@@ -4,6 +4,7 @@ import { RIGHT_PANEL_SHEET_CLASS_NAME } from "../rightPanelLayout";	...	@@ -4,6 +4,7 @@ import { RIGHT_PANEL_SHEET_CLASS_NAME } from "../rightPanelLayout";
4	import { Sheet, SheetPopup } from "./ui/sheet";	4	import { Sheet, SheetPopup } from "./ui/sheet";
5		5
6	export function RightPanelSheet(props: {	6	export function RightPanelSheet(props: {
		7	animationDurationMs: number;
7	children: ReactNode;	8	children: ReactNode;
8	open: boolean;	9	open: boolean;
9	onClose: () => void;	10	onClose: () => void;
...	@@ -18,6 +19,7 @@ export function RightPanelSheet(props: {	...	@@ -18,6 +19,7 @@ export function RightPanelSheet(props: {
18	}}	19	}}
19	>	20	>
20	<SheetPopup	21	<SheetPopup
		22	transitionDurationMs={props.animationDurationMs}
21	side="right"	23	side="right"
22	showCloseButton={false}	24	showCloseButton={false}
23	keepMounted	25	keepMounted

apps/web/src/components/RightPanelTabs.tsx+2

...	@@ -55,6 +55,7 @@ import { PierreEntryIcon } from "./chat/PierreEntryIcon";	...	@@ -55,6 +55,7 @@ import { PierreEntryIcon } from "./chat/PierreEntryIcon";
55	interface RightPanelTabsProps {	55	interface RightPanelTabsProps {
56	mode: PreviewPanelMode;	56	mode: PreviewPanelMode;
57	maximized?: boolean;	57	maximized?: boolean;
		58	open?: boolean;
58	/** Forwarded to PreviewPanelShell so this surface persists its own width. */	59	/** Forwarded to PreviewPanelShell so this surface persists its own width. */
59	widthStorageKey?: string;	60	widthStorageKey?: string;
60	/** Forwarded to PreviewPanelShell as the initial width before a user resize. */	61	/** Forwarded to PreviewPanelShell as the initial width before a user resize. */
...	@@ -798,6 +799,7 @@ export function RightPanelTabs(props: RightPanelTabsProps) {	...	@@ -798,6 +799,7 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
798	<PreviewPanelShell	799	<PreviewPanelShell
799	mode={props.mode}	800	mode={props.mode}
800	{...(props.maximized !== undefined ? { maximized: props.maximized } : {})}	801	{...(props.maximized !== undefined ? { maximized: props.maximized } : {})}
		802	{...(props.open !== undefined ? { open: props.open } : {})}
801	{...(props.widthStorageKey !== undefined ? { widthStorageKey: props.widthStorageKey } : {})}	803	{...(props.widthStorageKey !== undefined ? { widthStorageKey: props.widthStorageKey } : {})}
802	{...(props.defaultWidth !== undefined ? { defaultWidth: props.defaultWidth } : {})}	804	{...(props.defaultWidth !== undefined ? { defaultWidth: props.defaultWidth } : {})}
803	>	805	>

apps/web/src/components/WorkspacePageHeader.tsx+1-1

...	@@ -16,7 +16,7 @@ export function WorkspacePageHeader({	...	@@ -16,7 +16,7 @@ export function WorkspacePageHeader({
16	return (	16	return (
17	<header	17	<header
18	className={cn(	18	className={cn(
19	"flex h-[var(--workspace-topbar-height)] min-h-[var(--workspace-topbar-height)] shrink-0 items-center gap-3 pl-[calc(env(safe-area-inset-left)+0.75rem)] pr-[calc(env(safe-area-inset-right)+0.75rem)] transition-[padding-left] duration-200 ease-linear motion-reduce:transition-none sm:pl-[calc(env(safe-area-inset-left)+1.25rem)] sm:pr-[calc(env(safe-area-inset-right)+1.25rem)]",	19	"flex h-[var(--workspace-topbar-height)] min-h-[var(--workspace-topbar-height)] shrink-0 items-center gap-3 pl-[calc(env(safe-area-inset-left)+0.75rem)] pr-[calc(env(safe-area-inset-right)+0.75rem)] [[data-panel-animations=true]_&]:motion-safe:transition-[padding-left,padding-right] [[data-panel-animations=true]_&]:motion-safe:[transition-duration:var(--panel-animation-duration)] [[data-panel-animations=true]_&]:motion-safe:ease-out sm:pl-[calc(env(safe-area-inset-left)+1.25rem)] sm:pr-[calc(env(safe-area-inset-right)+1.25rem)]",
20	electron && "drag-region",	20	electron && "drag-region",
21	reserveNativeControls && "wco:pr-[var(--workspace-native-controls-inset)]",	21	reserveNativeControls && "wco:pr-[var(--workspace-native-controls-inset)]",
22	COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS,	22	COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS,

apps/web/src/components/chat/ChatComposer.tsx+36-2

 @@ -135,9 +135,12 @@ import { ComposerPendingElementContexts } from "./ComposerPendingElementContexts
 import { ComposerPendingReviewComments } from "./ComposerPendingReviewComments";
 import { ComposerPreviewAnnotationCards } from "./ComposerPreviewAnnotationCards";
 import {
+  COMPOSER_FOOTER_COMPACT_BREAKPOINT_PX,
+  COMPOSER_FOOTER_WIDE_ACTIONS_COMPACT_BREAKPOINT_PX,
   shouldUseCompactComposerPrimaryActions,
   shouldUseCompactComposerFooter,
 } from "../composerFooterLayout";
+import { observeResponsiveBreakpointFade, usePanelAnimationSettings } from "../../panelAnimations";
 import { type ComposerPromptEditorHandle, ComposerPromptEditor } from "../ComposerPromptEditor";
 import { ProviderModelPicker } from "./ProviderModelPicker";
 import { type ComposerCommandItem, ComposerCommandMenu } from "./ComposerCommandMenu";
 @@ -1283,6 +1286,8 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     active: false,
   });
   const isMobileViewport = useMediaQuery("max-sm");
+  const { active: panelAnimationsActive, durationMs: panelAnimationDurationMs } =
+    usePanelAnimationSettings();
   const isComposerCollapsedMobile =
     isMobileViewport && !forceExpandedOnMobile && !isComposerFocused;
 @@ -1292,6 +1297,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
   const composerEditorRef = useRef<ComposerPromptEditorHandle>(null);
   const attachmentInputRef = useRef<HTMLInputElement>(null);
   const composerFormRef = useRef<HTMLFormElement>(null);
+  const composerFooterControlsRef = useRef<HTMLDivElement>(null);
   const composerSurfaceRef = useRef<HTMLDivElement>(null);
   const providerInputRejectedRef = useRef(false);
   const composerSelectLockRef = useRef(false);
 @@ -1829,6 +1835,21 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     setIsComposerPrimaryActionsCompact(initialCompactness.primaryActionsCompact);
     setIsComposerFooterCompact(initialCompactness.footerCompact);
     if (typeof ResizeObserver === "undefined") return;
+    const footerControls = composerFooterControlsRef.current;
+    const stopFooterControlsFade = footerControls
+      ? observeResponsiveBreakpointFade({
+          target: footerControls,
+          container: composerForm,
+          active: panelAnimationsActive,
+          durationMs: panelAnimationDurationMs,
+          breakpoint: {
+            value: composerFooterHasWideActions
+              ? COMPOSER_FOOTER_WIDE_ACTIONS_COMPACT_BREAKPOINT_PX
+              : COMPOSER_FOOTER_COMPACT_BREAKPOINT_PX,
+            unit: "px",
+          },
+        })
+      : undefined;
     const observer = new ResizeObserver(() => {
       const nextCompactness = measureFooterCompactness();
 @@ -1845,8 +1866,17 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     observer.observe(composerForm);
     return () => {
       observer.disconnect();
+      stopFooterControlsFade?.();
     };
-  }, [activeThreadId, composerFooterActionLayoutKey, composerFooterHasWideActions]);
+  }, [
+    activeThreadId,
+    composerFooterActionLayoutKey,
+    composerFooterHasWideActions,
+    isComposerApprovalState,
+    isComposerCollapsedMobile,
+    panelAnimationDurationMs,
+    panelAnimationsActive,
+  ]);
   // ------------------------------------------------------------------
   // Image persist effect
 @@ -4223,7 +4253,11 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                   showMobilePendingAnswerActions && "hidden sm:flex",
                 )}
               >
-                <div className="-m-1 -ms-3.5 flex min-w-0 flex-1 items-center gap-1 overflow-x-auto p-1 ps-3.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+                <div
+                  ref={composerFooterControlsRef}
+                  data-chat-composer-footer-controls="true"
+                  className="-m-1 -ms-3.5 flex min-w-0 flex-1 items-center gap-1 overflow-x-auto p-1 ps-3.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+                >
                   {noProviderAvailable ? (
                     <Button
                       type="button"

apps/web/src/components/chat/ChatHeader.tsx+20

 @@ -37,6 +37,7 @@ import { useT3ProjectFileScripts } from "~/hooks/useT3ProjectFileScripts";
 import { useThreadActionMenu } from "~/hooks/useThreadActionMenu";
 import { threadEnvironment } from "../../state/threads";
 import { useAtomCommand } from "../../state/use-atom-command";
+import { observeResponsiveBreakpointFade, usePanelAnimationSettings } from "../../panelAnimations";
 import { ProjectFavicon } from "../ProjectFavicon";
 import {
   WorkspaceBreadcrumb,
 @@ -94,6 +95,8 @@ export function resolveRenameCommit(input: {
 // events (the second click dismisses it and dblclick still fires), so it
 // opens immediately.
 const TITLE_MENU_OPEN_DELAY_MS = 500;
+// Matches the @3xl/header-actions container breakpoint owned by this header.
+const HEADER_ACTIONS_EXPANDED_BREAKPOINT_REM = 48;
 export function shouldShowOpenInPicker(input: {
   readonly activeProjectName: string | undefined;
 @@ -137,6 +140,21 @@ export const ChatHeader = memo(function ChatHeader({
   onUpdateProjectScript,
   onDeleteProjectScript,
 }: ChatHeaderProps) {
+  const { active: panelAnimationsActive, durationMs: panelAnimationDurationMs } =
+    usePanelAnimationSettings();
+  const headerActionsRef = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    const actions = headerActionsRef.current;
+    const container = actions?.parentElement;
+    if (!actions || !container) return;
+    return observeResponsiveBreakpointFade({
+      target: actions,
+      container,
+      active: panelAnimationsActive,
+      durationMs: panelAnimationDurationMs,
+      breakpoint: { value: HEADER_ACTIONS_EXPANDED_BREAKPOINT_REM, unit: "rem" },
+    });
+  }, [panelAnimationDurationMs, panelAnimationsActive]);
   const primaryEnvironmentId = usePrimaryEnvironmentId();
   const fileScripts = useT3ProjectFileScripts(
     activeThreadEnvironmentId,
 @@ -372,10 +390,12 @@ export const ChatHeader = memo(function ChatHeader({
         </WorkspaceBreadcrumbItem>
       </WorkspaceBreadcrumb>
       <div
+        ref={headerActionsRef}
         data-chat-header-actions
         className={cn(
           "flex shrink-0 items-center justify-end gap-2 @3xl/header-actions:gap-3",
           rightPanelOpen ? "pr-0" : "pr-16",
+          "[[data-panel-animations=true]_&]:motion-safe:transition-[padding-right] [[data-panel-animations=true]_&]:motion-safe:[transition-duration:var(--panel-animation-duration)] [[data-panel-animations=true]_&]:motion-safe:ease-out",
         )}
       >
         {activeProjectScripts && (

apps/web/src/components/preview/PreviewPanelShell.tsx+41-4

...	@@ -52,6 +52,7 @@ export function getPreviewPanelMaxWidth(viewportWidth: number, containerWidth?:	...	@@ -52,6 +52,7 @@ export function getPreviewPanelMaxWidth(viewportWidth: number, containerWidth?:
52	export function PreviewPanelShell(props: {	52	export function PreviewPanelShell(props: {
53	mode: PreviewPanelMode;	53	mode: PreviewPanelMode;
54	maximized?: boolean;	54	maximized?: boolean;
		55	open?: boolean;
55	/**	56	/**
56	* Overrides the localStorage key used to persist the panel width. Callers	57	* Overrides the localStorage key used to persist the panel width. Callers
57	* embedding this shell for a different surface (e.g. the pull requests	58	* embedding this shell for a different surface (e.g. the pull requests
...	@@ -65,6 +66,8 @@ export function PreviewPanelShell(props: {	...	@@ -65,6 +66,8 @@ export function PreviewPanelShell(props: {
65	}) {	66	}) {
66	const useDragRegion = isElectron && props.mode !== "sheet" && props.mode !== "embedded";	67	const useDragRegion = isElectron && props.mode !== "sheet" && props.mode !== "embedded";
67	const isInline = props.mode === "inline";	68	const isInline = props.mode === "inline";
		69	const collapsible = isInline && props.open !== undefined;
		70	const open = props.open ?? true;
68	const hostRef = useRef<HTMLDivElement \| null>(null);	71	const hostRef = useRef<HTMLDivElement \| null>(null);
69	// Only inline non-maximized mode applies `width`/`maxWidth`; skip the	72	// Only inline non-maximized mode applies `width`/`maxWidth`; skip the
70	// container measurement (and its re-renders) everywhere else.	73	// container measurement (and its re-renders) everywhere else.
...	@@ -76,7 +79,26 @@ export function PreviewPanelShell(props: {	...	@@ -76,7 +79,26 @@ export function PreviewPanelShell(props: {
76	maxWidth,	79	maxWidth,
77	edge: "left",	80	edge: "left",
78	});	81	});
79		82	const previousLayoutRef = useRef({ open, width });
		83	useLayoutEffect(() => {
		84	const previous = previousLayoutRef.current;
		85	previousLayoutRef.current = { open, width };
		86	if (!collapsible \|\| previous.open !== open \|\| previous.width === width) return;
		87	const host = hostRef.current;
		88	if (!host?.closest("[data-panel-animations=true]")) return;
		89	host.style.setProperty("transition-duration", "0ms");
		90	let restoreFrame = 0;
		91	const paintFrame = window.requestAnimationFrame(() => {
		92	restoreFrame = window.requestAnimationFrame(() => {
		93	host.style.removeProperty("transition-duration");
		94	});
		95	});
		96	return () => {
		97	window.cancelAnimationFrame(paintFrame);
		98	window.cancelAnimationFrame(restoreFrame);
		99	host.style.removeProperty("transition-duration");
		100	};
		101	}, [collapsible, open, width]);
80	return (	102	return (
81	<div	103	<div
82	ref={hostRef}	104	ref={hostRef}
...	@@ -87,14 +109,29 @@ export function PreviewPanelShell(props: {	...	@@ -87,14 +109,29 @@ export function PreviewPanelShell(props: {
87	? "flex-1 border-l border-border"	109	? "flex-1 border-l border-border"
88	: "shrink-0 border-l border-border"	110	: "shrink-0 border-l border-border"
89	: "w-full",	111	: "w-full",
		112	collapsible &&
		113	"[[data-panel-animations=true]_&]:transition-[width] [[data-panel-animations=true]_&]:[transition-duration:var(--panel-animation-duration)] [[data-panel-animations=true]_&]:ease-out",
		114	collapsible && open && "[[data-panel-animations=true]_&]:starting:w-0!",
		115	collapsible && !open && "pointer-events-none",
90	)}	116	)}
91	style={isInline && !props.maximized ? { width: `${width}px` } : undefined}	117	style={
		118	isInline
		119	? { width: props.maximized ? "100%" : collapsible && !open ? "0px" : `${width}px` }
		120	: undefined
		121	}
92	data-preview-panel-mode={props.mode}	122	data-preview-panel-mode={props.mode}
93	data-preview-panel-maximized={props.maximized ? "true" : "false"}	123	data-preview-panel-maximized={props.maximized ? "true" : "false"}
94	>	124	>
95	{isInline && !props.maximized ? <RightPanelResizeHandle handlers={handlers} /> : null}	125	{isInline && !props.maximized ? <RightPanelResizeHandle handlers={handlers} /> : null}
96	{useDragRegion ? <div className="electron-drag-region h-0 w-full" aria-hidden /> : null}	126	<div className={cn("h-full min-h-0 w-full", collapsible && "overflow-clip")}>
97	{props.children}	127	<div
		128	className="flex h-full min-h-0 min-w-0 flex-col"
		129	style={collapsible && !props.maximized ? { width: `calc(${width}px - 1px)` } : undefined}
		130	>
		131	{useDragRegion ? <div className="electron-drag-region h-0 w-full" aria-hidden /> : null}
		132	{props.children}
		133	</div>
		134	</div>
98	</div>	135	</div>
99	);	136	);
100	}	137	}

apps/web/src/components/settings/PanelAnimationsPreview.tsx created+52

...	@@ -0,0 +1,52 @@
1	import { type CSSProperties, useState } from "react";
2
3	import { cn } from "~/lib/utils";
4
5	export function PanelAnimationsPreview({ durationMs }: { durationMs: number }) {
6	const [panelsOpen, setPanelsOpen] = useState(true);
7	const transitionClass =
8	"transition-[width,height,border-width] [transition-duration:var(--preview-duration)] ease-out motion-reduce:transition-none";
9
10	return (
11	<button
12	type="button"
13	aria-label="Replay panel animation preview"
14	className="flex h-10 w-full cursor-pointer overflow-hidden rounded-lg border border-border bg-background p-1 shadow-xs/5 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background"
15	onClick={() => setPanelsOpen((open) => !open)}
16	style={{ "--preview-duration": `${durationMs}ms` } as CSSProperties}
17	>
18	<span
19	aria-hidden
20	className={cn(
21	"h-full shrink-0 overflow-hidden rounded-md bg-sidebar",
22	transitionClass,
23	panelsOpen ? "w-4" : "w-0",
24	)}
25	/>
26	<span aria-hidden className="flex min-w-0 flex-1 flex-col px-1">
27	<span className="flex min-h-0 flex-1 flex-col gap-1 pt-1">
28	<span className="h-0.5 w-full rounded-full bg-muted-foreground/25" />
29	<span className="h-0.5 w-4/5 rounded-full bg-muted-foreground/20" />
30	<span className="h-0.5 w-3/5 rounded-full bg-muted-foreground/15" />
31	</span>
32	<span
33	className={cn(
34	"flex shrink-0 items-center overflow-hidden bg-foreground/5 px-2",
35	transitionClass,
36	panelsOpen ? "h-2 border-t border-border/70" : "h-0 border-t-0",
37	)}
38	>
39	<span className="h-px w-2/3 rounded-full bg-muted-foreground/25" />
40	</span>
41	</span>
42	<span
43	aria-hidden
44	className={cn(
45	"h-full shrink-0 overflow-hidden rounded-md bg-muted",
46	transitionClass,
47	panelsOpen ? "w-5" : "w-0",
48	)}
49	/>
50	</button>
51	);
52	}

apps/web/src/components/settings/SettingsPanels.tsx+69

...	@@ -24,6 +24,7 @@ import {	...	@@ -24,6 +24,7 @@ import {
24	MAX_CODE_FONT_SIZE,	24	MAX_CODE_FONT_SIZE,
25	MAX_GLASS_OPACITY,	25	MAX_GLASS_OPACITY,
26	MAX_INTERFACE_FONT_SIZE,	26	MAX_INTERFACE_FONT_SIZE,
		27	MAX_PANEL_ANIMATION_DURATION_MS,
27	MAX_PROMPT_FONT_SIZE,	28	MAX_PROMPT_FONT_SIZE,
28	MAX_SIDEBAR_AUTO_SETTLE_AFTER_DAYS,	29	MAX_SIDEBAR_AUTO_SETTLE_AFTER_DAYS,
29	MAX_TERMINAL_FONT_SIZE,	30	MAX_TERMINAL_FONT_SIZE,
...	@@ -31,6 +32,7 @@ import {	...	@@ -31,6 +32,7 @@ import {
31	MIN_APPEARANCE_CONTRAST,	32	MIN_APPEARANCE_CONTRAST,
32	MIN_GLASS_OPACITY,	33	MIN_GLASS_OPACITY,
33	MIN_INTERFACE_FONT_SIZE,	34	MIN_INTERFACE_FONT_SIZE,
		35	MIN_PANEL_ANIMATION_DURATION_MS,
34	MIN_PROMPT_FONT_SIZE,	36	MIN_PROMPT_FONT_SIZE,
35	MIN_SIDEBAR_AUTO_SETTLE_AFTER_DAYS,	37	MIN_SIDEBAR_AUTO_SETTLE_AFTER_DAYS,
36	MIN_TERMINAL_FONT_SIZE,	38	MIN_TERMINAL_FONT_SIZE,
...	@@ -152,6 +154,7 @@ import {	...	@@ -152,6 +154,7 @@ import {
152	} from "./settingsLayout";	154	} from "./settingsLayout";
153	import { searchableSetting } from "./settingsSearch";	155	import { searchableSetting } from "./settingsSearch";
154	import { ProjectFavicon } from "../ProjectFavicon";	156	import { ProjectFavicon } from "../ProjectFavicon";
		157	import { PanelAnimationsPreview } from "./PanelAnimationsPreview";
155		158
156	const ENVIRONMENT_IDENTIFICATION_LABELS: Record<EnvironmentIdentificationMode, string> = {	159	const ENVIRONMENT_IDENTIFICATION_LABELS: Record<EnvironmentIdentificationMode, string> = {
157	artwork: "Artwork",	160	artwork: "Artwork",
...	@@ -493,6 +496,9 @@ export function useSettingsRestore(onRestored?: () => void) {	...	@@ -493,6 +496,9 @@ export function useSettingsRestore(onRestored?: () => void) {
493	? ["Contrast"]	496	? ["Contrast"]
494	: []),	497	: []),
495	...(settings.glassOpacity !== DEFAULT_UNIFIED_SETTINGS.glassOpacity ? ["Glass opacity"] : []),	498	...(settings.glassOpacity !== DEFAULT_UNIFIED_SETTINGS.glassOpacity ? ["Glass opacity"] : []),
		499	...(settings.panelAnimationDurationMs !== DEFAULT_UNIFIED_SETTINGS.panelAnimationDurationMs
		500	? ["Panel animations"]
		501	: []),
496	...(settings.environmentIdentificationMode !==	502	...(settings.environmentIdentificationMode !==
497	DEFAULT_UNIFIED_SETTINGS.environmentIdentificationMode	503	DEFAULT_UNIFIED_SETTINGS.environmentIdentificationMode
498	? ["Environment identification"]	504	? ["Environment identification"]
...	@@ -593,6 +599,7 @@ export function useSettingsRestore(onRestored?: () => void) {	...	@@ -593,6 +599,7 @@ export function useSettingsRestore(onRestored?: () => void) {
593	settings.fontSizePrompt,	599	settings.fontSizePrompt,
594	settings.fontSizeTerminal,	600	settings.fontSizeTerminal,
595	settings.glassOpacity,	601	settings.glassOpacity,
		602	settings.panelAnimationDurationMs,
596	settings.enableLegacyTokenStreaming,	603	settings.enableLegacyTokenStreaming,
597	settings.enableProviderUpdateChecks,	604	settings.enableProviderUpdateChecks,
598	settings.continueThreadsAfterServerUpdate,	605	settings.continueThreadsAfterServerUpdate,
...	@@ -680,6 +687,7 @@ export function useSettingsRestore(onRestored?: () => void) {	...	@@ -680,6 +687,7 @@ export function useSettingsRestore(onRestored?: () => void) {
680	contextWindowMeterEnabled: DEFAULT_UNIFIED_SETTINGS.contextWindowMeterEnabled,	687	contextWindowMeterEnabled: DEFAULT_UNIFIED_SETTINGS.contextWindowMeterEnabled,
681	environmentIdentificationMode: DEFAULT_UNIFIED_SETTINGS.environmentIdentificationMode,	688	environmentIdentificationMode: DEFAULT_UNIFIED_SETTINGS.environmentIdentificationMode,
682	glassOpacity: DEFAULT_UNIFIED_SETTINGS.glassOpacity,	689	glassOpacity: DEFAULT_UNIFIED_SETTINGS.glassOpacity,
		690	panelAnimationDurationMs: DEFAULT_UNIFIED_SETTINGS.panelAnimationDurationMs,
683	sidebarThreadPreviewCount: DEFAULT_UNIFIED_SETTINGS.sidebarThreadPreviewCount,	691	sidebarThreadPreviewCount: DEFAULT_UNIFIED_SETTINGS.sidebarThreadPreviewCount,
684	sidebarProjectGroupingMode: DEFAULT_UNIFIED_SETTINGS.sidebarProjectGroupingMode,	692	sidebarProjectGroupingMode: DEFAULT_UNIFIED_SETTINGS.sidebarProjectGroupingMode,
685	sidebarAutoSettleAfterDays: DEFAULT_UNIFIED_SETTINGS.sidebarAutoSettleAfterDays,	693	sidebarAutoSettleAfterDays: DEFAULT_UNIFIED_SETTINGS.sidebarAutoSettleAfterDays,
...	@@ -1035,6 +1043,13 @@ export function AppearanceSettingsPanel() {	...	@@ -1035,6 +1043,13 @@ export function AppearanceSettingsPanel() {
1035	"--settings-slider-progress": `${appearanceContrastRatio * 100}%`,	1043	"--settings-slider-progress": `${appearanceContrastRatio * 100}%`,
1036	"--settings-slider-fill-offset": `${0.5 - appearanceContrastRatio}rem`,	1044	"--settings-slider-fill-offset": `${0.5 - appearanceContrastRatio}rem`,
1037	} as CSSProperties;	1045	} as CSSProperties;
		1046	const panelAnimationDurationRatio =
		1047	(settings.panelAnimationDurationMs - MIN_PANEL_ANIMATION_DURATION_MS) /
		1048	(MAX_PANEL_ANIMATION_DURATION_MS - MIN_PANEL_ANIMATION_DURATION_MS);
		1049	const panelAnimationDurationSliderStyle = {
		1050	"--settings-slider-progress": `${panelAnimationDurationRatio * 100}%`,
		1051	"--settings-slider-fill-offset": `${0.5 - panelAnimationDurationRatio}rem`,
		1052	} as CSSProperties;
1038		1053
1039	return (	1054	return (
1040	<SettingsPageContainer>	1055	<SettingsPageContainer>
...	@@ -1192,6 +1207,60 @@ export function AppearanceSettingsPanel() {	...	@@ -1192,6 +1207,60 @@ export function AppearanceSettingsPanel() {
1192	) : null}	1207	) : null}
1193	</SettingsSection>	1208	</SettingsSection>
1194		1209
		1210	<SettingsSection id="motion" title="Motion">
		1211	<SettingsRow
		1212	{...searchableSetting("panel-animations")}
		1213	description="Set how fast panels open and close."
		1214	control={
		1215	<div className="grid w-full grid-cols-[5rem_minmax(0,1fr)] items-center gap-3 sm:w-auto sm:grid-cols-[7rem_13rem] sm:gap-4">
		1216	<PanelAnimationsPreview durationMs={settings.panelAnimationDurationMs} />
		1217	<div className="flex w-full items-center gap-3">
		1218	<output
		1219	className="min-w-16 rounded-md bg-muted px-2 py-1 text-center font-mono text-xs font-medium tabular-nums text-foreground"
		1220	htmlFor="panel-animation-duration"
		1221	>
		1222	{settings.panelAnimationDurationMs} ms
		1223	</output>
		1224	<input
		1225	aria-label="Panel animation duration"
		1226	className="settings-slider min-w-0 flex-1"
		1227	id="panel-animation-duration"
		1228	max={MAX_PANEL_ANIMATION_DURATION_MS}
		1229	min={MIN_PANEL_ANIMATION_DURATION_MS}
		1230	onChange={(event) => {
		1231	const panelAnimationDurationMs = Number(event.currentTarget.value);
		1232	if (
		1233	Number.isInteger(panelAnimationDurationMs) &&
		1234	panelAnimationDurationMs >= MIN_PANEL_ANIMATION_DURATION_MS &&
		1235	panelAnimationDurationMs <= MAX_PANEL_ANIMATION_DURATION_MS
		1236	) {
		1237	updateSettings({ panelAnimationDurationMs });
		1238	}
		1239	}}
		1240	step={25}
		1241	style={panelAnimationDurationSliderStyle}
		1242	type="range"
		1243	value={settings.panelAnimationDurationMs}
		1244	/>
		1245	</div>
		1246	</div>
		1247	}
		1248	resetAction={
		1249	settings.panelAnimationDurationMs !==
		1250	DEFAULT_UNIFIED_SETTINGS.panelAnimationDurationMs ? (
		1251	<SettingResetButton
		1252	label="panel animations"
		1253	onClick={() =>
		1254	updateSettings({
		1255	panelAnimationDurationMs: DEFAULT_UNIFIED_SETTINGS.panelAnimationDurationMs,
		1256	})
		1257	}
		1258	/>
		1259	) : null
		1260	}
		1261	/>
		1262	</SettingsSection>
		1263
1195	<TypographySection />	1264	<TypographySection />
1196	</SettingsPageContainer>	1265	</SettingsPageContainer>
1197	);	1266	);

apps/web/src/components/settings/settingsSearch.test.ts+1

...	@@ -51,6 +51,7 @@ describe("searchSettings", () => {	...	@@ -51,6 +51,7 @@ describe("searchSettings", () => {
51	it("matches normalized title substrings", () => {	51	it("matches normalized title substrings", () => {
52	expect(searchSettings(" WORD WRAP ", ITEMS).map((item) => item.id)).toEqual(["word-wrap"]);	52	expect(searchSettings(" WORD WRAP ", ITEMS).map((item) => item.id)).toEqual(["word-wrap"]);
53	expect(searchSettings("glass").map((item) => item.id)).toEqual(["setting-glass-opacity"]);	53	expect(searchSettings("glass").map((item) => item.id)).toEqual(["setting-glass-opacity"]);
		54	expect(searchSettings("panel animations").map((item) => item.id)).toEqual(["panel-animations"]);
54	expect(searchSettings("thè\u{1ab0}mes")[0]?.id).toBe("theme");	55	expect(searchSettings("thè\u{1ab0}mes")[0]?.id).toBe("theme");
55	const localeLowerCase = vi.spyOn(String.prototype, "toLocaleLowerCase").mockReturnValue("gıt");	56	const localeLowerCase = vi.spyOn(String.prototype, "toLocaleLowerCase").mockReturnValue("gıt");
56	try {	57	try {

apps/web/src/components/settings/settingsSearch.ts+5

 @@ -94,6 +94,11 @@ export const SETTINGS_SEARCH_ITEMS = [
     to: "/settings/appearance",
     searchTerms: ["transparent transparency solid menus dialogs composer"],
   },
+  {
+    id: "panel-animations",
+    title: "Panel animations",
+    to: "/settings/appearance",
+  },
   {
     id: "environment-identification",
     title: "Environment identification",

apps/web/src/components/ui/sheet.tsx+21-1

 @@ -2,6 +2,7 @@
 import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
 import { XIcon } from "lucide-react";
+import type { CSSProperties } from "react";
 import { cn } from "~/lib/utils";
 import { Button } from "~/components/ui/button";
 import { ScrollArea } from "~/components/ui/scroll-area";
 @@ -62,18 +63,34 @@ function SheetPopup({
   children,
   showCloseButton = true,
   keepMounted = false,
+  transitionDurationMs,
   side = "right",
   variant = "default",
+  style,
   ...props
 }: SheetPrimitive.Popup.Props & {
   showCloseButton?: boolean;
   keepMounted?: boolean;
+  transitionDurationMs?: number;
   side?: "right" | "left" | "top" | "bottom";
   variant?: "default" | "inset";
 }) {
+  const transitionStyle =
+    transitionDurationMs === undefined
+      ? undefined
+      : ({ transitionDuration: `${transitionDurationMs}ms` } satisfies CSSProperties);
+  const instant = transitionDurationMs === 0;
   return (
     <SheetPortal keepMounted={keepMounted}>
-      <SheetBackdrop />
+      <SheetBackdrop
+        className={
+          instant
+            ? "transition-none! data-ending-style:opacity-100! data-starting-style:opacity-100!"
+            : undefined
+        }
+        style={transitionStyle}
+      />
       <SheetViewport side={side} variant={variant}>
         <SheetPrimitive.Popup
           className={cn(
 @@ -88,9 +105,12 @@ function SheetPopup({
               "col-start-2 w-[calc(100%-(--spacing(12)))] max-w-md border-s data-ending-style:translate-x-8 data-starting-style:translate-x-8",
             variant === "inset" &&
               "before:hidden sm:rounded-2xl sm:border sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:**:data-[slot=sheet-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]",
+            instant &&
+              "transition-none! will-change-auto! data-ending-style:translate-x-0! data-starting-style:translate-x-0! data-ending-style:translate-y-0! data-starting-style:translate-y-0! data-ending-style:opacity-100! data-starting-style:opacity-100!",
             className,
           )}
           data-slot="sheet-popup"
+          style={{ ...transitionStyle, ...style }}
           {...props}
         >
           {children}

apps/web/src/components/ui/sidebar.tsx+6-3

apps/web/src/panelAnimations.ts created+88

...	@@ -0,0 +1,88 @@
1	import { useEffect, useRef, useState } from "react";
2	import { type PanelAnimationDurationMs } from "@t3tools/contracts/settings";
3
4	import { useMediaQuery } from "./hooks/useMediaQuery";
5	import { useClientSettings } from "./hooks/useSettings";
6
7	export function observeResponsiveBreakpointFade(options: {
8	target: HTMLElement;
9	container: HTMLElement;
10	active: boolean;
11	durationMs: PanelAnimationDurationMs;
12	breakpoint: { value: number; unit: "px" \| "rem" };
13	}): () => void {
14	const { target, container, active, durationMs, breakpoint } = options;
15	if (!active \|\| typeof ResizeObserver === "undefined") return () => {};
16
17	const rootFontSize = Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
18	const breakpointPx =
19	breakpoint.unit === "px"
20	? breakpoint.value
21	: breakpoint.value * (Number.isFinite(rootFontSize) ? rootFontSize : 16);
22	let expanded = container.getBoundingClientRect().width >= breakpointPx;
23	let animation: Animation \| null = null;
24
25	const observer = new ResizeObserver(([entry]) => {
26	if (!entry) return;
27	const nextExpanded = entry.contentRect.width >= breakpointPx;
28	if (nextExpanded === expanded) return;
29	expanded = nextExpanded;
30	animation?.cancel();
31	animation = target.animate([{ opacity: 0 }, { opacity: 1 }], {
32	duration: Math.min(100, durationMs),
33	easing: "ease-out",
34	});
35	});
36
37	observer.observe(container);
38	return () => {
39	observer.disconnect();
40	animation?.cancel();
41	};
42	}
43
44	export function usePanelAnimationSettings(): {
45	active: boolean;
46	durationMs: PanelAnimationDurationMs;
47	} {
48	const durationMs = useClientSettings((settings) => settings.panelAnimationDurationMs);
49	const prefersReducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
50	return { active: durationMs > 0 && !prefersReducedMotion, durationMs };
51	}
52
53	/** Keeps closing panel content mounted until its opt-in transition ends. */
54	export function usePanelPresence<T>(
55	open: boolean,
56	value: T \| null,
57	animated: boolean,
58	scopeKey: string \| null,
59	durationMs: PanelAnimationDurationMs,
60	): { present: boolean; value: T \| null } {
61	const [present, setPresent] = useState(open);
62	const retainedRef = useRef<{ scopeKey: string \| null; value: T \| null } \| null>(
63	open ? { scopeKey, value } : null,
64	);
65
66	useEffect(() => {
67	if (open) retainedRef.current = { scopeKey, value };
68	}, [open, scopeKey, value]);
69
70	useEffect(() => {
71	if (open) {
72	setPresent(true);
73	return;
74	}
75	if (!animated) {
76	setPresent(false);
77	return;
78	}
79
80	const timeout = window.setTimeout(() => setPresent(false), durationMs);
81	return () => window.clearTimeout(timeout);
82	}, [animated, durationMs, open]);
83
84	const retainedValue =
85	retainedRef.current?.scopeKey === scopeKey ? retainedRef.current.value : null;
86	const visible = open \|\| (animated && present && retainedRef.current?.scopeKey === scopeKey);
87	return { present: visible, value: open ? value : visible ? retainedValue : null };
88	}

apps/web/src/routes/_chat.pull-requests.tsx+57-15

 @@ -106,6 +106,7 @@ import { Menu, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuTrigger } from "../
 import { SidebarInset } from "../components/ui/sidebar";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../components/ui/tooltip";
 import { useLiveRefresh } from "../hooks/useLiveRefresh";
+import { usePanelAnimationSettings, usePanelPresence } from "../panelAnimations";
 import { toSortableTimestamp } from "../lib/threadSort";
 import {
   selectActiveRightPanelSurface,
 @@ -449,10 +450,29 @@ function PullRequestsRouteView() {
   const selectedPullRequestSurface =
     selectedRightPanelSurface?.kind === "pull-request" ? selectedRightPanelSurface : null;
   const activePullRequestSurface = rightPanelState.isOpen ? selectedPullRequestSurface : null;
+  const { active: panelAnimationsActive, durationMs: panelAnimationDurationMs } =
+    usePanelAnimationSettings();
+  const rightPanelPresenceValue = useMemo(
+    () => ({
+      activeSurface: selectedPullRequestSurface,
+      surfaces: rightPanelState.surfaces,
+    }),
+    [rightPanelState.surfaces, selectedPullRequestSurface],
+  );
+  const rightPanelPresence = usePanelPresence(
+    rightPanelState.isOpen && selectedPullRequestSurface !== null,
+    rightPanelPresenceValue,
+    panelAnimationsActive,
+    rightPanelRef === null ? null : PULL_REQUESTS_PANEL_ID,
+    panelAnimationDurationMs,
+  );
+  const rightPanelPresent = rightPanelPresence.present;
+  const renderedPullRequestSurface = rightPanelPresence.value?.activeSurface ?? null;
+  const renderedRightPanelSurfaces = rightPanelPresence.value?.surfaces ?? [];
   // The open tab names its own server; a link that arrived before any tab was opened names it
   // through the project it selected.
   const panelEnvironmentId =
-    (activePullRequestSurface?.environmentId as EnvironmentId | undefined) ??
+    (renderedPullRequestSurface?.environmentId as EnvironmentId | undefined) ??
     selectedProject?.environmentId ??
     null;
   const [pullRequestTabStatuses, setPullRequestTabStatuses] = useState<
 @@ -1783,16 +1803,37 @@ function PullRequestsRouteView() {
       // mounted at the fixed titlebar inset in both states so it cannot move
       // on toggle, and this spacer keeps refresh from sliding underneath it
       // (sized per header padding so refresh ends a normal gap short of it).
-      !pullRequestsSupported || rightPanelState.isOpen ? null : (
+      !pullRequestsSupported ? null : (
-        <span aria-hidden className="w-7 shrink-0 sm:w-5" />
+        <span
+          aria-hidden
+          className={cn(
+            "shrink-0",
+            rightPanelState.isOpen ? "-ml-3 w-0" : "w-7 sm:w-5",
+            panelAnimationsActive && "transition-[width,margin] ease-out",
+          )}
+          style={
+            panelAnimationsActive
+              ? { transitionDuration: `${panelAnimationDurationMs}ms` }
+              : undefined
+          }
+        />
       ),
     titlebarControls:
       // While the panel is closed the strip lives inside the header: a no-drag
       // descendant beats the header's desktop drag-region, where a floating
-      // sibling loses (app-region hit-testing ignores z-index). Open, it moves
+      // sibling loses (app-region hit-testing ignores z-index). While the
-      // back out to the route container, which spans the panel too, so the
+      // floating strip crosses the header during motion, the narrow extension
-      // toggle keeps one fixed top-right anchor and never jumps sideways.
+      // keeps that overlap non-draggable without moving the toggle.
-      pullRequestsSupported && !rightPanelState.isOpen ? openPanelControls : null,
+      pullRequestsSupported ? (
+        rightPanelPresent ? (
+          <span
+            aria-hidden
+            className="pointer-events-none absolute inset-y-0 left-full w-7 [-webkit-app-region:no-drag]"
+          />
+        ) : (
+          openPanelControls
+        )
+      ) : null,
     rightPanelOpen: rightPanelState.isOpen,
     listBody,
     scrollRef,
 @@ -1835,19 +1876,20 @@ function PullRequestsRouteView() {
   return (
     <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground">
       <div className="relative flex min-h-0 flex-1">
-        {pullRequestsSupported && rightPanelState.isOpen ? openPanelControls : null}
+        {pullRequestsSupported && rightPanelPresent ? openPanelControls : null}
         <PullRequestsColumn {...columnProps} />
-        {rightPanelState.isOpen && activePullRequestSurface && panelEnvironmentId !== null ? (
+        {rightPanelPresent && renderedPullRequestSurface && panelEnvironmentId !== null ? (
           <RightPanelTabs
             mode="inline"
+            open={rightPanelState.isOpen}
             widthStorageKey="t3code:pull-request-panel-width"
             // Default to roughly half the viewport: the PR list needs more
             // room than a chat, so the 540px chat-preview default squashes
             // it. SSR has no window, so fall back to a reasonable width.
             defaultWidth={typeof window === "undefined" ? 640 : Math.floor(window.innerWidth / 2)}
-            surfaces={rightPanelState.surfaces}
+            surfaces={renderedRightPanelSurfaces}
-            activeSurfaceId={activePullRequestSurface.id}
+            activeSurfaceId={renderedPullRequestSurface.id}
             pendingSurfaceIds={EMPTY_PENDING_SURFACES}
             previewSessions={EMPTY_PREVIEW_SESSIONS}
             desktopByTabId={EMPTY_PREVIEW_DESKTOP_STATE}
 @@ -1883,12 +1925,12 @@ function PullRequestsRouteView() {
             pullRequestStatuses={pullRequestTabStatuses}
           >
             <PullRequestDetailPanel
-              key={activePullRequestSurface.id}
+              key={renderedPullRequestSurface.id}
               environmentId={panelEnvironmentId}
               reference={{
-                projectId: activePullRequestSurface.projectId as ProjectId,
+                projectId: renderedPullRequestSurface.projectId as ProjectId,
-                repository: activePullRequestSurface.repository,
+                repository: renderedPullRequestSurface.repository,
-                number: activePullRequestSurface.number,
+                number: renderedPullRequestSurface.number,
               }}
               refreshToken={detailRefreshToken}
               // Merging, closing or reopening changes the row this panel was opened from, so

docs/user/thread-sidebar.md+7

...	@@ -42,6 +42,13 @@ If reordering is unavailable for one environment, update the T3 Code server runn	...	@@ -42,6 +42,13 @@ If reordering is unavailable for one environment, update the T3 Code server runn
42	environment. Older servers can still pin and unpin threads, but do not understand synced ordering;	42	environment. Older servers can still pin and unpin threads, but do not understand synced ordering;
43	their pinned threads keep the default newest-first order below the ones you have arranged.	43	their pinned threads keep the default newest-first order below the ones you have arranged.
44		44
		45	## Panel motion
		46
		47	The main sidebar, right panel, and terminal drawer open and close immediately by default. Under
		48	Settings → Appearance → Motion, move the Panel animations slider above 0 ms to add motion.
		49	The duration can be set up to 400 ms. Clicking the preview replays all three panel transitions; at
		50	0 ms, it snaps between the same open and closed states.
		51
45	## Environment artwork	52	## Environment artwork
46		53
47	Dev and Nightly environments can identify themselves with artwork at the top of the sidebar and in	54	Dev and Nightly environments can identify themselves with artwork at the top of the sidebar and in

packages/contracts/src/settings.test.ts+16

...	@@ -144,6 +144,22 @@ describe("ClientSettings appearance contrast", () => {	...	@@ -144,6 +144,22 @@ describe("ClientSettings appearance contrast", () => {
144	});	144	});
145	});	145	});
146		146
		147	describe("ClientSettings panel animations", () => {
		148	it("defaults to instant changes", () => {
		149	expect(decodeClientSettings({}).panelAnimationDurationMs).toBe(0);
		150	});
		151
		152	it.each([0, 400])("accepts a panel animation duration: %s", (value) => {
		153	expect(decodeClientSettingsPatch({ panelAnimationDurationMs: value })).toEqual({
		154	panelAnimationDurationMs: value,
		155	});
		156	});
		157
		158	it.each([-1, 401, 150.5])("rejects an invalid panel animation duration: %s", (value) => {
		159	expect(() => decodeClientSettingsPatch({ panelAnimationDurationMs: value })).toThrow();
		160	});
		161	});
		162
147	describe("ClientSettings environment identification", () => {	163	describe("ClientSettings environment identification", () => {
148	it("defaults to artwork and accepts each presentation mode", () => {	164	it("defaults to artwork and accepts each presentation mode", () => {
149	expect(decodeClientSettings({}).environmentIdentificationMode).toBe("artwork");	165	expect(decodeClientSettings({}).environmentIdentificationMode).toBe("artwork");

packages/contracts/src/settings.ts+16

...	@@ -84,6 +84,16 @@ export const AppearanceContrast = Schema.Int.check(	...	@@ -84,6 +84,16 @@ export const AppearanceContrast = Schema.Int.check(
84	);	84	);
85	export type AppearanceContrast = typeof AppearanceContrast.Type;	85	export type AppearanceContrast = typeof AppearanceContrast.Type;
86	export const DEFAULT_APPEARANCE_CONTRAST: AppearanceContrast = 100;	86	export const DEFAULT_APPEARANCE_CONTRAST: AppearanceContrast = 100;
		87	export const MIN_PANEL_ANIMATION_DURATION_MS = 0;
		88	export const MAX_PANEL_ANIMATION_DURATION_MS = 400;
		89	export const PanelAnimationDurationMs = Schema.Int.check(
		90	Schema.isBetween({
		91	minimum: MIN_PANEL_ANIMATION_DURATION_MS,
		92	maximum: MAX_PANEL_ANIMATION_DURATION_MS,
		93	}),
		94	);
		95	export type PanelAnimationDurationMs = typeof PanelAnimationDurationMs.Type;
		96	export const DEFAULT_PANEL_ANIMATION_DURATION_MS: PanelAnimationDurationMs = 0;
87	/**	97	/**
88	* Font size preferences, in CSS pixels. The ranges are deliberately narrow:	98	* Font size preferences, in CSS pixels. The ranges are deliberately narrow:
89	* the interface size scales every rem-based dimension in the app, so the	99	* the interface size scales every rem-based dimension in the app, so the
...	@@ -179,6 +189,11 @@ export const ClientSettingsSchema = Schema.Struct({	...	@@ -179,6 +189,11 @@ export const ClientSettingsSchema = Schema.Struct({
179	appearanceContrast: AppearanceContrast.pipe(	189	appearanceContrast: AppearanceContrast.pipe(
180	Schema.withDecodingDefault(Effect.succeed(DEFAULT_APPEARANCE_CONTRAST)),	190	Schema.withDecodingDefault(Effect.succeed(DEFAULT_APPEARANCE_CONTRAST)),
181	),	191	),
		192	// Panel motion defaults to zero because width and height transitions cause
		193	// layout work on every frame, which is noticeable on lower-power clients.
		194	panelAnimationDurationMs: PanelAnimationDurationMs.pipe(
		195	Schema.withDecodingDefault(Effect.succeed(DEFAULT_PANEL_ANIMATION_DURATION_MS)),
		196	),
182	browserDefaultViewport: PreviewViewportSetting.pipe(	197	browserDefaultViewport: PreviewViewportSetting.pipe(
183	Schema.withDecodingDefault(Effect.succeed(DEFAULT_BROWSER_VIEWPORT)),	198	Schema.withDecodingDefault(Effect.succeed(DEFAULT_BROWSER_VIEWPORT)),
184	),	199	),
...	@@ -966,6 +981,7 @@ export type ServerSettingsPatch = typeof ServerSettingsPatch.Type;	...	@@ -966,6 +981,7 @@ export type ServerSettingsPatch = typeof ServerSettingsPatch.Type;
966		981
967	export const ClientSettingsPatch = Schema.Struct({	982	export const ClientSettingsPatch = Schema.Struct({
968	appearanceContrast: Schema.optionalKey(AppearanceContrast),	983	appearanceContrast: Schema.optionalKey(AppearanceContrast),
		984	panelAnimationDurationMs: Schema.optionalKey(PanelAnimationDurationMs),
969	browserDefaultViewport: Schema.optionalKey(PreviewViewportSetting),	985	browserDefaultViewport: Schema.optionalKey(PreviewViewportSetting),
970	browserDefaultZoomFactor: Schema.optionalKey(PreviewZoomFactor),	986	browserDefaultZoomFactor: Schema.optionalKey(PreviewZoomFactor),
971	browserDefaultAppearance: Schema.optionalKey(PreviewAppearancePreference),	987	browserDefaultAppearance: Schema.optionalKey(PreviewAppearancePreference),

author	maria <maria@kuuro.net> 2026-09-02 18:24:52-04:00
committer	GitHub <noreply@github.com> 2026-09-02 18:24:52-04:00
log	91c8d4771ccb503a9dde65190b87db642df0a6ea
tree	d435f3623d3add72127828d6768aefca2597f969
parent	ca63d42d670837b918081d1fc1ebada553814b4c
signature	Signed by PGP key B5690EEEBB952194

...	@@ -281,7 +281,8 @@ function Sidebar({	...	@@ -281,7 +281,8 @@ function Sidebar({
281	{/* This is what handles the sidebar gap on desktop */}	281	{/* This is what handles the sidebar gap on desktop */}
282	<div	282	<div
283	className={cn(	283	className={cn(
284	"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",	284	"relative w-(--sidebar-width) bg-transparent",
		285	"[[data-panel-animations=true]_&]:transition-[width] [[data-panel-animations=true]_&]:[transition-duration:var(--panel-animation-duration)] [[data-panel-animations=true]_&]:ease-out",
285	"group-data-[collapsible=offcanvas]:w-0",	286	"group-data-[collapsible=offcanvas]:w-0",
286	"group-data-[side=right]:rotate-180",	287	"group-data-[side=right]:rotate-180",
287	variant === "floating" \|\| variant === "inset"	288	variant === "floating" \|\| variant === "inset"
...	@@ -292,7 +293,8 @@ function Sidebar({	...	@@ -292,7 +293,8 @@ function Sidebar({
292	/>	293	/>
293	<div	294	<div
294	className={cn(	295	className={cn(
295	"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",	296	"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) md:flex",
		297	"[[data-panel-animations=true]_&]:transition-[left,right,width] [[data-panel-animations=true]_&]:[transition-duration:var(--panel-animation-duration)] [[data-panel-animations=true]_&]:ease-out",
296	side === "left"	298	side === "left"
297	? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"	299	? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
298	: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",	300	: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
...	@@ -601,7 +603,8 @@ function SidebarRail({	...	@@ -601,7 +603,8 @@ function SidebarRail({
601	aria-label={railLabel}	603	aria-label={railLabel}
602	className={cn(	604	className={cn(
603	/* disable pointer events only when offcanvas sidebar is collapsed, that's when the rail sits over the native scrollbar on windows and linux. icon mode stays fully clickable. */	605	/* disable pointer events only when offcanvas sidebar is collapsed, that's when the rail sits over the native scrollbar on windows and linux. icon mode stays fully clickable. */
604	"-translate-x-1/2 group-data-[side=left]:-right-4 absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=right]:left-0 sm:flex [[data-collapsible=offcanvas][data-state=collapsed]_&]:pointer-events-none",	606	"-translate-x-1/2 group-data-[side=left]:-right-4 absolute inset-y-0 z-20 hidden w-4 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=right]:left-0 sm:flex [[data-collapsible=offcanvas][data-state=collapsed]_&]:pointer-events-none",
		607	"[[data-panel-animations=true]_&]:transition-all [[data-panel-animations=true]_&]:[transition-duration:var(--panel-animation-duration)] [[data-panel-animations=true]_&]:ease-out",
605	"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",	608	"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
606	"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",	609	"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
607	"group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full",	610	"group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full",

feat(web): add opt-in panel animations (#8830)