feat: mount vue apps, not web components (#1639)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Standalone web bundle with auto-mount utilities and a self-contained
test page.
* New responsive modal components for consistent mobile/desktop dialogs.
  * Header actions to copy OS/API versions.

* **Improvements**
* Refreshed UI styles (muted borders), accessibility and animation
refinements.
  * Theming updates and Tailwind v4–aligned, component-scoped styles.
  * Runtime GraphQL endpoint override and CSRF header support.

* **Bug Fixes**
* Safer network fetching and improved manifest/asset loading with
duplicate protection.

* **Tests/Chores**
* Parallel plugin tests, new extractor test suite, and updated
build/test scripts.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: elibosley

.github/workflows/main.yml

@@ -47,7 +47,7 @@ jobs:
       - name: Cache APT Packages
         uses: awalsh128/cache-apt-pkgs-action@v1.5.3
         with:
-          packages: bash procps python3 libvirt-dev jq zstd git build-essential libvirt-daemon-system
+          packages: bash procps python3 libvirt-dev jq zstd git build-essential libvirt-daemon-system php-cli
           version: 1.0
 
       - name: Install pnpm
@@ -147,22 +147,28 @@ jobs:
           (cd ../unraid-ui && pnpm test --coverage 2>/dev/null || pnpm test) > ui-test.log 2>&1 &
           UI_PID=$!
 
+          echo "🚀 Starting Plugin tests..."
+          (cd ../plugin && pnpm test) > plugin-test.log 2>&1 &
+          PLUGIN_PID=$!
+
           # Wait for all processes and capture exit codes
           wait $API_PID && echo "✅ API tests completed" || { echo "❌ API tests failed"; API_EXIT=1; }
           wait $CONNECT_PID && echo "✅ Connect tests completed" || { echo "❌ Connect tests failed"; CONNECT_EXIT=1; }
           wait $SHARED_PID && echo "✅ Shared tests completed" || { echo "❌ Shared tests failed"; SHARED_EXIT=1; }
           wait $WEB_PID && echo "✅ Web tests completed" || { echo "❌ Web tests failed"; WEB_EXIT=1; }
           wait $UI_PID && echo "✅ UI tests completed" || { echo "❌ UI tests failed"; UI_EXIT=1; }
+          wait $PLUGIN_PID && echo "✅ Plugin tests completed" || { echo "❌ Plugin tests failed"; PLUGIN_EXIT=1; }
 
           # Display all outputs
           echo "📋 API Test Results:" && cat api-test.log
           echo "📋 Connect Plugin Test Results:" && cat connect-test.log  
           echo "📋 Shared Package Test Results:" && cat shared-test.log
           echo "📋 Web Package Test Results:" && cat web-test.log
           echo "📋 UI Package Test Results:" && cat ui-test.log
+          echo "📋 Plugin Test Results:" && cat plugin-test.log
 
           # Exit with error if any test failed
-          if [[ ${API_EXIT:-0} -eq 1 || ${CONNECT_EXIT:-0} -eq 1 || ${SHARED_EXIT:-0} -eq 1 || ${WEB_EXIT:-0} -eq 1 || ${UI_EXIT:-0} -eq 1 ]]; then
+          if [[ ${API_EXIT:-0} -eq 1 || ${CONNECT_EXIT:-0} -eq 1 || ${SHARED_EXIT:-0} -eq 1 || ${WEB_EXIT:-0} -eq 1 || ${UI_EXIT:-0} -eq 1 || ${PLUGIN_EXIT:-0} -eq 1 ]]; then
             exit 1
           fi
 
@@ -379,7 +385,7 @@ jobs:
         uses: actions/upload-artifact@v4
         with:
           name: unraid-wc-rich
-          path: web/.nuxt/nuxt-custom-elements/dist/unraid-components
+          path: web/.nuxt/standalone-apps
 
   build-plugin-staging-pr:
     name: Build and Deploy Plugin

@tailwind-shared/base-utilities.css

@@ -1,7 +1,7 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
-@layer utilities {
-  :host {
+/* Utility defaults for web components (when we were using shadow DOM) */
+:host {
     --tw-divide-y-reverse: 0;
     --tw-border-style: solid;
     --tw-font-weight: initial;
@@ -48,21 +48,20 @@
     --tw-drop-shadow: initial;
     --tw-duration: initial;
     --tw-ease: initial;
-  }
 }
 
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: hsl(var(--border));
-  }
-
-
+/* Global border color - this is what's causing the issue! */
+/* Commenting out since it affects all elements globally
+*,
+::after,
+::before,
+::backdrop,
+::file-selector-button {
+  border-color: hsl(var(--border));
+}
+*/
 
-  body {
+body {
     --color-alpha: #1c1b1b;
     --color-beta: #f2f2f2;
     --color-gamma: #999999;
@@ -74,8 +73,7 @@
     --ring-shadow: 0 0 var(--color-beta);
   }
 
-  button:not(:disabled),
-  [role='button']:not(:disabled) {
-    cursor: pointer;
-  }
+button:not(:disabled),
+[role='button']:not(:disabled) {
+  cursor: pointer;
 }

@tailwind-shared/css-variables.css

@@ -1,7 +1,11 @@
 /* Hybrid theme system: Native CSS + Theme Store fallback */
-@layer base {
-  /* Light mode defaults */
-  :root {
+
+/* Light mode defaults */
+:root {
+    /* Override Tailwind v4 global styles to use webgui variables */
+    --ui-bg: var(--background-color) !important;
+    --ui-text: var(--text-color) !important;
+    
     --background: 0 0% 100%;
     --foreground: 0 0% 3.9%;
     --muted: 0 0% 96.1%;
@@ -30,6 +34,10 @@
 
   /* Dark mode */
   .dark {
+    /* Override Tailwind v4 global styles to use webgui variables */
+    --ui-bg: var(--background-color) !important;
+    --ui-text: var(--text-color) !important;
+    
     --background: 0 0% 3.9%;
     --foreground: 0 0% 98%;
     --muted: 0 0% 14.9%;
@@ -62,69 +70,4 @@
     --background: 0 0% 3.9%;
     --foreground: 0 0% 98%;
     --border: 0 0% 14.9%;
-  }
-
-  /* For web components: inherit CSS variables from the host */
-  :host {
-    --background: inherit;
-    --foreground: inherit;
-    --muted: inherit;
-    --muted-foreground: inherit;
-    --popover: inherit;
-    --popover-foreground: inherit;
-    --card: inherit;
-    --card-foreground: inherit;
-    --border: inherit;
-    --input: inherit;
-    --primary: inherit;
-    --primary-foreground: inherit;
-    --secondary: inherit;
-    --secondary-foreground: inherit;
-    --accent: inherit;
-    --accent-foreground: inherit;
-    --destructive: inherit;
-    --destructive-foreground: inherit;
-    --ring: inherit;
-    --chart-1: inherit;
-    --chart-2: inherit;
-    --chart-3: inherit;
-    --chart-4: inherit;
-    --chart-5: inherit;
-  }
-
-  /* Class-based dark mode support for web components using :host-context */
-  :host-context(.dark) {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
-
-  /* Alternative class-based dark mode support for specific Unraid themes */
-  :host-context(.dark[data-theme='black']),
-  :host-context(.dark[data-theme='gray']) {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-  }
-}
+  }

@tailwind-shared/index.css

@@ -2,4 +2,4 @@
 @import './css-variables.css';
 @import './unraid-theme.css';
 @import './base-utilities.css';
-@import './sonner.css';
+@import './sonner.css';

plugin/builder/__tests__/cli/setup-plugin-environment.spec.ts

@@ -4,6 +4,7 @@ import {
   setupPluginEnv,
 } from "../../cli/setup-plugin-environment";
 import { access, readFile } from "node:fs/promises";
+import { existsSync } from "node:fs";
 
 // Mock fs/promises
 vi.mock("node:fs/promises", () => ({
@@ -14,8 +15,19 @@ vi.mock("node:fs/promises", () => ({
   },
 }));
 
+// Mock node:fs
+vi.mock("node:fs", () => ({
+  existsSync: vi.fn(),
+}));
+
 beforeEach(() => {
   vi.resetAllMocks();
+  
+  // Mock existsSync to return true for test.txz
+  vi.mocked(existsSync).mockImplementation((path) => {
+    return path.toString().includes("test.txz");
+  });
+  
   vi.mocked(readFile).mockImplementation((path, encoding) => {
     console.log("Mock readFile called with:", path, encoding);
 
@@ -42,6 +54,7 @@ describe("validatePluginEnv", () => {
 
   it("validates required fields", async () => {
     const validEnv = {
+      apiVersion: "4.17.0",
       baseUrl: "https://example.com",
       txzPath: "./test.txz",
       pluginVersion: "2024.05.05.1232",
@@ -53,6 +66,7 @@ describe("validatePluginEnv", () => {
 
   it("throws on invalid URL", async () => {
     const invalidEnv = {
+      apiVersion: "4.17.0",
       baseUrl: "not-a-url",
       txzPath: "./test.txz",
       pluginVersion: "2024.05.05.1232",
@@ -63,6 +77,7 @@ describe("validatePluginEnv", () => {
 
   it("handles tag option in non-CI mode", async () => {
     const envWithTag = {
+      apiVersion: "4.17.0",
       baseUrl: "https://example.com",
       txzPath: "./test.txz",
       pluginVersion: "2024.05.05.1232",
@@ -77,6 +92,7 @@ describe("validatePluginEnv", () => {
 
   it("reads release notes when release-notes-path is provided", async () => {
     const envWithNotes = {
+      apiVersion: "4.17.0",
       baseUrl: "https://example.com",
       txzPath: "./test.txz",
       pluginVersion: "2024.05.05.1232",
@@ -100,6 +116,7 @@ describe("validatePluginEnv", () => {
     });
 
     const envWithEmptyNotes = {
+      apiVersion: "4.17.0",
       baseUrl: "https://example.com",
       txzPath: "./test.txz",
       pluginVersion: "2024.05.05.1232",

plugin/builder/__tests__/cli/setup-txz-environment.spec.ts

@@ -6,25 +6,57 @@ import { deployDir } from "../../utils/paths";
 
 describe("setupTxzEnvironment", () => {
   it("should return default values when no arguments are provided", async () => {
-    const envArgs = {};
-    const expected: TxzEnv = { ci: false, skipValidation: "false", compress: "1", txzOutputDir: join(startingDir, deployDir) };
+    const envArgs = {
+      apiVersion: "4.17.0",
+      baseUrl: "https://example.com"
+    };
+    const expected: TxzEnv = { 
+      apiVersion: "4.17.0",
+      baseUrl: "https://example.com",
+      ci: false, 
+      skipValidation: "false", 
+      compress: "1", 
+      txzOutputDir: join(startingDir, deployDir),
+      tag: "",
+      buildNumber: 1
+    };
 
     const result = await validateTxzEnv(envArgs);
 
     expect(result).toEqual(expected);
   });
 
   it("should parse and return provided environment arguments", async () => {
-    const envArgs = { ci: true, skipValidation: "true", txzOutputDir: join(startingDir, "deploy/release/test"), compress: '8' };
-    const expected: TxzEnv = { ci: true, skipValidation: "true", compress: "8", txzOutputDir: join(startingDir, "deploy/release/test") };
+    const envArgs = { 
+      apiVersion: "4.17.0",
+      baseUrl: "https://example.com",
+      ci: true, 
+      skipValidation: "true", 
+      txzOutputDir: join(startingDir, "deploy/release/test"), 
+      compress: '8' 
+    };
+    const expected: TxzEnv = { 
+      apiVersion: "4.17.0",
+      baseUrl: "https://example.com",
+      ci: true, 
+      skipValidation: "true", 
+      compress: "8", 
+      txzOutputDir: join(startingDir, "deploy/release/test"),
+      tag: "",
+      buildNumber: 1
+    };
 
     const result = await validateTxzEnv(envArgs);
 
     expect(result).toEqual(expected);
   });
 
   it("should warn and skip validation when skipValidation is true", async () => {
-    const envArgs = { skipValidation: "true" };
+    const envArgs = { 
+      apiVersion: "4.17.0",
+      baseUrl: "https://example.com",
+      skipValidation: "true" 
+    };
     const consoleWarnSpy = vi
       .spyOn(console, "warn")
       .mockImplementation(() => {});
@@ -38,7 +70,11 @@ describe("setupTxzEnvironment", () => {
   });
 
   it("should throw an error for invalid SKIP_VALIDATION value", async () => {
-    const envArgs = { skipValidation: "invalid" };
+    const envArgs = { 
+      apiVersion: "4.17.0",
+      baseUrl: "https://example.com",
+      skipValidation: "invalid" 
+    };
 
     await expect(validateTxzEnv(envArgs)).rejects.toThrow(
       "Must be true or false"

plugin/builder/build-txz.ts

@@ -29,7 +29,9 @@ const findManifestFiles = async (dir: string): Promise<string[]> => {
         }
       } else if (
         entry.isFile() &&
-        (entry.name === "manifest.json" || entry.name === "ui.manifest.json")
+        (entry.name === "manifest.json" || 
+         entry.name === "ui.manifest.json" || 
+         entry.name === "standalone.manifest.json")
       ) {
         files.push(entry.name);
       }
@@ -124,19 +126,21 @@ const validateSourceDir = async (validatedEnv: TxzEnv) => {
 
   const manifestFiles = await findManifestFiles(webcomponentDir);
   const hasManifest = manifestFiles.includes("manifest.json");
+  const hasStandaloneManifest = manifestFiles.includes("standalone.manifest.json");
   const hasUiManifest = manifestFiles.includes("ui.manifest.json");
 
-  if (!hasManifest || !hasUiManifest) {
+  // Accept either manifest.json (old web components) or standalone.manifest.json (new standalone apps)
+  if ((!hasManifest && !hasStandaloneManifest) || !hasUiManifest) {
     console.log("Existing Manifest Files:", manifestFiles);
     const missingFiles: string[] = [];
-    if (!hasManifest) missingFiles.push("manifest.json");
+    if (!hasManifest && !hasStandaloneManifest) missingFiles.push("manifest.json or standalone.manifest.json");
     if (!hasUiManifest) missingFiles.push("ui.manifest.json");
 
     throw new Error(
       `Webcomponents missing required file(s): ${missingFiles.join(", ")} - ` +
       `${!hasUiManifest ? "run 'pnpm build:wc' in unraid-ui for ui.manifest.json" : ""}` +
-      `${!hasManifest && !hasUiManifest ? " and " : ""}` +
-      `${!hasManifest ? "run 'pnpm build' in web for manifest.json" : ""}`
+      `${(!hasManifest && !hasStandaloneManifest) && !hasUiManifest ? " and " : ""}` +
+      `${(!hasManifest && !hasStandaloneManifest) ? "run 'pnpm build' in web for standalone.manifest.json" : ""}`
     );
   }
 

plugin/builder/cli/setup-txz-environment.ts

@@ -22,7 +22,7 @@ export const validateTxzEnv = async (
 ): Promise<TxzEnv> => {
   const validatedEnv = txzEnvSchema.parse(envArgs);
 
-  if ("skipValidation" in validatedEnv) {
+  if (validatedEnv.skipValidation === "true") {
     console.warn("skipValidation is true, skipping validation");
   }