@inkeep/agents-manage-ui 0.35.0 → 0.35.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkeep/agents-manage-ui",
-  "version": "0.35.0",
+  "version": "0.35.1",
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "index.js",
   "types": "index.d.ts",
@@ -94,9 +94,9 @@
     "use-stick-to-bottom": "^1.1.1",
     "zod": "^4.1.11",
     "zustand": "^5.0.7",
-    "@inkeep/agents-core": "^0.35.0",
-    "@inkeep/agents-manage-api": "^0.35.0",
-    "@inkeep/agents-run-api": "^0.35.0"
+    "@inkeep/agents-core": "^0.35.1",
+    "@inkeep/agents-manage-api": "^0.35.1",
+    "@inkeep/agents-run-api": "^0.35.1"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
@@ -137,8 +137,8 @@
     "typecheck:watch": "tsc --noEmit --watch",
     "test": "vitest --run",
     "test:coverage": "vitest --run --coverage",
-    "test:e2e": "cypress open",
-    "test:e2e:run": "cypress run --headless",
+    "test:e2e": "cypress open --config-file cypress/cypress.config.ts",
+    "test:e2e:run": "cypress run --config-file cypress/cypress.config.ts --headless",
     "test:e2e:ci": "start-server-and-test start http-get://localhost:3000/default/projects test:e2e:run"
   }
 }

package/src/app/[tenantId]/projects/[projectId]/artifacts/[artifactComponentId]/page.tsx

@@ -10,34 +10,23 @@ export default async function ArtifactComponentPage({
   params,
 }: PageProps<'/[tenantId]/projects/[projectId]/artifacts/[artifactComponentId]'>) {
   const { artifactComponentId, tenantId, projectId } = await params;
-
-  let artifactComponent: Awaited<ReturnType<typeof fetchArtifactComponent>>;
   try {
-    artifactComponent = await fetchArtifactComponent(tenantId, projectId, artifactComponentId);
-  } catch (error) {
-    return (
-      <FullPageError
-        error={error as Error}
-        link={`/${tenantId}/projects/${projectId}/artifacts`}
-        linkText="Back to artifacts"
-        context="artifact"
-      />
+    const { name, description, props } = await fetchArtifactComponent(
+      tenantId,
+      projectId,
+      artifactComponentId
     );
-  }
-
-  const { name, description, props } = artifactComponent;
-  return (
-    <BodyTemplate
-      breadcrumbs={[
-        {
-          label: 'Artifacts',
-          href: `/${tenantId}/projects/${projectId}/artifacts`,
-        },
-        { label: artifactComponent.name },
-      ]}
-    >
-      <MainContent>
-        <div className="max-w-2xl mx-auto py-4">
+    return (
+      <BodyTemplate
+        breadcrumbs={[
+          {
+            label: 'Artifacts',
+            href: `/${tenantId}/projects/${projectId}/artifacts`,
+          },
+          { label: name },
+        ]}
+      >
+        <MainContent>
           <ArtifactComponentForm
             tenantId={tenantId}
             projectId={projectId}
@@ -49,8 +38,17 @@ export default async function ArtifactComponentPage({
               props,
             }}
           />
-        </div>
-      </MainContent>
-    </BodyTemplate>
-  );
+        </MainContent>
+      </BodyTemplate>
+    );
+  } catch (error) {
+    return (
+      <FullPageError
+        error={error as Error}
+        link={`/${tenantId}/projects/${projectId}/artifacts`}
+        linkText="Back to artifacts"
+        context="artifact"
+      />
+    );
+  }
 }

package/src/app/[tenantId]/projects/[projectId]/artifacts/new/page.tsx

@@ -17,9 +17,7 @@ async function NewArtifactComponentPage({
       ]}
     >
       <MainContent>
-        <div className="max-w-2xl mx-auto py-4">
-          <ArtifactComponentForm tenantId={tenantId} projectId={projectId} />
-        </div>
+        <ArtifactComponentForm tenantId={tenantId} projectId={projectId} />
       </MainContent>
     </BodyTemplate>
   );

package/src/app/[tenantId]/projects/[projectId]/artifacts/page.tsx

