@hgdc/docs 0.2.0 → 0.4.0

package/src/core/validate.ts

@@ -0,0 +1,276 @@
+import { compile } from "@mdx-js/mdx"
+import type { Root } from "mdast"
+import remarkGfm from "remark-gfm"
+import { parse as parseYaml } from "yaml"
+
+import { isMdxComponent } from "./components.ts"
+import { parseDocsConfig } from "./config.ts"
+import { missingPages, normalizeNavigation, pageToSlug } from "./navigation.ts"
+
+/**
+ * Ce que le build refuserait, vérifié avant de publier : l'éditeur de la console bloque
+ * la publication sur la moindre erreur, avec la ligne à corriger. Même compilateur MDX
+ * que le build (`@mdx-js/mdx`, GFM), même schéma de `docs.json`, même règle de pages.
+ */
+export type Problem = { file: string; line: number | null; column: number | null; message: string }
+
+/** Une page de la doc : `.mdx` ou `.md` à l'intérieur du dossier. */
+export const PAGE_FILE = /\.(mdx|md)$/i
+
+const IMAGE_FILE = /\.(png|jpe?g|gif|svg|webp|avif|ico)$/i
+
+/**
+ * Fichier que l'éditeur peut écrire, relatif au dossier de la doc : `docs.json`, pages et
+ * images. Jamais un dossier caché ni la configuration du build (même règle que Host,
+ * `isEditablePath` d'agenthost, qui revérifie).
+ */
+export function isDocFile(path: string): boolean {
+  if (path.length === 0 || path.length > 300) return false
+  if (path.startsWith("/") || path.endsWith("/") || path.includes("\\")) return false
+  const segments = path.split("/")
+  if (segments.some((s) => s === "" || s === "." || s === ".." || s.startsWith("."))) return false
+  if (segments.includes("node_modules") || segments[0] === "dist") return false
+  if (!/^[\p{L}\p{N} ._/()+@-]+$/u.test(path)) return false
+  return path === "docs.json" || PAGE_FILE.test(path) || IMAGE_FILE.test(path)
+}
+
+export function isImageFile(path: string): boolean {
+  return IMAGE_FILE.test(path)
+}
+
+/** Fichiers Markdown du dossier qui ne sont pas des pages (`template/src/content.config.ts`). */
+const NOT_PAGES = new Set(["README.md", "CHANGELOG.md"])
+
+/**
+ * Une page du site : `.mdx` ou `.md`, sauf un extrait (`_nom.mdx`, inclus par d'autres pages)
+ * et le README ou le CHANGELOG à la racine, que le build ignore.
+ */
+export function isPageFile(file: string): boolean {
+  return PAGE_FILE.test(file) && !NOT_PAGES.has(file) && !(file.split("/").at(-1) ?? "").startsWith("_")
+}
+
+/** `guides/publier.mdx` → `guides/publier` : le chemin de page de `docs.json` ; `null` pour un autre fichier. */
+export function pageOfFile(file: string): string | null {
+  return isPageFile(file) ? file.replace(PAGE_FILE, "") : null
+}
+
+const FRONTMATTER = /^---\r?\n([\s\S]*?)\r?\n?---[ \t]*(?:\r?\n|$)/
+
+export type Frontmatter = { raw: string | null; body: string; lines: number }
+
+/** En-tête YAML d'une page et corps, avec le nombre de lignes de l'en-tête (pour garder les numéros de ligne). */
+export function splitFrontmatter(source: string): Frontmatter {
+  const match = FRONTMATTER.exec(source)
+  if (!match) return { raw: null, body: source, lines: 0 }
+  const header = match[0]
+  const lines = header.split("\n").length - (header.endsWith("\n") ? 1 : 0)
+  return { raw: match[1] ?? "", body: source.slice(header.length), lines }
+}
+
+/** Lit l'en-tête d'une page : objet YAML, ou `null` s'il manque ou ne se lit pas. */
+export function readFrontmatter(source: string): Record<string, unknown> | null {
+  const { raw } = splitFrontmatter(source)
+  if (raw === null) return null
+  try {
+    const data: unknown = parseYaml(raw)
+    return data && typeof data === "object" && !Array.isArray(data) ? (data as Record<string, unknown>) : null
+  } catch {
+    return null
+  }
+}
+
+type Position = { start?: { line?: number; column?: number } }
+type MdxNode = { type: string; name?: string | null; position?: Position; children?: Array<MdxNode> }
+
+/** Composants appelés par la page sans exister : le build échouerait au rendu. */
+function unknownComponents(problems: Array<Problem>, file: string) {
+  return () => (tree: Root) => {
+    const declared = new Set<string>()
+    const walk = (node: MdxNode) => {
+      if (node.type === "mdxjsEsm") {
+        const value = (node as unknown as { value: string }).value
+        for (const match of value.matchAll(/import\s+(?:\{([^}]*)\}|([A-Za-z_$][\w$]*))/g)) {
+          for (const name of (match[1] ?? match[2] ?? "").split(","))
+            declared.add(
+              name
+                .split(/\s+as\s+/)
+                .pop()!
+                .trim(),
+            )
+        }
+        for (const match of value.matchAll(/export\s+(?:const|function)\s+([A-Za-z_$][\w$]*)/g)) declared.add(match[1]!)
+      }
+      for (const child of node.children ?? []) walk(child)
+    }
+    walk(tree as unknown as MdxNode)
+    const check = (node: MdxNode) => {
+      if ((node.type === "mdxJsxFlowElement" || node.type === "mdxJsxTextElement") && node.name) {
+        const root = node.name.split(".")[0]!
+        if (/^[A-Z]/.test(root) && !isMdxComponent(root) && !declared.has(root))
+          problems.push({
+            file,
+            line: node.position?.start?.line ?? null,
+            column: node.position?.start?.column ?? null,
+            message: `Le composant <${node.name}> n'existe pas. Composants disponibles : <Note>, <Tip>, <Card>, <Steps>…`,
+          })
+      }
+      for (const child of node.children ?? []) check(child)
+    }
+    check(tree as unknown as MdxNode)
+  }
+}
+
+const TRANSLATIONS: Array<[RegExp, (m: RegExpMatchArray) => string]> = [
+  [/Expected a closing tag for `<([^>]+)>`/, (m) => `La balise <${m[1]}> n'est jamais fermée.`],
+  [
+    /Unexpected closing slash `\/` in tag, expected an open tag first/,
+    () => "Balise fermante sans balise ouvrante correspondante.",
+  ],
+  [
+    /Unexpected closing tag `<\/([^>]+)>`, expected corresponding closing tag for `<([^>]+)>`/,
+    (m) => `</${m[1]}> ferme la mauvaise balise : <${m[2]}> est encore ouverte.`,
+  ],
+  [
+    /Expected the closing tag `<\/([^>]+)>` either after the end of/,
+    (m) =>
+      `</${m[1]}> est mal placée : ouvre et ferme <${m[1]}> sur leurs propres lignes, ou sur la même ligne que le texte.`,
+  ],
+  [
+    /Could not parse expression with acorn/,
+    () => "Expression entre accolades illisible : échappe « { » par « \\{ » si c'est du texte.",
+  ],
+  [/Could not parse import\/exports with acorn/, () => "Ligne import ou export illisible."],
+  [
+    /Unexpected end of file in expression, expected a corresponding closing brace for `\{`/,
+    () => "Accolade « { » jamais fermée : échappe-la par « \\{ » si c'est du texte.",
+  ],
+  [
+    /Unexpected character `(.)` \(U\+[0-9A-F]+\) before name/,
+    (m) => `Caractère « ${m[1]} » inattendu après « < » : écris « &lt; » pour un chevron dans le texte.`,
+  ],
+  [/Unexpected lazy line in/, () => "Ligne mal indentée à l'intérieur d'un bloc (citation, liste ou composant)."],
+]
+
+function translate(reason: string): string {
+  for (const [pattern, render] of TRANSLATIONS) {
+    const match = reason.match(pattern)
+    if (match) return render(match)
+  }
+  return `Syntaxe MDX invalide : ${reason}`
+}
+
+type Point = { line?: number; column?: number }
+type VFileMessageLike = {
+  reason?: string
+  message?: string
+  line?: number | null
+  column?: number | null
+  place?: (Point & { start?: Point }) | null
+}
+
+/** Position d'une erreur de MDX : son point, sinon celui cité dans le message (`(7:1-7:7)`). */
+function positionOf(failure: VFileMessageLike, reason: string): { line: number | null; column: number | null } {
+  const point = failure.place?.start ?? failure.place
+  if (failure.line) return { line: failure.line, column: failure.column ?? null }
+  if (point?.line) return { line: point.line, column: point.column ?? null }
+  const cited = reason.match(/\((\d+):(\d+)/)
+  return cited ? { line: Number(cited[1]), column: Number(cited[2]) } : { line: null, column: null }
+}
+
+/** En-tête lu ; `undefined` (et une erreur notée) s'il ne se lit pas. */
+function checkYaml(problems: Array<Problem>, file: string, raw: string): unknown {
+  try {
+    return parseYaml(raw)
+  } catch (error) {
+    const position = (error as { linePos?: Array<{ line: number; col: number }> }).linePos?.[0]
+    problems.push({
+      file,
+      line: position ? position.line + 1 : 1,
+      column: position?.col ?? null,
+      message: "En-tête illisible : vérifie les deux-points et les guillemets (YAML).",
+    })
+    return undefined
+  }
+}
+
+/**
+ * Vérifie une page : en-tête YAML avec un `title` (Starlight l'exige), compilation MDX
+ * comme au build, composants connus. Les numéros de ligne sont ceux du fichier entier.
+ */
+export async function checkPage(file: string, source: string): Promise<Array<Problem>> {
+  const problems: Array<Problem> = []
+  const front = splitFrontmatter(source)
+  // Un extrait ou le README n'est pas une page : seule la syntaxe compte, pas l'en-tête.
+  if (!isPageFile(file)) {
+    if (front.raw !== null) checkYaml(problems, file, front.raw)
+  } else if (front.raw === null) {
+    problems.push({
+      file,
+      line: 1,
+      column: 1,
+      message: "Il manque l'en-tête de la page : commence par ---, title: Le titre, puis ---.",
+    })
+  } else {
+    const data = checkYaml(problems, file, front.raw)
+    const title = data && typeof data === "object" ? (data as Record<string, unknown>).title : undefined
+    if (data !== undefined && (typeof title !== "string" || !title.trim()))
+      problems.push({
+        file,
+        line: 2,
+        column: 1,
+        message: "L'en-tête doit donner un titre : title: Le titre de la page.",
+      })
+  }
+
+  // Les lignes de l'en-tête restent, vides : les positions de MDX tombent sur la bonne ligne.
+  const body = "\n".repeat(front.lines) + front.body
+  try {
+    await compile(body, {
+      format: file.toLowerCase().endsWith(".md") ? "md" : "mdx",
+      remarkPlugins: [remarkGfm, unknownComponents(problems, file)],
+    })
+  } catch (error) {
+    const failure = error as VFileMessageLike
+    const reason = String(failure.reason ?? failure.message ?? error)
+    problems.push({ file, ...positionOf(failure, reason), message: translate(reason) })
+  }
+  return problems.sort((a, b) => (a.line ?? 0) - (b.line ?? 0))
+}
+
+/**
+ * Vérifie `docs.json` et sa navigation contre les fichiers de la doc : schéma, une seule
+ * forme de navigation, et chaque page citée présente dans le dossier.
+ */
+export function checkSite(docsJson: string, files: Iterable<string>): Array<Problem> {
+  const parsed = parseDocsConfig(docsJson)
+  if (!parsed.ok) return parsed.errors.map((message) => ({ file: "docs.json", line: null, column: null, message }))
+  const existing = new Set<string>()
+  for (const file of files) {
+    const page = pageOfFile(file)
+    if (page) existing.add(pageToSlug(page))
+  }
+  const problems: Array<Problem> = missingPages(normalizeNavigation(parsed.config), existing).map((page) => ({
+    file: "docs.json",
+    line: null,
+    column: null,
+    message: `La navigation cite la page ${page}, mais ${page}.mdx n'existe pas.`,
+  }))
+  const slug = (path: string) =>
+    path
+      .split(/[?#]/)[0]!
+      .replace(/^\/+|\/+$/g, "")
+      .toLowerCase()
+  const sources = new Set<string>()
+  for (const redirect of parsed.config.redirects ?? []) {
+    const source = slug(redirect.source)
+    const say = (message: string) => problems.push({ file: "docs.json", line: null, column: null, message })
+    if (sources.has(source)) say(`Deux redirections partent de ${redirect.source}.`)
+    sources.add(source)
+    // Une redirection depuis une page qui existe la cacherait : le build écrirait les deux au même endroit.
+    if (existing.has(source))
+      say(`La redirection ${redirect.source} masque une page qui existe : retire-la ou supprime la page.`)
+    if (redirect.destination.startsWith("/") && !existing.has(slug(redirect.destination)))
+      say(`La redirection ${redirect.source} mène à ${redirect.destination}, une page qui n'existe pas.`)
+  }
+  return problems
+}

package/src/integration.ts

@@ -8,9 +8,10 @@ import type { AstroIntegration, AstroUserConfig } from "astro"
 
 import { remarkAutoImport } from "./build/auto-import.ts"
 import { remarkBaseLinks } from "./build/base-links.ts"
+import { rehypeDocsContent } from "./build/content.ts"
 import { publicFiles } from "./build/public-files.ts"
 import { writeMachineReadable } from "./build/outputs.ts"
-import { parseDocsConfig, withHostProject, type DocsConfig } from "./core/config.ts"
+import { parseDocsConfig, socialNetwork, withHostProject, type DocsConfig } from "./core/config.ts"
 import {
   missingPages,
   normalizeNavigation,
@@ -95,9 +96,12 @@ function collectPublic(contentDir: string, declared: ReadonlyArray<string>): str
   return target
 }
 
-/** Pages du dépôt (`guides/publier`) et leur `sidebarTitle` éventuel (champ Mintlify). */
-function scanPages(contentDir: string): Map<string, string | null> {
-  const pages = new Map<string, string | null>()
+/** Ce que le frontmatter d'une page change dans la barre : `sidebarTitle` et `tag` (champs Mintlify). */
+type PageMeta = { label: string | null; tag: string | null }
+
+/** Pages du dépôt (`guides/publier`) et leurs réglages de barre latérale. */
+function scanPages(contentDir: string): Map<string, PageMeta> {
+  const pages = new Map<string, PageMeta>()
   const walk = (dir: string) => {
     for (const name of readdirSync(dir)) {
       if (name.startsWith(".") || IGNORED_DIRS.has(name)) continue
@@ -108,8 +112,9 @@ function scanPages(contentDir: string): Map<string, string | null> {
           .replaceAll("\\", "/")
           .replace(/\.mdx?$/, "")
         const frontmatter = /^---\r?\n([\s\S]*?)\r?\n---/.exec(readFileSync(path, "utf8"))?.[1] ?? ""
-        const label = /^sidebarTitle:\s*["']?(.+?)["']?\s*$/m.exec(frontmatter)?.[1] ?? null
-        pages.set(pageToSlug(page), label)
+        const field = (name: string) =>
+          new RegExp(`^${name}:\\s*["']?(.+?)["']?\\s*$`, "m").exec(frontmatter)?.[1] ?? null
+        pages.set(pageToSlug(page), { label: field("sidebarTitle"), tag: field("tag") })
       }
     }
   }
@@ -117,15 +122,21 @@ function scanPages(contentDir: string): Map<string, string | null> {
   return pages
 }
 
-type SidebarItem = { slug: string; label?: string } | { label: string; collapsed: boolean; items: Array<SidebarItem> }
+type SidebarItem =
+  | { slug: string; label?: string; badge?: { text: string; variant: "note" } }
+  | { label: string; collapsed: boolean; items: Array<SidebarItem> }
 
-function sidebarItems(items: Array<NavItem>, labels: ReadonlyMap<string, string | null>): Array<SidebarItem> {
+function sidebarItems(items: Array<NavItem>, labels: ReadonlyMap<string, PageMeta>): Array<SidebarItem> {
   return items.map((item) => {
     if (item.type === "group")
       return { label: item.label, collapsed: !item.expanded, items: sidebarItems(item.items, labels) }
     const slug = pageToSlug(item.page)
-    const label = labels.get(slug)
-    return label ? { slug, label } : { slug }
+    const meta = labels.get(slug)
+    return {
+      slug,
+      ...(meta?.label ? { label: meta.label } : {}),
+      ...(meta?.tag ? { badge: { text: meta.tag.slice(0, 16), variant: "note" as const } } : {}),
+    }
   })
 }
 
@@ -133,10 +144,7 @@ function sidebarItems(items: Array<NavItem>, labels: ReadonlyMap<string, string
  * Une entrée de premier niveau par couple (version, onglet), dans l'ordre de l'arbre ;
  * `route-data.ts` ne garde ensuite que celle de la page affichée.
  */
-export function starlightSidebar(
-  tree: NavTree,
-  labels: ReadonlyMap<string, string | null> = new Map(),
-): Array<SidebarItem> {
+export function starlightSidebar(tree: NavTree, labels: ReadonlyMap<string, PageMeta> = new Map()): Array<SidebarItem> {
   const sections = tree.versions.flatMap((version) => version.tabs)
   if (sections.length === 1) return sidebarItems(sections[0]!.items, labels)
   return tree.versions.flatMap((version) =>
@@ -148,17 +156,27 @@ export function starlightSidebar(
   )
 }
 
-const SOCIAL_ICONS = new Set([
-  "github",
-  "gitlab",
-  "linkedin",
-  "x.com",
-  "mastodon",
-  "discord",
-  "youtube",
-  "instagram",
-  "bluesky",
-])
+/**
+ * `redirects` de docs.json en redirections d'Astro : une page qui renvoie à la nouvelle
+ * adresse (le site est statique). Chemins écrits comme les liens de la doc, `base` ajouté.
+ */
+export function astroRedirects(
+  redirects: ReadonlyArray<{ source: string; destination: string; permanent?: boolean | undefined }>,
+  base: string,
+): Record<string, { status: 301 | 302; destination: string }> {
+  const slash = (path: string) => (path.endsWith("/") ? path : `${path}/`)
+  return Object.fromEntries(
+    redirects.map((item) => [
+      slash(item.source),
+      {
+        status: item.permanent === false ? 302 : 301,
+        destination: item.destination.startsWith("/")
+          ? `${base}${slash(item.destination.split("#")[0]!)}${item.destination.includes("#") ? `#${item.destination.split("#")[1]}` : ""}`
+          : item.destination,
+      },
+    ]),
+  )
+}
 
 function virtualConfigPlugin(data: VirtualConfig) {
   const id = "virtual:hgdc-docs/config"
@@ -215,9 +233,10 @@ export function createAstroConfig(options: SiteOptions = readSiteOptions()): Ast
   const theme = themeFor(config.colors?.primary, config.colors?.dark)
   const logo = typeof config.logo === "string" ? { light: config.logo } : config.logo
   const asset = (path: string) => join(options.contentDir, path.replace(/^\//, ""))
-  const social = Object.entries(config.footer?.socials ?? {})
-    .filter(([icon]) => SOCIAL_ICONS.has(icon))
-    .map(([icon, href]) => ({ icon: (icon === "x.com" ? "x.com" : icon) as "github", label: icon, href }))
+  const social = Object.entries(config.footer?.socials ?? {}).flatMap(([key, href]) => {
+    const network = socialNetwork(key)
+    return network ? [{ icon: network.icon as "github", label: network.label, href }] : []
+  })
 
   return {
     root: file("../template"),
@@ -231,7 +250,14 @@ export function createAstroConfig(options: SiteOptions = readSiteOptions()): Ast
     site: options.site ?? undefined,
     ...(base ? { base } : {}),
     trailingSlash: "always",
-    markdown: { processor: unified({ remarkPlugins: [remarkAutoImport, [remarkBaseLinks, { base }]] }) },
+    devToolbar: { enabled: false },
+    redirects: astroRedirects(config.redirects ?? [], base),
+    markdown: {
+      processor: unified({
+        remarkPlugins: [remarkAutoImport, [remarkBaseLinks, { base }]],
+        rehypePlugins: [rehypeDocsContent],
+      }),
+    },
     vite: {
       plugins: [virtualConfigPlugin(data)],
       server: { fs: { allow: [options.contentDir, file("..")] } },
@@ -252,11 +278,57 @@ export function createAstroConfig(options: SiteOptions = readSiteOptions()): Ast
         routeMiddleware: file("./overrides/route-data.ts"),
         components: {
           Head: file("./overrides/Head.astro"),
+          Header: file("./overrides/Header.astro"),
+          ThemeProvider: file("./overrides/ThemeProvider.astro"),
+          Search: file("./overrides/Search.astro"),
           Sidebar: file("./overrides/Sidebar.astro"),
           PageTitle: file("./overrides/PageTitle.astro"),
           PageFrame: file("./overrides/PageFrame.astro"),
+          PageSidebar: file("./overrides/PageSidebar.astro"),
+          TwoColumnContent: file("./overrides/TwoColumnContent.astro"),
+          Footer: file("./overrides/Footer.astro"),
+        },
+        expressiveCode: {
+          // Clair d'abord (thème par défaut du site) ; le sombre suit `data-hd-theme` (ThemeProvider).
+          themes: ["github-light-default", "github-dark-default"],
+          useDarkModeMediaQuery: false,
+          themeCssSelector: (theme) => (theme.type === "dark" ? '[data-hd-theme="dark"]' : false),
+          // Blocs dessinés par theme.css (filet, en-tête, actions) : un cadre unique pour le
+          // shell comme pour le reste. Le bouton Copier d'Expressive Code reste dans le HTML,
+          // caché : son `data-code` porte le texte exact (build/markdown.ts, widget/code.ts).
+          defaultProps: { frame: "code" },
+          styleOverrides: {
+            borderRadius: "1rem",
+            borderColor: "var(--hd-border)",
+            borderWidth: "1px",
+            codeBackground: "var(--hd-code-bg)",
+            codeFontFamily: "var(--hd-font-mono)",
+            codeFontSize: "0.8125rem",
+            codeLineHeight: "1.7",
+            codePaddingBlock: "0.875rem",
+            codePaddingInline: "1rem",
+            uiFontFamily: "var(--hd-font-sans)",
+            uiFontSize: "0.8125rem",
+            frames: {
+              frameBoxShadowCssValue: "none",
+              editorTabBarBackground: "var(--hd-code-header)",
+              editorTabBarBorderBottomColor: "var(--hd-border)",
+              editorActiveTabBackground: "transparent",
+              editorActiveTabForeground: "var(--hd-fg)",
+              editorActiveTabBorderColor: "transparent",
+              editorActiveTabIndicatorTopColor: "transparent",
+              editorActiveTabIndicatorBottomColor: "var(--hd-accent)",
+              editorActiveTabIndicatorHeight: "2px",
+              editorTabBorderRadius: "0",
+              editorBackground: "var(--hd-code-bg)",
+              terminalBackground: "var(--hd-code-bg)",
+              terminalTitlebarBackground: "var(--hd-code-header)",
+              terminalTitlebarBorderBottomColor: "var(--hd-border)",
+              terminalTitlebarForeground: "var(--hd-muted-fg)",
+              terminalTitlebarDotsOpacity: "0",
+            },
+          },
         },
-        expressiveCode: { themes: ["github-dark-default", "github-light-default"] },
         pagination: true,
       }),
       machineReadableOutputs(data, options),

package/src/overrides/Assistant.astro

@@ -1,39 +1,25 @@
 ---
 import data from "virtual:hgdc-docs/config"
 
-// Widget de l'assistant : panneau latéral non modal (la page reste lisible), plein écran
-// sur téléphone. Logique dans `../widget/client.ts`.
+import Icon from "./Icon.astro"
+
+// Assistant. Fermé : une barre « Pose une question… » au bas du contenu. Ouvert : un
+// panneau à droite qui pousse la page (une feuille qui monte du bas sur téléphone).
+// Logique dans `../widget/client.ts`.
 const endpoint = new URL("/api/v1/ask", data.config.assistant?.endpoint ?? data.apiEndpoint).toString()
 ---
 
 <hgdc-assistant data-endpoint={endpoint} data-project={data.config.project} data-name={data.config.name}>
-  <button type="button" class="hgdc-launcher" data-open aria-haspopup="dialog" aria-expanded="false">
-    <svg aria-hidden="true" viewBox="0 0 24 24" width="18" height="18">
-      <path d="M12 3l1.9 4.6L18.5 9.5l-4.6 1.9L12 16l-1.9-4.6L5.5 9.5l4.6-1.9z" fill="currentColor"></path>
-      <path d="M18.5 15l.8 1.9 1.9.8-1.9.8-.8 1.9-.8-1.9-1.9-.8 1.9-.8z" fill="currentColor"></path>
-    </svg>
-    <span>Demander à l'IA</span>
-    <kbd class="hgdc-kbd" data-shortcut aria-hidden="true">Ctrl I</kbd>
-  </button>
-
-  <section class="hgdc-panel" role="dialog" aria-modal="false" aria-labelledby="hgdc-assistant-title" hidden>
+  <section class="hgdc-panel" role="dialog" aria-modal="false" aria-labelledby="hgdc-assistant-title" data-panel inert>
+    <div class="hgdc-panel__grip" aria-hidden="true"></div>
     <header class="hgdc-panel__header">
-      <div>
-        <h2 id="hgdc-assistant-title">Assistant</h2>
-        <p>Répond à partir de cette documentation, avec ses sources.</p>
-      </div>
+      <h2 id="hgdc-assistant-title"><Icon name="sparkles" />Assistant</h2>
       <div class="hgdc-panel__tools">
-        <button type="button" class="hgdc-icon-button" data-reset aria-label="Nouvelle conversation" hidden>
-          <svg aria-hidden="true" viewBox="0 0 24 24" width="18" height="18"
-            ><path d="M4 12a8 8 0 1 0 2.3-5.7M4 4v4h4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"
-            ></path></svg
-          >
+        <button type="button" class="hd-icon-button" data-reset aria-label="Nouvelle conversation" title="Nouvelle conversation" hidden>
+          <Icon name="rotate" />
         </button>
-        <button type="button" class="hgdc-icon-button" data-close aria-label="Fermer l'assistant">
-          <svg aria-hidden="true" viewBox="0 0 24 24" width="18" height="18"
-            ><path d="M6 6l12 12M18 6 6 18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"
-            ></path></svg
-          >
+        <button type="button" class="hd-icon-button" data-close aria-label="Fermer l'assistant" title="Fermer (Échap)">
+          <Icon name="x" />
         </button>
       </div>
     </header>
@@ -41,26 +27,18 @@ const endpoint = new URL("/api/v1/ask", data.config.assistant?.endpoint ?? data.
     <div class="hgdc-panel__body" data-log aria-live="polite">
       <div class="hgdc-empty" data-empty>
         <p class="hgdc-empty__title">Pose ta question sur {data.config.name}.</p>
-        <p>
-          Je cherche dans les pages de cette documentation et je cite mes sources. Si la réponse n'y est pas, je te le
-          dis.
-        </p>
+        <p>Je cherche dans les pages de cette documentation et je cite mes sources. Si la réponse n'y est pas, je te le dis.</p>
       </div>
     </div>
 
     <form class="hgdc-panel__form" data-form>
       <label class="sr-only" for="hgdc-question">Ta question</label>
-      <textarea id="hgdc-question" data-input rows="1" maxlength="1000" placeholder="Comment publier ma doc ?" required
-      ></textarea>
-      <button type="submit" class="hgdc-send" data-send aria-label="Envoyer la question">
-        <svg aria-hidden="true" viewBox="0 0 24 24" width="18" height="18"
-          ><path d="M12 19V5M5 12l7-7 7 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-          ></path></svg
-        >
-      </button>
+      <textarea id="hgdc-question" data-input rows="1" maxlength="1000" placeholder="Pose une question…" required></textarea>
+      <button type="submit" class="hd-send" data-send aria-label="Envoyer la question"><Icon name="arrow-up" size={16} /></button>
     </form>
     <p class="hgdc-panel__note">
-      Réponses générées par IA (Claude, d'Anthropic), à vérifier. Les questions sont conservées 90 jours pour améliorer cette documentation.
+      Réponses générées par IA (Claude, d'Anthropic), à vérifier. Les questions sont conservées 90 jours pour améliorer
+      cette documentation.
     </p>
   </section>
 </hgdc-assistant>