@dutodev/cli 0.5.0 → 0.7.0

package/README.md

@@ -145,13 +145,39 @@ Com os túneis no ar, o terminal mostra cada túnel (URL, destino local, requisi
 | `m` | Mostra o QR code do túnel selecionado, para abrir no celular |
 | `f` | Filtra por túnel, método, caminho ou status |
 | `↵` | Detalhes da requisição: cabeçalhos e o começo dos corpos |
+| `r` | No detalhe, reenvia a requisição ao serviço local |
+| `i` | Abre o inspetor no navegador |
 | `tab`, `↑↓` | Alterna entre túneis e requisições e move a seleção |
 | `q` ou Ctrl+C | Fecha os túneis e sai |
 
+**Reenviar uma requisição.** No detalhe (`↵`), a tecla `r` manda de novo ao serviço local o mesmo método, caminho, cabeçalhos e corpo que o app recebeu, já com as regras `host:` e `headers:` do túnel aplicadas e sem as credenciais do próprio Duto. O reenvio entra na lista marcado com `↻`, a tela pula para o detalhe dele (`↻ reenvio de #N`) e `esc` volta. Serve para depurar webhooks sem esperar o serviço externo mandar de novo; em especial, uma requisição que ficou com `503` porque o serviço local estava fora do ar pode ser reenviada assim que ele subir. Como os bytes são idênticos, assinaturas de webhook continuam válidas. Já apps que recusam eventos antigos (o Stripe tolera 5 minutos por padrão) vão rejeitar o reenvio depois dessa janela.
+
+Não dá para reenviar WebSocket, requisições barradas pela senha do túnel, corpos binários, corpos acima de 64 KB, requisições cujo corpo não terminou de chegar ou quando o túnel já não está aberto; nesses casos uma linha explica o motivo. O reenvio não existe no log simples (sem terminal interativo).
+
 Se o túnel está no ar mas nada responde na porta local, quem abrir o endereço no navegador vê uma página do Duto que volta sozinha quando o serviço sobe. Ela espera por uma conexão só (SSE): a CLI checa a porta na sua máquina e avisa a página assim que o serviço responde, sem recarregar de tempos em tempos. Clientes que não são navegador (`curl`, APIs) recebem a mesma resposta em texto. Em ambos os casos o status é `503` com `Retry-After: 3`. Os caminhos `/__duto/…` são reservados para isso e nunca chegam ao seu app.
 
 Fora de um terminal interativo (pipe, CI) ou com `--no-ui`, a CLI imprime um log simples. No Windows a tela cheia vem desligada; use `--ui` para tentar.
 
+## Inspetor no navegador
+
+Junto com a sessão, a CLI sobe um inspetor local: uma página no navegador com as requisições chegando ao vivo, o JSON formatado e botões para copiar e reenviar. Ele é mais confortável que o terminal para corpos grandes.
+
+- **Como abrir.** Na tela cheia, a tecla `i` abre o navegador já com o endereço certo, e a tela mostra `inspetor  http://127.0.0.1:<porta>`. No modo `plain` (pipe, CI, `--no-ui`), a CLI imprime `inspetor: <url>?t=<token>`; copie esse endereço inteiro.
+- **Porta.** O padrão é `127.0.0.1:4141`. Se estiver ocupada, a CLI tenta as seguintes até a 4161 e, por fim, qualquer porta livre. O inspetor escuta só em `127.0.0.1`: não é acessível por outras máquinas da rede.
+- **Token.** O endereço leva um token da sessão (`?t=...`). Ele existe para que outros sites abertos no seu navegador não consigam ler nem reenviar as suas requisições. Por isso a tela cheia não exibe o token; use a tecla `i`.
+- **Desligar.** `--no-inspect` não sobe o inspetor. No modo `plain` o endereço com token vai para a saída; se ela vai para um log compartilhado, use `--no-inspect`.
+- **Nada vai para o disco.** As requisições ficam só na memória da sessão e somem quando ela termina. Funciona sem internet.
+
+A página tem a lista à esquerda e o detalhe à direita, com as abas **Corpo**, **Cabeçalhos**, **Resposta** e **Raw**. O JSON aparece reindentado, exatamente como chegou, com os erros de sintaxe destacados.
+
+| Ação | Como |
+|---|---|
+| Copiar o corpo | **Copiar corpo** copia o corpo da aba ativa |
+| Copiar como `curl` | **Copiar como curl**; em túnel com senha, o comando leva `-H 'X-Duto-Auth: <usuário>:SENHA'` e você troca `SENHA` pela senha |
+| Reenviar | **↻ Reenviar** ou a tecla `r`, com as mesmas regras do terminal |
+| Filtrar | `/` foca o filtro |
+| Navegar | `↑` e `↓` movem a seleção |
+
 ## Comandos
 
 | Comando | O que faz |
@@ -171,6 +197,7 @@ Fora de um terminal interativo (pipe, CI) ou com `--no-ui`, a CLI imprime um log
 | `--auth <usuario:senha>` | Pede usuário e senha para abrir o endereço (repetível) |
 | `--permitir <faixa>` | Com `--auth`: IP, faixa ou nome (`stripe`, `github`) que entra sem senha (repetível) |
 | `--no-ui` / `--ui` | Desliga / força a tela cheia |
+| `--no-inspect` | Não sobe o inspetor no navegador (a tecla `i` passa a mostrar "Inspetor desligado (--no-inspect).") |
 
 ## Configuração
 

package/dist/{chunk-26EQC6HB.js → chunk-74IJFYGT.js}

@@ -38,6 +38,37 @@ function validateName(name, max = MAX_NAME) {
   return { ok: true };
 }
 
+// src/ui/theme.ts
+var C = {
+  signal: "#2dd4bf",
+  muted: "#8a8f8b",
+  strong: "#f3f4f1",
+  ok: "#4ade80",
+  warn: "#facc15",
+  err: "#f87171"
+};
+var TUNNEL_COLORS = ["#93c5fd", "#c4b5fd", "#facc15", "#4ade80", "#f9a8d4", "#fdba74", "#67e8f9"];
+function tunnelColor(index) {
+  return TUNNEL_COLORS[index % TUNNEL_COLORS.length];
+}
+function fit(text, width) {
+  if (width <= 0) return "";
+  return text.length > width ? `${text.slice(0, Math.max(0, width - 1))}\u2026` : text.padEnd(width);
+}
+
+// src/session/bodyNote.ts
+var TRUNCATED_NOTE = "Corpo cortado em 64 KB.";
+function bodyNote(r, side) {
+  if (side === "req") {
+    if (r.reqBodyBytes === 0) return "Sem corpo.";
+    if (r.reqBody === null && !r.reqTruncated) return "Corpo bin\xE1rio; n\xE3o \xE9 guardado.";
+    return null;
+  }
+  if (r.bytes === 0) return "Sem corpo.";
+  if (r.resBody === null) return "Corpo bin\xE1rio; n\xE3o \xE9 guardado.";
+  return null;
+}
+
 // src/ui/format.ts
 function statusColor(status) {
   if (status === null) return "muted";
@@ -66,6 +97,11 @@ function localLabel(t) {
 export {
   normalizeName,
   validateName,
+  C,
+  tunnelColor,
+  fit,
+  TRUNCATED_NOTE,
+  bodyNote,
   statusColor,
   formatDuration,
   formatBytes,

package/dist/{fullscreen-DKIFHB6J.js → fullscreen-YK365XSO.js}

@@ -1,13 +1,18 @@
 #!/usr/bin/env node
 import {
+  C,
+  TRUNCATED_NOTE,
+  bodyNote,
+  fit,
   formatBytes,
   formatDuration,
   formatTime,
   localLabel,
   normalizeName,
   statusColor,
+  tunnelColor,
   validateName
-} from "./chunk-26EQC6HB.js";
+} from "./chunk-74IJFYGT.js";
 
 // src/ui/fullscreen.tsx
 import { render } from "ink";
@@ -18,30 +23,10 @@ import { Box as Box5, Text as Text6, useInput, useStdout } from "ink";
 
 // src/ui/Detail.tsx
 import { Box, Text } from "ink";
-
-// src/ui/theme.ts
-var C = {
-  signal: "#2dd4bf",
-  muted: "#8a8f8b",
-  strong: "#f3f4f1",
-  ok: "#4ade80",
-  warn: "#facc15",
-  err: "#f87171"
-};
-var TUNNEL_COLORS = ["#93c5fd", "#c4b5fd", "#facc15", "#4ade80", "#f9a8d4", "#fdba74", "#67e8f9"];
-function tunnelColor(index) {
-  return TUNNEL_COLORS[index % TUNNEL_COLORS.length];
-}
-function fit(text, width) {
-  if (width <= 0) return "";
-  return text.length > width ? `${text.slice(0, Math.max(0, width - 1))}\u2026` : text.padEnd(width);
-}
-
-// src/ui/Detail.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var MAX_HEADERS = 12;
 var MAX_BODY_LINES = 8;
-function Section({ title, headers, body, truncated }) {
+function Section({ title, headers, body, truncated, note: note2 }) {
   const entries = Object.entries(headers);
   const lines = body ? body.split("\n") : [];
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
@@ -59,9 +44,9 @@ function Section({ title, headers, body, truncated }) {
       entries.length - MAX_HEADERS,
       " cabe\xE7alhos"
     ] }),
-    body === null ? /* @__PURE__ */ jsx(Text, { color: C.muted, children: "(corpo bin\xE1rio ou n\xE3o capturado)" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    body === null ? /* @__PURE__ */ jsx(Text, { color: C.muted, children: note2 ?? "" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       lines.slice(0, MAX_BODY_LINES).map((l, i) => /* @__PURE__ */ jsx(Text, { wrap: "truncate-end", children: l }, i)),
-      (lines.length > MAX_BODY_LINES || truncated) && /* @__PURE__ */ jsx(Text, { color: C.muted, children: truncated ? "\u2026 cortado em 64 KB" : "\u2026" })
+      (lines.length > MAX_BODY_LINES || truncated) && /* @__PURE__ */ jsx(Text, { color: C.muted, children: truncated ? TRUNCATED_NOTE : "\u2026" })
     ] })
   ] });
 }
