feat: add OpenCode session management

frontend/src/App.vue

@@ -17,7 +17,7 @@
               <h1 class="logo-title">智能体观测中心</h1>
               <span class="logo-badge">混合引擎</span>
             </div>
-            <p class="logo-sub">Codex · Claude · Agy 协同会话追踪平台</p>
+            <p class="logo-sub">Codex · Claude · Agy · OpenCode 协同会话追踪平台</p>
           </div>
         </div>
       </div>
@@ -158,6 +158,7 @@ const engineOptions = [
   { key: 'codex', label: 'Codex', icon: '⚡', short: 'Codex' },
   { key: 'claude', label: 'Claude', icon: '🧠', short: 'Claude' },
   { key: 'agy', label: 'Agy', icon: '⚙', short: 'Agy' },
+  { key: 'opencode', label: 'OpenCode', icon: '🔓', short: 'OpenCode' },
 ]
 
 const tabs = [
@@ -260,8 +261,15 @@ async function handleRefresh() {
   }
 }
 
+/** Lightweight refresh for dashboard stats (used by child delete handlers) */
+async function refreshDashboard() {
+  await checkHealth()
+  updateStats()
+}
+
 // Provide engine selection to child views
 provide('selectedEngine', selectedEngine)
+provide('refreshDashboard', refreshDashboard)
 
 onMounted(() => {
   document.documentElement.setAttribute('data-theme', theme.value)

frontend/src/api/index.js

@@ -87,6 +87,12 @@ export async function generateTitle(engine, sessionId) {
   })
 }
 
+export async function deleteSession(engine, sessionId) {
+  return request(`/sessions/${encodeURIComponent(engine)}/${encodeURIComponent(sessionId)}`, {
+    method: 'DELETE',
+  })
+}
+
 export function formatTimestamp(ts) {
   if (!ts) return '-'
   const d = typeof ts === 'number' && ts < 1e15 ? new Date(ts * 1000) : new Date(ts)
@@ -110,6 +116,7 @@ export const ENGINE_META = {
   codex: { color: '#3b82f6', bg: 'rgba(59,130,246,0.1)', label: 'Codex', border: 'rgba(59,130,246,0.2)', icon: '⚡' },
   claude: { color: '#a855f7', bg: 'rgba(168,85,247,0.1)', label: 'Claude', border: 'rgba(168,85,247,0.2)', icon: '🧠' },
   agy: { color: '#10b981', bg: 'rgba(16,185,129,0.1)', label: 'Agy', border: 'rgba(16,185,129,0.2)', icon: '⚙' },
+  opencode: { color: '#f59e0b', bg: 'rgba(245,158,11,0.1)', label: 'OpenCode', border: 'rgba(245,158,11,0.2)', icon: '🔓' },
 }
 
 export function getEngineMeta(engine) {

frontend/src/views/AnalyticsView.vue

@@ -69,7 +69,6 @@
         <h4 class="card-title-sm">观测报告</h4>
         <p class="report-text">
           基于 {{ totalSessions }} 个会话 ({{ engineLabel }})。异常/中断率 {{ errorRate }}%。
-          Agy 暂无本地会话数据源。
         </p>
       </div>
     </div>
@@ -86,7 +85,7 @@ const sessions = ref([])
 const totalSessions = ref(0)
 const errorCount = ref(0)
 const engineLabel = computed(() => {
-  const labels = { all: '全部引擎', codex: 'Codex', claude: 'Claude', agy: 'Agy' }
+  const labels = { all: '全部引擎', codex: 'Codex', claude: 'Claude', agy: 'Agy', opencode: 'OpenCode' }
   return labels[selectedEngine.value] || selectedEngine.value
 })
 

frontend/src/views/SessionDetail.vue

@@ -32,6 +32,9 @@
             </button>
           </div>
           <p v-if="session.metadata.custom_name" class="name-subtitle">{{ session.metadata.title || session.metadata.summary }}</p>
+          <div v-if="session.metadata.can_delete" class="delete-row">
+            <button class="delete-btn" @click="showDeleteConfirm">🗑 删除此会话</button>
+          </div>
         </div>
         <div class="meta-grid">
           <div class="meta-item">
@@ -121,14 +124,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">{{ routeId }}</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>
 
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, computed, onMounted, watch, inject } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import { getSessionDetail, formatTimestamp, getEngineMeta, setCustomName, deleteCustomName, generateTitle } from '../api/index.js'
+import { getSessionDetail, formatTimestamp, getEngineMeta, setCustomName, deleteCustomName, generateTitle, deleteSession } from '../api/index.js'
 
 const props = defineProps({ id: String })
 const route = useRoute()
@@ -138,7 +158,7 @@ const routeId = computed(() => props.id || route.params.id)
 const engine = computed(() => route.query.engine || 'codex')
 const meta = computed(() => getEngineMeta(engine.value))
 const engineLabel = computed(() => meta.value.label)
-const resumeCmd = computed(() => engine.value === 'codex' ? `codex resume ${routeId.value}` : engine.value === 'claude' ? `claude --resume ${routeId.value}` : `agy --conversation ${routeId.value}`)
+const resumeCmd = computed(() => session.value?.metadata?.resume_command || '')
 
 const session = ref(null)
 const messages = ref([])
@@ -147,6 +167,9 @@ const loadError = ref(null)
 const editNameVisible = ref(false)
 const editNameValue = ref('')
 const aiLoading = ref(false)
+const deleteConfirmVisible = ref(false)
+const deleting = ref(false)
+const refreshDashboard = inject("refreshDashboard", () => {})
 
 const topTools = computed(() => {
   if (!session.value?.summary?.tool_calls) return []
@@ -241,6 +264,26 @@ async function generateAITitle() {
   }
 }
 
+function showDeleteConfirm() {
+  deleteConfirmVisible.value = true
+}
+
+async function confirmDelete() {
+  if (deleting.value) return
+  deleting.value = true
+  try {
+    await deleteSession(engine.value, routeId.value)
+    ElMessage.success('会话已删除')
+    deleteConfirmVisible.value = false
+    await refreshDashboard()
+    goBack()
+  } catch (err) {
+    ElMessage.error('删除失败: ' + (err.message || ''))
+  } finally {
+    deleting.value = false
+  }
+}
+
 onMounted(loadDetail)
 
 // Reload when route params change
@@ -252,7 +295,7 @@ watch(
 
 <style scoped>
 .session-detail-page { width: 100%; }
-.back-btn { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 12px; padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-secondary); font-size: 12px; cursor: pointer; }
+.back-btn { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 12px; padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-secondary); font-size: 12px; cursor: pointer; min-height: 44px; min-width: 44px; }
 .back-btn:hover { border-color: var(--accent); color: var(--accent-light); }
 .card { border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); padding: 20px; margin-bottom: 16px; }
 .card-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
@@ -318,7 +361,21 @@ watch(
 .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; }
+
+.delete-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; gap: 8px; }
+.delete-btn {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 7px 14px; 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;
+}
+.delete-btn:hover { background: var(--danger); color: #fff; }
 </style>

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; }