@kywk/open-slide-core 2.3.0 → 2.3.2

package/src/app/routes/slide.tsx

@@ -14,6 +14,7 @@ import {
   MoreHorizontal,
   Play,
   Presentation,
+  Sparkles,
   Terminal,
 } from 'lucide-react';
 import {
@@ -21,12 +22,16 @@ 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 { CommentLayer } from '@/components/inspector/comment-layer';
@@ -40,6 +45,7 @@ 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';
@@ -57,6 +63,7 @@ import {
 } 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,
@@ -74,6 +81,7 @@ 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';
@@ -132,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);
@@ -195,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;
@@ -351,11 +376,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]);
+  }, [index, goTo, playMode, slideId, overviewOpen, toggleAgent]);
 
   if (error) {
     return (
@@ -619,8 +646,11 @@ 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">
@@ -739,6 +769,12 @@ export function Slide() {
                       />
                     )}
                     <DropdownMenuGroup>
+                      {narrowToolbar && import.meta.env.DEV && (
+                        <DropdownMenuItem onClick={toggleAgent}>
+                          <Sparkles />
+                          {t.agent.openTitle}
+                        </DropdownMenuItem>
+                      )}
                       <DropdownMenuItem onClick={() => setCommandOpen(true)}>
                         <Terminal />
                         {t.commandMenu.trigger}
@@ -753,6 +789,7 @@ export function Slide() {
                   </DropdownMenuContent>
                 </DropdownMenu>
               )}
+              {import.meta.env.DEV && view === 'slides' && !narrowToolbar && <AgentToggleButton />}
               {view === 'slides' && !narrowToolbar && (
                 <DesignToggleButton active={designOpen} onToggle={() => setDesignOpen((v) => !v)} />
               )}
