d2d-feedbackkit 0.0.0

package/README.md

@@ -0,0 +1,13 @@
+# d2d-feedbackkit
+
+Public SolidJS feedback widget package.
+
+```sh
+bun add d2d-feedbackkit
+```
+
+```ts
+import { createFeedbackLocator } from "d2d-feedbackkit";
+import { mountFeedbackLocatorElement } from "d2d-feedbackkit/web-component";
+import feedbackKitBabelPlugin from "d2d-feedbackkit/vite-plugin";
+```

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "d2d-feedbackkit",
+  "version": "0.0.0",
+  "type": "module",
+  "description": "SolidJS feedback widget, source locator, and integration helpers.",
+  "license": "UNLICENSED",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./widget": {
+      "types": "./src/widget.tsx",
+      "default": "./src/widget.tsx"
+    },
+    "./web-component": {
+      "types": "./src/web-component.tsx",
+      "default": "./src/web-component.tsx"
+    },
+    "./vite-plugin": {
+      "types": "./src/vite-plugin.ts",
+      "default": "./src/vite-plugin.ts"
+    },
+    "./client": {
+      "types": "./src/client.ts",
+      "default": "./src/client.ts"
+    },
+    "./linear": {
+      "types": "./src/linear.ts",
+      "default": "./src/linear.ts"
+    },
+    "./agent": {
+      "types": "./src/agent.ts",
+      "default": "./src/agent.ts"
+    }
+  },
+  "files": [
+    "README.md",
+    "src/agent.ts",
+    "src/babel.ts",
+    "src/client.ts",
+    "src/index.ts",
+    "src/linear.ts",
+    "src/shortcuts.ts",
+    "src/solid.tsx",
+    "src/source.ts",
+    "src/types.ts",
+    "src/vite-plugin.ts",
+    "src/web-component.tsx",
+    "src/widget.tsx"
+  ],
+  "scripts": {
+    "build": "bun run type-check",
+    "clean": "rm -rf node_modules dist",
+    "pack:dry-run": "npm pack --dry-run",
+    "publish:public": "npm publish --access public",
+    "test": "vitest run src",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@babel/parser": "^7.28.0",
+    "html-to-image": "^1.11.13"
+  },
+  "peerDependencies": {
+    "lucide-solid": ">=0.464",
+    "solid-js": ">=1.9"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.0",
+    "@babel/types": "^7.28.0",
+    "@types/babel__core": "^7.20.5",
+    "@types/node": "^20.12.7",
+    "jsdom": "^25.0.1",
+    "typescript": "^5.9.3",
+    "vite-plugin-solid": "^2.11.7",
+    "vitest": "^2.1.8"
+  }
+}

package/src/agent.ts

