open-managed-agents 0.1.0

package/dist/ui/managed-agents-console/src/ui.jsx

@@ -0,0 +1,190 @@
+// ui.jsx — shared console chrome (status, sidebar, toolbar bits). → window
+const { useState } = React;
+
+const STLABEL = {
+  running:'Running',
+  rescheduling:'Rescheduling',
+  active:'Active',
+  idle:'Idle',
+  error:'Error',
+  archived:'Archived',
+  terminated:'Terminated',
+  open:'open',
+  action:'Needs action'
+};
+function St({ k }) {
+  return <span className={'badge st-' + k}><i className="dot" />{STLABEL[k] || k}</span>;
+}
+
+function NeedsAction() {
+  return <span className="badge st-action"><i className="dot" />Needs action</span>;
+}
+
+function Pill({ icon, children }) {
+  return <span className="pill">{icon && <Icon name={icon} size={12} />}{children}</span>;
+}
+
+function Field({ icon = 'search', placeholder, wide, value, onChange, style }) {
+  return (
+    <div className="field" style={{ flex: wide ? 1 : undefined, maxWidth: wide ? 360 : undefined, ...style }}>
+      {icon && <Icon name={icon} size={15} />}
+      <input placeholder={placeholder} value={value || ''} onChange={(e) => onChange && onChange(e.target.value)} />
+    </div>
+  );
+}
+
+function Select({ label, value, w }) {
+  return (
+    <div className="field select" style={{ width:w }}>
+      <span style={{ color:'var(--faint)' }}>{label}</span>
+      {value && <b>{value}</b>}
+      <Icon name="chevDown" size={14} className="chev" />
+    </div>
+  );
+}
+
+function Kebab() { return <span className="kebab"><Icon name="more" size={16} /></span>; }
+function Pager() {
+  return (
+    <div className="pager">
+      <button className="btn"><Icon name="chevLeft" size={15} /></button>
+      <button className="btn"><Icon name="chevRight" size={15} /></button>
+    </div>
+  );
+}
+function Crumbs({ items }) {
+  return (
+    <div className="crumbs">
+      {items.map((it, i) => (
+        <React.Fragment key={i}>
+          {i > 0 && <span className="sep">/</span>}
+          {it.onClick ? <a onClick={it.onClick}>{it.label}</a> : <span style={{ color:'var(--ink)' }}>{it.label}</span>}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}
+
+const NAV = [
+  { key:'start', label:'Start', icon:'checkCircle' },
+  { key:'sessions', label:'Sessions', icon:'activity' },
+  { key:'agents', label:'Agents', icon:'bot' },
+  { key:'environments', label:'Environments', icon:'database' },
+  { key:'files', label:'Files', icon:'folder' },
+  { key:'vaults', label:'Vaults', icon:'database' },
+  { key:'skills', label:'Skills', icon:'fileText' },
+];
+
+function WorkspaceSwitcher({ workspace, admin, onSelectWorkspace, onSwitchWorkspace, onSignOut }) {
+  const [open, setOpen] = useState(false);
+  const [workspaces, setWorkspaces] = useState(null);
+  const toggle = () => {
+    const next = !open;
+    setOpen(next);
+    if (next && admin && workspaces === null) {
+      OmaConsoleApi.listWorkspaces().then(setWorkspaces).catch(() => setWorkspaces([]));
+    }
+  };
+  const label = workspace?.name || (admin ? 'Choose workspace' : 'Connect workspace');
+  return (
+    <div className="workspace-switcher">
+      <button className="ws" type="button" onClick={toggle} aria-expanded={open}>
+        <span className="ws-dot" /><span className="ws-name">{label}</span>
+        <Icon name="chevDown" size={14} className="ws-chev" />
+      </button>
+      {open && <div className="workspace-menu">
+        {admin && <>
+          <div className="workspace-menu-label">Switch workspace</div>
+          {workspaces === null ? <div className="workspace-menu-note">Loading workspaces…</div>
+            : workspaces.length === 0 ? <div className="workspace-menu-note">No workspaces yet.</div>
+            : workspaces.map((item) => <button key={item.id} type="button" className="workspace-menu-item"
+              onClick={() => { setOpen(false); onSelectWorkspace(item.id); }}>
+              <span>{item.name}</span><small className="mono">{item.id}</small>
+            </button>)}
+        </>}
+        {!admin && <button type="button" className="workspace-menu-item" onClick={() => { setOpen(false); onSwitchWorkspace(); }}>
+          Enter another workspace key
+        </button>}
+        <button type="button" className="workspace-menu-item workspace-signout" onClick={() => { setOpen(false); onSignOut(); }}>
+          Sign out
+        </button>
+      </div>}
+    </div>
+  );
+}
+
+function Sidebar({ route, go, showAdmin = false, workspace, admin = false, onSelectWorkspace, onSwitchWorkspace, onSignOut }) {
+  const top = route === 'session' ? 'sessions' : route === 'agent' ? 'agents' : route;
+  return (
+    <aside className="sidebar">
+      <div className="brand">
+        <div className="brand-mark">O</div>
+        <div className="brand-name">OMA Console<small>Managed Agents</small></div>
+      </div>
+      <WorkspaceSwitcher workspace={workspace} admin={admin} onSelectWorkspace={onSelectWorkspace}
+        onSwitchWorkspace={onSwitchWorkspace} onSignOut={onSignOut} />
+      <div className="nav-label">Managed Agents</div>
+      {NAV.map((n) => (
+        <div key={n.key} className={'nav-item' + (top === n.key ? ' active' : '')} onClick={() => go(n.key)}>
+          <Icon name={n.icon} size={16} />{n.label}
+        </div>
+      ))}
+      {showAdmin && <>
+        <div className="nav-label">Operator</div>
+        <div className={'nav-item' + (top === 'admin' ? ' active' : '')} onClick={() => go('admin')}>
+          <Icon name="database" size={16} />Admin
+        </div>
+      </>}
+      <div className="sidebar-spacer" />
+      <div className="sidebar-foot">
+        <button type="button" className={'nav-item' + (top === 'documentation' ? ' active' : '')} onClick={() => go('documentation')}>
+          <Icon name="fileText" size={16} />Documentation
+        </button>
+        <div className="nav-item dim"><Icon name="terminal" size={16} />proxy /v1</div>
+      </div>
+    </aside>
+  );
+}
+
+function PageHead({ title, sub, action, onAction, readOnly = false, endpoint }) {
+  const disabled = Boolean(action && readOnly);
+  return (
+    <div className="page-head">
+      <div>
+        <h1 className="page-title">{title}</h1>
+        {sub && <div className="page-sub">{sub}</div>}
+      </div>
+      {action && <div className="action-wrap" title={disabled && endpoint ? `Read-only API mode · ${endpoint}` : undefined}>
+        <button className={'btn btn-primary' + (disabled ? ' ro' : '')}
+          disabled={disabled}
+          onClick={disabled ? undefined : onAction}>
+          <Icon name="plus" size={15} />{action}
+        </button>
+        {disabled && endpoint && <span className="endpoint-hint mono">{endpoint}</span>}
+      </div>}
+    </div>
+  );
+}
+
+function ModeBar({ mode, warnings = [] }) {
+  const label = mode === 'demo'
+    ? 'Demo review mode'
+    : mode === 'error'
+      ? 'Live API unavailable'
+      : 'Live API mode';
+  const copy = mode === 'demo'
+    ? 'Local interactions mutate bundled demo data only.'
+    : mode === 'error'
+      ? 'The live request failed; no bundled demo records are being shown.'
+      : 'Live agent, environment, session, prompt, interrupt, and confirmation actions are enabled; unsupported writes stay disabled.';
+  return (
+    <div className={'modebar mode-' + mode}>
+      <Icon name={mode === 'api' ? 'database' : 'alert'} size={14} />
+      <span className="mode-main">{label}</span>
+      <span className="mode-copy">{copy}</span>
+      {warnings.length > 0 && <span className="mode-warn">{warnings.join(' ')}</span>}
+    </div>
+  );
+}
+
+Object.assign(window, { St, NeedsAction, Pill, Field, Select, Kebab, Pager, Crumbs, Sidebar, PageHead, ModeBar });

package/dist/ui/managed-agents-console/src/vaults-data.js

@@ -0,0 +1,89 @@
+// Pure data helpers for the Vaults and Credential health panels. Keep raw API
+// records out of JSX so the browser only receives the display fields it needs.
+export function vaultRow(vault) {
+  return {
+    id: String(vault?.id ?? ""),
+    displayName: String(vault?.display_name || vault?.id || "Unnamed vault"),
+    createdAt: vault?.created_at ?? null,
+    archivedAt: vault?.archived_at ?? null,
+  };
+}
+
+export function credentialRow(credential) {
+  const auth = credential?.auth || {};
+  const refresh = auth?.refresh || null;
+  return {
+    id: String(credential?.id ?? ""),
+    displayName: String(credential?.display_name || credential?.id || "Unnamed credential"),
+    authType: auth.type === "mcp_oauth" ? "mcp_oauth" : "static_bearer",
+    serverUrl: typeof auth.mcp_server_url === "string" ? auth.mcp_server_url : "",
+    expiresAt: auth.expires_at ?? null,
+    archivedAt: credential?.archived_at ?? null,
+    refresh: refresh && typeof refresh === "object" ? {
+      tokenEndpointHost: urlHost(refresh.token_endpoint),
+      scope: typeof refresh.scope === "string" ? refresh.scope : null,
+      endpointAuth: refresh.token_endpoint_auth?.type ?? null,
+    } : null,
+  };
+}
+
+export function urlHost(value) {
+  try { return new URL(value).host || "—"; } catch { return "—"; }
+}
+
+export function relativeTime(value, now = Date.now()) {
+  const at = typeof value === "string" ? Date.parse(value) : NaN;
+  if (!Number.isFinite(at)) return "—";
+  const seconds = Math.round((at - now) / 1000);
+  const absolute = Math.abs(seconds);
+  if (absolute < 60) return seconds >= 0 ? "in under a minute" : "just now";
+  const minutes = Math.round(absolute / 60);
+  if (minutes < 60) return seconds >= 0 ? `in ${minutes}m` : `${minutes}m ago`;
+  const hours = Math.round(minutes / 60);
+  if (hours < 48) return seconds >= 0 ? `in ${hours}h` : `${hours}h ago`;
+  const days = Math.round(hours / 24);
+  return seconds >= 0 ? `in ${days}d` : `${days}d ago`;
+}
+
+export function healthState(row) {
+  if (!row?.hasRefresh) return { label: "n/a", tone: "neutral" };
+  if (row.refreshStatus === "ok") return { label: "ok", tone: "ok" };
+  if (row.refreshStatus === "invalid") return { label: "invalid", tone: "error" };
+  if (row.refreshStatus === "transient") return { label: "transient", tone: "warn" };
+  return { label: "not attempted", tone: "neutral" };
+}
+
+// Map a semantic tone onto an existing badge class (console.css): the accent
+// wash is the amber-gold the plan calls for on transient/warn rows.
+const TONE_BADGE = { ok: "st-active", warn: "st-rescheduling", error: "st-error", neutral: "st-idle" };
+
+export function toneBadgeClass(tone) {
+  return TONE_BADGE[tone] || TONE_BADGE.neutral;
+}
+
+export function truncationWarning(kind) {
+  const noun = kind === "credentials" ? "Credential" : "Vault";
+  return `${noun} list reached the safety cap; this view may be partial.`;
+}
+
+export function validationOutcome(result) {
+  if (result?.status === "valid") return { tone: "ok", message: "Credential works." };
+  if (result?.status === "invalid") return { tone: "error", message: "Re-authorize with the provider and rotate the credential." };
+  if (result?.status === "unknown" && result?.refresh?.status === "skipped") {
+    return { tone: "neutral", message: "Refresh was skipped; the probe was inconclusive. The credential may have changed or been checked recently." };
+  }
+  return { tone: "warn", message: "Could not conclude (transient or unreachable); try again later." };
+}
+
+// Presentation details for a validation result: the probe status, plus the
+// refresh status/HTTP code the plan requires on invalid/failed outcomes.
+export function validationDetail(result) {
+  const probeStatus = result?.mcp_probe?.http_response?.status_code ?? null;
+  const refreshStatus = result?.refresh?.status ?? null;
+  const refreshHttpStatus = result?.refresh?.http_response?.status_code ?? null;
+  return { probeStatus, refreshStatus, refreshHttpStatus };
+}
+
+export function isCurrentVaultResult(epoch, currentEpoch, vaultId, currentVaultId) {
+  return epoch === currentEpoch && vaultId === currentVaultId;
+}

package/dist/ui/managed-agents-console/src/vaults.jsx

@@ -0,0 +1,171 @@
+const { useState: useVaultState, useEffect: useVaultEffect, useRef: useVaultRef } = React;
+
+const DEMO_VAULTS = [{ id: 'vlt_demo', display_name: 'Demo integrations', created_at: '2026-07-01T00:00:00Z', archived_at: null }];
+const DEMO_CREDENTIALS = [{ id: 'vcrd_demo', display_name: 'Demo MCP OAuth', archived_at: null, auth: { type: 'mcp_oauth', mcp_server_url: 'https://mcp.example.test/mcp', expires_at: '2026-12-01T00:00:00Z', refresh: { token_endpoint: 'https://auth.example.test/token', scope: 'read', token_endpoint_auth: { type: 'none' } } } }];
+
+function ToneBadge({ tone, children }) {
+  return <span className={'badge ' + VaultsData.toneBadgeClass(tone)}><i className="dot" />{children}</span>;
+}
+
+function VaultsView({ mode, initialVaultId, onCreate, onCreateCredential, readOnly = false, onOpenVault, onBackToVaults }) {
+  const [vaults, setVaults] = useVaultState(null);
+  const [error, setError] = useVaultState(null);
+  const [selected, setSelected] = useVaultState(null);
+  const [credentials, setCredentials] = useVaultState(null);
+  const [detailError, setDetailError] = useVaultState(null);
+  const [warning, setWarning] = useVaultState(null);
+  const [confirm, setConfirm] = useVaultState(null);
+  const [validation, setValidation] = useVaultState(null);
+  const [validating, setValidating] = useVaultState(false);
+  const epoch = useVaultRef(0);
+  const selectedId = selected?.id || null;
+
+  const refresh = () => {
+    const current = ++epoch.current;
+    setError(null); setVaults(null); setSelected(null); setCredentials(null); setWarning(null);
+    if (mode !== 'api') { setVaults(DEMO_VAULTS.map(VaultsData.vaultRow)); return; }
+    OmaConsoleApi.listVaults().then((page) => {
+      if (current !== epoch.current) return;
+      setVaults(page.data.map(VaultsData.vaultRow));
+      if (page.truncated) setWarning(VaultsData.truncationWarning('vaults'));
+    }).catch((err) => { if (current === epoch.current) setError(err); });
+  };
+  useVaultEffect(refresh, [mode]);
+
+  // The ref is the authority for a detail request: React state updates are
+  // asynchronous, so an old response must not win a fast selection change.
+  const selectedRef = useVaultRef(null);
+  selectedRef.current = selectedId;
+  const open = (vault) => {
+    const current = ++epoch.current;
+    selectedRef.current = vault.id; setSelected(vault); setCredentials(null); setDetailError(null); setValidation(null); setValidating(false); setWarning(null);
+    if (mode !== 'api') { setCredentials(DEMO_CREDENTIALS.map(VaultsData.credentialRow)); return; }
+    OmaConsoleApi.listVaultCredentials(vault.id).then((page) => {
+      if (!VaultsData.isCurrentVaultResult(current, epoch.current, vault.id, selectedRef.current)) return;
+      setCredentials(page.data.map(VaultsData.credentialRow));
+      if (page.truncated) setWarning(VaultsData.truncationWarning('credentials'));
+    }).catch((err) => { if (VaultsData.isCurrentVaultResult(current, epoch.current, vault.id, selectedRef.current)) setDetailError(err); });
+  };
+  const back = () => { ++epoch.current; setSelected(null); setCredentials(null); setValidation(null); setValidating(false); setWarning(null); onBackToVaults(); };
+  const validate = (credential) => {
+    // Guard the result the same way the list/detail fetches are guarded: a
+    // probe can take seconds, and the operator can navigate to another vault
+    // before it resolves. Without this, A's outcome renders under vault B.
+    const startedEpoch = epoch.current;
+    const vaultId = selected.id;
+    const isCurrent = () => VaultsData.isCurrentVaultResult(startedEpoch, epoch.current, vaultId, selectedRef.current);
+    setConfirm(null); setValidating(true); setValidation(null);
+    if (mode === 'demo') { setValidation({ result: { status: 'valid', mcp_probe: { http_response: { status_code: 200 } } } }); setValidating(false); return; }
+    OmaConsoleApi.validateMcpOauthCredential(vaultId, credential.id, mode)
+      .then((result) => { if (isCurrent()) setValidation({ result }); })
+      .catch((err) => { if (isCurrent()) setValidation({ error: err.message }); })
+      .finally(() => { if (isCurrent()) setValidating(false); });
+  };
+  useVaultEffect(() => {
+    if (!initialVaultId || !vaults || selected) return;
+    const vault = vaults.find((item) => item.id === initialVaultId);
+    if (vault) open(vault);
+  }, [initialVaultId, vaults]);
+
+  const body = selected
+    ? <VaultDetail vault={selected} credentials={credentials} error={detailError} warning={warning}
+        onBack={back} onRetry={() => open(selected)}
+        mode={mode} readOnly={readOnly} onCreateCredential={() => onCreateCredential(selected)} validating={validating} validation={validation} onValidate={(credential) => setConfirm(credential)} />
+    : <div className="main-scroll scroll fade-in">
+        <PageHead title="Vaults" sub="Manage workspace vaults and validate MCP OAuth credentials."
+          action="Create vault" onAction={onCreate} readOnly={readOnly} endpoint="POST /v1/vaults" />
+        {warning && <div className="inline-warn"><Icon name="alert" size={14} /><span>{warning}</span></div>}
+        {vaults === null && !error ? <SkeletonTable rows={4} cols={[180, 'grow', 120, 100]} />
+          : error ? <ErrorState resource="vaults" onRetry={refresh} />
+          : vaults.length === 0 ? <EmptyState icon="database" title="No vaults" message="This workspace has no vaults. Create one before adding MCP credentials."
+            actionLabel={!readOnly ? 'Create vault' : null} onAction={onCreate} />
+          : <div className="panel">{vaults.map((vault) => <div className="trow" key={vault.id} style={{ opacity: vault.archivedAt ? 0.55 : 1 }} onClick={() => { onOpenVault(vault.id); open(vault); }}>
+            <span className="td mono" style={{ width:180, fontSize:12 }}>{vault.id}</span>
+            <span className="td grow cell-strong">{vault.displayName}</span>
+            <span className="td mono" style={{ width:120, color:'var(--faint)', fontSize:12 }}>{VaultsData.relativeTime(vault.createdAt)}</span>
+            <span className="td" style={{ width:100 }}>{vault.archivedAt ? <St k="archived" /> : <St k="active" />}</span>
+          </div>)}</div>}
+      </div>;
+
+  // The dialog lives at the component root so it renders in both the list and
+  // detail branches (an earlier revision nested it under the list only, which
+  // made Validate a no-op once a vault was open).
+  return <>
+    {body}
+    {confirm && <ConfirmDialog icon="alert" title="Validate credential"
+      message="Validate contacts the MCP server with this credential and may refresh the token at the provider."
+      confirmLabel="Validate" endpoint="POST /v1/vaults/:id/credentials/:id/mcp_oauth_validate"
+      onClose={() => setConfirm(null)} onConfirm={() => validate(confirm)} />}
+  </>;
+}
+
+function VaultDetail({ vault, credentials, error, warning, onBack, onRetry, mode, readOnly, onCreateCredential, validating, validation, onValidate }) {
+  return <div className="main-scroll scroll fade-in"><PageHead title={vault.displayName} sub={vault.id} />
+    <div className="toolbar"><button className="btn" onClick={onBack}>Back to vaults</button>{!readOnly && <button className="btn btn-primary" onClick={onCreateCredential}><Icon name="plus" size={15} />Add credential</button>}</div>
+    {warning && <div className="inline-warn"><Icon name="alert" size={14} /><span>{warning}</span></div>}
+    {credentials === null && !error ? <SkeletonTable rows={3} cols={[180, 'grow', 120]} />
+      : error ? <ErrorState resource="credentials" onRetry={onRetry} />
+      : credentials.length === 0 ? <EmptyState icon="database" title="No credentials" message="This vault has no credentials. Add one to authorize a matching MCP server."
+        actionLabel={!readOnly ? 'Add credential' : null} onAction={onCreateCredential} />
+      : <div className="panel">{credentials.map((c) => <div className="trow" key={c.id} style={{ display:'block', cursor:'default', padding:'14px', opacity: c.archivedAt ? 0.55 : 1 }}>
+        <div style={{ display:'flex', gap:12, alignItems:'center' }}><span className="mono" style={{ color:'var(--soft)' }}>{c.id}</span><b>{c.displayName}</b><span className="pill">{c.authType}</span>{c.archivedAt && <St k="archived" />}</div>
+        <div className="field-hint" style={{ marginTop:6 }}>{c.serverUrl || 'No server URL'} · expires {VaultsData.relativeTime(c.expiresAt)}</div>
+        {c.refresh && <div className="field-hint">token host {c.refresh.tokenEndpointHost} · {c.refresh.scope || 'no scope'} · {c.refresh.endpointAuth || 'no endpoint auth'}</div>}
+        {mode !== 'mock' && !c.archivedAt && c.authType === 'mcp_oauth' && <button className="btn" disabled={validating} onClick={() => onValidate(c)} style={{ marginTop:8 }}>{validating ? 'Validating…' : 'Validate'}</button>}
+      </div>)}</div>}
+    {validation && <ValidationResult value={validation} />}
+  </div>;
+}
+
+function ValidationResult({ value }) {
+  if (value.error) return <div className="inline-warn" style={{ marginTop:12 }}><Icon name="alert" size={14} /><span>{value.error}</span></div>;
+  const outcome = VaultsData.validationOutcome(value.result);
+  const detail = VaultsData.validationDetail(value.result);
+  return <div className="panel" style={{ marginTop:12, padding:14 }}>
+    <div style={{ display:'flex', gap:8, alignItems:'center' }}><ToneBadge tone={outcome.tone}>{value.result?.status || 'error'}</ToneBadge><b>{outcome.message}</b></div>
+    {detail.probeStatus && <div className="field-hint" style={{ marginTop:6 }}>Probe HTTP {detail.probeStatus}</div>}
+    {detail.refreshStatus && <div className="field-hint">Refresh {detail.refreshStatus}{detail.refreshHttpStatus ? ` · HTTP ${detail.refreshHttpStatus}` : ''}</div>}
+    <details style={{ marginTop:8 }}><summary>Details</summary><pre className="code" style={{ whiteSpace:'pre-wrap' }}>{JSON.stringify(value.result ?? {}, null, 2)}</pre></details>
+  </div>;
+}
+
+function CredentialHealthView({ workspaceId, onBack, onReauth }) {
+  const [page, setPage] = useVaultState(null);
+  const [error, setError] = useVaultState(null);
+  const [cursor, setCursor] = useVaultState(null);
+  const load = (next = null) => {
+    setError(null); setPage(null); setCursor(next);
+    OmaConsoleApi.listWorkspaceCredentialHealth(workspaceId, next)
+      .then(setPage)
+      .catch((err) => { if (err.status === 401) onReauth(); else setError(err); });
+  };
+  useVaultEffect(() => load(null), [workspaceId]);
+  const groups = new Map();
+  for (const row of page?.data || []) {
+    const key = `${row.vaultId}:${row.vaultDisplayName}`;
+    if (!groups.has(key)) groups.set(key, []);
+    groups.get(key).push(row);
+  }
+  return <div className="main-scroll scroll fade-in"><PageHead title="Credential health" sub={`Administrative health for ${workspaceId}.`} />
+    <div className="toolbar"><button className="btn" onClick={onBack}>Back to Admin</button><button className="btn" onClick={() => load(cursor)}>Refresh</button></div>
+    {page === null && !error ? <SkeletonTable rows={5} cols={['grow', 210, 120, 130]} />
+      : error ? <ErrorState resource="credential health" onRetry={() => load(cursor)} />
+      : page.data.length === 0 ? <EmptyState icon="database" title="No credentials" message="This workspace has no stored vault credentials." />
+      : [...groups.entries()].map(([key, rows]) => <div className="panel" key={key} style={{ marginBottom:12, opacity: rows[0].vaultArchivedAt ? 0.6 : 1 }}>
+        <div style={{ padding:'10px 14px', borderBottom:'1px solid var(--border)' }}><b>{rows[0].vaultDisplayName}</b>{rows[0].vaultArchivedAt && <span className="field-hint"> · archived</span>}</div>
+        {rows.map((row) => { const state = VaultsData.healthState(row); return <div className="trow" key={row.credentialId} style={{ cursor:'default', opacity: row.credentialArchivedAt ? 0.55 : 1 }}>
+          <span className="td grow"><b>{row.credentialDisplayName || row.credentialId}</b><span className="field-hint"> · {row.authType} · {VaultsData.urlHost(row.mcpServerUrl)}</span>{row.credentialArchivedAt && <span className="field-hint"> · archived</span>}</span>
+          <span className="td" style={{ width:210, display:'flex', gap:6, alignItems:'center', flexWrap:'wrap' }}>
+            <ToneBadge tone={state.tone}>{state.label}</ToneBadge>
+            {state.label === 'transient' && <span className="field-hint">{row.refreshAttempts} attempts</span>}
+            {row.authHintAt && <span className="badge st-action"><i className="dot" />Auth hint</span>}
+          </span>
+          <span className="td" style={{ width:120, color:'var(--faint)' }}>exp {VaultsData.relativeTime(row.expiresAt)}</span>
+          <span className="td" style={{ width:130, color:'var(--faint)' }}>next {row.nextRefreshAt ? VaultsData.relativeTime(row.nextRefreshAt) : '—'}</span>
+        </div>; })}
+      </div>)}
+    {page?.has_more && page.next_page && <button className="btn" onClick={() => load(page.next_page)}>Next page</button>}
+  </div>;
+}
+
+Object.assign(window, { VaultsView, CredentialHealthView, VaultsData: window.VaultsData || {} });