fix: frontend

web/app/components/goto-anything/actions/commands/banana.spec.tsx

@@ -1,191 +0,0 @@
-import { isInWorkflowPage, VIBE_COMMAND_EVENT } from '@/app/components/workflow/constants'
-import { bananaCommand } from './banana'
-import { registerCommands, unregisterCommands } from './command-bus'
-
-// Mock i18n for testing
-const mockI18n = {
-  t: vi.fn((key: string, options?: Record<string, unknown>) => {
-    if (!options)
-      return key
-    return `${key}:${JSON.stringify(options)}`
-  }),
-}
-
-vi.mock('react-i18next', () => ({
-  getI18n: () => mockI18n,
-}))
-
-vi.mock('@/app/components/workflow/constants', async () => {
-  const actual = await vi.importActual<typeof import('@/app/components/workflow/constants')>(
-    '@/app/components/workflow/constants',
-  )
-  return {
-    ...actual,
-    isInWorkflowPage: vi.fn(),
-  }
-})
-
-vi.mock('./command-bus', () => ({
-  registerCommands: vi.fn(),
-  unregisterCommands: vi.fn(),
-}))
-
-const mockedIsInWorkflowPage = vi.mocked(isInWorkflowPage)
-const mockedRegisterCommands = vi.mocked(registerCommands)
-const mockedUnregisterCommands = vi.mocked(unregisterCommands)
-const mockedT = mockI18n.t
-
-type CommandArgs = { dsl?: string }
-type CommandMap = Record<string, (args?: CommandArgs) => void | Promise<void>>
-
-beforeEach(() => {
-  vi.clearAllMocks()
-})
-
-// Command availability, search, and registration behavior for banana command.
-describe('bananaCommand', () => {
-  // Command metadata mirrors the static definition.
-  describe('metadata', () => {
-    it('should expose name, mode, and description', () => {
-      // Assert
-      expect(bananaCommand.name).toBe('banana')
-      expect(bananaCommand.mode).toBe('submenu')
-      expect(bananaCommand.description).toContain('app.gotoAnything.actions.vibeDesc')
-    })
-  })
-
-  // Availability mirrors workflow page detection.
-  describe('availability', () => {
-    it('should return true when on workflow page', () => {
-      // Arrange
-      mockedIsInWorkflowPage.mockReturnValue(true)
-
-      // Act
-      const available = bananaCommand.isAvailable?.()
-
-      // Assert
-      expect(available).toBe(true)
-      expect(mockedIsInWorkflowPage).toHaveBeenCalledTimes(1)
-    })
-
-    it('should return false when not on workflow page', () => {
-      // Arrange
-      mockedIsInWorkflowPage.mockReturnValue(false)
-
-      // Act
-      const available = bananaCommand.isAvailable?.()
-
-      // Assert
-      expect(available).toBe(false)
-      expect(mockedIsInWorkflowPage).toHaveBeenCalledTimes(1)
-    })
-  })
-
-  // Search results depend on provided arguments.
-  describe('search', () => {
-    it('should return hint description when args are empty', async () => {
-      // Arrange
-      mockedIsInWorkflowPage.mockReturnValue(true)
-
-      // Act
-      const result = await bananaCommand.search('   ')
-
-      // Assert
-      expect(result).toHaveLength(1)
-      const [item] = result
-      expect(item.description).toContain('app.gotoAnything.actions.vibeHint')
-      expect(item.data?.args?.dsl).toBe('')
-      expect(item.data?.command).toBe('workflow.vibe')
-      expect(mockedT).toHaveBeenCalledWith(
-        'app.gotoAnything.actions.vibeTitle',
-        expect.objectContaining({ lng: 'en' }),
-      )
-      expect(mockedT).toHaveBeenCalledWith(
-        'app.gotoAnything.actions.vibeHint',
-        expect.objectContaining({ prompt: expect.any(String), lng: 'en' }),
-      )
-    })
-
-    it('should return default description when args are provided', async () => {
-      // Arrange
-      mockedIsInWorkflowPage.mockReturnValue(true)
-
-      // Act
-      const result = await bananaCommand.search(' make a flow ', 'fr')
-
-      // Assert
-      expect(result).toHaveLength(1)
-      const [item] = result
-      expect(item.description).toContain('app.gotoAnything.actions.vibeDesc')
-      expect(item.data?.args?.dsl).toBe('make a flow')
-      expect(item.data?.command).toBe('workflow.vibe')
-      expect(mockedT).toHaveBeenCalledWith(
-        'app.gotoAnything.actions.vibeTitle',
-        expect.objectContaining({ lng: 'fr' }),
-      )
-      expect(mockedT).toHaveBeenCalledWith(
-        'app.gotoAnything.actions.vibeDesc',
-        expect.objectContaining({ lng: 'fr' }),
-      )
-    })
-
-    it('should fall back to Banana when title translation is empty', async () => {
-      // Arrange
-      mockedIsInWorkflowPage.mockReturnValue(true)
-      mockedT.mockImplementationOnce(() => '')
-
-      // Act
-      const result = await bananaCommand.search('make a plan')
-
-      // Assert
-      expect(result).toHaveLength(1)
-      expect(result[0]?.title).toBe('Banana')
-    })
-  })
-
-  // Command registration and event dispatching.
-  describe('registration', () => {
-    it('should register the workflow vibe command', () => {
-      // Act
-      expect(bananaCommand.register).toBeDefined()
-      bananaCommand.register?.({})
-
-      // Assert
-      expect(mockedRegisterCommands).toHaveBeenCalledTimes(1)
-      const commands = mockedRegisterCommands.mock.calls[0]?.[0] as CommandMap
-      expect(commands['workflow.vibe']).toEqual(expect.any(Function))
-    })
-
-    it('should dispatch vibe event when command handler runs', async () => {
-      // Arrange
-      const dispatchSpy = vi.spyOn(document, 'dispatchEvent')
-      expect(bananaCommand.register).toBeDefined()
-      bananaCommand.register?.({})
-      expect(mockedRegisterCommands).toHaveBeenCalledTimes(1)
-      const commands = mockedRegisterCommands.mock.calls[0]?.[0] as CommandMap
-
-      try {
-        // Act
-        await commands['workflow.vibe']?.({ dsl: 'hello' })
-
-        // Assert
-        expect(dispatchSpy).toHaveBeenCalledTimes(1)
-        const event = dispatchSpy.mock.calls[0][0] as CustomEvent
-        expect(event.type).toBe(VIBE_COMMAND_EVENT)
-        expect(event.detail).toEqual({ dsl: 'hello' })
-      }
-      finally {
-        dispatchSpy.mockRestore()
-      }
-    })
-
-    it('should unregister workflow vibe command', () => {
-      // Act
-      expect(bananaCommand.unregister).toBeDefined()
-      bananaCommand.unregister?.()
-
-      // Assert
-      expect(mockedUnregisterCommands).toHaveBeenCalledWith(['workflow.vibe'])
-    })
-  })
-})

