@teamclaws/teamclaw 2026.3.21 → 2026.3.25

package/src/ui/app.js

@@ -6,7 +6,7 @@
   let ws = null;
   let currentFilter = "all";
   let activeTab = "tasks";
-  let teamState = { workers: [], tasks: [], messages: [], clarifications: [] };
+  let teamState = { workers: [], tasks: [], controllerRuns: [], messages: [], clarifications: [] };
   let selectedTaskId = null;
   let selectedTaskDetail = null;
   let selectedTaskDetailTab = "overview";
@@ -126,6 +126,25 @@
     return "#";
   }
 
+  function normalizeSkillList(skills) {
+    if (!Array.isArray(skills)) {
+      return [];
+    }
+    return skills
+      .map(function (skill) { return String(skill || "").trim(); })
+      .filter(Boolean);
+  }
+
+  function renderSkillPills(skills, className) {
+    const items = normalizeSkillList(skills);
+    if (items.length === 0) {
+      return "";
+    }
+    return '<div class="' + escapeHtml(className || "skill-pills") + '">' + items.map(function (skill) {
+      return '<span class="skill-pill">' + escapeHtml(skill) + "</span>";
+    }).join("") + "</div>";
+  }
+
   function renderMarkdownInline(text) {
     const codeTokens = [];
     let safe = escapeHtml(text || "");
@@ -613,6 +632,9 @@
       : null;
 
     switch (event.type) {
+      case "controller:run":
+        handleControllerRunEvent(event.data || {});
+        break;
       case "task:execution":
         handleTaskExecutionEvent(event.data || {});
         break;
@@ -642,12 +664,14 @@
       teamState = {
         workers: statusRes.workers || [],
         tasks: statusRes.tasks || [],
+        controllerRuns: statusRes.controllerRuns || [],
         messages: statusRes.messages || [],
         clarifications: statusRes.clarifications || [],
       };
 
       renderWorkers(teamState.workers);
       renderTasks(teamState.tasks);
+      renderControllerRuns(teamState.controllerRuns);
       renderClarifications(teamState.clarifications);
       renderMessages(teamState.messages);
       renderRoles(rolesRes.roles || []);
@@ -707,6 +731,10 @@
       const assignee = task.assignedWorkerId
         ? "Assigned to " + task.assignedWorkerId
         : (task.assignedRole ? "Role: " + task.assignedRole : "Unassigned");
+      const recommendedSkills = normalizeSkillList(task.recommendedSkills);
+      const creatorBadge = task.createdBy
+        ? '<span class="task-origin-badge">' + escapeHtml(task.createdBy) + "</span>"
+        : "";
       const note = task.progress
         ? '<div class="task-note">' + escapeHtml(task.progress).slice(0, 220) + "</div>"
         : "";
@@ -719,8 +747,9 @@
         '<div class="task-card' + liveClass + '" data-task-id="' + escapeHtml(task.id) + '" tabindex="0" role="button" aria-label="Open details for ' + escapeHtml(task.title) + '">' +
         '  <span class="task-priority ' + escapeHtml(priority) + '">' + escapeHtml(priority) + "</span>" +
         '  <div class="task-body">' +
-        '    <div class="task-title">' + escapeHtml(task.title) + "</div>" +
+        '    <div class="task-title-row"><div class="task-title">' + escapeHtml(task.title) + "</div>" + creatorBadge + "</div>" +
         (task.description ? '<div class="task-desc">' + escapeHtml(task.description).slice(0, 220) + "</div>" : "") +
+        renderSkillPills(recommendedSkills, "skill-pills task-skill-pills") +
         note +
         '    <div class="task-meta">' +
         '      <span class="task-status-badge ' + escapeHtml(status) + '">' + escapeHtml(humanizeStatus(status)) + "</span>" +
@@ -734,6 +763,76 @@
     }).join("");
   }
 
