@lemonriver/core 0.1.0 → 0.2.0

package/src/app/routes/slide.tsx

@@ -14,6 +14,7 @@ import {
   MoreHorizontal,
   Play,
   Presentation,
+  Sparkles,
   Terminal,
 } from 'lucide-react';
 import {
@@ -21,15 +22,19 @@ import {
   type RefObject,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
 } from 'react';
 import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { toast } from 'sonner';
+import { AgentToggleButton } from '@/components/agent/agent-dock';
+import { AgentPanel } from '@/components/agent/agent-panel';
+import { AgentPresence } from '@/components/agent/agent-presence';
 import { AssetView } from '@/components/asset-view';
 import { HistoryProvider } from '@/components/history-provider';
-import { CommentWidget } from '@/components/inspector/comment-widget';
+import { CommentLayer } from '@/components/inspector/comment-layer';
 import { InlineEditLayer } from '@/components/inspector/inline-text-editor';
 import { InspectOverlay } from '@/components/inspector/inspect-overlay';
 import {
@@ -40,19 +45,25 @@ import {
 } from '@/components/inspector/inspector-provider';
 import { SaveBar } from '@/components/inspector/save-bar';
 import { EditorSidebar } from '@/components/panel/editor-sidebar';
+import { ResizeHandle, useStoredWidth } from '@/components/panel/resize-handle';
 import { DesignProvider } from '@/components/style-panel/design-provider';
 import { DesignToggleButton } from '@/components/style-panel/style-panel';
 import { Button, buttonVariants } from '@/components/ui/button';
 import {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { setDockOpen, useAgentActivity, useAgentDock } from '@/lib/agent/use-agent';
 import { useFolders } from '@/lib/folders';
 import {
   hasModifier,
@@ -67,8 +78,10 @@ import { useClickPageNavigation } from '@/lib/use-click-page-navigation';
 import { useDocumentTitle } from '@/lib/use-document-title';
 import { useIsMobile } from '@/lib/use-is-mobile';
 import { format, useLocale } from '@/lib/use-locale';
+import { useMediaQuery } from '@/lib/use-media-query';
 import { useWheelPageNavigation } from '@/lib/use-wheel-page-navigation';
 import { cn } from '@/lib/utils';
+import type { AgentTurnContext } from '../../agent/types';
 import { SlideCommandMenu } from '../components/command/slide-command-menu';
 import { PdfProgressToast, PptxProgressToast } from '../components/export-progress-toast';
 import { NotesDrawer } from '../components/notes-drawer';
@@ -127,6 +140,13 @@ export function Slide() {
   const [designOpen, setDesignOpen] = useState(false);
   const [overviewOpen, setOverviewOpen] = useState(false);
   const [commandOpen, setCommandOpen] = useState(false);
+  const { open: agentOpen, toggle: toggleAgent } = useAgentDock();
+  useLayoutEffect(() => {
+    if (agentOpen) setDesignOpen(false);
+  }, [agentOpen]);
+  useLayoutEffect(() => {
+    if (designOpen) setDockOpen(false);
+  }, [designOpen]);
   const [, setWarmedTick] = useState(0);
   const handleAssetsWarmed = useCallback(() => {
     markDeckWarmed(slideId);
@@ -142,6 +162,8 @@ export function Slide() {
   const slideViewportRef = useRef<HTMLElement>(null);
   const t = useLocale();
   const isMobile = useIsMobile();
+  const compactToolbar = useMediaQuery('(max-width: 1023.98px)');
+  const narrowToolbar = useMediaQuery('(max-width: 639.98px)');
   const prefersReducedMotion = usePrefersReducedMotion();
 
   const modulePages = useMemo(() => slide?.default ?? [], [slide]);
@@ -188,6 +210,16 @@ export function Slide() {
     [pageCount, setSearchParams],
   );
 
+  // While an agent writes this deck page by page, jump to each page as it
+  // lands so the user can follow along.
+  const agentActivity = useAgentActivity(slideId);
+  const agentWriting = agentActivity !== null;
+  const seenPageCount = useRef(pageCount);
+  useEffect(() => {
+    if (agentWriting && pageCount > seenPageCount.current) goTo(pageCount - 1);
+    seenPageCount.current = pageCount;
+  }, [agentWriting, pageCount, goTo]);
+
   const reorderPage = useCallback(
     async (from: number, to: number) => {
       if (from === to) return;
@@ -349,11 +381,13 @@ export function Slide() {
         setPlayMode('window');
       } else if (import.meta.env.DEV && (e.key === 'd' || e.key === 'D')) {
         setDesignOpen((v) => !v);
+      } else if (import.meta.env.DEV && (e.key === 'a' || e.key === 'A')) {
+        toggleAgent();
       }
     };
     window.addEventListener('keydown', onKey);
     return () => window.removeEventListener('keydown', onKey);
-  }, [index, goTo, playMode, slideId, overviewOpen, navigate]);
+  }, [index, goTo, playMode, slideId, overviewOpen, navigate, toggleAgent]);
 
   if (error) {
     return (
@@ -591,7 +625,7 @@ export function Slide() {
   };
 
   const exportMenuItems = (
-    <>
+    <DropdownMenuGroup>
       <DropdownMenuItem disabled={exporting} onClick={exportHtml}>
         <FileCode2 />
         {t.slide.exportAsHtml}
@@ -609,7 +643,7 @@ export function Slide() {
         <FileImage />
         {t.slide.exportAsImagePptx}
       </DropdownMenuItem>
-    </>
+    </DropdownMenuGroup>
   );
 
   return (
@@ -617,14 +651,16 @@ export function Slide() {
       <InspectorProvider
         slideId={slideId}
         pageIndex={index}
-        panelHidden={designOpen}
-        onPanelOpen={() => setDesignOpen(false)}
+        panelHidden={designOpen || agentOpen}
+        onPanelOpen={() => {
+          setDesignOpen(false);
+          setDockOpen(false);
+        }}
       >
         <SelectionReporter />
         <div className="flex h-dvh flex-col overflow-hidden bg-sidebar text-foreground">
-          {/* Toolbar sits directly on the chrome ground — three zones, mono-folio center */}
-          <header className="relative flex h-12 shrink-0 items-center gap-2 px-2 md:px-3">
-            <div className="flex flex-1 items-center gap-1.5 md:flex-none md:gap-2">
+          <header className="grid min-h-12 shrink-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-2 gap-y-1 px-2 py-2 md:px-3">
+            <div className="col-start-1 row-start-1 flex min-w-0 items-center gap-1.5 md:gap-2">
               {showSlideBrowser && (
                 <button
                   type="button"
@@ -661,29 +697,23 @@ export function Slide() {
               {import.meta.env.DEV && <AgentConnectedBadge />}
             </div>
 
-            {/* On md+ the title centers to the viewport via absolute positioning. On mobile the
-                two side groups each flex-1, so the in-flow title lands at the viewport center too —
-                and min-w-0 lets it truncate instead of overlapping the icons on narrow widths. */}
-            <div className="pointer-events-none relative flex min-w-0 justify-center px-2 md:absolute md:inset-x-0">
-              <div className="pointer-events-auto min-w-0 max-w-[34rem]">
+            <div className="col-span-3 row-start-2 flex min-w-0 justify-center sm:col-span-1 sm:col-start-2 sm:row-start-1">
+              <div className="min-w-0 max-w-[34rem]">
                 <InlineTitleEditor title={title} onSubmit={(next) => renameSlide(slideId, next)} />
               </div>
             </div>
 
-            <div className="flex flex-1 items-center justify-end gap-1 md:ml-auto md:flex-none">
-              {view === 'slides' && <InspectModeSwitcher />}
-              {import.meta.env.DEV && view === 'slides' && (
+            <div className="col-start-3 row-start-1 flex items-center justify-end gap-1">
+              {view === 'slides' && !narrowToolbar && <InspectModeSwitcher />}
+              {import.meta.env.DEV && view === 'slides' && !compactToolbar && (
                 <span aria-hidden className="mx-0.5 hidden h-5 w-px bg-hairline md:block" />
               )}
-              {view === 'slides' && (
+              {view === 'slides' && !compactToolbar && (
                 <button
                   type="button"
                   aria-label={t.slide.copyLink}
                   title={t.slide.copyLink}
-                  className={cn(
-                    buttonVariants({ variant: 'ghost', size: 'icon-sm' }),
-                    'hidden md:inline-flex',
-                  )}
+                  className={buttonVariants({ variant: 'ghost', size: 'icon-sm' })}
                   onClick={copyLink}
                 >
                   <span className="relative grid size-4 place-items-center">
@@ -702,17 +732,14 @@ export function Slide() {
                   </span>
                 </button>
               )}
-              {view === 'slides' && allowHtmlDownload && (
+              {view === 'slides' && allowHtmlDownload && !compactToolbar && (
                 <DropdownMenu>
                   <DropdownMenuTrigger
                     type="button"
                     disabled={exporting}
                     aria-label={t.slide.download}
                     title={t.slide.download}
-                    className={cn(
-                      buttonVariants({ variant: 'ghost', size: 'icon-sm' }),
-                      'hidden md:inline-flex',
-                    )}
+                    className={buttonVariants({ variant: 'ghost', size: 'icon-sm' })}
                   >
                     {exporting ? (
                       <Loader2 className="size-4 animate-spin motion-reduce:animate-none" />
@@ -725,17 +752,13 @@ export function Slide() {
                   </DropdownMenuContent>
                 </DropdownMenu>
               )}
-              {view === 'slides' && (
-                <DropdownMenu>
+              {view === 'slides' && compactToolbar && (
+                <DropdownMenu key={narrowToolbar ? 'narrow' : 'compact'}>
                   <DropdownMenuTrigger
                     type="button"
-                    disabled={exporting}
                     aria-label={t.slide.moreActions}
                     title={t.slide.moreActions}
-                    className={cn(
-                      buttonVariants({ variant: 'ghost', size: 'icon-sm' }),
-                      'inline-flex md:hidden',
-                    )}
+                    className={buttonVariants({ variant: 'ghost', size: 'icon-sm' })}
                   >
                     {exporting ? (
                       <Loader2 className="size-4 animate-spin motion-reduce:animate-none" />
@@ -744,34 +767,50 @@ export function Slide() {
                     )}
                   </DropdownMenuTrigger>
                   <DropdownMenuContent align="end" className="min-w-[200px]">
-                    <DropdownMenuItem onClick={() => setCommandOpen(true)}>
-                      <Terminal />
-                      {t.commandMenu.trigger}
-                    </DropdownMenuItem>
-                    <DropdownMenuItem onClick={copyLink}>
-                      <Link2 />
-                      {t.slide.copyLink}
-                    </DropdownMenuItem>
+                    {narrowToolbar && import.meta.env.DEV && (
+                      <EditorMenuItems
+                        designOpen={designOpen}
+                        onDesignToggle={() => setDesignOpen((v) => !v)}
+                      />
+                    )}
+                    <DropdownMenuGroup>
+                      {narrowToolbar && import.meta.env.DEV && (
+                        <DropdownMenuItem onClick={toggleAgent}>
+                          <Sparkles />
+                          {t.agent.openTitle}
+                        </DropdownMenuItem>
+                      )}
+                      <DropdownMenuItem onClick={() => setCommandOpen(true)}>
+                        <Terminal />
+                        {t.commandMenu.trigger}
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={copyLink}>
+                        <Link2 />
+                        {t.slide.copyLink}
+                      </DropdownMenuItem>
+                    </DropdownMenuGroup>
                     {allowHtmlDownload && <DropdownMenuSeparator />}
                     {allowHtmlDownload && exportMenuItems}
                   </DropdownMenuContent>
                 </DropdownMenu>
               )}
-              {view === 'slides' && (
+              {import.meta.env.DEV && view === 'slides' && !narrowToolbar && <AgentToggleButton />}
+              {view === 'slides' && !narrowToolbar && (
                 <DesignToggleButton active={designOpen} onToggle={() => setDesignOpen((v) => !v)} />
               )}
-              {view === 'slides' && <InspectPanelButton />}
+              {view === 'slides' && !narrowToolbar && <InspectPanelButton />}
               <span aria-hidden className="mx-0.5 hidden h-5 w-px bg-hairline md:block" />
               {view === 'slides' && (
                 <div className="inline-flex items-stretch">
                   <Button
                     size="sm"
                     variant="brand"
+                    aria-label={t.slide.present}
                     onClick={() => setPlayMode(isMobile ? 'window' : 'fullscreen')}
-                    className="px-2.5 md:rounded-r-none md:px-3"
+                    className="rounded-r-none px-2.5 lg:px-3"
                   >
                     <Play className="size-3.5 fill-current" />
-                    <span className="hidden md:inline">{t.slide.present}</span>
+                    <span className="hidden lg:inline">{t.slide.present}</span>
                   </Button>
                   <DropdownMenu>
                     <DropdownMenuTrigger
@@ -780,32 +819,34 @@ export function Slide() {
                       title={t.slide.presentMenuAria}
                       className={cn(
                         buttonVariants({ variant: 'brand', size: 'sm' }),
-                        'hidden rounded-l-none px-1.5 shadow-[inset_1px_0_0_oklch(0_0_0/0.12),inset_0_1px_0_oklch(1_0_0/0.18),0_1px_0_oklch(0_0_0/0.16)] md:inline-flex',
+                        'rounded-l-none px-1.5 shadow-[inset_1px_0_0_oklch(0_0_0/0.12),inset_0_1px_0_oklch(1_0_0/0.18),0_1px_0_oklch(0_0_0/0.16)]',
                       )}
                     >
                       <ChevronDown className="size-3.5" />
                     </DropdownMenuTrigger>
                     <DropdownMenuContent align="end" className="min-w-[200px]">
-                      <DropdownMenuItem onClick={() => setPlayMode('window')}>
-                        <Play />
-                        {t.slide.presentInWindow}
-                        <DropdownMenuShortcut>↵</DropdownMenuShortcut>
-                      </DropdownMenuItem>
-                      <DropdownMenuItem onClick={() => setPlayMode('fullscreen')}>
-                        <Maximize />
-                        {t.slide.presentFullscreen}
-                        <DropdownMenuShortcut>F</DropdownMenuShortcut>
-                      </DropdownMenuItem>
-                      <DropdownMenuItem
-                        onClick={() => {
-                          if (slideId) openPresenterWindow(slideId);
-                          setPlayMode('window');
-                        }}
-                      >
-                        <MonitorSpeaker />
-                        {t.slide.presentPresenter}
-                        <DropdownMenuShortcut>P</DropdownMenuShortcut>
-                      </DropdownMenuItem>
+                      <DropdownMenuGroup>
+                        <DropdownMenuItem onClick={() => setPlayMode('window')}>
+                          <Play />
+                          {t.slide.presentInWindow}
+                          <DropdownMenuShortcut>↵</DropdownMenuShortcut>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => setPlayMode('fullscreen')}>
+                          <Maximize />
+                          {t.slide.presentFullscreen}
+                          <DropdownMenuShortcut>F</DropdownMenuShortcut>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          onClick={() => {
+                            if (slideId) openPresenterWindow(slideId);
+                            setPlayMode('window');
+                          }}
+                        >
+                          <MonitorSpeaker />
+                          {t.slide.presentPresenter}
+                          <DropdownMenuShortcut>P</DropdownMenuShortcut>
+                        </DropdownMenuItem>
+                      </DropdownMenuGroup>
                     </DropdownMenuContent>
                   </DropdownMenu>
                 </div>
@@ -840,6 +881,7 @@ export function Slide() {
                     ref={slideViewportRef}
                     data-inspector-root
                     data-slide-id={slideId}
+                    data-agent-provider={agentActivity?.provider}
                     className="relative min-h-0 min-w-0 flex-1 bg-background p-2 md:mx-2 md:mb-2 md:rounded-[10px] md:p-10 md:shadow-edge md:ring-1 md:ring-foreground/[0.06]"
                   >
                     <SlideViewportNavigation
@@ -861,7 +903,8 @@ export function Slide() {
                     <InspectOverlay />
                     <InlineEditLayer />
                     <SaveBar />
-                    {import.meta.env.DEV && <CommentWidget />}
+                    {import.meta.env.DEV && <CommentLayer />}
+                    {agentActivity && <AgentPresence activity={agentActivity} revision={pages} />}
                   </main>
                   {/* Mobile-only horizontal rail. Sits below the canvas and
                     pads its bottom for the iOS home indicator / Safari URL bar. */}
@@ -881,6 +924,17 @@ export function Slide() {
                   <EditorSidebar
                     designOpen={designOpen}
                     onCloseDesign={() => setDesignOpen(false)}
+                    agentOpen={agentOpen}
+                    agent={
+                      import.meta.env.DEV && (
+                        <SlideAgentDock
+                          slideId={slideId}
+                          slideTitle={title}
+                          pageNumber={index + 1}
+                          totalPages={pageCount}
+                        />
+                      )
+                    }
                   />
                 </div>
                 {import.meta.env.DEV && (
@@ -922,6 +976,7 @@ export function Slide() {
                 onCopyLink: copyLink,
                 onOverview: () => setOverviewOpen(true),
                 onToggleDesignPanel: () => setDesignOpen((v) => !v),
+                onToggleAgentPanel: toggleAgent,
                 onExportHtml: exportHtml,
                 onExportPdf: exportPdf,
                 onExportPptx: exportPptx,
@@ -941,14 +996,6 @@ const DEFAULT_RAIL_WIDTH = 264;
 const MIN_RAIL_WIDTH = 200;
 const MAX_RAIL_WIDTH = 480;
 
-function readStoredRailWidth(): number {
-  if (typeof window === 'undefined') return DEFAULT_RAIL_WIDTH;
-  const raw = window.localStorage.getItem(RAIL_WIDTH_STORAGE_KEY);
-  const parsed = raw == null ? Number.NaN : Number(raw);
-  if (!Number.isFinite(parsed)) return DEFAULT_RAIL_WIDTH;
-  return Math.min(MAX_RAIL_WIDTH, Math.max(MIN_RAIL_WIDTH, parsed));
-}
-
 function ResizableRail(props: {
   pages: SlideModule['default'];
   design?: SlideModule['design'];
@@ -961,107 +1008,104 @@ function ResizableRail(props: {
   onBoard?: () => void;
 }) {
   const t = useLocale();
-  const [width, setWidth] = useState<number>(readStoredRailWidth);
-  const [resizing, setResizing] = useState(false);
-  const dragRef = useRef<{ startX: number; startWidth: number } | null>(null);
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    window.localStorage.setItem(RAIL_WIDTH_STORAGE_KEY, String(width));
-  }, [width]);
-
-  useEffect(() => {
-    if (!resizing) return;
-    const prev = {
-      cursor: document.body.style.cursor,
-      userSelect: document.body.style.userSelect,
-    };
-    document.body.style.cursor = 'col-resize';
-    document.body.style.userSelect = 'none';
-    return () => {
-      document.body.style.cursor = prev.cursor;
-      document.body.style.userSelect = prev.userSelect;
-    };
-  }, [resizing]);
-
-  const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.currentTarget.setPointerCapture(e.pointerId);
-    dragRef.current = { startX: e.clientX, startWidth: width };
-    setResizing(true);
-  };
-
-  const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
-    if (!dragRef.current) return;
-    const delta = e.clientX - dragRef.current.startX;
-    const next = Math.min(
-      MAX_RAIL_WIDTH,
-      Math.max(MIN_RAIL_WIDTH, dragRef.current.startWidth + delta),
-    );
-    setWidth(next);
-  };
-
-  const onPointerUp = (e: React.PointerEvent<HTMLDivElement>) => {
-    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
-      e.currentTarget.releasePointerCapture(e.pointerId);
-    }
-    dragRef.current = null;
-    setResizing(false);
-  };
-
-  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    const step = e.shiftKey ? 32 : 8;
-    if (e.key === 'ArrowLeft') {
-      e.preventDefault();
-      e.stopPropagation();
-      setWidth((w) => Math.max(MIN_RAIL_WIDTH, w - step));
-    } else if (e.key === 'ArrowRight') {
-      e.preventDefault();
-      e.stopPropagation();
-      setWidth((w) => Math.min(MAX_RAIL_WIDTH, w + step));
-    } else if (e.key === 'Home') {
-      e.preventDefault();
-      e.stopPropagation();
-      setWidth(DEFAULT_RAIL_WIDTH);
-    }
-  };
+  const [width, setWidth] = useStoredWidth(
+    RAIL_WIDTH_STORAGE_KEY,
+    DEFAULT_RAIL_WIDTH,
+    MIN_RAIL_WIDTH,
+    MAX_RAIL_WIDTH,
+  );
 
   return (
     <div className="relative hidden shrink-0 md:block" style={{ width }}>
       <ThumbnailRail width={width} {...props} />
-      {/* biome-ignore lint/a11y/useSemanticElements: focusable resize handle (splitter pattern), not a static <hr> */}
-      <div
-        role="separator"
-        aria-orientation="vertical"
-        aria-label={t.thumbnailRail.resizeRail}
-        aria-valuenow={width}
-        aria-valuemin={MIN_RAIL_WIDTH}
-        aria-valuemax={MAX_RAIL_WIDTH}
-        tabIndex={0}
-        onPointerDown={onPointerDown}
-        onPointerMove={onPointerMove}
-        onPointerUp={onPointerUp}
-        onPointerCancel={onPointerUp}
-        onKeyDown={onKeyDown}
-        onDoubleClick={() => setWidth(DEFAULT_RAIL_WIDTH)}
-        className={cn(
-          'group/resize absolute inset-y-0 right-0 z-20 w-1.5 translate-x-1/2 cursor-col-resize touch-none outline-none',
-          'focus-visible:bg-brand/20',
-        )}
-      >
-        <span
-          aria-hidden
-          className={cn(
-            'pointer-events-none absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-brand opacity-0 transition-opacity duration-150',
-            'group-hover/resize:opacity-100 group-focus-visible/resize:opacity-100',
-            resizing && 'opacity-100',
-          )}
-        />
-      </div>
+      <ResizeHandle
+        width={width}
+        min={MIN_RAIL_WIDTH}
+        max={MAX_RAIL_WIDTH}
+        defaultWidth={DEFAULT_RAIL_WIDTH}
+        edge="right"
+        label={t.thumbnailRail.resizeRail}
+        onResize={setWidth}
+        className="right-0 translate-x-1/2"
+      />
     </div>
   );
 }
 
+function EditorMenuItems({
+  designOpen,
+  onDesignToggle,
+}: {
+  designOpen: boolean;
+  onDesignToggle: () => void;
+}) {
+  const t = useLocale();
+  const { active, toggle, panelOpen, panelHidden, togglePanel } = useInspector();
+  return (
+    <>
+      <DropdownMenuGroup>
+        <DropdownMenuRadioGroup
+          value={active ? 'edit' : 'preview'}
+          onValueChange={(value) => {
+            if ((value === 'edit') !== active) toggle();
+          }}
+        >
+          <DropdownMenuRadioItem value="preview">{t.inspector.previewMode}</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="edit">{t.inspector.editMode}</DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+        <DropdownMenuCheckboxItem
+          checked={designOpen}
+          onCheckedChange={onDesignToggle}
+          closeOnClick
+        >
+          {t.stylePanel.designToggle}
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem
+          checked={active && panelOpen && !panelHidden}
+          onCheckedChange={togglePanel}
+          closeOnClick
+        >
+          {t.inspector.format}
+        </DropdownMenuCheckboxItem>
+      </DropdownMenuGroup>
+      <DropdownMenuSeparator />
+    </>
+  );
+}
+
+function SlideAgentDock({
+  slideId,
+  slideTitle,
+  pageNumber,
+  totalPages,
+}: {
+  slideId: string;
+  slideTitle: string;
+  pageNumber: number;
+  totalPages: number;
+}) {
+  const { selected, comments } = useInspector();
+  const context = useMemo<AgentTurnContext>(
+    () => ({
+      slideId,
+      slideTitle,
+      pageNumber,
+      totalPages,
+      pendingComments: comments.length,
+      selection: selected
+        ? {
+            line: selected.line,
+            column: selected.column,
+            tagName: selected.anchor.tagName.toLowerCase(),
+            text: (selected.anchor.textContent ?? '').replace(/\s+/g, ' ').trim().slice(0, 120),
+          }
+        : null,
+    }),
+    [slideId, slideTitle, pageNumber, totalPages, comments.length, selected],
+  );
+  return <AgentPanel context={context} onClose={() => setDockOpen(false)} />;
+}
+
 function AgentConnectedBadge() {
   const t = useLocale();
   const connected = useAgentSocketConnected();
@@ -1072,6 +1116,7 @@ function AgentConnectedBadge() {
           render={
             <button
               type="button"
+              aria-label={connected ? t.slide.agentConnected : t.slide.agentDisconnected}
               className="ml-1 flex shrink-0 cursor-help items-center gap-1.5 rounded-[3px] border border-hairline bg-card px-1.5 py-0.5 text-[10.5px] text-foreground/85 outline-none transition-colors duration-150 hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-ring/30"
             >
               <span aria-hidden className="relative flex size-1.5 items-center justify-center">
@@ -1084,7 +1129,9 @@ function AgentConnectedBadge() {
                   <span className="relative inline-flex size-1.5 rounded-full bg-rose-500" />
                 )}
               </span>
-              {connected ? t.slide.agentConnected : t.slide.agentDisconnected}
+              <span className="hidden xl:inline">
+                {connected ? t.slide.agentConnected : t.slide.agentDisconnected}
+              </span>
             </button>
           }
         />
@@ -1130,13 +1177,14 @@ function SlideViewportNavigation({
   canPrev: boolean;
   canNext: boolean;
 }) {
-  const { active, inlineEdit } = useInspector();
+  const { mode, inlineEdit } = useInspector();
   const isMobile = useIsMobile();
   const editing = !!inlineEdit;
+  const browsing = mode === 'preview';
 
   useWheelPageNavigation({
     ref: targetRef,
-    enabled: !active && !editing,
+    enabled: browsing && !editing,
     canPrev,
     canNext,
     onPrev,
@@ -1148,7 +1196,7 @@ function SlideViewportNavigation({
   // zones). Interactive slide content keeps its tap via the hook's passthrough.
   useClickPageNavigation({
     ref: targetRef,
-    enabled: isMobile && !active && !editing,
+    enabled: isMobile && browsing && !editing,
     edgeRatio: 0.18,
     canPrev,
     canNext,