AI First Starting UX: Import YAML path

assets/js/collaborative-editor/CollaborativeEditor.tsx

@@ -16,6 +16,7 @@ import { Toaster } from './components/ui/Toaster';
 import { VersionDebugLogger } from './components/VersionDebugLogger';
 import { VersionDropdown } from './components/VersionDropdown';
 import { WorkflowEditor } from './components/WorkflowEditor';
+import { YAMLImportModal } from './components/YAMLImportModal';
 import { CredentialModalProvider } from './contexts/CredentialModalContext';
 import { LiveViewActionsProvider } from './contexts/LiveViewActionsContext';
 import { MonacoRefProvider } from './contexts/MonacoRefContext';
@@ -26,7 +27,11 @@ import {
   useLatestSnapshotLockVersion,
   useProject,
 } from './hooks/useSessionContext';
-import { useIsRunPanelOpen, useShowLandingScreen } from './hooks/useUI';
+import {
+  useIsRunPanelOpen,
+  useShowLandingScreen,
+  useUICommands,
+} from './hooks/useUI';
 import { useVersionSelect } from './hooks/useVersionSelect';
 import { useWorkflowState } from './hooks/useWorkflow';
 import { KeyboardProvider } from './keyboard';
@@ -85,14 +90,12 @@ function BreadcrumbContent({
 }: BreadcrumbContentProps) {
   const isNewWorkflow = useIsNewWorkflow();
   const projectFromStore = useProject();
-
   const workflowFromStore = useWorkflowState(state => state.workflow);
   const latestSnapshotLockVersion = useLatestSnapshotLockVersion();
-
   const isRunPanelOpen = useIsRunPanelOpen();
-
   const { params } = useURLState();
   const isIDEOpen = params['panel'] === 'editor';
+  const handleVersionSelect = useVersionSelect();
 
   const projectId = projectFromStore?.id ?? projectIdFallback;
   const projectName = projectFromStore?.name ?? projectNameFallback;
@@ -102,8 +105,6 @@ function BreadcrumbContent({
   const isSandbox = projectIsSandboxFallback === 'true';
   const currentWorkflowName = workflowFromStore?.name ?? workflowName;
 
-  const handleVersionSelect = useVersionSelect();
-
   const breadcrumbElements = useMemo(() => {
     return [
       // Project name as picker trigger
@@ -182,16 +183,22 @@ function LandingScreenWrapper({
   aiAssistantEnabled: boolean;
 }) {
   const showLandingScreen = useShowLandingScreen();
+  const { openYAMLImportModal } = useUICommands();
+
   if (!showLandingScreen) return null;
-  // TODO-AI-FIRST Stubs — wired up in Issues #4857 (Build with AI), #4858 (Browse Templates), #4859 (Import YAML)
+
   return (
-    <LandingScreen
-      aiAssistantEnabled={aiAssistantEnabled}
-      onBuildWithAI={() => {}}
-      onBuildFromScratch={() => {}}
-      onBrowseTemplates={() => {}}
-      onImportYAML={() => {}}
-    />
+    <>
+      {/* TODO-AI-FIRST Stubs — wired up in Issues #4857 (Build with AI), #4858 (Browse Templates) */}
+      <LandingScreen
+        aiAssistantEnabled={aiAssistantEnabled}
+        onBuildWithAI={() => {}}
+        onBuildFromScratch={() => {}}
+        onBrowseTemplates={() => {}}
+        onImportYAML={openYAMLImportModal}
+      />
+      <YAMLImportModal />
+    </>
   );
 }
 

assets/js/collaborative-editor/components/WorkflowEditor.tsx

@@ -8,15 +8,13 @@ import { useURLState } from '#/react/lib/use-url-state';
 import { cn } from '#/utils/cn';
 
 import { Tooltip } from '../../components/Tooltip';
-import type { WorkflowState as YAMLWorkflowState } from '../../yaml/types';
 import { useResizablePanel } from '../hooks/useResizablePanel';
 import { useIsNewWorkflow, useProject } from '../hooks/useSessionContext';
 import {
   useIsRunPanelOpen,
   useRunPanelContext,
   useTemplatePanel,
   useUICommands,
-  //useIsCreateWorkflowPanelCollapsed, // TODO-AI-FIRST clean up
   useIsAIAssistantPanelOpen,
   useShowLandingScreen,
 } from '../hooks/useUI';
@@ -30,7 +28,6 @@ import { useKeyboardShortcut } from '../keyboard';
 import { Z_INDEX } from '../utils/constants';
 
 import { CollaborativeWorkflowDiagram } from './diagram/CollaborativeWorkflowDiagram';
-import flowEvents from './diagram/react-flow-events';
 import { FullScreenIDE } from './ide/FullScreenIDE';
 import { Inspector } from './inspector';
 import { LeftPanel } from './left-panel';
@@ -65,6 +62,7 @@ export function WorkflowEditor({
     collapseCreateWorkflowPanel,
     expandCreateWorkflowPanel,
     setTemplateSearchQuery,
+    openYAMLImportModal,
   } = useUICommands();
   // TODO-AI-FIRST: remove in #4856
   const isCreateWorkflowPanelCollapsed = true;
@@ -404,36 +402,6 @@ export function WorkflowEditor({
     updateSearchParams({ method, template: null, search: null });
   };
 
-  /**
-   * Imports a workflow state into the canvas.
-   *
-   * This function validates the workflow name to ensure uniqueness, then imports
-   * the workflow. If validation fails, it still imports the workflow (the server
-   * will handle name conflicts on save).
-   *
-   * Note: This is intentionally synchronous from the caller's perspective.
-   * The async validation happens in the background, but import proceeds
-   * immediately after validation completes or fails.
-   */
-  const handleImport = useCallback(
-    (workflowState: YAMLWorkflowState) => {
-      void workflowStore
-        .importWorkflow(workflowState)
-        .then(() => {
-          flowEvents.dispatch('fit-view');
-        })
-        .catch((error: unknown) => {
-          console.error('Failed to import workflow:', error);
-        });
-    },
-    [workflowStore]
-  );
-
-  const handleSaveAndClose = async () => {
-    await saveWorkflow();
-    collapseCreateWorkflowPanel();
-  };
-
   /**
    * Keyboard shortcuts for new workflow creation panels.
    *
@@ -472,31 +440,18 @@ export function WorkflowEditor({
     }
   );
 
-  // Cmd/Ctrl+\ to toggle import panel (see JSDoc above for full shortcut docs)
+  // Cmd/Ctrl+\ to open YAML import modal when on landing screen (see JSDoc above for full shortcut docs)
   useKeyboardShortcut(
     'Control+\\, Meta+\\',
     () => {
       if (!isNewWorkflow) return;
-
-      if (leftPanelMethod === 'import' && !isCreateWorkflowPanelCollapsed) {
-        // Already open in import mode - collapse it
-        collapseCreateWorkflowPanel();
-      } else {
-        // Close AI Assistant panel when expanding create panel
-        if (isAIAssistantPanelOpen) {
-          closeAIAssistantPanel();
-        }
-        // Open in import mode
-        handleMethodChange('import');
-        if (isCreateWorkflowPanelCollapsed) {
-          expandCreateWorkflowPanel();
-        }
+      if (showLandingScreen) {
+        openYAMLImportModal();
       }
+      // left-panel path removed — see #4876
     },
     0,
-    {
-      enabled: isNewWorkflow,
-    }
+    { enabled: isNewWorkflow }
   );
 
   useKeyboardShortcut(
@@ -532,8 +487,6 @@ export function WorkflowEditor({
                 <LeftPanel
                   method={leftPanelMethod}
                   onMethodChange={handleMethodChange}
-                  onImport={handleImport}
-                  onSave={handleSaveAndClose}
                 />
               </div>
               <button