@coframe-gtm/annotations 1.0.1

package/src/ui/styles.ts

@@ -0,0 +1,283 @@
+/**
+ * All overlay CSS as a single string injected into the Shadow DOM.
+ * Scoped under `.cf-overlay` + `[data-theme]`; nothing leaks to the
+ * host page (closed shadow) and host styles can't leak in (reset in
+ * shadow.ts). Colors follow a dark-first palette.
+ */
+
+export const STYLES = `
+.cf-overlay {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
+  font-size: 13px;
+  color: #f4f4f5;
+  --cf-bg: rgba(18, 18, 22, 0.96);
+  --cf-border: rgba(255, 255, 255, 0.1);
+  --cf-muted: rgba(255, 255, 255, 0.55);
+  --cf-accent: #a78bfa;
+}
+.cf-overlay[data-theme="light"] {
+  color: #18181b;
+  --cf-bg: rgba(252, 252, 253, 0.97);
+  --cf-border: rgba(0, 0, 0, 0.1);
+  --cf-muted: rgba(0, 0, 0, 0.5);
+}
+
+/* Hover highlight + multi-select boxes */
+.cf-hover {
+  position: fixed;
+  pointer-events: none;
+  border: 2px solid var(--cf-accent);
+  background: rgba(167, 139, 250, 0.1);
+  border-radius: 4px;
+  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.4);
+  transition: top .06s ease, left .06s ease, width .06s ease, height .06s ease;
+  z-index: 1;
+}
+.cf-multi-box {
+  position: fixed;
+  pointer-events: none;
+  border: 2px solid #3ecf8e;
+  background: rgba(62, 207, 142, 0.12);
+  border-radius: 4px;
+  z-index: 1;
+  animation: cf-multi-pulse 1.4s ease-in-out infinite;
+}
+@keyframes cf-multi-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(62,207,142,0.0); }
+  50% { box-shadow: 0 0 0 3px rgba(62,207,142,0.25); }
+}
+
+/* Live presence cursors (multi-cursor collaboration) */
+.cf-cursor {
+  position: fixed;
+  z-index: 6;
+  pointer-events: none;
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
+  /* Glide to new positions so multiple actors read as "live". */
+  transition: top .12s ease, left .12s ease;
+  will-change: top, left;
+}
+.cf-cursor-arrow { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
+.cf-cursor-label {
+  transform: translateY(2px);
+  background: var(--cf-cursor, #a78bfa);
+  color: #0b0b0f;
+  font: 700 11px -apple-system, system-ui;
+  padding: 2px 7px;
+  border-radius: 8px;
+  white-space: nowrap;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
+}
+.cf-cursor-human .cf-cursor-label { color: #18181b; }
+.cf-cursor-agent .cf-cursor-label { color: #0b0b0f; }
+
+/* Pins */
+.cf-pin {
+  position: fixed;
+  width: 22px; height: 22px;
+  border-radius: 50% 50% 50% 2px;
+  background: var(--cf-pin, #a78bfa);
+  color: #fff;
+  border: 2px solid rgba(255,255,255,0.9);
+  font: 700 11px -apple-system, system-ui;
+  display: flex; align-items: center; justify-content: center;
+  cursor: pointer;
+  pointer-events: auto;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
+  z-index: 3;
+  transition: transform .12s cubic-bezier(.34,1.56,.64,1);
+  padding: 0;
+  /* Pop in when a pin first renders so new annotations are obvious. */
+  animation: cf-pin-pop .32s cubic-bezier(.34,1.56,.64,1) both;
+}
+.cf-pin:hover { transform: scale(1.2); }
+.cf-pin.resolved { opacity: 0.45; }
+/* Agent-pushed pins pulse a ring so reviewers spot what the agent added. */
+.cf-pin.agent { border-style: dashed; }
+.cf-pin.agent::after {
+  content: "";
+  position: absolute; inset: -4px;
+  border-radius: inherit;
+  border: 2px solid var(--cf-pin, #a78bfa);
+  animation: cf-pin-ring 1.6s ease-out 3;
+  pointer-events: none;
+}
+
+@keyframes cf-pin-pop {
+  0% { transform: scale(0); opacity: 0; }
+  60% { transform: scale(1.25); opacity: 1; }
+  100% { transform: scale(1); opacity: 1; }
+}
+@keyframes cf-pin-ring {
+  0% { transform: scale(1); opacity: .7; }
+  100% { transform: scale(2.4); opacity: 0; }
+}
+
+/* Toolbar */
+.cf-toolbar {
+  position: fixed;
+  left: 16px; bottom: 16px;
+  pointer-events: auto;
+  background: var(--cf-bg);
+  border: 1px solid var(--cf-border);
+  border-radius: 14px;
+  padding: 10px;
+  display: flex; flex-direction: column; gap: 8px;
+  backdrop-filter: blur(16px) saturate(140%);
+  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
+  min-width: 220px;
+  z-index: 4;
+}
+.cf-toolbar-head {
+  display: flex; align-items: center; gap: 7px;
+  font-weight: 700; letter-spacing: 0.02em;
+}
+.cf-logo-dot {
+  width: 8px; height: 8px; border-radius: 50%;
+  background: var(--cf-accent);
+  box-shadow: 0 0 10px var(--cf-accent);
+}
+.cf-count {
+  margin-left: auto;
+  font: 700 11px -apple-system, system-ui;
+  color: var(--cf-muted);
+  background: rgba(255,255,255,0.08);
+  padding: 1px 7px; border-radius: 8px;
+}
+.cf-overlay[data-theme="light"] .cf-count { background: rgba(0,0,0,0.06); }
+
+.cf-seg {
+  display: flex; gap: 2px;
+  background: rgba(255,255,255,0.06);
+  border-radius: 9px; padding: 2px;
+}
+.cf-overlay[data-theme="light"] .cf-seg { background: rgba(0,0,0,0.05); }
+.cf-seg-btn {
+  flex: 1; border: none; background: transparent; color: var(--cf-muted);
+  padding: 5px 10px; border-radius: 7px; font: 600 12px -apple-system, system-ui;
+}
+.cf-seg-btn.on {
+  background: var(--cf-accent); color: #fff;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
+}
+.cf-tools .cf-seg-btn.on { background: rgba(255,255,255,0.16); color: #fff; }
+.cf-overlay[data-theme="light"] .cf-tools .cf-seg-btn.on { background: rgba(0,0,0,0.12); color: #111; }
+.cf-hint { font-size: 11px; color: var(--cf-muted); padding: 0 2px; }
+.cf-commit { width: 100%; }
+
+/* Buttons */
+.cf-btn {
+  border: 1px solid var(--cf-border); background: transparent; color: inherit;
+  padding: 6px 12px; border-radius: 8px; font: 600 12px -apple-system, system-ui;
+}
+.cf-btn:hover { background: rgba(255,255,255,0.06); }
+.cf-overlay[data-theme="light"] .cf-btn:hover { background: rgba(0,0,0,0.04); }
+.cf-btn-primary {
+  background: var(--cf-accent); border-color: var(--cf-accent); color: #fff;
+}
+.cf-btn-primary:hover { background: #9173f0; }
+.cf-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
+.cf-btn-ghost { border-color: transparent; color: var(--cf-muted); }
+
+/* Popups (composer + thread) */
+.cf-popup {
+  position: fixed;
+  left: 16px; bottom: 92px;
+  width: 320px;
+  pointer-events: auto;
+  background: var(--cf-bg);
+  border: 1px solid var(--cf-border);
+  border-radius: 14px;
+  padding: 12px;
+  display: flex; flex-direction: column; gap: 10px;
+  backdrop-filter: blur(16px) saturate(140%);
+  box-shadow: 0 16px 48px rgba(0,0,0,0.55);
+  z-index: 5;
+  animation: cf-rise .2s cubic-bezier(.16,1,.3,1) both;
+}
+@keyframes cf-rise {
+  from { transform: translateY(10px); opacity: 0; }
+  to   { transform: translateY(0); opacity: 1; }
+}
+.cf-popup-head {
+  display: flex; align-items: center; gap: 8px;
+}
+.cf-popup-target {
+  font: 600 12px ui-monospace, "SF Mono", monospace;
+  color: var(--cf-accent);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.cf-icon-btn {
+  margin-left: auto; border: none; background: transparent;
+  color: var(--cf-muted); font-size: 13px; cursor: pointer;
+  width: 22px; height: 22px; border-radius: 6px;
+}
+.cf-icon-btn:hover { background: rgba(255,255,255,0.08); }
+
+.cf-textarea {
+  width: 100%; min-height: 72px; resize: vertical;
+  background: rgba(255,255,255,0.04);
+  border: 1px solid var(--cf-border); border-radius: 9px;
+  padding: 8px 10px; color: inherit; font: 400 13px -apple-system, system-ui;
+  line-height: 1.45;
+}
+.cf-overlay[data-theme="light"] .cf-textarea { background: rgba(0,0,0,0.03); }
+.cf-textarea:focus { outline: none; border-color: var(--cf-accent); }
+.cf-textarea-sm { min-height: 48px; }
+
+.cf-field { display: flex; flex-direction: column; gap: 5px; }
+.cf-field-label {
+  font: 700 10px -apple-system, system-ui; letter-spacing: 0.06em;
+  text-transform: uppercase; color: var(--cf-muted);
+}
+.cf-chipset { display: flex; flex-wrap: wrap; gap: 5px; }
+.cf-chip {
+  border: 1px solid var(--cf-border); background: transparent; color: var(--cf-muted);
+  padding: 4px 10px; border-radius: 20px; font: 600 11px -apple-system, system-ui;
+  text-transform: capitalize;
+}
+.cf-chip.on {
+  background: var(--cf-chip, var(--cf-accent));
+  border-color: var(--cf-chip, var(--cf-accent));
+  color: #fff;
+}
+.cf-popup-actions { display: flex; gap: 8px; justify-content: flex-end; }
+
+/* Thread */
+.cf-thread-body {
+  display: flex; flex-direction: column; gap: 12px;
+  max-height: 280px; overflow-y: auto; padding-right: 2px;
+}
+.cf-msg { display: flex; flex-direction: column; gap: 3px; }
+.cf-msg-meta { display: flex; align-items: center; gap: 6px; }
+.cf-avatar { font-size: 12px; }
+.cf-msg-name {
+  font: 700 11px -apple-system, system-ui; color: var(--cf-muted);
+}
+.cf-msg-body {
+  font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
+  background: rgba(255,255,255,0.04); border-radius: 9px; padding: 7px 10px;
+}
+.cf-overlay[data-theme="light"] .cf-msg-body { background: rgba(0,0,0,0.03); }
+.cf-msg-agent .cf-msg-body { border-left: 2px solid var(--cf-accent); }
+.cf-thread-compose { display: flex; flex-direction: column; gap: 8px; }
+.cf-thread-actions { display: flex; gap: 8px; align-items: center; }
+.cf-thread-actions .cf-btn-primary { margin-left: auto; }
+.cf-resolved-tag { font: 600 11px -apple-system, system-ui; color: #3ecf8e; }
+.cf-tag {
+  font: 700 9px -apple-system, system-ui; text-transform: uppercase;
+  letter-spacing: 0.05em; padding: 2px 6px; border-radius: 5px;
+  background: var(--cf-tag, var(--cf-accent)); color: #fff;
+}
+
+/* Respect reduced-motion: keep the UI usable, drop the motion. */
+@media (prefers-reduced-motion: reduce) {
+  .cf-pin, .cf-popup, .cf-multi-box { animation: none !important; }
+  .cf-pin.agent::after { display: none; }
+}
+`;

