@agent-native/core 0.79.26 → 0.80.0

package/corpus/core/src/client/blocks/library/wireframe.tsx

@@ -313,7 +313,7 @@ function WireframeStyleToggleButton() {
         event.stopPropagation();
         toggleWireframeStyle();
       }}
-      className="absolute right-2 top-2 z-30 inline-flex h-7 items-center gap-1 rounded-md border border-border/60 bg-background/90 px-2 text-xs font-medium text-muted-foreground opacity-0 shadow-sm backdrop-blur transition-[color,opacity] hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover/wireframe-artboard:opacity-100"
+      className="absolute right-2 top-2 z-30 inline-flex h-7 items-center gap-1 rounded-md border border-border/60 bg-background px-2 text-xs font-medium text-muted-foreground opacity-0 shadow-sm transition-[color,opacity] hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover/wireframe-artboard:opacity-100"
     >
       <IconPencil className="size-3.5" aria-hidden="true" />
       <span>{label}</span>
@@ -335,13 +335,19 @@ function HtmlArtboard({
   compact?: boolean;
 }) {
   const renderMode = data.renderMode ?? "wireframe";
+  const designMode = renderMode === "design";
   // Sanitize author HTML/CSS at the render point (defense-in-depth against stored
   // XSS). Self-contained in core via the shared block sanitizer (DOM-based in the
   // browser, regex fallback on the server) so the HTML mockup path renders in any
   // app without the host wiring a sanitizer hook.
   const safeHtml = useMemo(
-    () => renderWireframeIconHtml(sanitizeWireframeHtml(data.html)),
-    [data.html],
+    () =>
+      renderWireframeIconHtml(
+        sanitizeWireframeHtml(data.html, {
+          preserveThemeClasses: designMode,
+        }),
+      ),
+    [data.html, designMode],
   );
   const scopeId = useId().replace(/[^a-zA-Z0-9_-]/g, "");
   const scopedCss = useMemo(() => {

package/corpus/core/src/client/blocks/mdx.ts

@@ -206,6 +206,65 @@ export function createAttrReader(node: MdxJsxNode): BlockAttrReader {
   };
 }
 
+type MdxCodeNode = {
+  type?: unknown;
+  lang?: unknown;
+  value?: unknown;
+};
+
+function codeFenceFor(value: string): string {
+  const longestBacktickRun =
+    value.match(/`+/g)?.reduce((max, run) => Math.max(max, run.length), 0) ?? 0;
+  return "`".repeat(Math.max(3, longestBacktickRun + 1));
+}
+
+function codeFenceLang(value: unknown): string | undefined {
+  return typeof value === "string"
+    ? value.trim().split(/\s+/)[0]?.toLowerCase()
+    : undefined;
+}
+
+/**
+ * Convert named MDX child code fences into block data fields. This keeps source
+ * authoring normal Markdown/MDX while letting block specs opt into conventions
+ * such as "```html" -> data.html and "```css" -> data.css.
+ */
+export function childCodeFenceFields<TData extends object>(
+  childNodes: unknown[],
+  fieldsByLang: Record<string, keyof TData & string>,
+): Partial<TData> {
+  const out: Partial<TData> = {};
+  for (const node of childNodes as MdxCodeNode[]) {
+    if (!node || node.type !== "code" || typeof node.value !== "string") {
+      continue;
+    }
+    const field = fieldsByLang[codeFenceLang(node.lang) ?? ""];
+    if (field) {
+      (out as Record<string, string>)[field] = node.value;
+    }
+  }
+  return out;
+}
+
+/**
+ * Serialize selected string data fields as named child code fences. Uses a fence
+ * length that cannot be closed by the field body.
+ */
+export function serializeChildCodeFenceFields<TData extends object>(
+  data: TData,
+  fieldsByLang: Record<string, keyof TData & string>,
+): string {
+  const fences: string[] = [];
+  const record = data as Record<string, unknown>;
+  for (const [lang, field] of Object.entries(fieldsByLang)) {
+    const value = record[field];
+    if (typeof value !== "string" || value.length === 0) continue;
+    const fence = codeFenceFor(value);
+    fences.push(`${fence}${lang}\n${value.trimEnd()}\n${fence}`);
+  }
+  return fences.length ? `\n${fences.join("\n\n")}\n` : "";
+}
+
 /* -------------------------------------------------------------------------- */
 /* Registry serialize / parse                                                 */
 /* -------------------------------------------------------------------------- */
@@ -254,7 +313,9 @@ export function serializeSpecBlock(
 
   // Custom nested-MDX children (e.g. wireframe Screen/kit tree).
   if (spec.mdx.serializeChildren) {
-    return `<${tag}${base}${attrStr}>\n${spec.mdx.serializeChildren(block.data)}\n</${tag}>`;
+    const children = spec.mdx.serializeChildren(block.data);
+    if (!children.trim()) return `<${tag}${base}${attrStr} />`;
+    return `<${tag}${base}${attrStr}>\n${children}\n</${tag}>`;
   }
 
   // Prose children (rich-text, callout): body is a trimmed markdown string.

package/corpus/core/src/client/blocks/server.ts

@@ -36,6 +36,8 @@ export {
   jsonExpression,
   attributeValue,
   createAttrReader,
+  childCodeFenceFields,
+  serializeChildCodeFenceFields,
   serializeSpecBlock,
   parseSpecBlock,
   type MdxJsxNode,

package/corpus/core/src/client/blocks/types.ts

@@ -76,10 +76,11 @@ export interface BlockMdxConfig<TData> {
    */
   childrenField?: keyof TData & string;
   /**
-   * Opt-in custom children serializer for blocks whose internals are nested MDX
-   * components rather than a single markdown string (e.g. wireframe → Screen/kit
-   * primitives). When present it overrides `childrenField`. `serializeChildren`
-   * returns the raw inner MDX; `parseChildren` receives the child MDX AST nodes.
+   * Opt-in custom children serializer/parser for blocks whose internals are
+   * nested MDX components or named child code fences rather than a single
+   * markdown string. When `serializeChildren` is present it overrides
+   * `childrenField`. `parseChildren` may also be used as a parse-only adapter
+   * for backward-compatible child forms.
    */
   serializeChildren?: (data: TData) => string;
   parseChildren?: (childNodes: unknown[], idContext: string) => Partial<TData>;

package/corpus/core/src/client/chat/message-components.tsx

@@ -37,7 +37,7 @@ import {
   IconPencil,
   IconLoader2,
 } from "@tabler/icons-react";
-import React, { useState, useEffect, useCallback, useRef, useId } from "react";
+import React, { useState, useEffect, useCallback, useRef } from "react";
 
 import { getActiveRun } from "../active-run-state.js";
 import { agentNativePath } from "../api-path.js";
@@ -952,14 +952,6 @@ export function RunningActivityStatus({ label }: { label: string }) {
 export function ThinkingIndicator({
   label = "Thinking",
 }: { label?: string } = {}) {
-  const reactId = useId().replace(/:/g, "");
-  const maskId = `agent-thinking-mask-${reactId}`;
-  const gradientId = `agent-thinking-gradient-${reactId}`;
-  const textX = 27;
-  const textWidth = Math.max(44, Math.min(96, label.length * 6.35));
-  const ellipsisX = textX + textWidth - 0.8;
-  const viewBoxWidth = ellipsisX + 13;
-  const shimmerWidth = viewBoxWidth * 0.68;
   return (
     <div
       className="agent-thinking-indicator"
@@ -967,95 +959,7 @@ export function ThinkingIndicator({
       aria-live="polite"
       aria-label={label}
     >
-      <svg
-        className="agent-thinking-indicator__glyph"
-        viewBox={`0 0 ${viewBoxWidth} 18`}
-        style={
-          {
-            "--agent-thinking-width": `${viewBoxWidth / 16}rem`,
-          } as React.CSSProperties
-        }
-        aria-hidden="true"
-        focusable="false"
-      >
-        <defs>
-          <linearGradient id={gradientId} x1="0" x2="1" y1="0" y2="0">
-            <stop
-              className="agent-thinking-indicator__sheen-edge"
-              offset="0%"
-            />
-            <stop
-              className="agent-thinking-indicator__sheen-mid"
-              offset="50%"
-            />
-            <stop
-              className="agent-thinking-indicator__sheen-edge"
-              offset="100%"
-            />
-          </linearGradient>
-          <mask id={maskId} maskUnits="userSpaceOnUse">
-            <g fill="white">
-              <g
-                className="agent-thinking-indicator__logo"
-                transform="translate(0 2.7) scale(0.9)"
-              >
-                <path d="M5.1 14H0L3.1 8.4 7.8 0 12.5 8.4H8.2L5.1 14Z" />
-                <path d="M19.5 0H24L16.6 14H12.1L19.5 0Z" />
-              </g>
-              <text
-                x={textX}
-                y="13"
-                fontFamily='Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
-                fontSize="13"
-                fontWeight="500"
-                letterSpacing="0"
-              >
-                {label}
-              </text>
-              <g
-                fontFamily='Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
-                fontSize="13"
-                fontWeight="500"
-              >
-                <text
-                  className="agent-thinking-indicator__ellipsis-dot agent-thinking-indicator__ellipsis-dot--1"
-                  x={ellipsisX}
-                  y="13"
-                >
-                  .
-                </text>
-                <text
-                  className="agent-thinking-indicator__ellipsis-dot agent-thinking-indicator__ellipsis-dot--2"
-                  x={ellipsisX + 3.7}
-                  y="13"
-                >
-                  .
-                </text>
-                <text
-                  className="agent-thinking-indicator__ellipsis-dot agent-thinking-indicator__ellipsis-dot--3"
-                  x={ellipsisX + 7.4}
-                  y="13"
-                >
-                  .
-                </text>
-              </g>
-            </g>
-          </mask>
-        </defs>
-        <g mask={`url(#${maskId})`}>
-          <rect
-            className="agent-thinking-indicator__base"
-            width={viewBoxWidth}
-            height="18"
-          />
-          <rect
-            className="agent-thinking-indicator__shimmer"
-            width={shimmerWidth}
-            height="18"
-            fill={`url(#${gradientId})`}
-          />
-        </g>
-      </svg>
+      <span className="agent-thinking-indicator__text">{label}</span>
     </div>
   );
 }

package/corpus/core/src/client/chat-model-groups.ts

@@ -0,0 +1,147 @@
+export interface EngineModelGroup {
+  engine: string;
+  label: string;
+  models: string[];
+  configured: boolean;
+}
+
+export interface ChatModelEngineEntry {
+  name: string;
+  label: string;
+  supportedModels?: readonly string[];
+  requiredEnvVars?: readonly string[];
+  packageInstalled?: boolean;
+}
+
+export interface BuildChatModelGroupsOptions {
+  engines: readonly ChatModelEngineEntry[];
+  configuredKeys?: Iterable<string>;
+  builderConnected?: boolean;
+  currentEngineName?: string;
+  currentModel?: string;
+}
+
+function addCurrentModel(
+  models: readonly string[],
+  engineName: string,
+  currentEngineName?: string,
+  currentModel?: string,
+): string[] {
+  const next = [...models];
+  if (
+    engineName === currentEngineName &&
+    currentModel &&
+    !next.includes(currentModel)
+  ) {
+    next.unshift(currentModel);
+  }
+  return next;
+}
+
+function groupBuilderModels(models: readonly string[]): EngineModelGroup[] {
+  const claude = models.filter((model) => model.startsWith("claude-"));
+  const openai = models.filter((model) => model.startsWith("gpt-"));
+  const gemini = models.filter((model) => model.startsWith("gemini-"));
+  const other = models.filter(
+    (model) =>
+      !model.startsWith("claude-") &&
+      !model.startsWith("gpt-") &&
+      !model.startsWith("gemini-"),
+  );
+
+  return [
+    ...(claude.length
+      ? [
+          {
+            engine: "builder",
+            label: "Claude",
+            models: claude,
+            configured: true,
+          },
+        ]
+      : []),
+    ...(openai.length
+      ? [
+          {
+            engine: "builder",
+            label: "OpenAI",
+            models: openai,
+            configured: true,
+          },
+        ]
+      : []),
+    ...(gemini.length
+      ? [
+          {
+            engine: "builder",
+            label: "Gemini",
+            models: gemini,
+            configured: true,
+          },
+        ]
+      : []),
+    ...(other.length
+      ? [
+          {
+            engine: "builder",
+            label: "More",
+            models: other,
+            configured: true,
+          },
+        ]
+      : []),
+  ];
+}
+
+function shouldShowDirectEngine(
+  engine: ChatModelEngineEntry,
+  currentEngineName?: string,
+): boolean {
+  if (engine.name === currentEngineName) return true;
+  if (engine.name === "builder") return false;
+  if (engine.name === "ai-sdk:anthropic") return false;
+  if (engine.requiredEnvVars?.length === 0) return false;
+  return true;
+}
+
+export function buildChatModelGroups({
+  engines,
+  configuredKeys,
+  builderConnected = false,
+  currentEngineName,
+  currentModel,
+}: BuildChatModelGroupsOptions): EngineModelGroup[] {
+  const configured = new Set(configuredKeys ?? []);
+
+  if (builderConnected) {
+    const builderEngine = engines.find((engine) => engine.name === "builder");
+    const builderModels = addCurrentModel(
+      builderEngine?.supportedModels ?? [],
+      "builder",
+      currentEngineName,
+      currentModel,
+    );
+    return groupBuilderModels(builderModels);
+  }
+
+  return engines
+    .filter((engine) => engine.packageInstalled !== false)
+    .filter((engine) => shouldShowDirectEngine(engine, currentEngineName))
+    .map((engine) => {
+      const requiredEnvVars = engine.requiredEnvVars ?? [];
+      return {
+        engine: engine.name,
+        label: engine.label,
+        models: addCurrentModel(
+          engine.supportedModels ?? [],
+          engine.name,
+          currentEngineName,
+          currentModel,
+        ),
+        configured:
+          requiredEnvVars.length === 0 ||
+          requiredEnvVars.some((key) => configured.has(key)),
+      };
+    })
+    .filter((group) => group.models.length > 0);
+}

package/corpus/core/src/client/components/LiveCursorOverlay.tsx

@@ -7,13 +7,11 @@
  * correctly. Pass a `mapCoords` prop to handle non-identity transforms
  * (e.g. a zoomed canvas).
  *
- * The agent's cursor is styled distinctly with a sparkle variant + "AI"
- * label, consistent with AgentPresenceChip.
+ * The agent uses the same pointer shape with an "AI" label.
  *
  * Cursors fade out after 10 seconds of no movement.
  */
 
-import { IconSparkles } from "@tabler/icons-react";
 import { useState, useEffect, useRef, memo } from "react";
 
 import type { OtherPresence, NormalizedPoint } from "../../collab/presence.js";
@@ -48,50 +46,28 @@ export interface LiveCursorOverlayProps {
 
 const STALE_MS = 10_000; // Fade out cursors older than 10s
 
-const CURSOR_SVG = `
-  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="22" viewBox="0 0 16 22" fill="none">
-    <path d="M0 0L0 18L4.5 13.5L7.5 20L9.5 19.5L6.5 13L12 13L0 0Z" fill="__COLOR__" stroke="white" stroke-width="1"/>
-  </svg>
-`.trim();
-
-function CursorPointer({
-  color,
-  isAgent,
-}: {
-  color: string;
-  isAgent: boolean;
-}) {
-  if (isAgent) {
-    return (
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          width: 22,
-          height: 22,
-          borderRadius: "50%",
-          backgroundColor: color,
-          color: "#fff",
-          boxShadow: `0 0 0 2px #fff`,
-        }}
-      >
-        <IconSparkles size={12} stroke={2} />
-      </div>
-    );
-  }
-
-  const svgSrc =
-    "data:image/svg+xml;charset=utf-8," +
-    encodeURIComponent(CURSOR_SVG.replace("__COLOR__", color));
-
+function CursorPointer({ color }: { color: string }) {
   return (
-    <img
-      src={svgSrc}
-      alt=""
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="25"
+      height="29"
+      viewBox="0 0 25 29"
+      fill="none"
       aria-hidden
-      style={{ width: 16, height: 22, display: "block", flexShrink: 0 }}
-    />
+      style={{
+        display: "block",
+        filter: "drop-shadow(0 2px 3px rgba(15, 23, 42, 0.3))",
+      }}
+    >
+      <path
+        d="M2.5 2.5L21.5 11L12.6 14.1L8.3 24.5L2.5 2.5Z"
+        fill={color}
+        stroke="white"
+        strokeLinejoin="round"
+        strokeWidth="3"
+      />
+    </svg>
   );
 }
 
@@ -123,39 +99,30 @@ const CursorLabel = memo(function CursorLabel({
         transform: "translate(-2px, -2px)",
         zIndex: 9999,
         transition: "left 120ms linear, top 120ms linear",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "flex-start",
-        gap: 2,
+        width: 0,
+        height: 0,
       }}
     >
-      <CursorPointer color={color} isAgent={other.isAgent} />
+      <CursorPointer color={color} />
       <div
         style={{
+          position: "absolute",
+          left: 31,
+          top: 31,
           backgroundColor: color,
           color: "#fff",
-          fontSize: 11,
-          fontWeight: 600,
-          padding: "1px 5px",
-          borderRadius: 4,
+          fontSize: 12,
+          fontWeight: 500,
+          lineHeight: "16px",
+          padding: "2px 7px",
+          borderRadius: 2,
           whiteSpace: "nowrap",
-          marginLeft: other.isAgent ? 0 : 4,
-          boxShadow: "0 1px 3px rgba(0,0,0,0.25)",
+          boxShadow: "0 5px 12px rgba(15, 23, 42, 0.16)",
           maxWidth: 120,
           overflow: "hidden",
           textOverflow: "ellipsis",
-          display: "flex",
-          alignItems: "center",
-          gap: 3,
         }}
       >
-        {other.isAgent && (
-          <IconSparkles
-            size={9}
-            stroke={2}
-            style={{ flexShrink: 0, opacity: 0.85 }}
-          />
-        )}
         {label}
       </div>
     </div>

package/corpus/core/src/client/components/ui/dialog.tsx

@@ -0,0 +1,91 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { IconX } from "@tabler/icons-react";
+import * as React from "react";
+
+import { cn } from "../../utils.js";
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogClose = DialogPrimitive.Close;
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-[270] bg-background/45 backdrop-blur-[1px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-1/2 top-1/2 z-[280] flex max-h-[min(760px,calc(100vh-32px))] w-[calc(100vw-24px)] max-w-[720px] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-lg border border-border bg-background text-foreground shadow-lg outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-150 data-[state=open]:duration-200 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute end-3 top-3 flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
+        <IconX className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("grid gap-1.5 px-4 py-4", className)} {...props} />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-sm font-semibold text-foreground", className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-xs text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+};