open-managed-agents 0.1.0

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

@@ -0,0 +1,200 @@
+// docs.jsx — Markdown-backed, public in-console documentation. → window
+// Content lives in docs/*.md so the reader, copy action, and raw source share
+// one OMA-authored page. The small renderer intentionally supports only the
+// safe Markdown subset used by those local pages; it never renders raw HTML.
+const { useEffect: useEffectDocs, useMemo: useMemoDocs, useState: useStateDocs } = React;
+
+const DOC_NAV = [
+  { label:'First steps', pages:[['overview', 'Overview'], ['quickstart', 'Quickstart'], ['console', 'Prototype in Console'], ['migration', 'Migration']] },
+  { label:'Define your agent', pages:[['agents', 'Agent setup'], ['tools', 'Tools'], ['permissions', 'Permission policies'], ['skills', 'Skills'], ['integrations', 'MCP connector']] },
+  { label:'Configure agent environment', pages:[['environments', 'Environments'], ['sandbox-reference', 'Cloud sandbox reference'], ['self-hosted-sandboxes', 'Self-hosted sandboxes'], ['sandbox-security', 'Sandbox security']] },
+  { label:'Delegate work to your agent', pages:[['sessions', 'Start a session'], ['session-operations', 'Session operations'], ['events', 'Session event stream'], ['files', 'Files'], ['vaults', 'Vaults']] },
+  { label:'Beyond v1', pages:[['github', 'GitHub'], ['outcomes', 'Define outcomes'], ['memory', 'Memory'], ['dreams', 'Dreams'], ['multiagent', 'Multi-agent orchestration'], ['scheduled-deployments', 'Scheduled deployments'], ['webhooks', 'Webhooks']] },
+  { label:'Reference', pages:[['reference', 'API reference and compatibility']] },
+];
+
+const DOC_PAGES = Object.fromEntries(DOC_NAV.flatMap((section) => section.pages.map(([id, label]) => [id, {
+  label,
+  crumb:section.label,
+  path:`docs/${id}.md`,
+}])));
+
+function slug(value) {
+  return value.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
+}
+
+function openDocumentationTarget(target) {
+  if (target.startsWith('/') || /^https:\/\//.test(target)) window.open(target, target.startsWith('https://') ? '_blank' : '_self', 'noopener,noreferrer');
+}
+
+function InlineMarkdown({ text, onNavigate }) {
+  const parts = text.split(/(`[^`]+`|\[[^\]]+\]\([^\s)]+\)|\*\*[^*]+\*\*)/g);
+  return <>{parts.map((part, index) => {
+    if (part.startsWith('`') && part.endsWith('`')) return <code key={index}>{part.slice(1, -1)}</code>;
+    if (part.startsWith('**') && part.endsWith('**')) return <strong key={index}>{part.slice(2, -2)}</strong>;
+    const link = /^\[([^\]]+)\]\(([^\s)]+)\)$/.exec(part);
+    if (link) {
+      const [, label, target] = link;
+      if (target.startsWith('#docs=')) return <button type="button" key={index} className="docs-inline-link" onClick={() => onNavigate(target.slice(6))}>{label}</button>;
+      if (target.startsWith('/') || /^https:\/\//.test(target)) return <button type="button" key={index} className="docs-inline-link" onClick={() => openDocumentationTarget(target)}>{label}</button>;
+      return <React.Fragment key={index}>{label}</React.Fragment>;
+    }
+    return <React.Fragment key={index}>{part}</React.Fragment>;
+  })}</>;
+}
+
+function MarkdownDocument({ markdown, onNavigate, skipTitle = false }) {
+  const rendered = useMemoDocs(() => {
+    const lines = markdown.replace(/\r\n/g, '\n').split('\n');
+    const nodes = [];
+    const headings = [];
+    let index = 0;
+
+    const paragraph = () => {
+      const words = [];
+      while (index < lines.length && lines[index].trim() && !/^(#{1,3}\s|```|> \[!|[-*] |\d+\. |\|)/.test(lines[index])) {
+        words.push(lines[index].trim());
+        index += 1;
+      }
+      if (words.length) nodes.push(<p key={`p-${index}`}><InlineMarkdown text={words.join(' ')} onNavigate={onNavigate} /></p>);
+    };
+
+    while (index < lines.length) {
+      const line = lines[index];
+      if (!line.trim()) { index += 1; continue; }
+      const heading = /^(#{1,3})\s+(.+)$/.exec(line);
+      if (heading) {
+        const [, marks, text] = heading;
+        const id = slug(text);
+        if (marks.length === 1) {
+          if (!skipTitle) nodes.push(<h1 key={`h1-${id}`}>{text}</h1>);
+        }
+        else if (marks.length === 2) {
+          headings.push([id, text]);
+          nodes.push(<h2 id={id} key={`h2-${id}`}>{text}</h2>);
+        } else {
+          headings.push([id, text]);
+          nodes.push(<h3 id={id} key={`h3-${id}`}>{text}</h3>);
+        }
+        index += 1;
+        continue;
+      }
+      const callout = /^> \[!(NOTE|WARNING)\]\s*(.*)$/.exec(line);
+      if (callout) {
+        const [, tone, text] = callout;
+        nodes.push(<aside key={`callout-${index}`} className={'docs-callout ' + (tone === 'WARNING' ? 'warn' : 'info')}><Icon name={tone === 'WARNING' ? 'alert' : 'info'} size={16} /><div><InlineMarkdown text={text} onNavigate={onNavigate} /></div></aside>);
+        index += 1;
+        continue;
+      }
+      if (line.startsWith('```')) {
+        const body = [];
+        index += 1;
+        while (index < lines.length && !lines[index].startsWith('```')) { body.push(lines[index]); index += 1; }
+        if (index < lines.length) index += 1;
+        nodes.push(<pre className="docs-code" key={`code-${index}`}><code>{body.join('\n')}</code></pre>);
+        continue;
+      }
+      if (/^[-*] /.test(line) || /^\d+\. /.test(line)) {
+        const ordered = /^\d+\. /.test(line);
+        const items = [];
+        while (index < lines.length && (ordered ? /^\d+\. /.test(lines[index]) : /^[-*] /.test(lines[index]))) {
+          items.push(lines[index].replace(ordered ? /^\d+\. / : /^[-*] /, ''));
+          index += 1;
+        }
+        const List = ordered ? 'ol' : 'ul';
+        nodes.push(<List className={ordered ? 'docs-steps compact' : 'docs-list'} key={`list-${index}`}>{items.map((item, itemIndex) => <li key={itemIndex}><InlineMarkdown text={item} onNavigate={onNavigate} /></li>)}</List>);
+        continue;
+      }
+      if (line.startsWith('|') && index + 1 < lines.length && /^\|?\s*:?-{3,}/.test(lines[index + 1])) {
+        const header = line.split('|').slice(1, -1).map((cell) => cell.trim());
+        index += 2;
+        const rows = [];
+        while (index < lines.length && lines[index].startsWith('|')) { rows.push(lines[index].split('|').slice(1, -1).map((cell) => cell.trim())); index += 1; }
+        nodes.push(<div className="docs-table-wrap" key={`table-${index}`}><table className="docs-table"><thead><tr>{header.map((cell) => <th key={cell}>{cell}</th>)}</tr></thead><tbody>{rows.map((row, rowIndex) => <tr key={rowIndex}>{row.map((cell, cellIndex) => <td key={cellIndex}><InlineMarkdown text={cell} onNavigate={onNavigate} /></td>)}</tr>)}</tbody></table></div>);
+        continue;
+      }
+      paragraph();
+    }
+    return { nodes, headings };
+  }, [markdown, onNavigate]);
+  return <>{rendered.nodes}</>;
+}
+
+function markdownHeadings(markdown) {
+  return markdown.match(/^#{2,3}\s+.+$/gm)?.map((line) => {
+    const text = line.replace(/^#{2,3}\s+/, '');
+    return [slug(text), text, line.startsWith('###')];
+  }) || [];
+}
+
+function markdownTitle(markdown, fallback) {
+  return /^#\s+(.+)$/m.exec(markdown)?.[1] || fallback;
+}
+
+function DocsView({ page = 'overview', onNavigate, goConsole }) {
+  const activePage = DOC_PAGES[page] ? page : 'overview';
+  const current = DOC_PAGES[activePage];
+  const [markdown, setMarkdown] = useStateDocs('');
+  const [state, setState] = useStateDocs('loading');
+  const [copied, setCopied] = useStateDocs(false);
+  const [menuOpen, setMenuOpen] = useStateDocs(false);
+  const [query, setQuery] = useStateDocs('');
+  const headings = markdownHeadings(markdown);
+  const title = markdownTitle(markdown, current.label);
+
+  useEffectDocs(() => {
+    const controller = new AbortController();
+    setState('loading');
+    setCopied(false);
+    setMenuOpen(false);
+    fetch(current.path, { signal:controller.signal })
+      .then((response) => response.ok ? response.text() : Promise.reject(new Error(`Documentation unavailable (${response.status})`)))
+      .then((text) => { setMarkdown(text); setState('loaded'); })
+      .catch((error) => { if (error.name !== 'AbortError') { setMarkdown(''); setState('error'); } });
+    return () => controller.abort();
+  }, [current.path]);
+
+  const copyMarkdown = async () => {
+    try {
+      await navigator.clipboard.writeText(markdown);
+      setCopied(true);
+    } catch {
+      setCopied(false);
+    }
+  };
+  const openMarkdown = () => window.open(new URL(current.path, window.location.href).toString(), '_blank', 'noopener,noreferrer');
+  const go = (next) => onNavigate(DOC_PAGES[next] ? next : 'overview');
+  const normalizedQuery = query.trim().toLowerCase();
+  const visibleNav = DOC_NAV.map((section) => ({
+    ...section,
+    pages: normalizedQuery
+      ? section.pages.filter(([, label]) => label.toLowerCase().includes(normalizedQuery))
+      : section.pages,
+  })).filter((section) => section.pages.length > 0);
+
+  return <div className="docs-shell">
+    <header className="docs-topbar">
+      <button type="button" className="docs-topbar-brand" onClick={() => goConsole('start')}><span className="brand-mark">O</span><span>Open Managed Agents</span></button>
+      <nav className="docs-topbar-nav" aria-label="Documentation sections"><span>Managed Agents</span><span className="active">Documentation</span></nav>
+      <div className="docs-topbar-actions"><a href="/docs/" className="docs-topbar-link"><Icon name="terminal" size={15} />API reference</a><button type="button" className="docs-topbar-console" onClick={() => goConsole('start')}><Icon name="arrowRight" size={15} />Console</button></div>
+    </header>
+    <nav className="docs-nav scroll" aria-label="Documentation navigation">
+      <label className="docs-search"><Icon name="search" size={16} /><input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Search documentation" aria-label="Search documentation" /><kbd>⌘K</kbd></label>
+      {visibleNav.map((section) => <div className="docs-nav-group" key={section.label}><div className="docs-nav-label">{section.label}</div>{section.pages.map(([id, label]) => <button key={id} className={'docs-nav-link' + (id === activePage ? ' active' : '')} onClick={() => go(id)}>{label}</button>)}</div>)}
+      {visibleNav.length === 0 && <div className="docs-nav-empty">No pages match “{query}”.</div>}
+      <div className="docs-nav-footer"><span>OMA documentation</span><small>Local alpha guide</small></div>
+    </nav>
+    <main className="docs-main scroll">
+      <article className="docs-article">
+      <div className="docs-crumbs">Managed Agents <span>/</span> {current.crumb}</div>
+      <div className="docs-title-row"><h1>{title}</h1><div className="docs-page-actions"><button type="button" className="docs-copy-main" onClick={copyMarkdown} disabled={state !== 'loaded'}><Icon name="copy" size={15} />{copied ? 'Copied!' : 'Copy page'}</button><button type="button" className="docs-copy-caret" aria-label="Documentation actions" aria-expanded={menuOpen} onClick={() => setMenuOpen((open) => !open)}>⌄</button>{menuOpen && <div className="docs-copy-menu"><button type="button" onClick={() => { copyMarkdown(); setMenuOpen(false); }}><Icon name="copy" size={14} />Copy page as Markdown</button><button type="button" onClick={() => { openMarkdown(); setMenuOpen(false); }}><Icon name="arrowRight" size={14} />Open Markdown</button></div>}</div></div>
+      {state === 'loading' && <div className="docs-loading" aria-busy="true">Loading documentation…</div>}
+      {state === 'error' && <div className="docs-loading error"><Icon name="alert" size={16} />The local Markdown source could not be loaded.</div>}
+      {state === 'loaded' && <MarkdownDocument markdown={markdown} onNavigate={go} skipTitle />}
+      </article>
+    </main>
+    <aside className="docs-toc" aria-label="On this page"><strong>On this page</strong>{headings.map(([id, label, nested]) => <button key={id} className={nested ? 'nested' : ''} onClick={() => document.getElementById(id)?.scrollIntoView({ behavior:'smooth', block:'start' })}>{label}</button>)}</aside>
+  </div>;
+}
+
+window.DocsView = DocsView;

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

