@geminilight/mindos 0.6.16 → 0.6.17

package/app/app/globals.css

@@ -26,6 +26,7 @@
   --color-input: var(--input);
   --color-border: var(--border);
   --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
   --color-success: var(--success);
   --color-error: var(--error);
   --color-amber-foreground: var(--amber-foreground);
@@ -69,7 +70,8 @@ body {
   --muted-foreground: #685f52;
   --accent: #d9d3c6;
   --accent-foreground: #1c1a17;
-  --destructive: oklch(0.58 0.22 27);
+  --destructive: oklch(0.56 0.14 24);
+  --destructive-foreground: #ffffff;
   --border: rgba(28, 26, 23, 0.1);
   --input: rgba(28, 26, 23, 0.12);
   --ring: var(--amber);
@@ -106,7 +108,8 @@ body {
   --muted-foreground: #8a8275;
   --accent: #2e2b22;
   --accent-foreground: #e8e4dc;
-  --destructive: oklch(0.704 0.191 22.216);
+  --destructive: oklch(0.56 0.14 22);
+  --destructive-foreground: #ffffff;
   --border: rgba(232, 228, 220, 0.08);
   --input: rgba(232, 228, 220, 0.1);
   --ring: var(--amber);

package/app/components/CustomSelect.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { createPortal } from 'react-dom';
 import { ChevronDown, Check } from 'lucide-react';
 
 export interface SelectOption {
@@ -50,7 +51,7 @@ export default function CustomSelect({
 }: CustomSelectProps) {
   const [open, setOpen] = useState(false);
   const [highlightIdx, setHighlightIdx] = useState(-1);
-  const [flipUp, setFlipUp] = useState(false);
+  const [panelPos, setPanelPos] = useState<{ top: number; left: number; width: number; flipUp: boolean } | null>(null);
   const btnRef = useRef<HTMLButtonElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
 
@@ -122,20 +123,33 @@ export default function CustomSelect({
     if (el) el.scrollIntoView({ block: 'nearest' });
   }, [open, highlightIdx]);
 
-  // Initialize highlight + flip direction when opening
+  const calcPosition = useCallback(() => {
+    if (!btnRef.current) return;
+    const rect = btnRef.current.getBoundingClientRect();
+    const maxH = size === 'sm' ? 200 : 260;
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    setPanelPos({
+      top: spaceBelow < maxH + 8 && spaceAbove > spaceBelow ? rect.top : rect.bottom,
+      left: rect.left,
+      width: rect.width,
+      flipUp: spaceBelow < maxH + 8 && spaceAbove > spaceBelow,
+    });
+  }, [size]);
+
+  // Initialize highlight + position when opening; reposition on scroll/resize
   useEffect(() => {
-    if (open) {
-      const idx = allOptions.findIndex(o => o.value === value);
-      setHighlightIdx(idx >= 0 ? idx : 0);
-      if (btnRef.current) {
-        const rect = btnRef.current.getBoundingClientRect();
-        const maxH = size === 'sm' ? 200 : 260;
-        const spaceBelow = window.innerHeight - rect.bottom;
-        const spaceAbove = rect.top;
-        setFlipUp(spaceBelow < maxH + 8 && spaceAbove > spaceBelow);
-      }
-    }
-  }, [open, allOptions, value, size]);
+    if (!open) { setPanelPos(null); return; }
+    const idx = allOptions.findIndex(o => o.value === value);
+    setHighlightIdx(idx >= 0 ? idx : 0);
+    calcPosition();
+    window.addEventListener('scroll', calcPosition, true);
+    window.addEventListener('resize', calcPosition);
+    return () => {
+      window.removeEventListener('scroll', calcPosition, true);
+      window.removeEventListener('resize', calcPosition);
+    };
+  }, [open, allOptions, value, calcPosition]);
 
   const isSm = size === 'sm';
 
@@ -147,9 +161,9 @@ export default function CustomSelect({
     ? 'absolute right-1 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none'
     : 'absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none';
 
-  const listCls = isSm
-    ? `absolute z-50 min-w-full max-h-[200px] overflow-y-auto rounded-md border border-border bg-card shadow-lg py-0.5 ${flipUp ? 'bottom-full mb-1' : 'top-full mt-1'}`
-    : `absolute z-50 min-w-full max-h-[260px] overflow-y-auto rounded-lg border border-border bg-card shadow-lg py-1 ${flipUp ? 'bottom-full mb-1' : 'top-full mt-1'}`;
+  const listBaseCls = isSm
+    ? 'fixed z-[9999] overflow-y-auto rounded-md border border-border bg-card shadow-lg py-0.5'
+    : 'fixed z-[9999] overflow-y-auto rounded-lg border border-border bg-card shadow-lg py-1';
 
   const itemBaseCls = isSm
     ? 'w-full flex items-center gap-1.5 px-2 py-1 text-2xs text-left transition-colors cursor-pointer'
@@ -184,6 +198,38 @@ export default function CustomSelect({
     );
   }
 
+  const listPortal = open && panelPos && createPortal(
+    <div
+      ref={listRef}
+      className={listBaseCls}
+      role="listbox"
+      style={{
+        left: panelPos.left,
+        minWidth: panelPos.width,
+        maxHeight: isSm ? 200 : 260,
+        ...(panelPos.flipUp
+          ? { bottom: window.innerHeight - panelPos.top + 4 }
+          : { top: panelPos.top + 4 }),
+      }}
+    >
+      {options.map((item, idx) => {
+        if (isGroup(item)) {
+          return (
+            <div key={item.label}>
+              {idx > 0 && <div className="my-0.5 border-t border-border/50" />}
+              <div className={`py-1 text-2xs font-medium text-muted-foreground uppercase tracking-wider ${isSm ? 'px-2' : 'px-3'}`}>
+                {item.label}
+              </div>
+              {item.options.map(renderOption)}
+            </div>
+          );
+        }
+        return renderOption(item);
+      })}
+    </div>,
+    document.body,
+  );
+
   return (
     <div className="relative">
       <button
@@ -204,25 +250,7 @@ export default function CustomSelect({
           className={`${chevronCls} transition-transform duration-150 ${open ? 'rotate-180' : ''}`}
         />
       </button>
-
-      {open && (
-        <div ref={listRef} className={listCls} role="listbox">
-          {options.map((item, idx) => {
-            if (isGroup(item)) {
-              return (
-                <div key={item.label}>
-                  {idx > 0 && <div className="my-0.5 border-t border-border/50" />}
-                  <div className={`py-1 text-2xs font-medium text-muted-foreground uppercase tracking-wider ${isSm ? 'px-2' : 'px-3'}`}>
-                    {item.label}
-                  </div>
-                  {item.options.map(renderOption)}
-                </div>
-              );
-            }
-            return renderOption(item);
-          })}
-        </div>
-      )}
+      {listPortal}
     </div>
   );
 }

package/app/components/DirPicker.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
+import { createPortal } from 'react-dom';
 import { Folder, ChevronDown, ChevronRight, Check } from 'lucide-react';
 import { stripEmoji } from '@/lib/utils';
 
@@ -18,27 +19,44 @@ interface DirPickerProps {
 const PANEL_MAX_H = 200;
 
 /**
- * Hierarchical directory picker — always renders as a single-line trigger button.
- * When expanded, the tree browser floats as an overlay (absolute) so it never
- * pushes sibling content down.
+ * Hierarchical directory picker — trigger button stays in layout flow;
+ * the expanded panel renders via portal with position:fixed so it escapes
+ * any ancestor overflow:hidden / overflow:auto containers.
  */
 export default function DirPicker({ dirPaths, value, onChange, rootLabel = 'Root' }: DirPickerProps) {
   const [expanded, setExpanded] = useState(false);
   const [browsing, setBrowsing] = useState(value);
-  const [flipUp, setFlipUp] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
+  const [panelPos, setPanelPos] = useState<{ top: number; left: number; width: number; flipUp: boolean } | null>(null);
   const btnRef = useRef<HTMLButtonElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => { setBrowsing(value); }, [value]);
 
-  // Decide flip direction when opening
-  useEffect(() => {
-    if (!expanded || !btnRef.current) return;
+  const calcPosition = useCallback(() => {
+    if (!btnRef.current) return;
     const rect = btnRef.current.getBoundingClientRect();
     const spaceBelow = window.innerHeight - rect.bottom;
     const spaceAbove = rect.top;
-    setFlipUp(spaceBelow < PANEL_MAX_H + 8 && spaceAbove > spaceBelow);
-  }, [expanded]);
+    const flip = spaceBelow < PANEL_MAX_H + 8 && spaceAbove > spaceBelow;
+    setPanelPos({
+      top: flip ? rect.top : rect.bottom,
+      left: rect.left,
+      width: rect.width,
+      flipUp: flip,
+    });
+  }, []);
+
+  // Recalculate position on open, scroll, and resize
+  useEffect(() => {
+    if (!expanded) { setPanelPos(null); return; }
+    calcPosition();
+    window.addEventListener('scroll', calcPosition, true);
+    window.addEventListener('resize', calcPosition);
+    return () => {
+      window.removeEventListener('scroll', calcPosition, true);
+      window.removeEventListener('resize', calcPosition);
+    };
+  }, [expanded, calcPosition]);
 
   const collapse = useCallback(() => setExpanded(false), []);
 
@@ -48,9 +66,12 @@ export default function DirPicker({ dirPaths, value, onChange, rootLabel = 'Root
       if (e.key === 'Escape') { e.preventDefault(); collapse(); }
     };
     const handleClick = (e: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-        collapse();
-      }
+      const target = e.target as Node;
+      if (
+        btnRef.current?.contains(target) ||
+        panelRef.current?.contains(target)
+      ) return;
+      collapse();
     };
     document.addEventListener('keydown', handleKey);
     document.addEventListener('mousedown', handleClick);
@@ -87,9 +108,82 @@ export default function DirPicker({ dirPaths, value, onChange, rootLabel = 'Root
     ? value.split('/').map(s => stripEmoji(s)).join(' / ')
     : '/ ' + rootLabel;
 
+  const panel = expanded && panelPos && createPortal(
+    <div
+      ref={panelRef}
+      className="fixed z-[9999] rounded-lg border border-[var(--amber)] bg-card shadow-lg overflow-hidden flex flex-col"
+      style={{
+        left: panelPos.left,
+        width: panelPos.width,
+        maxHeight: PANEL_MAX_H,
+        ...(panelPos.flipUp
+          ? { bottom: window.innerHeight - panelPos.top + 4 }
+          : { top: panelPos.top + 4 }),
+      }}
+    >
+      {/* Breadcrumb */}
+      <div className="flex items-center gap-0.5 px-3 py-1.5 bg-muted/30 border-b border-border overflow-x-auto text-xs shrink-0">
+        <button
+          type="button"
+          onClick={() => navigateTo(-1)}
+          className={`shrink-0 px-1.5 py-0.5 rounded transition-colors ${
+            browsing === '' ? 'text-[var(--amber)] font-medium' : 'text-muted-foreground hover:text-foreground'
+          }`}
+        >
+          / {rootLabel}
+        </button>
+        {segments.map((seg, i) => (
+          <span key={i} className="flex items-center gap-0.5 shrink-0">
+            <ChevronRight size={10} className="text-muted-foreground/50" />
+            <button
+              type="button"
+              onClick={() => navigateTo(i)}
+              className={`px-1.5 py-0.5 rounded transition-colors truncate max-w-[100px] ${
+                i === segments.length - 1 ? 'text-[var(--amber)] font-medium' : 'text-muted-foreground hover:text-foreground'
+              }`}
+            >
+              {seg}
+            </button>
+          </span>
+        ))}
+      </div>
+      {/* Child directories */}
+      {children.length > 0 ? (
+        <div className="flex-1 min-h-0 overflow-y-auto">
+          {children.map(childPath => {
+            const childName = childPath.split('/').pop() || childPath;
+            const hasChildren = dirPaths.some(p => p.startsWith(childPath + '/'));
+            return (
+              <button
+                key={childPath}
+                type="button"
+                onClick={() => drillInto(childPath)}
+                className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-foreground hover:bg-muted/60 transition-colors"
+              >
+                <Folder size={12} className="shrink-0 text-[var(--amber)]" />
+                <span className="flex-1 text-left truncate">{childName}</span>
+                {hasChildren && <ChevronRight size={11} className="shrink-0 text-muted-foreground/40" />}
+              </button>
+            );
+          })}
+        </div>
+      ) : (
+        <div className="px-3 py-2 text-xs text-muted-foreground/50 text-center">—</div>
+      )}
+      {/* Confirm & collapse */}
+      <button
+        type="button"
+        onClick={collapse}
+        className="w-full py-1.5 flex items-center justify-center gap-1 text-xs font-medium text-[var(--amber)] border-t border-border hover:bg-muted/30 transition-colors shrink-0"
+      >
+        <Check size={12} />
+      </button>
+    </div>,
+    document.body,
+  );
+
   return (
-    <div ref={containerRef} className="relative">
-      {/* Trigger — always in document flow */}
+    <>
       <button
         ref={btnRef}
         type="button"
@@ -107,71 +201,7 @@ export default function DirPicker({ dirPaths, value, onChange, rootLabel = 'Root
           className={`shrink-0 text-muted-foreground transition-transform duration-150 ${expanded ? 'rotate-180' : ''}`}
         />
       </button>
-
-      {/* Floating panel — absolute, never pushes content */}
-      {expanded && (
-        <div className={`absolute z-50 left-0 right-0 rounded-lg border border-[var(--amber)] bg-card shadow-lg overflow-hidden max-h-[200px] flex flex-col ${
-          flipUp ? 'bottom-full mb-1' : 'top-full mt-1'
-        }`}>
-          {/* Breadcrumb */}
-          <div className="flex items-center gap-0.5 px-3 py-1.5 bg-muted/30 border-b border-border overflow-x-auto text-xs shrink-0">
-            <button
-              type="button"
-              onClick={() => navigateTo(-1)}
-              className={`shrink-0 px-1.5 py-0.5 rounded transition-colors ${
-                browsing === '' ? 'text-[var(--amber)] font-medium' : 'text-muted-foreground hover:text-foreground'
-              }`}
-            >
-              / {rootLabel}
-            </button>
-            {segments.map((seg, i) => (
-              <span key={i} className="flex items-center gap-0.5 shrink-0">
-                <ChevronRight size={10} className="text-muted-foreground/50" />
-                <button
-                  type="button"
-                  onClick={() => navigateTo(i)}
-                  className={`px-1.5 py-0.5 rounded transition-colors truncate max-w-[100px] ${
-                    i === segments.length - 1 ? 'text-[var(--amber)] font-medium' : 'text-muted-foreground hover:text-foreground'
-                  }`}
-                >
-                  {seg}
-                </button>
-              </span>
-            ))}
-          </div>
-          {/* Child directories */}
-          {children.length > 0 ? (
-            <div className="flex-1 min-h-0 overflow-y-auto">
-              {children.map(childPath => {
-                const childName = childPath.split('/').pop() || childPath;
-                const hasChildren = dirPaths.some(p => p.startsWith(childPath + '/'));
-                return (
-                  <button
-                    key={childPath}
-                    type="button"
-                    onClick={() => drillInto(childPath)}
-                    className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-foreground hover:bg-muted/60 transition-colors"
-                  >
-                    <Folder size={12} className="shrink-0 text-[var(--amber)]" />
-                    <span className="flex-1 text-left truncate">{childName}</span>
-                    {hasChildren && <ChevronRight size={11} className="shrink-0 text-muted-foreground/40" />}
-                  </button>
-                );
-              })}
-            </div>
-          ) : (
-            <div className="px-3 py-2 text-xs text-muted-foreground/50 text-center">—</div>
-          )}
-          {/* Confirm & collapse */}
-          <button
-            type="button"
-            onClick={collapse}
-            className="w-full py-1.5 flex items-center justify-center gap-1 text-xs font-medium text-[var(--amber)] border-t border-border hover:bg-muted/30 transition-colors shrink-0"
-          >
-            <Check size={12} />
-          </button>
-        </div>
-      )}
-    </div>
+      {panel}
+    </>
   );
 }

package/app/components/ImportModal.tsx

@@ -73,11 +73,18 @@ export default function ImportModal({ open, onClose, defaultSpace, initialFiles,
   useEffect(() => {
     if (!open) return;
     const handler = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') { e.stopPropagation(); handleClose(); }
+      if (e.key !== 'Escape') return;
+      if (showDiscard) {
+        e.stopPropagation();
+        setShowDiscard(false);
+        return;
+      }
+      e.stopPropagation();
+      handleClose();
     };
     window.addEventListener('keydown', handler, true);
     return () => window.removeEventListener('keydown', handler, true);
-  }, [open, handleClose]);
+  }, [open, handleClose, showDiscard]);
 
   const checkConflicts = useCallback(async (fileNames: string[], space: string) => {
     try {
@@ -197,15 +204,6 @@ export default function ImportModal({ open, onClose, defaultSpace, initialFiles,
 
   return (
     <>
-      <ConfirmDialog
-        open={showDiscard}
-        title={t.fileImport.discardTitle}
-        message={t.fileImport.discardMessage(im.files.length)}
-        confirmLabel={t.fileImport.discardConfirm}
-        cancelLabel={t.fileImport.discardCancel}
-        onConfirm={doClose}
-        onCancel={() => setShowDiscard(false)}
-      />
       <div
         ref={overlayRef}
         className={`fixed inset-0 z-50 modal-backdrop flex items-center justify-center p-4 transition-opacity duration-200 ${closing ? 'opacity-0' : 'opacity-100'}`}
@@ -507,6 +505,15 @@ export default function ImportModal({ open, onClose, defaultSpace, initialFiles,
           </div>
         </div>
       </div>
+      <ConfirmDialog
+        open={showDiscard}
+        title={t.fileImport.discardTitle}
+        message={t.fileImport.discardMessage(im.files.length)}
+        confirmLabel={t.fileImport.discardConfirm}
+        cancelLabel={t.fileImport.discardCancel}
+        onConfirm={doClose}
+        onCancel={() => setShowDiscard(false)}
+      />
     </>
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geminilight/mindos",
-  "version": "0.6.16",
+  "version": "0.6.17",
   "description": "MindOS — Human-Agent Collaborative Mind System. Local-first knowledge base that syncs your mind to all AI Agents via MCP.",
   "keywords": [
     "mindos",