living-ai-documentation 1.11.0 → 2.0.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/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": "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",
   "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);
@@ -415,6 +562,15 @@
             >
           </div>
 
+          <!-- Workspace -->
+          <a
+            href="/workspace"
+            data-i18n="nav.workspace"
+            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"
+          >
+            Workspace
+          </a>
+
           <!-- Dark mode toggle -->
           <button
             id="dark-toggle"
@@ -502,6 +658,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 +2002,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 "";

package/dist/src/frontend/sidebar.js

@@ -194,6 +194,7 @@ function renderDocItem(doc) {
   <div class="leading-snug flex items-center justify-between gap-2">
     <span class="truncate">${esc(doc.title)}</span>
     <span class="flex items-center gap-1 shrink-0">
+      ${statusPill(doc)}
       ${annotationBadge(annCount)}
       ${fileAttachmentBadge(fileCount)}
     </span>
@@ -349,3 +350,30 @@ function applyHideAttachmentsButtonState() {
   btn.classList.toggle("text-gray-400", hideAttachments);
   btn.classList.toggle("dark:text-gray-500", hideAttachments);
 }
+
+function cycleHighlightStatus() {
+  highlightStatusState = (highlightStatusState + 1) % 3;
+  try {
+    localStorage.setItem("ld-highlight-status", String(highlightStatusState));
+  } catch {
+    /* ignore */
+  }
+  applyHighlightStatusButtonState();
+  refreshSidebar();
+}
+
+// Icon colour mirrors the active state: gray (off) → green (To be validated) →
+// orange (also SuperSeeded). Exactly one colour class is on at a time.
+function applyHighlightStatusButtonState() {
+  const btn = document.getElementById("toggle-status-highlight-btn");
+  if (!btn) return;
+  const off = highlightStatusState === 0;
+  const validate = highlightStatusState === 1;
+  const both = highlightStatusState === 2;
+  btn.classList.toggle("text-gray-400", off);
+  btn.classList.toggle("dark:text-gray-500", off);
+  btn.classList.toggle("text-green-500", validate);
+  btn.classList.toggle("dark:text-green-400", validate);
+  btn.classList.toggle("text-orange-500", both);
+  btn.classList.toggle("dark:text-orange-400", both);
+}