living-ai-documentation 2.1.0 → 2.3.0

package/dist/src/frontend/i18n/fr.json

@@ -29,12 +29,30 @@
   "nav.export_all_pdf": "Exporter tous les documents en PDF",
   "nav.new_folder": "Nouveau dossier",
   "nav.new_document": "Nouveau document",
+  "nav.ai_agents": "Agents IA",
   "nav.word_cloud": "☁ Nuage de mots",
   "nav.diagram": "◇ Diagramme",
   "nav.ai_context": "Contexte IA",
   "nav.files": "📁 Fichiers joints",
   "nav.admin": "⚙ Admin",
 
+  "agents.title": "Agents IA",
+  "agents.subtitle": "Lancer un agent configuré dans le workspace.",
+  "agents.empty": "Aucun agent workspace n'est encore configuré.",
+  "agents.ready": "Prêt",
+  "agents.requires_input": "Input requis",
+  "agents.not_ready": "Configuration incomplète",
+  "agents.no_provider": "Aucun provider LLM",
+  "agents.input_title": "Input agent",
+  "agents.input_hint": "Renseignez l'input nécessaire à cette exécution.",
+  "agents.run": "Lancer l'agent",
+  "agents.loading": "Exécution de l'agent…",
+  "agents.success": "Exécution terminée",
+  "agents.failure": "Échec de l'exécution",
+  "agents.open_document": "Ouvrir le document",
+  "agents.load_failed": "Impossible de charger les agents workspace.",
+  "agents.run_failed": "Échec de l'exécution de l'agent.",
+
   "files.title": "📁 Fichiers joints",
   "files.empty": "Aucun fichier — téléversez-en un depuis un document (trombone, glisser-déposer ou coller).",
   "files.replace": "Remplacer",
@@ -591,7 +609,26 @@
   "diagram.toolbar.shape_editor": "Éditeur de formes personnalisées",
   "diagram.toolbar.arrow": "Flèche (F)",
   "diagram.toolbar.delete": "Supprimer (Suppr)",
+  "diagram.toolbar.defaults": "Valeurs par défaut — configurer les tailles, couleurs et styles par défaut",
   "diagram.toolbar.align_guides": "Guides d'alignement — indique l'alignement entre formes du même type",
+  "diagram.defaults.title": "Valeurs par défaut",
+  "diagram.defaults.section.arrows": "Flèches",
+  "diagram.defaults.section.shapes": "Formes",
+  "diagram.defaults.field.direction": "Direction",
+  "diagram.defaults.field.style": "Style",
+  "diagram.defaults.field.font_size": "Taille police",
+  "diagram.defaults.field.width": "L",
+  "diagram.defaults.field.height": "H",
+  "diagram.defaults.field.color": "Couleur",
+  "diagram.defaults.style.solid": "Plein",
+  "diagram.defaults.style.dashed": "Pointillé",
+  "diagram.defaults.shape.box": "Rectangle",
+  "diagram.defaults.shape.ellipse": "Ellipse",
+  "diagram.defaults.shape.circle": "Cercle",
+  "diagram.defaults.shape.database": "Base de données",
+  "diagram.defaults.shape.actor": "Acteur",
+  "diagram.defaults.shape.postit": "Post-it",
+  "diagram.defaults.shape.text_free": "Texte libre",
   "diagram.toolbar.grid": "Grille / Magnétisme (G)",
   "diagram.toolbar.edge_style": "Basculer flèches courbes / droites",
   "diagram.toolbar.resize_corner": "Mode redimensionnement : coin fixe (cliquer pour centre fixe)",
@@ -609,6 +646,8 @@
   "diagram.sidebar.empty": "Aucun diagramme",
   "diagram.sidebar.delete_title": "Supprimer",
 
+  "diagram.node_panel.color": "Couleur de la forme",
+  "diagram.node_panel.save_as_default": "Enregistrer comme valeur par défaut pour ce type de forme",
   "diagram.node_panel.lock": "Verrouiller la sélection",
   "diagram.node_panel.unlock": "Déverrouiller la sélection",
   "diagram.node_panel.edit_label": "Modifier le texte (double-clic)",
@@ -648,6 +687,9 @@
   "diagram.link_panel.save_btn": "Enregistrer",
   "diagram.link_panel.remove_btn": "Retirer",
 
