npm - living-ai-documentation - Versions diffs - 1.0.0 - Mend

living-ai-documentation 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (203) hide show

package/LICENSE +661 -0
package/README.fr.md +344 -0
package/README.md +344 -0
package/dist/bin/cli.d.ts +3 -0
package/dist/bin/cli.d.ts.map +1 -0
package/dist/bin/cli.js +262 -0
package/dist/bin/cli.js.map +1 -0
package/dist/src/frontend/accuracy-gauge.js +70 -0
package/dist/src/frontend/admin.html +1532 -0
package/dist/src/frontend/annotations.js +585 -0
package/dist/src/frontend/boot.js +101 -0
package/dist/src/frontend/config.js +29 -0
package/dist/src/frontend/confirm-modal.js +82 -0
package/dist/src/frontend/context.html +1252 -0
package/dist/src/frontend/dark-mode.js +20 -0
package/dist/src/frontend/diagram/alignment.js +161 -0
package/dist/src/frontend/diagram/clipboard.js +187 -0
package/dist/src/frontend/diagram/constants.js +109 -0
package/dist/src/frontend/diagram/custom-shapes.js +104 -0
package/dist/src/frontend/diagram/debug.js +43 -0
package/dist/src/frontend/diagram/drawio-export.js +649 -0
package/dist/src/frontend/diagram/edge-panel.js +293 -0
package/dist/src/frontend/diagram/edge-rendering.js +12 -0
package/dist/src/frontend/diagram/evidence.js +146 -0
package/dist/src/frontend/diagram/grid.js +78 -0
package/dist/src/frontend/diagram/groups.js +102 -0
package/dist/src/frontend/diagram/history.js +157 -0
package/dist/src/frontend/diagram/image-name-modal.js +48 -0
package/dist/src/frontend/diagram/image-upload.js +36 -0
package/dist/src/frontend/diagram/label-editor.js +115 -0
package/dist/src/frontend/diagram/link-panel.js +144 -0
package/dist/src/frontend/diagram/main.js +364 -0
package/dist/src/frontend/diagram/network.js +2214 -0
package/dist/src/frontend/diagram/node-panel.js +389 -0
package/dist/src/frontend/diagram/node-rendering.js +964 -0
package/dist/src/frontend/diagram/persistence.js +168 -0
package/dist/src/frontend/diagram/ports.js +421 -0
package/dist/src/frontend/diagram/selection-overlay.js +387 -0
package/dist/src/frontend/diagram/state.js +43 -0
package/dist/src/frontend/diagram/t.js +3 -0
package/dist/src/frontend/diagram/toast.js +21 -0
package/dist/src/frontend/diagram/unlock-hold.js +206 -0
package/dist/src/frontend/diagram/zoom.js +20 -0
package/dist/src/frontend/diagram-link-modal.js +137 -0
package/dist/src/frontend/diagram.html +1494 -0
package/dist/src/frontend/documents.js +479 -0
package/dist/src/frontend/export.js +338 -0
package/dist/src/frontend/file-attach.js +178 -0
package/dist/src/frontend/files-modal.js +243 -0
package/dist/src/frontend/i18n/en.json +624 -0
package/dist/src/frontend/i18n/fr.json +624 -0
package/dist/src/frontend/i18n.js +32 -0
package/dist/src/frontend/image-paste.js +126 -0
package/dist/src/frontend/index.html +2806 -0
package/dist/src/frontend/local-search.js +476 -0
package/dist/src/frontend/metadata.js +318 -0
package/dist/src/frontend/misc.js +92 -0
package/dist/src/frontend/new-doc-modal.js +285 -0
package/dist/src/frontend/new-folder-modal.js +169 -0
package/dist/src/frontend/search.js +194 -0
package/dist/src/frontend/shape-editor.html +685 -0
package/dist/src/frontend/sidebar-helpers.js +96 -0
package/dist/src/frontend/sidebar-resize.js +98 -0
package/dist/src/frontend/sidebar.js +351 -0
package/dist/src/frontend/snippet-detect.js +25 -0
package/dist/src/frontend/snippet-table.js +85 -0
package/dist/src/frontend/snippet-tree.js +94 -0
package/dist/src/frontend/snippets.js +1146 -0
package/dist/src/frontend/state.js +46 -0
package/dist/src/frontend/utils.js +21 -0
package/dist/src/frontend/validate.js +107 -0
package/dist/src/frontend/vendor/wordcloud2.js +1187 -0
package/dist/src/frontend/wordcloud.js +693 -0
package/dist/src/lib/config.d.ts +26 -0
package/dist/src/lib/config.d.ts.map +1 -0
package/dist/src/lib/config.js +195 -0
package/dist/src/lib/config.js.map +1 -0
package/dist/src/lib/hash.d.ts +2 -0
package/dist/src/lib/hash.d.ts.map +1 -0
package/dist/src/lib/hash.js +18 -0
package/dist/src/lib/hash.js.map +1 -0
package/dist/src/lib/metadata.d.ts +31 -0
package/dist/src/lib/metadata.d.ts.map +1 -0
package/dist/src/lib/metadata.js +128 -0
package/dist/src/lib/metadata.js.map +1 -0
package/dist/src/lib/parser.d.ts +11 -0
package/dist/src/lib/parser.d.ts.map +1 -0
package/dist/src/lib/parser.js +111 -0
package/dist/src/lib/parser.js.map +1 -0
package/dist/src/lib/status.d.ts +9 -0
package/dist/src/lib/status.d.ts.map +1 -0
package/dist/src/lib/status.js +72 -0
package/dist/src/lib/status.js.map +1 -0
package/dist/src/mcp/server.d.ts +3 -0
package/dist/src/mcp/server.d.ts.map +1 -0
package/dist/src/mcp/server.js +2046 -0
package/dist/src/mcp/server.js.map +1 -0
package/dist/src/mcp/tools/diagrams.d.ts +82 -0
package/dist/src/mcp/tools/diagrams.d.ts.map +1 -0
package/dist/src/mcp/tools/diagrams.js +594 -0
package/dist/src/mcp/tools/diagrams.js.map +1 -0
package/dist/src/mcp/tools/documents.d.ts +44 -0
package/dist/src/mcp/tools/documents.d.ts.map +1 -0
package/dist/src/mcp/tools/documents.js +186 -0
package/dist/src/mcp/tools/documents.js.map +1 -0
package/dist/src/mcp/tools/git.d.ts +10 -0
package/dist/src/mcp/tools/git.d.ts.map +1 -0
package/dist/src/mcp/tools/git.js +217 -0
package/dist/src/mcp/tools/git.js.map +1 -0
package/dist/src/mcp/tools/metadata.d.ts +57 -0
package/dist/src/mcp/tools/metadata.d.ts.map +1 -0
package/dist/src/mcp/tools/metadata.js +222 -0
package/dist/src/mcp/tools/metadata.js.map +1 -0
package/dist/src/mcp/tools/source.d.ts +29 -0
package/dist/src/mcp/tools/source.d.ts.map +1 -0
package/dist/src/mcp/tools/source.js +196 -0
package/dist/src/mcp/tools/source.js.map +1 -0
package/dist/src/routes/annotations.d.ts +3 -0
package/dist/src/routes/annotations.d.ts.map +1 -0
package/dist/src/routes/annotations.js +83 -0
package/dist/src/routes/annotations.js.map +1 -0
package/dist/src/routes/browse-source.d.ts +3 -0
package/dist/src/routes/browse-source.d.ts.map +1 -0
package/dist/src/routes/browse-source.js +79 -0
package/dist/src/routes/browse-source.js.map +1 -0
package/dist/src/routes/browse.d.ts +3 -0
package/dist/src/routes/browse.d.ts.map +1 -0
package/dist/src/routes/browse.js +91 -0
package/dist/src/routes/browse.js.map +1 -0
package/dist/src/routes/config.d.ts +3 -0
package/dist/src/routes/config.d.ts.map +1 -0
package/dist/src/routes/config.js +145 -0
package/dist/src/routes/config.js.map +1 -0
package/dist/src/routes/context.d.ts +3 -0
package/dist/src/routes/context.d.ts.map +1 -0
package/dist/src/routes/context.js +287 -0
package/dist/src/routes/context.js.map +1 -0
package/dist/src/routes/diagrams.d.ts +3 -0
package/dist/src/routes/diagrams.d.ts.map +1 -0
package/dist/src/routes/diagrams.js +69 -0
package/dist/src/routes/diagrams.js.map +1 -0
package/dist/src/routes/documents.d.ts +11 -0
package/dist/src/routes/documents.d.ts.map +1 -0
package/dist/src/routes/documents.js +450 -0
package/dist/src/routes/documents.js.map +1 -0
package/dist/src/routes/export.d.ts +3 -0
package/dist/src/routes/export.d.ts.map +1 -0
package/dist/src/routes/export.js +280 -0
package/dist/src/routes/export.js.map +1 -0
package/dist/src/routes/files.d.ts +3 -0
package/dist/src/routes/files.d.ts.map +1 -0
package/dist/src/routes/files.js +180 -0
package/dist/src/routes/files.js.map +1 -0
package/dist/src/routes/images.d.ts +3 -0
package/dist/src/routes/images.d.ts.map +1 -0
package/dist/src/routes/images.js +49 -0
package/dist/src/routes/images.js.map +1 -0
package/dist/src/routes/metadata.d.ts +3 -0
package/dist/src/routes/metadata.d.ts.map +1 -0
package/dist/src/routes/metadata.js +131 -0
package/dist/src/routes/metadata.js.map +1 -0
package/dist/src/routes/shape-libraries.d.ts +3 -0
package/dist/src/routes/shape-libraries.d.ts.map +1 -0
package/dist/src/routes/shape-libraries.js +118 -0
package/dist/src/routes/shape-libraries.js.map +1 -0
package/dist/src/routes/wordcloud.d.ts +3 -0
package/dist/src/routes/wordcloud.d.ts.map +1 -0
package/dist/src/routes/wordcloud.js +95 -0
package/dist/src/routes/wordcloud.js.map +1 -0
package/dist/src/server.d.ts +7 -0
package/dist/src/server.d.ts.map +1 -0
package/dist/src/server.js +93 -0
package/dist/src/server.js.map +1 -0
package/dist/starter-doc/.living-doc.json +52 -0
package/dist/starter-doc/ADRS/2026_01_01_[ADR]_example_architecture_decision.md +59 -0
package/dist/starter-doc/AI/2026_01_01_how_to.md +112 -0
package/dist/starter-doc/AI/PROJECT-INSTRUCTIONS.md +172 -0
package/dist/starter-doc/AI/PROJECT-STACK.md +77 -0
package/dist/starter-doc/AI/PROJECT-USEFUL-COMMANDS.md +80 -0
package/dist/starter-doc/AI/default/AGENTS.md +31 -0
package/dist/starter-doc/AI/default/CLAUDE.md +31 -0
package/dist/starter-doc/AI/default/MEMORY.md +24 -0
package/dist/starter-doc/AI/rules/no-magic-numbers.md +18 -0
package/dist/starter-doc/AI/rules/track-current-work.md +23 -0
package/dist/starter-doc/WORKLOG/current-task.md +57 -0
package/dist/starter-doc-fr/.living-doc.json +52 -0
package/dist/starter-doc-fr/ADRS/2026_01_01_[ADR]_example_architecture_decision.md +59 -0
package/dist/starter-doc-fr/AI/2026_01_01_how_to.md +100 -0
package/dist/starter-doc-fr/AI/PROJECT-INSTRUCTIONS.md +172 -0
package/dist/starter-doc-fr/AI/PROJECT-STACK.md +77 -0
package/dist/starter-doc-fr/AI/PROJECT-USEFUL-COMMANDS.md +80 -0
package/dist/starter-doc-fr/AI/default/AGENTS.md +31 -0
package/dist/starter-doc-fr/AI/default/CLAUDE.md +31 -0
package/dist/starter-doc-fr/AI/default/MEMORY.md +24 -0
package/dist/starter-doc-fr/AI/rules/no-magic-numbers.md +18 -0
package/dist/starter-doc-fr/AI/rules/track-current-work.md +23 -0
package/dist/starter-doc-fr/WORKLOG/current-task.md +57 -0
package/images/living_documentation.jpg +0 -0
package/images/readme-extra-files.png +0 -0
package/images/readme-filename-pattern.png +0 -0
package/images/readme-intelligent-search-demo.jpg +0 -0
package/images/readme-sidebar.png +0 -0
package/package.json +72 -0

