feat(design): shared connection indicator, shown only when disconnected

Add a framework-neutral `connectionIndicator(status)` helper to design/design.ts
that returns a dot + label pill for every non-connected state and `null` when
connected. Adopt it in each surface's top nav (inspect, messages, data-inspector,
git), replacing their bespoke pills/badges, so the connection state renders
identically everywhere and only appears while the connection is not live.

Author: antfubot

design/design.ts

@@ -89,6 +89,40 @@ export function navBrand(extra?: string): string {
   return cx('flex items-center gap-1.5 shrink-0 font-semibold text-sm select-none', extra)
 }
 
+// Mirrors devframe's `DevframeConnectionStatus` (kept local so this class-helper
+// module stays free of package imports); the two share the same string members.
+export type ConnectionStatus = 'connecting' | 'connected' | 'unauthorized' | 'disconnected' | 'error'
+
+export interface ConnectionIndicator {
+  /** Short status label, e.g. `disconnected`. */
+  label: string
+  /** Class chain for the status dot. */
+  dot: string
+  /** Class chain for the pill wrapper. */
+  class: string
+}
+
+const CONNECTION_TONE: Record<Exclude<ConnectionStatus, 'connected'>, { label: string, dot: string }> = {
+  connecting: { label: 'connecting…', dot: 'bg-neutral-400 animate-pulse' },
+  disconnected: { label: 'disconnected', dot: 'bg-error' },
+  unauthorized: { label: 'unauthorized', dot: 'bg-warning' },
+  error: { label: 'error', dot: 'bg-error' },
+}
+
+// The shared top-nav connection indicator: a small status dot + label. Returns
+// `null` when the client is `connected`, so every surface renders the indicator
+// only while the connection is not live.
+export function connectionIndicator(status: ConnectionStatus, extra?: string): ConnectionIndicator | null {
+  if (status === 'connected')
+    return null
+  const tone = CONNECTION_TONE[status]
+  return {
+    label: tone.label,
+    dot: cx('inline-block size-1.5 rounded-full shrink-0', tone.dot),
+    class: cx('flex items-center gap-1.5 shrink-0 text-xs color-muted select-none', extra),
+  }
+}
+
 export function toolbar(extra?: string): string {
   return cx('flex items-center gap-2 shrink-0 h-8 px-2.5 border-b border-base bg-secondary text-sm', extra)
 }

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

@@ -2,8 +2,14 @@
 import ActionIconButton from '@antfu/design/components/Action/ActionIconButton.vue'
 import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
 import LayoutToolbar from '@antfu/design/components/Layout/LayoutToolbar.vue'
+import { computed } from 'vue'
+import { connectionIndicator } from '../../../../../design/design'
 import { connection } from '../composables/rpc'
 import { isDark } from '../composables/scheme'
+
+// The shared top-nav connection indicator (dot + label), shown only while the
+// connection is not live. The `static` mode badge below is a separate concept.
+const conn = computed(() => connectionIndicator(connection.status))
 </script>
 
 <template>
@@ -20,13 +26,10 @@ import { isDark } from '../composables/scheme'
         text="static"
         :color="false"
       />
-      <DisplayBadge
-        v-else-if="connection.status !== 'connected'"
-        class="flex items-center gap-1.5 py-1 text-xs select-none capitalize"
-        :title="connection.error ?? undefined"
-        :text="connection.status"
-        :color="connection.connected ? 100 : 200"
-      />
+      <span v-else-if="conn" :class="conn.class" :title="connection.error ?? undefined">
+        <span :class="conn.dot" />
+        {{ conn.label }}
+      </span>
     </div>
 
     <template #search>

plugins/git/src/client/components/dashboard.tsx

@@ -4,14 +4,13 @@ import type { DevframeRpcClient } from 'devframe/client'
 import type { PointerEvent as ReactPointerEvent } from 'react'
 import type { GitBranches } from '../../index'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { nav as navBar, navBrand, tab as tabClass, tabsList } from '../lib/design'
+import { connectionIndicator, nav as navBar, navBrand, tab as tabClass, tabsList } from '../lib/design'
 import { CommitDetailsPanel } from './commit-details-panel'
 import { ConnectionState } from './connection-state'
 import { LogPanel } from './log-panel'
 import { RpcProvider, useRpc } from './rpc-provider'
 import { StatusPanel } from './status-panel'
 import { useTheme } from './theme'
-import { Badge } from './ui/badge'
 import { IconButton } from './ui/button'
 import { Icon } from './ui/icon'
 import { useRpcResource } from './use-rpc-resource'
