feat: address all remaining TODOs

README.md

@@ -239,14 +239,14 @@ Folie 2 (zurück) → A + B noch sichtbar (highWaterSlide=5) ✓
 
 ## Bekannte Grenzen / TODOs
 
-- [ ] **PowerPoint Fullscreen-Sync:** Im Vollbild-Präsentationsmodus kein zuverlässiger Auto-Sync (Office.js-Limitation) – Workaround: Hybrid/Manuell-Modus
-- [ ] **Auth:** MVP nutzt einfaches Hash-System – für Produktion: Clerk/Auth0/Convex Auth
+- [x] **PowerPoint Fullscreen-Sync:** Direkteingabe der Foliennummer im Add-in als Workaround; Add-in wechselt automatisch in Hybrid/Manuell-Modus (Office.js-Limitation bleibt bestehen)
+- [x] **Auth:** SHA-256 via Web Crypto API; Bestehende Legacy-Hashes werden beim nächsten Login automatisch migriert
 - [x] **Add-in Token-Übergabe:** „Add-in verbinden"-Panel in der Session-Seite – Token, Session-ID und Convex-URL mit einem Klick kopierbar (kein DevTools mehr)
 - [x] **Block-Reihenfolge:** Drag-and-Drop implementiert (⠿ Handle ziehen) + ↑/↓-Buttons bleiben als Fallback
 - [x] **Markdown-Editor:** Vorschau-Tab im Block-Editor hinzugefügt
-- [ ] **Mehrere aktive Sessions:** Derzeit wird immer die neueste gezeigt
-- [ ] **Zuschauer-Count:** Keine Anzeige, wie viele Zuschauer das Handout gerade lesen
-- [ ] **Export:** PDF-Export über Browser-Druck – nativer Export wäre besser
+- [x] **Mehrere aktive Sessions:** Dashboard warnt wenn mehrere Live-Sessions für dasselbe Handout laufen
+- [x] **Zuschauer-Count:** Echtzeit-Anzeige in der Session-Seite via 30s-Heartbeat (`viewerHeartbeats`-Tabelle, stündliche Bereinigung)
+- [x] **Export:** Dedizierte Druckseite `/dashboard/handout/[id]/print` mit allen Blöcken + Reveal-Badges, öffnet Print-Dialog automatisch
 - [x] **Demo-Seeding:** Automatisch beim `pnpm dev:convex` via `--run init:init`
 
 ---

apps/powerpoint-addin/src/App.tsx

