Implement conversational wizard for server launcher modal

- Convert modal to step-by-step chat-style wizard
- Flow: Region → Plan → OS → Payment → Confirm → Deploy
- Add chat message history with bot/user bubbles
- Support yearly payment with 17% discount calculation
- Add back button for returning to previous steps
- Widen modal (max-w-md sm:max-w-lg) for better UX
- Add deploy progress simulation with logs

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

app.js

@@ -1,6 +1,6 @@
 /**
  * Anvil Hosting - Main Application JavaScript
- * 가격 데이터 및 Alpine.js 컴포넌트 정의
+ * 대화형 서버 런처 및 가격 데이터 관리
  */
 
 // 단일 가격 데이터 소스 (VAT 포함, 월간 기준)
@@ -36,6 +36,28 @@ const PLAN_SPECS = {
   'Business': '4vCPU / 8GB RAM'
 };
 
+// 리전 정보
+const REGIONS = [
+  { id: 'Seoul', flag: '🇰🇷', name: '서울', ping: '2ms' },
+  { id: 'Tokyo', flag: '🇯🇵', name: '도쿄', ping: '35ms' },
+  { id: 'Singapore', flag: '🇸🇬', name: '싱가포르', ping: '65ms' },
+  { id: 'HongKong', flag: '🇭🇰', name: '홍콩', ping: '45ms' }
+];
+
+// OS 정보
+const OS_LIST = [
+  { id: 'Debian 12', icon: '🐧', name: 'Debian 12' },
+  { id: 'Ubuntu 24.04', icon: '🟠', name: 'Ubuntu 24.04' },
+  { id: 'CentOS 9', icon: '🔵', name: 'CentOS 9' },
+  { id: 'Alpine', icon: '🏔️', name: 'Alpine' }
+];
+
+// 결제 방식
+const PAYMENT_METHODS = [
+  { id: 'monthly', name: '월간 결제', desc: '매월 자동 결제', discount: 0 },
+  { id: 'yearly', name: '연간 결제', desc: '2개월 무료 (17% 할인)', discount: 17 }
+];
+
 /**
  * 가격 포맷팅 (한국 원화)
  */
