From f95280788218613387348a1bd8d4c96af07f3e5f Mon Sep 17 00:00:00 2001
From: Blomios <blomios@gmail.com>
Date: Sun, 23 Aug 2026 11:00:04 +0200
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=C3=A9dition=20templates=20?=
 =?UTF-8?q?=E2=80=94=20nom=20d'agent=20par=20d=C3=A9faut,=20permissions=20?=
 =?UTF-8?q?syst=C3=A8me=20et=20MCP=20outils=20=E2=80=94=20#242?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

TemplateEditor/TemplatesPanel étendus aux nouveaux champs, projection
useTemplates/adapters/ports, panneau Agents aligné, templatePresentation.ts
extrait. Tests frontend étendus (templates, agents, routage chat WS).
---
 .../adapters/http/requestResponseGateways.ts  |  24 +-
 .../adapters/http/wsLiveClient.chat.test.ts   |   4 +-
 frontend/src/adapters/mock/index.ts           |  34 +-
 frontend/src/adapters/template.ts             |  17 +-
 frontend/src/domain/index.ts                  |   3 +
 frontend/src/features/agents/AgentsPanel.tsx  |  42 +-
 frontend/src/features/agents/agents.test.tsx  |  32 ++
 .../src/features/templates/TemplateEditor.tsx | 364 +++++++++++-------
 .../src/features/templates/TemplatesPanel.tsx |  60 ++-
 .../templates/templatePresentation.ts         |  53 +++
 .../src/features/templates/templates.test.tsx |  65 ++++
 .../src/features/templates/useTemplates.ts    |  10 +-
 frontend/src/ports/index.ts                   |  17 +-
 13 files changed, 551 insertions(+), 174 deletions(-)
 create mode 100644 frontend/src/features/templates/templatePresentation.ts