@@ -0,0 +1,161 @@
+import type {
+  FeedbackLocatorAsset,
+  FeedbackLocatorLinearIssueReference,
+  FeedbackLocatorMetadata,
+} from "./types";
+
+export type AgentSessionAssets = {
+  screenshotUrl?: string;
+  annotatedScreenshotUrl?: string;
+  recording?: FeedbackLocatorAsset;
+  attachments?: FeedbackLocatorAsset[];
+  contextAttachments?: FeedbackLocatorAsset[];
+  linearIssue?: FeedbackLocatorLinearIssueReference;
+};
+
+export function buildAgentSessionTitle(metadata: FeedbackLocatorMetadata) {
+  const sourceLabel =
+    metadata.source?.componentName ??
+    metadata.source?.elementName ??
+    metadata.element.tagName;
+  const promptSummary = metadata.prompt
+    .replace(/\s+/g, " ")
+    .trim()
+    .slice(0, 80);
+
+  return `Feedback fix: ${sourceLabel}${promptSummary ? ` - ${promptSummary}` : ""}`;
+}
+
+export function buildAgentSessionPrompt(
+  metadata: FeedbackLocatorMetadata,
+  assets: AgentSessionAssets = metadata.assets ?? {},
+) {
+  const source = metadata.source;
+  const screenshotUrl = assets.annotatedScreenshotUrl ?? assets.screenshotUrl;
+  const feedbackContext = metadata.context.feedbackLocator as
+    | {
+        captureMode?: string;
+      }
+    | undefined;
+
+  return [
+    "Je bent een coding agent in de host-app repository.",
+    "Gebruik deze feedback om het kleinste passende codepad te vinden, de oorzaak te fixen en gerichte tests te draaien.",
+    "",
+    "## Feedback",
+    "",
+    metadata.prompt,
+    "",
+    "## Linear issue",
+    "",
+    ...formatLinearIssueLines(assets.linearIssue),
+    "",
+    "## Startpunt in de code",
+    "",
+    `- App: ${metadata.appName} (${metadata.appKey})`,
+    `- Route: ${metadata.route}`,
+    `- URL: ${metadata.url}`,
+    `- 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"
+    }`,
+    `- Capture: ${feedbackContext?.captureMode === "page" ? "volledige pagina" : "element"}`,
+    "",
+    "## Visuele context",
+    "",
+    screenshotUrl ? `- Screenshot: ${screenshotUrl}` : "- Screenshot: niet beschikbaar",
+    assets.recording ? `- Video-opname: ${assets.recording.url}` : "- Video-opname: niet toegevoegd",
+    "",
+    "## Bijlagen",
+    "",
+    ...formatAssetLines(assets.attachments, "Geen extra bijlagen toegevoegd."),
+    "",
+    "## Directe context",
+    "",
+    "Deze context is direct vanuit de browser/app meegegeven en hoeft niet uit Linear of S3 opgehaald te worden.",
+    "",
+    "```json",
+    JSON.stringify(buildAgentDirectContext(metadata), null, 2),
+    "```",
+    "",
+    "## Acceptatiecriteria",
+    "",
+    "- Reproduceer of inspecteer het probleem vanuit de meegegeven route/context.",
+    "- Pas alleen relevante code aan.",
+    "- Voeg of update een regressietest waar dit zinvol is.",
+    "- Rapporteer gewijzigde bestanden, testresultaten en eventuele resterende onzekerheid.",
+  ].join("\n");
+}
+
+export function buildAgentDirectContext(metadata: FeedbackLocatorMetadata) {
+  return {
+    context: removeNoisyFeedbackLocatorContext(metadata.context),
+    contextErrors: metadata.contextErrors,
+  };
+}
+
+function removeNoisyFeedbackLocatorContext(context: Record<string, unknown>) {
+  const filteredContext = { ...context };
+  const feedbackLocatorContext = filteredContext.feedbackLocator;
+
+  if (
+    typeof feedbackLocatorContext !== "object" ||
+    feedbackLocatorContext === null ||
+    Array.isArray(feedbackLocatorContext)
+  ) {
+    return filteredContext;
+  }
+
+  const {
+    networkLogs: _networkLogs,
+    performance: _performance,
+    ...usefulFeedbackLocatorContext
+  } = feedbackLocatorContext as Record<string, unknown>;
+
+  if (Object.keys(usefulFeedbackLocatorContext).length > 0) {
+    filteredContext.feedbackLocator = usefulFeedbackLocatorContext;
+  } else {
+    delete filteredContext.feedbackLocator;
+  }
+
+  return filteredContext;
+}
+
+function formatLinearIssueLines(issue: FeedbackLocatorLinearIssueReference | undefined) {
+  if (!issue) {
+    return ["- Niet gekoppeld aan een Linear issue."];
+  }
+
+  return [
+    `- Issue: ${issue.issueIdentifier}`,
+    `- Titel: ${issue.issueTitle}`,
+    `- URL: ${issue.issueUrl}`,
+    `- ID: ${issue.issueId}`,
+  ];
+}
+
+function formatAssetLines(assets: FeedbackLocatorAsset[] | undefined, emptyText: string) {
+  if (!assets || assets.length === 0) {
+    return [`- ${emptyText}`];
+  }
+
+  return assets.map(
+    (asset) => `- ${asset.name}: ${asset.url} (${asset.contentType}, ${formatBytes(asset.size)})`,
+  );
+}
+
+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/babel.ts

