@geminilight/mindos 0.6.57 → 0.6.59

package/_standalone/components/GuideCard.tsx

@@ -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>
-  );
-}

package/_standalone/components/RightAskPanel.tsx

@@ -119,7 +119,7 @@ export default function RightAskPanel({
     <aside
       className={`
         hidden md:flex fixed top-0 right-0 h-screen z-40
-        flex-col bg-card border-l border-border
+        flex-col bg-background border-l border-border/40 shadow-[-4px_0_16px_rgba(0,0,0,0.04)]
         transition-[width,transform] duration-200 ease-out
         ${open ? 'translate-x-0' : 'translate-x-full pointer-events-none'}
       `}
@@ -161,7 +161,7 @@ export default function RightAskPanel({
         className="absolute top-0 -left-[3px] w-[6px] h-full cursor-col-resize z-40 group hidden md:block"
         onMouseDown={handleMouseDown}
       >
-        <div className="absolute left-[2px] top-0 w-[2px] h-full opacity-0 group-hover:opacity-100 bg-[var(--amber)]/60 transition-opacity" />
+        <div className="absolute left-[2px] top-0 w-[1px] h-full opacity-0 group-hover:opacity-100 bg-[var(--amber)]/50 transition-opacity duration-150" />
       </div>
     </aside>
   );

package/_standalone/components/agents/CustomAgentModal.tsx

@@ -16,6 +16,9 @@ interface DetectResult {
   detectedFormat?: 'json' | 'toml';
   detectedConfigKey?: string;
   hasSkillsDir: boolean;
+  detectedSkillDir?: string;
+  skillCount?: number;
+  skillNames?: string[];
   suggestedName?: string;
 }
 
@@ -28,6 +31,7 @@ interface FormState {
   preferredTransport: 'stdio' | 'http';
   project: string;
   presenceCli: string;
+  skillDir: string;
 }
 
 interface CustomAgentModalProps {
@@ -85,6 +89,7 @@ export default function CustomAgentModal({
     preferredTransport: 'stdio',
     project: '',
     presenceCli: '',
+    skillDir: '',
   });
 
   // Reset state when modal opens/closes or editAgent changes
@@ -100,6 +105,7 @@ export default function CustomAgentModal({
         preferredTransport: editAgent.preferredTransport || 'stdio',
         project: editAgent.projectPath || '',
         presenceCli: '',
+        skillDir: editAgent.skillWorkspacePath || '',
       });
       setPhase('result');
       setCustomizeOpen(true);
@@ -115,6 +121,7 @@ export default function CustomAgentModal({
         preferredTransport: 'stdio',
         project: '',
         presenceCli: '',
+        skillDir: '',
       });
       setPhase('input');
       setCustomizeOpen(false);
@@ -182,7 +189,9 @@ export default function CustomAgentModal({
     // Detect API only scans ~/ paths for security; for other absolute paths,
     // skip detection and go straight to Phase B with sensible defaults.
     if (!dir.startsWith('~/')) {
-      setField('global', (dir.endsWith('/') ? dir : dir + '/') + 'mcp.json');
+      const normalized = dir.endsWith('/') ? dir : dir + '/';
+      setField('global', normalized + 'mcp.json');
+      setField('skillDir', normalized + 'skills/');
       setDetectResult({ exists: false, hasSkillsDir: false });
       setPhase('result');
       setDetecting(false);
@@ -216,11 +225,14 @@ export default function CustomAgentModal({
       }
       if (data.detectedFormat) setField('format', data.detectedFormat);
       if (data.detectedConfigKey) setField('configKey', data.detectedConfigKey);
+      setField('skillDir', data.detectedSkillDir || (dir.endsWith('/') ? dir : dir + '/') + 'skills/');
 
       setPhase('result');
     } catch {
       clearTimeout(timeout);
-      setField('global', (dir.endsWith('/') ? dir : dir + '/') + 'mcp.json');
+      const normalized = dir.endsWith('/') ? dir : dir + '/';
+      setField('global', normalized + 'mcp.json');
+      setField('skillDir', normalized + 'skills/');
       setDetectResult({ exists: false, hasSkillsDir: false });
       setDetectTimedOut(true);
       setPhase('result');
@@ -246,6 +258,7 @@ export default function CustomAgentModal({
           preferredTransport: form.preferredTransport,
           project: form.project.trim() || null,
           presenceCli: form.presenceCli.trim() || undefined,
+          skillDir: form.skillDir.trim() || undefined,
         }
       : {
           name: form.name.trim(),
@@ -256,6 +269,7 @@ export default function CustomAgentModal({
           preferredTransport: form.preferredTransport,
           project: form.project.trim() || null,
           presenceCli: form.presenceCli.trim() || undefined,
+          skillDir: form.skillDir.trim() || undefined,
         };
 
     try {
@@ -410,12 +424,12 @@ export default function CustomAgentModal({
                   <span className="text-muted-foreground">{p.customAgentTransportLabel}</span>
                   <span className="text-foreground">{form.preferredTransport}</span>
 
-                  {detectResult?.hasSkillsDir && (
-                    <>
-                      <span className="text-muted-foreground">{p.customAgentSkillsLabel}</span>
-                      <span className="text-foreground">{p.customAgentSkillsFound(0)}</span>
-                    </>
-                  )}
+                  <span className="text-muted-foreground">{p.customAgentSkillsLabel}</span>
+                  <span className="text-foreground">
+                    {detectResult?.hasSkillsDir
+                      ? p.customAgentSkillsFound(detectResult.skillCount ?? 0)
+                      : p.customAgentSkillsNone ?? '—'}
+                  </span>
                 </div>
               </div>
 
@@ -490,6 +504,16 @@ export default function CustomAgentModal({
                       </div>
                     </Field>
 
+                    {/* Skills Directory */}
+                    <Field label={p.customAgentSkillDir} hint={p.customAgentSkillDirHint}>
+                      <Input
+                        value={form.skillDir}
+                        onChange={(e) => setField('skillDir', e.target.value)}
+                        placeholder={p.customAgentSkillDirPlaceholder}
+                        autoComplete="off"
+                      />
+                    </Field>
+
                     {/* Project Config */}
                     <Field label={p.customAgentProjectConfig}>
                       <Input