chore(ui): refactor workspace to monorepo (#70)

## Summary by Sourcery

Refactor the UI project structure into a pnpm monorepo packages layout
and align tooling and automation with the new paths.

Enhancements:
- Reorganize the UI app from the root ui directory into packages/ui
within a pnpm workspace.
- Update pnpm workspace configuration to include all packages under
packages/*.
- Adjust paths in changeset configuration so the @dropout/ui package
resolves from packages/ui.

Build:
- Update pre-commit configuration paths and arguments to reflect the new
UI location and normalize hook argument formatting.
- Update Dependabot configuration so npm updates target /packages/ui
instead of /ui.

CI:
- Update GitHub Actions workflows to watch packages/** instead of ui/**
and to run frontend tasks from packages/ui.
- Update pnpm cache dependency paths in workflows to use the root
pnpm-lock.yaml.
- Simplify frontend install steps in test workflows to run from the
repository root.

Chores:
- Add a new index.html under packages/ui and remove the old
ui/index.html to match the new project layout.

15 files changed, 0 insertions, 5194 deletions

diff --git a/ui/src/components/AssistantView.svelte b/ui/src/components/AssistantView.svelte
deleted file mode 100644
index 54509a5..0000000
--- a/ui/src/components/AssistantView.svelte
+++ /dev/null
@@ -1,436 +0,0 @@
-<script lang="ts">
-  import { assistantState } from '../stores/assistant.svelte';
-  import { settingsState } from '../stores/settings.svelte';
-  import { Send, Bot, RefreshCw, Trash2, AlertTriangle, Settings, Brain, ChevronDown } from 'lucide-svelte';
-  import { uiState } from '../stores/ui.svelte';
-  import { marked } from 'marked';
-  import { onMount } from 'svelte';
-
-  let input = $state('');
-  let messagesContainer: HTMLDivElement | undefined = undefined;
-
-  function parseMessageContent(content: string) {
-    if (!content) return { thinking: null, content: '', isThinking: false };
-    
-    // Support both <thinking> and <think> (DeepSeek uses <think>)
-    let startTag = '<thinking>';
-    let endTag = '</thinking>';
-    let startIndex = content.indexOf(startTag);
-    
-    if (startIndex === -1) {
-        startTag = '<think>';
-        endTag = '</think>';
-        startIndex = content.indexOf(startTag);
-    }
-    
-    // Also check for encoded tags if they weren't decoded properly
-    if (startIndex === -1) {
-        startTag = '\u003cthink\u003e';
-        endTag = '\u003c/think\u003e';
-        startIndex = content.indexOf(startTag);
-    }
-    
-    if (startIndex !== -1) {
-        const endIndex = content.indexOf(endTag, startIndex);
-        
-        if (endIndex !== -1) {
-            // Completed thinking block
-            // We extract the thinking part and keep the rest (before and after)
-            const before = content.substring(0, startIndex);
-            const thinking = content.substring(startIndex + startTag.length, endIndex).trim();
-            const after = content.substring(endIndex + endTag.length);
-            
-            return {
-                thinking,
-                content: (before + after).trim(),
-                isThinking: false
-            };
-        } else {
-            // Incomplete thinking block (still streaming)
-            const before = content.substring(0, startIndex);
-            const thinking = content.substring(startIndex + startTag.length).trim();
-            
-            return {
-                thinking,
-                content: before.trim(),
-                isThinking: true
-            };
-        }
-    }
-    
-    return { thinking: null, content, isThinking: false };
-  }
-
-  function renderMarkdown(content: string): string {
-    if (!content) return '';
-    try {
-      // marked.parse returns string synchronously when async is false (default)
-      return marked(content, { breaks: true, gfm: true }) as string;
-    } catch {
-      return content;
-    }
-  }
-
-  function scrollToBottom() {
-    if (messagesContainer) {
-      setTimeout(() => {
-        if (messagesContainer) {
-          messagesContainer.scrollTop = messagesContainer.scrollHeight;
-        }
-      }, 0);
-    }
-  }
-
-  onMount(() => {
-    assistantState.init();
-  });
-
-  // Scroll to bottom when messages change
-  $effect(() => {
-    // Access reactive state
-    const _len = assistantState.messages.length;
-    const _processing = assistantState.isProcessing;
-    // Scroll on next tick
-    if (_len > 0 || _processing) {
-      scrollToBottom();
-    }
-  });
-
-  async function handleSubmit() {
-    if (!input.trim() || assistantState.isProcessing) return;
-    const text = input;
-    input = '';
-    const provider = settingsState.settings.assistant.llm_provider;
-    const endpoint = provider === 'ollama' 
-      ? settingsState.settings.assistant.ollama_endpoint 
-      : settingsState.settings.assistant.openai_endpoint;
-    await assistantState.sendMessage(
-      text, 
-      settingsState.settings.assistant.enabled,
-      provider,
-      endpoint
-    );
-  }
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      handleSubmit();
-    }
-  }
-
-  function getProviderName(): string {
-    const provider = settingsState.settings.assistant.llm_provider;
-    if (provider === 'ollama') {
-      return `Ollama (${settingsState.settings.assistant.ollama_model})`;
-    } else if (provider === 'openai') {
-      return `OpenAI (${settingsState.settings.assistant.openai_model})`;
-    }
-    return provider;
-  }
-
-  function getProviderHelpText(): string {
-    const provider = settingsState.settings.assistant.llm_provider;
-    if (provider === 'ollama') {
-      return `Please ensure Ollama is installed and running at ${settingsState.settings.assistant.ollama_endpoint}.`;
-    } else if (provider === 'openai') {
-      return "Please check your OpenAI API key in Settings > AI Assistant.";
-    }
-    return "";
-  }
-</script>
-
-<div class="h-full w-full flex flex-col gap-4 p-4 lg:p-8 animate-in fade-in zoom-in-95 duration-300">
-  <div class="flex items-center justify-between mb-2">
-    <div class="flex items-center gap-3">
-      <div class="p-2 bg-indigo-500/20 rounded-lg text-indigo-400">
-        <Bot size={24} />
-      </div>
-      <div>
-        <h2 class="text-2xl font-bold">Game Assistant</h2>
-        <p class="text-zinc-400 text-sm">Powered by {getProviderName()}</p>
-      </div>
-    </div>
-    
-    <div class="flex items-center gap-2">
-       {#if !settingsState.settings.assistant.enabled}
-        <div class="flex items-center gap-2 px-3 py-1.5 bg-zinc-500/10 text-zinc-400 rounded-full text-xs font-medium border border-zinc-500/20">
-            <AlertTriangle size={14} />
-            <span>Disabled</span>
-        </div>
-       {:else if !assistantState.isProviderHealthy}
-        <div class="flex items-center gap-2 px-3 py-1.5 bg-red-500/10 text-red-400 rounded-full text-xs font-medium border border-red-500/20">
-            <AlertTriangle size={14} />
-            <span>Offline</span>
-        </div>
-       {:else}
-        <div class="flex items-center gap-2 px-3 py-1.5 bg-emerald-500/10 text-emerald-400 rounded-full text-xs font-medium border border-emerald-500/20">
-            <div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div>
-            <span>Online</span>
-        </div>
-       {/if}
-
-       <button 
-         onclick={() => assistantState.checkHealth()}
-         class="p-2 hover:bg-white/5 rounded-lg text-zinc-400 hover:text-white transition-colors"
-         title="Check Connection"
-       >
-         <RefreshCw size={18} class={assistantState.isProcessing ? "animate-spin" : ""} />
-       </button>
-       
-       <button 
-         onclick={() => assistantState.clearHistory()}
-         class="p-2 hover:bg-white/5 rounded-lg text-zinc-400 hover:text-white transition-colors"
-         title="Clear History"
-       >
-         <Trash2 size={18} />
-       </button>
-
-       <button 
-         onclick={() => uiState.setView('settings')}
-         class="p-2 hover:bg-white/5 rounded-lg text-zinc-400 hover:text-white transition-colors"
-         title="Settings"
-       >
-         <Settings size={18} />
-       </button>
-    </div>
-  </div>
-
-  <!-- Chat Area -->
-  <div class="flex-1 bg-black/20 border border-white/5 rounded-xl overflow-hidden flex flex-col relative">
-    {#if assistantState.messages.length === 0}
-      <div class="absolute inset-0 flex flex-col items-center justify-center text-zinc-500 gap-4 p-8 text-center">
-        <Bot size={48} class="opacity-20" />
-        <div class="max-w-md">
-            <p class="text-lg font-medium text-zinc-300 mb-2">How can I help you today?</p>
-            <p class="text-sm opacity-70">I can analyze your game logs, diagnose crashes, or explain mod features.</p>
-        </div>
-        {#if !settingsState.settings.assistant.enabled}
-            <div class="bg-zinc-500/10 border border-zinc-500/20 rounded-lg p-4 text-sm text-zinc-400 mt-4 max-w-sm">
-                Assistant is disabled. Enable it in <button onclick={() => uiState.setView('settings')} class="text-indigo-400 hover:underline">Settings > AI Assistant</button>.
-            </div>
-        {:else if !assistantState.isProviderHealthy}
-            <div class="bg-red-500/10 border border-red-500/20 rounded-lg p-4 text-sm text-red-400 mt-4 max-w-sm">
-                {getProviderHelpText()}
-            </div>
-        {/if}
-      </div>
-    {/if}
-
-    <div 
-        bind:this={messagesContainer}
-        class="flex-1 overflow-y-auto p-4 space-y-4 scroll-smooth"
-    >
-      {#each assistantState.messages as msg, idx}
-        <div class="flex gap-3 {msg.role === 'user' ? 'justify-end' : 'justify-start'}">
-          {#if msg.role === 'assistant'}
-            <div class="w-8 h-8 rounded-full bg-indigo-500/20 flex items-center justify-center text-indigo-400 shrink-0 mt-1">
-              <Bot size={16} />
-            </div>
-          {/if}
-          
-          <div class="max-w-[80%] p-3 rounded-2xl {msg.role === 'user' ? 'bg-indigo-600 text-white rounded-tr-none' : 'bg-zinc-800/50 text-zinc-200 rounded-tl-none border border-white/5'}">
-            {#if msg.role === 'user'}
-              <div class="break-words whitespace-pre-wrap">
-                {msg.content}
-              </div>
-            {:else}
-              {@const parsed = parseMessageContent(msg.content)}
-              
-              <!-- Thinking Block -->
-              {#if parsed.thinking}
-                  <div class="mb-3 max-w-full overflow-hidden">
-                      <details class="group" open={parsed.isThinking}>
-                          <summary class="list-none cursor-pointer flex items-center gap-2 text-zinc-500 hover:text-zinc-300 transition-colors text-xs font-medium select-none bg-black/20 p-2 rounded-lg border border-white/5 w-fit mb-2 outline-none">
-                              <Brain size={14} />
-                              <span>Thinking Process</span>
-                              <ChevronDown size={14} class="transition-transform duration-200 group-open:rotate-180" />
-                          </summary>
-                          <div class="pl-3 border-l-2 border-zinc-700 text-zinc-500 text-xs italic leading-relaxed whitespace-pre-wrap font-mono max-h-96 overflow-y-auto custom-scrollbar bg-black/10 p-2 rounded-r-md">
-                              {parsed.thinking}
-                              {#if parsed.isThinking}
-                                  <span class="inline-block w-1.5 h-3 bg-zinc-500 ml-1 animate-pulse align-middle"></span>
-                              {/if}
-                          </div>
-                      </details>
-                  </div>
-              {/if}
-
-              <!-- Markdown rendered content for assistant -->
-              <div class="markdown-content prose prose-invert prose-sm max-w-none">
-                {#if parsed.content}
-                  {@html renderMarkdown(parsed.content)}
-                {:else if assistantState.isProcessing && idx === assistantState.messages.length - 1 && !parsed.isThinking}
-                  <span class="inline-flex items-center gap-1">
-                    <span class="w-2 h-2 bg-zinc-400 rounded-full animate-pulse"></span>
-                    <span class="w-2 h-2 bg-zinc-400 rounded-full animate-pulse" style="animation-delay: 0.2s"></span>
-                    <span class="w-2 h-2 bg-zinc-400 rounded-full animate-pulse" style="animation-delay: 0.4s"></span>
-                  </span>
-                {/if}
-              </div>
-
-              <!-- Generation Stats -->
-              {#if msg.stats}
-                <div class="mt-3 pt-3 border-t border-white/5 text-[10px] text-zinc-500 font-mono flex flex-wrap gap-x-4 gap-y-1 opacity-70 hover:opacity-100 transition-opacity select-none">
-                    <div class="flex gap-1" title="Tokens generated">
-                        <span>Eval:</span>
-                        <span class="text-zinc-400">{msg.stats.eval_count} tokens</span>
-                    </div>
-                    <div class="flex gap-1" title="Total duration">
-                        <span>Time:</span>
-                        <span class="text-zinc-400">{(msg.stats.total_duration / 1e9).toFixed(2)}s</span>
-                    </div>
-                    {#if msg.stats.eval_duration > 0}
-                        <div class="flex gap-1" title="Generation speed">
-                            <span>Speed:</span>
-                            <span class="text-zinc-400">{(msg.stats.eval_count / (msg.stats.eval_duration / 1e9)).toFixed(1)} t/s</span>
-                        </div>
-                    {/if}
-                </div>
-              {/if}
-            {/if}
-          </div>
-        </div>
-      {/each}
-    </div>
-
-    <!-- Input Area -->
-    <div class="p-4 bg-zinc-900/50 border-t border-white/5">
-      <div class="relative">
-        <textarea
-          bind:value={input}
-          onkeydown={handleKeydown}
-          placeholder={settingsState.settings.assistant.enabled ? "Ask about your game..." : "Assistant is disabled..."}
-          class="w-full bg-black/20 border border-white/10 rounded-xl py-3 pl-4 pr-12 focus:outline-none focus:border-indigo-500/50 focus:ring-1 focus:ring-indigo-500/50 resize-none h-[52px] max-h-32 transition-all text-white disabled:opacity-50"
-          disabled={assistantState.isProcessing || !settingsState.settings.assistant.enabled}
-        ></textarea>
-        
-        <button
-          onclick={handleSubmit}
-          disabled={!input.trim() || assistantState.isProcessing || !settingsState.settings.assistant.enabled}
-          class="absolute right-2 top-2 p-2 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 disabled:hover:bg-indigo-600 text-white rounded-lg transition-colors"
-        >
-          <Send size={16} />
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<style>
-  /* Markdown content styles */
-  .markdown-content :global(p) {
-    margin-bottom: 0.5rem;
-  }
-  
-  .markdown-content :global(p:last-child) {
-    margin-bottom: 0;
-  }
-  
-  .markdown-content :global(pre) {
-    background-color: rgba(0, 0, 0, 0.4);
-    border-radius: 0.5rem;
-    padding: 0.75rem;
-    overflow-x: auto;
-    margin: 0.5rem 0;
-  }
-  
-  .markdown-content :global(code) {
-    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-    font-size: 0.85em;
-  }
-  
-  .markdown-content :global(pre code) {
-    background: none;
-    padding: 0;
-  }
-  
-  .markdown-content :global(:not(pre) > code) {
-    background-color: rgba(0, 0, 0, 0.3);
-    padding: 0.15rem 0.4rem;
-    border-radius: 0.25rem;
-  }
-  
-  .markdown-content :global(ul),
-  .markdown-content :global(ol) {
-    margin: 0.5rem 0;
-    padding-left: 1.5rem;
-  }
-  
-  .markdown-content :global(li) {
-    margin: 0.25rem 0;
-  }
-  
-  .markdown-content :global(blockquote) {
-    border-left: 3px solid rgba(99, 102, 241, 0.5);
-    padding-left: 1rem;
-    margin: 0.5rem 0;
-    color: rgba(255, 255, 255, 0.7);
-  }
-  
-  .markdown-content :global(h1),
-  .markdown-content :global(h2),
-  .markdown-content :global(h3),
-  .markdown-content :global(h4) {
-    font-weight: 600;
-    margin: 0.75rem 0 0.5rem 0;
-  }
-  
-  .markdown-content :global(h1) {
-    font-size: 1.25rem;
-  }
-  
-  .markdown-content :global(h2) {
-    font-size: 1.125rem;
-  }
-  
-  .markdown-content :global(h3) {
-    font-size: 1rem;
-  }
-  
-  .markdown-content :global(a) {
-    color: rgb(129, 140, 248);
-    text-decoration: underline;
-  }
-  
-  .markdown-content :global(a:hover) {
-    color: rgb(165, 180, 252);
-  }
-  
-  .markdown-content :global(table) {
-    border-collapse: collapse;
-    margin: 0.5rem 0;
-    width: 100%;
-  }
-  
-  .markdown-content :global(th),
-  .markdown-content :global(td) {
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    padding: 0.5rem;
-    text-align: left;
-  }
-  
-  .markdown-content :global(th) {
-    background-color: rgba(0, 0, 0, 0.3);
-    font-weight: 600;
-  }
-  
-  .markdown-content :global(hr) {
-    border: none;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
-    margin: 1rem 0;
-  }
-  
-  .markdown-content :global(img) {
-    max-width: 100%;
-    border-radius: 0.5rem;
-  }
-  
-  .markdown-content :global(strong) {
-    font-weight: 600;
-  }
-  
-  .markdown-content :global(em) {
-    font-style: italic;
-  }
-</style>
diff --git a/ui/src/components/BottomBar.svelte b/ui/src/components/BottomBar.svelte
deleted file mode 100644
index 19cf35d..0000000
--- a/ui/src/components/BottomBar.svelte
+++ /dev/null
@@ -1,250 +0,0 @@
-<script lang="ts">
-  import { invoke } from "@tauri-apps/api/core";
-  import { listen, type UnlistenFn } from "@tauri-apps/api/event";
-  import { authState } from "../stores/auth.svelte";
-  import { gameState } from "../stores/game.svelte";
-  import { uiState } from "../stores/ui.svelte";
-  import { instancesState } from "../stores/instances.svelte";
-  import { Terminal, ChevronDown, Play, User, Check } from 'lucide-svelte';
-
-  interface InstalledVersion {
-    id: string;
-    type: string;
-  }
-
-  let isVersionDropdownOpen = $state(false);
-  let dropdownRef: HTMLDivElement;
-  let installedVersions = $state<InstalledVersion[]>([]);
-  let isLoadingVersions = $state(true);
-  let downloadCompleteUnlisten: UnlistenFn | null = null;
-  let versionDeletedUnlisten: UnlistenFn | null = null;
-
-  // Load installed versions on mount
-  $effect(() => {
-    loadInstalledVersions();
-    setupEventListeners();
-    return () => {
-      if (downloadCompleteUnlisten) {
-        downloadCompleteUnlisten();
-      }
-      if (versionDeletedUnlisten) {
-        versionDeletedUnlisten();
-      }
-    };
-  });
-
-  async function setupEventListeners() {
-    // Refresh list when a download completes
-    downloadCompleteUnlisten = await listen("download-complete", () => {
-      loadInstalledVersions();
-    });
-    // Refresh list when a version is deleted
-    versionDeletedUnlisten = await listen("version-deleted", () => {
-      loadInstalledVersions();
-    });
-  }
-
-  async function loadInstalledVersions() {
-    if (!instancesState.activeInstanceId) {
-      installedVersions = [];
-      isLoadingVersions = false;
-      return;
-    }
-    isLoadingVersions = true;
-    try {
-      installedVersions = await invoke<InstalledVersion[]>("list_installed_versions", {
-        instanceId: instancesState.activeInstanceId,
-      });
-      // If no version is selected but we have installed versions, select the first one
-      if (!gameState.selectedVersion && installedVersions.length > 0) {
-        gameState.selectedVersion = installedVersions[0].id;
-      }
-    } catch (e) {
-      console.error("Failed to load installed versions:", e);
-    } finally {
-      isLoadingVersions = false;
-    }
-  }
-
-  let versionOptions = $derived(
-    isLoadingVersions 
-      ? [{ id: "loading", type: "loading", label: "Loading..." }]
-      : installedVersions.length === 0
-        ? [{ id: "empty", type: "empty", label: "No versions installed" }]
-        : installedVersions.map(v => ({
-            ...v,
-            label: `${v.id}${v.type !== 'release' ? ` (${v.type})` : ''}`
-          }))
-  );
-
-  function selectVersion(id: string) {
-    if (id !== "loading" && id !== "empty") {
-      gameState.selectedVersion = id;
-      isVersionDropdownOpen = false;
-    }
-  }
-
-  function handleClickOutside(e: MouseEvent) {
-    if (dropdownRef && !dropdownRef.contains(e.target as Node)) {
-      isVersionDropdownOpen = false;
-    }
-  }
-
-  $effect(() => {
-    if (isVersionDropdownOpen) {
-      document.addEventListener('click', handleClickOutside);
-      return () => document.removeEventListener('click', handleClickOutside);
-    }
-  });
-
-  function getVersionTypeColor(type: string) {
-    switch (type) {
-      case 'fabric': return 'text-indigo-400';
-      case 'forge': return 'text-orange-400';
-      case 'snapshot': return 'text-amber-400';
-      case 'modpack': return 'text-purple-400';
-      default: return 'text-emerald-400';
-    }
-  }
-</script>
-
-<div
-  class="h-20 bg-white/80 dark:bg-[#09090b]/90 border-t dark:border-white/10 border-black/5 flex items-center px-8 justify-between z-20 backdrop-blur-md"
->
-  <!-- Account Area -->
-  <div class="flex items-center gap-6">
-    <div
-      class="group flex items-center gap-4 cursor-pointer"
-      onclick={() => authState.openLoginModal()}
-      role="button"
-      tabindex="0"
-      onkeydown={(e) => e.key === "Enter" && authState.openLoginModal()}
-    >
-      <div
-        class="w-10 h-10 rounded-sm bg-zinc-100 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 flex items-center justify-center overflow-hidden transition-all group-hover:border-zinc-400 dark:group-hover:border-zinc-500"
-      >
-        {#if authState.currentAccount}
-          <img
-            src={`https://minotar.net/avatar/${authState.currentAccount.username}/48`}
-            alt={authState.currentAccount.username}
-            class="w-full h-full"
-          />
-        {:else}
-          <User size={20} class="text-zinc-400" />
-        {/if}
-      </div>
-      <div>
-        <div class="font-bold dark:text-white text-gray-900 text-sm group-hover:text-black dark:group-hover:text-zinc-200 transition-colors">
-          {authState.currentAccount ? authState.currentAccount.username : "Login Account"}
-        </div>
-        <div class="text-[10px] uppercase tracking-wider dark:text-zinc-500 text-gray-500 flex items-center gap-2">
-          {#if authState.currentAccount}
-            {#if authState.currentAccount.type === "Microsoft"}
-              {#if authState.currentAccount.expires_at && authState.currentAccount.expires_at * 1000 < Date.now()}
-                <span class="w-1.5 h-1.5 rounded-full bg-red-500"></span>
-                <span class="text-red-400">Expired</span>
-              {:else}
-                <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
-                Online
-              {/if}
-            {:else}
-              <span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>
-              Offline
-            {/if}
-          {:else}
-            <span class="w-1.5 h-1.5 rounded-full bg-zinc-400"></span>
-            Guest
-          {/if}
-        </div>
-      </div>
-    </div>
-    
-    <div class="h-8 w-px dark:bg-white/10 bg-black/10"></div>
-    
-    <!-- Console Toggle -->
-    <button
-      class="text-xs font-mono dark:text-zinc-500 text-gray-500 dark:hover:text-white hover:text-black transition-colors flex items-center gap-2 px-2 py-1 rounded-sm hover:bg-black/5 dark:hover:bg-white/5"
-      onclick={() => uiState.toggleConsole()}
-    >
-      <Terminal size={14} />
-      {uiState.showConsole ? "HIDE LOGS" : "SHOW LOGS"}
-    </button>
-  </div>
-
-  <!-- Action Area -->
-  <div class="flex items-center gap-4">
-    <div class="flex flex-col items-end mr-2">
-      <!-- Custom Version Dropdown -->
-      <div class="relative" bind:this={dropdownRef}>
-        <button
-            type="button"
-            onclick={() => isVersionDropdownOpen = !isVersionDropdownOpen}
-            disabled={installedVersions.length === 0 && !isLoadingVersions}
-            class="flex items-center justify-between gap-2 w-56 px-4 py-2.5 text-left
-                   dark:bg-zinc-900 bg-zinc-50 border dark:border-zinc-700 border-zinc-300 rounded-md 
-                   text-sm font-mono dark:text-white text-gray-900
-                   dark:hover:border-zinc-600 hover:border-zinc-400 
-                   focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500/30
-                   transition-colors cursor-pointer outline-none
-                   disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-          <span class="truncate">
-            {#if isLoadingVersions}
-              Loading...
-            {:else if installedVersions.length === 0}
-              No versions installed
-            {:else}
-              {gameState.selectedVersion || "Select version"}
-            {/if}
-          </span>
-          <ChevronDown 
-            size={14} 
-            class="shrink-0 dark:text-zinc-500 text-zinc-400 transition-transform duration-200 {isVersionDropdownOpen ? 'rotate-180' : ''}" 
-          />
-        </button>
-
-        {#if isVersionDropdownOpen && installedVersions.length > 0}
-          <div 
-            class="absolute z-50 w-full mt-1 py-1 dark:bg-zinc-900 bg-white border dark:border-zinc-700 border-zinc-300 rounded-md shadow-xl
-                   max-h-72 overflow-y-auto animate-in fade-in slide-in-from-top-1 duration-150 bottom-full mb-1 right-0"
-          >
-            {#each versionOptions as version}
-              <button
-                type="button"
-                onclick={() => selectVersion(version.id)}
-                disabled={version.id === "loading" || version.id === "empty"}
-                class="w-full flex items-center justify-between px-3 py-2 text-sm font-mono text-left
-                       transition-colors outline-none
-                       {version.id === gameState.selectedVersion 
-                         ? 'bg-indigo-600 text-white' 
-                         : 'dark:text-zinc-300 text-gray-700 dark:hover:bg-zinc-800 hover:bg-zinc-100'}
-                       {version.id === 'loading' || version.id === 'empty' ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}"
-              >
-                <span class="truncate flex items-center gap-2">
-                  {version.id}
-                  {#if version.type && version.type !== 'release' && version.type !== 'loading' && version.type !== 'empty'}
-                    <span class="text-[10px] uppercase {version.id === gameState.selectedVersion ? 'text-white/70' : getVersionTypeColor(version.type)}">
-                      {version.type}
-                    </span>
-                  {/if}
-                </span>
-                {#if version.id === gameState.selectedVersion}
-                  <Check size={14} class="shrink-0 ml-2" />
-                {/if}
-              </button>
-            {/each}
-          </div>
-        {/if}
-      </div>
-    </div>
-
-    <button
-      onclick={() => gameState.startGame()}
-      disabled={installedVersions.length === 0 || !gameState.selectedVersion}
-      class="bg-emerald-600 hover:bg-emerald-500 disabled:opacity-50 disabled:cursor-not-allowed text-white h-14 px-10 rounded-sm transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] shadow-lg shadow-emerald-500/20 flex items-center gap-3 font-bold text-lg tracking-widest uppercase"
-    >
-      <Play size={24} fill="currentColor" />
-      <span>Launch</span>
-    </button>
-  </div>
-</div>
diff --git a/ui/src/components/ConfigEditorModal.svelte b/ui/src/components/ConfigEditorModal.svelte
deleted file mode 100644
index dd866ee..0000000
--- a/ui/src/components/ConfigEditorModal.svelte
+++ /dev/null
@@ -1,369 +0,0 @@
-<script lang="ts">
-  import { settingsState } from "../stores/settings.svelte";
-  import { Save, X, FileJson, AlertCircle, Undo, Redo, Settings } from "lucide-svelte";
-  import Prism from 'prismjs';
-  import 'prismjs/components/prism-json';
-  import 'prismjs/themes/prism-tomorrow.css';
-
-  let content = $state(settingsState.rawConfigContent);
-  let isSaving = $state(false);
-  let localError = $state("");
-  
-  let textareaRef: HTMLTextAreaElement | undefined = $state();
-  let preRef: HTMLPreElement | undefined = $state();
-  let lineNumbersRef: HTMLDivElement | undefined = $state();
-
-  // Textarea attributes that TypeScript doesn't recognize but are valid HTML
-  const textareaAttrs = {
-    autocorrect: "off",
-    autocapitalize: "off"
-  } as Record<string, string>;
-
-  // History State
-  let history = $state([settingsState.rawConfigContent]);
-  let historyIndex = $state(0);
-  let debounceTimer: ReturnType<typeof setTimeout> | undefined;
-
-  // Editor Settings
-  let showLineNumbers = $state(localStorage.getItem('editor_showLineNumbers') !== 'false');
-  let showStatusBar = $state(localStorage.getItem('editor_showStatusBar') !== 'false');
-  let showSettings = $state(false);
-
-  // Cursor Status
-  let cursorLine = $state(1);
-  let cursorCol = $state(1);
-  
-  let lines = $derived(content.split('\n'));
-
-  $effect(() => {
-     localStorage.setItem('editor_showLineNumbers', String(showLineNumbers));
-     localStorage.setItem('editor_showStatusBar', String(showStatusBar));
-  });
-
-  // Cleanup timer on destroy
-  $effect(() => {
-    return () => {
-        if (debounceTimer) clearTimeout(debounceTimer);
-    };
-  });
-
-  // Initial validation
-  $effect(() => {
-    validate(content);
-  });
-
-  function validate(text: string) {
-    try {
-        JSON.parse(text);
-        localError = "";
-    } catch (e: any) {
-        localError = e.message;
-    }
-  }
-
-  function pushHistory(newContent: string, immediate = false) {
-      if (debounceTimer) clearTimeout(debounceTimer);
-      
-      const commit = () => {
-          if (newContent === history[historyIndex]) return;
-          const next = history.slice(0, historyIndex + 1);
-          next.push(newContent);
-          history = next;
-          historyIndex = next.length - 1;
-      };
-
-      if (immediate) {
-          commit();
-      } else {
-          debounceTimer = setTimeout(commit, 500);
-      }
-  }
-
-  function handleUndo() {
-      if (historyIndex > 0) {
-          historyIndex--;
-          content = history[historyIndex];
-          validate(content);
-      }
-  }
-
-  function handleRedo() {
-      if (historyIndex < history.length - 1) {
-          historyIndex++;
-          content = history[historyIndex];
-          validate(content);
-      }
-  }
-
-  function updateCursor() {
-      if (!textareaRef) return;
-      const pos = textareaRef.selectionStart;
-      const text = textareaRef.value.substring(0, pos);
-      const lines = text.split('\n');
-      cursorLine = lines.length;
-      cursorCol = lines[lines.length - 1].length + 1;
-  }
-
-  function handleInput(e: Event) {
-      const target = e.target as HTMLTextAreaElement;
-      content = target.value;
-      validate(content);
-      pushHistory(content);
-      updateCursor();
-  }
-
-  function handleScroll() {
-      if (textareaRef) {
-          if (preRef) {
-              preRef.scrollTop = textareaRef.scrollTop;
-              preRef.scrollLeft = textareaRef.scrollLeft;
-          }
-          if (lineNumbersRef) {
-              lineNumbersRef.scrollTop = textareaRef.scrollTop;
-          }
-      }
-  }
-
-  let highlightedCode = $derived(
-      Prism.highlight(content, Prism.languages.json, 'json') + '\n'
-  );
-
-  async function handleSave(close = false) {
-    if (localError) return;
-    isSaving = true;
-    await settingsState.saveRawConfig(content, close);
-    isSaving = false;
-  }
-
-  function handleKeydown(e: KeyboardEvent) {
-    // Save
-    if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
-      e.preventDefault();
-      handleSave(false); // Keep open on shortcut save
-    } 
-    // Undo
-    else if (e.key === 'z' && (e.ctrlKey || e.metaKey) && !e.shiftKey) {
-        e.preventDefault();
-        handleUndo();
-    }
-    // Redo (Ctrl+Shift+Z or Ctrl+Y)
-    else if (
-        (e.key === 'z' && (e.ctrlKey || e.metaKey) && e.shiftKey) ||
-        (e.key === 'y' && (e.ctrlKey || e.metaKey))
-    ) {
-        e.preventDefault();
-        handleRedo();
-    }
-    // Close
-    else if (e.key === 'Escape') {
-      settingsState.closeConfigEditor();
-    } 
-    // Tab
-    else if (e.key === 'Tab') {
-      e.preventDefault();
-      const target = e.target as HTMLTextAreaElement;
-      const start = target.selectionStart;
-      const end = target.selectionEnd;
-      
-      pushHistory(content, true);
-
-      const newContent = content.substring(0, start) + "  " + content.substring(end);
-      content = newContent;
-      
-      pushHistory(content, true);
-
-      setTimeout(() => {
-          target.selectionStart = target.selectionEnd = start + 2;
-          updateCursor();
-      }, 0);
-      validate(content);
-    }
-  }
-</script>
-
-<div class="fixed inset-0 z-[100] flex items-center justify-center backdrop-blur-sm bg-black/70 animate-in fade-in duration-200">
-  <div 
-    class="bg-[#1d1f21] rounded-xl border border-zinc-700 shadow-2xl w-[900px] max-w-[95vw] h-[85vh] flex flex-col overflow-hidden"
-    role="dialog"
-    aria-modal="true"
-  >
-    <!-- Header -->
-    <div class="flex items-center justify-between p-4 border-b border-zinc-700 bg-[#1d1f21] z-20 relative">
-      <div class="flex items-center gap-3">
-        <div class="p-2 bg-indigo-500/20 rounded-lg text-indigo-400">
-          <FileJson size={20} />
-        </div>
-        <div class="flex flex-col">
-            <h3 class="text-lg font-bold text-white leading-none">Configuration Editor</h3>
-            <span class="text-[10px] text-zinc-500 font-mono mt-1 break-all">{settingsState.configFilePath}</span>
-        </div>
-      </div>
-      <div class="flex items-center gap-2">
-          <!-- Undo/Redo Buttons -->
-          <div class="flex items-center bg-zinc-800 rounded-lg p-0.5 mr-2 border border-zinc-700">
-              <button 
-                onclick={handleUndo} 
-                disabled={historyIndex === 0}
-                class="p-1.5 text-zinc-400 hover:text-white hover:bg-zinc-700 rounded disabled:opacity-30 disabled:hover:bg-transparent transition-colors"
-                title="Undo (Ctrl+Z)"
-              >
-                  <Undo size={16} />
-              </button>
-              <button 
-                onclick={handleRedo} 
-                disabled={historyIndex === history.length - 1}
-                class="p-1.5 text-zinc-400 hover:text-white hover:bg-zinc-700 rounded disabled:opacity-30 disabled:hover:bg-transparent transition-colors"
-                title="Redo (Ctrl+Y)"
-              >
-                  <Redo size={16} />
-              </button>
-          </div>
-
-          <!-- Settings Toggle -->
-          <div class="relative">
-              <button 
-                onclick={() => showSettings = !showSettings}
-                class="text-zinc-400 hover:text-white transition-colors p-2 hover:bg-white/5 rounded-lg {showSettings ? 'bg-white/10 text-white' : ''}"
-                title="Editor Settings"
-              >
-                <Settings size={20} />
-              </button>
-              
-              {#if showSettings}
-                <div class="absolute right-0 top-full mt-2 w-48 bg-zinc-800 border border-zinc-700 rounded-lg shadow-xl p-2 z-50 flex flex-col gap-1">
-                    <label class="flex items-center gap-2 p-2 hover:bg-white/5 rounded cursor-pointer">
-                        <input type="checkbox" bind:checked={showLineNumbers} class="rounded border-zinc-600 bg-zinc-900 text-indigo-500 focus:ring-indigo-500/50" />
-                        <span class="text-sm text-zinc-300">Line Numbers</span>
-                    </label>
-                    <label class="flex items-center gap-2 p-2 hover:bg-white/5 rounded cursor-pointer">
-                        <input type="checkbox" bind:checked={showStatusBar} class="rounded border-zinc-600 bg-zinc-900 text-indigo-500 focus:ring-indigo-500/50" />
-                        <span class="text-sm text-zinc-300">Cursor Status</span>
-                    </label>
-                </div>
-              {/if}
-          </div>
-
-          <button
-            onclick={() => settingsState.closeConfigEditor()}
-            class="text-zinc-400 hover:text-white transition-colors p-2 hover:bg-white/5 rounded-lg"
-            title="Close (Esc)"
-          >
-            <X size={20} />
-          </button>
-      </div>
-    </div>
-
-    <!-- Error Banner -->
-    {#if localError || settingsState.configEditorError}
-        <div class="bg-red-500/10 border-b border-red-500/20 p-3 flex items-start gap-3 animate-in slide-in-from-top-2 z-10 relative">
-            <AlertCircle size={16} class="text-red-400 mt-0.5 shrink-0" />
-            <p class="text-xs text-red-300 font-mono whitespace-pre-wrap">{localError || settingsState.configEditorError}</p>
-        </div>
-    {/if}
-
-    <!-- Editor Body (Flex row for line numbers + code) -->
-    <div class="flex-1 flex overflow-hidden relative bg-[#1d1f21]">
-        <!-- Line Numbers -->
-        {#if showLineNumbers}
-            <div 
-                bind:this={lineNumbersRef}
-                class="pt-4 pb-4 pr-3 pl-2 text-right text-zinc-600 bg-[#1d1f21] border-r border-zinc-700/50 font-mono select-none overflow-hidden min-w-[3rem]"
-                aria-hidden="true"
-            >
-                {#each lines as _, i}
-                    <div class="leading-[20px] text-[13px]">{i + 1}</div>
-                {/each}
-            </div>
-        {/if}
-
-        <!-- Code Area -->
-        <div class="flex-1 relative overflow-hidden group">
-            <!-- Highlighted Code (Background) -->
-            <pre 
-                bind:this={preRef}
-                aria-hidden="true"
-                class="absolute inset-0 w-full h-full p-4 m-0 bg-transparent pointer-events-none overflow-hidden whitespace-pre font-mono text-sm leading-relaxed"
-            ><code class="language-json">{@html highlightedCode}</code></pre>
-
-            <!-- Textarea (Foreground) -->
-            <textarea
-                bind:this={textareaRef}
-                bind:value={content}
-                oninput={handleInput}
-                onkeydown={handleKeydown}
-                onscroll={handleScroll}
-                onmouseup={updateCursor}
-                onkeyup={updateCursor}
-                onclick={() => showSettings = false}
-                class="absolute inset-0 w-full h-full p-4 bg-transparent text-transparent caret-white font-mono text-sm leading-relaxed resize-none focus:outline-none whitespace-pre overflow-auto z-10 selection:bg-indigo-500/30"
-                spellcheck="false"
-                {...textareaAttrs}
-            ></textarea>
-        </div>
-    </div>
-
-    <!-- Footer -->
-    <div class="p-3 border-t border-zinc-700 bg-[#1d1f21] flex justify-between items-center z-20 relative">
-      <div class="text-xs text-zinc-500 flex gap-4 items-center">
-        {#if showStatusBar}
-            <div class="flex gap-3 font-mono border-r border-zinc-700 pr-4 mr-1">
-                <span>Ln {cursorLine}</span>
-                <span>Col {cursorCol}</span>
-            </div>
-        {/if}
-        <span class="hidden sm:inline"><span class="bg-white/10 px-1.5 py-0.5 rounded text-zinc-300">Ctrl+S</span> save</span>
-      </div>
-      <div class="flex gap-3">
-        <button
-          onclick={() => settingsState.closeConfigEditor()}
-          class="px-4 py-2 bg-zinc-800 hover:bg-zinc-700 text-white rounded-lg text-sm font-medium transition-colors"
-        >
-          Cancel
-        </button>
-        <button
-          onclick={() => handleSave(false)}
-          disabled={isSaving || !!localError}
-          class="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
-          title={localError ? "Fix errors before saving" : "Save changes"}
-        >
-          {#if isSaving}
-            <div class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
-            Saving...
-          {:else}
-            <Save size={16} />
-            Save
-          {/if}
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<style>
-  /* Ensure exact font match */
-  pre, textarea {
-      font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
-      font-size: 13px !important;
-      line-height: 20px !important;
-      letter-spacing: 0px !important;
-      tab-size: 2;
-  }
-  
-  /* Hide scrollbar for pre but keep it functional for textarea */
-  pre::-webkit-scrollbar {
-    display: none;
-  }
-
-  /* Override Prism background and font weights for alignment */
-  :global(pre[class*="language-"]), :global(code[class*="language-"]) {
-      background: transparent !important;
-      text-shadow: none !important;
-      box-shadow: none !important;
-  }
-
-  /* CRITICAL: Force normal weight to match textarea */
-  :global(.token) {
-      font-weight: normal !important;
-      font-style: normal !important;
-  }
-</style>
diff --git a/ui/src/components/CustomSelect.svelte b/ui/src/components/CustomSelect.svelte
deleted file mode 100644
index 0767471..0000000
--- a/ui/src/components/CustomSelect.svelte
+++ /dev/null
@@ -1,173 +0,0 @@
-<script lang="ts">
-  import { ChevronDown, Check } from 'lucide-svelte';
-
-  interface Option {
-    value: string;
-    label: string;
-    disabled?: boolean;
-  }
-
-  interface Props {
-    options: Option[];
-    value: string;
-    placeholder?: string;
-    disabled?: boolean;
-    class?: string;
-    allowCustom?: boolean; // New prop to allow custom input
-    onchange?: (value: string) => void;
-  }
-
-  let { 
-    options, 
-    value = $bindable(), 
-    placeholder = "Select...", 
-    disabled = false,
-    class: className = "",
-    allowCustom = false,
-    onchange
-  }: Props = $props();
-
-  let isOpen = $state(false);
-  let containerRef: HTMLDivElement;
-  let customInput = $state(""); // State for custom input
-
-  let selectedOption = $derived(options.find(o => o.value === value));
-  // Display label: if option exists use its label, otherwise if custom is allowed use raw value, else placeholder
-  let displayLabel = $derived(selectedOption ? selectedOption.label : (allowCustom && value ? value : placeholder));
-
-  function toggle() {
-    if (!disabled) {
-      isOpen = !isOpen;
-      // When opening, if current value is custom (not in options), pre-fill input
-      if (isOpen && allowCustom && !selectedOption) {
-          customInput = value;
-      }
-    }
-  }
-
-  function select(option: Option) {
-    if (option.disabled) return;
-    value = option.value;
-    isOpen = false;
-    onchange?.(option.value);
-  }
-
-  function handleCustomSubmit() {
-      if (!customInput.trim()) return;
-      value = customInput.trim();
-      isOpen = false;
-      onchange?.(value);
-  }
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (disabled) return;
-    
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      toggle();
-    } else if (e.key === 'Escape') {
-      isOpen = false;
-    } else if (e.key === 'ArrowDown' && isOpen) {
-      e.preventDefault();
-      const currentIndex = options.findIndex(o => o.value === value);
-      const nextIndex = Math.min(currentIndex + 1, options.length - 1);
-      if (!options[nextIndex].disabled) {
-        value = options[nextIndex].value;
-      }
-    } else if (e.key === 'ArrowUp' && isOpen) {
-      e.preventDefault();
-      const currentIndex = options.findIndex(o => o.value === value);
-      const prevIndex = Math.max(currentIndex - 1, 0);
-      if (!options[prevIndex].disabled) {
-        value = options[prevIndex].value;
-      }
-    }
-  }
-
-  function handleClickOutside(e: MouseEvent) {
-    if (containerRef && !containerRef.contains(e.target as Node)) {
-      isOpen = false;
-    }
-  }
-
-  $effect(() => {
-    if (isOpen) {
-      document.addEventListener('click', handleClickOutside);
-      return () => document.removeEventListener('click', handleClickOutside);
-    }
-  });
-</script>
-
-<div 
-  bind:this={containerRef}
-  class="relative {className}"
->
-  <!-- Trigger Button -->
-  <button
-    type="button"
-    onclick={toggle}
-    onkeydown={handleKeydown}
-    {disabled}
-    class="w-full flex items-center justify-between gap-2 px-3 py-2 pr-8 text-left
-           bg-zinc-900 border border-zinc-700 rounded-md text-sm text-zinc-200
-           hover:border-zinc-600 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500/30
-           transition-colors cursor-pointer outline-none
-           disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:border-zinc-700"
-  >
-    <span class="truncate {(!selectedOption && !value) ? 'text-zinc-500' : ''}">
-      {displayLabel}
-    </span>
-    <ChevronDown 
-      size={14} 
-      class="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-500 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" 
-    />
-  </button>
-
-  <!-- Dropdown Menu -->
-  {#if isOpen}
-    <div 
-      class="absolute z-50 w-full mt-1 py-1 bg-zinc-900 border border-zinc-700 rounded-md shadow-xl
-             max-h-60 overflow-y-auto animate-in fade-in slide-in-from-top-1 duration-150 flex flex-col"
-    >
-      {#if allowCustom}
-        <div class="px-2 py-2 border-b border-zinc-700/50 mb-1">
-            <div class="flex gap-2">
-                <input 
-                    type="text" 
-                    bind:value={customInput}
-                    placeholder="Custom value..."
-                    class="flex-1 bg-black/30 border border-zinc-700 rounded px-2 py-1 text-xs text-white focus:border-indigo-500 outline-none"
-                    onkeydown={(e) => e.key === 'Enter' && handleCustomSubmit()}
-                    onclick={(e) => e.stopPropagation()} 
-                />
-                <button 
-                    onclick={(e) => { e.stopPropagation(); handleCustomSubmit(); }}
-                    class="px-2 py-1 bg-indigo-600 hover:bg-indigo-500 text-white rounded text-xs transition-colors"
-                >
-                    Set
-                </button>
-            </div>
-        </div>
-      {/if}
-
-      {#each options as option}
-        <button
-          type="button"
-          onclick={() => select(option)}
-          disabled={option.disabled}
-          class="w-full flex items-center justify-between px-3 py-2 text-sm text-left
-                 transition-colors outline-none
-                 {option.value === value 
-                   ? 'bg-indigo-600 text-white' 
-                   : 'text-zinc-300 hover:bg-zinc-800'}
-                 {option.disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}"
-        >
-          <span class="truncate">{option.label}</span>
-          {#if option.value === value}
-            <Check size={14} class="shrink-0 ml-2" />
-          {/if}
-        </button>
-      {/each}
-    </div>
-  {/if}
-</div>
diff --git a/ui/src/components/HomeView.svelte b/ui/src/components/HomeView.svelte
deleted file mode 100644
index 573d9da..0000000
--- a/ui/src/components/HomeView.svelte
+++ /dev/null
@@ -1,271 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import { gameState } from '../stores/game.svelte';
-  import { releasesState } from '../stores/releases.svelte';
-  import { Calendar, ExternalLink } from 'lucide-svelte';
-  import { getSaturnEffect } from './ParticleBackground.svelte';
-
-  type Props = {
-    mouseX: number;
-    mouseY: number;
-  };
-  let { mouseX = 0, mouseY = 0 }: Props = $props();
-
-  // Saturn effect mouse interaction handlers
-  function handleSaturnMouseDown(e: MouseEvent) {
-    const effect = getSaturnEffect();
-    if (effect) {
-      effect.handleMouseDown(e.clientX);
-    }
-  }
-
-  function handleSaturnMouseMove(e: MouseEvent) {
-    const effect = getSaturnEffect();
-    if (effect) {
-      effect.handleMouseMove(e.clientX);
-    }
-  }
-
-  function handleSaturnMouseUp() {
-    const effect = getSaturnEffect();
-    if (effect) {
-      effect.handleMouseUp();
-    }
-  }
-
-  function handleSaturnMouseLeave() {
-    const effect = getSaturnEffect();
-    if (effect) {
-      effect.handleMouseUp();
-    }
-  }
-
-  function handleSaturnTouchStart(e: TouchEvent) {
-    if (e.touches.length === 1) {
-      const effect = getSaturnEffect();
-      if (effect) {
-        effect.handleTouchStart(e.touches[0].clientX);
-      }
-    }
-  }
-
-  function handleSaturnTouchMove(e: TouchEvent) {
-    if (e.touches.length === 1) {
-      const effect = getSaturnEffect();
-      if (effect) {
-        effect.handleTouchMove(e.touches[0].clientX);
-      }
-    }
-  }
-
-  function handleSaturnTouchEnd() {
-    const effect = getSaturnEffect();
-    if (effect) {
-      effect.handleTouchEnd();
-    }
-  }
-
-  onMount(() => {
-    releasesState.loadReleases();
-  });
-
-  function formatDate(dateString: string) {
-    return new Date(dateString).toLocaleDateString(undefined, {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric'
-    });
-  }
-  
-  function escapeHtml(unsafe: string) {
-      return unsafe
-          .replace(/&/g, "&amp;")
-          .replace(/</g, "&lt;")
-          .replace(/>/g, "&gt;")
-          .replace(/"/g, "&quot;")
-          .replace(/'/g, "&#039;");
-  }
-
-  // Enhanced markdown parser with Emoji and GitHub specific features
-  function formatBody(body: string) {
-      if (!body) return '';
-      
-      // Escape HTML first to prevent XSS
-      let processed = escapeHtml(body);
-      
-      // Emoji map (common GitHub emojis)
-      const emojiMap: Record<string, string> = {
-          ':tada:': '🎉', ':sparkles:': '✨', ':bug:': '🐛', ':memo:': '📝',
-          ':rocket:': '🚀', ':white_check_mark:': '✅', ':construction:': '🚧',
-          ':recycle:': '♻️', ':wrench:': '🔧', ':package:': '📦',
-          ':arrow_up:': '⬆️', ':arrow_down:': '⬇️', ':warning:': '⚠️',
-          ':fire:': '🔥', ':heart:': '❤️', ':star:': '⭐', ':zap:': '⚡',
-          ':art:': '🎨', ':lipstick:': '💄', ':globe_with_meridians:': '🌐'
-      };
-
-      // Replace emojis
-      processed = processed.replace(/:[a-z0-9_]+:/g, (match) => emojiMap[match] || match);
-
-      // GitHub commit hash linking (simple version for 7-40 hex chars inside backticks)
-      processed = processed.replace(/`([0-9a-f]{7,40})`/g, (match, hash) => {
-          return `<a href="https://github.com/HydroRoll-Team/DropOut/commit/${hash}" target="_blank" class="text-emerald-500 hover:underline font-mono bg-emerald-500/10 px-1 rounded text-[10px] py-0.5 transition-colors border border-emerald-500/20 hover:border-emerald-500/50">${hash.substring(0, 7)}</a>`;
-      });
-      
-      // Auto-link users (@user)
-      processed = processed.replace(/@([a-zA-Z0-9-]+)/g, '<a href="https://github.com/$1" target="_blank" class="text-zinc-300 hover:text-white hover:underline font-medium">@$1</a>');
-
-      return processed.split('\n').map(line => {
-          line = line.trim();
-          
-          // Formatting helper
-          const formatLine = (text: string) => text
-              .replace(/\*\*(.*?)\*\*/g, '<strong class="text-zinc-200">$1</strong>')
-              .replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, '<em class="text-zinc-400 italic">$1</em>')
-              .replace(/`([^`]+)`/g, '<code class="bg-zinc-800 px-1 py-0.5 rounded text-xs text-zinc-300 font-mono border border-white/5 break-all whitespace-normal">$1</code>')
-              .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank" class="text-indigo-400 hover:text-indigo-300 hover:underline decoration-indigo-400/30 break-all">$1</a>');
-
-          // Lists
-          if (line.startsWith('- ') || line.startsWith('* ')) {
-              return `<li class="ml-4 list-disc marker:text-zinc-600 mb-1 pl-1 text-zinc-400">${formatLine(line.substring(2))}</li>`;
-          }
-          
-          // Headers
-          if (line.startsWith('##')) {
-               return `<h3 class="text-sm font-bold mt-6 mb-3 text-zinc-100 flex items-center gap-2 border-b border-white/5 pb-2 uppercase tracking-wide">${line.replace(/^#+\s+/, '')}</h3>`;
-          }
-          if (line.startsWith('#')) {
-               return `<h3 class="text-base font-bold mt-6 mb-3 text-white">${line.replace(/^#+\s+/, '')}</h3>`;
-          }
-          
-          // Blockquotes
-          if (line.startsWith('> ')) {
-              return `<blockquote class="border-l-2 border-zinc-700 pl-4 py-1 my-2 text-zinc-500 italic bg-white/5 rounded-r-sm">${formatLine(line.substring(2))}</blockquote>`;
-          }
-          
-          // Empty lines
-          if (line === '') return '<div class="h-2"></div>';
-          
-          // Paragraphs
-          return `<p class="mb-1.5 leading-relaxed">${formatLine(line)}</p>`;
-      }).join('');
-  }
-</script>
-
-<div class="absolute inset-0 z-0 overflow-hidden pointer-events-none">
-  <!-- Fixed Background -->
-  <div class="absolute inset-0 bg-gradient-to-t from-[#09090b] via-[#09090b]/60 to-transparent"></div>
-</div>
-
-<!-- Scrollable Container -->
-<div class="relative z-10 h-full {releasesState.isLoading ? 'overflow-hidden' : 'overflow-y-auto custom-scrollbar scroll-smooth'}">
-  
-  <!-- Hero Section (Full Height) - Interactive area for Saturn rotation -->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div 
-    class="min-h-full flex flex-col justify-end p-12 pb-32 cursor-grab active:cursor-grabbing select-none"
-    onmousedown={handleSaturnMouseDown}
-    onmousemove={handleSaturnMouseMove}
-    onmouseup={handleSaturnMouseUp}
-    onmouseleave={handleSaturnMouseLeave}
-    ontouchstart={handleSaturnTouchStart}
-    ontouchmove={handleSaturnTouchMove}
-    ontouchend={handleSaturnTouchEnd}
-  >
-     <!-- 3D Floating Hero Text -->
-      <div 
-        class="transition-transform duration-200 ease-out origin-bottom-left"
-        style:transform={`perspective(1000px) rotateX(${mouseY * -1}deg) rotateY(${mouseX * 1}deg)`}
-      >
-        <div class="flex items-center gap-3 mb-6">
-           <div class="h-px w-12 bg-white/50"></div>
-           <span class="text-xs font-mono font-bold tracking-[0.2em] text-white/50 uppercase">Launcher Active</span>
-        </div>
-
-        <h1
-          class="text-8xl font-black tracking-tighter text-white mb-6 leading-none"
-        >
-          MINECRAFT
-        </h1>
-        
-        <div class="flex items-center gap-4">
-          <div 
-            class="bg-white/10 backdrop-blur-md border border-white/10 px-3 py-1 rounded-sm text-xs font-bold uppercase tracking-widest text-white shadow-sm"
-          >
-            Java Edition
-          </div>
-          <div class="h-4 w-px bg-white/20"></div>
-          <div class="text-xl font-light text-zinc-400">
-            Latest Release <span class="text-white font-medium">{gameState.latestRelease?.id || '...'}</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- Action Area -->
-      <div class="mt-8 flex gap-4">
-        <div class="text-zinc-500 text-sm font-mono">
-          > Ready to launch session.
-        </div>
-      </div>
-
-      <!-- Scroll Hint -->
-      {#if !releasesState.isLoading && releasesState.releases.length > 0}
-      <div class="absolute bottom-10 left-12 animate-bounce text-zinc-600 flex flex-col items-center gap-2 w-fit opacity-50 hover:opacity-100 transition-opacity">
-          <span class="text-[10px] font-mono uppercase tracking-widest">Scroll for Updates</span>
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 13l5 5 5-5M7 6l5 5 5-5"/></svg>
-      </div>
-      {/if}
-  </div>
-
-  <!-- Changelog / Updates Section -->
-  <div class="bg-[#09090b] relative z-20 px-12 pb-24 pt-12 border-t border-white/5 min-h-[50vh]">
-      <div class="max-w-4xl">
-          <h2 class="text-2xl font-bold text-white mb-10 flex items-center gap-3">
-              <span class="w-1.5 h-8 bg-emerald-500 rounded-sm"></span>
-              LATEST UPDATES
-          </h2>
-
-          {#if releasesState.isLoading}
-            <div class="flex flex-col gap-8">
-                {#each Array(3) as _}
-                    <div class="h-48 bg-white/5 rounded-sm animate-pulse border border-white/5"></div>
-                {/each}
-            </div>
-          {:else if releasesState.error}
-             <div class="p-6 border border-red-500/20 bg-red-500/10 text-red-400 rounded-sm">
-                 Failed to load updates: {releasesState.error}
-             </div>
-          {:else if releasesState.releases.length === 0}
-             <div class="text-zinc-500 italic">No releases found.</div>
-          {:else}
-             <div class="space-y-12">
-                 {#each releasesState.releases as release}
-                    <div class="group relative pl-8 border-l border-white/10 pb-4 last:pb-0 last:border-l-0">
-                        <!-- Timeline Dot -->
-                        <div class="absolute -left-[5px] top-1.5 w-2.5 h-2.5 rounded-full bg-zinc-800 border border-zinc-600 group-hover:bg-emerald-500 group-hover:border-emerald-400 transition-colors"></div>
-                        
-                        <div class="flex items-baseline gap-4 mb-3">
-                             <h3 class="text-xl font-bold text-white group-hover:text-emerald-400 transition-colors">
-                                {release.name || release.tag_name}
-                             </h3>
-                             <div class="text-xs font-mono text-zinc-500 flex items-center gap-2">
-                                <Calendar size={12} />
-                                {formatDate(release.published_at)}
-                             </div>
-                        </div>
-
-                        <div class="bg-zinc-900/50 border border-white/5 hover:border-white/10 rounded-sm p-6 text-zinc-400 text-sm leading-relaxed transition-colors overflow-hidden">
-                            <div class="prose prose-invert prose-sm max-w-none prose-p:text-zinc-400 prose-headings:text-zinc-200 prose-ul:my-2 prose-li:my-0 break-words whitespace-normal">
-                                {@html formatBody(release.body)}
-                            </div>
-                        </div>
-                        
-                        <a href={release.html_url} target="_blank" class="inline-flex items-center gap-2 mt-3 text-[10px] font-bold uppercase tracking-wider text-zinc-600 hover:text-white transition-colors">
-                            View full changelog on GitHub <ExternalLink size={10} />
-                        </a>
-                    </div>
-                 {/each}
-             </div>
-          {/if}
-      </div>
-  </div>
-</div>
diff --git a/ui/src/components/InstanceCreationModal.svelte b/ui/src/components/InstanceCreationModal.svelte
deleted file mode 100644
index c54cb98..0000000
--- a/ui/src/components/InstanceCreationModal.svelte
+++ /dev/null
@@ -1,485 +0,0 @@
-<script lang="ts">
-  import { invoke } from "@tauri-apps/api/core";
-  import { X, ChevronLeft, ChevronRight, Loader2, Search } from "lucide-svelte";
-  import { instancesState } from "../stores/instances.svelte";
-  import { gameState } from "../stores/game.svelte";
-  import type { Version, Instance, FabricLoaderEntry, ForgeVersion } from "../types";
-
-  interface Props {
-    isOpen: boolean;
-    onClose: () => void;
-  }
-
-  let { isOpen, onClose }: Props = $props();
-
-  // Wizard steps: 1 = Name, 2 = Version, 3 = Mod Loader
-  let currentStep = $state(1);
-  let instanceName = $state("");
-  let selectedVersion = $state<Version | null>(null);
-  let modLoaderType = $state<"vanilla" | "fabric" | "forge">("vanilla");
-  let selectedFabricLoader = $state("");
-  let selectedForgeLoader = $state("");
-  let creating = $state(false);
-  let errorMessage = $state("");
-
-  // Mod loader lists
-  let fabricLoaders = $state<FabricLoaderEntry[]>([]);
-  let forgeVersions = $state<ForgeVersion[]>([]);
-  let loadingLoaders = $state(false);
-
-  // Version list filtering
-  let versionSearch = $state("");
-  let versionFilter = $state<"all" | "release" | "snapshot">("release");
-
-  // Filtered versions
-  let filteredVersions = $derived(() => {
-    let versions = gameState.versions || [];
-    
-    // Filter by type
-    if (versionFilter !== "all") {
-      versions = versions.filter((v) => v.type === versionFilter);
-    }
-
-    // Search filter
-    if (versionSearch) {
-      versions = versions.filter((v) =>
-        v.id.toLowerCase().includes(versionSearch.toLowerCase())
-      );
-    }
-
-    return versions;
-  });
-
-  // Fetch mod loaders when entering step 3
-  async function loadModLoaders() {
-    if (!selectedVersion) return;
-    
-    loadingLoaders = true;
-    try {
-      if (modLoaderType === "fabric") {
-        const loaders = await invoke<FabricLoaderEntry[]>("get_fabric_loaders_for_version", {
-          gameVersion: selectedVersion.id,
-        });
-        fabricLoaders = loaders;
-        if (loaders.length > 0) {
-          selectedFabricLoader = loaders[0].loader.version;
-        }
-      } else if (modLoaderType === "forge") {
-        const versions = await invoke<ForgeVersion[]>("get_forge_versions_for_game", {
-          gameVersion: selectedVersion.id,
-        });
-        forgeVersions = versions;
-        if (versions.length > 0) {
-          selectedForgeLoader = versions[0].version;
-        }
-      }
-    } catch (err) {
-      errorMessage = `Failed to load ${modLoaderType} versions: ${err}`;
-    } finally {
-      loadingLoaders = false;
-    }
-  }
-
-  // Watch for mod loader type changes and load loaders
-  $effect(() => {
-    if (currentStep === 3 && modLoaderType !== "vanilla") {
-      loadModLoaders();
-    }
-  });
-
-  // Reset modal state
-  function resetModal() {
-    currentStep = 1;
-    instanceName = "";
-    selectedVersion = null;
-    modLoaderType = "vanilla";
-    selectedFabricLoader = "";
-    selectedForgeLoader = "";
-    creating = false;
-    errorMessage = "";
-    versionSearch = "";
-    versionFilter = "release";
-  }
-
-  function handleClose() {
-    if (!creating) {
-      resetModal();
-      onClose();
-    }
-  }
-
-  function goToStep(step: number) {
-    errorMessage = "";
-    currentStep = step;
-  }
-
-  function validateStep1() {
-    if (!instanceName.trim()) {
-      errorMessage = "Please enter an instance name";
-      return false;
-    }
-    return true;
-  }
-
-  function validateStep2() {
-    if (!selectedVersion) {
-      errorMessage = "Please select a Minecraft version";
-      return false;
-    }
-    return true;
-  }
-
-  async function handleNext() {
-    errorMessage = "";
-    
-    if (currentStep === 1) {
-      if (validateStep1()) {
-        goToStep(2);
-      }
-    } else if (currentStep === 2) {
-      if (validateStep2()) {
-        goToStep(3);
-      }
-    }
-  }
-
-  async function handleCreate() {
-    if (!validateStep1() || !validateStep2()) return;
-
-    creating = true;
-    errorMessage = "";
-
-    try {
-      // Step 1: Create instance
-      const instance: Instance = await invoke("create_instance", {
-        name: instanceName.trim(),
-      });
-
-      // Step 2: Install vanilla version
-      await invoke("install_version", {
-        instanceId: instance.id,
-        versionId: selectedVersion!.id,
-      });
-
-      // Step 3: Install mod loader if selected
-      if (modLoaderType === "fabric" && selectedFabricLoader) {
-        await invoke("install_fabric", {
-          instanceId: instance.id,
-          gameVersion: selectedVersion!.id,
-          loaderVersion: selectedFabricLoader,
-        });
-      } else if (modLoaderType === "forge" && selectedForgeLoader) {
-        await invoke("install_forge", {
-          instanceId: instance.id,
-          gameVersion: selectedVersion!.id,
-          forgeVersion: selectedForgeLoader,
-        });
-      } else {
-        // Update instance with vanilla version_id
-        await invoke("update_instance", {
-          instance: { ...instance, version_id: selectedVersion!.id },
-        });
-      }
-
-      // Reload instances
-      await instancesState.loadInstances();
-
-      // Success! Close modal
-      resetModal();
-      onClose();
-    } catch (error) {
-      errorMessage = String(error);
-      creating = false;
-    }
-  }
-</script>
-
-{#if isOpen}
-  <div
-    class="fixed inset-0 z-[100] bg-black/80 backdrop-blur-sm flex items-center justify-center p-4"
-    role="dialog"
-    aria-modal="true"
-  >
-    <div
-      class="bg-zinc-900 border border-zinc-700 rounded-xl shadow-2xl w-full max-w-3xl max-h-[90vh] overflow-hidden flex flex-col"
-    >
-      <!-- Header -->
-      <div
-        class="flex items-center justify-between p-6 border-b border-zinc-700"
-      >
-        <div>
-          <h2 class="text-xl font-bold text-white">Create New Instance</h2>
-          <p class="text-sm text-zinc-400 mt-1">
-            Step {currentStep} of 3
-          </p>
-        </div>
-        <button
-          onclick={handleClose}
-          disabled={creating}
-          class="p-2 rounded-lg hover:bg-zinc-800 text-zinc-400 hover:text-white transition-colors disabled:opacity-50"
-        >
-          <X size={20} />
-        </button>
-      </div>
-
-      <!-- Progress indicator -->
-      <div class="flex gap-2 px-6 pt-4">
-        <div
-          class="flex-1 h-1 rounded-full transition-colors {currentStep >= 1
-            ? 'bg-indigo-500'
-            : 'bg-zinc-700'}"
-        ></div>
-        <div
-          class="flex-1 h-1 rounded-full transition-colors {currentStep >= 2
-            ? 'bg-indigo-500'
-            : 'bg-zinc-700'}"
-        ></div>
-        <div
-          class="flex-1 h-1 rounded-full transition-colors {currentStep >= 3
-            ? 'bg-indigo-500'
-            : 'bg-zinc-700'}"
-        ></div>
-      </div>
-
-      <!-- Content -->
-      <div class="flex-1 overflow-y-auto p-6">
-        {#if currentStep === 1}
-          <!-- Step 1: Name -->
-          <div class="space-y-4">
-            <div>
-              <label
-                for="instance-name"
-                class="block text-sm font-medium text-white/90 mb-2"
-                >Instance Name</label
-              >
-              <input
-                id="instance-name"
-                type="text"
-                bind:value={instanceName}
-                placeholder="My Minecraft Instance"
-                class="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
-                disabled={creating}
-              />
-            </div>
-            <p class="text-xs text-zinc-400">
-              Give your instance a memorable name
-            </p>
-          </div>
-        {:else if currentStep === 2}
-          <!-- Step 2: Version Selection -->
-          <div class="space-y-4">
-            <div class="flex gap-4">
-              <div class="flex-1 relative">
-                <Search
-                  size={16}
-                  class="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500"
-                />
-                <input
-                  type="text"
-                  bind:value={versionSearch}
-                  placeholder="Search versions..."
-                  class="w-full pl-10 pr-4 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
-                />
-              </div>
-              <div class="flex gap-2">
-                {#each [
-                  { value: "all", label: "All" },
-                  { value: "release", label: "Release" },
-                  { value: "snapshot", label: "Snapshot" },
-                ] as filter}
-                  <button
-                    onclick={() => {
-                      versionFilter = filter.value as "all" | "release" | "snapshot";
-                    }}
-                    class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {versionFilter ===
-                    filter.value
-                      ? 'bg-indigo-600 text-white'
-                      : 'bg-zinc-800 text-zinc-400 hover:text-white'}"
-                  >
-                    {filter.label}
-                  </button>
-                {/each}
-              </div>
-            </div>
-
-            <div class="max-h-96 overflow-y-auto space-y-2">
-              {#each filteredVersions() as version}
-                <button
-                  onclick={() => (selectedVersion = version)}
-                  class="w-full p-3 rounded-lg border transition-colors text-left {selectedVersion?.id ===
-                  version.id
-                    ? 'bg-indigo-600/20 border-indigo-500 text-white'
-                    : 'bg-zinc-800 border-zinc-700 text-zinc-300 hover:border-zinc-600'}"
-                >
-                  <div class="flex items-center justify-between">
-                    <span class="font-medium">{version.id}</span>
-                    <span
-                      class="text-xs px-2 py-1 rounded-full {version.type ===
-                      'release'
-                        ? 'bg-green-500/20 text-green-400'
-                        : 'bg-yellow-500/20 text-yellow-400'}"
-                    >
-                      {version.type}
-                    </span>
-                  </div>
-                </button>
-              {/each}
-
-              {#if filteredVersions().length === 0}
-                <div class="text-center py-8 text-zinc-500">
-                  No versions found
-                </div>
-              {/if}
-            </div>
-          </div>
-        {:else if currentStep === 3}
-          <!-- Step 3: Mod Loader -->
-          <div class="space-y-4">
-            <div>
-              <div class="text-sm font-medium text-white/90 mb-3">
-                Mod Loader Type
-              </div>
-              <div class="flex gap-3">
-                {#each [
-                  { value: "vanilla", label: "Vanilla" },
-                  { value: "fabric", label: "Fabric" },
-                  { value: "forge", label: "Forge" },
-                ] as loader}
-                  <button
-                    onclick={() => {
-                      modLoaderType = loader.value as "vanilla" | "fabric" | "forge";
-                    }}
-                    class="flex-1 px-4 py-3 rounded-lg text-sm font-medium transition-colors {modLoaderType ===
-                    loader.value
-                      ? 'bg-indigo-600 text-white'
-                      : 'bg-zinc-800 text-zinc-400 hover:text-white'}"
-                  >
-                    {loader.label}
-                  </button>
-                {/each}
-              </div>
-            </div>
-
-            {#if modLoaderType === "fabric"}
-              <div>
-                <label for="fabric-loader" class="block text-sm font-medium text-white/90 mb-2">
-                  Fabric Loader Version
-                </label>
-                {#if loadingLoaders}
-                  <div class="flex items-center gap-2 text-zinc-400">
-                    <Loader2 size={16} class="animate-spin" />
-                    Loading Fabric versions...
-                  </div>
-                {:else if fabricLoaders.length > 0}
-                  <select
-                    id="fabric-loader"
-                    bind:value={selectedFabricLoader}
-                    class="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
-                  >
-                    {#each fabricLoaders as loader}
-                      <option value={loader.loader.version}>
-                        {loader.loader.version} {loader.loader.stable ? "(Stable)" : "(Beta)"}
-                      </option>
-                    {/each}
-                  </select>
-                {:else}
-                  <p class="text-sm text-red-400">No Fabric loaders available for this version</p>
-                {/if}
-              </div>
-            {:else if modLoaderType === "forge"}
-              <div>
-                <label for="forge-version" class="block text-sm font-medium text-white/90 mb-2">
-                  Forge Version
-                </label>
-                {#if loadingLoaders}
-                  <div class="flex items-center gap-2 text-zinc-400">
-                    <Loader2 size={16} class="animate-spin" />
-                    Loading Forge versions...
-                  </div>
-                {:else if forgeVersions.length > 0}
-                  <select
-                    id="forge-version"
-                    bind:value={selectedForgeLoader}
-                    class="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
-                  >
-                    {#each forgeVersions as version}
-                      <option value={version.version}>
-                        {version.version}
-                      </option>
-                    {/each}
-                  </select>
-                {:else}
-                  <p class="text-sm text-red-400">No Forge versions available for this version</p>
-                {/if}
-              </div>
-            {:else if modLoaderType === "vanilla"}
-              <p class="text-sm text-zinc-400">
-                Create a vanilla Minecraft instance without any mod loaders
-              </p>
-            {/if}
-          </div>
-        {/if}
-
-        {#if errorMessage}
-          <div
-            class="mt-4 p-3 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400 text-sm"
-          >
-            {errorMessage}
-          </div>
-        {/if}
-      </div>
-
-      <!-- Footer -->
-      <div
-        class="flex items-center justify-between gap-3 p-6 border-t border-zinc-700"
-      >
-        <button
-          onclick={() => goToStep(currentStep - 1)}
-          disabled={currentStep === 1 || creating}
-          class="px-4 py-2 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
-        >
-          <ChevronLeft size={16} />
-          Back
-        </button>
-
-        <div class="flex gap-3">
-          <button
-            onclick={handleClose}
-            disabled={creating}
-            class="px-4 py-2 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-white transition-colors disabled:opacity-50"
-          >
-            Cancel
-          </button>
-
-          {#if currentStep < 3}
-            <button
-              onclick={handleNext}
-              disabled={creating}
-              class="px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white transition-colors disabled:opacity-50 flex items-center gap-2"
-            >
-              Next
-              <ChevronRight size={16} />
-            </button>
-          {:else}
-            <button
-              onclick={handleCreate}
-              disabled={creating ||
-                !instanceName.trim() ||
-                !selectedVersion ||
-                (modLoaderType === "fabric" && !selectedFabricLoader) ||
-                (modLoaderType === "forge" && !selectedForgeLoader)}
-              class="px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white transition-colors disabled:opacity-50 flex items-center gap-2"
-            >
-              {#if creating}
-                <Loader2 size={16} class="animate-spin" />
-                Creating...
-              {:else}
-                Create Instance
-              {/if}
-            </button>
-          {/if}
-        </div>
-      </div>
-    </div>
-  </div>
-{/if}
diff --git a/ui/src/components/InstanceEditorModal.svelte b/ui/src/components/InstanceEditorModal.svelte
deleted file mode 100644
index 0856d93..0000000
--- a/ui/src/components/InstanceEditorModal.svelte
+++ /dev/null
@@ -1,439 +0,0 @@
-<script lang="ts">
-  import { invoke } from "@tauri-apps/api/core";
-  import { X, Save, Loader2, Trash2, FolderOpen } from "lucide-svelte";
-  import { instancesState } from "../stores/instances.svelte";
-  import { gameState } from "../stores/game.svelte";
-  import { settingsState } from "../stores/settings.svelte";
-  import type { Instance, FileInfo, FabricLoaderEntry, ForgeVersion } from "../types";
-  import ModLoaderSelector from "./ModLoaderSelector.svelte";
-
-  interface Props {
-    isOpen: boolean;
-    instance: Instance | null;
-    onClose: () => void;
-  }
-
-  let { isOpen, instance, onClose }: Props = $props();
-
-  // Tabs: "info" | "version" | "files" | "settings"
-  let activeTab = $state<"info" | "version" | "files" | "settings">("info");
-  let saving = $state(false);
-  let errorMessage = $state("");
-
-  // Info tab state
-  let editName = $state("");
-  let editNotes = $state("");
-
-  // Version tab state
-  let fabricLoaders = $state<FabricLoaderEntry[]>([]);
-  let forgeVersions = $state<ForgeVersion[]>([]);
-  let loadingVersions = $state(false);
-
-  // Files tab state
-  let selectedFileFolder = $state<"mods" | "resourcepacks" | "shaderpacks" | "saves" | "screenshots">("mods");
-  let fileList = $state<FileInfo[]>([]);
-  let loadingFiles = $state(false);
-  let deletingPath = $state<string | null>(null);
-
-  // Settings tab state
-  let editMemoryMin = $state(0);
-  let editMemoryMax = $state(0);
-  let editJavaArgs = $state("");
-
-  // Initialize form when instance changes
-  $effect(() => {
-    if (isOpen && instance) {
-      editName = instance.name;
-      editNotes = instance.notes || "";
-      editMemoryMin = instance.memory_override?.min || settingsState.settings.min_memory || 512;
-      editMemoryMax = instance.memory_override?.max || settingsState.settings.max_memory || 2048;
-      editJavaArgs = instance.jvm_args_override || "";
-      errorMessage = "";
-    }
-  });
-
-  // Load files when switching to files tab
-  $effect(() => {
-    if (isOpen && instance && activeTab === "files") {
-      loadFileList();
-    }
-  });
-
-  // Load file list for selected folder
-  async function loadFileList() {
-    if (!instance) return;
-    
-    loadingFiles = true;
-    try {
-      const files = await invoke<FileInfo[]>("list_instance_directory", {
-        instanceId: instance.id,
-        folder: selectedFileFolder,
-      });
-      fileList = files;
-    } catch (err) {
-      errorMessage = `Failed to load files: ${err}`;
-      fileList = [];
-    } finally {
-      loadingFiles = false;
-    }
-  }
-
-  // Change selected folder and reload
-  async function changeFolder(folder: "mods" | "resourcepacks" | "shaderpacks" | "saves" | "screenshots") {
-    selectedFileFolder = folder;
-    await loadFileList();
-  }
-
-  // Delete a file or directory
-  async function deleteFile(filePath: string) {
-    if (!confirm(`Are you sure you want to delete "${filePath.split("/").pop()}"?`)) {
-      return;
-    }
-
-    deletingPath = filePath;
-    try {
-      await invoke("delete_instance_file", { path: filePath });
-      // Reload file list
-      await loadFileList();
-    } catch (err) {
-      errorMessage = `Failed to delete file: ${err}`;
-    } finally {
-      deletingPath = null;
-    }
-  }
-
-  // Open file in system explorer
-  async function openInExplorer(filePath: string) {
-    try {
-      await invoke("open_file_explorer", { path: filePath });
-    } catch (err) {
-      errorMessage = `Failed to open file explorer: ${err}`;
-    }
-  }
-
-  // Save instance changes
-  async function saveChanges() {
-    if (!instance) return;
-    if (!editName.trim()) {
-      errorMessage = "Instance name cannot be empty";
-      return;
-    }
-
-    saving = true;
-    errorMessage = "";
-
-    try {
-      const updatedInstance: Instance = {
-        ...instance,
-        name: editName.trim(),
-        notes: editNotes.trim() || undefined,
-        memory_override: {
-          min: editMemoryMin,
-          max: editMemoryMax,
-        },
-        jvm_args_override: editJavaArgs.trim() || undefined,
-      };
-
-      await instancesState.updateInstance(updatedInstance);
-      onClose();
-    } catch (err) {
-      errorMessage = `Failed to save instance: ${err}`;
-    } finally {
-      saving = false;
-    }
-  }
-
-  function formatFileSize(bytes: number): string {
-    if (bytes === 0) return "0 B";
-    const k = 1024;
-    const sizes = ["B", "KB", "MB", "GB"];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
-  }
-
-  function formatDate(timestamp: number): string {
-    return new Date(timestamp * 1000).toLocaleDateString();
-  }
-</script>
-
-{#if isOpen && instance}
-  <div
-    class="fixed inset-0 z-[100] bg-black/80 backdrop-blur-sm flex items-center justify-center p-4"
-    role="dialog"
-    aria-modal="true"
-  >
-    <div
-      class="bg-zinc-900 border border-zinc-700 rounded-xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-hidden flex flex-col"
-    >
-      <!-- Header -->
-      <div class="flex items-center justify-between p-6 border-b border-zinc-700">
-        <div>
-          <h2 class="text-xl font-bold text-white">Edit Instance</h2>
-          <p class="text-sm text-zinc-400 mt-1">{instance.name}</p>
-        </div>
-        <button
-          onclick={onClose}
-          disabled={saving}
-          class="p-2 rounded-lg hover:bg-zinc-800 text-zinc-400 hover:text-white transition-colors disabled:opacity-50"
-        >
-          <X size={20} />
-        </button>
-      </div>
-
-      <!-- Tab Navigation -->
-      <div class="flex gap-1 px-6 pt-4 border-b border-zinc-700">
-        {#each [
-          { id: "info", label: "Info" },
-          { id: "version", label: "Version" },
-          { id: "files", label: "Files" },
-          { id: "settings", label: "Settings" },
-        ] as tab}
-          <button
-            onclick={() => (activeTab = tab.id as any)}
-            class="px-4 py-2 text-sm font-medium transition-colors rounded-t-lg {activeTab === tab.id
-              ? 'bg-indigo-600 text-white'
-              : 'bg-zinc-800 text-zinc-400 hover:text-white'}"
-          >
-            {tab.label}
-          </button>
-        {/each}
-      </div>
-
-      <!-- Content Area -->
-      <div class="flex-1 overflow-y-auto p-6">
-        {#if activeTab === "info"}
-          <!-- Info Tab -->
-          <div class="space-y-4">
-            <div>
-              <label for="instance-name" class="block text-sm font-medium text-white/90 mb-2">
-                Instance Name
-              </label>
-              <input
-                id="instance-name"
-                type="text"
-                bind:value={editName}
-                class="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
-                disabled={saving}
-              />
-            </div>
-
-            <div>
-              <label for="instance-notes" class="block text-sm font-medium text-white/90 mb-2">
-                Notes
-              </label>
-              <textarea
-                id="instance-notes"
-                bind:value={editNotes}
-                rows="4"
-                placeholder="Add notes about this instance..."
-                class="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none"
-                disabled={saving}
-              ></textarea>
-            </div>
-
-            <div class="grid grid-cols-2 gap-4 text-sm">
-              <div class="p-3 bg-zinc-800 rounded-lg">
-                <p class="text-zinc-400">Created</p>
-                <p class="text-white font-medium">{formatDate(instance.created_at)}</p>
-              </div>
-              <div class="p-3 bg-zinc-800 rounded-lg">
-                <p class="text-zinc-400">Last Played</p>
-                <p class="text-white font-medium">
-                  {instance.last_played ? formatDate(instance.last_played) : "Never"}
-                </p>
-              </div>
-              <div class="p-3 bg-zinc-800 rounded-lg">
-                <p class="text-zinc-400">Game Directory</p>
-                <p class="text-white font-medium text-xs truncate" title={instance.game_dir}>
-                  {instance.game_dir.split("/").pop()}
-                </p>
-              </div>
-              <div class="p-3 bg-zinc-800 rounded-lg">
-                <p class="text-zinc-400">Current Version</p>
-                <p class="text-white font-medium">{instance.version_id || "None"}</p>
-              </div>
-            </div>
-          </div>
-        {:else if activeTab === "version"}
-          <!-- Version Tab -->
-          <div class="space-y-4">
-            {#if instance.version_id}
-              <div class="p-4 bg-indigo-500/10 border border-indigo-500/30 rounded-lg">
-                <p class="text-sm text-indigo-400">
-                  Currently playing: <span class="font-medium">{instance.version_id}</span>
-                  {#if instance.mod_loader}
-                    with <span class="capitalize">{instance.mod_loader}</span>
-                    {instance.mod_loader_version && `${instance.mod_loader_version}`}
-                  {/if}
-                </p>
-              </div>
-            {/if}
-
-            <div>
-              <h3 class="text-sm font-medium text-white/90 mb-4">Change Version or Mod Loader</h3>
-              <ModLoaderSelector
-                selectedGameVersion={instance.version_id || ""}
-                onInstall={(versionId) => {
-                  // Version installed, update instance version_id
-                  instance.version_id = versionId;
-                  saveChanges();
-                }}
-              />
-            </div>
-          </div>
-        {:else if activeTab === "files"}
-          <!-- Files Tab -->
-          <div class="space-y-4">
-            <div class="flex gap-2 flex-wrap">
-              {#each ["mods", "resourcepacks", "shaderpacks", "saves", "screenshots"] as folder}
-                <button
-                  onclick={() => changeFolder(folder as any)}
-                  class="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors {selectedFileFolder ===
-                  folder
-                    ? "bg-indigo-600 text-white"
-                    : "bg-zinc-800 text-zinc-400 hover:text-white"}"
-                >
-                  {folder}
-                </button>
-              {/each}
-            </div>
-
-            {#if loadingFiles}
-              <div class="flex items-center gap-2 text-zinc-400 py-8 justify-center">
-                <Loader2 size={16} class="animate-spin" />
-                Loading files...
-              </div>
-            {:else if fileList.length === 0}
-              <div class="text-center py-8 text-zinc-500">
-                No files in this folder
-              </div>
-            {:else}
-              <div class="space-y-2">
-                {#each fileList as file}
-                  <div
-                    class="flex items-center justify-between p-3 bg-zinc-800 rounded-lg hover:bg-zinc-700 transition-colors"
-                  >
-                    <div class="flex-1 min-w-0">
-                      <p class="font-medium text-white truncate">{file.name}</p>
-                      <p class="text-xs text-zinc-400">
-                        {file.is_directory ? "Folder" : formatFileSize(file.size)}
-                        • {formatDate(file.modified)}
-                      </p>
-                    </div>
-                    <div class="flex gap-2 ml-4">
-                      <button
-                        onclick={() => openInExplorer(file.path)}
-                        title="Open in explorer"
-                        class="p-2 rounded-lg hover:bg-zinc-600 text-zinc-400 hover:text-white transition-colors"
-                      >
-                        <FolderOpen size={16} />
-                      </button>
-                      <button
-                        onclick={() => deleteFile(file.path)}
-                        disabled={deletingPath === file.path}
-                        title="Delete"
-                        class="p-2 rounded-lg hover:bg-red-600/20 text-red-400 hover:text-red-300 transition-colors disabled:opacity-50"
-                      >
-                        {#if deletingPath === file.path}
-                          <Loader2 size={16} class="animate-spin" />
-                        {:else}
-                          <Trash2 size={16} />
-                        {/if}
-                      </button>
-                    </div>
-                  </div>
-                {/each}
-              </div>
-            {/if}
-          </div>
-        {:else if activeTab === "settings"}
-          <!-- Settings Tab -->
-          <div class="space-y-4">
-            <div>
-              <label for="min-memory" class="block text-sm font-medium text-white/90 mb-2">
-                Minimum Memory (MB)
-              </label>
-              <input
-                id="min-memory"
-                type="number"
-                bind:value={editMemoryMin}
-                min="256"
-                max={editMemoryMax}
-                class="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
-                disabled={saving}
-              />
-              <p class="text-xs text-zinc-400 mt-1">
-                Default: {settingsState.settings.min_memory}MB
-              </p>
-            </div>
-
-            <div>
-              <label for="max-memory" class="block text-sm font-medium text-white/90 mb-2">
-                Maximum Memory (MB)
-              </label>
-              <input
-                id="max-memory"
-                type="number"
-                bind:value={editMemoryMax}
-                min={editMemoryMin}
-                max="16384"
-                class="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
-                disabled={saving}
-              />
-              <p class="text-xs text-zinc-400 mt-1">
-                Default: {settingsState.settings.max_memory}MB
-              </p>
-            </div>
-
-            <div>
-              <label for="java-args" class="block text-sm font-medium text-white/90 mb-2">
-                JVM Arguments (Advanced)
-              </label>
-              <textarea
-                id="java-args"
-                bind:value={editJavaArgs}
-                rows="4"
-                placeholder="-XX:+UnlockExperimentalVMOptions -XX:G1NewCollectionPercentage=20..."
-                class="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 font-mono text-sm resize-none"
-                disabled={saving}
-              ></textarea>
-              <p class="text-xs text-zinc-400 mt-1">
-                Leave empty to use global Java arguments
-              </p>
-            </div>
-          </div>
-        {/if}
-
-        {#if errorMessage}
-          <div class="mt-4 p-3 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400 text-sm">
-            {errorMessage}
-          </div>
-        {/if}
-      </div>
-
-      <!-- Footer -->
-      <div class="flex items-center justify-end gap-3 p-6 border-t border-zinc-700">
-        <button
-          onclick={onClose}
-          disabled={saving}
-          class="px-4 py-2 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-white transition-colors disabled:opacity-50"
-        >
-          Cancel
-        </button>
-        <button
-          onclick={saveChanges}
-          disabled={saving || !editName.trim()}
-          class="px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white transition-colors disabled:opacity-50 flex items-center gap-2"
-        >
-          {#if saving}
-            <Loader2 size={16} class="animate-spin" />
-            Saving...
-          {:else}
-            <Save size={16} />
-            Save Changes
-          {/if}
-        </button>
-      </div>
-    </div>
-  </div>
-{/if}
diff --git a/ui/src/components/InstancesView.svelte b/ui/src/components/InstancesView.svelte
deleted file mode 100644
index 5334f9e..0000000
--- a/ui/src/components/InstancesView.svelte
+++ /dev/null
@@ -1,259 +0,0 @@
-<script lang="ts">
-  import { onMount } from "svelte";
-  import { instancesState } from "../stores/instances.svelte";
-  import { Plus, Trash2, Edit2, Copy, Check, X } from "lucide-svelte";
-  import type { Instance } from "../types";
-  import InstanceCreationModal from "./InstanceCreationModal.svelte";
-  import InstanceEditorModal from "./InstanceEditorModal.svelte";
-
-  let showCreateModal = $state(false);
-  let showEditModal = $state(false);
-  let showDeleteConfirm = $state(false);
-  let showDuplicateModal = $state(false);
-  let selectedInstance: Instance | null = $state(null);
-  let editingInstance: Instance | null = $state(null);
-  let newInstanceName = $state("");
-  let duplicateName = $state("");
-
-  onMount(() => {
-    instancesState.loadInstances();
-  });
-
-  function handleCreate() {
-    showCreateModal = true;
-  }
-
-  function handleEdit(instance: Instance) {
-    editingInstance = instance;
-  }
-
-  function handleDelete(instance: Instance) {
-    selectedInstance = instance;
-    showDeleteConfirm = true;
-  }
-
-  function handleDuplicate(instance: Instance) {
-    selectedInstance = instance;
-    duplicateName = `${instance.name} (Copy)`;
-    showDuplicateModal = true;
-  }
-
-  async function confirmDelete() {
-    if (!selectedInstance) return;
-    await instancesState.deleteInstance(selectedInstance.id);
-    showDeleteConfirm = false;
-    selectedInstance = null;
-  }
-
-  async function confirmDuplicate() {
-    if (!selectedInstance || !duplicateName.trim()) return;
-    await instancesState.duplicateInstance(selectedInstance.id, duplicateName.trim());
-    showDuplicateModal = false;
-    selectedInstance = null;
-    duplicateName = "";
-  }
-
-  function formatDate(timestamp: number): string {
-    return new Date(timestamp * 1000).toLocaleDateString();
-  }
-
-  function formatLastPlayed(timestamp: number): string {
-    const date = new Date(timestamp * 1000);
-    const now = new Date();
-    const diff = now.getTime() - date.getTime();
-    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
-    
-    if (days === 0) return "Today";
-    if (days === 1) return "Yesterday";
-    if (days < 7) return `${days} days ago`;
-    return date.toLocaleDateString();
-  }
-</script>
-
-<div class="h-full flex flex-col gap-4 p-6 overflow-y-auto">
-  <div class="flex items-center justify-between">
-    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Instances</h1>
-    <button
-      onclick={handleCreate}
-      class="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
-    >
-      <Plus size={18} />
-      Create Instance
-    </button>
-  </div>
-
-  {#if instancesState.instances.length === 0}
-    <div class="flex-1 flex items-center justify-center">
-      <div class="text-center text-gray-500 dark:text-gray-400">
-        <p class="text-lg mb-2">No instances yet</p>
-        <p class="text-sm">Create your first instance to get started</p>
-      </div>
-    </div>
-  {:else}
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-      {#each instancesState.instances as instance (instance.id)}
-        <div
-          role="button"
-          tabindex="0"
-          class="relative p-4 bg-gray-100 dark:bg-gray-800 rounded-lg border-2 transition-all cursor-pointer hover:border-blue-500 {instancesState.activeInstanceId === instance.id
-            ? 'border-blue-500'
-            : 'border-transparent'}"
-          onclick={() => instancesState.setActiveInstance(instance.id)}
-          onkeydown={(e) => e.key === "Enter" && instancesState.setActiveInstance(instance.id)}
-        >
-          {#if instancesState.activeInstanceId === instance.id}
-            <div class="absolute top-2 right-2">
-              <div class="w-3 h-3 bg-blue-500 rounded-full"></div>
-            </div>
-          {/if}
-
-          <div class="flex items-start justify-between mb-2">
-            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
-              {instance.name}
-            </h3>
-            <div class="flex gap-1">
-              <button
-                type="button"
-                onclick={(e) => {
-                  e.stopPropagation();
-                  handleEdit(instance);
-                }}
-                class="p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-colors"
-                title="Edit"
-              >
-                <Edit2 size={16} class="text-gray-600 dark:text-gray-400" />
-              </button>
-              <button
-                type="button"
-                onclick={(e) => {
-                  e.stopPropagation();
-                  handleDuplicate(instance);
-                }}
-                class="p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-colors"
-                title="Duplicate"
-              >
-                <Copy size={16} class="text-gray-600 dark:text-gray-400" />
-              </button>
-              <button
-                type="button"
-                onclick={(e) => {
-                  e.stopPropagation();
-                  handleDelete(instance);
-                }}
-                class="p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-colors"
-                title="Delete"
-              >
-                <Trash2 size={16} class="text-red-600 dark:text-red-400" />
-              </button>
-            </div>
-          </div>
-
-          <div class="space-y-1 text-sm text-gray-600 dark:text-gray-400">
-            {#if instance.version_id}
-              <p>Version: <span class="font-medium">{instance.version_id}</span></p>
-            {:else}
-              <p class="text-gray-400">No version selected</p>
-            {/if}
-
-            {#if instance.mod_loader && instance.mod_loader !== "vanilla"}
-              <p>
-                Mod Loader: <span class="font-medium capitalize">{instance.mod_loader}</span>
-                {#if instance.mod_loader_version}
-                  <span class="text-gray-500">({instance.mod_loader_version})</span>
-                {/if}
-              </p>
-            {/if}
-
-            <p>Created: {formatDate(instance.created_at)}</p>
-
-            {#if instance.last_played}
-              <p>Last played: {formatLastPlayed(instance.last_played)}</p>
-            {/if}
-          </div>
-
-          {#if instance.notes}
-            <p class="mt-2 text-sm text-gray-500 dark:text-gray-500 italic">
-              {instance.notes}
-            </p>
-          {/if}
-        </div>
-      {/each}
-    </div>
-  {/if}
-</div>
-
-<!-- Create Modal -->
-<InstanceCreationModal isOpen={showCreateModal} onClose={() => (showCreateModal = false)} />
-
-<!-- Instance Editor Modal -->
-<InstanceEditorModal
-  isOpen={editingInstance !== null}
-  instance={editingInstance}
-  onClose={() => {
-    editingInstance = null;
-  }}
-/>
-
-<!-- Delete Confirmation -->
-{#if showDeleteConfirm && selectedInstance}
-  <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-    <div class="bg-white dark:bg-gray-800 rounded-lg p-6 w-96">
-      <h2 class="text-xl font-bold mb-4 text-red-600 dark:text-red-400">Delete Instance</h2>
-      <p class="mb-4 text-gray-700 dark:text-gray-300">
-        Are you sure you want to delete "{selectedInstance.name}"? This action cannot be undone and will delete all game data for this instance.
-      </p>
-      <div class="flex gap-2 justify-end">
-        <button
-          onclick={() => {
-            showDeleteConfirm = false;
-            selectedInstance = null;
-          }}
-          class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-        >
-          Cancel
-        </button>
-        <button
-          onclick={confirmDelete}
-          class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
-        >
-          Delete
-        </button>
-      </div>
-    </div>
-  </div>
-{/if}
-
-<!-- Duplicate Modal -->
-{#if showDuplicateModal && selectedInstance}
-  <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-    <div class="bg-white dark:bg-gray-800 rounded-lg p-6 w-96">
-      <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">Duplicate Instance</h2>
-      <input
-        type="text"
-        bind:value={duplicateName}
-        placeholder="New instance name"
-        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white mb-4"
-        onkeydown={(e) => e.key === "Enter" && confirmDuplicate()}
-      />
-      <div class="flex gap-2 justify-end">
-        <button
-          onclick={() => {
-            showDuplicateModal = false;
-            selectedInstance = null;
-            duplicateName = "";
-          }}
-          class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-        >
-          Cancel
-        </button>
-        <button
-          onclick={confirmDuplicate}
-          disabled={!duplicateName.trim()}
-          class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-        >
-          Duplicate
-        </button>
-      </div>
-    </div>
-  </div>
-{/if}
diff --git a/ui/src/components/LoginModal.svelte b/ui/src/components/LoginModal.svelte
deleted file mode 100644
index 1886cd9..0000000
--- a/ui/src/components/LoginModal.svelte
+++ /dev/null
@@ -1,126 +0,0 @@
-<script lang="ts">
-  import { open } from "@tauri-apps/plugin-shell";
-  import { authState } from "../stores/auth.svelte";
-
-  function openLink(url: string) {
-    open(url);
-  }
-</script>
-
-{#if authState.isLoginModalOpen}
-  <div
-    class="fixed inset-0 z-[60] flex items-center justify-center bg-white/80 dark:bg-black/80 backdrop-blur-sm p-4"
-  >
-    <div
-      class="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 rounded-xl shadow-2xl p-6 w-full max-w-md animate-in fade-in zoom-in-0 duration-200"
-    >
-      <div class="flex justify-between items-center mb-6">
-        <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Login</h2>
-        <button
-          onclick={() => authState.closeLoginModal()}
-          class="text-zinc-500 hover:text-black dark:hover:text-white transition group"
-        >
-          ✕
-        </button>
-      </div>
-
-      {#if authState.loginMode === "select"}
-        <div class="space-y-4">
-          <button
-            onclick={() => authState.startMicrosoftLogin()}
-            class="w-full flex items-center justify-center gap-3 bg-gray-100 hover:bg-gray-200 dark:bg-[#2F2F2F] dark:hover:bg-[#3F3F3F] text-gray-900 dark:text-white p-4 rounded-lg font-bold border border-transparent hover:border-zinc-400 dark:hover:border-zinc-500 transition-all group"
-          >
-            <!-- Microsoft Logo SVG -->
-            <svg
-              class="w-5 h-5"
-              viewBox="0 0 23 23"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              ><path fill="#f35325" d="M1 1h10v10H1z" /><path
-                fill="#81bc06"
-                d="M12 1h10v10H12z"
-              /><path fill="#05a6f0" d="M1 12h10v10H1z" /><path
-                fill="#ffba08"
-                d="M12 12h10v10H12z"
-              /></svg
-            >
-            Microsoft Account
-          </button>
-
-          <div class="relative py-2">
-            <div class="absolute inset-0 flex items-center">
-              <div class="w-full border-t border-zinc-200 dark:border-zinc-700"></div>
-            </div>
-            <div class="relative flex justify-center text-xs uppercase">
-              <span class="bg-white dark:bg-zinc-900 px-2 text-zinc-400 dark:text-zinc-500">OR</span>
-            </div>
-          </div>
-
-          <div class="space-y-2">
-            <input
-              type="text"
-              bind:value={authState.offlineUsername}
-              placeholder="Offline Username"
-              class="w-full bg-gray-50 border-zinc-200 dark:bg-zinc-950 dark:border-zinc-700 rounded p-3 text-gray-900 dark:text-white focus:border-indigo-500 outline-none"
-              onkeydown={(e) => e.key === "Enter" && authState.performOfflineLogin()}
-            />
-            <button
-              onclick={() => authState.performOfflineLogin()}
-              class="w-full bg-gray-200 hover:bg-gray-300 dark:bg-zinc-800 dark:hover:bg-zinc-700 text-gray-700 dark:text-zinc-300 p-3 rounded font-medium transition-colors"
-            >
-              Offline Login
-            </button>
-          </div>
-        </div>
-      {:else if authState.loginMode === "microsoft"}
-        <div class="text-center">
-          {#if authState.msLoginLoading && !authState.deviceCodeData}
-            <div class="py-8 text-zinc-400 animate-pulse">
-              Starting login flow...
-            </div>
-          {:else if authState.deviceCodeData}
-            <div class="space-y-4">
-              <p class="text-sm text-gray-500 dark:text-zinc-400">1. Go to this URL:</p>
-              <button
-                onclick={() =>
-                    authState.deviceCodeData && openLink(authState.deviceCodeData.verification_uri)}
-                class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300 underline break-all font-mono text-sm"
-              >
-                {authState.deviceCodeData.verification_uri}
-              </button>
-
-              <p class="text-sm text-gray-500 dark:text-zinc-400 mt-2">2. Enter this code:</p>
-              <div
-                class="bg-gray-50 dark:bg-zinc-950 p-4 rounded border border-zinc-200 dark:border-zinc-700 font-mono text-2xl tracking-widest text-center select-all cursor-pointer hover:border-indigo-500 transition-colors dark:text-white text-gray-900"
-                role="button"
-                tabindex="0"
-                onkeydown={(e) => e.key === 'Enter' && navigator.clipboard.writeText(authState.deviceCodeData?.user_code || "")}
-                onclick={() =>
-                  navigator.clipboard.writeText(
-                    authState.deviceCodeData?.user_code || ""
-                  )}
-              >
-                {authState.deviceCodeData.user_code}
-              </div>
-              <p class="text-xs text-zinc-500">Click code to copy</p>
-
-              <div class="pt-6 space-y-3">
-                   <div class="flex flex-col items-center gap-3">
-                       <div class="animate-spin rounded-full h-6 w-6 border-2 border-zinc-300 dark:border-zinc-600 border-t-indigo-500"></div>
-                       <span class="text-sm text-gray-600 dark:text-zinc-400 font-medium break-all text-center">{authState.msLoginStatus}</span>
-                   </div>
-                   <p class="text-xs text-zinc-600">This window will update automatically.</p>
-              </div>
-              
-              <button
-                onclick={() => { authState.stopPolling(); authState.loginMode = "select"; }}
-                class="text-xs text-zinc-500 hover:text-zinc-300 mt-6 underline"
-                >Cancel</button
-              >
-            </div>
-          {/if}
-        </div>
-      {/if}
-    </div>
-  </div>
-{/if}
diff --git a/ui/src/components/ModLoaderSelector.svelte b/ui/src/components/ModLoaderSelector.svelte
deleted file mode 100644
index 50caa8c..0000000
--- a/ui/src/components/ModLoaderSelector.svelte
+++ /dev/null
@@ -1,455 +0,0 @@
-<script lang="ts">
-  import { invoke } from "@tauri-apps/api/core";
-  import { listen, type UnlistenFn } from "@tauri-apps/api/event";
-  import type {
-    FabricGameVersion,
-    FabricLoaderVersion,
-    ForgeVersion,
-    ModLoaderType,
-  } from "../types";
-  import { Loader2, Download, AlertCircle, Check, ChevronDown, CheckCircle } from 'lucide-svelte';
-  import { logsState } from "../stores/logs.svelte";
-  import { instancesState } from "../stores/instances.svelte";
-
-  interface Props {
-    selectedGameVersion: string;
-    onInstall: (versionId: string) => void;
-  }
-
-  let { selectedGameVersion, onInstall }: Props = $props();
-
-  // State
-  let selectedLoader = $state<ModLoaderType>("vanilla");
-  let isLoading = $state(false);
-  let isInstalling = $state(false);
-  let error = $state<string | null>(null);
-  let isVersionInstalled = $state(false);
-
-  // Fabric state
-  let fabricLoaders = $state<FabricLoaderVersion[]>([]);
-  let selectedFabricLoader = $state("");
-  let isFabricDropdownOpen = $state(false);
-
-  // Forge state
-  let forgeVersions = $state<ForgeVersion[]>([]);
-  let selectedForgeVersion = $state("");
-  let isForgeDropdownOpen = $state(false);
-
-  let fabricDropdownRef = $state<HTMLDivElement | null>(null);
-  let forgeDropdownRef = $state<HTMLDivElement | null>(null);
-
-  // Check if version is installed when game version changes
-  $effect(() => {
-    if (selectedGameVersion) {
-      checkInstallStatus();
-    }
-  });
-
-  // Load mod loader versions when game version or loader type changes
-  $effect(() => {
-    if (selectedGameVersion && selectedLoader !== "vanilla") {
-      loadModLoaderVersions();
-    }
-  });
-
-  async function checkInstallStatus() {
-    if (!selectedGameVersion || !instancesState.activeInstanceId) {
-      isVersionInstalled = false;
-      return;
-    }
-    try {
-      isVersionInstalled = await invoke<boolean>("check_version_installed", {
-        instanceId: instancesState.activeInstanceId,
-        versionId: selectedGameVersion,
-      });
-    } catch (e) {
-      console.error("Failed to check install status:", e);
-      isVersionInstalled = false;
-    }
-  }
-
-  async function loadModLoaderVersions() {
-    isLoading = true;
-    error = null;
-
-    try {
-      if (selectedLoader === "fabric") {
-        const loaders = await invoke<any[]>("get_fabric_loaders_for_version", {
-          gameVersion: selectedGameVersion,
-        });
-        fabricLoaders = loaders.map((l) => l.loader);
-        if (fabricLoaders.length > 0) {
-          const stable = fabricLoaders.find((l) => l.stable);
-          selectedFabricLoader = stable?.version || fabricLoaders[0].version;
-        }
-      } else if (selectedLoader === "forge") {
-        forgeVersions = await invoke<ForgeVersion[]>(
-          "get_forge_versions_for_game",
-          {
-            gameVersion: selectedGameVersion,
-          }
-        );
-        if (forgeVersions.length > 0) {
-          const recommended = forgeVersions.find((v) => v.recommended);
-          const latest = forgeVersions.find((v) => v.latest);
-          selectedForgeVersion =
-            recommended?.version || latest?.version || forgeVersions[0].version;
-        }
-      }
-    } catch (e) {
-      error = `Failed to load ${selectedLoader} versions: ${e}`;
-      console.error(e);
-    } finally {
-      isLoading = false;
-    }
-  }
-
-  async function installVanilla() {
-    if (!selectedGameVersion) {
-      error = "Please select a Minecraft version first";
-      return;
-    }
-
-    isInstalling = true;
-    error = null;
-    logsState.addLog("info", "Installer", `Starting installation of ${selectedGameVersion}...`);
-
-    if (!instancesState.activeInstanceId) {
-      error = "Please select an instance first";
-      return;
-    }
-    try {
-      await invoke("install_version", {
-        instanceId: instancesState.activeInstanceId,
-        versionId: selectedGameVersion,
-      });
-      logsState.addLog("info", "Installer", `Successfully installed ${selectedGameVersion}`);
-      isVersionInstalled = true;
-      onInstall(selectedGameVersion);
-    } catch (e) {
-      error = `Failed to install: ${e}`;
-      logsState.addLog("error", "Installer", `Installation failed: ${e}`);
-      console.error(e);
-    } finally {
-      isInstalling = false;
-    }
-  }
-
-  async function installModLoader() {
-    if (!selectedGameVersion) {
-      error = "Please select a Minecraft version first";
-      return;
-    }
-
-    if (!instancesState.activeInstanceId) {
-      error = "Please select an instance first";
-      isInstalling = false;
-      return;
-    }
-
-    isInstalling = true;
-    error = null;
-
-    try {
-      // First install the base game if not installed
-      if (!isVersionInstalled) {
-        logsState.addLog("info", "Installer", `Installing base game ${selectedGameVersion} first...`);
-        await invoke("install_version", {
-          instanceId: instancesState.activeInstanceId,
-          versionId: selectedGameVersion,
-        });
-        isVersionInstalled = true;
-      }
-
-      // Then install the mod loader
-      if (selectedLoader === "fabric" && selectedFabricLoader) {
-        logsState.addLog("info", "Installer", `Installing Fabric ${selectedFabricLoader} for ${selectedGameVersion}...`);
-        const result = await invoke<any>("install_fabric", {
-          instanceId: instancesState.activeInstanceId,
-          gameVersion: selectedGameVersion,
-          loaderVersion: selectedFabricLoader,
-        });
-        logsState.addLog("info", "Installer", `Fabric installed successfully: ${result.id}`);
-        onInstall(result.id);
-      } else if (selectedLoader === "forge" && selectedForgeVersion) {
-        logsState.addLog("info", "Installer", `Installing Forge ${selectedForgeVersion} for ${selectedGameVersion}...`);
-        const result = await invoke<any>("install_forge", {
-          instanceId: instancesState.activeInstanceId,
-          gameVersion: selectedGameVersion,
-          forgeVersion: selectedForgeVersion,
-        });
-        logsState.addLog("info", "Installer", `Forge installed successfully: ${result.id}`);
-        onInstall(result.id);
-      }
-    } catch (e) {
-      error = `Failed to install ${selectedLoader}: ${e}`;
-      logsState.addLog("error", "Installer", `Installation failed: ${e}`);
-      console.error(e);
-    } finally {
-      isInstalling = false;
-    }
-  }
-
-  function onLoaderChange(loader: ModLoaderType) {
-    selectedLoader = loader;
-    error = null;
-    if (loader !== "vanilla" && selectedGameVersion) {
-      loadModLoaderVersions();
-    }
-  }
-
-  function handleFabricClickOutside(e: MouseEvent) {
-    if (fabricDropdownRef && !fabricDropdownRef.contains(e.target as Node)) {
-      isFabricDropdownOpen = false;
-    }
-  }
-
-  function handleForgeClickOutside(e: MouseEvent) {
-    if (forgeDropdownRef && !forgeDropdownRef.contains(e.target as Node)) {
-      isForgeDropdownOpen = false;
-    }
-  }
-
-  $effect(() => {
-    if (isFabricDropdownOpen) {
-      document.addEventListener('click', handleFabricClickOutside);
-      return () => document.removeEventListener('click', handleFabricClickOutside);
-    }
-  });
-
-  $effect(() => {
-    if (isForgeDropdownOpen) {
-      document.addEventListener('click', handleForgeClickOutside);
-      return () => document.removeEventListener('click', handleForgeClickOutside);
-    }
-  });
-
-  let selectedFabricLabel = $derived(
-    fabricLoaders.find(l => l.version === selectedFabricLoader)
-      ? `${selectedFabricLoader}${fabricLoaders.find(l => l.version === selectedFabricLoader)?.stable ? ' (stable)' : ''}`
-      : selectedFabricLoader || 'Select version'
-  );
-
-  let selectedForgeLabel = $derived(
-    forgeVersions.find(v => v.version === selectedForgeVersion)
-      ? `${selectedForgeVersion}${forgeVersions.find(v => v.version === selectedForgeVersion)?.recommended ? ' (Recommended)' : ''}`
-      : selectedForgeVersion || 'Select version'
-  );
-</script>
-
-<div class="space-y-4">
-  <div class="flex items-center justify-between">
-      <h3 class="text-xs font-bold uppercase tracking-widest text-zinc-500">Loader Type</h3>
-  </div>
-
-  <!-- Loader Type Tabs - Simple Clean Style -->
-  <div class="flex p-1 bg-zinc-100 dark:bg-zinc-900/50 rounded-sm border border-zinc-200 dark:border-white/5">
-    {#each ['vanilla', 'fabric', 'forge'] as loader}
-        <button
-        class="flex-1 px-3 py-2 rounded-sm text-sm font-medium transition-all duration-200 capitalize
-        {selectedLoader === loader
-            ? 'bg-white dark:bg-white/10 text-black dark:text-white shadow-sm'
-            : 'text-zinc-500 dark:text-zinc-500 hover:text-black dark:hover:text-white'}"
-        onclick={() => onLoaderChange(loader as ModLoaderType)}
-        disabled={isInstalling}
-        >
-        {loader}
-        </button>
-    {/each}
-  </div>
-
-  <!-- Content Area -->
-  <div class="min-h-[100px] flex flex-col justify-center">
-    {#if !selectedGameVersion}
-        <div class="flex items-center gap-3 p-4 bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/20 text-amber-700 dark:text-amber-200 rounded-sm text-sm">
-           <AlertCircle size={16} />
-           <span>Please select a Minecraft version first.</span>
-        </div>
-        
-    {:else if selectedLoader === "vanilla"}
-        <div class="space-y-4 animate-in fade-in slide-in-from-bottom-2 duration-300">
-            <div class="text-center p-4 border border-dashed border-zinc-200 dark:border-white/10 rounded-sm text-zinc-500 text-sm">
-               Standard Minecraft experience. No modifications.
-            </div>
-            
-            {#if isVersionInstalled}
-                <div class="flex items-center justify-center gap-2 p-3 bg-emerald-50 dark:bg-emerald-500/10 border border-emerald-200 dark:border-emerald-500/20 text-emerald-700 dark:text-emerald-300 rounded-sm text-sm">
-                    <CheckCircle size={16} />
-                    <span>Version {selectedGameVersion} is installed</span>
-                </div>
-            {:else}
-                <button
-                    class="w-full bg-emerald-600 hover:bg-emerald-500 disabled:opacity-50 disabled:cursor-not-allowed text-white py-2.5 px-4 rounded-sm font-bold text-sm transition-all flex items-center justify-center gap-2"
-                    onclick={installVanilla}
-                    disabled={isInstalling}
-                >
-                    {#if isInstalling}
-                        <Loader2 class="animate-spin" size={16} />
-                        Installing...
-                    {:else}
-                        <Download size={16} />
-                        Install {selectedGameVersion}
-                    {/if}
-                </button>
-            {/if}
-        </div>
-        
-    {:else if isLoading}
-        <div class="flex flex-col items-center gap-3 text-sm text-zinc-500 py-6">
-            <Loader2 class="animate-spin" size={20} />
-            <span>Fetching {selectedLoader} manifest...</span>
-        </div>
-        
-    {:else if error}
-        <div class="p-4 bg-red-50 border border-red-200 text-red-700 dark:bg-red-500/10 dark:border-red-500/20 dark:text-red-300 rounded-sm text-sm break-words">
-            {error}
-        </div>
-        
-    {:else if selectedLoader === "fabric"}
-        <div class="space-y-4 animate-in fade-in slide-in-from-bottom-2 duration-300">
-        {#if fabricLoaders.length === 0}
-            <div class="text-center p-4 text-sm text-zinc-500 italic">
-            No Fabric versions available for {selectedGameVersion}
-            </div>
-        {:else}
-            <div>
-            <label for="fabric-loader-select" class="block text-[10px] uppercase font-bold text-zinc-500 mb-2"
-            >Loader Version</label
-            >
-            <!-- Custom Fabric Dropdown -->
-            <div class="relative" bind:this={fabricDropdownRef}>
-                <button
-                    type="button"
-                    onclick={() => isFabricDropdownOpen = !isFabricDropdownOpen}
-                    disabled={isInstalling}
-                    class="w-full flex items-center justify-between gap-2 px-4 py-2.5 text-left
-                           bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-md 
-                           text-sm text-gray-900 dark:text-white
-                           hover:border-zinc-400 dark:hover:border-zinc-600 
-                           focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500/30
-                           transition-colors cursor-pointer outline-none disabled:opacity-50"
-                >
-                    <span class="truncate">{selectedFabricLabel}</span>
-                    <ChevronDown 
-                        size={14} 
-                        class="shrink-0 text-zinc-400 dark:text-zinc-500 transition-transform duration-200 {isFabricDropdownOpen ? 'rotate-180' : ''}" 
-                    />
-                </button>
-
-                {#if isFabricDropdownOpen}
-                    <div 
-                        class="absolute z-50 w-full mt-1 py-1 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-md shadow-xl
-                               max-h-48 overflow-y-auto animate-in fade-in slide-in-from-top-1 duration-150"
-                    >
-                        {#each fabricLoaders as loader}
-                            <button
-                                type="button"
-                                onclick={() => { selectedFabricLoader = loader.version; isFabricDropdownOpen = false; }}
-                                class="w-full flex items-center justify-between px-3 py-2 text-sm text-left
-                                       transition-colors outline-none cursor-pointer
-                                       {loader.version === selectedFabricLoader 
-                                         ? 'bg-indigo-600 text-white' 
-                                         : 'text-gray-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800'}"
-                            >
-                                <span class="truncate">{loader.version} {loader.stable ? "(stable)" : ""}</span>
-                                {#if loader.version === selectedFabricLoader}
-                                    <Check size={14} class="shrink-0 ml-2" />
-                                {/if}
-                            </button>
-                        {/each}
-                    </div>
-                {/if}
-            </div>
-            </div>
-            
-            <button
-                class="w-full bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed text-white py-2.5 px-4 rounded-sm font-bold text-sm transition-all flex items-center justify-center gap-2"
-                onclick={installModLoader}
-                disabled={isInstalling || !selectedFabricLoader}
-            >
-                {#if isInstalling}
-                    <Loader2 class="animate-spin" size={16} />
-                    Installing...
-                {:else}
-                    <Download size={16} />
-                    Install Fabric {selectedFabricLoader}
-                {/if}
-            </button>
-        {/if}
-        </div>
-        
-    {:else if selectedLoader === "forge"}
-        <div class="space-y-4 animate-in fade-in slide-in-from-bottom-2 duration-300">
-        {#if forgeVersions.length === 0}
-            <div class="text-center p-4 text-sm text-zinc-500 italic">
-            No Forge versions available for {selectedGameVersion}
-            </div>
-        {:else}
-            <div>
-            <label for="forge-version-select" class="block text-[10px] uppercase font-bold text-zinc-500 mb-2"
-                >Forge Version</label
-            >
-            <!-- Custom Forge Dropdown -->
-            <div class="relative" bind:this={forgeDropdownRef}>
-                <button
-                    type="button"
-                    onclick={() => isForgeDropdownOpen = !isForgeDropdownOpen}
-                    disabled={isInstalling}
-                    class="w-full flex items-center justify-between gap-2 px-4 py-2.5 text-left
-                           bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-md 
-                           text-sm text-gray-900 dark:text-white
-                           hover:border-zinc-400 dark:hover:border-zinc-600 
-                           focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500/30
-                           transition-colors cursor-pointer outline-none disabled:opacity-50"
-                >
-                    <span class="truncate">{selectedForgeLabel}</span>
-                    <ChevronDown 
-                        size={14} 
-                        class="shrink-0 text-zinc-400 dark:text-zinc-500 transition-transform duration-200 {isForgeDropdownOpen ? 'rotate-180' : ''}" 
-                    />
-                </button>
-
-                {#if isForgeDropdownOpen}
-                    <div 
-                        class="absolute z-50 w-full mt-1 py-1 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-md shadow-xl
-                               max-h-48 overflow-y-auto animate-in fade-in slide-in-from-top-1 duration-150"
-                    >
-                        {#each forgeVersions as version}
-                            <button
-                                type="button"
-                                onclick={() => { selectedForgeVersion = version.version; isForgeDropdownOpen = false; }}
-                                class="w-full flex items-center justify-between px-3 py-2 text-sm text-left
-                                       transition-colors outline-none cursor-pointer
-                                       {version.version === selectedForgeVersion 
-                                         ? 'bg-indigo-600 text-white' 
-                                         : 'text-gray-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800'}"
-                            >
-                                <span class="truncate">{version.version} {version.recommended ? "(Recommended)" : ""}</span>
-                                {#if version.version === selectedForgeVersion}
-                                    <Check size={14} class="shrink-0 ml-2" />
-                                {/if}
-                            </button>
-                        {/each}
-                    </div>
-                {/if}
-            </div>
-            </div>
-            
-            <button
-                class="w-full bg-orange-600 hover:bg-orange-500 disabled:opacity-50 disabled:cursor-not-allowed text-white py-2.5 px-4 rounded-sm font-bold text-sm transition-all flex items-center justify-center gap-2"
-                onclick={installModLoader}
-                disabled={isInstalling || !selectedForgeVersion}
-            >
-                {#if isInstalling}
-                    <Loader2 class="animate-spin" size={16} />
-                    Installing...
-                {:else}
-                    <Download size={16} />
-                    Install Forge {selectedForgeVersion}
-                {/if}
-            </button>
-        {/if}
-        </div>
-    {/if}
-  </div>
-</div>
diff --git a/ui/src/components/ParticleBackground.svelte b/ui/src/components/ParticleBackground.svelte
deleted file mode 100644
index 7644b1a..0000000
--- a/ui/src/components/ParticleBackground.svelte
+++ /dev/null
@@ -1,70 +0,0 @@
-<script lang="ts" module>
-  import { SaturnEffect } from "../lib/effects/SaturnEffect";
-  
-  // Global reference to the active Saturn effect for external control
-  let globalSaturnEffect: SaturnEffect | null = null;
-  
-  export function getSaturnEffect(): SaturnEffect | null {
-    return globalSaturnEffect;
-  }
-</script>
-
-<script lang="ts">
-  import { onMount, onDestroy } from "svelte";
-  import { ConstellationEffect } from "../lib/effects/ConstellationEffect";
-  import { settingsState } from "../stores/settings.svelte";
-
-  let canvas: HTMLCanvasElement;
-  let activeEffect: any;
-
-  function loadEffect() {
-    if (activeEffect) {
-      activeEffect.destroy();
-    }
-    
-    if (!canvas) return;
-
-    if (settingsState.settings.active_effect === "saturn") {
-      activeEffect = new SaturnEffect(canvas);
-      globalSaturnEffect = activeEffect;
-    } else {
-      activeEffect = new ConstellationEffect(canvas);
-      globalSaturnEffect = null;
-    }
-    
-    // Ensure correct size immediately
-    activeEffect.resize(window.innerWidth, window.innerHeight);
-  }
-
-  $effect(() => {
-    const _ = settingsState.settings.active_effect;
-    if (canvas) {
-        loadEffect();
-    }
-  });
-
-  onMount(() => {
-    const resizeObserver = new ResizeObserver(() => {
-      if (canvas && activeEffect) {
-         activeEffect.resize(window.innerWidth, window.innerHeight);
-      }
-    });
-    
-    resizeObserver.observe(document.body);
-    
-    return () => {
-      resizeObserver.disconnect();
-      if (activeEffect) activeEffect.destroy();
-    };
-  });
-  
-  onDestroy(() => {
-    if (activeEffect) activeEffect.destroy();
-    globalSaturnEffect = null;
-  });
-</script>
-
-<canvas
-  bind:this={canvas}
-  class="absolute inset-0 z-0 pointer-events-none"
-></canvas>
diff --git a/ui/src/components/SettingsView.svelte b/ui/src/components/SettingsView.svelte
deleted file mode 100644
index 0020506..0000000
--- a/ui/src/components/SettingsView.svelte
+++ /dev/null
@@ -1,1217 +0,0 @@
-<script lang="ts">
-  import { open } from "@tauri-apps/plugin-dialog";
-  import { settingsState } from "../stores/settings.svelte";
-  import CustomSelect from "./CustomSelect.svelte";
-  import ConfigEditorModal from "./ConfigEditorModal.svelte";
-  import { onMount } from "svelte";
-  import { RefreshCw, FileJson } from "lucide-svelte";
-
-  // Use convertFileSrc directly from settingsState.backgroundUrl for cleaner approach
-  // or use the imported one if passing raw path.
-  import { convertFileSrc } from "@tauri-apps/api/core";
-
-  const effectOptions = [
-    { value: "saturn", label: "Saturn" },
-    { value: "constellation", label: "Network (Constellation)" }
-  ];
-
-  const logServiceOptions = [
-    { value: "paste.rs", label: "paste.rs (Free, No Account)" },
-    { value: "pastebin.com", label: "pastebin.com (Requires API Key)" }
-  ];
-
-  const llmProviderOptions = [
-    { value: "ollama", label: "Ollama (Local)" },
-    { value: "openai", label: "OpenAI (Remote)" }
-  ];
-
-  const languageOptions = [
-    { value: "auto", label: "Auto (Match User)" },
-    { value: "English", label: "English" },
-    { value: "Chinese", label: "中文" },
-    { value: "Japanese", label: "日本語" },
-    { value: "Korean", label: "한국어" },
-    { value: "Spanish", label: "Español" },
-    { value: "French", label: "Français" },
-    { value: "German", label: "Deutsch" },
-    { value: "Russian", label: "Русский" },
-  ];
-
-  const ttsProviderOptions = [
-    { value: "disabled", label: "Disabled" },
-    { value: "piper", label: "Piper TTS (Local)" },
-    { value: "edge", label: "Edge TTS (Online)" },
-  ];
-
-  const personas = [
-    {
-      value: "default",
-      label: "Minecraft Expert (Default)",
-      prompt: "You are a helpful Minecraft expert assistant. You help players with game issues, mod installation, performance optimization, and gameplay tips. Analyze any game logs provided and give concise, actionable advice."
-    },
-    {
-      value: "technical",
-      label: "Technical Debugger",
-      prompt: "You are a technical support specialist for Minecraft. Focus strictly on analyzing logs, identifying crash causes, and providing technical solutions. Be precise and avoid conversational filler."
-    },
-    {
-      value: "concise",
-      label: "Concise Helper",
-      prompt: "You are a direct and concise assistant. Provide answers in as few words as possible while remaining accurate. Use bullet points for lists."
-    },
-    {
-      value: "explain",
-      label: "Teacher / Explainer",
-      prompt: "You are a patient teacher. Explain Minecraft concepts, redstone mechanics, and mod features in simple, easy-to-understand terms suitable for beginners."
-    },
-    {
-      value: "pirate",
-      label: "Pirate Captain",
-      prompt: "You are a salty Minecraft Pirate Captain! Yarr! Speak like a pirate while helping the crew (the user) with their blocky adventures. Use terms like 'matey', 'landlubber', and 'treasure'."
-    }
-  ];
-
-  let selectedPersona = $state("");
-
-  function applyPersona(value: string) {
-      const persona = personas.find(p => p.value === value);
-      if (persona) {
-          settingsState.settings.assistant.system_prompt = persona.prompt;
-          selectedPersona = value; // Keep selected to show what's active
-      }
-  }
-
-  function resetSystemPrompt() {
-      const defaultPersona = personas.find(p => p.value === "default");
-      if (defaultPersona) {
-          settingsState.settings.assistant.system_prompt = defaultPersona.prompt;
-          selectedPersona = "default";
-      }
-  }
-
-  // Load models when assistant settings are shown
-  function loadModelsForProvider() {
-    if (settingsState.settings.assistant.llm_provider === "ollama") {
-      settingsState.loadOllamaModels();
-    } else if (settingsState.settings.assistant.llm_provider === "openai") {
-      settingsState.loadOpenaiModels();
-    }
-  }
-
-  async function selectBackground() {
-    try {
-      const selected = await open({
-        multiple: false,
-        filters: [
-          {
-            name: "Images",
-            extensions: ["png", "jpg", "jpeg", "webp", "gif"],
-          },
-        ],
-      });
-
-      if (selected && typeof selected === "string") {
-        settingsState.settings.custom_background_path = selected;
-        settingsState.saveSettings();
-      }
-    } catch (e) {
-      console.error("Failed to select background:", e);
-    }
-  }
-
-  function clearBackground() {
-    settingsState.settings.custom_background_path = undefined;
-    settingsState.saveSettings();
-  }
-
-  let migrating = $state(false);
-  async function runMigrationToSharedCaches() {
-    if (migrating) return;
-    migrating = true;
-    try {
-      const { invoke } = await import("@tauri-apps/api/core");
-      const result = await invoke<{
-        moved_files: number;
-        hardlinks: number;
-        copies: number;
-        saved_mb: number;
-      }>("migrate_shared_caches");
-      
-      // Reload settings to reflect changes
-      await settingsState.loadSettings();
-      
-      // Show success message
-      const msg = `Migration complete! ${result.moved_files} files (${result.hardlinks} hardlinks, ${result.copies} copies), ${result.saved_mb.toFixed(2)} MB saved.`;
-      console.log(msg);
-      alert(msg);
-    } catch (e) {
-      console.error("Migration failed:", e);
-      alert(`Migration failed: ${e}`);
-    } finally {
-      migrating = false;
-    }
-  }
-</script>
-
-<div class="h-full flex flex-col p-6 overflow-hidden">
-  <div class="flex items-center justify-between mb-6">
-     <h2 class="text-3xl font-black bg-clip-text text-transparent bg-gradient-to-r dark:from-white dark:to-white/60 from-gray-900 to-gray-600">Settings</h2>
-     
-     <button 
-        onclick={() => settingsState.openConfigEditor()}
-        class="p-2 hover:bg-white/10 rounded-lg text-zinc-400 hover:text-white transition-colors flex items-center gap-2 text-sm border border-transparent hover:border-white/5"
-        title="Open Settings JSON"
-     >
-        <FileJson size={18} />
-        <span class="hidden sm:inline">Open JSON</span>
-     </button>
-  </div>
-
-  <div class="flex-1 overflow-y-auto pr-2 space-y-6 custom-scrollbar pb-10">
-
-    <!-- Appearance / Background -->
-    <div class="dark:bg-[#09090b] bg-white p-6 rounded-sm border dark:border-white/10 border-gray-200 shadow-sm">
-      <h3 class="text-xs font-bold uppercase tracking-widest dark:text-white/40 text-black/40 mb-6 flex items-center gap-2">
-        Appearance
-      </h3>
-      
-      <div class="space-y-4">
-        <div>
-          <label class="block text-sm font-medium dark:text-white/70 text-black/70 mb-3">Custom Background Image</label>
-          
-          <div class="flex items-center gap-6">
-            <!-- Preview -->
-            <div class="w-40 h-24 rounded-xl overflow-hidden dark:bg-black/50 bg-gray-200 border dark:border-white/10 border-black/10 relative group shadow-lg">
-              {#if settingsState.settings.custom_background_path}
-                <img
-                  src={convertFileSrc(settingsState.settings.custom_background_path)}
-                  alt="Background Preview"
-                  class="w-full h-full object-cover"
-                  onerror={(e) => {
-                    console.error("Failed to load image:", settingsState.settings.custom_background_path, e);
-                    // e.currentTarget.style.display = 'none'; 
-                  }}
-                />
-              {:else}
-                <div class="w-full h-full bg-gradient-to-br from-emerald-900 via-zinc-900 to-indigo-950 opacity-100"></div>
-                <div class="absolute inset-0 flex items-center justify-center text-[10px] text-white/50 bg-black/20 ">Default Gradient</div>
-              {/if}
-            </div>
-
-            <!-- Actions -->
-            <div class="flex flex-col gap-2">
-              <button
-                onclick={selectBackground}
-                class="dark:bg-white/10 dark:hover:bg-white/20 bg-black/5 hover:bg-black/10 dark:text-white text-black px-4 py-2 rounded-lg text-sm transition-colors border dark:border-white/5 border-black/5"
-              >
-                Select Image
-              </button>
-              
-              {#if settingsState.settings.custom_background_path}
-                <button
-                  onclick={clearBackground}
-                  class="text-red-400 hover:text-red-300 text-sm px-4 py-1 text-left transition-colors"
-                >
-                  Reset to Default
-                </button>
-              {/if}
-            </div>
-          </div>
-          <p class="text-xs dark:text-white/30 text-black/40 mt-3">
-            Select an image from your computer to replace the default gradient background.
-            Supported formats: PNG, JPG, WEBP, GIF.
-          </p>
-        </div>
-
-        <!-- Visual Settings -->
-        <div class="pt-4 border-t dark:border-white/5 border-black/5 space-y-4">
-             <div class="flex items-center justify-between">
-                <div>
-                   <h4 class="text-sm font-medium dark:text-white/90 text-black/80" id="visual-effects-label">Visual Effects</h4>
-                   <p class="text-xs dark:text-white/40 text-black/50 mt-1">Enable particle effects and animated gradients. (Default: On)</p>
-                </div>
-                <button 
-                    aria-labelledby="visual-effects-label"
-                    onclick={() => { settingsState.settings.enable_visual_effects = !settingsState.settings.enable_visual_effects; settingsState.saveSettings(); }}
-                    class="w-11 h-6 rounded-full transition-colors duration-200 ease-in-out relative focus:outline-none {settingsState.settings.enable_visual_effects ? 'bg-indigo-500' : 'dark:bg-white/10 bg-black/10'}"
-                >
-                    <div class="absolute top-1 left-1 bg-white w-4 h-4 rounded-full shadow-sm transition-transform duration-200 ease-in-out {settingsState.settings.enable_visual_effects ? 'translate-x-5' : 'translate-x-0'}"></div>
-                </button>
-             </div>
-
-             {#if settingsState.settings.enable_visual_effects}
-                 <div class="flex items-center justify-between pl-2 border-l-2 dark:border-white/5 border-black/5 ml-1">
-                    <div>
-                       <h4 class="text-sm font-medium dark:text-white/90 text-black/80" id="theme-effect-label">Theme Effect</h4>
-                       <p class="text-xs dark:text-white/40 text-black/50 mt-1">Select the active visual theme.</p>
-                    </div>
-                    <CustomSelect
-                        options={effectOptions}
-                        bind:value={settingsState.settings.active_effect}
-                        onchange={() => settingsState.saveSettings()}
-                        class="w-52"
-                    />
-                 </div>
-             {/if}
-
-             <div class="flex items-center justify-between">
-                <div>
-                   <h4 class="text-sm font-medium dark:text-white/90 text-black/80" id="gpu-acceleration-label">GPU Acceleration</h4>
-                   <p class="text-xs dark:text-white/40 text-black/50 mt-1">Enable GPU acceleration for the interface. (Default: Off, Requires Restart)</p>
-                </div>
-                <button 
-                    aria-labelledby="gpu-acceleration-label"
-                    onclick={() => { settingsState.settings.enable_gpu_acceleration = !settingsState.settings.enable_gpu_acceleration; settingsState.saveSettings(); }}
-                    class="w-11 h-6 rounded-full transition-colors duration-200 ease-in-out relative focus:outline-none {settingsState.settings.enable_gpu_acceleration ? 'bg-indigo-500' : 'dark:bg-white/10 bg-black/10'}"
-                >
-                    <div class="absolute top-1 left-1 bg-white w-4 h-4 rounded-full shadow-sm transition-transform duration-200 ease-in-out {settingsState.settings.enable_gpu_acceleration ? 'translate-x-5' : 'translate-x-0'}"></div>
-                </button>
-             </div>
-             
-             <!-- Color Theme Switcher -->
-             <div class="flex items-center justify-between pt-4 border-t dark:border-white/5 border-black/5 opacity-50 cursor-not-allowed">
-                <div>
-                   <h4 class="text-sm font-medium dark:text-white/90 text-black/80" id="color-theme-label">Color Theme</h4>
-                   <p class="text-xs dark:text-white/40 text-black/50 mt-1">Interface color mode. (Locked to Dark)</p>
-                </div>
-                <div class="flex items-center bg-black/5 dark:bg-white/5 rounded-lg p-1 pointer-events-none">
-                    <button
-                        disabled
-                        class="px-3 py-1 rounded-md text-xs font-medium transition-all text-gray-500 dark:text-gray-600"
-                    >
-                        Light
-                    </button>
-                    <button
-                        disabled
-                        class="px-3 py-1 rounded-md text-xs font-medium transition-all bg-indigo-500 text-white shadow-sm"
-                    >
-                        Dark
-                    </button>
-                </div>
-             </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Java Path -->
-    <div class="dark:bg-[#09090b] bg-white p-6 rounded-sm border dark:border-white/10 border-gray-200 shadow-sm">
-      <h3 class="text-xs font-bold uppercase tracking-widest text-white/40 mb-6 flex items-center gap-2">
-        Java Environment
-      </h3>
-      <div class="space-y-4">
-        <div>
-             <label for="java-path" class="block text-sm font-medium text-white/70 mb-2">Java Executable Path</label>
-             <div class="flex gap-2">
-                <input
-                id="java-path"
-                bind:value={settingsState.settings.java_path}
-                type="text"
-                class="bg-black/40 text-white flex-1 px-4 py-3 rounded-xl border border-white/10 focus:border-indigo-500/50 outline-none font-mono text-xs transition-colors"
-                placeholder="e.g. java, /usr/bin/java"
-                />
-                <button
-                onclick={() => settingsState.detectJava()}
-                disabled={settingsState.isDetectingJava}
-                class="bg-white/10 hover:bg-white/20 disabled:opacity-50 text-white px-4 py-2 rounded-xl border border-white/5 transition-colors whitespace-nowrap text-sm font-medium"
-                >
-                {settingsState.isDetectingJava ? "Detecting..." : "Auto Detect"}
-                </button>
-                <button
-                onclick={() => settingsState.openJavaDownloadModal()}
-                class="bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2 rounded-xl transition-colors whitespace-nowrap text-sm font-medium"
-                >
-                Download Java
-                </button>
-            </div>
-        </div>
-      
-      {#if settingsState.javaInstallations.length > 0}
-        <div class="mt-4 space-y-2">
-          <p class="text-[10px] text-white/30 uppercase font-bold tracking-wider">Detected Installations</p>
-          {#each settingsState.javaInstallations as java}
-            <button
-              onclick={() => settingsState.selectJava(java.path)}
-              class="w-full text-left p-3 rounded-lg border transition-all duration-200 group
-              {settingsState.settings.java_path === java.path 
-                ? 'bg-indigo-500/20 border-indigo-500/30' 
-                : 'bg-black/20 border-white/5 hover:bg-white/5 hover:border-white/10'}"
-            >
-              <div class="flex justify-between items-center">
-                <div>
-                  <span class="text-white font-mono text-xs font-bold">{java.version}</span>
-                  <span class="text-white/40 text-[10px] ml-2">{java.is_64bit ? "64-bit" : "32-bit"}</span>
-                </div>
-                {#if settingsState.settings.java_path === java.path}
-                  <span class="text-indigo-300 text-[10px] font-bold uppercase tracking-wider">Selected</span>
-                {/if}
-              </div>
-              <div class="text-white/30 text-[10px] font-mono truncate mt-1 group-hover:text-white/50">{java.path}</div>
-            </button>
-          {/each}
-        </div>
-      {/if}
-      </div>
-    </div>
-
-    <!-- Memory -->
-    <div class="dark:bg-[#09090b] bg-white p-6 rounded-sm border dark:border-white/10 border-gray-200 shadow-sm">
-      <h3 class="text-xs font-bold uppercase tracking-widest text-white/40 mb-6 flex items-center gap-2">
-        Memory Allocation (RAM)
-      </h3>
-      <div class="grid grid-cols-2 gap-6">
-        <div>
-          <label for="min-memory" class="block text-sm font-medium text-white/70 mb-2">Minimum (MB)</label>
-          <input
-            id="min-memory"
-            bind:value={settingsState.settings.min_memory}
-            type="number"
-            class="bg-black/40 text-white w-full px-4 py-3 rounded-xl border border-white/10 focus:border-indigo-500/50 outline-none transition-colors"
-          />
-        </div>
-        <div>
-          <label for="max-memory" class="block text-sm font-medium text-white/70 mb-2">Maximum (MB)</label>
-          <input
-            id="max-memory"
-            bind:value={settingsState.settings.max_memory}
-            type="number"
-            class="bg-black/40 text-white w-full px-4 py-3 rounded-xl border border-white/10 focus:border-indigo-500/50 outline-none transition-colors"
-          />
-        </div>
-      </div>
-    </div>
-
-    <!-- Resolution -->
-    <div class="dark:bg-[#09090b] bg-white p-6 rounded-sm border dark:border-white/10 border-gray-200 shadow-sm">
-      <h3 class="text-xs font-bold uppercase tracking-widest text-white/40 mb-6 flex items-center gap-2">
-        Game Window Size
-      </h3>
-      <div class="grid grid-cols-2 gap-6">
-        <div>
-          <label for="window-width" class="block text-sm font-medium text-white/70 mb-2">Width</label>
-          <input
-            id="window-width"
-            bind:value={settingsState.settings.width}
-            type="number"
-            class="bg-black/40 text-white w-full px-4 py-3 rounded-xl border border-white/10 focus:border-indigo-500/50 outline-none transition-colors"
-          />
-        </div>
-        <div>
-          <label for="window-height" class="block text-sm font-medium text-white/70 mb-2">Height</label>
-          <input
-            id="window-height"
-            bind:value={settingsState.settings.height}
-            type="number"
-            class="bg-black/40 text-white w-full px-4 py-3 rounded-xl border border-white/10 focus:border-indigo-500/50 outline-none transition-colors"
-          />
-        </div>
-      </div>
-    </div>
-
-    <!-- Download Settings -->
-    <div class="dark:bg-[#09090b] bg-white p-6 rounded-sm border dark:border-white/10 border-gray-200 shadow-sm">
-        <h3 class="text-xs font-bold uppercase tracking-widest text-white/40 mb-6 flex items-center gap-2">
-            Network
-        </h3>
-        <div>
-            <label for="download-threads" class="block text-sm font-medium text-white/70 mb-2">Concurrent Download Threads</label>
-            <input
-              id="download-threads"
-              bind:value={settingsState.settings.download_threads}
-              type="number"
-              min="1"
-              max="128"
-              class="bg-black/40 text-white w-full px-4 py-3 rounded-xl border border-white/10 focus:border-indigo-500/50 outline-none transition-colors"
-            />
-            <p class="text-xs text-white/30 mt-2">Higher values usually mean faster downloads but use more CPU/Network.</p>
-        </div>
-    </div>
-
-    <!-- Storage & Caches -->
-    <div class="dark:bg-[#09090b] bg-white p-6 rounded-sm border dark:border-white/10 border-gray-200 shadow-sm">
-      <h3 class="text-xs font-bold uppercase tracking-widest text-white/40 mb-6 flex items-center gap-2">Storage & Version Caches</h3>
-      <div class="space-y-4">
-        <div class="flex items-center justify-between">
-          <div>
-            <h4 class="text-sm font-medium text-white/90" id="shared-caches-label">Use Shared Caches</h4>
-            <p class="text-xs text-white/40 mt-1">Store versions/libraries/assets in a global cache shared by all instances.</p>
-          </div>
-          <button
-            aria-labelledby="shared-caches-label"
-            onclick={() => { settingsState.settings.use_shared_caches = !settingsState.settings.use_shared_caches; settingsState.saveSettings(); }}
-            class="w-11 h-6 rounded-full transition-colors duration-200 ease-in-out relative focus:outline-none {settingsState.settings.use_shared_caches ? 'bg-indigo-500' : 'bg-white/10'}"
-          >
-            <div class="absolute top-1 left-1 bg-white w-4 h-4 rounded-full shadow-sm transition-transform duration-200 ease-in-out {settingsState.settings.use_shared_caches ? 'translate-x-5' : 'translate-x-0'}"></div>
-          </button>
-        </div>
-
-        <div class="flex items-center justify-between">
-          <div>
-            <h4 class="text-sm font-medium text-white/90" id="legacy-storage-label">Keep Legacy Per-Instance Storage</h4>
-            <p class="text-xs text-white/40 mt-1">Do not migrate existing instance caches; keep current layout.</p>
-          </div>
-          <button
-            aria-labelledby="legacy-storage-label"
-            onclick={() => { settingsState.settings.keep_legacy_per_instance_storage = !settingsState.settings.keep_legacy_per_instance_storage; settingsState.saveSettings(); }}
-            class="w-11 h-6 rounded-full transition-colors duration-200 ease-in-out relative focus:outline-none {settingsState.settings.keep_legacy_per_instance_storage ? 'bg-indigo-500' : 'bg-white/10'}"
-          >
-            <div class="absolute top-1 left-1 bg-white w-4 h-4 rounded-full shadow-sm transition-transform duration-200 ease-in-out {settingsState.settings.keep_legacy_per_instance_storage ? 'translate-x-5' : 'translate-x-0'}"></div>
-          </button>
-        </div>
-
-        <div class="flex items-center justify-between pt-2 border-t border-white/10">
-          <div>
-            <h4 class="text-sm font-medium text-white/90">Run Migration</h4>
-            <p class="text-xs text-white/40 mt-1">Hard-link or copy existing per-instance caches into the shared cache.</p>
-          </div>
-          <button 
-            onclick={runMigrationToSharedCaches} 
-            disabled={migrating}
-            class="px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white text-sm disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            {migrating ? "Migrating..." : "Migrate Now"}
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!-- Feature Flags -->
-    <div class="dark:bg-[#09090b] bg-white p-6 rounded-sm border dark:border-white/10 border-gray-200 shadow-sm">
-      <h3 class="text-xs font-bold uppercase tracking-widest text-white/40 mb-6 flex items-center gap-2">Feature Flags (Launcher Arguments)</h3>
-      <div class="space-y-4">
-        <div class="flex items-center justify-between">
-          <div>
-            <h4 class="text-sm font-medium text-white/90" id="demo-user-label">Demo User</h4>
-            <p class="text-xs text-white/40 mt-1">Enable demo-related arguments when rules require them.</p>
-          </div>
-          <button
-            aria-labelledby="demo-user-label"
-            onclick={() => { settingsState.settings.feature_flags.demo_user = !settingsState.settings.feature_flags.demo_user; settingsState.saveSettings(); }}
-            class="w-11 h-6 rounded-full transition-colors duration-200 ease-in-out relative focus:outline-none {settingsState.settings.feature_flags.demo_user ? 'bg-indigo-500' : 'bg-white/10'}"
-          >
-            <div class="absolute top-1 left-1 bg-white w-4 h-4 rounded-full shadow-sm transition-transform duration-200 ease-in-out {settingsState.settings.feature_flags.demo_user ? 'translate-x-5' : 'translate-x-0'}"></div>
-          </button>
-        </div>
-
-        <div class="flex items-center justify-between">
-          <div>
-            <h4 class="text-sm font-medium text-white/90" id="quick-play-label">Quick Play</h4>
-            <p class="text-xs text-white/40 mt-1">Enable quick play singleplayer/multiplayer arguments.</p>
-          </div>
-          <button
-            aria-labelledby="quick-play-label"
-            onclick={() => { settingsState.settings.feature_flags.quick_play_enabled = !settingsState.settings.feature_flags.quick_play_enabled; settingsState.saveSettings(); }}
-            class="w-11 h-6 rounded-full transition-colors duration-200 ease-in-out relative focus:outline-none {settingsState.settings.feature_flags.quick_play_enabled ? 'bg-indigo-500' : 'bg-white/10'}"
-          >
-            <div class="absolute top-1 left-1 bg-white w-4 h-4 rounded-full shadow-sm transition-transform duration-200 ease-in-out {settingsState.settings.feature_flags.quick_play_enabled ? 'translate-x-5' : 'translate-x-0'}"></div>
-          </button>
-        </div>
-
-        {#if settingsState.settings.feature_flags.quick_play_enabled}
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 pl-2 border-l-2 border-white/10">
-            <div>
-              <label class="block text-sm font-medium text-white/70 mb-2">Singleplayer World Path</label>
-              <input
-                type="text"
-                bind:value={settingsState.settings.feature_flags.quick_play_path}
-                placeholder="/path/to/saves/MyWorld"
-                class="bg-black/40 text-white w-full px-4 py-3 rounded-xl border border-white/10 focus:border-indigo-500/50 outline-none font-mono text-xs transition-colors"
-              />
-            </div>
-            <div class="flex items-center justify-between">
-              <div>
-                <h4 class="text-sm font-medium text-white/90" id="qp-singleplayer-label">Prefer Singleplayer</h4>
-                <p class="text-xs text-white/40 mt-1">If enabled, use singleplayer quick play path.</p>
-              </div>
-              <button
-                aria-labelledby="qp-singleplayer-label"
-                onclick={() => { settingsState.settings.feature_flags.quick_play_singleplayer = !settingsState.settings.feature_flags.quick_play_singleplayer; settingsState.saveSettings(); }}
-                class="w-11 h-6 rounded-full transition-colors duration-200 ease-in-out relative focus:outline-none {settingsState.settings.feature_flags.quick_play_singleplayer ? 'bg-indigo-500' : 'bg-white/10'}"
-              >
-                <div class="absolute top-1 left-1 bg-white w-4 h-4 rounded-full shadow-sm transition-transform duration-200 ease-in-out {settingsState.settings.feature_flags.quick_play_singleplayer ? 'translate-x-5' : 'translate-x-0'}"></div>
-              </button>
-            </div>
-            <div>
-              <label class="block text-sm font-medium text-white/70 mb-2">Multiplayer Server Address</label>
-              <input
-                type="text"
-                bind:value={settingsState.settings.feature_flags.quick_play_multiplayer_server}
-                placeholder="example.org:25565"
-                class="bg-black/40 text-white w-full px-4 py-3 rounded-xl border border-white/10 focus:border-indigo-500/50 outline-none font-mono text-xs transition-colors"
-              />
-            </div>
-          </div>
-        {/if}
-      </div>
-    </div>
-
-    <!-- Debug / Logs -->
-    <div class="dark:bg-[#09090b] bg-white p-6 rounded-sm border dark:border-white/10 border-gray-200 shadow-sm">
-        <h3 class="text-xs font-bold uppercase tracking-widest text-white/40 mb-6 flex items-center gap-2">
-            Debug & Logs
-        </h3>
-        <div class="space-y-4">
-            <div>
-                <label for="log-service" class="block text-sm font-medium text-white/70 mb-2">Log Upload Service</label>
-                <CustomSelect
-                    options={logServiceOptions}
-                    bind:value={settingsState.settings.log_upload_service}
-                    class="w-full"
-                />
-            </div>
-
-            {#if settingsState.settings.log_upload_service === 'pastebin.com'}
-                <div>
-                    <label for="pastebin-key" class="block text-sm font-medium text-white/70 mb-2">Pastebin Dev API Key</label>
-                    <input
-                        id="pastebin-key"
-                        type="password"
-                        bind:value={settingsState.settings.pastebin_api_key}
-                        placeholder="Enter your API Key"
-                        class="dark:bg-zinc-900 bg-white dark:text-white text-black w-full px-4 py-3 rounded-xl border dark:border-zinc-700 border-gray-300 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500/30 outline-none transition-colors placeholder:text-zinc-500"
-                    />
-                    <p class="text-xs text-white/30 mt-2">
-                        Get your API key from <a href="https://pastebin.com/doc_api#1" target="_blank" class="text-indigo-400 hover:underline">Pastebin API Documentation</a>.
-                    </p>
-                </div>
-            {/if}
-        </div>
-    </div>
-
-    <!-- AI Assistant -->
-    <div class="dark:bg-[#09090b] bg-white p-6 rounded-sm border dark:border-white/10 border-gray-200 shadow-sm">
-        <h3 class="text-xs font-bold uppercase tracking-widest text-white/40 mb-6 flex items-center gap-2">
-            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <rect x="3" y="11" width="18" height="10" rx="2"/>
-                <circle cx="12" cy="5" r="2"/>
-                <path d="M12 7v4"/>
-                <circle cx="8" cy="16" r="1" fill="currentColor"/>
-                <circle cx="16" cy="16" r="1" fill="currentColor"/>
-            </svg>
-            AI Assistant
-        </h3>
-        <div class="space-y-6">
-            <!-- Enable/Disable -->
-            <div class="flex items-center justify-between">
-                <div>
-                   <h4 class="text-sm font-medium dark:text-white/90 text-black/80" id="assistant-enabled-label">Enable Assistant</h4>
-                   <p class="text-xs dark:text-white/40 text-black/50 mt-1">Toggle the AI assistant feature on or off.</p>
-                </div>
-                <button 
-                    aria-labelledby="assistant-enabled-label"
-                    onclick={() => { settingsState.settings.assistant.enabled = !settingsState.settings.assistant.enabled; settingsState.saveSettings(); }}
-                    class="w-11 h-6 rounded-full transition-colors duration-200 ease-in-out relative focus:outline-none {settingsState.settings.assistant.enabled ? 'bg-indigo-500' : 'dark:bg-white/10 bg-black/10'}"
-                >
-                    <div class="absolute top-1 left-1 bg-white w-4 h-4 rounded-full shadow-sm transition-transform duration-200 ease-in-out {settingsState.settings.assistant.enabled ? 'translate-x-5' : 'translate-x-0'}"></div>
-                </button>
-            </div>
-
-            {#if settingsState.settings.assistant.enabled}
-                <!-- LLM Provider Section -->
-                <div class="pt-4 border-t dark:border-white/5 border-black/5">
-                    <h4 class="text-xs font-bold uppercase tracking-widest text-white/30 mb-4">Language Model</h4>
-                    
-                    <div class="space-y-4">
-                        <div>
-                            <label for="llm-provider" class="block text-sm font-medium text-white/70 mb-2">Provider</label>
-                            <CustomSelect
-                                options={llmProviderOptions}
-                                bind:value={settingsState.settings.assistant.llm_provider}
-                                onchange={() => settingsState.saveSettings()}
-                                class="w-full"
-                            />
-                        </div>
-
-                        {#if settingsState.settings.assistant.llm_provider === 'ollama'}
-                            <!-- Ollama Settings -->
-                            <div class="pl-4 border-l-2 border-indigo-500/30 space-y-4">
-                                <div>
-                                    <label for="ollama-endpoint" class="block text-sm font-medium text-white/70 mb-2">API Endpoint</label>
-                                    <div class="flex gap-2">
-                                        <input
-                                            id="ollama-endpoint"
-                                            type="text"
-                                            bind:value={settingsState.settings.assistant.ollama_endpoint}
-                                            placeholder="http://localhost:11434"
-                                            class="bg-black/40 text-white flex-1 px-4 py-3 rounded-xl border border-white/10 focus:border-indigo-500/50 outline-none font-mono text-xs transition-colors"
-                                        />
-                                        <button
-                                            onclick={() => settingsState.loadOllamaModels()}
-                                            disabled={settingsState.isLoadingOllamaModels}
-                                            class="px-4 py-2 bg-white/10 hover:bg-white/20 disabled:opacity-50 text-white rounded-xl border border-white/5 transition-colors whitespace-nowrap text-sm font-medium flex items-center gap-2"
-                                            title="Refresh models"
-                                        >
-                                            <RefreshCw size={14} class={settingsState.isLoadingOllamaModels ? "animate-spin" : ""} />
-                                            <span class="hidden sm:inline">Refresh</span>
-                                        </button>
-                                    </div>
-                                    <p class="text-xs text-white/30 mt-2">
-                                        Default: http://localhost:11434. Make sure Ollama is running.
-                                    </p>
-                                </div>
-
-                                <div>
-                                    <div class="flex items-center justify-between mb-2">
-                                        <label for="ollama-model" class="block text-sm font-medium text-white/70">Model</label>
-                                        {#if settingsState.ollamaModels.length > 0}
-                                            <span class="text-[10px] text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded-full">
-                                                {settingsState.ollamaModels.length} installed
-                                            </span>
-                                        {/if}
-                                    </div>
-                                    
-                                    {#if settingsState.isLoadingOllamaModels}
-                                        <div class="bg-black/40 text-white/50 w-full px-4 py-3 rounded-xl border border-white/10 text-sm flex items-center gap-2">
-                                            <RefreshCw size={14} class="animate-spin" />
-                                            Loading models...
-                                        </div>
-                                    {:else if settingsState.ollamaModelsError}
-                                        <div class="bg-red-500/10 text-red-400 w-full px-4 py-3 rounded-xl border border-red-500/20 text-sm">
-                                            {settingsState.ollamaModelsError}
-                                        </div>
-                                        <CustomSelect
-                                            options={settingsState.currentModelOptions}
-                                            bind:value={settingsState.settings.assistant.ollama_model}
-                                            onchange={() => settingsState.saveSettings()}
-                                            class="w-full mt-2"
-                                            allowCustom={true}
-                                        />
-                                    {:else if settingsState.ollamaModels.length === 0}
-                                        <div class="bg-amber-500/10 text-amber-400 w-full px-4 py-3 rounded-xl border border-amber-500/20 text-sm">
-                                            No models found. Click Refresh to load installed models.
-                                        </div>
-                                        <CustomSelect
-                                            options={settingsState.currentModelOptions}
-                                            bind:value={settingsState.settings.assistant.ollama_model}
-                                            onchange={() => settingsState.saveSettings()}
-                                            class="w-full mt-2"
-                                            allowCustom={true}
-                                        />
-                                    {:else}
-                                        <CustomSelect
-                                            options={settingsState.currentModelOptions}
-                                            bind:value={settingsState.settings.assistant.ollama_model}
-                                            onchange={() => settingsState.saveSettings()}
-                                            class="w-full"
-                                            allowCustom={true}
-                                        />
-                                    {/if}
-                                    
-                                    <p class="text-xs text-white/30 mt-2">
-                                        Run <code class="bg-black/30 px-1 rounded">ollama pull {'<model>'}</code> to download new models. Or type a custom model name above.
-                                    </p>
-                                </div>
-                            </div>
-                        {:else if settingsState.settings.assistant.llm_provider === 'openai'}
-                            <!-- OpenAI Settings -->
-                            <div class="pl-4 border-l-2 border-emerald-500/30 space-y-4">
-                                <div>
-                                    <label for="openai-key" class="block text-sm font-medium text-white/70 mb-2">API Key</label>
-                                    <div class="flex gap-2">
-                                        <input
-                                            id="openai-key"
-                                            type="password"
-                                            bind:value={settingsState.settings.assistant.openai_api_key}
-                                            placeholder="sk-..."
-                                            class="bg-black/40 text-white flex-1 px-4 py-3 rounded-xl border border-white/10 focus:border-indigo-500/50 outline-none font-mono text-xs transition-colors"
-                                        />
-                                        <button
-                                            onclick={() => settingsState.loadOpenaiModels()}
-                                            disabled={settingsState.isLoadingOpenaiModels || !settingsState.settings.assistant.openai_api_key}
-                                            class="px-4 py-2 bg-white/10 hover:bg-white/20 disabled:opacity-50 text-white rounded-xl border border-white/5 transition-colors whitespace-nowrap text-sm font-medium flex items-center gap-2"
-                                            title="Refresh models"
-                                        >
-                                            <RefreshCw size={14} class={settingsState.isLoadingOpenaiModels ? "animate-spin" : ""} />
-                                            <span class="hidden sm:inline">Load</span>
-                                        </button>
-                                    </div>
-                                    <p class="text-xs text-white/30 mt-2">
-                                        Get your API key from <a href="https://platform.openai.com/api-keys" target="_blank" class="text-indigo-400 hover:underline">OpenAI Dashboard</a>.
-                                    </p>
-                                </div>
-
-                                <div>
-                                    <label for="openai-endpoint" class="block text-sm font-medium text-white/70 mb-2">API Endpoint</label>
-                                    <input
-                                        id="openai-endpoint"
-                                        type="text"
-                                        bind:value={settingsState.settings.assistant.openai_endpoint}
-                                        placeholder="https://api.openai.com/v1"
-                                        class="bg-black/40 text-white w-full px-4 py-3 rounded-xl border border-white/10 focus:border-indigo-500/50 outline-none font-mono text-xs transition-colors"
-                                    />
-                                    <p class="text-xs text-white/30 mt-2">
-                                        Use custom endpoint for Azure OpenAI or other compatible APIs.
-                                    </p>
-                                </div>
-
-                                <div>
-                                    <div class="flex items-center justify-between mb-2">
-                                        <label for="openai-model" class="block text-sm font-medium text-white/70">Model</label>
-                                        {#if settingsState.openaiModels.length > 0}
-                                            <span class="text-[10px] text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded-full">
-                                                {settingsState.openaiModels.length} available
-                                            </span>
-                                        {/if}
-                                    </div>
-                                    
-                                    {#if settingsState.isLoadingOpenaiModels}
-                                        <div class="bg-black/40 text-white/50 w-full px-4 py-3 rounded-xl border border-white/10 text-sm flex items-center gap-2">
-                                            <RefreshCw size={14} class="animate-spin" />
-                                            Loading models...
-                                        </div>
-                                    {:else if settingsState.openaiModelsError}
-                                        <div class="bg-red-500/10 text-red-400 w-full px-4 py-3 rounded-xl border border-red-500/20 text-sm mb-2">
-                                            {settingsState.openaiModelsError}
-                                        </div>
-                                        <CustomSelect
-                                            options={settingsState.currentModelOptions}
-                                            bind:value={settingsState.settings.assistant.openai_model}
-                                            onchange={() => settingsState.saveSettings()}
-                                            class="w-full"
-                                            allowCustom={true}
-                                        />
-                                    {:else}
-                                        <CustomSelect
-                                            options={settingsState.currentModelOptions}
-                                            bind:value={settingsState.settings.assistant.openai_model}
-                                            onchange={() => settingsState.saveSettings()}
-                                            class="w-full"
-                                            allowCustom={true}
-                                        />
-                                    {/if}
-                                </div>
-                            </div>
-                        {/if}
-                    </div>
-                </div>
-
-                <!-- Response Settings -->
-                <div class="pt-4 border-t dark:border-white/5 border-black/5">
-                    <h4 class="text-xs font-bold uppercase tracking-widest text-white/30 mb-4">Response Settings</h4>
-                    
-                    <div class="space-y-4">
-                        <div>
-                            <label for="response-lang" class="block text-sm font-medium text-white/70 mb-2">Response Language</label>
-                            <CustomSelect
-                                options={languageOptions}
-                                bind:value={settingsState.settings.assistant.response_language}
-                                onchange={() => settingsState.saveSettings()}
-                                class="w-full"
-                            />
-                        </div>
-
-                        <div>
-                            <div class="flex items-center justify-between mb-2">
-                                <label for="system-prompt" class="block text-sm font-medium text-white/70">System Prompt</label>
-                                <button 
-                                    onclick={resetSystemPrompt}
-                                    class="text-xs text-indigo-400 hover:text-indigo-300 transition-colors flex items-center gap-1 opacity-80 hover:opacity-100"
-                                    title="Reset to default prompt"
-                                >
-                                    <RefreshCw size={10} />
-                                    Reset
-                                </button>
-                            </div>
-
-                            <div class="mb-3">
-                                <CustomSelect 
-                                    options={personas.map(p => ({ value: p.value, label: p.label }))}
-                                    bind:value={selectedPersona}
-                                    placeholder="Load a preset persona..."
-                                    onchange={applyPersona}
-                                    class="w-full"
-                                />
-                            </div>
-
-                            <textarea
-                                id="system-prompt"
-                                bind:value={settingsState.settings.assistant.system_prompt}
-                                oninput={() => selectedPersona = ""} 
-                                rows="4"
-                                placeholder="You are a helpful Minecraft expert assistant..."
-                                class="bg-black/40 text-white w-full px-4 py-3 rounded-xl border border-white/10 focus:border-indigo-500/50 outline-none text-sm transition-colors resize-none"
-                            ></textarea>
-                            <p class="text-xs text-white/30 mt-2">
-                                Customize how the assistant behaves and responds.
-                            </p>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- TTS Settings -->
-                <div class="pt-4 border-t dark:border-white/5 border-black/5">
-                    <h4 class="text-xs font-bold uppercase tracking-widest text-white/30 mb-4">Text-to-Speech (Coming Soon)</h4>
-                    
-                    <div class="space-y-4 opacity-50 pointer-events-none">
-                        <div class="flex items-center justify-between">
-                            <div>
-                               <h4 class="text-sm font-medium dark:text-white/90 text-black/80">Enable TTS</h4>
-                               <p class="text-xs dark:text-white/40 text-black/50 mt-1">Read assistant responses aloud.</p>
-                            </div>
-                            <button 
-                                disabled
-                                class="w-11 h-6 rounded-full transition-colors duration-200 ease-in-out relative focus:outline-none dark:bg-white/10 bg-black/10"
-                            >
-                                <div class="absolute top-1 left-1 bg-white w-4 h-4 rounded-full shadow-sm transition-transform duration-200 ease-in-out translate-x-0"></div>
-                            </button>
-                        </div>
-
-                        <div>
-                            <label class="block text-sm font-medium text-white/70 mb-2">TTS Provider</label>
-                            <CustomSelect
-                                options={ttsProviderOptions}
-                                value="disabled"
-                                class="w-full"
-                            />
-                        </div>
-                    </div>
-                </div>
-            {/if}
-        </div>
-    </div>
-
-    <div class="pt-4 flex justify-end">
-      <button
-        onclick={() => settingsState.saveSettings()}
-        class="bg-gradient-to-r from-emerald-600 to-green-600 hover:from-emerald-500 hover:to-green-500 text-white font-bold py-3 px-8 rounded-xl shadow-lg shadow-emerald-500/20 transition-all hover:scale-105 active:scale-95"
-      >
-        Save Settings
-      </button>
-    </div>
-  </div>
-</div>
-
-{#if settingsState.showConfigEditor}
-    <ConfigEditorModal />
-{/if}
-
-<!-- Java Download Modal -->
-{#if settingsState.showJavaDownloadModal}
-  <div class="fixed inset-0 z-[100] flex items-center justify-center backdrop-blur-sm bg-black/70">
-    <div class="bg-zinc-900 rounded-2xl border border-white/10 shadow-2xl w-[900px] max-w-[95vw] h-[600px] max-h-[90vh] flex flex-col overflow-hidden">
-      <!-- Header -->
-      <div class="flex items-center justify-between p-5 border-b border-white/10">
-        <h3 class="text-xl font-bold text-white">Download Java</h3>
-        <button
-          aria-label="Close dialog"
-          onclick={() => settingsState.closeJavaDownloadModal()}
-          disabled={settingsState.isDownloadingJava}
-          class="text-white/40 hover:text-white/80 disabled:opacity-50 transition-colors p-1"
-        >
-          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
-          </svg>
-        </button>
-      </div>
-
-      <!-- Main Content Area -->
-      <div class="flex flex-1 overflow-hidden">
-        <!-- Left Sidebar: Sources -->
-        <div class="w-40 border-r border-white/10 p-3 flex flex-col gap-1">
-          <span class="text-[10px] font-bold uppercase tracking-widest text-white/30 px-2 mb-2">Sources</span>
-          
-          <button
-            disabled
-            class="flex items-center gap-2 px-3 py-2.5 rounded-lg text-left text-sm opacity-40 cursor-not-allowed text-white/50"
-          >
-            <div class="w-5 h-5 rounded bg-white/10 flex items-center justify-center text-[10px]">M</div>
-            Mojang
-          </button>
-          
-          <button
-            class="flex items-center gap-2 px-3 py-2.5 rounded-lg text-left text-sm bg-indigo-500/20 border border-indigo-500/40 text-white"
-          >
-            <div class="w-5 h-5 rounded bg-indigo-500 flex items-center justify-center text-[10px] font-bold">A</div>
-            Adoptium
-          </button>
-          
-          <button
-            disabled
-            class="flex items-center gap-2 px-3 py-2.5 rounded-lg text-left text-sm opacity-40 cursor-not-allowed text-white/50"
-          >
-            <div class="w-5 h-5 rounded bg-white/10 flex items-center justify-center text-[10px]">Z</div>
-            Azul Zulu
-          </button>
-        </div>
-
-        <!-- Center: Version Selection -->
-        <div class="flex-1 flex flex-col overflow-hidden">
-          <!-- Toolbar -->
-          <div class="flex items-center gap-3 p-4 border-b border-white/5">
-            <!-- Search -->
-            <div class="relative flex-1 max-w-xs">
-              <input
-                type="text"
-                bind:value={settingsState.searchQuery}
-                placeholder="Search versions..."
-                class="w-full bg-black/30 text-white text-sm px-4 py-2 pl-9 rounded-lg border border-white/10 focus:border-indigo-500/50 outline-none"
-              />
-              <svg class="absolute left-3 top-2.5 w-4 h-4 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
-              </svg>
-            </div>
-            
-            <!-- Recommended Filter -->
-            <label class="flex items-center gap-2 text-sm text-white/60 cursor-pointer select-none">
-              <input
-                type="checkbox"
-                bind:checked={settingsState.showOnlyRecommended}
-                class="w-4 h-4 rounded border-white/20 bg-black/30 text-indigo-500 focus:ring-indigo-500/30"
-              />
-              LTS Only
-            </label>
-
-            <!-- Image Type Toggle -->
-            <div class="flex items-center bg-black/30 rounded-lg p-0.5 border border-white/10">
-              <button
-                onclick={() => settingsState.selectedImageType = "jre"}
-                class="px-3 py-1.5 rounded-md text-xs font-medium transition-all {settingsState.selectedImageType === 'jre' ? 'bg-indigo-500 text-white shadow' : 'text-white/50 hover:text-white/80'}"
-              >
-                JRE
-              </button>
-              <button
-                onclick={() => settingsState.selectedImageType = "jdk"}
-                class="px-3 py-1.5 rounded-md text-xs font-medium transition-all {settingsState.selectedImageType === 'jdk' ? 'bg-indigo-500 text-white shadow' : 'text-white/50 hover:text-white/80'}"
-              >
-                JDK
-              </button>
-            </div>
-          </div>
-
-          <!-- Loading State -->
-          {#if settingsState.isLoadingCatalog}
-            <div class="flex-1 flex items-center justify-center text-white/50">
-              <div class="flex flex-col items-center gap-3">
-                <div class="w-8 h-8 border-2 border-indigo-500/30 border-t-indigo-500 rounded-full animate-spin"></div>
-                <span class="text-sm">Loading Java versions...</span>
-              </div>
-            </div>
-          {:else if settingsState.catalogError}
-            <div class="flex-1 flex items-center justify-center text-red-400">
-              <div class="flex flex-col items-center gap-3 text-center px-8">
-                <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
-                </svg>
-                <span class="text-sm">{settingsState.catalogError}</span>
-                <button
-                  onclick={() => settingsState.refreshCatalog()}
-                  class="mt-2 px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg text-sm text-white transition-colors"
-                >
-                  Retry
-                </button>
-              </div>
-            </div>
-          {:else}
-            <!-- Version List -->
-            <div class="flex-1 overflow-auto p-4">
-              <div class="space-y-2">
-                {#each settingsState.availableMajorVersions as version}
-                  {@const isLts = settingsState.javaCatalog?.lts_versions.includes(version)}
-                  {@const isSelected = settingsState.selectedMajorVersion === version}
-                  {@const releaseInfo = settingsState.javaCatalog?.releases.find(r => r.major_version === version && r.image_type === settingsState.selectedImageType)}
-                  {@const isAvailable = releaseInfo?.is_available ?? false}
-                  {@const installStatus = releaseInfo ? settingsState.getInstallStatus(releaseInfo) : 'download'}
-                  
-                  <button
-                    onclick={() => settingsState.selectMajorVersion(version)}
-                    disabled={!isAvailable}
-                    class="w-full flex items-center gap-4 p-3 rounded-xl border transition-all text-left
-                      {isSelected 
-                        ? 'bg-indigo-500/20 border-indigo-500/50 ring-2 ring-indigo-500/30' 
-                        : isAvailable 
-                          ? 'bg-black/20 border-white/10 hover:bg-white/5 hover:border-white/20' 
-                          : 'bg-black/10 border-white/5 opacity-40 cursor-not-allowed'}"
-                  >
-                    <!-- Version Number -->
-                    <div class="w-14 text-center">
-                      <span class="text-xl font-bold {isSelected ? 'text-white' : 'text-white/80'}">{version}</span>
-                    </div>
-                    
-                    <!-- Version Details -->
-                    <div class="flex-1 min-w-0">
-                      <div class="flex items-center gap-2">
-                        <span class="text-sm text-white/70 font-mono truncate">{releaseInfo?.version ?? '--'}</span>
-                        {#if isLts}
-                          <span class="px-1.5 py-0.5 bg-emerald-500/20 text-emerald-400 text-[9px] font-bold rounded uppercase shrink-0">LTS</span>
-                        {/if}
-                      </div>
-                      {#if releaseInfo}
-                        <div class="text-[10px] text-white/40 truncate mt-0.5">
-                          {releaseInfo.release_name} • {settingsState.formatBytes(releaseInfo.file_size)}
-                        </div>
-                      {/if}
-                    </div>
-                    
-                    <!-- Install Status Badge -->
-                    <div class="shrink-0">
-                      {#if installStatus === 'installed'}
-                        <span class="px-2 py-1 bg-emerald-500/20 text-emerald-400 text-[10px] font-bold rounded uppercase">Installed</span>
-                      {:else if isAvailable}
-                        <span class="px-2 py-1 bg-white/10 text-white/50 text-[10px] font-medium rounded">Download</span>
-                      {:else}
-                        <span class="px-2 py-1 bg-red-500/10 text-red-400/60 text-[10px] font-medium rounded">N/A</span>
-                      {/if}
-                    </div>
-                  </button>
-                {/each}
-              </div>
-            </div>
-          {/if}
-        </div>
-
-        <!-- Right Sidebar: Details -->
-        <div class="w-64 border-l border-white/10 flex flex-col">
-          <div class="p-4 border-b border-white/5">
-            <span class="text-[10px] font-bold uppercase tracking-widest text-white/30">Details</span>
-          </div>
-          
-          {#if settingsState.selectedRelease}
-            <div class="flex-1 p-4 space-y-4 overflow-auto">
-              <div>
-                <div class="text-[10px] text-white/40 uppercase tracking-wider mb-1">Version</div>
-                <div class="text-sm text-white font-mono">{settingsState.selectedRelease.version}</div>
-              </div>
-              
-              <div>
-                <div class="text-[10px] text-white/40 uppercase tracking-wider mb-1">Release Name</div>
-                <div class="text-sm text-white">{settingsState.selectedRelease.release_name}</div>
-              </div>
-              
-              <div>
-                <div class="text-[10px] text-white/40 uppercase tracking-wider mb-1">Release Date</div>
-                <div class="text-sm text-white">{settingsState.formatDate(settingsState.selectedRelease.release_date)}</div>
-              </div>
-              
-              <div>
-                <div class="text-[10px] text-white/40 uppercase tracking-wider mb-1">Size</div>
-                <div class="text-sm text-white">{settingsState.formatBytes(settingsState.selectedRelease.file_size)}</div>
-              </div>
-              
-              <div>
-                <div class="text-[10px] text-white/40 uppercase tracking-wider mb-1">Type</div>
-                <div class="flex items-center gap-2">
-                  <span class="text-sm text-white uppercase">{settingsState.selectedRelease.image_type}</span>
-                  {#if settingsState.selectedRelease.is_lts}
-                    <span class="px-1.5 py-0.5 bg-emerald-500/20 text-emerald-400 text-[9px] font-bold rounded">LTS</span>
-                  {/if}
-                </div>
-              </div>
-              
-              <div>
-                <div class="text-[10px] text-white/40 uppercase tracking-wider mb-1">Architecture</div>
-                <div class="text-sm text-white">{settingsState.selectedRelease.architecture}</div>
-              </div>
-              
-              {#if !settingsState.selectedRelease.is_available}
-                <div class="mt-4 p-3 bg-red-500/10 border border-red-500/20 rounded-lg">
-                  <div class="text-xs text-red-400">Not available for your platform</div>
-                </div>
-              {/if}
-            </div>
-          {:else}
-            <div class="flex-1 flex items-center justify-center text-white/30 text-sm p-4 text-center">
-              Select a Java version to view details
-            </div>
-          {/if}
-        </div>
-      </div>
-
-      <!-- Download Progress (MC Style) -->
-      {#if settingsState.isDownloadingJava && settingsState.downloadProgress}
-        <div class="border-t border-white/10 p-4 bg-zinc-900/90">
-          <div class="flex items-center justify-between mb-2">
-            <h3 class="text-white font-bold text-sm">Downloading Java</h3>
-            <span class="text-xs text-zinc-400">{settingsState.downloadProgress.status}</span>
-          </div>
-          
-          <!-- Progress Bar -->
-          <div class="mb-2">
-            <div class="flex justify-between text-[10px] text-zinc-400 mb-1">
-              <span>{settingsState.downloadProgress.file_name}</span>
-              <span>{Math.round(settingsState.downloadProgress.percentage)}%</span>
-            </div>
-            <div class="w-full bg-zinc-800 rounded-full h-2.5 overflow-hidden">
-              <div 
-                class="bg-gradient-to-r from-blue-500 to-cyan-400 h-2.5 rounded-full transition-all duration-200"
-                style="width: {settingsState.downloadProgress.percentage}%"
-              ></div>
-            </div>
-          </div>
-          
-          <!-- Speed & Stats -->
-          <div class="flex justify-between text-[10px] text-zinc-500 font-mono">
-            <span>
-              {settingsState.formatBytes(settingsState.downloadProgress.speed_bytes_per_sec)}/s · 
-              ETA: {settingsState.formatTime(settingsState.downloadProgress.eta_seconds)}
-            </span>
-            <span>
-              {settingsState.formatBytes(settingsState.downloadProgress.downloaded_bytes)} / 
-              {settingsState.formatBytes(settingsState.downloadProgress.total_bytes)}
-            </span>
-          </div>
-        </div>
-      {/if}
-
-      <!-- Pending Downloads Alert -->
-      {#if settingsState.pendingDownloads.length > 0 && !settingsState.isDownloadingJava}
-        <div class="border-t border-amber-500/30 p-4 bg-amber-500/10">
-          <div class="flex items-center justify-between">
-            <div class="flex items-center gap-3">
-              <svg class="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
-              </svg>
-              <span class="text-sm text-amber-200">
-                {settingsState.pendingDownloads.length} pending download(s) can be resumed
-              </span>
-            </div>
-            <button
-              onclick={() => settingsState.resumeDownloads()}
-              class="px-4 py-2 bg-amber-500/20 hover:bg-amber-500/30 text-amber-200 rounded-lg text-sm font-medium transition-colors"
-            >
-              Resume All
-            </button>
-          </div>
-        </div>
-      {/if}
-
-      <!-- Footer Actions -->
-      <div class="flex items-center justify-between p-4 border-t border-white/10 bg-black/20">
-        <button
-          onclick={() => settingsState.refreshCatalog()}
-          disabled={settingsState.isLoadingCatalog || settingsState.isDownloadingJava}
-          class="flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 disabled:opacity-50 text-white/70 rounded-lg text-sm transition-colors"
-        >
-          <svg class="w-4 h-4 {settingsState.isLoadingCatalog ? 'animate-spin' : ''}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
-          </svg>
-          Refresh
-        </button>
-
-        <div class="flex gap-3">
-          {#if settingsState.isDownloadingJava}
-            <button
-              onclick={() => settingsState.cancelDownload()}
-              class="px-5 py-2.5 bg-red-500/20 hover:bg-red-500/30 text-red-400 rounded-lg text-sm font-medium transition-colors"
-            >
-              Cancel Download
-            </button>
-          {:else}
-            {@const isInstalled = settingsState.selectedRelease ? settingsState.getInstallStatus(settingsState.selectedRelease) === 'installed' : false}
-            <button
-              onclick={() => settingsState.closeJavaDownloadModal()}
-              class="px-5 py-2.5 bg-white/10 hover:bg-white/20 text-white rounded-lg text-sm font-medium transition-colors"
-            >
-              Close
-            </button>
-            <button
-              onclick={() => settingsState.downloadJava()}
-              disabled={!settingsState.selectedRelease?.is_available || settingsState.isLoadingCatalog || isInstalled}
-              class="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-lg text-sm font-medium transition-colors"
-            >
-              {isInstalled ? 'Already Installed' : 'Download & Install'}
-            </button>
-          {/if}
-        </div>
-      </div>
-    </div>
-  </div>
-{/if}
diff --git a/ui/src/components/Sidebar.svelte b/ui/src/components/Sidebar.svelte
deleted file mode 100644
index 83f4ac6..0000000
--- a/ui/src/components/Sidebar.svelte
+++ /dev/null
@@ -1,91 +0,0 @@
-<script lang="ts">
-  import { uiState } from '../stores/ui.svelte';
-  import { Home, Package, Settings, Bot, Folder } from 'lucide-svelte';
-</script>
-
-<aside
-  class="w-20 lg:w-64 dark:bg-[#09090b] bg-white border-r dark:border-white/10 border-gray-200 flex flex-col items-center lg:items-start transition-all duration-300 shrink-0 py-6 z-20"
->
-  <!-- Logo Area -->
-  <div
-    class="h-16 w-full flex items-center justify-center lg:justify-start lg:px-6 mb-6"
-  >
-    <!-- Icon Logo (Small) -->
-    <div class="lg:hidden text-black dark:text-white">
-      <svg width="32" height="32" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M25 25 L50 50" stroke="currentColor" stroke-width="4" stroke-linecap="round" />
-        <path d="M25 75 L50 50" stroke="currentColor" stroke-width="4" stroke-linecap="round" />
-        <path d="M50 50 L75 50" stroke="currentColor" stroke-width="4" stroke-linecap="round" />
-        <circle cx="25" cy="25" r="8" fill="currentColor" stroke="none" />
-        <circle cx="25" cy="50" r="8" fill="currentColor" stroke="none" />
-        <circle cx="25" cy="75" r="8" fill="currentColor" stroke="none" />
-        <circle cx="50" cy="50" r="10" fill="currentColor" stroke="none" />
-        <circle cx="75" cy="50" r="8" fill="currentColor" stroke="none" />
-      </svg>
-    </div>
-    <!-- Full Logo (Large) -->
-    <div
-      class="hidden lg:flex items-center gap-3 font-bold text-xl tracking-tighter dark:text-white text-black"
-    >
-      <!-- Neural Network Dropout Logo -->
-      <svg width="42" height="42" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0">
-        <!-- Lines -->
-        <path d="M25 25 L50 50" stroke="currentColor" stroke-width="4" stroke-linecap="round" />
-        <path d="M25 75 L50 50" stroke="currentColor" stroke-width="4" stroke-linecap="round" />
-        <path d="M50 50 L75 50" stroke="currentColor" stroke-width="4" stroke-linecap="round" />
-        
-        <!-- Input Layer (Left) -->
-        <circle cx="25" cy="25" r="8" fill="currentColor" stroke="none" />
-        <circle cx="25" cy="50" r="8" fill="currentColor" stroke="none" />
-        <circle cx="25" cy="75" r="8" fill="currentColor" stroke="none" />
-
-        <!-- Hidden Layer (Middle) - Dropout visualization -->
-        <!-- Dropped units (dashed) -->
-        <circle cx="50" cy="25" r="7" stroke="currentColor" stroke-width="2" stroke-dasharray="4 2" fill="none" class="opacity-30" />
-        <circle cx="50" cy="75" r="7" stroke="currentColor" stroke-width="2" stroke-dasharray="4 2" fill="none" class="opacity-30" />
-        <!-- Active unit -->
-        <circle cx="50" cy="50" r="10" fill="currentColor" stroke="none" />
-
-        <!-- Output Layer (Right) -->
-        <circle cx="75" cy="50" r="8" fill="currentColor" stroke="none" />
-      </svg>
-      
-      <span>DROPOUT</span>
-    </div>
-  </div>
-
-  <!-- Navigation -->
-  <nav class="flex-1 w-full flex flex-col gap-1 px-3">
-    <!-- Nav Item Helper -->
-    {#snippet navItem(view: any, Icon: any, label: string)}
-      <button
-        class="group flex items-center lg:gap-3 justify-center lg:justify-start w-full px-0 lg:px-4 py-2.5 rounded-sm transition-all duration-200 relative
-        {uiState.currentView === view
-          ? 'bg-black/5 dark:bg-white/10 dark:text-white text-black font-medium'
-          : 'dark:text-zinc-400 text-zinc-500 hover:text-black dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5'}"
-        onclick={() => uiState.setView(view)}
-      >
-        <Icon size={20} strokeWidth={uiState.currentView === view ? 2.5 : 2} />
-        <span class="hidden lg:block text-sm relative z-10">{label}</span>
-        
-        <!-- Active Indicator -->
-        {#if uiState.currentView === view}
-           <div class="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-4 bg-black dark:bg-white rounded-r-full hidden lg:block"></div>
-        {/if}
-      </button>
-    {/snippet}
-
-    {@render navItem('home', Home, 'Overview')}
-    {@render navItem('instances', Folder, 'Instances')}
-    {@render navItem('versions', Package, 'Versions')}
-    {@render navItem('guide', Bot, 'Assistant')}
-    {@render navItem('settings', Settings, 'Settings')}
-  </nav>
-
-  <!-- Footer Info -->
-  <div
-    class="p-4 w-full flex justify-center lg:justify-start lg:px-6 opacity-40 hover:opacity-100 transition-opacity"
-  >
-    <div class="text-[10px] font-mono text-zinc-500 uppercase tracking-wider">v{uiState.appVersion}</div>
-  </div>
-</aside>
diff --git a/ui/src/components/StatusToast.svelte b/ui/src/components/StatusToast.svelte
deleted file mode 100644
index 4c981c7..0000000
--- a/ui/src/components/StatusToast.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script lang="ts">
-  import { uiState } from "../stores/ui.svelte";
-</script>
-
-{#if uiState.status !== "Ready"}
-  {#key uiState.status}
-    <div
-      class="absolute top-12 right-12 bg-white/90 dark:bg-zinc-800/90 backdrop-blur border border-zinc-200 dark:border-zinc-600 p-4 rounded-lg shadow-2xl max-w-sm animate-in fade-in slide-in-from-top-4 duration-300 z-50 group"
-    >
-      <div class="flex justify-between items-start mb-1">
-        <div class="text-xs text-zinc-500 dark:text-zinc-400 uppercase font-bold">Status</div>
-        <button
-          onclick={() => uiState.setStatus("Ready")}
-          class="text-zinc-400 hover:text-black dark:text-zinc-500 dark:hover:text-white transition -mt-1 -mr-1 p-1"
-        >
-          ✕
-        </button>
-      </div>
-      <div class="font-mono text-sm whitespace-pre-wrap mb-2 text-gray-900 dark:text-gray-100">{uiState.status}</div>
-      <div class="w-full bg-gray-200 dark:bg-zinc-700/50 h-1 rounded-full overflow-hidden">
-        <div
-          class="h-full bg-indigo-500 origin-left w-full progress-bar"
-        ></div>
-      </div>
-    </div>
-  {/key}
-{/if}
-
-<style>
-  .progress-bar {
-    animation: progress 5s linear forwards;
-  }
-  
-  @keyframes progress {
-    from {
-      transform: scaleX(1);
-    }
-    to {
-      transform: scaleX(0);
-    }
-  }
-</style>
diff --git a/ui/src/components/VersionsView.svelte b/ui/src/components/VersionsView.svelte
deleted file mode 100644
index f1474d9..0000000
--- a/ui/src/components/VersionsView.svelte
+++ /dev/null
@@ -1,511 +0,0 @@
-<script lang="ts">
-  import { invoke } from "@tauri-apps/api/core";
-  import { listen, type UnlistenFn } from "@tauri-apps/api/event";
-  import { gameState } from "../stores/game.svelte";
-  import { instancesState } from "../stores/instances.svelte";
-  import ModLoaderSelector from "./ModLoaderSelector.svelte";
-
-  let searchQuery = $state("");
-  let normalizedQuery = $derived(
-    searchQuery.trim().toLowerCase().replace(/。/g, ".")
-  );
-
-  // Filter by version type
-  let typeFilter = $state<"all" | "release" | "snapshot" | "installed">("all");
-
-  // Installed modded versions with Java version info (Fabric + Forge)
-  let installedFabricVersions = $state<Array<{ id: string; javaVersion?: number }>>([]);
-  let isLoadingModded = $state(false);
-
-  // Load installed modded versions with Java version info (both Fabric and Forge)
-  async function loadInstalledModdedVersions() {
-    if (!instancesState.activeInstanceId) {
-      installedFabricVersions = [];
-      isLoadingModded = false;
-      return;
-    }
-    isLoadingModded = true;
-    try {
-      // Get all installed versions and filter for modded ones (Fabric and Forge)
-      const allInstalled = await invoke<Array<{ id: string; type: string }>>(
-        "list_installed_versions",
-        { instanceId: instancesState.activeInstanceId }
-      );
-      
-      // Filter for Fabric and Forge versions
-      const moddedIds = allInstalled
-        .filter(v => v.type === "fabric" || v.type === "forge")
-        .map(v => v.id);
-      
-      // Load Java version for each installed modded version
-      const versionsWithJava = await Promise.all(
-        moddedIds.map(async (id) => {
-          try {
-            const javaVersion = await invoke<number | null>(
-              "get_version_java_version",
-              {
-                instanceId: instancesState.activeInstanceId!,
-                versionId: id,
-              }
-            );
-            return {
-              id,
-              javaVersion: javaVersion ?? undefined,
-            };
-          } catch (e) {
-            console.error(`Failed to get Java version for ${id}:`, e);
-            return { id, javaVersion: undefined };
-          }
-        })
-      );
-      
-      installedFabricVersions = versionsWithJava;
-    } catch (e) {
-      console.error("Failed to load installed modded versions:", e);
-    } finally {
-      isLoadingModded = false;
-    }
-  }
-
-  let versionDeletedUnlisten: UnlistenFn | null = null;
-  let downloadCompleteUnlisten: UnlistenFn | null = null;
-  let versionInstalledUnlisten: UnlistenFn | null = null;
-  let fabricInstalledUnlisten: UnlistenFn | null = null;
-  let forgeInstalledUnlisten: UnlistenFn | null = null;
-
-  // Load on mount and setup event listeners
-  $effect(() => {
-    loadInstalledModdedVersions();
-    setupEventListeners();
-    return () => {
-      if (versionDeletedUnlisten) {
-        versionDeletedUnlisten();
-      }
-      if (downloadCompleteUnlisten) {
-        downloadCompleteUnlisten();
-      }
-      if (versionInstalledUnlisten) {
-        versionInstalledUnlisten();
-      }
-      if (fabricInstalledUnlisten) {
-        fabricInstalledUnlisten();
-      }
-      if (forgeInstalledUnlisten) {
-        forgeInstalledUnlisten();
-      }
-    };
-  });
-
-  async function setupEventListeners() {
-    // Refresh versions when a version is deleted
-    versionDeletedUnlisten = await listen("version-deleted", async () => {
-      await gameState.loadVersions();
-      await loadInstalledModdedVersions();
-    });
-    
-    // Refresh versions when a download completes (version installed)
-    downloadCompleteUnlisten = await listen("download-complete", async () => {
-      await gameState.loadVersions();
-      await loadInstalledModdedVersions();
-    });
-    
-    // Refresh when a version is installed
-    versionInstalledUnlisten = await listen("version-installed", async () => {
-      await gameState.loadVersions();
-      await loadInstalledModdedVersions();
-    });
-    
-    // Refresh when Fabric is installed
-    fabricInstalledUnlisten = await listen("fabric-installed", async () => {
-      await gameState.loadVersions();
-      await loadInstalledModdedVersions();
-    });
-    
-    // Refresh when Forge is installed
-    forgeInstalledUnlisten = await listen("forge-installed", async () => {
-      await gameState.loadVersions();
-      await loadInstalledModdedVersions();
-    });
-  }
-
-  // Combined versions list (vanilla + modded)
-  let allVersions = $derived(() => {
-    const moddedVersions = installedFabricVersions.map((v) => {
-      // Determine type based on version ID
-      const versionType = v.id.startsWith("fabric-loader-") ? "fabric" : 
-                         v.id.includes("-forge-") ? "forge" : "fabric";
-      return {
-        id: v.id,
-        type: versionType,
-        url: "",
-        time: "",
-        releaseTime: new Date().toISOString(),
-        javaVersion: v.javaVersion,
-        isInstalled: true, // Modded versions in the list are always installed
-      };
-    });
-    return [...moddedVersions, ...gameState.versions];
-  });
-
-  let filteredVersions = $derived(() => {
-    let versions = allVersions();
-
-    // Apply type filter
-    if (typeFilter === "release") {
-      versions = versions.filter((v) => v.type === "release");
-    } else if (typeFilter === "snapshot") {
-      versions = versions.filter((v) => v.type === "snapshot");
-    } else if (typeFilter === "installed") {
-      versions = versions.filter((v) => v.isInstalled === true);
-    }
-
-    // Apply search filter
-    if (normalizedQuery.length > 0) {
-      versions = versions.filter((v) =>
-        v.id.toLowerCase().includes(normalizedQuery)
-      );
-    }
-
-    return versions;
-  });
-
-  function getVersionBadge(type: string) {
-    switch (type) {
-      case "release":
-        return { text: "Release", class: "bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-500/20 dark:text-emerald-300 dark:border-emerald-500/30" };
-      case "snapshot":
-        return { text: "Snapshot", class: "bg-amber-100 text-amber-700 border-amber-200 dark:bg-amber-500/20 dark:text-amber-300 dark:border-amber-500/30" };
-      case "fabric":
-        return { text: "Fabric", class: "bg-indigo-100 text-indigo-700 border-indigo-200 dark:bg-indigo-500/20 dark:text-indigo-300 dark:border-indigo-500/30" };
-      case "forge":
-        return { text: "Forge", class: "bg-orange-100 text-orange-700 border-orange-200 dark:bg-orange-500/20 dark:text-orange-300 dark:border-orange-500/30" };
-      case "modpack":
-        return { text: "Modpack", class: "bg-purple-100 text-purple-700 border-purple-200 dark:bg-purple-500/20 dark:text-purple-300 dark:border-purple-500/30" };
-      default:
-        return { text: type, class: "bg-zinc-100 text-zinc-700 border-zinc-200 dark:bg-zinc-500/20 dark:text-zinc-300 dark:border-zinc-500/30" };
-    }
-  }
-
-  function handleModLoaderInstall(versionId: string) {
-    // Refresh the installed versions list
-    loadInstalledModdedVersions();
-    // Refresh vanilla versions to update isInstalled status
-    gameState.loadVersions();
-    // Select the newly installed version
-    gameState.selectedVersion = versionId;
-  }
-
-  // Delete confirmation dialog state
-  let showDeleteDialog = $state(false);
-  let versionToDelete = $state<string | null>(null);
-
-  // Show delete confirmation dialog
-  function showDeleteConfirmation(versionId: string, event: MouseEvent) {
-    event.stopPropagation(); // Prevent version selection
-    versionToDelete = versionId;
-    showDeleteDialog = true;
-  }
-
-  // Cancel delete
-  function cancelDelete() {
-    showDeleteDialog = false;
-    versionToDelete = null;
-  }
-
-  // Confirm and delete version
-  async function confirmDelete() {
-    if (!versionToDelete) return;
-
-    try {
-      await invoke("delete_version", { 
-        instanceId: instancesState.activeInstanceId,
-        versionId: versionToDelete 
-      });
-      // Clear selection if deleted version was selected
-      if (gameState.selectedVersion === versionToDelete) {
-        gameState.selectedVersion = "";
-      }
-      // Close dialog
-      showDeleteDialog = false;
-      versionToDelete = null;
-      // Versions will be refreshed automatically via event listener
-    } catch (e) {
-      console.error("Failed to delete version:", e);
-      alert(`Failed to delete version: ${e}`);
-      // Keep dialog open on error so user can retry
-    }
-  }
-
-  // Version metadata for the selected version
-  interface VersionMetadata {
-    id: string;
-    javaVersion?: number;
-    isInstalled: boolean;
-  }
-
-  let selectedVersionMetadata = $state<VersionMetadata | null>(null);
-  let isLoadingMetadata = $state(false);
-
-  // Load metadata when version is selected
-  async function loadVersionMetadata(versionId: string) {
-    if (!versionId) {
-      selectedVersionMetadata = null;
-      return;
-    }
-
-    isLoadingMetadata = true;
-    try {
-      const metadata = await invoke<VersionMetadata>("get_version_metadata", {
-        instanceId: instancesState.activeInstanceId,
-        versionId,
-      });
-      selectedVersionMetadata = metadata;
-    } catch (e) {
-      console.error("Failed to load version metadata:", e);
-      selectedVersionMetadata = null;
-    } finally {
-      isLoadingMetadata = false;
-    }
-  }
-
-  // Watch for selected version changes
-  $effect(() => {
-    if (gameState.selectedVersion) {
-      loadVersionMetadata(gameState.selectedVersion);
-    } else {
-      selectedVersionMetadata = null;
-    }
-  });
-
-  // Get the base Minecraft version from selected version (for mod loader selector)
-  let selectedBaseVersion = $derived(() => {
-    const selected = gameState.selectedVersion;
-    if (!selected) return "";
-
-    // If it's a modded version, extract the base version
-    if (selected.startsWith("fabric-loader-")) {
-      // Format: fabric-loader-X.X.X-1.20.4
-      const parts = selected.split("-");
-      return parts[parts.length - 1];
-    }
-    if (selected.includes("-forge-")) {
-      // Format: 1.20.4-forge-49.0.38
-      return selected.split("-forge-")[0];
-    }
-
-    // Check if it's a valid vanilla version
-    const version = gameState.versions.find((v) => v.id === selected);
-    return version ? selected : "";
-  });
-</script>
-
-<div class="h-full flex flex-col p-6 overflow-hidden">
-  <div class="flex items-center justify-between mb-6">
-     <h2 class="text-3xl font-black bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-white dark:to-white/60">Version Manager</h2>
-     <div class="text-sm dark:text-white/40 text-black/50">Select a version to play or modify</div>
-  </div>
-
-  <div class="flex-1 grid grid-cols-1 lg:grid-cols-3 gap-6 overflow-hidden">
-    <!-- Left: Version List -->
-    <div class="lg:col-span-2 flex flex-col gap-4 overflow-hidden">
-      <!-- Search and Filters (Glass Bar) -->
-      <div class="flex gap-3">
-        <div class="relative flex-1">
-            <span class="absolute left-3 top-1/2 -translate-y-1/2 dark:text-white/30 text-black/30">🔍</span>
-            <input
-              type="text"
-              placeholder="Search versions..."
-              class="w-full pl-9 pr-4 py-3 bg-white/60 dark:bg-black/20 border border-black/10 dark:border-white/10 rounded-xl dark:text-white text-gray-900 placeholder-black/30 dark:placeholder-white/30 focus:outline-none focus:border-indigo-500/50 dark:focus:bg-black/40 focus:bg-white/80 transition-all backdrop-blur-sm"
-              bind:value={searchQuery}
-            />
-        </div>
-      </div>
-
-      <!-- Type Filter Tabs (Glass Caps) -->
-      <div class="flex p-1 bg-white/60 dark:bg-black/20 rounded-xl border border-black/5 dark:border-white/5">
-        {#each ['all', 'release', 'snapshot', 'installed'] as filter}
-            <button
-            class="flex-1 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 capitalize
-            {typeFilter === filter
-                ? 'bg-white shadow-sm border border-black/5 dark:bg-white/10 dark:text-white dark:shadow-lg dark:border-white/10 text-black'
-                : 'text-black/40 dark:text-white/40 hover:text-black dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5'}"
-            onclick={() => (typeFilter = filter as any)}
-            >
-            {filter}
-            </button>
-        {/each}
-      </div>
-
-      <!-- Version List SCROLL -->
-      <div class="flex-1 overflow-y-auto pr-2 space-y-2 custom-scrollbar">
-        {#if gameState.versions.length === 0}
-          <div class="flex items-center justify-center h-40 dark:text-white/30 text-black/30 italic animate-pulse">
-             Fetching manifest...
-          </div>
-        {:else if filteredVersions().length === 0}
-          <div class="flex flex-col items-center justify-center h-40 dark:text-white/30 text-black/30 gap-2">
-             <span class="text-2xl">👻</span>
-             <span>No matching versions found</span>
-          </div>
-        {:else}
-          {#each filteredVersions() as version}
-            {@const badge = getVersionBadge(version.type)}
-            {@const isSelected = gameState.selectedVersion === version.id}
-            <button
-              class="w-full group flex items-center justify-between p-4 rounded-xl text-left border transition-all duration-200 relative overflow-hidden
-              {isSelected
-                ? 'bg-indigo-50 border-indigo-200 dark:bg-indigo-600/20 dark:border-indigo-500/50 shadow-[0_0_20px_rgba(99,102,241,0.2)]'
-                : 'bg-white/40 dark:bg-white/5 border-black/5 dark:border-white/5 hover:bg-white/60 dark:hover:bg-white/10 hover:border-black/10 dark:hover:border-white/10 hover:translate-x-1'}"
-              onclick={() => (gameState.selectedVersion = version.id)}
-            >
-              <!-- Selection Glow -->
-              {#if isSelected}
-                 <div class="absolute inset-0 bg-gradient-to-r from-indigo-500/10 to-transparent pointer-events-none"></div>
-              {/if}
-
-              <div class="relative z-10 flex items-center gap-4 flex-1">
-                <span
-                  class="px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide border {badge.class}"
-                >
-                  {badge.text}
-                </span>
-                <div class="flex-1">
-                  <div class="font-bold font-mono text-lg tracking-tight {isSelected ? 'text-black dark:text-white' : 'text-gray-700 dark:text-zinc-300 group-hover:text-black dark:group-hover:text-white'}">
-                    {version.id}
-                  </div>
-                  <div class="flex items-center gap-2 mt-0.5">
-                    {#if version.releaseTime && version.type !== "fabric" && version.type !== "forge"}
-                      <div class="text-xs dark:text-white/30 text-black/30">
-                        {new Date(version.releaseTime).toLocaleDateString()}
-                      </div>
-                    {/if}
-                    {#if version.javaVersion}
-                      <div class="flex items-center gap-1 text-xs dark:text-white/40 text-black/40">
-                        <span class="opacity-60">☕</span>
-                        <span class="font-medium">Java {version.javaVersion}</span>
-                      </div>
-                    {/if}
-                  </div>
-                </div>
-              </div>
-              
-              <div class="relative z-10 flex items-center gap-2">
-                {#if version.isInstalled === true}
-                  <button
-                    onclick={(e) => showDeleteConfirmation(version.id, e)}
-                    class="p-2 rounded-lg text-red-500 dark:text-red-400 hover:bg-red-500/10 dark:hover:bg-red-500/20 transition-colors opacity-0 group-hover:opacity-100"
-                    title="Delete version"
-                  >
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                      <path d="M3 6h18"></path>
-                      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
-                      <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
-                    </svg>
-                  </button>
-                {/if}
-                {#if isSelected}
-                  <div class="text-indigo-500 dark:text-indigo-400">
-                     <span class="text-lg">Selected</span>
-                  </div>
-                {/if}
-              </div>
-            </button>
-          {/each}
-        {/if}
-      </div>
-    </div>
-
-    <!-- Right: Mod Loader Panel -->
-    <div class="flex flex-col gap-4">
-      <!-- Selected Version Info Card -->
-      <div class="bg-gradient-to-br from-white/40 to-white/20 dark:from-white/10 dark:to-white/5 p-6 rounded-2xl border border-black/5 dark:border-white/10 backdrop-blur-md relative overflow-hidden group">
-          <div class="absolute top-0 right-0 p-8 bg-indigo-500/20 blur-[60px] rounded-full group-hover:bg-indigo-500/30 transition-colors"></div>
-          
-          <h3 class="text-xs font-bold uppercase tracking-widest dark:text-white/40 text-black/40 mb-2 relative z-10">Current Selection</h3>
-          {#if gameState.selectedVersion}
-            <p class="font-mono text-3xl font-black text-transparent bg-clip-text bg-gradient-to-r from-gray-900 to-gray-600 dark:from-white dark:to-white/70 relative z-10 truncate mb-4">
-                {gameState.selectedVersion}
-            </p>
-
-            <!-- Version Metadata -->
-            {#if isLoadingMetadata}
-              <div class="space-y-3 relative z-10">
-                <div class="animate-pulse space-y-2">
-                  <div class="h-4 bg-black/10 dark:bg-white/10 rounded w-3/4"></div>
-                  <div class="h-4 bg-black/10 dark:bg-white/10 rounded w-1/2"></div>
-                </div>
-              </div>
-            {:else if selectedVersionMetadata}
-              <div class="space-y-3 relative z-10">
-                <!-- Java Version -->
-                {#if selectedVersionMetadata.javaVersion}
-                  <div>
-                    <div class="text-[10px] font-bold uppercase tracking-wider dark:text-white/40 text-black/40 mb-1">Java Version</div>
-                    <div class="flex items-center gap-2">
-                      <span class="text-lg opacity-60">☕</span>
-                      <span class="text-sm dark:text-white text-black font-medium">
-                        Java {selectedVersionMetadata.javaVersion}
-                      </span>
-                    </div>
-                  </div>
-                {/if}
-
-                <!-- Installation Status -->
-                <div>
-                  <div class="text-[10px] font-bold uppercase tracking-wider dark:text-white/40 text-black/40 mb-1">Status</div>
-                  <div class="flex items-center gap-2">
-                    {#if selectedVersionMetadata.isInstalled === true}
-                      <span class="px-2 py-0.5 bg-emerald-500/20 text-emerald-600 dark:text-emerald-400 text-[10px] font-bold rounded border border-emerald-500/30">
-                        Installed
-                      </span>
-                    {:else if selectedVersionMetadata.isInstalled === false}
-                      <span class="px-2 py-0.5 bg-zinc-500/20 text-zinc-600 dark:text-zinc-400 text-[10px] font-bold rounded border border-zinc-500/30">
-                        Not Installed
-                      </span>
-                    {/if}
-                  </div>
-                </div>
-              </div>
-            {/if}
-          {:else}
-            <p class="dark:text-white/20 text-black/20 italic relative z-10">None selected</p>
-          {/if}
-      </div>
-
-      <!-- Mod Loader Selector Card -->
-      <div class="bg-white/60 dark:bg-black/20 p-4 rounded-2xl border border-black/5 dark:border-white/5 backdrop-blur-sm flex-1 flex flex-col">
-          <ModLoaderSelector
-            selectedGameVersion={selectedBaseVersion()}
-            onInstall={handleModLoaderInstall}
-          />
-      </div>
-
-    </div>
-  </div>
-
-  <!-- Delete Version Confirmation Dialog -->
-  {#if showDeleteDialog && versionToDelete}
-    <div class="fixed inset-0 z-[200] bg-black/70 dark:bg-black/80 backdrop-blur-sm flex items-center justify-center p-4">
-      <div class="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 rounded-xl shadow-2xl p-6 max-w-sm w-full animate-in fade-in zoom-in-95 duration-200">
-        <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">Delete Version</h3>
-        <p class="text-zinc-600 dark:text-zinc-400 text-sm mb-6">
-          Are you sure you want to delete version <span class="text-gray-900 dark:text-white font-mono font-medium">{versionToDelete}</span>? This action cannot be undone.
-        </p>
-        <div class="flex gap-3 justify-end">
-          <button
-            onclick={cancelDelete}
-            class="px-4 py-2 text-sm font-medium text-zinc-600 dark:text-zinc-300 hover:text-zinc-900 dark:hover:text-white bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded-lg transition-colors"
-          >
-            Cancel
-          </button>
-          <button
-            onclick={confirmDelete}
-            class="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-500 rounded-lg transition-colors"
-          >
-            Delete
-          </button>
-        </div>
-      </div>
-    </div>
-  {/if}
-</div>