@agent-native/core 0.109.3 → 0.110.0

package/corpus/core/src/client/chat/widgets/inline-extension-result.ts

@@ -0,0 +1,86 @@
+import { extensionPath } from "../../../extensions/path.js";
+import type { ToolRendererContext } from "../tool-render-registry.js";
+
+export interface InlineExtensionToolResult {
+  mode: "transient" | "persisted";
+  id: string;
+  name: string;
+  description?: string;
+  content?: string;
+  path?: string;
+  updatedAt?: string;
+  context?: Record<string, unknown>;
+  initialHeight?: number;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return !!value && typeof value === "object" && !Array.isArray(value);
+}
+
+function stringValue(value: unknown): string | undefined {
+  return typeof value === "string" && value.trim() ? value.trim() : undefined;
+}
+
+function recordValue(value: unknown): Record<string, unknown> | undefined {
+  return isRecord(value) ? value : undefined;
+}
+
+function initialHeightValue(value: unknown): number | undefined {
+  const height = Number(value);
+  if (!Number.isFinite(height) || height <= 0) return undefined;
+  return Math.min(Math.max(Math.round(height), 120), 1000);
+}
+
+function normalizeInlineExtension(
+  value: unknown,
+): InlineExtensionToolResult | null {
+  if (!isRecord(value)) return null;
+  const id = stringValue(value.id);
+  const name = stringValue(value.name);
+  if (!id || !name) return null;
+  const mode = value.mode === "transient" ? "transient" : "persisted";
+  const content = stringValue(value.content);
+  if (mode === "transient" && !content) return null;
+  return {
+    mode,
+    id,
+    name,
+    description: stringValue(value.description),
+    content,
+    path: stringValue(value.path),
+    updatedAt: stringValue(value.updatedAt),
+    context: recordValue(value.context),
+    initialHeight: initialHeightValue(value.initialHeight),
+  };
+}
+
+export function normalizeInlineExtensionToolResult(
+  context: ToolRendererContext,
+): InlineExtensionToolResult | null {
+  const result = context.resultJson;
+  if (!isRecord(result)) return null;
+
+  const inline = normalizeInlineExtension(result.inlineExtension);
+  if (inline) return inline;
+
+  if (isRecord(result.extension)) {
+    const id = stringValue(result.extension.id);
+    const name = stringValue(result.extension.name);
+    if (!id || !name) return null;
+    return {
+      mode: "persisted",
+      id,
+      name,
+      description: stringValue(result.extension.description),
+      path:
+        stringValue(result.extension.path) ??
+        stringValue(result.path) ??
+        extensionPath(id, name),
+      updatedAt: stringValue(result.extension.updatedAt),
+      context: recordValue(result.context),
+      initialHeight: initialHeightValue(result.initialHeight),
+    };
+  }
+
+  return null;
+}

package/corpus/core/src/client/client-bootstrap.ts

@@ -0,0 +1,7 @@
+import { ensureEmbedAuthFetchInterceptor } from "./embed-auth.js";
+import { installRouteChunkRecovery } from "./route-chunk-recovery.js";
+
+export function initializeAgentNativeClient(): void {
+  ensureEmbedAuthFetchInterceptor();
+  installRouteChunkRecovery();
+}

package/corpus/core/src/client/context-xray/ContextMeter.tsx

@@ -1,3 +1,4 @@
+import { ContextMeterView } from "@agent-native/toolkit/context-ui";
 import { lazy, Suspense, useEffect, useRef, useState } from "react";
 
 import type {
@@ -8,20 +9,8 @@ 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) => ({
@@ -29,40 +18,6 @@ const ContextXRayPanel = lazy(() =>
   })),
 );
 
