Add game lifecycle management and instance import/export tools (#117)

## Summary by Sourcery

Add centralized game process and instance lifecycle management, shared
cache-aware path resolution, and instance import/export/repair
capabilities across backend and UI.

New Features:
- Track a single running game process in the backend, expose stop-game
control, and emit structured game-exited events with instance and
version context.
- Introduce instance path resolution that supports shared caches for
versions, libraries, and assets, and use it across game start, install,
and version management APIs.
- Add import, export, and repair operations for instances, including
zip-based archive support and automatic recovery of on-disk instances.
- Expose new instance lifecycle and repair APIs to the frontend and wire
them through the client and instance store.
- Add per-instance start/stop controls in the instances view and
instance selection in the bottom bar for launching games.

Enhancements:
- Guard instance operations with per-instance locks and track active
operations such as launch, install, delete, and import/export.
- Improve handling of Microsoft login errors and polling status, with
clearer user feedback and safer interval management.
- Simplify config mutation during shared cache migration and centralize
instance directory resolution in the backend.
- Initialize a game lifecycle listener at app startup to keep UI state
in sync with backend game exit events.

Build:
- Configure the Vite dev server to use a fixed localhost host and port
for the UI dev environment.

10 files changed, 537 insertions, 255 deletions

diff --git a/packages/ui/src/client.ts b/packages/ui/src/client.ts
index 18d2377..6f354d2 100644
--- a/packages/ui/src/client.ts
+++ b/packages/ui/src/client.ts
@@ -12,6 +12,7 @@ import type {
   InstalledForgeVersion,
   InstalledVersion,
   Instance,
+  InstanceRepairResult,
   JavaCatalog,
   JavaDownloadInfo,
   JavaInstallation,
@@ -119,6 +120,16 @@ export function duplicateInstance(
   });
 }
 
+export function exportInstance(
+  instanceId: string,
+  archivePath: string,
+): Promise<string> {
+  return invoke<string>("export_instance", {
+    instanceId,
+    archivePath,
+  });
+}
+
 export function fetchAdoptiumJava(
   majorVersion: number,
   imageType: string,
@@ -267,6 +278,16 @@ export function installVersion(
   });
 }
 
+export function importInstance(
+  archivePath: string,
+  newName?: string,
+): Promise<Instance> {
+  return invoke<Instance>("import_instance", {
+    archivePath,
+    newName,
+  });
+}
+
 export function isFabricInstalled(
   instanceId: string,
   gameVersion: string,
@@ -351,6 +372,10 @@ export function refreshJavaCatalog(): Promise<JavaCatalog> {
   return invoke<JavaCatalog>("refresh_java_catalog");
 }
 
+export function repairInstances(): Promise<InstanceRepairResult> {
+  return invoke<InstanceRepairResult>("repair_instances");
+}
+
 export function resumeJavaDownloads(): Promise<JavaInstallation[]> {
   return invoke<JavaInstallation[]>("resume_java_downloads");
 }
@@ -383,6 +408,10 @@ export function startGame(
   });
 }
 
+export function stopGame(): Promise<string> {
+  return invoke<string>("stop_game");
+}
+
 export function startMicrosoftLogin(): Promise<DeviceCodeResponse> {
   return invoke<DeviceCodeResponse>("start_microsoft_login");
 }
diff --git a/packages/ui/src/components/bottom-bar.tsx b/packages/ui/src/components/bottom-bar.tsx
index 0710c3a..8f70985 100644
--- a/packages/ui/src/components/bottom-bar.tsx
+++ b/packages/ui/src/components/bottom-bar.tsx
@@ -1,11 +1,10 @@
-import { listen, type UnlistenFn } from "@tauri-apps/api/event";
 import { Play, User, XIcon } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
-import { listInstalledVersions, startGame } from "@/client";
 import { cn } from "@/lib/utils";
 import { useAuthStore } from "@/models/auth";
 import { useInstanceStore } from "@/models/instance";
