{"repo": "anasyoussoufi/copilotosvscode", "files": {"cockpit/public/app.js": {"914d2ccf2782db5875a09b9e5a89b38953f3a579": {"t": 1785746024.1444721, "n": 18611, "h": "38e9e30202f62349", "c": "'use strict';\n\n/* =========================== Onglets =========================== */\nconst tabs = document.querySelectorAll('.tab');\ntabs.forEach((tab) =>\n  tab.addEventListener('click', () => {\n    tabs.forEach((t) => t.classList.remove('active'));\n    tab.classList.add('active');\n    document.querySelectorAll('.panel').forEach((p) => p.classList.remove('active'));\n    document.getElementById(`panel-${tab.dataset.tab}`).classList.add('active');\n    if (tab.dataset.tab === 'agents') loadAgents();\n    if (tab.dataset.tab === 'mcp') loadMcp();\n    if (tab.dataset.tab === 'settings') loadSettings();\n  })\n);\n\nconst esc = (s) =>\n  String(s).replace(/[&<>\"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '\"': '&quot;', \"'\": '&#39;' }[c]));\n\nfunction renderMarkdownLite(text) {\n  let html = esc(text);\n  html = html.replace(/`([^`\\n]+)`/g, '<code>$1</code>');\n  html = html.replace(/\\*\\*([^*\\n]+)\\*\\*/g, '<strong>$1</strong>');\n  html = html.replace(/(https?:\\/\\/[^\\s<]+)/g, '<a href=\"$1\" target=\"_blank\" rel=\"noopener\">$1</a>');\n  return html;\n}\n\n/* =========================== WebSocket =========================== */\nconst connIndicator = document.getElementById('conn-indicator');\nconst connLabel = document.getElementById('conn-label');\nlet ws = null;\n\nfunction connect() {\n  ws = new WebSocket(`${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/ws`);\n  ws.onopen = () => {\n    connIndicator.className = 'conn online';\n    connLabel.textContent = 'en ligne';\n  };\n  ws.onclose = () => {\n    connIndicator.className = 'conn offline';\n    connLabel.textContent = 'déconnecté — reconnexion…';\n    setTimeout(connect, 2000);\n  };\n  ws.onmessage = (event) => handleEvent(JSON.parse(event.data));\n}\nconnect();\n\n/* =========================== Chat =========================== */\nconst chatMessages = document.getElementById('chat-messages');\nconst chatEmpty = document.getElementById('chat-empty');\nconst chatForm = document.getElementById('chat-form');\nconst chatText = document.getElementById('chat-text');\nconst btnSend = document.getElementById('btn-send');\nlet streamingEl = null;\nlet streamingRaw = '';\n\nfunction addMessage(cls, text) {\n  chatEmpty.hidden = true;\n  const el = document.createElement('div');\n  el.className = `msg ${cls}`;\n  el.innerHTML = renderMarkdownLite(text);\n  chatMessages.appendChild(el);\n  chatMessages.scrollTop = chatMessages.scrollHeight;\n  return el;\n}\n\nchatForm.addEventListener('submit', (e) => {\n  e.preventDefault();\n  const text = chatText.value.trim();\n  if (!text || !ws || ws.readyState !== 1) return;\n  addMessage('user', text);\n  chatText.value = '';\n  btnSend.disabled = true;\n  streamingRaw = '';\n  streamingEl = addMessage('assistant streaming', '');\n  ws.send(JSON.stringify({ type: 'chat', text }));\n});\n\nchatText.addEventListener('keydown', (e) => {\n  if (e.key === 'Enter' && !e.shiftKey) {\n    e.preventDefault();\n    chatForm.requestSubmit();\n  }\n});\n\ndocument.getElementById('btn-reset').addEventListener('click', () => {\n  if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: 'reset' }));\n  chatMessages.querySelectorAll('.msg').forEach((m) => m.remove());\n  chatEmpty.hidden = false;\n  clearFlow();\n});\n\nfunction handleEvent(event) {\n  switch (event.type) {\n    case 'token':\n      if (!streamingEl) streamingEl = addMessage('assistant streaming', '');\n      streamingRaw += event.text;\n      streamingEl.innerHTML = renderMarkdownLite(streamingRaw);\n      chatMessages.scrollTop = chatMessages.scrollHeight;\n      break;\n    case 'message_done':\n      if (streamingEl) streamingEl.classList.remove('streaming');\n      streamingEl = null;\n      streamingRaw = '';\n      btnSend.disabled = false;\n      finishAllNodes();\n      break;\n    case 'error':\n      addMessage('error', event.message);\n      break;\n    case 'notice':\n      addMessage('notice', event.message);\n      break;\n    case 'agent_event':\n      onAgentEvent(event);\n      break;\n    case 'tool_start':\n      onToolStart(event);\n      break;\n    case 'tool_end':\n      onToolEnd(event);\n      if (!event.ok) {\n        addMessage('error', `Échec de l'outil ${event.tool} (${event.server}) :\\n${event.resultPreview || 'pas de détail'}`);\n      }\n      break;\n    case 'artifact':\n      onArtifact(event);\n      break;\n    case 'claim_check':\n      onClaimCheck(event);\n      break;\n    case 'validation_request':\n      onValidationRequest(event);\n      break;\n  }\n}\n\nfunction onValidationRequest({ id, question }) {\n  chatEmpty.hidden = true;\n  const el = document.createElement('div');\n  el.className = 'msg validation';\n  el.innerHTML = `\n    <div class=\"v-question\">🙋 Validation demandée :<br>${renderMarkdownLite(question)}</div>\n    <div class=\"v-actions\">\n      <button class=\"btn v-approve\">👍 Valider</button>\n      <button class=\"btn v-reject\">👎 Refuser</button>\n    </div>`;\n  const answer = (approved) => {\n    if (!ws || ws.readyState !== 1) return;\n    ws.send(JSON.stringify({ type: 'validation_response', id, approved }));\n    el.querySelectorAll('button').forEach((b) => (b.disabled = true));\n    el.classList.add(approved ? 'approved' : 'rejected');\n    el.querySelector('.v-actions').insertAdjacentHTML('beforeend', `<span class=\"v-result\">${approved ? '👍 validé' : '👎 refusé'}</span>`);\n  };\n  el.querySelector('.v-approve').addEventListener('click', () => answer(true));\n  el.querySelector('.v-reject').addEventListener('click', () => answer(false));\n  chatMessages.appendChild(el);\n  chatMessages.scrollTop = chatMessages.scrollHeight;\n}\n\nconst claimChips = new Map(); // clé de ticket -> chip (le dernier verdict remplace le précédent)\n\nfunction onClaimCheck({ key, ok }) {\n  let chip = claimChips.get(key);\n  if (!chip) {\n    chip = document.createElement('span');\n    chip.className = 'chip';\n    claimChips.set(key, chip);\n    artifactGroup('🛡️ Vérification Jira').appendChild(chip);\n  }\n  if (ok) {\n    chip.innerHTML = `✅ <span class=\"file\">${esc(key)} vérifié</span>`;\n  } else {\n    chip.innerHTML = `🚫 <span class=\"file\" style=\"color:#ffb4ae\">${esc(key)} INTROUVABLE</span>`;\n    addMessage('error', `🚫 Le ticket ${key} annoncé par l'agent n'existe pas dans Jira. L'agent a probablement halluciné ce résultat.`);\n  }\n}\n\n/* =========================== Visualisation =========================== */\nconst colCore = document.getElementById('col-core');\nconst colAgents = document.getElementById('col-agents');\nconst colTools = document.getElementById('col-tools');\nconst flowSvg = document.getElementById('flow-svg');\nconst flowCanvas = document.getElementById('flow-canvas');\nconst artifactList = document.getElementById('artifact-list');\n\nconst nodes = new Map(); // id -> {el, col}\nconst edges = new Map(); // \"from->to\" -> {from, to, cls, active}\nconst artifacts = new Set();\nlet lastActiveAgentId = null;\n\nfunction makeNode(id, column, name, extraClass = '') {\n  if (nodes.has(id)) return nodes.get(id);\n  const el = document.createElement('div');\n  el.className = `node ${extraClass}`;\n  el.dataset.id = id;\n  el.innerHTML = `<div class=\"node-name\"><span class=\"pulse\"></span>${esc(name)}</div><div class=\"node-label\"></div>`;\n  column.appendChild(el);\n  const node = { el, column };\n  nodes.set(id, node);\n  drawEdges();\n  return node;\n}\n\nfunction setNodeState(id, { active, done, failed, label }) {\n  const node = nodes.get(id);\n  if (!node) return;\n  if (active !== undefined) node.el.classList.toggle('active', active);\n  if (done !== undefined) node.el.classList.toggle('done', done);\n  if (failed) node.el.classList.add('failed');\n  if (label !== undefined) node.el.querySelector('.node-label').textContent = label;\n}\n\nfunction addEdge(from, to, cls = '') {\n  const key = `${from}->${to}`;\n  edges.set(key, { from, to, cls, active: true });\n  drawEdges();\n}\n\nfunction deactivateEdgesTo(to) {\n  for (const edge of edges.values()) if (edge.to === to) edge.active = false;\n  drawEdges();\n}\n\nfunction drawEdges() {\n  const canvasRect = flowCanvas.getBoundingClientRect();\n  flowSvg.innerHTML = '';\n  flowSvg.setAttribute('width', flowCanvas.scrollWidth);\n  flowSvg.setAttribute('height', flowCanvas.scrollHeight);\n  for (const edge of edges.values()) {\n    const a = nodes.get(edge.from);\n    const b = nodes.get(edge.to);\n    if (!a || !b) continue;\n    const ra = a.el.getBoundingClientRect();\n    const rb = b.el.getBoundingClientRect();\n    const x1 = ra.right - canvasRect.left + flowCanvas.scrollLeft;\n    const y1 = ra.top + ra.height / 2 - canvasRect.top + flowCanvas.scrollTop;\n    const x2 = rb.left - canvasRect.left + flowCanvas.scrollLeft;\n    const y2 = rb.top + rb.height / 2 - canvasRect.top + flowCanvas.scrollTop;\n    const mx = (x1 + x2) / 2;\n    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n    path.setAttribute('d', `M ${x1} ${y1} C ${mx} ${y1}, ${mx} ${y2}, ${x2} ${y2}`);\n    path.setAttribute('class', `edge ${edge.cls} ${edge.active ? 'active' : ''}`);\n    flowSvg.appendChild(path);\n  }\n}\nwindow.addEventListener('resize', drawEdges);\nflowCanvas.addEventListener('scroll', drawEdges);\n\nfunction ensureCoreNodes() {\n  makeNode('user', colCore, '🧑 Utilisateur');\n  makeNode('orchestrateur', colCore, '🎯 Orchestrateur');\n}\n\nfunction onAgentEvent({ agent, label, done }) {\n  ensureCoreNodes();\n  const isOrch = /orchestrateur/i.test(agent);\n  const id = isOrch ? 'orchestrateur' : `agent:${agent}`;\n  if (!isOrch) makeNode(id, colAgents, `🤖 ${agent}`, 'agent-node');\n  if (done) {\n    setNodeState(id, { active: false, done: true });\n    deactivateEdgesTo(id);\n    if (lastActiveAgentId === id) lastActiveAgentId = null;\n  } else {\n    setNodeState(id, { active: true, done: false, label: label || '' });\n    if (isOrch) {\n      addEdge('user', 'orchestrateur');\n    } else {\n      addEdge('orchestrateur', id, 'agent');\n      lastActiveAgentId = id;\n    }\n  }\n}\n\nfunction onToolStart({ id, server, tool }) {\n  ensureCoreNodes();\n  const nodeId = `tool:${server}/${tool}`;\n  makeNode(nodeId, colTools, `🔧 ${tool}`, '');\n  const node = nodes.get(nodeId);\n  node.el.querySelector('.node-label').textContent = server;\n  setNodeState(nodeId, { active: true, done: false });\n  addEdge(lastActiveAgentId || 'orchestrateur', nodeId);\n}\n\nfunction onToolEnd({ server, tool, ok }) {\n  const nodeId = `tool:${server}/${tool}`;\n  setNodeState(nodeId, { active: false, done: ok, failed: !ok });\n  deactivateEdgesTo(nodeId);\n}\n\nconst artifactGroups = new Map(); // nom d'agent -> conteneur de chips\n\nfunction artifactGroup(name) {\n  if (artifactGroups.has(name)) return artifactGroups.get(name);\n  if (artifactList.querySelector('.muted')) artifactList.innerHTML = '';\n  const group = document.createElement('div');\n  group.className = 'artifact-group';\n  group.innerHTML = `<div class=\"group-title\">${esc(name)}</div><div class=\"group-chips\"></div>`;\n  artifactList.appendChild(group);\n  const chips = group.querySelector('.group-chips');\n  artifactGroups.set(name, chips);\n  return chips;\n}\n\nconst ARTIFACT_ICONS = { ticket: '🎫', screenshot: '📸', file: '📄', url: '🔗' };\n\nfunction onArtifact({ kind, value, label, agent }) {\n  if (artifacts.has(value)) return;\n  artifacts.add(value);\n  const chip = document.createElement('span');\n  chip.className = `chip artifact-${kind}`;\n  chip.title = value;\n  const icon = ARTIFACT_ICONS[kind] || '📄';\n  const text = label || value.split('/').pop() || value;\n  if (kind === 'ticket' || kind === 'url') {\n    chip.innerHTML = `${icon} <a href=\"${esc(value)}\" target=\"_blank\" rel=\"noopener\">${esc(text)}</a>`;\n  } else {\n    chip.innerHTML = `${icon} <span class=\"file\">${esc(text)}</span>`;\n  }\n  artifactGroup(`🤖 ${agent || 'Orchestrateur'}`).appendChild(chip);\n}\n\nfunction finishAllNodes() {\n  for (const [id] of nodes) {\n    setNodeState(id, { active: false });\n  }\n  for (const edge of edges.values()) edge.active = false;\n  drawEdges();\n}\n\nfunction clearFlow() {\n  nodes.clear();\n  edges.clear();\n  artifacts.clear();\n  artifactGroups.clear();\n  claimChips.clear();\n  lastActiveAgentId = null;\n  colCore.querySelectorAll('.node').forEach((n) => n.remove());\n  colAgents.querySelectorAll('.node').forEach((n) => n.remove());\n  colTools.querySelectorAll('.node').forEach((n) => n.remove());\n  flowSvg.innerHTML = '';\n  artifactList.innerHTML = '<span class=\"muted\">rien pour l\\'instant</span>';\n}\ndocument.getElementById('btn-clear-flow').addEventListener('click', clearFlow);\n\n/* =========================== Onglet Agents =========================== */\nasync function loadAgents() {\n  const container = document.getElementById('agents-cards');\n  const agents = await (await fetch('/api/agents')).json();\n  container.innerHTML = '';\n  for (const agent of agents) {\n    const card = document.createElement('div');\n    card.className = 'card';\n    card.innerHTML = `\n      <h3>🤖 ${esc(agent.name)}</h3>\n      <div class=\"desc\">${esc(agent.description)}</div>\n      ${agent.model ? `<div class=\"row\"><span class=\"badge\">${esc(agent.model)}</span></div>` : ''}\n      <div class=\"row\">${(agent.tools || []).map((t) => `<span class=\"badge tool\">${esc(t)}</span>`).join('')}</div>\n      <div class=\"actions\"><button class=\"btn small\" data-file=\"${esc(agent.file)}\">Voir le contrat</button></div>`;\n    card.querySelector('button').addEventListener('click', async () => {\n      const full = await (await fetch(`/api/agents/${encodeURIComponent(agent.file)}`)).json();\n      document.getElementById('agent-dialog-title').textContent = full.name;\n      document.getElementById('agent-dialog-body').textContent = full.body;\n      document.getElementById('agent-dialog').showModal();\n    });\n    container.appendChild(card);\n  }\n}\ndocument.getElementById('agent-dialog-close').addEventListener('click', () => document.getElementById('agent-dialog').close());\n\n/* =========================== Onglet MCP =========================== */\nlet lastMcpJson = '';\nasync function loadMcp(force = true) {\n  const container = document.getElementById('mcp-cards');\n  const servers = await (await fetch('/api/mcp')).json();\n  const json = JSON.stringify(servers);\n  if (!force && json === lastMcpJson) return;\n  lastMcpJson = json;\n  container.innerHTML = '';\n  for (const server of servers) {\n    const card = document.createElement('div');\n    card.className = 'card';\n    const statusLabel = { running: 'démarré', stopped: 'arrêté', starting: 'démarrage…', error: 'erreur' }[server.status] || server.status;\n    card.innerHTML = `\n      <h3><span class=\"status-dot ${server.status}\"></span>${esc(server.name)}</h3>\n      <div class=\"desc\"><code>${esc(server.command)}</code></div>\n      <div class=\"row\"><span class=\"badge\">${statusLabel}</span><span class=\"badge tool\">${server.tools.length} outils</span></div>\n      ${server.error ? `<div class=\"err-text\">${esc(server.error)}</div>` : ''}\n      ${server.tools.length ? `<details><summary>outils exposés</summary><ul class=\"tool-list\">${server.tools.map((t) => `<li><strong>${esc(t.name)}</strong> — ${esc(t.description.slice(0, 90))}</li>`).join('')}</ul></details>` : ''}\n      <div class=\"actions\">\n        <button class=\"btn small primary\" data-action=\"start\" ${server.status === 'running' ? 'disabled' : ''}>Démarrer</button>\n        <button class=\"btn small danger\" data-action=\"stop\" ${server.status !== 'running' ? 'disabled' : ''}>Arrêter</button>\n        <button class=\"btn small\" data-action=\"restart\" ${server.status !== 'running' ? 'disabled' : ''}>Redémarrer</button>\n      </div>`;\n    card.querySelectorAll('button[data-action]').forEach((btn) =>\n      btn.addEventListener('click', async () => {\n        btn.disabled = true;\n        btn.textContent = '…';\n        await fetch(`/api/mcp/${encodeURIComponent(server.name)}/${btn.dataset.action}`, { method: 'POST' });\n        loadMcp();\n      })\n    );\n    container.appendChild(card);\n  }\n}\n\n/* =========================== Onglet Paramètres =========================== */\nconst PRESETS = {\n  github: { baseUrl: 'https://models.github.ai/inference', model: 'openai/gpt-4o' },\n  deepseek: { baseUrl: 'https://api.deepseek.com/v1', model: 'deepseek-chat' },\n  ollama: { baseUrl: 'http://localhost:11434/v1', model: 'llama3.1' },\n  lmstudio: { baseUrl: 'http://localhost:1234/v1', model: '' },\n  openai: { baseUrl: 'https://api.openai.com/v1', model: 'gpt-4o-mini' },\n  custom: { baseUrl: '', model: '' },\n};\n\nconst setPreset = document.getElementById('set-preset');\nconst setBaseUrl = document.getElementById('set-baseurl');\nconst setApiKey = document.getElementById('set-apikey');\nconst setModel = document.getElementById('set-model');\nconst setKeyState = document.getElementById('set-key-state');\nconst settingsStatus = document.getElementById('settings-status');\n\nsetPreset.addEventListener('change', () => {\n  const preset = PRESETS[setPreset.value];\n  if (preset && setPreset.value !== 'custom') {\n    setBaseUrl.value = preset.baseUrl;\n    if (preset.model) setModel.value = preset.model;\n  }\n});\n\nasync function loadSettings() {\n  const settings = await (await fetch('/api/settings')).json();\n  setPreset.value = settings.provider.preset || 'custom';\n  setBaseUrl.value = settings.provider.baseUrl || '';\n  setModel.value = settings.provider.model || '';\n  setApiKey.value = '';\n  setKeyState.textContent = settings.provider.hasApiKey ? '(une clé est enregistrée)' : '(aucune clé)';\n  document.getElementById('model-warning').hidden = Boolean(settings.provider.baseUrl && settings.provider.model);\n}\n\ndocument.getElementById('btn-save-settings').addEventListener('click', async () => {\n  settingsStatus.textContent = 'enregistrement…';\n  await fetch('/api/settings', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({\n      provider: {\n        preset: setPreset.value,\n        baseUrl: setBaseUrl.value.trim(),\n        apiKey: setApiKey.value.trim(),\n        model: setModel.value.trim(),\n      },\n    }),\n  });\n  settingsStatus.textContent = '✓ enregistré';\n  loadSettings();\n});\n\ndocument.getElementById('btn-test-settings').addEventListener('click', async () => {\n  settingsStatus.textContent = 'test en cours…';\n  const response = await fetch('/api/settings/test', { method: 'POST' });\n  const result = await response.json();\n  settingsStatus.textContent = result.ok ? '✓ connexion au modèle OK' : `✗ ${result.error}`;\n});\n\n/* =========================== Init =========================== */\nloadSettings();\n\n// Rafraîchit l'onglet MCP tant qu'il est visible (les serveurs peuvent être\n// auto-démarrés par le chat), sans reconstruire l'affichage si rien ne change.\nsetInterval(() => {\n  if (document.getElementById('panel-mcp').classList.contains('active')) loadMcp(false);\n}, 4000);\n"}}}}