feat(workspace): workflow location bar above the canvas in the Build view

With org-project-view on, the canvas gets a breadcrumb bar (Workflows, its folders, the
workflow) whose crumbs return to the Workflows index at that folder, plus a Search
resources action that opens the search modal. Replaces the sidebar tree's job of showing
where the open workflow lives. Flag off: unchanged.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

Author: mzxchandra

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-location-bar.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { Search } from '@sim/emcn/icons'
+import { useParams, useRouter } from 'next/navigation'
+import {
+  breadcrumbFolderChain,
+  folderBreadcrumbItems,
+} from '@/app/workspace/[workspaceId]/components/folders'
+import { ResourceHeader } from '@/app/workspace/[workspaceId]/components/resource/components/resource-header'
+import { useFeatureFlag } from '@/app/workspace/[workspaceId]/providers/feature-flags-provider'
+import { useFolderMap } from '@/hooks/queries/folders'
+import { useWorkflowMap } from '@/hooks/queries/workflows'
+import { useSearchModalStore } from '@/stores/modals/search/store'
+
+/** Keeps the open workflow identifiable when Build uses section-level navigation. */
+export function WorkflowLocationBar() {
+  const enabled = useFeatureFlag('org-project-view')
+  return enabled ? <WorkflowLocationBarContent /> : null
+}
+
+function WorkflowLocationBarContent() {
+  const { workspaceId, workflowId } = useParams<{ workspaceId: string; workflowId: string }>()
+  const router = useRouter()
+  const { data: workflows } = useWorkflowMap(workspaceId)
+  const { data: folders } = useFolderMap(workspaceId)
+  const openSearch = useSearchModalStore((state) => state.open)
+  const workflow = workflows?.[workflowId]
+  const ancestors = breadcrumbFolderChain(
+    workflow?.folderId,
+    new Map(Object.values(folders ?? {}).map((folder) => [folder.id, folder]))
+  )
+  const breadcrumbs = folderBreadcrumbItems({
+    rootLabel: 'Workflows',
+    breadcrumbs: ancestors,
+    onNavigate: (folderId) => {
+      const query = folderId ? `?folderId=${encodeURIComponent(folderId)}` : ''
+      router.push(`/workspace/${workspaceId}/w${query}`)
+    },
+    trailing: [{ label: workflow?.name ?? 'Workflow', onClick: openSearch }],
+  })
+
+  return (
+    <div className='shrink-0'>
+      <ResourceHeader
+        breadcrumbs={breadcrumbs}
+        actions={[
+          {
+            id: 'search-resources',
+            text: 'Search resources',
+            icon: Search,
+            onSelect: openSearch,
+          },
+        ]}
+      />
+    </div>
+  )
+}

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

@@ -1,9 +1,13 @@
 import { ErrorBoundary } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/error'
+import { WorkflowLocationBar } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-location-bar'
 
 export default function WorkflowLayout({ children }: { children: React.ReactNode }) {
   return (
     <main className='flex h-full flex-1 flex-col overflow-hidden'>
-      <ErrorBoundary>{children}</ErrorBoundary>
+      <WorkflowLocationBar />
+      <div className='relative min-h-0 flex-1 overflow-hidden'>
+        <ErrorBoundary>{children}</ErrorBoundary>
+      </div>
     </main>
   )
 }