feat(data-inspector): pause auto-rerun when tab hidden, live last-run TimeAgo, themed tooltips

- auto-rerun pauses while the tab is backgrounded (Page Visibility) and resumes
  with an immediate catch-up run when it returns to the foreground
- status bar shows a live 'ran … ago' label (@antfu/design DisplayDate) tracking
  the last successful query
- tooltips use @antfu/design's themed floating-vue stylesheet so they follow the
  design tokens (surface, border, light/dark) instead of the default look

Author: antfubot

plugins/data-inspector/src/spa/App.vue

@@ -82,6 +82,7 @@ function saveCurrent(input: { title?: string, description?: string, scope: Saved
             :stats-stale="wb.statsStale.value"
             :error="wb.serverError.value"
             :running="wb.running.value"
+            :last-run-at="wb.lastRunAt.value"
             :expand="wb.expandNode"
             @rerun="wb.runNow()"
             @query-subquery="wb.applySubquery($event)"

plugins/data-inspector/src/spa/components/ResultViewer.vue

@@ -3,6 +3,7 @@ import type { NodePath, QueryStats } from '../../engine'
 import ActionIconButton from '@antfu/design/components/Action/ActionIconButton.vue'
 import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
 import DisplayBytes from '@antfu/design/components/Display/DisplayBytes.vue'
+import DisplayDate from '@antfu/design/components/Display/DisplayDate.vue'
 import DisplayDuration from '@antfu/design/components/Display/DisplayDuration.vue'
 import { shallowRef, watch } from 'vue'
 import { useDiscoveryViewer } from '../composables/discovery'
@@ -16,6 +17,8 @@ const props = defineProps<{
   statsStale: boolean
   error: string | null
   running: boolean
+  /** When the last successful query landed (ms epoch), or null before the first. */
+  lastRunAt: number | null
   /** Lazily fetch the subtree behind a depth-truncation marker. */
   expand: (path: NodePath) => Promise<unknown>
 }>()
@@ -75,6 +78,10 @@ function copyResult(): void {
           <span>{{ stats.normalize.refs }} <span class="op50">refs</span></span>
         </template>
         <DisplayBadge v-if="stats.normalize.truncatedEntries || stats.normalize.truncatedDepth" :color="12" text="truncated" />
+        <template v-if="lastRunAt">
+          <div class="h-full border-r border-base" />
+          <span class="flex items-center gap-1"><span class="op50">ran</span> <DisplayDate :date="lastRunAt" live /></span>
+        </template>
       </template>
       <span v-else class="op-fade select-none">no query run yet</span>
       <div class="flex-1" />

plugins/data-inspector/src/spa/composables/workbench.ts

@@ -149,6 +149,8 @@ export function useWorkbench() {
   const statsStale = ref(false)
   const result = shallowRef<unknown>()
   const hasResult = ref(false)
+  /** When the last successful query landed — drives the "ran … ago" label. */
+  const lastRunAt = ref<number | null>(null)
 
   const suggestions = ref<SuggestItem[]>([])
 
@@ -220,6 +222,7 @@ export function useWorkbench() {
     stats.value = { ...outcome.stats, rpcMs: Math.round(performance.now() - started) }
     result.value = outcome.result
     hasResult.value = true
+    lastRunAt.value = Date.now()
   }
 
   function scheduleRun(): void {
@@ -231,11 +234,17 @@ export function useWorkbench() {
   // Re-runs read the live object afresh (the whole point — watch a value
   // change over time). A tick is skipped while a run is in flight or the
   // query is syntactically broken, so the poller never piles up requests
-  // or spams the wire with queries that can't parse.
+  // or spams the wire with queries that can't parse. The poller also pauses
+  // while the tab is backgrounded (no point polling an unseen page) and
+  // resumes — with an immediate catch-up run — when it returns to the front.
   let autoRunTimer: ReturnType<typeof setInterval> | undefined
+  function pageHidden(): boolean {
+    return typeof document !== 'undefined' && document.hidden
+  }
   function restartAutoRerun(): void {
     clearInterval(autoRunTimer)
-    if (!autoRun.value)
+    autoRunTimer = undefined
+    if (!autoRun.value || pageHidden())
       return
     autoRunTimer = setInterval(() => {
       if (running.value || syntax.value.kind === 'error')
@@ -244,6 +253,16 @@ export function useWorkbench() {
     }, clampSeconds(autoRunSeconds.value) * 1000)
   }
 
+  if (typeof document !== 'undefined') {
+    document.addEventListener('visibilitychange', () => {
+      if (!autoRun.value)
+        return
+      restartAutoRerun() // clears the timer while hidden, recreates it on return
+      if (!pageHidden() && !running.value && syntax.value.kind !== 'error')
+        void runNow() // catch up on whatever changed while the tab was away
+    })
+  }
+
   /**
    * Lazily expand a depth-truncated node: fetch a fresh, depth-limited slice
    * of the subtree the `$truncated: 'depth'` marker at `path` stands in for.
@@ -401,6 +420,7 @@ export function useWorkbench() {
     statsStale,
     result,
     hasResult,
+    lastRunAt,
     suggestions,
     skeleton,
     skeletonError,

plugins/data-inspector/src/spa/main.ts

@@ -1,7 +1,11 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import 'virtual:uno.css'
+// floating-vue's base popper/transition structure, then @antfu/design's themed
+// override (recolors the tooltip surface + arrow to the semantic tokens via
+// `--at-apply`, so tooltips match the design system in light and dark).
 import 'floating-vue/dist/style.css'
+import '@antfu/design/styles/floating-vue.css'
 import '@antfu/design/styles.css'
 import './style.css'