宜博 / lemonboss

<template>
  <div class="template-agents-page">
    <AppNav />

    <div class="main-layout">
      <!-- ═══ Left Sidebar (Template List) ═══ -->
      <aside class="sidebar-panel">
        <div class="sidebar-header">
          <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>
        <div class="sidebar-filters">
          <select v-model="filterType" class="filter-select">
            <option value="">全部类型</option>
            <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>
          <select v-model="sortMode" class="filter-select">
            <option value="time">🕐 时间</option>
            <option value="name">🔤 名称</option>
            <option value="score">⭐ 评分</option>
          </select>
          <button class="sort-dir-btn" @click="toggleSortDir" :title="sortDir === 'desc' ? '降序 (点击切换升序)' : '升序 (点击切换降序)'">
            <span class="sort-arrow" :class="sortDir">{{ sortDir === 'desc' ? '↓' : '↑' }}</span>
          </button>
        </div>
        <div class="template-list-scroll">
          <div 
            v-for="tpl in filteredTemplates" :key="tpl.id"
            class="agent-card"
            :class="{ active: selectedTemplateId === tpl.id }"
            @click="selectTemplate(tpl.id)"
          >
            <div class="agent-card-emoji">{{ agentEmoji(tpl.type) }}</div>
            <div class="agent-card-info">
              <div class="agent-card-name">{{ tpl.name }}</div>
              <div class="agent-card-type">{{ tpl.type }}</div>
            </div>
            <div v-if="tpl.benchmarkScore" class="tpl-score">⭐ {{ tpl.benchmarkScore }}</div>
          </div>
          <div v-if="filteredTemplates.length === 0" class="empty-mini">未找到匹配模板</div>
        </div>
      </aside>

      <!-- ═══ Right Content (Detail & Files) ═══ -->
      <main class="content-panel">
        <div v-if="selectedTemplate" class="template-detail">
          
          <div class="detail-header">
            <div class="header-main">
              <span class="header-icon">{{ agentEmoji(selectedTemplate.type) }}</span>
              <div>
                <h2 class="editable-name-wrapper">
                  <template v-if="editingName">
                    <input
                      ref="nameInputRef"
                      v-model="editNameValue"
                      class="name-edit-input"
                      @keyup.enter="saveTemplateName"
                      @keyup.escape="cancelEditName"
                      @blur="saveTemplateName"
                    />
                    <button class="name-edit-action save" @click.stop="saveTemplateName" title="保存">✓</button>
                    <button class="name-edit-action cancel" @click.stop="cancelEditName" title="取消">✕</button>
                  </template>
                  <template v-else>
                    <span class="name-display" @click="startEditName" title="点击修改名称">{{ selectedTemplate.name }}</span>
                    <span class="name-edit-hint" @click="startEditName">✏️</span>
                  </template>
                  <span class="template-id-tag">#{{ selectedTemplate.id }}</span>
                </h2>
                <div class="meta-row">
                  <span class="badge badge-type">{{ selectedTemplate.type }}</span>
                  <span class="badge badge-used">被使用: {{ selectedTemplate.usedCount }} 次</span>
                  <span v-if="selectedTemplate.benchmarkScore" class="badge badge-score">评分: {{ selectedTemplate.benchmarkScore }}</span>
                  <span v-if="selectedTemplate.trainedAt" class="badge badge-time">训练于: {{ selectedTemplate.trainedAt }}</span>
                  <span v-if="selectedTemplate.evolvingVersionCount !== undefined && selectedTemplate.evolvingVersionCount > 0" class="badge badge-version">进化次数: {{ selectedTemplate.evolvingVersionCount }}</span>
                  <span v-if="selectedTemplate.benchmarkVersionCount !== undefined && selectedTemplate.benchmarkVersionCount > 0" class="badge badge-version">评测次数: {{ selectedTemplate.benchmarkVersionCount }}</span>
                </div>
                <div class="template-path-display" title="绝对路径 (点击可复制)" @click="copyToClipboard(selectedTemplate.fullPath)">
                  <span class="path-icon">📂</span> {{ selectedTemplate.fullPath }}
                </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 -->
          <div class="files-layout">
            <div class="files-tree-panel">
              <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">
                  <template v-for="node in templateFiles.tree" :key="node.path">
                    <CompanyFileNode :node="node" :depth="0" :selected="selectedFilePath" @select="previewTemplateFile" />
                  </template>
                </div>
                <div v-else class="empty-mini">暂无文件或系统隐藏</div>
              </div>
            </div>

            <div class="files-preview-panel">
              <div class="panel-title">
                <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 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>

          <!-- Logs Panel -->
          <div v-if="templateLogs.length > 0" class="logs-section">
            <div class="section-header">
              <h4>📜 执行日志</h4>
              <button class="refresh-btn" @click="loadTemplateLogs(selectedTemplateId)" title="刷新">🔄</button>
            </div>
            <div class="logs-list">
              <div v-for="log in templateLogs" :key="log.conversationId" class="log-card" :class="'log-' + log.status">
                <div class="log-header" @click="log._expanded = !log._expanded">
                  <span class="log-status-icon">{{ log.status === 'done' ? '✅' : '⏳' }}</span>
                  <span class="log-label">{{ log.label }}</span>
                  <span class="log-time">{{ formatLogTime(log.createdAt) }}</span>
                  <span class="log-msg-count">{{ log.messageCount }} 条</span>
                  <span class="log-toggle">{{ log._expanded ? '▼' : '▶' }}</span>
                </div>
                <div v-if="log._expanded" class="log-summary">{{ log.summary }}</div>
              </div>
            </div>
          </div>

        </div>
        <div v-else class="empty-state">
          <div class="empty-icon">📦</div>
          <h3>请在左侧选择一个 Agent 模板</h3>
          <p class="empty-hint">或点击「＋ 新建」创建一个新的模板 Agent</p>
        </div>
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
import AppNav from '@/components/AppNav.vue'
import CompanyFileNode from '@/components/CompanyFileNode.vue'