@@ -44,25 +66,40 @@ function formatPrice(price) {
 }
 
 /**
- * Alpine.js 메인 앱 데이터
+ * Alpine.js 메인 앱 데이터 - 대화형 위자드
  */
 function anvilApp() {
   return {
     // 모달 상태
     launcherOpen: false,
     launching: false,
-    step: 0,
+    wizardStep: 0,  // 0: region, 1: plan, 2: os, 3: payment, 4: confirm, 5+: deploying
+    deployStep: 0,
 
     // 서버 구성
     config: {
-      region: 'Tokyo',
+      region: null,
-      os: 'Debian 12',
+      plan: null,
-      plan: 'Pro'
+      os: null,
+      payment: null
     },
 
+    // 대화 메시지
+    messages: [],
+
     // 배포 로그
     logs: [],
 
+    // 데이터 접근자
+    regions: REGIONS,
+    osList: OS_LIST,
+    paymentMethods: PAYMENT_METHODS,
+
+    // 플랜 목록 (리전에 따라 다름)
+    get plans() {
+      return ['Micro', 'Starter', 'Pro', 'Business'];
+    },
+
     // 가격 조회
     getPrice(plan) {
       const prices = LAUNCHER_PRICES[plan];
@@ -71,52 +108,131 @@ function anvilApp() {
       return price.toLocaleString('ko-KR');
     },
 
+    // 월간 가격 (할인 적용)
+    getFinalPrice() {
+      const prices = LAUNCHER_PRICES[this.config.plan];
+      if (!prices) return 0;
+      let price = this.config.region === 'Seoul' ? prices.seoul : prices.base;
+      if (this.config.payment === 'yearly') {
+        price = Math.round(price * 0.83); // 17% 할인
+      }
+      return price;
+    },
+
     // 플랜 스펙 조회
     getPlanSpec(plan) {
       return PLAN_SPECS[plan] || '';
     },
 
+    // 리전 선택
+    selectRegion(region) {
+      this.config.region = region.id;
+      this.addMessage('user', `${region.flag} ${region.name}`);
+      this.wizardStep = 1;
+      setTimeout(() => this.addMessage('bot', '어떤 사양이 필요하신가요?'), 300);
+    },
+
+    // 플랜 선택
+    selectPlan(plan) {
+      this.config.plan = plan;
+      this.addMessage('user', `${plan} (${this.getPlanSpec(plan)})`);
+      this.wizardStep = 2;
+      setTimeout(() => this.addMessage('bot', '어떤 운영체제를 설치할까요?'), 300);
+    },
+
+    // OS 선택
+    selectOS(os) {
+      this.config.os = os.id;
+      this.addMessage('user', `${os.icon} ${os.name}`);
+      this.wizardStep = 3;
+      setTimeout(() => this.addMessage('bot', '결제 방식을 선택해주세요.'), 300);
+    },
+
+    // 결제 방식 선택
+    selectPayment(payment) {
+      this.config.payment = payment.id;
+      this.addMessage('user', payment.name);
+      this.wizardStep = 4;
+      setTimeout(() => this.addMessage('bot', '구성을 확인하고 서버를 생성해주세요! 🚀'), 300);
+    },
+
+    // 메시지 추가
+    addMessage(type, text) {
+      this.messages.push({ type, text, time: new Date() });
+      // 스크롤 하단으로
+      this.$nextTick(() => {
+        const container = document.getElementById('chat-container');
+        if (container) container.scrollTop = container.scrollHeight;
+      });
+    },
+
+    // 이전 단계로
+    goBack() {
+      if (this.wizardStep > 0 && !this.launching) {
+        // 마지막 2개 메시지 제거 (사용자 선택 + 봇 질문)
+        this.messages.pop();
+        this.messages.pop();
+        this.wizardStep--;
+
+        // 선택 초기화
+        if (this.wizardStep === 0) this.config.region = null;
+        else if (this.wizardStep === 1) this.config.plan = null;
+        else if (this.wizardStep === 2) this.config.os = null;
+        else if (this.wizardStep === 3) this.config.payment = null;
+      }
+    },
+
     // 서버 배포 시작
     startLaunch() {
       this.launching = true;
-      this.step = 1;
+      this.wizardStep = 5;
+      this.deployStep = 1;
       this.logs = [
-        '[INFO] Initializing deployment...',
+        '🔄 배포를 시작합니다...',
-        '[INFO] Selecting node in ' + this.config.region + '...',
+        `📍 ${this.config.region} 리전 노드 선택 중...`,
-        '[INFO] Pulling ' + this.config.os + ' image...'
+        `📦 ${this.config.os} 이미지 준비 중...`
       ];
 
       setTimeout(() => {
-        this.logs.push('[SUCCESS] Image pulled.');
+        this.logs.push('✅ 이미지 준비 완료');
-        this.logs.push('[INFO] Creating container instance...');
+        this.logs.push('🔧 컨테이너 인스턴스 생성 중...');
-        this.step = 2;
+        this.deployStep = 2;
       }, 1500);
 
       setTimeout(() => {
-        this.logs.push('[SUCCESS] Container created.');
+        this.logs.push('✅ 컨테이너 생성 완료');
-        this.logs.push('[INFO] Configuring network & firewall...');
+        this.logs.push('🌐 네트워크 및 방화벽 구성 중...');
-        this.step = 3;
+        this.deployStep = 3;
       }, 3000);
 
       setTimeout(() => {
         const randomIP = Math.floor(Math.random() * 254 + 1);
-        this.logs.push('[SUCCESS] Network ready. IP: 45.12.89.' + randomIP);
+        this.logs.push(`✅ IP 할당 완료: 45.12.89.${randomIP}`);
-        this.logs.push('[INFO] Starting system services...');
+        this.logs.push('⚙️ 시스템 서비스 시작 중...');
-        this.step = 4;
+        this.deployStep = 4;
       }, 4500);
 
       setTimeout(() => {
         this.launching = false;
-        this.step = 5;
+        this.deployStep = 5;
-        this.logs.push('[COMPLETE] Server is now live!');
+        this.logs.push('🎉 서버가 활성화되었습니다!');
       }, 6000);
     },
 
+    // 런처 열기
+    openLauncher() {
+      this.launcherOpen = true;
+      this.messages = [{ type: 'bot', text: '어느 리전에 서버를 생성할까요?', time: new Date() }];
+    },
+
     // 런처 초기화
     resetLauncher() {
       this.launcherOpen = false;
       this.launching = false;
-      this.step = 0;
+      this.wizardStep = 0;
+      this.deployStep = 0;
+      this.config = { region: null, plan: null, os: null, payment: null };
+      this.messages = [];
       this.logs = [];
     },
 

index.html

@@ -90,7 +90,7 @@
         
         <div class="flex flex-col sm:flex-row gap-4">
           <div class="relative">
-            <button @click="launcherOpen = true" :aria-expanded="launcherOpen" aria-haspopup="dialog" aria-label="서버 런처 열기" class="relative w-full sm:w-auto px-8 py-4 bg-white/95 text-dark-900 font-bold rounded-lg flex items-center justify-center gap-3 transition-all hover:ring-4 hover:ring-brand-500/30 hover:shadow-[0_0_20px_rgba(56,189,248,0.4)] active:scale-95 group">
+            <button @click="openLauncher()" :aria-expanded="launcherOpen" aria-haspopup="dialog" aria-label="서버 런처 열기" class="relative w-full sm:w-auto px-8 py-4 bg-white/95 text-dark-900 font-bold rounded-lg flex items-center justify-center gap-3 transition-all hover:ring-4 hover:ring-brand-500/30 hover:shadow-[0_0_20px_rgba(56,189,248,0.4)] active:scale-95 group">
               <span class="text-xl">🚀</span>
               <span>인스턴스 즉시 배포</span>
               <svg class="w-4 h-4 text-brand-600 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
@@ -659,118 +659,162 @@
            role="dialog"
            aria-modal="true"
            aria-labelledby="launcher-title"
-           class="bg-slate-900/95 backdrop-blur-xl border border-white/10 w-[calc(100%-2rem)] max-w-sm mx-4 rounded-3xl shadow-2xl shadow-black/50 overflow-hidden">
+           class="bg-slate-900/95 backdrop-blur-xl border border-white/10 w-[calc(100%-2rem)] max-w-md sm:max-w-lg mx-4 rounded-3xl shadow-2xl shadow-black/50 overflow-hidden flex flex-col max-h-[85vh]">
 
         <!-- Modal Header -->
-        <div class="px-5 py-4 border-b border-white/5 flex justify-between items-center">
+        <div class="px-4 py-3 border-b border-white/5 flex justify-between items-center flex-shrink-0">
-          <h3 id="launcher-title" class="text-lg font-bold text-white">🚀 Server Launcher</h3>
+          <div class="flex items-center gap-2">
+            <div class="w-8 h-8 rounded-full bg-gradient-to-br from-brand-500 to-purple-500 flex items-center justify-center text-sm">🚀</div>
+            <div>
+              <h3 id="launcher-title" class="text-sm font-bold text-white">Server Launcher</h3>
+              <p class="text-[10px] text-slate-400">Anvil Forge Bot</p>
+            </div>
+          </div>
           <button @click="resetLauncher" aria-label="닫기" class="w-8 h-8 flex items-center justify-center rounded-full bg-white/5 text-slate-400 hover:bg-white/10 hover:text-white transition" x-show="!launching">
             <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
           </button>
         </div>
 
-        <div class="p-5">
+        <!-- Chat Container -->
-          <!-- Step 0: Configuration -->
+        <div id="chat-container" class="flex-1 overflow-y-auto p-4 space-y-3" x-show="wizardStep < 5">
-          <div x-show="step === 0" class="space-y-6">
+          <!-- Messages -->
-
+          <template x-for="(msg, idx) in messages" :key="idx">
-            <!-- Region Selection - Horizontal Pills -->
+            <div :class="msg.type === 'bot' ? 'flex justify-start' : 'flex justify-end'">
-            <div>
+              <div :class="msg.type === 'bot'
-              <label class="block text-xs font-medium text-slate-400 mb-3">리전 선택</label>
+                ? 'bg-slate-800 text-slate-200 rounded-2xl rounded-tl-sm'
-              <div class="flex flex-wrap gap-2">
+                : 'bg-brand-500 text-white rounded-2xl rounded-tr-sm'"
-                <template x-for="r in [{id: 'Seoul', flag: '🇰🇷'}, {id: 'Tokyo', flag: '🇯🇵'}, {id: 'Singapore', flag: '🇸🇬'}, {id: 'HongKong', flag: '🇭🇰'}]">
+                class="px-4 py-2.5 max-w-[85%] text-sm">
-                  <button @click="config.region = r.id"
+                <span x-text="msg.text"></span>
-                          :class="config.region === r.id ? 'bg-brand-500 text-white shadow-lg shadow-brand-500/30' : 'bg-slate-800 text-slate-300 hover:bg-slate-700'"
-                          class="flex items-center gap-1.5 px-3 py-2 rounded-full text-sm font-medium transition-all">
-                    <span x-text="r.flag"></span>
-                    <span x-text="r.id"></span>
-                  </button>
-                </template>
               </div>
             </div>
+          </template>
 
-            <!-- OS Selection - Horizontal Pills -->
+          <!-- Current Step Options -->
-            <div>
+          <div class="pt-2">
-              <label class="block text-xs font-medium text-slate-400 mb-3">운영체제</label>
+            <!-- Step 0: Region Selection -->
-              <div class="flex flex-wrap gap-2">
+            <div x-show="wizardStep === 0" class="space-y-2">
-                <template x-for="o in ['Debian 12', 'Ubuntu 24.04', 'CentOS 9', 'Alpine']">
+              <template x-for="r in regions" :key="r.id">
-                  <button @click="config.os = o"
+                <button @click="selectRegion(r)"
-                          :class="config.os === o ? 'bg-purple-500 text-white shadow-lg shadow-purple-500/30' : 'bg-slate-800 text-slate-300 hover:bg-slate-700'"
+                        class="w-full flex items-center justify-between p-3 bg-slate-800/80 hover:bg-slate-700 border border-slate-700/50 hover:border-brand-500/50 rounded-xl transition-all group">
-                          class="px-3 py-2 rounded-full text-sm font-medium transition-all">
+                  <div class="flex items-center gap-3">
-                    <span x-text="o"></span>
+                    <span class="text-xl" x-text="r.flag"></span>
-                  </button>
+                    <div class="text-left">
-                </template>
+                      <div class="font-medium text-white text-sm" x-text="r.name"></div>
-              </div>
+                      <div class="text-xs text-slate-400" x-text="r.id"></div>
-            </div>
-
-            <!-- Plan Selection - Stacked Cards -->
-            <div>
-              <label class="block text-xs font-medium text-slate-400 mb-3">플랜 선택</label>
-              <div class="space-y-2">
-                <template x-for="p in ['Micro', 'Starter', 'Pro', 'Business']">
-                  <button @click="config.plan = p"
-                          :class="config.plan === p ? 'border-brand-500 bg-brand-500/10 ring-1 ring-brand-500/30' : 'border-slate-700/50 bg-slate-800/50 hover:border-slate-600'"
-                          class="w-full p-3.5 rounded-xl border transition-all flex justify-between items-center">
-                    <div class="flex items-center gap-3">
-                      <div class="w-10 h-10 rounded-lg flex items-center justify-center text-lg"
-                           :class="config.plan === p ? 'bg-brand-500/20' : 'bg-slate-700/50'"
-                           x-text="p === 'Micro' ? '🔹' : p === 'Starter' ? '🔷' : p === 'Pro' ? '⭐' : '💎'"></div>
-                      <div class="text-left">
-                        <div class="font-semibold text-white" x-text="p"></div>
-                        <div class="text-xs text-slate-400" x-text="getPlanSpec(p)"></div>
-                      </div>
                     </div>
-                    <div class="text-right">
+                  </div>
-                      <div class="font-bold text-brand-400" x-text="'₩' + getPrice(p)"></div>
+                  <div class="text-xs text-slate-500 group-hover:text-brand-400" x-text="r.ping"></div>
-                      <div class="text-[10px] text-slate-500">/월</div>
+                </button>
-                    </div>
-                  </button>
-                </template>
-              </div>
-            </div>
-
-            <!-- Launch Button -->
-            <button @click="startLaunch"
-                    class="w-full py-4 bg-gradient-to-r from-brand-600 to-brand-500 hover:from-brand-500 hover:to-brand-400 text-white font-bold rounded-xl transition-all shadow-lg shadow-brand-500/25 active:scale-[0.98]">
-              <span class="flex items-center justify-center gap-2">
-                <span>🚀</span>
-                <span x-text="config.region + '에서 시작'"></span>
-              </span>
-            </button>
-          </div>
-
-          <!-- Launching State -->
-          <div x-show="step > 0" class="min-h-[300px] flex flex-col">
-            <!-- Progress -->
-            <div class="mb-4">
-              <div class="flex justify-between text-xs text-slate-400 mb-2">
-                <span x-text="step < 5 ? '배포 중...' : '완료'"></span>
-                <span x-text="(step * 20) + '%'"></span>
-              </div>
-              <div class="h-1.5 bg-slate-800 rounded-full overflow-hidden">
-                <div class="h-full bg-gradient-to-r from-brand-500 to-purple-500 transition-all duration-500 rounded-full" :style="'width: ' + (step * 20) + '%'"></div>
-              </div>
-            </div>
-
-            <!-- Logs -->
-            <div class="flex-1 bg-black/30 rounded-xl p-4 font-mono text-xs text-slate-400 overflow-y-auto border border-white/5 space-y-1.5 max-h-48">
-              <template x-for="log in logs">
-                <div :class="log.includes('[SUCCESS]') ? 'text-green-400' : log.includes('[COMPLETE]') ? 'text-brand-400 font-semibold' : 'text-slate-400'" x-text="log"></div>
               </template>
-              <div x-show="launching" class="animate-pulse text-brand-400">▋</div>
             </div>
 
-            <!-- Success State -->
+            <!-- Step 1: Plan Selection -->
-            <div x-show="step === 5" x-transition class="mt-4 p-5 bg-gradient-to-br from-brand-500/10 to-purple-500/10 border border-brand-500/20 rounded-2xl text-center">
+            <div x-show="wizardStep === 1" class="space-y-2">
-              <div class="w-14 h-14 rounded-full bg-gradient-to-br from-brand-500 to-purple-500 flex items-center justify-center text-white text-2xl mb-3 mx-auto shadow-lg shadow-brand-500/30">✓</div>
+              <template x-for="p in plans" :key="p">
-              <h4 class="text-lg font-bold text-white mb-1">서버 준비 완료!</h4>
+                <button @click="selectPlan(p)"
-              <p class="text-slate-400 text-sm mb-4">인스턴스가 활성화되었습니다</p>
+                        class="w-full flex items-center justify-between p-3 bg-slate-800/80 hover:bg-slate-700 border border-slate-700/50 hover:border-brand-500/50 rounded-xl transition-all">
-              <div class="flex gap-3">
+                  <div class="flex items-center gap-3">
-                <button @click="resetLauncher" class="flex-1 py-3 bg-slate-800 hover:bg-slate-700 text-white font-semibold rounded-xl transition active:scale-[0.98]">닫기</button>
+                    <div class="w-9 h-9 rounded-lg bg-slate-700/50 flex items-center justify-center text-base"
-                <a href="https://t.me/AnvilForgeBot" target="_blank" class="flex-1 py-3 bg-gradient-to-r from-brand-600 to-brand-500 text-white font-semibold rounded-xl transition text-center active:scale-[0.98]">Console →</a>
+                         x-text="p === 'Micro' ? '🔹' : p === 'Starter' ? '🔷' : p === 'Pro' ? '⭐' : '💎'"></div>
+                    <div class="text-left">
+                      <div class="font-medium text-white text-sm" x-text="p"></div>
+                      <div class="text-xs text-slate-400" x-text="getPlanSpec(p)"></div>
+                    </div>
+                  </div>
+                  <div class="text-right">
+                    <div class="font-semibold text-brand-400 text-sm" x-text="'₩' + getPrice(p)"></div>
+                    <div class="text-[10px] text-slate-500">/월</div>
+                  </div>
+                </button>
+              </template>
+            </div>
+
+            <!-- Step 2: OS Selection -->
+            <div x-show="wizardStep === 2" class="space-y-2">
+              <template x-for="os in osList" :key="os.id">
+                <button @click="selectOS(os)"
+                        class="w-full flex items-center gap-3 p-3 bg-slate-800/80 hover:bg-slate-700 border border-slate-700/50 hover:border-purple-500/50 rounded-xl transition-all">
+                  <span class="text-xl" x-text="os.icon"></span>
+                  <span class="font-medium text-white text-sm" x-text="os.name"></span>
+                </button>
+              </template>
+            </div>
+
+            <!-- Step 3: Payment Selection -->
+            <div x-show="wizardStep === 3" class="space-y-2">
+              <template x-for="pay in paymentMethods" :key="pay.id">
+                <button @click="selectPayment(pay)"
+                        class="w-full flex items-center justify-between p-3 bg-slate-800/80 hover:bg-slate-700 border border-slate-700/50 hover:border-green-500/50 rounded-xl transition-all">
+                  <div class="text-left">
+                    <div class="font-medium text-white text-sm" x-text="pay.name"></div>
+                    <div class="text-xs text-slate-400" x-text="pay.desc"></div>
+                  </div>
+                  <div x-show="pay.discount > 0" class="px-2 py-1 bg-green-500/20 text-green-400 text-xs font-bold rounded-full">
+                    -<span x-text="pay.discount"></span>%
+                  </div>
+                </button>
+              </template>
+            </div>
+
+            <!-- Step 4: Confirmation -->
+            <div x-show="wizardStep === 4" class="space-y-3">
+              <div class="p-4 bg-slate-800/50 border border-slate-700/50 rounded-xl space-y-2 text-sm">
+                <div class="flex justify-between"><span class="text-slate-400">리전</span><span class="text-white" x-text="config.region"></span></div>
+                <div class="flex justify-between"><span class="text-slate-400">플랜</span><span class="text-white" x-text="config.plan + ' (' + getPlanSpec(config.plan) + ')'"></span></div>
+                <div class="flex justify-between"><span class="text-slate-400">OS</span><span class="text-white" x-text="config.os"></span></div>
+                <div class="flex justify-between"><span class="text-slate-400">결제</span><span class="text-white" x-text="config.payment === 'yearly' ? '연간' : '월간'"></span></div>
+                <div class="border-t border-slate-700 pt-2 mt-2 flex justify-between font-bold">
+                  <span class="text-slate-300">월 요금</span>
+                  <span class="text-brand-400" x-text="'₩' + getFinalPrice().toLocaleString('ko-KR')"></span>
+                </div>
               </div>
+              <button @click="startLaunch"
+                      class="w-full py-3.5 bg-gradient-to-r from-brand-600 to-brand-500 hover:from-brand-500 hover:to-brand-400 text-white font-bold rounded-xl transition-all shadow-lg shadow-brand-500/25 active:scale-[0.98] text-sm">
+                🚀 서버 생성하기
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Back Button -->
+        <div x-show="wizardStep > 0 && wizardStep < 5" class="px-4 pb-3 flex-shrink-0">
+          <button @click="goBack" class="text-xs text-slate-500 hover:text-slate-300 transition flex items-center gap-1">
+            <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
+            이전 단계
+          </button>
+        </div>
+
+        <!-- Deploying State -->
+        <div x-show="wizardStep >= 5" class="p-4 flex flex-col min-h-[300px]">
+          <!-- Progress -->
+          <div class="mb-4">
+            <div class="flex justify-between text-xs text-slate-400 mb-2">
+              <span x-text="deployStep < 5 ? '배포 중...' : '완료'"></span>
+              <span x-text="(deployStep * 20) + '%'"></span>
+            </div>
+            <div class="h-1.5 bg-slate-800 rounded-full overflow-hidden">
+              <div class="h-full bg-gradient-to-r from-brand-500 to-purple-500 transition-all duration-500 rounded-full" :style="'width: ' + (deployStep * 20) + '%'"></div>
             </div>
           </div>
 
+          <!-- Logs -->
+          <div class="flex-1 bg-black/30 rounded-xl p-3 text-xs text-slate-400 overflow-y-auto border border-white/5 space-y-1 max-h-40">
+            <template x-for="(log, idx) in logs" :key="idx">
+              <div x-text="log"></div>
+            </template>
+            <div x-show="launching" class="animate-pulse text-brand-400">▋</div>
+          </div>
+
+          <!-- Success State -->
+          <div x-show="deployStep === 5" x-transition class="mt-4 p-4 bg-gradient-to-br from-brand-500/10 to-purple-500/10 border border-brand-500/20 rounded-2xl text-center">
+            <div class="w-12 h-12 rounded-full bg-gradient-to-br from-brand-500 to-purple-500 flex items-center justify-center text-white text-xl mb-2 mx-auto">✓</div>
+            <h4 class="text-base font-bold text-white mb-1">서버 준비 완료!</h4>
+            <p class="text-slate-400 text-xs mb-3">인스턴스가 활성화되었습니다</p>
+            <div class="flex gap-2">
+              <button @click="resetLauncher" class="flex-1 py-2.5 bg-slate-800 hover:bg-slate-700 text-white font-semibold rounded-xl transition text-sm">닫기</button>
+              <a href="https://t.me/AnvilForgeBot" target="_blank" class="flex-1 py-2.5 bg-gradient-to-r from-brand-600 to-brand-500 text-white font-semibold rounded-xl transition text-center text-sm">Console →</a>
+            </div>
+          </div>
         </div>
 
       </div>