@lemonriver/core 0.1.0 → 0.2.0

package/src/app/components/inspector/image-crop-dialog.tsx

@@ -1,6 +1,6 @@
 import { type SyntheticEvent, useEffect, useRef, useState } from 'react';
 import ReactCrop, { type Crop, type PercentCrop } from 'react-image-crop';
-import { round2 } from '@/lib/utils';
+import { clamp, round2 } from '@/lib/utils';
 import 'react-image-crop/dist/ReactCrop.css';
 import { Button } from '@/components/ui/button';
 import {
@@ -209,7 +209,3 @@ function roundRect(crop: PercentCrop): ImageCropRect {
     height: round2(crop.height),
   };
 }
-
-function clamp(v: number, lo: number, hi: number) {
-  return v < lo ? lo : v > hi ? hi : v;
-}

package/src/app/components/inspector/inspect-overlay.tsx

@@ -1,6 +1,7 @@
 import { Crop, ImageIcon } from 'lucide-react';
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { findSlideSource } from '@/lib/inspector/fiber';
+import { useFreezeSlideMotion } from '@/lib/inspector/freeze-motion';
 import {
   type Guide,
   type Point,
@@ -98,19 +99,7 @@ export function InspectOverlay() {
   const [scale, setScale] = useState(1);
   const displayed = localTargets ?? selection;
 
-  useEffect(() => {
-    if (!active) return;
-    const root = document.querySelector<HTMLElement>('[data-inspector-root]');
-    if (!root) return;
-    const style = document.createElement('style');
-    style.textContent = EDITING_FREEZE_CSS;
-    document.head.appendChild(style);
-    root.dataset.inspectorEditing = 'true';
-    return () => {
-      style.remove();
-      delete root.dataset.inspectorEditing;
-    };
-  }, [active]);
+  useFreezeSlideMotion(active ? 'edit' : null);
 
   useLayoutEffect(() => {
     if (!active) return;
@@ -656,29 +645,3 @@ export function InspectOverlay() {
     </div>
   );
 }
-
-const EDITING_FREEZE_CSS = `
-[data-inspector-editing] { touch-action: none; }
-[data-inspector-editing] *:not([data-inspector-ui], [data-inspector-ui] *),
-[data-inspector-editing] *:not([data-inspector-ui], [data-inspector-ui] *)::before,
-[data-inspector-editing] *:not([data-inspector-ui], [data-inspector-ui] *)::after {
-  animation-duration: 1ms !important;
-  animation-delay: 0s !important;
-  animation-iteration-count: 1 !important;
-  animation-fill-mode: forwards !important;
-  transition: none !important;
-  view-transition-name: none !important;
-  user-select: none;
-}
-[data-inspector-editing] *:not([data-inspector-ui], [data-inspector-ui] *, [data-visual-gesture], [data-visual-gesture] *),
-[data-inspector-editing] *:not([data-inspector-ui], [data-inspector-ui] *, [data-visual-gesture], [data-visual-gesture] *)::before,
-[data-inspector-editing] *:not([data-inspector-ui], [data-inspector-ui] *, [data-visual-gesture], [data-visual-gesture] *)::after {
-  cursor: default !important;
-}
-[data-inspector-editing] [data-visual-gesture],
-[data-inspector-editing] [data-visual-gesture] *,
-[data-inspector-editing] [data-visual-gesture] *::before,
-[data-inspector-editing] [data-visual-gesture] *::after {
-  cursor: var(--osd-gesture-cursor, default) !important;
-}
-`;

package/src/app/components/inspector/inspector-panel.tsx

@@ -46,7 +46,7 @@ import { styleContext } from '@/lib/inspector/text-selection';
 import type { EditOp } from '@/lib/inspector/use-editor';
 import { useAgentSocketConnected } from '@/lib/use-agent-socket';
 import { format, useLocale } from '@/lib/use-locale';
-import { cn, round2 } from '@/lib/utils';
+import { round2 } from '@/lib/utils';
 import type { Locale } from '../../../locale/types';
 import { ArrangePanel } from './arrange-panel';
 import { AssetPickerDialog } from './asset-picker-dialog';
@@ -107,7 +107,6 @@ export function InspectorPanel({
     bufferOps,
     pendingCount,
     opsVersion,
-    add,
     applyEdit,
   } = useInspector();
   const [snapshot, setSnapshot] = useState<ElementSnapshot | null>(null);
@@ -256,19 +255,14 @@ export function InspectorPanel({
   );
   const footer =
     selected && snapshot && !multiple ? (
-      <>
-        <CollapsibleSection title={t.inspector.leaveComment}>
-          <CommentsSection selected={selected} onAdd={add} />
-        </CollapsibleSection>
-        <CollapsibleSection title={t.inspector.sourceSection}>
-          <div className="flex items-center justify-between gap-2">
-            <span className="font-mono text-[10.5px] text-muted-foreground">
-              &lt;{selected.anchor.tagName.toLowerCase()}&gt; · {selected.line}:{selected.column}
-            </span>
-            <AgentWatchingBadge />
-          </div>
-        </CollapsibleSection>
-      </>
+      <CollapsibleSection title={t.inspector.sourceSection}>
+        <div className="flex items-center justify-between gap-2">
+          <span className="font-mono text-[10.5px] text-muted-foreground">
+            &lt;{selected.anchor.tagName.toLowerCase()}&gt; · {selected.line}:{selected.column}
+          </span>
+          <AgentWatchingBadge />
+        </div>
+      </CollapsibleSection>
     ) : undefined;
 
   return (
@@ -278,7 +272,7 @@ export function InspectorPanel({
         if (value === 'arrange') stopInlineEdit();
         if (value === 'format' || value === 'arrange') onTabChange(value);
       }}
-      className="h-full shrink-0 gap-0"
+      className="h-full w-full min-w-0 shrink-0 gap-0"
       onPointerDownCapture={(event) => {
         if (!inlineEdit || !(event.target instanceof Element)) return;
         const button = event.target.closest('button');
@@ -894,83 +888,6 @@ function AgentWatchingBadge() {
   );
 }
 
-// The cue animation re-mounts with every element selection; without this
-// guard it replays each time instead of once per inspector session.
-let commentCuePlayed = false;
-
-function CommentsSection({
-  selected,
-  onAdd,
-}: {
-  selected: { line: number; column: number };
-  onAdd: (line: number, column: number, text: string) => Promise<void>;
-}) {
-  const [draft, setDraft] = useState('');
-  const [submitting, setSubmitting] = useState(false);
-  const [showCue] = useState(() => !commentCuePlayed);
-  const wrapRef = useRef<HTMLDivElement>(null);
-  const t = useLocale();
-
-  useEffect(() => {
-    commentCuePlayed = true;
-  }, []);
-
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key !== '/') return;
-      if (!(e.metaKey || e.ctrlKey)) return;
-      if (e.altKey || e.shiftKey) return;
-      const ta = wrapRef.current?.querySelector('textarea');
-      if (!ta) return;
-      e.preventDefault();
-      const details = ta.closest('details');
-      if (details) details.open = true;
-      ta.focus({ preventScroll: true });
-    };
-    window.addEventListener('keydown', onKey);
-    return () => window.removeEventListener('keydown', onKey);
-  }, []);
-
-  const submit = async () => {
-    const trimmed = draft.trim();
-    if (!trimmed) return;
-    setSubmitting(true);
-    try {
-      await onAdd(selected.line, selected.column, trimmed);
-      setDraft('');
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  return (
-    <>
-      <div ref={wrapRef} className={cn('rounded-[6px]', showCue && 'comment-cue')}>
-        <Textarea
-          value={draft}
-          onChange={(e) => setDraft(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-              e.preventDefault();
-              submit();
-            }
-          }}
-          placeholder={t.inspector.commentPlaceholder}
-          className="min-h-16 resize-none text-[12px]"
-        />
-      </div>
-      <div className="flex items-center justify-between gap-2">
-        <span className="font-mono text-[10.5px] text-muted-foreground/70">
-          {t.inspector.commentShortcutHint}
-        </span>
-        <Button size="sm" variant="brand" disabled={submitting || !draft.trim()} onClick={submit}>
-          {t.inspector.addComment}
-        </Button>
-      </div>
-    </>
-  );
-}
-
 function readSnapshot(el: HTMLElement): ElementSnapshot {
   const cs = getComputedStyle(el);
   const text =

package/src/app/components/inspector/inspector-provider.tsx

@@ -1,4 +1,4 @@
-import { Eye, PanelRight, Pencil } from 'lucide-react';
+import { Eye, MessageSquare, PanelRight, Pencil } from 'lucide-react';
 import {
   createContext,
   type ReactNode,
@@ -12,20 +12,22 @@ import {
 import { toast } from 'sonner';
 import { useHistory } from '@/components/history-provider';
 import { IconSwitcherIndicator } from '@/components/icon-switcher-indicator';
+import { IconTooltip } from '@/components/icon-tooltip';
 import { Button } from '@/components/ui/button';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { TooltipTrigger } from '@/components/ui/tooltip';
 import { findSlideSource } from '@/lib/inspector/fiber';
 import {
   appendTextEdit,
   type TextEditOp,
   type TextEditStep,
 } from '@/lib/inspector/text-edit-timeline';
-import { type SlideComment, useComments } from '@/lib/inspector/use-comments';
+import { type AddCommentInput, type SlideComment, useComments } from '@/lib/inspector/use-comments';
 import { type Edit, type EditOp, useEditor } from '@/lib/inspector/use-editor';
 import { useVisualEditor, type VisualEdit } from '@/lib/inspector/use-visual-editor';
 import { isShortcutControlTarget, isTypingTarget } from '@/lib/keys';
 import { textDiff } from '@/lib/text-diff';
-import { useLocale } from '@/lib/use-locale';
+import { format, plural, useLocale } from '@/lib/use-locale';
 import { round2 } from '@/lib/utils';
 import { AssetPickerDialog } from './asset-picker-dialog';
 import { ImageCropDialog, type ImageCropRect } from './image-crop-dialog';
@@ -367,9 +369,17 @@ function replayDomTextEdits(el: HTMLElement, snapshot: TextDomSnapshot, steps: T
   if (el.innerHTML !== next) el.innerHTML = next;
 }
 
+export type InspectorMode = 'preview' | 'edit' | 'comment';
+
 type InspectorCtx = {
   slideId: string;
+  pageIndex: number;
+  mode: InspectorMode;
+  setMode: (mode: InspectorMode) => void;
+  // True while the visual editor owns the canvas (`mode === 'edit'`).
   active: boolean;
+  commentMode: boolean;
+  exitCommentMode: () => void;
   toggle: () => void;
   panelOpen: boolean;
   panelHidden: boolean;
@@ -377,7 +387,8 @@ type InspectorCtx = {
   cancel: () => void;
   comments: SlideComment[];
   error: string | null;
-  add: (line: number, column: number, text: string) => Promise<void>;
+  add: (input: AddCommentInput) => Promise<void>;
+  update: (id: string, text: string) => Promise<void>;
   remove: (id: string) => Promise<void>;
   selection: SelectedTarget[];
   setSelection: (targets: SelectedTarget[]) => void;
@@ -416,6 +427,10 @@ export function useInspector(): InspectorCtx {
   return v;
 }
 
+export function useOptionalInspector(): InspectorCtx | null {
+  return useContext(Ctx);
+}
+
 export function InspectorProvider({
   slideId,
   pageIndex,
@@ -429,7 +444,11 @@ export function InspectorProvider({
   onPanelOpen?: () => void;
   children: ReactNode;
 }) {
-  const [active, setActive] = useState(import.meta.env.DEV);
+  const [mode, setModeState] = useState<InspectorMode>(import.meta.env.DEV ? 'edit' : 'preview');
+  const active = mode === 'edit';
+  const commentMode = mode === 'comment';
+  // Where Esc / toggling the comment tool off returns the user to.
+  const modeBeforeCommentRef = useRef<Exclude<InspectorMode, 'comment'>>('preview');
   const [panelOpen, setPanelOpen] = useState(
     () => typeof window !== 'undefined' && window.innerWidth >= 1024,
   );
@@ -475,7 +494,7 @@ export function InspectorProvider({
     [],
   );
   const [opsVersion, setOpsVersion] = useState(0);
-  const { comments, error, add, remove } = useComments(slideId);
+  const { comments, error, add, update, remove } = useComments(slideId);
   const { applyEdit, applyEdits } = useEditor(slideId);
   const history = useHistory();
 
@@ -1252,19 +1271,32 @@ export function InspectorProvider({
     return () => observer.disconnect();
   }, [selection, setSelection, slideId]);
 
+  const setMode = useCallback(
+    (next: InspectorMode) => {
+      if (next === mode) return;
+      if (next === 'comment' && mode !== 'comment') modeBeforeCommentRef.current = mode;
+      if (mode === 'edit') {
+        setSelected(null);
+        setInlineEdit(null);
+      }
+      setModeState(next);
+    },
+    [mode, setSelected],
+  );
+
   const toggle = useCallback(() => {
-    if (active) {
-      setSelected(null);
-      setInlineEdit(null);
-    }
-    setActive(!active);
-  }, [active, setSelected]);
+    setMode(active ? 'preview' : 'edit');
+  }, [active, setMode]);
+
+  const exitCommentMode = useCallback(() => {
+    if (commentMode) setMode(modeBeforeCommentRef.current);
+  }, [commentMode, setMode]);
 
   const togglePanel = useCallback(() => {
     setPanelOpen(!active || panelHidden || !panelOpen);
-    setActive(true);
+    setMode('edit');
     onPanelOpen?.();
-  }, [active, panelHidden, panelOpen, onPanelOpen]);
+  }, [active, panelHidden, panelOpen, onPanelOpen, setMode]);
 
   const cancel = useCallback(() => {
     setSelected(null);
@@ -1320,13 +1352,24 @@ export function InspectorProvider({
         e.altKey
       )
         return;
-      if (e.key !== 'i' && e.key !== 'I') return;
-      e.preventDefault();
-      togglePanel();
+      if (e.key === 'i' || e.key === 'I') {
+        e.preventDefault();
+        togglePanel();
+      } else if (e.key === 'c' || e.key === 'C') {
+        e.preventDefault();
+        if (commentMode) exitCommentMode();
+        else setMode('comment');
+      } else if (e.key === 'v' || e.key === 'V') {
+        e.preventDefault();
+        setMode('preview');
+      } else if (e.key === 'e' || e.key === 'E') {
+        e.preventDefault();
+        setMode('edit');
+      }
     };
     window.addEventListener('keydown', onKey);
     return () => window.removeEventListener('keydown', onKey);
-  }, [togglePanel]);
+  }, [togglePanel, commentMode, exitCommentMode, setMode]);
 
   const openCrop = useCallback((anchor: HTMLImageElement) => {
     const loc = anchor.dataset.slideLoc;
@@ -1352,7 +1395,12 @@ export function InspectorProvider({
   const value = useMemo<InspectorCtx>(
     () => ({
       slideId,
+      pageIndex,
+      mode,
+      setMode,
       active,
+      commentMode,
+      exitCommentMode,
       toggle,
       panelOpen,
       panelHidden,
@@ -1361,6 +1409,7 @@ export function InspectorProvider({
       comments,
       error,
       add,
+      update,
       remove,
       selection,
       setSelection,
@@ -1387,7 +1436,12 @@ export function InspectorProvider({
     }),
     [
       slideId,
+      pageIndex,
+      mode,
+      setMode,
       active,
+      commentMode,
+      exitCommentMode,
       toggle,
       panelOpen,
       panelHidden,
@@ -1396,6 +1450,7 @@ export function InspectorProvider({
       comments,
       error,
       add,
+      update,
       remove,
       selection,
       setSelection,
@@ -1552,44 +1607,63 @@ function parsePercent(s: string, fallback: number): number {
 
 export function InspectModeSwitcher() {
   const t = useLocale();
-  const { active, toggle } = useInspector();
+  const { mode, setMode, comments } = useInspector();
   if (import.meta.env.PROD) return null;
+  const items: { value: InspectorMode; label: string; shortcut: string; icon: ReactNode }[] = [
+    { value: 'preview', label: t.inspector.previewMode, shortcut: 'V', icon: <Eye /> },
+    { value: 'edit', label: t.inspector.editMode, shortcut: 'E', icon: <Pencil /> },
+    { value: 'comment', label: t.inspector.commentMode, shortcut: 'C', icon: <MessageSquare /> },
+  ];
+  const index = Math.max(
+    0,
+    items.findIndex((item) => item.value === mode),
+  );
+  const pending = comments.length;
+  const accessibleName = (item: (typeof items)[number]) =>
+    item.value === 'comment' && pending > 0
+      ? `${item.label} · ${format(plural(pending, t.inspector.commentsCount), { count: pending })}`
+      : item.label;
   return (
     <ToggleGroup
       size="sm"
       spacing={1}
-      value={[active ? 'edit' : 'preview']}
+      value={[mode]}
       onValueChange={(value) => {
-        const next = value[0];
-        if (next && (next === 'edit') !== active) toggle();
+        const next = value[0] as InspectorMode | undefined;
+        if (next && next !== mode) setMode(next);
       }}
-      aria-label={`${t.inspector.previewMode} / ${t.inspector.editMode}`}
+      aria-label={`${t.inspector.previewMode} / ${t.inspector.editMode} / ${t.inspector.commentMode}`}
       data-inspector-ui
       className="relative isolate h-8 gap-0 rounded-lg border border-border/70 bg-muted/70 p-0.5"
     >
-      <IconSwitcherIndicator index={active ? 1 : 0} />
-      <ToggleGroupItem
-        value="preview"
-        title={t.inspector.previewMode}
-        aria-label={t.inspector.previewMode}
-        onClick={(event) => {
-          if (event.detail > 0) event.currentTarget.blur();
-        }}
-        className="relative z-10 h-full w-8 rounded-md px-0 text-muted-foreground hover:bg-transparent data-pressed:bg-transparent data-pressed:text-foreground data-pressed:shadow-none"
-      >
-        <Eye />
-      </ToggleGroupItem>
-      <ToggleGroupItem
-        value="edit"
-        title={t.inspector.editMode}
-        aria-label={t.inspector.editMode}
-        onClick={(event) => {
-          if (event.detail > 0) event.currentTarget.blur();
-        }}
-        className="relative z-10 h-full w-8 rounded-md px-0 text-muted-foreground hover:bg-transparent data-pressed:bg-transparent data-pressed:text-foreground data-pressed:shadow-none"
-      >
-        <Pencil />
-      </ToggleGroupItem>
+      <IconSwitcherIndicator index={index} />
+      {items.map((item) => (
+        <IconTooltip key={item.value} label={item.label} shortcut={item.shortcut}>
+          <TooltipTrigger
+            render={
+              <ToggleGroupItem
+                value={item.value}
+                aria-label={accessibleName(item)}
+                data-inspector-mode={item.value}
+                onClick={(event) => {
+                  if (event.detail > 0) event.currentTarget.blur();
+                }}
+                className="relative z-10 h-full w-8 rounded-md px-0 text-muted-foreground hover:bg-transparent data-pressed:bg-transparent data-pressed:text-foreground data-pressed:shadow-none"
+              />
+            }
+          >
+            {item.icon}
+            {item.value === 'comment' && pending > 0 && (
+              <span
+                aria-hidden
+                className="pointer-events-none absolute -top-1.5 -right-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-brand px-1 font-mono text-[9px] font-semibold leading-none text-brand-foreground nums"
+              >
+                {pending > 99 ? '99+' : pending}
+              </span>
+            )}
+          </TooltipTrigger>
+        </IconTooltip>
+      ))}
     </ToggleGroup>
   );
 }
@@ -1610,7 +1684,7 @@ export function InspectPanelButton() {
       data-inspector-ui
     >
       <PanelRight className="size-3.5" />
-      <span className="hidden md:inline">{t.inspector.format}</span>
+      <span className="hidden lg:inline">{t.inspector.format}</span>
     </Button>
   );
 }

package/src/app/components/panel/editor-sidebar.tsx

@@ -1,49 +1,118 @@
-import { useState } from 'react';
+import { type ReactNode, useState } from 'react';
+import { AGENT_DOCK_W } from '@/components/agent/agent-dock';
 import { InspectorPanel } from '@/components/inspector/inspector-panel';
 import { useInspector } from '@/components/inspector/inspector-provider';
 import { useDesignPanelState } from '@/components/style-panel/design-provider';
 import { DesignPanel } from '@/components/style-panel/style-panel';
+import { useLocale } from '@/lib/use-locale';
 import { PANEL_TRANSITION_MS, PANEL_W, usePanelMount } from './panel-shell';
+import { ResizeHandle, useStoredWidth } from './resize-handle';
 
+type Mode = 'format' | 'design' | 'agent';
+
+const AGENT_MIN_W = 300;
+const EDITOR_MAX_W = 480;
+const AGENT_MAX_W = 720;
+
+// The agent shares this container with Format and Design so switching between
+// them only retargets one width transition instead of collapsing one column
+// while another grows.
 export function EditorSidebar({
   designOpen,
   onCloseDesign,
+  agentOpen = false,
+  agent,
 }: {
   designOpen: boolean;
   onCloseDesign: () => void;
+  agentOpen?: boolean;
+  agent?: ReactNode;
 }) {
+  const t = useLocale();
   const { active, panelOpen } = useInspector();
+  const [editorWidth, setEditorWidth] = useStoredWidth(
+    'open-slide:editor-panel-width',
+    PANEL_W,
+    PANEL_W,
+    EDITOR_MAX_W,
+  );
+  const [agentWidth, setAgentWidth] = useStoredWidth(
+    'open-slide:agent-panel-width',
+    AGENT_DOCK_W,
+    AGENT_MIN_W,
+    AGENT_MAX_W,
+  );
+  const [resizing, setResizing] = useState(false);
   const { loaded, draft } = useDesignPanelState();
   const [preferredTab, setPreferredTab] = useState<'format' | 'arrange'>('format');
-  const mode = designOpen
-    ? loaded && draft
-      ? 'design'
-      : null
-    : active && panelOpen
-      ? 'format'
-      : null;
-  const [lastMode, setLastMode] = useState<'format' | 'design'>('format');
+  const mode: Mode | null =
+    agentOpen && agent
+      ? 'agent'
+      : designOpen
+        ? loaded && draft
+          ? 'design'
+          : null
+        : active && panelOpen
+          ? 'format'
+          : null;
+  const [lastMode, setLastMode] = useState<Mode>('format');
   if (mode && mode !== lastMode) setLastMode(mode);
+  const shown = mode ?? lastMode;
+  const isAgent = shown === 'agent';
+  const [lastEditor, setLastEditor] = useState<'format' | 'design'>('format');
+  if (!isAgent && shown !== lastEditor) setLastEditor(shown);
+  const [agentMounted, setAgentMounted] = useState(false);
+  if (isAgent && !agentMounted) setAgentMounted(true);
   const open = mode !== null;
   const { mounted, animVisible } = usePanelMount(open);
 
   if (!mounted) return null;
 
+  const width = isAgent ? agentWidth : editorWidth;
+
   return (
     <div
       data-editor-sidebar
+      data-agent-dock={isAgent ? '' : undefined}
       inert={!open}
       aria-hidden={!open}
-      className="flex h-full shrink-0 justify-end overflow-hidden bg-sidebar transition-[width] ease-swift motion-reduce:transition-none"
+      className="relative flex h-full max-h-1/2 shrink-0 justify-end overflow-hidden bg-sidebar transition-[width] ease-swift motion-reduce:transition-none md:max-h-none"
       style={{
-        width: animVisible ? PANEL_W : 0,
-        transitionDuration: `${PANEL_TRANSITION_MS}ms`,
+        width: animVisible ? width : 0,
+        transitionDuration: resizing ? '0ms' : `${PANEL_TRANSITION_MS}ms`,
       }}
     >
-      {(mode ?? lastMode) === 'design' ? (
-        <DesignPanel onClose={onCloseDesign} />
-      ) : (
-        <InspectorPanel preferredTab={preferredTab} onTabChange={setPreferredTab} />
+      {open && (
+        <ResizeHandle
+          key={isAgent ? 'agent' : 'editor'}
+          width={width}
+          min={isAgent ? AGENT_MIN_W : PANEL_W}
+          max={isAgent ? AGENT_MAX_W : EDITOR_MAX_W}
+          defaultWidth={isAgent ? AGENT_DOCK_W : PANEL_W}
+          edge="left"
+          label={t.slide.resizeSidePanel}
+          onResize={isAgent ? setAgentWidth : setEditorWidth}
+          onResizingChange={setResizing}
+          className="left-0 hidden md:block"
+        />
+      )}
+      {agentMounted && (
+        <div
+          className="sidebar-swap h-full shrink-0"
+          style={{ width: agentWidth }}
+          hidden={!isAgent}
+        >
+          {agent}
+        </div>
+      )}
+      {!isAgent && (
+        <div className="sidebar-swap flex h-full shrink-0" style={{ width: editorWidth }}>
+          {lastEditor === 'design' ? (
+            <DesignPanel onClose={onCloseDesign} />
+          ) : (
+            <InspectorPanel preferredTab={preferredTab} onTabChange={setPreferredTab} />
+          )}
+        </div>
       )}
     </div>
   );

package/src/app/components/panel/panel-shell.tsx

@@ -45,8 +45,8 @@ type PanelShellProps = {
 export function PanelShell({ uiAttr, header, banner, footer, children }: PanelShellProps) {
   const dataAttrs = uiAttr === 'inspector' ? { 'data-inspector-ui': '' } : { 'data-design-ui': '' };
   return (
-    <aside {...dataAttrs} className="flex h-full shrink-0 bg-sidebar" style={{ width: PANEL_W }}>
-      <div style={{ width: PANEL_W }} className="flex h-full shrink-0 flex-col">
+    <aside {...dataAttrs} className="flex h-full w-full min-w-0 bg-sidebar">
+      <div className="flex h-full w-full min-w-0 flex-col">
         <header className="flex h-9 shrink-0 items-center justify-between gap-2 border-b border-hairline px-3">
           {header}
         </header>