@agent-native/toolkit 0.5.1 → 0.7.0

package/src/chat-history.css

@@ -0,0 +1,314 @@
+/*
+ * Shared chat history list — used by Core's `HistoryPopover`
+ * (MultiTabAssistantChat.tsx) and by Agent-Native Code's run rail
+ * (code-agents-ui CodeAgentsApp.tsx). Stable, prefixed class names (not
+ * Tailwind utilities) so the same visual language works in both a Tailwind
+ * host (core/templates) and a plain-CSS host (code-agents-ui), matching the
+ * approach used by agent-conversation.css. All colors resolve through the
+ * shared `hsl(var(--token))` variables so light/dark both work in either
+ * host's theme.
+ *
+ * Two density variants:
+ *   .an-chat-history           default — compact popover list (core)
+ *   .an-chat-history--rail     denser rail list with solid active state
+ */
+
+.an-chat-history {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.an-chat-history__search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid hsl(var(--border));
+  color: hsl(var(--muted-foreground));
+  flex-shrink: 0;
+}
+
+.an-chat-history__search-icon {
+  flex-shrink: 0;
+}
+
+.an-chat-history__search-input {
+  flex: 1;
+  min-width: 0;
+  background: transparent;
+  border: 0;
+  outline: none;
+  font-size: 12px;
+  color: hsl(var(--foreground));
+}
+
+.an-chat-history__search-input::placeholder {
+  color: hsl(var(--muted-foreground));
+}
+
+.an-chat-history__list {
+  overflow-y: auto;
+  padding: 4px 0;
+  max-height: 16rem;
+}
+
+.an-chat-history--rail .an-chat-history__list {
+  max-height: none;
+  flex: 1;
+  min-height: 0;
+}
+
+.an-chat-history__state {
+  padding: 16px 12px;
+  text-align: center;
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.an-chat-history__state--error {
+  /* Matches the amber-500 warning tone historically used for the
+     HistoryPopover load-error state (Tailwind's `text-amber-500`). */
+  color: hsl(38 92% 50%);
+}
+
+.an-chat-history__section-label {
+  padding: 6px 12px 4px;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: hsl(var(--muted-foreground) / 0.7);
+}
+
+.an-chat-history--rail .an-chat-history__section {
+  display: grid;
+  gap: 1px;
+}
+
+/* ── Row ──────────────────────────────────────────────────────────────── */
+
+.an-chat-history-row {
+  position: relative;
+}
+
+.an-chat-history--rail .an-chat-history-row {
+  border-radius: calc(var(--radius) - 2px);
+  margin: 0 4px;
+}
+
+.an-chat-history-row__button {
+  display: block;
+  width: 100%;
+  padding: 8px 12px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+.an-chat-history-row--disabled .an-chat-history-row__button {
+  cursor: default;
+  opacity: 0.6;
+}
+
+.an-chat-history-row:hover .an-chat-history-row__button {
+  background: hsl(var(--accent) / 0.5);
+}
+
+.an-chat-history-row--active .an-chat-history-row__button {
+  background: hsl(var(--accent) / 0.3);
+}
+
+.an-chat-history--rail .an-chat-history-row__button {
+  min-height: 32px;
+  padding-block: 6px;
+  padding-inline: 10px 36px;
+  border-radius: inherit;
+  color: hsl(var(--muted-foreground));
+}
+
+.an-chat-history--rail
+  .an-chat-history-row--active
+  .an-chat-history-row__button {
+  background: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
+}
+
+.an-chat-history-row__topline {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+}
+
+.an-chat-history-row__title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 500;
+  color: hsl(var(--foreground));
+}
+
+.an-chat-history-row--active .an-chat-history-row__title {
+  color: hsl(var(--foreground));
+}
+
+.an-chat-history--rail
+  .an-chat-history-row--active
+  .an-chat-history-row__title {
+  color: hsl(var(--accent-foreground));
+}
+
+.an-chat-history--rail
+  .an-chat-history-row--pinned:not(.an-chat-history-row--active)
+  .an-chat-history-row__title {
+  color: hsl(var(--foreground));
+}
+
+.an-chat-history-row__timestamp {
+  flex-shrink: 0;
+  font-size: 10px;
+  color: hsl(var(--muted-foreground));
+}
+
+.an-chat-history--rail .an-chat-history-row__timestamp {
+  font-size: 11px;
+  color: hsl(var(--muted-foreground) / 0.62);
+}
+
+.an-chat-history--rail
+  .an-chat-history-row--active
+  .an-chat-history-row__timestamp {
+  color: hsl(var(--accent-foreground));
+}
+
+.an-chat-history-row__subtitle {
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  color: hsl(var(--muted-foreground));
+}
+
+.an-chat-history-row__detail {
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 10px;
+  color: hsl(var(--muted-foreground) / 0.7);
+}
+
+/* ── Inline rename ────────────────────────────────────────────────────── */
+
+.an-chat-history-row__rename {
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
+}
+
+.an-chat-history-row__rename-input {
+  width: 100%;
+  min-width: 0;
+  padding: 2px 6px;
+  border: 1px solid hsl(var(--ring));
+  border-radius: calc(var(--radius) - 3px);
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.4;
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.25);
+}
+
+.an-chat-history-row__rename-input:focus {
+  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.35);
+}
+
+/* ── Row action menu ──────────────────────────────────────────────────── */
+
+.an-chat-history-row__menu {
+  position: absolute;
+  top: 4px;
+  inset-inline-end: 4px;
+}
+
+.an-chat-history-row__menu-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: 0;
+  border-radius: calc(var(--radius) - 3px);
+  background: transparent;
+  color: hsl(var(--muted-foreground) / 0.72);
+  opacity: 0;
+  cursor: pointer;
+  transition:
+    background 100ms ease,
+    color 100ms ease,
+    opacity 100ms ease;
+}
+
+.an-chat-history-row:hover .an-chat-history-row__menu-trigger,
+.an-chat-history-row:focus-within .an-chat-history-row__menu-trigger,
+.an-chat-history-row__menu-trigger[aria-expanded="true"],
+.an-chat-history-row__menu-trigger--pinned {
+  opacity: 1;
+}
+
+.an-chat-history-row__menu-trigger:hover,
+.an-chat-history-row__menu-trigger[aria-expanded="true"] {
+  background: hsl(var(--accent));
+  color: hsl(var(--foreground));
+}
+
+.an-chat-history-row__menu-content {
+  position: absolute;
+  top: calc(100% + 4px);
+  inset-inline-end: 0;
+  z-index: 30;
+  min-width: 160px;
+  padding: 4px;
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius);
+  background: hsl(var(--popover));
+  color: hsl(var(--popover-foreground));
+  box-shadow: 0 10px 30px hsl(var(--background) / 0.28);
+}
+
+.an-chat-history-row__menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 8px;
+  border: 0;
+  border-radius: calc(var(--radius) - 4px);
+  background: transparent;
+  color: inherit;
+  font-size: 12px;
+  text-align: start;
+  cursor: pointer;
+}
+
+.an-chat-history-row__menu-item:hover {
+  background: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
+}
+
+.an-chat-history-row__menu-item--danger {
+  color: hsl(var(--destructive));
+}
+
+.an-chat-history-row__menu-item--danger:hover {
+  background: hsl(var(--destructive) / 0.12);
+  color: hsl(var(--destructive));
+}

