@coframe-gtm/annotations 1.0.2 → 1.0.4

package/src/ui/Cursors.tsx

@@ -0,0 +1,50 @@
+/**
+ * Live presence cursors — one labeled arrow per remote actor (human
+ * reviewers + spun-off agents) collaborating on the same page.
+ */
+
+import type { ComponentChild } from "preact";
+
+import type { PresenceCursor } from "../store.js";
+import { CURSOR_PALETTE } from "./constants.js";
+import { hashId } from "./helpers.js";
+
+interface CursorProps {
+  c: PresenceCursor;
+}
+
+export function Cursor({ c }: CursorProps): 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 (
+    <div
+      class={`cf-cursor cf-cursor-${c.kind}`}
+      style={`top:${top}px;left:${left}px;--cf-cursor:${color};`}
+    >
+      {/* Arrow pointer. */}
+      <svg
+        key="arrow"
+        width="18"
+        height="18"
+        viewBox="0 0 18 18"
+        class="cf-cursor-arrow"
+      >
+        <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"
+        />
+      </svg>
+      <span key="label" class="cf-cursor-label">
+        {`${c.kind === "agent" ? "🤖 " : ""}${c.label}`}
+      </span>
+    </div>
+  );
+}

package/src/ui/Pins.tsx

@@ -0,0 +1,58 @@
+/**
+ * Pins + multi-select boxes.
+ *
+ *   - `Pin`      — one numbered marker per annotation, re-anchored to
+ *                  its live element each render.
+ *   - `MultiBox` — a pulsing outline around each element in the
+ *                  current multi-selection set.
+ */
+
+import type { ComponentChild } from "preact";
+
+import { activeThreadId } from "../store.js";
+import type { Annotation } from "../types.js";
+import { DEFAULT_DOT, SEVERITY_COLOR } from "./constants.js";
+import { boxStyle, firstLine, pinPosition } from "./helpers.js";
+
+interface PinProps {
+  a: Annotation;
+  index: number;
+}
+
+export function Pin({ a, index }: PinProps): 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 (
+    <button
+      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)}
+    </button>
+  );
+}
+
+interface MultiBoxProps {
+  el: Element;
+}
+
+export function MultiBox({ el }: MultiBoxProps): ComponentChild {
+  const rect = el.getBoundingClientRect();
+  return (
+    <div
+      class="cf-multi-box"
+      style={boxStyle({
+        top: rect.top,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height,
+      })}
+    />
+  );
+}

package/src/ui/ThreadPanel.tsx

@@ -0,0 +1,124 @@
+/**
+ * Thread panel — the per-pin discussion (human ↔ agent). Shows the
+ * root annotation comment plus the reply thread, with a compose box
+ * and a resolve affordance. Reads the active annotation from the
+ * `../store.js` signals by id.
+ */
+
+import type { ComponentChild } from "preact";
+import { useState } from "preact/hooks";
+
+import { api } from "../api.js";
+import { activeThreadId, annotations, author } from "../store.js";
+import { SEVERITY_COLOR } from "./constants.js";
+
+interface MessageProps {
+  role: "human" | "agent";
+  name: string;
+  content: string;
+}
+
+export function Message({ role, name, content }: MessageProps): ComponentChild {
+  return (
+    <div class={`cf-msg cf-msg-${role}`}>
+      <div key="meta" class="cf-msg-meta">
+        <span key="av" class={`cf-avatar cf-avatar-${role}`}>
+          {role === "agent" ? "🤖" : "🧑"}
+        </span>
+        <span key="n" class="cf-msg-name">{name}</span>
+      </div>
+      <div key="c" class="cf-msg-body">{content}</div>
+    </div>
+  );
+}
+
+interface ThreadPanelProps {
+  id: string;
+}
+
+export function ThreadPanel({ id }: ThreadPanelProps): 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 (
+    <div class="cf-popup cf-thread">
+      <div key="head" class="cf-popup-head">
+        <span key="t" class="cf-popup-target">{`<${a.element}>`}</span>
+        {a.severity ? (
+          <span
+            key="sev"
+            class="cf-tag"
+            style={`--cf-tag:${SEVERITY_COLOR[a.severity]};`}
+          >
+            {a.severity}
+          </span>
+        ) : null}
+        <button
+          key="x"
+          class="cf-icon-btn"
+          onClick={() => (activeThreadId.value = null)}
+          title="Close"
+        >
+          ✕
+        </button>
+      </div>
+      <div key="body" class="cf-thread-body">
+        <Message
+          key="root"
+          role={a.author?.kind ?? "human"}
+          name={a.author?.displayName ?? "You"}
+          content={a.comment}
+        />
+        {(a.thread ?? []).map((m) => (
+          <Message
+            key={m.id}
+            role={m.role}
+            name={m.role === "agent" ? "Agent" : "You"}
+            content={m.content}
+          />
+        ))}
+      </div>
+      <div key="compose" class="cf-thread-compose">
+        <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();
+          }}
+        />
+        <div key="row" class="cf-thread-actions">
+          {a.status !== "resolved" ? (
+            <button
+              key="resolve"
+              class="cf-btn cf-btn-ghost"
+              onClick={() => api.resolveAnnotation(id, author.value.kind)}
+            >
+              Resolve
+            </button>
+          ) : (
+            <span key="resolved" class="cf-resolved-tag">✓ resolved</span>
+          )}
+          <button
+            key="send"
+            class="cf-btn cf-btn-primary"
+            disabled={!reply.trim()}
+            onClick={send}
+          >
+            Reply
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/ui/Toolbar.tsx

