@inkeep/agents-manage-ui 0.18.1 → 0.19.1

package/src/components/{graph → agent}/sidepane/nodes/model-section.tsx

@@ -1,5 +1,5 @@
 import { ExpandableJsonEditor } from '@/components/form/expandable-json-editor';
-import type { AgentNodeData } from '@/components/graph/configuration/node-types';
+import type { AgentNodeData } from '@/components/agent/configuration/node-types';
 import { ModelInheritanceInfo } from '@/components/projects/form/model-inheritance-info';
 import {
   getModelInheritanceStatus,
@@ -13,14 +13,14 @@ interface ModelSectionProps {
   models: AgentNodeData['models'];
   updatePath: (path: string, value: any) => void;
   projectModels?: any;
-  graphModels?: any;
+  agentModels?: any;
 }
 
 export function ModelSection({
   models,
   updatePath,
   projectModels,
-  graphModels,
+  agentModels,
 }: ModelSectionProps) {
   const hasAdvancedOptions = models?.structuredOutput || models?.summarizer;
   const _hasAnyModel = models?.base || models?.structuredOutput || models?.summarizer;
@@ -43,7 +43,7 @@ export function ModelSection({
           onValueChange={(modelValue) => {
             updatePath('models.base.model', modelValue || undefined);
           }}
-          inheritedValue={graphModels?.base?.model || projectModels?.base?.model}
+          inheritedValue={agentModels?.base?.model || projectModels?.base?.model}
           label={
             <div className="flex items-center gap-2">
               Base model
@@ -51,7 +51,7 @@ export function ModelSection({
                 {...getModelInheritanceStatus(
                   'agent',
                   models?.base?.model,
-                  graphModels?.base?.model,
+                  agentModels?.base?.model,
                   projectModels?.base?.model
                 )}
                 size="sm"
@@ -85,10 +85,10 @@ export function ModelSection({
               updatePath('models.structuredOutput.model', modelValue || undefined);
             }}
             inheritedValue={
-              graphModels?.structuredOutput?.model ||
+              agentModels?.structuredOutput?.model ||
               projectModels?.structuredOutput?.model ||
               models?.base?.model ||
-              graphModels?.base?.model ||
+              agentModels?.base?.model ||
               projectModels?.base?.model
             }
             label={
@@ -98,7 +98,7 @@ export function ModelSection({
                   {...getModelInheritanceStatus(
                     'agent',
                     models?.structuredOutput?.model,
-                    graphModels?.structuredOutput?.model,
+                    agentModels?.structuredOutput?.model,
                     projectModels?.structuredOutput?.model
                   )}
                   size="sm"
@@ -134,10 +134,10 @@ export function ModelSection({
               updatePath('models.summarizer.model', modelValue || undefined);
             }}
             inheritedValue={
-              graphModels?.summarizer?.model ||
+              agentModels?.summarizer?.model ||
               projectModels?.summarizer?.model ||
               models?.base?.model ||
-              graphModels?.base?.model ||
+              agentModels?.base?.model ||
               projectModels?.base?.model
             }
             label={
@@ -147,7 +147,7 @@ export function ModelSection({
                   {...getModelInheritanceStatus(
                     'agent',
                     models?.summarizer?.model,
-                    graphModels?.summarizer?.model,
+                    agentModels?.summarizer?.model,
                     projectModels?.summarizer?.model
                   )}
                   size="sm"

package/src/components/{graph → agent}/sidepane/nodes/model-selector.tsx

@@ -2,7 +2,7 @@
 
 import { Check, ChevronsUpDown, Info, X } from 'lucide-react';
 import { useMemo, useState } from 'react';
-import { modelOptions } from '@/components/graph/configuration/model-options';
+import { modelOptions } from '@/components/agent/configuration/model-options';
 import { Button } from '@/components/ui/button';
 import {
   Command,

package/src/components/{graph/sidepane/nodes/agent-node-editor.tsx → agent/sidepane/nodes/sub-agent-node-editor.tsx}

@@ -8,9 +8,9 @@ import {
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Separator } from '@/components/ui/separator';
-import { useGraphStore } from '@/features/graph/state/use-graph-store';
+import { useAgentStore } from '@/features/agent/state/use-agent-store';
+import type { ErrorHelpers } from '@/hooks/use-agent-errors';
 import { useAutoPrefillIdZustand } from '@/hooks/use-auto-prefill-id-zustand';
-import type { ErrorHelpers } from '@/hooks/use-graph-errors';
 import { useNodeEditor } from '@/hooks/use-node-editor';
 import { useProjectData } from '@/hooks/use-project-data';
 import type { ArtifactComponent } from '@/lib/api/artifact-components';
@@ -45,19 +45,19 @@ const ExecutionLimitInheritanceInfo = () => {
   );
 };
 
-interface AgentNodeEditorProps {
+interface SubAgentNodeEditorProps {
   selectedNode: Node<AgentNodeData>;
   dataComponentLookup: Record<string, DataComponent>;
   artifactComponentLookup: Record<string, ArtifactComponent>;
   errorHelpers?: ErrorHelpers;
 }
 
-export function AgentNodeEditor({
+export function SubAgentNodeEditor({
   selectedNode,
   dataComponentLookup,
   artifactComponentLookup,
   errorHelpers,
-}: AgentNodeEditorProps) {
+}: SubAgentNodeEditorProps) {
   const { tenantId, projectId } = useParams<{
     tenantId: string;
     projectId: string;
@@ -65,9 +65,9 @@ export function AgentNodeEditor({
   const selectedDataComponents = selectedNode.data?.dataComponents || [];
   const selectedArtifactComponents = selectedNode.data?.artifactComponents || [];
 
-  // Get project and graph data for inheritance indicators
+  // Get project and agent data for inheritance indicators
   const { project } = useProjectData();
-  const metadata = useGraphStore((state) => state.metadata);
+  const metadata = useAgentStore((state) => state.metadata);
 
   const { updatePath, updateNestedPath, getFieldError, setFieldRef } = useNodeEditor({
     selectedNodeId: selectedNode.id,
@@ -119,7 +119,7 @@ export function AgentNodeEditor({
         onChange={(e) => updatePath('id', e.target.value)}
         placeholder="my-agent"
         error={getFieldError('id')}
-        description="Choose a unique identifier for this agent. Using an existing id will replace that agent."
+        description="Choose a unique identifier for this sub-agent. Using an existing id will replace that sub-agent."
         isRequired
       />
       <TextareaField
@@ -153,7 +153,7 @@ export function AgentNodeEditor({
         models={selectedNode.data.models}
         updatePath={updateModelPath}
         projectModels={project?.models}
-        graphModels={metadata?.models}
+        agentModels={metadata?.models}
       />
       <Separator />
       {/* Agent Execution Limits */}

package/src/components/{graph → agent}/sidepane/sidepane.tsx

@@ -2,11 +2,12 @@ import type { Edge, Node } from '@xyflow/react';
 import { useEdges, useNodesData } from '@xyflow/react';
 import { type LucideIcon, Workflow } from 'lucide-react';
 import { useMemo } from 'react';
-import { useGraphErrors } from '@/hooks/use-graph-errors';
+import { useAgentErrors } from '@/hooks/use-agent-errors';
 import type { ArtifactComponent } from '@/lib/api/artifact-components';
 import type { Credential } from '@/lib/api/credentials';
 import type { DataComponent } from '@/lib/api/data-components';
 import { SidePane as SidePaneLayout } from '../../layout/sidepane';
+import type { AgentToolConfigLookup } from '../agent';
 import { edgeTypeMap } from '../configuration/edge-types';
 import {
   type AgentNodeData,
@@ -16,21 +17,20 @@ import {
   NodeType,
   nodeTypeMap,
 } from '../configuration/node-types';
-import type { AgentToolConfigLookup } from '../graph';
 import EdgeEditor from './edges/edge-editor';
 import { Heading } from './heading';
 import MetadataEditor from './metadata/metadata-editor';
-import { AgentNodeEditor } from './nodes/agent-node-editor';
 import { ExternalAgentNodeEditor } from './nodes/external-agent-node-editor';
 import { FunctionToolNodeEditor } from './nodes/function-tool-node-editor';
 import { MCPServerNodeEditor } from './nodes/mcp-node-editor';
 import { MCPSelector } from './nodes/mcp-selector/mcp-selector';
+import { SubAgentNodeEditor } from './nodes/sub-agent-node-editor';
 
 interface SidePaneProps {
   selectedNodeId: string | null;
   selectedEdgeId: string | null;
   onClose: () => void;
-  backToGraph: () => void;
+  backToAgent: () => void;
   isOpen: boolean;
   dataComponentLookup: Record<string, DataComponent>;
   artifactComponentLookup: Record<string, ArtifactComponent>;
@@ -42,7 +42,7 @@ export function SidePane({
   selectedNodeId,
   selectedEdgeId,
   onClose,
-  backToGraph,
+  backToAgent,
   isOpen,
   dataComponentLookup,
   artifactComponentLookup,
@@ -51,7 +51,7 @@ export function SidePane({
 }: SidePaneProps) {
   const selectedNode = useNodesData(selectedNodeId || '');
   const edges = useEdges();
-  const { hasFieldError, getFieldErrorMessage, getFirstErrorField } = useGraphErrors();
+  const { hasFieldError, getFieldErrorMessage, getFirstErrorField } = useAgentErrors();
 
   const selectedEdge = useMemo(
     () => (selectedEdgeId ? edges.find((edge) => edge.id === selectedEdgeId) : null),
@@ -73,7 +73,7 @@ export function SidePane({
       heading = edgeConfig?.name || 'Connection';
       HeadingIcon = edgeConfig?.Icon;
     } else {
-      heading = 'Graph';
+      heading = 'Agent';
       HeadingIcon = Workflow;
     }
 
@@ -92,9 +92,9 @@ export function SidePane({
       };
 
       switch (nodeType) {
-        case NodeType.Agent:
+        case NodeType.SubAgent:
           return (
-            <AgentNodeEditor
+            <SubAgentNodeEditor
               selectedNode={selectedNode as Node<AgentNodeData>}
               dataComponentLookup={dataComponentLookup}
               artifactComponentLookup={artifactComponentLookup}
@@ -156,7 +156,7 @@ export function SidePane({
         <>
           <SidePaneLayout.Header>
             <div className="flex items-center relative">
-              {showBackButton && <SidePaneLayout.BackButton onClick={backToGraph} />}
+              {showBackButton && <SidePaneLayout.BackButton onClick={backToAgent} />}
               <Heading
                 heading={heading}
                 Icon={HeadingIcon}

package/src/components/{graph → agent}/toolbar/toolbar.tsx

@@ -2,7 +2,7 @@ import { Play, Settings } from 'lucide-react';
 import { useEffect, useRef } from 'react';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
-import { useGraphStore } from '@/features/graph/state/use-graph-store';
+import { useAgentStore } from '@/features/agent/state/use-agent-store';
 import { isMacOs } from '@/lib/utils';
 
 interface ToolbarProps {
@@ -18,7 +18,7 @@ export function Toolbar({
   toggleSidePane,
   setShowPlayground,
 }: ToolbarProps) {
-  const dirty = useGraphStore((state) => state.dirty);
+  const dirty = useAgentStore((state) => state.dirty);
   const saveButtonRef = useRef<HTMLButtonElement>(null);
   const PreviewButton = (
     <Button
@@ -56,8 +56,8 @@ export function Toolbar({
           </TooltipTrigger>
           <TooltipContent>
             {dirty
-              ? 'Please save your changes before trying the graph.'
-              : 'Please save the graph to try it.'}
+              ? 'Please save your changes before trying the agent.'
+              : 'Please save the agent to try it.'}
           </TooltipContent>
         </Tooltip>
       ) : (
@@ -73,7 +73,7 @@ export function Toolbar({
       </Button>
       <Button type="button" variant="outline" onClick={toggleSidePane}>
         <Settings className="w-4 h-4" />
-        Graph Settings
+        Agent Settings
       </Button>
     </div>
   );

package/src/components/{graphs/graph-item-menu.tsx → agents/agent-item-menu.tsx}

@@ -8,14 +8,14 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { DeleteGraphConfirmation } from './delete-graph-confirmation';
+import { DeleteAgentConfirmation } from './delete-agent-confirmation';
 
-interface GraphItemMenuProps {
-  graphId: string;
-  graphName?: string;
+interface AgentItemMenuProps {
+  agentId: string;
+  agentName?: string;
 }
 
-export function GraphItemMenu({ graphId, graphName }: GraphItemMenuProps) {
+export function AgentItemMenu({ agentId, agentName }: AgentItemMenuProps) {
   const [isOpen, setIsOpen] = useState(false);
 
   const handleOpenChange = (open: boolean) => {
@@ -47,7 +47,7 @@ export function GraphItemMenu({ graphId, graphName }: GraphItemMenuProps) {
         </DropdownMenuContent>
       </DropdownMenu>
       {isOpen && (
-        <DeleteGraphConfirmation graphId={graphId} graphName={graphName} setIsOpen={setIsOpen} />
+        <DeleteAgentConfirmation agentId={agentId} agentName={agentName} setIsOpen={setIsOpen} />
       )}
     </Dialog>
   );

package/src/components/{graphs/graph-item.tsx → agents/agent-item.tsx}

@@ -10,23 +10,23 @@ import {
   ItemCardRoot,
   ItemCardTitle,
 } from '@/components/ui/item-card';
-import type { Graph } from '@/lib/types/graph-full';
-import { GraphItemMenu } from './graph-item-menu';
+import type { Agent } from '@/lib/types/agent-full';
+import { AgentItemMenu } from './agent-item-menu';
 
-export interface GraphItemProps extends Graph {
+export interface AgentItemProps extends Agent {
   tenantId: string;
   projectId: string;
 }
 
-export function GraphItem({
+export function AgentItem({
   id,
   name,
   description,
   createdAt,
   tenantId,
   projectId,
-}: GraphItemProps) {
-  const linkPath = `/${tenantId}/projects/${projectId}/graphs/${id}`;
+}: AgentItemProps) {
+  const linkPath = `/${tenantId}/projects/${projectId}/agents/${id}`;
 
   return (
     <ItemCardRoot>
@@ -34,7 +34,7 @@ export function GraphItem({
         <ItemCardLink href={linkPath}>
           <ItemCardTitle className="text-sm">{name}</ItemCardTitle>
         </ItemCardLink>
-        <GraphItemMenu graphId={id} graphName={name} />
+        <AgentItemMenu agentId={id} agentName={name} />
       </ItemCardHeader>
       <ItemCardContent>
         <ItemCardDescription hasContent={!!description}>

package/src/components/agents/agents-list.tsx

@@ -0,0 +1,20 @@
+import type { Agent } from '@/lib/types/agent-full';
+import { AgentItem } from './agent-item';
+import { NewAgentItem } from './new-agent-item';
+
+interface AgentListProps {
+  tenantId: string;
+  projectId: string;
+  agent: Agent[];
+}
+
+export async function AgentList({ tenantId, projectId, agent }: AgentListProps) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 md:gap-4">
+      <NewAgentItem tenantId={tenantId} projectId={projectId} />
+      {agent?.map((agent: Agent) => (
+        <AgentItem key={agent.id} {...agent} tenantId={tenantId} projectId={projectId} />
+      ))}
+    </div>
+  );
+}

package/src/components/{graphs/delete-graph-confirmation.tsx → agents/delete-agent-confirmation.tsx}

@@ -4,19 +4,19 @@ import { useParams } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'sonner';
 import { DeleteConfirmation } from '@/components/ui/delete-confirmation';
-import { deleteFullGraphAction } from '@/lib/actions/graph-full';
+import { deleteFullAgentAction } from '@/lib/actions/agent-full';
 
-interface DeleteGraphConfirmationProps {
-  graphId: string;
-  graphName?: string;
+interface DeleteAgentConfirmationProps {
+  agentId: string;
+  agentName?: string;
   setIsOpen: (isOpen: boolean) => void;
 }
 
-export function DeleteGraphConfirmation({
-  graphId,
-  graphName,
+export function DeleteAgentConfirmation({
+  agentId,
+  agentName,
   setIsOpen,
-}: DeleteGraphConfirmationProps) {
+}: DeleteAgentConfirmationProps) {
   const params = useParams();
   const { tenantId, projectId } = params as {
     tenantId: string;
@@ -27,9 +27,9 @@ export function DeleteGraphConfirmation({
   const handleDelete = async () => {
     setIsSubmitting(true);
     try {
-      const result = await deleteFullGraphAction(tenantId, projectId, graphId);
+      const result = await deleteFullAgentAction(tenantId, projectId, agentId);
       if (result.success) {
-        toast.success('Graph deleted.');
+        toast.success('Agent deleted.');
         setIsOpen(false);
       } else {
         toast.error(result.error);
@@ -41,7 +41,7 @@ export function DeleteGraphConfirmation({
 
   return (
     <DeleteConfirmation
-      itemName={graphName || 'this graph'}
+      itemName={agentName || 'this agent'}
       isSubmitting={isSubmitting}
       onDelete={handleDelete}
     />

package/src/components/{graphs/new-graph-item.tsx → agents/new-agent-item.tsx}

@@ -2,19 +2,19 @@ import { Plus } from 'lucide-react';
 import Link from 'next/link';
 import { Card, CardContent } from '../ui/card';
 
-interface NewGraphItemProps {
+interface NewAgentItemProps {
   tenantId: string;
   projectId: string;
 }
 
-export function NewGraphItem({ tenantId, projectId }: NewGraphItemProps) {
+export function NewAgentItem({ tenantId, projectId }: NewAgentItemProps) {
   return (
-    <Link href={`/${tenantId}/projects/${projectId}/graphs/new`} className="group">
+    <Link href={`/${tenantId}/projects/${projectId}/agents/new`} className="group">
       <Card className="h-full bg-transparent border-1 shadow-none hover:bg-background hover:ring-2 hover:ring-accent/50 dark:hover:ring-accent/30 transition-all duration-300 cursor-pointer group border-dashed">
         <CardContent className="flex flex-row items-center justify-center text-center gap-2 flex-1">
           <Plus className="w-4 h-4 text-muted-foreground group-hover:text-foreground transition-colors" />
           <h3 className="font-medium text-sm text-muted-foreground group-hover:text-foreground transition-colors">
-            Create graph
+            Create agent
           </h3>
         </CardContent>
       </Card>

package/src/components/api-keys/api-keys-table.tsx

@@ -8,16 +8,16 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import type { ApiKey } from '@/lib/api/api-keys';
-import type { Graph } from '@/lib/types/graph-full';
+import type { Agent } from '@/lib/types/agent-full';
 import { ApiKeyItemMenu } from './api-key-item-menu';
 import { ExpirationIndicator } from './expiration-indicator';
 
 interface ApiKeysTableProps {
   apiKeys: ApiKey[];
-  graphLookup: Record<string, Graph>;
+  agentLookup: Record<string, Agent>;
 }
 
-export function ApiKeysTable({ apiKeys, graphLookup }: ApiKeysTableProps) {
+export function ApiKeysTable({ apiKeys, agentLookup }: ApiKeysTableProps) {
   return (
     <div className="rounded-lg border">
       <Table>
@@ -45,7 +45,7 @@ export function ApiKeysTable({ apiKeys, graphLookup }: ApiKeysTableProps) {
                   <div className="flex flex-col">
                     <span className="font-medium text-foreground">{apiKey.name || 'No name'}</span>
                     <span className="text-sm text-muted-foreground">
-                      {graphLookup[apiKey.graphId]?.name || apiKey.graphId}
+                      {agentLookup[apiKey.agentId]?.name || apiKey.agentId}
                     </span>
                   </div>
                 </TableCell>

package/src/components/api-keys/form/api-key-form.tsx

@@ -18,7 +18,7 @@ interface ApiKeyFormProps {
   tenantId: string;
   projectId: string;
   initialData?: ApiKeyFormData;
-  graphsOptions: SelectOption[];
+  agentsOptions: SelectOption[];
   onApiKeyCreated?: (apiKeyData: ApiKeyCreateResponse) => void;
 }
 
@@ -56,7 +56,7 @@ export function ApiKeyForm({
   tenantId,
   projectId,
   initialData,
-  graphsOptions,
+  agentsOptions,
   onApiKeyCreated,
 }: ApiKeyFormProps) {
   const form = useForm<ApiKeyFormData>({
@@ -72,7 +72,7 @@ export function ApiKeyForm({
       const name = data.name;
 
       const payload: Partial<ApiKey> = {
-        graphId: data.graphId,
+        agentId: data.agentId,
         expiresAt,
         name,
       };
@@ -114,11 +114,11 @@ export function ApiKeyForm({
         />
         <GenericComboBox
           control={form.control}
-          name="graphId"
-          label="Graph"
-          options={graphsOptions}
-          placeholder="Select a graph"
-          searchPlaceholder="Search graphs..."
+          name="agentId"
+          label="Agent"
+          options={agentsOptions}
+          placeholder="Select an agent"
+          searchPlaceholder="Search agent..."
           isRequired
         />
         <div className="flex justify-end">

package/src/components/api-keys/form/form-configuration.tsx

@@ -2,6 +2,6 @@ import type { ApiKeyFormData } from './validation';
 
 export const defaultValues: ApiKeyFormData = {
   name: '',
-  graphId: '',
+  agentId: '',
   expiresAt: 'never',
 };

package/src/components/api-keys/form/validation.ts

@@ -11,7 +11,7 @@ export const EXPIRATION_DATE_OPTIONS = [
 
 export const apiKeySchema = z.object({
   name: z.string().min(1, 'Please enter a name.'),
-  graphId: z.string().min(1, 'Please select a graph.'),
+  agentId: z.string().min(1, 'Please select an agent.'),
   expiresAt: z.enum(['1d', '1w', '1m', '3m', '1y', 'never'] as const),
 });
 

package/src/components/api-keys/new-api-key-dialog.tsx

@@ -20,14 +20,14 @@ import { ApiKeyForm } from './form/api-key-form';
 interface NewApiKeyDialogProps {
   tenantId: string;
   projectId: string;
-  graphsOptions: SelectOption[];
+  agentsOptions: SelectOption[];
 }
 
-export function NewApiKeyDialog({ tenantId, projectId, graphsOptions }: NewApiKeyDialogProps) {
+export function NewApiKeyDialog({ tenantId, projectId, agentsOptions }: NewApiKeyDialogProps) {
   const [isFormOpen, setIsFormOpen] = useState(false);
   const [createdApiKey, setCreatedApiKey] = useState<ApiKeyCreateResponse | null>(null);
 
-  const hasGraphs = graphsOptions.length > 0;
+  const hasAgents = agentsOptions.length > 0;
 
   const handleApiKeyCreated = (apiKeyData: ApiKeyCreateResponse) => {
     setCreatedApiKey(apiKeyData);
@@ -46,15 +46,15 @@ export function NewApiKeyDialog({ tenantId, projectId, graphsOptions }: NewApiKe
           <TooltipTrigger asChild>
             <div>
               <DialogTrigger asChild>
-                <Button disabled={!hasGraphs}>
+                <Button disabled={!hasAgents}>
                   <Plus className="size-4" /> New API key
                 </Button>
               </DialogTrigger>
             </div>
           </TooltipTrigger>
-          {!hasGraphs && (
+          {!hasAgents && (
             <TooltipContent className="max-w-3xs">
-              Please create a graph first, then you will be able to create an API key.
+              Please create an agent first, then you will be able to create an API key.
             </TooltipContent>
           )}
         </Tooltip>
@@ -67,7 +67,7 @@ export function NewApiKeyDialog({ tenantId, projectId, graphsOptions }: NewApiKe
             <ApiKeyForm
               tenantId={tenantId}
               projectId={projectId}
-              graphsOptions={graphsOptions}
+              agentsOptions={agentsOptions}
               onApiKeyCreated={handleApiKeyCreated}
             />
           </div>

package/src/components/form/prompt-editor.tsx

@@ -11,7 +11,7 @@ import CodeMirror, {
 import { useTheme } from 'next-themes';
 import { cn } from '@/lib/utils';
 import { getContextSuggestions } from '@/lib/context-suggestions';
-import { useGraphStore } from '@/features/graph/state/use-graph-store';
+import { useAgentStore } from '@/features/agent/state/use-agent-store';
 
 // Decoration for template variables
 const templateVariableDecoration = Decoration.mark({
@@ -195,7 +195,7 @@ export const PromptEditor: FC<TextareaWithSuggestionsProps> = ({
     },
   }));
 
-  const contextConfig = useGraphStore((state) => state.metadata.contextConfig);
+  const contextConfig = useAgentStore((state) => state.metadata.contextConfig);
 
   const extensions = useMemo(() => {
     const contextVariables = tryJsonParse(contextConfig.contextVariables);

package/src/components/icons/empty-state/{graphs.tsx → agents.tsx}

@@ -1,4 +1,4 @@
-export const GraphsIcon = () => {
+export const AgentsIcon = () => {
   return (
     <svg
       width="504"
@@ -7,7 +7,7 @@ export const GraphsIcon = () => {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       role="img"
-      aria-label="Graphs"
+      aria-label="Agent"
       className="size-full"
     >
       <g clipPath="url(#clip0_38_332)">

package/src/components/projects/form/form-configuration.ts

@@ -2,7 +2,7 @@ import {
   DEFAULT_ANTHROPIC_BASE_MODEL,
   DEFAULT_ANTHROPIC_STRUCTURED_OUTPUT_MODEL,
   DEFAULT_ANTHROPIC_SUMMARIZER_MODEL,
-} from '@/components/graph/configuration/model-options';
+} from '@/components/agent/configuration/model-options';
 import type { ProjectFormData } from './validation';
 
 export const defaultValues: ProjectFormData = {

package/src/components/projects/form/model-inheritance-info.tsx

@@ -2,7 +2,7 @@ export const ModelInheritanceInfo = () => {
   return (
     <ul className="space-y-1.5 list-disc list-outside pl-4">
       <li>
-        <span className="font-medium">Models</span>: Project → Graph → Agent (partial inheritance -
+        <span className="font-medium">Models</span>: Project → Agent → Agent (partial inheritance -
         missing models only)
       </li>
       <li>

package/src/components/projects/form/project-form.tsx

@@ -174,8 +174,8 @@ export function ProjectForm({
         if (onSuccess) {
           onSuccess(data.id);
         } else {
-          // Navigate to the new project's graphs page
-          router.push(`/${tenantId}/projects/${data.id}/graphs`);
+          // Navigate to the new project's agent page
+          router.push(`/${tenantId}/projects/${data.id}/agent`);
         }
       }
     } catch (error) {