feat(assets): resizable wider details panel, direct upload, drop the upload modal

- Details panel is now a resizable right-hand side panel (default 480px,
  drag its left edge; width persists to localStorage) instead of a fixed
  w-96 column.
- Upload button opens the native file picker directly and uploads the
  chosen files immediately — the file-grid/confirm modal is gone.
  Whole-frame drag-and-drop still works, now uploading dropped files
  directly with a lightweight non-blocking hint overlay (useFileDrop).
- Remove the 'Edit' action from the details panel, and with it the
  now-orphaned write-text RPC (its only consumer). Text files still
  preview via read-text.

Docs + API snapshots updated; the registration test no longer invokes
the external-launching RPCs (which spawned OS processes and hung the
runner) — it asserts registration on the server context instead.

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 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.
+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 resizable 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). Upload files with the toolbar button (native file picker) or by dropping them anywhere on the frame, and 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.
 
@@ -72,15 +72,14 @@ All functions are namespaced `devframes:plugin:assets:*`:
 | `list` | `query`, `snapshot: true` | Every file under the managed directory, with type, size, and last-modified time. |
 | `capabilities` | `query`, `snapshot: true` | Whether write actions are enabled, and the upload allow-list — lets the UI gate itself proactively. |
 | `read-image-meta` | `query` | Width, height, and orientation for an image asset. |
-| `read-text` | `query` | Truncated text content, for preview or editing. |
+| `read-text` | `query` | Truncated text content, for preview. |
 | `upload` | `action` | Allocates a streaming upload slot; the client pipes the file's bytes over the paired channel. |
 | `rename` | `action` | Renames an asset within its folder, preserving its extension. |
 | `delete` | `action` | Deletes one or more assets in a single call. |
 | `mkdir` | `action` | Creates a folder, including missing parents. |
-| `write-text` | `action` | Overwrites a text asset's content in place (the details panel's inline editor). |
 | `open-in-editor` / `reveal-in-folder` | `action` | Launch the asset in your editor, or reveal its containing folder in the OS file manager. Always registered, regardless of `write`. |
 
-`upload` / `rename` / `delete` / `mkdir` / `write-text` are registered only when `write` is enabled.
+`upload` / `rename` / `delete` / `mkdir` are registered only when `write` is enabled.
 
 ## Static export
 

plugins/assets/src/rpc/functions/write-text.ts

@@ -9,7 +9,6 @@ import { readText } from './functions/read-text'
 import { rename } from './functions/rename'
 import { revealInFolder } from './functions/reveal-in-folder'
 import { upload } from './functions/upload'
-import { writeText } from './functions/write-text'
 
 /** Read-only RPC — always registered. */
 export const readFunctions = [list, readImageMeta, readText, capabilities] as const
@@ -21,7 +20,7 @@ export const readFunctions = [list, readImageMeta, readText, capabilities] as co
 export const alwaysFunctions = [openInEditor, revealInFolder] as const
 
 /** Mutating RPC — registered only when write actions are enabled. */
-export const writeFunctions = [upload, rename, deleteAssets, mkdir, writeText] as const
+export const writeFunctions = [upload, rename, deleteAssets, mkdir] as const
 
 export const serverFunctions = [...readFunctions, ...alwaysFunctions, ...writeFunctions] as const
 
@@ -41,4 +40,3 @@ export type { RenameArgs } from './functions/rename'
 export { rename } from './functions/rename'
 export { revealInFolder } from './functions/reveal-in-folder'
 export { upload, UPLOAD_CHANNEL } from './functions/upload'
-export { writeText } from './functions/write-text'

plugins/assets/src/rpc/index.ts

@@ -1,9 +1,8 @@
 import type { AssetInfo, AssetType } from '../../types'
