feat: add OpenCode session management

frontend/src/views/SessionList.vue

@@ -171,6 +171,9 @@
           <button class="footer-btn-detail" @click="goToDetailPage(drawerSession)">
             → 进入详情页
           </button>
+          <button v-if="drawerSession.can_delete" class="footer-btn-delete" @click="showDeleteConfirm(drawerSession)">
+            🗑 删除会话
+          </button>
         </div>
       </div>
     </div>
@@ -199,13 +202,31 @@
         </div>
       </div>
     </div>
+
+    <!-- Delete Confirmation Dialog -->
+    <div v-if="deleteConfirmVisible" class="dialog-overlay" @click.self="deleteConfirmVisible = false">
+      <div class="dialog">
+        <div class="dialog-head">
+          <h3>确认删除会话</h3>
+          <button class="dialog-close" @click="deleteConfirmVisible = false">✕</button>
+        </div>
+        <div class="dialog-body">
+          <p class="dialog-hint">此操作将从 OpenCode 数据库中永久删除该会话，不可恢复。</p>
+          <p class="dialog-id mono">{{ deleteTarget?.id }}</p>
+        </div>
+        <div class="dialog-foot">
+          <button class="dialog-btn" @click="deleteConfirmVisible = false" :disabled="deleting">取消</button>
+          <button class="dialog-btn danger" @click="confirmDelete" :disabled="deleting">{{ deleting ? '删除中...' : '确认删除' }}</button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref, computed, onMounted, inject, watch } from 'vue'
 import { ElMessage } from 'element-plus'
-import { getSessions, getSessionDetail, getGlobalTools, formatTimestamp, getEngineMeta, ENGINE_META, setCustomName, deleteCustomName, generateTitle } from '../api/index.js'
+import { getSessions, getSessionDetail, getGlobalTools, formatTimestamp, getEngineMeta, ENGINE_META, setCustomName, deleteCustomName, generateTitle, deleteSession } from '../api/index.js'
 import { useRouter } from 'vue-router'
 
 const props = defineProps({ selectedEngine: { type: String, default: 'all' } })
@@ -390,6 +411,35 @@ async function clearCustomName(session) {
   }
 }
 
+const deleteConfirmVisible = ref(false)
+const deleteTarget = ref(null)
+const deleting = ref(false)
+const refreshDashboard = inject('refreshDashboard', () => {})
+
+function showDeleteConfirm(session) {
+  deleteTarget.value = session
+  deleteConfirmVisible.value = true
+}
+
+async function confirmDelete() {
+  const session = deleteTarget.value
+  if (!session || deleting.value) return
+  deleting.value = true
+  try {
+    await deleteSession(session.engine, session.id)
+    ElMessage.success('会话已删除')
+    deleteConfirmVisible.value = false
+    deleteTarget.value = null
+    closeDrawer()
+    loadSessions()
+    await refreshDashboard()
+  } catch (err) {
+    ElMessage.error('删除失败: ' + (err.message || ''))
+  } finally {
+    deleting.value = false
+  }
+}
+
 function goToDetailPage(session) {
   if (!session) return
   closeDrawer()
@@ -558,7 +608,7 @@ onMounted(loadSessions)
 .trace-msg { font-size: 10px; color: var(--text-secondary); }
 
 .drawer-footer { display: flex; gap: 8px; padding: 16px 20px; border-top: 1px solid var(--border); background: rgba(15,23,42,0.2); }
-.footer-btn-copy, .footer-btn-uuid { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; }
+.footer-btn-copy, .footer-btn-uuid { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; min-height: 44px; min-width: 44px; }
 .footer-btn-copy { background: var(--accent); border: none; color: #fff; }
 .footer-btn-copy:hover { opacity: 0.9; }
 .footer-btn-uuid { border: 1px solid var(--border); background: var(--bg-input); color: var(--text-secondary); }
@@ -582,8 +632,11 @@ onMounted(loadSessions)
 .dialog-input:focus { border-color: var(--accent); }
 .dialog-counter { text-align: right; font-size: 11px; color: var(--text-muted); margin-top: 4px; }
 .dialog-foot { display: flex; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border); justify-content: flex-end; }
-.dialog-btn { padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); font-size: 12px; cursor: pointer; }
+.dialog-btn { padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); font-size: 12px; cursor: pointer; min-height: 44px; min-width: 44px; }
 .dialog-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
+.dialog-btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
+.dialog-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.dialog-id { font-size: 11px; color: var(--text-muted); font-family: 'SF Mono', monospace; word-break: break-all; }
 .dialog-btn:hover { opacity: 0.9; }
 
 @media (max-width: 768px) {
@@ -597,8 +650,19 @@ onMounted(loadSessions)
   padding: 10px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer;
   border: 1px solid var(--accent-border); background: var(--accent-bg);
   color: var(--accent-light); transition: all 0.12s;
+  min-height: 44px;
+  min-width: 44px;
 }
 .footer-btn-detail:hover { background: var(--accent); color: #fff; }
+.footer-btn-delete {
+  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
+  padding: 10px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer;
+  border: 1px solid rgba(239,68,68,0.3); background: rgba(239,68,68,0.08);
+  color: var(--danger); transition: all 0.12s;
+  min-height: 44px;
+  min-width: 44px;
+}
+.footer-btn-delete:hover { background: var(--danger); color: #fff; }
 
 @media (max-width: 480px) {
   .drawer-footer { flex-wrap: wrap; }