@geminilight/mindos 0.6.51 → 0.6.52

package/_standalone/app/globals.css

@@ -81,7 +81,7 @@ body {
   --amber-dim: rgba(200, 135, 58, 0.18);
   --amber-subtle: rgba(200, 135, 30, 0.08);
   --amber-foreground: #ffffff;
-  --success: #7aad80;
+  --success: #5a8d60;
   --error: #c85050;
   --sidebar: #ede9e1;
   --sidebar-foreground: #1c1a17;

package/_standalone/components/ActivityBar.tsx

@@ -48,7 +48,7 @@ function RailButton({ icon, label, shortcut, active = false, expanded, onClick,
       onClick={onClick}
       aria-pressed={active}
       aria-label={label}
-      title={expanded ? undefined : (shortcut ? `${label} (${shortcut})` : label)}
+      title={shortcut ? `${label} (${shortcut})` : label}
       data-walkthrough={walkthroughId}
       className={`
         relative flex items-center ${expanded ? 'justify-start px-3 w-full' : 'justify-center w-10'} h-10 rounded-md transition-colors

package/_standalone/components/AskFab.tsx

@@ -22,16 +22,16 @@ export default function AskFab({ onToggle, askPanelOpen }: AskFabProps) {
         fixed z-40 bottom-5 right-5
         items-center justify-center
         gap-0 hover:gap-2
-        p-[11px] rounded-xl
+        p-3 rounded-xl
         text-white font-medium text-[13px]
-        shadow-md shadow-amber-900/15
+        shadow-sm shadow-amber-900/10
         transition-all duration-200 ease-out
-        hover:shadow-lg hover:shadow-amber-800/25
+        hover:shadow-md hover:shadow-amber-900/15
         active:scale-95 cursor-pointer overflow-hidden font-display
         ${askPanelOpen ? 'opacity-0 pointer-events-none translate-y-2' : 'opacity-100 translate-y-0'}
       `}
       style={{
-        background: 'linear-gradient(135deg, var(--amber), color-mix(in srgb, var(--amber) 80%, white))',
+        background: 'var(--amber)',
       }}
       title={label}
       aria-label={label}

package/_standalone/components/ExportModal.tsx

@@ -104,13 +104,16 @@ export default function ExportModal({ open, onClose, filePath, isDirectory, file
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm" onClick={state === 'exporting' ? undefined : handleClose}>
       <div
         className="bg-card border border-border rounded-xl shadow-xl max-w-md w-full mx-4 animate-in fade-in-0 zoom-in-95 duration-200"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="export-modal-title"
         onClick={e => e.stopPropagation()}
       >
         {/* Header */}
         <div className="flex items-center justify-between px-5 py-4 border-b border-border">
           <div className="flex items-center gap-2">
             <Download size={15} className="text-[var(--amber)]" />
-            <h3 className="text-sm font-semibold font-display">
+            <h3 id="export-modal-title" className="text-sm font-semibold font-display">
               {isDirectory ? (t.export?.exportSpace ?? 'Export Space') : (t.export?.exportFile ?? 'Export File')}
             </h3>
           </div>

package/_standalone/components/FileTree.tsx

@@ -4,6 +4,7 @@ import { useState, useCallback, useRef, useTransition, useEffect, useSyncExterna
 import { useRouter, usePathname } from 'next/navigation';
 import { FileNode, SYSTEM_FILES, UNDELETABLE_FILES } from '@/lib/types';
 import { encodePath } from '@/lib/utils';
+import { ICON_SIZES } from '@/lib/config/icon-scale';
 import {
   ChevronDown, FileText, Table, Folder, FolderOpen, Plus, Loader2,
   Trash2, Pencil, Layers, ScrollText, FolderInput, Copy, MoreHorizontal, Star, Inbox,
@@ -61,8 +62,8 @@ interface FileTreeProps {
 
 function getIcon(node: FileNode) {
   if (node.type === 'directory') return null;
-  if (node.extension === '.csv') return <Table size={14} className="text-success shrink-0" />;
-  return <FileText size={14} className="text-muted-foreground shrink-0" />;
+  if (node.extension === '.csv') return <Table size={ICON_SIZES.md} className="text-success shrink-0" />;
+  return <FileText size={ICON_SIZES.md} className="text-muted-foreground shrink-0" />;
 }
 
 function getCurrentFilePath(pathname: string): string {
@@ -428,9 +429,10 @@ function DirectoryNode({ node, depth, currentPath, onNavigate, maxOpenDepth, onI
           className="shrink-0 p-1 rounded hover:bg-muted text-muted-foreground transition-colors"
           style={{ marginLeft: `${depth * 12 + 4}px` }}
           aria-label={open ? `Collapse ${node.name}` : `Expand ${node.name}`}
+          aria-expanded={open}
         >
           <span className="block transition-transform duration-150" style={{ transform: open ? 'rotate(0deg)' : 'rotate(-90deg)' }}>
-            <ChevronDown size={13} />
+            <ChevronDown size={ICON_SIZES.xs} />
           </span>
         </button>
         <button
@@ -446,7 +448,7 @@ function DirectoryNode({ node, depth, currentPath, onNavigate, maxOpenDepth, onI
           className={`
             flex-1 flex items-center gap-1.5 px-1 py-1 rounded text-left min-w-0 pr-16
             text-sm transition-colors duration-100
-            hover:bg-muted
+            hover:bg-muted cursor-text
             ${isActive ? 'text-foreground' : 'text-muted-foreground hover:text-foreground'}
           `}
         >
@@ -459,6 +461,9 @@ function DirectoryNode({ node, depth, currentPath, onNavigate, maxOpenDepth, onI
               : <Folder size={14} className="text-yellow-400 shrink-0" />
           }
           <span className="truncate leading-5" suppressHydrationWarning>{node.name}</span>
+          <span className="ml-auto text-xs text-muted-foreground/30 group-hover/dir:text-muted-foreground/60 transition-colors shrink-0 hidden group-hover/dir:inline-flex items-center gap-1">
+            <Pencil size={10} />
+          </span>
           {isSpace && !open && (
             <span className="ml-auto text-xs text-muted-foreground shrink-0 tabular-nums pr-1">{contentCount}</span>
           )}
@@ -659,7 +664,7 @@ function FileNodeItem({ node, depth, currentPath, onNavigate }: {
         data-filepath={node.path}
         className={`
           w-full flex items-center gap-1.5 px-2 py-1 rounded text-left
-          text-sm transition-colors duration-100 cursor-pointer pr-16
+          text-sm transition-colors duration-100 cursor-text pr-16
           ${isActive
             ? 'bg-accent text-foreground'
             : 'hover:bg-muted text-muted-foreground hover:text-foreground'
@@ -669,6 +674,9 @@ function FileNodeItem({ node, depth, currentPath, onNavigate }: {
       >
         {getIcon(node)}
         <span className="truncate leading-5" suppressHydrationWarning>{node.name}</span>
+        <span className="ml-auto text-xs text-muted-foreground/30 group-hover/file:text-muted-foreground/60 transition-colors shrink-0 hidden group-hover/file:inline-flex items-center gap-1">
+          <Pencil size={10} />
+        </span>
         {pinned && <Star size={10} className="shrink-0 fill-[var(--amber)] text-[var(--amber)] opacity-60" />}
       </button>
       <div className="absolute right-1 top-1/2 -translate-y-1/2 hidden group-hover/file:flex items-center gap-0.5">

package/_standalone/components/Panel.tsx

@@ -11,6 +11,7 @@ import PanelHeader from './panels/PanelHeader';
 import { useResizeDrag } from '@/hooks/useResizeDrag';
 import { useLocale } from '@/lib/stores/locale-store';
 import { listTrashAction } from '@/lib/actions';
+import { DEFAULT_LEFT_PANEL_WIDTH, LEFT_PANEL } from '@/lib/config/panel-sizes';
 
 const noop = () => {};
 
@@ -25,18 +26,10 @@ function getMaxDepth(nodes: FileNode[], current = 0): number {
   return max;
 }
 
-const DEFAULT_PANEL_WIDTH: Record<PanelId, number> = {
-  files: 280,
-  search: 280,
-  echo: 280,
-  agents: 280,
-  discover: 280,
-  workflows: 280,
-};
-
-const MIN_PANEL_WIDTH = 240;
-const MAX_PANEL_WIDTH_RATIO = 0.45;
-const MAX_PANEL_WIDTH_ABS = 600;
+const DEFAULT_PANEL_WIDTH = DEFAULT_LEFT_PANEL_WIDTH;
+const MIN_PANEL_WIDTH = LEFT_PANEL.MIN;
+const MAX_PANEL_WIDTH_RATIO = LEFT_PANEL.MAX_RATIO;
+const MAX_PANEL_WIDTH_ABS = LEFT_PANEL.MAX_ABS;
 
 interface PanelProps {
   activePanel: PanelId | null;

package/_standalone/components/RightAgentDetailPanel.tsx

@@ -6,11 +6,12 @@ import { useLocale } from '@/lib/stores/locale-store';
 import { useResizeDrag } from '@/hooks/useResizeDrag';
 import AgentsPanelAgentDetail from '@/components/panels/AgentsPanelAgentDetail';
 import { resolveAgentDetailStatus } from '@/components/panels/agents-panel-resolve-status';
+import { RIGHT_AGENT_DETAIL_PANEL } from '@/lib/config/panel-sizes';
 
-const DEFAULT_WIDTH = 400;
-const MIN_WIDTH = 300;
-const MAX_WIDTH_ABS = 640;
-const MAX_WIDTH_RATIO = 0.42;
+const DEFAULT_WIDTH = RIGHT_AGENT_DETAIL_PANEL.DEFAULT;
+const MIN_WIDTH = RIGHT_AGENT_DETAIL_PANEL.MIN;
+const MAX_WIDTH_ABS = RIGHT_AGENT_DETAIL_PANEL.MAX_ABS;
+const MAX_WIDTH_RATIO = RIGHT_AGENT_DETAIL_PANEL.MAX_RATIO;
 
 interface RightAgentDetailPanelProps {
   open: boolean;

package/_standalone/components/RightAskPanel.tsx

@@ -5,13 +5,14 @@ import { AlertCircle } from 'lucide-react';
 import AskContent from '@/components/ask/AskContent';
 import ErrorBoundary from '@/components/ErrorBoundary';
 import { useResizeDrag } from '@/hooks/useResizeDrag';
+import { RIGHT_ASK_PANEL } from '@/lib/config/panel-sizes';
 
-const DEFAULT_WIDTH = 420;
-const MIN_WIDTH = 400;
-const MAX_WIDTH_ABS = 4000;
+const DEFAULT_WIDTH = RIGHT_ASK_PANEL.DEFAULT;
+const MIN_WIDTH = RIGHT_ASK_PANEL.MIN;
+const MAX_WIDTH_ABS = RIGHT_ASK_PANEL.MAX_ABS;
 const ENTER_SNAP_THRESHOLD = 80;
 const EXIT_SNAP_THRESHOLD = 16;
-const MIN_CONTENT_WIDTH = 360;
+const MIN_CONTENT_WIDTH = RIGHT_ASK_PANEL.MIN_CONTENT;
 
 import type { AcpAgentSelection } from '@/hooks/useAskModal';
 

package/_standalone/components/agents/AgentsPrimitives.tsx

@@ -2,6 +2,7 @@
 
 import { Loader2, Plus, X } from 'lucide-react';
 import { useEffect, useRef } from 'react';
+import { useFocusTrap } from '@/lib/hooks/useFocusTrap';
 
 /* ────────── Pill / Status / Search ────────── */
 
@@ -243,6 +244,9 @@ export function ConfirmDialog({
   variant?: 'destructive' | 'default';
 }) {
   const cancelRef = useRef<HTMLButtonElement>(null);
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  useFocusTrap(dialogRef, open);
 
   useEffect(() => {
     if (open) cancelRef.current?.focus();
@@ -260,10 +264,10 @@ export function ConfirmDialog({
   if (!open) return null;
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center" role="alertdialog" aria-modal="true" aria-label={title}>
+    <div className="fixed inset-0 z-50 flex items-center justify-center" role="alertdialog" aria-modal="true" aria-labelledby="confirm-dialog-title">
       <div className="absolute inset-0 overlay-backdrop" onClick={onCancel} aria-hidden="true" />
-      <div className="relative bg-card border border-border rounded-lg shadow-xl p-5 max-w-sm w-full mx-4 animate-in fade-in zoom-in-95 duration-200">
-        <h3 className="text-sm font-medium text-foreground mb-1.5">{title}</h3>
+      <div ref={dialogRef} className="relative bg-card border border-border rounded-lg shadow-xl p-5 max-w-sm w-full mx-4 animate-in fade-in zoom-in-95 duration-200">
+        <h3 id="confirm-dialog-title" className="text-sm font-medium text-foreground mb-1.5">{title}</h3>
         <p className="text-sm text-muted-foreground mb-4 leading-relaxed">{message}</p>
         <div className="flex justify-end gap-2">
           <button

package/_standalone/components/ask/ProviderModelCapsule.tsx

@@ -29,7 +29,7 @@ interface DropdownPos {
 interface SettingsData {
   ai?: {
     provider?: string;
-    providers?: Record<string, { apiKey?: string; model?: string }>;
+    providers?: Record<string, { apiKey?: string; model?: string; baseUrl?: string }>;
   };
   envOverrides?: Record<string, boolean>;
 }
@@ -55,7 +55,8 @@ export function persistProvider(provider: ProviderId | null): void {
 
 /**
  * Determine which providers are configured (have an API key set via settings or env).
- * Providers with apiKeyFallback (e.g. Ollama) are always considered configured.
+ * Providers with apiKeyFallback (e.g. Ollama) only appear if the user has explicitly
+ * configured them — having an API key, env var, or a saved model/baseUrl entry.
  */
 function getConfiguredProviders(data: SettingsData): ProviderId[] {
   const result: ProviderId[] = [];
@@ -67,7 +68,19 @@ function getConfiguredProviders(data: SettingsData): ProviderId[] {
     const hasSettingsKey = providers[id]?.apiKey === '***set***';
     const envVar = getApiKeyEnvVar(id);
     const hasEnvKey = envVar ? !!env[envVar] : false;
-    if (hasSettingsKey || hasEnvKey || preset.apiKeyFallback) result.push(id);
+
+    if (hasSettingsKey || hasEnvKey) {
+      result.push(id);
+    } else if (preset.apiKeyFallback) {
+      // Local providers (Ollama etc.): only show if user has explicitly configured
+      // them (selected as default, or saved a model/baseUrl), not just because
+      // a fallback key exists and they haven't been touched.
+      const isDefault = data.ai?.provider === id;
+      const cfg = providers[id];
+      if (isDefault || (cfg && (cfg.model || cfg.baseUrl))) {
+        result.push(id);
+      }
+    }
   }
   return result;
 }

package/_standalone/components/settings/AiTab.tsx

@@ -179,6 +179,7 @@ export function AiTab({ data, updateAi, updateAgent, t }: AiTabProps) {
               <ApiKeyInput
                 value={currentConfig.apiKey}
                 onChange={v => patchProvider(provider, { apiKey: v })}
+                labels={{ change: t.settings.ai.keyChange, cancel: t.settings.ai.keyCancel }}
               />
               {preset.signupUrl && !currentConfig.apiKey && !activeEnvKey && (
                 <a

package/_standalone/components/settings/Primitives.tsx

@@ -195,22 +195,103 @@ export function Toggle({ checked, onChange, size = 'md', disabled, title, onClic
   );
 }
 
-export function ApiKeyInput({ value, onChange, placeholder, disabled }: {
+export function ApiKeyInput({ value, onChange, placeholder, disabled, labels }: {
   value: string;
   onChange: (v: string) => void;
   placeholder?: string;
   disabled?: boolean;
+  labels?: { change?: string; cancel?: string };
 }) {
   const isMasked = value === '***set***';
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+  const prevValueRef = useRef(value);
+
+  // Reset editing when the masked value identity changes (e.g. provider switch)
+  useEffect(() => {
+    if (prevValueRef.current !== value) {
+      prevValueRef.current = value;
+      setEditing(false);
+      setDraft('');
+    }
+  }, [value]);
+
+  const commitDraft = useCallback(() => {
+    if (draft.trim()) {
+      onChange(draft);
+    }
+    setEditing(false);
+    setDraft('');
+  }, [draft, onChange]);
+
+  const cancelEdit = useCallback(() => {
+    setEditing(false);
+    setDraft('');
+  }, []);
+
+  const changeLabel = labels?.change ?? 'Change';
+  const cancelLabel = labels?.cancel ?? 'Cancel';
+
+  // Masked state: show dots + "Change" button. No clearing on click.
+  if (isMasked && !editing) {
+    return (
+      <div className="flex items-center gap-2">
+        <div className="flex-1 px-3 py-2 text-sm bg-muted/50 border border-border rounded-lg text-muted-foreground select-none tracking-widest">
+          ••••••••••••
+        </div>
+        <button
+          type="button"
+          onClick={() => {
+            setDraft('');
+            setEditing(true);
+            requestAnimationFrame(() => inputRef.current?.focus());
+          }}
+          disabled={disabled}
+          className="shrink-0 px-3 py-2 text-xs font-medium rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors disabled:opacity-50"
+        >
+          {changeLabel}
+        </button>
+      </div>
+    );
+  }
+
+  // Edit mode (replacing masked key) — uses local draft, commits on Enter/blur
+  if (editing) {
+    return (
+      <div className="flex items-center gap-2">
+        <input
+          ref={inputRef}
+          type="password"
+          value={draft}
+          onChange={e => setDraft(e.target.value)}
+          onKeyDown={e => { if (e.key === 'Enter') commitDraft(); }}
+          onBlur={commitDraft}
+          placeholder={placeholder ?? 'sk-...'}
+          disabled={disabled}
+          className="flex-1 px-3 py-2 text-sm bg-background border border-border rounded-lg text-foreground placeholder:text-muted-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50"
+        />
+        <button
+          type="button"
+          onMouseDown={e => e.preventDefault()}
+          onClick={cancelEdit}
+          className="shrink-0 px-3 py-2 text-xs font-medium rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+        >
+          {cancelLabel}
+        </button>
+      </div>
+    );
+  }
+
+  // Normal (no masked key) — direct editing
   return (
     <input
       type="password"
-      value={isMasked ? '••••••••••••••••' : value}
+      value={value}
       onChange={e => onChange(e.target.value)}
       placeholder={placeholder ?? 'sk-...'}
       disabled={disabled}
       className="w-full px-3 py-2 text-sm bg-background border border-border rounded-lg text-foreground placeholder:text-muted-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50"
-      onFocus={() => { if (isMasked) onChange(''); }}
     />
   );
 }

package/_standalone/instrumentation.ts

@@ -40,7 +40,9 @@ export async function register() {
       try {
         const projRoot = process.env.MINDOS_PROJECT_ROOT || resolve(process.cwd(), '..');
         const skillCheckModule = resolve(projRoot, 'bin', 'lib', 'skill-check.js');
-        const { checkSkillVersions, updateSkill } = await import(skillCheckModule);
+        // eslint-disable-next-line @typescript-eslint/no-implied-eval
+        const dynamicRequireSkill = new Function('id', 'return require(id)') as (id: string) => any;
+        const { checkSkillVersions, updateSkill } = dynamicRequireSkill(skillCheckModule);
         const mismatches = checkSkillVersions(projRoot);
         for (const m of mismatches) {
           try {

package/_standalone/lib/config/animation.ts

@@ -0,0 +1,76 @@
+/**
+ * Centralized animation configuration.
+ * Three-tier system for consistent animation timings across the app.
+ * All durations in milliseconds, <= 300ms per WCAG/a11y standards.
+ */
+
+/** Animation duration tiers */
+export const ANIMATION = {
+  // Micro: Quick feedback, hover/focus states
+  MICRO: 100,    // Button hover, icon transitions, quick visual feedback
+
+  // Short: Interactive transitions, small content changes
+  SHORT: 200,    // Slide/fade modals, popovers, panel opens, dropdowns, quick state changes
+
+  // Medium: Larger content transitions, drawing attention
+  MEDIUM: 300,   // Long panel slides, collapse/expand grids, significant layout changes
+
+  // Fast-exit: When closing/dismissing (slightly faster)
+  FAST_EXIT: 150,
+} as const;
+
+/** Easing functions (using Tailwind defaults) */
+export const EASING = {
+  // Use for enter/appear animations (slow start, fast end)
+  EASE_OUT: 'cubic-bezier(0, 0, 0.2, 1)',
+
+  // Use for exit/disappear animations (fast start, slow end)
+  EASE_IN: 'cubic-bezier(0.4, 0, 1, 1)',
+
+  // Use for continuous/reversible animations (uniform acceleration/deceleration)
+  EASE_IN_OUT: 'cubic-bezier(0.4, 0, 0.2, 1)',
+} as const;
+
+/**
+ * Helper to build transition string
+ * @example
+ * buildTransition('all') // 'all 200ms cubic-bezier(...)'
+ * buildTransition('opacity', { duration: ANIMATION.MICRO, easing: EASING.EASE_IN_OUT })
+ */
+export function buildTransition(
+  property: string = 'all',
+  options?: {
+    duration?: number;
+    easing?: string;
+    delay?: number;
+  }
+) {
+  const duration = options?.duration ?? ANIMATION.SHORT;
+  const easing = options?.easing ?? EASING.EASE_IN_OUT;
+  const delay = options?.delay ?? 0;
+
+  const delayStr = delay > 0 ? ` ${delay}ms` : '';
+  return `${property} ${duration}ms ${easing}${delayStr}`;
+}
+
+/**
+ * Usage guide:
+ *
+ * ### Hover/Focus (MICRO)
+ * className="transition duration-100 ease-out hover:bg-muted"
+ *
+ * ### Modal/Panel Open (SHORT with EASE_OUT)
+ * className="animate-in fade-in-0 zoom-in-95 duration-200 ease-out"
+ *
+ * ### Collapse/Expand Grid (MEDIUM with EASE_IN_OUT)
+ * style={{
+ *   transition: buildTransition('grid-template-rows', {
+ *     duration: ANIMATION.MEDIUM,
+ *     easing: EASING.EASE_IN_OUT
+ *   })
+ * }}
+ *
+ * ### Sidebar Slide (SHORT with EASE_OUT for enter, EASE_IN for exit)
+ * // Sidebar appears: transition duration-200 ease-out
+ * // Sidebar closes: transition duration-150 ease-in
+ */

package/_standalone/lib/config/icon-scale.ts

@@ -0,0 +1,35 @@
+/**
+ * Centralized icon size scale.
+ * Replaces arbitrary sizes (10/12/13/14/15/16/18/20px) with a named scale.
+ * Usage: import { ICON_SIZES } from '@/lib/config/icon-scale'
+ */
+
+export const ICON_SIZES = {
+  xs: 10,    // Tiny: breadcrumb items, status dots, inline badges
+  sm: 12,    // Small: form field icons, list item decorators
+  md: 14,    // Medium: button icons, sidebar items, file tree (DEFAULT)
+  lg: 16,    // Large: main action buttons, panel headers
+  xl: 18,    // XL: hero icons, large buttons, empty states
+  xxl: 20,   // XXL: large empty state icons, prominent UI
+  xxxl: 24,  // XXXL: section headers, splash screens
+} as const;
+
+export type IconSize = keyof typeof ICON_SIZES;
+
+/**
+ * Helper: Get pixel value by size name
+ * @param size - Size key, e.g., 'md', 'lg'
+ * @returns Pixel value, e.g., 14
+ */
+export function getIconSize(size: IconSize): number {
+  return ICON_SIZES[size];
+}
+
+/**
+ * Most common sizes in the codebase:
+ * - md (14px): 60% of icons → FileTree, buttons, lists, sidebars
+ * - lg (16px): 20% of icons → Headers, main actions
+ * - sm (12px): 10% of icons → Inline, compact
+ * - xs (10px): 8% of icons → Badges, tiny status
+ * - xl+ (18-24px): 2% of icons → Empty states, highlights
+ */

package/_standalone/lib/config/panel-sizes.ts

@@ -0,0 +1,58 @@
+/**
+ * Centralized panel width configuration.
+ * All panel sizing constants in one place for easy maintenance.
+ */
+
+import type { PanelId } from '@/components/ActivityBar';
+
+// ── Left Panel (Files/Search/Agents/Echo/Discover) ──
+
+export const DEFAULT_LEFT_PANEL_WIDTH: Record<PanelId, number> = {
+  files: 280,
+  search: 320,
+  echo: 340,
+  agents: 300,
+  discover: 300,
+  workflows: 320,
+};
+
+export const LEFT_PANEL: { DEFAULT: number; MIN: number; MAX_RATIO: number; MAX_ABS: number } = {
+  DEFAULT: 280,
+  MIN: 240,
+  MAX_RATIO: 0.45, // 45% of screen width
+  MAX_ABS: 600, // Absolute pixel max
+};
+
+// ── Right Ask Panel ──
+
+export const RIGHT_ASK_PANEL: { DEFAULT: number; MIN: number; MAX_ABS: number; MIN_CONTENT: number } = {
+  DEFAULT: 420,
+  MIN: 400,
+  MAX_ABS: 4000, // Unlikely but safe upper bound
+  MIN_CONTENT: 360, // Minimum content width when panel is resized
+};
+
+// ── Right Agent Detail Panel ──
+
+export const RIGHT_AGENT_DETAIL_PANEL: { DEFAULT: number; MIN: number; MAX_ABS: number; MAX_RATIO: number } = {
+  DEFAULT: 400,
+  MIN: 300,
+  MAX_ABS: 640,
+  MAX_RATIO: 0.42, // 42% of screen width
+};
+
+// ── Mobile/Responsive Breakpoints ──
+
+export const RESPONSIVE_BREAKPOINTS = {
+  mobile: 375,
+  tablet: 768,
+  desktop: 1024,
+  wide: 1440,
+};
+
+// ── Activity Bar ──
+
+export const ACTIVITY_BAR = {
+  WIDTH_COLLAPSED: 48,
+  WIDTH_EXPANDED: 180,
+};

package/_standalone/lib/hooks/useFocusTrap.ts

@@ -0,0 +1,65 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+/**
+ * Focus trap hook: keeps Tab navigation within a dialog/modal.
+ * Wraps focus from last focusable element back to first, and vice versa.
+ */
+export function useFocusTrap(ref: React.RefObject<HTMLElement | null>, enabled = true) {
+  useEffect(() => {
+    if (!enabled || !ref.current) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== 'Tab') return;
+
+      const focusableElements = ref.current?.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      ) as NodeListOf<HTMLElement>;
+
+      if (!focusableElements || focusableElements.length === 0) return;
+
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      const activeElement = document.activeElement;
+
+      if (e.shiftKey) {
+        // Shift+Tab on first element -> focus last
+        if (activeElement === firstElement) {
+          e.preventDefault();
+          lastElement.focus();
+        }
+      } else {
+        // Tab on last element -> focus first
+        if (activeElement === lastElement) {
+          e.preventDefault();
+          firstElement.focus();
+        }
+      }
+    };
+
+    const container = ref.current;
+    container.addEventListener('keydown', handleKeyDown);
+    return () => container.removeEventListener('keydown', handleKeyDown);
+  }, [ref, enabled]);
+}
+
+/**
+ * Return focus hook: saves reference to trigger element and restores focus on unmount
+ */
+export function useReturnFocus() {
+  const triggerRef = useRef<HTMLElement | null>(null);
+
+  const saveTrigger = (el: HTMLElement | null) => {
+    triggerRef.current = el;
+  };
+
+  useEffect(() => {
+    return () => {
+      // Return focus on unmount
+      triggerRef.current?.focus();
+    };
+  }, []);
+
+  return saveTrigger;
+}