feat: integrate Pi backend and Pi Web

pi-web/components/ExtensionStatusBar.test.mjs

@@ -0,0 +1,56 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import React from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { createJiti } from "jiti";
+
+const jiti = createJiti(import.meta.url, {
+  jsx: { runtime: "automatic" },
+  tsconfigPaths: true,
+});
+const {
+  ExtensionStatusBar,
+  formatExtensionStatusLine,
+  sanitizeExtensionStatusText,
+} = await jiti.import("./ExtensionStatusBar.tsx");
+
+test("sorts status text by hidden key like the Pi CLI footer", () => {
+  const statuses = [
+    { key: "20-memory", text: "memory" },
+    { key: "90-notify", text: "notify" },
+    { key: "10-permissions", text: "permissions" },
+    { key: "05-ponytail", text: "ponytail" },
+  ];
+
+  assert.equal(
+    formatExtensionStatusLine(statuses),
+    "ponytail permissions memory notify",
+  );
+});
+
+test("sanitizes status text for a single-line display", () => {
+  assert.equal(
+    sanitizeExtensionStatusText("  first\tsecond \r\n third  "),
+    "first second third",
+  );
+});
+
+test("renders a single status line without identifier keys", () => {
+  const html = renderToStaticMarkup(
+    React.createElement(ExtensionStatusBar, {
+      statuses: [
+        { key: "20-memory", text: "\x1b[32mmemory\x1b[0m" },
+        { key: "05-ponytail", text: "ponytail" },
+      ],
+    }),
+  );
+
+  assert.match(html, /aria-label="ponytail memory"/);
+  assert.match(html, /height:36px/);
+  assert.match(html, /border-top:1px solid var\(--border\)/);
+  assert.match(html, /background:transparent/);
+  assert.match(html, /font-family:var\(--font-mono\)/);
+  assert.match(html, />ponytail <\/span>/);
+  assert.match(html, />memory</);
+  assert.doesNotMatch(html, /05-ponytail|20-memory/);
+});