@@ -0,0 +1,285 @@
+import path from "node:path";
+import { parseExpression } from "@babel/parser";
+
+type BabelApi = {
+  types: typeof import("@babel/types");
+};
+
+type BabelState = {
+  filename?: string;
+  cwd?: string;
+  opts?: FeedbackLocatorBabelOptions;
+  feedbackLocator?: FeedbackLocatorTransformState;
+};
+
+type FeedbackLocatorBabelOptions = {
+  projectRoot?: string;
+  appRoot?: string;
+  ignoreComponentNames?: string[];
+};
+
+type SourceLocation = {
+  start: {
+    line: number;
+    column: number;
+  };
+  end: {
+    line: number;
+    column: number;
+  };
+};
+
+type FeedbackLocatorTransformState = {
+  projectRoot: string;
+  filePath: string;
+  fileKey: string;
+  components: Array<{
+    name: string;
+    loc: SourceLocation;
+  }>;
+  expressions: Array<{
+    name: string;
+    loc: SourceLocation;
+    componentId: number | null;
+  }>;
+  componentStack: number[];
+};
+
+export default function feedbackLocatorBabelPlugin(babel: BabelApi) {
+  const t = babel.types;
+
+  function ensureState(state: BabelState) {
+    if (!state.feedbackLocator) {
+      throw new Error("Feedback Locator Babel state is not initialized");
+    }
+
+    return state.feedbackLocator;
+  }
+
+  function shouldSkip(state: BabelState) {
+    return !state.filename || state.filename.includes("node_modules");
+  }
+
+  function enterComponent(
+    state: BabelState,
+    name: string | null | undefined,
+    loc: SourceLocation | null | undefined,
+  ) {
+    if (!name || !loc || !isComponentName(name)) {
+      return null;
+    }
+
+    const transformState = ensureState(state);
+
+    if (state.opts?.ignoreComponentNames?.includes(name)) {
+      return null;
+    }
+
+    const id = transformState.components.length;
+    transformState.components.push({ name, loc });
+    transformState.componentStack.push(id);
+    return id;
+  }
+
+  function exitComponent(state: BabelState, id: number | null) {
+    if (id === null) {
+      return;
+    }
+
+    const transformState = ensureState(state);
+    const last = transformState.componentStack.at(-1);
+    if (last === id) {
+      transformState.componentStack.pop();
+    }
+  }
+
+  return {
+    name: "feedbackkit-source-locator-babel",
+    visitor: {
+      Program: {
+        enter(_programPath: unknown, state: BabelState) {
+          if (shouldSkip(state)) {
+            return;
+          }
+
+          const projectRoot = normalizePath(
+            state.opts?.projectRoot ?? state.cwd ?? process.cwd(),
+          );
+          const filename = normalizePath(state.filename!);
+          const filePath = toRepoRelativePath(filename, projectRoot);
+          const fileKey = filePath;
+
+          state.feedbackLocator = {
+            projectRoot,
+            filePath,
+            fileKey,
+            components: [],
+            expressions: [],
+            componentStack: [],
+          };
+        },
+        exit(programPath: any, state: BabelState) {
+          if (shouldSkip(state) || !state.feedbackLocator) {
+            return;
+          }
+
+          const transformState = state.feedbackLocator;
+          if (transformState.expressions.length === 0) {
+            return;
+          }
+
+          const data = {
+            filePath: transformState.filePath,
+            projectPath: transformState.projectRoot,
+            expressions: transformState.expressions,
+            components: transformState.components,
+          };
+          const serializedData = JSON.stringify(data);
+          const serializedFileKey = JSON.stringify(transformState.fileKey);
+          const registerCode = `(() => {
+            if (typeof window !== "undefined") {
+              window.__FEEDBACK_LOCATOR_DATA__ = window.__FEEDBACK_LOCATOR_DATA__ || {};
+              window.__FEEDBACK_LOCATOR_DATA__[${serializedFileKey}] = ${serializedData};
+            }
+          })()`;
+
+          programPath.pushContainer(
+            "body",
+            t.expressionStatement(parseExpression(registerCode) as any),
+          );
+        },
+      },
+      FunctionDeclaration: {
+        enter(pathNode: any, state: BabelState) {
+          if (shouldSkip(state) || !state.feedbackLocator) {
+            return;
+          }
+
+          pathNode.setData(
+            "feedbackLocatorComponentId",
+            enterComponent(state, pathNode.node.id?.name, pathNode.node.loc),
+          );
+        },
+        exit(pathNode: any, state: BabelState) {
+          if (shouldSkip(state) || !state.feedbackLocator) {
+            return;
+          }
+
+          exitComponent(
+            state,
+            pathNode.getData("feedbackLocatorComponentId") ?? null,
+          );
+        },
+      },
+      VariableDeclarator: {
+        enter(pathNode: any, state: BabelState) {
+          if (shouldSkip(state) || !state.feedbackLocator) {
+            return;
+          }
+
+          const initType = pathNode.node.init?.type;
+          const isFunction =
+            initType === "ArrowFunctionExpression" ||
+            initType === "FunctionExpression";
+          const name =
+            pathNode.node.id?.type === "Identifier"
+              ? pathNode.node.id.name
+              : null;
+
+          pathNode.setData(
+            "feedbackLocatorComponentId",
+            isFunction
+              ? enterComponent(state, name, pathNode.node.loc)
+              : null,
+          );
+        },
+        exit(pathNode: any, state: BabelState) {
+          if (shouldSkip(state) || !state.feedbackLocator) {
+            return;
+          }
+
+          exitComponent(
+            state,
+            pathNode.getData("feedbackLocatorComponentId") ?? null,
+          );
+        },
+      },
+      JSXElement(pathNode: any, state: BabelState) {
+        if (shouldSkip(state) || !state.feedbackLocator || !pathNode.node.loc) {
+          return;
+        }
+
+        const openingElement = pathNode.node.openingElement;
+        const name = getJsxName(openingElement.name);
+        if (!isDomJsxName(openingElement.name)) {
+          return;
+        }
+
+        if (
+          openingElement.attributes.some(
+            (attribute: any) =>
+              attribute.type === "JSXAttribute" &&
+              attribute.name?.name === "data-feedback-locator-id",
+          )
+        ) {
+          return;
+        }
+
+        const transformState = state.feedbackLocator;
+        const expressionId = transformState.expressions.length;
+        const componentId = transformState.componentStack.at(-1) ?? null;
+        const locatorId = `${transformState.fileKey}::${expressionId}`;
+
+        transformState.expressions.push({
+          name,
+          loc: pathNode.node.loc,
+          componentId,
+        });
+
+        openingElement.attributes.push(
+          t.jsxAttribute(
+            t.jsxIdentifier("data-feedback-locator-id"),
+            t.stringLiteral(locatorId),
+          ),
+        );
+      },
+    },
+  };
+}
+
+function getJsxName(node: any): string {
+  if (node.type === "JSXIdentifier") {
+    return node.name;
+  }
+
+  if (node.type === "JSXMemberExpression") {
+    return `${getJsxName(node.object)}.${node.property.name}`;
+  }
+
+  if (node.type === "JSXNamespacedName") {
+    return `${node.namespace.name}.${node.name.name}`;
+  }
+
+  return "unknown";
+}
+
+function isDomJsxName(node: any) {
+  if (node.type !== "JSXIdentifier") {
+    return false;
+  }
+
+  return /^[a-z]/.test(node.name);
+}
+
+function isComponentName(name: string) {
+  return /^[A-Z]/.test(name);
+}
+
+function normalizePath(value: string) {
+  return value.split(path.sep).join("/");
+}
+
+function toRepoRelativePath(filename: string, projectRoot: string) {
+  const relative = normalizePath(path.relative(projectRoot, filename));
+  return relative.startsWith(".") ? filename : relative;
+}

package/src/client.ts

@@ -0,0 +1 @@
+export * from "./index";