npm - @agent-native/core - Versions diffs - 0.109.3 → 0.109.4 - Mend

@agent-native/core 0.109.3 → 0.109.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (249) hide show

package/dist/client/context-xray/ContextMeter.js CHANGED Viewed

@@ -1,21 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ContextMeterView } from "@agent-native/toolkit/context-ui";
 import { lazy, Suspense, useEffect, useRef, useState } from "react";
 import { manifestConversationTokens, manifestSystemTokens, } from "../../shared/context-xray.js";
-import { Popover, PopoverContent, PopoverTrigger, } from "../components/ui/popover.js";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "../components/ui/tooltip.js";
 import { useActionMutation, useActionQuery } from "../use-action.js";
-import { cn } from "../utils.js";
-import { formatTokens, resolveContextWindow } from "./format.js";
+import { resolveContextWindow } from "./format.js";
 const ContextXRayPanel = lazy(() => import("./ContextXRayPanel.js").then((m) => ({
     default: m.ContextXRayPanel,
 })));
-function ContextDonut({ pct, advisory }) {
-    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 (_jsxs("span", { className: "relative flex size-5 items-center justify-center", children: [_jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 20 20", className: "-rotate-90 size-5", children: [_jsx("circle", { cx: "10", cy: "10", r: radius, className: "stroke-muted", fill: "none", strokeWidth: "3" }), _jsx("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 })] }), _jsx("span", { className: "absolute size-2 rounded-full bg-background" })] }));
-}
 export function ContextMeter({ threadId, manifest: providedManifest, enabled = true, }) {
     const [open, setOpen] = useState(false);
     const [optimistic, setOptimistic] = useState(new Map());
@@ -43,14 +34,6 @@ export function ContextMeter({ threadId, manifest: providedManifest, enabled = t
         }
     }, [enabled, threadId]);
     const manifest = providedManifest ?? query.data;
-    const contextWindow = resolveContextWindow(manifest?.model);
-    const pct = manifest
-        ? Math.min(100, Math.round((manifest.totalTokens / contextWindow) * 100))
-        : 0;
-    const systemTokens = manifest ? manifestSystemTokens(manifest) : 0;
-    const conversationTokens = manifest
-        ? manifestConversationTokens(manifest)
-        : 0;
     if ((!shouldQuery && !providedManifest) ||
         !manifest ||
         (manifest.rawTokens <= 0 && manifest.totalTokens <= 0)) {
@@ -74,8 +57,10 @@ export function ContextMeter({ threadId, manifest: providedManifest, enabled = t
         if (action === "restore")
             restore.mutate(params, options);
     };
-    return (_jsx(TooltipProvider, { delayDuration: 200, children: _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": `Context ${pct}%, ${formatTokens(manifest.totalTokens)}${systemTokens > 0 ? ` total: ${formatTokens(systemTokens)} system + ${formatTokens(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"), children: _jsx(ContextDonut, { pct: pct, advisory: !manifest.enforceable }) }) }) }), _jsxs(TooltipContent, { children: ["Context ", pct, "% \u00B7 ", formatTokens(manifest.totalTokens), systemTokens > 0
-                                    ? ` (${formatTokens(systemTokens)} system + ${formatTokens(conversationTokens)} conversation)`
-                                    : ""] })] }), _jsx(PopoverContent, { align: "end", side: "top", sideOffset: 8, className: "w-[min(92vw,380px)] overflow-hidden border-border/70 p-0", children: open ? (_jsx(Suspense, { fallback: _jsx("div", { className: "flex h-52 items-center justify-center text-xs text-muted-foreground", children: "Loading context view\u2026" }), children: _jsx(ContextXRayPanel, { manifest: manifest, optimistic: optimistic, onPin: (segmentId) => mutateStatus(segmentId, "pinned", "pin"), onEvict: (segmentId) => mutateStatus(segmentId, "evicted", "evict"), onRestore: (segmentId) => mutateStatus(segmentId, "active", "restore") }) })) : null })] }) }));
+    return (_jsx(ContextMeterView, { manifest: {
+            ...manifest,
+            systemTokens: manifestSystemTokens(manifest),
+            conversationTokens: manifestConversationTokens(manifest),
+        }, contextWindow: resolveContextWindow(manifest.model), open: open, onOpenChange: setOpen, children: open ? (_jsx(Suspense, { fallback: _jsx("div", { className: "flex h-52 items-center justify-center text-xs text-muted-foreground", children: "Loading context view\u2026" }), children: _jsx(ContextXRayPanel, { manifest: manifest, optimistic: optimistic, onPin: (segmentId) => mutateStatus(segmentId, "pinned", "pin"), onEvict: (segmentId) => mutateStatus(segmentId, "evicted", "evict"), onRestore: (segmentId) => mutateStatus(segmentId, "active", "restore") }) })) : null }));
 }
 //# sourceMappingURL=ContextMeter.js.map

package/dist/client/context-xray/ContextMeter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextMeter.js","sourceRoot":"","sources":["../../../src/client/context-xray/ContextMeter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { lazy, Suspense, useEffect, useRef, useState } from \"react\";\n\nimport type {\n ContextManifest,\n ContextSegmentStatus,\n} from \"../../shared/context-xray.js\";\nimport {\n manifestConversationTokens,\n manifestSystemTokens,\n} from \"../../shared/context-xray.js\";\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"../components/ui/popover.js\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"../components/ui/tooltip.js\";\nimport { useActionMutation, useActionQuery } from \"../use-action.js\";\nimport { cn } from \"../utils.js\";\nimport { formatTokens, resolveContextWindow } from \"./format.js\";\n\nconst ContextXRayPanel = lazy(() =>\n import(\"./ContextXRayPanel.js\").then((m) => ({\n default: m.ContextXRayPanel,\n })),\n);\n\nfunction ContextDonut({ pct, advisory }: { pct: number; advisory: boolean }) {\n const radius = 7.5;\n const circumference = 2 * Math.PI * radius;\n const displayPct = Math.max(3, Math.min(100, pct));\n const dashOffset = circumference - (displayPct / 100) * circumference;\n\n return (\n <span className=\"relative flex size-5 items-center justify-center\">\n <svg aria-hidden=\"true\" viewBox=\"0 0 20 20\" className=\"-rotate-90 size-5\">\n <circle\n cx=\"10\"\n cy=\"10\"\n r={radius}\n className=\"stroke-muted\"\n fill=\"none\"\n strokeWidth=\"3\"\n />\n <circle\n cx=\"10\"\n cy=\"10\"\n r={radius}\n className={cn(advisory ? \"stroke-amber-500\" : \"stroke-[#00B5FF]\")}\n fill=\"none\"\n strokeLinecap=\"round\"\n strokeWidth=\"3\"\n strokeDasharray={circumference}\n strokeDashoffset={dashOffset}\n />\n </svg>\n <span className=\"absolute size-2 rounded-full bg-background\" />\n </span>\n );\n}\n\nexport function ContextMeter({\n threadId,\n manifest: providedManifest,\n enabled = true,\n}: {\n threadId?: string \| null;\n manifest?: ContextManifest \| null;\n enabled?: boolean;\n}) {\n const [open, setOpen] = useState(false);\n const [optimistic, setOptimistic] = useState<\n Map<string, ContextSegmentStatus>\n >(new Map());\n const currentThreadId = useRef(threadId);\n const shouldQuery = Boolean(threadId && enabled && !providedManifest);\n const query = useActionQuery(\n \"context-manifest-get\",\n shouldQuery && threadId ? { threadId } : undefined,\n {\n enabled: shouldQuery,\n staleTime: 1000,\n },\n ) as { data?: ContextManifest };\n const pin = useActionMutation(\"context-pin\");\n const evict = useActionMutation(\"context-evict\");\n const restore = useActionMutation(\"context-restore\");\n\n useEffect(() => {\n currentThreadId.current = threadId;\n setOptimistic(new Map());\n }, [threadId]);\n\n useEffect(() => {\n if (!threadId \|\| !enabled \|\| typeof window === \"undefined\") return;\n const params = new URLSearchParams(window.location.search);\n const wantsXray = params.get(\"contextXray\") === \"1\";\n const targetThread = params.get(\"threadId\");\n if (wantsXray && (!targetThread \|\| targetThread === threadId)) {\n setOpen(true);\n }\n }, [enabled, threadId]);\n\n const manifest = providedManifest ?? query.data;\n const contextWindow = resolveContextWindow(manifest?.model);\n const pct = manifest\n ? Math.min(100, Math.round((manifest.totalTokens / contextWindow) * 100))\n : 0;\n const systemTokens = manifest ? manifestSystemTokens(manifest) : 0;\n const conversationTokens = manifest\n ? manifestConversationTokens(manifest)\n : 0;\n\n if (\n (!shouldQuery && !providedManifest) \|\|\n !manifest \|\|\n (manifest.rawTokens <= 0 && manifest.totalTokens <= 0)\n ) {\n return null;\n }\n\n const mutateStatus = (\n segmentId: string,\n status: ContextSegmentStatus,\n action: \"pin\" \| \"evict\" \| \"restore\",\n ) => {\n const previous = new Map(optimistic);\n setOptimistic((prev) => new Map(prev).set(segmentId, status));\n const params = { threadId, segmentId };\n const options = {\n onError: () => {\n if (currentThreadId.current === threadId) {\n setOptimistic(previous);\n }\n },\n };\n if (action === \"pin\") pin.mutate(params, options);\n if (action === \"evict\") evict.mutate(params, options);\n if (action === \"restore\") restore.mutate(params, options);\n };\n\n return (\n <TooltipProvider delayDuration={200}>\n <Popover open={open} onOpenChange={setOpen}>\n <Tooltip>\n <TooltipTrigger asChild>\n <PopoverTrigger asChild>\n <button\n type=\"button\"\n aria-label={`Context ${pct}%, ${formatTokens(\n manifest.totalTokens,\n )}${systemTokens > 0 ? ` total: ${formatTokens(systemTokens)} system + ${formatTokens(conversationTokens)} conversation` : \"\"}. Open Context X-Ray.`}\n className={cn(\n \"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\",\n open && \"bg-accent/60 text-foreground\",\n )}\n >\n <ContextDonut pct={pct} advisory={!manifest.enforceable} />\n </button>\n </PopoverTrigger>\n </TooltipTrigger>\n <TooltipContent>\n Context {pct}% · {formatTokens(manifest.totalTokens)}\n {systemTokens > 0\n ? ` (${formatTokens(systemTokens)} system + ${formatTokens(conversationTokens)} conversation)`\n : \"\"}\n </TooltipContent>\n </Tooltip>\n <PopoverContent\n align=\"end\"\n side=\"top\"\n sideOffset={8}\n className=\"w-[min(92vw,380px)] overflow-hidden border-border/70 p-0\"\n >\n {open ? (\n <Suspense\n fallback={\n <div className=\"flex h-52 items-center justify-center text-xs text-muted-foreground\">\n Loading context view…\n </div>\n }\n >\n <ContextXRayPanel\n manifest={manifest}\n optimistic={optimistic}\n onPin={(segmentId) => mutateStatus(segmentId, \"pinned\", \"pin\")}\n onEvict={(segmentId) =>\n mutateStatus(segmentId, \"evicted\", \"evict\")\n }\n onRestore={(segmentId) =>\n mutateStatus(segmentId, \"active\", \"restore\")\n }\n />\n </Suspense>\n ) : null}\n </PopoverContent>\n </Popover>\n </TooltipProvider>\n );\n}\n"]}
1	+ {"version":3,"file":"ContextMeter.js","sourceRoot":"","sources":["../../../src/client/context-xray/ContextMeter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ContextMeterView } from \"@agent-native/toolkit/context-ui\";\nimport { lazy, Suspense, useEffect, useRef, useState } from \"react\";\n\nimport type {\n ContextManifest,\n ContextSegmentStatus,\n} from \"../../shared/context-xray.js\";\nimport {\n manifestConversationTokens,\n manifestSystemTokens,\n} from \"../../shared/context-xray.js\";\nimport { useActionMutation, useActionQuery } from \"../use-action.js\";\nimport { resolveContextWindow } from \"./format.js\";\n\nconst ContextXRayPanel = lazy(() =>\n import(\"./ContextXRayPanel.js\").then((m) => ({\n default: m.ContextXRayPanel,\n })),\n);\n\nexport function ContextMeter({\n threadId,\n manifest: providedManifest,\n enabled = true,\n}: {\n threadId?: string \| null;\n manifest?: ContextManifest \| null;\n enabled?: boolean;\n}) {\n const [open, setOpen] = useState(false);\n const [optimistic, setOptimistic] = useState<\n Map<string, ContextSegmentStatus>\n >(new Map());\n const currentThreadId = useRef(threadId);\n const shouldQuery = Boolean(threadId && enabled && !providedManifest);\n const query = useActionQuery(\n \"context-manifest-get\",\n shouldQuery && threadId ? { threadId } : undefined,\n {\n enabled: shouldQuery,\n staleTime: 1000,\n },\n ) as { data?: ContextManifest };\n const pin = useActionMutation(\"context-pin\");\n const evict = useActionMutation(\"context-evict\");\n const restore = useActionMutation(\"context-restore\");\n\n useEffect(() => {\n currentThreadId.current = threadId;\n setOptimistic(new Map());\n }, [threadId]);\n\n useEffect(() => {\n if (!threadId \|\| !enabled \|\| typeof window === \"undefined\") return;\n const params = new URLSearchParams(window.location.search);\n const wantsXray = params.get(\"contextXray\") === \"1\";\n const targetThread = params.get(\"threadId\");\n if (wantsXray && (!targetThread \|\| targetThread === threadId)) {\n setOpen(true);\n }\n }, [enabled, threadId]);\n\n const manifest = providedManifest ?? query.data;\n if (\n (!shouldQuery && !providedManifest) \|\|\n !manifest \|\|\n (manifest.rawTokens <= 0 && manifest.totalTokens <= 0)\n ) {\n return null;\n }\n\n const mutateStatus = (\n segmentId: string,\n status: ContextSegmentStatus,\n action: \"pin\" \| \"evict\" \| \"restore\",\n ) => {\n const previous = new Map(optimistic);\n setOptimistic((prev) => new Map(prev).set(segmentId, status));\n const params = { threadId, segmentId };\n const options = {\n onError: () => {\n if (currentThreadId.current === threadId) {\n setOptimistic(previous);\n }\n },\n };\n if (action === \"pin\") pin.mutate(params, options);\n if (action === \"evict\") evict.mutate(params, options);\n if (action === \"restore\") restore.mutate(params, options);\n };\n\n return (\n <ContextMeterView\n manifest={{\n ...manifest,\n systemTokens: manifestSystemTokens(manifest),\n conversationTokens: manifestConversationTokens(manifest),\n }}\n contextWindow={resolveContextWindow(manifest.model)}\n open={open}\n onOpenChange={setOpen}\n >\n {open ? (\n <Suspense\n fallback={\n <div className=\"flex h-52 items-center justify-center text-xs text-muted-foreground\">\n Loading context view…\n </div>\n }\n >\n <ContextXRayPanel\n manifest={manifest}\n optimistic={optimistic}\n onPin={(segmentId) => mutateStatus(segmentId, \"pinned\", \"pin\")}\n onEvict={(segmentId) => mutateStatus(segmentId, \"evicted\", \"evict\")}\n onRestore={(segmentId) =>\n mutateStatus(segmentId, \"active\", \"restore\")\n }\n />\n </Suspense>\n ) : null}\n </ContextMeterView>\n );\n}\n"]}