@@ -16,53 +16,47 @@ async function ArtifactComponentsPage({
   params,
 }: PageProps<'/[tenantId]/projects/[projectId]/artifacts'>) {
   const { tenantId, projectId } = await params;
-
-  let artifacts: Awaited<ReturnType<typeof fetchArtifactComponents>>;
   try {
-    artifacts = await fetchArtifactComponents(tenantId, projectId);
+    const { data } = await fetchArtifactComponents(tenantId, projectId);
+    return (
+      <BodyTemplate
+        breadcrumbs={[
+          {
+            label: 'Artifacts',
+            href: `/${tenantId}/projects/${projectId}/artifacts`,
+          },
+        ]}
+      >
+        <MainContent className="min-h-full">
+          {data.length > 0 ? (
+            <>
+              <PageHeader
+                title="Artifacts"
+                description={artifactDescription}
+                action={
+                  <Button asChild>
+                    <Link href={`/${tenantId}/projects/${projectId}/artifacts/new`}>
+                      <Plus className="size-4" /> New artifact
+                    </Link>
+                  </Button>
+                }
+              />
+              <ArtifactComponentsList tenantId={tenantId} projectId={projectId} artifacts={data} />
+            </>
+          ) : (
+            <EmptyState
+              title="No artifacts yet."
+              description={artifactDescription}
+              link={`/${tenantId}/projects/${projectId}/artifacts/new`}
+              linkText="Create artifact"
+            />
+          )}
+        </MainContent>
+      </BodyTemplate>
+    );
   } catch (error) {
     return <FullPageError error={error as Error} context="artifacts" />;
   }
-  return (
-    <BodyTemplate
-      breadcrumbs={[
-        {
-          label: 'Artifacts',
-          href: `/${tenantId}/projects/${projectId}/artifacts`,
-        },
-      ]}
-    >
-      <MainContent className="min-h-full">
-        {artifacts.data.length > 0 ? (
-          <>
-            <PageHeader
-              title="Artifacts"
-              description={artifactDescription}
-              action={
-                <Button asChild>
-                  <Link href={`/${tenantId}/projects/${projectId}/artifacts/new`}>
-                    <Plus className="size-4" /> New artifact
-                  </Link>
-                </Button>
-              }
-            />
-            <ArtifactComponentsList
-              tenantId={tenantId}
-              projectId={projectId}
-              artifacts={artifacts.data}
-            />
-          </>
-        ) : (
-          <EmptyState
-            title="No artifacts yet."
-            description={artifactDescription}
-            link={`/${tenantId}/projects/${projectId}/artifacts/new`}
-            linkText="Create artifact"
-          />
-        )}
-      </MainContent>
-    </BodyTemplate>
-  );
 }
 
 export default ArtifactComponentsPage;

package/src/app/accept-invitation/[invitationId]/page.tsx

