npm - @geminilight/mindos - Versions diffs - 0.6.58 → 0.6.59 - Mend

@geminilight/mindos 0.6.58 → 0.6.59

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (219) hide show

package/app/app/globals.css CHANGED Viewed

@@ -180,7 +180,7 @@ body {
 }
 .prose {
-  font-family: var(--prose-font-override, 'Lora', Georgia, serif);
+  font-family: var(--prose-font-override, 'IBM Plex Sans', system-ui, sans-serif);
   color: var(--prose-body);
   line-height: 1.85;
   font-size: var(--prose-font-size-override, 0.95rem);
@@ -238,6 +238,7 @@ body {
 /* Ask Panel — compact prose for side panel chat bubbles */
 .prose.prose-panel {
+  font-family: 'IBM Plex Sans', system-ui, sans-serif;
   font-size: 0.8125rem !important;
   line-height: 1.6;
 }

package/app/app/layout.tsx CHANGED Viewed

@@ -9,7 +9,7 @@ import ErrorBoundary from '@/components/ErrorBoundary';
 import Toaster from '@/components/ui/Toaster';
 import RegisterSW from './register-sw';
 import UpdateOverlay from '@/components/UpdateOverlay';
-import { cookies } from 'next/headers';
+import { cookies, headers } from 'next/headers';
 import type { Locale } from '@/lib/i18n';
 import '@/lib/renderers/index'; // globally register built-in renderers once
@@ -67,9 +67,21 @@ export default async function RootLayout({
     console.error('[RootLayout] Failed to load file tree:', err);
   }
-  // Read locale from cookie (set by pre-hydration script) so SSR matches client
+  // Read locale from cookie, or infer from Accept-Language header
+  // This matches the client pre-hydration script logic:
+  // localStorage > system language preference (via Accept-Language)
   const cookieStore = await cookies();
-  const ssrLocale: Locale = cookieStore.get('locale')?.value === 'zh' ? 'zh' : 'en';
+  const cookieLocale = cookieStore.get('locale')?.value;
+  let ssrLocale: Locale = 'en';
+  if (cookieLocale === 'zh') {
+    ssrLocale = 'zh';
+  } else if (cookieLocale !== 'en') {
+    // Cookie not set or invalid — infer from Accept-Language header
+    // (matches client: navigator.language.startsWith('zh') ? 'zh' : 'en')
+    const headerStore = await headers();
+    const acceptLanguage = headerStore.get('Accept-Language') || '';
+    ssrLocale = acceptLanguage.includes('zh') ? 'zh' : 'en';
+  }
   return (
     <html lang={ssrLocale} suppressHydrationWarning>
@@ -92,7 +104,7 @@ export default async function RootLayout({
         {/* Apply user appearance settings before first paint, preventing flash */}
         <script
           dangerouslySetInnerHTML={{
-            __html: `(function(){try{var s=localStorage.getItem('theme');var dark=s&&s!=='system'?s==='dark':window.matchMedia('(prefers-color-scheme: dark)').matches;document.documentElement.classList.toggle('dark',dark);var cw=localStorage.getItem('content-width');if(cw)document.documentElement.style.setProperty('--content-width-override',cw);var pf=localStorage.getItem('prose-font');if(pf==='geist'){pf='inter';localStorage.setItem('prose-font','inter')}var fm={lora:'"Lora", Georgia, serif','ibm-plex-sans':'"IBM Plex Sans", sans-serif',inter:'var(--font-inter), sans-serif','ibm-plex-mono':'"IBM Plex Mono", monospace'};if(pf&&fm[pf])document.documentElement.style.setProperty('--prose-font-override',fm[pf]);var loc=localStorage.getItem('locale')||'system';var rl=loc==='system'?(navigator.language.startsWith('zh')?'zh':'en'):loc;document.documentElement.lang=rl==='zh'?'zh':'en';document.cookie='locale='+rl+';path=/;max-age=31536000;SameSite=Lax'}catch(e){}})();`,
+            __html: `(function(){try{var s=localStorage.getItem('theme');var dark=s&&s!=='system'?s==='dark':window.matchMedia('(prefers-color-scheme: dark)').matches;document.documentElement.classList.toggle('dark',dark);var cw=localStorage.getItem('content-width');if(cw)document.documentElement.style.setProperty('--content-width-override',cw);var pf=localStorage.getItem('prose-font');if(pf==='geist'){pf='inter';localStorage.setItem('prose-font','inter')}var fm={lora:'"Lora", Georgia, serif','ibm-plex-sans':'"IBM Plex Sans", sans-serif',inter:'var(--font-inter), sans-serif','ibm-plex-mono':'"IBM Plex Mono", monospace'};if(pf&&fm[pf])document.documentElement.style.setProperty('--prose-font-override',fm[pf]);var loc=localStorage.getItem('locale')||'system';var rl=loc==='system'?(navigator.language.startsWith('zh')?'zh':'en'):loc;window.__mindos_locale__=rl;document.documentElement.lang=rl==='zh'?'zh':'en';document.cookie='locale='+rl+';path=/;max-age=31536000;SameSite=Lax'}catch(e){}})();`,
           }}
         />
       </head>

package/app/components/AskFab.tsx CHANGED Viewed

@@ -22,11 +22,11 @@ export default function AskFab({ onToggle, askPanelOpen }: AskFabProps) {
         fixed z-40 bottom-5 right-5
         items-center justify-center
         gap-0 hover:gap-2
-        p-3 rounded-xl
-        text-white font-medium text-[13px]
-        shadow-sm shadow-amber-900/10
+        p-3 rounded-2xl
+        text-[var(--amber-foreground)] font-medium text-[13px]
+        shadow-md shadow-[var(--amber)]/15
         transition-all duration-200 ease-out
-        hover:shadow-md hover:shadow-amber-900/15
+        hover:shadow-lg hover:shadow-[var(--amber)]/20
         active:scale-95 cursor-pointer overflow-hidden
         ${askPanelOpen ? 'opacity-0 pointer-events-none translate-y-2' : 'opacity-100 translate-y-0'}
       `}

package/app/components/AskModal.tsx CHANGED Viewed

@@ -29,7 +29,7 @@ export default function AskModal({ open, onClose, currentFile, initialMessage, i
         role="dialog"
         aria-modal="true"
         aria-label={t.ask.title}
-        className="w-full md:max-w-2xl md:mx-4 bg-card border-t md:border border-border rounded-t-2xl md:rounded-xl shadow-2xl flex flex-col h-[92vh] md:h-auto md:max-h-[75vh]"
+        className="w-full md:max-w-2xl md:mx-4 bg-card border-t md:border border-border/60 rounded-t-2xl md:rounded-2xl shadow-2xl flex flex-col h-[92vh] md:h-auto md:max-h-[75vh]"
       >
         <AskContent
           visible={open}

package/app/components/GuideCard.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
 import { useState, useEffect, useCallback, useRef } from 'react';
-import { X, Sparkles, Upload, MessageCircle, ExternalLink, Check, ChevronRight, Copy } from 'lucide-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';
@@ -9,6 +9,7 @@ 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;
@@ -18,7 +19,6 @@ export default function GuideCard() {
   const [isFirstVisit, setIsFirstVisit] = useState(false);
   const [step3Done, setStep3Done] = useState(false);
-  // Fetch guide state from backend
   const fetchGuideState = useCallback(() => {
     fetch('/api/setup')
       .then(r => r.json())
@@ -37,10 +37,8 @@ export default function GuideCard() {
   useEffect(() => {
     fetchGuideState();
     const handleFirstVisit = () => { setIsFirstVisit(true); };
     window.addEventListener('mindos:first-visit', handleFirstVisit);
     const handleGuideUpdate = () => fetchGuideState();
     window.addEventListener('focus', handleGuideUpdate);
     window.addEventListener('guide-state-updated', handleGuideUpdate);
@@ -68,7 +66,6 @@ export default function GuideCard() {
   }, [patchGuide]);
   // ── Step 1: Import ──
   const handleImportClick = useCallback(() => {
     window.dispatchEvent(new CustomEvent('mindos:open-import'));
   }, []);
@@ -78,7 +75,6 @@ export default function GuideCard() {
     setExpanded(null);
   }, [patchGuide]);
-  // Auto-mark step 1 done when files change (import completes, space created, etc.)
   useEffect(() => {
     if (!guideState || guideState.step1Done) return;
     const handler = () => patchGuide({ step1Done: true });
@@ -87,7 +83,6 @@ export default function GuideCard() {
   }, [guideState, guideState?.step1Done, patchGuide]);
   // ── Step 2: AI verify ──
   const handleStartAI = useCallback(() => {
     const gs = guideState;
     const isEmpty = gs?.template === 'empty';
@@ -96,7 +91,6 @@ export default function GuideCard() {
   }, [guideState, g]);
   // ── Step 3: Cross-agent copy ──
   const handleCopyPrompt = useCallback(async () => {
     const ok = await copyToClipboard(g.agent.copyPrompt);
     if (ok) toast.copy();
@@ -109,7 +103,6 @@ export default function GuideCard() {
   }, [patchGuide]);
   // ── Next-step prompts ──
   const handleNextStepClick = useCallback(() => {
     if (!guideState) return;
     const idx = guideState.nextStepIndex;
@@ -121,15 +114,12 @@ export default function GuideCard() {
   }, [guideState, g, patchGuide]);
   // ── Auto-expand on step transitions ──
-  // First visit: expand step 1
   useEffect(() => {
     if (isFirstVisit && guideState && !guideState.step1Done) {
       setExpanded('import');
     }
   }, [isFirstVisit, guideState]);
-  // Step transition: auto-expand next step
   const prevStepRef = useRef({ s1: false, s2: false });
   useEffect(() => {
     if (!guideState) return;
@@ -145,7 +135,6 @@ export default function GuideCard() {
   }, [guideState?.step1Done, guideState?.askedAI, guideState]);
   // ── Auto-dismiss final state ──
   const step1Done = guideState?.step1Done ?? false;
   const step2Done = guideState?.askedAI ?? false;
   const nextIdx = guideState?.nextStepIndex ?? 0;
@@ -161,7 +150,6 @@ export default function GuideCard() {
   }, [allNextDone, handleDismiss]);
   // ── Render guards ──
   if (!guideState) return null;
   const walkthroughActive = guideState.walkthroughStep !== undefined
@@ -170,17 +158,14 @@ export default function GuideCard() {
     && !guideState.walkthroughDismissed;
   if (walkthroughActive) return null;
-  // If both steps 1+2 were already done on load (e.g. page refresh), step3Done is local
-  // and starts false — this lets the user see step 3 again, which is useful.
   const showStep3 = step1Done && step2Done && !step3Done;
   // ── Final state: all next-steps done ──
   if (allCoreDone && allNextDone) {
     return (
-      <div className="mb-6 rounded-xl border border-[var(--amber)] px-5 py-4 flex items-center gap-3 animate-in fade-in duration-300 bg-[var(--amber-subtle)]">
-        <Sparkles size={16} className="animate-spin-slow text-[var(--amber)]" />
-        <span className="text-sm font-semibold flex-1 text-foreground">
+      <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
@@ -190,159 +175,159 @@ export default function GuideCard() {
           {t.walkthrough.exploreCta}
         </Link>
         <button onClick={handleDismiss} className="p-1 rounded hover:bg-muted transition-colors text-muted-foreground">
-          <X size={14} />
+          <X size={12} />
         </button>
       </div>
     );
   }
   // ── Done state: next-step prompts ──
   if (allCoreDone) {
     const step = g.done.steps[nextIdx];
     return (
-      <div className="mb-6 rounded-xl border border-[var(--amber)] px-5 py-4 animate-in fade-in duration-300 bg-[var(--amber-subtle)]">
+      <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={16} className="text-[var(--amber)]" />
-          <span className="text-sm font-semibold flex-1 text-foreground">
+          <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={14} />
+            <X size={12} />
           </button>
         </div>
         {step && (
           <button
             onClick={handleNextStepClick}
-            className="mt-3 flex items-center gap-2 text-sm text-[var(--amber)] transition-colors hover:opacity-80 cursor-pointer animate-in fade-in slide-in-from-left-2 duration-300"
+            className="mt-2 ml-6 flex items-center gap-1.5 text-xs text-[var(--amber)] transition-colors hover:opacity-80 cursor-pointer"
           >
-            <ChevronRight size={14} />
             <span>{step.hint}</span>
+            <ChevronDown size={10} className="-rotate-90" />
           </button>
         )}
       </div>
     );
   }
-  // ── Main guide card with 3 steps ──
+  // ── 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="mb-6 rounded-xl border border-[var(--amber)] overflow-hidden bg-[var(--amber-subtle)]">
+    <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}
+                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-white' : 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>
-      {/* Header */}
-      <div className="flex items-center gap-3 px-5 pt-4 pb-2">
-        <Sparkles size={16} className="text-[var(--amber)]" />
-        <span className="text-sm font-semibold flex-1 text-foreground">
-          {g.title}
-        </span>
-        <button onClick={handleDismiss} className="p-1 rounded hover:bg-muted transition-colors text-muted-foreground">
-          <X size={14} />
+        <button onClick={handleDismiss} className="p-1 rounded hover:bg-muted transition-colors text-muted-foreground shrink-0">
+          <X size={12} />
         </button>
       </div>
-      {/* Task cards */}
-      <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 px-5 py-3">
-        <TaskCard
-          icon={<Upload size={16} />}
-          title={g.import.title}
-          cta={g.import.cta}
-          done={step1Done}
-          active={expanded === 'import'}
-          onClick={() => !step1Done ? setExpanded(expanded === 'import' ? null : 'import') : null}
-        />
-        <TaskCard
-          icon={<MessageCircle size={16} />}
-          title={g.ai.title}
-          cta={g.ai.cta}
-          done={step2Done}
-          active={expanded === 'ai'}
-          dimmed={!step1Done}
-          onClick={() => {
-            if (step2Done || !step1Done) return;
-            setExpanded(expanded === 'ai' ? null : 'ai');
-          }}
-        />
-        <TaskCard
-          icon={<ExternalLink size={16} />}
-          title={g.agent.title}
-          cta={g.agent.cta}
-          done={step3Done}
-          active={expanded === 'agent'}
-          dimmed={!step1Done || !step2Done}
-          onClick={() => {
-            if (!step1Done || !step2Done) return;
-            setExpanded(expanded === 'agent' ? null : 'agent');
-          }}
-        />
-      </div>
-      {/* ── Step 1 expanded: Import files ── */}
+      {/* ── Step 1 expanded ── */}
       {expanded === 'import' && !step1Done && (
-        <div className="px-5 pb-4 animate-in slide-in-from-top-2 duration-200">
-          <div className="rounded-lg border border-border bg-card p-4">
-            <p className="text-xs text-muted-foreground mb-3">
-              {g.import.desc}
-            </p>
-            <div className="flex items-center justify-between">
-              <button
-                onClick={handleImportClick}
-                className="text-xs font-medium px-4 py-2 rounded-lg transition-all hover:opacity-90"
-                style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
-              >
-                {g.import.button}
-              </button>
-              <button
-                onClick={handleSkipImport}
-                className="text-xs px-3 py-1 rounded-lg text-muted-foreground transition-colors hover:bg-muted"
-              >
-                {g.skip}
-              </button>
-            </div>
+        <div className="px-4 pb-3 animate-in fade-in slide-in-from-top-1 duration-150">
+          <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>
       )}
-      {/* ── Step 2 expanded: AI verification ── */}
+      {/* ── Step 2 expanded ── */}
       {expanded === 'ai' && step1Done && !step2Done && (
-        <div className="px-5 pb-4 animate-in slide-in-from-top-2 duration-200">
-          <div className="rounded-lg border border-border bg-card p-4">
-            <p className="text-xs text-muted-foreground mb-3">
-              {g.ai.desc}
-            </p>
+        <div className="px-4 pb-3 animate-in fade-in slide-in-from-top-1 duration-150">
+          <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="text-xs font-medium px-4 py-2 rounded-lg transition-all hover:opacity-90"
-              style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
+              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} →
+              {g.ai.cta}
             </button>
           </div>
         </div>
       )}
-      {/* ── Step 3 expanded: Cross-agent prompt ── */}
+      {/* ── Step 3 expanded ── */}
       {expanded === 'agent' && showStep3 && (
-        <div className="px-5 pb-4 animate-in slide-in-from-top-2 duration-200">
-          <div className="rounded-lg border border-border bg-card p-4">
-            <p className="text-xs text-muted-foreground mb-3">
-              {g.agent.desc}
-            </p>
-            <div className="relative rounded-lg border border-border bg-muted/50 p-3 pr-16">
-              <p className="text-xs font-mono text-foreground leading-relaxed whitespace-pre-wrap">
+        <div className="px-4 pb-3 animate-in fade-in slide-in-from-top-1 duration-150">
+          <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.5 py-1.5 rounded-md border transition-all border-border bg-card text-muted-foreground hover:text-foreground hover:border-[var(--amber)]/30"
+                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={11} />
+                <Copy size={10} />
                 {g.agent.copy}
               </button>
             </div>
-            <div className="flex items-center justify-end mt-3 pt-3 border-t border-border">
+            <div className="flex justify-end mt-2">
               <button
                 onClick={handleStep3Done}
-                className="text-xs px-3 py-1 rounded-lg text-muted-foreground transition-colors hover:bg-muted"
+                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>
@@ -353,39 +338,3 @@ export default function GuideCard() {
     </div>
   );
 }
-function TaskCard({ icon, title, cta, done, active, dimmed, onClick }: {
-  icon: React.ReactNode;
-  title: string;
-  cta: string;
-  done: boolean;
-  active: boolean;
-  dimmed?: boolean;
-  onClick: () => void;
-}) {
-  return (
-    <button
-      onClick={onClick}
-      disabled={done || dimmed}
-      className={`
-        flex flex-col items-center gap-1.5 px-3 py-3 rounded-lg border text-center
-        transition-all duration-150
-        ${done ? 'opacity-60' : dimmed ? 'opacity-40 cursor-default' : 'hover:border-[var(--amber)]/30 hover:bg-muted/50 cursor-pointer'}
-        ${active ? 'border-[var(--amber)]/40 bg-muted/50' : ''}
-        ${done || active ? 'border-[var(--amber)]' : 'border-border'}
-      `}
-    >
-      <span className={`${done ? 'animate-in zoom-in-50 duration-300 text-success' : 'text-[var(--amber)]'}`}>
-        {done ? <Check size={16} /> : icon}
-      </span>
-      <span className="text-xs font-medium text-foreground">
-        {title}
-      </span>
-      {!done && !dimmed && (
-        <span className="text-2xs text-[var(--amber-text)]">
-          {cta} →
-        </span>
-      )}
-    </button>
-  );
-}