@@ -84,12 +69,16 @@ function Detail({ record }) {
         record.tunnel
       ] })
     ] }),
+    record.replayOf !== void 0 && /* @__PURE__ */ jsxs(Text, { color: C.muted, children: [
+      "\u21BB reenvio de #",
+      record.replayOf
+    ] }),
     record.error && /* @__PURE__ */ jsx(Text, { color: C.err, children: record.error }),
-    /* @__PURE__ */ jsx(Section, { title: "Requisi\xE7\xE3o", headers: record.reqHeaders, body: record.reqBody, truncated: record.truncated }),
-    /* @__PURE__ */ jsx(Section, { title: "Resposta", headers: record.resHeaders, body: record.resBody, truncated: record.truncated }),
+    /* @__PURE__ */ jsx(Section, { title: "Requisi\xE7\xE3o", headers: record.reqHeaders, body: record.reqBody, truncated: record.reqTruncated, note: bodyNote(record, "req") }),
+    /* @__PURE__ */ jsx(Section, { title: "Resposta", headers: record.resHeaders, body: record.resBody, truncated: record.resTruncated, note: bodyNote(record, "res") }),
     /* @__PURE__ */ jsxs(Text, { color: C.muted, children: [
       "\n",
-      "esc volta para a lista"
+      "r reenvia \xB7 esc volta para a lista"
     ] })
   ] });
 }
