bingocode 1.0.2 → 1.0.3

package/desktop/src/components/tasks/NewTaskModal.tsx

@@ -0,0 +1,407 @@
+import { useState, useEffect } from 'react'
+import { useTaskStore } from '../../stores/taskStore'
+import { useSessionStore } from '../../stores/sessionStore'
+import { useAdapterStore } from '../../stores/adapterStore'
+import { Modal } from '../shared/Modal'
+import { Input } from '../shared/Input'
+import { Button } from '../shared/Button'
+import { PromptEditor } from './PromptEditor'
+import { DayOfWeekPicker } from './DayOfWeekPicker'
+import { useTranslation } from '../../i18n'
+import { describeCron, isValidCron, parseCron, type FrequencyKey } from '../../lib/cronDescribe'
+import type { PermissionMode } from '../../types/settings'
+import type { CronTask } from '../../types/task'
+
+type Props = {
+  open: boolean
+  onClose: () => void
+  editTask?: CronTask
+}
+
+const MINUTE_INTERVALS = [5, 10, 15, 20, 30]
+const HOUR_INTERVALS = [1, 2, 3, 4, 6, 8, 12]
+const MINUTE_OFFSETS = [0, 15, 30, 45]
+
+function buildCron(
+  freq: FrequencyKey,
+  time: string,
+  opts: {
+    minuteInterval: number
+    hourInterval: number
+    minuteOffset: number
+    selectedDays: number[]
+    monthDay: number
+    customCron: string
+  },
+): string {
+  const [hours, minutes] = time.split(':').map(Number)
+  switch (freq) {
+    case 'everyNMinutes':
+      return `*/${opts.minuteInterval} * * * *`
+    case 'everyNHours':
+      return `${opts.minuteOffset} */${opts.hourInterval} * * *`
+    case 'daily':
+      return `${minutes} ${hours} * * *`
+    case 'weekdays':
+      return `${minutes} ${hours} * * 1-5`
+    case 'specificDays':
+      return `${minutes} ${hours} * * ${[...opts.selectedDays].sort((a, b) => a - b).join(',')}`
+    case 'monthly':
+      return `${minutes} ${hours} ${opts.monthDay} * *`
+    case 'customCron':
+      return opts.customCron.trim()
+  }
+}
+
+export function NewTaskModal({ open, onClose, editTask }: Props) {
+  const t = useTranslation()
+  const { createTask, updateTask } = useTaskStore()
+  const sessions = useSessionStore((s) => s.sessions)
+  const activeSessionId = useSessionStore((s) => s.activeSessionId)
+  const activeSession = sessions.find((s) => s.id === activeSessionId)
+  const defaultWorkDir = activeSession?.workDir || ''
+  const adapterConfig = useAdapterStore((s) => s.config)
+  const fetchAdapterConfig = useAdapterStore((s) => s.fetchConfig)
+
+  useEffect(() => {
+    if (open) fetchAdapterConfig()
+  }, [open])
+
+  const isFeishuConfigured = !!(adapterConfig.feishu?.appId && adapterConfig.feishu?.appSecret
+    && ((adapterConfig.feishu?.pairedUsers?.length ?? 0) > 0 || (adapterConfig.feishu?.allowedUsers?.length ?? 0) > 0))
+  const isTelegramConfigured = !!(adapterConfig.telegram?.botToken
+    && ((adapterConfig.telegram?.pairedUsers?.length ?? 0) > 0 || (adapterConfig.telegram?.allowedUsers?.length ?? 0) > 0))
+
+  const isEdit = !!editTask
+  const parsed = editTask ? parseCron(editTask.cron) : null
+
+  const FREQUENCY_OPTIONS: Array<{ value: FrequencyKey; label: string }> = [
+    { value: 'everyNMinutes', label: t('newTask.everyNMinutes') },
+    { value: 'everyNHours',   label: t('newTask.everyNHours') },
+    { value: 'daily',         label: t('newTask.daily') },
+    { value: 'weekdays',      label: t('newTask.weekdays') },
+    { value: 'specificDays',  label: t('newTask.specificDays') },
+    { value: 'monthly',       label: t('newTask.monthly') },
+    { value: 'customCron',    label: t('newTask.customCron') },
+  ]
+
+  const [name, setName] = useState(editTask?.name || '')
+  const [description, setDescription] = useState(editTask?.description || '')
+  const [prompt, setPrompt] = useState(editTask?.prompt || '')
+  const [frequency, setFrequency] = useState<FrequencyKey>(parsed?.frequency || 'daily')
+  const [time, setTime] = useState(parsed?.time || '09:00')
+  const [model, setModel] = useState(editTask?.model || '')
+  const [permissionMode, setPermissionMode] = useState<PermissionMode>((editTask?.permissionMode as PermissionMode) || 'default')
+  const [folderPath, setFolderPath] = useState(editTask?.folderPath || defaultWorkDir)
+  const [useWorktree, setUseWorktree] = useState(editTask?.useWorktree || false)
+  const [notifyEnabled, setNotifyEnabled] = useState(editTask?.notification?.enabled || false)
+  const [notifyChannels, setNotifyChannels] = useState<('telegram' | 'feishu')[]>(editTask?.notification?.channels || [])
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  // Enhanced scheduling state
+  const [minuteInterval, setMinuteInterval] = useState(parsed?.minuteInterval || 15)
+  const [hourInterval, setHourInterval] = useState(parsed?.hourInterval || 1)
+  const [minuteOffset, setMinuteOffset] = useState(parsed?.minuteOffset || 0)
+  const [selectedDays, setSelectedDays] = useState<number[]>(parsed?.selectedDays || [1])
+  const [monthDay, setMonthDay] = useState(parsed?.monthDay || 1)
+  const [customCron, setCustomCron] = useState(parsed?.customCron || '0 9 * * *')
+
+  const showTime = ['daily', 'weekdays', 'specificDays', 'monthly'].includes(frequency)
+
+  const cronValue = buildCron(frequency, time, {
+    minuteInterval, hourInterval, minuteOffset, selectedDays, monthDay, customCron,
+  })
+
+  const canSubmit =
+    name.trim() &&
+    description.trim() &&
+    prompt.trim() &&
+    (frequency !== 'customCron' || isValidCron(customCron)) &&
+    (frequency !== 'specificDays' || selectedDays.length > 0)
+
+  const handleSubmit = async () => {
+    if (!canSubmit) return
+    setIsSubmitting(true)
+    try {
+      const payload = {
+        name: name.trim(),
+        description: description.trim(),
+        cron: cronValue,
+        prompt: prompt.trim(),
+        model: model || undefined,
+        permissionMode: permissionMode !== 'default' ? permissionMode : undefined,
+        folderPath: folderPath.trim() || undefined,
+        useWorktree: useWorktree || undefined,
+        notification: notifyEnabled && notifyChannels.length > 0
+          ? { enabled: true, channels: notifyChannels }
+          : undefined,
+      }
+      if (isEdit) {
+        await updateTask(editTask!.id, payload)
+      } else {
+        await createTask({ ...payload, enabled: true, recurring: true })
+      }
+      onClose()
+    } catch (err) {
+      console.error(`Failed to ${isEdit ? 'update' : 'create'} task:`, err)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const selectClass = 'w-full h-10 px-3 pr-8 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] text-sm text-[var(--color-text-primary)] outline-none focus:border-[var(--color-border-focus)] appearance-none cursor-pointer'
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={isEdit ? t('tasks.editTitle') : t('newTask.title')}
+      footer={
+        <>
+          <Button variant="secondary" onClick={onClose}>{t('common.cancel')}</Button>
+          <Button onClick={handleSubmit} disabled={!canSubmit} loading={isSubmitting}>
+            {isEdit ? t('tasks.saveChanges') : t('newTask.create')}
+          </Button>
+        </>
+      }
+    >
+      {/* Info banner */}
+      <div className="flex items-center gap-2.5 px-3.5 py-2.5 rounded-[var(--radius-md)] bg-[var(--color-surface-container)] mb-5">
+        <span className="material-symbols-outlined text-[18px] text-[var(--color-text-secondary)]">info</span>
+        <span className="text-xs text-[var(--color-text-secondary)]">
+          {t('newTask.localWarning')}
+        </span>
+      </div>
+
+      <div className="flex flex-col gap-4">
+        <Input
+          label={t('newTask.name')}
+          required
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder={t('newTask.namePlaceholder')}
+        />
+
+        <Input
+          label={t('newTask.description')}
+          required
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          placeholder={t('newTask.descPlaceholder')}
+        />
+
+        {/* Prompt editor with embedded controls */}
+        <PromptEditor
+          value={prompt}
+          onChange={setPrompt}
+          placeholder={t('newTask.promptPlaceholder')}
+          permissionMode={permissionMode}
+          onPermissionModeChange={setPermissionMode}
+          modelId={model}
+          onModelChange={setModel}
+          folderPath={folderPath}
+          onFolderPathChange={setFolderPath}
+          useWorktree={useWorktree}
+          onUseWorktreeChange={setUseWorktree}
+        />
+
+        {/* Frequency */}
+        <div className="flex flex-col gap-1">
+          <label className="text-sm font-medium text-[var(--color-text-primary)]">{t('newTask.frequency')}</label>
+          <div className="relative">
+            <select
+              value={frequency}
+              onChange={(e) => setFrequency(e.target.value as FrequencyKey)}
+              className={selectClass}
+            >
+              {FREQUENCY_OPTIONS.map((opt) => (
+                <option key={opt.value} value={opt.value}>{opt.label}</option>
+              ))}
+            </select>
+            <span className="material-symbols-outlined text-[18px] text-[var(--color-text-tertiary)] absolute right-2.5 top-1/2 -translate-y-1/2 pointer-events-none">
+              expand_more
+            </span>
+          </div>
+        </div>
+
+        {/* Sub-controls based on frequency */}
+        {frequency === 'everyNMinutes' && (
+          <div className="relative">
+            <select
+              value={minuteInterval}
+              onChange={(e) => setMinuteInterval(Number(e.target.value))}
+              className={selectClass}
+            >
+              {MINUTE_INTERVALS.map((n) => (
+                <option key={n} value={n}>{t('newTask.intervalMinutes', { n })}</option>
+              ))}
+            </select>
+            <span className="material-symbols-outlined text-[18px] text-[var(--color-text-tertiary)] absolute right-2.5 top-1/2 -translate-y-1/2 pointer-events-none">
+              expand_more
+            </span>
+          </div>
+        )}
+
+        {frequency === 'everyNHours' && (
+          <div className="flex gap-2">
+            <div className="relative flex-1">
+              <select
+                value={hourInterval}
+                onChange={(e) => setHourInterval(Number(e.target.value))}
+                className={selectClass}
+              >
+                {HOUR_INTERVALS.map((n) => (
+                  <option key={n} value={n}>{t('newTask.intervalHours', { n })}</option>
+                ))}
+              </select>
+              <span className="material-symbols-outlined text-[18px] text-[var(--color-text-tertiary)] absolute right-2.5 top-1/2 -translate-y-1/2 pointer-events-none">
+                expand_more
+              </span>
+            </div>
+            <div className="relative flex-1">
+              <select
+                value={minuteOffset}
+                onChange={(e) => setMinuteOffset(Number(e.target.value))}
+                className={selectClass}
+              >
+                {MINUTE_OFFSETS.map((m) => (
+                  <option key={m} value={m}>{t('newTask.atMinute', { m: m.toString().padStart(2, '0') })}</option>
+                ))}
+              </select>
+              <span className="material-symbols-outlined text-[18px] text-[var(--color-text-tertiary)] absolute right-2.5 top-1/2 -translate-y-1/2 pointer-events-none">
+                expand_more
+              </span>
+            </div>
+          </div>
+        )}
+
+        {frequency === 'specificDays' && (
+          <DayOfWeekPicker selected={selectedDays} onChange={setSelectedDays} />
+        )}
+
+        {frequency === 'monthly' && (
+          <div className="relative">
+            <select
+              value={monthDay}
+              onChange={(e) => setMonthDay(Number(e.target.value))}
+              className={selectClass}
+            >
+              {Array.from({ length: 28 }, (_, i) => i + 1).map((d) => (
+                <option key={d} value={d}>{t('newTask.onMonthDay', { d })}</option>
+              ))}
+            </select>
+            <span className="material-symbols-outlined text-[18px] text-[var(--color-text-tertiary)] absolute right-2.5 top-1/2 -translate-y-1/2 pointer-events-none">
+              expand_more
+            </span>
+          </div>
+        )}
+
+        {frequency === 'customCron' && (
+          <div className="flex flex-col gap-1">
+            <input
+              type="text"
+              value={customCron}
+              onChange={(e) => setCustomCron(e.target.value)}
+              placeholder={t('newTask.cronFormatHint')}
+              className="w-full h-10 px-3 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] text-sm text-[var(--color-text-primary)] font-[var(--font-mono)] outline-none focus:border-[var(--color-border-focus)]"
+            />
+            <span className="text-xs text-[var(--color-text-tertiary)]">{t('newTask.cronFormatHint')}</span>
+            {customCron.trim() && !isValidCron(customCron) && (
+              <span className="text-xs text-[var(--color-error)]">{t('newTask.invalidCron')}</span>
+            )}
+          </div>
+        )}
+
+        {/* Time picker — shown for daily, weekdays, specificDays, monthly */}
+        {showTime && (
+          <div className="flex flex-col gap-1">
+            <input
+              type="time"
+              value={time}
+              onChange={(e) => setTime(e.target.value)}
+              className="w-auto h-10 px-3 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] text-sm text-[var(--color-text-primary)] outline-none focus:border-[var(--color-border-focus)]"
+              style={{ maxWidth: 120 }}
+            />
+          </div>
+        )}
+
+        {/* Notification */}
+        <div className="flex flex-col gap-3 rounded-[var(--radius-md)] border border-[var(--color-border)] p-3">
+          <label className="flex items-center gap-3 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={notifyEnabled}
+              onChange={(e) => setNotifyEnabled(e.target.checked)}
+              className="w-4 h-4 rounded border-[var(--color-border)] accent-[var(--color-brand)]"
+            />
+            <div>
+              <span className="text-sm font-medium text-[var(--color-text-primary)]">{t('newTask.notifyOnComplete')}</span>
+              <p className="text-xs text-[var(--color-text-tertiary)]">{t('newTask.notifyHint')}</p>
+            </div>
+          </label>
+          {notifyEnabled && (
+            <div className="flex flex-col gap-2 pl-7">
+              <div className="flex items-center gap-4">
+                <label className={`flex items-center gap-2 ${isFeishuConfigured ? 'cursor-pointer' : 'opacity-50 cursor-not-allowed'}`}>
+                  <input
+                    type="checkbox"
+                    checked={notifyChannels.includes('feishu')}
+                    disabled={!isFeishuConfigured}
+                    onChange={(e) => {
+                      setNotifyChannels((prev) =>
+                        e.target.checked ? [...prev, 'feishu'] : prev.filter((c) => c !== 'feishu'),
+                      )
+                    }}
+                    className="w-3.5 h-3.5 rounded border-[var(--color-border)] accent-[var(--color-brand)]"
+                  />
+                  <span className="text-sm text-[var(--color-text-primary)]">{t('settings.adapters.feishu')}</span>
+                  {!isFeishuConfigured && (
+                    <span className="text-[10px] text-[var(--color-warning)]">{t('newTask.notConfigured')}</span>
+                  )}
+                </label>
+                <label className={`flex items-center gap-2 ${isTelegramConfigured ? 'cursor-pointer' : 'opacity-50 cursor-not-allowed'}`}>
+                  <input
+                    type="checkbox"
+                    checked={notifyChannels.includes('telegram')}
+                    disabled={!isTelegramConfigured}
+                    onChange={(e) => {
+                      setNotifyChannels((prev) =>
+                        e.target.checked ? [...prev, 'telegram'] : prev.filter((c) => c !== 'telegram'),
+                      )
+                    }}
+                    className="w-3.5 h-3.5 rounded border-[var(--color-border)] accent-[var(--color-brand)]"
+                  />
+                  <span className="text-sm text-[var(--color-text-primary)]">{t('settings.adapters.telegram')}</span>
+                  {!isTelegramConfigured && (
+                    <span className="text-[10px] text-[var(--color-warning)]">{t('newTask.notConfigured')}</span>
+                  )}
+                </label>
+              </div>
+              {!isFeishuConfigured && !isTelegramConfigured && (
+                <p className="text-xs text-[var(--color-warning)]">
+                  <span className="material-symbols-outlined text-[12px] align-middle mr-1">warning</span>
+                  {t('newTask.noChannelConfigured')}
+                </p>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Cron preview */}
+        <div className="flex items-center gap-2 px-3 py-2 rounded-[var(--radius-md)] bg-[var(--color-surface-container)] text-xs text-[var(--color-text-secondary)]">
+          <span className="material-symbols-outlined text-[16px]">schedule</span>
+          <span>
+            {frequency === 'customCron' && customCron.trim() && !isValidCron(customCron)
+              ? t('newTask.invalidCron')
+              : describeCron(cronValue, t)
+            }
+          </span>
+        </div>
+
+        <p className="text-xs text-[var(--color-text-tertiary)]">
+          {t('newTask.delayNote')}
+        </p>
+      </div>
+    </Modal>
+  )
+}

package/desktop/src/components/tasks/PromptEditor.tsx

@@ -0,0 +1,74 @@
+import { PermissionModeSelector } from '../controls/PermissionModeSelector'
+import { ModelSelector } from '../controls/ModelSelector'
+import { DirectoryPicker } from '../shared/DirectoryPicker'
+import { useTranslation } from '../../i18n'
+import type { PermissionMode } from '../../types/settings'
+
+type Props = {
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+
+  permissionMode: PermissionMode
+  onPermissionModeChange: (mode: PermissionMode) => void
+
+  modelId: string
+  onModelChange: (modelId: string) => void
+
+  folderPath: string
+  onFolderPathChange: (path: string) => void
+
+  useWorktree: boolean
+  onUseWorktreeChange: (checked: boolean) => void
+}
+
+export function PromptEditor({
+  value,
+  onChange,
+  placeholder,
+  permissionMode,
+  onPermissionModeChange,
+  modelId,
+  onModelChange,
+  folderPath,
+  onFolderPathChange,
+  useWorktree: _useWorktree,
+  onUseWorktreeChange: _onUseWorktreeChange,
+}: Props) {
+  const t = useTranslation()
+  return (
+    <div className="rounded-[var(--radius-lg)] border border-[var(--color-border)] focus-within:border-[var(--color-border-focus)] transition-colors overflow-visible">
+      {/* Prompt textarea */}
+      <textarea
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        rows={4}
+        className="w-full resize-y bg-transparent px-3 py-2.5 text-sm leading-relaxed text-[var(--color-text-primary)] outline-none placeholder:text-[var(--color-text-tertiary)]"
+        style={{ minHeight: 120 }}
+      />
+
+      {/* Bottom toolbar */}
+      <div className="border-t border-[var(--color-border)]/40 px-3 py-2 flex flex-col gap-2 bg-[var(--color-surface-container-low)] rounded-b-[var(--radius-lg)]">
+        {/* Row 1: Permission + Model selectors */}
+        <div className="flex items-center justify-between">
+          <PermissionModeSelector value={permissionMode} onChange={onPermissionModeChange} workDir={folderPath || undefined} />
+          <ModelSelector value={modelId} onChange={onModelChange} />
+        </div>
+
+        {/* Row 2: Folder picker */}
+        <div className="flex items-center justify-between">
+          <DirectoryPicker value={folderPath} onChange={onFolderPathChange} />
+        </div>
+
+        {/* Bypass + no folder warning */}
+        {permissionMode === 'bypassPermissions' && (
+          <div className="flex items-center gap-1.5 px-2 py-1.5 rounded-md bg-[var(--color-error)]/8 text-[10px] text-[var(--color-error)]">
+            <span className="material-symbols-outlined text-[12px]">warning</span>
+            {t('promptEditor.bypassWarning')}{folderPath ? ` ${t('promptEditor.within')} ${folderPath}` : ` ${t('promptEditor.selectFolder')}`}.
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/desktop/src/components/tasks/TaskEmptyState.tsx

@@ -0,0 +1,30 @@
+import { Button } from '../shared/Button'
+import { useTranslation } from '../../i18n'
+
+type Props = {
+  onCreateTask: () => void
+}
+
+export function TaskEmptyState({ onCreateTask }: Props) {
+  const t = useTranslation()
+  return (
+    <div className="flex flex-col items-center justify-center py-20">
+      {/* Clock icon */}
+      <div className="w-16 h-16 rounded-full bg-[var(--color-surface-info)] flex items-center justify-center mb-4">
+        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="var(--color-text-tertiary)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <circle cx="12" cy="12" r="10" />
+          <polyline points="12 6 12 12 16 14" />
+        </svg>
+      </div>
+
+      <h3 className="text-sm font-medium text-[var(--color-text-primary)] mb-1">
+        {t('tasks.emptyTitle')}
+      </h3>
+      <p className="text-sm text-[var(--color-text-tertiary)] mb-4 text-center max-w-sm">
+        {t('tasks.emptyDesc')}
+      </p>
+
+      <Button onClick={onCreateTask}>{t('tasks.newTask')}</Button>
+    </div>
+  )
+}

package/desktop/src/components/tasks/TaskList.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react'
+import type { CronTask } from '../../types/task'
+import { TaskRow } from './TaskRow'
+import { useTranslation } from '../../i18n'
+
+type Props = {
+  tasks: CronTask[]
+}
+
+export function TaskList({ tasks }: Props) {
+  const t = useTranslation()
+  const enabledCount = tasks.filter((task) => task.enabled).length
+  const [expandedLogsId, setExpandedLogsId] = useState<string | null>(null)
+
+  return (
+    <div>
+      {/* Stats */}
+      <div className="grid grid-cols-3 gap-4 mb-6">
+        <StatCard label={t('tasks.totalTasks')} value={String(tasks.length)} />
+        <StatCard label={t('tasks.active')} value={String(enabledCount)} />
+        <StatCard label={t('tasks.disabled')} value={String(tasks.length - enabledCount)} />
+      </div>
+
+      {/* Task rows — accordion: only one logs panel open at a time */}
+      <div className="flex flex-col">
+        {tasks.map((task) => (
+          <TaskRow
+            key={task.id}
+            task={task}
+            showLogs={expandedLogsId === task.id}
+            onToggleLogs={() => setExpandedLogsId(expandedLogsId === task.id ? null : task.id)}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function StatCard({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="px-4 py-3 rounded-[var(--radius-lg)] bg-[var(--color-surface-info)]">
+      <div className="text-2xl font-bold text-[var(--color-text-primary)]">{value}</div>
+      <div className="text-xs text-[var(--color-text-secondary)]">{label}</div>
+    </div>
+  )
+}