+  function renderControllerRuns(runs) {
+    const container = $("#controller-runs");
+    if (!container) return;
+
+    const recentRuns = (runs || [])
+      .slice()
+      .sort(function (left, right) { return (right.updatedAt || 0) - (left.updatedAt || 0); })
+      .slice(0, 12);
+
+    if (recentRuns.length === 0) {
+      container.innerHTML = '<div class="empty-state">No controller activity yet</div>';
+      return;
+    }
+
+    container.innerHTML = recentRuns.map(function (run) {
+      const execution = run.execution || {};
+      const events = Array.isArray(execution.events) ? execution.events.slice(-5) : [];
+      const status = run.status || execution.status || "pending";
+      const source = run.source === "task_follow_up"
+        ? (run.sourceTaskTitle ? "Follow-up after " + run.sourceTaskTitle : "Workflow follow-up")
+        : "Human intake";
+      const createdTasks = Array.isArray(run.createdTaskIds) ? run.createdTaskIds : [];
+      const createdTaskButtons = createdTasks.length > 0
+        ? '<div class="controller-run-created-tasks">' + createdTasks.map(function (taskId) {
+          return '<button type="button" class="controller-run-task-link" data-open-task-id="' + escapeHtml(taskId) + '">' + escapeHtml(taskId) + "</button>";
+        }).join("") + "</div>"
+        : "";
+      const replyBlock = run.reply
+        ? '<div class="controller-run-section"><div class="controller-run-section-title">Reply</div><div class="markdown-body">' + renderMarkdownContent(run.reply) + "</div></div>"
+        : "";
+      const errorBlock = run.error
+        ? '<div class="controller-run-section"><div class="controller-run-section-title">Error</div><div class="markdown-body">' + renderMarkdownContent(run.error) + "</div></div>"
+        : "";
+      const eventsBlock = events.length > 0
+        ? '<div class="controller-run-events">' + events.map(function (event) {
+          const meta = [event.source || "", formatTime(event.createdAt)].filter(Boolean).join(" • ");
+          return (
+            '<div class="controller-run-event">' +
+            '  <div class="controller-run-event-header">' +
+            '    <span class="controller-run-event-label">' + escapeHtml(humanizeStatus(event.phase || event.type || "event")) + '</span>' +
+            '    <span class="controller-run-event-meta">' + escapeHtml(meta) + "</span>" +
+            "  </div>" +
+            '  <div class="controller-run-event-body markdown-body">' + renderMarkdownContent(event.message || "") + "</div>" +
+            "</div>"
+          );
+        }).join("") + "</div>"
+        : "";
+
+      return (
+        '<article class="controller-run-card">' +
+        '  <div class="controller-run-header">' +
+        '    <div class="controller-run-heading">' +
+        '      <div class="controller-run-kicker">' + escapeHtml(source) + "</div>" +
+        '      <h3>' + escapeHtml(run.title || "Controller run") + "</h3>" +
+        '      <div class="controller-run-meta">Session: ' + escapeHtml(run.sessionKey || "—") + ' • Updated: ' + escapeHtml(formatTime(run.updatedAt) || "—") + "</div>" +
+        "    </div>" +
+        '    <span class="controller-run-status ' + escapeHtml(status) + '">' + escapeHtml(humanizeStatus(status)) + "</span>" +
+        "  </div>" +
+        '  <div class="controller-run-section"><div class="controller-run-section-title">Request</div><div class="markdown-body">' + renderMarkdownContent(run.request || "") + "</div></div>" +
+        replyBlock +
+        errorBlock +
+        (createdTaskButtons
+          ? '<div class="controller-run-section"><div class="controller-run-section-title">Created Tasks</div>' + createdTaskButtons + "</div>"
+          : "") +
+        eventsBlock +
+        "</article>"
+      );
+    }).join("");
+  }
+
   function syncSelectedTaskSummary() {
     if (!selectedTaskId || !selectedTaskDetail) {
       return;
@@ -873,6 +972,9 @@
       "  <h3>Description</h3>" +
       renderMarkdownCard(task.description || "No description") +
       "</div>" +
+      (normalizeSkillList(task.recommendedSkills).length > 0
+        ? '<div class="task-detail-section"><h3>Recommended Skills</h3>' + renderSkillPills(task.recommendedSkills, "skill-pills task-detail-skill-pills") + "</div>"
+        : "") +
       (task.progress
         ? '<div class="task-detail-section"><h3>Latest Progress</h3>' + renderMarkdownCard(task.progress) + "</div>"
         : "") +
@@ -1028,6 +1130,22 @@
     renderTaskDetail();
   }
 
+  function handleControllerRunEvent(payload) {
+    if (!payload || !payload.id) {
+      return;
+    }
+
+    const runs = (teamState.controllerRuns || []).slice();
+    const index = runs.findIndex(function (run) { return run.id === payload.id; });
+    if (index === -1) {
+      runs.push(payload);
+    } else {
+      runs[index] = Object.assign({}, runs[index], payload);
+    }
+    teamState.controllerRuns = runs;
+    renderControllerRuns(teamState.controllerRuns);
+  }
+
   function renderClarifications(clarifications) {
     const container = $("#clarifications-list");
     if (!container) return;
@@ -1255,6 +1373,9 @@
       event.preventDefault();
       const title = $("#task-title").value.trim();
       const desc = $("#task-desc").value.trim();
+      const recommendedSkills = normalizeSkillList(
+        ($("#task-recommended-skills").value || "").split(","),
+      );
       const priority = $("#task-priority").value;
       const role = $("#task-role").value;
 
@@ -1265,6 +1386,9 @@
         if (role) {
           body.assignedRole = role;
         }
+        if (recommendedSkills.length > 0) {
+          body.recommendedSkills = recommendedSkills;
+        }
 
         await apiPost("/tasks", body);
         taskForm.reset();
@@ -1313,6 +1437,18 @@
     }
   });
 
