@geminilight/mindos 0.6.58 → 0.6.60

package/app/components/Panel.tsx

@@ -316,7 +316,12 @@ export default function Panel({
             </div>
           </div>
         </PanelHeader>
-        <div className="flex-1 overflow-y-auto min-h-0 px-2 py-2">
+        <div
+          className="flex-1 overflow-y-auto min-h-0 px-2 py-2"
+          onDragEnter={(e) => { if (e.dataTransfer.types.includes('Files')) e.stopPropagation(); }}
+          onDragOver={(e) => { if (e.dataTransfer.types.includes('Files')) { e.preventDefault(); e.stopPropagation(); } }}
+          onDrop={(e) => { if (e.dataTransfer.types.includes('Files')) { e.preventDefault(); e.stopPropagation(); } }}
+        >
           <FileTree nodes={fileTree} onNavigate={onNavigate} maxOpenDepth={maxOpenDepth} onImport={onImport} />
         </div>
         <SyncStatusBar collapsed={false} onOpenSyncSettings={onOpenSyncSettings} />

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

@@ -2,7 +2,8 @@
 
 import { useState, useEffect, useMemo } from 'react';
 import Link from 'next/link';
-import { Brain, ChevronDown, FolderOpen, Plus, Sparkles, Search, FilePlus, ArrowRight } from 'lucide-react';
+import { Brain, ChevronDown, FolderOpen, Plus, Sparkles, Search, FilePlus, ArrowRight, Clock, FileText, Table, Star, X, History } from 'lucide-react';
+import { usePinnedFiles } from '@/lib/hooks/usePinnedFiles';
 import { useLocale } from '@/lib/stores/locale-store';
 import { encodePath, relativeTime, extractEmoji, stripEmoji } from '@/lib/utils';
 import { InboxSection } from '@/components/home/InboxSection';
@@ -39,7 +40,7 @@ function getSpaceLatestMtime(spaceName: string, recentFiles: RecentFile[]): numb
   return maxMtime;
 }
 
-const SPACES_COLLAPSED = 9;
+const SPACES_COLLAPSED = 6;
 
 export default function WikiHomeContent({ spaces, recent }: WikiHomeContentProps) {
   const { t } = useLocale();
@@ -107,7 +108,7 @@ export default function WikiHomeContent({ spaces, recent }: WikiHomeContentProps
                 key={suggestionIdx}
                 className="text-sm text-left text-muted-foreground animate-in fade-in duration-300"
               >
-                {suggestions[suggestionIdx]}
+                {suggestions[suggestionIdx].label}
               </span>
             </div>
             <kbd className="hidden sm:inline-flex items-center gap-0.5 px-2 py-0.5 rounded text-xs font-mono font-medium bg-[var(--amber-dim)] text-[var(--amber-text)]">
@@ -263,6 +264,17 @@ export default function WikiHomeContent({ spaces, recent }: WikiHomeContentProps
       {/* ══════════ Inbox ══════════ */}
       <InboxSection />
 
+      {/* ══════════ Pinned Files ══════════ */}
+      <PinnedFilesSection formatTime={formatTime} />
+
+      {/* ── Visual divider ── */}
+      <div className="border-t border-border/30 mb-8" />
+
+      {/* ══════════ Recently Edited (flat list) ══════════ */}
+      {recent.length > 0 && (
+        <RecentlyEditedSection recent={recent} formatTime={formatTime} />
+      )}
+
       {/* Footer */}
       <div className="py-6 border-t border-border/20 flex items-center gap-1.5 text-xs font-display text-muted-foreground/30">
         <Sparkles size={10} className="text-[var(--amber)]/40" />
@@ -271,3 +283,139 @@ export default function WikiHomeContent({ spaces, recent }: WikiHomeContentProps
     </div>
   );
 }
+
+/* ── Section Title ── */
+function SectionTitle({ icon, children, count, action }: {
+  icon: React.ReactNode;
+  children: React.ReactNode;
+  count?: number;
+  action?: React.ReactNode;
+}) {
+  return (
+    <div className="flex items-center gap-2.5 mb-4">
+      <div className="flex items-center justify-center w-6 h-6 rounded-md bg-[var(--amber-subtle)] text-[var(--amber)]">
+        {icon}
+      </div>
+      <h2 className="text-[13px] font-semibold text-foreground tracking-wide">
+        {children}
+      </h2>
+      {count != null && count > 0 && (
+        <span className="inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-[10px] font-semibold rounded-full bg-muted text-muted-foreground tabular-nums">{count}</span>
+      )}
+      {action ? <div className="ml-auto">{action}</div> : null}
+    </div>
+  );
+}
+
+/* ── Pinned Files Section ── */
+function PinnedFilesSection({ formatTime }: { formatTime: (t: number) => string }) {
+  const { t } = useLocale();
+  const { pinnedFiles, removePin } = usePinnedFiles();
+
+  if (pinnedFiles.length === 0) return null;
+
+  return (
+    <section className="mb-8">
+      <SectionTitle icon={<Star size={14} />} count={pinnedFiles.length}>
+        {t.pinnedFiles.title}
+      </SectionTitle>
+      <div className="flex flex-col gap-0.5">
+        {pinnedFiles.map((filePath) => {
+          const name = filePath.split('/').pop() || filePath;
+          const dir = filePath.split('/').slice(0, -1).join('/');
+          const isCSV = filePath.endsWith('.csv');
+          return (
+            <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 overflow-hidden"
+              >
+                <Star size={12} className="shrink-0 fill-[var(--amber)] text-[var(--amber)]" />
+                {isCSV
+                  ? <Table size={12} className="shrink-0 text-success" />
+                  : <FileText size={12} className="shrink-0 text-muted-foreground" />
+                }
+                <div className="flex-1 min-w-0">
+                  <span className="text-sm truncate block text-foreground" suppressHydrationWarning>{name}</span>
+                  {dir && <span className="text-xs truncate block text-muted-foreground opacity-50" suppressHydrationWarning>{dir}</span>}
+                </div>
+              </Link>
+              <button
+                onClick={(e) => { e.preventDefault(); e.stopPropagation(); removePin(filePath); }}
+                className="absolute right-2 top-1/2 -translate-y-1/2 hidden group-hover/pin:flex p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                title={t.pinnedFiles.removedToast}
+              >
+                <X size={12} />
+              </button>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
+
+/* ── Recently Edited Section ── */
+const RECENT_FILES_LIMIT = 8;
+
+function RecentlyEditedSection({ recent, formatTime }: { recent: RecentFile[]; formatTime: (t: number) => string }) {
+  const { t } = useLocale();
+  const [showAll, setShowAll] = useState(false);
+
+  return (
+    <section className="mb-8">
+      <SectionTitle
+        icon={<Clock size={14} />}
+        count={recent.length}
+        action={
+          <Link
+            href="/changes"
+            className="flex items-center gap-1.5 text-xs font-medium text-[var(--amber)] transition-colors hover:opacity-80"
+          >
+            <History size={12} />
+            <span>{t.home.changeHistory}</span>
+          </Link>
+        }
+      >
+        {t.home.recentlyEdited}
+      </SectionTitle>
+
+      <div className="flex flex-col gap-0.5">
+        {(showAll ? recent : recent.slice(0, RECENT_FILES_LIMIT)).map(({ path: filePath, mtime }) => {
+          const name = filePath.split('/').pop() || filePath;
+          const dir = filePath.split('/').slice(0, -1).join('/');
+          const isCSV = filePath.endsWith('.csv');
+          return (
+            <Link
+              key={filePath}
+              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 overflow-hidden"
+            >
+              {isCSV
+                ? <Table size={12} className="shrink-0 text-success" />
+                : <FileText size={12} className="shrink-0 text-muted-foreground" />
+              }
+              <div className="flex-1 min-w-0">
+                <span className="text-sm truncate block text-foreground" suppressHydrationWarning>{name}</span>
+                {dir && <span className="text-xs truncate block text-muted-foreground opacity-50" suppressHydrationWarning>{dir}</span>}
+              </div>
+              <span className="text-xs shrink-0 tabular-nums text-muted-foreground/40" suppressHydrationWarning>
+                {formatTime(mtime)}
+              </span>
+            </Link>
+          );
+        })}
+      </div>
+      {recent.length > RECENT_FILES_LIMIT && (
+        <button
+          onClick={() => setShowAll(v => !v)}
+          aria-expanded={showAll}
+          className="flex items-center gap-1.5 text-xs font-medium text-[var(--amber)] transition-colors hover:opacity-80 cursor-pointer mt-2 ml-1"
+        >
+          <ChevronDown size={12} className={`transition-transform duration-200 ${showAll ? 'rotate-180' : ''}`} />
+          <span>{showAll ? t.home.showLess : t.home.showMore}</span>
+        </button>
+      )}
+    </section>
+  );
+}

package/app/components/agents/AgentDetailContent.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   ArrowLeft, Activity, Globe, Key, Loader2, MoreHorizontal, Pencil, Server, Search,
-  Shield, ShieldCheck, Trash2, Wifi, WifiOff, Zap,
+  Shield, ShieldCheck, Trash2, Wifi, WifiOff, Zap, Copy, AlertTriangle,
   FileEdit, FilePlus, Clock, Terminal, CheckCircle2, AlertCircle, ChevronDown, BookOpen,
 } from 'lucide-react';
 import { useLocale } from '@/lib/stores/locale-store';
@@ -196,6 +196,35 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
     }
   }, [a.detail.skillDeleteSuccess, a.detail.skillDeleteFailed, mcp]);
 
+  const handleCopySkillToAgent = useCallback(async (skillName: string) => {
+    if (!agent?.skillWorkspacePath) return;
+    setSkillBusy(skillName);
+    setEditError(null);
+    try {
+      const res = await apiFetch<{ success: boolean; targetPath?: string }>(
+        '/api/agents/copy-skill',
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            skillName,
+            targetPath: agent.skillWorkspacePath,
+          }),
+        }
+      );
+      if (res.success) {
+        toast.success(`Skill "${skillName}" copied to ${agent.name}`);
+        await mcp.refresh();
+      }
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : 'Failed to copy skill';
+      setEditError(msg);
+      toast.error(msg);
+    } finally {
+      setSkillBusy(null);
+    }
+  }, [agent, mcp]);
+
   const handleCopySnippet = useCallback(async () => {
     const ok = await copyToClipboard(snippet.snippet);
     if (ok) toast.copy();
@@ -460,6 +489,22 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
           </div>
         )}
 
+        {/* Unsupported Skill Installation Notice (for agents like QClaw, WorkBuddy) */}
+        {agent?.skillMode === 'unsupported' && (
+          <div className="rounded-lg border border-[var(--amber)]/20 bg-[var(--amber-dim)] p-3 mb-2">
+            <p className="text-sm font-medium text-foreground mb-2 flex items-center gap-1.5">
+              <AlertTriangle size={14} className="text-[var(--amber)] shrink-0" aria-hidden="true" />
+              Manual Skill Installation
+            </p>
+            <p className="text-xs text-muted-foreground mb-3">
+              This agent doesn&apos;t support <code className="bg-background px-1 py-0.5 rounded text-xs font-mono">npx skills</code>. Copy skills manually:
+            </p>
+            <div className="bg-background rounded-md px-3 py-2 font-mono text-xs overflow-x-auto border border-border/50 select-all">
+              cp -r ~/.mindos/skills/&lt;skill-name&gt; {agent.skillWorkspacePath || '~/.agent/skills/'}
+            </div>
+          </div>
+        )}
+
         {/* MindOS Skills */}
         {filteredSkills.length > 0 && (
           <div>
@@ -510,6 +555,18 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
                             </button>
                           </>
                         )}
+                        {agent?.skillMode === 'unsupported' && (
+                          <button
+                            type="button"
+                            onClick={() => void handleCopySkillToAgent(skill.name)}
+                            disabled={skillBusy === skill.name}
+                            className="inline-flex items-center justify-center min-h-[28px] px-1.5 rounded-md text-muted-foreground hover:text-[var(--amber)] cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-150"
+                            title={`Copy ${skill.name} to ${agent.name}`}
+                            aria-label={`Copy ${skill.name} to ${agent.name}`}
+                          >
+                            <Copy size={13} />
+                          </button>
+                        )}
                       </div>
                     </div>
 

package/app/components/agents/AgentsOverviewSection.tsx

@@ -223,17 +223,7 @@ export default function AgentsOverviewSection({
             </span>
           </div>
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
-            {sortedAgents.map((agent, i) => (
-              <AgentCard
-                key={agent.key}
-                agent={agent}
-                copy={copy}
-                index={i}
-                mcpEnabled={mcpEnabled}
-                onEdit={agent.isCustom ? onEditCustomAgent : undefined}
-                onRemove={agent.isCustom ? onRemoveCustomAgent : undefined}
-              />
-            ))}
+            {/* Add Custom Agent Button — Always First */}
             {onAddCustomAgent && (
               <button
                 type="button"
@@ -254,6 +244,18 @@ export default function AgentsOverviewSection({
                 </span>
               </button>
             )}
+            {/* Agent Cards */}
+            {sortedAgents.map((agent, i) => (
+              <AgentCard
+                key={agent.key}
+                agent={agent}
+                copy={copy}
+                index={i}
+                mcpEnabled={mcpEnabled}
+                onEdit={agent.isCustom ? onEditCustomAgent : undefined}
+                onRemove={agent.isCustom ? onRemoveCustomAgent : undefined}
+              />
+            ))}
           </div>
         </section>
       ) : (

package/app/components/agents/CustomAgentModal.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import { X, Loader2, ChevronRight, ChevronDown, CheckCircle2, Info, AlertCircle } from 'lucide-react';
+import { X, Loader2, ChevronRight, ChevronDown, CheckCircle2, Info, AlertCircle, Server, Zap } from 'lucide-react';
 import { useLocale } from '@/lib/stores/locale-store';
 import { useFocusTrap } from '@/lib/hooks/useFocusTrap';
 import { toast } from '@/lib/toast';
@@ -19,6 +19,8 @@ interface DetectResult {
   detectedSkillDir?: string;
   skillCount?: number;
   skillNames?: string[];
+  mcpServers?: string[];
+  mcpParseError?: string;
   suggestedName?: string;
 }
 
@@ -406,7 +408,7 @@ export default function CustomAgentModal({
           {phase === 'result' && (
             <>
               {/* Result Card */}
-              <div className={`rounded-lg p-4 space-y-2 ${
+              <div className={`rounded-lg p-4 space-y-3 ${
                 detectResult?.exists
                   ? 'border border-[var(--success)]/20 bg-[var(--success)]/5'
                   : 'border border-border bg-muted/30'
@@ -414,22 +416,74 @@ export default function CustomAgentModal({
                 <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
                   {detectResult?.exists ? p.customAgentDetectedTitle : p.customAgentDefaultTitle}
                 </p>
-                <div className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5 text-sm">
-                  <span className="text-muted-foreground">{p.customAgentConfigLabel}</span>
-                  <span className="text-foreground font-mono text-xs truncate">{form.global}</span>
-
-                  <span className="text-muted-foreground">{p.customAgentFormatLabel}</span>
-                  <span className="text-foreground">{form.format.toUpperCase()} · {form.configKey}</span>
-
-                  <span className="text-muted-foreground">{p.customAgentTransportLabel}</span>
-                  <span className="text-foreground">{form.preferredTransport}</span>
-
-                  <span className="text-muted-foreground">{p.customAgentSkillsLabel}</span>
-                  <span className="text-foreground">
-                    {detectResult?.hasSkillsDir
-                      ? p.customAgentSkillsFound(detectResult.skillCount ?? 0)
-                      : p.customAgentSkillsNone ?? '—'}
-                  </span>
+                <div className="space-y-2.5">
+                  {/* Config Path */}
+                  <div>
+                    <p className="text-xs text-muted-foreground mb-1">{p.customAgentConfigLabel}</p>
+                    <span className="text-sm text-foreground font-mono truncate block">{form.global}</span>
+                    {detectResult?.mcpParseError && (
+                      <p className="text-xs text-[var(--error)] mt-1 flex items-center gap-1">
+                        <AlertCircle size={12} className="shrink-0" />
+                        {detectResult.mcpParseError}
+                      </p>
+                    )}
+                  </div>
+
+                  {/* Format & Key */}
+                  <div className="grid grid-cols-2 gap-2">
+                    <div>
+                      <p className="text-xs text-muted-foreground mb-1">{p.customAgentFormatLabel}</p>
+                      <span className="text-sm text-foreground">{form.format.toUpperCase()}</span>
+                    </div>
+                    <div>
+                      <p className="text-xs text-muted-foreground mb-1">Config Key</p>
+                      <span className="text-sm text-foreground font-mono">{form.configKey}</span>
+                    </div>
+                  </div>
+
+                  {/* Transport */}
+                  <div>
+                    <p className="text-xs text-muted-foreground mb-1">{p.customAgentTransportLabel}</p>
+                    <span className="text-sm text-foreground">{form.preferredTransport}</span>
+                  </div>
+
+                  {/* MCP Servers */}
+                  <div>
+                    <p className="text-xs text-muted-foreground mb-1 flex items-center gap-1">
+                      <Server size={11} className="shrink-0" aria-hidden="true" />
+                      MCP Servers
+                    </p>
+                    {detectResult?.mcpServers && detectResult.mcpServers.length > 0 ? (
+                      <div className="flex flex-wrap gap-1">
+                        {detectResult.mcpServers.map(name => (
+                          <span key={name} className="text-xs bg-muted/60 text-foreground px-2 py-0.5 rounded font-mono">
+                            {name}
+                          </span>
+                        ))}
+                      </div>
+                    ) : (
+                      <span className="text-sm text-muted-foreground">—</span>
+                    )}
+                  </div>
+
+                  {/* Skills */}
+                  <div>
+                    <p className="text-xs text-muted-foreground mb-1 flex items-center gap-1">
+                      <Zap size={11} className="shrink-0" aria-hidden="true" />
+                      {p.customAgentSkillsLabel}
+                    </p>
+                    {detectResult?.skillNames && detectResult.skillNames.length > 0 ? (
+                      <div className="flex flex-wrap gap-1">
+                        {detectResult.skillNames.map(name => (
+                          <span key={name} className="text-xs bg-[var(--amber-dim)] text-[var(--amber-text,var(--foreground))] px-2 py-0.5 rounded font-mono">
+                            {name}
+                          </span>
+                        ))}
+                      </div>
+                    ) : (
+                      <span className="text-sm text-muted-foreground">—</span>
+                    )}
+                  </div>
                 </div>
               </div>