package/src/collab-ui/AgentPresenceChip.tsx

@@ -0,0 +1,69 @@
+export interface AgentPresenceChipProps {
+  /** Whether the agent is actively editing this element. */
+  active: boolean;
+  /** Label text. Default: "AI editing" */
+  label?: string;
+  /** Color. Default: "#00B5FF" */
+  color?: string;
+  /** Additional CSS classes. */
+  className?: string;
+}
+
+const pulseKeyframes = `
+@keyframes _anChipPulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}
+`;
+
+let styleInjected = false;
+
+function injectStyles() {
+  if (styleInjected || typeof document === "undefined") return;
+  const style = document.createElement("style");
+  style.textContent = pulseKeyframes;
+  document.head.appendChild(style);
+  styleInjected = true;
+}
+
+export function AgentPresenceChip({
+  active,
+  label = "AI editing",
+  color = "#00B5FF",
+  className,
+}: AgentPresenceChipProps) {
+  if (!active) return null;
+
+  injectStyles();
+
+  return (
+    <span
+      className={className}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 4,
+        height: 20,
+        padding: "0 8px",
+        borderRadius: 9999,
+        backgroundColor: `${color}20`,
+        color,
+        fontSize: 11,
+        fontWeight: 600,
+        whiteSpace: "nowrap",
+      }}
+    >
+      <span
+        style={{
+          width: 6,
+          height: 6,
+          borderRadius: "50%",
+          backgroundColor: color,
+          animation: "_anChipPulse 2s infinite",
+          flexShrink: 0,
+        }}
+      />
+      {label}
+    </span>
+  );
+}

