feat(prototype): implement UI TODOs — per-source drafts, source info panel, modal filters

- query drafts persist in localStorage per data source; switching sources
  restores (or resets) the draft, and a query arriving via the URL seeds
  the draft for its source so shared links win
- SkeletonPanel replaced by DataSourceInfoPanel: source title/description
  plus a one-level data shape in a plain code block (no discovery);
  clicking a prop sets it as the query and runs
- the save-query modal always shows all three filter options with their
  on/off state

Author: antfubot

examples/prototype-data-inspector/src/spa/App.vue

@@ -8,11 +8,11 @@ import LayoutSplitPane from '@antfu/design/components/Layout/LayoutSplitPane.vue
 import LayoutToolbar from '@antfu/design/components/Layout/LayoutToolbar.vue'
 import { Pane } from 'splitpanes'
 import { computed, onMounted } from 'vue'
+import DataSourceInfoPanel from './components/DataSourceInfoPanel.vue'
 import QueryEditor from './components/QueryEditor.vue'
 import QuerySettings from './components/QuerySettings.vue'
 import ResultViewer from './components/ResultViewer.vue'
 import SavedQueriesPanel from './components/SavedQueriesPanel.vue'
-import SkeletonPanel from './components/SkeletonPanel.vue'
 import { connect, connection } from './composables/rpc'
 import { useSavedQueries } from './composables/saved'
 import { colorScheme } from './composables/scheme'
@@ -51,6 +51,12 @@ function saveCurrent(input: { title?: string, description?: string, scope: Saved
     excludeDollarProps: wb.settings.excludeDollarProps || undefined,
   })
 }
+
+/** A prop clicked in the data-shape panel becomes the query. */
+function queryProp(key: string): void {
+  wb.query.value = /^[a-z_$][\w$]*$/i.test(key) ? key : `$["${key.replaceAll('"', '\\"')}"]`
+  void wb.runNow()
+}
 </script>
 
 <template>
