blomios/IdeA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): édition templates — nom d'agent par défaut, permissions système et MCP outils — #242

Browse Source 
TemplateEditor/TemplatesPanel étendus aux nouveaux champs, projection
useTemplates/adapters/ports, panneau Agents aligné, templatePresentation.ts
extrait. Tests frontend étendus (templates, agents, routage chat WS).
This commit is contained in:
Blomios
2026-08-23 11:00:04 +02:00
parent d6c80be56d
commit f952807882
13 changed files with 551 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/features/agents/AgentsPanel.tsx
View File

@ -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 */}

32
frontend/src/features/agents/agents.test.tsx
View File

@ -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([

364
frontend/src/features/templates/TemplateEditor.tsx
View File

@ -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

60
frontend/src/features/templates/TemplatesPanel.tsx
View File

@ -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

53
frontend/src/features/templates/templatePresentation.ts Normal file
View File

@ -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`;
}

65
frontend/src/features/templates/templates.test.tsx
View File

@ -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);

10
frontend/src/features/templates/useTemplates.ts
View File

@ -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)),
);