Show configured plugins in status panels

packages/ui/src/components/instance-service-status.tsx

@@ -6,7 +6,7 @@ import { getLogger } from "../lib/logger"
 
 const log = getLogger("session")
 
-type ServiceSection = "lsp" | "mcp"
+type ServiceSection = "lsp" | "mcp" | "plugins"
 
 interface InstanceServiceStatusProps {
   sections?: ServiceSection[]
@@ -51,20 +51,25 @@ const InstanceServiceStatus: Component<InstanceServiceStatusProps> = (props) =>
   })
   const isLoading = metadataContext?.isLoading ?? (() => false)
   const refreshMetadata = metadataContext?.refreshMetadata ?? (async () => Promise.resolve())
-  const sections = createMemo<ServiceSection[]>(() => props.sections ?? ["lsp", "mcp"])
+  const sections = createMemo<ServiceSection[]>(() => props.sections ?? ["lsp", "mcp", "plugins"])
   const includeLsp = createMemo(() => sections().includes("lsp"))
   const includeMcp = createMemo(() => sections().includes("mcp"))
+  const includePlugins = createMemo(() => sections().includes("plugins"))
   const showHeadings = () => props.showSectionHeadings !== false
 
   const metadataAccessor = metadataContext?.metadata ?? (() => instance().metadata)
   const metadata = createMemo(() => metadataAccessor())
   const hasLspMetadata = () => metadata()?.lspStatus !== undefined
   const hasMcpMetadata = () => metadata()?.mcpStatus !== undefined
+  const hasPluginsMetadata = () => metadata()?.plugins !== undefined
+
   const lspServers = createMemo(() => metadata()?.lspStatus ?? [])
   const mcpServers = createMemo(() => parseMcpStatus(metadata()?.mcpStatus ?? undefined))
+  const plugins = createMemo(() => metadata()?.plugins ?? [])
 
   const isLspLoading = () => isLoading() || !hasLspMetadata()
   const isMcpLoading = () => isLoading() || !hasMcpMetadata()
+  const isPluginsLoading = () => isLoading() || !hasPluginsMetadata()
 
 
   const [pendingMcpActions, setPendingMcpActions] = createSignal<Record<string, "connect" | "disconnect">>({})
@@ -213,10 +218,35 @@ const InstanceServiceStatus: Component<InstanceServiceStatusProps> = (props) =>
     </section>
   )
 
+  const renderPluginsSection = () => (
+    <section class="space-y-1.5">
+      <Show when={showHeadings()}>
+        <div class="text-xs font-medium text-muted uppercase tracking-wide">
+          Plugins
+        </div>
+      </Show>
+      <Show
+        when={!isPluginsLoading() && plugins().length > 0}
+        fallback={renderEmptyState(isPluginsLoading() ? "Loading plugins..." : "No plugins configured.")}
+      >
+        <div class="space-y-1.5">
+          <For each={plugins()}>
+            {(plugin) => (
+              <div class="px-2 py-1.5 rounded border bg-surface-secondary border-base">
+                <div class="text-xs text-primary font-medium break-words whitespace-normal">{plugin}</div>
+              </div>
+            )}
+          </For>
+        </div>
+      </Show>
+    </section>
+  )
+
   return (
     <div class={props.class}>
       <Show when={includeLsp()}>{renderLspSection()}</Show>
       <Show when={includeMcp()}>{renderMcpSection()}</Show>
+      <Show when={includePlugins()}>{renderPluginsSection()}</Show>
     </div>
   )
 }

packages/ui/src/components/instance/instance-shell2.tsx

@@ -128,7 +128,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
   const [activeResizeSide, setActiveResizeSide] = createSignal<"left" | "right" | null>(null)
   const [resizeStartX, setResizeStartX] = createSignal(0)
   const [resizeStartWidth, setResizeStartWidth] = createSignal(0)
-  const [rightPanelExpandedItems, setRightPanelExpandedItems] = createSignal<string[]>(["lsp", "mcp"])
+  const [rightPanelExpandedItems, setRightPanelExpandedItems] = createSignal<string[]>(["plan", "mcp", "lsp", "plugins"])
 
   const messageStore = createMemo(() => messageStoreBus.getOrCreate(props.instance.id))
 
@@ -855,16 +855,9 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
 
     const sections = [
       {
-        id: "lsp",
-        label: "LSP Servers",
-        render: () => (
-          <InstanceServiceStatus
-            initialInstance={props.instance}
-            sections={["lsp"]}
-            showSectionHeadings={false}
-            class="space-y-2"
-          />
-        ),
+        id: "plan",
+        label: "Plan",
+        render: renderPlanSectionContent,
       },
       {
         id: "mcp",
@@ -879,9 +872,28 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
         ),
       },
       {
-        id: "plan",
-        label: "Plan",
-        render: renderPlanSectionContent,
+        id: "lsp",
+        label: "LSP Servers",
+        render: () => (
+          <InstanceServiceStatus
+            initialInstance={props.instance}
+            sections={["lsp"]}
+            showSectionHeadings={false}
+            class="space-y-2"
+          />
+        ),
+      },
+      {
+        id: "plugins",
+        label: "Plugins",
+        render: () => (
+          <InstanceServiceStatus
+            initialInstance={props.instance}
+            sections={["plugins"]}
+            showSectionHeadings={false}
+            class="space-y-2"
+          />
+        ),
       },
     ]