@coframe-gtm/annotations 1.0.1

package/src/ui/App.ts

@@ -0,0 +1,516 @@
+/**
+ * Root Preact tree — the full annotation overlay.
+ *
+ * Plain h() calls (no JSX) so the package's React-flavoured tsc
+ * config needs no per-directory override; esbuild builds the IIFE
+ * either way. Local component state uses preact/hooks; cross-cutting
+ * state lives in the signals from `../store.js`.
+ *
+ * Layers (all inside the closed Shadow DOM, fixed-positioned):
+ *   1. hover highlight  — element under the cursor in feedback mode
+ *   2. multi-select boxes
+ *   3. pins             — one numbered marker per annotation
+ *   4. toolbar          — mode + tool switches
+ *   5. composer popup   — comment + intent/severity/kind on capture
+ *   6. thread panel     — per-pin discussion (human ↔ agent)
+ */
+
+import { h } from "preact";
+import type { ComponentChild } from "preact";
+import { useState } from "preact/hooks";
+
+import { api } from "../api.js";
+import { requery } from "../capture.js";
+import type { CapturedTarget } from "../capture.js";
+import {
+  activeThreadId,
+  annotations,
+  author,
+  cursors,
+  draft,
+  feedbackTool,
+  hoverBox,
+  mode,
+  multiSelection,
+  theme,
+  viewportTick,
+  type PresenceCursor,
+} from "../store.js";
+import type {
+  Annotation,
+  AnnotationIntent,
+  AnnotationKind,
+  AnnotationSeverity,
+} from "../types.js";
+import { commitMultiSelection } from "../picker.js";
+import { STYLES } from "./styles.js";
+
+const SEVERITY_COLOR: Record<AnnotationSeverity, string> = {
+  blocking: "#ef4444",
+  important: "#f59e0b",
+  suggestion: "#3ecf8e",
+};
+const DEFAULT_DOT = "#a78bfa";
+
+const INTENTS: AnnotationIntent[] = ["fix", "change", "question", "approve"];
+const SEVERITIES: AnnotationSeverity[] = ["blocking", "important", "suggestion"];
+
+export function App(): ComponentChild {
+  const themeAttr = theme.value === "auto" ? "dark" : theme.value;
+  // Subscribe to viewport changes so pins recompute their screen pos.
+  void viewportTick.value;
+
+  return h(
+    "div",
+    { class: "cf-overlay", "data-theme": themeAttr },
+    [
+      h("style", { key: "styles" }, STYLES),
+      hoverBox.value && !draft.value
+        ? h("div", {
+            key: "hover",
+            class: "cf-hover",
+            style: boxStyle(hoverBox.value),
+          })
+        : null,
+      ...multiSelection.value.map((el, i) => renderMultiBox(el, i)),
+      h(
+        "div",
+        { key: "pins" },
+        annotations.value.map((a, i) => renderPin(a, i + 1)),
+      ),
+      h(
+        "div",
+        { key: "cursors" },
+        cursors.value.map((c) => renderCursor(c)),
+      ),
+      renderToolbar(),
+      draft.value ? h(Composer, { key: "composer", target: draft.value }) : null,
+      activeThreadId.value
+        ? h(ThreadPanel, { key: "thread", id: activeThreadId.value })
+        : null,
+    ],
+  );
+}
+
+// ── Toolbar ────────────────────────────────────────────────────────
+
+function renderToolbar(): ComponentChild {
+  const active = mode.value === "feedback";
+  const count = annotations.value.length;
+  const multi = multiSelection.value.length;
+
+  return h("div", { key: "toolbar", class: "cf-toolbar" }, [
+    h("div", { key: "head", class: "cf-toolbar-head" }, [
+      h("span", { key: "dot", class: "cf-logo-dot" }),
+      h("span", { key: "label" }, "Annotations"),
+      h("span", { key: "count", class: "cf-count" }, String(count)),
+    ]),
+    h("div", { key: "modes", class: "cf-seg" }, [
+      segButton("View", mode.value === "view", () => {
+        mode.value = "view";
+        hoverBox.value = null;
+        multiSelection.value = [];
+      }),
+      segButton("Comment", active, () => {
+        mode.value = "feedback";
+      }),
+    ]),
+    active
+      ? h("div", { key: "tools", class: "cf-seg cf-tools" }, [
+          segButton("Element", feedbackTool.value === "element", () => {
+            feedbackTool.value = "element";
+            multiSelection.value = [];
+          }),
+          segButton("Text", feedbackTool.value === "text", () => {
+            feedbackTool.value = "text";
+            multiSelection.value = [];
+          }),
+          segButton("Multi", feedbackTool.value === "multi", () => {
+            feedbackTool.value = "multi";
+          }),
+        ])
+      : null,
+    active && feedbackTool.value === "multi" && multi
+      ? h(
+          "button",
+          {
+            key: "commit",
+            class: "cf-btn cf-btn-primary cf-commit",
+            onClick: commitMultiSelection,
+          },
+          `Comment ${multi} element${multi === 1 ? "" : "s"}`,
+        )
+      : null,
+    active
+      ? h(
+          "div",
+          { key: "hint", class: "cf-hint" },
+          hintFor(feedbackTool.value),
+        )
+      : null,
+  ]);
+}
+
+function hintFor(tool: string): string {
+  if (tool === "text") return "Select text on the page to annotate it.";
+  if (tool === "multi") return "Click elements to group them, then commit.";
+  return "Click any element to comment. Esc to exit.";
+}
+
+function segButton(
+  label: string,
+  on: boolean,
+  onClick: () => void,
+): ComponentChild {
+  return h(
+    "button",
+    {
+      key: label,
+      class: `cf-seg-btn${on ? " on" : ""}`,
+      onClick,
+    },
+    label,
+  );
+}
+
+// ── Pins ───────────────────────────────────────────────────────────
+
+function renderPin(a: Annotation, index: number): ComponentChild {
+  const pos = pinPosition(a);
+  if (!pos) return null;
+  const color = a.severity ? SEVERITY_COLOR[a.severity] : DEFAULT_DOT;
+  const resolved = a.status === "resolved" || a.status === "dismissed";
+  return h(
+    "button",
+    {
+      key: a.id,
+      class: `cf-pin${resolved ? " resolved" : ""}${a.author?.kind === "agent" ? " agent" : ""}`,
+      style: `top:${pos.top}px;left:${pos.left}px;--cf-pin:${color};`,
+      title: firstLine(a.comment),
+      onClick: () => {
+        activeThreadId.value = activeThreadId.value === a.id ? null : a.id;
+      },
+    },
+    a.author?.kind === "agent" ? "★" : String(index),
+  );
+}
+
+/** Live screen position of a pin, re-anchored to the element. */
+function pinPosition(a: Annotation): { top: number; left: number } | null {
+  const el = requery(a.fullPath ?? "") ?? requery(a.elementPath ?? "");
+  if (el) {
+    const rect = el.getBoundingClientRect();
+    return { top: rect.top - 11, left: rect.left - 11 };
+  }
+  if (a.boundingBox) {
+    return {
+      top: a.boundingBox.y - (a.isFixed ? 0 : window.scrollY) - 11,
+      left: a.boundingBox.x - (a.isFixed ? 0 : window.scrollX) - 11,
+    };
+  }
+  return null;
+}
+
+function renderMultiBox(el: Element, i: number): ComponentChild {
+  const rect = el.getBoundingClientRect();
+  return h("div", {
+    key: `multi-${i}`,
+    class: "cf-multi-box",
+    style: boxStyle({
+      top: rect.top,
+      left: rect.left,
+      width: rect.width,
+      height: rect.height,
+    }),
+  });
+}
+
+const CURSOR_PALETTE = ["#a78bfa", "#3ecf8e", "#f59e0b", "#38bdf8", "#f472b6"];
+
+function renderCursor(c: PresenceCursor): ComponentChild {
+  // x is % of viewport width; y is px from document top.
+  const left = (c.x / 100) * window.innerWidth;
+  const top = c.y - window.scrollY;
+  const color =
+    c.color ??
+    (c.kind === "agent"
+      ? CURSOR_PALETTE[Math.abs(hashId(c.id)) % CURSOR_PALETTE.length]!
+      : "#ffffff");
+  return h(
+    "div",
+    {
+      key: `cursor-${c.id}`,
+      class: `cf-cursor cf-cursor-${c.kind}`,
+      style: `top:${top}px;left:${left}px;--cf-cursor:${color};`,
+    },
+    [
+      // Arrow pointer.
+      h(
+        "svg",
+        {
+          key: "arrow",
+          width: "18",
+          height: "18",
+          viewBox: "0 0 18 18",
+          class: "cf-cursor-arrow",
+        },
+        h("path", {
+          d: "M2 2 L2 14 L6 10 L9 16 L11 15 L8 9 L14 9 Z",
+          fill: color,
+          stroke: "rgba(0,0,0,0.35)",
+          "stroke-width": "0.75",
+        }),
+      ),
+      h(
+        "span",
+        { key: "label", class: "cf-cursor-label" },
+        `${c.kind === "agent" ? "🤖 " : ""}${c.label}`,
+      ),
+    ],
+  );
+}
+
+function hashId(s: string): number {
+  let h = 0;
+  for (let i = 0; i < s.length; i++) h = (h << 5) - h + s.charCodeAt(i);
+  return h;
+}
+
+// ── Composer popup ─────────────────────────────────────────────────
+
+interface ComposerProps {
+  target: CapturedTarget;
+}
+
+function Composer({ target }: ComposerProps): ComponentChild {
+  const [comment, setComment] = useState("");
+  const [intent, setIntent] = useState<AnnotationIntent>("change");
+  const [severity, setSeverity] = useState<AnnotationSeverity>("important");
+
+  const submit = (): void => {
+    const text = comment.trim();
+    if (!text) return;
+    api.addAnnotation({
+      ...target,
+      comment: text,
+      intent,
+      severity,
+      kind: "feedback" satisfies AnnotationKind,
+      author: author.value,
+    });
+    draft.value = null;
+  };
+
+  const cancel = (): void => {
+    draft.value = null;
+  };
+
+  const label = target.isMultiSelect
+    ? `${target.elementBoundingBoxes?.length ?? 0} elements`
+    : target.selectedText
+      ? `"${truncate(target.selectedText, 40)}"`
+      : `<${target.element}>`;
+
+  return h("div", { class: "cf-popup cf-composer" }, [
+    h("div", { key: "head", class: "cf-popup-head" }, [
+      h("span", { key: "t", class: "cf-popup-target" }, label),
+      h(
+        "button",
+        { key: "x", class: "cf-icon-btn", onClick: cancel, title: "Cancel" },
+        "✕",
+      ),
+    ]),
+    h("textarea", {
+      key: "ta",
+      class: "cf-textarea",
+      placeholder: "Describe the change… (Markdown supported)",
+      autofocus: true,
+      value: comment,
+      onInput: (e: Event) => setComment((e.target as HTMLTextAreaElement).value),
+      onKeyDown: (e: KeyboardEvent) => {
+        if ((e.metaKey || e.ctrlKey) && e.key === "Enter") submit();
+      },
+    }),
+    h("div", { key: "intent", class: "cf-field" }, [
+      h("span", { key: "l", class: "cf-field-label" }, "Intent"),
+      h(
+        "div",
+        { key: "g", class: "cf-chipset" },
+        INTENTS.map((it) =>
+          chip(it, intent === it, SEVERITY_NEUTRAL, () => setIntent(it)),
+        ),
+      ),
+    ]),
+    h("div", { key: "sev", class: "cf-field" }, [
+      h("span", { key: "l", class: "cf-field-label" }, "Severity"),
+      h(
+        "div",
+        { key: "g", class: "cf-chipset" },
+        SEVERITIES.map((s) =>
+          chip(s, severity === s, SEVERITY_COLOR[s], () => setSeverity(s)),
+        ),
+      ),
+    ]),
+    h("div", { key: "actions", class: "cf-popup-actions" }, [
+      h("button", { key: "c", class: "cf-btn", onClick: cancel }, "Cancel"),
+      h(
+        "button",
+        {
+          key: "s",
+          class: "cf-btn cf-btn-primary",
+          disabled: !comment.trim(),
+          onClick: submit,
+        },
+        "Comment",
+      ),
+    ]),
+  ]);
+}
+
+const SEVERITY_NEUTRAL = "#8b94a3";
+
+function chip(
+  label: string,
+  on: boolean,
+  color: string,
+  onClick: () => void,
+): ComponentChild {
+  return h(
+    "button",
+    {
+      key: label,
+      class: `cf-chip${on ? " on" : ""}`,
+      style: on ? `--cf-chip:${color};` : undefined,
+      onClick,
+    },
+    label,
+  );
+}
+
+// ── Thread panel ───────────────────────────────────────────────────
+
+function ThreadPanel({ id }: { id: string }): ComponentChild {
+  const [reply, setReply] = useState("");
+  const a = annotations.value.find((x) => x.id === id);
+  if (!a) return null;
+
+  const send = (): void => {
+    const text = reply.trim();
+    if (!text) return;
+    api.replyToAnnotation(id, { role: author.value.kind, content: text });
+    setReply("");
+  };
+
+  return h("div", { class: "cf-popup cf-thread" }, [
+    h("div", { key: "head", class: "cf-popup-head" }, [
+      h("span", { key: "t", class: "cf-popup-target" }, `<${a.element}>`),
+      a.severity
+        ? h(
+            "span",
+            {
+              key: "sev",
+              class: "cf-tag",
+              style: `--cf-tag:${SEVERITY_COLOR[a.severity]};`,
+            },
+            a.severity,
+          )
+        : null,
+      h(
+        "button",
+        {
+          key: "x",
+          class: "cf-icon-btn",
+          onClick: () => (activeThreadId.value = null),
+          title: "Close",
+        },
+        "✕",
+      ),
+    ]),
+    h("div", { key: "body", class: "cf-thread-body" }, [
+      renderMessage(
+        a.author?.kind ?? "human",
+        a.author?.displayName ?? "You",
+        a.comment,
+        "root",
+      ),
+      ...(a.thread ?? []).map((m) =>
+        renderMessage(m.role, m.role === "agent" ? "Agent" : "You", m.content, m.id),
+      ),
+    ]),
+    h("div", { key: "compose", class: "cf-thread-compose" }, [
+      h("textarea", {
+        key: "ta",
+        class: "cf-textarea cf-textarea-sm",
+        placeholder: "Reply…",
+        value: reply,
+        onInput: (e: Event) => setReply((e.target as HTMLTextAreaElement).value),
+        onKeyDown: (e: KeyboardEvent) => {
+          if ((e.metaKey || e.ctrlKey) && e.key === "Enter") send();
+        },
+      }),
+      h("div", { key: "row", class: "cf-thread-actions" }, [
+        a.status !== "resolved"
+          ? h(
+              "button",
+              {
+                key: "resolve",
+                class: "cf-btn cf-btn-ghost",
+                onClick: () => api.resolveAnnotation(id, author.value.kind),
+              },
+              "Resolve",
+            )
+          : h(
+              "span",
+              { key: "resolved", class: "cf-resolved-tag" },
+              "✓ resolved",
+            ),
+        h(
+          "button",
+          {
+            key: "send",
+            class: "cf-btn cf-btn-primary",
+            disabled: !reply.trim(),
+            onClick: send,
+          },
+          "Reply",
+        ),
+      ]),
+    ]),
+  ]);
+}
+
+function renderMessage(
+  role: "human" | "agent",
+  name: string,
+  content: string,
+  key: string,
+): ComponentChild {
+  return h("div", { key, class: `cf-msg cf-msg-${role}` }, [
+    h("div", { key: "meta", class: "cf-msg-meta" }, [
+      h("span", { key: "av", class: `cf-avatar cf-avatar-${role}` }, role === "agent" ? "🤖" : "🧑"),
+      h("span", { key: "n", class: "cf-msg-name" }, name),
+    ]),
+    h("div", { key: "c", class: "cf-msg-body" }, content),
+  ]);
+}
+
+// ── helpers ────────────────────────────────────────────────────────
+
+function boxStyle(b: {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+}): string {
+  return `top:${b.top}px;left:${b.left}px;width:${b.width}px;height:${b.height}px;`;
+}
+
+function firstLine(markdown: string): string {
+  const trimmed = markdown.trim();
+  const nl = trimmed.indexOf("\n");
+  return nl > 0 ? trimmed.slice(0, nl) : trimmed;
+}
+
+function truncate(text: string, max: number): string {
+  return text.length > max ? `${text.slice(0, max - 1)}…` : text;
+}