@yancyyu/openhermit 1.5.8

package/src/features/recent-projects/renderer/hooks/useRecentProjectsSection.ts

@@ -0,0 +1,289 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { type DashboardRecentProject } from '@features/recent-projects/contracts';
+import { api } from '@renderer/api';
+import { useStore } from '@renderer/store';
+import { isTeamProvisioningActive } from '@renderer/store/slices/teamSlice';
+import { buildTaskCountsByProject } from '@renderer/utils/pathNormalize';
+import { useShallow } from 'zustand/react/shallow';
+
+import { adaptRecentProjectsSection } from '../adapters/RecentProjectsSectionAdapter';
+import { buildActiveTeamsByProject } from '../utils/activeProjectTeams';
+import {
+  sortRecentProjectsByDisplayPriority,
+  subscribeRecentProjectOpenHistory,
+} from '../utils/recentProjectOpenHistory';
+import {
+  getRecentProjectsClientSnapshot,
+  loadRecentProjectsWithClientCache,
+} from '../utils/recentProjectsClientCache';
+
+import { useOpenRecentProject } from './useOpenRecentProject';
+
+import type { RecentProjectCardModel } from '../adapters/RecentProjectsSectionAdapter';
+import type { TeamSummary } from '@shared/types';
+
+const INITIAL_RECENT_PROJECTS = 11;
+const LOAD_MORE_STEP = 8;
+const DEGRADED_RECENT_PROJECTS_FAST_RETRY_DELAY_MS = 30_000;
+const DEGRADED_RECENT_PROJECTS_STEADY_RETRY_DELAY_MS = 120_000;
+const DEGRADED_RECENT_PROJECTS_FAST_RETRY_LIMIT = 3;
+const RECENT_PROJECTS_LOAD_TIMEOUT_MS = 8_000;
+
+function withRecentProjectsTimeout<T>(promise: Promise<T>): Promise<T> {
+  return new Promise<T>((resolve, reject) => {
+    const timeoutId = window.setTimeout(() => {
+      reject(new Error('最近项目加载超时，请稍后重试。'));
+    }, RECENT_PROJECTS_LOAD_TIMEOUT_MS);
+
+    promise.then(
+      (value) => {
+        window.clearTimeout(timeoutId);
+        resolve(value);
+      },
+      (error: unknown) => {
+        window.clearTimeout(timeoutId);
+        reject(error);
+      }
+    );
+  });
+}
+
+function matchesSearch(project: DashboardRecentProject, query: string): boolean {
+  if (!query) {
+    return true;
+  }
+
+  const normalizedQuery = query.trim().toLowerCase();
+  if (!normalizedQuery) {
+    return true;
+  }
+
+  return (
+    project.name.toLowerCase().includes(normalizedQuery) ||
+    project.primaryPath.toLowerCase().includes(normalizedQuery) ||
+    project.associatedPaths.some((projectPath) =>
+      projectPath.toLowerCase().includes(normalizedQuery)
+    ) ||
+    project.primaryBranch?.toLowerCase().includes(normalizedQuery) === true
+  );
+}
+
+export function useRecentProjectsSection(
+  searchQuery: string,
+  maxProjects = INITIAL_RECENT_PROJECTS
+): {
+  cards: RecentProjectCardModel[];
+  loading: boolean;
+  error: string | null;
+  canLoadMore: boolean;
+  isElectron: boolean;
+  loadMore: () => void;
+  reload: () => Promise<void>;
+  openRecentProject: (project: DashboardRecentProject) => Promise<void>;
+  openProjectPath: (projectPath: string) => Promise<void>;
+  selectProjectFolder: () => Promise<void>;
+} {
+  const {
+    globalTasks,
+    globalTasksInitialized,
+    globalTasksLoading,
+    fetchAllTasks,
+    teams,
+    provisioningRuns,
+    currentProvisioningRunIdByTeam,
+    provisioningSnapshotByTeam,
+  } = useStore(
+    useShallow((state) => ({
+      globalTasks: state.globalTasks,
+      globalTasksInitialized: state.globalTasksInitialized,
+      globalTasksLoading: state.globalTasksLoading,
+      fetchAllTasks: state.fetchAllTasks,
+      teams: state.teams,
+      provisioningRuns: state.provisioningRuns,
+      currentProvisioningRunIdByTeam: state.currentProvisioningRunIdByTeam,
+      provisioningSnapshotByTeam: state.provisioningSnapshotByTeam,
+    }))
+  );
+  const initialSnapshot = useMemo(() => getRecentProjectsClientSnapshot(), []);
+  const { openRecentProject, openProjectPath, selectProjectFolder } = useOpenRecentProject();
+  const [recentProjects, setRecentProjects] = useState<DashboardRecentProject[]>(
+    initialSnapshot?.payload.projects ?? []
+  );
+  const [recentProjectsDegraded, setRecentProjectsDegraded] = useState(
+    initialSnapshot?.payload.degraded ?? false
+  );
+  const [degradedRefreshCount, setDegradedRefreshCount] = useState(
+    initialSnapshot?.payload.degraded ? 1 : 0
+  );
+  const [loading, setLoading] = useState(initialSnapshot == null);
+  const [error, setError] = useState<string | null>(null);
+  const [visibleProjects, setVisibleProjects] = useState(maxProjects);
+  const [aliveTeams, setAliveTeams] = useState<string[]>([]);
+  const [openHistoryVersion, setOpenHistoryVersion] = useState(0);
+  const hasFetchedTasksRef = useRef(globalTasksInitialized);
+  const recentProjectsRef = useRef<DashboardRecentProject[]>(
+    initialSnapshot?.payload.projects ?? []
+  );
+  const provisioningState = useMemo(
+    () => ({ currentProvisioningRunIdByTeam, provisioningRuns }),
+    [currentProvisioningRunIdByTeam, provisioningRuns]
+  );
+  const provisioningTeamNames = useMemo(
+    () =>
+      Object.keys(currentProvisioningRunIdByTeam).filter((teamName) =>
+        isTeamProvisioningActive(provisioningState, teamName)
+      ),
+    [currentProvisioningRunIdByTeam, provisioningState]
+  );
+  const provisioningTeamNamesKey = useMemo(
+    () => [...provisioningTeamNames].sort().join('\u0000'),
+    [provisioningTeamNames]
+  );
+
+  useEffect(() => {
+    recentProjectsRef.current = recentProjects;
+  }, [recentProjects]);
+
+  const reload = useCallback(async (options?: { force?: boolean }): Promise<void> => {
+    const hasVisibleProjects =
+      recentProjectsRef.current.length > 0 || getRecentProjectsClientSnapshot() != null;
+
+    if (!hasVisibleProjects) {
+      setLoading(true);
+    }
+    setError(null);
+    try {
+      const payload = await withRecentProjectsTimeout(
+        loadRecentProjectsWithClientCache(() => api.getDashboardRecentProjects(), options)
+      );
+      setRecentProjects(payload.projects);
+      setRecentProjectsDegraded(payload.degraded);
+      setDegradedRefreshCount((current) => (payload.degraded ? current + 1 : 0));
+    } catch (nextError) {
+      setError(nextError instanceof Error ? nextError.message : '最近项目加载失败');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    const snapshot = getRecentProjectsClientSnapshot();
+    if (snapshot && !snapshot.isStale) {
+      return;
+    }
+
+    void reload({ force: snapshot != null });
+  }, [reload]);
+
+  useEffect(() => {
+    if (!recentProjectsDegraded) {
+      return;
+    }
+
+    const delayMs =
+      degradedRefreshCount <= DEGRADED_RECENT_PROJECTS_FAST_RETRY_LIMIT
+        ? DEGRADED_RECENT_PROJECTS_FAST_RETRY_DELAY_MS
+        : DEGRADED_RECENT_PROJECTS_STEADY_RETRY_DELAY_MS;
+
+    const timer = window.setTimeout(() => {
+      void reload({ force: true });
+    }, delayMs);
+
+    return () => {
+      window.clearTimeout(timer);
+    };
+  }, [degradedRefreshCount, recentProjectsDegraded, reload]);
+
+  useEffect(() => {
+    if (recentProjects.length === 0 || hasFetchedTasksRef.current || globalTasksInitialized) {
+      hasFetchedTasksRef.current = hasFetchedTasksRef.current || globalTasksInitialized;
+      return;
+    }
+
+    hasFetchedTasksRef.current = true;
+    void fetchAllTasks();
+  }, [fetchAllTasks, globalTasksInitialized, recentProjects.length]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    void api.teams
+      .aliveList()
+      .then((teamNames) => {
+        if (!cancelled) {
+          setAliveTeams(teamNames);
+        }
+      })
+      .catch(() => undefined);
+
+    return () => {
+      cancelled = true;
+    };
+  }, [provisioningTeamNamesKey, teams]);
+
+  useEffect(() => {
+    if (!searchQuery.trim()) {
+      setVisibleProjects(maxProjects);
+    }
+  }, [maxProjects, searchQuery]);
+
+  useEffect(
+    () => subscribeRecentProjectOpenHistory(() => setOpenHistoryVersion((current) => current + 1)),
+    []
+  );
+
+  const taskCountsByProject = useMemo(() => buildTaskCountsByProject(globalTasks), [globalTasks]);
+
+  const activeTeamsByProject = useMemo(() => {
+    return buildActiveTeamsByProject({
+      teams,
+      aliveTeamNames: aliveTeams,
+      provisioningTeamNames,
+      provisioningSnapshotByTeam,
+    });
+  }, [aliveTeams, provisioningSnapshotByTeam, provisioningTeamNames, teams]);
+
+  const decoratedCards = useMemo(
+    () =>
+      adaptRecentProjectsSection({
+        projects: sortRecentProjectsByDisplayPriority(recentProjects),
+        taskCountsByProject,
+        activeTeamsByProject,
+        tasksLoading: globalTasksLoading,
+      }),
+    [
+      activeTeamsByProject,
+      globalTasksLoading,
+      openHistoryVersion,
+      recentProjects,
+      taskCountsByProject,
+    ]
+  );
+
+  const filteredCards = useMemo(
+    () => decoratedCards.filter((card) => matchesSearch(card.project, searchQuery)),
+    [decoratedCards, searchQuery]
+  );
+
+  const cards = useMemo(() => {
+    if (searchQuery.trim()) {
+      return filteredCards;
+    }
+
+    return filteredCards.slice(0, visibleProjects);
+  }, [filteredCards, searchQuery, visibleProjects]);
+
+  return {
+    cards,
+    loading,
+    error,
+    canLoadMore: !searchQuery.trim() && filteredCards.length > visibleProjects,
+    isElectron: false,
+    loadMore: () => setVisibleProjects((current) => current + LOAD_MORE_STEP),
+    reload,
+    openRecentProject,
+    openProjectPath,
+    selectProjectFolder,
+  };
+}

