admin-panel/src/client/components/task-card.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

import type { Task } from '../lib/api.js';

export function renderTaskCard(task: Task): string {
  const tags = parseTags(task.tags);
  const priorityClass = `badge-${task.priority}`;
  const isActive = task.current_agent !== null;

  return `
    <div class="task-card ${isActive ? 'pipeline-active' : ''}"
         data-task-id="${task.id}"
         data-rank="${task.rank}"
         draggable="true">
      <div class="task-card-header">
        <span class="task-id">#${task.id}</span>
        ${task.current_agent ? `<span class="badge badge-agent">${escapeHtml(task.current_agent)}</span>` : ''}
      </div>
      <div class="task-title">${escapeHtml(task.title)}</div>
      <div class="task-meta">
        <span class="badge ${priorityClass}">${task.priority}</span>
        <span class="badge badge-level">L${task.level}</span>
        ${tags.map(t => `<span class="tag">${escapeHtml(t)}</span>`).join('')}
      </div>
    </div>
  `;
}

function parseTags(tagsStr: string): string[] {
  try {
    const parsed = JSON.parse(tagsStr);
    return Array.isArray(parsed) ? parsed : [];
  } catch {
    return [];
  }
}

function escapeHtml(text: string): string {
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
}