feat: ST-401-ST-410 M4 REST API, tokenbeleer en activiteitenlog

- api-auth.ts was al aanwezig; demo-check toegevoegd per endpoint (ST-401)
- Token aanmaken (SHA-256 hash, eenmalig tonen), intrekken, max 10 (ST-402)
- GET /api/products actieve productenlijst (ST-403)
- GET /api/products/:id/next-story hoogst geprioriteerde open story (ST-404)
- GET /api/sprints/:id/tasks met limit parameter (ST-405)
- PATCH /api/stories/:id/tasks/reorder met ID-validatie (ST-406)
- POST /api/stories/:id/log met discriminatedUnion per type (ST-407)
- PATCH /api/tasks/:id status bijwerken met cross-user bescherming (ST-408)
- POST /api/todos via API aanmaken (ST-409)
- StoryLog component met kleurcodering per type in story slide-over (ST-410)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/shared/story-log.tsx

@@ -0,0 +1,103 @@
+interface StoryLogEntry {
+  id: string
+  type: string
+  content: string
+  status: string | null
+  commit_hash: string | null
+  commit_message: string | null
+  created_at: string
+}
+
+interface StoryLogProps {
+  logs: StoryLogEntry[]
+  repoUrl?: string | null
+}
+
+const TYPE_STYLES: Record<string, { bg: string; label: string; labelColor: string }> = {
+  IMPLEMENTATION_PLAN: {
+    bg: 'bg-info-container/50 border-info/20',
+    label: 'Implementatieplan',
+    labelColor: 'text-info',
+  },
+  TEST_RESULT: {
+    bg: 'bg-surface-container border-border',
+    label: 'Testresultaat',
+    labelColor: 'text-foreground',
+  },
+  COMMIT: {
+    bg: 'bg-secondary-container/30 border-secondary/20',
+    label: 'Commit',
+    labelColor: 'text-secondary',
+  },
+}
+
+export function StoryLog({ logs, repoUrl }: StoryLogProps) {
+  if (logs.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground text-center py-4">
+        Nog geen activiteit. Gebruik de REST API om logs toe te voegen.
+      </p>
+    )
+  }
+
+  return (
+    <div className="space-y-3">
+      {logs.map(log => {
+        const style = TYPE_STYLES[log.type] ?? TYPE_STYLES.IMPLEMENTATION_PLAN
+        const isTestResult = log.type === 'TEST_RESULT'
+        const testPassed = log.status === 'PASSED'
+
+        return (
+          <div
+            key={log.id}
+            className={`rounded-lg border p-3 space-y-1.5 ${
+              isTestResult
+                ? testPassed
+                  ? 'bg-success-container/40 border-success/20'
+                  : 'bg-error-container/40 border-error/20'
+                : style.bg
+            }`}
+          >
+            <div className="flex items-center justify-between">
+              <span className={`text-xs font-semibold ${
+                isTestResult ? (testPassed ? 'text-success' : 'text-error') : style.labelColor
+              }`}>
+                {style.label}
+                {isTestResult && ` — ${testPassed ? 'Geslaagd' : 'Mislukt'}`}
+              </span>
+              <span className="text-xs text-muted-foreground">
+                {new Date(log.created_at).toLocaleDateString('nl-NL', {
+                  day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit',
+                })}
+              </span>
+            </div>
+
+            <p className="text-sm text-foreground whitespace-pre-line">{log.content}</p>
+
+            {log.commit_hash && (
+              <div className="flex items-center gap-2 mt-1">
+                {repoUrl ? (
+                  <a
+                    href={`${repoUrl}/commit/${log.commit_hash}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-xs font-mono text-secondary hover:underline"
+                  >
+                    {log.commit_hash.slice(0, 7)}
+                  </a>
+                ) : (
+                  <code className="text-xs font-mono text-secondary">
+                    {log.commit_hash.slice(0, 7)}
+                  </code>
+                )}
+                {log.commit_message && (
+                  <span className="text-xs text-muted-foreground truncate">{log.commit_message}</span>
+                )}
+              </div>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}