@agent-native/toolkit 0.0.0-beta-20260819143124

package/src/chat-history.css

@@ -0,0 +1,469 @@
+/*
+ * 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-width: 0;
+  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;
+  min-width: 0;
+  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-rail .an-chat-history__state:empty {
+  display: none;
+}
+
+.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-rail__collapse {
+  display: flow-root;
+  height: auto;
+  overflow: hidden;
+  overflow: clip;
+  opacity: 1;
+  clip-path: inset(0);
+  interpolate-size: allow-keywords;
+  transition:
+    height 200ms var(--ease-collapse),
+    opacity 150ms ease,
+    clip-path 200ms var(--ease-collapse);
+}
+
+.an-chat-history-rail__collapse[data-state="closed"] {
+  height: 0;
+  opacity: 0;
+  clip-path: inset(0 0 100% 0);
+  pointer-events: none;
+}
+
+@starting-style {
+  .an-chat-history-rail__collapse[data-state="open"] {
+    height: 0;
+    opacity: 0;
+    clip-path: inset(0 0 100% 0);
+  }
+}
+
+@supports not (interpolate-size: allow-keywords) {
+  .an-chat-history-rail__collapse {
+    height: auto;
+    max-height: 64rem;
+    transition:
+      max-height 200ms var(--ease-collapse),
+      opacity 150ms ease,
+      clip-path 200ms var(--ease-collapse);
+  }
+
+  .an-chat-history-rail__collapse[data-state="closed"] {
+    max-height: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .an-chat-history-rail__collapse {
+    transition: opacity 150ms ease;
+  }
+}
+
+.an-chat-history-rail__footer {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+  padding: 1px 4px 0;
+}
+
+.an-chat-history-rail__disclosure,
+.an-chat-history-rail__new-chat {
+  display: flex;
+  align-items: center;
+  border: 0;
+  border-radius: calc(var(--radius) - 2px);
+  background: transparent;
+  color: hsl(var(--muted-foreground) / 0.72);
+  cursor: pointer;
+}
+
+.an-chat-history-rail__disclosure:hover,
+.an-chat-history-rail__new-chat:hover {
+  background: hsl(var(--accent) / 0.5);
+  color: hsl(var(--accent-foreground));
+}
+
+.an-chat-history-rail__disclosure:focus-visible,
+.an-chat-history-rail__new-chat:focus-visible {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: -2px;
+}
+
+.an-chat-history-rail__disclosure {
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 30px;
+  height: auto;
+  min-height: 30px;
+}
+
+.an-chat-history-rail__new-chat {
+  justify-content: flex-start;
+  flex: 1 1 auto;
+  gap: 8px;
+  height: auto;
+  min-width: 0;
+  min-height: 30px;
+  padding: 6px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  text-align: start;
+}
+
+.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;
+  min-width: 0;
+}
+
+/* ── Row ──────────────────────────────────────────────────────────────── */
+
+.an-chat-history-row {
+  position: relative;
+  min-width: 0;
+}
+
+.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%;
+  min-width: 0;
+  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;
+  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;
+  overflow: hidden;
+}
+
+.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(--muted-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(--muted-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);
+  transition: opacity 100ms ease;
+}
+
+.an-chat-history--rail
+  .an-chat-history-row--active
+  .an-chat-history-row__timestamp {
+  color: hsl(var(--accent-foreground));
+}
+
+/* Hide trailing metadata while the absolute menu takes its place so hover
+   never changes the title's available width or moves the rest of the rail. */
+.an-chat-history--rail
+  .an-chat-history-row--has-menu:hover
+  .an-chat-history-row__timestamp,
+.an-chat-history--rail
+  .an-chat-history-row--has-menu:focus-within
+  .an-chat-history-row__timestamp,
+.an-chat-history--rail
+  .an-chat-history-row--has-menu.an-chat-history-row--menu-open
+  .an-chat-history-row__timestamp,
+.an-chat-history--rail
+  .an-chat-history-row--has-menu.an-chat-history-row--pinned
+  .an-chat-history-row__timestamp {
+  opacity: 0;
+}
+
+.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;
+  z-index: 1;
+}
+
+.an-chat-history--rail .an-chat-history-row__menu {
+  /* Keep the visible icon aligned with the trailing timestamp column while
+     preserving the full 24px action hit target. */
+  inset-inline-end: 3px;
+}
+
+.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--rail .an-chat-history-row__menu-trigger {
+  pointer-events: none;
+}
+
+.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--rail
+  .an-chat-history-row:hover
+  .an-chat-history-row__menu-trigger,
+.an-chat-history--rail
+  .an-chat-history-row:focus-within
+  .an-chat-history-row__menu-trigger,
+.an-chat-history--rail .an-chat-history-row__menu-trigger[aria-expanded="true"],
+.an-chat-history--rail .an-chat-history-row__menu-trigger--pinned {
+  pointer-events: auto;
+}
+
+.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 {
+  z-index: 290;
+  min-width: 160px;
+  padding: 4px;
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius);
+  background: hsl(var(--popover));
+  color: hsl(var(--popover-foreground));
+  --agent-shadow: 0 0% 0%;
+  --agent-shadow-o: 0.14;
+  box-shadow: 0 10px 30px hsl(var(--agent-shadow) / var(--agent-shadow-o));
+}
+
+.dark .an-chat-history-row__menu-content {
+  --agent-shadow-o: 0.08;
+}
+
+.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>
+  );
+}