const router = useRouter()
const route = useRoute()

const templates = ref([])
const searchQuery = ref('')
const selectedTemplateId = ref(null)
const filterType = ref('')
const sortMode = ref('time') // 'time' | 'name' | 'score'
const sortDir = ref('desc') // 'asc' | 'desc'

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 templateLogs = ref([])

// Inline name editing
const editingName = ref(false)
const editNameValue = ref('')
const nameInputRef = ref(null)

const fileDirty = computed(() => editFileContent.value !== null && filePreviewContent.value !== null && editFileContent.value !== filePreviewContent.value)

function toggleSortDir() {
  sortDir.value = sortDir.value === 'desc' ? 'asc' : 'desc';
}

const filteredTemplates = computed(() => {
  let list = templates.value;

  // Type filter
  if (filterType.value) {
    list = list.filter(t => t.type === filterType.value);
  }

  // Search filter
  if (searchQuery.value) {
    const q = searchQuery.value.toLowerCase();
    list = list.filter(t => t.id.toLowerCase().includes(q) || (t.name && t.name.toLowerCase().includes(q)));
  }

  // Sort
  const dir = sortDir.value === 'asc' ? 1 : -1;
  list = [...list].sort((a, b) => {
    if (sortMode.value === 'time') {
      return dir * (new Date(a.updatedAt || 0).getTime() - new Date(b.updatedAt || 0).getTime());
    }
    if (sortMode.value === 'name') {
      return dir * (a.name || a.id).localeCompare(b.name || b.id, 'zh-CN');
    }
    // score
    return dir * ((a.benchmarkScore || 0) - (b.benchmarkScore || 0));
  });

  return list;
})

const selectedTemplate = computed(() => {
  return templates.value.find(t => t.id === selectedTemplateId.value) || null;
})

