@kirrosh/zond 0.19.0 → 0.21.0

package/src/web/static/style.css

@@ -816,6 +816,325 @@ 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; }
+}
+
+/* ═══════════════════════════════════════════════════
+   Explorer Tab
+   ═══════════════════════════════════════════════════ */
+
+.explorer-base-url {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  margin-bottom: 1rem;
+}
+.explorer-base-url .explorer-label {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--text-dim);
+  white-space: nowrap;
+}
+.explorer-input {
+  background: var(--bg-inset);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 0.85rem;
+  padding: 0.4rem 0.6rem;
+  flex: 1;
+  min-width: 0;
+}
+.explorer-input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+.explorer-input-sm { flex: unset; width: auto; }
+
+/* Groups */
+.explorer-list { display: flex; flex-direction: column; gap: 0.5rem; }
+.explorer-group {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+.explorer-group-title {
+  font-size: 0.85rem;
+  font-weight: 600;
+  padding: 0.6rem 1rem;
+  background: var(--bg-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.explorer-group-title .tab-count {
+  font-size: 0.75rem;
+  background: var(--bg-hover);
+  padding: 0.1rem 0.5rem;
+  border-radius: var(--radius-pill);
+  color: var(--text-dim);
+}
+
+/* Endpoint row */
+.explorer-endpoint {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  border-top: 1px solid var(--border-subtle);
+  transition: background 0.15s;
+}
+.explorer-endpoint:hover { background: var(--bg-hover); }
+.explorer-endpoint-path {
+  font-family: var(--font-mono);
+  font-size: 0.85rem;
+  font-weight: 500;
+}
+.explorer-endpoint-summary {
+  color: var(--text-dim);
+  font-size: 0.8rem;
+  margin-left: auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.explorer-auth-hint {
+  font-size: 0.65rem;
+  font-weight: 600;
+  padding: 0.1rem 0.35rem;
+  border-radius: var(--radius-sm);
+  background: var(--warn-dim);
+  color: var(--warn);
+}
+
+/* Detail / form */
+.explorer-detail {
+  padding: 1rem;
+  background: var(--bg-raised);
+  border-top: 1px solid var(--border);
+}
+.explorer-section {
+  margin-bottom: 1rem;
+}
+.explorer-section-title {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--text-dim);
+  margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Parameters */
+.explorer-param-row {
+  display: grid;
+  grid-template-columns: 140px 50px 90px 1fr;
+  gap: 0.5rem;
+  align-items: center;
+  margin-bottom: 0.35rem;
+  font-size: 0.85rem;
+}
+.explorer-param-name {
+  font-family: var(--font-mono);
+  font-weight: 500;
+  font-size: 0.8rem;
+}
+.explorer-param-location {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  background: var(--bg-inset);
+  padding: 0.1rem 0.3rem;
+  border-radius: var(--radius-sm);
+  text-align: center;
+}
+.explorer-param-type {
+  font-size: 0.75rem;
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+}
+.explorer-required {
+  color: var(--fail);
+  font-weight: 700;
+  margin-left: 0.15rem;
+}
+
+/* Body editor */
+.explorer-body-editor {
+  width: 100%;
+  min-height: 120px;
+  background: var(--bg-inset);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 0.85rem;
+  padding: 0.5rem;
+  resize: vertical;
+  tab-size: 2;
+}
+.explorer-body-editor:focus { outline: none; border-color: var(--accent); }
+.explorer-content-type {
+  font-size: 0.75rem;
+  padding: 0.15rem 0.35rem;
+}
+
+/* Custom headers */
+.explorer-headers-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+.explorer-header-pair {
+  display: flex;
+  gap: 0.35rem;
+  align-items: center;
+}
+.explorer-header-pair input { flex: 1; }
+.explorer-remove-btn {
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-dim);
+  cursor: pointer;
+  font-size: 0.75rem;
+  padding: 0.25rem 0.5rem;
+  line-height: 1;
+}
+.explorer-remove-btn:hover { color: var(--fail); border-color: var(--fail); }
+.explorer-add-header-btn {
+  background: none;
+  border: none;
+  color: var(--accent);
+  cursor: pointer;
+  font-size: 0.8rem;
+  padding: 0.25rem 0;
+  margin-top: 0.25rem;
+}
+.explorer-add-header-btn:hover { text-decoration: underline; }
+
+/* Actions */
+.explorer-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-top: 0.5rem;
+}
+.explorer-send-btn {
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius);
+  padding: 0.5rem 1.5rem;
+  font-weight: 600;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.explorer-send-btn:hover { background: var(--accent-hover); }
+.explorer-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.explorer-spinner { color: var(--text-dim); font-size: 0.85rem; }
+
+/* Response */
+.explorer-response-container { margin-top: 1rem; }
+.explorer-response {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+.explorer-response-error { border-color: var(--fail); }
+.response-meta {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border);
+  font-size: 0.85rem;
+}
+.response-status {
+  font-weight: 700;
+  font-family: var(--font-mono);
+}
+.response-status.status-2xx { color: var(--pass); }
+.response-status.status-3xx { color: var(--info); }
+.response-status.status-4xx { color: var(--warn); }
+.response-status.status-5xx { color: var(--fail); }
+.response-time { color: var(--text-dim); font-size: 0.8rem; }
+.response-size { color: var(--text-muted); font-size: 0.8rem; }
+.response-headers { padding: 0.5rem 0.75rem; }
+.response-headers summary {
+  font-size: 0.8rem;
+  color: var(--text-dim);
+  cursor: pointer;
+}
+.response-headers-pre {
+  font-size: 0.8rem;
+  margin-top: 0.25rem;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+.response-body {
+  padding: 0.75rem;
+  background: var(--bg-inset);
+}
+.response-body pre {
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 500px;
+  overflow-y: auto;
+  margin: 0;
+}
+.response-error-msg {
+  padding: 0.75rem;
+  color: var(--fail);
+  font-size: 0.85rem;
+}
+
+/* JSON syntax highlighting */
+.json-key { color: var(--accent); }
+.json-string { color: var(--pass); }
+.json-number { color: var(--warn); }
+.json-boolean { color: var(--method-patch); }
+.json-null { color: var(--text-dim); font-style: italic; }
+
 /* ── Responsive ── */
 @media (max-width: 768px) {
   .health-strip { grid-template-columns: 1fr; gap: 1rem; }
@@ -824,4 +1143,6 @@ h3 { font-size: 1.05rem; margin: 1rem 0 0.25rem; }
   .run-row { grid-template-columns: 48px 1fr 60px; }
   .run-time, .run-duration { display: none; }
   .runs-header { display: none; }
+  .explorer-param-row { grid-template-columns: 1fr; }
+  .explorer-endpoint-summary { display: none; }
 }

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;
 }