@dutodev/cli 1.4.0 → 1.5.0

package/README.md

@@ -162,6 +162,11 @@ Outside an interactive terminal (pipe, CI) or with `--no-ui`, the CLI prints a p
 
 With every session, the CLI starts a local inspector: a browser page with requests arriving live, formatted JSON, and buttons to copy and replay. It is more comfortable than the terminal for large bodies.
 
+- **Overview.** Each request shows who answered (your app or duto), total time and time to first byte, the data center, the client, the query, the cookies sent and set, and the redirect target.
+- **Issues.** The inspector flags what usually breaks a tunnel: nothing listening on the port, a redirect to `localhost` or down to `http`, a cookie the browser drops (`Domain` mismatch, `SameSite=None` without `Secure`), a CORS response or preflight the browser blocks, and response bodies that link to `localhost`. Each one says what to change.
+- **Flows.** A redirect is linked to the request the same browser made next, so a login or OAuth round trip reads as one chain you can step through.
+- **Filters.** Type terms like `status:4xx`, `status:>=500`, `method:post`, `path:/api`, `is:redirect`, `is:issue`, `is:duto` or `duration:>500ms`. Start a term with `-` to exclude it. The buttons under the filter (Errors, Redirects, Issues, Slow) apply the common ones.
+- **Clear and export.** Clear hides what is already listed, so you can reproduce a flow from a clean list. Export HAR saves the listed requests for Chrome DevTools or any HAR viewer.
 - **How to open it.** In the full screen, key `i` opens the browser at the right address, and the screen shows `inspector  http://127.0.0.1:<port>`. In plain mode (pipe, CI, `--no-ui`), the CLI prints `inspector: <url>?t=<token>`; copy that whole address.
 - **Port.** The default is `127.0.0.1:4141`. If it is taken, the CLI tries the next ones up to 4161 and then any free port. The inspector listens on `127.0.0.1` only: other machines on your network cannot reach it.
 - **Token.** The address carries a session token (`?t=...`). It exists so other sites open in your browser cannot read or replay your requests. That is why the full screen does not show the token; use key `i`.

package/dist/index.js

@@ -50,7 +50,7 @@ import { join as join5, relative } from "path";
 import cac from "cac";
 
 // src/version.ts