function agentEmoji(type) {
  const map = { cxo: '👔', role: '🏢', skill: '🔧', specialist: '🔬', writer: '✍️', executor: '⚡', 'data-analyst': '📈' }
  return map[type] || '🤖'
}

function formatFileSize(bytes) {
  if (!bytes) return ''
  if (bytes < 1024) return `${bytes} B`
  if (bytes < 1048576) return `${(bytes/1024).toFixed(1)} KB`
  return `${(bytes/1048576).toFixed(1)} MB`
}

async function copyToClipboard(text) {
  if (!text) return;
  try {
    await navigator.clipboard.writeText(text);
  } catch (err) {
    console.error('Failed to copy text: ', err);
  }
}

// ─── Template CRUD ───

async function loadTemplates() {
  try {
    const { data } = await axios.get('/api/company/templates')
    templates.value = data
    
    // Auto select from route if valid
    if (route.params.agentId && templates.value.some(t => t.id === route.params.agentId)) {
      selectedTemplateId.value = route.params.agentId;
      await loadTemplateFiles(route.params.agentId);
    } else if (templates.value.length > 0) {
      selectTemplate(templates.value[0].id)
    }
  } catch (e) {
    console.error(e)
  }
}

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;
  selectedFilePath.value = null;
  filePreviewContent.value = null;
  editFileContent.value = null;
  filePreviewSize.value = 0;
  actionStatus.value = null;
  templateLogs.value = [];
  
  router.push(`/templates/${id}`);
}

async function loadTemplateFiles(id) {
  try {
    const { data } = await axios.get(`/api/company/templates/${id}/files`);
    templateFiles.value = data;
  } catch (e) {
    console.error(e);
  }
}

