feat(dashboard): add scheduled task actions (#31)

2026-04-27 01:36:40 +09:00
parent 6abbfdd6af
commit 22bd24ec88
6 changed files with 376 additions and 3 deletions
--- a/apps/dashboard/src/App.tsx
+++ b/apps/dashboard/src/App.tsx
@@ -1,10 +1,12 @@
 import { useEffect, useMemo, useState, type ReactNode } from 'react';

 import {
+  type DashboardTaskAction,
  type DashboardOverview,
  type DashboardTask,
  type StatusSnapshot,
  fetchDashboardData,
+  runScheduledTaskAction,
 } from './api';
 import {
  LOCALES,
@@ -32,6 +34,7 @@ type UsageLimitWindow = 'h5' | 'd7';
 type DashboardView = 'usage' | 'inbox' | 'health' | 'rooms' | 'scheduled';
 type TaskGroupKey = 'watchers' | 'scheduled' | 'paused' | 'completed';
 type TaskResultTone = 'ok' | 'fail' | 'none';
+type TaskActionKey = `${string}:${DashboardTaskAction}`;
 type InboxFilter = 'all' | InboxItem['kind'];
 type HealthLevel = 'ok' | 'stale' | 'down';

@@ -278,6 +281,12 @@ function taskDisplayName(task: DashboardTask, t: Messages): string {
  return task.id;
 }

+function taskActionsFor(task: DashboardTask): DashboardTaskAction[] {
+  if (task.status === 'active') return ['pause', 'cancel'];
+  if (task.status === 'paused') return ['resume', 'cancel'];
+  return [];
+}
+
 const INBOX_FILTERS: InboxFilter[] = [
  'all',
  'ci-failure',
@@ -1089,10 +1098,14 @@ function UsagePanel({
 function TaskPanel({
  tasks,
  locale,
+  onTaskAction,
+  taskActionKey,
  t,
 }: {
  tasks: DashboardTask[];
  locale: Locale;
+  onTaskAction: (task: DashboardTask, action: DashboardTaskAction) => void;
+  taskActionKey: TaskActionKey | null;
  t: Messages;
 }) {
  const taskGroups = useMemo(() => {
@@ -1155,6 +1168,7 @@ function TaskPanel({
                  task.lastResult,
                  t.tasks.noResult,
                );
+                const taskActions = taskActionsFor(task);
                return (
                  <article
                    className={`task-card task-card-${group.key}`}
@@ -1177,6 +1191,28 @@ function TaskPanel({
                      </div>
                    </div>

+                    {taskActions.length > 0 ? (
+                      <div className="task-actions">
+                        {taskActions.map((action) => {
+                          const actionKey: TaskActionKey = `${task.id}:${action}`;
+                          const busy = taskActionKey === actionKey;
+                          return (
+                            <button
+                              className={`task-action task-action-${action}`}
+                              disabled={busy}
+                              key={action}
+                              onClick={() => onTaskAction(task, action)}
+                              type="button"
+                            >
+                              {busy
+                                ? t.tasks.actions.busy
+                                : t.tasks.actions[action]}
+                            </button>
+                          );
+                        })}
+                      </div>
+                    ) : null}
+
                    <div className="task-time-grid">
                      <span>
                        <small>{t.tasks.next}</small>
@@ -1278,6 +1314,9 @@ function App() {
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [activeView, setActiveView] = useState<DashboardView>(readViewFromHash);
  const [locale, setLocale] = useState<Locale>(readInitialLocale);
+  const [taskActionKey, setTaskActionKey] = useState<TaskActionKey | null>(
+    null,
+  );
  const t = messages[locale];

  function setDashboardLocale(nextLocale: Locale) {
@@ -1306,6 +1345,26 @@ function App() {
    }
  }

+  async function handleTaskAction(
+    task: DashboardTask,
+    action: DashboardTaskAction,
+  ) {
+    if (action === 'cancel' && !window.confirm(t.tasks.actions.confirmCancel)) {
+      return;
+    }
+
+    const actionKey: TaskActionKey = `${task.id}:${action}`;
+    setTaskActionKey(actionKey);
+    try {
+      await runScheduledTaskAction(task.id, action);
+      await refresh(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setTaskActionKey(null);
+    }
+  }
+
  useEffect(() => {
    document.documentElement.lang = localeTags[locale];
  }, [locale]);
@@ -1430,7 +1489,15 @@ function App() {
                  <h2>{t.panels.scheduled}</h2>
                  <span>{t.panels.promptPreviews}</span>
                </div>
-                <TaskPanel locale={locale} tasks={data.tasks} t={t} />
+                <TaskPanel
+                  locale={locale}
+                  onTaskAction={(task, action) =>
+                    void handleTaskAction(task, action)
+                  }
+                  taskActionKey={taskActionKey}
+                  tasks={data.tasks}
+                  t={t}
+                />
              </section>
            ) : null}
          </div>
--- a/apps/dashboard/src/api.ts
+++ b/apps/dashboard/src/api.ts
@@ -100,6 +100,8 @@ export interface DashboardTask {
  isWatcher: boolean;
 }

+export type DashboardTaskAction = 'pause' | 'resume' | 'cancel';
+
 async function fetchJson<T>(path: string): Promise<T> {
  const response = await fetch(path, {
    headers: { accept: 'application/json' },
@@ -110,6 +112,28 @@ async function fetchJson<T>(path: string): Promise<T> {
  return (await response.json()) as T;
 }

+async function postJson<T>(path: string, body: unknown): Promise<T> {
+  const response = await fetch(path, {
+    method: 'POST',
+    headers: {
+      accept: 'application/json',
+      'content-type': 'application/json',
+    },
+    body: JSON.stringify(body),
+  });
+  if (!response.ok) {
+    let message = `${path} failed: ${response.status}`;
+    try {
+      const payload = (await response.json()) as { error?: string };
+      if (payload.error) message = payload.error;
+    } catch {
+      // Keep the status-based message when the server body is not JSON.
+    }
+    throw new Error(message);
+  }
+  return (await response.json()) as T;
+}
+
 export async function fetchDashboardData(): Promise<{
  overview: DashboardOverview;
  snapshots: StatusSnapshot[];
@@ -123,3 +147,17 @@ export async function fetchDashboardData(): Promise<{

  return { overview, snapshots, tasks };
 }
+
+export async function runScheduledTaskAction(
+  taskId: string,
+  action: DashboardTaskAction,
+): Promise<{
+  ok: true;
+  id?: string;
+  deleted?: boolean;
+  task?: DashboardTask | null;
+}> {
+  return postJson(`/api/tasks/${encodeURIComponent(taskId)}/actions`, {
+    action,
+  });
+}
--- a/apps/dashboard/src/i18n.ts
+++ b/apps/dashboard/src/i18n.ts
@@ -177,6 +177,13 @@ export interface Messages {
    noResult: string;
    noTime: string;
    now: string;
+    actions: {
+      pause: string;
+      resume: string;
+      cancel: string;
+      busy: string;
+      confirmCancel: string;
+    };
  };
  status: {
    processing: string;
@@ -386,6 +393,13 @@ export const messages = {
      noResult: '결과 없음',
      noTime: '-',
      now: '지금',
+      actions: {
+        pause: 'Pause',
+        resume: 'Resume',
+        cancel: 'Cancel',
+        busy: 'Working',
+        confirmCancel: 'Cancel this scheduled work?',
+      },
    },
    status: {
      processing: '처리중',
@@ -579,6 +593,13 @@ export const messages = {
      noResult: 'no result',
      noTime: '-',
      now: 'now',
+      actions: {
+        pause: 'Pause',
+        resume: 'Resume',
+        cancel: 'Cancel',
+        busy: 'Working',
+        confirmCancel: 'Cancel this scheduled work?',
+      },
    },
    status: {
      processing: 'processing',
@@ -772,6 +793,13 @@ export const messages = {
      noResult: '无结果',
      noTime: '-',
      now: '现在',
+      actions: {
+        pause: 'Pause',
+        resume: 'Resume',
+        cancel: 'Cancel',
+        busy: 'Working',
+        confirmCancel: 'Cancel this scheduled work?',
+      },
    },
    status: {
      processing: '处理中',
@@ -965,6 +993,13 @@ export const messages = {
      noResult: '結果なし',
      noTime: '-',
      now: '今',
+      actions: {
+        pause: 'Pause',
+        resume: 'Resume',
+        cancel: 'Cancel',
+        busy: 'Working',
+        confirmCancel: 'Cancel this scheduled work?',
+      },
    },
    status: {
      processing: '処理中',
--- a/apps/dashboard/src/styles.css
+++ b/apps/dashboard/src/styles.css
@@ -1198,6 +1198,43 @@ progress::-moz-progress-bar {
  background: rgba(43, 55, 38, 0.08);
 }

+.task-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.task-action {
+  min-height: 34px;
+  padding: 0 12px;
+  border: 1px solid rgba(43, 55, 38, 0.12);
+  border-radius: 999px;
+  color: var(--ink);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 900;
+  background: rgba(255, 250, 240, 0.84);
+  cursor: pointer;
+}
+
+.task-action:hover,
+.task-action:focus-visible {
+  border-color: rgba(191, 95, 44, 0.42);
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(191, 95, 44, 0.12);
+}
+
+.task-action:disabled {
+  cursor: progress;
+  opacity: 0.55;
+}
+
+.task-action-cancel {
+  color: #8f2f22;
+  border-color: rgba(183, 71, 52, 0.22);
+  background: rgba(183, 71, 52, 0.08);
+}
+
 .task-time-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -1668,6 +1705,11 @@ progress::-moz-progress-bar {
    padding: 9px;
  }

+  .task-action {
+    min-height: 32px;
+    padding-inline: 10px;
+  }
+
  .task-card-main {
    gap: 7px;
  }