agent-canvas 0.1.0

package/daemon/client/Popover.tsx

@@ -0,0 +1,285 @@
+import React, { useEffect, useRef, useState, useCallback, useMemo } from "react";
+import { createPortal } from "react-dom";
+import { getPopoverPosition } from "./popoverPosition";
+
+interface PopoverProps {
+  anchorEl: HTMLElement;
+  scrollContainer?: HTMLElement | null;
+  onClose: () => void;
+  /** Selectors that should not trigger outside-click close */
+  ignoreSelector?: string;
+  zIndex?: string;
+  padding?: string;
+  width?: string;
+  children: React.ReactNode;
+}
+
+export function Popover({ anchorEl, scrollContainer, onClose, ignoreSelector, zIndex = "50", padding = "12px", width = "280px", children }: PopoverProps) {
+  const popRef = useRef<HTMLDivElement>(null);
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  const { style: posStyle, parent } = getPopoverPosition(anchorEl, scrollContainer);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      const handler = (e: MouseEvent) => {
+        if (popRef.current && !popRef.current.contains(e.target as Node)) {
+          if (ignoreSelector && (e.target as HTMLElement).closest?.(ignoreSelector)) return;
+          onCloseRef.current();
+          document.removeEventListener("mousedown", handler);
+        }
+      };
+      document.addEventListener("mousedown", handler);
+      return () => document.removeEventListener("mousedown", handler);
+    }, 0);
+    return () => clearTimeout(timer);
+  }, [ignoreSelector]);
+
+  return createPortal(
+    <div
+      ref={popRef}
+      style={{
+        ...posStyle,
+        zIndex,
+        width,
+        background: "var(--color-bg-elevated)",
+        border: "1px solid var(--color-border-hover)",
+        borderRadius: "8px",
+        boxShadow: "0 4px 12px var(--color-shadow)",
+        padding,
+        fontFamily: "'Inter', sans-serif",
+      }}
+    >
+      {children}
+    </div>,
+    parent,
+  );
+}
+
+/* ── Create annotation popover ─────────────────────────────── */
+
+interface AnnotationCreatePopoverProps {
+  anchorEl: HTMLElement;
+  scrollContainer?: HTMLElement | null;
+  snippet: string;
+  /** Max length for displayed snippet (default 100) */
+  truncateAt?: number;
+  /** Custom header instead of the default quoted snippet */
+  header?: React.ReactNode;
+  onAdd: (note: string) => void;
+  onCancel: () => void;
+}
+
+const SUGGESTION_GROUPS: { label: string; items: string[] }[] = [
+  { label: "Clarity", items: ["Unclear", "Why?", "Needs example", "Missing context"] },
+  { label: "Scope", items: ["Overkill", "Out of scope", "Important", "Risky"] },
+  { label: "Action", items: ["Simplify", "Rethink", "Expand on this", "Skip this"] },
+];
+const ALL_SUGGESTIONS = SUGGESTION_GROUPS.flatMap((g) => g.items);
+
+export function AnnotationCreatePopover({ anchorEl, scrollContainer, snippet, truncateAt = 100, header, onAdd, onCancel }: AnnotationCreatePopoverProps) {
+  const [note, setNote] = useState("");
+  const [selectedIdx, setSelectedIdx] = useState<number | null>(null);
+  const [suppressed, setSuppressed] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => { textareaRef.current?.focus(); }, []);
+
+  const submit = useCallback(() => {
+    if (note.trim()) onAdd(note.trim());
+    else onCancel();
+  }, [note, onAdd, onCancel]);
+
+  const matches = note.trim().length > 0
+    ? ALL_SUGGESTIONS.filter((s) => s.toLowerCase().startsWith(note.trim().toLowerCase()))
+    : ALL_SUGGESTIONS;
+  // Don't show if the input already exactly matches a suggestion, or if suppressed
+  const filtered = suppressed ? [] : matches.length === 1 && matches[0].toLowerCase() === note.trim().toLowerCase() ? [] : matches;
+  const matchSet = new Set(filtered);
+
+  // Build filtered groups for grouped display
+  const filteredGroups = SUGGESTION_GROUPS
+    .map((g) => ({ label: g.label, items: g.items.filter((s) => matchSet.has(s)) }))
+    .filter((g) => g.items.length > 0);
+
+  // Each group = one column
+  const colItems = filteredGroups.map((g) => g.items);
+  const flatFiltered = colItems.flat();
+
+  // Navigation state as [col, row]
+  const selectedCol = useMemo(() => {
+    if (selectedIdx === null) return 0;
+    let count = 0;
+    for (let c = 0; c < colItems.length; c++) {
+      if (selectedIdx < count + colItems[c].length) return c;
+      count += colItems[c].length;
+    }
+    return 0;
+  }, [selectedIdx, colItems]);
+  const selectedRow = useMemo(() => {
+    if (selectedIdx === null) return 0;
+    let count = 0;
+    for (let c = 0; c < selectedCol; c++) count += colItems[c].length;
+    return selectedIdx - count;
+  }, [selectedIdx, selectedCol, colItems]);
+
+  const colRowToFlat = (col: number, row: number) => {
+    let idx = 0;
+    for (let c = 0; c < col; c++) idx += colItems[c].length;
+    return idx + row;
+  };
+
+  // Reset selection and unsuppress when input changes
+  useEffect(() => { setSelectedIdx(null); setSuppressed(false); }, [note]);
+
+  const applySuggestion = useCallback((s: string) => {
+    setNote(s);
+  }, []);
+
+  const truncated = snippet.length > truncateAt ? snippet.slice(0, truncateAt) + "..." : snippet;
+
+  return (
+    <Popover anchorEl={anchorEl} scrollContainer={scrollContainer} onClose={onCancel} width="420px">
+      {header ?? (
+        <div style={{ fontSize: "11px", color: "var(--color-text-tertiary)", fontStyle: "italic", marginBottom: "8px", lineHeight: "1.4", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden" }}>
+          &ldquo;{truncated}&rdquo;
+        </div>
+      )}
+      <textarea
+        ref={textareaRef}
+        value={note}
+        onChange={(e) => setNote(e.target.value)}
+        onKeyDown={(e) => {
+          if (flatFiltered.length > 0 && (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft" || e.key === "ArrowRight")) {
+            e.preventDefault();
+            if (selectedIdx === null) {
+              setSelectedIdx(0);
+              return;
+            }
+            if (e.key === "ArrowDown") {
+              const newRow = Math.min(selectedRow + 1, colItems[selectedCol].length - 1);
+              setSelectedIdx(colRowToFlat(selectedCol, newRow));
+            } else if (e.key === "ArrowUp") {
+              const newRow = Math.max(selectedRow - 1, 0);
+              setSelectedIdx(colRowToFlat(selectedCol, newRow));
+            } else if (e.key === "ArrowRight") {
+              const newCol = Math.min(selectedCol + 1, colItems.length - 1);
+              const newRow = Math.min(selectedRow, colItems[newCol].length - 1);
+              setSelectedIdx(colRowToFlat(newCol, newRow));
+            } else if (e.key === "ArrowLeft") {
+              const newCol = Math.max(selectedCol - 1, 0);
+              const newRow = Math.min(selectedRow, colItems[newCol].length - 1);
+              setSelectedIdx(colRowToFlat(newCol, newRow));
+            }
+            return;
+          }
+          if (selectedIdx !== null && flatFiltered.length > 0) {
+            if (e.key === "Tab") { e.preventDefault(); applySuggestion(flatFiltered[selectedIdx]); return; }
+            if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); onAdd(flatFiltered[selectedIdx]); return; }
+          }
+          if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submit(); return; }
+          if (e.key === "Escape") { if (flatFiltered.length > 0 && !suppressed) { setSuppressed(true); } else { onCancel(); } }
+        }}
+        style={{ width: "100%", minHeight: "60px", background: "transparent", border: "none", color: "var(--color-text-primary)", fontFamily: "'Inter', sans-serif", fontSize: "13px", lineHeight: "1.5", resize: "vertical", outline: "none" }}
+        placeholder="Add your note..."
+      />
+      <div style={{ display: "flex", justifyContent: "flex-end", gap: "8px", marginTop: "8px" }}>
+        <button onClick={onCancel} style={{ fontSize: "11px", color: "var(--color-text-tertiary)", background: "none", border: "none", cursor: "pointer", padding: "4px 12px", fontFamily: "'Inter', sans-serif" }}>Cancel</button>
+        <button onClick={submit} style={{ fontSize: "11px", fontWeight: 500, padding: "4px 12px", borderRadius: "6px", background: "var(--color-highlight-bg)", color: "var(--color-text-primary)", border: "1px solid var(--color-highlight-border)", cursor: "pointer", fontFamily: "'Inter', sans-serif" }}>Add</button>
+      </div>
+      {flatFiltered.length > 0 && (
+        <div style={{ marginTop: "6px", borderTop: "1px solid var(--color-border-subtle)", paddingTop: "8px", display: "flex", gap: "4px" }}>
+          {filteredGroups.map((group) => (
+            <div key={group.label} style={{ flex: 1 }}>
+              <div style={{ fontSize: "10px", fontWeight: 600, color: "var(--color-text-disabled)", textTransform: "uppercase", letterSpacing: "0.05em", padding: "2px 6px", marginBottom: "2px", fontFamily: "'Inter', sans-serif" }}>
+                {group.label}
+              </div>
+              {group.items.map((s) => {
+                const flatIdx = flatFiltered.indexOf(s);
+                return (
+                  <div
+                    key={s}
+                    onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); applySuggestion(s); }}
+                    onMouseEnter={() => setSelectedIdx(flatIdx)}
+                    style={{
+                      padding: "3px 6px",
+                      fontSize: "12px",
+                      borderRadius: "4px",
+                      fontFamily: "'Inter', sans-serif",
+                      color: flatIdx === selectedIdx ? "var(--color-text-primary)" : "var(--color-text-secondary)",
+                      background: flatIdx === selectedIdx ? "var(--color-highlight-selected)" : "transparent",
+                      cursor: "pointer",
+                    }}
+                  >
+                    <span style={{ fontWeight: 500 }}>{s.slice(0, note.trim().length)}</span>{s.slice(note.trim().length)}
+                  </div>
+                );
+              })}
+            </div>
+          ))}
+        </div>
+      )}
+    </Popover>
+  );
+}
+
+/* ── Edit annotation popover ───────────────────────────────── */
+
+interface AnnotationEditPopoverProps {
+  anchorEl: HTMLElement;
+  scrollContainer?: HTMLElement | null;
+  initialNote: string;
+  onUpdate: (note: string) => void;
+  onDelete: () => void;
+  onClose: () => void;
+}
+
+export function AnnotationEditPopover({ anchorEl, scrollContainer, initialNote, onUpdate, onDelete, onClose }: AnnotationEditPopoverProps) {
+  const [note, setNote] = useState(initialNote);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [deleteHover, setDeleteHover] = useState(false);
+
+  useEffect(() => {
+    const ta = textareaRef.current;
+    if (ta) {
+      ta.style.height = "auto";
+      ta.style.height = ta.scrollHeight + "px";
+      ta.focus();
+      ta.setSelectionRange(ta.value.length, ta.value.length);
+    }
+  }, []);
+
+  const handleClose = useCallback(() => {
+    if (!note.trim()) { onDelete(); onClose(); return; }
+    onUpdate(note);
+    onClose();
+  }, [note, onUpdate, onDelete, onClose]);
+
+  return (
+    <Popover anchorEl={anchorEl} scrollContainer={scrollContainer} onClose={handleClose} ignoreSelector="[data-annotation-id]" zIndex="60" padding="10px 12px">
+      <textarea
+        ref={textareaRef}
+        value={note}
+        onChange={(e) => {
+          setNote(e.target.value);
+          onUpdate(e.target.value);
+          e.target.style.height = "auto";
+          e.target.style.height = e.target.scrollHeight + "px";
+        }}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleClose(); }
+          if (e.key === "Escape") handleClose();
+        }}
+        style={{ width: "100%", background: "transparent", border: "none", color: "var(--color-text-primary)", fontFamily: "'Inter', sans-serif", fontSize: "13px", lineHeight: "1.5", resize: "none", outline: "none", overflow: "hidden" }}
+      />
+      <div style={{ display: "flex", justifyContent: "flex-end", marginTop: "6px" }}>
+        <button
+          onClick={() => { onDelete(); onClose(); }}
+          onMouseEnter={() => setDeleteHover(true)}
+          onMouseLeave={() => setDeleteHover(false)}
+          style={{ fontSize: "11px", color: deleteHover ? "var(--color-accent-red)" : "var(--color-text-tertiary)", background: "none", border: "none", cursor: "pointer", padding: "2px 0", fontFamily: "'Inter', sans-serif" }}
+        >Delete</button>
+      </div>
+    </Popover>
+  );
+}

