@open-slide/core 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-slide/core",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Runtime and CLI for open-slide — write slides in slides/, we handle the rest.",
   "type": "module",
   "exports": {
@@ -42,11 +42,19 @@
     "vite"
   ],
   "license": "MIT",
+  "author": {
+    "name": "1weiho",
+    "url": "https://github.com/1weiho"
+  },
+  "homepage": "https://open-slide.dev",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/1weiho/open-slide.git",
     "directory": "packages/core"
   },
+  "bugs": {
+    "url": "https://github.com/1weiho/open-slide/issues"
+  },
   "publishConfig": {
     "access": "public"
   },

package/skills/create-slide/SKILL.md

@@ -13,7 +13,7 @@ You only write files under `slides/<id>/`. Never modify `package.json`, `open-sl
 
 List files under `themes/`. If any theme markdown files exist (anything other than `README.md`), call `AskUserQuestion` with each theme id as an option plus a final **"no theme — design from scratch"** option.
 
-- If the user picks a theme: read `themes/<id>.md` end-to-end. The theme's palette, typography, layout, and Title/Footer components are now authoritative — copy them directly into the slide. In Step 2, skip the **aesthetic direction** question (the theme already commits to one direction); you still need the topic itself, so confirm it before moving on. Page count, text density, and motion are independent of theme — ask those normally.
+- If the user picks a theme: read `themes/<id>.md` end-to-end. The theme's palette, typography, layout, and Title/Footer components are now authoritative — copy them directly into the slide. **Also set `theme: '<theme-id>'` on the `meta` export in `index.tsx`** (e.g. `export const meta: SlideMeta = { title: '…', theme: '<theme-id>' };`) so the slide back-links to the theme (chip on the slide card + listing on `/themes/<id>`). In Step 2, skip the **aesthetic direction** question (the theme already commits to one direction); you still need the topic itself, so confirm it before moving on. Page count, text density, and motion are independent of theme — ask those normally.
 - If the user picks "no theme", or `themes/` is empty (or contains only `README.md`): proceed to Step 2 unchanged.
 
 If you skip the aesthetic question because a theme was picked, restate the theme name in Step 2 so the user can correct course before you start writing.

package/skills/create-theme/SKILL.md

@@ -1,15 +1,20 @@
 ---
 name: create-theme
-description: Use this skill when the user wants to create, draft, author, or extract a slide theme in this open-slide repo. Triggers on phrases like "create a theme", "make a theme called X", "extract a theme from <slide>", "build a theme from these images". Produces a single markdown file under `themes/<id>.md` describing palette, typography, layout, fixed Title/Footer components, and motion philosophy. Do NOT use for editing slides themselves — only for authoring `themes/<id>.md`.
+description: Use this skill when the user wants to create, draft, author, or extract a slide theme in this open-slide repo. Triggers on phrases like "create a theme", "make a theme called X", "extract a theme from <slide>", "build a theme from these images". Produces two paired files under `themes/`: `<id>.md` (palette, typography, layout, fixed Title/Footer components, motion) and `<id>.demo.tsx` (a runnable demo slide that the dev-UI Themes panel previews). Do NOT use for editing real slides — only for authoring the theme bundle.
 ---
 
 # Create a slide theme
 
-This skill produces one markdown file under `themes/<id>.md` that describes a reusable visual identity for slides — palette, typography, layout, fixed Title/Footer/Eyebrow components, motion. Themes are agent-facing documentation, not executable runtime: a slide author reads the theme markdown and applies it when writing `slides/<id>/index.tsx`.
+This skill produces a **theme bundle** under `themes/`: two paired files that together describe a reusable visual identity.
 
-A theme is **distinct from a slide's `design` const**. The theme markdown is authoring-time aesthetic direction (read by `create-slide`, copied into slide source). A per-slide `const design: DesignSystem = { … }` (declared at the top of `slides/<id>/index.tsx`) is the runtime tokens object the user can tweak from the Design panel in the dev UI. Both can coexist: the markdown theme commits the *direction*, the per-slide `design` const makes the slide *tweakable*. This skill only writes the markdown.
+1. `themes/<id>.md` — agent-facing documentation: palette, typography, layout, fixed Title/Footer/Eyebrow components, motion. This is what `create-slide` reads when an author picks the theme.
+2. `themes/<id>.demo.tsx` — a runnable mini-slide (a normal slide module: `export default Page[]`) that demonstrates the theme on 2–3 pages. The dev UI's **Themes panel** loads this file and renders it as the theme's live preview.
 
-You only write a single file under `themes/`. Never modify slides or other configuration. The canvas / type-scale defaults that themes can override live in the **`slide-authoring`** skill — read it before writing the theme so your overrides are stated explicitly.
+Both files share the same stem so the runtime can pair them automatically.
+
+A theme is **distinct from a slide's `design` const**. The theme markdown is authoring-time aesthetic direction (copied into a real slide's source by `create-slide`). The demo `.tsx` is a self-contained preview, not a real slide — it does not appear in the slides list. A per-slide `const design: DesignSystem = { … }` (declared at the top of `slides/<id>/index.tsx`) is the runtime tokens object the user can tweak from the Design panel. The markdown commits the *direction*; the per-slide `design` const makes the slide *tweakable*; the demo `.tsx` makes the theme *previewable*.
+
+You only write files under `themes/<id>.md` and `themes/<id>.demo.tsx`. Never modify real slides or other configuration. The canvas / type-scale defaults that themes can override live in the **`slide-authoring`** skill — read it before writing the theme so your overrides are stated explicitly.
 
 ## Step 1 — Identify the input source
 
@@ -47,7 +52,6 @@ Produce a file with this exact section order. Section bodies adapt to the theme;
 ---
 name: <Human title, e.g. "Editorial Noir">
 description: <one-line elevator pitch>
-mode: light | dark | system
 ---
 
 # <Theme name>
@@ -163,6 +167,46 @@ const Cover: Page = () => (
 ```
 ````
 
