@inkeep/agents-manage-ui 0.11.0 → 0.11.1

package/.next/standalone/agents-manage-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkeep/agents-manage-ui",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "index.js",
   "types": "index.d.ts",
@@ -46,7 +46,7 @@
     "@inkeep/agents-core": "workspace:^",
     "@inkeep/agents-manage-api": "workspace:^",
     "@inkeep/agents-run-api": "workspace:^",
-    "@inkeep/cxkit-react-oss": "0.5.105",
+    "@inkeep/cxkit-react-oss": "0.5.107",
     "@lezer/highlight": "^1.2.1",
     "@nangohq/frontend": "^0.66.0",
     "@nangohq/node": "^0.66.0",

package/.next/standalone/agents-manage-ui/public/assets/inkeep-icons/icon-black.svg

@@ -0,0 +1,4 @@
+<svg width="252" height="252" viewBox="0 0 252 252" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M53.1296 54.8316C49.9143 54.8316 46.9431 56.547 45.3354 59.3316L9.43775 121.508C7.83006 124.293 7.83006 127.724 9.43776 130.508L45.3354 192.685C46.9431 195.469 49.9143 197.185 53.1296 197.185L124.925 197.185C128.14 197.185 131.112 195.469 132.719 192.685L168.617 130.508C170.225 127.724 170.225 124.293 168.617 121.508L132.719 59.3316C131.112 56.547 128.14 54.8316 124.925 54.8316L53.1296 54.8316Z" stroke="#231F20" stroke-width="10"/>
+<path d="M199.571 53.4812C221.09 59.0187 218.638 71.2308 227.562 96.0708C233.288 112.007 260.969 131.768 235.673 170.181C228.124 181.644 203.849 195.245 186.285 199.018C147.589 207.201 124.788 188.63 104.561 158.011C89.3858 134.851 94.748 101.508 117.765 85.1353C139.578 69.6614 171.283 45.6503 199.571 53.4812Z" stroke="#231F20" stroke-width="9.8"/>
+</svg>

package/.next/standalone/agents-manage-ui/public/assets/inkeep-icons/icon-blue.svg

@@ -0,0 +1,4 @@
+<svg width="252" height="252" viewBox="0 0 252 252" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M53.1296 54.8315C49.9143 54.8315 46.9431 56.5469 45.3354 59.3315L9.43776 121.508C7.83007 124.293 7.83007 127.724 9.43777 130.508L45.3354 192.685C46.9431 195.469 49.9143 197.185 53.1296 197.185H124.925C128.14 197.185 131.112 195.469 132.719 192.685L168.617 130.508C170.225 127.724 170.225 124.293 168.617 121.508L132.719 59.3315C131.112 56.5469 128.14 54.8315 124.925 54.8315H53.1296Z" stroke="#3784FF" stroke-width="10"/>
+<path d="M199.571 53.4812C221.09 59.0187 218.638 71.2308 227.562 96.0708C233.288 112.007 260.969 131.768 235.673 170.181C228.124 181.644 203.849 195.245 186.285 199.018C147.589 207.201 124.788 188.63 104.561 158.011C89.3858 134.851 94.748 101.508 117.765 85.1353C139.578 69.6614 171.283 45.6503 199.571 53.4812Z" stroke="#3784FF" stroke-width="9.8"/>
+</svg>

package/.next/standalone/agents-manage-ui/public/assets/inkeep-icons/icon-light-blue.svg

@@ -0,0 +1,4 @@
+<svg width="252" height="252" viewBox="0 0 252 252" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M53.1296 54.8316C49.9143 54.8316 46.9431 56.547 45.3354 59.3316L9.43775 121.508C7.83006 124.293 7.83006 127.724 9.43776 130.508L45.3354 192.685C46.9431 195.469 49.9143 197.185 53.1296 197.185L124.925 197.185C128.14 197.185 131.112 195.469 132.719 192.685L168.617 130.508C170.225 127.724 170.225 124.293 168.617 121.508L132.719 59.3316C131.112 56.547 128.14 54.8316 124.925 54.8316L53.1296 54.8316Z" stroke="#D5E5FF" stroke-width="10"/>
+<path d="M199.571 53.4812C221.09 59.0187 218.638 71.2308 227.562 96.0708C233.288 112.007 260.969 131.768 235.673 170.181C228.124 181.644 203.849 195.245 186.285 199.018C147.589 207.201 124.788 188.63 104.561 158.011C89.3858 134.851 94.748 101.508 117.765 85.1353C139.578 69.6614 171.283 45.6503 199.571 53.4812Z" stroke="#D5E5FF" stroke-width="9.8"/>
+</svg>

