@geminilight/mindos 0.5.43 → 0.5.44

package/app/app/api/ask-sessions/route.ts

@@ -74,17 +74,19 @@ export async function POST(req: NextRequest) {
 }
 
 export async function DELETE(req: NextRequest) {
-  let body: { id?: string };
+  let body: { id?: string; ids?: string[] };
   try {
     body = await req.json();
   } catch {
     return NextResponse.json({ error: 'Invalid JSON body' }, { status: 400 });
   }
 
-  const id = body.id;
-  if (!id) return NextResponse.json({ error: 'id is required' }, { status: 400 });
+  // Support both single id and bulk ids
+  const idsToDelete = body.ids ?? (body.id ? [body.id] : []);
+  if (idsToDelete.length === 0) return NextResponse.json({ error: 'id or ids is required' }, { status: 400 });
 
-  const sessions = readSessions().filter((s) => s.id !== id);
+  const deleteSet = new Set(idsToDelete);
+  const sessions = readSessions().filter((s) => !deleteSet.has(s.id));
   writeSessions(sessions);
   return NextResponse.json({ ok: true });
 }

package/app/app/api/update-status/route.ts

@@ -0,0 +1,19 @@
+export const dynamic = 'force-dynamic';
+import { NextResponse } from 'next/server';
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
+import { homedir } from 'os';
+
+const STATUS_PATH = resolve(homedir(), '.mindos', 'update-status.json');
+
+const IDLE_RESPONSE = { stage: 'idle', stages: [], error: null, version: null, startedAt: null };
+
+export async function GET() {
+  try {
+    const raw = readFileSync(STATUS_PATH, 'utf-8');
+    const data = JSON.parse(raw);
+    return NextResponse.json(data);
+  } catch {
+    return NextResponse.json(IDLE_RESPONSE);
+  }
+}

package/app/components/CreateSpaceModal.tsx

@@ -2,11 +2,12 @@
 
 import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { Folder, Loader2, X } from 'lucide-react';
+import { Folder, Loader2, X, Sparkles, AlertTriangle } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { useLocale } from '@/lib/LocaleContext';
 import { encodePath } from '@/lib/utils';
 import { createSpaceAction } from '@/lib/actions';
+import { apiFetch } from '@/lib/api';
 import DirPicker from './DirPicker';
 
 /* ── Create Space Modal ── */
