npm - @amsterdamdatalabs/enact-extensions - Versions diffs - 0.1.0 → 0.1.1 - Mend

@amsterdamdatalabs/enact-extensions 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (152) hide show

package/web/index.html ADDED Viewed

@@ -0,0 +1,1188 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ENACT OS — Extensions</title>
+  <link rel="stylesheet" href="/assets/tokens/index.css" />
+  <style>
+    /* ── Reset & base ───────────────────────────────────────────────────── */
+    *, *::before, *::after { box-sizing: border-box; }
+    /* ── Layout ─────────────────────────────────────────────────────────── */
+    body {
+      min-height: 100vh;
+      background: var(--bg-canvas);
+      color: var(--text-primary);
+      display: flex;
+      flex-direction: column;
+    }
+    /* ── Header ─────────────────────────────────────────────────────────── */
+    .site-header {
+      position: sticky;
+      top: 0;
+      z-index: var(--z-sticky);
+      background: var(--surface-default);
+      border-bottom: 1px solid var(--border-subtle);
+      box-shadow: var(--shadow-sm);
+    }
+    .header-inner {
+      max-width: var(--container-max);
+      margin: 0 auto;
+      padding: var(--space-3) var(--space-6);
+      display: flex;
+      align-items: center;
+      gap: var(--space-4);
+    }
+    .header-logo {
+      height: 32px;
+      width: auto;
+      display: block;
+      flex-shrink: 0;
+    }
+    .header-divider {
+      width: 1px;
+      height: 24px;
+      background: var(--border-default);
+      flex-shrink: 0;
+    }
+    .header-title {
+      font-family: var(--font-display);
+      font-size: 1rem;
+      font-weight: 600;
+      letter-spacing: -0.01em;
+      color: var(--text-primary);
+      flex: 1;
+      white-space: nowrap;
+    }
+    .header-title span {
+      color: var(--brand-primary);
+    }
+    .header-actions {
+      display: flex;
+      align-items: center;
+      gap: var(--space-3);
+    }
+    /* ── Theme toggle ────────────────────────────────────────────────────── */
+    .theme-toggle {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 36px;
+      border-radius: var(--radius-sm);
+      border: 1px solid var(--border-default);
+      background: var(--surface-raised);
+      color: var(--text-secondary);
+      cursor: pointer;
+      transition: background var(--duration-fast) var(--ease-out),
+                  color var(--duration-fast) var(--ease-out),
+                  border-color var(--duration-fast) var(--ease-out);
+    }
+    .theme-toggle:hover {
+      background: var(--surface-sunken);
+      color: var(--text-primary);
+      border-color: var(--border-default);
+    }
+    .theme-toggle:focus-visible {
+      outline: none;
+      box-shadow: var(--shadow-focus);
+      border-color: var(--border-focus);
+    }
+    .theme-toggle svg { width: 16px; height: 16px; flex-shrink: 0; }
+    .theme-toggle .icon-sun { display: none; }
+    .theme-toggle .icon-moon { display: block; }
+    [data-theme="dark"] .theme-toggle .icon-sun { display: block; }
+    [data-theme="dark"] .theme-toggle .icon-moon { display: none; }
+    /* ── Main content ────────────────────────────────────────────────────── */
+    .main-content {
+      flex: 1;
+      max-width: var(--container-max);
+      margin: 0 auto;
+      padding: var(--space-8) var(--space-6);
+      width: 100%;
+    }
+    /* ── Page intro ──────────────────────────────────────────────────────── */
+    .page-intro {
+      margin-bottom: var(--space-8);
+    }
+    .page-heading {
+      font-family: var(--font-display);
+      font-size: 1.75rem;
+      font-weight: 700;
+      letter-spacing: -0.03em;
+      line-height: 1.2;
+      color: var(--text-primary);
+      margin: 0 0 var(--space-2);
+    }
+    .page-subheading {
+      font-size: 0.9375rem;
+      color: var(--text-secondary);
+      margin: 0;
+    }
+    .page-meta {
+      display: flex;
+      align-items: center;
+      gap: var(--space-4);
+      margin-top: var(--space-4);
+      flex-wrap: wrap;
+    }
+    .count-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--space-1-5);
+      padding: var(--space-1) var(--space-3);
+      background: var(--brand-primary-subtle);
+      color: var(--brand-primary);
+      border-radius: var(--radius-full);
+      font-size: 0.8125rem;
+      font-weight: 600;
+      font-family: var(--font-mono);
+    }
+    /* ── Filter bar ──────────────────────────────────────────────────────── */
+    .filter-bar {
+      display: flex;
+      align-items: center;
+      gap: var(--space-3);
+      margin-bottom: var(--space-6);
+      flex-wrap: wrap;
+    }
+    .filter-label {
+      font-size: 0.8125rem;
+      font-weight: 600;
+      color: var(--text-secondary);
+      white-space: nowrap;
+    }
+    .filter-pills {
+      display: flex;
+      gap: var(--space-2);
+      flex-wrap: wrap;
+    }
+    .filter-pill {
+      padding: var(--space-1) var(--space-3);
+      border-radius: var(--radius-full);
+      border: 1px solid var(--border-default);
+      background: var(--surface-default);
+      color: var(--text-secondary);
+      font-size: 0.8125rem;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all var(--duration-fast) var(--ease-out);
+    }
+    .filter-pill:hover {
+      border-color: var(--border-strong);
+      color: var(--text-primary);
+    }
+    .filter-pill:focus-visible {
+      outline: none;
+      box-shadow: var(--shadow-focus);
+      border-color: var(--border-focus);
+    }
+    .filter-pill.active {
+      background: var(--brand-primary);
+      border-color: var(--brand-primary);
+      color: var(--text-on-brand);
+    }
+    /* ── Plugin grid ─────────────────────────────────────────────────────── */
+    .plugins-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+      gap: var(--space-5);
+    }
+    @media (max-width: 640px) {
+      .plugins-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+    /* ── Plugin card ─────────────────────────────────────────────────────── */
+    .plugin-card {
+      background: var(--surface-default);
+      border: 1px solid var(--border-subtle);
+      border-radius: var(--radius-md);
+      box-shadow: var(--shadow-sm);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      transition: box-shadow var(--duration-fast) var(--ease-out),
+                  border-color var(--duration-fast) var(--ease-out),
+                  transform var(--duration-fast) var(--ease-out);
+    }
+    .plugin-card:hover {
+      box-shadow: var(--shadow-md);
+      border-color: var(--border-default);
+      transform: translateY(-1px);
+    }
+    .card-header {
+      padding: var(--space-5) var(--space-5) var(--space-4);
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: var(--space-3);
+    }
+    .card-title-group { flex: 1; min-width: 0; }
+    .card-name {
+      font-family: var(--font-display);
+      font-size: 1rem;
+      font-weight: 600;
+      color: var(--text-primary);
+      letter-spacing: -0.01em;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin: 0 0 var(--space-1);
+    }
+    .card-version {
+      font-family: var(--font-mono);
+      font-size: 0.75rem;
+      color: var(--text-muted);
+    }
+    .card-meta {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--space-2);
+      padding: 0 var(--space-5) var(--space-3);
+    }
+    /* Category badge */
+    .badge-category {
+      display: inline-flex;
+      align-items: center;
+      padding: 2px var(--space-2);
+      border-radius: var(--radius-xs);
+      font-size: 0.6875rem;
+      font-weight: 700;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+    }
+    .badge-cat-devops    { background: var(--adl-indigo-50);  color: var(--adl-indigo-700); }
+    .badge-cat-cmux      { background: var(--adl-cyan-50);    color: var(--adl-cyan-700); }
+    .badge-cat-dev       { background: var(--adl-mint-50);    color: var(--adl-mint-700); }
+    .badge-cat-nrm       { background: var(--adl-amber-50);   color: var(--adl-amber-700); }
+    .badge-cat-default   { background: var(--adl-navy-100);   color: var(--adl-navy-700); }
+    [data-theme="dark"] .badge-cat-devops  { background: var(--adl-indigo-900); color: var(--adl-indigo-200); }
+    [data-theme="dark"] .badge-cat-cmux   { background: var(--adl-navy-800);   color: var(--adl-cyan-300); }
+    [data-theme="dark"] .badge-cat-dev    { background: var(--adl-teal-900);   color: var(--adl-mint-300); }
+    [data-theme="dark"] .badge-cat-nrm    { background: var(--adl-amber-700);  color: var(--adl-amber-100); }
+    [data-theme="dark"] .badge-cat-default { background: var(--adl-navy-800); color: var(--adl-navy-200); }
+    /* Target chips */
+    .chip-target {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px var(--space-2);
+      border: 1px solid var(--border-subtle);
+      border-radius: var(--radius-xs);
+      font-family: var(--font-mono);
+      font-size: 0.6875rem;
+      font-weight: 500;
+      color: var(--text-secondary);
+      background: var(--surface-raised);
+    }
+    .chip-target.codex  { border-color: var(--adl-teal-200);   color: var(--adl-teal-700); }
+    .chip-target.claude { border-color: var(--adl-violet-200); color: var(--adl-violet-700); }
+    .chip-target.cursor { border-color: var(--adl-blue-200);   color: var(--adl-blue-700); }
+    .chip-target.enact  { border-color: var(--adl-mint-200);   color: var(--adl-mint-700); }
+    .chip-target.shared { border-color: var(--adl-cyan-200);   color: var(--adl-cyan-700); }
+    [data-theme="dark"] .chip-target.codex  { border-color: var(--adl-teal-800);   color: var(--adl-teal-300); }
+    [data-theme="dark"] .chip-target.claude { border-color: var(--adl-violet-800); color: var(--adl-violet-300); }
+    [data-theme="dark"] .chip-target.cursor { border-color: var(--adl-blue-800);   color: var(--adl-blue-300); }
+    [data-theme="dark"] .chip-target.enact  { border-color: var(--adl-mint-800);   color: var(--adl-mint-300); }
+    [data-theme="dark"] .chip-target.shared { border-color: var(--adl-cyan-800);   color: var(--adl-cyan-300); }
+    .card-description {
+      padding: 0 var(--space-5) var(--space-4);
+      font-size: 0.875rem;
+      color: var(--text-secondary);
+      line-height: 1.55;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      flex: 1;
+    }
+    /* Installed indicator */
+    .installed-indicator {
+      margin: 0 var(--space-5) var(--space-3);
+      padding: var(--space-2) var(--space-3);
+      background: var(--feedback-success-subtle);
+      border: 1px solid color-mix(in srgb, var(--feedback-success) 30%, transparent);
+      border-radius: var(--radius-sm);
+      font-size: 0.8125rem;
+      color: var(--feedback-success);
+      display: none;
+      align-items: center;
+      gap: var(--space-2);
+    }
+    .installed-indicator.visible { display: flex; }
+    .installed-indicator svg { width: 14px; height: 14px; flex-shrink: 0; }
+    .installed-platforms {
+      font-family: var(--font-mono);
+      font-size: 0.75rem;
+      opacity: 0.85;
+    }
+    /* Card controls */
+    .card-controls {
+      padding: var(--space-4) var(--space-5);
+      border-top: 1px solid var(--border-subtle);
+      background: var(--surface-raised);
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-3);
+    }
+    .controls-row {
+      display: flex;
+      gap: var(--space-3);
+      align-items: center;
+    }
+    /* Select */
+    .ctrl-select {
+      flex: 1;
+      min-width: 0;
+    }
+    .ctrl-select label {
+      display: block;
+      font-size: 0.75rem;
+      font-weight: 600;
+      color: var(--text-muted);
+      margin-bottom: var(--space-1);
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+    }
+    .ctrl-select select {
+      width: 100%;
+      padding: var(--space-1-5) var(--space-3);
+      background: var(--surface-default);
+      border: 1px solid var(--border-default);
+      border-radius: var(--radius-sm);
+      color: var(--text-primary);
+      font-size: 0.8125rem;
+      font-family: var(--font-body);
+      cursor: pointer;
+      appearance: none;
+      -webkit-appearance: none;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2351647a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 10px center;
+      padding-right: var(--space-7);
+      transition: border-color var(--duration-fast) var(--ease-out);
+    }
+    .ctrl-select select:hover { border-color: var(--border-strong); }
+    .ctrl-select select:focus-visible {
+      outline: none;
+      border-color: var(--border-focus);
+      box-shadow: var(--shadow-focus);
+    }
+    /* Scope segmented control */
+    .ctrl-scope { flex: 1; min-width: 0; }
+    .ctrl-scope label {
+      display: block;
+      font-size: 0.75rem;
+      font-weight: 600;
+      color: var(--text-muted);
+      margin-bottom: var(--space-1);
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+    }
+    .scope-toggle {
+      display: flex;
+      border: 1px solid var(--border-default);
+      border-radius: var(--radius-sm);
+      overflow: hidden;
+    }
+    .scope-toggle button {
+      flex: 1;
+      padding: var(--space-1-5) var(--space-2);
+      border: none;
+      background: var(--surface-default);
+      color: var(--text-secondary);
+      font-size: 0.8125rem;
+      font-weight: 500;
+      font-family: var(--font-body);
+      cursor: pointer;
+      transition: background var(--duration-fast) var(--ease-out),
+                  color var(--duration-fast) var(--ease-out);
+      border-right: 1px solid var(--border-default);
+    }
+    .scope-toggle button:last-child { border-right: none; }
+    .scope-toggle button:hover {
+      background: var(--surface-sunken);
+      color: var(--text-primary);
+    }
+    .scope-toggle button:focus-visible {
+      outline: none;
+      box-shadow: inset var(--shadow-focus);
+    }
+    .scope-toggle button.active {
+      background: var(--brand-primary);
+      color: var(--text-on-brand);
+    }
+    .scope-toggle button.active:hover { background: var(--brand-primary-hover); }
+    /* Action buttons */
+    .actions-row {
+      display: flex;
+      gap: var(--space-2);
+    }
+    .btn {
+      flex: 1;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--space-1-5);
+      padding: var(--space-2) var(--space-3);
+      border-radius: var(--radius-sm);
+      font-size: 0.8125rem;
+      font-weight: 600;
+      font-family: var(--font-body);
+      cursor: pointer;
+      border: 1px solid transparent;
+      transition: all var(--duration-fast) var(--ease-out);
+      white-space: nowrap;
+      min-height: 34px;
+    }
+    .btn:focus-visible {
+      outline: none;
+      box-shadow: var(--shadow-focus);
+    }
+    .btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+    .btn-primary {
+      background: var(--brand-primary);
+      color: var(--text-on-brand);
+      border-color: transparent;
+    }
+    .btn-primary:hover { background: var(--brand-primary-hover); }
+    .btn-primary:active { background: var(--brand-primary-active); }
+    .btn-danger {
+      background: var(--surface-default);
+      color: var(--feedback-danger);
+      border-color: color-mix(in srgb, var(--feedback-danger) 35%, transparent);
+    }
+    .btn-danger:hover {
+      background: var(--feedback-danger-subtle);
+      border-color: var(--feedback-danger);
+    }
+    .btn-danger:active { opacity: 0.8; }
+    .btn-danger.installed-btn {
+      background: var(--feedback-danger-subtle);
+      border-color: color-mix(in srgb, var(--feedback-danger) 50%, transparent);
+      color: var(--feedback-danger);
+    }
+    /* Spinner */
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+    .spinner {
+      width: 13px;
+      height: 13px;
+      border: 2px solid currentColor;
+      border-top-color: transparent;
+      border-radius: 50%;
+      animation: spin 0.6s linear infinite;
+      flex-shrink: 0;
+    }
+    /* ── Toast region ────────────────────────────────────────────────────── */
+    .toast-region {
+      position: fixed;
+      bottom: var(--space-6);
+      right: var(--space-6);
+      z-index: var(--z-toast);
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-3);
+      pointer-events: none;
+      max-width: 400px;
+    }
+    .toast {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--space-3);
+      padding: var(--space-4) var(--space-5);
+      border-radius: var(--radius-md);
+      box-shadow: var(--shadow-lg);
+      pointer-events: all;
+      border: 1px solid transparent;
+      opacity: 0;
+      transform: translateY(8px);
+      transition: opacity var(--duration-fast) var(--ease-out),
+                  transform var(--duration-fast) var(--ease-out);
+      font-size: 0.875rem;
+      line-height: 1.4;
+    }
+    .toast.entering {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    .toast.leaving {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+    .toast-success {
+      background: var(--feedback-success-subtle);
+      border-color: color-mix(in srgb, var(--feedback-success) 30%, transparent);
+      color: var(--feedback-success);
+    }
+    .toast-error {
+      background: var(--feedback-danger-subtle);
+      border-color: color-mix(in srgb, var(--feedback-danger) 30%, transparent);
+      color: var(--feedback-danger);
+    }
+    .toast-icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
+    .toast-body { flex: 1; }
+    .toast-title { font-weight: 700; margin-bottom: 2px; }
+    .toast-msg { opacity: 0.85; }
+    .toast-close {
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: none;
+      background: transparent;
+      color: inherit;
+      cursor: pointer;
+      opacity: 0.6;
+      border-radius: var(--radius-xs);
+      padding: 0;
+      flex-shrink: 0;
+    }
+    .toast-close:hover { opacity: 1; }
+    .toast-close:focus-visible {
+      outline: none;
+      box-shadow: var(--shadow-focus);
+    }
+    /* ── Empty state ─────────────────────────────────────────────────────── */
+    .empty-state {
+      text-align: center;
+      padding: var(--space-20) var(--space-6);
+      color: var(--text-secondary);
+    }
+    .empty-state-icon {
+      font-size: 3rem;
+      margin-bottom: var(--space-4);
+      opacity: 0.4;
+    }
+    .empty-state h2 {
+      font-family: var(--font-display);
+      font-size: 1.25rem;
+      color: var(--text-secondary);
+      margin-bottom: var(--space-2);
+    }
+    .empty-state p { font-size: 0.9375rem; color: var(--text-muted); }
+    /* ── Loading skeleton ────────────────────────────────────────────────── */
+    @keyframes shimmer {
+      0%   { background-position: -400px 0; }
+      100% { background-position:  400px 0; }
+    }
+    .skeleton {
+      background: linear-gradient(
+        90deg,
+        var(--surface-raised) 25%,
+        var(--surface-sunken) 50%,
+        var(--surface-raised) 75%
+      );
+      background-size: 800px 100%;
+      animation: shimmer 1.4s infinite linear;
+      border-radius: var(--radius-sm);
+    }
+    .skeleton-card {
+      height: 260px;
+      border-radius: var(--radius-md);
+    }
+    /* ── Footer ─────────────────────────────────────────────────────────── */
+    .site-footer {
+      border-top: 1px solid var(--border-subtle);
+      padding: var(--space-5) var(--space-6);
+      text-align: center;
+      font-size: 0.8125rem;
+      color: var(--text-muted);
+    }
+    .site-footer a { color: var(--text-link); }
+    /* ── Misc ────────────────────────────────────────────────────────────── */
+    .visually-hidden {
+      position: absolute;
+      width: 1px; height: 1px;
+      padding: 0; margin: -1px;
+      overflow: hidden;
+      clip: rect(0,0,0,0);
+      white-space: nowrap;
+      border: 0;
+    }
+  </style>
+</head>
+<body>
+  <!-- ── Header ──────────────────────────────────────────────────────────── -->
+  <header class="site-header" role="banner">
+    <div class="header-inner">
+      <img src="/assets/logo-slim.png" alt="Amsterdam Data Labs" class="header-logo" />
+      <div class="header-divider" aria-hidden="true"></div>
+      <h1 class="header-title">ENACT OS — <span>Extensions</span></h1>
+      <div class="header-actions">
+        <button
+          class="theme-toggle"
+          id="theme-toggle"
+          aria-label="Toggle light/dark theme"
+          title="Toggle theme"
+          type="button"
+        >
+          <!-- Moon (shown in light mode) -->
+          <svg class="icon-moon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+          </svg>
+          <!-- Sun (shown in dark mode) -->
+          <svg class="icon-sun" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="5"/>
+            <line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/>
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+            <line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/>
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+  </header>
+  <!-- ── Main ────────────────────────────────────────────────────────────── -->
+  <main class="main-content" id="main" role="main">
+    <!-- Page intro -->
+    <div class="page-intro">
+      <h2 class="page-heading">Plugin Marketplace</h2>
+      <p class="page-subheading">Discover and install Enact OS extensions for Codex, Claude, Cursor, and more.</p>
+      <div class="page-meta">
+        <span class="count-badge" id="plugin-count" aria-live="polite">Loading…</span>
+      </div>
+    </div>
+    <!-- Filter bar (populated after data loads) -->
+    <div class="filter-bar" id="filter-bar" role="group" aria-label="Filter by category">
+      <span class="filter-label">Category:</span>
+      <div class="filter-pills" id="filter-pills"></div>
+    </div>
+    <!-- Plugin grid -->
+    <div
+      id="plugins-grid"
+      class="plugins-grid"
+      role="list"
+      aria-label="Available plugins"
+      aria-busy="true"
+    >
+      <!-- Skeleton loaders -->
+      <div class="skeleton skeleton-card" role="listitem" aria-label="Loading…"></div>
+      <div class="skeleton skeleton-card" role="listitem" aria-label="Loading…"></div>
+      <div class="skeleton skeleton-card" role="listitem" aria-label="Loading…"></div>
+    </div>
+  </main>
+  <!-- ── Footer ──────────────────────────────────────────────────────────── -->
+  <footer class="site-footer">
+    <span>ENACT OS Extensions &mdash; <a href="/api/index">/api/index</a></span>
+  </footer>
+  <!-- ── Toast region (aria-live polite) ─────────────────────────────────── -->
+  <div
+    class="toast-region"
+    id="toast-region"
+    aria-label="Notifications"
+  ></div>
+  <!-- ── App script ──────────────────────────────────────────────────────── -->
+  <script type="module">
+    // ─────────────────────────────────────────────────────────────────────────
+    // Theme management
+    // ─────────────────────────────────────────────────────────────────────────
+    const THEME_KEY = 'enact-theme';
+    const root = document.documentElement;
+    function applyTheme(theme) {
+      root.setAttribute('data-theme', theme);
+      localStorage.setItem(THEME_KEY, theme);
+    }
+    function initTheme() {
+      const saved = localStorage.getItem(THEME_KEY);
+      if (saved) {
+        applyTheme(saved);
+      } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        applyTheme('dark');
+      }
+    }
+    initTheme();
+    document.getElementById('theme-toggle').addEventListener('click', () => {
+      const current = root.getAttribute('data-theme');
+      applyTheme(current === 'dark' ? 'light' : 'dark');
+    });
+    // ─────────────────────────────────────────────────────────────────────────
+    // Toast system
+    // ─────────────────────────────────────────────────────────────────────────
+    const toastRegion = document.getElementById('toast-region');
+    function showToast(type, title, message, durationMs = 4000) {
+      const toast = document.createElement('div');
+      toast.className = `toast toast-${type}`;
+      toast.setAttribute('role', 'alert');
+      const isSuccess = type === 'success';
+      const iconHtml = isSuccess
+        ? `<svg class="toast-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`
+        : `<svg class="toast-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>`;
+      toast.innerHTML = `
+        ${iconHtml}
+        <div class="toast-body">
+          <div class="toast-title">${escHtml(title)}</div>
+          <div class="toast-msg">${escHtml(message)}</div>
+        </div>
+        <button class="toast-close" aria-label="Dismiss notification" type="button">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+            <line x1="1" y1="1" x2="13" y2="13"/><line x1="13" y1="1" x2="1" y2="13"/>
+          </svg>
+        </button>
+      `;
+      toast.querySelector('.toast-close').addEventListener('click', () => dismissToast(toast));
+      toastRegion.appendChild(toast);
+      // Animate in
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => toast.classList.add('entering'));
+      });
+      if (durationMs > 0) {
+        setTimeout(() => dismissToast(toast), durationMs);
+      }
+      return toast;
+    }
+    function dismissToast(toast) {
+      toast.classList.remove('entering');
+      toast.classList.add('leaving');
+      toast.addEventListener('transitionend', () => toast.remove(), { once: true });
+    }
+    function escHtml(str) {
+      return String(str)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+    }
+    // Summarise MCP dependency provisioning for the success toast. Returns a
+    // plain-text suffix (showToast escapes it via escHtml, so no markup here).
+    function provisionSummary(provision) {
+      const interesting = provision.filter(p => p && p.status && p.status !== 'skipped');
+      if (interesting.length === 0) return '';
+      const parts = interesting.map(p => {
+        const pkg = p.package ? ` ${p.package}` : '';
+        return `${p.server}:${p.status}${pkg}`;
+      });
+      return ` | Deps: ${parts.join(', ')}`;
+    }
+    // ─────────────────────────────────────────────────────────────────────────
+    // Data fetching
+    // ─────────────────────────────────────────────────────────────────────────
+    let installedMap = {};  // { pluginName: [{platform, scope, home, path}] }
+    let allPlugins = [];
+    let activeFilter = 'all';
+    async function fetchIndex() {
+      const res = await fetch('/api/index');
+      if (!res.ok) throw new Error(`/api/index returned ${res.status}`);
+      return res.json();
+    }
+    async function fetchInstalled() {
+      const res = await fetch('/api/installed');
+      if (!res.ok) throw new Error(`/api/installed returned ${res.status}`);
+      return res.json();
+    }
+    // ─────────────────────────────────────────────────────────────────────────
+    // Category helpers
+    // ─────────────────────────────────────────────────────────────────────────
+    function categoryClass(cat = '') {
+      const c = cat.toLowerCase();
+      if (c.includes('devops') || c.includes('azure')) return 'badge-cat-devops';
+      if (c.includes('cmux') || c.includes('terminal')) return 'badge-cat-cmux';
+      if (c.includes('dev') || c.includes('plugin')) return 'badge-cat-dev';
+      if (c.includes('revenue') || c.includes('nrm') || c.includes('management')) return 'badge-cat-nrm';
+      return 'badge-cat-default';
+    }
+    function inferCategory(plugin) {
+      // Try category field, else derive from name
+      if (plugin.category && plugin.category !== 'unknown' && plugin.category !== '') {
+        return plugin.category;
+      }
+      const n = plugin.name.toLowerCase();
+      if (n.includes('cmux')) return 'cmux';
+      if (n.includes('devops') || n.includes('azure')) return 'devops';
+      if (n.includes('revenue') || n.includes('nrm') || n.includes('management')) return 'net-revenue';
+      if (n.includes('dev') || n.includes('plugin')) return 'plugin-dev';
+      return 'extension';
+    }
+    // ─────────────────────────────────────────────────────────────────────────
+    // Render filter bar
+    // ─────────────────────────────────────────────────────────────────────────
+    function renderFilters(plugins) {
+      const categories = ['all', ...new Set(plugins.map(inferCategory))];
+      const container = document.getElementById('filter-pills');
+      container.innerHTML = '';
+      categories.forEach(cat => {
+        const btn = document.createElement('button');
+        btn.className = `filter-pill${cat === activeFilter ? ' active' : ''}`;
+        btn.textContent = cat === 'all' ? 'All' : cat;
+        btn.setAttribute('type', 'button');
+        btn.setAttribute('aria-pressed', cat === activeFilter ? 'true' : 'false');
+        btn.addEventListener('click', () => {
+          activeFilter = cat;
+          renderFilters(plugins);
+          renderCards(plugins);
+        });
+        container.appendChild(btn);
+      });
+    }
+    // ─────────────────────────────────────────────────────────────────────────
+    // Render plugin cards
+    // ─────────────────────────────────────────────────────────────────────────
+    function renderCards(plugins) {
+      const grid = document.getElementById('plugins-grid');
+      grid.setAttribute('aria-busy', 'false');
+      grid.innerHTML = '';
+      const filtered = activeFilter === 'all'
+        ? plugins
+        : plugins.filter(p => inferCategory(p) === activeFilter);
+      if (filtered.length === 0) {
+        grid.innerHTML = `
+          <div class="empty-state" style="grid-column: 1/-1;">
+            <div class="empty-state-icon" aria-hidden="true">📦</div>
+            <h2>No plugins found</h2>
+            <p>${activeFilter === 'all'
+              ? 'No extensions are available yet.'
+              : `No extensions in the "${escHtml(activeFilter)}" category.`}</p>
+          </div>
+        `;
+        return;
+      }
+      filtered.forEach(plugin => {
+        const card = buildCard(plugin);
+        grid.appendChild(card);
+      });
+    }
+    function buildCard(plugin) {
+      const installed = installedMap[plugin.name] ?? [];
+      const isInstalled = installed.length > 0;
+      const targets = Array.isArray(plugin.targets) ? plugin.targets : [];
+      const cat = inferCategory(plugin);
+      const article = document.createElement('article');
+      article.className = 'plugin-card';
+      article.setAttribute('role', 'listitem');
+      article.setAttribute('aria-label', `${plugin.name} extension`);
+      article.dataset.pluginName = plugin.name;
+      const installedPlatforms = installed.map(e => e.platform).join(', ');
+      article.innerHTML = `
+        <div class="card-header">
+          <div class="card-title-group">
+            <h3 class="card-name" title="${escHtml(plugin.name)}">${escHtml(plugin.name)}</h3>
+            <span class="card-version">v${escHtml(plugin.version ?? '0.0.0')}</span>
+          </div>
+        </div>
+        <div class="card-meta">
+          <span class="badge-category ${categoryClass(cat)}" aria-label="Category: ${escHtml(cat)}">${escHtml(cat)}</span>
+          ${targets.map(t => `<span class="chip-target ${escHtml(t.toLowerCase())}" aria-label="Supports ${escHtml(t)}">${escHtml(t)}</span>`).join('')}
+        </div>
+        <p class="card-description" title="${escHtml(plugin.description ?? '')}">${escHtml(plugin.description ?? 'No description available.')}</p>
+        <div class="installed-indicator${isInstalled ? ' visible' : ''}" aria-live="polite" id="installed-indicator-${escHtml(plugin.name)}">
+          <svg class="icon-check" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+          <span>Installed</span>
+          <span class="installed-platforms" aria-label="Installed platforms">${escHtml(installedPlatforms)}</span>
+        </div>
+        <div class="card-controls">
+          <div class="controls-row">
+            <div class="ctrl-select">
+              <label for="platform-${escHtml(plugin.name)}">Platform</label>
+              <select id="platform-${escHtml(plugin.name)}" name="platform" aria-label="Select installation platform for ${escHtml(plugin.name)}">
+                <option value="codex">codex</option>
+                <option value="claude">claude</option>
+                <option value="cursor">cursor</option>
+                <option value="enact">enact</option>
+                <option value="shared">shared</option>
+                <option value="all">all</option>
+              </select>
+            </div>
+            <div class="ctrl-scope">
+              <label id="scope-label-${escHtml(plugin.name)}">Scope</label>
+              <div class="scope-toggle" role="group" aria-labelledby="scope-label-${escHtml(plugin.name)}">
+                <button
+                  type="button"
+                  class="active"
+                  data-scope="global"
+                  aria-pressed="true"
+                  aria-label="Global scope for ${escHtml(plugin.name)}"
+                >Global</button>
+                <button
+                  type="button"
+                  data-scope="local"
+                  aria-pressed="false"
+                  aria-label="Local scope for ${escHtml(plugin.name)}"
+                >Local</button>
+              </div>
+            </div>
+          </div>
+          <div class="actions-row">
+            <button
+              type="button"
+              class="btn btn-primary"
+              data-action="install"
+              data-name="${escHtml(plugin.name)}"
+              aria-label="Install ${escHtml(plugin.name)}"
+              aria-busy="false"
+            >
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+              Install
+            </button>
+            <button
+              type="button"
+              class="btn btn-danger${isInstalled ? ' installed-btn' : ''}"
+              data-action="uninstall"
+              data-name="${escHtml(plugin.name)}"
+              aria-label="Uninstall ${escHtml(plugin.name)}"
+              aria-busy="false"
+            >
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
+              Uninstall
+            </button>
+          </div>
+        </div>
+      `;
+      // Scope segmented toggle behaviour
+      const scopeBtns = article.querySelectorAll('.scope-toggle button');
+      scopeBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+          scopeBtns.forEach(b => {
+            b.classList.remove('active');
+            b.setAttribute('aria-pressed', 'false');
+          });
+          btn.classList.add('active');
+          btn.setAttribute('aria-pressed', 'true');
+        });
+      });
+      // Install / Uninstall button click
+      article.querySelectorAll('.btn[data-action]').forEach(btn => {
+        btn.addEventListener('click', () => handleAction(btn, article, plugin));
+      });
+      return article;
+    }
+    // ─────────────────────────────────────────────────────────────────────────
+    // Install / Uninstall action
+    // ─────────────────────────────────────────────────────────────────────────
+    async function handleAction(btn, card, plugin) {
+      const action = btn.dataset.action; // 'install' | 'uninstall'
+      const endpoint = action === 'install' ? '/api/install' : '/api/uninstall';
+      const platformSelect = card.querySelector(`#platform-${CSS.escape(plugin.name)}`);
+      const platform = platformSelect?.value ?? 'codex';
+      const activeScope = card.querySelector('.scope-toggle button.active');
+      const scope = activeScope?.dataset.scope ?? 'global';
+      // Disable both buttons + show spinner
+      const allBtns = card.querySelectorAll('.btn[data-action]');
+      allBtns.forEach(b => {
+        b.disabled = true;
+        b.setAttribute('aria-busy', 'true');
+      });
+      const originalHtml = btn.innerHTML;
+      // For install, provisioning MCP-server deps runs server-side after the
+      // plugin files land; reflect that in the busy label.
+      btn.innerHTML = `<span class="spinner" aria-hidden="true"></span> ${action === 'install' ? 'Installing &amp; provisioning deps…' : 'Removing…'}`;
+      try {
+        const res = await fetch(endpoint, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ name: plugin.name, platform, scope }),
+        });
+        const data = await res.json();
+        if (data.ok) {
+          const label = action === 'install' ? 'Installed' : 'Removed';
+          let msg = `Platform: ${platform} | Scope: ${scope}`;
+          // Surface any MCP dependency provisioning that ran during install.
+          if (action === 'install' && Array.isArray(data.provision)) {
+            msg += provisionSummary(data.provision);
+          }
+          showToast('success', `${label}: ${plugin.name}`, msg);
+          // Refresh installed state for this card
+          try {
+            installedMap = await fetchInstalled();
+            updateCardInstalledState(card, plugin.name);
+          } catch {/* non-critical */}
+        } else {
+          showToast('error', `${action === 'install' ? 'Install' : 'Uninstall'} failed`, data.error ?? 'Unknown error');
+        }
+      } catch (err) {
+        showToast('error', 'Network error', err.message ?? String(err));
+      } finally {
+        btn.innerHTML = originalHtml;
+        allBtns.forEach(b => {
+          b.disabled = false;
+          b.setAttribute('aria-busy', 'false');
+        });
+      }
+    }
+    // Update a single card's installed indicator + uninstall button emphasis
+    function updateCardInstalledState(card, name) {
+      const installed = installedMap[name] ?? [];
+      const isInstalled = installed.length > 0;
+      const installedPlatforms = installed.map(e => e.platform).join(', ');
+      const indicator = card.querySelector(`#installed-indicator-${CSS.escape(name)}`);
+      if (indicator) {
+        indicator.classList.toggle('visible', isInstalled);
+        const platformSpan = indicator.querySelector('.installed-platforms');
+        if (platformSpan) platformSpan.textContent = installedPlatforms;
+      }
+      const uninstallBtn = card.querySelector('[data-action="uninstall"]');
+      if (uninstallBtn) {
+        uninstallBtn.classList.toggle('installed-btn', isInstalled);
+      }
+    }
+    // ─────────────────────────────────────────────────────────────────────────
+    // Initialise
+    // ─────────────────────────────────────────────────────────────────────────
+    async function init() {
+      const grid = document.getElementById('plugins-grid');
+      const countBadge = document.getElementById('plugin-count');
+      try {
+        // Parallel fetch
+        const [indexData, installed] = await Promise.all([
+          fetchIndex(),
+          fetchInstalled().catch(() => ({})),
+        ]);
+        installedMap = installed;
+        allPlugins = Array.isArray(indexData.plugins) ? indexData.plugins : [];
+        countBadge.textContent = `${allPlugins.length} plugin${allPlugins.length !== 1 ? 's' : ''}`;
+        if (allPlugins.length === 0) {
+          grid.setAttribute('aria-busy', 'false');
+          grid.innerHTML = `
+            <div class="empty-state" style="grid-column: 1/-1;">
+              <div class="empty-state-icon" aria-hidden="true">📦</div>
+              <h2>No plugins found</h2>
+              <p>No extensions are registered yet.</p>
+            </div>
+          `;
+          return;
+        }
+        renderFilters(allPlugins);
+        renderCards(allPlugins);
+      } catch (err) {
+        grid.setAttribute('aria-busy', 'false');
+        grid.innerHTML = `
+          <div class="empty-state" style="grid-column: 1/-1;">
+            <div class="empty-state-icon" aria-hidden="true">⚠️</div>
+            <h2>Failed to load extensions</h2>
+            <p>${escHtml(err.message ?? String(err))}</p>
+          </div>
+        `;
+        countBadge.textContent = '0 plugins';
+        showToast('error', 'Load error', err.message ?? String(err));
+      }
+    }
+    init();
+  </script>
+</body>
+</html>