feat(front-page): add marketplace navigation with new tab (#1660)

* feat(front-page): add marketplace navigation with new tab

* feat(workflow-app): preserve execution state and credit usage on stop

Author: anthhub

packages/ai-workspace-common/src/components/canvas/front-page/index.tsx

@@ -82,6 +82,10 @@ export const FrontPage = memo(() => {
 
   const handleViewAllWorkflows = useCallback(() => {
     navigate('/workflow-list');
+  }, [navigate]);
+
+  const handleViewMarketplace = useCallback(() => {
+    window.open('/workflow-marketplace', '_blank');
   }, []);
 
   useEffect(() => {
@@ -138,7 +142,10 @@ export const FrontPage = memo(() => {
       )}
 
       {canvasTemplateEnabled && (
-        <ModuleContainer title={t('frontPage.template.title')}>
+        <ModuleContainer
+          title={t('frontPage.template.title')}
+          handleTitleClick={handleViewMarketplace}
+        >
           {showTemplateCategories && templateCategories.length > 1 && (
             <div className="flex items-center gap-2 flex-wrap">
               {templateCategories.map((category) => (

packages/ai-workspace-common/src/components/workflow-app/create-modal.tsx

@@ -577,16 +577,30 @@ export const CreateWorkflowAppModal = ({
     return coverUploading || coverFileList.some((file) => file.status === 'uploading');
   }, [coverUploading, coverFileList]);
 
+  // Determine if this is an update (existing app) or new publish
+  const isUpdate = useMemo(() => {
+    return !!appId || !!appData;
+  }, [appId, appData]);
+
+  // Get title and button text based on whether it's an update or new publish
+  const modalTitle = useMemo(() => {
+    return isUpdate ? t('workflowApp.updatePublish') : t('workflowApp.publish');
+  }, [isUpdate, t]);
+
+  const okButtonText = useMemo(() => {
+    return isUpdate ? t('workflowApp.updatePublish') : t('workflowApp.publish');
+  }, [isUpdate, t]);
+
   return (
     <Modal
       centered
       open={visible}
       onCancel={() => setVisible(false)}
       onOk={onSubmit}
       confirmLoading={confirmLoading}
-      okText={t('common.confirm')}
+      okText={okButtonText}
       cancelText={t('common.cancel')}
-      title={t('workflowApp.publish')}
+      title={modalTitle}
       okButtonProps={{ disabled: isUploading }}
       styles={{
         body: {

packages/i18n/src/en-US/ui.ts

@@ -3822,6 +3822,7 @@ const translations = {
     titlePlaceholder: 'Please enter name',
     descriptionPlaceholder: 'Please enter description',
     publish: 'Publish',
+    updatePublish: 'Update Publish',
     edit: 'Edit App',
     publishSuccess: 'Published successfully',
     alreadyPublished: 'Already Published',

packages/i18n/src/zh-Hans/ui.ts

@@ -3555,6 +3555,7 @@ const translations = {
     titlePlaceholder: '请输入名称',
     descriptionPlaceholder: '请输入描述',
     publish: '发布',
+    updatePublish: '更新发布',
     edit: '编辑应用',
     publishSuccess: '发布成功',
     alreadyPublished: '已发布',

packages/web-core/src/pages/workflow-app/index.tsx

@@ -556,18 +556,54 @@ const WorkflowAppPage: React.FC = () => {
           );
         }
 
-        // Clean up frontend state
+        // Save current executionId before clearing it
+        const currentExecutionId = executionId;
+
+        // Preserve canvasId if available in workflowDetail
+        if (workflowDetail?.canvasId) {
+          setCanvasId(workflowDetail.canvasId);
+        }
+
+        // Fetch execution credit usage before clearing executionId
+        if (currentExecutionId) {
+          try {
+            const response = await getClient().getCreditUsageByExecutionId({
+              query: {
+                executionId: currentExecutionId,
+              },
+            });
+            if (response?.data?.data?.total) {
+              setExecutionCreditUsage(response.data.data.total);
+            }
+          } catch (error) {
+            console.error('Failed to fetch execution credit usage:', error);
+          }
+        }
+
+        // Preserve completed node executions before clearing executionId
+        // Only keep nodes that have finished status
+        const completedExecutions = nodeExecutions.filter(
+          (node: WorkflowNodeExecution) => node.status === 'finish',
+        );
+        if (completedExecutions.length > 0) {
+          setFinalNodeExecutions(completedExecutions);
+        }
+
+        // Clean up frontend state (but preserve completed results and credit usage)
         setExecutionId(null);
         setIsRunning(false);
         setIsStopped(true);
-        setExecutionCreditUsage(null);
-        setFinalNodeExecutions([]);
-        setRuntimeDriveFiles([]);
+        // Don't clear executionCreditUsage - it's set above if available
+        // Don't clear finalNodeExecutions - it's set above if available
+        // Don't clear canvasId - it's set above if available
+        // Don't clear runtimeDriveFiles - they will be fetched based on finalNodeExecutions and canvasId
         stopPolling();
+        // Refresh credit balance after abort
+        refetchUsage();
         message.success(t('workflowApp.run.stopSuccess'));
       },
     });
-  }, [nodeExecutions, stopPolling, t]);
+  }, [nodeExecutions, stopPolling, t, executionId, workflowDetail, refetchUsage]);
 
   return (
     <ReactFlowProvider>
@@ -856,7 +892,7 @@ const WorkflowAppPage: React.FC = () => {
                     </div>
                   )}
 
-                  {logs.length > 0 && (
+                  {(products.length > 0 || logs.length > 0) && (
                     <>
                       {/* Tabs */}
                       <div