@@ -6,13 +6,14 @@ import { useEffect, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { useAuthSession } from '@/hooks/use-auth';
-import { authClient } from '@/lib/auth-client';
+import { useAuthClient } from '@/lib/auth-client';
 
 export default function AcceptInvitationPage() {
   const params = useParams();
   const router = useRouter();
   const { user, isLoading: isAuthLoading } = useAuthSession();
   const invitationId = params.invitationId as string;
+  const authClient = useAuthClient();
 
   const [invitation, setInvitation] = useState<any>(null);
   const [isLoading, setIsLoading] = useState(true);

package/src/app/login/page.tsx

@@ -9,12 +9,13 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { authClient } from '@/lib/auth-client';
+import { useAuthClient } from '@/lib/auth-client';
 
 function LoginForm() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const invitationId = searchParams.get('invitation');
+  const authClient = useAuthClient();
 
   // For OAuth, we need the full URL to redirect back to the UI
   const getFullCallbackURL = () => {

package/src/app/no-organization/page.tsx

@@ -5,11 +5,12 @@ import { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { useAuthSession } from '@/hooks/use-auth';
-import { authClient } from '@/lib/auth-client';
+import { useAuthClient } from '@/lib/auth-client';
 
 export default function NoOrganizationPage() {
   const router = useRouter();
   const { user } = useAuthSession();
+  const authClient = useAuthClient();
   const [isSigningOut, setIsSigningOut] = useState(false);
 
   const handleSignOut = async () => {

package/src/components/artifact-components/form/artifact-component-form.tsx

@@ -79,15 +79,15 @@ export function ArtifactComponentForm({
           return;
         }
         toast.success('Artifact updated.');
-      } else {
-        const res = await createArtifactComponentAction(tenantId, projectId, payload);
-        if (!res.success) {
-          toast.error(res.error || 'Failed to create artifact');
-          return;
-        }
-        toast.success('Artifact created.');
-        router.push(`/${tenantId}/projects/${projectId}/artifacts`);
+        return;
+      }
+      const res = await createArtifactComponentAction(tenantId, projectId, payload);
+      if (!res.success) {
+        toast.error(res.error || 'Failed to create artifact');
+        return;
       }
+      toast.success('Artifact created.');
+      router.push(`/${tenantId}/projects/${projectId}/artifacts`);
     } catch (error) {
       console.error('Error submitting artifact:', error);
       const errorMessage = error instanceof Error ? error.message : 'An unexpected error occurred.';
@@ -98,7 +98,7 @@ export function ArtifactComponentForm({
   return (
     <Dialog open={isDeleteOpen} onOpenChange={setIsDeleteOpen}>
       <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <form onSubmit={form.handleSubmit(onSubmit)} className="max-w-3xl mx-auto py-4 space-y-8">
           <GenericInput
             control={form.control}
             name="name"
@@ -114,9 +114,8 @@ export function ArtifactComponentForm({
             disabled={!!id}
             isRequired
             description={
-              id
-                ? ''
-                : 'Choose a unique identifier for this artifact. Using an existing id will replace that artifact.'
+              !id &&
+              'Choose a unique identifier for this artifact. Using an existing id will replace that artifact.'
             }
           />
           <GenericTextarea
@@ -133,6 +132,8 @@ export function ArtifactComponentForm({
             label="Properties"
             placeholder="Enter a valid JSON Schema with inPreview flags, or leave empty to save entire tool result..."
             description="Optional: Define specific fields with inPreview flags, or leave empty to capture the complete tool response."
+            uri="custom-json-schema-artifact-component.json"
+            hasInPreview
           />
           <div className="flex w-full justify-between">
             <Button type="submit" disabled={isSubmitting}>

package/src/components/artifact-components/form/validation.ts

@@ -6,8 +6,8 @@ const jsonSchemaValidation = () =>
   z
     .union([z.string(), z.null(), z.undefined()])
     .transform((value, ctx) => {
-      if (!value || value === '' || value === null) {
-        return undefined;
+      if (!value) {
+        return;
       }
 
       try {
@@ -22,7 +22,7 @@ const jsonSchemaValidation = () =>
           });
           return z.NEVER;
         }
-
+        parsed.required ??= [];
         return parsed;
       } catch (error) {
         ctx.addIssue({

package/src/components/auth/invite-member-dialog.tsx

@@ -14,7 +14,7 @@ import {
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { authClient } from '@/lib/auth-client';
+import { useAuthClient } from '@/lib/auth-client';
 
 interface InviteMemberDialogProps {
   open: boolean;
@@ -24,6 +24,7 @@ interface InviteMemberDialogProps {
 export function InviteMemberDialog({ open, onOpenChange }: InviteMemberDialogProps) {
   const params = useParams();
   const organizationId = params.tenantId as string;
+  const authClient = useAuthClient();
   
   const [email, setEmail] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);

package/src/components/auth/user-menu.tsx

@@ -12,10 +12,11 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { useAuthSession } from '@/hooks/use-auth';
-import { authClient } from '@/lib/auth-client';
+import { useAuthClient } from '@/lib/auth-client';
 
 export function UserMenu() {
   const { user, isLoading } = useAuthSession();
+  const authClient = useAuthClient();
   const router = useRouter();
 
   if (isLoading || !user) {

package/src/components/data-components/form/data-component-form.tsx

@@ -138,6 +138,7 @@ export function DataComponentForm({
             name="props"
             label="Properties"
             placeholder="Enter a valid JSON Schema..."
+            uri="json-schema-data-component.json"
             isRequired
           />
 

package/src/components/data-components/form/validation.ts

@@ -22,7 +22,7 @@ export const dataComponentSchema = z.object({
           });
           return z.NEVER;
         }
-
+        parsed.required ??= [];
         return parsed;
       } catch (error) {
         ctx.addIssue({

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

@@ -119,6 +119,7 @@ export const MonacoEditor: FC<MonacoEditorProps> = ({
       ),
       fontSize: 12,
       lineDecorationsWidth: 0, // removes the blank margin where the extra caret shows
+      editContext: false,
       ...editorOptions,
     });
     editorRef.current = editorInstance;

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

@@ -86,6 +86,7 @@ export const PromptEditor: FC<PromptEditorProps> = ({ uri, editorOptions, onMoun
         autoClosingBrackets: 'never',
         renderLineHighlight: 'none', // disable active line highlight
         ariaLabel: 'Prompt input editor',
+        quickSuggestions: false,
         ...editorOptions,
       }}
       {...props}

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

@@ -1,21 +1,28 @@
 'use client';
 
-import { type FC, type ReactNode, useCallback } from 'react';
+import { type ComponentProps, type FC, type ReactNode, useCallback } from 'react';
 import { JsonEditor } from '@/components/editors/json-editor';
 import { Button } from '@/components/ui/button';
 import { createSchemaTemplate } from '@/lib/json-schema-validation';
 import { formatJson } from '@/lib/utils';
 
-interface StandaloneJsonEditorProps {
-  value?: string;
-  onChange: (value: string) => void;
-  placeholder?: string;
-  disabled?: boolean;
+type JsonEditorProps = ComponentProps<typeof JsonEditor>;
+
+interface StandaloneJsonEditorProps
+  extends Pick<
+    JsonEditorProps,
+    | 'value'
+    //
+    | 'placeholder'
+    | 'disabled'
+    | 'id'
+    | 'className'
+    | 'readOnly'
+    | 'aria-invalid'
+    | 'uri'
+  > {
+  onChange: NonNullable<JsonEditorProps['onChange']>;
   name?: string;
-  id?: string;
-  className?: string;
-  readOnly?: boolean;
-  'aria-invalid'?: boolean;
   actions?: ReactNode;
 }
 

package/src/components/form/__tests__/json-schema-builder.test.ts

@@ -1,5 +1,11 @@
 import type { JSONSchema7 } from 'json-schema';
-import { convertJsonSchemaToFields, fieldsToJsonSchema } from '@/features/agent/state/json-schema';
+import {
+  convertJsonSchemaToFields,
+  type EditableField,
+  fieldsToJsonSchema,
+  jsonSchemaStore,
+  type JSONSchemaWithPreview,
+} from '@/features/agent/state/json-schema';
 import { JSONSchemaFixture } from './json-schema-fixture';
 
 const schemaWithRef: JSONSchema7 = {
@@ -93,6 +99,32 @@ const schemaWithAnyOfResult: JSONSchema7 = {
   title: 'User Contact',
 };
 
+const schemaWithPreview: JSONSchema7 = {
+  type: 'object',
+  properties: {
+    title: { type: 'string', inPreview: true } as JSONSchemaWithPreview,
+    body: { type: 'string' },
+  },
+};
+
+const fieldsWithPreview: EditableField = {
+  id: '__root__',
+  type: 'object',
+  properties: [
+    {
+      id: '__root__.title',
+      isPreview: true,
+      name: 'title',
+      type: 'string',
+    },
+    {
+      id: '__root__.body',
+      name: 'body',
+      type: 'string',
+    },
+  ],
+};
+
 describe('convertJsonSchemaToFields', () => {
   it('should converts json schema to fields', () => {
     const schema = convertJsonSchemaToFields({ schema: JSONSchemaFixture });
@@ -216,4 +248,16 @@ describe('convertJsonSchemaToFields', () => {
     const schema = convertJsonSchemaToFields({ schema: schemaWithAnyOf });
     expect(fieldsToJsonSchema(schema)).toEqual(schemaWithAnyOfResult);
   });
+
+  it('should include preview flags when enabled', () => {
+    jsonSchemaStore.setState({ hasInPreview: true });
+    const schema = convertJsonSchemaToFields({ schema: schemaWithPreview });
+    expect(schema).toEqual(fieldsWithPreview);
+  });
+
+  it('should ignore preview flags when disabled', () => {
+    jsonSchemaStore.setState({ hasInPreview: false });
+    const schema = fieldsToJsonSchema(fieldsWithPreview);
+    expect(schema.properties?.title).toEqual({ type: 'string' });
+  });
 });

package/src/components/form/json-schema-builder.tsx

@@ -1,4 +1,4 @@
-import { PlusIcon, TrashIcon, X } from 'lucide-react';
+import { Info, PlusIcon, TrashIcon, X } from 'lucide-react';
 import type { ComponentProps, Dispatch, FC, ReactNode } from 'react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Badge } from '@/components/ui/badge';
@@ -19,7 +19,6 @@ import {
   fieldsToJsonSchema,
   findFieldById,
   type JsonSchemaStateData,
-  parseFieldsFromJson,
   Types,
   type TypeValues,
   useJsonSchemaActions,
@@ -60,10 +59,13 @@ interface PropertyProps {
 
 const Property: FC<PropertyProps> = ({ fieldId, depth = 0, prefix }) => {
   const selector = useMemo(
-    () => (state: JsonSchemaStateData) => findFieldById(state.fields, fieldId),
+    () => (state: JsonSchemaStateData) => ({
+      field: findFieldById(state.fields, fieldId),
+      hasInPreview: state.hasInPreview,
+    }),
     [fieldId]
   );
-  const field = useJsonSchemaStore(selector);
+  const { field, hasInPreview } = useJsonSchemaStore(selector);
 
   const { updateField, changeType, addChild, removeField, updateEnumValues } =
     useJsonSchemaActions();
@@ -76,7 +78,24 @@ const Property: FC<PropertyProps> = ({ fieldId, depth = 0, prefix }) => {
 
   const inputs = (
     <div className="flex gap-2 items-center" style={{ marginLeft: indentStyle }}>
-      {prefix}
+      {prefix ||
+        (hasInPreview && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              {/* without the wrapping div the checkbox doesn't get the data-state="checked" attribute and the styles are not applied */}
+              <div>
+                <Checkbox
+                  // !! fix warning: Checkbox is changing from uncontrolled to controlled.
+                  checked={!!field.isPreview}
+                  onCheckedChange={(checked) =>
+                    updateField(field.id, { isPreview: checked === true })
+                  }
+                />
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>Mark this field as available immediately in UI</TooltipContent>
+          </Tooltip>
+        ))}
       <PropertyIcon type={field.type} />
       <SelectType
         value={field.type}
@@ -110,7 +129,7 @@ const Property: FC<PropertyProps> = ({ fieldId, depth = 0, prefix }) => {
               {/* without the wrapping div the checkbox doesn't get the data-state="checked" attribute and the styles are not applied */}
               <div>
                 <Checkbox
-                  checked={Boolean(field.isRequired)}
+                  checked={field.isRequired}
                   onCheckedChange={(checked) =>
                     updateField(field.id, { isRequired: checked === true })
                   }
@@ -225,16 +244,21 @@ const PropertyIcon: FC<{ type: TypeValues }> = ({ type }) => {
   return <Icon className={cn('shrink-0', ClassToUse[type])} />;
 };
 
-export const JsonSchemaBuilder: FC<{ value: string; onChange: (newValue: string) => void }> = ({
-  value,
-  onChange,
-}) => {
+export const JsonSchemaBuilder: FC<{
+  value: string;
+  onChange: (newValue: string) => void;
+  hasInPreview?: boolean;
+  hasError?: boolean;
+}> = ({ value, onChange, hasInPreview, hasError }) => {
   const fields = useJsonSchemaStore((state) => state.fields);
   const { addChild, setFields } = useJsonSchemaActions();
+  // Fix race condition in cypress
+  const [isHydrated, setIsHydrated] = useState(false);
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: run only on mount
   useEffect(() => {
-    setFields(parseFieldsFromJson(value));
+    setFields(value, hasInPreview);
+    setIsHydrated(true);
   }, []);
 
   // Calls only on update to avoid race condition with above useEffect
@@ -247,14 +271,38 @@ export const JsonSchemaBuilder: FC<{ value: string; onChange: (newValue: string)
     const schema = fieldsToJsonSchema(root);
     const serialized = JSON.stringify(schema, null, 2);
     onChange(serialized);
-  }, [fields, onChange]);
+  }, [fields, hasInPreview, onChange]);
 
   return (
     <>
       <Table>
         <TableHeader>
-          <TableRow noHover>
-            <TableHead className="w-[15%] text-center">Type</TableHead>
+          <TableRow noHover className={cn(hasError && '[&>th]:text-destructive')}>
+            {hasInPreview && (
+              <TableHead className="w-px p-0">
+                <div className="flex items-center gap-1">
+                  In Preview
+                  <Tooltip>
+                    <TooltipTrigger>
+                      <Info className="size-3" />
+                    </TooltipTrigger>
+                    <TooltipContent className="text-wrap">
+                      Specifies which fields will be immediately available.{' '}
+                      <a
+                        target="_blank"
+                        rel="noopener"
+                        href="https://docs.inkeep.com/visual-builder/structured-outputs/artifact-components#preview-fields"
+                        className="underline text-primary"
+                      >
+                        Learn more
+                      </a>
+                      .
+                    </TooltipContent>
+                  </Tooltip>
+                </div>
+              </TableHead>
+            )}
+            <TableHead className={hasInPreview ? 'w-1/10' : 'w-[15%] text-center'}>Type</TableHead>
             <TableHead className="w-[42%] text-center">Name</TableHead>
             <TableHead className="text-center">Description</TableHead>
             <TableHead className="w-px text-right">Required</TableHead>
@@ -270,6 +318,7 @@ export const JsonSchemaBuilder: FC<{ value: string; onChange: (newValue: string)
         variant="link"
         size="sm"
         className="self-start text-xs"
+        disabled={!isHydrated}
       >
         <PlusIcon />
         Add property