+import { useGameStore } from "@/stores/game-store";
 import { LoginModal } from "./login-modal";
 import { Button } from "./ui/button";
 import {
@@ -18,150 +17,74 @@ import {
 } from "./ui/select";
 import { Spinner } from "./ui/spinner";
 
-interface InstalledVersion {
-  id: string;
-  type: string;
-}
-
 export function BottomBar() {
-  const authStore = useAuthStore();
-  const instancesStore = useInstanceStore();
+  const account = useAuthStore((state) => state.account);
+  const instances = useInstanceStore((state) => state.instances);
+  const activeInstance = useInstanceStore((state) => state.activeInstance);
+  const setActiveInstance = useInstanceStore((state) => state.setActiveInstance);
+  const selectedVersion = useGameStore((state) => state.selectedVersion);
+  const setSelectedVersion = useGameStore((state) => state.setSelectedVersion);
+  const startGame = useGameStore((state) => state.startGame);
+  const stopGame = useGameStore((state) => state.stopGame);
+  const runningInstanceId = useGameStore((state) => state.runningInstanceId);
+  const launchingInstanceId = useGameStore((state) => state.launchingInstanceId);
+  const stoppingInstanceId = useGameStore((state) => state.stoppingInstanceId);
 
-  const [isLaunched, setIsLaunched] = useState<boolean>(false);
-  const gameUnlisten = useRef<UnlistenFn | null>(null);
-  const [isLaunching, setIsLaunching] = useState<boolean>(false);
-  const [selectedVersion, setSelectedVersion] = useState<string | null>(null);
-  const [installedVersions, setInstalledVersions] = useState<
-    InstalledVersion[]
-  >([]);
-  const [isLoadingVersions, setIsLoadingVersions] = useState(true);
   const [showLoginModal, setShowLoginModal] = useState(false);
 
-  const loadInstalledVersions = useCallback(async () => {
-    if (!instancesStore.activeInstance) {
-      setInstalledVersions([]);
-      setIsLoadingVersions(false);
+  useEffect(() => {
+    const nextVersion = activeInstance?.versionId ?? "";
+    if (selectedVersion === nextVersion) {
       return;
     }
 
-    setIsLoadingVersions(true);
-    try {
-      const versions = await listInstalledVersions(
-        instancesStore.activeInstance.id,
-      );
-      setInstalledVersions(versions);
+    setSelectedVersion(nextVersion);
+  }, [activeInstance?.id, activeInstance?.versionId, selectedVersion, setSelectedVersion]);
 
-      // If no version is selected but we have installed versions, select the first one
-      if (!selectedVersion && versions.length > 0) {
-        setSelectedVersion(versions[0].id);
+  const handleInstanceChange = useCallback(
+    async (instanceId: string) => {
+      if (activeInstance?.id === instanceId) {
+        return;
       }
-    } catch (error) {
-      console.error("Failed to load installed versions:", error);
-    } finally {
-      setIsLoadingVersions(false);
-    }
-  }, [instancesStore.activeInstance, selectedVersion]);
 
-  useEffect(() => {
-    loadInstalledVersions();
-
-    // Listen for backend events that should refresh installed versions.
-    let unlistenDownload: UnlistenFn | null = null;
-    let unlistenVersionDeleted: UnlistenFn | null = null;
-
-    (async () => {
-      try {
-        unlistenDownload = await listen("download-complete", () => {
-          loadInstalledVersions();
-        });
-      } catch (err) {
-        // best-effort: do not break UI if listening fails
-        // eslint-disable-next-line no-console
-        console.warn("Failed to attach download-complete listener:", err);
+      const nextInstance = instances.find((instance) => instance.id === instanceId);
+      if (!nextInstance) {
+        return;
       }
 
       try {
-        unlistenVersionDeleted = await listen("version-deleted", () => {
-          loadInstalledVersions();
-        });
-      } catch (err) {
-        // eslint-disable-next-line no-console
-        console.warn("Failed to attach version-deleted listener:", err);
+        await setActiveInstance(nextInstance);
+      } catch (error) {
+        console.error("Failed to activate instance:", error);
+        toast.error(`Failed to activate instance: ${String(error)}`);
       }
-    })();
-
-    return () => {
-      try {
-        if (unlistenDownload) unlistenDownload();
-      } catch {
-        // ignore
-      }
-      try {
-        if (unlistenVersionDeleted) unlistenVersionDeleted();
-      } catch {
-        // ignore
-      }
-    };
-  }, [loadInstalledVersions]);
+    },
+    [activeInstance?.id, instances, setActiveInstance],
+  );
 
   const handleStartGame = async () => {
-    if (!selectedVersion) {
-      toast.info("Please select a version!");
-      return;
-    }
-
-    if (!instancesStore.activeInstance) {
+    if (!activeInstance) {
       toast.info("Please select an instance first!");
       return;
     }
 
-    try {
-      gameUnlisten.current = await listen("game-exited", () => {
-        setIsLaunched(false);
-      });
-    } catch (error) {
-      toast.warning(`Failed to listen to game-exited event: ${error}`);
-    }
-
-    setIsLaunching(true);
-    try {
-      await startGame(instancesStore.activeInstance?.id, selectedVersion);
-      setIsLaunched(true);
-    } catch (error) {
-      console.error(`Failed to start game: ${error}`);
-      toast.error(`Failed to start game: ${error}`);
-    } finally {
-      setIsLaunching(false);
-    }
+    await startGame(
+      account,
+      () => setShowLoginModal(true),
+      activeInstance.id,
+      selectedVersion || activeInstance.versionId,
+      () => undefined,
+    );
   };
 
-  const getVersionTypeColor = (type: string) => {
-    switch (type) {
-      case "release":
-        return "bg-emerald-500";
-      case "snapshot":
-        return "bg-amber-500";
-      case "old_beta":
-        return "bg-rose-500";
-      case "old_alpha":
-        return "bg-violet-500";
-      default:
-        return "bg-gray-500";
-    }
+  const handleStopGame = async () => {
+    await stopGame(runningInstanceId);
   };
 
-  const versionOptions = useMemo(
-    () =>
-      installedVersions.map((v) => ({
-        label: `${v.id}${v.type !== "release" ? ` (${v.type})` : ""}`,
-        value: v.id,
-        type: v.type,
-      })),
-    [installedVersions],
-  );
-
   const renderButton = () => {
-    if (!authStore.account) {
+    const isGameRunning = runningInstanceId !== null;
+
+    if (!account) {
       return (
         <Button
           className="px-4 py-2"
@@ -173,20 +96,20 @@ export function BottomBar() {
       );
     }
 
-    return isLaunched ? (
-      <Button
-        variant="destructive"
-        onClick={() => {
-          toast.warning(
-            "Minecraft Process will not be terminated, please close it manually.",
-          );
-          setIsLaunched(false);
-        }}
-      >
-        <XIcon />
-        Game started
-      </Button>
-    ) : (
+    if (isGameRunning) {
+      return (
+        <Button
+          variant="destructive"
+          onClick={handleStopGame}
+          disabled={stoppingInstanceId !== null}
+        >
+          {stoppingInstanceId ? <Spinner /> : <XIcon />}
+          Close
+        </Button>
+      );
+    }
+
+    return (
       <Button
         className={cn(
           "px-4 py-2 shadow-xl",
@@ -194,9 +117,9 @@ export function BottomBar() {
         )}
         size="lg"
         onClick={handleStartGame}
-        disabled={isLaunching}
+        disabled={launchingInstanceId === activeInstance?.id}
       >
-        {isLaunching ? <Spinner /> : <Play />}
+        {launchingInstanceId === activeInstance?.id ? <Spinner /> : <Play />}
         Start
       </Button>
     );
@@ -206,40 +129,39 @@ export function BottomBar() {
     <div className="absolute bottom-0 left-0 right-0 bg-linear-to-t from-black/30 via-transparent to-transparent p-4 z-10">
       <div className="max-w-7xl mx-auto">
         <div className="flex items-center justify-between bg-white/5 dark:bg-black/20 backdrop-blur-xl border border-white/10 dark:border-white/5 p-3 shadow-lg">
-          <div className="flex items-center gap-4">
-            <div className="flex flex-col">
-              <span className="text-xs font-mono text-zinc-400 uppercase tracking-wider">
-                Active Instance
-              </span>
-              <span className="text-sm font-medium text-white">
-                {instancesStore.activeInstance?.name || "No instance selected"}
-              </span>
-            </div>
-
+          <div className="flex items-center gap-4 min-w-0">
             <Select
-              value={selectedVersion}
-              items={versionOptions}
-              onValueChange={setSelectedVersion}
-              disabled={isLoadingVersions}
+              value={activeInstance?.id ?? null}
+              items={instances.map((instance) => ({
+                label: instance.name,
+                value: instance.id,
+              }))}
+              onValueChange={(value) => {
+                if (value) {
+                  void handleInstanceChange(value);
+                }
+              }}
+              disabled={instances.length === 0}
             >
-              <SelectTrigger className="max-w-48">
+              <SelectTrigger className="w-full min-w-64 max-w-80">
                 <SelectValue
                   placeholder={
-                    isLoadingVersions
-                      ? "Loading versions..."
-                      : "Please select a version"
+                    instances.length === 0
+                      ? "No instances available"
+                      : "Please select an instance"
                   }
                 />
               </SelectTrigger>
               <SelectContent alignItemWithTrigger={false}>
                 <SelectGroup>
-                  {versionOptions.map((item) => (
-                    <SelectItem
-                      key={item.value}
-                      value={item.value}
-                      className={getVersionTypeColor(item.type)}
-                    >
-                      {item.label}
+                  {instances.map((instance) => (
+                    <SelectItem key={instance.id} value={instance.id}>
+                      <div className="flex min-w-0 flex-col">
+                        <span className="truncate">{instance.name}</span>
+                        <span className="text-muted-foreground truncate text-[11px]">
+                          {instance.versionId ?? "No version selected"}
+                        </span>
+                      </div>
                     </SelectItem>
                   ))}
                 </SelectGroup>
diff --git a/packages/ui/src/models/auth.ts b/packages/ui/src/models/auth.ts
index 10b2a0d..9c814d2 100644
--- a/packages/ui/src/models/auth.ts
+++ b/packages/ui/src/models/auth.ts
@@ -13,6 +13,10 @@ import {
 } from "@/client";
 import type { Account, DeviceCodeResponse } from "@/types";
 
+function getAuthErrorMessage(error: unknown): string {
+  return error instanceof Error ? error.message : String(error);
+}
+
 export interface AuthState {
   account: Account | null;
   loginMode: Account["type"] | null;
@@ -68,36 +72,78 @@ export const useAuthStore = create<AuthState>((set, get) => ({
       toast.warning("Failed to attch auth-progress listener");
     }
 
-    const deviceCode = await startMicrosoftLogin();
-    navigator.clipboard?.writeText(deviceCode.userCode).catch((err) => {
-      console.error("Failed to copy to clipboard:", err);
-    });
-    open(deviceCode.verificationUri).catch((err) => {
-      console.error("Failed to open browser:", err);
-    });
-    const ms = Number(deviceCode.interval) * 1000;
-    const interval = setInterval(() => {
-      _pollLoginStatus(deviceCode.deviceCode, onSuccess);
-    }, ms);
-    set({ _pollingInterval: interval, deviceCode });
+    try {
+      const deviceCode = await startMicrosoftLogin();
+
+      navigator.clipboard?.writeText(deviceCode.userCode).catch((err) => {
+        console.error("Failed to copy to clipboard:", err);
+      });
+      open(deviceCode.verificationUri).catch((err) => {
+        console.error("Failed to open browser:", err);
+      });
+
+      const ms = Math.max(1, Number(deviceCode.interval) || 5) * 1000;
+      const interval = setInterval(() => {
+        _pollLoginStatus(deviceCode.deviceCode, onSuccess);
+      }, ms);
+
+      set({
+        _pollingInterval: interval,
+        deviceCode,
+        statusMessage: deviceCode.message ?? "Waiting for authorization...",
+      });
+    } catch (error) {
+      const message = getAuthErrorMessage(error);
+      console.error("Failed to start Microsoft login:", error);
+      set({ loginMode: null, statusMessage: `Failed to start login: ${message}` });
+      toast.error(`Failed to start Microsoft login: ${message}`);
+    }
   },
   _pollLoginStatus: async (deviceCode, onSuccess) => {
     const { _pollingInterval, _mutex: mutex, _progressUnlisten } = get();
     if (mutex.isLocked) return;
-    mutex.acquire();
+
+    await mutex.acquire();
+
     try {
       const account = await completeMicrosoftLogin(deviceCode);
       clearInterval(_pollingInterval ?? undefined);
       _progressUnlisten?.();
       onSuccess?.();
-      set({ account, loginMode: "microsoft" });
-    } catch (error) {
-      if (error === "authorization_pending") {
-        console.log("Authorization pending...");
-      } else {
-        console.error("Failed to poll login status:", error);
-        toast.error("Failed to poll login status");
+      set({
+        account,
+        loginMode: "microsoft",
+        deviceCode: null,
+        _pollingInterval: null,
+        _progressUnlisten: null,
+        statusMessage: "Login successful",
+      });
+    } catch (error: unknown) {
+      const message = getAuthErrorMessage(error);
+
+      if (message.includes("authorization_pending")) {
+        set({ statusMessage: "Waiting for authorization..." });
+        return;
+      }
+
+      if (message.includes("slow_down")) {
+        set({ statusMessage: "Microsoft asked to slow down polling..." });
+        return;
       }
+
+      clearInterval(_pollingInterval ?? undefined);
+      _progressUnlisten?.();
+
+      set({
+        loginMode: null,
+        deviceCode: null,
+        _pollingInterval: null,
+        _progressUnlisten: null,
+        statusMessage: `Login failed: ${message}`,
+      });
+
+      console.error("Failed to poll login status:", error);
+      toast.error(`Microsoft login failed: ${message}`);
     } finally {
       mutex.release();
     }
@@ -111,6 +157,7 @@ export const useAuthStore = create<AuthState>((set, get) => ({
     }
     set({
       loginMode: null,
+      deviceCode: null,
       _pollingInterval: null,
       statusMessage: null,
       _progressUnlisten: null,
diff --git a/packages/ui/src/models/instance.ts b/packages/ui/src/models/instance.ts
index b1b463e..e1eb7c1 100644
--- a/packages/ui/src/models/instance.ts
+++ b/packages/ui/src/models/instance.ts
@@ -4,10 +4,13 @@ import {
   createInstance,
   deleteInstance,
   duplicateInstance,
+  exportInstance,
   getActiveInstance,
   getInstance,
+  importInstance,
   listInstances,
-  setActiveInstance,
+  repairInstances,
+  setActiveInstance as setActiveInstanceCommand,
   updateInstance,
 } from "@/client";
 import type { Instance } from "@/types";
@@ -22,6 +25,9 @@ interface InstanceState {
   update: (instance: Instance) => Promise<void>;
   setActiveInstance: (instance: Instance) => Promise<void>;
   duplicate: (id: string, newName: string) => Promise<Instance | null>;
+  exportArchive: (id: string, archivePath: string) => Promise<void>;
+  importArchive: (archivePath: string, newName?: string) => Promise<Instance | null>;
+  repair: () => Promise<void>;
   get: (id: string) => Promise<Instance | null>;
 }
 
@@ -30,14 +36,20 @@ export const useInstanceStore = create<InstanceState>((set, get) => ({
   activeInstance: null,
 
   refresh: async () => {
-    const { setActiveInstance } = get();
     try {
       const instances = await listInstances();
-      const activeInstance = await getActiveInstance();
+      let activeInstance = await getActiveInstance();
+
+      if (
+        activeInstance &&
+        !instances.some((instance) => instance.id === activeInstance?.id)
+      ) {
+        activeInstance = null;
+      }
 
       if (!activeInstance && instances.length > 0) {
-        // If no active instance but instances exist, set the first one as active
-        await setActiveInstance(instances[0]);
+        await setActiveInstanceCommand(instances[0].id);
+        activeInstance = instances[0];
       }
 
       set({ instances, activeInstance });
@@ -51,35 +63,27 @@ export const useInstanceStore = create<InstanceState>((set, get) => ({
     const { refresh } = get();
     try {
       const instance = await createInstance(name);
+      await setActiveInstanceCommand(instance.id);
       await refresh();
       toast.success(`Instance "${name}" created successfully`);
       return instance;
     } catch (e) {
       console.error("Failed to create instance:", e);
-      toast.error("Error creating instance");
+      toast.error(String(e));
       return null;
     }
   },
 
   delete: async (id) => {
-    const { refresh, instances, activeInstance, setActiveInstance } = get();
+    const { refresh } = get();
     try {
       await deleteInstance(id);
       await refresh();
 
-      // If deleted instance was active, set another as active
-      if (activeInstance?.id === id) {
-        if (instances.length > 0) {
-          await setActiveInstance(instances[0]);
-        } else {
-          set({ activeInstance: null });
-        }
-      }
-
       toast.success("Instance deleted successfully");
     } catch (e) {
       console.error("Failed to delete instance:", e);
-      toast.error("Error deleting instance");
+      toast.error(String(e));
     }
   },
 
@@ -96,7 +100,7 @@ export const useInstanceStore = create<InstanceState>((set, get) => ({
   },
 
   setActiveInstance: async (instance) => {
-    await setActiveInstance(instance.id);
+    await setActiveInstanceCommand(instance.id);
     set({ activeInstance: instance });
   },
 
@@ -104,16 +108,56 @@ export const useInstanceStore = create<InstanceState>((set, get) => ({
     const { refresh } = get();
     try {
       const instance = await duplicateInstance(id, newName);
+      await setActiveInstanceCommand(instance.id);
       await refresh();
       toast.success(`Instance duplicated as "${newName}"`);
       return instance;
     } catch (e) {
       console.error("Failed to duplicate instance:", e);
-      toast.error("Error duplicating instance");
+      toast.error(String(e));
+      return null;
+    }
+  },
+
+  exportArchive: async (id, archivePath) => {
+    try {
+      await exportInstance(id, archivePath);
+      toast.success("Instance exported successfully");
+    } catch (e) {
+      console.error("Failed to export instance:", e);
+      toast.error(String(e));
+    }
+  },
+
+  importArchive: async (archivePath, newName) => {
+    const { refresh } = get();
+    try {
+      const instance = await importInstance(archivePath, newName);
+      await setActiveInstanceCommand(instance.id);
+      await refresh();
+      toast.success(`Instance "${instance.name}" imported successfully`);
+      return instance;
+    } catch (e) {
+      console.error("Failed to import instance:", e);
+      toast.error(String(e));
       return null;
     }
   },
 
+  repair: async () => {
+    const { refresh } = get();
+    try {
+      const result = await repairInstances();
+      await refresh();
+      toast.success(
+        `Repair completed: restored ${result.restoredInstances}, removed ${result.removedStaleEntries}`,
+      );
+    } catch (e) {
+      console.error("Failed to repair instances:", e);
+      toast.error(String(e));
+    }
+  },
+
   get: async (id) => {
     try {
       return await getInstance(id);
diff --git a/packages/ui/src/pages/index.tsx b/packages/ui/src/pages/index.tsx
index 093ccb2..209a1b2 100644
--- a/packages/ui/src/pages/index.tsx
+++ b/packages/ui/src/pages/index.tsx
@@ -5,11 +5,13 @@ import { Sidebar } from "@/components/sidebar";
 import { useAuthStore } from "@/models/auth";
 import { useInstanceStore } from "@/models/instance";
 import { useSettingsStore } from "@/models/settings";
+import { useGameStore } from "@/stores/game-store";
 
 export function IndexPage() {
   const authStore = useAuthStore();
   const settingsStore = useSettingsStore();
   const instanceStore = useInstanceStore();
+  const initGameLifecycle = useGameStore((state) => state.initLifecycle);
 
   const location = useLocation();
 
@@ -17,7 +19,10 @@ export function IndexPage() {
     authStore.init();
     settingsStore.refresh();
     instanceStore.refresh();
-  }, [authStore.init, settingsStore.refresh, instanceStore.refresh]);
+    void initGameLifecycle().catch((error) => {
+      console.error("Failed to initialize game lifecycle:", error);
+    });
+  }, [authStore.init, settingsStore.refresh, instanceStore.refresh, initGameLifecycle]);
 
   return (
     <div className="relative h-screen w-full overflow-hidden bg-background font-sans">
diff --git a/packages/ui/src/pages/instances-view.tsx b/packages/ui/src/pages/instances-view.tsx
index e99004c..07a2135 100644
--- a/packages/ui/src/pages/instances-view.tsx
+++ b/packages/ui/src/pages/instances-view.tsx
@@ -1,7 +1,16 @@
-import { CopyIcon, EditIcon, Plus, RocketIcon, Trash2Icon } from "lucide-react";
+import { open, save } from "@tauri-apps/plugin-dialog";
+import {
+  CopyIcon,
+  EditIcon,
+  FolderOpenIcon,
+  Plus,
+  RocketIcon,
+  Trash2Icon,
+  XIcon,
+} from "lucide-react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
-import { startGame } from "@/client";
+import { openFileExplorer } from "@/client";
 import InstanceCreationModal from "@/components/instance-creation-modal";
 import InstanceEditorModal from "@/components/instance-editor-modal";
 import { Button } from "@/components/ui/button";
@@ -15,11 +24,22 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { cn } from "@/lib/utils";
+import { useAuthStore } from "@/models/auth";
 import { useInstanceStore } from "@/models/instance";
+import { useGameStore } from "@/stores/game-store";
 import type { Instance } from "@/types";
 
 export function InstancesView() {
+  const account = useAuthStore((state) => state.account);
   const instancesStore = useInstanceStore();
+  const startGame = useGameStore((state) => state.startGame);
+  const stopGame = useGameStore((state) => state.stopGame);
+  const runningInstanceId = useGameStore((state) => state.runningInstanceId);
+  const launchingInstanceId = useGameStore((state) => state.launchingInstanceId);
+  const stoppingInstanceId = useGameStore((state) => state.stoppingInstanceId);
+  const [isImporting, setIsImporting] = useState(false);
+  const [repairing, setRepairing] = useState(false);
+  const [exportingId, setExportingId] = useState<string | null>(null);
 
   // Modal / UI state
   const [showCreateModal, setShowCreateModal] = useState(false);
@@ -78,20 +98,83 @@ export function InstancesView() {
     setShowDuplicateModal(false);
   };
 
+  const handleImport = async () => {
+    setIsImporting(true);
+    try {
+      const selected = await open({
+        multiple: false,
+        filters: [{ name: "Zip Archive", extensions: ["zip"] }],
+      });
+
+      if (typeof selected !== "string") {
+        return;
+      }
+
+      await instancesStore.importArchive(selected);
+    } finally {
+      setIsImporting(false);
+    }
+  };
+
+  const handleRepair = async () => {
+    setRepairing(true);
+    try {
+      await instancesStore.repair();
+    } finally {
+      setRepairing(false);
+    }
+  };
+
+  const handleExport = async (instance: Instance) => {
+    setExportingId(instance.id);
+    try {
+      const filePath = await save({
+        defaultPath: `${instance.name.replace(/[\\/:*?"<>|]/g, "_")}.zip`,
+        filters: [{ name: "Zip Archive", extensions: ["zip"] }],
+      });
+
+      if (!filePath) {
+        return;
+      }
+
+      await instancesStore.exportArchive(instance.id, filePath);
+    } finally {
+      setExportingId(null);
+    }
+  };
+
   return (
     <div className="h-full flex flex-col gap-4 p-6 overflow-y-auto">
       <div className="flex items-center justify-between">
         <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
           Instances
         </h1>
-        <Button
-          type="button"
-          onClick={openCreate}
-          className="px-4 py-2 transition-colors"
-        >
-          <Plus size={18} />
-          Create Instance
-        </Button>
+        <div className="flex items-center gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={handleImport}
+            disabled={isImporting}
+          >
+            {isImporting ? "Importing..." : "Import"}
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={handleRepair}
+            disabled={repairing}
+          >
+            {repairing ? "Repairing..." : "Repair Index"}
+          </Button>
+          <Button
+            type="button"
+            onClick={openCreate}
+            className="px-4 py-2 transition-colors"
+          >
+            <Plus size={18} />
+            Create Instance
+          </Button>
+        </div>
       </div>
 
       {instancesStore.instances.length === 0 ? (
@@ -105,6 +188,10 @@ export function InstancesView() {
         <ul className="flex flex-col space-y-3">
           {instancesStore.instances.map((instance) => {
             const isActive = instancesStore.activeInstance?.id === instance.id;
+            const isRunning = runningInstanceId === instance.id;
+            const isLaunching = launchingInstanceId === instance.id;
+            const isStopping = stoppingInstanceId === instance.id;
+            const otherInstanceRunning = runningInstanceId !== null && !isRunning;
 
             return (
               <li
@@ -164,22 +251,71 @@ export function InstancesView() {
                   <div className="flex items-center">
                     <div className="flex flex-row space-x-2">
                       <Button
-                        variant="ghost"
+                        variant={isRunning ? "destructive" : "ghost"}
                         size="icon"
-                        onClick={async () => {
+                        onClick={async (e) => {
+                          e.stopPropagation();
+
+                          try {
+                            await instancesStore.setActiveInstance(instance);
+                          } catch (error) {
+                            console.error("Failed to set active instance:", error);
+                            toast.error("Error setting active instance");
+                            return;
+                          }
+
+                          if (isRunning) {
+                            await stopGame(instance.id);
+                            return;
+                          }
+
                           if (!instance.versionId) {
                             toast.error("No version selected or installed");
                             return;
                           }
-                          try {
-                            await startGame(instance.id, instance.versionId);
-                          } catch (e) {
-                            console.error("Failed to start game:", e);
-                            toast.error("Error starting game");
-                          }
+
+                          await startGame(
+                            account,
+                            () => {
+                              toast.info("Please login first");
+                            },
+                            instance.id,
+                            instance.versionId,
+                            () => undefined,
+                          );
                         }}
+                        disabled={otherInstanceRunning || isLaunching || isStopping}
                       >
-                        <RocketIcon />
+                        {isLaunching || isStopping ? (
+                          <span className="text-xs">...</span>
+                        ) : isRunning ? (
+                          <XIcon />
+                        ) : (
+                          <RocketIcon />
+                        )}
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          void openFileExplorer(instance.gameDir);
+                        }}
+                      >
+                        <FolderOpenIcon />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          void handleExport(instance);
+                        }}
+                        disabled={exportingId === instance.id}
+                      >
+                        <span className="text-xs">
+                          {exportingId === instance.id ? "..." : "ZIP"}
+                        </span>
                       </Button>
                       <Button
                         variant="ghost"
diff --git a/packages/ui/src/stores/game-store.ts b/packages/ui/src/stores/game-store.ts
index fa0f9f8..1eaf7e7 100644
--- a/packages/ui/src/stores/game-store.ts
+++ b/packages/ui/src/stores/game-store.ts
@@ -1,49 +1,92 @@
+import { listen, type UnlistenFn } from "@tauri-apps/api/event";
 import { toast } from "sonner";
 import { create } from "zustand";
-import { getVersions } from "@/client";
+import {
+  getVersions,
+  getVersionsOfInstance,
+  startGame as startGameCommand,
+  stopGame as stopGameCommand,
+} from "@/client";
+import type { Account } from "@/types/bindings/auth";
+import type { GameExitedEvent } from "@/types/bindings/core";
 import type { Version } from "@/types/bindings/manifest";
 
 interface GameState {
-  // State
   versions: Version[];
   selectedVersion: string;
+  runningInstanceId: string | null;
+  runningVersionId: string | null;
+  launchingInstanceId: string | null;
+  stoppingInstanceId: string | null;
+  lifecycleUnlisten: UnlistenFn | null;
 
-  // Computed property
   latestRelease: Version | undefined;
+  isGameRunning: boolean;
 
-  // Actions
+  initLifecycle: () => Promise<void>;
   loadVersions: (instanceId?: string) => Promise<void>;
   startGame: (
-    currentAccount: any,
+    currentAccount: Account | null,
     openLoginModal: () => void,
     activeInstanceId: string | null,
-    setView: (view: any) => void,
-  ) => Promise<void>;
+    versionId: string | null,
+    setView: (view: string) => void,
+  ) => Promise<string | null>;
+  stopGame: (instanceId?: string | null) => Promise<string | null>;
   setSelectedVersion: (version: string) => void;
   setVersions: (versions: Version[]) => void;
 }
 
 export const useGameStore = create<GameState>((set, get) => ({
-  // Initial state
   versions: [],
   selectedVersion: "",
+  runningInstanceId: null,
+  runningVersionId: null,
+  launchingInstanceId: null,
+  stoppingInstanceId: null,
+  lifecycleUnlisten: null,
 
-  // Computed property
   get latestRelease() {
     return get().versions.find((v) => v.type === "release");
   },
 
-  // Actions
+  get isGameRunning() {
+    return get().runningInstanceId !== null;
+  },
+
+  initLifecycle: async () => {
+    if (get().lifecycleUnlisten) {
+      return;
+    }
+
+    const unlisten = await listen<GameExitedEvent>("game-exited", (event) => {
+      const { instanceId, versionId, wasStopped } = event.payload;
+
+      set({
+        runningInstanceId: null,
+        runningVersionId: null,
+        launchingInstanceId: null,
+        stoppingInstanceId: null,
+      });
+
+      if (wasStopped) {
+        toast.success(`Stopped Minecraft ${versionId} for instance ${instanceId}`);
+      } else {
+        toast.info(`Minecraft ${versionId} exited for instance ${instanceId}`);
+      }
+    });
+
+    set({ lifecycleUnlisten: unlisten });
+  },
+
   loadVersions: async (instanceId?: string) => {
-    console.log("Loading versions for instance:", instanceId);
     try {
-      // Ask the backend for known versions (optionally scoped to an instance).
-      // The Tauri command `get_versions` is expected to return an array of `Version`.
-      const versions = await getVersions();
+      const versions = instanceId
+        ? await getVersionsOfInstance(instanceId)
+        : await getVersions();
       set({ versions: versions ?? [] });
     } catch (e) {
       console.error("Failed to load versions:", e);
-      // Keep the store consistent on error by clearing versions.
       set({ versions: [] });
     }
   },
@@ -52,42 +95,80 @@ export const useGameStore = create<GameState>((set, get) => ({
     currentAccount,
     openLoginModal,
     activeInstanceId,
+    versionId,
     setView,
   ) => {
-    const { selectedVersion } = get();
+    const { isGameRunning } = get();
+    const targetVersion = versionId ?? get().selectedVersion;
 
     if (!currentAccount) {
-      alert("Please login first!");
+      toast.info("Please login first");
       openLoginModal();
-      return;
+      return null;
     }
 
-    if (!selectedVersion) {
-      alert("Please select a version!");
-      return;
+    if (!targetVersion) {
+      toast.info("Please select a version first");
+      return null;
     }
 
     if (!activeInstanceId) {
-      alert("Please select an instance first!");
+      toast.info("Please select an instance first");
       setView("instances");
-      return;
+      return null;
     }
 
-    toast.info("Preparing to launch " + selectedVersion + "...");
+    if (isGameRunning) {
+      toast.info("A game is already running");
+      return null;
+    }
+
+    set({
+      launchingInstanceId: activeInstanceId,
+      selectedVersion: targetVersion,
+    });
+    toast.info(`Preparing to launch ${targetVersion}...`);
 
     try {
-      // Note: In production, this would call Tauri invoke
-      // const msg = await invoke<string>("start_game", {
-      //   instanceId: activeInstanceId,
-      //   versionId: selectedVersion,
-      // });
-
-      // Simulate success
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-      toast.success("Game started successfully!");
+      const message = await startGameCommand(activeInstanceId, targetVersion);
+      set({
+        launchingInstanceId: null,
+        runningInstanceId: activeInstanceId,
+        runningVersionId: targetVersion,
+      });
+      toast.success(message);
+      return message;
     } catch (e) {
       console.error(e);
+      set({ launchingInstanceId: null });
       toast.error(`Error: ${e}`);
+      return null;
+    }
+  },
+
+  stopGame: async (instanceId) => {
+    const { runningInstanceId } = get();
+
+    if (!runningInstanceId) {
+      toast.info("No running game found");
+      return null;
+    }
+
+    if (instanceId && instanceId !== runningInstanceId) {
+      toast.info("That instance is not the one currently running");
+      return null;
+    }
+
+    set({ stoppingInstanceId: runningInstanceId });
+
+    try {
+      return await stopGameCommand();
+    } catch (e) {
+      console.error("Failed to stop game:", e);
+      toast.error(`Failed to stop game: ${e}`);
+      return null;
+    } finally {
+      set({ stoppingInstanceId: null });
     }
   },
 
diff --git a/packages/ui/src/types/bindings/core.ts b/packages/ui/src/types/bindings/core.ts
index 94e3bde..70cf804 100644
--- a/packages/ui/src/types/bindings/core.ts
+++ b/packages/ui/src/types/bindings/core.ts
@@ -11,6 +11,13 @@ export type FileInfo = {
   modified: bigint;
 };
 
+export type GameExitedEvent = {
+  instanceId: string;
+  versionId: string;
+  exitCode: number | null;
+  wasStopped: boolean;
+};
+
 export type GithubRelease = {
   tagName: string;
   name: string;
diff --git a/packages/ui/src/types/bindings/instance.ts b/packages/ui/src/types/bindings/instance.ts
index 2c4f8ae..a8247a9 100644
--- a/packages/ui/src/types/bindings/instance.ts
+++ b/packages/ui/src/types/bindings/instance.ts
@@ -27,6 +27,13 @@ export type InstanceConfig = {
   activeInstanceId: string | null;
 };
 
+export type InstanceRepairResult = {
+  restoredInstances: number;
+  removedStaleEntries: number;
+  createdDefaultActive: boolean;
+  activeInstanceId: string | null;
+};
+
 /**
  * Memory settings override for an instance
  */
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
index 8c90267..241ca8f 100644
--- a/packages/ui/vite.config.ts
+++ b/packages/ui/vite.config.ts
@@ -6,6 +6,10 @@ import { defineConfig } from "vite";
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react(), tailwindcss()],
+  server: {
+    port: 5173,
+    strictPort: true,
+  },
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),