diff --git a/frontend/src/adapters/http/requestResponseGateways.ts b/frontend/src/adapters/http/requestResponseGateways.ts
index 71f38e76..aead477c 100644
--- a/frontend/src/adapters/http/requestResponseGateways.ts
+++ b/frontend/src/adapters/http/requestResponseGateways.ts
@@ -60,6 +60,7 @@ import type {
   CreateMemoryInput,
   CreateSkillInput,
   CreateTemplateInput,
+  UpdateTemplateInput,
   EmbedderGateway,
   GitGateway,
   InputGateway,
@@ -286,11 +287,28 @@ export class HttpTemplateGateway implements TemplateGateway {
   }
   createTemplate(input: CreateTemplateInput): Promise<Template> {
     return this.http.invoke<Template>("create_template", {
-      request: { name: input.name, content: input.content, defaultProfileId: input.defaultProfileId },
+      request: {
+        name: input.name,
+        content: input.content,
+        defaultProfileId: input.defaultProfileId,
+        defaultAgentName: input.defaultAgentName ?? null,
+        systemPermissions: input.systemPermissions ?? null,
+        mcpToolPermissions: input.mcpToolPermissions ?? null,
+      },
     });
   }
-  updateTemplate(templateId: string, content: string): Promise<Template> {
-    return this.http.invoke<Template>("update_template", { request: { templateId, content } });
+  updateTemplate(templateId: string, input: UpdateTemplateInput): Promise<Template> {
+    return this.http.invoke<Template>("update_template", {
+      request: {
+        templateId,
+        name: input.name,
+        content: input.content,
+        defaultProfileId: input.defaultProfileId,
+        defaultAgentName: input.defaultAgentName ?? null,
+        systemPermissions: input.systemPermissions ?? null,
+        mcpToolPermissions: input.mcpToolPermissions ?? null,
+      },
+    });
   }
   async deleteTemplate(templateId: string): Promise<void> {
     await this.http.invoke("delete_template", { templateId });
diff --git a/frontend/src/adapters/http/wsLiveClient.chat.test.ts b/frontend/src/adapters/http/wsLiveClient.chat.test.ts
index a26dfbbc..c7395f1d 100644
--- a/frontend/src/adapters/http/wsLiveClient.chat.test.ts
+++ b/frontend/src/adapters/http/wsLiveClient.chat.test.ts
@@ -137,9 +137,9 @@ describe("WsLiveClient structured chat routing", () => {
     expect(client.getConnectionState()).toBe("reconnecting");
     expect(client.needsReconnect()).toBe(true);
 
-    const fire = timerFn;
+    const fire = timerFn as unknown as () => void;
     timerFn = null;
-    fire?.();
+    fire();
     await vi.waitFor(() => expect(sockets.length).toBe(2));
     await vi.waitFor(() => expect(sockets[1].sent.length).toBeGreaterThan(0));
 
diff --git a/frontend/src/adapters/mock/index.ts b/frontend/src/adapters/mock/index.ts
index fde9fd9a..5993a742 100644
--- a/frontend/src/adapters/mock/index.ts
+++ b/frontend/src/adapters/mock/index.ts
@@ -118,6 +118,7 @@ import type {
   DeviceGateway,
   EmbedderGateway,
   CreateTemplateInput,
+  UpdateTemplateInput,
   Gateways,
   InputGateway,
   LiveAgent,
@@ -2230,12 +2231,18 @@ export class MockTemplateGateway implements TemplateGateway {
       contentMd: input.content,
       version: 1,
       defaultProfileId: input.defaultProfileId,
+      defaultAgentName: input.defaultAgentName ?? null,
+      systemPermissions: input.systemPermissions ?? null,
+      mcpToolPermissions: input.mcpToolPermissions ?? null,
     };
     this.templates.push(template);
     return structuredClone(template);
   }
 
-  async updateTemplate(templateId: string, content: string): Promise<Template> {
+  async updateTemplate(
+    templateId: string,
+    input: UpdateTemplateInput | string,
+  ): Promise<Template> {
     const idx = this.templates.findIndex((t) => t.id === templateId);
     if (idx === -1) {
       const err: GatewayError = {
@@ -2244,10 +2251,27 @@ export class MockTemplateGateway implements TemplateGateway {
       };
       throw err;
     }
+    const current = this.templates[idx];
+    const update =
+      typeof input === "string"
+        ? {
+            name: current.name,
+            content: input,
+            defaultProfileId: current.defaultProfileId,
+            defaultAgentName: current.defaultAgentName ?? null,
+            systemPermissions: current.systemPermissions ?? null,
+            mcpToolPermissions: current.mcpToolPermissions ?? null,
+          }
+        : input;
     this.templates[idx] = {
-      ...this.templates[idx],
-      contentMd: content,
-      version: this.templates[idx].version + 1,
+      ...current,
+      name: update.name,
+      contentMd: update.content,
+      defaultProfileId: update.defaultProfileId,
+      defaultAgentName: update.defaultAgentName ?? null,
+      systemPermissions: update.systemPermissions ?? null,
+      mcpToolPermissions: update.mcpToolPermissions ?? null,
+      version: current.version + 1,
     };
     return structuredClone(this.templates[idx]);
   }
@@ -2279,7 +2303,7 @@ export class MockTemplateGateway implements TemplateGateway {
     }
 
     const synchronized = opts?.synchronized ?? true;
-    const name = opts?.name ?? template.name;
+    const name = opts?.name ?? template.defaultAgentName ?? template.name;
     const slug = slugify(name) || "agent";
 
     // Derive unique contextPath (same logic as MockAgentGateway)
diff --git a/frontend/src/adapters/template.ts b/frontend/src/adapters/template.ts
index 189633f1..d73809db 100644
--- a/frontend/src/adapters/template.ts
+++ b/frontend/src/adapters/template.ts
@@ -13,7 +13,7 @@
 import { invoke } from "@tauri-apps/api/core";
 
 import type { Agent, AgentDrift, Template } from "@/domain";
-import type { CreateTemplateInput, TemplateGateway } from "@/ports";
+import type { CreateTemplateInput, TemplateGateway, UpdateTemplateInput } from "@/ports";
 
 export class TauriTemplateGateway implements TemplateGateway {
   listTemplates(): Promise<Template[]> {
@@ -26,13 +26,24 @@ export class TauriTemplateGateway implements TemplateGateway {
         name: input.name,
         content: input.content,
         defaultProfileId: input.defaultProfileId,
+        defaultAgentName: input.defaultAgentName ?? null,
+        systemPermissions: input.systemPermissions ?? null,
+        mcpToolPermissions: input.mcpToolPermissions ?? null,
       },
     });
   }
 
-  updateTemplate(templateId: string, content: string): Promise<Template> {
+  updateTemplate(templateId: string, input: UpdateTemplateInput): Promise<Template> {
     return invoke<Template>("update_template", {
-      request: { templateId, content },
+      request: {
+        templateId,
+        name: input.name,
+        content: input.content,
+        defaultProfileId: input.defaultProfileId,
+        defaultAgentName: input.defaultAgentName ?? null,
+        systemPermissions: input.systemPermissions ?? null,
+        mcpToolPermissions: input.mcpToolPermissions ?? null,
+      },
     });
   }
 
diff --git a/frontend/src/domain/index.ts b/frontend/src/domain/index.ts
index bfee93ef..5057612e 100644
--- a/frontend/src/domain/index.ts
+++ b/frontend/src/domain/index.ts
@@ -1500,6 +1500,9 @@ export interface Template {
   contentMd: string;
   version: number;
   defaultProfileId: string;
+  defaultAgentName?: string | null;
+  systemPermissions?: SystemPermissionSet | null;
+  mcpToolPermissions?: McpToolPolicy | null;
 }
 
 /**
diff --git a/frontend/src/features/agents/AgentsPanel.tsx b/frontend/src/features/agents/AgentsPanel.tsx
index 0e2613c4..7cad2a44 100644
--- a/frontend/src/features/agents/AgentsPanel.tsx
+++ b/frontend/src/features/agents/AgentsPanel.tsx
@@ -20,6 +20,7 @@ import { Button, Input, Panel, SmallDropdown, Spinner, cn } from "@/shared";
 import { TerminalView } from "@/features/terminals/TerminalView";
 import { AnnouncementsPreview } from "@/features/announcements";
 import { useDrift } from "@/features/templates/useDrift";
+import { templateProfileLabel } from "@/features/templates/templatePresentation";
 import { useGateways } from "@/app/di";
 import { useAgents } from "./useAgents";
 import { correlateModelServerStatus } from "./modelServerLaunch";
@@ -203,7 +204,11 @@ export function AgentsPanel({ projectId, projectRoot = "" }: AgentsPanelProps) {
     }
   }
 
-  const canCreate = newName.trim().length > 0 && !vm.busy;
+  const selectedTemplate = templates.find((t) => t.id === newTemplateId) ?? null;
+  const selectedTemplateMissingProfile =
+    selectedTemplate !== null && selectedTemplate.defaultProfileId.trim().length === 0;
+  const canCreate =
+    newName.trim().length > 0 && !vm.busy && !selectedTemplateMissingProfile;
 
   async function handleCreate(e: React.FormEvent) {
     e.preventDefault();
@@ -225,6 +230,14 @@ export function AgentsPanel({ projectId, projectRoot = "" }: AgentsPanelProps) {
     setNewTemplateId("");
   }
 
+  function handleTemplateChange(templateId: string) {
+    setNewTemplateId(templateId);
+    const next = templates.find((template) => template.id === templateId);
+    if (next?.defaultAgentName?.trim()) {
+      setNewName(next.defaultAgentName.trim());
+    }
+  }
+
   function handleLaunch(agentId: string) {
     setPanelNodeIds((prev) => ({
       ...prev,
@@ -238,10 +251,9 @@ export function AgentsPanel({ projectId, projectRoot = "" }: AgentsPanelProps) {
     setActiveAgentId(null);
   }
 
-  const selectedAgent = vm.agents.find((a) => a.id === vm.selectedAgentId) ?? null;
-
   // Determine if a template is chosen → profile selector is hidden (template imposes it).
   const hasTemplate = newTemplateId !== "";
+  const selectedAgent = vm.agents.find((a) => a.id === vm.selectedAgentId) ?? null;
 
   const profileLabel = (profile: AgentProfile): string => {
     const model =
@@ -297,7 +309,7 @@ export function AgentsPanel({ projectId, projectRoot = "" }: AgentsPanelProps) {
             id="agent-template-select"
             aria-label="agent template"
             value={newTemplateId}
-            onChange={setNewTemplateId}
+            onChange={handleTemplateChange}
             className="w-full"
             disabled={vm.busy}
             size="md"
@@ -306,6 +318,28 @@ export function AgentsPanel({ projectId, projectRoot = "" }: AgentsPanelProps) {
               ...templates.map((t) => ({ value: t.id, label: t.name })),
             ]}
           />
+          {selectedTemplate && (
+            <div className="rounded-md border border-border bg-raised px-3 py-2 text-xs text-muted">
+              <div>
+                Nom initial:{" "}
+                <span className="text-content">
+                  {selectedTemplate.defaultAgentName || selectedTemplate.name}
+                </span>
+              </div>
+              <div>
+                Modèle appliqué:{" "}
+                <span className="text-content">
+                  {templateProfileLabel(selectedTemplate, vm.profiles)}
+                </span>
+              </div>
+              {selectedTemplateMissingProfile && (
+                <p role="alert" className="mt-1 text-danger">
+                  Ce template n'a pas de modèle AI par défaut. Choisis un autre
+                  template ou édite-le avant de créer l'agent.
+                </p>
+              )}
+            </div>
+          )}
         </div>
 
         {/* Profile selector — hidden when a template is chosen */}
diff --git a/frontend/src/features/agents/agents.test.tsx b/frontend/src/features/agents/agents.test.tsx
index 4c68b227..ee40caf2 100644
--- a/frontend/src/features/agents/agents.test.tsx
+++ b/frontend/src/features/agents/agents.test.tsx
@@ -391,6 +391,38 @@ describe("AgentsPanel (with MockAgentGateway)", () => {
     await screen.findByText("From Template");
   });
 
+  it("selecting a template pre-fills its default agent name and applies its default profile", async () => {
+    const agent = new MockAgentGateway();
+    const tmpl = new MockTemplateGateway(agent);
+    const t = await tmpl.createTemplate({
+      name: "Main template",
+      content: "# ctx",
+      defaultProfileId: "profile-main",
+      defaultAgentName: "Main",
+    });
+    const createFromTemplateSpy = vi.spyOn(tmpl, "createAgentFromTemplate");
+
+    renderPanel(agent, new MockProfileGateway(), "/home/me/proj", tmpl);
+    await waitForIdle();
+
+    chooseDropdownOption("agent template", "Main template");
+    expect((screen.getByLabelText("agent name") as HTMLInputElement).value).toBe("Main");
+    expect(screen.getByText(/Modèle appliqué:/)).toBeTruthy();
+    expect(screen.getByText("Profil profile-main")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "create agent" }));
+
+    await waitFor(() => {
+      expect(createFromTemplateSpy).toHaveBeenCalledWith(PROJECT_ID, t.id, {
+        name: "Main",
+        synchronized: true,
+      });
+    });
+    const agents = await agent.listAgents(PROJECT_ID);
+    expect(agents[0].name).toBe("Main");
+    expect(agents[0].profileId).toBe("profile-main");
+  });
+
   it("shows profiles in the dropdown when profiles are configured", async () => {
     const profile = new MockProfileGateway();
     await profile.configureProfiles([
diff --git a/frontend/src/features/templates/TemplateEditor.tsx b/frontend/src/features/templates/TemplateEditor.tsx
index f969e71a..bd84a66f 100644
--- a/frontend/src/features/templates/TemplateEditor.tsx
+++ b/frontend/src/features/templates/TemplateEditor.tsx
@@ -1,41 +1,48 @@
-/**
- * `TemplateEditor` — a fullscreen overlay for creating or editing agent
- * templates (L7). Rendered on top of the rest of the UI (`fixed inset-0`).
- *
- * Provides:
- * - Name field and default-profile selector
- * - Two tabs: "Edit" (textarea) and "Preview" (react-markdown)
- * - Save (create/update) and Cancel/Close buttons
- *
- * Pure presentation: all mutations are delegated to the callbacks supplied by
- * the parent (`TemplatesPanel`). Styled with `@/shared`; no inline styles.
- */
-
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
-import type { AgentProfile, Template } from "@/domain";
+import type {
+  AgentProfile,
+  McpToolPolicy,
+  NetworkPolicy,
+  SystemPermissionSet,
+  Template,
+} from "@/domain";
+import { MCP_TOOL_GROUPS, mcpToolLabel } from "@/features/permissions/mcpToolGroups";
 import { Button, Input, SmallDropdown, cn } from "@/shared";
+import { profileLabel } from "./templatePresentation";
+
+export interface TemplateEditorSaveInput {
+  name: string;
+  content: string;
+  defaultProfileId: string;
+  defaultAgentName: string | null;
+  systemPermissions: SystemPermissionSet | null;
+  mcpToolPermissions: McpToolPolicy | null;
+}
 
 export interface TemplateEditorProps {
-  /**
-   * When set, the editor is in edit-mode for the given template; otherwise it
-   * is in create-mode (all fields start empty).
-   */
   template?: Template | null;
-  /** Available profiles for the default-profile selector. */
   profiles: AgentProfile[];
-  /** Called when the user submits the form. */
-  onSave: (name: string, content: string, defaultProfileId: string) => Promise<void>;
-  /** Called when the user cancels / closes the overlay. */
+  onSave: (input: TemplateEditorSaveInput) => Promise<void>;
   onClose: () => void;
-  /** Whether a save operation is in flight. */
   busy?: boolean;
 }
 
 type EditorTab = "edit" | "preview";
 
+const NETWORK_OPTIONS: { value: "" | NetworkPolicy; label: string }[] = [
+  { value: "", label: "Aucune permission système" },
+  { value: "ask", label: "Réseau sur demande" },
+  { value: "allow", label: "Réseau autorisé" },
+  { value: "deny", label: "Réseau refusé" },
+];
+
+const ALL_MCP_TOOLS = Array.from(
+  new Set(MCP_TOOL_GROUPS.flatMap((group) => group.tools)),
+);
+
 export function TemplateEditor({
   template,
   profiles,
@@ -45,17 +52,43 @@ export function TemplateEditor({
 }: TemplateEditorProps) {
   const [name, setName] = useState(template?.name ?? "");
   const [content, setContent] = useState(template?.contentMd ?? "");
+  const [defaultAgentName, setDefaultAgentName] = useState(
+    template?.defaultAgentName ?? "",
+  );
   const [defaultProfileId, setDefaultProfileId] = useState(
     template?.defaultProfileId ?? "",
   );
+  const [network, setNetwork] = useState<"" | NetworkPolicy>(
+    template?.systemPermissions?.network ?? "",
+  );
+  const [allowedTools, setAllowedTools] = useState<string[]>(
+    template?.mcpToolPermissions?.allowedTools ?? [],
+  );
   const [tab, setTab] = useState<EditorTab>("edit");
 
+  const allowed = useMemo(() => new Set(allowedTools), [allowedTools]);
   const canSave = name.trim().length > 0 && !busy;
 
+  function toggleTool(tool: string) {
+    setAllowedTools((prev) =>
+      prev.includes(tool)
+        ? prev.filter((candidate) => candidate !== tool)
+        : [...prev, tool],
+    );
+  }
+
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     if (!canSave) return;
-    await onSave(name.trim(), content, defaultProfileId);
+    await onSave({
+      name: name.trim(),
+      content,
+      defaultProfileId,
+      defaultAgentName: defaultAgentName.trim() || null,
+      systemPermissions: network ? { network } : null,
+      mcpToolPermissions:
+        allowedTools.length > 0 ? { allowedTools: [...allowedTools] } : null,
+    });
   }
 
   return (
@@ -65,7 +98,6 @@ export function TemplateEditor({
       aria-modal="true"
       aria-label="template editor"
     >
-      {/* ── Header bar ── */}
       <div className="flex shrink-0 items-center justify-between border-b border-border bg-surface px-4 py-3">
         <h2 className="text-sm font-semibold text-content">
           {template ? `Edit template — ${template.name}` : "New template"}
@@ -77,141 +109,201 @@ export function TemplateEditor({
           onClick={onClose}
           disabled={busy}
         >
-          ✕
+          x
         </Button>
       </div>
 
-      {/* ── Form body ── */}
       <form
         onSubmit={(e) => void handleSubmit(e)}
-        className="flex flex-1 flex-col gap-0 overflow-hidden"
+        className="flex min-h-0 flex-1 flex-col overflow-hidden"
       >
-        {/* ── Meta fields ── */}
-        <div className="flex shrink-0 flex-wrap items-end gap-3 border-b border-border px-4 py-3">
-          <div className="flex min-w-0 flex-1 flex-col gap-1">
-            <label
-              htmlFor="te-name"
-              className="text-xs font-medium text-muted"
-            >
-              Name
+        <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-auto px-4 py-3">
+          <div className="flex min-w-0 flex-col gap-1">
+            <label htmlFor="te-name" className="text-xs font-medium text-muted">
+              Nom du template
             </label>
             <Input
               id="te-name"
               aria-label="template name"
-              placeholder="My template"
+              placeholder="Template revue"
               value={name}
               onChange={(e) => setName(e.target.value)}
               disabled={busy}
-              className="min-w-48"
             />
           </div>
 
-          <div className="flex min-w-0 flex-1 flex-col gap-1">
-            <label
-              htmlFor="te-profile"
-              className="text-xs font-medium text-muted"
-            >
-              Default profile
-            </label>
-            {profiles.length > 0 ? (
+          <section className="flex min-h-64 flex-col overflow-hidden rounded-md border border-border bg-raised">
+            <div className="flex shrink-0 items-center justify-between border-b border-border px-3">
+              <label
+                htmlFor="te-content"
+                className="py-2 text-xs font-medium text-muted"
+              >
+                Description
+              </label>
+              <div role="tablist" aria-label="template content mode" className="flex">
+                {(["edit", "preview"] as EditorTab[]).map((t) => (
+                  <button
+                    key={t}
+                    type="button"
+                    role="tab"
+                    aria-label={t === "edit" ? "Edit" : "Preview"}
+                    aria-selected={tab === t}
+                    onClick={() => setTab(t)}
+                    className={cn(
+                      "px-3 py-2 text-xs font-medium transition-colors",
+                      tab === t
+                        ? "border-b-2 border-primary text-content"
+                        : "text-muted hover:text-content",
+                    )}
+                  >
+                    {t === "edit" ? "Edit" : "Preview"}
+                  </button>
+                ))}
+              </div>
+            </div>
+            {tab === "edit" ? (
+              <textarea
+                id="te-content"
+                aria-label="template content"
+                value={content}
+                onChange={(e) => setContent(e.target.value)}
+                disabled={busy}
+                className={cn(
+                  "min-h-60 flex-1 resize-none bg-raised px-3 py-2 font-mono text-sm text-content",
+                  "outline-none placeholder:text-faint disabled:cursor-not-allowed disabled:opacity-50",
+                )}
+                placeholder="# Instructions de l'agent"
+              />
+            ) : (
+              <div
+                className={cn(
+                  "min-h-60 flex-1 overflow-auto px-6 py-4",
+                  "prose prose-sm prose-invert max-w-none",
+                  "[&_h1]:text-content [&_h2]:text-content [&_h3]:text-content",
+                  "[&_p]:text-content/90 [&_li]:text-content/90",
+                  "[&_code]:rounded [&_code]:bg-canvas [&_code]:px-1 [&_code]:text-primary",
+                )}
+              >
+                {content.trim() ? (
+                  <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+                ) : (
+                  <p className="text-sm italic text-muted">Nothing to preview yet.</p>
+                )}
+              </div>
+            )}
+          </section>
+
+          <div className="grid gap-4 lg:grid-cols-2">
+            <div className="flex min-w-0 flex-col gap-1">
+              <label
+                htmlFor="te-default-agent"
+                className="text-xs font-medium text-muted"
+              >
+                Nom par défaut de l'agent
+              </label>
+              <Input
+                id="te-default-agent"
+                aria-label="template default agent name"
+                placeholder="Main"
+                value={defaultAgentName}
+                onChange={(e) => setDefaultAgentName(e.target.value)}
+                disabled={busy}
+              />
+            </div>
+
+            <div className="flex min-w-0 flex-col gap-1">
+              <label htmlFor="te-profile" className="text-xs font-medium text-muted">
+                Modèle AI par défaut
+              </label>
+              {profiles.length > 0 ? (
+                <SmallDropdown
+                  id="te-profile"
+                  aria-label="template default profile"
+                  value={defaultProfileId}
+                  onChange={setDefaultProfileId}
+                  disabled={busy}
+                  className="w-full"
+                  size="md"
+                  options={[
+                    { value: "", label: "Aucun modèle par défaut" },
+                    ...profiles.map((p) => ({ value: p.id, label: profileLabel(p) })),
+                  ]}
+                />
+              ) : (
+                <Input
+                  id="te-profile"
+                  aria-label="template default profile"
+                  placeholder="profile-id"
+                  value={defaultProfileId}
+                  onChange={(e) => setDefaultProfileId(e.target.value)}
+                  disabled={busy}
+                />
+              )}
+            </div>
+
+            <div className="flex min-w-0 flex-col gap-1">
+              <label htmlFor="te-system-network" className="text-xs font-medium text-muted">
+                Permissions système
+              </label>
               <SmallDropdown
-                id="te-profile"
-                aria-label="template default profile"
-                value={defaultProfileId}
-                onChange={setDefaultProfileId}
+                id="te-system-network"
+                aria-label="template system network permission"
+                value={network}
+                onChange={(value) => setNetwork(value as "" | NetworkPolicy)}
                 disabled={busy}
                 className="w-full"
                 size="md"
-                options={[
-                  { value: "", label: "— none —" },
-                  ...profiles.map((p) => ({ value: p.id, label: p.name })),
-                ]}
+                options={NETWORK_OPTIONS}
               />
-            ) : (
-              <Input
-                id="te-profile"
-                aria-label="template default profile"
-                placeholder="profile-id (optional)"
-                value={defaultProfileId}
-                onChange={(e) => setDefaultProfileId(e.target.value)}
-                disabled={busy}
-                className="min-w-48"
-              />
-            )}
-          </div>
-        </div>
-
-        {/* ── Tab strip ── */}
-        <div className="flex shrink-0 items-center gap-0 border-b border-border px-4">
-          {(["edit", "preview"] as EditorTab[]).map((t) => (
-            <button
-              key={t}
-              type="button"
-              role="tab"
-              aria-label={t === "edit" ? "Edit" : "Preview"}
-              aria-selected={tab === t}
-              onClick={() => setTab(t)}
-              className={cn(
-                "px-4 py-2 text-sm font-medium capitalize transition-colors",
-                tab === t
-                  ? "border-b-2 border-primary text-content"
-                  : "text-muted hover:text-content",
-              )}
-            >
-              {t === "edit" ? "Edit" : "Preview"}
-            </button>
-          ))}
-        </div>
-
-        {/* ── Edit / Preview pane ── */}
-        <div className="flex flex-1 flex-col overflow-hidden px-4 py-3">
-          {tab === "edit" ? (
-            <textarea
-              aria-label="template content"
-              value={content}
-              onChange={(e) => setContent(e.target.value)}
-              disabled={busy}
-              className={cn(
-                "flex-1 w-full rounded-md bg-raised px-3 py-2 text-sm text-content font-mono",
-                "border border-border outline-none transition-colors resize-none",
-                "focus:border-primary placeholder:text-faint",
-                "disabled:cursor-not-allowed disabled:opacity-50",
-              )}
-              placeholder="# Agent instructions&#10;&#10;..."
-            />
-          ) : (
-            <div
-              className={cn(
-                "flex-1 overflow-auto rounded-md border border-border bg-raised px-6 py-4",
-                "prose prose-sm prose-invert max-w-none",
-                "[&_h1]:text-content [&_h2]:text-content [&_h3]:text-content",
-                "[&_p]:text-content/90 [&_li]:text-content/90",
-                "[&_code]:bg-canvas [&_code]:text-primary [&_code]:rounded [&_code]:px-1",
-                "[&_pre]:bg-canvas [&_pre]:border [&_pre]:border-border [&_pre]:rounded-md",
-                "[&_a]:text-primary [&_a:hover]:underline",
-                "[&_blockquote]:border-l-2 [&_blockquote]:border-primary [&_blockquote]:text-muted",
-                "[&_hr]:border-border",
-              )}
-            >
-              {content.trim() ? (
-                <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                  {content}
-                </ReactMarkdown>
-              ) : (
-                <p className="text-sm text-muted italic">Nothing to preview yet.</p>
-              )}
             </div>
-          )}
+          </div>
+
+          <section className="flex flex-col gap-3 rounded-md border border-border bg-raised p-3">
+            <div className="flex items-center justify-between gap-3">
+              <h3 className="text-xs font-medium text-muted">
+                Permissions Tools MCP IdeA
+              </h3>
+              <span className="text-xs text-faint">{allowedTools.length} autorisé(s)</span>
+            </div>
+            {ALL_MCP_TOOLS.length === 0 ? (
+              <p className="text-sm text-muted">Aucun tool MCP IdeA disponible.</p>
+            ) : (
+              <>
+                {allowedTools.length === 0 && (
+                  <p className="text-sm text-muted">
+                    Aucun tool MCP IdeA autorisé.
+                  </p>
+                )}
+                <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+                  {MCP_TOOL_GROUPS.map((group) => (
+                    <div key={group.id} className="flex min-w-0 flex-col gap-2">
+                      <h4 className="text-xs font-semibold text-content">{group.label}</h4>
+                      {group.tools.map((tool) => (
+                        <label
+                          key={tool}
+                          className="flex min-w-0 items-center gap-2 text-sm text-content/90"
+                        >
+                          <input
+                            type="checkbox"
+                            aria-label={`template MCP tool ${tool}`}
+                            checked={allowed.has(tool)}
+                            onChange={() => toggleTool(tool)}
+                            disabled={busy}
+                            className="h-4 w-4 shrink-0 accent-primary"
+                          />
+                          <span className="truncate">{mcpToolLabel(tool)}</span>
+                        </label>
+                      ))}
+                    </div>
+                  ))}
+                </div>
+              </>
+            )}
+          </section>
         </div>
 
-        {/* ── Footer ── */}
         <div className="flex shrink-0 items-center justify-end gap-2 border-t border-border px-4 py-3">
-          <Button
-            type="button"
-            variant="ghost"
-            onClick={onClose}
-            disabled={busy}
-          >
+          <Button type="button" variant="ghost" onClick={onClose} disabled={busy}>
             Cancel
           </Button>
           <Button
diff --git a/frontend/src/features/templates/TemplatesPanel.tsx b/frontend/src/features/templates/TemplatesPanel.tsx
index 6a302fe1..384e177d 100644
--- a/frontend/src/features/templates/TemplatesPanel.tsx
+++ b/frontend/src/features/templates/TemplatesPanel.tsx
@@ -15,12 +15,17 @@
  * `TemplateEditor`; `create template` aria-label is on the submit button.
  */
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
-import type { Template } from "@/domain";
+import type { AgentProfile, Template } from "@/domain";
 import { Button, Panel, Spinner } from "@/shared";
 import { useGateways } from "@/app/di";
-import { TemplateEditor } from "./TemplateEditor";
+import { TemplateEditor, type TemplateEditorSaveInput } from "./TemplateEditor";
+import {
+  mcpPermissionsSummary,
+  systemPermissionsSummary,
+  templateProfileLabel,
+} from "./templatePresentation";
 import { useTemplates } from "./useTemplates";
 
 export interface TemplatesPanelProps {
@@ -38,12 +43,32 @@ export function TemplatesPanel({ projectId }: TemplatesPanelProps) {
   const { profile } = useGateways();
 
   // Profiles list for the editor's default-profile selector
-  const [profiles, setProfiles] = useState<import("@/domain").AgentProfile[]>([]);
+  const [profiles, setProfiles] = useState<AgentProfile[]>([]);
   const [profilesLoaded, setProfilesLoaded] = useState(false);
 
   const [editorState, setEditorState] = useState<EditorState | null>(null);
   const [editorBusy, setEditorBusy] = useState(false);
 
+  useEffect(() => {
+    if (profilesLoaded) return;
+    let cancelled = false;
+    void profile
+      .listProfiles()
+      .then((list) => {
+        if (!cancelled) setProfiles(list);
+      })
+      .catch(() => {
+        // Profiles are optional here; ids are still displayed when labels cannot
+        // be resolved locally.
+      })
+      .finally(() => {
+        if (!cancelled) setProfilesLoaded(true);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [profile, profilesLoaded]);
+
   /** Lazily load profiles when the editor is first opened. */
   async function openEditor(state: EditorState) {
     if (!profilesLoaded) {
@@ -58,20 +83,14 @@ export function TemplatesPanel({ projectId }: TemplatesPanelProps) {
     setEditorState(state);
   }
 
-  async function handleSave(
-    name: string,
-    content: string,
-    defaultProfileId: string,
-  ) {
+  async function handleSave(input: TemplateEditorSaveInput) {
     if (!editorState) return;
     setEditorBusy(true);
     try {
       if (editorState.mode === "create") {
-        await vm.createTemplate({ name, content, defaultProfileId });
+        await vm.createTemplate(input);
       } else {
-        // Update name isn't supported by the port (only content); if name
-        // changed we skip it gracefully — the current port only updates content.
-        await vm.updateTemplate(editorState.template.id, content);
+        await vm.updateTemplate(editorState.template.id, input);
       }
       setEditorState(null);
     } finally {
@@ -133,6 +152,16 @@ export function TemplatesPanel({ projectId }: TemplatesPanelProps) {
                     <div className="flex min-w-0 flex-col gap-0.5">
                       <span className="font-medium text-content">{t.name}</span>
                       <span className="text-xs text-muted">v{t.version}</span>
+                      <span className="text-xs text-muted">
+                        agent initial: {t.defaultAgentName || t.name}
+                      </span>
+                      <span className="text-xs text-muted">
+                        modèle: {templateProfileLabel(t, profiles)}
+                      </span>
+                      <span className="text-xs text-faint">
+                        {systemPermissionsSummary(t.systemPermissions)} ·{" "}
+                        {mcpPermissionsSummary(t.mcpToolPermissions)}
+                      </span>
                     </div>
 
                     <div className="flex items-center gap-1.5 shrink-0">
@@ -151,7 +180,10 @@ export function TemplatesPanel({ projectId }: TemplatesPanelProps) {
                         aria-label={`create agent from ${t.name}`}
                         disabled={vm.busy}
                         onClick={() =>
-                          void vm.createAgentFromTemplate(projectId, t.id)
+                          void vm.createAgentFromTemplate(projectId, t.id, {
+                            name: t.defaultAgentName?.trim() || undefined,
+                            synchronized: true,
+                          })
                         }
                       >
                         Create agent
diff --git a/frontend/src/features/templates/templatePresentation.ts b/frontend/src/features/templates/templatePresentation.ts
new file mode 100644
index 00000000..ebf243ca
--- /dev/null
+++ b/frontend/src/features/templates/templatePresentation.ts
@@ -0,0 +1,53 @@
+import type {
+  AgentProfile,
+  McpToolPolicy,
+  SystemPermissionSet,
+  Template,
+} from "@/domain";
+import { mcpToolLabel } from "@/features/permissions/mcpToolGroups";
+
+export function profileModel(profile: AgentProfile): string | null {
+  return (
+    profile.model ??
+    profile.opencode?.model ??
+    profile.opencodeProvider?.model ??
+    profile.chatHttp?.model ??
+    null
+  );
+}
+
+export function profileLabel(profile: AgentProfile): string {
+  const model = profileModel(profile);
+  return model ? `${profile.name} · ${model}` : profile.name;
+}
+
+export function templateProfileLabel(
+  template: Template,
+  profiles: AgentProfile[],
+): string {
+  const profile = profiles.find((candidate) => candidate.id === template.defaultProfileId);
+  if (profile) return profileLabel(profile);
+  return template.defaultProfileId
+    ? `Profil ${template.defaultProfileId}`
+    : "Aucun modèle par défaut";
+}
+
+export function systemPermissionsSummary(
+  permissions?: SystemPermissionSet | null,
+): string {
+  const network = permissions?.network;
+  if (!network) return "Système: aucune permission";
+  const labels: Record<NonNullable<SystemPermissionSet["network"]>, string> = {
+    allow: "réseau autorisé",
+    ask: "réseau sur demande",
+    deny: "réseau refusé",
+  };
+  return `Système: ${labels[network]}`;
+}
+
+export function mcpPermissionsSummary(policy?: McpToolPolicy | null): string {
+  const tools = policy?.allowedTools ?? [];
+  if (tools.length === 0) return "MCP: aucun tool autorisé";
+  if (tools.length <= 2) return `MCP: ${tools.map(mcpToolLabel).join(", ")}`;
+  return `MCP: ${tools.length} tools autorisés`;
+}
diff --git a/frontend/src/features/templates/templates.test.tsx b/frontend/src/features/templates/templates.test.tsx
index c0d4ab53..b35e5fc6 100644
--- a/frontend/src/features/templates/templates.test.tsx
+++ b/frontend/src/features/templates/templates.test.tsx
@@ -152,6 +152,45 @@ describe("TemplatesPanel (with MockTemplateGateway)", () => {
     expect(screen.getByText("v1")).toBeTruthy();
   });
 
+  it("creates a template with default agent name, model and permissions summaries", async () => {
+    const agent = new MockAgentGateway();
+    const tmpl = new MockTemplateGateway(agent);
+    renderTemplatesPanel({ agent, template: tmpl });
+    await waitForTemplatesIdle();
+
+    fireEvent.click(screen.getByRole("button", { name: "create template" }));
+    await waitFor(() => expect(screen.getByLabelText("template name")).toBeTruthy());
+    fireEvent.change(screen.getByLabelText("template name"), {
+      target: { value: "Main template" },
+    });
+    fireEvent.change(screen.getByLabelText("template content"), {
+      target: { value: "# Main instructions" },
+    });
+    fireEvent.change(screen.getByLabelText("template default agent name"), {
+      target: { value: "Main" },
+    });
+    fireEvent.change(screen.getByLabelText("template default profile"), {
+      target: { value: "profile-main" },
+    });
+    chooseDropdownOption("template system network permission", "Réseau autorisé");
+    fireEvent.click(screen.getByLabelText("template MCP tool idea_ticket_read"));
+    fireEvent.click(screen.getByRole("button", { name: "Save template" }));
+
+    await screen.findByText("Main template");
+    expect(screen.getByText("agent initial: Main")).toBeTruthy();
+    expect(screen.getByText("modèle: Profil profile-main")).toBeTruthy();
+    expect(screen.getByText(/Système: réseau autorisé/)).toBeTruthy();
+    expect(screen.getByText(/MCP: Lire un ticket/)).toBeTruthy();
+
+    const templates = await tmpl.listTemplates();
+    expect(templates[0]).toMatchObject({
+      defaultAgentName: "Main",
+      defaultProfileId: "profile-main",
+      systemPermissions: { network: "allow" },
+      mcpToolPermissions: { allowedTools: ["idea_ticket_read"] },
+    });
+  });
+
   it("the Create button is disabled when the name is empty", async () => {
     renderTemplatesPanel();
     await waitForTemplatesIdle();
@@ -234,6 +273,32 @@ describe("TemplatesPanel (with MockTemplateGateway)", () => {
     });
   });
 
+  it("creating an agent from a template applies the displayed default name and profile", async () => {
+    const agent = new MockAgentGateway();
+    const tmpl = new MockTemplateGateway(agent);
+    await tmpl.createTemplate({
+      name: "Worker template",
+      content: "## ctx",
+      defaultProfileId: "profile-worker",
+      defaultAgentName: "Worker",
+    });
+    renderTemplatesPanel({ agent, template: tmpl });
+
+    await screen.findByText("Worker template");
+    expect(screen.getByText("agent initial: Worker")).toBeTruthy();
+    expect(screen.getByText("modèle: Profil profile-worker")).toBeTruthy();
+    fireEvent.click(
+      screen.getByRole("button", { name: "create agent from Worker template" }),
+    );
+
+    await waitFor(async () => {
+      const agents = await agent.listAgents(PROJECT_ID);
+      expect(agents).toHaveLength(1);
+      expect(agents[0].name).toBe("Worker");
+      expect(agents[0].profileId).toBe("profile-worker");
+    });
+  });
+
   it("TemplateEditor: can switch Edit/Preview tabs and Save persists the template", async () => {
     const agent = new MockAgentGateway();
     const tmpl = new MockTemplateGateway(agent);
diff --git a/frontend/src/features/templates/useTemplates.ts b/frontend/src/features/templates/useTemplates.ts
index 5d036c39..6b368b56 100644
--- a/frontend/src/features/templates/useTemplates.ts
+++ b/frontend/src/features/templates/useTemplates.ts
@@ -9,7 +9,7 @@
 import { useCallback, useEffect, useState } from "react";
 
 import type { GatewayError, Template } from "@/domain";
-import type { CreateTemplateInput } from "@/ports";
+import type { CreateTemplateInput, UpdateTemplateInput } from "@/ports";
 import { useGateways } from "@/app/di";
 
 /** What the templates UI needs from this hook. */
@@ -24,8 +24,8 @@ export interface TemplatesViewModel {
   refresh: () => Promise<void>;
   /** Creates a new template and refreshes the list. */
   createTemplate: (input: CreateTemplateInput) => Promise<void>;
-  /** Updates the content of an existing template. */
-  updateTemplate: (templateId: string, content: string) => Promise<void>;
+  /** Updates an existing template. */
+  updateTemplate: (templateId: string, input: UpdateTemplateInput) => Promise<void>;
   /** Deletes a template by id. */
   deleteTemplate: (templateId: string) => Promise<void>;
   /** Creates an agent from a template in the given project. */
@@ -84,11 +84,11 @@ export function useTemplates(): TemplatesViewModel {
   );
 
   const updateTemplate = useCallback(
-    async (templateId: string, content: string) => {
+    async (templateId: string, input: UpdateTemplateInput) => {
       setBusy(true);
       setError(null);
       try {
-        const updated = await template.updateTemplate(templateId, content);
+        const updated = await template.updateTemplate(templateId, input);
         setTemplates((prev) =>
           prev.map((t) => (t.id === templateId ? updated : t)),
         );
diff --git a/frontend/src/ports/index.ts b/frontend/src/ports/index.ts
index 860ea2f3..4177553d 100644
--- a/frontend/src/ports/index.ts
+++ b/frontend/src/ports/index.ts
@@ -629,6 +629,19 @@ export interface CreateTemplateInput {
   name: string;
   content: string;
   defaultProfileId: string;
+  defaultAgentName?: string | null;
+  systemPermissions?: SystemPermissionSet | null;
+  mcpToolPermissions?: McpToolPolicy | null;
+}
+
+/** Input for {@link TemplateGateway.updateTemplate}. */
+export interface UpdateTemplateInput {
+  name: string;
+  content: string;
+  defaultProfileId: string;
+  defaultAgentName?: string | null;
+  systemPermissions?: SystemPermissionSet | null;
+  mcpToolPermissions?: McpToolPolicy | null;
 }
 
 /**
@@ -640,8 +653,8 @@ export interface TemplateGateway {
   listTemplates(): Promise<Template[]>;
   /** Creates a new template; returns the created template. */
   createTemplate(input: CreateTemplateInput): Promise<Template>;
-  /** Updates a template's content; increments its version; returns the updated template. */
-  updateTemplate(templateId: string, content: string): Promise<Template>;
+  /** Updates a template; increments its version; returns the updated template. */
+  updateTemplate(templateId: string, input: UpdateTemplateInput): Promise<Template>;
   /** Deletes a template by id. */
   deleteTemplate(templateId: string): Promise<void>;
   /**