@geminilight/mindos 0.6.39 → 0.6.40

package/_standalone/components/ask/ProviderModelCapsule.tsx

@@ -0,0 +1,284 @@
+'use client';
+
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { Cpu, ChevronDown, Check, Settings } from 'lucide-react';
+import { useLocale } from '@/lib/stores/locale-store';
+import {
+  type ProviderId,
+  PROVIDER_PRESETS,
+  ALL_PROVIDER_IDS,
+  isProviderId,
+  getApiKeyEnvVar,
+} from '@/lib/agent/providers';
+
+const STORAGE_KEY = 'mindos-provider-override';
+
+interface ProviderModelCapsuleProps {
+  value: ProviderId | null;
+  onChange: (provider: ProviderId | null) => void;
+  disabled?: boolean;
+}
+
+interface DropdownPos {
+  top: number;
+  left: number;
+  direction: 'up' | 'down';
+}
+
+interface SettingsData {
+  ai?: {
+    provider?: string;
+    providers?: Record<string, { apiKey?: string; model?: string }>;
+  };
+  envOverrides?: Record<string, boolean>;
+}
+
+export function getPersistedProvider(): ProviderId | null {
+  if (typeof window === 'undefined') return null;
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored && isProviderId(stored)) return stored;
+  } catch { /* localStorage unavailable */ }
+  return null;
+}
+
+export function persistProvider(provider: ProviderId | null): void {
+  try {
+    if (provider) {
+      localStorage.setItem(STORAGE_KEY, provider);
+    } else {
+      localStorage.removeItem(STORAGE_KEY);
+    }
+  } catch { /* localStorage unavailable */ }
+}
+
+/**
+ * Determine which providers are configured (have an API key set via settings or env).
+ * Providers with apiKeyFallback (e.g. Ollama) are always considered configured.
+ */
+function getConfiguredProviders(data: SettingsData): ProviderId[] {
+  const result: ProviderId[] = [];
+  const providers = data.ai?.providers ?? {};
+  const env = data.envOverrides ?? {};
+
+  for (const id of ALL_PROVIDER_IDS) {
+    const preset = PROVIDER_PRESETS[id];
+    const hasSettingsKey = providers[id]?.apiKey === '***set***';
+    const envVar = getApiKeyEnvVar(id);
+    const hasEnvKey = envVar ? !!env[envVar] : false;
+    if (hasSettingsKey || hasEnvKey || preset.apiKeyFallback) result.push(id);
+  }
+  return result;
+}
+
+export default function ProviderModelCapsule({
+  value,
+  onChange,
+  disabled = false,
+}: ProviderModelCapsuleProps) {
+  const { t, locale } = useLocale();
+  const [open, setOpen] = useState(false);
+  const [pos, setPos] = useState<DropdownPos | null>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const [settingsData, setSettingsData] = useState<SettingsData | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    const doFetch = () => {
+      fetch('/api/settings', { cache: 'no-store' })
+        .then(r => r.json())
+        .then((d: SettingsData) => { if (!cancelled) setSettingsData(d); })
+        .catch(() => {});
+    };
+    doFetch();
+    const onVisible = () => { if (document.visibilityState === 'visible') doFetch(); };
+    document.addEventListener('visibilitychange', onVisible);
+    return () => { cancelled = true; document.removeEventListener('visibilitychange', onVisible); };
+  }, []);
+
+  const defaultProvider = (settingsData?.ai?.provider && isProviderId(settingsData.ai.provider))
+    ? settingsData.ai.provider as ProviderId
+    : 'anthropic';
+  const configuredProviders = useMemo(
+    () => settingsData ? getConfiguredProviders(settingsData) : [],
+    [settingsData],
+  );
+
+  // Auto-clear stale override if the provider lost its API key
+  useEffect(() => {
+    if (!settingsData || !value) return;
+    if (!configuredProviders.includes(value)) {
+      onChange(null);
+      persistProvider(null);
+    }
+  }, [settingsData, value, configuredProviders, onChange]);
+
+  const activeProvider = value ?? defaultProvider;
+  const activePreset = PROVIDER_PRESETS[activeProvider];
+  const activeModel = settingsData?.ai?.providers?.[activeProvider]?.model || activePreset.defaultModel;
+  const displayName = locale === 'zh' ? activePreset.nameZh : activePreset.name;
+
+  const reposition = useCallback(() => {
+    if (!triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    const spaceAbove = rect.top;
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const estimatedH = 240;
+    const direction: 'up' | 'down' = spaceAbove > spaceBelow && spaceAbove > estimatedH ? 'up' : 'down';
+    setPos({
+      left: rect.left,
+      top: direction === 'up' ? rect.top - 6 : rect.bottom + 6,
+      direction,
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    reposition();
+  }, [open, reposition]);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (
+        triggerRef.current && !triggerRef.current.contains(target) &&
+        dropdownRef.current && !dropdownRef.current.contains(target)
+      ) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    window.addEventListener('scroll', reposition, true);
+    window.addEventListener('resize', reposition);
+    return () => {
+      window.removeEventListener('scroll', reposition, true);
+      window.removeEventListener('resize', reposition);
+    };
+  }, [open, reposition]);
+
+  const handleSelect = useCallback((provider: ProviderId | null) => {
+    onChange(provider);
+    persistProvider(provider);
+    setOpen(false);
+  }, [onChange]);
+
+  if (!settingsData || configuredProviders.length === 0) return null;
+
+  const modelShort = activeModel.length > 24
+    ? activeModel.slice(0, 22) + '…'
+    : activeModel;
+
+  const dropdown = open && pos ? (
+    <div
+      ref={dropdownRef}
+      role="listbox"
+      aria-label={t.ask.providerCapsule}
+      className="fixed z-50 min-w-[200px] max-w-[280px] rounded-lg border border-border bg-card shadow-lg py-1 animate-in fade-in-0 zoom-in-95 duration-100"
+      style={{
+        left: pos.left,
+        ...(pos.direction === 'up'
+          ? { bottom: window.innerHeight - pos.top }
+          : { top: pos.top }),
+      }}
+    >
+      {/* Default (use server settings) */}
+      <button
+        type="button"
+        role="option"
+        aria-selected={value === null}
+        onClick={() => handleSelect(null)}
+        className="flex w-full items-center gap-2.5 px-3 py-2 text-xs text-left transition-colors hover:bg-muted"
+      >
+        <Settings size={12} className="shrink-0 text-muted-foreground" />
+        <div className="flex-1 min-w-0">
+          <div className="font-medium">{t.ask.providerDefault}</div>
+          <div className="text-2xs text-muted-foreground mt-0.5">
+            {locale === 'zh'
+              ? PROVIDER_PRESETS[defaultProvider].nameZh
+              : PROVIDER_PRESETS[defaultProvider].name} · {settingsData?.ai?.providers?.[defaultProvider]?.model || PROVIDER_PRESETS[defaultProvider].defaultModel}
+          </div>
+        </div>
+        {value === null && <Check size={12} className="shrink-0 text-[var(--amber)]" />}
+      </button>
+
+      {configuredProviders.length > 0 && (
+        <div className="mx-2 my-1 border-t border-border/60" />
+      )}
+
+      {configuredProviders.map((id) => {
+        const preset = PROVIDER_PRESETS[id];
+        const provName = locale === 'zh' ? preset.nameZh : preset.name;
+        const provModel = settingsData?.ai?.providers?.[id]?.model || preset.defaultModel;
+        const isSelected = value === id;
+        return (
+          <button
+            key={id}
+            type="button"
+            role="option"
+            aria-selected={isSelected}
+            onClick={() => handleSelect(id)}
+            className="flex w-full items-center gap-2.5 px-3 py-2 text-xs text-left transition-colors hover:bg-muted"
+          >
+            <Cpu size={12} className="shrink-0 text-muted-foreground" />
+            <div className="flex-1 min-w-0">
+              <div className="font-medium">{provName}</div>
+              <div className="text-2xs text-muted-foreground mt-0.5 truncate">{provModel}</div>
+            </div>
+            {isSelected && <Check size={12} className="shrink-0 text-[var(--amber)]" />}
+          </button>
+        );
+      })}
+    </div>
+  ) : null;
+
+  return (
+    <>
+      <button
+        ref={triggerRef}
+        type="button"
+        onClick={() => { if (!disabled) setOpen(v => !v); }}
+        disabled={disabled}
+        className={`
+          inline-flex items-center gap-1 rounded-full px-2.5 py-0.5
+          text-2xs font-medium transition-colors select-none
+          border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
+          disabled:opacity-40 disabled:cursor-not-allowed
+          ${value
+            ? 'bg-[var(--amber)]/10 border-[var(--amber)]/25 text-foreground hover:bg-[var(--amber)]/15'
+            : 'bg-muted/50 border-border/50 text-muted-foreground hover:bg-muted hover:text-foreground'
+          }
+        `}
+        title={t.ask.providerCapsule}
+        aria-expanded={open}
+        aria-haspopup="listbox"
+      >
+        <Cpu size={11} className="shrink-0" />
+        <span className="truncate max-w-[140px]">
+          {displayName}
+          <span className="text-muted-foreground"> · </span>
+          <span className="text-muted-foreground">{modelShort}</span>
+        </span>
+        <ChevronDown size={10} className="shrink-0 text-muted-foreground" />
+      </button>
+      {typeof document !== 'undefined' && dropdown && createPortal(dropdown, document.body)}
+    </>
+  );
+}

