MOH-Zambia
diff --git a/‎src/components/Panel.ts‎
Lines changed: 48 additions & 11 deletions b/‎src/components/Panel.ts‎
Lines changed: 48 additions & 11 deletions
diff --git a/‎tests/helpers/minimal-panel-harness.mjs‎
Lines changed: 223 additions & 0 deletions b/‎tests/helpers/minimal-panel-harness.mjs‎
Lines changed: 223 additions & 0 deletions
@@ -238,6 +238,14 @@ export class Panel {
   private retryAttempt = 0;
   private _fetching = false;
   private _locked = false;
+  // Snapshot of this.content's children at the moment showLocked /
+  // showGatedCta replaces them with a lock CTA. unlockPanel re-attaches
+  // these nodes so subclasses whose UI is constructed once (typically in
+  // the ctor — chips, input rows, static chrome) don't end up with a
+  // permanently empty body after a FREE→PRO auth-state cycle. The cache
+  // holds the actual DOM nodes; reattaching preserves any listeners and
+  // any subclass references like `this.inputEl`.
+  private _savedContent: ChildNode[] | null = null;
   private _collapsed = false;
   private _collapseBtn: HTMLButtonElement | null = null;
 
@@ -831,6 +839,7 @@ export class Panel {
   public showLocked(features: string[] = []): void {
     this._locked = true;
     this.clearRetryCountdown();
+    this._snapshotContentForRestore();
 
     for (let child = this.header.nextElementSibling; child && child !== this.content; child = child.nextElementSibling) {
       (child as HTMLElement).style.display = 'none';
@@ -869,15 +878,6 @@ export class Panel {
   }
 
   public showGatedCta(reason: PanelGateReason, onAction: () => void): void {
-    this._locked = true;
-    this.clearRetryCountdown();
-
-    // Hide elements between header and content (same as showLocked)
-    for (let child = this.header.nextElementSibling; child && child !== this.content; child = child.nextElementSibling) {
-      (child as HTMLElement).style.display = 'none';
-    }
-    this.element.classList.add('panel-is-locked');
-
     const config: Record<string, { icon: string; desc: string; cta: string }> = {
       [PanelGateReason.ANONYMOUS]: {
         icon: lockSvg,
@@ -894,6 +894,20 @@ export class Panel {
     const entry = config[reason];
     if (!entry) return; // PanelGateReason.NONE should never reach here
 
+    // Bail-out done — now commit to the locked state. Doing this AFTER the
+    // guard avoids a half-locked DOM (header siblings hidden, panel-is-locked
+    // class set, _savedContent populated) on the acknowledged-impossible
+    // NONE-reason path. PR #3814 review (Greptile P2).
+    this._locked = true;
+    this.clearRetryCountdown();
+    this._snapshotContentForRestore();
+
+    // Hide elements between header and content (same as showLocked)
+    for (let child = this.header.nextElementSibling; child && child !== this.content; child = child.nextElementSibling) {
+      (child as HTMLElement).style.display = 'none';
+    }
+    this.element.classList.add('panel-is-locked');
+
     const iconEl = h('div', { className: 'panel-locked-icon' });
     iconEl.innerHTML = entry.icon;
 
@@ -913,8 +927,27 @@ export class Panel {
     for (let child = this.header.nextElementSibling; child && child !== this.content; child = child.nextElementSibling) {
       (child as HTMLElement).style.display = '';
     }
-    // Clear the locked state content
-    replaceChildren(this.content);
+    // Restore the pre-lock content if we have it. The saved nodes are the
+    // ORIGINAL DOM nodes the subclass built — reattaching preserves event
+    // listeners and any references the subclass holds (this.inputEl etc.),
+    // and fixes constructor-only subclasses (DeductionPanel,
+    // ChatAnalystPanel, …) that would otherwise end up with an empty body.
+    // Fall back to the legacy empty-content behaviour if nothing was saved.
+    if (this._savedContent !== null) {
+      replaceChildren(this.content, ...this._savedContent);
+      this._savedContent = null;
+    } else {
+      replaceChildren(this.content);
+    }
+  }
+
+  // Capture this.content's current child nodes so unlockPanel can put them
+  // back. Only snapshots on the FIRST transition into a lock state — a
+  // re-entrant showLocked / showGatedCta must not overwrite the cache with
+  // the locked-state CTA. The cache is cleared by unlockPanel on restore.
+  private _snapshotContentForRestore(): void {
+    if (this._savedContent !== null) return;
+    this._savedContent = Array.from(this.content.childNodes);
   }
 
   public showRetrying(message?: string, countdownSeconds?: number): void {
@@ -1143,6 +1176,10 @@ export class Panel {
       this.contentDebounceTimer = null;
     }
     this.pendingContentHtml = null;
+    // Drop the snapshot of pre-lock children so a panel destroyed while
+    // still in the locked state doesn't retain the detached DOM subtree
+    // for the lifetime of the Panel instance. PR #3814 review (Greptile P2).
+    this._savedContent = null;
 
     if (this.tooltipCloseHandler) {
       document.removeEventListener('click', this.tooltipCloseHandler);
 
@@ -0,0 +1,223 @@
+// Bundles a tiny `extends Panel` subclass with no constructor-only-UI
+// override, so tests can prove the BASE-CLASS unlock-restore behavior
+// without depending on any specific premium panel's implementation.
+//
+// Mirrors the structure of chat-analyst-panel-harness.mjs (same stubs,
+// same browser-environment shim) but the esbuild entry is a virtual
+// in-memory file rather than a real source file.
+
+import { build } from 'esbuild';
+import { mkdtempSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { createBrowserEnvironment } from './runtime-config-panel-harness.mjs';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const root = resolve(__dirname, '..', '..');
+
+function snapshotGlobal(name) {
+  return {
+    exists: Object.prototype.hasOwnProperty.call(globalThis, name),
+    value: globalThis[name],
+  };
+}
+
+function restoreGlobal(name, snapshot) {
+  if (snapshot.exists) {
+    Object.defineProperty(globalThis, name, {
+      configurable: true,
+      writable: true,
+      value: snapshot.value,
+    });
+    return;
+  }
+  delete globalThis[name];
+}
+
+function defineGlobal(name, value) {
+  Object.defineProperty(globalThis, name, {
+    configurable: true,
+    writable: true,
+    value,
+  });
+}
+
+async function loadMinimalPanel() {
+  const tempDir = mkdtempSync(join(tmpdir(), 'wm-minimal-panel-'));
+  const outfile = join(tempDir, 'MinimalPanel.bundle.mjs');
+
+  // Virtual entry source — defines a minimal `extends Panel` subclass that
+  // builds its UI ONCE in the constructor (the exact shape that triggers
+  // the unlock-wipe bug). Imports the REAL Panel base class so the test
+  // exercises the actual unlock/restore code path.
+  const panelImportPath = resolve(root, 'src/components/Panel.ts').replace(/\\/g, '/');
+  const domUtilsPath = resolve(root, 'src/utils/dom-utils.ts').replace(/\\/g, '/');
+  const virtualEntrySource = `
+    import { Panel } from '${panelImportPath}';
+    import { h, replaceChildren } from '${domUtilsPath}';
+
+    // Module-level counter so a test can prove the ctor (and thus the
+    // initial DOM build) runs ONLY ONCE per panel instance — the whole
+    // point of base-class restore is to avoid rebuilding.
+    export let constructorRunCount = 0;
+    export function resetConstructorRunCount() { constructorRunCount = 0; }
+
+    export class MinimalConstructorOnlyPanel extends Panel {
+      static MARKER_CLASS = 'minimal-test-wrapper';
+      static INPUT_CLASS = 'minimal-test-input';
+
+      constructor() {
+        super({ id: 'minimal-test', title: 'Minimal Test' });
+        constructorRunCount += 1;
+        // Build UI ONCE — no buildUI() method, no override of unlockPanel.
+        // This mirrors DeductionPanel's shape (src/components/DeductionPanel.ts:30-77).
+        const input = h('textarea', { className: MinimalConstructorOnlyPanel.INPUT_CLASS });
+        const wrapper = h('div', { className: MinimalConstructorOnlyPanel.MARKER_CLASS }, input);
+        replaceChildren(this.content, wrapper);
+      }
+    }
+  `;
+
+  const stubModules = new Map([
+    ['i18n-stub', `export function t() { return ''; }`],
+    ['runtime-stub', `export function isDesktopRuntime() { return false; }`],
+    ['tauri-bridge-stub', `export function invokeTauri() { return Promise.reject(new Error('not wired in test')); }`],
+    ['analytics-stub', `export function trackPanelResized() {}`],
+    ['ai-flow-settings-stub', `export function getAiFlowSettings() { return { badgeAnimation: false }; }`],
+    ['runtime-config-stub', `export function getSecretState() { return { present: true }; }`],
+    ['panel-gating-stub', `
+      export const PanelGateReason = Object.freeze({
+        NONE: 'none',
+        ANONYMOUS: 'anonymous',
+        FREE_TIER: 'free_tier',
+      });
+    `],
+    ['checkout-stub', `export function startCheckout() {}`],
+    ['products-stub', `export const DEFAULT_UPGRADE_PRODUCT = 'pro';`],
+    ['virtual-entry', virtualEntrySource],
+  ]);
+
+  const aliasMap = new Map([
+    ['@/services/i18n', 'i18n-stub'],
+    ['../services/i18n', 'i18n-stub'],
+    ['@/services/runtime', 'runtime-stub'],
+    ['../services/runtime', 'runtime-stub'],
+    ['@/services/tauri-bridge', 'tauri-bridge-stub'],
+    ['../services/tauri-bridge', 'tauri-bridge-stub'],
+    ['@/services/analytics', 'analytics-stub'],
+    ['@/services/ai-flow-settings', 'ai-flow-settings-stub'],
+    ['@/services/runtime-config', 'runtime-config-stub'],
+    ['@/services/panel-gating', 'panel-gating-stub'],
+    ['@/services/checkout', 'checkout-stub'],
+    ['@/config/products', 'products-stub'],
+    ['virtual:minimal-entry', 'virtual-entry'],
+  ]);
+
+  const plugin = {
+    name: 'minimal-panel-test-stubs',
+    setup(buildApi) {
+      buildApi.onResolve({ filter: /.*/ }, (args) => {
+        const target = aliasMap.get(args.path);
+        return target ? { path: target, namespace: 'stub' } : null;
+      });
+
+      buildApi.onLoad({ filter: /.*/, namespace: 'stub' }, (args) => ({
+        contents: stubModules.get(args.path),
+        loader: 'ts',
+        resolveDir: root,
+      }));
+    },
+  };
+
+  const result = await build({
+    entryPoints: [{ in: 'virtual:minimal-entry', out: 'MinimalPanel.bundle' }],
+    bundle: true,
+    format: 'esm',
+    platform: 'browser',
+    target: 'es2020',
+    write: false,
+    plugins: [plugin],
+  });
+
+  writeFileSync(outfile, result.outputFiles[0].text, 'utf8');
+
+  const mod = await import(`${pathToFileURL(outfile).href}?t=${Date.now()}`);
+  return {
+    MinimalConstructorOnlyPanel: mod.MinimalConstructorOnlyPanel,
+    getConstructorRunCount: () => mod.constructorRunCount,
+    resetConstructorRunCount: mod.resetConstructorRunCount,
+    cleanupBundle() {
+      rmSync(tempDir, { recursive: true, force: true });
+    },
+  };
+}
+
+export async function createMinimalPanelHarness() {
+  const originalGlobals = {
+    document: snapshotGlobal('document'),
+    window: snapshotGlobal('window'),
+    localStorage: snapshotGlobal('localStorage'),
+    requestAnimationFrame: snapshotGlobal('requestAnimationFrame'),
+    cancelAnimationFrame: snapshotGlobal('cancelAnimationFrame'),
+    navigator: snapshotGlobal('navigator'),
+    HTMLElement: snapshotGlobal('HTMLElement'),
+    HTMLButtonElement: snapshotGlobal('HTMLButtonElement'),
+    Node: snapshotGlobal('Node'),
+  };
+  const browserEnvironment = createBrowserEnvironment();
+  const MiniNode = Object.getPrototypeOf(browserEnvironment.HTMLElement.prototype).constructor;
+
+  defineGlobal('document', browserEnvironment.document);
+  defineGlobal('window', browserEnvironment.window);
+  defineGlobal('localStorage', browserEnvironment.localStorage);
+  defineGlobal('requestAnimationFrame', browserEnvironment.requestAnimationFrame);
+  defineGlobal('cancelAnimationFrame', browserEnvironment.cancelAnimationFrame);
+  defineGlobal('navigator', browserEnvironment.window.navigator);
+  defineGlobal('HTMLElement', browserEnvironment.HTMLElement);
+  defineGlobal('HTMLButtonElement', browserEnvironment.HTMLButtonElement);
+  defineGlobal('Node', MiniNode);
+
+  let MinimalConstructorOnlyPanel;
+  let getConstructorRunCount;
+  let resetConstructorRunCount;
+  let cleanupBundle;
+  try {
+    ({
+      MinimalConstructorOnlyPanel,
+      getConstructorRunCount,
+      resetConstructorRunCount,
+      cleanupBundle,
+    } = await loadMinimalPanel());
+  } catch (error) {
+    restoreGlobal('document', originalGlobals.document);
+    restoreGlobal('window', originalGlobals.window);
+    restoreGlobal('localStorage', originalGlobals.localStorage);
+    restoreGlobal('requestAnimationFrame', originalGlobals.requestAnimationFrame);
+    restoreGlobal('cancelAnimationFrame', originalGlobals.cancelAnimationFrame);
+    restoreGlobal('navigator', originalGlobals.navigator);
+    restoreGlobal('HTMLElement', originalGlobals.HTMLElement);
+    restoreGlobal('HTMLButtonElement', originalGlobals.HTMLButtonElement);
+    restoreGlobal('Node', originalGlobals.Node);
+    throw error;
+  }
+
+  return {
+    document: browserEnvironment.document,
+    createPanel: () => new MinimalConstructorOnlyPanel(),
+    getConstructorRunCount,
+    resetConstructorRunCount,
+    cleanup() {
+      cleanupBundle();
+      restoreGlobal('document', originalGlobals.document);
+      restoreGlobal('window', originalGlobals.window);
+      restoreGlobal('localStorage', originalGlobals.localStorage);
+      restoreGlobal('requestAnimationFrame', originalGlobals.requestAnimationFrame);
+      restoreGlobal('cancelAnimationFrame', originalGlobals.cancelAnimationFrame);
+      restoreGlobal('navigator', originalGlobals.navigator);
+      restoreGlobal('HTMLElement', originalGlobals.HTMLElement);
+      restoreGlobal('HTMLButtonElement', originalGlobals.HTMLButtonElement);
+      restoreGlobal('Node', originalGlobals.Node);
+    },
+  };
+}