@cntyclub/ui-react 0.14.0 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntyclub/ui-react",
-  "version": "0.14.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/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";