d2d-feedbackkit 0.0.0

package/src/index.ts

@@ -0,0 +1,358 @@
+import { getFeedbackLocatorSourceForElement } from "./source";
+import type {
+  FeedbackLocator,
+  FeedbackLocatorBrowserMetadata,
+  FeedbackLocatorConfig,
+  FeedbackLocatorContextPreview,
+  FeedbackLocatorContextRegistration,
+  FeedbackLocatorContextScope,
+  FeedbackLocatorContextEntry,
+  FeedbackLocatorElementMetadata,
+  FeedbackLocatorHotkey,
+  FeedbackLocatorScopedContextCollector,
+  FeedbackLocatorViewportMetadata,
+} from "./types";
+
+export * from "./types";
+export {
+  feedbackLocatorDataAttribute,
+  feedbackLocatorDataKey,
+  getFeedbackLocatorSourceForElement,
+  parseFeedbackLocatorId,
+} from "./source";
+
+export const defaultFeedbackLocatorHotkey: FeedbackLocatorHotkey = {
+  key: "F",
+  ctrl: true,
+  shift: true,
+};
+
+export function createFeedbackLocator(config: FeedbackLocatorConfig): FeedbackLocator {
+  installConsoleCapture();
+  const scopedContexts = new Map<string, NormalizedContextRegistration>();
+
+  const resolvedConfig = {
+    ...config,
+    hotkey: config.hotkey ?? defaultFeedbackLocatorHotkey,
+    contextProviders: config.contextProviders ?? [],
+    sourceCollector: config.sourceCollector ?? getFeedbackLocatorSourceForElement,
+  };
+
+  return {
+    config: resolvedConfig,
+    registerContext: (key, registration) => {
+      scopedContexts.set(key, normalizeContextRegistration(registration));
+      return () => scopedContexts.delete(key);
+    },
+    collectContext: (input) =>
+      collectContextPreview(resolvedConfig.contextProviders, scopedContexts, input),
+    createMetadata: async ({ prompt, targetElement, source }) => {
+      const { context, contextErrors } = await collectContextPreview(
+        resolvedConfig.contextProviders,
+        scopedContexts,
+        { targetElement },
+      );
+
+      return {
+        id: createSubmissionId(),
+        appKey: resolvedConfig.appKey,
+        appName: resolvedConfig.appName,
+        prompt,
+        createdAt: new Date().toISOString(),
+        url: window.location.href,
+        route: `${window.location.pathname}${window.location.search}${window.location.hash}`,
+        browser: collectBrowserMetadata(),
+        viewport: collectViewportMetadata(),
+        element: collectElementMetadata(targetElement),
+        source,
+        context,
+        contextErrors,
+      };
+    },
+  };
+}
+
+type FeedbackLocatorConsoleLog = {
+  type:
+    | "debug"
+    | "info"
+    | "log"
+    | "warn"
+    | "error"
+    | "window-error"
+    | "unhandled-rejection";
+  message: string;
+  createdAt: string;
+};
+
+type NormalizedContextRegistration = {
+  scope?: FeedbackLocatorContextScope;
+  collect: FeedbackLocatorScopedContextCollector;
+};
+
+declare global {
+  interface Window {
+    __feedbackKitConsoleInstalled?: boolean;
+    __feedbackKitConsoleLogs?: FeedbackLocatorConsoleLog[];
+  }
+}
+
+function installConsoleCapture() {
+  if (typeof window === "undefined" || window.__feedbackKitConsoleInstalled) {
+    return;
+  }
+
+  window.__feedbackKitConsoleInstalled = true;
+  window.__feedbackKitConsoleLogs = window.__feedbackKitConsoleLogs ?? [];
+
+  patchConsoleMethod("debug");
+  patchConsoleMethod("info");
+  patchConsoleMethod("log");
+  patchConsoleMethod("warn");
+  patchConsoleMethod("error");
+
+  window.addEventListener("error", (event) => {
+    pushConsoleLog("window-error", [
+      event.message,
+      event.filename ? `${event.filename}:${event.lineno}:${event.colno}` : undefined,
+    ]);
+  });
+
+  window.addEventListener("unhandledrejection", (event) => {
+    pushConsoleLog("unhandled-rejection", [event.reason]);
+  });
+}
+
+function patchConsoleMethod(type: Extract<FeedbackLocatorConsoleLog["type"], keyof Console>) {
+  const original = console[type].bind(console);
+
+  console[type] = ((...args: unknown[]) => {
+    pushConsoleLog(type, args);
+    original(...args);
+  }) as Console[typeof type];
+}
+
+function pushConsoleLog(type: FeedbackLocatorConsoleLog["type"], args: unknown[]) {
+  const logs = window.__feedbackKitConsoleLogs ?? [];
+  logs.push({
+    type,
+    message: args.map(formatConsoleValue).filter(Boolean).join(" ").slice(0, 1500),
+    createdAt: new Date().toISOString(),
+  });
+  window.__feedbackKitConsoleLogs = logs.slice(-250);
+}
+
+function formatConsoleValue(value: unknown): string {
+  if (value instanceof Error) {
+    return `${value.name}: ${value.message}`;
+  }
+
+  if (typeof value === "string") {
+    return value;
+  }
+
+  try {
+    return JSON.stringify(sanitizeContextValue(value));
+  } catch {
+    return String(value);
+  }
+}
+
+function createSubmissionId() {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+    return crypto.randomUUID();
+  }
+
+  return `feedback-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+
+function normalizeContextRegistration(
+  registration: FeedbackLocatorContextRegistration,
+): NormalizedContextRegistration {
+  if (typeof registration === "function") {
+    return { collect: registration };
+  }
+
+  return registration;
+}
+
+async function collectContextPreview(
+  providers: NonNullable<FeedbackLocatorConfig["contextProviders"]>,
+  scopedContexts: Map<string, NormalizedContextRegistration>,
+  input: { targetElement: HTMLElement },
+): Promise<FeedbackLocatorContextPreview> {
+  const context: Record<string, unknown> = {};
+  const contextErrors: string[] = [];
+
+  for (const provider of providers) {
+    try {
+      const result = await provider(input);
+      const entries = Array.isArray(result) ? result : result ? [result] : [];
+
+      for (const entry of entries) {
+        if (isContextEntry(entry)) {
+          context[entry.key] = sanitizeContextValue(entry.data);
+        }
+      }
+    } catch (error) {
+      contextErrors.push(
+        error instanceof Error ? error.message : "Context provider mislukt",
+      );
+    }
+  }
+
+  const scopedState: Record<string, unknown> = {};
+  for (const [key, registration] of scopedContexts.entries()) {
+    if (!isRegistrationInScope(registration, input.targetElement)) {
+      continue;
+    }
+
+    try {
+      scopedState[key] = sanitizeContextValue(await registration.collect(input));
+    } catch (error) {
+      contextErrors.push(
+        error instanceof Error
+          ? `Scoped context ${key}: ${error.message}`
+          : `Scoped context ${key} mislukt`,
+      );
+    }
+  }
+
+  if (Object.keys(scopedState).length > 0) {
+    context.scopedState = scopedState;
+  }
+
+  context.feedbackLocator = sanitizeContextValue({
+    consoleLogs: getRecentConsoleLogs(),
+  });
+
+  return { context, contextErrors };
+}
+
+function isRegistrationInScope(
+  registration: NormalizedContextRegistration,
+  targetElement: HTMLElement,
+) {
+  const scope =
+    typeof registration.scope === "function" ? registration.scope() : registration.scope;
+
+  if (!scope) {
+    return true;
+  }
+
+  return scope === targetElement || scope.contains(targetElement);
+}
+
+function isContextEntry(value: unknown): value is FeedbackLocatorContextEntry {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "key" in value &&
+    typeof (value as { key?: unknown }).key === "string"
+  );
+}
+
+function getRecentConsoleLogs() {
+  return (window.__feedbackKitConsoleLogs ?? []).slice(-250);
+}
+
+function sanitizeContextValue(value: unknown, depth = 0): unknown {
+  if (depth > 6) {
+    return "[max-depth]";
+  }
+
+  if (value === null || value === undefined) {
+    return value;
+  }
+
+  if (typeof value === "string") {
+    return value.length > 1000 ? `${value.slice(0, 1000)}... [truncated]` : value;
+  }
+
+  if (typeof value === "number" || typeof value === "boolean") {
+    return value;
+  }
+
+  if (value instanceof Date) {
+    return value.toISOString();
+  }
+
+  if (value instanceof Error) {
+    return {
+      name: value.name,
+      message: value.message,
+    };
+  }
+
+  if (Array.isArray(value)) {
+    const items = value.slice(0, 50).map((item) => sanitizeContextValue(item, depth + 1));
+    if (value.length > 50) {
+      items.push(`[${value.length - 50} items truncated]`);
+    }
+    return items;
+  }
+
+  if (typeof value === "object") {
+    const output: Record<string, unknown> = {};
+    const entries = Object.entries(value as Record<string, unknown>).slice(0, 100);
+    for (const [key, item] of entries) {
+      output[key] = shouldRedactKey(key) ? "[redacted]" : sanitizeContextValue(item, depth + 1);
+    }
+    if (Object.keys(value as Record<string, unknown>).length > 100) {
+      output.__truncatedKeys = true;
+    }
+    return output;
+  }
+
+  return String(value);
+}
+
+function shouldRedactKey(key: string) {
+  return /token|password|secret|authorization|cookie|apikey|api_key|session/i.test(key);
+}
+
+function collectBrowserMetadata(): FeedbackLocatorBrowserMetadata {
+  return {
+    userAgent: navigator.userAgent,
+    language: navigator.language,
+    platform: navigator.platform,
+    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+  };
+}
+
+function collectViewportMetadata(): FeedbackLocatorViewportMetadata {
+  return {
+    width: window.innerWidth,
+    height: window.innerHeight,
+    devicePixelRatio: window.devicePixelRatio,
+  };
+}
+
+function collectElementMetadata(
+  element: HTMLElement,
+): FeedbackLocatorElementMetadata {
+  const rect = element.getBoundingClientRect();
+  const text = element.textContent?.replace(/\s+/g, " ").trim() ?? "";
+  const className =
+    typeof element.className === "string" ? element.className : null;
+
+  return {
+    tagName: element.tagName.toLowerCase(),
+    id: element.id || null,
+    className,
+    role: element.getAttribute("role"),
+    ariaLabel: element.getAttribute("aria-label"),
+    name: element.getAttribute("name"),
+    text: text ? text.slice(0, 500) : null,
+    bounds: {
+      x: rect.x,
+      y: rect.y,
+      width: rect.width,
+      height: rect.height,
+      top: rect.top,
+      right: rect.right,
+      bottom: rect.bottom,
+      left: rect.left,
+    },
+  };
+}

package/src/linear.ts

@@ -0,0 +1,130 @@
+import type { FeedbackLocatorAsset, FeedbackLocatorMetadata } from "./types";
+
+export type LinearIssueAssets = {
+  screenshotUrl?: string;
+  annotatedScreenshotUrl?: string;
+  recording?: FeedbackLocatorAsset;
+  attachments?: FeedbackLocatorAsset[];
+};
+
+export function buildLinearIssueTitle(metadata: FeedbackLocatorMetadata) {
+  const sourceLabel =
+    metadata.source?.componentName ??
+    metadata.source?.elementName ??
+    metadata.element.tagName;
+  const promptSummary = metadata.prompt
+    .replace(/\s+/g, " ")
+    .trim()
+    .slice(0, 90);
+
+  return `[Feedback] ${sourceLabel}: ${promptSummary || "Nieuwe feedback"}`;
+}
+
+export function buildLinearIssueDescription(
+  metadata: FeedbackLocatorMetadata,
+  assets: LinearIssueAssets = metadata.assets ?? {},
+) {
+  const source = metadata.source;
+  const screenshotUrl = assets.annotatedScreenshotUrl ?? assets.screenshotUrl;
+  const screenshotLines = screenshotUrl
+    ? [`![Screenshot](${screenshotUrl})`]
+    : ["_Screenshot niet beschikbaar._"];
+  const attachmentMediaLines = formatMediaLines(assets.attachments);
+  const fileAttachmentLines = formatFileAttachmentLines(assets.attachments);
+  const recordingLines = assets.recording ? formatMediaLines([assets.recording]) : [];
+  const feedbackContext = metadata.context.feedbackLocator as
+    | {
+        captureMode?: string;
+      }
+    | undefined;
+
+  return [
+    "## Feedback",
+    "",
+    metadata.prompt,
+    "",
+    "## Screenshots",
+    "",
+    ...screenshotLines,
+    "",
+    "## Media",
+    "",
+    ...(recordingLines.length > 0 || attachmentMediaLines.length > 0
+      ? [...recordingLines, ...attachmentMediaLines]
+      : ["_Geen extra media toegevoegd._"]),
+    "",
+    "## Bijlagen",
+    "",
+    ...fileAttachmentLines,
+    "",
+    "## Broncontext",
+    "",
+    `- App: ${metadata.appName} (${metadata.appKey})`,
+    `- Route: ${metadata.route}`,
+    `- URL: ${metadata.url}`,
+    `- Capture: ${feedbackContext?.captureMode === "page" ? "volledige pagina" : "element"}`,
+    `- Element: <${metadata.element.tagName}>${metadata.element.id ? `#${metadata.element.id}` : ""}`,
+    `- Component: ${source?.componentName ?? "niet gevonden"}`,
+    `- JSX element: ${source?.elementName ?? "niet gevonden"}`,
+    `- Bestand: ${source ? `${source.filePath}:${source.line}:${source.column}` : "niet gevonden"}`,
+    `- Component definitie: ${
+      source?.componentLine
+        ? `${source.filePath}:${source.componentLine}:${source.componentColumn ?? 1}`
+        : "niet gevonden"
+    }`,
+    metadata.contextErrors.length > 0
+      ? `- Context errors: ${metadata.contextErrors.join("; ")}`
+      : "- Context errors: geen",
+  ].join("\n");
+}
+
+function formatMediaLines(assets: FeedbackLocatorAsset[] | undefined) {
+  if (!assets || assets.length === 0) {
+    return [];
+  }
+
+  return assets
+    .filter((asset) => isImage(asset) || isVideo(asset))
+    .flatMap((asset) => {
+      const details = `${asset.contentType}, ${formatBytes(asset.size)}`;
+
+      if (isImage(asset)) {
+        return [`![${asset.name}](${asset.url})`, `_${details}_`];
+      }
+
+      return [`- [${asset.name}](${asset.url}) (${details})`];
+    });
+}
+
+function formatFileAttachmentLines(assets: FeedbackLocatorAsset[] | undefined) {
+  const files = (assets ?? []).filter((asset) => !isImage(asset) && !isVideo(asset));
+
+  if (files.length === 0) {
+    return ["_Geen extra bijlagen._"];
+  }
+
+  return files.map(
+    (attachment) =>
+      `- [${attachment.name}](${attachment.url}) (${attachment.contentType}, ${formatBytes(attachment.size)})`,
+  );
+}
+
+function isImage(asset: FeedbackLocatorAsset) {
+  return asset.contentType.toLowerCase().startsWith("image/");
+}
+
+function isVideo(asset: FeedbackLocatorAsset) {
+  return asset.contentType.toLowerCase().startsWith("video/");
+}
+
+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`;
+}

package/src/shortcuts.ts

@@ -0,0 +1,27 @@
+export type ShortcutDefinition<Action extends string> = {
+  action: Action;
+  key: string;
+  ctrl?: boolean;
+  meta?: boolean;
+  shift?: boolean;
+  alt?: boolean;
+};
+
+export function createShortcutResolver<Action extends string>(
+  shortcuts: ShortcutDefinition<Action>[],
+) {
+  return (event: KeyboardEvent) => {
+    const key = event.key.toLowerCase();
+
+    return (
+      shortcuts.find(
+        (shortcut) =>
+          shortcut.key.toLowerCase() === key &&
+          Boolean(shortcut.ctrl) === Boolean(event.ctrlKey) &&
+          Boolean(shortcut.meta) === Boolean(event.metaKey) &&
+          Boolean(shortcut.shift) === Boolean(event.shiftKey) &&
+          Boolean(shortcut.alt) === Boolean(event.altKey),
+      )?.action ?? null
+    );
+  };
+}