@geminilight/mindos 0.5.56 → 0.5.58

package/app/components/ask/AskContent.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useRef, useState, useCallback } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState, useCallback } from 'react';
 import { Sparkles, Send, AtSign, Paperclip, StopCircle, RotateCcw, History, X, Maximize2, Minimize2, PanelRight, AppWindow } from 'lucide-react';
 import { useLocale } from '@/lib/LocaleContext';
 import type { Message } from '@/lib/types';
@@ -13,6 +13,54 @@ import SessionHistory from '@/components/ask/SessionHistory';
 import FileChip from '@/components/ask/FileChip';
 import { consumeUIMessageStream } from '@/lib/agent/stream-consumer';
 import { cn } from '@/lib/utils';
+import { useComposerVerticalResize } from '@/hooks/useComposerVerticalResize';
+
+const PANEL_COMPOSER_STORAGE = 'mindos-agent-panel-composer-height';
+const PANEL_COMPOSER_DEFAULT = 104;
+const PANEL_COMPOSER_MIN = 84;
+const PANEL_COMPOSER_MAX_ABS = 440;
+const PANEL_COMPOSER_MAX_VIEW = 0.48;
+const PANEL_COMPOSER_KEY_STEP = 24;
+/** 输入框随内容增高，超过此行数后在框内滚动（与常见 IM 一致） */
+const PANEL_TEXTAREA_MAX_VISIBLE_LINES = 8;
+
+function syncPanelTextareaToContent(el: HTMLTextAreaElement, maxVisibleLines: number, availableHeight?: number): void {
+  const style = getComputedStyle(el);
+  const parsedLh = parseFloat(style.lineHeight);
+  const parsedFs = parseFloat(style.fontSize);
+  const fontSize = Number.isFinite(parsedFs) ? parsedFs : 14;
+  const lineHeight = Number.isFinite(parsedLh) ? parsedLh : fontSize * 1.375;
+  const pad =
+    (Number.isFinite(parseFloat(style.paddingTop)) ? parseFloat(style.paddingTop) : 0) +
+    (Number.isFinite(parseFloat(style.paddingBottom)) ? parseFloat(style.paddingBottom) : 0);
+  let maxH = lineHeight * maxVisibleLines + pad;
+  if (availableHeight && Number.isFinite(availableHeight) && availableHeight > 0) {
+    maxH = Math.min(maxH, availableHeight);
+  }
+  if (!Number.isFinite(maxH) || maxH <= 0) return;
+  el.style.height = '0px';
+  const next = Math.min(el.scrollHeight, maxH);
+  el.style.height = `${Number.isFinite(next) ? next : maxH}px`;
+}
+
+function panelComposerMaxForViewport(): number {
+  if (typeof window === 'undefined') return PANEL_COMPOSER_MAX_ABS;
+  return Math.min(PANEL_COMPOSER_MAX_ABS, Math.floor(window.innerHeight * PANEL_COMPOSER_MAX_VIEW));
+}
+
+function readStoredPanelComposerHeight(): number {
+  if (typeof window === 'undefined') return PANEL_COMPOSER_DEFAULT;
+  try {
+    const s = localStorage.getItem(PANEL_COMPOSER_STORAGE);
+    if (s) {
+      const n = parseInt(s, 10);
+      if (Number.isFinite(n) && n >= PANEL_COMPOSER_MIN && n <= PANEL_COMPOSER_MAX_ABS) return n;
+    }
+  } catch {
+    /* ignore */
+  }
+  return PANEL_COMPOSER_DEFAULT;
+}
 
 interface AskContentProps {
   /** Controls visibility — 'open' for modal, 'active' for panel */
@@ -33,11 +81,91 @@ interface AskContentProps {
 }
 
 export default function AskContent({ visible, currentFile, initialMessage, onFirstMessage, variant, onClose, maximized, onMaximize, askMode, onModeSwitch }: AskContentProps) {
-  const inputRef = useRef<HTMLInputElement>(null);
+  const isPanel = variant === 'panel';
+
+  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
   const abortRef = useRef<AbortController | null>(null);
   const firstMessageFired = useRef(false);
   const { t } = useLocale();
 
+  const [panelComposerHeight, setPanelComposerHeight] = useState(PANEL_COMPOSER_DEFAULT);
+  const panelComposerHRef = useRef(panelComposerHeight);
+  panelComposerHRef.current = panelComposerHeight;
+
+  useEffect(() => {
+    const stored = readStoredPanelComposerHeight();
+    if (stored !== PANEL_COMPOSER_DEFAULT) {
+      setPanelComposerHeight(stored);
+      panelComposerHRef.current = stored;
+    }
+  }, []);
+
+  const getPanelComposerHeight = useCallback(() => panelComposerHRef.current, []);
+  const persistPanelComposerHeight = useCallback((h: number) => {
+    try {
+      localStorage.setItem(PANEL_COMPOSER_STORAGE, String(h));
+    } catch {
+      /* ignore */
+    }
+  }, []);
+
+  const onPanelComposerResizePointerDown = useComposerVerticalResize({
+    minHeight: PANEL_COMPOSER_MIN,
+    maxHeightAbs: PANEL_COMPOSER_MAX_ABS,
+    maxHeightViewportRatio: PANEL_COMPOSER_MAX_VIEW,
+    getHeight: getPanelComposerHeight,
+    setHeight: setPanelComposerHeight,
+    persist: persistPanelComposerHeight,
+  });
+
+  const [panelComposerViewportMax, setPanelComposerViewportMax] = useState(PANEL_COMPOSER_MAX_ABS);
+
+  useEffect(() => {
+    setPanelComposerViewportMax(panelComposerMaxForViewport());
+  }, []);
+
+  const applyPanelComposerClampAndPersist = useCallback(() => {
+    const maxH = panelComposerMaxForViewport();
+    setPanelComposerViewportMax(maxH);
+    const h = panelComposerHRef.current;
+    if (h > maxH) {
+      setPanelComposerHeight(maxH);
+      panelComposerHRef.current = maxH;
+      persistPanelComposerHeight(maxH);
+    }
+  }, [persistPanelComposerHeight]);
+
+  const handlePanelComposerSeparatorKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLElement>) => {
+      if (!['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(e.key)) return;
+      e.preventDefault();
+      const maxH = panelComposerMaxForViewport();
+      setPanelComposerViewportMax(maxH);
+      const h = panelComposerHRef.current;
+      let next = h;
+      if (e.key === 'ArrowUp') next = h + PANEL_COMPOSER_KEY_STEP;
+      else if (e.key === 'ArrowDown') next = h - PANEL_COMPOSER_KEY_STEP;
+      else if (e.key === 'Home') next = PANEL_COMPOSER_MIN;
+      else if (e.key === 'End') next = maxH;
+      const clamped = Math.round(Math.max(PANEL_COMPOSER_MIN, Math.min(maxH, next)));
+      setPanelComposerHeight(clamped);
+      panelComposerHRef.current = clamped;
+      persistPanelComposerHeight(clamped);
+    },
+    [persistPanelComposerHeight],
+  );
+
+  const resetPanelComposerHeight = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setPanelComposerHeight(PANEL_COMPOSER_DEFAULT);
+      panelComposerHRef.current = PANEL_COMPOSER_DEFAULT;
+      persistPanelComposerHeight(PANEL_COMPOSER_DEFAULT);
+    },
+    [persistPanelComposerHeight],
+  );
+
   const [input, setInput] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [loadingPhase, setLoadingPhase] = useState<'connecting' | 'thinking' | 'streaming'>('connecting');