@@ -0,0 +1,116 @@
+/**
+ * Toolbar — mode + tool switches, annotation count, and a contextual
+ * hint. Reads cross-cutting state from the `../store.js` signals and
+ * commits multi-selections through `../picker.js`.
+ */
+
+import type { ComponentChild } from "preact";
+
+import {
+  annotations,
+  feedbackTool,
+  hoverBox,
+  mode,
+  multiSelection,
+} from "../store.js";
+import { commitMultiSelection } from "../picker.js";
+
+export 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.";
+}
+
+interface SegButtonProps {
+  label: string;
+  on: boolean;
+  onClick: () => void;
+}
+
+export function SegButton({ label, on, onClick }: SegButtonProps): ComponentChild {
+  return (
+    <button class={`cf-seg-btn${on ? " on" : ""}`} onClick={onClick}>
+      {label}
+    </button>
+  );
+}
+
+export function Toolbar(): ComponentChild {
+  const active = mode.value === "feedback";
+  const count = annotations.value.length;
+  const multi = multiSelection.value.length;
+
+  return (
+    <div key="toolbar" class="cf-toolbar">
+      <div key="head" class="cf-toolbar-head">
+        <span key="dot" class="cf-logo-dot" />
+        <span key="label">Annotations</span>
+        <span key="count" class="cf-count">{String(count)}</span>
+      </div>
+      <div key="modes" class="cf-seg">
+        <SegButton
+          key="View"
+          label="View"
+          on={mode.value === "view"}
+          onClick={() => {
+            mode.value = "view";
+            hoverBox.value = null;
+            multiSelection.value = [];
+          }}
+        />
+        <SegButton
+          key="Comment"
+          label="Comment"
+          on={active}
+          onClick={() => {
+            mode.value = "feedback";
+          }}
+        />
+      </div>
+      {active ? (
+        <div key="tools" class="cf-seg cf-tools">
+          <SegButton
+            key="Element"
+            label="Element"
+            on={feedbackTool.value === "element"}
+            onClick={() => {
+              feedbackTool.value = "element";
+              multiSelection.value = [];
+            }}
+          />
+          <SegButton
+            key="Text"
+            label="Text"
+            on={feedbackTool.value === "text"}
+            onClick={() => {
+              feedbackTool.value = "text";
+              multiSelection.value = [];
+            }}
+          />
+          <SegButton
+            key="Multi"
+            label="Multi"
+            on={feedbackTool.value === "multi"}
+            onClick={() => {
+              feedbackTool.value = "multi";
+            }}
+          />
+        </div>
+      ) : null}
+      {active && feedbackTool.value === "multi" && multi ? (
+        <button
+          key="commit"
+          class="cf-btn cf-btn-primary cf-commit"
+          onClick={commitMultiSelection}
+        >
+          {`Comment ${multi} element${multi === 1 ? "" : "s"}`}
+        </button>
+      ) : null}
+      {active ? (
+        <div key="hint" class="cf-hint">
+          {hintFor(feedbackTool.value)}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/ui/constants.ts

@@ -0,0 +1,24 @@
+/**
+ * Shared overlay constants — colors, palettes, and the option lists
+ * the composer chips iterate over. Plain module (no JSX) so it can be
+ * imported by both the `.tsx` components and any plain `.ts` consumer.
+ */
+
+import type {
+  AnnotationIntent,
+  AnnotationSeverity,
+} from "../types.js";
+
+export const SEVERITY_COLOR: Record<AnnotationSeverity, string> = {
+  blocking: "#ef4444",
+  important: "#f59e0b",
+  suggestion: "#3ecf8e",
+};
+export const DEFAULT_DOT = "#a78bfa";
+
+export const INTENTS: AnnotationIntent[] = ["fix", "change", "question", "approve"];
+export const SEVERITIES: AnnotationSeverity[] = ["blocking", "important", "suggestion"];
+
+export const SEVERITY_NEUTRAL = "#8b94a3";
+
+export const CURSOR_PALETTE = ["#a78bfa", "#3ecf8e", "#f59e0b", "#38bdf8", "#f472b6"];

package/src/ui/helpers.ts

@@ -0,0 +1,50 @@
+/**
+ * Pure layout/text helpers shared across the overlay components.
+ * Plain module (no JSX). `pinPosition` re-anchors a pin to its live
+ * element; `boxStyle` builds the inline-style string for highlight
+ * boxes; the rest are small string utilities.
+ */
+
+import { requery } from "../capture.js";
+import type { Annotation } from "../types.js";
+
+export 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;`;
+}
+
+export function firstLine(markdown: string): string {
+  const trimmed = markdown.trim();
+  const nl = trimmed.indexOf("\n");
+  return nl > 0 ? trimmed.slice(0, nl) : trimmed;
+}
+
+export function truncate(text: string, max: number): string {
+  return text.length > max ? `${text.slice(0, max - 1)}…` : text;
+}
+
+export 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;
+}
+
+/** Live screen position of a pin, re-anchored to the element. */
+export 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;
+}