@vibe-forge/client 0.2.0-alpha.0

package/src/components/AutomationView/TriggerList.tsx

@@ -0,0 +1,217 @@
+import './TriggerList.scss'
+
+import { Button, Form, Input, InputNumber, Select, Tooltip } from 'antd'
+import type { FormInstance } from 'antd'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import type { RuleFormValues } from './types'
+
+type TriggerListProps = {
+  form: FormInstance<RuleFormValues>
+  updateWeeklyCron: (index: number, nextDay?: string, nextTime?: string) => void
+  getWebhookUrl: (triggerId?: string, webhookKey?: string) => string
+}
+
+export function TriggerList({ form, updateWeeklyCron, getWebhookUrl }: TriggerListProps) {
+  const { t } = useTranslation()
+
+  return (
+    <Form.List name='triggers'>
+      {(fields, { add, remove }) => (
+        <div className='automation-view__list automation-view__list--horizontal'>
+          <div className='automation-view__section-header'>
+            <div className='automation-view__section-heading'>
+              <div className='automation-view__form-title'>
+                <span className='material-symbols-rounded automation-view__form-icon'>bolt</span>
+                {t('automation.sectionTriggers')}
+              </div>
+              <span className='automation-view__section-count'>
+                {t('automation.triggerCount', { count: fields.length })}
+              </span>
+            </div>
+            <div className='automation-view__section-actions'>
+              <Tooltip title={t('automation.addTrigger')}>
+                <Button
+                  className='automation-view__icon-button'
+                  type='text'
+                  onClick={() => add({
+                    type: 'interval',
+                    intervalMinutes: 30,
+                    cronExpression: '',
+                    weeklyDay: '1',
+                    weeklyTime: '09:00'
+                  })}
+                >
+                  <span className='material-symbols-rounded automation-view__action-icon'>add</span>
+                </Button>
+              </Tooltip>
+            </div>
+          </div>
+          <div className='automation-view__form-desc'>{t('automation.triggerAny')}</div>
+          <div className='automation-view__list-scroll'>
+            {fields.map((field, index) => (
+              <Form.Item
+                key={field.key}
+                noStyle
+                shouldUpdate={(prevValues, nextValues) => {
+                  const prevTrigger = prevValues.triggers?.[field.name]
+                  const nextTrigger = nextValues.triggers?.[field.name]
+                  return prevTrigger?.type !== nextTrigger?.type
+                    || prevTrigger?.webhookKey !== nextTrigger?.webhookKey
+                    || prevTrigger?.id !== nextTrigger?.id
+                }}
+              >
+                {(formInstance) => {
+                  const triggerType = formInstance.getFieldValue(['triggers', field.name, 'type']) as RuleFormValues['triggers'][number]['type']
+                  const triggerId = formInstance.getFieldValue(['triggers', field.name, 'id']) as string | undefined
+                  const webhookKey = formInstance.getFieldValue(['triggers', field.name, 'webhookKey']) as string | undefined
+                  const webhookUrl = getWebhookUrl(triggerId, webhookKey)
+                  return (
+                    <div className='automation-view__list-item'>
+                      <Form.Item name={[field.name, 'id']} hidden>
+                        <Input />
+                      </Form.Item>
+                      <Tooltip title={t('automation.remove')}>
+                        <Button
+                          className='automation-view__remove-button'
+                          type='text'
+                          danger
+                          onClick={() => remove(field.name)}
+                          disabled={fields.length <= 1}
+                        >
+                          <span className='material-symbols-rounded automation-view__action-icon'>close</span>
+                        </Button>
+                      </Tooltip>
+                      <div className='automation-view__list-header'>
+                        <Form.Item
+                          name={[field.name, 'type']}
+                          label={t('automation.ruleType')}
+                          rules={[{ required: true, message: t('automation.ruleTypeRequired') }]}
+                        >
+                          <Select
+                            options={[
+                              { label: t('automation.typeInterval'), value: 'interval' },
+                              { label: t('automation.typeWebhook'), value: 'webhook' },
+                              { label: t('automation.typeCron'), value: 'cron' }
+                            ]}
+                            onChange={(value) => {
+                              if (value === 'interval') {
+                                form.setFieldValue(['triggers', field.name, 'intervalMinutes'], 30)
+                                form.setFieldValue(['triggers', field.name, 'cronExpression'], '')
+                                form.setFieldValue(['triggers', field.name, 'weeklyDay'], '1')
+                                form.setFieldValue(['triggers', field.name, 'weeklyTime'], '09:00')
+                                form.setFieldValue(['triggers', field.name, 'webhookKey'], '')
+                              }
+                              if (value === 'cron') {
+                                form.setFieldValue(['triggers', field.name, 'cronExpression'], '')
+                                form.setFieldValue(['triggers', field.name, 'weeklyDay'], '1')
+                                form.setFieldValue(['triggers', field.name, 'weeklyTime'], '09:00')
+                                form.setFieldValue(['triggers', field.name, 'intervalMinutes'], 30)
+                                form.setFieldValue(['triggers', field.name, 'webhookKey'], '')
+                              }
+                              if (value === 'webhook') {
+                                form.setFieldValue(['triggers', field.name, 'webhookKey'], '')
+                                form.setFieldValue(['triggers', field.name, 'intervalMinutes'], 30)
+                                form.setFieldValue(['triggers', field.name, 'cronExpression'], '')
+                                form.setFieldValue(['triggers', field.name, 'weeklyDay'], '1')
+                                form.setFieldValue(['triggers', field.name, 'weeklyTime'], '09:00')
+                              }
+                            }}
+                          />
+                        </Form.Item>
+                      </div>
+
+                      {triggerType === 'interval' && (
+                        <Form.Item
+                          name={[field.name, 'intervalMinutes']}
+                          label={t('automation.intervalMinutes')}
+                          rules={[{ required: true, message: t('automation.intervalRequired') }]}
+                        >
+                          <InputNumber min={1} className='automation-view__input-number' />
+                        </Form.Item>
+                      )}
+                      {triggerType === 'cron' && (
+                        <div className='automation-view__cron-section'>
+                          <Form.Item
+                            name={[field.name, 'cronExpression']}
+                            label={t('automation.cronExpressionLabel')}
+                            rules={[{ required: true, message: t('automation.cronExpressionRequired') }]}
+                          >
+                            <Input placeholder={t('automation.cronExpressionHint')} />
+                          </Form.Item>
+                          <Form.Item
+                            name={[field.name, 'cronPreset']}
+                            label={t('automation.cronPreset')}
+                          >
+                            <Select
+                              options={[
+                                { label: t('automation.cronPresetHourly'), value: '0 * * * *' },
+                                { label: t('automation.cronPresetDaily9'), value: '0 9 * * *' },
+                                { label: t('automation.cronPresetWeekday9'), value: '0 9 * * 1-5' },
+                                { label: t('automation.cronPresetWeekend10'), value: '0 10 * * 6,0' }
+                              ]}
+                              onChange={(value) => form.setFieldValue(['triggers', field.name, 'cronExpression'], value)}
+                              placeholder={t('automation.cronPresetHint')}
+                              allowClear
+                            />
+                          </Form.Item>
+                          <div className='automation-view__cron-hint'>{t('automation.cronInputHint')}</div>
+                          <div className='automation-view__cron-weekly'>
+                            <Form.Item name={[field.name, 'weeklyDay']} label={t('automation.weeklyDay')}>
+                              <Select
+                                options={[
+                                  { label: t('automation.weekdaySun'), value: '0' },
+                                  { label: t('automation.weekdayMon'), value: '1' },
+                                  { label: t('automation.weekdayTue'), value: '2' },
+                                  { label: t('automation.weekdayWed'), value: '3' },
+                                  { label: t('automation.weekdayThu'), value: '4' },
+                                  { label: t('automation.weekdayFri'), value: '5' },
+                                  { label: t('automation.weekdaySat'), value: '6' }
+                                ]}
+                                onChange={(value) => updateWeeklyCron(index, value)}
+                              />
+                            </Form.Item>
+                            <Form.Item name={[field.name, 'weeklyTime']} label={t('automation.weeklyTime')}>
+                              <Input
+                                placeholder={t('automation.weeklyTimeHint')}
+                                onChange={(event) => updateWeeklyCron(index, undefined, event.target.value)}
+                              />
+                            </Form.Item>
+                          </div>
+                        </div>
+                      )}
+                      {triggerType === 'webhook' && (
+                        <div className='automation-view__webhook'>
+                          <Form.Item name={[field.name, 'webhookKey']} label={t('automation.webhookKey')}>
+                            <Input placeholder={t('automation.webhookKeyHint')} />
+                          </Form.Item>
+                          {webhookUrl && (
+                            <div className='automation-view__webhook-row'>
+                              <span className='automation-view__webhook-label'>{t('automation.webhookUrl')}</span>
+                              <Tooltip title={t('automation.copy')}>
+                                <Button
+                                  className='automation-view__icon-button'
+                                  type='text'
+                                  onClick={() => {
+                                    void navigator.clipboard.writeText(webhookUrl)
+                                  }}
+                                >
+                                  <span className='material-symbols-rounded automation-view__action-icon'>content_copy</span>
+                                </Button>
+                              </Tooltip>
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  )
+                }}
+              </Form.Item>
+            ))}
+          </div>
+        </div>
+      )}
+    </Form.List>
+  )
+}

package/src/components/AutomationView/index.tsx

@@ -0,0 +1,228 @@
+import './AutomationView.scss'
+
+import { App } from 'antd'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+import useSWR from 'swr'
+
+import type { AutomationRule, AutomationRun } from '#~/api.js'
+import {
+  createAutomationRule,
+  deleteAutomationRule,
+  listAutomationRules,
+  listAutomationRuns,
+  runAutomationRule,
+  updateAutomationRule
+} from '#~/api.js'
+import { useQueryParams } from '#~/hooks/useQueryParams.js'
+
+import { RuleFormPanel } from './RuleFormPanel.js'
+import { RuleSidebar } from './RuleSidebar.js'
+import { RunHistoryPanel } from './RunHistoryPanel.js'
+
+type PanelMode = 'view' | 'create' | 'edit'
+
+interface AutomationQueryParams extends Record<string, string> {
+  rule: string
+  q: string
+  runQ: string
+  status: string
+  time: string
+  sort: string
+}
+
+export function AutomationView() {
+  const { t } = useTranslation()
+  const { message } = App.useApp()
+  const navigate = useNavigate()
+  const { data, mutate } = useSWR<{ rules: AutomationRule[] }>(
+    '/api/automation/rules',
+    listAutomationRules
+  )
+  const rules = data?.rules ?? []
+  const [panelMode, setPanelMode] = useState<PanelMode>('view')
+  const [submitting, setSubmitting] = useState(false)
+
+  const { values, update } = useQueryParams<AutomationQueryParams>({
+    keys: ['rule', 'q', 'runQ', 'status', 'time', 'sort'],
+    defaults: {
+      rule: '',
+      q: '',
+      runQ: '',
+      status: 'all',
+      time: 'all',
+      sort: 'desc'
+    },
+    omit: {
+      rule: (value: string) => value === '',
+      q: (value: string) => value === '',
+      runQ: (value: string) => value === '',
+      status: (value: string) => value === 'all',
+      time: (value: string) => value === 'all',
+      sort: (value: string) => value === 'desc'
+    }
+  })
+
+  const selectedRuleId = useMemo(() => {
+    const fromUrl = values.rule
+    if (fromUrl && rules.some(rule => rule.id === fromUrl)) return fromUrl
+    return rules[0]?.id ?? null
+  }, [rules, values.rule])
+
+  const selectedRule = useMemo(
+    () => rules.find(rule => rule.id === selectedRuleId) ?? null,
+    [rules, selectedRuleId]
+  )
+
+  const { data: runsData, mutate: mutateRuns } = useSWR<{ runs: AutomationRun[] }>(
+    selectedRuleId ? `/api/automation/rules/${selectedRuleId}/runs` : null,
+    () => listAutomationRuns(selectedRuleId ?? '')
+  )
+  const runs = runsData?.runs ?? []
+
+  useEffect(() => {
+    if (rules.length === 0) return
+    if (!values.rule || !rules.some(rule => rule.id === values.rule)) {
+      update({ rule: rules[0].id })
+    }
+  }, [rules, update, values.rule])
+
+  const handleSelectRule = useCallback((ruleId: string) => {
+    setPanelMode('view')
+    update({ rule: ruleId })
+  }, [update])
+
+  const handleCreateRule = useCallback(() => {
+    setPanelMode('create')
+  }, [])
+
+  const handleEditRule = useCallback((rule: AutomationRule) => {
+    setPanelMode('edit')
+    update({ rule: rule.id })
+  }, [update])
+
+  const handleCancelForm = useCallback(() => {
+    setPanelMode('view')
+  }, [])
+
+  const handleSubmit = useCallback(async (
+    payload: Partial<AutomationRule>,
+    immediateRun: boolean
+  ) => {
+    try {
+      setSubmitting(true)
+      if (panelMode === 'create') {
+        const res = await createAutomationRule({ ...payload, immediateRun })
+        await mutate()
+        if (res.rule?.id) {
+          update({ rule: res.rule.id })
+        }
+        setPanelMode('view')
+        return
+      }
+      if (panelMode === 'edit' && selectedRule) {
+        await updateAutomationRule(selectedRule.id, { ...payload, immediateRun })
+        await mutate()
+        void mutateRuns()
+        setPanelMode('view')
+      }
+    } catch {
+      void message.error(t('automation.saveFailed'))
+    } finally {
+      setSubmitting(false)
+    }
+  }, [panelMode, mutate, mutateRuns, message, selectedRule, t])
+
+  const handleDelete = useCallback(async (rule: AutomationRule) => {
+    try {
+      await deleteAutomationRule(rule.id)
+      if (selectedRuleId === rule.id) {
+        update({ rule: '' })
+        setPanelMode('view')
+      }
+      void mutate()
+      void message.success(t('automation.deleted'))
+    } catch {
+      void message.error(t('automation.deleteFailed'))
+    }
+  }, [message, mutate, selectedRuleId, t])
+
+  const handleRun = useCallback(async (rule: AutomationRule) => {
+    try {
+      const res = await runAutomationRule(rule.id)
+      const nextSessionId = res.sessionIds?.[0]
+      if (nextSessionId) {
+        void message.success(t('automation.runStarted'))
+        void mutateRuns()
+        void navigate(`/session/${nextSessionId}`)
+      }
+    } catch {
+      void message.error(t('automation.runFailed'))
+    }
+  }, [message, mutateRuns, navigate, t])
+
+  const handleToggle = useCallback(async (rule: AutomationRule, enabled: boolean) => {
+    try {
+      await updateAutomationRule(rule.id, { enabled })
+      void mutate()
+    } catch {
+      void message.error(t('automation.toggleFailed'))
+    }
+  }, [message, mutate, t])
+
+  return (
+    <div className='automation-view'>
+      <div className='automation-view__left'>
+        <RuleSidebar
+          rules={rules}
+          selectedRuleId={selectedRuleId}
+          query={values.q}
+          isCreating={panelMode === 'create'}
+          onCreate={handleCreateRule}
+          onSelect={handleSelectRule}
+          onRun={handleRun}
+          onDelete={handleDelete}
+          onToggle={handleToggle}
+          onQueryChange={(value: string) => update({ q: value })}
+        />
+      </div>
+      <div className='automation-view__divider' />
+      <div className='automation-view__right'>
+        {panelMode === 'create' && (
+          <RuleFormPanel
+            mode='create'
+            rule={null}
+            submitting={submitting}
+            onSubmit={handleSubmit}
+            onCancel={handleCancelForm}
+          />
+        )}
+        {panelMode === 'edit' && (
+          <RuleFormPanel
+            mode='edit'
+            rule={selectedRule}
+            submitting={submitting}
+            onSubmit={handleSubmit}
+            onCancel={handleCancelForm}
+          />
+        )}
+        {panelMode === 'view' && (
+          <RunHistoryPanel
+            rule={selectedRule}
+            runs={runs}
+            runQuery={values.runQ}
+            statusFilter={values.status}
+            timeFilter={values.time}
+            sortOrder={values.sort}
+            onEditRule={handleEditRule}
+            onRunQueryChange={(value: string) => update({ runQ: value })}
+            onStatusFilterChange={(value: string) => update({ status: value })}
+            onTimeFilterChange={(value: string) => update({ time: value })}
+            onSortOrderChange={(value: string) => update({ sort: value })}
+          />
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/AutomationView/types.ts

@@ -0,0 +1,21 @@
+export type RuleFormValues = {
+  name: string
+  description?: string
+  enabled: boolean
+  immediateRun: boolean
+  triggers: Array<{
+    id?: string
+    type: 'interval' | 'webhook' | 'cron'
+    intervalMinutes?: number
+    webhookKey?: string
+    cronExpression?: string
+    cronPreset?: string
+    weeklyDay?: string
+    weeklyTime?: string
+  }>
+  tasks: Array<{
+    id?: string
+    title?: string
+    prompt: string
+  }>
+}

package/src/components/Chat.scss

@@ -0,0 +1,89 @@
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: var(--bg-color);
+  position: relative;
+
+  &.is-new-session {
+    .chat-messages {
+      flex: 0;
+      height: 0;
+      padding: 0;
+      overflow: hidden;
+      opacity: 0;
+    }
+
+    .new-session-guide-wrapper {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px 24px 12px;
+    }
+  }
+}
+
+.new-session-guide-wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px 24px 0 24px;
+  position: relative;
+  opacity: 0;
+  background-color: var(--bg-color);
+  transition: .2s;
+
+  &.ready {
+    opacity: 1;
+  }
+}
+
+.sender-container {
+  flex: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 0 24px 24px;
+  transition:
+    flex .4s cubic-bezier(.4, 0, .2, 1),
+    padding-bottom .4s cubic-bezier(.4, 0, .2, 1);
+}
+
+.scroll-bottom-btn {
+  position: sticky;
+  bottom: 24px;
+  left: 100%;
+  transform: translateX(-40px);
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: var(--bg-color);
+  border: 1px solid var(--border-color);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--sub-text-color, #6b7280);
+  z-index: 10;
+
+  &:hover {
+    background-color: var(--tag-hover-bg, #f9fafb);
+    color: var(--text-color);
+  }
+
+  .material-symbols-rounded {
+    font-size: 18px;
+  }
+}
+
+.chat-settings-panel {
+  flex: 1;
+  overflow: auto;
+  padding: 20px 24px 24px;
+}

package/src/components/Chat.tsx

@@ -0,0 +1,92 @@
+import './Chat.scss'
+
+import { useTranslation } from 'react-i18next'
+
+import type { Session } from '@vibe-forge/core'
+import { ChatHeader } from './chat/ChatHeader.js'
+import { ChatHistoryView } from './chat/ChatHistoryView.js'
+import { ChatSettingsView } from './chat/ChatSettingsView.js'
+import { ChatTimelineView } from './chat/ChatTimelineView.js'
+import { useChatModels } from './chat/useChatModels.js'
+import { useChatSession } from './chat/useChatSession.js'
+
+export function Chat({
+  session
+}: {
+  session?: Session
+}) {
+  const { t } = useTranslation()
+  const { selectedModel, setSelectedModel, modelOptions, hasAvailableModels } = useChatModels()
+  const {
+    messages,
+    sessionInfo,
+    interactionRequest,
+    isCreating,
+    isReady,
+    isThinking,
+    activeView,
+    setActiveView,
+    messagesEndRef,
+    messagesContainerRef,
+    showScrollBottom,
+    scrollToBottom,
+    send,
+    interrupt,
+    clearMessages,
+    handleInteractionResponse
+  } = useChatSession({ session, selectedModel, hasAvailableModels })
+
+  return (
+    <div className={`chat-container ${isReady ? 'ready' : ''} ${!session?.id ? 'is-new-session' : ''}`}>
+      {session?.id && (
+        <ChatHeader
+          sessionInfo={sessionInfo}
+          sessionId={session?.id}
+          sessionTitle={session?.title}
+          isStarred={session?.isStarred}
+          isArchived={session?.isArchived}
+          tags={session?.tags}
+          lastMessage={session?.lastMessage}
+          lastUserMessage={session?.lastUserMessage}
+          activeView={activeView}
+          onViewChange={setActiveView}
+        />
+      )}
+
+      {activeView === 'history' && (
+        <ChatHistoryView
+          isReady={isReady}
+          messages={messages}
+          session={session}
+          sessionInfo={sessionInfo}
+          isCreating={isCreating}
+          showScrollBottom={showScrollBottom}
+          messagesContainerRef={messagesContainerRef}
+          messagesEndRef={messagesEndRef}
+          scrollToBottom={scrollToBottom}
+          interactionRequest={interactionRequest}
+          onInteractionResponse={handleInteractionResponse}
+          onSend={send}
+          onInterrupt={interrupt}
+          onClear={clearMessages}
+          placeholder={!session?.id ? t('chat.newSessionPlaceholder') : undefined}
+          modelOptions={modelOptions}
+          selectedModel={selectedModel}
+          onModelChange={setSelectedModel}
+          modelUnavailable={!hasAvailableModels}
+        />
+      )}
+
+      {activeView === 'timeline' && (
+        <ChatTimelineView messages={messages} isThinking={isThinking} />
+      )}
+
+      {activeView === 'settings' && session?.id && (
+        <ChatSettingsView
+          session={session}
+          onClose={() => setActiveView('history')}
+        />
+      )}
+    </div>
+  )
+}