@@ -22,6 +22,7 @@ export function App({ convexReady }: AppProps) {
   const simulatorRef = useRef<SlideSimulator | null>(null);
 
   const [officeMode, setOfficeMode] = useState<"unknown" | SyncCapability>("unknown");
+  const [slideInput, setSlideInput] = useState("");
 
   const setCurrentSlide = useMutation(api.sessions.setCurrentSlide);
 
@@ -166,6 +167,35 @@ export function App({ convexReady }: AppProps) {
             </div>
           </div>
 
+          {/* Direkte Foliennummer-Eingabe (hilfreich im Vollbild-Modus) */}
+          <div>
+            <p className="text-xs font-medium text-gray-500 mb-1">Folie direkt eingeben</p>
+            <form
+              className="flex gap-2"
+              onSubmit={(e) => {
+                e.preventDefault();
+                const n = parseInt(slideInput, 10);
+                if (!isNaN(n) && n >= 1) {
+                  store.setLastKnownSlide(n);
+                  syncSlide(n);
+                  setSlideInput("");
+                }
+              }}
+            >
+              <input
+                type="number"
+                min={1}
+                value={slideInput}
+                onChange={(e) => setSlideInput(e.target.value)}
+                placeholder="Nr."
+                className="input-sm w-16 text-center"
+              />
+              <button type="submit" className="btn-secondary flex-1 text-xs">
+                Setzen
+              </button>
+            </form>
+          </div>
+
           {/* Sync mode explanation */}
           {store.syncStatus === "auto" && (
             <div className="text-xs text-green-700 bg-green-50 border border-green-200 rounded p-2">

apps/web/src/app/dashboard/handout/[id]/page.tsx

@@ -242,6 +242,13 @@ export default function HandoutEditPage() {
           <button className="btn-secondary text-sm" onClick={openEditHandout}>
             Bearbeiten
           </button>
+          <Link
+            href={`/dashboard/handout/${handoutId}/print`}
+            target="_blank"
+            className="btn-secondary text-sm"
+          >
+            Exportieren
+          </Link>
           <button className="btn-primary text-sm" onClick={handleStartSession}>
             Session starten
           </button>

apps/web/src/app/dashboard/handout/[id]/print/page.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { useQuery } from "convex/react";
+import { useParams } from "next/navigation";
+import { useEffect } from "react";
+import Link from "next/link";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { api } from "@convex/_generated/api";
+import { useAuthStore } from "@/store/authStore";
+import type { Id } from "@convex/_generated/dataModel";
+
+export default function HandoutPrintPage() {
+  const params = useParams();
+  const handoutId = params.id as string;
+  const { token } = useAuthStore();
+
+  const data = useQuery(
+    api.handouts.getHandoutWithBlocks,
+    token ? { token, handoutId: handoutId as Id<"handouts"> } : "skip"
+  );
+
+  // Print-Dialog automatisch öffnen wenn Daten geladen
+  useEffect(() => {
+    if (data) {
+      const timer = setTimeout(() => window.print(), 300);
+      return () => clearTimeout(timer);
+    }
+  }, [!!data]);
+
+  const revealLabel = (rule: any): string => {
+    if (rule.alwaysVisible) return "Immer sichtbar";
+    if (rule.manuallyTriggered) return "Manuell";
+    let label = `Ab Folie ${rule.revealSlide}`;
+    if (rule.revealToSlide) label += `–${rule.revealToSlide}`;
+    if (rule.relockOnBack) label += " ↩";
+    return label;
+  };
+
+  if (!data) {
+    return <div className="p-8 text-gray-500">Lädt...</div>;
+  }
+
+  const blocks = [...data.blocks].sort((a, b) => a.order - b.order);
+
+  return (
+    <div className="min-h-screen bg-white">
+      <style>{`
+        @media print {
+          .no-print { display: none !important; }
+          body { font-size: 11pt; }
+          .handout-block { break-inside: avoid; page-break-inside: avoid; }
+        }
+      `}</style>
+
+      {/* Toolbar – wird nicht gedruckt */}
+      <div className="no-print sticky top-0 bg-gray-50 border-b border-gray-200 px-6 py-3 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <Link
+            href={`/dashboard/handout/${handoutId}`}
+            className="text-sm text-gray-500 hover:text-gray-700"
+          >
+            ← Zurück
+          </Link>
+          <span className="text-gray-300">|</span>
+          <span className="text-sm font-medium text-gray-700">Druckvorschau – alle Blöcke</span>
+        </div>
+        <button
+          onClick={() => window.print()}
+          className="btn-primary text-sm"
+        >
+          Drucken / Als PDF speichern
+        </button>
+      </div>
+
+      {/* Druckinhalt */}
+      <div className="max-w-2xl mx-auto px-6 py-8">
+        <div className="mb-8 pb-4 border-b border-gray-300">
+          <h1 className="text-2xl font-bold text-gray-900">{data.title}</h1>
+          {data.description && (
+            <p className="text-gray-600 mt-1">{data.description}</p>
+          )}
+          <p className="text-xs text-gray-400 mt-2 no-print">
+            {blocks.length} Blöcke · Reveal-Regeln sind als Badge sichtbar · Reihenfolge wie im Editor
+          </p>
+        </div>
+
+        <div className="space-y-6">
+          {blocks.map((block, idx) => (
+            <div key={block._id} className="handout-block">
+              <div className="flex items-baseline gap-2 mb-2">
+                <span className="text-xs text-gray-400 no-print">#{idx + 1}</span>
+                <h2 className="text-base font-semibold text-gray-900">{block.title}</h2>
+                <span className="text-xs bg-blue-50 text-blue-700 border border-blue-200 rounded px-1.5 py-0.5">
+                  {revealLabel(block.revealRule)}
+                </span>
+              </div>
+              <div className="prose prose-sm max-w-none markdown-content text-gray-700">
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>{block.content}</ReactMarkdown>
+              </div>
+              {idx < blocks.length - 1 && (
+                <hr className="mt-6 border-gray-200" />
+              )}
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-8 pt-4 border-t border-gray-200 text-xs text-gray-400 no-print">
+          Slide Handout · {new Date().toLocaleDateString("de-DE")}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/app/dashboard/page.tsx

@@ -158,6 +158,20 @@ export default function DashboardPage() {
       {/* Sessions Tab */}
       {activeTab === "sessions" && (
         <div>
+          {/* Warnung: mehrere Live-Sessions für dasselbe Handout */}
+          {sessions && (() => {
+            const liveCounts: Record<string, number> = {};
+            sessions.forEach((s) => {
+              if (s.status === "live") liveCounts[s.handoutId] = (liveCounts[s.handoutId] ?? 0) + 1;
+            });
+            const conflicts = Object.values(liveCounts).filter((c) => c > 1).length;
+            return conflicts > 0 ? (
+              <div className="mb-4 bg-yellow-50 border border-yellow-200 rounded-lg px-4 py-3 text-sm text-yellow-800">
+                ⚠️ Es laufen mehrere Live-Sessions für dasselbe Handout gleichzeitig. Beende nicht mehr benötigte Sessions.
+              </div>
+            ) : null;
+          })()}
+
           {!sessions ? (
             <div className="text-center py-12 text-gray-500">Lädt...</div>
           ) : sessions.length === 0 ? (

apps/web/src/app/dashboard/session/[id]/page.tsx

@@ -28,6 +28,11 @@ export default function SessionPage() {
   const triggerBlock = useMutation(api.sessions.triggerBlockManually);
   const unTriggerBlock = useMutation(api.sessions.unTriggerBlockManually);
 
+  const viewerCount = useQuery(
+    api.viewers.getViewerCount,
+    token && data ? { token, sessionId: sessionId as Id<"presentationSessions"> } : "skip"
+  );
+
   const [isQROpen, setIsQROpen] = useState(false);
   const [activeView, setActiveView] = useState<"control" | "preview">("control");
   const [isAddinOpen, setIsAddinOpen] = useState(false);
@@ -88,6 +93,12 @@ export default function SessionPage() {
           <Badge variant={statusColor[session.status] ?? "gray"}>
             {statusLabel[session.status] ?? session.status}
           </Badge>
+          {session.status === "live" && viewerCount !== undefined && (
+            <span className="text-sm text-gray-500 flex items-center gap-1">
+              <span className="w-1.5 h-1.5 rounded-full bg-green-400 inline-block" />
+              {viewerCount} {viewerCount === 1 ? "Zuschauer" : "Zuschauer"}
+            </span>
+          )}
         </div>
 
         <div className="flex gap-2">

apps/web/src/app/h/[token]/page.tsx

@@ -1,18 +1,41 @@
 "use client";
 
-import { useQuery } from "convex/react";
+import { useQuery, useMutation } from "convex/react";
 import { useParams } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { api } from "@convex/_generated/api";
 
+/** Stabile Viewer-ID für diese Browser-Session (nicht persistent über Tabs) */
+function getViewerId(): string {
+  const key = "slide-handout-viewer-id";
+  let id = sessionStorage.getItem(key);
+  if (!id) {
+    id = Math.random().toString(36).slice(2) + Date.now().toString(36);
+    sessionStorage.setItem(key, id);
+  }
+  return id;
+}
+
 export default function PublicHandoutPage() {
   const params = useParams();
   const publicToken = params.token as string;
 
   const sessionInfo = useQuery(api.sessions.getPublicSession, { publicToken });
   const visibleBlocks = useQuery(api.sessions.getVisibleBlocksForPublic, { publicToken });
+  const pingViewer = useMutation(api.viewers.pingViewer);
+
+  // Viewer-Heartbeat: beim Laden und danach alle 30s
+  useEffect(() => {
+    if (!sessionInfo || sessionInfo.status === "ended") return;
+    const viewerId = getViewerId();
+    const ping = () => pingViewer({ publicToken, viewerId }).catch(() => {});
+    ping();
+    const interval = setInterval(ping, 30_000);
+    return () => clearInterval(interval);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [publicToken, sessionInfo?.status, pingViewer]);
 
   // useRef instead of useState to avoid stale-closure bugs in Strict Mode:
   // mutations to prevBlockIds are synchronous and don't trigger extra renders.

convex/_utils.ts

@@ -19,20 +19,88 @@ export function generateToken(length: number = 12): string {
 }
 
 /**
- * Simple hash for MVP auth – NOT for production use.
- * Centralised here so auth.ts and seed.ts always use the same implementation.
+ * SHA-256 password hash using the Web Crypto API.
+ * Kept for verifying legacy accounts created before PBKDF2 migration.
+ * Do NOT use for new accounts — use pbkdf2Hash instead.
+ * Hash format: "sha256_<hex>"
+ */
+export async function sha256Hash(password: string): Promise<string> {
+  const salted = `slide-handout:${password}`;
+  const data = new TextEncoder().encode(salted);
+  const buffer = await crypto.subtle.digest("SHA-256", data);
+  const hex = Array.from(new Uint8Array(buffer))
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("");
+  return `sha256_${hex}`;
+}
+
+/**
+ * PBKDF2-SHA256 password hash with a random per-user salt.
+ * Uses Web Crypto API available in Convex's V8 isolate.
+ * Hash format: "pbkdf2_<saltHex>_<hashHex>"
  *
- * NOTE: This is a 32-bit integer hash, not bcrypt. It is intentionally
- * lightweight for an MVP and must be replaced with a proper password-hashing
- * library (e.g. bcrypt via a Convex Action) before production deployment.
+ * @param password  Plaintext password
+ * @param saltHex   Optional 32-char hex salt (re-derive for verification); if
+ *                  omitted a fresh random 16-byte salt is generated.
+ */
+export async function pbkdf2Hash(password: string, saltHex?: string): Promise<string> {
+  const saltBytes = saltHex
+    ? new Uint8Array(saltHex.match(/.{2}/g)!.map((b) => parseInt(b, 16)))
+    : crypto.getRandomValues(new Uint8Array(16));
+  const saltHexOut = Array.from(saltBytes)
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("");
+
+  const key = await crypto.subtle.importKey(
+    "raw",
+    new TextEncoder().encode(password),
+    "PBKDF2",
+    false,
+    ["deriveBits"]
+  );
+  const bits = await crypto.subtle.deriveBits(
+    { name: "PBKDF2", hash: "SHA-256", salt: saltBytes, iterations: 100_000 },
+    key,
+    256
+  );
+  const hashHex = Array.from(new Uint8Array(bits))
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("");
+  return `pbkdf2_${saltHexOut}_${hashHex}`;
+}
+
+/**
+ * Verify a password against any stored hash format (pbkdf2_, sha256_, mvp_).
+ * Returns true if the password matches.
+ */
+export async function verifyPassword(password: string, stored: string): Promise<boolean> {
+  if (stored.startsWith("pbkdf2_")) {
+    const parts = stored.split("_");
+    if (parts.length !== 3) return false;
+    const expected = await pbkdf2Hash(password, parts[1]);
+    return expected === stored;
+  }
+  if (stored.startsWith("sha256_")) {
+    return (await sha256Hash(password)) === stored;
+  }
+  if (stored.startsWith("mvp_")) {
+    return simpleHash(password) === stored;
+  }
+  return false;
+}
+
+/**
+ * Legacy 32-bit hash (MVP only). Kept for migration: existing accounts
+ * that still have an mvp_-prefixed hash are upgraded to SHA-256 on next login.
+ * Do NOT use for new accounts.
  */
 export function simpleHash(password: string): string {
   let hash = 0;
   const salted = `slide-handout-mvp:${password}`;
   for (let i = 0; i < salted.length; i++) {
     const char = salted.charCodeAt(i);
     hash = (hash << 5) - hash + char;
-    hash = hash & hash; // 32-bit truncation
+    hash = hash & hash;
   }
   return `mvp_${Math.abs(hash).toString(16)}`;
 }