@geminilight/mindos 0.6.58 → 0.6.59

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/ask/AskContent.tsx

@@ -15,7 +15,6 @@ import MessageList from '@/components/ask/MessageList';
 import MentionPopover from '@/components/ask/MentionPopover';
 import SlashCommandPopover from '@/components/ask/SlashCommandPopover';
 import SessionHistory from '@/components/ask/SessionHistory';
-import SessionTabBar from '@/components/ask/SessionTabBar';
 import AskHeader from '@/components/ask/AskHeader';
 import FileChip from '@/components/ask/FileChip';
 import AgentSelectorCapsule from '@/components/ask/AgentSelectorCapsule';
@@ -65,8 +64,8 @@ interface AskContentProps {
   /** ACP agent pre-selected via "Use" button from A2A tab */
   initialAcpAgent?: AcpAgentSelection | null;
   onFirstMessage?: () => void;
-  /** 'modal' renders close button + ESC handler; 'panel' renders compact header */
-  variant: 'modal' | 'panel';
+  /** 'modal' renders close button + ESC handler; 'panel' renders compact header; 'home' renders embedded on homepage */
+  variant: 'modal' | 'panel' | 'home';
   /** Required for modal variant — called on close button / ESC / backdrop click */
   onClose?: () => void;
   maximized?: boolean;
@@ -79,6 +78,7 @@ interface AskContentProps {
 
 export default function AskContent({ visible, currentFile, initialMessage, initialAcpAgent, onFirstMessage, variant, onClose, maximized, onMaximize, askMode, onModeSwitch }: AskContentProps) {
   const isPanel = variant === 'panel';
+  const isHome = variant === 'home';
 
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const imageInputRef = useRef<HTMLInputElement>(null);
@@ -160,12 +160,26 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
     return () => window.removeEventListener('mindos:inject-ask-files', handler);
   }, []);
 
+  // Home suggestion chip click — inject text into input
+  useEffect(() => {
+    if (!isHome) return;
+    const handler = (e: Event) => {
+      const text = (e as CustomEvent).detail?.text;
+      if (typeof text === 'string') {
+        setInput(text);
+        setTimeout(() => inputRef.current?.focus(), 50);
+      }
+    };
+    window.addEventListener('mindos:home-suggestion', handler);
+    return () => window.removeEventListener('mindos:home-suggestion', handler);
+  }, [isHome]);
+
   // Focus and init session when becoming visible (edge-triggered for panel, level-triggered for modal)
   const prevVisibleRef = useRef(false);
   const prevFileRef = useRef(currentFile);
   useEffect(() => {
-    const justOpened = variant === 'panel'
-      ? (visible && !prevVisibleRef.current)  // panel: edge detection
+    const justOpened = variant === 'panel' || variant === 'home'
+      ? (visible && !prevVisibleRef.current)  // panel/home: edge detection
       : visible;                               // modal: level detection (reset every open)
 
     // Detect file change while panel is already open
@@ -173,14 +187,15 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
 
     if (justOpened) {
       setTimeout(() => inputRef.current?.focus(), 50);
+      // Home variant: also load sessions so user can switch
       void session.initSessions();
       setInput(initialMessage || '');
       chat.firstMessageFired.current = false;
       setAttachedFiles(currentFile ? [currentFile] : []);
-    upload.clearAttachments();
-    imageUpload.clearImages();
-    mention.resetMention();
-    slash.resetSlash();
+      upload.clearAttachments();
+      imageUpload.clearImages();
+      mention.resetMention();
+      slash.resetSlash();
     setSelectedSkill(null);
     setSelectedAcpAgent(initialAcpAgent ?? null);
     setShowHistory(false);
@@ -191,6 +206,10 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
       // Modal: abort streaming on close
       chat.abortRef.current?.abort();
     }
+    // Home variant: auto-focus on mount
+    if (variant === 'home' && visible && !prevVisibleRef.current) {
+      setTimeout(() => inputRef.current?.focus(), 150);
+    }
     prevVisibleRef.current = visible;
     prevFileRef.current = currentFile;
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -209,9 +228,9 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible, session.messages, session.activeSessionId, chat.isLoading]);
 
-  // Esc to close modal or exit focus mode
+  // Esc to close modal or exit focus mode (skip for home variant)
   useEffect(() => {
-    if (!visible) return;
+    if (!visible || variant === 'home') return;
     const isModal = variant === 'modal';
     const isFocused = variant === 'panel' && maximized;
     if (!isModal && !isFocused) return;
@@ -376,6 +395,7 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
     setSelectedSkill(null);
     setSelectedAcpAgent(null);
     setShowHistory(false);
+    chat.firstMessageFired.current = false;
     setTimeout(() => inputRef.current?.focus(), 0);
   }, [currentFile]);
 
@@ -438,34 +458,31 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
     thinking: t.ask.thinking,
     generating: t.ask.generating,
     reconnecting: reconnectAttempt > 0 ? t.ask.reconnecting(reconnectAttempt, reconnectMaxRef.current) : undefined,
+    copyMessage: t.ask.copyMessage,
   }), [t, reconnectAttempt]);
 
   return (
     <>
+      {/* Header — home variant shows session switcher + new/history/fullscreen buttons */}
       <AskHeader
-        isPanel={isPanel}
+        isPanel={isPanel || isHome}
         showHistory={showHistory}
         onToggleHistory={toggleHistory}
         onReset={handleResetSession}
         isLoading={isLoading}
         maximized={maximized}
-        onMaximize={onMaximize}
-        askMode={askMode}
-        onModeSwitch={onModeSwitch}
-        onClose={onClose}
+        onMaximize={isHome ? onMaximize : onMaximize}
+        askMode={isHome ? undefined : askMode}
+        onModeSwitch={isHome ? undefined : onModeSwitch}
+        onClose={isHome ? undefined : onClose}
+        sessions={session.sessions}
+        activeSessionId={session.activeSessionId}
+        onLoadSession={handleLoadSession}
+        onDeleteSession={session.deleteSession}
+        onRenameSession={session.renameSession}
+        onTogglePinSession={session.togglePinSession}
       />
 
-      {/* Session tabs — panel variant only */}
-      {isPanel && session.sessions.length > 0 && (
-        <SessionTabBar
-          sessions={session.sessions}
-          activeSessionId={session.activeSessionId}
-          onLoad={handleLoadSession}
-          onDelete={session.deleteSession}
-          onNew={handleResetSession}
-        />
-      )}
-
       {showHistory && (
         <SessionHistory
           sessions={session.sessions}
@@ -473,6 +490,7 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
           onLoad={handleLoadSession}
           onDelete={session.deleteSession}
           onRename={session.renameSession}
+          onTogglePin={session.togglePinSession}
           onClearAll={session.clearAllSessions}
           labels={{
             title: t.ask.sessionHistory ?? 'Session History',
@@ -485,16 +503,31 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
       )}
 
       {/* Messages */}
-      <MessageList
-        messages={session.messages}
-        isLoading={isLoading}
-        loadingPhase={loadingPhase}
-        emptyPrompt={t.ask.emptyPrompt}
-        emptyHint={t.ask.emptyHint}
-        suggestions={t.ask.suggestions}
-        onSuggestionClick={setInput}
-        labels={messageLabels}
-      />
+      {/* Messages — home variant hides empty state (suggestions rendered externally) */}
+      {!isHome && (
+        <MessageList
+          messages={session.messages}
+          isLoading={isLoading}
+          loadingPhase={loadingPhase}
+          emptyPrompt={t.ask.emptyPrompt}
+          emptyHint={t.ask.emptyHint}
+          suggestions={t.ask.suggestions}
+          onSuggestionClick={setInput}
+          labels={messageLabels}
+        />
+      )}
+      {isHome && session.messages.length > 0 && (
+        <MessageList
+          messages={session.messages}
+          isLoading={isLoading}
+          loadingPhase={loadingPhase}
+          emptyPrompt={t.ask.emptyPrompt}
+          emptyHint={t.ask.emptyHint}
+          suggestions={[]}
+          onSuggestionClick={setInput}
+          labels={messageLabels}
+        />
+      )}
 
       {/* Popovers — flex children so they stay within overflow boundary (absolute positioning would be clipped by RightAskPanel's overflow-hidden) */}
       {mention.mentionQuery !== null && mention.mentionResults.length > 0 && (
@@ -519,11 +552,11 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
         </div>
       )}
 
-      {/* Composer card — unified input area with rounded container */}
-      <div className="shrink-0 px-3 pb-2 pt-1">
+      {/* Composer card — unified input area */}
+      <div className="shrink-0 px-3 pb-2.5 pt-1">
         <div
           className={cn(
-            'rounded-xl border border-border/60 bg-card shadow-sm transition-shadow',
+            'rounded-xl bg-muted/40 transition-all focus-within:bg-muted/60',
             isDragOver && 'ring-2 ring-[var(--amber)] bg-[var(--amber-dim)]',
           )}
           onDragOver={handleDragOver}
@@ -568,23 +601,23 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
           <form
             ref={formRef}
             onSubmit={handleSubmit}
-            className="flex items-end gap-1 px-1.5 py-1.5"
+            className="flex items-end gap-1.5 px-3 py-2"
           >
             {/* + attach button with mini menu */}
             <div className="relative shrink-0">
               <button
                 type="button"
                 onClick={() => setShowAttachMenu(v => !v)}
-                className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/60 transition-colors"
+                className="p-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/60 transition-colors"
                 title={t.hints.attachFile}
               >
                 <Plus size={inputIconSize} />
               </button>
               {showAttachMenu && (
-                <div className="absolute bottom-full left-0 mb-1 py-1 rounded-lg border border-border bg-card shadow-lg z-50 min-w-[140px]">
+                <div className="absolute bottom-full left-0 mb-1.5 py-1 rounded-xl border border-border/60 bg-card shadow-lg z-50 min-w-[150px] animate-in fade-in-0 slide-in-from-bottom-2 duration-150">
                   <button
                     type="button"
-                    className="flex w-full items-center gap-2 px-3 py-1.5 text-xs hover:bg-muted transition-colors text-left"
+                    className="flex w-full items-center gap-2.5 px-3 py-2 text-xs hover:bg-muted transition-colors text-left rounded-lg"
                     onClick={() => { setShowAttachMenu(false); upload.uploadInputRef.current?.click(); }}
                   >
                     <FileText size={12} className="shrink-0 text-muted-foreground" />
@@ -592,7 +625,7 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
                   </button>
                   <button
                     type="button"
-                    className="flex w-full items-center gap-2 px-3 py-1.5 text-xs hover:bg-muted transition-colors text-left"
+                    className="flex w-full items-center gap-2.5 px-3 py-2 text-xs hover:bg-muted transition-colors text-left rounded-lg"
                     onClick={() => { setShowAttachMenu(false); imageInputRef.current?.click(); }}
                   >
                     <ImageIcon size={12} className="shrink-0 text-muted-foreground" />
@@ -637,23 +670,24 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
               onPaste={handlePaste}
               placeholder={t.ask.placeholder}
               rows={1}
-              className="min-w-0 flex-1 resize-none overflow-y-hidden bg-transparent py-1.5 text-sm leading-snug text-foreground placeholder:text-muted-foreground outline-none focus-visible:ring-0"
+              className="min-w-0 flex-1 resize-none overflow-y-hidden bg-transparent py-2 text-sm leading-relaxed text-foreground placeholder:text-muted-foreground/50 outline-none focus-visible:ring-0"
             />
 
             {isLoading ? (
-              <button type="button" onClick={handleStop} className="p-1.5 rounded-lg transition-colors shrink-0 text-muted-foreground hover:text-foreground hover:bg-muted/60" title={loadingPhase === 'reconnecting' ? t.ask.cancelReconnect : t.ask.stopTitle}>
+              <button type="button" onClick={handleStop} className="p-2 rounded-xl transition-colors shrink-0 text-foreground bg-muted hover:bg-muted/80" title={loadingPhase === 'reconnecting' ? t.ask.cancelReconnect : t.ask.stopTitle}>
                 {loadingPhase === 'reconnecting' ? <X size={inputIconSize} /> : <StopCircle size={inputIconSize} />}
               </button>
             ) : (
-              <button type="submit" disabled={!input.trim() && imageUpload.images.length === 0} className="p-1.5 rounded-lg disabled:opacity-40 disabled:cursor-not-allowed transition-opacity shrink-0 bg-[var(--amber)] text-[var(--amber-foreground)]">
+              <button type="submit" disabled={!input.trim() && imageUpload.images.length === 0} className="p-2 rounded-xl disabled:opacity-20 disabled:scale-95 disabled:cursor-not-allowed transition-all duration-150 shrink-0 bg-[var(--amber)] text-[var(--amber-foreground)] shadow-sm shadow-[var(--amber)]/15 hover:shadow-md hover:shadow-[var(--amber)]/20 active:scale-95">
                 <Send size={14} />
               </button>
             )}
           </form>
 
-          {/* Mode + Agent + Provider selector row — inside card bottom */}
-          <div className="flex items-center gap-1.5 px-3 pb-2 pt-0.5 border-t border-border/30">
-            <ModeCapsule mode={chatMode} onChange={setChatMode} disabled={isLoading} />
+          {/* Mode + Agent + Provider selector row + keyboard hint */}
+          <div className="flex items-center justify-between px-3 pb-2 pt-1.5 border-t border-border/10">
+            <div className="flex items-center gap-2">
+              <ModeCapsule mode={chatMode} onChange={setChatMode} disabled={isLoading} />
             {mounted && acpDetection.installedAgents.length > 0 && (
               <AgentSelectorCapsule
                 selectedAgent={selectedAcpAgent}
@@ -669,6 +703,11 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
                 disabled={isLoading}
               />
             )}
+            </div>
+            {/* Keyboard hint */}
+            <span className="hidden md:inline text-2xs text-muted-foreground/40 select-none">
+              <kbd className="font-mono">Enter</kbd> {t.ask.send} · <kbd className="font-mono">Shift+Enter</kbd> {t.ask.newlineHint}
+            </span>
           </div>
         </div>
       </div>