+## Step 4b — Write `themes/<id>.demo.tsx`
+
+The demo is a normal slide module — same shape as `slides/<id>/index.tsx`, just sitting under `themes/` so the runtime knows it's preview-only. The dev-UI Themes panel imports it and renders it inside `SlideCanvas` (1920×1080).
+
+Contract:
+
+- `import type { Page } from '@open-slide/core';`
+- Inline the **same** `Title`, `Footer`, `Eyebrow` components defined in the theme markdown — verbatim, no abstractions, no imports from elsewhere. The demo and the markdown must stay in lockstep so what the user sees in the panel matches what `create-slide` will paste into a real slide.
+- Export 2–3 `Page` components and a default array. Aim for: a Cover (Eyebrow + Title + subtitle), one Content page exercising body type + accent, and a Closer or "End" card. The "Example usage" block at the bottom of the markdown is a good starting point — extend it.
+- If the theme has runtime-tweakable tokens worth surfacing in the Design panel later, also `export const design: DesignSystem = {...}`.
+- No external assets, no `import` from `@/`, no slides-only helpers (e.g. `WindowShell` from a real slide). Demo files must be self-contained.
+
+Skeleton:
+
+```tsx
+import type { Page } from '@open-slide/core';
+
+const Title = ({ children }: { children: React.ReactNode }) => (
+  // …same JSX as in themes/<id>.md
+);
+const Footer = ({ pageNum, total }: { pageNum: number; total: number }) => (
+  // …
+);
+const Eyebrow = ({ children }: { children: React.ReactNode }) => (
+  // …
+);
+
+const Cover: Page = () => (
+  // …
+);
+const Content: Page = () => (
+  // …
+);
+const Closer: Page = () => (
+  // …
+);
+
+export default [Cover, Content, Closer];
+```
+
 ## Step 5 — Self-review
 
 Run this checklist before finishing:
@@ -172,23 +216,27 @@ Run this checklist before finishing:
 - [ ] At least Title and Footer are defined as paste-ready React with concrete inline styles.
 - [ ] Motion section commits to one of static / subtle / rich.
 - [ ] Aesthetic paragraph names a single coherent direction.
-- [ ] File lives at `themes/<id>.md` and only that file was created — no slide changes, no config changes.
-- [ ] Frontmatter `mode` is one of `light`, `dark`, `system`.
+- [ ] Both files written: `themes/<id>.md` and `themes/<id>.demo.tsx`. No slide changes, no config changes.
+- [ ] Demo `.tsx` exports 2–3 pages and inlines the same Title/Footer/Eyebrow components defined in the markdown.
+- [ ] Demo opens cleanly in the **Themes** panel of the dev UI — re-checked by you only by reading the file (do not start a server).
 
 ## Step 6 — Hand off
 
 Tell the user:
 
