fix(self-inspect): use floating PanelSideNav and improve UI

- Switch from grid layout to floating sidebar matching rolldown pattern
- Re-enable dark mode toggle
- Use VisualLoading for page loading states
- Show short RPC function names with full name in tooltip
- Use badges for schema indicators
- Remove stale eslint-disable for removed module

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: antfu

packages/self-inspect/src/app/app.vue

@@ -47,10 +47,10 @@ const { refresh, loading } = useRefresh()
     v-else-if="!connectionState.connected"
     text="Connecting..."
   />
-  <div v-else grid="~ cols-[max-content_1fr]" h-vh>
-    <PanelSideNav :show-dark-mode-toggle="false" />
-    <div flex="~ col" of-hidden>
-      <div flex="~ items-center justify-end" border="b base" px2 h8 shrink-0>
+  <div v-else h-vh w-screen max-w-screen max-h-screen of-hidden>
+    <PanelSideNav />
+    <div pl-12 h-full flex="~ col" of-hidden>
+      <div flex="~ items-center justify-end" border="b base" px3 h8 shrink-0>
         <button
           p1.5 rounded
           hover:bg-active

packages/self-inspect/src/app/components/RpcFunctionsList.vue

@@ -37,6 +37,11 @@ function getNamespace(name: string) {
   return parts.slice(0, -1).join(':')
 }
 
+function getShortName(name: string) {
+  const parts = name.split(':')
+  return parts.at(-1)!
+}
+
 const grouped = computed(() => {
   const groups = new Map<string, typeof filtered.value>()
   for (const fn of filtered.value) {
@@ -100,8 +105,8 @@ const grouped = computed(() => {
         </thead>
         <tbody>
           <tr v-for="fn in fns" :key="fn.name" border="b base" hover:bg-active>
-            <td px2 py1.5 font-mono text-xs>
-              {{ fn.name }}
+            <td px2 py1.5 font-mono text-xs :title="fn.name">
+              {{ getShortName(fn.name) }}
             </td>
             <td px2 py1.5>
               <DisplayBadge :text="fn.type" />
@@ -111,8 +116,9 @@ const grouped = computed(() => {
               <span v-else op20>-</span>
             </td>
             <td px2 py1.5 text-center>
-              <span v-if="fn.hasArgs || fn.hasReturns" text-xs op60>
-                {{ fn.hasArgs ? 'args' : '' }}{{ fn.hasArgs && fn.hasReturns ? ' + ' : '' }}{{ fn.hasReturns ? 'returns' : '' }}
+              <span v-if="fn.hasArgs || fn.hasReturns" flex="~ items-center justify-center gap-1">
+                <DisplayBadge v-if="fn.hasArgs" text="args" />
+                <DisplayBadge v-if="fn.hasReturns" text="returns" />
               </span>
               <span v-else op20>-</span>
             </td>

packages/self-inspect/src/app/composables/rpc.ts

@@ -6,7 +6,6 @@ import { getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
 import { DEVTOOLS_MOUNT_PATH } from '@vitejs/devtools-kit/constants'
 import { reactive, shallowRef } from 'vue'
 
-// eslint-disable-next-line unimport/auto-insert -- locally defined, not from rolldown
 export const connectionState = reactive<{
   connected: boolean
   error: Error | null

packages/self-inspect/src/app/pages/docks.vue

@@ -16,8 +16,6 @@ onMounted(fetchData)
 </script>
 
 <template>
-  <div v-if="!data" flex="~ items-center justify-center" h-full op50>
-    Loading...
-  </div>
+  <VisualLoading v-if="!data" />
   <DocksList v-else :docks="data" />
 </template>

packages/self-inspect/src/app/pages/plugins.vue

@@ -16,8 +16,6 @@ onMounted(fetchData)
 </script>
 
 <template>
-  <div v-if="!data" flex="~ items-center justify-center" h-full op50>
-    Loading...
-  </div>
+  <VisualLoading v-if="!data" />
   <DevtoolsPluginsList v-else :plugins="data" />
 </template>

packages/self-inspect/src/app/pages/rpc.vue

@@ -26,8 +26,6 @@ onMounted(fetchData)
 </script>
 
 <template>
-  <div v-if="!data" flex="~ items-center justify-center" h-full op50>
-    Loading...
-  </div>
+  <VisualLoading v-if="!data" />
   <RpcFunctionsList v-else :functions="data" />
 </template>

packages/self-inspect/src/app/pages/scripts.vue

@@ -16,8 +16,6 @@ onMounted(fetchData)
 </script>
 
 <template>
-  <div v-if="!data" flex="~ items-center justify-center" h-full op50>
-    Loading...
-  </div>
+  <VisualLoading v-if="!data" />
   <ClientScriptsList v-else :scripts="data" />
 </template>