@dutodev/cli 0.4.6 → 0.6.0

package/README.md

@@ -93,6 +93,47 @@ Em todos os casos, cadastre `https://<nome>-<usuário>.duto.dev/<caminho de reto
 
 **Sobre o `X-Forwarded-*`.** `X-Forwarded-Host`, `X-Forwarded-Proto` e `X-Forwarded-For` são uma convenção antiga entre proxies reversos para contar ao app o que o cliente pediu de verdade. A versão padronizada é o cabeçalho `Forwarded` (RFC 7239), menos usado na prática. Frameworks costumam ler esses cabeçalhos só quando o proxy é marcado como confiável (`trusted proxies`, `trust proxy`, `USE_X_FORWARDED_HOST`), então o efeito de `headers:` depende de como o app está configurado. Por outro lado, se um app lê o `X-Forwarded-Host` sem essa checagem, qualquer cliente pode forjá-lo em produção. Vale garantir que o proxy da frente sobrescreva ou remova esse cabeçalho.
 
+## Senha no túnel
+
+Sem senha, qualquer pessoa com a URL acessa o seu ambiente de desenvolvimento. Para proteger um túnel, coloque `auth` (e, se precisar, `permitir`) no `duto.yml`:
+
+```yaml
+tunnels:
+  backend:
+    port: 3000
+    auth:
+      - cliente:${SENHA_CLIENTE}
+      - ana:${SENHA_ANA}
+    permitir: [stripe, github, 203.0.113.0/24]
+```
+
+- `auth` é uma lista de `usuario:senha`. Use um par por pessoa. O primeiro `:` separa o usuário da senha; a senha tem de 8 a 128 caracteres.
+- `${VAR}` lê o valor de uma variável de ambiente. Use sempre: assim a senha não vai para o git junto com o `duto.yml`. Se a variável não existe, a CLI para com o número da linha. O nome só pode ter letras maiúsculas, dígitos e `_` (`${SENHA_ANA}`); qualquer outra coisa, como `${senha}`, fica no texto sem trocar e vira parte da senha.
+- Na lista de uma linha, entre colchetes, o `${VAR}` precisa de aspas (`auth: ["cliente:${SENHA_CLIENTE}"]`), porque `{` é um caractere especial do YAML. Na lista em bloco, como acima, não precisa.
+- Na linha de comando, para um túnel só: `duto 3000 --auth cliente:minhasenha1 --permitir stripe`. As duas opções se repetem. Elas só valem com a porta; junto com um `duto.yml`, coloque-as no arquivo.
+- Cuidado: a senha passada em `--auth` fica no histórico do shell e aparece para quem rodar `ps` na máquina. Para algo além de um teste rápido, prefira o `duto.yml` com `${VAR}`.
+
+Quem usa o túnel entra de um destes jeitos:
+
+| Quem | Como |
+|---|---|
+| Pessoa no navegador | Abre a URL, vê a página "Este túnel tem senha" e entra com usuário e senha |
+| Celular | Escaneia o QR code (tecla `m`, veja abaixo) e entra sem digitar |
+| `curl`, Postman, scripts | `curl -u cliente:senha https://backend-<usuário>.duto.dev/` (`Authorization: Basic`) |
+| API que já usa `Authorization: Bearer` | Cabeçalho `X-Duto-Auth: cliente:senha`, e o `Bearer` segue intacto até o app |
+
+Sem credencial, um navegador é levado à página de entrada e os outros clientes recebem `401`. O app local nunca recebe a credencial do Duto: o `Authorization: Basic` que confere, o `X-Duto-Auth` e o cookie do túnel são removidos antes de repassar a requisição (os outros cookies chegam). Um `Authorization: Bearer` do próprio app passa sem mudança.
+
+**Sair e sessão.** No navegador, o login vira um cookie que vale só para aquele túnel. Para sair, abra `/__duto/sair`: ele apaga o cookie e volta para a página de entrada. O cookie dura até o navegador fechar ou a CLI parar. Reiniciar a CLI desconecta todo mundo, porque a chave que assina os cookies é nova a cada sessão. O cookie só vale em requisições do próprio túnel: uma página de outra origem (outro túnel, outro site) que chame o túnel precisa mandar `X-Duto-Auth` ou `Authorization: Basic`. Por isso, abrir o túnel a partir de um link em outro endereço `*.duto.dev` (o painel ou outro túnel) pede a senha de novo; um link vindo de fora (e-mail, chat) ou a URL digitada entra direto.
+
+**QR code.** Com a tela cheia aberta, a tecla `m` mostra o QR do túnel selecionado no lugar da lista de requisições. Num túnel sem senha, o QR leva a URL do túnel. Num túnel com senha, leva um link que entra direto, sem digitar nada, como o primeiro usuário da lista `auth`. Esse link vale por 5 minutos e só para um aparelho: depois de aberto uma vez, ou passado o prazo, cai na página de entrada. Na tela do QR, `g` gera um link novo (e invalida o anterior) e `esc` volta para a lista.
+
+**CORS.** Um frontend em outro domínio continua funcionando. O preflight (`OPTIONS` com `Origin` e `Access-Control-Request-Method`, sem corpo) passa sem senha, mas dele só voltam o status e os cabeçalhos de CORS da resposta do app. Quando o app responde com CORS, o Duto acrescenta `X-Duto-Auth` ao `Access-Control-Allow-Headers`. Você não muda nada no app. A resposta `401` também leva os cabeçalhos de CORS, para o frontend ler o erro em vez de ver uma falha de rede.
+
+**Webhooks.** `permitir` libera, sem senha, quem chega de certas origens: os nomes `stripe` e `github` (a CLI baixa a lista oficial de IPs deles, guarda por um dia em `~/.duto/` e usa uma cópia embutida se a rede falhar) e faixas de IP, IPv4 ou IPv6, como `203.0.113.0/24`. `permitir` só vale junto com `auth`.
+
+Na tela, os túneis com senha aparecem com um cadeado (🔒) ao lado da URL. A lista de requisições mostra o usuário que entrou e o motivo das liberadas por `permitir`; as barradas com `401` levam "sem senha", e os navegadores barrados aparecem com o redirecionamento `303` para a página de entrada. Um túnel aberto com `n` na tela cheia não tem senha.
+
 ## A tela
 
 Com os túneis no ar, o terminal mostra cada túnel (URL, destino local, requisições e erros) e as requisições chegando ao vivo: método, caminho, status, tempo e tamanho. WebSocket funciona normalmente e aparece como `WS 101`.
@@ -101,11 +142,17 @@ Com os túneis no ar, o terminal mostra cada túnel (URL, destino local, requisi
 |---|---|
 | `n` | Abre mais um túnel (só nesta sessão) |
 | `c` / `o` | Copia / abre no navegador a URL do túnel selecionado |
+| `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 |
 | `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.
@@ -126,6 +173,8 @@ Fora de um terminal interativo (pipe, CI) ou com `--no-ui`, a CLI imprime um log
 | `--name <nome>` | Endereço fixo `<nome>-<usuário>.duto.dev` |
 | `--host <host>` | Host que o serviço local recebe no lugar do público |
 | `--no-rewrite-redirects` | Com `--host`, mantém os redirecionamentos como o serviço mandou |
+| `--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 |
 
 ## Configuração

package/dist/{fullscreen-EPWB53EP.js → fullscreen-7P5GBCQX.js}

@@ -14,7 +14,7 @@ import { render } from "ink";
 
 // src/ui/App.tsx
 import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { Box as Box4, Text as Text5, useInput, useStdout } from "ink";
+import { Box as Box5, Text as Text6, useInput, useStdout } from "ink";
 
 // src/ui/Detail.tsx
 import { Box, Text } from "ink";
@@ -84,12 +84,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 }),
+    /* @__PURE__ */ jsx(Section, { title: "Resposta", headers: record.resHeaders, body: record.resBody, truncated: record.resTruncated }),
     /* @__PURE__ */ jsxs(Text, { color: C.muted, children: [
       "\n",
-      "esc volta para a lista"
+      "r reenvia \xB7 esc volta para a lista"
     ] })
   ] });
 }
@@ -107,43 +111,121 @@ function Prompt({ label, value, hint }) {
   ] });
 }
 
-// src/ui/RequestList.tsx
+// src/ui/QrView.tsx
 import { Box as Box2, Text as Text3 } from "ink";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+
+// src/ui/qr.ts
+import qrcode from "qrcode-generator";
+var MARGEM = 2;
+function qrLines(text) {
+  const qr = qrcode(0, "L");
+  qr.addData(text);
+  qr.make();
+  const n = qr.getModuleCount();
+  const size = n + MARGEM * 2;
+  const dark = (r, c) => {
+    const rr = r - MARGEM;
+    const cc = c - MARGEM;
+    return rr >= 0 && cc >= 0 && rr < n && cc < n && qr.isDark(rr, cc);
+  };
+  const lines = [];
+  for (let r = 0; r < size; r += 2) {
+    let line = "";
+    for (let c = 0; c < size; c++) {
+      const top = dark(r, c);
+      const bottom = dark(r + 1, c);
+      line += top && bottom ? "\u2588" : top ? "\u2580" : bottom ? "\u2584" : " ";
+    }
+    lines.push(line);
+  }
+  return lines;
+}
+
+// src/ui/QrView.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function countdown(ms) {
+  const s = Math.ceil(ms / 1e3);
+  return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
+}
+function QrView({ tunnel, link, now }) {
+  const lines = qrLines(link.url);
+  const left = link.expiresAt === null ? null : link.expiresAt - now;
+  const expired = left !== null && Math.ceil(left / 1e3) <= 0;
+  return /* @__PURE__ */ jsxs3(Box2, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx3(Text3, { color: C.muted, children: "Abra no celular" }),
+    /* @__PURE__ */ jsxs3(Box2, { children: [
+      /* @__PURE__ */ jsx3(Box2, { flexDirection: "column", marginRight: 3, children: lines.map((l, i) => /* @__PURE__ */ jsx3(Text3, { backgroundColor: "white", color: "black", children: l }, i)) }),
+      /* @__PURE__ */ jsxs3(Box2, { flexDirection: "column", children: [
+        /* @__PURE__ */ jsxs3(Text3, { children: [
+          /* @__PURE__ */ jsx3(Text3, { bold: true, children: tunnel.key }),
+          " ",
+          /* @__PURE__ */ jsxs3(Text3, { color: C.muted, children: [
+            "\xB7 ",
+            tunnel.url
+          ] })
+        ] }),
+        left !== null && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+          /* @__PURE__ */ jsx3(Text3, { children: " " }),
+          /* @__PURE__ */ jsx3(Text3, { children: "\u{1F512} Este t\xFAnel tem senha." }),
+          /* @__PURE__ */ jsx3(Text3, { color: C.muted, children: "O QR entra direto, sem digitar a senha." }),
+          /* @__PURE__ */ jsx3(Text3, { color: C.muted, children: "Vale por 5 minutos e s\xF3 para um aparelho." }),
+          /* @__PURE__ */ jsx3(Text3, { children: " " }),
+          expired ? /* @__PURE__ */ jsx3(Text3, { color: C.warn, children: "Expirou. Aperte g para gerar outro." }) : /* @__PURE__ */ jsx3(Text3, { color: C.signal, children: `Expira em ${countdown(left)}` })
+        ] }),
+        /* @__PURE__ */ jsx3(Text3, { children: " " }),
+        /* @__PURE__ */ jsx3(Text3, { color: C.muted, children: left !== null ? "g gerar outro \xB7 esc voltar" : "esc voltar" })
+      ] })
+    ] })
+  ] });
+}
+
+// src/ui/RequestList.tsx
+import { Box as Box3, Text as Text4 } from "ink";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function accessLabel(a) {
+  if (!a) return null;
+  if (a.kind === "user") return { text: a.user, color: C.muted };
+  if (a.kind === "allow") return { text: a.reason, color: C.muted };
+  return { text: "sem senha", color: C.warn };
+}
 function RequestList(props) {
   const { records, selected, focused, height, width } = props;
   const start = Math.max(0, Math.min(selected - Math.floor(height / 2), records.length - height));
   const visible = records.slice(start, start + height);
-  const pathW = Math.max(10, width - 52);
+  const accessW = Math.max(0, ...visible.map((r) => (accessLabel(r.access)?.text.length ?? -1) + 1));
+  const pathW = Math.max(10, width - 54 - accessW);
   const title = props.filter ? `REQUISI\xC7\xD5ES \xB7 filtro: ${props.filter} ` : "REQUISI\xC7\xD5ES ";
-  return /* @__PURE__ */ jsxs3(Box2, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx3(Text3, { color: C.muted, children: title + "\u2500".repeat(Math.max(0, width - title.length)) }),
-    records.length === 0 ? /* @__PURE__ */ jsx3(Text3, { color: C.muted, children: props.filter ? "Nenhuma requisi\xE7\xE3o com esse filtro." : "Nenhuma requisi\xE7\xE3o ainda. Elas aparecem aqui assim que chegarem." }) : visible.map((r, i) => {
+  return /* @__PURE__ */ jsxs4(Box3, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx4(Text4, { color: C.muted, children: title + "\u2500".repeat(Math.max(0, width - title.length)) }),
+    records.length === 0 ? /* @__PURE__ */ jsx4(Text4, { color: C.muted, children: props.filter ? "Nenhuma requisi\xE7\xE3o com esse filtro." : "Nenhuma requisi\xE7\xE3o ainda. Elas aparecem aqui assim que chegarem." }) : visible.map((r, i) => {
       const sel = focused && start + i === selected;
       const method = r.websocket ? "WS" : r.method;
       const status = r.status === null ? "\u2026" : String(r.status);
       const tail = r.websocket && r.status === 101 ? "aberto" : r.durationMs === null ? "" : formatDuration(r.durationMs);
-      return /* @__PURE__ */ jsxs3(Text3, { inverse: sel, wrap: "truncate-end", children: [
-        /* @__PURE__ */ jsx3(Text3, { color: C.muted, children: formatTime(r.startedAt) }),
+      const acc = accessLabel(r.access);
+      return /* @__PURE__ */ jsxs4(Text4, { inverse: sel, wrap: "truncate-end", children: [
+        /* @__PURE__ */ jsx4(Text4, { color: C.muted, children: formatTime(r.startedAt) }),
         "  ",
-        /* @__PURE__ */ jsx3(Text3, { color: tunnelColor(props.tunnelIndex(r.tunnel)), children: fit(r.tunnel, 9) }),
+        /* @__PURE__ */ jsx4(Text4, { color: tunnelColor(props.tunnelIndex(r.tunnel)), children: fit(r.tunnel, 9) }),
         " ",
-        /* @__PURE__ */ jsx3(Text3, { bold: true, children: fit(method, 5) }),
+        /* @__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),
         " ",
-        /* @__PURE__ */ jsx3(Text3, { color: C[statusColor(r.status)], children: status.padStart(3) }),
+        /* @__PURE__ */ jsx4(Text4, { color: C[statusColor(r.status)], children: status.padStart(3) }),
         " ",
-        /* @__PURE__ */ jsx3(Text3, { color: C.muted, children: tail.padStart(7) }),
+        /* @__PURE__ */ jsx4(Text4, { color: C.muted, children: tail.padStart(7) }),
         " ",
-        /* @__PURE__ */ jsx3(Text3, { color: C.muted, children: r.websocket ? "" : formatBytes(r.bytes).padStart(8) })
+        /* @__PURE__ */ jsx4(Text4, { color: C.muted, children: r.websocket ? "" : formatBytes(r.bytes).padStart(8) }),
+        acc ? /* @__PURE__ */ jsx4(Text4, { color: acc.color, children: ` ${acc.text}` }) : null
       ] }, r.id);
     })
   ] });
 }
 
 // src/ui/TunnelTable.tsx
-import { Box as Box3, Text as Text4 } from "ink";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Box as Box4, Text as Text5 } from "ink";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function note(t) {
   if (t.status === "failed") return { text: t.error ?? "falhou", color: C.err };
   if (t.status === "no-listener") return { text: `nada escutando na ${t.port}`, color: C.warn };
@@ -161,12 +243,15 @@ function TunnelTable({ tunnels, selected, focused }) {
   const nameW = Math.max(6, ...tunnels.map((t) => t.key.length)) + 1;
   const urlW = Math.max(12, ...tunnels.map((t) => (t.url ?? "").length)) + 1;
   const localW = Math.max(15, ...tunnels.map((t) => localLabel(t).length));
-  return /* @__PURE__ */ jsxs4(Box3, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsxs4(Text4, { color: C.muted, children: [
+  const anyAuth = tunnels.some((t) => t.auth);
+  const lock = (t) => !anyAuth ? "" : t.auth ? "\u{1F512}" : "  ";
+  return /* @__PURE__ */ jsxs5(Box4, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs5(Text5, { color: C.muted, children: [
       "  ",
       fit("T\xDANEL", nameW),
       " ",
       fit("URL", urlW),
+      anyAuth ? "  " : "",
       " ",
       fit("LOCAL", localW),
       " ",
@@ -178,33 +263,35 @@ function TunnelTable({ tunnels, selected, focused }) {
       const d = dot(t);
       const n = note(t);
       const sel = focused && i === selected;
-      return /* @__PURE__ */ jsxs4(Box3, { flexDirection: "column", children: [
-        /* @__PURE__ */ jsxs4(Text4, { inverse: sel, wrap: "truncate-end", children: [
-          /* @__PURE__ */ jsx4(Text4, { color: d.color, children: d.char }),
+      return /* @__PURE__ */ jsxs5(Box4, { flexDirection: "column", children: [
+        /* @__PURE__ */ jsxs5(Text5, { inverse: sel, wrap: "truncate-end", children: [
+          /* @__PURE__ */ jsx5(Text5, { color: d.color, children: d.char }),
           " ",
-          /* @__PURE__ */ jsx4(Text4, { bold: true, children: fit(t.key, nameW) }),
+          /* @__PURE__ */ jsx5(Text5, { bold: true, children: fit(t.key, nameW) }),
           " ",
           fit(t.url ?? "\u2014", urlW),
+          lock(t),
           " ",
-          /* @__PURE__ */ jsx4(Text4, { color: C.muted, children: fit(localLabel(t), localW) }),
+          /* @__PURE__ */ jsx5(Text5, { color: C.muted, children: fit(localLabel(t), localW) }),
           " ",
-          /* @__PURE__ */ jsx4(Text4, { bold: true, children: String(t.requests).padStart(4) }),
+          /* @__PURE__ */ jsx5(Text5, { bold: true, children: String(t.requests).padStart(4) }),
           " ",
-          /* @__PURE__ */ jsx4(Text4, { color: t.errors ? C.err : C.muted, children: String(t.errors).padStart(5) }),
-          n && t.status !== "failed" ? /* @__PURE__ */ jsx4(Text4, { color: n.color, children: `   ${n.text}` }) : null
+          /* @__PURE__ */ jsx5(Text5, { color: t.errors ? C.err : C.muted, children: String(t.errors).padStart(5) }),
+          n && t.status !== "failed" ? /* @__PURE__ */ jsx5(Text5, { color: n.color, children: `   ${n.text}` }) : null
         ] }),
-        t.status === "failed" && n ? /* @__PURE__ */ jsx4(Text4, { color: n.color, wrap: "wrap", children: `    \u21B3 ${n.text}` }) : null
+        t.status === "failed" && n ? /* @__PURE__ */ jsx5(Text5, { color: n.color, wrap: "wrap", children: `    \u21B3 ${n.text}` }) : null
       ] }, t.key);
     })
   ] });
 }
 
 // src/ui/App.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var KEYS = [
   ["n", "novo t\xFAnel"],
   ["c", "copiar URL"],
   ["o", "abrir no navegador"],
+  ["m", "QR no celular"],
   ["f", "filtrar"],
   ["\u21B5", "detalhes"],
   ["tab", "foco"],
@@ -224,6 +311,7 @@ function App({ session, version, system, onExit }) {
   const [selReq, setSelReq] = useState(0);
   const [selTun, setSelTun] = useState(0);
   const [message, setMessage] = useState(null);
+  const [now, setNow] = useState(() => Date.now());
   const quitting = useRef(false);
   const records = useMemo(() => {
     const f = filter.trim().toLowerCase();
@@ -233,11 +321,21 @@ 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);
     return () => clearTimeout(t);
   }, [message]);
+  const inQr = mode.kind === "qr";
+  useEffect(() => {
+    if (!inQr) return;
+    setNow(Date.now());
+    const id = setInterval(() => setNow(Date.now()), 1e3);
+    return () => clearInterval(id);
+  }, [inQr]);
   const order = state.tunnels.map((t) => t.key);
   const tunnelIndex = (key) => Math.max(0, order.indexOf(key));
   function currentTunnel() {
@@ -263,6 +361,13 @@ function App({ session, version, system, onExit }) {
       setMessage(ok ? { text: `Abrindo ${t.url}`, tone: "signal" } : { text: "N\xE3o consegui abrir o navegador", tone: "warn" });
     }
   }
+  function showQr() {
+    const t = currentTunnel();
+    const link = t ? session.qrLink(t.key) : null;
+    if (!t || !link) return setMessage({ text: "Esse t\xFAnel ainda n\xE3o tem URL.", tone: "warn" });
+    setNow(Date.now());
+    setMode({ kind: "qr", key: t.key, link });
+  }
   function submitPort(value) {
     const port = Number(value.trim());
     if (!Number.isInteger(port) || port < 1 || port > 65535) return setMessage({ text: `Porta inv\xE1lida: ${value || "(vazia)"} (use 1\u201365535)`, tone: "err" });
@@ -299,7 +404,24 @@ 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") {
+      if (key.escape) return setMode({ kind: "list" });
+      if (input === "q") return void quit();
+      if (input === "g") {
+        const link = session.qrLink(mode.key);
+        if (link) {
+          setNow(Date.now());
+          setMode({ kind: "qr", key: mode.key, link });
+        }
+      }
       return;
     }
     if (input === "q") return void quit();
@@ -310,25 +432,27 @@ 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 === "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];
-  return /* @__PURE__ */ jsxs5(Box4, { flexDirection: "column", width, children: [
-    /* @__PURE__ */ jsxs5(Box4, { justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsxs5(Text5, { children: [
-        /* @__PURE__ */ jsx5(Text5, { color: C.signal, children: "\u25B0" }),
+  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: [
+      /* @__PURE__ */ jsxs6(Text6, { children: [
+        /* @__PURE__ */ jsx6(Text6, { color: C.signal, children: "\u25B0" }),
         " ",
-        /* @__PURE__ */ jsx5(Text5, { bold: true, children: "duto" }),
+        /* @__PURE__ */ jsx6(Text6, { bold: true, children: "duto" }),
         " ",
-        /* @__PURE__ */ jsxs5(Text5, { color: C.muted, children: [
+        /* @__PURE__ */ jsxs6(Text6, { color: C.muted, children: [
           version,
           " \xB7 ",
           state.account ?? "\u2026",
@@ -341,20 +465,20 @@ function App({ session, version, system, onExit }) {
           " no ar"
         ] })
       ] }),
-      /* @__PURE__ */ jsx5(Text5, { color: conn.color, children: conn.text })
+      /* @__PURE__ */ jsx6(Text6, { color: conn.color, children: conn.text })
     ] }),
-    /* @__PURE__ */ jsx5(Text5, { children: " " }),
-    /* @__PURE__ */ jsx5(TunnelTable, { tunnels: state.tunnels, selected: selTun, focused: focus === "tunnels" }),
-    /* @__PURE__ */ jsx5(Text5, { children: " " }),
-    mode.kind === "detail" && selected ? /* @__PURE__ */ jsx5(Detail, { record: selected }) : /* @__PURE__ */ jsx5(RequestList, { records, tunnelIndex, selected: selReq, focused: focus === "requests", height: listHeight, width, filter }),
-    /* @__PURE__ */ jsx5(Text5, { children: " " }),
-    mode.kind === "filter" && /* @__PURE__ */ jsx5(Prompt, { label: "Filtrar (t\xFAnel, m\xE9todo, caminho ou status):", value: mode.value, hint: "\u21B5 aplica \xB7 esc cancela" }),
-    mode.kind === "port" && /* @__PURE__ */ jsx5(Prompt, { label: "Novo t\xFAnel \u2014 porta local:", value: mode.value, hint: "\u21B5 continua \xB7 esc cancela" }),
-    mode.kind === "name" && /* @__PURE__ */ jsx5(Prompt, { label: `Nome para localhost:${mode.port} (opcional):`, value: mode.value, hint: "\u21B5 abre \xB7 esc cancela" }),
-    mode.kind !== "filter" && mode.kind !== "port" && mode.kind !== "name" && /* @__PURE__ */ jsx5(Text5, { color: message ? C[message.tone] : C.muted, children: message?.text ?? " " }),
-    /* @__PURE__ */ jsx5(Text5, { wrap: "truncate-end", children: KEYS.map(([k, label]) => /* @__PURE__ */ jsxs5(Text5, { children: [
-      /* @__PURE__ */ jsx5(Text5, { inverse: true, color: C.signal, children: ` ${k} ` }),
-      /* @__PURE__ */ jsx5(Text5, { color: C.muted, children: ` ${label}   ` })
+    /* @__PURE__ */ jsx6(Text6, { children: " " }),
+    /* @__PURE__ */ jsx6(TunnelTable, { tunnels: state.tunnels, selected: selTun, focused: focus === "tunnels" }),
+    /* @__PURE__ */ jsx6(Text6, { children: " " }),
+    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" }),
+    mode.kind === "name" && /* @__PURE__ */ jsx6(Prompt, { label: `Nome para localhost:${mode.port} (opcional):`, value: mode.value, hint: "\u21B5 abre \xB7 esc cancela" }),
+    mode.kind !== "filter" && mode.kind !== "port" && mode.kind !== "name" && /* @__PURE__ */ jsx6(Text6, { color: message ? C[message.tone] : C.muted, children: message?.text ?? " " }),
+    /* @__PURE__ */ jsx6(Text6, { wrap: "truncate-end", children: KEYS.map(([k, label]) => /* @__PURE__ */ jsxs6(Text6, { children: [
+      /* @__PURE__ */ jsx6(Text6, { inverse: true, color: C.signal, children: ` ${k} ` }),
+      /* @__PURE__ */ jsx6(Text6, { color: C.muted, children: ` ${label}   ` })
     ] }, k)) })
   ] });
 }
@@ -429,7 +553,7 @@ var realSystem = {
 };
 
 // src/ui/fullscreen.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function runFullscreen(session, specs, version) {
   return withFullscreen(
     process.stdout,
@@ -441,7 +565,7 @@ function runFullscreen(session, specs, version) {
         app.unmount();
         resolve(code);
       };
-      const app = render(/* @__PURE__ */ jsx6(App, { session, version, system: realSystem, onExit: () => finish(0) }), { exitOnCtrlC: false });
+      const app = render(/* @__PURE__ */ jsx7(App, { session, version, system: realSystem, onExit: () => finish(0) }), { exitOnCtrlC: false });
       signal.addEventListener("abort", () => void session.stop().then(() => finish(0)), { once: true });
       session.start(specs).catch(() => void 0);
     })