fix: stabilize background operations and large embedding results

frontend/src/features/agent/RunListPanel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, watch, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAgentStore } from '@/stores/agent'
 import { localeTag, t } from '@/i18n'
@@ -8,6 +8,10 @@ import { runStatusLabel } from './labels'
 const agentStore = useAgentStore()
 const router = useRouter()
 const error = ref('')
+const page = ref(1)
+const pages = computed(() => Math.max(1, Math.ceil(agentStore.sortedRuns.length / 50)))
+const visibleRuns = computed(() => agentStore.sortedRuns.slice((page.value - 1) * 50, page.value * 50))
+watch(pages, count => { page.value = Math.min(page.value, count) })
 
 onMounted(async () => {
   try { await agentStore.loadRuns() } catch (reason) { error.value = reason instanceof Error ? reason.message : t('运行记录加载失败', 'Failed to load runs') }
@@ -20,8 +24,9 @@ function selectRun(runId: string) { void router.push({ name: 'agent', params: {
   <div class="sidebar-panel">
     <button class="button-primary new-button" @click="router.push({ name: 'agent' })">＋ {{ t('新建运行', 'New run') }}</button>
     <p v-if="error" class="subtle error-text">{{ error }}</p>
+    <div v-if="pages > 1" class="inline-actions"><button class="button-secondary" :disabled="page === 1" @click="page--">{{ t('上一页', 'Previous') }}</button><span>{{ page }} / {{ pages }}</span><button class="button-secondary" :disabled="page === pages" @click="page++">{{ t('下一页', 'Next') }}</button></div>
     <div class="sidebar-list">
-      <button v-for="run in agentStore.sortedRuns" :key="run.run_id" class="sidebar-list-item run-item"
+      <button v-for="run in visibleRuns" :key="run.run_id" class="sidebar-list-item run-item"
         :class="{ active: agentStore.activeRunId === run.run_id }" @click="selectRun(run.run_id)">
         <span class="badge" :class="{ success: run.status === 'completed', error: run.status === 'failed', warning: run.status === 'waiting_permission' }">{{ runStatusLabel(run.status) }}</span>
         <strong>{{ run.run_id.slice(0, 12) }}</strong><small>{{ run.started_at ? new Date(run.started_at).toLocaleString(localeTag()) : t('等待开始', 'Waiting to start') }}</small>

frontend/src/features/agent/TraceTimeline.spec.ts

@@ -41,6 +41,17 @@ async function switchToTree(wrapper: ReturnType<typeof mountTree>) {
 }
 
 describe('TraceTimeline 树形视图', () => {
+  it('bounds rendered events while searching the complete history', async () => {
+    const events = Array.from({ length: 1000 }, (_, i) => event('TextDelta', { text: `message-${i}` }))
+    const wrapper = mountTree(events)
+    expect(wrapper.findAll('.event-card')).toHaveLength(200)
+    await wrapper.findAll('button').find(button => button.text() === '下一页')!.trigger('click')
+    expect(wrapper.findAll('.event-card')).toHaveLength(200)
+    await wrapper.get('input').setValue('message-999')
+    expect(wrapper.findAll('.event-card')).toHaveLength(1)
+    expect(wrapper.text()).toContain('message-999')
+    wrapper.unmount()
+  })
   it('filters errors while retaining tree ancestors and final tool data', async () => {
     const events = sampleEvents()
     const result = events.find(item => item.event === 'ToolResult')!

frontend/src/features/agent/TraceTimeline.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { localeTag, t } from '@/i18n'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import type { TraceNode, AgentEvent } from '@/contracts'
 import { buildTraceNodes, getToolCallsFromEvents, getTotalDuration } from '@/services/traceService'
 import { eventLabel, localizeDetails } from './labels'
@@ -37,9 +37,12 @@ const filteredEvents = computed(() => {
 })
 const filteredTree = computed(() => {
   if (!filtering.value) return traceNodes.value
-  const matches = (node: TraceNode) => filteredEvents.value.some(event => event.sequence === node.sequence
-    || (node.type === 'tool_call' && node.data.tool_call_id != null && node.data.tool_call_id === event.data.tool_call_id)
-    || (node.type === 'model_call' && node.data.model_call_id != null && node.data.model_call_id === event.data.model_call_id))
+  const sequences = new Set(filteredEvents.value.map(event => event.sequence))
+  const tools = new Set<unknown>(filteredEvents.value.map(event => event.data.tool_call_id).filter(id => id != null))
+  const models = new Set<unknown>(filteredEvents.value.map(event => event.data.model_call_id).filter(id => id != null))
+  const matches = (node: TraceNode) => sequences.has(node.sequence)
+    || (node.type === 'tool_call' && tools.has(node.data.tool_call_id))
+    || (node.type === 'model_call' && models.has(node.data.model_call_id))
   const prune = (nodes: TraceNode[]): TraceNode[] => nodes.flatMap(node => {
     const children = prune(node.children)
     return matches(node) || children.length ? [{ ...node, children }] : []
@@ -50,6 +53,17 @@ function resetFilters() { query.value = ''; eventType.value = ''; toolName.value
 
 const traceNodes = computed(() => buildTraceNodes(props.events))
 const toolCalls = computed(() => getToolCallsFromEvents(props.events))
+const toolSummary = computed(() => {
+  const groups = new Map<string, { key: string; name: string; status: string; count: number; duration_ms: number }>()
+  for (const call of toolCalls.value) {
+    const key = `${call.name}:${call.status}`
+    const group = groups.get(key) ?? { key, name: call.name, status: call.status, count: 0, duration_ms: 0 }
+    group.count++
+    group.duration_ms += call.duration_ms ?? 0
+    groups.set(key, group)
+  }
+  return [...groups.values()]
+})
 const totalDuration = computed(() => getTotalDuration(props.events))
 
 const summaryStats = computed(() => {
@@ -153,6 +167,12 @@ function flatNodes(nodes: TraceNode[], depth = 0): Array<{ node: TraceNode; dept
 }
 
 const flatTrace = computed(() => flatNodes(filteredTree.value))
+const page = ref(1)
+const pageCount = computed(() => Math.max(1, Math.ceil((viewMode.value === 'tree' ? flatTrace.value.length : filteredEvents.value.length) / 200)))
+const visibleEvents = computed(() => filteredEvents.value.slice((page.value - 1) * 200, page.value * 200))
+const visibleTrace = computed(() => flatTrace.value.slice((page.value - 1) * 200, page.value * 200))
+watch([query, eventType, toolName, errorsOnly, viewMode], () => { page.value = 1 })
+watch(pageCount, count => { page.value = Math.min(page.value, count) })
 </script>
 
 <template>
@@ -199,11 +219,12 @@ const flatTrace = computed(() => flatNodes(filteredTree.value))
       <button v-if="filtering" class="button-secondary" @click="resetFilters">清除筛选</button>
       <span aria-live="polite">{{ filteredEvents.length }} / {{ events.length }} 事件</span>
     </div>
+    <nav v-if="pageCount > 1" class="inline-actions"><button class="button-secondary" :disabled="page === 1" @click="page--">{{ t('上一页', 'Previous') }}</button><span>{{ page }} / {{ pageCount }}</span><button class="button-secondary" :disabled="page === pageCount" @click="page++">{{ t('下一页', 'Next') }}</button></nav>
     <p v-if="filtering && !filteredEvents.length" class="subtle" role="status">没有匹配的事件</p>
     <div v-if="viewMode === 'timeline'" class="timeline-view">
       <div class="timeline">
         <article
-          v-for="event in filteredEvents"
+          v-for="event in visibleEvents"
           :key="event.sequence"
           class="event-card"
           :class="{ expanded: isDetailOpen(`event-${event.sequence}`) }"
@@ -255,7 +276,7 @@ const flatTrace = computed(() => flatNodes(filteredTree.value))
     </div>
 
     <div v-else class="tree-view">
-      <div v-for="item in flatTrace" :key="item.node.id" class="tree-node" :style="{ paddingLeft: `${item.depth * 24 + 8}px` }">
+      <div v-for="item in visibleTrace" :key="item.node.id" class="tree-node" :style="{ paddingLeft: `${item.depth * 24 + 8}px` }">
         <div
           class="node-row"
           :class="[getNodeStatusClass(item.node), { 'detail-open': isDetailOpen(item.node.id) }]"
@@ -303,9 +324,10 @@ const flatTrace = computed(() => flatNodes(filteredTree.value))
     <div v-if="!filtering && toolCalls.length > 0 && viewMode === 'timeline'" class="tool-calls-summary panel">
       <h3 class="panel-title">工具调用统计</h3>
       <div class="tool-call-list">
-        <div v-for="call in toolCalls" :key="call.tool_call_id" class="tool-call-item" :class="call.status">
+        <div v-for="call in toolSummary" :key="call.key" class="tool-call-item" :class="call.status">
           <span class="tool-status-dot"></span>
           <code class="tool-name">{{ call.name }}</code>
+          <span>{{ call.count }} {{ t('次', 'calls') }}</span>
           <span v-if="call.duration_ms != null" class="tool-duration">
             {{ formatDuration(call.duration_ms) }}
           </span>

frontend/src/features/editor/VisualMarkdownEditor.spec.ts

@@ -55,6 +55,22 @@ afterEach(() => {
 })
 
 describe('VisualMarkdownEditor formatting toolbars', () => {
+  it('opens a rendered Markdown link on Ctrl click without changing its source', async () => {
+    const wrapper = mount(VisualMarkdownEditor, {
+      props: { initialContent: '[**文档**](https://example.com/docs)' }, attachTo: document.body,
+    })
+    mounted.push(wrapper)
+    const editor = await waitForEditor(wrapper)
+    const before = editor.action(getMarkdown())
+    const open = vi.spyOn(window, 'open').mockReturnValue(null)
+    try {
+      const link = wrapper.get('.ProseMirror a')
+      await link.trigger('click', { ctrlKey: true, button: 0 })
+      expect(open).toHaveBeenCalledWith('https://example.com/docs', '_blank', 'noopener,noreferrer')
+      expect(editor.action(getMarkdown())).toBe(before)
+    } finally { open.mockRestore() }
+  })
+
   it('applies syntax and renderer preferences when opening the visual editor', async () => {
     const preferences = useMarkdownPreferencesStore()
     preferences.preferences.heading = 'setext'

frontend/src/features/editor/VisualMarkdownEditor.vue

@@ -16,6 +16,7 @@ import { shikiEditorTheme, shikiLanguages, renderCodeLanguage } from './shikiCod
 import './language-icons.css'
 import { installLanguagePickerPopover } from './languagePickerPopover'
 import { installCodeBlockLabels } from './codeBlockLabels'
+import { installLinkNavigation } from './linkNavigation'
 import { createMermaidPreview } from './mermaidPreview'
 import { splitNoteMetadata, updateMetadataTags } from './noteMetadata'
 import { getMarkdown, $remark, $prose } from '@milkdown/kit/utils'
@@ -80,6 +81,7 @@ const fontSizeInput = ref(16)
 let crepe: Crepe | null = null
 let disposeLanguagePicker: (() => void) | undefined
 let disposeCodeLabels: (() => void) | undefined
+let disposeLinkNavigation: (() => void) | undefined
 let disposeCommands: (() => void) | undefined
 let disposed = false
 
@@ -392,6 +394,7 @@ onMounted(async () => {
   await crepe.create()
   if (editorRoot.value) disposeLanguagePicker = installLanguagePickerPopover(editorRoot.value)
   if (editorRoot.value) disposeCodeLabels = installCodeBlockLabels(editorRoot.value)
+  if (editorRoot.value) disposeLinkNavigation = installLinkNavigation(editorRoot.value)
   applyProofingPreferences()
   loading.value = false
   if (!disposed) installCommands()
@@ -412,7 +415,7 @@ watch(() => editorStore.headingRequest, request => {
   })
 })
 
-onBeforeUnmount(() => { disposed = true; disposeCommands?.(); diagramPreviews.clear(); disposeCodeLabels?.(); disposeLanguagePicker?.(); void crepe?.destroy() })
+onBeforeUnmount(() => { disposed = true; disposeCommands?.(); diagramPreviews.clear(); disposeLinkNavigation?.(); disposeCodeLabels?.(); disposeLanguagePicker?.(); void crepe?.destroy() })
 
 defineExpose({ getEditor: () => crepe?.editor })
 </script>

frontend/src/features/editor/linkNavigation.spec.ts

@@ -0,0 +1,33 @@
+// @vitest-environment happy-dom
+import { afterEach, expect, it, vi } from 'vitest'
+import { installLinkNavigation } from './linkNavigation'
+
+afterEach(() => { document.body.innerHTML = ''; vi.restoreAllMocks() })
+
+it('opens nested link content with Ctrl/Command click but leaves ordinary editing alone', () => {
+  const root = document.createElement('div')
+  root.innerHTML = '<div class="ProseMirror"><a href="https://example.com/docs"><strong>Docs</strong></a></div>'
+  document.body.append(root)
+  const dispose = installLinkNavigation(root)
+  const open = vi.spyOn(window, 'open').mockReturnValue(null)
+  const target = root.querySelector('strong')!
+  const click = (options: MouseEventInit) => {
+    const event = new MouseEvent('click', { bubbles: true, cancelable: true, ...options })
+    target.dispatchEvent(event)
+    return event
+  }
+  expect(click({}).defaultPrevented).toBe(false)
+  click({ ctrlKey: true, button: 2 })
+  expect(open).not.toHaveBeenCalled()
+  expect(click({ ctrlKey: true }).defaultPrevented).toBe(true)
+  expect(open).toHaveBeenLastCalledWith('https://example.com/docs', '_blank', 'noopener,noreferrer')
+  click({ metaKey: true })
+  expect(open).toHaveBeenCalledTimes(2)
+  root.querySelector('a')!.href = 'javascript:alert(1)'
+  expect(click({ ctrlKey: true }).defaultPrevented).toBe(true)
+  expect(open).toHaveBeenCalledTimes(2)
+  dispose()
+  root.querySelector('a')!.href = 'https://example.com'
+  expect(click({ ctrlKey: true }).defaultPrevented).toBe(false)
+  expect(open).toHaveBeenCalledTimes(2)
+})

frontend/src/features/editor/linkNavigation.ts

@@ -0,0 +1,20 @@
+/** Editable anchors need explicit navigation; plain clicks keep editing the link. */
+export function installLinkNavigation(root: HTMLElement): () => void {
+  const navigate = (event: MouseEvent) => {
+    if (event.button !== 0 || !(event.ctrlKey || event.metaKey) || event.altKey) return
+    const target = event.target instanceof Element ? event.target : (event.target as Node | null)?.parentElement
+    const link = target?.closest<HTMLAnchorElement>('.ProseMirror a[href]')
+    if (!link || !root.contains(link)) return
+    const href = link.getAttribute('href')?.trim()
+    if (!href) return
+    // Consume modified clicks before Milkdown's link editor or native navigation.
+    event.preventDefault()
+    event.stopPropagation()
+    let url: URL
+    try { url = new URL(href, document.baseURI) } catch { return }
+    if (!['http:', 'https:', 'mailto:', 'tel:'].includes(url.protocol)) return
+    window.open(url.href, '_blank', 'noopener,noreferrer')
+  }
+  root.addEventListener('click', navigate, true)
+  return () => root.removeEventListener('click', navigate, true)
+}

frontend/src/features/editor/shikiCodeMirror.spec.ts

@@ -1,13 +1,37 @@
 // @vitest-environment happy-dom
-import { afterEach, expect, it } from 'vitest'
+import { afterEach, expect, it, vi } from 'vitest'
 import { Compartment } from '@codemirror/state'
 import { bundledLanguagesInfo } from 'shiki/langs'
 import { EditorView } from '@codemirror/view'
 import { shikiLanguage, shikiLanguages } from './shikiCodeMirror'
 import { getCodeTokenizer } from '@/utils/markdown'
+import * as markdown from '@/utils/markdown'
 
 const editors: EditorView[] = []
-afterEach(() => { editors.splice(0).forEach(view => view.destroy()) })
+afterEach(() => { editors.splice(0).forEach(view => view.destroy()); vi.restoreAllMocks() })
+
+it('reuses highlighting across recreated views and bounds retained entries', async () => {
+  const tokenize = vi.fn(await getCodeTokenizer('github-light', 'javascript'))
+  vi.spyOn(markdown, 'getCodeTokenizer').mockResolvedValue(tokenize)
+  const support = await shikiLanguage('javascript', 'github-light')
+  const create = (doc: string) => {
+    const view = new EditorView({ doc, extensions: [support] })
+    editors.push(view)
+    return view
+  }
+  const source = 'const answer = 42'
+  create(source)
+  const recreated = create(source)
+  expect(tokenize).toHaveBeenCalledTimes(1)
+  expect(recreated.dom.textContent).toContain(source)
+  recreated.dispatch({ changes: { from: 0, to: source.length, insert: 'let changed = 1' } })
+  expect(tokenize).toHaveBeenCalledTimes(2)
+  expect(recreated.dom.textContent).toContain('let changed = 1')
+  for (let i = 0; i < 33; i++) create(`const value = ${i}`)
+  const before = tokenize.mock.calls.length
+  create(source)
+  expect(tokenize).toHaveBeenCalledTimes(before + 1)
+})
 
 it.each(['github-light', 'github-dark'] as const)('uses Shiki %s tokens and updates editable content', async theme => {
   const support = await shikiLanguage('python', theme)

frontend/src/features/editor/shikiCodeMirror.ts

@@ -7,6 +7,10 @@ type CodeTheme = 'github-light' | 'github-dark'
 
 export async function shikiLanguage(language: string, theme: CodeTheme): Promise<LanguageSupport> {
   const tokenize = await getCodeTokenizer(theme, language)
+  // Milkdown recreates off-screen CodeMirror views. Reuse immutable ranges for
+  // identical code within this language/theme, with a bounded retention budget.
+  const cache = new Map<string, DecorationSet>()
+  let cachedCharacters = 0
   const highlights = ViewPlugin.fromClass(class {
     decorations: DecorationSet
 
@@ -17,7 +21,13 @@ export async function shikiLanguage(language: string, theme: CodeTheme): Promise
     }
 
     highlight(view: EditorView): DecorationSet {
-      const tokens = tokenize(view.state.doc.toString(), language)
+      const source = view.state.doc.toString()
+      const cached = cache.get(source)
+      if (cached) {
+        cache.delete(source); cache.set(source, cached)
+        return cached
+      }
+      const tokens = tokenize(source, language)
       const ranges = tokens.flatMap((line, index) => {
         let offset = view.state.doc.line(index + 1).from
         return line.flatMap(token => {
@@ -31,7 +41,15 @@ export async function shikiLanguage(language: string, theme: CodeTheme): Promise
           }).range(from, offset)]
         })
       })
-      return Decoration.set(ranges)
+      const decorations = Decoration.set(ranges)
+      if (source.length <= 16000) {
+        cache.set(source, decorations); cachedCharacters += source.length
+        while (cache.size > 32 || cachedCharacters > 64000) {
+          const oldest = cache.keys().next().value!
+          cachedCharacters -= oldest.length; cache.delete(oldest)
+        }
+      }
+      return decorations
     }
   }, { decorations: value => value.decorations })
 

frontend/src/features/logs/LogsView.spec.ts

@@ -0,0 +1,65 @@
+// @vitest-environment happy-dom
+import { mount, flushPromises } from '@vue/test-utils'
+import { afterEach, expect, it, vi } from 'vitest'
+import LogsView from './LogsView.vue'
+const get = vi.hoisted(() => vi.fn())
+vi.mock('@/services/apiClient', () => ({ default: { get } }))
+afterEach(() => { vi.useRealTimers(); vi.clearAllMocks() })
+const page = (id: number, next: number | null) => ({ items: [{ id, timestamp: '2026-09-06T01:00:00Z', level: 'ERROR', source: 'vectors', event: 'embedding.failed', details: { error_code: 'LOCAL_CUDA_OOM' } }], next_cursor: next, sources: ['vectors'], pending: 0, dropped: 0, write_failures: 0, retention: 20000 })
+it('loads older logs without paging away and applies filters', async () => {
+  get.mockResolvedValueOnce(page(4, 4)).mockResolvedValueOnce(page(2, null)).mockResolvedValue(page(8, null))
+  const wrapper = mount(LogsView)
+  await flushPromises()
+  expect(wrapper.get('details').classes()).toContain('ui-disclosure')
+  await wrapper.findAll('button').find(button => button.text() === '向上滚动加载更早日志')!.trigger('click')
+  await flushPromises()
+  expect(get.mock.lastCall![1].params.before).toBe(4)
+  expect(wrapper.findAll('details').map(row => row.attributes('data-log-id'))).toEqual(['2', '4'])
+  await wrapper.get('input[maxlength="200"]').setValue('LOCAL_CUDA_OOM')
+  await wrapper.get('form').trigger('submit')
+  await flushPromises()
+  expect(get.mock.lastCall![1].params).toMatchObject({ before: undefined, q: 'LOCAL_CUDA_OOM' })
+  wrapper.unmount()
+})
+it('follows at the bottom, pauses while reading, and loads history on scroll', async () => {
+  vi.useFakeTimers()
+  get.mockResolvedValue(page(10, 10))
+  const wrapper = mount(LogsView)
+  await flushPromises()
+  const viewport = wrapper.get('.log-list').element as HTMLElement
+  Object.defineProperty(viewport, 'scrollHeight', { configurable: true, value: 1000 })
+  Object.defineProperty(viewport, 'clientHeight', { configurable: true, value: 200 })
+  viewport.scrollTop = 800
+  await wrapper.get('.log-list').trigger('scroll')
+  get.mockResolvedValueOnce({ ...page(11, 10), items: [...page(11, 10).items, ...page(10, 10).items] })
+  await vi.advanceTimersByTimeAsync(5000)
+  await flushPromises()
+  expect(wrapper.findAll('details').map(row => row.attributes('data-log-id'))).toEqual(['10', '11'])
+  expect(viewport.scrollTop).toBe(1000)
+  viewport.scrollTop = 400
+  await wrapper.get('.log-list').trigger('scroll')
+  const calls = get.mock.calls.length
+  await vi.advanceTimersByTimeAsync(5000)
+  expect(get).toHaveBeenCalledTimes(calls)
+  get.mockResolvedValueOnce(page(9, null))
+  viewport.scrollTop = 0
+  await wrapper.get('.log-list').trigger('scroll')
+  await flushPromises()
+  expect(get.mock.lastCall![1].params.before).toBe(10)
+  expect(wrapper.findAll('details').map(row => row.attributes('data-log-id'))).toEqual(['9', '10', '11'])
+  wrapper.unmount()
+})
+it('surfaces storage loss and transport errors without polling after unmount', async () => {
+  vi.useFakeTimers()
+  get.mockResolvedValueOnce({ ...page(1, null), dropped: 3, write_failures: 1 }).mockRejectedValue(new Error('offline'))
+  const wrapper = mount(LogsView)
+  await flushPromises()
+  expect(wrapper.get('[role="alert"]').text()).toContain('3')
+  await wrapper.get('input[type="checkbox"]').setValue(true)
+  await vi.advanceTimersByTimeAsync(5000)
+  expect(wrapper.text()).toContain('offline')
+  wrapper.unmount()
+  const calls = get.mock.calls.length
+  await vi.advanceTimersByTimeAsync(10000)
+  expect(get).toHaveBeenCalledTimes(calls)
+})

frontend/src/features/logs/LogsView.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { nextTick, onMounted, onUnmounted, ref } from 'vue'
+import apiClient from '@/services/apiClient'
+import { t } from '@/i18n'
+
+interface LogEntry { id: number; timestamp: string; level: string; source: string; event: string; details: Record<string, unknown> }
+interface LogPage { items: LogEntry[]; next_cursor: number | null; sources: string[]; pending: number; dropped: number; write_failures: number; retention: number }
+const page = ref<LogPage>({ items: [], next_cursor: null, sources: [], pending: 0, dropped: 0, write_failures: 0, retention: 20000 })
+const level = ref(''), source = ref(''), query = ref(''), error = ref('')
+const loading = ref(false), live = ref(true), following = ref(true)
+const scroller = ref<HTMLElement>()
+const atLatest = ref(true)
+const MAX_VISIBLE = 500
+let applied = { level: '', source: '', q: '' }
+let revision = 0
+let timer: ReturnType<typeof setInterval> | undefined
+let adjusting = false
+async function load(reset = false, older = false) {
+  if (older && (loading.value || !page.value.next_cursor)) return
+  if (reset) applied = { level: level.value, source: source.value, q: query.value.trim() }
+  const version = ++revision
+  const viewport = scroller.value
+  const oldHeight = viewport?.scrollHeight ?? 0
+  const oldTop = viewport?.scrollTop ?? 0
+  // Preserve a visible row when adding history and trimming the opposite edge.
+  const anchor = older && viewport ? [...viewport.querySelectorAll<HTMLElement>('[data-log-id]')].find(row => row.getBoundingClientRect().bottom > viewport.getBoundingClientRect().top) : undefined
+  const anchorTop = anchor?.getBoundingClientRect().top
+  const anchorId = anchor?.dataset.logId
+  loading.value = true
+  try {
+    const result = await apiClient.get<LogPage>('/api/logs', { params: { limit: 50, before: older ? page.value.next_cursor ?? undefined : undefined, ...applied } })
+    if (version !== revision) return
+    // If the reader scrolled away during a refresh, leave their view untouched.
+    if (!reset && !older && !following.value) return
+    const previous = page.value.items
+    const overlaps = result.items.some(item => previous.some(old => old.id === item.id))
+    const combined = older || (!reset && overlaps) ? [...previous, ...result.items] : result.items
+    const all = [...new Map(combined.map(item => [item.id, item])).values()].sort((a, b) => a.id - b.id)
+    const trimmed = all.length > MAX_VISIBLE
+    const items = older ? all.slice(0, MAX_VISIBLE) : all.slice(-MAX_VISIBLE)
+    let cursor = older || reset || !overlaps ? result.next_cursor : page.value.next_cursor
+    if (!older && trimmed) cursor = items[0]?.id ?? null
+    if (older && trimmed) atLatest.value = false
+    if (!older) atLatest.value = true
+    adjusting = true
+    page.value = { ...result, items, next_cursor: cursor }
+    error.value = ''
+    await nextTick()
+    if (version !== revision) return
+    if (viewport) {
+      if (older) {
+        const retained = anchorId ? viewport.querySelector<HTMLElement>(`[data-log-id="${anchorId}"]`) : undefined
+        viewport.scrollTop = retained && anchorTop != null ? oldTop + retained.getBoundingClientRect().top - anchorTop : oldTop + viewport.scrollHeight - oldHeight
+      } else if (reset || following.value) {
+        viewport.scrollTop = viewport.scrollHeight
+        following.value = true
+      }
+    }
+  } catch (reason) {
+    if (version === revision) error.value = reason instanceof Error ? reason.message : t('日志加载失败', 'Failed to load logs')
+  } finally { if (version === revision) { loading.value = false; adjusting = false } }
+}
+function onScroll() {
+  const viewport = scroller.value
+  if (!viewport || adjusting) return
+  following.value = atLatest.value && viewport.scrollHeight - viewport.clientHeight - viewport.scrollTop < 24
+  if (viewport.scrollTop < 80 && viewport.scrollHeight > viewport.clientHeight && !error.value) void load(false, true)
+}
+onMounted(() => {
+  void load(true)
+  timer = setInterval(() => { if (live.value && following.value && !loading.value && !document.hidden) void load() }, 5000)
+})
+onUnmounted(() => { revision++; clearInterval(timer) })
+</script>
+
+<template>
+  <section class="feature-page logs-page">
+    <header class="feature-header"><div><h1>{{ t('运行日志', 'Operation logs') }}</h1><p>{{ t('集中查看向量模型、智能体、任务与后台操作。', 'Inspect models, agents, tasks and background operations.') }}</p></div><button class="button-secondary" :disabled="loading" @click="load(true)">{{ t('刷新', 'Refresh') }}</button></header>
+    <form class="panel log-filters" @submit.prevent="load(true)">
+      <label class="field">{{ t('级别', 'Level') }}<select v-model="level" class="select"><option value="">{{ t('全部', 'All') }}</option><option>INFO</option><option>WARNING</option><option>ERROR</option><option>CRITICAL</option></select></label>
+      <label class="field">{{ t('模块', 'Module') }}<select v-model="source" class="select"><option value="">{{ t('全部', 'All') }}</option><option v-for="item in page.sources" :key="item">{{ item }}</option></select></label>
+      <label class="field log-search">{{ t('事件、错误码或关联 ID', 'Event, error code or correlation ID') }}<input v-model="query" class="input" maxlength="200" /></label>
+      <button class="button-primary" :disabled="loading">{{ t('筛选', 'Filter') }}</button>
+      <label><input v-model="live" type="checkbox" /> {{ t('自动跟随新日志', 'Follow new logs') }}</label>
+    </form>
+    <p class="subtle">{{ t('本地保留最近', 'Locally retains the latest') }} {{ page.retention.toLocaleString() }} {{ t('条日志；不记录正文、提示词、工具参数及密钥。', 'events; excludes content, prompts, tool arguments and credentials.') }}</p>
+    <p v-if="page.dropped || page.write_failures" class="error-banner" role="alert">{{ t('日志存储不完整：队列溢出', 'Incomplete logging: queue overflow') }} {{ page.dropped }} · {{ t('写入失败', 'Write failures') }} {{ page.write_failures }}</p>
+    <p v-if="error" class="error-banner" role="alert">{{ error }}</p>
+    <div class="inline-actions log-controls"><span class="subtle" role="status">{{ live && following ? t('正在跟随最新日志', 'Following latest logs') : t('已暂停跟随，可自由查看历史', 'Following paused; browse history freely') }}</span><button class="button-secondary" :disabled="loading" @click="live = true; load(true)">{{ t('回到最新', 'Back to latest') }}</button><span class="subtle">{{ t('待写入', 'Pending') }} {{ page.pending }}</span></div>
+    <div ref="scroller" class="panel log-list" :aria-busy="loading" tabindex="0" :aria-label="t('日志列表，向上滚动加载历史', 'Log list; scroll up for history')" @scroll.passive="onScroll">
+      <div class="history-status"><button v-if="page.next_cursor" class="button-secondary" :disabled="loading" @click="load(false, true)">{{ loading ? t('加载中…', 'Loading…') : t('向上滚动加载更早日志', 'Scroll up for older logs') }}</button><span v-else class="subtle">{{ t('已到保留日志的开头', 'Beginning of retained logs') }}</span></div>
+      <p v-if="!page.items.length">{{ loading ? t('加载中…', 'Loading…') : t('暂无符合条件的日志', 'No matching logs') }}</p>
+      <details v-for="entry in page.items" :key="entry.id" :data-log-id="entry.id" class="ui-disclosure log-entry">
+        <summary><span class="badge" :class="{ error: entry.level === 'ERROR' || entry.level === 'CRITICAL', warning: entry.level === 'WARNING' }">{{ entry.level }}</span><time>{{ new Date(entry.timestamp).toLocaleString() }}</time><span>{{ entry.source }}</span><strong>{{ entry.event }}</strong></summary>
+        <dl><template v-for="(value, key) in entry.details" :key="key"><dt>{{ key }}</dt><dd>{{ value }}</dd></template></dl>
+      </details>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.logs-page > * { width: 100%; max-width: 1180px; margin-inline: auto; box-sizing: border-box; }
+.logs-page > .subtle { margin-block: var(--space-md); }
+.log-controls { margin-block: var(--space-md); }
+.log-list { height: min(65vh, 800px); min-height: 240px; overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none; scroll-behavior: auto; }
+.history-status { text-align: center; margin-bottom: var(--space-md); }
+.log-filters { display: flex; align-items: end; flex-wrap: wrap; gap: var(--space-md); }
+.log-filters .field { min-width: 140px; margin: 0; }
+.log-search { flex: 1; }
+.log-entry { border-bottom: 1px solid var(--color-border-subtle); padding: var(--space-sm); }
+.log-entry + .log-entry { margin-top: var(--space-xs); }
+.log-entry summary { display: flex; flex-wrap: wrap; gap: var(--space-sm); cursor: pointer; align-items: center; overflow-wrap: anywhere; }
+.log-entry summary::after { margin-left: auto; }
+.log-entry dl { display: grid; grid-template-columns: minmax(100px, 160px) 1fr; gap: var(--space-sm); font-size: var(--font-size-sm); }
+.log-entry dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
+.log-entry dt, .log-entry time { color: var(--color-text-secondary); }
+</style>

frontend/src/features/settings/SettingsView.spec.ts

@@ -7,6 +7,31 @@ import { useProviderStore } from '@/stores/provider'
 import { useSettingsStore } from '@/stores/settings'
 
 beforeEach(() => { localStorage.clear(); setActivePinia(createPinia()) })
+it('separates unfinished indexing from retrieval activity and retains short search totals', async () => {
+  const store = useSettingsStore()
+  vi.spyOn(store, 'loadDiagnostics').mockResolvedValue()
+  const providers = useProviderStore()
+  vi.spyOn(providers, 'loadProviders').mockResolvedValue()
+  vi.spyOn(providers, 'loadPresets').mockResolvedValue()
+  vi.spyOn(providers, 'refreshEnabledModels').mockResolvedValue()
+  const wrapper = mount(SettingsView, { global: { stubs: { UsageCard: true, LocalModelSettings: true, ModelRoutingSettings: true } } })
+  await flushPromises()
+  await wrapper.findAll('button').find(button => button.text() === '索引与模型')!.trigger('click')
+  expect(wrapper.text()).toContain('未完成索引 未获取')
+  store.indexStatus = { status: 'idle', pending_jobs: 1, running_jobs: 0, total_notes: 16, total_blocks: 3787, vector_refresh_required: true,
+    active_searches: 0, completed_searches: 2, failed_searches: 1, cancelled_searches: 0 }
+  await flushPromises()
+  expect(wrapper.text()).toContain('全文可用 · 向量待重建')
+  expect(wrapper.text()).toContain('未完成索引 1')
+  expect(wrapper.text()).toContain('已完成 2')
+  expect(wrapper.text()).toContain('失败 1')
+  store.indexStatus.status = 'indexing'
+  store.indexStatus.running_jobs = 1
+  await flushPromises()
+  expect(wrapper.text()).toContain('后台计算索引')
+  expect(wrapper.findAll('button').find(button => button.text() === '重建全部')!.attributes('disabled')).toBeDefined()
+  wrapper.unmount()
+})
 it('shows provider status and enables testing only after a successful enable', async () => {
   const store = useProviderStore()
   store.providers = [{ provider_id: 'p1', name: 'Example', provider_type: 'openai_compatible', enabled: false, default_model: '', capabilities: {}, has_credential: false }]

frontend/src/features/settings/SettingsView.vue

@@ -128,7 +128,32 @@ async function chooseDefaultModel(provider: ProviderConfig, event: Event) {
       <UsageCard />
     </div>
 
-    <div v-else-if="activeSection === 'index'" class="panel settings-section"><h2>{{ t('索引与模型', 'Index and Models') }}</h2><div class="index-summary"><div><span class="badge" :class="{ success: settingsStore.indexStatus.status === 'idle', error: settingsStore.indexStatus.status === 'error' }">{{ settingsStore.indexStatus.status }}</span><p>{{ t('待处理任务', 'Pending jobs') }} {{ settingsStore.indexStatus.pending_jobs }}</p></div><div><strong>{{ settingsStore.indexStatus.total_notes ?? t('未获取', 'Unavailable') }}</strong><small>{{ t('笔记', 'Notes') }}</small></div><div><strong>{{ settingsStore.indexStatus.total_blocks ?? t('未获取', 'Unavailable') }}</strong><small>Block</small></div></div><div v-if="settingsStore.indexStatus.error" class="error-banner">{{ settingsStore.indexStatus.error }}</div><div class="inline-actions"><button class="button-primary" @click="settingsStore.rebuildIndex('full')">{{ t('重建全部', 'Rebuild all') }}</button><span class="subtle">{{ t('当前后端支持全量重建。', 'The current backend supports a full rebuild.') }}</span></div><ModelRoutingSettings /></div>
+    <div v-else-if="activeSection === 'index'" class="panel settings-section">
+      <h2>{{ t('索引与模型', 'Index and Models') }}</h2>
+      <div class="index-summary">
+        <div>
+          <span class="badge" :class="{ success: settingsStore.indexStatus.status === 'idle' && !settingsStore.indexStatus.vector_refresh_required && !settingsStore.indexStatus.active_searches, error: settingsStore.indexStatus.status === 'error' }">{{ settingsStore.indexStatusLabel }}</span>
+          <p>{{ t('未完成索引', 'Unfinished indexing jobs') }} {{ settingsStore.indexStatus.status === 'unknown' ? t('未获取', 'Unavailable') : settingsStore.indexStatus.pending_jobs }}</p>
+          <small>{{ t('运行中', 'Running') }} {{ settingsStore.indexStatus.running_jobs ?? t('未获取', 'Unavailable') }}</small>
+        </div>
+        <div><strong>{{ settingsStore.indexStatus.total_notes ?? t('未获取', 'Unavailable') }}</strong><small>{{ t('笔记', 'Notes') }}</small></div>
+        <div><strong>{{ settingsStore.indexStatus.total_blocks ?? t('未获取', 'Unavailable') }}</strong><small>Block</small></div>
+      </div>
+      <p class="subtle">{{ t('未完成数包含运行中的任务；全库重建计为一个任务，不是笔记或 Block 数量。', 'Unfinished jobs include running jobs. A full rebuild counts as one job, not the number of notes or blocks.') }}</p>
+      <div class="index-search-activity">
+        <h3>{{ t('向量 / 混合检索', 'Vector / hybrid searches') }}</h3>
+        <div class="inline-actions">
+          <span>{{ t('进行中', 'Active') }} {{ settingsStore.indexStatus.active_searches ?? t('未获取', 'Unavailable') }}</span>
+          <span>{{ t('已完成', 'Completed') }} {{ settingsStore.indexStatus.completed_searches ?? t('未获取', 'Unavailable') }}</span>
+          <span>{{ t('失败', 'Failed') }} {{ settingsStore.indexStatus.failed_searches ?? t('未获取', 'Unavailable') }}</span>
+          <span>{{ t('已取消', 'Cancelled') }} {{ settingsStore.indexStatus.cancelled_searches ?? t('未获取', 'Unavailable') }}</span>
+        </div>
+        <p class="subtle">{{ t('统计本次 AI Core 启动以来的检索，包含搜索、对话和智能体调用；不计纯全文检索。', 'Counts searches, chat and agent retrievals since AI Core started; excludes full-text-only searches.') }}</p>
+      </div>
+      <div v-if="settingsStore.indexStatus.error" class="error-banner">{{ settingsStore.indexStatus.error }}</div>
+      <div class="inline-actions"><button class="button-primary" :disabled="settingsStore.indexStatus.status === 'indexing'" @click="settingsStore.rebuildIndex('full')">{{ t('重建全部', 'Rebuild all') }}</button><span class="subtle">{{ t('当前后端支持全量重建。', 'The current backend supports a full rebuild.') }}</span></div>
+      <ModelRoutingSettings />
+    </div>
 
     <div v-else-if="activeSection === 'permissions'" class="panel settings-section"><h2>{{ t('权限策略', 'Permission Policy') }}</h2><p class="muted section-description">{{ t('以下为后端当前生效的权限策略；全局策略编辑尚未开放，运行时按实际权限请求确认。', 'These policies are active in the backend. Global policy editing is not yet available; runtime requests are confirmed as needed.') }}</p><p v-if="!Object.keys(settingsStore.permissionPolicy).length" class="subtle">{{ t('尚未获取权限策略，请检查后端连接并重新检测。', 'Permission policy is unavailable. Check the backend connection and try again.') }}</p><div class="permission-list"><div v-for="(policy, permission) in settingsStore.permissionPolicy" :key="permission" class="setting-row"><span><strong>{{ permission }}</strong></span><span>{{ policy === 'allow' ? t('允许', 'Allow') : policy === 'confirm' ? t('每次确认', 'Confirm each time') : t('拒绝', 'Deny') }}</span></div></div></div>
 

frontend/src/features/tasks/TasksView.vue

@@ -3,12 +3,17 @@ import ActionDialog from '@/components/common/ActionDialog.vue'
 import { useActionDialog } from '@/composables/useActionDialog'
 const { actionDialog, resolveAction, askConfirm } = useActionDialog()
 import AppDialog from '@/components/common/AppDialog.vue'
-import { onMounted, reactive, ref } from 'vue'
+import { computed, watch, onMounted, reactive, ref } from 'vue'
 import type { TaskItem, TaskStatus } from '@/contracts'
 import { useTaskStore } from '@/stores/task'
 import { localeTag, t } from '@/i18n'
 
 const taskStore = useTaskStore()
+const page = ref(1)
+const pageCount = computed(() => Math.max(1, Math.ceil(taskStore.filteredTasks.length / 100)))
+const visibleTasks = computed(() => taskStore.filteredTasks.slice((page.value - 1) * 100, page.value * 100))
+watch(() => [taskStore.filterStatus, taskStore.filterPriority, taskStore.filterSource], () => { page.value = 1 })
+watch(pageCount, count => { page.value = Math.min(page.value, count) })
 const showForm = ref(false)
 const editingId = ref<string | null>(null)
 const actionError = ref('')
@@ -44,13 +49,14 @@ async function remove(task: TaskItem) {
     <header class="feature-header"><div><h1>{{ t('任务', 'Tasks') }}</h1><p>{{ t('管理用户、笔记和 Agent 产生的行动项。', 'Manage action items created by users, notes, and agents.') }}</p></div><button class="button-primary" @click="resetForm(); showForm = true">＋ {{ t('新建任务', 'New task') }}</button></header>
     <div v-if="taskStore.error || actionError" class="error-banner">{{ taskStore.error || actionError }}</div>
     <div v-if="taskStore.filteredTasks.length" class="task-list">
-      <article v-for="task in taskStore.filteredTasks" :key="task.task_id" class="item-card task-card">
+      <article v-for="task in visibleTasks" :key="task.task_id" class="item-card task-card">
         <button class="status-check" :class="{ done: task.status === 'done' }" :title="t('切换完成状态', 'Toggle completion')" @click="setStatus(task, task.status === 'done' ? 'todo' : 'done')">{{ task.status === 'done' ? '✓' : '' }}</button>
         <div class="task-content"><div class="task-title"><strong :class="{ completed: task.status === 'done' }">{{ task.title }}</strong></div><p v-if="task.description" class="muted">{{ task.description }}</p><div class="subtle"><span>{{ task.status }}</span><span v-if="task.due_date">{{ t('截止', 'Due') }} {{ new Date(task.due_date).toLocaleString(localeTag()) }}</span><span v-if="task.note_id">{{ t('关联 Note', 'Linked Note') }}: {{ task.note_id }}</span></div></div>
         <div class="inline-actions"><button class="icon-button" @click="editTask(task)">{{ t('编辑', 'Edit') }}</button><button class="button-danger" @click="remove(task)">{{ t('删除', 'Delete') }}</button></div>
       </article>
     </div>
     <div v-else class="empty-state"><div><strong>{{ taskStore.isLoading ? t('正在加载任务…', 'Loading tasks…') : t('没有符合条件的任务', 'No matching tasks') }}</strong><p>{{ t('创建一项任务，或调整左侧筛选条件。', 'Create a task or adjust the filters.') }}</p></div></div>
+    <nav v-if="pageCount > 1" class="inline-actions"><button class="button-secondary" :disabled="page === 1" @click="page--">{{ t('上一页', 'Previous') }}</button><span>{{ page }} / {{ pageCount }} · {{ taskStore.filteredTasks.length }}</span><button class="button-secondary" :disabled="page === pageCount" @click="page++">{{ t('下一页', 'Next') }}</button></nav>
     <AppDialog v-if="showForm" :label="t('任务表单', 'Task form')" @close="showForm = false"><div class="modal"><h2>{{ editingId ? t('编辑任务', 'Edit task') : t('新建任务', 'New task') }}</h2><form @submit.prevent="saveTask"><div class="field"><label>{{ t('标题', 'Title') }}</label><input v-model="form.title" class="input" required /></div><div class="field"><label>{{ t('描述', 'Description') }}</label><textarea v-model="form.description" class="textarea" /></div><div class="field"><label>{{ t('截止时间', 'Due date') }}</label><input v-model="form.due_date" class="input" type="datetime-local" /></div><div class="field"><label>{{ t('关联 Note ID', 'Linked Note ID') }}</label><input v-model="form.note_id" class="input" /></div><div class="inline-actions"><button class="button-primary">{{ t('保存', 'Save') }}</button><button type="button" class="button-secondary" @click="showForm = false">{{ t('取消', 'Cancel') }}</button></div></form></div></AppDialog>
   </section>
 </template>

frontend/src/features/themes/ThemesView.spec.ts

@@ -96,7 +96,7 @@ it.each(mockCommunityThemes)('previews uninstalled $theme_id using its actual CS
 
 it('offers and applies the paper theme update without discarding the active theme', async () => {
   const store = useThemeStore()
-  const old = await inspectThemePackage(paperPackage.replace('version: 1.8.0', 'version: 1.6.1'))
+  const old = await inspectThemePackage(paperPackage.replace(/^version: .+$/m, 'version: 1.6.1'))
   await store.installThemeFromInspection(old.manifest, old.css)
   store.applyTheme('paper-moments')
   wrapper = mount(ThemesView, { global: { stubs: { MarkdownContent: true } } })
@@ -105,6 +105,6 @@ it('offers and applies the paper theme update without discarding the active them
   const card = wrapper.findAll('article.theme-card').find(item => item.text().includes('Paper Moments'))!
   await card.findAll('button').find(button => button.text() === '更新')!.trigger('click')
   await flushPromises()
-  expect(store.allThemes.find(theme => theme.theme_id === 'paper-moments')?.version).toBe('1.8.0')
+  expect(store.allThemes.find(theme => theme.theme_id === 'paper-moments')?.version).toBe('1.8.1')
   expect(document.getElementById('theme-style-paper-moments')!.textContent).toContain('.surface-nested')
 })

frontend/src/features/vault/VaultEntry.vue

@@ -65,7 +65,8 @@ async function openFolderPicker() {
         <p class="app-subtitle">{{ t('本地优先的 AI 笔记软件', 'A local-first AI note-taking app') }}</p>
       </div>
 
-      <div class="vault-card">
+        <div class="vault-card">
+          <button class="btn" @click="router.push('/logs')">{{ t('查看运行日志', 'View operation logs') }}</button>
         <div v-if="openError" class="error-banner" role="alert">{{ openError }} <button class="btn" @click="initializeVault" :disabled="isLoading">{{ t('重试', 'Retry') }}</button></div>
         <p v-if="isLoading" role="status">{{ t('正在打开知识库…', 'Opening knowledge base…') }}</p>
         <h2 class="card-title">{{ t('选择知识库', 'Select Knowledge Base') }}</h2>