create-fuzionx 0.1.49 → 0.1.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-fuzionx",
-  "version": "0.1.49",
+  "version": "0.1.51",
   "description": "Create a new FuzionX application — npx create-fuzionx my-app",
   "type": "module",
   "bin": {

package/templates/common/locales/en.json

@@ -235,7 +235,8 @@
     "login": "Login",
     "logout": "Logout",
     "profile": "Profile",
-    "register": "Register"
+    "register": "Register",
+    "live": "Live"
   },
   "page": {
     "404": "Page not found",
@@ -252,5 +253,48 @@
     "title": "Edit Profile",
     "update_success": "Profile updated."
   },
-  "welcome": "Welcome, {name}! 👋"
+  "welcome": "Welcome, {name}! 👋",
+  "live": {
+    "back": "Back to list",
+    "broadcast": "Broadcast",
+    "cancel": "Cancel",
+    "channel_id": "Channel ID",
+    "channel_exists": "Channel already exists.",
+    "chat": "Chat",
+    "chat_placeholder": "Type a message...",
+    "connecting": "Connecting...",
+    "connection_failed": "connection failed",
+    "create": "New Channel",
+    "create_btn": "Create",
+    "create_failed": "Create failed",
+    "create_title": "Create New Channel",
+    "default": "Default",
+    "enter_channel_id": "Please enter a channel ID.",
+    "file_path": "File Path",
+    "file_stream": "File Streaming",
+    "hero_sub": "WebRTC Live Broadcast · VideoChat",
+    "join": "Join",
+    "join_room": "Enter Room",
+    "leave": "Leave",
+    "nickname": "Nickname",
+    "no_channels": "No active channels.",
+    "options": "Encoding Options",
+    "publisher": "Publisher",
+    "refresh": "Refresh",
+    "resolution": "Resolution",
+    "role": "Select Role",
+    "send": "Send",
+    "source": "Source",
+    "source_url": "Streaming URL",
+    "start_hint": "Create a new channel to get started.",
+    "stop": "Stop",
+    "stop_failed": "Stop failed",
+    "type": "Type",
+    "url_stream": "External URL",
+    "video_bitrate": "Video Bitrate",
+    "audio_bitrate": "Audio Bitrate",
+    "video_codec": "Video Codec",
+    "videochat": "VideoChat",
+    "viewer": "Viewer"
+  }
 }

package/templates/common/locales/ko.json

@@ -235,7 +235,8 @@
     "login": "로그인",
     "logout": "로그아웃",
     "profile": "프로필",
-    "register": "회원가입"
+    "register": "회원가입",
+    "live": "Live"
   },
   "page": {
     "404": "페이지를 찾을 수 없습니다",
@@ -252,5 +253,48 @@
     "title": "프로필 수정",
     "update_success": "프로필이 수정되었습니다."
   },
-  "welcome": "환영합니다, {name}님 👋"
+  "welcome": "환영합니다, {name}님 👋",
+  "live": {
+    "back": "목록으로",
+    "broadcast": "방송",
+    "cancel": "취소",
+    "channel_id": "채널 ID",
+    "channel_exists": "이미 존재하는 채널입니다.",
+    "chat": "채팅",
+    "chat_placeholder": "메시지 입력...",
+    "connecting": "연결 중...",
+    "connection_failed": "연결 실패",
+    "create": "새 채널",
+    "create_btn": "생성",
+    "create_failed": "생성 실패",
+    "create_title": "새 채널 만들기",
+    "default": "기본값",
+    "enter_channel_id": "채널 ID를 입력하세요.",
+    "file_path": "파일 경로",
+    "file_stream": "파일 스트리밍",
+    "hero_sub": "WebRTC 라이브 방송 · 화상채팅",
+    "join": "입장",
+    "join_room": "입장",
+    "leave": "나가기",
+    "nickname": "닉네임",
+    "no_channels": "활성 채널이 없습니다.",
+    "options": "인코딩 옵션",
+    "publisher": "송출자",
+    "refresh": "새로고침",
+    "resolution": "해상도",
+    "role": "역할 선택",
+    "send": "전송",
+    "source": "소스",
+    "source_url": "스트리밍 URL",
+    "start_hint": "새 채널을 만들어 시작하세요.",
+    "stop": "종료",
+    "stop_failed": "종료 실패",
+    "type": "타입",
+    "url_stream": "외부 URL",
+    "video_bitrate": "영상 비트레이트",
+    "audio_bitrate": "오디오 비트레이트",
+    "video_codec": "비디오 코덱",
+    "videochat": "화상채팅",
+    "viewer": "시청자"
+  }
 }