+  "diagram.edge_panel.font_size_value": "Taille de police",
+  "diagram.edge_panel.color": "Couleur de la flèche",
+  "diagram.edge_panel.save_as_default": "Enregistrer comme valeur par défaut pour les flèches",
   "diagram.edge_panel.lock": "Verrouiller la flèche",
   "diagram.edge_panel.unlock": "Déverrouiller la flèche",
   "diagram.edge_panel.no_arrow": "Trait simple",

package/dist/src/frontend/index.html

@@ -58,6 +58,7 @@
     <script defer src="/accuracy-gauge.js"></script>
     <script defer src="/validate.js"></script>
     <script defer src="/export.js"></script>
+    <script defer src="/agents.js"></script>
     <script defer src="/modals/diagram-link-modal.js"></script>
     <script defer src="/modals/new-folder-modal.js"></script>
     <script defer src="/modals/new-doc-modal.js"></script>
@@ -557,6 +558,16 @@
             Workspace
           </a>
 
+          <!-- AI Agents -->
+          <button
+            id="ai-agents-btn"
+            type="button"
+            data-i18n="nav.ai_agents"
+            class="h-[34px] px-3 rounded-[9px] border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-[13px] font-bold text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors inline-flex items-center"
+          >
+            Agents IA
+          </button>
+
           <!-- Word Cloud -->
           <button
             onclick="openWordCloud()"
@@ -3111,6 +3122,117 @@
       </div>
     </div>
 
+    <!-- ── AI agents launch modal ── -->
+    <div
+      id="ai-agents-modal"
+      class="hidden fixed inset-0 z-[55] bg-black/45 flex items-center justify-center p-4"
+      onclick="if(event.target===this)closeAiAgentsModal()"
+    >
+      <div
+        class="w-full max-w-4xl max-h-[82vh] bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-2xl flex flex-col overflow-hidden"
+        onclick="event.stopPropagation()"
+      >
+        <div class="px-5 py-4 border-b border-gray-200 dark:border-gray-800 flex items-start justify-between gap-4">
+          <div>
+            <h2 class="font-semibold text-base text-gray-900 dark:text-gray-100" data-i18n="agents.title">Agents IA</h2>
+            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1" data-i18n="agents.subtitle">
+              Launch a configured workspace agent.
+            </p>
+          </div>
+          <button
+            type="button"
+            onclick="closeAiAgentsModal()"
+            data-i18n-title="common.close"
+            class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 text-xl leading-none px-2"
+          >
+            &times;
+          </button>
+        </div>
+        <div id="ai-agents-grid" class="p-5 overflow-y-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+          <p class="text-sm text-gray-400" data-i18n="common.loading">Loading…</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- ── AI agent input modal ── -->
+    <div
+      id="ai-agent-input-modal"
+      class="hidden fixed inset-0 z-[56] bg-black/45 flex items-center justify-center p-4"
+      onclick="if(event.target===this)closeAiAgentInputModal()"
+    >
+      <div
+        class="w-full max-w-2xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-2xl flex flex-col overflow-hidden"
+        onclick="event.stopPropagation()"
+      >
+        <div class="px-5 py-4 border-b border-gray-200 dark:border-gray-800 flex items-start justify-between gap-4">
+          <div>
+            <h2 id="ai-agent-input-title" class="font-semibold text-base text-gray-900 dark:text-gray-100" data-i18n="agents.input_title">Agent input</h2>
+            <p id="ai-agent-input-hint" class="text-xs text-gray-500 dark:text-gray-400 mt-1" data-i18n="agents.input_hint">
+              Provide the input required for this run.
+            </p>
+          </div>
+          <button
+            type="button"
+            onclick="closeAiAgentInputModal()"
+            data-i18n-title="common.close"
+            class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 text-xl leading-none px-2"
+          >
+            &times;
+          </button>
+        </div>
+        <div class="p-5 flex flex-col gap-4">
+          <textarea
+            id="ai-agent-user-input"
+            rows="8"
+            class="w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-950 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500/25 focus:border-blue-500 resize-y"
+          ></textarea>
+          <div class="flex justify-end gap-3">
+            <button
+              type="button"
+              onclick="closeAiAgentInputModal()"
+              data-i18n="common.cancel"
+              class="text-sm px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+            >Cancel</button>
+            <button
+              id="ai-agent-input-run"
+              type="button"
+              data-i18n="agents.run"
+              class="text-sm px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold transition-colors"
+            >Run agent</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ── AI agent persistent toast ── -->
+    <div
+      id="ai-agent-toast"
+      class="hidden fixed right-5 bottom-5 z-[70] w-[min(420px,calc(100vw-2.5rem))] rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-2xl px-4 py-3"
+      role="status"
+    >
+      <div class="flex items-start gap-3">
+        <span id="ai-agent-toast-icon" class="mt-0.5 h-5 w-5 rounded-full border-2 border-blue-500 border-t-transparent animate-spin shrink-0"></span>
+        <div class="min-w-0 flex-1">
+          <p id="ai-agent-toast-title" class="text-sm font-semibold text-gray-900 dark:text-gray-100" data-i18n="agents.loading">Running agent…</p>
+          <p id="ai-agent-toast-message" class="text-xs text-gray-500 dark:text-gray-400 mt-1 break-words"></p>
+          <button
+            id="ai-agent-toast-open"
+            type="button"
+            data-i18n="agents.open_document"
+            class="hidden mt-3 text-xs px-3 py-1.5 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold transition-colors"
+          >Open document</button>
+        </div>
+        <button
+          id="ai-agent-toast-close"
+          type="button"
+          data-i18n-title="common.close"
+          class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 text-lg leading-none px-1 shrink-0"
+        >
+          &times;
+        </button>
+      </div>
+    </div>
+
     <!-- ── Generic confirmation modal (used by showConfirm) ── -->
     <div
       id="confirm-modal"