package/_standalone/components/ask/SessionHistory.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { useState, useRef, useEffect } from 'react';
-import { Trash2 } from 'lucide-react';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { Trash2, Pencil } from 'lucide-react';
 import type { ChatSession } from '@/lib/types';
 import { sessionTitle } from '@/hooks/useAskSession';
 
@@ -10,17 +10,27 @@ interface SessionHistoryProps {
   activeSessionId: string | null;
   onLoad: (id: string) => void;
   onDelete: (id: string) => void;
+  onRename: (id: string, title: string) => void;
   onClearAll: () => void;
-  labels: { title: string; clearAll: string; confirmClear: string; noSessions: string };
+  labels: { title: string; clearAll: string; confirmClear: string; noSessions: string; rename: string };
 }
 
-export default function SessionHistory({ sessions, activeSessionId, onLoad, onDelete, onClearAll, labels }: SessionHistoryProps) {
+export default function SessionHistory({ sessions, activeSessionId, onLoad, onDelete, onRename, onClearAll, labels }: SessionHistoryProps) {
   const [confirmClearAll, setConfirmClearAll] = useState(false);
   const clearTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editValue, setEditValue] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
 
-  // Cleanup timer on unmount
   useEffect(() => () => { if (clearTimerRef.current) clearTimeout(clearTimerRef.current); }, []);
 
+  useEffect(() => {
+    if (editingId && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [editingId]);
+
   const handleClearAll = () => {
     if (!confirmClearAll) {
       setConfirmClearAll(true);
@@ -33,6 +43,22 @@ export default function SessionHistory({ sessions, activeSessionId, onLoad, onDe
     setConfirmClearAll(false);
   };
 
+  const startRename = useCallback((s: ChatSession) => {
+    setEditingId(s.id);
+    setEditValue(sessionTitle(s));
+  }, []);
+
+  const commitRename = useCallback(() => {
+    if (editingId) {
+      onRename(editingId, editValue);
+      setEditingId(null);
+    }
+  }, [editingId, editValue, onRename]);
+
+  const cancelRename = useCallback(() => {
+    setEditingId(null);
+  }, []);
+
   return (
     <div className="border-b border-border px-4 py-2.5 max-h-[190px] overflow-y-auto">
       <div className="flex items-center justify-between mb-2">
@@ -56,23 +82,50 @@ export default function SessionHistory({ sessions, activeSessionId, onLoad, onDe
           <div className="text-xs text-muted-foreground/70">{labels.noSessions}</div>
         )}
         {sessions.map((s) => (
-          <div key={s.id} className="flex items-center gap-1.5">
+          <div key={s.id} className="group flex items-center gap-1">
             <button
               type="button"
               onClick={() => onLoad(s.id)}
-              className={`flex-1 text-left px-2 py-1.5 rounded text-xs transition-colors ${
+              onDoubleClick={() => startRename(s)}
+              className={`flex-1 text-left px-2 py-1.5 rounded text-xs transition-colors min-w-0 ${
                 activeSessionId === s.id
                   ? 'bg-accent text-foreground'
                   : 'text-muted-foreground hover:bg-muted hover:text-foreground'
               }`}
             >
-              <div className="truncate">{sessionTitle(s)}</div>
-              <div className="text-2xs opacity-60">{new Date(s.updatedAt).toLocaleString()}</div>
+              {editingId === s.id ? (
+                <input
+                  ref={inputRef}
+                  type="text"
+                  value={editValue}
+                  onChange={(e) => setEditValue(e.target.value)}
+                  onBlur={commitRename}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') { e.preventDefault(); commitRename(); }
+                    if (e.key === 'Escape') { e.preventDefault(); cancelRename(); }
+                  }}
+                  onClick={(e) => e.stopPropagation()}
+                  className="w-full bg-transparent border-b border-[var(--amber)] outline-none text-xs text-foreground"
+                />
+              ) : (
+                <div className="truncate">{sessionTitle(s)}</div>
+              )}
+              {editingId !== s.id && (
+                <div className="text-2xs opacity-60">{new Date(s.updatedAt).toLocaleString()}</div>
+              )}
+            </button>
+            <button
+              type="button"
+              onClick={() => startRename(s)}
+              className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted opacity-0 group-hover:opacity-100 transition-opacity"
+              title={labels.rename}
+            >
+              <Pencil size={11} />
             </button>
             <button
               type="button"
               onClick={() => onDelete(s.id)}
-              className="p-1 rounded text-muted-foreground hover:text-error hover:bg-muted"
+              className="p-1 rounded text-muted-foreground hover:text-error hover:bg-muted opacity-0 group-hover:opacity-100 transition-opacity"
               title="Delete session"
             >
               <Trash2 size={12} />

package/_standalone/components/ask/SessionTabBar.tsx

@@ -3,7 +3,7 @@
 import { Plus, X } from 'lucide-react';
 import type { ChatSession } from '@/lib/types';
 import { sessionTitle } from '@/hooks/useAskSession';
-import { useLocale } from '@/lib/LocaleContext';
+import { useLocale } from '@/lib/stores/locale-store';
 
 interface SessionTabBarProps {
   sessions: ChatSession[];

package/_standalone/components/ask/ThinkingBlock.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import { ChevronRight, ChevronDown, Brain } from 'lucide-react';
-import { useLocale } from '@/lib/LocaleContext';
+import { useLocale } from '@/lib/stores/locale-store';
 
 interface ThinkingBlockProps {
   text: string;

package/_standalone/components/ask/ToolCallBlock.tsx

@@ -1,34 +1,38 @@
 'use client';
 
 import { useState, useMemo } from 'react';
-import { ChevronRight, ChevronDown, Loader2, CheckCircle2, XCircle, AlertTriangle } from 'lucide-react';
+import {
+  ChevronRight, ChevronDown, Loader2, CheckCircle2, XCircle, AlertTriangle,
+  Search, FolderOpen, BookOpen, Pencil, FilePlus, FileText, Pin, Trash2,
+  ArrowRightLeft, Link2, History, Clock, Table, Wrench as WrenchIcon,
+} from 'lucide-react';
 import type { ToolCallPart } from '@/lib/types';
+import type { LucideIcon } from 'lucide-react';
 
 const DESTRUCTIVE_TOOLS = new Set(['delete_file', 'move_file', 'rename_file', 'write_file']);
 
-/** Tools that produce diff output — auto-expand when done */
 const DIFF_TOOLS = new Set([
   'write_file', 'create_file', 'update_section',
   'insert_after_heading', 'edit_lines', 'append_to_file',
 ]);
 
-const TOOL_ICONS: Record<string, string> = {
-  search: '🔍',
-  list_files: '📂',
-  read_file: '📖',
-  write_file: '✏️',
-  create_file: '📄',
-  append_to_file: '📝',
-  insert_after_heading: '📌',
-  update_section: '✏️',
-  delete_file: '🗑️',
-  rename_file: '📝',
-  move_file: '📦',
-  get_backlinks: '🔗',
-  get_history: '📜',
-  get_file_at_version: '⏪',
-  get_recent: '🕐',
-  append_csv: '📊',
+const TOOL_ICONS: Record<string, LucideIcon> = {
+  search: Search,
+  list_files: FolderOpen,
+  read_file: BookOpen,
+  write_file: Pencil,
+  create_file: FilePlus,
+  append_to_file: FileText,
+  insert_after_heading: Pin,
+  update_section: Pencil,
+  delete_file: Trash2,
+  rename_file: FileText,
+  move_file: ArrowRightLeft,
+  get_backlinks: Link2,
+  get_history: History,
+  get_file_at_version: History,
+  get_recent: Clock,
+  append_csv: Table,
 };
 
 function formatInput(input: unknown): string {
@@ -80,7 +84,7 @@ export default function ToolCallBlock({ part }: { part: ToolCallPart }) {
   const [manualToggle, setManualToggle] = useState<boolean | null>(null);
   const expanded = manualToggle ?? (hasDiff && isDone);
 
-  const icon = TOOL_ICONS[part.toolName] ?? '🔧';
+  const IconComponent = TOOL_ICONS[part.toolName] ?? WrenchIcon;
   const isDestructive = DESTRUCTIVE_TOOLS.has(part.toolName);
 
   const parsed = useMemo(() => parseToolOutput(part.output), [part.output]);
@@ -99,17 +103,17 @@ export default function ToolCallBlock({ part }: { part: ToolCallPart }) {
   return (
     <div className={`my-1 rounded-md border text-xs font-mono ${
       isDestructive
-        ? 'border-[var(--amber)]/30 bg-[var(--amber)]/5'
-        : 'border-border/50 bg-muted/30'
+        ? 'border-[var(--amber)]/30 bg-background/60'
+        : 'border-border/50 bg-background/60'
     }`}>
       <button
         type="button"
         onClick={() => setManualToggle(v => v === null ? !expanded : !v)}
-        className="w-full flex items-center gap-1.5 px-2 py-1.5 text-left hover:bg-muted/50 transition-colors rounded-md"
+        className="w-full flex items-center gap-1.5 px-2 py-1.5 text-left hover:bg-muted/30 transition-colors rounded-md"
       >
         {expanded ? <ChevronDown size={12} className="shrink-0 text-muted-foreground" /> : <ChevronRight size={12} className="shrink-0 text-muted-foreground" />}
         {isDestructive && <AlertTriangle size={11} className="shrink-0 text-[var(--amber)]" />}
-        <span>{icon}</span>
+        <IconComponent size={12} className={`shrink-0 ${isDestructive ? 'text-[var(--amber)]' : 'text-muted-foreground'}`} />
         <span className={`font-medium ${isDestructive ? 'text-[var(--amber)]' : 'text-foreground'}`}>{part.toolName}</span>
         <span className="text-muted-foreground truncate flex-1">{headerLabel}</span>
         <span className="shrink-0 ml-auto">

package/_standalone/components/changes/ChangesBanner.tsx

@@ -5,7 +5,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { usePathname } from 'next/navigation';
 import { History, X } from 'lucide-react';
 import { apiFetch } from '@/lib/api';
-import { useLocale } from '@/lib/LocaleContext';
+import { useLocale } from '@/lib/stores/locale-store';
 
 interface ChangeSummaryPayload {
   unreadCount: number;

package/_standalone/components/echo/EchoInsightCollapsible.tsx

@@ -7,7 +7,7 @@ import remarkGfm from 'remark-gfm';
 import { cn } from '@/lib/utils';
 import { consumeUIMessageStream } from '@/lib/agent/stream-consumer';
 import { useSettingsAiAvailable } from '@/hooks/useSettingsAiAvailable';
-import { useLocale } from '@/lib/LocaleContext';
+import { useLocale } from '@/lib/stores/locale-store';
 
 const proseInsight =
   'prose prose-sm prose-panel dark:prose-invert max-w-none text-foreground ' +

package/_standalone/components/echo/EchoSegmentNav.tsx

@@ -3,7 +3,7 @@
 import type { ReactNode } from 'react';
 import Link from 'next/link';
 import { UserRound, Bookmark, Sun, History, Brain } from 'lucide-react';
-import { useLocale } from '@/lib/LocaleContext';
+import { useLocale } from '@/lib/stores/locale-store';
 import { cn } from '@/lib/utils';
 import { ECHO_SEGMENT_HREF, ECHO_SEGMENT_ORDER, type EchoSegment } from '@/lib/echo-segments';