@agent-native/core 0.109.3 → 0.109.4

package/corpus/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.109.3",
+  "version": "0.109.4",
   "description": "Framework for agent-native application development — where AI agents and UI share SQL state, actions, and context",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {
@@ -31,6 +31,7 @@
   "type": "module",
   "sideEffects": [
     "*.css",
+    "dist/client/index.js",
     "dist/client/chat/widgets/builtin-tool-renderers.js",
     "dist/client/dev-overlay/builtins.js"
   ],
@@ -280,12 +281,12 @@
     "@mozilla/readability": "0.6.0",
     "@neondatabase/serverless": "^1.1.0",
     "@opentelemetry/sdk-trace-base": "^2.8.0",
-    "@radix-ui/react-dialog": "1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-hover-card": "^1.1.15",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-tooltip": "^1.2.8",
+    "@radix-ui/react-dialog": "catalog:",
+    "@radix-ui/react-dropdown-menu": "catalog:",
+    "@radix-ui/react-hover-card": "catalog:",
+    "@radix-ui/react-popover": "catalog:",
+    "@radix-ui/react-select": "catalog:",
+    "@radix-ui/react-tooltip": "catalog:",
     "@react-router/dev": "^8.1.0",
     "@react-router/fs-routes": "^8.1.0",
     "@resvg/resvg-js": "^2.6.2",
@@ -295,63 +296,63 @@
     "@shadcn/react": "^0.2.0",
     "@standard-schema/spec": "^1.1.0",
     "@tanstack/react-table": "^8.21.3",
-    "@tiptap/core": "3.27.1",
-    "@tiptap/extension-code-block-lowlight": "3.27.1",
-    "@tiptap/extension-collaboration": "3.27.1",
-    "@tiptap/extension-collaboration-caret": "3.27.1",
-    "@tiptap/extension-image": "3.27.1",
-    "@tiptap/extension-link": "3.27.1",
-    "@tiptap/extension-placeholder": "3.27.1",
-    "@tiptap/extension-table": "3.27.1",
-    "@tiptap/extension-table-cell": "3.27.1",
-    "@tiptap/extension-table-header": "3.27.1",
-    "@tiptap/extension-table-row": "3.27.1",
-    "@tiptap/extension-task-item": "3.27.1",
-    "@tiptap/extension-task-list": "3.27.1",
-    "@tiptap/pm": "3.27.1",
-    "@tiptap/react": "3.27.1",
-    "@tiptap/starter-kit": "3.27.1",
-    "@tiptap/y-tiptap": "^3.0.5",
+    "@tiptap/core": "catalog:",
+    "@tiptap/extension-code-block-lowlight": "catalog:",
+    "@tiptap/extension-collaboration": "catalog:",
+    "@tiptap/extension-collaboration-caret": "catalog:",
+    "@tiptap/extension-image": "catalog:",
+    "@tiptap/extension-link": "catalog:",
+    "@tiptap/extension-placeholder": "catalog:",
+    "@tiptap/extension-table": "catalog:",
+    "@tiptap/extension-table-cell": "catalog:",
+    "@tiptap/extension-table-header": "catalog:",
+    "@tiptap/extension-table-row": "catalog:",
+    "@tiptap/extension-task-item": "catalog:",
+    "@tiptap/extension-task-list": "catalog:",
+    "@tiptap/pm": "catalog:",
+    "@tiptap/react": "catalog:",
+    "@tiptap/starter-kit": "catalog:",
+    "@tiptap/y-tiptap": "catalog:",
     "@uiw/react-codemirror": "^4.25.10",
     "ajv": "^8.20.0",
     "better-auth": "1.6.16",
     "better-sqlite3": "^12.8.0",
     "botframework-connector": "^4.23.3",
-    "clsx": "^2.1.1",
+    "clsx": "catalog:",
     "cron-parser": "^5.5.0",
     "diff-match-patch": "^1.0.5",
     "dotenv": "^17.2.1",
     "drizzle-orm": "^0.45.2",
     "h3": "^2.0.1-rc.20",
-    "highlight.js": "^11.11.1",
+    "highlight.js": "catalog:",
     "i18next": "26.3.1",
     "isbot": "^5",
     "jiti": "^2.6.1",
     "jose": "^6.2.2",
     "linkedom": "0.18.12",
-    "lowlight": "^3.3.0",
+    "lowlight": "catalog:",
     "minimatch": "^10.0.0",
     "nanoid": "^5.1.9",
-    "next-themes": "^0.4.6",
+    "next-themes": "catalog:",
     "nf3": "0.3.17",
     "nitro": "3.0.260415-beta",
     "p-limit": "^7.3.0",
     "prettier": "^3.8.3",
     "react-i18next": "17.0.8",
     "react-markdown": "^10.1.0",
-    "recharts": "^3.8.1",
+    "recharts": "catalog:",
     "remark-gfm": "^4.0.1",
     "roughjs": "4.6.6",
     "safe-regex2": "5.1.1",
     "shiki": "^4.0.2",
-    "sonner": "^2.0.7",
-    "tailwind-merge": "^3.5.0",
-    "tiptap-markdown": "^0.9.0",
+    "sonner": "catalog:",
+    "tailwind-merge": "catalog:",
+    "tiptap-markdown": "catalog:",
     "turndown": "7.2.4",
     "tw-animate-css": "1.4.0",
     "tweetnacl": "^1.0.3",
-    "y-protocols": "^1.0.7",
-    "yjs": "^13.6.31",
+    "y-protocols": "catalog:",
+    "yjs": "catalog:",
     "zod": "^4.3.6"
   },
   "devDependencies": {

package/corpus/core/src/cli/create.ts

@@ -1,5 +1,6 @@
 import { execFile, execFileSync } from "child_process";
 import fs from "fs";
+import os from "os";
 import path from "path";
 import { fileURLToPath, pathToFileURL } from "url";
 
@@ -44,6 +45,7 @@ const FIRST_PARTY_TARBALL_SYMLINK_EXCLUDES = [
   "*/CLAUDE.md",
   "*/.claude/skills",
 ];
+const localPackageTarballs = new Map<string, string>();
 
 /**
  * Tagged error for input that fails CLI-level validation (repo names, app
@@ -903,6 +905,40 @@ function findLocalPackage(name: string): string | undefined {
   return undefined;
 }
 
+/**
+ * Pack a local framework package before linking it into a generated app.
+ * Raw file: dependencies retain workspace-only catalog references, while a
+ * packed artifact has the publish-ready manifest that consumers receive.
+ */
+function localPackageTarball(packageDir: string): string {
+  const cached = localPackageTarballs.get(packageDir);
+  if (cached) return cached;
+
+  const packDir = fs.mkdtempSync(
+    path.join(os.tmpdir(), "agent-native-local-package-"),
+  );
+  const pnpm = process.platform === "win32" ? "pnpm.cmd" : "pnpm";
+  execFileSync(pnpm, ["pack", "--pack-destination", packDir], {
+    cwd: packageDir,
+    encoding: "utf-8",
+    env: { ...process.env, npm_config_ignore_scripts: "true" },
+    stdio: "pipe",
+  });
+
+  const tarballs = fs
+    .readdirSync(packDir)
+    .filter((entry) => entry.endsWith(".tgz"));
+  if (tarballs.length !== 1) {
+    throw new Error(
+      `Expected one packed local package artifact in ${packDir}, found ${tarballs.length}.`,
+    );
+  }
+
+  const tarball = pathToFileURL(path.join(packDir, tarballs[0]!)).href;
+  localPackageTarballs.set(packageDir, tarball);
+  return tarball;
+}
+
 /**
  * Scaffold internal workspace packages required by the selected templates.
  * Deduplicates so each package is only copied once even if multiple
@@ -1691,7 +1727,7 @@ function fixWebManifestName(
 function getCoreDependencyVersion(): string {
   if (process.env.AGENT_NATIVE_CREATE_USE_LOCAL_CORE === "1") {
     const localCore = findLocalPackage("core");
-    if (localCore) return pathToFileURL(localCore).href;
+    if (localCore) return localPackageTarball(localCore);
   }
 
   // Generated apps must install before the current package version is
@@ -1713,7 +1749,7 @@ function getDispatchDependencyVersion(): string {
 function getToolkitDependencyVersion(): string {
   if (process.env.AGENT_NATIVE_CREATE_USE_LOCAL_CORE === "1") {
     const localToolkit = findLocalPackage("toolkit");
-    if (localToolkit) return pathToFileURL(localToolkit).href;
+    if (localToolkit) return localPackageTarball(localToolkit);
   }
 
   return "latest";
@@ -1722,7 +1758,7 @@ function getToolkitDependencyVersion(): string {
 function localToolkitOverride(): string | null {
   if (process.env.AGENT_NATIVE_CREATE_USE_LOCAL_CORE !== "1") return null;
   const localToolkit = findLocalPackage("toolkit");
-  return localToolkit ? pathToFileURL(localToolkit).href : null;
+  return localToolkit ? localPackageTarball(localToolkit) : null;
 }
 
 function localRecapCliOverride(): string | null {

package/corpus/core/src/cli/package-lifecycle.ts

@@ -139,6 +139,8 @@ function flagValue(args: string[], name: string): string | undefined {
 
 export function packageLifecycleUsage(): string {
   return [
+    "Install-on-demand Toolkit capability module lifecycle:",
+    "",
     "Usage:",
     "  agent-native package inspect <package> [--root <dir>] [--app <name>] [--json]",
     "  agent-native package add <package> [--root <dir>] [--app <name>] [--apply] [--json]",

package/corpus/core/src/cli/skills-content/visual-plan-skill.ts

@@ -290,6 +290,8 @@ folding framework chrome into the product UI.
   needs to operate the behavior. Keep the static wireframes in
   \`content.canvas\`, add the aligned functional prototype in
   \`content.prototype\`, and rely on the top visual tabs to switch between them.
+  When both surfaces are present, open the Wireframes tab by default; the
+  prototype remains available as the interactive follow-up view.
 - **Prototype-first** when the user asks to operate the UI or when interaction is
   the main question. Use \`create-prototype-plan\`, which still preserves static
   mocks where useful.

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}
+    />
   );
 }