OpenKnots · BunsDev · Apr 6, 2026 · Apr 6, 2026
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -39,6 +39,7 @@
     "@xterm/xterm": "^6.0.0",
     "class-variance-authority": "^0.7.1",
     "effect": "catalog:",
+    "html-to-image": "^1.11.13",
     "lexical": "^0.41.0",
     "lucide-react": "^0.564.0",
     "oxfmt": "^0.42.0",

diff --git a/apps/web/src/components/ScreenshotTool.tsx b/apps/web/src/components/ScreenshotTool.tsx
@@ -0,0 +1,325 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { toPng } from "html-to-image";
+import { CameraIcon, XIcon } from "lucide-react";
+
+import { useScreenshotStore } from "~/screenshotStore";
+import { toastManager } from "~/components/ui/toast";
+import { Button } from "~/components/ui/button";
+import { Tooltip, TooltipTrigger, TooltipPopup } from "~/components/ui/tooltip";
+import { cn, isMacPlatform } from "~/lib/utils";
+
+// ── Types ───────────────────────────────────────────────────────────
+
+interface SelectionRect {
+  startX: number;
+  startY: number;
+  endX: number;
+  endY: number;
+}
+
+function normalizeRect(rect: SelectionRect) {
+  return {
+    x: Math.min(rect.startX, rect.endX),
+    y: Math.min(rect.startY, rect.endY),
+    width: Math.abs(rect.endX - rect.startX),
+    height: Math.abs(rect.endY - rect.startY),
+  };
+}
+
+// ── Capture Logic ───────────────────────────────────────────────────
+
+async function captureRegion(rect: {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}): Promise<Blob> {
+  const dpr = window.devicePixelRatio || 1;
+
+  // Capture the full page at device resolution
+  const rootElement = document.documentElement;
+  const dataUrl = await toPng(rootElement, {
+    width: rootElement.scrollWidth,
+    height: rootElement.scrollHeight,
+    pixelRatio: dpr,
+    // Exclude our own overlay from the capture
+    filter: (node) => {
+      if (node instanceof HTMLElement && node.dataset.screenshotOverlay === "true") {
+        return false;
+      }
+      return true;
+    },
+  });
+
+  // Load into an Image to crop
+  const img = await loadImage(dataUrl);
+
+  // Crop to the selected region
+  const canvas = document.createElement("canvas");
+  const cropX = rect.x * dpr;
+  const cropY = rect.y * dpr;
+  const cropW = rect.width * dpr;
+  const cropH = rect.height * dpr;
+
+  canvas.width = cropW;
+  canvas.height = cropH;
+
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Failed to get canvas 2D context");
+
+  ctx.drawImage(img, cropX, cropY, cropW, cropH, 0, 0, cropW, cropH);
+
+  return new Promise<Blob>((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (blob) resolve(blob);
+        else reject(new Error("Canvas toBlob returned null"));
+      },
+      "image/png",
+      1.0,
+    );
+  });
+}
+
+function loadImage(src: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = reject;
+    img.src = src;
+  });
+}
+
+async function copyBlobToClipboard(blob: Blob): Promise<void> {
+  await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
+}
+
+function downloadBlob(blob: Blob, filename: string) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+
+// ── Minimum selection threshold ─────────────────────────────────────
+
+const MIN_SELECTION_SIZE = 8;
+
+// ── Selection Overlay ───────────────────────────────────────────────
+
+function ScreenshotOverlay() {
+  const deactivate = useScreenshotStore((s) => s.deactivate);
+  const [selection, setSelection] = useState<SelectionRect | null>(null);
+  const [isCapturing, setIsCapturing] = useState(false);
+  const isDragging = useRef(false);
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  // Cancel on Escape
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        deactivate();
+      }
+    };
+    window.addEventListener("keydown", onKeyDown, true);
+    return () => window.removeEventListener("keydown", onKeyDown, true);
+  }, [deactivate]);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (isCapturing) return;
+      e.preventDefault();
+      isDragging.current = true;
+      setSelection({
+        startX: e.clientX,
+        startY: e.clientY,
+        endX: e.clientX,
+        endY: e.clientY,
+      });
+    },
+    [isCapturing],
+  );
+
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (!isDragging.current || isCapturing) return;
+      setSelection((prev) => (prev ? { ...prev, endX: e.clientX, endY: e.clientY } : null));
+    },
+    [isCapturing],
+  );
+
+  const handleMouseUp = useCallback(async () => {
+    if (!isDragging.current || isCapturing) return;
+    isDragging.current = false;
+
+    if (!selection) {
+      deactivate();
+      return;
+    }
+
+    const rect = normalizeRect(selection);
+
+    // If the selection is too small, treat as a cancelled click
+    if (rect.width < MIN_SELECTION_SIZE || rect.height < MIN_SELECTION_SIZE) {
+      setSelection(null);
+      return;
+    }
+
+    setIsCapturing(true);
+
+    try {
+      const blob = await captureRegion(rect);
+
+      // Copy to clipboard
+      await copyBlobToClipboard(blob);
+
+      toastManager.add({
+        type: "success",
+        title: "Screenshot copied",
+        description: "Image copied to clipboard",
+        data: { dismissAfterVisibleMs: 3000 },
+        actionProps: {
+          children: "Save file",
+          onClick: () => {
+            const timestamp = new Date().toISOString().replace(/[:.]/g, "-").slice(0, 19);
+            downloadBlob(blob, `screenshot-${timestamp}.png`);
+          },
+        },
+      });
+    } catch (error) {
+      console.error("Screenshot capture failed:", error);
+      toastManager.add({
+        type: "error",
+        title: "Screenshot failed",
+        description: error instanceof Error ? error.message : "Could not capture screenshot",
+        data: { dismissAfterVisibleMs: 5000 },
+      });
+    } finally {
+      setIsCapturing(false);
+      deactivate();
+    }
+  }, [selection, isCapturing, deactivate]);
+
+  const normalized = selection ? normalizeRect(selection) : null;
+  const hasValidSelection =
+    normalized && normalized.width >= MIN_SELECTION_SIZE && normalized.height >= MIN_SELECTION_SIZE;
+
+  return (
+    <div
+      ref={overlayRef}
+      data-screenshot-overlay="true"
+      className="fixed inset-0 z-[9999] cursor-crosshair select-none"
+      onMouseDown={handleMouseDown}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+    >
+      {/* Dimmed backdrop - uses CSS clip-path to create a "hole" for the selection */}
+      <div
+        className="pointer-events-none absolute inset-0 bg-black/40 transition-opacity duration-150"
+        style={
+          hasValidSelection
+            ? {
+                clipPath: `polygon(
+                  0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%,
+                  ${normalized.x}px ${normalized.y}px,
+                  ${normalized.x}px ${normalized.y + normalized.height}px,
+                  ${normalized.x + normalized.width}px ${normalized.y + normalized.height}px,
+                  ${normalized.x + normalized.width}px ${normalized.y}px,
+                  ${normalized.x}px ${normalized.y}px
+                )`,
+              }
+            : undefined
+        }
+      />
+
+      {/* Selection rectangle border */}
+      {hasValidSelection && (
+        <div
+          className="pointer-events-none absolute border-2 border-primary rounded-sm shadow-[0_0_0_1px_rgba(0,0,0,0.3),0_0_20px_rgba(59,130,246,0.3)]"
+          style={{
+            left: normalized.x,
+            top: normalized.y,
+            width: normalized.width,
+            height: normalized.height,
+          }}
+        >
+          {/* Dimension badge */}
+          <div className="absolute -bottom-7 left-1/2 -translate-x-1/2 rounded-md bg-black/80 px-2 py-0.5 text-[11px] font-medium text-white tabular-nums backdrop-blur-sm">
+            {Math.round(normalized.width)} x {Math.round(normalized.height)}
+          </div>
+        </div>
+      )}
+
+      {/* Instructions banner */}
+      {!hasValidSelection && !isCapturing && (
+        <div className="pointer-events-none absolute inset-x-0 top-6 flex justify-center">
+          <div className="flex items-center gap-2 rounded-xl border border-white/15 bg-black/70 px-4 py-2.5 text-sm font-medium text-white shadow-2xl backdrop-blur-md">
+            <CameraIcon className="size-4 text-primary" />
+            <span>Click and drag to select an area</span>
+            <span className="mx-1 text-white/30">|</span>
+            <kbd className="rounded bg-white/15 px-1.5 py-0.5 text-[11px] font-semibold">Esc</kbd>
+            <span className="text-white/60">to cancel</span>
+          </div>
+        </div>
+      )}
+
+      {/* Capturing indicator */}
+      {isCapturing && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="flex items-center gap-2.5 rounded-xl border border-white/15 bg-black/70 px-5 py-3 text-sm font-medium text-white shadow-2xl backdrop-blur-md">
+            <div className="size-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+            Capturing...
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── Screenshot Button ───────────────────────────────────────────────
+
+function ScreenshotButton() {
+  const active = useScreenshotStore((s) => s.active);
+  const toggle = useScreenshotStore((s) => s.toggle);
+  const isMac = isMacPlatform(navigator.platform);
+  const shortcutLabel = isMac ? "⌘⇧S" : "Ctrl+Shift+S";
+
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <Button
+            variant={active ? "secondary" : "ghost"}
+            size="icon-xs"
+            onClick={toggle}
+            aria-label="Take screenshot"
+            className={cn(
+              "text-muted-foreground transition-colors hover:text-foreground",
+              active && "text-primary",
+            )}
+          />
+        }
+      >
+        {active ? <XIcon className="size-4" /> : <CameraIcon className="size-4" />}
+      </TooltipTrigger>
+      <TooltipPopup>
+        {active ? "Cancel screenshot" : "Take screenshot"} ({shortcutLabel})
+      </TooltipPopup>
+    </Tooltip>
+  );
+}
+
+// ── Main Export ──────────────────────────────────────────────────────
+
+function ScreenshotTool() {
+  const active = useScreenshotStore((s) => s.active);
+  return active ? <ScreenshotOverlay /> : null;
+}
+
+export { ScreenshotTool, ScreenshotButton };
diff --git a/apps/web/src/routes/_chat.tsx b/apps/web/src/routes/_chat.tsx
@@ -5,6 +5,7 @@ import { type CSSProperties, useEffect } from "react";
 
 import ThreadSidebar from "../components/Sidebar";
 import { CommandPalette } from "../components/CommandPalette";