@@ -93,11 +221,35 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
     return () => window.removeEventListener('keydown', handler);
   }, [variant, visible, onClose, mention]);
 
+  useEffect(() => {
+    if (!isPanel) return;
+    applyPanelComposerClampAndPersist();
+    window.addEventListener('resize', applyPanelComposerClampAndPersist);
+    return () => window.removeEventListener('resize', applyPanelComposerClampAndPersist);
+  }, [isPanel, applyPanelComposerClampAndPersist]);
+
+  const formRef = useRef<HTMLFormElement>(null);
+
+  useLayoutEffect(() => {
+    if (!isPanel || !visible) return;
+    const el = inputRef.current;
+    if (!el || !(el instanceof HTMLTextAreaElement)) return;
+    const form = formRef.current;
+    const availableH = form ? form.clientHeight - 40 : undefined;
+    syncPanelTextareaToContent(el, PANEL_TEXTAREA_MAX_VISIBLE_LINES, availableH);
+  }, [input, isPanel, isLoading, visible, panelComposerHeight]);
+
+  const mentionTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const handleInputChange = useCallback((val: string) => {
     setInput(val);
-    mention.updateMentionFromInput(val);
+    if (mentionTimerRef.current) clearTimeout(mentionTimerRef.current);
+    mentionTimerRef.current = setTimeout(() => mention.updateMentionFromInput(val), 80);
   }, [mention]);
 