+  const controllerRunsContainer = $("#controller-runs");
+  if (controllerRunsContainer) {
+    controllerRunsContainer.addEventListener("click", function (event) {
+      const target = event.target instanceof Element ? event.target : null;
+      const button = target ? target.closest("[data-open-task-id]") : null;
+      const taskId = button && button.dataset ? button.dataset.openTaskId : "";
+      if (taskId) {
+        openTaskDetail(taskId);
+      }
+    });
+  }
+
   const cmdInput = $("#command-input");
   const cmdSend = $("#command-send");
 

package/src/ui/index.html

@@ -105,6 +105,12 @@
 
         <!-- Messages Tab -->
         <div id="tab-messages" class="tab-panel">
+          <div class="panel-note">
+            Controller activity is persisted here so you can follow requirement intake, orchestration, and follow-up runs from the web UI.
+          </div>
+          <div id="controller-runs" class="controller-runs">
+            <div class="empty-state">No controller activity yet</div>
+          </div>
           <div id="messages-feed" class="messages-feed">
             <div class="empty-state">No messages yet</div>
           </div>
@@ -124,6 +130,10 @@
               <label for="task-desc">Description</label>
               <textarea id="task-desc" placeholder="Execution-ready task description..." rows="4" required></textarea>
             </div>
+            <div class="form-group">
+              <label for="task-recommended-skills">Recommended Skills</label>
+              <input type="text" id="task-recommended-skills" placeholder="Comma-separated skill slugs, e.g. find-skills, ui-ux-pro-max">
+            </div>
             <div class="form-row">
               <div class="form-group">
                 <label for="task-priority">Priority</label>

package/src/ui/style.css

@@ -275,14 +275,54 @@ body {
 .task-priority.critical { background: var(--danger); color: #fff; }
 
 .task-body { flex: 1; min-width: 0; }
+.task-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 4px;
+}
 .task-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
 .task-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
+.task-origin-badge {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--accent);
+  background: rgba(96, 165, 250, 0.12);
+  border: 1px solid rgba(96, 165, 250, 0.25);
+  border-radius: 999px;
+  padding: 3px 8px;
+  flex-shrink: 0;
+}
 .task-note {
   font-size: 12px;
   color: var(--warning);
   margin-bottom: 6px;
   line-height: 1.5;
 }
