@geminilight/mindos 0.5.43 → 0.5.45

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}

package/app/components/explore/use-cases.ts

@@ -1,30 +1,58 @@
-export type UseCaseCategory = 'getting-started' | 'cross-agent' | 'knowledge-evolution' | 'advanced';
+/** Capability axis — maps to product pillars */
+export type UseCaseCategory = 'knowledge-management' | 'memory-sync' | 'auto-execute' | 'experience-evolution' | 'human-insights' | 'audit-control';
+
+/** Scenario axis — maps to user journey phase */
+export type UseCaseScenario = 'first-day' | 'daily' | 'project' | 'advanced';
 
 export interface UseCase {
   id: string;
   icon: string;
   category: UseCaseCategory;
+  scenario: UseCaseScenario;
 }
 
 /**
  * C1-C9 use case definitions.
  * All display text (title, description, prompt) comes from i18n — this file is structure only.
+ *
+ * Category (capability axis):
+ *   knowledge-management — Inject, organize, and maintain knowledge
+ *   memory-sync         — Record once, all Agents know
+ *   auto-execute        — One sentence, auto-execute
+ *   experience-evolution — Gets smarter with use
+ *   human-insights      — Understand and manage relationships
+ *   audit-control       — You have final say
+ *
+ * Scenario (journey axis):
+ *   first-day — Onboarding / first-time tasks
+ *   daily     — Everyday workflows
+ *   project   — Project-scoped work
+ *   advanced  — Power-user patterns
  */
 export const useCases: UseCase[] = [
-  { id: 'c1', icon: '👤', category: 'getting-started' },
-  { id: 'c2', icon: '📥', category: 'getting-started' },
-  { id: 'c3', icon: '🔄', category: 'cross-agent' },
-  { id: 'c4', icon: '🔁', category: 'knowledge-evolution' },
-  { id: 'c5', icon: '💡', category: 'cross-agent' },
-  { id: 'c6', icon: '🚀', category: 'cross-agent' },
-  { id: 'c7', icon: '🔍', category: 'knowledge-evolution' },
-  { id: 'c8', icon: '🤝', category: 'knowledge-evolution' },
-  { id: 'c9', icon: '🛡️', category: 'advanced' },
+  { id: 'c1', icon: '👤', category: 'memory-sync',           scenario: 'first-day' },
+  { id: 'c2', icon: '📥', category: 'knowledge-management',  scenario: 'daily' },
+  { id: 'c3', icon: '🔄', category: 'memory-sync',           scenario: 'project' },
+  { id: 'c4', icon: '🔁', category: 'experience-evolution',  scenario: 'daily' },
+  { id: 'c5', icon: '💡', category: 'auto-execute',          scenario: 'daily' },
+  { id: 'c6', icon: '🚀', category: 'auto-execute',          scenario: 'project' },
+  { id: 'c7', icon: '🔍', category: 'knowledge-management',  scenario: 'project' },
+  { id: 'c8', icon: '🤝', category: 'human-insights',        scenario: 'daily' },
+  { id: 'c9', icon: '🛡️', category: 'audit-control',        scenario: 'advanced' },
 ];
 
 export const categories: UseCaseCategory[] = [
-  'getting-started',
-  'cross-agent',
-  'knowledge-evolution',
+  'knowledge-management',
+  'memory-sync',
+  'auto-execute',
+  'experience-evolution',
+  'human-insights',
+  'audit-control',
+];
+
+export const scenarios: UseCaseScenario[] = [
+  'first-day',
+  'daily',
+  'project',
   'advanced',
 ];

package/app/components/panels/DiscoverPanel.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import { useState } from 'react';
 import Link from 'next/link';
-import { ChevronDown, ChevronRight, ExternalLink, Blocks, Zap } from 'lucide-react';
+import { Lightbulb, Blocks, Zap, LayoutTemplate, ChevronRight, User, Download, RefreshCw, Repeat, Rocket, Search, Handshake, ShieldCheck } from 'lucide-react';
 import PanelHeader from './PanelHeader';
 import { useLocale } from '@/lib/LocaleContext';
 import { useCases } from '@/components/explore/use-cases';