async function previewTemplateFile(filePath) {
  if (!selectedTemplateId.value) return;
  selectedFilePath.value = filePath;
  try {
    const { data } = await axios.get(`/api/company/templates/${selectedTemplateId.value}/files/content`, {
      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}`)
  }
}

// ─── Inline Name Editing ───

function startEditName() {
  if (!selectedTemplate.value) return;
  editNameValue.value = selectedTemplate.value.name;
  editingName.value = true;
  nextTick(() => {
    nameInputRef.value?.focus();
    nameInputRef.value?.select();
  });
}

function cancelEditName() {
  editingName.value = false;
  editNameValue.value = '';
}

async function saveTemplateName() {
  if (!editingName.value) return;
  const newName = editNameValue.value.trim();
  if (!newName || newName === selectedTemplate.value?.name) {
    cancelEditName();
    return;
  }
  try {
    await axios.patch(`/api/company/templates/${selectedTemplateId.value}`, { name: newName });
    // Update local data
    const tpl = templates.value.find(t => t.id === selectedTemplateId.value);
    if (tpl) tpl.name = newName;
    editingName.value = false;
  } 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 logs and files
    const pollId = setInterval(async () => {
      await loadTemplateLogs(selectedTemplateId.value)
      await loadTemplateFiles(selectedTemplateId.value)
    }, 10000)
    setTimeout(() => {
      clearInterval(pollId)
      actionStatus.value = 'done'
      actionMessage.value = 'Agent Creator 已完成（请检查文件树）'
    }, 60000)
  } 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
    const pollId = setInterval(async () => {
      await loadTemplateLogs(selectedTemplateId.value)
      await loadTemplateFiles(selectedTemplateId.value)
    }, 15000)
    setTimeout(async () => {
      clearInterval(pollId)
      await loadTemplates()
      actionStatus.value = 'done'
      actionMessage.value = 'Innovator 训练已触发（请稍后查看分数更新）'
    }, 120000)
  } catch (e) {
    actionStatus.value = 'error'
    actionMessage.value = e.response?.data?.error || e.message
  }
}

async function loadTemplateLogs(id) {
  try {
    const { data } = await axios.get(`/api/company/templates/${id}/logs`)
    templateLogs.value = data.map(l => ({ ...l, _expanded: false }))
  } catch (e) { console.error(e) }
}

function formatLogTime(ts) {
  if (!ts) return ''
  const d = new Date(ts)
  return d.toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
}

watch(() => route.params.agentId, (newId) => {
  if (newId && newId !== selectedTemplateId.value) {
    selectedTemplateId.value = newId;
    loadTemplateFiles(newId);
  }
})

watch(selectedTemplateId, (newId) => {
  if (newId) {
    loadTemplateFiles(newId);
    loadTemplateLogs(newId);
  }
})

onMounted(() => {
  loadTemplates()
})
</script>

<style scoped>
.template-agents-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
}

.main-layout {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* ═══ Sidebar ═══ */
.sidebar-panel {
  width: 280px;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-primary);
  display: flex;
  flex-direction: column;
}
.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);
}
.sidebar-search input {
  width: 100%; padding: 8px 12px;
  border: 1px solid var(--border-primary);
  border-radius: 8px; background: var(--bg-input);
  color: var(--text-primary); font-size: 13px;
  transition: all 0.2s; box-sizing: border-box;
}
.sidebar-search input:focus {
  outline: none; border-color: var(--accent); background: var(--bg-input-focus);
}

/* Filter & Sort Bar */
.sidebar-filters {
  display: flex; gap: 6px; padding: 8px 12px;
  border-bottom: 1px solid var(--border-primary);
}
.filter-select {
  flex: 1; padding: 5px 8px; border-radius: 6px;
  border: 1px solid var(--border-primary); background: var(--bg-input);
  color: var(--text-secondary); font-size: 11px; cursor: pointer;
  transition: all 0.2s; appearance: auto;
}
.filter-select:focus { outline: none; border-color: var(--accent); }
.sort-dir-btn {
  padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border-primary);
  background: var(--bg-input); color: var(--text-secondary);
  font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
  min-width: 32px;
}
.sort-dir-btn:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.sort-arrow { display: inline-block; transition: transform 0.25s ease; }
.sort-arrow.asc { transform: rotate(0deg); }
.sort-arrow.desc { transform: rotate(0deg); }

.template-list-scroll {
  flex: 1; overflow-y: auto; padding: 6px;
}
.agent-card {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px; cursor: pointer;
  transition: all 0.15s; margin-bottom: 2px; border: 1px solid transparent;
}
.agent-card:hover { background: var(--accent-bg); }
.agent-card.active { background: var(--bg-surface-active); border-color: var(--border-active); }
.agent-card-emoji { font-size: 18px; flex-shrink: 0; }
.agent-card-info { min-width: 0; flex: 1; }
.agent-card-name { font-size: 11px; font-weight: 600; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-card-type { font-size: 9px; color: var(--text-faint); text-transform: uppercase; }
.tpl-score { font-size: 10px; font-weight: 700; color: var(--yellow-text, #f59e0b); background: rgba(245,158,11,0.1); padding: 2px 6px; border-radius: 6px; }

.empty-mini { padding: 24px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* ═══ Main Content ═══ */
.content-panel {
  flex: 1; display: flex; flex-direction: column;
  background: var(--bg-primary); padding: 24px;
}
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  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: 16px;
}
.detail-header {
  background: var(--bg-secondary); border: 1px solid var(--border-primary);
  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; 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); }
.badge-time { background: rgba(16, 185, 129, 0.1); color: var(--accent); }
.badge-version { background: rgba(99, 102, 241, 0.1); color: #6366f1; }
.template-id-tag { font-size: 16px; color: var(--text-muted); font-weight: 500; margin-left: 8px; font-family: 'JetBrains Mono', monospace; opacity: 0.6; }

/* Editable Name */
.editable-name-wrapper { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.name-display {
  cursor: pointer; border-bottom: 1.5px dashed transparent; transition: all 0.2s;
  padding-bottom: 1px;
}
.name-display:hover {
  border-bottom-color: var(--accent); color: var(--accent);
}
.name-edit-hint {
  opacity: 0; font-size: 14px; cursor: pointer; transition: opacity 0.2s;
}
.editable-name-wrapper:hover .name-edit-hint { opacity: 0.6; }
.name-edit-hint:hover { opacity: 1 !important; }
.name-edit-input {
  font-size: 22px; font-weight: 800; color: var(--text-primary);
  background: var(--bg-input); border: 1.5px solid var(--accent);
  border-radius: 8px; padding: 2px 10px; outline: none;
  font-family: inherit; min-width: 120px;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.12);
  transition: box-shadow 0.2s;
}
.name-edit-input:focus { box-shadow: 0 0 0 3px rgba(16,185,129,0.25); }
.name-edit-action {
  border: none; cursor: pointer; font-size: 14px; font-weight: 700;
  width: 26px; height: 26px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.name-edit-action.save { background: var(--accent); color: #fff; }
.name-edit-action.save:hover { box-shadow: 0 2px 8px rgba(16,185,129,0.3); }
.name-edit-action.cancel { background: var(--bg-surface-hover); color: var(--text-muted); }
.name-edit-action.cancel:hover { background: rgba(239,68,68,0.1); color: var(--red-text, #ef4444); }
.template-path-display {
  font-size: 11px; color: var(--text-faint); margin-top: 10px; font-family: 'JetBrains Mono', monospace;
  user-select: all; cursor: copy; display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-overlay); padding: 4px 8px; border-radius: 6px; border: 1px dashed var(--border-primary);
  transition: all 0.2s;
}
.template-path-display:hover { background: var(--bg-surface-hover); border-color: var(--text-muted); color: var(--text-secondary); }
.path-icon { opacity: 0.7; }

/* 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;
  border: 1px solid var(--border-primary); border-radius: 12px; overflow: hidden;
  background: var(--bg-surface);
}
.files-tree-panel {
  width: 300px; min-width: 240px; border-right: 1px solid var(--border-primary);
  display: flex; flex-direction: column; background: var(--bg-overlay);
}
.files-preview-panel {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
}
.panel-title {
  padding: 12px 16px; font-size: 13px; font-weight: 700; color: var(--text-secondary);
  border-bottom: 1px solid var(--border-primary);
  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; }

/* 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;
}
.file-size-badge {
  padding: 2px 8px; border-radius: 6px; font-size: 11px;
  background: var(--purple-bg, rgba(139,92,246,0.1)); color: var(--purple-text, #a78bfa);
  flex-shrink: 0; font-weight: 600;
}

/* ═══ Logs Panel ═══ */
.logs-section {
  margin-top: 8px; border: 1px solid var(--border-primary); border-radius: 12px;
  background: var(--bg-surface); overflow: hidden;
}
.logs-section .section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-bottom: 1px solid var(--border-primary);
}
.logs-section .section-header h4 {
  margin: 0; font-size: 14px; font-weight: 700; color: var(--text-primary);
}
.logs-list { max-height: 250px; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.log-card {
  border: 1px solid var(--border-primary); border-radius: 8px; overflow: hidden;
  transition: border-color 0.2s;
}
.log-card.log-done { border-left: 3px solid rgba(16,185,129,0.4); }
.log-card.log-running { border-left: 3px solid rgba(59,130,246,0.4); }
.log-header {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  cursor: pointer; user-select: none; transition: background 0.15s;
}
.log-header:hover { background: var(--bg-surface-hover); }
.log-status-icon { font-size: 12px; }
.log-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); flex: 1; }
.log-time { font-size: 10px; color: var(--text-muted); }
.log-msg-count { font-size: 10px; color: var(--text-faint); }
.log-toggle { font-size: 9px; color: var(--text-faint); }
.log-summary {
  padding: 8px 12px; font-size: 12px; line-height: 1.6; color: var(--text-secondary);
  background: var(--bg-input); border-top: 1px solid var(--border-primary);
  white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow-y: auto;
  font-family: 'JetBrains Mono', monospace;
}
</style>