web/app/components/goto-anything/actions/commands/generate.tsx

@@ -5,20 +5,20 @@ import { getI18n } from 'react-i18next'
 import { isInWorkflowPage, VIBE_COMMAND_EVENT } from '@/app/components/workflow/constants'
 import { registerCommands, unregisterCommands } from './command-bus'
 
-type BananaDeps = Record<string, never>
+type GenerateDeps = Record<string, never>
 
-const BANANA_PROMPT_EXAMPLE = 'Summarize a document, classify sentiment, then notify Slack'
+const GENERATE_PROMPT_EXAMPLE = 'Summarize a document, classify sentiment, then notify Slack'
 
-const dispatchVibeCommand = (input?: string) => {
+const dispatchGenerateCommand = (input?: string) => {
   if (typeof document === 'undefined')
     return
 
   document.dispatchEvent(new CustomEvent(VIBE_COMMAND_EVENT, { detail: { dsl: input } }))
 }
 
-export const bananaCommand: SlashCommandHandler<BananaDeps> = {
-  name: 'banana',
-  description: getI18n().t('gotoAnything.actions.vibeDesc', { ns: 'app' }),
+export const generateCommand: SlashCommandHandler<GenerateDeps> = {
+  name: 'generate',
+  description: getI18n().t('gotoAnything.actions.generationDesc', { ns: 'app' }),
   mode: 'submenu',
   isAvailable: () => isInWorkflowPage(),
 
@@ -27,11 +27,11 @@ export const bananaCommand: SlashCommandHandler<BananaDeps> = {
     const hasInput = !!trimmed
 
     return [{
-      id: 'banana-vibe',
-      title: getI18n().t('gotoAnything.actions.vibeTitle', { ns: 'app', lng: locale }) || 'Banana',
+      id: 'generate',
+      title: getI18n().t('gotoAnything.actions.vibeTitle', { ns: 'app', lng: locale }) || 'Generate',
       description: hasInput
-        ? getI18n().t('gotoAnything.actions.vibeDesc', { ns: 'app', lng: locale })
-        : getI18n().t('gotoAnything.actions.vibeHint', { ns: 'app', lng: locale, prompt: BANANA_PROMPT_EXAMPLE }),
+        ? getI18n().t('gotoAnything.actions.generationDesc', { ns: 'app', lng: locale })
+        : getI18n().t('gotoAnything.actions.vibeHint', { ns: 'app', lng: locale, prompt: GENERATE_PROMPT_EXAMPLE }),
       type: 'command' as const,
       icon: (
         <div className="flex h-6 w-6 items-center justify-center rounded-md border-[0.5px] border-divider-regular bg-components-panel-bg">
@@ -39,21 +39,21 @@ export const bananaCommand: SlashCommandHandler<BananaDeps> = {
         </div>
       ),
       data: {
-        command: 'workflow.vibe',
+        command: 'workflow.generate',
         args: { dsl: trimmed },
       },
     }]
   },
 
-  register(_deps: BananaDeps) {
+  register(_deps: GenerateDeps) {
     registerCommands({
-      'workflow.vibe': async (args) => {
-        dispatchVibeCommand(args?.dsl)
+      'workflow.generate': async (args) => {
+        dispatchGenerateCommand(args?.dsl)
       },
     })
   },
 
   unregister() {
-    unregisterCommands(['workflow.vibe'])
+    unregisterCommands(['workflow.generate'])
   },
 }

web/app/components/goto-anything/actions/commands/slash.tsx

@@ -7,10 +7,10 @@ import { getI18n } from 'react-i18next'
 import { setLocaleOnClient } from '@/i18n-config'
 import { ACTION_KEYS } from '../../constants'
 import { accountCommand } from './account'
-import { bananaCommand } from './banana'
 import { communityCommand } from './community'
 import { docsCommand } from './docs'
 import { forumCommand } from './forum'
+import { generateCommand } from './generate'
 import { languageCommand } from './language'
 import { slashCommandRegistry } from './registry'
 import { themeCommand } from './theme'
@@ -39,7 +39,7 @@ export const registerSlashCommands = (deps: SlashCommandDependencies) => {
   slashCommandRegistry.register(communityCommand, {})
   slashCommandRegistry.register(accountCommand, {})
   slashCommandRegistry.register(zenCommand, {})
-  slashCommandRegistry.register(bananaCommand, {})
+  slashCommandRegistry.register(generateCommand, {})
 }
 
 export const unregisterSlashCommands = () => {
@@ -51,7 +51,7 @@ export const unregisterSlashCommands = () => {
   slashCommandRegistry.unregister('community')
   slashCommandRegistry.unregister('account')
   slashCommandRegistry.unregister('zen')
-  slashCommandRegistry.unregister('banana')
+  slashCommandRegistry.unregister('generate')
 }
 
 export const SlashCommandProvider = () => {

web/app/components/goto-anything/actions/commands/vibe.tsx

@@ -1,59 +0,0 @@
-import type { SlashCommandHandler } from './types'
-import { RiSparklingFill } from '@remixicon/react'
-import * as React from 'react'
-import { getI18n } from 'react-i18next'
-import { isInWorkflowPage, VIBE_COMMAND_EVENT } from '@/app/components/workflow/constants'
-import { registerCommands, unregisterCommands } from './command-bus'
-
-type VibeDeps = Record<string, never>
-
-const VIBE_PROMPT_EXAMPLE = 'Summarize a document, classify sentiment, then notify Slack'
-
-const dispatchVibeCommand = (input?: string) => {
-  if (typeof document === 'undefined')
-    return
-
-  document.dispatchEvent(new CustomEvent(VIBE_COMMAND_EVENT, { detail: { dsl: input } }))
-}
-
-export const vibeCommand: SlashCommandHandler<VibeDeps> = {
-  name: 'vibe',
-  description: getI18n().t('gotoAnything.actions.vibeDesc', { ns: 'app' }),
-  mode: 'submenu',
-  isAvailable: () => isInWorkflowPage(),
-
-  async search(args: string, locale: string = 'en') {
-    const trimmed = args.trim()
-    const hasInput = !!trimmed
-
-    return [{
-      id: 'vibe',
-      title: getI18n().t('gotoAnything.actions.vibeTitle', { ns: 'app', lng: locale }) || 'Vibe',
-      description: hasInput
-        ? getI18n().t('gotoAnything.actions.vibeDesc', { ns: 'app', lng: locale })
-        : getI18n().t('gotoAnything.actions.vibeHint', { ns: 'app', lng: locale, prompt: VIBE_PROMPT_EXAMPLE }),
-      type: 'command' as const,
-      icon: (
-        <div className="flex h-6 w-6 items-center justify-center rounded-md border-[0.5px] border-divider-regular bg-components-panel-bg">
-          <RiSparklingFill className="h-4 w-4 text-text-tertiary" />
-        </div>
-      ),
-      data: {
-        command: 'workflow.vibe',
-        args: { dsl: trimmed },
-      },
-    }]
-  },
-
-  register(_deps: VibeDeps) {
-    registerCommands({
-      'workflow.vibe': async (args) => {
-        dispatchVibeCommand(args?.dsl)
-      },
-    })
-  },
-
-  unregister() {
-    unregisterCommands(['workflow.vibe'])
-  },
-}

web/app/components/goto-anything/command-selector.tsx

@@ -126,7 +126,7 @@ const CommandSelector: FC<Props> = ({ scopes, onCommandSelect, searchFilter, com
                         '/docs': 'gotoAnything.actions.docDesc',
                         '/community': 'gotoAnything.actions.communityDesc',
                         '/zen': 'gotoAnything.actions.zenDesc',
-                        '/banana': 'gotoAnything.actions.vibeDesc',
+                        '/generate': 'gotoAnything.actions.generationDesc',
                       } as const
                       return t(slashKeyMap[item.key as keyof typeof slashKeyMap] || item.description, { ns: 'app' })
                     })()

web/app/components/goto-anything/hooks/use-goto-anything-navigation.ts

@@ -67,7 +67,7 @@ export const useGotoAnythingNavigation = (
 
     switch (result.type) {
       case 'command': {
-        if (result.data.command === 'workflow.vibe') {
+        if (result.data.command === 'workflow.generate') {
           if (typeof document !== 'undefined') {
             document.dispatchEvent(new CustomEvent(VIBE_COMMAND_EVENT, { detail: { dsl: result.data.args?.dsl } }))
           }

web/app/components/workflow/panel/vibe-panel/index.tsx

@@ -234,7 +234,7 @@ const VibePanel: FC = () => {
         <div className="h-full w-[300px] shrink-0 overflow-y-auto border-r border-divider-regular p-6">
           <div className="mb-5">
             <div className="text-lg font-bold leading-[28px] text-text-primary">{t('gotoAnything.actions.vibeTitle', { ns: 'app' })}</div>
-            <div className="mt-1 text-[13px] font-normal text-text-tertiary">{t('gotoAnything.actions.vibeDesc', { ns: 'app' })}</div>
+            <div className="mt-1 text-[13px] font-normal text-text-tertiary">{t('gotoAnything.actions.generationDesc', { ns: 'app' })}</div>
           </div>
           <div>
             <ModelParameterModal

web/i18n/en-US/app.json

@@ -75,7 +75,7 @@
   "gotoAnything.actions.themeLightDesc": "Use light appearance",
   "gotoAnything.actions.themeSystem": "System Theme",
   "gotoAnything.actions.themeSystemDesc": "Follow your OS appearance",
-  "gotoAnything.actions.vibeDesc": "Generate workflow from natural language",
+  "gotoAnything.actions.generationDesc": "Generate workflow from natural language",
   "gotoAnything.actions.vibeHint": "Try: {{prompt}}",
   "gotoAnything.actions.vibeTitle": "Vibe",
   "gotoAnything.actions.zenDesc": "Toggle canvas focus mode",