package/.next/standalone/agents-manage-ui/public/assets/inkeep-icons/icon-sky.svg

@@ -0,0 +1,4 @@
+<svg width="252" height="252" viewBox="0 0 252 252" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M53.1296 54.8316C49.9143 54.8316 46.9431 56.547 45.3354 59.3316L9.43775 121.508C7.83006 124.293 7.83006 127.724 9.43776 130.508L45.3354 192.685C46.9431 195.469 49.9143 197.185 53.1296 197.185L124.925 197.185C128.14 197.185 131.112 195.469 132.719 192.685L168.617 130.508C170.225 127.724 170.225 124.293 168.617 121.508L132.719 59.3316C131.112 56.547 128.14 54.8316 124.925 54.8316L53.1296 54.8316Z" stroke="#69A3FF" stroke-width="10"/>
+<path d="M199.571 53.4812C221.09 59.0187 218.638 71.2308 227.562 96.0708C233.288 112.007 260.969 131.768 235.673 170.181C228.124 181.644 203.849 195.245 186.285 199.018C147.589 207.201 124.788 188.63 104.561 158.011C89.3858 134.851 94.748 101.508 117.765 85.1353C139.578 69.6614 171.283 45.6503 199.571 53.4812Z" stroke="#69A3FF" stroke-width="9.8"/>
+</svg>

package/.next/standalone/packages/agents-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkeep/agents-core",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "Agents Core contains the database schema, types, and validation schemas for Inkeep Agent Framework, along with core components.",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE.md",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkeep/agents-manage-ui",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "index.js",
   "types": "index.d.ts",
@@ -30,7 +30,7 @@
     "@ai-sdk/react": "2.0.11",
     "@codemirror/lang-json": "^6.0.2",
     "@hookform/resolvers": "^5.2.1",
-    "@inkeep/cxkit-react-oss": "0.5.105",
+    "@inkeep/cxkit-react-oss": "0.5.107",
     "@lezer/highlight": "^1.2.1",
     "@nangohq/frontend": "^0.66.0",
     "@nangohq/node": "^0.66.0",
@@ -81,9 +81,9 @@
     "use-stick-to-bottom": "^1.1.1",
     "zod": "^4.1.5",
     "zustand": "^5.0.7",
-    "@inkeep/agents-core": "^0.11.0",
-    "@inkeep/agents-manage-api": "^0.11.0",
-    "@inkeep/agents-run-api": "^0.11.0"
+    "@inkeep/agents-core": "^0.11.1",
+    "@inkeep/agents-manage-api": "^0.11.1",
+    "@inkeep/agents-run-api": "^0.11.1"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

package/public/assets/inkeep-icons/icon-black.svg

@@ -0,0 +1,4 @@
+<svg width="252" height="252" viewBox="0 0 252 252" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M53.1296 54.8316C49.9143 54.8316 46.9431 56.547 45.3354 59.3316L9.43775 121.508C7.83006 124.293 7.83006 127.724 9.43776 130.508L45.3354 192.685C46.9431 195.469 49.9143 197.185 53.1296 197.185L124.925 197.185C128.14 197.185 131.112 195.469 132.719 192.685L168.617 130.508C170.225 127.724 170.225 124.293 168.617 121.508L132.719 59.3316C131.112 56.547 128.14 54.8316 124.925 54.8316L53.1296 54.8316Z" stroke="#231F20" stroke-width="10"/>
+<path d="M199.571 53.4812C221.09 59.0187 218.638 71.2308 227.562 96.0708C233.288 112.007 260.969 131.768 235.673 170.181C228.124 181.644 203.849 195.245 186.285 199.018C147.589 207.201 124.788 188.63 104.561 158.011C89.3858 134.851 94.748 101.508 117.765 85.1353C139.578 69.6614 171.283 45.6503 199.571 53.4812Z" stroke="#231F20" stroke-width="9.8"/>
+</svg>

package/public/assets/inkeep-icons/icon-blue.svg

