feat: template agent creation + Agent Creator + Innovator integration

- POST /api/company/templates: scaffold new template via AgentScaffold - POST /api/company/templates/:id/generate: trigger agent-creator to write definitions - POST /api/company/templates/:id/train: trigger innovator FDE training pipeline - PUT /api/company/templates/:id/files/content: save template file content - TemplateAgents.vue: create form, action buttons, editable preview, status banner

feat: template agent creation + Agent Creator + Innovator integration
- POST /api/company/templates: scaffold new template via AgentScaffold - POST /api/company/templates/:id/generate: trigger agent-creator to write definitions - POST /api/company/templates/:id/train: trigger innovator FDE training pipeline - PUT /api/company/templates/:id/files/content: save template file content - TemplateAgents.vue: create form, action buttons, editable preview, status banner
yibo
1 parent 007a391e
Showing 2 changed files with 390 additions and 18 deletions
server/routes/company.js
web/src/views/TemplateAgents.vue
@@ -102,6 +102,126 @@ router.get(&#39;/templates&#39;, (req, res) =&gt; {
   res.json(companyService.listTemplates());
 });
  
+// POST /api/company/templates — 创建新模板 Agent
+router.post('/templates', async (req, res) => {
+  try {
+    const { id, name, type, description } = req.body;
+    if (!id || !name) return res.status(400).json({ error: 'id 和 name 为必填项' });
+    if (!/^[a-z0-9][a-z0-9-]*$/.test(id)) {
+      return res.status(400).json({ error: 'id 格式无效 (只允许小写字母、数字、-)' });
+    }
+
+    const path = require('path');
+    const fs = require('fs');
+    const TEMPLATES_DIR = path.resolve(__dirname, '../../data/system/templates');
+    const templateDir = path.join(TEMPLATES_DIR, id);
+
+    if (fs.existsSync(templateDir)) {
+      return res.status(409).json({ error: `模板 "${id}" 已存在` });
+    }
+
+    // 使用 AgentScaffold 创建标准骨架
+    const { AgentScaffold } = await import('../../packages/agent-core/AgentScaffold.js');
+    const scaffold = new AgentScaffold(TEMPLATES_DIR);
+    await scaffold.create({
+      id,
+      type: type || 'skill',
+      name: name,
+      parentId: null,
+    });
+
+    // 如果有 description，追加到 config.json
+    if (description) {
+      const configPath = path.join(templateDir, 'config.json');
+      const config = JSON.parse(fs.readFileSync(configPath, 'utf-8'));
+      config.description = description;
+      fs.writeFileSync(configPath, JSON.stringify(config, null, 2), 'utf-8');
+    }
+
+    console.log(`[Template] ✅ 新模板已创建: ${id} (${type || 'skill'})`);
+    res.status(201).json({ success: true, id, name, type: type || 'skill' });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// POST /api/company/templates/:templateId/generate — 调用 Agent Creator 生成定义文件
+router.post('/templates/:templateId/generate', async (req, res) => {
+  try {
+    const { templateId } = req.params;
+    const { description } = req.body;
+    const path = require('path');
+    const fs = require('fs');
+    const config = require('../config');
+    const TEMPLATES_DIR = path.resolve(__dirname, '../../data/system/templates');
+    const templateDir = path.join(TEMPLATES_DIR, templateId);
+
+    if (!fs.existsSync(templateDir)) {
+      return res.status(404).json({ error: `模板 "${templateId}" 不存在` });
+    }
+
+    const PORT = config.port || 3000;
+    const prompt = `请你为模板 Agent "${templateId}" 编写完整的定义文件。
+模板位于 \`../../data/system/templates/${templateId}\` 目录。
+该 Agent 的描述/用途: ${description || '通用执行型 Agent'}
+请使用 Write 工具为其补充完整的 agent.md, identity.md, soul.md, user.md, tools.md 定义文件。
+写完后用 ls 验证目录结构。务必使用 Write 工具写入，不要使用 Edit 工具。`;
+
+    // 异步调用 agent-creator
+    fetch(`http://127.0.0.1:${PORT}/api/agent/agent-creator/chat`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        message: prompt,
+        conversationId: `tpl-gen-${templateId}-${Date.now().toString(36)}`,
+      }),
+    }).catch(e => console.error('[Template] Agent Creator 请求失败:', e.message));
+
+    console.log(`[Template] 🤖 已触发 Agent Creator 为 ${templateId} 生成定义`);
+    res.json({ success: true, message: `已触发 Agent Creator 为 "${templateId}" 生成定义文件`, status: 'generating' });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// POST /api/company/templates/:templateId/train — 调用 Innovator 训练模板
+router.post('/templates/:templateId/train', async (req, res) => {
+  try {
+    const { templateId } = req.params;
+    const path = require('path');
+    const fs = require('fs');
+    const config = require('../config');
+    const TEMPLATES_DIR = path.resolve(__dirname, '../../data/system/templates');
+    const templateDir = path.join(TEMPLATES_DIR, templateId);
+
+    if (!fs.existsSync(templateDir)) {
+      return res.status(404).json({ error: `模板 "${templateId}" 不存在` });
+    }
+
+    const PORT = config.port || 3000;
+    const prompt = `请你对模板 Agent "${templateId}" 进行评估和训练。
+模板位于 \`../../data/system/templates/${templateId}\` 目录。
+请使用 FDE pipeline 对该模板的技能进行评测和进化训练，目标: Benchmark Score ≥ 95。
+训练过程包括 Hunt(验证数据), Digest(知识消化), Evolver(技能进化) 等。
+请立即开始评估和训练，训练完成后请汇报最终分数。`;
+
+    // 异步调用 innovator
+    fetch(`http://127.0.0.1:${PORT}/api/agent/innovator/chat`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        message: prompt,
+        conversationId: `tpl-train-${templateId}-${Date.now().toString(36)}`,
+      }),
+    }).catch(e => console.error('[Template] Innovator 请求失败:', e.message));
+
+    console.log(`[Template] 🎓 已触发 Innovator 训练 ${templateId}`);
+    res.json({ success: true, message: `已触发 Innovator 训练 "${templateId}"`, status: 'training' });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
 // GET /api/company/templates/:templateId/files
 router.get('/templates/:templateId/files', (req, res) => {
   try {
@@ -189,6 +309,35 @@ router.get(&#39;/templates/:templateId/files/content&#39;, (req, res) =&gt; {
     res.status(500).json({ error: err.message });
   }
 });
+
+// PUT /api/company/templates/:templateId/files/content — 保存模板文件内容
+router.put('/templates/:templateId/files/content', (req, res) => {
+  try {
+    const path = require('path');
+    const fs = require('fs');
+    const DATA_DIR = path.resolve(__dirname, '../../data/system/templates');
+    const filePath = req.body.path;
+
+    if (!filePath) return res.status(400).json({ error: 'path 参数为必填' });
+
+    const absPath = path.resolve(DATA_DIR, req.params.templateId, filePath);
+    const safeBoundary = path.resolve(DATA_DIR, req.params.templateId);
+    if (!absPath.startsWith(safeBoundary)) {
+      return res.status(403).json({ error: '路径越界' });
+    }
+
+    // 确保目录存在
+    const dir = path.dirname(absPath);
+    if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+
+    fs.writeFileSync(absPath, req.body.content || '', 'utf-8');
+    console.log(`[Template] 💾 已保存模板文件 ${req.params.templateId}/${filePath}`);
+    res.json({ success: true, path: filePath });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
 // GET /api/company/:companyId
 router.get('/:companyId', (req, res) => {
   const company = companyService.get(req.params.companyId);
@@ -6,8 +6,30 @@
       <!-- ═══ Left Sidebar (Template List) ═══ -->
       <aside class="sidebar-panel">
         <div class="sidebar-header">
-          <h3>📦 模板库库 ({{ templates.length }})</h3>
+          <h3>📦 模板库 ({{ templates.length }})</h3>
+          <button class="create-btn" @click="showCreateForm = !showCreateForm">＋ 新建</button>
         </div>
+
+        <!-- Create Form -->
+        <div v-if="showCreateForm" class="create-form">
+          <input v-model="newTemplate.id" placeholder="模板 ID (如 seo-writer)" class="form-input" />
+          <input v-model="newTemplate.name" placeholder="显示名称" class="form-input" />
+          <select v-model="newTemplate.type" class="form-input">
+            <option value="skill">🔧 skill (执行型)</option>
+            <option value="executor">⚡ executor (执行器)</option>
+            <option value="specialist">🔬 specialist (专家)</option>
+            <option value="cxo">👔 cxo (战略层)</option>
+            <option value="role">🏢 role (职能层)</option>
+          </select>
+          <textarea v-model="newTemplate.description" placeholder="描述 (用途/职责)" class="form-input form-textarea" rows="2"></textarea>
+          <div class="form-actions">
+            <button class="btn-cancel" @click="showCreateForm = false">取消</button>
+            <button class="btn-confirm" :disabled="!newTemplate.id || !newTemplate.name || creating" @click="createTemplate">
+              {{ creating ? '创建中...' : '✨ 创建骨架' }}
+            </button>
+          </div>
+        </div>
+
         <div class="sidebar-search">
           <input type="text" v-model="searchQuery" placeholder="搜索模板..." />
         </div>
@@ -45,6 +67,24 @@
                 </div>
               </div>
             </div>
+            <!-- Action Buttons -->
+            <div class="header-actions">
+              <button class="action-btn action-generate" :disabled="actionStatus !== null" @click="triggerGenerate">
+                {{ actionStatus === 'generating' ? '⏳ 生成中...' : '🤖 Agent Creator 生成定义' }}
+              </button>
+              <button class="action-btn action-train" :disabled="actionStatus !== null" @click="triggerTrain">
+                {{ actionStatus === 'training' ? '⏳ 训练中...' : '🎓 Innovator 训练' }}
+              </button>
+            </div>
+          </div>
+
+          <!-- Status Banner -->
+          <div v-if="actionStatus" class="status-banner" :class="'status-' + actionStatus">
+            <span v-if="actionStatus === 'generating'">🤖 Agent Creator 正在为该模板生成定义文件，请稍候后刷新文件树查看结果...</span>
+            <span v-else-if="actionStatus === 'training'">🎓 Innovator 正在训练该模板，训练完成后 Benchmark 评分将自动更新...</span>
+            <span v-else-if="actionStatus === 'done'">✅ {{ actionMessage }}</span>
+            <span v-else-if="actionStatus === 'error'">❌ {{ actionMessage }}</span>
+            <button class="status-close" @click="actionStatus = null">✕</button>
           </div>
  
           <!-- File Explorer -->
@@ -53,6 +93,7 @@
               <div class="panel-title">
                 📁 模板文件结构
                 <span class="file-count-badge">{{ templateFiles?.totalFiles || 0 }} 文件</span>
+                <button class="refresh-btn" @click="loadTemplateFiles(selectedTemplateId)" title="刷新">🔄</button>
               </div>
               <div class="files-tree-scroll">
                 <div v-if="templateFiles?.tree?.length > 0">
@@ -66,12 +107,16 @@
  
             <div class="files-preview-panel">
               <div class="panel-title">
-                👁️ {{ selectedFilePath || '文件预览' }}
-                <span v-if="filePreviewSize" class="file-size-badge">{{ formatFileSize(filePreviewSize) }}</span>
+                <span>✏️ {{ selectedFilePath || '编辑器' }}</span>
+                <div v-if="filePreviewContent !== null" class="editor-actions">
+                  <span v-if="fileDirty" class="dirty-badge">未保存</span>
+                  <button v-if="fileDirty" class="editor-btn reset-btn" @click="editFileContent = filePreviewContent">↩ 重置</button>
+                  <button v-if="fileDirty" class="editor-btn save-btn" @click="saveTemplateFile">💾 保存</button>
+                </div>
               </div>
-              <div class="files-preview-scroll">
-                <pre v-if="filePreviewContent !== null" class="file-preview-code">{{ filePreviewContent }}</pre>
-                <div v-else class="empty-mini">← 点击左侧文件树以预览内容</div>
+              <div class="files-preview-scroll editor-scroll">
+                <textarea v-if="filePreviewContent !== null" v-model="editFileContent" class="editor-textarea" spellcheck="false"></textarea>
+                <div v-else class="empty-mini">← 点击左侧文件树以编辑内容</div>
               </div>
             </div>
           </div>
@@ -80,6 +125,7 @@
         <div v-else class="empty-state">
           <div class="empty-icon">📦</div>
           <h3>请在左侧选择一个 Agent 模板</h3>
+          <p class="empty-hint">或点击「＋ 新建」创建一个新的模板 Agent</p>
         </div>
       </main>
     </div>
@@ -103,8 +149,20 @@ const selectedTemplateId = ref(null)
 const templateFiles = ref(null)
 const selectedFilePath = ref(null)
 const filePreviewContent = ref(null)
+const editFileContent = ref(null)
 const filePreviewSize = ref(0)
  
+// Create form state
+const showCreateForm = ref(false)
+const creating = ref(false)
+const newTemplate = ref({ id: '', name: '', type: 'skill', description: '' })
+
+// Action state
+const actionStatus = ref(null)
+const actionMessage = ref('')
+
+const fileDirty = computed(() => editFileContent.value !== null && filePreviewContent.value !== null && editFileContent.value !== filePreviewContent.value)
+
 const filteredTemplates = computed(() => {
   if (!searchQuery.value) return templates.value;
   const q = searchQuery.value.toLowerCase();
@@ -116,7 +174,7 @@ const selectedTemplate = computed(() =&gt; {
 })
  
 function agentEmoji(type) {
-  const map = { cxo: '👔', role: '🏢', skill: '⚙️', specialist: '🔬', writer: '✍️', 'data-analyst': '📈' }
+  const map = { cxo: '👔', role: '🏢', skill: '🔧', specialist: '🔬', writer: '✍️', executor: '⚡', 'data-analyst': '📈' }
   return map[type] || '🤖'
 }
  
@@ -127,6 +185,8 @@ function formatFileSize(bytes) {
   return `${(bytes/1048576).toFixed(1)} MB`
 }
  
+// ─── Template CRUD ───
+
 async function loadTemplates() {
   try {
     const { data } = await axios.get('/api/company/templates')
@@ -137,7 +197,6 @@ async function loadTemplates() {
       selectedTemplateId.value = route.params.agentId;
       await loadTemplateFiles(route.params.agentId);
     } else if (templates.value.length > 0) {
-      // Default auto-select the first one and replace route
       selectTemplate(templates.value[0].id)
     }
   } catch (e) {
@@ -145,12 +204,30 @@ async function loadTemplates() {
   }
 }
  
+async function createTemplate() {
+  const { id, name, type, description } = newTemplate.value
+  if (!id || !name) return
+  creating.value = true
+  try {
+    await axios.post('/api/company/templates', { id, name, type, description })
+    showCreateForm.value = false
+    newTemplate.value = { id: '', name: '', type: 'skill', description: '' }
+    await loadTemplates()
+    selectTemplate(id)
+  } catch (e) {
+    alert(`创建失败: ${e.response?.data?.error || e.message}`)
+  } finally {
+    creating.value = false
+  }
+}
+
 function selectTemplate(id) {
   selectedTemplateId.value = id;
-  // Clear file preview selection
   selectedFilePath.value = null;
   filePreviewContent.value = null;
+  editFileContent.value = null;
   filePreviewSize.value = 0;
+  actionStatus.value = null;
  
   router.push(`/templates/${id}`);
 }
@@ -172,13 +249,70 @@ async function previewTemplateFile(filePath) {
       params: { path: filePath }
     });
     filePreviewContent.value = data.content;
+    editFileContent.value = data.content;
     filePreviewSize.value = data.size || 0;
   } catch (e) {
     filePreviewContent.value = '(加载失败)';
+    editFileContent.value = filePreviewContent.value;
     filePreviewSize.value = 0;
   }
 }
  
+async function saveTemplateFile() {
+  if (!selectedTemplateId.value || !selectedFilePath.value) return
+  try {
+    // Use the template file save endpoint
+    await axios.put(`/api/company/templates/${selectedTemplateId.value}/files/content`, {
+      path: selectedFilePath.value,
+      content: editFileContent.value,
+    })
+    filePreviewContent.value = editFileContent.value
+    await loadTemplateFiles(selectedTemplateId.value)
+  } catch (e) {
+    alert(`保存失败: ${e.response?.data?.error || e.message}`)
+  }
+}
+
+// ─── Agent Creator & Innovator ───
+
+async function triggerGenerate() {
+  if (!selectedTemplateId.value) return
+  actionStatus.value = 'generating'
+  try {
+    const { data } = await axios.post(`/api/company/templates/${selectedTemplateId.value}/generate`, {
+      description: selectedTemplate.value?.description || '',
+    })
+    actionMessage.value = data.message
+    // Auto-refresh after a delay
+    setTimeout(async () => {
+      await loadTemplateFiles(selectedTemplateId.value)
+      actionStatus.value = 'done'
+      actionMessage.value = 'Agent Creator 已完成（请检查文件树）'
+    }, 30000)
+  } catch (e) {
+    actionStatus.value = 'error'
+    actionMessage.value = e.response?.data?.error || e.message
+  }
+}
+
+async function triggerTrain() {
+  if (!selectedTemplateId.value) return
+  actionStatus.value = 'training'
+  try {
+    const { data } = await axios.post(`/api/company/templates/${selectedTemplateId.value}/train`)
+    actionMessage.value = data.message
+    setTimeout(async () => {
+      await loadTemplates()
+      await loadTemplateFiles(selectedTemplateId.value)
+      actionStatus.value = 'done'
+      actionMessage.value = 'Innovator 训练已触发（请稍后查看分数更新）'
+    }, 60000)
+  } catch (e) {
+    actionStatus.value = 'error'
+    actionMessage.value = e.response?.data?.error || e.message
+  }
+}
+
 watch(() => route.params.agentId, (newId) => {
   if (newId && newId !== selectedTemplateId.value) {
     selectedTemplateId.value = newId;
@@ -222,10 +356,46 @@ onMounted(() =&gt; {
 .sidebar-header {
   padding: 16px 20px;
   border-bottom: 1px solid var(--border-primary);
+  display: flex; align-items: center; justify-content: space-between;
 }
 .sidebar-header h3 {
   font-size: 16px; font-weight: 700; margin: 0; color: var(--text-primary);
 }
+.create-btn {
+  padding: 4px 12px; border-radius: 6px; border: none;
+  background: var(--accent); color: #fff; font-size: 12px; font-weight: 700;
+  cursor: pointer; transition: all 0.2s;
+}
+.create-btn:hover { box-shadow: 0 3px 12px rgba(16,185,129,0.3); transform: translateY(-1px); }
+
+/* Create Form */
+.create-form {
+  padding: 12px; border-bottom: 1px solid var(--border-primary);
+  background: var(--bg-overlay); display: flex; flex-direction: column; gap: 8px;
+  animation: slideDown 0.2s ease-out;
+}
+@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
+.form-input {
+  width: 100%; padding: 8px 10px; border: 1px solid var(--border-primary);
+  border-radius: 6px; background: var(--bg-input); color: var(--text-primary);
+  font-size: 12px; font-family: inherit; box-sizing: border-box;
+  transition: border-color 0.2s;
+}
+.form-input:focus { outline: none; border-color: var(--accent); background: var(--bg-input-focus); }
+.form-textarea { resize: vertical; min-height: 40px; }
+.form-actions { display: flex; gap: 6px; justify-content: flex-end; }
+.btn-cancel {
+  padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border-primary);
+  background: transparent; color: var(--text-muted); font-size: 11px; cursor: pointer;
+}
+.btn-confirm {
+  padding: 5px 14px; border-radius: 6px; border: none;
+  background: linear-gradient(135deg, var(--accent), var(--accent-light)); color: #fff;
+  font-size: 11px; font-weight: 700; cursor: pointer; transition: all 0.2s;
+}
+.btn-confirm:hover { box-shadow: 0 3px 10px rgba(16,185,129,0.3); }
+.btn-confirm:disabled { opacity: 0.5; cursor: not-allowed; }
+
 .sidebar-search {
   padding: 12px;
   border-bottom: 1px solid var(--border-primary);
@@ -235,7 +405,7 @@ onMounted(() =&gt; {
   border: 1px solid var(--border-primary);
   border-radius: 8px; background: var(--bg-input);
   color: var(--text-primary); font-size: 13px;
-  transition: all 0.2s;
+  transition: all 0.2s; box-sizing: border-box;
 }
 .sidebar-search input:focus {
   outline: none; border-color: var(--accent); background: var(--bg-input-focus);
@@ -278,22 +448,50 @@ onMounted(() =&gt; {
   height: 100%; color: var(--text-muted);
 }
 .empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
+.empty-hint { font-size: 13px; color: var(--text-faint); margin-top: 4px; }
 .template-detail {
-  display: flex; flex-direction: column; height: 100%; gap: 24px;
+  display: flex; flex-direction: column; height: 100%; gap: 16px;
 }
 .detail-header {
   background: var(--bg-secondary); border: 1px solid var(--border-primary);
-  border-radius: 16px; padding: 24px; display: flex; justify-content: space-between; align-items: center;
+  border-radius: 16px; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center;
+  flex-wrap: wrap; gap: 12px;
 }
 .header-main { display: flex; align-items: center; gap: 20px; }
 .header-icon { font-size: 48px; }
 .header-main h2 { font-size: 24px; font-weight: 800; margin: 0 0 8px 0; color: var(--text-primary); }
-.meta-row { display: flex; gap: 12px; }
+.meta-row { display: flex; gap: 12px; flex-wrap: wrap; }
 .badge { padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; }
 .badge-type { background: var(--bg-surface-hover); color: var(--text-secondary); border: 1px solid var(--border-primary); text-transform: uppercase; }
 .badge-used { background: rgba(59,130,246,0.1); color: var(--blue-text); }
 .badge-score { background: rgba(251,191,36,0.1); color: var(--yellow-text); }
  
+/* Action buttons */
+.header-actions { display: flex; gap: 8px; }
+.action-btn {
+  padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border-primary);
+  font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s;
+  white-space: nowrap;
+}
+.action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.action-generate { background: rgba(59,130,246,0.1); color: var(--blue-text); border-color: rgba(59,130,246,0.2); }
+.action-generate:hover:not(:disabled) { background: rgba(59,130,246,0.2); box-shadow: 0 3px 10px rgba(59,130,246,0.15); }
+.action-train { background: rgba(139,92,246,0.1); color: var(--purple-text); border-color: rgba(139,92,246,0.2); }
+.action-train:hover:not(:disabled) { background: rgba(139,92,246,0.2); box-shadow: 0 3px 10px rgba(139,92,246,0.15); }
+
+/* Status Banner */
+.status-banner {
+  padding: 10px 16px; border-radius: 10px; font-size: 12px; line-height: 1.6;
+  display: flex; align-items: center; justify-content: space-between; gap: 8px;
+  animation: slideDown 0.3s ease-out;
+}
+.status-generating { background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.2); color: var(--blue-text); }
+.status-training { background: rgba(139,92,246,0.08); border: 1px solid rgba(139,92,246,0.2); color: var(--purple-text); }
+.status-done { background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.2); color: var(--accent); }
+.status-error { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); color: var(--red-text, #ef4444); }
+.status-close { border: none; background: transparent; cursor: pointer; font-size: 14px; color: inherit; opacity: 0.6; }
+.status-close:hover { opacity: 1; }
+
 /* ═══ Files Layout ═══ */
 .files-layout {
   display: flex; gap: 0; flex: 1; min-height: 0;
@@ -313,13 +511,38 @@ onMounted(() =&gt; {
   display: flex; align-items: center; justify-content: space-between; gap: 8px;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
+.refresh-btn {
+  border: none; background: transparent; cursor: pointer; font-size: 13px;
+  padding: 2px 4px; border-radius: 4px; transition: all 0.15s;
+}
+.refresh-btn:hover { background: var(--bg-surface-hover); transform: rotate(90deg); }
 .files-tree-scroll { flex: 1; overflow-y: auto; padding: 8px; }
-.files-preview-scroll { flex: 1; overflow: auto; padding: 12px; background: var(--bg-input); }
-.file-preview-code {
-  font-family: 'JetBrains Mono', 'Menlo', monospace; font-size: 13px;
-  line-height: 1.6; color: var(--text-secondary); white-space: pre-wrap;
-  word-break: break-all; margin: 0; padding: 4px;
+
+/* Editor in template */
+.editor-scroll { flex: 1; display: flex; flex-direction: column; padding: 0 !important; }
+.files-preview-scroll.editor-scroll { padding: 0; }
+.editor-textarea {
+  flex: 1; width: 100%; border: none; outline: none; resize: none;
+  background: var(--bg-input); color: var(--text-secondary);
+  font-family: 'JetBrains Mono', monospace; font-size: 13px;
+  line-height: 1.6; padding: 12px; box-sizing: border-box;
+  tab-size: 2;
 }
+.editor-textarea:focus { background: var(--bg-input-focus); }
+.editor-actions { display: flex; align-items: center; gap: 4px; }
+.dirty-badge {
+  font-size: 9px; padding: 2px 6px; border-radius: 4px;
+  background: rgba(251,191,36,0.15); color: var(--yellow-text); font-weight: 600;
+}
+.editor-btn {
+  border: none; padding: 3px 8px; border-radius: 4px; font-size: 11px;
+  cursor: pointer; transition: all 0.15s; font-weight: 600;
+}
+.reset-btn { background: var(--bg-input); color: var(--text-muted); }
+.reset-btn:hover { background: var(--bg-surface-hover); }
+.save-btn { background: var(--accent); color: #fff; }
+.save-btn:hover { box-shadow: 0 2px 8px rgba(16,185,129,0.3); }
+
 .file-count-badge {
   padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600;
   background: var(--accent-bg); color: var(--accent); flex-shrink: 0;