@geminilight/mindos 0.6.15 → 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);
@@ -78,7 +80,7 @@ body {
   --amber-text: #9a6a2b;
   --amber-dim: rgba(200, 135, 58, 0.18);
   --amber-subtle: rgba(200, 135, 30, 0.08);
-  --amber-foreground: #131210;
+  --amber-foreground: #ffffff;
   --success: #7aad80;
   --error: #c85050;
   --sidebar: #ede9e1;
@@ -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);
@@ -114,7 +117,7 @@ body {
   --amber-text: #e0a85e;
   --amber-dim: rgba(212, 149, 74, 0.20);
   --amber-subtle: rgba(212, 149, 74, 0.10);
-  --amber-foreground: #131210;
+  --amber-foreground: #ffffff;
   --success: #7aad80;
   --error: #c85050;
   --sidebar: #1c1a17;
@@ -434,6 +437,53 @@ a:focus-visible,
   outline: none;
 }
 
+/* ── Styled form controls ──────────────────────────────────── */
+
+input[type="checkbox"].form-check {
+  appearance: none;
+  width: 14px; height: 14px;
+  flex-shrink: 0;
+  border-radius: 3px;
+  border: 1px solid var(--border);
+  background: var(--background);
+  cursor: pointer;
+  transition: background-color 0.15s, border-color 0.15s;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100% 100%;
+}
+input[type="checkbox"].form-check:checked {
+  background-color: var(--amber);
+  border-color: var(--amber);
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
+}
+input[type="checkbox"].form-check:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--ring);
+}
+input[type="checkbox"].form-check:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+input[type="radio"].form-radio {
+  appearance: none;
+  width: 14px; height: 14px;
+  flex-shrink: 0;
+  border-radius: 9999px;
+  border: 1px solid var(--border);
+  background: var(--background);
+  cursor: pointer;
+  transition: border-color 0.15s;
+}
+input[type="radio"].form-radio:checked {
+  border: 4px solid var(--amber);
+}
+input[type="radio"].form-radio:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--ring);
+}
+
 /* macOS Electron: traffic-light safe zone. Actual CSS is injected by Electron
    main process via webContents.insertCSS(); this is a no-op fallback. */
 .electron-mac-titlebar-pad { display: none; }

package/app/app/page.tsx

@@ -34,20 +34,6 @@ function extractDescription(spacePath: string): string {
   return '';
 }
 