package/src/collab-ui/LiveCursorOverlay.tsx

@@ -0,0 +1,241 @@
+/**
+ * LiveCursorOverlay — renders remote users' cursors over an absolutely-
+ * positioned container.
+ *
+ * Cursor positions are expected as normalized coordinates (0–1 relative to
+ * the container's content size) so different zoom/scroll positions map
+ * correctly. Pass a `mapCoords` prop to handle non-identity transforms
+ * (e.g. a zoomed canvas).
+ *
+ * The agent uses the same pointer shape with an "AI" label.
+ *
+ * Cursors fade out after 10 seconds of no movement.
+ */
+
+import { useState, useEffect, useRef, memo, type RefObject } from "react";
+
+import type { OtherPresence, NormalizedPoint } from "./types.js";
+
+export interface CursorMapFn {
+  /** Convert normalized coords to pixel offsets within the overlay container. */
+  (norm: NormalizedPoint): { x: number; y: number };
+}
+
+export interface LiveCursorOverlayProps {
+  /** Remote participants with presence payload. */
+  others: OtherPresence[];
+  /**
+   * Key inside presence payload that carries the cursor position.
+   * Default: "cursor"
+   * Expected shape: { x: number; y: number } (normalized 0–1).
+   */
+  cursorKey?: string;
+  /**
+   * Override coordinate mapping. Default: scale by container clientWidth/Height.
+   * Pass this when the container uses transform: scale() or has virtual scroll.
+   */
+  mapCoords?: CursorMapFn;
+  /**
+   * Container element ref. Required when mapCoords is not provided —
+   * used to compute pixel positions from normalized coords.
+   */
+  containerRef?: RefObject<HTMLElement | null>;
+  /** Additional CSS class for the overlay div. */
+  className?: string;
+}
+
+const STALE_MS = 10_000; // Fade out cursors older than 10s
+
+function CursorPointer({ color }: { color: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="25"
+      height="29"
+      viewBox="0 0 25 29"
+      fill="none"
+      aria-hidden
+      style={{
+        display: "block",
+        filter: "drop-shadow(0 2px 3px rgba(15, 23, 42, 0.3))",
+      }}
+    >
+      <path
+        d="M2.5 2.5L21.5 11L12.6 14.1L8.3 24.5L2.5 2.5Z"
+        fill={color}
+        stroke="white"
+        strokeLinejoin="round"
+        strokeWidth="3"
+      />
+    </svg>
+  );
+}
+
+interface CursorEntry {
+  other: OtherPresence;
+  x: number;
+  y: number;
+  lastSeen: number;
+}
+
+const CursorLabel = memo(function CursorLabel({
+  entry,
+}: {
+  entry: CursorEntry;
+}) {
+  const { other, x, y } = entry;
+  const color = other.user.color || "#94a3b8";
+  const label = other.isAgent ? "AI" : other.user.name || other.user.email;
+
+  return (
+    <div
+      aria-label={`${label} cursor`}
+      style={{
+        position: "absolute",
+        left: 0,
+        top: 0,
+        pointerEvents: "none",
+        userSelect: "none",
+        transform: `translate3d(${x - 2}px, ${y - 2}px, 0)`,
+        zIndex: 9999,
+        transition: "transform 80ms linear",
+        willChange: "transform",
+        width: 0,
+        height: 0,
+      }}
+    >
+      <CursorPointer color={color} />
+      <div
+        style={{
+          position: "absolute",
+          left: 31,
+          top: 31,
+          display: "flex",
+          alignItems: "center",
+          gap: 5,
+          backgroundColor: color,
+          color: "#fff",
+          fontSize: 12,
+          fontWeight: 500,
+          lineHeight: "16px",
+          padding: "2px 7px",
+          borderRadius: 2,
+          whiteSpace: "nowrap",
+          boxShadow: "0 5px 12px rgba(15, 23, 42, 0.16)",
+          maxWidth: 150,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+        }}
+      >
+        {(other.user as { avatarUrl?: string }).avatarUrl ? (
+          <img
+            src={(other.user as { avatarUrl?: string }).avatarUrl}
+            alt=""
+            style={{
+              width: 14,
+              height: 14,
+              borderRadius: "50%",
+              flexShrink: 0,
+            }}
+          />
+        ) : null}
+        {label}
+      </div>
+    </div>
+  );
+});
+
+export function LiveCursorOverlay({
+  others,
+  cursorKey = "cursor",
+  mapCoords,
+  containerRef,
+  className,
+}: LiveCursorOverlayProps) {
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const [, tick] = useState(0); // Force re-render to prune stale cursors
+  const entriesRef = useRef<Map<number, CursorEntry>>(new Map());
+
+  // Tick every 5s to prune stale cursors (no re-render storm).
+  useEffect(() => {
+    const id = setInterval(() => tick((n) => n + 1), 5_000);
+    return () => clearInterval(id);
+  }, []);
+
+  // Build entries from others, computing pixel positions.
+  const now = Date.now();
+  const visible: CursorEntry[] = [];
+
+  for (const other of others) {
+    const pos = other.presence[cursorKey] as NormalizedPoint | undefined;
+    if (!pos || typeof pos.x !== "number" || typeof pos.y !== "number")
+      continue;
+
+    // Compute pixel position.
+    let px: number;
+    let py: number;
+    if (mapCoords) {
+      const mapped = mapCoords(pos);
+      px = mapped.x;
+      py = mapped.y;
+    } else {
+      const container =
+        containerRef?.current ?? overlayRef.current?.parentElement;
+      const w = container ? container.clientWidth : 0;
+      const h = container ? container.clientHeight : 0;
+      px = pos.x * w;
+      py = pos.y * h;
+    }
+
+    const prev = entriesRef.current.get(other.clientId);
+    const lastSeen =
+      prev && prev.x === px && prev.y === py ? prev.lastSeen : now;
+    const entry: CursorEntry = { other, x: px, y: py, lastSeen };
+    entriesRef.current.set(other.clientId, entry);
+
+    if (now - lastSeen < STALE_MS) {
+      visible.push(entry);
+    }
+  }
+
+  // Remove entries for participants who left.
+  for (const clientId of entriesRef.current.keys()) {
+    if (!others.find((o) => o.clientId === clientId)) {
+      entriesRef.current.delete(clientId);
+    }
+  }
+
+  if (visible.length === 0) {
+    return (
+      <div
+        ref={overlayRef}
+        aria-hidden
+        style={{
+          position: "absolute",
+          inset: 0,
+          pointerEvents: "none",
+          overflow: "hidden",
+        }}
+        className={className}
+      />
+    );
+  }
+
+  return (
+    <div
+      ref={overlayRef}
+      aria-hidden
+      style={{
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        overflow: "hidden",
+      }}
+      className={className}
+    >
+      {visible.map((entry) => (
+        <CursorLabel key={entry.other.clientId} entry={entry} />
+      ))}
+    </div>
+  );
+}