package/dist/src/frontend/workspace/app.js

@@ -51,9 +51,7 @@ const addButton = document.getElementById("addButton");
 const fitButton = document.getElementById("fitButton");
 const testNodeButton = document.getElementById("testNodeButton");
 const loadModelsButton = document.getElementById("loadModelsButton");
-const runAgentButton = document.getElementById("runAgentButton");
-const clearAgentButton = document.getElementById("clearAgentButton");
-const agentResponses = document.getElementById("agentResponses");
+const closePanelButton = document.getElementById("closePanelButton");
 const deleteNodeButton = document.getElementById("deleteNodeButton");
 const renameConfirmOverlay = document.getElementById("renameConfirmOverlay");
 const renameConfirmMessage = document.getElementById("renameConfirmMessage");
@@ -63,6 +61,14 @@ const deleteConfirmOverlay = document.getElementById("deleteConfirmOverlay");
 const deleteConfirmMessage = document.getElementById("deleteConfirmMessage");
 const cancelDeleteButton = document.getElementById("cancelDeleteButton");
 const confirmDeleteButton = document.getElementById("confirmDeleteButton");
+const agentRunOverlay = document.getElementById("agentRunOverlay");
+const agentRunTitle = document.getElementById("agentRunTitle");
+const agentRunHint = document.getElementById("agentRunHint");
+const agentRunInputField = document.getElementById("agentRunInputField");
+const agentRunInput = document.getElementById("agentRunInput");
+const agentRunResult = document.getElementById("agentRunResult");
+const cancelAgentRunButton = document.getElementById("cancelAgentRunButton");
+const executeAgentRunButton = document.getElementById("executeAgentRunButton");
 const fallbackPanelHost = document.getElementById("fallbackPanelHost");
 const configSurface = document.getElementById("configSurface");
 const form = configSurface;
@@ -72,6 +78,7 @@ const workspaceToastMessage = document.getElementById("workspaceToastMessage");
 let toastTimerId = null;
 let savedAgentLabel = null;
 let savedAgentFolder = null;
