@geminilight/mindos 0.6.15 → 0.6.16

package/app/app/globals.css

@@ -78,7 +78,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;
@@ -114,7 +114,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 +434,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,228 @@
+'use client';
+
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+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 [flipUp, setFlipUp] = useState(false);
+  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]);
+
+  // Initialize highlight + flip direction when opening
+  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]);
+
+  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 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 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>
+    );
+  }
+
+  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>
+
+      {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>
+      )}
+    </div>
+  );
+}

package/app/components/DirPicker.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { useState, useEffect, useMemo } from 'react';
-import { Folder, ChevronDown, ChevronRight } from 'lucide-react';
+import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
+import { Folder, ChevronDown, ChevronRight, Check } from 'lucide-react';
 import { stripEmoji } from '@/lib/utils';
 
 interface DirPickerProps {
@@ -15,16 +15,51 @@ 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 — 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.
  */
 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 btnRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => { setBrowsing(value); }, [value]);
 
+  // Decide flip direction when opening
+  useEffect(() => {
+    if (!expanded || !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 collapse = useCallback(() => setExpanded(false), []);
+
+  useEffect(() => {
+    if (!expanded) return;
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') { e.preventDefault(); collapse(); }
+    };
+    const handleClick = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        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,79 +87,91 @@ export default function DirPicker({ dirPaths, value, onChange, rootLabel = 'Root
     ? value.split('/').map(s => stripEmoji(s)).join(' / ')
     : '/ ' + rootLabel;
 
-  if (!expanded) {
-    return (
+  return (
+    <div ref={containerRef} className="relative">
+      {/* Trigger — always in document flow */}
       <button
+        ref={btnRef}
         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"
+        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" />
+        <ChevronDown
+          size={14}
+          className={`shrink-0 text-muted-foreground transition-transform duration-150 ${expanded ? 'rotate-180' : ''}`}
+        />
       </button>
-    );
-  }
 
-  return (
-    <div className="rounded-lg border border-[var(--amber)] bg-background overflow-hidden max-h-[200px] flex flex-col">
-      {/* 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" />
+      {/* 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(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'
+              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'
               }`}
             >
-              {seg}
+              / {rootLabel}
             </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>
-            );
-          })}
+            {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 className="px-3 py-2 text-xs text-muted-foreground/50 text-center">—</div>
       )}
-      {/* 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"
-      >
-        ✓
-      </button>
     </div>
   );
 }