@geminilight/mindos 0.6.51 → 0.6.53

package/app/components/HomeContent.tsx

@@ -123,7 +123,7 @@ function FileRow({ filePath, mtime, formatTime, subPath }: {
   return (
     <Link
       href={`/view/${encodePath(filePath)}`}
-      className="flex items-center gap-3 px-3 py-2 rounded-lg transition-all duration-100 hover:translate-x-0.5 hover:bg-muted group"
+      className="flex items-center gap-3 px-3 py-2 rounded-lg transition-all duration-100 hover:translate-x-0.5 hover:bg-muted group overflow-hidden"
     >
       {isCSV
         ? <Table size={12} className="shrink-0 text-success" />
@@ -200,7 +200,7 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
             data-walkthrough="ask-button"
             className="flex-1 flex items-center gap-3 px-4 py-3 rounded-xl border border-border/60 shadow-sm bg-card transition-all duration-150 hover:border-[var(--amber)]/50 hover:shadow-md group"
           >
-            <Sparkles size={15} className="shrink-0 text-[var(--amber)] group-hover:scale-110 transition-transform duration-150" />
+            <Sparkles size={16} className="shrink-0 text-[var(--amber)] group-hover:scale-110 transition-transform duration-150" />
             <div className="flex-1 min-h-[1.5rem] flex items-center">
               <span 
                 key={suggestionIdx}
@@ -219,7 +219,7 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
             className="flex items-center gap-2 px-3.5 py-3 rounded-xl border border-border/60 text-sm text-muted-foreground transition-all duration-150 shrink-0 hover:bg-muted hover:shadow-sm"
           >
             <Search size={14} />
-            <kbd className="hidden sm:inline-flex items-center px-1.5 py-0.5 rounded text-2xs font-mono bg-muted">
+            <kbd className="hidden sm:inline-flex items-center px-1.5 py-0.5 rounded text-xs font-mono bg-muted">
               ⌘K
             </kbd>
           </button>
@@ -264,7 +264,7 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
       {(spaceList.length > 0 || true) && (
         <section className="mb-10">
           <SectionTitle
-            icon={<Brain size={13} />}
+            icon={<Brain size={14} />}
             count={spaceList.length > 0 ? spaceList.length : undefined}
             action={<CreateSpaceButton t={t} />}
           >
@@ -330,7 +330,7 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
       {recent.length > 0 && (
         <section className="mb-10">
           <SectionTitle
-            icon={<Clock size={13} />}
+            icon={<Clock size={14} />}
             count={recent.length}
             action={
               <Link
@@ -356,7 +356,7 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
                       href={`/view/${encodePath(group.spacePath)}`}
                       className="flex items-center gap-2 px-1 py-1.5 rounded-lg group transition-colors hover:bg-muted/50"
                     >
-                      <Folder size={13} className="shrink-0 text-[var(--amber)]" />
+                      <Folder size={14} className="shrink-0 text-[var(--amber)]" />
                       <span className="text-xs font-semibold font-display text-foreground group-hover:text-[var(--amber)] transition-colors" suppressHydrationWarning>
                         {group.space}
                       </span>
@@ -387,7 +387,7 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
               {rootFiles.length > 0 && (
                 <div>
                   <div className="flex items-center gap-2 px-1 py-1.5">
-                    <FileText size={13} className="shrink-0 text-muted-foreground/50" />
+                    <FileText size={14} className="shrink-0 text-muted-foreground/50" />
                     <span className="text-xs font-semibold font-display text-muted-foreground/60">
                       {t.home.other}
                     </span>
@@ -430,7 +430,7 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
                       />
                       <Link
                         href={`/view/${encodePath(filePath)}`}
-                        className="flex items-center gap-3 px-3 py-2 rounded-lg transition-all duration-100 group-hover:translate-x-0.5 hover:bg-muted"
+                        className="flex items-center gap-3 px-3 py-2 rounded-lg transition-all duration-100 group-hover:translate-x-0.5 hover:bg-muted overflow-hidden"
                       >
                         {isCSV
                           ? <Table size={12} className="shrink-0 text-success" />
@@ -476,11 +476,28 @@ function PinnedFilesSection({ formatTime }: { formatTime: (t: number) => string
   const { t } = useLocale();
   const { pinnedFiles, removePin } = usePinnedFiles();
 
-  if (pinnedFiles.length === 0) return null;
+  if (pinnedFiles.length === 0) {
+    return (
+      <section className="mb-12">
+        <SectionTitle icon={<Star size={14} />}>
+          {t.pinnedFiles.title}
+        </SectionTitle>
+        <div className="py-6 px-4 rounded-lg border border-dashed border-border/50 text-center">
+          <Star size={20} className="mx-auto mb-2 text-muted-foreground/40" />
+          <p className="text-sm font-medium text-muted-foreground mb-1">
+            {t.pinnedFiles.empty ?? 'No pinned files'}
+          </p>
+          <p className="text-xs text-muted-foreground/60">
+            {t.pinnedFiles.emptyHint ?? 'Click the star icon on any file to pin it here'}
+          </p>
+        </div>
+      </section>
+    );
+  }
 
   return (
     <section className="mb-12">
-      <SectionTitle icon={<Star size={13} />} count={pinnedFiles.length}>
+      <SectionTitle icon={<Star size={14} />} count={pinnedFiles.length}>
         {t.pinnedFiles.title}
       </SectionTitle>
       <div className="flex flex-col gap-0.5">
@@ -492,7 +509,7 @@ function PinnedFilesSection({ formatTime }: { formatTime: (t: number) => string
             <div key={filePath} className="group/pin relative">
               <Link
                 href={`/view/${encodePath(filePath)}`}
-                className="flex items-center gap-3 px-3 py-2 rounded-lg transition-all duration-100 hover:translate-x-0.5 hover:bg-muted"
+                className="flex items-center gap-3 px-3 py-2 rounded-lg transition-all duration-100 hover:translate-x-0.5 hover:bg-muted overflow-hidden"
               >
                 <Star size={12} className="shrink-0 fill-[var(--amber)] text-[var(--amber)]" />
                 {isCSV
@@ -581,7 +598,7 @@ function ExampleCleanupBanner() {
         disabled={cleaning}
         className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg transition-colors shrink-0 disabled:opacity-50 bg-[var(--amber-dim)] text-[var(--amber-text)] hover:opacity-80"
       >
-        {cleaning ? <Loader2 size={11} className="animate-spin" /> : <Trash2 size={11} />}
+        {cleaning ? <Loader2 size={12} className="animate-spin" /> : <Trash2 size={12} />}
         {t.home.cleanupExamplesButton}
       </button>
       <button

package/app/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/app/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/app/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/app/components/TrashPageClient.tsx

@@ -45,7 +45,7 @@ export default function TrashPageClient({ initialItems }: { initialItems: TrashM
       } else if (result.conflict) {
         setConflictItem(item);
       } else {
-        toast.error(result.error ?? 'Failed to restore');
+        toast.error(result.error ?? t.trash.restoreFailed);
       }
     } finally {
       setBusyId(null);
@@ -61,7 +61,7 @@ export default function TrashPageClient({ initialItems }: { initialItems: TrashM
       setConflictItem(null);
       router.refresh();
     } else {
-      toast.error(result.error ?? 'Failed to restore');
+      toast.error(result.error ?? t.trash.restoreFailed);
     }
   }, [conflictItem, t, router]);
 
@@ -72,7 +72,7 @@ export default function TrashPageClient({ initialItems }: { initialItems: TrashM
       setItems(prev => prev.filter(i => i.id !== confirmDelete.id));
       toast.success(t.trash.deleted);
     } else {
-      toast.error(result.error ?? 'Failed to delete');
+      toast.error(result.error ?? t.trash.deleteFailed);
     }
     setConfirmDelete(null);
   }, [confirmDelete, t]);
@@ -84,7 +84,7 @@ export default function TrashPageClient({ initialItems }: { initialItems: TrashM
         setItems([]);
         toast.success(t.trash.emptied(result.count ?? 0));
       } else {
-        toast.error(result.error ?? 'Failed to empty trash');
+        toast.error(result.error ?? t.trash.emptyFailed);
       }
       setConfirmEmpty(false);
     });

package/app/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/app/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/app/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/app/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/app/components/ui/Toaster.tsx

@@ -16,7 +16,7 @@ export default function Toaster() {
   if (toasts.length === 0) return null;
 
   return (
-    <div className="fixed bottom-4 right-4 z-50 flex flex-col-reverse gap-2 pointer-events-none" aria-live="polite">
+    <div className="fixed bottom-4 right-4 z-50 flex flex-col-reverse gap-2 pointer-events-none" role="status" aria-live="polite" aria-atomic="false">
       {toasts.map((t) => (
         <div
           key={t.id}

package/app/components/walkthrough/WalkthroughOverlay.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useCallback, useId } from 'react';
 import { useLocale } from '@/lib/stores/locale-store';
-import { useWalkthrough } from '@/lib/stores/walkthrough-store';
+import { useWalkthrough, useWalkthroughStore } from '@/lib/stores/walkthrough-store';
 import { walkthroughSteps } from './steps';
 import WalkthroughTooltip from './WalkthroughTooltip';
 
@@ -68,16 +68,31 @@ export default function WalkthroughOverlay() {
     return () => window.removeEventListener('keydown', handler, true);
   }, [skipFn]);
 
-  // If target element doesn't exist (e.g. Echo not enabled), auto-skip this step
+  // If target element doesn't exist (e.g. panel not enabled), auto-skip
+  // after a grace period. Use stable store ref to avoid re-triggering on
+  // every store change (which caused spurious skips during step transitions).
+  const currentStep = wt?.currentStep ?? 0;
   useEffect(() => {
     if (!step) return;
-    const el = document.querySelector(`[data-walkthrough="${step.anchor}"]`);
-    if (!el) {
-      // Target not in DOM — skip to next step after a brief delay
-      const timer = setTimeout(() => wt?.next(), 100);
-      return () => clearTimeout(timer);
-    }
-  }, [step, wt]);
+    // Wait 500ms for DOM to settle (sidebar animations, lazy rendering)
+    const timer = setTimeout(() => {
+      const el = document.querySelector(`[data-walkthrough="${step.anchor}"]`);
+      if (!el) {
+        useWalkthroughStore.getState().next();
+      }
+    }, 500);
+    return () => clearTimeout(timer);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentStep]); // Only re-run when step index changes, not on every store update
+
+  // Safety timeout: if overlay stays for 60s without user interaction, auto-dismiss.
+  // Prevents permanently stuck overlay from any unforeseen edge case.
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      useWalkthroughStore.getState().skip();
+    }, 60_000);
+    return () => clearTimeout(timer);
+  }, [currentStep]); // Reset on each step change
 
   if (!wt || !step) return null;
 
@@ -138,7 +153,7 @@ export default function WalkthroughOverlay() {
         />
       </svg>
 
-      {/* Tooltip */}
+      {/* Tooltip — shown when target element found */}
       {targetRect && (
         <WalkthroughTooltip
           stepIndex={wt.currentStep}
@@ -146,6 +161,20 @@ export default function WalkthroughOverlay() {
           position={step.position}
         />
       )}
+
+      {/* Fallback dismiss button — shown when target element NOT found.
+          Without this, user sees dark overlay but no visible UI to dismiss it. */}
+      {!targetRect && (
+        <div className="fixed inset-0 z-[101] flex items-center justify-center pointer-events-none">
+          <button
+            onClick={wt.skip}
+            className="pointer-events-auto px-4 py-2 text-sm rounded-lg font-medium transition-all hover:opacity-90"
+            style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
+          >
+            {wt.currentStep === wt.totalSteps - 1 ? '✓' : '→'}
+          </button>
+        </div>
+      )}
     </>
   );
 }

package/app/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/app/lib/agent/model.ts

@@ -32,6 +32,7 @@ export function getModelConfig(options?: ModelConfigOverrides): {
   modelName: string;
   apiKey: string;
   provider: ProviderId;
+  baseUrl: string;
 } {
   const saved = effectiveAiConfig(options?.provider);
 
@@ -49,7 +50,7 @@ export function getModelConfig(options?: ModelConfigOverrides): {
     model = ensureVisionCapable(model);
   }
 
-  return { model, modelName, apiKey: cfg.apiKey, provider: cfg.provider };
+  return { model, modelName, apiKey: cfg.apiKey, provider: cfg.provider, baseUrl: cfg.baseUrl };
 }
 
 /**

package/app/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/app/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
+ */