feat(analysis): enhance AnalysisPage with filters, grid layout and fullscreen mode

- Add status filter tabs (all/in_progress/completed)
- Add date filter tabs (all/today/week/month)
- Add date quick filter bubbles with session counts
- Change layout from list to 4-column grid (16 items per page)
- Add fullscreen/immersive mode toggle
- Make cards compact with smaller font and more content
- Add clickable status badges for quick filtering
- Reduce padding for consistency with other pages
- Show session ID, status, date and conclusions indicator on cards

ccw/frontend/src/pages/AnalysisPage.tsx

@@ -3,14 +3,14 @@
 // ========================================
 // View analysis sessions from /workflow:analyze-with-file command
 
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import {
   FileSearch,
   Search,
-  Calendar,
   CheckCircle,
   Clock,
+  ChevronLeft,
   ChevronRight,
   Loader2,
   AlertCircle,
@@ -18,57 +18,87 @@ import {
   FileText,
   Code,
   MessageSquare,
+  Maximize2,
+  Minimize2,
 } from 'lucide-react';
 import { useWorkflowStore } from '@/stores/workflowStore';
+import { useAppStore } from '@/stores/appStore';
 import { Card } from '@/components/ui/Card';
 import { Input } from '@/components/ui/Input';
 import { Badge } from '@/components/ui/Badge';
 import { Button } from '@/components/ui/Button';
 import { TabsNavigation } from '@/components/ui/TabsNavigation';
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerClose,
+} from '@/components/ui/Drawer';
 import { fetchAnalysisSessions, fetchAnalysisDetail } from '@/lib/api';
 import { MessageRenderer } from '@/components/shared/CliStreamMonitor/MessageRenderer';
 import { JsonCardView } from '@/components/shared/JsonCardView';
 import { cn } from '@/lib/utils';
 import type { AnalysisSessionSummary } from '@/types/analysis';
 
-// ========== Session Card Component ==========
+const PAGE_SIZE = 16; // 4 rows × 4 columns
+
+// ========== Session Card Component (Compact) ==========
 
 interface SessionCardProps {
   session: AnalysisSessionSummary;
   onClick: () => void;
-  isSelected: boolean;
+  onStatusClick: (status: string) => void;
+  isStatusFiltered: boolean;
 }
 
