@cntyclub/ui-react 0.13.0 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntyclub/ui-react",
-  "version": "0.13.0",
+  "version": "0.15.0",
   "description": "React component library for the Country Club UI Kit — Base UI primitives styled with the Country Club design system (Tailwind CSS v4)",
   "type": "module",
   "sideEffects": [

package/src/components/ui/avatar-group.tsx

@@ -5,6 +5,12 @@ import type * as React from "react";
 
 import { cn } from "../../lib/utils/css";
 import { Avatar, avatarVariants } from "./avatar";
+import {
+  Tooltip,
+  TooltipPopup,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./tooltip";
 
 type AvatarSize = NonNullable<VariantProps<typeof avatarVariants>["size"]>;
 
@@ -29,6 +35,11 @@ interface AvatarGroupItem {
   /** Initials shown when there is no image. */
   initials?: React.ReactNode;
   alt?: string;
+  /**
+   * Label revealed on hover when `showNameOnHover` is set (e.g. the person's
+   * name). Falls back to `alt` when omitted.
+   */
+  name?: React.ReactNode;
 }
 
 interface AvatarGroupProps
@@ -39,11 +50,19 @@ interface AvatarGroupProps
   /** Cap the visible avatars; the rest collapse into a "+N" chip. */
   max?: number;
   size?: AvatarSize;
+  /**
+   * Reveal each avatar's `name` (or `alt`) in a tooltip above it on hover /
+   * focus. Only applies to the data-driven `items` path.
+   */
+  showNameOnHover?: boolean;
 }
 
 /**
  * A row of overlapping avatars with an overflow "+N" chip. Pass `items` for the
  * data-driven path, or compose `<Avatar>` children directly for full control.
+ *
+ * With `showNameOnHover`, hovering (or focusing) an avatar reveals its `name`
+ * in a tooltip — e.g. hovering Amir's photo shows "Amir".
  */
 function AvatarGroup({
   className,
@@ -51,13 +70,14 @@ function AvatarGroup({
   max,
   size = "sm",
   overlap,
+  showNameOnHover = false,
   children,
   ...props
 }: AvatarGroupProps) {
   const shown = items && max ? items.slice(0, max) : items;
   const overflow = items && max ? items.length - max : 0;
 
-  return (
+  const group = (
     <div
       className={cn(avatarGroupVariants({ overlap }), className)}
       data-slot="avatar-group"
@@ -65,16 +85,36 @@ function AvatarGroup({
       {...props}
     >
       {items
-        ? shown?.map((item, i) => (
-            <Avatar
-              alt={item.alt}
+        ? shown?.map((item, i) => {
+            const label = item.name ?? item.alt;
+            const avatar = (
+              <Avatar
+                alt={item.alt}
+                initials={item.initials}
+                size={size}
+                src={item.src}
+              />
+            );
+            if (!(showNameOnHover && label)) {
               // biome-ignore lint/suspicious/noArrayIndexKey: order is stable
-              key={i}
-              initials={item.initials}
-              size={size}
-              src={item.src}
-            />
-          ))
+              return <Avatar alt={item.alt} initials={item.initials} key={i} size={size} src={item.src} />;
+            }
+            return (
+              // The span wrapper is the group's direct child, so it carries the
+              // ring/overlap styling; the tooltip anchors to it (Base UI needs a
+              // ref-able host, which the Avatar fn component doesn't forward).
+              // biome-ignore lint/suspicious/noArrayIndexKey: order is stable
+              <Tooltip key={i}>
+                <TooltipTrigger
+                  className="inline-flex cursor-default"
+                  render={<span />}
+                >
+                  {avatar}
+                </TooltipTrigger>
+                <TooltipPopup>{label}</TooltipPopup>
+              </Tooltip>
+            );
+          })
         : children}
       {overflow > 0 ? (
         <span
@@ -92,6 +132,19 @@ function AvatarGroup({
       ) : null}
     </div>
   );
+
+  // Self-contained: provide a tooltip context so the hover mode works without
+  // the consumer having to mount a TooltipProvider. A short delay keeps names
+  // from flickering as the pointer sweeps across the row.
+  if (showNameOnHover) {
+    return (
+      <TooltipProvider delay={150} closeDelay={0}>
+        {group}
+      </TooltipProvider>
+    );
+  }
+
+  return group;
 }
 
 export { AvatarGroup, avatarGroupVariants };

package/src/components/ui/chat-divider.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+type ChatDividerVariant = "default" | "summary" | "unread";
+
+interface ChatDividerProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Centered label, e.g. "New messages", "You're caught up", "Earlier messages summarized". */
+  label?: React.ReactNode;
+  /** Optional leading icon (e.g. a summary or sparkle glyph). */
+  icon?: React.ReactNode;
+  /**
+   * - `default`  — neutral hairline with a muted label.
+   * - `summary`  — marks where a rolling summary folds older history.
+   * - `unread`   — the "new messages" baseline; accented so it stands out.
+   */
+  variant?: ChatDividerVariant;
+}
+
+const LABEL_TONE: Record<ChatDividerVariant, string> = {
+  default: "text-muted-foreground",
+  summary: "text-muted-foreground",
+  unread: "text-primary",
+};
+
+const LINE_TONE: Record<ChatDividerVariant, string> = {
+  default: "bg-border",
+  summary: "bg-border",
+  unread: "bg-primary/40",
+};
+
+/**
+ * A centered, labeled divider for the message stream: the point a rolling summary
+ * folds history (`summary`), the unread baseline (`unread`), or a plain date/section
+ * break (`default`). Pairs with the backend `AgentSummaryCheckpoint` and each
+ * participant's `joined_seq`/`last_read_seq`.
+ */
+function ChatDivider({ label, icon, variant = "default", className, ...props }: ChatDividerProps) {
+  return (
+    <div
+      className={cn("flex w-full items-center gap-3 py-1 select-none", className)}
+      data-slot="chat-divider"
+      data-variant={variant}
+      role="separator"
+      {...props}
+    >
+      <span className={cn("h-px flex-1", LINE_TONE[variant])} />
+      {label != null ? (
+        <span
+          className={cn(
+            "inline-flex items-center gap-1.5 font-medium text-xs whitespace-nowrap",
+            LABEL_TONE[variant],
+          )}
+        >
+          {icon ? <span className="inline-flex shrink-0 items-center">{icon}</span> : null}
+          {label}
+        </span>
+      ) : null}
+      <span className={cn("h-px flex-1", LINE_TONE[variant])} />
+    </div>
+  );
+}
+
+export { ChatDivider };
+export type { ChatDividerProps, ChatDividerVariant };

package/src/components/ui/context-meter.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+type ContextMeterState = "ok" | "warn" | "summarizing" | "full";
+
+interface ContextMeterProps extends Omit<React.SVGProps<SVGSVGElement>, "children"> {
+  /** Tokens currently in context. Used with `budget` when `pct` is not given. */
+  used?: number;
+  /** The model's context budget in tokens. */
+  budget?: number;
+  /** Fill fraction 0..1. Takes precedence over `used`/`budget` when provided. */
+  pct?: number;
+  /** Visual state; derived from the thresholds below when omitted. */
+  state?: ContextMeterState;
+  /** Threshold fractions — mirror the backend `config.context` values. */
+  warnAt?: number;
+  summarizeAt?: number;
+  lockAt?: number;
+  /** Diameter in px. */
+  size?: number;
+  /** Ring thickness in px. */
+  strokeWidth?: number;
+  /** Render the rounded percentage in the ring's center. */
+  showLabel?: boolean;
+  className?: string;
+}
+
+const STATE_COLOR: Record<ContextMeterState, string> = {
+  ok: "text-muted-foreground",
+  warn: "text-amber-500",
+  summarizing: "text-sky-500",
+  full: "text-destructive",
+};
+
+function deriveState(
+  pct: number,
+  warnAt: number,
+  summarizeAt: number,
+  lockAt: number,
+): ContextMeterState {
+  if (pct >= lockAt) return "full";
+  if (pct >= summarizeAt) return "summarizing";
+  if (pct >= warnAt) return "warn";
+  return "ok";
+}
+
+/**
+ * A compact radial gauge for how full an agent conversation's context window is.
+ *
+ * Feed it the backend `context_meter` payload (`pct`/`state` + thresholds) or a
+ * raw `used`/`budget` pair. The ring colors shift as the conversation approaches
+ * the summarize (folds older messages) and lock (must start a new chat) points,
+ * mirroring Claude Code's context indicator. Theme-aware and accessible
+ * (`role="meter"`).
+ */
+function ContextMeter({
+  used,
+  budget,
+  pct,
+  state,
+  warnAt = 0.75,
+  summarizeAt = 0.85,
+  lockAt = 0.98,
+  size = 24,
+  strokeWidth = 2.5,
+  showLabel = false,
+  className,
+  ...props
+}: ContextMeterProps) {
+  const fraction = Math.max(
+    0,
+    Math.min(1, pct ?? (budget ? (used ?? 0) / budget : 0)),
+  );
+  const resolvedState = state ?? deriveState(fraction, warnAt, summarizeAt, lockAt);
+  const percent = Math.round(fraction * 100);
+
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const dash = circumference * fraction;
+  const center = size / 2;
+
+  return (
+    <span
+      className={cn("relative inline-flex items-center justify-center", STATE_COLOR[resolvedState])}
+      data-slot="context-meter"
+      data-state={resolvedState}
+      style={{ width: size, height: size }}
+    >
+      <svg
+        width={size}
+        height={size}
+        viewBox={`0 0 ${size} ${size}`}
+        role="meter"
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={percent}
+        aria-label={`Context ${percent}% used`}
+        className={cn("-rotate-90", className)}
+        {...props}
+      >
+        <circle
+          cx={center}
+          cy={center}
+          r={radius}
+          fill="none"
+          strokeWidth={strokeWidth}
+          className="stroke-muted"
+        />
+        <circle
+          cx={center}
+          cy={center}
+          r={radius}
+          fill="none"
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          stroke="currentColor"
+          strokeDasharray={`${dash} ${circumference}`}
+          className="transition-[stroke-dasharray] duration-500 ease-out"
+        />
+      </svg>
+      {showLabel ? (
+        <span className="absolute font-medium text-[0.5rem] text-foreground tabular-nums">
+          {percent}
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
+export { ContextMeter };
+export type { ContextMeterProps, ContextMeterState };

package/src/index.ts

@@ -24,12 +24,14 @@ export * from "./components/ui/card";
 export * from "./components/ui/carousel";
 export * from "./components/ui/chart";
 export * from "./components/ui/chat";
+export * from "./components/ui/chat-divider";
 export * from "./components/ui/checkbox";
 export * from "./components/ui/checkbox-group";
 export * from "./components/ui/collapsible";
 export * from "./components/ui/combobox";
 export * from "./components/ui/command";
 export * from "./components/ui/confetti";
+export * from "./components/ui/context-meter";
 export * from "./components/ui/credit-card";
 export * from "./components/ui/data-table-paged";
 export * from "./components/ui/drawer";