diff --git a/.gitignore b/.gitignore
index 172262d..28a727c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,6 +26,9 @@ target/
 **/*.rs.bk
 *.pdb
 
+# ts-rs default output (real bindings go to src/lib/bindings/)
+src-tauri/bindings/
+
 # AI local settings
 .claude/
 .mcp.json
diff --git a/src-tauri/src/commands/patcher.rs b/src-tauri/src/commands/patcher.rs
index 93e4a89..57da355 100644
--- a/src-tauri/src/commands/patcher.rs
+++ b/src-tauri/src/commands/patcher.rs
@@ -31,6 +31,12 @@ pub struct PatcherConfig {
     /// If not provided, defaults to 0 (equivalent to `--opts:none` in cslol-tools).
     #[ts(optional, type = "number")]
     pub flags: Option<u64>,
+    /// Absolute paths to workshop project directories to include in the overlay.
+    ///
+    /// These are loaded directly from disk via `FsModContent` and prepended to
+    /// the enabled mod list (highest priority).
+    #[ts(optional)]
+    pub workshop_projects: Option<Vec<String>>,
 }
 
 /// Current status of the patcher.
@@ -151,6 +157,13 @@ fn start_patcher_inner(
     let log_file = config.log_file.clone();
     let timeout_ms = config.timeout_ms.unwrap_or(DEFAULT_HOOK_TIMEOUT_MS);
     let flags = config.flags.unwrap_or(0);
+    let workshop_paths: Vec<PathBuf> = config
+        .workshop_projects
+        .unwrap_or_default()
+        .iter()
+        .map(PathBuf::from)
+        .collect();
+
     let settings_snapshot = settings.0.lock().mutex_err()?.clone();
 
     tracing::info!(
@@ -171,20 +184,21 @@ fn start_patcher_inner(
 
     let handle = thread::spawn(move || {
         // Phase 1: Build overlay (the slow part)
-        let overlay_root = match overlay::ensure_overlay(&library_clone, &settings_snapshot) {
-            Ok(root) => root,
-            Err(e) => {
-                tracing::error!(error = ?e, "Overlay build failed");
-                let error_response: AppErrorResponse = e.into();
-                let _ = library_clone
-                    .app_handle()
-                    .emit("patcher-error", &error_response);
-                if let Ok(mut s) = state_arc.lock() {
-                    s.phase = PatcherPhase::Idle;
+        let overlay_root =
+            match overlay::ensure_overlay(&library_clone, &settings_snapshot, &workshop_paths) {
+                Ok(root) => root,
+                Err(e) => {
+                    tracing::error!(error = ?e, "Overlay build failed");
+                    let error_response: AppErrorResponse = e.into();
+                    let _ = library_clone
+                        .app_handle()
+                        .emit("patcher-error", &error_response);
+                    if let Ok(mut s) = state_arc.lock() {
+                        s.phase = PatcherPhase::Idle;
+                    }
+                    return;
                 }
-                return;
-            }
-        };
+            };
 
         // Check stop flag between build and patcher loop
         if stop_flag.load(Ordering::SeqCst) {
diff --git a/src-tauri/src/overlay/mod.rs b/src-tauri/src/overlay/mod.rs
index 667a14e..f99fe40 100644
--- a/src-tauri/src/overlay/mod.rs
+++ b/src-tauri/src/overlay/mod.rs
@@ -33,7 +33,14 @@ pub struct OverlayProgress {
 /// Ensure the overlay exists and is up-to-date for the current enabled mod set.
 ///
 /// Returns the overlay root directory (the prefix passed to the legacy patcher).
-pub fn ensure_overlay(library: &ModLibrary, settings: &Settings) -> AppResult<PathBuf> {
+///
+/// Workshop project paths (if any) are loaded via `FsModContent` and prepended
+/// to the enabled mod list so they take highest priority.
+pub fn ensure_overlay(
+    library: &ModLibrary,
+    settings: &Settings,
+    workshop_project_paths: &[PathBuf],
+) -> AppResult<PathBuf> {
     let storage_dir = library.storage_dir(settings)?;
 
     let game_dir = resolve_game_dir(settings)?;
@@ -101,7 +108,24 @@ pub fn ensure_overlay(library: &ModLibrary, settings: &Settings) -> AppResult<Pa
                 );
             });
 
-    builder.set_enabled_mods(enabled_mods);
+    let mut all_mods = Vec::new();
+    for project_path in workshop_project_paths {
+        let utf8_path = Utf8PathBuf::from_path_buf(project_path.clone()).map_err(|p| {
+            AppError::Other(format!("Non-UTF-8 workshop project path: {}", p.display()))
+        })?;
+        let dir_name = project_path
+            .file_name()
+            .and_then(|n| n.to_str())
+            .unwrap_or("unknown");
+        let id = format!("workshop:{}", dir_name);
+        tracing::info!("Adding workshop project: id={}, path={}", id, utf8_path);
+        all_mods.push(ltk_overlay::EnabledMod {
+            id,
+            content: Box::new(ltk_overlay::FsModContent::new(utf8_path)),
+        });
+    }
+    all_mods.extend(enabled_mods);
+    builder.set_enabled_mods(all_mods);
 
     builder
         .build()
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 59e4eba..c68b265 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -72,6 +72,27 @@ const spinnerSizeClasses: Record<ButtonSize, string> = {
   xl: "text-2xl",
 };
 
+const iconSlotSizeClasses: Record<ButtonSize, string> = {
+  xs: "h-3 w-3",
+  sm: "h-4 w-4",
+  md: "h-4 w-4",
+  lg: "h-5 w-5",
+  xl: "h-5 w-5",
+};
+
+function IconSlot({ children, size }: { children: ReactNode; size: ButtonSize }) {
+  return (
+    <span
+      className={twMerge(
+        "inline-flex shrink-0 items-center justify-center",
+        iconSlotSizeClasses[size],
+      )}
+    >
+      {children}
+    </span>
+  );
+}
+
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
@@ -107,12 +128,12 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           {children && <span className="opacity-0">{children}</span>}
         </>
       ))
-      .with([false, true], () => icon)
+      .with([false, true], () => <IconSlot size={size}>{icon}</IconSlot>)
       .with([false, false], () => (
         <>
-          {leftIcon}
+          {leftIcon && <IconSlot size={size}>{leftIcon}</IconSlot>}
           {children}
-          {rightIcon}
+          {rightIcon && <IconSlot size={size}>{rightIcon}</IconSlot>}
         </>
       ))
       .exhaustive();
diff --git a/src/lib/bindings/PatcherConfig.ts b/src/lib/bindings/PatcherConfig.ts
index 67e83a7..736b9dc 100644
--- a/src/lib/bindings/PatcherConfig.ts
+++ b/src/lib/bindings/PatcherConfig.ts
@@ -18,4 +18,11 @@ export type PatcherConfig = {
    * If not provided, defaults to 0 (equivalent to `--opts:none` in cslol-tools).
    */
   flags?: number;
+  /**
+   * Absolute paths to workshop project directories to include in the overlay.
+   *
+   * These are loaded directly from disk via `FsModContent` and prepended to
+   * the enabled mod list (highest priority).
+   */
+  workshopProjects?: Array<string>;
 };
diff --git a/src/modules/patcher/components/StatusBar.tsx b/src/modules/patcher/components/StatusBar.tsx
index 14bbe85..e7c53cf 100644
--- a/src/modules/patcher/components/StatusBar.tsx
+++ b/src/modules/patcher/components/StatusBar.tsx
@@ -1,7 +1,9 @@
+import { useEffect, useRef } from "react";
 import { LuLoader, LuSquare } from "react-icons/lu";
 
 import { Button, Progress } from "@/components";
 import type { OverlayProgress } from "@/lib/tauri";
+import { usePatcherSessionStore } from "@/stores";
 
 import { useOverlayProgress, usePatcherError, usePatcherStatus, useStopPatcher } from "../api";
 