-import { useMemo, useState } from 'preact/hooks'
+import { useMemo, useRef, 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'
@@ -12,28 +11,69 @@ import { Dialog } from './components/ui/Dialog'
 import { TextInput } from './components/ui/TextInput'
 import { connectionBody, connectionGlyph, connectionPanel, connectionState, connectionTitle, nav, navBrand } from './design'
 import { useAssets } from './hooks/useAssets'
+import { useFileDrop } from './hooks/useFileDrop'
 import { useLocalStorage } from './hooks/useLocalStorage'
 import { useUpload } from './hooks/useUpload'
 import { ASSET_TYPES } from './utils/assetType'
 
 type ViewMode = 'grid' | 'list'
 
+const MIN_PANEL_WIDTH = 320
+const MAX_PANEL_WIDTH = 900
+const DEFAULT_PANEL_WIDTH = 480
+
 export function App() {
   const { assets, capabilities, loading, error, isStatic, refresh, rpc } = useAssets()
   const [view, setView] = useLocalStorage<ViewMode>('devframes:plugin:assets:view', 'grid')
+  const [panelWidth, setPanelWidth] = useLocalStorage<number>('devframes:plugin:assets:panelWidth', DEFAULT_PANEL_WIDTH)
   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())
-  const [dropzoneOpen, setDropzoneOpen] = useState(false)
   const [mkdirOpen, setMkdirOpen] = useState(false)
   const [newFolderName, setNewFolderName] = useState('')
   const [bulkDeleteOpen, setBulkDeleteOpen] = useState(false)
+  const fileInputRef = useRef<HTMLInputElement>(null)
 
   const { uploading, errors: uploadErrors, uploadFiles } = useUpload(rpc, refresh)
 
   const canWrite = capabilities?.write ?? false
 
+  function uploadSelected(files: FileList): void {
+    void uploadFiles(Array.from(files).map(file => ({ file, targetPath: file.name })))
+  }
+
+  const { dragging } = useFileDrop(canWrite, uploadSelected)
+
+  function onFilePick(e: Event): void {
+    const input = e.target as HTMLInputElement
+    if (input.files?.length)
+      uploadSelected(input.files)
+    // Reset so picking the same file again still fires `change`.
+    input.value = ''
+  }
+
+  function startResize(e: PointerEvent): void {
+    e.preventDefault()
+    const startX = e.clientX
+    const startWidth = panelWidth
+    document.body.style.userSelect = 'none'
+    document.body.style.cursor = 'col-resize'
+    function onMove(ev: PointerEvent): void {
+      // Panel is on the right, so dragging its left edge leftwards widens it.
+      const next = Math.min(Math.max(startWidth + (startX - ev.clientX), MIN_PANEL_WIDTH), MAX_PANEL_WIDTH)
+      setPanelWidth(next)
+    }
+    function onUp(): void {
+      document.body.style.userSelect = ''
+      document.body.style.cursor = ''
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+    }
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+  }
+
   // Types present in the listing, with counts, in canonical display order.
   const typeItems = useMemo(() => {
     const counts = new Map<AssetType, number>()
@@ -104,6 +144,8 @@ export function App() {
     )
   }
 
+  const banner = error ?? (uploadErrors.length ? uploadErrors.join(' · ') : null)
+
   return (
     <div class="flex h-screen flex-col bg-base color-base">
       <header class={nav('gap-3')}>
@@ -113,6 +155,7 @@ export function App() {
         </span>
         {isStatic && <Badge variant="secondary">static</Badge>}
         {!canWrite && !loading && <Badge variant="outline">read-only</Badge>}
+        {uploading && <Badge variant="primary">uploading…</Badge>}
         <Toolbar
           search={search}
           onSearchChange={setSearch}
@@ -121,7 +164,7 @@ export function App() {
           total={assets?.length ?? 0}
           filtered={filtered.length}
           canWrite={canWrite}
-          onUpload={() => setDropzoneOpen(true)}
+          onUpload={() => fileInputRef.current?.click()}
           onNewFolder={() => setMkdirOpen(true)}
           selectedCount={selectedPaths.size}
           onBulkDelete={() => setBulkDeleteOpen(true)}
@@ -131,8 +174,8 @@ export function App() {
 
       <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>
+      {banner && (
+        <div class="shrink-0 border-b border-base bg-error/10 px-3 py-1 text-xs text-error">{banner}</div>
       )}
 
       <div class="flex min-h-0 flex-1">
@@ -164,27 +207,43 @@ export function App() {
         </main>
 
         {selected && (
-          <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
+            class="relative min-h-0 shrink-0 border-l border-base bg-base"
+            style={{ width: `${panelWidth}px` }}
+          >
+            {/* Drag handle to resize the panel. */}
+            <div
+              class="absolute left-0 top-0 z-10 h-full w-1.5 -translate-x-1/2 cursor-col-resize hover:bg-active"
+              onPointerDown={startResize}
+              role="separator"
+              aria-orientation="vertical"
+              aria-label="Resize details panel"
             />
+            <div class="min-h-0 h-full overflow-y-auto">
+              <AssetDetails
+                asset={selected}
+                rpc={rpc}
+                canWrite={canWrite}
+                onClose={() => setSelected(undefined)}
+                onChanged={() => void refresh()}
+              />
+            </div>
           </aside>
         )}
       </div>
 
-      <DropZone
-        open={dropzoneOpen}
-        onClose={() => setDropzoneOpen(false)}
-        enabled={canWrite}
-        folder=""
-        uploading={uploading}
-        errors={uploadErrors}
-        onUpload={uploadFiles}
-      />
+      {/* Direct file picker for the Upload button — no modal. */}
+      <input ref={fileInputRef} type="file" multiple class="hidden" onChange={onFilePick} />
+
+      {/* Non-blocking hint while files are dragged over the frame. */}
+      {dragging && (
+        <div class="pointer-events-none fixed inset-0 z-drawer-content flex items-center justify-center bg-base/80 backdrop-blur-sm">
+          <div class="flex flex-col items-center gap-2 rounded-xl border-2 border-dashed border-active px-10 py-8 text-lg color-active">
+            <span class="i-ph-cloud-arrow-up-duotone text-3xl" />
+            <span>Drop files to upload</span>
+          </div>
+        </div>
+      )}
 
       <Dialog open={mkdirOpen} onClose={() => setMkdirOpen(false)}>
         <TextInput

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

@@ -30,9 +30,7 @@ export function AssetDetails({ asset, rpc, canWrite, onClose, onChanged }: Asset
   const [textContent, setTextContent] = useState<string | null>(null)
   const [deleteOpen, setDeleteOpen] = useState(false)
   const [renameOpen, setRenameOpen] = useState(false)
-  const [editOpen, setEditOpen] = useState(false)
   const [newName, setNewName] = useState('')
-  const [draftContent, setDraftContent] = useState('')
   const [busy, setBusy] = useState(false)
   const [notice, setNotice] = useState<{ kind: 'success' | 'error', message: string } | null>(null)
 
@@ -44,12 +42,8 @@ export function AssetDetails({ asset, rpc, canWrite, onClose, onChanged }: Asset
       return
     if (asset.type === 'image')
       void rpc.call('devframes:plugin:assets:read-image-meta', asset.path).then(setImageMeta)
-    if (asset.type === 'text') {
-      void rpc.call('devframes:plugin:assets:read-text', asset.path, 5000).then((content) => {
-        setTextContent(content)
-        setDraftContent(content ?? '')
-      })
-    }
+    if (asset.type === 'text')
+      void rpc.call('devframes:plugin:assets:read-text', asset.path, 5000).then(setTextContent)
   }, [rpc, asset.path, asset.type])
 
   const aspectRatio = (() => {
@@ -95,15 +89,6 @@ export function AssetDetails({ asset, rpc, canWrite, onClose, onChanged }: Asset
     }, 'Renamed')
   }
 
-  async function handleSaveText(): Promise<void> {
-    await withNotice(async () => {
-      await rpc!.call('devframes:plugin:assets:write-text', { path: asset.path, content: draftContent })
-      setEditOpen(false)
-      setTextContent(draftContent)
-      onChanged()
-    }, 'Saved')
-  }
-
   async function handleOpenInEditor(): Promise<void> {
     await withNotice(async () => {
       await rpc!.call('devframes:plugin:assets:open-in-editor', asset.path)
@@ -184,13 +169,6 @@ export function AssetDetails({ asset, rpc, canWrite, onClose, onChanged }: Asset
           {' '}
           Reveal in Folder
         </Button>
-        {canWrite && asset.type === 'text' && (
-          <Button variant="secondary" size="sm" onClick={() => setEditOpen(true)}>
-            <span class="i-ph-pencil-simple-duotone" />
-            {' '}
-            Edit
-          </Button>
-        )}
         {canWrite && (
           <Button variant="secondary" size="sm" onClick={() => openRenameDialog()}>
             <span class="i-ph-text-aa-duotone" />
@@ -240,18 +218,6 @@ export function AssetDetails({ asset, rpc, canWrite, onClose, onChanged }: Asset
           <Button variant="primary" onClick={handleRename} disabled={busy || !newName.trim()}>Rename</Button>
         </div>
       </Dialog>
-
-      <Dialog open={editOpen} onClose={() => setEditOpen(false)} class="max-w-2xl">
-        <textarea
-          value={draftContent}
-          onInput={e => setDraftContent((e.target as HTMLTextAreaElement).value)}
-          class="h-80 w-full rounded border border-base bg-base p-3 font-mono text-sm outline-none"
-        />
-        <div class="flex justify-end gap-2">
-          <Button variant="ghost" onClick={() => setEditOpen(false)}>Cancel</Button>
-          <Button variant="primary" onClick={handleSaveText} disabled={busy}>Save</Button>
-        </div>
-      </Dialog>
     </div>
   )
 }