agent-canvas 0.1.0

package/daemon/client/components/Mermaid.tsx

@@ -0,0 +1,277 @@
+import React, { useEffect, useRef, useState, useCallback } from "react";
+import { useAnnotations, Annotation } from "#canvas/runtime";
+import { AnnotationCreatePopover } from "../Popover";
+
+interface MermaidProps {
+  children?: React.ReactNode;
+}
+
+interface NodePopoverState {
+  anchorEl: HTMLElement;
+  snippet: string;
+  prefix: string;
+}
+
+export function Mermaid({ children }: MermaidProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [error, setError] = useState<string | null>(null);
+  const source = typeof children === "string" ? children : String(children ?? "");
+  const { annotations, addAnnotationWithId, activeAnnotationId, setActiveAnnotationId } = useAnnotations();
+  const [nodePopover, setNodePopover] = useState<NodePopoverState | null>(null);
+
+  const annotationsRef = useRef(annotations);
+  annotationsRef.current = annotations;
+
+  const handleNodeClick = useCallback((anchorEl: HTMLElement, snippet: string, prefix: string) => {
+    const diagramSnippet = `[Diagram ${prefix.toLowerCase()}] ${snippet}`;
+    const existing = annotationsRef.current.find((a) => a.snippet === diagramSnippet);
+    if (existing) {
+      setActiveAnnotationId(existing.id);
+    } else {
+      setNodePopover({ anchorEl, snippet, prefix });
+    }
+  }, [setActiveAnnotationId]);
+
+  const handleNodeClickRef = useRef(handleNodeClick);
+  handleNodeClickRef.current = handleNodeClick;
+
+  useEffect(() => {
+    let cancelled = false;
+    const render = async () => {
+      try {
+        const mermaid = (window as any).mermaid;
+        if (!mermaid) { setError("Mermaid library not loaded"); return; }
+        const theme = document.documentElement.dataset.theme === "light" ? "default" : "dark";
+        mermaid.initialize({ startOnLoad: false, theme });
+        const id = `mermaid-${Math.random().toString(36).slice(2)}`;
+        const { svg } = await mermaid.render(id, source.trim());
+        if (!cancelled && containerRef.current) {
+          containerRef.current.innerHTML = svg;
+          setupNodeAnnotations(containerRef.current, (el, snippet, prefix) => handleNodeClickRef.current(el, snippet, prefix));
+          highlightAnnotatedNodes(containerRef.current, annotationsRef.current);
+        }
+        setError(null);
+      } catch (e: any) {
+        if (!cancelled) setError(e.message || "Invalid diagram");
+      }
+    };
+    render();
+
+    // Re-render on theme change
+    const observer = new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        if (m.attributeName === "data-theme") render();
+      }
+    });
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
+
+    return () => { cancelled = true; observer.disconnect(); };
+  }, [source]);
+
+  // Update visual highlights when annotations change
+  useEffect(() => {
+    if (containerRef.current) {
+      highlightAnnotatedNodes(containerRef.current, annotations, activeAnnotationId);
+    }
+  }, [annotations, activeAnnotationId]);
+
+  if (error) {
+    return (
+      <div className="bg-accent-red-muted rounded-md p-4 mt-3 text-body text-accent-red">
+        Mermaid error: {error}
+        <pre className="mt-2 text-tiny text-text-tertiary whitespace-pre-wrap">{source}</pre>
+      </div>
+    );
+  }
+
+  const scrollContainer = containerRef.current?.closest("#plan-scroll-container") as HTMLElement | null;
+
+  return (
+    <>
+      <div ref={containerRef} className="mt-3 flex justify-center overflow-x-auto mermaid-container" data-md="mermaid" data-md-source={source.trim()} />
+      {nodePopover && (
+        <AnnotationCreatePopover
+          anchorEl={nodePopover.anchorEl}
+          scrollContainer={scrollContainer}
+          snippet={nodePopover.snippet}
+          header={
+            <div style={{ fontSize: "12px", color: "var(--color-text-tertiary)", marginBottom: "8px", lineHeight: "1.4", display: "flex", alignItems: "center", gap: "6px" }}>
+              <span style={{ width: "8px", height: "8px", borderRadius: "50%", background: "var(--color-accent-amber)", flexShrink: 0 }} />
+              {nodePopover.snippet}
+            </div>
+          }
+          onAdd={(note) => {
+            const id = `ann-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+            addAnnotationWithId(id, `[Diagram ${nodePopover.prefix.toLowerCase()}] ${nodePopover.snippet}`, note);
+            setNodePopover(null);
+          }}
+          onCancel={() => setNodePopover(null)}
+        />
+      )}
+    </>
+  );
+}
+
+function setupNodeAnnotations(
+  container: HTMLElement,
+  showPopover: (anchorEl: HTMLElement, snippet: string, prefix: string) => void,
+) {
+  const makeClickable = (el: SVGElement, getSnippet: () => string, prefix: string) => {
+    el.style.cursor = "pointer";
+    el.addEventListener("mouseenter", () => { el.style.filter = "brightness(1.2)"; });
+    el.addEventListener("mouseleave", () => { el.style.filter = ""; });
+    el.addEventListener("click", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      showPopover(el as unknown as HTMLElement, getSnippet(), prefix);
+    });
+  };
+
+  // Nodes
+  for (const node of container.querySelectorAll(".node")) {
+    makeClickable(node as SVGElement, () => {
+      const labelEl = node.querySelector(".nodeLabel") || node.querySelector("foreignObject span") || node.querySelector("text");
+      return labelEl?.textContent?.trim() || "Node";
+    }, "Node");
+  }
+
+  // Edge paths (connections)
+  for (const edge of container.querySelectorAll(".edgePath")) {
+    const el = edge as SVGElement;
+    // Widen hit area for thin lines
+    const path = el.querySelector("path");
+    if (path) {
+      path.style.strokeWidth = Math.max(parseFloat(path.style.strokeWidth || "1"), 8) + "px";
+      path.style.strokeOpacity = "0";
+      const clone = path.cloneNode(true) as SVGPathElement;
+      clone.style.strokeWidth = "";
+      clone.style.strokeOpacity = "";
+      el.insertBefore(clone, path);
+    }
+    // Find the label for this edge (sibling edgeLabel)
+    const edgeId = el.id || "";
+    makeClickable(el, () => {
+      // Try to find matching edge label
+      const labels = container.querySelectorAll(".edgeLabel");
+      for (const label of labels) {
+        if (label.id && edgeId && label.id.replace("label", "").includes(edgeId.replace("L-", "").replace("edge", ""))) {
+          const text = label.textContent?.trim();
+          if (text) return text;
+        }
+      }
+      // Fallback: find nearest edge label by position
+      return "Connection";
+    }, "Edge");
+  }
+
+  // Edge labels
+  for (const label of container.querySelectorAll(".edgeLabel")) {
+    const text = label.textContent?.trim();
+    if (!text) continue;
+    makeClickable(label as SVGElement, () => text, "Edge");
+  }
+
+  // Sequence diagram: actors (participants)
+  for (const actor of container.querySelectorAll(".actor")) {
+    const textEl = actor.closest("g")?.querySelector("text") || actor.parentElement?.querySelector("text");
+    if (!textEl) continue;
+    // The actor rect and text are siblings in a <g> — make the whole <g> clickable
+    const group = actor.closest("g") as SVGElement | null;
+    if (!group || group.hasAttribute("data-clickable")) continue;
+    group.setAttribute("data-clickable", "true");
+    makeClickable(group, () => textEl.textContent?.trim() || "Participant", "Node");
+  }
+
+  // Sequence diagram: message labels
+  for (const msgText of container.querySelectorAll(".messageText")) {
+    const text = msgText.textContent?.trim();
+    if (!text) continue;
+    makeClickable(msgText as SVGElement, () => text, "Edge");
+  }
+}
+
+function highlightAnnotatedNodes(container: HTMLElement, annotations: Annotation[], activeId?: string | null) {
+  // Collect annotated diagram snippets
+  const annotatedSnippets = new Map<string, string>();
+  for (const ann of annotations) {
+    const match = ann.snippet.match(/^\[Diagram (?:node|edge)\] (.+)$/);
+    if (match) annotatedSnippets.set(match[1], ann.id);
+  }
+
+  // Reset all node outlines
+  for (const el of container.querySelectorAll("[data-annotated]")) {
+    (el as SVGElement).style.outline = "";
+    (el as SVGElement).style.outlineOffset = "";
+    (el as SVGElement).style.borderRadius = "";
+    el.removeAttribute("data-annotated");
+  }
+
+  if (annotatedSnippets.size === 0) return;
+
+  // Highlight nodes
+  for (const node of container.querySelectorAll(".node")) {
+    const labelEl = node.querySelector(".nodeLabel") || node.querySelector("foreignObject span") || node.querySelector("text");
+    const text = labelEl?.textContent?.trim();
+    if (!text || !annotatedSnippets.has(text)) continue;
+    const annId = annotatedSnippets.get(text)!;
+    const el = node as SVGElement;
+    el.setAttribute("data-annotated", annId);
+    const isActive = annId === activeId;
+    el.style.outline = isActive
+      ? "2px solid var(--color-highlight-border)"
+      : "2px solid var(--color-highlight-annotation)";
+    el.style.outlineOffset = "2px";
+    el.style.borderRadius = "4px";
+  }
+
+  // Highlight edge labels
+  for (const label of container.querySelectorAll(".edgeLabel")) {
+    const text = label.textContent?.trim();
+    if (!text || !annotatedSnippets.has(text)) continue;
+    const annId = annotatedSnippets.get(text)!;
+    const el = label as SVGElement;
+    el.setAttribute("data-annotated", annId);
+    const isActive = annId === activeId;
+    el.style.outline = isActive
+      ? "2px solid var(--color-highlight-border)"
+      : "2px solid var(--color-highlight-annotation)";
+    el.style.outlineOffset = "2px";
+    el.style.borderRadius = "4px";
+  }
+
+  // Highlight sequence diagram actors
+  for (const actor of container.querySelectorAll(".actor")) {
+    const group = actor.closest("g") as SVGElement | null;
+    if (!group) continue;
+    const textEl = group.querySelector("text");
+    const text = textEl?.textContent?.trim();
+    if (!text || !annotatedSnippets.has(text)) continue;
+    if (group.hasAttribute("data-annotated")) continue;
+    const annId = annotatedSnippets.get(text)!;
+    group.setAttribute("data-annotated", annId);
+    const isActive = annId === activeId;
+    const rect = group.querySelector("rect");
+    if (rect) {
+      rect.style.outline = isActive
+        ? "2px solid var(--color-highlight-border)"
+        : "2px solid var(--color-highlight-annotation)";
+      rect.style.outlineOffset = "2px";
+      rect.style.borderRadius = "4px";
+    }
+  }
+
+  // Highlight sequence diagram message labels
+  for (const msgText of container.querySelectorAll(".messageText")) {
+    const text = msgText.textContent?.trim();
+    if (!text || !annotatedSnippets.has(text)) continue;
+    const annId = annotatedSnippets.get(text)!;
+    const el = msgText as SVGElement;
+    el.setAttribute("data-annotated", annId);
+    const isActive = annId === activeId;
+    el.style.outline = isActive
+      ? "2px solid var(--color-highlight-border)"
+      : "2px solid var(--color-highlight-annotation)";
+    el.style.outlineOffset = "2px";
+    el.style.borderRadius = "4px";
+  }
+}

package/daemon/client/components/Note.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+interface NoteProps {
+  children?: React.ReactNode;
+}
+
+export function Note({ children }: NoteProps) {
+  return (
+    <div className="relative bg-bg-elevated rounded-lg px-5 py-4 mt-3 text-body text-text-secondary italic leading-relaxed" data-md="note">
+      {children}
+    </div>
+  );
+}

package/daemon/client/components/Priority.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+interface PriorityProps {
+  level: "high" | "medium" | "low";
+}
+
+const config = {
+  high:   "text-accent-red bg-accent-red-muted",
+  medium: "text-accent-amber bg-accent-amber-muted",
+  low:    "text-text-tertiary bg-border-subtle",
+};
+
+export function Priority({ level }: PriorityProps) {
+  return (
+    <span className={`inline text-tiny font-medium font-body ml-2 px-1.5 py-0.5 rounded ${config[level]}`} data-md="priority" data-md-level={level}>
+      {level}
+    </span>
+  );
+}

package/daemon/client/components/ResponseNote.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+/** Seamless note input for response components */
+export function ResponseNote({ note, onChange }: { show?: boolean; note: string; onToggle?: () => void; onChange: (n: string) => void }) {
+  return (
+    <div className="mt-1.5">
+      <textarea
+        value={note}
+        onChange={(e) => onChange(e.target.value)}
+        className="w-full bg-transparent text-[12px] font-body text-text-primary resize-none focus:outline-none border-none placeholder:text-text-disabled transition-colors min-h-[20px] p-0 leading-relaxed"
+        placeholder="Add a note..."
+        rows={1}
+        onInput={(e) => {
+          const t = e.target as HTMLTextAreaElement;
+          t.style.height = "auto";
+          t.style.height = t.scrollHeight + "px";
+        }}
+        ref={(el) => {
+          if (el) { el.style.height = "auto"; el.style.height = el.scrollHeight + "px"; }
+        }}
+      />
+    </div>
+  );
+}

package/daemon/client/components/Section.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+
+interface SectionProps {
+  title: string;
+  children?: React.ReactNode;
+}
+
+export function Section({ title, children }: SectionProps) {
+  const [collapsed, setCollapsed] = useState(false);
+
+  return (
+    <div className="relative mb-8 p-4 group/section" data-md="section" data-md-title={title}>
+      <div className="relative mb-2">
+        <button
+          onClick={() => setCollapsed(!collapsed)}
+          className={`absolute -left-8 top-1/2 -translate-y-1/2 text-text-tertiary opacity-0 group-hover/section:opacity-50 hover:!opacity-100 transition-all duration-150 p-0.5 ${collapsed ? "-rotate-90" : ""}`}
+        >
+          <svg width="14" height="14" viewBox="0 0 12 12" fill="none">
+            <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+          </svg>
+        </button>
+        <h2
+          className="font-heading text-section text-text-primary"
+          style={{ fontWeight: 400 }}
+        >
+          {title}
+        </h2>
+      </div>
+      <div className={collapsed ? "mt-6 hidden" : "mt-6"}>{children}</div>
+    </div>
+  );
+}

package/daemon/client/components/Table.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+interface TableProps {
+  headers: string[];
+  rows: string[][];
+}
+
+export function Table({ headers, rows }: TableProps) {
+  return (
+    <div className="overflow-x-auto mt-3" data-md="table">
+      <table className="w-full text-body">
+        <thead>
+          <tr className="border-b border-border-subtle">
+            {headers.map((h, i) => (
+              <th key={i} className="text-left px-4 py-2.5 text-meta font-medium uppercase tracking-wider text-text-tertiary font-body">
+                {h}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, ri) => (
+            <tr key={ri} className={`relative border-b border-border-subtle last:border-b-0 transition-colors hover:bg-bg-surface/50 ${ri % 2 === 1 ? "bg-bg-surface/30" : ""}`}>
+              {row.map((cell, ci) => (
+                <td key={ci} className="px-4 py-2.5 text-text-secondary font-body">
+                  {cell}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/daemon/client/components/Task.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+
+type Status = "todo" | "done" | "blocked" | "in-progress";
+type BadgeVariant = "info" | "success" | "warning" | "danger" | "neutral";
+
+interface ItemProps {
+  id: string;
+  label: string;
+  status?: Status;
+  badge?: string;
+  badgeVariant?: BadgeVariant;
+  children?: React.ReactNode;
+}
+
+const dotColors: Record<Status, string> = {
+  todo: "bg-border-hover",
+  done: "bg-accent-green",
+  blocked: "bg-accent-red",
+  "in-progress": "bg-accent-blue",
+};
+
+const statusLabels: Record<Status, string> = {
+  todo: "Todo",
+  done: "Done",
+  blocked: "Blocked",
+  "in-progress": "In progress",
+};
+
+const badgeStyles: Record<BadgeVariant, string> = {
+  info: "bg-accent-blue-muted text-accent-blue",
+  success: "bg-accent-green-muted text-accent-green",
+  warning: "bg-accent-amber-muted text-accent-amber",
+  danger: "bg-accent-red-muted text-accent-red",
+  neutral: "bg-border-subtle text-text-tertiary",
+};
+
+export function Item({ id, label, status, badge, badgeVariant = "neutral", children }: ItemProps) {
+  return (
+    <div
+      className="group/task relative -mx-4 px-4 py-3 rounded-md transition-colors duration-150 hover:bg-bg-input"
+      data-task-id={id}
+      data-md="item"
+      data-md-label={label}
+      {...(status ? { "data-md-status": status } : {})}
+      {...(badge ? { "data-md-badge": badge } : {})}
+    >
+      <div className="flex items-start gap-3">
+        {status && <span className={`w-2 h-2 rounded-full mt-[7px] flex-shrink-0 ${dotColors[status]}`} />}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-baseline gap-2">
+            <span className="font-body text-task-label font-semibold text-text-primary">{label}</span>
+            {status && (
+              <span className="font-body text-tiny uppercase tracking-wider text-text-tertiary opacity-0 group-hover/task:opacity-100 transition-opacity duration-150">
+                {statusLabels[status]}
+              </span>
+            )}
+            {badge && (
+              <span className={`font-body text-tiny font-medium px-1.5 py-px rounded-full ${badgeStyles[badgeVariant]}`}>
+                {badge}
+              </span>
+            )}
+          </div>
+          {children && (
+            <div className="text-body text-text-secondary mt-1 leading-relaxed">{children}</div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** @deprecated Use <Item> instead */
+export function Task(props: ItemProps) {
+  return <Item {...props} />;
+}

package/daemon/client/components/UserInput.tsx

@@ -0,0 +1,180 @@
+import React, { useEffect, useRef, useState } from "react";
+import { useAnnotations } from "#canvas/runtime";
+import { ResponseNote } from "./ResponseNote";
+
+/** Free text input from user */
+interface UserInputProps {
+  id: string;
+  label: string;
+  placeholder?: string;
+  multiline?: boolean;
+  required?: boolean;
+}
+
+export function UserInput({ id, label, placeholder, multiline, required }: UserInputProps) {
+  const { responses, setResponse } = useAnnotations();
+  const current = responses.get(id);
+  const value = (current?.value as string) ?? "";
+  const note = current?.note || "";
+  const [showNote, setShowNote] = useState(false);
+  const ref = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (!responses.has(id)) {
+      setResponse(id, { id, type: "text", label, value: "", required });
+    }
+  }, [id]);
+
+  const handleChange = (v: string) => {
+    setResponse(id, { ...current!, value: v });
+  };
+
+  const autoResize = (el: HTMLTextAreaElement) => {
+    el.style.height = "auto";
+    el.style.height = Math.max(multiline ? 60 : 32, el.scrollHeight) + "px";
+  };
+
+  const showError = current?.required && !value.trim();
+
+  return (
+    <div data-md="userinput" data-md-label={label} className="-mx-4 px-4 py-3 my-1 rounded-lg transition-colors duration-150 hover:bg-bg-input">
+      <div className="flex items-baseline gap-2 mb-2">
+        <span className="text-[13px] font-body font-medium text-text-primary">{label}</span>
+        {required && <span className="text-[10px] text-accent-red font-body">*</span>}
+      </div>
+      <textarea
+        ref={ref}
+        value={value}
+        onChange={(e) => { handleChange(e.target.value); autoResize(e.target); }}
+        placeholder={placeholder || "Type your response..."}
+        rows={multiline ? 3 : 1}
+        className="w-full bg-bg-input text-[13px] font-body text-text-primary rounded-lg px-3 py-2 resize-none focus:outline-none border border-border-subtle focus:border-border-hover placeholder:text-text-tertiary transition-colors"
+        onInput={(e) => autoResize(e.target as HTMLTextAreaElement)}
+        onFocus={(e) => autoResize(e.target)}
+      />
+      <ResponseNote show={showNote} note={note} onToggle={() => setShowNote(!showNote)} onChange={(n) => setResponse(id, { ...current!, note: n })} />
+      {showError && <p className="text-[11px] text-accent-red font-body mt-1">This field is required.</p>}
+    </div>
+  );
+}
+
+/** Numeric range / slider */
+interface RangeInputProps {
+  id: string;
+  label: string;
+  min?: number;
+  max?: number;
+  step?: number;
+  required?: boolean;
+  minLabel?: string;
+  maxLabel?: string;
+}
+
+export function RangeInput({ id, label, min = 1, max = 10, step = 1, required, minLabel, maxLabel }: RangeInputProps) {
+  const { responses, setResponse } = useAnnotations();
+  const current = responses.get(id);
+  const value = current?.value as number | null;
+  const note = current?.note || "";
+  const [showNote, setShowNote] = useState(false);
+
+  useEffect(() => {
+    if (!responses.has(id)) {
+      setResponse(id, { id, type: "range", label, value: null, required });
+    }
+  }, [id]);
+
+  const handleChange = (v: number) => {
+    setResponse(id, { ...current!, value: v });
+  };
+
+  const hasValue = value !== null && value !== undefined;
+  const displayValue = hasValue ? value : Math.round((min + max) / 2);
+  const pct = ((displayValue - min) / (max - min)) * 100;
+  const stepCount = Math.round((max - min) / step);
+  const showDots = stepCount <= 20;
+
+  const showError = current?.required && !hasValue;
+
+  return (
+    <div data-md="rangeinput" data-md-label={label} className="-mx-4 px-4 py-3 my-1 rounded-lg transition-colors duration-150 hover:bg-bg-input">
+      <div className="flex items-baseline justify-between mb-1">
+        <div className="flex items-baseline gap-2">
+          <span className="text-[13px] font-body font-medium text-text-primary">{label}</span>
+          {required && <span className="text-[10px] text-accent-red font-body">*</span>}
+        </div>
+        <span className="flex items-center gap-1.5">
+          <span className={`text-[13px] font-mono ${hasValue ? "text-accent-amber" : "text-text-disabled"}`}>
+            {hasValue ? value : "—"}
+          </span>
+          {hasValue && (
+            <button
+              onClick={() => setResponse(id, { ...current!, value: null })}
+              className="text-text-disabled hover:text-text-tertiary transition-colors text-[10px] leading-none"
+              title="Clear"
+            >
+              &#x2715;
+            </button>
+          )}
+        </span>
+      </div>
+      <div className="relative h-6 flex items-center">
+        {/* Track background */}
+        <div className="absolute left-0 right-0 h-1.5 rounded-full bg-border-medium">
+          {hasValue && <div className="h-full rounded-full bg-accent-amber transition-all duration-150" style={{ width: `${pct}%` }} />}
+        </div>
+        {/* Discrete step dots */}
+        {showDots && Array.from({ length: stepCount + 1 }, (_, i) => {
+          const dotVal = min + i * step;
+          const dotPct = ((dotVal - min) / (max - min)) * 100;
+          const isSelected = hasValue && dotVal <= value!;
+          const isActive = hasValue && dotVal === value;
+          return (
+            <div
+              key={i}
+              className={`absolute rounded-full pointer-events-none transition-all duration-150 ${
+                isActive ? "w-2.5 h-2.5 bg-accent-amber" : isSelected ? "w-1.5 h-1.5 bg-accent-amber" : "w-1.5 h-1.5 bg-border-hover"
+              }`}
+              style={{ left: `${dotPct}%`, transform: "translate(-50%, -50%)", top: "50%" }}
+            />
+          );
+        })}
+        {/* Thumb indicator */}
+        {hasValue ? (
+          <div className="absolute h-5 w-5 rounded-full bg-accent-amber shadow-md pointer-events-none transition-all duration-150" style={{ left: `calc(${pct}% - 10px)`, borderWidth: "2px", borderStyle: "solid", borderColor: "var(--color-bg-base)" }} />
+        ) : (
+          <div className="absolute h-4 w-4 rounded-full bg-border-hover pointer-events-none opacity-50" style={{ left: "calc(50% - 8px)", borderWidth: "2px", borderStyle: "solid", borderColor: "var(--color-bg-base)" }} />
+        )}
+        <input
+          type="range"
+          min={min}
+          max={max}
+          step={step}
+          value={displayValue}
+          onChange={(e) => handleChange(Number(e.target.value))}
+          className="absolute inset-0 w-full opacity-0 cursor-pointer"
+        />
+      </div>
+      {/* Labels: show step values if few enough, otherwise just min/max */}
+      {showDots && stepCount <= 10 ? (
+        <div className="flex justify-between -mt-0.5 px-0">
+          {Array.from({ length: stepCount + 1 }, (_, i) => {
+            const dotVal = min + i * step;
+            const isActive = hasValue && dotVal === value;
+            return (
+              <span key={i} className={`text-[10px] font-mono transition-colors ${isActive ? "text-accent-amber font-medium" : "text-text-disabled"}`} style={{ minWidth: "1ch", textAlign: "center" }}>
+                {dotVal}
+              </span>
+            );
+          })}
+        </div>
+      ) : (
+        <div className="flex justify-between -mt-0.5">
+          <span className="text-[11px] text-text-tertiary font-body">{minLabel || min}</span>
+          <span className="text-[11px] text-text-tertiary font-body">{maxLabel || max}</span>
+        </div>
+      )}
+      <ResponseNote show={showNote} note={note} onToggle={() => setShowNote(!showNote)} onChange={(n) => setResponse(id, { ...current!, note: n })} />
+      {showError && <p className="text-[11px] text-accent-red font-body mt-1">Please select a value.</p>}
+    </div>
+  );
+}

package/daemon/client/components/index.ts

@@ -0,0 +1,15 @@
+export { Section } from "./Section";
+export { Item, Task } from "./Task";
+export { CodeBlock } from "./CodeBlock";
+export { Callout } from "./Callout";
+export { Note } from "./Note";
+export { Table } from "./Table";
+export { Checklist } from "./Checklist";
+export { Priority } from "./Priority";
+export { FilePreview } from "./FilePreview";
+export { Mermaid } from "./Mermaid";
+export { Diff } from "./Diff";
+export { Choice, MultiChoice } from "./Choice";
+export { UserInput, RangeInput } from "./UserInput";
+export { ImageView } from "./Image";
+export { useFeedback } from "#canvas/runtime";