package/dist/client/context-xray/ContextSegmentRow.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextSegmentRow.d.ts","sourceRoot":"","sources":["../../../src/client/context-xray/ContextSegmentRow.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;~~AAU3E~~,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,QAAQ,EACR,KAAK,EACL,OAAO,EACP,SAAS,GACV,EAAE;IACD,OAAO,EAAE,sBAAsB,CAAC;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,+~~BAyGA~~"}
1	+ {"version":3,"file":"ContextSegmentRow.d.ts","sourceRoot":"","sources":["../../../src/client/context-xray/ContextSegmentRow.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AAE3E,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,QAAQ,EACR,KAAK,EACL,OAAO,EACP,SAAS,GACV,EAAE;IACD,OAAO,EAAE,sBAAsB,CAAC;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,+BAUA"}

package/dist/client/context-xray/ContextSegmentRow.js CHANGED Viewed

@@ -1,22 +1,6 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconLock, IconPin, IconRotate2, IconX } from "@tabler/icons-react";
-import { Tooltip, TooltipContent, TooltipTrigger, } from "../components/ui/tooltip.js";
-import { cn } from "../utils.js";
-import { formatTokens, statusLabel } from "./format.js";
-import { SegmentProvenancePopover } from "./SegmentProvenancePopover.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ContextSegmentRowView } from "@agent-native/toolkit/context-ui";
 export function ContextSegmentRow({ segment, advisory, onPin, onEvict, onRestore, }) {
-    const disabled = segment.protected || segment.status === "evicted";
-    return (_jsxs("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"), children: [_jsx(SegmentProvenancePopover, { segment: segment, children: _jsxs("button", { type: "button", className: "min-w-0 flex-1 text-left", "aria-label": `Inspect ${segment.label}`, children: [_jsx("div", { className: cn("truncate text-[13px] font-medium leading-5 text-foreground", segment.status === "evicted" && "line-through"), children: segment.label }), _jsxs("div", { className: "flex items-center gap-1.5 text-[11px] text-muted-foreground", children: [_jsx("span", { children: formatTokens(segment.tokenCount) }), segment.tokenMethod === "estimate" && _jsx("span", { children: "~" }), _jsx("span", { children: "\u00B7" }), _jsx("span", { children: statusLabel(segment) }), advisory && _jsx("span", { children: "\u00B7 advisory" })] })] }) }), _jsx("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", children: segment.protected ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "flex size-6 items-center justify-center rounded-md text-muted-foreground", children: _jsx(IconLock, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: "Protected during active turn" })] })) : segment.status === "evicted" ||
-                    segment.status === "summarized" ||
-                    segment.status === "pinned" ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("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", children: _jsx(IconRotate2, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: segment.status === "pinned" ? "Unpin" : "Restore" })] })) : (_jsxs(_Fragment, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("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", children: _jsx(IconPin, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: "Pin" })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("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", children: _jsx(IconX, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: advisory ? "Record eviction intent" : "Evict" })] })] })) })] }));
+    return (_jsx(ContextSegmentRowView, { segment: segment, advisory: advisory, onPin: onPin, onEvict: onEvict, onRestore: onRestore }));
 }
 //# sourceMappingURL=ContextSegmentRow.js.map

