@kirrosh/zond 0.19.0 → 0.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kirrosh/zond",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "description": "API testing platform — define tests in YAML, run from CLI or WebUI, generate from OpenAPI specs",
   "license": "MIT",
   "module": "index.ts",

package/src/db/queries.ts

@@ -255,7 +255,9 @@ export function saveResults(runId: number, suiteResults: TestRunResult[]): void
   db.transaction(() => {
     for (const suite of suiteResults) {
       for (const step of suite.steps) {
-        const keepBody = step.status === "fail" || step.status === "error";
+        const maxBodySize = 50_000;
+        const truncBody = (s: string | null | undefined) =>
+          s && s.length > maxBodySize ? s.slice(0, maxBodySize) + "\n...[truncated]" : (s ?? null);
         stmt.run({
           $run_id: runId,
           $suite_name: suite.suite_name,
@@ -264,10 +266,10 @@ export function saveResults(runId: number, suiteResults: TestRunResult[]): void
           $duration_ms: step.duration_ms,
           $request_method: step.request.method,
           $request_url: step.request.url,
-          $request_body: step.request.body ?? null,
+          $request_body: truncBody(step.request.body),
           $response_status: step.response?.status ?? null,
-          $response_body: keepBody ? (step.response?.body ?? null) : null,
-          $response_headers: keepBody && step.response?.headers
+          $response_body: truncBody(step.response?.body),
+          $response_headers: step.response?.headers
             ? JSON.stringify(step.response.headers)
             : null,
           $error_message: step.error ?? null,

package/src/web/data/collection-state.ts

@@ -40,6 +40,7 @@ export interface StepViewState {
   durationMs?: number;
   requestMethod?: string;
   requestUrl?: string;
+  requestBody?: string;
   responseStatus?: number;
   responseBody?: string;
   assertions?: { field: string; rule: string; passed: boolean; actual?: unknown; expected?: unknown }[];
@@ -281,6 +282,7 @@ export async function buildCollectionState(collection: CollectionRecord): Promis
           durationMs: r.duration_ms ?? undefined,
           requestMethod: r.request_method ?? undefined,
           requestUrl: r.request_url ?? undefined,
+          requestBody: r.request_body ?? undefined,
           responseStatus: r.response_status ?? undefined,
           responseBody: r.response_body ?? undefined,
           assertions: Array.isArray(r.assertions) ? r.assertions : undefined,

package/src/web/routes/dashboard.ts

@@ -253,6 +253,28 @@ async function renderCollectionContent(collection: CollectionRecord): Promise<st
       document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('tab-active'));
       el.classList.add('tab-active');
     }
+    function switchToSuite(suiteName) {
+      var suitesBtn = document.querySelector('[data-tab="suites"]');
+      if (!suitesBtn) return;
+      suitesBtn.click();
+      document.addEventListener('htmx:afterSwap', function handler(e) {
+        if (e.detail.target && e.detail.target.id === 'tab-content') {
+          document.removeEventListener('htmx:afterSwap', handler);
+          setTimeout(function() {
+            var rows = document.querySelectorAll('.suite-row[data-suite-name]');
+            for (var i = 0; i < rows.length; i++) {
+              if (rows[i].dataset.suiteName === suiteName) {
+                rows[i].scrollIntoView({ behavior: 'smooth', block: 'center' });
+                rows[i].click();
+                rows[i].classList.add('suite-highlight');
+                setTimeout(function() { rows[i].classList.remove('suite-highlight'); }, 2000);
+                break;
+              }
+            }
+          }, 50);
+        }
+      });
+    }
   </script>`;
 
   return `

package/src/web/static/style.css

@@ -816,6 +816,37 @@ h3 { font-size: 1.05rem; margin: 1rem 0 0.25rem; }
 .history-row:hover { background: var(--bg-hover); }
 .pagination { display: flex; gap: 0.5rem; margin: 1.5rem 0; align-items: center; }
 
+/* ── Step method+path+status labels ── */
+.step-path { font-family: var(--font-mono); font-size: 0.8rem; }
+.step-status-code {
+  display: inline-block;
+  font-family: var(--font-mono);
+  font-size: 0.65rem;
+  font-weight: 600;
+  padding: 0.1rem 0.35rem;
+  border-radius: 3px;
+  margin-left: 0.35rem;
+  vertical-align: middle;
+}
+.step-status-code.status-ok { background: var(--pass-dim); color: var(--pass); }
+.step-status-code.status-error { background: var(--fail-dim); color: var(--fail); }
+.step-name-dim { color: var(--text-dim); font-size: 0.7rem; margin-left: 0.5rem; }
+
+/* ── Suite link (endpoints → suites navigation) ── */
+.suite-link {
+  color: var(--accent);
+  text-decoration: none;
+  cursor: pointer;
+}
+.suite-link:hover { text-decoration: underline; }
+.suite-highlight {
+  animation: suite-flash 2s ease-out;
+}
+@keyframes suite-flash {
+  0% { background: rgba(61, 139, 253, 0.25); }
+  100% { background: transparent; }
+}
+
 /* ── Responsive ── */
 @media (max-width: 768px) {
   .health-strip { grid-template-columns: 1fr; gap: 1rem; }

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

@@ -93,7 +93,7 @@ function renderWarningBadges(warnings: string[]): string {
     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 '<span class="warning-badge warning-params">MISSING EXAMPLES</span>';
+    if (w.startsWith("required_params_no_examples")) return "";
     return `<span class="warning-badge">${escapeHtml(w)}</span>`;
   }).join(" ");
 }
@@ -140,7 +140,8 @@ function renderEndpointDetail(ep: EndpointViewState): string {
 
       return `<div class="covering-suite">
         ${icon}
-        <span class="suite-ref">${escapeHtml(step.file)}</span>
+        <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}`;
@@ -149,13 +150,16 @@ function renderEndpointDetail(ep: EndpointViewState): string {
   }
 
   // Fallback: just file names
-  const files = ep.coveringFiles.map(f =>
-    `<div class="covering-suite">
+  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>
-      <span class="suite-ref">${escapeHtml(basename(f))}</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("");
+    </div>`;
+  }).join("");
   return files;
 }
 

package/src/web/views/results.ts

@@ -98,11 +98,11 @@ export function renderSuiteResults(
         }
 
         let reqBodyHtml = "";
-        if (hasFailed && step.request_body) {
+        if (step.request_body) {
           reqBodyHtml = `<details class="body-details"><summary>Request Body</summary><pre>${escapeHtml(step.request_body)}</pre></details>`;
         }
         let resBodyHtml = "";
-        if (hasFailed && step.response_body) {
+        if (step.response_body) {
           resBodyHtml = `<details class="body-details"><summary>Response Body</summary><pre>${escapeHtml(step.response_body)}</pre></details>`;
         }
 
@@ -123,7 +123,8 @@ export function renderSuiteResults(
           }
         }
 
-        const detailPanel = (hasFailed || skipReasonHtml)
+        const hasContent = requestHtml || errorHtml || skipReasonHtml || assertionsHtml || reqBodyHtml || resBodyHtml;
+        const detailPanel = hasContent
           ? `<div class="detail-panel" id="${detailId}" style="display:none">
               ${requestHtml}
               ${errorHtml}
@@ -134,7 +135,7 @@ export function renderSuiteResults(
             </div>`
           : "";
 
-        const toggle = (hasFailed || skipReasonHtml)
+        const toggle = hasContent
           ? `onclick="var d=document.getElementById('${detailId}');d.style.display=d.style.display==='none'?'block':'none'"`
           : "";
 
@@ -144,7 +145,7 @@ export function renderSuiteResults(
         return `
           <div class="step-row${chainedClass}${statusClass}" ${toggle}>
             <div>${stepStatusBadge(step.status)}</div>
-            <div class="step-name">${escapeHtml(step.test_name)}${capturesHtml ? ` ${capturesHtml}` : ""}</div>
+            <div class="step-name">${step.request_method && step.request_url ? (() => { let p: string; try { p = new URL(step.request_url).pathname; } catch { p = step.request_url; } const sc = step.response_status ? ` <span class="step-status-code ${step.response_status >= 400 ? "status-error" : "status-ok"}">${step.response_status}</span>` : ""; return `${methodBadge(step.request_method)} <span class="step-path">${escapeHtml(p)}</span>${sc} <span class="step-name-dim">${escapeHtml(step.test_name)}</span>`; })() : escapeHtml(step.test_name)}${capturesHtml ? ` ${capturesHtml}` : ""}</div>
             <div class="step-duration">${formatDuration(step.duration_ms)}</div>
           </div>
           ${detailPanel}`;

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

@@ -4,6 +4,7 @@
 
 import type { CollectionState, SuiteViewState, StepViewState } from "../data/collection-state.ts";
 import { escapeHtml } from "./layout.ts";
+import { methodBadge } from "./results.ts";
 import { basename } from "node:path";
 
 export function renderSuitesTab(state: CollectionState): string {
@@ -55,7 +56,7 @@ function renderSuiteRow(suite: SuiteViewState, index: number): string {
     : `<div style="font-size:0.75rem;color:var(--text-dim);padding:0.5rem;">No run results yet</div>`;
 
   return `
-    <div class="suite-row"
+    <div class="suite-row" data-suite-name="${escapeHtml(suite.name)}"
       onclick="var d=document.getElementById('${detailId}');d.style.display=d.style.display==='none'?'block':'none'">
       <div class="suite-info">
         <div class="suite-name">${escapeHtml(suite.name)}</div>
@@ -87,6 +88,21 @@ function renderStepRow(step: StepViewState, suiteIdx: number, stepIdx: number):
     ? `<span class="step-duration">${step.durationMs}ms</span>`
     : `<span class="step-duration">-</span>`;
 
+  // Primary label: prefer METHOD /path [status] over step name
+  let primaryLabel: string;
+  let nameLabel = "";
+  if (step.requestMethod && step.requestUrl) {
+    let urlPath: string;
+    try { urlPath = new URL(step.requestUrl).pathname; } catch { urlPath = step.requestUrl; }
+    const statusTag = step.responseStatus
+      ? ` <span class="step-status-code ${step.responseStatus >= 400 ? "status-error" : "status-ok"}">${step.responseStatus}</span>`
+      : "";
+    primaryLabel = `${methodBadge(step.requestMethod)} <span class="step-path">${escapeHtml(urlPath)}</span>${statusTag}`;
+    nameLabel = ` <span class="step-name-dim">${escapeHtml(step.name)}</span>`;
+  } else {
+    primaryLabel = escapeHtml(step.name);
+  }
+
   // Captures
   const captureHtml = step.captures && Object.keys(step.captures).length > 0
     ? `<span class="step-captures">${Object.entries(step.captures).map(([k, v]) =>
@@ -95,8 +111,13 @@ function renderStepRow(step: StepViewState, suiteIdx: number, stepIdx: number):
     : `<span class="step-captures"></span>`;
 
   const detailId = `s-${suiteIdx}-step-${stepIdx}`;
-  const hasDetail = (step.status === "fail" || step.status === "error") &&
-    ((step.assertions && step.assertions.length > 0) || step.hint || step.responseBody);
+  const hasDetail =
+    (step.assertions && step.assertions.length > 0) ||
+    step.hint ||
+    step.responseBody ||
+    step.requestBody ||
+    step.errorMessage ||
+    (step.requestMethod && step.requestUrl);
 
   const clickHandler = hasDetail
     ? ` onclick="event.stopPropagation();var d=document.getElementById('${detailId}');d.style.display=d.style.display==='none'?'block':'none'"`
@@ -134,6 +155,13 @@ function renderStepRow(step: StepViewState, suiteIdx: number, stepIdx: number):
       detailContent += `<div class="failure-hint"><span>&#9888;</span> ${escapeHtml(step.hint)}</div>`;
     }
 
+    // Request body toggle
+    if (step.requestBody) {
+      const truncatedReq = step.requestBody.length > 2000 ? step.requestBody.slice(0, 2000) + "..." : step.requestBody;
+      detailContent += `<div class="req-res-toggle" onclick="event.stopPropagation();var b=this.nextElementSibling;b.style.display=b.style.display==='none'?'block':'none'">&#9660; Request Body</div>
+        <div class="req-res-body" style="display:none;"><pre style="font-size:0.7rem;margin:0.25rem 0;">${escapeHtml(truncatedReq)}</pre></div>`;
+    }
+
     // Response body toggle
     if (step.responseBody) {
       const truncated = step.responseBody.length > 2000 ? step.responseBody.slice(0, 2000) + "..." : step.responseBody;
@@ -146,7 +174,7 @@ function renderStepRow(step: StepViewState, suiteIdx: number, stepIdx: number):
 
   return `<div class="step-row"${clickHandler}>
     ${icon}
-    <span class="step-label"${labelStyle}>${escapeHtml(step.name)}</span>
+    <span class="step-label"${labelStyle}>${primaryLabel}${nameLabel}</span>
     ${captureHtml}
     ${duration}
   </div>${detailPanel}`;