+  useEffect(() => {
+    return () => { if (mentionTimerRef.current) clearTimeout(mentionTimerRef.current); };
+  }, []);
+
   const selectMention = useCallback((filePath: string) => {
     const atIdx = input.lastIndexOf('@');
     setInput(input.slice(0, atIdx));
@@ -108,21 +260,32 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
     setTimeout(() => inputRef.current?.focus(), 0);
   }, [input, attachedFiles, mention]);
 
-  const handleInputKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (mention.mentionQuery === null) return;
-    if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      mention.navigateMention('down');
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      mention.navigateMention('up');
-    } else if (e.key === 'Enter' || e.key === 'Tab') {
-      if (mention.mentionResults.length > 0) {
+  const handleInputKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      if (mention.mentionQuery !== null) {
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          mention.navigateMention('down');
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          mention.navigateMention('up');
+        } else if (e.key === 'Enter' || e.key === 'Tab') {
+          if (e.key === 'Enter' && e.shiftKey) return;
+          if (mention.mentionResults.length > 0) {
+            e.preventDefault();
+            selectMention(mention.mentionResults[mention.mentionIndex]);
+          }
+        }
+        return;
+      }
+      // Panel: multiline input — Enter sends, Shift+Enter inserts newline (textarea default).
+      if (variant === 'panel' && e.key === 'Enter' && !e.shiftKey && !isLoading && input.trim()) {
         e.preventDefault();
-        selectMention(mention.mentionResults[mention.mentionIndex]);
+        (e.currentTarget as HTMLTextAreaElement).form?.requestSubmit();
       }
-    }
-  }, [mention, selectMention]);
+    },
+    [mention, selectMention, variant, isLoading, input],
+  );
 
   const handleStop = useCallback(() => { abortRef.current?.abort(); }, []);
 
@@ -250,7 +413,6 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
     setTimeout(() => inputRef.current?.focus(), 0);
   }, [session, currentFile, upload, mention]);
 
-  const isPanel = variant === 'panel';
   const iconSize = isPanel ? 13 : 14;
   const inputIconSize = isPanel ? 14 : 15;
 
@@ -319,47 +481,80 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
         labels={{ connecting: t.ask.connecting, thinking: t.ask.thinking, generating: t.ask.generating }}
       />
 
