M12 / ST-1110: Demo gebruiker read-only (#17)

* feat(ST-1110.3): add proxy.ts demo-guard for non-GET API routes

* feat(ST-1110.3+4): demo-guard proxy + block demo in QR-pairing

- proxy.ts: gebruik unsealData ipv getIronSession (middleware-compatibel)
- pair/start: isDemo-check via cookies() guard
- pair/claim: check pairing.user.is_demo na DB-read; 403 + clearPairCookie

* feat(ST-1110.5): unify demo write-button pattern to disabled+tooltip

Convert all !isDemo && <Button> patterns to <DemoTooltip show={isDemo}>
<Button disabled={isDemo}> so demo visitors see app capabilities.
Affects: pbi-list, story-panel, story-dialog, task-list, sprint-backlog,
token-manager, product-list, activate-product-button, leave-product-button,
settings page.

* test(ST-1110.6): proxy demo-guard coverage — 403 for demo+non-GET on /api/*

* docs(ST-1110.7): document three-layer demo-readonly policy and mirror plan

CLAUDE.md

@@ -137,7 +137,7 @@ Volledige Zod-schema in `lib/env.ts`. `.env.example` is de canonieke lijst voor
 - **Toegangsmodel:** product-scoped resources gebruiken `productAccessFilter(userId)` tenzij het expliciet een eigenaarsactie is
 - **Bulk-ID's:** reorder- en beslissingsacties valideren dat alle meegegeven IDs binnen dezelfde parent-scope vallen voordat er geschreven wordt
 - **Foreign keys:** denormalized keys zoals `story.product_id` worden afgeleid uit de database-parent (`pbi.product_id`), nooit uit client-input
-- **Demo-check:** elke Server Action controleert `session.isDemo` vóór schrijven
+- **Demo-check (drie lagen — ST-1110):** write-acties zijn drielaags afgedekt: (1) middleware-guard in `proxy.ts` blokkeert non-GET op `/api/*` voor demo; (2) elke Server Action / Route Handler controleert `session.isDemo` vóór schrijven; (3) write-knoppen in UI zijn `disabled` met `<DemoTooltip show={isDemo}>`. Zie `docs/scrum4me-architecture.md#demo-user-policy` en `docs/plans/ST-1110-demo-readonly.md`
 - **Foutberichten:** Nederlands voor eindgebruikers — comments in code: Engels
 - **Dependencies:** elke geïmporteerde runtime package staat direct in `dependencies`, niet alleen transitief in `package-lock.json`
 - **Docs-sync:** elke gedrags-, dependency-, API- of deploymentwijziging werkt README, relevante docs en patterns bij in dezelfde change

__tests__/api/pair-claim.test.ts

@@ -103,7 +103,7 @@ describe('POST /api/auth/pair/claim', () => {
     expect(mockClearPairCookie).toHaveBeenCalledTimes(1)
   })
 
-  it('demo-user: isDemo doorgezet als vangnet', async () => {
+  it('demo-user: claim geblokkeerd met 403 (ST-1110.4)', async () => {
     mockReadPairCookie.mockResolvedValue(COOKIE_TOKEN)
     mockPrisma.loginPairing.updateMany.mockResolvedValue({ count: 1 })
     mockPrisma.loginPairing.findUnique.mockResolvedValue({
@@ -112,8 +112,10 @@ describe('POST /api/auth/pair/claim', () => {
     })
 
     const res = await POST(makePost({ pairingId: PAIRING_ID }))
-    expect(res.status).toBe(200)
+    expect(res.status).toBe(403)
-    expect(mockSession.isDemo).toBe(true)
+    const body = await res.json()
+    expect(body.error).toMatch(/demo-modus/i)
+    expect(mockClearPairCookie).toHaveBeenCalledTimes(1)
   })
 
   it('401 zonder s4m_pair-cookie', async () => {

__tests__/api/pair-start.test.ts

@@ -1,7 +1,12 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 
-const { cookieJar } = vi.hoisted(() => ({
+const { cookieJar, mockGetIronSession } = vi.hoisted(() => ({
   cookieJar: { set: vi.fn(), get: vi.fn(), delete: vi.fn() },
+  mockGetIronSession: vi.fn().mockResolvedValue({ isDemo: false }),
+}))
+
+vi.mock('iron-session', () => ({
+  getIronSession: mockGetIronSession,
 }))
 
 vi.mock('@/lib/prisma', () => ({

__tests__/proxy/demo-guard.test.ts

@@ -0,0 +1,78 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+const { mockUnsealData } = vi.hoisted(() => ({
+  mockUnsealData: vi.fn(),
+}))
+
+vi.mock('iron-session', () => ({
+  unsealData: mockUnsealData,
+}))
+
+vi.mock('@/lib/session', () => ({
+  sessionOptions: { cookieName: 'scrum4me-session', password: 'test-secret' },
+}))
+
+import { NextRequest } from 'next/server'
+import { proxy } from '@/proxy'
+
+const COOKIE_NAME = 'scrum4me-session'
+const RAW_COOKIE = 'sealed-cookie-value'
+
+function makeRequest(method: string, path: string, withCookie = false): NextRequest {
+  const url = `http://localhost:3000${path}`
+  const headers = new Headers()
+  if (withCookie) headers.set('Cookie', `${COOKIE_NAME}=${RAW_COOKIE}`)
+  return new NextRequest(url, { method, headers })
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+})
+
+describe('proxy demo-guard', () => {
+  it('demo + POST /api/todos → 403', async () => {
+    mockUnsealData.mockResolvedValue({ userId: 'demo-user', isDemo: true })
+    const req = makeRequest('POST', '/api/todos', true)
+    const res = await proxy(req)
+    expect(res?.status).toBe(403)
+    const body = await res?.json()
+    expect(body.error).toMatch(/demo-modus/i)
+  })
+
+  it('demo + GET /api/todos → passthrough (GET is veilig)', async () => {
+    const req = makeRequest('GET', '/api/todos', true)
+    const res = await proxy(req)
+    // NextResponse.next() heeft geen status 403
+    expect(res?.status).not.toBe(403)
+    // unsealData nooit aangeroepen voor GET
+    expect(mockUnsealData).not.toHaveBeenCalled()
+  })
+
+  it('non-demo + POST /api/todos → passthrough', async () => {
+    mockUnsealData.mockResolvedValue({ userId: 'real-user', isDemo: false })
+    const req = makeRequest('POST', '/api/todos', true)
+    const res = await proxy(req)
+    expect(res?.status).not.toBe(403)
+  })
+
+  it('geen cookie + POST /api/todos → passthrough (geen sessie = niet geblokkeerd)', async () => {
+    const req = makeRequest('POST', '/api/todos', false)
+    const res = await proxy(req)
+    expect(mockUnsealData).not.toHaveBeenCalled()
+    expect(res?.status).not.toBe(403)
+  })
+
+  it('demo + POST /api/cron/expire-questions → passthrough (cron in allowlist)', async () => {
+    const req = makeRequest('POST', '/api/cron/expire-questions', true)
+    const res = await proxy(req)
+    expect(mockUnsealData).not.toHaveBeenCalled()
+    expect(res?.status).not.toBe(403)
+  })
+
+  it('demo + POST /api/auth/pair/start → 403 (M11-keuze: blokken)', async () => {
+    mockUnsealData.mockResolvedValue({ userId: 'demo-user', isDemo: true })
+    const req = makeRequest('POST', '/api/auth/pair/start', true)
+    const res = await proxy(req)
+    expect(res?.status).toBe(403)
+  })
+})

app/(app)/settings/page.tsx

@@ -95,10 +95,7 @@ export default async function SettingsPage() {
             </p>
           </div>
           {!session.isDemo && (
-            <Link
+            <Link href="/products/new" className="shrink-0 text-xs text-primary hover:underline font-medium">
-              href="/products/new"
-              className="shrink-0 text-xs text-primary hover:underline font-medium"
-            >
               + Nieuw product
             </Link>
           )}
@@ -149,8 +146,8 @@ export default async function SettingsPage() {
                         label="Maak actief"
                       />
                     )}
-                    {pb.kind === 'member' && !session.isDemo && (
+                    {pb.kind === 'member' && (
-                      <LeaveProductButton productId={pb.id} />
+                      <LeaveProductButton productId={pb.id} isDemo={session.isDemo ?? false} />
                     )}
                   </div>
                 </li>

app/api/auth/pair/claim/route.ts

@@ -80,6 +80,11 @@ export async function POST(request: Request) {
     return Response.json({ error: 'Pairing zonder user' }, { status: 500 })
   }
 
+  if (pairing.user?.is_demo) {
+    await clearPairCookie()
+    return Response.json({ error: 'Niet beschikbaar in demo-modus' }, { status: 403 })
+  }
+
   const session = await getIronSession<SessionData>(await cookies(), sessionOptions)
   session.userId = pairing.user_id
   session.isDemo = pairing.user?.is_demo ?? false

app/api/auth/pair/start/route.ts

@@ -9,6 +9,8 @@
 //
 // Rate-limit: 10 pogingen per IP per minuut (lib/rate-limit.ts → 'pair-start').
 
+import { getIronSession } from 'iron-session'
+import { cookies } from 'next/headers'
 import { prisma } from '@/lib/prisma'
 import {
   generateMobileSecret,
@@ -17,6 +19,7 @@ import {
 } from '@/lib/auth/pairing'
 import { setPairCookie } from '@/lib/auth/pair-cookie'
 import { checkRateLimit } from '@/lib/rate-limit'
+import { SessionData, sessionOptions } from '@/lib/session'
 
 export const runtime = 'nodejs'
 
@@ -34,6 +37,11 @@ function getClientIp(request: Request): string {
 }
 
 export async function POST(request: Request) {
+  const session = await getIronSession<SessionData>(await cookies(), sessionOptions)
+  if (session.isDemo) {
+    return Response.json({ error: 'Niet beschikbaar in demo-modus' }, { status: 403 })
+  }
+
   const ip = getClientIp(request)
   if (!checkRateLimit(`pair-start:${ip}`)) {
     return Response.json(

components/backlog/pbi-list.tsx

@@ -32,6 +32,7 @@ import { reorderPbisAction, updatePbiPriorityAction } from '@/actions/stories'
 import { cn } from '@/lib/utils'
 import { PbiDialog, type PbiDialogState } from './pbi-dialog'
 import { BacklogCard } from './backlog-card'
+import { DemoTooltip } from '@/components/shared/demo-tooltip'
 import { PRIORITY_COLORS } from '@/components/shared/priority-select'
 import { PBI_STATUS_LABELS, PBI_STATUS_COLORS } from '@/components/shared/pbi-status-select'
 import type { PbiStatusApi } from '@/lib/task-status'
@@ -164,24 +165,30 @@ function SortablePbiRow({
           {PBI_STATUS_LABELS[pbi.status]}
         </Badge>
       }
-      actions={!isDemo ? (
+      actions={
         <div className="flex items-center gap-1">
-          <button
+          <DemoTooltip show={isDemo}>
-            onClick={(e) => { e.stopPropagation(); onEdit() }}
+            <button
-            className="border border-border rounded px-1.5 py-0.5 text-xs text-muted-foreground hover:text-foreground hover:bg-surface-container transition-colors"
+              onClick={(e) => { e.stopPropagation(); if (!isDemo) onEdit() }}
-            aria-label="Bewerk PBI"
+              className="border border-border rounded px-1.5 py-0.5 text-xs text-muted-foreground hover:text-foreground hover:bg-surface-container transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
-          >
+              aria-label="Bewerk PBI"
-            ✎
+              disabled={isDemo}
-          </button>
+            >
-          <button
+              ✎
-            onClick={(e) => { e.stopPropagation(); onDelete() }}
+            </button>
-            className="text-muted-foreground hover:text-error text-xs"
+          </DemoTooltip>
-            aria-label="Verwijder PBI"
+          <DemoTooltip show={isDemo}>
-          >
+            <button
-            ×
+              onClick={(e) => { e.stopPropagation(); if (!isDemo) onDelete() }}
-          </button>
+              className="text-muted-foreground hover:text-error text-xs disabled:opacity-40 disabled:cursor-not-allowed"
+              aria-label="Verwijder PBI"
+              disabled={isDemo}
+            >
+              ×
+            </button>
+          </DemoTooltip>
         </div>
-      ) : undefined}
+      }
     />
   )
 }
@@ -383,15 +390,16 @@ export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
                 </div>
               </PopoverContent>
             </Popover>
-            {!isDemo && (
+            <DemoTooltip show={isDemo}>
               <Button
                 size="sm"
                 className="h-7 text-xs"
-                onClick={() => setDialogState({ mode: 'create', productId, defaultPriority: 2 })}
+                disabled={isDemo}
+                onClick={() => !isDemo && setDialogState({ mode: 'create', productId, defaultPriority: 2 })}
               >
                 + PBI
               </Button>
-            )}
+            </DemoTooltip>
           </>
         }
       />
@@ -400,11 +408,11 @@ export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
         {pbis.length === 0 ? (
           <div className="p-8 text-center text-muted-foreground text-sm space-y-3">
             <p>Nog geen PBI&apos;s aangemaakt.</p>
-            {!isDemo && (
+            <DemoTooltip show={isDemo}>
-              <Button size="sm" variant="outline" onClick={() => setDialogState({ mode: 'create', productId, defaultPriority: 2 })}>
+              <Button size="sm" variant="outline" disabled={isDemo} onClick={() => !isDemo && setDialogState({ mode: 'create', productId, defaultPriority: 2 })}>
                 Maak je eerste PBI aan
               </Button>
-            )}
+            </DemoTooltip>
           </div>
         ) : (
           <DndContext

components/backlog/story-dialog.tsx

@@ -17,6 +17,7 @@ import { Textarea } from '@/components/ui/textarea'
 import { Badge } from '@/components/ui/badge'
 import { PrioritySelect, PRIORITY_LABELS, PRIORITY_COLORS } from '@/components/shared/priority-select'
 import { StoryLog } from '@/components/shared/story-log'
+import { DemoTooltip } from '@/components/shared/demo-tooltip'
 import { createStoryAction, updateStoryAction, deleteStoryAction, getStoryLogsAction } from '@/actions/stories'
 import { cn } from '@/lib/utils'
 import type { Story } from './story-panel'
@@ -42,10 +43,10 @@ const STATUS_LABELS: Record<string, string> = {
   DONE: 'Klaar',
 }
 
-function SubmitButton({ label }: { label: string }) {
+function SubmitButton({ label, disabled }: { label: string; disabled?: boolean }) {
   const { pending } = useFormStatus()
   return (
-    <Button type="submit" disabled={pending}>
+    <Button type="submit" disabled={disabled || pending}>
       {pending ? '…' : label}
     </Button>
   )
@@ -262,9 +263,9 @@ export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps
             )}
           </div>
 
-          {isEdit && !isDemo && (
+          {isEdit && (
             <div className="px-5 py-3 border-t border-border shrink-0">
-              {confirmDelete ? (
+              {!isDemo && confirmDelete ? (
                 <div className="flex items-center gap-2">
                   <span className="text-xs text-muted-foreground flex-1">
                     Weet je het zeker? Taken worden ook verwijderd.
@@ -277,24 +278,29 @@ export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps
                   </Button>
                 </div>
               ) : (
-                <Button
+                <DemoTooltip show={isDemo}>
-                  type="button"
+                  <Button
-                  variant="ghost"
+                    type="button"
-                  size="sm"
+                    variant="ghost"
-                  className="text-error hover:bg-error/10"
+                    size="sm"
-                  onClick={() => setConfirmDelete(true)}
+                    className="text-error hover:bg-error/10"
-                >
+                    disabled={isDemo}
-                  Story verwijderen
+                    onClick={() => !isDemo && setConfirmDelete(true)}
-                </Button>
+                  >
+                    Story verwijderen
+                  </Button>
+                </DemoTooltip>
               )}
             </div>
           )}
 
           <div className="flex justify-end gap-2 px-5 py-4 border-t border-border shrink-0 rounded-b-xl bg-muted/50">
             <DialogClose render={<Button type="button" variant="outline" />}>
-              {isDemo ? 'Sluiten' : 'Annuleren'}
+              Annuleren
             </DialogClose>
-            {!isDemo && <SubmitButton label={isEdit ? 'Opslaan' : 'Aanmaken'} />}
+            <DemoTooltip show={isDemo}>
+              <SubmitButton label={isEdit ? 'Opslaan' : 'Aanmaken'} disabled={isDemo} />
+            </DemoTooltip>
           </div>
         </form>
       </DialogContent>

components/backlog/story-panel.tsx

@@ -30,6 +30,7 @@ import { usePlannerStore } from '@/stores/planner-store'
 import { reorderStoriesAction } from '@/actions/stories'
 import { StoryDialog, type StoryDialogState } from './story-dialog'
 import { BacklogCard } from './backlog-card'
+import { DemoTooltip } from '@/components/shared/demo-tooltip'
 import { cn } from '@/lib/utils'
 
 type SortMode = 'priority' | 'code' | 'date'
@@ -223,14 +224,17 @@ export function StoryPanel({ productId, storiesByPbi, isDemo }: StoryPanelProps)
                 <SelectItem value="DONE">Klaar</SelectItem>
               </SelectContent>
             </Select>
-            {selectedPbiId && !isDemo && (
+            {selectedPbiId && (
-              <Button
+              <DemoTooltip show={isDemo}>
-                size="sm"
+                <Button
-                className="h-7 text-xs"
+                  size="sm"
-                onClick={() => setStoryDialogState({ mode: 'create', pbiId: selectedPbiId, productId, defaultPriority: 2 })}
+                  className="h-7 text-xs"
-              >
+                  disabled={isDemo}
-                + Story
+                  onClick={() => !isDemo && setStoryDialogState({ mode: 'create', pbiId: selectedPbiId, productId, defaultPriority: 2 })}
-              </Button>
+                >
+                  + Story
+                </Button>
+              </DemoTooltip>
             )}
           </>
         }
@@ -244,10 +248,12 @@ export function StoryPanel({ productId, storiesByPbi, isDemo }: StoryPanelProps)
         ) : rawStories.length === 0 ? (
           <div className="text-center mt-8 space-y-3">
             <p className="text-sm text-muted-foreground">Nog geen stories voor dit PBI.</p>
-            {!isDemo && selectedPbiId && (
+            {selectedPbiId && (
-              <Button size="sm" variant="outline" onClick={() => setStoryDialogState({ mode: 'create', pbiId: selectedPbiId, productId, defaultPriority: 2 })}>
+              <DemoTooltip show={isDemo}>
-                Maak je eerste story aan
+                <Button size="sm" variant="outline" disabled={isDemo} onClick={() => !isDemo && setStoryDialogState({ mode: 'create', pbiId: selectedPbiId, productId, defaultPriority: 2 })}>
-              </Button>
+                  Maak je eerste story aan
+                </Button>
+              </DemoTooltip>
             )}
           </div>
         ) : (

components/dashboard/product-list.tsx

@@ -7,6 +7,7 @@ import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { CodeBadge } from '@/components/shared/code-badge'
+import { DemoTooltip } from '@/components/shared/demo-tooltip'
 import { restoreProductAction } from '@/actions/products'
 import { setActiveProductAction } from '@/actions/active-product'
 
@@ -38,7 +39,6 @@ export function ProductList({ products, isDemo, showArchived = false, activeProd
   }
 
   function handleActivate(id: string) {
-    if (isDemo) { toast.error('Niet beschikbaar in demo-modus'); return }
     startTransition(async () => {
       const result = await setActiveProductAction(id)
       if (result?.error) toast.error(typeof result.error === 'string' ? result.error : 'Activeren mislukt')
@@ -54,11 +54,11 @@ export function ProductList({ products, isDemo, showArchived = false, activeProd
             ? 'Geen gearchiveerde producten.'
             : 'Je hebt nog geen producten aangemaakt.'}
         </p>
-        {!isDemo && !showArchived && (
+        <DemoTooltip show={isDemo}>
-          <Button variant="outline" nativeButton={false} render={<Link href="/products/new" />}>
+          <Button variant="outline" nativeButton={false} render={<Link href={isDemo ? '#' : '/products/new'} />} disabled={isDemo}>
             Maak je eerste product aan
           </Button>
-        )}
+        </DemoTooltip>
       </div>
     )
   }
@@ -103,21 +103,27 @@ export function ProductList({ products, isDemo, showArchived = false, activeProd
                 product.id === activeProductId
                   ? <Badge className="bg-primary-container text-primary-container-foreground text-xs px-2 py-0">Actief</Badge>
                   : (
-                    <button
+                    <DemoTooltip show={isDemo}>
-                      onClick={(e) => { e.stopPropagation(); handleActivate(product.id) }}
+                      <button
-                      className="text-xs text-primary hover:underline"
+                        onClick={(e) => { e.stopPropagation(); if (!isDemo) handleActivate(product.id) }}
-                    >
+                        className="text-xs text-primary hover:underline disabled:opacity-40 disabled:cursor-not-allowed disabled:no-underline"
-                      Activeer
+                        disabled={isDemo}
-                    </button>
+                      >
+                        Activeer
+                      </button>
+                    </DemoTooltip>
                   )
               )}
-              {showArchived && !isDemo && (
+              {showArchived && (
-                <button
+                <DemoTooltip show={isDemo}>
-                  onClick={(e) => { e.stopPropagation(); handleRestore(product.id) }}
+                  <button
-                  className="text-xs text-primary hover:underline"
+                    onClick={(e) => { e.stopPropagation(); if (!isDemo) handleRestore(product.id) }}
-                >
+                    className="text-xs text-primary hover:underline disabled:opacity-40 disabled:cursor-not-allowed"
-                  Herstellen
+                    disabled={isDemo}
-                </button>
+                  >
+                    Herstellen
+                  </button>
+                </DemoTooltip>
               )}
             </div>
           </div>

components/settings/leave-product-button.tsx

@@ -2,13 +2,15 @@
 
 import { useState, useTransition } from 'react'
 import { Button } from '@/components/ui/button'
+import { DemoTooltip } from '@/components/shared/demo-tooltip'
 import { leaveProductAction } from '@/actions/products'
 
 interface LeaveProductButtonProps {
   productId: string
+  isDemo?: boolean
 }
 
-export function LeaveProductButton({ productId }: LeaveProductButtonProps) {
+export function LeaveProductButton({ productId, isDemo = false }: LeaveProductButtonProps) {
   const [confirming, setConfirming] = useState(false)
   const [isPending, startTransition] = useTransition()
 
@@ -32,13 +34,16 @@ export function LeaveProductButton({ productId }: LeaveProductButtonProps) {
   }
 
   return (
-    <Button
+    <DemoTooltip show={isDemo}>
-      variant="outline"
+      <Button
-      size="sm"
+        variant="outline"
-      className="shrink-0 border-error/40 text-error hover:bg-error/10"
+        size="sm"
-      onClick={() => setConfirming(true)}
+        className="shrink-0 border-error/40 text-error hover:bg-error/10"
-    >
+        disabled={isDemo}
-      Verlaten
+        onClick={() => !isDemo && setConfirming(true)}
-    </Button>
+      >
+        Verlaten
+      </Button>
+    </DemoTooltip>
   )
 }

components/settings/token-manager.tsx

@@ -4,6 +4,7 @@ import { useState, useActionState, useTransition } from 'react'
 import { useFormStatus } from 'react-dom'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
+import { DemoTooltip } from '@/components/shared/demo-tooltip'
 import { createApiTokenAction, revokeApiTokenAction } from '@/actions/api-tokens'
 
 interface Token {
@@ -18,12 +19,14 @@ interface TokenManagerProps {
   isDemo: boolean
 }
 
-function CreateSubmitButton() {
+function CreateSubmitButton({ isDemo }: { isDemo: boolean }) {
   const { pending } = useFormStatus()
   return (
-    <Button type="submit" disabled={pending}>
+    <DemoTooltip show={isDemo}>
-      {pending ? 'Aanmaken…' : 'Token aanmaken'}
+      <Button type="submit" disabled={isDemo || pending}>
-    </Button>
+        {pending ? 'Aanmaken…' : 'Token aanmaken'}
+      </Button>
+    </DemoTooltip>
   )
 }
 
@@ -80,21 +83,19 @@ export function TokenManager({ tokens, isDemo }: TokenManagerProps) {
       )}
 
       {/* Create form */}
