@coframe-gtm/annotations 1.0.2 → 1.0.4

package/src/ui/App.ts

@@ -1,516 +0,0 @@
-/**
- * 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;
-}