@agent-native/toolkit 0.14.2 → 0.15.0

package/src/context-ui/ContextMeter.spec.tsx

@@ -0,0 +1,73 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+
+import { ContextMeterView } from "./ContextMeter.js";
+import { fallbackContextTranslate } from "./types.js";
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+  container = document.createElement("div");
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+});
+
+const manifest = {
+  totalTokens: 300,
+  rawTokens: 300,
+  reclaimedTokens: 0,
+  tokenCountMethod: "exact" as const,
+  enforceable: true,
+  segments: [],
+  systemTokens: 100,
+  conversationTokens: 200,
+};
+
+describe("ContextMeterView localization", () => {
+  it("interpolates the providerless English fallback", () => {
+    expect(
+      fallbackContextTranslate("agentChat.contextMeter.summary", {
+        defaultValue: "Context {{percent}}% · {{totalTokens}}",
+        percent: 25,
+        totalTokens: "2.0k",
+      }),
+    ).toBe("Context 25% · 2.0k");
+  });
+
+  it("uses the supplied translator for its accessible label", () => {
+    const translate = (key: string, options: Record<string, unknown> = {}) => {
+      if (key === "agentChat.contextMeter.breakdown") return " AUFTEILUNG";
+      if (key === "agentChat.contextMeter.ariaLabel") {
+        return `Kontext ${options.percent}% ${options.totalTokens}${options.breakdown}`;
+      }
+      return String(options.defaultValue ?? key);
+    };
+
+    act(() => {
+      root.render(
+        <ContextMeterView
+          manifest={manifest}
+          contextWindow={1_200}
+          open={false}
+          onOpenChange={() => undefined}
+          translate={translate}
+        >
+          <div>Panel</div>
+        </ContextMeterView>,
+      );
+    });
+
+    expect(container.querySelector("button")?.getAttribute("aria-label")).toBe(
+      "Kontext 25% 300 AUFTEILUNG",
+    );
+  });
+});

package/src/context-ui/ContextMeter.tsx

@@ -9,7 +9,11 @@ import {
 } from "../ui/tooltip.js";
 import { cn } from "../utils.js";
 import { formatContextTokens } from "./format.js";