-      {!isDemo && (
+      <div className="bg-surface-container-low border border-border rounded-xl p-5 space-y-4">
-        <div className="bg-surface-container-low border border-border rounded-xl p-5 space-y-4">
+        <h2 className="text-sm font-medium text-foreground">Nieuw token aanmaken</h2>
-          <h2 className="text-sm font-medium text-foreground">Nieuw token aanmaken</h2>
+        <form action={formAction} className="flex gap-2">
-          <form action={formAction} className="flex gap-2">
+          <Input name="label" placeholder="Label (optioneel)" className="flex-1" disabled={isDemo} />
-            <Input name="label" placeholder="Label (optioneel)" className="flex-1" />
+          <CreateSubmitButton isDemo={isDemo} />
-            <CreateSubmitButton />
+        </form>
-          </form>
+        {typeof state?.error === 'string' && (
-          {typeof state?.error === 'string' && (
+          <p className="text-xs text-error">{state.error}</p>
-            <p className="text-xs text-error">{state.error}</p>
+        )}
-          )}
+        <p className="text-xs text-muted-foreground">
-          <p className="text-xs text-muted-foreground">
+          Maximaal 10 actieve tokens. Je hebt er nu {activeTokens.length}.
-            Maximaal 10 actieve tokens. Je hebt er nu {activeTokens.length}.
+        </p>
-          </p>
+      </div>
-        </div>
-      )}
 
       {/* Active tokens */}
       <div className="space-y-2">
