fix(assets): serve raw bytes on Vite origin, side-panel details, inline type filter

- Fix broken images in the plugin dev server: in devMiddleware mode the
  SPA is served by Vite while ctx.views.hostStatic() mounts the raw bytes
  on the side-car origin, so origin-relative <img> URLs 404'd against
  Vite. Re-serve the managed directory on Vite's own origin in the dev
  config so the relative publicPath resolves.
- Details view is now an in-layout right side panel (the listing shrinks
  beside it) instead of an overlay drawer; removed the Drawer component.
- Replace the extension-filter dropdown with an always-visible inline
  type-filter chip row (image/video/audio/font/text/other) modeled on
  vitejs/devtools' DataSearchPanel; shared TYPE_META drives the chips and
  the tree icons.

Co-authored-by: opencode <noreply@opencode.ai>

Author: antfubot

docs/plugins/assets.md

@@ -10,7 +10,7 @@ Package: `@devframes/plugin-assets` · framework: **Preact**
 
 ## What it does
 
-Search and filter by extension, switch between a thumbnail grid (grouped by folder) and a file tree, and open a details panel with a live preview (image, video, audio, font, or text), file metadata, and ready-to-copy usage snippets (`<img>`, CSS `background-image`, `@font-face`, a download link). Drag-and-drop files to upload them, or select multiple assets to delete them together. A live file watcher keeps every connected client's listing in sync with changes made outside the UI.
+Search by name and filter by type from an inline chip row, switch between a thumbnail grid (grouped by folder) and a file tree, and open a right-hand details panel with a live preview (image, video, audio, font, or text), file metadata, and ready-to-copy usage snippets (`<img>`, CSS `background-image`, `@font-face`, a download link). Drop files anywhere on the frame to upload them, or select multiple assets to delete them together. A live file watcher keeps every connected client's listing in sync with changes made outside the UI.
 
 The standalone server requires devframe's trust handshake by default because it can read, write, and delete real files. Uploads, renames, deletes, and folder creation are enabled by default — pass `{ write: false }` (or `--read-only` on the standalone CLI) for a browse-only deployment.
 

plugins/assets/src/spa/app/App.tsx

@@ -1,27 +1,27 @@
-import type { AssetInfo } from '../../types'
+import type { AssetInfo, AssetType } from '../../types'
 import { useMemo, useState } from 'preact/hooks'
 import { AssetDetails } from './components/AssetDetails'
 import { AssetGrid } from './components/AssetGrid'
 import { AssetTree } from './components/AssetTree'
 import { DropZone } from './components/DropZone'
 import { Toolbar } from './components/Toolbar'
+import { TypeFilter } from './components/TypeFilter'
 import { Badge } from './components/ui/Badge'
 import { Button } from './components/ui/Button'
 import { Dialog } from './components/ui/Dialog'
-import { Drawer } from './components/ui/Drawer'
 import { TextInput } from './components/ui/TextInput'
 import { connectionBody, connectionGlyph, connectionPanel, connectionState, connectionTitle, nav, navBrand } from './design'
 import { useAssets } from './hooks/useAssets'
 import { useLocalStorage } from './hooks/useLocalStorage'
 import { useUpload } from './hooks/useUpload'
-import { extensionOf } from './utils/format'
+import { ASSET_TYPES } from './utils/assetType'
 
 type ViewMode = 'grid' | 'list'
 
 export function App() {
   const { assets, capabilities, loading, error, isStatic, refresh, rpc } = useAssets()
   const [view, setView] = useLocalStorage<ViewMode>('devframes:plugin:assets:view', 'grid')
-  const [extensionState, setExtensionState] = useState<Record<string, boolean>>({})
+  const [typeState, setTypeState] = useState<Partial<Record<AssetType, boolean>>>({})
   const [search, setSearch] = useState('')
   const [selected, setSelected] = useState<AssetInfo | undefined>()
   const [selectedPaths, setSelectedPaths] = useState<Set<string>>(new Set())
@@ -34,31 +34,30 @@ export function App() {
 
   const canWrite = capabilities?.write ?? false
 
-  const extensions = useMemo(() => {
-    const seen = new Set<string>()
-    for (const asset of assets ?? []) {
-      const ext = extensionOf(asset.path)
-      if (ext)
-        seen.add(ext)
-    }
-    return Array.from(seen).sort()
-  }, [assets])
+  // Types present in the listing, with counts, in canonical display order.
+  const typeItems = useMemo(() => {
+    const counts = new Map<AssetType, number>()
+    for (const asset of assets ?? [])
+      counts.set(asset.type, (counts.get(asset.type) ?? 0) + 1)
+    return ASSET_TYPES
+      .filter(type => counts.has(type))
+      .map(type => ({ type, count: counts.get(type)!, checked: typeState[type] !== false }))
+  }, [assets, typeState])
 
   const filtered = useMemo(() => {
     const list = assets ?? []
     const query = search.trim().toLowerCase()
     return list.filter((asset) => {
-      const ext = extensionOf(asset.path)
-      if (ext && extensionState[ext] === false)
+      if (typeState[asset.type] === false)
         return false
       if (query && !asset.path.toLowerCase().includes(query))
         return false
       return true
     })
-  }, [assets, search, extensionState])
+  }, [assets, search, typeState])
 
