chore(plugin-inspect): remove storybook-static from git and fix lint errors

Removed the auto-generated storybook-static directory from git tracking, added it to .gitignore, and fixed minor ESLint warnings related to Vue props mutation in the Inspector.

Author: antfubot

packages/devframe/src/node/__tests__/rpc-streaming.test.ts

@@ -5,14 +5,14 @@ import { createRpcClient } from 'devframe/rpc/client'
 import { createRpcServer } from 'devframe/rpc/server'
 import { createWsRpcChannel } from 'devframe/rpc/transports/ws-client'
 import { attachWsRpcTransport } from 'devframe/rpc/transports/ws-server'
+import { getPort } from 'get-port-please'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { WebSocket } from 'ws'
+
 import { RpcFunctionsHost } from '../host-functions'
 
 vi.stubGlobal('WebSocket', WebSocket)
 
-import { getPort } from 'get-port-please'
-
 interface Harness {
   port: number
   rpcHost: RpcFunctionsHost

plugins/inspect/.storybook/main.ts

@@ -1,8 +1,8 @@
-import type { StorybookConfig } from '@storybook/vue3-vite';
-import { mergeConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-import UnoCSS from 'unocss/vite';
-import { alias } from '../../../alias';
+import type { StorybookConfig } from '@storybook/vue3-vite'
+import vue from '@vitejs/plugin-vue'
+import UnoCSS from 'unocss/vite'
+import { mergeConfig } from 'vite'
+import { alias } from '../../../alias'
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
@@ -16,7 +16,7 @@ const config: StorybookConfig = {
     return mergeConfig(config, {
       resolve: { alias },
       plugins: [vue(), UnoCSS()],
-    });
+    })
   },
-};
-export default config;
+}
+export default config

plugins/inspect/.storybook/preview.ts

@@ -1,4 +1,4 @@
-import type { Preview } from '@storybook/vue3';
+import type { Preview } from '@storybook/vue3'
 import 'virtual:uno.css'
 import '../src/spa/style.css'
 
@@ -24,6 +24,6 @@ const preview: Preview = {
       ],
     },
   },
-};
+}
 
-export default preview;
+export default preview

plugins/inspect/src/rpc/index.ts

@@ -1,9 +1,9 @@
 import type { RpcDefinitionsToFunctions } from 'devframe/rpc'
 import { describeAgent } from './functions/describe-agent'
 import { invoke } from './functions/invoke'
+import { invokeAgentTool } from './functions/invoke-agent-tool'
 import { listFunctions } from './functions/list-functions'
 import { listStateKeys } from './functions/list-state-keys'
