@geminilight/mindos 0.6.74 → 0.6.75

package/_standalone/components/FindInPage.tsx

@@ -0,0 +1,211 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { X, ChevronUp, ChevronDown } from 'lucide-react';
+import { useLocale } from '@/lib/stores/locale-store';
+
+interface FindInPageProps {
+  containerRef: React.RefObject<HTMLElement | null>;
+  onClose: () => void;
+}
+
+const MARK_CLASS = 'findip-highlight';
+const MARK_ACTIVE_CLASS = 'findip-active';
+
+export default function FindInPage({ containerRef, onClose }: FindInPageProps) {
+  const { t } = useLocale();
+  const [query, setQuery] = useState('');
+  const [current, setCurrent] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const marksRef = useRef<HTMLElement[]>([]);
+
+  // Focus input on mount
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  // Clear highlights helper
+  const clearHighlights = useCallback(() => {
+    for (const el of marksRef.current) {
+      const parent = el.parentNode;
+      if (parent) {
+        parent.replaceChild(document.createTextNode(el.textContent || ''), el);
+        parent.normalize();
+      }
+    }
+    marksRef.current = [];
+  }, []);
+
+  // Search and highlight
+  useEffect(() => {
+    clearHighlights();
+    setCurrent(0);
+
+    const container = containerRef.current;
+    if (!container || !query.trim()) return;
+
+    const needle = query.toLowerCase();
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, {
+      acceptNode(node) {
+        // Skip text nodes inside the find bar itself
+        if (node.parentElement?.closest('[data-find-in-page]')) return NodeFilter.FILTER_REJECT;
+        return NodeFilter.FILTER_ACCEPT;
+      },
+    });
+    const textNodes: Text[] = [];
+    while (walker.nextNode()) {
+      textNodes.push(walker.currentNode as Text);
+    }
+
+    const newMarks: HTMLElement[] = [];
+    for (const node of textNodes) {
+      const text = node.textContent || '';
+      const lower = text.toLowerCase();
+      let startIdx = 0;
+      const positions: number[] = [];
+
+      while (true) {
+        const idx = lower.indexOf(needle, startIdx);
+        if (idx === -1) break;
+        positions.push(idx);
+        startIdx = idx + needle.length;
+      }
+
+      if (positions.length === 0) continue;
+
+      // Split text node into fragments with <mark> wrappers
+      const parent = node.parentNode;
+      if (!parent) continue;
+
+      const frag = document.createDocumentFragment();
+      let lastEnd = 0;
+
+      for (const pos of positions) {
+        if (pos > lastEnd) {
+          frag.appendChild(document.createTextNode(text.slice(lastEnd, pos)));
+        }
+        const mark = document.createElement('mark');
+        mark.className = MARK_CLASS;
+        mark.textContent = text.slice(pos, pos + needle.length);
+        frag.appendChild(mark);
+        newMarks.push(mark);
+        lastEnd = pos + needle.length;
+      }
+
+      if (lastEnd < text.length) {
+        frag.appendChild(document.createTextNode(text.slice(lastEnd)));
+      }
+
+      parent.replaceChild(frag, node);
+    }
+
+    marksRef.current = newMarks;
+    setCurrent(newMarks.length > 0 ? 1 : 0);
+
+    // Highlight first match
+    if (newMarks.length > 0) {
+      newMarks[0].classList.add(MARK_ACTIVE_CLASS);
+      newMarks[0].scrollIntoView({ block: 'center', behavior: 'smooth' });
+    }
+
+    return () => {
+      // cleanup on query change is handled by next effect run
+    };
+  }, [query, containerRef, clearHighlights]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      clearHighlights();
+    };
+  }, [clearHighlights]);
+
+  const totalMarks = marksRef.current.length;
+
+  const goTo = useCallback((index: number) => {
+    const marks = marksRef.current;
+    if (marks.length === 0) return;
+    // Remove active from previous
+    for (const m of marks) m.classList.remove(MARK_ACTIVE_CLASS);
+    // Wrap around
+    const wrapped = ((index - 1) % marks.length + marks.length) % marks.length;
+    marks[wrapped].classList.add(MARK_ACTIVE_CLASS);
+    marks[wrapped].scrollIntoView({ block: 'center', behavior: 'smooth' });
+    setCurrent(wrapped + 1);
+  }, []);
+
+  const goNext = useCallback(() => goTo(current + 1), [current, goTo]);
+  const goPrev = useCallback(() => goTo(current - 1), [current, goTo]);
+
+  // Keyboard handling
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      onClose();
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      if (e.shiftKey) goPrev();
+      else goNext();
+    }
+  }, [onClose, goNext, goPrev]);
+
+  return (
+    <>
+      <style>{`
+        mark.${MARK_CLASS} {
+          background: rgba(250, 204, 21, 0.3);
+          color: inherit;
+          border-radius: 2px;
+          padding: 0;
+        }
+        mark.${MARK_ACTIVE_CLASS} {
+          background: rgba(250, 204, 21, 0.7);
+          outline: 2px solid rgba(250, 204, 21, 0.5);
+        }
+      `}</style>
+      <div className="sticky top-[98px] md:top-[46px] z-30 flex justify-end px-4 md:px-6 pointer-events-none" data-find-in-page>
+        <div className="pointer-events-auto flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-border bg-card shadow-lg">
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={e => setQuery(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={t.findInPage.placeholder}
+            className="w-[180px] sm:w-[220px] px-2 py-1 text-sm bg-transparent text-foreground placeholder:text-muted-foreground outline-none"
+          />
+          <span className="text-xs text-muted-foreground tabular-nums shrink-0 min-w-[48px] text-center font-display">
+            {query.trim()
+              ? totalMarks > 0
+                ? t.findInPage.matchCount(current, totalMarks)
+                : t.findInPage.noResults
+              : ''}
+          </span>
+          <button
+            onClick={goPrev}
+            disabled={totalMarks === 0}
+            className="p-1 rounded text-muted-foreground hover:text-foreground disabled:opacity-30 transition-colors"
+            aria-label="Previous match"
+          >
+            <ChevronUp size={14} />
+          </button>
+          <button
+            onClick={goNext}
+            disabled={totalMarks === 0}
+            className="p-1 rounded text-muted-foreground hover:text-foreground disabled:opacity-30 transition-colors"
+            aria-label="Next match"
+          >
+            <ChevronDown size={14} />
+          </button>
+          <button
+            onClick={onClose}
+            className="p-1 rounded text-muted-foreground hover:text-foreground transition-colors"
+            aria-label="Close find"
+          >
+            <X size={14} />
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}

package/_standalone/components/GuideCard.tsx

@@ -0,0 +1,358 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { X, Sparkles, Upload, MessageCircle, ExternalLink, Check, Copy, ChevronDown } from 'lucide-react';
+import { copyToClipboard } from '@/lib/clipboard';
+import { toast } from '@/lib/toast';
+import Link from 'next/link';
+import { useLocale } from '@/lib/stores/locale-store';
+import { openAskModal } from '@/hooks/useAskModal';
+import { walkthroughSteps } from './walkthrough/steps';
+import type { GuideState } from '@/lib/settings';
+
+export default function GuideCard() {
+  const { t } = useLocale();
+  const g = t.guide;
+
+  const [guideState, setGuideState] = useState<GuideState | null>(null);
+  const [expanded, setExpanded] = useState<'import' | 'ai' | 'agent' | null>(null);
+  const [step3Done, setStep3Done] = useState(false);
+  const hasAutoExpanded = useRef(false);
+
+  const fetchGuideState = useCallback(() => {
+    fetch('/api/setup')
+      .then(r => r.json())
+      .then(data => {
+        const gs = data.guideState;
+        if (gs?.active && !gs.dismissed) {
+          setGuideState(gs);
+        } else {
+          setGuideState(null);
+        }
+      })
+      .catch((err) => {
+        console.warn('[GuideCard] Fetch guide state failed:', err);
+      });
+  }, []);
+
+  useEffect(() => {
+    fetchGuideState();
+    const handleGuideUpdate = () => fetchGuideState();
+    window.addEventListener('focus', handleGuideUpdate);
+    window.addEventListener('guide-state-updated', handleGuideUpdate);
+    return () => {
+      window.removeEventListener('focus', handleGuideUpdate);
+      window.removeEventListener('guide-state-updated', handleGuideUpdate);
+    };
+  }, [fetchGuideState]);
+
+  const patchGuide = useCallback((patch: Partial<GuideState>) => {
+    setGuideState(prev => prev ? { ...prev, ...patch } : prev);
+    fetch('/api/setup', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ guideState: patch }),
+    }).catch((err) => {
+      console.warn('[GuideCard] PATCH guide state failed:', err);
+    });
+  }, []);
+
+  const handleDismiss = useCallback(() => {
+    patchGuide({ dismissed: true });
+    setGuideState(null);
+  }, [patchGuide]);
+
+  // ── Step 1: Import ──
+  const handleImportClick = useCallback(() => {
+    window.dispatchEvent(new CustomEvent('mindos:open-import'));
+  }, []);
+
+  const handleSkipImport = useCallback(() => {
+    patchGuide({ step1Done: true });
+    setExpanded(null);
+  }, [patchGuide]);
+
+  useEffect(() => {
+    if (!guideState || guideState.step1Done) return;
+    const handler = () => patchGuide({ step1Done: true });
+    window.addEventListener('mindos:files-changed', handler);
+    return () => window.removeEventListener('mindos:files-changed', handler);
+  }, [guideState, guideState?.step1Done, patchGuide]);
+
+  // ── Step 2: AI verify ──
+  const handleStartAI = useCallback(() => {
+    const gs = guideState;
+    const isEmpty = gs?.template === 'empty';
+    const prompt = isEmpty ? g.ai.promptEmpty : g.ai.prompt;
+    openAskModal(prompt, 'guide');
+  }, [guideState, g]);
+
+  // ── Step 3: Cross-agent copy ──
+  const handleCopyPrompt = useCallback(async () => {
+    const ok = await copyToClipboard(g.agent.copyPrompt);
+    if (ok) toast.copy();
+  }, [g]);
+
+  const handleStep3Done = useCallback(() => {
+    setStep3Done(true);
+    setExpanded(null);
+    patchGuide({ nextStepIndex: 0 });
+  }, [patchGuide]);
+
+  // ── Next-step prompts ──
+  const handleNextStepClick = useCallback(() => {
+    if (!guideState) return;
+    const idx = guideState.nextStepIndex;
+    const steps = g.done.steps;
+    if (idx < steps.length) {
+      openAskModal(steps[idx].prompt, 'guide-next');
+      patchGuide({ nextStepIndex: idx + 1 });
+    }
+  }, [guideState, g, patchGuide]);
+
+  // ── Auto-expand: always show current step ──
+  // On initial load, expand the first incomplete step
+  useEffect(() => {
+    if (!guideState || hasAutoExpanded.current) return;
+    hasAutoExpanded.current = true;
+    if (!guideState.step1Done) {
+      setExpanded('import');
+    } else if (!guideState.askedAI) {
+      setExpanded('ai');
+    } else if (!step3Done) {
+      setExpanded('agent');
+    }
+  }, [guideState, step3Done]);
+
+  // On step completion, auto-advance to next step
+  const prevStepRef = useRef({ s1: false, s2: false });
+  useEffect(() => {
+    if (!guideState) return;
+    const prev = prevStepRef.current;
+    if (guideState.step1Done && !prev.s1) {
+      setExpanded('ai');
+      prev.s1 = true;
+    }
+    if (guideState.askedAI && !prev.s2) {
+      setExpanded('agent');
+      prev.s2 = true;
+    }
+  }, [guideState?.step1Done, guideState?.askedAI, guideState]);
+
+  // ── Auto-dismiss final state ──
+  const step1Done = guideState?.step1Done ?? false;
+  const step2Done = guideState?.askedAI ?? false;
+  const nextIdx = guideState?.nextStepIndex ?? 0;
+  const allCoreDone = step1Done && step2Done && step3Done;
+  const allNextDone = allCoreDone && nextIdx >= g.done.steps.length;
+
+  const autoDismissRef = useRef<ReturnType<typeof setTimeout>>(null);
+  useEffect(() => {
+    if (allNextDone) {
+      autoDismissRef.current = setTimeout(() => handleDismiss(), 8000);
+    }
+    return () => { if (autoDismissRef.current) clearTimeout(autoDismissRef.current); };
+  }, [allNextDone, handleDismiss]);
+
+  // ── Render guards ──
+  if (!guideState) return null;
+
+  const walkthroughActive = guideState.walkthroughStep !== undefined
+    && guideState.walkthroughStep >= 0
+    && guideState.walkthroughStep < walkthroughSteps.length
+    && !guideState.walkthroughDismissed;
+  if (walkthroughActive) return null;
+
+  const showStep3 = step1Done && step2Done && !step3Done;
+
+  // ── Final state: all next-steps done ──
+  if (allCoreDone && allNextDone) {
+    return (
+      <div className="rounded-lg border border-border/50 px-4 py-3 flex items-center gap-3 animate-in fade-in duration-300">
+        <Sparkles size={14} className="text-[var(--amber)] shrink-0" />
+        <span className="text-xs font-medium flex-1 text-foreground">
+          {g.done.titleFinal}
+        </span>
+        <Link
+          href="/explore"
+          className="text-xs font-medium text-[var(--amber)] transition-colors hover:opacity-80"
+        >
+          {t.walkthrough.exploreCta}
+        </Link>
+        <button onClick={handleDismiss} className="p-1 rounded hover:bg-muted transition-colors text-muted-foreground">
+          <X size={12} />
+        </button>
+      </div>
+    );
+  }
+
+  // ── Done state: next-step prompts ──
+  if (allCoreDone) {
+    const step = g.done.steps[nextIdx];
+    return (
+      <div className="rounded-lg border border-border/50 px-4 py-3 animate-in fade-in duration-300">
+        <div className="flex items-center gap-3">
+          <Sparkles size={14} className="text-[var(--amber)] shrink-0" />
+          <span className="text-xs font-medium flex-1 text-foreground">
+            {g.done.title}
+          </span>
+          <button onClick={handleDismiss} className="p-1 rounded hover:bg-muted transition-colors text-muted-foreground">
+            <X size={12} />
+          </button>
+        </div>
+        {step && (
+          <button
+            onClick={handleNextStepClick}
+            className="mt-2 ml-6 flex items-center gap-1.5 text-xs text-[var(--amber)] transition-colors hover:opacity-80 cursor-pointer"
+          >
+            <span>{step.hint}</span>
+            <ChevronDown size={10} className="-rotate-90" />
+          </button>
+        )}
+      </div>
+    );
+  }
+
+  // ── Steps data ──
+  const steps = [
+    { key: 'import' as const, done: step1Done, icon: Upload, title: g.import.title, dimmed: false },
+    { key: 'ai' as const, done: step2Done, icon: MessageCircle, title: g.ai.title, dimmed: !step1Done },
+    { key: 'agent' as const, done: step3Done, icon: ExternalLink, title: g.agent.title, dimmed: !step1Done || !step2Done },
+  ];
+
+  const handleStepClick = (key: 'import' | 'ai' | 'agent', done: boolean, dimmed: boolean) => {
+    if (done || dimmed) return;
+    setExpanded(expanded === key ? null : key);
+  };
+
+  // ── Main guide card ──
+  return (
+    <div className="rounded-lg border border-border/50 overflow-hidden">
+
+      {/* Header row with inline steps */}
+      <div className="flex items-center gap-2 px-4 py-3">
+        <Sparkles size={14} className="text-[var(--amber)] shrink-0" />
+        <span className="text-xs font-semibold text-foreground mr-2">{g.title}</span>
+
+        {/* Step indicators — horizontal */}
+        <div className="flex items-center gap-1 flex-1 min-w-0">
+          {steps.map((s, i) => {
+            const Icon = s.icon;
+            const isActive = expanded === s.key;
+            const isClickable = !s.done && !s.dimmed;
+            return (
+              <button
+                key={s.key}
+                type="button"
+                onClick={() => handleStepClick(s.key, s.done, s.dimmed)}
+                disabled={s.done || s.dimmed}
+                title={s.dimmed ? g.stepLocked : undefined}
+                className={`flex items-center gap-1.5 px-2.5 py-1 rounded-md text-2xs font-medium transition-all ${
+                  s.done
+                    ? 'text-success/70'
+                    : s.dimmed
+                      ? 'text-muted-foreground/30'
+                      : isActive
+                        ? 'bg-[var(--amber)]/10 text-[var(--amber)]'
+                        : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+                } ${isClickable ? 'cursor-pointer' : ''}`}
+              >
+                {s.done ? (
+                  <Check size={11} className="shrink-0" />
+                ) : (
+                  <span className={`flex items-center justify-center w-4 h-4 rounded-full text-[9px] font-bold shrink-0 ${
+                    isActive ? 'bg-[var(--amber)] text-[var(--amber-foreground)] animate-pulse' : s.dimmed ? 'bg-muted/50 text-muted-foreground/30' : 'bg-muted text-muted-foreground'
+                  }`}>
+                    {i + 1}
+                  </span>
+                )}
+                <span className="truncate hidden sm:inline">{s.title}</span>
+              </button>
+            );
+          })}
+        </div>
+
+        <button onClick={handleDismiss} className="p-1 rounded hover:bg-muted transition-colors text-muted-foreground shrink-0">
+          <X size={12} />
+        </button>
+      </div>
+
+      {/* ── Step 1 panel (Grid transition) ── */}
+      <div className={`grid transition-[grid-template-rows] duration-200 ease-out ${
+        expanded === 'import' && !step1Done ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
+      }`}>
+        <div className="overflow-hidden">
+          <div className="px-4 pb-3">
+            <div className="flex items-center gap-3 pl-6">
+              <p className="text-xs text-muted-foreground flex-1">{g.import.desc}</p>
+              <button
+                onClick={handleImportClick}
+                className="shrink-0 text-xs font-medium px-3 py-1.5 rounded-md bg-[var(--amber)] text-[var(--amber-foreground)] transition-all hover:opacity-90"
+              >
+                {g.import.button}
+              </button>
+              <button
+                onClick={handleSkipImport}
+                className="shrink-0 text-xs px-2 py-1 rounded-md text-muted-foreground/60 hover:text-muted-foreground hover:bg-muted transition-colors"
+              >
+                {g.skip}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ── Step 2 panel (Grid transition) ── */}
+      <div className={`grid transition-[grid-template-rows] duration-200 ease-out ${
+        expanded === 'ai' && step1Done && !step2Done ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
+      }`}>
+        <div className="overflow-hidden">
+          <div className="px-4 pb-3">
+            <div className="flex items-center gap-3 pl-6">
+              <p className="text-xs text-muted-foreground flex-1">{g.ai.desc}</p>
+              <button
+                onClick={handleStartAI}
+                className="shrink-0 text-xs font-medium px-3 py-1.5 rounded-md bg-[var(--amber)] text-[var(--amber-foreground)] transition-all hover:opacity-90"
+              >
+                {g.ai.cta}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ── Step 3 panel (Grid transition) ── */}
+      <div className={`grid transition-[grid-template-rows] duration-200 ease-out ${
+        expanded === 'agent' && showStep3 ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
+      }`}>
+        <div className="overflow-hidden">
+          <div className="px-4 pb-3">
+            <div className="pl-6">
+              <p className="text-xs text-muted-foreground mb-2">{g.agent.desc}</p>
+              <div className="relative rounded-md bg-muted/50 p-3 pr-20">
+                <p className="text-xs font-mono text-foreground/80 leading-relaxed whitespace-pre-wrap">
+                  {g.agent.copyPrompt}
+                </p>
+                <button
+                  onClick={handleCopyPrompt}
+                  className="absolute top-2 right-2 flex items-center gap-1 text-2xs font-medium px-2 py-1 rounded-md bg-background border border-border/50 text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  <Copy size={10} />
+                  {g.agent.copy}
+                </button>
+              </div>
+              <div className="flex justify-end mt-2">
+                <button
+                  onClick={handleStep3Done}
+                  className="text-xs px-2 py-1 rounded-md text-muted-foreground/60 hover:text-muted-foreground hover:bg-muted transition-colors"
+                >
+                  {g.skip}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}