@@ -0,0 +1,4 @@
+<svg width="252" height="252" viewBox="0 0 252 252" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M53.1296 54.8315C49.9143 54.8315 46.9431 56.5469 45.3354 59.3315L9.43776 121.508C7.83007 124.293 7.83007 127.724 9.43777 130.508L45.3354 192.685C46.9431 195.469 49.9143 197.185 53.1296 197.185H124.925C128.14 197.185 131.112 195.469 132.719 192.685L168.617 130.508C170.225 127.724 170.225 124.293 168.617 121.508L132.719 59.3315C131.112 56.5469 128.14 54.8315 124.925 54.8315H53.1296Z" stroke="#3784FF" stroke-width="10"/>
+<path d="M199.571 53.4812C221.09 59.0187 218.638 71.2308 227.562 96.0708C233.288 112.007 260.969 131.768 235.673 170.181C228.124 181.644 203.849 195.245 186.285 199.018C147.589 207.201 124.788 188.63 104.561 158.011C89.3858 134.851 94.748 101.508 117.765 85.1353C139.578 69.6614 171.283 45.6503 199.571 53.4812Z" stroke="#3784FF" stroke-width="9.8"/>
+</svg>

package/public/assets/inkeep-icons/icon-light-blue.svg

@@ -0,0 +1,4 @@
+<svg width="252" height="252" viewBox="0 0 252 252" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M53.1296 54.8316C49.9143 54.8316 46.9431 56.547 45.3354 59.3316L9.43775 121.508C7.83006 124.293 7.83006 127.724 9.43776 130.508L45.3354 192.685C46.9431 195.469 49.9143 197.185 53.1296 197.185L124.925 197.185C128.14 197.185 131.112 195.469 132.719 192.685L168.617 130.508C170.225 127.724 170.225 124.293 168.617 121.508L132.719 59.3316C131.112 56.547 128.14 54.8316 124.925 54.8316L53.1296 54.8316Z" stroke="#D5E5FF" stroke-width="10"/>
+<path d="M199.571 53.4812C221.09 59.0187 218.638 71.2308 227.562 96.0708C233.288 112.007 260.969 131.768 235.673 170.181C228.124 181.644 203.849 195.245 186.285 199.018C147.589 207.201 124.788 188.63 104.561 158.011C89.3858 134.851 94.748 101.508 117.765 85.1353C139.578 69.6614 171.283 45.6503 199.571 53.4812Z" stroke="#D5E5FF" stroke-width="9.8"/>
+</svg>

package/public/assets/inkeep-icons/icon-sky.svg

@@ -0,0 +1,4 @@
+<svg width="252" height="252" viewBox="0 0 252 252" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M53.1296 54.8316C49.9143 54.8316 46.9431 56.547 45.3354 59.3316L9.43775 121.508C7.83006 124.293 7.83006 127.724 9.43776 130.508L45.3354 192.685C46.9431 195.469 49.9143 197.185 53.1296 197.185L124.925 197.185C128.14 197.185 131.112 195.469 132.719 192.685L168.617 130.508C170.225 127.724 170.225 124.293 168.617 121.508L132.719 59.3316C131.112 56.547 128.14 54.8316 124.925 54.8316L53.1296 54.8316Z" stroke="#69A3FF" stroke-width="10"/>
+<path d="M199.571 53.4812C221.09 59.0187 218.638 71.2308 227.562 96.0708C233.288 112.007 260.969 131.768 235.673 170.181C228.124 181.644 203.849 195.245 186.285 199.018C147.589 207.201 124.788 188.63 104.561 158.011C89.3858 134.851 94.748 101.508 117.765 85.1353C139.578 69.6614 171.283 45.6503 199.571 53.4812Z" stroke="#69A3FF" stroke-width="9.8"/>
+</svg>

package/src/app/globals.css

@@ -262,3 +262,7 @@
     @apply !bg-transparent;
   }
 }
+
+.react-flow__attribution {
+  padding: 4px 8px;
+}

package/src/components/form/expandable-json-editor.tsx