-function SessionCard({ session, onClick, isSelected }: SessionCardProps) {
+function SessionCard({ session, onClick, onStatusClick, isStatusFiltered }: SessionCardProps) {
+  const handleStatusClick = (e: React.MouseEvent) => {
+    e.stopPropagation(); // Prevent card click
+    onStatusClick(session.status);
+  };
+
   return (
     <Card
-      className={cn(
-        'p-4 cursor-pointer transition-all hover:shadow-md',
-        isSelected && 'ring-2 ring-primary'
-      )}
+      className="p-3 cursor-pointer transition-all hover:shadow-md hover:border-primary/50 h-full flex flex-col"
       onClick={onClick}
     >
-      <div className="flex items-start justify-between mb-3">
-        <div className="flex items-center gap-2 flex-1 min-w-0">
-          <FileSearch className="w-5 h-5 text-primary flex-shrink-0" />
-          <h3 className="font-medium text-foreground truncate">{session.topic}</h3>
-        </div>
-        <ChevronRight className="w-4 h-4 text-muted-foreground flex-shrink-0" />
-      </div>
-      <p className="text-sm text-muted-foreground truncate mb-3">{session.id}</p>
-      <div className="flex items-center gap-3">
-        <Badge variant={session.status === 'completed' ? 'success' : 'warning'}>
+      {/* Topic - smaller font */}
+      <h3 className="text-sm font-medium text-foreground line-clamp-2 mb-2 leading-snug">
+        {session.topic}
+      </h3>
+
+      {/* Session ID - truncate */}
+      <p className="text-xs text-muted-foreground truncate mb-2">
+        {session.id}
+      </p>
+
+      {/* Status and Date */}
+      <div className="flex items-center justify-between text-xs mt-auto pt-2 border-t">
+        <Badge
+          variant={session.status === 'completed' ? 'success' : 'warning'}
+          className={cn(
+            "text-[10px] px-1.5 py-0 cursor-pointer transition-all",
+            isStatusFiltered && "ring-2 ring-primary ring-offset-1"
+          )}
+          onClick={handleStatusClick}
+        >
           {session.status === 'completed' ? (
-            <><CheckCircle className="w-3 h-3 mr-1" />完成</>
+            <><CheckCircle className="w-2.5 h-2.5 mr-0.5" />完成</>
           ) : (
-            <><Clock className="w-3 h-3 mr-1" />进行中</>
+            <><Clock className="w-2.5 h-2.5 mr-0.5" />进行中</>
           )}
         </Badge>
-        <span className="text-xs text-muted-foreground flex items-center gap-1">
-          <Calendar className="w-3 h-3" />
-          {session.createdAt}
-        </span>
+        <span className="text-muted-foreground">{session.createdAt}</span>
       </div>
+
+      {/* Conclusions indicator */}
+      {session.hasConclusions && (
+        <div className="flex items-center gap-1 text-[10px] text-muted-foreground mt-1">
+          <FileText className="w-2.5 h-2.5" />
+          <span>有结论</span>
+        </div>
+      )}
     </Card>
   );
 }
@@ -78,10 +108,9 @@ function SessionCard({ session, onClick, isSelected }: SessionCardProps) {
 interface DetailPanelProps {
   sessionId: string;
   projectPath: string;
-  onClose: () => void;
 }
 
-function DetailPanel({ sessionId, projectPath, onClose }: DetailPanelProps) {
+function DetailPanel({ sessionId, projectPath }: DetailPanelProps) {
   const [activeTab, setActiveTab] = useState('discussion');
 
   const { data: detail, isLoading, error } = useQuery({
@@ -129,9 +158,9 @@ function DetailPanel({ sessionId, projectPath, onClose }: DetailPanelProps) {
 
   return (
     <div className="h-full flex flex-col">
-      {/* Header */}
-      <div className="flex items-center justify-between p-4 border-b shrink-0">
-        <div className="min-w-0 flex-1 mr-2">
+      {/* Session Info (in drawer, header is already shown) */}
+      <div className="px-4 pb-3 border-b shrink-0">
+        <div className="min-w-0">
           <h2 className="font-semibold truncate">{detail.topic}</h2>
           <div className="flex items-center gap-2 mt-1">
             <Badge variant={detail.status === 'completed' ? 'default' : 'secondary'} className="text-xs">
@@ -140,9 +169,6 @@ function DetailPanel({ sessionId, projectPath, onClose }: DetailPanelProps) {
             <span className="text-xs text-muted-foreground">{detail.createdAt}</span>
           </div>
         </div>
-        <Button variant="ghost" size="sm" onClick={onClose} className="shrink-0">
-          <X className="w-4 h-4" />
-        </Button>
       </div>
 
       {/* Tabs Content */}
@@ -187,48 +213,236 @@ function DetailPanel({ sessionId, projectPath, onClose }: DetailPanelProps) {
 
 // ========== Main Component ==========
 
+type DateFilter = 'all' | 'today' | 'week' | 'month';
+type StatusFilter = 'all' | 'in_progress' | 'completed';
+
+const DATE_FILTERS: { value: DateFilter; label: string }[] = [
+  { value: 'all', label: '全部' },
+  { value: 'today', label: '今天' },
+  { value: 'week', label: '本周' },
+  { value: 'month', label: '本月' },
+];
+
+const STATUS_FILTERS: { value: StatusFilter; label: string; icon: React.ReactNode }[] = [
+  { value: 'all', label: '全部', icon: <FileSearch className="w-4 h-4" /> },
+  { value: 'in_progress', label: '进行中', icon: <Clock className="w-4 h-4" /> },
+  { value: 'completed', label: '已完成', icon: <CheckCircle className="w-4 h-4" /> },
+];
+
 export function AnalysisPage() {
   const projectPath = useWorkflowStore((state) => state.projectPath);
+  const isImmersiveMode = useAppStore((s) => s.isImmersiveMode);
+  const toggleImmersiveMode = useAppStore((s) => s.toggleImmersiveMode);
   const [searchQuery, setSearchQuery] = useState('');
   const [selectedSession, setSelectedSession] = useState<string | null>(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [dateFilter, setDateFilter] = useState<DateFilter>('all');
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
+  const [selectedDate, setSelectedDate] = useState<string | null>(null);
 
   const { data: sessions = [], isLoading, error } = useQuery({
     queryKey: ['analysis-sessions', projectPath],
     queryFn: () => fetchAnalysisSessions(projectPath),
   });
 
-  // Filter sessions by search query
-  const filteredSessions = sessions.filter((session) =>
-    session.topic.toLowerCase().includes(searchQuery.toLowerCase()) ||
-    session.id.toLowerCase().includes(searchQuery.toLowerCase())
-  );
+  // Get unique dates with counts for quick filter bubbles
+  const uniqueDates = useMemo(() => {
+    const dateCounts = new Map<string, number>();
+    sessions.forEach((session) => {
+      const count = dateCounts.get(session.createdAt) || 0;
+      dateCounts.set(session.createdAt, count + 1);
+    });
+    // Sort by date descending, show top 10
+    return Array.from(dateCounts.entries())
+      .sort((a, b) => b[0].localeCompare(a[0]))
+      .slice(0, 10)
+      .map(([date, count]) => ({
+        date,
+        label: date.slice(5), // MM-DD format
+        count,
+      }));
+  }, [sessions]);
+
+  // Filter by date, status and search query
+  const filteredSessions = useMemo(() => {
+    const now = new Date();
+    const today = now.toISOString().split('T')[0];
+    const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
+    const monthAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
+
+    let filtered = sessions.filter((session) => {
+      // Search filter
+      const matchesSearch = session.topic.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        session.id.toLowerCase().includes(searchQuery.toLowerCase());
+
+      // Status filter
+      const matchesStatus = statusFilter === 'all' || session.status === statusFilter;
+
+      // Date filter
+      let matchesDate = true;
+      if (selectedDate) {
+        matchesDate = session.createdAt === selectedDate;
+      } else if (dateFilter === 'today') {
+        matchesDate = session.createdAt === today;
+      } else if (dateFilter === 'week') {
+        matchesDate = session.createdAt >= weekAgo;
+      } else if (dateFilter === 'month') {
+        matchesDate = session.createdAt >= monthAgo;
+      }
+
+      return matchesSearch && matchesStatus && matchesDate;
+    });
+
+    // Sort by createdAt descending (newest first)
+    return filtered.sort((a, b) => b.createdAt.localeCompare(a.createdAt));
+  }, [sessions, searchQuery, dateFilter, statusFilter, selectedDate]);
+
+  // Handle date select
+  const handleDateSelect = (date: string) => {
+    if (selectedDate === date) {
+      setSelectedDate(null);
+    } else {
+      setSelectedDate(date);
+      setDateFilter('all');
+    }
+    setCurrentPage(1);
+  };
+
+  // Handle status filter from card click
+  const handleStatusClick = (status: string) => {
+    if (statusFilter === status) {
+      setStatusFilter('all');
+    } else {
+      setStatusFilter(status as StatusFilter);
+    }
+    setCurrentPage(1);
+  };
+
+  // Pagination
+  const totalPages = Math.ceil(filteredSessions.length / PAGE_SIZE);
+  const paginatedSessions = useMemo(() => {
+    const start = (currentPage - 1) * PAGE_SIZE;
+    return filteredSessions.slice(start, start + PAGE_SIZE);
+  }, [filteredSessions, currentPage]);
+
+  // Reset to page 1 when filters change
+  const handleSearchChange = (value: string) => {
+    setSearchQuery(value);
+    setCurrentPage(1);
+  };
+
+  const handleDateFilterChange = (filter: DateFilter) => {
+    setDateFilter(filter);
+    setCurrentPage(1);
+  };
+
+  const handleStatusFilterChange = (filter: StatusFilter) => {
+    setStatusFilter(filter);
+    setSelectedDate(null);
+    setCurrentPage(1);
+  };
 
   return (
-    <div className="h-full flex overflow-hidden">
-      {/* Left Panel - List */}
-      <div className={`p-6 space-y-6 overflow-auto ${selectedSession ? 'w-[400px] shrink-0' : 'flex-1'}`}>
+    <div className={cn(
+      "h-full flex overflow-hidden",
+      isImmersiveMode && "fixed inset-0 z-50 bg-background"
+    )}>
+      {/* Main Content - List */}
+      <div className="flex-1 flex flex-col p-4 space-y-3 overflow-auto">
         {/* Header */}
-        <div className="flex items-center gap-2">
-          <FileSearch className="w-6 h-6 text-primary" />
-          <div>
-            <h1 className="text-2xl font-semibold text-foreground">
-              Analysis Viewer
-            </h1>
-            <p className="text-sm text-muted-foreground mt-1">
-              查看 /workflow:analyze-with-file 命令的分析结果
-            </p>
+        <div className="flex items-center justify-between shrink-0">
+          <div className="flex items-center gap-2">
+            <FileSearch className="w-5 h-5 text-primary" />
+            <div>
+              <h1 className="text-xl font-semibold text-foreground">
+                Analysis Viewer
+              </h1>
+              <p className="text-xs text-muted-foreground mt-0.5">
+                查看 /workflow:analyze-with-file 命令的分析结果
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-xs text-muted-foreground">
+              共 {filteredSessions.length} 个会话
+            </span>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 w-7 p-0"
+              onClick={toggleImmersiveMode}
+              title={isImmersiveMode ? '退出全屏' : '全屏模式'}
+            >
+              {isImmersiveMode ? (
+                <Minimize2 className="w-4 h-4" />
+              ) : (
+                <Maximize2 className="w-4 h-4" />
+              )}
+            </Button>
           </div>
         </div>
 
-        {/* Search */}
-        <div className="relative max-w-md">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
-          <Input
-            placeholder="搜索分析会话..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="pl-9"
-          />
+        {/* Filters */}
+        <div className="flex items-center gap-4 shrink-0">
+          {/* Search */}
+          <div className="relative flex-1 max-w-md">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              placeholder="搜索分析会话..."
+              value={searchQuery}
+              onChange={(e) => handleSearchChange(e.target.value)}
+              className="pl-9"
+            />
+          </div>
+
+          {/* Status Filter Tabs */}
+          <div className="flex items-center gap-1 bg-muted/50 rounded-lg p-1">
+            {STATUS_FILTERS.map((filter) => (
+              <Button
+                key={filter.value}
+                variant={statusFilter === filter.value ? 'default' : 'ghost'}
+                size="sm"
+                className="h-7 px-3 text-xs gap-1"
+                onClick={() => handleStatusFilterChange(filter.value)}
+              >
+                {filter.icon}
+                {filter.label}
+              </Button>
+            ))}
+          </div>
+
+          {/* Date Filter Tabs */}
+          <div className="flex items-center gap-1 bg-muted/50 rounded-lg p-1">
+            {DATE_FILTERS.map((filter) => (
+              <Button
+                key={filter.value}
+                variant={dateFilter === filter.value ? 'default' : 'ghost'}
+                size="sm"
+                className="h-7 px-3 text-xs"
+                onClick={() => handleDateFilterChange(filter.value)}
+              >
+                {filter.label}
+              </Button>
+            ))}
+          </div>
+        </div>
+
+        {/* Date Quick Filter Bubbles */}
+        <div className="flex items-center gap-2 flex-wrap shrink-0">
+          {uniqueDates.map((date) => (
+            <Button
+              key={date.date}
+              variant={selectedDate === date.date ? 'default' : 'outline'}
+              size="sm"
+              className="h-7 px-2 text-xs gap-1"
+              onClick={() => handleDateSelect(date.date)}
+            >
+              <span>{date.label}</span>
+              <Badge variant="secondary" className="ml-1 px-1.5 py-0 text-[10px]">
+                {date.count}
+              </Badge>
+            </Button>
+          ))}
         </div>
 
         {/* Content */}
@@ -254,29 +468,67 @@ export function AnalysisPage() {
             </p>
           </Card>
         ) : (
-          <div className="grid gap-4">
-            {filteredSessions.map((session) => (
-              <SessionCard
-                key={session.id}
-                session={session}
-                isSelected={selectedSession === session.id}
-                onClick={() => setSelectedSession(session.id)}
-              />
-            ))}
-          </div>
+          <>
+            {/* Grid - flex-1 to fill remaining space */}
+            <div className="flex-1 grid grid-cols-4 gap-3 content-start">
+              {paginatedSessions.map((session) => (
+                <SessionCard
+                  key={session.id}
+                  session={session}
+                  onClick={() => setSelectedSession(session.id)}
+                  onStatusClick={handleStatusClick}
+                  isStatusFiltered={statusFilter !== 'all'}
+                />
+              ))}
+            </div>
+
+            {/* Pagination */}
+            {totalPages > 1 && (
+              <div className="flex items-center justify-center gap-2 pt-4">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={currentPage === 1}
+                  onClick={() => setCurrentPage(p => p - 1)}
+                >
+                  <ChevronLeft className="w-4 h-4" />
+                </Button>
+                <span className="text-sm text-muted-foreground px-3">
+                  {currentPage} / {totalPages}
+                </span>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={currentPage === totalPages}
+                  onClick={() => setCurrentPage(p => p + 1)}
+                >
+                  <ChevronRight className="w-4 h-4" />
+                </Button>
+              </div>
+            )}
+          </>
         )}
       </div>
 
-      {/* Right Panel - Detail */}
-      {selectedSession && (
-        <div className="flex-1 border-l bg-background min-w-0">
-          <DetailPanel
-            sessionId={selectedSession}
-            projectPath={projectPath}
-            onClose={() => setSelectedSession(null)}
-          />
-        </div>
-      )}
+      {/* Detail Drawer */}
+      <Drawer open={!!selectedSession} onOpenChange={(open) => !open && setSelectedSession(null)}>
+        <DrawerContent side="right" className="w-1/2 h-full max-w-none">
+          <DrawerHeader className="shrink-0">
+            <DrawerTitle>分析详情</DrawerTitle>
+            <DrawerClose asChild>
+              <Button variant="ghost" size="sm" className="absolute right-4 top-4">
+                <X className="w-4 h-4" />
+              </Button>
+            </DrawerClose>
+          </DrawerHeader>
+          {selectedSession && (
+            <DetailPanel
+              sessionId={selectedSession}
+              projectPath={projectPath}
+            />
+          )}
+        </DrawerContent>
+      </Drawer>
     </div>
   );
 }