@@ -834,6 +871,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
@@ -856,6 +894,7 @@ export function Slide() {
                     <InlineEditLayer />
                     <SaveBar />
                     {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. */}
@@ -875,6 +914,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 && (
@@ -916,6 +966,7 @@ export function Slide() {
                 onCopyLink: copyLink,
                 onOverview: () => setOverviewOpen(true),
                 onToggleDesignPanel: () => setDesignOpen((v) => !v),
+                onToggleAgentPanel: toggleAgent,
                 onExportHtml: exportHtml,
                 onExportPdf: exportPdf,
                 onExportPptx: exportPptx,
@@ -935,14 +986,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'];
@@ -954,103 +997,26 @@ function ResizableRail(props: {
   onOverview?: () => 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>
   );
 }
@@ -1096,6 +1062,39 @@ function EditorMenuItems({
   );
 }
 
+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();

package/src/app/styles.css

@@ -383,3 +383,173 @@
     background-clip: content-box;
   }
 }
+
+/* Agent presence: ring, write sweep and shimmer shown while an agent edits a deck. */
+@property --agent-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 0deg;
+}
+
+[data-agent-provider] {
+  --agent-a: oklch(0.68 0.14 42);
+  --agent-b: oklch(0.82 0.12 75);
+}
+
+[data-agent-provider="codex"] {
+  --agent-a: oklch(0.64 0.13 170);
+  --agent-b: oklch(0.7 0.14 240);
+}
+
+@keyframes agent-spin {
+  to {
+    --agent-angle: 360deg;
+  }
+}
+
+@keyframes agent-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+.agent-ring {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1.5px;
+  background: conic-gradient(
+    from var(--agent-angle),
+    transparent 0deg,
+    var(--agent-a) 70deg,
+    var(--agent-b) 140deg,
+    transparent 210deg,
+    transparent 360deg
+  );
+  mask:
+    linear-gradient(#000 0 0) content-box exclude,
+    linear-gradient(#000 0 0);
+  animation:
+    agent-spin 3.6s linear infinite,
+    agent-fade-in 400ms var(--ease-swift) both;
+}
+
+.agent-glow {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow:
+    inset 0 0 0 1px color-mix(in oklch, var(--agent-a) 35%, transparent),
+    inset 0 0 48px -12px color-mix(in oklch, var(--agent-a) 45%, transparent);
+  animation: agent-fade-in 400ms var(--ease-swift) both;
+}
+
+@keyframes agent-sweep {
+  from {
+    background-position: 120% 0;
+    opacity: 1;
+  }
+  to {
+    background-position: -20% 0;
+    opacity: 0;
+  }
+}
+
+.agent-sweep {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(
+    105deg,
+    transparent 35%,
+    color-mix(in oklch, var(--agent-b) 22%, transparent) 50%,
+    transparent 65%
+  );
+  background-size: 250% 100%;
+  animation: agent-sweep 900ms var(--ease-swift) both;
+}
+
+@keyframes agent-shimmer {
+  from {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: 0% 0;
+  }
+}
+
+.agent-shimmer {
+  background: linear-gradient(
+    90deg,
+    var(--muted-foreground) 35%,
+    var(--foreground) 50%,
+    var(--muted-foreground) 65%
+  );
+  background-size: 300% 100%;
+  background-clip: text;
+  color: transparent;
+  animation: agent-shimmer 1.8s linear infinite;
+}
+
+@keyframes agent-progress {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(250%);
+  }
+}
+
+.agent-progress {
+  pointer-events: none;
+  position: absolute;
+  inset-inline: 0;
+  top: 0;
+  height: 1.5px;
+  overflow: hidden;
+}
+
+.agent-progress::after {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  width: 40%;
+  background: linear-gradient(90deg, transparent, var(--agent-a), var(--agent-b), transparent);
+  animation: agent-progress 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .agent-ring {
+    animation: agent-fade-in 160ms ease-out both;
+    --agent-angle: 120deg;
+  }
+
+  .agent-sweep {
+    display: none;
+  }
+
+  .agent-shimmer {
+    animation: none;
+    color: var(--foreground);
+    background: none;
+  }
+
+  .agent-progress::after {
+    animation: none;
+    width: 100%;
+    opacity: 0.6;
+  }
+}
+
+.sidebar-swap {
+  animation: agent-fade-in 160ms var(--ease-swift, ease-out);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sidebar-swap {
+    animation: none;
+  }
+}

package/src/editing/placeholder-id.ts

@@ -0,0 +1 @@
+export const UNTITLED_SLIDE_ID_RE = /^untitled(-\d+)?$/;

package/src/locale/en.ts

@@ -96,6 +96,7 @@ export const en: Locale = {
   },
 
   slide: {
+    resizeSidePanel: 'Resize side panel',
     home: 'Home',
     backToHome: 'Back to home',
     agentConnected: 'Agent connected',
@@ -540,4 +541,109 @@ export const en: Locale = {
     expandPromptAria: 'Expand prompt',
     collapsePromptAria: 'Collapse prompt',
   },
+
+  agent: {
+    title: 'Agent',
+    beta: 'Beta',
+    betaTitle: 'Early preview',
+    betaHint: 'Replies, edits and tool calls can occasionally fail or do something unexpected.',
+    open: 'Agent',
+    openTitle: 'Open the agent panel',
+    close: 'Close agent panel',
+    newSession: 'New chat',
+    sessions: 'History',
+    noSessions: 'No conversations yet.',
+    deleteSession: 'Delete conversation',
+    historyThisDeck: 'This deck',
+    historyOtherDecks: 'Other decks',
+    historyEmptyHint: 'Chats you start in this panel show up here.',
+    sessionRunning: 'Working',
+    composerPlaceholder: 'Ask {provider} to create or edit slides…',
+    send: 'Send',
+    stop: 'Stop',
+    working: 'Working',
+    contextPage: 'Page {n}',
+    contextSelection: 'Selection',
+    pendingComments: { one: '{count} comment', other: '{count} comments' },
+    applyComments: 'Apply comments',
+    applyCommentsWith: 'Apply with {provider}',
+    createDeck: 'New deck',
+    createDeckWith: 'Create a deck with {provider}',
+    quickCreate: 'Draft a new deck',
+    quickCreateHint: 'Opens a blank deck; describe it and the agent drafts it page by page.',
+    quickApply: 'Apply pending comments',
+    quickApplyHint: 'Resolves every @slide-comment marker in this slide.',
+    quickTheme: 'Create a theme',
+    quickThemeHint: 'Extracts or designs a reusable theme under themes/.',
+    quickEdit: 'Edit this page',
+    quickEditHint: 'Describe a change to the page you are viewing.',
+    emptyTitle: 'What should we build?',
+    emptyHint: 'Describe a deck, or pick a starting point.',
+    questionSubmit: 'Continue',
+    questionOther: 'Other',
+    questionOtherPlaceholder: 'Type your own answer',
+    questionCancelled: 'Dismissed',
+    permissionTitle: 'Needs approval',
+    allow: 'Allow',
+    deny: 'Deny',
+    allowed: 'Allowed',
+    denied: 'Denied',
+    autoApprove: 'Auto-approve',
+    autoApproveHint: 'Run commands without asking. Edits inside the workspace are always allowed.',
+    resultDone: 'Done',
+    resultStopped: 'Stopped',
+    resultSeconds: '{seconds}s',
+    errorEyebrow: 'Error',
+    statusLoading: 'Checking agents',
+    disabled: 'The agent panel is disabled in open-slide.config.ts.',
+    connectTitle: 'Connect an agent',
+    connectDescription:
+      'Drive your coding agent from here instead of a terminal. Agents installed on this machine connect automatically and reuse their sign-in.',
+    connect: 'Connect',
+    connecting: 'Connecting',
+    connected: 'Connected',
+    connectInstallHint: 'Adds {pkg} to this workspace with {pm}.',
+    cliFound: 'CLI found · v{version}',
+    cliFoundNoVersion: 'CLI found',
+    cliMissing: 'CLI not found on PATH',
+    cliHint: 'Install the {name} CLI and sign in once; the panel reuses its login.',
+    needCliTitle: 'Install Claude Code or Codex first',
+    needCliDescription:
+      'The panel drives the coding agent CLI on this machine, and none was found on your PATH. Install one, sign in once in a terminal, then check again.',
+    checkAgain: 'Check again',
+    retry: 'Retry',
+    toastConnected: '{name} connected',
+    toastConnectFailed: 'Could not install {pkg}',
+    manageConnections: 'Manage agents',
+    backToChat: 'Back',
+    toastSendFailed: 'Could not send message',
+    newDeckTitle: "What's this deck about?",
+    newDeckHint:
+      'Describe the topic, audience and tone. {provider} drafts it page by page while you watch.',
+    newDeckPlaceholder: 'A 10-minute talk on…',
+    toastCreateDeckFailed: 'Could not create a deck',
+    steps: { one: '{count} step', other: '{count} steps' },
+    questionSkip: 'Skip',
+    copyMessage: 'Copy',
+    copied: 'Copied',
+    editMessage: 'Edit',
+    cancelEdit: 'Cancel',
+    sendEdit: 'Send',
+    editHint:
+      'Sending replaces the conversation after this message. Edits already made to files stay.',
+    modelDefault: 'Default',
+    reasoning: 'Reasoning',
+    effortAuto: 'Auto',
+    efforts: {
+      minimal: 'Minimal',
+      low: 'Low',
+      medium: 'Medium',
+      high: 'High',
+      xhigh: 'Extra high',
+      max: 'Max',
+    },
+    presenceEditing: '{provider} is editing',
+    presenceThinking: 'Thinking',
+    presenceWaiting: 'Waiting for you',
+  },
 };