@kirrosh/zond 0.21.0 → 0.23.0

package/src/web/views/endpoints-tab.ts

@@ -1,174 +0,0 @@
-/**
- * Endpoints tab: all spec endpoints with coverage status, warnings, filters.
- */
-
-import type { CollectionState, EndpointViewState, CoveringStep } from "../data/collection-state.ts";
-import { escapeHtml } from "./layout.ts";
-import { methodBadge } from "./results.ts";
-import { basename } from "node:path";
-
-export function renderEndpointsTab(state: CollectionState, filters?: { status?: string; method?: string }): string {
-  if (state.totalEndpoints === 0) {
-    return `<div class="tab-empty">No OpenAPI spec configured. Register a spec with <code>setup_api</code> to see endpoints.</div>`;
-  }
-
-  let filtered = state.endpoints;
-  if (filters?.status) {
-    filtered = filtered.filter(ep => {
-      if (filters.status === "passing") return ep.runStatus === "passing";
-      if (filters.status === "failing") return ep.runStatus === "api_error" || ep.runStatus === "test_failed";
-      if (filters.status === "no_tests") return ep.runStatus === "no_tests";
-      if (filters.status === "not_run") return ep.runStatus === "not_run";
-      return true;
-    });
-  }
-  if (filters?.method) {
-    filtered = filtered.filter(ep => ep.method === filters.method);
-  }
-
-  const collectionId = state.collection.id;
-
-  // Filter bar
-  const counts = {
-    all: state.endpoints.length,
-    passing: state.endpoints.filter(e => e.runStatus === "passing").length,
-    failing: state.endpoints.filter(e => e.runStatus === "api_error" || e.runStatus === "test_failed").length,
-    no_tests: state.endpoints.filter(e => e.runStatus === "no_tests").length,
-    not_run: state.endpoints.filter(e => e.runStatus === "not_run").length,
-  };
-
-  const filterBar = `
-    <div class="filter-bar">
-      <button class="filter-chip ${!filters?.status ? 'filter-active' : ''}"
-        hx-get="/panels/endpoints?collection_id=${collectionId}"
-        hx-target="#tab-content" hx-swap="innerHTML">All (${counts.all})</button>
-      <button class="filter-chip filter-chip-pass ${filters?.status === 'passing' ? 'filter-active' : ''}"
-        hx-get="/panels/endpoints?collection_id=${collectionId}&status=passing"
-        hx-target="#tab-content" hx-swap="innerHTML">Passing (${counts.passing})</button>
-      <button class="filter-chip filter-chip-fail ${filters?.status === 'failing' ? 'filter-active' : ''}"
-        hx-get="/panels/endpoints?collection_id=${collectionId}&status=failing"
-        hx-target="#tab-content" hx-swap="innerHTML">Failing (${counts.failing})</button>
-      <button class="filter-chip filter-chip-notrun ${filters?.status === 'not_run' ? 'filter-active' : ''}"
-        hx-get="/panels/endpoints?collection_id=${collectionId}&status=not_run"
-        hx-target="#tab-content" hx-swap="innerHTML">Not Run (${counts.not_run})</button>
-      <button class="filter-chip filter-chip-notest ${filters?.status === 'no_tests' ? 'filter-active' : ''}"
-        hx-get="/panels/endpoints?collection_id=${collectionId}&status=no_tests"
-        hx-target="#tab-content" hx-swap="innerHTML">No Tests (${counts.no_tests})</button>
-    </div>`;
-
-  const rows = filtered.map((ep, i) => renderEndpointRow(ep, collectionId, i)).join("");
-
-  return `${filterBar}<div class="endpoint-list">${rows}</div>`;
-}
-
-function renderEndpointRow(ep: EndpointViewState, collectionId: number, index: number): string {
-  const statusDot = getStatusDot(ep.runStatus);
-  const warningBadges = renderWarningBadges(ep.warnings);
-  const detailId = `ep-detail-${index}`;
-
-  return `
-    <div class="endpoint-row" onclick="var d=document.getElementById('${detailId}');d.style.display=d.style.display==='none'?'grid':'none'">
-      <span class="endpoint-status">${statusDot}</span>
-      <span class="endpoint-method">${methodBadge(ep.method)}</span>
-      <span class="endpoint-path">${escapeHtml(ep.path)}</span>
-      <span class="endpoint-badges">${warningBadges}${ep.summary ? `<span class="endpoint-summary">${escapeHtml(ep.summary)}</span>` : ""}</span>
-    </div>
-    <div class="endpoint-detail" id="${detailId}" style="display:none">
-      ${renderEndpointDetail(ep)}
-    </div>`;
-}
-
-function getStatusDot(status: EndpointViewState["runStatus"]): string {
-  switch (status) {
-    case "passing": return '<span class="status-dot status-pass" title="Tests passing"></span>';
-    case "api_error": return '<span class="status-dot status-fail" title="API error (5xx)"></span>';
-    case "test_failed": return '<span class="status-dot status-fail" title="Assertion failed"></span>';
-    case "not_run": return '<span class="status-dot status-notrun" title="Tests exist, not run"></span>';
-    case "no_tests": return '<span class="status-dot status-notest" title="No tests"></span>';
-  }
-}
-
-function renderWarningBadges(warnings: string[]): string {
-  return warnings.map(w => {
-    if (w === "deprecated") return '<span class="warning-badge warning-deprecated">DEPRECATED</span>';
-    if (w === "no_response_schema") return '<span class="warning-badge warning-schema">NO SCHEMA</span>';
-    if (w === "no_responses_defined") return '<span class="warning-badge warning-schema">NO RESPONSES</span>';
-    if (w.startsWith("required_params_no_examples")) return "";
-    return `<span class="warning-badge">${escapeHtml(w)}</span>`;
-  }).join(" ");
-}
-
-function renderEndpointDetail(ep: EndpointViewState): string {
-  if (!ep.hasCoverage) {
-    return `<div class="ep-detail-section"><em style="color:var(--text-dim);">No test files cover this endpoint</em></div>`;
-  }
-
-  // If we have run results, show covering steps
-  if (ep.coveringSteps.length > 0) {
-    const steps = ep.coveringSteps.map(step => {
-      const icon = step.status === "pass"
-        ? '<span class="step-icon pass">&#10003;</span>'
-        : step.status === "fail" || step.status === "error"
-          ? '<span class="step-icon fail">&#10007;</span>'
-          : step.status === "skip"
-            ? '<span class="step-icon skip">&#9644;</span>'
-            : '<span class="step-icon" style="color:var(--text-dim);">&#9675;</span>';
-
-      const statusBadge = step.responseStatus && step.responseStatus >= 400 && (step.status === "fail" || step.status === "error")
-        ? ` <span class="warning-badge server-error" style="font-size:0.6rem;">${step.responseStatus} ${httpStatusText(step.responseStatus)}</span>`
-        : "";
-
-      const duration = step.durationMs != null ? `<span class="step-duration">${step.durationMs}ms</span>` : "";
-
-      let assertionsHtml = "";
-      if (step.assertions && step.assertions.length > 0) {
-        assertionsHtml = `<div style="padding-left:1.5rem;margin-top:0.25rem;">` +
-          step.assertions.map(a => {
-            const aIcon = a.passed
-              ? '<span class="assertion-icon pass">&#10003;</span>'
-              : '<span class="assertion-icon fail">&#10007;</span>';
-            const actual = !a.passed && a.actual !== undefined
-              ? ` <span class="assertion-actual">(got ${JSON.stringify(a.actual)})</span>` : "";
-            return `<div class="assertion-row">${aIcon} <span class="assertion-field">${escapeHtml(a.field)}:</span> <span class="assertion-rule">${escapeHtml(a.rule)}</span>${actual}</div>`;
-          }).join("") + `</div>`;
-      }
-
-      let hintHtml = "";
-      if (step.hint) {
-        hintHtml = `<div class="failure-hint"><span>&#9888;</span> ${escapeHtml(step.hint)}</div>`;
-      }
-
-      return `<div class="covering-suite">
-        ${icon}
-        <a class="suite-ref suite-link" href="#" data-suite="${escapeHtml(step.suiteName)}"
-           onclick="event.stopPropagation();switchToSuite(this.dataset.suite)">${escapeHtml(step.file)}</a>
-        <span class="dim" style="font-size:0.75rem;">&rarr; "${escapeHtml(step.stepName)}"</span>
-        <span style="margin-left:auto;display:flex;align-items:center;gap:0.5rem;">${statusBadge}${duration}</span>
-      </div>${assertionsHtml}${hintHtml}`;
-    }).join("");
-    return steps;
-  }
-
-  // Fallback: just file names
-  const files = ep.coveringFiles.map(f => {
-    const fileName = basename(f);
-    const suiteName = fileName.replace(/\.(ya?ml)$/i, "");
-    return `<div class="covering-suite">
-      <span class="step-icon" style="color:var(--text-dim);">&#9675;</span>
-      <a class="suite-ref suite-link" href="#" data-suite="${escapeHtml(suiteName)}"
-         onclick="event.stopPropagation();switchToSuite(this.dataset.suite)">${escapeHtml(fileName)}</a>
-      <span class="dim" style="font-size:0.75rem;">not run</span>
-    </div>`;
-  }).join("");
-  return files;
-}
-
-function httpStatusText(code: number): string {
-  const map: Record<number, string> = {
-    400: "Bad Request", 401: "Unauthorized", 403: "Forbidden", 404: "Not Found",
-    405: "Method Not Allowed", 409: "Conflict", 422: "Unprocessable Entity",
-    429: "Too Many Requests", 500: "Internal Server Error", 502: "Bad Gateway",
-    503: "Service Unavailable", 504: "Gateway Timeout",
-  };
-  return map[code] ?? "";
-}

