feat(tickets): Markdown in Texten + Editier-Regeln für Rückfragen

- Ticket-Texte (Frage/Antwort/Nachricht/Changelog/Verlauf) rendern eine
  Markdown-Teilmenge: **fett**, `code`, Aufzählungen, Links, Tier-/Ticket-IDs
- Offene Rückfrage (NeedsInfo): nicht bearbeitbar — die Züchterin soll antworten
- Beantwortet (Answered): Antwort nachträglich änderbar, bevor die KI übernimmt

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

gerbil-manager-web/src/pages/TicketsPage.tsx

@@ -11,7 +11,7 @@
  * Rückfragen kommen hierher zurück), „Geschlossen" (Resolved, zeigt den Changelog/fixNote).
  * Der Frage/Antwort-Verlauf (thread) wird angezeigt; das interne `agentContext` NIEMALS.
  */
-import { createContext, Fragment, useContext, useEffect, useMemo, useState } from 'react'
+import { createContext, Fragment, useContext, useEffect, useMemo, useState, type ReactNode } from 'react'
 import { Link, useSearchParams } from 'react-router-dom'
 import { de } from '../strings/de'
 import { ApiError } from '../api/client'
@@ -57,43 +57,38 @@ function entityHref(ticket: FeedbackTicket): string | null {
 
 const GUID_RE = '[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}'
 
-type RichToken = { kind: 'text'; value: string } | { kind: 'link'; href: string; label: string }
+type RichBlock = { type: 'p'; text: string } | { type: 'ul'; items: string[] }
 
-/**
- * Zerlegt Ticket-Text in Text- und Link-Token. Erkannt werden:
- *  - Markdown-Links `[Label](/route)` → interner/externer Link,
- *  - nackte GUIDs: gehört sie zu einem bekannten Ticket → Link auf dieses Ticket; sonst, wenn
- *    sie einen Tier-Namen auflöst → Name + Link zur Rennmausakte (so kann die KI einfach die
- *    Tier-ID in den Text schreiben). Unauflösbare GUIDs bleiben Text.
- */
-function tokenizeRich(
-  text: string,
-  ticketIds: Set<string>,
-  gerbilNames: Record<string, string | null>,
-): RichToken[] {
-  const tokens: RichToken[] = []
-  const re = new RegExp(`\\[([^\\]]+)\\]\\(([^)]+)\\)|(${GUID_RE})`, 'g')
-  let last = 0
-  let m: RegExpExecArray | null
-  while ((m = re.exec(text)) !== null) {
-    if (m.index > last) tokens.push({ kind: 'text', value: text.slice(last, m.index) })
-    if (m[1] !== undefined && m[2] !== undefined) {
-      tokens.push({ kind: 'link', href: m[2], label: m[1] })
-    } else {
-      const guid = m[3]
-      const gerbilName = gerbilNames[guid]
-      if (ticketIds.has(guid)) {
-        tokens.push({ kind: 'link', href: `/hilfe/tickets?focus=${guid}`, label: t.ticketRefLabel })
-      } else if (gerbilName) {
-        tokens.push({ kind: 'link', href: `/rennmaeuse/${guid}`, label: gerbilName })
-      } else {
-        tokens.push({ kind: 'text', value: guid })
-      }
+/** Block-Ebene: aufeinanderfolgende Aufzählungszeilen (-, *, •) zu einer Liste gruppieren. */
+function parseBlocks(text: string): RichBlock[] {
+  const blocks: RichBlock[] = []
+  let para: string | null = null
+  let list: string[] | null = null
+  const flushPara = () => {
+    if (para !== null) {
+      blocks.push({ type: 'p', text: para })
+      para = null
     }
-    last = re.lastIndex
   }
-  if (last < text.length) tokens.push({ kind: 'text', value: text.slice(last) })
-  return tokens
+  const flushList = () => {
+    if (list) {
+      blocks.push({ type: 'ul', items: list })
+      list = null
+    }
+  }
+  for (const line of text.split('\n')) {
+    const bullet = line.match(/^\s*[-*•]\s+(.*)$/)
+    if (bullet) {
+      flushPara()
+      ;(list ??= []).push(bullet[1])
+    } else {
+      flushList()
+      para = para === null ? line : `${para}\n${line}`
+    }
+  }
+  flushPara()
+  flushList()
+  return blocks
 }
 
 /** Alle nackten GUIDs in einem Text, die KEINE Markdown-Link-Ziele sind (mögliche Tier-IDs). */
@@ -117,28 +112,81 @@ function TextWithBreaks({ value }: { value: string }) {
   )
 }
 
-/** Rendert Ticket-Text mit klickbaren Tier-/Ticket-Links und Zeilenumbrüchen. */
-function RichText({ text }: { text: string }) {
+/** Inline-Markdown: **fett**, `code`, [Label](url)-Links, Tier-/Ticket-IDs, Zeilenumbrüche. */
+function InlineMarkdown({ text }: { text: string }) {
   const { ticketIds, gerbilNames } = useContext(TicketRefsContext)
-  const tokens = useMemo(
-    () => tokenizeRich(text, ticketIds, gerbilNames),
-    [text, ticketIds, gerbilNames],
+  const re = new RegExp(
+    `\\[([^\\]]+)\\]\\(([^)]+)\\)|\\*\\*([^*]+)\\*\\*|\`([^\`]+)\`|(${GUID_RE})`,
+    'g',
   )
+  const nodes: ReactNode[] = []
+  let last = 0
+  let m: RegExpExecArray | null
+  let k = 0
+  while ((m = re.exec(text)) !== null) {
+    if (m.index > last) nodes.push(<TextWithBreaks key={k++} value={text.slice(last, m.index)} />)
+    if (m[1] !== undefined && m[2] !== undefined) {
+      const href = m[2]
+      nodes.push(
+        href.startsWith('/') ? (
+          <Link key={k++} to={href} className="ticket-link">
+            {m[1]}
+          </Link>
+        ) : (
+          <a key={k++} href={href} className="ticket-link" target="_blank" rel="noreferrer">
+            {m[1]}
+          </a>
+        ),
+      )
+    } else if (m[3] !== undefined) {
+      nodes.push(<strong key={k++}>{m[3]}</strong>)
+    } else if (m[4] !== undefined) {
+      nodes.push(
+        <code key={k++} className="ticket-code">
+          {m[4]}
+        </code>,
+      )
+    } else {
+      const guid = m[5]
+      const gn = gerbilNames[guid]
+      if (ticketIds.has(guid)) {
+        nodes.push(
+          <Link key={k++} to={`/hilfe/tickets?focus=${guid}`} className="ticket-link">
+            {t.ticketRefLabel}
+          </Link>,
+        )
+      } else if (gn) {
+        nodes.push(
+          <Link key={k++} to={`/rennmaeuse/${guid}`} className="ticket-link">
+            {gn}
+          </Link>,
+        )
+      } else {
+        nodes.push(<TextWithBreaks key={k++} value={guid} />)
+      }
+    }
+    last = re.lastIndex
+  }
+  if (last < text.length) nodes.push(<TextWithBreaks key={k} value={text.slice(last)} />)
+  return <>{nodes}</>
+}
+
+/** Rendert Ticket-Text als Markdown-Teilmenge (Absätze, Aufzählungen, Inline-Formatierung). */
+function RichText({ text }: { text: string }) {
+  const blocks = useMemo(() => parseBlocks(text), [text])
   return (
     <>
-      {tokens.map((tok, i) =>
-        tok.kind === 'link' ? (
-          tok.href.startsWith('/') ? (
-            <Link key={i} to={tok.href} className="ticket-link">
-              {tok.label}
-            </Link>
-          ) : (
-            <a key={i} href={tok.href} className="ticket-link" target="_blank" rel="noreferrer">
-              {tok.label}
-            </a>
-          )
+      {blocks.map((b, i) =>
+        b.type === 'ul' ? (
+          <ul key={i} className="ticket-md-list">
+            {b.items.map((it, j) => (
+              <li key={j}>
+                <InlineMarkdown text={it} />
+              </li>
+            ))}
+          </ul>
         ) : (
-          <TextWithBreaks key={i} value={tok.value} />
+          <InlineMarkdown key={i} text={b.text} />
         ),
       )}
     </>
@@ -408,9 +456,26 @@ function TicketCard({ ticket, onToggleStatus, onSaveMessage, onAnswer, onDelete
   const entityLink = entityHref(ticket)
   const resolved = ticket.status === 'Resolved'
   const badge = statusBadge(ticket.status)
-  // Die Züchterin darf antworten, solange eine Rückfrage offen ist und noch keine
-  // Antwort vorliegt (NeedsInfo, oder eine Rückfrage ohne Antwort).
-  const canAnswer = !ticket.answer && (ticket.status === 'NeedsInfo' || (!!ticket.question && !resolved))
+  const [answerEditing, setAnswerEditing] = useState(false)
+  // Erstantwort: Rückfrage offen, noch keine Antwort.
+  const canAnswerNew = !ticket.answer && (ticket.status === 'NeedsInfo' || (!!ticket.question && !resolved))
+  // Nachträglich ändern: bereits beantwortet (Answered) — die Züchterin darf ihre letzte
+  // Info noch korrigieren, BEVOR die KI das Ticket bearbeitet.
+  const canAmend = !!ticket.answer && ticket.status === 'Answered'
+  // Antwort-Formular zeigen: neue Antwort, aktives Ändern, oder ein gepufferter Änderungs-Entwurf.
+  const showAnswerForm = canAnswerNew || answerEditing || (canAmend && !!answerDraft)
+  // Bearbeiten (Beschreibung) ist gesperrt, solange eine Rückfrage offen ist (NeedsInfo):
+  // dann soll die Züchterin ANTWORTEN, nicht den Text ändern.
+  const canEditMessage = ticket.status !== 'NeedsInfo'
+
+  function startAmend() {
+    if (!answerDraft) setAnswerDraft(ticket.answer ?? '')
+    setAnswerEditing(true)
+  }
+  function cancelAmend() {
+    setAnswerEditing(false)
+    setAnswerDraft('')
+  }
 
   function startEdit() {
     setDraft(ticket.message)
@@ -444,6 +509,7 @@ function TicketCard({ ticket, onToggleStatus, onSaveMessage, onAnswer, onDelete
     try {
       await onAnswer(trimmed)
       setAnswerDraft('')
+      setAnswerEditing(false)
     } catch (err) {
       toast.error(err instanceof ApiError ? err.message : t.updateError)
     } finally {
@@ -490,9 +556,9 @@ function TicketCard({ ticket, onToggleStatus, onSaveMessage, onAnswer, onDelete
         </div>
       ) : (
         <>
-          <p className="ticket-card__message">
+          <div className="ticket-card__message">
             <RichText text={ticket.message} />
-          </p>
+          </div>
 
           {ticket.thread.length > 0 && (
             <div className="ticket-card__thread">
@@ -506,9 +572,9 @@ function TicketCard({ ticket, onToggleStatus, onSaveMessage, onAnswer, onDelete
                     <span className="ticket-card__thread-role">
                       {entry.role === 'maintainer' ? t.threadMaintainer : t.threadBreeder}
                     </span>
-                    <p className="ticket-card__thread-text">
+                    <div className="ticket-card__thread-text">
                       <RichText text={entry.text} />
-                    </p>
+                    </div>
                     {entry.at && (
                       <span className="ticket-card__thread-date">{formatDate(entry.at)}</span>
                     )}
@@ -521,25 +587,13 @@ function TicketCard({ ticket, onToggleStatus, onSaveMessage, onAnswer, onDelete
           {ticket.question && (
             <div className="ticket-card__question">
               <span className="ticket-card__question-label">{t.questionLabel}</span>
-              <p className="ticket-card__question-text">
+              <div className="ticket-card__question-text">
                 <RichText text={ticket.question} />
-              </p>
+              </div>
             </div>
           )}
 
-          {ticket.answer ? (
-            <div className="ticket-card__answer">
-              <span className="ticket-card__answer-label">{t.answerLabel}</span>
-              <p className="ticket-card__answer-text">
-                <RichText text={ticket.answer} />
-              </p>
-              {ticket.answeredAt && (
-                <span className="ticket-card__answer-date">
-                  {t.answeredOn}: {formatDate(ticket.answeredAt)}
-                </span>
-              )}
-            </div>
-          ) : canAnswer ? (
+          {showAnswerForm ? (
             <div className="ticket-card__answer-form">
               <label className="ticket-card__edit-label" htmlFor={`ticket-answer-${ticket.id}`}>
                 {t.answerLabel}
@@ -553,6 +607,11 @@ function TicketCard({ ticket, onToggleStatus, onSaveMessage, onAnswer, onDelete
                 rows={3}
               />
               <div className="ticket-card__actions">
+                {answerEditing && (
+                  <button type="button" className="btn" onClick={cancelAmend} disabled={answering}>
+                    {t.cancel}
+                  </button>
+                )}
                 <button
                   type="button"
                   className="btn btn--primary"
@@ -563,14 +622,33 @@ function TicketCard({ ticket, onToggleStatus, onSaveMessage, onAnswer, onDelete
                 </button>
               </div>
             </div>
+          ) : ticket.answer ? (
+            <div className="ticket-card__answer">
+              <span className="ticket-card__answer-label">{t.answerLabel}</span>
+              <div className="ticket-card__answer-text">
+                <RichText text={ticket.answer} />
+              </div>
+              {ticket.answeredAt && (
+                <span className="ticket-card__answer-date">
+                  {t.answeredOn}: {formatDate(ticket.answeredAt)}
+                </span>
+              )}
+              {canAmend && (
+                <div className="ticket-card__actions">
+                  <button type="button" className="btn" onClick={startAmend}>
+                    {t.amendAnswer}
+                  </button>
+                </div>
+              )}
+            </div>
           ) : null}
 
           {resolved && ticket.fixNote && (
             <div className="ticket-card__changelog">
               <span className="ticket-card__changelog-label">{t.changelogLabel}</span>
-              <p className="ticket-card__changelog-text">
+              <div className="ticket-card__changelog-text">
                 <RichText text={ticket.fixNote} />
-              </p>
+              </div>
             </div>
           )}
 
@@ -590,9 +668,11 @@ function TicketCard({ ticket, onToggleStatus, onSaveMessage, onAnswer, onDelete
             <button type="button" className="btn" onClick={onToggleStatus}>
               {resolved ? t.reopen : t.markResolved}
             </button>
-            <button type="button" className="btn" onClick={startEdit}>
-              {t.edit}
-            </button>
+            {canEditMessage && (
+              <button type="button" className="btn" onClick={startEdit}>
+                {t.edit}
+              </button>
+            )}
             <button type="button" className="btn btn--danger" onClick={onDelete}>
               {t.delete}
             </button>

gerbil-manager-web/src/pages/tickets.css

@@ -402,3 +402,21 @@
     box-shadow: 0 0 0 0 transparent;
   }
 }
+
+/* Markdown im Ticket-Text: Aufzählungen + Inline-Code. */
+.ticket-md-list {
+  margin: 0.35rem 0;
+  padding-left: 1.25rem;
+}
+
+.ticket-md-list li {
+  margin: 0.15rem 0;
+}
+
+.ticket-code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.88em;
+  background: rgba(0, 0, 0, 0.06);
+  padding: 0.05em 0.35em;
+  border-radius: 4px;
+}

gerbil-manager-web/src/strings/de.ts

@@ -926,6 +926,8 @@ export const de = {
       answerLabel: 'Deine Antwort',
       answerPlaceholder: 'Antwort auf die Rückfrage eingeben …',
       answerButton: 'Antworten',
+      /** Button auf einem beantworteten Ticket, um die eigene Antwort noch zu ändern. */
+      amendAnswer: 'Antwort ändern',
       answering: 'Wird gesendet …',
       answeredOn: 'Beantwortet am',
       answeredToast: 'Antwort gesendet.',