feat(plugin-terminals): surface aggregated hub sessions as read-only

Show terminal sessions contributed by other devframes through the hub
(ctx.terminals) — such as code-server — in the terminals plugin's own tab.
They render read-only with the contributing tool's icon and name, stream
output from the hub's channel, and refresh as they start/stop. The plugin
offers no rename/restart/kill controls for sessions it doesn't own.

Author: antfubot

plugins/terminals/src/client/App.svelte

@@ -39,6 +39,15 @@
     return info.customTitle || info.processName || info.title
   }
 
+  /**
+   * Sessions aggregated from other devframes via the hub (they carry a
+   * `channel`) are surfaced read-only — this plugin doesn't own their process,
+   * so it offers no rename / restart / kill controls for them.
+   */
+  function isExternal(info: TerminalSessionInfo): boolean {
+    return Boolean(info.channel)
+  }
+
   function pickActive(list: TerminalSessionInfo[]): void {
     if (activeId && !list.some(x => x.id === activeId))
       activeId = null
@@ -176,20 +185,25 @@
           <button
             type="button"
             class={navTab({ active: activeId === s.id, class: 'group' })}
-            title={`${displayName(s)} — double-click to rename`}
+            title={isExternal(s) ? displayName(s) : `${displayName(s)} — double-click to rename`}
             onclick={() => (activeId = s.id)}
-            ondblclick={(e) => { e.preventDefault(); e.stopPropagation(); renamingId = s.id }}
+            ondblclick={(e) => { if (isExternal(s)) return; e.preventDefault(); e.stopPropagation(); renamingId = s.id }}
           >
             <span class={dot(statusDot(s.status))}></span>
+            {#if s.icon}
+              <div class="{s.icon} shrink-0"></div>
+            {/if}
             <span class="truncate">{displayName(s)}</span>
-            <span
-              role="button"
-              tabindex="-1"
-              aria-label="Close terminal"
-              class="i-ph-x op0 group-hover:op60 hover:op100! transition-opacity shrink-0"
-              onclick={(e) => { e.stopPropagation(); rpc.call('devframes-plugin-terminals:remove', { id: s.id }).catch(() => {}) }}
-              onkeydown={() => {}}
-            ></span>
+            {#if !isExternal(s)}
+              <span
+                role="button"
+                tabindex="-1"
+                aria-label="Close terminal"
+                class="i-ph-x op0 group-hover:op60 hover:op100! transition-opacity shrink-0"
+                onclick={(e) => { e.stopPropagation(); rpc.call('devframes-plugin-terminals:remove', { id: s.id }).catch(() => {}) }}
+                onkeydown={() => {}}
+              ></span>
+            {/if}
           </button>
         {/if}
       {/each}
@@ -248,7 +262,10 @@
       <span class={tag(s.mode === 'interactive' ? 'blue' : 'amber')}>
         {s.mode === 'interactive' ? 'interactive' : 'readonly'}
       </span>
-      <span class="font-mono truncate op-fade" title={`${s.command} ${s.args.join(' ')}`}>
+      <span class="font-mono truncate op-fade flex items-center gap-1.5" title={`${s.command} ${s.args.join(' ')}`}>
+        {#if s.icon}
+          <div class="{s.icon} shrink-0 text-base"></div>
+        {/if}
         {s.command}{s.args.length ? ` ${s.args.join(' ')}` : ''}
       </span>
       <span class="flex items-center gap-1.5 op-mute font-mono text-xs tabular-nums shrink-0">
@@ -262,12 +279,14 @@
 
       <div class="flex-1"></div>
 
-      <button type="button" class={iconButton({ variant: 'ghost', size: 'sm' })} title="Restart" onclick={() => rpc.call('devframes-plugin-terminals:restart', { id: s.id }).catch(() => {})}>
-        <div class="i-ph-arrow-clockwise-duotone"></div>
-      </button>
-      <button type="button" class={iconButton({ variant: 'ghost', size: 'sm' })} title="Kill" onclick={() => rpc.call('devframes-plugin-terminals:remove', { id: s.id }).catch(() => {})}>
-        <div class="i-ph-trash-duotone"></div>
-      </button>
+      {#if !isExternal(s)}
+        <button type="button" class={iconButton({ variant: 'ghost', size: 'sm' })} title="Restart" onclick={() => rpc.call('devframes-plugin-terminals:restart', { id: s.id }).catch(() => {})}>
+          <div class="i-ph-arrow-clockwise-duotone"></div>
+        </button>
+        <button type="button" class={iconButton({ variant: 'ghost', size: 'sm' })} title="Kill" onclick={() => rpc.call('devframes-plugin-terminals:remove', { id: s.id }).catch(() => {})}>
+          <div class="i-ph-trash-duotone"></div>
+        </button>
+      {/if}
     </div>
   {/if}
 

plugins/terminals/src/client/TerminalView.svelte

@@ -72,11 +72,15 @@
       })
     }
 
-    term.onResize(({ cols, rows }) => {
-      rpc.call('devframes-plugin-terminals:resize', { id: info.id, cols, rows }).catch(() => {})
-    })
+    // Aggregated hub sessions (they carry a `channel`) aren't owned by this
+    // plugin, so there's no local process to resize.
+    if (!info.channel) {
+      term.onResize(({ cols, rows }) => {
+        rpc.call('devframes-plugin-terminals:resize', { id: info.id, cols, rows }).catch(() => {})
+      })
+    }
 
-    reader = rpc.streaming.subscribe(TERMINAL_STREAM_CHANNEL, info.id)
+    reader = rpc.streaming.subscribe(info.channel || TERMINAL_STREAM_CHANNEL, info.id)
     ;(async () => {
       try {
         for await (const chunk of reader) {

plugins/terminals/src/constants.ts

@@ -8,6 +8,15 @@ export const PLUGIN_ID = 'devframes-plugin-terminals'
  */
 export const TERMINAL_STREAM_CHANNEL = 'devframes-plugin-terminals:output'
 
+/**
+ * Streaming channel the hub's own terminals subsystem (`ctx.terminals`) uses
+ * for aggregated sessions contributed by *other* devframes (e.g. code-server).
+ * Mirrors `@devframes/hub`'s internal channel name; the plugin surfaces those
+ * sessions read-only and reads their output from here. Kept as a literal so the
+ * plugin needs no build dependency on the hub.
+ */
+export const HUB_TERMINAL_STREAM_CHANNEL = 'devframe:terminals'
+
 /** Shared-state key holding the serializable session list. */
 export const SESSIONS_STATE_KEY = 'devframes-plugin-terminals:sessions'
 

plugins/terminals/src/node/manager.ts

@@ -17,6 +17,7 @@ import {
   DEFAULT_COLS,
   DEFAULT_ROWS,
   DEFAULT_SCROLLBACK,
+  HUB_TERMINAL_STREAM_CHANNEL,
   PRESETS_STATE_KEY,
   SESSIONS_STATE_KEY,
   TERMINAL_STREAM_CHANNEL,
@@ -58,13 +59,16 @@ interface HubTerminalEntry {
   title: string
   description?: string
   status: 'running' | 'stopped' | 'error'
-  icon?: string
+  icon?: string | { light: string, dark: string }
 }
 interface HubTerminalsBridge {
-  sessions: Map<string, { id: string }>
+  sessions: Map<string, HubTerminalEntry>
   register: (session: HubTerminalEntry) => unknown
   update: (session: HubTerminalEntry) => void
   remove?: (session: { id: string }) => void
+  events?: {
+    on: (event: 'terminal:session:updated', cb: (session: HubTerminalEntry) => void) => void
+  }
 }
 
 /** Map the plugin's session status onto the hub's coarser status set. */
@@ -137,10 +141,52 @@ export class TerminalManager {
         icon: p.icon,
       }))
     })
+
+    // When mounted in a hub, refresh our session list whenever another
+    // devframe's terminal session (e.g. code-server) changes, so those
+    // aggregated sessions appear/update/disappear in this plugin's UI. Guarded
+    // to foreign ids so mirroring our *own* sessions into the hub can't loop.
+    const hub = this.hubTerminals()
+    hub?.events?.on('terminal:session:updated', (session) => {
+      if (!this.sessions.has(session.id))
+        this.refreshSessionsState()
+    })
+  }
+
+  /** The hub's terminals subsystem when mounted in a hub, else undefined. */
+  private hubTerminals(): HubTerminalsBridge | undefined {
+    return (this.ctx as { terminals?: HubTerminalsBridge }).terminals
   }
 
   list(): TerminalSessionInfo[] {
-    return Array.from(this.sessions.values()).map(s => ({ ...s.info }))
+    const own = Array.from(this.sessions.values()).map(s => ({ ...s.info }))
+    const hub = this.hubTerminals()
+    if (!hub?.sessions)
+      return own
+
+    // Surface sessions contributed by *other* devframes (aggregated in the
+    // hub) as read-only entries, reading their output from the hub's channel.
+    const foreign: TerminalSessionInfo[] = []
+    for (const session of hub.sessions.values()) {
+      if (this.sessions.has(session.id))
+        continue
+      foreign.push({
+        id: session.id,
+        title: session.title,
+        mode: 'readonly',
+        status: session.status === 'stopped' ? 'exited' : session.status,
+        backend: 'pipe',
+        command: '',
+        args: [],
+        cwd: '',
+        cols: DEFAULT_COLS,
+        rows: DEFAULT_ROWS,
+        createdAt: 0,
+        icon: typeof session.icon === 'string' ? session.icon : session.icon?.light,
+        channel: HUB_TERMINAL_STREAM_CHANNEL,
+      })
+    }
+    return [...own, ...foreign]
   }
 
   getPresets(): TerminalPreset[] {
@@ -415,10 +461,20 @@ export class TerminalManager {
   }
 
   private publish(): void {
+    this.refreshSessionsState()
+    this.syncHub()
+  }
+
+  /**
+   * Push the current session list (own + aggregated hub sessions) into shared
+   * state. Kept separate from {@link publish} so the hub-session listener can
+   * refresh without re-running {@link syncHub} (which would re-emit hub events
+   * and loop).
+   */
+  private refreshSessionsState(): void {
     this.sessionsState?.mutate((draft) => {
       draft.sessions = this.list()
     })
-    this.syncHub()
   }
 
   /**

plugins/terminals/src/rpc/schemas.ts

@@ -29,6 +29,8 @@ export const sessionInfoSchema = v.object({
   rows: v.number(),
   pid: v.optional(v.number()),
   exitCode: v.optional(v.number()),
+  icon: v.optional(v.string()),
+  channel: v.optional(v.string()),
   presetId: v.optional(v.string()),
   createdAt: v.number(),
 })

plugins/terminals/src/types.ts

@@ -42,6 +42,8 @@ export interface TerminalSessionInfo {
   rows: number
   pid?: number
   exitCode?: number
+  icon?: string
+  channel?: string
   /** Preset this session was spawned from, if any. */
   presetId?: string
   createdAt: number

plugins/terminals/test/_utils.ts

@@ -10,6 +10,7 @@ import {
 } from 'devframe/node'
 import { createRpcClient } from 'devframe/rpc/client'
 import { createWsRpcChannel } from 'devframe/rpc/transports/ws-client'
+import { createEventEmitter } from 'devframe/utils/events'
 import { getPort } from 'get-port-please'
 import { H3 } from 'h3'
 import { createTerminalsDevframe } from '../src/index'
@@ -20,11 +21,61 @@ export type TerminalsServer = StartedServer & {
   port: number
 }
 
+interface FakeHubEntry {
+  id: string
+  title: string
+  description?: string
+  status: 'running' | 'stopped' | 'error'
+  icon?: string | { light: string, dark: string }
+}
+
+export interface FakeHubTerminals {
+  sessions: Map<string, FakeHubEntry>
+  events: ReturnType<typeof createEventEmitter>
+  register: (entry: FakeHubEntry) => FakeHubEntry
+  update: (patch: { id: string } & Partial<FakeHubEntry>) => void
+  remove: (entry: { id: string }) => void
+}
+
+/**
+ * Minimal stand-in for the hub's `ctx.terminals` aggregation host — a sessions
+ * map plus a `terminal:session:updated` emitter — so tests can exercise how the
+ * terminals plugin surfaces sessions contributed by *other* devframes.
+ */
+export function createFakeHubTerminals(): FakeHubTerminals {
+  const sessions = new Map<string, FakeHubEntry>()
+  const events = createEventEmitter()
+  return {
+    sessions,
+    events,
+    register(entry) {
+      sessions.set(entry.id, entry)
+      events.emit('terminal:session:updated', entry)
+      return entry
+    },
+    update(patch) {
+      const cur = sessions.get(patch.id)
+      if (cur)
+        Object.assign(cur, patch)
+      events.emit('terminal:session:updated', sessions.get(patch.id) ?? patch)
+    },
+    remove(entry) {
+      const cur = sessions.get(entry.id)
+      sessions.delete(entry.id)
+      events.emit('terminal:session:updated', cur ?? entry)
+    },
+  }
+}
+
 /**
  * Boot the terminals devframe in-process over real HTTP + WebSocket so the
- * full RPC + streaming path is exercised end to end.
+ * full RPC + streaming path is exercised end to end. Pass `hub` to attach a
+ * fake `ctx.terminals` before setup (as a hub mount would).
  */
-export async function startTerminalsServer(options: TerminalsOptions = {}): Promise<TerminalsServer> {
+export async function startTerminalsServer(
+  options: TerminalsOptions = {},
+  { hub }: { hub?: FakeHubTerminals } = {},
+): Promise<TerminalsServer> {
   const definition = createTerminalsDevframe({ allowArbitraryCommands: true, ...options })
   const host = '127.0.0.1'
   const port = await getPort({ host, random: true })
@@ -38,6 +89,8 @@ export async function startTerminalsServer(options: TerminalsOptions = {}): Prom
   })
 
   const ctx = await createHostContext({ cwd: process.cwd(), mode: 'dev', host: h3Host })
+  if (hub)
+    (ctx as { terminals?: FakeHubTerminals }).terminals = hub
   await definition.setup(ctx)
 
   const server = await startHttpAndWs({ context: ctx, host, port, app, auth: false })