@inkeep/agents-manage-ui 0.35.0 → 0.35.2

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

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

@@ -1,6 +1,6 @@
 'use client';
 
-import type { Control, FieldPath, FieldValues } from 'react-hook-form';
+import { type Control, type FieldPath, type FieldValues, useFormState } from 'react-hook-form';
 import { JsonSchemaBuilder } from '@/components/form/json-schema-builder';
 import { Switch } from '@/components/ui/switch';
 import { useAgentActions, useAgentStore } from '@/features/agent/state/use-agent-store';
@@ -16,6 +16,13 @@ interface JsonSchemaInputProps<T extends FieldValues> {
   description?: string;
   readOnly?: boolean;
   isRequired?: boolean;
+  hasInPreview?: boolean;
+  /**
+   * URIs that start with `json-schema-...` are validated against the JSON schema.
+   * In artifacts, we use custom JSON schemas with `inPreview` fields. To skip
+   * JSON schema validation, use a URI that starts with `custom-json-schema-...`.
+   */
+  uri?: `${string}json-schema-${string}.json`;
 }
 
 export function JsonSchemaInput<T extends FieldValues>({
@@ -27,9 +34,14 @@ export function JsonSchemaInput<T extends FieldValues>({
   description,
   readOnly,
   isRequired = false,
+  hasInPreview,
+  uri,
 }: JsonSchemaInputProps<T>) {
   const isJsonSchemaModeChecked = useAgentStore((state) => state.jsonSchemaMode);
   const { setJsonSchemaMode } = useAgentActions();
+  const formState = useFormState({ name });
+  const fieldState = control.getFieldState(name, formState);
+
   return (
     <FormFieldWrapper
       control={control}
@@ -51,9 +63,16 @@ export function JsonSchemaInput<T extends FieldValues>({
                 onChange={field.onChange}
                 readOnly={readOnly}
                 disabled={disabled}
+                aria-invalid={!!fieldState.error}
+                uri={uri}
               />
             ) : (
-              <JsonSchemaBuilder value={value} onChange={field.onChange} />
+              <JsonSchemaBuilder
+                value={value}
+                onChange={field.onChange}
+                hasInPreview={hasInPreview}
+                hasError={!!fieldState.error}
+              />
             )}
             <span className="absolute flex items-center end-0 -top-[2.5px] gap-2 text-sm font-medium">
               JSON