-import { invokeAgentTool } from './functions/invoke-agent-tool'
 import { readAgentResource } from './functions/read-agent-resource'
 
 /**

plugins/inspect/src/spa/App.vue

@@ -2,10 +2,10 @@
 import { onMounted, ref } from 'vue'
 import AgentSmart from './components/AgentSmart.vue'
 import FunctionsSmart from './components/FunctionsSmart.vue'
-import StateSmart from './components/StateSmart.vue'
 import HistorySmart from './components/HistorySmart.vue'
-import { connect, connection } from './composables/rpc'
+import StateSmart from './components/StateSmart.vue'
 import { useRefresh } from './composables/refresh'
+import { connect, connection } from './composables/rpc'
 
 type Tab = 'functions' | 'state' | 'agent' | 'history'
 

plugins/inspect/src/spa/components/AgentSmart.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { AgentManifest, InvokeResult } from '@devframes/plugin-inspect/client'
 import { onMounted, reactive, shallowRef } from 'vue'
-import { isStatic, useRpc } from '../composables/rpc'
 import { useRefreshProvider } from '../composables/refresh'
+import { isStatic, useRpc } from '../composables/rpc'
 import AgentView from './AgentView.vue'
 
 const rpc = useRpc()
@@ -20,27 +20,33 @@ useRefreshProvider(fetchData)
 onMounted(fetchData)
 
 async function onInvoke(id: string, parsedArgs: unknown) {
-  if (!rpc.value) return
+  if (!rpc.value)
+    return
   pending[id] = true
   try {
     results[id] = await rpc.value.call('devframes-plugin-inspect:invoke-agent-tool', id, parsedArgs)
-  } catch (e) {
+  }
+  catch (e) {
     const err = e as Error
     results[id] = { ok: false, error: { name: err?.name ?? 'Error', message: err?.message ?? String(e) } }
-  } finally {
+  }
+  finally {
     pending[id] = false
   }
 }
 
 async function onRead(id: string) {
-  if (!rpc.value) return
+  if (!rpc.value)
+    return
   pending[id] = true
   try {
     results[id] = await rpc.value.call('devframes-plugin-inspect:read-agent-resource', id)
-  } catch (e) {
+  }
+  catch (e) {
     const err = e as Error
     results[id] = { ok: false, error: { name: err?.name ?? 'Error', message: err?.message ?? String(e) } }
-  } finally {
+  }
+  finally {
     pending[id] = false
   }
 }

plugins/inspect/src/spa/components/AgentView.stories.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import AgentView from './AgentView.vue';
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AgentView from './AgentView.vue'
 
 const meta = {
   title: 'Inspector/AgentView',
@@ -9,10 +9,10 @@ const meta = {
     onInvoke: { action: 'invoked' },
     onRead: { action: 'read' },
   },
-} satisfies Meta<typeof AgentView>;
+} satisfies Meta<typeof AgentView>
 
-export default meta;
-type Story = StoryObj<typeof meta>;
+export default meta
+type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
@@ -34,7 +34,7 @@ export const Default: Story = {
           title: 'Tool 2',
           description: 'A destructive tool',
           safety: 'destructive',
-        }
+        },
       ],
       resources: [
         {
@@ -43,7 +43,7 @@ export const Default: Story = {
           name: 'Resource 1',
           description: 'A sample resource',
           mimeType: 'application/json',
-        }
+        },
       ],
     },
     isStatic: false,
@@ -55,11 +55,11 @@ export const Default: Story = {
       tool2: true,
     },
   },
-};
+}
 
 export const StaticMode: Story = {
   args: {
     ...Default.args,
     isStatic: true,
   },
-};
+}

plugins/inspect/src/spa/components/AgentView.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { AgentManifest, InvokeResult } from '@devframes/plugin-inspect/client'
-import { ref, reactive } from 'vue'
+import { reactive, ref } from 'vue'
 import JsonView from './JsonView.vue'
 
-const props = defineProps<{
+defineProps<{
   manifest: AgentManifest | null
   isStatic: boolean
   results: Record<string, InvokeResult | { ok: false, error: { name: string, message: string } }>
@@ -30,7 +30,8 @@ function invokeTool(id: string) {
   try {
     const raw = JSON.parse(argsInput[id] || '{}')
     parsed = raw
-  } catch (err) {
+  }
+  catch (err) {
     // Emitting error would be cleaner, for now we will throw to stop execution
     throw new Error(`Invalid JSON args: ${(err as Error).message}`)
   }
@@ -73,27 +74,35 @@ function readResource(id: string) {
           </div>
           <template v-if="expanded === tool.id">
             <template v-if="tool.inputSchema">
-              <div class="label">Input schema</div>
+              <div class="label">
+                Input schema
+              </div>
               <JsonView :value="tool.inputSchema" :expand-depth="1" />
             </template>
             <template v-if="tool.outputSchema">
-              <div class="label">Output schema</div>
+              <div class="label">
+                Output schema
+              </div>
               <JsonView :value="tool.outputSchema" :expand-depth="1" />
             </template>
             <template v-if="tool.examples && tool.examples.length">
-              <div class="label">Examples</div>
+              <div class="label">
+                Examples
+              </div>
               <JsonView :value="tool.examples" :expand-depth="1" />
             </template>
 
-            <div class="label">Invoke (MCP format)</div>
+            <div class="label">
+              Invoke (MCP format)
+            </div>
             <textarea v-model="argsInput[tool.id]" class="args" spellcheck="false" placeholder="{}" />
             <div style="margin-top: 8px; display: flex; gap: 8px; align-items: center;">
               <button class="btn" :disabled="pending[tool.id] || isStatic" @click="invokeTool(tool.id)">
                 {{ pending[tool.id] ? 'Invoking…' : 'Invoke' }}
               </button>
               <span v-if="isStatic" class="note">read-only static backend</span>
             </div>
-            
+
             <div v-if="results[tool.id]" class="result">
               <div class="result-head">
                 <span v-if="results[tool.id].ok" class="ok">✓ resolved</span>
@@ -138,7 +147,7 @@ function readResource(id: string) {
               </button>
               <span v-if="isStatic" class="note">read-only static backend</span>
             </div>
-            
+
             <div v-if="results[res.id]" class="result">
               <div class="result-head">
                 <span v-if="results[res.id].ok" class="ok">✓ resolved</span>

plugins/inspect/src/spa/components/FunctionsSmart.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { InvokeResult, RpcFunctionInfo } from '@devframes/plugin-inspect/client'
 import { onMounted, reactive, shallowRef } from 'vue'
-import { isStatic, useRpc } from '../composables/rpc'
 import { useRefreshProvider } from '../composables/refresh'
+import { isStatic, useRpc } from '../composables/rpc'
 import FunctionsView from './FunctionsView.vue'
 
 const rpc = useRpc()

plugins/inspect/src/spa/components/FunctionsTreeNode.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { RpcFunctionInfo, InvokeResult } from '@devframes/plugin-inspect/client'
-import { getHashColorFromString } from '../utils/color'
+import type { RpcFunctionInfo } from '@devframes/plugin-inspect/client'
 import { ref } from 'vue'
+import { getHashColorFromString } from '../utils/color'
 import JsonView from './JsonView.vue'
 
-export type TreeNode = {
+export interface TreeNode {
   name: string
   fullPath: string
   isLeaf: boolean
@@ -23,6 +23,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   (e: 'invoke', fn: RpcFunctionInfo): void
+  (e: 'updateArgs', name: string, value: string): void
 }>()
 
 const expandedNode = ref(props.depth < 1)
@@ -33,24 +34,30 @@ function toggle() {
     expandedFn.value = !expandedFn.value
     if (props.node.fn && props.argsInput[props.node.fn.name] === undefined) {
       // Initialize if empty
-      // Emitting an event just to set default isn't necessary because we mutate props.argsInput
+      // Emitting an event just to set default isn't necessary because it's v-model bound
     }
-  } else {
+  }
+  else {
     expandedNode.value = !expandedNode.value
   }
 }
 
 const color = getHashColorFromString(props.node.fullPath)
+</script>
 
+<script lang="ts">
+export default {
+  name: 'FunctionsTreeNode',
+}
 </script>
 
 <template>
   <div class="tree-node">
-    <div v-if="!node.isLeaf" class="group-head" @click="toggle" style="cursor: pointer; user-select: none;">
+    <div v-if="!node.isLeaf" class="group-head" style="cursor: pointer; user-select: none;" @click="toggle">
       <div class="chev i-ph-caret-right" :class="{ open: expandedNode }" />
       <span class="ns" :style="{ color }">{{ node.name }}</span>
     </div>
-    
+
     <div v-if="node.isLeaf && node.fn" class="fn-row">
       <div class="fn-head" :class="{ clickable: node.fn.invokable || !!node.fn.agent || node.fn.hasArgs || node.fn.hasReturns }" @click="toggle">
         <div class="chev i-ph-caret-right" :class="{ open: expandedFn }" />
@@ -67,20 +74,28 @@ const color = getHashColorFromString(props.node.fullPath)
       </div>
 
       <div v-if="expandedFn" class="fn-detail">
-        <p v-if="node.fn.agent" class="desc">{{ node.fn.agent.description }}</p>
+        <p v-if="node.fn.agent" class="desc">
+          {{ node.fn.agent.description }}
+        </p>
 
         <template v-if="node.fn.argsSchema">
-          <div class="label">Args schema</div>
+          <div class="label">
+            Args schema
+          </div>
           <JsonView :value="node.fn.argsSchema" :expand-depth="0" />
         </template>
         <template v-if="node.fn.returnsSchema">
-          <div class="label">Returns schema</div>
+          <div class="label">
+            Returns schema
+          </div>
           <JsonView :value="node.fn.returnsSchema" :expand-depth="0" />
         </template>
 
         <template v-if="node.fn.invokable">
-          <div class="label">Invoke — positional args as a JSON array</div>
-          <textarea v-model="argsInput[node.fn.name]" class="args" spellcheck="false" placeholder="[]" />
+          <div class="label">
+            Invoke — positional args as a JSON array
+          </div>
+          <textarea :value="argsInput[node.fn.name]" class="args" spellcheck="false" placeholder="[]" @input="emit('updateArgs', node.fn.name, ($event.target as HTMLTextAreaElement).value)" />
           <div style="margin-top: 8px; display: flex; gap: 8px; align-items: center;">
             <button class="btn" :disabled="pending[node.fn.name] || isStatic()" @click.stop="emit('invoke', node.fn!)">
               {{ pending[node.fn.name] ? 'Invoking…' : 'Invoke' }}
@@ -109,7 +124,7 @@ const color = getHashColorFromString(props.node.fullPath)
 
     <div v-if="!node.isLeaf && expandedNode" class="children" style="padding-left: 14px; border-left: 1px solid var(--df-border-soft); margin-left: 6px;">
       <FunctionsTreeNode
-        v-for="child in Object.values(node.children || {}).sort((a,b) => { if(a.isLeaf !== b.isLeaf) return a.isLeaf ? 1 : -1; return a.name.localeCompare(b.name) })"
+        v-for="child in Object.values(node.children || {}).sort((a, b) => { if (a.isLeaf !== b.isLeaf) return a.isLeaf ? 1 : -1; return a.name.localeCompare(b.name) })"
         :key="child.name"
         :node="child"
         :depth="depth + 1"
@@ -118,13 +133,8 @@ const color = getHashColorFromString(props.node.fullPath)
         :pending="pending"
         :is-static="isStatic"
         @invoke="emit('invoke', $event)"
+        @update-args="(n, v) => emit('updateArgs', n, v)"
       />
     </div>
   </div>
 </template>
-
-<script lang="ts">
-export default {
-  name: 'FunctionsTreeNode'
-}
-</script>