living-ai-documentation 1.11.0 → 2.1.0

package/dist/src/frontend/boot.js

@@ -19,6 +19,7 @@ document.addEventListener("DOMContentLoaded", async () => {
   await loadDocuments();
   applyHideCategoriesButtonState();
   applyHideAttachmentsButtonState();
+  applyHighlightStatusButtonState();
 
   // Deep-link via ?doc=id, otherwise open first General doc
   const params = new URLSearchParams(location.search);

package/dist/src/frontend/config.js

@@ -6,8 +6,9 @@ async function loadConfig() {
     await window.initI18n(cfg.language || 'en');
     window.applyI18n();
     if (cfg.title) document.title = cfg.title;
-    document.getElementById("app-title").textContent =
-      cfg.title || "Living Documentation";
+    document.getElementById("app-title").textContent = "Living AI Documentation";
+    const subtitle = document.getElementById("app-subtitle");
+    if (subtitle) subtitle.textContent = cfg.title || "";
     if (cfg.filenamePattern) {
       document.getElementById("welcome-pattern").textContent =
         cfg.filenamePattern + ".md";

package/dist/src/frontend/context.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>AI Context</title>
     <script src="/i18n.js"></script>
-    <script src="/confirm-modal.js"></script>
+    <script src="/modals/confirm-modal.js"></script>
     <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
     <script>
       tailwind.config = { darkMode: "class", theme: { extend: {} } };

package/dist/src/frontend/documents.js

@@ -8,10 +8,43 @@
 let _lastDocHtml = null;
 let _lastDocIdRendered = null;
 
+function _applyTableStyles(contentEl) {
+  const attrs = ldCollectTableAttributesFromSource(
+    typeof currentDocContent === "string" ? currentDocContent : "",
+  );
+  const tables = contentEl.querySelectorAll("table");
+  tables.forEach((table, i) => {
+    const a = attrs[i];
+    if (!a) return;
+    if (a.style) {
+      table.classList.add(`table-style-${a.style}`);
+      table.dataset.tableStyle = a.style;
+    }
+    if (a.border) {
+      table.classList.add(`table-border-${a.border}`);
+      table.dataset.tableBorder = a.border;
+    }
+    if (a.color) {
+      table.classList.add(`table-color-${a.color}`);
+      table.dataset.tableColor = a.color;
+    }
+  });
+}
+
+function _fillEmptyTableCells(contentEl) {
+  contentEl.querySelectorAll("table th, table td").forEach((cell) => {
+    if (cell.textContent.trim() === "") {
+      cell.textContent = "\u00A0";
+    }
+  });
+}
+
 function _wireDocContent(html) {
   const contentEl = document.getElementById("doc-content");
   if (!contentEl) return;
   contentEl.innerHTML = html;
+  _applyTableStyles(contentEl);
+  _fillEmptyTableCells(contentEl);
 
   contentEl.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach((h) => {
     if (!h.id) {
@@ -187,6 +220,7 @@ async function loadDocuments() {
     await Promise.all([
       refreshAnnotationCounts(),
       refreshFileAttachmentCounts(),
+      refreshDocStatuses(),
     ]);
     renderSidebar(allDocs);
   } catch {
@@ -222,6 +256,18 @@ async function refreshFileAttachmentCounts() {
   }
 }
 
+async function refreshDocStatuses() {
+  try {
+    const raw = await fetch("/api/documents/statuses").then((r) => r.json());
+    docStatuses = {};
+    for (const [docId, status] of Object.entries(raw || {})) {
+      docStatuses[docId] = status;
+    }
+  } catch {
+    docStatuses = {};
+  }
+}
+
 async function openDocument(id, skipHistory = false, fromLink = false, anchor = null) {
   // Track navigation history for breadcrumb trail
   // fromLink===true  : forward navigation via in-doc link → push current to stack

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

@@ -19,10 +19,12 @@
   "nav.toggle_sidebar": "Toggle sidebar",
   "nav.search_placeholder": "Search docs…",
   "nav.search_mobile_placeholder": "Search…",
+  "nav.workspace": "Agentic Workspace",
   "nav.toggle_dark": "Toggle dark mode",
   "nav.export": "Export",
   "nav.toggle_categories": "Show/hide category grouping",
   "nav.toggle_attachments": "Show/hide attachments",
+  "nav.toggle_status_highlight": "Highlight document statuses (To be validated / SuperSeeded)",
   "nav.export_html": "Export folders as HTML ZIP",
   "nav.export_all_pdf": "Export all documents as PDF",
   "nav.new_folder": "New folder",
@@ -65,6 +67,8 @@
   "sidebar.annotated_docs_badge": "document with annotations",
   "sidebar.file_attachment_badge": "attachment",
   "sidebar.file_attached_docs_badge": "document with attachments",
+  "sidebar.status_to_validate": "To be validated",
+  "sidebar.status_superseeded": "SuperSeeded",
 
   "doc.validate_mode": "Validate document — flip frontmatter status from \"To be validated\" to \"Accepted\"",
   "doc.validate_btn": "Validate",
@@ -281,6 +285,37 @@
   "snippet.inline_edit_btn_heading_2": "Edit heading level 2",
   "snippet.inline_edit_btn_heading_3": "Edit heading level 3",
   "snippet.inline_edit_btn_heading_4": "Edit heading level 4",
+  "snippet.inline_delete_btn_table": "Delete table",
+  "snippet.inline_delete_btn_code_block": "Delete code block",
+  "snippet.inline_delete_btn_blockquote": "Delete blockquote",
+  "snippet.inline_delete_btn_ordered_list": "Delete numbered list",
+  "snippet.inline_delete_btn_unordered_list": "Delete bullet list",
+  "snippet.inline_delete_btn_tree": "Delete tree",
+  "snippet.inline_delete_btn_colored_section": "Delete colored section",
+  "snippet.inline_delete_btn_colored_text": "Delete colored text",
+  "snippet.inline_delete_btn_collapsible": "Delete collapsible block",
+  "snippet.inline_delete_btn_link": "Delete link",
+  "snippet.inline_delete_btn_doc_link": "Delete document link",
+  "snippet.inline_delete_btn_anchor_link": "Delete anchor link",
+  "snippet.inline_delete_btn_anchor_doc_link": "Delete document + anchor link",
+  "snippet.inline_delete_btn_image": "Delete image",
+  "snippet.inline_delete_btn_separator": "Delete separator",
+  "snippet.inline_delete_btn_heading_1": "Delete heading level 1",
+  "snippet.inline_delete_btn_heading_2": "Delete heading level 2",
+  "snippet.inline_delete_btn_heading_3": "Delete heading level 3",
+  "snippet.inline_delete_btn_heading_4": "Delete heading level 4",
+  "snippet.table_style_label": "Table style",
+  "snippet.table_style_default": "Default",
+  "snippet.table_style_compact": "Compact",
+  "snippet.table_style_striped": "Striped",
+  "snippet.table_border_label": "Borders",
+  "snippet.table_color_label": "Color",
+  "snippet.table_color_default": "None",
+  "snippet.table_color_info": "Info (blue)",
+  "snippet.table_color_success": "Success (green)",
+  "snippet.table_color_warning": "Warning (orange)",
+  "snippet.table_color_danger": "Danger (red)",
+  "snippet.table_color_note": "Note (violet)",
   "snippet.picker_search_placeholder": "Search a snippet…",
   "snippet.picker_back": "Back",
   "snippet.picker_no_results": "No matching snippet.",

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

@@ -19,10 +19,12 @@
   "nav.toggle_sidebar": "Afficher/masquer le panneau",
   "nav.search_placeholder": "Rechercher dans les docs…",
   "nav.search_mobile_placeholder": "Rechercher…",
+  "nav.workspace": "Workspace Agentique",
   "nav.toggle_dark": "Basculer le mode sombre",
   "nav.export": "Exporter",
   "nav.toggle_categories": "Afficher/masquer le regroupement par catégorie",
   "nav.toggle_attachments": "Afficher/masquer les pièces jointes",
+  "nav.toggle_status_highlight": "Mettre en évidence les statuts (À valider / Obsolète)",
   "nav.export_html": "Exporter les dossiers en HTML (ZIP)",
   "nav.export_all_pdf": "Exporter tous les documents en PDF",
   "nav.new_folder": "Nouveau dossier",
@@ -65,6 +67,8 @@
   "sidebar.annotated_docs_badge": "document contenant des annotations",
   "sidebar.file_attachment_badge": "pièce jointe",
   "sidebar.file_attached_docs_badge": "document contenant des pièces jointes",
+  "sidebar.status_to_validate": "À valider",
+  "sidebar.status_superseeded": "Obsolète",
 
   "doc.validate_mode": "Valider le document — passer le statut frontmatter de « To be validated » à « Accepted »",
   "doc.validate_btn": "Valider",
@@ -281,6 +285,37 @@
   "snippet.inline_edit_btn_heading_2": "Éditer le titre niveau 2",
   "snippet.inline_edit_btn_heading_3": "Éditer le titre niveau 3",
   "snippet.inline_edit_btn_heading_4": "Éditer le titre niveau 4",
+  "snippet.inline_delete_btn_table": "Supprimer le tableau",
+  "snippet.inline_delete_btn_code_block": "Supprimer le bloc de code",
+  "snippet.inline_delete_btn_blockquote": "Supprimer la citation",
+  "snippet.inline_delete_btn_ordered_list": "Supprimer la liste numérotée",
+  "snippet.inline_delete_btn_unordered_list": "Supprimer la liste à puces",
+  "snippet.inline_delete_btn_tree": "Supprimer l'arborescence",
+  "snippet.inline_delete_btn_colored_section": "Supprimer la section colorée",
+  "snippet.inline_delete_btn_colored_text": "Supprimer le texte coloré",
+  "snippet.inline_delete_btn_collapsible": "Supprimer le bloc repliable",
+  "snippet.inline_delete_btn_link": "Supprimer le lien",
+  "snippet.inline_delete_btn_doc_link": "Supprimer le lien vers un document",
+  "snippet.inline_delete_btn_anchor_link": "Supprimer le lien d'ancre",
+  "snippet.inline_delete_btn_anchor_doc_link": "Supprimer le lien document + ancre",
+  "snippet.inline_delete_btn_image": "Supprimer l'image",
+  "snippet.inline_delete_btn_separator": "Supprimer le séparateur",
+  "snippet.inline_delete_btn_heading_1": "Supprimer le titre niveau 1",
+  "snippet.inline_delete_btn_heading_2": "Supprimer le titre niveau 2",
+  "snippet.inline_delete_btn_heading_3": "Supprimer le titre niveau 3",
+  "snippet.inline_delete_btn_heading_4": "Supprimer le titre niveau 4",
+  "snippet.table_style_label": "Style du tableau",
+  "snippet.table_style_default": "Par défaut",
+  "snippet.table_style_compact": "Compact",
+  "snippet.table_style_striped": "Rayé",
+  "snippet.table_border_label": "Bordures",
+  "snippet.table_color_label": "Couleur",
+  "snippet.table_color_default": "Aucune",
+  "snippet.table_color_info": "Info (bleu)",
+  "snippet.table_color_success": "Succès (vert)",
+  "snippet.table_color_warning": "Avertissement (orange)",
+  "snippet.table_color_danger": "Danger (rouge)",
+  "snippet.table_color_note": "Note (violet)",
   "snippet.picker_search_placeholder": "Rechercher un snippet…",
   "snippet.picker_back": "Retour",
   "snippet.picker_no_results": "Aucun snippet ne correspond.",

package/dist/src/frontend/index.html

@@ -34,9 +34,13 @@
     <script defer src="/utils.js"></script>
     <script defer src="/state.js"></script>
     <script defer src="/sidebar-helpers.js"></script>
-    <script defer src="/snippet-detect.js"></script>
-    <script defer src="/snippet-table.js"></script>
-    <script defer src="/snippet-tree.js"></script>
+    <script defer src="/snippets/snippet-table-attributes.js"></script>
+    <script defer src="/snippets/snippet-list-markdown.js"></script>
+    <script defer src="/snippets/snippet-builders.js"></script>
+    <script defer src="/snippets/snippet-parsers.js"></script>
+    <script defer src="/snippets/snippet-detect.js"></script>
+    <script defer src="/snippets/snippet-table.js"></script>
+    <script defer src="/snippets/snippet-tree.js"></script>
     <script defer src="/dark-mode.js"></script>
     <script defer src="/config.js"></script>
     <script defer src="/sidebar.js"></script>
@@ -47,18 +51,18 @@
     <script defer src="/file-attach.js"></script>
     <script defer src="/documents.js"></script>
     <script defer src="/misc.js"></script>
-    <script defer src="/snippets.js"></script>
-    <script defer src="/inline-snippet-edit.js"></script>
+    <script defer src="/snippets/snippets.js"></script>
+    <script defer src="/snippets/inline-snippet-edit.js"></script>
     <script defer src="/annotations.js"></script>
     <script defer src="/metadata.js"></script>
     <script defer src="/accuracy-gauge.js"></script>
     <script defer src="/validate.js"></script>
     <script defer src="/export.js"></script>
-    <script defer src="/diagram-link-modal.js"></script>
-    <script defer src="/new-folder-modal.js"></script>
-    <script defer src="/new-doc-modal.js"></script>
-    <script defer src="/confirm-modal.js"></script>
-    <script defer src="/files-modal.js"></script>
+    <script defer src="/modals/diagram-link-modal.js"></script>
+    <script defer src="/modals/new-folder-modal.js"></script>
+    <script defer src="/modals/new-doc-modal.js"></script>
+    <script defer src="/modals/confirm-modal.js"></script>
+    <script defer src="/modals/files-modal.js"></script>
     <script defer src="/boot.js"></script>
 
     <script>
@@ -128,6 +132,149 @@
         border-color: rgba(34, 197, 94, 0.4);
       }
 
+      /* Table presets — triggered by table-style/table-border/table-color comments. */
+
+      /* Color palette via CSS variables. Default (no color class) uses neutral fallbacks. */
+      table.table-color-info {
+        --tbl-accent: rgb(59 130 246);
+        --tbl-accent-soft: rgb(219 234 254);
+        --tbl-accent-stripe: rgb(239 246 255);
+        --tbl-accent-text: rgb(30 58 138);
+      }
+      table.table-color-success {
+        --tbl-accent: rgb(34 197 94);
+        --tbl-accent-soft: rgb(220 252 231);
+        --tbl-accent-stripe: rgb(240 253 244);
+        --tbl-accent-text: rgb(20 83 45);
+      }
+      table.table-color-warning {
+        --tbl-accent: rgb(245 158 11);
+        --tbl-accent-soft: rgb(254 243 199);
+        --tbl-accent-stripe: rgb(255 251 235);
+        --tbl-accent-text: rgb(120 53 15);
+      }
+      table.table-color-danger {
+        --tbl-accent: rgb(239 68 68);
+        --tbl-accent-soft: rgb(254 226 226);
+        --tbl-accent-stripe: rgb(254 242 242);
+        --tbl-accent-text: rgb(127 29 29);
+      }
+      table.table-color-note {
+        --tbl-accent: rgb(139 92 246);
+        --tbl-accent-soft: rgb(233 213 255);
+        --tbl-accent-stripe: rgb(245 243 255);
+        --tbl-accent-text: rgb(76 29 149);
+      }
+      .dark table.table-color-info {
+        --tbl-accent: rgb(96 165 250);
+        --tbl-accent-soft: rgb(30 58 138 / 0.55);
+        --tbl-accent-stripe: rgb(30 58 138 / 0.35);
+        --tbl-accent-text: rgb(191 219 254);
+      }
+      .dark table.table-color-success {
+        --tbl-accent: rgb(74 222 128);
+        --tbl-accent-soft: rgb(20 83 45 / 0.55);
+        --tbl-accent-stripe: rgb(20 83 45 / 0.35);
+        --tbl-accent-text: rgb(187 247 208);
+      }
+      .dark table.table-color-warning {
+        --tbl-accent: rgb(251 191 36);
+        --tbl-accent-soft: rgb(120 53 15 / 0.55);
+        --tbl-accent-stripe: rgb(120 53 15 / 0.35);
+        --tbl-accent-text: rgb(254 215 170);
+      }
+      .dark table.table-color-danger {
+        --tbl-accent: rgb(248 113 113);
+        --tbl-accent-soft: rgb(127 29 29 / 0.55);
+        --tbl-accent-stripe: rgb(127 29 29 / 0.35);
+        --tbl-accent-text: rgb(254 202 202);
+      }
+      .dark table.table-color-note {
+        --tbl-accent: rgb(167 139 250);
+        --tbl-accent-soft: rgb(76 29 149 / 0.55);
+        --tbl-accent-stripe: rgb(76 29 149 / 0.35);
+        --tbl-accent-text: rgb(221 214 254);
+      }
+      /* When a color is applied, tint the header with the accent palette. */
+      .prose table[class*="table-color-"] thead th {
+        background-color: var(--tbl-accent-soft);
+        color: var(--tbl-accent-text);
+      }
+
+      /* Default table type: generous padding with horizontal separators only. */
+      .prose table {
+        border-collapse: collapse;
+        border: none;
+      }
+      .prose table th,
+      .prose table td {
+        padding: 0.6rem 1rem;
+        border: none;
+        border-bottom: 1px solid rgb(229 231 235);
+      }
+      .prose table thead th {
+        border-bottom-color: rgb(209 213 219);
+      }
+      .dark .prose table th,
+      .dark .prose table td {
+        border-bottom-color: rgb(55 65 81);
+      }
+      .prose table[class*="table-color-"] th,
+      .prose table[class*="table-color-"] td {
+        border-bottom-color: var(--tbl-accent-soft);
+      }
+      .prose table[class*="table-color-"] thead th {
+        border-bottom-color: var(--tbl-accent);
+      }
+      .prose table thead,
+      .prose table tbody tr {
+        border: none;
+      }
+
+      /* Compact: small font + reduced padding (clearly denser than other variants). */
+      .prose table.table-style-compact {
+        font-size: 0.85em;
+        line-height: 1.35;
+      }
+      .prose table.table-style-compact th,
+      .prose table.table-style-compact td {
+        padding: 0.2rem 0.5rem;
+      }
+
+      /* Striped: zebra rows using the accent stripe (neutral fallback if no color). */
+      .prose table.table-style-striped {
+        border-collapse: collapse;
+      }
+      .prose table.table-style-striped tbody tr:nth-child(odd) {
+        background-color: var(--tbl-accent-stripe, rgb(243 244 246));
+      }
+      .dark .prose table.table-style-striped tbody tr:nth-child(odd) {
+        background-color: var(--tbl-accent-stripe, rgb(55 65 81));
+      }
+
+      /* Border checkbox: visible borders tinted with the accent (neutral fallback otherwise). */
+      .prose table.table-border-bordered {
+        border-collapse: collapse;
+      }
+      .prose table.table-border-bordered,
+      .prose table.table-border-bordered th,
+      .prose table.table-border-bordered td {
+        border: 1px solid var(--tbl-accent, rgb(209 213 219));
+      }
+      .dark .prose table.table-border-bordered,
+      .dark .prose table.table-border-bordered th,
+      .dark .prose table.table-border-bordered td {
+        border-color: var(--tbl-accent, rgb(75 85 99));
+      }
+
+      /* Explicit/legacy borderless: keep only horizontal separators. */
+      .prose table.table-border-borderless th,
+      .prose table.table-border-borderless td {
+        border-left: none !important;
+        border-right: none !important;
+        border-top: none !important;
+      }
+
       /* Collapsible code blocks (set via --ld-code-max-h from .living-doc.json) */
       pre.ld-collapsible {
         max-height: var(--ld-code-max-h, 400px);
@@ -384,52 +531,37 @@
       <!-- ── Header ── -->
       <header
         id="header"
-        class="no-print flex items-center justify-between px-4 h-14 border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shrink-0 z-10 shadow-sm"
+        class="no-print flex items-center justify-between px-6 h-[72px] border-b border-gray-200 dark:border-gray-800 bg-white/90 dark:bg-gray-900/90 backdrop-blur shrink-0 z-10 shadow-sm"
       >
         <div class="flex items-center gap-3">
           <span
             onclick="toggleSidebar()"
             data-i18n-title="nav.toggle_sidebar"
             title="Toggle sidebar"
-            class="text-blue-600 dark:text-blue-400 text-xl select-none cursor-pointer hover:opacity-70 transition-opacity"
-            >&#128218;</span
-          >
-          <span id="app-title" class="font-semibold text-base tracking-tight"
-            >Living Documentation</span
+            class="select-none cursor-pointer hover:opacity-70 transition-opacity flex items-center justify-center w-[38px] h-[38px] rounded-[10px] bg-gray-900 dark:bg-gray-800 border border-gray-600 text-white text-xs font-black"
+            >LD</span
           >
+          <div>
+            <div id="app-title" class="font-[760] text-[15px] tracking-tight leading-tight">Living AI Documentation</div>
+            <div id="app-subtitle" class="text-[12px] text-gray-400 mt-[2px]"></div>
+          </div>
         </div>
 
         <div class="flex items-center gap-2">
-          <!-- Search (desktop — mirrors sidebar search) -->
-          <div class="relative hidden sm:block">
-            <input
-              id="header-search"
-              type="search"
-              data-i18n-placeholder="nav.search_placeholder"
-              placeholder="Search docs…"
-              class="w-56 pl-8 pr-3 py-1.5 text-sm rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
-            />
-            <span
-              class="absolute left-2.5 top-2 text-gray-400 text-sm pointer-events-none"
-              >&#128269;</span
-            >
-          </div>
-
-          <!-- Dark mode toggle -->
-          <button
-            id="dark-toggle"
-            data-i18n-title="nav.toggle_dark"
-            title="Toggle dark mode"
-            class="p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+          <!-- Workspace -->
+          <a
+            href="/workspace"
+            data-i18n="nav.workspace"
+            class="h-[34px] px-3 rounded-[9px] border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-[13px] font-bold text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors inline-flex items-center no-underline"
           >
-            <span id="dark-icon" class="text-lg leading-none">&#9790;</span>
-          </button>
+            Workspace
+          </a>
 
           <!-- Word Cloud -->
           <button
             onclick="openWordCloud()"
             data-i18n="nav.word_cloud"
-            class="text-sm px-3 py-1.5 rounded-lg text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors font-medium"
+            class="h-[34px] px-3 rounded-[9px] border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-[13px] font-bold text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors inline-flex items-center"
           >
             &#9729; Word Cloud
           </button>
@@ -438,7 +570,7 @@
           <a
             href="/diagram"
             data-i18n="nav.diagram"
-            class="text-sm px-3 py-1.5 rounded-lg text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors font-medium"
+            class="h-[34px] px-3 rounded-[9px] border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-[13px] font-bold text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors inline-flex items-center no-underline"
           >
             &#9671; Diagram
           </a>
@@ -447,7 +579,7 @@
           <a
             href="/context"
             data-i18n="nav.ai_context"
-            class="text-sm px-3 py-1.5 rounded-lg text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors font-medium"
+            class="h-[34px] px-3 rounded-[9px] border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-[13px] font-bold text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors inline-flex items-center no-underline"
           >
             AI Context
           </a>
@@ -456,7 +588,7 @@
           <button
             onclick="openFilesModal()"
             data-i18n="nav.files"
-            class="text-sm px-3 py-1.5 rounded-lg text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors font-medium"
+            class="h-[34px] px-3 rounded-[9px] border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-[13px] font-bold text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors inline-flex items-center"
           >
             &#128193; Files
           </button>
@@ -465,10 +597,35 @@
           <a
             href="/admin"
             data-i18n="nav.admin"
-            class="text-sm px-3 py-1.5 rounded-lg text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors font-medium"
+            class="h-[34px] px-3 rounded-[9px] border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-[13px] font-bold text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors inline-flex items-center no-underline"
           >
             &#9881; Admin
           </a>
+
+          <!-- Dark mode toggle -->
+          <button
+            id="dark-toggle"
+            data-i18n-title="nav.toggle_dark"
+            title="Toggle dark mode"
+            class="p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+          >
+            <span id="dark-icon" class="text-lg leading-none">&#9790;</span>
+          </button>
+
+          <!-- Search (desktop — mirrors sidebar search) -->
+          <div class="relative hidden sm:block">
+            <input
+              id="header-search"
+              type="search"
+              data-i18n-placeholder="nav.search_placeholder"
+              placeholder="Search docs…"
+              class="w-56 pl-8 pr-3 py-1.5 text-sm rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+            <span
+              class="absolute left-2.5 top-2 text-gray-400 text-sm pointer-events-none"
+              >&#128269;</span
+            >
+          </div>
         </div>
       </header>
 
@@ -502,6 +659,15 @@
                 class="text-xs text-gray-400 dark:text-gray-500"
               ></p>
               <div class="flex items-center gap-2">
+                <button
+                  id="toggle-status-highlight-btn"
+                  onclick="cycleHighlightStatus()"
+                  data-i18n-title="nav.toggle_status_highlight"
+                  title="Highlight document statuses"
+                  class="text-gray-400 hover:opacity-80 dark:text-gray-500 transition-colors leading-none"
+                >
+                  <i class="fa-solid fa-certificate"></i>
+                </button>
                 <button
                   id="toggle-attachments-btn"
                   onclick="toggleHideAttachments()"
@@ -1837,6 +2003,52 @@
         <!-- Panel: table -->
         <div id="snip-panel-table" class="hidden space-y-3">
           <div class="flex items-center gap-5">
+            <div class="flex items-center gap-2">
+              <label
+                for="snip-table-style"
+                data-i18n="snippet.table_style_label"
+                class="text-xs text-gray-500 dark:text-gray-400"
+                >Table style</label
+              >
+              <select
+                id="snip-table-style"
+                onchange="snippetUpdatePreview()"
+                class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-2 py-1"
+              >
+                <option data-i18n="snippet.table_style_default" value="">Default</option>
+                <option data-i18n="snippet.table_style_compact" value="compact">Compact</option>
+                <option data-i18n="snippet.table_style_striped" value="striped">Striped</option>
+              </select>
+            </div>
+            <label class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
+              <input
+                id="snip-table-bordered"
+                type="checkbox"
+                onchange="snippetUpdatePreview()"
+                class="rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500"
+              />
+              <span data-i18n="snippet.table_border_label">Borders</span>
+            </label>
+            <div class="flex items-center gap-2">
+              <label
+                for="snip-table-color"
+                data-i18n="snippet.table_color_label"
+                class="text-xs text-gray-500 dark:text-gray-400"
+                >Color</label
+              >
+              <select
+                id="snip-table-color"
+                onchange="snippetUpdatePreview()"
+                class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-2 py-1"
+              >
+                <option data-i18n="snippet.table_color_default" value="">None</option>
+                <option data-i18n="snippet.table_color_info" value="info">Info (blue)</option>
+                <option data-i18n="snippet.table_color_success" value="success">Success (green)</option>
+                <option data-i18n="snippet.table_color_warning" value="warning">Warning (orange)</option>
+                <option data-i18n="snippet.table_color_danger" value="danger">Danger (red)</option>
+                <option data-i18n="snippet.table_color_note" value="note">Note (violet)</option>
+              </select>
+            </div>
             <div class="flex items-center gap-2">
               <span data-i18n="snippet.table_rows_label" class="text-xs text-gray-500 dark:text-gray-400"
                 >Rows</span

package/dist/src/frontend/sidebar-helpers.js

@@ -82,6 +82,39 @@ function fileAttachmentBadge(count) {
                         border border-sky-500 shadow-sm">${count}</span>`;
 }
 
+// Lifecycle pill driven by the tri-state status-highlight toggle. A document
+// carries a single frontmatter `status`, so it shows at most one pill: a green
+// "V" for "To be validated" (states 1 and 2) or an orange "S" for "SuperSeeded"
+// (state 2 only). Status matching is case-insensitive.
+function statusPill(doc) {
+  if (typeof highlightStatusState === "undefined" || !highlightStatusState)
+    return "";
+  const status = String(docStatuses[doc.id] || "")
+    .trim()
+    .toLowerCase();
+  if (status === "to be validated") {
+    const label = window.t
+      ? window.t("sidebar.status_to_validate")
+      : "To be validated";
+    return `<span title="${esc(label)}"
+                 class="inline-flex items-center justify-center w-5 h-5
+                        rounded-full bg-green-500 dark:bg-green-500
+                        text-[10px] font-bold text-white
+                        border border-green-600 shadow-sm">V</span>`;
+  }
+  if (highlightStatusState === 2 && status === "superseeded") {
+    const label = window.t
+      ? window.t("sidebar.status_superseeded")
+      : "SuperSeeded";
+    return `<span title="${esc(label)}"
+                 class="inline-flex items-center justify-center w-5 h-5
+                        rounded-full bg-orange-500 dark:bg-orange-500
+                        text-[10px] font-bold text-white
+                        border border-orange-600 shadow-sm">S</span>`;
+  }
+  return "";
+}
+
 function fileAttachedDocsBadge(count) {
   if (!count) return "";
   if (typeof hideAttachments !== "undefined" && hideAttachments) return "";