@agent-native/toolkit 0.6.0 → 0.8.0

package/src/context-ui/ContextMeter.tsx

@@ -0,0 +1,101 @@
+import type { ReactNode } from "react";
+
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../ui/tooltip.js";
+import { cn } from "../utils.js";
+import { formatContextTokens } from "./format.js";
+import type { ContextManifestViewData } from "./types.js";
+
+function ContextDonut({ pct, advisory }: { pct: number; advisory: boolean }) {
+  const radius = 7.5;
+  const circumference = 2 * Math.PI * radius;
+  const displayPct = Math.max(3, Math.min(100, pct));
+  const dashOffset = circumference - (displayPct / 100) * circumference;
+  return (
+    <span className="relative flex size-5 items-center justify-center">
+      <svg aria-hidden="true" viewBox="0 0 20 20" className="-rotate-90 size-5">
+        <circle
+          cx="10"
+          cy="10"
+          r={radius}
+          className="stroke-muted"
+          fill="none"
+          strokeWidth="3"
+        />
+        <circle
+          cx="10"
+          cy="10"
+          r={radius}
+          className={cn(advisory ? "stroke-amber-500" : "stroke-[#00B5FF]")}
+          fill="none"
+          strokeLinecap="round"
+          strokeWidth="3"
+          strokeDasharray={circumference}
+          strokeDashoffset={dashOffset}
+        />
+      </svg>
+      <span className="absolute size-2 rounded-full bg-background" />
+    </span>
+  );
+}
+
+export function ContextMeterView({
+  manifest,
+  contextWindow,
+  open,
+  onOpenChange,
+  children,
+}: {
+  manifest: ContextManifestViewData;
+  contextWindow: number;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: ReactNode;
+}) {
+  const pct = Math.min(
+    100,
+    Math.round((manifest.totalTokens / contextWindow) * 100),
+  );
+  const { conversationTokens, systemTokens } = manifest;
+  return (
+    <TooltipProvider delayDuration={200}>
+      <Popover open={open} onOpenChange={onOpenChange}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <PopoverTrigger asChild>
+              <button
+                type="button"
+                aria-label={`Context ${pct}%, ${formatContextTokens(manifest.totalTokens)}${systemTokens > 0 ? ` total: ${formatContextTokens(systemTokens)} system + ${formatContextTokens(conversationTokens)} conversation` : ""}. Open Context X-Ray.`}
+                className={cn(
+                  "flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                  open && "bg-accent/60 text-foreground",
+                )}
+              >
+                <ContextDonut pct={pct} advisory={!manifest.enforceable} />
+              </button>
+            </PopoverTrigger>
+          </TooltipTrigger>
+          <TooltipContent>
+            Context {pct}% · {formatContextTokens(manifest.totalTokens)}
+            {systemTokens > 0
+              ? ` (${formatContextTokens(systemTokens)} system + ${formatContextTokens(conversationTokens)} conversation)`
+              : ""}
+          </TooltipContent>
+        </Tooltip>
+        <PopoverContent
+          align="end"
+          side="top"
+          sideOffset={8}
+          className="w-[min(92vw,380px)] overflow-hidden border-border/70 p-0"
+        >
+          {children}
+        </PopoverContent>
+      </Popover>
+    </TooltipProvider>
+  );
+}

package/src/context-ui/ContextSegmentRow.tsx