package/daemon/client/ResponsePreview.tsx

@@ -0,0 +1,260 @@
+import React, { useEffect, useState, useRef, useMemo } from "react";
+import { useAnnotations } from "./AnnotationProvider";
+import { generateMarkdown, getMissingRequired, getMissingRequiredFeedback } from "./generateMarkdown";
+
+interface ResponsePreviewProps {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (feedback: string) => void;
+}
+
+export function ResponsePreview({ open, onClose, onSubmit }: ResponsePreviewProps) {
+  const { annotations, generalNote, responses, feedbackEntries } = useAnnotations();
+  const [text, setText] = useState("");
+  const [manuallyEdited, setManuallyEdited] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (!open) { setManuallyEdited(false); setEditMode(false); setValidationError(null); return; }
+    if (manuallyEdited) return;
+    setText(generateMarkdown(annotations, generalNote, responses, feedbackEntries));
+  }, [annotations, generalNote, responses, feedbackEntries, manuallyEdited, open]);
+
+  useEffect(() => {
+    if (open && editMode && textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, [open, editMode]);
+
+  useEffect(() => {
+    if (!open) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  const hasContent = text.trim().length > 0;
+
+  return (
+    <div className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-8" onClick={onClose}>
+      <div className="bg-bg-surface border border-border-medium rounded-xl shadow-lg w-full max-w-2xl flex flex-col" style={{ height: "80vh" }} onClick={(e) => e.stopPropagation()}>
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-3 border-b border-border-subtle flex-shrink-0">
+          <div className="flex items-center gap-3">
+            <span className="text-[13px] font-medium text-text-primary font-body">Response preview</span>
+            {manuallyEdited && (
+              <button onClick={() => { setManuallyEdited(false); setEditMode(false); }} className="text-[11px] text-text-tertiary hover:text-text-secondary font-body">
+                Reset
+              </button>
+            )}
+          </div>
+          <div className="flex items-center gap-2">
+            {/* Mode toggle */}
+            <div className="flex items-center bg-bg-base rounded-md p-0.5">
+              <button
+                onClick={() => setEditMode(false)}
+                className={`px-2.5 py-1 rounded text-[11px] font-body font-medium transition-colors ${
+                  !editMode ? "bg-bg-elevated text-text-primary shadow-sm" : "text-text-tertiary hover:text-text-secondary"
+                }`}
+              >
+                Preview
+              </button>
+              <button
+                onClick={() => setEditMode(true)}
+                className={`px-2.5 py-1 rounded text-[11px] font-body font-medium transition-colors ${
+                  editMode ? "bg-bg-elevated text-text-primary shadow-sm" : "text-text-tertiary hover:text-text-secondary"
+                }`}
+              >
+                Edit
+              </button>
+            </div>
+            <button onClick={onClose} className="text-text-tertiary hover:text-text-secondary w-7 h-7 flex items-center justify-center rounded-md hover:bg-border-subtle transition-colors">
+              &#x2715;
+            </button>
+          </div>
+        </div>
+
+        {/* Content */}
+        {editMode ? (
+          <textarea
+            ref={textareaRef}
+            value={text}
+            onChange={(e) => { setText(e.target.value); setManuallyEdited(true); }}
+            className="flex-1 w-full bg-bg-base p-5 text-[13px] font-mono text-text-code resize-none focus:outline-none leading-relaxed placeholder:text-text-disabled"
+            placeholder="Your feedback will appear here..."
+          />
+        ) : (
+          <div className="flex-1 overflow-y-auto p-5">
+            <MarkdownPreview text={text} />
+          </div>
+        )}
+
+        {/* Actions */}
+        {validationError && (
+          <div className="px-5 py-2 text-[12px] text-accent-red font-body border-t border-border-subtle flex-shrink-0 flex items-center justify-between gap-2">
+            <span>{validationError}</span>
+            <button
+              onClick={() => {
+                setValidationError(null);
+                onSubmit(text);
+              }}
+              className="text-[11px] text-text-tertiary hover:text-text-secondary font-body whitespace-nowrap underline"
+            >
+              Submit anyway
+            </button>
+          </div>
+        )}
+        <div className="flex justify-end gap-2 px-5 py-3 border-t border-border-subtle flex-shrink-0">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 rounded-lg text-[13px] font-body text-text-tertiary hover:text-text-secondary transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={() => {
+              const missingResponses = getMissingRequired(responses);
+              const missingFeedback = getMissingRequiredFeedback(feedbackEntries);
+              const allMissing = [
+                ...missingResponses.map((r) => r.label),
+                ...missingFeedback.map((e) => e.label || e.id),
+              ];
+              if (allMissing.length > 0) {
+                setValidationError(`Please answer: ${allMissing.join(", ")}`);
+                return;
+              }
+              setValidationError(null);
+              onSubmit(text);
+            }}
+            disabled={!hasContent}
+            className={`px-6 py-2 rounded-lg font-body text-[13px] font-medium transition-all ${
+              hasContent
+                ? "bg-btn-primary text-btn-primary-text hover:opacity-90"
+                : "bg-bg-input text-text-disabled cursor-default"
+            }`}
+          >
+            Submit feedback
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function MarkdownPreview({ text }: { text: string }) {
+  const elements = useMemo(() => parseMarkdown(text), [text]);
+  return <div className="font-body text-body text-text-primary leading-relaxed">{elements}</div>;
+}
+
+function InlineText({ text }: { text: string }) {
+  const parts: React.ReactNode[] = [];
+  const regex = /(\*\*(.+?)\*\*|`(.+?)`)/g;
+  let last = 0;
+  let match: RegExpExecArray | null;
+  let key = 0;
+
+  while ((match = regex.exec(text)) !== null) {
+    if (match.index > last) parts.push(text.slice(last, match.index));
+    if (match[2]) parts.push(<strong key={key++} className="font-semibold text-text-primary">{match[2]}</strong>);
+    else if (match[3]) parts.push(<code key={key++} className="font-mono text-code bg-bg-code px-1 py-px rounded">{match[3]}</code>);
+    last = regex.lastIndex;
+  }
+  if (last < text.length) parts.push(text.slice(last));
+  return <>{parts}</>;
+}
+
+function parseMarkdown(md: string): React.ReactNode[] {
+  const lines = md.split("\n");
+  const elements: React.ReactNode[] = [];
+  let i = 0;
+  let key = 0;
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    // Headings
+    if (line.startsWith("#### ")) {
+      elements.push(<h4 key={key++} className="text-[13px] font-body font-semibold text-text-primary mt-5 mb-1">{line.slice(5)}</h4>);
+      i++; continue;
+    }
+    if (line.startsWith("### ")) {
+      elements.push(<h3 key={key++} className="text-[14px] font-body font-semibold text-text-primary mt-5 mb-1">{line.slice(4)}</h3>);
+      i++; continue;
+    }
+    if (line.startsWith("## ")) {
+      elements.push(<h2 key={key++} className="text-task-label font-body font-semibold text-text-primary mt-6 mb-2 pb-1 border-b border-border-subtle">{line.slice(3)}</h2>);
+      i++; continue;
+    }
+
+    // Blockquote — collect consecutive > lines
+    if (line.startsWith("> ")) {
+      const quoteLines: string[] = [];
+      while (i < lines.length && lines[i].startsWith("> ")) {
+        quoteLines.push(lines[i].slice(2));
+        i++;
+      }
+      elements.push(
+        <blockquote key={key++} className="border-l-2 border-border-hover pl-3 my-2 text-text-secondary italic text-[13px]">
+          {quoteLines.map((ql, j) => <div key={j}>{ql}</div>)}
+        </blockquote>
+      );
+      continue;
+    }
+
+    // Checkbox list — collect consecutive - [x]/- [ ] lines
+    if (line.startsWith("- [x] ") || line.startsWith("- [ ] ")) {
+      const items: { checked: boolean; label: string }[] = [];
+      while (i < lines.length && (lines[i].startsWith("- [x] ") || lines[i].startsWith("- [ ] "))) {
+        items.push({ checked: lines[i].startsWith("- [x] "), label: lines[i].slice(6) });
+        i++;
+      }
+      elements.push(
+        <ul key={key++} className="my-1 space-y-0.5">
+          {items.map((item, j) => (
+            <li key={j} className="flex items-center gap-2 text-[13px]">
+              <span className={`w-3.5 h-3.5 rounded flex items-center justify-center flex-shrink-0 ${item.checked ? "bg-accent-amber" : "border border-border-hover"}`}>
+                {item.checked && (
+                  <svg width="8" height="8" viewBox="0 0 10 10" fill="none">
+                    <path d="M2.5 5L4.5 7L7.5 3" style={{ stroke: "var(--color-text-inverse)" }} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                  </svg>
+                )}
+              </span>
+              <span className={item.checked ? "text-text-primary" : "text-text-tertiary"}>{item.label}</span>
+            </li>
+          ))}
+        </ul>
+      );
+      continue;
+    }
+
+    // Regular list — collect consecutive - lines
+    if (line.startsWith("- ")) {
+      const items: string[] = [];
+      while (i < lines.length && lines[i].startsWith("- ")) {
+        items.push(lines[i].slice(2));
+        i++;
+      }
+      elements.push(
+        <ul key={key++} className="my-1 space-y-0.5 list-disc list-inside">
+          {items.map((item, j) => <li key={j} className="text-[13px] text-text-secondary"><InlineText text={item} /></li>)}
+        </ul>
+      );
+      continue;
+    }
+
+    // Empty line
+    if (line.trim() === "") { i++; continue; }
+
+    // Paragraph
+    elements.push(<p key={key++} className="my-1.5 text-[13px]"><InlineText text={line} /></p>);
+    i++;
+  }
+
+  return elements;
+}

package/daemon/client/RevisionSelect.tsx

@@ -0,0 +1,97 @@
+import React, { useEffect, useState, useRef, useContext } from "react";
+import { RevisionContext, RevisionInfo } from "./App";
+
+/** Format a revision for the trigger button: label or "Round N" */
+function revisionButtonLabel(r: RevisionInfo) {
+  return r.label || `Round ${r.revision}`;
+}
+
+/** Format relative time from ISO string */
+function relativeTime(iso: string): string {
+  const diff = Date.now() - new Date(iso).getTime();
+  const seconds = Math.floor(diff / 1000);
+  if (seconds < 60) return "just now";
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+interface RevisionSelectProps {
+  value: number;
+  onChange: (rev: number) => void;
+  /** Accent color for the trigger text */
+  accent?: "default" | "red" | "green" | "amber";
+  /** Extra class on the trigger button */
+  className?: string;
+}
+
+export function RevisionSelect({ value, onChange, accent = "default", className }: RevisionSelectProps) {
+  const { currentRevision, revisions } = useContext(RevisionContext);
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+
+  const selected = revisions.find((r) => r.revision === value);
+
+  const accentClasses = {
+    default: "text-text-secondary hover:text-text-primary",
+    red: "text-accent-red",
+    green: "text-accent-green",
+    amber: "text-accent-amber bg-highlight-selected",
+  };
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        onClick={() => setOpen(!open)}
+        className={`flex items-center gap-1.5 text-[12px] font-body font-medium px-2 py-1 rounded-md transition-colors hover:bg-bg-elevated ${accentClasses[accent]} ${className || ""}`}
+      >
+        {selected ? revisionButtonLabel(selected) : `Round ${value}`}
+        <svg width="10" height="10" viewBox="0 0 10 10" fill="none" className={`text-text-tertiary transition-transform duration-200 ${open ? "rotate-180" : ""}`}>
+          <path d="M2.5 4l2.5 2.5L7.5 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+      </button>
+
+      {open && (
+        <div className="absolute top-full left-0 mt-1 w-64 bg-bg-elevated border border-border-hover rounded-lg shadow-lg z-50 py-1 max-h-80 overflow-y-auto">
+          {[...revisions].reverse().map((r) => (
+            <button
+              key={r.revision}
+              onClick={() => { onChange(r.revision); setOpen(false); }}
+              className={`w-full flex items-center gap-2 px-3 py-2 text-[12px] font-body transition-colors ${
+                r.revision === value
+                  ? "bg-bg-surface text-text-primary"
+                  : "text-text-secondary hover:bg-bg-surface hover:text-text-primary"
+              }`}
+            >
+              <span className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${
+                r.revision === currentRevision ? "bg-accent-green" : r.hasFeedback ? "bg-accent-amber" : "bg-border-hover"
+              }`} />
+              <span className="flex-1 text-left truncate">
+                {r.label ? (
+                  <>{r.label} <span className="text-text-tertiary">#{r.revision}</span></>
+                ) : (
+                  <>Round {r.revision}</>
+                )}
+              </span>
+              <span className="text-[10px] text-text-tertiary flex-shrink-0">
+                {r.revision === currentRevision ? "current" : r.hasFeedback ? "sent" : relativeTime(r.createdAt)}
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/daemon/client/SessionContext.tsx

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const SessionContext = createContext<string>("");