@@ -91,19 +90,18 @@ function Resizer({ onPointerDown, label }: { onPointerDown: (e: ReactPointerEven
   )
 }
 
+// The shared top-nav connection indicator (dot + label), shown only while the
+// connection is not live; when connected it renders nothing.
 function ConnectionBadge() {
-  const { rpc, status } = useRpc()
-  if (status === 'error' || status === 'disconnected')
-    return <Badge variant="destructive">{status}</Badge>
-  if (status === 'unauthorized')
-    return <Badge variant="warning">unauthorized</Badge>
-  if (status === 'connecting' || !rpc)
-    return <Badge variant="secondary">connecting…</Badge>
-  const backend = rpc.connectionMeta.backend
+  const { status } = useRpc()
+  const conn = connectionIndicator(status)
+  if (!conn)
+    return null
   return (
-    <Badge variant={backend === 'websocket' ? 'success' : 'secondary'} className="font-mono">
-      {backend === 'websocket' ? 'live' : 'static'}
-    </Badge>
+    <span className={conn.class}>
+      <span className={conn.dot} />
+      {conn.label}
+    </span>
   )
 }
 

plugins/inspect/src/spa/App.vue

@@ -2,7 +2,8 @@
 import ActionIconButton from '@antfu/design/components/Action/ActionIconButton.vue'
 import LayoutTabs from '@antfu/design/components/Layout/LayoutTabs.vue'
 import LayoutToolbar from '@antfu/design/components/Layout/LayoutToolbar.vue'
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
+import { connectionIndicator } from '../../../../design/design'
 import AgentSmart from './components/AgentSmart.vue'
 import FunctionsSmart from './components/FunctionsSmart.vue'
 import HistorySmart from './components/HistorySmart.vue'
@@ -15,6 +16,10 @@ type Tab = 'functions' | 'state' | 'agent' | 'history'
 const tab = ref<Tab>('functions')
 const { refresh, loading } = useRefresh()
 
+// The shared connection indicator (dot + label) surfaces only while the
+// connection is not live; when connected it renders nothing.
+const conn = computed(() => connectionIndicator(connection.status))
+
 const tabs: { value: Tab, label: string, icon: string }[] = [
   { value: 'functions', label: 'Functions', icon: 'i-ph-function-duotone' },
   { value: 'state', label: 'State', icon: 'i-ph-database-duotone' },
@@ -45,17 +50,10 @@ function reload(): void {
       </template>
 
       <template #end>
-        <div
-          class="conn"
-          :class="{ ok: connection.connected, err: connection.status === 'error' || connection.status === 'disconnected', warn: connection.status === 'unauthorized' }"
-        >
-          <span class="led" />
-          <span v-if="connection.status === 'disconnected'">disconnected</span>
-          <span v-else-if="connection.status === 'unauthorized'">unauthorized</span>
-          <span v-else-if="connection.status === 'error'">error</span>
-          <span v-else-if="connection.connected">{{ connection.backend }}</span>
-          <span v-else>connecting…</span>
-        </div>
+        <span v-if="conn" :class="conn.class">
+          <span :class="conn.dot" />
+          {{ conn.label }}
+        </span>
 
         <ActionIconButton
           class="text-sm"

plugins/inspect/src/spa/style.css

@@ -97,34 +97,7 @@ textarea {
 }
 
 /* ---- header: the LayoutToolbar, LayoutTabs and ActionIconButton come from
-   `@antfu/design`; only the connection status pill below stays bespoke. ---- */
-.conn {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  font-size: 11.5px;
-  color: var(--df-fg-dim);
-}
-
-.conn .led {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--df-fg-faint);
-}
-
-.conn.ok .led {
-  background: var(--df-accent);
-  box-shadow: 0 0 6px var(--df-accent);
-}
-
-.conn.err .led {
-  background: var(--df-danger);
-}
-
-.conn.warn .led {
-  background: var(--df-warning, #d9a441);
-}
+   `@antfu/design`; the connection indicator comes from `design/design.ts`. ---- */
 
 /* ---- body ---- */
 .app-body {

plugins/messages/src/client/App.vue

@@ -3,6 +3,7 @@ import type { DevframeConnectionStatus, DevframeRpcClient } from 'devframe/clien
 import type { DevframeMessageEntry } from '../types'
 import LayoutToolbar from '@antfu/design/components/Layout/LayoutToolbar.vue'
 import { computed, onBeforeUnmount, ref } from 'vue'
+import { connectionIndicator } from '../../../../design/design'
 import MessagesView from './components/MessagesView.vue'
 import { useMessages } from './state/messages'
 
@@ -29,6 +30,10 @@ const CONNECTION_COPY: Record<Exclude<DevframeConnectionStatus, 'connected'>, {
 }
 const connectionCopy = computed(() => status.value === 'connected' ? null : CONNECTION_COPY[status.value])
 
+// The shared top-nav connection indicator (dot + label), shown only while the
+// connection is not live.
+const conn = computed(() => connectionIndicator(status.value))
+
 function reload(): void {
   location.reload()
 }
@@ -81,6 +86,10 @@ async function onOpenFile(entry: DevframeMessageEntry): Promise<void> {
       </template>
 
       <template #end>
+        <span v-if="conn" :class="conn.class">
+          <span :class="conn.dot" />
+          {{ conn.label }}
+        </span>
         <span v-if="state.entries.length > 0" class="badge-muted font-mono">
           {{ state.entries.length }}
         </span>