@@ -111,16 +112,17 @@ export function TokenManager({ tokens, isDemo }: TokenManagerProps) {
                     Aangemaakt {new Date(token.created_at).toLocaleDateString('nl-NL')}
                   </p>
                 </div>
-                {!isDemo && (
+                <DemoTooltip show={isDemo}>
                   <Button
                     size="sm"
                     variant="ghost"
                     className="text-error hover:bg-error/10 shrink-0"
-                    onClick={() => handleRevoke(token.id)}
+                    disabled={isDemo}
+                    onClick={() => !isDemo && handleRevoke(token.id)}
                   >
                     Intrekken
                   </Button>
-                )}
+                </DemoTooltip>
               </div>
             ))}
           </div>

components/shared/activate-product-button.tsx

@@ -3,6 +3,7 @@
 import { useRouter } from 'next/navigation'
 import { useTransition } from 'react'
 import { toast } from 'sonner'
+import { DemoTooltip } from '@/components/shared/demo-tooltip'
 import { setActiveProductAction } from '@/actions/active-product'
 
 interface Props {
@@ -18,7 +19,6 @@ export function ActivateProductButton({ productId, isDemo, redirectTo, label = '
   const [isPending, startTransition] = useTransition()
 
   function handleActivate() {
-    if (isDemo) { toast.error('Niet beschikbaar in demo-modus'); return }
     startTransition(async () => {
       const result = await setActiveProductAction(productId)
       if (result?.error) toast.error(typeof result.error === 'string' ? result.error : 'Activeren mislukt')
@@ -28,12 +28,14 @@ export function ActivateProductButton({ productId, isDemo, redirectTo, label = '
   }
 
   return (
-    <button
+    <DemoTooltip show={isDemo}>
-      onClick={handleActivate}
+      <button
-      disabled={isPending}
+        onClick={() => !isDemo && handleActivate()}
-      className="text-xs text-primary hover:underline font-medium disabled:opacity-50"
+        disabled={isDemo || isPending}
-    >
+        className="text-xs text-primary hover:underline font-medium disabled:opacity-50 disabled:no-underline"
-      {label}
+      >
-    </button>
+        {label}
+      </button>
+    </DemoTooltip>
   )
 }

components/sprint/sprint-backlog.tsx

@@ -189,15 +189,16 @@ function SortableSprintRow({
                   </DropdownMenuContent>
                 </DropdownMenu>
               </DemoTooltip>
-              {!isDemo && (
+              <DemoTooltip show={isDemo}>
                 <button
-                  onClick={e => { e.stopPropagation(); onRemove() }}
+                  onClick={e => { e.stopPropagation(); if (!isDemo) onRemove() }}
-                  className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-error"
+                  className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-error disabled:opacity-40 disabled:cursor-not-allowed"
                   aria-label="Verwijder uit sprint"
+                  disabled={isDemo}
                 >
                   <Trash2 size={14} />
                 </button>
-              )}
+              </DemoTooltip>
             </div>
           </div>
         </div>
@@ -352,14 +353,15 @@ function DraggablePbiStoryRow({
             </Badge>
           </div>
         </div>
-        {!isDemo && (
+        <DemoTooltip show={isDemo}>
           <button
-            onClick={onAdd}
+            onClick={() => !isDemo && onAdd()}
-            className="text-xs text-primary hover:underline shrink-0"
+            className="text-xs text-primary hover:underline shrink-0 disabled:opacity-40 disabled:cursor-not-allowed disabled:no-underline"
+            disabled={isDemo}
           >
             + Toevoegen
           </button>
-        )}
+        </DemoTooltip>
       </div>
     </div>
   )

components/sprint/task-list.tsx

@@ -24,6 +24,7 @@ import {
   createTaskAction, updateTaskStatusAction, updateTaskAction,
   deleteTaskAction, reorderTasksAction,
 } from '@/actions/tasks'
+import { DemoTooltip } from '@/components/shared/demo-tooltip'
 import { cn } from '@/lib/utils'
 
 const STATUS_CYCLE: Record<string, 'TO_DO' | 'IN_PROGRESS' | 'DONE'> = {
@@ -99,7 +100,7 @@ function SortableTaskRow({
         PRIORITY_BORDER[task.priority]
       )}>
         {!isDemo && (
-          <span {...attributes} {...listeners} className="text-muted-foreground cursor-grab active:cursor-grabbing shrink-0 text-sm select-none mt-0.5">⠿</span>
+          <span {...attributes} {...listeners} className="text-muted-foreground cursor-grab active:cursor-grabbing shrink-0 text-sm select-none mt-0.5" aria-hidden="true">⠿</span>
         )}
         <div className="flex-1 min-w-0">
           <div className="flex items-start justify-between gap-2">
@@ -114,12 +115,14 @@ function SortableTaskRow({
                 {STATUS_LABELS[task.status]}
               </Badge>
             </button>
-            {!isDemo && (
+            <div className="opacity-0 group-hover:opacity-100 flex gap-1 shrink-0">
-              <div className="opacity-0 group-hover:opacity-100 flex gap-1 shrink-0">
+              <DemoTooltip show={isDemo}>
-                <button onClick={() => setEditing(true)} className="text-xs text-muted-foreground hover:text-foreground">Bewerk</button>
+                <button onClick={() => !isDemo && setEditing(true)} disabled={isDemo} className="text-xs text-muted-foreground hover:text-foreground disabled:opacity-40 disabled:cursor-not-allowed">Bewerk</button>
-                <button onClick={onDelete} aria-label="Verwijder taak" className="text-xs text-muted-foreground hover:text-error">×</button>
+              </DemoTooltip>
-              </div>
+              <DemoTooltip show={isDemo}>
-            )}
+                <button onClick={() => !isDemo && onDelete()} disabled={isDemo} aria-label="Verwijder taak" className="text-xs text-muted-foreground hover:text-error disabled:opacity-40 disabled:cursor-not-allowed">×</button>
+              </DemoTooltip>
+            </div>
           </div>
         </div>
       </div>
@@ -220,9 +223,9 @@ export function TaskList({ storyId, storyCode, sprintId, productId: _productId,
         actions={
           <>
             <span className="text-xs text-muted-foreground">{doneCount}/{orderedTasks.length} klaar</span>
-            {!isDemo && (
+            <DemoTooltip show={isDemo}>
-              <Button size="sm" className="h-7 text-xs" onClick={() => setCreating(true)}>+ Taak</Button>
+              <Button size="sm" className="h-7 text-xs" disabled={isDemo} onClick={() => !isDemo && setCreating(true)}>+ Taak</Button>
-            )}
+            </DemoTooltip>
           </>
         }
       />
@@ -235,7 +238,9 @@ export function TaskList({ storyId, storyCode, sprintId, productId: _productId,
         {orderedTasks.length === 0 && !creating ? (
           <div className="text-center mt-8 space-y-3">
             <p className="text-sm text-muted-foreground">Geen taken voor deze story.</p>
-            {!isDemo && <Button size="sm" variant="outline" onClick={() => setCreating(true)}>Maak eerste taak aan</Button>}
+            <DemoTooltip show={isDemo}>
+              <Button size="sm" variant="outline" disabled={isDemo} onClick={() => !isDemo && setCreating(true)}>Maak eerste taak aan</Button>
+            </DemoTooltip>
           </div>
         ) : (
           <DndContext

docs/plans/ST-1110-demo-readonly.md

@@ -0,0 +1,62 @@
+# Plan: ST-1110 — Demo gebruiker read-only
+
+## Context
+
+Demo-gebruikers (`is_demo=true` in DB) mogen de app niet muteren. Vóór ST-1110 was de beveiliging gemengd en inconsistent: sommige routes hadden een isDemo-check, sommige niet; UI-patronen waren inconsistent (deels verborgen, deels disabled+toast).
+
+## Audit resultaten (ST-1110.1)
+
+Gevonden beveiligingsgaten vóór ST-1110:
+- `/api/auth/pair/start` en `/api/auth/pair/claim`: geen isDemo-check
+- `/api/todos`, `/api/stories`, `/api/tasks` e.a.: hadden isDemo-check in actie, maar geen middleware-laag
+- UI: 24+ locaties gemengd patroon (`!isDemo && <Button>` of `disabled+toast`)
+
+## Gekozen aanpak (ST-1110.2)
+
+Drie-laagse bescherming:
+1. **Middleware-guard** in `proxy.ts` (defense in depth voor toekomstige routes)
+2. **Per-route guards** in Server Actions en Route Handlers
+3. **UI-laag**: uniform `disabled + DemoTooltip`
+
+## M11-antwoorden
+
+### ST-1110.4 — QR-pairing voor demo-gebruiker
+**Vraag:** Mag een demo-gebruiker een QR-pairing starten en claimen?  
+**Opties:**
+- Blokken — voeg isDemo-check toe in pair/start en pair/claim, demo krijgt 403
+- Openhouden — geen wijziging; demo kan pair-flow starten maar approve faalt toch
+
+**Antwoord (2026-04-29):** **Blokken**
+
+**Implementatie:**
+- `pair/start`: `getIronSession(await cookies(), sessionOptions)` → 403 als `session.isDemo`
+- `pair/claim`: check `pairing.user?.is_demo` na DB-read → 403 + `clearPairCookie()`
+- proxy.ts DEMO_WRITE_ALLOWLIST bevat pair-paden NIET
+
+### ST-1110.5 — Write-knoppen voor demo-gebruiker
+**Vraag:** Hoe write-knoppen tonen aan demo-gebruikers?  
+**Opties:**
+- Verbergen — `{!isDemo && <Button />}`, minder visuele clutter
+- Disabled + tooltip "Niet beschikbaar in demo-modus" — bezoeker ziet wat de app kan
+
+**Antwoord (2026-04-29):** **Disabled + tooltip**
+
+**Implementatie:** Alle `!isDemo && <Button>` patronen omgezet naar `<DemoTooltip show={isDemo}><Button disabled={isDemo}>`.
+
+## Bestanden gewijzigd
+
+| Task | Commits | Bestanden |
+|---|---|---|
+| ST-1110.3 | `feat(ST-1110.3)` | `proxy.ts` |
+| ST-1110.3+4 | `feat(ST-1110.3+4)` | `proxy.ts`, `app/api/auth/pair/start/route.ts`, `app/api/auth/pair/claim/route.ts` |
+| ST-1110.5 | `feat(ST-1110.5)` | 12 component/pagina-bestanden |
+| ST-1110.5 tests | `test(ST-1110.5)` | `__tests__/api/pair-claim.test.ts`, `__tests__/api/pair-start.test.ts` |
+| ST-1110.6 | `test(ST-1110.6)` | `__tests__/proxy/demo-guard.test.ts` |
+| ST-1110.7 | `docs(ST-1110.7)` | `docs/scrum4me-architecture.md`, dit bestand |
+
+## Aandachtspunten toekomstige stories
+
+- Elke nieuwe write-route (Server Action of Route Handler) moet `session.isDemo` checken
+- De middleware-guard valt terug als defense in depth — niet als enige bescherming
+- Drag-and-drop handles blijven verborgen voor demo (`{!isDemo && <span {...listeners} />}`)
+- Nieuwe write-knoppen in UI: `<DemoTooltip show={isDemo}><Button disabled={isDemo}>`

docs/scrum4me-architecture.md

@@ -1001,6 +1001,52 @@ Iron-session cookie of Bearer-token (demo). De auth-check loopt éénmalig bij d
 
 ---
 
+## Demo-user policy (ST-1110)
+
+Demo-gebruikers (`is_demo = true` in de database, `isDemo: true` in de iron-session) hebben volledig read-only toegang. Bescherming is drielaags:
+
+### Laag 1 — Middleware-guard (proxy.ts)
+
+`proxy.ts` blokkeert alle non-GET requests op `/api/*` voor demo-gebruikers voordat de route handler draait (defense in depth). Implementatie gebruikt `unsealData` direct (geen `getIronSession`) omdat `request.cookies` in middleware `RequestCookies` is, niet de volledige `CookieStore`.
+
+```ts
+// Whitelist: paden die demo mag aanroepen ondanks non-GET
+const DEMO_WRITE_ALLOWLIST = [
+  '/api/cron/', // machine-auth, irrelevant voor demo
+]
+// pair/start en pair/claim staan NIET in de allowlist — zie Laag 2
+```
+
+### Laag 2 — Per-route guards (Server Actions & Route Handlers)
+
+Elke schrijfactie controleert `session.isDemo` vóór DB-toegang:
+
+```ts
+if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus' }
+```
+
+**QR-pairing (M10):**
+- `pair/start`: isDemo-check via `getIronSession(await cookies(), sessionOptions)` — blokkeert demo-desktops
+- `pair/claim`: check `pairing.user?.is_demo` na DB-read — blokkeert demo-users die op mobiel hebben goedgekeurd
+- `pair/approve` en `pair/cancel`: waren al geblokkeerd vóór ST-1110
+
+**Realtime SSE en cron-routes:** niet relevant voor demo-bescherming (SSE is read-only, cron gebruikt Bearer-auth).
+
+### Laag 3 — UI-laag (DemoTooltip)
+
+Alle write-knoppen zijn `disabled` met een `DemoTooltip show={isDemo}` wrapper zodat demo-bezoekers de app-mogelijkheden kunnen zien. Consistente component: `components/shared/demo-tooltip.tsx`.
+
+Patroon:
+```tsx
+<DemoTooltip show={isDemo}>
+  <Button disabled={isDemo} onClick={() => !isDemo && handleAction()}>
+    Actie
+  </Button>
+</DemoTooltip>
+```
+
+**Let op:** drag-and-drop handles (`⠿`) blijven verborgen voor demo (`{!isDemo && <span {...listeners} />}`) — dragging is geen UI-showcase maar zou nep-optimistische updates triggeren.
+
 ## Environment variables
 
 | Variabele | Doel | Waar te vinden |

proxy.ts

@@ -1,17 +1,43 @@
 import { NextResponse } from 'next/server'
 import type { NextRequest } from 'next/server'
-import { sessionOptions } from '@/lib/session'
+import { unsealData } from 'iron-session'
+import { sessionOptions, type SessionData } from '@/lib/session'
 
 const protectedRoutes = ['/dashboard', '/products', '/todos', '/settings', '/solo']
 const authRoutes = ['/login', '/register']
 
-export function proxy(request: NextRequest) {
+const SAFE_METHODS = new Set(['GET', 'HEAD', 'OPTIONS'])
-  const path = request.nextUrl.pathname
-  const isProtected = protectedRoutes.some(r => path.startsWith(r))
-  const isAuthRoute = authRoutes.some(r => path.startsWith(r))
 
-  // Check cookie existence only — full session validation happens in layout.tsx
+// Paden die demo MAY aanroepen ook al zijn het non-GET — worden ingevuld na ST-1110.4
+const DEMO_WRITE_ALLOWLIST = [
+  '/api/cron/', // machine-auth, irrelevant for demo
+]
+
+export async function proxy(request: NextRequest) {
+  const { pathname, method } = { pathname: request.nextUrl.pathname, method: request.method }
+
+  // Demo-guard: block non-GET API writes for demo users (defense in depth)
+  if (
+    pathname.startsWith('/api/') &&
+    !SAFE_METHODS.has(method) &&
+    !DEMO_WRITE_ALLOWLIST.some(p => pathname.startsWith(p))
+  ) {
+    const raw = request.cookies.get(sessionOptions.cookieName)?.value
+    if (raw) {
+      const session = await unsealData<SessionData>(raw, { password: sessionOptions.password as string })
+      if (session.isDemo) {
+        return NextResponse.json(
+          { error: 'Niet beschikbaar in demo-modus' },
+          { status: 403 }
+        )
+      }
+    }
+  }
+
+  // Route protection: check cookie existence only — full validation in layout.tsx
   const hasSession = !!request.cookies.get(sessionOptions.cookieName)?.value
+  const isProtected = protectedRoutes.some(r => pathname.startsWith(r))
+  const isAuthRoute = authRoutes.some(r => pathname.startsWith(r))
 
   if (isProtected && !hasSession) {
     return NextResponse.redirect(new URL('/login', request.url))
@@ -25,5 +51,5 @@ export function proxy(request: NextRequest) {
 }
 
 export const config = {
-  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
+  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
 }