feat: bootstrap tauri motrix-style UI and aria2 torrent flow

src/App.vue

@@ -0,0 +1,674 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { getCurrentWindow } from '@tauri-apps/api/window'
+import type { UnlistenFn } from '@tauri-apps/api/event'
+import {
+  addAria2Torrent,
+  addAria2Uri,
+  getEngineStatus,
+  listAria2Tasks,
+  loadTorrentFile,
+  startEngine,
+  stopEngine,
+  type Aria2Task,
+  type Aria2TaskSnapshot,
+  type EngineStatus,
+} from './lib/engineApi'
+
+type TaskFilter = 'all' | 'active' | 'waiting' | 'stopped'
+type AddTab = 'url' | 'torrent'
+
+const binaryPath = ref('aria2c')
+const rpcPort = ref(6800)
+const rpcSecret = ref('')
+const downloadDir = ref('')
+const split = ref(8)
+const maxConcurrentDownloads = ref(5)
+
+const loadingEngine = ref(false)
+const loadingTasks = ref(false)
+const loadingAddTask = ref(false)
+const errorMessage = ref('')
+const successMessage = ref('')
+const autoRefresh = ref(true)
+const filter = ref<TaskFilter>('all')
+
+const showAddModal = ref(false)
+const addTab = ref<AddTab>('url')
+const addUrl = ref('')
+const addOut = ref('')
+const addSplit = ref(64)
+const torrentBase64 = ref('')
+const torrentFileName = ref('')
+const torrentFileExt = ref('')
+const torrentFileSize = ref(0)
+const appDropActive = ref(false)
+const modalDropActive = ref(false)
+const torrentFileInput = ref<HTMLInputElement | null>(null)
+
+const status = ref<EngineStatus>({
+  running: false,
+  pid: null,
+  binaryPath: null,
+  args: [],
+  startedAt: null,
+})
+
+const tasks = ref<Aria2TaskSnapshot>({
+  active: [],
+  waiting: [],
+  stopped: [],
+})
+
+let refreshTimer: number | null = null
+let unlistenDragDrop: UnlistenFn | null = null
+
+const totalCount = computed(() => tasks.value.active.length + tasks.value.waiting.length + tasks.value.stopped.length)
+
+const filteredTasks = computed(() => {
+  if (filter.value === 'active') return tasks.value.active
+  if (filter.value === 'waiting') return tasks.value.waiting
+  if (filter.value === 'stopped') return tasks.value.stopped
+  return [...tasks.value.active, ...tasks.value.waiting, ...tasks.value.stopped]
+})
+
+const runtimeLabel = computed(() => (status.value.running ? 'Running' : 'Stopped'))
+
+function pushError(message: string) {
+  successMessage.value = ''
+  errorMessage.value = message
+}
+
+function pushSuccess(message: string) {
+  errorMessage.value = ''
+  successMessage.value = message
+}
+
+function rpcConfig() {
+  return {
+    rpcListenPort: rpcPort.value,
+    rpcSecret: rpcSecret.value.trim() || undefined,
+  }
+}
+
+function formatDateTime(epochSec: number | null): string {
+  if (!epochSec) return '-'
+  return new Date(epochSec * 1000).toLocaleString()
+}
+
+function formatBytes(value: string): string {
+  const n = Number(value)
+  if (!Number.isFinite(n)) return '-'
+  return formatBytesNumber(n)
+}
+
+function formatBytesNumber(n: number): string {
+  if (!Number.isFinite(n)) return '-'
+  if (n < 1024) return `${n} B`
+  const kb = n / 1024
+  if (kb < 1024) return `${kb.toFixed(1)} KB`
+  const mb = kb / 1024
+  if (mb < 1024) return `${mb.toFixed(1)} MB`
+  const gb = mb / 1024
+  return `${gb.toFixed(2)} GB`
+}
+
+function formatSpeed(value: string): string {
+  const n = Number(value)
+  if (!Number.isFinite(n) || n <= 0) return '0 B/s'
+  if (n < 1024) return `${n} B/s`
+  const kb = n / 1024
+  if (kb < 1024) return `${kb.toFixed(1)} KB/s`
+  const mb = kb / 1024
+  return `${mb.toFixed(1)} MB/s`
+}
+
+function progress(task: Aria2Task): number {
+  const total = Number(task.totalLength)
+  const done = Number(task.completedLength)
+  if (!Number.isFinite(total) || total <= 0 || !Number.isFinite(done)) return 0
+  return Math.min(100, Math.max(0, (done / total) * 100))
+}
+
+async function refreshEngineStatus() {
+  try {
+    status.value = await getEngineStatus()
+  } catch (error) {
+    pushError(String(error))
+  }
+}
+
+async function refreshTasks(silent = false) {
+  if (!status.value.running) {
+    tasks.value = { active: [], waiting: [], stopped: [] }
+    return
+  }
+
+  if (!silent) loadingTasks.value = true
+  try {
+    tasks.value = await listAria2Tasks(rpcConfig())
+  } catch (error) {
+    pushError(String(error))
+  } finally {
+    if (!silent) loadingTasks.value = false
+  }
+}
+
+function updateRefreshTimer() {
+  if (refreshTimer !== null) {
+    window.clearInterval(refreshTimer)
+    refreshTimer = null
+  }
+  if (!autoRefresh.value) return
+
+  refreshTimer = window.setInterval(() => {
+    void refreshEngineStatus()
+    void refreshTasks(true)
+  }, 3000)
+}
+
+async function onStartEngine() {
+  loadingEngine.value = true
+  try {
+    status.value = await startEngine({
+      binaryPath: binaryPath.value.trim() || undefined,
+      rpcListenPort: rpcPort.value,
+      rpcSecret: rpcSecret.value.trim() || undefined,
+      downloadDir: downloadDir.value.trim() || undefined,
+      maxConcurrentDownloads: maxConcurrentDownloads.value,
+      split: split.value,
+    })
+    pushSuccess('aria2 engine started.')
+    await refreshTasks()
+  } catch (error) {
+    pushError(String(error))
+  } finally {
+    loadingEngine.value = false
+  }
+}
+
+async function onStopEngine() {
+  loadingEngine.value = true
+  try {
+    status.value = await stopEngine()
+    tasks.value = { active: [], waiting: [], stopped: [] }
+    pushSuccess('aria2 engine stopped.')
+  } catch (error) {
+    pushError(String(error))
+  } finally {
+    loadingEngine.value = false
+  }
+}
+
+function openAddModal() {
+  showAddModal.value = true
+  addTab.value = 'url'
+}
+
+function closeAddModal() {
+  showAddModal.value = false
+  modalDropActive.value = false
+}
+
+function openAddModalForTorrent() {
+  showAddModal.value = true
+  addTab.value = 'torrent'
+}
+
+async function toBase64(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => {
+      const result = reader.result
+      if (typeof result !== 'string') {
+        reject(new Error('파일을 읽을 수 없습니다.'))
+        return
+      }
+      const base64 = result.includes(',') ? (result.split(',')[1] ?? '') : result
+      resolve(base64)
+    }
+    reader.onerror = () => reject(new Error('파일 읽기 실패'))
+    reader.readAsDataURL(file)
+  })
+}
+
+function fileExt(name: string): string {
+  const idx = name.lastIndexOf('.')
+  if (idx < 0) return '-'
+  return name.slice(idx + 1).toLowerCase()
+}
+
+async function applyTorrentFile(file: File) {
+  if (!/\.torrent$/i.test(file.name)) {
+    pushError('torrent 파일만 추가할 수 있습니다.')
+    return
+  }
+
+  torrentBase64.value = await toBase64(file)
+  torrentFileName.value = file.name
+  torrentFileSize.value = file.size
+  torrentFileExt.value = fileExt(file.name)
+
+  if (!addOut.value) {
+    addOut.value = file.name.replace(/\.torrent$/i, '')
+  }
+
+  openAddModalForTorrent()
+}
+
+async function applyTorrentPath(path: string) {
+  const payload = await loadTorrentFile(path)
+  torrentBase64.value = payload.base64
+  torrentFileName.value = payload.name
+  torrentFileSize.value = payload.size
+  torrentFileExt.value = fileExt(payload.name)
+  if (!addOut.value) {
+    addOut.value = payload.name.replace(/\\.torrent$/i, '')
+  }
+  openAddModalForTorrent()
+}
+
+function triggerTorrentPick() {
+  torrentFileInput.value?.click()
+}
+
+async function onTorrentFileChange(event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+  if (!file) return
+
+  try {
+    await applyTorrentFile(file)
+  } catch (error) {
+    pushError(String(error))
+  }
+}
+
+async function onModalTorrentDrop(event: DragEvent) {
+  event.preventDefault()
+  modalDropActive.value = false
+
+  const file = event.dataTransfer?.files?.[0]
+  if (!file) return
+
+  try {
+    await applyTorrentFile(file)
+  } catch (error) {
+    pushError(String(error))
+  }
+}
+
+function onModalTorrentDragOver(event: DragEvent) {
+  event.preventDefault()
+  modalDropActive.value = true
+}
+
+function onModalTorrentDragLeave() {
+  modalDropActive.value = false
+}
+
+function extractDroppedFile(event: DragEvent): File | null {
+  const files = event.dataTransfer?.files
+  if (files && files.length > 0) {
+    return files[0] ?? null
+  }
+
+  const items = event.dataTransfer?.items
+  if (!items) {
+    return null
+  }
+  for (const item of Array.from(items)) {
+    const file = item.getAsFile()
+    if (file) {
+      return file
+    }
+  }
+  return null
+}
+
+function onWindowDragEnter(event: DragEvent) {
+  event.preventDefault()
+  appDropActive.value = true
+}
+
+function onWindowDragOver(event: DragEvent) {
+  event.preventDefault()
+  appDropActive.value = true
+}
+
+function onWindowDragLeave() {
+  appDropActive.value = false
+}
+
+async function onWindowDrop(event: DragEvent) {
+  event.preventDefault()
+  event.stopPropagation()
+  appDropActive.value = false
+
+  const file = extractDroppedFile(event)
+  if (!file) return
+
+  try {
+    await applyTorrentFile(file)
+  } catch (error) {
+    pushError(String(error))
+  }
+}
+
+async function onSubmitAddTask() {
+  if (!status.value.running) {
+    pushError('먼저 엔진을 시작하세요.')
+    return
+  }
+
+  loadingAddTask.value = true
+  try {
+    if (addTab.value === 'url') {
+      if (!addUrl.value.trim()) {
+        pushError('URL을 입력하세요.')
+        return
+      }
+      const gid = await addAria2Uri({
+        rpc: rpcConfig(),
+        uri: addUrl.value.trim(),
+        out: addOut.value.trim() || undefined,
+        dir: downloadDir.value.trim() || undefined,
+        split: addSplit.value,
+      })
+      pushSuccess(`작업이 추가되었습니다. gid=${gid}`)
+    } else {
+      if (!torrentBase64.value.trim()) {
+        pushError('.torrent 파일을 선택하세요.')
+        return
+      }
+      const gid = await addAria2Torrent({
+        rpc: rpcConfig(),
+        torrentBase64: torrentBase64.value,
+        out: addOut.value.trim() || undefined,
+        dir: downloadDir.value.trim() || undefined,
+        split: addSplit.value,
+      })
+      pushSuccess(`토렌트가 추가되었습니다. gid=${gid}`)
+    }
+
+    addUrl.value = ''
+    addOut.value = ''
+    torrentBase64.value = ''
+    torrentFileName.value = ''
+    torrentFileExt.value = ''
+    torrentFileSize.value = 0
+    showAddModal.value = false
+    await refreshTasks()
+  } catch (error) {
+    pushError(String(error))
+  } finally {
+    loadingAddTask.value = false
+  }
+}
+
+onMounted(async () => {
+  await refreshEngineStatus()
+  await refreshTasks()
+  updateRefreshTimer()
+
+  window.addEventListener('dragover', onWindowDragOver)
+  window.addEventListener('dragenter', onWindowDragEnter)
+  window.addEventListener('dragleave', onWindowDragLeave)
+  window.addEventListener('drop', onWindowDrop)
+
+  unlistenDragDrop = await getCurrentWindow().onDragDropEvent(async (event) => {
+    if (event.payload.type === 'over' || event.payload.type === 'enter') {
+      appDropActive.value = true
+      return
+    }
+    if (event.payload.type === 'leave') {
+      appDropActive.value = false
+      return
+    }
+    if (event.payload.type === 'drop') {
+      appDropActive.value = false
+      const droppedPath = event.payload.paths[0]
+      if (!droppedPath) return
+      try {
+        await applyTorrentPath(droppedPath)
+      } catch (error) {
+        pushError(String(error))
+      }
+    }
+  })
+})
+
+onUnmounted(() => {
+  if (refreshTimer !== null) {
+    window.clearInterval(refreshTimer)
+  }
+
+  window.removeEventListener('dragover', onWindowDragOver)
+  window.removeEventListener('dragenter', onWindowDragEnter)
+  window.removeEventListener('dragleave', onWindowDragLeave)
+  window.removeEventListener('drop', onWindowDrop)
+
+  if (unlistenDragDrop) {
+    unlistenDragDrop()
+    unlistenDragDrop = null
+  }
+})
+</script>
+
+<template>
+  <main class="app-shell" :class="{ 'app-drop-active': appDropActive }">
+    <aside class="sidebar">
+      <div class="brand">m</div>
+      <div class="side-icons">
+        <button class="side-icon" title="목록">☰</button>
+        <button class="side-icon add" title="새 작업" @click="openAddModal">＋</button>
+      </div>
+      <nav>
+        <a class="active">다운로드 중</a>
+        <a>대기 중</a>
+        <a>중단됨</a>
+      </nav>
+      <div class="sidebar-foot">
+        <button class="side-icon" title="설정">⚙</button>
+      </div>
+    </aside>
+
+    <section class="content">
+      <header class="toolbar">
+        <div class="toolbar-left">
+          <h1>다운로드 중</h1>
+          <span class="count">{{ totalCount }} tasks</span>
+        </div>
+        <div class="toolbar-right">
+          <label class="switcher">
+            <input v-model="autoRefresh" type="checkbox" @change="updateRefreshTimer" />
+            <span>Auto refresh</span>
+          </label>
+          <button class="ghost" :disabled="loadingTasks" @click="refreshTasks()">새로고침</button>
+        </div>
+      </header>
+
+      <section v-if="errorMessage" class="notice error">{{ errorMessage }}</section>
+      <section v-if="successMessage" class="notice success">{{ successMessage }}</section>
+
+      <section class="main-grid">
+        <article class="task-pane card">
+          <div class="tabs">
+            <button :class="{ active: filter === 'all' }" @click="filter = 'all'">전체</button>
+            <button :class="{ active: filter === 'active' }" @click="filter = 'active'">
+              다운로드 중 ({{ tasks.active.length }})
+            </button>
+            <button :class="{ active: filter === 'waiting' }" @click="filter = 'waiting'">
+              대기 중 ({{ tasks.waiting.length }})
+            </button>
+            <button :class="{ active: filter === 'stopped' }" @click="filter = 'stopped'">
+              중단됨 ({{ tasks.stopped.length }})
+            </button>
+          </div>
+
+          <div class="task-table-wrap">
+            <table class="task-table">
+              <thead>
+                <tr>
+                  <th>작업</th>
+                  <th>상태</th>
+                  <th>진행률</th>
+                  <th>속도</th>
+                  <th>전체 크기</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="task in filteredTasks" :key="task.gid">
+                  <td>
+                    <div class="file-cell">
+                      <strong>{{ task.fileName || '-' }}</strong>
+                      <small>{{ task.gid }}</small>
+                    </div>
+                  </td>
+                  <td>
+                    <span class="status-tag" :class="task.status">{{ task.status }}</span>
+                  </td>
+                  <td>
+                    <div class="progress-row">
+                      <div class="bar">
+                        <span :style="{ width: `${progress(task).toFixed(1)}%` }" />
+                      </div>
+                      <small>{{ progress(task).toFixed(1) }}%</small>
+                    </div>
+                  </td>
+                  <td>{{ formatSpeed(task.downloadSpeed) }}</td>
+                  <td>{{ formatBytes(task.totalLength) }}</td>
+                </tr>
+                <tr v-if="filteredTasks.length === 0">
+                  <td colspan="5" class="empty">현재 다운로드 없음</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </article>
+
+        <article class="right-pane card">
+          <h2>Engine</h2>
+          <p class="runtime" :class="status.running ? 'ok' : 'off'">{{ runtimeLabel }}</p>
+          <p><strong>PID:</strong> {{ status.pid ?? '-' }}</p>
+          <p><strong>Started:</strong> {{ formatDateTime(status.startedAt) }}</p>
+
+          <div class="engine-actions">
+            <button :disabled="loadingEngine || status.running" @click="onStartEngine">Start</button>
+            <button class="ghost" :disabled="loadingEngine || !status.running" @click="onStopEngine">Stop</button>
+          </div>
+
+          <h3>연결 설정</h3>
+          <label>
+            <span>Binary Path</span>
+            <input v-model="binaryPath" type="text" placeholder="aria2c" />
+          </label>
+          <label>
+            <span>RPC Port</span>
+            <input v-model.number="rpcPort" type="number" min="1" max="65535" />
+          </label>
+          <label>
+            <span>RPC Secret</span>
+            <input v-model="rpcSecret" type="text" placeholder="optional" />
+          </label>
+          <label>
+            <span>폴더</span>
+            <input v-model="downloadDir" type="text" placeholder="/path/to/downloads" />
+          </label>
+          <label>
+            <span>Split</span>
+            <input v-model.number="split" type="number" min="1" max="64" />
+          </label>
+          <label>
+            <span>Max Concurrent</span>
+            <input v-model.number="maxConcurrentDownloads" type="number" min="1" max="20" />
+          </label>
+        </article>
+      </section>
+    </section>
+
+    <div v-if="showAddModal" class="modal-backdrop" @click.self="closeAddModal">
+      <section class="add-modal">
+        <header class="modal-header">
+          <div class="modal-tabs">
+            <button :class="{ active: addTab === 'url' }" @click="addTab = 'url'">URL</button>
+            <button :class="{ active: addTab === 'torrent' }" @click="addTab = 'torrent'">토렌트</button>
+          </div>
+          <button class="icon-btn" @click="closeAddModal">×</button>
+        </header>
+
+        <div class="modal-body">
+          <template v-if="addTab === 'url'">
+            <label>
+              <span>URL</span>
+              <textarea v-model="addUrl" placeholder="한 줄에 작업 URL 하나 (HTTP / FTP / Magnet)" rows="4" />
+            </label>
+          </template>
+
+          <template v-else>
+            <input ref="torrentFileInput" class="hidden-input" type="file" accept=".torrent" @change="onTorrentFileChange" />
+
+            <div
+              v-if="!torrentBase64"
+              class="torrent-drop-zone"
+              :class="{ active: modalDropActive }"
+              @click="triggerTorrentPick"
+              @dragover="onModalTorrentDragOver"
+              @dragleave="onModalTorrentDragLeave"
+              @drop="onModalTorrentDrop"
+            >
+              <p>토렌트 파일을 여기로 드래그하거나 클릭해서 선택하십시오</p>
+            </div>
+
+            <div v-else class="torrent-selected">
+              <div class="torrent-head">
+                <strong>{{ torrentFileName }}</strong>
+                <button class="ghost small" @click="triggerTorrentPick">파일 변경</button>
+              </div>
+
+              <table class="torrent-file-table">
+                <thead>
+                  <tr>
+                    <th></th>
+                    <th>파일 이름</th>
+                    <th>파일 확장자</th>
+                    <th>파일 크기</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td><input type="checkbox" checked disabled /></td>
+                    <td>{{ addOut || torrentFileName.replace(/\.torrent$/i, '') }}</td>
+                    <td>{{ torrentFileExt || '-' }}</td>
+                    <td>{{ formatBytesNumber(torrentFileSize) }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </template>
+
+          <div class="modal-row">
+            <label>
+              <span>이름 변경</span>
+              <input v-model="addOut" type="text" placeholder="선택" />
+            </label>
+            <label>
+              <span>분할</span>
+              <input v-model.number="addSplit" type="number" min="1" max="64" />
+            </label>
+          </div>
+
+          <label>
+            <span>폴더</span>
+            <input v-model="downloadDir" type="text" placeholder="/Users/.../Downloads" />
+          </label>
+        </div>
+
+        <footer class="modal-footer">
+          <button class="ghost" @click="closeAddModal">취소</button>
+          <button :disabled="loadingAddTask" @click="onSubmitAddTask">확인</button>
+        </footer>
+      </section>
+    </div>
+  </main>
+</template>

src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

src/components/HelloWorld.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Learn more about IDE Support for Vue in the
+    <a
+      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
+      target="_blank"
+      >Vue Docs Scaling up Guide</a
+    >.
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

src/lib/engineApi.ts

@@ -0,0 +1,89 @@
+import { invoke } from '@tauri-apps/api/core'
+
+export interface EngineStatus {
+  running: boolean
+  pid: number | null
+  binaryPath: string | null
+  args: string[]
+  startedAt: number | null
+}
+
+export interface EngineStartPayload {
+  binaryPath?: string
+  rpcListenPort?: number
+  rpcSecret?: string
+  downloadDir?: string
+  maxConcurrentDownloads?: number
+  split?: number
+}
+
+export interface Aria2RpcConfig {
+  rpcListenPort?: number
+  rpcSecret?: string
+}
+
+export interface Aria2Task {
+  gid: string
+  status: string
+  totalLength: string
+  completedLength: string
+  downloadSpeed: string
+  dir: string
+  fileName: string
+}
+
+export interface Aria2TaskSnapshot {
+  active: Aria2Task[]
+  waiting: Aria2Task[]
+  stopped: Aria2Task[]
+}
+
+export interface AddUriPayload {
+  rpc: Aria2RpcConfig
+  uri: string
+  out?: string
+  dir?: string
+  split?: number
+}
+
+export interface AddTorrentPayload {
+  rpc: Aria2RpcConfig
+  torrentBase64: string
+  out?: string
+  dir?: string
+  split?: number
+}
+
+export interface TorrentFilePayload {
+  name: string
+  base64: string
+  size: number
+}
+
+export async function getEngineStatus(): Promise<EngineStatus> {
+  return invoke<EngineStatus>('engine_status')
+}
+
+export async function startEngine(payload: EngineStartPayload): Promise<EngineStatus> {
+  return invoke<EngineStatus>('engine_start', { request: payload })
+}
+
+export async function stopEngine(): Promise<EngineStatus> {
+  return invoke<EngineStatus>('engine_stop')
+}
+
+export async function listAria2Tasks(config: Aria2RpcConfig): Promise<Aria2TaskSnapshot> {
+  return invoke<Aria2TaskSnapshot>('aria2_list_tasks', { config })
+}
+
+export async function addAria2Uri(payload: AddUriPayload): Promise<string> {
+  return invoke<string>('aria2_add_uri', { request: payload })
+}
+
+export async function addAria2Torrent(payload: AddTorrentPayload): Promise<string> {
+  return invoke<string>('aria2_add_torrent', { request: payload })
+}
+
+export async function loadTorrentFile(path: string): Promise<TorrentFilePayload> {
+  return invoke<TorrentFilePayload>('load_torrent_file', { path })
+}

src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+createApp(App).mount('#app')

src/style.css

@@ -0,0 +1,497 @@
+:root {
+  --bg-app: #121317;
+  --bg-sidebar: #0a0b0d;
+  --bg-sidebar-active: #202227;
+  --bg-main: #15171c;
+  --bg-card: #1f2127;
+  --bg-card-soft: #2a2d34;
+  --line: #31353f;
+  --line-soft: #3a3f4a;
+  --text-main: #e4e8f1;
+  --text-sub: #a4adbf;
+  --brand: #5e62f3;
+  --brand-dark: #4e52dd;
+  --success: #27b47a;
+  --danger: #d06375;
+  --radius: 10px;
+
+  font-family: "SF Pro Text", "Pretendard", "Noto Sans KR", sans-serif;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  background: var(--bg-app);
+  color: var(--text-main);
+}
+
+#app { min-height: 100vh; }
+
+.app-shell {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: 74px 1fr;
+  background: var(--bg-main);
+  position: relative;
+}
+
+.app-shell.app-drop-active::after {
+  content: 'torrent 파일을 놓으면 추가 창이 열립니다';
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 18, 24, 0.74);
+  border: 2px dashed rgba(122, 131, 255, 0.72);
+  color: #d5daff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  z-index: 90;
+  pointer-events: none;
+}
+
+.sidebar {
+  background: var(--bg-sidebar);
+  border-right: 1px solid #14161b;
+  padding: 12px 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+.brand {
+  width: 42px;
+  height: 42px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #d7dff0;
+  font-size: 1.5rem;
+  font-weight: 300;
+}
+
+.side-icons { display: flex; flex-direction: column; gap: 8px; }
+
+.side-icon {
+  width: 42px;
+  height: 42px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: #9ca6ba;
+  border-radius: 8px;
+  font-size: 1.2rem;
+  cursor: pointer;
+}
+
+.side-icon:hover,
+.side-icon.add { background: #15181e; color: #d8def0; }
+
+.sidebar nav {
+  margin-top: 6px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.sidebar nav a {
+  color: #98a3b8;
+  text-decoration: none;
+  font-size: 0.74rem;
+  text-align: center;
+  padding: 8px 0;
+  border-radius: 8px;
+}
+
+.sidebar nav a.active,
+.sidebar nav a:hover { background: var(--bg-sidebar-active); color: #ecf0fa; }
+
+.sidebar-foot { margin-top: auto; }
+
+.content {
+  padding: 14px;
+  overflow: auto;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.toolbar-left { display: flex; align-items: baseline; gap: 10px; }
+
+h1 { margin: 0; font-size: 1.16rem; font-weight: 600; }
+
+.count { color: var(--text-sub); font-size: 0.8rem; }
+
+.toolbar-right { display: flex; align-items: center; gap: 8px; }
+
+.switcher {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.8rem;
+  color: var(--text-sub);
+}
+
+.card {
+  background: var(--bg-card);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+}
+
+.notice {
+  border-radius: 8px;
+  padding: 8px 10px;
+  margin-bottom: 8px;
+  font-size: 0.82rem;
+}
+
+.notice.error {
+  background: rgba(208, 99, 117, 0.16);
+  color: #ffb8c3;
+  border: 1px solid rgba(208, 99, 117, 0.3);
+}
+
+.notice.success {
+  background: rgba(39, 180, 122, 0.16);
+  color: #a7f0cc;
+  border: 1px solid rgba(39, 180, 122, 0.3);
+}
+
+.main-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 280px;
+  gap: 10px;
+}
+
+.task-pane { padding: 10px; min-height: 560px; }
+
+.tabs { display: flex; gap: 6px; margin-bottom: 8px; }
+
+.tabs button {
+  border: 1px solid var(--line-soft);
+  background: #23262d;
+  color: #a4aec0;
+  padding: 5px 10px;
+  border-radius: 7px;
+  font-size: 0.78rem;
+}
+
+.tabs button.active {
+  border-color: #575ced;
+  background: #30335c;
+  color: #e0e3ff;
+}
+
+.task-table-wrap { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
+
+.task-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.84rem;
+}
+
+.task-table th,
+.task-table td {
+  text-align: left;
+  padding: 9px;
+  border-bottom: 1px solid #2b2f37;
+}
+
+.task-table th {
+  font-size: 0.72rem;
+  color: #8f9ab0;
+  background: #1a1c22;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.file-cell { display: flex; flex-direction: column; gap: 2px; }
+.file-cell strong { font-weight: 600; }
+.file-cell small { color: var(--text-sub); font-size: 0.72rem; }
+
+.status-tag {
+  display: inline-block;
+  border-radius: 999px;
+  padding: 2px 8px;
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: capitalize;
+  background: #343948;
+  color: #aeb8d1;
+}
+
+.status-tag.active { background: #1d365f; color: #9ec7ff; }
+.status-tag.waiting { background: #504122; color: #f0ce86; }
+.status-tag.complete,
+.status-tag.stopped { background: #264735; color: #9fe5c2; }
+.status-tag.error,
+.status-tag.removed { background: #5a2d39; color: #ffb8c3; }
+
+.progress-row {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 8px;
+  align-items: center;
+}
+
+.bar {
+  position: relative;
+  height: 6px;
+  border-radius: 999px;
+  background: #343844;
+  overflow: hidden;
+}
+
+.bar span {
+  position: absolute;
+  inset: 0 auto 0 0;
+  background: linear-gradient(90deg, #5b86ff, #5860f0);
+}
+
+.progress-row small { color: #a8b2c4; font-size: 0.72rem; }
+
+.empty { text-align: center; color: var(--text-sub); }
+
+.right-pane {
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+
+.right-pane h2 { margin: 0; font-size: 0.98rem; }
+.right-pane h3 { margin: 6px 0 2px; font-size: 0.86rem; }
+
+.runtime { margin: 0; font-weight: 700; }
+.runtime.ok { color: var(--success); }
+.runtime.off { color: #949db0; }
+
+.right-pane p { margin: 0; color: #9aa3b8; font-size: 0.8rem; }
+
+.right-pane label {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  font-size: 0.75rem;
+  color: #a3acbe;
+}
+
+.right-pane input,
+.add-modal input,
+.add-modal textarea {
+  height: 33px;
+  border: 1px solid #434955;
+  border-radius: 7px;
+  padding: 7px 9px;
+  font-size: 0.85rem;
+  color: var(--text-main);
+  background: #242830;
+}
+
+.add-modal textarea {
+  resize: none;
+  height: auto;
+  min-height: 92px;
+}
+
+.right-pane input:focus,
+.add-modal input:focus,
+.add-modal textarea:focus {
+  outline: none;
+  border-color: #656cf5;
+  box-shadow: 0 0 0 2px rgba(94, 98, 243, 0.18);
+}
+
+button {
+  border: 1px solid var(--brand);
+  background: var(--brand);
+  color: #f7f8ff;
+  border-radius: 7px;
+  padding: 7px 11px;
+  font-size: 0.81rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+button:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
+
+button.ghost {
+  background: #2a2d34;
+  color: #c1c8d8;
+  border-color: #424854;
+}
+
+button.ghost:hover {
+  background: #333741;
+  border-color: #525a69;
+}
+
+button.small { padding: 4px 8px; font-size: 0.74rem; }
+
+button:disabled { opacity: 0.55; cursor: not-allowed; }
+
+.engine-actions { display: flex; gap: 7px; margin: 4px 0 6px; }
+
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 90px;
+  z-index: 100;
+}
+
+.add-modal {
+  width: min(680px, calc(100vw - 32px));
+  background: var(--bg-card-soft);
+  border: 1px solid #434955;
+  border-radius: 9px;
+  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.44);
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  border-bottom: 1px solid #484f5b;
+}
+
+.modal-tabs { display: flex; gap: 8px; }
+
+.modal-tabs button {
+  background: transparent;
+  border: none;
+  color: #a9b1c4;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  padding: 4px 2px;
+}
+
+.modal-tabs button.active { color: #e7eaff; border-bottom-color: #5b62f3; }
+
+.icon-btn {
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: #a5aec1;
+  font-size: 1.2rem;
+  line-height: 1;
+}
+
+.hidden-input { display: none; }
+
+.modal-body {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.modal-body label {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  font-size: 0.8rem;
+  color: #a9b2c4;
+}
+
+.modal-body small { color: #919cb2; font-size: 0.74rem; }
+
+.torrent-drop-zone {
+  border: 1px dashed #5a606f;
+  border-radius: 8px;
+  min-height: 118px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 12px;
+  color: #adb5c7;
+  background: #242830;
+  cursor: pointer;
+}
+
+.torrent-drop-zone.active {
+  border-color: #6f75ff;
+  background: #2b2f45;
+  color: #d4d9ff;
+}
+
+.torrent-selected {
+  border: 1px solid #454b59;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.torrent-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 10px;
+  background: #2f333a;
+  border-bottom: 1px solid #454b59;
+}
+
+.torrent-head strong {
+  font-size: 0.84rem;
+  color: #d8deed;
+}
+
+.torrent-file-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8rem;
+}
+
+.torrent-file-table th,
+.torrent-file-table td {
+  border-bottom: 1px solid #3f4450;
+  padding: 8px;
+  color: #cad2e2;
+}
+
+.torrent-file-table th {
+  font-size: 0.72rem;
+  color: #a0abc0;
+  background: #262a31;
+  text-align: left;
+}
+
+.modal-row {
+  display: grid;
+  grid-template-columns: 1fr 140px;
+  gap: 8px;
+}
+
+.modal-footer {
+  border-top: 1px solid #484f5b;
+  padding: 10px 12px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+@media (max-width: 1180px) {
+  .main-grid { grid-template-columns: 1fr; }
+}
+
+@media (max-width: 900px) {
+  .app-shell { grid-template-columns: 1fr; }
+  .sidebar { display: none; }
+}