-  function toggleExtension(name: string): void {
-    setExtensionState(prev => ({ ...prev, [name]: prev[name] === false }))
+  function toggleType(type: AssetType): void {
+    setTypeState(prev => ({ ...prev, [type]: prev[type] === false }))
   }
 
   function toggleSelect(path: string): void {
@@ -117,8 +116,6 @@ export function App() {
         <Toolbar
           search={search}
           onSearchChange={setSearch}
-          extensions={extensions.map(name => ({ name, checked: extensionState[name] !== false }))}
-          onToggleExtension={toggleExtension}
           view={view}
           onViewChange={setView}
           total={assets?.length ?? 0}
@@ -132,48 +129,52 @@ export function App() {
         />
       </header>
 
+      <TypeFilter items={typeItems} onToggle={toggleType} />
+
       {error && (
         <div class="shrink-0 border-b border-base bg-error/10 px-3 py-1 text-xs text-error">{error}</div>
       )}
 
-      <main class="min-h-0 flex-1 overflow-auto">
-        {loading
-          ? <div class="flex h-full items-center justify-center op-fade text-sm">Loading assets…</div>
-          : filtered.length === 0
-            ? <div class="flex h-full items-center justify-center op-fade text-sm">No assets found.</div>
-            : view === 'grid'
-              ? (
-                  <AssetGrid
-                    assets={filtered}
-                    selectable={canWrite}
-                    selectedPaths={selectedPaths}
-                    onSelectToggle={toggleSelect}
-                    onSelect={setSelected}
-                  />
-                )
-              : (
-                  <AssetTree
-                    assets={filtered}
-                    selectedPath={selected?.path}
-                    selectable={canWrite}
-                    selectedPaths={selectedPaths}
-                    onSelectToggle={toggleSelect}
-                    onSelect={setSelected}
-                  />
-                )}
-      </main>
-
-      <Drawer open={!!selected} onClose={() => setSelected(undefined)}>
+      <div class="flex min-h-0 flex-1">
+        <main class="min-h-0 flex-1 overflow-auto">
+          {loading
+            ? <div class="flex h-full items-center justify-center op-fade text-sm">Loading assets…</div>
+            : filtered.length === 0
+              ? <div class="flex h-full items-center justify-center op-fade text-sm">No assets found.</div>
+              : view === 'grid'
+                ? (
+                    <AssetGrid
+                      assets={filtered}
+                      selectable={canWrite}
+                      selectedPaths={selectedPaths}
+                      onSelectToggle={toggleSelect}
+                      onSelect={setSelected}
+                    />
+                  )
+                : (
+                    <AssetTree
+                      assets={filtered}
+                      selectedPath={selected?.path}
+                      selectable={canWrite}
+                      selectedPaths={selectedPaths}
+                      onSelectToggle={toggleSelect}
+                      onSelect={setSelected}
+                    />
+                  )}
+        </main>
+
         {selected && (
-          <AssetDetails
-            asset={selected}
-            rpc={rpc}
-            canWrite={canWrite}
-            onClose={() => setSelected(undefined)}
-            onChanged={() => void refresh()}
-          />
+          <aside class="min-h-0 w-96 shrink-0 overflow-y-auto border-l border-base bg-base">
+            <AssetDetails
+              asset={selected}
+              rpc={rpc}
+              canWrite={canWrite}
+              onClose={() => setSelected(undefined)}
+              onChanged={() => void refresh()}
+            />
+          </aside>
         )}
-      </Drawer>
+      </div>
 
       <DropZone
         open={dropzoneOpen}

plugins/assets/src/spa/app/components/AssetListItem.tsx

@@ -1,17 +1,9 @@
 import type { TreeNode } from '../utils/tree'
 import { useState } from 'preact/hooks'
+import { TYPE_META } from '../utils/assetType'
 import { Checkbox } from './ui/Checkbox'
 import { Icon } from './ui/Icon'
 
-const TYPE_ICON: Record<string, string> = {
-  image: 'i-ph-image-duotone',
-  video: 'i-ph-video-duotone',
-  audio: 'i-ph-speaker-high-duotone',
-  font: 'i-ph-text-aa-duotone',
-  text: 'i-ph-file-text-duotone',
-  other: 'i-ph-file-duotone',
-}
-
 export interface AssetListItemProps {
   node: TreeNode
   depth?: number
@@ -24,7 +16,7 @@ export interface AssetListItemProps {
 
 export function AssetListItem({ node, depth = 0, selectedPath, selectable, selectedPaths, onSelectToggle, onSelect }: AssetListItemProps) {
   const [open, setOpen] = useState(true)
-  const icon = node.isFolder ? 'i-ph-folder-duotone' : TYPE_ICON[node.asset?.type ?? 'other']
+  const icon = node.isFolder ? 'i-ph-folder-duotone' : TYPE_META[node.asset?.type ?? 'other'].icon
   const isActive = !node.isFolder && node.asset?.path === selectedPath
 
   return (

plugins/assets/src/spa/app/components/ExtensionFilter.tsx

@@ -12,12 +12,6 @@ type Story = StoryObj<typeof Toolbar>
 const base = {
   search: '',
   onSearchChange: () => {},
-  extensions: [
-    { name: 'png', checked: true },
-    { name: 'svg', checked: true },
-    { name: 'mp4', checked: false },
-  ],
-  onToggleExtension: () => {},
   view: 'grid' as const,
   onViewChange: () => {},
   total: 42,

plugins/assets/src/spa/app/components/Toolbar.stories.tsx

@@ -1,14 +1,10 @@
-import type { ExtensionFilterItem } from './ExtensionFilter'
-import { ExtensionFilter } from './ExtensionFilter'
 import { Button } from './ui/Button'
 import { IconButton } from './ui/IconButton'
 import { TextInput } from './ui/TextInput'
 
 export interface ToolbarProps {
   search: string
   onSearchChange: (value: string) => void
-  extensions: ExtensionFilterItem[]
-  onToggleExtension: (name: string) => void
   view: 'grid' | 'list'
   onViewChange: (view: 'grid' | 'list') => void
   total: number
@@ -68,7 +64,6 @@ export function Toolbar(props: ToolbarProps) {
           <IconButton icon="i-ph-cloud-arrow-up-duotone" title="Upload" variant="ghost" onClick={props.onUpload} />
         </>
       )}
-      <ExtensionFilter extensions={props.extensions} onToggle={props.onToggleExtension} />
       <IconButton
         icon={props.view === 'grid' ? 'i-ph-list-duotone' : 'i-ph-grid-four-duotone'}
         title="Toggle view"

plugins/assets/src/spa/app/components/Toolbar.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/preact-vite'
+import { TypeFilter } from './TypeFilter'
+
+const meta: Meta<typeof TypeFilter> = {
+  title: 'Assets/TypeFilter',
+  component: TypeFilter,
+}
+export default meta
+
+type Story = StoryObj<typeof TypeFilter>
+
+export const Default: Story = {
+  args: {
+    items: [
+      { type: 'image', count: 12, checked: true },
+      { type: 'video', count: 2, checked: true },
+      { type: 'font', count: 3, checked: true },
+      { type: 'text', count: 8, checked: true },
+      { type: 'other', count: 1, checked: true },
+    ],
+    onToggle: () => {},
+  },
+}
+
+export const SomeDeselected: Story = {
+  args: {
+    items: [
+      { type: 'image', count: 12, checked: true },
+      { type: 'video', count: 2, checked: false },
+      { type: 'font', count: 3, checked: false },
+      { type: 'text', count: 8, checked: true },
+      { type: 'other', count: 1, checked: true },
+    ],
+    onToggle: () => {},
+  },
+}

plugins/assets/src/spa/app/components/TypeFilter.stories.tsx

@@ -0,0 +1,43 @@
+import type { AssetType } from '../../../types'
+import { TYPE_META } from '../utils/assetType'
+
+export interface TypeFilterItem {
+  type: AssetType
+  count: number
+  checked: boolean
+}
+
+export interface TypeFilterProps {
+  items: TypeFilterItem[]
+  onToggle: (type: AssetType) => void
+}
+
+/**
+ * Inline row of type-filter chips — one per asset type present in the
+ * listing. Modeled on vitejs/devtools' `DataSearchPanel`: a selected chip
+ * reads normally, an unselected one is greyed out. Always visible (no
+ * dropdown), so the active filter is self-evident.
+ */
+export function TypeFilter({ items, onToggle }: TypeFilterProps) {
+  if (items.length <= 1)
+    return null
+
+  return (
+    <div class="flex shrink-0 flex-wrap items-center gap-2 border-b border-base bg-secondary px-3 py-1.5">
+      {items.map(({ type, count, checked }) => (
+        <button
+          key={type}
+          type="button"
+          title={`${TYPE_META[type].label} (${count})`}
+          aria-pressed={checked}
+          class={`flex select-none items-center gap-1.5 rounded-md border border-base px-2 py-1 text-xs transition ${checked ? 'bg-active' : 'op50 grayscale hover:op-100'}`}
+          onClick={() => onToggle(type)}
+        >
+          <span class={TYPE_META[type].icon} />
+          <span>{TYPE_META[type].label}</span>
+          <span class="op-fade">{count}</span>
+        </button>
+      ))}
+    </div>
+  )
+}