@@ -23,11 +25,32 @@ export function StatusBar() {
   const stopPatcher = useStopPatcher();
   usePatcherError();
 
+  const testingProjects = usePatcherSessionStore((s) => s.testingProjects);
+  const clearTestingProjects = usePatcherSessionStore((s) => s.clearTestingProjects);
+
   const isBuilding = patcherStatus?.phase === "building";
   const isRunning = patcherStatus?.running ?? false;
+  const isIdle = !isRunning && !isBuilding;
+
+  const wasActiveRef = useRef(false);
+
+  useEffect(() => {
+    if (!isIdle) {
+      wasActiveRef.current = true;
+    } else if (wasActiveRef.current && testingProjects.length > 0) {
+      clearTestingProjects();
+      wasActiveRef.current = false;
+    }
+  }, [isIdle, testingProjects, clearTestingProjects]);
 
-  // Hide when idle
-  if (!isRunning && !isBuilding) return null;
+  if (isIdle) return null;
+
+  const testLabel =
+    testingProjects.length === 1
+      ? `Testing ${testingProjects[0].displayName}`
+      : testingProjects.length > 1
+        ? `Testing ${testingProjects.length} projects`
+        : null;
 
   // Building overlay — show full progress
   if (isBuilding) {
@@ -48,6 +71,11 @@ export function StatusBar() {
         <div className="flex items-center gap-3">
           <LuLoader className="h-4 w-4 shrink-0 animate-spin text-brand-500" />
           <span className="shrink-0 text-sm font-medium text-brand-500">Building Overlay</span>
+          {testLabel && (
+            <span className="shrink-0 rounded-full bg-brand-500/10 px-2 py-0.5 text-xs font-medium text-brand-400">
+              {testLabel}
+            </span>
+          )}
           <span className="text-sm text-surface-300">{label}</span>
           <div className="flex-1" />
           {counter && (
@@ -72,7 +100,7 @@ export function StatusBar() {
   return (
     <div className="animate-in slide-in-from-bottom-2 flex items-center border-t-2 border-green-500 bg-surface-950 px-4 py-2">
       <span className="mr-2 h-2 w-2 shrink-0 animate-pulse rounded-full bg-green-500" />
-      <span className="text-sm font-medium text-green-500">Patcher running</span>
+      <span className="text-sm font-medium text-green-500">{testLabel ?? "Patcher running"}</span>
       <div className="flex-1" />
       <Button
         variant="ghost"
diff --git a/src/modules/patcher/index.ts b/src/modules/patcher/index.ts
index 9be85c6..61fb291 100644
--- a/src/modules/patcher/index.ts
+++ b/src/modules/patcher/index.ts
@@ -1,4 +1,5 @@
 export {
+  patcherKeys,
   useOverlayProgress,
   usePatcherError,
   usePatcherStatus,
diff --git a/src/modules/workshop/api/index.ts b/src/modules/workshop/api/index.ts
index 97f4488..3150013 100644
--- a/src/modules/workshop/api/index.ts
+++ b/src/modules/workshop/api/index.ts
@@ -2,6 +2,7 @@ export { workshopKeys } from "./keys";
 export { useCreateProject } from "./useCreateProject";
 export { useDeleteProject } from "./useDeleteProject";
 export { useFantomeImportProgress } from "./useFantomeImportProgress";
+export { useFilteredProjects } from "./useFilteredProjects";
 export { useGitImportProgress } from "./useGitImportProgress";
 export { useImportFromFantome } from "./useImportFromFantome";
 export { useImportFromGitRepo } from "./useImportFromGitRepo";
@@ -14,6 +15,7 @@ export { useRenameProject } from "./useRenameProject";
 export { useSaveProjectConfig } from "./useSaveProjectConfig";
 export { useSaveStringOverrides } from "./useSaveStringOverrides";
 export { useSetProjectThumbnail } from "./useSetProjectThumbnail";
+export { useTestProjects } from "./useTestProject";
 export { useValidateProject, validateProjectOptions } from "./useValidateProject";
 export { useWorkshopProject, workshopProjectOptions } from "./useWorkshopProject";
 export { useWorkshopProjects, workshopProjectsOptions } from "./useWorkshopProjects";
diff --git a/src/modules/workshop/api/useFilteredProjects.ts b/src/modules/workshop/api/useFilteredProjects.ts
new file mode 100644
index 0000000..f3aa305
--- /dev/null
+++ b/src/modules/workshop/api/useFilteredProjects.ts
@@ -0,0 +1,20 @@
+import { useMemo } from "react";
+
+import { useWorkshopViewStore } from "@/stores";
+
+import { useWorkshopProjects } from "./useWorkshopProjects";
+
+export function useFilteredProjects() {
+  const { data: projects = [] } = useWorkshopProjects();
+  const searchQuery = useWorkshopViewStore((s) => s.searchQuery);
+
+  return useMemo(() => {
+    if (!searchQuery) return projects;
+    const query = searchQuery.toLowerCase();
+    return projects.filter(
+      (project) =>
+        project.displayName.toLowerCase().includes(query) ||
+        project.name.toLowerCase().includes(query),
+    );
+  }, [projects, searchQuery]);
+}
diff --git a/src/modules/workshop/api/useProjectActions.ts b/src/modules/workshop/api/useProjectActions.ts
index f802914..093f60a 100644
--- a/src/modules/workshop/api/useProjectActions.ts
+++ b/src/modules/workshop/api/useProjectActions.ts
@@ -1,61 +1,29 @@
-import type { NavigateFn } from "@tanstack/react-router";
-import { useState } from "react";
+import { api, type WorkshopProject } from "@/lib/tauri";
+import { useWorkshopDialogsStore } from "@/stores";
 
-import { api, type PackResult, type WorkshopProject } from "@/lib/tauri";
+import { useTestProjects } from "./useTestProject";
 
-import { useDeleteProject } from "./useDeleteProject";
-import { usePackProject } from "./usePackProject";
-import { useValidateProject } from "./useValidateProject";
+export function useProjectActions(project: WorkshopProject | undefined) {
+  const testProjects = useTestProjects();
+  const openPackDialog = useWorkshopDialogsStore((s) => s.openPackDialog);
+  const openDeleteDialog = useWorkshopDialogsStore((s) => s.openDeleteDialog);
 
-export function useProjectActions(project: WorkshopProject | undefined, navigate: NavigateFn) {
-  const [packDialogOpen, setPackDialogOpen] = useState(false);
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [packResult, setPackResult] = useState<PackResult | null>(null);
-
-  const deleteProject = useDeleteProject();
-  const packProject = usePackProject();
-  const { data: validation, isLoading: validationLoading } = useValidateProject(
-    project?.path ?? "",
-    packDialogOpen,
-  );
-
-  function handlePack(format: "modpkg" | "fantome") {
+  function handleTestProject() {
     if (!project) return;
-    packProject.mutate(
-      { projectPath: project.path, format },
-      {
-        onSuccess: setPackResult,
-        onError: (err) => console.error("Failed to pack project:", err.message),
-      },
+    testProjects.mutate(
+      { projects: [{ path: project.path, displayName: project.displayName }] },
+      { onError: (err) => console.error("Failed to test project:", err.message) },
     );
   }
 
   function handleOpenPackDialog() {
-    setPackResult(null);
-    setPackDialogOpen(true);
-  }
-
-  function handleClosePackDialog() {
-    setPackDialogOpen(false);
-    setPackResult(null);
-  }
-
-  function handleDeleteProject() {
     if (!project) return;
-    deleteProject.mutate(project.path, {
-      onSuccess: () => {
-        navigate({ to: "/workshop" });
-      },
-      onError: (err) => console.error("Failed to delete project:", err.message),
-    });
-  }
-
-  function openDeleteDialog() {
-    setDeleteDialogOpen(true);
+    openPackDialog(project);
   }
 
-  function closeDeleteDialog() {
-    setDeleteDialogOpen(false);
+  function handleOpenDeleteDialog() {
+    if (!project) return;
+    openDeleteDialog(project);
   }
 
   async function handleOpenLocation() {
@@ -68,19 +36,10 @@ export function useProjectActions(project: WorkshopProject | undefined, navigate
   }
 
   return {
-    packDialogOpen,
-    packResult,
-    deleteDialogOpen,
-    validation: validation ?? null,
-    validationLoading,
-    isPacking: packProject.isPending,
-    isDeleting: deleteProject.isPending,
-    handlePack,
+    isTesting: testProjects.isPending,
+    handleTestProject,
     handleOpenPackDialog,
-    handleClosePackDialog,
-    handleDeleteProject,
+    handleOpenDeleteDialog,
     handleOpenLocation,
-    openDeleteDialog,
-    closeDeleteDialog,
   };
 }
diff --git a/src/modules/workshop/api/useTestProject.ts b/src/modules/workshop/api/useTestProject.ts
new file mode 100644
index 0000000..23b5731
--- /dev/null
+++ b/src/modules/workshop/api/useTestProject.ts
@@ -0,0 +1,33 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { api, type AppError } from "@/lib/tauri";
+import { patcherKeys } from "@/modules/patcher";
+import { usePatcherSessionStore } from "@/stores";
+import { unwrapForQuery } from "@/utils/query";
+
+interface TestProjectsArgs {
+  projects: Array<{ path: string; displayName: string }>;
+}
+
+export function useTestProjects() {
+  const queryClient = useQueryClient();
+  const setTestingProjects = usePatcherSessionStore((s) => s.setTestingProjects);
+
+  return useMutation<void, AppError, TestProjectsArgs>({
+    mutationFn: async ({ projects }) => {
+      const result = await api.startPatcher({
+        workshopProjects: projects.map((p) => p.path),
+      });
+      return unwrapForQuery(result);
+    },
+    onMutate: ({ projects }) => {
+      setTestingProjects(projects);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: patcherKeys.status() });
+    },
+    onError: () => {
+      setTestingProjects([]);
+    },
+  });
+}
diff --git a/src/modules/workshop/components/DeleteConfirmDialog.tsx b/src/modules/workshop/components/DeleteConfirmDialog.tsx
index 0a6f5e4..616f692 100644
--- a/src/modules/workshop/components/DeleteConfirmDialog.tsx
+++ b/src/modules/workshop/components/DeleteConfirmDialog.tsx
@@ -1,27 +1,34 @@
+import { useNavigate } from "@tanstack/react-router";
 import { LuTriangleAlert } from "react-icons/lu";
 
 import { Button, Dialog } from "@/components";
-import type { WorkshopProject } from "@/lib/tauri";
+import { useWorkshopDialogsStore } from "@/stores";
 
-interface DeleteConfirmDialogProps {
-  open: boolean;
-  project: WorkshopProject | null;
-  onClose: () => void;
-  onConfirm: () => void;
-  isPending?: boolean;
-}
+import { useDeleteProject } from "../api/useDeleteProject";
+
+export function DeleteConfirmDialog() {
+  const project = useWorkshopDialogsStore((s) => s.deleteProject);
+  const closeDialog = useWorkshopDialogsStore((s) => s.closeDeleteDialog);
+  const deleteProject = useDeleteProject();
+  const navigate = useNavigate();
+
+  const open = project !== null;
+
+  function handleConfirm() {
+    if (!project) return;
+    deleteProject.mutate(project.path, {
+      onSuccess: () => {
+        closeDialog();
+        navigate({ to: "/workshop" });
+      },
+      onError: (err) => console.error("Failed to delete project:", err.message),
+    });
+  }
 
-export function DeleteConfirmDialog({
-  open,
-  project,
-  onClose,
-  onConfirm,
-  isPending,
-}: DeleteConfirmDialogProps) {
   if (!project) return null;
 
   return (
-    <Dialog.Root open={open} onOpenChange={(open) => !open && onClose()}>
+    <Dialog.Root open={open} onOpenChange={(open) => !open && closeDialog()}>
       <Dialog.Portal>
         <Dialog.Backdrop />
         <Dialog.Overlay>
@@ -47,13 +54,13 @@ export function DeleteConfirmDialog({
           </Dialog.Body>
 
           <Dialog.Footer>
-            <Button variant="ghost" onClick={onClose}>
+            <Button variant="ghost" onClick={closeDialog}>
               Cancel
             </Button>
             <Button
               variant="filled"
-              onClick={onConfirm}
-              loading={isPending}
+              onClick={handleConfirm}
+              loading={deleteProject.isPending}
               className="bg-red-600 hover:bg-red-500"
             >
               Delete Project
diff --git a/src/modules/workshop/components/EmptyStates.tsx b/src/modules/workshop/components/EmptyStates.tsx
index dbcc37c..360c56d 100644
--- a/src/modules/workshop/components/EmptyStates.tsx
+++ b/src/modules/workshop/components/EmptyStates.tsx
@@ -1,8 +1,12 @@
 import { Link } from "@tanstack/react-router";
+import { open } from "@tauri-apps/plugin-dialog";
 import { LuDownload, LuFolderOpen, LuHammer, LuPlus, LuSearch, LuSettings } from "react-icons/lu";
 
 import { Button } from "@/components";
 import type { AppError } from "@/lib/tauri";
+import { useWorkshopDialogsStore } from "@/stores";
+
+import { useImportFromModpkg } from "../api/useImportFromModpkg";
 
 export function LoadingState() {
   return (
@@ -51,12 +55,22 @@ export function NotConfiguredState() {
   );
 }
 
-interface NoProjectsStateProps {
-  onCreate: () => void;
-  onImport: () => void;
-}
+export function NoProjectsState() {
+  const openNewProjectDialog = useWorkshopDialogsStore((s) => s.openNewProjectDialog);
+  const importFromModpkg = useImportFromModpkg();
+
+  async function handleImport() {
+    const file = await open({
+      multiple: false,
+      filters: [{ name: "Mod Package", extensions: ["modpkg"] }],
+    });
+    if (file) {
+      importFromModpkg.mutate(file, {
+        onError: (err) => console.error("Failed to import modpkg:", err.message),
+      });
+    }
+  }
 
-export function NoProjectsState({ onCreate, onImport }: NoProjectsStateProps) {
   return (
     <div className="flex h-64 flex-col items-center justify-center text-center">
       <div className="mb-4 flex h-20 w-20 items-center justify-center rounded-2xl">
@@ -67,10 +81,14 @@ export function NoProjectsState({ onCreate, onImport }: NoProjectsStateProps) {
         Create a new project or import an existing mod package
       </p>
       <div className="flex gap-3">
-        <Button variant="outline" onClick={onImport} left={<LuDownload className="h-4 w-4" />}>
+        <Button variant="outline" onClick={handleImport} left={<LuDownload className="h-4 w-4" />}>
           Import
         </Button>
-        <Button variant="filled" onClick={onCreate} left={<LuPlus className="h-4 w-4" />}>
+        <Button
+          variant="filled"
+          onClick={openNewProjectDialog}
+          left={<LuPlus className="h-4 w-4" />}
+        >
           New Project
         </Button>
       </div>
diff --git a/src/modules/workshop/components/ImportFantomeDialog.tsx b/src/modules/workshop/components/ImportFantomeDialog.tsx
index ee63840..8732ecd 100644
--- a/src/modules/workshop/components/ImportFantomeDialog.tsx
+++ b/src/modules/workshop/components/ImportFantomeDialog.tsx
@@ -3,7 +3,10 @@ import { z } from "zod";
 
 import { Button, Dialog } from "@/components";
 import { useAppForm } from "@/lib/form";
-import type { FantomeImportProgress, FantomePeekResult, ImportFantomeArgs } from "@/lib/tauri";
+import { useWorkshopDialogsStore } from "@/stores";
+
+import { useFantomeImportProgress } from "../api/useFantomeImportProgress";
+import { useImportFromFantome } from "../api/useImportFromFantome";
 
 const importSchema = z.object({
   name: z
@@ -17,26 +20,17 @@ const importSchema = z.object({
   displayName: z.string().min(1, "Display name is required"),
 });
 
-interface ImportFantomeDialogProps {
-  open: boolean;
-  filePath: string | null;
-  peekResult: FantomePeekResult | null;
-  progress: FantomeImportProgress | null;
-  onClose: () => void;
-  onSubmit: (args: ImportFantomeArgs) => void;
-  isPending: boolean;
-}
+export function ImportFantomeDialog() {
+  const fantomeImport = useWorkshopDialogsStore((s) => s.fantomeImport);
+  const closeDialog = useWorkshopDialogsStore((s) => s.closeFantomeImportDialog);
+  const importFromFantome = useImportFromFantome();
+  const progress = useFantomeImportProgress();
 
-export function ImportFantomeDialog({
-  open,
-  filePath,
-  peekResult,
-  progress,
-  onClose,
-  onSubmit,
-  isPending,
-}: ImportFantomeDialogProps) {
-  const isImporting = isPending || (progress !== null && progress.stage !== "complete");
+  const open = fantomeImport !== null;
+  const peekResult = fantomeImport?.peekResult ?? null;
+  const filePath = fantomeImport?.filePath ?? null;
+  const isImporting =
+    importFromFantome.isPending || (progress !== null && progress.stage !== "complete");
 
   const form = useAppForm({
     defaultValues: {
@@ -48,11 +42,20 @@ export function ImportFantomeDialog({
     },
     onSubmit: ({ value }) => {
       if (!filePath) return;
-      onSubmit({
-        filePath,
-        name: value.name,
-        displayName: value.displayName,
-      });
+      importFromFantome.mutate(
+        {
+          filePath,
+          name: value.name,
+          displayName: value.displayName,
+        },
+        {
+          onSuccess: () => {
+            form.reset();
+            closeDialog();
+          },
+          onError: (err) => console.error("Failed to import fantome:", err.message),
+        },
+      );
     },
   });
 
@@ -68,7 +71,7 @@ export function ImportFantomeDialog({
   function handleClose() {
     if (isImporting) return;
     form.reset();
-    onClose();
+    closeDialog();
   }
 
   return (
diff --git a/src/modules/workshop/components/ImportGitRepoDialog.tsx b/src/modules/workshop/components/ImportGitRepoDialog.tsx
index 6a2c91e..b09b308 100644
--- a/src/modules/workshop/components/ImportGitRepoDialog.tsx
+++ b/src/modules/workshop/components/ImportGitRepoDialog.tsx
@@ -2,7 +2,10 @@ import { z } from "zod";
 
 import { Button, Dialog } from "@/components";
 import { useAppForm } from "@/lib/form";
-import type { GitImportProgress, ImportGitRepoArgs } from "@/lib/tauri";
+import { useWorkshopDialogsStore } from "@/stores";
+
+import { useGitImportProgress } from "../api/useGitImportProgress";
+import { useImportFromGitRepo } from "../api/useImportFromGitRepo";
 
 const importSchema = z.object({
   url: z
@@ -15,22 +18,14 @@ const importSchema = z.object({
   branch: z.string(),
 });
 
-interface ImportGitRepoDialogProps {
-  open: boolean;
-  progress: GitImportProgress | null;
-  onClose: () => void;
-  onSubmit: (args: ImportGitRepoArgs) => void;
-  isPending: boolean;
-}
+export function ImportGitRepoDialog() {
+  const open = useWorkshopDialogsStore((s) => s.gitImportOpen);
+  const closeDialog = useWorkshopDialogsStore((s) => s.closeGitImportDialog);
+  const importFromGitRepo = useImportFromGitRepo();
+  const progress = useGitImportProgress();
 
-export function ImportGitRepoDialog({
-  open,
-  progress,
-  onClose,
-  onSubmit,
-  isPending,
-}: ImportGitRepoDialogProps) {
-  const isImporting = isPending || (progress !== null && progress.stage !== "complete");
+  const isImporting =
+    importFromGitRepo.isPending || (progress !== null && progress.stage !== "complete");
 
   const form = useAppForm({
     defaultValues: {
@@ -41,17 +36,26 @@ export function ImportGitRepoDialog({
       onChange: importSchema,
     },
     onSubmit: ({ value }) => {
-      onSubmit({
-        url: value.url,
-        branch: value.branch || undefined,
-      });
+      importFromGitRepo.mutate(
+        {
+          url: value.url,
+          branch: value.branch || undefined,
+        },
+        {
+          onSuccess: () => {
+            form.reset();
+            closeDialog();
+          },
+          onError: (err) => console.error("Failed to import from git repo:", err.message),
+        },
+      );
     },
   });
 
   function handleClose() {
     if (isImporting) return;
     form.reset();
-    onClose();
+    closeDialog();
   }
 
   return (
diff --git a/src/modules/workshop/components/NewProjectDialog.tsx b/src/modules/workshop/components/NewProjectDialog.tsx
index fde9287..00a23df 100644
--- a/src/modules/workshop/components/NewProjectDialog.tsx
+++ b/src/modules/workshop/components/NewProjectDialog.tsx
@@ -2,9 +2,10 @@ import { z } from "zod";
 
 import { Button, Dialog } from "@/components";
 import { useAppForm } from "@/lib/form";
-import type { CreateProjectArgs } from "@/lib/tauri";
+import { useWorkshopDialogsStore } from "@/stores";
+
+import { useCreateProject } from "../api/useCreateProject";
 
-// Validation schema for the project form
 const projectSchema = z.object({
   name: z
     .string()
@@ -19,13 +20,6 @@ const projectSchema = z.object({
   authorName: z.string(),
 });
 
-interface NewProjectDialogProps {
-  open: boolean;
-  onClose: () => void;
-  onSubmit: (args: CreateProjectArgs) => void;
-  isPending?: boolean;
-}
-
 function generateDisplayName(slug: string) {
   return slug
     .split("-")
@@ -33,7 +27,11 @@ function generateDisplayName(slug: string) {
     .join(" ");
 }
 
-export function NewProjectDialog({ open, onClose, onSubmit, isPending }: NewProjectDialogProps) {
+export function NewProjectDialog() {
+  const open = useWorkshopDialogsStore((s) => s.newProjectOpen);
+  const closeDialog = useWorkshopDialogsStore((s) => s.closeNewProjectDialog);
+  const createProject = useCreateProject();
+
   const form = useAppForm({
     defaultValues: {
       name: "",
@@ -45,18 +43,27 @@ export function NewProjectDialog({ open, onClose, onSubmit, isPending }: NewProj
       onChange: projectSchema,
     },
     onSubmit: ({ value }) => {
-      onSubmit({
-        name: value.name,
-        displayName: value.displayName || generateDisplayName(value.name),
-        description: value.description,
-        authors: value.authorName ? [value.authorName] : [],
-      });
+      createProject.mutate(
+        {
+          name: value.name,
+          displayName: value.displayName || generateDisplayName(value.name),
+          description: value.description,
+          authors: value.authorName ? [value.authorName] : [],
+        },
+        {
+          onSuccess: () => {
+            form.reset();
+            closeDialog();
+          },
+          onError: (err) => console.error("Failed to create project:", err.message),
+        },
+      );
     },
   });
 
   function handleClose() {
     form.reset();
-    onClose();
+    closeDialog();
   }
 
   return (
@@ -132,7 +139,7 @@ export function NewProjectDialog({ open, onClose, onSubmit, isPending }: NewProj
                 {({ canSubmit, isValid }) => (
                   <Button
                     variant="filled"
-                    loading={isPending}
+                    loading={createProject.isPending}
                     disabled={!canSubmit || !isValid}
                     onClick={() => form.handleSubmit()}
                   >
diff --git a/src/modules/workshop/components/PackDialog.tsx b/src/modules/workshop/components/PackDialog.tsx
index c89f67c..8d9bb66 100644
--- a/src/modules/workshop/components/PackDialog.tsx
+++ b/src/modules/workshop/components/PackDialog.tsx
@@ -3,30 +3,42 @@ import { useState } from "react";
 import { LuCheck, LuCircleAlert, LuFolderOpen, LuPackage, LuTriangleAlert } from "react-icons/lu";
 
 import { Button, Dialog, RadioGroup } from "@/components";
-import type { PackResult, ValidationResult, WorkshopProject } from "@/lib/tauri";
-
-interface PackDialogProps {
-  open: boolean;
-  project: WorkshopProject | null;
-  validation: ValidationResult | null;
-  validationLoading: boolean;
-  onClose: () => void;
-  onPack: (format: "modpkg" | "fantome") => void;
-  isPacking: boolean;
-  packResult: PackResult | null;
-}
+import type { PackResult } from "@/lib/tauri";
+import { useWorkshopDialogsStore } from "@/stores";
+
+import { usePackProject } from "../api/usePackProject";
+import { useValidateProject } from "../api/useValidateProject";
+
+export function PackDialog() {
+  const project = useWorkshopDialogsStore((s) => s.packProject);
+  const closeDialog = useWorkshopDialogsStore((s) => s.closePackDialog);
+
+  const open = project !== null;
+
+  const packProject = usePackProject();
+  const { data: validation, isLoading: validationLoading } = useValidateProject(
+    project?.path ?? "",
+    open,
+  );
 
-export function PackDialog({
-  open,
-  project,
-  validation,
-  validationLoading,
-  onClose,
-  onPack,
-  isPacking,
-  packResult,
-}: PackDialogProps) {
   const [format, setFormat] = useState<"modpkg" | "fantome">("modpkg");
+  const [packResult, setPackResult] = useState<PackResult | null>(null);
+
+  function handlePack() {
+    if (!project) return;
+    packProject.mutate(
+      { projectPath: project.path, format },
+      {
+        onSuccess: setPackResult,
+        onError: (err) => console.error("Failed to pack project:", err.message),
+      },
+    );
+  }
+
+  function handleClose() {
+    closeDialog();
+    setPackResult(null);
+  }
 
   if (!project) return null;
 
@@ -34,7 +46,7 @@ export function PackDialog({
   const hasWarnings = validation && validation.warnings.length > 0;
 
   return (
-    <Dialog.Root open={open} onOpenChange={(open) => !open && onClose()}>
+    <Dialog.Root open={open} onOpenChange={(open) => !open && handleClose()}>
       <Dialog.Portal>
         <Dialog.Backdrop />
         <Dialog.Overlay size="lg">
@@ -143,7 +155,7 @@ export function PackDialog({
           <Dialog.Footer>
             {packResult ? (
               <>
-                <Button variant="ghost" onClick={onClose}>
+                <Button variant="ghost" onClick={handleClose}>
                   Close
                 </Button>
                 <Button
@@ -162,17 +174,17 @@ export function PackDialog({
               </>
             ) : (
               <>
-                <Button variant="ghost" onClick={onClose}>
+                <Button variant="ghost" onClick={handleClose}>
                   Cancel
                 </Button>
                 <Button
                   variant="filled"
                   left={<LuPackage className="h-4 w-4" />}
-                  onClick={() => onPack(format)}
-                  loading={isPacking}
+                  onClick={handlePack}
+                  loading={packProject.isPending}
                   disabled={hasErrors || validationLoading}
                 >
-                  {isPacking ? "Packing..." : "Pack"}
+                  {packProject.isPending ? "Packing..." : "Pack"}
                 </Button>
               </>
             )}
diff --git a/src/modules/workshop/components/ProjectCard.tsx b/src/modules/workshop/components/ProjectCard.tsx
index 1d331b5..d299f5f 100644
--- a/src/modules/workshop/components/ProjectCard.tsx
+++ b/src/modules/workshop/components/ProjectCard.tsx
@@ -1,22 +1,61 @@
 import { invoke } from "@tauri-apps/api/core";
-import { LuEllipsisVertical, LuFolderOpen, LuPackage, LuPencil, LuTrash2 } from "react-icons/lu";
+import { useMemo } from "react";
+import {
+  LuChevronRight,
+  LuEllipsisVertical,
+  LuFolderOpen,
+  LuPackage,
+  LuPencil,
+  LuPlay,
+  LuTrash2,
+} from "react-icons/lu";
 
-import { Button, IconButton, Menu } from "@/components";
+import { Button, Checkbox, IconButton, Menu } from "@/components";
 import type { WorkshopProject } from "@/lib/tauri";
+import { usePatcherStatus } from "@/modules/patcher";
+import {
+  usePatcherSessionStore,
+  useWorkshopDialogsStore,
+  useWorkshopSelectionStore,
+} from "@/stores";
 
 import { useProjectThumbnail } from "../api/useProjectThumbnail";
+import { useTestProjects } from "../api/useTestProject";
+import type { ViewMode } from "./WorkshopToolbar";
 
 interface ProjectCardProps {
   project: WorkshopProject;
-  viewMode: "grid" | "list";
+  viewMode: ViewMode;
   onEdit: (project: WorkshopProject) => void;
-  onPack: (project: WorkshopProject) => void;
-  onDelete: (project: WorkshopProject) => void;
 }
 
-export function ProjectCard({ project, viewMode, onEdit, onPack, onDelete }: ProjectCardProps) {
+export function ProjectCard({ project, viewMode, onEdit }: ProjectCardProps) {
   const { data: thumbnailUrl } = useProjectThumbnail(project.path, project.thumbnailPath);
 
+  const selected = useWorkshopSelectionStore((s) => s.selectedPaths.has(project.path));
+  const toggle = useWorkshopSelectionStore((s) => s.toggle);
+
+  const { data: patcherStatus } = usePatcherStatus();
+  const isPatcherActive = patcherStatus?.running ?? false;
+
+  const testingProjects = usePatcherSessionStore((s) => s.testingProjects);
+  const isTesting = useMemo(
+    () => testingProjects.some((p) => p.path === project.path),
+    [testingProjects, project.path],
+  );
+
+  const openPackDialog = useWorkshopDialogsStore((s) => s.openPackDialog);
+  const openDeleteDialog = useWorkshopDialogsStore((s) => s.openDeleteDialog);
+
+  const testProjects = useTestProjects();
+
+  function handleTest() {
+    testProjects.mutate(
+      { projects: [{ path: project.path, displayName: project.displayName }] },
+      { onError: (err) => console.error("Failed to test project:", err.message) },
+    );
+  }
+
   async function handleOpenLocation() {
     try {
       await invoke("reveal_in_explorer", { path: project.path });
@@ -25,20 +64,24 @@ export function ProjectCard({ project, viewMode, onEdit, onPack, onDelete }: Pro
     }
   }
 
-  function handleCardClick(e: React.MouseEvent) {
-    if ((e.target as HTMLElement).closest("[data-no-click]")) {
-      return;
-    }
-    onEdit(project);
-  }
+  const listBorderClass = isTesting
+    ? "border-green-500/40"
+    : selected
+      ? "border-brand-500/40"
+      : "border-surface-700";
 
   if (viewMode === "list") {
     return (
       <div
-        onClick={handleCardClick}
-        className="group flex cursor-pointer items-center gap-4 rounded-lg border border-surface-700 bg-surface-900 p-4 transition-all hover:border-surface-600"
+        className={`group flex items-center gap-4 rounded-lg border bg-surface-900 p-4 transition-all hover:border-surface-600 ${listBorderClass}`}
       >
-        {/* Thumbnail */}
+        <Checkbox
+          size="md"
+          checked={isPatcherActive ? isTesting : selected}
+          onCheckedChange={() => toggle(project.path)}
+          disabled={isPatcherActive}
+        />
+
         <div className="flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-linear-to-br from-surface-700 to-surface-800">
           {thumbnailUrl ? (
             <img src={thumbnailUrl} alt="" className="h-full w-full object-cover" />
@@ -49,21 +92,40 @@ export function ProjectCard({ project, viewMode, onEdit, onPack, onDelete }: Pro
           )}
         </div>
 
-        {/* Info */}
         <div className="min-w-0 flex-1">
-          <h3 className="truncate font-medium text-surface-100">{project.displayName}</h3>
+          <h3
+            className="group/title flex cursor-pointer items-center gap-1 font-medium text-surface-100 hover:text-brand-400"
+            onClick={() => onEdit(project)}
+          >
+            <span className="truncate">{project.displayName}</span>
+            <LuChevronRight className="h-3.5 w-3.5 shrink-0 opacity-0 transition-opacity group-hover/title:opacity-100" />
+          </h3>
           <p className="truncate text-sm text-surface-500">
             v{project.version} • {project.authors.map((a) => a.name).join(", ") || "Unknown author"}
           </p>
         </div>
 
-        {/* Actions */}
-        <div className="flex items-center gap-2" data-no-click onClick={(e) => e.stopPropagation()}>
+        {isTesting && (
+          <span className="shrink-0 rounded-full bg-green-500/10 px-2.5 py-0.5 text-xs font-medium text-green-400">
+            Testing
+          </span>
+        )}
+
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            left={<LuPlay className="h-4 w-4" />}
+            onClick={handleTest}
+            disabled={isPatcherActive}
+          >
+            Test
+          </Button>
           <Button
             variant="outline"
             size="sm"
             left={<LuPackage className="h-4 w-4" />}
-            onClick={() => onPack(project)}
+            onClick={() => openPackDialog(project)}
           >
             Pack
           </Button>
@@ -86,9 +148,16 @@ export function ProjectCard({ project, viewMode, onEdit, onPack, onDelete }: Pro
                   >
                     Edit Project
                   </Menu.Item>
+                  <Menu.Item
+                    icon={<LuPlay className="h-4 w-4" />}
+                    onClick={handleTest}
+                    disabled={isPatcherActive}
+                  >
+                    Test
+                  </Menu.Item>
                   <Menu.Item
                     icon={<LuPackage className="h-4 w-4" />}
-                    onClick={() => onPack(project)}
+                    onClick={() => openPackDialog(project)}
                   >
                     Pack
                   </Menu.Item>
@@ -102,7 +171,7 @@ export function ProjectCard({ project, viewMode, onEdit, onPack, onDelete }: Pro
                   <Menu.Item
                     icon={<LuTrash2 className="h-4 w-4" />}
                     variant="danger"
-                    onClick={() => onDelete(project)}
+                    onClick={() => openDeleteDialog(project)}
                   >
                     Delete
                   </Menu.Item>
@@ -110,32 +179,76 @@ export function ProjectCard({ project, viewMode, onEdit, onPack, onDelete }: Pro
               </Menu.Positioner>
             </Menu.Portal>
           </Menu.Root>
+          <IconButton
+            icon={<LuChevronRight />}
+            variant="ghost"
+            size="sm"
+            onClick={() => onEdit(project)}
+          />
         </div>
       </div>
     );
   }
 
-  // Grid view
+  const gridBorderClass = isTesting
+    ? "border-green-500/40"
+    : selected
+      ? "border-brand-500/40"
+      : "border-surface-600";
+
   return (
     <div
-      onClick={handleCardClick}
-      className="group relative cursor-pointer rounded-xl border border-surface-600 bg-surface-800 transition-all hover:border-surface-400"
+      className={`group relative rounded-xl border bg-surface-800 transition-all hover:border-surface-400 ${gridBorderClass}`}
     >
-      {/* Menu in top-right corner */}
       <div
-        className="absolute top-2 right-2 z-10"
-        data-no-click
-        onClick={(e) => e.stopPropagation()}
+        className={`absolute top-0 left-0 z-10 p-2 ${isPatcherActive ? "" : "cursor-pointer"}`}
+        onClick={(e) => {
+          if (!isPatcherActive && e.target === e.currentTarget) toggle(project.path);
+        }}
       >
+        <Checkbox
+          size="md"
+          checked={isPatcherActive ? isTesting : selected}
+          onCheckedChange={() => toggle(project.path)}
+          disabled={isPatcherActive}
+        />
+      </div>
+
+      <div className="relative flex aspect-video items-center justify-center overflow-hidden rounded-t-xl bg-linear-to-br from-surface-700 to-surface-800">
+        {thumbnailUrl ? (
+          <img src={thumbnailUrl} alt="" className="h-full w-full object-cover" />
+        ) : (
+          <span className="text-4xl font-bold text-surface-400">
+            {project.displayName.charAt(0).toUpperCase()}
+          </span>
+        )}
+      </div>
+
+      <div className="flex items-start gap-1 p-3">
+        <div className="min-w-0 flex-1">
+          <h3
+            className="group/title mb-1 flex cursor-pointer items-center gap-1 text-sm font-medium text-surface-100 hover:text-brand-400"
+            onClick={() => onEdit(project)}
+          >
+            <span className="line-clamp-1">{project.displayName}</span>
+            <LuChevronRight className="h-3.5 w-3.5 shrink-0 opacity-0 transition-opacity group-hover/title:opacity-100" />
+          </h3>
+          <div className="flex items-center gap-1.5 text-xs text-surface-500">
+            <span>v{project.version}</span>
+            <span>•</span>
+            <span className="flex-1 truncate">
+              {project.authors.length > 0 ? project.authors[0].name : "Unknown"}
+            </span>
+            {isTesting && (
+              <span className="shrink-0 rounded-full bg-green-500/10 px-2 py-0.5 text-xs font-medium text-green-400">
+                Testing
+              </span>
+            )}
+          </div>
+        </div>
         <Menu.Root>
           <Menu.Trigger
-            render={
-              <IconButton
-                icon={<LuEllipsisVertical className="h-4 w-4" />}
-                variant="ghost"
-                size="sm"
-              />
-            }
+            render={<IconButton icon={<LuEllipsisVertical />} variant="ghost" size="md" compact />}
           />
           <Menu.Portal>
             <Menu.Positioner>
@@ -143,7 +256,17 @@ export function ProjectCard({ project, viewMode, onEdit, onPack, onDelete }: Pro
                 <Menu.Item icon={<LuPencil className="h-4 w-4" />} onClick={() => onEdit(project)}>
                   Edit Project
                 </Menu.Item>
-                <Menu.Item icon={<LuPackage className="h-4 w-4" />} onClick={() => onPack(project)}>
+                <Menu.Item
+                  icon={<LuPlay className="h-4 w-4" />}
+                  onClick={handleTest}
+                  disabled={isPatcherActive}
+                >
+                  Test
+                </Menu.Item>
+                <Menu.Item
+                  icon={<LuPackage className="h-4 w-4" />}
+                  onClick={() => openPackDialog(project)}
+                >
                   Pack
                 </Menu.Item>
                 <Menu.Item icon={<LuFolderOpen className="h-4 w-4" />} onClick={handleOpenLocation}>
@@ -153,7 +276,7 @@ export function ProjectCard({ project, viewMode, onEdit, onPack, onDelete }: Pro
                 <Menu.Item
                   icon={<LuTrash2 className="h-4 w-4" />}
                   variant="danger"
-                  onClick={() => onDelete(project)}
+                  onClick={() => openDeleteDialog(project)}
                 >
                   Delete
                 </Menu.Item>
@@ -162,31 +285,6 @@ export function ProjectCard({ project, viewMode, onEdit, onPack, onDelete }: Pro
           </Menu.Portal>
         </Menu.Root>
       </div>
-
-      {/* Thumbnail */}
-      <div className="flex aspect-video items-center justify-center overflow-hidden rounded-t-xl bg-linear-to-br from-surface-700 to-surface-800">
-        {thumbnailUrl ? (
-          <img src={thumbnailUrl} alt="" className="h-full w-full object-cover" />
-        ) : (
-          <span className="text-4xl font-bold text-surface-400">
-            {project.displayName.charAt(0).toUpperCase()}
-          </span>
-        )}
-      </div>
-
-      {/* Content */}
-      <div className="p-3">
-        <h3 className="mb-1 line-clamp-1 text-sm font-medium text-surface-100">
-          {project.displayName}
-        </h3>
-        <div className="flex items-center text-xs text-surface-500">
-          <span>v{project.version}</span>
-          <span className="mx-1">•</span>
-          <span className="flex-1 truncate">
-            {project.authors.length > 0 ? project.authors[0].name : "Unknown"}
-          </span>
-        </div>
-      </div>
     </div>
   );
 }
diff --git a/src/modules/workshop/components/ProjectGrid.tsx b/src/modules/workshop/components/ProjectGrid.tsx
index f0aa43f..181681e 100644
--- a/src/modules/workshop/components/ProjectGrid.tsx
+++ b/src/modules/workshop/components/ProjectGrid.tsx
@@ -1,17 +1,16 @@
 import type { WorkshopProject } from "@/lib/tauri";
+import { useWorkshopViewStore } from "@/stores";
 
 import { ProjectCard } from "./ProjectCard";
-import type { ViewMode } from "./WorkshopToolbar";
 
 interface ProjectGridProps {
   projects: WorkshopProject[];
-  viewMode: ViewMode;
   onEdit: (project: WorkshopProject) => void;
-  onPack: (project: WorkshopProject) => void;
-  onDelete: (project: WorkshopProject) => void;
 }
 
-export function ProjectGrid({ projects, viewMode, onEdit, onPack, onDelete }: ProjectGridProps) {
+export function ProjectGrid({ projects, onEdit }: ProjectGridProps) {
+  const viewMode = useWorkshopViewStore((s) => s.viewMode);
+
   return (
     <div
       className={
@@ -21,14 +20,7 @@ export function ProjectGrid({ projects, viewMode, onEdit, onPack, onDelete }: Pr
       }
     >
       {projects.map((project) => (
-        <ProjectCard
-          key={project.path}
-          project={project}
-          viewMode={viewMode}
-          onEdit={onEdit}
-          onPack={onPack}
-          onDelete={onDelete}
-        />
+        <ProjectCard key={project.path} project={project} viewMode={viewMode} onEdit={onEdit} />
       ))}
     </div>
   );
diff --git a/src/modules/workshop/components/ProjectHeader.tsx b/src/modules/workshop/components/ProjectHeader.tsx
index 4459627..3947d84 100644
--- a/src/modules/workshop/components/ProjectHeader.tsx
+++ b/src/modules/workshop/components/ProjectHeader.tsx
@@ -1,17 +1,28 @@
 import { Link } from "@tanstack/react-router";
-import { LuArrowLeft, LuEllipsisVertical, LuFolderOpen, LuPackage, LuTrash2 } from "react-icons/lu";
+import {
+  LuArrowLeft,
+  LuEllipsisVertical,
+  LuFolderOpen,
+  LuPackage,
+  LuPlay,
+  LuTrash2,
+} from "react-icons/lu";
 
 import { Button, IconButton, Menu } from "@/components";
 import type { WorkshopProject } from "@/lib/tauri";
+import { usePatcherStatus } from "@/modules/patcher";
+
+import { useProjectActions } from "../api/useProjectActions";
 
 interface ProjectHeaderProps {
   project: WorkshopProject;
-  onPack: () => void;
-  onDelete: () => void;
-  onOpenLocation: () => void;
 }
 
-export function ProjectHeader({ project, onPack, onDelete, onOpenLocation }: ProjectHeaderProps) {
+export function ProjectHeader({ project }: ProjectHeaderProps) {
+  const { data: patcherStatus } = usePatcherStatus();
+  const isPatcherActive = patcherStatus?.running ?? false;
+  const actions = useProjectActions(project);
+
   return (
     <div className="flex items-center gap-3 border-b border-surface-700 px-6 py-3">
       <Link to="/workshop">
@@ -33,11 +44,20 @@ export function ProjectHeader({ project, onPack, onDelete, onOpenLocation }: Pro
       </div>
 
       <div className="flex items-center gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          left={<LuPlay className="h-4 w-4" />}
+          onClick={actions.handleTestProject}
+          disabled={isPatcherActive}
+        >
+          Test
+        </Button>
         <Button
           variant="outline"
           size="sm"
           left={<LuPackage className="h-4 w-4" />}
-          onClick={onPack}
+          onClick={actions.handleOpenPackDialog}
         >
           Pack
         </Button>
@@ -54,14 +74,17 @@ export function ProjectHeader({ project, onPack, onDelete, onOpenLocation }: Pro
           <Menu.Portal>
             <Menu.Positioner>
               <Menu.Popup>
-                <Menu.Item icon={<LuFolderOpen className="h-4 w-4" />} onClick={onOpenLocation}>
+                <Menu.Item
+                  icon={<LuFolderOpen className="h-4 w-4" />}
+                  onClick={actions.handleOpenLocation}
+                >
                   Open Location
                 </Menu.Item>
                 <Menu.Separator />
                 <Menu.Item
                   icon={<LuTrash2 className="h-4 w-4" />}
                   variant="danger"
-                  onClick={onDelete}
+                  onClick={actions.handleOpenDeleteDialog}
                 >
                   Delete
                 </Menu.Item>
diff --git a/src/modules/workshop/components/SelectionActionBar.tsx b/src/modules/workshop/components/SelectionActionBar.tsx
new file mode 100644
index 0000000..c013552
--- /dev/null
+++ b/src/modules/workshop/components/SelectionActionBar.tsx
@@ -0,0 +1,81 @@
+import { LuPlay, LuX } from "react-icons/lu";
+
+import { Button, Checkbox, IconButton } from "@/components";
+import { usePatcherStatus } from "@/modules/patcher";
+import { useWorkshopSelectionStore } from "@/stores";
+
+import { useFilteredProjects } from "../api/useFilteredProjects";
+import { useTestProjects } from "../api/useTestProject";
+
+export function SelectionActionBar() {
+  const selectedPaths = useWorkshopSelectionStore((s) => s.selectedPaths);
+  const selectAll = useWorkshopSelectionStore((s) => s.selectAll);
+  const clear = useWorkshopSelectionStore((s) => s.clear);
+
+  const { data: patcherStatus } = usePatcherStatus();
+  const isPatcherActive = patcherStatus?.running ?? false;
+
+  const filteredProjects = useFilteredProjects();
+  const testProjects = useTestProjects();
+
+  const selectedCount = selectedPaths.size;
+  const totalCount = filteredProjects.length;
+
+  if (isPatcherActive || selectedCount === 0) return null;
+
+  const allSelected = selectedCount === totalCount;
+  const indeterminate = selectedCount > 0 && !allSelected;
+
+  function handleTest() {
+    const selected = filteredProjects.filter((p) => selectedPaths.has(p.path));
+    if (selected.length === 0) return;
+    testProjects.mutate(
+      { projects: selected.map((p) => ({ path: p.path, displayName: p.displayName })) },
+      {
+        onSuccess: () => clear(),
+        onError: (err) => console.error("Failed to test projects:", err.message),
+      },
+    );
+  }
+
+  return (
+    <div className="animate-in slide-in-from-bottom-2 flex items-center gap-3 border-t border-surface-700 bg-surface-900 px-4 py-2">
+      <Checkbox
+        size="md"
+        checked={allSelected}
+        indeterminate={indeterminate}
+        onCheckedChange={() => {
+          if (allSelected) {
+            clear();
+          } else {
+            selectAll(filteredProjects.map((p) => p.path));
+          }
+        }}
+        aria-label="Toggle select all projects"
+      />
+      <span className="text-sm text-surface-300">
+        {selectedCount} of {totalCount} selected
+      </span>
+
+      <IconButton
+        icon={<LuX className="h-4 w-4" />}
+        variant="ghost"
+        size="md"
+        onClick={clear}
+        aria-label="Clear selection"
+      />
+
+      <div className="flex-1" />
+
+      <Button
+        variant="filled"
+        size="md"
+        left={<LuPlay className="h-4 w-4" />}
+        onClick={handleTest}
+        loading={testProjects.isPending}
+      >
+        {selectedCount === 1 ? "Test" : `Test ${selectedCount} Projects`}
+      </Button>
+    </div>
+  );
+}
diff --git a/src/modules/workshop/components/WorkshopToolbar.tsx b/src/modules/workshop/components/WorkshopToolbar.tsx
index 7aaaf82..9ff755a 100644
--- a/src/modules/workshop/components/WorkshopToolbar.tsx
+++ b/src/modules/workshop/components/WorkshopToolbar.tsx
@@ -1,3 +1,4 @@
+import { open } from "@tauri-apps/plugin-dialog";
 import {
   LuChevronDown,
   LuDownload,
@@ -8,69 +9,106 @@ import {
   LuPackage,
   LuPlus,
   LuSearch,
+  LuSquareCheckBig,
 } from "react-icons/lu";
 
 import { Button, IconButton, Menu } from "@/components";
+import { usePatcherStatus } from "@/modules/patcher";
+import { useWorkshopDialogsStore, useWorkshopSelectionStore, useWorkshopViewStore } from "@/stores";
+
+import { useFilteredProjects } from "../api/useFilteredProjects";
+import { useImportFromModpkg } from "../api/useImportFromModpkg";
+import { usePeekFantome } from "../api/usePeekFantome";
 
 export type ViewMode = "grid" | "list";
 
-interface WorkshopToolbarProps {
-  searchQuery: string;
-  onSearchChange: (query: string) => void;
-  viewMode: ViewMode;
-  onViewModeChange: (mode: ViewMode) => void;
-  onImportModpkg: () => void;
-  onImportFantome: () => void;
-  onImportGitRepo: () => void;
-  onNewProject: () => void;
-  isImporting?: boolean;
-}
+export function WorkshopToolbar() {
+  const searchQuery = useWorkshopViewStore((s) => s.searchQuery);
+  const setSearchQuery = useWorkshopViewStore((s) => s.setSearchQuery);
+  const viewMode = useWorkshopViewStore((s) => s.viewMode);
+  const setViewMode = useWorkshopViewStore((s) => s.setViewMode);
+
+  const selectAll = useWorkshopSelectionStore((s) => s.selectAll);
+  const filteredProjects = useFilteredProjects();
+
+  const { data: patcherStatus } = usePatcherStatus();
+  const isPatcherActive = patcherStatus?.running ?? false;
+
+  const openNewProjectDialog = useWorkshopDialogsStore((s) => s.openNewProjectDialog);
+  const openFantomeImportDialog = useWorkshopDialogsStore((s) => s.openFantomeImportDialog);
+  const openGitImportDialog = useWorkshopDialogsStore((s) => s.openGitImportDialog);
+
+  const importFromModpkg = useImportFromModpkg();
+  const peekFantome = usePeekFantome();
+
+  const isImporting = importFromModpkg.isPending || peekFantome.isPending;
+
+  async function handleImportModpkg() {
+    const file = await open({
+      multiple: false,
+      filters: [{ name: "Mod Package", extensions: ["modpkg"] }],
+    });
+    if (file) {
+      importFromModpkg.mutate(file, {
+        onError: (err) => console.error("Failed to import modpkg:", err.message),
+      });
+    }
+  }
+
+  async function handleImportFantome() {
+    const file = await open({
+      multiple: false,
+      filters: [{ name: "Fantome Archive", extensions: ["fantome", "zip"] }],
+    });
+    if (!file) return;
+
+    peekFantome.mutate(file, {
+      onSuccess: (result) => openFantomeImportDialog(result, file),
+      onError: (err) => console.error("Failed to peek fantome:", err.message),
+    });
+  }
 
-export function WorkshopToolbar({
-  searchQuery,
-  onSearchChange,
-  viewMode,
-  onViewModeChange,
-  onImportModpkg,
-  onImportFantome,
-  onImportGitRepo,
-  onNewProject,
-  isImporting,
-}: WorkshopToolbarProps) {
   return (
     <div
       className="flex items-center gap-4 border-b border-surface-600 px-4 py-3"
       data-tauri-drag-region
     >
-      {/* Search */}
       <div className="relative flex-1">
         <LuSearch className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-surface-500" />
         <input
           type="text"
           placeholder="Search projects..."
           value={searchQuery}
-          onChange={(e) => onSearchChange(e.target.value)}
+          onChange={(e) => setSearchQuery(e.target.value)}
           className="w-full rounded-lg border border-surface-600 bg-surface-800 py-2 pr-4 pl-10 text-surface-100 placeholder:text-surface-500 focus:border-transparent focus:ring-2 focus:ring-brand-500 focus:outline-none"
         />
       </div>
 
-      {/* View toggle */}
       <div className="flex items-center gap-1">
         <IconButton
           icon={<LuGrid3X3 className="h-4 w-4" />}
           variant={viewMode === "grid" ? "default" : "ghost"}
           size="sm"
-          onClick={() => onViewModeChange("grid")}
+          onClick={() => setViewMode("grid")}
         />
         <IconButton
           icon={<LuList className="h-4 w-4" />}
           variant={viewMode === "list" ? "default" : "ghost"}
           size="sm"
-          onClick={() => onViewModeChange("list")}
+          onClick={() => setViewMode("list")}
         />
       </div>
 
-      {/* Actions */}
+      {!isPatcherActive && (
+        <IconButton
+          icon={<LuSquareCheckBig className="h-4 w-4" />}
+          variant="ghost"
+          size="sm"
+          onClick={() => selectAll(filteredProjects.map((p) => p.path))}
+          aria-label="Select all projects"
+        />
+      )}
+
       <Menu.Root>
         <Menu.Trigger
           render={
@@ -88,13 +126,13 @@ export function WorkshopToolbar({
         <Menu.Portal>
           <Menu.Positioner>
             <Menu.Popup>
-              <Menu.Item icon={<LuFileArchive className="h-4 w-4" />} onClick={onImportFantome}>
+              <Menu.Item icon={<LuFileArchive className="h-4 w-4" />} onClick={handleImportFantome}>
                 From Fantome
               </Menu.Item>
-              <Menu.Item icon={<LuPackage className="h-4 w-4" />} onClick={onImportModpkg}>
+              <Menu.Item icon={<LuPackage className="h-4 w-4" />} onClick={handleImportModpkg}>
                 From Modpkg
               </Menu.Item>
-              <Menu.Item icon={<LuGitBranch className="h-4 w-4" />} onClick={onImportGitRepo}>
+              <Menu.Item icon={<LuGitBranch className="h-4 w-4" />} onClick={openGitImportDialog}>
                 From Git Repository
               </Menu.Item>
             </Menu.Popup>
@@ -104,7 +142,7 @@ export function WorkshopToolbar({
       <Button
         variant="filled"
         size="sm"
-        onClick={onNewProject}
+        onClick={openNewProjectDialog}
         left={<LuPlus className="h-4 w-4" />}
       >
         New Project
diff --git a/src/modules/workshop/components/index.ts b/src/modules/workshop/components/index.ts
index 99f5387..db00cd8 100644
--- a/src/modules/workshop/components/index.ts
+++ b/src/modules/workshop/components/index.ts
@@ -14,5 +14,6 @@ export { ProjectCard } from "./ProjectCard";
 export { ProjectProvider, useProjectContext } from "./ProjectContext";
 export { ProjectGrid } from "./ProjectGrid";
 export { ProjectHeader } from "./ProjectHeader";
+export { SelectionActionBar } from "./SelectionActionBar";
 export type { ViewMode } from "./WorkshopToolbar";
 export { WorkshopToolbar } from "./WorkshopToolbar";
diff --git a/src/routes/workshop/$projectName.tsx b/src/routes/workshop/$projectName.tsx
index e2e865d..596fdeb 100644
--- a/src/routes/workshop/$projectName.tsx
+++ b/src/routes/workshop/$projectName.tsx
@@ -1,4 +1,4 @@
-import { createFileRoute, Link, Outlet, useNavigate } from "@tanstack/react-router";
+import { createFileRoute, Link, Outlet } from "@tanstack/react-router";
 import { LuArrowLeft } from "react-icons/lu";
 
 import { Button, NavTabs } from "@/components";
@@ -8,7 +8,6 @@ import {
   PackDialog,
   ProjectHeader,
   ProjectProvider,
-  useProjectActions,
   useWorkshopProjects,
 } from "@/modules/workshop";
 
@@ -18,13 +17,10 @@ export const Route = createFileRoute("/workshop/$projectName")({
 
 function ProjectDetailLayout() {
   const { projectName } = Route.useParams();
-  const navigate = useNavigate();
 
   const { data: projects, isLoading } = useWorkshopProjects();
   const project = projects?.find((p) => p.name === projectName);
 
-  const actions = useProjectActions(project, navigate);
-
   if (isLoading) {
     return <LoadingState />;
   }
@@ -51,12 +47,7 @@ function ProjectDetailLayout() {
   return (
     <ProjectProvider project={project}>
       <div className="flex h-full flex-col">
-        <ProjectHeader
-          project={project}
-          onPack={actions.handleOpenPackDialog}
-          onDelete={actions.openDeleteDialog}
-          onOpenLocation={actions.handleOpenLocation}
-        />
+        <ProjectHeader project={project} />
 
         <NavTabs tabs={tabs} />
 
@@ -65,24 +56,8 @@ function ProjectDetailLayout() {
         </div>
       </div>
 
-      <PackDialog
-        open={actions.packDialogOpen}
-        project={project}
-        validation={actions.validation}
-        validationLoading={actions.validationLoading}
-        onClose={actions.handleClosePackDialog}
-        onPack={actions.handlePack}
-        isPacking={actions.isPacking}
-        packResult={actions.packResult}
-      />
-
-      <DeleteConfirmDialog
-        open={actions.deleteDialogOpen}
-        project={project}
-        onClose={actions.closeDeleteDialog}
-        onConfirm={actions.handleDeleteProject}
-        isPending={actions.isDeleting}
-      />
+      <PackDialog />
+      <DeleteConfirmDialog />
     </ProjectProvider>
   );
 }
diff --git a/src/routes/workshop/index.tsx b/src/routes/workshop/index.tsx
index fc75b37..e985bd9 100644
--- a/src/routes/workshop/index.tsx
+++ b/src/routes/workshop/index.tsx
@@ -1,16 +1,6 @@
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { open } from "@tauri-apps/plugin-dialog";
-import { useState } from "react";
 
-import type {
-  CreateProjectArgs,
-  FantomePeekResult,
-  ImportFantomeArgs,
-  ImportGitRepoArgs,
-  PackResult,
-  WorkshopProject,
-} from "@/lib/tauri";
-import type { ViewMode } from "@/modules/workshop";
+import type { WorkshopProject } from "@/lib/tauri";
 import {
   DeleteConfirmDialog,
   ErrorState,
@@ -22,19 +12,12 @@ import {
   NoSearchResultsState,
   PackDialog,
   ProjectGrid,
-  useCreateProject,
-  useDeleteProject,
-  useFantomeImportProgress,
-  useGitImportProgress,
-  useImportFromFantome,
-  useImportFromGitRepo,
-  useImportFromModpkg,
-  usePackProject,
-  usePeekFantome,
-  useValidateProject,
+  SelectionActionBar,
+  useFilteredProjects,
   useWorkshopProjects,
   WorkshopToolbar,
 } from "@/modules/workshop";
+import { useWorkshopViewStore } from "@/stores";
 
 export const Route = createFileRoute("/workshop/")({
   component: WorkshopIndex,
@@ -42,241 +25,34 @@ export const Route = createFileRoute("/workshop/")({
 
 function WorkshopIndex() {
   const navigate = useNavigate();
-  const [searchQuery, setSearchQuery] = useState("");
-  const [viewMode, setViewMode] = useState<ViewMode>("grid");
-
-  // Dialog state
-  const [newProjectOpen, setNewProjectOpen] = useState(false);
-  const [packDialogOpen, setPackDialogOpen] = useState(false);
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [selectedProject, setSelectedProject] = useState<WorkshopProject | null>(null);
-  const [packResult, setPackResult] = useState<PackResult | null>(null);
-
-  // Fantome import state
-  const [fantomeDialogOpen, setFantomeDialogOpen] = useState(false);
-  const [fantomePeek, setFantomePeek] = useState<FantomePeekResult | null>(null);
-  const [fantomeFilePath, setFantomeFilePath] = useState<string | null>(null);
-
-  // Git repo import state
-  const [gitRepoDialogOpen, setGitRepoDialogOpen] = useState(false);
-
-  // API hooks
-  const { data: projects = [], isLoading, error } = useWorkshopProjects();
-  const createProject = useCreateProject();
-  const deleteProject = useDeleteProject();
-  const packProject = usePackProject();
-  const importFromModpkg = useImportFromModpkg();
-  const peekFantome = usePeekFantome();
-  const importFromFantome = useImportFromFantome();
-  const fantomeProgress = useFantomeImportProgress();
-  const importFromGitRepo = useImportFromGitRepo();
-  const gitImportProgress = useGitImportProgress();
-
-  const { data: validation, isLoading: validationLoading } = useValidateProject(
-    selectedProject?.path ?? "",
-    packDialogOpen,
-  );
-
-  const filteredProjects = projects.filter(
-    (project) =>
-      project.displayName.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      project.name.toLowerCase().includes(searchQuery.toLowerCase()),
-  );
-
-  function handleCreateProject(args: CreateProjectArgs) {
-    createProject.mutate(args, {
-      onSuccess: () => setNewProjectOpen(false),
-      onError: (err) => console.error("Failed to create project:", err.message),
-    });
-  }
+  const { isLoading, error } = useWorkshopProjects();
+  const searchQuery = useWorkshopViewStore((s) => s.searchQuery);
+  const filteredProjects = useFilteredProjects();
 
   function handleEditProject(project: WorkshopProject) {
     navigate({ to: "/workshop/$projectName", params: { projectName: project.name } });
   }
 
-  function handleOpenPackDialog(project: WorkshopProject) {
-    setSelectedProject(project);
-    setPackResult(null);
-    setPackDialogOpen(true);
-  }
-
-  function handlePack(format: "modpkg" | "fantome") {
-    if (!selectedProject) return;
-    packProject.mutate(
-      { projectPath: selectedProject.path, format },
-      {
-        onSuccess: setPackResult,
-        onError: (err) => console.error("Failed to pack project:", err.message),
-      },
-    );
-  }
-
-  function handleClosePackDialog() {
-    setPackDialogOpen(false);
-    setSelectedProject(null);
-    setPackResult(null);
-  }
-
-  function handleOpenDeleteDialog(project: WorkshopProject) {
-    setSelectedProject(project);
-    setDeleteDialogOpen(true);
-  }
-
-  function handleDeleteProject() {
-    if (!selectedProject) return;
-    deleteProject.mutate(selectedProject.path, {
-      onSuccess: () => {
-        setDeleteDialogOpen(false);
-        setSelectedProject(null);
-      },
-      onError: (err) => console.error("Failed to delete project:", err.message),
-    });
-  }
-
-  function handleCloseDeleteDialog() {
-    setDeleteDialogOpen(false);
-    setSelectedProject(null);
-  }
-
-  async function handleImportModpkg() {
-    const file = await open({
-      multiple: false,
-      filters: [{ name: "Mod Package", extensions: ["modpkg"] }],
-    });
-    if (file) {
-      importFromModpkg.mutate(file, {
-        onError: (err) => console.error("Failed to import modpkg:", err.message),
-      });
-    }
-  }
-
-  async function handleImportFantome() {
-    const file = await open({
-      multiple: false,
-      filters: [{ name: "Fantome Archive", extensions: ["fantome", "zip"] }],
-    });
-    if (!file) return;
-
-    peekFantome.mutate(file, {
-      onSuccess: (result) => {
-        setFantomePeek(result);
-        setFantomeFilePath(file);
-        setFantomeDialogOpen(true);
-      },
-      onError: (err) => console.error("Failed to peek fantome:", err.message),
-    });
-  }
-
-  function handleImportFantomeSubmit(args: ImportFantomeArgs) {
-    importFromFantome.mutate(args, {
-      onSuccess: () => {
-        setFantomeDialogOpen(false);
-        setFantomePeek(null);
-        setFantomeFilePath(null);
-      },
-      onError: (err) => console.error("Failed to import fantome:", err.message),
-    });
-  }
-
-  function handleCloseFantomeDialog() {
-    setFantomeDialogOpen(false);
-    setFantomePeek(null);
-    setFantomeFilePath(null);
-  }
-
-  function handleImportGitRepoSubmit(args: ImportGitRepoArgs) {
-    importFromGitRepo.mutate(args, {
-      onSuccess: () => setGitRepoDialogOpen(false),
-      onError: (err) => console.error("Failed to import from git repo:", err.message),
-    });
-  }
-
   function renderContent() {
     if (isLoading) return <LoadingState />;
     if (error) return <ErrorState error={error} />;
     if (filteredProjects.length === 0) {
       if (searchQuery) return <NoSearchResultsState />;
-      return (
-        <NoProjectsState onCreate={() => setNewProjectOpen(true)} onImport={handleImportModpkg} />
-      );
+      return <NoProjectsState />;
     }
-    return (
-      <ProjectGrid
-        projects={filteredProjects}
-        viewMode={viewMode}
-        onEdit={handleEditProject}
-        onPack={handleOpenPackDialog}
-        onDelete={handleOpenDeleteDialog}
-      />
-    );
+    return <ProjectGrid projects={filteredProjects} onEdit={handleEditProject} />;
   }
 
   return (
     <div className="flex h-full flex-col">
-      <WorkshopToolbar
-        searchQuery={searchQuery}
-        onSearchChange={setSearchQuery}
-        viewMode={viewMode}
-        onViewModeChange={setViewMode}
-        onImportModpkg={handleImportModpkg}
-        onImportFantome={handleImportFantome}
-        onImportGitRepo={() => setGitRepoDialogOpen(true)}
-        onNewProject={() => setNewProjectOpen(true)}
-        isImporting={
-          importFromModpkg.isPending ||
-          peekFantome.isPending ||
-          importFromFantome.isPending ||
-          importFromGitRepo.isPending ||
-          Boolean(fantomeProgress) ||
-          Boolean(gitImportProgress)
-        }
-      />
-
+      <WorkshopToolbar />
       <div className="flex-1 overflow-auto p-6">{renderContent()}</div>
-
-      <NewProjectDialog
-        open={newProjectOpen}
-        onClose={() => setNewProjectOpen(false)}
-        onSubmit={handleCreateProject}
-        isPending={createProject.isPending}
-      />
-
-      <PackDialog
-        open={packDialogOpen}
-        project={selectedProject}
-        validation={validation ?? null}
-        validationLoading={validationLoading}
-        onClose={handleClosePackDialog}
-        onPack={handlePack}
-        isPacking={packProject.isPending}
-        packResult={packResult}
-      />
-
-      <DeleteConfirmDialog
-        open={deleteDialogOpen}
-        project={selectedProject}
-        onClose={handleCloseDeleteDialog}
-        onConfirm={handleDeleteProject}
-        isPending={deleteProject.isPending}
-      />
-
-      <ImportFantomeDialog
-        open={fantomeDialogOpen}
-        filePath={fantomeFilePath}
-        peekResult={fantomePeek}
-        progress={fantomeProgress}
-        onClose={handleCloseFantomeDialog}
-        onSubmit={handleImportFantomeSubmit}
-        isPending={importFromFantome.isPending}
-      />
-
-      <ImportGitRepoDialog
-        open={gitRepoDialogOpen}
-        progress={gitImportProgress}
-        onClose={() => setGitRepoDialogOpen(false)}
-        onSubmit={handleImportGitRepoSubmit}
-        isPending={importFromGitRepo.isPending}
-      />
+      <SelectionActionBar />
+      <PackDialog />
+      <DeleteConfirmDialog />
+      <NewProjectDialog />
+      <ImportFantomeDialog />
+      <ImportGitRepoDialog />
     </div>
   );
 }
diff --git a/src/stores/index.ts b/src/stores/index.ts
index 7969fd0..a3d723c 100644
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -1,3 +1,7 @@
 export * from "./devConsole";
 export * from "./libraryFilter";
 export * from "./notifications";
+export * from "./patcherSession";
+export * from "./workshopDialogs";
+export * from "./workshopSelection";
+export * from "./workshopView";
diff --git a/src/stores/patcherSession.ts b/src/stores/patcherSession.ts
new file mode 100644
index 0000000..61f0d91
--- /dev/null
+++ b/src/stores/patcherSession.ts
@@ -0,0 +1,18 @@
+import { create } from "zustand";
+
+interface TestingProject {
+  path: string;
+  displayName: string;
+}
+
+interface PatcherSessionStore {
+  testingProjects: TestingProject[];
+  setTestingProjects: (projects: TestingProject[]) => void;
+  clearTestingProjects: () => void;
+}
+
+export const usePatcherSessionStore = create<PatcherSessionStore>((set) => ({
+  testingProjects: [],
+  setTestingProjects: (projects) => set({ testingProjects: projects }),
+  clearTestingProjects: () => set({ testingProjects: [] }),
+}));
diff --git a/src/stores/workshopDialogs.ts b/src/stores/workshopDialogs.ts
new file mode 100644
index 0000000..750a494
--- /dev/null
+++ b/src/stores/workshopDialogs.ts
@@ -0,0 +1,42 @@
+import { create } from "zustand";
+
+import type { FantomePeekResult, WorkshopProject } from "@/lib/tauri";
+
+interface WorkshopDialogsStore {
+  packProject: WorkshopProject | null;
+  deleteProject: WorkshopProject | null;
+  newProjectOpen: boolean;
+  fantomeImport: { peekResult: FantomePeekResult; filePath: string } | null;
+  gitImportOpen: boolean;
+
+  openPackDialog: (project: WorkshopProject) => void;
+  closePackDialog: () => void;
+  openDeleteDialog: (project: WorkshopProject) => void;
+  closeDeleteDialog: () => void;
+  openNewProjectDialog: () => void;
+  closeNewProjectDialog: () => void;
+  openFantomeImportDialog: (peekResult: FantomePeekResult, filePath: string) => void;
+  closeFantomeImportDialog: () => void;
+  openGitImportDialog: () => void;
+  closeGitImportDialog: () => void;
+}
+
+export const useWorkshopDialogsStore = create<WorkshopDialogsStore>((set) => ({
+  packProject: null,
+  deleteProject: null,
+  newProjectOpen: false,
+  fantomeImport: null,
+  gitImportOpen: false,
+
+  openPackDialog: (project) => set({ packProject: project }),
+  closePackDialog: () => set({ packProject: null }),
+  openDeleteDialog: (project) => set({ deleteProject: project }),
+  closeDeleteDialog: () => set({ deleteProject: null }),
+  openNewProjectDialog: () => set({ newProjectOpen: true }),
+  closeNewProjectDialog: () => set({ newProjectOpen: false }),
+  openFantomeImportDialog: (peekResult, filePath) =>
+    set({ fantomeImport: { peekResult, filePath } }),
+  closeFantomeImportDialog: () => set({ fantomeImport: null }),
+  openGitImportDialog: () => set({ gitImportOpen: true }),
+  closeGitImportDialog: () => set({ gitImportOpen: false }),
+}));
diff --git a/src/stores/workshopSelection.ts b/src/stores/workshopSelection.ts
new file mode 100644
index 0000000..7bf095a
--- /dev/null
+++ b/src/stores/workshopSelection.ts
@@ -0,0 +1,24 @@
+import { create } from "zustand";
+
+interface WorkshopSelectionStore {
+  selectedPaths: Set<string>;
+  toggle: (path: string) => void;
+  selectAll: (paths: string[]) => void;
+  clear: () => void;
+}
+
+export const useWorkshopSelectionStore = create<WorkshopSelectionStore>((set) => ({
+  selectedPaths: new Set(),
+  toggle: (path) =>
+    set((state) => {
+      const next = new Set(state.selectedPaths);
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      return { selectedPaths: next };
+    }),
+  selectAll: (paths) => set({ selectedPaths: new Set(paths) }),
+  clear: () => set({ selectedPaths: new Set() }),
+}));
diff --git a/src/stores/workshopView.ts b/src/stores/workshopView.ts
new file mode 100644
index 0000000..d7813aa
--- /dev/null
+++ b/src/stores/workshopView.ts
@@ -0,0 +1,17 @@
+import { create } from "zustand";
+
+import type { ViewMode } from "@/modules/workshop";
+
+interface WorkshopViewStore {
+  viewMode: ViewMode;
+  setViewMode: (mode: ViewMode) => void;
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+}
+
+export const useWorkshopViewStore = create<WorkshopViewStore>((set) => ({
+  viewMode: "grid",
+  setViewMode: (mode) => set({ viewMode: mode }),
+  searchQuery: "",
+  setSearchQuery: (query) => set({ searchQuery: query }),
+}));