+.skill-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.task-skill-pills {
+  margin-bottom: 8px;
+}
+.task-detail-skill-pills {
+  margin-top: 8px;
+}
+.skill-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 8px;
+  border-radius: 999px;
+  background: rgba(52, 211, 153, 0.12);
+  border: 1px solid rgba(52, 211, 153, 0.25);
+  color: #bbf7d0;
+  font-size: 11px;
+  font-weight: 600;
+}
 .task-meta { display: flex; gap: 12px; font-size: 11px; color: var(--text-muted); }
 
 .task-status-badge {
@@ -410,6 +450,114 @@ body {
   justify-content: flex-end;
 }
 
+.controller-runs {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.controller-run-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.controller-run-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.controller-run-heading h3 {
+  margin: 0;
+  font-size: 15px;
+}
+
+.controller-run-kicker,
+.controller-run-meta,
+.controller-run-section-title,
+.controller-run-event-meta {
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.controller-run-section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.controller-run-status {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  padding: 4px 9px;
+  border-radius: 999px;
+}
+
+.controller-run-status.pending { background: var(--bg-tertiary); color: var(--text-secondary); }
+.controller-run-status.running { background: #422006; color: var(--warning); }
+.controller-run-status.completed { background: #14532d; color: var(--success); }
+.controller-run-status.failed { background: #450a0a; color: var(--danger); }
+
+.controller-run-created-tasks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.controller-run-task-link {
+  padding: 6px 10px;
+  border-radius: 999px;
+  border: 1px solid rgba(96, 165, 250, 0.25);
+  background: rgba(96, 165, 250, 0.12);
+  color: var(--accent);
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.controller-run-task-link:hover {
+  border-color: var(--accent);
+}
+
+.controller-run-events {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.controller-run-event {
+  border-left: 3px solid var(--accent);
+  background: var(--bg-tertiary);
+  border-radius: 10px;
+  padding: 10px 12px;
+}
+
+.controller-run-event-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 6px;
+}
+
+.controller-run-event-label {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.controller-run-event-body {
+  font-size: 13px;
+}
+
 .messages-feed {
   display: flex;
   flex-direction: column;

package/src/worker/http-handler.ts

@@ -59,6 +59,9 @@ export function createWorkerHttpHandler(
         const taskId = typeof body.taskId === "string" ? body.taskId : "";
         const title = typeof body.title === "string" ? body.title : "";
         const description = typeof body.description === "string" ? body.description : "";
+        const recommendedSkills = Array.isArray(body.recommendedSkills)
+          ? body.recommendedSkills.map((entry) => String(entry ?? ""))
+          : undefined;
         const repo = body.repo && typeof body.repo === "object"
           ? body.repo as TaskAssignmentPayload["repo"]
           : undefined;
@@ -75,6 +78,7 @@ export function createWorkerHttpHandler(
             taskId,
             title,
             description,
+            recommendedSkills,
             repo,
           })
             .then((result) => {

package/src/worker/prompt-injector.ts

@@ -50,6 +50,7 @@ export function createWorkerPromptInjector(
     parts.push(`10. Valid TeamClaw role IDs: ${TEAMCLAW_ROLE_IDS_TEXT}.`);
     parts.push("11. Treat file paths from documents, plans, and teammate messages as hints, not guarantees. Verify the real path exists in the current workspace before reading or editing it; if it does not exist, search for the closest real file and note the drift instead of repeatedly calling missing paths.");
     parts.push("12. The workspace may be backed by a TeamClaw-managed git repository. Treat the current checkout as canonical project state; do not delete `.git` or replace the repo with ad-hoc archives.");
+    parts.push("13. If the assigned task includes recommended skills, use those exact skill slugs first. Missing skills should be searched/installed before execution when supported by the runtime.");
     parts.push(`Worker ID: ${identity.workerId}`);
     parts.push(`Controller: ${identity.controllerUrl}`);