d2d-feedbackkit 0.0.0 → 0.1.1

package/README.md

@@ -11,3 +11,86 @@ import { createFeedbackLocator } from "d2d-feedbackkit";
 import { mountFeedbackLocatorElement } from "d2d-feedbackkit/web-component";
 import feedbackKitBabelPlugin from "d2d-feedbackkit/vite-plugin";
 ```
+
+## Solid host with your own button
+
+```tsx
+import { createSignal } from "solid-js";
+import { createFeedbackLocator } from "d2d-feedbackkit";
+import { FeedbackLocatorRoot } from "d2d-feedbackkit/widget";
+import "d2d-feedbackkit/styles.css";
+
+const locator = createFeedbackLocator({
+  appKey: "morgo-app",
+  appName: "Morgo App",
+  showFloatingButton: false,
+  submitFeedback: async (input) => {
+    const response = await fetch("/api/feedback", {
+      method: "POST",
+      body: input.formData,
+    });
+    return response.json();
+  },
+});
+
+export function FeedbackButton() {
+  const [open, setOpen] = createSignal(false);
+
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>
+        Feedback
+      </button>
+      <FeedbackLocatorRoot
+        locator={locator}
+        open={open()}
+        onOpenChange={setOpen}
+        onSubmitted={() => toast.success("Feedback verstuurd")}
+      />
+    </>
+  );
+}
+```
+
+## Web component host
+
+```ts
+import { createFeedbackLocator } from "d2d-feedbackkit";
+import { defineFeedbackLocatorElement } from "d2d-feedbackkit/web-component";
+
+defineFeedbackLocatorElement({ shadowRoot: true });
+
+const locator = createFeedbackLocator({
+  appKey: "host-app",
+  appName: "Host App",
+  showFloatingButton: false,
+  enableVideoRecording: false,
+  theme: {
+    primary: "45 96% 53%",
+    primaryForeground: "30 70% 8%",
+    ring: "45 96% 53%",
+  },
+  submitFeedback: async (input) => {
+    const response = await fetch("https://feedbackkit.d2d.cloud/api/submissions", {
+      method: "POST",
+      headers: { "x-api-key": "<feedbackkit-api-key>" },
+      body: input.formData,
+    });
+    return response.json();
+  },
+});
+
+const widget = document.querySelector("d2d-feedbackkit");
+widget.locator = locator;
+widget.showFloatingButton = false;
+
+document.querySelector("#feedback-button").addEventListener("click", () => {
+  widget.open = true;
+});
+
+widget.addEventListener("feedbackkit-submitted", () => {
+  showToast("Feedback verstuurd");
+});
+```
+
+Without the `open` property the widget remains backwards compatible and shows its own floating feedback button by default.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "d2d-feedbackkit",
-  "version": "0.0.0",
+  "version": "0.1.1",
   "type": "module",
   "description": "SolidJS feedback widget, source locator, and integration helpers.",
   "license": "UNLICENSED",
@@ -37,6 +37,13 @@
     "./agent": {
       "types": "./src/agent.ts",
       "default": "./src/agent.ts"
+    },
+    "./styles": {
+      "types": "./src/styles.ts",
+      "default": "./src/styles.ts"
+    },
+    "./styles.css": {
+      "default": "./src/styles.css"
     }
   },
   "files": [
@@ -49,6 +56,8 @@
     "src/shortcuts.ts",
     "src/solid.tsx",
     "src/source.ts",
+    "src/styles.css",
+    "src/styles.ts",
     "src/types.ts",
     "src/vite-plugin.ts",
     "src/web-component.tsx",

package/src/index.ts

@@ -34,6 +34,7 @@ export function createFeedbackLocator(config: FeedbackLocatorConfig): FeedbackLo
   const resolvedConfig = {
     ...config,
     hotkey: config.hotkey ?? defaultFeedbackLocatorHotkey,
+    showFloatingButton: config.showFloatingButton ?? true,
     contextProviders: config.contextProviders ?? [],
     sourceCollector: config.sourceCollector ?? getFeedbackLocatorSourceForElement,
   };

package/src/solid.tsx

@@ -1,8 +1,6 @@
 import { toBlob } from "html-to-image";
 import {
   ArrowUpRight,
-  Bot,
-  CheckCircle2,
   ChevronDown,
   FileUp,
   Maximize2,
@@ -32,24 +30,31 @@ import {
 } from "solid-js";
 import type {
   FeedbackLocator,
-  FeedbackLocatorAgentSessionResult,
   FeedbackLocatorBounds,
-  FeedbackLocatorCodexThreadResult,
+  FeedbackLocatorCloseReason,
   FeedbackLocatorContextPreview,
+  FeedbackLocatorHostedSubmitResult,
   FeedbackLocatorHotkey,
-  FeedbackLocatorOpenCodeThreadResult,
   FeedbackLocatorPoint,
   FeedbackLocatorSourceMetadata,
-  FeedbackLocatorSubmitResult,
+  FeedbackLocatorTheme,
 } from "./types";
 import { createShortcutResolver } from "./shortcuts";
 
-type FeedbackLocatorRootProps = {
+export type FeedbackLocatorRootProps = {
   locator: FeedbackLocator;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  onClose?: (reason: FeedbackLocatorCloseReason) => void;
+  onSubmitted?: (result: FeedbackLocatorHostedSubmitResult) => void;
+  showFloatingButton?: boolean;
+  enableVideoRecording?: boolean;
+  theme?: FeedbackLocatorTheme;
 };
 
 type FeedbackLocatorMode = "idle" | "selecting" | "annotating" | "submitting";
-type FeedbackLocatorSubmitTarget = "linear" | "agent" | "codex" | "opencode";
+type FeedbackLocatorSubmitTarget = "feedback";
 type AnnotationTool = "select" | "pen" | "rect" | "arrow" | "text";
 
 type PenAnnotation = {
@@ -194,6 +199,7 @@ export const FeedbackLocatorRoot: Component<FeedbackLocatorRootProps> = (props)
   let annotationDragState: AnnotationDragState | null = null;
 
   const [mode, setMode] = createSignal<FeedbackLocatorMode>("idle");
+  const [uncontrolledOpen, setUncontrolledOpen] = createSignal(Boolean(props.defaultOpen));
   const [hoverRect, setHoverRect] = createSignal<FeedbackLocatorBounds | null>(null);
   const [selected, setSelected] = createSignal<ScreenshotState | null>(null);
   const [annotations, setAnnotations] = createSignal<Annotation[]>([]);
@@ -218,14 +224,8 @@ export const FeedbackLocatorRoot: Component<FeedbackLocatorRootProps> = (props)
   const [recordingUrl, setRecordingUrl] = createSignal<string | null>(null);
   const [recordingDurationMs, setRecordingDurationMs] = createSignal<number | null>(null);
   const [error, setError] = createSignal<string | null>(null);
+  const [successToast, setSuccessToast] = 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;
@@ -240,7 +240,7 @@ export const FeedbackLocatorRoot: Component<FeedbackLocatorRootProps> = (props)
 
       if (matchesHotkey(event, props.locator.config.hotkey!)) {
         event.preventDefault();
-        startSelection();
+        openWidget();
       }
     };
 
@@ -252,6 +252,18 @@ export const FeedbackLocatorRoot: Component<FeedbackLocatorRootProps> = (props)
     });
   });
 
+  createEffect(() => {
+    const shouldBeOpen = isWidgetOpen();
+
+    if (shouldBeOpen && mode() === "idle") {
+      beginSelection();
+    }
+
+    if (!shouldBeOpen && mode() !== "idle") {
+      resetState();
+    }
+  });
+
   createEffect(() => {
     if (mode() !== "selecting") {
       return;
@@ -280,7 +292,7 @@ export const FeedbackLocatorRoot: Component<FeedbackLocatorRootProps> = (props)
     const handleKeydown = (event: KeyboardEvent) => {
       if (event.key === "Escape") {
         event.preventDefault();
-        reset();
+        requestClose("escape");
       }
     };
 
@@ -387,7 +399,7 @@ export const FeedbackLocatorRoot: Component<FeedbackLocatorRootProps> = (props)
       }
 
       if (action === "close") {
-        reset();
+        requestClose("escape");
       }
     };
 
@@ -395,18 +407,38 @@ export const FeedbackLocatorRoot: Component<FeedbackLocatorRootProps> = (props)
     onCleanup(() => document.removeEventListener("keydown", handleKeydown));
   });
 
-  function startSelection() {
+  function isWidgetOpen() {
+    return props.open ?? uncontrolledOpen();
+  }
+
+  function setWidgetOpen(open: boolean) {
+    if (props.open === undefined) {
+      setUncontrolledOpen(open);
+    }
+    props.onOpenChange?.(open);
+  }
+
+  function openWidget() {
+    setWidgetOpen(true);
+    if (mode() === "idle") {
+      beginSelection();
+    }
+  }
+
+  function requestClose(reason: FeedbackLocatorCloseReason) {
+    resetState();
+    setWidgetOpen(false);
+    props.onClose?.(reason);
+  }
+
+  function beginSelection() {
     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;
@@ -417,7 +449,7 @@ export const FeedbackLocatorRoot: Component<FeedbackLocatorRootProps> = (props)
     setMode("selecting");
   }
 
-  function reset() {
+  function resetState() {
     const current = selected();
     if (current) {
       URL.revokeObjectURL(current.originalUrl);
@@ -440,8 +472,6 @@ export const FeedbackLocatorRoot: Component<FeedbackLocatorRootProps> = (props)
     clearRecording();
     setError(null);
     setSubmitTarget(null);
-    setLinearResult(null);
-    setAgentSession(null);
   }
 
   async function captureElement(element: HTMLElement) {
@@ -630,68 +660,12 @@ export const FeedbackLocatorRoot: Component<FeedbackLocatorRootProps> = (props)
   }
 
   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);
+    await runSubmission("feedback", async (prepared) => {
+      const submitResult = await props.locator.config.submitFeedback(prepared);
+      props.onSubmitted?.(submitResult);
+      setSuccessToast("Feedback verstuurd");
+      window.setTimeout(() => setSuccessToast(null), 4000);
+      requestClose("submitted");
     });
   }
 
@@ -711,8 +685,10 @@ export const FeedbackLocatorRoot: Component<FeedbackLocatorRootProps> = (props)
       }
 
       await submit(prepared);
-      applySubmissionAnnotations(prepared);
-      setMode("annotating");
+      if (mode() === "submitting") {
+        applySubmissionAnnotations(prepared);
+        setMode("annotating");
+      }
     } catch (submitError) {
       setMode("annotating");
       setError(
@@ -1336,6 +1312,17 @@ export const FeedbackLocatorRoot: Component<FeedbackLocatorRootProps> = (props)
   const snapshot = () => selected();
   const selectionRect = () => hoverRect();
   const currentTextDraft = () => textDraft();
+  const isVideoRecordingEnabled = () =>
+    (props.enableVideoRecording ?? props.locator.config.enableVideoRecording) === true;
+  const themeStyle = (): JSX.CSSProperties => {
+    const theme = props.theme ?? props.locator.config.theme;
+
+    return {
+      ...(theme?.primary ? { "--primary": theme.primary } : {}),
+      ...(theme?.primaryForeground ? { "--primary-foreground": theme.primaryForeground } : {}),
+      ...(theme?.ring ? { "--ring": theme.ring } : {}),
+    };
+  };
   const canvasCursor = () => {
     if (tool() === "select") {
       return isMovingAnnotation() ? "grabbing" : "grab";
@@ -1349,12 +1336,17 @@ export const FeedbackLocatorRoot: Component<FeedbackLocatorRootProps> = (props)
   };
 
   return (
-    <div data-feedback-locator-ui="true">
-      <Show when={mode() === "idle"}>
+    <div data-feedback-locator-ui="true" style={themeStyle()}>
+      <Show
+        when={
+          mode() === "idle" &&
+          (props.showFloatingButton ?? props.locator.config.showFloatingButton) !== false
+        }
+      >
         <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}
+          onClick={openWidget}
           title="Feedback toevoegen (Ctrl+Shift+F)"
         >
           <MessageSquarePlus class="h-4 w-4" />
@@ -1368,6 +1360,14 @@ export const FeedbackLocatorRoot: Component<FeedbackLocatorRootProps> = (props)
         </div>
       </Show>
 
+      <Show when={successToast()}>
+        {(message) => (
+          <div class="fixed bottom-20 right-5 z-[2147483000] max-w-sm rounded-md border border-primary/30 bg-background px-4 py-3 text-sm font-medium text-foreground shadow-md">
+            {message()}
+          </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" />
@@ -1375,7 +1375,7 @@ export const FeedbackLocatorRoot: Component<FeedbackLocatorRootProps> = (props)
           <button
             type="button"
             class="ml-2 rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
-            onClick={reset}
+            onClick={() => requestClose("user")}
             title="Annuleren"
           >
             <X class="h-4 w-4" />
@@ -1410,7 +1410,7 @@ export const FeedbackLocatorRoot: Component<FeedbackLocatorRootProps> = (props)
                 <button
                   type="button"
                   class="rounded-md p-2 text-muted-foreground hover:bg-muted hover:text-foreground"
-                  onClick={reset}
+                  onClick={() => requestClose("user")}
                   title="Sluiten"
                 >
                   <X class="h-5 w-5" />
@@ -1592,109 +1592,6 @@ export const FeedbackLocatorRoot: Component<FeedbackLocatorRootProps> = (props)
 
                 <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
@@ -1732,70 +1629,72 @@ export const FeedbackLocatorRoot: Component<FeedbackLocatorRootProps> = (props)
                       </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>
+                    <Show when={isVideoRecordingEnabled()}>
+                      <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={mode() === "submitting"}
-                                  onClick={clearRecording}
+                                  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}
                                 >
-                                  <Trash2 class="h-4 w-4" />
-                                  Wissen
+                                  <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>
-                        <Show when={!supportsScreenRecording()}>
-                          <div class="text-xs text-muted-foreground">
-                            Video-opname is niet beschikbaar in deze browser.
-                          </div>
-                        </Show>
                       </div>
-                    </div>
+                    </Show>
 
                     <Accordion title="Broncontext" defaultOpen>
                       <div class="space-y-1">
@@ -1842,11 +1741,11 @@ export const FeedbackLocatorRoot: Component<FeedbackLocatorRootProps> = (props)
                       onClick={submitFeedback}
                     >
                       <Show
-                        when={submitTarget() === "linear"}
+                        when={submitTarget() === "feedback"}
                         fallback={
                           <>
                             <Send class="h-4 w-4" />
-                            Verstuur naar Linear
+                            Verstuur feedback
                           </>
                         }
                       >
@@ -1854,92 +1753,6 @@ export const FeedbackLocatorRoot: Component<FeedbackLocatorRootProps> = (props)
                         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>
@@ -2111,83 +1924,6 @@ function formatBytes(size: number) {
   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";

package/src/styles.css

@@ -0,0 +1,21 @@
+:where([data-feedback-locator-ui="true"]) {
+  --background: 0 0% 3%;
+  --foreground: 0 0% 96%;
+  --muted: 0 0% 9%;
+  --muted-foreground: 0 0% 66%;
+  --border: 0 0% 18%;
+  --primary: 45 96% 53%;
+  --primary-foreground: 30 70% 8%;
+  --destructive: 0 84% 60%;
+  --ring: 45 96% 53%;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+:where([data-feedback-locator-ui="true"], [data-feedback-locator-ui="true"] *) {
+  box-sizing: border-box;
+}
+
+:where([data-feedback-locator-ui="true"] button, [data-feedback-locator-ui="true"] textarea, [data-feedback-locator-ui="true"] input) {
+  font: inherit;
+}

package/src/styles.ts

@@ -0,0 +1,35 @@
+export const defaultFeedbackLocatorStyles = `
+:host {
+  color-scheme: dark;
+  --background: 0 0% 3%;
+  --foreground: 0 0% 96%;
+  --muted: 0 0% 9%;
+  --muted-foreground: 0 0% 66%;
+  --border: 0 0% 18%;
+  --primary: 45 96% 53%;
+  --primary-foreground: 30 70% 8%;
+  --destructive: 0 84% 60%;
+  --ring: 45 96% 53%;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+[data-feedback-locator-ui="true"],
+[data-feedback-locator-ui="true"] * {
+  box-sizing: border-box;
+}
+
+[data-feedback-locator-ui="true"] button,
+[data-feedback-locator-ui="true"] textarea,
+[data-feedback-locator-ui="true"] input {
+  font: inherit;
+}
+
+[data-feedback-locator-ui="true"] button {
+  cursor: pointer;
+}
+
+[data-feedback-locator-ui="true"] button:disabled {
+  cursor: not-allowed;
+}
+`;

package/src/types.ts

@@ -143,7 +143,24 @@ export type FeedbackLocatorLinearIssueReference = {
   issueUrl: string;
 };
 
-export type FeedbackLocatorSubmitResult = FeedbackLocatorLinearIssueReference;
+export type FeedbackLocatorSubmitResult = Partial<FeedbackLocatorLinearIssueReference> & {
+  submissionId?: string;
+  appId?: string;
+  appKey?: string;
+  linearIssue?: FeedbackLocatorLinearIssueReference;
+  agentJob?: {
+    id: string;
+    provider: "codex" | "opencode";
+    status: string;
+  };
+};
+export type FeedbackLocatorHostedSubmitResult = FeedbackLocatorSubmitResult;
+export type FeedbackLocatorCloseReason =
+  | "user"
+  | "submitted"
+  | "escape"
+  | "outside"
+  | "error";
 
 export type FeedbackLocatorAgentSessionResult = {
   sessionId: string;
@@ -174,6 +191,12 @@ export type FeedbackLocatorSourceCollector = (
   target: HTMLElement,
 ) => FeedbackLocatorSourceMetadata | null;
 
+export type FeedbackLocatorTheme = {
+  primary?: string;
+  primaryForeground?: string;
+  ring?: string;
+};
+
 export type FeedbackLocatorConfig = {
   appKey: string;
   appName: string;
@@ -191,6 +214,9 @@ export type FeedbackLocatorConfig = {
   ) => Promise<FeedbackLocatorOpenCodeThreadResult>;
   contextProviders?: FeedbackLocatorContextProvider[];
   hotkey?: FeedbackLocatorHotkey;
+  showFloatingButton?: boolean;
+  enableVideoRecording?: boolean;
+  theme?: FeedbackLocatorTheme;
   sourceCollector?: FeedbackLocatorSourceCollector;
 };
 
@@ -200,6 +226,9 @@ export type FeedbackLocator = {
       FeedbackLocatorConfig,
       | "contextProviders"
       | "hotkey"
+      | "showFloatingButton"
+      | "enableVideoRecording"
+      | "theme"
       | "sourceCollector"
       | "startAgentSession"
       | "startCodexThread"

package/src/web-component.tsx

@@ -1,6 +1,11 @@
 import { render } from "solid-js/web";
 import { FeedbackLocatorRoot } from "./solid";
-import type { FeedbackLocator } from "./types";
+import { defaultFeedbackLocatorStyles } from "./styles";
+import type {
+  FeedbackLocator,
+  FeedbackLocatorCloseReason,
+  FeedbackLocatorHostedSubmitResult,
+} from "./types";
 
 export type FeedbackLocatorCustomElementOptions = {
   tagName?: string;
@@ -10,6 +15,8 @@ export type FeedbackLocatorCustomElementOptions = {
 
 export type FeedbackLocatorCustomElement = HTMLElement & {
   locator: FeedbackLocator | null;
+  open: boolean;
+  showFloatingButton: boolean;
 };
 
 export const defaultFeedbackLocatorElementName = "d2d-feedbackkit";
@@ -26,9 +33,15 @@ export function defineFeedbackLocatorElement(
 
   class FeedbackKitElement extends HTMLElement {
     #locator: FeedbackLocator | null = null;
+    #open = false;
+    #showFloatingButton = true;
     #dispose: (() => void) | undefined;
     #mount: HTMLElement | undefined;
 
+    static get observedAttributes() {
+      return ["open", "show-floating-button"];
+    }
+
     get locator() {
       return this.#locator;
     }
@@ -38,10 +51,51 @@ export function defineFeedbackLocatorElement(
       this.#render();
     }
 
+    get open() {
+      return this.#open;
+    }
+
+    set open(open: boolean) {
+      const nextOpen = Boolean(open);
+      if (this.#open === nextOpen) {
+        return;
+      }
+
+      this.#open = nextOpen;
+      this.#syncBooleanAttribute("open", nextOpen);
+      this.#dispatchOpenChange(nextOpen);
+      this.#render();
+    }
+
+    get showFloatingButton() {
+      return this.#showFloatingButton;
+    }
+
+    set showFloatingButton(showFloatingButton: boolean) {
+      const nextShowFloatingButton = Boolean(showFloatingButton);
+      if (this.#showFloatingButton === nextShowFloatingButton) {
+        return;
+      }
+
+      this.#showFloatingButton = nextShowFloatingButton;
+      this.#syncBooleanAttribute("show-floating-button", nextShowFloatingButton);
+      this.#render();
+    }
+
     connectedCallback() {
       this.#render();
     }
 
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
+      if (name === "open") {
+        this.open = newValue !== null;
+      }
+
+      if (name === "show-floating-button") {
+        this.showFloatingButton = newValue !== null;
+      }
+    }
+
     disconnectedCallback() {
       this.#dispose?.();
       this.#dispose = undefined;
@@ -57,7 +111,20 @@ export function defineFeedbackLocatorElement(
       this.#mount = this.#mount ?? this.#createMount();
       this.#mount.replaceChildren();
       this.#dispose = render(
-        () => <FeedbackLocatorRoot locator={this.#locator!} />,
+        () => (
+          <FeedbackLocatorRoot
+            locator={this.#locator!}
+            open={this.#open}
+            showFloatingButton={this.#showFloatingButton}
+            onOpenChange={(open) => {
+              this.#open = open;
+              this.#syncBooleanAttribute("open", open);
+              this.#dispatchOpenChange(open);
+            }}
+            onClose={(reason) => this.#dispatchClose(reason)}
+            onSubmitted={(result) => this.#dispatchSubmitted(result)}
+          />
+        ),
         this.#mount,
       );
     }
@@ -73,8 +140,9 @@ export function defineFeedbackLocatorElement(
         : options.styles
           ? [options.styles]
           : [];
+      const allStyles = [defaultFeedbackLocatorStyles, ...styles];
 
-      for (const styleText of styles) {
+      for (const styleText of allStyles) {
         const style = document.createElement("style");
         style.textContent = styleText;
         root.append(style);
@@ -84,6 +152,46 @@ export function defineFeedbackLocatorElement(
       root.append(mount);
       return mount;
     }
+
+    #syncBooleanAttribute(name: string, enabled: boolean) {
+      if (enabled && !this.hasAttribute(name)) {
+        this.setAttribute(name, "");
+      }
+
+      if (!enabled && this.hasAttribute(name)) {
+        this.removeAttribute(name);
+      }
+    }
+
+    #dispatchOpenChange(open: boolean) {
+      this.dispatchEvent(
+        new CustomEvent("feedbackkit-open-change", {
+          bubbles: true,
+          composed: true,
+          detail: { open },
+        }),
+      );
+    }
+
+    #dispatchClose(reason: FeedbackLocatorCloseReason) {
+      this.dispatchEvent(
+        new CustomEvent("feedbackkit-close", {
+          bubbles: true,
+          composed: true,
+          detail: { reason },
+        }),
+      );
+    }
+
+    #dispatchSubmitted(result: FeedbackLocatorHostedSubmitResult) {
+      this.dispatchEvent(
+        new CustomEvent("feedbackkit-submitted", {
+          bubbles: true,
+          composed: true,
+          detail: { result },
+        }),
+      );
+    }
   }
 
   customElements.define(tagName, FeedbackKitElement);