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/backlog/story-panel.tsx

@@ -29,7 +29,8 @@ import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sh
 import { PanelNavBar } from '@/components/shared/panel-nav-bar'
 import { useSelectionStore } from '@/stores/selection-store'
 import { usePlannerStore } from '@/stores/planner-store'
-import { createStoryAction, updateStoryAction, deleteStoryAction, reorderStoriesAction } from '@/actions/stories'
+import { createStoryAction, updateStoryAction, deleteStoryAction, reorderStoriesAction, getStoryLogsAction } from '@/actions/stories'
+import { StoryLog } from '@/components/shared/story-log'
 import { cn } from '@/lib/utils'
 
 const PRIORITY_LABELS: Record<number, string> = { 1: 'Kritiek', 2: 'Hoog', 3: 'Gemiddeld', 4: 'Laag' }
@@ -125,6 +126,11 @@ function StoryDetailSheet({
 }) {
   const [confirmDelete, setConfirmDelete] = useState(false)
   const [isDeleting, startDeleteTransition] = useTransition()
+  const [logs, setLogs] = useState<Awaited<ReturnType<typeof getStoryLogsAction>> | null>(null)
+
+  useEffect(() => {
+    getStoryLogsAction(story.id).then(setLogs)
+  }, [story.id])
 
   const [state, formAction] = useActionState(
     async (_prev: unknown, fd: FormData) => {
@@ -212,6 +218,16 @@ function StoryDetailSheet({
           )}
         </div>
 
+        {/* Activity log */}
+        <div className="px-5 py-4 border-t border-border">
+          <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-3">Activiteitenlog</p>
+          {logs && 'logs' in logs && logs.logs ? (
+            <StoryLog logs={logs.logs.map(l => ({ ...l, status: l.status ?? null, commit_hash: l.commit_hash ?? null, commit_message: l.commit_message ?? null }))} repoUrl={logs.repoUrl} />
+          ) : (
+            <p className="text-xs text-muted-foreground">Laden…</p>
+          )}
+        </div>
+
         {!isDemo && (
           <div className="border-t border-border p-4">
             {confirmDelete ? (