@specbook/ui 0.1.0 → 0.3.0

package/src/panel/ParamGrid.tsx

@@ -2,6 +2,7 @@ import { signal } from '@preact/signals'
 import { useEffect, useRef } from 'preact/hooks'
 import type { FieldDoc } from '../fielddoc'
 import { inlineSummary, plainText } from '../markdown'
+import { kv } from '../storage'
 import { Combo } from './Combo'
 import type { FieldRow } from './draft'
 
@@ -28,6 +29,8 @@ interface Props {
   placeholder?: string
   /** the grid sits under a tab that already names it */
   bare?: boolean
+  /** values are shown, not edited (a saved request carries its own) */
+  readOnly?: boolean
 }
 
 type Shown = FieldRow & { virtual?: true }
@@ -41,7 +44,7 @@ const cols = signal(loadCols())
 
 function loadCols(): { key: number; val: number } {
   try {
-    const c = JSON.parse(localStorage.getItem(COLS_KEY) ?? 'null')
+    const c = JSON.parse(kv.local.getItem(COLS_KEY) ?? 'null')
     if (c && c.key >= MIN_COL && c.val >= MIN_COL && c.key + c.val <= 100 - MIN_COL) return c
   } catch {
     /* fall through */
@@ -55,8 +58,8 @@ function setCols(next: { key: number; val: number } | undefined) {
   const val = Math.min(100 - key - MIN_COL, Math.max(MIN_COL, c.val))
   cols.value = { key: Math.round(key * 10) / 10, val: Math.round(val * 10) / 10 }
   try {
-    if (next) localStorage.setItem(COLS_KEY, JSON.stringify(cols.value))
-    else localStorage.removeItem(COLS_KEY)
+    if (next) kv.local.setItem(COLS_KEY, JSON.stringify(cols.value))
+    else kv.local.removeItem(COLS_KEY)
   } catch {
     /* optional */
   }
@@ -167,6 +170,7 @@ export function ParamGrid({
   bad,
   placeholder,
   bare,
+  readOnly,
 }: Props) {
   const root = useRef<HTMLElement>(null)
   const table = useRef<HTMLTableElement>(null)
@@ -252,7 +256,7 @@ export function ParamGrid({
           {all.map((r, i) => {
             const d = docOf(r.key)
             const isFile = info(r.key)?.file
-            const locked = fixed || r.virtual || info(r.key)
+            const locked = fixed || readOnly || r.virtual || info(r.key)
             return (
               <tr class={`${r.enabled ? '' : 'off'} ${bad === r.key ? 'bad' : ''}`} key={i}>
                 <td class="g-check">
@@ -260,7 +264,7 @@ export function ParamGrid({
                     type="checkbox"
                     aria-label={`Send ${r.key}`}
                     checked={r.enabled}
-                    disabled={fixed}
+                    disabled={fixed || readOnly}
                     onChange={(e) => patch(i, { enabled: (e.target as HTMLInputElement).checked })}
                   />
                 </td>
@@ -292,6 +296,7 @@ export function ParamGrid({
                     <label class="file-cell">
                       <input
                         type="file"
+                        disabled={readOnly}
                         aria-label={`File for ${r.key}`}
                         onChange={(e) => {
                           const file = (e.target as HTMLInputElement).files?.[0]
@@ -306,6 +311,7 @@ export function ParamGrid({
                       options={d.enum.map(String)}
                       label={r.key}
                       cell={`${i}:${VALUE}`}
+                      readOnly={readOnly}
                       placeholder="value"
                       onKeyDown={keys(i, VALUE)}
                       onChange={(value) => patch(i, { value, enabled: true })}
@@ -315,6 +321,7 @@ export function ParamGrid({
                       class="cell"
                       data-cell={`${i}:${VALUE}`}
                       value={r.value}
+                      readOnly={readOnly}
                       placeholder={placeholder ?? 'value'}
                       aria-label={`Value of ${r.key}`}
                       onInput={(e) =>
@@ -336,7 +343,7 @@ export function ParamGrid({
                   )}
                 </td>
                 <td class="g-act">
-                  {!fixed && r.key && (
+                  {!fixed && !readOnly && r.key && (
                     <button
                       type="button"
                       class="icon"
@@ -347,7 +354,7 @@ export function ParamGrid({
                       <Icon d="M5.5 5.5h7v7h-7zM3.5 10.5v-7h7" />
                     </button>
                   )}
-                  {!fixed && !r.virtual && (
+                  {!fixed && !readOnly && !r.virtual && (
                     <button
                       type="button"
                       class="icon"
@@ -362,7 +369,7 @@ export function ParamGrid({
               </tr>
             )
           })}
-          {!fixed && (
+          {!fixed && !readOnly && (
             <tr class="ghost" key={ghost}>
               <td class="g-check" />
               <td class="g-key">

package/src/panel/RequestPanel.tsx

@@ -1,17 +1,19 @@
 import { collectPlaceholders, type Encoding, type Example, type RunResult } from '@specbook/core'
-import { useEffect, useMemo, useState } from 'preact/hooks'
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
 import { EnvBadge } from '../components/EnvBadge'
 import type { Variant } from '../engine'
 import { fieldDoc, withNote } from '../fielddoc'
 import { engine, isStatic, registry, saveFile } from '../runtime'
 import { type Defs, type JsonSchema, propsOf, unwrap } from '../schema'
 import { statusClass, statusName } from '../status'
-import { env, locale, seed, version } from '../store'
+import { kv } from '../storage'
+import { env, envSettingsOpen, envVarsVersion, features, locale, seed, version } from '../store'
+import { announcement, describeRun } from './announce'
 import { Body } from './Body'
 import { DraftCodeSample } from './CodeSample'
 import { type Draft, draftFrom, forStorage, previewUrl, requestParts } from './draft'
 import { useOperationNotes } from './fieldnotes'
-import { PaperPlane } from './icons'
+import { PaperPlane, StopSquare } from './icons'
 import { type Documented, ParamGrid } from './ParamGrid'
 import { RequestView } from './RequestView'
 import { ResponseView } from './ResponseView'
@@ -33,6 +35,8 @@ interface Props {
   variants: Variant[]
   /** example name to open, '' for the first */
   initial: string
+  /** run once as soon as the request is ready (an embed that asks for it, never against production) */
+  autoRun?: boolean
 }
 
 const storeKey = (key: string, sel: string) => `specbook:draft:${key}:${sel}`
@@ -44,7 +48,7 @@ const slug = (s: string) =>
 
 function readDraft(key: string): Draft | undefined {
   try {
-    const raw = localStorage.getItem(key)
+    const raw = kv.local.getItem(key)
     return raw ? (JSON.parse(raw) as Draft) : undefined
   } catch {
     return undefined
@@ -64,21 +68,28 @@ interface SavedExample {
 
 function takeSaved(key: string): SavedExample | undefined {
   try {
-    const raw = sessionStorage.getItem(SAVED_KEY)
+    const raw = kv.session.getItem(SAVED_KEY)
     const saved = raw ? (JSON.parse(raw) as SavedExample) : undefined
     if (saved?.key !== key) return undefined
-    sessionStorage.removeItem(SAVED_KEY)
+    kv.session.removeItem(SAVED_KEY)
     return saved
   } catch {
     return undefined
   }
 }
 
-export function RequestPanel({ service, op, variants, initial }: Props) {
+export function RequestPanel({ service, op, variants, initial, autoRun }: Props) {
   const key = `${service}/${op.id}`
+  const panelRoot = useRef<HTMLDivElement>(null)
+  const autoRan = useRef(false)
+  /** ends the request that is out: a person pressing Stop, so a request that never answers is not the end of the panel */
+  const stopper = useRef<AbortController | undefined>(undefined)
   const examples = engine.examplesOf(key)
   const [notice, setNotice] = useState<SavedExample | undefined>(() => takeSaved(key))
   const [sel, setSel] = useState(() => {
+    // a link to a saved request ("saved:<file>") opens on it
+    if (initial?.startsWith('saved:') && variants.some((v) => `saved:${v.file}` === initial))
+      return initial
     const named = examples.find((e) => e.name === (notice?.name ?? initial))
     return named
       ? `ex:${named.name}`
@@ -110,11 +121,27 @@ export function RequestPanel({ service, op, variants, initial }: Props) {
   const [baseUrl, setBaseUrl] = useState('')
   const [known, setKnown] = useState<string[]>()
 
+  const [addressError, setAddressError] = useState<string>()
   useEffect(() => {
+    let on = true
+    setAddressError(undefined)
+    // mock has no address; elsewhere it is whatever this environment's variables make it
+    if (env.value === 'mock') {
+      setBaseUrl('')
+      return
+    }
     engine
-      .config(version.value)
-      .then((c) => setBaseUrl(c.services?.[service]?.baseUrl?.[env.value] ?? ''))
-  }, [service, env.value])
+      .baseUrlOf(service, env.value, version.value)
+      .then((url) => on && setBaseUrl(url ?? ''))
+      .catch((e: unknown) => {
+        if (!on) return
+        setBaseUrl('')
+        setAddressError(e instanceof Error ? e.message : String(e))
+      })
+    return () => {
+      on = false
+    }
+  }, [service, env.value, version.value, envVarsVersion.value])
 
   useEffect(() => {
     let live = true
@@ -174,8 +201,8 @@ export function RequestPanel({ service, op, variants, initial }: Props) {
     try {
       const k = storeKey(key, sel)
       if (baseDraft && JSON.stringify(forStorage(d)) === JSON.stringify(forStorage(baseDraft)))
-        localStorage.removeItem(k)
-      else localStorage.setItem(k, JSON.stringify(forStorage(d)))
+        kv.local.removeItem(k)
+      else kv.local.setItem(k, JSON.stringify(forStorage(d)))
     } catch {
       /* optional */
     }
@@ -217,35 +244,49 @@ export function RequestPanel({ service, op, variants, initial }: Props) {
 
   // placeholders nothing supplies: not in config or the environment's files. They stay listed while
   // you type, so the field you are filling does not disappear under you.
-  const needed = known ? placeholders.filter((n) => !known.includes(n)) : []
+  // a saved request brings the values of its own `init`: they are what a run uses, so nothing is missing
+  const own = Object.keys(saved?.def.input.init ?? {})
+  const needed = known ? placeholders.filter((n) => !known.includes(n) && !own.includes(n)) : []
   const unfilled = needed.filter((n) => (vars[n] ?? '') === '')
 
   const play = async (forceStatus?: number) => {
-    if (!draft) return
+    if (!draft || stopper.current) return
     setError(undefined)
     setRunning(true)
+    const stop = new AbortController()
+    stopper.current = stop
     try {
       const def = saved
         ? saved.def
         : await engine.operationRequest(key, version.value, requestParts(draft, encoding))
-      setResult(
-        await engine.run(def, {
-          env: env.value,
-          version: version.value,
-          mockStatus: env.value === 'mock' ? (forceStatus ?? forced) : undefined,
-          locale: locale.value,
-          seed: seed.value,
-          vars: Object.fromEntries(Object.entries(vars).filter(([, v]) => v !== '')),
-          fileDir: base?.dir,
-        }),
-      )
+      const ran = await engine.run(def, {
+        env: env.value,
+        version: version.value,
+        mockStatus: env.value === 'mock' ? (forceStatus ?? forced) : undefined,
+        locale: locale.value,
+        seed: seed.value,
+        vars: Object.fromEntries(Object.entries(vars).filter(([, v]) => v !== '')),
+        fileDir: base?.dir,
+        signal: stop.signal,
+      })
+      setResult(ran)
+      announcement.value = describeRun(ran)
     } catch (e) {
       setError(e instanceof Error ? e.message : String(e))
     } finally {
+      stopper.current = undefined
       setRunning(false)
+      // what you sent a request to see is the response, so show it (the tab stays one click away)
+      setTab('response')
     }
   }
 
+  useEffect(() => {
+    if (!autoRun || !draft || autoRan.current) return
+    autoRan.current = true
+    void play()
+  }, [draft])
+
   const saveExample = async (name: string) => {
     if (!draft) return
     const parts = requestParts(draft, encoding)
@@ -263,7 +304,7 @@ export function RequestPanel({ service, op, variants, initial }: Props) {
     // set before writing: the watcher reloads the page as soon as the file lands
     const saved: SavedExample = { key, path, name: file }
     try {
-      sessionStorage.setItem(SAVED_KEY, JSON.stringify(saved))
+      kv.session.setItem(SAVED_KEY, JSON.stringify(saved))
     } catch {
       /* the confirmation below still shows when there is no reload */
     }
@@ -299,12 +340,14 @@ export function RequestPanel({ service, op, variants, initial }: Props) {
         play()
       }
     }
-    addEventListener('keydown', send)
-    return () => removeEventListener('keydown', send)
+    // on the page's own root (a shadow root in an embed), not the window, so a host page's keys are left alone
+    const root: EventTarget = panelRoot.current?.getRootNode() ?? window
+    root.addEventListener('keydown', send as EventListener)
+    return () => root.removeEventListener('keydown', send as EventListener)
   })
 
   return (
-    <div class="request-panel" data-op={key}>
+    <div class="request-panel" data-op={key} ref={panelRoot}>
       <div class="rq">
         <div class="rq-bar">
           <span class={`method ${op.method}`}>{op.method}</span>
@@ -330,15 +373,26 @@ export function RequestPanel({ service, op, variants, initial }: Props) {
           <button
             type="button"
             class="btn primary send"
-            title="Send (⌘/Ctrl + Enter)"
-            aria-label="Send"
-            disabled={running || !draft}
-            onClick={() => play()}
+            title={running ? 'Stop' : 'Send (⌘/Ctrl + Enter)'}
+            aria-label={running ? 'Stop' : 'Send'}
+            disabled={!running && !draft}
+            onClick={() => (running ? stopper.current?.abort() : play())}
           >
-            {running ? '…' : <PaperPlane />}
+            {running ? <StopSquare /> : <PaperPlane />}
           </button>
         </div>
 
+        {addressError && (
+          <p class="envmenu-warn" role="alert">
+            {addressError}.{' '}
+            {features.value.environmentSettings && (
+              <button type="button" class="link" onClick={() => (envSettingsOpen.value = true)}>
+                Open Environment settings
+              </button>
+            )}
+          </p>
+        )}
+
         {requestNote && (
           <details class="step-about" key={saved?.file}>
             <summary>About this request</summary>
@@ -466,8 +520,7 @@ export function RequestPanel({ service, op, variants, initial }: Props) {
 
         {saved && (
           <p class="muted lock">
-            A saved request: its own values, checks and mock responses apply, and it is read-only
-            here.
+            A saved request: its own values, checks and mock hook apply, and it is read-only here.
           </p>
         )}
 
@@ -538,6 +591,7 @@ export function RequestPanel({ service, op, variants, initial }: Props) {
                     title="Query"
                     rows={draft.query}
                     documented={sections.query}
+                    readOnly={!!saved}
                     onChange={(query) => edit({ ...draft, query })}
                   />
                 )}
@@ -547,6 +601,7 @@ export function RequestPanel({ service, op, variants, initial }: Props) {
                     rows={draft.path}
                     documented={sections.path}
                     fixed
+                    readOnly={!!saved}
                     onChange={(path) => edit({ ...draft, path })}
                   />
                 )}
@@ -557,6 +612,7 @@ export function RequestPanel({ service, op, variants, initial }: Props) {
                     title="Headers"
                     rows={draft.headers}
                     documented={sections.headers}
+                    readOnly={!!saved}
                     onChange={(headers) => edit({ ...draft, headers })}
                   />
                 )}
@@ -571,6 +627,7 @@ export function RequestPanel({ service, op, variants, initial }: Props) {
                     defs={defs}
                     files={meta?.files}
                     notes={opNotes.notes}
+                    readOnly={!!saved}
                   />
                 )}
               </div>

package/src/panel/RequestView.tsx

@@ -4,8 +4,9 @@ import { fieldDoc, withNote } from '../fielddoc'
 import { type Defs, type JsonSchema, linePaths, pathString } from '../schema'
 import { BodyEditor } from './BodyEditor'
 import { FieldDoc } from './FieldDoc'
+import { show } from './short'
 
-const pretty = (v: unknown) => (typeof v === 'string' ? v : JSON.stringify(v, null, 2))
+const pretty = (v: unknown) => (typeof v === 'string' ? v : show(v, 2))
 
 /** Repeated keys for arrays, as the transport sends them. */
 export function queryString(query: Record<string, string | string[]>) {

package/src/panel/ResponseView.tsx

@@ -1,12 +1,14 @@
 import type { StepResult } from '@specbook/core'
-import { useMemo, useState } from 'preact/hooks'
+import { useEffect, useMemo, useState } from 'preact/hooks'
 import { fieldDoc } from '../fielddoc'
 import { type Defs, type JsonSchema, linePaths, validate } from '../schema'
 import { statusClass, statusName } from '../status'
 import { BodyEditor } from './BodyEditor'
+import { Checks } from './Checks'
 import { FieldDoc } from './FieldDoc'
 import { PaperPlane } from './icons'
 import { queryString } from './RequestView'
+import { show } from './short'
 
 interface Props {
   step?: StepResult
@@ -17,7 +19,7 @@ interface Props {
   hideRequest?: boolean
 }
 
-const pretty = (v: unknown) => JSON.stringify(v, null, 2)
+const pretty = (v: unknown) => show(v, 2)
 const size = (n: number) => (n < 1024 ? `${n} B` : `${(n / 1024).toFixed(1)} KB`)
 
 export function ResponseView({ step, error, schemas, defs, hideRequest }: Props) {
@@ -25,10 +27,14 @@ export function ResponseView({ step, error, schemas, defs, hideRequest }: Props)
   const [line, setLine] = useState(0)
   const response = step?.response
   const schema = response ? (schemas?.[String(response.status)] ?? schemas?.default) : undefined
-  const issues = useMemo(
-    () => (response && schema ? validate(response.body, schema, defs, { reportExtra: true }) : []),
-    [response, schema, defs],
-  )
+  const issues = useMemo(() => {
+    try {
+      return response && schema ? validate(response.body, schema, defs, { reportExtra: true }) : []
+    } catch {
+      // an answer the schema check cannot make sense of is shown as it came, without the check
+      return []
+    }
+  }, [response, schema, defs])
   const text =
     response === undefined || response.body === undefined || response.body === ''
       ? ''
@@ -42,6 +48,10 @@ export function ResponseView({ step, error, schemas, defs, hideRequest }: Props)
   }, [paths, line, schema, defs])
   const checks = step?.assertions ?? []
   const failed = checks.filter((a) => !a.pass).length
+  // a run that failed a check opens on it: that is what the person came to see
+  useEffect(() => {
+    if (step && failed > 0) setTab('checks')
+  }, [step])
   const headers = Object.entries(response?.headers ?? {})
   const empty = !response && !error && !step?.error
 
@@ -112,7 +122,14 @@ export function ResponseView({ step, error, schemas, defs, hideRequest }: Props)
               >
                 {label}
                 {n > 0 && (
-                  <span class={`count ${id === 'checks' && failed ? 'bad' : ''}`}>{n}</span>
+                  <span
+                    class={`count ${id === 'checks' && failed ? 'bad' : ''}`}
+                    title={
+                      id === 'checks' && failed ? `${failed} of ${n} checks failed` : undefined
+                    }
+                  >
+                    {id === 'checks' && failed ? failed : n}
+                  </span>
                 )}
               </button>
             ))}
@@ -165,13 +182,7 @@ export function ResponseView({ step, error, schemas, defs, hideRequest }: Props)
               {checks.length === 0 ? (
                 <p class="muted">This request has no checks.</p>
               ) : (
-                <ul class="checks">
-                  {checks.map((a) => (
-                    <li class={a.pass ? 'ok' : 'bad'}>
-                      {a.pass ? '✓' : '✗'} {a.label}
-                    </li>
-                  ))}
-                </ul>
+                <Checks assertions={checks} />
               )}
             </div>
           </div>

package/src/panel/SecretsBar.tsx

@@ -1,16 +1,24 @@
+import { absoluteBase, type OAuthSettings } from '@specbook/core'
 import { useEffect, useState } from 'preact/hooks'
-import { absoluteBase } from '../routing'
+import { expiryOf, noteExpiry } from '../oauth'
 import { engine } from '../runtime'
 import { originOf, SECRET_PLACEHOLDER, secretStore } from '../secrets'
-import { env, version } from '../store'
+import { env, envVarsVersion, version } from '../store'
+import { OAuthSignIn } from './OAuthSignIn'
 
 interface Need {
   service: string
   origin: string
   title: string
   names: string[]
+  /** the config's name for the profile (the key a sign-in's token exchange is addressed by) */
+  profile: string
+  oauth?: OAuthSettings
 }
 
+const minutesLeft = (at: number | undefined) =>
+  at === undefined ? undefined : Math.max(0, Math.round((at - Date.now()) / 60_000))
+
 const SOURCE: Record<string, string> = {
   session: 'this session',
   process: 'environment variable',
@@ -51,15 +59,17 @@ export function SecretsBar({
     }
     let on = true
     if (!supplied) engine.managedSecrets(env.value).then((m) => on && setManaged(m))
-    engine.config(version.value).then((cfg) => {
-      if (!on) return
+    engine.config(version.value).then(async (cfg) => {
       const out: Need[] = []
+      const where = await engine.addressesIn(cfg, env.value)
       for (const [service, s] of Object.entries(cfg.services ?? {})) {
         if (services && !services.includes(service)) continue
         const profile = s.auth ? cfg.auth?.[s.auth] : undefined
-        const base = s.baseUrl?.[env.value]
+        // the address this environment's variables give; one that cannot be worked out has no origin
+        const base = where.baseUrl(service)
         const origin = originOf(base ? absoluteBase(base, globalThis.location?.href) : undefined)
         if (!profile || !origin) continue
+        const oauth = s.auth ? where.oauth(s.auth) : undefined
         const names = [
           ...new Set(
             [...JSON.stringify(profile.apply).matchAll(SECRET_PLACEHOLDER)].map(
@@ -67,14 +77,22 @@ export function SecretsBar({
             ),
           ),
         ]
-        if (names.length) out.push({ service, origin, title: profile.title ?? s.auth ?? '', names })
+        if (names.length)
+          out.push({
+            service,
+            origin,
+            title: profile.title ?? s.auth ?? '',
+            names,
+            profile: s.auth as string,
+            oauth,
+          })
       }
-      setNeeds(out)
+      if (on) setNeeds(out)
     })
     return () => {
       on = false
     }
-  }, [live, env.value, wanted, version.value])
+  }, [live, env.value, wanted, version.value, envVarsVersion.value])
 
   if (!live || needs.length === 0) return null
   const have = (n: Need, name: string) =>
@@ -109,12 +127,18 @@ export function SecretsBar({
                 <code>{name}</code>
                 {has ? (
                   <>
-                    <span class="muted">✓ set</span>
+                    <span class="muted">
+                      ✓ set
+                      {n.oauth && minutesLeft(expiryOf(n.origin, name)) !== undefined
+                        ? ` · expires in ${minutesLeft(expiryOf(n.origin, name))} min`
+                        : ''}
+                    </span>
                     <button
                       type="button"
                       class="link"
                       onClick={() => {
                         secretStore.remove(n.origin, name)
+                        noteExpiry(n.origin, name, undefined)
                         bump((x) => x + 1)
                       }}
                     >
@@ -124,6 +148,16 @@ export function SecretsBar({
                 ) : (
                   <>
                     {from && <span class="muted">from {SOURCE[from] ?? from}</span>}
+                    {n.oauth && (
+                      <OAuthSignIn
+                        service={n.service}
+                        profile={n.profile}
+                        origin={n.origin}
+                        secret={name}
+                        oauth={n.oauth}
+                        onSignedIn={() => bump((x) => x + 1)}
+                      />
+                    )}
                     <input
                       type="password"
                       autocomplete="off"

package/src/panel/SequenceDocs.tsx

@@ -2,6 +2,7 @@ import { useMemo } from 'preact/hooks'
 import { defaultFor, type FieldSpec, specFromControl } from '../components/Fields'
 import type { SequenceInfo } from '../engine'
 import { go } from '../nav'
+import { show } from './short'
 import { useSequenceNotes } from './stepnotes'
 
 const KIND: Record<string, string> = {
@@ -11,7 +12,7 @@ const KIND: Record<string, string> = {
   check: 'check',
 }
 
-const show = (v: unknown) => (typeof v === 'string' ? v : JSON.stringify(v))
+const showValue = (v: unknown) => (typeof v === 'string' ? v : show(v))
 
 /**
  * What a sequence does, as documentation: its description (markdown), an optional markdown page from
@@ -21,9 +22,9 @@ export function SequenceDocs({ info }: { info: SequenceInfo }) {
   const { seq } = info
   const { intro, notes } = useSequenceNotes(info)
 
-  const params = useMemo(
+  const inputs = useMemo(
     () =>
-      Object.entries((seq.meta.params ?? {}) as Record<string, unknown>).map(([name, c]) => {
+      Object.entries((seq.meta.inputs ?? {}) as Record<string, unknown>).map(([name, c]) => {
         const spec: FieldSpec = specFromControl(c)
         return { name, spec, initial: defaultFor(spec) }
       }),
@@ -42,7 +43,7 @@ export function SequenceDocs({ info }: { info: SequenceInfo }) {
 
       {intro && <div class="doc-custom" dangerouslySetInnerHTML={{ __html: intro }} />}
 
-      {params.length > 0 && (
+      {inputs.length > 0 && (
         <section>
           <h2>Controls</h2>
           <table class="fields">
@@ -55,7 +56,7 @@ export function SequenceDocs({ info }: { info: SequenceInfo }) {
               </tr>
             </thead>
             <tbody>
-              {params.map((p) => (
+              {inputs.map((p) => (
                 <tr>
                   <td>
                     <code>{p.name}</code>
@@ -64,7 +65,7 @@ export function SequenceDocs({ info }: { info: SequenceInfo }) {
                     <span class="chip">{p.spec.kind}</span>
                   </td>
                   <td>
-                    <code>{show(p.initial)}</code>
+                    <code>{showValue(p.initial)}</code>
                   </td>
                   <td>{p.spec.description}</td>
                 </tr>