Visa AI-handledning i demoärendet

Demoärendet innehåller nu ett exempel på klassificerat AI-svar, tydligt
märkt 'demo' (riktiga svar kräver API-nyckel) — AI-panelen i guiden
visar modellnamnet från händelsen.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012EQg3rJsrQ1ZNTvkzmQAtt

src/felsokning/demo.ts

@@ -95,6 +95,17 @@ export function byggDemoArende(nummer: number, anvandare = "Anna"): Arende {
     post(82, { typ: "matvarde", beskrivning: "Obalans höger framhjul", varde: "38", enhet: "g" }),
     post(83, { typ: "kontroll_utford", stegId: "kontroller", kontrollId: "balansering", text: "Kontrollera hjulbalansering", resultat: "38 g obalans höger fram — en balansvikt saknas. Övriga hjul inom 5 g." }),
     post(85, { typ: "observation", text: "Spår efter lossnad klistervikt på höger framfälgs insida" }),
+    // Exempel på AI-handledning, märkt "demo" — riktiga svar kräver API-nyckel.
+    post(86, {
+      typ: "ai_svar",
+      rader: [
+        { typ: "verifierat", text: "Obalans uppmätt: 38 g höger framhjul. Övriga hjul inom tolerans." },
+        { typ: "observation", text: "Spår efter lossnad klistervikt förklarar var vikten suttit — orsaken till obalansen är dock inte verifierad." },
+        { typ: "rekommendation", text: "Balansera om hjulet och verifiera att symptomet försvinner innan ärendet avslutas." },
+      ],
+      nastaSteg: "Balansera om höger framhjul och genomför ny provkörning i 80–100 km/h.",
+      modell: "demo",
+    }),
     post(90, { typ: "overlamning", fran: anvandare, till: "Johan" }),
     post(92, { typ: "kategori_byte", kategori: "administration" }, "Johan"),
     post(95, { typ: "kommentar", text: "Balanserat om höger framhjul, ny provkörning planerad." }, "Johan"),

src/pages/felsokning/ArendeSida.tsx

@@ -238,7 +238,11 @@ function GuideFlik({
       </Panel>
 
       {(aiStatus !== "vilar" || senasteAiSvar) && (
-        <Panel rubrik={`AI-handledning (${AI_MODELL})`}>
+        <Panel
+          rubrik={`AI-handledning (${
+            senasteAiSvar?.handelse.typ === "ai_svar" ? senasteAiSvar.handelse.modell : AI_MODELL
+          })`}
+        >
           {aiStatus === "arbetar" && <p className="mb-2 animate-pulse font-bold text-amber-400">AI analyserar …</p>}
           {aiStatus === "fel" && (
             <p className="mb-2 font-bold text-red-400">AI-svaret kunde inte hämtas — kontrollera nyckel och nät. Metodiken fortsätter som vanligt.</p>