package/dist/src/frontend/context.html ADDED Viewed

@@ -0,0 +1,1252 @@
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <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="https://cdn.tailwindcss.com?plugins=typography"></script>
+    <script>
+      tailwind.config = { darkMode: "class", theme: { extend: {} } };
+    </script>
+  </head>
+  <body
+    class="min-h-screen bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-100"
+  >
+    <header
+      class="h-14 border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900 flex items-center gap-3 px-4"
+    >
+      <a
+        href="/"
+        class="text-sm font-medium text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400"
+        data-i18n="context.back_to_docs"
+        >Back to docs</a
+      >
+      <h1 class="text-base font-semibold" data-i18n="context.title">
+        AI Context
+      </h1>
+      <span id="status" class="ml-auto text-xs text-gray-500"></span>
+    </header>
+    <main class="max-w-7xl mx-auto px-4 py-5 space-y-6">
+      <section class="space-y-1">
+        <h2 class="text-xl font-semibold" data-i18n="context.orientation_title">
+          AI orientation
+        </h2>
+        <p
+          class="text-sm text-gray-500 dark:text-gray-400"
+          data-i18n="context.orientation_intro"
+        >
+          Stable instructions and rules for AI-assisted development.
+        </p>
+      </section>
+      <section
+        class="grid min-w-0 grid-cols-1 xl:grid-cols-[minmax(0,1fr)_24rem] gap-5"
+      >
+        <div class="min-w-0 space-y-5">
+          <section
+            class="min-w-0 rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900 p-4"
+          >
+            <div class="flex items-center justify-between gap-3 mb-3">
+              <h2
+                class="text-sm font-semibold"
+                data-i18n="context.instructions_title"
+              >
+                Instruction files
+              </h2>
+              <div class="flex items-center gap-3">
+                <span
+                  id="instructionCount"
+                  class="text-xs text-gray-500"
+                ></span>
+                <button
+                  id="btnToggleInstructionBrowser"
+                  class="rounded-md border border-gray-300 px-2 py-1 text-xs font-semibold text-gray-600 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
+                  data-i18n="context.add_instruction_file"
+                >
+                  Add AI instruction file
+                </button>
+              </div>
+            </div>
+            <div
+              id="instructionBrowser"
+              class="hidden mb-3 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden"
+            >
+              <div
+                class="flex items-center gap-2 px-3 py-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700"
+              >
+                <button
+                  id="instructionBrowseUp"
+                  class="text-xs text-blue-600 dark:text-blue-400 hover:underline disabled:opacity-30 disabled:pointer-events-none shrink-0"
+                >
+                  <span data-i18n="common.up">↑ Up</span>
+                </button>
+                <span
+                  id="instructionBrowsePath"
+                  class="font-mono text-xs text-gray-400 dark:text-gray-500 truncate flex-1 text-right"
+                ></span>
+              </div>
+              <div
+                id="instructionBrowseList"
+                class="divide-y divide-gray-100 dark:divide-gray-800 max-h-52 overflow-y-auto"
+              ></div>
+            </div>
+            <div id="instructionList" class="space-y-2"></div>
+          </section>
+          <section
+            class="min-w-0 rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900 p-4"
+          >
+            <div class="flex items-center justify-between gap-3 mb-3">
+              <h2 class="text-sm font-semibold" data-i18n="context.rules_title">
+                AI rules
+              </h2>
+              <span
+                id="rulesFolder"
+                class="font-mono text-xs text-gray-400"
+              ></span>
+            </div>
+            <div id="ruleList" class="space-y-2"></div>
+          </section>
+          <section
+            class="min-w-0 rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900 p-4 space-y-3"
+          >
+            <div class="flex items-center justify-between gap-3">
+              <h2 class="text-sm font-semibold" data-i18n="context.mcp_title">
+                MCP explorer
+              </h2>
+              <button
+                id="btnRefreshMcp"
+                class="rounded-md border border-gray-300 px-2 py-1 text-xs font-semibold text-gray-600 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
+                data-i18n="context.mcp_refresh"
+              >
+                Refresh
+              </button>
+            </div>
+            <p
+              class="text-xs text-gray-500 dark:text-gray-400"
+              data-i18n="context.mcp_intro"
+            >
+              Verify the local Living Documentation MCP endpoint exposed to AI
+              tools.
+            </p>
+            <div class="grid grid-cols-2 gap-2 text-xs">
+              <div
+                class="rounded-md border border-gray-100 dark:border-gray-800 px-2 py-2"
+              >
+                <div class="text-gray-400" data-i18n="context.mcp_status">
+                  Status
+                </div>
+                <div id="mcpStatus" class="mt-1 font-semibold text-gray-500">
+                  -
+                </div>
+              </div>
+              <div
+                class="rounded-md border border-gray-100 dark:border-gray-800 px-2 py-2"
+              >
+                <div class="text-gray-400" data-i18n="context.mcp_transport">
+                  Transport
+                </div>
+                <div
+                  id="mcpTransport"
+                  class="mt-1 font-mono text-gray-700 dark:text-gray-200 truncate"
+                >
+                  -
+                </div>
+              </div>
+              <div
+                class="col-span-2 rounded-md border border-gray-100 dark:border-gray-800 px-2 py-2"
+              >
+                <div class="text-gray-400" data-i18n="context.mcp_endpoint">
+                  Endpoint
+                </div>
+                <div
+                  id="mcpEndpoint"
+                  class="mt-1 font-mono text-gray-700 dark:text-gray-200 break-all"
+                >
+                  -
+                </div>
+              </div>
+            </div>
+            <div>
+              <div class="mb-2 flex items-center justify-between gap-3">
+                <h3
+                  class="text-xs font-semibold text-gray-500"
+                  data-i18n="context.mcp_tools"
+                >
+                  Tools
+                </h3>
+                <div class="flex items-center gap-3">
+                  <span id="mcpToolCount" class="text-xs text-gray-400"></span>
+                  <button
+                    id="btnRunAllTools"
+                    type="button"
+                    class="rounded-md border border-gray-300 px-2 py-1 text-xs font-semibold text-gray-600 hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
+                    data-i18n="context.mcp_run_all_tools"
+                  >
+                    Run all tools
+                  </button>
+                </div>
+              </div>
+              <div id="mcpToolList" class="space-y-2"></div>
+            </div>
+            <div>
+              <div class="mb-2 flex items-center justify-between gap-3">
+                <h3
+                  class="text-xs font-semibold text-gray-500"
+                  data-i18n="context.mcp_prompts"
+                >
+                  Prompts
+                </h3>
+                <div class="flex items-center gap-3">
+                  <span
+                    id="mcpPromptCount"
+                    class="text-xs text-gray-400"
+                  ></span>
+                  <button
+                    id="btnGetAllPrompts"
+                    type="button"
+                    class="rounded-md border border-gray-300 px-2 py-1 text-xs font-semibold text-gray-600 hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
+                    data-i18n="context.mcp_get_all_prompts"
+                  >
+                    Get all prompts
+                  </button>
+                </div>
+              </div>
+              <div id="mcpPromptList" class="space-y-2"></div>
+            </div>
+          </section>
+        </div>
+        <aside class="min-w-0 max-w-full space-y-5">
+          <section
+            class="min-w-0 rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900 p-4 space-y-3"
+          >
+            <h2
+              class="text-sm font-semibold"
+              data-i18n="context.add_rule_title"
+            >
+              Add AI rule
+            </h2>
+            <div>
+              <label
+                for="ruleTitle"
+                class="block text-xs font-semibold text-gray-500 mb-1"
+                data-i18n="context.rule_title_label"
+                >Title</label
+              >
+              <input
+                id="ruleTitle"
+                class="min-w-0 w-full h-9 rounded-md border border-gray-300 bg-white px-2 text-sm dark:border-gray-700 dark:bg-gray-950"
+                data-i18n-placeholder="context.rule_title_placeholder"
+                placeholder="Avoid magic numbers"
+              />
+            </div>
+            <div>
+              <label
+                for="ruleSeverity"
+                class="block text-xs font-semibold text-gray-500 mb-1"
+                data-i18n="context.rule_severity_label"
+                >Severity</label
+              >
+              <select
+                id="ruleSeverity"
+                class="min-w-0 w-full h-9 rounded-md border border-gray-300 bg-white px-2 text-sm dark:border-gray-700 dark:bg-gray-950"
+              >
+                <option
+                  value="guideline"
+                  data-i18n="context.rule_severity_guideline"
+                >
+                  Guideline
+                </option>
+                <option
+                  value="warning"
+                  data-i18n="context.rule_severity_warning"
+                >
+                  Warning
+                </option>
+                <option
+                  value="required"
+                  data-i18n="context.rule_severity_required"
+                >
+                  Required
+                </option>
+              </select>
+            </div>
+            <div>
+              <label
+                for="ruleDescription"
+                class="block text-xs font-semibold text-gray-500 mb-1"
+                data-i18n="context.rule_description_label"
+                >Description</label
+              >
+              <input
+                id="ruleDescription"
+                class="min-w-0 w-full h-9 rounded-md border border-gray-300 bg-white px-2 text-sm dark:border-gray-700 dark:bg-gray-950"
+                data-i18n-placeholder="context.rule_description_placeholder"
+                placeholder="Name domain constants instead of repeating raw values."
+              />
+            </div>
+            <div>
+              <label
+                for="ruleTags"
+                class="block text-xs font-semibold text-gray-500 mb-1"
+                data-i18n="context.rule_tags_label"
+                >Tags</label
+              >
+              <input
+                id="ruleTags"
+                class="min-w-0 w-full h-9 rounded-md border border-gray-300 bg-white px-2 text-sm dark:border-gray-700 dark:bg-gray-950"
+                data-i18n-placeholder="context.rule_tags_placeholder"
+                placeholder="code-quality, maintainability"
+              />
+            </div>
+            <div>
+              <label
+                for="ruleAppliesTo"
+                class="block text-xs font-semibold text-gray-500 mb-1"
+                data-i18n="context.rule_applies_to_label"
+                >Applies to</label
+              >
+              <input
+                id="ruleAppliesTo"
+                class="min-w-0 w-full h-9 rounded-md border border-gray-300 bg-white px-2 text-sm dark:border-gray-700 dark:bg-gray-950"
+                data-i18n-placeholder="context.rule_applies_to_placeholder"
+                placeholder="src/**/*.ts, src/frontend/**/*.js"
+              />
+            </div>
+            <div>
+              <label
+                for="ruleBody"
+                class="block text-xs font-semibold text-gray-500 mb-1"
+                data-i18n="context.rule_body_label"
+                >Rule body</label
+              >
+              <textarea
+                id="ruleBody"
+                rows="7"
+                class="min-w-0 w-full rounded-md border border-gray-300 bg-white px-2 py-2 text-sm dark:border-gray-700 dark:bg-gray-950"
+                data-i18n-placeholder="context.rule_body_placeholder"
+                placeholder="Numeric constants with domain meaning should be named."
+              ></textarea>
+            </div>
+            <button
+              id="btnAddRule"
+              class="w-full h-9 rounded-md bg-blue-600 text-sm font-semibold text-white hover:bg-blue-700"
+              data-i18n="context.add_rule_button"
+            >
+              Add rule
+            </button>
+          </section>
+        </aside>
+      </section>
+    </main>
+    <div
+      id="confirm-modal"
+      class="hidden fixed inset-0 z-[60] bg-black/50 flex items-center justify-center p-4"
+      onclick="_confirmModalBackdrop(event)"
+    >
+      <div
+        class="w-full max-w-md bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-2xl p-5 flex flex-col gap-3"
+        onclick="event.stopPropagation()"
+      >
+        <h3
+          id="confirm-modal-title"
+          class="font-semibold text-gray-900 dark:text-gray-100"
+        ></h3>
+        <p
+          id="confirm-modal-message"
+          class="text-sm text-gray-700 dark:text-gray-200"
+        ></p>
+        <p
+          id="confirm-modal-detail"
+          class="text-xs text-gray-500 dark:text-gray-400 italic break-all"
+        ></p>
+        <div class="flex justify-end gap-2 mt-2">
+          <button
+            id="confirm-modal-cancel"
+            type="button"
+            class="text-sm px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+          ></button>
+          <button
+            id="confirm-modal-ok"
+            type="button"
+            class="text-sm px-4 py-1.5 rounded-lg text-white font-semibold transition-colors"
+          ></button>
+        </div>
+      </div>
+    </div>
+    <script>
+      const els = {
+        status: document.getElementById("status"),
+        instructionList: document.getElementById("instructionList"),
+        instructionCount: document.getElementById("instructionCount"),
+        instructionBrowser: document.getElementById("instructionBrowser"),
+        instructionBrowseUp: document.getElementById("instructionBrowseUp"),
+        instructionBrowsePath: document.getElementById("instructionBrowsePath"),
+        instructionBrowseList: document.getElementById("instructionBrowseList"),
+        btnToggleInstructionBrowser: document.getElementById(
+          "btnToggleInstructionBrowser",
+        ),
+        ruleList: document.getElementById("ruleList"),
+        rulesFolder: document.getElementById("rulesFolder"),
+        btnRefreshMcp: document.getElementById("btnRefreshMcp"),
+        mcpStatus: document.getElementById("mcpStatus"),
+        mcpTransport: document.getElementById("mcpTransport"),
+        mcpEndpoint: document.getElementById("mcpEndpoint"),
+        mcpToolCount: document.getElementById("mcpToolCount"),
+        mcpToolList: document.getElementById("mcpToolList"),
+        mcpPromptCount: document.getElementById("mcpPromptCount"),
+        mcpPromptList: document.getElementById("mcpPromptList"),
+        btnRunAllTools: document.getElementById("btnRunAllTools"),
+        btnGetAllPrompts: document.getElementById("btnGetAllPrompts"),
+        ruleTitle: document.getElementById("ruleTitle"),
+        ruleSeverity: document.getElementById("ruleSeverity"),
+        ruleDescription: document.getElementById("ruleDescription"),
+        ruleTags: document.getElementById("ruleTags"),
+        ruleAppliesTo: document.getElementById("ruleAppliesTo"),
+        ruleBody: document.getElementById("ruleBody"),
+        btnAddRule: document.getElementById("btnAddRule"),
+      };
+      let orientation = null;
+      let instructionBrowseCurrent = "";
+      let instructionBrowseParent = "";
+      const mcpItemsByKind = {
+        tool: new Map(),
+        prompt: new Map(),
+      };
+      function setStatus(message) {
+        els.status.textContent = message || "";
+      }
+      function escapeHtml(value) {
+        return String(value ?? "").replace(
+          /[&<>"']/g,
+          (char) =>
+            ({
+              "&": "&amp;",
+              "<": "&lt;",
+              ">": "&gt;",
+              '"': "&quot;",
+              "'": "&#39;",
+            })[char],
+        );
+      }
+      function splitList(value) {
+        return value
+          .split(",")
+          .map((item) => item.trim())
+          .filter(Boolean);
+      }
+      function basename(value) {
+        return (
+          String(value || "")
+            .split(/[\\/]/)
+            .pop() || ""
+        );
+      }
+      function documentHref(docPath) {
+        const docId = encodeURIComponent(
+          String(docPath || "").replace(/\.md$/i, ""),
+        );
+        return "/?doc=" + encodeURIComponent(docId);
+      }
+      function formatMessage(key, values) {
+        return Object.entries(values || {}).reduce(
+          (message, [name, value]) => message.replaceAll(`{${name}}`, value),
+          window.t(key),
+        );
+      }
+      function rootLabel(value) {
+        return window.t(`context.root.${value}`);
+      }
+      function typeLabel(value) {
+        return window.t(`context.type.${value}`);
+      }
+      function severityLabel(value) {
+        return window.t(`context.rule_severity_${value}`) ===
+          `context.rule_severity_${value}`
+          ? value
+          : window.t(`context.rule_severity_${value}`);
+      }
+      function renderEmpty(container, key) {
+        container.innerHTML = `<p class="text-sm text-gray-400">${window.t(key)}</p>`;
+      }
+      function renderInstructionFiles(items) {
+        els.instructionCount.textContent = `${items.filter((item) => item.exists).length}/${items.length}`;
+        if (!items.length) {
+          renderEmpty(els.instructionList, "context.no_instructions");
+          return;
+        }
+        els.instructionList.innerHTML = items
+          .map((item) => {
+            const statusClass = item.exists
+              ? "text-green-600 dark:text-green-400"
+              : "text-red-600 dark:text-red-400";
+            const statusLabel = item.exists
+              ? window.t("context.exists")
+              : window.t("context.missing");
+            const size =
+              item.size === null ? "" : ` · ${Math.round(item.size / 1024)} KB`;
+            return `
+            <div class="flex items-start justify-between gap-3 rounded-md border border-gray-100 dark:border-gray-800 px-3 py-2">
+              <div class="min-w-0">
+                <a href="${escapeHtml(documentHref(item.path))}" class="font-mono text-xs break-all text-blue-600 hover:underline dark:text-blue-400">${escapeHtml(item.path)}</a>
+                <div class="text-xs text-gray-400">${escapeHtml(rootLabel(item.root))} · ${escapeHtml(typeLabel(item.type))}${size}</div>
+              </div>
+              <div class="flex items-center gap-3 shrink-0">
+                <span class="text-xs font-semibold ${statusClass}">${statusLabel}</span>
+                ${
+                  item.exists
+                    ? `<button data-filename="${escapeHtml(basename(item.path))}" class="instruction-remove text-xs text-red-500 hover:text-red-700 dark:hover:text-red-400">${window.t("common.remove")}</button>`
+                    : ""
+                }
+              </div>
+            </div>
+          `;
+          })
+          .join("");
+        els.instructionList
+          .querySelectorAll(".instruction-remove")
+          .forEach((button) => {
+            button.addEventListener("click", () =>
+              removeInstructionFile(button.dataset.filename),
+            );
+          });
+      }
+      async function loadInstructionBrowse(dirPath) {
+        els.instructionBrowseList.innerHTML = `<p class="px-3 py-4 text-xs text-gray-400 text-center">${window.t("common.loading")}</p>`;
+        try {
+          const data = await fetch(
+            "/api/browse?path=" + encodeURIComponent(dirPath),
+          ).then((res) => res.json());
+          instructionBrowseCurrent = data.current;
+          instructionBrowseParent = data.parent;
+          els.instructionBrowsePath.textContent = data.current;
+          els.instructionBrowseUp.disabled = !data.parent;
+          const instructionNames = new Set(
+            ((orientation && orientation.instructions) || []).map((item) =>
+              basename(item.path),
+            ),
+          );
+          const rows = [];
+          for (const dir of data.dirs || []) {
+            rows.push(`
+              <button data-path="${escapeHtml(dir.path)}" class="instruction-dir w-full flex items-center gap-2 px-3 py-2 text-sm text-left hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
+                <span class="text-gray-400 shrink-0">&#128193;</span>
+                <span class="text-gray-700 dark:text-gray-300 truncate">${escapeHtml(dir.name)}</span>
+              </button>
+            `);
+          }
+          for (const file of data.files || []) {
+            const added = instructionNames.has(file.name);
+            rows.push(`
+              <div class="flex items-center justify-between gap-2 px-3 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-800">
+                <span class="flex items-center gap-2 text-gray-700 dark:text-gray-300 min-w-0">
+                  <span class="text-gray-400 shrink-0">&#128196;</span>
+                  <span class="truncate">${escapeHtml(file.name)}</span>
+                </span>
+                ${
+                  added
+                    ? `<span class="text-xs text-green-600 dark:text-green-400 shrink-0">${window.t("context.added")}</span>`
+                    : `<button data-path="${escapeHtml(file.path)}" class="instruction-add text-xs text-blue-600 dark:text-blue-400 hover:underline shrink-0">${window.t("context.add_file_action")}</button>`
+                }
+              </div>
+            `);
+          }
+          els.instructionBrowseList.innerHTML = rows.length
+            ? rows.join("")
+            : `<p class="px-3 py-4 text-xs text-gray-400 text-center">${window.t("common.empty_dir")}</p>`;
+          els.instructionBrowseList
+            .querySelectorAll(".instruction-dir")
+            .forEach((button) => {
+              button.addEventListener("click", () =>
+                loadInstructionBrowse(button.dataset.path),
+              );
+            });
+          els.instructionBrowseList
+            .querySelectorAll(".instruction-add")
+            .forEach((button) => {
+              button.addEventListener("click", () =>
+                addInstructionFile(button.dataset.path),
+              );
+            });
+        } catch {
+          els.instructionBrowseList.innerHTML = `<p class="px-3 py-4 text-xs text-red-400 text-center">${window.t("common.cannot_read_dir")}</p>`;
+        }
+      }
+      function toggleInstructionBrowser() {
+        const isHidden = els.instructionBrowser.classList.toggle("hidden");
+        els.btnToggleInstructionBrowser.textContent = window.t(
+          isHidden
+            ? "context.add_instruction_file"
+            : "context.hide_instruction_browser",
+        );
+        if (
+          !isHidden &&
+          !instructionBrowseCurrent &&
+          orientation &&
+          orientation.sourceRoot
+        ) {
+          loadInstructionBrowse(orientation.sourceRoot);
+        }
+      }
+      async function addInstructionFile(filePath) {
+        setStatus(window.t("context.adding_instruction_file"));
+        const res = await fetch("/api/context/instructions", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ path: filePath }),
+        });
+        if (!res.ok) throw new Error(await res.text());
+        await loadOrientation();
+        if (!els.instructionBrowser.classList.contains("hidden")) {
+          await loadInstructionBrowse(instructionBrowseCurrent);
+        }
+      }
+      async function removeInstructionFile(filename) {
+        const ok = await window.showConfirm({
+          title: window.t("context.remove_instruction_title"),
+          message: formatMessage("context.remove_instruction_message", {
+            name: filename,
+          }),
+          detail: window.t("context.remove_instruction_detail"),
+          confirmLabel: window.t("common.remove"),
+          danger: true,
+        });
+        if (!ok) return;
+        setStatus(window.t("context.removing_instruction_file"));
+        const res = await fetch(
+          "/api/context/instructions/" + encodeURIComponent(filename),
+          {
+            method: "DELETE",
+          },
+        );
+        if (!res.ok) throw new Error(await res.text());
+        await loadOrientation();
+        if (!els.instructionBrowser.classList.contains("hidden")) {
+          await loadInstructionBrowse(instructionBrowseCurrent);
+        }
+      }
+      function renderRules(items) {
+        if (!items.length) {
+          renderEmpty(els.ruleList, "context.no_rules");
+          return;
+        }
+        els.ruleList.innerHTML = items
+          .map(
+            (rule) => `
+          <article class="rounded-md border border-gray-100 dark:border-gray-800 px-3 py-2">
+            <div class="flex items-start justify-between gap-3">
+              <div class="min-w-0">
+                <h3 class="text-sm font-semibold">
+                  <a href="${escapeHtml(documentHref(rule.path))}" class="text-blue-600 hover:underline dark:text-blue-400">${escapeHtml(rule.title)}</a>
+                </h3>
+                <a href="${escapeHtml(documentHref(rule.path))}" class="font-mono text-xs text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 break-all">${escapeHtml(rule.path)}</a>
+              </div>
+              <span class="rounded bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-600 dark:bg-gray-800 dark:text-gray-300">${escapeHtml(severityLabel(rule.severity))}</span>
+            </div>
+            <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">${escapeHtml(rule.description)}</p>
+            <div class="mt-2 flex flex-wrap gap-1 text-xs text-blue-600 dark:text-blue-400">
+              ${(rule.tags || []).map((tag) => `<span>${escapeHtml(tag)}</span>`).join("")}
+            </div>
+            <div class="mt-2 font-mono text-xs text-gray-400 break-all">${escapeHtml((rule.appliesTo || []).join(", "))}</div>
+          </article>
+        `,
+          )
+          .join("");
+      }
+      function formatJson(value) {
+        if (!value || typeof value !== "object") return "";
+        return JSON.stringify(value, null, 2);
+      }
+      function exampleValueForSchema(schema) {
+        if (!schema || typeof schema !== "object") return null;
+        if (schema.type === "string") return "";
+        if (schema.type === "number" || schema.type === "integer") return 0;
+        if (schema.type === "boolean") return false;
+        if (schema.type === "array") return [];
+        if (schema.type === "object" || schema.properties) {
+          const result = {};
+          const properties = schema.properties || {};
+          const required = Array.isArray(schema.required)
+            ? schema.required
+            : [];
+          const keys = required.length ? required : [];
+          keys.forEach((key) => {
+            result[key] = exampleValueForSchema(properties[key]) ?? "";
+          });
+          return result;
+        }
+        return null;
+      }
+      function exampleToolArguments(item) {
+        if (!item || typeof item !== "object") return {};
+        const example = exampleValueForSchema(item.inputSchema);
+        return example && typeof example === "object" && !Array.isArray(example)
+          ? example
+          : {};
+      }
+      function examplePromptArguments(item) {
+        if (!item || typeof item !== "object" || !Array.isArray(item.arguments))
+          return {};
+        return item.arguments.reduce((acc, argument) => {
+          if (argument.required) acc[argument.name] = "";
+          return acc;
+        }, {});
+      }
+      function renderMcpArgument(argument) {
+        const required = argument.required
+          ? window.t("context.mcp_required")
+          : window.t("context.mcp_optional");
+        return `
+          <li class="rounded border border-gray-100 px-2 py-1 dark:border-gray-800">
+            <div class="flex flex-wrap items-center gap-2">
+              <span class="font-mono text-xs font-semibold text-gray-800 dark:text-gray-100">${escapeHtml(argument.name || "-")}</span>
+              <span class="text-[11px] uppercase tracking-wide text-gray-400">${escapeHtml(required)}</span>
+            </div>
+            ${argument.description ? `<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">${escapeHtml(argument.description)}</p>` : ""}
+          </li>
+        `;
+      }
+      function renderMcpItems(container, items, emptyKey, kind) {
+        if (mcpItemsByKind[kind]) {
+          mcpItemsByKind[kind].clear();
+          items.forEach((item) => {
+            const label = typeof item === "string" ? item : item.name;
+            if (label) mcpItemsByKind[kind].set(label, item);
+          });
+        }
+        if (!items.length) {
+          container.innerHTML = `<p class="text-xs text-gray-400">${window.t(emptyKey)}</p>`;
+          return;
+        }
+        container.innerHTML = items
+          .map((item) => {
+            const label = typeof item === "string" ? item : item.name;
+            const description =
+              typeof item === "string" ? "" : item.description;
+            const schema =
+              typeof item === "string" ? "" : formatJson(item.inputSchema);
+            const args = Array.isArray(item.arguments) ? item.arguments : [];
+            const exampleArgs =
+              kind === "tool"
+                ? exampleToolArguments(item)
+                : examplePromptArguments(item);
+            return `
+            <details class="rounded-md border border-gray-100 bg-gray-50 px-3 py-2 dark:border-gray-800 dark:bg-gray-950">
+              <summary class="cursor-pointer select-none font-mono text-xs font-semibold text-blue-700 dark:text-blue-300">${escapeHtml(label)}</summary>
+              ${description ? `<p class="mt-2 whitespace-pre-wrap text-xs leading-5 text-gray-600 dark:text-gray-300">${escapeHtml(description)}</p>` : ""}
+              ${
+                kind === "tool" && schema
+                  ? `
+                    <div class="mt-3">
+                      <h4 class="mb-1 text-xs font-semibold text-gray-500">${window.t("context.mcp_input_schema")}</h4>
+                      <pre class="max-h-56 overflow-auto rounded bg-white p-2 text-xs text-gray-700 dark:bg-gray-900 dark:text-gray-200"><code>${escapeHtml(schema)}</code></pre>
+                    </div>
+                  `
+                  : ""
+              }
+              ${
+                kind === "prompt" && args.length
+                  ? `
+                    <div class="mt-3">
+                      <h4 class="mb-1 text-xs font-semibold text-gray-500">${window.t("context.mcp_arguments")}</h4>
+                      <ul class="space-y-1">${args.map(renderMcpArgument).join("")}</ul>
+                    </div>
+                  `
+                  : ""
+              }
+              <div class="mt-3 border-t border-gray-200 pt-3 dark:border-gray-800">
+                <label class="mb-1 block text-xs font-semibold text-gray-500">${window.t("context.mcp_request_json")}</label>
+                <textarea data-mcp-args="${escapeHtml(label)}" data-mcp-kind="${escapeHtml(kind)}" rows="4" spellcheck="false" class="w-full rounded border border-gray-200 bg-white px-2 py-2 font-mono text-xs text-gray-800 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100">${escapeHtml(JSON.stringify(exampleArgs, null, 2))}</textarea>
+                <div class="mt-2 flex items-center justify-between gap-3">
+                  <span data-mcp-error="${escapeHtml(label)}" data-mcp-kind="${escapeHtml(kind)}" class="text-xs text-red-500"></span>
+                  <button data-mcp-run="${escapeHtml(label)}" data-mcp-kind="${escapeHtml(kind)}" type="button" class="rounded-md bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-blue-700">
+                    ${window.t(kind === "tool" ? "context.mcp_run_tool" : "context.mcp_get_prompt")}
+                  </button>
+                </div>
+                <div data-mcp-result="${escapeHtml(label)}" data-mcp-kind="${escapeHtml(kind)}" class="mt-2 hidden text-xs"></div>
+              </div>
+            </details>
+          `;
+          })
+          .join("");
+        container.querySelectorAll("[data-mcp-run]").forEach((button) => {
+          button.addEventListener("click", () =>
+            runMcpItem(button.dataset.mcpKind, button.dataset.mcpRun),
+          );
+        });
+      }
+      function parseSseJson(text) {
+        const match = text.match(/^data:\s*(\{.*\})\s*$/m);
+        if (!match)
+          throw new Error(text.slice(0, 300) || "No MCP response body");
+        return JSON.parse(match[1]);
+      }
+      async function mcpRpc(id, method, params) {
+        const res = await fetch("/mcp", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json, text/event-stream",
+          },
+          body: JSON.stringify({ jsonrpc: "2.0", id, method, params }),
+        });
+        const text = await res.text();
+        if (!res.ok) throw new Error(text || `HTTP ${res.status}`);
+        return parseSseJson(text);
+      }
+      async function initializeMcpForTest() {
+        await mcpRpc(1, "initialize", {
+          protocolVersion: "2025-03-26",
+          capabilities: {},
+          clientInfo: {
+            name: "living-ai-documentation-context",
+            version: "1.0.0",
+          },
+        });
+      }
+      function findMcpElement(selector, kind, name) {
+        return document.querySelector(
+          `${selector}[data-mcp-kind="${CSS.escape(kind)}"][${selector.includes("args") ? "data-mcp-args" : selector.includes("error") ? "data-mcp-error" : "data-mcp-result"}="${CSS.escape(name)}"]`,
+        );
+      }
+      function wrapCodeBlock(value, language = "") {
+        const text = String(value ?? "").replaceAll("```", "`\\`\\`");
+        return `\`\`\`${language}\n${text}\n\`\`\``;
+      }
+      function wrapJsonBlock(value) {
+        return wrapCodeBlock(JSON.stringify(value, null, 2), "json");
+      }
+      function formatMaybeJsonText(value) {
+        if (typeof value !== "string") return wrapJsonBlock(value);
+        try {
+          return wrapJsonBlock(JSON.parse(value));
+        } catch {
+          return value;
+        }
+      }
+      function formatMcpDisplayValue(value) {
+        if (typeof value === "string") return value;
+        if (!value || typeof value !== "object") return String(value ?? "");
+        if (value.error) return wrapJsonBlock(value.error);
+        const result = value.result;
+        if (!result || typeof result !== "object") return wrapJsonBlock(value);
+        if (Array.isArray(result.messages)) {
+          return result.messages
+            .map((message) => {
+              const role = message.role ? `[${message.role}]` : "";
+              const content =
+                message.content?.text ?? message.content ?? message;
+              return `${role}\n${formatMaybeJsonText(content)}`.trim();
+            })
+            .join("\n\n");
+        }
+        if (Array.isArray(result.content)) {
+          return result.content
+            .map((part) => {
+              if (
+                part &&
+                part.type === "text" &&
+                typeof part.text === "string"
+              ) {
+                return formatMaybeJsonText(part.text);
+              }
+              return wrapJsonBlock(part);
+            })
+            .join("\n\n");
+        }
+        return wrapJsonBlock(result);
+      }
+      function parseJsonIfPossible(value) {
+        if (typeof value !== "string") return value;
+        try {
+          return JSON.parse(value);
+        } catch {
+          return value;
+        }
+      }
+      function extractToolResultForMarkdown(envelope) {
+        const result = envelope?.result;
+        if (!result || typeof result !== "object") return envelope;
+        if (!Array.isArray(result.content)) return result;
+        const parts = result.content.map((part) => {
+          if (part && part.type === "text" && typeof part.text === "string") {
+            return parseJsonIfPossible(part.text);
+          }
+          return part;
+        });
+        return parts.length === 1 ? parts[0] : parts;
+      }
+      function buildToolRunMarkdown(item, name, args, envelope) {
+        const description =
+          item && typeof item === "object" && item.description
+            ? String(item.description)
+            : window.t("context.empty");
+        const inputSchema =
+          item && typeof item === "object" && item.inputSchema
+            ? item.inputSchema
+            : {};
+        const request = {
+          jsonrpc: "2.0",
+          method: "tools/call",
+          params: {
+            name,
+            arguments: args,
+          },
+        };
+        const result = extractToolResultForMarkdown(envelope);
+        const resultIsJson = typeof result !== "string";
+        return [
+          `# MCP tool: \`${name}\``,
+          "",
+          "## Description",
+          "",
+          description,
+          "",
+          "## Schéma d'entrée",
+          "",
+          wrapJsonBlock(inputSchema),
+          "",
+          "## Requête effectuée",
+          "",
+          wrapJsonBlock(request),
+          "",
+          "## Résultat",
+          "",
+          resultIsJson ? wrapJsonBlock(result) : String(result),
+          "",
+        ].join("\n");
+      }
+      function stringifyMcpErrorDetail(value) {
+        if (typeof value === "string") return value;
+        if (!value || typeof value !== "object") return String(value ?? "");
+        if (value.error) return JSON.stringify(value.error, null, 2);
+        const result = value.result;
+        if (result?.isError) {
+          const parts = Array.isArray(result.content)
+            ? result.content
+                .map((part) => {
+                  if (
+                    part &&
+                    part.type === "text" &&
+                    typeof part.text === "string"
+                  )
+                    return part.text;
+                  return JSON.stringify(part, null, 2);
+                })
+                .filter(Boolean)
+            : [];
+          return parts.join("\n\n") || JSON.stringify(result, null, 2);
+        }
+        return JSON.stringify(value, null, 2);
+      }
+      function setMcpRunning(kind, name) {
+        const container = findMcpElement("[data-mcp-result]", kind, name);
+        const error = findMcpElement("[data-mcp-error]", kind, name);
+        if (error) error.textContent = "";
+        if (!container) return;
+        container.classList.remove("hidden");
+        container.innerHTML = `<span class="text-gray-500 dark:text-gray-400">${escapeHtml(window.t("context.mcp_running"))}</span>`;
+      }
+      function setMcpResultLink(kind, name, docPath) {
+        const container = findMcpElement("[data-mcp-result]", kind, name);
+        const error = findMcpElement("[data-mcp-error]", kind, name);
+        if (error) error.textContent = "";
+        if (!container) return;
+        const href = documentHref(docPath);
+        container.classList.remove("hidden");
+        container.innerHTML = `
+          <div class="text-gray-500 dark:text-gray-400 mb-1">${escapeHtml(window.t("context.mcp_saved_to"))}</div>
+          <a href="${escapeHtml(href)}" target="_blank" rel="noopener" class="inline-flex items-center gap-1.5 rounded-md bg-green-50 px-3 py-1.5 font-mono text-xs font-semibold text-green-700 hover:bg-green-100 dark:bg-green-950 dark:text-green-300 dark:hover:bg-green-900">
+            <span>📄</span><span>${escapeHtml(docPath)}</span>
+          </a>
+        `;
+      }
+      function setMcpResultError(kind, name, message, detail) {
+        const container = findMcpElement("[data-mcp-result]", kind, name);
+        const error = findMcpElement("[data-mcp-error]", kind, name);
+        const detailText = String(detail || "").trim();
+        if (container) {
+          if (detailText) {
+            container.classList.remove("hidden");
+            container.innerHTML = `
+              <pre class="max-h-56 overflow-auto whitespace-pre-wrap break-words rounded-md border border-red-200 bg-red-50 p-2 font-mono text-xs leading-5 text-red-700 dark:border-red-900 dark:bg-red-950 dark:text-red-200"><code>${escapeHtml(detailText)}</code></pre>
+            `;
+          } else {
+            container.classList.add("hidden");
+            container.innerHTML = "";
+          }
+        }
+        if (error) error.textContent = message || window.t("context.mcp_error");
+      }
+      async function saveMcpResult(name, content, kind) {
+        const res = await fetch("/api/context/mcp-result", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ name, content, kind }),
+        });
+        if (!res.ok)
+          throw new Error((await res.text()) || `HTTP ${res.status}`);
+        return res.json();
+      }
+      async function runAllMcpItems(kind) {
+        const container = kind === "tool" ? els.mcpToolList : els.mcpPromptList;
+        const buttons = Array.from(
+          container.querySelectorAll("[data-mcp-run]"),
+        );
+        if (!buttons.length) return;
+        els.btnRunAllTools.disabled = true;
+        els.btnGetAllPrompts.disabled = true;
+        const total = buttons.length;
+        try {
+          for (let i = 0; i < buttons.length; i++) {
+            const name = buttons[i].dataset.mcpRun;
+            buttons[i].closest("details")?.setAttribute("open", "");
+            setStatus(
+              formatMessage("context.mcp_running_all", {
+                current: i + 1,
+                total,
+              }),
+            );
+            await runMcpItem(kind, name);
+          }
+          setStatus(formatMessage("context.mcp_done_all", { total }));
+        } finally {
+          els.btnRunAllTools.disabled = false;
+          els.btnGetAllPrompts.disabled = false;
+        }
+      }
+      async function runMcpItem(kind, name) {
+        const textarea = findMcpElement("[data-mcp-args]", kind, name);
+        const error = findMcpElement("[data-mcp-error]", kind, name);
+        if (error) error.textContent = "";
+        let args = {};
+        try {
+          args =
+            textarea && textarea.value.trim() ? JSON.parse(textarea.value) : {};
+        } catch {
+          if (error) error.textContent = window.t("context.mcp_invalid_json");
+          return;
+        }
+        setMcpRunning(kind, name);
+        try {
+          await initializeMcpForTest();
+          const envelope =
+            kind === "tool"
+              ? await mcpRpc(2, "tools/call", { name, arguments: args })
+              : await mcpRpc(2, "prompts/get", { name, arguments: args });
+          if (envelope.error || envelope.result?.isError) {
+            setMcpResultError(
+              kind,
+              name,
+              window.t("context.mcp_error"),
+              stringifyMcpErrorDetail(envelope),
+            );
+            return;
+          }
+          const item = mcpItemsByKind[kind]?.get(name);
+          const markdown =
+            kind === "tool"
+              ? buildToolRunMarkdown(item, name, args, envelope)
+              : formatMcpDisplayValue(envelope);
+          const { path: docPath } = await saveMcpResult(name, markdown, kind);
+          setMcpResultLink(kind, name, docPath);
+        } catch (err) {
+          setMcpResultError(kind, name, err.message || String(err));
+        }
+      }
+      function renderMcpExplorer(data) {
+        const tools = Array.isArray(data.tools) ? data.tools : [];
+        const prompts = Array.isArray(data.prompts) ? data.prompts : [];
+        els.mcpStatus.textContent = window.t("context.mcp_available");
+        els.mcpStatus.className =
+          "mt-1 font-semibold text-green-600 dark:text-green-400";
+        els.mcpTransport.textContent = data.transport || "-";
+        els.mcpEndpoint.textContent = data.endpoint || "POST /mcp";
+        els.mcpToolCount.textContent = String(tools.length);
+        els.mcpPromptCount.textContent = String(prompts.length);
+        renderMcpItems(els.mcpToolList, tools, "context.mcp_no_tools", "tool");
+        renderMcpItems(
+          els.mcpPromptList,
+          prompts,
+          "context.mcp_no_prompts",
+          "prompt",
+        );
+      }
+      function renderMcpUnavailable() {
+        els.mcpStatus.textContent = window.t("context.mcp_unavailable");
+        els.mcpStatus.className =
+          "mt-1 font-semibold text-red-600 dark:text-red-400";
+        els.mcpTransport.textContent = "-";
+        els.mcpEndpoint.textContent = "/mcp";
+        els.mcpToolCount.textContent = "0";
+        els.mcpPromptCount.textContent = "0";
+        renderMcpItems(els.mcpToolList, [], "context.mcp_no_tools", "tool");
+        renderMcpItems(
+          els.mcpPromptList,
+          [],
+          "context.mcp_no_prompts",
+          "prompt",
+        );
+      }
+      async function loadMcpExplorer() {
+        try {
+          const res = await fetch("/mcp");
+          if (!res.ok) throw new Error(await res.text());
+          renderMcpExplorer(await res.json());
+        } catch {
+          renderMcpUnavailable();
+        }
+      }
+      function renderOrientation(data) {
+        orientation = data;
+        renderInstructionFiles(data.instructions || []);
+        renderRules(data.rules || []);
+        els.rulesFolder.textContent = data.rulesFolder || "";
+      }
+      async function loadOrientation() {
+        setStatus(window.t("context.loading"));
+        const res = await fetch("/api/context/orientation");
+        if (!res.ok) throw new Error(await res.text());
+        renderOrientation(await res.json());
+        setStatus("");
+      }
+      async function addRule() {
+        const payload = {
+          title: els.ruleTitle.value.trim(),
+          severity: els.ruleSeverity.value,
+          description: els.ruleDescription.value.trim(),
+          tags: splitList(els.ruleTags.value),
+          appliesTo: splitList(els.ruleAppliesTo.value),
+          body: els.ruleBody.value.trim(),
+        };
+        if (!payload.title) {
+          setStatus(window.t("context.rule_title_required"));
+          return;
+        }
+        setStatus(window.t("context.saving_rule"));
+        const res = await fetch("/api/context/rules", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload),
+        });
+        if (!res.ok) throw new Error(await res.text());
+        els.ruleTitle.value = "";
+        els.ruleDescription.value = "";
+        els.ruleTags.value = "";
+        els.ruleAppliesTo.value = "";
+        els.ruleBody.value = "";
+        await loadOrientation();
+      }
+      async function loadContextI18n() {
+        try {
+          const cfgRes = await fetch("/api/config");
+          const cfg = cfgRes.ok ? await cfgRes.json() : {};
+          await window.initI18n(cfg.language || "en");
+        } catch {
+          await window.initI18n("en");
+        }
+        window.applyI18n();
+        document.title = window.t("context.title");
+      }
+      async function init() {
+        await loadContextI18n();
+        await loadOrientation();
+        await loadMcpExplorer();
+      }
+      els.btnAddRule.addEventListener("click", () => {
+        addRule().catch((err) => setStatus(err.message));
+      });
+      els.btnToggleInstructionBrowser.addEventListener(
+        "click",
+        toggleInstructionBrowser,
+      );
+      els.btnRefreshMcp.addEventListener("click", () => {
+        loadMcpExplorer().catch(() => renderMcpUnavailable());
+      });
+      els.btnRunAllTools.addEventListener("click", () => {
+        runAllMcpItems("tool").catch((err) => setStatus(err.message));
+      });
+      els.btnGetAllPrompts.addEventListener("click", () => {
+        runAllMcpItems("prompt").catch((err) => setStatus(err.message));
+      });
+      els.instructionBrowseUp.addEventListener("click", () => {
+        if (instructionBrowseParent)
+          loadInstructionBrowse(instructionBrowseParent);
+      });
+      init().catch((err) => setStatus(err.message));
+    </script>
+  </body>
+</html>