bingocode 1.0.3 → 1.0.4

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

@@ -1,407 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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>
-  )
-}