@@ -189,7 +178,7 @@ function RequestList(props) {
   const start = Math.max(0, Math.min(selected - Math.floor(height / 2), records.length - height));
   const visible = records.slice(start, start + height);
   const accessW = Math.max(0, ...visible.map((r) => (accessLabel(r.access)?.text.length ?? -1) + 1));
-  const pathW = Math.max(10, width - 52 - accessW);
+  const pathW = Math.max(10, width - 54 - accessW);
   const title = props.filter ? `REQUISI\xC7\xD5ES \xB7 filtro: ${props.filter} ` : "REQUISI\xC7\xD5ES ";
   return /* @__PURE__ */ jsxs4(Box3, { flexDirection: "column", children: [
     /* @__PURE__ */ jsx4(Text4, { color: C.muted, children: title + "\u2500".repeat(Math.max(0, width - title.length)) }),
@@ -204,6 +193,7 @@ function RequestList(props) {
         "  ",
         /* @__PURE__ */ jsx4(Text4, { color: tunnelColor(props.tunnelIndex(r.tunnel)), children: fit(r.tunnel, 9) }),
         " ",
+        /* @__PURE__ */ jsx4(Text4, { color: C.muted, children: r.replayOf !== void 0 ? "\u21BB " : "  " }),
         /* @__PURE__ */ jsx4(Text4, { bold: true, children: fit(method, 5) }),
         fit(r.path, pathW),
         " ",
@@ -286,13 +276,14 @@ var KEYS = [
   ["n", "novo t\xFAnel"],
   ["c", "copiar URL"],
   ["o", "abrir no navegador"],
+  ["i", "inspetor"],
   ["m", "QR no celular"],
   ["f", "filtrar"],
   ["\u21B5", "detalhes"],
   ["tab", "foco"],
   ["q", "sair"]
 ];
-function App({ session, version, system, onExit }) {
+function App({ session, version, system, onExit, inspector = null, inspectorError }) {
   const subState = useCallback((fn) => session.subscribe(fn), [session]);
   const subRecords = useCallback((fn) => session.records.subscribe(fn), [session]);
   const state = useSyncExternalStore(subState, () => session.getState());
@@ -305,7 +296,7 @@ function App({ session, version, system, onExit }) {
   const [focus, setFocus] = useState("requests");
   const [selReq, setSelReq] = useState(0);
   const [selTun, setSelTun] = useState(0);
-  const [message, setMessage] = useState(null);
+  const [message, setMessage] = useState(inspectorError ? { text: `Inspetor n\xE3o subiu: ${inspectorError}`, tone: "warn" } : null);
   const [now, setNow] = useState(() => Date.now());
   const quitting = useRef(false);
   const records = useMemo(() => {
@@ -316,6 +307,9 @@ function App({ session, version, system, onExit }) {
   useEffect(() => {
     if (selReq >= records.length) setSelReq(Math.max(0, records.length - 1));
   }, [records.length, selReq]);
+  useEffect(() => {
+    if (mode.kind === "detail" && !all.some((r) => r.id === mode.id)) setMode({ kind: "list" });
+  }, [mode, all]);
   useEffect(() => {
     if (!message) return;
     const t = setTimeout(() => setMessage(null), 4e3);
@@ -342,6 +336,11 @@ function App({ session, version, system, onExit }) {
     await session.stop();
     onExit();
   }
+  async function openInspector() {
+    if (!inspector) return setMessage({ text: "Inspetor desligado (--no-inspect).", tone: "warn" });
+    const ok = await system.open(inspector.openUrl);
+    setMessage(ok ? { text: "Abrindo o inspetor", tone: "signal" } : { text: "N\xE3o consegui abrir o navegador.", tone: "warn" });
+  }
   async function act(kind) {
     const t = currentTunnel();
     if (!t?.url) return setMessage({ text: "Esse t\xFAnel ainda n\xE3o tem URL.", tone: "warn" });
@@ -396,7 +395,12 @@ function App({ session, version, system, onExit }) {
       return;
     }
     if (mode.kind === "detail") {
-      if (key.escape || key.return || input === "q") setMode({ kind: "list" });
+      if (key.escape || key.return || input === "q") return setMode({ kind: "list" });
+      if (input === "r") {
+        const res = session.replay(mode.id);
+        if (res.ok) setMode({ kind: "detail", id: res.id });
+        else setMessage({ text: res.reason, tone: "warn" });
+      }
       return;
     }
     if (mode.kind === "qr") {
@@ -419,18 +423,19 @@ function App({ session, version, system, onExit }) {
       else setSelReq((i) => Math.min(Math.max(0, i + d), Math.max(0, records.length - 1)));
       return;
     }
-    if (key.return && focus === "requests" && records[selReq]) return setMode({ kind: "detail" });
+    if (key.return && focus === "requests" && records[selReq]) return setMode({ kind: "detail", id: records[selReq].id });
     if (key.escape && filter) return setFilter("");
     if (input === "c") return void act("copy");
     if (input === "o") return void act("open");
+    if (input === "i") return void openInspector();
     if (input === "m") return showQr();
     if (input === "f") return setMode({ kind: "filter", value: filter });
     if (input === "n") return setMode({ kind: "port", value: "" });
   });
   const live = state.tunnels.filter((t) => t.status === "live").length;
   const conn = state.connection === "online" ? { text: "conectado \u25CF", color: C.signal } : state.connection === "connecting" ? { text: "conectando\u2026", color: C.muted } : { text: "reconectando\u2026", color: C.warn };
-  const listHeight = Math.max(3, rows - state.tunnels.length - 9);
-  const selected = records[selReq];
+  const listHeight = Math.max(3, rows - state.tunnels.length - (inspector ? 10 : 9));
+  const detailRecord = mode.kind === "detail" ? all.find((r) => r.id === mode.id) : void 0;
   const qrTunnel = mode.kind === "qr" ? state.tunnels.find((t) => t.key === mode.key) : void 0;
   return /* @__PURE__ */ jsxs6(Box5, { flexDirection: "column", width, children: [
     /* @__PURE__ */ jsxs6(Box5, { justifyContent: "space-between", children: [
@@ -456,8 +461,9 @@ function App({ session, version, system, onExit }) {
     ] }),
     /* @__PURE__ */ jsx6(Text6, { children: " " }),
     /* @__PURE__ */ jsx6(TunnelTable, { tunnels: state.tunnels, selected: selTun, focused: focus === "tunnels" }),
+    inspector && /* @__PURE__ */ jsx6(Text6, { color: C.muted, children: `inspetor  ${inspector.url}` }),
     /* @__PURE__ */ jsx6(Text6, { children: " " }),
-    mode.kind === "detail" && selected ? /* @__PURE__ */ jsx6(Detail, { record: selected }) : mode.kind === "qr" && qrTunnel ? /* @__PURE__ */ jsx6(QrView, { tunnel: qrTunnel, link: mode.link, now }) : /* @__PURE__ */ jsx6(RequestList, { records, tunnelIndex, selected: selReq, focused: focus === "requests", height: listHeight, width, filter }),
+    mode.kind === "detail" && detailRecord ? /* @__PURE__ */ jsx6(Detail, { record: detailRecord }) : mode.kind === "qr" && qrTunnel ? /* @__PURE__ */ jsx6(QrView, { tunnel: qrTunnel, link: mode.link, now }) : /* @__PURE__ */ jsx6(RequestList, { records, tunnelIndex, selected: selReq, focused: focus === "requests", height: listHeight, width, filter }),
     /* @__PURE__ */ jsx6(Text6, { children: " " }),
     mode.kind === "filter" && /* @__PURE__ */ jsx6(Prompt, { label: "Filtrar (t\xFAnel, m\xE9todo, caminho ou status):", value: mode.value, hint: "\u21B5 aplica \xB7 esc cancela" }),
     mode.kind === "port" && /* @__PURE__ */ jsx6(Prompt, { label: "Novo t\xFAnel \u2014 porta local:", value: mode.value, hint: "\u21B5 continua \xB7 esc cancela" }),
@@ -541,7 +547,7 @@ var realSystem = {
 
 // src/ui/fullscreen.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
-function runFullscreen(session, specs, version) {
+function runFullscreen(session, specs, version, inspector, inspectorError) {
   return withFullscreen(
     process.stdout,
     (signal) => new Promise((resolve) => {
@@ -552,7 +558,7 @@ function runFullscreen(session, specs, version) {
         app.unmount();
         resolve(code);
       };
-      const app = render(/* @__PURE__ */ jsx7(App, { session, version, system: realSystem, onExit: () => finish(0) }), { exitOnCtrlC: false });
+      const app = render(/* @__PURE__ */ jsx7(App, { session, version, system: realSystem, inspector, inspectorError, onExit: () => finish(0) }), { exitOnCtrlC: false });
       signal.addEventListener("abort", () => void session.stop().then(() => finish(0)), { once: true });
       session.start(specs).catch(() => void 0);
     })