package/src/web/views/explorer-tab.ts

@@ -1,402 +0,0 @@
-/**
- * Explorer tab: Swagger-like interactive API explorer.
- * Renders endpoint forms, executes requests via server proxy, displays responses.
- */
-
-import type { OpenAPIV3 } from "openapi-types";
-import type { CollectionRecord } from "../../db/queries.ts";
-import type { EndpointInfo } from "../../core/generator/types.ts";
-import { escapeHtml } from "./layout.ts";
-import { methodBadge } from "./results.ts";
-
-// ── Public API ──
-
-export async function renderExplorerTab(collection: CollectionRecord): Promise<string> {
-  if (!collection.openapi_spec) {
-    return `<div class="tab-empty">No OpenAPI spec configured. Register a spec with <code>setup_api</code> to see the explorer.</div>`;
-  }
-
-  let doc: OpenAPIV3.Document;
-  let endpoints: EndpointInfo[];
-  try {
-    const { readOpenApiSpec, extractEndpoints } = await import("../../core/generator/openapi-reader.ts");
-    doc = await readOpenApiSpec(collection.openapi_spec);
-    endpoints = extractEndpoints(doc);
-  } catch (err) {
-    return `<div class="tab-empty">Failed to load OpenAPI spec: ${escapeHtml((err as Error).message)}</div>`;
-  }
-
-  if (endpoints.length === 0) {
-    return `<div class="tab-empty">No endpoints found in the OpenAPI spec.</div>`;
-  }
-
-  // Resolve base URLs from spec servers + env
-  const baseUrls: string[] = [];
-  if (doc.servers && doc.servers.length > 0) {
-    for (const s of doc.servers) {
-      if (s.url) baseUrls.push(s.url);
-    }
-  }
-
-  let envBaseUrl: string | undefined;
-  try {
-    const { loadEnvironment } = await import("../../core/parser/variables.ts");
-    const env = await loadEnvironment(undefined, collection.base_dir ?? collection.test_path);
-    if (env.base_url) {
-      envBaseUrl = env.base_url;
-      if (!baseUrls.includes(envBaseUrl)) baseUrls.unshift(envBaseUrl);
-    }
-  } catch { /* no env file */ }
-
-  // Base URL bar
-  const baseUrlBar = renderBaseUrlBar(baseUrls, envBaseUrl);
-
-  // Group endpoints by first tag
-  const groups = new Map<string, EndpointInfo[]>();
-  for (const ep of endpoints) {
-    const tag = ep.tags.length > 0 ? ep.tags[0]! : "Other";
-    const list = groups.get(tag) ?? [];
-    list.push(ep);
-    groups.set(tag, list);
-  }
-
-  let idx = 0;
-  const groupsHtml = [...groups.entries()].map(([tag, eps]) => {
-    const rows = eps.map(ep => {
-      const html = renderEndpointEntry(ep, idx, collection.id);
-      idx++;
-      return html;
-    }).join("");
-    return `<details class="explorer-group" open>
-      <summary class="explorer-group-title">${escapeHtml(tag)} <span class="tab-count">${eps.length}</span></summary>
-      ${rows}
-    </details>`;
-  }).join("");
-
-  const script = `<script>
-    function explorerToggle(id) {
-      var el = document.getElementById(id);
-      if (!el) return;
-      el.style.display = el.style.display === 'none' ? 'block' : 'none';
-    }
-    function explorerAddHeader(btn) {
-      var container = btn.previousElementSibling;
-      var count = container.querySelectorAll('.explorer-header-pair').length;
-      var row = document.createElement('div');
-      row.className = 'explorer-header-pair';
-      row.innerHTML = '<input type="text" name="custom_header_key_' + count + '" placeholder="Header name" class="explorer-input explorer-input-sm">' +
-        '<input type="text" name="custom_header_value_' + count + '" placeholder="Value" class="explorer-input explorer-input-sm">' +
-        '<button type="button" class="explorer-remove-btn" onclick="this.parentElement.remove()">x</button>';
-      container.appendChild(row);
-    }
-    function explorerGetBaseUrl() {
-      var sel = document.getElementById('explorer-base-url-select');
-      var custom = document.getElementById('explorer-base-url-custom');
-      if (sel && sel.value === '__custom__') return custom ? custom.value : '';
-      return sel ? sel.value : (custom ? custom.value : '');
-    }
-    function explorerBeforeRequest(formId) {
-      var form = document.getElementById(formId);
-      if (!form) return true;
-      var input = form.querySelector('input[name="base_url"]');
-      if (input) input.value = explorerGetBaseUrl();
-      return true;
-    }
-    document.addEventListener('change', function(e) {
-      if (e.target && e.target.id === 'explorer-base-url-select') {
-        var custom = document.getElementById('explorer-base-url-custom');
-        if (custom) custom.style.display = e.target.value === '__custom__' ? 'block' : 'none';
-      }
-    });
-  </script>`;
-
-  return `${baseUrlBar}<div class="explorer-list">${groupsHtml}</div>${script}`;
-}
-
-export function renderProxyResponse(status: number, headers: Record<string, string>, body: string, elapsedMs: number): string {
-  const statusClass = status < 300 ? "status-2xx" : status < 400 ? "status-3xx" : status < 500 ? "status-4xx" : "status-5xx";
-  const statusText = httpStatusText(status);
-  const size = body.length < 1024 ? `${body.length} B` : `${(body.length / 1024).toFixed(1)} KB`;
-
-  // Try to format JSON
-  let formattedBody: string;
-  const contentType = headers["content-type"] ?? "";
-  if (contentType.includes("json") || body.trimStart().startsWith("{") || body.trimStart().startsWith("[")) {
-    try {
-      const pretty = JSON.stringify(JSON.parse(body), null, 2);
-      formattedBody = highlightJson(pretty);
-    } catch {
-      formattedBody = escapeHtml(body);
-    }
-  } else {
-    formattedBody = escapeHtml(body);
-  }
-
-  const headerEntries = Object.entries(headers);
-  const headersHtml = headerEntries.length > 0
-    ? `<details class="response-headers">
-        <summary>Headers (${headerEntries.length})</summary>
-        <pre class="response-headers-pre">${headerEntries.map(([k, v]) => `<span class="json-key">${escapeHtml(k)}</span>: ${escapeHtml(v)}`).join("\n")}</pre>
-      </details>`
-    : "";
-
-  return `<div class="explorer-response">
-    <div class="response-meta">
-      <span class="response-status ${statusClass}">${status} ${escapeHtml(statusText)}</span>
-      <span class="response-time">${elapsedMs}ms</span>
-      <span class="response-size">${size}</span>
-    </div>
-    ${headersHtml}
-    <div class="response-body"><pre><code>${formattedBody}</code></pre></div>
-  </div>`;
-}
-
-export function renderProxyError(message: string, elapsedMs: number): string {
-  return `<div class="explorer-response explorer-response-error">
-    <div class="response-meta">
-      <span class="response-status status-5xx">Error</span>
-      <span class="response-time">${elapsedMs}ms</span>
-    </div>
-    <div class="response-error-msg">${escapeHtml(message)}</div>
-  </div>`;
-}
-
-// ── Private helpers ──
-
-function renderBaseUrlBar(baseUrls: string[], envBaseUrl?: string): string {
-  if (baseUrls.length === 0) {
-    return `<div class="explorer-base-url">
-      <label class="explorer-label">Base URL</label>
-      <input type="text" id="explorer-base-url-custom" class="explorer-input" placeholder="https://api.example.com" value="">
-    </div>`;
-  }
-
-  const options = baseUrls.map(url => {
-    const label = url === envBaseUrl ? `${url} (env)` : url;
-    return `<option value="${escapeHtml(url)}">${escapeHtml(label)}</option>`;
-  }).join("");
-
-  return `<div class="explorer-base-url">
-    <label class="explorer-label">Base URL</label>
-    <select id="explorer-base-url-select" class="explorer-input">
-      ${options}
-      <option value="__custom__">Custom...</option>
-    </select>
-    <input type="text" id="explorer-base-url-custom" class="explorer-input" placeholder="https://api.example.com" style="display:none;">
-  </div>`;
-}
-
-function renderEndpointEntry(ep: EndpointInfo, index: number, collectionId: number): string {
-  const formId = `explorer-form-${index}`;
-  const detailId = `explorer-detail-${index}`;
-  const responseId = `explorer-response-${index}`;
-  const spinnerId = `explorer-spinner-${index}`;
-  const deprecated = ep.deprecated ? ' <span class="warning-badge warning-deprecated">DEPRECATED</span>' : "";
-  const securityHint = ep.security.length > 0
-    ? ` <span class="explorer-auth-hint" title="Requires: ${escapeHtml(ep.security.join(", "))}">Auth</span>`
-    : "";
-
-  // Separate parameters by location
-  const pathParams = ep.parameters.filter(p => p.in === "path");
-  const queryParams = ep.parameters.filter(p => p.in === "query");
-  const headerParams = ep.parameters.filter(p => p.in === "header");
-
-  // Request body
-  const hasBody = ["POST", "PUT", "PATCH"].includes(ep.method);
-  const exampleBody = hasBody && ep.requestBodySchema
-    ? JSON.stringify(generateExample(ep.requestBodySchema), null, 2)
-    : "";
-  const bodyContentType = ep.requestBodyContentType ?? "application/json";
-
-  const paramsHtml = renderParamsSection(pathParams, queryParams, headerParams);
-  const bodyHtml = hasBody ? renderBodySection(exampleBody, bodyContentType) : "";
-  const headersHtml = renderCustomHeadersSection();
-
-  return `
-    <div class="explorer-endpoint" onclick="explorerToggle('${detailId}')">
-      ${methodBadge(ep.method)}
-      <span class="explorer-endpoint-path">${escapeHtml(ep.path)}</span>
-      ${deprecated}${securityHint}
-      ${ep.summary ? `<span class="explorer-endpoint-summary">${escapeHtml(ep.summary)}</span>` : ""}
-    </div>
-    <div class="explorer-detail" id="${detailId}" style="display:none" onclick="event.stopPropagation()">
-      <form id="${formId}" hx-post="/api/proxy" hx-target="#${responseId}" hx-swap="innerHTML"
-            hx-indicator="#${spinnerId}"
-            hx-vals='js:{"base_url": explorerGetBaseUrl()}'
-            hx-disabled-elt="find .explorer-send-btn">
-        <input type="hidden" name="method" value="${ep.method}">
-        <input type="hidden" name="path" value="${escapeHtml(ep.path)}">
-        <input type="hidden" name="collection_id" value="${collectionId}">
-        ${paramsHtml}
-        ${bodyHtml}
-        ${headersHtml}
-        <div class="explorer-actions">
-          <button type="submit" class="btn explorer-send-btn">Send</button>
-          <span id="${spinnerId}" class="htmx-indicator explorer-spinner">Sending...</span>
-        </div>
-      </form>
-      <div id="${responseId}" class="explorer-response-container"></div>
-    </div>`;
-}
-
-function renderParamsSection(
-  pathParams: OpenAPIV3.ParameterObject[],
-  queryParams: OpenAPIV3.ParameterObject[],
-  headerParams: OpenAPIV3.ParameterObject[],
-): string {
-  const all = [
-    ...pathParams.map(p => ({ ...p, prefix: "param_path_" })),
-    ...queryParams.map(p => ({ ...p, prefix: "param_query_" })),
-    ...headerParams.map(p => ({ ...p, prefix: "param_header_" })),
-  ];
-
-  if (all.length === 0) return "";
-
-  const rows = all.map(p => {
-    const schema = p.schema as OpenAPIV3.SchemaObject | undefined;
-    const type = schema?.type ?? "string";
-    const required = p.required ? '<span class="explorer-required">*</span>' : "";
-    const locationLabel = p.in === "path" ? "path" : p.in === "query" ? "query" : "header";
-    const placeholder = schema?.example != null ? String(schema.example) : (schema?.enum ? schema.enum[0] : "");
-    const defaultVal = schema?.default != null ? String(schema.default) : "";
-    const description = p.description ? ` title="${escapeHtml(p.description)}"` : "";
-
-    return `<div class="explorer-param-row"${description}>
-      <span class="explorer-param-name">${escapeHtml(p.name)}${required}</span>
-      <span class="explorer-param-location">${locationLabel}</span>
-      <span class="explorer-param-type">${escapeHtml(type)}${schema?.format ? ` (${escapeHtml(schema.format)})` : ""}</span>
-      <input type="text" name="${p.prefix}${escapeHtml(p.name)}" class="explorer-input"
-        placeholder="${escapeHtml(placeholder)}" value="${escapeHtml(defaultVal)}"
-        ${p.required ? "required" : ""}>
-    </div>`;
-  }).join("");
-
-  return `<div class="explorer-section">
-    <div class="explorer-section-title">Parameters</div>
-    ${rows}
-  </div>`;
-}
-
-function renderBodySection(exampleBody: string, contentType: string): string {
-  return `<div class="explorer-section">
-    <div class="explorer-section-title">Request Body
-      <select name="content_type" class="explorer-input explorer-input-sm explorer-content-type">
-        <option value="application/json"${contentType === "application/json" ? " selected" : ""}>application/json</option>
-        <option value="application/x-www-form-urlencoded"${contentType === "application/x-www-form-urlencoded" ? " selected" : ""}>form-urlencoded</option>
-      </select>
-    </div>
-    <textarea name="body" class="explorer-body-editor" rows="8" spellcheck="false">${escapeHtml(exampleBody)}</textarea>
-  </div>`;
-}
-
-function renderCustomHeadersSection(): string {
-  return `<div class="explorer-section">
-    <div class="explorer-section-title">Headers</div>
-    <div class="explorer-headers-list">
-      <div class="explorer-header-pair">
-        <input type="text" name="custom_header_key_0" placeholder="Header name" class="explorer-input explorer-input-sm">
-        <input type="text" name="custom_header_value_0" placeholder="Value" class="explorer-input explorer-input-sm">
-        <button type="button" class="explorer-remove-btn" onclick="this.parentElement.remove()">x</button>
-      </div>
-    </div>
-    <button type="button" class="explorer-add-header-btn" onclick="explorerAddHeader(this)">+ Add header</button>
-  </div>`;
-}
-
-function generateExample(schema: OpenAPIV3.SchemaObject, depth = 0): unknown {
-  if (depth > 5) return {};
-
-  if (schema.example !== undefined) return schema.example;
-
-  if (schema.enum && schema.enum.length > 0) return schema.enum[0];
-
-  if (schema.allOf) {
-    const merged: Record<string, unknown> = {};
-    for (const sub of schema.allOf) {
-      const s = sub as OpenAPIV3.SchemaObject;
-      const val = generateExample(s, depth + 1);
-      if (typeof val === "object" && val !== null && !Array.isArray(val)) {
-        Object.assign(merged, val);
-      }
-    }
-    return merged;
-  }
-
-  if (schema.oneOf && schema.oneOf.length > 0) {
-    return generateExample(schema.oneOf[0] as OpenAPIV3.SchemaObject, depth + 1);
-  }
-
-  if (schema.anyOf && schema.anyOf.length > 0) {
-    return generateExample(schema.anyOf[0] as OpenAPIV3.SchemaObject, depth + 1);
-  }
-
-  switch (schema.type) {
-    case "string":
-      if (schema.format === "email") return "user@example.com";
-      if (schema.format === "date") return "2026-01-01";
-      if (schema.format === "date-time") return "2026-01-01T00:00:00Z";
-      if (schema.format === "uri" || schema.format === "url") return "https://example.com";
-      if (schema.format === "uuid") return "550e8400-e29b-41d4-a716-446655440000";
-      return "string";
-    case "integer":
-      return schema.minimum != null ? schema.minimum : 0;
-    case "number":
-      return schema.minimum != null ? schema.minimum : 0.0;
-    case "boolean":
-      return true;
-    case "array": {
-      const items = schema.items as OpenAPIV3.SchemaObject | undefined;
-      if (items) return [generateExample(items, depth + 1)];
-      return [];
-    }
-    case "object":
-    default:
-      if (schema.properties) {
-        const result: Record<string, unknown> = {};
-        for (const [key, propObj] of Object.entries(schema.properties)) {
-          result[key] = generateExample(propObj as OpenAPIV3.SchemaObject, depth + 1);
-        }
-        return result;
-      }
-      return {};
-  }
-}
-
-function highlightJson(json: string): string {
-  // Split into tokens and non-token text, escape everything properly
-  const tokenRe = /("(?:\\.|[^"\\])*")\s*:|("(?:\\.|[^"\\])*")|([-]?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|\b(true|false)\b|\b(null)\b/g;
-  let result = "";
-  let lastIndex = 0;
-  let m: RegExpExecArray | null;
-
-  while ((m = tokenRe.exec(json)) !== null) {
-    // Escape text between tokens (brackets, commas, whitespace, colons)
-    if (m.index > lastIndex) {
-      result += escapeHtml(json.slice(lastIndex, m.index));
-    }
-    const [, key, str, num, bool, nil] = m;
-    if (key) result += `<span class="json-key">${escapeHtml(key)}</span>:`;
-    else if (str) result += `<span class="json-string">${escapeHtml(str)}</span>`;
-    else if (num) result += `<span class="json-number">${num}</span>`;
-    else if (bool) result += `<span class="json-boolean">${bool}</span>`;
-    else if (nil) result += `<span class="json-null">null</span>`;
-    lastIndex = tokenRe.lastIndex;
-  }
-  // Remaining text after last token
-  if (lastIndex < json.length) {
-    result += escapeHtml(json.slice(lastIndex));
-  }
-  return result;
-}
-
-function httpStatusText(code: number): string {
-  const map: Record<number, string> = {
-    200: "OK", 201: "Created", 204: "No Content",
-    301: "Moved Permanently", 302: "Found", 304: "Not Modified",
-    400: "Bad Request", 401: "Unauthorized", 403: "Forbidden", 404: "Not Found",
-    405: "Method Not Allowed", 409: "Conflict", 422: "Unprocessable Entity",
-    429: "Too Many Requests",
-    500: "Internal Server Error", 502: "Bad Gateway", 503: "Service Unavailable",
-  };
-  return map[code] ?? "";
-}

package/src/web/views/health-strip.ts

@@ -1,92 +0,0 @@
-/**
- * Health strip: coverage donut, run stats, env alert banner.
- */
-
-import type { CollectionState } from "../data/collection-state.ts";
-import { formatDuration } from "../../core/reporter/console.ts";
-
-export function renderHealthStrip(state: CollectionState): string {
-  const { coveragePct, coveredCount, totalEndpoints, runPassed, runFailed, runSkipped, runTotal, runDurationMs, envAlert, latestRun } = state;
-
-  const donut = renderCoverageDonut(coveragePct, coveredCount, totalEndpoints);
-
-  const hasRun = latestRun !== null;
-  const duration = runDurationMs != null ? formatDuration(runDurationMs) : "-";
-
-  const statsHtml = hasRun
-    ? `<div class="health-stats">
-        <div class="stat-block stat-pass"><span class="stat-value">${runPassed}</span><span class="stat-label">passed</span></div>
-        <div class="stat-block stat-fail"><span class="stat-value">${runFailed}</span><span class="stat-label">failed</span></div>
-        <div class="stat-block stat-skip"><span class="stat-value">${runSkipped}</span><span class="stat-label">skipped</span></div>
-        <div class="stat-block"><span class="stat-value">${duration}</span><span class="stat-label">duration</span></div>
-      </div>`
-    : `<div class="health-stats">
-        <div class="stat-block"><span class="stat-value">-</span><span class="stat-label">No runs yet</span></div>
-      </div>`;
-
-  // Mini progress bar
-  const progressHtml = hasRun && runTotal > 0
-    ? `<div class="health-progress">
-        <div class="progress-bar" style="height:6px;">
-          <div class="progress-pass" style="width:${(runPassed / runTotal * 100).toFixed(1)}%"></div>
-          <div class="progress-fail" style="width:${(runFailed / runTotal * 100).toFixed(1)}%"></div>
-          <div class="progress-skip" style="width:${(runSkipped / runTotal * 100).toFixed(1)}%"></div>
-        </div>
-        <span class="health-progress-label">${runPassed}/${runTotal} steps passed</span>
-      </div>`
-    : "";
-
-  const envAlertHtml = envAlert ? renderEnvAlert(envAlert) : "";
-
-  return `
-    <div class="health-strip">
-      <div class="health-donut-zone">
-        ${donut}
-        <div class="coverage-label">
-          <span class="label-title">Coverage</span>
-          <span class="label-value">${coveredCount} / ${totalEndpoints} endpoints</span>
-        </div>
-      </div>
-      <div class="health-info-zone">
-        ${statsHtml}
-        ${progressHtml}
-      </div>
-      ${envAlertHtml}
-    </div>`;
-}
-
-export function renderCoverageDonut(pct: number, covered: number, total: number): string {
-  // SVG donut chart
-  const size = 80;
-  const stroke = 8;
-  const radius = (size - stroke) / 2;
-  const circumference = 2 * Math.PI * radius;
-  const offset = circumference - (pct / 100) * circumference;
-
-  const color = pct >= 80 ? "var(--pass)" : pct >= 50 ? "var(--warn, #fbbf24)" : "var(--fail)";
-  const trackColor = "var(--border)";
-
-  return `
-    <div class="coverage-donut">
-      <svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
-        <circle cx="${size / 2}" cy="${size / 2}" r="${radius}"
-          fill="none" stroke="${trackColor}" stroke-width="${stroke}" />
-        <circle cx="${size / 2}" cy="${size / 2}" r="${radius}"
-          fill="none" stroke="${color}" stroke-width="${stroke}"
-          stroke-dasharray="${circumference}" stroke-dashoffset="${offset}"
-          stroke-linecap="round"
-          transform="rotate(-90 ${size / 2} ${size / 2})" />
-        <text x="${size / 2}" y="${size / 2}" text-anchor="middle" dominant-baseline="central"
-          fill="var(--text)" font-size="16" font-weight="700" font-family="inherit">${pct}%</text>
-      </svg>
-      <div class="donut-label">${covered}/${total} endpoints</div>
-    </div>`;
-}
-
-export function renderEnvAlert(message: string): string {
-  return `
-    <div class="env-alert">
-      <span class="env-alert-icon">&#9888;</span>
-      <span>${message}</span>
-    </div>`;
-}