@pyric/cli 0.1.0-alpha.20 → 0.1.0-alpha.22

package/src/serve/runtime/chip-user-search.ts

@@ -0,0 +1,391 @@
+import type { AuthUserRecord } from 'pyric/auth';
+
+export interface UserSearchOptions {
+  container: HTMLElement;
+  onSelect: (user: AuthUserRecord) => void;
+}
+
+export interface UserSearchController {
+  setUsers(users: AuthUserRecord[]): void;
+  reset(): void;
+  focus(): void;
+}
+
+export function userDisplayLabel(user: AuthUserRecord): string {
+  if (user.displayName && user.displayName.trim().length > 0) {
+    return user.displayName.trim();
+  }
+  if (user.email && user.email.trim().length > 0) {
+    return user.email.trim();
+  }
+  return user.uid;
+}
+
+export function extractTenantFromUser(user: AuthUserRecord): string {
+  const claims = user.customClaims ?? {};
+  if (typeof claims.tenant === 'string') return claims.tenant;
+  if (claims.firebase && typeof (claims.firebase as Record<string, unknown>).tenant === 'string') {
+    return (claims.firebase as Record<string, unknown>).tenant as string;
+  }
+  return '';
+}
+
+export function getUserProviders(user: AuthUserRecord): string[] {
+  const providers = (user.providerUserInfo ?? [])
+    .map((p) => p.providerId)
+    .filter((id): id is string => typeof id === 'string' && id.length > 0);
+  if (user.isAnonymous && !providers.includes('anonymous')) {
+    providers.push('anonymous');
+  }
+  return providers;
+}
+
+function isAdminUser(user: AuthUserRecord): boolean {
+  const claims = user.customClaims ?? {};
+  return claims.admin === true || claims.role === 'admin';
+}
+
+export function filterUsers(
+  users: AuthUserRecord[],
+  query: string,
+  filter: string | null,
+): AuthUserRecord[] {
+  let list = users.filter((user) => user.disabled !== true);
+  if (filter) {
+    const f = filter.toLowerCase();
+    if (f === 'admin') {
+      list = list.filter(isAdminUser);
+    } else if (f === 'tenants') {
+      list = list.filter((u) => Boolean(extractTenantFromUser(u)));
+    } else {
+      list = list.filter((u) => getUserProviders(u).includes(f));
+    }
+  }
+
+  const q = query.trim().toLowerCase();
+  if (!q) return list;
+
+  return list.filter((u) => {
+    if (q.startsWith('provider:')) {
+      const target = q.slice(9).trim();
+      return getUserProviders(u).some((p) => p.toLowerCase().includes(target));
+    }
+    if (q.startsWith('role:')) {
+      const target = q.slice(5).trim();
+      const c = u.customClaims ?? {};
+      const role = String(c.role ?? '').toLowerCase();
+      return role.includes(target);
+    }
+    if (q.startsWith('tenant:')) {
+      const target = q.slice(7).trim();
+      const tenant = extractTenantFromUser(u).toLowerCase();
+      return tenant.includes(target);
+    }
+    if (q.startsWith('claim:')) {
+      const spec = q.slice(6).trim();
+      const delimiter = spec.includes('=') ? '=' : ':';
+      const [key, val] = spec.split(delimiter).map((s) => s.trim());
+      const c = u.customClaims ?? {};
+      if (key && val !== undefined) {
+        return String(c[key] ?? '').toLowerCase().includes(val);
+      }
+      return Object.keys(c).some((k) => k.toLowerCase().includes(spec));
+    }
+    if (q.includes(':') || q.includes('=')) {
+      const delimiter = q.includes('=') ? '=' : ':';
+      const [key, val] = q.split(delimiter).map((s) => s.trim());
+      const c = u.customClaims ?? {};
+      if (key && c[key] !== undefined && val !== undefined) {
+        return String(c[key]).toLowerCase().includes(val);
+      }
+    }
+
+    const name = (u.displayName ?? '').toLowerCase();
+    const email = (u.email ?? '').toLowerCase();
+    const uid = u.uid.toLowerCase();
+    const tenant = extractTenantFromUser(u).toLowerCase();
+    const providers = getUserProviders(u).join(' ').toLowerCase();
+    const claims = JSON.stringify(u.customClaims ?? {}).toLowerCase();
+
+    return (
+      name.includes(q)
+      || email.includes(q)
+      || uid.includes(q)
+      || tenant.includes(q)
+      || providers.includes(q)
+      || claims.includes(q)
+    );
+  });
+}
+
+export function createUserSearchController(options: UserSearchOptions): UserSearchController {
+  const { container, onSelect } = options;
+  const documentLike = container.ownerDocument;
+
+  container.innerHTML = `
+    <div class="user-search-box">
+      <span class="user-search-icon" aria-hidden="true">⌕</span>
+      <input
+        type="text"
+        class="user-search-input"
+        data-user-search-input
+        placeholder="Search name, uid, provider:google, role:admin..."
+        autocomplete="off"
+        role="combobox"
+        aria-label="Search sandbox users"
+        aria-autocomplete="list"
+        aria-expanded="false"
+        aria-controls="user-search-listbox"
+      />
+      <button type="button" class="user-search-clear-btn" data-search-clear-btn aria-label="Clear search" style="display: none;">✕</button>
+    </div>
+    <div class="filter-chips" data-filter-chips></div>
+    <ul
+      id="user-search-listbox"
+      class="user-search-listbox"
+      data-user-search-listbox
+      role="listbox"
+      aria-label="Matching users"
+    ></ul>
+  `;
+
+  const input = container.querySelector<HTMLInputElement>('[data-user-search-input]')!;
+  const clearBtn = container.querySelector<HTMLButtonElement>('[data-search-clear-btn]')!;
+  const filterChipsEl = container.querySelector<HTMLElement>('[data-filter-chips]')!;
+  const listbox = container.querySelector<HTMLUListElement>('[data-user-search-listbox]')!;
+
+  let cachedUsers: AuthUserRecord[] = [];
+  let currentMatches: AuthUserRecord[] = [];
+  let activeFilter: string | null = null;
+  let highlightedIndex = -1;
+
+  const updateHighlight = (index: number): void => {
+    highlightedIndex = index;
+    const items = Array.from(listbox.querySelectorAll<HTMLElement>('.user-search-item'));
+    items.forEach((item, idx) => {
+      if (idx === highlightedIndex) {
+        item.classList.add('highlighted');
+        item.setAttribute('aria-selected', 'true');
+        input.setAttribute('aria-activedescendant', item.id);
+        item.scrollIntoView?.({ block: 'nearest' });
+      } else {
+        item.classList.remove('highlighted');
+        item.setAttribute('aria-selected', 'false');
+      }
+    });
+    if (highlightedIndex < 0) {
+      input.removeAttribute('aria-activedescendant');
+    }
+  };
+
+  const renderFilterChips = (): void => {
+    if (cachedUsers.length === 0) {
+      filterChipsEl.innerHTML = '';
+      return;
+    }
+    const categories: Array<{ id: string | null; label: string }> = [
+      { id: null, label: 'All' },
+    ];
+    const hasAdmins = cachedUsers.some(isAdminUser);
+    if (hasAdmins) categories.push({ id: 'admin', label: 'Admins' });
+
+    const hasTenants = cachedUsers.some((u) => Boolean(extractTenantFromUser(u)));
+    if (hasTenants) categories.push({ id: 'tenants', label: 'Tenants' });
+
+    const providerSet = new Set<string>();
+    cachedUsers.forEach((u) => getUserProviders(u).forEach((p) => providerSet.add(p)));
+    providerSet.forEach((p) => categories.push({ id: p, label: p }));
+
+    filterChipsEl.replaceChildren();
+    for (const category of categories) {
+      const button = documentLike.createElement('button');
+      button.type = 'button';
+      button.className = 'filter-chip';
+      const isSelected = activeFilter === category.id;
+      if (isSelected) button.classList.add('selected');
+      button.setAttribute('aria-pressed', String(isSelected));
+      button.dataset.filter = category.id ?? '';
+      button.textContent = category.label;
+      filterChipsEl.append(button);
+    }
+  };
+
+  const renderMatches = (): void => {
+    currentMatches = filterUsers(cachedUsers, input.value, activeFilter);
+    highlightedIndex = -1;
+    input.removeAttribute('aria-activedescendant');
+
+    if (currentMatches.length === 0) {
+      const empty = documentLike.createElement('li');
+      empty.className = 'user-search-empty';
+      empty.setAttribute('role', 'presentation');
+      empty.textContent = 'No matching users found in sandbox';
+      listbox.replaceChildren(empty);
+      input.setAttribute('aria-expanded', 'true');
+      return;
+    }
+
+    const items = currentMatches.map((user, index) => {
+      const label = userDisplayLabel(user);
+      const tenant = extractTenantFromUser(user);
+      const providers = getUserProviders(user);
+      const claims = user.customClaims ?? {};
+      let claimsSummary = '';
+      if (Object.keys(claims).length > 0) {
+        claimsSummary = JSON.stringify(claims).slice(0, 40);
+      }
+
+      const item = documentLike.createElement('li');
+      item.id = `user-search-item-${index}`;
+      item.className = 'user-search-item';
+      item.setAttribute('role', 'option');
+      item.setAttribute('aria-selected', 'false');
+      item.dataset.userIndex = String(index);
+
+      const main = documentLike.createElement('div');
+      main.className = 'user-item-main';
+      const name = documentLike.createElement('span');
+      name.className = 'user-item-name';
+      name.textContent = label;
+      main.append(name);
+      if (user.email && user.email !== label) {
+        const email = documentLike.createElement('span');
+        email.className = 'user-item-email';
+        email.textContent = user.email;
+        main.append(email);
+      }
+      const uid = documentLike.createElement('span');
+      uid.className = 'user-item-uid';
+      uid.textContent = user.uid;
+      main.append(uid);
+
+      const badges = documentLike.createElement('div');
+      badges.className = 'user-item-badges';
+      for (const provider of providers) {
+        const badge = documentLike.createElement('span');
+        badge.className = 'badge badge-provider';
+        badge.textContent = provider;
+        badges.append(badge);
+      }
+      if (tenant) {
+        const badge = documentLike.createElement('span');
+        badge.className = 'badge badge-tenant';
+        badge.textContent = tenant;
+        badges.append(badge);
+      }
+      if (claimsSummary) {
+        const badge = documentLike.createElement('span');
+        badge.className = 'badge badge-claims';
+        badge.title = claimsSummary;
+        badge.textContent = claimsSummary;
+        badges.append(badge);
+      }
+
+      item.append(main, badges);
+      return item;
+    });
+    listbox.replaceChildren(...items);
+
+    listbox.style.display = 'block';
+    input.setAttribute('aria-expanded', 'true');
+  };
+
+  input.addEventListener('input', () => {
+    clearBtn.style.display = input.value.length > 0 ? 'inline-block' : 'none';
+    renderMatches();
+  });
+
+  input.addEventListener('focus', () => {
+    renderMatches();
+  });
+
+  clearBtn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    input.value = '';
+    clearBtn.style.display = 'none';
+    renderMatches();
+    input.focus();
+  });
+
+  input.addEventListener('keydown', (e: KeyboardEvent) => {
+    if (listbox.style.display === 'none') {
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        renderMatches();
+        e.preventDefault();
+        return;
+      }
+    }
+
+    const items = Array.from(listbox.querySelectorAll<HTMLElement>('.user-search-item'));
+    if (items.length === 0) return;
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      const next = (highlightedIndex + 1) % items.length;
+      updateHighlight(next);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      const prev = (highlightedIndex - 1 + items.length) % items.length;
+      updateHighlight(prev);
+    } else if (e.key === 'Enter') {
+      if (highlightedIndex >= 0 && highlightedIndex < currentMatches.length) {
+        e.preventDefault();
+        const selected = currentMatches[highlightedIndex];
+        onSelect(selected);
+      }
+    } else if (e.key === 'Escape') {
+      if (input.value) {
+        e.stopPropagation();
+        input.value = '';
+        clearBtn.style.display = 'none';
+        renderMatches();
+      }
+    }
+  });
+
+  filterChipsEl.addEventListener('click', (e: MouseEvent) => {
+    e.stopPropagation();
+    const target = (e.target as HTMLElement).closest<HTMLElement>('.filter-chip');
+    if (!target) return;
+    const filterVal = target.getAttribute('data-filter') || null;
+    if (filterVal === null) {
+      activeFilter = null;
+    } else {
+      activeFilter = activeFilter === filterVal ? null : filterVal;
+    }
+    renderFilterChips();
+    renderMatches();
+  });
+
+  listbox.addEventListener('click', (e: MouseEvent) => {
+    e.stopPropagation();
+    const target = (e.target as HTMLElement).closest<HTMLElement>('.user-search-item');
+    if (!target) return;
+    const idx = Number(target.getAttribute('data-user-index'));
+    if (!Number.isNaN(idx) && currentMatches[idx]) {
+      const selected = currentMatches[idx];
+      onSelect(selected);
+    }
+  });
+
+  return {
+    setUsers(users: AuthUserRecord[]) {
+      cachedUsers = users;
+      renderFilterChips();
+      renderMatches();
+    },
+    reset() {
+      input.value = '';
+      clearBtn.style.display = 'none';
+      activeFilter = null;
+      highlightedIndex = -1;
+      input.setAttribute('aria-expanded', 'false');
+      input.removeAttribute('aria-activedescendant');
+      renderFilterChips();
+      renderMatches();
+    },
+    focus() {
+      input.focus();
+    },
+  };
+}

