From 2dd2a149b8f5a1d49f9ce03d3b0ee87738fc3818 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Fri, 9 Jan 2026 03:24:48 +0800
Subject: [PATCH] feat(stage-tamagotchi): added fundamental vision

---
 apps/stage-pocket/package.json                |   1 +
 apps/stage-tamagotchi/package.json            |   1 +
 .../windows/settings/rpc/index.electron.ts    |  15 +-
 .../renderer/components/WithScreenCapture.vue |   2 +
 .../composables/use-vision-screen-capture.ts  | 146 ++++
 .../src/renderer/pages/devtools/vision.vue    | 501 ++++++++++++++
 .../pages/settings/system/developer.vue       |  12 +
 apps/stage-tamagotchi/src/shared/eventa.ts    |   2 +
 apps/stage-web/package.json                   |   1 +
 .../src/pages/settings/system/developer.vue   |   6 +
 packages/stage-pages/package.json             |   1 +
 .../src/pages/devtools/context-observer.vue   | 645 ++++++++++++++++++
 .../src/pages/settings/modules/vision.vue     | 383 ++++++++++-
 .../src/pages/settings/providers/index.vue    |   2 +-
 packages/stage-ui/package.json                |   3 +
 .../stage-ui/src/components/gadgets/index.ts  |   2 +
 .../gadgets/processing-meter.story.vue        |  63 ++
 .../components/gadgets/processing-meter.vue   | 116 ++++
 .../gadgets/timeline-range.story.vue          |  45 ++
 .../src/components/gadgets/timeline-range.vue | 179 +++++
 packages/stage-ui/src/composables/index.ts    |   1 +
 .../src/composables/use-modules-list.ts       |   4 +-
 .../stage-ui/src/composables/vision/index.ts  |   2 +
 .../vision/use-vision-inference.ts            |  82 +++
 .../vision/use-vision-workloads.ts            |  55 ++
 .../stage-ui/src/stores/chat/context-store.ts |  18 +
 packages/stage-ui/src/stores/modules/index.ts |   1 +
 .../src/stores/modules/vision/agents/index.ts |   7 +
 .../src/stores/modules/vision/index.ts        |   5 +
 .../src/stores/modules/vision/orchestrator.ts |  93 +++
 .../stores/modules/vision/processing-store.ts | 204 ++++++
 .../src/stores/modules/vision/store.ts        |  93 +++
 .../modules/vision/utils/model-catalog.ts     |  55 ++
 pnpm-lock.yaml                                | 547 +++++++++++++++
 pnpm-workspace.yaml                           |   2 +
 35 files changed, 3288 insertions(+), 7 deletions(-)
 create mode 100644 apps/stage-tamagotchi/src/renderer/composables/use-vision-screen-capture.ts
 create mode 100644 apps/stage-tamagotchi/src/renderer/pages/devtools/vision.vue
 create mode 100644 packages/stage-pages/src/pages/devtools/context-observer.vue
 create mode 100644 packages/stage-ui/src/components/gadgets/processing-meter.story.vue
 create mode 100644 packages/stage-ui/src/components/gadgets/processing-meter.vue
 create mode 100644 packages/stage-ui/src/components/gadgets/timeline-range.story.vue
 create mode 100644 packages/stage-ui/src/components/gadgets/timeline-range.vue
 create mode 100644 packages/stage-ui/src/composables/vision/index.ts
 create mode 100644 packages/stage-ui/src/composables/vision/use-vision-inference.ts
 create mode 100644 packages/stage-ui/src/composables/vision/use-vision-workloads.ts
 create mode 100644 packages/stage-ui/src/stores/modules/vision/agents/index.ts
 create mode 100644 packages/stage-ui/src/stores/modules/vision/index.ts
 create mode 100644 packages/stage-ui/src/stores/modules/vision/orchestrator.ts
 create mode 100644 packages/stage-ui/src/stores/modules/vision/processing-store.ts
 create mode 100644 packages/stage-ui/src/stores/modules/vision/store.ts
 create mode 100644 packages/stage-ui/src/stores/modules/vision/utils/model-catalog.ts

diff --git a/apps/stage-pocket/package.json b/apps/stage-pocket/package.json
index e54f9df70..773cff92c 100644
--- a/apps/stage-pocket/package.json
+++ b/apps/stage-pocket/package.json
@@ -63,6 +63,7 @@
     "capacitor-native-settings": "catalog:",
     "colorjs.io": "^0.6.1",
     "culori": "^4.0.2",
+    "d3": "catalog:",
     "date-fns": "^4.1.0",
     "dompurify": "^3.3.1",
     "driver.js": "^1.4.0",
diff --git a/apps/stage-tamagotchi/package.json b/apps/stage-tamagotchi/package.json
index 29d52093f..ec2a92d63 100644
--- a/apps/stage-tamagotchi/package.json
+++ b/apps/stage-tamagotchi/package.json
@@ -86,6 +86,7 @@
     "async-mutex": "catalog:",
     "colorjs.io": "^0.6.1",
     "culori": "^4.0.2",
+    "d3": "catalog:",
     "date-fns": "^4.1.0",
     "defu": "^6.1.4",
     "destr": "^2.0.5",
diff --git a/apps/stage-tamagotchi/src/main/windows/settings/rpc/index.electron.ts b/apps/stage-tamagotchi/src/main/windows/settings/rpc/index.electron.ts
index b56e4f422..68e6240cb 100644
--- a/apps/stage-tamagotchi/src/main/windows/settings/rpc/index.electron.ts
+++ b/apps/stage-tamagotchi/src/main/windows/settings/rpc/index.electron.ts
@@ -9,9 +9,9 @@ import type { WidgetsWindowManager } from '../../widgets'
 
 import { defineInvokeHandler } from '@moeru/eventa'
 import { createContext } from '@moeru/eventa/adapters/electron/main'
-import { ipcMain } from 'electron'
+import { desktopCapturer, ipcMain, session } from 'electron'
 
-import { electronOpenDevtoolsWindow, electronOpenSettingsDevtools } from '../../../../shared/eventa'
+import { electronOpenDevtoolsWindow, electronOpenSettingsDevtools, modulesVisionPrepareScreenSourceSelection } from '../../../../shared/eventa'
 import { createMcpServersService } from '../../../services/airi/mcp-servers'
 import { createWidgetsService } from '../../../services/airi/widgets'
 import { createAutoUpdaterService } from '../../../services/electron'
@@ -44,5 +44,16 @@ export async function setupSettingsWindowInvokes(params: {
     await params.devtoolsMarkdownStressWindow.openWindow(payload?.route)
   })
 
+  defineInvokeHandler(context, modulesVisionPrepareScreenSourceSelection, async () => {
+    // TODO(@sumimakito): Refactor electron-audio-loopback first then move this to register for beat-sync handler.
+    // TODO(@nekomeowww): Currently, beat-sync and vision cannot be used together, as they both overriding the display media request handler.
+    session.defaultSession.setDisplayMediaRequestHandler((_request, callback) => {
+      desktopCapturer.getSources({ types: ['screen'] }).then((sources) => {
+        // Grant access to the first screen found.
+        callback({ video: sources[0], audio: 'loopback' })
+      })
+    }, { useSystemPicker: false })
+  })
+
   return context
 }
