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

.gitignore

@@ -21,3 +21,4 @@ playwright-report
 playwright/.cache
 blob-report
 .ecosystem
+storybook-static

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()