@inkeep/agents-manage-ui 0.34.1 → 0.35.1

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

@@ -0,0 +1,217 @@
+'use client';
+
+import { Check, Copy, UserPlus } from 'lucide-react';
+import { useParams } from 'next/navigation';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useAuthClient } from '@/lib/auth-client';
+
+interface InviteMemberDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+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);
+  const [error, setError] = useState<string | null>(null);
+  const [invitationLink, setInvitationLink] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!email) {
+      setError('Email is required');
+      return;
+    }
+
+    if (!organizationId) {
+      setError('No organization selected');
+      return;
+    }
+
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      const result = await authClient.organization.inviteMember({
+        email,
+        role: 'member',
+        organizationId,
+      });
+
+      if ('error' in result && result.error) {
+        setError(result.error.message || 'Failed to create invitation');
+        return;
+      }
+
+      // Extract invitation ID from result
+      if ('data' in result && result.data && 'id' in result.data) {
+        const invitationId = result.data.id;
+        const baseUrl = window.location.origin;
+        const link = `${baseUrl}/accept-invitation/${invitationId}`;
+        setInvitationLink(link);
+      } else {
+        setError('Failed to generate invitation link');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create invitation');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleCopyLink = async () => {
+    if (!invitationLink) return;
+    
+    try {
+      await navigator.clipboard.writeText(invitationLink);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      setError('Failed to copy to clipboard');
+    }
+  };
+
+  const handleOpenChange = (newOpen: boolean) => {
+    if (!isSubmitting) {
+      setEmail('');
+      setError(null);
+      setInvitationLink(null);
+      setCopied(false);
+      onOpenChange(newOpen);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <UserPlus className="h-5 w-5" />
+            {invitationLink ? 'Invitation Created' : 'Invite Team Member'}
+          </DialogTitle>
+          <DialogDescription>
+            {invitationLink 
+              ? 'Share this link with the user to accept the invitation.'
+              : 'Create an invitation link for a new member to join your organization.'}
+          </DialogDescription>
+        </DialogHeader>
+
+        {!invitationLink ? (
+          <form onSubmit={handleSubmit}>
+            <div className="grid gap-4 py-4">
+              <div className="grid gap-2">
+                <Label htmlFor="email">Email address</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  disabled={isSubmitting}
+                  autoFocus
+                  required
+                />
+              </div>
+              
+              <div className="rounded-md bg-muted p-3 text-sm">
+                <p className="text-muted-foreground">
+                  <span className="font-medium">Role:</span> Member (read-only access)
+                </p>
+              </div>
+
+              {error && (
+                <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
+                  {error}
+                </div>
+              )}
+            </div>
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => handleOpenChange(false)}
+                disabled={isSubmitting}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" disabled={isSubmitting || !email}>
+                {isSubmitting ? 'Creating...' : 'Create Invitation'}
+              </Button>
+            </DialogFooter>
+          </form>
+        ) : (
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label>Invitation Link</Label>
+              <div className="flex gap-2">
+                <Input
+                  value={invitationLink}
+                  readOnly
+                  className="font-mono text-xs"
+                  onClick={(e) => e.currentTarget.select()}
+                />
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="icon"
+                  onClick={handleCopyLink}
+                  className="shrink-0"
+                >
+                  {copied ? (
+                    <Check className="h-4 w-4 text-green-600" />
+                  ) : (
+                    <Copy className="h-4 w-4" />
+                  )}
+                </Button>
+              </div>
+              <p className="text-xs text-muted-foreground">
+                {copied ? 'Link copied to clipboard!' : 'Click to select or use the copy button'}
+              </p>
+            </div>
+
+            <div className="rounded-md bg-blue-500/10 p-3 text-sm text-blue-600 dark:text-blue-400">
+              <p className="font-medium mb-1">Next Steps:</p>
+              <ol className="list-decimal list-inside space-y-1 text-xs">
+                <li>Share this link with <span className="font-medium">{email}</span></li>
+                <li>They'll sign in or create an account</li>
+                <li>They'll click "Accept Invitation" to join your organization</li>
+              </ol>
+            </div>
+
+            {error && (
+              <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
+                {error}
+              </div>
+            )}
+
+            <DialogFooter>
+              <Button
+                type="button"
+                onClick={() => handleOpenChange(false)}
+              >
+                Done
+              </Button>
+            </DialogFooter>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
+

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

@@ -0,0 +1,57 @@
+'use client';
+
+import { LogOut, User } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { useAuthSession } from '@/hooks/use-auth';
+import { useAuthClient } from '@/lib/auth-client';
+
+export function UserMenu() {
+  const { user, isLoading } = useAuthSession();
+  const authClient = useAuthClient();
+  const router = useRouter();
+
+  if (isLoading || !user) {
+    return null;
+  }
+
+  const handleSignOut = async () => {
+    await authClient.signOut();
+    router.push('/login');
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-7 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sidebar-foreground/80 dark:text-sidebar-foreground"
+        >
+          <User className="h-4 w-4" />
+          <span className="sr-only">User menu</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuLabel className="font-normal">
+          <div className="flex flex-col space-y-1">
+            <p className="text-xs text-muted-foreground">{user.email}</p>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={handleSignOut} className="gap-2">
+          <LogOut className="h-4 w-4" />
+          Sign out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

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

package/src/components/layout/site-header.tsx

@@ -3,6 +3,7 @@ import type { BreadcrumbItem } from '@/components/ui/breadcrumbs';
 import { Breadcrumbs } from '@/components/ui/breadcrumbs';
 import { Separator } from '@/components/ui/separator';
 import { SidebarTrigger } from '@/components/ui/sidebar';
+import { UserMenu } from '../auth/user-menu';
 
 export function SiteHeader({ breadcrumbs }: { breadcrumbs?: BreadcrumbItem[] }) {
   return (
@@ -16,6 +17,7 @@ export function SiteHeader({ breadcrumbs }: { breadcrumbs?: BreadcrumbItem[] })
           className="mx-2 data-[orientation=vertical]:h-4 ml-auto"
         />
         <ThemeToggle />
+        <UserMenu />
       </div>
     </header>
   );