d2d-feedbackkit 0.0.0

package/src/solid.tsx

@@ -0,0 +1,2723 @@
+import { toBlob } from "html-to-image";
+import {
+  ArrowUpRight,
+  Bot,
+  CheckCircle2,
+  ChevronDown,
+  FileUp,
+  Maximize2,
+  LoaderCircle,
+  MessageSquarePlus,
+  MousePointer2,
+  PenLine,
+  Redo2,
+  Send,
+  Square,
+  StopCircle,
+  Trash2,
+  Type,
+  Undo2,
+  Video,
+  X,
+} from "lucide-solid";
+import {
+  For,
+  Show,
+  createEffect,
+  createSignal,
+  onCleanup,
+  onMount,
+  type Component,
+  type JSX,
+} from "solid-js";
+import type {
+  FeedbackLocator,
+  FeedbackLocatorAgentSessionResult,
+  FeedbackLocatorBounds,
+  FeedbackLocatorCodexThreadResult,
+  FeedbackLocatorContextPreview,
+  FeedbackLocatorHotkey,
+  FeedbackLocatorOpenCodeThreadResult,
+  FeedbackLocatorPoint,
+  FeedbackLocatorSourceMetadata,
+  FeedbackLocatorSubmitResult,
+} from "./types";
+import { createShortcutResolver } from "./shortcuts";
+
+type FeedbackLocatorRootProps = {
+  locator: FeedbackLocator;
+};
+
+type FeedbackLocatorMode = "idle" | "selecting" | "annotating" | "submitting";
+type FeedbackLocatorSubmitTarget = "linear" | "agent" | "codex" | "opencode";
+type AnnotationTool = "select" | "pen" | "rect" | "arrow" | "text";
+
+type PenAnnotation = {
+  type: "pen";
+  points: FeedbackLocatorPoint[];
+  color: string;
+  width: number;
+};
+
+type RectAnnotation = {
+  type: "rect";
+  start: FeedbackLocatorPoint;
+  end: FeedbackLocatorPoint;
+  color: string;
+  width: number;
+};
+
+type ArrowAnnotation = {
+  type: "arrow";
+  start: FeedbackLocatorPoint;
+  end: FeedbackLocatorPoint;
+  color: string;
+  width: number;
+};
+
+type TextAnnotation = {
+  type: "text";
+  point: FeedbackLocatorPoint;
+  text: string;
+  color: string;
+  fontSize: number;
+};
+
+type Annotation = PenAnnotation | RectAnnotation | ArrowAnnotation | TextAnnotation;
+
+type AnnotationBounds = {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+  width: number;
+  height: number;
+};
+
+type ScreenshotState = {
+  targetElement: HTMLElement;
+  source: FeedbackLocatorSourceMetadata | null;
+  originalBlob: Blob;
+  originalUrl: string;
+  width: number;
+  height: number;
+  captureMode: "element" | "page";
+  targetHighlight?: RectAnnotation;
+};
+
+type TextDraft = {
+  point: FeedbackLocatorPoint;
+  value: string;
+};
+
+type AnnotationDragState = {
+  annotationIndex: number;
+  previousPoint: FeedbackLocatorPoint;
+  originalAnnotation: Annotation;
+  resizeHandle?: AnnotationResizeHandle;
+  didMove: boolean;
+};
+
+type AnnotationResizeHandle = "nw" | "ne" | "sw" | "se" | "start" | "end";
+
+type AnnotationHistoryEntry =
+  | {
+      type: "add";
+      annotation: Annotation;
+    }
+  | {
+      type: "delete";
+      annotation: Annotation;
+      index: number;
+    }
+  | {
+      type: "clear";
+      annotations: Annotation[];
+    }
+  | {
+      type: "update";
+      index: number;
+      before: Annotation;
+      after: Annotation;
+    };
+
+type PreparedFeedbackSubmission = {
+  formData: FormData;
+  metadata: Awaited<ReturnType<FeedbackLocator["createMetadata"]>>;
+  originalScreenshot: Blob;
+  annotatedScreenshot?: Blob;
+  recording?: File;
+  attachments?: File[];
+  exportAnnotations: Annotation[];
+};
+
+const annotationColor = "#f59e0b";
+const annotationWidth = 4;
+const selectionColor = "#38bdf8";
+const hitTolerance = 14;
+const resizeHandleSize = 10;
+const annotationColorOptions = ["#f59e0b", "#ef4444", "#22c55e", "#38bdf8", "#f8fafc"];
+type AnnotationShortcutAction =
+  | "select"
+  | "pen"
+  | "arrow"
+  | "rect"
+  | "text"
+  | "undo"
+  | "redo"
+  | "delete"
+  | "clear"
+  | "close";
+
+const annotationShortcutResolver = createShortcutResolver<AnnotationShortcutAction>([
+  { action: "select", key: "v" },
+  { action: "pen", key: "p" },
+  { action: "arrow", key: "a" },
+  { action: "rect", key: "r" },
+  { action: "text", key: "t" },
+  { action: "undo", key: "z", meta: true },
+  { action: "undo", key: "z", ctrl: true },
+  { action: "redo", key: "z", meta: true, shift: true },
+  { action: "redo", key: "z", ctrl: true, shift: true },
+  { action: "redo", key: "y", meta: true },
+  { action: "redo", key: "y", ctrl: true },
+  { action: "delete", key: "backspace" },
+  { action: "delete", key: "delete" },
+  { action: "clear", key: "k", meta: true, shift: true },
+  { action: "clear", key: "k", ctrl: true, shift: true },
+  { action: "close", key: "escape" },
+]);
+
+export const FeedbackLocatorRoot: Component<FeedbackLocatorRootProps> = (props) => {
+  let canvasRef: HTMLCanvasElement | undefined;
+  let textInputRef: HTMLInputElement | undefined;
+  let annotationDragState: AnnotationDragState | null = null;
+
+  const [mode, setMode] = createSignal<FeedbackLocatorMode>("idle");
+  const [hoverRect, setHoverRect] = createSignal<FeedbackLocatorBounds | null>(null);
+  const [selected, setSelected] = createSignal<ScreenshotState | null>(null);
+  const [annotations, setAnnotations] = createSignal<Annotation[]>([]);
+  const [annotationHistory, setAnnotationHistory] = createSignal<AnnotationHistoryEntry[]>([]);
+  const [redoStack, setRedoStack] = createSignal<AnnotationHistoryEntry[]>([]);
+  const [draft, setDraft] = createSignal<Annotation | null>(null);
+  const [textDraft, setTextDraft] = createSignal<TextDraft | null>(null);
+  const [tool, setTool] = createSignal<AnnotationTool>("pen");
+  const [activeAnnotationColor, setActiveAnnotationColor] = createSignal(annotationColor);
+  const [activeAnnotationWidth, setActiveAnnotationWidth] = createSignal(annotationWidth);
+  const [selectedAnnotationIndex, setSelectedAnnotationIndex] = createSignal<number | null>(null);
+  const [isMovingAnnotation, setIsMovingAnnotation] = createSignal(false);
+  const [contextPreview, setContextPreview] = createSignal<FeedbackLocatorContextPreview | null>(
+    null,
+  );
+  const [prompt, setPrompt] = createSignal("");
+  const [attachments, setAttachments] = createSignal<File[]>([]);
+  const [recordingState, setRecordingState] = createSignal<"idle" | "recording" | "ready">(
+    "idle",
+  );
+  const [recordingBlob, setRecordingBlob] = createSignal<Blob | null>(null);
+  const [recordingUrl, setRecordingUrl] = createSignal<string | null>(null);
+  const [recordingDurationMs, setRecordingDurationMs] = createSignal<number | null>(null);
+  const [error, setError] = createSignal<string | null>(null);
+  const [submitTarget, setSubmitTarget] = createSignal<FeedbackLocatorSubmitTarget | null>(null);
+  const [linearResult, setLinearResult] = createSignal<FeedbackLocatorSubmitResult | null>(null);
+  const [agentSession, setAgentSession] =
+    createSignal<FeedbackLocatorAgentSessionResult | null>(null);
+  const [codexThread, setCodexThread] =
+    createSignal<FeedbackLocatorCodexThreadResult | null>(null);
+  const [openCodeThread, setOpenCodeThread] =
+    createSignal<FeedbackLocatorOpenCodeThreadResult | null>(null);
+  let mediaRecorder: MediaRecorder | undefined;
+  let recordingStream: MediaStream | undefined;
+  let recordingStartedAt = 0;
+  let recordingChunks: Blob[] = [];
+  let discardRecordingOnStop = false;
+
+  onMount(() => {
+    const handleHotkey = (event: KeyboardEvent) => {
+      if (isEditableTarget(event.target)) {
+        return;
+      }
+
+      if (matchesHotkey(event, props.locator.config.hotkey!)) {
+        event.preventDefault();
+        startSelection();
+      }
+    };
+
+    document.addEventListener("keydown", handleHotkey);
+    onCleanup(() => {
+      document.removeEventListener("keydown", handleHotkey);
+      stopRecordingStream();
+      revokeRecordingUrl();
+    });
+  });
+
+  createEffect(() => {
+    if (mode() !== "selecting") {
+      return;
+    }
+
+    const previousCursor = document.body.style.cursor;
+    document.body.style.cursor = "crosshair";
+
+    const handlePointerMove = (event: PointerEvent) => {
+      const element = findSelectableElement(event.target);
+      setHoverRect(element ? rectToBounds(element.getBoundingClientRect()) : null);
+    };
+
+    const handleClick = async (event: MouseEvent) => {
+      const element = findSelectableElement(event.target);
+
+      if (!element) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+      await captureElement(element);
+    };
+
+    const handleKeydown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        reset();
+      }
+    };
+
+    document.addEventListener("pointermove", handlePointerMove, true);
+    document.addEventListener("click", handleClick, true);
+    document.addEventListener("keydown", handleKeydown, true);
+
+    onCleanup(() => {
+      document.body.style.cursor = previousCursor;
+      document.removeEventListener("pointermove", handlePointerMove, true);
+      document.removeEventListener("click", handleClick, true);
+      document.removeEventListener("keydown", handleKeydown, true);
+    });
+  });
+
+  createEffect(() => {
+    annotations();
+    draft();
+    selectedAnnotationIndex();
+    selected();
+    redrawOverlay();
+  });
+
+  createEffect(() => {
+    const index = selectedAnnotationIndex();
+    const annotation = index === null ? null : annotations()[index] ?? null;
+    if (!annotation) {
+      return;
+    }
+
+    setActiveAnnotationColor(annotation.color);
+    if ("width" in annotation) {
+      setActiveAnnotationWidth(annotation.width);
+    }
+  });
+
+  createEffect(() => {
+    if (textDraft() && textInputRef) {
+      queueMicrotask(() => textInputRef?.focus());
+    }
+  });
+
+  createEffect(() => {
+    if (mode() !== "annotating") {
+      return;
+    }
+
+    const handleKeydown = (event: KeyboardEvent) => {
+      if (isEditableTarget(event.target)) {
+        return;
+      }
+
+      const action = annotationShortcutResolver(event);
+
+      if (!action) {
+        return;
+      }
+
+      event.preventDefault();
+
+      if (action === "select") {
+        setTool("select");
+        return;
+      }
+
+      if (action === "pen") {
+        setTool("pen");
+        return;
+      }
+
+      if (action === "arrow") {
+        setTool("arrow");
+        return;
+      }
+
+      if (action === "rect") {
+        setTool("rect");
+        return;
+      }
+
+      if (action === "text") {
+        setTool("text");
+        return;
+      }
+
+      if (action === "redo") {
+        redo();
+        return;
+      }
+
+      if (action === "undo") {
+        undo();
+        return;
+      }
+
+      if (action === "delete") {
+        deleteSelectedAnnotation();
+        return;
+      }
+
+      if (action === "clear") {
+        clearAnnotations();
+        return;
+      }
+
+      if (action === "close") {
+        reset();
+      }
+    };
+
+    document.addEventListener("keydown", handleKeydown);
+    onCleanup(() => document.removeEventListener("keydown", handleKeydown));
+  });
+
+  function startSelection() {
+    setError(null);
+    setSubmitTarget(null);
+    setLinearResult(null);
+    setAgentSession(null);
+    setCodexThread(null);
+    setSelected(null);
+    setAnnotations([]);
+    setAnnotationHistory([]);
+    setRedoStack([]);
+    setDraft(null);
+    setTextDraft(null);
+    setSelectedAnnotationIndex(null);
+    setContextPreview(null);
+    annotationDragState = null;
+    setIsMovingAnnotation(false);
+    setPrompt("");
+    setAttachments([]);
+    clearRecording();
+    setMode("selecting");
+  }
+
+  function reset() {
+    const current = selected();
+    if (current) {
+      URL.revokeObjectURL(current.originalUrl);
+    }
+
+    setMode("idle");
+    setHoverRect(null);
+    setSelected(null);
+    setAnnotations([]);
+    setAnnotationHistory([]);
+    setRedoStack([]);
+    setDraft(null);
+    setTextDraft(null);
+    setSelectedAnnotationIndex(null);
+    setContextPreview(null);
+    annotationDragState = null;
+    setIsMovingAnnotation(false);
+    setPrompt("");
+    setAttachments([]);
+    clearRecording();
+    setError(null);
+    setSubmitTarget(null);
+    setLinearResult(null);
+    setAgentSession(null);
+  }
+
+  async function captureElement(element: HTMLElement) {
+    setError(null);
+    setHoverRect(null);
+
+    try {
+      const source = props.locator.config.sourceCollector?.(element) ?? null;
+      const blob = await toBlob(element, {
+        cacheBust: true,
+        pixelRatio: Math.min(window.devicePixelRatio || 1, 2),
+        backgroundColor: getComputedStyle(document.body).backgroundColor,
+        filter: (node) =>
+          node instanceof HTMLElement ? !node.closest("[data-feedback-locator-ui='true']") : true,
+      });
+
+      if (!blob) {
+        throw new Error("Screenshot kon niet worden gemaakt.");
+      }
+
+      const imageSize = await getImageSize(blob);
+      setSelected({
+        targetElement: element,
+        source,
+        originalBlob: blob,
+        originalUrl: URL.createObjectURL(blob),
+        width: imageSize.width,
+        height: imageSize.height,
+        captureMode: "element",
+      });
+      void refreshContextPreview(element);
+      setMode("annotating");
+    } catch (captureError) {
+      setMode("idle");
+      setError(
+        captureError instanceof Error
+          ? captureError.message
+          : "Screenshot kon niet worden gemaakt.",
+      );
+    }
+  }
+
+  async function captureFullPageWithTarget() {
+    const current = selected();
+    if (!current) {
+      return;
+    }
+
+    setError(null);
+
+    try {
+      const source = current.source;
+      const targetElement = current.targetElement;
+      const targetDocument = document.documentElement;
+      const blob = await toBlob(targetDocument, {
+        cacheBust: true,
+        pixelRatio: Math.min(window.devicePixelRatio || 1, 2),
+        backgroundColor: getComputedStyle(document.body).backgroundColor,
+        width: targetDocument.scrollWidth,
+        height: targetDocument.scrollHeight,
+        style: {
+          transform: "none",
+          transformOrigin: "top left",
+        },
+        filter: (node) =>
+          node instanceof HTMLElement ? !node.closest("[data-feedback-locator-ui='true']") : true,
+      });
+
+      if (!blob) {
+        throw new Error("Volledige pagina kon niet worden vastgelegd.");
+      }
+
+      const imageSize = await getImageSize(blob);
+      const targetRect = targetElement.getBoundingClientRect();
+      const scaleX = imageSize.width / Math.max(targetDocument.scrollWidth, 1);
+      const scaleY = imageSize.height / Math.max(targetDocument.scrollHeight, 1);
+      const start = {
+        x: (targetRect.left + window.scrollX) * scaleX,
+        y: (targetRect.top + window.scrollY) * scaleY,
+      };
+      const end = {
+        x: (targetRect.right + window.scrollX) * scaleX,
+        y: (targetRect.bottom + window.scrollY) * scaleY,
+      };
+      const targetHighlight: RectAnnotation = {
+        type: "rect",
+        start,
+        end,
+        color: selectionColor,
+        width: Math.max(annotationWidth, 5),
+      };
+      const highlightedBlob = await drawTargetHighlightOnBlob(blob, imageSize, targetHighlight);
+
+      URL.revokeObjectURL(current.originalUrl);
+      setSelected({
+        ...current,
+        source,
+        originalBlob: highlightedBlob,
+        originalUrl: URL.createObjectURL(highlightedBlob),
+        width: imageSize.width,
+        height: imageSize.height,
+        captureMode: "page",
+        targetHighlight,
+      });
+      setAnnotationHistory([]);
+      setRedoStack([]);
+      setSelectedAnnotationIndex(null);
+      void refreshContextPreview(targetElement);
+    } catch (captureError) {
+      setError(
+        captureError instanceof Error
+          ? captureError.message
+          : "Volledige pagina kon niet worden vastgelegd.",
+      );
+    }
+  }
+
+  async function prepareFeedbackSubmission(): Promise<PreparedFeedbackSubmission | null> {
+    const screenshot = selected();
+    const cleanPrompt = prompt().trim();
+
+    if (!screenshot || !cleanPrompt) {
+      setError("Vul eerst je feedback in.");
+      return null;
+    }
+
+    const exportAnnotations = collectExportAnnotations();
+    const annotatedScreenshot =
+      exportAnnotations.length > 0
+        ? await exportAnnotatedScreenshot(screenshot, exportAnnotations)
+        : undefined;
+    const finalScreenshot = annotatedScreenshot ?? screenshot.originalBlob;
+    const selectedRecording = createRecordingFile();
+    const metadata = await props.locator.createMetadata({
+      prompt: cleanPrompt,
+      targetElement: screenshot.targetElement,
+      source: screenshot.source,
+    });
+    const selectedAttachments = attachments();
+    metadata.context.feedbackLocator = {
+      ...((metadata.context.feedbackLocator as Record<string, unknown> | undefined) ?? {}),
+      captureMode: screenshot.captureMode,
+      attachments: selectedAttachments.map((file) => ({
+        name: file.name,
+        type: file.type || "application/octet-stream",
+        size: file.size,
+      })),
+      recording: selectedRecording
+        ? {
+            name: selectedRecording.name,
+            type: selectedRecording.type || "video/webm",
+            size: selectedRecording.size,
+            durationMs: recordingDurationMs(),
+          }
+        : null,
+    };
+    const formData = new FormData();
+
+    formData.append("metadata", JSON.stringify(metadata));
+    formData.append("screenshot", finalScreenshot, "screenshot.png");
+    if (selectedRecording) {
+      formData.append("recording", selectedRecording, selectedRecording.name);
+    }
+    for (const attachment of selectedAttachments) {
+      formData.append("attachments", attachment, attachment.name);
+    }
+
+    return {
+      formData,
+      metadata,
+      originalScreenshot: finalScreenshot,
+      annotatedScreenshot,
+      recording: selectedRecording ?? undefined,
+      attachments: selectedAttachments,
+      exportAnnotations,
+    };
+  }
+
+  function applySubmissionAnnotations(prepared: PreparedFeedbackSubmission) {
+    setAnnotations(prepared.exportAnnotations);
+    setAnnotationHistory([]);
+    setDraft(null);
+    setTextDraft(null);
+    setRedoStack([]);
+    setSelectedAnnotationIndex(null);
+  }
+
+  async function submitFeedback() {
+    await runSubmission("linear", async (prepared) => {
+      const pendingWindow = openPendingExternalWindow(
+        "Linear issue aanmaken...",
+        "De feedback wordt verwerkt en de Linear issue wordt geopend.",
+      );
+
+      try {
+        const submitResult = await props.locator.config.submitFeedback(prepared);
+        setLinearResult(submitResult);
+        openExternalWindow(submitResult.issueUrl, pendingWindow);
+      } catch (submitError) {
+        closePendingWindow(pendingWindow);
+        throw submitError;
+      }
+    });
+  }
+
+  async function startAgentSession() {
+    const startAgentSessionAction = props.locator.config.startAgentSession;
+
+    if (!startAgentSessionAction) {
+      setError("Agent sessies zijn nog niet gekoppeld voor deze app.");
+      return;
+    }
+
+    await runSubmission("agent", async (prepared) => {
+      const pendingWindow = openPendingAgentSessionWindow();
+      const session = await startAgentSessionAction(prepared);
+      setAgentSession(session);
+      openAgentSessionWindow(session, pendingWindow);
+    });
+  }
+
+  async function startCodexThread() {
+    const startCodexThreadAction = props.locator.config.startCodexThread;
+
+    if (!startCodexThreadAction) {
+      setError("Codex threads zijn nog niet gekoppeld voor deze app.");
+      return;
+    }
+
+    await runSubmission("codex", async (prepared) => {
+      const thread = await startCodexThreadAction(prepared);
+      setCodexThread(thread);
+
+      if (thread.linearIssue) {
+        openExternalWindow(thread.linearIssue.issueUrl);
+      }
+    });
+  }
+
+  async function startOpenCodeThread() {
+    const startOpenCodeThreadAction = props.locator.config.startOpenCodeThread;
+
+    if (!startOpenCodeThreadAction) {
+      setError("OpenCode sessies zijn nog niet gekoppeld voor deze app.");
+      return;
+    }
+
+    await runSubmission("opencode", async (prepared) => {
+      const thread = await startOpenCodeThreadAction(prepared);
+      setOpenCodeThread(thread);
+    });
+  }
+
+  async function runSubmission(
+    target: FeedbackLocatorSubmitTarget,
+    submit: (prepared: PreparedFeedbackSubmission) => Promise<void>,
+  ) {
+    try {
+      setError(null);
+      setSubmitTarget(target);
+      setMode("submitting");
+      const prepared = await prepareFeedbackSubmission();
+
+      if (!prepared) {
+        setMode("annotating");
+        return;
+      }
+
+      await submit(prepared);
+      applySubmissionAnnotations(prepared);
+      setMode("annotating");
+    } catch (submitError) {
+      setMode("annotating");
+      setError(
+        submitError instanceof Error ? submitError.message : "Feedback versturen is mislukt.",
+      );
+    } finally {
+      setSubmitTarget(null);
+    }
+  }
+
+  async function refreshContextPreview(targetElement = selected()?.targetElement) {
+    if (!targetElement) {
+      setContextPreview(null);
+      return;
+    }
+
+    try {
+      setContextPreview(await props.locator.collectContext({ targetElement }));
+    } catch (previewError) {
+      setContextPreview({
+        context: {},
+        contextErrors: [
+          previewError instanceof Error
+            ? previewError.message
+            : "Context preview kon niet worden opgehaald.",
+        ],
+      });
+    }
+  }
+
+  async function startRecording() {
+    if (!supportsScreenRecording()) {
+      setError("Video-opname wordt niet ondersteund in deze browser.");
+      return;
+    }
+
+    try {
+      setError(null);
+      clearRecording();
+      const stream = await navigator.mediaDevices.getDisplayMedia({
+        video: true,
+        audio: false,
+      });
+      const mimeType = getSupportedRecordingMimeType();
+      const recorder = new MediaRecorder(stream, mimeType ? { mimeType } : undefined);
+
+      recordingStream = stream;
+      mediaRecorder = recorder;
+      recordingChunks = [];
+      recordingStartedAt = Date.now();
+
+      recorder.addEventListener("dataavailable", (event) => {
+        if (event.data.size > 0) {
+          recordingChunks.push(event.data);
+        }
+      });
+      recorder.addEventListener("stop", () => {
+        const blob = new Blob(recordingChunks, {
+          type: recorder.mimeType || mimeType || "video/webm",
+        });
+        const shouldDiscard = discardRecordingOnStop;
+        discardRecordingOnStop = false;
+        stopRecordingStream();
+
+        if (shouldDiscard) {
+          return;
+        }
+
+        revokeRecordingUrl();
+        setRecordingBlob(blob);
+        setRecordingUrl(URL.createObjectURL(blob));
+        setRecordingDurationMs(Math.max(0, Date.now() - recordingStartedAt));
+        setRecordingState("ready");
+      });
+
+      for (const track of stream.getTracks()) {
+        track.addEventListener("ended", stopRecording);
+      }
+
+      recorder.start();
+      setRecordingState("recording");
+    } catch (recordingError) {
+      stopRecordingStream();
+      setRecordingState("idle");
+
+      if (recordingError instanceof DOMException && recordingError.name === "NotAllowedError") {
+        setError("Video-opname is geannuleerd.");
+        return;
+      }
+
+      setError(
+        recordingError instanceof Error
+          ? recordingError.message
+          : "Video-opname kon niet worden gestart.",
+      );
+    }
+  }
+
+  function stopRecording() {
+    if (mediaRecorder && mediaRecorder.state !== "inactive") {
+      mediaRecorder.stop();
+      return;
+    }
+
+    stopRecordingStream();
+    setRecordingState(recordingBlob() ? "ready" : "idle");
+  }
+
+  function clearRecording() {
+    if (mediaRecorder && mediaRecorder.state !== "inactive") {
+      discardRecordingOnStop = true;
+      mediaRecorder.stop();
+    }
+    stopRecordingStream();
+    revokeRecordingUrl();
+    recordingChunks = [];
+    setRecordingBlob(null);
+    setRecordingUrl(null);
+    setRecordingDurationMs(null);
+    setRecordingState("idle");
+  }
+
+  function createRecordingFile() {
+    const blob = recordingBlob();
+
+    if (!blob) {
+      return null;
+    }
+
+    return new File([blob], "screen-recording.webm", {
+      type: blob.type || "video/webm",
+    });
+  }
+
+  function stopRecordingStream() {
+    for (const track of recordingStream?.getTracks() ?? []) {
+      track.stop();
+    }
+    recordingStream = undefined;
+    mediaRecorder = undefined;
+  }
+
+  function revokeRecordingUrl() {
+    const url = recordingUrl();
+    if (url) {
+      URL.revokeObjectURL(url);
+    }
+  }
+
+  function handleCanvasPointerDown(event: PointerEvent) {
+    if (!canvasRef || mode() === "submitting" || textDraft()) {
+      return;
+    }
+
+    const point = getCanvasPoint(event, canvasRef);
+
+    if (tool() === "select") {
+      const selectedIndex = selectedAnnotationIndex();
+      const selectedAnnotation =
+        selectedIndex === null ? null : annotations()[selectedIndex] ?? null;
+      const resizeHandle = selectedAnnotation
+        ? findResizeHandleAtPoint(selectedAnnotation, point)
+        : null;
+
+      if (selectedIndex !== null && selectedAnnotation && resizeHandle) {
+        event.preventDefault();
+        canvasRef.setPointerCapture(event.pointerId);
+        annotationDragState = {
+          annotationIndex: selectedIndex,
+          previousPoint: point,
+          originalAnnotation: selectedAnnotation,
+          resizeHandle,
+          didMove: false,
+        };
+        setIsMovingAnnotation(true);
+        return;
+      }
+
+      const annotationIndex = findAnnotationAtPoint(annotations(), point);
+      setSelectedAnnotationIndex(annotationIndex);
+      const annotation = annotationIndex === null ? null : annotations()[annotationIndex] ?? null;
+
+      if (annotationIndex !== null && annotation) {
+        event.preventDefault();
+        canvasRef.setPointerCapture(event.pointerId);
+        annotationDragState = {
+          annotationIndex,
+          previousPoint: point,
+          originalAnnotation: annotation,
+          didMove: false,
+        };
+        setIsMovingAnnotation(true);
+      }
+
+      return;
+    }
+
+    setSelectedAnnotationIndex(null);
+
+    if (tool() === "text") {
+      setTextDraft({ point, value: "" });
+      return;
+    }
+
+    canvasRef.setPointerCapture(event.pointerId);
+
+    if (tool() === "pen") {
+      setDraft({
+        type: "pen",
+        points: [point],
+        color: activeAnnotationColor(),
+        width: activeAnnotationWidth(),
+      });
+      return;
+    }
+
+    if (tool() === "rect") {
+      setDraft({
+        type: "rect",
+        start: point,
+        end: point,
+        color: activeAnnotationColor(),
+        width: activeAnnotationWidth(),
+      });
+      return;
+    }
+
+    setDraft({
+      type: "arrow",
+      start: point,
+      end: point,
+      color: activeAnnotationColor(),
+      width: activeAnnotationWidth(),
+    });
+  }
+
+  function handleCanvasPointerMove(event: PointerEvent) {
+    if (!canvasRef) {
+      return;
+    }
+
+    const point = getCanvasPoint(event, canvasRef);
+
+    if (annotationDragState) {
+      const delta = {
+        x: point.x - annotationDragState.previousPoint.x,
+        y: point.y - annotationDragState.previousPoint.y,
+      };
+
+      if (delta.x !== 0 || delta.y !== 0) {
+        const annotationIndex = annotationDragState.annotationIndex;
+        setAnnotations((current) =>
+          current.map((annotation, index) =>
+            index === annotationIndex
+              ? annotationDragState?.resizeHandle
+                ? resizeAnnotation(annotation, annotationDragState.resizeHandle, point)
+                : translateAnnotation(annotation, delta)
+              : annotation,
+          ),
+        );
+        annotationDragState = {
+          ...annotationDragState,
+          previousPoint: point,
+          didMove: true,
+        };
+      }
+
+      return;
+    }
+
+    if (!draft()) {
+      return;
+    }
+
+    const activeDraft = draft();
+
+    if (!activeDraft) {
+      return;
+    }
+
+    if (activeDraft.type === "pen") {
+      setDraft({
+        ...activeDraft,
+        points: [...activeDraft.points, point],
+      });
+      return;
+    }
+
+    setDraft({
+      ...activeDraft,
+      end: point,
+    });
+  }
+
+  function handleCanvasPointerUp(event: PointerEvent) {
+    if (!canvasRef) {
+      return;
+    }
+
+    if (annotationDragState) {
+      if (canvasRef.hasPointerCapture(event.pointerId)) {
+        canvasRef.releasePointerCapture(event.pointerId);
+      }
+
+      if (annotationDragState.didMove) {
+        const after = annotations()[annotationDragState.annotationIndex];
+        if (after) {
+          setAnnotationHistory((history) => [
+            ...history,
+            {
+              type: "update",
+              index: annotationDragState!.annotationIndex,
+              before: annotationDragState!.originalAnnotation,
+              after,
+            },
+          ]);
+        }
+        setRedoStack([]);
+      }
+
+      annotationDragState = null;
+      setIsMovingAnnotation(false);
+      return;
+    }
+
+    if (!draft()) {
+      return;
+    }
+
+    if (canvasRef.hasPointerCapture(event.pointerId)) {
+      canvasRef.releasePointerCapture(event.pointerId);
+    }
+
+    const activeDraft = draft();
+    setDraft(null);
+
+    if (!activeDraft || isTinyAnnotation(activeDraft)) {
+      return;
+    }
+
+    pushAnnotation(activeDraft);
+  }
+
+  function pushAnnotation(annotation: Annotation) {
+    setAnnotations((current) => [...current, annotation]);
+    setAnnotationHistory((current) => [...current, { type: "add", annotation }]);
+    setRedoStack([]);
+  }
+
+  function undo() {
+    setSelectedAnnotationIndex(null);
+    setAnnotationHistory((history) => {
+      const entry = history.at(-1);
+      if (!entry) {
+        return history;
+      }
+
+      applyUndoEntry(entry);
+      setRedoStack((redo) => [...redo, entry]);
+      return history.slice(0, -1);
+    });
+  }
+
+  function redo() {
+    setSelectedAnnotationIndex(null);
+    setRedoStack((current) => {
+      const entry = current.at(-1);
+      if (entry) {
+        applyRedoEntry(entry);
+        setAnnotationHistory((history) => [...history, entry]);
+      }
+      return current.slice(0, -1);
+    });
+  }
+
+  function clearAnnotations() {
+    const current = annotations();
+    if (current.length > 0) {
+      setAnnotationHistory((history) => [...history, { type: "clear", annotations: current }]);
+      setRedoStack([]);
+      setAnnotations([]);
+    }
+    setDraft(null);
+    setTextDraft(null);
+    setSelectedAnnotationIndex(null);
+  }
+
+  function deleteSelectedAnnotation() {
+    const index = selectedAnnotationIndex();
+    const annotation = index === null ? undefined : annotations()[index];
+    if (index === null || !annotation) {
+      return;
+    }
+
+    setAnnotations((current) => current.filter((_, currentIndex) => currentIndex !== index));
+    setAnnotationHistory((history) => [...history, { type: "delete", annotation, index }]);
+    setRedoStack([]);
+    setSelectedAnnotationIndex(null);
+  }
+
+  function applyUndoEntry(entry: AnnotationHistoryEntry) {
+    if (entry.type === "add") {
+      setAnnotations((current) => current.slice(0, -1));
+      return;
+    }
+
+    if (entry.type === "delete") {
+      setAnnotations((current) => insertAnnotationAt(current, entry.index, entry.annotation));
+      return;
+    }
+
+    if (entry.type === "update") {
+      setAnnotations((current) =>
+        current.map((annotation, index) => (index === entry.index ? entry.before : annotation)),
+      );
+      return;
+    }
+
+    setAnnotations(entry.annotations);
+  }
+
+  function applyRedoEntry(entry: AnnotationHistoryEntry) {
+    if (entry.type === "add") {
+      setAnnotations((current) => [...current, entry.annotation]);
+      return;
+    }
+
+    if (entry.type === "delete") {
+      setAnnotations((current) => current.filter((_, index) => index !== entry.index));
+      return;
+    }
+
+    if (entry.type === "update") {
+      setAnnotations((current) =>
+        current.map((annotation, index) => (index === entry.index ? entry.after : annotation)),
+      );
+      return;
+    }
+
+    setAnnotations([]);
+  }
+
+  function insertAnnotationAt(
+    current: Annotation[],
+    index: number,
+    annotation: Annotation,
+  ) {
+    const next = current.slice();
+    next.splice(Math.max(0, Math.min(index, next.length)), 0, annotation);
+    return next;
+  }
+
+  function applyAnnotationColor(color: string) {
+    setActiveAnnotationColor(color);
+    updateSelectedAnnotation((annotation) => ({ ...annotation, color }));
+  }
+
+  function applyAnnotationWidth(width: number) {
+    const nextWidth = Math.max(1, Math.min(12, Math.round(width)));
+    setActiveAnnotationWidth(nextWidth);
+    updateSelectedAnnotation((annotation) =>
+      "width" in annotation ? { ...annotation, width: nextWidth } : annotation,
+    );
+  }
+
+  function updateSelectedAnnotation(updater: (annotation: Annotation) => Annotation) {
+    const index = selectedAnnotationIndex();
+    const before = index === null ? undefined : annotations()[index];
+    if (index === null || !before) {
+      return;
+    }
+
+    const after = updater(before);
+    if (JSON.stringify(before) === JSON.stringify(after)) {
+      return;
+    }
+
+    setAnnotations((current) =>
+      current.map((annotation, currentIndex) => (currentIndex === index ? after : annotation)),
+    );
+    setAnnotationHistory((history) => [...history, { type: "update", index, before, after }]);
+    setRedoStack([]);
+  }
+
+  function placeTextAnnotation() {
+    const current = textDraft();
+    const value = current?.value.trim();
+
+    if (!current || !value) {
+      setTextDraft(null);
+      return;
+    }
+
+    pushAnnotation(createTextAnnotation(current, value, selected()?.width, activeAnnotationColor()));
+    setTextDraft(null);
+  }
+
+  function redrawOverlay() {
+    if (!canvasRef) {
+      return;
+    }
+
+    const canvas = canvasRef;
+    const context = canvas.getContext("2d");
+    if (!context) {
+      return;
+    }
+
+    context.clearRect(0, 0, canvas.width, canvas.height);
+    for (const annotation of annotations()) {
+      drawAnnotation(context, annotation);
+    }
+
+    const targetHighlight = selected()?.targetHighlight;
+    if (targetHighlight) {
+      drawAnnotation(context, targetHighlight);
+    }
+
+    const activeDraft = draft();
+    if (activeDraft) {
+      drawAnnotation(context, activeDraft);
+    }
+
+    const selectedIndex = selectedAnnotationIndex();
+    const selectedAnnotation = selectedIndex === null ? null : annotations()[selectedIndex];
+
+    if (selectedAnnotation) {
+      drawSelection(context, selectedAnnotation);
+    }
+  }
+
+  function collectExportAnnotations() {
+    const exportAnnotations = [...annotations()];
+    const targetHighlight = selected()?.targetHighlight;
+    if (targetHighlight) {
+      exportAnnotations.unshift(targetHighlight);
+    }
+    const activeDraft = draft();
+
+    if (activeDraft && !isTinyAnnotation(activeDraft)) {
+      exportAnnotations.push(activeDraft);
+    }
+
+    const activeTextDraft = textDraft();
+    const textValue = activeTextDraft?.value.trim();
+
+    if (activeTextDraft && textValue) {
+      exportAnnotations.push(
+        createTextAnnotation(activeTextDraft, textValue, selected()?.width, activeAnnotationColor()),
+      );
+    }
+
+    return exportAnnotations;
+  }
+
+  async function exportAnnotatedScreenshot(
+    screenshot: ScreenshotState,
+    exportAnnotations: Annotation[],
+  ) {
+    const image = await loadImage(screenshot.originalUrl);
+    const canvas = document.createElement("canvas");
+    canvas.width = screenshot.width;
+    canvas.height = screenshot.height;
+
+    const context = canvas.getContext("2d");
+    if (!context) {
+      throw new Error("Annotatie canvas kon niet worden gemaakt.");
+    }
+
+    context.drawImage(image, 0, 0, canvas.width, canvas.height);
+    for (const annotation of exportAnnotations) {
+      drawAnnotation(context, annotation);
+    }
+
+    return new Promise<Blob>((resolve, reject) => {
+      canvas.toBlob((blob) => {
+        if (blob) {
+          resolve(blob);
+          return;
+        }
+        reject(new Error("Geannoteerde screenshot kon niet worden opgeslagen."));
+      }, "image/png");
+    });
+  }
+
+  async function drawTargetHighlightOnBlob(
+    blob: Blob,
+    imageSize: { width: number; height: number },
+    targetHighlight: RectAnnotation,
+  ) {
+    const objectUrl = URL.createObjectURL(blob);
+
+    try {
+      const image = await loadImage(objectUrl);
+      const canvas = document.createElement("canvas");
+      canvas.width = imageSize.width;
+      canvas.height = imageSize.height;
+
+      const context = canvas.getContext("2d");
+      if (!context) {
+        throw new Error("Highlight canvas kon niet worden gemaakt.");
+      }
+
+      context.drawImage(image, 0, 0, canvas.width, canvas.height);
+      drawAnnotation(context, targetHighlight);
+
+      return await new Promise<Blob>((resolve, reject) => {
+        canvas.toBlob((highlightedBlob) => {
+          if (highlightedBlob) {
+            resolve(highlightedBlob);
+            return;
+          }
+          reject(new Error("Highlight kon niet worden opgeslagen."));
+        }, "image/png");
+      });
+    } finally {
+      URL.revokeObjectURL(objectUrl);
+    }
+  }
+
+  const snapshot = () => selected();
+  const selectionRect = () => hoverRect();
+  const currentTextDraft = () => textDraft();
+  const canvasCursor = () => {
+    if (tool() === "select") {
+      return isMovingAnnotation() ? "grabbing" : "grab";
+    }
+
+    if (tool() === "text") {
+      return "text";
+    }
+
+    return "crosshair";
+  };
+
+  return (
+    <div data-feedback-locator-ui="true">
+      <Show when={mode() === "idle"}>
+        <button
+          type="button"
+          class="fixed bottom-5 right-5 z-[2147483000] inline-flex h-11 items-center gap-2 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground shadow-md transition hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          onClick={startSelection}
+          title="Feedback toevoegen (Ctrl+Shift+F)"
+        >
+          <MessageSquarePlus class="h-4 w-4" />
+          Feedback
+        </button>
+      </Show>
+
+      <Show when={error() && mode() === "idle"}>
+        <div class="fixed bottom-20 right-5 z-[2147483000] max-w-sm rounded-md border border-destructive/40 bg-background px-4 py-3 text-sm text-foreground shadow-md">
+          {error()}
+        </div>
+      </Show>
+
+      <Show when={mode() === "selecting"}>
+        <div class="fixed left-1/2 top-4 z-[2147483000] flex -translate-x-1/2 items-center gap-2 rounded-md border bg-background px-3 py-2 text-sm text-foreground shadow-md">
+          <MousePointer2 class="h-4 w-4 text-primary" />
+          Klik op het onderdeel waar je feedback over hebt.
+          <button
+            type="button"
+            class="ml-2 rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
+            onClick={reset}
+            title="Annuleren"
+          >
+            <X class="h-4 w-4" />
+          </button>
+        </div>
+        <Show when={selectionRect()}>
+          {(rect) => (
+            <div
+              class="pointer-events-none fixed z-[2147482999] rounded-md border-2 border-primary bg-primary/10"
+              style={{
+                left: `${rect().left}px`,
+                top: `${rect().top}px`,
+                width: `${rect().width}px`,
+                height: `${rect().height}px`,
+              }}
+            />
+          )}
+        </Show>
+      </Show>
+
+      <Show when={snapshot()}>
+        {(screenshot) => (
+          <div class="fixed inset-0 z-[2147483000] bg-background/95 text-foreground backdrop-blur-sm">
+            <div class="flex h-full min-h-0 flex-col">
+              <div class="flex items-center justify-between border-b bg-background px-4 py-3">
+                <div>
+                  <h2 class="text-base font-semibold">Feedback locator</h2>
+                  <p class="text-sm text-muted-foreground">
+                    Annoteer de screenshot en beschrijf wat er moet gebeuren.
+                  </p>
+                </div>
+                <button
+                  type="button"
+                  class="rounded-md p-2 text-muted-foreground hover:bg-muted hover:text-foreground"
+                  onClick={reset}
+                  title="Sluiten"
+                >
+                  <X class="h-5 w-5" />
+                </button>
+              </div>
+
+              <div class="grid min-h-0 flex-1 grid-cols-1 lg:grid-cols-[minmax(0,1fr)_360px]">
+                <div class="flex min-h-0 flex-col border-r bg-muted/30">
+                  <div class="flex flex-wrap items-center gap-2 border-b bg-background px-4 py-3">
+                    <ToolButton
+                      active={tool() === "select"}
+                      icon={MousePointer2}
+                      label="Selecteer"
+                      onClick={() => setTool("select")}
+                    />
+                    <ToolButton
+                      active={tool() === "pen"}
+                      icon={PenLine}
+                      label="Pen"
+                      onClick={() => setTool("pen")}
+                    />
+                    <ToolButton
+                      active={tool() === "arrow"}
+                      icon={ArrowUpRight}
+                      label="Pijl"
+                      onClick={() => setTool("arrow")}
+                    />
+                    <ToolButton
+                      active={tool() === "rect"}
+                      icon={Square}
+                      label="Rechthoek"
+                      onClick={() => setTool("rect")}
+                    />
+                    <ToolButton
+                      active={tool() === "text"}
+                      icon={Type}
+                      label="Tekst"
+                      onClick={() => setTool("text")}
+                    />
+                    <ToolButton
+                      active={screenshot().captureMode === "page"}
+                      icon={Maximize2}
+                      label="Volledige pagina"
+                      onClick={captureFullPageWithTarget}
+                    />
+                    <div class="flex items-center gap-1 rounded-md border bg-muted/40 px-2 py-1">
+                      <For each={annotationColorOptions}>
+                        {(color) => (
+                          <button
+                            type="button"
+                            class={`h-6 w-6 rounded-full border transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
+                              activeAnnotationColor() === color
+                                ? "scale-110 border-primary ring-2 ring-primary/40"
+                                : "border-border"
+                            }`}
+                            style={{ "background-color": color }}
+                            title={`Kleur ${color}`}
+                            onClick={() => applyAnnotationColor(color)}
+                          />
+                        )}
+                      </For>
+                    </div>
+                    <label class="flex h-9 items-center gap-2 rounded-md border bg-muted/40 px-2 text-xs text-muted-foreground">
+                      Dikte
+                      <input
+                        type="range"
+                        min="1"
+                        max="12"
+                        value={activeAnnotationWidth()}
+                        class="w-20 accent-primary"
+                        onInput={(event) =>
+                          setActiveAnnotationWidth(Number(event.currentTarget.value))
+                        }
+                        onChange={(event) =>
+                          applyAnnotationWidth(Number(event.currentTarget.value))
+                        }
+                      />
+                    </label>
+                    <div class="ml-auto flex items-center gap-2">
+                      <IconButton
+                        disabled={annotationHistory().length === 0}
+                        icon={Undo2}
+                        label="Ongedaan maken"
+                        onClick={undo}
+                      />
+                      <IconButton
+                        disabled={redoStack().length === 0}
+                        icon={Redo2}
+                        label="Opnieuw"
+                        onClick={redo}
+                      />
+                      <IconButton
+                        disabled={annotations().length === 0}
+                        icon={Trash2}
+                        label="Alles wissen"
+                        onClick={clearAnnotations}
+                      />
+                    </div>
+                  </div>
+
+                  <div class="min-h-0 flex-1 overflow-auto p-4">
+                    <div class="mx-auto w-fit max-w-full">
+                      <div class="relative max-w-full overflow-hidden rounded-md border bg-background shadow-sm">
+                        <img
+                          src={screenshot().originalUrl}
+                          alt="Screenshot van geselecteerd onderdeel"
+                          class="block max-h-[calc(100vh-190px)] max-w-full object-contain"
+                          onLoad={() => {
+                            if (canvasRef) {
+                              canvasRef.width = screenshot().width;
+                              canvasRef.height = screenshot().height;
+                              redrawOverlay();
+                            }
+                          }}
+                        />
+                        <canvas
+                          ref={canvasRef}
+                          class="absolute inset-0 h-full w-full touch-none"
+                          style={{ cursor: canvasCursor() }}
+                          width={screenshot().width}
+                          height={screenshot().height}
+                          onPointerDown={handleCanvasPointerDown}
+                          onPointerMove={handleCanvasPointerMove}
+                          onPointerUp={handleCanvasPointerUp}
+                          onPointerCancel={handleCanvasPointerUp}
+                        />
+                        <Show when={currentTextDraft()}>
+                          {(text) => (
+                            <div
+                              class="absolute min-w-56 rounded-md border bg-background p-2 shadow-md"
+                              style={{
+                                left: `${(text().point.x / screenshot().width) * 100}%`,
+                                top: `${(text().point.y / screenshot().height) * 100}%`,
+                              }}
+                            >
+                              <input
+                                ref={textInputRef}
+                                class="h-9 w-full rounded-md border bg-background px-2 text-sm outline-none focus:ring-2 focus:ring-ring"
+                                value={text().value}
+                                placeholder="Tekst op screenshot"
+                                onInput={(event) =>
+                                  setTextDraft({
+                                    point: text().point,
+                                    value: event.currentTarget.value,
+                                  })
+                                }
+                                onKeyDown={(event) => {
+                                  if (event.key === "Enter") {
+                                    placeTextAnnotation();
+                                  }
+                                  if (event.key === "Escape") {
+                                    setTextDraft(null);
+                                  }
+                                }}
+                              />
+                              <div class="mt-2 flex justify-end gap-2">
+                                <button
+                                  type="button"
+                                  class="rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-muted"
+                                  onClick={() => setTextDraft(null)}
+                                >
+                                  Annuleer
+                                </button>
+                                <button
+                                  type="button"
+                                  class="rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground"
+                                  onClick={placeTextAnnotation}
+                                >
+                                  Plaats
+                                </button>
+                              </div>
+                            </div>
+                          )}
+                        </Show>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <aside class="flex min-h-0 flex-col bg-background">
+                  <div class="space-y-4 overflow-auto p-4">
+                    <Show when={linearResult()}>
+                      {(issue) => (
+                        <div class="rounded-md border border-primary/40 bg-primary/10 p-3 text-sm">
+                          <div class="flex items-center gap-2 font-medium">
+                            <CheckCircle2 class="h-4 w-4 text-primary" />
+                            Linear issue aangemaakt
+                          </div>
+                          <a
+                            class="mt-2 inline-flex items-center gap-1 text-primary underline-offset-4 hover:underline"
+                            href={issue().issueUrl}
+                            target="_blank"
+                            rel="noreferrer"
+                          >
+                            {issue().issueIdentifier}
+                            <ArrowUpRight class="h-3.5 w-3.5" />
+                          </a>
+                        </div>
+                      )}
+                    </Show>
+
+                    <Show when={agentSession()}>
+                      {(session) => (
+                        <div class="rounded-md border border-sky-500/40 bg-sky-500/10 p-3 text-sm">
+                          <div class="flex items-center gap-2 font-medium">
+                            <CheckCircle2 class="h-4 w-4 text-sky-500" />
+                            Agent sessie gestart
+                          </div>
+                          <Show
+                            when={session().sessionUrl}
+                            fallback={
+                              <div class="mt-2 text-muted-foreground">{session().sessionId}</div>
+                            }
+                          >
+                            {(url) => (
+                              <a
+                                class="mt-2 inline-flex items-center gap-1 text-sky-600 underline-offset-4 hover:underline"
+                                href={url()}
+                                target="_blank"
+                                rel="noreferrer"
+                              >
+                                {session().sessionTitle || session().sessionId}
+                                <ArrowUpRight class="h-3.5 w-3.5" />
+                              </a>
+                            )}
+                          </Show>
+                        </div>
+                      )}
+                    </Show>
+
+                    <Show when={codexThread()}>
+                      {(thread) => (
+                        <div class="rounded-md border border-violet-500/40 bg-violet-500/10 p-3 text-sm">
+                          <div class="flex items-center gap-2 font-medium">
+                            <CheckCircle2 class="h-4 w-4 text-violet-500" />
+                            Codex thread gestart
+                          </div>
+                          <div class="mt-2 text-muted-foreground">
+                            {thread().threadTitle || thread().threadId}
+                          </div>
+                          <Show when={thread().linearIssue}>
+                            {(issue) => (
+                              <a
+                                class="mt-2 inline-flex items-center gap-1 text-violet-600 underline-offset-4 hover:underline"
+                                href={issue().issueUrl}
+                                target="_blank"
+                                rel="noreferrer"
+                              >
+                                Linear: {issue().issueIdentifier}
+                                <ArrowUpRight class="h-3.5 w-3.5" />
+                              </a>
+                            )}
+                          </Show>
+                        </div>
+                      )}
+                    </Show>
+
+                    <Show when={openCodeThread()}>
+                      {(thread) => (
+                        <div class="rounded-md border border-emerald-500/40 bg-emerald-500/10 p-3 text-sm">
+                          <div class="flex items-center gap-2 font-medium">
+                            <CheckCircle2 class="h-4 w-4 text-emerald-500" />
+                            OpenCode sessie gestart
+                          </div>
+                          <div class="mt-2 text-muted-foreground">
+                            {thread().sessionTitle || thread().sessionId}
+                          </div>
+                          <Show when={thread().linearIssue}>
+                            {(issue) => (
+                              <a
+                                class="mt-2 inline-flex items-center gap-1 text-emerald-600 underline-offset-4 hover:underline"
+                                href={issue().issueUrl}
+                                target="_blank"
+                                rel="noreferrer"
+                              >
+                                Linear: {issue().issueIdentifier}
+                                <ArrowUpRight class="h-3.5 w-3.5" />
+                              </a>
+                            )}
+                          </Show>
+                        </div>
+                      )}
+                    </Show>
+
+                    <div>
+                      <label class="mb-2 block text-sm font-medium">Feedback</label>
+                      <textarea
+                        class="min-h-40 w-full resize-y rounded-md border bg-background px-3 py-2 text-sm outline-none transition focus:ring-2 focus:ring-ring disabled:opacity-60"
+                        placeholder="Beschrijf wat er anders moet, wat je verwachtte of wat niet klopt."
+                        value={prompt()}
+                        disabled={mode() === "submitting"}
+                        onInput={(event) => setPrompt(event.currentTarget.value)}
+                      />
+                    </div>
+
+                    <div>
+                      <label class="mb-2 block text-sm font-medium">Bijlagen</label>
+                      <label class="flex cursor-pointer items-center gap-2 rounded-md border bg-background px-3 py-2 text-sm text-foreground transition hover:bg-muted">
+                        <FileUp class="h-4 w-4" />
+                        Voeg bestanden toe
+                        <input
+                          type="file"
+                          class="sr-only"
+                          multiple
+                          disabled={mode() === "submitting"}
+                          onChange={(event) => {
+                            setAttachments(Array.from(event.currentTarget.files ?? []));
+                          }}
+                        />
+                      </label>
+                      <Show when={attachments().length > 0}>
+                        <div class="mt-2 space-y-1 text-xs text-muted-foreground">
+                          {attachments().map((file) => (
+                            <div class="truncate rounded border bg-muted/30 px-2 py-1">
+                              {file.name} ({formatBytes(file.size)})
+                            </div>
+                          ))}
+                        </div>
+                      </Show>
+                    </div>
+
+                    <div>
+                      <label class="mb-2 block text-sm font-medium">Video-opname</label>
+                      <div class="space-y-2 rounded-md border bg-background p-3">
+                        <div class="flex flex-wrap items-center gap-2">
+                          <Show
+                            when={recordingState() === "recording"}
+                            fallback={
+                              <button
+                                type="button"
+                                class="inline-flex h-9 items-center gap-2 rounded-md border px-3 text-sm font-medium transition hover:bg-muted disabled:opacity-60"
+                                disabled={mode() === "submitting" || !supportsScreenRecording()}
+                                onClick={startRecording}
+                              >
+                                <Video class="h-4 w-4" />
+                                Neem video op
+                              </button>
+                            }
+                          >
+                            <button
+                              type="button"
+                              class="inline-flex h-9 items-center gap-2 rounded-md border border-destructive/40 bg-destructive/10 px-3 text-sm font-medium transition hover:bg-destructive/15"
+                              disabled={mode() === "submitting"}
+                              onClick={stopRecording}
+                            >
+                              <StopCircle class="h-4 w-4" />
+                              Stop opname
+                            </button>
+                          </Show>
+
+                          <Show when={recordingBlob()}>
+                            {(blob) => (
+                              <>
+                                <a
+                                  class="inline-flex h-9 max-w-full items-center gap-2 truncate rounded-md border px-3 text-sm underline-offset-4 hover:bg-muted hover:underline"
+                                  href={recordingUrl() ?? undefined}
+                                  target="_blank"
+                                  rel="noreferrer"
+                                >
+                                  <Video class="h-4 w-4 shrink-0" />
+                                  <span class="truncate">
+                                    screen-recording.webm ({formatBytes(blob().size)},{" "}
+                                    {formatDuration(recordingDurationMs())})
+                                  </span>
+                                </a>
+                                <button
+                                  type="button"
+                                  class="inline-flex h-9 items-center gap-2 rounded-md border px-3 text-sm font-medium transition hover:bg-muted"
+                                  disabled={mode() === "submitting"}
+                                  onClick={clearRecording}
+                                >
+                                  <Trash2 class="h-4 w-4" />
+                                  Wissen
+                                </button>
+                              </>
+                            )}
+                          </Show>
+                        </div>
+                        <Show when={!supportsScreenRecording()}>
+                          <div class="text-xs text-muted-foreground">
+                            Video-opname is niet beschikbaar in deze browser.
+                          </div>
+                        </Show>
+                      </div>
+                    </div>
+
+                    <Accordion title="Broncontext" defaultOpen>
+                      <div class="space-y-1">
+                        <div>Component: {screenshot().source?.componentName ?? "niet gevonden"}</div>
+                        <div>
+                          Bestand:{" "}
+                          {screenshot().source
+                            ? `${screenshot().source?.filePath}:${screenshot().source?.line}`
+                            : "niet gevonden"}
+                        </div>
+                        <div>Element: {screenshot().source?.elementName ?? "onbekend"}</div>
+                        <div>Capture: {screenshot().captureMode === "page" ? "volledige pagina" : "element"}</div>
+                      </div>
+                    </Accordion>
+
+                    <Accordion title="Console">
+                      <ConsolePreview preview={contextPreview()} />
+                    </Accordion>
+
+                    <Accordion title="Scoped state">
+                      <ScopedStatePreview preview={contextPreview()} />
+                    </Accordion>
+
+                    <Accordion title="Context">
+                      <ContextPreview
+                        attachments={attachments()}
+                        captureMode={screenshot().captureMode}
+                        preview={contextPreview()}
+                      />
+                    </Accordion>
+
+                    <Show when={error()}>
+                      <div class="rounded-md border border-destructive/40 bg-destructive/10 p-3 text-sm text-foreground">
+                        {error()}
+                      </div>
+                    </Show>
+                  </div>
+
+                  <div class="mt-auto space-y-2 border-t p-4">
+                    <button
+                      type="button"
+                      class="inline-flex h-10 w-full items-center justify-center gap-2 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-60"
+                      disabled={mode() === "submitting" || !prompt().trim()}
+                      onClick={submitFeedback}
+                    >
+                      <Show
+                        when={submitTarget() === "linear"}
+                        fallback={
+                          <>
+                            <Send class="h-4 w-4" />
+                            Verstuur naar Linear
+                          </>
+                        }
+                      >
+                        <LoaderCircle class="h-4 w-4 animate-spin" />
+                        Versturen...
+                      </Show>
+                    </button>
+                    <button
+                      type="button"
+                      class="inline-flex h-10 w-full items-center justify-center gap-2 rounded-md border bg-background px-4 text-sm font-medium text-foreground transition hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-60"
+                      disabled={
+                        mode() === "submitting" ||
+                        !prompt().trim() ||
+                        !props.locator.config.startAgentSession
+                      }
+                      onClick={startAgentSession}
+                      title={
+                        props.locator.config.startAgentSession
+                          ? "Start agent met deze feedback"
+                          : "Agent sessies zijn nog niet gekoppeld"
+                      }
+                    >
+                      <Show
+                        when={submitTarget() === "agent"}
+                        fallback={
+                          <>
+                            <Bot class="h-4 w-4" />
+                            Start agent
+                          </>
+                        }
+                      >
+                        <LoaderCircle class="h-4 w-4 animate-spin" />
+                        Agent starten...
+                      </Show>
+                    </button>
+                    <div class="grid grid-cols-2 gap-2">
+                      <button
+                        type="button"
+                        class="inline-flex h-10 w-full items-center justify-center gap-2 rounded-md border bg-background px-3 text-sm font-medium text-foreground transition hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-60"
+                        disabled={
+                          mode() === "submitting" ||
+                          !prompt().trim() ||
+                          !props.locator.config.startCodexThread
+                        }
+                        onClick={startCodexThread}
+                        title={
+                          props.locator.config.startCodexThread
+                            ? "Start Codex thread in plan mode"
+                            : "Codex threads zijn nog niet gekoppeld"
+                        }
+                      >
+                        <Show
+                          when={submitTarget() === "codex"}
+                          fallback={
+                            <>
+                              <Bot class="h-4 w-4" />
+                              Codex
+                            </>
+                          }
+                        >
+                          <LoaderCircle class="h-4 w-4 animate-spin" />
+                          Codex...
+                        </Show>
+                      </button>
+                      <button
+                        type="button"
+                        class="inline-flex h-10 w-full items-center justify-center gap-2 rounded-md border bg-background px-3 text-sm font-medium text-foreground transition hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-60"
+                        disabled={
+                          mode() === "submitting" ||
+                          !prompt().trim() ||
+                          !props.locator.config.startOpenCodeThread
+                        }
+                        onClick={startOpenCodeThread}
+                        title={
+                          props.locator.config.startOpenCodeThread
+                            ? "Start OpenCode sessie in plan mode"
+                            : "OpenCode sessies zijn nog niet gekoppeld"
+                        }
+                      >
+                        <Show
+                          when={submitTarget() === "opencode"}
+                          fallback={
+                            <>
+                              <Bot class="h-4 w-4" />
+                              OpenCode
+                            </>
+                          }
+                        >
+                          <LoaderCircle class="h-4 w-4 animate-spin" />
+                          OpenCode...
+                        </Show>
+                      </button>
+                    </div>
+                  </div>
+                </aside>
+              </div>
+            </div>
+          </div>
+        )}
+      </Show>
+    </div>
+  );
+};
+
+function ToolButton(props: {
+  active: boolean;
+  icon: Component<JSX.IntrinsicElements["svg"]>;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      class={`inline-flex h-9 items-center gap-2 rounded-md border px-3 text-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
+        props.active
+          ? "border-primary bg-primary text-primary-foreground"
+          : "bg-background text-foreground hover:bg-muted"
+      }`}
+      onClick={props.onClick}
+      title={props.label}
+    >
+      <props.icon class="h-4 w-4" />
+      {props.label}
+    </button>
+  );
+}
+
+function IconButton(props: {
+  disabled?: boolean;
+  icon: Component<JSX.IntrinsicElements["svg"]>;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      class="inline-flex h-9 w-9 items-center justify-center rounded-md border bg-background text-foreground transition hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40"
+      disabled={props.disabled}
+      onClick={props.onClick}
+      title={props.label}
+    >
+      <props.icon class="h-4 w-4" />
+      <span class="sr-only">{props.label}</span>
+    </button>
+  );
+}
+
+function Accordion(props: {
+  title: string;
+  defaultOpen?: boolean;
+  children: JSX.Element;
+}) {
+  return (
+    <details
+      class="group rounded-md border bg-muted/40 text-xs text-muted-foreground"
+      open={props.defaultOpen}
+    >
+      <summary class="flex cursor-pointer list-none items-center justify-between gap-2 px-3 py-2 font-medium text-foreground">
+        {props.title}
+        <ChevronDown class="h-4 w-4 transition group-open:rotate-180" />
+      </summary>
+      <div class="border-t px-3 py-2">{props.children}</div>
+    </details>
+  );
+}
+
+function ContextPreview(props: {
+  attachments: File[];
+  captureMode: ScreenshotState["captureMode"];
+  preview: FeedbackLocatorContextPreview | null;
+}) {
+  const context = () => ({
+    url: window.location.href,
+    route: `${window.location.pathname}${window.location.search}${window.location.hash}`,
+    viewport: {
+      width: window.innerWidth,
+      height: window.innerHeight,
+      devicePixelRatio: window.devicePixelRatio,
+    },
+    browser: {
+      language: navigator.language,
+      platform: navigator.platform,
+      timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    },
+    captureMode: props.captureMode,
+    attachments: props.attachments.map((file) => ({
+      name: file.name,
+      type: file.type || "application/octet-stream",
+      size: file.size,
+    })),
+    collectedContext: props.preview?.context ?? {},
+    contextErrors: props.preview?.contextErrors ?? [],
+  });
+
+  return (
+    <pre class="max-h-72 overflow-auto whitespace-pre-wrap break-words rounded border bg-background/70 p-2 font-mono text-[11px] leading-relaxed">
+      {JSON.stringify(context(), null, 2)}
+    </pre>
+  );
+}
+
+function ConsolePreview(props: { preview: FeedbackLocatorContextPreview | null }) {
+  const logs = () =>
+    ((props.preview?.context.feedbackLocator as { consoleLogs?: unknown[] } | undefined)
+      ?.consoleLogs ?? []) as Array<{
+      type?: string;
+      message?: string;
+      createdAt?: string;
+    }>;
+
+  return (
+    <Show when={logs().length > 0} fallback={<div>Geen console logs vastgelegd.</div>}>
+      <div class="space-y-2">
+        {logs()
+          .slice(-12)
+          .map((log) => (
+            <div class="rounded border bg-background/70 p-2">
+              <div class="font-medium text-foreground">{log.type ?? "console"}</div>
+              <div class="mt-1 break-words">{log.message ?? ""}</div>
+            </div>
+          ))}
+      </div>
+    </Show>
+  );
+}
+
+function ScopedStatePreview(props: { preview: FeedbackLocatorContextPreview | null }) {
+  const scopedState = () => props.preview?.context.scopedState;
+
+  return <JsonPreview value={scopedState() ?? "Geen scoped state voor dit element."} />;
+}
+
+function JsonPreview(props: { value: unknown }) {
+  return (
+    <pre class="max-h-72 overflow-auto whitespace-pre-wrap break-words rounded border bg-background/70 p-2 font-mono text-[11px] leading-relaxed">
+      {typeof props.value === "string" ? props.value : JSON.stringify(props.value, null, 2)}
+    </pre>
+  );
+}
+
+function findSelectableElement(target: EventTarget | null) {
+  if (!(target instanceof HTMLElement)) {
+    return null;
+  }
+
+  if (target.closest("[data-feedback-locator-ui='true']")) {
+    return null;
+  }
+
+  return (target.closest("[data-feedback-locator-id]") as HTMLElement | null) ?? target;
+}
+
+function formatBytes(size: number) {
+  if (size < 1024) {
+    return `${size} B`;
+  }
+
+  if (size < 1024 * 1024) {
+    return `${Math.round(size / 1024)} KB`;
+  }
+
+  return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function openPendingAgentSessionWindow() {
+  return openPendingExternalWindow(
+    "Feedback agent starten...",
+    "De context wordt voorbereid en de agent chat wordt geopend.",
+  );
+}
+
+function openAgentSessionWindow(
+  session: { sessionUrl?: string },
+  pendingWindow?: Window | null,
+) {
+  if (typeof window === "undefined" || !session.sessionUrl) {
+    return;
+  }
+
+  if (pendingWindow && !pendingWindow.closed) {
+    pendingWindow.location.href = session.sessionUrl;
+    return;
+  }
+
+  window.open(session.sessionUrl, "_blank", "noopener,noreferrer");
+}
+
+function openPendingExternalWindow(title: string, message: string) {
+  if (typeof window === "undefined") {
+    return null;
+  }
+
+  const pendingWindow = window.open("about:blank", "_blank");
+
+  if (!pendingWindow) {
+    return null;
+  }
+
+  try {
+    pendingWindow.opener = null;
+    pendingWindow.document.title = title;
+    pendingWindow.document.body.innerHTML = `<main style="font-family: system-ui, sans-serif; padding: 24px;"><h1 style="font-size: 18px;">${escapeHtml(title)}</h1><p>${escapeHtml(message)}</p></main>`;
+  } catch {
+    // Cross-browser popup handling can deny document writes; navigation still works.
+  }
+
+  return pendingWindow;
+}
+
+function openExternalWindow(url: string | undefined, pendingWindow?: Window | null) {
+  if (typeof window === "undefined" || !url) {
+    return;
+  }
+
+  if (pendingWindow && !pendingWindow.closed) {
+    pendingWindow.location.href = url;
+    return;
+  }
+
+  window.open(url, "_blank", "noopener,noreferrer");
+}
+
+function closePendingWindow(pendingWindow?: Window | null) {
+  try {
+    if (pendingWindow && !pendingWindow.closed) {
+      pendingWindow.close();
+    }
+  } catch {
+    // Ignore popup cleanup errors.
+  }
+}
+
+function escapeHtml(value: string) {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
+
+function formatDuration(durationMs: number | null) {
+  if (!durationMs) {
+    return "0s";
+  }
+
+  return `${Math.max(1, Math.round(durationMs / 1000))}s`;
+}
+
+function supportsScreenRecording() {
+  if (typeof navigator === "undefined" || typeof MediaRecorder === "undefined") {
+    return false;
+  }
+
+  const mediaDevices = navigator.mediaDevices as
+    | (MediaDevices & {
+        getDisplayMedia?: MediaDevices["getDisplayMedia"];
+      })
+    | undefined;
+
+  return typeof mediaDevices?.getDisplayMedia === "function";
+}
+
+function getSupportedRecordingMimeType() {
+  if (typeof MediaRecorder === "undefined") {
+    return "";
+  }
+
+  const candidates = ["video/webm;codecs=vp9", "video/webm;codecs=vp8", "video/webm"];
+  return candidates.find((mimeType) => MediaRecorder.isTypeSupported(mimeType)) ?? "";
+}
+
+function rectToBounds(rect: DOMRect): FeedbackLocatorBounds {
+  return {
+    x: rect.x,
+    y: rect.y,
+    width: rect.width,
+    height: rect.height,
+    top: rect.top,
+    right: rect.right,
+    bottom: rect.bottom,
+    left: rect.left,
+  };
+}
+
+function matchesHotkey(event: KeyboardEvent, hotkey: FeedbackLocatorHotkey) {
+  return (
+    event.key.toLowerCase() === hotkey.key.toLowerCase() &&
+    Boolean(event.ctrlKey) === Boolean(hotkey.ctrl) &&
+    Boolean(event.shiftKey) === Boolean(hotkey.shift) &&
+    Boolean(event.altKey) === Boolean(hotkey.alt) &&
+    Boolean(event.metaKey) === Boolean(hotkey.meta)
+  );
+}
+
+function isEditableTarget(target: EventTarget | null) {
+  if (!(target instanceof HTMLElement)) {
+    return false;
+  }
+
+  const tagName = target.tagName.toLowerCase();
+  return (
+    tagName === "input" ||
+    tagName === "textarea" ||
+    tagName === "select" ||
+    target.isContentEditable
+  );
+}
+
+function getCanvasPoint(event: PointerEvent, canvas: HTMLCanvasElement) {
+  const rect = canvas.getBoundingClientRect();
+  return {
+    x: ((event.clientX - rect.left) / rect.width) * canvas.width,
+    y: ((event.clientY - rect.top) / rect.height) * canvas.height,
+  };
+}
+
+function isTinyAnnotation(annotation: Annotation) {
+  if (annotation.type === "pen") {
+    return annotation.points.length < 2;
+  }
+
+  if (annotation.type === "text") {
+    return annotation.text.trim().length === 0;
+  }
+
+  return (
+    Math.abs(annotation.start.x - annotation.end.x) < 4 &&
+    Math.abs(annotation.start.y - annotation.end.y) < 4
+  );
+}
+
+function findAnnotationAtPoint(annotations: Annotation[], point: FeedbackLocatorPoint) {
+  for (let index = annotations.length - 1; index >= 0; index -= 1) {
+    if (isPointInAnnotation(annotations[index]!, point)) {
+      return index;
+    }
+  }
+
+  return null;
+}
+
+function isPointInAnnotation(annotation: Annotation, point: FeedbackLocatorPoint) {
+  if (annotation.type === "text") {
+    return isPointInBounds(point, getAnnotationBounds(annotation, hitTolerance));
+  }
+
+  if (annotation.type === "rect") {
+    return isPointNearRect(point, annotation, hitTolerance);
+  }
+
+  if (annotation.type === "arrow") {
+    return (
+      distanceToSegment(point, annotation.start, annotation.end) <= hitTolerance ||
+      isPointInBounds(point, getAnnotationBounds(annotation, hitTolerance))
+    );
+  }
+
+  for (let index = 1; index < annotation.points.length; index += 1) {
+    if (
+      distanceToSegment(point, annotation.points[index - 1]!, annotation.points[index]!) <=
+      hitTolerance
+    ) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+function translateAnnotation(annotation: Annotation, delta: FeedbackLocatorPoint): Annotation {
+  if (annotation.type === "pen") {
+    return {
+      ...annotation,
+      points: annotation.points.map((point) => addPoint(point, delta)),
+    };
+  }
+
+  if (annotation.type === "text") {
+    return {
+      ...annotation,
+      point: addPoint(annotation.point, delta),
+    };
+  }
+
+  return {
+    ...annotation,
+    start: addPoint(annotation.start, delta),
+    end: addPoint(annotation.end, delta),
+  };
+}
+
+function resizeAnnotation(
+  annotation: Annotation,
+  handle: AnnotationResizeHandle,
+  point: FeedbackLocatorPoint,
+): Annotation {
+  if (annotation.type === "arrow") {
+    if (handle === "start") {
+      return { ...annotation, start: point };
+    }
+
+    if (handle === "end") {
+      return { ...annotation, end: point };
+    }
+  }
+
+  if (annotation.type === "text") {
+    const bounds = getAnnotationBounds(annotation);
+    const nextBounds = resizeBounds(bounds, handle, point);
+    const nextFontSize = Math.max(12, Math.round(nextBounds.height / 1.35));
+    return {
+      ...annotation,
+      point: {
+        x: nextBounds.left,
+        y: nextBounds.top + nextFontSize,
+      },
+      fontSize: nextFontSize,
+    };
+  }
+
+  if (annotation.type === "rect") {
+    const bounds = resizeBounds(getAnnotationBounds(annotation), handle, point);
+    return {
+      ...annotation,
+      start: { x: bounds.left, y: bounds.top },
+      end: { x: bounds.right, y: bounds.bottom },
+    };
+  }
+
+  if (annotation.type === "pen") {
+    const currentBounds = getAnnotationBounds(annotation);
+    const nextBounds = resizeBounds(currentBounds, handle, point);
+    return {
+      ...annotation,
+      points: annotation.points.map((annotationPoint) =>
+        transformPointBetweenBounds(annotationPoint, currentBounds, nextBounds),
+      ),
+    };
+  }
+
+  return annotation;
+}
+
+function addPoint(point: FeedbackLocatorPoint, delta: FeedbackLocatorPoint) {
+  return {
+    x: point.x + delta.x,
+    y: point.y + delta.y,
+  };
+}
+
+function drawSelection(context: CanvasRenderingContext2D, annotation: Annotation) {
+  const bounds = getAnnotationBounds(annotation, 8);
+
+  context.save();
+  context.strokeStyle = selectionColor;
+  context.lineWidth = 2;
+  context.setLineDash([8, 5]);
+  context.strokeRect(bounds.left, bounds.top, bounds.width, bounds.height);
+  context.setLineDash([]);
+  for (const handle of getResizeHandles(annotation)) {
+    context.fillStyle = selectionColor;
+    context.strokeStyle = "rgba(15, 23, 42, 0.85)";
+    context.lineWidth = 2;
+    context.fillRect(
+      handle.point.x - resizeHandleSize / 2,
+      handle.point.y - resizeHandleSize / 2,
+      resizeHandleSize,
+      resizeHandleSize,
+    );
+    context.strokeRect(
+      handle.point.x - resizeHandleSize / 2,
+      handle.point.y - resizeHandleSize / 2,
+      resizeHandleSize,
+      resizeHandleSize,
+    );
+  }
+  context.restore();
+}
+
+function findResizeHandleAtPoint(annotation: Annotation, point: FeedbackLocatorPoint) {
+  const handles = getResizeHandles(annotation);
+  return (
+    handles.find(
+      (handle) =>
+        Math.abs(point.x - handle.point.x) <= resizeHandleSize &&
+        Math.abs(point.y - handle.point.y) <= resizeHandleSize,
+    )?.handle ?? null
+  );
+}
+
+function getResizeHandles(annotation: Annotation) {
+  if (annotation.type === "arrow") {
+    return [
+      { handle: "start" as const, point: annotation.start },
+      { handle: "end" as const, point: annotation.end },
+    ];
+  }
+
+  const bounds = getAnnotationBounds(annotation);
+  return [
+    { handle: "nw" as const, point: { x: bounds.left, y: bounds.top } },
+    { handle: "ne" as const, point: { x: bounds.right, y: bounds.top } },
+    { handle: "sw" as const, point: { x: bounds.left, y: bounds.bottom } },
+    { handle: "se" as const, point: { x: bounds.right, y: bounds.bottom } },
+  ];
+}
+
+function resizeBounds(
+  bounds: AnnotationBounds,
+  handle: AnnotationResizeHandle,
+  point: FeedbackLocatorPoint,
+) {
+  let left = bounds.left;
+  let top = bounds.top;
+  let right = bounds.right;
+  let bottom = bounds.bottom;
+
+  if (handle === "nw" || handle === "sw") {
+    left = point.x;
+  }
+  if (handle === "ne" || handle === "se") {
+    right = point.x;
+  }
+  if (handle === "nw" || handle === "ne") {
+    top = point.y;
+  }
+  if (handle === "sw" || handle === "se") {
+    bottom = point.y;
+  }
+
+  return boundsFromEdges(
+    Math.min(left, right),
+    Math.min(top, bottom),
+    Math.max(left, right),
+    Math.max(top, bottom),
+  );
+}
+
+function transformPointBetweenBounds(
+  point: FeedbackLocatorPoint,
+  currentBounds: AnnotationBounds,
+  nextBounds: AnnotationBounds,
+) {
+  const xProgress =
+    currentBounds.width === 0 ? 0 : (point.x - currentBounds.left) / currentBounds.width;
+  const yProgress =
+    currentBounds.height === 0 ? 0 : (point.y - currentBounds.top) / currentBounds.height;
+
+  return {
+    x: nextBounds.left + xProgress * nextBounds.width,
+    y: nextBounds.top + yProgress * nextBounds.height,
+  };
+}
+
+function createTextAnnotation(
+  draft: TextDraft,
+  text: string,
+  imageWidth = 900,
+  color = annotationColor,
+): TextAnnotation {
+  return {
+    type: "text",
+    point: draft.point,
+    text,
+    color,
+    fontSize: Math.max(18, Math.round(imageWidth / 45)),
+  };
+}
+
+function getAnnotationBounds(annotation: Annotation, padding = 0): AnnotationBounds {
+  if (annotation.type === "text") {
+    const estimatedWidth = Math.max(
+      annotation.fontSize * 2,
+      annotation.text.length * annotation.fontSize * 0.62,
+    );
+    const estimatedHeight = annotation.fontSize * 1.35;
+
+    return boundsFromEdges(
+      annotation.point.x - padding,
+      annotation.point.y - annotation.fontSize - padding,
+      annotation.point.x + estimatedWidth + padding,
+      annotation.point.y + estimatedHeight * 0.25 + padding,
+    );
+  }
+
+  if (annotation.type === "pen") {
+    const xs = annotation.points.map((point) => point.x);
+    const ys = annotation.points.map((point) => point.y);
+
+    return boundsFromEdges(
+      Math.min(...xs) - padding,
+      Math.min(...ys) - padding,
+      Math.max(...xs) + padding,
+      Math.max(...ys) + padding,
+    );
+  }
+
+  return boundsFromEdges(
+    Math.min(annotation.start.x, annotation.end.x) - padding,
+    Math.min(annotation.start.y, annotation.end.y) - padding,
+    Math.max(annotation.start.x, annotation.end.x) + padding,
+    Math.max(annotation.start.y, annotation.end.y) + padding,
+  );
+}
+
+function boundsFromEdges(
+  left: number,
+  top: number,
+  right: number,
+  bottom: number,
+): AnnotationBounds {
+  return {
+    left,
+    top,
+    right,
+    bottom,
+    width: right - left,
+    height: bottom - top,
+  };
+}
+
+function isPointInBounds(point: FeedbackLocatorPoint, bounds: AnnotationBounds) {
+  return (
+    point.x >= bounds.left &&
+    point.x <= bounds.right &&
+    point.y >= bounds.top &&
+    point.y <= bounds.bottom
+  );
+}
+
+function isPointNearRect(
+  point: FeedbackLocatorPoint,
+  annotation: RectAnnotation,
+  tolerance: number,
+) {
+  const left = Math.min(annotation.start.x, annotation.end.x);
+  const right = Math.max(annotation.start.x, annotation.end.x);
+  const top = Math.min(annotation.start.y, annotation.end.y);
+  const bottom = Math.max(annotation.start.y, annotation.end.y);
+
+  const withinHorizontal = point.x >= left - tolerance && point.x <= right + tolerance;
+  const withinVertical = point.y >= top - tolerance && point.y <= bottom + tolerance;
+  const nearHorizontalEdge =
+    Math.abs(point.y - top) <= tolerance || Math.abs(point.y - bottom) <= tolerance;
+  const nearVerticalEdge =
+    Math.abs(point.x - left) <= tolerance || Math.abs(point.x - right) <= tolerance;
+
+  return (withinHorizontal && nearHorizontalEdge) || (withinVertical && nearVerticalEdge);
+}
+
+function distanceToSegment(
+  point: FeedbackLocatorPoint,
+  start: FeedbackLocatorPoint,
+  end: FeedbackLocatorPoint,
+) {
+  const lengthSquared =
+    (end.x - start.x) * (end.x - start.x) + (end.y - start.y) * (end.y - start.y);
+
+  if (lengthSquared === 0) {
+    return Math.hypot(point.x - start.x, point.y - start.y);
+  }
+
+  const progress = Math.max(
+    0,
+    Math.min(
+      1,
+      ((point.x - start.x) * (end.x - start.x) + (point.y - start.y) * (end.y - start.y)) /
+        lengthSquared,
+    ),
+  );
+  const closest = {
+    x: start.x + progress * (end.x - start.x),
+    y: start.y + progress * (end.y - start.y),
+  };
+
+  return Math.hypot(point.x - closest.x, point.y - closest.y);
+}
+
+function drawAnnotation(context: CanvasRenderingContext2D, annotation: Annotation) {
+  context.save();
+  context.strokeStyle = annotation.color;
+  context.fillStyle = annotation.color;
+  context.lineWidth = "width" in annotation ? annotation.width : annotationWidth;
+  context.lineCap = "round";
+  context.lineJoin = "round";
+
+  if (annotation.type === "pen") {
+    drawPen(context, annotation);
+  }
+
+  if (annotation.type === "rect") {
+    context.strokeRect(
+      annotation.start.x,
+      annotation.start.y,
+      annotation.end.x - annotation.start.x,
+      annotation.end.y - annotation.start.y,
+    );
+  }
+
+  if (annotation.type === "arrow") {
+    drawArrow(context, annotation);
+  }
+
+  if (annotation.type === "text") {
+    context.font = `600 ${annotation.fontSize}px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`;
+    context.lineWidth = Math.max(3, annotation.fontSize / 8);
+    context.strokeStyle = "rgba(0,0,0,0.65)";
+    context.strokeText(annotation.text, annotation.point.x, annotation.point.y);
+    context.fillStyle = annotation.color;
+    context.fillText(annotation.text, annotation.point.x, annotation.point.y);
+  }
+
+  context.restore();
+}
+
+function drawPen(context: CanvasRenderingContext2D, annotation: PenAnnotation) {
+  const [firstPoint, ...rest] = annotation.points;
+  if (!firstPoint) {
+    return;
+  }
+
+  context.beginPath();
+  context.moveTo(firstPoint.x, firstPoint.y);
+  for (const point of rest) {
+    context.lineTo(point.x, point.y);
+  }
+  context.stroke();
+}
+
+function drawArrow(context: CanvasRenderingContext2D, annotation: ArrowAnnotation) {
+  const angle = Math.atan2(
+    annotation.end.y - annotation.start.y,
+    annotation.end.x - annotation.start.x,
+  );
+  const headLength = 18;
+
+  context.beginPath();
+  context.moveTo(annotation.start.x, annotation.start.y);
+  context.lineTo(annotation.end.x, annotation.end.y);
+  context.stroke();
+
+  context.beginPath();
+  context.moveTo(annotation.end.x, annotation.end.y);
+  context.lineTo(
+    annotation.end.x - headLength * Math.cos(angle - Math.PI / 6),
+    annotation.end.y - headLength * Math.sin(angle - Math.PI / 6),
+  );
+  context.lineTo(
+    annotation.end.x - headLength * Math.cos(angle + Math.PI / 6),
+    annotation.end.y - headLength * Math.sin(angle + Math.PI / 6),
+  );
+  context.closePath();
+  context.fill();
+}
+
+function getImageSize(blob: Blob) {
+  const url = URL.createObjectURL(blob);
+  return loadImage(url)
+    .then((image) => ({
+      width: image.naturalWidth,
+      height: image.naturalHeight,
+    }))
+    .finally(() => URL.revokeObjectURL(url));
+}
+
+function loadImage(url: string) {
+  return new Promise<HTMLImageElement>((resolve, reject) => {
+    const image = new Image();
+    image.onload = () => resolve(image);
+    image.onerror = () => reject(new Error("Screenshot kon niet worden geladen."));
+    image.src = url;
+  });
+}