+import { ScreenshotTool, ScreenshotButton } from "../components/ScreenshotTool";
 import { useHandleNewThread } from "../hooks/useHandleNewThread";
 import { isTerminalFocused } from "../lib/terminalFocus";
 import { isMacPlatform } from "../lib/utils";
@@ -13,6 +14,7 @@ import { resolveShortcutCommand } from "../keybindings";
 import { selectThreadTerminalState, useTerminalStateStore } from "../terminalStateStore";
 import { useThreadSelectionStore } from "../threadSelectionStore";
 import { useCommandPaletteStore } from "../commandPaletteStore";
+import { useScreenshotStore } from "../screenshotStore";
 import { useStore } from "../store";
 import { resolveSidebarNewThreadEnvMode } from "~/components/Sidebar.logic";
 import { useAppSettings } from "~/appSettings";
@@ -67,6 +69,7 @@ function ChatRouteGlobalShortcuts() {
   const paletteOpen = useCommandPaletteStore((state) => state.open);
   const pushMruThread = useCommandPaletteStore((state) => state.pushMruThread);
   const pushMruProject = useCommandPaletteStore((state) => state.pushMruProject);
+  const toggleScreenshot = useScreenshotStore((state) => state.toggle);
   const storeProjects = useStore((state) => state.projects);
   const storeThreads = useStore((state) => state.threads);
   const navigate = useNavigate();
@@ -101,6 +104,14 @@ function ChatRouteGlobalShortcuts() {
         return;
       }
 
+      // ── Screenshot: Cmd+Shift+S (Mac) / Ctrl+Shift+S (non-Mac) ──
+      if (key === "s" && modKey && event.shiftKey && !event.altKey && !isTerminalFocused()) {
+        event.preventDefault();
+        event.stopPropagation();
+        toggleScreenshot();
+        return;
+      }
+
       // ── Project switching: Cmd+1-9 (Mac) / Ctrl+1-9 (non-Mac) ─
       if (
         modKey &&
@@ -194,6 +205,7 @@ function ChatRouteGlobalShortcuts() {
     storeThreads,
     terminalOpen,
     togglePalette,
+    toggleScreenshot,
     appSettings.defaultThreadEnvMode,
   ]);
 
@@ -236,6 +248,10 @@ function ChatRouteLayout() {
         <SidebarProvider defaultOpen={clientMode !== "mobile"}>
           <ChatRouteGlobalShortcuts />
           <CommandPalette />
+          <ScreenshotTool />
+          <div className="fixed bottom-4 right-4 z-50">
+            <ScreenshotButton />
+          </div>
           <Sidebar
             side="left"
             collapsible="offcanvas"