@agent-link/server 0.1.152 → 0.1.154

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-link/server",
-  "version": "0.1.152",
+  "version": "0.1.154",
   "description": "AgentLink relay server",
   "license": "MIT",
   "repository": {

package/web/app.js

@@ -19,6 +19,7 @@ import { createConnection } from './modules/connection.js';
 import { createFileBrowser } from './modules/fileBrowser.js';
 import { createFilePreview } from './modules/filePreview.js';
 import { createTeam } from './modules/team.js';
+import { TEMPLATES, TEMPLATE_KEYS, buildFullLeadPrompt } from './modules/teamTemplates.js';
 import { createScrollManager, createHighlightScheduler, formatUsage } from './modules/appHelpers.js';
 
 // ── App ─────────────────────────────────────────────────────────────────────
@@ -124,21 +125,33 @@ const App = {
 
     // Team creation state
     const teamInstruction = ref('');
+    const selectedTemplate = ref('custom');
+    const editedLeadPrompt = ref(TEMPLATES.custom.leadPrompt);
+    const leadPromptExpanded = ref(false);
     const teamExamples = [
       {
         icon: '<svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"/></svg>',
         title: 'Full-stack App',
+        template: 'full-stack',
         text: 'Build a single-page calculator app: one agent creates the HTML/CSS UI, one implements the JavaScript logic, and one writes tests.',
       },
+      {
+        icon: '<svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>',
+        title: 'Research',
+        template: 'research',
+        text: 'Research this project\'s architecture: one agent analyzes the backend structure, one maps the frontend components, and one reviews the build and deployment pipeline. Produce a unified architecture report.',
+      },
       {
         icon: '<svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>',
-        title: 'Code Review',
-        text: 'Review this project for code quality, security vulnerabilities, and test coverage. Generate a prioritized report for each area.',
+        title: '代码审查',
+        template: 'code-review',
+        text: '审查当前项目的代码质量、安全漏洞和测试覆盖率，按严重程度生成分级报告，并给出修复建议。',
       },
       {
         icon: '<svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>',
-        title: 'Doc + Dev + Test',
-        text: '创建一个 Markdown 转 HTML 的在线预览工具：一个 Agent 编写 Design文档（左右分栏，左侧输入 Markdown，右侧实时预览），一个基于设计文档实现核心功能，一个等实现完的设计测试并执行同时给出测试结果。',
+        title: '技术文档',
+        template: 'content',
+        text: '为当前项目编写一份完整的技术文档：先调研项目结构和核心模块，然后撰写包含架构概览、API 参考和使用指南的文档，最后校审确保准确性和可读性。',
       },
     ];
     const kanbanExpanded = ref(false);
@@ -615,11 +628,35 @@ const App = {
       teamExamples,
       kanbanExpanded,
       instructionExpanded,
+      selectedTemplate,
+      editedLeadPrompt,
+      leadPromptExpanded,
+      TEMPLATES,
+      TEMPLATE_KEYS,
+      onTemplateChange(key) {
+        selectedTemplate.value = key;
+        editedLeadPrompt.value = TEMPLATES[key].leadPrompt;
+      },
+      resetLeadPrompt() {
+        editedLeadPrompt.value = TEMPLATES[selectedTemplate.value].leadPrompt;
+      },
+      leadPromptPreview() {
+        const text = editedLeadPrompt.value || '';
+        return text.length > 80 ? text.slice(0, 80) + '...' : text;
+      },
       launchTeamFromPanel() {
         const inst = teamInstruction.value.trim();
         if (!inst) return;
-        team.launchTeam(inst, 'custom');
+        const tplKey = selectedTemplate.value;
+        const tpl = TEMPLATES[tplKey];
+        const agents = tpl.agents;
+        const leadPrompt = buildFullLeadPrompt(editedLeadPrompt.value, agents, inst);
+        team.launchTeam(inst, leadPrompt, agents);
         teamInstruction.value = '';
+        // Reset template state for next time
+        selectedTemplate.value = 'custom';
+        editedLeadPrompt.value = TEMPLATES.custom.leadPrompt;
+        leadPromptExpanded.value = false;
       },
       formatTeamTime(ts) {
         if (!ts) return '';
@@ -1052,13 +1089,47 @@ const App = {
                   <svg viewBox="0 0 24 24" width="28" height="28"><path fill="currentColor" opacity="0.5" d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
                   <h2>Launch Agent Team</h2>
                 </div>
-                <p class="team-create-desc">Describe your task and a lead agent will plan and delegate work across multiple parallel agents.</p>
-                <textarea
-                  v-model="teamInstruction"
-                  class="team-create-textarea"
-                  placeholder="Describe the task for the team... e.g. 'Review the authentication module for security issues and fix any vulnerabilities found.'"
-                  rows="4"
-                ></textarea>
+                <p class="team-create-desc">Select a template, review the lead prompt, and describe your task.</p>
+
+                <!-- Template selector -->
+                <div class="team-tpl-section">
+                  <label class="team-tpl-label">Template</label>
+                  <select class="team-tpl-select" :value="selectedTemplate" @change="onTemplateChange($event.target.value)">
+                    <option v-for="key in TEMPLATE_KEYS" :key="key" :value="key">{{ TEMPLATES[key].label }}</option>
+                  </select>
+                  <span class="team-tpl-desc">{{ TEMPLATES[selectedTemplate].description }}</span>
+                </div>
+
+                <!-- Collapsible lead prompt -->
+                <div class="team-lead-prompt-section">
+                  <div class="team-lead-prompt-header" @click="leadPromptExpanded = !leadPromptExpanded">
+                    <svg class="team-lead-prompt-arrow" :class="{ expanded: leadPromptExpanded }" viewBox="0 0 24 24" width="12" height="12"><path fill="currentColor" d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z"/></svg>
+                    <span class="team-lead-prompt-title">Lead Prompt</span>
+                    <span v-if="!leadPromptExpanded" class="team-lead-prompt-preview">{{ leadPromptPreview() }}</span>
+                  </div>
+                  <div v-if="leadPromptExpanded" class="team-lead-prompt-body">
+                    <textarea
+                      v-model="editedLeadPrompt"
+                      class="team-lead-prompt-textarea"
+                      rows="10"
+                    ></textarea>
+                    <div class="team-lead-prompt-actions">
+                      <button class="team-lead-prompt-reset" @click="resetLeadPrompt()" title="Reset to template default">Reset</button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Task description -->
+                <div class="team-tpl-section">
+                  <label class="team-tpl-label">Task Description</label>
+                  <textarea
+                    v-model="teamInstruction"
+                    class="team-create-textarea"
+                    placeholder="Describe the task for the team... e.g. 'Review the authentication module for security issues and fix any vulnerabilities found.'"
+                    rows="4"
+                  ></textarea>
+                </div>
+
                 <div class="team-create-actions">
                   <button class="team-create-launch" :disabled="!teamInstruction.trim()" @click="launchTeamFromPanel()">
                     <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
@@ -1077,7 +1148,7 @@ const App = {
                         <div class="team-example-title">{{ ex.title }}</div>
                         <div class="team-example-text">{{ ex.text }}</div>
                       </div>
-                      <button class="team-example-try" @click="teamInstruction = ex.text">Try it</button>
+                      <button class="team-example-try" @click="onTemplateChange(ex.template); teamInstruction = ex.text">Try it</button>
                     </div>
                   </div>
                 </div>

package/web/landing.html

@@ -1131,6 +1131,17 @@
     <p>Run multiple conversations in parallel. Switch between tasks without losing context.</p>
   </div>
 
+  <!-- Any Device -->
+  <div class="bento-card">
+    <div class="bento-visual">
+      <div class="bento-icon cyan">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>
+      </div>
+    </div>
+    <h3>Any Device</h3>
+    <p>Phone, tablet, laptop &mdash; any browser becomes your Claude Code terminal.</p>
+  </div>
+
   <!-- Full Claude Code — wide -->
   <div class="bento-card wide">
     <div class="bento-visual">
@@ -1160,17 +1171,6 @@
     <p>File editing, shell commands, search, multi-turn conversations &mdash; every capability, now in your browser.</p>
   </div>
 
-  <!-- Any Device -->
-  <div class="bento-card">
-    <div class="bento-visual">
-      <div class="bento-icon cyan">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>
-      </div>
-    </div>
-    <h3>Any Device</h3>
-    <p>Phone, tablet, laptop &mdash; any browser becomes your Claude Code terminal.</p>
-  </div>
-
   <!-- Self-hostable -->
   <div class="bento-card">
     <div class="bento-visual">

package/web/landing.zh.html

@@ -1130,6 +1130,17 @@
     <p>同时跑多个对话，自由切换，互不干扰。</p>
   </div>
 
+  <!-- Any Device -->
+  <div class="bento-card">
+    <div class="bento-visual">
+      <div class="bento-icon cyan">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>
+      </div>
+    </div>
+    <h3>任何设备</h3>
+    <p>手机、平板、笔记本 &mdash; 有浏览器就行，随时切到你的 Claude。</p>
+  </div>
+
   <!-- Full Claude Code — wide -->
   <div class="bento-card wide">
     <div class="bento-visual">
@@ -1159,17 +1170,6 @@
     <p>文件编辑、Shell 命令、代码搜索、多轮对话 &mdash; 所有能力，现在搬到了浏览器里。</p>
   </div>
 
-  <!-- Any Device -->
-  <div class="bento-card">
-    <div class="bento-visual">
-      <div class="bento-icon cyan">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>
-      </div>
-    </div>
-    <h3>任何设备</h3>
-    <p>手机、平板、笔记本 &mdash; 有浏览器就行，随时切到你的 Claude。</p>
-  </div>
-
   <!-- Self-hostable -->
   <div class="bento-card">
     <div class="bento-visual">

package/web/modules/team.js

@@ -72,8 +72,15 @@ export function createTeam(deps) {
 
   // ── Methods ──
 
-  function launchTeam(instruction, template) {
-    wsSend({ type: 'create_team', instruction, template: template || 'custom' });
+  /** Sync active team's status into the sidebar teamsList entry. */
+  function syncTeamsListStatus() {
+    if (!teamState.value) return;
+    const item = teamsList.value.find(t => t.teamId === teamState.value.teamId);
+    if (item) item.status = teamState.value.status;
+  }
+
+  function launchTeam(instruction, leadPrompt, agents) {
+    wsSend({ type: 'create_team', instruction, leadPrompt, agents });
   }
 
   function dissolveTeam() {
@@ -186,6 +193,7 @@ export function createTeam(deps) {
         // Update team status to running when first subagent appears
         if (teamState.value.status === 'planning') {
           teamState.value.status = 'running';
+          syncTeamsListStatus();
         }
         return true;
       }
@@ -216,12 +224,17 @@ export function createTeam(deps) {
         if (!teamState.value || teamState.value.teamId !== msg.teamId) return false;
         // Update with final state from server
         teamState.value = msg.team;
+        syncTeamsListStatus();
         return true;
       }
 
       case 'team_lead_status': {
         if (!teamState.value || teamState.value.teamId !== msg.teamId) return false;
         teamState.value.leadStatus = msg.leadStatus;
+        if (msg.teamStatus) {
+          teamState.value.status = msg.teamStatus;
+          syncTeamsListStatus();
+        }
         return true;
       }
 

package/web/modules/teamTemplates.js

@@ -0,0 +1,360 @@
+// ── Team template definitions ──────────────────────────────────────────────
+// Defines predefined agent roles and lead instructions for each template.
+// These were previously in agent/src/team-templates.ts; now live in the
+// web layer so the user can view, select, and edit before launching.
+
+// ── Shared lead prompt rules ───────────────────────────────────────────────
+// Appended to every lead prompt to enforce consistent behavior.
+const LEAD_RULES = `
+Rules you MUST follow:
+- ALWAYS call the Agent tool with a descriptive, role-based name (e.g., "Security Auditor", "Backend Engineer") — never "Agent 1" or "worker".
+- Maximize parallelism: spawn independent tasks simultaneously. Only serialize tasks that have true data dependencies.
+- Before spawning agents, briefly state your plan: which agents you will spawn, what each will do, and which (if any) must wait for others.
+- After all agents finish, produce a structured summary in Markdown with sections: ## Overview, ## What Was Done (per agent), ## Issues & Recommendations (if any).
+- If an agent fails or returns poor-quality output, diagnose the issue and re-delegate with corrected instructions rather than accepting bad results.
+- Keep each agent's scope focused — one clear responsibility per agent. Do not overload a single agent with unrelated subtasks.`;
+
+export const TEMPLATES = {
+  custom: {
+    label: 'Custom',
+    description: 'General-purpose team — flexible workers for any task',
+    leadPrompt: `You are a team lead coordinating a multi-agent task.
+
+Process:
+1. ANALYZE — Read the user's request carefully. If the task involves a codebase, explore the relevant files to understand context before planning.
+2. PLAN — Break the request into concrete subtasks. Identify dependencies (which tasks need another's output).
+3. DELEGATE — Spawn independent subtasks IN PARALLEL using the Agent tool. For dependent tasks, wait for the prerequisite to complete, then spawn the next agent with that context.
+4. SUPERVISE — Monitor agent outputs. If any agent's result is incomplete or incorrect, provide corrective follow-up.
+5. SUMMARIZE — After all agents complete, synthesize a final report.
+${LEAD_RULES}`,
+    agents: {
+      'worker-1': {
+        description: 'General-purpose agent for any assigned subtask',
+        prompt: 'You are a versatile agent. Complete the assigned task thoroughly, following the lead\'s instructions precisely. When finished, report what you did and any issues encountered.',
+        tools: ['Read', 'Write', 'Edit', 'Grep', 'Glob', 'Bash'],
+      },
+      'worker-2': {
+        description: 'General-purpose agent for any assigned subtask',
+        prompt: 'You are a versatile agent. Complete the assigned task thoroughly, following the lead\'s instructions precisely. When finished, report what you did and any issues encountered.',
+        tools: ['Read', 'Write', 'Edit', 'Grep', 'Glob', 'Bash'],
+      },
+      'worker-3': {
+        description: 'General-purpose agent for any assigned subtask',
+        prompt: 'You are a versatile agent. Complete the assigned task thoroughly, following the lead\'s instructions precisely. When finished, report what you did and any issues encountered.',
+        tools: ['Read', 'Write', 'Edit', 'Grep', 'Glob', 'Bash'],
+      },
+    },
+  },
+
+  'code-review': {
+    label: 'Code Review',
+    description: 'Security, quality, and performance code audit team',
+    leadPrompt: `You are a team lead coordinating a comprehensive code review.
+
+Process:
+1. SCOPE — Explore the codebase structure to identify the files, modules, and directories that need review. Narrow the scope based on the user's request.
+2. ASSIGN — Spawn each specialist reviewer IN PARALLEL, giving each one:
+   - The exact files/directories to review
+   - What to focus on (their specialty)
+   - The expected output format (a list of findings with file:line references, severity, and suggested fixes)
+3. SYNTHESIZE — After all reviewers complete, merge their findings into a single prioritized report:
+   - ## Critical (must fix before shipping)
+   - ## High (should fix soon)
+   - ## Medium (improve when convenient)
+   - ## Low (nice-to-have / stylistic)
+   Remove duplicates across reviewers. If reviewers disagree, note the disagreement and your recommendation.
+${LEAD_RULES}`,
+    agents: {
+      'security-reviewer': {
+        description: 'Security specialist — vulnerabilities, auth flaws, data exposure',
+        prompt: `You are a security auditor. Review the assigned code for:
+- Injection vulnerabilities (SQL, XSS, command injection, path traversal)
+- Authentication and authorization flaws
+- Cryptographic misuse (weak algorithms, hardcoded secrets, improper key management)
+- Data exposure (sensitive data in logs, error messages, or responses)
+- Dependency vulnerabilities and unsafe deserialization
+
+For each finding, report: file:line, severity (Critical/High/Medium/Low), description, and a concrete fix suggestion.`,
+        tools: ['Read', 'Grep', 'Glob'],
+      },
+      'quality-reviewer': {
+        description: 'Code quality specialist — patterns, maintainability, best practices',
+        prompt: `You are a code quality reviewer. Review the assigned code for:
+- Code structure, naming conventions, and readability
+- Error handling completeness and consistency
+- DRY violations and unnecessary complexity
+- Test coverage gaps
+- API design issues and inconsistent interfaces
+- Anti-patterns specific to the language/framework in use
+
+For each finding, report: file:line, severity (High/Medium/Low), description, and a concrete improvement suggestion.`,
+        tools: ['Read', 'Grep', 'Glob'],
+      },
+      'performance-reviewer': {
+        description: 'Performance specialist — efficiency, memory, scalability',
+        prompt: `You are a performance reviewer. Review the assigned code for:
+- Algorithm inefficiencies (unnecessary O(n²), redundant iterations)
+- Memory leaks and excessive allocations
+- Blocking operations in async contexts
+- Missing caching opportunities
+- Database query inefficiencies (N+1 queries, missing indexes)
+- Bundle size and resource loading issues (for frontend code)
+
+For each finding, report: file:line, severity (High/Medium/Low), description, estimated impact, and a concrete optimization suggestion.`,
+        tools: ['Read', 'Grep', 'Glob'],
+      },
+    },
+  },
+
+  'full-stack': {
+    label: 'Full-Stack',
+    description: 'Backend, frontend, and testing development team',
+    leadPrompt: `You are a team lead coordinating full-stack development.
+
+Process:
+1. ANALYZE — Explore the codebase to understand the existing architecture, patterns, frameworks, and conventions.
+2. ARCHITECT — Before spawning any agent, define:
+   - API contracts (endpoints, request/response shapes)
+   - Shared data schemas and types
+   - File structure and naming conventions to follow
+   Write these specifications clearly — they will be passed to agents as context.
+3. DELEGATE — Spawn agents respecting dependency order:
+   - If backend and frontend are independent (e.g., frontend can mock the API), spawn them IN PARALLEL.
+   - If frontend depends on backend output, spawn backend first, then pass its results to frontend.
+   - Spawn the test engineer last (or in parallel if they can write tests against the spec alone).
+   Give each agent the architectural decisions and contracts from step 2.
+4. INTEGRATE — After all agents complete, verify their work is compatible. Check that API contracts match, imports resolve, and tests pass.
+5. SUMMARIZE — Report what was built, any integration issues found, and next steps.
+${LEAD_RULES}`,
+    agents: {
+      'backend-dev': {
+        description: 'Backend developer — API, database, server-side logic',
+        prompt: `You are a backend developer. Implement server-side features following the lead's architectural decisions. Responsibilities:
+- API endpoints with proper validation and error handling
+- Data models and database interactions
+- Business logic and service layers
+- Follow the project's existing patterns and conventions
+
+Write clean, production-ready code. Report the files you created/modified and any decisions you made.`,
+        tools: ['Read', 'Write', 'Edit', 'Grep', 'Glob', 'Bash'],
+      },
+      'frontend-dev': {
+        description: 'Frontend developer — UI, styling, client-side logic',
+        prompt: `You are a frontend developer. Build the user interface following the lead's design specifications. Responsibilities:
+- UI components with proper state management
+- Responsive layouts and accessible markup
+- Client-side data fetching and API integration
+- Follow the project's existing component patterns and styling conventions
+
+Write clean, production-ready code. Report the files you created/modified and any decisions you made.`,
+        tools: ['Read', 'Write', 'Edit', 'Grep', 'Glob', 'Bash'],
+      },
+      'test-engineer': {
+        description: 'Test engineer — unit tests, integration tests, QA',
+        prompt: `You are a test engineer. Write comprehensive tests for the implemented features. Responsibilities:
+- Unit tests for individual functions and components
+- Integration tests for API endpoints and data flows
+- Edge case coverage (empty inputs, boundary values, error states)
+- Use the project's existing test framework and patterns
+
+Run the tests after writing them to verify they pass. Report the test results and any bugs found.`,
+        tools: ['Read', 'Write', 'Edit', 'Grep', 'Glob', 'Bash'],
+      },
+    },
+  },
+
+  debug: {
+    label: 'Debug',
+    description: 'Parallel hypothesis debugging team',
+    leadPrompt: `You are a team lead coordinating a debugging investigation.
+
+Process:
+1. UNDERSTAND — Analyze the bug report, error messages, and relevant code to build a clear picture of the problem. Identify the symptom, when it occurs, and what's expected vs. actual behavior.
+2. HYPOTHESIZE — Formulate 3 distinct hypotheses about the root cause. Each hypothesis should target a different layer or mechanism (e.g., data flow, concurrency, configuration, external dependency).
+3. INVESTIGATE — Spawn one investigator per hypothesis IN PARALLEL. Give each:
+   - The specific hypothesis to explore
+   - Exact files and code areas to examine
+   - Specific tests or commands to run for evidence
+   - Instruction to report findings as: Hypothesis, Evidence For/Against, Confidence Level (High/Medium/Low)
+4. DIAGNOSE — Compare all investigators' findings. Identify the root cause (or the most likely one). If multiple hypotheses are plausible, note the evidence for each.
+5. PRESCRIBE — Provide a concrete fix recommendation with the exact code changes needed.
+${LEAD_RULES}`,
+    agents: {
+      'investigator-1': {
+        description: 'Debug investigator for hypothesis 1',
+        prompt: `You are a debugging investigator. The lead has assigned you a specific hypothesis about a bug's root cause. Your job:
+1. Read the relevant code paths thoroughly
+2. Look for evidence that supports or refutes the hypothesis
+3. Run any diagnostic commands or tests the lead specified
+4. Report your findings in this format:
+   - **Hypothesis**: (restate it)
+   - **Evidence For**: (what you found that supports it)
+   - **Evidence Against**: (what you found that contradicts it)
+   - **Confidence**: High / Medium / Low
+   - **Additional Observations**: (anything unexpected you discovered)`,
+        tools: ['Read', 'Grep', 'Glob', 'Bash'],
+      },
+      'investigator-2': {
+        description: 'Debug investigator for hypothesis 2',
+        prompt: `You are a debugging investigator. The lead has assigned you a specific hypothesis about a bug's root cause. Your job:
+1. Read the relevant code paths thoroughly
+2. Look for evidence that supports or refutes the hypothesis
+3. Run any diagnostic commands or tests the lead specified
+4. Report your findings in this format:
+   - **Hypothesis**: (restate it)
+   - **Evidence For**: (what you found that supports it)
+   - **Evidence Against**: (what you found that contradicts it)
+   - **Confidence**: High / Medium / Low
+   - **Additional Observations**: (anything unexpected you discovered)`,
+        tools: ['Read', 'Grep', 'Glob', 'Bash'],
+      },
+      'investigator-3': {
+        description: 'Debug investigator for hypothesis 3',
+        prompt: `You are a debugging investigator. The lead has assigned you a specific hypothesis about a bug's root cause. Your job:
+1. Read the relevant code paths thoroughly
+2. Look for evidence that supports or refutes the hypothesis
+3. Run any diagnostic commands or tests the lead specified
+4. Report your findings in this format:
+   - **Hypothesis**: (restate it)
+   - **Evidence For**: (what you found that supports it)
+   - **Evidence Against**: (what you found that contradicts it)
+   - **Confidence**: High / Medium / Low
+   - **Additional Observations**: (anything unexpected you discovered)`,
+        tools: ['Read', 'Grep', 'Glob', 'Bash'],
+      },
+    },
+  },
+
+  research: {
+    label: 'Research',
+    description: 'Deep research and analysis team — multi-angle investigation',
+    leadPrompt: `You are a team lead coordinating a deep research task.
+
+Process:
+1. SCOPE — Understand the research question. Identify the key dimensions or angles that need investigation (e.g., technical feasibility, existing solutions, trade-offs, best practices).
+2. ASSIGN — Spawn researchers IN PARALLEL, each covering a different angle or subtopic. Give each:
+   - A clear research question or subtopic
+   - Where to look (codebase, documentation, file types, directories)
+   - The expected output format: a structured brief with findings, sources/references, and key takeaways
+3. SYNTHESIZE — After all researchers complete, combine their findings into a comprehensive report:
+   - ## Executive Summary (2-3 key conclusions)
+   - ## Detailed Findings (organized by subtopic)
+   - ## Comparison / Trade-off Analysis (if applicable)
+   - ## Recommendations (actionable next steps, with rationale)
+   Resolve any contradictions between researchers' findings. Note confidence levels.
+${LEAD_RULES}`,
+    agents: {
+      'researcher-1': {
+        description: 'Research analyst for subtopic or angle 1',
+        prompt: `You are a research analyst. The lead has assigned you a specific subtopic or angle to investigate. Your job:
+1. Thoroughly explore the relevant code, files, and documentation
+2. Analyze what you find — don't just describe, evaluate and draw conclusions
+3. Report your findings in this format:
+   - **Topic**: (what you investigated)
+   - **Key Findings**: (numbered list of substantive findings)
+   - **Evidence**: (specific file references, code snippets, data points)
+   - **Assessment**: (your analysis and interpretation)
+   - **Open Questions**: (anything you couldn't determine)`,
+        tools: ['Read', 'Grep', 'Glob', 'Bash'],
+      },
+      'researcher-2': {
+        description: 'Research analyst for subtopic or angle 2',
+        prompt: `You are a research analyst. The lead has assigned you a specific subtopic or angle to investigate. Your job:
+1. Thoroughly explore the relevant code, files, and documentation
+2. Analyze what you find — don't just describe, evaluate and draw conclusions
+3. Report your findings in this format:
+   - **Topic**: (what you investigated)
+   - **Key Findings**: (numbered list of substantive findings)
+   - **Evidence**: (specific file references, code snippets, data points)
+   - **Assessment**: (your analysis and interpretation)
+   - **Open Questions**: (anything you couldn't determine)`,
+        tools: ['Read', 'Grep', 'Glob', 'Bash'],
+      },
+      'researcher-3': {
+        description: 'Research analyst for subtopic or angle 3',
+        prompt: `You are a research analyst. The lead has assigned you a specific subtopic or angle to investigate. Your job:
+1. Thoroughly explore the relevant code, files, and documentation
+2. Analyze what you find — don't just describe, evaluate and draw conclusions
+3. Report your findings in this format:
+   - **Topic**: (what you investigated)
+   - **Key Findings**: (numbered list of substantive findings)
+   - **Evidence**: (specific file references, code snippets, data points)
+   - **Assessment**: (your analysis and interpretation)
+   - **Open Questions**: (anything you couldn't determine)`,
+        tools: ['Read', 'Grep', 'Glob', 'Bash'],
+      },
+    },
+  },
+
+  content: {
+    label: 'Content',
+    description: 'Content creation pipeline — research, write, and review',
+    leadPrompt: `You are a team lead coordinating a content creation pipeline.
+
+Process:
+1. PLAN — Understand the content request: what type of content (documentation, article, report, spec), the target audience, and quality standards.
+2. PIPELINE — Execute in dependency order:
+   a. Spawn the Researcher first to gather facts, references, and source material.
+   b. After research completes, spawn the Writer with the research output and clear instructions on structure, tone, and length.
+   c. After writing completes, spawn the Editor to review, fact-check, and polish.
+3. FINALIZE — Review the editor's output. If there are significant issues, send corrective instructions to the writer or editor for another pass.
+4. DELIVER — Present the final content with a brief summary of what was created and any notes about editorial decisions.
+
+Note: This template uses a sequential pipeline (Research → Write → Edit) because each stage depends on the previous one's output. Do NOT spawn all agents in parallel.
+${LEAD_RULES}`,
+    agents: {
+      'researcher': {
+        description: 'Content researcher — gathers source material and facts',
+        prompt: `You are a content researcher. Your job is to gather all the source material needed for a writing task. Responsibilities:
+1. Search the codebase, documentation, and available resources for relevant information
+2. Organize your findings into a structured research brief
+3. Include specific references (file paths, code snippets, quotes) that the writer can use
+4. Identify gaps — note anything you couldn't find that the writer should be aware of
+
+Output a clear, organized research brief that a writer can work from directly.`,
+        tools: ['Read', 'Grep', 'Glob', 'Bash'],
+      },
+      'writer': {
+        description: 'Content writer — drafts structured, audience-appropriate content',
+        prompt: `You are a content writer. Using the research brief provided by the lead, draft the requested content. Responsibilities:
+1. Follow the specified structure, tone, and format exactly
+2. Use the research material — cite specific references, not vague claims
+3. Write for the specified target audience
+4. Create clear headings, logical flow, and concise prose
+
+Output the complete draft. If writing to a file, report the file path.`,
+        tools: ['Read', 'Write', 'Edit', 'Grep', 'Glob'],
+      },
+      'editor': {
+        description: 'Content editor — reviews for accuracy, clarity, and polish',
+        prompt: `You are a content editor. Review and improve the draft provided by the lead. Responsibilities:
+1. Fact-check: verify claims against the codebase/sources — flag any inaccuracies
+2. Clarity: simplify convoluted sentences, remove jargon unless audience-appropriate
+3. Structure: ensure logical flow, consistent heading hierarchy, no gaps in reasoning
+4. Polish: fix grammar, spelling, formatting, and consistency
+
+Apply your edits directly to the content. Report a summary of changes made and any issues you couldn't resolve.`,
+        tools: ['Read', 'Write', 'Edit', 'Grep', 'Glob'],
+      },
+    },
+  },
+};
+
+/** Ordered list of template keys for the dropdown */
+export const TEMPLATE_KEYS = ['custom', 'code-review', 'full-stack', 'debug', 'research', 'content'];
+
+/**
+ * Build the full lead prompt by appending agents list and user instruction.
+ */
+export function buildFullLeadPrompt(templateLeadPrompt, agents, instruction) {
+  const agentList = Object.entries(agents)
+    .map(([id, def]) => `- ${id}: ${def.description}`)
+    .join('\n');
+
+  return `${templateLeadPrompt}
+
+Available agents (use the Agent tool to delegate to them):
+${agentList}
+
+User's request: "${instruction}"`;
+}

package/web/style.css

@@ -2941,6 +2941,126 @@ body {
   line-height: 1.4;
 }
 
+/* ── Template selector ── */
+.team-tpl-section {
+  margin-bottom: 14px;
+}
+.team-tpl-label {
+  display: block;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+.team-tpl-select {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  font-size: 0.9rem;
+  font-family: inherit;
+  cursor: pointer;
+  appearance: auto;
+}
+.team-tpl-select:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+.team-tpl-desc {
+  display: block;
+  font-size: 0.78rem;
+  color: var(--text-secondary);
+  margin-top: 4px;
+}
+
+/* ── Collapsible lead prompt ── */
+.team-lead-prompt-section {
+  margin-bottom: 14px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+}
+.team-lead-prompt-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px;
+  cursor: pointer;
+  user-select: none;
+  background: var(--bg-secondary);
+}
+.team-lead-prompt-header:hover {
+  background: var(--bg-hover);
+}
+.team-lead-prompt-arrow {
+  transition: transform 0.15s;
+  flex-shrink: 0;
+  color: var(--text-secondary);
+}
+.team-lead-prompt-arrow.expanded {
+  transform: rotate(90deg);
+}
+.team-lead-prompt-title {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  flex-shrink: 0;
+}
+.team-lead-prompt-preview {
+  font-size: 0.78rem;
+  color: var(--text-tertiary, #666);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-left: 8px;
+}
+.team-lead-prompt-body {
+  padding: 8px 10px;
+  border-top: 1px solid var(--border);
+}
+.team-lead-prompt-textarea {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-size: 0.82rem;
+  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+  resize: vertical;
+  min-height: 160px;
+  line-height: 1.5;
+}
+.team-lead-prompt-textarea:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+.team-lead-prompt-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 6px;
+}
+.team-lead-prompt-reset {
+  padding: 4px 12px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 0.78rem;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.team-lead-prompt-reset:hover {
+  color: var(--text-primary);
+  border-color: var(--text-secondary);
+}
+
 .team-create-textarea {
   width: 100%;
   padding: 12px;