1 files changed, 40 insertions, 0 deletions
diff --git a/admin-panel/src/client/components/task-card.ts b/admin-panel/src/client/components/task-card.ts
new file mode 100644
index 0000000..a63e507
--- /dev/null
+++ b/admin-panel/src/client/components/task-card.ts
@@ -0,0 +1,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;
+}