-      {/* Input area */}
-      <div className="border-t border-border shrink-0">
-        {attachedFiles.length > 0 && (
-          <div className={isPanel ? 'px-3 pt-2 pb-1' : 'px-4 pt-2.5 pb-1'}>
-            <div className={`text-muted-foreground/70 mb-1 ${isPanel ? 'text-[10px]' : 'text-xs'}`}>
-              {isPanel ? 'Context' : 'Knowledge Base Context'}
-            </div>
-            <div className={`flex flex-wrap ${isPanel ? 'gap-1' : 'gap-1.5'}`}>
-              {attachedFiles.map(f => (
-                <FileChip key={f} path={f} onRemove={() => setAttachedFiles(prev => prev.filter(x => x !== f))} />
-              ))}
-            </div>
+      {/* Input area — panel: fixed-height shell + top drag handle (persisted); modal: simple block */}
+      <div
+        className={cn('shrink-0 border-t border-border', isPanel && 'flex flex-col overflow-hidden bg-card')}
+        style={isPanel ? { height: panelComposerHeight } : undefined}
+      >
+        {isPanel ? (
+          <div
+            role="separator"
+            tabIndex={0}
+            aria-orientation="horizontal"
+            aria-label={`${t.ask.panelComposerResize}. ${t.ask.panelComposerResetHint}. ${t.ask.panelComposerKeyboard}`}
+            aria-valuemin={PANEL_COMPOSER_MIN}
+            aria-valuemax={panelComposerViewportMax}
+            aria-valuenow={panelComposerHeight}
+            title={`${t.ask.panelComposerResize} · ${t.ask.panelComposerResetHint} · ${t.ask.panelComposerKeyboard}`}
+            onPointerDown={onPanelComposerResizePointerDown}
+            onKeyDown={handlePanelComposerSeparatorKeyDown}
+            onDoubleClick={resetPanelComposerHeight}
+            className="group flex h-3 shrink-0 cursor-ns-resize items-center justify-center border-b border-border/50 bg-muted/[0.06] transition-colors hover:bg-muted/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
+          >
+            <span
+              className="pointer-events-none h-1 w-10 rounded-full bg-border transition-colors group-hover:bg-[var(--amber)]/45 group-active:bg-[var(--amber)]/60"
+              aria-hidden
+            />
           </div>
-        )}
-
-        {upload.localAttachments.length > 0 && (
-          <div className={isPanel ? 'px-3 pb-1' : 'px-4 pb-1'}>
-            <div className={`text-muted-foreground/70 mb-1 ${isPanel ? 'text-[10px]' : 'text-xs'}`}>
-              {isPanel ? 'Uploaded' : 'Uploaded Files'}
+        ) : null}
+
+        <div className={cn(isPanel && 'flex min-h-0 flex-1 flex-col overflow-hidden')}>
+          {attachedFiles.length > 0 && (
+            <div className={cn('shrink-0', isPanel ? 'px-3 pt-2 pb-1' : 'px-4 pt-2.5 pb-1')}>
+              <div className={`text-muted-foreground/70 mb-1 ${isPanel ? 'text-[10px]' : 'text-xs'}`}>
+                {isPanel ? 'Context' : 'Knowledge Base Context'}
+              </div>
+              <div className={`flex flex-wrap ${isPanel ? 'gap-1' : 'gap-1.5'}`}>
+                {attachedFiles.map(f => (
+                  <FileChip key={f} path={f} onRemove={() => setAttachedFiles(prev => prev.filter(x => x !== f))} />
+                ))}
+              </div>
             </div>
-            <div className={`flex flex-wrap ${isPanel ? 'gap-1' : 'gap-1.5'}`}>
-              {upload.localAttachments.map((f, idx) => (
-                <FileChip key={`${f.name}-${idx}`} path={f.name} variant="upload" onRemove={() => upload.removeAttachment(idx)} />
-              ))}
+          )}
+
+          {upload.localAttachments.length > 0 && (
+            <div className={cn('shrink-0', isPanel ? 'px-3 pb-1' : 'px-4 pb-1')}>
+              <div className={`text-muted-foreground/70 mb-1 ${isPanel ? 'text-[10px]' : 'text-xs'}`}>
+                {isPanel ? 'Uploaded' : 'Uploaded Files'}
+              </div>
+              <div className={`flex flex-wrap ${isPanel ? 'gap-1' : 'gap-1.5'}`}>
+                {upload.localAttachments.map((f, idx) => (
+                  <FileChip key={`${f.name}-${idx}`} path={f.name} variant="upload" onRemove={() => upload.removeAttachment(idx)} />
+                ))}
+              </div>
             </div>
-          </div>
-        )}
+          )}
 
-        {upload.uploadError && (
-          <div className={`${isPanel ? 'px-3' : 'px-4'} pb-1 text-xs text-error`}>{upload.uploadError}</div>
-        )}
+          {upload.uploadError && (
+            <div className={cn('shrink-0 pb-1 text-xs text-error', isPanel ? 'px-3' : 'px-4')}>{upload.uploadError}</div>
+          )}
 
-        {mention.mentionQuery !== null && mention.mentionResults.length > 0 && (
-          <MentionPopover
-            results={mention.mentionResults}
-            selectedIndex={mention.mentionIndex}
-            onSelect={selectMention}
-          />
-        )}
+          {mention.mentionQuery !== null && mention.mentionResults.length > 0 && (
+            <MentionPopover
+              results={mention.mentionResults}
+              selectedIndex={mention.mentionIndex}
+              onSelect={selectMention}
+            />
+          )}
 
-        <form onSubmit={handleSubmit} className={`flex items-center ${isPanel ? 'gap-1.5 px-2 py-2.5' : 'gap-2 px-3 py-3'}`}>
+          <form
+            ref={formRef}
+            onSubmit={handleSubmit}
+            className={cn(
+              'flex',
+              isPanel ? 'min-h-0 flex-1 items-end gap-1.5 px-2 py-2' : 'items-center gap-2 px-3 py-3',
+            )}
+          >
           <button type="button" onClick={() => upload.uploadInputRef.current?.click()} className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0" title="Attach local file">
             <Paperclip size={inputIconSize} />
           </button>