-- The theme id and file path.
-- That `/create-slide` will list it as a picker option on its next run.
+- The theme id and the two file paths (`themes/<id>.md` + `themes/<id>.demo.tsx`).
+- That the demo will appear in the dev UI's **Themes** panel as a live card and detail view (HMR — no restart needed).
+- That `/create-slide` will list the theme as a picker option on its next run.
 - A one-line summary of the look (palette + aesthetic).
 
-Do not run the dev server. Do not modify slides — even to demonstrate the theme; that is the user's next move.
+Do not run the dev server. Do not modify real slides — even to demonstrate the theme; the demo `.tsx` is the demonstration.
 
 ## Anti-patterns
 
-- ❌ Writing executable code in `themes/<id>.md` outside the labeled component snippets — the file is documentation.
-- ❌ Producing more than one file. One theme = one `themes/<id>.md`.
+- ❌ Writing executable code in `themes/<id>.md` outside the labeled component snippets — the markdown is documentation.
+- ❌ Producing only the markdown without the demo, or only the demo without the markdown. A theme is the **bundle** — both files, every time.
+- ❌ Treating `themes/<id>.demo.tsx` as a real slide. It is preview-only and lives outside the slides list; never put it under `slides/`.
+- ❌ Importing from `@/` or any slide-specific helper inside the demo. The demo is self-contained.
 - ❌ Inventing palette / fonts when the user supplied images or an existing slide. Extract, don't fabricate.
 - ❌ Editing `slides/`, `packages/`, `package.json`, or `open-slide.config.ts`.
 - ❌ Skipping the Fixed components section. Title and Footer are the most common reuse target — they must be paste-ready.

package/skills/slide-authoring/SKILL.md

@@ -38,6 +38,17 @@ export default [Cover, Body] satisfies Page[];
 - `export default` is a **non-empty array of zero-prop React components**, one per page, in order.
 - `meta.title` (optional) shows in the slide header. Default is the folder name.
 - The slide id is the kebab-case folder name. Pick something short and descriptive (`q2-roadmap`, `team-offsite-2026`).
+- `meta.theme` (optional) marks the slide as built from a theme under `themes/`. The id must match a `<id>.md` basename. Surfaces a back-link chip on the slide card and lists the slide on `/themes/<id>`. Omit if the slide isn't derived from a registered theme.
+
+## Editing an existing slide
+
+A finished slide commonly runs 1000–1800 lines. When you only need to touch one page, **don't read the whole file** — locate the page first, then read just that range:
+
+```bash
+grep -n ": Page = " slides/<id>/index.tsx
+```
+
+This lists every `const Foo: Page = …` declaration with its line number. Read the target page with `Read` using `offset` + `limit` (~150 lines is usually enough to capture one page plus its helper components). Read the whole file only when you need cross-page context (palette audit, reordering, design const tweaks).
 
 ## Canvas
 

package/src/app/app.tsx

@@ -3,14 +3,24 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { Toaster } from './components/ui/sonner';
 import { useLocale } from './lib/use-locale';
 import { Home } from './routes/home';
+import { HomeShell } from './routes/home-shell';
 import { Presenter } from './routes/presenter';
 import { Slide } from './routes/slide';
+import { ThemeDetailPage, ThemesGalleryPage } from './routes/themes';
 
 export function App() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={config.build.showSlideBrowser ? <Home /> : <NotFound />} />
+        {config.build.showSlideBrowser ? (
+          <Route element={<HomeShell />}>
+            <Route path="/" element={<Home />} />
+            <Route path="/themes" element={<ThemesGalleryPage />} />
+            <Route path="/themes/:themeId" element={<ThemeDetailPage />} />
+          </Route>
+        ) : (
+          <Route path="/" element={<NotFound />} />
+        )}
         <Route path="/s/:slideId" element={<Slide />} />
         <Route path="/s/:slideId/presenter" element={<Presenter />} />
         <Route path="*" element={<NotFound />} />

package/src/app/components/asset-view.tsx