package/dist/client/context-xray/ContextSegmentRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextSegmentRow.js","sourceRoot":"","sources":["../../../src/client/context-xray/ContextSegmentRow.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,~~QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,~~qBAAqB,~~CAAC;AAG5E,OAAO,EACL,OAAO,EACP,cAAc,EACd,cAAc,GACf,MAAM,6BAA6B,CAAC;AACrC,OAAO,~~EAAE,~~EAAE,EAAE,~~MAAM,~~aAAa~~,CAAC;~~AACjC~~,~~OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,~~MAAM,~~aAAa,CAAC;AACxD,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAEzE,MAAM,~~UAAU,iBAAiB,CAAC,EAChC,OAAO,EACP,QAAQ,EACR,KAAK,EACL,OAAO,EACP,SAAS,GAOV;IACC,~~MAAM,QAAQ,GAAG,~~OAAO,~~CAAC,SAAS,IAAI,OAAO,CAAC,MAAM,KAAK,SAAS,CAAC;IACnE,OAAO,~~CACL,eACE,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;YACnB,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG;gBAAE,KAAK,EAAE,CAAC;YAC/B,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,QAAQ;gBAAE,OAAO,EAAE,CAAC;YAC9C,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,OAAO,CAAC,MAAM,KAAK,QAAQ;gBAAE,SAAS,EAAE,CAAC;QACpE,CAAC,EACD,SAAS,EAAE,EAAE,CACX,yLAAyL,EACzL,OAAO,CAAC,MAAM,KAAK,SAAS,IAAI,YAAY,CAC7C,aAED,KAAC,~~wBAAwB~~,~~IAAC~~,OAAO,EAAE,OAAO,~~YACxC~~,~~kBACE,IAAI,EAAC,~~QAAQ,~~EACb,SAAS,EAAC,0BAA0B,gBACxB,WAAW,OAAO,CAAC,KAAK,~~EAAE,aAEtC,cACE,SAAS,EAAE,EAAE,CACX,4DAA4D,EAC5D,OAAO,CAAC,MAAM,KAAK,SAAS,IAAI,cAAc,CAC/C,YAEA,OAAO,CAAC,KAAK,GACV,EACN,eAAK,SAAS,EAAC,6DAA6D,aAC1E,yBAAO,YAAY,CAAC,OAAO,CAAC,UAAU,CAAC,GAAQ,EAC9C,OAAO,CAAC,WAAW,KAAK,UAAU,IAAI,+BAAc,EACrD,oCAAc,EACd,yBAAO,WAAW,CAAC,OAAO,CAAC,GAAQ,EAClC,QAAQ,IAAI,6CAAuB,IAChC,IACC,GACgB,EAC3B,cAAK,SAAS,EAAC,wHAAwH,YACpI,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CACnB,MAAC,OAAO,eACN,KAAC,cAAc,IAAC,OAAO,kBACrB,eAAM,SAAS,EAAC,0EAA0E,YACxF,KAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,GAAG,GAC/B,GACQ,EACjB,KAAC,cAAc,+CAA8C,IACrD,CACX,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,KAAK,SAAS;oBAC9B,OAAO,CAAC,MAAM,KAAK,YAAY;oBAC/B,OAAO,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC9B,MAAC,OAAO,eACN,KAAC,cAAc,IAAC,OAAO,kBACrB,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,SAAS,EAClB,~~SAAS,EAAC,oHAAoH,gBAE5H,OAAO,CAAC,MAAM,~~KAAK,QAAQ;oCACzB,CAAC,CAAC,eAAe;oCACjB,CAAC,CAAC,iBAAiB,YAGvB,KAAC,WAAW,IAAC,SAAS,EAAC,aAAa,GAAG,GAChC,GACM,EACjB,KAAC,cAAc,cACZ,OAAO,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,GACnC,IACT,CACX,CAAC,CAAC,CAAC,CACF,8BACE,MAAC,OAAO,eACN,KAAC,cAAc,IAAC,OAAO,kBACrB,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,KAAK,~~EACd~~,~~SAAS,EAAC,oHAAoH,gBACnH,aAAa,YAExB,KAAC,~~OAAO,~~IAAC,SAAS,EAAC,aAAa,GAAG,GAC5B,GACM,EACjB,KAAC,cAAc,sBAAqB,IAC5B,EACV,MAAC,OAAO,eACN,KAAC,cAAc,IAAC,OAAO,kBACrB,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,~~EAAE,OAAO,EAChB,SAAS,~~EAAC~~,~~qHAAqH,gBACpH,eAAe,YAE1B,KAAC,KAAK,IAAC,~~SAAS,~~EAAC~~,~~aAAa~~,~~GAAG,GAC1B,GACM,EACjB,KAAC,cAAc,cACZ,QAAQ,~~CAAC~~,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,OAAO,GAC/B,IACT,IACT,CACJ,GACG,IACF,CACP,CAAC~~;AACJ,CAAC","sourcesContent":["import { ~~IconLock,~~ ~~IconPin, IconRotate2, IconX~~ } from \"@~~tabler~~/~~icons~~-~~react~~\";\n\nimport type { ContextManifestSegment } from \"../../shared/context-xray.js\";\~~nimport {\~~n ~~Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from~~ \"../components/ui/tooltip.js\";\nimport { cn } from \"../utils.js\";\nimport { formatTokens, statusLabel } from \"./format.js\";\nimport { SegmentProvenancePopover } from \"./SegmentProvenancePopover.js\";\n\nexport function ContextSegmentRow({\n segment,\n advisory,\n onPin,\n onEvict,\n onRestore,\n}: {\n segment: ContextManifestSegment;\n advisory: boolean;\n onPin: () => void;\n onEvict: () => void;\n onRestore: () => void;\n}) {\n ~~const disabled = segment.protected \|\| segment.status === \"evicted\";\n~~ return (\n <~~div~~\n ~~tabIndex={0}\n onKeyDown={(event) => {\n if (event.key === \"p\") onPin();\n if (event.key === \"e\" && !disabled) onEvict();\n if (event.key === \"u\" &&~~ segment~~.status !== \"active\") onRestore();\n }}\n className~~={cn(\n \"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\",\n segment~~.status === \"evicted\" && \"opacity-60\",\n )~~}\n ~~>\n~~ ~~<SegmentProvenancePopover segment~~={segment}>\n <button\n type=\"button\"\n className=\"min-w-0 flex-1 text-left\"\n aria-label={`Inspect ${segment.label}`}\n >\n <div\n className={cn(\n \"truncate text-[13px] font-medium leading-5 text-foreground\",\n segment.status === \"evicted\" && \"line-through\",\n )}\n >\n {segment.label}\n </div>\n <div className=\"flex items-center gap-1.5 text-[11px] text-muted-foreground\">\n <span>{formatTokens(segment.tokenCount)}</span>\n {segment.tokenMethod === \"estimate\" && <span>~</span>}\n <span>·</span>\n <span>{statusLabel(segment)}</span>\n {advisory ~~&& <span>· advisory</span>~~}\n ~~</div>\n </button>\n~~ </SegmentProvenancePopover>\n <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\">\n {segment.protected ? (\n <Tooltip>\n <TooltipTrigger asChild>\n <span className=\"flex size-6 items-center justify-center rounded-md text-muted-foreground\">\n <IconLock className=\"h-3.5 w-3.5\" />\n </span>\n </TooltipTrigger>\n <TooltipContent>Protected during active turn</TooltipContent>\n </Tooltip>\n ) : segment.status === \"evicted\" \|\|\n segment.status === \"summarized\" \|\|\n segment.status === \"pinned\" ? (\n <Tooltip>\n <TooltipTrigger asChild>\n <button\n type=\"button\"\n onClick={onRestore}\n className=\"flex size-6 items-center justify-center rounded-md text-muted-foreground hover:bg-background hover:text-foreground\"\n aria-label={\n segment.status === \"pinned\"\n ? \"Unpin segment\"\n : \"Restore segment\"\n }\n >\n <IconRotate2 className=\"h-3.5 w-3.5\" />\n </button>\n </TooltipTrigger>\n <TooltipContent>\n {segment.status === \"pinned\" ? \"Unpin\" : \"Restore\"}\n </TooltipContent>\n </Tooltip>\n ) : (\n <>\n <Tooltip>\n <TooltipTrigger asChild>\n <button\n type=\"button\"\n onClick={onPin}\n className=\"flex size-6 items-center justify-center rounded-md text-muted-foreground hover:bg-background hover:text-foreground\"\n aria-label=\"Pin segment\"\n >\n <IconPin className=\"h-3.5 w-3.5\" />\n </button>\n </TooltipTrigger>\n <TooltipContent>Pin</TooltipContent>\n </Tooltip>\n <Tooltip>\n <TooltipTrigger asChild>\n <button\n type=\"button\"\n onClick={onEvict}\n className=\"flex size-6 items-center justify-center rounded-md text-muted-foreground hover:bg-background hover:text-destructive\"\n aria-label=\"Evict segment\"\n >\n <IconX className=\"h-3.5 w-3.5\" />\n </button>\n </TooltipTrigger>\n <TooltipContent>\n {~~advisory ? \"Record eviction intent\" : \"Evict\"~~}\n ~~</TooltipContent>\n </Tooltip>\n </>\n )}\n </div>\n~~ ~~</div>\~~n );\n}\n"]}
1	+ {"version":3,"file":"ContextSegmentRow.js","sourceRoot":"","sources":["../../../src/client/context-xray/ContextSegmentRow.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAIzE,MAAM,UAAU,iBAAiB,CAAC,EAChC,OAAO,EACP,QAAQ,EACR,KAAK,EACL,OAAO,EACP,SAAS,GAOV;IACC,OAAO,CACL,KAAC,qBAAqB,IACpB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;AACJ,CAAC","sourcesContent":["import { ContextSegmentRowView } from \"@agent-native/toolkit/context-ui\";\n\nimport type { ContextManifestSegment } from \"../../shared/context-xray.js\";\n\nexport function ContextSegmentRow({\n segment,\n advisory,\n onPin,\n onEvict,\n onRestore,\n}: {\n segment: ContextManifestSegment;\n advisory: boolean;\n onPin: () => void;\n onEvict: () => void;\n onRestore: () => void;\n}) {\n return (\n <ContextSegmentRowView\n segment={segment}\n advisory={advisory}\n onPin={onPin}\n onEvict={onEvict}\n onRestore={onRestore}\n />\n );\n}\n"]}

package/dist/client/context-xray/ContextTreemap.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextTreemap.d.ts","sourceRoot":"","sources":["../../../src/client/context-xray/ContextTreemap.tsx"],"names":[],"mappings":"~~AAGA~~,OAAO,KAAK,EACV,sBAAsB,EACtB,4BAA4B,EAC7B,MAAM,8BAA8B,CAAC;~~AA4CtC~~,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,cAAmB,EACnB,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,sBAAsB,EAAE,CAAC;IACnC,cAAc,CAAC,EAAE,4BAA4B,EAAE,CAAC;IAChD,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,+~~BAsEA~~"}
1	+ {"version":3,"file":"ContextTreemap.d.ts","sourceRoot":"","sources":["../../../src/client/context-xray/ContextTreemap.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,sBAAsB,EACtB,4BAA4B,EAC7B,MAAM,8BAA8B,CAAC;AAEtC,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,cAAmB,EACnB,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,sBAAsB,EAAE,CAAC;IACnC,cAAc,CAAC,EAAE,4BAA4B,EAAE,CAAC;IAChD,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,+BAQA"}

package/dist/client/context-xray/ContextTreemap.js CHANGED Viewed

@@ -1,57 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { Treemap } from "recharts";
-import { formatTokens, groupFill } from "./format.js";
-function TreemapContent(props) {
-    const { x, y, width, height, name, group, size } = props;
-    if (width < 8 || height < 8)
-        return null;
-    const showLabel = width > 90 && height > 42;
-    return (_jsxs("g", { children: [_jsx("rect", { x: x, y: y, width: width, height: height, rx: 3, ry: 3, fill: groupFill(group), stroke: "var(--background)", strokeWidth: 2 }), showLabel && (_jsx("foreignObject", { x: x + 6, y: y + 6, width: width - 12, height: height - 12, children: _jsxs("div", { className: "flex h-full flex-col justify-between overflow-hidden text-[11px] leading-tight text-white", children: [_jsx("div", { className: "truncate font-medium", children: name }), _jsx("div", { className: "text-white/85", children: formatTokens(size) })] }) }))] }));
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ContextTreemapView } from "@agent-native/toolkit/context-ui";
 export function ContextTreemap({ segments, systemSections = [], onSelect, }) {
-    const containerRef = useRef(null);
-    const [chartWidth, setChartWidth] = useState(0);
-    const data = 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 (_jsx("div", { className: "flex h-52 items-center justify-center rounded-md bg-muted/30 text-xs text-muted-foreground", children: "No active segments" }));
-    }
-    return (_jsx("div", { ref: containerRef, className: "h-56 min-w-0 rounded-md bg-muted/25 p-1", children: chartWidth > 0 && (_jsx(Treemap, { width: chartWidth, height: 216, data: data, dataKey: "size", nameKey: "name", aspectRatio: 4 / 3, isAnimationActive: false, content: _jsx(TreemapContent, {}), onClick: (datum) => {
-                if (datum?.segmentId)
-                    onSelect?.(datum.segmentId);
-            } })) }));
+    return (_jsx(ContextTreemapView, { segments: segments, systemSections: systemSections, onSelect: onSelect }));
 }
 //# sourceMappingURL=ContextTreemap.js.map

package/dist/client/context-xray/ContextTreemap.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextTreemap.js","sourceRoot":"","sources":["../../../src/client/context-xray/ContextTreemap.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,~~SAAS~~,EAAE,MAAM,~~EAAE~~,~~QAAQ,EAAE,MAAM,OAAO,~~CAAC;~~AACpD~~,~~OAAO,EAAE,OAAO,EAAE,~~MAAM,UAAU,~~CAAC;AAMnC,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAStD,SAAS,~~cAAc,CAAC,KAAU;IAChC,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IACzD,IAAI,KAAK,GAAG,CAAC,IAAI,MAAM,GAAG,CAAC;QAAE,OAAO,IAAI,CAAC;IACzC,MAAM,SAAS,GAAG,KAAK,GAAG,EAAE,IAAI,MAAM,GAAG,EAAE,CAAC;IAC5C,OAAO,CACL,wBACE,eACE,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,EAAE,EAAE,CAAC,EACL,EAAE,EAAE,CAAC,EACL,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,EACtB,MAAM,EAAC,mBAAmB,EAC1B,WAAW,EAAE,CAAC,GACd,EACD,SAAS,IAAI,CACZ,wBACE,CAAC,EAAE,CAAC,GAAG,CAAC,EACR,CAAC,EAAE,CAAC,GAAG,CAAC,EACR,KAAK,EAAE,KAAK,GAAG,EAAE,EACjB,MAAM,EAAE,MAAM,GAAG,EAAE,YAEnB,eAAK,SAAS,EAAC,2FAA2F,aACxG,cAAK,SAAS,EAAC,sBAAsB,YAAE,IAAI,GAAO,EAClD,cAAK,SAAS,EAAC,eAAe,YAAE,YAAY,CAAC,IAAI,CAAC,GAAO,IACrD,GACQ,CACjB,IACC,CACL,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,cAAc,GAAG,EAAE,EACnB,QAAQ,GAKT;IACC,~~MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAChD,MAAM,IAAI,GAAmB,QAAQ;SAClC,MAAM,CAAC,CAAC,~~OAAO,~~EAAE~~,~~EAAE~~,~~CAAC~~,~~OAAO~~,CAAC,MAAM,KAAK,SAAS,IAAI,OAAO,CAAC,UAAU,GAAG,CAAC,CAAC;SAC3E,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;QACjB,IAAI,EAAE,OAAO,CAAC,KAAK;QACnB,IAAI,EAAE,OAAO,CAAC,UAAU;QACxB,KAAK,EAAE,OAAO,CAAC,KAAK;QACpB,SAAS,EAAE,OAAO,CAAC,SAAS;KAC7B,CAAC,CAAC,CAAC;IACN,IAAI,CAAC,IAAI,CACP,GAAG,cAAc;SACd,MAAM,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,UAAU,GAAG,CAAC,CAAC;SAC3C,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;QACjB,IAAI,EAAE,OAAO,CAAC,KAAK;QACnB,IAAI,EAAE,OAAO,CAAC,UAAU;QACxB,KAAK,EAAE,YAAY,OAAO,CAAC,UAAU,EAAE;QACvC,SAAS,EAAE,OAAO,CAAC,SAAS;KAC7B,CAAC,CAAC,CACN,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,YAAY,CAAC,OAAO,CAAC;QACrC,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,MAAM,WAAW,GAAG,GAAG,EAAE;YACvB,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QAClE,CAAC,CAAC;QACF,WAAW,EAAE,CAAC;QAEd,MAAM,QAAQ,~~GACZ,OAAO,cAAc,KAAK,WAAW;YACnC,CAAC,CAAC,IAAI,cAAc,CAAC,WAAW,CAAC;YACjC,CAAC,CAAC,IAAI,CAAC;QACX,QAAQ,~~EAAE,~~OAAO,CAAC,OAAO,CAAC,CAAC;QAC3B,MAAM,CAAC,gBAAgB,CAAC,~~QAAQ,EAAE,WAAW,CAAC,CAAC;QAC/C,OAAO,GAAG,EAAE;YACV,QAAQ,EAAE,UAAU,EAAE,CAAC;YACvB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;QACpD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACtB,OAAO,CACL,cAAK,SAAS,EAAC,4FAA4F,mCAErG,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,cAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAC,yCAAyC,YACxE,UAAU,GAAG,CAAC,IAAI,CACjB,KAAC,OAAO,IACN,KAAK,EAAE,UAAU,EACjB,MAAM,EAAE,GAAG,EACX,IAAI,EAAE,IAAW,EACjB,OAAO,EAAC,MAAM,EACd,OAAO,EAAC,MAAM,EACd,WAAW,EAAE,CAAC,GAAG,CAAC,EAClB,~~iBAAiB~~,EAAE,~~KAAK,EACxB,OAAO,EAAE,KAAC,~~cAAc,~~KAAG~~,~~EAC3B~~,~~OAAO,~~EAAE,~~CAAC,KAAU,EAAE,EAAE;gBACtB,IAAI,KAAK,EAAE,SAAS;oBAAE,~~QAAQ,~~EAAE~~,~~CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;YACpD,CAAC,GACD,~~CACH,~~GACG,CACP,~~CAAC;AACJ,CAAC","sourcesContent":["import { ~~useEffect,~~ ~~useRef, useState~~ } from \"~~react~~\";\~~nimport { Treemap } from \"recharts\";\~~n\nimport type {\n ContextManifestSegment,\n ContextManifestSystemSection,\n} from \"../../shared/context-xray.js\";\~~nimport { formatTokens, groupFill } from \"./format.js\";\~~n\ninterface TreemapDatum {\n name: string;\n size: number;\n group: string;\n segmentId: string;\n}\n\nfunction TreemapContent(props: any) {\n const { x, y, width, height, name, group, size } = props;\n if (width < 8 \|\| height < 8) return null;\n const showLabel = width > 90 && height > 42;\n return (\n <g>\n <rect\n x={x}\n y={y}\n width={width}\n height={height}\n rx={3}\n ry={3}\n fill={groupFill(group)}\n stroke=\"var(--background)\"\n strokeWidth={2}\n />\n {showLabel && (\n <foreignObject\n x={x + 6}\n y={y + 6}\n width={width - 12}\n height={height - 12}\n >\n <div className=\"flex h-full flex-col justify-between overflow-hidden text-[11px] leading-tight text-white\">\n <div className=\"truncate font-medium\">{name}</div>\n <div className=\"text-white/85\">{formatTokens(size)}</div>\n </div>\n </foreignObject>\n )}\n </g>\n );\n}\n\nexport function ContextTreemap({\n segments,\n systemSections = [],\n onSelect,\n}: {\n segments: ContextManifestSegment[];\n systemSections?: ContextManifestSystemSection[];\n onSelect?: (segmentId: string) => void;\n}) {\n const containerRef = useRef<HTMLDivElement>(null);\n const [chartWidth, setChartWidth] = useState(0);\n const data: TreemapDatum[] = segments\n .filter((segment) => segment.status !== \"evicted\" && segment.tokenCount > 0)\n .map((segment) => ({\n name: segment.label,\n size: segment.tokenCount,\n group: segment.group,\n segmentId: segment.segmentId,\n }));\n data.push(\n ...systemSections\n .filter((section) => section.tokenCount > 0)\n .map((section) => ({\n name: section.label,\n size: section.tokenCount,\n group: `System · ${section.governance}`,\n segmentId: section.segmentId,\n })),\n );\n\n useEffect(() => {\n const element = containerRef.current;\n if (!element) return~~;\n\n const~~ ~~updateWidth =~~ (~~) => {~~\n ~~setChartWidth(Math.max(0, Math.floor(element.clientWidth - 8)));\n~~ ~~};\n updateWidth();\n~~\n ~~const observer =\n~~ typeof ResizeObserver !== \"undefined\"\n ? new ResizeObserver(updateWidth)\n : null;\n observer?.observe(element);\n window.addEventListener(\"resize\", updateWidth);\n return () => {\n observer?.disconnect();\n window.removeEventListener(\"resize\", updateWidth);\n };\n }, []);\n\n if (data.length === 0) {\n return (\n <div className=\"flex h-52 items-center justify-center rounded-md bg-muted/30 text-xs text-muted-foreground\">\n No active segments~~\n </div>\n );\n }\n\n return (\n <div ref~~={~~containerRef~~} ~~className=\"h-56 min-w-0 rounded-md bg-muted/25 p-1~~\~~">\~~n ~~{chartWidth > 0 && (\n <Treemap\n width~~={~~chartWidth~~}\n ~~height~~={216}\n data={data as any}\n dataKey=\"size\"\n nameKey=\"name\"\n aspectRatio={4 / 3}\n isAnimationActive={false}\n content={<TreemapContent />}\n onClick={(datum: any) => {\n if (datum?.segmentId) onSelect~~?.(datum.segmentId);\n~~ }}\n />\n ~~)}\n </div>\n~~ );\n}\n"]}
1	+ {"version":3,"file":"ContextTreemap.js","sourceRoot":"","sources":["../../../src/client/context-xray/ContextTreemap.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAOtE,MAAM,UAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,cAAc,GAAG,EAAE,EACnB,QAAQ,GAKT;IACC,OAAO,CACL,KAAC,kBAAkB,IACjB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC","sourcesContent":["import { ContextTreemapView } from \"@agent-native/toolkit/context-ui\";\n\nimport type {\n ContextManifestSegment,\n ContextManifestSystemSection,\n} from \"../../shared/context-xray.js\";\n\nexport function ContextTreemap({\n segments,\n systemSections = [],\n onSelect,\n}: {\n segments: ContextManifestSegment[];\n systemSections?: ContextManifestSystemSection[];\n onSelect?: (segmentId: string) => void;\n}) {\n return (\n <ContextTreemapView\n segments={segments}\n systemSections={systemSections}\n onSelect={onSelect}\n />\n );\n}\n"]}

package/dist/client/context-xray/ContextXRayPanel.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextXRayPanel.d.ts","sourceRoot":"","sources":["../../../src/client/context-xray/ContextXRayPanel.tsx"],"names":[],"mappings":"~~AASA~~,OAAO,KAAK,EACV,eAAe,~~EAGf~~,oBAAoB,EACrB,MAAM,8BAA8B,CAAC;~~AAkItC~~,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,UAAU,EACV,KAAK,EACL,OAAO,EACP,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,eAAe,CAAC;IAC1B,UAAU,EAAE,GAAG,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;IAC9C,KAAK,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,+~~BAsQA~~"}
1	+ {"version":3,"file":"ContextXRayPanel.d.ts","sourceRoot":"","sources":["../../../src/client/context-xray/ContextXRayPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,eAAe,EACf,oBAAoB,EACrB,MAAM,8BAA8B,CAAC;AAQtC,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,UAAU,EACV,KAAK,EACL,OAAO,EACP,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,eAAe,CAAC;IAC1B,UAAU,EAAE,GAAG,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;IAC9C,KAAK,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,+BAiCA"}

package/dist/client/context-xray/ContextXRayPanel.js CHANGED Viewed

@@ -1,170 +1,28 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconChartTreemap, IconChevronDown, IconChevronRight, IconLock, IconListDetails, } from "@tabler/icons-react";
-import { useMemo, useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ContextXRayPanelView } from "@agent-native/toolkit/context-ui";
 import { manifestConversationTokens, manifestSystemTokens, } from "../../shared/context-xray.js";
-import { Tooltip, TooltipContent, TooltipTrigger, } from "../components/ui/tooltip.js";
 import { useT } from "../i18n.js";
-import { cn } from "../utils.js";
-import { ContextSegmentRow } from "./ContextSegmentRow.js";
-import { ContextTreemap } from "./ContextTreemap.js";
-import { formatTokens, groupColor, resolveContextWindow } from "./format.js";
-function applyOptimisticStatus(segments, optimistic) {
-    if (optimistic.size === 0)
-        return segments;
-    return segments.map((segment) => {
-        const status = optimistic.get(segment.segmentId);
-        return status ? { ...segment, status } : segment;
-    });
-}
-function groupedSegments(segments) {
-    const map = new Map();
-    for (const segment of segments) {
-        const groupName = segment.status === "pinned"
-            ? "Pinned"
-            : segment.status === "evicted"
-                ? "Evicted"
-                : segment.group;
-        const group = map.get(groupName) ?? {
-            name: groupName,
-            tokens: 0,
-            segments: [],
-        };
-        group.tokens += segment.tokenCount;
-        group.segments.push(segment);
-        map.set(groupName, group);
-    }
-    const order = [
-        "Pinned",
-        "Tool results",
-        "Files read",
-        "Conversation",
-        "Thinking",
-        "Evicted",
-    ];
-    return [...map.values()].sort((a, b) => {
-        const ai = order.indexOf(a.name);
-        const bi = order.indexOf(b.name);
-        if (ai >= 0 || bi >= 0)
-            return (ai < 0 ? 99 : ai) - (bi < 0 ? 99 : bi);
-        return b.tokens - a.tokens;
-    });
-}
-const GOVERNANCE_ORDER = ["required", "inherited", "user"];
-function governanceLabel(governance, t) {
-    switch (governance) {
-        case "required":
-            return t("contextXray.governance.required", {
+import { resolveContextWindow } from "./format.js";
+export function ContextXRayPanel({ manifest, optimistic, onPin, onEvict, onRestore, }) {
+    const t = useT();
+    return (_jsx(ContextXRayPanelView, { manifest: {
+            ...manifest,
+            systemTokens: manifestSystemTokens(manifest),
+            conversationTokens: manifestConversationTokens(manifest),
+        }, contextWindow: resolveContextWindow(manifest.model), optimistic: optimistic, onPin: onPin, onEvict: onEvict, onRestore: onRestore, titleLabel: t("contextXray.pageTitle", {
+            defaultValue: "Context X-Ray",
+        }), systemOrderedLabel: t("contextXray.systemOrdered", {
+            defaultValue: "System · ordered, not evictable",
+        }), governanceLabels: {
+            required: t("contextXray.governance.required", {
                 defaultValue: "Required",
-            });
-        case "inherited":
-            return t("contextXray.governance.inherited", {
+            }),
+            inherited: t("contextXray.governance.inherited", {
                 defaultValue: "Inherited",
-            });
-        case "user":
-            return t("contextXray.governance.user", {
+            }),
+            user: t("contextXray.governance.user", {
                 defaultValue: "Your context",
-            });
-    }
-}
-function sourceLabel(section) {
-    return (section.sourceRef?.path ??
-        section.sourceRef?.resourceId ??
-        section.sourceRef?.scope ??
-        "framework");
-}
-function SystemSectionRow({ section, totalTokens, }) {
-    const share = totalTokens > 0 ? Math.round((section.tokenCount / totalTokens) * 100) : 0;
-    return (_jsxs("div", { className: "flex min-h-12 items-start gap-2 rounded-sm px-2 py-1.5", children: [_jsx("span", { className: "mt-1 flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground", children: _jsx(IconLock, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-[13px] font-medium leading-5 text-foreground", children: section.label }), _jsxs("div", { className: "truncate text-[11px] text-muted-foreground", children: [sourceLabel(section), " \u00B7 ", formatTokens(section.tokenCount), " tokens \u00B7", " ", share, "%", section.tokenMethod === "estimate" ? " · estimated" : ""] }), section.preview ? (_jsx("div", { className: "mt-0.5 line-clamp-2 text-[11px] text-muted-foreground/80", children: section.preview })) : null] })] }));
-}
-export function ContextXRayPanel({ manifest, optimistic, onPin, onEvict, onRestore, }) {
-    const t = useT();
-    const [mode, setMode] = useState("list");
-    const [collapsed, setCollapsed] = useState(new Set());
-    const segments = useMemo(() => applyOptimisticStatus(manifest.segments, optimistic), [manifest.segments, optimistic]);
-    const groups = useMemo(() => groupedSegments(segments), [segments]);
-    const systemSections = manifest.systemSections ?? [];
-    const systemGroups = useMemo(() => {
-        const grouped = new Map();
-        for (const section of systemSections) {
-            const list = grouped.get(section.governance) ?? [];
-            list.push(section);
-            grouped.set(section.governance, list);
-        }
-        return GOVERNANCE_ORDER.flatMap((governance) => {
-            const sections = grouped.get(governance);
-            return sections && sections.length > 0
-                ? [
-                    {
-                        governance,
-                        sections,
-                        tokens: sections.reduce((sum, section) => sum + section.tokenCount, 0),
-                    },
-                ]
-                : [];
-        });
-    }, [systemSections]);
-    const contextWindow = resolveContextWindow(manifest.model);
-    const pct = Math.min(100, Math.round((manifest.totalTokens / contextWindow) * 100));
-    const headroom = Math.max(0, contextWindow - manifest.totalTokens);
-    const pinned = segments.filter((s) => s.status === "pinned").length;
-    const evicted = segments.filter((s) => s.status === "evicted").length;
-    const systemTokens = manifestSystemTokens(manifest);
-    const conversationTokens = manifestConversationTokens(manifest);
-    const details = [
-        `${formatTokens(headroom)} free`,
-        systemTokens > 0 ? `${formatTokens(systemTokens)} system` : null,
-        `${formatTokens(conversationTokens)} conversation`,
-        pinned > 0 ? `${pinned} pinned` : null,
-        evicted > 0 ? `${evicted} evicted` : null,
-        manifest.tokenCountMethod === "estimate" ? "estimated" : null,
-        !manifest.enforceable ? "advisory" : null,
-    ].filter((item) => Boolean(item));
-    return (_jsxs("div", { className: "flex max-h-[min(72vh,520px)] flex-col", children: [_jsxs("div", { className: "border-b border-border/60 px-3 py-2.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("h2", { className: "min-w-0 truncate text-sm font-medium text-foreground", children: "Context X-Ray" }), _jsxs("div", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: [formatTokens(manifest.totalTokens), " \u00B7 ", pct, "%"] })] }), _jsx("div", { className: "mt-2 h-1 overflow-hidden rounded-full bg-muted/70", children: _jsx("div", { className: "h-full rounded-full bg-foreground origin-left transition-transform duration-200", style: {
-                                transform: `scaleX(${Math.min(1, pct / 100)})`,
-                                width: "100%",
-                            } }) }), _jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-muted-foreground", children: [details.map((detail) => (_jsx("span", { children: detail }, detail))), manifest.reclaimedTokens > 0 && (_jsxs("span", { className: "font-medium text-emerald-600 dark:text-emerald-400", children: ["-", formatTokens(manifest.reclaimedTokens)] }))] })] }), _jsxs("div", { className: "overflow-y-auto px-2 py-2", children: [_jsx("div", { className: "mb-1 flex items-center justify-end", children: _jsxs("div", { className: "inline-flex rounded-md bg-muted/40 p-0.5", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: () => setMode("list"), "aria-label": "Show context list", className: cn("flex size-7 cursor-pointer items-center justify-center rounded text-muted-foreground", mode === "list"
-                                                    ? "bg-background text-foreground shadow-sm"
-                                                    : "hover:text-foreground"), children: _jsx(IconListDetails, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: "List" })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: () => setMode("map"), "aria-label": "Show context map", className: cn("flex size-7 cursor-pointer items-center justify-center rounded text-muted-foreground", mode === "map"
-                                                    ? "bg-background text-foreground shadow-sm"
-                                                    : "hover:text-foreground"), children: _jsx(IconChartTreemap, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: "Map" })] })] }) }), mode === "map" ? (_jsx(ContextTreemap, { segments: segments, systemSections: systemSections, onSelect: (segmentId) => {
-                            const segment = segments.find((s) => s.segmentId === segmentId);
-                            if (segment)
-                                setCollapsed(new Set());
-                        } })) : (_jsxs("div", { className: "divide-y divide-border/60", children: [systemGroups.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "px-1.5 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground", children: t("contextXray.systemOrdered", {
-                                            defaultValue: "System · ordered, not evictable",
-                                        }) }), systemGroups.map((group) => {
-                                        const groupKey = `system:${group.governance}`;
-                                        const isCollapsed = collapsed.has(groupKey);
-                                        return (_jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => {
-                                                        setCollapsed((prev) => {
-                                                            const next = new Set(prev);
-                                                            if (next.has(groupKey))
-                                                                next.delete(groupKey);
-                                                            else
-                                                                next.add(groupKey);
-                                                            return next;
-                                                        });
-                                                    }, className: "flex w-full cursor-pointer items-center gap-2 rounded-sm px-1.5 py-2 text-left hover:bg-accent/35", children: [isCollapsed ? (_jsx(IconChevronRight, { className: "h-3.5 w-3.5 text-muted-foreground" })) : (_jsx(IconChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })), _jsx(IconLock, { className: "h-3 w-3 text-muted-foreground" }), _jsx("span", { className: "min-w-0 flex-1 truncate text-xs font-medium", children: governanceLabel(group.governance, t) }), _jsxs("span", { className: "text-[11px] text-muted-foreground", children: [formatTokens(group.tokens), " \u00B7", " ", manifest.totalTokens > 0
-                                                                    ? Math.round((group.tokens / manifest.totalTokens) * 100)
-                                                                    : 0, "%"] })] }), !isCollapsed && (_jsx("div", { className: "pb-1", children: group.sections
-                                                        .slice()
-                                                        .sort((a, b) => b.tokenCount - a.tokenCount)
-                                                        .map((section) => (_jsx(SystemSectionRow, { section: section, totalTokens: manifest.totalTokens }, section.segmentId))) }))] }, groupKey));
-                                    })] })), groups.map((group) => {
-                                const isCollapsed = collapsed.has(group.name);
-                                return (_jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => {
-                                                setCollapsed((prev) => {
-                                                    const next = new Set(prev);
-                                                    if (next.has(group.name))
-                                                        next.delete(group.name);
-                                                    else
-                                                        next.add(group.name);
-                                                    return next;
-                                                });
-                                            }, className: "flex w-full cursor-pointer items-center gap-2 rounded-sm px-1.5 py-2 text-left hover:bg-accent/35", children: [isCollapsed ? (_jsx(IconChevronRight, { className: "h-3.5 w-3.5 text-muted-foreground" })) : (_jsx(IconChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })), _jsx("span", { className: cn("h-2 w-2 rounded-full", groupColor(group.name)) }), _jsx("span", { className: "min-w-0 flex-1 truncate text-xs font-medium", children: group.name }), _jsx("span", { className: "text-[11px] text-muted-foreground", children: formatTokens(group.tokens) })] }), !isCollapsed && (_jsx("div", { className: "pb-1", children: group.segments
-                                                .slice()
-                                                .sort((a, b) => b.tokenCount - a.tokenCount)
-                                                .map((segment) => (_jsx(ContextSegmentRow, { segment: segment, advisory: !manifest.enforceable, onPin: () => onPin(segment.segmentId), onEvict: () => onEvict(segment.segmentId), onRestore: () => onRestore(segment.segmentId) }, segment.segmentId))) }))] }, group.name));
-                            })] }))] })] }));
+            }),
+        } }));
 }
 //# sourceMappingURL=ContextXRayPanel.js.map