@@ -385,7 +580,10 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
               const pos = el.selectionStart ?? input.length;
               const newVal = input.slice(0, pos) + '@' + input.slice(pos);
               handleInputChange(newVal);
-              setTimeout(() => { el.focus(); el.setSelectionRange(pos + 1, pos + 1); }, 0);
+              setTimeout(() => {
+                el.focus();
+                el.setSelectionRange(pos + 1, pos + 1);
+              }, 0);
             }}
             className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0"
             title="@ mention file"
@@ -393,15 +591,32 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
             <AtSign size={inputIconSize} />
           </button>
 
-          <input
-            ref={inputRef}
-            value={input}
-            onChange={e => handleInputChange(e.target.value)}
-            onKeyDown={handleInputKeyDown}
-            placeholder={t.ask.placeholder}
-            disabled={isLoading}
-            className="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none disabled:opacity-50 min-w-0"
-          />
+          {isPanel ? (
+            <textarea
+              ref={(el) => {
+                inputRef.current = el;
+              }}
+              value={input}
+              onChange={e => handleInputChange(e.target.value)}
+              onKeyDown={handleInputKeyDown}
+              placeholder={t.ask.placeholder}
+              disabled={isLoading}
+              rows={1}
+              className="min-w-0 flex-1 resize-none overflow-y-auto bg-transparent py-2 text-sm leading-snug text-foreground placeholder:text-muted-foreground outline-none disabled:opacity-50"
+            />
+          ) : (
+            <input
+              ref={(el) => {
+                inputRef.current = el;
+              }}
+              value={input}
+              onChange={e => handleInputChange(e.target.value)}
+              onKeyDown={handleInputKeyDown}
+              placeholder={t.ask.placeholder}
+              disabled={isLoading}
+              className="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none disabled:opacity-50 min-w-0"
+            />
+          )}
 
           {isLoading ? (
             <button type="button" onClick={handleStop} className="p-1.5 rounded-md transition-colors shrink-0 text-muted-foreground hover:text-foreground hover:bg-muted" title={t.ask.stopTitle}>
@@ -412,7 +627,8 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
               <Send size={isPanel ? 13 : 14} />
             </button>
           )}
-        </form>
+          </form>
+        </div>
       </div>
 
       {/* Footer hints — use full class strings so Tailwind JIT includes utilities */}
@@ -420,13 +636,27 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
         className={cn(
           'flex shrink-0 items-center',
           isPanel
-            ? 'gap-2 px-3 pb-1.5 text-[10px] text-muted-foreground/40'
+            ? 'flex-wrap gap-x-2 gap-y-1 px-3 pb-1.5 text-[10px] text-muted-foreground/40'
             : 'hidden gap-3 px-4 pb-2 text-xs text-muted-foreground/50 md:flex',
         )}
       >
-        <span><kbd className="font-mono">↵</kbd> {t.ask.send}</span>
-        <span><kbd className="font-mono">@</kbd> {t.ask.attachFile}</span>
-        {!isPanel && <span><kbd className="font-mono">ESC</kbd> {t.search.close}</span>}
+        <span suppressHydrationWarning>
+          <kbd className="font-mono">↵</kbd> {t.ask.send}
+        </span>
+        {isPanel ? (
+          <span suppressHydrationWarning>
+            <kbd className="font-mono">⇧</kbd>
+            <kbd className="font-mono ml-0.5">↵</kbd> {t.ask.newlineHint}
+          </span>
+        ) : null}
+        <span suppressHydrationWarning>
+          <kbd className="font-mono">@</kbd> {t.ask.attachFile}
+        </span>
+        {!isPanel && (
+          <span suppressHydrationWarning>
+            <kbd className="font-mono">ESC</kbd> {t.search.close}
+          </span>
+        )}
       </div>
     </>
   );

package/app/hooks/useComposerVerticalResize.ts