-function ContextDonut({ pct, advisory }: { pct: number; advisory: boolean }) {
-  const radius = 7.5;
-  const circumference = 2 * Math.PI * radius;
-  const displayPct = Math.max(3, Math.min(100, pct));
-  const dashOffset = circumference - (displayPct / 100) * circumference;
-
-  return (
-    <span className="relative flex size-5 items-center justify-center">
-      <svg aria-hidden="true" viewBox="0 0 20 20" className="-rotate-90 size-5">
-        <circle
-          cx="10"
-          cy="10"
-          r={radius}
-          className="stroke-muted"
-          fill="none"
-          strokeWidth="3"
-        />
-        <circle
-          cx="10"
-          cy="10"
-          r={radius}
-          className={cn(advisory ? "stroke-amber-500" : "stroke-[#00B5FF]")}
-          fill="none"
-          strokeLinecap="round"
-          strokeWidth="3"
-          strokeDasharray={circumference}
-          strokeDashoffset={dashOffset}
-        />
-      </svg>
-      <span className="absolute size-2 rounded-full bg-background" />
-    </span>
-  );
-}
-
 export function ContextMeter({
   threadId,
   manifest: providedManifest,
@@ -106,15 +61,6 @@ export function ContextMeter({
   }, [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 ||
@@ -144,61 +90,35 @@ export function ContextMeter({
   };
 
   return (
-    <TooltipProvider delayDuration={200}>
-      <Popover open={open} onOpenChange={setOpen}>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <PopoverTrigger asChild>
-              <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",
-                )}
-              >
-                <ContextDonut pct={pct} advisory={!manifest.enforceable} />
-              </button>
-            </PopoverTrigger>
-          </TooltipTrigger>
-          <TooltipContent>
-            Context {pct}% · {formatTokens(manifest.totalTokens)}
-            {systemTokens > 0
-              ? ` (${formatTokens(systemTokens)} system + ${formatTokens(conversationTokens)} conversation)`
-              : ""}
-          </TooltipContent>
-        </Tooltip>
-        <PopoverContent
-          align="end"
-          side="top"
-          sideOffset={8}
-          className="w-[min(92vw,380px)] overflow-hidden border-border/70 p-0"
+    <ContextMeterView
+      manifest={{
+        ...manifest,
+        systemTokens: manifestSystemTokens(manifest),
+        conversationTokens: manifestConversationTokens(manifest),
+      }}
+      contextWindow={resolveContextWindow(manifest.model)}
+      open={open}
+      onOpenChange={setOpen}
+    >
+      {open ? (
+        <Suspense
+          fallback={
+            <div className="flex h-52 items-center justify-center text-xs text-muted-foreground">
+              Loading context view…
+            </div>
+          }
         >
-          {open ? (
-            <Suspense
-              fallback={
-                <div className="flex h-52 items-center justify-center text-xs text-muted-foreground">
-                  Loading context view…
-                </div>
-              }
-            >
-              <ContextXRayPanel
-                manifest={manifest}
-                optimistic={optimistic}
-                onPin={(segmentId) => mutateStatus(segmentId, "pinned", "pin")}
-                onEvict={(segmentId) =>
-                  mutateStatus(segmentId, "evicted", "evict")
-                }
-                onRestore={(segmentId) =>
-                  mutateStatus(segmentId, "active", "restore")
-                }
-              />
-            </Suspense>
-          ) : null}
-        </PopoverContent>
-      </Popover>
-    </TooltipProvider>
+          <ContextXRayPanel
+            manifest={manifest}
+            optimistic={optimistic}
+            onPin={(segmentId) => mutateStatus(segmentId, "pinned", "pin")}
+            onEvict={(segmentId) => mutateStatus(segmentId, "evicted", "evict")}
+            onRestore={(segmentId) =>
+              mutateStatus(segmentId, "active", "restore")
+            }
+          />
+        </Suspense>
+      ) : null}
+    </ContextMeterView>
   );
 }

package/corpus/core/src/client/context-xray/ContextSegmentRow.tsx

@@ -1,14 +1,6 @@
-import { IconLock, IconPin, IconRotate2, IconX } from "@tabler/icons-react";
+import { ContextSegmentRowView } from "@agent-native/toolkit/context-ui";
 
 import type { ContextManifestSegment } from "../../shared/context-xray.js";
-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";
 
 export function ContextSegmentRow({
   segment,
@@ -23,108 +15,13 @@ export function ContextSegmentRow({
   onEvict: () => void;
   onRestore: () => void;
 }) {
-  const disabled = segment.protected || segment.status === "evicted";
   return (
-    <div
-      tabIndex={0}
-      onKeyDown={(event) => {
-        if (event.key === "p") onPin();
-        if (event.key === "e" && !disabled) onEvict();
-        if (event.key === "u" && segment.status !== "active") onRestore();
-      }}
-      className={cn(
-        "group flex min-h-11 items-center gap-2 rounded-sm px-2 py-1.5 outline-none transition-colors hover:bg-accent/35 focus-visible:bg-accent/35 focus-visible:ring-1 focus-visible:ring-ring",
-        segment.status === "evicted" && "opacity-60",
-      )}
-    >
-      <SegmentProvenancePopover segment={segment}>
-        <button
-          type="button"
-          className="min-w-0 flex-1 text-left"
-          aria-label={`Inspect ${segment.label}`}
-        >
-          <div
-            className={cn(
-              "truncate text-[13px] font-medium leading-5 text-foreground",
-              segment.status === "evicted" && "line-through",
-            )}
-          >
-            {segment.label}
-          </div>
-          <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground">
-            <span>{formatTokens(segment.tokenCount)}</span>
-            {segment.tokenMethod === "estimate" && <span>~</span>}
-            <span>·</span>
-            <span>{statusLabel(segment)}</span>
-            {advisory && <span>· advisory</span>}
-          </div>
-        </button>
-      </SegmentProvenancePopover>
-      <div className="flex shrink-0 items-center gap-1 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100">
-        {segment.protected ? (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span className="flex size-6 items-center justify-center rounded-md text-muted-foreground">
-                <IconLock className="h-3.5 w-3.5" />
-              </span>
-            </TooltipTrigger>
-            <TooltipContent>Protected during active turn</TooltipContent>
-          </Tooltip>
-        ) : segment.status === "evicted" ||
-          segment.status === "summarized" ||
-          segment.status === "pinned" ? (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                type="button"
-                onClick={onRestore}
-                className="flex size-6 items-center justify-center rounded-md text-muted-foreground hover:bg-background hover:text-foreground"
-                aria-label={
-                  segment.status === "pinned"
-                    ? "Unpin segment"
-                    : "Restore segment"
-                }
-              >
-                <IconRotate2 className="h-3.5 w-3.5" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>
-              {segment.status === "pinned" ? "Unpin" : "Restore"}
-            </TooltipContent>
-          </Tooltip>
-        ) : (
-          <>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  type="button"
-                  onClick={onPin}
-                  className="flex size-6 items-center justify-center rounded-md text-muted-foreground hover:bg-background hover:text-foreground"
-                  aria-label="Pin segment"
-                >
-                  <IconPin className="h-3.5 w-3.5" />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent>Pin</TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  type="button"
-                  onClick={onEvict}
-                  className="flex size-6 items-center justify-center rounded-md text-muted-foreground hover:bg-background hover:text-destructive"
-                  aria-label="Evict segment"
-                >
-                  <IconX className="h-3.5 w-3.5" />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent>
-                {advisory ? "Record eviction intent" : "Evict"}
-              </TooltipContent>
-            </Tooltip>
-          </>
-        )}
-      </div>
-    </div>
+    <ContextSegmentRowView
+      segment={segment}
+      advisory={advisory}
+      onPin={onPin}
+      onEvict={onEvict}
+      onRestore={onRestore}
+    />
   );
 }

package/corpus/core/src/client/context-xray/ContextTreemap.tsx

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