feat(snippets): a snippet has notes; when_to_use is the situation it is ranked on (#4378)

A snippet had no field for prose, so what a session learned about one went
into when_to_use — the trigger joined onto every chunk it is embedded as. A
sweep found write-ups of up to 3 KB there, headings and all.

- notes: stored after the code under `## Notes`, parsed back from the body,
  carried by every path that rebuilds it (update, merge, un-merge). A
  snippet with no notes composes the body it always did.
- create/update_snippet (MCP) take notes and return trigger_advice when
  when_to_use is long, headed or multi-paragraph. Advice, not a refusal.
- Tool docs, the reusing-code skill and the editor hint describe the trigger
  as the situation and point the explanation at notes.
- Editor gains a Notes field; the detail view renders it as markdown.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/views/SnippetDetailView.vue

@@ -9,6 +9,7 @@ import {
 } from "@/api/snippets";
 import { useToastStore } from "@/stores/toast";
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
+import { renderMarkdown } from "@/utils/markdown";
 
 const route = useRoute();
 const router = useRouter();
@@ -184,6 +185,11 @@ async function confirmDelete() {
         <pre><code>{{ snippet.snippet.code }}</code></pre>
       </div>
 
+      <section v-if="snippet.snippet.notes" class="notes">
+        <h2 class="notes-heading">Notes</h2>
+        <div class="prose" v-html="renderMarkdown(snippet.snippet.notes)" />
+      </section>
+
       <div v-if="snippet.tags.length" class="tag-row">
         <span v-for="t in snippet.tags" :key="t" class="tag-pill">{{ t }}</span>
       </div>
@@ -343,6 +349,17 @@ async function confirmDelete() {
   cursor: help;
 }
 
+.notes {
+  margin-top: 1.25rem;
+}
+.notes-heading {
+  margin: 0 0 0.5rem;
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--fs-text-tertiary);
+}
+
 .code-block {
   border: 1px solid var(--fs-border-color);
   border-radius: var(--fs-radius-lg);