diff --git a/apps/stage-tamagotchi/src/renderer/components/WithScreenCapture.vue b/apps/stage-tamagotchi/src/renderer/components/WithScreenCapture.vue
index 5655123f2..2c04b6a7c 100644
--- a/apps/stage-tamagotchi/src/renderer/components/WithScreenCapture.vue
+++ b/apps/stage-tamagotchi/src/renderer/components/WithScreenCapture.vue
@@ -21,6 +21,7 @@ const { t } = useI18n()
 const {
   getSources,
   setSource,
+  resetSource,
   selectWithSource,
   checkMacOSPermission,
   requestMacOSPermission,
@@ -62,6 +63,7 @@ watch(focused, async (isFocused) => {
     v-bind="{
       getSources,
       setSource,
+      resetSource,
       selectWithSource,
       hasPermissions,
       checkPermissions,
diff --git a/apps/stage-tamagotchi/src/renderer/composables/use-vision-screen-capture.ts b/apps/stage-tamagotchi/src/renderer/composables/use-vision-screen-capture.ts
new file mode 100644
index 000000000..5f7c6ec39
--- /dev/null
+++ b/apps/stage-tamagotchi/src/renderer/composables/use-vision-screen-capture.ts
@@ -0,0 +1,146 @@
+import type { SerializableDesktopCapturerSource } from '@proj-airi/electron-screen-capture'
+import type { SourcesOptions } from 'electron'
+import type { MaybeRefOrGetter } from 'vue'
+
+import { useElectronScreenCapture } from '@proj-airi/electron-screen-capture/vue'
+import { computed, ref, toRaw, toValue } from 'vue'
+
+interface ScreenCaptureSource extends SerializableDesktopCapturerSource {
+  appIconURL?: string
+  thumbnailURL?: string
+}
+
+function toLocalArrayBuffer(bytes: Uint8Array) {
+  if (typeof SharedArrayBuffer !== 'undefined' && bytes.buffer instanceof SharedArrayBuffer) {
+    return bytes.slice().buffer
+  }
+  return bytes.buffer as ArrayBuffer
+}
+
+function toObjectUrl(bytes: Uint8Array, mime: string) {
+  return URL.createObjectURL(new Blob([toLocalArrayBuffer(bytes)], { type: mime }))
+}
+
+export function useVisionScreenCapture(sourcesOptions: MaybeRefOrGetter<SourcesOptions>) {
+  const sources = ref<ScreenCaptureSource[]>([])
+  const isRefetching = ref(false)
+  const hasFetchedOnce = ref(false)
+  const activeSourceId = ref('')
+  const activeStream = ref<MediaStream | null>(null)
+
+  const {
+    getSources,
+    setSource,
+    resetSource,
+  } = useElectronScreenCapture(window.electron.ipcRenderer, sourcesOptions)
+
+  const activeSource = computed(() => sources.value.find(source => source.id === activeSourceId.value) || null)
+
+  async function refetchSources() {
+    try {
+      isRefetching.value = true
+      const nextSources = (await getSources())
+        .sort((a, b) => {
+          const aIsScreen = a.id.startsWith('screen:')
+          const bIsScreen = b.id.startsWith('screen:')
+          if (aIsScreen !== bIsScreen)
+            return aIsScreen ? -1 : 1
+          return a.name.localeCompare(b.name)
+        })
+
+      sources.value.forEach((oldSource) => {
+        if (oldSource.appIconURL)
+          URL.revokeObjectURL(oldSource.appIconURL)
+        if (oldSource.thumbnailURL)
+          URL.revokeObjectURL(oldSource.thumbnailURL)
+      })
+
+      sources.value = nextSources.map(source => ({
+        ...source,
+        appIconURL: source.appIcon && source.appIcon.length > 0 ? toObjectUrl(source.appIcon, 'image/png') : undefined,
+        thumbnailURL: source.thumbnail && source.thumbnail.length > 0 ? toObjectUrl(source.thumbnail, 'image/jpeg') : undefined,
+      }))
+
+      if (!activeSourceId.value && sources.value.length > 0) {
+        activeSourceId.value = sources.value[0]?.id || ''
+      }
+    }
+    finally {
+      isRefetching.value = false
+      hasFetchedOnce.value = true
+    }
+  }
+
+  async function startStream() {
+    if (!activeSourceId.value)
+      throw new Error('No active source selected')
+
+    if (activeStream.value) {
+      activeStream.value.getTracks().forEach(track => track.stop())
+    }
+
+    const handle = await setSource({
+      options: toRaw(toValue(sourcesOptions)),
+      sourceId: activeSourceId.value,
+    })
+
+    try {
+      const stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: false })
+      activeStream.value = stream
+      return stream
+    }
+    finally {
+      await resetSource(handle)
+    }
+  }
+
+  function stopStream() {
+    if (activeStream.value) {
+      activeStream.value.getTracks().forEach(track => track.stop())
+    }
+    activeStream.value = null
+  }
+
+  function cleanup() {
+    stopStream()
+    sources.value.forEach((oldSource) => {
+      if (oldSource.appIconURL)
+        URL.revokeObjectURL(oldSource.appIconURL)
+      if (oldSource.thumbnailURL)
+        URL.revokeObjectURL(oldSource.thumbnailURL)
+    })
+  }
+
+  function captureFrame(video: HTMLVideoElement, quality = 0.82, maxWidth = 1280, maxHeight = 720) {
+    if (!video || video.readyState < 2)
+      return null
+
+    const canvas = document.createElement('canvas')
+    const sourceWidth = video.videoWidth
+    const sourceHeight = video.videoHeight
+    const scale = Math.min(maxWidth / sourceWidth, maxHeight / sourceHeight, 1)
+    canvas.width = Math.round(sourceWidth * scale)
+    canvas.height = Math.round(sourceHeight * scale)
+
+    const ctx = canvas.getContext('2d')
+    if (!ctx)
+      throw new Error('Failed to create canvas context')
+
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
+    return canvas.toDataURL('image/jpeg', quality)
+  }
+
+  return {
+    sources,
+    activeSourceId,
+    activeSource,
+    activeStream,
+    isRefetching,
+    hasFetchedOnce,
+    refetchSources,
+    startStream,
+    stopStream,
+    cleanup,
+    captureFrame,
+  }
+}
diff --git a/apps/stage-tamagotchi/src/renderer/pages/devtools/vision.vue b/apps/stage-tamagotchi/src/renderer/pages/devtools/vision.vue
new file mode 100644
index 000000000..f84c031da
--- /dev/null
+++ b/apps/stage-tamagotchi/src/renderer/pages/devtools/vision.vue
@@ -0,0 +1,501 @@
+<script setup lang="ts">
+import type { VisionWorkloadId } from '@proj-airi/stage-ui/composables'
+import type { SourcesOptions } from 'electron'
+
+import { errorMessageFrom } from '@moeru/std'
+import { ProcessingMeter } from '@proj-airi/stage-ui/components'
+import { VISION_WORKLOADS } from '@proj-airi/stage-ui/composables'
+import { useVisionOrchestratorStore, useVisionProcessingStore, useVisionStore } from '@proj-airi/stage-ui/stores/modules/vision'
+import { Button, FieldCheckbox, FieldRange, FieldSelect, SelectTab } from '@proj-airi/ui'
+import { storeToRefs } from 'pinia'
+import { computed, onBeforeUnmount, ref } from 'vue'
+
+import WithScreenCapture from '../../components/WithScreenCapture.vue'
+
+import { useVisionScreenCapture } from '../../composables/use-vision-screen-capture'
+
+type SourceCategory = 'applications' | 'displays' | 'devices'
+
+const visionStore = useVisionStore()
+const visionProcessingStore = useVisionProcessingStore()
+const visionOrchestratorStore = useVisionOrchestratorStore()
+const { activeModel } = storeToRefs(visionStore)
+const {
+  captureIntervalMs,
+  isRunning,
+  isProcessing,
+  captureCount,
+  contextUpdateCount,
+  lastProcessingDurationMs,
+  captureRatePerMinute,
+  contextUpdateRatePerMinute,
+  processingHistoryMs,
+} = storeToRefs(visionProcessingStore)
+const {
+  lastResultText,
+  lastResultAt,
+  lastError,
+} = storeToRefs(visionOrchestratorStore)
+
+const sourcesOptions = ref<SourcesOptions>({
+  types: ['screen', 'window'],
+  fetchWindowIcons: true,
+})
+
+const sourceCategory = ref<SourceCategory>('displays')
+const errorMessage = ref('')
+const screenshotDataUrl = ref('')
+const sendContextUpdates = ref(false)
+const selectedWorkload = ref<VisionWorkloadId>(VISION_WORKLOADS[0]?.id || 'screen:interpret')
+
+const videoRef = ref<HTMLVideoElement | null>(null)
+
+const {
+  sources,
+  activeSourceId,
+  activeSource,
+  activeStream,
+  isRefetching,
+  hasFetchedOnce,
+  refetchSources,
+  startStream,
+  stopStream,
+  cleanup,
+  captureFrame,
+} = useVisionScreenCapture(sourcesOptions)
+
+const categoryOptions = [
+  { label: 'Applications', value: 'applications', icon: 'i-solar:window-frame-line-duotone' },
+  { label: 'Displays', value: 'displays', icon: 'i-solar:screencast-2-line-duotone' },
+  { label: 'Devices', value: 'devices', icon: 'i-solar:smartphone-2-line-duotone' },
+]
+
+const workloadOptions = VISION_WORKLOADS.map(workload => ({
+  label: workload.label,
+  value: workload.id,
+}))
+
+const isDisplaySource = (source: { id: string }) => source.id.startsWith('screen:')
+const isWindowSource = (source: { id: string }) => source.id.startsWith('window:')
+const isDeviceSource = (source: { id: string }) => source.id.startsWith('device:')
+
+const filteredSources = computed(() => {
+  if (sourceCategory.value === 'applications')
+    return sources.value.filter(isWindowSource)
+  if (sourceCategory.value === 'displays')
+    return sources.value.filter(isDisplaySource)
+  return sources.value.filter(isDeviceSource)
+})
+
+const sourceCounts = computed(() => ({
+  applications: sources.value.filter(isWindowSource).length,
+  displays: sources.value.filter(isDisplaySource).length,
+  devices: sources.value.filter(isDeviceSource).length,
+}))
+
+const statusLabel = computed(() => {
+  if (isRunning.value)
+    return isProcessing.value ? 'Processing...' : 'Streaming'
+  return activeStream.value ? 'Ready' : 'Idle'
+})
+
+const isInitialLoading = computed(() => !hasFetchedOnce.value && isRefetching.value)
+const refetchLabel = computed(() => (isInitialLoading.value ? 'Loading...' : isRefetching.value ? 'Refetching...' : 'Refetch'))
+
+const processingMaxMs = computed(() => {
+  if (!processingHistoryMs.value.length)
+    return 500
+  return Math.max(500, ...processingHistoryMs.value)
+})
+
+const expectedRateMax = computed(() => {
+  const interval = Math.max(250, captureIntervalMs.value)
+  return Math.max(60, Math.ceil(60000 / interval))
+})
+
+async function ensureVideoStream() {
+  if (!activeSourceId.value)
+    return
+
+  const stream = await startStream()
+  const video = videoRef.value
+  if (!video)
+    return
+
+  video.srcObject = stream
+  await video.play()
+
+  await new Promise<void>((resolve) => {
+    if (video.readyState >= 2) {
+      resolve()
+      return
+    }
+    video.onloadedmetadata = () => resolve()
+  })
+}
+
+async function handleVisionTick() {
+  if (!activeSourceId.value)
+    return
+
+  try {
+    if (!activeStream.value)
+      await ensureVideoStream()
+
+    const video = videoRef.value
+    if (!video)
+      return
+
+    const dataUrl = captureFrame(video)
+    if (!dataUrl)
+      return
+
+    screenshotDataUrl.value = dataUrl
+    const capturedAt = Date.now()
+
+    const result = await visionOrchestratorStore.processCapture({
+      imageDataUrl: dataUrl,
+      workloadId: selectedWorkload.value,
+      sourceId: activeSourceId.value,
+      capturedAt,
+      publishContext: sendContextUpdates.value,
+    })
+
+    return { capturedAt, contextUpdates: result.contextUpdates }
+  }
+  catch (error) {
+    visionOrchestratorStore.recordError(error)
+    errorMessage.value = `Failed to interpret frame: ${errorMessageFrom(error)}`
+    return { capturedAt: Date.now(), contextUpdates: 0 }
+  }
+}
+
+async function startCaptureLoop() {
+  errorMessage.value = ''
+  if (!activeSourceId.value) {
+    errorMessage.value = 'Select a screen source before starting the ticker.'
+    return
+  }
+
+  try {
+    await ensureVideoStream()
+  }
+  catch (error) {
+    errorMessage.value = `Failed to start stream: ${errorMessageFrom(error)}`
+    return
+  }
+
+  visionProcessingStore.startTicker(handleVisionTick)
+}
+
+async function stopCaptureLoop() {
+  visionProcessingStore.stopTicker()
+  stopStream()
+  if (videoRef.value) {
+    videoRef.value.pause()
+    videoRef.value.srcObject = null
+  }
+}
+
+function selectSource(sourceId: string) {
+  activeSourceId.value = sourceId
+  if (isRunning.value) {
+    void ensureVideoStream().catch((error) => {
+      errorMessage.value = `Failed to start stream: ${errorMessageFrom(error)}`
+    })
+  }
+}
+
+onBeforeUnmount(() => {
+  visionProcessingStore.stopTicker()
+  stopStream()
+  cleanup()
+})
+</script>
+
+<template>
+  <WithScreenCapture :sources-options="sourcesOptions">
+    <template #default="{ hasPermissions, requestPermission }">
+      <div
+        v-if="hasPermissions"
+        :class="['flex', 'flex-col', 'gap-6']"
+      >
+        <div v-if="!hasFetchedOnce && !isRefetching" :class="['hidden']">
+          {{ refetchSources() }}
+        </div>
+
+        <div :class="['flex', 'items-center', 'justify-between', 'rounded-xl', 'bg-neutral-100', 'p-4', 'dark:bg-[rgba(0,0,0,0.3)]']">
+          <div :class="['flex', 'flex-col', 'gap-1']">
+            <div :class="['text-sm', 'uppercase', 'tracking-wide', 'text-neutral-400']">
+              Vision model
+            </div>
+            <div :class="['text-lg', 'font-semibold']">
+              {{ activeModel || 'Not configured' }}
+            </div>
+          </div>
+          <div :class="['text-sm', 'text-neutral-400']">
+            {{ statusLabel }}
+          </div>
+        </div>
+
+        <div :class="['grid', 'gap-4', 'md:grid-cols-[minmax(0,1.2fr)_minmax(0,0.8fr)]']">
+          <div :class="['flex', 'flex-col', 'gap-4']">
+            <div :class="['rounded-xl', 'bg-neutral-100', 'p-4', 'dark:bg-[rgba(0,0,0,0.3)]']">
+              <div :class="['flex', 'flex-col', 'gap-4']">
+                <div :class="['flex', 'items-center', 'gap-3']">
+                  <SelectTab
+                    v-model="sourceCategory"
+                    size="sm"
+                    :options="categoryOptions.map(option => ({
+                      ...option,
+                      label: `${option.label} (${sourceCounts[option.value as SourceCategory]})`,
+                    }))"
+                    :class="['flex-1']"
+                  />
+                  <Button
+                    :label="refetchLabel"
+                    icon="i-solar:refresh-line-duotone"
+                    size="sm"
+                    :disabled="isRefetching"
+                    @click="refetchSources()"
+                  />
+                </div>
+
+                <div
+                  v-if="isInitialLoading"
+                  :class="[
+                    'flex', 'w-full', 'items-center', 'justify-center',
+                    'rounded-xl',
+                    'border-2', 'border-dashed', 'border-neutral-200/70', 'dark:border-neutral-800/40',
+                    'px-4', 'py-10',
+                    'text-sm', 'text-neutral-500',
+                  ]"
+                >
+                  <div :class="['flex', 'items-center', 'gap-2']">
+                    <div :class="['i-svg-spinners:ring-resize', 'text-lg']" />
+                    <span>Loading sources...</span>
+                  </div>
+                </div>
+
+                <div
+                  v-else
+                  :class="[
+                    'grid', 'gap-3',
+                    'grid-cols-1', 'md:grid-cols-2', 'xl:grid-cols-3',
+                  ]"
+                >
+                  <button
+                    v-for="source in filteredSources"
+                    :key="source.id"
+                    type="button"
+                    :class="[
+                      'flex', 'w-full', 'flex-col', 'gap-2', 'rounded-xl', 'p-3', 'text-left',
+                      'border', 'border-transparent',
+                      'bg-white/60', 'dark:bg-neutral-900/40',
+                      'transition', 'duration-200',
+                      activeSourceId === source.id
+                        ? 'border-primary-400/70 shadow-sm'
+                        : 'hover:border-neutral-200 dark:hover:border-neutral-700',
+                    ]"
+                    @click="selectSource(source.id)"
+                  >
+                    <div :class="['relative', 'aspect-video', 'w-full', 'overflow-hidden', 'rounded-lg', 'bg-neutral-200/60', 'dark:bg-neutral-800']">
+                      <img
+                        v-if="source.thumbnailURL"
+                        :src="source.thumbnailURL"
+                        alt="Source preview"
+                        :class="['h-full', 'w-full', 'object-contain']"
+                      >
+                      <div
+                        v-else
+                        :class="[
+                          'absolute', 'inset-0', 'flex', 'items-center', 'justify-center',
+                          'text-2xl', 'text-neutral-400', 'i-solar:screen-share-line-duotone',
+                        ]"
+                      />
+                    </div>
+                    <div :class="['flex', 'items-center', 'gap-2']">
+                      <div :class="['h-5', 'w-5']">
+                        <img v-if="source.appIconURL" :src="source.appIconURL" alt="Source icon" :class="['h-full', 'w-full']">
+                        <div v-else :class="['i-solar:window-frame-line-duotone', 'h-full', 'w-full']" />
+                      </div>
+                      <div :class="['text-sm', 'text-neutral-700', 'dark:text-neutral-200', 'line-clamp-1']">
+                        {{ source.name }}
+                      </div>
+                    </div>
+                    <div :class="['text-xs', 'text-neutral-400', 'font-mono', 'line-clamp-1']">
+                      {{ source.id }}
+                    </div>
+                  </button>
+                </div>
+
+                <div
+                  v-if="filteredSources.length === 0 && !isInitialLoading"
+                  :class="[
+                    'flex', 'flex-col', 'items-center', 'justify-center', 'gap-2',
+                    'rounded-xl', 'border-2', 'border-dashed', 'border-neutral-200/70',
+                    'px-4', 'py-10', 'text-sm', 'text-neutral-500', 'dark:border-neutral-800/40',
+                  ]"
+                >
+                  <div :class="['i-solar:shield-warning-line-duotone', 'text-2xl']" />
+                  <div>No sources found for this category.</div>
+                  <div :class="['text-xs', 'text-neutral-400']">
+                    Try switching tabs or refetching the sources.
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div :class="['rounded-xl', 'bg-neutral-100', 'p-4', 'dark:bg-[rgba(0,0,0,0.3)]']">
+              <div :class="['flex', 'flex-col', 'gap-4']">
+                <div :class="['flex', 'items-center', 'justify-between']">
+                  <div :class="['text-sm', 'uppercase', 'tracking-wide', 'text-neutral-400']">
+                    Ticker controls
+                  </div>
+                  <div :class="['text-xs', 'text-neutral-400']">
+                    {{ statusLabel }}
+                  </div>
+                </div>
+
+                <FieldRange
+                  v-model="captureIntervalMs"
+                  label="Capture interval"
+                  description="How frequently the vision loop grabs a frame."
+                  :min="500"
+                  :max="15000"
+                  :step="250"
+                  :format-value="value => `${(value / 1000).toFixed(2)}s`"
+                />
+
+                <FieldSelect
+                  v-model="selectedWorkload"
+                  label="Vision workload"
+                  description="Select how the model should interpret the screen."
+                  :options="workloadOptions"
+                />
+
+                <div :class="['flex', 'items-center', 'gap-3']">
+                  <Button
+                    :label="isRunning ? 'Stop ticker' : 'Start ticker'"
+                    :icon="isRunning ? 'i-solar:stop-line-duotone' : 'i-solar:play-line-duotone'"
+                    :disabled="!activeSourceId"
+                    @click="isRunning ? stopCaptureLoop() : startCaptureLoop()"
+                  />
+                  <div :class="['text-xs', 'text-neutral-400']">
+                    {{ activeSource ? `Source: ${activeSource.name}` : 'Pick a source to begin.' }}
+                  </div>
+                </div>
+
+                <div :class="['grid', 'gap-4', 'md:grid-cols-2']">
+                  <FieldCheckbox
+                    v-model="sendContextUpdates"
+                    label="Publish to character"
+                    description="Send interpreted results as context updates."
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div :class="['flex', 'flex-col', 'gap-4']">
+            <ProcessingMeter
+              title="Vision telemetry"
+              :processing-history="processingHistoryMs"
+              :processing-value="lastProcessingDurationMs ?? 0"
+              processing-label="Inference latency"
+              processing-unit="ms"
+              :processing-max="processingMaxMs"
+              :rate-value="contextUpdateRatePerMinute"
+              :rate-max="expectedRateMax"
+              rate-label="Context updates"
+              rate-unit="/min"
+              :secondary-rate-value="captureRatePerMinute"
+              :secondary-rate-max="expectedRateMax"
+              secondary-rate-label="Capture rate"
+              secondary-rate-unit="/min"
+            />
+
+            <div :class="['rounded-xl', 'bg-neutral-100', 'p-4', 'dark:bg-[rgba(0,0,0,0.3)]']">
+              <div :class="['flex', 'items-center', 'justify-between', 'text-xs', 'uppercase', 'tracking-wide', 'text-neutral-400']">
+                <span>Snapshot</span>
+                <span>{{ captureCount }} captures · {{ contextUpdateCount }} context updates</span>
+              </div>
+              <div
+                v-if="screenshotDataUrl"
+                :class="['mt-3', 'flex', 'flex-col', 'gap-3']"
+              >
+                <img :src="screenshotDataUrl" alt="Captured screen" :class="['w-full', 'rounded-lg', 'object-contain']">
+                <textarea
+                  :value="screenshotDataUrl"
+                  readonly
+                  :class="[
+                    'h-32',
+                    'w-full',
+                    'rounded-lg',
+                    'border',
+                    'border-neutral-200',
+                    'bg-white',
+                    'p-2',
+                    'text-xs',
+                    'text-neutral-700',
+                    'dark:border-neutral-800',
+                    'dark:bg-neutral-900',
+                    'dark:text-neutral-200',
+                  ]"
+                />
+              </div>
+              <div v-else :class="['mt-4', 'text-sm', 'text-neutral-400']">
+                No frames captured yet. Start the ticker to preview snapshots.
+              </div>
+            </div>
+
+            <div :class="['rounded-xl', 'bg-neutral-100', 'p-4', 'dark:bg-[rgba(0,0,0,0.3)]']">
+              <div :class="['flex', 'items-center', 'justify-between', 'text-xs', 'uppercase', 'tracking-wide', 'text-neutral-400']">
+                <span>Last interpretation</span>
+                <span>{{ lastResultAt ? new Date(lastResultAt).toLocaleTimeString() : 'Idle' }}</span>
+              </div>
+              <div :class="['mt-3', 'text-sm', 'text-neutral-600', 'dark:text-neutral-200', 'whitespace-pre-wrap']">
+                {{ lastResultText || 'No vision output yet.' }}
+              </div>
+              <div v-if="lastError" :class="['mt-3', 'text-xs', 'text-amber-500']">
+                {{ lastError }}
+              </div>
+            </div>
+
+            <div
+              v-if="errorMessage"
+              :class="[
+                'rounded-lg', 'bg-amber-100', 'p-3',
+                'text-sm', 'text-amber-700',
+                'dark:bg-amber-900/30', 'dark:text-amber-300',
+              ]"
+            >
+              {{ errorMessage }}
+            </div>
+          </div>
+        </div>
+
+        <video ref="videoRef" :class="['hidden']" />
+      </div>
+
+      <div
+        v-else
+        :class="[
+          'flex', 'h-full', 'flex-col', 'items-center', 'justify-center', 'gap-4', 'p-6',
+        ]"
+      >
+        <div>
+          Screen capture permissions are required to use vision capture.
+        </div>
+        <Button @click="requestPermission()">
+          Open system preferences
+        </Button>
+      </div>
+    </template>
+  </WithScreenCapture>
+</template>
+
+<route lang="yaml">
+meta:
+  layout: settings
+</route>
diff --git a/apps/stage-tamagotchi/src/renderer/pages/settings/system/developer.vue b/apps/stage-tamagotchi/src/renderer/pages/settings/system/developer.vue
index ccc4e9f1c..42231bacf 100644
--- a/apps/stage-tamagotchi/src/renderer/pages/settings/system/developer.vue
+++ b/apps/stage-tamagotchi/src/renderer/pages/settings/system/developer.vue
@@ -43,6 +43,12 @@ const menu = computed(() => [
     icon: 'i-solar:chat-square-call-bold-duotone',
     to: '/devtools/context-flow',
   },
+  {
+    title: 'Context Observer',
+    description: 'Track how active context entries merge over time',
+    icon: 'i-solar:chat-square-bold-duotone',
+    to: '/devtools/context-observer',
+  },
   {
     title: 'Relative Mouse',
     description: 'Get mouse position relative to the window',
@@ -79,6 +85,12 @@ const menu = computed(() => [
     icon: 'i-solar:screen-share-bold-duotone',
     to: '/devtools/screen-capture',
   },
+  {
+    title: 'Vision Capture',
+    description: 'Capture a screen frame and inspect the output payload',
+    icon: 'i-solar:eye-closed-bold-duotone',
+    to: '/devtools/vision',
+  },
 ])
 
 const openDevTools = useElectronEventaInvoke(electronOpenMainDevtools)
diff --git a/apps/stage-tamagotchi/src/shared/eventa.ts b/apps/stage-tamagotchi/src/shared/eventa.ts
index 3a3ea5ef5..8d2d7458b 100644
--- a/apps/stage-tamagotchi/src/shared/eventa.ts
+++ b/apps/stage-tamagotchi/src/shared/eventa.ts
@@ -266,3 +266,5 @@ export const i18nGetLocale = defineInvokeEventa<Locale>('eventa:invoke:electron:
 
 export { electron } from '@proj-airi/electron-eventa'
 export * from '@proj-airi/electron-eventa/electron-updater'
+
+export const modulesVisionPrepareScreenSourceSelection = defineInvokeEventa('eventa:invoke:modules:vision:prepare-screen-source-selection')
diff --git a/apps/stage-web/package.json b/apps/stage-web/package.json
index 2142f3f59..ded7a54e1 100644
--- a/apps/stage-web/package.json
+++ b/apps/stage-web/package.json
@@ -57,6 +57,7 @@
     "better-auth": "^1.4.19",
     "colorjs.io": "^0.6.1",
     "culori": "^4.0.2",
+    "d3": "catalog:",
     "date-fns": "^4.1.0",
     "dompurify": "^3.3.1",
     "driver.js": "^1.4.0",
diff --git a/apps/stage-web/src/pages/settings/system/developer.vue b/apps/stage-web/src/pages/settings/system/developer.vue
index 6a005213c..3e3cc4d1b 100644
--- a/apps/stage-web/src/pages/settings/system/developer.vue
+++ b/apps/stage-web/src/pages/settings/system/developer.vue
@@ -68,6 +68,12 @@ const menu = computed(() => [
     icon: 'i-solar:chat-square-call-bold-duotone',
     to: '/devtools/context-flow',
   },
+  {
+    title: 'Context Observer',
+    description: 'Track how active context entries merge over time',
+    icon: 'i-solar:chat-square-bold-duotone',
+    to: '/devtools/context-observer',
+  },
   {
     title: 'WebSocket Inspector',
     description: 'Inspect raw WebSocket traffic',
diff --git a/packages/stage-pages/package.json b/packages/stage-pages/package.json
index 2b0d61471..1230b7bac 100644
--- a/packages/stage-pages/package.json
+++ b/packages/stage-pages/package.json
@@ -38,6 +38,7 @@
     "@xsai/generate-speech": "catalog:",
     "@xsai/stream-transcription": "0.4.0-beta.8",
     "animejs": "^4.3.6",
+    "d3": "catalog:",
     "dompurify": "^3.3.1",
     "nanoid": "^5.1.6",
     "node-vibrant": "^4.0.4",
diff --git a/packages/stage-pages/src/pages/devtools/context-observer.vue b/packages/stage-pages/src/pages/devtools/context-observer.vue
new file mode 100644
index 000000000..32bc06aa4
--- /dev/null
+++ b/packages/stage-pages/src/pages/devtools/context-observer.vue
@@ -0,0 +1,645 @@
+<script setup lang="ts">
+import { ContextUpdateStrategy } from '@proj-airi/server-sdk'
+import { TimelineRange, TimeSeriesChart } from '@proj-airi/stage-ui/components'
+import { useChatContextStore } from '@proj-airi/stage-ui/stores/chat/context-store'
+import { Button, FieldCheckbox, FieldInput, FieldRange, FieldSelect } from '@proj-airi/ui'
+import { storeToRefs } from 'pinia'
+import { TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger } from 'reka-ui'
+import { computed, ref, watch } from 'vue'
+
+const chatContextStore = useChatContextStore()
+const { activeContexts, contextHistory } = storeToRefs(chatContextStore)
+
+const selectedSource = ref('all')
+const strategyFilter = ref<'all' | ContextUpdateStrategy>('all')
+const textFilter = ref('')
+const onlyWithText = ref(false)
+const maxHistoryEntries = ref(220)
+const followLatest = ref(true)
+const showMetadata = ref(false)
+const rangeSelection = ref<[number, number] | null>(null)
+
+const selectedEntryId = ref<string | null>(null)
+
+const sourceOptions = computed(() => {
+  const entries = Object.keys(activeContexts.value).sort()
+  return [
+    { label: 'All modules', value: 'all' },
+    ...entries.map(source => ({ label: source, value: source })),
+  ]
+})
+
+const strategyOptions = [
+  { label: 'All strategies', value: 'all' },
+  { label: 'Replace', value: ContextUpdateStrategy.ReplaceSelf },
+  { label: 'Append', value: ContextUpdateStrategy.AppendSelf },
+]
+
+const baseHistory = computed(() => {
+  const query = textFilter.value.trim().toLowerCase()
+
+  return contextHistory.value
+    .filter((entry) => {
+      if (selectedSource.value === 'all')
+        return true
+      return entry.sourceKey === selectedSource.value
+    })
+    .filter((entry) => {
+      if (strategyFilter.value === 'all')
+        return true
+      return entry.strategy === strategyFilter.value
+    })
+    .filter((entry) => {
+      if (!onlyWithText.value)
+        return true
+      return Boolean(entry.text?.trim())
+    })
+    .filter((entry) => {
+      if (!query)
+        return true
+      return [
+        entry.sourceKey,
+        entry.text,
+        entry.id,
+        entry.contextId,
+      ].filter(Boolean).join(' ').toLowerCase().includes(query)
+    })
+    .slice(-maxHistoryEntries.value)
+})
+
+const filteredHistory = computed(() => {
+  if (!rangeSelection.value)
+    return baseHistory.value
+
+  const [start, end] = rangeSelection.value
+  return baseHistory.value.filter((entry) => {
+    const timestamp = entry.createdAt ?? 0
+    return timestamp >= start && timestamp <= end
+  })
+})
+
+const rangeData = computed(() => baseHistory.value.map(entry => entry.createdAt ?? 0))
+
+const activeContextGroups = computed(() => {
+  const keys = selectedSource.value === 'all'
+    ? Object.keys(activeContexts.value)
+    : [selectedSource.value]
+
+  return keys
+    .sort()
+    .map((key) => {
+      const contexts = activeContexts.value[key] ?? []
+      const latest = contexts.at(-1)?.createdAt ?? 0
+      return {
+        key,
+        contexts,
+        latest,
+      }
+    })
+    .sort((a, b) => b.latest - a.latest)
+})
+
+const totalActiveContexts = computed(() => {
+  return Object.values(activeContexts.value).reduce((sum, contexts) => sum + contexts.length, 0)
+})
+
+const updateWindowMs = 60_000
+const updateBucketCount = 30
+const updateBucketMs = updateWindowMs / updateBucketCount
+
+const updateTimeline = computed(() => {
+  const now = Date.now()
+  const buckets = Array.from({ length: updateBucketCount }, () => 0)
+
+  for (const entry of filteredHistory.value) {
+    const ts = entry.createdAt || now
+    const offset = ts - (now - updateWindowMs)
+    if (offset < 0 || offset > updateWindowMs)
+      continue
+    const index = Math.min(updateBucketCount - 1, Math.max(0, Math.floor(offset / updateBucketMs)))
+    buckets[index] += 1
+  }
+
+  const peak = Math.max(1, ...buckets)
+  const normalized = buckets.map(value => value / peak)
+  return {
+    normalized,
+    currentValue: normalized[normalized.length - 1] ?? 0,
+    total: buckets.reduce((sum, value) => sum + value, 0),
+  }
+})
+
+const queueEntries = computed(() => filteredHistory.value.slice(-80))
+
+const selectedEntry = computed(() => {
+  if (!selectedEntryId.value)
+    return null
+  return filteredHistory.value.find(entry => entry.id === selectedEntryId.value) || null
+})
+
+const activeFilterSummary = computed(() => {
+  const filters = []
+  if (selectedSource.value !== 'all')
+    filters.push(`module:${selectedSource.value}`)
+  if (strategyFilter.value !== 'all')
+    filters.push(`strategy:${formatStrategy(strategyFilter.value)}`)
+  if (onlyWithText.value)
+    filters.push('text-only')
+  if (textFilter.value.trim())
+    filters.push(`query:${textFilter.value.trim()}`)
+  if (rangeSelection.value) {
+    const [start, end] = rangeSelection.value
+    filters.push(`${new Date(start).toLocaleTimeString()} → ${new Date(end).toLocaleTimeString()}`)
+  }
+  return filters.length ? filters.join(' · ') : 'All updates'
+})
+
+function formatStrategy(strategy: ContextUpdateStrategy) {
+  return strategy === ContextUpdateStrategy.AppendSelf ? 'Append' : 'Replace'
+}
+
+function formatTimestamp(timestamp: number) {
+  return new Date(timestamp).toLocaleTimeString()
+}
+
+function formatRelativeTime(timestamp: number | null | undefined) {
+  if (!timestamp)
+    return 'Never'
+  const diffMs = Date.now() - timestamp
+  const diffSeconds = Math.max(0, Math.floor(diffMs / 1000))
+  if (diffSeconds < 60)
+    return `${diffSeconds}s ago`
+  const diffMinutes = Math.floor(diffSeconds / 60)
+  if (diffMinutes < 60)
+    return `${diffMinutes}m ago`
+  const diffHours = Math.floor(diffMinutes / 60)
+  return `${diffHours}h ago`
+}
+
+function summarizeText(text: string, limit = 120) {
+  if (!text)
+    return 'No context text.'
+  if (text.length <= limit)
+    return text
+  return `${text.slice(0, limit)}…`
+}
+
+function queueDotClass(entry: { strategy: ContextUpdateStrategy }) {
+  if (entry.strategy === ContextUpdateStrategy.AppendSelf)
+    return 'bg-emerald-400/80'
+  return 'bg-amber-400/80'
+}
+
+function resetRange() {
+  rangeSelection.value = null
+}
+
+watch(() => filteredHistory.value.length, () => {
+  if (!followLatest.value)
+    return
+  const latest = filteredHistory.value.at(-1)
+  if (latest)
+    selectedEntryId.value = latest.id
+})
+
+watch([selectedSource, strategyFilter, textFilter, onlyWithText], () => {
+  if (!followLatest.value)
+    return
+  const latest = filteredHistory.value.at(-1)
+  if (latest)
+    selectedEntryId.value = latest.id
+})
+</script>
+
+<template>
+  <div :class="['flex', 'flex-col', 'gap-6']">
+    <div
+      :class="[
+        'rounded-2xl',
+        'bg-gradient-to-br',
+        'from-neutral-100',
+        'via-white',
+        'to-primary-100/50',
+        'p-5',
+        'shadow-sm',
+        'dark:from-neutral-900/80',
+        'dark:via-neutral-950',
+        'dark:to-primary-900/20',
+      ]"
+    >
+      <div :class="['flex', 'flex-col', 'gap-5', 'lg:flex-row', 'lg:items-center', 'lg:justify-between']">
+        <div :class="['flex', 'flex-col', 'gap-2']">
+          <div :class="['text-xs', 'uppercase', 'tracking-[0.25em]', 'text-neutral-400']">
+            Context Observatory
+          </div>
+          <div :class="['text-2xl', 'font-semibold', 'text-neutral-800', 'dark:text-neutral-100']">
+            Active contexts: {{ totalActiveContexts }}
+          </div>
+          <div :class="['text-sm', 'text-neutral-500', 'dark:text-neutral-400']">
+            {{ activeFilterSummary }}
+          </div>
+        </div>
+
+        <div :class="['grid', 'gap-3', 'md:grid-cols-2', 'xl:grid-cols-4']">
+          <FieldSelect
+            v-model="selectedSource"
+            label="Module"
+            :options="sourceOptions"
+          />
+          <FieldSelect
+            v-model="strategyFilter"
+            label="Strategy"
+            :options="strategyOptions"
+          />
+          <FieldInput
+            v-model="textFilter"
+            label="Search"
+            placeholder="Find by text / id"
+          />
+          <FieldRange
+            v-model="maxHistoryEntries"
+            label="Log depth"
+            :min="40"
+            :max="300"
+            :step="20"
+            :format-value="value => `${value} entries`"
+          />
+        </div>
+      </div>
+
+      <div :class="['mt-4', 'grid', 'gap-4', 'md:grid-cols-3']">
+        <FieldCheckbox
+          v-model="onlyWithText"
+          label="Text-only updates"
+          description="Hide empty or metadata-only updates."
+        />
+        <FieldCheckbox
+          v-model="followLatest"
+          label="Follow latest"
+          description="Auto-select newest update."
+        />
+        <FieldCheckbox
+          v-model="showMetadata"
+          label="Show metadata"
+          description="Display raw metadata in details."
+        />
+      </div>
+    </div>
+
+    <div :class="['grid', 'gap-6', 'xl:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)]']">
+      <div :class="['flex', 'flex-col', 'gap-6']">
+        <div
+          :class="[
+            'rounded-2xl',
+            'bg-neutral-100',
+            'p-4',
+            'shadow-sm',
+            'dark:bg-[rgba(0,0,0,0.35)]',
+          ]"
+        >
+          <div :class="['flex', 'items-center', 'justify-between']">
+            <div :class="['text-sm', 'uppercase', 'tracking-wide', 'text-neutral-400']">
+              Cadence
+            </div>
+            <div :class="['text-xs', 'text-neutral-400']">
+              {{ updateTimeline.total }} updates / min
+            </div>
+          </div>
+
+          <TimeSeriesChart
+            :is-active="false"
+            :history="updateTimeline.normalized"
+            :current-value="updateTimeline.currentValue"
+            :show-header="false"
+            :show-legend="false"
+            :show-current-value="false"
+            :show-area="true"
+            :show-active-indicator="false"
+            :height="96"
+            unit="/min"
+            :precision="0"
+          />
+
+          <div :class="['mt-4', 'flex', 'items-center', 'justify-between']">
+            <div :class="['text-sm', 'uppercase', 'tracking-wide', 'text-neutral-400']">
+              Timeline range
+            </div>
+            <Button
+              size="sm"
+              variant="secondary"
+              :disabled="!rangeSelection"
+              :label="rangeSelection ? 'Reset range' : 'Full range'"
+              @click="resetRange"
+            />
+          </div>
+
+          <TimelineRange
+            v-model:range="rangeSelection"
+            :data="rangeData"
+            :height="140"
+            :bins="48"
+          />
+        </div>
+
+        <div
+          :class="[
+            'rounded-2xl',
+            'bg-neutral-100',
+            'p-4',
+            'shadow-sm',
+            'dark:bg-[rgba(0,0,0,0.35)]',
+          ]"
+        >
+          <div :class="['flex', 'items-center', 'justify-between']">
+            <div :class="['text-sm', 'uppercase', 'tracking-wide', 'text-neutral-400']">
+              Active contexts
+            </div>
+            <div :class="['text-xs', 'text-neutral-400']">
+              {{ activeContextGroups.length }} modules
+            </div>
+          </div>
+
+          <div :class="['mt-3', 'grid', 'gap-3', 'lg:grid-cols-2']">
+            <div
+              v-for="group in activeContextGroups"
+              :key="group.key"
+              :class="[
+                'rounded-xl',
+                'border',
+                'border-neutral-200',
+                'bg-white',
+                'p-3',
+                'dark:border-neutral-800',
+                'dark:bg-neutral-900',
+              ]"
+            >
+              <div :class="['flex', 'items-center', 'justify-between', 'gap-2']">
+                <div :class="['text-sm', 'font-semibold', 'text-neutral-700', 'dark:text-neutral-200']">
+                  {{ group.key }}
+                </div>
+                <div :class="['text-xs', 'text-neutral-400']">
+                  {{ group.contexts.length }} contexts · {{ formatRelativeTime(group.latest) }}
+                </div>
+              </div>
+
+              <div v-if="group.contexts.length === 0" :class="['mt-2', 'text-xs', 'text-neutral-400']">
+                No active contexts.
+              </div>
+
+              <div v-else :class="['mt-3', 'max-h-60', 'space-y-3', 'overflow-y-auto', 'pr-1']">
+                <div
+                  v-for="context in group.contexts.slice().reverse()"
+                  :key="context.id"
+                  :class="[
+                    'rounded-lg',
+                    'border',
+                    'border-neutral-100',
+                    'bg-neutral-50',
+                    'p-3',
+                    'text-sm',
+                    'text-neutral-700',
+                    'dark:border-neutral-800/60',
+                    'dark:bg-neutral-950/60',
+                    'dark:text-neutral-200',
+                  ]"
+                >
+                  <div :class="['flex', 'items-center', 'justify-between', 'text-xs', 'text-neutral-400']">
+                    <span>{{ formatStrategy(context.strategy) }}</span>
+                    <span>{{ context.createdAt ? formatTimestamp(context.createdAt) : 'Unknown' }}</span>
+                  </div>
+                  <div :class="['mt-2', 'whitespace-pre-wrap', 'text-sm', 'text-neutral-600', 'dark:text-neutral-300']">
+                    {{ context.text || 'No context text.' }}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div
+              v-if="activeContextGroups.length === 0"
+              :class="[
+                'rounded-xl',
+                'border-2',
+                'border-dashed',
+                'border-neutral-200',
+                'px-4',
+                'py-10',
+                'text-sm',
+                'text-neutral-400',
+                'dark:border-neutral-800',
+              ]"
+            >
+              No active context modules yet.
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div :class="['flex', 'flex-col', 'gap-6']">
+        <div
+          :class="[
+            'rounded-2xl',
+            'bg-neutral-100',
+            'p-4',
+            'shadow-sm',
+            'dark:bg-[rgba(0,0,0,0.35)]',
+          ]"
+        >
+          <div :class="['flex', 'items-center', 'justify-between']">
+            <div :class="['text-sm', 'uppercase', 'tracking-wide', 'text-neutral-400']">
+              Selected update
+            </div>
+            <div :class="['text-xs', 'text-neutral-400']">
+              {{ selectedEntry ? formatTimestamp(selectedEntry.createdAt || Date.now()) : 'None' }}
+            </div>
+          </div>
+
+          <div v-if="selectedEntry" :class="['mt-3', 'space-y-3']">
+            <div :class="['flex', 'items-center', 'gap-2', 'text-xs', 'text-neutral-400']">
+              <span>{{ selectedEntry.sourceKey }}</span>
+              <span>·</span>
+              <span>{{ formatStrategy(selectedEntry.strategy) }}</span>
+              <span>·</span>
+              <span>{{ selectedEntry.contextId }}</span>
+            </div>
+            <div :class="['whitespace-pre-wrap', 'rounded-lg', 'bg-white', 'p-3', 'text-sm', 'text-neutral-700', 'dark:bg-neutral-900', 'dark:text-neutral-200']">
+              {{ selectedEntry.text || 'No context text.' }}
+            </div>
+
+            <pre
+              v-if="showMetadata"
+              :class="[
+                'rounded-lg',
+                'bg-neutral-900',
+                'p-3',
+                'text-xs',
+                'text-neutral-100',
+                'overflow-auto',
+              ]"
+            >
+{{ JSON.stringify(selectedEntry.metadata ?? {}, null, 2) }}
+            </pre>
+          </div>
+
+          <div v-else :class="['mt-3', 'text-sm', 'text-neutral-400']">
+            Pick a queue dot or stream block to inspect.
+          </div>
+        </div>
+
+        <div
+          :class="[
+            'rounded-2xl',
+            'bg-neutral-100',
+            'p-4',
+            'shadow-sm',
+            'dark:bg-[rgba(0,0,0,0.35)]',
+          ]"
+        >
+          <div :class="['flex', 'items-center', 'justify-between']">
+            <div :class="['text-sm', 'uppercase', 'tracking-wide', 'text-neutral-400']">
+              Stream blocks
+            </div>
+            <div :class="['text-xs', 'text-neutral-400']">
+              {{ queueEntries.length }} recent updates
+            </div>
+          </div>
+
+          <div :class="['mt-4', 'grid', 'grid-cols-6', 'gap-2', 'sm:grid-cols-8']">
+            <TooltipProvider v-for="entry in queueEntries" :key="entry.id" :delay-duration="120">
+              <TooltipRoot>
+                <TooltipTrigger as-child>
+                  <button
+                    type="button"
+                    :class="[
+                      'h-9',
+                      'w-9',
+                      'rounded-lg',
+                      'border',
+                      'border-neutral-200',
+                      'bg-white',
+                      'transition',
+                      'duration-150',
+                      'dark:border-neutral-800',
+                      'dark:bg-neutral-900',
+                      selectedEntryId === entry.id ? 'ring-2 ring-primary-500/70' : 'hover:border-neutral-300',
+                    ]"
+                    @click="selectedEntryId = entry.id"
+                  >
+                    <span :class="['block', 'h-full', 'w-full', 'rounded-lg', queueDotClass(entry)]" />
+                  </button>
+                </TooltipTrigger>
+                <TooltipPortal>
+                  <TooltipContent
+                    :class="[
+                      'rounded-md',
+                      'bg-white',
+                      'px-2',
+                      'py-1',
+                      'text-xs',
+                      'text-neutral-700',
+                      'shadow-md',
+                      'dark:bg-neutral-900',
+                      'dark:text-neutral-200',
+                    ]"
+                  >
+                    <div>{{ entry.sourceKey }} · {{ formatStrategy(entry.strategy) }}</div>
+                    <div>{{ entry.createdAt ? formatTimestamp(entry.createdAt) : 'Unknown' }}</div>
+                    <div>{{ summarizeText(entry.text, 80) }}</div>
+                    <TooltipArrow :class="['fill-white', 'dark:fill-neutral-900']" />
+                  </TooltipContent>
+                </TooltipPortal>
+              </TooltipRoot>
+            </TooltipProvider>
+          </div>
+
+          <div :class="['mt-4', 'flex', 'flex-col', 'gap-2']">
+            <button
+              v-for="entry in filteredHistory.slice().reverse().slice(0, 12)"
+              :key="entry.id"
+              type="button"
+              :class="[
+                'flex',
+                'items-start',
+                'justify-between',
+                'gap-3',
+                'rounded-xl',
+                'border',
+                'border-neutral-200',
+                'bg-white',
+                'p-3',
+                'text-left',
+                'transition',
+                'duration-150',
+                selectedEntryId === entry.id ? 'border-primary-400/70 shadow-sm' : 'hover:border-neutral-300',
+                'dark:border-neutral-800',
+                'dark:bg-neutral-900',
+                'dark:hover:border-neutral-700',
+              ]"
+              @click="selectedEntryId = entry.id"
+            >
+              <div :class="['flex', 'flex-col', 'gap-1']">
+                <div :class="['flex', 'items-center', 'gap-2']">
+                  <span :class="['h-2.5', 'w-2.5', 'rounded-full', queueDotClass(entry)]" />
+                  <span :class="['text-xs', 'uppercase', 'tracking-wide', 'text-neutral-400']">
+                    {{ entry.sourceKey }}
+                  </span>
+                  <span :class="['text-xs', 'text-neutral-400']">
+                    {{ formatStrategy(entry.strategy) }}
+                  </span>
+                </div>
+                <div :class="['text-sm', 'text-neutral-700', 'dark:text-neutral-200']">
+                  {{ summarizeText(entry.text, 120) }}
+                </div>
+              </div>
+
+              <TooltipProvider :delay-duration="150">
+                <TooltipRoot>
+                  <TooltipTrigger as-child>
+                    <div :class="['text-xs', 'text-neutral-400', 'cursor-help']">
+                      {{ entry.createdAt ? formatTimestamp(entry.createdAt) : 'Unknown' }}
+                    </div>
+                  </TooltipTrigger>
+                  <TooltipPortal>
+                    <TooltipContent
+                      :class="[
+                        'rounded-md',
+                        'bg-white',
+                        'px-2',
+                        'py-1',
+                        'text-xs',
+                        'text-neutral-700',
+                        'shadow-md',
+                        'dark:bg-neutral-900',
+                        'dark:text-neutral-200',
+                      ]"
+                    >
+                      {{ entry.createdAt ? new Date(entry.createdAt).toLocaleString() : 'Unknown timestamp' }}
+                      <TooltipArrow :class="['fill-white', 'dark:fill-neutral-900']" />
+                    </TooltipContent>
+                  </TooltipPortal>
+                </TooltipRoot>
+              </TooltipProvider>
+            </button>
+
+            <div
+              v-if="filteredHistory.length === 0"
+              :class="[
+                'rounded-xl',
+                'border-2',
+                'border-dashed',
+                'border-neutral-200',
+                'px-4',
+                'py-10',
+                'text-center',
+                'text-sm',
+                'text-neutral-400',
+                'dark:border-neutral-800',
+              ]"
+            >
+              No updates yet. Emit a context update to populate the stream.
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/stage-pages/src/pages/settings/modules/vision.vue b/packages/stage-pages/src/pages/settings/modules/vision.vue
index 277790453..8d9f70359 100644
--- a/packages/stage-pages/src/pages/settings/modules/vision.vue
+++ b/packages/stage-pages/src/pages/settings/modules/vision.vue
@@ -1,9 +1,387 @@
 <script setup lang="ts">
