@inkeep/agents-manage-ui 0.31.6 → 0.32.0

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

@@ -1,6 +1,6 @@
 {
   "name": "@inkeep/agents-core",
-  "version": "0.31.6",
+  "version": "0.32.0",
   "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",
@@ -9,6 +9,7 @@
   "exports": {
     ".": "./src/index.ts",
     "./constants/models": "./src/constants/models.ts",
+    "./constants/schema-validation": "./src/constants/schema-validation/index.ts",
     "./schema": "./src/db/schema.ts",
     "./types": "./src/types/index.ts",
     "./validation": "./src/validation/index.ts",
@@ -44,7 +45,6 @@
   "dependencies": {
     "@hono/node-server": "^1.14.3",
     "@hono/zod-openapi": "^1.0.2",
-    "@libsql/client": "^0.15.7",
     "@modelcontextprotocol/sdk": "^1.17.2",
     "@nangohq/node": "^0.69.5",
     "@nangohq/types": "^0.69.5",
@@ -66,10 +66,11 @@
     "drizzle-zod": "^0.8.2",
     "exit-hook": "^4.0.0",
     "find-up": "^7.0.0",
-    "hono": "^4.10.3",
+    "hono": "^4.10.4",
     "jmespath": "^0.16.0",
     "jose": "^6.1.0",
     "nanoid": "^5.0.9",
+    "pg": "^8.16.3",
     "pino": "^9.11.0",
     "pino-pretty": "^13.1.1",
     "ts-pattern": "^5.7.1",
@@ -79,10 +80,13 @@
     "keytar": "^7.9.0"
   },
   "devDependencies": {
+    "@electric-sql/pglite": "^0.3.13",
     "@types/jmespath": "^0.15.2",
     "@types/node": "^20.11.24",
+    "@types/pg": "^8.15.6",
     "@vitest/coverage-v8": "^3.2.4",
     "clean-package": "^2.2.0",
+    "drizzle-kit": "^0.31.6",
     "tsx": "^4.19.2",
     "typescript": "^5.9.2",
     "vitest": "^3.2.4"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkeep/agents-manage-ui",
-  "version": "0.31.6",
+  "version": "0.32.0",
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "index.js",
   "types": "index.d.ts",
@@ -90,9 +90,9 @@
     "use-stick-to-bottom": "^1.1.1",
     "zod": "^4.1.11",
     "zustand": "^5.0.7",
-    "@inkeep/agents-core": "^0.31.6",
-    "@inkeep/agents-manage-api": "^0.31.6",
-    "@inkeep/agents-run-api": "^0.31.6"
+    "@inkeep/agents-core": "^0.32.0",
+    "@inkeep/agents-manage-api": "^0.32.0",
+    "@inkeep/agents-run-api": "^0.32.0"
   },
   "devDependencies": {
     "start-server-and-test": "^2.1.2",

package/src/app/utils/format-date.ts

@@ -1,10 +1,33 @@
 /**
- * Formats an ISO date string as "Mon DD, YYYY", e.g. "Jan 20, 2024".
- * @param {string} isoString - An ISO‐formatted date string, e.g. "2024-01-20T14:45:00Z"
+ * Checks if a date string is in PostgreSQL timestamp format and normalizes it to ISO 8601
+ * PostgreSQL format: "2025-11-07 21:48:24.858" or "2025-11-07 21:48:24"
+ * ISO 8601 format: "2025-11-07T21:48:24.858Z"
+ */
+function normalizeDateString(dateString: string | Date): string | Date {
+  if (typeof dateString !== 'string') {
+    return dateString;
+  }
+
+  // PostgreSQL timestamp format pattern: YYYY-MM-DD HH:MM:SS[.mmm]
+  // Matches: "2025-11-07 21:48:24" or "2025-11-07 21:48:24.858"
+  const pgTimestampPattern = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}(\.\d{1,3})?$/;
+
+  if (pgTimestampPattern.test(dateString)) {
+    // Replace space with 'T' and add 'Z' for UTC
+    return dateString.replace(' ', 'T') + 'Z';
+  }
+
+  return dateString;
+}
+
+/**
+ * Formats an ISO date string or PostgreSQL timestamp string as "Mon DD, YYYY", e.g. "Jan 20, 2024".
+ * @param {string} dateString - An ISO‐formatted date string or PostgreSQL timestamp string, e.g. "2024-01-20T14:45:00Z" or "2025-11-07 21:48:24.858"
  * @returns {string} - Formatted date like "Jan 20, 2024"
  */
-export function formatDate(isoString: string) {
-  const date = new Date(isoString);
+export function formatDate(dateString: string) {
+  const normalized = normalizeDateString(dateString);
+  const date = new Date(normalized);
 
   if (Number.isNaN(date.getTime())) {
     return 'Invalid date';
@@ -23,8 +46,9 @@ export function formatDate(isoString: string) {
   }
 }
 
-export function formatDateTime(isoString: string): string {
-  const date = new Date(isoString);
+export function formatDateTime(dateString: string): string {
+  const normalized = normalizeDateString(dateString);
+  const date = new Date(normalized);
   if (Number.isNaN(date.getTime())) return 'Invalid date';
   return new Intl.DateTimeFormat('en-US', {
     month: 'short',
@@ -39,7 +63,8 @@ export function formatDateTime(isoString: string): string {
 
 export function formatDateAgo(dateString: string) {
   try {
-    const date = new Date(dateString);
+    const normalized = normalizeDateString(dateString);
+    const date = new Date(normalized);
 
     if (Number.isNaN(date.getTime())) {
       return 'Invalid date';

package/src/components/agent/agent.tsx

@@ -23,6 +23,7 @@ import {
   deserializeAgentData,
   type ExtendedFullAgentDefinition,
   extractAgentMetadata,
+  isContextConfigParseError,
   serializeAgentData,
   validateSerializedData,
 } from '@/features/agent/domain';
@@ -652,16 +653,36 @@ function AgentReactFlowConsumer({
       });
     }
 
-    const serializedData = serializeAgentData(
-      nodes,
-      edges,
-      metadata,
-      dataComponentLookup,
-      artifactComponentLookup,
-      agentToolConfigLookup,
-      subAgentExternalAgentConfigLookup,
-      subAgentTeamAgentConfigLookup
-    );
+    let serializedData: ReturnType<typeof serializeAgentData>;
+    try {
+      serializedData = serializeAgentData(
+        nodes,
+        edges,
+        metadata,
+        dataComponentLookup,
+        artifactComponentLookup,
+        agentToolConfigLookup,
+        subAgentExternalAgentConfigLookup,
+        subAgentTeamAgentConfigLookup
+      );
+    } catch (error) {
+      if (isContextConfigParseError(error)) {
+        const errorObjects = [
+          {
+            message: error.message,
+            field: error.field,
+            code: 'invalid_json',
+            path: [error.field],
+          },
+        ];
+        const errorSummary = parseAgentValidationErrors(JSON.stringify(errorObjects));
+        setErrors(errorSummary);
+        const summaryMessage = getErrorSummaryMessage(errorSummary);
+        toast.error(summaryMessage);
+        return;
+      }
+      throw error;
+    }
 
     const functionToolNodeMap = new Map<string, string>();
     nodes.forEach((node) => {

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

@@ -147,7 +147,7 @@ function MetadataEditor() {
       />
       <div className="space-y-2">
         <ExpandablePromptEditor
-          id="agent-prompt"
+          name="agent-prompt"
           label="Agent prompt"
           value={prompt}
           onChange={(value) => updateMetadata('prompt', value)}

package/src/components/agent/sidepane/nodes/form-fields.tsx

@@ -1,5 +1,5 @@
 import { Info } from 'lucide-react';
-import { forwardRef } from 'react';
+import type { ChangeEvent, FC, Ref } from 'react';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
@@ -11,7 +11,7 @@ interface BaseFieldProps {
   name: string;
   label: string;
   value: string;
-  onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  onChange: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
   placeholder?: string;
   error?: string;
   className?: string;
@@ -23,115 +23,112 @@ interface BaseFieldProps {
 
 interface InputFieldProps extends BaseFieldProps {
   type?: 'text' | 'email' | 'password' | 'url';
+  ref?: Ref<HTMLInputElement>;
 }
 
 interface TextareaFieldProps extends BaseFieldProps {
   maxHeight?: string;
+  ref?: Ref<HTMLTextAreaElement>;
 }
 
-export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
-  (
-    {
-      id,
-      name,
-      label,
-      value,
-      onChange,
-      placeholder,
-      error,
-      className = '',
-      description,
-      tooltip,
-      type = 'text',
-      isRequired = false,
-      disabled = false,
-    },
-    ref
-  ) => {
-    return (
-      <div className="space-y-2">
-        <Label htmlFor={id} className={cn(error ? 'text-red-600' : '', 'gap-1')}>
-          {label}
-          {isRequired && <span className="text-red-500">*</span>}
-          {tooltip && (
-            <Tooltip>
-              <TooltipTrigger>
-                <Info className="w-3 h-3 text-muted-foreground ml-1" />
-              </TooltipTrigger>
-              <TooltipContent className="break-words">{tooltip}</TooltipContent>
-            </Tooltip>
-          )}
-        </Label>
-        <Input
-          ref={ref}
-          id={id}
-          name={name}
-          type={type}
-          value={value}
-          onChange={onChange}
-          placeholder={placeholder}
-          data-invalid={error ? '' : undefined}
-          className={`w-full data-invalid:border-red-300 data-invalid:focus-visible:border-red-300 data-invalid:focus-visible:ring-red-300 ${className}`}
-          disabled={disabled}
-        />
-        {error && <p className="text-sm text-red-600">{error}</p>}
-        {description && <p className="text-xs text-muted-foreground">{description}</p>}
-      </div>
-    );
-  }
-);
+export const InputField: FC<InputFieldProps> = ({
+  id,
+  name,
+  label,
+  value,
+  onChange,
+  placeholder,
+  error,
+  className,
+  description,
+  tooltip,
+  type = 'text',
+  isRequired,
+  disabled,
+  ref,
+}) => {
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={id} className={cn(error && 'text-red-600', 'gap-1')}>
+        {label}
+        {isRequired && <span className="text-red-500">*</span>}
+        {tooltip && (
+          <Tooltip>
+            <TooltipTrigger>
+              <Info className="w-3 h-3 text-muted-foreground ml-1" />
+            </TooltipTrigger>
+            <TooltipContent className="break-words">{tooltip}</TooltipContent>
+          </Tooltip>
+        )}
+      </Label>
+      <Input
+        ref={ref}
+        id={id}
+        name={name}
+        type={type}
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        aria-invalid={error ? 'true' : undefined}
+        className={cn(
+          'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
+          className
+        )}
+        disabled={disabled}
+      />
+      {error && <p className="text-sm text-red-600">{error}</p>}
+      {description && <p className="text-xs text-muted-foreground">{description}</p>}
+    </div>
+  );
+};
 
-InputField.displayName = 'InputField';
-
-export const TextareaField = forwardRef<HTMLTextAreaElement, TextareaFieldProps>(
-  (
-    {
-      id,
-      name,
-      label,
-      value,
-      onChange,
-      placeholder,
-      error,
-      className = '',
-      description,
-      tooltip,
-      maxHeight = 'max-h-96',
-      isRequired = false,
-      disabled = false,
-    },
-    ref
-  ) => {
-    return (
-      <div className="space-y-2">
-        <Label htmlFor={id} className={cn(error ? 'text-red-600' : '', 'gap-1')}>
-          {label}
-          {isRequired && <span className="text-red-500">*</span>}
-          {tooltip && (
-            <Tooltip>
-              <TooltipTrigger>
-                <Info className="w-3 h-3 text-muted-foreground ml-1" />
-              </TooltipTrigger>
-              <TooltipContent className="break-words">{tooltip}</TooltipContent>
-            </Tooltip>
-          )}
-        </Label>
-        <Textarea
-          ref={ref}
-          id={id}
-          name={name}
-          value={value}
-          onChange={onChange}
-          placeholder={placeholder}
-          data-invalid={error ? '' : undefined}
-          className={`w-full ${maxHeight} data-invalid:border-red-300 data-invalid:focus-visible:border-red-300 data-invalid:focus-visible:ring-red-300 ${className}`}
-          disabled={disabled}
-        />
-        {error && <p className="text-sm text-red-600">{error}</p>}
-        {description && <p className="text-xs text-muted-foreground">{description}</p>}
-      </div>
-    );
-  }
-);
-
-TextareaField.displayName = 'TextareaField';
+export const TextareaField: FC<TextareaFieldProps> = ({
+  id,
+  name,
+  label,
+  value,
+  onChange,
+  placeholder,
+  error,
+  className,
+  description,
+  tooltip,
+  maxHeight = 'max-h-96',
+  isRequired,
+  disabled,
+  ref,
+}) => {
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={id} className={cn(error && 'text-red-600', 'gap-1')}>
+        {label}
+        {isRequired && <span className="text-red-500">*</span>}
+        {tooltip && (
+          <Tooltip>
+            <TooltipTrigger>
+              <Info className="w-3 h-3 text-muted-foreground ml-1" />
+            </TooltipTrigger>
+            <TooltipContent className="break-words">{tooltip}</TooltipContent>
+          </Tooltip>
+        )}
+      </Label>
+      <Textarea
+        ref={ref}
+        id={id}
+        name={name}
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        aria-invalid={error ? 'true' : undefined}
+        className={cn(
+          'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
+          maxHeight,
+          className
+        )}
+        disabled={disabled}
+      />
+      {error && <p className="text-sm text-red-600">{error}</p>}
+      {description && <p className="text-xs text-muted-foreground">{description}</p>}
+    </div>
+  );
+};

package/src/components/agent/sidepane/nodes/sub-agent-node-editor.tsx

@@ -144,7 +144,8 @@ export function SubAgentNodeEditor({
 
       <div className="space-y-2">
         <ExpandablePromptEditor
-          id="prompt"
+          key={selectedNode.id}
+          name="prompt"
           value={selectedNode.data.prompt}
           onChange={(value) => updatePath('prompt', value)}
           placeholder="You are a helpful assistant..."

package/src/components/agent/sidepane/sidepane.tsx

@@ -2,6 +2,7 @@ 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 { useAgentStore } from '@/features/agent/state/use-agent-store';
 import { useAgentErrors } from '@/hooks/use-agent-errors';
 import type { ArtifactComponent } from '@/lib/api/artifact-components';
 import type { Credential } from '@/lib/api/credentials';
@@ -64,6 +65,7 @@ export function SidePane({
   const selectedNode = useNodesData(selectedNodeId || '');
   const edges = useEdges();
   const { hasFieldError, getFieldErrorMessage, getFirstErrorField } = useAgentErrors();
+  const errors = useAgentStore((state) => state.errors);
 
   const selectedEdge = useMemo(
     () => (selectedEdgeId ? edges.find((edge) => edge.id === selectedEdgeId) : null),
@@ -183,6 +185,8 @@ export function SidePane({
     credentialLookup,
     subAgentExternalAgentConfigLookup,
     subAgentTeamAgentConfigLookup,
+    // Rerender sidepane when errors changes
+    errors,
   ]);
 
   const showBackButton = selectedNode || selectedEdge;

package/src/components/editors/code-editor.tsx

@@ -10,10 +10,21 @@ interface CodeEditorProps extends Omit<ComponentProps<typeof MonacoEditor>, 'uri
 export const CodeEditor: FC<CodeEditorProps> = ({
   uri,
   placeholder = 'Enter code...',
+  editorOptions,
   ...props
 }) => {
   const id = useId();
   uri ??= `${id}.jsx`;
 
-  return <MonacoEditor uri={uri} placeholder={placeholder} {...props} />;
+  return (
+    <MonacoEditor
+      uri={uri}
+      placeholder={placeholder}
+      editorOptions={{
+        ariaLabel: 'Code editor',
+        ...editorOptions,
+      }}
+      {...props}
+    />
+  );
 };

package/src/components/editors/expandable-code-editor.tsx

@@ -29,26 +29,30 @@ export function ExpandableCodeEditor({
   isRequired,
 }: ExpandableCodeEditorProps) {
   const [open, setOpen] = useState(false);
-
+  const uri = `${open ? 'expanded-' : ''}${name}.jsx` as const;
+  const id = `${name}-label`;
   return (
     <ExpandableField
+      id={id}
       open={open}
       onOpenChange={setOpen}
-      name={name}
+      uri={uri}
       label={label}
       className={className}
       isRequired={isRequired}
+      hasError={!!error}
     >
       <CodeEditor
-        id={name}
+        uri={uri}
         value={value}
         onChange={onChange}
         placeholder={placeholder}
-        aria-invalid={!!error}
+        aria-invalid={error ? 'true' : undefined}
         hasDynamicHeight={!open}
         className={cn(!open && error && 'max-h-96')}
+        aria-labelledby={id}
       />
-      {error && <p className="text-sm mt-1 text-destructive">{error}</p>}
+      {error && <p className="text-sm text-red-600">{error}</p>}
     </ExpandableField>
   );
 }

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

@@ -67,16 +67,18 @@ export function ExpandableJsonEditor({
     !!(externalError || internalError)
   );
   const [open, setOpen] = useState(false);
-
+  const uri = `${open ? 'expanded-' : ''}${name}.json` as const;
   const error = externalError || internalError;
-
+  const id = `${name}-label`;
   return (
     <ExpandableField
+      id={id}
       open={open}
       onOpenChange={setOpen}
-      name={name}
+      uri={uri}
       label={label}
       className={className}
+      hasError={!!error}
       actions={
         <Button
           type="button"
@@ -91,15 +93,16 @@ export function ExpandableJsonEditor({
       }
     >
       <JsonEditor
-        id={name}
+        uri={uri}
         value={value}
         onChange={onChange}
         placeholder={placeholder}
-        aria-invalid={!!error}
+        aria-invalid={error ? 'true' : undefined}
         className={cn(!open && error && 'max-h-96')}
         hasDynamicHeight={!open}
+        aria-labelledby={id}
       />
-      {error && <p className="text-sm mt-1 text-destructive absolute -bottom-6">{error}</p>}
+      {error && <p className="text-sm text-red-600">{error}</p>}
     </ExpandableField>
   );
 }

package/src/components/editors/expandable-prompt-editor.tsx

@@ -7,13 +7,16 @@ import { Button } from '@/components/ui/button';
 import { useMonacoStore } from '@/features/agent/state/use-monaco-store';
 import { cn } from '@/lib/utils';
 
-type PromptEditorProps = ComponentProps<typeof PromptEditor>;
+type PromptEditorProps = ComponentProps<typeof PromptEditor> & {
+  name: string;
+};
 
 export function ExpandablePromptEditor({
   label,
   isRequired = false,
   className,
   error,
+  name,
   ...props
 }: {
   label: string;
@@ -22,7 +25,7 @@ export function ExpandablePromptEditor({
 } & PromptEditorProps) {
   const [open, onOpenChange] = useState(false);
   const monaco = useMonacoStore((state) => state.monaco);
-  const uri = `${open ? 'small' : 'full'}-${props.id}.template` as const;
+  const uri = `${open ? 'expanded-' : ''}${name}.template` as const;
 
   const handleAddVariable = useCallback(() => {
     if (!monaco) {
@@ -45,13 +48,17 @@ export function ExpandablePromptEditor({
     editor.trigger('insert-template-variable', 'editor.action.triggerSuggest', {});
   }, [monaco, uri]);
 
+  const id = `${name}-label`;
+
   return (
     <ExpandableField
+      id={id}
       open={open}
       onOpenChange={onOpenChange}
-      name={props.id || 'expandable-textarea'}
+      uri={uri}
       label={label}
       isRequired={isRequired}
+      hasError={!!error}
       actions={
         <Button
           size="sm"
@@ -68,12 +75,13 @@ export function ExpandablePromptEditor({
       <PromptEditor
         uri={uri}
         autoFocus={open}
-        aria-invalid={!!error}
+        aria-invalid={error ? 'true' : undefined}
         className={cn(!open && 'max-h-96', className)}
         hasDynamicHeight={!open}
+        aria-labelledby={id}
         {...props}
       />
-      {error && <p className="text-sm mt-1 text-destructive absolute -bottom-6">{error}</p>}
+      {error && <p className="text-sm text-red-600">{error}</p>}
     </ExpandableField>
   );
 }

package/src/components/editors/json-editor.tsx

@@ -7,8 +7,17 @@ interface JsonEditorProps extends Omit<ComponentProps<typeof MonacoEditor>, 'uri
   uri?: `${string}.json`;
 }
 
-export const JsonEditor: FC<JsonEditorProps> = ({ uri, ...props }) => {
+export const JsonEditor: FC<JsonEditorProps> = ({ uri, editorOptions, ...props }) => {
   const id = useId();
   uri ??= `${id}.json`;
-  return <MonacoEditor uri={uri} {...props} />;
+  return (
+    <MonacoEditor
+      uri={uri}
+      editorOptions={{
+        ariaLabel: 'JSON editor',
+        ...editorOptions,
+      }}
+      {...props}
+    />
+  );
 };

package/src/components/editors/monaco-editor.tsx

@@ -91,7 +91,7 @@ export const MonacoEditor: FC<MonacoEditorProps> = ({
         '[--vscode-editor-background:transparent]!',
         '[--vscode-editorGutter-background:transparent]!',
         '[--vscode-focusBorder:transparent]!',
-      ].join('\n'),
+      ].join(' '),
       automaticLayout: true,
       minimap: { enabled: false }, // disable the minimap
       overviewRulerLanes: 0, // remove unnecessary error highlight on the scroll