@@ -121,7 +121,7 @@ export function ExpandableJsonEditor({
             value={value || ''}
             onChange={onChange}
             placeholder={placeholder}
-            className={`font-mono text-sm max-h-96 ${error ? 'mb-6' : ''}`}
+            className={`font-mono bg-background text-sm max-h-96 ${error ? 'mb-6' : ''}`}
           />
           {error && <p className="text-sm mt-1 text-destructive absolute -bottom-6">{error}</p>}
         </>

package/src/components/graph/playground/chat-widget.tsx

@@ -210,6 +210,10 @@ export function ChatWidget({
             },
           }}
           aiChatSettings={{
+            aiAssistantAvatar: {
+              light: '/assets/inkeep-icons/icon-blue.svg',
+              dark: '/assets/inkeep-icons/icon-sky.svg',
+            },
             conversationId,
             graphUrl: graphId ? `${INKEEP_AGENTS_RUN_API_URL}/api/chat` : undefined,
             headers: {

package/src/components/graph/sidepane/collapsible-settings.tsx

@@ -0,0 +1,36 @@
+import { ChevronRight } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+
+interface CollapsibleSettingsProps {
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+  title: string | React.ReactNode;
+}
+
+export function CollapsibleSettings({
+  defaultOpen = false,
+  title,
+  children,
+}: CollapsibleSettingsProps) {
+  return (
+    <Collapsible
+      defaultOpen={defaultOpen}
+      className="border rounded-md bg-muted/30 dark:bg-muted/20"
+    >
+      <CollapsibleTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="flex items-center justify-start gap-1.5 p-0 h-auto font-normal text-xs text-foreground/80 dark:text-foreground/90 hover:text-foreground hover:!bg-transparent transition-colors group w-full py-2 px-4"
+        >
+          <ChevronRight className="h-3.5 w-3.5 transition-transform duration-200 group-data-[state=open]:rotate-90" />
+          {title}
+        </Button>
+      </CollapsibleTrigger>
+      <CollapsibleContent className="space-y-8 mt-4 data-[state=closed]:animate-[collapsible-up_200ms_ease-out] data-[state=open]:animate-[collapsible-down_200ms_ease-out] overflow-hidden px-4 pb-6">
+        {children}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

package/src/components/graph/sidepane/metadata/metadata-editor.tsx

@@ -1,16 +1,13 @@
 'use client';
 
-import { ChevronRight, Info } from 'lucide-react';
+import { Info } from 'lucide-react';
 import { useParams } from 'next/navigation';
 import { useCallback } from 'react';
 import { ExpandableJsonEditor } from '@/components/form/expandable-json-editor';
 import { ModelInheritanceInfo } from '@/components/projects/form/model-inheritance-info';
-import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { CopyableSingleLineCode } from '@/components/ui/copyable-single-line-code';
 import { ExternalLink } from '@/components/ui/external-link';
-import { CollapsibleInfoCard } from '@/components/ui/info-card';
 import {
   getExecutionLimitInheritanceStatus,
   getModelInheritanceStatus,
@@ -25,12 +22,36 @@ import { useRuntimeConfig } from '@/contexts/runtime-config-context';
 import { useGraphStore } from '@/features/graph/state/use-graph-store';
 import { useAutoPrefillIdZustand } from '@/hooks/use-auto-prefill-id-zustand';
 import { useProjectData } from '@/hooks/use-project-data';
+import { CollapsibleSettings } from '../collapsible-settings';
 import { ExpandableTextArea } from '../nodes/expandable-text-area';
 import { InputField, TextareaField } from '../nodes/form-fields';
 import { ModelSelector } from '../nodes/model-selector';
 import { SectionHeader } from '../section';
 import { ContextConfigForm } from './context-config';
 
+const ExecutionLimitInheritanceInfo = () => {
+  return (
+    <ul className="space-y-1.5 list-disc list-outside pl-4">
+      <li>
+        <span className="font-medium">transferCountIs</span>: Project → Graph only (controls
+        transfers between agents)
+      </li>
+      <li>
+        <span className="font-medium">Explicit settings</span> always take precedence over inherited
+        values
+      </li>
+      <li>
+        <span className="font-medium">Default fallback</span>: transferCountIs = 10 if no value is
+        set anywhere
+      </li>
+      <li>
+        <span className="font-medium">Graph scope</span>: This limit applies to all agents within
+        this graph
+      </li>
+    </ul>
+  );
+};
+
 function MetadataEditor() {
   const params = useParams();
   const metadata = useGraphStore((state) => state.metadata);
@@ -146,6 +167,12 @@ function MetadataEditor() {
         <SectionHeader
           title="Default models"
           description="Set default models that will be inherited by agents that don't have their own models configured."
+          titleTooltip={
+            <div>
+              <p>How model inheritance works:</p>
+              <ModelInheritanceInfo />
+            </div>
+          }
         />
         <div className="relative space-y-2">
           <ModelSelector
@@ -180,169 +207,151 @@ function MetadataEditor() {
           <p className="text-xs text-muted-foreground">Primary model for general agent responses</p>
         </div>
 
-        <Collapsible
+        <CollapsibleSettings
           defaultOpen={!!models?.structuredOutput || !!models?.summarizer}
-          className="border rounded-md bg-muted/30 dark:bg-muted/20"
+          title="Advanced model options"
         >
-          <CollapsibleTrigger asChild>
-            <Button
-              variant="ghost"
-              size="sm"
-              className="flex items-center justify-start gap-1.5 p-0 h-auto font-normal text-xs text-foreground/80 dark:text-foreground/90 hover:text-foreground hover:!bg-transparent transition-colors group w-full py-2 px-4"
-            >
-              <ChevronRight className="h-3.5 w-3.5 transition-transform duration-200 group-data-[state=open]:rotate-90" />
-              Advanced model options
-            </Button>
-          </CollapsibleTrigger>
-          <CollapsibleContent className="space-y-8 mt-4 data-[state=closed]:animate-[collapsible-up_200ms_ease-out] data-[state=open]:animate-[collapsible-down_200ms_ease-out] overflow-hidden px-4 pb-6">
-            <div className="relative space-y-2">
-              <ModelSelector
-                value={models?.structuredOutput?.model || ''}
-                inheritedValue={
-                  project?.models?.structuredOutput?.model ||
-                  models?.base?.model ||
-                  project?.models?.base?.model
-                }
-                onValueChange={(value) => {
-                  const newModels = {
-                    ...(models || {}),
-                    structuredOutput: value
-                      ? {
-                          ...(models?.structuredOutput || {}),
-                          model: value,
-                        }
-                      : undefined,
-                  };
-                  updateMetadata('models', newModels);
-                }}
-                label={
-                  <div className="flex items-center gap-2">
-                    Structured output model
-                    <InheritanceIndicator
-                      {...getModelInheritanceStatus(
-                        'graph',
-                        models?.structuredOutput?.model,
-                        project?.models?.structuredOutput?.model
-                      )}
-                      size="sm"
-                    />
-                  </div>
-                }
-              />
-              <p className="text-xs text-muted-foreground">
-                Model for structured outputs and components (defaults to base model)
-              </p>
-            </div>
-            <div className="relative space-y-2">
-              <ModelSelector
-                value={models?.summarizer?.model || ''}
-                inheritedValue={
-                  project?.models?.summarizer?.model ||
-                  models?.base?.model ||
-                  project?.models?.base?.model
-                }
-                onValueChange={(value) => {
-                  const newModels = {
-                    ...(models || {}),
-                    summarizer: value
-                      ? {
-                          ...(models?.summarizer || {}),
-                          model: value,
-                        }
-                      : undefined,
-                  };
-                  updateMetadata('models', newModels);
-                }}
-                label={
-                  <div className="flex items-center gap-2">
-                    Summarizer model
-                    <InheritanceIndicator
-                      {...getModelInheritanceStatus(
-                        'graph',
-                        models?.summarizer?.model,
-                        project?.models?.summarizer?.model
-                      )}
-                      size="sm"
-                    />
-                  </div>
-                }
-              />
-              <p className="text-xs text-muted-foreground">
-                Model for summarization tasks (defaults to base model)
-              </p>
-            </div>
-          </CollapsibleContent>
-        </Collapsible>
-
-        <CollapsibleInfoCard title="How model inheritance works:" Icon={Info}>
-          <ModelInheritanceInfo />
-        </CollapsibleInfoCard>
-
-        {/* Base Model Provider Options */}
-        {models?.base?.model && (
-          <ExpandableJsonEditor
-            name="base-provider-options"
-            label="Base model provider options"
-            onChange={(value) => {
-              updateMetadata('models', {
-                ...(models || {}),
-                base: {
-                  model: models.base?.model || '',
-                  providerOptions: value,
-                },
-              });
-            }}
-            value={models.base.providerOptions || ''}
-            placeholder={`{
+          {/* Base Model Provider Options */}
+          {models?.base?.model && (
+            <ExpandableJsonEditor
+              name="base-provider-options"
+              label="Base model provider options"
+              onChange={(value) => {
+                updateMetadata('models', {
+                  ...(models || {}),
+                  base: {
+                    model: models.base?.model || '',
+                    providerOptions: value,
+                  },
+                });
+              }}
+              value={models.base.providerOptions || ''}
+              placeholder={`{
     "temperature": 0.7,
     "maxTokens": 2048
 }`}
-          />
-        )}
+            />
+          )}
 
-        {/* Structured Output Model Provider Options */}
-        {models?.structuredOutput?.model && (
-          <ExpandableJsonEditor
-            name="structured-provider-options"
-            label="Structured output model provider options"
-            onChange={(value) => {
-              updateMetadata('models', {
-                ...(models || {}),
-                structuredOutput: {
-                  model: models.structuredOutput?.model || '',
-                  providerOptions: value,
-                },
-              });
-            }}
-            value={models.structuredOutput.providerOptions || ''}
-            placeholder={`{
+          <div className="relative space-y-2">
+            <ModelSelector
+              value={models?.structuredOutput?.model || ''}
+              inheritedValue={
+                project?.models?.structuredOutput?.model ||
+                models?.base?.model ||
+                project?.models?.base?.model
+              }
+              onValueChange={(value) => {
+                const newModels = {
+                  ...(models || {}),
+                  structuredOutput: value
+                    ? {
+                        ...(models?.structuredOutput || {}),
+                        model: value,
+                      }
+                    : undefined,
+                };
+                updateMetadata('models', newModels);
+              }}
+              label={
+                <div className="flex items-center gap-2">
+                  Structured output model
+                  <InheritanceIndicator
+                    {...getModelInheritanceStatus(
+                      'graph',
+                      models?.structuredOutput?.model,
+                      project?.models?.structuredOutput?.model
+                    )}
+                    size="sm"
+                  />
+                </div>
+              }
+            />
+            <p className="text-xs text-muted-foreground">
+              Model for structured outputs and components (defaults to base model)
+            </p>
+          </div>
+          {/* Structured Output Model Provider Options */}
+          {models?.structuredOutput?.model && (
+            <ExpandableJsonEditor
+              name="structured-provider-options"
+              label="Structured output model provider options"
+              onChange={(value) => {
+                updateMetadata('models', {
+                  ...(models || {}),
+                  structuredOutput: {
+                    model: models.structuredOutput?.model || '',
+                    providerOptions: value,
+                  },
+                });
+              }}
+              value={models.structuredOutput.providerOptions || ''}
+              placeholder={`{
   "temperature": 0.1,
   "maxTokens": 1024
 }`}
-          />
-        )}
-
-        {/* Summarizer Model Provider Options */}
-        {models?.summarizer?.model && (
-          <ExpandableJsonEditor
-            name="summarizer-provider-options"
-            label="Summarizer model provider options"
-            onChange={(value) => {
-              updateMetadata('models', {
-                ...(models || {}),
-                summarizer: {
-                  model: models.summarizer?.model || '',
-                  providerOptions: value,
-                },
-              });
-            }}
-            value={models.summarizer.providerOptions || ''}
-            placeholder={`{
+            />
+          )}
+          <div className="relative space-y-2">
+            <ModelSelector
+              value={models?.summarizer?.model || ''}
+              inheritedValue={
+                project?.models?.summarizer?.model ||
+                models?.base?.model ||
+                project?.models?.base?.model
+              }
+              onValueChange={(value) => {
+                const newModels = {
+                  ...(models || {}),
+                  summarizer: value
+                    ? {
+                        ...(models?.summarizer || {}),
+                        model: value,
+                      }
+                    : undefined,
+                };
+                updateMetadata('models', newModels);
+              }}
+              label={
+                <div className="flex items-center gap-2">
+                  Summarizer model
+                  <InheritanceIndicator
+                    {...getModelInheritanceStatus(
+                      'graph',
+                      models?.summarizer?.model,
+                      project?.models?.summarizer?.model
+                    )}
+                    size="sm"
+                  />
+                </div>
+              }
+            />
+            <p className="text-xs text-muted-foreground">
+              Model for summarization tasks (defaults to base model)
+            </p>
+          </div>
+          {/* Summarizer Model Provider Options */}
+          {models?.summarizer?.model && (
+            <ExpandableJsonEditor
+              name="summarizer-provider-options"
+              label="Summarizer model provider options"
+              onChange={(value) => {
+                updateMetadata('models', {
+                  ...(models || {}),
+                  summarizer: {
+                    model: models.summarizer?.model || '',
+                    providerOptions: value,
+                  },
+                });
+              }}
+              value={models.summarizer.providerOptions || ''}
+              placeholder={`{
   "temperature": 0.3,
   "maxTokens": 1024
 }`}
-          />
-        )}
+            />
+          )}
+        </CollapsibleSettings>
       </div>
 
       <Separator />
@@ -352,6 +361,12 @@ function MetadataEditor() {
         <SectionHeader
           title="Execution limits"
           description="Configure graph-level execution limits for transfers between agents."
+          titleTooltip={
+            <div>
+              <p>How execution limit inheritance works:</p>
+              <ExecutionLimitInheritanceInfo />
+            </div>
+          }
         />
 
         <div className="space-y-2">
@@ -386,26 +401,6 @@ function MetadataEditor() {
             Maximum number of agent transfers per conversation (defaults to 10 if not set)
           </p>
         </div>
-        <CollapsibleInfoCard title="How execution limit inheritance works:" Icon={Info}>
-          <ul className="space-y-1.5 list-disc list-outside pl-4">
-            <li>
-              <span className="font-medium">transferCountIs</span>: Project → Graph only (controls
-              transfers between agents)
-            </li>
-            <li>
-              <span className="font-medium">Explicit settings</span> always take precedence over
-              inherited values
-            </li>
-            <li>
-              <span className="font-medium">Default fallback</span>: transferCountIs = 10 if no
-              value is set anywhere
-            </li>
-            <li>
-              <span className="font-medium">Graph scope</span>: This limit applies to all agents
-              within this graph
-            </li>
-          </ul>
-        </CollapsibleInfoCard>
       </div>
 
       <Separator />
@@ -437,7 +432,7 @@ function MetadataEditor() {
           </div>
 
           {(statusUpdates?.enabled ?? true) && (
-            <>
+            <CollapsibleSettings title="Status updates configuration">
               <div className="space-y-2">
                 <Label htmlFor="status-updates-prompt">Status updates prompt</Label>
                 <Textarea
@@ -450,7 +445,7 @@ function MetadataEditor() {
                     });
                   }}
                   placeholder="Generate a status update describing the current progress..."
-                  className="max-h-32"
+                  className="max-h-32 bg-background"
                 />
                 <p className="text-xs text-muted-foreground">
                   Custom prompt for generating status updates (optional)
@@ -464,6 +459,7 @@ function MetadataEditor() {
                     <div className="flex items-center space-x-2">
                       <Checkbox
                         id="event-based-updates"
+                        className="bg-background"
                         checked={!!statusUpdates?.numEvents}
                         onCheckedChange={(checked) => {
                           if (checked) {
@@ -484,6 +480,7 @@ function MetadataEditor() {
                     <div className="flex items-center space-x-2">
                       <Checkbox
                         id="time-based-updates"
+                        className="bg-background"
                         checked={!!statusUpdates?.timeInSeconds}
                         onCheckedChange={(checked) => {
                           if (checked) {
@@ -520,6 +517,7 @@ function MetadataEditor() {
                         });
                       }}
                       placeholder="10"
+                      className="bg-background"
                     />
                     <p className="text-xs text-muted-foreground">
                       Number of events/steps between status updates (default: 10)
@@ -544,6 +542,7 @@ function MetadataEditor() {
                         });
                       }}
                       placeholder="30"
+                      className="bg-background"
                     />
                     <p className="text-xs text-muted-foreground">
                       Time interval in seconds between status updates (default: 30)
@@ -595,7 +594,7 @@ function MetadataEditor() {
                   description, and JSON schema.
                 </p>
               </div>
-            </>
+            </CollapsibleSettings>
           )}
         </div>
       </div>