refactor: migrate vibe workflow API to oRPC contract-first pattern

Add generateFlowchart contract to goto-anything contracts and update
use-workflow-vibe.tsx to use the new typed oRPC service function.
This completes the oRPC migration for the entire goto-anything feature
including vibe workflow functionality.

web/app/components/workflow/hooks/use-workflow-vibe.tsx

@@ -14,7 +14,7 @@ import Toast from '@/app/components/base/toast'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { useGetLanguage } from '@/context/i18n'
-import { generateFlowchart } from '@/service/debug'
+import { generateFlowchart } from '@/service/use-goto-anything'
 import {
   useAllBuiltInTools,
   useAllCustomTools,

web/contract/console/goto-anything.ts

@@ -1,8 +1,10 @@
 import type { AppListResponse } from '@/models/app'
 import type { DataSetListResponse } from '@/models/datasets'
+import type { BackendEdgeSpec, BackendNodeSpec, FlowchartGenRes } from '@/service/debug'
 import { type } from '@orpc/contract'
 import { base } from '../base'
 
+// Search APIs
 export const searchAppsContract = base
   .route({
     path: '/apps',
@@ -30,3 +32,56 @@ export const searchDatasetsContract = base
     }
   }>())
   .output(type<DataSetListResponse>())
+
+// Vibe Workflow API
+export type GenerateFlowchartInput = {
+  instruction: string
+  model_config: {
+    provider: string
+    name: string
+    mode: string
+    completion_params: Record<string, unknown>
+  } | null
+  available_nodes: Array<{
+    type: string
+    title?: string
+    description?: string
+  }>
+  existing_nodes?: Array<{
+    id: string
+    type: string
+    title?: string
+  }>
+  existing_edges?: BackendEdgeSpec[]
+  available_tools: Array<{
+    provider_id: string
+    provider_name?: string
+    provider_type?: string
+    tool_name: string
+    tool_label?: string
+    tool_key?: string
+    tool_description?: string
+  }>
+  selected_node_ids?: string[]
+  previous_workflow?: {
+    nodes: BackendNodeSpec[]
+    edges: BackendEdgeSpec[]
+    warnings?: string[]
+  }
+  regenerate_mode?: boolean
+  language: string
+  available_models?: Array<{
+    provider: string
+    model: string
+  }>
+}
+
+export const generateFlowchartContract = base
+  .route({
+    path: '/flowchart-generate',
+    method: 'POST',
+  })
+  .input(type<{
+    body: GenerateFlowchartInput
+  }>())
+  .output(type<FlowchartGenRes>())

web/contract/router.ts

@@ -1,6 +1,6 @@
 import type { InferContractRouterInputs } from '@orpc/contract'
 import { bindPartnerStackContract, invoicesContract } from './console/billing'
-import { searchAppsContract, searchDatasetsContract } from './console/goto-anything'
+import { generateFlowchartContract, searchAppsContract, searchDatasetsContract } from './console/goto-anything'
 import { systemFeaturesContract } from './console/system'
 import { collectionPluginsContract, collectionsContract, searchAdvancedContract } from './marketplace'
 
@@ -21,6 +21,7 @@ export const consoleRouterContract = {
   gotoAnything: {
     searchApps: searchAppsContract,
     searchDatasets: searchDatasetsContract,
+    generateFlowchart: generateFlowchartContract,
   },
 }
 

web/service/use-goto-anything.ts

@@ -1,5 +1,7 @@
+import type { GenerateFlowchartInput } from '@/contract/console/goto-anything'
 import { consoleClient, consoleQuery, marketplaceClient, marketplaceQuery } from '@/service/client'
 
+// Search APIs
 export const searchAppsQueryKey = consoleQuery.gotoAnything.searchApps.queryKey
 
 export const searchApps = async (name?: string) => {
@@ -37,3 +39,12 @@ export const searchPlugins = async (query?: string) => {
     },
   })
 }
+
+// Vibe Workflow API
+export const generateFlowchartMutationKey = consoleQuery.gotoAnything.generateFlowchart.mutationKey
+
+export const generateFlowchart = async (input: GenerateFlowchartInput) => {
+  return consoleClient.gotoAnything.generateFlowchart({
+    body: input,
+  })
+}