-/** Recursively collect all directory paths from the file tree */
-function collectDirPaths(nodes: FileNode[], prefix = ''): string[] {
-  const result: string[] = [];
-  for (const n of nodes) {
-    if (n.type === 'directory' && !n.name.startsWith('.')) {
-      const path = prefix ? `${prefix}/${n.name}` : n.name;
-      result.push(path);
-      if (n.children) {
-        result.push(...collectDirPaths(n.children, path));
-      }
-    }
-  }
-  return result;
-}
 
 function getTopLevelDirs(): SpaceInfo[] {
   try {
@@ -90,9 +76,5 @@ export default function HomePage() {
 
   const spaces = getTopLevelDirs();
 
-  // Collect all directory paths for hierarchical space creation
-  let dirPaths: string[] = [];
-  try { dirPaths = collectDirPaths(getFileTree()); } catch { /* ignore */ }
-
-  return <HomeContent recent={recent} existingFiles={existingFiles} spaces={spaces} dirPaths={dirPaths} />;
+  return <HomeContent recent={recent} existingFiles={existingFiles} spaces={spaces} />;
 }

package/app/components/CreateSpaceModal.tsx

@@ -168,7 +168,7 @@ export default function CreateSpaceModal({ t, dirPaths }: { t: ReturnType<typeof
       >
         {/* Header */}
         <div className="flex items-center justify-between px-5 pt-5 pb-3">
-          <h3 className="text-sm font-semibold font-display text-foreground">{h.newSpace}</h3>
+          <h3 className="text-base font-semibold font-display text-foreground">{h.newSpace}</h3>
           <button onClick={close} className="p-1 rounded-md text-muted-foreground hover:bg-muted transition-colors">
             <X size={14} />
           </button>
@@ -214,7 +214,7 @@ export default function CreateSpaceModal({ t, dirPaths }: { t: ReturnType<typeof
               onChange={e => setDescription(e.target.value)}
               placeholder={h.spaceDescPlaceholder ?? 'Describe the purpose of this space'}
               maxLength={200}
-              className="w-full px-3 py-2 text-sm rounded-lg border border-border bg-background text-muted-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring transition-colors"
+              className="w-full px-3 py-2 text-sm rounded-lg border border-border bg-background text-foreground placeholder:text-muted-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring transition-colors"
             />
           </div>
           {/* AI initialization toggle */}
@@ -268,7 +268,7 @@ export default function CreateSpaceModal({ t, dirPaths }: { t: ReturnType<typeof
             <button
               onClick={handleCreate}
               disabled={!name.trim() || loading || !!nameHint}
-              className="flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium bg-[var(--amber)] text-white transition-colors hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed"
+              className="flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium bg-[var(--amber)] text-[var(--amber-foreground)] transition-colors hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed"
             >
               {loading && <Loader2 size={14} className="animate-spin" />}
               {h.createSpace}

package/app/components/CustomSelect.tsx

@@ -0,0 +1,256 @@
+'use client';
+
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { ChevronDown, Check } from 'lucide-react';
+
+export interface SelectOption {
+  value: string;
+  label: string;
+  icon?: React.ReactNode;
+  suffix?: React.ReactNode;
+}
+
+export interface SelectOptionGroup {
+  label: string;
+  options: SelectOption[];
+}
+
+export type SelectItem = SelectOption | SelectOptionGroup;
+
+function isGroup(item: SelectItem): item is SelectOptionGroup {
+  return 'options' in item;
+}
+
+function flatOptions(items: SelectItem[]): SelectOption[] {
+  const result: SelectOption[] = [];
+  for (const item of items) {
+    if (isGroup(item)) result.push(...item.options);
+    else result.push(item);
+  }
+  return result;
+}
+
+interface CustomSelectProps {
+  value: string;
+  onChange: (value: string) => void;
+  options: SelectItem[];
+  className?: string;
+  /** 'sm' for inline/compact, 'md' (default) for form fields */
+  size?: 'sm' | 'md';
+  placeholder?: string;
+}
+
+export default function CustomSelect({
+  value,
+  onChange,
+  options,
+  className = '',
+  size = 'md',
+  placeholder,
+}: CustomSelectProps) {
+  const [open, setOpen] = useState(false);
+  const [highlightIdx, setHighlightIdx] = useState(-1);
+  const [panelPos, setPanelPos] = useState<{ top: number; left: number; width: number; flipUp: boolean } | null>(null);
+  const btnRef = useRef<HTMLButtonElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const allOptions = useMemo(() => flatOptions(options), [options]);
+
+  const selectedLabel = useMemo(() => {
+    return allOptions.find(o => o.value === value) ?? null;
+  }, [allOptions, value]);
+
+  const close = useCallback(() => {
+    setOpen(false);
+    setHighlightIdx(-1);
+  }, []);
+
+  const select = useCallback((val: string) => {
+    onChange(val);
+    close();
+  }, [onChange, close]);
+
+  useEffect(() => {
+    if (!open) return;
+    const handleClick = (e: MouseEvent) => {
+      if (
+        btnRef.current && !btnRef.current.contains(e.target as Node) &&
+        listRef.current && !listRef.current.contains(e.target as Node)
+      ) {
+        close();
+      }
+    };
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [open, close]);
+
+  // Keyboard navigation
+  useEffect(() => {
+    if (!open) return;
+    const handleKey = (e: KeyboardEvent) => {
+      switch (e.key) {
+        case 'Escape':
+          e.preventDefault();
+          close();
+          btnRef.current?.focus();
+          break;
+        case 'ArrowDown':
+          e.preventDefault();
+          setHighlightIdx(prev => Math.min(prev + 1, allOptions.length - 1));
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          setHighlightIdx(prev => Math.max(prev - 1, 0));
+          break;
+        case 'Enter':
+          e.preventDefault();
+          if (highlightIdx >= 0 && highlightIdx < allOptions.length) {
+            select(allOptions[highlightIdx].value);
+            btnRef.current?.focus();
+          }
+          break;
+      }
+    };
+    document.addEventListener('keydown', handleKey);
+    return () => document.removeEventListener('keydown', handleKey);
+  }, [open, close, highlightIdx, allOptions, select]);
+
+  // Scroll highlighted option into view
+  useEffect(() => {
+    if (!open || !listRef.current || highlightIdx < 0) return;
+    const el = listRef.current.querySelector(`[data-idx="${highlightIdx}"]`);
+    if (el) el.scrollIntoView({ block: 'nearest' });
+  }, [open, highlightIdx]);
+
+  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) { 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';
+
+  const triggerCls = isSm
+    ? `inline-flex items-center gap-1 appearance-none rounded-md border border-border bg-background text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring transition-colors text-2xs px-1.5 py-0.5 pr-5 ${className}`
+    : `w-full flex items-center gap-2 appearance-none rounded-lg border border-border bg-background text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring transition-colors text-sm px-3 py-2 pr-8 ${className}`;
+
+  const chevronCls = isSm
+    ? '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 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'
+    : 'w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left transition-colors cursor-pointer';
+
+  // Track flat index across groups for keyboard highlight
+  let flatIdx = -1;
+
+  function renderOption(opt: SelectOption) {
+    flatIdx++;
+    const idx = flatIdx;
+    const isSelected = opt.value === value;
+    const isHighlighted = idx === highlightIdx;
+    return (
+      <button
+        key={opt.value}
+        type="button"
+        role="option"
+        aria-selected={isSelected}
+        data-idx={idx}
+        onClick={() => select(opt.value)}
+        onMouseEnter={() => setHighlightIdx(idx)}
+        className={`${itemBaseCls} ${
+          isHighlighted ? 'bg-muted text-foreground' : 'text-foreground'
+        }`}
+      >
+        {opt.icon}
+        <span className="flex-1 truncate">{opt.label}</span>
+        {opt.suffix}
+        {isSelected && <Check size={isSm ? 10 : 12} className="shrink-0 text-[var(--amber)]" />}
+      </button>
+    );
+  }
+
+  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
+        ref={btnRef}
+        type="button"
+        onClick={() => setOpen(v => !v)}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        className={triggerCls}
+      >
+        {selectedLabel?.icon}
+        <span className="flex-1 truncate text-left">
+          {selectedLabel?.label ?? placeholder ?? '—'}
+        </span>
+        {selectedLabel?.suffix}
+        <ChevronDown
+          size={isSm ? 12 : 14}
+          className={`${chevronCls} transition-transform duration-150 ${open ? 'rotate-180' : ''}`}
+        />
+      </button>
+      {listPortal}
+    </div>
+  );
+}

package/app/components/DirPicker.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import { useState, useEffect, useMemo } from 'react';
-import { Folder, ChevronDown, ChevronRight } from 'lucide-react';
+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';
 
 interface DirPickerProps {
@@ -15,16 +16,71 @@ interface DirPickerProps {
   rootLabel?: string;
 }
 
+const PANEL_MAX_H = 200;
+
 /**
- * Hierarchical directory picker — collapsed by default as a single-line button,
- * expands into a mini file browser with breadcrumb navigation.
+ * 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 [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]);
 
+  const calcPosition = useCallback(() => {
+    if (!btnRef.current) return;
+    const rect = btnRef.current.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    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), []);
+
+  useEffect(() => {
+    if (!expanded) return;
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') { e.preventDefault(); collapse(); }
+    };
+    const handleClick = (e: MouseEvent) => {
+      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);
+    return () => {
+      document.removeEventListener('keydown', handleKey);
+      document.removeEventListener('mousedown', handleClick);
+    };
+  }, [expanded, collapse]);
+
   const children = useMemo(() => {
     const prefix = browsing ? browsing + '/' : '';
     return dirPaths
@@ -52,22 +108,19 @@ export default function DirPicker({ dirPaths, value, onChange, rootLabel = 'Root
     ? value.split('/').map(s => stripEmoji(s)).join(' / ')
     : '/ ' + rootLabel;
 
-  if (!expanded) {
-    return (
-      <button
-        type="button"
-        onClick={() => setExpanded(true)}
-        className="w-full flex items-center gap-2 px-3 py-2 text-sm rounded-lg border border-border bg-background text-foreground hover:border-[var(--amber)]/40 transition-colors text-left"
-      >
-        <Folder size={14} className="shrink-0 text-[var(--amber)]" />
-        <span className="flex-1 truncate">{displayLabel}</span>
-        <ChevronDown size={14} className="shrink-0 text-muted-foreground" />
-      </button>
-    );
-  }
-
-  return (
-    <div className="rounded-lg border border-[var(--amber)] bg-background overflow-hidden max-h-[200px] flex flex-col">
+  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
@@ -117,14 +170,38 @@ export default function DirPicker({ dirPaths, value, onChange, rootLabel = 'Root
       ) : (
         <div className="px-3 py-2 text-xs text-muted-foreground/50 text-center">—</div>
       )}
-      {/* Collapse */}
+      {/* Confirm & collapse */}
       <button
         type="button"
-        onClick={() => setExpanded(false)}
-        className="w-full py-1.5 text-xs font-medium text-[var(--amber)] border-t border-border hover:bg-muted/30 transition-colors shrink-0"
+        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 (
+    <>
+      <button
+        ref={btnRef}
+        type="button"
+        onClick={() => setExpanded(v => !v)}
+        aria-haspopup="true"
+        aria-expanded={expanded}
+        className={`w-full flex items-center gap-2 px-3 py-2 text-sm rounded-lg border bg-background text-foreground transition-colors text-left focus-visible:ring-1 focus-visible:ring-ring outline-none ${
+          expanded ? 'border-[var(--amber)]' : 'border-border hover:border-[var(--amber)]/40'
+        }`}
+      >
+        <Folder size={14} className="shrink-0 text-[var(--amber)]" />
+        <span className="flex-1 truncate">{displayLabel}</span>
+        <ChevronDown
+          size={14}
+          className={`shrink-0 text-muted-foreground transition-transform duration-150 ${expanded ? 'rotate-180' : ''}`}
+        />
       </button>
-    </div>
+      {panel}
+    </>
   );
 }