package/dist/client/context-xray/ContextXRayPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextXRayPanel.js","sourceRoot":"","sources":["../../../src/client/context-xray/ContextXRayPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n IconChartTreemap,\n IconChevronDown,\n IconChevronRight,\n IconLock,\n IconListDetails,\n} from \"@tabler/icons-react\";\nimport { useMemo, useState } from \"react\";\n\nimport type {\n ContextManifest,\n ContextManifestSegment,\n ContextManifestSystemSection,\n ContextSegmentStatus,\n} from \"../../shared/context-xray.js\";\nimport {\n manifestConversationTokens,\n manifestSystemTokens,\n} from \"../../shared/context-xray.js\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"../components/ui/tooltip.js\";\nimport { useT } from \"../i18n.js\";\nimport { cn } from \"../utils.js\";\nimport { ContextSegmentRow } from \"./ContextSegmentRow.js\";\nimport { ContextTreemap } from \"./ContextTreemap.js\";\nimport { formatTokens, groupColor, resolveContextWindow } from \"./format.js\";\n\ninterface Group {\n name: string;\n tokens: number;\n segments: ContextManifestSegment[];\n}\n\nfunction applyOptimisticStatus(\n segments: ContextManifestSegment[],\n optimistic: Map<string, ContextSegmentStatus>,\n): ContextManifestSegment[] {\n if (optimistic.size === 0) return segments;\n return segments.map((segment) => {\n const status = optimistic.get(segment.segmentId);\n return status ? { ...segment, status } : segment;\n });\n}\n\nfunction groupedSegments(segments: ContextManifestSegment[]): Group[] {\n const map = new Map<string, Group>();\n for (const segment of segments) {\n const groupName =\n segment.status === \"pinned\"\n ? \"Pinned\"\n : segment.status === \"evicted\"\n ? \"Evicted\"\n : segment.group;\n const group = map.get(groupName) ?? {\n name: groupName,\n tokens: 0,\n segments: [],\n };\n group.tokens += segment.tokenCount;\n group.segments.push(segment);\n map.set(groupName, group);\n }\n const order = [\n \"Pinned\",\n \"Tool results\",\n \"Files read\",\n \"Conversation\",\n \"Thinking\",\n \"Evicted\",\n ];\n return [...map.values()].sort((a, b) => {\n const ai = order.indexOf(a.name);\n const bi = order.indexOf(b.name);\n if (ai >= 0 \|\| bi >= 0) return (ai < 0 ? 99 : ai) - (bi < 0 ? 99 : bi);\n return b.tokens - a.tokens;\n });\n}\n\nconst GOVERNANCE_ORDER = [\"required\", \"inherited\", \"user\"] as const;\n\nfunction governanceLabel(\n governance: ContextManifestSystemSection[\"governance\"],\n t: (key: string, options?: Record<string, unknown>) => string,\n): string {\n switch (governance) {\n case \"required\":\n return t(\"contextXray.governance.required\", {\n defaultValue: \"Required\",\n });\n case \"inherited\":\n return t(\"contextXray.governance.inherited\", {\n defaultValue: \"Inherited\",\n });\n case \"user\":\n return t(\"contextXray.governance.user\", {\n defaultValue: \"Your context\",\n });\n }\n}\n\nfunction sourceLabel(section: ContextManifestSystemSection): string {\n return (\n section.sourceRef?.path ??\n section.sourceRef?.resourceId ??\n section.sourceRef?.scope ??\n \"framework\"\n );\n}\n\nfunction SystemSectionRow({\n section,\n totalTokens,\n}: {\n section: ContextManifestSystemSection;\n totalTokens: number;\n}) {\n const share =\n totalTokens > 0 ? Math.round((section.tokenCount / totalTokens) * 100) : 0;\n return (\n <div className=\"flex min-h-12 items-start gap-2 rounded-sm px-2 py-1.5\">\n <span className=\"mt-1 flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground\">\n <IconLock className=\"h-3.5 w-3.5\" />\n </span>\n <div className=\"min-w-0 flex-1\">\n <div className=\"truncate text-[13px] font-medium leading-5 text-foreground\">\n {section.label}\n </div>\n <div className=\"truncate text-[11px] text-muted-foreground\">\n {sourceLabel(section)} · {formatTokens(section.tokenCount)} tokens ·{\" \"}\n {share}%{section.tokenMethod === \"estimate\" ? \" · estimated\" : \"\"}\n </div>\n {section.preview ? (\n <div className=\"mt-0.5 line-clamp-2 text-[11px] text-muted-foreground/80\">\n {section.preview}\n </div>\n ) : null}\n </div>\n </div>\n );\n}\n\nexport function ContextXRayPanel({\n manifest,\n optimistic,\n onPin,\n onEvict,\n onRestore,\n}: {\n manifest: ContextManifest;\n optimistic: Map<string, ContextSegmentStatus>;\n onPin: (segmentId: string) => void;\n onEvict: (segmentId: string) => void;\n onRestore: (segmentId: string) => void;\n}) {\n const t = useT();\n const [mode, setMode] = useState<\"list\" \| \"map\">(\"list\");\n const [collapsed, setCollapsed] = useState<Set<string>>(new Set());\n const segments = useMemo(\n () => applyOptimisticStatus(manifest.segments, optimistic),\n [manifest.segments, optimistic],\n );\n const groups = useMemo(() => groupedSegments(segments), [segments]);\n const systemSections = manifest.systemSections ?? [];\n const systemGroups = useMemo(() => {\n const grouped = new Map<\n ContextManifestSystemSection[\"governance\"],\n ContextManifestSystemSection[]\n >();\n for (const section of systemSections) {\n const list = grouped.get(section.governance) ?? [];\n list.push(section);\n grouped.set(section.governance, list);\n }\n return GOVERNANCE_ORDER.flatMap((governance) => {\n const sections = grouped.get(governance);\n return sections && sections.length > 0\n ? [\n {\n governance,\n sections,\n tokens: sections.reduce(\n (sum, section) => sum + section.tokenCount,\n 0,\n ),\n },\n ]\n : [];\n });\n }, [systemSections]);\n const contextWindow = resolveContextWindow(manifest.model);\n const pct = Math.min(\n 100,\n Math.round((manifest.totalTokens / contextWindow) * 100),\n );\n const headroom = Math.max(0, contextWindow - manifest.totalTokens);\n const pinned = segments.filter((s) => s.status === \"pinned\").length;\n const evicted = segments.filter((s) => s.status === \"evicted\").length;\n const systemTokens = manifestSystemTokens(manifest);\n const conversationTokens = manifestConversationTokens(manifest);\n const details = [\n `${formatTokens(headroom)} free`,\n systemTokens > 0 ? `${formatTokens(systemTokens)} system` : null,\n `${formatTokens(conversationTokens)} conversation`,\n pinned > 0 ? `${pinned} pinned` : null,\n evicted > 0 ? `${evicted} evicted` : null,\n manifest.tokenCountMethod === \"estimate\" ? \"estimated\" : null,\n !manifest.enforceable ? \"advisory\" : null,\n ].filter((item): item is string => Boolean(item));\n\n return (\n <div className=\"flex max-h-[min(72vh,520px)] flex-col\">\n <div className=\"border-b border-border/60 px-3 py-2.5\">\n <div className=\"flex items-center justify-between gap-3\">\n <h2 className=\"min-w-0 truncate text-sm font-medium text-foreground\">\n Context X-Ray\n </h2>\n <div className=\"shrink-0 text-xs tabular-nums text-muted-foreground\">\n {formatTokens(manifest.totalTokens)} · {pct}%\n </div>\n </div>\n <div className=\"mt-2 h-1 overflow-hidden rounded-full bg-muted/70\">\n <div\n className=\"h-full rounded-full bg-foreground origin-left transition-transform duration-200\"\n style={{\n transform: `scaleX(${Math.min(1, pct / 100)})`,\n width: \"100%\",\n }}\n />\n </div>\n <div className=\"mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-muted-foreground\">\n {details.map((detail) => (\n <span key={detail}>{detail}</span>\n ))}\n {manifest.reclaimedTokens > 0 && (\n <span className=\"font-medium text-emerald-600 dark:text-emerald-400\">\n -{formatTokens(manifest.reclaimedTokens)}\n </span>\n )}\n </div>\n </div>\n\n <div className=\"overflow-y-auto px-2 py-2\">\n <div className=\"mb-1 flex items-center justify-end\">\n <div className=\"inline-flex rounded-md bg-muted/40 p-0.5\">\n <Tooltip>\n <TooltipTrigger asChild>\n <button\n type=\"button\"\n onClick={() => setMode(\"list\")}\n aria-label=\"Show context list\"\n className={cn(\n \"flex size-7 cursor-pointer items-center justify-center rounded text-muted-foreground\",\n mode === \"list\"\n ? \"bg-background text-foreground shadow-sm\"\n : \"hover:text-foreground\",\n )}\n >\n <IconListDetails className=\"h-3.5 w-3.5\" />\n </button>\n </TooltipTrigger>\n <TooltipContent>List</TooltipContent>\n </Tooltip>\n <Tooltip>\n <TooltipTrigger asChild>\n <button\n type=\"button\"\n onClick={() => setMode(\"map\")}\n aria-label=\"Show context map\"\n className={cn(\n \"flex size-7 cursor-pointer items-center justify-center rounded text-muted-foreground\",\n mode === \"map\"\n ? \"bg-background text-foreground shadow-sm\"\n : \"hover:text-foreground\",\n )}\n >\n <IconChartTreemap className=\"h-3.5 w-3.5\" />\n </button>\n </TooltipTrigger>\n <TooltipContent>Map</TooltipContent>\n </Tooltip>\n </div>\n </div>\n\n {mode === \"map\" ? (\n <ContextTreemap\n segments={segments}\n systemSections={systemSections}\n onSelect={(segmentId) => {\n const segment = segments.find((s) => s.segmentId === segmentId);\n if (segment) setCollapsed(new Set());\n }}\n />\n ) : (\n <div className=\"divide-y divide-border/60\">\n {systemGroups.length > 0 && (\n <div>\n <div className=\"px-1.5 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground\">\n {t(\"contextXray.systemOrdered\", {\n defaultValue: \"System · ordered, not evictable\",\n })}\n </div>\n {systemGroups.map((group) => {\n const groupKey = `system:${group.governance}`;\n const isCollapsed = collapsed.has(groupKey);\n return (\n <div key={groupKey}>\n <button\n type=\"button\"\n onClick={() => {\n setCollapsed((prev) => {\n const next = new Set(prev);\n if (next.has(groupKey)) next.delete(groupKey);\n else next.add(groupKey);\n return next;\n });\n }}\n className=\"flex w-full cursor-pointer items-center gap-2 rounded-sm px-1.5 py-2 text-left hover:bg-accent/35\"\n >\n {isCollapsed ? (\n <IconChevronRight className=\"h-3.5 w-3.5 text-muted-foreground\" />\n ) : (\n <IconChevronDown className=\"h-3.5 w-3.5 text-muted-foreground\" />\n )}\n <IconLock className=\"h-3 w-3 text-muted-foreground\" />\n <span className=\"min-w-0 flex-1 truncate text-xs font-medium\">\n {governanceLabel(group.governance, t)}\n </span>\n <span className=\"text-[11px] text-muted-foreground\">\n {formatTokens(group.tokens)} ·{\" \"}\n {manifest.totalTokens > 0\n ? Math.round(\n (group.tokens / manifest.totalTokens) * 100,\n )\n : 0}\n %\n </span>\n </button>\n {!isCollapsed && (\n <div className=\"pb-1\">\n {group.sections\n .slice()\n .sort((a, b) => b.tokenCount - a.tokenCount)\n .map((section) => (\n <SystemSectionRow\n key={section.segmentId}\n section={section}\n totalTokens={manifest.totalTokens}\n />\n ))}\n </div>\n )}\n </div>\n );\n })}\n </div>\n )}\n {groups.map((group) => {\n const isCollapsed = collapsed.has(group.name);\n return (\n <div key={group.name}>\n <button\n type=\"button\"\n onClick={() => {\n setCollapsed((prev) => {\n const next = new Set(prev);\n if (next.has(group.name)) next.delete(group.name);\n else next.add(group.name);\n return next;\n });\n }}\n className=\"flex w-full cursor-pointer items-center gap-2 rounded-sm px-1.5 py-2 text-left hover:bg-accent/35\"\n >\n {isCollapsed ? (\n <IconChevronRight className=\"h-3.5 w-3.5 text-muted-foreground\" />\n ) : (\n <IconChevronDown className=\"h-3.5 w-3.5 text-muted-foreground\" />\n )}\n <span\n className={cn(\n \"h-2 w-2 rounded-full\",\n groupColor(group.name),\n )}\n />\n <span className=\"min-w-0 flex-1 truncate text-xs font-medium\">\n {group.name}\n </span>\n <span className=\"text-[11px] text-muted-foreground\">\n {formatTokens(group.tokens)}\n </span>\n </button>\n {!isCollapsed && (\n <div className=\"pb-1\">\n {group.segments\n .slice()\n .sort((a, b) => b.tokenCount - a.tokenCount)\n .map((segment) => (\n <ContextSegmentRow\n key={segment.segmentId}\n segment={segment}\n advisory={!manifest.enforceable}\n onPin={() => onPin(segment.segmentId)}\n onEvict={() => onEvict(segment.segmentId)}\n onRestore={() => onRestore(segment.segmentId)}\n />\n ))}\n </div>\n )}\n </div>\n );\n })}\n </div>\n )}\n </div>\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"ContextXRayPanel.js","sourceRoot":"","sources":["../../../src/client/context-xray/ContextXRayPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAMxE,OAAO,EACL,0BAA0B,EAC1B,oBAAoB,GACrB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAEnD,MAAM,UAAU,gBAAgB,CAAC,EAC/B,QAAQ,EACR,UAAU,EACV,KAAK,EACL,OAAO,EACP,SAAS,GAOV;IACC,MAAM,CAAC,GAAG,IAAI,EAAE,CAAC;IACjB,OAAO,CACL,KAAC,oBAAoB,IACnB,QAAQ,EAAE;YACR,GAAG,QAAQ;YACX,YAAY,EAAE,oBAAoB,CAAC,QAAQ,CAAC;YAC5C,kBAAkB,EAAE,0BAA0B,CAAC,QAAQ,CAAC;SACzD,EACD,aAAa,EAAE,oBAAoB,CAAC,QAAQ,CAAC,KAAK,CAAC,EACnD,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,CAAC,CAAC,uBAAuB,EAAE;YACrC,YAAY,EAAE,eAAe;SAC9B,CAAC,EACF,kBAAkB,EAAE,CAAC,CAAC,2BAA2B,EAAE;YACjD,YAAY,EAAE,iCAAiC;SAChD,CAAC,EACF,gBAAgB,EAAE;YAChB,QAAQ,EAAE,CAAC,CAAC,iCAAiC,EAAE;gBAC7C,YAAY,EAAE,UAAU;aACzB,CAAC;YACF,SAAS,EAAE,CAAC,CAAC,kCAAkC,EAAE;gBAC/C,YAAY,EAAE,WAAW;aAC1B,CAAC;YACF,IAAI,EAAE,CAAC,CAAC,6BAA6B,EAAE;gBACrC,YAAY,EAAE,cAAc;aAC7B,CAAC;SACH,GACD,CACH,CAAC;AACJ,CAAC","sourcesContent":["import { ContextXRayPanelView } from \"@agent-native/toolkit/context-ui\";\n\nimport type {\n ContextManifest,\n ContextSegmentStatus,\n} from \"../../shared/context-xray.js\";\nimport {\n manifestConversationTokens,\n manifestSystemTokens,\n} from \"../../shared/context-xray.js\";\nimport { useT } from \"../i18n.js\";\nimport { resolveContextWindow } from \"./format.js\";\n\nexport function ContextXRayPanel({\n manifest,\n optimistic,\n onPin,\n onEvict,\n onRestore,\n}: {\n manifest: ContextManifest;\n optimistic: Map<string, ContextSegmentStatus>;\n onPin: (segmentId: string) => void;\n onEvict: (segmentId: string) => void;\n onRestore: (segmentId: string) => void;\n}) {\n const t = useT();\n return (\n <ContextXRayPanelView\n manifest={{\n ...manifest,\n systemTokens: manifestSystemTokens(manifest),\n conversationTokens: manifestConversationTokens(manifest),\n }}\n contextWindow={resolveContextWindow(manifest.model)}\n optimistic={optimistic}\n onPin={onPin}\n onEvict={onEvict}\n onRestore={onRestore}\n titleLabel={t(\"contextXray.pageTitle\", {\n defaultValue: \"Context X-Ray\",\n })}\n systemOrderedLabel={t(\"contextXray.systemOrdered\", {\n defaultValue: \"System · ordered, not evictable\",\n })}\n governanceLabels={{\n required: t(\"contextXray.governance.required\", {\n defaultValue: \"Required\",\n }),\n inherited: t(\"contextXray.governance.inherited\", {\n defaultValue: \"Inherited\",\n }),\n user: t(\"contextXray.governance.user\", {\n defaultValue: \"Your context\",\n }),\n }}\n />\n );\n}\n"]}

