From 11eb770c8b01b7923f16eeddf3064afa8cbea89f Mon Sep 17 00:00:00 2001
From: Erik Thiele <erik.thiele@cancom.de>
Date: Thu, 30 Jul 2026 14:55:59 +0200
Subject: [PATCH] Add a collapsible Markdown cheat sheet to the prompt input

A short, native <details>/<summary> reference (no JS) next to the
hint text, listing the basic syntax the new markdown rendering
supports: headings, bold/italic, lists, quotes, inline code, code
blocks, links.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/templates/base.html    | 16 ++++++++++++++++
 app/templates/prompts.html | 15 +++++++++++++++
 2 files changed, 31 insertions(+)

diff --git a/app/templates/base.html b/app/templates/base.html
index 5fde20f..d63f294 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -195,6 +195,22 @@
     .field label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: 5px; }
     .error { background: #7f1d1d; color: #fecaca; padding: 10px 12px; border-radius: 8px; margin-bottom: 14px; font-size: .9rem; }
     .muted { color: var(--muted); }
+    .md-help { margin-top: 6px; }
+    .md-help summary {
+      cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
+      color: var(--accent-hover); font-size: .8rem; user-select: none;
+    }
+    .md-help summary::-webkit-details-marker { display: none; }
+    .md-help table {
+      margin-top: 8px; border-collapse: collapse; font-size: .8rem;
+    }
+    .md-help td {
+      padding: 3px 12px 3px 0; vertical-align: top; color: var(--muted);
+    }
+    .md-help td:first-child { white-space: nowrap; }
+    .md-help code {
+      background: var(--panel2); padding: 1px 5px; border-radius: 4px; color: var(--text);
+    }
     .htmx-indicator { opacity: 0; transition: opacity .2s; }
     .htmx-request .htmx-indicator { opacity: 1; }
     .htmx-request.htmx-indicator { opacity: 1; }
diff --git a/app/templates/prompts.html b/app/templates/prompts.html
index 5fa2441..9b06150 100644
--- a/app/templates/prompts.html
+++ b/app/templates/prompts.html
@@ -40,6 +40,21 @@
         </div>
         <div class="muted" style="font-size:.8rem; margin-top:6px;">
           Der Prompt wird automatisch kategorisiert und mit Tags versehen.
+          Der Text unterstützt Markdown.
+          <details class="md-help">
+            <summary>{{ icons.sparkles(size=12) }} Markdown-Hilfe</summary>
+            <table>
+              <tr><td><code># Text</code></td><td>Überschrift</td></tr>
+              <tr><td><code>**Text**</code></td><td><strong>fett</strong></td></tr>
+              <tr><td><code>*Text*</code></td><td><em>kursiv</em></td></tr>
+              <tr><td><code>- Text</code></td><td>Aufzählung</td></tr>
+              <tr><td><code>1. Text</code></td><td>nummerierte Liste</td></tr>
+              <tr><td><code>&gt; Text</code></td><td>Zitat</td></tr>
+              <tr><td><code>`Text`</code></td><td><code>Inline-Code</code></td></tr>
+              <tr><td><code>```</code></td><td>Codeblock (davor &amp; danach)</td></tr>
+              <tr><td><code>[Text](url)</code></td><td>Link</td></tr>
+            </table>
+          </details>
         </div>
       </form>
     </div>