bunflared 0.5.0

One command, one throwaway link for your localhost, several ports behind it. Chat with your client from the terminal, send them to a page, follow their cursor, catch their reactions 🔥 Or let your coding agent run the session over MCP.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

// The note: a remark, the element it is about, and a screenshot of the page.
const [form, textarea, send, status] = [$(".note"), $("#note"), $(".note .send"), $(".status")];
const [shotChip, thumb] = [$(".shot"), $(".thumb")];
let image = null;
let wantShot = true;
let sending = false;

const ready = () => { send.disabled = sending || !textarea.value.trim(); };

// The line under the note: busy, done or failed.
const tell = (text = "", kind = "") => {
  status.className = `status ${kind}`;
  status.innerHTML = { busy: `<span class="spin" aria-hidden="true"></span>`, ok: ICON.check, error: ICON.alert }[kind] ?? "";
  if (text) status.append(text);
};

const show = (blob) => {
  if (thumb.src) URL.revokeObjectURL(thumb.src);
  image = blob;
  if (blob) thumb.src = URL.createObjectURL(blob);
  else thumb.removeAttribute("src");
  thumb.hidden = !blob;
};

const retake = async () => {
  tell("Taking a screenshot...", "busy");
  try {
    show(await capture());
    tell();
  } catch {
    show(null);
    tell("No screenshot this time. You can paste one.", "error");
  }
};

// The panel opened: a fresh screenshot of the page, unless one is waiting.
function opened() {
  if (wantShot && !image) retake();
}

const want = (on) => {
  wantShot = on;
  shotChip.setAttribute("aria-pressed", String(on));
};
shotChip.addEventListener("click", () => {
  want(!wantShot);
  if (wantShot) return retake();
  show(null);
  tell();
});

textarea.addEventListener("input", ready);
form.addEventListener("keydown", (event) => {
  if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
    event.preventDefault();
    form.requestSubmit();
  }
});

textarea.addEventListener("paste", (event) => {
  const item = [...event.clipboardData.items].find((entry) => entry.type.startsWith("image/"));
  if (!item) return;
  want(true);
  show(item.getAsFile());
  tell("Pasted image attached.", "ok");
});

form.addEventListener("submit", async (event) => {
  event.preventDefault();
  const message = textarea.value.trim();
  if (!message || sending) return;
  sending = true;
  ready();
  tell("Sending...", "busy");
  let shot = null;
  if (wantShot && image) {
    const response = await fetch(`${BASE}/shot`, { method: "POST", body: image }).catch(() => null);
    if (response?.ok) shot = (await response.json()).shot;
  }
  const response = await fetch(`${BASE}/feedback`, {
    method: "POST",
    body: JSON.stringify({
      sid, page: page(), message, screen: `${innerWidth}x${innerHeight}`, shot, element: pinned?.info ?? null,
    }),
  }).catch(() => null);
  sending = false;
  ready();
  if (!response?.ok) {
    tell("Could not send it. Try again?", "error");
    return;
  }
  textarea.value = "";
  pinned = null;
  showPin();
  ready();
  if (!phone) textarea.focus();
  const done = shot ? "Sent with its image. Anything else?" : "Sent. Anything else?";
  tell(done, "ok");
  // The next note deserves a fresh picture of the page.
  if (wantShot) {
    show(null);
    retake().then(() => tell(done, "ok"));
  }
});