package/dist/client/context-xray/SegmentProvenancePopover.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SegmentProvenancePopover.d.ts","sourceRoot":"","sources":["../../../src/client/context-xray/SegmentProvenancePopover.tsx"],"names":[],"mappings":"~~AAAA~~,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;~~AAQ3E~~,wBAAgB,wBAAwB,CAAC,EACvC,OAAO,EACP,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,sBAAsB,CAAC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,~~qBAiDA~~"}
1	+ {"version":3,"file":"SegmentProvenancePopover.d.ts","sourceRoot":"","sources":["../../../src/client/context-xray/SegmentProvenancePopover.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AAE3E,wBAAgB,wBAAwB,CAAC,EACvC,OAAO,EACP,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,sBAAsB,CAAC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAMA"}

package/dist/client/context-xray/SegmentProvenancePopover.js CHANGED Viewed

@@ -1,7 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Popover, PopoverContent, PopoverTrigger, } from "../components/ui/popover.js";
-import { formatTokens, statusLabel } from "./format.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SegmentProvenancePopoverView } from "@agent-native/toolkit/context-ui";
 export function SegmentProvenancePopover({ segment, children, }) {
-    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: children }), _jsx(PopoverContent, { align: "start", className: "w-80 p-3", children: _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { children: [_jsx("div", { className: "text-[11px] font-medium uppercase text-muted-foreground", children: "Segment" }), _jsx("div", { className: "mt-0.5 break-words text-xs text-foreground", children: segment.label })] }), _jsxs("div", { className: "grid grid-cols-2 gap-2 text-[11px] text-muted-foreground", children: [_jsxs("div", { children: [_jsx("span", { className: "block font-medium text-foreground", children: formatTokens(segment.tokenCount) }), "tokens", segment.tokenMethod === "estimate" ? " estimated" : ""] }), _jsxs("div", { children: [_jsx("span", { className: "block font-medium text-foreground", children: statusLabel(segment) }), "current status"] }), _jsxs("div", { children: [_jsx("span", { className: "block font-medium text-foreground", children: segment.msgIndex ?? "-" }), "message index"] }), _jsxs("div", { children: [_jsx("span", { className: "block font-medium text-foreground", children: segment.partIndex ?? "-" }), "part index"] })] }), segment.protected && (_jsx("div", { className: "rounded-md border border-border bg-muted/40 px-2 py-1.5 text-[11px] text-muted-foreground", children: "This segment is part of the active turn and cannot be evicted yet." }))] }) })] }));
+    return (_jsx(SegmentProvenancePopoverView, { segment: segment, children: children }));
 }
 //# sourceMappingURL=SegmentProvenancePopover.js.map

