Simplify autopilot session page layout (#5889)

* Simplify autopilot session page layout

- Move session ID from page title to breadcrumbs
- Add plus button for new session in sidebar nav
- Reduce margin between breadcrumbs and chat area
- Shorten breadcrumb label from "Autopilot Sessions" to "Autopilot"

* Fix nested link issue and move all titles to breadcrumbs

- Use button with navigate() instead of nested Link
- Move "New Session" from page title to breadcrumbs
- Remove page title entirely for all states

* Improve plus button hover state and add cursor pointer

* Simplify autopilot session page layout

- Remove border around chat messages, use full-page scroll
- Add fixed header with breadcrumbs and fade gradient overlay
- Add fixed footer with chat input
- Dynamic footer height measurement for responsive spacer
- Use bg-bg-secondary for consistent background color

* Fix autopilot sidebar plus button placement

Move plus button from navigation loop to autopilot item
where it actually renders. The previous code checked for
section.title === "Autopilot" but Autopilot is rendered
separately, not in the navigation array.

* Replace spinner with animated ellipsis in status indicator

- Create reusable AnimatedEllipsis component
- Remove Loader2 spinner from status indicator
- Use animated dots for thinking/loading states

* Add configurable AnimatedEllipsis component

- Add reserveWidth option (default: true) to prevent layout shift
- Add absolute option for positioning without affecting layout
- Export ReservedWidth utility for other use cases
- Use absolute positioning in status indicator for centered text

* Refactor AnimatedEllipsis to use EllipsisMode enum

- Replace boolean props with EllipsisMode enum (Dynamic, FixedWidth, Absolute)
- Add horizontal margin to status indicator
- Export EllipsisMode for explicit mode selection

* Move tool approval card to fixed footer and improve status indicator

- Move PendingToolCallCard from scrollable content to fixed footer
- Lift authorization state and handlers to parent component
- Add shared Divider component for consistent styling
- Use AnimatedEllipsis in status indicator instead of static "..."
- Fix loading skeleton vertical centering with min-h-[50vh]
- Add className prop to PendingToolCallCard for pointer-events

* Extract FadeGradient component with direction and color enums

- Create reusable FadeGradient component in ~/components/ui/
- Add FadeDirection enum (Top, Bottom) for gradient direction
- Add SurfaceColor enum (Primary, Secondary, Tertiary) for common surfaces
- Fix scroll position adjustment when footer height changes
- Separate footer height measurement from scroll adjustment effect

* Reduce fade gradient height from h-16 to h-10

* Add useElementHeight hook and improve session page layout

- Extract useElementHeight hook for reusable ResizeObserver logic
- Dynamic header/footer height measurement via hook
- Use padding instead of spacer divs for header/footer spacing
- Consolidate session state reset into single useEffect
- Extract handleScroll to named function for clarity
- Skip scroll adjustment on initial mount to prevent jump

* Only adjust scroll when user is near bottom of content

* Fix scroll adjustment for large footer height changes

* Fix nested interactive elements in sidebar - use absolute positioning for + button

* Change session divider text from 'Started' to 'Start'

* Fix prettier formatting

* Move SSE error message from scrollable content to fixed header

* Extract ErrorBanner component

* Fix scroll adjustment: only adjust on footer growth, reset ref on session change

* Fix cooldown ref reset on session change and bottom fade init

* Use lodash-es debounce instead of local implementation

* Simplify isEventsLoading logic (align with #5948)

* Clear hasLoadError when events load (align with #5953)

Author: simeonlee

ui/app/components/autopilot/ChatInput.tsx

@@ -175,9 +175,9 @@ export function ChatInput({
         onChange={(e) => setText(e.target.value)}
         onKeyDown={handleKeyDown}
         placeholder={placeholder}
-        disabled={disabled}
+        disabled={disabled || isSubmitting}
         className={cn(
-          "resize-none overflow-y-auto",
+          "bg-bg-secondary resize-none overflow-y-auto",
           "rounded-md py-[11px] pr-14 pl-4 text-sm",
           "focus-visible:border-fg-muted focus-visible:ring-0",
         )}

ui/app/components/autopilot/EventStream.tsx

@@ -1,10 +1,9 @@
-import {
-  AlertCircle,
-  AlertTriangle,
-  ChevronRight,
-  Loader2,
-} from "lucide-react";
+import { AlertCircle, AlertTriangle, ChevronRight } from "lucide-react";
 import { Component, type RefObject, useState } from "react";
+import {
+  AnimatedEllipsis,
+  EllipsisMode,
+} from "~/components/ui/AnimatedEllipsis";
 import { Markdown, ReadOnlyCodeBlock } from "~/components/ui/markdown";
 import { Skeleton } from "~/components/ui/skeleton";
 import { logger } from "~/utils/logger";
@@ -483,16 +482,20 @@ function EventSkeletons({ count = 3 }: { count?: number }) {
   );
 }
 
-function SessionStartedDivider() {
+function Divider({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex items-center gap-4 py-2">
+    <div className="flex items-center gap-5 py-2">
       <div className="border-border flex-1 border-t" />
-      <span className="text-fg-muted text-xs">Started</span>
+      <span className="text-fg-muted relative text-xs">{children}</span>
       <div className="border-border flex-1 border-t" />
     </div>
   );
 }
 
+function SessionStartDivider() {
+  return <Divider>Start</Divider>;
+}
+
 function OptimisticMessageItem({ message }: { message: OptimisticMessage }) {
   // Optimistic messages are shown after POST succeeds, so the message is saved.
   // We display it like a regular user message, with a skeleton for the timestamp.
@@ -509,42 +512,36 @@ function OptimisticMessageItem({ message }: { message: OptimisticMessage }) {
   );
 }
 
-function getStatusLabel(status: AutopilotStatus): string {
+function getStatusLabel(status: AutopilotStatus): {
+  text: string;
+  showEllipsis: boolean;
+} {
   switch (status.status) {
     case "idle":
-      return "Ready";
+      return { text: "Ready", showEllipsis: false };
     case "server_side_processing":
-      return "Thinking...";
+      return { text: "Thinking", showEllipsis: true };
     case "waiting_for_tool_call_authorization":
-      return "Waiting";
+      return { text: "Waiting", showEllipsis: false };
     case "waiting_for_tool_execution":
-      return "Executing tool...";
+      return { text: "Executing tool", showEllipsis: true };
     case "waiting_for_retry":
-      return "Something went wrong. Retrying...";
+      return { text: "Something went wrong. Retrying", showEllipsis: true };
     case "failed":
-      return "Something went wrong. Please try again.";
+      return {
+        text: "Something went wrong. Please try again.",
+        showEllipsis: false,
+      };
   }
 }
 
-function isLoadingStatus(status: AutopilotStatus): boolean {
-  return (
-    status.status === "server_side_processing" ||
-    status.status === "waiting_for_tool_execution" ||
-    status.status === "waiting_for_retry"
-  );
-}
-
 function StatusIndicator({ status }: { status: AutopilotStatus }) {
-  const showSpinner = isLoadingStatus(status);
+  const { text, showEllipsis } = getStatusLabel(status);
   return (
-    <div className="flex items-center gap-4 py-2">
-      <div className="border-border flex-1 border-t" />
-      <span className="text-fg-muted flex items-center gap-1.5 text-xs">
-        {getStatusLabel(status)}
-        {showSpinner && <Loader2 className="h-3 w-3 animate-spin" />}
-      </span>
-      <div className="border-border flex-1 border-t" />
-    </div>
+    <Divider>
+      {text}
+      {showEllipsis && <AnimatedEllipsis mode={EllipsisMode.Absolute} />}
+    </Divider>
   );
 }
 
@@ -560,10 +557,10 @@ export default function EventStream({
 }: EventStreamProps) {
   return (
     <div className={cn("flex flex-col gap-3", className)}>
-      {/* Session started indicator, or sentinel for loading more */}
+      {/* Session start indicator, or sentinel for loading more */}
       {/* Show divider when we've reached the start OR when there are optimistic messages (new session) */}
       {(hasReachedStart || optimisticMessages.length > 0) && !isLoadingOlder ? (
-        <SessionStartedDivider />
+        <SessionStartDivider />
       ) : (
         <div ref={topSentinelRef} className="h-1" aria-hidden="true" />
       )}

ui/app/components/autopilot/PendingToolCallCard.tsx

@@ -12,6 +12,7 @@ type PendingToolCallCardProps = {
   onAuthorize: (approved: boolean) => void;
   additionalCount: number;
   isInCooldown?: boolean;
+  className?: string;
 };
 
 export function PendingToolCallCard({
@@ -21,6 +22,7 @@ export function PendingToolCallCard({
   onAuthorize,
   additionalCount,
   isInCooldown = false,
+  className,
 }: PendingToolCallCardProps) {
   const [isExpanded, setIsExpanded] = useState(false);
   const [confirmReject, setConfirmReject] = useState(false);
@@ -60,6 +62,7 @@ export function PendingToolCallCard({
         "flex flex-col gap-2 rounded-md border border-blue-300 bg-blue-50 px-4 py-3 dark:border-blue-700 dark:bg-blue-950/30",
         isInCooldown &&
           "animate-in fade-in zoom-in-95 duration-1000 ease-in-out",
+        className,
       )}
     >
       <div className="flex items-center justify-between gap-4">

ui/app/components/layout/app.sidebar.tsx

@@ -13,7 +13,7 @@ import {
   SidebarCollapse,
   SidebarExpand,
 } from "~/components/icons/Icons";
-import { KeyRound, LayoutGrid } from "lucide-react";
+import { KeyRound, LayoutGrid, Plus } from "lucide-react";
 import {
   Sidebar,
   SidebarContent,
@@ -162,7 +162,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
               </SidebarMenuButton>
             </SidebarMenuItem>
             {autopilotAvailable && (
-              <SidebarMenuItem className="list-none">
+              <SidebarMenuItem className="relative list-none">
                 <SidebarMenuButton
                   asChild
                   tooltip={state === "collapsed" ? "Autopilot" : undefined}
@@ -175,6 +175,15 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                     </span>
                   </Link>
                 </SidebarMenuButton>
+                {state === "expanded" && (
+                  <Link
+                    to="/autopilot/sessions/new"
+                    className="text-fg-muted hover:text-fg-primary absolute top-1/2 right-2 z-10 -translate-y-1/2 rounded p-0.5 transition-colors"
+                    aria-label="New session"
+                  >
+                    <Plus className="h-4 w-4" />
+                  </Link>
+                )}
               </SidebarMenuItem>
             )}
           </SidebarGroupContent>
@@ -190,11 +199,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                     tooltip={state === "collapsed" ? item.title : undefined}
                     isActive={activePathUtils.isActive(item.url)}
                   >
-                    <Link
-                      to={item.url}
-                      className="flex items-center gap-2"
-                      onClick={(e) => e.stopPropagation()}
-                    >
+                    <Link to={item.url} className="flex items-center gap-2">
                       <item.icon className="h-4 w-4" />
                       <span className="whitespace-nowrap transition-opacity duration-200 group-data-[collapsible=icon]:opacity-0">
                         {item.title}

ui/app/components/ui/AnimatedEllipsis.tsx

@@ -0,0 +1,66 @@
+import { useState, useEffect } from "react";
+import { cn } from "~/utils/common";
+
+type ReservedWidthProps = {
+  /** The text whose width to reserve (rendered invisibly) */
+  children: string;
+};
+
+/** Reserves the exact width of the given text without rendering it visibly */
+export function ReservedWidth({ children }: ReservedWidthProps) {
+  return <span className="invisible">{children}</span>;
+}
+
+/** Layout mode for AnimatedEllipsis */
+export const EllipsisMode = {
+  /** Dynamic width - shifts layout as dots change */
+  Dynamic: "dynamic",
+  /** Fixed width - reserves space for "..." to prevent layout shift */
+  FixedWidth: "fixed-width",
+  /** Absolute - positioned outside layout flow */
+  Absolute: "absolute",
+} as const;
+
+export type EllipsisMode = (typeof EllipsisMode)[keyof typeof EllipsisMode];
+
+type AnimatedEllipsisProps = {
+  /** Animation interval in ms */
+  interval?: number;
+  /** Layout mode */
+  mode?: EllipsisMode;
+  className?: string;
+};
+
+export function AnimatedEllipsis({
+  interval = 400,
+  mode = EllipsisMode.FixedWidth,
+  className,
+}: AnimatedEllipsisProps) {
+  const [dots, setDots] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setDots((prev) => (prev + 1) % 4);
+    }, interval);
+    return () => clearInterval(timer);
+  }, [interval]);
+
+  const dotsContent = ".".repeat(dots);
+
+  if (mode === EllipsisMode.Absolute) {
+    return (
+      <span className={cn("absolute left-full", className)}>{dotsContent}</span>
+    );
+  }
+
+  if (mode === EllipsisMode.FixedWidth) {
+    return (
+      <span className={cn("relative inline-block", className)}>
+        <ReservedWidth>...</ReservedWidth>
+        <span className="absolute left-0">{dotsContent}</span>
+      </span>
+    );
+  }
+
+  return <span className={className}>{dotsContent}</span>;
+}

ui/app/components/ui/FadeGradient.tsx

@@ -0,0 +1,56 @@
+import { cn } from "~/utils/common";
+
+/** Direction the gradient fades toward */
+export const FadeDirection = {
+  /** Fades from solid at top to transparent at bottom */
+  Top: "top",
+  /** Fades from solid at bottom to transparent at top */
+  Bottom: "bottom",
+} as const;
+
+export type FadeDirection = (typeof FadeDirection)[keyof typeof FadeDirection];
+
+/** Common surface colors for backgrounds and gradients */
+export const SurfaceColor = {
+  Primary: "primary",
+  Secondary: "secondary",
+  Tertiary: "tertiary",
+} as const;
+
+export type SurfaceColor = (typeof SurfaceColor)[keyof typeof SurfaceColor];
+
+const surfaceColorClasses: Record<SurfaceColor, string> = {
+  [SurfaceColor.Primary]: "from-bg-primary",
+  [SurfaceColor.Secondary]: "from-bg-secondary",
+  [SurfaceColor.Tertiary]: "from-bg-tertiary",
+};
+
+type FadeGradientProps = {
+  direction: FadeDirection;
+  visible: boolean;
+  color?: SurfaceColor;
+  className?: string;
+};
+
+export function FadeGradient({
+  direction,
+  visible,
+  color = SurfaceColor.Secondary,
+  className,
+}: FadeGradientProps) {
+  return (
+    <div
+      className={cn(
+        "h-10",
+        surfaceColorClasses[color],
+        "to-transparent",
+        direction === FadeDirection.Top
+          ? "bg-gradient-to-b"
+          : "bg-gradient-to-t",
+        "transition-opacity duration-75",
+        visible ? "opacity-100" : "opacity-0",
+        className,
+      )}
+    />
+  );
+}

ui/app/hooks/useElementHeight.ts

@@ -0,0 +1,31 @@
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * Hook to measure an element's height dynamically using ResizeObserver.
+ * Returns a ref to attach to the element and the current height.
+ */
+export function useElementHeight(initialHeight: number = 0) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const [height, setHeight] = useState(initialHeight);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    const measureHeight = () => {
+      const newHeight = element.offsetHeight;
+      if (newHeight > 0) {
+        setHeight((prev) => (prev !== newHeight ? newHeight : prev));
+      }
+    };
+
+    measureHeight();
+
+    const resizeObserver = new ResizeObserver(measureHeight);
+    resizeObserver.observe(element);
+
+    return () => resizeObserver.disconnect();
+  }, []);
+
+  return [ref, height] as const;
+}