@dutodev/cli 0.4.6 → 0.5.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,6 +142,7 @@ 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 |
 | `tab`, `↑↓` | Alterna entre túneis e requisições e move a seleção |
@@ -126,6 +168,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-DKIFHB6J.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";
@@ -107,43 +107,120 @@ 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 - 52 - 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, { 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 +238,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 +258,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 +306,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();
@@ -238,6 +321,13 @@ function App({ session, version, system, onExit }) {
     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 +353,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" });
@@ -302,6 +399,18 @@ function App({ session, version, system, onExit }) {
       if (key.escape || key.return || input === "q") setMode({ kind: "list" });
       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();
     if (key.tab) return setFocus((f) => f === "requests" ? "tunnels" : "requests");
     if (key.upArrow || key.downArrow) {
@@ -314,6 +423,7 @@ function App({ session, version, system, onExit }) {
     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: "" });
   });
@@ -321,14 +431,15 @@ function App({ session, version, system, onExit }) {
   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 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 +452,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" && 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 }),
+    /* @__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 +540,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 +552,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);
     })