Merge pull request #168 from ShipSecAI/betterclever/ux-fixes-3

feat(ui): enhance workflow design, edge styling, and terminal UX

Author: betterclever

backend/src/workflows/dto/workflow-graph.dto.ts

@@ -35,6 +35,7 @@ export const WorkflowEdgeSchema = z.object({
   target: z.string(),
   sourceHandle: z.string().optional(),
   targetHandle: z.string().optional(),
+  type: z.enum(['default', 'smoothstep', 'step', 'straight', 'bezier']).optional(),
 });
 
 export const WorkflowGraphSchema = z.object({

frontend/src/components/layout/Sidebar.tsx

@@ -13,6 +13,11 @@ import type { ComponentMetadata } from '@/schemas/component'
 import { cn } from '@/lib/utils'
 import { env } from '@/config/env'
 import { Skeleton } from '@/components/ui/skeleton'
+import { 
+  type ComponentCategory,
+  getCategorySeparatorColor
+} from '@/utils/categoryColors'
+import { useThemeStore } from '@/store/themeStore'
 
 // Use backend-provided category configuration
 // The frontend will no longer categorize components - it will use backend data
@@ -166,10 +171,17 @@ export function Sidebar({ canManageWorkflows = true }: SidebarProps) {
   const { getAllComponents, fetchComponents, loading, error } = useComponentStore()
   const [searchQuery, setSearchQuery] = useState('')
   const [viewMode, setViewMode] = useState<ViewMode>('list')
+  const theme = useThemeStore((state) => state.theme)
+  const isDarkMode = theme === 'dark'
   const frontendBranch = env.VITE_FRONTEND_BRANCH.trim()
   const backendBranch = env.VITE_BACKEND_BRANCH.trim()
   const hasBranchInfo = Boolean(frontendBranch || backendBranch)
 
+  // Get category accent color (for left border) - uses separator colors for brightness
+  const getCategoryAccentColor = (category: string): string | undefined => {
+    return getCategorySeparatorColor(category as ComponentCategory, isDarkMode)
+  }
+  
   // Custom scrollbar state
   const scrollContainerRef = useRef<HTMLDivElement>(null)
   const [scrollbarVisible, setScrollbarVisible] = useState(false)
@@ -289,7 +301,7 @@ export function Sidebar({ canManageWorkflows = true }: SidebarProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchQuery])
 
-  // Custom scrollbar logic
+  // Custom scrollbar logic - setup event listeners (only once)
   useEffect(() => {
     const container = scrollContainerRef.current
     if (!container) return
@@ -349,7 +361,43 @@ export function Sidebar({ canManageWorkflows = true }: SidebarProps) {
         clearTimeout(scrollTimeoutRef.current)
       }
     }
-  }, [filteredComponentsByCategory, loading])
+    // Only setup event listeners once - don't depend on content changes
+  }, [])
+
+  // Update scrollbar when content changes (without re-setting up listeners)
+  // Calculate a stable value for component count to use as dependency
+  const componentCount = useMemo(() => {
+    return Object.values(filteredComponentsByCategory).reduce(
+      (total, components) => total + components.length,
+      0
+    )
+  }, [filteredComponentsByCategory])
+  
+  useEffect(() => {
+    const container = scrollContainerRef.current
+    if (!container) return
+
+    // Use requestAnimationFrame to ensure DOM has updated after content changes
+    requestAnimationFrame(() => {
+      const { scrollTop, scrollHeight, clientHeight } = container
+      const maxScroll = scrollHeight - clientHeight
+      
+      if (maxScroll <= 0) {
+        setScrollbarVisible(false)
+        setScrollbarHeight(0)
+        setScrollbarPosition(0)
+        return
+      }
+
+      // Calculate scrollbar thumb position and height
+      const thumbHeight = Math.max((clientHeight / scrollHeight) * clientHeight, 30)
+      const thumbPosition = (scrollTop / maxScroll) * (clientHeight - thumbHeight)
+      
+      setScrollbarHeight(thumbHeight)
+      setScrollbarPosition(thumbPosition)
+      // Don't show scrollbar automatically when content changes - only on scroll
+    })
+  }, [componentCount, loading]) // Use stable componentCount instead of filteredComponentsByCategory object
 
   return (
     <div className="h-full w-full max-w-[320px] border-r bg-background flex flex-col">
@@ -480,16 +528,24 @@ export function Sidebar({ canManageWorkflows = true }: SidebarProps) {
 
                 const categoryConfig = components[0]?.categoryConfig
 
+                const categoryAccentColor = getCategoryAccentColor(category)
+                
                 return (
                   <AccordionItem 
                     key={category} 
                     value={category} 
                     className="border border-border/50 rounded-sm px-3 py-1 transition-colors"
                   >
-                    <AccordionTrigger className={cn(
-                      'py-3 px-0 hover:no-underline hover:bg-muted/50 rounded-sm -mx-3 -my-1 px-3 [&[data-state=open]]:text-foreground',
-                      'group transition-colors'
-                    )}>
+                    <AccordionTrigger 
+                      className={cn(
+                        'py-3 hover:no-underline hover:bg-muted/50 rounded-sm -mx-3 -my-1 px-3 [&[data-state=open]]:text-foreground',
+                        'group transition-colors relative'
+                      )}
+                      style={{
+                        borderLeftWidth: categoryAccentColor ? '3px' : undefined,
+                        borderLeftColor: categoryAccentColor || undefined,
+                      }}
+                    >
                       <div className="flex flex-col items-start gap-0.5 w-full">
                         <div className="flex items-center justify-between w-full">
                           <div className="flex items-center gap-2">

frontend/src/components/layout/TopBar.tsx

@@ -12,6 +12,7 @@ import {
   Download,
   CheckCircle2,
   Loader2,
+  Pencil,
 } from 'lucide-react'
 import { useWorkflowStore } from '@/store/workflowStore'
 import { useWorkflowUiStore } from '@/store/workflowUiStore'
@@ -40,7 +41,10 @@ export function TopBar({
   const [isSaving, setIsSaving] = useState(false)
   const [isImporting, setIsImporting] = useState(false)
   const [tempWorkflowName, setTempWorkflowName] = useState('')
+  const [isEditingTitle, setIsEditingTitle] = useState(false)
+  const [showPencil, setShowPencil] = useState(false)
   const fileInputRef = useRef<HTMLInputElement | null>(null)
+  const titleInputRef = useRef<HTMLInputElement | null>(null)
 
   const { metadata, isDirty, setWorkflowName } = useWorkflowStore()
   const { mode, setMode } = useWorkflowUiStore()
@@ -51,11 +55,32 @@ export function TopBar({
     if (!trimmed) {
       setWorkflowName(DEFAULT_WORKFLOW_NAME)
       setTempWorkflowName(DEFAULT_WORKFLOW_NAME)
+      setIsEditingTitle(false)
       return
     }
     if (trimmed !== metadata.name) {
       setWorkflowName(trimmed)
     }
+    setIsEditingTitle(false)
+  }
+
+  const handleStartEditing = () => {
+    if (!canEdit) return
+    setIsEditingTitle(true)
+    // Focus the input after a brief delay to ensure it's rendered
+    setTimeout(() => {
+      titleInputRef.current?.focus()
+      titleInputRef.current?.select()
+    }, 0)
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      handleChangeWorkflowName()
+    } else if (e.key === 'Escape') {
+      setTempWorkflowName(metadata.name || DEFAULT_WORKFLOW_NAME)
+      setIsEditingTitle(false)
+    }
   }
 
   const handleSave = async () => {
@@ -216,18 +241,50 @@ export function TopBar({
 
       <div className="flex-1 min-w-0 w-full">
         <div className="grid w-full gap-3 sm:gap-4 items-center sm:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)]">
-          <div className="flex items-center justify-start">
-            <div className="flex items-center gap-2 rounded-lg border border-border/60 bg-muted/40 px-3 py-1.5 shadow-sm min-w-[220px] max-w-[360px] w-full">
-              <Input
-                value={tempWorkflowName}
-                onChange={(e) => setTempWorkflowName(e.target.value)}
-                onBlur={handleChangeWorkflowName}
-                readOnly={!canEdit}
-                aria-readonly={!canEdit}
-                className="font-semibold bg-transparent border-none shadow-none h-7 px-0 py-0 text-base focus-visible:ring-0 focus-visible:ring-offset-0"
-                placeholder="Workflow name"
-              />
+          <div className="flex items-center justify-start gap-2">
+            <div
+              className={cn(
+                'flex items-center gap-2 min-w-[220px] max-w-[360px]',
+                isEditingTitle
+                  ? 'rounded-lg border border-border/60 bg-muted/40 px-3 py-1.5 shadow-sm'
+                  : 'group relative'
+              )}
+              onMouseEnter={() => canEdit && !isEditingTitle && setShowPencil(true)}
+              onMouseLeave={() => setShowPencil(false)}
+            >
+              {isEditingTitle ? (
+                <Input
+                  ref={titleInputRef}
+                  value={tempWorkflowName}
+                  onChange={(e) => setTempWorkflowName(e.target.value)}
+                  onBlur={handleChangeWorkflowName}
+                  onKeyDown={handleKeyDown}
+                  className="font-semibold bg-transparent border-none shadow-none h-7 px-0 py-0 text-base focus-visible:ring-0 focus-visible:ring-offset-0"
+                  placeholder="Workflow name"
+                />
+              ) : (
+                <>
+                  <h1 className="font-semibold text-base text-foreground pr-6">
+                    {metadata.name || DEFAULT_WORKFLOW_NAME}
+                  </h1>
+                  {canEdit && showPencil && (
+                    <button
+                      type="button"
+                      onClick={handleStartEditing}
+                      className="absolute right-0 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-muted/80 transition-colors"
+                      aria-label="Edit workflow name"
+                    >
+                      <Pencil className="h-3.5 w-3.5 text-muted-foreground" />
+                    </button>
+                  )}
+                </>
+              )}
             </div>
+            {metadata.currentVersion !== null && metadata.currentVersion !== undefined && (
+              <span className="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-muted text-muted-foreground border border-border/60">
+                v{metadata.currentVersion}
+              </span>
+            )}
           </div>
           <div className="flex justify-center">{modeToggle}</div>
           <div className="flex items-center justify-end gap-3">