bunflared 0.9.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

const SCREENSHOT_LIB = "https://cdn.jsdelivr.net/npm/modern-screenshot@4.7.0/+esm";
const PINK = "#ff79c6";

// Undone, an element that had no style attribute is left without one.
const outline = (node, style) => {
  const saved = [node.style.outline, node.style.outlineOffset];
  const bare = !node.getAttribute("style");
  node.style.outline = style;
  node.style.outlineOffset = "2px";
  return () => {
    [node.style.outline, node.style.outlineOffset] = saved;
    if (bare && !node.style.length) node.removeAttribute("style");
  };
};
const points = [];

// A point's number, as the page shows it on the outline's corner.
const drawNumber = (context, n, x, y) => {
  context.beginPath();
  context.arc(x, y, 11, 0, 2 * Math.PI);
  context.fillStyle = PINK;
  context.fill();
  context.lineWidth = 2;
  context.strokeStyle = "#fff";
  context.stroke();
  context.fillStyle = "#1f2430";
  context.font = "700 12px system-ui, -apple-system, sans-serif";
  context.textAlign = "center";
  context.textBaseline = "middle";
  context.fillText(String(n), x, y + 0.5);
};

// The whole page without the widget, on a background that never comes out
// transparent.
const pageCanvas = async () => {
  const { domToCanvas } = await import(SCREENSHOT_LIB);
  const page = document.documentElement;
  const background = getComputedStyle(document.body).backgroundColor;
  return domToCanvas(page, {
    scale: 1,
    width: innerWidth,
    height: Math.max(page.scrollHeight, innerHeight),
    backgroundColor: background === "rgba(0, 0, 0, 0)" ? "#ffffff" : background,
    filter: (node) => node !== host,
  });
};
const png = (canvas) =>
  new Promise((resolve, reject) => {
    canvas.toBlob((blob) => (blob ? resolve(blob) : reject(new Error("no picture"))), "image/png");
  });

// A part of the page, in page coordinates.
const crop = async ({ x, y, w, h }) => {
  const canvas = await pageCanvas();
  const ratio = canvas.width / innerWidth;
  const part = document.createElement("canvas");
  [part.width, part.height] = [Math.max(1, Math.round(w * ratio)), Math.max(1, Math.round(h * ratio))];
  part.getContext("2d").drawImage(canvas, x * ratio, y * ratio, w * ratio, h * ratio, 0, 0, part.width, part.height);
  return png(part);
};

// Each point is outlined and numbered over the picture: the page itself is
// left alone while it is taken.
const capture = async () => {
  const boxes = points.map(({ node }, index) => ({ n: index + 1, shown: node.isConnected, rect: node.getBoundingClientRect() }));
  const [left, top] = [scrollX, scrollY];
  const canvas = await pageCanvas();
  const ratio = canvas.width / innerWidth;
  const context = canvas.getContext("2d");
  context.setTransform(ratio, 0, 0, ratio, 0, 0);
  for (const { n, shown, rect } of boxes) {
    if (!shown) continue;
    const [x, y] = [rect.left + left, rect.top + top];
    context.lineWidth = 3;
    context.strokeStyle = PINK;
    context.strokeRect(x - 3.5, y - 3.5, rect.width + 7, rect.height + 7);
    drawNumber(context, n, Math.max(12, x - 5), Math.max(12, y - 5));
  }
  return png(canvas);
};