feat: display project field in web UI

Show task.project as a badge in task card meta row and as a field
in the task detail overview grid. Both display conditionally only
when project is non-empty.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

2 files changed, 20 insertions, 0 deletions

diff --git a/web/app.js b/web/app.js
index d0ff0f4..73f5a5c 100644
--- a/web/app.js
+++ b/web/app.js
@@ -156,6 +156,12 @@ function createTaskCard(task) {
     when.textContent = formatDate(task.created_at);
     meta.appendChild(when);
   }
+  if (task.project) {
+    const proj = document.createElement('span');
+    proj.className = 'task-project';
+    proj.textContent = task.project;
+    meta.appendChild(proj);
+  }
   if (meta.children.length) card.appendChild(meta);
 
   // Description (truncated via CSS)
@@ -1803,6 +1809,9 @@ function renderTaskPanel(task, executions) {
   if (task.tags && task.tags.length >= 0) {
     overviewGrid.append(makeMetaItem('Tags', '', { fullWidth: true, tags: task.tags || [] }));
   }
+  if (task.project) {
+    overviewGrid.append(makeMetaItem('Project', task.project));
+  }
   if (task.description) {
     overviewGrid.append(makeMetaItem('Description', task.description, { fullWidth: true }));
   }
diff --git a/web/style.css b/web/style.css
index 1b6fb69..7a3eb71 100644
--- a/web/style.css
+++ b/web/style.css
@@ -264,6 +264,17 @@ main {
   flex-wrap: wrap;
 }
 
+.task-project {
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  background: var(--bg-elevated, #2a2a2a);
+  border: 1px solid var(--border, #444);
+  border-radius: 3px;
+  padding: 0 0.35rem;
+  letter-spacing: 0.02em;
+}
+
 .task-description {
   font-size: 0.82rem;
   color: var(--text-muted);