+let agentRunTargetId = null;
 const fields = {
     name: document.getElementById("nodeName"),
     kind: document.getElementById("nodeKind"),
@@ -87,7 +94,10 @@ const fields = {
     mcpInventory: document.getElementById("mcpInventory"),
     agentSection: document.getElementById("agentSection"),
     systemPrompt: document.getElementById("nodeSystemPrompt"),
-    userInput: document.getElementById("nodeUserInput"),
+    requiresUserInput: document.getElementById("nodeRequiresUserInput"),
+    userInputDescriptionField: document.getElementById("agentUserInputDescriptionField"),
+    userInputDescription: document.getElementById("nodeUserInputDescription"),
+    expectedOutputMarker: document.getElementById("nodeExpectedOutputMarker"),
 };
 const initialEntities = [
     createEntity("root", "Living AI Documentation", "system", null),
@@ -236,6 +246,9 @@ form.addEventListener("input", (event) => {
     }
     scheduleRender();
 });
+closePanelButton.addEventListener("click", () => {
+    selectEntity(null);
+});
 deleteNodeButton.addEventListener("click", (event) => {
     event.preventDefault();
     event.stopPropagation();
@@ -259,6 +272,11 @@ confirmDeleteButton.addEventListener("click", () => {
     closeDeleteConfirmation();
 });
 testNodeButton.addEventListener("click", () => {
+    const selected = selectedEntity();
+    if (selected?.kind === "agent") {
+        openAgentRunDialog();
+        return;
+    }
     void testSelectedLlmConnection();
 });
 loadModelsButton.addEventListener("click", () => {
@@ -269,13 +287,15 @@ fields.name.addEventListener("blur", () => {
     if (!selected || selected.kind !== "agent")
         return;
     const newName = fields.name.value.trim();
-    if (!newName || !savedAgentLabel || !savedAgentFolder || newName === savedAgentLabel)
+    if (!newName ||
+        !savedAgentLabel ||
+        !savedAgentFolder ||
+        newName === savedAgentLabel)
         return;
     const newFolder = workspaceFolderForProvider(newName);
     if (newFolder === savedAgentFolder)
         return; // slug identique, pas de renommage nécessaire
-    renameConfirmMessage.textContent =
-        `Renommer le dossier "${savedAgentFolder}" en "${newFolder}" ?`;
+    renameConfirmMessage.textContent = `Renommer le dossier "${savedAgentFolder}" en "${newFolder}" ?`;
     renameConfirmOverlay.hidden = false;
     cancelRenameButton.focus();
 });
@@ -310,12 +330,16 @@ fields.model.addEventListener("change", () => {
         selected.config.model = fields.model.value;
     }
 });
-runAgentButton.addEventListener("click", () => {
-    void runAgent();
+cancelAgentRunButton.addEventListener("click", () => {
+    closeAgentRunDialog();
 });
-clearAgentButton.addEventListener("click", () => {
-    agentResponses.innerHTML = "";
-    agentResponses.hidden = true;
+executeAgentRunButton.addEventListener("click", () => {
+    void executeAgentRunFromDialog();
+});
+agentRunOverlay.addEventListener("click", (event) => {
+    if (event.target === agentRunOverlay) {
+        closeAgentRunDialog();
+    }
 });
 void initializeWorkspace();
 function isolatePanelEvents() {
@@ -328,6 +352,7 @@ function isolateConfirmEvents() {
     for (const type of PANEL_EVENT_TYPES) {
         deleteConfirmOverlay.addEventListener(type, stopPanelEventPropagation);
         renameConfirmOverlay.addEventListener(type, stopPanelEventPropagation);
+        agentRunOverlay.addEventListener(type, stopPanelEventPropagation);
     }
 }
 function stopPanelEventPropagation(event) {
@@ -419,6 +444,9 @@ function hydrateEntity(input) {
             workspaceFolder: stringValue(config.workspaceFolder) ||
                 (kind === "agent" ? workspaceFolderForProvider(label) : ""),
             systemPrompt: stringValue(config.systemPrompt),
+            requiresUserInput: config.requiresUserInput === true,
+            userInputDescription: stringValue(config.userInputDescription),
+            expectedOutputMarker: stringValue(config.expectedOutputMarker),
         },
     };
 }
@@ -535,6 +563,9 @@ function createEntity(id, label, kind, parentId) {
             description: defaultDescription(kind),
             workspaceFolder: kind === "agent" ? workspaceFolderForProvider(label) : "",
             systemPrompt: "",
+            requiresUserInput: false,
+            userInputDescription: "",
+            expectedOutputMarker: "",
         },
     };
 }
@@ -546,7 +577,7 @@ function cloneEntities(entities) {
 }
 function defaultEndpoint(id, kind) {
     if (kind === "llm") {
-        return "http://localhost:1234/v1";
+        return "http://localhost:11434";
     }
     if (kind === "mcp") {
         return "http://localhost:4321/mcp";
@@ -769,7 +800,11 @@ function selectEntity(id) {
     state.selectedId = id;
     const entity = id ? entityById(id) : null;
     savedAgentLabel = entity?.kind === "agent" ? entity.label : null;
-    savedAgentFolder = entity?.kind === "agent" ? (entity.config.workspaceFolder || workspaceFolderForProvider(entity.label)) : null;
+    savedAgentFolder =
+        entity?.kind === "agent"
+            ? entity.config.workspaceFolder ||
+                workspaceFolderForProvider(entity.label)
+            : null;
     layoutGraph();
     syncCameraForPanelChange(hadSelection, Boolean(id), true);
     syncPanelFromSelection();
@@ -813,6 +848,7 @@ function syncPanelFromSelection() {
     fallbackPanelHost.hidden = !hasSelection || supportsHtmlInCanvas;
     if (!selected) {
         addButton.title = "Add LLM provider";
+        testNodeButton.textContent = "Test";
         testNodeButton.hidden = true;
         testNodeButton.disabled = true;
         return;
@@ -828,14 +864,22 @@ function syncPanelFromSelection() {
     fields.description.value = selected.config.description;
     fields.typeBadge.textContent = labelForBadge(selected.kind);
     fields.kind.disabled = true;
-    fields.llmFields.hidden = selected.kind === "mcp" || selected.kind === "agent";
+    fields.llmFields.hidden =
+        selected.kind === "mcp" || selected.kind === "agent";
     fields.mcpInventory.hidden = selected.kind !== "mcp";
     fields.agentSection.hidden = selected.kind !== "agent";
     fields.systemPrompt.value = selected.config.systemPrompt;
+    fields.requiresUserInput.checked = selected.config.requiresUserInput;
+    syncUserInputDescriptionVisibility();
+    fields.userInputDescription.value = selected.config.userInputDescription;
+    fields.expectedOutputMarker.value = selected.config.expectedOutputMarker;
     deleteNodeButton.hidden = isProtectedEntity(selected.id);
-    deleteNodeButton.disabled = isProtectedEntity(selected.id);
-    testNodeButton.hidden = selected.kind !== "llm";
-    testNodeButton.disabled = selected.kind !== "llm" || !selected.config.model;
+    testNodeButton.textContent = "Test";
+    testNodeButton.hidden = selected.kind !== "llm" && selected.kind !== "agent";
+    testNodeButton.disabled =
+        selected.kind === "llm"
+            ? !selected.config.model
+            : selected.kind !== "agent";
     addButton.title =
         selected.kind === "llm" || entityById(selected.parentId)?.kind === "llm"
             ? "Add agent"
@@ -854,7 +898,25 @@ function syncSelectedFromForm() {
     selected.config.timeout = Number(fields.timeout.value || 30);
     selected.config.description = fields.description.value;
     selected.config.systemPrompt = fields.systemPrompt.value;
+    selected.config.requiresUserInput = fields.requiresUserInput.checked;
+    selected.config.userInputDescription = fields.userInputDescription.value;
+    selected.config.expectedOutputMarker = fields.expectedOutputMarker.value;
+    syncUserInputDescriptionVisibility();
     fields.typeBadge.textContent = labelForBadge(selected.kind);
+    // Propagate model + timeout to child agents
+    if (selected.kind === "llm") {
+        for (const entity of state.entities) {
+            if (entity.parentId === selected.id && entity.kind === "agent") {
+                entity.config.model = selected.config.model;
+                entity.config.timeout = selected.config.timeout;
+            }
+        }
+    }
+}
+function syncUserInputDescriptionVisibility() {
+    const shouldShow = selectedEntity()?.kind === "agent" && fields.requiresUserInput.checked;
+    fields.userInputDescriptionField.hidden = !shouldShow;
+    fields.userInputDescription.required = shouldShow;
 }
 function restoreModelSelect(savedModel) {
     const existing = Array.from(fields.model.options).map((o) => o.value);
@@ -867,7 +929,7 @@ function restoreModelSelect(savedModel) {
     }
     fields.model.value = savedModel || (existing[0] ?? "");
 }
-async function runAgent() {
+function openAgentRunDialog() {
     const selected = selectedEntity();
     if (!selected || selected.kind !== "agent")
         return;
@@ -885,38 +947,80 @@ async function runAgent() {
         showSaveToast("Write a system prompt first.", "error");
         return;
     }
-    runAgentButton.disabled = true;
-    showLoadingToast("Running agent…");
+    if (selected.config.requiresUserInput &&
+        !selected.config.userInputDescription.trim()) {
+        showSaveToast("Describe the required user input first.", "error");
+        return;
+    }
+    agentRunTargetId = selected.id;
+    agentRunTitle.textContent = `Test ${selected.label}`;
+    agentRunHint.textContent = selected.config.requiresUserInput
+        ? selected.config.userInputDescription
+        : "Run this agent with its configured system prompt.";
+    agentRunInputField.hidden = !selected.config.requiresUserInput;
+    agentRunInput.required = selected.config.requiresUserInput;
+    agentRunInput.value = "";
+    agentRunResult.hidden = true;
+    agentRunResult.textContent = "";
+    executeAgentRunButton.disabled = false;
+    executeAgentRunButton.textContent = "Run";
+    agentRunOverlay.hidden = false;
+    if (selected.config.requiresUserInput) {
+        window.setTimeout(() => agentRunInput.focus(), 0);
+    }
+    else {
+        window.setTimeout(() => executeAgentRunButton.focus(), 0);
+    }
+}
+function closeAgentRunDialog() {
+    agentRunOverlay.hidden = true;
+    agentRunTargetId = null;
+}
+async function executeAgentRunFromDialog() {
+    if (agentRunInput.required && !agentRunInput.value.trim()) {
+        agentRunInput.reportValidity();
+        return;
+    }
+    const selected = agentRunTargetId ? entityById(agentRunTargetId) : null;
+    if (!selected || selected.kind !== "agent") {
+        showAgentRunResult("error", "The selected agent is no longer available.");
+        return;
+    }
+    const llm = entityById(selected.parentId ?? "");
+    if (!llm || llm.kind !== "llm") {
+        showAgentRunResult("error", "No parent LLM found for this agent.");
+        return;
+    }
+    executeAgentRunButton.disabled = true;
+    executeAgentRunButton.textContent = "Running…";
+    showAgentRunResult("loading", "Running agent…");
     const mcpEntity = state.entities.find((e) => e.kind === "mcp");
     const result = await runAgentPrompt({
         endpoint: llm.config.endpoint,
         token: llm.config.token,
         model: llm.config.model,
         systemPrompt: selected.config.systemPrompt,
-        userInput: fields.userInput.value.trim() || undefined,
+        userInput: agentRunInput.value.trim() || undefined,
         timeout: llm.config.timeout,
         mcpEndpoint: mcpEntity?.config.endpoint || undefined,
+        expectedOutputMarker: selected.config.expectedOutputMarker || undefined,
     });
-    runAgentButton.disabled = false;
+    executeAgentRunButton.disabled = false;
+    executeAgentRunButton.textContent = "Run";
     if (result.ok && result.content) {
-        agentResponses.hidden = false;
-        const item = document.createElement("div");
-        item.className = "agent-response-item";
-        const meta = document.createElement("div");
-        meta.className = "agent-response-meta";
-        meta.textContent = new Date().toLocaleTimeString();
-        const content = document.createElement("div");
-        content.textContent = result.content;
-        item.appendChild(meta);
-        item.appendChild(content);
-        agentResponses.appendChild(item);
-        agentResponses.scrollTop = agentResponses.scrollHeight;
+        showAgentRunResult("success", result.content);
         showSaveToast("Agent responded.", "success");
     }
     else {
+        showAgentRunResult("error", result.error ?? "Agent failed.");
         showSaveToast(result.error ?? "Agent failed.", "error");
     }
 }
+function showAgentRunResult(state, message) {
+    agentRunResult.hidden = false;
+    agentRunResult.dataset.state = state;
+    agentRunResult.textContent = message;
+}
 async function loadModelsForSelect() {
     const selected = selectedEntity();
     if (!selected || selected.kind !== "llm")
@@ -930,7 +1034,10 @@ async function loadModelsForSelect() {
     loadModelsButton.classList.add("loading");
     loadModelsButton.disabled = true;
     fields.model.disabled = true;
-    const result = await listLlmModels({ endpoint, token: selected.config.token });
+    const result = await listLlmModels({
+        endpoint,
+        token: selected.config.token,
+    });
     loadModelsButton.classList.remove("loading");
     loadModelsButton.disabled = false;
     fields.model.disabled = false;