@specbook/ui 0.2.0 → 0.3.0

package/dist-viewer/index.html

@@ -7,10 +7,10 @@
     <title>Specbook</title>
     <link rel="icon" href="./favicon.svg" type="image/svg+xml" />
     <link rel="apple-touch-icon" href="./apple-touch-icon.png" />
-    <script type="module" crossorigin src="./assets/index-ez9c20v3.js"></script>
-    <link rel="modulepreload" crossorigin href="./assets/panel-C8Ve3LeS.js">
-    <link rel="modulepreload" crossorigin href="./assets/mount-CGL2tOpN.js">
-    <link rel="stylesheet" crossorigin href="./assets/panel-C-vBZrep.css">
+    <script type="module" crossorigin src="./assets/index-BBlFcQUE.js"></script>
+    <link rel="modulepreload" crossorigin href="./assets/panel-9eYU7Gz6.js">
+    <link rel="modulepreload" crossorigin href="./assets/mount-DfwluJy4.js">
+    <link rel="stylesheet" crossorigin href="./assets/panel-hNOojwiM.css">
     <link rel="stylesheet" crossorigin href="./assets/index-Ds6DZpGP.css">
   </head>
   <body>

package/dist-viewer/specbook.js

@@ -1 +1 @@
-import{a as e,r as t,t as n}from"./assets/mount-CGL2tOpN.js";function r(){let e=document.getElementById(`specbook-config`);if(e?.textContent)try{return JSON.parse(e.textContent)}catch{}let t=document.querySelector(`script[src$="specbook.js"][data-spec]`);return{spec:t?.dataset.spec,baseUrl:t?.dataset.baseUrl}}function i(e){let t=e?document.querySelector(e):document.getElementById(`app`);if(t)return t;let n=document.createElement(`div`);return n.id=`app`,document.body.append(n),n}var a=(e,t,n=!1)=>{e.textContent=t,e.style.cssText=`font:16px system-ui,sans-serif;padding:24px;color:${n?`#b42318`:`#5b6270`}`};async function o(){if(await e({stripWhenUnclaimed:!1}))return;let o=r(),s=i(o.target);if(!o.spec)return a(s,`Specbook: no spec was given (set "spec" in #specbook-config).`,!0);let c;try{c=new URL(o.spec,location.href).toString()}catch{return a(s,`Specbook: "${o.spec}" is not a valid address.`,!0)}a(s,`Loading the API…`);let l=new t;try{let e=await l.open({kind:`url`,url:c}).promise;s.textContent=``,s.removeAttribute(`style`),await n({result:e,worker:l,source:{kind:`url`,url:c},baseUrl:o.baseUrl,shareable:!1,setTitle:!1})}catch(e){a(s,`Specbook: ${e instanceof Error?e.message:String(e)}`,!0)}}o();
+import{a as e,r as t,t as n}from"./assets/mount-DfwluJy4.js";function r(){let e=document.getElementById(`specbook-config`);if(e?.textContent)try{return JSON.parse(e.textContent)}catch{}let t=document.querySelector(`script[src$="specbook.js"][data-spec]`);return{spec:t?.dataset.spec,baseUrl:t?.dataset.baseUrl}}function i(e){let t=e?document.querySelector(e):document.getElementById(`app`);if(t)return t;let n=document.createElement(`div`);return n.id=`app`,document.body.append(n),n}var a=(e,t,n=!1)=>{e.textContent=t,e.style.cssText=`font:16px system-ui,sans-serif;padding:24px;color:${n?`#b42318`:`#5b6270`}`};async function o(){if(await e({stripWhenUnclaimed:!1}))return;let o=r(),s=i(o.target);if(!o.spec)return a(s,`Specbook: no spec was given (set "spec" in #specbook-config).`,!0);let c;try{c=new URL(o.spec,location.href).toString()}catch{return a(s,`Specbook: "${o.spec}" is not a valid address.`,!0)}a(s,`Loading the API…`);let l=new t;try{let e=await l.open({kind:`url`,url:c}).promise;s.textContent=``,s.removeAttribute(`style`),await n({result:e,worker:l,source:{kind:`url`,url:c},baseUrl:o.baseUrl,shareable:!1,setTitle:!1})}catch(e){a(s,`Specbook: ${e instanceof Error?e.message:String(e)}`,!0)}}o();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@specbook/ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "The Specbook docs app, spec viewer and embeddable specbook.js.",
   "keywords": [
     "specbook",
@@ -29,14 +29,14 @@
   },
   "dependencies": {
     "@preact/signals": "2.11.3",
-    "@specbook/codegen": "0.2.0",
-    "@specbook/core": "0.2.0",
+    "@specbook/codegen": "0.3.0",
+    "@specbook/core": "0.3.0",
     "preact": "11.0.1",
     "prism-code-editor": "^5.4.0"
   },
   "devDependencies": {
     "@faker-js/faker": "9.3.0",
-    "@specbook/vite": "0.2.0",
+    "@specbook/vite": "0.3.0",
     "@vitest/browser-playwright": "5.0.3",
     "playwright": "1.64.0",
     "typescript": "7.0.2",
@@ -59,6 +59,7 @@
     "test:viewer": "pnpm run build:viewer && vitest run --config vitest.viewer.config.ts",
     "test:oauth": "pnpm --filter @specbook/cli build && pnpm run build:viewer && vitest run --config vitest.oauth.config.ts",
     "build:site": "pnpm run build:viewer && node scripts/assemble-site.mjs",
-    "deploy:site": "pnpm run build:viewer && node scripts/assemble-site.mjs --previous https://ui.specbook.dev && npx --yes wrangler@4 pages deploy dist-site --project-name specbook-ui --branch main"
+    "deploy:site": "pnpm run build:viewer && node scripts/assemble-site.mjs --previous https://ui.specbook.dev && npx --yes wrangler@4 pages deploy dist-site --project-name specbook-ui --branch main",
+    "test:embed": "pnpm --filter @specbook/cli build && vitest run --config vitest.embed.config.ts"
   }
 }

package/src/app.tsx

@@ -7,21 +7,40 @@ import { EnvBadge } from './components/EnvBadge'
 import { EnvironmentMenu } from './components/EnvironmentMenu'
 import { GitHubStar } from './components/GitHubStar'
 import { ListResizer, listWidth } from './components/ListResizer'
+import { NewEnvironmentDialog } from './components/NewEnvironmentDialog'
 import { Palette } from './components/Palette'
 import { ShareMenu } from './components/ShareMenu'
 import { ThemeToggle } from './components/ThemeToggle'
 import type { SequenceInfo, Variant } from './engine'
 import { type Entry, go, pageOf, paletteOpen, parseHash, route, setDefaultService } from './nav'
-import { engine, registry } from './runtime'
-import { env, environmentNote, environmentRisk, environments, locale, seed, version } from './store'
+import { engine, isMinimal, registry } from './runtime'
+import {
+  env,
+  environmentNote,
+  environmentRisk,
+  environments,
+  locale,
+  newEnvironmentOpen,
+  seed,
+  version,
+} from './store'
+
+/** The picker's last entry: not an environment, a way to make one. */
+const NEW_ENVIRONMENT = '\u0000new-environment'
 
 // the hosted viewer is Specbook itself, so its header carries our mark unless the API brings a logo
 const ownMark = globalThis.__SPECBOOK_VIEWER__?.source ? markUrl : undefined
 
-// one API: its links leave the service out
-{
-  const names = Object.keys(registry.manifests)
-  setDefaultService(names.length === 1 ? names[0] : undefined)
+/**
+ * One API: its links leave the service out. The services' lists are fetched before the app first renders, not
+ * before its code loads, so this is read as the app first renders and not as the module loads. It also reads the
+ * route again from the address, so it runs once: on every render it would throw away the route's state.
+ */
+function useDefaultService() {
+  useState(() => {
+    const names = Object.keys(registry.manifests)
+    setDefaultService(names.length === 1 ? names[0] : undefined)
+  })
 }
 
 const fakerLocales = signal<string[]>([])
@@ -39,6 +58,7 @@ function usePanelHost() {
 }
 
 export function App() {
+  useDefaultService()
   const [variants, setVariants] = useState<Record<string, Variant[]>>({})
   const [sequences, setSequences] = useState<SequenceInfo[] | undefined>(undefined)
   const [menuOpen, setMenuOpen] = useState(false)
@@ -134,6 +154,20 @@ export function App() {
     for (const m of Object.values(registry.manifests)) {
       for (const o of m.operations) {
         const key = `${m.service}/${o.id}`
+        // each saved request is listed on its own too, and opens its operation on that request
+        for (const v of variants[key] ?? [])
+          out.push({
+            kind: 'req',
+            route: { kind: 'op', key, play: `saved:${v.file}` },
+            title: v.name,
+            group: 'request',
+            service: m.service,
+            tag: o.tags[0] ?? 'default',
+            method: o.method,
+            path: o.path,
+            tags: v.def.input.tags,
+            hay: `${o.id} ${o.method} ${o.path} ${(v.def.input.tags ?? []).join(' ')} ${v.file}`,
+          })
         const saved = (variants[key] ?? []).map((v) => v.name).join(' ')
         out.push({
           kind: 'op',
@@ -186,14 +220,14 @@ export function App() {
     if (r.kind !== 'op' && r.kind !== 'seq') return {}
     const active = entries.find(
       (e) =>
-        (e.route.kind === 'op' && r.kind === 'op' && e.route.key === r.key) ||
-        (e.route.kind === 'seq' && r.kind === 'seq' && e.route.id === r.id),
+        (e.kind === 'op' && r.kind === 'op' && e.route.kind === 'op' && e.route.key === r.key) ||
+        (e.kind === 'seq' && r.kind === 'seq' && e.route.kind === 'seq' && e.route.id === r.id),
     )
     if (!active) return {}
     const sibs = entries.filter((e) =>
       active.kind === 'seq'
         ? e.kind === 'seq'
-        : e.service === active.service && e.tag === active.tag,
+        : e.kind === 'op' && e.service === active.service && e.tag === active.tag,
     )
     const at = sibs.indexOf(active)
     const to = (e?: Entry) => (e ? () => go({ ...e.route, play: '' } as typeof r) : undefined)
@@ -235,7 +269,7 @@ export function App() {
           <span class="brand-name">{brand.value.name ?? 'Specbook'}</span>
         </button>
         <button type="button" class="palette-btn" onClick={() => (paletteOpen.value = true)}>
-          <span>Jump to an operation or flow…</span>
+          <span>{isMinimal ? 'Jump to a request or flow…' : 'Jump to an operation or flow…'}</span>
           <kbd>⌘K</kbd>
         </button>
         <span class="spacer" />
@@ -306,13 +340,23 @@ export function App() {
             Environment
             <select
               value={env.value}
-              onChange={(e) => (env.value = (e.target as HTMLSelectElement).value)}
+              onChange={(e) => {
+                const picked = (e.target as HTMLSelectElement).value
+                if (picked === NEW_ENVIRONMENT) {
+                  // not an environment: open the dialog and leave the selection alone
+                  ;(e.target as HTMLSelectElement).value = env.value
+                  newEnvironmentOpen.value = true
+                } else env.value = picked
+              }}
             >
               {environments.value.map((e) => (
                 <option value={e} title={environmentNote.value[e]}>
                   {e}
                 </option>
               ))}
+              {engine.canCreateEnvironment() && (
+                <option value={NEW_ENVIRONMENT}>New environment…</option>
+              )}
             </select>
           </label>
           <GitHubStar />
@@ -326,10 +370,19 @@ export function App() {
         </nav>
         <ListResizer />
         <main class="stage">
-          {(r.kind === 'home' || r.kind === 'browse') && <Overview services={services} />}
+          {(r.kind === 'home' || r.kind === 'browse') && (
+            <Overview
+              services={services}
+              counts={{
+                flows: entries.filter((e) => e.kind === 'seq').length,
+                requests: entries.filter((e) => e.kind === 'req').length,
+              }}
+            />
+          )}
         </main>
       </div>
       <Palette entries={entries} />
+      <NewEnvironmentDialog />
       {panel && r.kind === 'op' && opInfo && (
         <panel.Host
           kind="op"

package/src/branding.ts

@@ -53,14 +53,22 @@ const tokens = (accent: string) =>
  * The accent as CSS: unlayered, so it wins over the default tokens. A separate dark value applies
  * under `prefers-color-scheme: dark` (unless the light theme is forced) and `data-theme="dark"`.
  */
-export function brandCss(b: Pick<BrandingConfig, 'accent' | 'accentDark'>): string {
+export function brandCss(
+  b: Pick<BrandingConfig, 'accent' | 'accentDark'>,
+  scope: 'root' | 'host' = 'root',
+): string {
   if (!b.accent && !b.accentDark) return ''
-  const light = b.accent ? `:root{${tokens(b.accent)}}` : ''
+  // in a shadow root the tokens sit on the host element, which :root does not match
+  const base = scope === 'host' ? ':host' : ':root'
+  const notLight =
+    scope === 'host' ? ':host(:not([data-theme="light"]))' : ':root:not([data-theme="light"])'
+  const dark = scope === 'host' ? ':host([data-theme="dark"])' : ':root[data-theme="dark"]'
+  const light = b.accent ? `${base}{${tokens(b.accent)}}` : ''
   if (!b.accentDark) return light
   return (
     `${light}` +
-    `@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){${tokens(b.accentDark)}}}` +
-    `:root[data-theme="dark"]{${tokens(b.accentDark)}}`
+    `@media (prefers-color-scheme: dark){${notLight}{${tokens(b.accentDark)}}}` +
+    `${dark}{${tokens(b.accentDark)}}`
   )
 }
 

package/src/components/Catalog.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
 import { brand } from '../branding'
 import { catalogFilter, catalogService, type Entry, go, route, search } from '../nav'
 import { Lock } from '../panel/icons'
+import { isMinimal } from '../runtime'
 import { ModeHint } from './ModeHint'
 import { PoweredBy } from './PoweredBy'
 
@@ -19,10 +20,12 @@ const DEFAULT_FLOW_GROUP = 'Default'
 
 function isActive(e: Entry): boolean {
   const r = route.value
-  return (
-    (e.route.kind === 'op' && r.kind === 'op' && e.route.key === r.key) ||
-    (e.route.kind === 'seq' && r.kind === 'seq' && e.route.id === r.id)
-  )
+  if (e.route.kind === 'op' && r.kind === 'op' && e.route.key === r.key) {
+    // a saved request is active on its own link; the operation row stays quiet while one of its requests is open
+    const onSaved = (r.play ?? '').startsWith('saved:')
+    return e.kind === 'req' ? r.play === e.route.play : !onSaved
+  }
+  return e.route.kind === 'seq' && r.kind === 'seq' && e.route.id === r.id
 }
 
 function OpRow({ e }: { e: Entry }) {
@@ -54,6 +57,11 @@ function useCatalog(entries: Entry[], services: ServiceInfo[]) {
   const svc = single ? (services[0]?.id ?? '') : catalogService.value
   const ops = useMemo(() => entries.filter((e) => e.kind === 'op'), [entries])
   const flows = useMemo(() => entries.filter((e) => e.kind === 'seq'), [entries])
+  const reqs = useMemo(() => entries.filter((e) => e.kind === 'req'), [entries])
+  const shownReqs = useMemo(() => {
+    const scoped = svc ? reqs.filter((e) => e.service === svc) : reqs
+    return q ? search(scoped, q, 200) : scoped
+  }, [reqs, svc, q])
   const shownOps = useMemo(() => {
     const scoped = svc ? ops.filter((e) => e.service === svc) : ops
     return q ? search(scoped, q, 500) : scoped
@@ -62,7 +70,7 @@ function useCatalog(entries: Entry[], services: ServiceInfo[]) {
     const scoped = svc && !single ? flows.filter((e) => e.tags?.includes(svc)) : flows
     return q ? search(scoped, q, 100) : scoped
   }, [flows, svc, q, single])
-  return { q, single, svc, shownOps, shownFlows }
+  return { q, single, svc, shownOps, shownFlows, shownReqs }
 }
 
 /** The left column: pills, filter and grouped rows. It never changes width, so opening the panel moves nothing. */
@@ -71,7 +79,14 @@ export function CatalogList({ entries, services }: { entries: Entry[]; services:
   const list = useRef<HTMLDivElement>(null)
   // what the user chose per group; groups they haven't touched follow the default
   const [chosen, setChosen] = useState<Map<string, boolean>>(new Map())
-  const { q, single, svc, shownOps, shownFlows } = useCatalog(entries, services)
+  const { q, single, svc, shownOps, shownFlows, shownReqs } = useCatalog(entries, services)
+  // the flows and the requests are each a section that folds, open until the person closes it
+  const sectionOpen = (name: string) => chosen.get(`section:${name}`) ?? true
+  const toggleSection = (name: string) => {
+    const n = new Map(chosen)
+    n.set(`section:${name}`, !sectionOpen(name))
+    setChosen(n)
+  }
 
   useEffect(() => {
     const key = (e: KeyboardEvent) => {
@@ -165,7 +180,13 @@ export function CatalogList({ entries, services }: { entries: Entry[]; services:
             ref={filter}
             type="text"
             class="cat-filter"
-            placeholder={svc ? `Filter ${svc}` : 'Filter operations and flows'}
+            placeholder={
+              svc
+                ? `Filter ${svc}`
+                : isMinimal
+                  ? 'Filter requests and flows'
+                  : 'Filter operations and flows'
+            }
             aria-label="Filter"
             value={catalogFilter.value}
             onInput={(e) => (catalogFilter.value = (e.target as HTMLInputElement).value)}
@@ -185,48 +206,89 @@ export function CatalogList({ entries, services }: { entries: Entry[]; services:
 
       {flowGroups.length > 0 && (
         <section class="flows" aria-label="Flows">
-          <div class="flows-title">
+          <button
+            type="button"
+            class="flows-title"
+            aria-expanded={sectionOpen('flows')}
+            onClick={() => toggleSection('flows')}
+          >
+            <span class="caret">{sectionOpen('flows') ? '▾' : '▸'}</span>
             <span class="method flow">FLOW</span>
-            <span class="muted small">Multi-step sequences you can run end to end</span>
+            <span class="muted small">Multi-step flows you can run end to end</span>
             <span class="count">{shownFlows.length}</span>
-          </div>
-          {flowGroups.map(([name, rows]) => {
-            const key = `flows:${name}`
-            const solo = flowGroups.length === 1
-            const expanded = solo || (chosen.get(key) ?? true)
-            return (
-              <div class="flow-group" key={key}>
-                {!solo && (
-                  <button
-                    type="button"
-                    class="group-head flow-head"
-                    aria-expanded={expanded}
-                    onClick={() => {
-                      const n = new Map(chosen)
-                      n.set(key, !expanded)
-                      setChosen(n)
-                    }}
-                  >
-                    <span class="caret">{expanded ? '▾' : '▸'}</span> {name}{' '}
-                    <span class="count">{rows.length}</span>
-                  </button>
-                )}
-                {expanded &&
-                  rows.map((e) => (
+          </button>
+          {sectionOpen('flows') &&
+            flowGroups.map(([name, rows]) => {
+              const key = `flows:${name}`
+              const solo = flowGroups.length === 1
+              const expanded = solo || (chosen.get(key) ?? true)
+              return (
+                <div class="flow-group" key={key}>
+                  {!solo && (
                     <button
                       type="button"
-                      class={`op-row flow-row ${isActive(e) ? 'active' : ''}`}
-                      onClick={() => go(e.route)}
+                      class="group-head flow-head"
+                      aria-expanded={expanded}
+                      onClick={() => {
+                        const n = new Map(chosen)
+                        n.set(key, !expanded)
+                        setChosen(n)
+                      }}
                     >
-                      <span class="flow-play" aria-hidden="true">
-                        ▶
-                      </span>
-                      <span class="op-title">{e.title}</span>
+                      <span class="caret">{expanded ? '▾' : '▸'}</span> {name}{' '}
+                      <span class="count">{rows.length}</span>
                     </button>
+                  )}
+                  {expanded &&
+                    rows.map((e) => (
+                      <button
+                        type="button"
+                        class={`op-row flow-row ${isActive(e) ? 'active' : ''}`}
+                        onClick={() => go(e.route)}
+                      >
+                        <span class="flow-play" aria-hidden="true">
+                          ▶
+                        </span>
+                        <span class="op-title">{e.title}</span>
+                      </button>
+                    ))}
+                </div>
+              )
+            })}
+        </section>
+      )}
+
+      {shownReqs.length > 0 && (
+        <section class="flows requests" aria-label="Requests">
+          <button
+            type="button"
+            class="flows-title"
+            aria-expanded={sectionOpen('requests')}
+            onClick={() => toggleSection('requests')}
+          >
+            <span class="caret">{sectionOpen('requests') ? '▾' : '▸'}</span>
+            <span class="method req">REQ</span>
+            <span class="muted small">Requests you can run and check</span>
+            <span class="count">{shownReqs.length}</span>
+          </button>
+          {sectionOpen('requests') &&
+            shownReqs.map((e) => (
+              <button
+                type="button"
+                class={`op-row req-row ${isActive(e) ? 'active' : ''}`}
+                onClick={() => go(e.route)}
+                title={`${e.method} ${e.path}`}
+              >
+                <span class={`method ${e.method}`}>{e.method}</span>
+                <span class="op-title">
+                  {e.title}
+                  {(e.tags ?? []).map((t) => (
+                    <span class="chip req-tag">{t}</span>
                   ))}
-              </div>
-            )
-          })}
+                </span>
+                <span class="op-path">{e.path}</span>
+              </button>
+            ))}
         </section>
       )}
 
@@ -247,7 +309,7 @@ export function CatalogList({ entries, services }: { entries: Entry[]; services:
           </div>
         )
       })}
-      {groups.length === 0 && flowGroups.length === 0 && (
+      {groups.length === 0 && flowGroups.length === 0 && shownReqs.length === 0 && (
         <p class="muted cat-empty">
           {q ? `Nothing matches “${q}”.` : 'No operations.'}{' '}
           {q && (
@@ -262,7 +324,13 @@ export function CatalogList({ entries, services }: { entries: Entry[]; services:
 }
 
 /** The stage when nothing is open: the API's identity, since the list is the content. */
-export function Overview({ services }: { services: ServiceInfo[] }) {
+export function Overview({
+  services,
+  counts,
+}: {
+  services: ServiceInfo[]
+  counts?: { flows: number; requests: number }
+}) {
   const b = brand.value
   // wait for the project's branding: showing the fallback first and swapping it makes the page jump
   if (!b.ready) return <div class="overview" aria-busy="true" />
@@ -274,11 +342,16 @@ export function Overview({ services }: { services: ServiceInfo[] }) {
     (single
       ? (single.title ?? single.id)
       : `${services.length} APIs · ${total.toLocaleString()} operations`)
-  const meta = single
-    ? `${single.ops} ${single.ops === 1 ? 'operation' : 'operations'}${single.version ? ` · v${single.version}` : ''}`
-    : b.name || b.title
-      ? `${services.length} APIs · ${total.toLocaleString()} operations`
-      : undefined
+  const worth = (n: number, one: string, many: string) =>
+    `${n.toLocaleString()} ${n === 1 ? one : many}`
+  const meta =
+    isMinimal && counts
+      ? `${worth(counts.flows, 'flow', 'flows')} · ${worth(counts.requests, 'request', 'requests')}`
+      : single
+        ? `${single.ops} ${single.ops === 1 ? 'operation' : 'operations'}${single.version ? ` · v${single.version}` : ''}`
+        : b.name || b.title
+          ? `${services.length} APIs · ${total.toLocaleString()} operations`
+          : undefined
   return (
     <div class="overview">
       {b.logo && (
@@ -297,14 +370,18 @@ export function Overview({ services }: { services: ServiceInfo[] }) {
       <h1>{title}</h1>
       {b.tagline && <p class="tagline">{b.tagline}</p>}
       {meta && <p class="muted">{meta}</p>}
-      <p class="overview-hint">Choose an operation or flow on the left to read it and try it.</p>
+      <p class="overview-hint">
+        {isMinimal
+          ? 'Choose a request or flow on the left to run it.'
+          : 'Choose an operation or flow on the left to read it and try it.'}
+      </p>
       <ModeHint />
       <button
         type="button"
         class="btn primary overview-browse"
         onClick={() => go({ kind: 'browse' })}
       >
-        Browse operations and flows
+        {isMinimal ? 'Browse requests and flows' : 'Browse operations and flows'}
       </button>
       {b.links.length > 0 && (
         <p class="overview-links">

package/src/components/EnvBadge.tsx

@@ -1,4 +1,14 @@
-import { env, environmentNote, environmentRisk, environments } from '../store'
+import { engine } from '../runtime'
+import {
+  env,
+  environmentNote,
+  environmentRisk,
+  environments,
+  features,
+  newEnvironmentOpen,
+} from '../store'
+
+const NEW_ENVIRONMENT = '\u0000new-environment'
 
 /**
  * The environment a request will run in, and a way to change it. On a phone the header with the
@@ -19,7 +29,8 @@ export function EnvBadge() {
       : risk === 'production' || (risk !== 'sandbox' && /prod/i.test(name))
         ? 'prod'
         : 'live'
-  const switchable = names.length > 1
+  const canCreate = features.value.createEnvironment && engine.canCreateEnvironment()
+  const switchable = names.length > 1 || canCreate
   return (
     <span
       class={`env-badge ${kind} ${switchable ? 'switch' : ''}`}
@@ -34,13 +45,20 @@ export function EnvBadge() {
         <select
           aria-label="Environment"
           value={name}
-          onChange={(e) => (env.value = (e.target as HTMLSelectElement).value)}
+          onChange={(e) => {
+            const picked = (e.target as HTMLSelectElement).value
+            if (picked === NEW_ENVIRONMENT) {
+              ;(e.target as HTMLSelectElement).value = env.value
+              newEnvironmentOpen.value = true
+            } else env.value = picked
+          }}
         >
           {names.map((n) => (
             <option value={n} title={environmentNote.value[n]}>
               {n}
             </option>
           ))}
+          {canCreate && <option value={NEW_ENVIRONMENT}>New environment…</option>}
         </select>
       )}
     </span>