package/dist/client/context-xray/SegmentProvenancePopover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SegmentProvenancePopover.js","sourceRoot":"","sources":["../../../src/client/context-xray/SegmentProvenancePopover.tsx"],"names":[],"mappings":";~~AAGA~~,OAAO,~~EACL,OAAO,EACP,cAAc,EACd,cAAc,GACf,MAAM,6BAA6B,CAAC;AACrC,OAAO,~~EAAE,~~YAAY~~,EAAE,~~WAAW,EAAE,~~MAAM,~~aAAa~~,CAAC;~~AAExD~~,MAAM,UAAU,wBAAwB,CAAC,EACvC,OAAO,EACP,QAAQ,GAIT;IACC,OAAO,CACL,~~MAAC,OAAO,eACN,~~KAAC,~~cAAc~~,IAAC,OAAO,kBAAE,QAAQ,GAAkB,EACnD,KAAC,cAAc,IAAC,KAAK,EAAC,OAAO,EAAC,SAAS,EAAC,UAAU,YAChD,eAAK,SAAS,EAAC,WAAW,aACxB,0BACE,cAAK,SAAS,EAAC,yDAAyD,wBAElE,EACN,cAAK,SAAS,EAAC,4CAA4C,YACxD,OAAO,CAAC,KAAK,GACV,IACF,EACN,eAAK,SAAS,EAAC,0DAA0D,aACvE,0BACE,eAAM,SAAS,EAAC,mCAAmC,YAChD,YAAY,CAAC,OAAO,CAAC,UAAU,CAAC,GAC5B,YACA,OAAO,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,~~IACzD,EACN,0BACE,eAAM,SAAS,EAAC,mCAAmC,YAChD,WAAW,CAAC,~~OAAO,~~CAAC~~,~~GAChB,sBAEH,EACN,0BACE,eAAM,SAAS,EAAC,mCAAmC,YAChD,OAAO,CAAC,~~QAAQ,~~IAAI~~,~~GAAG~~,~~GACnB,qBAEH,EACN,0BACE,eAAM,SAAS,EAAC,mCAAmC,YAChD,OAAO,~~CAAC~~,SAAS,IAAI,GAAG,GACpB,kBAEH,IACF,EACL,OAAO,CAAC,SAAS,IAAI,CACpB,cAAK,SAAS,EAAC,2FAA2F,mFAEpG,CACP,IACG,GACS,IACT,CACX,CAAC~~;AACJ,CAAC","sourcesContent":["import ~~type React from \"react\";\n\nimport type~~ { ~~ContextManifestSegment~~ } from \"~~../../shared~~/context-~~xray.js~~\";\nimport ~~{\n Popover,\n PopoverContent,\n PopoverTrigger,\n}~~ from \"~~../components/ui/popover.js~~\";\nimport { ~~formatTokens,~~ ~~statusLabel~~ } from \"~~./format~~.js\";\n\nexport function SegmentProvenancePopover({\n segment,\n children,\n}: {\n segment: ContextManifestSegment;\n children: React.ReactNode;\n}) {\n return (\n <~~Popover>\n <PopoverTrigger~~ asChild>{children}</PopoverTrigger>\n <PopoverContent align=\"start\" className=\"w-80 p-3\">\n <div className=\"space-y-2\">\n <div>\n <div className=\"text-[11px] font-medium uppercase text-muted-foreground\">\n Segment\n </div>\n <div className=\"mt-0.5 break-words text-xs text-foreground\">\n {segment.label}\n </div>\n </div>\n <div className=\"grid grid-cols-2 gap-2 text-[11px] text-muted-foreground\">\n <div>\n <span className=\"block font-medium text-foreground\">\n {~~formatTokens(~~segment~~.tokenCount)~~}~~\n </span~~>\n ~~tokens~~{~~segment.tokenMethod === \"estimate\" ? \" estimated\" : \"\"~~}\n </div>\n <div>\n <span className=\"block font-medium text-foreground\">\n {statusLabel(segment)}\n </span>\n current status\n </div>\n <div>\n <span className=\"block font-medium text-foreground\">\n {segment.msgIndex ?? \"-\"}\n </span>\n message index\n </div>\n <div>\n <span className=\"block font-medium text-foreground\">\n {segment.partIndex ?? \"-\"}\n </span>\n part index\n </div>\n </div>\n {segment.protected && (\n <div className=\"rounded-md border border-border bg-muted/40 px-2 py-1.5 text-[11px] text-muted-foreground\">\n This segment is part of the active turn and cannot be evicted yet.\n </div>\n )}\n </div>\n </PopoverContent>\n </~~Popover~~>\n );\n}\n"]}
1	+ {"version":3,"file":"SegmentProvenancePopover.js","sourceRoot":"","sources":["../../../src/client/context-xray/SegmentProvenancePopover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,kCAAkC,CAAC;AAKhF,MAAM,UAAU,wBAAwB,CAAC,EACvC,OAAO,EACP,QAAQ,GAIT;IACC,OAAO,CACL,KAAC,4BAA4B,IAAC,OAAO,EAAE,OAAO,YAC3C,QAAQ,GACoB,CAChC,CAAC;AACJ,CAAC","sourcesContent":["import { SegmentProvenancePopoverView } from \"@agent-native/toolkit/context-ui\";\nimport type React from \"react\";\n\nimport type { ContextManifestSegment } from \"../../shared/context-xray.js\";\n\nexport function SegmentProvenancePopover({\n segment,\n children,\n}: {\n segment: ContextManifestSegment;\n children: React.ReactNode;\n}) {\n return (\n <SegmentProvenancePopoverView segment={segment}>\n {children}\n </SegmentProvenancePopoverView>\n );\n}\n"]}

package/dist/client/context-xray/format.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import type { ContextManifestSegment } from "../../shared/context-xray.js";
 /**
  * Fallback context-window limit used when no model ID is available.
  * Kept as a named export so existing callers that import this constant
@@ -12,7 +11,4 @@ export declare const CONTEXT_XRAY_MODEL_LIMIT = 200000;
  */
 export declare function resolveContextWindow(modelId?: string | null): number;
 export declare function formatTokens(tokens: number | undefined): string;
-export declare function statusLabel(segment: ContextManifestSegment): string;
-export declare function groupColor(group: string): string;
-export declare function groupFill(group: string): string;
 //# sourceMappingURL=format.d.ts.map