-import { WIP } from '@proj-airi/stage-ui/components'
+import { Alert, ErrorContainer, RadioCardManySelect, RadioCardSimple } from '@proj-airi/stage-ui/components'
+import { useAnalytics } from '@proj-airi/stage-ui/composables'
+import { useVisionProcessingStore, useVisionStore } from '@proj-airi/stage-ui/stores/modules/vision'
+import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
+import { FieldRange } from '@proj-airi/ui'
+import { storeToRefs } from 'pinia'
+import { computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { RouterLink } from 'vue-router'
+
+const providersStore = useProvidersStore()
+const visionStore = useVisionStore()
+const visionProcessingStore = useVisionProcessingStore()
+const { persistedChatProvidersMetadata, configuredProviders } = storeToRefs(providersStore)
+const {
+  activeProvider,
+  activeModel,
+  customModelName,
+  modelSearchQuery,
+  supportsModelListing,
+  providerModels,
+  isLoadingActiveProviderModels,
+  activeProviderModelError,
+} = storeToRefs(visionStore)
+const {
+  captureIntervalMs,
+  captureCount,
+  contextUpdateCount,
+  lastCaptureAt,
+  lastContextUpdateAt,
+  isRunning,
+} = storeToRefs(visionProcessingStore)
+
+const { t } = useI18n()
+const { trackProviderClick } = useAnalytics()
+
+watch(activeProvider, async (provider) => {
+  if (!provider)
+    return
+  await visionStore.loadModelsForProvider(provider)
+}, { immediate: true })
+
+function updateCustomModelName(value: string) {
+  customModelName.value = value
+}
+
+function handleDeleteProvider(providerId: string) {
+  if (activeProvider.value === providerId) {
+    activeProvider.value = ''
+    activeModel.value = ''
+  }
+  providersStore.deleteProvider(providerId)
+}
+
+const formattedLastCapture = computed(() => formatRelativeTime(lastCaptureAt.value))
+const formattedLastContextUpdate = computed(() => formatRelativeTime(lastContextUpdateAt.value))
+
+function formatRelativeTime(timestamp: number | null) {
+  if (!timestamp)
+    return 'Never'
+
+  const diffMs = Date.now() - timestamp
+  const diffSeconds = Math.max(0, Math.floor(diffMs / 1000))
+  if (diffSeconds < 60)
+    return `${diffSeconds}s ago`
+  const diffMinutes = Math.floor(diffSeconds / 60)
+  if (diffMinutes < 60)
+    return `${diffMinutes}m ago`
+  const diffHours = Math.floor(diffMinutes / 60)
+  return `${diffHours}h ago`
+}
 </script>
 
 <template>
-  <WIP />
+  <div :class="['flex', 'flex-col', 'gap-6']">
+    <div :class="['rounded-xl', 'bg-neutral-50', 'p-4', 'dark:bg-[rgba(0,0,0,0.3)]']">
+      <div :class="['flex', 'flex-col', 'gap-4']">
+        <div>
+          <h2 :class="['text-lg', 'text-neutral-500', 'md:text-2xl', 'dark:text-neutral-500']">
+            {{ t('settings.pages.providers.title') }}
+          </h2>
+          <div :class="['text-neutral-400', 'dark:text-neutral-400']">
+            <span>{{ t('settings.pages.modules.consciousness.sections.section.provider-model-selection.description') }}</span>
+          </div>
+        </div>
+        <div :class="['max-w-full']">
+          <fieldset
+            v-if="persistedChatProvidersMetadata.length > 0"
+            :class="['flex', 'min-w-0', 'flex-row', 'gap-4', 'of-x-scroll', 'scroll-smooth']"
+            :style="{ 'scrollbar-width': 'none' }"
+            role="radiogroup"
+          >
+            <RadioCardSimple
+              v-for="metadata in persistedChatProvidersMetadata"
+              :id="metadata.id"
+              :key="metadata.id"
+              v-model="activeProvider"
+              name="provider"
+              :value="metadata.id"
+              :title="metadata.localizedName || 'Unknown'"
+              :description="metadata.localizedDescription"
+              @click="trackProviderClick(metadata.id, 'vision')"
+            >
+              <template #topRight>
+                <button
+                  type="button"
+                  :class="[
+                    'rounded',
+                    'bg-neutral-100',
+                    'p-1',
+                    'text-neutral-600',
+                    'transition-colors',
+                    'hover:bg-neutral-200',
+                    'dark:bg-neutral-800/60',
+                    'dark:text-neutral-300',
+                    'dark:hover:bg-neutral-700/60',
+                  ]"
+                  @click.stop.prevent="handleDeleteProvider(metadata.id)"
+                >
+                  <div :class="['text-base', 'i-solar:trash-bin-trash-bold-duotone']" />
+                </button>
+              </template>
+
+              <template v-if="configuredProviders[metadata.id] === false" #bottomRight>
+                <div
+                  :class="[
+                    'rounded',
+                    'bg-amber-100',
+                    'px-2',
+                    'py-0.5',
+                    'text-xs',
+                    'font-medium',
+                    'text-amber-700',
+                    'dark:bg-amber-900/30',
+                    'dark:text-amber-300',
+                  ]"
+                >
+                  {{ t('settings.pages.modules.consciousness.sections.section.provider-model-selection.health_check_failed') }}
+                </div>
+              </template>
+            </RadioCardSimple>
+            <RouterLink
+              to="/settings/providers"
+              :class="[
+                'relative',
+                'min-w-50',
+                'w-fit',
+                'rounded-xl',
+                'border-2',
+                'border-neutral-100',
+                'bg-white',
+                'p-4',
+                'transition',
+                'duration-200',
+                'ease-in-out',
+                'hover:border-primary-500/30',
+                'dark:border-neutral-900',
+                'dark:bg-neutral-900/20',
+                'dark:hover:border-primary-400/30',
+                'flex',
+                'items-center',
+                'justify-center',
+              ]"
+            >
+              <div :class="['text-2xl', 'text-neutral-500', 'dark:text-neutral-500', 'i-solar:add-circle-line-duotone']" />
+              <div
+                :class="['absolute', 'inset-0', 'z--1', 'bg-dotted-neutral-200/80', 'dark:bg-dotted-neutral-700/50']"
+                :style="{ 'background-size': '10px 10px', 'mask-image': 'linear-gradient(165deg, white 30%, transparent 50%)' }"
+              />
+            </RouterLink>
+          </fieldset>
+          <div v-else>
+            <RouterLink
+              to="/settings/providers"
+              :class="[
+                'flex',
+                'items-center',
+                'gap-3',
+                'rounded-lg',
+                'border-2',
+                'border-dashed',
+                'border-neutral-200',
+                'bg-neutral-50',
+                'p-4',
+                'transition',
+                'duration-200',
+                'ease-in-out',
+                'dark:border-neutral-800',
+                'dark:bg-neutral-800',
+              ]"
+            >
+              <div :class="['text-2xl', 'text-amber-500', 'dark:text-amber-400', 'i-solar:warning-circle-line-duotone']" />
+              <div :class="['flex', 'flex-col']">
+                <span :class="['font-medium']">
+                  {{ t('settings.pages.modules.consciousness.sections.section.provider-model-selection.no_providers_configured_title') }}
+                </span>
+                <span :class="['text-sm', 'text-neutral-400', 'dark:text-neutral-500']">
+                  {{ t('settings.pages.modules.consciousness.sections.section.provider-model-selection.no_providers_configured_description') }}
+                </span>
+              </div>
+              <div :class="['ml-auto', 'text-xl', 'text-neutral-400', 'dark:text-neutral-500', 'i-solar:arrow-right-line-duotone']" />
+            </RouterLink>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="activeProvider && supportsModelListing" :class="['rounded-xl', 'bg-neutral-50', 'p-4', 'dark:bg-[rgba(0,0,0,0.3)]']">
+      <div :class="['flex', 'flex-col', 'gap-4']">
+        <div>
+          <h2 :class="['text-lg', 'md:text-2xl']">
+            {{ t('settings.pages.modules.consciousness.sections.section.provider-model-selection.title') }}
+          </h2>
+          <div :class="['text-neutral-400', 'dark:text-neutral-400']">
+            <span>{{ t('settings.pages.modules.consciousness.sections.section.provider-model-selection.subtitle') }}</span>
+          </div>
+        </div>
+
+        <div v-if="isLoadingActiveProviderModels" :class="['flex', 'items-center', 'justify-center', 'py-4']">
+          <div :class="['mr-2', 'animate-spin']">
+            <div :class="['text-xl', 'i-solar:spinner-line-duotone']" />
+          </div>
+          <span>{{ t('settings.pages.modules.consciousness.sections.section.provider-model-selection.loading') }}</span>
+        </div>
+
+        <ErrorContainer
+          v-else-if="activeProviderModelError"
+          :title="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.error')"
+          :error="activeProviderModelError"
+        />
+
+        <Alert
+          v-else-if="providerModels.length === 0 && !isLoadingActiveProviderModels"
+          type="warning"
+        >
+          <template #title>
+            {{ t('settings.pages.modules.consciousness.sections.section.provider-model-selection.no_models') }}
+          </template>
+          <template #content>
+            {{ t('settings.pages.modules.consciousness.sections.section.provider-model-selection.no_models_description') }}
+          </template>
+        </Alert>
+
+        <template v-else-if="providerModels.length > 0">
+          <RadioCardManySelect
+            v-model="activeModel"
+            v-model:search-query="modelSearchQuery"
+            :items="providerModels.sort((a, b) => a.id === activeModel ? -1 : b.id === activeModel ? 1 : 0)"
+            :searchable="true"
+            :search-placeholder="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.search_placeholder')"
+            :search-no-results-title="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.no_search_results')"
+            :search-no-results-description="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.no_search_results_description', { query: modelSearchQuery })"
+            :search-results-text="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.search_results', { count: '{count}', total: '{total}' })"
+            :custom-input-placeholder="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.custom_model_placeholder')"
+            :expand-button-text="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.expand')"
+            :collapse-button-text="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.collapse')"
+            @update:custom-value="updateCustomModelName"
+          />
+        </template>
+      </div>
+    </div>
+
+    <div v-else-if="activeProvider && !supportsModelListing" :class="['rounded-xl', 'bg-neutral-50', 'p-4', 'dark:bg-[rgba(0,0,0,0.3)]']">
+      <div :class="['flex', 'flex-col', 'gap-4']">
+        <div>
+          <h2 :class="['text-lg', 'text-neutral-500', 'md:text-2xl', 'dark:text-neutral-400']">
+            {{ t('settings.pages.modules.consciousness.sections.section.provider-model-selection.title') }}
+          </h2>
+          <div :class="['text-neutral-400', 'dark:text-neutral-500']">
+            <span>{{ t('settings.pages.modules.consciousness.sections.section.provider-model-selection.subtitle') }}</span>
+          </div>
+        </div>
+
+        <div
+          :class="[
+            'flex',
+            'items-center',
+            'gap-3',
+            'rounded-lg',
+            'border',
+            'border-primary-200',
+            'bg-primary-50',
+            'p-4',
+            'dark:border-primary-800',
+            'dark:bg-primary-900/20',
+          ]"
+        >
+          <div :class="['text-2xl', 'text-primary-500', 'dark:text-primary-400', 'i-solar:info-circle-line-duotone']" />
+          <div :class="['flex', 'flex-col']">
+            <span :class="['font-medium']">
+              {{ t('settings.pages.modules.consciousness.sections.section.provider-model-selection.not_supported') }}
+            </span>
+            <span :class="['text-sm', 'text-primary-600', 'dark:text-primary-400']">
+              {{ t('settings.pages.modules.consciousness.sections.section.provider-model-selection.not_supported_description') }}
+            </span>
+          </div>
+        </div>
+
+        <div :class="['mt-2']">
+          <label :class="['mb-1', 'block', 'text-sm', 'font-medium']">
+            {{ t('settings.pages.modules.consciousness.sections.section.provider-model-selection.manual_model_name') }}
+          </label>
+          <input
+            v-model="activeModel"
+            type="text"
+            :class="[
+              'w-full',
+              'rounded',
+              'border',
+              'border-neutral-300',
+              'bg-white',
+              'px-3',
+              'py-2',
+              'dark:border-neutral-700',
+              'dark:bg-neutral-900',
+            ]"
+            :placeholder="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.manual_model_placeholder')"
+          >
+        </div>
+      </div>
+    </div>
+
+    <div :class="['rounded-xl', 'bg-neutral-50', 'p-4', 'dark:bg-[rgba(0,0,0,0.3)]']">
+      <div :class="['flex', 'flex-col', 'gap-4']">
+        <div>
+          <h2 :class="['text-lg', 'text-neutral-500', 'md:text-2xl', 'dark:text-neutral-400']">
+            Vision capture cadence
+          </h2>
+          <div :class="['text-neutral-400', 'dark:text-neutral-400']">
+            Tune how frequently the vision ticker captures a frame.
+          </div>
+        </div>
+
+        <FieldRange
+          v-model="captureIntervalMs"
+          label="Capture interval"
+          description="Lower values capture more frequently and may increase resource use."
+          :min="500"
+          :max="15000"
+          :step="250"
+          :format-value="value => `${(value / 1000).toFixed(2)}s`"
+        />
+
+        <div :class="['grid', 'gap-4', 'md:grid-cols-3']">
+          <div :class="['rounded-lg', 'border', 'border-neutral-200', 'bg-white', 'p-3', 'dark:border-neutral-800', 'dark:bg-neutral-900']">
+            <div :class="['text-xs', 'uppercase', 'tracking-wide', 'text-neutral-400']">
+              Ticker
+            </div>
+            <div :class="['text-sm', 'font-medium', 'text-neutral-600', 'dark:text-neutral-200']">
+              {{ isRunning ? 'Active' : 'Idle' }}
+            </div>
+            <div :class="['text-xs', 'text-neutral-400']">
+              Last capture {{ formattedLastCapture }}
+            </div>
+          </div>
+
+          <div :class="['rounded-lg', 'border', 'border-neutral-200', 'bg-white', 'p-3', 'dark:border-neutral-800', 'dark:bg-neutral-900']">
+            <div :class="['text-xs', 'uppercase', 'tracking-wide', 'text-neutral-400']">
+              Captures
+            </div>
+            <div :class="['text-sm', 'font-medium', 'text-neutral-600', 'dark:text-neutral-200']">
+              {{ captureCount }}
+            </div>
+            <div :class="['text-xs', 'text-neutral-400']">
+              Last update {{ formattedLastCapture }}
+            </div>
+          </div>
+
+          <div :class="['rounded-lg', 'border', 'border-neutral-200', 'bg-white', 'p-3', 'dark:border-neutral-800', 'dark:bg-neutral-900']">
+            <div :class="['text-xs', 'uppercase', 'tracking-wide', 'text-neutral-400']">
+              Context updates
+            </div>
+            <div :class="['text-sm', 'font-medium', 'text-neutral-600', 'dark:text-neutral-200']">
+              {{ contextUpdateCount }}
+            </div>
+            <div :class="['text-xs', 'text-neutral-400']">
+              Last update {{ formattedLastContextUpdate }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <route lang="yaml">
@@ -13,5 +391,4 @@ meta:
   subtitleKey: settings.title
   stageTransition:
     name: slide
-    pageSpecificAvailable: true
 </route>
diff --git a/packages/stage-pages/src/pages/settings/providers/index.vue b/packages/stage-pages/src/pages/settings/providers/index.vue
index 3360b7008..fc9113a0a 100644
--- a/packages/stage-pages/src/pages/settings/providers/index.vue
+++ b/packages/stage-pages/src/pages/settings/providers/index.vue
@@ -67,7 +67,7 @@ useScrollToHash(() => route.hash, {
 </script>
 
 <template>
-  <div mb-6 flex flex-col gap-5>
+  <div :class="['mb-6', 'flex', 'flex-col', 'gap-5', 'pb-10']">
     <div bg="primary-500/10 dark:primary-800/25" rounded-lg p-4>
       <div mb-2 text-xl font-normal text="primary-800 dark:primary-100">
         {{ $t('settings.pages.providers.helpinfo.title') }}
diff --git a/packages/stage-ui/package.json b/packages/stage-ui/package.json
index 5c4f8c065..a4b1c0b46 100644
--- a/packages/stage-ui/package.json
+++ b/packages/stage-ui/package.json
@@ -30,6 +30,7 @@
     "./stores/analytics": "./src/stores/analytics/index.ts",
     "./stores/character": "./src/stores/character/index.ts",
     "./stores/settings": "./src/stores/settings/index.ts",
+    "./stores/modules/vision": "./src/stores/modules/vision/index.ts",
     "./stores/*": "./src/stores/*.ts",
     "./stores": "./src/stores/index.ts",
     "./workers/vad": "./src/workers/vad/index.ts",
@@ -93,6 +94,7 @@
     "animejs": "^4.3.6",
     "better-auth": "catalog:",
     "culori": "^4.0.2",
+    "d3": "catalog:",
     "date-fns": "^4.1.0",
     "dompurify": "^3.3.1",
     "es-toolkit": "catalog:",
@@ -160,6 +162,7 @@
     "@proj-airi/vite-plugin-warpdrive": "workspace:*",
     "@types/audioworklet": "catalog:",
     "@types/culori": "^4.0.1",
+    "@types/d3": "catalog:",
     "@types/hast": "catalog:",
     "@types/splitpanes": "catalog:",
     "@types/unist": "catalog:",
diff --git a/packages/stage-ui/src/components/gadgets/index.ts b/packages/stage-ui/src/components/gadgets/index.ts
index d8ef99835..b1e489596 100644
--- a/packages/stage-ui/src/components/gadgets/index.ts
+++ b/packages/stage-ui/src/components/gadgets/index.ts
@@ -1,6 +1,8 @@
 export { default as AudioSpectrumVisualizer } from './audio-spectrum-visualizer.vue'
 export { default as AudioSpectrum } from './audio-spectrum.vue'
 export { default as LevelMeter } from './level-meter.vue'
+export { default as ProcessingMeter } from './processing-meter.vue'
 export { default as TestDummyMarker } from './test-dummy-marker.vue'
 export { default as ThresholdMeter } from './threshold-meter.vue'
 export { default as TimeSeriesChart } from './time-series-chart.vue'
+export { default as TimelineRange } from './timeline-range.vue'
diff --git a/packages/stage-ui/src/components/gadgets/processing-meter.story.vue b/packages/stage-ui/src/components/gadgets/processing-meter.story.vue
new file mode 100644
index 000000000..d3138920d
--- /dev/null
+++ b/packages/stage-ui/src/components/gadgets/processing-meter.story.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+
+import ProcessingMeter from './processing-meter.vue'
+
+const processingHistory = ref<number[]>([])
+const processingValue = ref(0)
+const contextUpdatesPerMinute = ref(12)
+const captureRatePerMinute = ref(20)
+
+let animationFrame: number | null = null
+
+function pushHistory(value: number) {
+  processingHistory.value = [...processingHistory.value, value].slice(-200)
+}
+
+function animate() {
+  const base = 140 + Math.sin(Date.now() / 900) * 40
+  const jitter = (Math.random() - 0.5) * 30
+  processingValue.value = Math.max(40, base + jitter)
+  pushHistory(processingValue.value)
+
+  contextUpdatesPerMinute.value = Math.max(0, Math.min(60, contextUpdatesPerMinute.value + (Math.random() - 0.5) * 6))
+  captureRatePerMinute.value = Math.max(0, Math.min(60, captureRatePerMinute.value + (Math.random() - 0.5) * 8))
+
+  animationFrame = requestAnimationFrame(animate)
+}
+
+onMounted(() => {
+  for (let i = 0; i < 20; i += 1)
+    pushHistory(120 + Math.random() * 50)
+  animate()
+})
+
+onUnmounted(() => {
+  if (animationFrame)
+    cancelAnimationFrame(animationFrame)
+})
+</script>
+
+<template>
+  <Story title="Processing Meter" group="gadgets">
+    <Variant id="vision-processing" title="Vision Processing">
+      <div :class="['p-4', 'max-w-3xl']">
+        <ProcessingMeter
+          title="Vision ticker"
+          :processing-history="processingHistory"
+          :processing-value="processingValue"
+          processing-label="Inference latency"
+          processing-unit="ms"
+          :rate-value="Math.round(contextUpdatesPerMinute)"
+          :rate-max="60"
+          rate-label="Context updates"
+          rate-unit="/min"
+          :secondary-rate-value="Math.round(captureRatePerMinute)"
+          :secondary-rate-max="60"
+          secondary-rate-label="Capture rate"
+          secondary-rate-unit="/min"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/stage-ui/src/components/gadgets/processing-meter.vue b/packages/stage-ui/src/components/gadgets/processing-meter.vue
new file mode 100644
index 000000000..3696afa0e
--- /dev/null
+++ b/packages/stage-ui/src/components/gadgets/processing-meter.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import LevelMeter from './level-meter.vue'
+import TimeSeriesChart from './time-series-chart.vue'
+
+interface Props {
+  title?: string
+  processingHistory: Readonly<number[]>
+  processingValue?: number | null
+  processingUnit?: string
+  processingLabel?: string
+  processingMax?: number
+  rateValue?: number
+  rateMax?: number
+  rateLabel?: string
+  rateUnit?: string
+  secondaryRateValue?: number
+  secondaryRateMax?: number
+  secondaryRateLabel?: string
+  secondaryRateUnit?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: 'Processing',
+  processingValue: null,
+  processingUnit: 'ms',
+  processingLabel: 'Inference latency',
+  processingMax: 0,
+  rateValue: 0,
+  rateMax: 60,
+  rateLabel: 'Context updates',
+  rateUnit: '/min',
+  secondaryRateValue: undefined,
+  secondaryRateMax: 60,
+  secondaryRateLabel: 'Capture rate',
+  secondaryRateUnit: '/min',
+})
+
+const resolvedProcessingMax = computed(() => {
+  const historyMax = props.processingHistory.length > 0
+    ? Math.max(...props.processingHistory)
+    : 0
+  return Math.max(1, props.processingMax || 0, historyMax)
+})
+
+const processingValueResolved = computed(() => {
+  if (props.processingValue !== null && props.processingValue !== undefined)
+    return props.processingValue
+  return props.processingHistory.at(-1) ?? 0
+})
+
+const normalizedProcessingHistory = computed(() => {
+  const maxValue = resolvedProcessingMax.value
+  return props.processingHistory.map(value => Math.min(1, value / maxValue))
+})
+
+const normalizedProcessingValue = computed(() => {
+  return Math.min(1, processingValueResolved.value / resolvedProcessingMax.value)
+})
+
+const formattedProcessingValue = computed(() => {
+  return `${processingValueResolved.value.toFixed(0)}${props.processingUnit}`
+})
+</script>
+
+<template>
+  <div :class="['flex', 'flex-col', 'gap-4', 'rounded-2xl', 'bg-white/70', 'p-4', 'shadow-sm', 'dark:bg-neutral-900/50']">
+    <div :class="['flex', 'items-center', 'justify-between']">
+      <div :class="['flex', 'flex-col', 'gap-1']">
+        <div :class="['text-xs', 'uppercase', 'tracking-wide', 'text-neutral-400']">
+          {{ title }}
+        </div>
+        <div :class="['text-base', 'font-semibold', 'text-neutral-700', 'dark:text-neutral-200']">
+          {{ processingLabel }}
+        </div>
+      </div>
+      <div :class="['text-sm', 'text-neutral-500', 'dark:text-neutral-400']">
+        {{ formattedProcessingValue }}
+      </div>
+    </div>
+
+    <TimeSeriesChart
+      :is-active="false"
+      :history="normalizedProcessingHistory"
+      :current-value="normalizedProcessingValue"
+      :show-legend="false"
+      :show-header="false"
+      :show-area="true"
+      :show-active-indicator="false"
+      :show-current-value="false"
+      :height="72"
+      :precision="0"
+      :unit="processingUnit"
+    />
+
+    <div :class="['grid', 'gap-4', 'md:grid-cols-2']">
+      <LevelMeter
+        :level="rateValue"
+        :min="0"
+        :max="rateMax"
+        :label="rateLabel"
+        :unit="rateUnit"
+      />
+
+      <LevelMeter
+        v-if="secondaryRateValue !== undefined"
+        :level="secondaryRateValue"
+        :min="0"
+        :max="secondaryRateMax"
+        :label="secondaryRateLabel"
+        :unit="secondaryRateUnit"
+      />
+    </div>
+  </div>
+</template>
diff --git a/packages/stage-ui/src/components/gadgets/timeline-range.story.vue b/packages/stage-ui/src/components/gadgets/timeline-range.story.vue
new file mode 100644
index 000000000..a44766b30
--- /dev/null
+++ b/packages/stage-ui/src/components/gadgets/timeline-range.story.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+
+import TimelineRange from './timeline-range.vue'
+
+const data = ref<number[]>([])
+const range = ref<[number, number] | null>(null)
+
+let intervalId: ReturnType<typeof setInterval> | null = null
+
+function seedData() {
+  const now = Date.now()
+  data.value = Array.from({ length: 120 }, (_, index) => now - (120 - index) * 1000)
+}
+
+onMounted(() => {
+  seedData()
+  intervalId = setInterval(() => {
+    data.value = [...data.value.slice(-200), Date.now()]
+  }, 1000)
+})
+
+onUnmounted(() => {
+  if (intervalId)
+    clearInterval(intervalId)
+})
+</script>
+
+<template>
+  <Story title="Timeline Range" group="gadgets">
+    <Variant id="basic" title="Basic">
+      <div :class="['p-4', 'max-w-3xl']">
+        <TimelineRange
+          v-model:range="range"
+          :data="data"
+          :height="140"
+          :bins="40"
+        />
+        <div :class="['mt-3', 'text-xs', 'text-neutral-400']">
+          {{ range ? `Range: ${new Date(range[0]).toLocaleTimeString()} - ${new Date(range[1]).toLocaleTimeString()}` : 'No range selected' }}
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/stage-ui/src/components/gadgets/timeline-range.vue b/packages/stage-ui/src/components/gadgets/timeline-range.vue
new file mode 100644
index 000000000..d8d7c868e
--- /dev/null
+++ b/packages/stage-ui/src/components/gadgets/timeline-range.vue
@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import { useElementBounding } from '@vueuse/core'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+import * as d3 from 'd3'
+
+interface Props {
+  data: number[]
+  height?: number
+  bins?: number
+  range?: [number, number] | null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  height: 120,
+  bins: 40,
+  range: null,
+})
+
+const emit = defineEmits<{
+  (event: 'update:range', value: [number, number] | null): void
+}>()
+
+const containerRef = ref<HTMLDivElement | null>(null)
+const { width } = useElementBounding(containerRef, { windowResize: true })
+
+let svg: d3.Selection<SVGSVGElement, unknown, null, undefined> | null = null
+let brushBehavior: d3.BrushBehavior<unknown> | null = null
+let xScale: d3.ScaleLinear<number, number> | null = null
+
+const sanitizedData = computed(() => props.data.filter(value => Number.isFinite(value)))
+
+function clearChart() {
+  if (!containerRef.value)
+    return
+  containerRef.value.innerHTML = ''
+  svg = null
+  brushBehavior = null
+  xScale = null
+}
+
+function drawChart() {
+  if (!containerRef.value)
+    return
+
+  const containerWidth = Math.max(0, Math.floor(width.value || 0))
+  if (containerWidth === 0)
+    return
+
+  clearChart()
+
+  const margin = {
+    top: 12,
+    right: 14,
+    bottom: 20,
+    left: 28,
+  }
+  const chartWidth = Math.max(0, containerWidth - margin.left - margin.right)
+  const chartHeight = Math.max(0, props.height - margin.top - margin.bottom)
+
+  const data = sanitizedData.value
+  if (data.length === 0) {
+    svg = d3.select(containerRef.value)
+      .append('svg')
+      .attr('width', containerWidth)
+      .attr('height', props.height)
+    return
+  }
+
+  const [minValueRaw, maxValueRaw] = d3.extent(data) as [number, number]
+  const minValue = Number.isFinite(minValueRaw) ? minValueRaw : 0
+  const maxValue = Number.isFinite(maxValueRaw) ? maxValueRaw : minValue + 1
+  const paddedMax = maxValue === minValue ? maxValue + 1 : maxValue
+
+  xScale = d3.scaleLinear()
+    .domain([minValue, paddedMax])
+    .range([0, chartWidth])
+
+  const bins = d3.bin()
+    .domain(xScale.domain() as [number, number])
+    .thresholds(props.bins)(data)
+
+  const yScale = d3.scaleLinear()
+    .domain([0, d3.max(bins, bin => bin.length) || 1])
+    .range([chartHeight, 0])
+
+  svg = d3.select(containerRef.value)
+    .append('svg')
+    .attr('width', containerWidth)
+    .attr('height', props.height)
+    .style('overflow', 'visible')
+
+  const chart = svg
+    .append('g')
+    .attr('transform', `translate(${margin.left},${margin.top})`)
+
+  chart
+    .append('g')
+    .attr('class', 'timeline-range-bars')
+    .selectAll('rect')
+    .data(bins)
+    .join('rect')
+    .attr('x', bin => xScale?.(bin.x0 ?? minValue) ?? 0)
+    .attr('y', bin => yScale(bin.length))
+    .attr('width', bin => Math.max(1, (xScale?.(bin.x1 ?? minValue) ?? 0) - (xScale?.(bin.x0 ?? minValue) ?? 0) - 1))
+    .attr('height', bin => chartHeight - yScale(bin.length))
+    .attr('rx', 2)
+    .attr('fill', 'rgba(66,72,83,0.85)')
+
+  const axis = d3.axisBottom(xScale).ticks(4).tickFormat((d) => {
+    if (typeof d === 'number')
+      return new Date(d).toLocaleTimeString()
+    return `${d}`
+  })
+
+  chart
+    .append('g')
+    .attr('class', 'timeline-range-axis')
+    .attr('transform', `translate(0,${chartHeight})`)
+    .call(axis)
+    .call(g => g.select('.domain').attr('opacity', 0.2))
+    .call(g => g.selectAll('text').attr('fill', '#9CA1AE'))
+    .call(g => g.selectAll('line').attr('opacity', 0.08))
+
+  brushBehavior = d3.brushX()
+    .extent([[0, 0], [chartWidth, chartHeight]])
+    .on('brush end', (event) => {
+      if (!xScale)
+        return
+      if (!event.selection) {
+        emit('update:range', null)
+        return
+      }
+      const [start, end] = event.selection as [number, number]
+      emit('update:range', [xScale.invert(start), xScale.invert(end)])
+    })
+
+  const brushGroup = chart
+    .append('g')
+    .attr('class', 'timeline-range-brush')
+    .call(brushBehavior)
+
+  brushGroup.selectAll('.selection')
+    .attr('fill', 'rgba(114,163,183,0.25)')
+    .attr('stroke', 'rgba(114,163,183,0.6)')
+
+  if (props.range) {
+    const [start, end] = props.range
+    brushGroup.call(brushBehavior.move, [xScale(start), xScale(end)])
+  }
+}
+
+onMounted(() => {
+  drawChart()
+})
+
+watch([width, sanitizedData, () => props.bins, () => props.height], () => {
+  drawChart()
+})
+
+watch(() => props.range, (nextRange) => {
+  if (!svg || !brushBehavior || !xScale)
+    return
+  const brushGroup = svg.select<SVGGElement>('g.timeline-range-brush')
+  if (!nextRange) {
+    brushGroup.call(brushBehavior.move, null)
+    return
+  }
+  brushGroup.call(brushBehavior.move, [xScale(nextRange[0]), xScale(nextRange[1])])
+})
+
+onBeforeUnmount(() => {
+  clearChart()
+})
+</script>
+
+<template>
+  <div ref="containerRef" :class="['w-full']" />
+</template>
diff --git a/packages/stage-ui/src/composables/index.ts b/packages/stage-ui/src/composables/index.ts
index f1058d681..c6d5d1133 100644
--- a/packages/stage-ui/src/composables/index.ts
+++ b/packages/stage-ui/src/composables/index.ts
@@ -10,4 +10,5 @@ export * from './use-chat-session/summary'
 export * from './use-optimistic'
 export * from './use-scroll-to-hash'
 export * from './use-versioned-local-storage'
+export * from './vision'
 export * from './whisper'
diff --git a/packages/stage-ui/src/composables/use-modules-list.ts b/packages/stage-ui/src/composables/use-modules-list.ts
index 45f192a15..169f8be46 100644
--- a/packages/stage-ui/src/composables/use-modules-list.ts
+++ b/packages/stage-ui/src/composables/use-modules-list.ts
@@ -13,6 +13,7 @@ import { useMinecraftStore } from '../stores/modules/gaming-minecraft'
 import { useHearingStore } from '../stores/modules/hearing'
 import { useSpeechStore } from '../stores/modules/speech'
 import { useTwitterStore } from '../stores/modules/twitter'
+import { useVisionStore } from '../stores/modules/vision'
 
 export interface Module {
   id: string
@@ -33,6 +34,7 @@ export function useModulesList() {
   const consciousnessStore = useConsciousnessStore()
   const speechStore = useSpeechStore()
   const hearingStore = useHearingStore()
+  const visionStore = useVisionStore()
   const discordStore = useDiscordStore()
   const twitterStore = useTwitterStore()
   const minecraftStore = useMinecraftStore()
@@ -73,7 +75,7 @@ export function useModulesList() {
       description: t('settings.pages.modules.vision.description'),
       icon: 'i-solar:eye-closed-bold-duotone',
       to: '/settings/modules/vision',
-      configured: false,
+      configured: visionStore.configured,
       category: 'essential',
     },
     {
diff --git a/packages/stage-ui/src/composables/vision/index.ts b/packages/stage-ui/src/composables/vision/index.ts
new file mode 100644
index 000000000..3cb5904e3
--- /dev/null
+++ b/packages/stage-ui/src/composables/vision/index.ts
@@ -0,0 +1,2 @@
+export * from './use-vision-inference'
+export * from './use-vision-workloads'
diff --git a/packages/stage-ui/src/composables/vision/use-vision-inference.ts b/packages/stage-ui/src/composables/vision/use-vision-inference.ts
new file mode 100644
index 000000000..d0ca770e4
--- /dev/null
+++ b/packages/stage-ui/src/composables/vision/use-vision-inference.ts
@@ -0,0 +1,82 @@
+import type { ChatProvider } from '@xsai-ext/providers/utils'
+import type { CommonContentPart, Message } from '@xsai/shared-chat'
+
+import type { VisionWorkloadId } from './use-vision-workloads'
+
+import { storeToRefs } from 'pinia'
+import { ref } from 'vue'
+
+import { useLLM } from '../../stores/llm'
+import { useVisionStore } from '../../stores/modules/vision'
+import { useProvidersStore } from '../../stores/providers'
+import { getVisionWorkload } from './use-vision-workloads'
+
+export interface VisionInferenceInput {
+  imageDataUrl: string
+  workloadId: VisionWorkloadId
+  promptOverride?: string
+}
+
+function parseDataUrl(dataUrl: string) {
+  if (!dataUrl.startsWith('data:'))
+    return { mimeType: 'image/png', base64: dataUrl, url: dataUrl }
+
+  const [, meta, data] = dataUrl.match(/^data:([^,]+),(.*)$/) || []
+  const mimeType = meta?.split(';')[0] || 'image/png'
+  const base64 = meta?.includes('base64') ? data : btoa(data)
+  return {
+    mimeType,
+    base64,
+    url: `data:${mimeType};base64,${base64}`,
+  }
+}
+
+export function useVisionInference() {
+  const llmStore = useLLM()
+  const providersStore = useProvidersStore()
+  const visionStore = useVisionStore()
+  const { activeProvider, activeModel } = storeToRefs(visionStore)
+
+  const lastText = ref('')
+
+  async function runVisionInference(input: VisionInferenceInput) {
+    if (!activeProvider.value || !activeModel.value)
+      throw new Error('Vision provider/model not configured')
+
+    const provider = await providersStore.getProviderInstance<ChatProvider>(activeProvider.value)
+    const workload = getVisionWorkload(input.workloadId)
+    const prompt = input.promptOverride ?? workload.prompt
+    const { url } = parseDataUrl(input.imageDataUrl)
+
+    const contentParts: CommonContentPart[] = [
+      { type: 'text', text: prompt },
+      {
+        type: 'image_url',
+        image_url: {
+          url,
+        },
+      },
+    ]
+
+    const messages: Message[] = [
+      { role: 'user', content: contentParts },
+    ]
+
+    let buffer = ''
+    await llmStore.stream(activeModel.value, provider, messages, {
+      onStreamEvent: (event) => {
+        if (event.type === 'text-delta') {
+          buffer += event.text
+        }
+      },
+    })
+
+    lastText.value = buffer.trim()
+    return lastText.value
+  }
+
+  return {
+    lastText,
+    runVisionInference,
+  }
+}
diff --git a/packages/stage-ui/src/composables/vision/use-vision-workloads.ts b/packages/stage-ui/src/composables/vision/use-vision-workloads.ts
new file mode 100644
index 000000000..68ab1b8f5
--- /dev/null
+++ b/packages/stage-ui/src/composables/vision/use-vision-workloads.ts
@@ -0,0 +1,55 @@
+export type VisionWorkloadId = 'screen:interpret' | 'screen:understand' | 'screen:ocr' | 'screen:ui-automation'
+
+export interface VisionWorkloadConfig {
+  id: VisionWorkloadId
+  label: string
+  description: string
+  prompt: string
+}
+
+export const VISION_WORKLOADS: VisionWorkloadConfig[] = [
+  {
+    id: 'screen:interpret',
+    label: 'Screen interpret',
+    description: 'Summarize what is on screen and relevant UI state.',
+    prompt: [
+      'You are an on-device vision assistant.',
+      'Interpret the current screen in a concise, structured summary:',
+      '- identify the active app or page',
+      '- list key UI elements and their states',
+      '- call out user intent or next likely action',
+      'Keep it factual and short, avoid speculation.',
+    ].join('\n'),
+  },
+  {
+    id: 'screen:understand',
+    label: 'Screen understanding',
+    description: 'Explain screen intent and key tasks.',
+    prompt: [
+      'Explain what the screen is for and what the user can do next.',
+      'Focus on primary actions, warnings, and notable state changes.',
+    ].join('\n'),
+  },
+  {
+    id: 'screen:ocr',
+    label: 'OCR focus',
+    description: 'Extract readable text from the screen.',
+    prompt: [
+      'Extract visible text from the screen.',
+      'Return plain text, preserve structure with line breaks when possible.',
+    ].join('\n'),
+  },
+  {
+    id: 'screen:ui-automation',
+    label: 'UI automation',
+    description: 'Describe actionable UI elements for automation.',
+    prompt: [
+      'Identify actionable UI elements (buttons, inputs, menus).',
+      'Return a list of elements with labels and approximate purpose.',
+    ].join('\n'),
+  },
+]
+
+export function getVisionWorkload(id: VisionWorkloadId) {
+  return VISION_WORKLOADS.find(workload => workload.id === id) || VISION_WORKLOADS[0]
+}
diff --git a/packages/stage-ui/src/stores/chat/context-store.ts b/packages/stage-ui/src/stores/chat/context-store.ts
index 93807a013..1fd8b6fee 100644
--- a/packages/stage-ui/src/stores/chat/context-store.ts
+++ b/packages/stage-ui/src/stores/chat/context-store.ts
@@ -6,8 +6,15 @@ import { ref, toRaw } from 'vue'
 
 import { getEventSourceKey } from '../../utils/event-source'
 
+export interface ContextHistoryEntry extends ContextMessage {
+  sourceKey: string
+}
+
+const CONTEXT_HISTORY_LIMIT = 400
+
 export const useChatContextStore = defineStore('chat-context', () => {
   const activeContexts = ref<Record<string, ContextMessage[]>>({})
+  const contextHistory = ref<ContextHistoryEntry[]>([])
 
   function ingestContextMessage(envelope: ContextMessage) {
     const sourceKey = getEventSourceKey(envelope)
@@ -21,10 +28,19 @@ export const useChatContextStore = defineStore('chat-context', () => {
     else if (envelope.strategy === ContextUpdateStrategy.AppendSelf) {
       activeContexts.value[sourceKey].push(envelope)
     }
+
+    contextHistory.value = [
+      ...contextHistory.value,
+      {
+        ...envelope,
+        sourceKey,
+      },
+    ].slice(-CONTEXT_HISTORY_LIMIT)
   }
 
   function resetContexts() {
     activeContexts.value = {}
+    contextHistory.value = []
   }
 
   function getContextsSnapshot() {
@@ -35,5 +51,7 @@ export const useChatContextStore = defineStore('chat-context', () => {
     ingestContextMessage,
     resetContexts,
     getContextsSnapshot,
+    activeContexts,
+    contextHistory,
   }
 })
diff --git a/packages/stage-ui/src/stores/modules/index.ts b/packages/stage-ui/src/stores/modules/index.ts
index c2d55cbf5..c5693824e 100644
--- a/packages/stage-ui/src/stores/modules/index.ts
+++ b/packages/stage-ui/src/stores/modules/index.ts
@@ -6,3 +6,4 @@ export * from './gaming-minecraft'
 export * from './hearing'
 export * from './speech'
 export * from './twitter'
+export * from './vision'
diff --git a/packages/stage-ui/src/stores/modules/vision/agents/index.ts b/packages/stage-ui/src/stores/modules/vision/agents/index.ts
new file mode 100644
index 000000000..9a67f8f9a
--- /dev/null
+++ b/packages/stage-ui/src/stores/modules/vision/agents/index.ts
@@ -0,0 +1,7 @@
+export interface VisionAgentConfig {
+  id: string
+  name: string
+  description: string
+}
+
+export const VISION_AGENTS: VisionAgentConfig[] = []
diff --git a/packages/stage-ui/src/stores/modules/vision/index.ts b/packages/stage-ui/src/stores/modules/vision/index.ts
new file mode 100644
index 000000000..77057ab82
--- /dev/null
+++ b/packages/stage-ui/src/stores/modules/vision/index.ts
@@ -0,0 +1,5 @@
+export * from './agents'
+export * from './orchestrator'
+export * from './processing-store'
+export * from './store'
+export * from './utils/model-catalog'
diff --git a/packages/stage-ui/src/stores/modules/vision/orchestrator.ts b/packages/stage-ui/src/stores/modules/vision/orchestrator.ts
new file mode 100644
index 000000000..71788ae37
--- /dev/null
+++ b/packages/stage-ui/src/stores/modules/vision/orchestrator.ts
@@ -0,0 +1,93 @@
+import type { CommonContentPart } from '@xsai/shared-chat'
+
+import type { VisionWorkloadId } from '../../../composables/vision/use-vision-workloads'
+
+import { ContextUpdateStrategy } from '@proj-airi/server-sdk'
+import { defineStore, storeToRefs } from 'pinia'
+import { ref } from 'vue'
+
+import { useVisionInference } from '../../../composables/vision'
+import { getVisionWorkload } from '../../../composables/vision/use-vision-workloads'
+import { useModsServerChannelStore } from '../../mods/api/channel-server'
+import { useVisionStore } from './store'
+
+export interface VisionCapturePayload {
+  imageDataUrl: string
+  workloadId: VisionWorkloadId
+  sourceId?: string
+  capturedAt?: number
+  publishContext?: boolean
+}
+
+export const useVisionOrchestratorStore = defineStore('vision-orchestrator', () => {
+  const visionStore = useVisionStore()
+  const { activeProvider, activeModel } = storeToRefs(visionStore)
+  const modsServerChannelStore = useModsServerChannelStore()
+  const { runVisionInference, lastText } = useVisionInference()
+
+  const lastResultText = ref('')
+  const lastResultAt = ref<number | null>(null)
+  const lastError = ref<string | null>(null)
+  const lastWorkloadId = ref<VisionWorkloadId>('screen:interpret')
+
+  async function processCapture(payload: VisionCapturePayload) {
+    if (!activeProvider.value || !activeModel.value)
+      throw new Error('Vision model is not configured')
+
+    lastWorkloadId.value = payload.workloadId
+
+    const text = await runVisionInference({
+      imageDataUrl: payload.imageDataUrl,
+      workloadId: payload.workloadId,
+    })
+
+    lastResultText.value = text
+    lastResultAt.value = Date.now()
+    lastError.value = null
+
+    if (payload.publishContext) {
+      const workload = getVisionWorkload(payload.workloadId)
+      const content: CommonContentPart[] = [
+        { type: 'text', text },
+        {
+          type: 'image_url',
+          image_url: {
+            url: payload.imageDataUrl,
+          },
+        },
+      ]
+
+      modsServerChannelStore.sendContextUpdate({
+        strategy: ContextUpdateStrategy.ReplaceSelf,
+        text,
+        content,
+        metadata: {
+          module: 'vision',
+          workload: workload.id,
+          workloadLabel: workload.label,
+          sourceId: payload.sourceId,
+          capturedAt: payload.capturedAt,
+          provider: activeProvider.value,
+          model: activeModel.value,
+        },
+      })
+      return { contextUpdates: 1, text }
+    }
+
+    return { contextUpdates: 0, text }
+  }
+
+  function recordError(error: unknown) {
+    lastError.value = error instanceof Error ? error.message : String(error)
+  }
+
+  return {
+    lastText,
+    lastResultText,
+    lastResultAt,
+    lastError,
+    lastWorkloadId,
+    processCapture,
+    recordError,
+  }
+})
diff --git a/packages/stage-ui/src/stores/modules/vision/processing-store.ts b/packages/stage-ui/src/stores/modules/vision/processing-store.ts
new file mode 100644
index 000000000..3b0ff8006
--- /dev/null
+++ b/packages/stage-ui/src/stores/modules/vision/processing-store.ts
@@ -0,0 +1,204 @@
+import { defineStore } from 'pinia'
+import { computed, ref, watch } from 'vue'
+
+import { createResettableLocalStorage } from '../../../utils/resettable'
+
+export interface VisionTickOutcome {
+  capturedAt?: number
+  contextUpdates?: number
+}
+
+type VisionTickHandler = () => Promise<VisionTickOutcome | void> | VisionTickOutcome | void
+
+const DEFAULT_CAPTURE_INTERVAL_MS = 3000
+const HISTORY_MAX_AGE_MS = 5 * 60 * 1000
+const PROCESSING_HISTORY_LIMIT = 240
+
+function trimHistoryByAge(history: number[], maxAgeMs: number) {
+  const cutoff = Date.now() - maxAgeMs
+  while (history.length > 0 && history[0] < cutoff)
+    history.shift()
+}
+
+function countInWindow(history: number[], windowMs: number) {
+  const cutoff = Date.now() - windowMs
+  let count = 0
+  for (let index = history.length - 1; index >= 0; index -= 1) {
+    if (history[index] < cutoff)
+      break
+    count += 1
+  }
+  return count
+}
+
+export const useVisionProcessingStore = defineStore('vision-processing', () => {
+  const [captureIntervalMs, resetCaptureIntervalMs] = createResettableLocalStorage(
+    'settings/vision/capture-interval-ms',
+    DEFAULT_CAPTURE_INTERVAL_MS,
+  )
+
+  const isRunning = ref(false)
+  const isProcessing = ref(false)
+  const tickCount = ref(0)
+  const skippedTicks = ref(0)
+  const captureCount = ref(0)
+  const contextUpdateCount = ref(0)
+  const lastTickAt = ref<number | null>(null)
+  const lastCaptureAt = ref<number | null>(null)
+  const lastContextUpdateAt = ref<number | null>(null)
+  const lastProcessingDurationMs = ref<number | null>(null)
+  const lastError = ref<string | null>(null)
+
+  const processingHistoryMs = ref<number[]>([])
+  const captureHistory = ref<number[]>([])
+  const contextUpdateHistory = ref<number[]>([])
+
+  let intervalHandle: ReturnType<typeof setInterval> | null = null
+  const tickHandler = ref<VisionTickHandler | null>(null)
+
+  const captureRatePerMinute = computed(() => countInWindow(captureHistory.value, 60_000))
+  const contextUpdateRatePerMinute = computed(() => countInWindow(contextUpdateHistory.value, 60_000))
+
+  const averageProcessingMs = computed(() => {
+    if (processingHistoryMs.value.length === 0)
+      return 0
+    const total = processingHistoryMs.value.reduce((sum, value) => sum + value, 0)
+    return total / processingHistoryMs.value.length
+  })
+
+  function recordProcessingDuration(durationMs: number) {
+    lastProcessingDurationMs.value = durationMs
+    processingHistoryMs.value = [...processingHistoryMs.value, durationMs].slice(-PROCESSING_HISTORY_LIMIT)
+  }
+
+  function recordCapture(capturedAt = Date.now()) {
+    captureCount.value += 1
+    lastCaptureAt.value = capturedAt
+    captureHistory.value.push(capturedAt)
+    trimHistoryByAge(captureHistory.value, HISTORY_MAX_AGE_MS)
+  }
+
+  function recordContextUpdates(count = 1, updatedAt = Date.now()) {
+    if (count <= 0)
+      return
+
+    contextUpdateCount.value += count
+    lastContextUpdateAt.value = updatedAt
+    for (let index = 0; index < count; index += 1)
+      contextUpdateHistory.value.push(updatedAt)
+    trimHistoryByAge(contextUpdateHistory.value, HISTORY_MAX_AGE_MS)
+  }
+
+  async function runTick() {
+    if (!tickHandler.value)
+      return
+    if (isProcessing.value) {
+      skippedTicks.value += 1
+      return
+    }
+
+    isProcessing.value = true
+    lastTickAt.value = Date.now()
+    tickCount.value += 1
+
+    const start = performance.now()
+
+    try {
+      const outcome = await tickHandler.value()
+      lastError.value = null
+
+      if (outcome?.capturedAt)
+        recordCapture(outcome.capturedAt)
+      if (outcome?.contextUpdates)
+        recordContextUpdates(outcome.contextUpdates)
+    }
+    catch (error) {
+      lastError.value = error instanceof Error ? error.message : String(error)
+    }
+    finally {
+      recordProcessingDuration(performance.now() - start)
+      isProcessing.value = false
+    }
+  }
+
+  function startTicker(handler: VisionTickHandler) {
+    tickHandler.value = handler
+    if (isRunning.value)
+      return
+
+    isRunning.value = true
+    if (intervalHandle)
+      clearInterval(intervalHandle)
+
+    void runTick()
+    intervalHandle = setInterval(() => {
+      void runTick()
+    }, captureIntervalMs.value)
+  }
+
+  function stopTicker() {
+    isRunning.value = false
+    if (intervalHandle)
+      clearInterval(intervalHandle)
+    intervalHandle = null
+  }
+
+  function resetMetrics() {
+    tickCount.value = 0
+    skippedTicks.value = 0
+    captureCount.value = 0
+    contextUpdateCount.value = 0
+    lastTickAt.value = null
+    lastCaptureAt.value = null
+    lastContextUpdateAt.value = null
+    lastProcessingDurationMs.value = null
+    lastError.value = null
+    processingHistoryMs.value = []
+    captureHistory.value = []
+    contextUpdateHistory.value = []
+  }
+
+  function resetState() {
+    stopTicker()
+    resetMetrics()
+    resetCaptureIntervalMs()
+  }
+
+  watch(captureIntervalMs, (next, previous) => {
+    if (!isRunning.value)
+      return
+    if (next === previous)
+      return
+
+    if (intervalHandle)
+      clearInterval(intervalHandle)
+    intervalHandle = setInterval(() => {
+      void runTick()
+    }, next)
+  })
+
+  return {
+    captureIntervalMs,
+    isRunning,
+    isProcessing,
+    tickCount,
+    skippedTicks,
+    captureCount,
+    contextUpdateCount,
+    lastTickAt,
+    lastCaptureAt,
+    lastContextUpdateAt,
+    lastProcessingDurationMs,
+    lastError,
+    processingHistoryMs,
+    captureHistory,
+    contextUpdateHistory,
+    captureRatePerMinute,
+    contextUpdateRatePerMinute,
+    averageProcessingMs,
+    startTicker,
+    stopTicker,
+    resetMetrics,
+    resetState,
+  }
+})
diff --git a/packages/stage-ui/src/stores/modules/vision/store.ts b/packages/stage-ui/src/stores/modules/vision/store.ts
new file mode 100644
index 000000000..f45e22788
--- /dev/null
+++ b/packages/stage-ui/src/stores/modules/vision/store.ts
@@ -0,0 +1,93 @@
+import { defineStore } from 'pinia'
+import { computed } from 'vue'
+
+import { createResettableLocalStorage, createResettableRef } from '../../../utils/resettable'
+import { useProvidersStore } from '../../providers'
+
+export const useVisionStore = defineStore('vision', () => {
+  const providersStore = useProvidersStore()
+
+  const [activeProvider, resetActiveProvider] = createResettableLocalStorage('settings/vision/active-provider', '')
+  const [activeModel, resetActiveModel] = createResettableLocalStorage('settings/vision/active-model', '')
+  const [activeCustomModelName, resetActiveCustomModelName] = createResettableLocalStorage('settings/vision/active-custom-model', '')
+  const [modelSearchQuery, resetModelSearchQuery] = createResettableRef('')
+
+  const providerMetadata = computed(() => {
+    if (!activeProvider.value)
+      return null
+
+    return providersStore.providerMetadata[activeProvider.value] ?? null
+  })
+
+  const supportsModelListing = computed(() => {
+    return providerMetadata.value?.capabilities.listModels !== undefined
+  })
+
+  const providerModels = computed(() => {
+    if (!activeProvider.value)
+      return []
+
+    return providersStore.getModelsForProvider(activeProvider.value)
+  })
+
+  const isLoadingActiveProviderModels = computed(() => {
+    if (!activeProvider.value)
+      return false
+
+    return providersStore.isLoadingModels[activeProvider.value] || false
+  })
+
+  const activeProviderModelError = computed(() => {
+    if (!activeProvider.value)
+      return null
+
+    return providersStore.modelLoadError[activeProvider.value] || null
+  })
+
+  const configured = computed(() => {
+    return !!activeProvider.value && !!activeModel.value
+  })
+
+  function resetModelSelection() {
+    resetActiveModel()
+    resetActiveCustomModelName()
+    resetModelSearchQuery()
+  }
+
+  async function loadModelsForProvider(provider: string) {
+    if (provider && providerMetadata.value?.capabilities.listModels !== undefined) {
+      await providersStore.fetchModelsForProvider(provider)
+    }
+  }
+
+  async function getModelsForProvider(provider: string) {
+    if (provider && providerMetadata.value?.capabilities.listModels !== undefined) {
+      return providersStore.getModelsForProvider(provider)
+    }
+
+    return []
+  }
+
+  function resetState() {
+    resetActiveProvider()
+    resetModelSelection()
+  }
+
+  return {
+    activeProvider,
+    activeModel,
+    customModelName: activeCustomModelName,
+    modelSearchQuery,
+
+    supportsModelListing,
+    providerModels,
+    isLoadingActiveProviderModels,
+    activeProviderModelError,
+    configured,
+
+    resetModelSelection,
+    loadModelsForProvider,
+    getModelsForProvider,
+    resetState,
+  }
+})
diff --git a/packages/stage-ui/src/stores/modules/vision/utils/model-catalog.ts b/packages/stage-ui/src/stores/modules/vision/utils/model-catalog.ts
new file mode 100644
index 000000000..991aa0961
--- /dev/null
+++ b/packages/stage-ui/src/stores/modules/vision/utils/model-catalog.ts
@@ -0,0 +1,55 @@
+export interface VisionModelInfo {
+  id: string
+  name: string
+  description: string
+  tags: string[]
+  recommendedFor: string[]
+  deprecated?: boolean
+  customizable?: boolean
+}
+
+export const VISION_MODEL_CATALOG: VisionModelInfo[] = [
+  {
+    id: 'gpt-4o-mini-vision',
+    name: 'GPT-4o mini (Vision)',
+    description: 'Fast and cost-efficient for screen UI understanding and lightweight OCR.',
+    tags: ['fast', 'ui', 'ocr'],
+    recommendedFor: ['UI navigation', 'Quick captions', 'Low-latency feedback'],
+  },
+  {
+    id: 'gpt-4o-vision',
+    name: 'GPT-4o (Vision)',
+    description: 'Stronger reasoning on complex layouts and multi-window scenes.',
+    tags: ['accurate', 'ui', 'reasoning'],
+    recommendedFor: ['Dense UIs', 'Multi-step analysis', 'Ambiguous screens'],
+  },
+  {
+    id: 'claude-3.5-sonnet-vision',
+    name: 'Claude 3.5 Sonnet (Vision)',
+    description: 'Balanced quality for diagrams, docs, and structured UI reading.',
+    tags: ['balanced', 'documents', 'charts'],
+    recommendedFor: ['Docs and dashboards', 'Diagram reading', 'Summaries'],
+  },
+  {
+    id: 'gemini-1.5-pro-vision',
+    name: 'Gemini 1.5 Pro (Vision)',
+    description: 'Great for longer-context screen stories and multi-step tasks.',
+    tags: ['long-context', 'reasoning'],
+    recommendedFor: ['Long sessions', 'Workflow tracking', 'Large screens'],
+  },
+  {
+    id: 'llava-1.6',
+    name: 'LLaVA 1.6 (Local)',
+    description: 'Local-friendly baseline for offline or privacy-focused setups.',
+    tags: ['local', 'offline'],
+    recommendedFor: ['Offline mode', 'On-device evaluation', 'Privacy-first use'],
+  },
+  {
+    id: 'custom',
+    name: 'Custom Model',
+    description: 'Use your own vision model ID from a provider or local runtime.',
+    tags: ['custom'],
+    recommendedFor: ['Self-hosted models', 'Experimental runtimes'],
+    customizable: true,
+  },
+]
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a2f008e6c..31b1ea973 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -78,6 +78,9 @@ catalogs:
     '@types/audioworklet':
       specifier: ^0.0.96
       version: 0.0.96
+    '@types/d3':
+      specifier: ^7.4.3
+      version: 7.4.3
     '@types/hast':
       specifier: ^3.0.4
       version: 3.0.4
@@ -144,6 +147,9 @@ catalogs:
     crossws:
       specifier: ^0.4.4
       version: 0.4.4
+    d3:
+      specifier: 7.9.0
+      version: 7.9.0
     drizzle-valibot:
       specifier: ^0.4.2
       version: 0.4.2
@@ -702,6 +708,9 @@ importers:
       culori:
         specifier: ^4.0.2
         version: 4.0.2
+      d3:
+        specifier: 'catalog:'
+        version: 7.9.0
       date-fns:
         specifier: ^4.1.0
         version: 4.1.0
@@ -1105,6 +1114,9 @@ importers:
       culori:
         specifier: ^4.0.2
         version: 4.0.2
+      d3:
+        specifier: 'catalog:'
+        version: 7.9.0
       date-fns:
         specifier: ^4.1.0
         version: 4.1.0
@@ -1520,6 +1532,9 @@ importers:
       culori:
         specifier: ^4.0.2
         version: 4.0.2
+      d3:
+        specifier: 'catalog:'
+        version: 7.9.0
       date-fns:
         specifier: ^4.1.0
         version: 4.1.0
@@ -2394,6 +2409,9 @@ importers:
       animejs:
         specifier: ^4.3.6
         version: 4.3.6
+      d3:
+        specifier: 'catalog:'
+        version: 7.9.0
       dompurify:
         specifier: ^3.3.1
         version: 3.3.1
@@ -2615,6 +2633,9 @@ importers:
       culori:
         specifier: ^4.0.2
         version: 4.0.2
+      d3:
+        specifier: 'catalog:'
+        version: 7.9.0
       date-fns:
         specifier: ^4.1.0
         version: 4.1.0
@@ -2811,6 +2832,9 @@ importers:
       '@types/culori':
         specifier: ^4.0.1
         version: 4.0.1
+      '@types/d3':
+        specifier: 'catalog:'
+        version: 7.4.3
       '@types/hast':
         specifier: 'catalog:'
         version: 3.0.4
@@ -8432,6 +8456,99 @@ packages:
   '@types/culori@4.0.1':
     resolution: {integrity: sha512-43M51r/22CjhbOXyGT361GZ9vncSVQ39u62x5eJdBQFviI8zWp2X5jzqg7k4M6PVgDQAClpy2bUe2dtwEgEDVQ==}
 
+  '@types/d3-array@3.2.2':
+    resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}
+
+  '@types/d3-axis@3.0.6':
+    resolution: {integrity: sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==}
+
+  '@types/d3-brush@3.0.6':
+    resolution: {integrity: sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==}
+
+  '@types/d3-chord@3.0.6':
+    resolution: {integrity: sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==}
+
+  '@types/d3-color@3.1.3':
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+
+  '@types/d3-contour@3.0.6':
+    resolution: {integrity: sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==}
+
+  '@types/d3-delaunay@6.0.4':
+    resolution: {integrity: sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==}
+
+  '@types/d3-dispatch@3.0.7':
+    resolution: {integrity: sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA==}
+
+  '@types/d3-drag@3.0.7':
+    resolution: {integrity: sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==}
+
+  '@types/d3-dsv@3.0.7':
+    resolution: {integrity: sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==}
+
+  '@types/d3-ease@3.0.2':
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
+
+  '@types/d3-fetch@3.0.7':
+    resolution: {integrity: sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==}
+
+  '@types/d3-force@3.0.10':
+    resolution: {integrity: sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==}
+
+  '@types/d3-format@3.0.4':
+    resolution: {integrity: sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==}
+
+  '@types/d3-geo@3.1.0':
+    resolution: {integrity: sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==}
+
+  '@types/d3-hierarchy@3.1.7':
+    resolution: {integrity: sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==}
+
+  '@types/d3-interpolate@3.0.4':
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+
+  '@types/d3-path@3.1.1':
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
+
+  '@types/d3-polygon@3.0.2':
+    resolution: {integrity: sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==}
+
+  '@types/d3-quadtree@3.0.6':
+    resolution: {integrity: sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==}
+
+  '@types/d3-random@3.0.3':
+    resolution: {integrity: sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==}
+
+  '@types/d3-scale-chromatic@3.1.0':
+    resolution: {integrity: sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==}
+
+  '@types/d3-scale@4.0.9':
+    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
+
+  '@types/d3-selection@3.0.11':
+    resolution: {integrity: sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==}
+
+  '@types/d3-shape@3.1.8':
+    resolution: {integrity: sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==}
+
+  '@types/d3-time-format@4.0.3':
+    resolution: {integrity: sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==}
+
+  '@types/d3-time@3.0.4':
+    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
+
+  '@types/d3-timer@3.0.2':
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
+
+  '@types/d3-transition@3.0.9':
+    resolution: {integrity: sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==}
+
+  '@types/d3-zoom@3.0.8':
+    resolution: {integrity: sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==}
+
+  '@types/d3@7.4.3':
+    resolution: {integrity: sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==}
+
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
@@ -8471,6 +8588,9 @@ packages:
   '@types/fs-extra@9.0.13':
     resolution: {integrity: sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==}
 
+  '@types/geojson@7946.0.16':
+    resolution: {integrity: sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==}
+
   '@types/har-format@1.2.16':
     resolution: {integrity: sha512-fluxdy7ryD3MV6h8pTfTYpy/xQzCFC7m89nOH9y94cNqJ1mDIDPut7MnRHI3F6qRmh/cT2fUjG1MLdCNb4hE9A==}
 
@@ -10325,6 +10445,10 @@ packages:
     resolution: {integrity: sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==}
     engines: {node: '>= 6'}
 
+  commander@7.2.0:
+    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
+    engines: {node: '>= 10'}
+
   commander@8.3.0:
     resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
     engines: {node: '>= 12'}
@@ -10500,6 +10624,133 @@ packages:
     resolution: {integrity: sha512-1+BhOB8ahCn4O0cep0Sh2l9KCOfOdY+BXJnKMHFFzDEouSr/el18QwXEMRlOj9UY5nCeA8UN3a/82rUWRBeyBw==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+
+  d3-axis@3.0.0:
+    resolution: {integrity: sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==}
+    engines: {node: '>=12'}
+
+  d3-brush@3.0.0:
+    resolution: {integrity: sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==}
+    engines: {node: '>=12'}
+
+  d3-chord@3.0.1:
+    resolution: {integrity: sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==}
+    engines: {node: '>=12'}
+
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-contour@4.0.2:
+    resolution: {integrity: sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==}
+    engines: {node: '>=12'}
+
+  d3-delaunay@6.0.4:
+    resolution: {integrity: sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==}
+    engines: {node: '>=12'}
+
+  d3-dispatch@3.0.1:
+    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
+    engines: {node: '>=12'}
+
+  d3-drag@3.0.0:
+    resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
+    engines: {node: '>=12'}
+
+  d3-dsv@3.0.1:
+    resolution: {integrity: sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==}
+    engines: {node: '>=12'}
+    hasBin: true
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-fetch@3.0.1:
+    resolution: {integrity: sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==}
+    engines: {node: '>=12'}
+
+  d3-force@3.0.0:
+    resolution: {integrity: sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==}
+    engines: {node: '>=12'}
+
+  d3-format@3.1.0:
+    resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
+    engines: {node: '>=12'}
+
+  d3-geo@3.1.1:
+    resolution: {integrity: sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==}
+    engines: {node: '>=12'}
+
+  d3-hierarchy@3.1.2:
+    resolution: {integrity: sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+
+  d3-polygon@3.0.1:
+    resolution: {integrity: sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==}
+    engines: {node: '>=12'}
+
+  d3-quadtree@3.0.1:
+    resolution: {integrity: sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==}
+    engines: {node: '>=12'}
+
+  d3-random@3.0.1:
+    resolution: {integrity: sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==}
+    engines: {node: '>=12'}
+
+  d3-scale-chromatic@3.1.0:
+    resolution: {integrity: sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==}
+    engines: {node: '>=12'}
+
+  d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+
+  d3-selection@3.0.0:
+    resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
+    engines: {node: '>=12'}
+
+  d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+
+  d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+
+  d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
+  d3-transition@3.0.1:
+    resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      d3-selection: 2 - 3
+
+  d3-zoom@3.0.0:
+    resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
+    engines: {node: '>=12'}
+
+  d3@7.9.0:
+    resolution: {integrity: sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==}
+    engines: {node: '>=12'}
+
   d@1.0.2:
     resolution: {integrity: sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==}
     engines: {node: '>=0.12'}
@@ -10610,6 +10861,9 @@ packages:
   defu@6.1.4:
     resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
 
+  delaunator@5.0.1:
+    resolution: {integrity: sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==}
+
   delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
@@ -12360,6 +12614,10 @@ packages:
   inspect-property@0.0.6:
     resolution: {integrity: sha512-LgjHkRl9W6bj2n+kWrAOgvCYPTYt+LanE4rtd/vKNq6yEb+SvVV7UTLzoSPpDX6/U1cAz7VfqPr+lPAIz7wHaQ==}
 
+  internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+
   ip-address@10.0.1:
     resolution: {integrity: sha512-NWv9YLW4PoW2B7xtzaS3NCot75m6nK7Icdv0o3lfMceJVRfSoQwqD4wEH5rLwoKJwUiZ/rfpiVBhnaF0FK4HoA==}
     engines: {node: '>= 12'}
@@ -14666,6 +14924,9 @@ packages:
     resolution: {integrity: sha512-CHhPh+UNHD2GTXNYhPWLnU8ONHdI+5DI+4EYIAOaiD63rHeYlZvyh8P+in5999TTSFgUYuKUAjzRI4mdh/p+2A==}
     engines: {node: '>=8.0'}
 
+  robust-predicates@3.0.2:
+    resolution: {integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==}
+
   rolldown-plugin-dts@0.22.1:
     resolution: {integrity: sha512-5E0AiM5RSQhU6cjtkDFWH6laW4IrMu0j1Mo8x04Xo1ALHmaRMs9/7zej7P3RrryVHW/DdZAp85MA7Be55p0iUw==}
     engines: {node: '>=20.19.0'}
@@ -14752,6 +15013,9 @@ packages:
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
+  rw@1.3.3:
+    resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
+
   rxjs@7.8.2:
     resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==}
 
@@ -21867,6 +22131,123 @@ snapshots:
 
   '@types/culori@4.0.1': {}
 
+  '@types/d3-array@3.2.2': {}
+
+  '@types/d3-axis@3.0.6':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-brush@3.0.6':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-chord@3.0.6': {}
+
+  '@types/d3-color@3.1.3': {}
+
+  '@types/d3-contour@3.0.6':
+    dependencies:
+      '@types/d3-array': 3.2.2
+      '@types/geojson': 7946.0.16
+
+  '@types/d3-delaunay@6.0.4': {}
+
+  '@types/d3-dispatch@3.0.7': {}
+
+  '@types/d3-drag@3.0.7':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-dsv@3.0.7': {}
+
+  '@types/d3-ease@3.0.2': {}
+
+  '@types/d3-fetch@3.0.7':
+    dependencies:
+      '@types/d3-dsv': 3.0.7
+
+  '@types/d3-force@3.0.10': {}
+
+  '@types/d3-format@3.0.4': {}
+
+  '@types/d3-geo@3.1.0':
+    dependencies:
+      '@types/geojson': 7946.0.16
+
+  '@types/d3-hierarchy@3.1.7': {}
+
+  '@types/d3-interpolate@3.0.4':
+    dependencies:
+      '@types/d3-color': 3.1.3
+
+  '@types/d3-path@3.1.1': {}
+
+  '@types/d3-polygon@3.0.2': {}
+
+  '@types/d3-quadtree@3.0.6': {}
+
+  '@types/d3-random@3.0.3': {}
+
+  '@types/d3-scale-chromatic@3.1.0': {}
+
+  '@types/d3-scale@4.0.9':
+    dependencies:
+      '@types/d3-time': 3.0.4
+
+  '@types/d3-selection@3.0.11': {}
+
+  '@types/d3-shape@3.1.8':
+    dependencies:
+      '@types/d3-path': 3.1.1
+
+  '@types/d3-time-format@4.0.3': {}
+
+  '@types/d3-time@3.0.4': {}
+
+  '@types/d3-timer@3.0.2': {}
+
+  '@types/d3-transition@3.0.9':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-zoom@3.0.8':
+    dependencies:
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3@7.4.3':
+    dependencies:
+      '@types/d3-array': 3.2.2
+      '@types/d3-axis': 3.0.6
+      '@types/d3-brush': 3.0.6
+      '@types/d3-chord': 3.0.6
+      '@types/d3-color': 3.1.3
+      '@types/d3-contour': 3.0.6
+      '@types/d3-delaunay': 6.0.4
+      '@types/d3-dispatch': 3.0.7
+      '@types/d3-drag': 3.0.7
+      '@types/d3-dsv': 3.0.7
+      '@types/d3-ease': 3.0.2
+      '@types/d3-fetch': 3.0.7
+      '@types/d3-force': 3.0.10
+      '@types/d3-format': 3.0.4
+      '@types/d3-geo': 3.1.0
+      '@types/d3-hierarchy': 3.1.7
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-path': 3.1.1
+      '@types/d3-polygon': 3.0.2
+      '@types/d3-quadtree': 3.0.6
+      '@types/d3-random': 3.0.3
+      '@types/d3-scale': 4.0.9
+      '@types/d3-scale-chromatic': 3.1.0
+      '@types/d3-selection': 3.0.11
+      '@types/d3-shape': 3.1.8
+      '@types/d3-time': 3.0.4
+      '@types/d3-time-format': 4.0.3
+      '@types/d3-timer': 3.0.2
+      '@types/d3-transition': 3.0.9
+      '@types/d3-zoom': 3.0.8
+
   '@types/debug@4.1.12':
     dependencies:
       '@types/ms': 2.1.0
@@ -21906,6 +22287,8 @@ snapshots:
     dependencies:
       '@types/node': 24.10.14
 
+  '@types/geojson@7946.0.16': {}
+
   '@types/har-format@1.2.16': {}
 
   '@types/hast@3.0.4':
@@ -24278,6 +24661,8 @@ snapshots:
 
   commander@5.1.0: {}
 
+  commander@7.2.0: {}
+
   commander@8.3.0: {}
 
   commander@9.5.0: {}
@@ -24445,6 +24830,158 @@ snapshots:
 
   culori@4.0.2: {}
 
+  d3-array@3.2.4:
+    dependencies:
+      internmap: 2.0.3
+
+  d3-axis@3.0.0: {}
+
+  d3-brush@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
+  d3-chord@3.0.1:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-color@3.1.0: {}
+
+  d3-contour@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-delaunay@6.0.4:
+    dependencies:
+      delaunator: 5.0.1
+
+  d3-dispatch@3.0.1: {}
+
+  d3-drag@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-selection: 3.0.0
+
+  d3-dsv@3.0.1:
+    dependencies:
+      commander: 7.2.0
+      iconv-lite: 0.6.3
+      rw: 1.3.3
+
+  d3-ease@3.0.1: {}
+
+  d3-fetch@3.0.1:
+    dependencies:
+      d3-dsv: 3.0.1
+
+  d3-force@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-timer: 3.0.1
+
+  d3-format@3.1.0: {}
+
+  d3-geo@3.1.1:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-hierarchy@3.1.2: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-path@3.1.0: {}
+
+  d3-polygon@3.0.1: {}
+
+  d3-quadtree@3.0.1: {}
+
+  d3-random@3.0.1: {}
+
+  d3-scale-chromatic@3.1.0:
+    dependencies:
+      d3-color: 3.1.0
+      d3-interpolate: 3.0.1
+
+  d3-scale@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.0
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+
+  d3-selection@3.0.0: {}
+
+  d3-shape@3.2.0:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-time-format@4.1.0:
+    dependencies:
+      d3-time: 3.1.0
+
+  d3-time@3.1.0:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-timer@3.0.1: {}
+
+  d3-transition@3.0.1(d3-selection@3.0.0):
+    dependencies:
+      d3-color: 3.1.0
+      d3-dispatch: 3.0.1
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-timer: 3.0.1
+
+  d3-zoom@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
+  d3@7.9.0:
+    dependencies:
+      d3-array: 3.2.4
+      d3-axis: 3.0.0
+      d3-brush: 3.0.0
+      d3-chord: 3.0.1
+      d3-color: 3.1.0
+      d3-contour: 4.0.2
+      d3-delaunay: 6.0.4
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-dsv: 3.0.1
+      d3-ease: 3.0.1
+      d3-fetch: 3.0.1
+      d3-force: 3.0.0
+      d3-format: 3.1.0
+      d3-geo: 3.1.1
+      d3-hierarchy: 3.1.2
+      d3-interpolate: 3.0.1
+      d3-path: 3.1.0
+      d3-polygon: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-random: 3.0.1
+      d3-scale: 4.0.2
+      d3-scale-chromatic: 3.1.0
+      d3-selection: 3.0.0
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+      d3-timer: 3.0.1
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+      d3-zoom: 3.0.0
+
   d@1.0.2:
     dependencies:
       es5-ext: 0.10.64
@@ -24528,6 +25065,10 @@ snapshots:
 
   defu@6.1.4: {}
 
+  delaunator@5.0.1:
+    dependencies:
+      robust-predicates: 3.0.2
+
   delayed-stream@1.0.0: {}
 
   depd@2.0.0: {}
@@ -26649,6 +27190,8 @@ snapshots:
       for-each-property-deep: 0.0.3
       inspect-function: 0.3.4
 
+  internmap@2.0.3: {}
+
   ip-address@10.0.1: {}
 
   ip-address@10.1.0: {}
@@ -29425,6 +29968,8 @@ snapshots:
       semver-compare: 1.0.0
       sprintf-js: 1.1.3
 
+  robust-predicates@3.0.2: {}
+
   rolldown-plugin-dts@0.22.1(oxc-resolver@11.16.2)(rolldown@1.0.0-rc.3)(typescript@5.9.3)(vue-tsc@3.2.5(typescript@5.9.3)):
     dependencies:
       '@babel/generator': 8.0.0-rc.1
@@ -29583,6 +30128,8 @@ snapshots:
     dependencies:
       queue-microtask: 1.2.3
 
+  rw@1.3.3: {}
+
   rxjs@7.8.2:
     dependencies:
       tslib: 2.8.1
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index e99af9b13..f408d6ec9 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -49,6 +49,7 @@ catalog:
   '@proj-airi/unplugin-fetch': ^0.2.2
   '@shopify/draggable': ^1.2.1
   '@types/audioworklet': ^0.0.96
+  '@types/d3': ^7.4.3
   '@types/hast': ^3.0.4
   '@types/splitpanes': ^2.2.6
   '@types/unist': ^3.0.3
@@ -71,6 +72,7 @@ catalog:
   builder-util-runtime: ^9.5.1
   capacitor-native-settings: ^8.0.0
   crossws: ^0.4.4
+  d3: 7.9.0
   drizzle-valibot: ^0.4.2
   electron: ^40.8.0
   embla-carousel-vue: ^9.0.0-rc01