package/templates/common/package.json.tpl

@@ -9,8 +9,8 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@fuzionx/framework": "^0.1.49",
-    "@fuzionx/client": "^0.1.49",
+    "@fuzionx/framework": "^0.1.51",
+    "@fuzionx/client": "^0.1.51",
     "joi": "^18.1.1"
   },
   "devDependencies": {

package/templates/spa/meta.json

@@ -4,7 +4,7 @@
   "description": "Vue.js 3 SPA + Tera SSR 하이브리드. WASM 암호화 통신.",
   "features": ["auth", "board", "i18n", "asp", "wasm"],
   "dependencies": {
-    "@fuzionx/client": "^0.1.49"
+    "@fuzionx/client": "^0.1.51"
   },
   "devDependencies": {},
   "spaDevDependencies": {

package/templates/spa/views/default/spa/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fuzionx/player": "^0.1.51",
     "pinia": "^3.0.4",
     "vue": "^3.5.0",
     "vue-router": "^4.5.0"

package/templates/spa/views/default/spa/src/components/Navbar.vue

@@ -14,6 +14,7 @@
         <router-link to="/features" class="nav-link">{{ t('nav.features', 'Features') }}</router-link>
         <router-link to="/chat" class="nav-link">{{ t('nav.chat', 'Chat Demo') }}</router-link>
         <router-link to="/board" class="nav-link">{{ t('nav.board', '게시판') }}</router-link>
+        <router-link to="/live" class="nav-link">{{ t('nav.live', 'Live') }}</router-link>
         <template v-if="authStore.isAuthenticated">
           <router-link to="/profile" class="nav-link">{{ t('nav.profile', '프로필') }}</router-link>
           <button class="nav-link btn-link" @click="handleLogout">{{ t('nav.logout', '로그아웃') }}</button>

package/templates/spa/views/default/spa/src/router/index.js

@@ -15,6 +15,11 @@ export const routes = [
   { path: '/', name: 'home', component: HomeView },
   { path: '/features', name: 'features', component: () => import('../views/FeaturesView.vue') },
 
+  // ── Live (인증 필요) ──
+  { path: '/live', name: 'live', component: () => import('../views/LiveList.vue'), meta: { auth: true } },
+  { path: '/live/watch/:channelId', name: 'live-watch', component: () => import('../views/LiveWatch.vue'), meta: { auth: true } },
+  { path: '/live/room/:channelId', name: 'live-room', component: () => import('../views/LiveRoom.vue'), meta: { auth: true } },
+
   // ── 게스트 전용 (로그인 상태면 홈으로) ──
   { path: '/login', name: 'login', component: () => import('../views/Login.vue'), meta: { guest: true } },
   { path: '/register', name: 'register', component: () => import('../views/Register.vue'), meta: { guest: true } },

package/templates/spa/views/default/spa/src/views/LiveList.vue

@@ -0,0 +1,488 @@
+<!--
+  LiveList.vue — 라이브 채널 목록 + 생성/종료.
+
+  Hub API (GET /api/channels) 폴링으로 채널 표시.
+  생성 모달: Broadcast (URL / 파일) 또는 VideoChat.
+  종료: DELETE /api/channels/:id.
+-->
+<template>
+  <div class="container">
+    <!-- ── Header ── -->
+    <section class="hero-section" style="padding:3rem 0 2rem;">
+      <h1 class="hero-title">
+        <span class="gradient-text">Live Channels</span>
+      </h1>
+      <p class="hero-subtitle">{{ t('live.hero_sub', 'WebRTC Live Broadcast · VideoChat') }}</p>
+    </section>
+
+    <!-- ── Hub URL 설정 ── -->
+    <div class="live-hub-bar glass-card" style="margin-bottom:1.5rem;padding:0.75rem 1.25rem;display:flex;align-items:center;gap:0.75rem;">
+      <label style="font-size:0.8rem;color:var(--text-muted);white-space:nowrap;">Hub URL</label>
+      <input
+        v-model="hubUrl"
+        type="text"
+        class="form-input"
+        style="flex:1;padding:0.4rem 0.75rem;font-size:0.85rem;"
+        placeholder="http://127.0.0.1:9100"
+      />
+      <button class="btn btn-primary" style="padding:0.4rem 1rem;font-size:0.85rem;" @click="fetchChannels">
+        {{ t('live.refresh', '새로고침') }}
+      </button>
+      <button class="btn btn-hero-primary" style="padding:0.4rem 1rem;font-size:0.85rem;" @click="showCreateModal = true">
+        + {{ t('live.create', '새 채널') }}
+      </button>
+    </div>
+
+    <!-- ── Error ── -->
+    <div v-if="error" class="alert alert-error" style="margin-bottom:1rem;">
+      {{ error }}
+    </div>
+
+    <!-- ── Channel List ── -->
+    <div v-if="channels.length === 0 && !loading" class="glass-card" style="text-align:center;padding:3rem;">
+      <p style="color:var(--text-muted);font-size:1rem;">{{ t('live.no_channels', '활성 채널이 없습니다.') }}</p>
+      <p style="color:var(--text-muted);font-size:0.85rem;margin-top:0.5rem;">{{ t('live.start_hint', 'Create a new channel to get started.') }}</p>
+    </div>
+
+    <div v-else class="live-grid">
+      <div v-for="ch in channels" :key="ch.channel_id" class="glass-card live-card">
+        <div class="live-card-header">
+          <span :class="['live-badge', ch.source_type === 'webrtc' ? 'badge-videochat' : 'badge-broadcast']">
+            {{ ch.source_type === 'webrtc' ? '👥 ' + t('live.videochat', 'VideoChat') : '🔴 ' + t('live.broadcast', 'Broadcast') }}
+          </span>
+          <span class="live-viewers">
+            👁 {{ ch.viewer_count || 0 }}
+          </span>
+        </div>
+        <div class="live-card-body">
+          <h3 class="live-card-title">{{ ch.channel_id }}</h3>
+          <p class="live-card-meta">
+            <span v-if="ch.source_url" style="word-break:break-all;">{{ ch.source_url }}</span>
+            <span v-else>{{ ch.source_type }}</span>
+          </p>
+          <p class="live-card-meta" style="font-size:0.75rem;">
+            Media: {{ ch.media_id }} · {{ ch.media_ip }}:{{ ch.webrtc_port }}
+          </p>
+        </div>
+        <div class="live-card-actions">
+          <button
+            class="btn btn-primary"
+            style="flex:1;"
+            @click="joinChannel(ch)"
+          >
+            {{ t('live.join', '입장') }}
+          </button>
+          <button
+            class="btn btn-outline"
+            style="color:#ef4444;border-color:#ef4444;"
+            @click="stopChannel(ch.channel_id)"
+          >
+            {{ t('live.stop', '종료') }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- ── Create Modal ── -->
+    <div v-if="showCreateModal" class="live-modal-overlay" @click.self="showCreateModal = false">
+      <div class="glass-card live-modal">
+        <h2 style="margin-bottom:1.5rem;">📡 {{ t('live.create_title', '새 채널 만들기') }}</h2>
+
+        <div class="form-group">
+          <label class="form-label">{{ t('live.channel_id', '채널 ID') }}</label>
+          <input v-model="createForm.channelId" type="text" class="form-input" placeholder="my-channel" />
+        </div>
+
+        <div class="form-group">
+          <label class="form-label">{{ t('live.type', '타입') }}</label>
+          <div class="live-type-selector">
+            <button
+              :class="['live-type-btn', { active: createForm.type === 'broadcast' }]"
+              @click="createForm.type = 'broadcast'"
+            >
+              🔴 {{ t('live.broadcast', '방송') }}
+            </button>
+            <button
+              :class="['live-type-btn', { active: createForm.type === 'videochat' }]"
+              @click="createForm.type = 'videochat'"
+            >
+              👥 {{ t('live.videochat', '화상채팅') }}
+            </button>
+          </div>
+        </div>
+
+        <!-- Broadcast 옵션 -->
+        <template v-if="createForm.type === 'broadcast'">
+          <div class="form-group">
+            <label class="form-label">{{ t('live.source', '소스') }}</label>
+            <div class="live-type-selector">
+              <button
+                :class="['live-type-btn', { active: createForm.sourceMode === 'url' }]"
+                @click="createForm.sourceMode = 'url'"
+              >
+                🌐 {{ t('live.url_stream', '외부 URL') }}
+              </button>
+              <button
+                :class="['live-type-btn', { active: createForm.sourceMode === 'file' }]"
+                @click="createForm.sourceMode = 'file'"
+              >
+                📁 {{ t('live.file_stream', '파일 스트리밍') }}
+              </button>
+            </div>
+          </div>
+
+          <div v-if="createForm.sourceMode === 'url'" class="form-group">
+            <label class="form-label">{{ t('live.source_url', '스트리밍 URL') }}</label>
+            <input v-model="createForm.sourceUrl" type="text" class="form-input" placeholder="rtmp://... 또는 http://..." />
+          </div>
+
+          <div v-if="createForm.sourceMode === 'file'" class="form-group">
+            <label class="form-label">{{ t('live.file_path', '파일 경로') }}</label>
+            <input v-model="createForm.sourceUrl" type="text" class="form-input" placeholder="/path/to/video.mp4" />
+          </div>
+        </template>
+
+        <!-- 인코딩 옵션 (Broadcast 전용) -->
+        <template v-if="createForm.type === 'broadcast'">
+          <div class="form-group" style="margin-top:0.5rem;">
+            <label class="form-label">⚙️ {{ t('live.options', '인코딩 옵션') }}</label>
+            <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;">
+              <div>
+                <label class="form-label" style="font-size:0.75rem;">{{ t('live.resolution', '해상도') }}</label>
+                <select v-model="createForm.resolution" class="form-input" style="padding:0.4rem 0.5rem;font-size:0.85rem;">
+                  <option value="">{{ t('live.default', 'Default') }}</option>
+                  <option value="1920x1080">1920×1080 (FHD)</option>
+                  <option value="1280x720">1280×720 (HD)</option>
+                  <option value="854x480">854×480 (SD)</option>
+                  <option value="640x360">640×360</option>
+                </select>
+              </div>
+              <div>
+                <label class="form-label" style="font-size:0.75rem;">{{ t('live.video_bitrate', '영상 비트레이트') }}</label>
+                <select v-model="createForm.videoBitrate" class="form-input" style="padding:0.4rem 0.5rem;font-size:0.85rem;">
+                  <option value="">{{ t('live.default', 'Default') }}</option>
+                  <option value="8000">8000 kbps</option>
+                  <option value="5000">5000 kbps</option>
+                  <option value="3000">3000 kbps</option>
+                  <option value="1500">1500 kbps</option>
+                  <option value="800">800 kbps</option>
+                </select>
+              </div>
+              <div>
+                <label class="form-label" style="font-size:0.75rem;">{{ t('live.audio_bitrate', '오디오 비트레이트') }}</label>
+                <select v-model="createForm.audioBitrate" class="form-input" style="padding:0.4rem 0.5rem;font-size:0.85rem;">
+                  <option value="">{{ t('live.default', 'Default') }}</option>
+                  <option value="320">320 kbps</option>
+                  <option value="192">192 kbps</option>
+                  <option value="128">128 kbps</option>
+                  <option value="64">64 kbps</option>
+                </select>
+              </div>
+              <div>
+                <label class="form-label" style="font-size:0.75rem;">{{ t('live.video_codec', '비디오 코덱') }}</label>
+                <select v-model="createForm.videoCodec" class="form-input" style="padding:0.4rem 0.5rem;font-size:0.85rem;">
+                  <option value="">{{ t('live.default', 'Default') }}</option>
+                  <option value="h264">H.264</option>
+                  <option value="vp8">VP8</option>
+                  <option value="vp9">VP9</option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </template>
+
+        <div v-if="createError" class="alert alert-error" style="margin-top:1rem;">{{ createError }}</div>
+
+        <div style="display:flex;gap:0.75rem;margin-top:1.5rem;">
+          <button class="btn btn-outline" style="flex:1;" @click="showCreateModal = false">
+            {{ t('live.cancel', '취소') }}
+          </button>
+          <button class="btn btn-hero-primary" style="flex:1;" :disabled="creating" @click="createChannel">
+            {{ creating ? '...' : t('live.create_btn', '생성') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ── Footer ── -->
+  <footer class="site-footer">
+    <div class="container">
+      <div class="footer-content">
+        <span class="footer-brand">FuzionX</span>
+        <span class="footer-text">Powered by <code>@fuzionx/player</code> WebRTC SDK</span>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useLocale } from '../composables/useLocale.js';
+import { useAuthStore } from '../stores/auth.js';
+
+const { t } = useLocale();
+const router = useRouter();
+const authStore = useAuthStore();
+
+/* ── State ── */
+const hubUrl = ref('http://127.0.0.1:9100');
+const channels = ref([]);
+const loading = ref(false);
+const error = ref('');
+const showCreateModal = ref(false);
+const creating = ref(false);
+const createError = ref('');
+
+const createForm = ref({
+  channelId: '',
+  type: 'broadcast',       // 'broadcast' | 'videochat'
+  sourceMode: 'url',       // 'url' | 'file'
+  sourceUrl: '',
+  resolution: '',          // '1920x1080', '1280x720', etc.
+  videoBitrate: '',        // kbps
+  audioBitrate: '',        // kbps
+  videoCodec: '',          // 'h264', 'vp8', 'vp9'
+});
+
+let pollTimer = null;
+
+/* ── Lifecycle ── */
+onMounted(() => {
+  fetchChannels();
+  pollTimer = setInterval(fetchChannels, 5000);
+});
+
+onUnmounted(() => {
+  if (pollTimer) clearInterval(pollTimer);
+});
+
+/* ── Hub API ── */
+async function fetchChannels() {
+  try {
+    // 첫 로드에만 loading 표시 (폴링 시 깜빡임 방지)
+    const isFirstLoad = channels.value.length === 0 && !error.value;
+    if (isFirstLoad) loading.value = true;
+    const res = await fetch(`${hubUrl.value}/api/channels`);
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const newData = await res.json();
+    // 성공 시 에러 초기화
+    error.value = '';
+    // 데이터가 변경된 경우에만 업데이트 (Vue 불필요 재렌더 방지)
+    if (JSON.stringify(newData) !== JSON.stringify(channels.value)) {
+      channels.value = newData;
+    }
+  } catch (e) {
+    // 폴링 에러 시 기존 채널 목록은 유지 (깜빡임 방지)
+    // 첫 로드 실패 시에만 빈 목록 표시
+    if (channels.value.length === 0) {
+      error.value = `Hub ${t('live.connection_failed', 'connection failed')}: ${e.message}`;
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function createChannel() {
+  const form = createForm.value;
+  if (!form.channelId.trim()) {
+    createError.value = t('live.enter_channel_id', 'Please enter a channel ID.');
+    return;
+  }
+
+  creating.value = true;
+  createError.value = '';
+
+  try {
+    const channelId = form.channelId.trim();
+
+    // 화상채팅: SDK(FuzionXPublisher.connect)가 채널 생성을 처리하므로
+    // Hub API를 직접 호출하지 않고 바로 room 입장
+    if (form.type === 'videochat') {
+      showCreateModal.value = false;
+      createForm.value = { channelId: '', type: 'broadcast', sourceMode: 'url', sourceUrl: '', resolution: '', videoBitrate: '', audioBitrate: '', videoCodec: '' };
+      const nick = authStore.user?.name || 'host-' + Math.random().toString(36).slice(2, 6);
+      router.push({ name: 'live-room', params: { channelId }, query: { hub: hubUrl.value, role: 'publisher', nickname: nick } });
+      return;
+    }
+
+    // 방송: Hub API로 채널 생성 (always_on=true, 영구 보존)
+    const body = {
+      channel_id: channelId,
+      source_type: 'url',
+    };
+
+    if (form.sourceUrl.trim()) {
+      body.source_url = form.sourceUrl.trim();
+    }
+
+    // 인코딩 옵션 조립
+    const opts = { always_on: true };
+    if (form.resolution) opts.resolution = form.resolution;
+    if (form.videoBitrate) {
+      opts.video = { bitrate_kbps: parseInt(form.videoBitrate) };
+      if (form.videoCodec) opts.video.codec = form.videoCodec;
+    } else if (form.videoCodec) {
+      opts.video = { codec: form.videoCodec };
+    }
+    if (form.audioBitrate) opts.audio = { bitrate_kbps: parseInt(form.audioBitrate) };
+    body.options = opts;
+
+    const res = await fetch(`${hubUrl.value}/api/channels`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    });
+
+    if (res.status === 409) {
+      createError.value = t('live.channel_exists', 'Channel already exists.');
+      return;
+    }
+    if (!res.ok) {
+      const data = await res.json().catch(() => ({}));
+      createError.value = data.error || `${t('live.create_failed', 'Create failed')} (${res.status})`;
+      return;
+    }
+
+    showCreateModal.value = false;
+    createForm.value = { channelId: '', type: 'broadcast', sourceMode: 'url', sourceUrl: '', resolution: '', videoBitrate: '', audioBitrate: '', videoCodec: '' };
+    await fetchChannels();
+  } catch (e) {
+    createError.value = `Hub 연결 실패: ${e.message}`;
+  } finally {
+    creating.value = false;
+  }
+}
+
+async function stopChannel(channelId) {
+  try {
+    await fetch(`${hubUrl.value}/api/channels/${channelId}`, { method: 'DELETE' });
+    await fetchChannels();
+  } catch (e) {
+    error.value = `${t('live.stop_failed', 'Stop failed')}: ${e.message}`;
+  }
+}
+
+function joinChannel(ch) {
+  if (ch.source_type === 'webrtc') {
+    router.push({ name: 'live-room', params: { channelId: ch.channel_id }, query: { hub: hubUrl.value } });
+  } else {
+    router.push({ name: 'live-watch', params: { channelId: ch.channel_id }, query: { hub: hubUrl.value } });
+  }
+}
+</script>
+
+<style scoped>
+.live-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 1.25rem;
+}
+
+.live-card {
+  display: flex;
+  flex-direction: column;
+  padding: 1.25rem;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+.live-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.15);
+}
+
+.live-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.live-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+.badge-broadcast {
+  background: rgba(239, 68, 68, 0.15);
+  color: #f87171;
+  border: 1px solid rgba(239, 68, 68, 0.3);
+}
+.badge-videochat {
+  background: rgba(99, 102, 241, 0.15);
+  color: #818cf8;
+  border: 1px solid rgba(99, 102, 241, 0.3);
+}
+
+.live-viewers {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+
+.live-card-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: var(--text-primary, #e0e0e0);
+}
+
+.live-card-meta {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  margin-bottom: 0.25rem;
+}
+
+.live-card-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: auto;
+  padding-top: 1rem;
+}
+
+/* Modal */
+.live-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.live-modal {
+  width: 90%;
+  max-width: 480px;
+  padding: 2rem;
+}
+
+.live-type-selector {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.live-type-btn {
+  flex: 1;
+  padding: 0.6rem;
+  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 0.85rem;
+  transition: all 0.2s;
+}
+.live-type-btn.active {
+  background: rgba(99, 102, 241, 0.15);
+  color: #818cf8;
+  border-color: rgba(99, 102, 241, 0.4);
+}
+.live-type-btn:hover {
+  border-color: rgba(99, 102, 241, 0.3);
+}
+</style>