feat: redesign dashboard layout with calendar, open sessions, and glass-card panels

New layout: greeting → calendar+actions → sessions+stats → activity
Replaces old QuickStats and SessionsPanel with new dashboard components

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/pages/QuickStartPage.tsx

@@ -12,8 +12,7 @@ import { usePinnedFlowsStore } from '@/store/pinnedFlowsStore'
 import { useUserPreferencesStore } from '@/store/userPreferencesStore'
 import { usePaginationParams } from '@/hooks/usePaginationParams'
 import { useCachedQuota } from '@/hooks/useCachedQuota'
-import { QuickStats } from '@/components/dashboard/QuickStats'
-import { SessionsPanel } from '@/components/dashboard/SessionsPanel'
+// QuickStats and SessionsPanel replaced by new dashboard panels
 import { TreeGridView } from '@/components/library/TreeGridView'
 import { TreeListView } from '@/components/library/TreeListView'
 import { TreeTableView } from '@/components/library/TreeTableView'
@@ -22,6 +21,10 @@ import { AIFlowBuilderModal } from '@/components/ai-builder/AIFlowBuilderModal'
 import { CreateFlowDropdown } from '@/components/common/CreateFlowDropdown'
 import { cn } from '@/lib/utils'
 import { toast } from '@/lib/toast'
+import { WeeklyCalendar } from '@/components/dashboard/WeeklyCalendar'
+import { QuickActions } from '@/components/dashboard/QuickActions'
+import { OpenSessions } from '@/components/dashboard/OpenSessions'
+import { RecentActivity } from '@/components/dashboard/RecentActivity'
 
 function timeAgo(dateStr: string): string {
   const now = Date.now()
@@ -215,15 +218,21 @@ export function QuickStartPage() {
     const now = new Date()
     return d.toDateString() === now.toDateString()
   }).length
-  const completedSessions = allSessions.filter(s => s.completed_at).length
+  // completedSessions removed — no longer displayed in new layout
 
-  const recentSessionItems = allSessions.slice(0, 5).map(s => ({
-    id: s.id,
-    treeName: s.tree_snapshot?.name || 'Unknown',
-    status: (s.completed_at ? 'completed' : 'in_progress') as 'completed' | 'in_progress',
-    ticketNumber: s.ticket_number || undefined,
-    timeAgo: timeAgo(s.started_at),
-  }))
+  // Open sessions for the new panel (3 oldest)
+  const openSessionItems = activeSessions
+    .sort((a, b) => new Date(a.started_at).getTime() - new Date(b.started_at).getTime())
+    .slice(0, 3)
+    .map(s => ({
+      id: s.id,
+      treeName: s.tree_snapshot?.name || 'Unknown',
+      treeId: s.tree_id,
+      treeType: (s.tree_snapshot as unknown as Record<string, unknown>)?.tree_type as string | undefined,
+      timeAgo: timeAgo(s.started_at),
+    }))
+
+  // recentSessionItems removed — replaced by RecentActivity component
 
   // Favorites display
   const MAX_VISIBLE_FAVORITES = 8
