@datalayer/agent-runtimes 1.0.10 → 1.0.17

package/lib/types/chat.d.ts

@@ -3,7 +3,7 @@
  *
  * @module types/chat
  */
-import type { ReactNode } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 import type { ChatMessage, MessageHandler } from './messages';
 import type { Protocol, ProtocolConfig } from './protocol';
 import type { McpServerSelection } from './inference';
@@ -49,6 +49,14 @@ export interface ToolCallCompleteContext {
  * - 'sidebar': Docked sidebar panel
  */
 export type ChatViewMode = 'floating' | 'floating-small' | 'sidebar';
+/**
+ * Companion "ephemeral surface" shown next to the chat.
+ * - 'none': chat only, no companion surface
+ * - 'notebook': in-memory Jupyter notebook
+ * - 'document': in-memory Lexical rich-text document
+ */
+export type EphemeralSurfaceMode = 'none' | 'notebook' | 'document';
+export type EphemeralNotebookToolbarComponent = ComponentType<any>;
 /**
  * Tool call status for tool rendering
  */
@@ -240,6 +248,23 @@ export interface ChatCommonProps {
     showInput?: boolean;
     /** Keep input visible but disabled */
     disableInputPrompt?: boolean;
+    /**
+     * Whether the underlying agent runtime is still launching. When true, the
+     * chat shell is rendered with the input and controls disabled and a spinner
+     * overlay is shown, so the plain chat view appears as soon as the agent
+     * starts being created and stays interactive-disabled until it is ready.
+     */
+    launching?: boolean;
+    /**
+     * Optional message shown next to the spinner while `launching` is true.
+     */
+    launchingMessage?: ReactNode;
+    /**
+     * Optional overlay rendered above the chat surface (messages + input).
+     * Use this to show a gating UI such as a sign-in form for anonymous users
+     * while keeping the chat visible and its controls disabled behind it.
+     */
+    overlay?: ReactNode;
     /** Custom class name */
     className?: string;
     /** Children to render in the messages area */
@@ -294,7 +319,7 @@ export interface ChatCommonProps {
      * When omitted, the toggle renders in read-only mode.
      */
     onToggleCodemode?: (enabled: boolean) => void | Promise<void>;
-    /** Initial model ID to select (e.g., 'openai:gpt-4o-mini') */
+    /** Initial model ID to select (e.g., 'bedrock:us.anthropic.claude-sonnet-4-5-20250929-v1:0') */
     initialModel?: string;
     /**
      * Override the list of available models.
@@ -309,6 +334,38 @@ export interface ChatCommonProps {
     renderToolResult?: RenderToolResult;
     /** Frontend tool definitions to register with the chat */
     frontendTools?: FrontendToolDefinition[];
+    /**
+     * Show an in-memory "ephemeral notebook" next to the chat, toggled from the
+     * input footer. The notebook model lives purely in memory (never persisted)
+     * and its frontend tools are registered while visible. @default true
+     */
+    enableEphemeralNotebook?: boolean;
+    /**
+     * Enable the in-memory "ephemeral document" (Lexical rich-text) companion
+     * surface. When enabled it appears as an option in the companion-surface
+     * segmented control alongside the notebook. @default false
+     */
+    enableEphemeralDocument?: boolean;
+    /**
+     * Initial companion surface shown next to the chat. Defaults to 'notebook'
+     * when `enableEphemeralNotebook` is true, otherwise 'none'.
+     */
+    initialEphemeralSurfaceMode?: EphemeralSurfaceMode;
+    /** Controlled callback for companion surface mode changes. */
+    onEphemeralSurfaceModeChange?: (mode: EphemeralSurfaceMode) => void;
+    /** Initial open state of the ephemeral notebook. @default true */
+    initialEphemeralNotebookOpen?: boolean;
+    /** Controlled callback for ephemeral notebook open-state changes. */
+    onEphemeralNotebookOpenChange?: (open: boolean) => void;
+    /** Collapse chat panel while keeping the ephemeral notebook visible. */
+    collapsed?: boolean;
+    /** Callback to reopen chat panel from collapsed notebook mode. */
+    onExpandFromCollapsed?: () => void;
+    /**
+     * Optional toolbar component used by the ephemeral notebook.
+     * Defaults to the toolbar from `@datalayer/jupyter-react` when omitted.
+     */
+    ephemeralNotebookToolbar?: EphemeralNotebookToolbarComponent;
     /** Pre-hook: fires when a tool call starts executing */
     onToolCallStart?: (context: ToolCallStartContext) => void;
     /** Post-hook: fires when a tool result is received */
@@ -356,6 +413,18 @@ export interface ChatCommonProps {
     codemodeStatusData?: import('./stream').CodemodeStatusData | null;
     /** Optional sandbox status override for immediate UI updates. */
     sandboxStatusData?: SandboxWsStatus | null;
+    /**
+     * Live kernel connection of the companion notebook/document sandbox.
+     * When provided, it is forwarded to the chat header's `<KernelIndicator>`
+     * so the indicator reflects the surface's runtime.
+     */
+    kernel?: import('@jupyterlab/services/lib/kernel/kernel').IKernelConnection | null;
+    /**
+     * Disable ChatBase's internal JupyterReactTheme wrapper.
+     * Use this when the host page already provides a JupyterReactTheme boundary.
+     * @default false
+     */
+    disableInternalJupyterTheme?: boolean;
     /**
      * Whether to render the top-of-chat tool approval banner when there are
      * pending approvals. @default true
@@ -431,6 +500,26 @@ export interface ChatBaseProps {
     showInput?: boolean;
     /** Keep input visible but disabled */
     disableInputPrompt?: boolean;
+    /**
+     * Whether the underlying agent runtime is still launching. When true, the
+     * chat shell renders with input and controls disabled and a spinner overlay.
+     */
+    launching?: boolean;
+    /** Optional message shown next to the spinner while `launching` is true. */
+    launchingMessage?: React.ReactNode;
+    /**
+     * Whether to auto-connect the chat protocol adapter on mount. Defaults to
+     * `true`. Set to `false` to render the chat shell (header, disabled input,
+     * companion notebook/document, launching overlay) without opening a protocol
+     * connection — e.g. while the agent runtime endpoint is still being created.
+     */
+    autoConnect?: boolean;
+    /**
+     * Optional overlay rendered above the chat surface (messages + input).
+     * Use this to show a gating UI such as a sign-in form for anonymous users
+     * while keeping the chat visible and its controls disabled behind it.
+     */
+    overlay?: React.ReactNode;
     /** Show model selector (for protocols that support it) */
     showModelSelector?: boolean;
     /** Show tools menu (for protocols that support it) */
@@ -444,7 +533,7 @@ export interface ChatBaseProps {
      * When omitted, the toggle renders in read-only mode.
      */
     onToggleCodemode?: (enabled: boolean) => void | Promise<void>;
-    /** Initial model ID to select (e.g., 'openai:gpt-4o-mini') */
+    /** Initial model ID to select (e.g., 'bedrock:us.anthropic.claude-sonnet-4-5-20250929-v1:0') */
     initialModel?: string;
     /**
      * Override the list of available models.
@@ -470,6 +559,12 @@ export interface ChatBaseProps {
      * the colour and tooltip remain in sync with the notebook runtime.
      */
     kernel?: import('@jupyterlab/services/lib/kernel/kernel').IKernelConnection | null;
+    /**
+     * Disable ChatBase's internal JupyterReactTheme wrapper.
+     * Use this when the host page already provides a JupyterReactTheme boundary.
+     * @default false
+     */
+    disableInternalJupyterTheme?: boolean;
     /** Optional environment name displayed in kernel indicator details. */
     kernelEnvironmentName?: string;
     /** Optional CPU info displayed in kernel indicator details. */
@@ -614,6 +709,43 @@ export interface ChatBaseProps {
      * These tools execute in the browser and their results are sent back to the agent.
      */
     frontendTools?: FrontendToolDefinition[];
+    /**
+     * Enable the "Ephemeral Notebook" feature. When true, a toggle is rendered in
+     * the input footer that shows/hides an in-memory notebook next to the chat.
+     * The notebook model lives purely in memory (never persisted) and is backed
+     * by a sandbox kernel. While visible, its frontend tools are registered so
+     * the agent can drive the notebook cells. @default true
+     */
+    enableEphemeralNotebook?: boolean;
+    /**
+     * Enable the in-memory "ephemeral document" (Lexical rich-text) companion
+     * surface. When enabled it appears as an option in the companion-surface
+     * segmented control alongside the notebook. @default false
+     */
+    enableEphemeralDocument?: boolean;
+    /**
+     * Initial companion surface shown next to the chat. Defaults to 'notebook'
+     * when `enableEphemeralNotebook` is true, otherwise 'none'.
+     */
+    initialEphemeralSurfaceMode?: EphemeralSurfaceMode;
+    /** Controlled callback for companion surface mode changes. */
+    onEphemeralSurfaceModeChange?: (mode: EphemeralSurfaceMode) => void;
+    /**
+     * Initial open state of the ephemeral notebook toggle. Only relevant when
+     * `enableEphemeralNotebook` is true. @default true
+     */
+    initialEphemeralNotebookOpen?: boolean;
+    /** Controlled callback for ephemeral notebook open-state changes. */
+    onEphemeralNotebookOpenChange?: (open: boolean) => void;
+    /** Collapse chat panel while keeping the ephemeral notebook visible. */
+    collapsed?: boolean;
+    /** Callback to reopen chat panel from collapsed notebook mode. */
+    onExpandFromCollapsed?: () => void;
+    /**
+     * Optional toolbar component used by the ephemeral notebook.
+     * Defaults to the toolbar from `@datalayer/jupyter-react` when omitted.
+     */
+    ephemeralNotebookToolbar?: EphemeralNotebookToolbarComponent;
     /**
      * Callback when the agent requests authorization for an external service.
      * This is called when a tool needs OAuth access to a service like GitHub.

package/lib/types/config.d.ts

@@ -6,7 +6,7 @@ import { BuiltinTool } from './models';
 /**
  * Default agent configuration values.
  */
-export declare const DEFAULT_AGENT_CONFIG: Required<AgentConfig>;
+export declare const DEFAULT_AGENT_CONFIG: Required<Pick<AgentConfig, 'name' | 'description' | 'model' | 'systemPrompt' | 'agentLibrary' | 'protocol'>>;
 /**
  * Configuration for creating an agent on a runtime.
  */
@@ -23,6 +23,22 @@ export interface AgentConfig {
     agentLibrary?: AgentLibrary;
     /** Transport protocol (defaults to `ag-ui`). */
     protocol?: Protocol;
+    /** Optional agent spec ID for server-side spec-based creation. */
+    agentSpecId?: string;
+    /** Optional custom tools payload. */
+    tools?: unknown[];
+    /** Enable skills for this agent. */
+    enableSkills?: boolean;
+    /** Optional inference provider override (e.g. local, datalayer). */
+    inferenceProvider?: string;
+    /** Enable codemode if supported by the selected spec/runtime. */
+    enableCodemode?: boolean;
+    /** Optional sandbox variant (e.g. eval, jupyter). */
+    sandboxVariant?: string;
+    /** Optional Jupyter sandbox URL for jupyter-backed sandbox mode. */
+    jupyterSandbox?: string;
+    /** Additional raw request fields merged into POST /api/v1/agents payload. */
+    createPayload?: Record<string, unknown>;
 }
 /**
  * Remote configuration from server
@@ -32,6 +48,8 @@ export interface RemoteConfig {
     defaultModel?: string;
     builtinTools: BuiltinTool[];
     mcpServers?: MCPServerConfig[];
+    suggestions?: string[];
+    welcomeMessage?: string;
 }
 /**
  * Configuration for connecting to an agent runtime.

package/lib/types/index.d.ts

@@ -20,6 +20,7 @@ export * from './execution';
 export * from './extensions';
 export * from './guardrails';
 export * from './inference';
+export * from './loops';
 export * from './mcp';
 export * from './memory';
 export * from './messages';

package/lib/types/index.js

@@ -24,6 +24,7 @@ export * from './execution';
 export * from './extensions';
 export * from './guardrails';
 export * from './inference';
+export * from './loops';
 export * from './mcp';
 export * from './memory';
 export * from './messages';

package/lib/types/loops.d.ts

@@ -0,0 +1,64 @@
+/**
+ * How the human participates in (or around) an agent execution loop.
+ */
+export interface LoopHuman {
+    /** Human interaction pattern: none, initiate, approve, feedback, or tool */
+    mode: string;
+    /** Whether the loop pauses for human approval before sensitive actions */
+    approvalRequired: boolean;
+    /** Actions that require explicit human approval */
+    approvalFor: string[];
+    /** Description of the human-in-the-loop behaviour */
+    description: string;
+}
+/**
+ * When and how an agent execution loop stops iterating.
+ */
+export interface LoopTermination {
+    /** Maximum iterations before the loop is stopped */
+    maxIterations: number;
+    /** Conditions that mark the goal as reached */
+    successCriteria: string[];
+    /** Conditions that mark the loop as failed */
+    failureCriteria: string[];
+    /** What to do when blocked: ask-human, retry, or abort */
+    onBlocked: string;
+}
+/**
+ * Specification for an agent execution loop.
+ *
+ * A framework-agnostic description of how an agent progresses from one
+ * decision to the next: the control cycle (observe/think/act/evaluate), the
+ * objective, constraints, where state lives, human participation, and the
+ * termination policy.
+ */
+export interface LoopSpec {
+    /** Unique loop identifier (e.g., 'data-analysis') */
+    id: string;
+    /** Version */
+    version: string;
+    /** Display name for the loop */
+    name: string;
+    /** Loop description */
+    description: string;
+    /** Default goal/objective the loop works toward */
+    objective: string;
+    /** Loop strategy family */
+    strategy: string;
+    /** Ordered phase names that make up one iteration */
+    phases: string[];
+    /** Boundaries the agent must respect */
+    constraints: string[];
+    /** Termination policy */
+    termination?: LoopTermination;
+    /** Human-in-the-loop participation settings */
+    human?: LoopHuman;
+    /** Where loop state lives between iterations */
+    stateBackends: string[];
+    /** Categorization tags */
+    tags: string[];
+    /** Icon identifier */
+    icon: string;
+    /** Emoji representation */
+    emoji: string;
+}

package/lib/types/loops.js

@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export {};

package/lib/types/tools.d.ts

@@ -38,6 +38,22 @@ export interface ToolSpec {
     /** Emoji identifier */
     emoji?: string;
 }
+/**
+ * Binds a backend tool to a frontend renderer.
+ *
+ * Lets an agent declare, in its spec, which backend tool results should be
+ * rendered inline by the frontend, which renderer to use, and an optional CSS
+ * file to load. Frontend examples read this instead of hardcoding the tool
+ * name or CSS filename.
+ */
+export interface FrontendRenderToolSpec {
+    /** Name of the backend tool whose result is rendered inline */
+    tool: string;
+    /** Renderer key the frontend maps to a component */
+    renderer: string;
+    /** Optional CSS filename the frontend loads for this renderer */
+    css?: string;
+}
 /**
  * Specification for a frontend tool set.
  */

package/lib/utils/Cells.d.ts

@@ -0,0 +1,2 @@
+import { IDataset } from '../models';
+export declare const getDatasetCell: (dataset: IDataset) => string;

package/lib/utils/Cells.js

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export const getDatasetCell = (dataset) => {
+    switch (dataset.contentType) {
+        case 'application/vnd.ms-excel':
+        case 'text/csv':
+            return `# --- ✅ Load the ${dataset.fileName}.${dataset.datasetExtension} dataset (${dataset.mimeType})
+import pandas as pd
+${dataset.fileName}_${dataset.datasetExtension} = pd.read_csv("${dataset.cdnUrl}")
+${dataset.fileName}_${dataset.datasetExtension}
+
+`;
+        case 'image/png':
+        case 'image/jpg':
+        case 'image/jpeg':
+            return `# --- ✅ Display the ${dataset.fileName}.${dataset.datasetExtension} dataset (${dataset.mimeType})
+from IPython.display import Image
+url = "${dataset.cdnUrl}"
+Image(url, width=300)
+
+`;
+        default:
+            return `# --- 😞 File of type ${dataset.contentType} is not supported for now.
+`;
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/agent-runtimes",
-  "version": "1.0.10",
+  "version": "1.0.17",
   "type": "module",
   "workspaces": [
     ".",
@@ -68,11 +68,13 @@
     "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
     "create:patches": "bash scripts/create-patches.sh",
     "examples": "run-p server:start server:start:codemode jupyter:start examples:vite",
+    "examples2": "run-p server:start server:start:codemode jupyter:start examples2:vite",
     "examples:proxy": "make examples:proxy",
     "examples:fresh": "npm run clean:cache && npm run examples",
     "examples:jupyter": "run-p jupyter:start server:start server:start:codemode examples:vite",
     "examples:nextjs": "npm run dev --workspace=nextjs-notebook-example",
-    "examples:vite": "VITE_DATALAYER_RUN_URL=${VITE_DATALAYER_RUN_URL:-https://prod1.datalayer.run} VITE_DATALAYER_RUNTIMES_URL=${VITE_DATALAYER_RUNTIMES_URL:-https://r1.datalayer.run} VITE_DATALAYER_AGENT_RUNTIMES_URL=${VITE_DATALAYER_AGENT_RUNTIMES_URL:-https://r1.datalayer.run} VITE_APP_TARGET=examples vite",
+    "examples:vite": "VITE_DATALAYER_URL=${VITE_DATALAYER_URL:-https://r1.datalayer.run} VITE_DATALAYER_RUNTIMES_URL=${VITE_DATALAYER_RUNTIMES_URL:-https://r1.datalayer.run} VITE_DATALAYER_AGENT_RUNTIMES_URL=${VITE_DATALAYER_AGENT_RUNTIMES_URL:-https://r1.datalayer.run} VITE_APP_TARGET=examples vite",
+    "examples2:vite": "VITE_DATALAYER_URL=${VITE_DATALAYER_URL:-https://r1.datalayer.run} VITE_DATALAYER_RUNTIMES_URL=${VITE_DATALAYER_RUNTIMES_URL:-https://r1.datalayer.run} VITE_DATALAYER_AGENT_RUNTIMES_URL=${VITE_DATALAYER_AGENT_RUNTIMES_URL:-https://r1.datalayer.run} VITE_APP_TARGET=examples2 vite",
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,json,md}\" \"examples/**/*.{js,jsx,ts,tsx,css,json,md,mjs}\"",
     "format:all": "npm run format && npm run format --workspaces --if-present",
     "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,css,json,md}\" \"examples/**/*.{js,jsx,ts,tsx,css,json,md,mjs}\"",
@@ -104,8 +106,8 @@
     "start:agent-node:vite": "vite --open /html/agent-node.html",
     "start:agent-notebook": "run-p server:start jupyter:start start:agent-notebook:vite",
     "start:agent-notebook:vite": "vite --open /html/agent-notebook.html",
-    "start:agent-lexical": "run-p server:start jupyter:start start:agent-lexical:vite",
-    "start:agent-lexical:vite": "vite --open /html/agent-lexical.html",
+    "start:agent-document": "run-p server:start jupyter:start start:agent-document:vite",
+    "start:agent-document:vite": "vite --open /html/agent-document.html",
     "storybook": "storybook dev -p 6006",
     "sync:jupyter": "bash scripts/sync-jupyter.sh",
     "sync:jupyter:watch": "bash scripts/sync-jupyter.sh --watch",
@@ -126,15 +128,17 @@
   },
   "dependencies": {
     "@a2a-js/sdk": "^0.3.6",
-    "@a2ui/react": "^0.9.1",
+    "@a2ui/markdown-it": "^0.1.0",
+    "@a2ui/react": "^0.10.1",
+    "@a2ui/web_core": "^0.10.4",
     "@ag-ui/client": "^0.0.42",
-    "@ag-ui/core": "^0.0.42",
-    "@ag-ui/encoder": "^0.0.42",
-    "@ag-ui/proto": "^0.0.42",
+    "@ag-ui/core": "^0.0.57",
+    "@ag-ui/encoder": "^0.0.57",
+    "@ag-ui/proto": "^0.0.57",
     "@agentclientprotocol/sdk": "^0.8.0",
-    "@ai-sdk/react": "^4.0.0-beta.116",
+    "@ai-sdk/react": "4.0.23",
     "@anthropic-ai/sdk": "^0.52.0",
-    "@datalayer/core": "^1.0.22",
+    "@datalayer/core": "^1.1.48",
     "@datalayer/icons-react": "^1.0.7",
     "@datalayer/jupyter-lexical": "^1.0.16",
     "@datalayer/jupyter-react": "^2.0.7",
@@ -164,9 +168,9 @@
     "@primer/behaviors": "^1.8.4",
     "@primer/brand-primitives": "^0.51.0",
     "@primer/css": "^21.5.1",
-    "@primer/octicons-react": "^19.15.1",
-    "@primer/primitives": "^10.5.0",
-    "@primer/react": "^37.19.0",
+    "@primer/octicons-react": "^19.29.1",
+    "@primer/primitives": "^10.7.0",
+    "@primer/react": "^37.31.0",
     "@primer/react-brand": "^0.58.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
@@ -199,7 +203,7 @@
     "@tanstack/react-query": "^5.90.6",
     "@toon-format/toon": "^1.3.0",
     "@xyflow/react": "^12.10.0",
-    "ai": "^7.0.0-beta.116",
+    "ai": "^7.0.22",
     "ansi-to-html": "^0.7.2",
     "axios": "^1.7.7",
     "boring-avatars": "^2.0.1",
@@ -307,8 +311,9 @@
     "vitest": "^3.2.4"
   },
   "resolutions": {
+    "@a2ui/web_core": "^0.10.4",
     "@langchain/core": "^0.3.80",
-    "@ai-sdk/react": "^4.0.0-beta.116",
+    "@ai-sdk/react": "4.0.23",
     "@microsoft/fast-colors": "5.3.1",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.13.0",
@@ -318,15 +323,16 @@
     "@microsoft/load-themed-styles": "1.10.295",
     "@types/react": "18.3.20",
     "@types/react-dom": "18.3.6",
-    "ai": "^7.0.0-beta.116",
+    "ai": "^7.0.22",
     "pyodide": "0.28.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "typescript": "^5.8.3"
   },
   "overrides": {
+    "@a2ui/web_core": "^0.10.4",
     "@langchain/core": "^0.3.80",
-    "@ai-sdk/react": "^4.0.0-beta.116",
+    "@ai-sdk/react": "4.0.23",
     "@microsoft/fast-colors": "5.3.1",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.13.0",
@@ -336,7 +342,7 @@
     "@microsoft/load-themed-styles": "1.10.295",
     "@types/react": "18.3.20",
     "@types/react-dom": "18.3.6",
-    "ai": "^7.0.0-beta.116",
+    "ai": "^7.0.22",
     "pyodide": "0.28.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",

package/scripts/codegen/generate_agents.py

@@ -222,6 +222,12 @@ from agent_runtimes.types import Agentspec, SubAgentspecConfig, SubAgentsConfig
                 versioned_ref(*split_spec_ref(ft))
                 for ft in spec.get("frontend_tools", [])
             ]
+            frontend_render_tools = spec.get("frontend_render_tools") or []
+            frontend_render_tools_py_line = (
+                f"    frontend_render_tools={_fmt_py_literal(frontend_render_tools)},\n"
+                if frontend_render_tools
+                else ""
+            )
 
             # Format optional fields
             icon = f'"{spec.get("icon")}"' if spec.get("icon") else "None"
@@ -262,6 +268,7 @@ from agent_runtimes.types import Agentspec, SubAgentspecConfig, SubAgentsConfig
                 .strip()
                 .replace('"', '\\"')
             )
+            display_name = spec.get("title", spec["name"]).replace('"', '\\"')
 
             # Use triple quotes for multiline system prompts
             system_prompt_str = f'"""{system_prompt}"""' if system_prompt else "None"
@@ -363,7 +370,7 @@ from agent_runtimes.types import Agentspec, SubAgentspecConfig, SubAgentsConfig
             code += f'''{const_name} = Agentspec(
     id="{full_agent_id}",
     version="{version}",
-    name="{spec["name"]}",
+                name="{display_name}",
     description="{description}",
     tags={_fmt_list(spec.get("tags", []))},
     enabled={spec.get("enabled", True)},
@@ -373,7 +380,7 @@ from agent_runtimes.types import Agentspec, SubAgentspecConfig, SubAgentsConfig
     skills={_fmt_list(skill_refs)},
     tools={_fmt_list(tool_refs)},
 {disable_tool_approvals_line}    frontend_tools={_fmt_list(frontend_tool_refs)},
-    environment_name="{spec.get("environment_name", "ai-agents-env")}",
+{frontend_render_tools_py_line}    environment_name="{spec.get("environment_name", "ai-agents-env")}",
     icon={icon},
     emoji={emoji},
     color={color},
@@ -817,6 +824,14 @@ const FRONTEND_TOOL_MAP: Record<string, any> = {
             else:
                 frontend_tools_str = ""
 
+            # Frontend render tools - inline structured data read verbatim
+            frontend_render_tools = spec.get("frontend_render_tools") or []
+            frontend_render_tools_ts_line = (
+                f"    frontendRenderTools: {_fmt_ts_literal(frontend_render_tools)},\n"
+                if frontend_render_tools
+                else ""
+            )
+
             # Format tags and suggestions as arrays
             tags = spec.get("tags", [])
             tags_str = "[" + ", ".join(f"'{t}'" for t in tags) + "]"
@@ -855,6 +870,7 @@ const FRONTEND_TOOL_MAP: Record<string, any> = {
             description = (
                 spec["description"].replace("\n", " ").replace("  ", " ").strip()
             )
+            display_name = spec.get("title", spec["name"]).replace("'", "\\'")
 
             # Model field
             model_id = spec.get("model")
@@ -921,7 +937,7 @@ const FRONTEND_TOOL_MAP: Record<string, any> = {
             code += f"""export const {const_name}: Agentspec = {{
     id: '{full_agent_id}',
     version: '{version}',
-    name: '{spec["name"]}',
+                name: '{display_name}',
     description: `{description}`,
     tags: {tags_str},
     enabled: {str(spec.get("enabled", True)).lower()},
@@ -930,7 +946,7 @@ const FRONTEND_TOOL_MAP: Record<string, any> = {
     skills: [{skills_str}].filter(Boolean) as SkillSpec[],
     tools: [{tools_str}],
 {disable_tool_approvals_line}    frontendTools: [{frontend_tools_str}],
-    environmentName: '{spec.get("environment_name", "ai-agents-env")}',
+{frontend_render_tools_ts_line}    environmentName: '{spec.get("environment_name", "ai-agents-env")}',
     icon: {icon},
     emoji: {emoji},
     color: {color},
@@ -1376,6 +1392,7 @@ export * from './teams';
 export * from './envvars';
 export * from './evals';
 export * from './guardrails';
+export * from './loops';
 export * from './mcpServers';
 export * from './memory';
 export * from './models';