feat(hub-ui): mount the real Git devframe in the playground

Replaces the two hand-rolled static "Alpha"/"Beta" devframes with the real
`@devframes/plugin-git` dashboard - the playground now shows this very
checkout's actual commit history, branches, and status instead of placeholder
pages.

`@devframes/plugin-git` is the one built-in plugin that doesn't itself depend
on `@devframes/vite` - every other plugin does, and mounting one of those here
would reintroduce the cyclic workspace dependency `hub-plugin.ts` already
avoids by hand-rolling its hub middleware, just one hop further out.

Author: antfubot

packages/hub-ui/package.json

@@ -34,7 +34,7 @@
     "build:node": "tsdown",
     "build:embedded": "vite build --config vite.embedded.config.ts",
     "build:standalone": "vite build --config src/client/standalone/vite.config.ts",
-    "dev": "pnpm -C ../.. exec turbo run build --filter=@devframes/hub... && vite --config playground/vite.config.ts",
+    "dev": "pnpm -C ../.. exec turbo run build --filter=@devframes/hub... --filter=@devframes/plugin-git... && vite --config playground/vite.config.ts",
     "typecheck": "tsc --noEmit",
     "prepack": "pnpm build",
     "storybook": "storybook dev -p 6014",
@@ -49,6 +49,7 @@
     "@antfu/design": "catalog:frontend",
     "@devframes/hub": "workspace:*",
     "@devframes/json-render": "workspace:*",
+    "@devframes/plugin-git": "workspace:*",
     "@iconify-json/ph": "catalog:frontend",
     "@storybook/addon-docs": "catalog:storybook",
     "@storybook/vue3-vite": "catalog:storybook",

packages/hub-ui/playground/devframes.ts

@@ -2,25 +2,31 @@ import type { HubInstance } from '@devframes/hub/initiate'
 import type { Plugin, ViteDevServer } from 'vite'
 import { Server as NodeHttpServer } from 'node:http'
 import { DEVFRAMES_HUB_BASE, initHub } from '@devframes/hub/initiate'
+import gitDevframe from '@devframes/plugin-git'
 import { PLAYGROUND_GROUP_ID } from './constants'
-import { playgroundAlphaDevframe, playgroundBetaDevframe } from './devframes'
 import { seedPlayground } from './seed'
 
 /**
  * Mounts a bare, headless hub instance as Vite dev-server middleware — just
  * enough backend for `main.ts`'s `DockStandalone`/`DockEmbedded` to connect
- * to (RPC, WebSocket, `__connection.json`), plus two tiny static devframes
- * (`devframes.ts`) so the dock bar has real mounted content to switch
- * between, not just the client-only entries `seed.ts` registers. No `ui`
- * slot, no renderer manifest: this playground is developing hub-ui itself,
- * not exercising the wider hub protocol (`examples/hub-vite` already does
- * that).
+ * to (RPC, WebSocket, `__connection.json`), plus a real mounted devframe (the
+ * Git dashboard, below) so the dock bar has real content to switch between,
+ * not just the client-only entries `seed.ts` registers. No `ui` slot, no
+ * renderer manifest: this playground is developing hub-ui itself, not
+ * exercising the wider hub protocol (`examples/hub-vite` already does that).
  *
  * A hand-rolled slice of `@devframes/vite/hub` rather than that package
  * itself — pulling it in here would make `@devframes/hub-ui` and
  * `@devframes/vite` depend on each other (`@devframes/vite` already carries
  * an optional peer dependency on `@devframes/hub-ui` for its own default UI
  * slot), a cyclic workspace dependency for no real benefit.
+ *
+ * `@devframes/plugin-git` is the one built-in plugin that doesn't itself
+ * depend on `@devframes/vite` (every other plugin does, for its own
+ * dev-spa/build tooling) — mounting any of those here would reintroduce the
+ * same cyclic dependency `@devframes/vite/hub` avoids, just one hop further
+ * out (hub-ui → that plugin → `@devframes/vite` → hub-ui again, via its peer
+ * dependency).
  */
 export function hubUiPlaygroundHub(): Plugin {
   let instance: HubInstance | undefined
@@ -56,10 +62,12 @@ export function hubUiPlaygroundHub(): Plugin {
         server: httpServer,
         ...(httpServer ? {} : { ws: { sidecar: true } }),
         // Collapsed under the "Playground Tools" group `seed.ts`'s
-        // `configure` registers below, alongside the "Ping" action.
+        // `configure` registers below, alongside the "Ping" action. Read-only
+        // (`write` stays unset) — this is a throwaway dev loop, not somewhere
+        // to stage/commit from. Inspects this very checkout: `cwd` above is
+        // this package's own directory.
         devframes: [
-          { devframe: playgroundAlphaDevframe, dock: { groupId: PLAYGROUND_GROUP_ID } },
-          { devframe: playgroundBetaDevframe, dock: { groupId: PLAYGROUND_GROUP_ID } },
+          { devframe: gitDevframe, dock: { groupId: PLAYGROUND_GROUP_ID } },
         ],
         configure: seedPlayground,
       })

packages/hub-ui/playground/devframes/alpha/index.html

@@ -28,8 +28,8 @@ const unrenderedDockEntry: PlaygroundUnrenderedDockEntry = {
 }
 
 /**
- * The dock-bar button collapsing the Alpha/Beta devframes (grouped by
- * `hub-plugin.ts`'s `devframes` entries) and the "Ping" action below —
+ * The dock-bar button collapsing the Git devframe (grouped by
+ * `hub-plugin.ts`'s `devframes` entry) and the "Ping" action below —
  * exercises the grouped-dock UI (`DockGroupButton`/`DockGroupPopover`) the
  * playground otherwise never touches.
  */
@@ -46,7 +46,7 @@ const playgroundGroup: DevframeViewGroup = {
 /**
  * A one-shot action dock — no panel of its own, just a client script
  * (`client-scripts/ping-action.ts`) the viewer imports and runs on click.
- * Grouped alongside the Alpha/Beta devframes above.
+ * Grouped alongside the Git devframe above.
  */
 const pingAction: DevframeViewAction = {
   type: 'action',