@@ -14,56 +13,61 @@ interface DiscoverPanelProps {
   onMaximize?: () => void;
 }
 
-/** Collapsible section with count badge */
-function Section({
+/** Navigation entry — clickable row linking to a page or showing coming soon */
+function NavEntry({
   icon,
   title,
-  count,
-  defaultOpen = true,
-  children,
+  badge,
+  href,
+  onClick,
 }: {
   icon: React.ReactNode;
   title: string;
-  count?: number;
-  defaultOpen?: boolean;
-  children: React.ReactNode;
+  badge?: React.ReactNode;
+  href?: string;
+  onClick?: () => void;
 }) {
-  const [open, setOpen] = useState(defaultOpen);
+  const content = (
+    <>
+      <span className="flex items-center justify-center w-7 h-7 rounded-md bg-muted shrink-0">{icon}</span>
+      <span className="text-sm font-medium text-foreground flex-1">{title}</span>
+      {badge}
+      <ChevronRight size={14} className="text-muted-foreground shrink-0" />
+    </>
+  );
+
+  const className = "flex items-center gap-3 px-4 py-2.5 hover:bg-muted/50 transition-colors cursor-pointer";
+
+  if (href) {
+    return <Link href={href} className={className}>{content}</Link>;
+  }
+  return <button onClick={onClick} className={`${className} w-full`}>{content}</button>;
+}
+
+/** Coming soon badge */
+function ComingSoonBadge({ label }: { label: string }) {
   return (
-    <div>
-      <button
-        onClick={() => setOpen(v => !v)}
-        className="flex items-center gap-2 w-full px-4 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider hover:text-foreground transition-colors"
-      >
-        {open ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
-        <span className="flex items-center gap-1.5">
-          {icon}
-          {title}
-        </span>
-        {count !== undefined && (
-          <span className="ml-auto text-2xs tabular-nums opacity-60">{count}</span>
-        )}
-      </button>
-      {open && <div className="pb-2">{children}</div>}
-    </div>
+    <span className="text-2xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground shrink-0">
+      {label}
+    </span>
   );
 }
 
-/** Compact use case row for panel display */
+/** Compact use case row */
 function UseCaseRow({
   icon,
   title,
   prompt,
   tryLabel,
 }: {
-  icon: string;
+  icon: React.ReactNode;
   title: string;
   prompt: string;
   tryLabel: string;
 }) {
   return (
-    <div className="group flex items-center gap-2 px-4 py-1.5 hover:bg-muted/50 transition-colors rounded-sm mx-1">
-      <span className="text-sm leading-none shrink-0" suppressHydrationWarning>{icon}</span>
+    <div className="group flex items-center gap-2.5 px-4 py-1.5 hover:bg-muted/50 transition-colors rounded-sm mx-1">
+      <span className="text-muted-foreground shrink-0">{icon}</span>
       <span className="text-xs text-foreground truncate flex-1">{title}</span>
       <button
         onClick={() => openAskModal(prompt, 'user')}
@@ -75,29 +79,18 @@ function UseCaseRow({
   );
 }
 
-/** Coming soon placeholder */
-function ComingSoonSection({
-  icon,
-  title,
-  description,
-  comingSoonLabel,
-}: {
-  icon: React.ReactNode;
-  title: string;
-  description: string;
-  comingSoonLabel: string;
-}) {
-  return (
-    <Section icon={icon} title={title} defaultOpen={false}>
-      <div className="px-4 py-3 mx-1">
-        <p className="text-xs text-muted-foreground leading-relaxed">{description}</p>
-        <span className="inline-block mt-2 text-2xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground">
-          {comingSoonLabel}
-        </span>
-      </div>
-    </Section>
-  );
-}
+/** Map use case id → lucide icon */
+const useCaseIcons: Record<string, React.ReactNode> = {
+  c1: <User size={12} />,          // Inject Identity
+  c2: <Download size={12} />,      // Save Information
+  c3: <RefreshCw size={12} />,     // Cross-Agent Handoff
+  c4: <Repeat size={12} />,        // Experience → SOP
+  c5: <Lightbulb size={12} />,     // Capture Ideas
+  c6: <Rocket size={12} />,        // Project Cold Start
+  c7: <Search size={12} />,        // Research & Archive
+  c8: <Handshake size={12} />,     // Network Management
+  c9: <ShieldCheck size={12} />,   // Audit & Correct
+};
 
 export default function DiscoverPanel({ active, maximized, onMaximize }: DiscoverPanelProps) {
   const { t } = useLocale();
@@ -117,54 +110,51 @@ export default function DiscoverPanel({ active, maximized, onMaximize }: Discove
     <div className={`flex flex-col h-full ${active ? '' : 'hidden'}`}>
       <PanelHeader title={d.title} maximized={maximized} onMaximize={onMaximize} />
       <div className="flex-1 overflow-y-auto min-h-0">
-        {/* Use Cases */}
-        <Section icon={<span className="text-xs" suppressHydrationWarning>🎯</span>} title={d.useCases} count={useCases.length}>
-          <div className="flex flex-col">
-            {useCases.map(uc => {
-              const data = getUseCaseText(uc.id);
-              if (!data) return null;
-              return (
-                <UseCaseRow
-                  key={uc.id}
-                  icon={uc.icon}
-                  title={data.title}
-                  prompt={data.prompt}
-                  tryLabel={d.tryIt}
-                />
-              );
-            })}
-          </div>
-        </Section>
-
-        <div className="mx-4 border-t border-border" />
-
-        {/* Plugin Market — Coming Soon */}
-        <ComingSoonSection
-          icon={<Blocks size={11} />}
-          title={d.pluginMarket}
-          description={d.pluginMarketDesc}
-          comingSoonLabel={d.comingSoon}
-        />
+        {/* Navigation entries */}
+        <div className="py-2">
+          <NavEntry
+            icon={<Lightbulb size={14} className="text-[var(--amber)]" />}
+            title={d.useCases}
+            badge={<span className="text-2xs tabular-nums text-muted-foreground">{useCases.length}</span>}
+            href="/explore"
+          />
+          <NavEntry
+            icon={<Blocks size={14} className="text-muted-foreground" />}
+            title={d.pluginMarket}
+            badge={<ComingSoonBadge label={d.comingSoon} />}
+          />
+          <NavEntry
+            icon={<Zap size={14} className="text-muted-foreground" />}
+            title={d.skillMarket}
+            badge={<ComingSoonBadge label={d.comingSoon} />}
+          />
+          <NavEntry
+            icon={<LayoutTemplate size={14} className="text-muted-foreground" />}
+            title={d.spaceTemplates}
+            badge={<ComingSoonBadge label={d.comingSoon} />}
+          />
+        </div>
 
         <div className="mx-4 border-t border-border" />
 
-        {/* Skill Market — Coming Soon */}
-        <ComingSoonSection
-          icon={<Zap size={11} />}
-          title={d.skillMarket}
-          description={d.skillMarketDesc}
-          comingSoonLabel={d.comingSoon}
-        />
-
-        {/* View all link */}
-        <div className="px-4 py-3 mt-2">
-          <Link
-            href="/explore"
-            className="inline-flex items-center gap-1.5 text-xs text-[var(--amber)] hover:opacity-80 transition-opacity"
-          >
-            {d.viewAll}
-            <ExternalLink size={11} />
-          </Link>
+        {/* Quick try — use case list */}
+        <div className="py-2">
+          <div className="px-4 py-1.5">
+            <span className="text-2xs font-medium text-muted-foreground uppercase tracking-wider">{d.useCases}</span>
+          </div>
+          {useCases.map(uc => {
+            const data = getUseCaseText(uc.id);
+            if (!data) return null;
+            return (
+              <UseCaseRow
+                key={uc.id}
+                icon={useCaseIcons[uc.id] || <Lightbulb size={12} />}
+                title={data.title}
+                prompt={data.prompt}
+                tryLabel={d.tryIt}
+              />
+            );
+          })}
         </div>
       </div>
     </div>