@@ -120,7 +126,6 @@ function saveCurrent(input: { title?: string, description?: string, scope: Saved
                   <span>Run</span>
                 </Button>
               </div>
-              <!-- TODO: Query draft should be persistent in local storage per data source, on switching data sources, it should be restored/reset -->
               <QueryEditor
                 v-model="wb.query.value"
                 :syntax="wb.syntax.value"
@@ -146,12 +151,13 @@ function saveCurrent(input: { title?: string, description?: string, scope: Saved
               />
             </Pane>
             <Pane :size="33" min-size="12" class="p-3 py-1.5 min-h-0">
-              <!-- TODO: this should be replaced with "DataSourceInfoPanel", that shows the data source title/description and simple data shape with one-level depth with normal code block (not discovery), on click the prop it would set the query -->
-              <SkeletonPanel
+              <DataSourceInfoPanel
+                :source="wb.activeSource.value"
                 :skeleton="wb.skeleton.value"
                 :error="wb.skeletonError.value"
                 :loading="wb.skeletonLoading.value"
                 @refresh="wb.loadSkeleton()"
+                @select="queryProp"
               />
             </Pane>
           </LayoutSplitPane>

examples/prototype-data-inspector/src/spa/components/DataSourceInfoPanel.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { DataSourceMeta } from '../../rpc-contract'
+import ActionIconButton from '@antfu/design/components/Action/ActionIconButton.vue'
+import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  source: DataSourceMeta | undefined
+  /** The source's type skeleton (from the skeleton RPC); only depth 1 is shown. */
+  skeleton: unknown
+  error: string | null
+  loading: boolean
+}>()
+
+const emit = defineEmits<{
+  refresh: []
+  /** A property was clicked: set it as the query. */
+  select: [key: string]
+}>()
+
+interface OverviewEntry {
+  key: string
+  label: string
+}
+
+/** Compact one-level type label for a skeleton value. */
+function labelOf(value: unknown): string {
+  if (typeof value === 'string') {
+    if (value === '...' || value === '[circular]')
+      return 'object'
+    return value // 'string' | 'number' | 'function' | 'Date' | 'Map(0)' | ...
+  }
+  if (Array.isArray(value))
+    return 'array'
+  if (value && typeof value === 'object') {
+    const record = value as Record<string, unknown>
+    if (typeof record.$class === 'string')
+      return `class ${record.$class}`
+    const keys = Object.keys(record)
+    const collection = keys.find(k => /^(?:Map|Set)\(\d+\)$/.test(k))
+    if (collection)
+      return collection
+    return 'object'
+  }
+  return String(value)
+}
+
+const entries = computed<OverviewEntry[]>(() => {
+  const { skeleton } = props
+  if (!skeleton || typeof skeleton !== 'object' || Array.isArray(skeleton))
+    return []
+  return Object.entries(skeleton as Record<string, unknown>)
+    .filter(([key]) => key !== '$class' && key !== '...')
+    .map(([key, value]) => ({ key, label: labelOf(value) }))
+})
+
+/** The skeleton root when it is not a plain object (array, primitive, ...). */
+const rootLabel = computed(() => {
+  const { skeleton } = props
+  if (skeleton === undefined || entries.value.length)
+    return null
+  return labelOf(skeleton)
+})
+</script>
+
+<template>
+  <div class="flex flex-col h-full min-h-0">
+    <div class="flex items-center gap-2 px-1 pb-1.5">
+      <span class="text-sm font-semibold truncate select-none">{{ source?.title ?? 'Data source' }}</span>
+      <DisplayBadge v-if="source?.static" text="static" :color="false" />
+      <div class="flex-1" />
+      <ActionIconButton
+        size="sm"
+        :icon="loading ? 'i-ph:arrows-clockwise animate-spin' : 'i-ph:arrows-clockwise'"
+        label="Refresh data shape"
+        tooltip="Refresh"
+        :disabled="loading"
+        @click="emit('refresh')"
+      />
+    </div>
+    <p v-if="source?.description" class="m-0 px-1 pb-2 text-xs color-muted">
+      {{ source.description }}
+    </p>
+
+    <div
+      v-if="error"
+      class="mx-1 mb-1 px-2.5 py-1.5 font-mono text-11px rounded-lg border border-red-600/40 bg-red-500:8 color-red-700 dark:(border-red-400/40 color-red-300)"
+    >
+      {{ error }}
+    </div>
+
+    <!-- One-level data shape as a plain code block; click a prop to query it. -->
+    <div class="flex-1 min-h-0 overflow-auto font-mono text-xs leading-relaxed bg-secondary border border-base rounded-lg px-3 py-2">
+      <template v-if="entries.length">
+        <div class="op50 select-none">
+          {
+        </div>
+        <div v-for="entry in entries" :key="entry.key" class="pl-4 whitespace-nowrap">
+          <button
+            type="button"
+            class="color-active hover:underline cursor-pointer"
+            :title="`Query ${entry.key}`"
+            @click="emit('select', entry.key)"
+          >
+            {{ entry.key }}
+          </button><span class="op50">: {{ entry.label }},</span>
+        </div>
+        <div class="op50 select-none">
+          }
+        </div>
+      </template>
+      <span v-else-if="rootLabel" class="op50">{{ rootLabel }}</span>
+      <span v-else class="op50">loading shape...</span>
+    </div>
+  </div>
+</template>

examples/prototype-data-inspector/src/spa/components/SavedQueriesPanel.vue

@@ -33,16 +33,12 @@ const scopeOptions = [
   { value: 'project', label: 'Project (.devframe, shared)' },
 ]
 
-const activeFilterLabels = computed(() => {
-  const labels: string[] = []
-  if (props.currentFilters.excludeFunctions)
-    labels.push('no functions')
-  if (props.currentFilters.excludeUnderscoreProps)
-    labels.push('no _ props')
-  if (props.currentFilters.excludeDollarProps)
-    labels.push('no $ props')
-  return labels
-})
+/** All filter options with their current state — the modal shows every one. */
+const filterStates = computed(() => [
+  { label: 'Exclude functions', on: props.currentFilters.excludeFunctions },
+  { label: 'Exclude _ props', on: props.currentFilters.excludeUnderscoreProps },
+  { label: 'Exclude $ props', on: props.currentFilters.excludeDollarProps },
+])
 
 function openDialog(): void {
   title.value = ''
@@ -133,7 +129,6 @@ function filterBadges(entry: Query): string[] {
       No queries yet. Compose one and hit "Save query".
     </div>
 
-    <!-- TODO: in this save query modal, we should also show the filters -->
     <OverlayModal
       v-model:open="dialogOpen"
       title="Save query"
@@ -143,9 +138,17 @@ function filterBadges(entry: Query): string[] {
         <div class="px-3 py-2 rounded-lg bg-secondary border border-base font-mono text-xs whitespace-pre-wrap break-all max-h-24 overflow-auto">
           {{ currentQuery.trim() || '$' }}
         </div>
-        <div v-if="activeFilterLabels.length" class="flex items-center gap-1.5 flex-wrap">
-          <span class="text-xs color-muted">Filters:</span>
-          <DisplayBadge v-for="label in activeFilterLabels" :key="label" :text="label" :color="false" />
+        <div class="flex items-center gap-3 flex-wrap text-xs">
+          <span class="color-muted">Filters:</span>
+          <span
+            v-for="state in filterStates"
+            :key="state.label"
+            class="flex items-center gap-1"
+            :class="state.on ? 'color-base' : 'color-faint'"
+          >
+            <span :class="state.on ? 'i-ph:check-circle-duotone color-active' : 'i-ph:circle-duotone'" />
+            {{ state.label }}
+          </span>
         </div>
         <FormTextInput v-model="title" placeholder="Title (optional, becomes the storage id)" />
         <FormTextInput v-model="description" placeholder="Description (optional)" />

examples/prototype-data-inspector/src/spa/components/SkeletonPanel.vue

@@ -19,9 +19,21 @@ export type SyntaxState
 const AUTO_RUN_DEBOUNCE = 400
 const SUGGEST_DEBOUNCE = 150
 const URL_SYNC_DEBOUNCE = 300
+const DRAFTS_KEY = 'data-inspector:drafts'
 
 const FILTER_KEYS = ['excludeFunctions', 'excludeUnderscoreProps', 'excludeDollarProps'] as const
 
+/** Per-source query drafts, persisted in localStorage. */
+function loadDrafts(): Record<string, string> {
+  try {
+    const parsed = JSON.parse(localStorage.getItem(DRAFTS_KEY) ?? '{}')
+    return parsed && typeof parsed === 'object' ? parsed : {}
+  }
+  catch {
+    return {}
+  }
+}
+
 function checkSyntax(query: string): SyntaxState {
   try {
     jora.syntax.parse(query)
@@ -60,6 +72,25 @@ export function useWorkbench() {
   const sourceId = ref(initial.sourceId)
   const query = ref(initial.query)
 
+  // ── per-source query drafts (restored/reset on source switch) ───────
+  const drafts = loadDrafts()
+  let restoringDraft = false
+
+  function saveDraft(): void {
+    if (!sourceId.value)
+      return
+    if (query.value)
+      drafts[sourceId.value] = query.value
+    else
+      delete drafts[sourceId.value]
+    localStorage.setItem(DRAFTS_KEY, JSON.stringify(drafts))
+  }
+
+  function restoreDraft(): void {
+    restoringDraft = true
+    query.value = drafts[sourceId.value] ?? ''
+  }
+
   const settings = reactive<Required<FilterOptions>>({
     excludeFunctions: false,
     excludeUnderscoreProps: false,
@@ -106,6 +137,10 @@ export function useWorkbench() {
     sources.value = await call<DataSourceMeta[]>('data-inspector:sources')
     if (!sourceId.value || !sources.value.some(s => s.id === sourceId.value))
       sourceId.value = sources.value[0]?.id ?? ''
+    // A query arriving via the URL becomes the draft for its source, so the
+    // source-switch restore below can never clobber a shared link.
+    if (initial.query)
+      saveDraft()
   }
 
   // ── auto-run with syntax gate + stale-drop ─────────────────────────
@@ -239,11 +274,18 @@ export function useWorkbench() {
   }
 
   watch(query, () => {
+    saveDraft()
     syncUrl()
+    if (restoringDraft) {
+      // Draft restores ride the source-switch runNow; skip the debounce run.
+      restoringDraft = false
+      return
+    }
     scheduleRun()
   })
   watch(sourceId, () => {
     suggestions.value = []
+    restoreDraft()
     syncUrl()
     void runNow()
     void loadSkeleton()