package/src/ulid.ts

@@ -0,0 +1,21 @@
+/**
+ * Tiny ULID. Inlined instead of pulling the npm `ulid` package so
+ * the IIFE bundle stays dep-free.
+ *
+ * Format: 10 chars of base32 timestamp (ms) + 16 chars of base32
+ * random. Lexically sortable by creation time, ~26 chars long.
+ */
+
+const ALPHABET = "0123456789ABCDEFGHJKMNPQRSTVWXYZ";
+
+export function ulid(now: number = Date.now()): string {
+  let t = now;
+  let time = "";
+  for (let i = 0; i < 10; i++) {
+    time = ALPHABET[t & 31]! + time;
+    t = Math.floor(t / 32);
+  }
+  let rand = "";
+  for (let i = 0; i < 16; i++) rand += ALPHABET[Math.floor(Math.random() * 32)];
+  return time + rand;
+}

package/src/webhook.ts

@@ -0,0 +1,33 @@
+/**
+ * Push-based outbound event emitter — AFS v1.1 envelope shape.
+ *
+ *   { type, timestamp (ISO), sessionId, sequence, payload }
+ *
+ * `sequence` is a per-session monotonic counter so the host
+ * webhook can detect missed events and request replay.
+ */
+
+import { sequence, sessionId, webhookUrl } from "./store.js";
+import type { AgentationEvent, AgentationEventType } from "./types.js";
+
+export function emit<P>(type: AgentationEventType, payload: P): void {
+  const url = webhookUrl.value;
+  const envelope: AgentationEvent<P> = {
+    type,
+    timestamp: new Date().toISOString(),
+    sessionId: sessionId.value,
+    sequence: ++sequence.value,
+    payload,
+  };
+  if (!url) return;
+  try {
+    void fetch(url, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(envelope),
+      keepalive: true,
+    }).catch((err) => console.warn("[annotations] webhook emit failed", err));
+  } catch (err) {
+    console.warn("[annotations] webhook emit threw synchronously", err);
+  }
+}