@vertesia/ui 1.0.0-dev.20260227.112605Z → 1.0.0-dev.20260305.083323Z

package/src/features/agent/chat/ModernAgentConversation.tsx

@@ -497,91 +497,85 @@ function StartWorkflowView({
     }
 
     return (
-        <div
-            className={`flex flex-col h-full bg-white dark:bg-gray-900 overflow-hidden border-0 relative ${isDragOver ? 'ring-2 ring-blue-400 ring-inset' : ''}`}
-            onDragEnter={handleDragEnter}
-            onDragOver={handleDragOver}
-            onDragLeave={handleDragLeave}
-            onDrop={handleDrop}
-        >
-            {/* Drag overlay for full-panel file drop */}
-            {isDragOver && (
-                <div className="absolute inset-0 flex items-center justify-center bg-blue-100/80 dark:bg-blue-900/40 z-50 pointer-events-none rounded-lg">
-                    <div className="text-blue-600 dark:text-blue-400 font-medium flex items-center gap-2 text-lg">
-                        <UploadIcon className="size-6" />
-                        Drop files to stage for upload
-                    </div>
-                </div>
-            )}
-
-            {/* Hidden file input */}
-            <input
-                ref={fileInputRef}
-                type="file"
-                multiple
-                accept={acceptedFileTypes}
-                onChange={handleFileInputChange}
-                className="hidden"
-            />
-
-            {/* Header */}
-            <div className="flex items-center justify-between py-2 px-3 border-b border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900">
-                <div className="flex items-center space-x-2">
-                    <div className="p-1">
-                        <Cpu className="size-3.5 text-muted" />
-                    </div>
-                    <span className="font-medium text-sm text-gray-700 dark:text-gray-300">
-                        {title}
-                    </span>
-                </div>
-
-                {/* Close button if needed */}
-                {onClose && !isModal && (
-                    <Button
-                        size="xs"
-                        variant="ghost"
-                        onClick={onClose}
-                        title="Close"
-                        className="text-slate-500 hover:text-slate-700"
-                    >
-                        <XIcon className="size-4" />
-                    </Button>
-                )}
-            </div>
-
-            {/* Empty conversation area with instructions */}
+        <div className="flex flex-col h-full bg-background items-center">
             <div
-                className={`flex-1 overflow-y-auto px-4 py-6 bg-white dark:bg-gray-900 flex flex-col ${
-                    fullWidth ? 'items-start justify-start' : 'items-center justify-center'
-                }`}
+                className={cn(
+                    "flex flex-col h-full w-full overflow-hidden border-0 relative",
+                    fullWidth ? "" : "max-w-4xl"
+                )}
+                onDragEnter={handleDragEnter}
+                onDragOver={handleDragOver}
+                onDragLeave={handleDragLeave}
+                onDrop={handleDrop}
             >
-                {initialMessage && (
-                    <div
-                        className={`px-4 py-3 mb-4 bg-blue-50/80 dark:bg-blue-900/30 border-l-2 border-blue-400 dark:border-blue-500 text-blue-700 dark:text-blue-300 ${
-                            fullWidth ? 'w-full' : 'max-w-md'
-                        }`}
-                    >
-                        {initialMessage}
+                {/* Drag overlay for full-panel file drop */}
+                {isDragOver && (
+                    <div className="absolute inset-0 flex items-center justify-center bg-info-background z-50 pointer-events-none rounded-lg">
+                        <div className="text-info font-medium flex items-center gap-2 text-lg">
+                            <UploadIcon className="size-6" />
+                            Drop files to stage for upload
+                        </div>
                     </div>
                 )}
 
-                <div
-                    className={`bg-white dark:bg-slate-800 p-4 border-l-2 border-blue-400 dark:border-blue-500 ${
-                        fullWidth ? 'w-full' : 'max-w-md'
-                    }`}
-                >
-                    <div className="text-base text-slate-600 dark:text-slate-300 font-medium">
-                        Enter a message to start a conversation
+                {/* Hidden file input */}
+                <input
+                    ref={fileInputRef}
+                    type="file"
+                    multiple
+                    accept={acceptedFileTypes}
+                    onChange={handleFileInputChange}
+                    className="hidden"
+                />
+
+                {/* Header */}
+                <div className="flex items-center justify-between py-2 px-3 border-b border-border bg-background">
+                    <div className="flex items-center space-x-2">
+                        <div className="p-1">
+                            <Cpu className="size-3.5 text-muted" />
+                        </div>
+                        <span className="font-medium text-sm text-foreground">
+                            {title}
+                        </span>
                     </div>
-                    <div className="mt-3 text-sm text-slate-500 dark:text-slate-400">
-                        Type your question below and press Enter or click {startButtonText}{" "}
-                        to begin
+
+                    {/* Close button if needed */}
+                    {onClose && !isModal && (
+                        <Button
+                            size="xs"
+                            variant="ghost"
+                            onClick={onClose}
+                            title="Close"
+                            className="text-muted hover:text-foreground"
+                        >
+                            <XIcon className="size-4" />
+                        </Button>
+                    )}
+                </div>
+
+                {/* Empty conversation area with instructions */}
+                <div className="flex-1 overflow-y-auto bg-background flex flex-col items-center justify-end">
+                    <div className="w-full px-4 py-6">
+                        {initialMessage && (
+                            <div className="px-4 py-3 mb-4 bg-info-background border-l-2 border-info text-info">
+                                {initialMessage}
+                            </div>
+                        )}
+
+                        <div className="bg-card p-4 border-l-2 border-info">
+                            <div className="text-base text-foreground font-medium">
+                                Enter a message to start a conversation
+                            </div>
+                            <div className="mt-3 text-sm text-muted">
+                                Type your question below and press Enter or click {startButtonText}{" "}
+                                to begin
+                            </div>
+                        </div>
                     </div>
                 </div>
-            </div>
 
-            {/* Input Area */}
-            <div className="py-3 px-3 border-t border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900">
+                {/* Input Area */}
+                <div className="py-3 px-3 border-t border-border bg-background">
                 {/* Staged files display */}
                 {stagedFiles.length > 0 && (
                     <div className="flex flex-wrap gap-2 mb-3">
@@ -619,23 +613,21 @@ function StartWorkflowView({
                 </div>
 
                 <div className="flex items-end gap-2">
-                    <div className="flex-1">
-                        <textarea
-                            ref={inputRef}
-                            value={inputValue}
-                            onChange={(e) => setInputValue(e.target.value)}
-                            onKeyDown={handleKeyDown}
-                            placeholder={placeholder}
-                            disabled={isSending}
-                            rows={2}
-                            className="w-full py-2.5 px-3 text-sm border border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-white focus:border-gray-300 dark:focus:border-gray-600 focus:outline-none focus:ring-1 focus:ring-gray-300 dark:focus:ring-gray-600 rounded-md resize-none overflow-hidden"
-                            style={{ minHeight: '60px', maxHeight: '200px' }}
-                        />
-                    </div>
+                    <textarea
+                        ref={inputRef}
+                        value={inputValue}
+                        onChange={(e) => setInputValue(e.target.value)}
+                        onKeyDown={handleKeyDown}
+                        placeholder={placeholder}
+                        disabled={isSending}
+                        rows={2}
+                        className="flex-1 py-2.5 px-3 text-sm border border-border bg-background text-foreground focus:border-ring focus:outline-none focus:ring-1 focus:ring-ring rounded-md resize-none overflow-hidden"
+                        style={{ minHeight: '60px', maxHeight: '200px' }}
+                    />
                     <Button
                         onClick={startWorkflowWithMessage}
                         disabled={!inputValue.trim() || isSending}
-                        className="px-3 py-2.5 bg-gray-800 dark:bg-gray-700 hover:bg-gray-700 dark:hover:bg-gray-600 text-white text-xs rounded-md transition-colors"
+                        className="px-3 py-2.5 text-xs rounded-md transition-colors"
                     >
                         {isSending ? (
                             <Spinner size="sm" className="mr-1.5" />
@@ -645,13 +637,14 @@ function StartWorkflowView({
                         {startButtonText}
                     </Button>
                 </div>
-                <div className="text-xs text-gray-400 dark:text-gray-500 mt-2 text-center">
+                <div className="text-xs text-muted mt-2 text-center">
                     {stagedFiles.length > 0
                         ? `${stagedFiles.length} file${stagedFiles.length > 1 ? 's' : ''} staged - will upload when conversation starts`
                         : 'Enter to send • Shift+Enter for new line'}
                 </div>
             </div>
         </div>
+        </div>
     );
 }
 

package/src/features/store/collections/CreateCollection.tsx

@@ -74,55 +74,57 @@ export function CreateCollectionForm({ onClose, redirect = true, onAddToCollecti
     };
 
     return (
-        <form onSubmit={(e) => e.preventDefault()}>
+        <>
             <ModalBody>
-                <FormItem label="Name" required>
-                    <Input type="text" value={payload.name || ""} onChange={(value) => setPayloadProp("name", value)} />
-                </FormItem>
-                <FormItem label="Description" className="mt-2">
-                    <Textarea
-                        value={payload.description || ""}
-                        onChange={(ev) => setPayloadProp("description", ev.target.value)}
-                    />
-                </FormItem>
-                <FormItem label="Dynamic Collection" className="mt-2" direction="row" description="Dynamically fetch content for the collection based on a query. If not enabled, then content must be added by users or agents.">
-                    <Switch value={payload.dynamic || false} onChange={(value) => setPayloadProp("dynamic", value)} />
-                </FormItem>
-                { !payload.dynamic &&
-                    <FormItem label="Allowed Content Types" className="mt-4" description="Optionally select which content types can be added to the collection. If not set, then all content types are allowed.">
+                <form onSubmit={(e) => e.preventDefault()}>
+                    <FormItem label="Name" required>
+                        <Input type="text" value={payload.name || ""} onChange={(value) => setPayloadProp("name", value)} />
+                    </FormItem>
+                    <FormItem label="Description" className="mt-2">
+                        <Textarea
+                            value={payload.description || ""}
+                            onChange={(ev) => setPayloadProp("description", ev.target.value)}
+                        />
+                    </FormItem>
+                    <FormItem label="Dynamic Collection" className="mt-2" direction="row" description="Dynamically fetch content for the collection based on a query. If not enabled, then content must be added by users or agents.">
+                        <Switch value={payload.dynamic || false} onChange={(value) => setPayloadProp("dynamic", value)} />
+                    </FormItem>
+                    {!payload.dynamic &&
+                        <FormItem label="Allowed Content Types" className="mt-4" description="Optionally select which content types can be added to the collection. If not set, then all content types are allowed.">
+                            <SelectContentType
+                                defaultValue={payload.allowed_types || null}
+                                onChange={(v) => {
+                                    if (Array.isArray(v)) {
+                                        setPayloadProp("allowed_types", v.map(type => type.id));
+                                    } else {
+                                        setPayloadProp("allowed_types", v ? [v.id] : []);
+                                    }
+                                }}
+                                isClearable multiple
+                            />
+                        </FormItem>
+                    }
+                    <FormItem label="Type" className="mt-2" description="Optionally select a content type to assign custom properties and data to the collection.">
                         <SelectContentType
-                            defaultValue={payload.allowed_types || null}
+                            defaultValue={payload.type || null}
                             onChange={(v) => {
                                 if (Array.isArray(v)) {
-                                    setPayloadProp("allowed_types", v.map(type => type.id));
+                                    setPayloadProp("type", v.length > 0 ? v[0].id : null);
                                 } else {
-                                    setPayloadProp("allowed_types", v ? [v.id] : []);
+                                    setPayloadProp("type", v?.id || null);
                                 }
                             }}
-                            isClearable multiple
+                            isClearable
                         />
                     </FormItem>
-                }
-                <FormItem label="Type" className="mt-2" description="Optionally select a content type to assign custom properties and data to the collection.">
-                    <SelectContentType
-                        defaultValue={payload.type || null}
-                        onChange={(v) => {
-                            if (Array.isArray(v)) {
-                                setPayloadProp("type", v.length > 0 ? v[0].id : null);
-                            } else {
-                                setPayloadProp("type", v?.id || null);
-                            }
-                        }}
-                        isClearable
-                    />
-                </FormItem>
+                </form>
             </ModalBody>
             <ModalFooter>
                 <Button isDisabled={isProcessing} onClick={onCreate}>
                     Create Collection
                 </Button>
             </ModalFooter>
-        </form >
+        </>
     );
 }
 

package/src/features/store/types/SelectContentType.tsx

@@ -9,7 +9,7 @@ const optionLabel = (t: ContentObjectTypeItem | null) => {
     return (
         <div>
             <div className="text-sm">{t.name}</div>
-            <div className="text-xs text-gray-500">{t.description}</div>
+            <div className="text-xs text-muted truncate">{t.description}</div>
         </div>
     );
 };

package/src/session/UserSession.ts

@@ -137,6 +137,7 @@ class UserSession {
         } else {
             // Use Firebase logout directly
             console.log('Using Firebase logout');
+            const wasLoggedIn = !!this.authToken;
             if (this.authToken) {
                 getFirebaseAuth().signOut();
             }
@@ -145,6 +146,13 @@ class UserSession {
             this.authToken = undefined;
             this.setSession = undefined;
             this.client.withAuthCallback(undefined);
+            // Navigate to root to avoid React rendering errors when
+            // unmounting deeply nested route components during logout.
+            // Only navigate if user was actually logged in to avoid
+            // infinite reload loop on fresh/incognito sessions.
+            if (wasLoggedIn) {
+                location.replace("/");
+            }
         }
     }
 

package/src/shell/login/TerminalLogin.tsx

@@ -1,10 +1,9 @@
-import { useState } from 'react'
-
 import { AccountRef, ProjectRef } from '@vertesia/common'
 import { Button, Center, ErrorBox, Input, SelectBox, Spinner, useFetch, useToast } from '@vertesia/ui/core'
 import { Env } from "@vertesia/ui/env"
 import { useLocation } from "@vertesia/ui/router"
 import { fetchComposableTokenFromFirebaseToken, useUserSession } from '@vertesia/ui/session'
+import { useState } from 'react'
 
 interface ProfileData {
     profile?: string