@@ -0,0 +1,365 @@
+// environments.jsx — readiness and environment list/create surfaces → window
+const { useState: useStateE } = React;
+
+const DEFAULT_ENV_CONFIG = {
+  networking: { type: "limited", allowed_hosts: [] },
+};
+
+function presetCopy(preset) {
+  return {
+    label: preset.label || preset.id,
+    description: preset.description || "Deployment-defined limited egress preset.",
+  };
+}
+
+function networkingConfigForHosts(hosts) {
+  return { networking: { type: "limited", allowed_hosts: hosts } };
+}
+
+function splitCustomHosts(text) {
+  return text
+    .split(/[\n,]+/)
+    .map((item) => item.trim())
+    .filter(Boolean);
+}
+
+function previewHosts(hosts) {
+  if (!hosts.length) return "No hosts; all outbound network access remains blocked.";
+  return hosts.join("\n");
+}
+
+function EnvironmentError({ error }) {
+  if (!error) return null;
+  return (
+    <div className="banner" role="alert">
+      <Icon name="alert" size={16} />
+      <div>
+        <div className="b-main">Environment request failed</div>
+        <div className="b-sub">{error.message}</div>
+      </div>
+    </div>
+  );
+}
+
+function CreateEnvironmentModal({ mode, networkingCatalog, onClose, onCreated, onAuthExpired, api = window.OmaConsoleApi }) {
+  const [name, setName] = useStateE("");
+  const catalog = networkingCatalog?.presets?.length
+    ? networkingCatalog.presets
+    : [{ id:"offline-v1", label:"Offline", description:"No external network access.", allowed_hosts:[], config:DEFAULT_ENV_CONFIG }];
+  const deployment = networkingCatalog?.deployment ?? {
+    provider:null,
+    egress_supported:false,
+    reason:"Networking capability was not reported by this deployment.",
+  };
+  const [presetId, setPresetId] = useStateE(catalog[0].id);
+  const [customHostsText, setCustomHostsText] = useStateE("");
+  const [validatedHosts, setValidatedHosts] = useStateE(null);
+  const [validationBusy, setValidationBusy] = useStateE(false);
+  const [busy, setBusy] = useStateE(false);
+  const [error, setError] = useStateE(null);
+  const trimmed = name.trim();
+  const selectedPreset = catalog.find((preset) => preset.id === presetId) ?? catalog[0];
+  const selectedCopy = presetId === "custom"
+    ? { label:"Custom allowlist", description:"Validated custom limited egress." }
+    : presetCopy(selectedPreset);
+  const customHosts = splitCustomHosts(customHostsText);
+  const selectedHosts = presetId === "custom"
+    ? (validatedHosts ?? [])
+    : (selectedPreset?.config?.networking?.allowed_hosts ?? selectedPreset?.allowed_hosts ?? []);
+  const selectedConfig = networkingConfigForHosts(selectedHosts);
+  const selectedNeedsEgress = selectedHosts.length > 0;
+  const capabilityReady = !selectedNeedsEgress || deployment.egress_supported === true;
+  const customValid = presetId !== "custom" || (Array.isArray(validatedHosts) && validatedHosts.length > 0);
+  const valid = trimmed.length > 0 && mode === "api" && !busy && !validationBusy && customValid && capabilityReady;
+
+  const choosePreset = (id) => {
+    setPresetId(id);
+    setValidatedHosts(null);
+    setError(null);
+  };
+
+  const validateCustom = () => {
+    if (mode !== "api" || !customHosts.length || validationBusy || busy) return;
+    setValidationBusy(true);
+    setError(null);
+    api.validateEnvironmentNetworkingHosts(customHosts)
+      .then((hosts) => setValidatedHosts(hosts))
+      .catch((err) => {
+        if (err.status === 401 && onAuthExpired) onAuthExpired();
+        setValidatedHosts(null);
+        setError(err);
+      })
+      .finally(() => setValidationBusy(false));
+  };
+
+  const submit = () => {
+    if (!valid) return;
+    setBusy(true);
+    setError(null);
+    api.createEnvironment({ name: trimmed, config: selectedConfig })
+      .then(onCreated)
+      .catch((err) => {
+        if (err.status === 401 && onAuthExpired) onAuthExpired();
+        setError(err);
+      })
+      .finally(() => setBusy(false));
+  };
+
+  return (
+    <Modal icon="database" title="Create environment" sub="Create an immutable sandbox environment with an explicit limited-network policy." onClose={busy ? () => {} : onClose}
+      footer={<>
+        <span className="left">Sends to <span className="mono">POST /v1/environments</span></span>
+        <button className="btn" disabled={busy} onClick={onClose}>Cancel</button>
+        <button className="btn btn-primary" disabled={!valid} onClick={submit} aria-busy={busy}>
+          <Icon name={busy ? "refresh" : "plus"} size={15} />{busy ? "Creating..." : "Create environment"}</button>
+      </>}>
+      {mode !== "api" && (
+        <div className="inline-warn">
+          <Icon name="alert" size={14} />
+          <span>Environment creation is available only against the live API.</span>
+        </div>
+      )}
+      <EnvironmentError error={error} />
+      <Labeled label="Name" htmlFor="create-environment-name" hint="Stored as the environment name. The API generates the environment ID.">
+        <input id="create-environment-name" name="name" className="input" autoFocus placeholder="e.g. default-docker-local" value={name}
+          disabled={busy} onChange={(e) => { setName(e.target.value); setError(null); }} />
+      </Labeled>
+      <Labeled label="Networking preset" hint="Policy controls allowed destinations. The server separately reports whether this deployment can enforce egress.">
+        <div className={deployment.egress_supported ? "inline-ok" : "inline-warn"} role="status">
+          <Icon name={deployment.egress_supported ? "checkCircle" : "alert"} size={14} />
+          <span>{deployment.egress_supported
+            ? `${deployment.provider || "This deployment"} supports approved HTTPS egress.`
+            : (deployment.reason || "This deployment cannot run network-enabled environments.")}</span>
+        </div>
+        <div className="env-preset-grid" role="radiogroup" aria-label="Networking preset">
+          {catalog.map((preset) => {
+            const copy = presetCopy(preset);
+            return (
+              <button type="button" className={'env-choice' + (presetId === preset.id ? ' on' : '')} key={preset.id}
+                disabled={busy || (preset.config?.networking?.allowed_hosts?.length > 0 && !deployment.egress_supported)} role="radio" aria-checked={presetId === preset.id} onClick={() => choosePreset(preset.id)}>
+                <span className="dot-r" />
+                <span>
+                  <span className="r-main">{copy.label}</span>
+                  <span className="r-sub">{copy.description}</span>
+                </span>
+              </button>
+            );
+          })}
+          <button type="button" className={'env-choice' + (presetId === "custom" ? ' on' : '')}
+            disabled={busy || !deployment.egress_supported} role="radio" aria-checked={presetId === "custom"} onClick={() => choosePreset("custom")}>
+            <span className="dot-r" />
+            <span>
+              <span className="r-main">Custom allowlist</span>
+              <span className="r-sub">Enter exact hosts or supported leading wildcards.</span>
+            </span>
+          </button>
+        </div>
+      </Labeled>
+      {presetId === "custom" && (
+        <Labeled label="Allowed hosts" htmlFor="create-environment-hosts" hint="Use commas or new lines. A wildcard such as *.example.com matches subdomains only; add example.com separately for the bare domain.">
+          <textarea id="create-environment-hosts" className="textarea" value={customHostsText} disabled={busy}
+            placeholder={"registry.npmjs.org\n*.pypi.org\nfiles.pythonhosted.org"}
+            onChange={(event) => { setCustomHostsText(event.target.value); setValidatedHosts(null); setError(null); }} />
+          <div className="env-actions">
+            <button className="btn btn-sm" disabled={!customHosts.length || validationBusy || busy || mode !== "api"} onClick={validateCustom}>
+              <Icon name={validationBusy ? "refresh" : "checkCircle"} size={14} />{validationBusy ? "Validating..." : "Validate hosts"}
+            </button>
+            <span className="field-hint">{validatedHosts ? `${validatedHosts.length} normalized host(s) accepted by server validation.` : "Create remains disabled until validation succeeds."}</span>
+          </div>
+        </Labeled>
+      )}
+      <Labeled label="Exact generated hosts" hint="Environment policies are immutable. To change networking, create a new environment and start a new session. No secrets are stored in the environment or shown to the guest.">
+        <div className="env-preset" aria-label="Generated networking policy preview">
+          <div className="tool-ico"><Icon name="database" size={18} /></div>
+          <div className="grow">
+            <div className="cell-strong">{presetId === "custom" ? "Custom limited egress" : selectedCopy.label}</div>
+            <pre className="mono env-host-preview">{previewHosts(selectedHosts)}</pre>
+            <div className="mono env-config">{JSON.stringify({ config: selectedConfig })}</div>
+          </div>
+        </div>
+      </Labeled>
+    </Modal>
+  );
+}
+
+function ReadinessView({ agents = [], environments = [], models = [], mode = "api", workspaceLoaded = false, go, onCreateEnvironment, onCreateAgent, onCreateSession }) {
+  const authReady = mode === "demo" || workspaceLoaded;
+  const activeAgents = agents.filter((agent) => agent.status !== "archived");
+  const activeEnvironments = environments.filter((environment) => !environment.archived);
+  const envReady = activeEnvironments.length > 0;
+  const modelReady = models.length > 0;
+  const credentialReady = models.some((model) => model.credentials_configured);
+  const readyModelKeys = new Set(models.filter((model) => model.credentials_configured).map((model) => `${model.provider}/${model.id}`));
+  const agentModelKey = (agent) => agent.modelProvider && agent.modelId
+    ? `${agent.modelProvider}/${agent.modelId}`
+    : String(agent.model || "").includes("/") ? String(agent.model) : `anthropic/${agent.model}`;
+  const agentReady = activeAgents.some((agent) => readyModelKeys.has(agentModelKey(agent)));
+  const ready = authReady && agentReady && envReady && modelReady && credentialReady;
+  const items = [
+    {
+      key: "auth",
+      title: "Workspace access",
+      ok: authReady,
+      detail: authReady ? "The console can read workspace-scoped /v1 resources." : "Enter a workspace key or browse from Admin.",
+    },
+    {
+      key: "model",
+      title: "Model and credentials",
+      ok: modelReady && credentialReady,
+      detail: !modelReady
+        ? "No selectable models were returned by this deployment."
+        : credentialReady
+          ? `${models.filter((model) => model.credentials_configured).length} selectable model(s) report configured credentials.`
+          : "Models are registered, but none report configured credentials. Run oma doctor, then oma auth set <provider>.",
+    },
+    {
+      key: "agent",
+      title: "Runnable agent present",
+      ok: agentReady,
+      detail: agentReady
+        ? `${activeAgents.filter((agent) => readyModelKeys.has(agentModelKey(agent))).length} active agent(s) use a credential-ready model.`
+        : activeAgents.length > 0
+          ? "Active agents exist, but none use a credential-ready model. Create an agent with a ready model."
+          : "Create an agent before starting a session.",
+      action: agentReady ? () => go("agents") : onCreateAgent,
+      actionLabel: agentReady ? "View agents" : "Create agent",
+    },
+    {
+      key: "environment",
+      title: "Environment present",
+      ok: envReady,
+      detail: envReady ? `${activeEnvironments.length} environment(s) available for sessions.` : "Create a default-deny environment before starting a session.",
+      action: envReady ? () => go("environments") : onCreateEnvironment,
+      actionLabel: envReady ? "View environments" : "Create environment",
+    },
+    {
+      key: "sandbox",
+      title: "Sandbox verification",
+      ok: null,
+      detail: "Sandbox execution is verified by the first session tool run, not guessed by the browser. Run oma doctor for local prerequisite checks.",
+    },
+  ];
+  return (
+    <div className="main-scroll scroll fade-in">
+      <PageHead title="Start" sub="Observable readiness for the alpha console workflow." />
+      <div className="readiness-summary panel">
+        <div>
+          <h2>{ready ? "Ready for session creation" : "Workspace setup is incomplete"}</h2>
+          <p>Readiness uses the live workspace model catalog and credential flags. Sandbox execution remains unverified until a session runs a tool.</p>
+        </div>
+        <St k={ready ? "active" : "idle"} />
+      </div>
+      <div className="readiness-grid">
+        {items.map((item) => (
+          <div className="panel readiness-card" key={item.key}>
+            <div className="readiness-card-head">
+              <span className={'readiness-mark ' + (item.ok ? 'ok' : 'todo')}>
+                <Icon name={item.ok === null ? "info" : item.ok ? "checkCircle" : "alert"} size={16} />
+              </span>
+              <div>
+                <h3>{item.title}</h3>
+                <p>{item.detail}</p>
+              </div>
+            </div>
+            {item.action && <button className="btn btn-sm" onClick={item.action}>{item.actionLabel}</button>}
+          </div>
+        ))}
+      </div>
+      {ready && <button className="btn btn-primary" onClick={onCreateSession}><Icon name="plus" size={15} />Create session</button>}
+    </div>
+  );
+}
+
+function EnvironmentsView({ environments = [], mode = "api", dataState = "loaded", onCreate, createdEnvironmentId, onArchive, onDelete }) {
+  const [confirm, setConfirm] = useStateE(null);
+  const [actionBusy, setActionBusy] = useStateE(false);
+  const [actionError, setActionError] = useStateE(null);
+  const loading = dataState === "loading";
+  const error = dataState === "error";
+  const partial = dataState === "partial";
+  const empty = dataState === "empty" || environments.length === 0;
+  const readOnly = mode !== "api";
+  const runLifecycle = async () => {
+    if (!confirm || actionBusy) return;
+    setActionBusy(true);
+    setActionError(null);
+    try {
+      if (confirm.kind === 'archive') await onArchive(confirm.environment);
+      else await onDelete(confirm.environment);
+      setConfirm(null);
+    } catch (error) {
+      setActionError(error);
+    } finally {
+      setActionBusy(false);
+    }
+  };
+  return (
+    <div className="main-scroll scroll fade-in">
+      <PageHead title="Environments" sub="Sandbox execution environment configuration."
+        action="Create environment" onAction={onCreate} readOnly={readOnly}
+        endpoint="POST /v1/environments" />
+      <div className="toolbar">
+        <Field wide placeholder="Search by environment ID" />
+        <Select label="Networking" value="All" w={150} />
+      </div>
+      <div className="inline-note" role="status">
+        <Icon name="info" size={14} />
+        <span>Environment configurations are immutable. Archive hides an environment from new sessions while preserving it for existing sessions; deletion is available only when no session references it.</span>
+      </div>
+      {partial && <PartialNotice resource="environments" />}
+      {createdEnvironmentId && (
+        <div className="inline-ok" role="status">
+          <Icon name="checkCircle" size={14} />
+          <span>Created <span className="mono">{createdEnvironmentId}</span>. Refresh before retrying if a later request is ambiguous.</span>
+        </div>
+      )}
+      {loading ? <SkeletonTable rows={4} cols={[150, 'grow', 210, 90]} lead={false} />
+       : error ? <ErrorState resource="environments" onRetry={() => {}} />
+       : empty ? <EmptyState icon="database" title="No environments yet"
+            message="Create a default-deny alpha environment before starting a session."
+            actionLabel={!readOnly ? "Create environment" : null} onAction={onCreate} />
+       : <>
+      <div className="panel">
+        <div className="thead">
+          <span className="th" style={{ width:150 }}>ID</span>
+          <span className="th grow">Name</span>
+          <span className="th" style={{ width:230 }}>Preset</span>
+          <span className="th" style={{ width:90 }}>Status</span>
+          <span className="th" style={{ width:70 }}>Created</span>
+          <span className="th" style={{ width:170 }}>Actions</span>
+        </div>
+        {environments.map((environment) => (
+          <div className="trow env-row" key={environment.id}>
+            <span className="td mono" style={{ width:150, fontSize:12, color:'var(--soft)' }}>{environment.id}</span>
+            <span className="td grow cell-strong">{environment.label}</span>
+            <span className="td mono" style={{ width:230, fontSize:12, color:'var(--soft)' }}>{environment.networkingSummary || environment.image}</span>
+            <span className="td" style={{ width:90 }}><St k={environment.archived ? "archived" : "active"} /></span>
+            <span className="td mono" style={{ width:70, color:'var(--faint)' }}>{environment.created || "—"}</span>
+            <span className="td" style={{ width:170, display:'flex', gap:6, justifyContent:'flex-end' }}>
+              {!environment.archived && <button className="btn btn-sm" disabled={readOnly} title={readOnly ? 'Connect a live workspace to archive this environment.' : undefined} onClick={() => { setActionError(null); setConfirm({ kind:'archive', environment }); }}><Icon name="archive" size={13} />Archive</button>}
+              <button className="btn btn-sm btn-danger" disabled={readOnly} title={readOnly ? 'Connect a live workspace to delete this environment.' : undefined} onClick={() => { setActionError(null); setConfirm({ kind:'delete', environment }); }}><Icon name="trash" size={13} />Delete</button>
+            </span>
+          </div>
+        ))}
+      </div>
+      <Pager />
+      </>}
+      {confirm && <ConfirmDialog
+        icon={confirm.kind === 'archive' ? 'archive' : 'trash'}
+        danger={confirm.kind === 'delete'}
+        title={confirm.kind === 'archive' ? 'Archive environment' : 'Delete environment'}
+        message={confirm.kind === 'archive'
+          ? <>Archive <b>{confirm.environment.label}</b>? It will no longer be available for new sessions. Existing sessions retain their environment.</>
+          : <>Delete <b>{confirm.environment.label}</b>? This is permanent. OMA refuses deletion when any session still references it.</>}
+        confirmLabel={confirm.kind === 'archive' ? 'Archive environment' : 'Delete environment'}
+        endpoint={confirm.kind === 'archive' ? 'POST /v1/environments/:id/archive' : 'DELETE /v1/environments/:id'}
+        onClose={() => !actionBusy && setConfirm(null)} onConfirm={runLifecycle} busy={actionBusy} error={actionError} />}
+    </div>
+  );
+}
+
+Object.assign(window, {
+  CreateEnvironmentModal,
+  EnvironmentsView,
+  ReadinessView,
+});