@specbook/ui 0.2.0 → 0.4.0

package/src/panel/Panel.tsx

@@ -1,6 +1,10 @@
 import type { ComponentChildren } from 'preact'
-import { useEffect, useLayoutEffect, useRef } from 'preact/hooks'
+import { useEffect, useLayoutEffect, useMemo, useRef } from 'preact/hooks'
 import { env, environmentNote, environments } from '../store'
+import { announcement } from './announce'
+import { ErrorBoundary } from './ErrorBoundary'
+
+let panelIds = 0
 
 interface Props {
   title: string
@@ -9,6 +13,8 @@ interface Props {
   flush?: boolean
   /** dims the page and traps focus (embeds); the standalone site leaves its list usable beside the panel */
   modal?: boolean
+  /** `popover`: a centered dialog on a desktop and a bottom sheet on a phone; `side` is the app's sheet from the right */
+  variant?: 'side' | 'popover'
   onPrev?: () => void
   onNext?: () => void
   onClose: () => void
@@ -24,12 +30,22 @@ export function Panel({
   subtitle,
   flush,
   modal = true,
+  variant = 'side',
   onPrev,
   onNext,
   onClose,
   children,
 }: Props) {
   const aside = useRef<HTMLElement>(null)
+  const titleId = useMemo(() => `sb-panel-title-${++panelIds}`, [])
+
+  // what was announced for one run is not read out again when the next panel opens
+  useEffect(
+    () => () => {
+      announcement.value = ''
+    },
+    [],
+  )
 
   useEffect(() => {
     const root = aside.current?.getRootNode() as Document | ShadowRoot
@@ -63,14 +79,23 @@ export function Panel({
       const top = vv?.offsetTop ?? 0
       const height = vv?.height ?? innerHeight
       const at = field.getBoundingClientRect().top
-      const want = top + height * 0.2
-      if (at > top + height * 0.4 || at < top) box.scrollTop += at - want
+      // a dropdown field needs its list visible too, and picking from it needs no keyboard: it is moved
+      // only when it is down where the keyboard would be, and not as far
+      const dropdown = field.getAttribute('role') === 'combobox'
+      const want = top + height * (dropdown ? 0.3 : 0.2)
+      if (at > top + height * (dropdown ? 0.55 : 0.4) || at < top) box.scrollTop += at - want
     }
     const focusin = (e: Event) => {
       const field = e.target as HTMLElement
       if (!phone.matches || !field.matches?.(FIELD)) return
       const box = scroller(field)
-      if (box && padded?.box !== box) {
+      // a dropdown field high enough on the screen is not moved, so it needs no room below (which would
+      // only show a scrollbar)
+      const vv = typeof visualViewport === 'undefined' ? undefined : visualViewport
+      const low =
+        field.getBoundingClientRect().top >
+        (vv?.offsetTop ?? 0) + (vv?.height ?? innerHeight) * 0.55
+      if (box && padded?.box !== box && (field.getAttribute('role') !== 'combobox' || low)) {
         if (padded) padded.box.style.paddingBottom = padded.was
         padded = { box, was: box.style.paddingBottom }
         box.style.paddingBottom = '70vh'
@@ -121,15 +146,18 @@ export function Panel({
         first.focus()
       }
     }
-    addEventListener('keydown', key)
-    return () => removeEventListener('keydown', key)
+    // a dialog over someone else's page listens on itself (focus is trapped in it), not on the window; the app's
+    // docked panel keeps its window-wide Escape
+    const target: EventTarget = modal && aside.current ? aside.current : window
+    target.addEventListener('keydown', key as EventListener)
+    return () => target.removeEventListener('keydown', key as EventListener)
   }, [onClose, modal])
 
   // a dialog when it dims the page (embeds), a complementary region when docked beside the list
   const attrs = {
-    class: `panel ${modal ? '' : 'docked'}`,
+    class: `panel ${modal ? '' : 'docked'} ${variant === 'popover' ? 'popover' : ''}`,
     part: 'panel',
-    'aria-label': title,
+    'aria-labelledby': titleId,
     'aria-modal': modal ? true : undefined,
     role: (modal ? 'dialog' : 'complementary') as 'dialog',
     tabIndex: -1,
@@ -143,7 +171,7 @@ export function Panel({
       <section {...attrs} ref={aside}>
         <header class="panel-head" part="header">
           <div class="panel-title">
-            <h2>{title}</h2>
+            <h2 id={titleId}>{title}</h2>
             {subtitle && <div class="muted small">{subtitle}</div>}
           </div>
           <span class="spacer" />
@@ -190,7 +218,12 @@ export function Panel({
             ×
           </button>
         </header>
-        <div class={`panel-body ${flush ? 'flush' : ''}`}>{children}</div>
+        <div class={`panel-body ${flush ? 'flush' : ''}`}>
+          <ErrorBoundary>{children}</ErrorBoundary>
+        </div>
+        <div class="visually-hidden" role="status" aria-live="polite" aria-atomic="true">
+          {announcement.value}
+        </div>
       </section>
     </>
   )

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,25 @@
-import { collectPlaceholders, type Encoding, type Example, type RunResult } from '@specbook/core'
-import { useEffect, useMemo, useState } from 'preact/hooks'
+import {
+  collectPlaceholders,
+  type Encoding,
+  type Example,
+  type RunResult,
+  rootName,
+} from '@specbook/core'
+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 +41,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 +54,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 +74,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 +127,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 +207,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 */
     }
@@ -208,7 +241,7 @@ export function RequestPanel({ service, op, variants, initial }: Props) {
         .filter(
           (n) => !n.startsWith('faker.') && !n.startsWith('secrets.') && !n.startsWith('session.'),
         )
-        .map((n) => n.split('.')[0] as string)
+        .map(rootName)
         .filter((n, i, a) => a.indexOf(n) === i)
     } catch {
       return []
@@ -217,37 +250,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)
@@ -265,7 +310,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 */
     }
@@ -301,12 +346,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>
@@ -332,15 +379,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>
@@ -383,7 +441,7 @@ export function RequestPanel({ service, op, variants, initial }: Props) {
                   </option>
                 ))}
                 {variants.map((v) => (
-                  <option value={`saved:${v.file}`}>{v.name} · saved request</option>
+                  <option value={`saved:${v.file}`}>{v.name} · request</option>
                 ))}
               </select>
             </label>
@@ -468,8 +526,9 @@ 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 request from your project: it runs with its own values and checks. Edit its file to
+            change it.
+            {env.value === 'mock' && saved.def.mockHook ? ' Its mock hook shapes the answer.' : ''}
           </p>
         )}
 
@@ -540,6 +599,7 @@ export function RequestPanel({ service, op, variants, initial }: Props) {
                     title="Query"
                     rows={draft.query}
                     documented={sections.query}
+                    readOnly={!!saved}
                     onChange={(query) => edit({ ...draft, query })}
                   />
                 )}
@@ -549,6 +609,7 @@ export function RequestPanel({ service, op, variants, initial }: Props) {
                     rows={draft.path}
                     documented={sections.path}
                     fixed
+                    readOnly={!!saved}
                     onChange={(path) => edit({ ...draft, path })}
                   />
                 )}
@@ -559,6 +620,7 @@ export function RequestPanel({ service, op, variants, initial }: Props) {
                     title="Headers"
                     rows={draft.headers}
                     documented={sections.headers}
+                    readOnly={!!saved}
                     onChange={(headers) => edit({ ...draft, headers })}
                   />
                 )}
@@ -573,6 +635,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>