package/src/serve/runtime/chip.ts

@@ -1,8 +1,20 @@
+import type { AuthLens } from 'pyric/sandbox';
 import type {
   PyricRuntimeError,
   PyricRuntimeSnapshot,
   PyricRuntimeStatus,
 } from './status.js';
+import {
+  createChipDialogController,
+  DIALOG_STYLES,
+  type ChipDialogController,
+} from './chip-dialog.js';
+import type { RuntimeIdentity, RuntimeIdentityBindings } from './identity.js';
+import {
+  getLens as defaultGetLens,
+  setLens as defaultSetLens,
+  subscribeLens as defaultSubscribeLens,
+} from '../worker/client/core.js';
 
 export interface PyricRuntimeChipOptions {
   runtime: PyricRuntimeStatus;
@@ -11,6 +23,14 @@ export interface PyricRuntimeChipOptions {
   initiallyOpen?: boolean;
   /** Override Studio availability. Omitted uses the runtime manifest URL. */
   studioUrl?: string | null;
+  /** Optional identity integration. Missing operations use lens/no-op fallbacks. */
+  identity?: Partial<RuntimeIdentityBindings>;
+  /** Injectable lens getter (defaults to worker client getLens). */
+  getLens?: () => AuthLens | undefined;
+  /** Injectable lens setter (defaults to worker client setLens). */
+  setLens?: (lens: AuthLens | undefined) => void;
+  /** Injectable lens subscription (defaults to worker client subscribeLens). */
+  subscribeLens?: (listener: (lens: AuthLens | undefined) => void) => () => void;
 }
 
 export interface PyricRuntimeChip {
@@ -89,9 +109,14 @@ const styles = `
   .brand-label { font-size: 11px; }
   .signals { color: var(--pyric-muted); font-size: 10px; gap: 8px; }
   .signal { gap: 4px; white-space: nowrap; }
+  .signal[data-identity-badge] {
+    max-width: 140px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
   .dot { background: var(--pyric-accent); border-radius: 50%; height: 8px; width: 8px; }
-  .dot.error { background: var(--pyric-error); box-shadow: 0 0 0 3px rgba(240,160,160,.12); }
   .signal.update { color: var(--pyric-warning); }
+  .signal.bypass { color: #8f7fe8; font-weight: 500; }
   .chevron { color: var(--pyric-muted); height: 14px; width: 14px; }
   .panel {
     background: var(--pyric-bg);
@@ -133,7 +158,7 @@ const styles = `
   .error-body code { color: #d7d7df; display: block; font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-wrap; }
   .error-meta { color: var(--pyric-muted); font: 9px/1.4 ui-monospace, monospace; margin-top: 4px; overflow-wrap: anywhere; }
   .empty { align-items: center; color: var(--pyric-muted); display: flex; font: 11px/1.5 ui-monospace, monospace; min-height: 57px; padding: 12px; }
-  .actions { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; min-height: 56px; padding: 10px 12px; }
+  .actions { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); min-height: 56px; padding: 10px 12px; }
   .button { align-items: center; background: transparent; border: 1px solid var(--pyric-border-soft); border-radius: 4px; color: var(--pyric-muted); display: inline-flex; font-size: 10px; justify-content: center; letter-spacing: .06em; min-height: 34px; padding: 6px 8px; text-decoration: none; text-transform: uppercase; }
   button.button { cursor: pointer; }
   .button:hover:not(:disabled):not([aria-disabled="true"]), a.button:hover { border-color: #3a3a48; color: var(--pyric-text); }
@@ -150,6 +175,8 @@ const styles = `
     .chip, .panel { animation: pyric-enter 120ms ease-out; transform-origin: bottom right; }
     @keyframes pyric-enter { from { opacity: 0; transform: translateY(4px) scale(.98); } }
   }
+
+  ${DIALOG_STYLES}
 `;
 
 const icons = {
@@ -161,7 +188,7 @@ const icons = {
 };
 
 function escapeAttribute(value: string): string {
-  return value.replaceAll('&', '&amp;').replaceAll('"', '&quot;').replaceAll('<', '&lt;');
+  return value.replaceAll('&', '&amp;').replaceAll('"', '&quot;').replaceAll('<', '&lt;').replaceAll('>', '&gt;');
 }
 
 export function formatPyricRuntimeError(error: PyricRuntimeError): string {
@@ -189,7 +216,19 @@ function renderErrors(snapshot: PyricRuntimeSnapshot, canCopy: boolean): string
 /** Mount the framework-independent runtime chip in an isolated shadow root. */
 export function mountPyricRuntimeChip(options: PyricRuntimeChipOptions): PyricRuntimeChip {
   const documentLike = options.document ?? document;
-  const host = documentLike.createElement('div');
+  const existingHost = documentLike.querySelector<HTMLElement>(
+    '[data-pyric-runtime-chip-host], pyric-runtime-chip',
+  );
+  if (existingHost) {
+    existingHost.remove();
+  }
+
+  let host: HTMLElement;
+  try {
+    host = documentLike.createElement('pyric-runtime-chip');
+  } catch {
+    host = documentLike.createElement('div');
+  }
   host.setAttribute('data-pyric-runtime-chip-host', '');
   const root = host.attachShadow({ mode: 'open' });
   root.innerHTML = `<style>${styles}</style><div class="announcer" role="status" aria-live="polite" aria-atomic="true"></div><div data-view></div>`;
@@ -203,6 +242,50 @@ export function mountPyricRuntimeChip(options: PyricRuntimeChipOptions): PyricRu
   let open = options.initiallyOpen ?? false;
   let snapshot = options.runtime.getSnapshot();
 
+  const getLensFn = options.getLens ?? defaultGetLens;
+  const setLensFn = options.setLens ?? defaultSetLens;
+  const subscribeLensFn = options.subscribeLens ?? defaultSubscribeLens;
+  const providedIdentity = options.identity;
+  let clientUser: RuntimeIdentity | null = null;
+  const readCurrentUser = (): RuntimeIdentity | null => {
+    if (providedIdentity?.getCurrentUser) return providedIdentity.getCurrentUser();
+    return clientUser;
+  };
+  clientUser = readCurrentUser();
+
+  const identity: RuntimeIdentityBindings = {
+    listUsers: providedIdentity?.listUsers ?? (() => []),
+    switchUser: async (uid) => {
+      if (providedIdentity?.switchUser) await providedIdentity.switchUser(uid);
+      else setLensFn({ mode: 'as', uid });
+      clientUser = readCurrentUser();
+      render();
+    },
+    signOut: async () => {
+      if (providedIdentity?.signOut) await providedIdentity.signOut();
+      else setLensFn(undefined);
+      clientUser = null;
+      render();
+    },
+    openCreateUser: providedIdentity?.openCreateUser ?? (() => {}),
+    getCurrentUser: readCurrentUser,
+    subscribeAuth: providedIdentity?.subscribeAuth ?? (() => () => {}),
+  };
+
+  const dialogController: ChipDialogController = createChipDialogController({
+    shadowRoot: root,
+    identity,
+    onToggleAdminBypass: (enable) => {
+      if (enable) {
+        setLensFn({ mode: 'admin' });
+      } else {
+        setLensFn(undefined);
+      }
+      render();
+    },
+    getLens: () => getLensFn(),
+  });
+
   const render = (next = snapshot): void => {
     const active = root.activeElement;
     const oldViewport = view.querySelector<HTMLElement>('[data-error-viewport]');
@@ -213,7 +296,7 @@ export function mountPyricRuntimeChip(options: PyricRuntimeChipOptions): PyricRu
         }
       : null;
     const activeCopyId = active?.getAttribute('data-copy-error');
-    const activeControl = ['data-expand', 'data-collapse', 'data-update-worker', 'data-open-studio']
+    const activeControl = ['data-expand', 'data-collapse', 'data-update-worker', 'data-open-studio', 'data-open-impersonate']
       .find((attribute) => active?.hasAttribute(attribute));
     const focusToken = activeCopyId !== null && activeCopyId !== undefined
       ? { attribute: 'data-copy-error', value: activeCopyId }
@@ -228,41 +311,60 @@ export function mountPyricRuntimeChip(options: PyricRuntimeChipOptions): PyricRu
         ? 'Sandbox starting'
         : snapshot.mode === 'in-page'
           ? 'In-page sandbox'
-          : 'Worker current';
+          : 'Worker version';
     const epochs = snapshot.updateAvailable
       ? `${snapshot.runningEpoch?.slice(0, 8) ?? 'unknown'} → ${snapshot.servedEpoch?.slice(0, 8) ?? 'unknown'}`
       : snapshot.runningEpoch?.slice(0, 8) ?? '';
     const aiState = aiEngineState();
 
+    const lens = getLensFn();
+    const user = readCurrentUser();
+    const isAdmin = lens?.mode === 'admin';
+    const activeUid = lens?.mode === 'as' ? lens.uid : user?.uid;
+
+    const identitySignals: string[] = [];
+    let identityStateHtml = '<span class="epochs" data-identity-state>App session</span>';
+    if (activeUid) {
+      identitySignals.push(`<span class="signal" data-identity-badge title="as: ${escapeAttribute(activeUid)}">as: ${escapeAttribute(activeUid)}</span>`);
+      identityStateHtml = `<span class="epochs" data-identity-state data-identity-badge title="as: ${escapeAttribute(activeUid)}">as: ${escapeAttribute(activeUid)}</span>`;
+    }
+    if (isAdmin) {
+      identitySignals.push('<span class="signal bypass" data-identity-badge>bypass rules</span>');
+    }
+    const identitySignalHtml = identitySignals.join('');
+
     view.innerHTML = `${open ? `
-      <section class="panel" role="dialog" aria-label="Pyric runtime">
+      <section class="panel" role="dialog" aria-label="pyric">
         <header class="panel-header">
-          <div class="panel-title"><span class="brand-mark">&gt;_</span><strong>Pyric runtime</strong>${errorCount > 0 ? `<span class="count">${errorCount} ${errorCount === 1 ? 'error' : 'errors'}</span><button class="clear-button" type="button" data-clear-errors aria-label="Clear all errors">Clear</button>` : ''}</div>
+          <div class="panel-title"><span class="brand-mark">&gt;_</span><strong>pyric</strong>${errorCount > 0 ? `<span class="count">${errorCount} ${errorCount === 1 ? 'error' : 'errors'}</span><button class="clear-button" type="button" data-clear-errors aria-label="Clear all errors">Clear</button>` : ''}</div>
           <div class="panel-controls">
-            <button class="icon-button" type="button" data-collapse aria-label="Minimize Pyric runtime">${icons.minimize}</button>
-            <button class="icon-button" type="button" data-dismiss-chip aria-label="Dismiss Pyric runtime from page">${icons.close}</button>
+            <button class="icon-button" type="button" data-collapse aria-label="Minimize pyric">${icons.minimize}</button>
+            <button class="icon-button" type="button" data-dismiss-chip aria-label="Dismiss pyric from page">${icons.close}</button>
           </div>
         </header>
-        <div class="worker-state"><span class="state-label${snapshot.updateAvailable ? ' available' : ''}"><span class="mini-dot"></span>${workerLabel}</span><span class="epochs">${epochs}</span></div>
+        <div class="worker-state"><span class="state-label${snapshot.updateAvailable ? ' available' : ''}">${workerLabel}</span><span class="epochs">${epochs}</span></div>
         <div class="worker-state-col" data-ai-status>
           <div class="worker-state-row">
-            <span class="state-label"><span class="mini-dot"></span>AI engine</span>
+            <span class="state-label">AI engine</span>
             <span class="epochs">${aiState.primary}</span>
           </div>
           ${aiState.subline ? `<div class="worker-state-subline">${aiState.subline}</div>` : ''}
         </div>
+        <div class="worker-state"><span class="state-label">Rules</span><span class="epochs" style="${isAdmin ? 'color: #8f7fe8; font-weight: 500;' : ''}">${isAdmin ? 'bypassed' : 'enforced'}</span></div>
+        <div class="worker-state"><span class="state-label">Identity</span>${identityStateHtml}</div>
         <div class="errors" data-error-viewport>${renderErrors(snapshot, Boolean(clipboard))}</div>
         <div class="actions">
           <button class="button update" type="button" data-update-worker ${snapshot.updateAvailable ? '' : 'disabled'} aria-disabled="${snapshot.updateAvailable && !snapshot.updatingWorker ? 'false' : 'true'}">${snapshot.updatingWorker ? 'Updating…' : 'Update worker'}</button>
+          <button class="button" type="button" data-open-impersonate>Identity</button>
           ${studioUrl
             ? `<a class="button" data-open-studio href="${escapeAttribute(studioUrl)}" target="_blank" rel="noopener noreferrer">Studio${icons.external}</a>`
             : `<span class="button" data-open-studio aria-disabled="true" title="Pyric Studio is disabled">Studio${icons.external}</span>`}
         </div>
       </section>
     ` : `
-      <button class="chip" type="button" data-expand aria-label="Open Pyric runtime" aria-expanded="false">
-        <span class="brand"><span class="dot${errorCount > 0 ? ' error' : ''}"></span><span class="brand-label">Pyric</span></span>
-        <span class="signals">${snapshot.updateAvailable ? '<span class="signal update">update</span>' : ''}${errorCount > 0 ? `<span class="signal">${errorCount} ${errorCount === 1 ? 'error' : 'errors'}</span>` : '<span class="signal">ready</span>'}${icons.chevron}</span>
+      <button class="chip" type="button" data-expand aria-label="Open pyric" aria-expanded="false">
+        <span class="brand"><span class="dot${errorCount > 0 ? ' error' : ''}"></span><span class="brand-label">pyric</span></span>
+        <span class="signals">${identitySignalHtml}${snapshot.updateAvailable ? '<span class="signal update">update</span>' : ''}${errorCount > 0 ? `<span class="signal">${errorCount} ${errorCount === 1 ? 'error' : 'errors'}</span>` : ''}${icons.chevron}</span>
       </button>
     `}`;
 
@@ -302,6 +404,9 @@ export function mountPyricRuntimeChip(options: PyricRuntimeChipOptions): PyricRu
       if (!snapshot.updateAvailable || snapshot.updatingWorker) return;
       void options.runtime.updateWorker().catch(() => { /* status records and renders the failure */ });
     });
+    root.querySelector('[data-open-impersonate]')?.addEventListener('click', (e) => {
+      void dialogController.open(e.currentTarget as HTMLElement);
+    });
     for (const button of root.querySelectorAll<HTMLButtonElement>('[data-copy-error]')) {
       button.addEventListener('click', () => {
         const error = snapshot.errors.find((item) => item.id === button.dataset.copyError);
@@ -329,11 +434,31 @@ export function mountPyricRuntimeChip(options: PyricRuntimeChipOptions): PyricRu
   };
 
   documentLike.body.append(host);
+  const reattachAfterAstroSwap = (): void => {
+    if (!host.isConnected) documentLike.body.append(host);
+  };
+  documentLike.addEventListener('astro:after-swap', reattachAfterAstroSwap);
   const unsubscribe = options.runtime.subscribe(render);
+
+  const unsubLens = subscribeLensFn(() => {
+    render();
+  });
+
+  const unsubAuth = identity.subscribeAuth((user) => {
+    clientUser = user;
+    render();
+  });
+
+  render();
+
   return {
     element: host,
     dispose() {
       unsubscribe();
+      unsubLens();
+      unsubAuth();
+      documentLike.removeEventListener('astro:after-swap', reattachAfterAstroSwap);
+      dialogController.dispose();
       host.remove();
     },
   };