@@ -270,297 +279,329 @@ export function QuickStartPage() {
 
   return (
     <div className="p-6 space-y-6">
-      {/* Page Header */}
-      <div className="flex items-start justify-between">
-        <div>
-          <h1 className="font-heading text-[1.375rem] font-bold tracking-tight text-foreground">
-            Dashboard
-          </h1>
-          <p className="mt-1 text-sm text-muted-foreground">
-            Welcome back. Here&apos;s what&apos;s happening with your flows.
-          </p>
+      {/* Greeting */}
+      <div className="fade-in" style={{ animationDelay: '100ms' }}>
+        <h1 className="font-heading text-4xl font-extrabold tracking-tight text-foreground">
+          Good {new Date().getHours() < 12 ? 'morning' : new Date().getHours() < 18 ? 'afternoon' : 'evening'}, {user?.name?.split(' ')[0] || 'there'}
+        </h1>
+        <p className="mt-1 text-sm text-muted-foreground">
+          {new Date().toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' })}
+        </p>
+      </div>
+
+      {/* Row 1: Calendar + Quick Actions */}
+      <div className="flex gap-4" style={{ alignItems: 'stretch' }}>
+        <div className="flex-1 min-w-0">
+          <WeeklyCalendar />
+        </div>
+        <div className="w-72 shrink-0">
+          <QuickActions />
         </div>
       </div>
 
-      {/* Quick Stats */}
-      <QuickStats
-        stats={[
-          { label: 'My Flows', value: myFlows.length, gradient: true },
-          { label: 'Sessions Today', value: todaySessions, color: '#f59e0b' },
-          { label: 'Open Sessions', value: openSessions, meta: `${completedSessions} completed` },
-          { label: 'Favorites', value: pinnedItems.length },
-        ]}
-      />
-
-      {/* Search */}
-      <div ref={searchRef} className="relative">
-        <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
-        <input
-          type="text"
-          value={query}
-          onChange={(e) => setQuery(e.target.value)}
-          onFocus={() => query.length >= 2 && setShowResults(true)}
-          placeholder="Search flows, sessions, tags…"
-          className="w-full rounded-lg border border-border bg-card py-2.5 pl-9 pr-4 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
-        />
-        {showResults && (
-          <div className="absolute z-10 mt-1 w-full rounded-lg border border-border bg-card shadow-xl overflow-hidden">
-            {isSearching ? (
-              <div className="flex items-center justify-center py-6">
-                <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+      {/* Row 2: Open Sessions + Stats 2x2 */}
+      <div className="flex gap-4" style={{ alignItems: 'stretch' }}>
+        <div className="flex-1 min-w-0">
+          <OpenSessions sessions={openSessionItems} />
+        </div>
+        <div className="w-72 shrink-0">
+          <div className="grid grid-cols-2 gap-3 h-full">
+            {[
+              { label: 'Active Flows', value: myFlows.length, gradient: true, glow: true },
+              { label: 'This Week', value: todaySessions },
+              { label: 'Open Sessions', value: openSessions },
+              { label: 'Favorites', value: pinnedItems.length },
+            ].map((stat, i) => (
+              <div
+                key={stat.label}
+                className={cn('glass-card p-4 flex flex-col justify-between fade-in', stat.glow && 'active-glow')}
+                style={{ animationDelay: `${500 + i * 70}ms` }}
+              >
+                <p className="font-label text-[0.625rem] font-medium uppercase tracking-[0.1em] text-muted-foreground">
+                  {stat.label}
+                </p>
+                <p className={cn('font-heading text-2xl font-extrabold tracking-tight', stat.gradient && 'text-gradient-brand')}>
+                  {stat.value}
+                </p>
               </div>
-            ) : searchResults.length === 0 ? (
-              <div className="px-4 py-6 text-center text-sm text-muted-foreground">No results found</div>
-            ) : (
-              <ul className="max-h-72 overflow-y-auto py-1">
-                {searchResults.map((tree) => (
-                  <li key={tree.id}>
-                    <button
-                      onClick={() => navigate(getTreeNavigatePath(tree.id, tree.tree_type))}
-                      className="w-full px-4 py-3 text-left transition-colors hover:bg-accent"
-                    >
-                      <div className="text-sm font-medium text-foreground">{tree.name}</div>
-                      {tree.description && (
-                        <div className="mt-0.5 line-clamp-1 text-xs text-muted-foreground">{tree.description}</div>
-                      )}
-                    </button>
-                  </li>
-                ))}
-              </ul>
-            )}
+            ))}
           </div>
-        )}
+        </div>
       </div>
 
-      {/* Recent Sessions */}
-      <SessionsPanel sessions={recentSessionItems} delay={150} />
+      {/* Row 3: Recent Activity */}
+      <RecentActivity />
 
-      {/* Favorites Section */}
-      <div>
-        <div className="mb-3 flex items-center justify-between">
-          <h2 className="font-heading text-lg font-semibold text-foreground">
-            Favorites
-            {pinnedItems.length > 0 && (
-              <span className="ml-2 text-sm font-normal text-muted-foreground">({pinnedItems.length})</span>
-            )}
-          </h2>
-          {hasMoreFavorites && (
-            <button
-              onClick={() => setShowAllFavorites(!showAllFavorites)}
-              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-            >
-              {showAllFavorites ? 'Show less' : 'View all favorites'}
-            </button>
+      {/* ── Existing content below ── */}
+      <div style={{ borderTop: '1px solid var(--glass-border)' }} className="pt-6 space-y-6">
+
+        {/* Search */}
+        <div ref={searchRef} className="relative">
+          <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
+          <input
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onFocus={() => query.length >= 2 && setShowResults(true)}
+            placeholder="Search flows, sessions, tags…"
+            className="w-full rounded-lg border border-border bg-card py-2.5 pl-9 pr-4 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+          />
+          {showResults && (
+            <div className="absolute z-10 mt-1 w-full rounded-lg border border-border bg-card shadow-xl overflow-hidden">
+              {isSearching ? (
+                <div className="flex items-center justify-center py-6">
+                  <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                </div>
+              ) : searchResults.length === 0 ? (
+                <div className="px-4 py-6 text-center text-sm text-muted-foreground">No results found</div>
+              ) : (
+                <ul className="max-h-72 overflow-y-auto py-1">
+                  {searchResults.map((tree) => (
+                    <li key={tree.id}>
+                      <button
+                        onClick={() => navigate(getTreeNavigatePath(tree.id, tree.tree_type))}
+                        className="w-full px-4 py-3 text-left transition-colors hover:bg-accent"
+                      >
+                        <div className="text-sm font-medium text-foreground">{tree.name}</div>
+                        {tree.description && (
+                          <div className="mt-0.5 line-clamp-1 text-xs text-muted-foreground">{tree.description}</div>
+                        )}
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
           )}
         </div>
-        {pinnedIsLoading ? (
-          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
-            {Array.from({ length: 4 }).map((_, i) => (
-              <div key={i} className="h-20 rounded-xl bg-card border border-border animate-pulse" />
-            ))}
-          </div>
-        ) : pinnedItems.length === 0 ? (
-          <p className="text-sm text-muted-foreground py-4">
-            Star a flow to pin it here for quick access.
-          </p>
-        ) : (
-          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
-            {visibleFavorites.map((flow) => (
-              <button
-                key={flow.tree_id}
-                onClick={() => navigate(getTreeNavigatePath(flow.tree_id, flow.tree_type))}
-                className="group relative flex items-center gap-3 rounded-xl bg-card border border-border p-4 text-left transition-colors hover:border-border/80 hover:bg-accent/50"
-              >
-                <span className="text-lg shrink-0">
-                  {flow.tree_type === 'procedural' ? '📋' : flow.tree_type === 'maintenance' ? '🛠️' : '🔧'}
-                </span>
-                <span className="truncate text-sm font-medium text-foreground">{flow.tree_name}</span>
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    e.preventDefault()
-                    togglePin(flow.tree_id)
-                  }}
-                  aria-label="Remove from favorites"
-                  className="absolute top-2 right-2 rounded-md p-1 text-amber-400 opacity-0 group-hover:opacity-100 hover:text-amber-300 transition-all"
-                >
-                  <Star size={14} fill="currentColor" />
-                </button>
-              </button>
-            ))}
-          </div>
-        )}
-      </div>
 
-      {/* My Flows Section — tabbed */}
-      <div>
-        <div className="mb-3 flex items-center gap-1 border-b border-border">
-          {tabs.map((tab) => (
-            <button
-              key={tab.id}
-              type="button"
-              onClick={() => { setActiveTab(tab.id); setPage(1) }}
-              className={cn(
-                'px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px',
-                activeTab === tab.id
-                  ? 'border-primary text-foreground'
-                  : 'border-transparent text-muted-foreground hover:text-foreground'
+        {/* Favorites Section */}
+        <div>
+          <div className="mb-3 flex items-center justify-between">
+            <h2 className="font-heading text-lg font-semibold text-foreground">
+              Favorites
+              {pinnedItems.length > 0 && (
+                <span className="ml-2 text-sm font-normal text-muted-foreground">({pinnedItems.length})</span>
               )}
-            >
-              {tab.label}
-            </button>
-          ))}
-          <div className="ml-auto flex items-center gap-2 pb-1.5">
-            {activeTab === 'mine' && canCreateTrees && (
-              <CreateFlowDropdown
-                aiEnabled={aiEnabled}
-                onOpenAIBuilder={() => setShowAIBuilder(true)}
-              />
+            </h2>
+            {hasMoreFavorites && (
+              <button
+                onClick={() => setShowAllFavorites(!showAllFavorites)}
+                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+              >
+                {showAllFavorites ? 'Show less' : 'View all favorites'}
+              </button>
             )}
-            <ViewToggle view={dashboardMyFlowsView} onChange={setDashboardMyFlowsView} />
           </div>
+          {pinnedIsLoading ? (
+            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
+              {Array.from({ length: 4 }).map((_, i) => (
+                <div key={i} className="h-20 rounded-xl bg-card border border-border animate-pulse" />
+              ))}
+            </div>
+          ) : pinnedItems.length === 0 ? (
+            <p className="text-sm text-muted-foreground py-4">
+              Star a flow to pin it here for quick access.
+            </p>
+          ) : (
+            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
+              {visibleFavorites.map((flow) => (
+                <button
+                  key={flow.tree_id}
+                  onClick={() => navigate(getTreeNavigatePath(flow.tree_id, flow.tree_type))}
+                  className="group relative flex items-center gap-3 rounded-xl bg-card border border-border p-4 text-left transition-colors hover:border-border/80 hover:bg-accent/50"
+                >
+                  <span className="text-lg shrink-0">
+                    {flow.tree_type === 'procedural' ? '📋' : flow.tree_type === 'maintenance' ? '🛠️' : '🔧'}
+                  </span>
+                  <span className="truncate text-sm font-medium text-foreground">{flow.tree_name}</span>
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      e.preventDefault()
+                      togglePin(flow.tree_id)
+                    }}
+                    aria-label="Remove from favorites"
+                    className="absolute top-2 right-2 rounded-md p-1 text-amber-400 opacity-0 group-hover:opacity-100 hover:text-amber-300 transition-all"
+                  >
+                    <Star size={14} fill="currentColor" />
+                  </button>
+                </button>
+              ))}
+            </div>
+          )}
         </div>
 
-        {isLoadingFlows ? (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-            {Array.from({ length: 6 }).map((_, i) => (
-              <div key={i} className="h-32 rounded-xl bg-card border border-border animate-pulse" />
+        {/* My Flows Section — tabbed */}
+        <div>
+          <div className="mb-3 flex items-center gap-1 border-b border-border">
+            {tabs.map((tab) => (
+              <button
+                key={tab.id}
+                type="button"
+                onClick={() => { setActiveTab(tab.id); setPage(1) }}
+                className={cn(
+                  'px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px',
+                  activeTab === tab.id
+                    ? 'border-primary text-foreground'
+                    : 'border-transparent text-muted-foreground hover:text-foreground'
+                )}
+              >
+                {tab.label}
+              </button>
             ))}
+            <div className="ml-auto flex items-center gap-2 pb-1.5">
+              {activeTab === 'mine' && canCreateTrees && (
+                <CreateFlowDropdown
+                  aiEnabled={aiEnabled}
+                  onOpenAIBuilder={() => setShowAIBuilder(true)}
+                />
+              )}
+              <ViewToggle view={dashboardMyFlowsView} onChange={setDashboardMyFlowsView} />
+            </div>
           </div>
-        ) : myFlows.length === 0 ? (
-          <div className="py-12 text-center">
-            <p className="text-muted-foreground mb-4">
-              {activeTab === 'mine'
-                ? "You haven't created any flows yet."
-                : activeTab === 'team'
-                ? 'No team flows found.'
-                : activeTab === 'public'
-                ? 'No public flows found.'
-                : 'No flows found.'}
-            </p>
-            {activeTab === 'mine' && canCreateTrees && (
-              <CreateFlowDropdown
-                aiEnabled={aiEnabled}
-                onOpenAIBuilder={() => setShowAIBuilder(true)}
-                label="Create your first flow"
-              />
-            )}
-          </div>
-        ) : (
-          <>
-            {allFlowsCeiling && (
-              <p className="mb-3 text-sm text-muted-foreground">
-                Showing first 500 flows. Use search or filters to find specific flows.
+
+          {isLoadingFlows ? (
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+              {Array.from({ length: 6 }).map((_, i) => (
+                <div key={i} className="h-32 rounded-xl bg-card border border-border animate-pulse" />
+              ))}
+            </div>
+          ) : myFlows.length === 0 ? (
+            <div className="py-12 text-center">
+              <p className="text-muted-foreground mb-4">
+                {activeTab === 'mine'
+                  ? "You haven't created any flows yet."
+                  : activeTab === 'team'
+                  ? 'No team flows found.'
+                  : activeTab === 'public'
+                  ? 'No public flows found.'
+                  : 'No flows found.'}
               </p>
-            )}
+              {activeTab === 'mine' && canCreateTrees && (
+                <CreateFlowDropdown
+                  aiEnabled={aiEnabled}
+                  onOpenAIBuilder={() => setShowAIBuilder(true)}
+                  label="Create your first flow"
+                />
+              )}
+            </div>
+          ) : (
+            <>
+              {allFlowsCeiling && (
+                <p className="mb-3 text-sm text-muted-foreground">
+                  Showing first 500 flows. Use search or filters to find specific flows.
+                </p>
+              )}
 
-            {dashboardMyFlowsView === 'grid' && (
-              <TreeGridView
-                trees={myFlows}
-                onStartSession={handleStartSession}
-                onTagClick={handleTagClick}
-                onFolderCreated={handleFolderCreated}
-                onDeleteTree={handleDeleteTree}
-                pinnedTreeIds={pinnedTreeIds}
-                onTogglePin={togglePin}
-                pinLoadingTreeIds={pinLoadingTreeIds}
-              />
-            )}
-            {dashboardMyFlowsView === 'list' && (
-              <TreeListView
-                trees={myFlows}
-                onStartSession={handleStartSession}
-                onTagClick={handleTagClick}
-                onFolderCreated={handleFolderCreated}
-                onDeleteTree={handleDeleteTree}
-                pinnedTreeIds={pinnedTreeIds}
-                onTogglePin={togglePin}
-                pinLoadingTreeIds={pinLoadingTreeIds}
-              />
-            )}
-            {dashboardMyFlowsView === 'table' && (
-              <TreeTableView
-                trees={myFlows}
-                onStartSession={handleStartSession}
-                onTagClick={handleTagClick}
-                onFolderCreated={handleFolderCreated}
-                onDeleteTree={handleDeleteTree}
-                pinnedTreeIds={pinnedTreeIds}
-                onTogglePin={togglePin}
-                pinLoadingTreeIds={pinLoadingTreeIds}
-              />
-            )}
+              {dashboardMyFlowsView === 'grid' && (
+                <TreeGridView
+                  trees={myFlows}
+                  onStartSession={handleStartSession}
+                  onTagClick={handleTagClick}
+                  onFolderCreated={handleFolderCreated}
+                  onDeleteTree={handleDeleteTree}
+                  pinnedTreeIds={pinnedTreeIds}
+                  onTogglePin={togglePin}
+                  pinLoadingTreeIds={pinLoadingTreeIds}
+                />
+              )}
+              {dashboardMyFlowsView === 'list' && (
+                <TreeListView
+                  trees={myFlows}
+                  onStartSession={handleStartSession}
+                  onTagClick={handleTagClick}
+                  onFolderCreated={handleFolderCreated}
+                  onDeleteTree={handleDeleteTree}
+                  pinnedTreeIds={pinnedTreeIds}
+                  onTogglePin={togglePin}
+                  pinLoadingTreeIds={pinLoadingTreeIds}
+                />
+              )}
+              {dashboardMyFlowsView === 'table' && (
+                <TreeTableView
+                  trees={myFlows}
+                  onStartSession={handleStartSession}
+                  onTagClick={handleTagClick}
+                  onFolderCreated={handleFolderCreated}
+                  onDeleteTree={handleDeleteTree}
+                  pinnedTreeIds={pinnedTreeIds}
+                  onTogglePin={togglePin}
+                  pinLoadingTreeIds={pinLoadingTreeIds}
+                />
+              )}
 
-            {/* Pagination controls */}
-            {pageSize !== 'all' && (
-              <div className="mt-4 flex items-center justify-between">
-                <div className="flex items-center gap-2">
-                  <button
-                    onClick={() => setPage(page - 1)}
-                    disabled={page <= 1}
-                    className={cn(
-                      'flex items-center gap-1 rounded-md border border-border px-3 py-1.5 text-sm transition-colors',
-                      page <= 1 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-accent'
-                    )}
-                  >
-                    <ChevronLeft size={14} />
-                    Prev
-                  </button>
-                  <span className="text-sm text-muted-foreground">Page {page}</span>
-                  <button
-                    onClick={() => setPage(page + 1)}
-                    disabled={!hasNextPage}
-                    className={cn(
-                      'flex items-center gap-1 rounded-md border border-border px-3 py-1.5 text-sm transition-colors',
-                      !hasNextPage ? 'opacity-50 cursor-not-allowed' : 'hover:bg-accent'
-                    )}
-                  >
-                    Next
-                    <ChevronRight size={14} />
-                  </button>
+              {/* Pagination controls */}
+              {pageSize !== 'all' && (
+                <div className="mt-4 flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <button
+                      onClick={() => setPage(page - 1)}
+                      disabled={page <= 1}
+                      className={cn(
+                        'flex items-center gap-1 rounded-md border border-border px-3 py-1.5 text-sm transition-colors',
+                        page <= 1 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-accent'
+                      )}
+                    >
+                      <ChevronLeft size={14} />
+                      Prev
+                    </button>
+                    <span className="text-sm text-muted-foreground">Page {page}</span>
+                    <button
+                      onClick={() => setPage(page + 1)}
+                      disabled={!hasNextPage}
+                      className={cn(
+                        'flex items-center gap-1 rounded-md border border-border px-3 py-1.5 text-sm transition-colors',
+                        !hasNextPage ? 'opacity-50 cursor-not-allowed' : 'hover:bg-accent'
+                      )}
+                    >
+                      Next
+                      <ChevronRight size={14} />
+                    </button>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm text-muted-foreground">Show:</span>
+                    <select
+                      value={String(pageSize)}
+                      onChange={(e) => {
+                        const val = e.target.value
+                        setPageSize(val === 'all' ? 'all' : parseInt(val, 10))
+                      }}
+                      className="rounded-md border border-border bg-card px-2 py-1 text-sm text-foreground focus:border-primary focus:outline-none"
+                    >
+                      {pageSizeOptions.map((opt) => (
+                        <option key={String(opt)} value={String(opt)}>
+                          {opt === 'all' ? 'All' : opt}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
                 </div>
-                <div className="flex items-center gap-2">
-                  <span className="text-sm text-muted-foreground">Show:</span>
-                  <select
-                    value={String(pageSize)}
-                    onChange={(e) => {
-                      const val = e.target.value
-                      setPageSize(val === 'all' ? 'all' : parseInt(val, 10))
-                    }}
-                    className="rounded-md border border-border bg-card px-2 py-1 text-sm text-foreground focus:border-primary focus:outline-none"
-                  >
-                    {pageSizeOptions.map((opt) => (
-                      <option key={String(opt)} value={String(opt)}>
-                        {opt === 'all' ? 'All' : opt}
-                      </option>
-                    ))}
-                  </select>
+              )}
+              {pageSize === 'all' && (
+                <div className="mt-4 flex items-center justify-end">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm text-muted-foreground">Show:</span>
+                    <select
+                      value="all"
+                      onChange={(e) => {
+                        const val = e.target.value
+                        setPageSize(val === 'all' ? 'all' : parseInt(val, 10))
+                      }}
+                      className="rounded-md border border-border bg-card px-2 py-1 text-sm text-foreground focus:border-primary focus:outline-none"
+                    >
+                      {pageSizeOptions.map((opt) => (
+                        <option key={String(opt)} value={String(opt)}>
+                          {opt === 'all' ? 'All' : opt}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
                 </div>
-              </div>
-            )}
-            {pageSize === 'all' && (
-              <div className="mt-4 flex items-center justify-end">
-                <div className="flex items-center gap-2">
-                  <span className="text-sm text-muted-foreground">Show:</span>
-                  <select
-                    value="all"
-                    onChange={(e) => {
-                      const val = e.target.value
-                      setPageSize(val === 'all' ? 'all' : parseInt(val, 10))
-                    }}
-                    className="rounded-md border border-border bg-card px-2 py-1 text-sm text-foreground focus:border-primary focus:outline-none"
-                  >
-                    {pageSizeOptions.map((opt) => (
-                      <option key={String(opt)} value={String(opt)}>
-                        {opt === 'all' ? 'All' : opt}
-                      </option>
-                    ))}
-                  </select>
-                </div>
-              </div>
-            )}
-          </>
-        )}
+              )}
+            </>
+          )}
+        </div>
       </div>
 
       {/* Fork Modal */}