@@ -0,0 +1,74 @@
+'use client';
+
+import { useCallback, type PointerEvent as ReactPointerEvent } from 'react';
+
+export interface UseComposerVerticalResizeOptions {
+  minHeight: number;
+  maxHeightAbs: number;
+  maxHeightViewportRatio: number;
+  getHeight: () => number;
+  setHeight: (h: number) => void;
+  persist: (h: number) => void;
+}
+
+/**
+ * Drag the top edge of a composer upward to grow height (panel input UX).
+ * Uses pointer capture so drag ends reliably (window exit, touch, pointercancel).
+ */
+export function useComposerVerticalResize({
+  minHeight,
+  maxHeightAbs,
+  maxHeightViewportRatio,
+  getHeight,
+  setHeight,
+  persist,
+}: UseComposerVerticalResizeOptions) {
+  const onPointerDown = useCallback(
+    (e: ReactPointerEvent<HTMLElement>) => {
+      if (e.pointerType === 'mouse' && e.button !== 0) return;
+      e.preventDefault();
+      const el = e.currentTarget;
+      el.setPointerCapture(e.pointerId);
+
+      const pointerId = e.pointerId;
+      const startY = e.clientY;
+      const startH = getHeight();
+      let currentH = startH;
+
+      const maxH = () => Math.min(maxHeightAbs, Math.floor(window.innerHeight * maxHeightViewportRatio));
+
+      document.body.classList.add('select-none');
+      document.body.style.cursor = 'ns-resize';
+
+      const onMove = (ev: PointerEvent) => {
+        if (ev.pointerId !== pointerId) return;
+        const dy = startY - ev.clientY;
+        const next = Math.round(Math.max(minHeight, Math.min(maxH(), startH + dy)));
+        currentH = next;
+        setHeight(next);
+      };
+
+      const onUpOrCancel = (ev: PointerEvent) => {
+        if (ev.pointerId !== pointerId) return;
+        document.body.classList.remove('select-none');
+        document.body.style.cursor = '';
+        el.removeEventListener('pointermove', onMove);
+        el.removeEventListener('pointerup', onUpOrCancel);
+        el.removeEventListener('pointercancel', onUpOrCancel);
+        try {
+          el.releasePointerCapture(pointerId);
+        } catch {
+          /* already released */
+        }
+        persist(currentH);
+      };
+
+      el.addEventListener('pointermove', onMove);
+      el.addEventListener('pointerup', onUpOrCancel);
+      el.addEventListener('pointercancel', onUpOrCancel);
+    },
+    [minHeight, maxHeightAbs, maxHeightViewportRatio, getHeight, setHeight, persist],
+  );
+
+  return onPointerDown;
+}

package/app/lib/actions.ts

@@ -1,6 +1,7 @@
 'use server';
 
-import { createFile, deleteFile, renameFile } from '@/lib/fs';
+import { createFile, deleteFile, deleteDirectory, convertToSpace, renameFile, renameSpace, getMindRoot, invalidateCache } from '@/lib/fs';
+import { createSpaceFilesystem } from '@/lib/core/create-space';
 import { revalidatePath } from 'next/cache';
 
 export async function createFileAction(dirPath: string, fileName: string): Promise<{ success: boolean; filePath?: string; error?: string }> {
@@ -39,6 +40,55 @@ export async function renameFileAction(oldPath: string, newName: string): Promis
   }
 }
 
