diff --git a/.changeset/animated-resizable-panel.md b/.changeset/animated-resizable-panel.md
new file mode 100644
index 00000000000..718a5b81742
--- /dev/null
+++ b/.changeset/animated-resizable-panel.md
@@ -0,0 +1,8 @@
+---
+"@trigger.dev/core": patch
+"@trigger.dev/sdk": patch
+---
+
+Feat(webapp): animated resizable panel
+
+Adds animated open/close transitions to Resizable panels using react-window-splitter built-in animation hooks. Includes new exports: RESIZABLE_PANEL_ANIMATION, collapsibleHandleClassName(), and useFrozenValue(). Converts inspector/detail side panels from conditionally-mounted to always-mounted collapsible panels across multiple routes (batches, runs, schedules, deployments, logs, waitpoints, bulk-actions).
diff --git a/apps/webapp/app/components/GitMetadata.tsx b/apps/webapp/app/components/GitMetadata.tsx
index efe3fb0efb7..fb53ee6bfea 100644
--- a/apps/webapp/app/components/GitMetadata.tsx
+++ b/apps/webapp/app/components/GitMetadata.tsx
@@ -25,9 +25,10 @@ export function GitMetadataBranch({
         <LinkButton
           variant="minimal/small"
           LeadingIcon={<GitBranchIcon className="size-4" />}
+          leadingIconClassName="group-hover/table-row:text-text-bright"
           iconSpacing="gap-x-1"
           to={git.branchUrl}
-          className="pl-1"
+          className="pl-1 duration-0 [&_span]:duration-0 [&_span]:group-hover/table-row:text-text-bright"
         >
           {git.branchName}
         </LinkButton>
@@ -49,8 +50,9 @@ export function GitMetadataCommit({
           variant="minimal/small"
           to={git.commitUrl}
           LeadingIcon={<GitCommitIcon className="size-4" />}
+          leadingIconClassName="group-hover/table-row:text-text-bright"
           iconSpacing="gap-x-1"
-          className="pl-1"
+          className="pl-1 duration-0 [&_span]:duration-0 [&_span]:group-hover/table-row:text-text-bright"
         >
           {`${git.shortSha} / ${git.commitMessage}`}
         </LinkButton>
@@ -74,8 +76,9 @@ export function GitMetadataPullRequest({
           variant="minimal/small"
           to={git.pullRequestUrl}
           LeadingIcon={<GitPullRequestIcon className="size-4" />}
+          leadingIconClassName="group-hover/table-row:text-text-bright"
           iconSpacing="gap-x-1"
-          className="pl-1"
+          className="pl-1 duration-0 [&_span]:duration-0 [&_span]:group-hover/table-row:text-text-bright"
         >
           #{git.pullRequestNumber} {git.pullRequestTitle}
         </LinkButton>
diff --git a/apps/webapp/app/components/logs/LogsTable.tsx b/apps/webapp/app/components/logs/LogsTable.tsx
index dcbd2d6868f..ed8e6793e5f 100644
--- a/apps/webapp/app/components/logs/LogsTable.tsx
+++ b/apps/webapp/app/components/logs/LogsTable.tsx
@@ -167,8 +167,8 @@ export function LogsTable({
                   >
                     <DateTimeAccurate date={log.triggeredTimestamp} hour12={false} />
                   </TableCell>
-                  <TableCell className="min-w-24" onClick={handleRowClick} hasAction>
-                    <TruncatedCopyableValue value={log.runId} />
+                  <TableCell className="min-w-24 cursor-pointer" onClick={handleRowClick}>
+                    <span className="font-mono text-xs">{log.runId}</span>
                   </TableCell>
                   <TableCell className="min-w-32" onClick={handleRowClick} hasAction>
                     <span className="font-mono text-xs">{log.taskIdentifier}</span>
diff --git a/apps/webapp/app/components/primitives/Resizable.tsx b/apps/webapp/app/components/primitives/Resizable.tsx
index ba6ed35490e..2efaae4258e 100644
--- a/apps/webapp/app/components/primitives/Resizable.tsx
+++ b/apps/webapp/app/components/primitives/Resizable.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useRef } from "react";
 import { PanelGroup, Panel, PanelResizer } from "react-window-splitter";
 import { cn } from "~/utils/cn";
 
@@ -69,6 +69,30 @@ const ResizableHandle = ({
   </PanelResizer>
 );
 
-export { ResizableHandle, ResizablePanel, ResizablePanelGroup };
+const RESIZABLE_PANEL_ANIMATION = {
+  easing: "ease-in-out" as const,
+  duration: 200,
+};
+
+const COLLAPSIBLE_HANDLE_CLASSNAME = "transition-opacity duration-200";
+
+function collapsibleHandleClassName(show: boolean) {
+  return cn(COLLAPSIBLE_HANDLE_CLASSNAME, !show && "pointer-events-none opacity-0");
+}
+
+function useFrozenValue<T>(value: T | null | undefined): T | null | undefined {
+  const ref = useRef(value);
+  if (value != null) ref.current = value;
+  return ref.current;
+}
+
+export {
+  RESIZABLE_PANEL_ANIMATION,
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+  collapsibleHandleClassName,
+  useFrozenValue,
+};
 
 export type ResizableSnapshot = React.ComponentProps<typeof PanelGroup>["snapshot"];
diff --git a/apps/webapp/app/components/primitives/TreeView/TreeView.tsx b/apps/webapp/app/components/primitives/TreeView/TreeView.tsx
index d1e002abb58..5f720c24fe9 100644
--- a/apps/webapp/app/components/primitives/TreeView/TreeView.tsx
+++ b/apps/webapp/app/components/primitives/TreeView/TreeView.tsx
@@ -197,6 +197,18 @@ export function useTree<TData, TFilterValue>({
     concreteStateFromInput({ tree, selectedId, collapsedIds, filter })
   );
 
+  //sync external selectedId prop into internal state
+  useEffect(() => {
+    const internalSelectedId = selectedIdFromState(state.nodes);
+    if (selectedId !== internalSelectedId) {
+      if (selectedId === undefined) {
+        dispatch({ type: "DESELECT_ALL_NODES" });
+      } else {
+        dispatch({ type: "SELECT_NODE", payload: { id: selectedId, scrollToNode: false, scrollToNodeFn } });
+      }
+    }
+  }, [selectedId]);
+
   //fire onSelectedIdChanged()
   useEffect(() => {
     const selectedId = selectedIdFromState(state.nodes);
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.batches.$batchParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.batches.$batchParam/route.tsx
index 91403f4597d..6f5fc89341f 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.batches.$batchParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.batches.$batchParam/route.tsx
@@ -1,4 +1,4 @@
-import { ArrowRightIcon, ExclamationTriangleIcon } from "@heroicons/react/20/solid";
+import { ExclamationTriangleIcon } from "@heroicons/react/20/solid";
 import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { tryCatch } from "@trigger.dev/core";
 import { motion } from "framer-motion";
@@ -12,17 +12,14 @@ import { DateTime } from "~/components/primitives/DateTime";
 import { Header2, Header3 } from "~/components/primitives/Headers";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import * as Property from "~/components/primitives/PropertyTable";
-import {
-  BatchStatusCombo,
-  descriptionForBatchStatus,
-} from "~/components/runs/v3/BatchStatus";
+import { BatchStatusCombo, descriptionForBatchStatus } from "~/components/runs/v3/BatchStatus";
 import { useAutoRevalidate } from "~/hooks/useAutoRevalidate";
 import { useEnvironment } from "~/hooks/useEnvironment";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { findProjectBySlug } from "~/models/project.server";
 import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
-import { BatchPresenter, type BatchPresenterData } from "~/presenters/v3/BatchPresenter.server";
+import { BatchPresenter } from "~/presenters/v3/BatchPresenter.server";
 import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
 import { formatNumber } from "~/utils/numberFormatter";
@@ -35,8 +32,7 @@ const BatchParamSchema = EnvironmentParamSchema.extend({
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
 
-  const { organizationSlug, projectParam, envParam, batchParam } =
-    BatchParamSchema.parse(params);
+  const { organizationSlug, projectParam, envParam, batchParam } = BatchParamSchema.parse(params);
 
   const project = await findProjectBySlug(organizationSlug, projectParam, userId);
   if (!project) {
@@ -85,7 +81,8 @@ export default function Page() {
     disabled: batch.hasFinished,
   });
 
-  const showProgressMeter = batch.isV2 && (batch.status === "PROCESSING" || batch.status === "PARTIAL_FAILED");
+  const showProgressMeter =
+    batch.isV2 && (batch.status === "PROCESSING" || batch.status === "PARTIAL_FAILED");
 
   return (
     <div className="grid h-full max-h-full grid-rows-[2.5rem_2.5rem_1fr_3.25rem] overflow-hidden bg-background-bright">
@@ -141,9 +138,7 @@ export default function Page() {
               </Property.Item>
               <Property.Item>
                 <Property.Label>Version</Property.Label>
-                <Property.Value>
-                  {batch.isV2 ? "v2 (Run Engine)" : "v1 (Legacy)"}
-                </Property.Value>
+                <Property.Value>{batch.isV2 ? "v2 (Run Engine)" : "v1 (Legacy)"}</Property.Value>
               </Property.Item>
               <Property.Item>
                 <Property.Label>Total runs</Property.Label>
@@ -243,11 +238,11 @@ export default function Page() {
       {/* Footer */}
       <div className="flex items-center justify-end gap-2 border-t border-grid-dimmed px-2">
         <LinkButton
-          variant="tertiary/medium"
+          variant="secondary/medium"
           to={v3BatchRunsPath(organization, project, environment, batch)}
-          LeadingIcon={RunsIcon}
-          leadingIconClassName="text-indigo-500"
-          TrailingIcon={ArrowRightIcon}
+          trailingIconClassName="text-runs"
+          TrailingIcon={RunsIcon}
+          className="text-text-bright"
         >
           View runs
         </LinkButton>
@@ -304,4 +299,3 @@ function BatchProgressMeter({ successCount, failureCount, totalCount }: BatchPro
     </div>
   );
 }
-
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.batches/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.batches/route.tsx
index a66e85c0f86..eaa040c4081 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.batches/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.batches/route.tsx
@@ -1,9 +1,10 @@
-import { ArrowRightIcon, ExclamationCircleIcon } from "@heroicons/react/20/solid";
+import { ExclamationCircleIcon } from "@heroicons/react/20/solid";
 import { BookOpenIcon } from "@heroicons/react/24/solid";
-import { type MetaFunction, Outlet, useNavigation, useParams, useLocation } from "@remix-run/react";
+import { type MetaFunction, Outlet, useLocation, useNavigation, useParams } from "@remix-run/react";
 import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { formatDuration } from "@trigger.dev/core/v3/utils/durations";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { RunsIcon } from "~/assets/icons/RunsIcon";
 import { BatchesNone } from "~/components/BlankStatePanels";
 import { ListPagination } from "~/components/ListPagination";
 import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
@@ -13,6 +14,8 @@ import { DateTime } from "~/components/primitives/DateTime";
 import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import {
+  collapsibleHandleClassName,
+  RESIZABLE_PANEL_ANIMATION,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
@@ -143,14 +146,25 @@ export default function Page() {
                 />
               </div>
             </ResizablePanel>
-            {isShowingInspector && (
-              <>
-                <ResizableHandle id="batches-handle" />
-                <ResizablePanel id="batches-inspector" min="100px" default="500px">
-                  <Outlet />
-                </ResizablePanel>
-              </>
-            )}
+            <ResizableHandle
+              id="batches-handle"
+              className={collapsibleHandleClassName(isShowingInspector)}
+            />
+            <ResizablePanel
+              id="batches-inspector"
+              min="370px"
+              default="370px"
+              className="overflow-hidden"
+              collapsible
+              collapsed={!isShowingInspector}
+              onCollapseChange={() => {}}
+              collapsedSize="0px"
+              collapseAnimation={RESIZABLE_PANEL_ANIMATION}
+            >
+              <div className="h-full" style={{ minWidth: 370 }}>
+                <Outlet />
+              </div>
+            </ResizablePanel>
           </ResizablePanelGroup>
         )}
       </PageBody>
@@ -287,8 +301,14 @@ function BatchActionsCell({ runsPath }: { runsPath: string }) {
     <TableCellMenu
       isSticky
       hiddenButtons={
-        <LinkButton to={runsPath} variant="minimal/small" LeadingIcon={ArrowRightIcon}>
-          View runs
+        <LinkButton
+          to={runsPath}
+          variant="minimal/small"
+          TrailingIcon={RunsIcon}
+          trailingIconClassName="text-runs"
+          className="text-text-bright"
+        >
+          <span>View runs</span>
         </LinkButton>
       }
     />
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions/route.tsx
index f44ce5904dc..a17f3e7d99e 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions/route.tsx
@@ -13,9 +13,11 @@ import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/Page
 import { PaginationControls } from "~/components/primitives/Pagination";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import {
+  RESIZABLE_PANEL_ANIMATION,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
+  collapsibleHandleClassName,
 } from "~/components/primitives/Resizable";
 import {
   Table,
@@ -170,14 +172,26 @@ export default function Page() {
                 )}
               </div>
             </ResizablePanel>
-            {isShowingInspector && (
-              <>
-                <ResizableHandle id="bulk-actions-handle" />
-                <ResizablePanel id="bulk-actions-inspector" min="100px" default="500px">
-                  <Outlet />
-                </ResizablePanel>
-              </>
-            )}
+            <ResizableHandle
+              id="bulk-actions-handle"
+              className={collapsibleHandleClassName(isShowingInspector)}
+            />
+            <ResizablePanel
+              id="bulk-actions-inspector"
+              default="500px"
+              min="500px"
+              max="800px"
+              className="overflow-hidden"
+              collapsible
+              collapsed={!isShowingInspector}
+              onCollapseChange={() => {}}
+              collapsedSize="0px"
+              collapseAnimation={RESIZABLE_PANEL_ANIMATION}
+            >
+              <div className="h-full" style={{ minWidth: 500 }}>
+                <Outlet />
+              </div>
+            </ResizablePanel>
           </ResizablePanelGroup>
         )}
       </PageBody>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments/route.tsx
index a42b39c4573..9dbac88c51a 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments/route.tsx
@@ -42,9 +42,11 @@ import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/Page
 import { PaginationControls } from "~/components/primitives/Pagination";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import {
+  RESIZABLE_PANEL_ANIMATION,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
+  collapsibleHandleClassName,
 } from "~/components/primitives/Resizable";
 import {
   Table,
@@ -255,7 +257,7 @@ export default function Page() {
                           <TableRow key={deployment.id} className="group" isSelected={isSelected}>
                             <TableCell to={path} isTabbableCell isSelected={isSelected}>
                               <div className="flex items-center gap-2">
-                                <Paragraph variant="extra-small">{deployment.shortCode}</Paragraph>
+                                <Paragraph variant="extra-small" className="group-hover/table-row:text-text-bright">{deployment.shortCode}</Paragraph>
                                 {deployment.label && (
                                   <Badge variant="extra-small">{titleCase(deployment.label)}</Badge>
                                 )}
@@ -388,14 +390,26 @@ export default function Page() {
             )}
           </ResizablePanel>
 
-          {deploymentParam && (
-            <>
-              <ResizableHandle id="deployments-handle" />
-              <ResizablePanel id="deployments-inspector" min="500px" max="800px">
-                <Outlet />
-              </ResizablePanel>
-            </>
-          )}
+          <ResizableHandle
+            id="deployments-handle"
+            className={collapsibleHandleClassName(!!deploymentParam)}
+          />
+          <ResizablePanel
+            id="deployments-inspector"
+            default="400px"
+            min="400px"
+            max="800px"
+            className="overflow-hidden"
+            collapsible
+            collapsed={!deploymentParam}
+            onCollapseChange={() => {}}
+            collapsedSize="0px"
+            collapseAnimation={RESIZABLE_PANEL_ANIMATION}
+          >
+            <div className="h-full" style={{ minWidth: 400 }}>
+              <Outlet />
+            </div>
+          </ResizablePanel>
         </ResizablePanelGroup>
       </PageBody>
     </PageContainer>
@@ -405,8 +419,8 @@ export default function Page() {
 export function UserTag({ name, avatarUrl }: { name: string; avatarUrl?: string }) {
   return (
     <div className="flex items-center gap-1">
-      <UserAvatar avatarUrl={avatarUrl} name={name} className="h-4 w-4" />
-      <Paragraph variant="extra-small">{name}</Paragraph>
+      <UserAvatar avatarUrl={avatarUrl} name={name} className="h-4 w-4 group-hover/table-row:text-text-bright" />
+      <Paragraph variant="extra-small" className="group-hover/table-row:text-text-bright">{name}</Paragraph>
     </div>
   );
 }
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs/route.tsx
index 80a5c6ef232..fc9cdb92a5b 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs/route.tsx
@@ -32,9 +32,12 @@ import { LogsTaskFilter } from "~/components/logs/LogsTaskFilter";
 import { LogsRunIdFilter } from "~/components/logs/LogsRunIdFilter";
 import { TimeFilter } from "~/components/runs/v3/SharedFilters";
 import {
+  RESIZABLE_PANEL_ANIMATION,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
+  collapsibleHandleClassName,
+  useFrozenValue,
 } from "~/components/primitives/Resizable";
 import { Button } from "~/components/primitives/Buttons";
 import { FEATURE_FLAG, validateFeatureFlagValue } from "~/v3/featureFlags";
@@ -148,7 +151,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
       from,
       to,
       defaultPeriod: "1h",
-      retentionLimitDays
+      retentionLimitDays,
     })
     .catch((error) => {
       if (error instanceof ServiceValidationError) {
@@ -165,8 +168,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 };
 
 export default function Page() {
-  const { data, defaultPeriod, retentionLimitDays } =
-    useTypedLoaderData<typeof loader>();
+  const { data, defaultPeriod, retentionLimitDays } = useTypedLoaderData<typeof loader>();
 
   return (
     <PageContainer>
@@ -192,10 +194,7 @@ export default function Page() {
             resolve={data}
             errorElement={
               <div className="grid h-full max-h-full grid-rows-[2.5rem_auto_1fr] overflow-hidden">
-                <FiltersBar
-                  defaultPeriod={defaultPeriod}
-                  retentionLimitDays={retentionLimitDays}
-                />
+                <FiltersBar defaultPeriod={defaultPeriod} retentionLimitDays={retentionLimitDays} />
                 <div className="flex items-center justify-center px-3 py-12">
                   <Callout variant="error" className="max-w-fit">
                     Unable to load your logs. Please refresh the page or try again in a moment.
@@ -228,10 +227,7 @@ export default function Page() {
                     defaultPeriod={defaultPeriod}
                     retentionLimitDays={retentionLimitDays}
                   />
-                  <LogsList
-                    list={result}
-                    defaultPeriod={defaultPeriod}
-                  />
+                  <LogsList list={result} defaultPeriod={defaultPeriod} />
                 </div>
               );
             }}
@@ -409,6 +405,11 @@ function LogsList({
     return accumulatedLogs.find((log) => log.id === selectedLogId);
   }, [selectedLogId, accumulatedLogs]);
 
+  const frozenLogId = useFrozenValue(selectedLogId);
+  const frozenLog = useFrozenValue(selectedLog);
+  const displayLogId = selectedLogId ?? frozenLogId;
+  const displayLog = selectedLog ?? frozenLog;
+
   const updateUrlWithLog = useCallback((logId: string | undefined) => {
     const url = new URL(window.location.href);
     if (logId) {
@@ -464,11 +465,21 @@ function LogsList({
           onLogSelect={handleLogSelect}
         />
       </ResizablePanel>
-      {/* Side panel for log details */}
-      {selectedLogId && (
-        <>
-          <ResizableHandle id="logs-handle" />
-          <ResizablePanel id="log-detail" min="300px" default="430px" max="600px" isStaticAtRest>
+      <ResizableHandle id="logs-handle" className={collapsibleHandleClassName(!!selectedLogId)} />
+      <ResizablePanel
+        id="log-detail"
+        default="430px"
+        min="430px"
+        max="600px"
+        className="overflow-hidden"
+        collapsible
+        collapsed={!selectedLogId}
+        onCollapseChange={() => {}}
+        collapsedSize="0px"
+        collapseAnimation={RESIZABLE_PANEL_ANIMATION}
+      >
+        <div className="h-full" style={{ minWidth: 430 }}>
+          {displayLogId && (
             <Suspense
               fallback={
                 <div className="flex h-full items-center justify-center">
@@ -477,15 +488,15 @@ function LogsList({
               }
             >
               <LogDetailView
-                logId={selectedLogId}
-                initialLog={selectedLog}
+                logId={displayLogId}
+                initialLog={displayLog}
                 onClose={handleClosePanel}
                 searchTerm={list.searchTerm}
               />
             </Suspense>
-          </ResizablePanel>
-        </>
-      )}
+          )}
+        </div>
+      </ResizablePanel>
     </ResizablePanelGroup>
   );
 }
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.models._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.models._index/route.tsx
index 394530b6335..2c39461ab2a 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.models._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.models._index/route.tsx
@@ -36,9 +36,12 @@ import { Header2 } from "~/components/primitives/Headers";
 import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
 import * as Property from "~/components/primitives/PropertyTable";
 import {
+  RESIZABLE_PANEL_ANIMATION,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
+  collapsibleHandleClassName,
+  useFrozenValue,
 } from "~/components/primitives/Resizable";
 import { SearchInput } from "~/components/primitives/SearchInput";
 import { Switch } from "~/components/primitives/Switch";
@@ -707,7 +710,7 @@ function ModelDetailPanel({
           className="pl-1"
         />
       </div>
-      <div className="h-fit overflow-x-auto px-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="h-fit overflow-x-auto whitespace-nowrap px-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
         <TabContainer>
           <TabButton
             isActive={tab === "overview"}
@@ -1094,6 +1097,8 @@ export default function ModelsPage() {
   const [showAllDetails, setShowAllDetails] = useState(false);
   const [compareOpen, setCompareOpen] = useState(false);
   const [selectedModel, setSelectedModel] = useState<ModelCatalogItem | null>(null);
+  const frozenModel = useFrozenValue(selectedModel);
+  const displayModel = selectedModel ?? frozenModel;
 
   const popularMap = useMemo(() => {
     const map = new Map<string, PopularModel>();
@@ -1162,21 +1167,37 @@ export default function ModelsPage() {
               />
             </div>
           </ResizablePanel>
-          {selectedModel && (
-            <>
-              <ResizableHandle id="models-handle" />
-              <ResizablePanel id="model-detail" min="300px" default="420px" max="600px">
+          <ResizableHandle
+            id="models-handle"
+            className={collapsibleHandleClassName(!!selectedModel)}
+          />
+          <ResizablePanel
+            id="model-detail"
+            default="420px"
+            min="420px"
+            max="700px"
+            className="overflow-hidden"
+            collapsible
+            collapsed={!selectedModel}
+            onCollapseChange={(isCollapsed) => {
+              if (isCollapsed) setSelectedModel(null);
+            }}
+            collapsedSize="0px"
+            collapseAnimation={RESIZABLE_PANEL_ANIMATION}
+          >
+            <div className="h-full" style={{ minWidth: 420 }}>
+              {displayModel && (
                 <ModelDetailPanel
-                  key={selectedModel.friendlyId}
-                  model={selectedModel}
+                  key={displayModel.friendlyId}
+                  model={displayModel}
                   organizationId={organizationId}
                   projectId={projectId}
                   environmentId={environmentId}
                   onClose={() => setSelectedModel(null)}
                 />
-              </ResizablePanel>
-            </>
-          )}
+              )}
+            </div>
+          </ResizablePanel>
         </ResizablePanelGroup>
       </PageBody>
       <CompareDialog
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.regions/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.regions/route.tsx
index 3484e1378b4..26daa24df34 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.regions/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.regions/route.tsx
@@ -262,7 +262,7 @@ export default function Page() {
                               <TableCellMenu
                                 className="pl-32"
                                 isSticky
-                                visibleButtons={
+                                hiddenButtons={
                                   <SetDefaultDialog regions={regions} newDefaultRegion={region} />
                                 }
                               />
@@ -309,12 +309,9 @@ export default function Page() {
                       <TextLink to="https://security.trigger.dev">security portal</TextLink> or{" "}
                       <Feedback
                         button={
-                          <Paragraph
-                            variant="extra-small"
-                            className="cursor-pointer text-indigo-500 transition hover:text-indigo-400"
-                          >
+                          <span className="cursor-pointer text-xs text-indigo-500 transition hover:text-indigo-400">
                             get in touch
-                          </Paragraph>
+                          </span>
                         }
                         defaultValue="help"
                       />
@@ -345,20 +342,21 @@ function SetDefaultDialog({
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
         <Button
-          variant="secondary/small"
+          variant="minimal/small"
           LeadingIcon={MapPinIcon}
           leadingIconClassName="text-blue-500"
           iconSpacing="gap-2"
           className="pl-2"
         >
-          Set as default…
+          <span className="text-text-bright">Set as default…</span>
         </Button>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Set as default region</DialogTitle>
         </DialogHeader>
-        <DialogDescription>
+        <DialogDescription asChild>
+          <div>
           <Paragraph>
             Are you sure you want to set {newDefaultRegion.name} as your new default region?
           </Paragraph>
@@ -441,6 +439,7 @@ function SetDefaultDialog({
             Runs triggered from now on will execute in "{newDefaultRegion.name}", unless you{" "}
             <TextLink to={docsPath("triggering#region")}>override when triggering</TextLink>.
           </Paragraph>
+          </div>
         </DialogDescription>
         <DialogFooter>
           <Button variant="secondary/medium" onClick={() => setIsOpen(false)}>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
index dc1f3fa2703..8a01627f308 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
@@ -48,10 +48,13 @@ import { Paragraph } from "~/components/primitives/Paragraph";
 import { Popover, PopoverArrowTrigger, PopoverContent } from "~/components/primitives/Popover";
 import * as Property from "~/components/primitives/PropertyTable";
 import {
+  RESIZABLE_PANEL_ANIMATION,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
   type ResizableSnapshot,
+  collapsibleHandleClassName,
+  useFrozenValue,
 } from "~/components/primitives/Resizable";
 import { ShortcutKey, variants } from "~/components/primitives/ShortcutKey";
 import { Slider } from "~/components/primitives/Slider";
@@ -112,7 +115,7 @@ import { SpanView } from "../resources.orgs.$organizationSlug.projects.$projectP
 
 const resizableSettings = {
   parent: {
-    autosaveId: "panel-run-parent",
+    autosaveId: "panel-run-parent-v2",
     handleId: "parent-handle",
     main: {
       id: "run",
@@ -468,6 +471,8 @@ function TraceView({
   const environment = useEnvironment();
   const { searchParams, replaceSearchParam } = useReplaceSearchParams();
   const selectedSpanId = searchParams.get("span") ?? undefined;
+  const frozenSpanId = useFrozenValue(selectedSpanId);
+  const displaySpanId = selectedSpanId ?? frozenSpanId;
 
   if (!trace) {
     return <></>;
@@ -498,12 +503,16 @@ function TraceView({
   }, [streamedEvents]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const spanOverrides = selectedSpanId ? overridesBySpanId?.[selectedSpanId] : undefined;
+  const frozenSpanOverrides = useFrozenValue(spanOverrides);
+  const displaySpanOverrides = selectedSpanId ? spanOverrides : frozenSpanOverrides;
 
   // Get the linked run ID for cached spans (map built during RunPresenter walk)
   const { linkedRunIdBySpanId } = trace;
   const selectedSpanLinkedRunId = selectedSpanId
     ? linkedRunIdBySpanId?.[selectedSpanId]
     : undefined;
+  const frozenLinkedRunId = useFrozenValue(selectedSpanLinkedRunId);
+  const displayLinkedRunId = selectedSpanId ? selectedSpanLinkedRunId : frozenLinkedRunId;
 
   return (
     <div className={cn("grid h-full max-h-full grid-cols-1 overflow-hidden")}>
@@ -542,24 +551,36 @@ function TraceView({
             treeSnapshot={resizable.tree as ResizableSnapshot}
           />
         </ResizablePanel>
-        <ResizableHandle id={resizableSettings.parent.handleId} />
-        {selectedSpanId && (
-          <ResizablePanel
-            id={resizableSettings.parent.inspector.id}
-            default={resizableSettings.parent.inspector.default}
-            min={resizableSettings.parent.inspector.min}
-            isStaticAtRest
+        <ResizableHandle
+          id={resizableSettings.parent.handleId}
+          className={collapsibleHandleClassName(!!selectedSpanId)}
+        />
+        <ResizablePanel
+          id={resizableSettings.parent.inspector.id}
+          default={resizableSettings.parent.inspector.default}
+          min={resizableSettings.parent.inspector.min}
+          className="overflow-hidden"
+          collapsible
+          collapsed={!selectedSpanId}
+          onCollapseChange={() => {}}
+          collapsedSize="0px"
+          collapseAnimation={RESIZABLE_PANEL_ANIMATION}
+        >
+          <div
+            className="h-full"
+            style={{ minWidth: parseInt(resizableSettings.parent.inspector.min) }}
           >
-            {" "}
-            <SpanView
-              runParam={run.friendlyId}
-              spanId={selectedSpanId}
-              spanOverrides={spanOverrides as SpanOverride | undefined}
-              closePanel={() => replaceSearchParam("span")}
-              linkedRunId={selectedSpanLinkedRunId}
-            />
-          </ResizablePanel>
-        )}
+            {displaySpanId && (
+              <SpanView
+                runParam={run.friendlyId}
+                spanId={displaySpanId}
+                spanOverrides={displaySpanOverrides as SpanOverride | undefined}
+                closePanel={() => replaceSearchParam("span")}
+                linkedRunId={displayLinkedRunId}
+              />
+            )}
+          </div>
+        </ResizablePanel>
       </ResizablePanelGroup>
     </div>
   );
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs._index/route.tsx
index 9f8cf278bef..ca7e8b7b0c1 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs._index/route.tsx
@@ -20,9 +20,11 @@ import { InfoPanel } from "~/components/primitives/InfoPanel";
 import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import {
+  RESIZABLE_PANEL_ANIMATION,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
+  collapsibleHandleClassName,
 } from "~/components/primitives/Resizable";
 import { SelectedItemsProvider } from "~/components/primitives/SelectedItemsProvider";
 import { ShortcutKey } from "~/components/primitives/ShortcutKey";
@@ -305,18 +307,32 @@ function RunsList({
           </>
         </div>
       </ResizablePanel>
-      {isShowingBulkActionInspector && (
-        <>
-          <ResizableHandle id="runs-handle" />
-          <ResizablePanel id="bulk-action-inspector" min="300px" default="400px" max="600px">
+      <ResizableHandle
+        id="runs-handle"
+        className={collapsibleHandleClassName(isShowingBulkActionInspector)}
+      />
+      <ResizablePanel
+        id="bulk-action-inspector"
+        default="400px"
+        min="400px"
+        max="600px"
+        className="overflow-hidden"
+        collapsible
+        collapsed={!isShowingBulkActionInspector}
+        onCollapseChange={() => {}}
+        collapsedSize="0px"
+        collapseAnimation={RESIZABLE_PANEL_ANIMATION}
+      >
+        <div className="h-full" style={{ minWidth: 400 }}>
+          {isShowingBulkActionInspector && (
             <CreateBulkActionInspector
               filters={filters}
               selectedItems={selectedItems}
               hasBulkActions={list.bulkActions.length > 0}
             />
-          </ResizablePanel>
-        </>
-      )}
+          )}
+        </div>
+      </ResizablePanel>
     </ResizablePanelGroup>
   );
 }
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules/route.tsx
index d32f9ecb5b4..769aa10cd75 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules/route.tsx
@@ -25,9 +25,11 @@ import { PaginationControls } from "~/components/primitives/Pagination";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import * as Property from "~/components/primitives/PropertyTable";
 import {
+  RESIZABLE_PANEL_ANIMATION,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
+  collapsibleHandleClassName,
 } from "~/components/primitives/Resizable";
 import {
   Table,
@@ -304,14 +306,25 @@ export default function Page() {
               )}
             </div>
           </ResizablePanel>
-          {(isShowingNewPane || isShowingSchedule) && (
-            <>
-              <ResizableHandle id="schedules-handle" />
-              <ResizablePanel id="schedules-inspector" min="100px" default="500px">
-                <Outlet />
-              </ResizablePanel>
-            </>
-          )}
+          <ResizableHandle
+            id="schedules-handle"
+            className={collapsibleHandleClassName(isShowingNewPane || isShowingSchedule)}
+          />
+          <ResizablePanel
+            id="schedules-inspector"
+            min="400px"
+            default="500px"
+            className="overflow-hidden"
+            collapsible
+            collapsed={!isShowingNewPane && !isShowingSchedule}
+            onCollapseChange={() => {}}
+            collapsedSize="0px"
+            collapseAnimation={RESIZABLE_PANEL_ANIMATION}
+          >
+            <div className="h-full" style={{ minWidth: 400 }}>
+              <Outlet />
+            </div>
+          </ResizablePanel>
         </ResizablePanelGroup>
       </PageBody>
     </PageContainer>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.tokens/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.tokens/route.tsx
index b3233abb858..782f3b132ff 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.tokens/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.tokens/route.tsx
@@ -13,9 +13,11 @@ import { DateTime } from "~/components/primitives/DateTime";
 import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import {
+  RESIZABLE_PANEL_ANIMATION,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
+  collapsibleHandleClassName,
 } from "~/components/primitives/Resizable";
 import {
   Table,
@@ -240,14 +242,25 @@ export default function Page() {
                 </div>
               </div>
             </ResizablePanel>
-            {isShowingWaitpoint && (
-              <>
-                <ResizableHandle id="waitpoint-tokens-handle" />
-                <ResizablePanel id="waitpoint-tokens-inspector" min="100px" default="500px">
-                  <Outlet />
-                </ResizablePanel>
-              </>
-            )}
+            <ResizableHandle
+              id="waitpoint-tokens-handle"
+              className={collapsibleHandleClassName(isShowingWaitpoint)}
+            />
+            <ResizablePanel
+              id="waitpoint-tokens-inspector"
+              min="450px"
+              default="500px"
+              className="overflow-hidden"
+              collapsible
+              collapsed={!isShowingWaitpoint}
+              onCollapseChange={() => {}}
+              collapsedSize="0px"
+              collapseAnimation={RESIZABLE_PANEL_ANIMATION}
+            >
+              <div className="h-full" style={{ minWidth: 450 }}>
+                <Outlet />
+              </div>
+            </ResizablePanel>
           </ResizablePanelGroup>
         )}
       </PageBody>
diff --git a/apps/webapp/app/routes/storybook.animated-panel/route.tsx b/apps/webapp/app/routes/storybook.animated-panel/route.tsx
new file mode 100644
index 00000000000..2f136bddb19
--- /dev/null
+++ b/apps/webapp/app/routes/storybook.animated-panel/route.tsx
@@ -0,0 +1,178 @@
+import { useState } from "react";
+import { ExitIcon } from "~/assets/icons/ExitIcon";
+import { Button } from "~/components/primitives/Buttons";
+import { Header2 } from "~/components/primitives/Headers";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import * as Property from "~/components/primitives/PropertyTable";
+import {
+  RESIZABLE_PANEL_ANIMATION,
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+  collapsibleHandleClassName,
+  useFrozenValue,
+} from "~/components/primitives/Resizable";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+} from "~/components/primitives/Table";
+
+type DemoItem = {
+  id: string;
+  name: string;
+  status: "completed" | "running" | "failed" | "queued";
+  duration: string;
+  task: string;
+};
+
+const demoItems: DemoItem[] = [
+  { id: "run_a1b2c3d4", name: "Process invoices", status: "completed", duration: "2.3s", task: "invoice/process" },
+  { id: "run_e5f6g7h8", name: "Send welcome email", status: "running", duration: "0.8s", task: "email/welcome" },
+  { id: "run_i9j0k1l2", name: "Generate report", status: "failed", duration: "12.1s", task: "report/generate" },
+  { id: "run_m3n4o5p6", name: "Sync inventory", status: "completed", duration: "5.7s", task: "inventory/sync" },
+  { id: "run_q7r8s9t0", name: "Resize images", status: "queued", duration: "—", task: "image/resize" },
+  { id: "run_u1v2w3x4", name: "Update search index", status: "completed", duration: "1.1s", task: "search/index" },
+  { id: "run_y5z6a7b8", name: "Calculate analytics", status: "running", duration: "8.4s", task: "analytics/calc" },
+  { id: "run_c9d0e1f2", name: "Deploy preview", status: "completed", duration: "34.2s", task: "deploy/preview" },
+  { id: "run_g3h4i5j6", name: "Run migrations", status: "failed", duration: "0.3s", task: "db/migrate" },
+  { id: "run_k7l8m9n0", name: "Notify Slack", status: "completed", duration: "0.5s", task: "notify/slack" },
+];
+
+const statusColors: Record<DemoItem["status"], string> = {
+  completed: "text-success",
+  running: "text-blue-500",
+  failed: "text-error",
+  queued: "text-text-dimmed",
+};
+
+function DetailPanel({ item, onClose }: { item: DemoItem; onClose: () => void }) {
+  return (
+    <div className="grid h-full max-h-full grid-rows-[2.5rem_1fr] overflow-hidden bg-background-bright">
+      <div className="flex items-center justify-between gap-2 overflow-x-hidden border-b border-grid-bright px-3 pr-2">
+        <Header2 className="truncate text-text-bright">{item.name}</Header2>
+        <Button
+          onClick={onClose}
+          variant="minimal/small"
+          TrailingIcon={ExitIcon}
+          shortcut={{ key: "esc" }}
+          shortcutPosition="before-trailing-icon"
+          className="pl-1"
+        />
+      </div>
+      <div className="overflow-y-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+        <Property.Table>
+          <Property.Item>
+            <Property.Label>Run ID</Property.Label>
+            <Property.Value>{item.id}</Property.Value>
+          </Property.Item>
+          <Property.Item>
+            <Property.Label>Task</Property.Label>
+            <Property.Value>{item.task}</Property.Value>
+          </Property.Item>
+          <Property.Item>
+            <Property.Label>Status</Property.Label>
+            <Property.Value>
+              <span className={statusColors[item.status]}>
+                {item.status.charAt(0).toUpperCase() + item.status.slice(1)}
+              </span>
+            </Property.Value>
+          </Property.Item>
+          <Property.Item>
+            <Property.Label>Duration</Property.Label>
+            <Property.Value>{item.duration}</Property.Value>
+          </Property.Item>
+        </Property.Table>
+        <div className="mt-4">
+          <Paragraph variant="small" className="text-text-dimmed">
+            This is a demo detail panel showing the animated slide-in/out behavior using
+            react-window-splitter&apos;s collapseAnimation. Click a different row to change the
+            detail, or press Esc / click the close button to dismiss.
+          </Paragraph>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function Story() {
+  const [selectedItem, setSelectedItem] = useState<DemoItem | null>(null);
+  const show = !!selectedItem;
+  const frozenItem = useFrozenValue(selectedItem);
+  const displayItem = selectedItem ?? frozenItem;
+
+  return (
+    <div className="h-full">
+      <ResizablePanelGroup orientation="horizontal" className="max-h-full">
+        <ResizablePanel id="animated-panel-main" min="200px">
+          <div className="grid h-full max-h-full grid-rows-[2.5rem_1fr] overflow-hidden">
+            <div className="flex items-center border-b border-grid-bright px-3">
+              <Header2 className="text-text-bright">Runs</Header2>
+            </div>
+            <Table containerClassName="max-h-full" showTopBorder={false}>
+              <TableHeader>
+                <TableRow>
+                  <TableHeaderCell>Run ID</TableHeaderCell>
+                  <TableHeaderCell>Name</TableHeaderCell>
+                  <TableHeaderCell>Task</TableHeaderCell>
+                  <TableHeaderCell>Status</TableHeaderCell>
+                  <TableHeaderCell alignment="right">Duration</TableHeaderCell>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {demoItems.map((item) => (
+                  <TableRow key={item.id} isSelected={selectedItem?.id === item.id}>
+                    <TableCell onClick={() => setSelectedItem(item)} isTabbableCell>
+                      {item.id}
+                    </TableCell>
+                    <TableCell onClick={() => setSelectedItem(item)}>{item.name}</TableCell>
+                    <TableCell onClick={() => setSelectedItem(item)}>{item.task}</TableCell>
+                    <TableCell onClick={() => setSelectedItem(item)}>
+                      <span className={statusColors[item.status]}>
+                        {item.status.charAt(0).toUpperCase() + item.status.slice(1)}
+                      </span>
+                    </TableCell>
+                    <TableCell onClick={() => setSelectedItem(item)} alignment="right">
+                      {item.duration}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle
+          id="animated-panel-handle"
+          className={collapsibleHandleClassName(show)}
+        />
+        <ResizablePanel
+          id="animated-panel-detail"
+          min="280px"
+          default="380px"
+          max="500px"
+          className="overflow-hidden"
+          collapsible
+          collapsed={!show}
+          onCollapseChange={(isCollapsed) => {
+            if (isCollapsed) setSelectedItem(null);
+          }}
+          collapsedSize="0px"
+          collapseAnimation={RESIZABLE_PANEL_ANIMATION}
+        >
+          <div className="h-full" style={{ minWidth: 280 }}>
+            {displayItem && (
+              <DetailPanel
+                key={displayItem.id}
+                item={displayItem}
+                onClose={() => setSelectedItem(null)}
+              />
+            )}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  );
+}
diff --git a/apps/webapp/app/routes/storybook/route.tsx b/apps/webapp/app/routes/storybook/route.tsx
index bcaee62d6b0..3efa990548c 100644
--- a/apps/webapp/app/routes/storybook/route.tsx
+++ b/apps/webapp/app/routes/storybook/route.tsx
@@ -8,6 +8,10 @@ import { requireUser } from "~/services/session.server";
 import { cn } from "~/utils/cn";
 
 const stories: Story[] = [
+  {
+    name: "Animated panel",
+    slug: "animated-panel",
+  },
   {
     name: "Avatar",
     slug: "avatar",