feat(plugins): turn Info panel into a PI WEB status view

Rework the bundled Info plugin from a demo into an always-available
status view: running and installed versions, installation details,
release state, and per-service health rendered from host-provided
state, plus machine and workspace details. Replace the window.alert
demo action with a Copy PI WEB Diagnostics action that copies a
plain-text summary for bug reports.

Add state.selectedMachine to the stable plugin runtime state so
actions and other runtime callbacks can read the selected machine's
identity, and split the plugin into a copy-paste-friendly skeleton
(pi-web-plugin.ts) and replaceable internals (infoInternals.ts).
This commit is contained in:
Federico Jaramillo Martinez
2026-07-27 18:03:25 +02:00
parent 0a35748478
commit 8517800a24
9 changed files with 496 additions and 25 deletions
+13 -15
View File
@@ -1,4 +1,12 @@
// Skeleton of a PI WEB plugin: metadata plus contribution definitions.
//
// Everything the bundled Info panel and action actually render lives in
// infoInternals.ts. That file is replaceable implementation detail — when
// copying this plugin as a starting point, keep this file's shape and swap
// the internals for your own.
import type { PiWebPlugin } from "@jmfederico/pi-web/plugin-api";
import { copyDiagnostics, renderInfoPanel } from "./infoInternals.js";
const plugin: PiWebPlugin = {
apiVersion: 1,
@@ -7,14 +15,11 @@ const plugin: PiWebPlugin = {
contributions: {
actions: [
{
id: "workspace.show-path",
title: "Show Current Workspace Path",
id: "copy-diagnostics",
title: "Copy PI WEB Diagnostics",
description: "Copy version, installation, and status details for this machine, ready to paste into a bug report",
group: "Info",
enabled: (context) => context.state.selectedWorkspace !== undefined,
run: (context) => {
const path = context.state.selectedWorkspace?.path ?? "No workspace selected";
window.alert(path);
},
run: (context) => copyDiagnostics(context),
},
],
workspaceLabels: [
@@ -36,14 +41,7 @@ const plugin: PiWebPlugin = {
</svg>
`,
order: 1000,
render: (context) => html`
<section class="toolbar"><strong>Info</strong></section>
<section class="viewer">
<p><strong>Workspace</strong></p>
<p class="muted">${context.workspace.label}</p>
<p class="muted">${context.workspace.path}</p>
</section>
`,
render: (context) => renderInfoPanel(html, context),
},
],
},