@invect/ui 0.0.7 → 0.0.9

package/src/components/chat/InlineCredentialSetup.tsx

@@ -45,7 +45,7 @@ type LlmProvider = (typeof LLM_PROVIDERS)[number]['value'];
 
 function getDefaultName(provider: LlmProvider): string {
   const label = LLM_PROVIDERS.find((p) => p.value === provider)?.label ?? provider;
-  return `${label} (Chat)`;
+  return `${label}-assistant`;
 }
 
 function getBaseUrl(provider: LlmProvider): string | undefined {
@@ -228,24 +228,25 @@ function CreateCredentialForm({ onBack }: { onBack?: () => void }) {
   return (
     <form
       onSubmit={handleSubmit}
-      className="flex flex-col gap-3.5 rounded-xl border bg-muted/20 p-4 mx-2 w-full max-w-sm"
+      autoComplete="off"
+      className="flex flex-col gap-4 rounded-xl border border-border/60 bg-card p-5 mx-2 w-full max-w-sm shadow-sm"
     >
       {/* Header */}
-      <div className="flex flex-col items-center gap-2 pb-1">
-        <div className="flex size-9 items-center justify-center rounded-full bg-primary/10">
-          <KeyRound className="size-4 text-primary" />
+      <div className="flex flex-col gap-2.5 pb-0.5">
+        <div className="flex size-10 items-center justify-center rounded-full bg-primary/10">
+          <KeyRound className="size-5 text-primary" />
         </div>
         <div className="text-center">
           <p className="text-sm font-semibold text-foreground">Connect an LLM provider</p>
-          <p className="mt-0.5 text-[11px] text-muted-foreground">
+          <p className="mt-1 text-xs text-muted-foreground">
             Add an API key to start chatting with the assistant.
           </p>
         </div>
       </div>
 
       {/* Provider */}
-      <div className="space-y-1">
-        <label className="text-[11px] font-medium text-muted-foreground">Provider</label>
+      <div className="space-y-1.5 text-left">
+        <label className="text-xs font-medium text-muted-foreground">Provider</label>
         <Select
           value={provider}
           onValueChange={(v) => {
@@ -255,7 +256,7 @@ function CreateCredentialForm({ onBack }: { onBack?: () => void }) {
             }
           }}
         >
-          <SelectTrigger className="h-8 text-xs">
+          <SelectTrigger className="h-9 text-xs">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
@@ -269,33 +270,45 @@ function CreateCredentialForm({ onBack }: { onBack?: () => void }) {
       </div>
 
       {/* Name */}
-      <div className="space-y-1">
-        <label className="text-[11px] font-medium text-muted-foreground">Name</label>
+      <div className="space-y-1.5">
+        <label className="text-xs font-medium text-muted-foreground">Name</label>
         <Input
           value={name}
           onChange={(e) => setName(e.target.value)}
           placeholder={getDefaultName(provider)}
-          className="h-8 text-xs"
+          className="h-9 text-xs"
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          spellCheck={false}
+          data-1p-ignore
+          data-lpignore="true"
+          data-form-type="other"
         />
       </div>
 
       {/* API Key */}
-      <div className="space-y-1">
-        <label className="text-[11px] font-medium text-muted-foreground">API Key</label>
+      <div className="space-y-1.5">
+        <label className="text-xs font-medium text-muted-foreground">API Key</label>
         <div className="relative">
           <Input
             type={showKey ? 'text' : 'password'}
             value={apiKey}
             onChange={(e) => setApiKey(e.target.value)}
             placeholder={LLM_PROVIDERS.find((p) => p.value === provider)?.placeholder ?? 'sk-...'}
-            className="h-8 pr-8 text-xs font-mono"
-            autoComplete="off"
+            className="h-9 pr-8 text-xs font-mono"
+            autoComplete="new-password"
+            autoCorrect="off"
+            autoCapitalize="off"
             spellCheck={false}
+            data-1p-ignore
+            data-lpignore="true"
+            data-form-type="other"
           />
           <button
             type="button"
             onClick={() => setShowKey((s) => !s)}
-            className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground/60 hover:text-muted-foreground transition-colors"
+            className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground/50 hover:text-muted-foreground transition-colors"
             tabIndex={-1}
           >
             {showKey ? <EyeOff className="size-3.5" /> : <Eye className="size-3.5" />}
@@ -312,7 +325,7 @@ function CreateCredentialForm({ onBack }: { onBack?: () => void }) {
       )}
 
       {/* Submit */}
-      <Button type="submit" size="sm" className="w-full gap-1.5 text-xs" disabled={!canSubmit}>
+      <Button type="submit" size="sm" className="mt-0.5 w-full gap-1.5" disabled={!canSubmit}>
         {formState === 'creating' ? (
           <>
             <Loader2 className="size-3.5 animate-spin" />
@@ -333,7 +346,7 @@ function CreateCredentialForm({ onBack }: { onBack?: () => void }) {
         <button
           type="button"
           onClick={onBack}
-          className="text-[11px] text-muted-foreground hover:text-foreground transition-colors"
+          className="text-[11px] text-muted-foreground hover:text-foreground transition-colors text-center"
         >
           ← Back to existing providers
         </button>

package/src/components/chat/use-chat.ts

@@ -114,6 +114,7 @@ export function useChat(options: UseChatOptions = {}) {
       const body = JSON.stringify({ messages: state.getSerializableMessages() });
       fetch(url, {
         method: 'PUT',
+        credentials: 'include',
         headers: { 'Content-Type': 'application/json' },
         body,
         keepalive: true,

package/src/components/credentials/CreateCredentialModal.tsx

@@ -12,7 +12,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '../ui/dialog';
-import { CheckCircle2, XCircle, Loader2 } from 'lucide-react';
+import { CheckCircle2, XCircle, Loader2, Plus, Trash2 } from 'lucide-react';
 import type { CreateCredentialInput, CredentialAuthType, CredentialType } from '../../api/types';
 import { useTestCredentialRequest } from '../../api/credentials.api';
 
@@ -116,6 +116,13 @@ export const CreateCredentialModal: React.FC<CreateCredentialModalProps> = ({
       ) {
         const encoded = btoa(`${formData.config.username}:${formData.config.password}`);
         headers['Authorization'] = `Basic ${encoded}`;
+      } else if (formData.authType === 'custom' && formData.config.headers) {
+        const customHeaders = formData.config.headers as Record<string, string>;
+        for (const [key, value] of Object.entries(customHeaders)) {
+          if (key.trim()) {
+            headers[key] = value;
+          }
+        }
       }
 
       if (testBody && ['POST', 'PUT', 'PATCH'].includes(testMethod)) {
@@ -193,7 +200,7 @@ export const CreateCredentialModal: React.FC<CreateCredentialModalProps> = ({
               ref={firstFieldRef}
               value={formData.name}
               onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-              placeholder="My Stripe Production"
+              placeholder="Acme API"
               required
               autoComplete="one-time-code"
               data-1p-ignore
@@ -497,6 +504,86 @@ export const CreateCredentialModal: React.FC<CreateCredentialModalProps> = ({
                 </div>
               </>
             )}
+
+            {formData.authType === 'custom' &&
+              (() => {
+                const headers = (formData.config.headers as Record<string, string>) || {};
+                const entries = Object.entries(headers);
+                const updateHeaders = (newHeaders: Record<string, string>) => {
+                  setFormData((prev) => ({
+                    ...prev,
+                    config: { ...prev.config, headers: newHeaders },
+                  }));
+                };
+                return (
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <Label className="text-xs">Headers*</Label>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-6 px-2 text-xs"
+                        onClick={() => {
+                          updateHeaders({ ...headers, '': '' });
+                        }}
+                      >
+                        <Plus className="w-3 h-3 mr-1" />
+                        Add Header
+                      </Button>
+                    </div>
+                    {entries.length === 0 && (
+                      <p className="text-xs text-muted-foreground">
+                        No headers added yet. Click "Add Header" to start.
+                      </p>
+                    )}
+                    {entries.map(([key, value], index) => (
+                      <div key={index} className="flex gap-2 items-start">
+                        <Input
+                          value={key}
+                          onChange={(e) => {
+                            const newEntries = [...entries];
+                            newEntries[index] = [e.target.value, value];
+                            updateHeaders(Object.fromEntries(newEntries));
+                          }}
+                          placeholder="Header name"
+                          autoComplete="one-time-code"
+                          data-1p-ignore
+                          data-lpignore="true"
+                          className="h-8 text-xs flex-1"
+                        />
+                        <Input
+                          value={value}
+                          onChange={(e) => {
+                            const newEntries = [...entries];
+                            newEntries[index] = [key, e.target.value];
+                            updateHeaders(Object.fromEntries(newEntries));
+                          }}
+                          type="text"
+                          style={{ WebkitTextSecurity: 'disc' }}
+                          placeholder="Header value"
+                          autoComplete="one-time-code"
+                          data-1p-ignore
+                          data-lpignore="true"
+                          className="h-8 text-xs flex-1"
+                        />
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          className="h-8 w-8 p-0 text-muted-foreground hover:text-destructive"
+                          onClick={() => {
+                            const newEntries = entries.filter((_, i) => i !== index);
+                            updateHeaders(Object.fromEntries(newEntries));
+                          }}
+                        >
+                          <Trash2 className="w-3.5 h-3.5" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                );
+              })()}
           </div>
 
           {/* Test Section (Always visible for HTTP APIs and LLM providers) */}

package/src/components/credentials/EditCredentialModal.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { X } from 'lucide-react';
+import { X, Plus, Trash2 } from 'lucide-react';
 import { Button } from '../ui/button';
 import { Input } from '../ui/input';
 import { Label } from '../ui/label';
@@ -115,7 +115,7 @@ export const EditCredentialModal: React.FC<EditCredentialModalProps> = ({
                 id="name"
                 value={formData.name}
                 onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                placeholder="My Stripe Production"
+                placeholder="Acme API"
                 required
               />
             </div>
@@ -369,6 +369,86 @@ export const EditCredentialModal: React.FC<EditCredentialModalProps> = ({
                   </div>
                 </>
               )}
+
+              {formData.authType === 'custom' &&
+                (() => {
+                  const headers = (formData.config?.headers as Record<string, string>) || {};
+                  const entries = Object.entries(headers);
+                  const updateHeaders = (newHeaders: Record<string, string>) => {
+                    setFormData((prev) => ({
+                      ...prev,
+                      config: { ...prev.config, headers: newHeaders },
+                    }));
+                  };
+                  return (
+                    <div className="space-y-2">
+                      <div className="flex items-center justify-between">
+                        <Label className="text-sm">Headers</Label>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          className="h-7 px-2 text-xs"
+                          onClick={() => {
+                            updateHeaders({ ...headers, '': '' });
+                          }}
+                        >
+                          <Plus className="w-3 h-3 mr-1" />
+                          Add Header
+                        </Button>
+                      </div>
+                      {entries.length === 0 && (
+                        <p className="text-xs text-muted-foreground">
+                          No headers added yet. Click "Add Header" to start.
+                        </p>
+                      )}
+                      {entries.map(([key, value], index) => (
+                        <div key={index} className="flex gap-2 items-start">
+                          <Input
+                            value={key}
+                            onChange={(e) => {
+                              const newEntries = [...entries];
+                              newEntries[index] = [e.target.value, value];
+                              updateHeaders(Object.fromEntries(newEntries));
+                            }}
+                            placeholder="Header name"
+                            autoComplete="one-time-code"
+                            data-1p-ignore
+                            data-lpignore="true"
+                            className="flex-1"
+                          />
+                          <Input
+                            value={value}
+                            onChange={(e) => {
+                              const newEntries = [...entries];
+                              newEntries[index] = [key, e.target.value];
+                              updateHeaders(Object.fromEntries(newEntries));
+                            }}
+                            type="text"
+                            style={{ WebkitTextSecurity: 'disc' }}
+                            placeholder="Header value"
+                            autoComplete="one-time-code"
+                            data-1p-ignore
+                            data-lpignore="true"
+                            className="flex-1"
+                          />
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-10 w-10 p-0 text-muted-foreground hover:text-destructive"
+                            onClick={() => {
+                              const newEntries = entries.filter((_, i) => i !== index);
+                              updateHeaders(Object.fromEntries(newEntries));
+                            }}
+                          >
+                            <Trash2 className="w-3.5 h-3.5" />
+                          </Button>
+                        </div>
+                      ))}
+                    </div>
+                  );
+                })()}
             </div>
 
             {/* Description */}

package/src/components/flow-editor/FlowHeader.tsx

@@ -1,10 +1,8 @@
 import { Button } from '../ui/button';
 import { Badge } from '../ui/badge';
-import { Save, Settings, Share2, Loader2 } from 'lucide-react';
+import { Save, Loader2 } from 'lucide-react';
 import { InlineEdit } from './inline-edit';
 import { cn } from '../../lib/utils';
-import { usePluginRegistry } from '../../contexts/PluginRegistryContext';
-import { useParams } from 'react-router';
 
 interface FlowHeaderProps {
   flowName: string;
@@ -21,10 +19,6 @@ export function FlowHeader({
   onSave,
   isSaving = false,
 }: FlowHeaderProps) {
-  const { flowId } = useParams();
-  const registry = usePluginRegistry();
-  const flowHeaderActions = registry.headerActions['flowHeader'] ?? [];
-
   return (
     <header className="flex items-center justify-between px-6 border-b h-14 border-border bg-imp-background text-card-foreground">
       <div className="flex items-center gap-4">
@@ -50,21 +44,6 @@ export function FlowHeader({
         )}
       </div>
       <div className="flex items-center gap-2">
-        <Button variant="ghost" size="icon-sm" title="Settings" aria-label="Settings">
-          <Settings className="w-4 h-4" />
-        </Button>
-        {/* Plugin-contributed header actions (e.g. Share button from RBAC) */}
-        {flowHeaderActions
-          .filter((a) => !a.permission || registry.checkPermission(a.permission, { flowId }))
-          .map((action, i) => (
-            <action.component key={`plugin-action-${i}`} flowId={flowId} basePath="" />
-          ))}
-        {/* Fallback Share button when no plugin provides one */}
-        {flowHeaderActions.length === 0 && (
-          <Button variant="ghost" size="icon-sm" title="Share" aria-label="Share">
-            <Share2 className="w-4 h-4" />
-          </Button>
-        )}
         <Button
           variant="outline"
           size="sm"

package/src/components/flow-editor/FlowLayout.tsx

@@ -1,7 +1,6 @@
 import type React from 'react';
-import { Plus, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { Plus } from 'lucide-react';
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '../ui/tooltip';
-import { useUIStore } from '../../stores/uiStore';
 import { ToolbarCollapsedProvider } from './toolbar-context';
 
 interface FlowLayoutProps {
@@ -40,8 +39,7 @@ export function FlowLayout({
   sidebarOpen = true,
   onToggleSidebar,
 }: FlowLayoutProps) {
-  const collapsed = useUIStore((s) => s.toolbarCollapsed);
-  const toggleCollapsed = useUIStore((s) => s.toggleToolbarCollapsed);
+  const collapsed = true;
 
   return (
     <div className="flex flex-1 min-h-0">
@@ -60,35 +58,16 @@ export function FlowLayout({
         {(onToggleSidebar || layoutSelector || chatToggle || toolbarExtra) && (
           <TooltipProvider>
             <ToolbarCollapsedProvider value={collapsed}>
-              <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex items-center gap-1 rounded-lg border border-border bg-card/90 backdrop-blur-sm shadow-md p-1">
-                {/* Collapse / expand toggle */}
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <button
-                      onClick={toggleCollapsed}
-                      className="flex items-center justify-center w-7 h-7 rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
-                    >
-                      {collapsed ? (
-                        <PanelLeftOpen className="w-3.5 h-3.5" />
-                      ) : (
-                        <PanelLeftClose className="w-3.5 h-3.5" />
-                      )}
-                    </button>
-                  </TooltipTrigger>
-                  <TooltipContent side="top">
-                    {collapsed ? 'Expand toolbar' : 'Collapse toolbar'}
-                  </TooltipContent>
-                </Tooltip>
-
+              <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex items-center gap-1.5 rounded-xl border border-border bg-card/90 backdrop-blur-sm shadow-md p-1.5">
                 {onToggleSidebar && (
                   <Tooltip>
                     <TooltipTrigger asChild>
                       <button
                         onClick={onToggleSidebar}
-                        className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md text-card-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
+                        className="flex items-center gap-1.5 px-3.5 py-2 text-sm font-medium rounded-md text-card-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
                         title={sidebarOpen ? 'Close node panel' : 'Open node panel'}
                       >
-                        <Plus className="w-3.5 h-3.5" />
+                        <Plus className="w-4 h-4" />
                         {!collapsed && 'Add nodes'}
                       </button>
                     </TooltipTrigger>
@@ -99,7 +78,7 @@ export function FlowLayout({
                 {chatToggle}
                 {toolbarExtra && (
                   <>
-                    <div className="w-px h-4 bg-border mx-0.5" />
+                    <div className="w-px h-5 bg-border mx-1" />
                     {toolbarExtra}
                   </>
                 )}

package/src/components/flow-editor/NodeSidebar.tsx

@@ -7,6 +7,7 @@ import type { NodeDefinition } from '../../types/node-definition.types';
 import type { ToolDefinition, AddedToolInstance } from '../nodes/ToolSelectorModal';
 import { ProviderIcon } from '../shared/ProviderIcon';
 import { useFlowEditorStore } from './flow-editor.store';
+import { useUIStore } from '../../stores/uiStore';
 import { ActionsSidebar } from './ActionsSidebar';
 import { Search, Plus, X, ChevronRight, PanelLeftClose } from 'lucide-react';
 import { cn } from '../../lib/utils';
@@ -65,22 +66,14 @@ function NodesSidebar({
   onCollapse?: () => void;
 }) {
   const [search, setSearch] = useState('');
-  // Tracks which groups the user has manually expanded (all start collapsed)
-  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
   const { isLoading, nodeDefinitions } = useNodeRegistry();
+  const expandedGroups = useUIStore((s) => s.nodeSidebarExpandedGroups);
+  const toggleNodeSidebarGroup = useUIStore((s) => s.toggleNodeSidebarGroup);
 
   const isSearching = search.trim().length > 0;
 
   const toggleGroup = (providerId: string) => {
-    setExpandedGroups((prev) => {
-      const next = new Set(prev);
-      if (next.has(providerId)) {
-        next.delete(providerId);
-      } else {
-        next.add(providerId);
-      }
-      return next;
-    });
+    toggleNodeSidebarGroup(providerId);
   };
 
   const totalVisible = useMemo(
@@ -225,7 +218,7 @@ function NodesSidebar({
         <div className="p-3 space-y-4">
           {sortedProviderIds.map((providerId) => {
             const group = providerGroups[providerId];
-            const isCollapsed = isSearching ? false : !expandedGroups.has(providerId);
+            const isCollapsed = isSearching ? false : !expandedGroups.includes(providerId);
             return (
               <div key={providerId}>
                 <button

package/src/components/flow-editor/RunControls.tsx

@@ -31,17 +31,17 @@ export function RunControls({
             onClick={onExecute}
             disabled={isExecuting || !onExecute}
             className={cn(
-              'flex items-center gap-1.5 py-1.5 text-xs font-medium rounded-md bg-foreground text-background hover:bg-foreground/85 transition-colors disabled:opacity-50 disabled:pointer-events-none',
-              collapsed ? 'px-4' : 'px-3',
+              'flex items-center gap-1.5 py-2 text-sm font-medium rounded-md bg-foreground text-background hover:bg-foreground/85 transition-colors disabled:opacity-50 disabled:pointer-events-none',
+              collapsed ? 'px-5' : 'px-4',
             )}
             title={collapsed ? undefined : 'Run flow'}
           >
             {isExecuting ? (
-              <Loader2 className="w-3.5 h-3.5 animate-spin" />
+              <Loader2 className="w-4 h-4 animate-spin" />
             ) : (
-              <Play className="w-3.5 h-3.5" />
+              <Play className="w-4 h-4" />
             )}
-            {!collapsed && 'Run'}
+            Run
           </button>
         </TooltipTrigger>
         {collapsed && <TooltipContent side="top">Run flow</TooltipContent>}
@@ -49,7 +49,7 @@ export function RunControls({
 
       {/* Active / Inactive segmented toggle */}
       {isActive !== undefined && onToggleActive && (
-        <div className="inline-flex items-center rounded-md border border-border bg-muted/40 p-0.5">
+        <div className="inline-flex items-center rounded-md border border-border bg-muted/40 p-1">
           <Tooltip>
             <TooltipTrigger asChild>
               <button
@@ -60,16 +60,16 @@ export function RunControls({
                 }}
                 disabled={isTogglingActive}
                 className={cn(
-                  'flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-sm transition-colors disabled:opacity-50',
+                  'flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-medium rounded-sm transition-colors disabled:opacity-50',
                   isActive
                     ? 'bg-card text-foreground shadow-sm'
                     : 'text-muted-foreground hover:text-foreground',
                 )}
               >
                 {isTogglingActive && !isActive ? (
-                  <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                  <Loader2 className="w-4.5 h-4.5 animate-spin" />
                 ) : (
-                  <Power className="w-3 h-3" />
+                  <Power className={cn('w-4.5 h-4.5', isActive && 'text-emerald-500')} />
                 )}
                 {!collapsed && 'Active'}
               </button>
@@ -86,16 +86,16 @@ export function RunControls({
                 }}
                 disabled={isTogglingActive}
                 className={cn(
-                  'flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-sm transition-colors disabled:opacity-50',
+                  'flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-medium rounded-sm transition-colors disabled:opacity-50',
                   !isActive
                     ? 'bg-card text-foreground shadow-sm'
                     : 'text-muted-foreground hover:text-foreground',
                 )}
               >
                 {isTogglingActive && isActive ? (
-                  <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                  <Loader2 className="w-4.5 h-4.5 animate-spin" />
                 ) : (
-                  <PowerOff className="w-3 h-3" />
+                  <PowerOff className={cn('w-4.5 h-4.5', !isActive && 'text-red-400')} />
                 )}
                 {!collapsed && 'Inactive'}
               </button>

package/src/components/flow-editor/node-config-panel/ConfigFieldWithTemplate.tsx

@@ -3,7 +3,7 @@ import { Input } from '../../ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../ui/select';
 import { Switch } from '../../ui/switch';
 import { Button } from '../../ui/button';
-import { Code2, Type, AlertCircle } from 'lucide-react';
+import { Code2, Type } from 'lucide-react';
 import type { NodeParamField } from '../../../types/node-definition.types';
 import { cn } from '../../../lib/utils';
 import { DroppableInput } from './DroppableInput';
@@ -68,7 +68,6 @@ export const ConfigFieldWithTemplate = ({
 
   const fieldError = error ? (
     <div className="flex items-center gap-1 text-[11px] text-destructive mt-0.5">
-      <AlertCircle className="w-3 h-3 shrink-0" />
       <span>{error}</span>
     </div>
   ) : null;

package/src/components/flow-editor/node-config-panel/panels/ConfigurationPanel.tsx

@@ -357,18 +357,7 @@ export function ConfigurationPanel({
               )}
 
               {/* Run error */}
-              {runError && fieldErrors && Object.keys(fieldErrors).length > 0 ? (
-                <div className="flex items-start gap-2 p-2.5 rounded-md bg-destructive/5 border border-destructive/20">
-                  <AlertCircle className="w-3.5 h-3.5 text-destructive mt-0.5 shrink-0" />
-                  <div className="text-xs text-destructive">
-                    <strong>Validation failed:</strong> {Object.keys(fieldErrors).length} field
-                    {Object.keys(fieldErrors).length > 1 ? 's have' : ' has'} errors — see
-                    highlighted fields above
-                  </div>
-                </div>
-              ) : runError ? (
-                <ExecutionErrorDisplay error={runError} />
-              ) : null}
+              {runError ? <ExecutionErrorDisplay error={runError} /> : null}
 
               {/* Model status message */}
               {nodeType === GraphNodeType.MODEL && modelStatusMessage && (

package/src/components/graph/LayoutSelector.tsx

@@ -28,9 +28,9 @@ export const LayoutSelector: React.FC<LayoutSelectorProps> = ({ onLayoutChange,
               variant="ghost"
               size="sm"
               onClick={handleRealign}
-              className="h-8 gap-1.5 rounded-md px-2.5 text-muted-foreground hover:bg-accent hover:text-foreground"
+              className="h-9 gap-1.5 rounded-md px-3 text-muted-foreground hover:bg-accent hover:text-foreground"
             >
-              <AlignHorizontalDistributeCenter className="w-3.5 h-3.5" />
+              <AlignHorizontalDistributeCenter className="w-4.5 h-4.5" />
               {!collapsed && 'Realign'}
             </Button>
           </TooltipTrigger>