style(workflow): canvas title + split-chip hover wash + pinned icon position

The workflow name now sits in the canvas chrome cluster and stays visible
while a chat is docked (the controls hide, the identity doesn't). Hovering
either half of the split switcher tints the whole pill — a 40% wash on the
container with the hovered/open segment at full fill on its own pseudo, so
the two rules never fight on specificity and opacity never dims the glyphs.
The icon segment's left padding now matches the titled chip (8px), so the
bubble-clock no longer shifts 2px when a chat opens.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: andresdjasso

apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx

@@ -149,16 +149,18 @@ export function ChatSwitcher({
 
   const trigger = iconOnly ? (
     /* Split chip: the icon opens the most recent chat outright; the chevron
-       opens the Recents list. The 1px bg-colored divider only reads when a
-       segment carries its fill, slicing the pill into two buttons. */
-    <span className='flex h-[30px] flex-shrink-0 items-stretch'>
+       opens the Recents list. Hovering either segment tints the whole pill —
+       the hovered (or open) segment at full fill, its sibling lighter — and
+       the 1px bg-colored divider slices the fills into two buttons. The fills
+       are before-pseudos so opacity never dims the glyphs. */
+    <span className='before:-z-10 relative isolate flex h-[30px] flex-shrink-0 items-stretch before:absolute before:inset-0 before:rounded-lg before:bg-[var(--surface-active)] before:opacity-0 before:transition-opacity hover-hover:hover:before:opacity-40'>
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
           <button
             type='button'
             aria-label='Open most recent chat'
             onClick={handleOpenMostRecent}
-            className='flex items-center rounded-l-lg px-1.5 transition-colors hover-hover:bg-[var(--surface-active)]'
+            className='before:-z-10 relative isolate flex items-center rounded-l-lg pr-1.5 pl-2 before:absolute before:inset-0 before:rounded-l-lg before:bg-[var(--surface-active)] before:opacity-0 before:transition-opacity hover-hover:hover:before:opacity-100'
           >
             {chipIcon}
           </button>
@@ -167,17 +169,16 @@ export function ChatSwitcher({
           <p>Open chat</p>
         </Tooltip.Content>
       </Tooltip.Root>
-      <span aria-hidden='true' className='w-px self-stretch bg-[var(--bg)]' />
+      <span aria-hidden='true' className='relative w-px self-stretch bg-[var(--bg)]' />
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
           <button
             type='button'
             aria-label='Recents'
             onClick={() => setOpen((prev) => !prev)}
             className={cn(
-              'flex items-center rounded-r-lg px-1 transition-colors',
-              'hover-hover:bg-[var(--surface-active)]',
-              open && 'bg-[var(--surface-active)]'
+              'before:-z-10 relative isolate flex items-center rounded-r-lg px-1.5 before:absolute before:inset-0 before:rounded-r-lg before:bg-[var(--surface-active)] before:opacity-0 before:transition-opacity hover-hover:hover:before:opacity-100',
+              open && 'before:opacity-100'
             )}
           >
             <ChevronDown className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx

@@ -4234,17 +4234,29 @@ const WorkflowContent = React.memo(
             {!embedded && <DiffControls />}
 
             {/* Workspace chrome over the canvas: sidebar toggle + chat switcher
-                at the top-left, matching the title-bar rhythm on other pages.
-                Hidden while a chat is docked — the chat pane's title bar
-                carries both controls. */}
-            {!embedded && !chatDock?.isOpen && (
+                + workflow title at the top-left, matching the title-bar rhythm
+                on other pages. The controls hide while a chat is docked (the
+                chat pane's title bar carries them); the title stays — it's the
+                editor's identity. */}
+            {!embedded && (
               <div className='absolute top-[7px] left-[7px] z-10 flex items-center gap-1'>
-                <SidebarToggle />
-                <ChatSwitcher
-                  iconOnly
-                  navigateOnSelect={!chatDock}
-                  onSelectChat={chatDock ? (chatId) => chatDock.onSelectChat(chatId) : undefined}
-                />
+                {!chatDock?.isOpen && (
+                  <>
+                    <SidebarToggle />
+                    <ChatSwitcher
+                      iconOnly
+                      navigateOnSelect={!chatDock}
+                      onSelectChat={
+                        chatDock ? (chatId) => chatDock.onSelectChat(chatId) : undefined
+                      }
+                    />
+                  </>
+                )}
+                {workflowMetadata?.name && (
+                  <span className='max-w-[320px] truncate px-1 font-medium text-[14px] text-[var(--text-primary)]'>
+                    {workflowMetadata.name}
+                  </span>
+                )}
               </div>
             )}
           </div>