-var CLI_VERSION = "1.4.0";
+var CLI_VERSION = "1.5.0";
 
 // src/api.ts
 var DutoApiError = class extends Error {
@@ -401,9 +401,9 @@ function parseConfig(text, file = CONFIG_FILES[0], env = process.env) {
     throw fail3('declare the tunnels under "tunnels:", one per line (e.g. web: 3000)');
   }
   const specs = [];
-  for (const pair of tunnels.items) {
-    const raw = isScalar(pair.key) ? String(pair.key.value) : "";
-    const line = lineAt(pair.key?.range?.[0]);
+  for (const pair2 of tunnels.items) {
+    const raw = isScalar(pair2.key) ? String(pair2.key.value) : "";
+    const line = lineAt(pair2.key?.range?.[0]);
     const name = normalizeName(raw);
     const v = validateName(name);
     if (!v.ok) {
@@ -412,11 +412,11 @@ function parseConfig(text, file = CONFIG_FILES[0], env = process.env) {
         line
       );
     }
-    const port = portOf(pair.value);
+    const port = portOf(pair2.value);
     if (port === null) throw fail3(`invalid port for "${raw}" (use 1\u201365535)`, line);
     const spec = { name, port };
-    if (isMap(pair.value)) {
-      const body = pair.value;
+    if (isMap(pair2.value)) {
+      const body = pair2.value;
       for (const item of body.items) {
         const key = isScalar(item.key) ? String(item.key.value) : "";
         if (!TUNNEL_KEYS.includes(key)) throw fail3(`unknown key in "${raw}": ${key} (use port, host, headers, rewrite_redirects, auth or allow)`, line);
@@ -523,7 +523,7 @@ async function browserLogin(o) {
   const start = await api.startLogin({
     deviceId: o.deviceId,
     deviceName: hostname(),
-    cliVersion: "1.4.0",
+    cliVersion: "1.5.0",
     nodeVersion: process.version,
     os: process.platform,
     arch: process.arch
@@ -615,6 +615,71 @@ function edgeLabel(edge) {
   return place ? "via " + edge.colo + " (" + place + ")" : "via " + edge.colo;
 }
 
+// src/inspector/filter.ts
+function matchesFilter(item, text) {
+  function compare(value, spec, unit) {
+    const m = /^(>=|<=|>|<|=)?(.+)$/.exec(spec);
+    if (!m) return null;
+    const limit = unit(m[2] ?? "");
+    if (limit === null) return null;
+    if (value === null) return false;
+    const op = m[1] || "=";
+    if (op === ">") return value > limit;
+    if (op === ">=") return value >= limit;
+    if (op === "<") return value < limit;
+    if (op === "<=") return value <= limit;
+    return value === limit;
+  }
+  function plainNumber(raw) {
+    return /^\d+$/.test(raw) ? Number(raw) : null;
+  }
+  function millis(raw) {
+    const m = /^(\d+(?:\.\d+)?)(ms|s)?$/.exec(raw);
+    if (!m) return null;
+    return m[2] === "s" ? Number(m[1]) * 1e3 : Number(m[1]);
+  }
+  function status(spec) {
+    const cls = /^([1-5])xx$/.exec(spec);
+    if (cls) return item.status !== null && Math.floor(item.status / 100) === Number(cls[1]);
+    return compare(item.status, spec, plainNumber);
+  }
+  function kind(spec) {
+    const s = item.status;
+    if (spec === "error") return s !== null && s >= 400 || !!item.error;
+    if (spec === "redirect") return s !== null && s >= 300 && s < 400;
+    if (spec === "rewritten") return !!item.rewritten;
+    if (spec === "replay") return item.replayOf !== void 0;
+    if (spec === "ws") return item.websocket;
+    if (spec === "pending") return s === null && !item.error;
+    if (spec === "issue") return (item.issues ?? 0) > 0;
+    if (spec === "duto") return item.origin === "duto";
+    if (spec === "app") return item.origin === "app";
+    return null;
+  }
+  function field(key, value) {
+    const v = value.toLowerCase();
+    if (key === "status") return status(v);
+    if (key === "is") return kind(v);
+    if (key === "duration") return compare(item.durationMs, v, millis);
+    if (key === "method") return (item.websocket ? "ws" : item.method.toLowerCase()) === v;
+    if (key === "tunnel") return item.tunnel.toLowerCase() === v;
+    if (key === "path") return item.path.toLowerCase().indexOf(v) >= 0;
+    if (key === "client") return (item.client ?? "").toLowerCase() === v;
+    return null;
+  }
+  const haystack = [item.tunnel, item.websocket ? "ws" : item.method, item.path, item.status === null ? "" : String(item.status), item.client ?? ""].join(" ").toLowerCase();
+  const terms = text.trim().split(/\s+/).filter(Boolean);
+  for (const raw of terms) {
+    const negate = raw.length > 1 && raw.charAt(0) === "-";
+    const term = negate ? raw.slice(1) : raw;
+    const sep = term.indexOf(":");
+    let hit = sep > 0 ? field(term.slice(0, sep).toLowerCase(), term.slice(sep + 1)) : null;
+    if (hit === null) hit = haystack.indexOf(term.toLowerCase()) >= 0;
+    if (hit === negate) return false;
+  }
+  return true;
+}
+
 // src/inspector/jsonView.ts
 function countLabel(n, one, many) {
   return n + " " + (n === 1 ? one : many);
@@ -741,14 +806,14 @@ button { font: inherit; color: inherit; background: none; border: 0; padding: 0;
 .tunnels { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: flex-end; min-width: 0; }
 .tunnels .k { color: ${C.strong}; }
 .banner { padding: 6px 12px; background: ${BAR}; border-bottom: 1px solid ${C.err}; color: ${C.err}; }
-.main { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px 1fr; }
+.main { flex: 1; min-height: 0; display: grid; grid-template-columns: 400px 1fr; }
 .side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid ${LINE}; }
 .search { margin: 8px 12px; padding: 5px 8px; border: 1px solid ${INPUT_LINE}; border-radius: 5px; background: ${BG}; color: ${TEXT}; font: inherit; outline: none; }
 .search:focus { border-color: ${C.signal}; }
 .search::placeholder { color: ${C.muted}; }
 .list { flex: 1; min-height: 0; overflow-y: auto; outline: none; }
-.row { display: grid; grid-template-columns: 14px 42px minmax(0, 1fr) 34px 56px; gap: 8px; padding: 5px 12px; border-bottom: 1px solid ${ROW_LINE}; align-items: center; cursor: pointer; white-space: nowrap; }
-.list.multi .row { grid-template-columns: 14px 56px 42px minmax(0, 1fr) 34px 56px; }
+.row { display: grid; grid-template-columns: 14px 56px minmax(0, 1fr) 34px 60px; gap: 8px; padding: 5px 12px; border-bottom: 1px solid ${ROW_LINE}; align-items: center; cursor: pointer; white-space: nowrap; }
+.list.multi .row { grid-template-columns: 14px 56px 56px minmax(0, 1fr) 34px 60px; }
 .row:hover { background: #141917; }
 .row.sel { background: ${SELECTED}; box-shadow: inset 2px 0 0 ${C.signal}; }
 .row span { overflow: hidden; text-overflow: ellipsis; }
@@ -756,7 +821,30 @@ button { font: inherit; color: inherit; background: none; border: 0; padding: 0;
 .m { font-weight: 700; }
 .mut { color: ${C.muted}; }
 .sig { color: ${C.signal}; }
-.redirect { margin-top: 6px; display: grid; gap: 2px; }
+.warn { color: ${C.warn}; }
+.errc { color: ${C.err}; }
+.row.inflow { box-shadow: inset 2px 0 0 ${C.muted}; }
+.row.sel.inflow { box-shadow: inset 2px 0 0 ${C.signal}; }
+.to { color: ${C.muted}; }
+.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; }
+.chip { border: 1px solid ${INPUT_LINE}; border-radius: 999px; padding: 1px 8px; color: ${C.muted}; }
+.chip:hover { color: ${TEXT}; }
+.chip.on { border-color: ${C.signal}; color: ${C.signal}; }
+.chip b { font-weight: 400; color: ${TEXT}; }
+.sidebar-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; border-top: 1px solid ${LINE}; }
+.help { padding: 0 12px 8px; color: ${C.muted}; display: grid; gap: 2px; }
+.help code { color: ${TEXT}; font: inherit; }
+.ov { padding: 4px 0 12px; }
+.issue { margin: 8px 12px 0; padding: 6px 10px; border-left: 2px solid ${C.warn}; background: #16140f; }
+.issue.error { border-left-color: ${C.err}; background: #1a1112; }
+.issue.info { border-left-color: ${C.muted}; background: #141716; }
+.issue b { display: block; color: ${C.strong}; font-weight: 600; }
+.issue span { color: ${C.muted}; }
+.flow { margin: 6px 12px 0; display: grid; gap: 2px; max-width: 760px; }
+.step { display: grid; grid-template-columns: 40px 52px minmax(0, 1fr) 40px; gap: 8px; text-align: left; padding: 2px 6px; border-radius: 4px; }
+.step:hover { background: #141917; }
+.step.cur { background: ${SELECTED}; box-shadow: inset 2px 0 0 ${C.signal}; }
+.step span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .empty { padding: 12px; color: ${C.muted}; }
 .detail { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
 .pane { flex: 1; }
@@ -798,14 +886,20 @@ th { color: ${JSON_KEY}; font-weight: 400; white-space: nowrap; }
 var SCRIPT = String.raw`"use strict";
 var countLabel = (${countLabel.toString()});
 var edgeLabel = (${edgeLabel.toString()});
+var matchesFilter = (${matchesFilter.toString()});
 var jsonSyntaxError = (${jsonSyntaxError.toString()});
 var jsonTokens = (${jsonTokens.toString()});
 var jsonIndent = (${jsonIndent.toString()});
 var COLORS = ${JSON.stringify(C)};
 var TOKEN = new URLSearchParams(location.search).get("t") || "";
-var TABS = ["Body", "Headers", "Response", "Raw"];
+var CHIPS = [
+  { label: "Errors", query: "is:error" },
+  { label: "Redirects", query: "is:redirect" },
+  { label: "Issues", query: "is:issue" },
+  { label: "Slow", query: "duration:>1s" }
+];
 
-var state = { items: [], tunnels: [], selected: null, detail: null, detailKey: "", tab: "Body", ended: false };
+var state = { items: [], tunnels: [], selected: null, detail: null, detailKey: "", tab: "Overview", ended: false, clearedAfter: 0 };
 var listSeq = 0, detailSeq = 0, msgTimer = null;
 var es = null, lost = false, replaying = false;
 function fail(e) { if (!state.ended) console.error(e); }
@@ -857,14 +951,60 @@ function header(h, name) {
   for (var k in h) if (k.toLowerCase() === name) return h[k];
   return "";
 }
+function kept() {
+  return state.items.filter(function (it) { return it.id > state.clearedAfter; });
+}
 function visible() {
-  var f = $("filter").value.trim().toLowerCase();
-  if (!f) return state.items;
-  return state.items.filter(function (it) {
-    return (it.tunnel + " " + (it.websocket ? "ws" : it.method) + " " + it.path + " " + (it.status === null || it.status === undefined ? "" : it.status)).toLowerCase().indexOf(f) >= 0;
+  var f = $("filter").value;
+  return kept().filter(function (it) { return matchesFilter(it, f); });
+}
+function setFilter(text) {
+  $("filter").value = text;
+  renderList();
+}
+
+function renderChips() {
+  var box = $("chips");
+  clear(box);
+  var current = $("filter").value.trim();
+  var items = kept();
+  CHIPS.forEach(function (c) {
+    var n = items.filter(function (it) { return matchesFilter(it, c.query); }).length;
+    var b = el("button", "chip" + (current === c.query ? " on" : ""));
+    b.type = "button";
+    b.title = c.query;
+    b.appendChild(document.createTextNode(c.label + " "));
+    b.appendChild(el("b", "", n));
+    b.addEventListener("click", function () { setFilter(current === c.query ? "" : c.query); });
+    box.appendChild(b);
   });
 }
 
+function itemById(id) {
+  for (var i = 0; i < state.items.length; i++) if (state.items[i].id === id) return state.items[i];
+  return null;
+}
+function chainOf(id) {
+  var ids = {};
+  var start = itemById(id);
+  if (!start || (start.prev === undefined && start.next === undefined)) return ids;
+  var cur = start, guard = 0;
+  while (cur && cur.prev !== undefined && guard++ < 50) cur = itemById(cur.prev);
+  guard = 0;
+  while (cur && guard++ < 50) {
+    ids[cur.id] = true;
+    cur = cur.next === undefined ? null : itemById(cur.next);
+  }
+  return ids;
+}
+
+function markOf(it) {
+  if (it.issues > 0) return { text: "!", cls: it.origin === "duto" || it.error ? "errc" : "warn", title: it.issues === 1 ? "1 issue" : it.issues + " issues" };
+  if (it.replayOf !== undefined) return { text: "↻", cls: "mut", title: "replay of #" + it.replayOf };
+  if (it.rewritten) return { text: "↪", cls: "sig", title: "Location rewritten" };
+  return { text: "", cls: "mut", title: "" };
+}
+
 function renderTop() {
   var n = state.items.length;
   $("count").textContent = countLabel(n, "request", "requests");
@@ -883,26 +1023,29 @@ function renderList() {
   var multi = state.tunnels.length > 1;
   list.classList.toggle("multi", multi);
   clear(list);
+  renderChips();
+  $("clear").textContent = state.clearedAfter > 0 ? "Show all" : "Clear";
   var items = visible();
   if (items.length === 0) {
-    list.appendChild(el("div", "empty", state.items.length === 0 ? "No requests yet." : "No requests match the filter."));
+    var none = state.items.length === 0 ? "No requests yet." : kept().length === 0 ? "Cleared. New requests show up here." : "No requests match the filter.";
+    list.appendChild(el("div", "empty", none));
     return;
   }
+  var flow = state.selected === null ? {} : chainOf(state.selected);
   items.forEach(function (it) {
-    var row = el("div", "row" + (it.id === state.selected ? " sel" : ""));
+    var row = el("div", "row" + (it.id === state.selected ? " sel" : "") + (flow[it.id] ? " inflow" : ""));
     row.setAttribute("role", "option");
     row.setAttribute("aria-selected", it.id === state.selected ? "true" : "false");
     row.dataset.id = String(it.id);
-    if (it.replayOf !== undefined) row.appendChild(el("span", "mut", "↻"));
-    else if (it.rewritten) {
-      var mark = el("span", "sig", "↪");
-      mark.title = "Location rewritten";
-      row.appendChild(mark);
-    } else row.appendChild(el("span", "mut", ""));
+    var mark = markOf(it);
+    var ms = el("span", mark.cls, mark.text);
+    ms.title = mark.title;
+    row.appendChild(ms);
     if (multi) row.appendChild(el("span", "mut", it.tunnel));
     row.appendChild(el("span", "m", methodOf(it)));
     var p = el("span", "", it.path);
-    p.title = it.path;
+    p.title = it.location ? it.path + " → " + it.location : it.path;
+    if (it.location) p.appendChild(el("span", "to", " → " + it.location));
     row.appendChild(p);
     var st = statusInfo(it);
     var s = el("span", "", st.text);
@@ -980,13 +1123,6 @@ function renderDetail() {
   if (d.replayOf !== undefined) parts.push("↻ replay of #" + d.replayOf);
   head.appendChild(el("span", "mut", " · " + parts.join(" · ")));
   if (d.error) head.appendChild(el("div", "msg err", d.error));
-  if (d.redirect) {
-    var moved = el("div", "redirect");
-    moved.appendChild(el("div", "sig", "↪ Location rewritten"));
-    moved.appendChild(el("div", "mut", d.redirect.from));
-    moved.appendChild(el("div", "", "→ " + d.redirect.to));
-    head.appendChild(moved);
-  }
 
   var tabs = document.querySelectorAll(".tab");
   for (var i = 0; i < tabs.length; i++) {
@@ -1003,7 +1139,8 @@ function renderContent() {
   var box = $("content");
   var top = box.scrollTop;
   clear(box);
-  if (state.tab === "Body") renderBody(box, d.reqBody, d.reqNote, d.reqTruncatedNote, d.reqHeaders);
+  if (state.tab === "Overview") renderOverview(box, d);
+  else if (state.tab === "Body") renderBody(box, d.reqBody, d.reqNote, d.reqTruncatedNote, d.reqHeaders);
   else if (state.tab === "Headers") box.appendChild(table(d.reqHeaders));
   else if (state.tab === "Response") {
     box.appendChild(el("div", "sect", "Headers"));
@@ -1020,6 +1157,130 @@ function renderContent() {
   box.scrollTop = top;
 }
 
+function rows(pairs) {
+  var t = el("table");
+  pairs.forEach(function (p) {
+    if (p[1] === null || p[1] === undefined || p[1] === "") return;
+    var tr = el("tr");
+    tr.appendChild(el("th", "", p[0]));
+    tr.appendChild(el("td", "", p[1]));
+    t.appendChild(tr);
+  });
+  return t;
+}
+function clock(ms) {
+  var d = new Date(ms);
+  function two(n) { return (n < 10 ? "0" : "") + n; }
+  return two(d.getHours()) + ":" + two(d.getMinutes()) + ":" + two(d.getSeconds()) + "." + String(d.getMilliseconds()).padStart(3, "0");
+}
+function answeredBy(d) {
+  if (d.origin === null) return "waiting for an answer";
+  if (d.origin === "duto") return d.access && d.access.kind === "denied" ? "duto (tunnel password)" : "duto (nothing answered on localhost)";
+  var t = state.tunnels.filter(function (x) { return x.key === d.tunnel; })[0];
+  return t && t.port ? "your app on localhost:" + t.port : "your app";
+}
+function accessText(a) {
+  if (!a) return null;
+  if (a.kind === "user") return "password, user " + a.user;
+  if (a.kind === "allow") return "allowed: " + a.reason;
+  return "denied";
+}
+function attrsText(attrs) {
+  return Object.keys(attrs).map(function (k) { return attrs[k] === true ? k : k + "=" + attrs[k]; }).join("; ");
+}
+
+function renderOverview(box, d) {
+  var ov = el("div", "ov");
+  d.issues.forEach(function (i) {
+    var card = el("div", "issue " + i.level);
+    card.appendChild(el("b", "", i.title));
+    card.appendChild(el("span", "", i.detail));
+    ov.appendChild(card);
+  });
+
+  if (d.flow.length > 0) {
+    ov.appendChild(el("div", "sect", "Flow"));
+    var flow = el("div", "flow");
+    d.flow.forEach(function (s) {
+      var b = el("button", "step" + (s.id === d.id ? " cur" : ""));
+      b.type = "button";
+      b.appendChild(el("span", "mut", "#" + s.id));
+      b.appendChild(el("span", "m", s.method));
+      b.appendChild(el("span", "", s.path));
+      var st = statusInfo(s);
+      var sp = el("span", "", st.text);
+      sp.style.color = st.color;
+      b.appendChild(sp);
+      b.addEventListener("click", function () { select(s.id); });
+      flow.appendChild(b);
+    });
+    ov.appendChild(flow);
+  }
+
+  ov.appendChild(el("div", "sect", "Request"));
+  var timing = d.durationMs === null || d.durationMs === undefined ? null : d.durationMs + " ms";
+  ov.appendChild(rows([
+    ["Answered by", answeredBy(d)],
+    ["Started", clock(d.startedAt)],
+    ["Total time", timing],
+    ["First byte", d.ttfbMs === undefined ? null : d.ttfbMs + " ms"],
+    ["Size", d.status === null ? null : size(d.bytes)],
+    ["Data center", d.edge ? edgeLabel(d.edge).replace(/^via /, "") : null],
+    ["Access", accessText(d.access)]
+  ]));
+
+  if (d.location || d.redirect) {
+    ov.appendChild(el("div", "sect", "Redirect"));
+    ov.appendChild(rows([
+      ["Location", d.location || (d.redirect && d.redirect.to)],
+      ["Location rewritten", d.redirect ? d.redirect.from + " → " + d.redirect.to : null]
+    ]));
+  }
+
+  ov.appendChild(el("div", "sect", "Client"));
+  ov.appendChild(rows([["IP", d.client.ip], ["Country", d.client.country], ["User agent", d.client.userAgent]]));
+
+  if (d.query.length > 0) {
+    ov.appendChild(el("div", "sect", "Query"));
+    ov.appendChild(rows(d.query.map(function (q) { return [q.name, q.value || " "]; })));
+  }
+  if (d.cookies.sent.length > 0) {
+    ov.appendChild(el("div", "sect", "Cookies sent"));
+    ov.appendChild(rows(d.cookies.sent.map(function (c) { return [c.name, c.value || " "]; })));
+  }
+  if (d.cookies.set.length > 0) {
+    ov.appendChild(el("div", "sect", "Cookies set"));
+    ov.appendChild(rows(d.cookies.set.map(function (c) {
+      var a = attrsText(c.attrs);
+      return [c.name, (c.value || "\"\"") + (a ? "  ·  " + a : "")];
+    })));
+  }
+  box.appendChild(ov);
+}
+
+function exportHar() {
+  var ids = visible().map(function (it) { return it.id; });
+  if (ids.length === 0) return showMsg("Nothing to export.", true);
+  fetch("/api/har?ids=" + ids.join(","), { headers: { "X-Duto-Inspector": TOKEN }, cache: "no-store" }).then(function (r) {
+    if (r.status === 403) { ended(); throw new Error("403"); }
+    return r.blob();
+  }).then(function (blob) {
+    var a = document.createElement("a");
+    a.href = URL.createObjectURL(blob);
+    a.download = "duto-" + new Date().toISOString().replace(/[:.]/g, "-") + ".har";
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    setTimeout(function () { URL.revokeObjectURL(a.href); }, 1000);
+  }).catch(fail);
+}
+
+function toggleClear() {
+  if (state.clearedAfter > 0) state.clearedAfter = 0;
+  else state.clearedAfter = state.items.reduce(function (m, it) { return Math.max(m, it.id); }, 0);
+  renderList();
+}
+
 function table(h) {
   var keys = Object.keys(h || {});
   if (keys.length === 0) return el("div", "note", "No headers.");
@@ -1195,11 +1456,9 @@ function connect() {
     banner("Disconnected from the session.");
     if (es.readyState === 2) probe();
   });
-  es.addEventListener("changed", function (ev) {
-    var ids = [];
-    try { ids = JSON.parse(ev.data).ids || []; } catch (e) {}
+  es.addEventListener("changed", function () {
     loadList();
-    if (state.selected !== null && (ids.length === 0 || ids.indexOf(state.selected) >= 0)) loadDetail(state.selected);
+    if (state.selected !== null) loadDetail(state.selected);
   });
 }
 function probe() {
@@ -1219,6 +1478,13 @@ function init() {
     });
   }
   $("filter").addEventListener("input", renderList);
+  $("clear").addEventListener("click", toggleClear);
+  $("har").addEventListener("click", exportHar);
+  $("helpBtn").addEventListener("click", function () {
+    var h = $("help");
+    h.hidden = !h.hidden;
+    $("helpBtn").setAttribute("aria-expanded", h.hidden ? "false" : "true");
+  });
   $("replay").addEventListener("click", replay);
   $("copyBody").addEventListener("click", function () {
     var b = state.detail ? copyable(state.detail) : { text: null };
@@ -1253,7 +1519,7 @@ function init() {
 init();
 `;
 function inspectorPage(nonce) {
-  const tabs = ["Body", "Headers", "Response", "Raw"].map((t, i) => `<button type="button" class="tab${i === 0 ? " on" : ""}" role="tab" data-tab="${t}">${t}</button>`).join("");
+  const tabs = ["Overview", "Body", "Headers", "Response", "Raw"].map((t, i) => `<button type="button" class="tab${i === 0 ? " on" : ""}" role="tab" data-tab="${t}">${t}</button>`).join("");
   return `<!doctype html>
 <html lang="en">
 <head>
@@ -1269,8 +1535,21 @@ function inspectorPage(nonce) {
   <div class="banner" id="banner" role="status" hidden></div>
   <div class="main">
     <div class="side">
-      <input class="search" id="filter" type="search" placeholder="filter\u2026" aria-label="Filter requests" autocomplete="off" spellcheck="false">
+      <input class="search" id="filter" type="search" placeholder="filter\u2026 (status:4xx is:redirect)" aria-label="Filter requests" autocomplete="off" spellcheck="false">
+      <div class="chips" id="chips"></div>
+      <div class="help" id="help" hidden>
+        <span><code>status:404</code> <code>status:5xx</code> <code>status:&gt;=400</code></span>
+        <span><code>method:post</code> <code>path:/api</code> <code>tunnel:web</code> <code>client:1.2.3.4</code></span>
+        <span><code>is:error</code> <code>is:redirect</code> <code>is:rewritten</code> <code>is:issue</code> <code>is:duto</code> <code>is:ws</code> <code>is:pending</code></span>
+        <span><code>duration:&gt;500ms</code> <code>duration:&gt;=1s</code></span>
+        <span>Start a term with <code>-</code> to exclude it. All terms must match.</span>
+      </div>
       <div class="list" id="list" role="listbox" aria-label="Requests"></div>
+      <div class="sidebar-foot">
+        <button type="button" class="btn" id="clear">Clear</button>
+        <button type="button" class="btn" id="har">Export HAR</button>
+        <button type="button" class="btn" id="helpBtn" aria-expanded="false" aria-controls="help">Filter syntax</button>
+      </div>
     </div>
     <div class="detail">
       <div class="empty" id="none">Select a request from the list.</div>
@@ -1320,6 +1599,25 @@ function replayHeaders(r) {
   return out;
 }
 
+// src/inspector/cookies.ts
+function pair(part) {
+  const i = part.indexOf("=");
+  return i < 0 ? [part.trim(), null] : [part.slice(0, i).trim(), part.slice(i + 1).trim()];
+}
+function parseSetCookie(line) {
+  const [first3 = "", ...rest] = line.split(";");
+  const [name, value] = pair(first3);
+  const attrs = {};
+  for (const part of rest) {
+    const [key, v] = pair(part);
+    if (key) attrs[key.toLowerCase()] = v ?? true;
+  }
+  return { name, value: value ?? "", attrs };
+}
+function parseCookieHeader(header) {
+  return header.split(";").map((part) => pair(part)).filter(([name]) => name !== "").map(([name, value]) => ({ name, value: value ?? "" }));
+}
+
 // src/inspector/curl.ts
 var SKIP = /* @__PURE__ */ new Set(["host", "content-length", "transfer-encoding", "connection", "keep-alive", "expect", "upgrade", "te", "trailer", "proxy-connection"]);
 var TUNNEL_ADDED = /* @__PURE__ */ new Set(["cdn-loop", "x-forwarded-for", "x-forwarded-proto", "x-real-ip", "true-client-ip"]);
@@ -1340,6 +1638,202 @@ function toCurl(r, o) {
   return parts.join(" \\\n  ");
 }
 
+// src/inspector/diagnose.ts
+var LOCAL_HOSTS = /* @__PURE__ */ new Set(["localhost", "127.0.0.1", "0.0.0.0", "[::1]", "::1"]);
+var LINKABLE = /html|javascript|json|css|xml/i;
+var LOCAL_LINK = /https?:\/\/(?:localhost|127\.0\.0\.1|0\.0\.0\.0|\[::1\])(?::\d+)?/gi;
+function isLocalHost(host) {
+  const h = host.toLowerCase();
+  return LOCAL_HOSTS.has(h) || h.endsWith(".localhost");
+}
+function absoluteUrl(value) {
+  if (!/^https?:\/\//i.test(value)) return null;
+  try {
+    return new URL(value);
+  } catch {
+    return null;
+  }
+}
+function originOf(r) {
+  if (r.error || r.access?.kind === "denied") return "duto";
+  return r.status === null ? null : "app";
+}
+function upstreamIssues(r, ctx) {
+  const out = [];
+  if (r.error) {
+    out.push({ level: "error", title: `Nothing is listening on localhost:${ctx.port ?? "?"}`, detail: `${r.error}. Start the server, then replay this request.` });
+  }
+  if (r.access?.kind === "denied") {
+    out.push({ level: "info", title: "Blocked by the tunnel password", detail: "duto answered before the request reached your app." });
+  }
+  return out;
+}
+function redirectIssues(r, ctx) {
+  const location = r.resHeaders.location;
+  const url = location ? absoluteUrl(location) : null;
+  if (!url) return [];
+  if (isLocalHost(url.hostname)) {
+    return [
+      {
+        level: "warn",
+        title: "Redirect to a local address",
+        detail: `Location is ${location}, which only opens on this machine. Build URLs from the request's Host header, or run duto with --host.`
+      }
+    ];
+  }
+  if (url.protocol === "http:" && ctx.publicHost && url.hostname.toLowerCase() === ctx.publicHost) {
+    return [
+      {
+        level: "warn",
+        title: "Redirect drops to http",
+        detail: `Location is ${location}. duto.dev only serves https, so the browser takes an extra hop and loses POST bodies. Have the app trust X-Forwarded-Proto.`
+      }
+    ];
+  }
+  return [];
+}
+function cookieIssues(r, ctx) {
+  const out = [];
+  for (const line of r.resSetCookies ?? []) {
+    const c = parseSetCookie(line);
+    const domain = typeof c.attrs.domain === "string" ? c.attrs.domain.replace(/^\./, "").toLowerCase() : null;
+    const host = ctx.publicHost;
+    if (domain && host && host !== domain && !host.endsWith(`.${domain}`)) {
+      out.push({ level: "warn", title: `Cookie "${c.name}" is dropped`, detail: `Domain=${c.attrs.domain} does not match ${host}. Remove Domain, or set it to ${host}.` });
+    } else if (typeof c.attrs.samesite === "string" && c.attrs.samesite.toLowerCase() === "none" && c.attrs.secure === void 0) {
+      out.push({ level: "warn", title: `Cookie "${c.name}" is dropped`, detail: "SameSite=None needs Secure." });
+    }
+  }
+  return out;
+}
+function corsIssues(r, ctx) {
+  const origin = r.reqHeaders.origin;
+  if (!origin || r.status === null || ctx.publicHost && origin.toLowerCase() === `https://${ctx.publicHost}`) return [];
+  const allowed = r.resHeaders["access-control-allow-origin"];
+  const ok2 = allowed === "*" || allowed === origin;
+  const wanted = r.reqHeaders["access-control-request-method"];
+  if (r.method === "OPTIONS" && wanted) {
+    if (r.status < 400 && ok2) return [];
+    return [{ level: "error", title: "CORS preflight failed", detail: `The browser will not send the ${wanted} from ${origin}. Answer OPTIONS with 2xx and Access-Control-Allow-Origin.` }];
+  }
+  if (ok2) return [];
+  const detail2 = allowed ? `Access-Control-Allow-Origin is ${allowed}, not ${origin}.` : `No Access-Control-Allow-Origin for ${origin}.`;
+  return [{ level: "warn", title: "The browser blocks this response (CORS)", detail: detail2 }];
+}
+function bodyIssues(r) {
+  if (!r.resBody || !LINKABLE.test(r.resHeaders["content-type"] ?? "")) return [];
+  const links = r.resBody.match(LOCAL_LINK);
+  if (!links) return [];
+  const first3 = links[0];
+  const detail2 = links.length === 1 ? `1 link points to ${first3}. It only opens on this machine.` : `${links.length} links point to ${first3}. They only open on this machine.`;
+  return [{ level: "warn", title: "The response links to localhost", detail: detail2 }];
+}
+function diagnose(r, ctx) {
+  return [...upstreamIssues(r, ctx), ...redirectIssues(r, ctx), ...cookieIssues(r, ctx), ...corsIssues(r, ctx), ...bodyIssues(r)];
+}
+
+// src/inspector/flows.ts
+var FLOW_WINDOW_MS = 3e4;
+function clientOf(r) {
+  const direct = r.reqHeaders["cf-connecting-ip"];
+  if (direct) return direct;
+  const forwarded = r.reqHeaders["x-forwarded-for"]?.split(",")[0]?.trim();
+  return forwarded || null;
+}
+var clientKey = (r) => `${clientOf(r) ?? ""}|${r.reqHeaders["user-agent"] ?? ""}`;
+function redirectTarget(r, publicHost) {
+  const location = r.resHeaders.location;
+  if (!location || r.status === null || r.status < 300 || r.status >= 400) return null;
+  const base = `https://${publicHost ?? "duto.invalid"}`;
+  let url;
+  try {
+    url = new URL(location, base + r.path);
+  } catch {
+    return null;
+  }
+  if (url.origin !== base) return null;
+  return url.pathname + url.search;
+}
+function linkFlows(records, publicHostOf) {
+  const ordered = [...records].sort((a, b) => a.id - b.id);
+  const links = /* @__PURE__ */ new Map();
+  const link = (id, patch) => links.set(id, { ...links.get(id), ...patch });
+  ordered.forEach((r, i) => {
+    const target = redirectTarget(r, publicHostOf(r.tunnel));
+    if (target === null) return;
+    const key = clientKey(r);
+    const next = ordered.slice(i + 1).find((n) => n.tunnel === r.tunnel && n.path === target && clientKey(n) === key && n.startedAt - r.startedAt <= FLOW_WINDOW_MS && links.get(n.id)?.prev === void 0);
+    if (!next) return;
+    link(r.id, { next: next.id });
+    link(next.id, { prev: r.id });
+  });
+  return links;
+}
+function flowChain(id, links) {
+  let first3 = id;
+  const seen = /* @__PURE__ */ new Set([id]);
+  for (let p = links.get(first3)?.prev; p !== void 0 && !seen.has(p); p = links.get(first3)?.prev) {
+    seen.add(p);
+    first3 = p;
+  }
+  const chain = [first3];
+  for (let n = links.get(first3)?.next; n !== void 0 && !chain.includes(n); n = links.get(n)?.next) chain.push(n);
+  return chain;
+}
+
+// src/inspector/har.ts
+var HTTP = "HTTP/1.1";
+var headerList = (h) => Object.entries(h).map(([name, value]) => ({ name, value }));
+function harCookie(line) {
+  const c = parseSetCookie(line);
+  return {
+    name: c.name,
+    value: c.value,
+    ...typeof c.attrs.path === "string" && { path: c.attrs.path },
+    ...typeof c.attrs.domain === "string" && { domain: c.attrs.domain },
+    ...c.attrs.httponly !== void 0 && { httpOnly: true },
+    ...c.attrs.secure !== void 0 && { secure: true }
+  };
+}
+function entry(r, publicUrl) {
+  const url = new URL(r.path, publicUrl ?? "http://localhost");
+  const time = r.durationMs ?? 0;
+  const wait = Math.min(r.ttfbMs ?? time, time);
+  const reqType = r.reqHeaders["content-type"] ?? "";
+  return {
+    startedDateTime: new Date(r.startedAt).toISOString(),
+    time,
+    request: {
+      method: r.websocket ? "GET" : r.method,
+      url: url.toString(),
+      httpVersion: HTTP,
+      headers: headerList(r.reqHeaders),
+      queryString: [...url.searchParams].map(([name, value]) => ({ name, value })),
+      cookies: parseCookieHeader(r.reqHeaders.cookie ?? ""),
+      headersSize: -1,
+      bodySize: r.reqBodyBytes,
+      ...r.reqBody !== null && { postData: { mimeType: reqType, text: r.reqBody } }
+    },
+    response: {
+      status: r.status ?? 0,
+      statusText: "",
+      httpVersion: HTTP,
+      headers: headerList(r.resHeaders),
+      cookies: (r.resSetCookies ?? []).map(harCookie),
+      content: { size: r.bytes, mimeType: r.resHeaders["content-type"] ?? "", ...r.resBody !== null && { text: r.resBody } },
+      redirectURL: r.resHeaders.location ?? "",
+      headersSize: -1,
+      bodySize: r.bytes
+    },
+    cache: {},
+    timings: { send: 0, wait, receive: time - wait }
+  };
+}
+function toHar(records, publicUrlOf, version) {
+  const entries = [...records].sort((a, b) => a.id - b.id).map((r) => entry(r, publicUrlOf(r.tunnel)));
+  return { log: { version: "1.2", creator: { name: "duto", version }, entries } };
+}
+
 // src/inspector/server.ts
 var DEFAULT_PORT = 4141;
 var PORT_TRIES = 20;
@@ -1350,7 +1844,30 @@ var CURL_BYTES = "The curl body may differ from the one received (non-UTF-8 byte
 var sha = (s) => createHash2("sha256").update(s).digest();
 var constantTimeEqual = (a, b) => timingSafeEqual(sha(a), sha(b));
 var first = (v) => Array.isArray(v) ? v[0] : v;
-function listItem(r) {
+function hostOfUrl(url) {
+  if (!url) return null;
+  try {
+    return new URL(url).hostname.toLowerCase();
+  } catch {
+    return null;
+  }
+}
+function viewOf(session) {
+  const tunnels = session.getState().tunnels;
+  const find = (key) => tunnels.find((t) => t.key === key);
+  const urlOf = (key) => find(key)?.url ?? null;
+  const hostOf2 = (key) => hostOfUrl(urlOf(key));
+  return {
+    urlOf,
+    context: (key) => ({ publicHost: hostOf2(key), port: find(key)?.port ?? null }),
+    links: linkFlows(session.records.list(), hostOf2)
+  };
+}
+function isRedirect(r) {
+  return r.status !== null && r.status >= 300 && r.status < 400 && !!r.resHeaders.location;
+}
+function listItem(r, view) {
+  const link = view.links.get(r.id);
   return {
     id: r.id,
     tunnel: r.tunnel,
@@ -1361,12 +1878,35 @@ function listItem(r) {
     bytes: r.bytes,
     startedAt: r.startedAt,
     websocket: r.websocket,
+    origin: originOf(r),
+    issues: diagnose(r, view.context(r.tunnel)).length,
+    client: clientOf(r),
+    ...r.ttfbMs !== void 0 && { ttfbMs: r.ttfbMs },
+    ...isRedirect(r) && { location: r.resHeaders.location },
+    ...link?.prev !== void 0 && { prev: link.prev },
+    ...link?.next !== void 0 && { next: link.next },
     ...r.replayOf !== void 0 && { replayOf: r.replayOf },
     ...r.error !== void 0 && { error: r.error },
-    ...r.redirect !== void 0 && { rewritten: true }
+    ...r.redirect !== void 0 && { rewritten: true },
+    ...r.access !== void 0 && { access: r.access }
   };
 }
-function detail(r, session) {
+function queryOf(path) {
+  try {
+    return [...new URL(path, "http://x").searchParams].map(([name, value]) => ({ name, value }));
+  } catch {
+    return [];
+  }
+}
+function flowOf(r, session, view) {
+  const chain = flowChain(r.id, view.links);
+  if (chain.length < 2) return [];
+  return chain.flatMap((id) => {
+    const step = session.records.get(id);
+    return step ? [{ id, method: step.websocket ? "WS" : step.method, path: step.path, status: step.status }] : [];
+  });
+}
+function detail(r, session, view) {
   const tunnel2 = session.getState().tunnels.find((t) => t.key === r.tunnel);
   const tunnelOpen = !!tunnel2 && (tunnel2.status === "live" || tunnel2.status === "no-listener");
   let curl = null;
@@ -1377,9 +1917,14 @@ function detail(r, session) {
     if (r.reqRaw && !Buffer.from(r.reqBody ?? "", "utf8").equals(r.reqRaw)) curlNote = CURL_BYTES;
   }
   return {
-    ...listItem(r),
+    ...listItem(r, view),
     edge: edgeOf(r.reqHeaders),
     redirect: r.redirect ?? null,
+    issues: diagnose(r, view.context(r.tunnel)),
+    client: { ip: clientOf(r), country: r.reqHeaders["cf-ipcountry"] ?? null, userAgent: r.reqHeaders["user-agent"] ?? null },
+    query: queryOf(r.path),
+    cookies: { sent: parseCookieHeader(r.reqHeaders.cookie ?? ""), set: (r.resSetCookies ?? []).map(parseSetCookie) },
+    flow: flowOf(r, session, view),
     reqHeaders: r.reqHeaders,
     resHeaders: r.resHeaders,
     reqBody: r.reqBody,
@@ -1467,7 +2012,7 @@ data: ${JSON.stringify({ ids })}
     }
     const isEvents = method === "GET" && path === "/api/events";
     const detailId = /^\/api\/requests\/([1-9]\d{0,15})(\/replay)?$/.exec(path);
-    const known = method === "GET" && (path === "/api/session" || path === "/api/requests" || detailId && !detailId[2]) || isEvents || method === "POST" && detailId && detailId[2];
+    const known = method === "GET" && (path === "/api/session" || path === "/api/requests" || path === "/api/har" || detailId && !detailId[2]) || isEvents || method === "POST" && detailId && detailId[2];
     if (!known) return text(res, 404, "Not found.");
     if (!constantTimeEqual(headerToken, token) && !(isEvents && constantTimeEqual(queryToken, token))) return json(res, 403, { error: NO_TOKEN });
     if (isEvents) {
@@ -1479,15 +2024,25 @@ data: ${JSON.stringify({ ids })}
       return;
     }
     if (path === "/api/session") {
-      return json(res, 200, { tunnels: session.getState().tunnels.map((t) => ({ key: t.key, url: t.url, auth: !!t.auth })) });
+      return json(res, 200, { tunnels: session.getState().tunnels.map((t) => ({ key: t.key, url: t.url, auth: !!t.auth, port: t.port })) });
+    }
+    if (path === "/api/requests") {
+      const view = viewOf(session);
+      return json(res, 200, { items: session.records.list().map((r2) => listItem(r2, view)) });
+    }
+    if (path === "/api/har") {
+      const wanted = url2.searchParams.get("ids");
+      const ids = wanted === null ? null : new Set(wanted.split(",").map(Number));
+      const records = session.records.list().filter((r2) => !ids || ids.has(r2.id));
+      res.setHeader("Content-Disposition", 'attachment; filename="duto.har"');
+      return json(res, 200, toHar(records, viewOf(session).urlOf, CLI_VERSION));
     }
-    if (path === "/api/requests") return json(res, 200, { items: session.records.list().map(listItem) });
     const id = Number(detailId[1]);
     if (!Number.isSafeInteger(id)) return json(res, 404, { error: GONE });
     if (method === "POST") return json(res, 200, session.replay(id));
     const r = session.records.get(id);
     if (!r) return json(res, 404, { error: GONE });
-    return json(res, 200, detail(r, session));
+    return json(res, 200, detail(r, session, viewOf(session)));
   };
   const server = createServer((req, res) => {
     try {
@@ -2052,6 +2607,8 @@ async function startProxy(o) {
   }
   function trackResponse(id, started, up, reqCap) {
     const resCap = new Capture(TEXT2.test(up.headers["content-type"] ?? ""), max);
+    const ttfbMs = Date.now() - started;
+    const setCookies = up.headers["set-cookie"];
     let bytes = 0;
     up.on("data", (c) => {
       bytes += c.length;
@@ -2062,8 +2619,10 @@ async function startProxy(o) {
       () => o.store.update(id, {
         status: up.statusCode ?? null,
         durationMs: Date.now() - started,
+        ttfbMs,
         bytes,
         resHeaders: flat(up.headers),
+        ...setCookies?.length && { resSetCookies: setCookies },
         resBody: resCap.text(),
         truncated: !!reqCap?.truncated || resCap.truncated,
         resTruncated: resCap.truncated,
@@ -2664,8 +3223,8 @@ function listFlag(raw) {
 }
 function parseAuthFlags(raw) {
   const out = [];
-  for (const entry of listFlag(raw)) {
-    const r = parseCredential(entry);
+  for (const entry2 of listFlag(raw)) {
+    const r = parseCredential(entry2);
     if (!r.ok) fail2(r.reason === "password" ? "Password must be 8 to 128 characters" : r.reason === "user" ? "Invalid user: 1 to 128 characters, no spaces" : "Invalid credential: use user:password");
     if (out.some((c) => c.user === r.cred.user)) fail2(`Duplicate user "${r.cred.user}"`);
     out.push(r.cred);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dutodev/cli",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Expose a local port at https://<name>-<user>.duto.dev with one command.",
   "license": "MIT",
   "type": "module",