X-Agents/web/src/views/Plan.vue

<script setup lang="ts">
import { ref, computed } from 'vue'

// Mock scheduled tasks data
const tasks = ref([
  {
    id: 1,
    name: 'Human-like Heartbeat',
    status: 'running',
    triggerType: 'Interval 30 minutes',
    nextRun: '2026/03/10 16:26',
    lastRun: '2026/03/10 15:56',
    notifyChannel: '-',
    executionCount: 13,
    description: 'Check if proactive messages need to be sent (greetings/reminders/follow-ups)',
    tags: ['System Task', 'Agent Task', 'Interval']
  },
  {
    id: 2,
    name: 'Memory Organization',
    status: 'running',
    triggerType: 'Interval 3 hours',
    nextRun: '2026/03/10 18:35',
    lastRun: '2026/03/10 15:35',
    notifyChannel: '-',
    executionCount: 2,
    description: 'Execute memory organization: organize chat history, extract key memories, refresh MEMORY.md',
    tags: ['System Task', 'Agent Task', 'Interval']
  },
  {
    id: 3,
    name: 'System Self-Check',
    status: 'running',
    triggerType: 'Daily 04:00',
    nextRun: '2026/03/11 04:00',
    lastRun: 'Never',
    notifyChannel: '-',
    executionCount: 0,
    description: 'Execute system self-check: analyze ERROR logs, try to fix tool issues, generate report',
    tags: ['System Task', 'Agent Task', 'Daily']
  },
])

const filterStatus = ref('all') // running, stopped, all
const searchQuery = ref('')

const filteredTasks = computed(() => {
  let result = tasks.value
  if (filterStatus.value !== 'all') {
    result = result.filter(t => t.status === filterStatus.value)
  }
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(t =>
      t.name.toLowerCase().includes(query) ||
      t.description.toLowerCase().includes(query)
    )
  }
  return result
})

const getTaskCount = (status: string) => {
  if (status === 'running') return tasks.value.filter(t => t.status === 'running').length
  if (status === 'stopped') return tasks.value.filter(t => t.status === 'stopped').length
  return tasks.value.length
}

const getStatusClass = (status: string) => {
  switch (status) {
    case 'running': return 'bg-green-500'
    case 'stopped': return 'bg-gray-500'
    default: return 'bg-gray-500'
  }
}
</script>

<template>
  <div class="p-6 min-h-screen plan-page">
    <!-- Header -->
    <div class="flex justify-between items-center mb-6">
      <div class="flex items-center gap-2">
        <i class="fa-solid fa-clock text-orange-500"></i>
        <span class="font-medium text-white">Scheduled Tasks</span>
      </div>
      <button class="btn-primary">
        <i class="fa-solid fa-plus"></i>
        New Task
      </button>
    </div>

    <!-- Search -->
    <div class="flex gap-4 mb-6">
      <div class="flex-1 relative">
        <i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
        <input
          v-model="searchQuery"
          type="text"
          placeholder="Search tasks..."
          class="search-input w-full"
        >
      </div>
      <el-select v-model="filterStatus" placeholder="Select" class="w-40" size="large">
        <el-option label="All Status" value="all" />
        <el-option label="Running" value="running" />
        <el-option label="Stopped" value="stopped" />
      </el-select>
    </div>

    <!-- Task List Table -->
    <div class="bg-dark-700 rounded-xl overflow-hidden">
      <div v-if="filteredTasks.length === 0" class="py-12 text-center text-gray-400">
        <i class="fa-solid fa-clock text-2xl mb-2"></i>
        <p>No tasks found</p>
      </div>
      <table v-else class="w-full">
        <thead class="bg-dark-600">
          <tr>
            <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Task Name</th>
            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Status</th>
            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Trigger</th>
            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Next Run</th>
            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Executions</th>
            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="task in filteredTasks" :key="task.id" class="table-row">
            <td class="px-5 py-4">
              <div class="flex items-center gap-2">
                <span :class="['w-2 h-2 rounded-full', getStatusClass(task.status)]"></span>
                <div>
                  <div class="font-medium text-white">{{ task.name }}</div>
                  <div class="text-sm text-gray-500">{{ task.description }}</div>
                </div>
              </div>
              <div class="flex gap-2 mt-2">
                <span v-for="tag in task.tags" :key="tag" class="task-tag">{{ tag }}</span>
              </div>
            </td>
            <td class="px-5 py-4 text-center">
              <span :class="['status-badge', getStatusClass(task.status)]">
                {{ task.status === 'running' ? 'Running' : 'Stopped' }}
              </span>
            </td>
            <td class="px-5 py-4 text-center text-gray-400 text-sm">
              {{ task.triggerType }}
            </td>
            <td class="px-5 py-4 text-center text-gray-400 text-sm">
              {{ task.nextRun }}
            </td>
            <td class="px-5 py-4 text-center">
              <span class="text-primary-cyan">{{ task.executionCount }}</span>
            </td>
            <td class="px-5 py-4">
              <div class="flex items-center justify-center gap-2">
                <button class="btn-icon" title="Pause">
                  <i class="fa-solid fa-pause text-gray-400 hover:text-white"></i>
                </button>
                <button class="btn-icon" title="Edit">
                  <i class="fa-solid fa-pen text-gray-400 hover:text-white"></i>
                </button>
                <button class="btn-icon" title="Delete">
                  <i class="fa-solid fa-trash text-gray-400 hover:text-red-500"></i>
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<style scoped>
.plan-page {
  background-color: #0f1419;
}

.btn-primary {
  background: linear-gradient(135deg, #f97316, #ef4444);
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

.search-input {
  background-color: #1f2937;
  border: 1px solid #374151;
  border-radius: 8px;
  padding: 10px 12px 10px 36px;
  color: white;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.search-input:focus {
  border-color: #f97316;
}

.search-input::placeholder {
  color: #6b7280;
}

.tab-item {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 14px;
  padding: 8px 4px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.tab-item:hover {
  color: white;
}

.tab-item.active {
  color: #f97316;
  border-bottom-color: #f97316;
}

.table-row {
  border-top: 1px solid #2a2a3a;
  transition: background-color 0.2s;
}

.table-row:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

.task-tag {
  background-color: #374151;
  color: #d1d5db;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
}

.status-badge {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  color: white;
}

.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.btn-icon:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
</style>