feat(ui): édition templates — nom d'agent par défaut, permissions système et MCP outils — #242
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:
@ -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 ..."
|
||||
/>
|
||||
) : (
|
||||
<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
|
||||
|
||||
Reference in New Issue
Block a user