@@ -20,6 +21,8 @@ export default function CreateSpaceModal({ t, dirPaths }: { t: ReturnType<typeof
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
   const [nameHint, setNameHint] = useState('');
+  const [aiAvailable, setAiAvailable] = useState<boolean | null>(null); // null = loading
+  const [useAi, setUseAi] = useState(true);
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -33,6 +36,24 @@ export default function CreateSpaceModal({ t, dirPaths }: { t: ReturnType<typeof
     return () => window.removeEventListener('mindos:create-space', handler);
   }, []);
 
+  // Check AI availability when modal opens
+  useEffect(() => {
+    if (!open || aiAvailable !== null) return;
+    apiFetch<{ ai?: { provider?: string; providers?: Record<string, { apiKey?: string }> } }>('/api/settings')
+      .then(data => {
+        const provider = data.ai?.provider ?? '';
+        const providers = data.ai?.providers ?? {};
+        const activeProvider = providers[provider as keyof typeof providers];
+        const hasKey = !!(activeProvider?.apiKey);
+        setAiAvailable(hasKey);
+        setUseAi(hasKey);
+      })
+      .catch(() => {
+        setAiAvailable(false);
+        setUseAi(false);
+      });
+  }, [open, aiAvailable]);
+
   const close = useCallback(() => {
     setOpen(false);
     setName('');
@@ -40,6 +61,7 @@ export default function CreateSpaceModal({ t, dirPaths }: { t: ReturnType<typeof
     setParent('');
     setError('');
     setNameHint('');
+    setAiAvailable(null); // re-check on next open
   }, []);
 
   const validateName = useCallback((val: string) => {
@@ -64,9 +86,26 @@ export default function CreateSpaceModal({ t, dirPaths }: { t: ReturnType<typeof
     setError('');
     const trimmed = name.trim();
     const result = await createSpaceAction(trimmed, description, parent);
-    setLoading(false);
     if (result.success) {
       const createdPath = result.path ?? trimmed;
+
+      // If AI is enabled, trigger AI initialization in background
+      if (useAi && aiAvailable) {
+        const isZh = document.documentElement.lang === 'zh';
+        const prompt = isZh
+          ? `初始化新建的心智空间「${trimmed}」，路径为「${createdPath}/」。${description ? `描述：「${description}」。` : ''}请根据空间名称生成有意义的内容：\n1. README.md — 空间用途、结构概览、使用指南\n2. INSTRUCTION.md — AI Agent 在此空间的行为规则\n\n使用可用工具直接写入文件，内容简洁实用。`
+          : `Initialize this new Mind Space "${trimmed}" at "${createdPath}/". ${description ? `Description: "${description}". ` : ''}Generate meaningful content for:\n1. README.md — purpose, structure overview, usage guidelines\n2. INSTRUCTION.md — rules for AI agents operating in this space\n\nWrite directly to the files using available tools. Keep content concise and actionable.`;
+        // Fire and forget — don't block navigation
+        apiFetch('/api/ask', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            messages: [{ role: 'user', content: prompt }],
+            targetDir: createdPath,
+          }),
+        }).catch(() => { /* AI init is best-effort */ });
+      }
+
       close();
       router.refresh();
       router.push(`/view/${encodePath(createdPath + '/')}`);
@@ -78,7 +117,8 @@ export default function CreateSpaceModal({ t, dirPaths }: { t: ReturnType<typeof
         setError(t.home.spaceCreateFailed ?? 'Failed to create space');
       }
     }
-  }, [name, description, parent, loading, close, router, t, validateName]);
+    setLoading(false);
+  }, [name, description, parent, loading, close, router, t, validateName, useAi, aiAvailable]);
 
   const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
     if (e.key === 'Escape') close();
@@ -87,6 +127,8 @@ export default function CreateSpaceModal({ t, dirPaths }: { t: ReturnType<typeof
 
   if (!open) return null;
 
+  const h = t.home;
+
   return createPortal(
     <div className="fixed inset-0 z-50 flex items-center justify-center" onKeyDown={handleKeyDown}>
       {/* Backdrop */}
@@ -95,31 +137,31 @@ export default function CreateSpaceModal({ t, dirPaths }: { t: ReturnType<typeof
       <div
         role="dialog"
         aria-modal="true"
-        aria-label={t.home.newSpace}
+        aria-label={h.newSpace}
         className="relative w-full max-w-md mx-4 rounded-2xl border border-border bg-card shadow-xl"
       >
         {/* Header */}
         <div className="flex items-center justify-between px-5 pt-5 pb-3">
-          <h3 className="text-sm font-semibold font-display text-foreground">{t.home.newSpace}</h3>
+          <h3 className="text-sm font-semibold font-display text-foreground">{h.newSpace}</h3>
           <button onClick={close} className="p-1 rounded-md text-muted-foreground hover:bg-muted transition-colors">
             <X size={14} />
           </button>
         </div>
         {/* Body */}
         <div className="px-5 pb-5 flex flex-col gap-3">
-          {/* Location — hierarchical browser */}
+          {/* Location */}
           <div className="space-y-1">
-            <label className="text-xs font-medium text-muted-foreground">{t.home.spaceLocation ?? 'Location'}</label>
+            <label className="text-xs font-medium text-muted-foreground">{h.spaceLocation ?? 'Location'}</label>
             <DirPicker
               dirPaths={dirPaths}
               value={parent}
               onChange={setParent}
-              rootLabel={t.home.rootLevel ?? 'Root'}
+              rootLabel={h.rootLevel ?? 'Root'}
             />
           </div>
           {/* Name */}
           <div className="space-y-1">
-            <label className="text-xs font-medium text-muted-foreground">{t.home.spaceName}</label>
+            <label className="text-xs font-medium text-muted-foreground">{h.spaceName}</label>
             <input
               ref={inputRef}
               type="text"
@@ -138,17 +180,49 @@ export default function CreateSpaceModal({ t, dirPaths }: { t: ReturnType<typeof
           {/* Description */}
           <div className="space-y-1">
             <label className="text-xs font-medium text-muted-foreground">
-              {t.home.spaceDescription} <span className="opacity-50">({t.home.optional ?? 'optional'})</span>
+              {h.spaceDescription} <span className="opacity-50">({h.optional ?? 'optional'})</span>
             </label>
             <input
               type="text"
               value={description}
               onChange={e => setDescription(e.target.value)}
-              placeholder={t.home.spaceDescPlaceholder ?? 'Describe the purpose of this space'}
+              placeholder={h.spaceDescPlaceholder ?? 'Describe the purpose of this space'}
               maxLength={200}
               className="w-full px-3 py-2 text-sm rounded-lg border border-border bg-background text-muted-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring transition-colors"
             />
           </div>
+          {/* AI initialization toggle */}
+          <div className="flex items-start gap-2.5 px-1 py-1">
+            <button
+              type="button"
+              role="switch"
+              aria-checked={useAi}
+              disabled={!aiAvailable}
+              onClick={() => setUseAi(v => !v)}
+              className={`relative mt-0.5 inline-flex shrink-0 h-4 w-7 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 ${
+                useAi ? 'bg-amber-500' : 'bg-muted'
+              }`}
+            >
+              <span className={`pointer-events-none inline-block h-3 w-3 rounded-full bg-white shadow-sm transition-transform ${useAi ? 'translate-x-3' : 'translate-x-0'}`} />
+            </button>
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-1.5">
+                <Sparkles size={12} className="text-[var(--amber)] shrink-0" />
+                <span className="text-xs font-medium text-foreground">{h.aiInit ?? 'AI initialize content'}</span>
+              </div>
+              {aiAvailable === false && (
+                <p className="text-2xs text-muted-foreground mt-0.5 flex items-center gap-1">
+                  <AlertTriangle size={10} className="text-amber-500 shrink-0" />
+                  {h.aiInitNoKey ?? 'Configure an API key in Settings → AI to enable'}
+                </p>
+              )}
+              {aiAvailable && useAi && (
+                <p className="text-2xs text-muted-foreground mt-0.5">
+                  {h.aiInitHint ?? 'AI will generate README and INSTRUCTION for this space'}
+                </p>
+              )}
+            </div>
+          </div>
           {/* Path preview */}
           {fullPathPreview && (
             <div className="flex items-center gap-1.5 text-xs text-muted-foreground font-mono px-1">
@@ -163,7 +237,7 @@ export default function CreateSpaceModal({ t, dirPaths }: { t: ReturnType<typeof
               onClick={close}
               className="px-4 py-2 rounded-lg text-sm font-medium text-muted-foreground transition-colors hover:bg-muted"
             >
-              {t.home.cancelCreate}
+              {h.cancelCreate}
             </button>
             <button
               onClick={handleCreate}
@@ -171,7 +245,7 @@ export default function CreateSpaceModal({ t, dirPaths }: { t: ReturnType<typeof
               className="flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium bg-[var(--amber)] text-white transition-colors hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed"
             >
               {loading && <Loader2 size={14} className="animate-spin" />}
-              {t.home.createSpace}
+              {h.createSpace}
             </button>
           </div>
         </div>

package/app/components/DirPicker.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect, useMemo } from 'react';
 import { Folder, ChevronDown, ChevronRight } from 'lucide-react';
+import { stripEmoji } from '@/lib/utils';
 
 interface DirPickerProps {
   /** Flat list of all directory paths (e.g. ['Notes', 'Notes/Daily', 'Projects']) */
@@ -48,7 +49,7 @@ export default function DirPicker({ dirPaths, value, onChange, rootLabel = 'Root
   };
 
   const displayLabel = value
-    ? value.split('/').map(s => s.replace(/^[\p{Emoji_Presentation}\p{Extended_Pictographic}\s]+/u, '') || s).join(' / ')
+    ? value.split('/').map(s => stripEmoji(s)).join(' / ')
     : '/ ' + rootLabel;
 
   if (!expanded) {

package/app/components/GuideCard.tsx

@@ -5,22 +5,26 @@ import { X, Sparkles, FolderOpen, MessageCircle, RefreshCw, Check, ChevronRight
 import Link from 'next/link';
 import { useLocale } from '@/lib/LocaleContext';
 import { openAskModal } from '@/hooks/useAskModal';
+import { extractEmoji, stripEmoji } from '@/lib/utils';
 import { walkthroughSteps } from './walkthrough/steps';
 import type { GuideState } from '@/lib/settings';
+import type { SpaceInfo } from '@/app/page';
 
-const DIR_ICONS: Record<string, string> = {
-  profile: '👤', notes: '📝', connections: '🔗',
-  workflows: '🔄', resources: '📚', projects: '🚀',
-};
-
-const EMPTY_FILES = ['INSTRUCTION.md', 'README.md', 'CONFIG.json'];
+interface RecentFile {
+  path: string;
+  mtime: number;
+}
 
 interface GuideCardProps {
   /** Called when user clicks a file/dir to open it in FileView */
   onNavigate?: (path: string) => void;
+  /** Existing spaces for dynamic directory listing */
+  spaces?: SpaceInfo[];
+  /** Recent files for empty-template fallback */
+  recentFiles?: RecentFile[];
 }
 
-export default function GuideCard({ onNavigate }: GuideCardProps) {
+export default function GuideCard({ onNavigate, spaces = [], recentFiles = [] }: GuideCardProps) {
   const { t } = useLocale();
   const g = t.guide;
 
@@ -228,29 +232,37 @@ export default function GuideCard({ onNavigate }: GuideCardProps) {
 
             {isEmptyTemplate ? (
               <div className="flex flex-col gap-1.5">
-                {EMPTY_FILES.map(file => (
-                  <button key={file} onClick={() => handleFileOpen(file)}
-                    className="text-left text-xs px-3 py-2 rounded-lg border border-border text-foreground transition-colors hover:border-amber-500/30 hover:bg-muted/50">
-                    📄 {(g.kb.emptyFiles as Record<string, string>)[file.split('.')[0].toLowerCase()] || file}
-                  </button>
-                ))}
-                <p className="text-xs mt-2 text-muted-foreground opacity-70">
-                  {g.kb.emptyHint}
-                </p>
+                {recentFiles.length > 0 ? (
+                  recentFiles.map(file => {
+                    const fileName = file.path.split('/').pop() || file.path;
+                    return (
+                      <button key={file.path} onClick={() => handleFileOpen(file.path)}
+                        className="text-left text-xs px-3 py-2 rounded-lg border border-border text-foreground transition-colors hover:border-amber-500/30 hover:bg-muted/50 truncate">
+                        📄 {fileName}
+                      </button>
+                    );
+                  })
+                ) : (
+                  <p className="text-xs text-muted-foreground">{g.kb.emptyHint}</p>
+                )}
               </div>
             ) : (
               <>
                 <div className="grid grid-cols-2 sm:grid-cols-3 gap-1.5">
-                  {Object.entries(DIR_ICONS).map(([key, icon]) => (
-                    <button key={key} onClick={() => handleFileOpen(key.charAt(0).toUpperCase() + key.slice(1))}
-                      className="text-left text-xs px-3 py-2 rounded-lg border border-border text-foreground transition-colors hover:border-amber-500/30 hover:bg-muted/50">
-                      <span className="mr-1.5">{icon}</span>
-                      <span className="capitalize">{key}</span>
-                      <span className="block text-2xs mt-0.5 text-muted-foreground">
-                        {(g.kb.dirs as Record<string, string>)[key]}
-                      </span>
-                    </button>
-                  ))}
+                  {spaces.slice(0, 6).map(s => {
+                    const emoji = extractEmoji(s.name);
+                    const label = stripEmoji(s.name);
+                    return (
+                      <button key={s.name} onClick={() => handleFileOpen(s.path)}
+                        className="text-left text-xs px-3 py-2 rounded-lg border border-border text-foreground transition-colors hover:border-amber-500/30 hover:bg-muted/50">
+                        <span className="mr-1.5">{emoji || '📁'}</span>
+                        <span>{label}</span>
+                        <span className="block text-2xs mt-0.5 text-muted-foreground">
+                          {t.home.nFiles(s.fileCount)}
+                        </span>
+                      </button>
+                    );
+                  })}
                 </div>
                 <p className="text-xs mt-3 text-[var(--amber)]">
                   💡 {g.kb.instructionHint}

package/app/components/HomeContent.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link';
 import { FileText, Table, Clock, Sparkles, ArrowRight, FilePlus, Search, ChevronDown, Compass, Folder, Puzzle, Brain, Plus } from 'lucide-react';
 import { useState, useEffect, useMemo } from 'react';
 import { useLocale } from '@/lib/LocaleContext';
-import { encodePath, relativeTime } from '@/lib/utils';
+import { encodePath, relativeTime, extractEmoji, stripEmoji } from '@/lib/utils';
 import { getAllRenderers } from '@/lib/renderers/registry';
 import '@/lib/renderers/index'; // registers all renderers
 import OnboardingView from './OnboardingView';
@@ -65,17 +65,6 @@ function groupBySpace(recent: RecentFile[], spaces: SpaceInfo[]): { groups: Spac
   return { groups, rootFiles };
 }
 
-/** Extract leading emoji from a directory name, e.g. "📝 Notes" → "📝" */
-function extractEmoji(name: string): string {
-  const match = name.match(/^[\p{Emoji_Presentation}\p{Extended_Pictographic}]+/u);
-  return match?.[0] ?? '';
-}
-
-/** Strip leading emoji+space from name for display, e.g. "📝 Notes" → "Notes" */
-function stripEmoji(name: string): string {
-  return name.replace(/^[\p{Emoji_Presentation}\p{Extended_Pictographic}\s]+/u, '') || name;
-}
-
 /* ── Section Title component (shared across all three sections) ── */
 interface SectionTitleProps {
   icon: React.ReactNode;
@@ -146,7 +135,11 @@ export default function HomeContent({ recent, existingFiles, spaces, dirPaths }:
 
   return (
     <div className="content-width px-4 md:px-6 py-8 md:py-12">
-      <GuideCard onNavigate={(path) => { window.location.href = `/view/${encodeURIComponent(path)}`; }} />
+      <GuideCard
+        onNavigate={(path) => { window.location.href = `/view/${encodeURIComponent(path)}`; }}
+        spaces={spaceList}
+        recentFiles={recent.slice(0, 5)}
+      />
 
       {/* ── Hero ── */}
       <div className="mb-10">

package/app/components/ask/AskContent.tsx

@@ -267,7 +267,7 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
           </span>
         </div>
         <div className="flex items-center gap-1">
-          <button type="button" onClick={() => setShowHistory(v => !v)} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title="Session history">
+          <button type="button" onClick={() => setShowHistory(v => !v)} aria-pressed={showHistory} className={`p-1 rounded transition-colors ${showHistory ? 'bg-muted text-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-muted'}`} title="Session history">
             <History size={iconSize} />
           </button>
           <button type="button" onClick={handleResetSession} disabled={isLoading} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors disabled:opacity-40" title="New session">
@@ -284,7 +284,7 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
             </button>
           )}
           {onClose && (
-            <button onClick={onClose} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" aria-label="Close">
+            <button type="button" onClick={onClose} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" aria-label="Close">
               <X size={isPanel ? iconSize : 15} />
             </button>
           )}
@@ -297,6 +297,13 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
           activeSessionId={session.activeSessionId}
           onLoad={handleLoadSession}
           onDelete={session.deleteSession}
+          onClearAll={session.clearAllSessions}
+          labels={{
+            title: t.ask.sessionHistory ?? 'Session History',
+            clearAll: t.ask.clearAll ?? 'Clear all',
+            confirmClear: t.ask.confirmClear ?? 'Confirm clear?',
+            noSessions: t.ask.noSessions ?? 'No saved sessions.',
+          }}
         />
       )}
 
@@ -400,7 +407,7 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
               <StopCircle size={inputIconSize} />
             </button>
           ) : (
-            <button type="submit" disabled={!input.trim()} className="p-1.5 rounded-md disabled:opacity-40 disabled:cursor-not-allowed transition-opacity shrink-0" style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}>
+            <button type="submit" disabled={!input.trim() || mention.mentionQuery !== null} className="p-1.5 rounded-md disabled:opacity-40 disabled:cursor-not-allowed transition-opacity shrink-0 bg-[var(--amber)] text-[var(--amber-foreground)]">
               <Send size={isPanel ? 13 : 14} />
             </button>
           )}

package/app/components/ask/SessionHistory.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useState, useRef, useEffect } from 'react';
 import { Trash2 } from 'lucide-react';
 import type { ChatSession } from '@/lib/types';
 import { sessionTitle } from '@/hooks/useAskSession';
@@ -9,15 +10,50 @@ interface SessionHistoryProps {
   activeSessionId: string | null;
   onLoad: (id: string) => void;
   onDelete: (id: string) => void;
+  onClearAll: () => void;
+  labels: { title: string; clearAll: string; confirmClear: string; noSessions: string };
 }
 
-export default function SessionHistory({ sessions, activeSessionId, onLoad, onDelete }: SessionHistoryProps) {
+export default function SessionHistory({ sessions, activeSessionId, onLoad, onDelete, onClearAll, labels }: SessionHistoryProps) {
+  const [confirmClearAll, setConfirmClearAll] = useState(false);
+  const clearTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  // Cleanup timer on unmount
+  useEffect(() => () => { if (clearTimerRef.current) clearTimeout(clearTimerRef.current); }, []);
+
+  const handleClearAll = () => {
+    if (!confirmClearAll) {
+      setConfirmClearAll(true);
+      if (clearTimerRef.current) clearTimeout(clearTimerRef.current);
+      clearTimerRef.current = setTimeout(() => setConfirmClearAll(false), 3000);
+      return;
+    }
+    if (clearTimerRef.current) clearTimeout(clearTimerRef.current);
+    onClearAll();
+    setConfirmClearAll(false);
+  };
+
   return (
     <div className="border-b border-border px-4 py-2.5 max-h-[190px] overflow-y-auto">
-      <div className="text-xs text-muted-foreground mb-2">Session History</div>
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-xs text-muted-foreground">{labels.title}</span>
+        {sessions.length > 1 && (
+          <button
+            type="button"
+            onClick={handleClearAll}
+            className={`text-2xs px-1.5 py-0.5 rounded transition-colors ${
+              confirmClearAll
+                ? 'bg-error/10 text-error font-medium'
+                : 'text-muted-foreground hover:text-error hover:bg-muted'
+            }`}
+          >
+            {confirmClearAll ? labels.confirmClear : labels.clearAll}
+          </button>
+        )}
+      </div>
       <div className="flex flex-col gap-1.5">
         {sessions.length === 0 && (
-          <div className="text-xs text-muted-foreground/70">No saved sessions.</div>
+          <div className="text-xs text-muted-foreground/70">{labels.noSessions}</div>
         )}
         {sessions.map((s) => (
           <div key={s.id} className="flex items-center gap-1.5">

package/app/components/explore/ExploreContent.tsx

@@ -2,17 +2,20 @@
 
 import { useState } from 'react';
 import { useLocale } from '@/lib/LocaleContext';
-import { useCases, categories, type UseCaseCategory } from './use-cases';
+import { useCases, categories, scenarios, type UseCaseCategory, type UseCaseScenario } from './use-cases';
 import UseCaseCard from './UseCaseCard';
 
 export default function ExploreContent() {
   const { t } = useLocale();
   const e = t.explore;
   const [activeCategory, setActiveCategory] = useState<UseCaseCategory | 'all'>('all');
+  const [activeScenario, setActiveScenario] = useState<UseCaseScenario | 'all'>('all');
 
-  const filtered = activeCategory === 'all'
-    ? useCases
-    : useCases.filter(uc => uc.category === activeCategory);
+  const filtered = useCases.filter(uc => {
+    if (activeCategory !== 'all' && uc.category !== activeCategory) return false;
+    if (activeScenario !== 'all' && uc.scenario !== activeScenario) return false;
+    return true;
+  });
 
   /** Type-safe lookup for use case i18n data by id */
   const getUseCaseText = (id: string): { title: string; desc: string; prompt: string } | undefined => {
@@ -44,21 +47,42 @@ export default function ExploreContent() {
         </p>
       </div>
 
-      {/* Category tabs */}
-      <div className="flex flex-wrap gap-2 mb-6" style={{ paddingLeft: '1rem' }}>
-        <CategoryChip
-          label={e.all}
-          active={activeCategory === 'all'}
-          onClick={() => setActiveCategory('all')}
-        />
-        {categories.map(cat => (
-          <CategoryChip
-            key={cat}
-            label={(e.categories as Record<string, string>)[cat]}
-            active={activeCategory === cat}
-            onClick={() => setActiveCategory(cat)}
+      {/* Dual-axis filter */}
+      <div className="space-y-3 mb-6" style={{ paddingLeft: '1rem' }}>
+        {/* Capability axis */}
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="text-2xs text-muted-foreground uppercase tracking-wider font-medium w-16 shrink-0">{e.byCapability}</span>
+          <FilterChip
+            label={e.all}
+            active={activeCategory === 'all'}
+            onClick={() => setActiveCategory('all')}
           />
-        ))}
+          {categories.map(cat => (
+            <FilterChip
+              key={cat}
+              label={(e.categories as Record<string, string>)[cat]}
+              active={activeCategory === cat}
+              onClick={() => setActiveCategory(cat)}
+            />
+          ))}
+        </div>
+        {/* Scenario axis */}
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="text-2xs text-muted-foreground uppercase tracking-wider font-medium w-16 shrink-0">{e.byScenario}</span>
+          <FilterChip
+            label={e.all}
+            active={activeScenario === 'all'}
+            onClick={() => setActiveScenario('all')}
+          />
+          {scenarios.map(sc => (
+            <FilterChip
+              key={sc}
+              label={(e.scenarios as Record<string, string>)[sc]}
+              active={activeScenario === sc}
+              onClick={() => setActiveScenario(sc)}
+            />
+          ))}
+        </div>
       </div>
 
       {/* Card grid */}
@@ -78,11 +102,18 @@ export default function ExploreContent() {
           );
         })}
       </div>
+
+      {/* Empty state */}
+      {filtered.length === 0 && (
+        <p className="text-sm text-muted-foreground text-center py-12" style={{ paddingLeft: '1rem' }}>
+          No use cases match the current filters.
+        </p>
+      )}
     </div>
   );
 }
 
-function CategoryChip({ label, active, onClick }: { label: string; active: boolean; onClick: () => void }) {
+function FilterChip({ label, active, onClick }: { label: string; active: boolean; onClick: () => void }) {
   return (
     <button
       onClick={onClick}