-import type { ContextManifestViewData } from "./types.js";
+import {
+  fallbackContextTranslate,
+  type ContextManifestViewData,
+  type ContextTranslate,
+} from "./types.js";
 
 function ContextDonut({ pct, advisory }: { pct: number; advisory: boolean }) {
   const radius = 7.5;
@@ -50,12 +54,14 @@ export function ContextMeterView({
   open,
   onOpenChange,
   children,
+  translate = fallbackContextTranslate,
 }: {
   manifest: ContextManifestViewData;
   contextWindow: number;
   open: boolean;
   onOpenChange: (open: boolean) => void;
   children: ReactNode;
+  translate?: ContextTranslate;
 }) {
   const pct = Math.min(
     100,
@@ -70,7 +76,22 @@ export function ContextMeterView({
             <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.`}
+                aria-label={translate("agentChat.contextMeter.ariaLabel", {
+                  defaultValue:
+                    "Context {{percent}}%, {{totalTokens}}{{breakdown}}. Open Context X-Ray.",
+                  percent: pct,
+                  totalTokens: formatContextTokens(manifest.totalTokens),
+                  breakdown:
+                    systemTokens > 0
+                      ? translate("agentChat.contextMeter.breakdown", {
+                          defaultValue:
+                            " total: {{systemTokens}} system + {{conversationTokens}} conversation",
+                          systemTokens: formatContextTokens(systemTokens),
+                          conversationTokens:
+                            formatContextTokens(conversationTokens),
+                        })
+                      : "",
+                })}
                 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",
@@ -81,9 +102,18 @@ export function ContextMeterView({
             </PopoverTrigger>
           </TooltipTrigger>
           <TooltipContent>
-            Context {pct}% · {formatContextTokens(manifest.totalTokens)}
+            {translate("agentChat.contextMeter.summary", {
+              defaultValue: "Context {{percent}}% · {{totalTokens}}",
+              percent: pct,
+              totalTokens: formatContextTokens(manifest.totalTokens),
+            })}
             {systemTokens > 0
-              ? ` (${formatContextTokens(systemTokens)} system + ${formatContextTokens(conversationTokens)} conversation)`
+              ? translate("agentChat.contextMeter.summaryBreakdown", {
+                  defaultValue:
+                    " ({{systemTokens}} system + {{conversationTokens}} conversation)",
+                  systemTokens: formatContextTokens(systemTokens),
+                  conversationTokens: formatContextTokens(conversationTokens),
+                })
               : ""}
           </TooltipContent>
         </Tooltip>

package/src/context-ui/ContextSegmentRow.tsx

@@ -4,15 +4,46 @@ 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";
+import { formatContextTokens } from "./format.js";
+import {
+  fallbackContextTranslate,
+  type ContextSegmentViewData,
+  type ContextTranslate,
+} from "./types.js";
+
+function statusLabel(
+  segment: ContextSegmentViewData,
+  translate: ContextTranslate,
+): string {
+  if (segment.protected)
+    return translate("agentChat.contextXray.status.protected", {
+      defaultValue: "Protected",
+    });
+  if (segment.status === "pinned")
+    return translate("agentChat.contextXray.status.pinned", {
+      defaultValue: "Pinned",
+    });
+  if (segment.status === "evicted")
+    return translate("agentChat.contextXray.status.evicted", {
+      defaultValue: "Evicted",
+    });
+  if (segment.status === "summarized")
+    return translate("agentChat.contextXray.status.summarized", {
+      defaultValue: "Summarized",
+    });
+  return translate("agentChat.contextXray.status.active", {
+    defaultValue: "Active",
+  });
+}
 
 export function SegmentProvenancePopoverView({
   segment,
   children,
+  translate = fallbackContextTranslate,
 }: {
   segment: ContextSegmentViewData;
   children: ReactNode;
+  translate?: ContextTranslate;
 }) {
   return (
     <Popover>
@@ -21,7 +52,9 @@ export function SegmentProvenancePopoverView({
         <div className="space-y-2">
           <div>
             <div className="text-[11px] font-medium uppercase text-muted-foreground">
-              Segment
+              {translate("agentChat.contextXray.segment", {
+                defaultValue: "Segment",
+              })}
             </div>
             <div className="mt-0.5 break-words text-xs text-foreground">
               {segment.label}
@@ -32,30 +65,46 @@ export function SegmentProvenancePopoverView({
               <span className="block font-medium text-foreground">
                 {formatContextTokens(segment.tokenCount)}
               </span>
-              tokens{segment.tokenMethod === "estimate" ? " estimated" : ""}
+              {translate("agentChat.contextXray.tokens", {
+                defaultValue: "tokens",
+              })}
+              {segment.tokenMethod === "estimate"
+                ? translate("agentChat.contextXray.estimatedPrefix", {
+                    defaultValue: " estimated",
+                  })
+                : ""}
             </div>
             <div>
               <span className="block font-medium text-foreground">
-                {contextStatusLabel(segment)}
+                {statusLabel(segment, translate)}
               </span>
-              current status
+              {translate("agentChat.contextXray.currentStatus", {
+                defaultValue: "current status",
+              })}
             </div>
             <div>
               <span className="block font-medium text-foreground">
                 {segment.msgIndex ?? "-"}
               </span>
-              message index
+              {translate("agentChat.contextXray.messageIndex", {
+                defaultValue: "message index",
+              })}
             </div>
             <div>
               <span className="block font-medium text-foreground">
                 {segment.partIndex ?? "-"}
               </span>
-              part index
+              {translate("agentChat.contextXray.partIndex", {
+                defaultValue: "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.
+              {translate("agentChat.contextXray.protectedDescription", {
+                defaultValue:
+                  "This segment is part of the active turn and cannot be evicted yet.",
+              })}
             </div>
           ) : null}
         </div>
@@ -70,12 +119,14 @@ export function ContextSegmentRowView({
   onPin,
   onEvict,
   onRestore,
+  translate = fallbackContextTranslate,
 }: {
   segment: ContextSegmentViewData;
   advisory: boolean;
   onPin: () => void;
   onEvict: () => void;
   onRestore: () => void;
+  translate?: ContextTranslate;
 }) {
   const disabled = segment.protected || segment.status === "evicted";
   return (
@@ -91,11 +142,14 @@ export function ContextSegmentRowView({
         segment.status === "evicted" && "opacity-60",
       )}
     >
-      <SegmentProvenancePopoverView segment={segment}>
+      <SegmentProvenancePopoverView segment={segment} translate={translate}>
         <button
           type="button"
-          className="min-w-0 flex-1 text-left"
-          aria-label={`Inspect ${segment.label}`}
+          className="min-w-0 flex-1 text-start"
+          aria-label={translate("agentChat.contextXray.inspect", {
+            defaultValue: "Inspect {{name}}",
+            name: segment.label,
+          })}
         >
           <div
             className={cn(
@@ -109,8 +163,15 @@ export function ContextSegmentRowView({
             <span>{formatContextTokens(segment.tokenCount)}</span>
             {segment.tokenMethod === "estimate" ? <span>~</span> : null}
             <span>·</span>
-            <span>{contextStatusLabel(segment)}</span>
-            {advisory ? <span>· advisory</span> : null}
+            <span>{statusLabel(segment, translate)}</span>
+            {advisory ? (
+              <span>
+                ·{" "}
+                {translate("agentChat.contextXray.advisory", {
+                  defaultValue: "advisory",
+                })}
+              </span>
+            ) : null}
           </div>
         </button>
       </SegmentProvenancePopoverView>
@@ -122,7 +183,11 @@ export function ContextSegmentRowView({
                 <IconLock className="h-3.5 w-3.5" />
               </span>
             </TooltipTrigger>
-            <TooltipContent>Protected during active turn</TooltipContent>
+            <TooltipContent>
+              {translate("agentChat.contextXray.protectedDuringTurn", {
+                defaultValue: "Protected during active turn",
+              })}
+            </TooltipContent>
           </Tooltip>
         ) : segment.status === "evicted" ||
           segment.status === "summarized" ||
@@ -135,15 +200,25 @@ export function ContextSegmentRowView({
                 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"
+                    ? translate("agentChat.contextXray.unpinSegment", {
+                        defaultValue: "Unpin segment",
+                      })
+                    : translate("agentChat.contextXray.restoreSegment", {
+                        defaultValue: "Restore segment",
+                      })
                 }
               >
                 <IconRotate2 className="h-3.5 w-3.5" />
               </button>
             </TooltipTrigger>
             <TooltipContent>
-              {segment.status === "pinned" ? "Unpin" : "Restore"}
+              {segment.status === "pinned"
+                ? translate("agentChat.contextXray.unpin", {
+                    defaultValue: "Unpin",
+                  })
+                : translate("agentChat.contextXray.restore", {
+                    defaultValue: "Restore",
+                  })}
             </TooltipContent>
           </Tooltip>
         ) : (
@@ -154,12 +229,18 @@ export function ContextSegmentRowView({
                   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"
+                  aria-label={translate("agentChat.contextXray.pinSegment", {
+                    defaultValue: "Pin segment",
+                  })}
                 >
                   <IconPin className="h-3.5 w-3.5" />
                 </button>
               </TooltipTrigger>
-              <TooltipContent>Pin</TooltipContent>
+              <TooltipContent>
+                {translate("agentChat.contextXray.pin", {
+                  defaultValue: "Pin",
+                })}
+              </TooltipContent>
             </Tooltip>
             <Tooltip>
               <TooltipTrigger asChild>
@@ -167,13 +248,21 @@ export function ContextSegmentRowView({
                   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"
+                  aria-label={translate("agentChat.contextXray.evictSegment", {
+                    defaultValue: "Evict segment",
+                  })}
                 >
                   <IconX className="h-3.5 w-3.5" />
                 </button>
               </TooltipTrigger>
               <TooltipContent>
-                {advisory ? "Record eviction intent" : "Evict"}
+                {advisory
+                  ? translate("agentChat.contextXray.recordEvictionIntent", {
+                      defaultValue: "Record eviction intent",
+                    })
+                  : translate("agentChat.contextXray.evict", {
+                      defaultValue: "Evict",
+                    })}
               </TooltipContent>
             </Tooltip>
           </>

package/src/context-ui/ContextTreemap.tsx

@@ -5,7 +5,9 @@ import { contextGroupFill, formatContextTokens } from "./format.js";
 import type {
   ContextSegmentViewData,
   ContextSystemSectionViewData,
+  ContextTranslate,
 } from "./types.js";
+import { fallbackContextTranslate } from "./types.js";
 
 interface TreemapDatum {
   name: string;
@@ -52,10 +54,12 @@ export function ContextTreemapView({
   segments,
   systemSections = [],
   onSelect,
+  translate = fallbackContextTranslate,
 }: {
   segments: ContextSegmentViewData[];
   systemSections?: ContextSystemSectionViewData[];
   onSelect?: (segmentId: string) => void;
+  translate?: ContextTranslate;
 }) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [chartWidth, setChartWidth] = useState(0);
@@ -99,7 +103,9 @@ export function ContextTreemapView({
   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
+        {translate("agentChat.contextXray.noActiveSegments", {
+          defaultValue: "No active segments",
+        })}
       </div>
     );
   }