package/src/features/recent-projects/renderer/index.ts

@@ -0,0 +1,2 @@
+export { RecentProjectsSection } from './ui/RecentProjectsSection';
+export { recordRecentProjectOpenPaths } from './utils/recentProjectOpenHistory';

package/src/features/recent-projects/renderer/ui/RecentProjectCard.tsx

@@ -0,0 +1,221 @@
+import { useMemo, useState } from 'react';
+
+import { ProviderBrandLogo } from '@renderer/components/common/ProviderBrandLogo';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
+import { projectColor } from '@renderer/utils/projectColor';
+import { FolderGit2, FolderOpen, GitBranch, Terminal } from 'lucide-react';
+
+import type { RecentProjectCardModel } from '../adapters/RecentProjectsSectionAdapter';
+
+interface RecentProjectCardProps {
+  card: RecentProjectCardModel;
+  onClick: () => void;
+  onOpenPath: () => void;
+}
+
+export const RecentProjectCard = ({
+  card,
+  onClick,
+  onOpenPath,
+}: Readonly<RecentProjectCardProps>): React.JSX.Element => {
+  const color = useMemo(() => projectColor(card.name), [card.name]);
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <button
+      onClick={onClick}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      className="bg-surface/50 group relative flex min-h-[120px] flex-col overflow-hidden rounded-lg border border-l-[3px] border-border p-4 text-left transition-all duration-300 hover:border-border-emphasis hover:bg-surface-raised"
+      style={{
+        borderLeftColor: color.border,
+        boxShadow: isHovered ? `inset 3px 0 12px -4px ${color.glow}` : undefined,
+      }}
+    >
+      {card.activeTeams && card.activeTeams.length > 0 && (
+        <span className="absolute right-3 top-3 inline-flex size-2.5">
+          <span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-400 opacity-50" />
+          <span className="relative inline-flex size-2.5 rounded-full bg-emerald-500" />
+        </span>
+      )}
+
+      <div className="mb-1 flex items-center gap-2.5">
+        <div className="flex size-8 shrink-0 items-center justify-center rounded-md border border-border bg-surface-overlay transition-colors duration-300 group-hover:border-border-emphasis">
+          <FolderGit2
+            className="size-4 transition-colors group-hover:text-text"
+            style={{ color: color.icon }}
+          />
+        </div>
+        <div className="min-w-0">
+          <div className="flex items-center gap-1.5">
+            <h3 className="min-w-0 truncate text-sm font-medium text-text transition-colors duration-200 group-hover:text-text">
+              {card.name}
+            </h3>
+            {card.pathSummary && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="inline-flex shrink-0 items-center rounded-full bg-surface-overlay px-1.5 py-0.5 text-[9px] font-medium text-text-muted">
+                    {card.pathSummary.badgeLabel}
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent side="bottom" align="start" className="max-w-sm">
+                  <div className="space-y-2">
+                    <p className="text-[11px] leading-relaxed text-text-secondary">
+                      {card.pathSummary.description}
+                    </p>
+                    <div className="space-y-1.5">
+                      {card.pathSummary.paths.map((pathItem) => (
+                        <div key={`${pathItem.label}:${pathItem.fullPath}`} className="space-y-0.5">
+                          <p className="text-[10px] font-medium uppercase tracking-wide text-text-muted">
+                            {pathItem.label}
+                          </p>
+                          <p className="font-mono text-[11px] text-text">{pathItem.fullPath}</p>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </TooltipContent>
+              </Tooltip>
+            )}
+          </div>
+          <div className="mt-1 flex items-center gap-1.5">
+            {card.providerIds.map((providerId) => (
+              <span
+                key={providerId}
+                className="bg-surface-overlay/80 inline-flex items-center rounded-full border border-border p-1"
+                title={providerId}
+              >
+                <ProviderBrandLogo providerId={providerId} className="size-3.5" />
+              </span>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="flex w-full min-w-0 items-center gap-1 font-mono text-[10px] text-text-muted">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div
+              role="button"
+              tabIndex={0}
+              onClick={(event) => {
+                event.stopPropagation();
+                onOpenPath();
+              }}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  onOpenPath();
+                }
+              }}
+              className="shrink-0 cursor-pointer rounded p-0.5 transition-colors hover:bg-white/5 hover:text-text-secondary"
+            >
+              <FolderOpen className="size-3" />
+            </div>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">打开</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className="truncate">{card.formattedPath}</span>
+          </TooltipTrigger>
+          <TooltipContent side="bottom" align="start">
+            <p className="font-mono text-[11px]">{card.project.primaryPath}</p>
+          </TooltipContent>
+        </Tooltip>
+      </div>
+
+      {card.primaryBranch ? (
+        <div className="mb-auto mt-1 flex items-center gap-1.5 truncate">
+          <GitBranch className="size-3 shrink-0 text-text-muted" />
+          <span className="truncate text-[10px] text-text-secondary">{card.primaryBranch}</span>
+        </div>
+      ) : (
+        <div className="mb-auto" />
+      )}
+
+      <div className="mt-3 flex flex-wrap items-center gap-2">
+        {card.taskCounts &&
+          (card.taskCounts.pending > 0 ||
+            card.taskCounts.inProgress > 0 ||
+            card.taskCounts.completed > 0) && (
+            <>
+              {card.taskCounts.inProgress > 0 && (
+                <span className="inline-flex items-center rounded-full bg-blue-500/15 px-1.5 py-0.5 text-[10px] font-medium text-blue-600 dark:text-blue-400">
+                  进行中 {card.taskCounts.inProgress}
+                </span>
+              )}
+              {card.taskCounts.pending > 0 && (
+                <span className="inline-flex items-center rounded-full bg-yellow-500/15 px-1.5 py-0.5 text-[10px] font-medium text-yellow-400">
+                  待处理 {card.taskCounts.pending}
+                </span>
+              )}
+              {card.taskCounts.completed > 0 && (
+                <span className="inline-flex items-center rounded-full bg-green-500/15 px-1.5 py-0.5 text-[10px] font-medium text-green-400">
+                  已完成 {card.taskCounts.completed}
+                </span>
+              )}
+              <span className="text-text-muted">·</span>
+            </>
+          )}
+        <span className="text-[10px] text-text-muted">{card.lastActivityLabel}</span>
+      </div>
+
+      {card.tasksLoading ? (
+        <div className="mt-2 w-full">
+          <div className="flex items-center gap-2">
+            <div className="h-1.5 flex-1 animate-pulse overflow-hidden rounded-full bg-[var(--color-surface-raised)]" />
+            <div className="h-2.5 w-6 animate-pulse rounded bg-[var(--color-surface-raised)]" />
+          </div>
+        </div>
+      ) : (
+        card.taskCounts &&
+        (() => {
+          const pending = card.taskCounts.pending ?? 0;
+          const inProgress = card.taskCounts.inProgress ?? 0;
+          const completed = card.taskCounts.completed ?? 0;
+          const totalTasks = pending + inProgress + completed;
+          if (totalTasks === 0) return null;
+          const progressPercent = Math.round((completed / totalTasks) * 100);
+          return (
+            <div className="mt-2 w-full space-y-1">
+              <div className="flex items-center gap-2">
+                <div
+                  className="h-1.5 flex-1 overflow-hidden rounded-full bg-[var(--color-surface-raised)]"
+                  role="progressbar"
+                  aria-valuenow={completed}
+                  aria-valuemin={0}
+                  aria-valuemax={totalTasks}
+                  aria-label={`任务完成 ${completed}/${totalTasks}`}
+                >
+                  <div
+                    className="h-full rounded-full bg-emerald-500 transition-all duration-200"
+                    style={{ width: `${progressPercent}%` }}
+                  />
+                </div>
+                <span className="shrink-0 text-[10px] font-medium tracking-tight text-[var(--color-text-muted)]">
+                  {completed}/{totalTasks}
+                </span>
+              </div>
+            </div>
+          );
+        })()
+      )}
+
+      {card.activeTeams && card.activeTeams.length > 0 && (
+        <div className="mt-2 flex flex-wrap items-center gap-1.5 border-t border-border pt-2">
+          <Terminal className="size-3 shrink-0 text-emerald-400" />
+          {card.activeTeams.map((team) => (
+            <span
+              key={team.teamName}
+              className="inline-flex items-center rounded-full bg-emerald-500/10 px-1.5 py-0.5 text-[9px] font-medium text-emerald-400"
+            >
+              {team.displayName}
+            </span>
+          ))}
+        </div>
+      )}
+    </button>
+  );
+};

package/src/features/recent-projects/renderer/ui/RecentProjectsSection.tsx

@@ -0,0 +1,167 @@
+import { Button } from '@renderer/components/ui/button';
+import { FolderGit2, FolderOpen, Search } from 'lucide-react';
+
+import { useRecentProjectsSection } from '../hooks/useRecentProjectsSection';
+
+import { RecentProjectCard } from './RecentProjectCard';
+
+interface RecentProjectsSectionProps {
+  searchQuery: string;
+}
+
+const titleWidths = [60, 66, 50, 55, 75, 45, 40, 65];
+const pathWidths = [80, 75, 85, 66, 70, 80, 60, 72];
+
+function SelectProjectFolderCard({
+  onClick,
+}: Readonly<{
+  onClick: () => void;
+}>): React.JSX.Element {
+  return (
+    <button
+      className="hover:bg-surface/30 group relative flex min-h-[120px] flex-col items-center justify-center rounded-lg border border-dashed border-border bg-transparent p-4 transition-all duration-300 hover:border-border-emphasis"
+      onClick={onClick}
+      title="选择项目文件夹"
+    >
+      <div className="mb-2 flex size-8 items-center justify-center rounded-md border border-dashed border-border transition-colors duration-300 group-hover:border-border-emphasis">
+        <FolderOpen className="size-4 text-text-muted transition-colors group-hover:text-text-secondary" />
+      </div>
+      <span className="text-xs text-text-muted transition-colors group-hover:text-text-secondary">
+        选择文件夹
+      </span>
+    </button>
+  );
+}
+
+export const RecentProjectsSection = ({
+  searchQuery,
+}: Readonly<RecentProjectsSectionProps>): React.JSX.Element => {
+  const {
+    cards,
+    loading,
+    error,
+    canLoadMore,
+    isElectron,
+    loadMore,
+    reload,
+    openRecentProject,
+    openProjectPath,
+    selectProjectFolder,
+  } = useRecentProjectsSection(searchQuery);
+
+  if (loading) {
+    return (
+      <div className="grid grid-cols-2 gap-3 lg:grid-cols-3 xl:grid-cols-4">
+        {Array.from({ length: 8 }).map((_, index) => (
+          <div
+            key={index}
+            className="skeleton-card flex min-h-[120px] flex-col rounded-sm border border-border p-4"
+            style={{
+              animationDelay: `${index * 80}ms`,
+              backgroundColor: 'var(--skeleton-base)',
+            }}
+          >
+            <div
+              className="mb-3 size-8 rounded-sm"
+              style={{ backgroundColor: 'var(--skeleton-base-light)' }}
+            />
+            <div
+              className="mb-2 h-3.5 rounded-sm"
+              style={{
+                width: `${titleWidths[index]}%`,
+                backgroundColor: 'var(--skeleton-base-light)',
+              }}
+            />
+            <div
+              className="mb-auto h-2.5 rounded-sm"
+              style={{
+                width: `${pathWidths[index]}%`,
+                backgroundColor: 'var(--skeleton-base-dim)',
+              }}
+            />
+            <div className="mt-3 flex gap-2">
+              <div
+                className="h-2.5 w-16 rounded-sm"
+                style={{ backgroundColor: 'var(--skeleton-base-dim)' }}
+              />
+              <div
+                className="h-2.5 w-12 rounded-sm"
+                style={{ backgroundColor: 'var(--skeleton-base-dim)' }}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (error && cards.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-3 rounded-sm border border-dashed border-border px-8 py-16">
+        <div className="mb-1 flex size-12 items-center justify-center rounded-sm border border-border bg-surface-raised">
+          <FolderGit2 className="size-6 text-text-muted" />
+        </div>
+        <div className="text-center">
+          <p className="mb-1 text-sm text-text-secondary">项目加载失败</p>
+          <p className="max-w-xl text-xs text-text-muted">{error}</p>
+        </div>
+        <button
+          onClick={() => void reload()}
+          className="rounded-sm border border-border bg-surface-raised px-3 py-1.5 text-xs text-text-secondary transition-colors hover:border-border-emphasis hover:text-text"
+        >
+          重试
+        </button>
+      </div>
+    );
+  }
+
+  if (cards.length === 0 && searchQuery.trim()) {
+    return (
+      <div className="flex flex-col items-center justify-center rounded-sm border border-dashed border-border px-8 py-16">
+        <div className="mb-4 flex size-12 items-center justify-center rounded-sm border border-border bg-surface-raised">
+          <Search className="size-6 text-text-muted" />
+        </div>
+        <p className="mb-1 text-sm text-text-secondary">未找到项目</p>
+        <p className="text-xs text-text-muted">没有匹配“{searchQuery}”的结果</p>
+      </div>
+    );
+  }
+
+  if (cards.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center rounded-sm border border-dashed border-border px-8 py-16">
+        <div className="mb-4 flex size-12 items-center justify-center rounded-sm border border-border bg-surface-raised">
+          <FolderGit2 className="size-6 text-text-muted" />
+        </div>
+        <p className="mb-1 text-sm text-text-secondary">暂无最近项目</p>
+        <p className="text-xs text-text-muted">最近的 Claude 和 Codex 活动会显示在这里。</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-2 gap-3 lg:grid-cols-3 xl:grid-cols-4">
+        {!searchQuery.trim() && isElectron && (
+          <SelectProjectFolderCard onClick={() => void selectProjectFolder()} />
+        )}
+        {cards.map((card) => (
+          <RecentProjectCard
+            key={card.id}
+            card={card}
+            onClick={() => void openRecentProject(card.project)}
+            onOpenPath={() => void openProjectPath(card.project.primaryPath)}
+          />
+        ))}
+      </div>
+
+      {canLoadMore && (
+        <div className="flex justify-center">
+          <Button variant="outline" size="sm" onClick={loadMore}>
+            加载更多
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};