@@ -0,0 +1,184 @@
+import { IconLock, IconPin, IconRotate2, IconX } from "@tabler/icons-react";
+import type { ReactNode } from "react";
+
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
+import { cn } from "../utils.js";
+import { contextStatusLabel, formatContextTokens } from "./format.js";
+import type { ContextSegmentViewData } from "./types.js";
+
+export function SegmentProvenancePopoverView({
+  segment,
+  children,
+}: {
+  segment: ContextSegmentViewData;
+  children: ReactNode;
+}) {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>{children}</PopoverTrigger>
+      <PopoverContent align="start" className="w-80 p-3">
+        <div className="space-y-2">
+          <div>
+            <div className="text-[11px] font-medium uppercase text-muted-foreground">
+              Segment
+            </div>
+            <div className="mt-0.5 break-words text-xs text-foreground">
+              {segment.label}
+            </div>
+          </div>
+          <div className="grid grid-cols-2 gap-2 text-[11px] text-muted-foreground">
+            <div>
+              <span className="block font-medium text-foreground">
+                {formatContextTokens(segment.tokenCount)}
+              </span>
+              tokens{segment.tokenMethod === "estimate" ? " estimated" : ""}
+            </div>
+            <div>
+              <span className="block font-medium text-foreground">
+                {contextStatusLabel(segment)}
+              </span>
+              current status
+            </div>
+            <div>
+              <span className="block font-medium text-foreground">
+                {segment.msgIndex ?? "-"}
+              </span>
+              message index
+            </div>
+            <div>
+              <span className="block font-medium text-foreground">
+                {segment.partIndex ?? "-"}
+              </span>
+              part index
+            </div>
+          </div>
+          {segment.protected ? (
+            <div className="rounded-md border border-border bg-muted/40 px-2 py-1.5 text-[11px] text-muted-foreground">
+              This segment is part of the active turn and cannot be evicted yet.
+            </div>
+          ) : null}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export function ContextSegmentRowView({
+  segment,
+  advisory,
+  onPin,
+  onEvict,
+  onRestore,
+}: {
+  segment: ContextSegmentViewData;
+  advisory: boolean;
+  onPin: () => void;
+  onEvict: () => void;
+  onRestore: () => void;
+}) {
+  const disabled = segment.protected || segment.status === "evicted";
+  return (
+    <div
+      tabIndex={0}
+      onKeyDown={(event) => {
+        if (event.key === "p") onPin();
+        if (event.key === "e" && !disabled) onEvict();
+        if (event.key === "u" && segment.status !== "active") onRestore();
+      }}
+      className={cn(
+        "group flex min-h-11 items-center gap-2 rounded-sm px-2 py-1.5 outline-none transition-colors hover:bg-accent/35 focus-visible:bg-accent/35 focus-visible:ring-1 focus-visible:ring-ring",
+        segment.status === "evicted" && "opacity-60",
+      )}
+    >
+      <SegmentProvenancePopoverView segment={segment}>
+        <button
+          type="button"
+          className="min-w-0 flex-1 text-left"
+          aria-label={`Inspect ${segment.label}`}
+        >
+          <div
+            className={cn(
+              "truncate text-[13px] font-medium leading-5 text-foreground",
+              segment.status === "evicted" && "line-through",
+            )}
+          >
+            {segment.label}
+          </div>
+          <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground">
+            <span>{formatContextTokens(segment.tokenCount)}</span>
+            {segment.tokenMethod === "estimate" ? <span>~</span> : null}
+            <span>·</span>
+            <span>{contextStatusLabel(segment)}</span>
+            {advisory ? <span>· advisory</span> : null}
+          </div>
+        </button>
+      </SegmentProvenancePopoverView>
+      <div className="flex shrink-0 items-center gap-1 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100">
+        {segment.protected ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="flex size-6 items-center justify-center rounded-md text-muted-foreground">
+                <IconLock className="h-3.5 w-3.5" />
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>Protected during active turn</TooltipContent>
+          </Tooltip>
+        ) : segment.status === "evicted" ||
+          segment.status === "summarized" ||
+          segment.status === "pinned" ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                onClick={onRestore}
+                className="flex size-6 items-center justify-center rounded-md text-muted-foreground hover:bg-background hover:text-foreground"
+                aria-label={
+                  segment.status === "pinned"
+                    ? "Unpin segment"
+                    : "Restore segment"
+                }
+              >
+                <IconRotate2 className="h-3.5 w-3.5" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>
+              {segment.status === "pinned" ? "Unpin" : "Restore"}
+            </TooltipContent>
+          </Tooltip>
+        ) : (
+          <>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={onPin}
+                  className="flex size-6 items-center justify-center rounded-md text-muted-foreground hover:bg-background hover:text-foreground"
+                  aria-label="Pin segment"
+                >
+                  <IconPin className="h-3.5 w-3.5" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>Pin</TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={onEvict}
+                  className="flex size-6 items-center justify-center rounded-md text-muted-foreground hover:bg-background hover:text-destructive"
+                  aria-label="Evict segment"
+                >
+                  <IconX className="h-3.5 w-3.5" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>
+                {advisory ? "Record eviction intent" : "Evict"}
+              </TooltipContent>
+            </Tooltip>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/context-ui/ContextTreemap.tsx

@@ -0,0 +1,125 @@
+import { useEffect, useRef, useState } from "react";
+import { Treemap } from "recharts";
+
+import { contextGroupFill, formatContextTokens } from "./format.js";
+import type {
+  ContextSegmentViewData,
+  ContextSystemSectionViewData,
+} from "./types.js";
+
+interface TreemapDatum {
+  name: string;
+  size: number;
+  group: string;
+  segmentId: string;
+}
+
+function TreemapContent(props: any) {
+  const { x, y, width, height, name, group, size } = props;
+  if (width < 8 || height < 8) return null;
+  const showLabel = width > 90 && height > 42;
+  return (
+    <g>
+      <rect
+        x={x}
+        y={y}
+        width={width}
+        height={height}
+        rx={3}
+        ry={3}
+        fill={contextGroupFill(group)}
+        stroke="var(--background)"
+        strokeWidth={2}
+      />
+      {showLabel ? (
+        <foreignObject
+          x={x + 6}
+          y={y + 6}
+          width={width - 12}
+          height={height - 12}
+        >
+          <div className="flex h-full flex-col justify-between overflow-hidden text-[11px] leading-tight text-white">
+            <div className="truncate font-medium">{name}</div>
+            <div className="text-white/85">{formatContextTokens(size)}</div>
+          </div>
+        </foreignObject>
+      ) : null}
+    </g>
+  );
+}
+
+export function ContextTreemapView({
+  segments,
+  systemSections = [],
+  onSelect,
+}: {
+  segments: ContextSegmentViewData[];
+  systemSections?: ContextSystemSectionViewData[];
+  onSelect?: (segmentId: string) => void;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [chartWidth, setChartWidth] = useState(0);
+  const data: TreemapDatum[] = segments
+    .filter((segment) => segment.status !== "evicted" && segment.tokenCount > 0)
+    .map((segment) => ({
+      name: segment.label,
+      size: segment.tokenCount,
+      group: segment.group,
+      segmentId: segment.segmentId,
+    }));
+  data.push(
+    ...systemSections
+      .filter((section) => section.tokenCount > 0)
+      .map((section) => ({
+        name: section.label,
+        size: section.tokenCount,
+        group: `System · ${section.governance}`,
+        segmentId: section.segmentId,
+      })),
+  );
+
+  useEffect(() => {
+    const element = containerRef.current;
+    if (!element) return;
+    const updateWidth = () =>
+      setChartWidth(Math.max(0, Math.floor(element.clientWidth - 8)));
+    updateWidth();
+    const observer =
+      typeof ResizeObserver !== "undefined"
+        ? new ResizeObserver(updateWidth)
+        : null;
+    observer?.observe(element);
+    window.addEventListener("resize", updateWidth);
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener("resize", updateWidth);
+    };
+  }, []);
+
+  if (data.length === 0) {
+    return (
+      <div className="flex h-52 items-center justify-center rounded-md bg-muted/30 text-xs text-muted-foreground">
+        No active segments
+      </div>
+    );
+  }
+  return (
+    <div ref={containerRef} className="h-56 min-w-0 rounded-md bg-muted/25 p-1">
+      {chartWidth > 0 ? (
+        <Treemap
+          width={chartWidth}
+          height={216}
+          data={data as any}
+          dataKey="size"
+          nameKey="name"
+          aspectRatio={4 / 3}
+          isAnimationActive={false}
+          content={<TreemapContent />}
+          onClick={(datum: any) => {
+            if (datum?.segmentId) onSelect?.(datum.segmentId);
+          }}
+        />
+      ) : null}
+    </div>
+  );
+}