@@ -33,6 +33,7 @@ import {
 import {
   type AssetEntry,
   fetchSvgAsFile,
+  renamedCopy,
   type SvglItem,
   searchSvgl,
   useAssets,
@@ -315,19 +316,6 @@ function hasFiles(e: React.DragEvent): boolean {
   return false;
 }
 
-function renamedCopy(file: File, taken: Set<string>): File {
-  const dot = file.name.lastIndexOf('.');
-  const stem = dot > 0 ? file.name.slice(0, dot) : file.name;
-  const ext = dot > 0 ? file.name.slice(dot) : '';
-  let i = 1;
-  let next = `${stem}-${i}${ext}`;
-  while (taken.has(next)) {
-    i += 1;
-    next = `${stem}-${i}${ext}`;
-  }
-  return new File([file], next, { type: file.type, lastModified: file.lastModified });
-}
-
 function AssetCard({
   asset,
   onPreview,

package/src/app/components/image-placeholder.tsx

@@ -1,4 +1,7 @@
-import type { CSSProperties, HTMLAttributes } from 'react';
+import { type CSSProperties, type HTMLAttributes, useRef, useState } from 'react';
+import { toast } from 'sonner';
+import { uploadWithAutoRename } from '@/lib/assets';
+import { useLocale } from '@/lib/use-locale';
 
 export type ImagePlaceholderProps = {
   hint: string;
@@ -17,9 +20,56 @@ export function ImagePlaceholder({
   ...rest
 }: ImagePlaceholderProps) {
   const dims = width && height ? `${width} × ${height}` : null;
+  const [dragActive, setDragActive] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const dragDepth = useRef(0);
+  const t = useLocale();
+
+  const dndProps = import.meta.env.DEV
+    ? {
+        onDragEnter: (e: React.DragEvent<HTMLDivElement>) => {
+          if (uploading || !hasImageFile(e)) return;
+          e.preventDefault();
+          dragDepth.current += 1;
+          setDragActive(true);
+        },
+        onDragOver: (e: React.DragEvent<HTMLDivElement>) => {
+          if (uploading || !hasImageFile(e)) return;
+          e.preventDefault();
+          e.dataTransfer.dropEffect = 'copy';
+        },
+        onDragLeave: () => {
+          dragDepth.current = Math.max(0, dragDepth.current - 1);
+          if (dragDepth.current === 0) setDragActive(false);
+        },
+        onDrop: (e: React.DragEvent<HTMLDivElement>) => {
+          if (uploading || !hasImageFile(e)) return;
+          e.preventDefault();
+          dragDepth.current = 0;
+          setDragActive(false);
+          const file = pickImageFile(e.dataTransfer.files);
+          if (!file) return;
+          const root = e.currentTarget;
+          const slideId = root.closest<HTMLElement>('[data-slide-id]')?.dataset.slideId;
+          const loc = root.dataset.slideLoc;
+          if (!slideId || !loc) return;
+          const idx = loc.indexOf(':');
+          if (idx <= 0) return;
+          const line = Number(loc.slice(0, idx));
+          const column = Number(loc.slice(idx + 1));
+          if (!Number.isFinite(line) || !Number.isFinite(column)) return;
+          setUploading(true);
+          handleDrop(slideId, file, line, column)
+            .catch(() => toast.error(t.imagePlaceholder.uploadFailed))
+            .finally(() => setUploading(false));
+        },
+      }
+    : null;
+
   return (
     <div
       {...rest}
+      {...dndProps}
       data-slide-placeholder={hint}
       data-placeholder-w={width}
       data-placeholder-h={height}
@@ -93,10 +143,82 @@ export function ImagePlaceholder({
           </span>
         )}
       </div>
+      {import.meta.env.DEV && (dragActive || uploading) && (
+        <DropOverlay
+          label={uploading ? t.imagePlaceholder.uploading : t.imagePlaceholder.dropOverlay}
+        />
+      )}
+    </div>
+  );
+}
+
+function DropOverlay({ label }: { label: string }) {
+  return (
+    <div
+      aria-hidden
+      style={{
+        position: 'absolute',
+        inset: 0,
+        pointerEvents: 'none',
+        borderRadius: 12,
+        border: '2px dashed oklch(0.62 0.18 250)',
+        background: 'oklch(0.62 0.18 250 / 0.08)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <span
+        style={{
+          fontSize: 12,
+          fontWeight: 600,
+          letterSpacing: '0.02em',
+          color: 'oklch(0.45 0.16 250)',
+          background: 'rgba(255,255,255,0.92)',
+          padding: '6px 10px',
+          borderRadius: 6,
+          boxShadow: '0 1px 2px rgba(0,0,0,0.08)',
+        }}
+      >
+        {label}
+      </span>
     </div>
   );
 }
 
+function hasImageFile(e: React.DragEvent): boolean {
+  const types = e.dataTransfer?.types;
+  if (!types) return false;
+  for (let i = 0; i < types.length; i++) {
+    if (types[i] === 'Files') return true;
+  }
+  return false;
+}
+
+function pickImageFile(files: FileList): File | null {
+  for (let i = 0; i < files.length; i++) {
+    const f = files[i];
+    if (f.type.startsWith('image/')) return f;
+  }
+  return null;
+}
+
+async function handleDrop(slideId: string, file: File, line: number, column: number) {
+  const { ok, entry } = await uploadWithAutoRename(slideId, file);
+  if (!ok || !entry) throw new Error('upload failed');
+  const res = await fetch('/__edit', {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({
+      slideId,
+      line,
+      column,
+      ops: [{ kind: 'replace-placeholder-with-image', assetPath: `./assets/${entry.name}` }],
+    }),
+  });
+  if (!res.ok) throw new Error(`edit failed (${res.status})`);
+}
+
 function PlaceholderIcon() {
   return (
     <svg

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

@@ -3,13 +3,17 @@ import {
   AlignJustify,
   AlignLeft,
   AlignRight,
+  ArrowDownToLine,
   Bold,
   Crop,
   ImageIcon,
   Italic,
+  Loader2,
+  Upload,
   X,
 } from 'lucide-react';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { toast } from 'sonner';
 import { Field, NumberField, Section } from '@/components/panel/panel-fields';
 import { PANEL_TRANSITION_MS, PanelShell, useAnimatedOpen } from '@/components/panel/panel-shell';
 import { Button } from '@/components/ui/button';
@@ -34,10 +38,11 @@ import { Textarea } from '@/components/ui/textarea';
 import { Toggle } from '@/components/ui/toggle';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import { type AssetEntry, useAssets } from '@/lib/assets';
+import { type AssetEntry, uploadWithAutoRename, useAssets } from '@/lib/assets';
 import { findSlideSource } from '@/lib/inspector/fiber';
 import type { EditOp } from '@/lib/inspector/use-editor';
-import { useLocale } from '@/lib/use-locale';
+import { useAgentSocketConnected } from '@/lib/use-agent-socket';
+import { format, useLocale } from '@/lib/use-locale';
 import { cn } from '@/lib/utils';
 import type { Locale } from '../../../locale/types';
 import { type SelectedTarget, useInspector } from './inspector-provider';
@@ -746,11 +751,35 @@ function AssetPickerDialog({
   onClose: () => void;
   onPick: (asset: AssetEntry) => void;
 }) {
-  const { assets, loading } = useAssets(slideId);
+  const { assets, loading, refresh } = useAssets(slideId);
   const images = assets.filter((a) => a.mime.startsWith('image/'));
   const t = useLocale();
   const path = `slides/${slideId}/assets/`;
   const [descPrefix, descSuffix] = t.inspector.replaceImageDescription.split('{path}');
+  const [uploading, setUploading] = useState(false);
+  const [dragActive, setDragActive] = useState(false);
+  const dragDepth = useRef(0);
+  const inputId = useId();
+
+  const handleFile = useCallback(
+    async (file: File) => {
+      if (!file.type.startsWith('image/')) return;
+      setUploading(true);
+      try {
+        const { ok, status, entry } = await uploadWithAutoRename(slideId, file);
+        if (!ok || !entry) {
+          toast.error(format(t.asset.toastUploadFailed, { status }));
+          return;
+        }
+        await refresh().catch(() => {});
+        onPick(entry);
+      } finally {
+        setUploading(false);
+      }
+    },
+    [slideId, refresh, onPick, t],
+  );
+
   return (
     <Dialog open onOpenChange={(o) => !o && onClose()}>
       <DialogContent className="sm:max-w-xl">
@@ -762,7 +791,60 @@ function AssetPickerDialog({
             {descSuffix}
           </DialogDescription>
         </DialogHeader>
-        <div className="max-h-[60vh] overflow-y-auto">
+        <label
+          htmlFor={inputId}
+          className={cn(
+            'absolute right-12 top-3.5 inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-[5px] border border-border bg-card px-2 text-[12px] font-medium transition-colors',
+            'hover:bg-muted/60 hover:border-foreground/20 active:translate-y-px',
+            uploading && 'pointer-events-none opacity-60',
+          )}
+        >
+          {uploading ? (
+            <Loader2 className="size-3.5 animate-spin" />
+          ) : (
+            <Upload className="size-3.5" />
+          )}
+          <span>{t.asset.upload}</span>
+        </label>
+        <input
+          id={inputId}
+          type="file"
+          accept="image/*"
+          className="sr-only"
+          disabled={uploading}
+          onChange={(e) => {
+            const file = e.target.files?.[0];
+            e.target.value = '';
+            if (file) handleFile(file).catch(() => {});
+          }}
+        />
+        <section
+          aria-label={t.inspector.replaceImageDialogTitle}
+          className="relative max-h-[60vh] overflow-y-auto"
+          onDragEnter={(e) => {
+            if (uploading || !hasFiles(e)) return;
+            e.preventDefault();
+            dragDepth.current += 1;
+            setDragActive(true);
+          }}
+          onDragOver={(e) => {
+            if (uploading || !hasFiles(e)) return;
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'copy';
+          }}
+          onDragLeave={() => {
+            dragDepth.current = Math.max(0, dragDepth.current - 1);
+            if (dragDepth.current === 0) setDragActive(false);
+          }}
+          onDrop={(e) => {
+            if (uploading || !hasFiles(e)) return;
+            e.preventDefault();
+            dragDepth.current = 0;
+            setDragActive(false);
+            const file = e.dataTransfer.files?.[0];
+            if (file) handleFile(file).catch(() => {});
+          }}
+        >
           {loading ? (
             <p className="px-1 py-6 text-center text-xs text-muted-foreground">
               {t.inspector.pickerLoading}
@@ -800,14 +882,39 @@ function AssetPickerDialog({
               ))}
             </div>
           )}
-        </div>
+          {dragActive && (
+            <div
+              className="pointer-events-none absolute inset-0 z-10 animate-in fade-in-0 duration-200"
+              aria-hidden
+            >
+              <div className="absolute inset-0 bg-brand/5" />
+              <div className="absolute inset-1 rounded-[8px] border border-dashed border-brand/40" />
+              <div className="absolute inset-x-0 bottom-4 flex justify-center">
+                <div className="flex items-center gap-2 rounded-[6px] border border-border bg-card px-3 py-1.5 text-[12px] font-medium shadow-floating">
+                  <ArrowDownToLine className="size-3.5 text-brand" />
+                  <span>{t.asset.dropToUpload}</span>
+                </div>
+              </div>
+            </div>
+          )}
+        </section>
       </DialogContent>
     </Dialog>
   );
 }
 
+function hasFiles(e: React.DragEvent): boolean {
+  const types = e.dataTransfer?.types;
+  if (!types) return false;
+  for (let i = 0; i < types.length; i++) {
+    if (types[i] === 'Files') return true;
+  }
+  return false;
+}
+
 function AgentWatchingBadge() {
   const t = useLocale();
+  const connected = useAgentSocketConnected();
   return (
     <TooltipProvider delayDuration={200}>
       <Tooltip>
@@ -817,14 +924,20 @@ function AgentWatchingBadge() {
             className="flex shrink-0 cursor-help items-center gap-1.5 rounded-[3px] border border-hairline bg-card px-1.5 py-px text-[10.5px] text-foreground/85 outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
           >
             <span aria-hidden className="relative flex size-1.5 items-center justify-center">
-              <span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-500 opacity-60" />
-              <span className="relative inline-flex size-1.5 rounded-full bg-emerald-500" />
+              {connected ? (
+                <>
+                  <span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-500 opacity-60" />
+                  <span className="relative inline-flex size-1.5 rounded-full bg-emerald-500" />
+                </>
+              ) : (
+                <span className="relative inline-flex size-1.5 rounded-full bg-rose-500" />
+              )}
             </span>
-            {t.inspector.agentWatching}
+            {connected ? t.inspector.agentWatching : t.inspector.agentNotWatching}
           </button>
         </TooltipTrigger>
         <TooltipContent side="bottom" align="end" className="max-w-[260px] leading-relaxed">
-          {t.inspector.agentWatchingTooltip}
+          {connected ? t.inspector.agentWatchingTooltip : t.inspector.agentNotWatchingTooltip}
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>

package/src/app/components/sidebar/folder-item.tsx

@@ -67,6 +67,9 @@ type Row =
     }
   | {
       kind: 'draft';
+    }
+  | {
+      kind: 'themes';
     };
 
 export function FolderItem({
@@ -89,7 +92,9 @@ export function FolderItem({
   const slideDragActive = useSlideDragActive();
   const t = useLocale();
 
-  const isSlideDrag = (e: React.DragEvent) => e.dataTransfer.types.includes(SLIDE_DND_MIME);
+  const acceptsSlideDrop = row.kind !== 'themes';
+  const isSlideDrag = (e: React.DragEvent) =>
+    acceptsSlideDrop && e.dataTransfer.types.includes(SLIDE_DND_MIME);
   const handleDragEnter = (e: React.DragEvent) => {
     if (!isSlideDrag(e)) return;
     dragDepth.current += 1;
@@ -106,6 +111,7 @@ export function FolderItem({
     if (dragDepth.current === 0) setDragOver(false);
   };
   const handleDrop = (e: React.DragEvent) => {
+    if (!acceptsSlideDrop) return;
     const slideId = e.dataTransfer.getData(SLIDE_DND_MIME);
     dragDepth.current = 0;
     setDragOver(false);
@@ -114,9 +120,14 @@ export function FolderItem({
     onDropSlide(slideId);
   };
 
-  const icon =
-    row.kind === 'draft' ? ({ type: 'emoji', value: '📝' } satisfies FolderIcon) : row.folder.icon;
-  const label = row.kind === 'draft' ? t.home.draft : row.folder.name;
+  const icon: FolderIcon =
+    row.kind === 'draft'
+      ? { type: 'emoji', value: '📝' }
+      : row.kind === 'themes'
+        ? { type: 'emoji', value: '🎨' }
+        : row.folder.icon;
+  const label =
+    row.kind === 'draft' ? t.home.draft : row.kind === 'themes' ? t.home.themes : row.folder.name;
 
   const commitRename = () => {
     if (row.kind !== 'folder') return;
@@ -133,7 +144,7 @@ export function FolderItem({
         selected
           ? 'bg-muted text-foreground before:absolute before:inset-y-1.5 before:-left-0.5 before:w-[2px] before:rounded-full before:bg-brand'
           : 'text-foreground/70 hover:bg-muted/60 hover:text-foreground',
-        slideDragActive && !dragOver && 'ring-1 ring-foreground/10',
+        slideDragActive && acceptsSlideDrop && !dragOver && 'ring-1 ring-foreground/10',
         dragOver &&
           'bg-brand/10 text-foreground ring-1 ring-brand ring-offset-1 ring-offset-sidebar motion-safe:scale-[1.01] motion-safe:transition-transform',
       )}

package/src/app/components/sidebar/mobile-pill.tsx

@@ -0,0 +1,34 @@
+import { cn } from '@/lib/utils';
+import type { FolderIcon } from '../../lib/sdk';
+import { FolderIconChip } from './folder-item';
+
+export function MobileFolderPill({
+  icon,
+  label,
+  count,
+  active,
+  onClick,
+}: {
+  icon: FolderIcon;
+  label: string;
+  count: number;
+  active: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        'flex shrink-0 items-center gap-1.5 rounded-[5px] border px-2.5 py-1 text-[11.5px] font-medium transition-colors',
+        active
+          ? 'border-foreground/40 bg-foreground text-background'
+          : 'border-border bg-card text-muted-foreground hover:text-foreground',
+      )}
+    >
+      <FolderIconChip icon={icon} className="size-3.5 text-sm" />
+      <span className="max-w-[8rem] truncate">{label}</span>
+      <span className="folio nums">{count.toString().padStart(2, '0')}</span>
+    </button>
+  );
+}