🍪 KI-Feedback · Der Keksbäcker Hamburg

\n \n\n`;\n return c.html(html);\n});\n\nexport default app.fetch;\n","deleted",false,"label",[37],"fb5005e0-544f-11f1-8c89-ee650bb23af1","frontend.tsx","fb500680-544f-11f1-8c89-ee650bb23af1",8,["D",1779283791072],0,"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n// ─── API helpers ────────────────────────────────────────────────────────\nasync function loadResponses() {\n try {\n const res = await fetch(\"/api/responses\");\n return await res.json();\n } catch { return []; }\n}\n\nasync function submitResponse(entry: any) {\n await fetch(\"/api/responses\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(entry),\n });\n}\n\n// ─── Colour / style tokens ─────────────────────────────────────────────\nconst C = {\n blue: \"#2200CC\",\n accent: \"#EAFF00\",\n dark: \"#0A0A2E\",\n white: \"#F5F5FF\",\n gray: \"#E0E0F0\",\n mid: \"#9988EE\",\n};\n\nconst font = {\n head: \"'Barlow Condensed', sans-serif\",\n body: \"'Barlow', sans-serif\",\n};\n\n// ─── Tiny UI primitives ────────────────────────────────────────────────\nconst Tag = ({ children, color = C.blue }: any) => (\n {children}\n);\n\nconst SectionTitle = ({ n, children }: any) => (\n

\n {n}\n {children}\n

\n);\n\nconst ScaleInput = ({ value, onChange }: any) => (\n

\n {[1,2,3,4,5].map(n => (\n \n ))}\n \n {value ? `${value} von 5` : \"—\"}\n \n

\n);\n\nconst CheckList = ({ options, value = [], onChange }: any) => (\n

\n {options.map((opt: string) => {\n const on = value.includes(opt);\n return (\n \n

onChange(on ? value.filter((v: string) => v !== opt) : [...value, opt])}\n style={{\n width: 22, height: 22, minWidth: 22, border: `2px solid ${C.blue}`,\n background: on ? C.blue : \"white\",\n display: \"flex\", alignItems: \"center\", justifyContent: \"center\",\n color: \"white\", fontWeight: 800, fontSize: 14, marginTop: 1,\n }}>\n {on ? \"✓\" : \"\"}\n

\n {opt}\n \n );\n })}\n

\n);\n\nconst Textarea = ({ value, onChange, placeholder, rows = 3 }: any) => (\n onChange(e.target.value)}\n placeholder={placeholder} rows={rows}\n style={{\n width: \"100%\", border: `2px solid ${C.blue}`,\n padding: \"10px 12px\", fontFamily: font.body, fontSize: 15,\n resize: \"vertical\" as const, outline: \"none\", background: \"white\",\n color: C.dark, lineHeight: 1.5, boxSizing: \"border-box\" as const,\n }}\n />\n);\n\nconst SelectInput = ({ value, onChange, options }: any) => (\n \n);\n\n// ─── Constants ──────────────────────────────────────────────────────────\nconst ASSISTANTS = [\n \"Frieda – Rezepte & Produktentwicklung\",\n \"Mara – Vertrieb & Angebote\",\n \"Greta – Büro & Backoffice\",\n \"Vega – Marketing & Content\",\n \"Klara – Buchhaltung & Zahlen\",\n \"Keksentnahme-Digitalisierung (Foto → Excel)\",\n \"Buchungsstapel / Buchhaltungsaufgaben\",\n];\n\nconst NEEDS = [\n \"Mehr Training / Workshop\",\n \"Bessere / klarere Prompts\",\n \"Schritt-für-Schritt-Anleitungen (Cheat Sheets)\",\n \"Mehr Zeit zum Ausprobieren\",\n \"Direkter Ansprechpartner bei Problemen\",\n \"Bessere technische Ausstattung\",\n];\n\nconst FREQ_OPTS = [\"Täglich\",\"Mehrmals pro Woche\",\"Einmal pro Woche\",\"Seltener\",\"Noch gar nicht\"];\n\nconst emptyForm = {\n name: \"\", bereich: \"\", freq: \"\",\n gesamt: 0, helpful: [] as string[], positive: \"\",\n integration: 0, problems: \"\", hurts: \"\",\n zeitfresser: \"\", ideen: \"\", needs: [] as string[],\n empfehlen: 0, freitext: \"\",\n};\n\n// ─── SURVEY FORM ──────────────────────────────────────────────────────────\nfunction SurveyForm({ onSubmit }: any) {\n const [f, setF] = useState(emptyForm);\n const [submitted, setSubmitted] = useState(false);\n const [loading, setLoading] = useState(false);\n\n const set = (key: string) => (val: any) => setF(prev => ({ ...prev, [key]: val }));\n\n const handleSubmit = async () => {\n if (!f.name && !f.bereich) { alert(\"Bitte gib deinen Namen oder Bereich an.\"); return; }\n setLoading(true);\n await onSubmit(f);\n setLoading(false);\n setSubmitted(true);\n };\n\n if (submitted) return (\n

\n Vielen
Dank. 🙏\n

\n Dein Feedback ist gespeichert.
\n Doreen wertet alles aus und optimiert die Assistenten entsprechend.\n

\n KI ist kein Nice-to-have. Sie ist ab jetzt Teil eurer Arbeitsweise.\n

\n \n

\n );\n\n const Q = ({ n, label, children }: any) => (\n

\n \n {n}{label}\n \n {children}\n

\n );\n\n return (\n

\n Allgemeines\n \n

\n      </Q>\n      <Q n=\"2\" label=\"Wie oft hast du die KI-Assistenten genutzt?\">\n        <SelectInput value={f.freq} onChange={set(\"freq\")} options={FREQ_OPTS}/>\n      </Q>\n\n      <SectionTitle n=\"02\">Was hat funktioniert?</SectionTitle>\n      <Q n=\"3\" label=\"Wie gut hat der Prozess insgesamt funktioniert? (1 = gar nicht · 5 = sehr gut)\">\n        <ScaleInput value={f.gesamt} onChange={set(\"gesamt\")}/>\n      </Q>\n      <Q n=\"4\" label=\"Welche Assistenten haben dir am meisten geholfen? (Mehrfachauswahl)\">\n        <CheckList options={ASSISTANTS} value={f.helpful} onChange={set(\"helpful\")}/>\n      </Q>\n      <Q n=\"5\" label=\"Was hat dich am meisten positiv überrascht?\">\n        <Textarea value={f.positive} onChange={set(\"positive\")} placeholder=\"Was hast du nicht erwartet, das aber gut funktioniert hat? …\"/>\n      </Q>\n\n      <SectionTitle n=\"03\">Was war schwierig?</SectionTitle>\n      <Q n=\"6\" label=\"Wie leicht war die Integration in den Alltag? (1 = sehr schwer · 5 = sehr leicht)\">\n        <ScaleInput value={f.integration} onChange={set(\"integration\")}/>\n      </Q>\n      <Q n=\"7\" label=\"Was hat nicht funktioniert oder war frustrierend?\">\n        <Textarea value={f.problems} onChange={set(\"problems\")} placeholder=\"Konkrete Probleme, Fehler, unklare Abläufe …\"/>\n      </Q>\n      <Q n=\"8\" label=\"Wo schadet die KI mehr als sie hilft?\">\n        <Textarea value={f.hurts} onChange={set(\"hurts\")} placeholder=\"Bereiche, wo du lieber ohne KI arbeitest — und warum …\"/>\n      </Q>\n\n      <SectionTitle n=\"04\">Ideen & Wünsche</SectionTitle>\n      <Q n=\"9\" label=\"Welche Aufgabe kostet dich die meiste unnötige Zeit?\">\n        <Textarea value={f.zeitfresser} onChange={set(\"zeitfresser\")} placeholder=\"Diese Aufgabe ärgert mich jede Woche …\"/>\n      </Q>\n      <Q n=\"10\" label=\"Ideen für neue KI-Anwendungen beim Keksbäcker?\">\n        <Textarea value={f.ideen} onChange={set(\"ideen\")} placeholder=\"Egal wie wild — schreib es auf …\"/>\n      </Q>\n      <Q n=\"11\" label=\"Was brauchst du, um die KI besser nutzen zu können?\">\n        <CheckList options={NEEDS} value={f.needs} onChange={set(\"needs\")}/>\n      </Q>\n\n      <SectionTitle n=\"05\">Abschluss</SectionTitle>\n      <Q n=\"12\" label=\"Würdest du KI weiterempfehlen? (1 = nein · 5 = auf jeden Fall)\">\n        <ScaleInput value={f.empfehlen} onChange={set(\"empfehlen\")}/>\n      </Q>\n      <Q n=\"13\" label=\"Noch etwas, das du loswerden möchtest?\">\n        <Textarea value={f.freitext} onChange={set(\"freitext\")} placeholder=\"Freiraum für alles, was sonst nirgends reingepasst hat …\" rows={4}/>\n      </Q>\n\n      <div style={{\n        background: C.blue, padding: \"32px 36px\",\n        display: \"flex\", alignItems: \"center\", justifyContent: \"space-between\",\n        gap: 20, flexWrap: \"wrap\" as const, marginTop: 40,\n      }}>\n        <p style={{ color: \"white\", fontSize: 14, opacity: 0.8, maxWidth: 320, lineHeight: 1.5 }}>\n          Alle Antworten fließen direkt in die nächste Optimierungsrunde ein.\n        </p>\n        <button onClick={handleSubmit} disabled={loading} style={{\n          background: C.accent, color: C.dark, border: \"none\",\n          padding: \"14px 36px\", fontFamily: font.head, fontWeight: 800,\n          fontSize: 18, textTransform: \"uppercase\" as const, letterSpacing: \"0.08em\",\n          cursor: loading ? \"wait\" : \"pointer\", opacity: loading ? 0.6 : 1,\n        }}>{loading ? \"Wird gespeichert …\" : \"Abschicken →\"}</button>\n      </div>\n    </div>\n  );\n}\n\n// ─── DASHBOARD helpers ──────────────────────────────────────────────────\nfunction avg(arr: number[]) {\n  const v = arr.filter(Boolean);\n  return v.length ? (v.reduce((a,b)=>a+b,0)/v.length).toFixed(1) : \"—\";\n}\n\nfunction countFreq(arr: any[]) {\n  const m: Record<string, number> = {};\n  arr.flat().forEach((v: string) => { if(v) m[v] = (m[v]||0)+1; });\n  return Object.entries(m).sort((a,b)=>b[1]-a[1]);\n}\n\nconst Bar = ({ label, count, max }: any) => (\n  <div style={{ marginBottom: 10 }}>\n    <div style={{ display: \"flex\", justifyContent: \"space-between\", marginBottom: 4 }}>\n      <span style={{ fontSize: 13, fontWeight: 500 }}>{label}</span>\n      <span style={{ fontSize: 13, fontWeight: 700, color: C.blue }}>{count}×</span>\n    </div>\n    <div style={{ background: C.gray, height: 10 }}>\n      <div style={{ background: C.blue, height: \"100%\", width: `${(count/max)*100}%`, transition: \"width .4s\" }}/>\n    </div>\n  </div>\n);\n\nconst ScoreGauge = ({ value, label, n }: any) => {\n  const pct = ((parseFloat(value)||0)/5)*100;\n  const color = pct >= 70 ? \"#00CC66\" : pct >= 40 ? \"#FFAA00\" : \"#CC2200\";\n  return (\n    <div style={{ background: \"white\", border: `2px solid ${C.blue}`, padding: \"20px 24px\", flex: 1, minWidth: 140 }}>\n      <div style={{ fontFamily: font.head, fontWeight: 900, fontSize: 48, color, lineHeight: 1 }}>{value}</div>\n      <div style={{ background: C.gray, height: 6, marginTop: 8 }}>\n        <div style={{ background: color, height: \"100%\", width: `${pct}%` }}/>\n      </div>\n      <div style={{ fontFamily: font.head, fontWeight: 700, fontSize: 11, letterSpacing: \"0.15em\",\n        textTransform: \"uppercase\" as const, color: C.dark, marginTop: 8 }}>{label}</div>\n      <div style={{ fontSize: 11, color: \"#888\" }}>Ø von 5 · {n} Antworten</div>\n    </div>\n  );\n};\n\n// ─── DASHBOARD ────────────────────────────────────────────────────────────\nfunction Dashboard({ responses, onBack }: any) {\n  if (!responses.length) return (\n    <div style={{ padding: 60, textAlign: \"center\" as const }}>\n      <div style={{ fontFamily: font.head, fontWeight: 900, fontSize: 40, textTransform: \"uppercase\" as const, color: C.blue }}>\n        Noch keine Antworten.\n      </div>\n      <p style={{ marginTop: 16, color: \"#666\" }}>Teile den Fragebogen mit dem Team — dann erscheinen hier die Auswertungen.</p>\n      <button onClick={onBack} style={{ marginTop: 24, background: C.blue, color: \"white\", border:\"none\",\n        padding:\"12px 28px\", fontFamily: font.head, fontWeight:800, fontSize:16,\n        textTransform:\"uppercase\" as const, cursor:\"pointer\", letterSpacing:\"0.08em\" }}>← Zum Fragebogen</button>\n    </div>\n  );\n\n  const n = responses.length;\n  const gesamtAvg = avg(responses.map((r: any) => r.gesamt));\n  const integrationAvg = avg(responses.map((r: any) => r.integration));\n  const empfehlenAvg = avg(responses.map((r: any) => r.empfehlen));\n\n  const freqCounts = countFreq(responses.map((r: any) => r.freq));\n  const helpfulCounts = countFreq(responses.map((r: any) => r.helpful || []));\n  const needsCounts = countFreq(responses.map((r: any) => r.needs || []));\n  const maxHelpful = helpfulCounts[0]?.[1] || 1;\n  const maxNeeds = needsCounts[0]?.[1] || 1;\n\n  const textFields = [\n    { label: \"Positive Überraschungen\", key: \"positive\" },\n    { label: \"Probleme & Frustration\", key: \"problems\" },\n    { label: \"Wo KI schadet\", key: \"hurts\" },\n    { label: \"Zeitfresser\", key: \"zeitfresser\" },\n    { label: \"Neue KI-Ideen\", key: \"ideen\" },\n    { label: \"Freitext\", key: \"freitext\" },\n  ];\n\n  return (\n    <div style={{ maxWidth: 860, margin: \"0 auto\", padding: \"32px 20px 80px\" }}>\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"flex-end\", marginBottom: 32, flexWrap: \"wrap\" as const, gap: 12 }}>\n        <div>\n          <div style={{ fontFamily: font.head, fontWeight: 900, fontSize: 48, textTransform: \"uppercase\" as const, color: C.blue, lineHeight: 0.9 }}>Auswertung</div>\n          <div style={{ fontFamily: font.head, fontSize: 13, letterSpacing: \"0.15em\", textTransform: \"uppercase\" as const, color: C.mid, marginTop: 8 }}>KI-Feedback · Der Keksbäcker Hamburg</div>\n        </div>\n        <button onClick={onBack} style={{ background: \"transparent\", border: `2px solid ${C.blue}`,\n          color: C.blue, padding: \"8px 20px\", fontFamily: font.head, fontWeight: 800,\n          fontSize: 14, textTransform: \"uppercase\" as const, cursor: \"pointer\", letterSpacing: \"0.08em\" }}>\n          ← Fragebogen\n        </button>\n      </div>\n\n      {/* KPI Row */}\n      <div style={{ display: \"flex\", gap: 12, flexWrap: \"wrap\" as const, marginBottom: 32 }}>\n        <div style={{ background: \"white\", border: `2px solid ${C.blue}`, padding: \"20px 24px\", flex: 1, minWidth: 140 }}>\n          <div style={{ fontFamily: font.head, fontSize: 48, fontWeight: 900, color: C.blue, lineHeight: 1 }}>{n}</div>\n          <div style={{ fontFamily: font.head, fontWeight: 700, fontSize: 12, letterSpacing: \"0.15em\", textTransform: \"uppercase\" as const, color: C.dark, marginTop: 6 }}>Antworten gesamt</div>\n        </div>\n        <ScoreGauge value={gesamtAvg} label=\"Gesamtzufriedenheit\" n={n}/>\n        <ScoreGauge value={integrationAvg} label=\"Integrationsleichtigkeit\" n={n}/>\n        <ScoreGauge value={empfehlenAvg} label=\"Weiterempfehlung\" n={n}/>\n      </div>\n\n      {/* Nutzungshäufigkeit */}\n      <SectionTitle n=\"01\">Nutzungshäufigkeit</SectionTitle>\n      {freqCounts.map(([label,count]) => (\n        <Bar key={label} label={label} count={count} max={freqCounts[0]?.[1]||1}/>\n      ))}\n\n      {/* Hilfreichste Assistenten */}\n      <SectionTitle n=\"02\">Hilfreichste Assistenten</SectionTitle>\n      {helpfulCounts.length ? helpfulCounts.map(([label,count]) => (\n        <Bar key={label} label={label} count={count} max={maxHelpful}/>\n      )) : <p style={{ color:\"#888\", fontSize:14 }}>Noch keine Auswahl.</p>}\n\n      {/* Needs */}\n      <SectionTitle n=\"03\">Was das Team noch braucht</SectionTitle>\n      {needsCounts.length ? needsCounts.map(([label,count]) => (\n        <Bar key={label} label={label} count={count} max={maxNeeds}/>\n      )) : <p style={{ color:\"#888\", fontSize:14 }}>Noch keine Auswahl.</p>}\n\n      {/* Zeitfresser & Ideen */}\n      {([\"zeitfresser\",\"ideen\"] as const).map(key => {\n        const entries = responses.map((r: any) => r[key]).filter(Boolean);\n        if (!entries.length) return null;\n        const sectionLabel = key === \"zeitfresser\" ? \"Größte Zeitfresser\" : \"Neue KI-Ideen\";\n        return (\n          <div key={key}>\n            <SectionTitle n={key === \"zeitfresser\" ? \"04\" : \"05\"}>{sectionLabel}</SectionTitle>\n            <div style={{ display: \"flex\", flexDirection: \"column\" as const, gap: 10 }}>\n              {entries.map((e: string, i: number) => (\n                <div key={i} style={{ background: key===\"ideen\" ? \"#EAFF0022\" : \"white\",\n                  border: `2px solid ${key===\"ideen\" ? C.accent : C.blue}`,\n                  padding: \"12px 16px\", fontSize: 14, lineHeight: 1.5 }}>\n                  {key===\"ideen\" && <span style={{ fontWeight:700, marginRight:6, color:C.blue }}>💡</span>}\n                  {e}\n                </div>\n              ))}\n            </div>\n          </div>\n        );\n      })}\n\n      {/* Alle offenen Antworten */}\n      <SectionTitle n=\"06\">Alle offenen Antworten</SectionTitle>\n      {textFields.map(({ label, key }) => {\n        const entries = responses.map((r: any) => ({ name: r.name||\"Anonym\", text: r[key] })).filter((r: any) => r.text);\n        if (!entries.length) return null;\n        return (\n          <div key={key} style={{ marginBottom: 28 }}>\n            <div style={{ fontFamily: font.head, fontWeight: 800, fontSize: 14,\n              textTransform: \"uppercase\" as const, letterSpacing: \"0.12em\", color: C.dark,\n              marginBottom: 10, background: C.gray, padding: \"6px 12px\" }}>{label}</div>\n            {entries.map((e: any, i: number) => (\n              <div key={i} style={{ borderLeft: `3px solid ${C.blue}`,\n                paddingLeft: 14, marginBottom: 10, fontSize: 14, lineHeight: 1.5 }}>\n                <span style={{ fontWeight: 700, fontSize: 12, color: C.mid,\n                  textTransform: \"uppercase\" as const, letterSpacing: \"0.08em\", marginRight: 8 }}>{e.name}</span>\n                {e.text}\n              </div>\n            ))}\n          </div>\n        );\n      })}\n\n      {/* Raw Table */}\n      <SectionTitle n=\"07\">Alle Einträge (Rohdaten)</SectionTitle>\n      <div style={{ overflowX: \"auto\" as const }}>\n        <table style={{ width: \"100%\", borderCollapse: \"collapse\" as const, fontSize: 12 }}>\n          <thead>\n            <tr style={{ background: C.blue, color: \"white\" }}>\n              {[\"#\",\"Name\",\"Datum\",\"Gesamt\",\"Integration\",\"Empfehlen\",\"Nutzung\"].map(h => (\n                <th key={h} style={{ padding:\"8px 12px\", textAlign:\"left\" as const, fontFamily: font.head,\n                  fontWeight:700, letterSpacing:\"0.1em\", textTransform:\"uppercase\" as const }}>{h}</th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {responses.map((r: any, i: number) => (\n              <tr key={r.id} style={{ background: i%2===0?\"white\":C.white, borderBottom:`1px solid ${C.gray}` }}>\n                <td style={{ padding:\"8px 12px\", color:\"#888\" }}>{i+1}</td>\n                <td style={{ padding:\"8px 12px\", fontWeight:600 }}>{r.name||\"—\"}</td>\n                <td style={{ padding:\"8px 12px\", color:\"#888\" }}>{r.ts ? new Date(r.ts).toLocaleDateString(\"de-DE\") : \"—\"}</td>\n                <td style={{ padding:\"8px 12px\", textAlign:\"center\" as const, fontWeight:700, color:C.blue }}>{r.gesamt||\"—\"}</td>\n                <td style={{ padding:\"8px 12px\", textAlign:\"center\" as const, fontWeight:700, color:C.blue }}>{r.integration||\"—\"}</td>\n                <td style={{ padding:\"8px 12px\", textAlign:\"center\" as const, fontWeight:700, color:C.blue }}>{r.empfehlen||\"—\"}</td>\n                <td style={{ padding:\"8px 12px\" }}>{r.freq||\"—\"}</td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n    </div>\n  );\n}\n\n// ─── HEADER ───────────────────────────────────────────────────────────────\nfunction Header({ view, setView, count }: any) {\n  return (\n    <div style={{ background: C.blue, color: \"white\", padding: \"40px 32px 36px\", position:\"relative\" as const, overflow:\"hidden\" }}>\n      <div style={{ position:\"absolute\" as const, top:-60, right:-60, width:220, height:220,\n        background:\"rgba(234,255,0,0.1)\", borderRadius:\"50%\" }}/>\n      <div style={{ fontFamily: font.head, fontWeight:700, fontSize:12, letterSpacing:\"0.2em\",\n        textTransform:\"uppercase\" as const, color:C.accent, marginBottom:10 }}>\n        Der Keksbäcker Hamburg · KI-Implementierung 2026\n      </div>\n      <div style={{ fontFamily: font.head, fontWeight:900,\n        fontSize:\"clamp(36px, 8vw, 64px)\", textTransform:\"uppercase\" as const, lineHeight:0.9, marginBottom:16 }}>\n        {view === \"form\" ? <>KI-Feedback<br/>Fragebogen</> : <>Auswertung<br/>Dashboard</>}\n      </div>\n      <div style={{ display:\"flex\", gap:10, flexWrap:\"wrap\" as const, marginTop:24 }}>\n        {([\"form\",\"dashboard\"] as const).map(v => (\n          <button key={v} onClick={() => setView(v)} style={{\n            background: view===v ? C.accent : \"transparent\",\n            color: view===v ? C.dark : \"white\",\n            border: `2px solid ${view===v ? C.accent : \"rgba(255,255,255,0.4)\"}`,\n            padding:\"8px 20px\", fontFamily: font.head, fontWeight:800, fontSize:13,\n            textTransform:\"uppercase\" as const, letterSpacing:\"0.1em\", cursor:\"pointer\",\n          }}>\n            {v === \"form\" ? \"📋 Fragebogen\" : `📊 Auswertung ${count > 0 ? `(${count})` : \"\"}`}\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n// ─── ROOT APP ─────────────────────────────────────────────────────────────\nfunction App() {\n  const [view, setView] = useState<\"form\"|\"dashboard\">(\"form\");\n  const [responses, setResponses] = useState<any[]>([]);\n\n  useEffect(() => {\n    loadResponses().then(setResponses);\n  }, []);\n\n  const handleSubmit = async (entry: any) => {\n    await submitResponse(entry);\n    const updated = await loadResponses();\n    setResponses(updated);\n  };\n\n  return (\n    <div style={{ fontFamily: font.body, background: C.white, minHeight:\"100vh\", color: C.dark, margin: 0 }}>\n      <Header view={view} setView={setView} count={responses.length}/>\n      {view === \"form\"\n        ? <SurveyForm onSubmit={handleSubmit}/>\n        : <Dashboard responses={responses} onBack={() => setView(\"form\")}/>\n      }\n      <div style={{ textAlign: \"center\" as const, padding: \"20px\", fontSize: 12, color: \"#888\" }}>\n        <a href=\"/source\" style={{ color: C.mid }}>Quellcode ansehen</a>\n      </div>\n    </div>\n  );\n}\n\n// ─── Mount ────────────────────────────────────────────────────────────────\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render(<App/>);\n",[59],"111a59a2-5450-11f1-910f-ee650bb23af1","KI_Integration.ts","4c03a628-544f-11f1-b118-ee650bb23af1",10,["D",1779283828607],2,"// KI_Integration.ts\n// Dieses Modul enthielt den ursprünglichen Entwurf für die KI-Feedback-App.\n// Die aktive Implementierung ist jetzt aufgeteilt in:\n//   - main.tsx    → Backend (Hono API + HTML-Shell)\n//   - frontend.tsx → Client-App (React-Fragebogen + Dashboard)\n//\n// Die Daten werden in SQLite gespeichert (Tabelle: ki_feedback).\nexport {};\n",[68],{"_35":67,"_13":68,"_38":69,"_40":-5,"_41":42,"_43":70,"_45":46,"_47":85,"_17":72,"_50":64,"_52":73,"_54":55,"_56":-5,"_79":86,"_18":87},{"_35":58,"_13":59,"_38":60,"_40":-5,"_41":42,"_43":61,"_45":46,"_47":82,"_17":63,"_50":64,"_52":65,"_54":55,"_56":-5,"_79":83,"_18":84},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":78,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_79":80,"_18":81},["D",1779283809810],"children",[],[37],["D",1779283791072],[],[59],["D",1779283828607],[],[68],"130882da-544f-11f1-93be-ee650bb23af1",["D",1779283402366],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Interaktives Abfrage-Tool zum Suchen und Filtern von Daten","imageUrl","userId","1967e611-49ca-46d2-bfbc-3736b9dd8f76","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","019e458d-23e6-72fa-b847-06f5666b4cd9","tursoName","130882da544f11f193beee650bb23af1","tursoHostname","130882da544f11f193beee650bb23af1-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789492855745],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_143":19},"org",{"_11":12,"_138":19,"_139":19,"_98":99,"_140":141,"_142":55},"branch",{"_17":70,"_13":16,"_35":42,"_130":88,"_131":-5,"_132":-5,"_133":-5,"_134":-5,"_135":-5,"_136":14,"_137":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":88,"_13":14,"_47":187,"_90":-5,"_91":55,"_92":93,"_94":93,"_95":96,"_97":-5,"_98":99,"_100":39,"_101":46,"_102":-5,"_103":-5,"_104":63,"_105":106,"_107":108,"_109":110,"_111":188,"_113":-5,"_114":115,"_116":115,"_117":118,"_119":118,"_120":118,"_121":115,"_122":115,"_123":189,"_125":190,"_127":191,"_129":55},[178,179,180],"files",[178,179,180],"counts",{"_168":63,"_169":170,"_171":63,"_31":172,"_173":174},[162,163,164],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_35":67,"_13":68,"_38":69,"_40":-5,"_41":42,"_43":70,"_45":46,"_47":71,"_17":72,"_50":64,"_52":73,"_54":55,"_56":-5,"_18":167},{"_35":58,"_13":59,"_38":60,"_40":-5,"_41":42,"_43":61,"_45":46,"_47":62,"_17":63,"_50":64,"_52":65,"_54":55,"_56":-5,"_18":166},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_18":165},[37],[59],[68],"pulls","branches",1,"forks",{"_175":63,"_177":63},"connections",{"_175":63,"_176":63},"count","unfilledCount","emptyCount",{"_35":67,"_13":68,"_38":69,"_40":-5,"_41":42,"_43":70,"_45":46,"_47":85,"_17":72,"_50":64,"_52":73,"_54":55,"_56":-5,"_79":185,"_18":186},{"_35":58,"_13":59,"_38":60,"_40":-5,"_41":42,"_43":61,"_45":46,"_47":82,"_17":63,"_50":64,"_52":65,"_54":55,"_56":-5,"_79":183,"_18":184},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":78,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_79":181,"_18":182},[],[37],[],[59],[],[68],["D",1779283402366],["D",1789492855745],{"_11":12,"_143":19},{"_11":12,"_138":19,"_139":19,"_98":99,"_140":141,"_142":55},{"_17":70,"_13":16,"_35":42,"_130":88,"_131":-5,"_132":-5,"_133":-5,"_134":-5,"_135":-5,"_136":14,"_137":12},"ctx",{"_123":-5,"_159":225,"_226":227,"_228":229,"_230":55,"_231":55,"_232":55,"_233":46,"_234":-5,"_235":-7,"_236":-7,"_237":63,"_238":55,"_239":55,"_240":-5,"_241":55,"_242":55,"_243":55,"_244":-5},"ENV",{"_196":197,"_198":199,"_200":16,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
</article></body></html>

Code