+export async function convertToSpaceAction(
+  dirPath: string,
+): Promise<{ success: boolean; error?: string }> {
+  try {
+    convertToSpace(dirPath);
+    revalidatePath('/', 'layout');
+    return { success: true };
+  } catch (err) {
+    return { success: false, error: err instanceof Error ? err.message : 'Failed to convert to space' };
+  }
+}
+
+export async function deleteFolderAction(
+  dirPath: string,
+): Promise<{ success: boolean; error?: string }> {
+  try {
+    deleteDirectory(dirPath);
+    revalidatePath('/', 'layout');
+    return { success: true };
+  } catch (err) {
+    return { success: false, error: err instanceof Error ? err.message : 'Failed to delete folder' };
+  }
+}
+
+export async function renameSpaceAction(
+  spacePath: string,
+  newName: string,
+): Promise<{ success: boolean; newPath?: string; error?: string }> {
+  try {
+    const newPath = renameSpace(spacePath, newName);
+    revalidatePath('/', 'layout');
+    return { success: true, newPath };
+  } catch (err) {
+    return { success: false, error: err instanceof Error ? err.message : 'Failed to rename space' };
+  }
+}
+
+export async function deleteSpaceAction(
+  spacePath: string,
+): Promise<{ success: boolean; error?: string }> {
+  try {
+    deleteDirectory(spacePath);
+    revalidatePath('/', 'layout');
+    return { success: true };
+  } catch (err) {
+    return { success: false, error: err instanceof Error ? err.message : 'Failed to delete space' };
+  }
+}
+
 /**
  * Create a new Mind Space (top-level directory) with README.md + auto-scaffolded INSTRUCTION.md.
  * The description is written into README.md so it appears on the homepage Space card
@@ -50,34 +100,12 @@ export async function createSpaceAction(
   parentPath: string = ''
 ): Promise<{ success: boolean; path?: string; error?: string }> {
   try {
-    const trimmed = name.trim();
-    if (!trimmed) return { success: false, error: 'Space name is required' };
-    if (trimmed.includes('/') || trimmed.includes('\\')) {
-      return { success: false, error: 'Space name must not contain path separators' };
-    }
-
-    // Sanitize parentPath — reject traversal attempts
-    const cleanParent = parentPath.replace(/\/+$/, '').trim();
-    if (cleanParent.includes('..') || cleanParent.startsWith('/') || cleanParent.includes('\\')) {
-      return { success: false, error: 'Invalid parent path' };
-    }
-
-    // Build full path: parentPath + name
-    const prefix = cleanParent ? cleanParent + '/' : '';
-    const fullPath = `${prefix}${trimmed}`;
-
-    // Strip emoji for clean title in README content
-    const cleanName = trimmed.replace(/^[\p{Emoji_Presentation}\p{Extended_Pictographic}\s]+/u, '') || trimmed;
-    const desc = description.trim() || '(Describe the purpose and usage of this space.)';
-    const readmeContent = `# ${cleanName}\n\n${desc}\n\n## 📁 Structure\n\n\`\`\`bash\n${fullPath}/\n├── INSTRUCTION.md\n├── README.md\n└── (your files here)\n\`\`\`\n\n## 💡 Usage\n\n(Add usage guidelines for this space.)\n`;
-
-    // createFile triggers scaffoldIfNewSpace → auto-generates INSTRUCTION.md
-    createFile(`${fullPath}/README.md`, readmeContent);
+    const { path: fullPath } = createSpaceFilesystem(getMindRoot(), name, description, parentPath);
+    invalidateCache();
     revalidatePath('/', 'layout');
     return { success: true, path: fullPath };
   } catch (err) {
     const msg = err instanceof Error ? err.message : 'Failed to create space';
-    // Make "already exists" error more user-friendly
     if (msg.includes('already exists')) {
       return { success: false, error: 'A space with this name already exists' };
     }

package/app/lib/core/create-space.ts

@@ -0,0 +1,36 @@
+import { MindOSError, ErrorCodes } from '@/lib/errors';
+import { createFile } from './fs-ops';
+
+/**
+ * Create a Mind Space on disk: `{fullPath}/README.md` plus scaffold from {@link createFile} / scaffoldIfNewSpace.
+ * Caller must invalidate app file-tree cache (e.g. `invalidateCache()` in `lib/fs.ts`).
+ */
+export function createSpaceFilesystem(
+  mindRoot: string,
+  name: string,
+  description: string,
+  parentPath = '',
+): { path: string } {
+  const trimmed = name.trim();
+  if (!trimmed) {
+    throw new MindOSError(ErrorCodes.INVALID_REQUEST, 'Space name is required', { name });
+  }
+  if (trimmed.includes('/') || trimmed.includes('\\')) {
+    throw new MindOSError(ErrorCodes.INVALID_PATH, 'Space name must not contain path separators', { name: trimmed });
+  }
+
+  const cleanParent = parentPath.replace(/\/+$/, '').trim();
+  if (cleanParent.includes('..') || cleanParent.startsWith('/') || cleanParent.includes('\\')) {
+    throw new MindOSError(ErrorCodes.INVALID_PATH, 'Invalid parent path', { parentPath });
+  }
+
+  const prefix = cleanParent ? `${cleanParent}/` : '';
+  const fullPath = `${prefix}${trimmed}`;
+
+  const cleanName = trimmed.replace(/^[\p{Emoji_Presentation}\p{Extended_Pictographic}\s]+/u, '') || trimmed;
+  const desc = description.trim() || '(Describe the purpose and usage of this space.)';
+  const readmeContent = `# ${cleanName}\n\n${desc}\n\n## 📁 Structure\n\n\`\`\`bash\n${fullPath}/\n├── INSTRUCTION.md\n├── README.md\n└── (your files here)\n\`\`\`\n\n## 💡 Usage\n\n(Add usage guidelines for this space.)\n`;
+
+  createFile(mindRoot, `${fullPath}/README.md`, readmeContent);
+  return { path: fullPath };
+}