M11: Claude vraagt, gebruiker antwoordt (ST-1101..ST-1108) (#13)
* docs(ST-1101..1108): add M11 — Claude question-channel milestone to backlog
Plant acht stories ST-1101..ST-1108 voor het persistente vraag-antwoord-kanaal
tussen Claude (MCP) en de actieve gebruiker. Eerste concrete uitwerking van
de AI-driven dev-flow-richting (strategisch besluit "B" uit overleg na M10).
Beveiligingsuitgangspunt: atomic answer via updateMany WHERE status='open',
demo-blok op write-tools, access-check via productAccessFilter in DB-query én
SSE-filter, cron-endpoint via Bearer-secret, geen vraag/antwoord-tekst in logs.
Hergebruikt bestaande scrum4me_changes-channel (uitgebreid met entity:'question')
en het LISTEN/NOTIFY+ReadableStream-pattern uit M8/M10. Nieuw: user-scoped SSE
op /api/realtime/notifications zodat de bell globaal werkt over producten heen.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* chore(M11): swap demo-active sprint from M10 to M11
M10 is gemerged en afgesloten — M11 wordt de nieuwe demo-actieve milestone
zodat get_claude_context (via MCP) ST-1101 als next-story teruggeeft.
Drie maps in parse-backlog.ts uitgebreid: M11 priority=4, goal omschrijving,
sprint_status='ACTIVE'. M10 → COMPLETED.
Vereist npx prisma db seed na deze commit zodat de live DB de nieuwe
sprint-state weerspiegelt.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* docs(ST-1108): add F-11b — Claude question-channel to functional spec
Voegt feature-omschrijving toe naast bestaande F-11 (Claude Code REST API).
Beschrijft het verloop (Claude → MCP-tool → DB → trigger → SSE → user → answer
→ trigger → Claude polls), acceptatiecriteria (8 items), randgevallen (offline-
Claude, assignee-change, expiry, abuse) en datamodel (claude_questions tabel).
Persona Lars als primair, Dina secundair voor klant-werk.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* chore(M11): drop parser ACTIVE-flip; sprint goes via UI from now on
Bij M9/M10 hebben we de seed-flip (MILESTONE_SPRINT_STATUS pivot) gebruikt om
nieuwe stories als IN_SPRINT in een verse sprint te krijgen. Dat werkt maar
is fragiel:
- npm run seed wist user-data
- de "sprint" die de seed maakt is geen echte planning-actie
- bij multi-product scenario's breekt het model
Vanaf M11 gebruiken we de bestaande Sprint-creatie-UI van Scrum4Me. Stories
voor M11 worden via scripts/insert-milestone.ts (idempotent insert, geen
seed-reset) aan de DB toegevoegd; de gebruiker maakt zelf een Sprint aan in
/products/[scrum4me]/sprint en sleept ST-1101..1108 ernaartoe.
Parser-map M11 dus terug naar COMPLETED zodat een eventuele re-seed niet meer
een fake sprint aanmaakt voor M11-stories.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* feat(ST-1101): add ClaudeQuestion model + notify_question_change trigger
Schema (prisma/schema.prisma):
- Nieuw model ClaudeQuestion: id (cuid), story_id (FK Cascade), task_id?
(FK SetNull), product_id (FK Cascade — gedenormaliseerd uit story.product_id
voor SSE-filter zonder join), asked_by (FK Restrict — Claude-token-houder),
question (Text), options (Json? — string[] voor multi-choice), status
('open'|'answered'|'cancelled'|'expired'), answer (Text?), answered_by
(FK SetNull), answered_at?, created_at, expires_at
- Indexes: (story_id, status), (product_id, status), (status, expires_at)
- Back-relations: User.asked_questions (ClaudeQuestionAsker),
User.answered_questions (ClaudeQuestionAnswerer), Story.claude_questions,
Task.claude_questions, Product.claude_questions
Migratie (20260427224849_add_claude_questions):
- Prisma-gegenereerde DDL voor claude_questions + indexes + 5 FK's
- Toegevoegde notify_question_change() functie + claude_questions_notify trigger
op AFTER INSERT/UPDATE
- Emit op BESTAANDE scrum4me_changes-channel met entity:'question' (i.t.t. M10
dat eigen scrum4me_pairing-channel kreeg) — solo-route in ST-1104 moet
entity='question' wegfilteren om regressie op solo-board te voorkomen
- Trigger leest story.assignee_id voor "wacht op jou"-emphase in payload
- DELETE niet ondersteund — questions gaan naar answered/cancelled/expired
Verification: Node pg-client roundtrip via DATABASE_URL toonde correcte payloads
bij INSERT (op=I, status=open) en UPDATE (op=U, status=answered) met alle FK-IDs
en assignee_id correct uit story-join.
Volgende stap M11: ST-1102 — vier MCP-tools in scrum4me-mcp-repo
(ask_user_question, get_question_answer, list_open_questions, cancel_question).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* feat(ST-1103): add answerQuestion server action
actions/questions.ts:
- answerQuestion(questionId, answer) — auth + Zod + demo-blok + access-check
via productAccessFilter (anyone met product-membership mag antwoorden,
consistent met Scrum self-organizing — niet alleen story-assignee)
- Atomic prisma.claudeQuestion.updateMany WHERE id + status='open' +
expires_at>now → status='answered'; concurrent dubbele submit: één wint
(count=1), rest count=0 met disambiguatie via second findFirst
- revalidatePath('/', 'layout') refresh't NavBar bell-count voor SSR-paths;
realtime updates voor andere clients gaan via SSE in ST-1104/1105
- Begrijpelijke NL-foutmeldingen voor elk faalpad
Tests __tests__/actions/questions.test.ts (6 cases):
- happy: status update + revalidatePath called
- demo-block: error + geen DB-call + geen revalidate
- geen access: error + geen update
- al-answered: race-error 'is al answered'
- expired: race-error 'is verlopen'
- lege answer: Zod-validatie
Quality gates: lint 0 errors, tsc clean, vitest 145/145 (17 files).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* feat(ST-1104): add user-scoped /api/realtime/notifications + filter solo-route
Twee delen:
1. Solo-route filter (1-regel-fix in app/api/realtime/solo/route.ts):
- NotifyPayload uitgebreid met entity:'question'
- shouldEmit returnt direct false bij entity='question'
Voorkomt dat solo-clients M11 question-events ontvangen (geen lekkage naar
het Solo-bord; geen onnodig netwerk-verkeer; loose coupling tussen features).
2. Nieuwe SSE-route app/api/realtime/notifications/route.ts:
- User-scoped (geen ?product_id=); query alle accessible product-IDs één keer
bij connect via productAccessFilter
- LISTEN scrum4me_changes; filter entity='question' && product_id ∈ accessible
- Initial-state-event NA LISTEN actief (race-fix conform M10 ST-1004):
query open vragen voor deze user's accessible products, stuur als event:state
met summary (id, story_code/title, assignee_id, question, options, expires_at)
- Hergebruikt het pg.Client + ReadableStream + heartbeat 25s + hard-close 240s +
abort-cleanup-pattern uit solo-route
Tests __tests__/api/notifications-stream.test.ts:
- 401 zonder iron-session cookie (en geen DB-call)
- Solo-route filter wordt visueel/E2E gedekt in ST-1108-acceptatie
Quality gates: lint 0 errors, tsc clean, vitest 146/146 (18 files).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* feat(ST-1105): add NavBar bell + sheet + answer-modal + Zustand store + SSE hook
UI-volledig voor de Claude vraag-antwoord-flow (M11). Bel-icon links van avatar
in NavBar; klik opent slide-over rechts met openstaande vragen; klik op een vraag
opent een modal voor antwoord. Story-assignee = current user krijgt visuele
"voor jou"-emphase met primary-container accent en error-color badge-ring.
Bestanden:
- stores/notifications-store.ts — Zustand store met init/upsert/remove +
openCount/forYouCount selectors (vereenvoudigd vs solo-store: geen pendingOps,
geen optimistic-echo-onderdrukking)
- lib/realtime/use-notifications-realtime.ts — EventSource hook met state-
event en message-event handling, exponential-backoff reconnect, Page
Visibility pause-resume
- components/notifications/notifications-bridge.tsx — Server Component die
initial open-questions fetcht via productAccessFilter
- components/notifications/notifications-realtime-mount.tsx — tiny client
island dat de store hydrateert + de hook activeert
- components/notifications/notifications-sheet.tsx — shadcn Sheet met item-
lijst, "voor jou"-accent voor assignee-vragen, lege staat
- components/notifications/answer-modal.tsx — Dialog met options-radio of
free-text Textarea (max 4000), char-counter, demo-blok via Tooltip; bij
succes optimistisch remove + sheet blijft open zodat meerdere vragen
achter elkaar te beantwoorden zijn
- components/shared/notifications-bell.tsx — Bell-icon met badge (count >9 → "9+"),
ring-accent als forYouCount > 0, ARIA-label voor screenreaders
Wiring:
- components/shared/nav-bar.tsx — <NotificationsBell /> rechts naast <UserMenu>
- app/(app)/layout.tsx — <NotificationsBridge /> naast <SoloRealtimeBridge />,
user.id (server-side) als prop
base-ui-aanpassingen: SheetTrigger/TooltipTrigger gebruiken render-prop ipv
asChild (geen Radix).
Quality gates: lint 0 errors, tsc clean, vitest 146/146, npm run build groen.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* test(ST-1106): add cross-product access-isolation test for notifications SSE
Demo-policy + assignee-emphase zaten al in eerdere stories:
- answerQuestion demo-blok in actions/questions.test.ts (ST-1103)
- AnswerModal demo-tooltip in components/notifications/answer-modal.tsx (ST-1105)
- requireWriteAccess in MCP write-tools (ST-1102)
Deze story voegt expliciet een access-isolation-test toe op de notifications-
SSE-route: productAccessFilter wordt met de echte userId aangeroepen, en
prisma.product.findMany filter't op archived=false + user_id-scope. Dat
garandeert dat een gebruiker geen question-events ontvangt voor producten waar
hij geen membership op heeft.
Story-assignee-emphase blijft visueel-only (NotificationsBell ring-accent +
Sheet primary-container) — toegang werkt product-membership-breed zodat een
team-lid kan invallen als de assignee niet beschikbaar is.
Quality gates: lint 0 errors, tsc clean, vitest 147/147 (was 146).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* feat(ST-1107): add Vercel cron expire-questions (+ M10 pairing cleanup)
POST /api/cron/expire-questions:
- Auth via Authorization: Bearer ${CRON_SECRET} (Vercel injecteert dit
automatisch wanneer de env-var op de project-omgeving staat); 401 als secret
niet matcht of niet is gezet (faal-veilig — geen open endpoint in dev)
- updateMany op claude_questions WHERE status='open' AND expires_at<now →
'expired'
- Bonus: zelfde route ruimt M10 login_pairings op (status='pending' AND
expires_at<now → 'cancelled'). Eén cron-job is goedkoper qua Vercel-budget
en houdt cleanup-strategie centraal — opvolg-actie uit M10 dat geparkeerd was.
Config:
- vercel.json: crons-entry { path: '/api/cron/expire-questions', schedule: '0 */6 * * *' } (4x/dag)
- lib/env.ts: CRON_SECRET als optional in Zod-schema
- .env.example: documentatie + openssl rand-tip
Tests __tests__/api/cron-expire-questions.test.ts (4 cases):
- 401 zonder Authorization-header
- 401 met verkeerde secret
- 401 als CRON_SECRET niet is gezet (faal-veilig)
- 200 met juiste secret: response { expired_questions, expired_pairings, ran_at }
+ beide updateMany WHERE/data correct
Quality gates: lint 0 errors, tsc clean, vitest 151/151.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* docs(ST-1108): document M11 question-channel — API + architecture + pattern
docs/API.md — twee nieuwe secties:
- 'Notifications' met /api/realtime/notifications SSE-endpoint (event-shapes,
filter-rules, voorbeeld)
- 'Cron — Expire questions' met /api/cron/expire-questions (Bearer-auth,
schedule, response-shape, manual curl)
docs/scrum4me-architecture.md — nieuw hoofdstuk 'Vraag-antwoord-kanaal Claude
↔ user' tussen QR-pairing-flow en Projectstructuur:
- Mermaid sequence-diagram (Claude → DB → trigger → SSE → user → answer →
trigger → Claude polls)
- Threat-model-tabel (race, demo-misbruik, cross-product leak, cron-misbruik,
growth, log-leakage)
- Subsectie 'Waarom hergebruik scrum4me_changes-kanaal' met trade-off vs M10's
eigen-kanaal-aanpak
docs/patterns/claude-question-channel.md — herbruikbaar pattern 'Bidirectionele
async-comms tussen MCP-agent en interactieve user' met de vier eindpunten,
vier security-uitgangspunten, channel-strategie-tabel, TTL-richtlijn, en
sjabloon-bestanden per laag (DB / server / client / MCP-tools).
CLAUDE.md — extra rij in Implementatiepatronen-tabel die naar het nieuwe
pattern-doc verwijst.
Acceptatie 6 scenario's:
1. Sync happy path (MCP wait_seconds + UI submit) — handmatig getest tijdens
ST-1105 acceptance-loop met de q-test injection
2. Async happy path — gedekt door get_question_answer-tool in ST-1102 +
list_open_questions
3. Demo-block — actions/questions.test.ts (case 2: demo-user) + AnswerModal
tooltip (visueel)
4. Access-isolation — notifications-stream.test.ts (case 'access-isolation')
5. Expiry — cron-expire-questions.test.ts (case '200 met juiste secret')
6. Race — actions/questions.test.ts (case 'al-answered' via atomic updateMany)
Quality gates: lint 0 errors, tsc clean, vitest 151/151 (19 files), npm run
build groen.
M11 is hiermee feature-compleet. feat/M11-claude-questions heeft 12 commits
lokaal, klaar voor user-acceptatie en PR.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* fix(ST-1107): cron schedule daily — Vercel Hobby allows only 1 run/day
Vercel deploy faalde met:
> Hobby accounts are limited to daily cron jobs.
> This cron expression (0 */6 * * *) would run more than once per day.
Schedule van 4×/dag (0 */6 * * *) naar 1×/dag (0 4 * * * — 04:00 UTC, rustig
tijdstip). Functioneel acceptabel: ClaudeQuestion TTL is 24u, dus daily
cleanup pakt alles dat in de afgelopen 24u verlopen is. Login-pairings TTL
is 2 min — die zijn al onbruikbaar zodra ze expiren, cron is alleen voor
status-housekeeping.
Schedule-referenties consistent bijgewerkt in docs (API.md, architecture,
backlog M11-sectie, plan-doc, pattern-doc) + comment in route.ts. Vermelding
overal dat dit een Hobby-plan-beperking is en Pro fijnmaziger ondersteunt.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
GitHub
parent
74616432d2
commit
9587ff4ff3
29 changed files with 2216 additions and 3 deletions
|
|
@ -8,3 +8,9 @@ SESSION_SECRET="replace-with-at-least-32-characters"
|
|||
|
||||
# Optional; Vercel and Node set this automatically in deployed environments.
|
||||
NODE_ENV="development"
|
||||
|
||||
# M11 (ST-1107) — shared secret between Vercel cron-trigger and the
|
||||
# /api/cron/expire-questions handler. Required in production; optional in
|
||||
# local dev (the route returns 401 if the Authorization header doesn't match).
|
||||
# Generate with: openssl rand -base64 32
|
||||
CRON_SECRET=""
|
||||
|
|
|
|||
|
|
@ -99,6 +99,7 @@ Lees het relevante patroon vóór je begint. Nooit uit het hoofd schrijven.
|
|||
| Float sort_order drag-and-drop | `docs/patterns/sort-order.md` |
|
||||
| Middleware (route protection) | `docs/patterns/middleware.md` |
|
||||
| QR-pairing (unauth-SSE + pre-auth cookie) | `docs/patterns/qr-login.md` |
|
||||
| Bidirectionele async-comms MCP-agent ↔ user | `docs/patterns/claude-question-channel.md` |
|
||||
| Status-enum mapping (DB ↔ API) | `lib/task-status.ts` |
|
||||
| Client/server module-boundary | `*-server.ts` bevat DB-calls of node-only deps; `*.ts` is pure (client-safe). Nooit `import { ... } from '@/lib/foo-server'` in een client-component, anders krijg je `Module not found: 'dns'`/`'pg'`-style runtime fouten |
|
||||
|
||||
|
|
|
|||
122
__tests__/actions/questions.test.ts
Normal file
122
__tests__/actions/questions.test.ts
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
|
||||
const { mockGetSession } = vi.hoisted(() => ({
|
||||
mockGetSession: vi.fn(),
|
||||
}))
|
||||
|
||||
vi.mock('next/cache', () => ({ revalidatePath: vi.fn() }))
|
||||
|
||||
vi.mock('@/lib/auth', () => ({
|
||||
getSession: mockGetSession,
|
||||
}))
|
||||
|
||||
vi.mock('@/lib/prisma', () => ({
|
||||
prisma: {
|
||||
claudeQuestion: {
|
||||
findFirst: vi.fn(),
|
||||
updateMany: vi.fn(),
|
||||
},
|
||||
},
|
||||
}))
|
||||
|
||||
import { revalidatePath } from 'next/cache'
|
||||
import { prisma } from '@/lib/prisma'
|
||||
import { answerQuestion } from '@/actions/questions'
|
||||
|
||||
const mockPrisma = prisma as unknown as {
|
||||
claudeQuestion: {
|
||||
findFirst: ReturnType<typeof vi.fn>
|
||||
updateMany: ReturnType<typeof vi.fn>
|
||||
}
|
||||
}
|
||||
const mockRevalidate = revalidatePath as ReturnType<typeof vi.fn>
|
||||
|
||||
const VALID_ID = 'cmohrz0jra1aaaaaaaaaaaaaa'
|
||||
const VALID_ANSWER = 'Antwoord van de gebruiker'
|
||||
|
||||
const SESSION_USER = { userId: 'user-1', isDemo: false }
|
||||
const SESSION_DEMO = { userId: 'demo-1', isDemo: true }
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
describe('actions/questions — answerQuestion', () => {
|
||||
it('happy: status pending→answered, revalidatePath geroepen', async () => {
|
||||
mockGetSession.mockResolvedValue(SESSION_USER)
|
||||
mockPrisma.claudeQuestion.findFirst.mockResolvedValueOnce({ id: VALID_ID }) // access-check
|
||||
mockPrisma.claudeQuestion.updateMany.mockResolvedValueOnce({ count: 1 })
|
||||
|
||||
const res = await answerQuestion(VALID_ID, VALID_ANSWER)
|
||||
expect(res).toEqual({ ok: true })
|
||||
|
||||
const updateArg = mockPrisma.claudeQuestion.updateMany.mock.calls[0][0]
|
||||
expect(updateArg.where).toMatchObject({
|
||||
id: VALID_ID,
|
||||
status: 'open',
|
||||
})
|
||||
expect(updateArg.where.expires_at).toMatchObject({ gt: expect.any(Date) })
|
||||
expect(updateArg.data).toMatchObject({
|
||||
status: 'answered',
|
||||
answer: VALID_ANSWER,
|
||||
answered_by: 'user-1',
|
||||
})
|
||||
|
||||
expect(mockRevalidate).toHaveBeenCalledWith('/', 'layout')
|
||||
})
|
||||
|
||||
it('demo-user wordt geblokkeerd, geen DB-call', async () => {
|
||||
mockGetSession.mockResolvedValue(SESSION_DEMO)
|
||||
const res = await answerQuestion(VALID_ID, VALID_ANSWER)
|
||||
expect(res).toEqual({ ok: false, error: 'Niet beschikbaar in demo-modus' })
|
||||
expect(mockPrisma.claudeQuestion.findFirst).not.toHaveBeenCalled()
|
||||
expect(mockPrisma.claudeQuestion.updateMany).not.toHaveBeenCalled()
|
||||
expect(mockRevalidate).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('user zonder product-access: error, geen update', async () => {
|
||||
mockGetSession.mockResolvedValue(SESSION_USER)
|
||||
mockPrisma.claudeQuestion.findFirst.mockResolvedValueOnce(null)
|
||||
|
||||
const res = await answerQuestion(VALID_ID, VALID_ANSWER)
|
||||
expect(res).toEqual({ ok: false, error: 'Vraag niet gevonden of geen toegang' })
|
||||
expect(mockPrisma.claudeQuestion.updateMany).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('al-answered: race-error met begrijpelijke melding', async () => {
|
||||
mockGetSession.mockResolvedValue(SESSION_USER)
|
||||
mockPrisma.claudeQuestion.findFirst.mockResolvedValueOnce({ id: VALID_ID }) // access-check
|
||||
mockPrisma.claudeQuestion.updateMany.mockResolvedValueOnce({ count: 0 })
|
||||
mockPrisma.claudeQuestion.findFirst.mockResolvedValueOnce({
|
||||
status: 'answered',
|
||||
expires_at: new Date(Date.now() + 60_000),
|
||||
})
|
||||
|
||||
const res = await answerQuestion(VALID_ID, VALID_ANSWER)
|
||||
expect(res).toEqual({ ok: false, error: 'Vraag is al answered' })
|
||||
expect(mockRevalidate).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('verlopen: updateMany count=0, nog open status maar voorbij expiry', async () => {
|
||||
mockGetSession.mockResolvedValue(SESSION_USER)
|
||||
mockPrisma.claudeQuestion.findFirst.mockResolvedValueOnce({ id: VALID_ID })
|
||||
mockPrisma.claudeQuestion.updateMany.mockResolvedValueOnce({ count: 0 })
|
||||
mockPrisma.claudeQuestion.findFirst.mockResolvedValueOnce({
|
||||
status: 'open',
|
||||
expires_at: new Date(Date.now() - 60_000),
|
||||
})
|
||||
|
||||
const res = await answerQuestion(VALID_ID, VALID_ANSWER)
|
||||
expect(res).toEqual({ ok: false, error: 'Vraag is verlopen' })
|
||||
})
|
||||
|
||||
it('lege answer: Zod-validatie faalt', async () => {
|
||||
mockGetSession.mockResolvedValue(SESSION_USER)
|
||||
const res = await answerQuestion(VALID_ID, '')
|
||||
expect(res.ok).toBe(false)
|
||||
if (!res.ok) {
|
||||
expect(res.error.toLowerCase()).toMatch(/string|character|leeg|empty|small/i)
|
||||
}
|
||||
expect(mockPrisma.claudeQuestion.findFirst).not.toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
77
__tests__/api/cron-expire-questions.test.ts
Normal file
77
__tests__/api/cron-expire-questions.test.ts
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
|
||||
vi.mock('@/lib/prisma', () => ({
|
||||
prisma: {
|
||||
claudeQuestion: { updateMany: vi.fn() },
|
||||
loginPairing: { updateMany: vi.fn() },
|
||||
},
|
||||
}))
|
||||
|
||||
import { prisma } from '@/lib/prisma'
|
||||
import { POST } from '@/app/api/cron/expire-questions/route'
|
||||
|
||||
const mockPrisma = prisma as unknown as {
|
||||
claudeQuestion: { updateMany: ReturnType<typeof vi.fn> }
|
||||
loginPairing: { updateMany: ReturnType<typeof vi.fn> }
|
||||
}
|
||||
|
||||
const SECRET = 'test-cron-secret-abc123'
|
||||
|
||||
function makeReq(headers: Record<string, string> = {}): Request {
|
||||
return new Request('http://localhost:3000/api/cron/expire-questions', {
|
||||
method: 'POST',
|
||||
headers,
|
||||
})
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
process.env.CRON_SECRET = SECRET
|
||||
mockPrisma.claudeQuestion.updateMany.mockResolvedValue({ count: 0 })
|
||||
mockPrisma.loginPairing.updateMany.mockResolvedValue({ count: 0 })
|
||||
})
|
||||
|
||||
describe('POST /api/cron/expire-questions', () => {
|
||||
it('401 zonder Authorization-header', async () => {
|
||||
const res = await POST(makeReq())
|
||||
expect(res.status).toBe(401)
|
||||
expect(mockPrisma.claudeQuestion.updateMany).not.toHaveBeenCalled()
|
||||
expect(mockPrisma.loginPairing.updateMany).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('401 met verkeerde secret', async () => {
|
||||
const res = await POST(makeReq({ authorization: 'Bearer wrong-secret' }))
|
||||
expect(res.status).toBe(401)
|
||||
})
|
||||
|
||||
it('401 als CRON_SECRET niet is gezet (faal-veilig)', async () => {
|
||||
delete process.env.CRON_SECRET
|
||||
const res = await POST(makeReq({ authorization: 'Bearer ' + SECRET }))
|
||||
expect(res.status).toBe(401)
|
||||
})
|
||||
|
||||
it('200 met juiste secret + beide updateMany aangeroepen', async () => {
|
||||
mockPrisma.claudeQuestion.updateMany.mockResolvedValue({ count: 3 })
|
||||
mockPrisma.loginPairing.updateMany.mockResolvedValue({ count: 1 })
|
||||
|
||||
const res = await POST(makeReq({ authorization: 'Bearer ' + SECRET }))
|
||||
expect(res.status).toBe(200)
|
||||
const body = await res.json()
|
||||
expect(body).toMatchObject({
|
||||
expired_questions: 3,
|
||||
expired_pairings: 1,
|
||||
})
|
||||
expect(body.ran_at).toMatch(/^\d{4}-\d{2}-\d{2}T/)
|
||||
|
||||
// Question-update: status='open' AND expires_at < now → 'expired'
|
||||
const qArg = mockPrisma.claudeQuestion.updateMany.mock.calls[0][0]
|
||||
expect(qArg.where).toMatchObject({ status: 'open' })
|
||||
expect(qArg.where.expires_at).toMatchObject({ lt: expect.any(Date) })
|
||||
expect(qArg.data).toEqual({ status: 'expired' })
|
||||
|
||||
// Pairing-update: status='pending' AND expires_at < now → 'cancelled'
|
||||
const pArg = mockPrisma.loginPairing.updateMany.mock.calls[0][0]
|
||||
expect(pArg.where).toMatchObject({ status: 'pending' })
|
||||
expect(pArg.data).toEqual({ status: 'cancelled' })
|
||||
})
|
||||
})
|
||||
84
__tests__/api/notifications-stream.test.ts
Normal file
84
__tests__/api/notifications-stream.test.ts
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
|
||||
const { mockGetSession } = vi.hoisted(() => ({ mockGetSession: vi.fn() }))
|
||||
|
||||
vi.mock('@/lib/auth', () => ({
|
||||
getSession: mockGetSession,
|
||||
}))
|
||||
|
||||
vi.mock('@/lib/prisma', () => ({
|
||||
prisma: {
|
||||
product: { findMany: vi.fn() },
|
||||
claudeQuestion: { findMany: vi.fn() },
|
||||
},
|
||||
}))
|
||||
|
||||
vi.mock('@/lib/product-access', () => ({
|
||||
productAccessFilter: vi.fn().mockReturnValue({}),
|
||||
getAccessibleProduct: vi.fn(),
|
||||
}))
|
||||
|
||||
import { prisma } from '@/lib/prisma'
|
||||
import type { NextRequest } from 'next/server'
|
||||
import { GET } from '@/app/api/realtime/notifications/route'
|
||||
|
||||
const mockPrisma = prisma as unknown as {
|
||||
product: { findMany: ReturnType<typeof vi.fn> }
|
||||
claudeQuestion: { findMany: ReturnType<typeof vi.fn> }
|
||||
}
|
||||
|
||||
function makeReq(): NextRequest {
|
||||
// Minimaal NextRequest-shape voor de auth-pad — we komen niet bij de
|
||||
// pg-stream-setup omdat de auth-fail vóór dat punt gebeurt.
|
||||
return { signal: new AbortController().signal } as unknown as NextRequest
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
import { productAccessFilter } from '@/lib/product-access'
|
||||
|
||||
const mockProductAccessFilter = productAccessFilter as ReturnType<typeof vi.fn>
|
||||
|
||||
describe('GET /api/realtime/notifications', () => {
|
||||
it('401 zonder iron-session cookie, geen DB-call', async () => {
|
||||
mockGetSession.mockResolvedValue({ userId: undefined, isDemo: false })
|
||||
const res = await GET(makeReq())
|
||||
expect(res.status).toBe(401)
|
||||
expect(mockPrisma.product.findMany).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('access-isolation: productAccessFilter wordt met de juiste userId aangeroepen', async () => {
|
||||
// ST-1106: cross-product-isolatie zit in de productAccessFilter-Set die we
|
||||
// bij connect opbouwen. We mocken de filter zodat product.findMany wel
|
||||
// aangeroepen wordt maar geen producten retourneert; daarna stoppen we
|
||||
// vóór de pg-stream-setup (DIRECT_URL ontbreekt → 500).
|
||||
mockGetSession.mockResolvedValue({ userId: 'user-A', isDemo: false })
|
||||
mockProductAccessFilter.mockReturnValue({ user_id: 'user-A' })
|
||||
mockPrisma.product.findMany.mockResolvedValue([])
|
||||
|
||||
// We laten de stream zelf falen door DIRECT_URL/DATABASE_URL niet te zetten.
|
||||
const before = { ...process.env }
|
||||
delete process.env.DIRECT_URL
|
||||
delete process.env.DATABASE_URL
|
||||
try {
|
||||
const res = await GET(makeReq())
|
||||
expect(res.status).toBe(500)
|
||||
} finally {
|
||||
process.env.DIRECT_URL = before.DIRECT_URL
|
||||
process.env.DATABASE_URL = before.DATABASE_URL
|
||||
}
|
||||
|
||||
// De filter is met de echte userId aangeroepen (cross-user lekt niet)
|
||||
expect(mockProductAccessFilter).toHaveBeenCalledWith('user-A')
|
||||
expect(mockPrisma.product.findMany).toHaveBeenCalledWith({
|
||||
where: { archived: false, user_id: 'user-A' },
|
||||
select: { id: true },
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
// Solo-route filter (entity='question' uitgesloten) is een 1-regel-fix in
|
||||
// app/api/realtime/solo/route.ts. Visueel reviewbaar in de diff; full-stream-
|
||||
// regressie wordt handmatig gedekt in ST-1108-acceptatie.
|
||||
84
actions/questions.ts
Normal file
84
actions/questions.ts
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
'use server'
|
||||
|
||||
// ST-1103: Server Action voor het beantwoorden van een Claude-vraag (M11).
|
||||
//
|
||||
// Volgt docs/patterns/server-action.md: getSession + Zod + demo-blok +
|
||||
// productAccessFilter. Atomic updateMany sluit double-submit uit; bij race
|
||||
// (count=0) doet een tweede findFirst de disambiguatie tussen 'al beantwoord',
|
||||
// 'verlopen', en 'niet gevonden of geen toegang'.
|
||||
//
|
||||
// revalidatePath('/', 'layout') refresh't de NavBar-bell badge-count voor
|
||||
// SSR-rendered pages — de Zustand store + SSE in ST-1104/1105 dekken de
|
||||
// realtime updates voor andere clients.
|
||||
|
||||
import { revalidatePath } from 'next/cache'
|
||||
import { z } from 'zod'
|
||||
import { prisma } from '@/lib/prisma'
|
||||
import { getSession } from '@/lib/auth'
|
||||
import { productAccessFilter } from '@/lib/product-access'
|
||||
|
||||
const inputSchema = z.object({
|
||||
questionId: z.string().cuid(),
|
||||
answer: z.string().min(1).max(4000),
|
||||
})
|
||||
|
||||
type ActionResult = { ok: true } | { ok: false; error: string }
|
||||
|
||||
export async function answerQuestion(
|
||||
questionId: string,
|
||||
answer: string,
|
||||
): Promise<ActionResult> {
|
||||
const session = await getSession()
|
||||
if (!session.userId) return { ok: false, error: 'Niet ingelogd' }
|
||||
if (session.isDemo) return { ok: false, error: 'Niet beschikbaar in demo-modus' }
|
||||
|
||||
const parsed = inputSchema.safeParse({ questionId, answer })
|
||||
if (!parsed.success) {
|
||||
const first = parsed.error.issues[0]?.message ?? 'Ongeldige invoer'
|
||||
return { ok: false, error: first }
|
||||
}
|
||||
|
||||
// Access-check: gebruiker moet toegang hebben tot het product van de vraag.
|
||||
// Iedereen met product-membership mag antwoorden — niet alleen de story-
|
||||
// assignee — consistent met Scrum self-organizing.
|
||||
const question = await prisma.claudeQuestion.findFirst({
|
||||
where: {
|
||||
id: parsed.data.questionId,
|
||||
product: productAccessFilter(session.userId),
|
||||
},
|
||||
select: { id: true },
|
||||
})
|
||||
if (!question) return { ok: false, error: 'Vraag niet gevonden of geen toegang' }
|
||||
|
||||
// Atomic state-transitie: alleen open + niet-verlopen vragen worden beantwoord.
|
||||
// Concurrent dubbele submit: PostgreSQL row-locking laat één caller count=1
|
||||
// zien, de rest count=0 → disambiguatie hieronder.
|
||||
const updated = await prisma.claudeQuestion.updateMany({
|
||||
where: {
|
||||
id: parsed.data.questionId,
|
||||
status: 'open',
|
||||
expires_at: { gt: new Date() },
|
||||
},
|
||||
data: {
|
||||
status: 'answered',
|
||||
answer: parsed.data.answer,
|
||||
answered_by: session.userId,
|
||||
answered_at: new Date(),
|
||||
},
|
||||
})
|
||||
|
||||
if (updated.count !== 1) {
|
||||
const exists = await prisma.claudeQuestion.findFirst({
|
||||
where: { id: parsed.data.questionId },
|
||||
select: { status: true, expires_at: true },
|
||||
})
|
||||
if (!exists) return { ok: false, error: 'Vraag niet gevonden' }
|
||||
if (exists.status !== 'open') {
|
||||
return { ok: false, error: `Vraag is al ${exists.status}` }
|
||||
}
|
||||
return { ok: false, error: 'Vraag is verlopen' }
|
||||
}
|
||||
|
||||
revalidatePath('/', 'layout')
|
||||
return { ok: true }
|
||||
}
|
||||
|
|
@ -9,6 +9,7 @@ import { NavBar } from '@/components/shared/nav-bar'
|
|||
import { MinWidthBanner } from '@/components/shared/min-width-banner'
|
||||
import { StatusBar } from '@/components/shared/status-bar'
|
||||
import { SoloRealtimeBridge } from '@/components/solo/realtime-bridge'
|
||||
import { NotificationsBridge } from '@/components/notifications/notifications-bridge'
|
||||
import { AlertToast } from '@/components/shared/alert-toast'
|
||||
import { Suspense } from 'react'
|
||||
|
||||
|
|
@ -92,6 +93,7 @@ export default async function AppLayout({ children }: { children: React.ReactNod
|
|||
</main>
|
||||
<StatusBar />
|
||||
<SoloRealtimeBridge />
|
||||
<NotificationsBridge userId={session.userId} />
|
||||
<Suspense>
|
||||
<AlertToast />
|
||||
</Suspense>
|
||||
|
|
|
|||
46
app/api/cron/expire-questions/route.ts
Normal file
46
app/api/cron/expire-questions/route.ts
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
// ST-1107: Vercel cron handler die verlopen Claude-vragen op 'expired' zet.
|
||||
//
|
||||
// Wordt dagelijks om 04:00 UTC door Vercel POST'd (zie vercel.json crons-
|
||||
// config; Vercel Hobby-plan staat alleen daily crons toe — Pro ondersteunt
|
||||
// fijnmaziger). Auth is
|
||||
// via een gedeeld secret in de Authorization-header — Vercel injecteert
|
||||
// `Authorization: Bearer <CRON_SECRET>` automatisch wanneer de env-var op de
|
||||
// project-omgeving staat.
|
||||
//
|
||||
// Bonus (ST-1107.4): zelfde route ruimt ook M10's verlopen `pending`
|
||||
// login_pairings op. Reden: één cron-job is goedkoper qua Vercel-budget en
|
||||
// houdt de cleanup-strategie centraal.
|
||||
|
||||
import { prisma } from '@/lib/prisma'
|
||||
|
||||
export const runtime = 'nodejs'
|
||||
|
||||
export async function POST(request: Request) {
|
||||
const auth = request.headers.get('authorization')
|
||||
const expected = process.env.CRON_SECRET
|
||||
if (!expected || auth !== `Bearer ${expected}`) {
|
||||
return Response.json({ error: 'Unauthorized' }, { status: 401 })
|
||||
}
|
||||
|
||||
const now = new Date()
|
||||
|
||||
// M11: open Claude-vragen → expired
|
||||
const expiredQuestions = await prisma.claudeQuestion.updateMany({
|
||||
where: { status: 'open', expires_at: { lt: now } },
|
||||
data: { status: 'expired' },
|
||||
})
|
||||
|
||||
// M10: pending login_pairings die niet meer bruikbaar zijn → cancelled
|
||||
// (status='expired' bestaat niet voor pairings; cancelled heeft hetzelfde
|
||||
// resultaat: niet-claimable, niet meer in de SSE-listener.)
|
||||
const expiredPairings = await prisma.loginPairing.updateMany({
|
||||
where: { status: 'pending', expires_at: { lt: now } },
|
||||
data: { status: 'cancelled' },
|
||||
})
|
||||
|
||||
return Response.json({
|
||||
expired_questions: expiredQuestions.count,
|
||||
expired_pairings: expiredPairings.count,
|
||||
ran_at: now.toISOString(),
|
||||
})
|
||||
}
|
||||
194
app/api/realtime/notifications/route.ts
Normal file
194
app/api/realtime/notifications/route.ts
Normal file
|
|
@ -0,0 +1,194 @@
|
|||
// ST-1104: User-scoped Server-Sent Events stream voor de notificatie-bel (M11).
|
||||
//
|
||||
// Wordt door <NotificationsBridge /> in app/(app)/layout.tsx gemount zodra de
|
||||
// gebruiker is ingelogd. In tegenstelling tot /api/realtime/solo (product-
|
||||
// scoped, voor één Solo-bord) is deze stream **user-scoped**: hij filtert
|
||||
// op alle producten waar de ingelogde user toegang toe heeft, zodat de bell
|
||||
// flikkert ongeacht op welke pagina je staat.
|
||||
//
|
||||
// Auth: iron-session cookie. Demo-tokens mogen lezen.
|
||||
// Output: text/event-stream — `event:state` met initial open-questions list,
|
||||
// daarna `data:` events bij elke status-overgang in scrum4me_changes.
|
||||
// Sluit zelf na 240s als safety-net; client herconnect.
|
||||
|
||||
import { NextRequest } from 'next/server'
|
||||
import { Client } from 'pg'
|
||||
import { getSession } from '@/lib/auth'
|
||||
import { prisma } from '@/lib/prisma'
|
||||
import { productAccessFilter } from '@/lib/product-access'
|
||||
|
||||
export const runtime = 'nodejs'
|
||||
export const dynamic = 'force-dynamic'
|
||||
export const maxDuration = 300
|
||||
|
||||
const CHANNEL = 'scrum4me_changes'
|
||||
const HEARTBEAT_MS = 25_000
|
||||
const HARD_CLOSE_MS = 240_000
|
||||
|
||||
interface NotifyPayload {
|
||||
op: 'I' | 'U'
|
||||
entity: 'task' | 'story' | 'question'
|
||||
id: string
|
||||
product_id: string
|
||||
story_id?: string
|
||||
task_id?: string | null
|
||||
assignee_id?: string | null
|
||||
status?: string
|
||||
}
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
const session = await getSession()
|
||||
if (!session.userId) {
|
||||
return Response.json({ error: 'Niet ingelogd' }, { status: 401 })
|
||||
}
|
||||
const userId = session.userId
|
||||
|
||||
// Haal alle accessible product-IDs één keer op — gebruikt voor SSE-filter en
|
||||
// voor de initial-state query. Geen real-time refresh als de user halverwege
|
||||
// toegang krijgt of verliest; reconnect lost dat op (frontend doet dat al).
|
||||
const products = await prisma.product.findMany({
|
||||
where: { archived: false, ...productAccessFilter(userId) },
|
||||
select: { id: true },
|
||||
})
|
||||
const accessibleProductIds = new Set(products.map((p) => p.id))
|
||||
|
||||
const directUrl = process.env.DIRECT_URL ?? process.env.DATABASE_URL
|
||||
if (!directUrl) {
|
||||
return Response.json(
|
||||
{ error: 'DIRECT_URL/DATABASE_URL niet geconfigureerd' },
|
||||
{ status: 500 },
|
||||
)
|
||||
}
|
||||
|
||||
const encoder = new TextEncoder()
|
||||
const pgClient = new Client({ connectionString: directUrl })
|
||||
|
||||
let heartbeatTimer: ReturnType<typeof setInterval> | null = null
|
||||
let hardCloseTimer: ReturnType<typeof setTimeout> | null = null
|
||||
let closed = false
|
||||
|
||||
const stream = new ReadableStream({
|
||||
async start(controller) {
|
||||
const enqueue = (chunk: string) => {
|
||||
if (closed) return
|
||||
try {
|
||||
controller.enqueue(encoder.encode(chunk))
|
||||
} catch {
|
||||
// controller al gesloten — negeren
|
||||
}
|
||||
}
|
||||
|
||||
const cleanup = async (reason: string) => {
|
||||
if (closed) return
|
||||
closed = true
|
||||
if (heartbeatTimer) clearInterval(heartbeatTimer)
|
||||
if (hardCloseTimer) clearTimeout(hardCloseTimer)
|
||||
try {
|
||||
await pgClient.end()
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
try {
|
||||
controller.close()
|
||||
} catch {
|
||||
// already closed
|
||||
}
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
console.log(`[realtime/notifications] closed: ${reason}`)
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
await pgClient.connect()
|
||||
await pgClient.query(`LISTEN ${CHANNEL}`)
|
||||
} catch (err) {
|
||||
console.error('[realtime/notifications] pg connect/listen failed:', err)
|
||||
enqueue(
|
||||
`event: error\ndata: ${JSON.stringify({ message: 'pg connect failed' })}\n\n`,
|
||||
)
|
||||
await cleanup('pg connect failed')
|
||||
return
|
||||
}
|
||||
|
||||
pgClient.on('notification', (msg) => {
|
||||
if (!msg.payload) return
|
||||
let payload: NotifyPayload
|
||||
try {
|
||||
payload = JSON.parse(msg.payload) as NotifyPayload
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
if (payload.entity !== 'question') return
|
||||
if (!accessibleProductIds.has(payload.product_id)) return
|
||||
enqueue(`data: ${msg.payload}\n\n`)
|
||||
})
|
||||
|
||||
pgClient.on('error', (err) => {
|
||||
console.error('[realtime/notifications] pg client error:', err)
|
||||
cleanup('pg error')
|
||||
})
|
||||
|
||||
// Initial state ná LISTEN actief — race-fix conform M10 ST-1004 / ST-1006.
|
||||
// Voorkomt dat een vraag die net vóór SSE-open landt verloren gaat.
|
||||
const openQuestions = await prisma.claudeQuestion.findMany({
|
||||
where: {
|
||||
status: 'open',
|
||||
expires_at: { gt: new Date() },
|
||||
product_id: { in: products.map((p) => p.id) },
|
||||
},
|
||||
orderBy: { created_at: 'desc' },
|
||||
take: 100,
|
||||
select: {
|
||||
id: true,
|
||||
product_id: true,
|
||||
story_id: true,
|
||||
task_id: true,
|
||||
question: true,
|
||||
options: true,
|
||||
created_at: true,
|
||||
expires_at: true,
|
||||
story: { select: { code: true, title: true, assignee_id: true } },
|
||||
},
|
||||
})
|
||||
|
||||
enqueue(
|
||||
`event: state\ndata: ${JSON.stringify({
|
||||
questions: openQuestions.map((q) => ({
|
||||
id: q.id,
|
||||
product_id: q.product_id,
|
||||
story_id: q.story_id,
|
||||
task_id: q.task_id,
|
||||
story_code: q.story.code,
|
||||
story_title: q.story.title,
|
||||
assignee_id: q.story.assignee_id,
|
||||
question: q.question,
|
||||
options: q.options,
|
||||
created_at: q.created_at.toISOString(),
|
||||
expires_at: q.expires_at.toISOString(),
|
||||
})),
|
||||
})}\n\n`,
|
||||
)
|
||||
|
||||
heartbeatTimer = setInterval(() => {
|
||||
enqueue(`: heartbeat\n\n`)
|
||||
}, HEARTBEAT_MS)
|
||||
|
||||
hardCloseTimer = setTimeout(() => {
|
||||
cleanup('hard close 240s')
|
||||
}, HARD_CLOSE_MS)
|
||||
|
||||
request.signal.addEventListener('abort', () => {
|
||||
cleanup('client aborted')
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
return new Response(stream, {
|
||||
headers: {
|
||||
'Content-Type': 'text/event-stream; charset=utf-8',
|
||||
'Cache-Control': 'no-cache, no-transform',
|
||||
Connection: 'keep-alive',
|
||||
'X-Accel-Buffering': 'no',
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -25,7 +25,10 @@ const HARD_CLOSE_MS = 240_000
|
|||
|
||||
interface NotifyPayload {
|
||||
op: 'I' | 'U' | 'D'
|
||||
entity: 'task' | 'story'
|
||||
// M11 (ST-1101) voegt entity:'question' toe op hetzelfde scrum4me_changes-
|
||||
// kanaal; we filteren die hieronder weg zodat solo-clients geen
|
||||
// notification-events ontvangen waar ze niets mee doen.
|
||||
entity: 'task' | 'story' | 'question'
|
||||
id: string
|
||||
story_id?: string
|
||||
product_id: string
|
||||
|
|
@ -40,6 +43,9 @@ function shouldEmit(
|
|||
activeSprintId: string | null,
|
||||
userId: string,
|
||||
): boolean {
|
||||
// M11 (ST-1104): question-events horen op /api/realtime/notifications, niet hier.
|
||||
if (payload.entity === 'question') return false
|
||||
|
||||
if (payload.product_id !== productId) return false
|
||||
|
||||
// Sprint scope: alleen events binnen de actieve sprint (of zonder sprint
|
||||
|
|
|
|||
157
components/notifications/answer-modal.tsx
Normal file
157
components/notifications/answer-modal.tsx
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
'use client'
|
||||
|
||||
// ST-1105: Modal waar de gebruiker een Claude-vraag beantwoordt (M11).
|
||||
//
|
||||
// Free-text Textarea (max 4000) of multiple-choice via knoppen wanneer de
|
||||
// vraag `options` heeft. Submit roept answerQuestion-Server-Action aan via
|
||||
// useTransition; bij succes wordt de vraag uit de store verwijderd
|
||||
// (optimistisch) en sluit de modal. Demo-modus: textarea readOnly + submit
|
||||
// disabled met tooltip.
|
||||
|
||||
import { useState, useTransition } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { ExternalLink } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
|
||||
import { answerQuestion } from '@/actions/questions'
|
||||
import { useNotificationsStore, type NotificationQuestion } from '@/stores/notifications-store'
|
||||
|
||||
const MAX_ANSWER_CHARS = 4000
|
||||
|
||||
interface AnswerModalProps {
|
||||
question: NotificationQuestion | null
|
||||
isDemo: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export function AnswerModal({ question, isDemo, onClose }: AnswerModalProps) {
|
||||
const [answer, setAnswer] = useState('')
|
||||
const [pending, startTransition] = useTransition()
|
||||
|
||||
if (!question) return null
|
||||
|
||||
const charsLeft = MAX_ANSWER_CHARS - answer.length
|
||||
const tooLong = charsLeft < 0
|
||||
const submitDisabled = isDemo || pending || answer.trim().length === 0 || tooLong
|
||||
|
||||
function submit(text: string) {
|
||||
if (!question) return
|
||||
if (isDemo) {
|
||||
toast.error('Niet beschikbaar in demo-modus')
|
||||
return
|
||||
}
|
||||
startTransition(async () => {
|
||||
const res = await answerQuestion(question.id, text)
|
||||
if (!res.ok) {
|
||||
toast.error(res.error)
|
||||
return
|
||||
}
|
||||
// Optimistisch verwijderen — SSE-event komt anders later met dezelfde
|
||||
// remove en kost een extra render
|
||||
useNotificationsStore.getState().remove(question.id)
|
||||
toast.success('Antwoord verstuurd')
|
||||
setAnswer('')
|
||||
onClose()
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={!!question} onOpenChange={(open) => !open && onClose()}>
|
||||
<DialogContent className="sm:max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Beantwoord Claude</DialogTitle>
|
||||
<DialogDescription>
|
||||
<span className="font-mono">{question.story_code ?? 'story'}</span>
|
||||
{' — '}
|
||||
{question.story_title}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<Link
|
||||
href={`/products/${question.product_id}/sprint`}
|
||||
className="text-primary inline-flex items-center gap-1 self-start text-xs hover:underline"
|
||||
>
|
||||
<ExternalLink className="h-3.5 w-3.5" />
|
||||
<span>Open in Sprint</span>
|
||||
</Link>
|
||||
|
||||
<div className="bg-surface-container-low rounded-md border p-3 text-sm whitespace-pre-wrap">
|
||||
{question.question}
|
||||
</div>
|
||||
|
||||
{question.options && question.options.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
<p className="text-muted-foreground text-xs">Kies een van de opties:</p>
|
||||
<div className="flex flex-col gap-2">
|
||||
{question.options.map((opt) => (
|
||||
<Button
|
||||
key={opt}
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="justify-start"
|
||||
disabled={isDemo || pending}
|
||||
onClick={() => submit(opt)}
|
||||
>
|
||||
{opt}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
<Textarea
|
||||
value={answer}
|
||||
onChange={(e) => setAnswer(e.target.value)}
|
||||
placeholder="Typ je antwoord…"
|
||||
rows={5}
|
||||
maxLength={MAX_ANSWER_CHARS}
|
||||
readOnly={isDemo}
|
||||
aria-label="Antwoord op Claude's vraag"
|
||||
/>
|
||||
<div
|
||||
className={
|
||||
tooLong
|
||||
? 'text-error text-right text-xs'
|
||||
: 'text-muted-foreground text-right text-xs'
|
||||
}
|
||||
>
|
||||
{charsLeft} tekens over
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="ghost" onClick={onClose} disabled={pending}>
|
||||
Annuleren
|
||||
</Button>
|
||||
{(!question.options || question.options.length === 0) && (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger render={<span className="inline-flex" />}>
|
||||
<Button
|
||||
onClick={() => submit(answer)}
|
||||
disabled={submitDisabled}
|
||||
>
|
||||
{pending ? 'Bezig…' : 'Verstuur'}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
{isDemo && (
|
||||
<TooltipContent>Niet beschikbaar in demo-modus</TooltipContent>
|
||||
)}
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
)}
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
62
components/notifications/notifications-bridge.tsx
Normal file
62
components/notifications/notifications-bridge.tsx
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
// ST-1105: Mount-component voor de notifications-realtime hook (M11).
|
||||
//
|
||||
// Server Component dat de initial open-questions fetch't met
|
||||
// productAccessFilter en doorgeeft aan een minimal client-island; client opent
|
||||
// daarna de SSE-stream voor live updates.
|
||||
|
||||
import { prisma } from '@/lib/prisma'
|
||||
import { productAccessFilter } from '@/lib/product-access'
|
||||
import { NotificationsRealtimeMount } from './notifications-realtime-mount'
|
||||
import type { NotificationQuestion } from '@/stores/notifications-store'
|
||||
|
||||
interface NotificationsBridgeProps {
|
||||
userId: string
|
||||
}
|
||||
|
||||
export async function NotificationsBridge({ userId }: NotificationsBridgeProps) {
|
||||
const products = await prisma.product.findMany({
|
||||
where: { archived: false, ...productAccessFilter(userId) },
|
||||
select: { id: true },
|
||||
})
|
||||
const productIds = products.map((p) => p.id)
|
||||
|
||||
const openQuestions =
|
||||
productIds.length === 0
|
||||
? []
|
||||
: await prisma.claudeQuestion.findMany({
|
||||
where: {
|
||||
status: 'open',
|
||||
expires_at: { gt: new Date() },
|
||||
product_id: { in: productIds },
|
||||
},
|
||||
orderBy: { created_at: 'desc' },
|
||||
take: 100,
|
||||
select: {
|
||||
id: true,
|
||||
product_id: true,
|
||||
story_id: true,
|
||||
task_id: true,
|
||||
question: true,
|
||||
options: true,
|
||||
created_at: true,
|
||||
expires_at: true,
|
||||
story: { select: { code: true, title: true, assignee_id: true } },
|
||||
},
|
||||
})
|
||||
|
||||
const initial: NotificationQuestion[] = openQuestions.map((q) => ({
|
||||
id: q.id,
|
||||
product_id: q.product_id,
|
||||
story_id: q.story_id,
|
||||
task_id: q.task_id,
|
||||
story_code: q.story.code,
|
||||
story_title: q.story.title,
|
||||
assignee_id: q.story.assignee_id,
|
||||
question: q.question,
|
||||
options: Array.isArray(q.options) ? (q.options as string[]) : null,
|
||||
created_at: q.created_at.toISOString(),
|
||||
expires_at: q.expires_at.toISOString(),
|
||||
}))
|
||||
|
||||
return <NotificationsRealtimeMount initial={initial} />
|
||||
}
|
||||
23
components/notifications/notifications-realtime-mount.tsx
Normal file
23
components/notifications/notifications-realtime-mount.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
// ST-1105: Tiny client island dat de notifications-store hydrateert met
|
||||
// server-side fetched initial questions en de SSE-realtime hook activeert.
|
||||
|
||||
'use client'
|
||||
|
||||
import { useEffect } from 'react'
|
||||
import { useNotificationsStore, type NotificationQuestion } from '@/stores/notifications-store'
|
||||
import { useNotificationsRealtime } from '@/lib/realtime/use-notifications-realtime'
|
||||
|
||||
interface Props {
|
||||
initial: NotificationQuestion[]
|
||||
}
|
||||
|
||||
export function NotificationsRealtimeMount({ initial }: Props) {
|
||||
// Hydrate de store met server-side-rendered data zodat de bell-count direct
|
||||
// klopt zonder te wachten op de SSE state-event.
|
||||
useEffect(() => {
|
||||
useNotificationsStore.getState().init(initial)
|
||||
}, [initial])
|
||||
|
||||
useNotificationsRealtime()
|
||||
return null
|
||||
}
|
||||
106
components/notifications/notifications-sheet.tsx
Normal file
106
components/notifications/notifications-sheet.tsx
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
'use client'
|
||||
|
||||
// ST-1105: Slide-over (rechts) met de lijst van openstaande Claude-vragen (M11).
|
||||
//
|
||||
// Story-assignee = currentUser krijgt een primary-container accent ("voor jou").
|
||||
// Klik op een item opent de AnswerModal voor die specifieke vraag. Sheet blijft
|
||||
// open na een succesvol antwoord zodat meerdere antwoorden achter elkaar kunnen.
|
||||
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetTrigger,
|
||||
} from '@/components/ui/sheet'
|
||||
import { useNotificationsStore } from '@/stores/notifications-store'
|
||||
import { AnswerModal } from './answer-modal'
|
||||
import { cn } from '@/lib/utils'
|
||||
import type { NotificationQuestion } from '@/stores/notifications-store'
|
||||
|
||||
interface NotificationsSheetProps {
|
||||
trigger: React.ReactNode
|
||||
currentUserId: string
|
||||
isDemo: boolean
|
||||
}
|
||||
|
||||
export function NotificationsSheet({
|
||||
trigger,
|
||||
currentUserId,
|
||||
isDemo,
|
||||
}: NotificationsSheetProps) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [activeQuestion, setActiveQuestion] = useState<NotificationQuestion | null>(null)
|
||||
const questions = useNotificationsStore((s) => s.questions)
|
||||
|
||||
return (
|
||||
<>
|
||||
<Sheet open={open} onOpenChange={setOpen}>
|
||||
<SheetTrigger render={trigger as React.ReactElement} />
|
||||
<SheetContent side="right" className="w-full sm:max-w-md">
|
||||
<SheetHeader>
|
||||
<SheetTitle>Vragen van Claude ({questions.length})</SheetTitle>
|
||||
<SheetDescription>
|
||||
Beantwoord open vragen om Claude verder te laten werken.
|
||||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
|
||||
{questions.length === 0 ? (
|
||||
<div className="text-muted-foreground mt-8 px-4 py-6 text-center text-sm">
|
||||
Geen openstaande vragen. Lekker bezig!
|
||||
</div>
|
||||
) : (
|
||||
<ul className="mt-4 flex flex-col gap-2 px-4 pb-4">
|
||||
{questions.map((q) => {
|
||||
const forYou = q.assignee_id === currentUserId
|
||||
return (
|
||||
<li key={q.id}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveQuestion(q)}
|
||||
className={cn(
|
||||
'border-border w-full rounded-md border p-3 text-left transition-colors hover:bg-surface-container',
|
||||
forYou &&
|
||||
'bg-primary-container text-primary-container-foreground border-primary/30 hover:bg-primary-container/80',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className="font-mono text-xs opacity-80">
|
||||
{q.story_code ?? '—'}
|
||||
</span>
|
||||
<span className="line-clamp-1 text-sm font-medium">
|
||||
{q.story_title}
|
||||
</span>
|
||||
</div>
|
||||
<p
|
||||
className={cn(
|
||||
'line-clamp-2 mt-1 text-sm',
|
||||
forYou ? 'opacity-90' : 'text-muted-foreground',
|
||||
)}
|
||||
>
|
||||
{q.question}
|
||||
</p>
|
||||
{forYou && (
|
||||
<span className="mt-2 inline-block rounded bg-primary/20 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide">
|
||||
Voor jou
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
|
||||
<AnswerModal
|
||||
question={activeQuestion}
|
||||
isDemo={isDemo}
|
||||
onClose={() => setActiveQuestion(null)}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -16,6 +16,7 @@ import {
|
|||
} from '@/components/ui/dropdown-menu'
|
||||
import { AppIcon } from '@/components/shared/app-icon'
|
||||
import { UserMenu } from '@/components/shared/user-menu'
|
||||
import { NotificationsBell } from '@/components/shared/notifications-bell'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { setActiveProductAction } from '@/actions/active-product'
|
||||
|
||||
|
|
@ -179,8 +180,9 @@ export function NavBar({
|
|||
)}
|
||||
</div>
|
||||
|
||||
{/* Rechts: account-menu */}
|
||||
{/* Rechts: notifications + account-menu */}
|
||||
<div className="flex items-center gap-2 flex-1 justify-end">
|
||||
<NotificationsBell currentUserId={userId} isDemo={isDemo} />
|
||||
<UserMenu userId={userId} username={username} email={email} roles={roles} />
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
54
components/shared/notifications-bell.tsx
Normal file
54
components/shared/notifications-bell.tsx
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
'use client'
|
||||
|
||||
// ST-1105: Bell-icon in de NavBar met badge van het aantal open Claude-vragen
|
||||
// voor de ingelogde gebruiker (M11).
|
||||
//
|
||||
// Klik opent <NotificationsSheet />. Story-assignee-vragen ("voor jou") worden
|
||||
// gemarkeerd met een ring-accent op het badge zodat ook bij gelijke totaal-
|
||||
// count de prioriteit zichtbaar is.
|
||||
|
||||
import { Bell } from 'lucide-react'
|
||||
import { useNotificationsStore } from '@/stores/notifications-store'
|
||||
import { NotificationsSheet } from '@/components/notifications/notifications-sheet'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface NotificationsBellProps {
|
||||
currentUserId: string
|
||||
isDemo: boolean
|
||||
}
|
||||
|
||||
export function NotificationsBell({ currentUserId, isDemo }: NotificationsBellProps) {
|
||||
const total = useNotificationsStore((s) => s.questions.length)
|
||||
const forYou = useNotificationsStore((s) =>
|
||||
s.questions.filter((q) => q.assignee_id === currentUserId).length,
|
||||
)
|
||||
|
||||
return (
|
||||
<NotificationsSheet
|
||||
currentUserId={currentUserId}
|
||||
isDemo={isDemo}
|
||||
trigger={
|
||||
<button
|
||||
type="button"
|
||||
aria-label={`Notificaties — ${total} open vragen${forYou > 0 ? `, ${forYou} voor jou` : ''}`}
|
||||
className="relative inline-flex h-9 w-9 items-center justify-center rounded-full hover:bg-surface-container focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background"
|
||||
>
|
||||
<Bell className="h-5 w-5 text-foreground" />
|
||||
{total > 0 && (
|
||||
<span
|
||||
role="status"
|
||||
className={cn(
|
||||
'absolute -right-0.5 -top-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-medium leading-none',
|
||||
forYou > 0
|
||||
? 'bg-error text-error-foreground ring-2 ring-background'
|
||||
: 'bg-primary text-primary-foreground',
|
||||
)}
|
||||
>
|
||||
{total > 9 ? '9+' : total}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
67
docs/API.md
67
docs/API.md
|
|
@ -417,6 +417,73 @@ curl -i -X POST -b /tmp/jar -c /tmp/jar \
|
|||
|
||||
---
|
||||
|
||||
## Notifications — Vraag-antwoord-kanaal (M11)
|
||||
|
||||
Endpoints voor de Claude vraag-antwoord-flow. De **MCP-tools** in de scrum4me-mcp-repo (`ask_user_question`, `get_question_answer`, `list_open_questions`, `cancel_question`) zijn de primaire schrijf-interface; de endpoints hieronder zijn voor de browser-UI en cron.
|
||||
|
||||
### `GET /api/realtime/notifications`
|
||||
|
||||
Server-Sent Events stream voor de notifications-bell in de NavBar. **User-scoped** — geen `product_id`-param; filtert server-side op alle producten waar de gebruiker eigenaar of teamlid is.
|
||||
|
||||
**Auth:** iron-session cookie. Demo-gebruikers mogen lezen.
|
||||
**Response:** `text/event-stream`. Stream blijft open tot client sluit of server na 240s een hard-close doet (client herconnect).
|
||||
|
||||
**Events:**
|
||||
- `event: state` — eenmalig direct na connect, met `{ questions: [...] }` als payload (zelfde shape als de live updates).
|
||||
- `data: {...}` — bij elke status-overgang in `claude_questions`. Payload-shape:
|
||||
```json
|
||||
{
|
||||
"op": "I" | "U",
|
||||
"entity": "question",
|
||||
"id": "cmoh...",
|
||||
"product_id": "cmoh...",
|
||||
"story_id": "cmoh...",
|
||||
"task_id": "cmoh..." | null,
|
||||
"assignee_id": "cmoh..." | null,
|
||||
"status": "open" | "answered" | "cancelled" | "expired"
|
||||
}
|
||||
```
|
||||
Het is een delta — voor de volledige vraag-tekst en options reconnect de client (initial-state-event levert ze opnieuw).
|
||||
- `: heartbeat` — SSE-comment elke 25s.
|
||||
|
||||
**Server-side filter:**
|
||||
- `payload.entity === 'question'` (`task` en `story` events horen op `/api/realtime/solo`)
|
||||
- `payload.product_id` zit in de set producten met user-access (productAccessFilter)
|
||||
|
||||
**Voorbeeld:**
|
||||
```js
|
||||
const source = new EventSource('/api/realtime/notifications', { withCredentials: true })
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Cron — Expire questions
|
||||
|
||||
### `POST /api/cron/expire-questions`
|
||||
|
||||
Vercel cron handler die dagelijks draait. Markeert verlopen open vragen als `expired` en verlopen pending login_pairings als `cancelled`.
|
||||
|
||||
**Auth:** `Authorization: Bearer ${CRON_SECRET}` — header die Vercel automatisch injecteert wanneer de env-var op de project-omgeving staat. Zonder secret of bij mismatch: 401.
|
||||
|
||||
**Schedule:** `0 4 * * *` (dagelijks om 04:00 UTC; Vercel Hobby-plan staat alleen daily crons toe — Pro ondersteunt fijnmazigere schedules).
|
||||
|
||||
**Response 200:**
|
||||
```json
|
||||
{
|
||||
"expired_questions": 0,
|
||||
"expired_pairings": 0,
|
||||
"ran_at": "2026-04-28T00:00:00.000Z"
|
||||
}
|
||||
```
|
||||
|
||||
**Voorbeeld (handmatige trigger):**
|
||||
```bash
|
||||
curl -X POST -H "Authorization: Bearer $CRON_SECRET" \
|
||||
https://your-app.vercel.app/api/cron/expire-questions
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Voorbeeldworkflow voor Claude Code
|
||||
|
||||
1. **Probe:** `GET /api/health?db=1` — bevestig dat de service en DB bereikbaar zijn.
|
||||
|
|
|
|||
145
docs/patterns/claude-question-channel.md
Normal file
145
docs/patterns/claude-question-channel.md
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
# Patroon: Bidirectionele async-comms tussen MCP-agent en interactieve user
|
||||
|
||||
Het M11 vraag-antwoord-kanaal is herbruikbaar voor elke feature waarbij een
|
||||
**autonome agent** (Claude Code via MCP, een Vercel-job, etc.) iets wil
|
||||
ophelderen bij de **actieve gebruiker** zonder zelf te blokkeren of te raden.
|
||||
|
||||
> "Agent stelt vraag → vraag wacht persistent → user beantwoordt op een
|
||||
> moment dat het hem uitkomt → agent leest het antwoord en gaat door."
|
||||
|
||||
Voorbeelden waar dit zou kunnen passen:
|
||||
- AI-codereview: Claude vraagt om bevestiging op een controversiële refactor
|
||||
- Background-import: queue-worker vraagt om een keuze (overschrijven/skippen)
|
||||
per ambigue rij
|
||||
- Multi-step migratie: scripted task pauseert op een handmatige bevestiging
|
||||
- Approval-flow voor LLM-actions: user keurt een tool-call goed vóór 't echt
|
||||
gebeurt
|
||||
|
||||
---
|
||||
|
||||
## Vier eindpunten
|
||||
|
||||
| Endpoint | Auth | Doel |
|
||||
|---|---|---|
|
||||
| MCP `ask_*` (write) | API-token + demo-blok | maakt rij in `*_questions`-tabel; optioneel `wait_seconds` voor sync polling |
|
||||
| MCP `get_*_answer` (read) | API-token | leest huidige status + antwoord (voor latere session-pickup) |
|
||||
| `POST /actions/answer` (Server Action) | iron-session + product-membership | atomic `updateMany WHERE status='open'` |
|
||||
| `GET /api/realtime/<channel>` (SSE) | iron-session | user-scoped stream, filter op `entity` + product-access |
|
||||
|
||||
Plus:
|
||||
- **Postgres-trigger** op de tabel die `pg_notify` doet op een gedeeld
|
||||
channel met een `{op, entity, id, ...}`-payload
|
||||
- **Cron-endpoint** dat verlopen rijen markeert (status='expired') zodat
|
||||
achterstallige queries niet blijven groeien
|
||||
|
||||
---
|
||||
|
||||
## Vier security-uitgangspunten
|
||||
|
||||
1. **Atomic state-transities.** Antwoord-actie doet één UPDATE met alle
|
||||
invarianten in de WHERE (status, expiry, owner-check). Concurrent dubbele
|
||||
submit: PostgreSQL row-locking laat één caller count=1 zien, de rest 0.
|
||||
2. **Demo-blok op writes.** Agent-side via `requireWriteAccess` (PERMISSION_
|
||||
DENIED voor demo-tokens), user-side via early-return op `session.isDemo`
|
||||
en disabled-submit-knop met tooltip in de UI.
|
||||
3. **Access-isolation in SSE-filter.** Bij connect: query alle accessible
|
||||
product-IDs voor deze user → Set. In notification-handler: drop alle
|
||||
payloads waarvan `product_id ∉ accessibleSet`. Dit is naast de DB-query-
|
||||
filter; redundant maar voorkomt lekkage als de DB-laag iets doorlaat dat
|
||||
niet zou moeten.
|
||||
4. **Geen gevoelige data in logs.** Payload bevat alleen IDs en status — de
|
||||
tekst van vraag en antwoord komt via een aparte authenticated query.
|
||||
`console.log` alleen `question_id`, nooit content.
|
||||
|
||||
---
|
||||
|
||||
## Channel-strategie: hergebruik vs. eigen kanaal
|
||||
|
||||
Twee opties bij meerdere realtime-features:
|
||||
|
||||
| Optie | Voordeel | Nadeel |
|
||||
|---|---|---|
|
||||
| **Eigen channel per feature** (M10 `scrum4me_pairing`) | Geen filter-leakage tussen features | 1 LISTEN-connectie per feature; meer DB-resources; meer routes |
|
||||
| **Gedeeld channel met `entity`-key** (M11 `scrum4me_changes`) | 1 LISTEN per route; nieuwe entity = filter-aanpassing | Vergeten te filteren = leak |
|
||||
|
||||
Voor M11 is gekozen voor **hergebruik**: één channel scaalt beter naar v2
|
||||
(comments, mentions, status-updates allemaal op zelfde stream) en de filter-
|
||||
discipline is enforceable in code-review. Mitigatie voor leak-risico: expliciet
|
||||
`if (payload.entity === 'X') return false` in elke route die feature X niet
|
||||
hoort te zien — zoals `app/api/realtime/solo/route.ts` die `entity:'question'`
|
||||
weert.
|
||||
|
||||
---
|
||||
|
||||
## TTL-richtlijn
|
||||
|
||||
- **Question lifetime**: 24 u — kort genoeg dat verlaten queries niet
|
||||
ophopen, lang genoeg dat een gebruiker die afwezig is een nacht heeft om
|
||||
te antwoorden
|
||||
- **MCP-tool wait_seconds**: max 600 s — Claude wacht maximaal 10 min op een
|
||||
antwoord; daarna `status: 'pending'` zodat hij later kan terugkomen via
|
||||
`get_question_answer`
|
||||
- **Cron schedule**: `0 4 * * *` — daily op een rustig tijdstip (Vercel Hobby
|
||||
staat alleen daily crons toe; Pro ondersteunt fijnmaziger). 24 u TTL +
|
||||
daily cleanup houdt de tabel klein zonder cron-budget te belasten
|
||||
|
||||
---
|
||||
|
||||
## Sjabloon-bestanden
|
||||
|
||||
Specifiek voor M11. Kopieer en pas aan:
|
||||
|
||||
### Database
|
||||
- `prisma/schema.prisma`: model met `id`, `status`, `expires_at`, denormalized
|
||||
`product_id` voor SSE-filter, asker/answerer-FKs, json `options?`-veld
|
||||
voor multiple-choice
|
||||
- `prisma/migrations/<ts>/migration.sql`: tabel-DDL + `notify_*_change()`-
|
||||
functie + `AFTER INSERT/UPDATE`-trigger op gedeeld channel
|
||||
|
||||
### Server (Scrum4Me)
|
||||
- `actions/questions.ts`: Server Action met getSession + Zod + demo-blok +
|
||||
productAccessFilter + atomic updateMany
|
||||
- `app/api/realtime/notifications/route.ts`: user-scoped SSE met
|
||||
initial-state-event ná LISTEN actief (race-fix conform M10 ST-1004)
|
||||
- `app/api/cron/expire-questions/route.ts`: Bearer-auth via CRON_SECRET +
|
||||
updateMany WHERE expires_at<now
|
||||
|
||||
### Client (Scrum4Me)
|
||||
- `stores/notifications-store.ts`: Zustand store met init/upsert/remove +
|
||||
selectors voor count en for-you-count
|
||||
- `lib/realtime/use-notifications-realtime.ts`: EventSource hook met
|
||||
state/message-handlers + reconnect-backoff + Page Visibility pause
|
||||
- `components/notifications/notifications-bell.tsx` + `notifications-sheet.tsx`
|
||||
+ `answer-modal.tsx`: Bell met badge, slide-over met item-list, Dialog
|
||||
met free-text/options-radio
|
||||
|
||||
### MCP-tools (scrum4me-mcp)
|
||||
- `src/tools/ask-user-question.ts`: write-tool met optionele `wait_seconds`-
|
||||
polling (intern setInterval tot status verandert of timeout)
|
||||
- `src/tools/get-question-answer.ts`: read-tool voor latere session-pickup
|
||||
- `src/tools/list-open-questions.ts`: read-tool voor session-start-check
|
||||
- `src/tools/cancel-question.ts`: write-tool, asker-only via atomic
|
||||
`updateMany WHERE asked_by + status='open'`
|
||||
|
||||
---
|
||||
|
||||
## Wanneer dit patroon NIET gebruiken
|
||||
|
||||
- Wanneer beide kanten al synchroon kunnen werken — dan is een gewone
|
||||
fetch/Server-Action eenvoudiger
|
||||
- Wanneer realtime niet kritiek is — een korte poll-loop is simpeler dan een
|
||||
SSE-stream
|
||||
- Wanneer er één centrale beslisser is — gebruik dan een gewone form-flow;
|
||||
het patroon hier is voor situaties waar de agent **niet hoeft te wachten**
|
||||
op één specifieke gebruiker
|
||||
|
||||
---
|
||||
|
||||
## Referenties
|
||||
|
||||
- Volledige flow + threat-model: `docs/scrum4me-architecture.md` § Vraag-
|
||||
antwoord-kanaal Claude ↔ user
|
||||
- Endpoint-contract: `docs/API.md` § Notifications + Cron
|
||||
- LISTEN/NOTIFY-pattern: `app/api/realtime/solo/route.ts` (M8 ST-802) — zelfde
|
||||
ReadableStream + heartbeat + hard-close + abort-cleanup
|
||||
- M10 vs M11 keuze tussen eigen/gedeeld kanaal: zie threat-model-tabel
|
||||
466
docs/plans/M11-claude-questions.md
Normal file
466
docs/plans/M11-claude-questions.md
Normal file
|
|
@ -0,0 +1,466 @@
|
|||
# M11 — Claude vraagt, gebruiker antwoordt
|
||||
|
||||
Persistent vraag-antwoord-kanaal tussen Claude Code (via MCP) en de actieve Scrum4Me-gebruiker. Claude schrijft een vraag naar `claude_questions` als hij vastloopt op een keuze; een Postgres-trigger emit op het bestaande `scrum4me_changes`-kanaal; de app toont een notificatie-badge; iedereen met product-toegang kan antwoorden; Claude leest het antwoord (sync via polling of in latere sessie via `get_question_answer`) en gaat door.
|
||||
|
||||
Eerste concrete uitwerking van strategische **richting B** (verdiepen van de unieke AI-driven dev-flow).
|
||||
|
||||
Backlog-entries: zie [scrum4me-backlog.md § M11](../scrum4me-backlog.md#m11-claude-vraagt-gebruiker-antwoordt) (op te leveren in ST-1108).
|
||||
|
||||
**Beveiligingsuitgangspunten:**
|
||||
- Atomic answer via `updateMany WHERE status='open'` — concurrent dubbele submit kan niet
|
||||
- Demo-blok op `ask_user_question` (MCP) en `answerQuestion` (Server Action)
|
||||
- Access-check via `productAccessFilter` in DB-query én SSE-filter; vraag-tekst en antwoord komen pas via een aparte authenticated query
|
||||
- Cron-endpoint beveiligd via `Authorization: Bearer ${CRON_SECRET}`
|
||||
- Logging: alleen `question_id`, nooit vraag/antwoord-tekst (kan gevoelige info bevatten)
|
||||
|
||||
**Gekozen kaders (uit overleg):**
|
||||
- **Sync-model**: default async — `ask_user_question` retourneert direct met `question_id`; optionele `wait_seconds` (max 600) voor polling tot het antwoord er is
|
||||
- **Answer-policy**: iedereen met product-toegang mag antwoorden; story-assignee krijgt visuele *"wacht op jou"*-emphase
|
||||
- **Realtime**: hergebruik `scrum4me_changes`-kanaal (uitgebreid met `entity: 'question'`); aparte user-scoped SSE-route `/api/realtime/notifications` zodat solo-board-SSE product-scoped blijft
|
||||
|
||||
---
|
||||
|
||||
## ST-1101 — `ClaudeQuestion` schema + Postgres-trigger
|
||||
|
||||
**Bestanden**
|
||||
- `prisma/schema.prisma` — model `ClaudeQuestion` + relations op `User`/`Story`/`Task`/`Product`
|
||||
- `prisma/migrations/<ts>_add_claude_questions/migration.sql` — table-DDL + trigger
|
||||
- `vendor/scrum4me`-submodule in `scrum4me-mcp` — schema-sync ná merge
|
||||
|
||||
**Stappen**
|
||||
|
||||
1. Schema-uitbreiding:
|
||||
|
||||
```prisma
|
||||
model ClaudeQuestion {
|
||||
id String @id @default(cuid())
|
||||
story_id String
|
||||
story Story @relation(fields: [story_id], references: [id], onDelete: Cascade)
|
||||
task_id String?
|
||||
task Task? @relation(fields: [task_id], references: [id], onDelete: SetNull)
|
||||
product_id String // gedenormaliseerd voor SSE-filter
|
||||
product Product @relation(fields: [product_id], references: [id], onDelete: Cascade)
|
||||
asked_by String
|
||||
asker User @relation("ClaudeQuestionAsker", fields: [asked_by], references: [id])
|
||||
question String @db.Text
|
||||
options Json? // string[] voor multi-choice; null voor free-text
|
||||
status String // 'open' | 'answered' | 'cancelled' | 'expired'
|
||||
answer String? @db.Text
|
||||
answered_by String?
|
||||
answerer User? @relation("ClaudeQuestionAnswerer", fields: [answered_by], references: [id])
|
||||
answered_at DateTime?
|
||||
created_at DateTime @default(now())
|
||||
expires_at DateTime
|
||||
|
||||
@@index([story_id, status])
|
||||
@@index([product_id, status])
|
||||
@@index([status, expires_at])
|
||||
@@map("claude_questions")
|
||||
}
|
||||
```
|
||||
|
||||
Plus op `User`: `asked_questions ClaudeQuestion[] @relation("ClaudeQuestionAsker")` en `answered_questions ClaudeQuestion[] @relation("ClaudeQuestionAnswerer")`.
|
||||
|
||||
2. Migratie-SQL voegt naast tabel + indexes ook trigger toe (mirror van `notify_pairing_change` uit M10 ST-1001):
|
||||
|
||||
```sql
|
||||
CREATE OR REPLACE FUNCTION notify_question_change() RETURNS trigger AS $$
|
||||
DECLARE
|
||||
story_row record;
|
||||
payload jsonb;
|
||||
BEGIN
|
||||
SELECT assignee_id INTO story_row FROM stories WHERE id = NEW.story_id;
|
||||
payload := jsonb_build_object(
|
||||
'op', CASE TG_OP WHEN 'INSERT' THEN 'I' ELSE 'U' END,
|
||||
'entity', 'question',
|
||||
'id', NEW.id,
|
||||
'product_id', NEW.product_id,
|
||||
'story_id', NEW.story_id,
|
||||
'task_id', NEW.task_id,
|
||||
'assignee_id', story_row.assignee_id,
|
||||
'status', NEW.status
|
||||
);
|
||||
PERFORM pg_notify('scrum4me_changes', payload::text);
|
||||
RETURN NEW;
|
||||
END;
|
||||
$$ LANGUAGE plpgsql;
|
||||
|
||||
CREATE TRIGGER claude_questions_notify
|
||||
AFTER INSERT OR UPDATE ON claude_questions
|
||||
FOR EACH ROW EXECUTE FUNCTION notify_question_change();
|
||||
```
|
||||
|
||||
3. `npx prisma migrate dev --name add_claude_questions`
|
||||
|
||||
**Aandachtspunten**
|
||||
- `entity: 'question'` is een nieuwe waarde naast bestaande `'task'`/`'story'`. Solo-route in M8 filter't via `payload.entity` — moet `'question'`-events expliciet wegfilteren (niet emitten naar solo-clients)
|
||||
- `product_id` op de question is gedenormaliseerd uit `story.product_id` — voorkomt extra join in SSE-filter (zelfde keuze als `story.product_id` in M3)
|
||||
- `vendor/scrum4me`-submodule sync vereist na merge (drift-check `trig_015FFUnxjz9WMuhhWNGBQKFD`)
|
||||
|
||||
**Verificatie**
|
||||
- `npx prisma migrate dev` slaagt; `npx prisma validate` clean
|
||||
- `psql $DIRECT_URL -c "LISTEN scrum4me_changes;"` toont payload met `entity: 'question'` bij INSERT
|
||||
- Bestaande solo-flow nog steeds werkend (regressie-check)
|
||||
|
||||
---
|
||||
|
||||
## ST-1102 — MCP-tools (in `scrum4me-mcp`-repo)
|
||||
|
||||
**Bestanden**
|
||||
- `scrum4me-mcp/src/tools/ask-user-question.ts` — nieuw
|
||||
- `scrum4me-mcp/src/tools/get-question-answer.ts` — nieuw
|
||||
- `scrum4me-mcp/src/tools/list-open-questions.ts` — nieuw
|
||||
- `scrum4me-mcp/src/tools/cancel-question.ts` — nieuw
|
||||
- `scrum4me-mcp/src/index.ts` — register de vier tools
|
||||
- `scrum4me-mcp/scripts/smoke-test.ts` — uitbreiden met question-roundtrip
|
||||
- `scrum4me-mcp/README.md` — tool-tabel uitbreiden
|
||||
|
||||
**Stappen**
|
||||
|
||||
1. **`ask_user_question`** (write-tool, sjabloon `create-todo.ts`):
|
||||
- Input: `{ story_id, question, options?, task_id?, wait_seconds? }` — `wait_seconds` 0–600 (Zod `.min(0).max(600)`)
|
||||
- `requireWriteAccess` (demo-blok)
|
||||
- Access-check: `userCanAccessProduct(story.product_id, auth.userId)`
|
||||
- Insert met `expires_at = now() + 24h`, `status = 'open'`
|
||||
- Als `wait_seconds === 0` (default): return `{ question_id, status: 'open' }`
|
||||
- Als `wait_seconds > 0`: poll elke 2s tot `status !== 'open'` of timeout. Bij answered: return `{ question_id, status, answer, answered_by, answered_at }`. Bij timeout: return `{ question_id, status: 'pending' }` zodat Claude met `get_question_answer` later kan ophalen
|
||||
- Polling-implementatie: `setInterval` met `Promise` en abort-signal voor schone cleanup
|
||||
|
||||
2. **`get_question_answer`** (read-tool):
|
||||
- Input: `{ question_id }`
|
||||
- Access-check via `userCanAccessProduct(question.product_id, auth.userId)`
|
||||
- Output: full row (`status`, `answer`, `answered_by`, `answered_at`, `expires_at`)
|
||||
|
||||
3. **`list_open_questions`** (read-tool):
|
||||
- Input: `{ story_id? }` (optionele filter)
|
||||
- Output: array van eigen vragen (`asked_by === auth.userId`) met status open of answered, max 50, geordend op `created_at desc`
|
||||
- Bedoeld voor Claude om bij begin van een sessie te zien of eerdere vragen inmiddels beantwoord zijn
|
||||
|
||||
4. **`cancel_question`** (write-tool):
|
||||
- Input: `{ question_id }`
|
||||
- Alleen de asker mag cancelen; `requireWriteAccess` voor demo-blok
|
||||
- Atomic `updateMany WHERE id=… AND status='open' AND asked_by=…`
|
||||
- Bedoeld voor wanneer Claude zelf de oplossing vindt en de vraag overbodig wordt
|
||||
|
||||
5. Smoke-test in `scripts/smoke-test.ts`: `ask_user_question` met `wait_seconds=5` + parallel `answerQuestion` (via REST of direct DB-write) → verifieer dat de tool het antwoord retourneert binnen het venster
|
||||
|
||||
**Aandachtspunten**
|
||||
- `wait_seconds` polling moet aborten als de MCP-cliënt disconnect (signal-check) — anders blijft de Node-process hangen op een dood socket
|
||||
- `options`-veld accepteert string-array; in zod als `z.array(z.string()).optional()`
|
||||
- Als `wait_seconds` > 300 raakt 'm Vercel-deploy onmogelijk (Vercel-functies cap op 300s) — maar de MCP-server draait *lokaal* bij Claude Code, dus 600s mag
|
||||
|
||||
**Verificatie**
|
||||
- MCP Inspector toont 4 nieuwe tools (totaal 13)
|
||||
- Smoke-test groen: ask + answer roundtrip binnen 5s
|
||||
- Demo-token op `ask_user_question` of `cancel_question` geeft `PERMISSION_DENIED`
|
||||
- `tsc --noEmit` clean op `scrum4me-mcp`
|
||||
|
||||
---
|
||||
|
||||
## ST-1103 — Server Actions voor de browser-UI
|
||||
|
||||
**Bestanden**
|
||||
- `actions/questions.ts` — nieuw
|
||||
- `__tests__/actions/questions.test.ts` — nieuw
|
||||
|
||||
**Stappen**
|
||||
|
||||
1. **`answerQuestion(questionId, answer)`** (volgt `docs/patterns/server-action.md`):
|
||||
- `getSession` + `requireUser`; demo-blok via `if (session.isDemo) return { ok: false, error: 'Niet beschikbaar in demo-modus' }`
|
||||
- Zod-input: `{ questionId: cuid, answer: string.min(1).max(4000) }`
|
||||
- Lookup question + access-check via `userCanAccessProduct(question.product_id, userId)`
|
||||
- Atomic `updateMany WHERE id=… AND status='open' AND expires_at > now()` met `data: { status: 'answered', answer, answered_by: userId, answered_at: now }`
|
||||
- Bij `count === 0`: disambigueer (al-answered → 'al beantwoord', expired → 'verlopen', geen access → 'geen toegang')
|
||||
- `revalidatePath('/', 'layout')` zodat badge-count overal updatet
|
||||
|
||||
2. **`cancelQuestionByAnswerer(questionId)`** — *uitgesteld naar v2*. Voor v1 alleen Claude (asker) kan annuleren via MCP. Als de UI later een dismiss-functie krijgt, komt het hier.
|
||||
|
||||
3. **Tests** `__tests__/actions/questions.test.ts` (6 cases):
|
||||
- happy answer → status='answered', `revalidatePath` aangeroepen
|
||||
- demo-user → error + geen DB-write
|
||||
- user zonder product-access → error
|
||||
- already-answered → race-error (`updateMany count=0` met status='answered' fallback)
|
||||
- expired → error
|
||||
- empty answer → Zod-validatie
|
||||
|
||||
**Aandachtspunten**
|
||||
- `revalidatePath('/', 'layout')` is correct (zelfde keuze als M9 `setActiveProductAction`) — badge zit in app-layout
|
||||
- Geen `revalidatePath` op `/sprint` of `/solo` nodig — die zien de question niet
|
||||
- Bij multi-tab: na answer in tab-1 verdwijnt het item in tab-2 via SSE-event, niet via revalidate. revalidate is voor de SSR-render-na-navigatie
|
||||
|
||||
**Verificatie**
|
||||
- `npm test` 6/6 voor questions
|
||||
- Handmatig: open vraag in browser, antwoord, badge-count zakt met 1
|
||||
- Demo-test: log in als demo, klik antwoord → toast "Niet beschikbaar in demo-modus"
|
||||
|
||||
---
|
||||
|
||||
## ST-1104 — User-scoped SSE-route `/api/realtime/notifications`
|
||||
|
||||
**Bestanden**
|
||||
- `app/api/realtime/notifications/route.ts` — nieuw
|
||||
- `app/api/realtime/solo/route.ts` — uitbreiden om `entity: 'question'` te filteren (anders krijgt solo-client question-events ongewenst door)
|
||||
- `__tests__/api/notifications-stream.test.ts` — nieuw (auth-cases)
|
||||
|
||||
**Stappen**
|
||||
|
||||
1. Route Handler — sjabloon uit `app/api/realtime/solo/route.ts`:
|
||||
- `runtime: 'nodejs'`, `maxDuration: 300`, `dynamic: 'force-dynamic'`
|
||||
- Auth via iron-session cookie; 401 zonder
|
||||
- **User-scoped** (geen `?product_id=`-param). Bij connect: query `productAccessFilter(userId)` om alle accessible product-IDs te krijgen
|
||||
- LISTEN op `scrum4me_changes`; filter:
|
||||
- `payload.entity === 'question'` (anders skip)
|
||||
- `payload.product_id IN accessibleProductIds`
|
||||
- Initial-state-event direct na connect, **na LISTEN actief**: query `claude_questions` met `status='open'` voor deze user's accessible products. Stuur als `event: state\ndata: [{...question-summary...}]`. Voorkomt race tussen connect en LISTEN (zelfde fix als M10 ST-1004)
|
||||
- Auto-close bij hard-close 240s; client herconnect
|
||||
|
||||
2. Solo-route bijwerken: in `shouldEmit` toevoegen `if (payload.entity === 'question') return false`
|
||||
|
||||
3. Tests (auth-paden, full-stream blijft handmatig):
|
||||
- 401 zonder iron-session cookie
|
||||
- Bij connect met sessie: list van accessible products correct gefilterd
|
||||
- Question-event op een product zonder access → niet doorgegeven
|
||||
|
||||
**Aandachtspunten**
|
||||
- Twee parallelle SSE-streams in browser (solo-route op product-pagina + notifications-route in app-layout) — netwerk-overhead aanvaardbaar; Vercel rekent per-actieve-functie ongeacht aantal streams
|
||||
- Initial-state event content: een kleine summary (id, story_code, question, options?) per open vraag — voorkomt dat de bridge eerst een aparte fetch moet doen voor de initial badge-count
|
||||
- Path expliciet maken in een client `useNotificationsRealtime`-hook (volgt `useSoloRealtime`-pattern)
|
||||
|
||||
**Verificatie**
|
||||
- `curl -N --cookie session-jar /api/realtime/notifications` blijft openstaan, levert `event: state` direct
|
||||
- INSERT op `claude_questions` voor een toegankelijk product → event binnen 1s
|
||||
- INSERT voor een ontoegankelijk product → geen event
|
||||
- Solo-route op `/api/realtime/solo?product_id=…` levert geen question-events meer
|
||||
|
||||
---
|
||||
|
||||
## ST-1105 — Notifications-UI (Bell + Sheet + Answer-modal)
|
||||
|
||||
**Bestanden**
|
||||
- `components/shared/notifications-bell.tsx` — nieuw
|
||||
- `components/notifications/notifications-sheet.tsx` — nieuw
|
||||
- `components/notifications/answer-modal.tsx` — nieuw
|
||||
- `components/notifications/notifications-bridge.tsx` — nieuw, hookt SSE-listener aan store
|
||||
- `stores/notifications-store.ts` — nieuw
|
||||
- `lib/realtime/use-notifications-realtime.ts` — nieuw
|
||||
- `components/shared/nav-bar.tsx` — `<NotificationsBell />` toevoegen rechts (links van `<UserMenu>`)
|
||||
- `app/(app)/layout.tsx` — `<NotificationsBridge />` mounten (analoog aan `<SoloRealtimeBridge />`)
|
||||
|
||||
**Stappen**
|
||||
|
||||
1. **`stores/notifications-store.ts`** — Zustand store; volgt `stores/solo-store.ts`-pattern:
|
||||
- State: `{ questions: Question[], pendingAnswerIds: Set<string> }`
|
||||
- Actions: `init(q[])`, `add(q)`, `update(q)`, `remove(id)`, `optimisticAnswer(id)`, `rollbackAnswer(id, q)`
|
||||
- Selectors: `openCount(userId)`, `forYouCount(userId)` (waar story-assignee = userId)
|
||||
|
||||
2. **`lib/realtime/use-notifications-realtime.ts`** — analoog aan `useSoloRealtime`. EventSource opent op `/api/realtime/notifications`, dispatcht `state`/`message`-events naar store via `add`/`update`/`remove`. Reconnect met exponential backoff.
|
||||
|
||||
3. **`<NotificationsBridge />`** — Server Component die initial questions ophaalt en aan de store geeft via `init`-prop. Mount in `(app)/layout.tsx` zodat de bridge altijd actief is wanneer user is ingelogd.
|
||||
|
||||
4. **`<NotificationsBell />`** — Client Component:
|
||||
- Lucide `Bell`-icon met badge: `openCount` (totaal) + accent-dot als `forYouCount > 0`
|
||||
- Klik: `setOpen(true)` op de Sheet
|
||||
- Geen badge als count === 0
|
||||
|
||||
5. **`<NotificationsSheet />`** — shadcn `Sheet` van rechts:
|
||||
- Header: "Vragen van Claude (N)"
|
||||
- Lijst gegroepeerd op product (analoog aan M5 todo-data-table-styling), elk item: story-code + truncated title, vraag-preview (line-clamp-2), assignee-emphase als forYou, "Beantwoord" knop opent answer-modal
|
||||
- Lege staat: "Geen openstaande vragen. Lekker bezig!"
|
||||
|
||||
6. **`<AnswerModal />`** — shadcn `Dialog`:
|
||||
- Story-context-link bovenaan (kleine kaart)
|
||||
- Volledige vraag-tekst
|
||||
- Als `options`: `<RadioGroup>` met opties; geen vrije tekst
|
||||
- Anders: `<Textarea>` (max 4000 chars, char-counter)
|
||||
- "Verstuur" + "Annuleer" knoppen; submit roept `answerQuestion`-action via `useTransition`
|
||||
- Demo-modus: knop disabled met tooltip
|
||||
|
||||
7. NavBar-edit: `<NotificationsBell />` rechts naast de huidige avatar-trigger. Nieuwe gap-spacing in NavBar's right-section.
|
||||
|
||||
**Aandachtspunten**
|
||||
- Bell-icon en avatar moeten visueel balanceren — hoogte/padding gelijktrekken
|
||||
- MD3-tokens uit `docs/scrum4me-styling.md`: badge `bg-error text-error-foreground` voor critical-count, `bg-primary` voor neutraal. Geen willekeurige Tailwind-kleuren
|
||||
- Optimistic-answer in store: voor het Server Action-resultaat zet item op pending; bij error rollback met sonner-error-toast
|
||||
- Sheet-content blijft open zodat de user meerdere vragen achter elkaar kan beantwoorden (zelfde patroon als ST-358 openstaande-stories-sheet)
|
||||
- ARIA: bell-icon heeft `aria-label="Notificaties — N open vragen"`, badge `role="status"`
|
||||
|
||||
**Verificatie**
|
||||
- Bell verschijnt in NavBar links van avatar; badge count = open question count
|
||||
- Klik opent Sheet; lijst rendert correct met assignee-emphase
|
||||
- Submit schiet event door — in tweede tab van zelfde user verdwijnt item binnen 1-2s
|
||||
- Demo-modus: Sheet rendert, Modal opent, "Verstuur" disabled
|
||||
- E2E-flow: Claude `ask_user_question` → bell-badge wordt 1 → klik → modal → submit → badge wordt 0 → Claude's `get_question_answer` levert antwoord
|
||||
|
||||
---
|
||||
|
||||
## ST-1106 — Demo-policy + access-rules + tests
|
||||
|
||||
**Bestanden**
|
||||
- `__tests__/actions/questions.test.ts` — uitbreiden met access-cases (al opgezet in ST-1103)
|
||||
- `__tests__/api/notifications-stream.test.ts` — access-cases
|
||||
- Documentatie-aanpassingen in `actions/questions.ts` en SSE-route met expliciete demo-blok-comment
|
||||
|
||||
**Stappen**
|
||||
1. Verifieer dat `requireProductWriter` alle Server-Action-mutaties al dekt (zou moeten — uit M3.5)
|
||||
2. Voeg expliciete demo-test toe: demo-user opent answer-modal → Verstuur disabled met tooltip
|
||||
3. Voeg access-test toe: user-A heeft geen access tot product van user-B → user-A's notification-stream krijgt geen events voor user-B's questions
|
||||
|
||||
**Aandachtspunten**
|
||||
- Story-assignee-emphase is **alleen visueel** — toegang is product-membership-breed. Dit is bewust: als de assignee niet beschikbaar is moet een andere member kunnen invallen
|
||||
- Demo kan een vraag wel **lezen** (transparantie over hoe de feature werkt) — alleen niet beantwoorden
|
||||
|
||||
**Verificatie**
|
||||
- 6+ tests groen (al gedekt in ST-1103/1104)
|
||||
- Handmatige cross-product-test met 2 users + 2 producten
|
||||
|
||||
---
|
||||
|
||||
## ST-1107 — Auto-expire + Vercel cron-cleanup
|
||||
|
||||
**Bestanden**
|
||||
- `app/api/cron/expire-questions/route.ts` — nieuw
|
||||
- `vercel.ts` — `crons`-entry toevoegen
|
||||
- `lib/env.ts` — `CRON_SECRET` toevoegen aan Zod-schema
|
||||
- `.env.example` — `CRON_SECRET` documenteren
|
||||
|
||||
**Stappen**
|
||||
|
||||
1. **Cron-handler**:
|
||||
```ts
|
||||
export const runtime = 'nodejs'
|
||||
|
||||
export async function POST(request: Request) {
|
||||
const auth = request.headers.get('authorization')
|
||||
if (auth !== `Bearer ${process.env.CRON_SECRET}`) {
|
||||
return Response.json({ error: 'Unauthorized' }, { status: 401 })
|
||||
}
|
||||
|
||||
const result = await prisma.claudeQuestion.updateMany({
|
||||
where: { status: 'open', expires_at: { lt: new Date() } },
|
||||
data: { status: 'expired' },
|
||||
})
|
||||
// Optioneel: ook M10 login_pairings cleanup hier (eerder geparkeerd)
|
||||
return Response.json({ expired: result.count })
|
||||
}
|
||||
```
|
||||
|
||||
2. **`vercel.ts`**:
|
||||
```ts
|
||||
export const config: VercelConfig = {
|
||||
// ... bestaande config
|
||||
crons: [{ path: '/api/cron/expire-questions', schedule: '0 4 * * *' }],
|
||||
}
|
||||
```
|
||||
|
||||
3. Documenteer in `.env.example`: `CRON_SECRET=<openssl rand -base64 32>`
|
||||
|
||||
**Aandachtspunten**
|
||||
- Vercel cron POST't standaard zonder body; auth is alleen via header
|
||||
- Op Hobby-plan zijn crons beperkt — check budget. M11 cron is 4x/dag, prima
|
||||
- Cron-trigger update't `claude_questions` → trigger fired → SSE-events → UI updates badge real-time. Geen extra plumbing nodig
|
||||
|
||||
**Verificatie**
|
||||
- Handmatig: `curl -X POST -H "Authorization: Bearer ${CRON_SECRET}" /api/cron/expire-questions` met een vraag waar `expires_at < now` → response `{expired: 1}`, vraag verdwijnt uit notifications
|
||||
- Onbevoegde call zonder secret → 401
|
||||
- Vercel dashboard toont cron-config na deploy
|
||||
|
||||
---
|
||||
|
||||
## ST-1108 — Documentatie + acceptatietest
|
||||
|
||||
**Bestanden**
|
||||
- `docs/API.md` — secties "SSE — Notifications" + "Cron — Expire questions"
|
||||
- `docs/scrum4me-architecture.md` — sectie "Vraag-antwoord-kanaal" met sequence-diagram
|
||||
- `docs/patterns/claude-question-channel.md` — herbruikbaar pattern-doc
|
||||
- `docs/scrum4me-backlog.md` — M11-tabel-rij + M11-sectie
|
||||
- `prisma/seed-data/parse-backlog.ts` — `M11: 'ACTIVE'`, `M10: 'COMPLETED'`, `M3.5: 'COMPLETED'`
|
||||
- `CLAUDE.md` — pattern-doc verwijzing in Implementatiepatronen-tabel
|
||||
|
||||
**Stappen**
|
||||
|
||||
1. Backlog-tabel-rij + M11-sectie in `docs/scrum4me-backlog.md` (mirror M10-format met **Implementatieplan:** verwijzing naar dit doc)
|
||||
|
||||
2. `docs/scrum4me-architecture.md` § "Vraag-antwoord-kanaal":
|
||||
- Mermaid sequence-diagram: Claude → MCP → DB → trigger → SSE → user → Server Action → DB → trigger → polling-tool
|
||||
- Threat-model-tabel (replay, demo-block, access-leak, expiry, race)
|
||||
- "Waarom hergebruik scrum4me_changes-kanaal" sub-sectie
|
||||
|
||||
3. `docs/patterns/claude-question-channel.md` — generiek pattern voor toekomstige bidirectionele async-communicatie tussen MCP-agents en interactieve users
|
||||
|
||||
4. Parser-flip: M11 wordt nieuwe ACTIVE-milestone, M10 → COMPLETED. (Zelfde patroon als bij M10-start: chore-commit met vlag-flip + re-seed.)
|
||||
|
||||
5. **Acceptatie-scenario's** (zes, deels door unit-tests gedekt):
|
||||
1. **Sync happy path**: Claude `ask_user_question(wait_seconds=300)` → user antwoordt binnen 30s → MCP-tool retourneert het antwoord ✅
|
||||
2. **Async happy path**: `ask_user_question(wait_seconds=0)` → tool returnt direct → user antwoordt later → Claude `get_question_answer` → ziet antwoord ✅
|
||||
3. **Demo-block**: demo-user opent vraag → kan inhoud lezen → "Verstuur" disabled (UI + Server Action ✅)
|
||||
4. **Access-isolation**: vraag op product zonder access → onzichtbaar in andere user's notifications-bell (SSE-filter ✅)
|
||||
5. **Expiry**: vraag met `expires_at < now` → na cron-run niet meer in badge-count ✅
|
||||
6. **Race**: concurrent answer-poging op al-beantwoorde vraag → schone foutmelding (atomic `updateMany count=0` ✅)
|
||||
|
||||
**Aandachtspunten**
|
||||
- Acceptatie-scenario's 1-2 zijn handmatig (full Claude+browser cyclus); 3-6 worden in unit-tests vastgelegd
|
||||
- Pattern-doc moet ook beschrijven wanneer NIET te gebruiken (bv. wanneer een gewone API-call met sessie volstaat)
|
||||
|
||||
**Verificatie**
|
||||
- Alle docs gepubliceerd in repo
|
||||
- Backlog-parser-self-test: `npx tsx prisma/seed-data/parse-backlog.ts` toont M11 met `priority=4 sprint=ACTIVE`
|
||||
- 6/6 acceptatie-scenario's groen
|
||||
- `npm run lint && npx tsc --noEmit && npm test && npm run build` clean
|
||||
- `vendor/scrum4me`-submodule sync in scrum4me-mcp na merge
|
||||
|
||||
---
|
||||
|
||||
## Branch- en commit-strategie
|
||||
|
||||
Per [CLAUDE.md → Branch & PR Strategy](../../CLAUDE.md#branch--pr-strategy-strict--kostenbeheersing):
|
||||
- **Eén branch op Scrum4Me**: `feat/M11-claude-questions` afgesplitst van `main` ná M10-merge
|
||||
- **Aparte branch op scrum4me-mcp**: `feat/M11-question-tools`
|
||||
- Commits chronologisch per stap met ST-code in titel:
|
||||
|
||||
```
|
||||
chore(M11): swap demo-active sprint from M10 to M11
|
||||
feat(ST-1101): add ClaudeQuestion model + notify_question_change trigger
|
||||
feat(ST-1102): add 4 MCP question tools (in scrum4me-mcp)
|
||||
feat(ST-1103): add answerQuestion server action
|
||||
feat(ST-1104): add /api/realtime/notifications user-scoped SSE
|
||||
feat(ST-1104): filter entity='question' from solo-realtime stream
|
||||
feat(ST-1105): add Zustand notifications-store + realtime hook
|
||||
feat(ST-1105): add NotificationsBridge in app layout
|
||||
feat(ST-1105): add NotificationsBell + Sheet + AnswerModal
|
||||
chore(ST-1107): add CRON_SECRET to env schema
|
||||
feat(ST-1107): add /api/cron/expire-questions handler
|
||||
feat(ST-1107): wire vercel.ts cron entry
|
||||
docs(ST-1108): document notifications SSE + cron in API.md
|
||||
docs(ST-1108): add vraag-antwoord-kanaal flow to architecture
|
||||
docs(ST-1108): add claude-question-channel pattern doc
|
||||
chore(ST-1108): backlog M11 + parser ACTIVE-flip
|
||||
```
|
||||
|
||||
**Push + PR pas na handmatige acceptatie** van scenario 1 (sync happy path) + 3 (demo-block) op localhost.
|
||||
|
||||
**MCP-PR pas mergen ná Scrum4Me-PR** + submodule-sync — anders wijzen MCP-tools naar een schema-tabel die op main nog niet bestaat.
|
||||
|
||||
---
|
||||
|
||||
## Reseed-stap (eenmalig vóór ST-1101-implementatie)
|
||||
|
||||
Backlog-markdown moet eerst de M11-stories bevatten en de parser moet M11 als ACTIVE-milestone kennen voordat `mcp__scrum4me__get_claude_context` ze als next-story kan teruggeven. Workflow:
|
||||
|
||||
1. Doe ST-1108 backlog-edit + parser-flip eerst (commit `chore(M11): swap demo-active sprint from M10 to M11` + de backlog-uitbreiding)
|
||||
2. `npm run seed` — re-seed met M11=ACTIVE
|
||||
3. `mcp__scrum4me__get_claude_context` levert nu ST-1101 als next-story
|
||||
4. Verder met ST-1101-implementatie
|
||||
|
||||
> **Let op:** seed wist user-data. Doe dit op een dev-DB.
|
||||
|
||||
---
|
||||
|
||||
## Buiten scope (volgende milestones)
|
||||
|
||||
- **AI-suggested antwoorden** — Claude leest de codebase en stelt 3 mogelijke antwoorden voor; user kiest. Vereist tweede LLM-call per vraag.
|
||||
- **Mobile-push notifications** — bouwt op M10 paired-flow + service-worker. v3.
|
||||
- **Question-templates** — "ambiguous-naming"-vraag, "missing-test-case"-vraag etc. voor consistentie.
|
||||
- **Threading** — vervolgvraag op een antwoord. v1 is single-shot Q&A.
|
||||
- **File-uploads als antwoord** — bv. een screenshot.
|
||||
- **Stats/dashboard** — gemiddelde antwoord-tijd, meest-gestelde-vraagsoorten.
|
||||
- **Dismiss-per-user** — een member negeert een vraag voor zichzelf zonder 'm te beantwoorden.
|
||||
|
|
@ -591,6 +591,76 @@ Dit patroon is herbruikbaar — zie `docs/patterns/qr-login.md`.
|
|||
|
||||
---
|
||||
|
||||
## Vraag-antwoord-kanaal Claude ↔ user (M11)
|
||||
|
||||
Persistent kanaal tussen Claude Code (via MCP) en de actieve Scrum4Me-gebruiker.
|
||||
Wanneer Claude tijdens een implementatie vastloopt op een keuze, schrijft hij een
|
||||
gestructureerde vraag naar `claude_questions`. Een Postgres-trigger emit op het
|
||||
**bestaande** `scrum4me_changes`-kanaal (hergebruik uit M8) met `entity: 'question'`.
|
||||
De Scrum4Me-app heeft een aparte user-scoped SSE-route die op dit kanaal abonneert,
|
||||
filter't op product-toegang en de notifications-bell in de NavBar voedt. Iedere
|
||||
gebruiker met product-membership kan antwoorden; story-assignee krijgt visuele
|
||||
emphase. Claude leest het antwoord (sync via polling met `wait_seconds`, of in
|
||||
een latere sessie via `get_question_answer`) en gaat door.
|
||||
|
||||
### Sequence
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant C as Claude (MCP)
|
||||
participant DB as Postgres
|
||||
participant SC as scrum4me_changes channel
|
||||
participant SSE as /api/realtime/notifications
|
||||
participant U as Scrum4Me UI (browser)
|
||||
|
||||
C->>DB: INSERT claude_questions (status=open)
|
||||
DB->>SC: pg_notify {entity:'question', op:'I', id, ...}
|
||||
SC->>SSE: notification (filter: question + product-access)
|
||||
SSE->>U: data event → Zustand store upsert → bell badge
|
||||
|
||||
Note over U: Gebruiker klikt bell → Sheet → Modal
|
||||
U->>DB: answerQuestion(questionId, answer)<br/>Server Action: atomic updateMany WHERE status='open'
|
||||
DB->>SC: pg_notify {entity:'question', op:'U', status:'answered'}
|
||||
SC->>SSE: notification
|
||||
SSE->>U: data event → store remove → bell badge -1
|
||||
|
||||
Note over C: Optioneel: ask_user_question(wait_seconds) polt elke 2s
|
||||
C->>DB: SELECT status FROM claude_questions WHERE id=...
|
||||
DB-->>C: status='answered', answer='...'
|
||||
C->>C: gaat door met implementatie
|
||||
```
|
||||
|
||||
### Threat-model
|
||||
|
||||
| Aanval | Mitigatie |
|
||||
|---|---|
|
||||
| **Race**: dubbele submit op zelfde vraag | Atomic `updateMany WHERE status='open'` — één caller ziet count=1, rest count=0 met disambiguatie via second findFirst |
|
||||
| **Demo-account misbruik** | `requireWriteAccess` op MCP-write-tools (PERMISSION_DENIED), early-return op `session.isDemo` in answerQuestion Server Action, disabled submit + tooltip in AnswerModal |
|
||||
| **Cross-product leak** | `productAccessFilter` op DB-query én SSE-server-side-filter (Set met user's accessible product-IDs) |
|
||||
| **Cron-endpoint misbruik** | `Authorization: Bearer ${CRON_SECRET}` — Vercel injecteert automatisch; faalt 401 als secret niet gezet (geen open endpoint in dev) |
|
||||
| **Onbeperkte vragen-groei** | `expires_at` 24 u + Vercel cron `0 4 * * *` (dagelijks; Hobby-plan-limiet) markeert `status='expired'` → uit notifications-bell |
|
||||
| **Gevoelige info in logs** | Logging alleen `question_id`, nooit vraag- of antwoord-tekst |
|
||||
|
||||
### Waarom hergebruik scrum4me_changes-kanaal
|
||||
|
||||
In tegenstelling tot M10 (eigen `scrum4me_pairing`-kanaal) is M11 een uitbreiding van
|
||||
de bestaande realtime-infra. Voordelen:
|
||||
|
||||
- Eén Postgres-NOTIFY-listener per route i.p.v. twee — minder DB-connecties
|
||||
- Solo-realtime + notifications kunnen onafhankelijk evolueren via de `entity`-key
|
||||
- Toekomstige entities (bijv. `entity: 'comment'`, `entity: 'mention'`) hoeven geen
|
||||
nieuw kanaal — alleen een filter-aanpassing in de route die ze wil ontvangen
|
||||
|
||||
Risico: een nieuwe entity vergeten te filteren leidt tot lekkage. Mitigatie:
|
||||
expliciet `if (payload.entity === 'X') return false` in elke SSE-route die
|
||||
betrokken-features niet hoort te zien (zoals de solo-route die `entity:'question'`
|
||||
weert).
|
||||
|
||||
Dit patroon (notification-channel via een bestaande pg_notify-stream) is
|
||||
herbruikbaar — zie `docs/patterns/claude-question-channel.md`.
|
||||
|
||||
---
|
||||
|
||||
## Projectstructuur
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ De MVP is klaar wanneer Lars — de primaire persona — de volledige cyclus kan
|
|||
| M8: Realtime Solo Paneel | Live updates voor stories/tasks via SSE + Postgres LISTEN/NOTIFY | ST-801 – ST-806 |
|
||||
| M9: Actief Product Backlog | Persistente actieve PB-keuze, gesplitste navigatie, disabled-states | ST-901 – ST-907 |
|
||||
| M10: Password-loze inlog via QR-pairing | Mobiel als bevestigingskanaal voor desktop-login zonder wachtwoord | ST-1001 – ST-1008 |
|
||||
| M11: Claude vraagt, gebruiker antwoordt | Persistent vraag-antwoord-kanaal tussen Claude (MCP) en de actieve gebruiker | ST-1101 – ST-1108 |
|
||||
---
|
||||
|
||||
## Backlog
|
||||
|
|
@ -654,6 +655,73 @@ Volledige flow + threat-model: `docs/patterns/qr-login.md` (op te leveren in ST-
|
|||
|
||||
---
|
||||
|
||||
### M11: Claude vraagt, gebruiker antwoordt
|
||||
|
||||
**Implementatieplan:** [docs/plans/M11-claude-questions.md](plans/M11-claude-questions.md)
|
||||
|
||||
Persistent vraag-antwoord-kanaal tussen Claude Code (via MCP) en de actieve Scrum4Me-gebruiker. Claude schrijft een vraag naar `claude_questions` als hij vastloopt op een keuze; een Postgres-trigger emit op het bestaande `scrum4me_changes`-kanaal (uitgebreid met `entity: 'question'`); de Scrum4Me-app toont een notificatie-badge in de NavBar; iedereen met product-toegang kan antwoorden; Claude leest het antwoord (sync via polling met `wait_seconds`, of in een latere sessie via `get_question_answer`) en gaat door. Eerste concrete uitwerking van de AI-driven dev-flow-richting.
|
||||
|
||||
**Beveiligingsuitgangspunt:** atomic answer via `updateMany WHERE status='open'` voorkomt double-submit; demo-blok op zowel MCP-write-tools als Server Action; access-check via `productAccessFilter` in DB-query én SSE-filter; cron-endpoint voor expire-cleanup beveiligd met `Authorization: Bearer ${CRON_SECRET}`-header; logging alleen `question_id` (vraag/antwoord-tekst kan gevoelig materiaal bevatten).
|
||||
|
||||
- [ ] **ST-1101** `ClaudeQuestion` schema + Postgres-trigger
|
||||
- **Schema:** `ClaudeQuestion { id, story_id, task_id?, product_id, asked_by, question, options?: Json, status, answer?, answered_by?, answered_at?, created_at, expires_at }`; relations op `User` (`asked_questions`, `answered_questions`), `Story`, `Task`, `Product`; indexes `(story_id, status)`, `(product_id, status)`, `(status, expires_at)`; `product_id` gedenormaliseerd voor SSE-filter
|
||||
- **Trigger:** `notify_question_change()` `AFTER INSERT/UPDATE`; emit op `scrum4me_changes`-kanaal met payload `{ op, entity: 'question', id, product_id, story_id, task_id, assignee_id, status }`
|
||||
- **Migratie:** `prisma migrate dev --name add_claude_questions`
|
||||
- Done when: migratie slaagt; `psql LISTEN scrum4me_changes` toont nieuwe `entity: 'question'`-payload bij INSERT; bestaande solo-realtime-flow ongewijzigd; submodule sync na merge
|
||||
|
||||
- [ ] **ST-1102** MCP-tools voor Claude (in scrum4me-mcp-repo)
|
||||
- **`ask_user_question`** (write): input `{ story_id, question, options?, task_id?, wait_seconds? }`; insert pairing + optioneel pollen tot `wait_seconds` (max 600); demo-blok via `requireWriteAccess`; access-check via `userCanAccessProduct(story.product_id, ...)`
|
||||
- **`get_question_answer`** (read): haalt status + antwoord op een specifieke vraag op
|
||||
- **`list_open_questions`** (read): lijst van eigen vragen (laatste 50, status open of answered)
|
||||
- **`cancel_question`** (write): asker mag eigen vraag annuleren; status pending→cancelled
|
||||
- Smoke-test in `scripts/smoke-test.ts`: `ask_user_question` met `wait_seconds=5` + parallel answer roundtrip
|
||||
- Done when: MCP Inspector toont 4 nieuwe tools; smoke-test groen; demo-token op write-tools krijgt PERMISSION_DENIED; `tsc --noEmit` clean
|
||||
|
||||
- [ ] **ST-1103** Server Action `answerQuestion`
|
||||
- `actions/questions.ts`: `answerQuestion(questionId, answer)` met getSession + Zod + demo-blok + `requireProductWriter` via `question.product_id`; atomic `updateMany WHERE status='open' AND expires_at>now`; `revalidatePath('/', 'layout')` voor badge-refresh
|
||||
- Bij `count === 0`: disambigueer (al-answered/expired/access-fail) met begrijpelijke foutmelding
|
||||
- Tests: 6 cases (happy, demo-block, geen access, race, expired, lege answer)
|
||||
- Done when: `npm test` 6/6; handmatig: open vraag → antwoord → badge-count daalt met 1; demo-toast bij submit
|
||||
|
||||
- [ ] **ST-1104** User-scoped SSE-route `/api/realtime/notifications`
|
||||
- Route Handler `runtime: 'nodejs'`, `maxDuration: 300`; auth via iron-session; **user-scoped** (geen product_id-param); filter `payload.entity === 'question'` én `payload.product_id` in user's accessible-product-ids
|
||||
- Initial-state-event direct na connect (na LISTEN actief, conform M10 ST-1004 race-fix): summary-array van openstaande vragen voor deze user
|
||||
- Update solo-route in `app/api/realtime/solo/route.ts`: in `shouldEmit` `if (payload.entity === 'question') return false` toevoegen — anders krijgen solo-clients ongewenst question-events
|
||||
- Tests: 401 zonder cookie, filter op product-access, geen `entity:'question'`-events op solo-route
|
||||
- Done when: `curl -N` levert events binnen 1s na INSERT; cross-product-test (user-A ziet user-B's vragen niet)
|
||||
|
||||
- [ ] **ST-1105** Notifications-UI (Bell + Sheet + Answer-modal + Zustand-store)
|
||||
- **`stores/notifications-store.ts`** — Zustand store volgens `solo-store.ts`-patroon: `init`, `add`, `update`, `remove`, `optimisticAnswer`, `rollbackAnswer`; selectors `openCount`, `forYouCount`
|
||||
- **`lib/realtime/use-notifications-realtime.ts`** — analoog aan `useSoloRealtime`; EventSource op `/api/realtime/notifications` met reconnect-backoff
|
||||
- **`components/notifications/notifications-bridge.tsx`** — Server Component die initial-data fetcht en aan store geeft; mount in `app/(app)/layout.tsx` naast `<SoloRealtimeBridge />`
|
||||
- **`components/shared/notifications-bell.tsx`** — Bell-icon (Lucide) met badge in NavBar (links van avatar); MD3-tokens uit `docs/scrum4me-styling.md`
|
||||
- **`components/notifications/notifications-sheet.tsx`** — shadcn Sheet van rechts; lijst gegroepeerd per product; story-assignee krijgt visuele *"wacht op jou"*-emphase
|
||||
- **`components/notifications/answer-modal.tsx`** — shadcn Dialog; story-context-link, vraag-tekst, RadioGroup (als options) of Textarea (free-text), submit via `useTransition` + Server Action; demo-blok met tooltip
|
||||
- Done when: bell + badge zichtbaar; klik opent Sheet met items; submit verwijdert item optimistisch; tweede tab van zelfde user ziet nieuwe vraag binnen 1-2s; demo-modus rendert maar Verstuur disabled
|
||||
|
||||
- [ ] **ST-1106** Demo-policy + access-tests
|
||||
- Demo: Sheet rendert + Modal opent + Verstuur disabled met tooltip
|
||||
- Access-isolation: cross-product test in `__tests__/api/notifications-stream.test.ts` (al gedeeltelijk in ST-1104)
|
||||
- Story-assignee-emphase: visueel-only, toegang blijft product-membership-breed
|
||||
- Done when: 4 access-tests groen; handmatige cross-product-verificatie
|
||||
|
||||
- [ ] **ST-1107** Vercel cron `expire-questions`
|
||||
- **`app/api/cron/expire-questions/route.ts`** — POST handler beveiligd via `Authorization: Bearer ${CRON_SECRET}`; `updateMany WHERE status='open' AND expires_at<now → status='expired'`
|
||||
- **`vercel.json`** — `crons` entry: `{ path: '/api/cron/expire-questions', schedule: '0 4 * * *' }` (dagelijks; Vercel Hobby-plan staat alleen daily crons toe)
|
||||
- **`lib/env.ts`** + `.env.example` — `CRON_SECRET` via Zod
|
||||
- Optioneel: ook M10's `login_pairings`-cleanup in dezelfde route opnemen
|
||||
- Done when: handmatige `curl -X POST` met secret expireert oude rijen; Vercel-dashboard toont cron-config na deploy; onbevoegde call → 401
|
||||
|
||||
- [ ] **ST-1108** Documentatie + acceptatietest
|
||||
- **`docs/API.md`:** secties "SSE — Notifications" + "Cron — Expire questions" met curl-voorbeelden
|
||||
- **`docs/scrum4me-architecture.md`:** sectie "Vraag-antwoord-kanaal Claude ↔ user" met Mermaid sequence-diagram + threat-model + "Waarom hergebruik scrum4me_changes-kanaal"
|
||||
- **`docs/patterns/claude-question-channel.md`:** nieuw herbruikbaar pattern-doc voor toekomstige bidirectionele async-communicatie tussen MCP-agents en interactieve users
|
||||
- **`CLAUDE.md`:** rij in Implementatiepatronen-tabel voor het nieuwe pattern
|
||||
- **Acceptatietest** zes scenario's: sync happy (wait_seconds), async happy (geen wait), demo-block, access-isolation, expiry via cron, race op double-submit
|
||||
- Done when: docs gepubliceerd; alle zes scenario's groen; backlog-parser-self-test toont M11 met ACTIVE-status
|
||||
|
||||
---
|
||||
|
||||
## v2 Backlog (na MVP)
|
||||
|
||||
- [ ] Uitnodigingsflow voor teams — e-mailuitnodiging of link-gebaseerd; nu kunnen alleen admins met toegang tot het systeem Developers toevoegen via gebruikersnaam
|
||||
|
|
|
|||
|
|
@ -424,6 +424,44 @@ Een REST API waarmee Claude Code stories en taken kan ophalen, de taakvolgorde k
|
|||
|
||||
---
|
||||
|
||||
### F-11b: Vraag-antwoord-kanaal Claude ↔ user
|
||||
|
||||
**Prioriteit:** v1 — Verdiept de Claude-integratie (richting B uit strategisch overleg)
|
||||
**Persona:** Lars (primair), Dina (idem voor klant-werk)
|
||||
|
||||
**Omschrijving:**
|
||||
Wanneer Claude Code tijdens het implementeren van een story een keuze niet uit de acceptance-criteria kan afleiden, post hij een gestructureerde vraag naar Scrum4Me via een MCP-tool. De Scrum4Me-app toont een notificatie-badge voor iedereen met toegang tot het product. Een gebruiker beantwoordt de vraag in de UI; Claude leest het antwoord (sync via een polling-tool of in een latere sessie) en gaat door zonder te raden of te wachten in de Claude Code-sessie.
|
||||
|
||||
**Verloop:**
|
||||
1. Claude heeft een vraag → roept MCP-tool `ask_user_question` aan met `{ story_id, question, options?, wait_seconds? }`. Tool schrijft een rij naar `claude_questions` met status `open`, vervaltijd 24 u.
|
||||
2. Postgres-trigger emit op het bestaande `scrum4me_changes`-kanaal met `entity: 'question'`. De Scrum4Me-app heeft een user-scoped SSE-stream die filter't op product-toegang.
|
||||
3. NavBar-bell krijgt een badge met de count van open vragen voor deze gebruiker. Story-assignee ziet een visuele *"wacht op jou"*-emphase.
|
||||
4. Klik op bell → slide-over met lijst → klik op item → modal met de volledige vraag, story-context-link en (optionele) keuze-opties. Submit verstuurt het antwoord via Server Action.
|
||||
5. Trigger fired opnieuw, alle SSE-clients zien het item verdwijnen. Claude's tool-poller (als `wait_seconds` was meegegeven) krijgt het antwoord direct terug; anders haalt Claude het later op via `get_question_answer`.
|
||||
|
||||
**Acceptatiecriteria:**
|
||||
- [ ] Claude kan via MCP een vraag stellen (`ask_user_question`); demo-tokens krijgen permission-denied
|
||||
- [ ] Bell-icon in NavBar toont badge met aantal open vragen voor de ingelogde gebruiker
|
||||
- [ ] Iedere gebruiker met product-toegang kan antwoorden; story-assignee krijgt visuele markering
|
||||
- [ ] Demo-gebruiker kan vragen lezen maar de Verstuur-knop is uitgeschakeld met tooltip
|
||||
- [ ] Optionele `wait_seconds` (max 600) laat de MCP-tool blijven pollen; bij timeout retourneert hij `status: 'pending'`
|
||||
- [ ] Concurrent dubbele submit op zelfde vraag: één wint via atomic `updateMany`, ander krijgt foutmelding "al beantwoord"
|
||||
- [ ] Vragen ouder dan 24 u worden via een Vercel cron op `expired` gezet
|
||||
- [ ] Cross-product-isolatie: een gebruiker ziet alleen vragen van producten waar hij toegang toe heeft
|
||||
|
||||
**Randgevallen:**
|
||||
- Claude vraagt iets en is daarna offline (Claude Code-sessie afgesloten) → vraag blijft in DB; volgende sessie roept `list_open_questions` of `get_question_answer` op
|
||||
- Story-assignee verandert nadat de vraag is gesteld → de vraag blijft beantwoordbaar door iedereen met product-toegang; visuele emphase volgt de actuele assignee
|
||||
- Vraag verloopt voordat iemand antwoord geeft → cron zet 'm op `expired`; Claude's `get_question_answer` retourneert `status: 'expired'`
|
||||
- Phishing/abuse: alleen geverifieerde Claude-tokens kunnen vragen stellen; Scrum4Me-gebruikers zien alleen vragen van hun eigen producten
|
||||
|
||||
**Data:**
|
||||
- Nieuw: `claude_questions` (id, story_id, task_id?, product_id, asked_by, question, options?, status, answer?, answered_by?, answered_at?, created_at, expires_at)
|
||||
- Postgres-trigger op `claude_questions` publiceert via `pg_notify('scrum4me_changes', ...)`
|
||||
- Nieuwe MCP-tools in scrum4me-mcp: `ask_user_question`, `get_question_answer`, `list_open_questions`, `cancel_question`
|
||||
|
||||
---
|
||||
|
||||
### F-12: API-tokenbeheer
|
||||
|
||||
**Prioriteit:** v1 — Vereiste voor Claude Code-integratie
|
||||
|
|
|
|||
|
|
@ -5,6 +5,10 @@ const envSchema = z.object({
|
|||
DIRECT_URL: z.string().optional(),
|
||||
SESSION_SECRET: z.string().min(32, 'SESSION_SECRET must be at least 32 characters'),
|
||||
NODE_ENV: z.enum(['development', 'production', 'test']).default('development'),
|
||||
// M11 (ST-1107) — gedeeld geheim tussen Vercel cron-trigger en
|
||||
// /api/cron/expire-questions. In productie verplicht; lokaal dev mag missen
|
||||
// (de cron-route geeft 401 als de header niet matcht).
|
||||
CRON_SECRET: z.string().optional(),
|
||||
})
|
||||
|
||||
const parsed = envSchema.safeParse(process.env)
|
||||
|
|
|
|||
126
lib/realtime/use-notifications-realtime.ts
Normal file
126
lib/realtime/use-notifications-realtime.ts
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
// ST-1105: Client hook die de notificatie-SSE stream beheert (M11).
|
||||
//
|
||||
// Mount via <NotificationsBridge /> in (app)/layout zodat hij Server Action-
|
||||
// refreshes overleeft. Opent EventSource('/api/realtime/notifications'),
|
||||
// dispatcht state-/message-events naar de notifications-store.
|
||||
//
|
||||
// Vereenvoudigde versie van useSoloRealtime — geen view-transitions, geen
|
||||
// connecting-indicator-debounce. Wel: reconnect met exponential backoff en
|
||||
// pause bij hidden tab.
|
||||
|
||||
'use client'
|
||||
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { useNotificationsStore, type NotificationQuestion } from '@/stores/notifications-store'
|
||||
|
||||
const BACKOFF_START_MS = 1_000
|
||||
const BACKOFF_MAX_MS = 30_000
|
||||
|
||||
interface NotifyPayload {
|
||||
op: 'I' | 'U'
|
||||
entity: 'question'
|
||||
id: string
|
||||
product_id: string
|
||||
story_id: string
|
||||
task_id: string | null
|
||||
assignee_id: string | null
|
||||
status: 'open' | 'answered' | 'cancelled' | 'expired'
|
||||
}
|
||||
|
||||
interface StateEvent {
|
||||
questions: NotificationQuestion[]
|
||||
}
|
||||
|
||||
export function useNotificationsRealtime() {
|
||||
const sourceRef = useRef<EventSource | null>(null)
|
||||
const backoffRef = useRef<number>(BACKOFF_START_MS)
|
||||
const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const init = useNotificationsStore.getState().init
|
||||
const remove = useNotificationsStore.getState().remove
|
||||
|
||||
const close = () => {
|
||||
if (sourceRef.current) {
|
||||
sourceRef.current.close()
|
||||
sourceRef.current = null
|
||||
}
|
||||
if (reconnectTimerRef.current) {
|
||||
clearTimeout(reconnectTimerRef.current)
|
||||
reconnectTimerRef.current = null
|
||||
}
|
||||
}
|
||||
|
||||
const connect = () => {
|
||||
close()
|
||||
const source = new EventSource('/api/realtime/notifications', {
|
||||
withCredentials: true,
|
||||
})
|
||||
sourceRef.current = source
|
||||
|
||||
source.addEventListener('open', () => {
|
||||
backoffRef.current = BACKOFF_START_MS
|
||||
})
|
||||
|
||||
source.addEventListener('state', (ev) => {
|
||||
try {
|
||||
const data = JSON.parse((ev as MessageEvent).data) as StateEvent
|
||||
init(data.questions ?? [])
|
||||
} catch {
|
||||
// ignore malformed
|
||||
}
|
||||
})
|
||||
|
||||
source.addEventListener('message', (ev) => {
|
||||
try {
|
||||
const payload = JSON.parse(ev.data) as NotifyPayload
|
||||
if (payload.entity !== 'question') return
|
||||
// Bij open of nieuwe insert → upsert (server stuurt geen vraag-tekst
|
||||
// mee in de payload, dus we doen een mini-fetch via de same SSE's
|
||||
// initial-state on reconnect; hier voor MVP alleen status-handling).
|
||||
if (payload.status === 'open') {
|
||||
// Inkomende open vraag: we hebben de details nog niet — beste optie is
|
||||
// herfetchen door opnieuw te verbinden, of via een API. Voor v1
|
||||
// forceren we een reconnect zodat het volgende state-event de
|
||||
// volledige details meelevert.
|
||||
close()
|
||||
connect()
|
||||
return
|
||||
}
|
||||
// Niet-open status (answered/cancelled/expired) → verwijderen uit lijst
|
||||
remove(payload.id)
|
||||
} catch {
|
||||
// ignore malformed
|
||||
}
|
||||
})
|
||||
|
||||
source.addEventListener('error', () => {
|
||||
// EventSource herconnect zelf bij netwerkfouten; voor server-close
|
||||
// (after 240s) doen we een eigen backoff
|
||||
if (sourceRef.current?.readyState === EventSource.CLOSED) {
|
||||
const delay = backoffRef.current
|
||||
backoffRef.current = Math.min(delay * 2, BACKOFF_MAX_MS)
|
||||
reconnectTimerRef.current = setTimeout(connect, delay)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const onVisibilityChange = () => {
|
||||
if (document.visibilityState === 'visible') {
|
||||
if (!sourceRef.current || sourceRef.current.readyState === EventSource.CLOSED) {
|
||||
connect()
|
||||
}
|
||||
} else {
|
||||
close()
|
||||
}
|
||||
}
|
||||
|
||||
connect()
|
||||
document.addEventListener('visibilitychange', onVisibilityChange)
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('visibilitychange', onVisibilityChange)
|
||||
close()
|
||||
}
|
||||
}, [])
|
||||
}
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
-- CreateTable
|
||||
CREATE TABLE "claude_questions" (
|
||||
"id" TEXT NOT NULL,
|
||||
"story_id" TEXT NOT NULL,
|
||||
"task_id" TEXT,
|
||||
"product_id" TEXT NOT NULL,
|
||||
"asked_by" TEXT NOT NULL,
|
||||
"question" TEXT NOT NULL,
|
||||
"options" JSONB,
|
||||
"status" TEXT NOT NULL,
|
||||
"answer" TEXT,
|
||||
"answered_by" TEXT,
|
||||
"answered_at" TIMESTAMP(3),
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
"expires_at" TIMESTAMP(3) NOT NULL,
|
||||
|
||||
CONSTRAINT "claude_questions_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "claude_questions_story_id_status_idx" ON "claude_questions"("story_id", "status");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "claude_questions_product_id_status_idx" ON "claude_questions"("product_id", "status");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "claude_questions_status_expires_at_idx" ON "claude_questions"("status", "expires_at");
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "claude_questions" ADD CONSTRAINT "claude_questions_story_id_fkey" FOREIGN KEY ("story_id") REFERENCES "stories"("id") ON DELETE CASCADE ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "claude_questions" ADD CONSTRAINT "claude_questions_task_id_fkey" FOREIGN KEY ("task_id") REFERENCES "tasks"("id") ON DELETE SET NULL ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "claude_questions" ADD CONSTRAINT "claude_questions_product_id_fkey" FOREIGN KEY ("product_id") REFERENCES "products"("id") ON DELETE CASCADE ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "claude_questions" ADD CONSTRAINT "claude_questions_asked_by_fkey" FOREIGN KEY ("asked_by") REFERENCES "users"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "claude_questions" ADD CONSTRAINT "claude_questions_answered_by_fkey" FOREIGN KEY ("answered_by") REFERENCES "users"("id") ON DELETE SET NULL ON UPDATE CASCADE;
|
||||
|
||||
-- ST-1101: Postgres LISTEN/NOTIFY voor het Claude vraag-antwoord-kanaal (M11).
|
||||
--
|
||||
-- AFTER INSERT/UPDATE-trigger op claude_questions emit een JSON-payload op het
|
||||
-- BESTAANDE `scrum4me_changes`-kanaal (zelfde als ST-801) met `entity: 'question'`.
|
||||
--
|
||||
-- De solo-realtime SSE-route `/api/realtime/solo` MOET in ST-1104 een
|
||||
-- `if (payload.entity === 'question') return false`-filter krijgen — anders
|
||||
-- ontvangen solo-clients ongewenst question-events.
|
||||
--
|
||||
-- De nieuwe user-scoped SSE-route `/api/realtime/notifications` (ST-1104)
|
||||
-- abonneert zich op hetzelfde kanaal en filtert op `entity === 'question'`
|
||||
-- + product-toegang van de gebruiker.
|
||||
--
|
||||
-- DELETE wordt niet ondersteund — questions gaan naar status='answered',
|
||||
-- 'cancelled' of 'expired', niet weg.
|
||||
--
|
||||
-- Payload shape:
|
||||
-- { op: 'I' | 'U',
|
||||
-- entity: 'question',
|
||||
-- id: text,
|
||||
-- product_id: text,
|
||||
-- story_id: text,
|
||||
-- task_id: text|null,
|
||||
-- assignee_id: text|null, // story.assignee_id, voor "wacht op jou"-emphase
|
||||
-- status: 'open'|'answered'|'cancelled'|'expired' }
|
||||
|
||||
CREATE OR REPLACE FUNCTION notify_question_change() RETURNS trigger AS $$
|
||||
DECLARE
|
||||
story_row record;
|
||||
payload jsonb;
|
||||
BEGIN
|
||||
SELECT assignee_id INTO story_row FROM stories WHERE id = NEW.story_id;
|
||||
|
||||
payload := jsonb_build_object(
|
||||
'op', CASE TG_OP
|
||||
WHEN 'INSERT' THEN 'I'
|
||||
WHEN 'UPDATE' THEN 'U'
|
||||
END,
|
||||
'entity', 'question',
|
||||
'id', NEW.id,
|
||||
'product_id', NEW.product_id,
|
||||
'story_id', NEW.story_id,
|
||||
'task_id', NEW.task_id,
|
||||
'assignee_id', story_row.assignee_id,
|
||||
'status', NEW.status
|
||||
);
|
||||
|
||||
PERFORM pg_notify('scrum4me_changes', payload::text);
|
||||
RETURN NEW;
|
||||
END;
|
||||
$$ LANGUAGE plpgsql;
|
||||
|
||||
DROP TRIGGER IF EXISTS claude_questions_notify ON claude_questions;
|
||||
CREATE TRIGGER claude_questions_notify
|
||||
AFTER INSERT OR UPDATE ON claude_questions
|
||||
FOR EACH ROW EXECUTE FUNCTION notify_question_change();
|
||||
|
|
@ -66,6 +66,8 @@ model User {
|
|||
product_members ProductMember[]
|
||||
assigned_stories Story[] @relation("StoryAssignee")
|
||||
login_pairings LoginPairing[]
|
||||
asked_questions ClaudeQuestion[] @relation("ClaudeQuestionAsker")
|
||||
answered_questions ClaudeQuestion[] @relation("ClaudeQuestionAnswerer")
|
||||
|
||||
@@index([active_product_id])
|
||||
@@map("users")
|
||||
|
|
@ -112,6 +114,7 @@ model Product {
|
|||
todos Todo[]
|
||||
members ProductMember[]
|
||||
active_for_users User[] @relation("UserActiveProduct")
|
||||
claude_questions ClaudeQuestion[]
|
||||
|
||||
@@unique([user_id, name])
|
||||
@@unique([user_id, code])
|
||||
|
|
@ -158,6 +161,7 @@ model Story {
|
|||
updated_at DateTime @updatedAt
|
||||
logs StoryLog[]
|
||||
tasks Task[]
|
||||
claude_questions ClaudeQuestion[]
|
||||
|
||||
@@unique([product_id, code])
|
||||
@@index([pbi_id, priority, sort_order])
|
||||
|
|
@ -212,6 +216,7 @@ model Task {
|
|||
status TaskStatus @default(TO_DO)
|
||||
created_at DateTime @default(now())
|
||||
updated_at DateTime @updatedAt
|
||||
claude_questions ClaudeQuestion[]
|
||||
|
||||
@@index([story_id, priority, sort_order])
|
||||
@@index([sprint_id, status])
|
||||
|
|
@ -267,3 +272,29 @@ model LoginPairing {
|
|||
@@index([status, expires_at])
|
||||
@@map("login_pairings")
|
||||
}
|
||||
|
||||
model ClaudeQuestion {
|
||||
id String @id @default(cuid())
|
||||
story Story @relation(fields: [story_id], references: [id], onDelete: Cascade)
|
||||
story_id String
|
||||
task Task? @relation(fields: [task_id], references: [id], onDelete: SetNull)
|
||||
task_id String?
|
||||
product Product @relation(fields: [product_id], references: [id], onDelete: Cascade)
|
||||
product_id String // gedenormaliseerd uit story.product_id voor SSE-filter
|
||||
asker User @relation("ClaudeQuestionAsker", fields: [asked_by], references: [id])
|
||||
asked_by String // user_id van token-houder (= Claude-token)
|
||||
question String @db.Text
|
||||
options Json? // string[] voor multi-choice; null voor free-text
|
||||
status String // 'open' | 'answered' | 'cancelled' | 'expired'
|
||||
answer String? @db.Text
|
||||
answerer User? @relation("ClaudeQuestionAnswerer", fields: [answered_by], references: [id])
|
||||
answered_by String?
|
||||
answered_at DateTime?
|
||||
created_at DateTime @default(now())
|
||||
expires_at DateTime // ingesteld door MCP-tool, default now() + 24h
|
||||
|
||||
@@index([story_id, status])
|
||||
@@index([product_id, status])
|
||||
@@index([status, expires_at])
|
||||
@@map("claude_questions")
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@ const MILESTONE_PRIORITY: Record<string, 1 | 2 | 3 | 4> = {
|
|||
M8: 4,
|
||||
M9: 4,
|
||||
M10: 4,
|
||||
M11: 4,
|
||||
}
|
||||
|
||||
const MILESTONE_GOAL: Record<string, string> = {
|
||||
|
|
@ -61,6 +62,7 @@ const MILESTONE_GOAL: Record<string, string> = {
|
|||
M8: 'Realtime updates voor Solo Paneel',
|
||||
M9: 'Actief Product Backlog — persistent gekozen product',
|
||||
M10: 'Password-loze inlog via QR-pairing',
|
||||
M11: 'Vraag-antwoord-kanaal Claude ↔ user',
|
||||
}
|
||||
|
||||
const MILESTONE_SPRINT_STATUS: Record<string, ParsedMilestone['sprint_status']> = {
|
||||
|
|
@ -75,7 +77,8 @@ const MILESTONE_SPRINT_STATUS: Record<string, ParsedMilestone['sprint_status']>
|
|||
M7: 'COMPLETED',
|
||||
M8: 'COMPLETED',
|
||||
M9: 'COMPLETED',
|
||||
M10: 'ACTIVE',
|
||||
M10: 'COMPLETED',
|
||||
M11: 'COMPLETED',
|
||||
}
|
||||
|
||||
const MILESTONE_KEY = /^(?:M[\d.]+|PBI-\d+)$/
|
||||
|
|
|
|||
61
stores/notifications-store.ts
Normal file
61
stores/notifications-store.ts
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
// ST-1105: Zustand store voor het Claude vraag-antwoord-kanaal (M11).
|
||||
//
|
||||
// Houdt de huidige set van **open** vragen voor de ingelogde gebruiker bij —
|
||||
// gevoed door:
|
||||
// - Initial-state-event van /api/realtime/notifications (init)
|
||||
// - Realtime SSE-events op scrum4me_changes (upsert/remove)
|
||||
// - Server Action answerQuestion (optimistic remove via removeOptimistic)
|
||||
//
|
||||
// Eenvoudiger dan solo-store: geen drag-and-drop, geen view-transitions, geen
|
||||
// pending-ops om optimistic-echo te onderdrukken — antwoorden zijn discrete
|
||||
// acties en de stream kan met dubbele update-events leven.
|
||||
|
||||
import { create } from 'zustand'
|
||||
|
||||
export interface NotificationQuestion {
|
||||
id: string
|
||||
product_id: string
|
||||
story_id: string
|
||||
task_id: string | null
|
||||
story_code: string | null
|
||||
story_title: string
|
||||
assignee_id: string | null
|
||||
question: string
|
||||
options: string[] | null
|
||||
created_at: string
|
||||
expires_at: string
|
||||
}
|
||||
|
||||
interface NotificationsState {
|
||||
questions: NotificationQuestion[]
|
||||
init: (qs: NotificationQuestion[]) => void
|
||||
upsert: (q: NotificationQuestion) => void
|
||||
remove: (id: string) => void
|
||||
openCount: () => number
|
||||
forYouCount: (userId: string | null) => number
|
||||
}
|
||||
|
||||
export const useNotificationsStore = create<NotificationsState>((set, get) => ({
|
||||
questions: [],
|
||||
|
||||
init: (qs) => set({ questions: qs }),
|
||||
|
||||
upsert: (q) =>
|
||||
set((state) => {
|
||||
const idx = state.questions.findIndex((x) => x.id === q.id)
|
||||
if (idx === -1) return { questions: [q, ...state.questions] }
|
||||
const next = state.questions.slice()
|
||||
next[idx] = q
|
||||
return { questions: next }
|
||||
}),
|
||||
|
||||
remove: (id) =>
|
||||
set((state) => ({ questions: state.questions.filter((q) => q.id !== id) })),
|
||||
|
||||
openCount: () => get().questions.length,
|
||||
|
||||
forYouCount: (userId) => {
|
||||
if (!userId) return 0
|
||||
return get().questions.filter((q) => q.assignee_id === userId).length
|
||||
},
|
||||
}))
|
||||
9
vercel.json
Normal file
9
vercel.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"$schema": "https://openapi.vercel.sh/vercel.json",
|
||||
"crons": [
|
||||
{
|
||||
"path": "/api/cron/expire-questions",
|
||||
"schedule": "0 4 * * *"
|
||||
}
|
||||
]
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue