ultimate-jekyll-manager 1.8.1 → 1.9.1

package/CHANGELOG.md

@@ -14,6 +14,37 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - `Fixed` for any bug fixes.
 - `Security` in case of vulnerabilities.
 
+---
+## [1.9.1] - 2026-06-17
+
+### Changed
+
+- **FormManager: snapshot-and-restore disabled-state model (replaces `data-fm-keep-disabled`).** `_init()` now snapshots every element that has `disabled` in HTML markup (excluding submit buttons — those are loading guards FM takes over). Snapshotted elements stay disabled through every state transition automatically — no data attributes needed. Recommended form pattern: `<form data-form-state="initializing" onsubmit="return false">` with CSS `form[data-form-state]:not([data-form-state="ready"]) { pointer-events: none; }`. Documented in `docs/javascript-libraries.md`.
+
+### Added
+
+- **Comprehensive FormManager test suite (30 page-layer tests).** Disabled-state snapshot (5 tests), getData/setData/input groups (12 tests), validation/honeypot/file-accept (13 tests). Previously FormManager had zero automated tests.
+- **Visual Test 7 on the FM test page** (`/test/libraries/form-manager`) — permanently disabled elements, submit cycle demo, rapid-cycle button for manual verification.
+
+---
+## [1.9.0] - 2026-06-17
+
+### Added
+
+- **Token page: MCP OAuth flow.** When the `/token` page receives `?mcp=true&redirect_uri=...&state=...`, it completes an OAuth-style handshake — the user signs in via Firebase Auth, the page obtains a fresh ID token, and redirects back to the `redirect_uri` with `code=<idToken>&state=<state>`. This lets Claude (or any MCP client) authenticate users through the existing sign-in UI without a custom OAuth server.
+
+### Changed
+
+- **Dev-URL guidance updated** — docs (local-development.md, themes.md, cdp-debugging.md, CLAUDE.md) now say "prefer `https://localhost:4000`; fall back to the network IP if localhost doesn't connect" instead of hardcoding a specific IP.
+
+---
+## [1.8.2] - 2026-06-14
+
+### Added
+
+- **FormManager: `data-fm-keep-disabled` opt-out for permanently-disabled fields.** `_setDisabled` blanket-toggles `disabled` on every control in the form (loading/submitting ↔ ready), which silently re-enabled fields meant to STAY disabled — e.g. "coming soon" radio options rendered inside a managed form. Controls carrying `data-fm-keep-disabled` are now always forced to `disabled = true` and never re-enabled. Documented in `docs/javascript-libraries.md` (FormManager section).
+- **`docs/cdp-debugging.md` — launching a controllable browser (mirrored across UJM/BEM/BXM/EM).** The canonical Chrome launch for agents and humans: CDP port + REQUIRED dedicated `--user-data-dir` (Chrome 136+ silently ignores the debug port on the default profile — verified on 149), the persistent agent profile (`~/Library/Application Support/chrome-profiles/agent` — log in once, state survives relaunches, verified), the shared-instance model (CDP is multi-client — agents share the one logged-in Chrome on one port, one tab each; a second profile/port only for a second identity), safe quit by profile match, and driving via the `chrome-devtools` MCP (`CHROME_CDP_PORT` set before the session) or any CDP client. UJM flavor: point it at the dev server for the edit → live-reload → screenshot/console/network loop. Indexed in CLAUDE.md.
+
 ---
 ## [1.8.1] - 2026-06-11
 

package/CLAUDE.md

@@ -174,7 +174,7 @@ Note: `-t` short alias belongs to `translation`. The `test` command uses `--test
 ## Development Workflow
 
 - **🚫 NEVER run `npm start` in a consumer project** — the user runs the dev server; running it again kills theirs. Assume it's already running; if it isn't, **instruct the user to run it** rather than running it yourself. Instead, **check `logs/dev.log`** after editing files to confirm the watcher recompiled successfully (`Reloading Browsers...` = success; `errored` = fix the error) — never tail/attach to the process. If editing multiple files, check the log once after the last edit. A change that breaks the build is not a completed change. Running `npx mgr test` is fine.
-- **Live-test UI changes via CDP.** After code changes compile, use the `chrome-devtools` MCP tools (screenshots, click, evaluate JS, console logs) to verify the change works in the running browser. This is the primary way to confirm UI changes — type-checking and test suites verify code correctness, not feature correctness. See `~/.claude/mcp-server/servers/chrome-devtools/CLAUDE.md`.
+- **Live-test UI changes via CDP.** After code changes compile, use the `chrome-devtools` MCP tools (screenshots, click, evaluate JS, console logs) to verify the change works in the running browser. This is the primary way to confirm UI changes — type-checking and test suites verify code correctness, not feature correctness. Read the URL from the consumer's `.temp/_config_browsersync.yml`. Prefer `https://localhost:4000`; fall back to the local network IP (e.g. `https://192.168.x.x:4000`) if localhost doesn't connect. See [docs/cdp-debugging.md](docs/cdp-debugging.md) + `~/.claude/mcp-server/servers/chrome-devtools/CLAUDE.md`.
 
 ## File Conventions
 
@@ -218,6 +218,7 @@ Deep references live in `docs/`. Treat docs as a first-class deliverable. **When
 - [docs/build-system.md](docs/build-system.md) — gulp pipeline (15 tasks), config flow, build modes, pure helpers
 - [docs/templating.md](docs/templating.md) — node-powertools bracket conventions, Liquid coexistence
 - [docs/local-development.md](docs/local-development.md) — browsersync URL, Firebase emulator connect, PurgeCSS safelist
+- [docs/cdp-debugging.md](docs/cdp-debugging.md) — launching a controllable Chrome (CDP) at the dev server, persistent agent profile (one-time logins), driving via MCP/CDP (screenshots, clicks, network)
 - [docs/logging.md](docs/logging.md) — `dev.log` / `build.log` / `test.log` tee, CI skip
 - [docs/common-mistakes.md](docs/common-mistakes.md) — the canonical "don't do this" list
 - [docs/assets.md](docs/assets.md) — UJM vs consumer file layout, section config (nav/footer/account), frontmatter-driven page customization, webpack aliases, page module pattern

package/PROGRESS.md

@@ -0,0 +1,24 @@
+# Project Progress Tracker
+> Agents and maintainers should update this file regularly to reflect the current state of the project.
+
+## Current Focus
+* **Goal:** FormManager disabled-state refactor (snapshot-and-restore)
+* **Current Phase:** Phase 1 — implementation + tests complete, docs pending
+* **Priority:** Medium
+* **Last Updated:** 2026-06-17 6:05 PM PDT
+* **Notes:** FM disabled-state refactor done + comprehensive FM test suite added (110 tests total, up from 80). Covers getData/setData/input groups/validation/honeypot/file-accept/disabled snapshot. Docs (javascript-libraries.md, CHANGELOG) still need updating before shipping.
+
+## Active Task List
+* [ ] Phase 1: FormManager disabled-state snapshot-and-restore
+  * [x] Task 1.1: Refactor `_setDisabled` to use snapshot instead of `data-fm-keep-disabled`
+  * [x] Task 1.2: Add `_permanentlyDisabled` Set, populated in `_init()` before first disable
+  * [x] Task 1.3: Write page-layer tests (5 tests: snapshot capture, full disable, selective re-enable, cycle durability, onsubmit HTML guard)
+  * [x] Task 1.4: All 85 tests passing
+  * [x] Task 1.5: Add visual Test 7 to FM test page (form-manager.html + JS) with permanently disabled fields + rapid-cycle demo
+  * [x] Task 1.6: Write comprehensive FM page-layer tests — getData/setData (12 tests), validation/honeypot/file-accept (13 tests). 110 total.
+  * [ ] Task 1.7: Update `docs/javascript-libraries.md` — replace `data-fm-keep-disabled` docs with new snapshot pattern + `onsubmit="return false"` + `data-form-state="initializing"` CSS guard
+  * [ ] Task 1.8: Update CHANGELOG with the change
+  * [ ] Task 1.9: Ship (commit, push, publish)
+
+## Completed Task List
+* [x] Phase 0: v1.9.0 release — MCP OAuth flow + CDP debugging docs + dev-URL updates

package/dist/assets/js/libs/form-manager.js

@@ -59,6 +59,7 @@ export class FormManager {
     // State
     this.state = 'initializing';
     this._isDirty = false;
+    this._permanentlyDisabled = new Set();
 
     // Event listeners
     this._listeners = {
@@ -92,6 +93,17 @@ export class FormManager {
    * Initialize the form manager
    */
   _init() {
+    // Snapshot elements that are disabled in HTML markup BEFORE the first
+    // blanket disable. These are business-logic disabled (e.g. "coming soon"
+    // options) and must stay disabled through every state transition.
+    // Submit buttons are excluded — disabled submit buttons in HTML are
+    // loading guards that FM takes over.
+    this.$form.querySelectorAll('button, input, select, textarea').forEach(($el) => {
+      if ($el.disabled && $el.type !== 'submit') {
+        this._permanentlyDisabled.add($el);
+      }
+    });
+
     // Disable form during initialization
     this._setDisabled(true);
 
@@ -782,7 +794,8 @@ export class FormManager {
   }
 
   /**
-   * Enable/disable form controls
+   * Enable/disable form controls. Elements snapshotted as permanently
+   * disabled during _init() are never re-enabled.
    */
   _setDisabled(disabled) {
     /* @dev-only:start */
@@ -792,6 +805,10 @@ export class FormManager {
     /* @dev-only:end */
 
     this.$form.querySelectorAll('button, input, select, textarea').forEach(($el) => {
+      if (this._permanentlyDisabled.has($el)) {
+        $el.disabled = true;
+        return;
+      }
       $el.disabled = disabled;
     });
   }

package/dist/assets/js/pages/test/libraries/form-manager/index.js

@@ -19,6 +19,7 @@ export default () => {
     initTestFormManual();
     initTestFormGroups();
     initTestFormFileDrop();
+    initTestFormSnapshot();
 
     // Resolve after initialization
     return resolve();
@@ -245,6 +246,58 @@ function initTestFormGroups() {
   });
 }
 
+// Test 7: Disabled-State Snapshot
+function initTestFormSnapshot() {
+  const formManager = new FormManager('#test-form-snapshot');
+  const $status = document.getElementById('snapshot-status');
+  const $cycleCount = document.getElementById('snapshot-cycle-count');
+  const $output = document.getElementById('snapshot-output');
+  const $cycleBtn = document.getElementById('snapshot-cycle');
+
+  let cycles = 0;
+
+  function logStates() {
+    const form = document.getElementById('test-form-snapshot');
+    const lines = [];
+    form.querySelectorAll('input, select, textarea, button').forEach(($el) => {
+      const label = $el.name || $el.type || $el.tagName.toLowerCase();
+      lines.push(`${label}: disabled=${$el.disabled}`);
+    });
+    $output.textContent = lines.join('\n');
+  }
+
+  formManager.on('statechange', ({ state }) => {
+    $status.textContent = `Status: ${state}`;
+    logStates();
+  });
+
+  formManager.on('submit', async ({ data }) => {
+    console.log('[Test 7] Submitting:', data);
+    logStates();
+    await simulateApi(2000);
+    cycles++;
+    $cycleCount.textContent = `Cycles: ${cycles}`;
+    formManager.showSuccess('Done! Permanently disabled fields should still be disabled.');
+  });
+
+  // Rapid cycle button — triggers 5 fast disable/enable cycles
+  $cycleBtn.addEventListener('click', async () => {
+    $cycleBtn.disabled = true;
+    for (let i = 0; i < 5; i++) {
+      formManager._setDisabled(true);
+      logStates();
+      await simulateApi(300);
+      formManager._setDisabled(false);
+      logStates();
+      await simulateApi(300);
+      cycles++;
+    }
+    $cycleCount.textContent = `Cycles: ${cycles}`;
+    $cycleBtn.disabled = false;
+    formManager.showSuccess('5 rapid cycles complete. Check that Enterprise/Region/Notes stayed disabled.');
+  });
+}
+
 // Test 6: File Drop
 function initTestFormFileDrop() {
   const formManager = new FormManager('#test-form-file-drop');

package/dist/assets/js/pages/token/index.js

@@ -1,4 +1,5 @@
 // This file is required by /token page to generate custom auth tokens for extensions/apps
+// Also handles MCP OAuth flow: user signs in → Firebase ID token sent back to Claude as auth code
 import authorizedFetch from '__main_assets__/js/libs/authorized-fetch.js';
 import webManager from 'web-manager';
 
@@ -11,19 +12,27 @@ export default function () {
   // Get URL params
   const url = new URL(window.location.href);
   const authReturnUrl = url.searchParams.get('authReturnUrl');
+  const mcpRedirectUri = url.searchParams.get('redirect_uri');
+  const mcpState = url.searchParams.get('state');
+  const isMcp = url.searchParams.get('mcp') === 'true';
 
   // Handle DOM ready
   webManager.dom().ready()
   .then(async () => {
     // Log
-    console.log('[Token] Initialized. authReturnUrl:', authReturnUrl);
+    console.log('[Token] Initialized.', isMcp ? 'MCP OAuth flow' : 'Standard flow', 'authReturnUrl:', authReturnUrl);
 
-    // Validate authReturnUrl if present
+    // Validate redirect URLs
     if (authReturnUrl && !webManager.isValidRedirectUrl(authReturnUrl)) {
       showError('Invalid redirect URL');
       return;
     }
 
+    if (isMcp && !mcpRedirectUri) {
+      showError('Missing redirect_uri for MCP OAuth flow');
+      return;
+    }
+
     // Wait for auth to be ready and get user
     webManager.auth().listen({ once: true }, async (state) => {
       const user = state.user;
@@ -35,7 +44,32 @@ export default function () {
       }
 
       try {
-        // Generate custom token
+        // MCP OAuth flow: return Firebase ID token as the authorization code
+        if (isMcp && mcpRedirectUri) {
+          updateStatus('Completing MCP authorization...');
+
+          const idToken = await webManager.auth().getIdToken(true);
+          const returnUrl = new URL(mcpRedirectUri);
+          returnUrl.searchParams.set('code', idToken);
+
+          if (mcpState) {
+            returnUrl.searchParams.set('state', mcpState);
+          }
+
+          const redirectUrl = returnUrl.toString();
+          console.log('[Token] MCP redirect to:', redirectUrl);
+
+          updateStatus('Redirecting to Claude...');
+
+          setTimeout(() => {
+            updateStatus('If you were not redirected, <a href="' + webManager.utilities().escapeHTML(redirectUrl) + '">click here to try again</a>.', true);
+          }, 3000);
+
+          window.location.href = redirectUrl;
+          return;
+        }
+
+        // Standard flow: generate custom token via BEM API
         updateStatus('Generating secure token...');
         const token = await generateCustomToken();
 

package/dist/defaults/dist/pages/test/libraries/form-manager.html

@@ -301,6 +301,78 @@ meta:
       </div>
     </div>
 
+    <!-- Test 7: Disabled-State Snapshot -->
+    <div class="col-lg-8">
+      <div class="card">
+        <div class="card-header">
+          <h5 class="mb-0">Test 7: Disabled-State Snapshot</h5>
+          <small class="text-muted">Elements disabled in HTML stay disabled through every FM state transition. Submit buttons are loading guards — FM takes them over.</small>
+        </div>
+        <div class="card-body">
+          <form id="test-form-snapshot" data-form-state="initializing" onsubmit="return false">
+            <div class="row">
+              <div class="col-md-6">
+                <h6 class="text-muted mb-3">FM-managed <span class="badge bg-success">enabled on ready</span></h6>
+                <div class="mb-3">
+                  <label for="snapshot-name" class="form-label">Name</label>
+                  <input type="text" class="form-control" id="snapshot-name" name="name" value="Ian">
+                </div>
+                <div class="mb-3">
+                  <label for="snapshot-email" class="form-label">Email</label>
+                  <input type="email" class="form-control" id="snapshot-email" name="email" value="ian@example.com">
+                </div>
+                <div class="mb-3">
+                  <label class="form-label d-block">Plan</label>
+                  <div class="form-check">
+                    <input type="radio" class="form-check-input" id="snapshot-plan-free" name="plan" value="free" checked>
+                    <label class="form-check-label" for="snapshot-plan-free">Free</label>
+                  </div>
+                  <div class="form-check">
+                    <input type="radio" class="form-check-input" id="snapshot-plan-pro" name="plan" value="pro">
+                    <label class="form-check-label" for="snapshot-plan-pro">Pro</label>
+                  </div>
+                  <div class="form-check">
+                    <input type="radio" class="form-check-input" id="snapshot-plan-enterprise" name="plan" value="enterprise" disabled>
+                    <label class="form-check-label" for="snapshot-plan-enterprise">Enterprise <span class="badge bg-secondary">Coming soon</span></label>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-6">
+                <h6 class="text-muted mb-3">Permanently disabled <span class="badge bg-danger">stays disabled</span></h6>
+                <div class="mb-3">
+                  <label for="snapshot-region" class="form-label">Region <span class="badge bg-secondary">Coming soon</span></label>
+                  <select class="form-select" id="snapshot-region" name="region" disabled>
+                    <option>US (coming soon)</option>
+                    <option>EU (coming soon)</option>
+                  </select>
+                </div>
+                <div class="mb-3">
+                  <label for="snapshot-notes" class="form-label">Internal notes <span class="badge bg-secondary">Admin only</span></label>
+                  <textarea class="form-control" id="snapshot-notes" name="notes" rows="2" disabled>Restricted field</textarea>
+                </div>
+                <div class="alert alert-info small mb-0">
+                  Enterprise radio, Region select, and Notes textarea have <code>disabled</code> in the HTML. FM snapshots them at init and never re-enables them. The other fields start without <code>disabled</code> — the form-level <code>data-form-state</code> + CSS blocks interaction until FM is ready.
+                </div>
+              </div>
+            </div>
+            <div class="d-flex gap-2">
+              <button type="submit" class="btn btn-primary" disabled>
+                <span class="button-text">Submit (watch disabled states)</span>
+              </button>
+              <button type="button" id="snapshot-cycle" class="btn btn-outline-warning">Rapid cycle (5x)</button>
+            </div>
+          </form>
+          <div class="mt-3 d-flex gap-3">
+            <small class="text-muted" id="snapshot-status">Status: initializing</small>
+            <small class="text-muted" id="snapshot-cycle-count">Cycles: 0</small>
+          </div>
+          <div class="mt-2">
+            <pre id="snapshot-output" class="bg-body-secondary p-2 rounded small" style="max-height: 160px; overflow: auto;">Submit to see disabled states toggle. Enterprise radio + Region select should NEVER re-enable.</pre>
+          </div>
+        </div>
+      </div>
+    </div>
+
     </div>
   </div>
 </section>