@coframe-gtm/annotations 1.0.4 → 1.2.0

package/src/ui/ThreadPanel.tsx

@@ -1,124 +0,0 @@
-/**
- * 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

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