feat(P2+P3): IHF Phase 2 complete; register Phase 3 workplan

Phase 2 — Structured Feedback and Triage (IHUB-WP-0002): - Schema: annotation_threads, requirement_candidates, triage_states, reviewer_assignments; annotations extended with severity + thread_id - AnnotationThreadsController: create threads, assign annotations - RequirementCandidatesController: CRUD, escalation, triage lifecycle, reviewer assignment, my-queue - Annotation severity (low/medium/high/critical) with Tailwind color cues - TriageDashboardAction on HubsController with autoRefresh - Integration tests (T01–T09), SCOPE.md updated, docs/phase2-summary.md Phase 3 — Governance and Decision Linkage (IHUB-WP-0003): - Workplan registered: 9 tasks, State Hub workstream 5f201ee3 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-28 23:37:34 +00:00
parent cfcf4c81f7
commit 840b0e5c7b
25 changed files with 2136 additions and 29 deletions
--- a/Web/Controller/AnnotationThreads.hs
+++ b/Web/Controller/AnnotationThreads.hs
@@ -0,0 +1,65 @@
+module Web.Controller.AnnotationThreads where
+
+import Web.Types
+import Web.View.AnnotationThreads.Index
+import Web.View.AnnotationThreads.New
+import Web.View.AnnotationThreads.Show
+import Generated.Types
+import IHP.Prelude
+import IHP.ControllerPrelude
+
+instance Controller AnnotationThreadsController where
+    beforeAction = ensureIsUser
+
+    action WidgetAnnotationThreadsAction { widgetId } = do
+        widget  <- fetch widgetId
+        threads <- query @AnnotationThread
+            |> filterWhere (#widgetId, widgetId)
+            |> orderByDesc #createdAt
+            |> fetch
+        -- Fetch annotation counts per thread
+        allAnnotations <- query @Annotation
+            |> filterWhere (#widgetId, widgetId)
+            |> fetch
+        render IndexView { widget, threads, allAnnotations }
+
+    action ShowAnnotationThreadAction { annotationThreadId } = do
+        thread      <- fetch annotationThreadId
+        widget      <- fetch thread.widgetId
+        annotations <- query @Annotation
+            |> filterWhere (#threadId, Just annotationThreadId)
+            |> orderByAsc #createdAt
+            |> fetch
+        render ShowView { widget, thread, annotations }
+
+    action NewAnnotationThreadAction { widgetId } = do
+        widget <- fetch widgetId
+        let thread = newRecord @AnnotationThread
+        render NewView { widget, thread }
+
+    action CreateAnnotationThreadAction { widgetId } = do
+        widget <- fetch widgetId
+        mUser  <- currentUserOrNothing
+        let createdBy = fmap (.id) mUser
+
+        let thread = newRecord @AnnotationThread
+        thread
+            |> fill @'["title", "description"]
+            |> set #widgetId widgetId
+            |> set #createdBy (fmap (Id . unId) createdBy)
+            |> validateField #title nonEmpty
+            |> ifValid \case
+                Left thread  -> render NewView { widget, thread }
+                Right thread -> do
+                    createRecord thread
+                    setSuccessMessage "Thread created"
+                    redirectTo WidgetAnnotationThreadsAction { widgetId }
+
+    action AssignAnnotationToThreadAction { annotationId } = do
+        annotation <- fetch annotationId
+        threadId   <- param @(Id AnnotationThread) "threadId"
+        annotation
+            |> set #threadId (Just threadId)
+            |> updateRecord
+        setSuccessMessage "Annotation added to thread"
+        redirectTo ShowAnnotationThreadAction { annotationThreadId = threadId }
--- a/Web/Controller/Annotations.hs
+++ b/Web/Controller/Annotations.hs
@@ -3,6 +3,7 @@ module Web.Controller.Annotations where
 import Web.Types
 import Web.View.Annotations.Index
 import Web.View.Annotations.New
+import Web.View.Annotations.Show
 import Generated.Types
 import IHP.Prelude
 import IHP.ControllerPrelude
@@ -10,6 +11,9 @@ import IHP.ControllerPrelude
 validCategories :: [Text]
 validCategories = ["friction", "defect", "wish", "policy_concern", "doc_gap", "trust", "other"]

+validSeverities :: [Text]
+validSeverities = ["low", "medium", "high", "critical"]
+
 instance Controller AnnotationsController where
    beforeAction = ensureIsUser

@@ -21,6 +25,15 @@ instance Controller AnnotationsController where
            |> fetch
        render IndexView { widget, annotations }

+    action ShowAnnotationAction { annotationId } = do
+        annotation <- fetch annotationId
+        widget     <- fetch annotation.widgetId
+        -- Check if already escalated to a candidate
+        mCandidate <- query @RequirementCandidate
+            |> filterWhere (#sourceAnnotationId, Just annotationId)
+            |> fetchOneOrNothing
+        render ShowView { widget, annotation, mCandidate }
+
    action NewAnnotationAction { widgetId } = do
        widget <- fetch widgetId
        let annotation = newRecord @Annotation
@@ -34,15 +47,44 @@ instance Controller AnnotationsController where

        let annotation = newRecord @Annotation
        annotation
-            |> fill @'["body", "category", "parentId", "widgetStateRef"]
+            |> fill @'["body", "category", "severity", "parentId", "widgetStateRef"]
            |> set #widgetId  widgetId
            |> set #actorId   (fmap (Id . unId) actorId)
            |> set #actorType actorType
            |> validateField #body nonEmpty
            |> validateField #category (`elem` validCategories)
+            |> validateField #severity (`elem` validSeverities)
            |> ifValid \case
                Left annotation -> render NewView { widget, annotation }
                Right annotation -> do
                    createRecord annotation
                    setSuccessMessage "Annotation added"
                    redirectTo WidgetAnnotationsAction { widgetId }
+
+    action EscalateAnnotationAction { annotationId } = do
+        annotation <- fetch annotationId
+        mUser      <- currentUserOrNothing
+        let createdBy = fmap (.id) mUser
+        -- Idempotent: check if already escalated
+        existing <- query @RequirementCandidate
+            |> filterWhere (#sourceAnnotationId, Just annotationId)
+            |> fetchOneOrNothing
+        case existing of
+            Just candidate ->
+                redirectTo ShowRequirementCandidateAction { requirementCandidateId = candidate.id }
+            Nothing -> do
+                let titleText = truncate80 annotation.body
+                candidate <- newRecord @RequirementCandidate
+                    |> set #title titleText
+                    |> set #description annotation.body
+                    |> set #sourceWidgetId annotation.widgetId
+                    |> set #sourceAnnotationId (Just annotationId)
+                    |> set #category annotation.category
+                    |> set #status "open"
+                    |> set #createdBy (fmap (Id . unId) createdBy)
+                    |> createRecord
+                setSuccessMessage "Escalated to requirement candidate"
+                redirectTo ShowRequirementCandidateAction { requirementCandidateId = candidate.id }
+
+truncate80 :: Text -> Text
+truncate80 t = if length t > 80 then take 80 t <> "…" else t
--- a/Web/Controller/Hubs.hs
+++ b/Web/Controller/Hubs.hs
@@ -5,6 +5,7 @@ import Web.View.Hubs.Index
 import Web.View.Hubs.Show
 import Web.View.Hubs.New
 import Web.View.Hubs.Edit
+import Web.View.Hubs.TriageDashboard
 import Generated.Types
 import IHP.Prelude
 import IHP.ControllerPrelude
@@ -72,3 +73,40 @@ instance Controller HubsController where
        deleteRecord hub
        setSuccessMessage "Hub deleted"
        redirectTo HubsAction
+
+    action TriageDashboardAction { hubId } = autoRefresh do
+        hub     <- fetch hubId
+        widgets <- query @Widget
+            |> filterWhere (#hubId, hubId)
+            |> fetch
+        let widgetIds = map (.id) widgets
+
+        -- All candidates for this hub's widgets
+        allCandidates <- query @RequirementCandidate
+            |> filterWhereIn (#sourceWidgetId, widgetIds)
+            |> orderByAsc #createdAt
+            |> fetch
+
+        -- Triage queue: open candidates, oldest first
+        let triageQueue = filter (\c -> c.status == "open") allCandidates
+
+        -- Recent escalations: last 20
+        recentEscalations <- query @RequirementCandidate
+            |> filterWhereIn (#sourceWidgetId, widgetIds)
+            |> orderByDesc #createdAt
+            |> limit 20
+            |> fetch
+
+        -- All annotations for category breakdown
+        allAnnotations <- query @Annotation
+            |> filterWhereIn (#widgetId, widgetIds)
+            |> fetch
+
+        render TriageDashboardView
+            { hub
+            , widgets
+            , allCandidates
+            , triageQueue
+            , recentEscalations
+            , allAnnotations
+            }
--- a/Web/Controller/RequirementCandidates.hs
+++ b/Web/Controller/RequirementCandidates.hs
@@ -0,0 +1,180 @@
+module Web.Controller.RequirementCandidates where
+
+import Web.Types
+import Web.View.RequirementCandidates.Index
+import Web.View.RequirementCandidates.Show
+import Web.View.RequirementCandidates.New
+import Web.View.RequirementCandidates.Edit
+import Generated.Types
+import IHP.Prelude
+import IHP.ControllerPrelude
+
+validStatuses :: [Text]
+validStatuses = ["open", "in_review", "accepted", "rejected", "deferred"]
+
+validCategories :: [Text]
+validCategories = ["friction", "defect", "wish", "policy_concern", "doc_gap", "trust", "other"]
+
+-- Allowed triage transitions
+allowedTransition :: Text -> Text -> Bool
+allowedTransition "open"      "in_review" = True
+allowedTransition "in_review" "accepted"  = True
+allowedTransition "in_review" "rejected"  = True
+allowedTransition "in_review" "deferred"  = True
+allowedTransition "deferred"  "in_review" = True
+allowedTransition _           _           = False
+
+instance Controller RequirementCandidatesController where
+    beforeAction = ensureIsUser
+
+    action RequirementCandidatesAction = do
+        mStatusFilter <- paramOrNothing @Text "status"
+        candidates <- case mStatusFilter of
+            Nothing -> query @RequirementCandidate |> orderByDesc #createdAt |> fetch
+            Just s  -> query @RequirementCandidate
+                |> filterWhere (#status, s)
+                |> orderByDesc #createdAt
+                |> fetch
+        -- Fetch reviewer assignments for display
+        assignments <- query @ReviewerAssignment |> fetch
+        users       <- query @User |> fetch
+        widgets     <- query @Widget |> fetch
+        render IndexView { candidates, assignments, users, widgets, mStatusFilter }
+
+    action ShowRequirementCandidateAction { requirementCandidateId } = do
+        candidate   <- fetch requirementCandidateId
+        widget      <- fetch candidate.sourceWidgetId
+        triageStates <- query @TriageState
+            |> filterWhere (#candidateId, requirementCandidateId)
+            |> orderByAsc #changedAt
+            |> fetch
+        mAssignment <- query @ReviewerAssignment
+            |> filterWhere (#candidateId, requirementCandidateId)
+            |> fetchOneOrNothing
+        users       <- query @User |> fetch
+        mSourceAnnotation <- case candidate.sourceAnnotationId of
+            Nothing  -> pure Nothing
+            Just aid -> fetchOneOrNothing aid
+        mSourceThread <- case candidate.sourceThreadId of
+            Nothing  -> pure Nothing
+            Just tid -> fetchOneOrNothing tid
+        render ShowView { candidate, widget, triageStates, mAssignment, users, mSourceAnnotation, mSourceThread }
+
+    action NewRequirementCandidateAction = do
+        widgets <- query @Widget |> fetch
+        threads <- query @AnnotationThread |> fetch
+        let candidate = newRecord @RequirementCandidate
+        render NewView { candidate, widgets, threads }
+
+    action CreateRequirementCandidateAction = do
+        widgets <- query @Widget |> fetch
+        threads <- query @AnnotationThread |> fetch
+        mUser   <- currentUserOrNothing
+        let createdBy = fmap (.id) mUser
+
+        let candidate = newRecord @RequirementCandidate
+        candidate
+            |> fill @'["title", "description", "sourceWidgetId", "sourceThreadId", "category"]
+            |> set #status "open"
+            |> set #createdBy (fmap (Id . unId) createdBy)
+            |> validateField #title nonEmpty
+            |> validateField #description nonEmpty
+            |> validateField #category (`elem` validCategories)
+            |> ifValid \case
+                Left candidate -> render NewView { candidate, widgets, threads }
+                Right candidate -> do
+                    created <- createRecord candidate
+                    setSuccessMessage "Requirement candidate created"
+                    redirectTo ShowRequirementCandidateAction { requirementCandidateId = created.id }
+
+    action EditRequirementCandidateAction { requirementCandidateId } = do
+        candidate <- fetch requirementCandidateId
+        widgets   <- query @Widget |> fetch
+        threads   <- query @AnnotationThread |> fetch
+        render EditView { candidate, widgets, threads }
+
+    action UpdateRequirementCandidateAction { requirementCandidateId } = do
+        candidate <- fetch requirementCandidateId
+        widgets   <- query @Widget |> fetch
+        threads   <- query @AnnotationThread |> fetch
+
+        candidate
+            |> fill @'["title", "description", "sourceWidgetId", "sourceThreadId", "category"]
+            |> validateField #title nonEmpty
+            |> validateField #description nonEmpty
+            |> validateField #category (`elem` validCategories)
+            |> ifValid \case
+                Left candidate -> render EditView { candidate, widgets, threads }
+                Right candidate -> do
+                    updateRecord candidate
+                    setSuccessMessage "Candidate updated"
+                    redirectTo ShowRequirementCandidateAction { requirementCandidateId }
+
+    action UpdateTriageStatusAction { requirementCandidateId } = do
+        candidate <- fetch requirementCandidateId
+        newStatus <- param @Text "status"
+        notes     <- paramOrNothing @Text "notes"
+        mUser     <- currentUserOrNothing
+        let changedBy = fmap (.id) mUser
+
+        if allowedTransition candidate.status newStatus
+            then do
+                -- Insert triage state row (append-only audit trail)
+                newRecord @TriageState
+                    |> set #candidateId requirementCandidateId
+                    |> set #status newStatus
+                    |> set #notes notes
+                    |> set #changedBy (fmap (Id . unId) changedBy)
+                    |> createRecord
+                -- Update current status on candidate
+                candidate
+                    |> set #status newStatus
+                    |> updateRecord
+                setSuccessMessage ("Status updated to " <> newStatus)
+                redirectTo ShowRequirementCandidateAction { requirementCandidateId }
+            else do
+                setErrorMessage ("Invalid transition: " <> candidate.status <> " → " <> newStatus)
+                respondWith 422 do
+                    redirectTo ShowRequirementCandidateAction { requirementCandidateId }
+
+    action AssignReviewerAction { requirementCandidateId } = do
+        userId <- param @(Id User) "userId"
+        mUser  <- currentUserOrNothing
+        let assignedBy = fmap (.id) mUser
+
+        -- Upsert: delete existing assignment then insert
+        existing <- query @ReviewerAssignment
+            |> filterWhere (#candidateId, requirementCandidateId)
+            |> fetchOneOrNothing
+        case existing of
+            Just ra -> deleteRecord ra
+            Nothing -> pure ()
+
+        newRecord @ReviewerAssignment
+            |> set #candidateId requirementCandidateId
+            |> set #userId userId
+            |> set #assignedBy (fmap (Id . unId) assignedBy)
+            |> createRecord
+
+        setSuccessMessage "Reviewer assigned"
+        redirectTo ShowRequirementCandidateAction { requirementCandidateId }
+
+    action MyQueueAction = do
+        mUser <- currentUserOrNothing
+        case mUser of
+            Nothing -> redirectTo RequirementCandidatesAction
+            Just user -> do
+                assignments <- query @ReviewerAssignment
+                    |> filterWhere (#userId, user.id)
+                    |> fetch
+                let candidateIds = map (.candidateId) assignments
+                candidates <- mapM fetch candidateIds
+                let active = filter (\c -> c.status `elem` ["open", "in_review"]) candidates
+                widgets <- query @Widget |> fetch
+                render IndexView
+                    { candidates = active
+                    , assignments
+                    , users = [user]
+                    , widgets
+                    , mStatusFilter = Just "my_queue"
+                    }
--- a/Web/Routes.hs
+++ b/Web/Routes.hs
@@ -16,5 +16,11 @@ instance AutoRoute InteractionEventsController
 -- Annotations (scoped to widget: /widgets/:widgetId/annotations/)
 instance AutoRoute AnnotationsController

+-- Annotation Threads (scoped to widget)
+instance AutoRoute AnnotationThreadsController
+
+-- Requirement Candidates
+instance AutoRoute RequirementCandidatesController
+
 -- Sessions
 instance AutoRoute SessionsController
--- a/Web/Types.hs
+++ b/Web/Types.hs
@@ -18,11 +18,12 @@ data WebApplication = WebApplication deriving (Eq, Show)
 data HubsController
    = HubsAction
    | NewHubAction
-    | ShowHubAction     { hubId     :: !(Id Hub)    }
+    | ShowHubAction          { hubId :: !(Id Hub) }
    | CreateHubAction
-    | EditHubAction     { hubId     :: !(Id Hub)    }
-    | UpdateHubAction   { hubId     :: !(Id Hub)    }
-    | DeleteHubAction   { hubId     :: !(Id Hub)    }
+    | EditHubAction          { hubId :: !(Id Hub) }
+    | UpdateHubAction        { hubId :: !(Id Hub) }
+    | DeleteHubAction        { hubId :: !(Id Hub) }
+    | TriageDashboardAction  { hubId :: !(Id Hub) }
    deriving (Eq, Show, Data)

 data WidgetsController
@@ -39,9 +40,31 @@ data InteractionEventsController
    deriving (Eq, Show, Data)

 data AnnotationsController
-    = WidgetAnnotationsAction  { widgetId :: !(Id Widget) }
-    | NewAnnotationAction      { widgetId :: !(Id Widget) }
-    | CreateAnnotationAction   { widgetId :: !(Id Widget) }
+    = WidgetAnnotationsAction    { widgetId    :: !(Id Widget)     }
+    | ShowAnnotationAction       { annotationId :: !(Id Annotation) }
+    | NewAnnotationAction        { widgetId    :: !(Id Widget)     }
+    | CreateAnnotationAction     { widgetId    :: !(Id Widget)     }
+    | EscalateAnnotationAction   { annotationId :: !(Id Annotation) }
+    deriving (Eq, Show, Data)
+
+data AnnotationThreadsController
+    = WidgetAnnotationThreadsAction  { widgetId :: !(Id Widget)           }
+    | ShowAnnotationThreadAction     { annotationThreadId :: !(Id AnnotationThread) }
+    | NewAnnotationThreadAction      { widgetId :: !(Id Widget)           }
+    | CreateAnnotationThreadAction   { widgetId :: !(Id Widget)           }
+    | AssignAnnotationToThreadAction { annotationId :: !(Id Annotation)   }
+    deriving (Eq, Show, Data)
+
+data RequirementCandidatesController
+    = RequirementCandidatesAction
+    | ShowRequirementCandidateAction   { requirementCandidateId :: !(Id RequirementCandidate) }
+    | NewRequirementCandidateAction
+    | CreateRequirementCandidateAction
+    | EditRequirementCandidateAction   { requirementCandidateId :: !(Id RequirementCandidate) }
+    | UpdateRequirementCandidateAction { requirementCandidateId :: !(Id RequirementCandidate) }
+    | UpdateTriageStatusAction         { requirementCandidateId :: !(Id RequirementCandidate) }
+    | AssignReviewerAction             { requirementCandidateId :: !(Id RequirementCandidate) }
+    | MyQueueAction
    deriving (Eq, Show, Data)

 data SessionsController
--- a/Web/View/AnnotationThreads/Index.hs
+++ b/Web/View/AnnotationThreads/Index.hs
@@ -0,0 +1,92 @@
+module Web.View.AnnotationThreads.Index where
+
+import Web.Types
+import Generated.Types
+import IHP.Prelude
+import IHP.ViewPrelude
+
+data IndexView = IndexView
+    { widget         :: !Widget
+    , threads        :: ![AnnotationThread]
+    , allAnnotations :: ![Annotation]
+    }
+
+instance View IndexView where
+    html IndexView { .. } = [hsx|
+        <div class="mb-6 flex items-center gap-2 text-sm text-gray-500">
+            <a href={WidgetsAction} class="hover:text-gray-700">Widgets</a>
+            <span>/</span>
+            <a href={ShowWidgetAction { widgetId = widget.id }} class="hover:text-gray-700">{widget.name}</a>
+            <span>/</span>
+            <span>Threads</span>
+        </div>
+
+        <div class="flex items-center justify-between mb-4">
+            <h1 class="text-2xl font-semibold">Annotation Threads</h1>
+            <a href={NewAnnotationThreadAction { widgetId = widget.id }}
+               class="bg-indigo-600 text-white text-sm font-medium px-4 py-2 rounded hover:bg-indigo-700">
+                New Thread
+            </a>
+        </div>
+
+        {if null threads
+            then [hsx|<p class="text-sm text-gray-500">No threads yet.</p>|]
+            else [hsx|
+                <div class="space-y-3">
+                    {forEach threads (renderThreadRow allAnnotations)}
+                </div>
+            |]}
+    |]
+
+renderThreadRow :: [Annotation] -> AnnotationThread -> Html
+renderThreadRow allAnnotations t =
+    let members   = filter (\a -> a.threadId == Just t.id) allAnnotations
+        count     = length members
+        severityBreakdown = buildSeverityBreakdown members
+    in [hsx|
+    <div class="bg-white rounded-lg border border-gray-200 px-5 py-4">
+        <div class="flex items-start justify-between">
+            <div>
+                <a href={ShowAnnotationThreadAction { annotationThreadId = t.id }}
+                   class="font-medium text-indigo-600 hover:text-indigo-800">
+                    {t.title}
+                </a>
+                {maybe mempty (\d -> [hsx|<p class="text-sm text-gray-500 mt-1">{d}</p>|]) t.description}
+            </div>
+            <span class="text-xs text-gray-400 ml-4 whitespace-nowrap">{show t.createdAt}</span>
+        </div>
+        <div class="mt-3 flex items-center gap-3 text-xs text-gray-500">
+            <span>{show count} annotation(s)</span>
+            {renderSeverityBreakdown severityBreakdown}
+        </div>
+    </div>
+|]
+
+buildSeverityBreakdown :: [Annotation] -> [(Text, Int)]
+buildSeverityBreakdown annotations =
+    [ ("low",      length $ filter (\a -> a.severity == "low")      annotations)
+    , ("medium",   length $ filter (\a -> a.severity == "medium")   annotations)
+    , ("high",     length $ filter (\a -> a.severity == "high")     annotations)
+    , ("critical", length $ filter (\a -> a.severity == "critical") annotations)
+    ]
+
+renderSeverityBreakdown :: [(Text, Int)] -> Html
+renderSeverityBreakdown pairs = [hsx|
+    <span class="flex items-center gap-1">
+        {forEach (filter (\(_, n) -> n > 0) pairs) renderSeverityPip}
+    </span>
+|]
+
+renderSeverityPip :: (Text, Int) -> Html
+renderSeverityPip (sev, n) = [hsx|
+    <span class={severityClass sev <> " text-xs px-1.5 py-0.5 rounded"}>
+        {sev}: {show n}
+    </span>
+|]
+
+severityClass :: Text -> Text
+severityClass "low"      = "bg-gray-100 text-gray-500"
+severityClass "medium"   = "bg-blue-100 text-blue-700"
+severityClass "high"     = "bg-yellow-100 text-yellow-800"
+severityClass "critical" = "bg-red-100 text-red-800 font-semibold"
+severityClass _          = "bg-gray-100 text-gray-500"
--- a/Web/View/AnnotationThreads/New.hs
+++ b/Web/View/AnnotationThreads/New.hs
@@ -0,0 +1,33 @@
+module Web.View.AnnotationThreads.New where
+
+import Web.Types
+import Generated.Types
+import IHP.Prelude
+import IHP.ViewPrelude
+
+data NewView = NewView
+    { widget :: !Widget
+    , thread :: !AnnotationThread
+    }
+
+instance View NewView where
+    html NewView { .. } = [hsx|
+        <div class="mb-6 flex items-center gap-2 text-sm text-gray-500">
+            <a href={ShowWidgetAction { widgetId = widget.id }} class="hover:text-gray-700">{widget.name}</a>
+            <span>/</span>
+            <a href={WidgetAnnotationThreadsAction { widgetId = widget.id }} class="hover:text-gray-700">Threads</a>
+            <span>/</span>
+            <span>New</span>
+        </div>
+        <div class="max-w-lg">
+            <h1 class="text-2xl font-semibold mb-6">New Annotation Thread</h1>
+            {renderForm thread widget.id}
+        </div>
+    |]
+
+renderForm :: AnnotationThread -> Id Widget -> Html
+renderForm thread widgetId = formFor thread [hsx|
+    {(textField #title) { fieldLabel = "Title" }}
+    {(textareaField #description) { fieldLabel = "Description (optional)" }}
+    {submitButton}
+|]
--- a/Web/View/AnnotationThreads/Show.hs
+++ b/Web/View/AnnotationThreads/Show.hs
@@ -0,0 +1,96 @@
+module Web.View.AnnotationThreads.Show where
+
+import Web.Types
+import Generated.Types
+import IHP.Prelude
+import IHP.ViewPrelude
+
+data ShowView = ShowView
+    { widget      :: !Widget
+    , thread      :: !AnnotationThread
+    , annotations :: ![Annotation]
+    }
+
+instance View ShowView where
+    html ShowView { .. } = [hsx|
+        <div class="mb-6 flex items-center gap-2 text-sm text-gray-500">
+            <a href={ShowWidgetAction { widgetId = widget.id }} class="hover:text-gray-700">{widget.name}</a>
+            <span>/</span>
+            <a href={WidgetAnnotationThreadsAction { widgetId = widget.id }} class="hover:text-gray-700">Threads</a>
+            <span>/</span>
+            <span>{thread.title}</span>
+        </div>
+
+        <div class="max-w-2xl">
+            <div class="mb-6">
+                <h1 class="text-2xl font-semibold">{thread.title}</h1>
+                {maybe mempty (\d -> [hsx|<p class="text-sm text-gray-500 mt-1">{d}</p>|]) thread.description}
+            </div>
+
+            <div class="mb-4 flex items-center gap-3">
+                {renderSeverityBar annotations}
+                <span class="text-xs text-gray-500">{dominantCategoryBadge annotations}</span>
+            </div>
+
+            <div class="space-y-3">
+                {forEach annotations renderAnnotationCard}
+            </div>
+        </div>
+    |]
+
+renderAnnotationCard :: Annotation -> Html
+renderAnnotationCard a = [hsx|
+    <div class="bg-white rounded-lg border border-gray-200 px-4 py-3">
+        <div class="flex items-center gap-2 mb-2">
+            <span class="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">{a.category}</span>
+            <span class={severityClass a.severity <> " text-xs px-2 py-0.5 rounded"}>
+                {a.severity}
+            </span>
+        </div>
+        <p class="text-sm text-gray-700">{a.body}</p>
+    </div>
+|]
+
+renderSeverityBar :: [Annotation] -> Html
+renderSeverityBar annotations =
+    let total    = length annotations
+        counts   = map (\s -> (s, length $ filter (\a -> a.severity == s) annotations))
+                       ["critical", "high", "medium", "low"]
+        nonZero  = filter (\(_, n) -> n > 0) counts
+    in if total == 0
+        then mempty
+        else [hsx|
+            <div class="flex items-center gap-1">
+                {forEach nonZero (\(s, n) -> renderBarSegment s n total)}
+            </div>
+        |]
+
+renderBarSegment :: Text -> Int -> Int -> Html
+renderBarSegment sev n total =
+    let pct = (n * 100) `div` total
+    in [hsx|
+    <div class={barColor sev <> " h-2 rounded"} style={"width: " <> show pct <> "px"} title={sev <> ": " <> show n}>
+    </div>
+|]
+
+barColor :: Text -> Text
+barColor "low"      = "bg-gray-300"
+barColor "medium"   = "bg-blue-400"
+barColor "high"     = "bg-yellow-400"
+barColor "critical" = "bg-red-500"
+barColor _          = "bg-gray-300"
+
+dominantCategoryBadge :: [Annotation] -> Text
+dominantCategoryBadge [] = ""
+dominantCategoryBadge annotations =
+    let cats  = map (.category) annotations
+        tally = map (\c -> (c, length $ filter (== c) cats)) (nub cats)
+        best  = foldl1 (\(c1, n1) (c2, n2) -> if n2 > n1 then (c2, n2) else (c1, n1)) tally
+    in fst best
+
+severityClass :: Text -> Text
+severityClass "low"      = "bg-gray-100 text-gray-500"
+severityClass "medium"   = "bg-blue-100 text-blue-700"
+severityClass "high"     = "bg-yellow-100 text-yellow-800"
+severityClass "critical" = "bg-red-100 text-red-800 font-semibold"
+severityClass _          = "bg-gray-100 text-gray-500"
--- a/Web/View/Annotations/Index.hs
+++ b/Web/View/Annotations/Index.hs
@@ -43,6 +43,9 @@ renderAnnotation childrenOf a = [hsx|
            <span class="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded font-medium">
                {a.category}
            </span>
+            <span class={severityClass a.severity}>
+                {a.severity}
+            </span>
            <span class="text-xs text-gray-400">{a.actorType}</span>
            {if isJust a.retractedAt
                then [hsx|<span class="text-xs text-red-400 italic">retracted</span>|]
@@ -53,9 +56,18 @@ renderAnnotation childrenOf a = [hsx|
        <div class="mt-2 flex gap-2">
            <a href={NewAnnotationAction { widgetId = a.widgetId }}
               class="text-xs text-indigo-500 hover:text-indigo-700">Reply</a>
+            <a href={ShowAnnotationAction { annotationId = a.id }}
+               class="text-xs text-gray-400 hover:text-gray-600">Details / Escalate</a>
        </div>
        <div class="ml-6 mt-3 space-y-3">
            {forEach (childrenOf a) (renderAnnotation childrenOf)}
        </div>
    </div>
 |]
+
+severityClass :: Text -> Text
+severityClass "low"      = "text-xs px-2 py-0.5 rounded bg-gray-100 text-gray-500"
+severityClass "medium"   = "text-xs px-2 py-0.5 rounded bg-blue-100 text-blue-700"
+severityClass "high"     = "text-xs px-2 py-0.5 rounded bg-yellow-100 text-yellow-800"
+severityClass "critical" = "text-xs px-2 py-0.5 rounded bg-red-100 text-red-800 font-semibold"
+severityClass _          = "text-xs px-2 py-0.5 rounded bg-gray-100 text-gray-500"
--- a/Web/View/Annotations/New.hs
+++ b/Web/View/Annotations/New.hs
@@ -29,16 +29,25 @@ renderForm :: Annotation -> Id Widget -> Html
 renderForm annotation widgetId = formFor annotation [hsx|
    {(textareaField #body) { fieldLabel = "Comment" }}
    {selectField #category categoryOptions}
+    {selectField #severity severityOptions}
    {submitButton}
 |]

 categoryOptions :: [(Text, Text)]
 categoryOptions =
-    [ ("Friction",        "friction")
-    , ("Defect",          "defect")
-    , ("Wish",            "wish")
-    , ("Policy Concern",  "policy_concern")
+    [ ("Friction",          "friction")
+    , ("Defect",            "defect")
+    , ("Wish",              "wish")
+    , ("Policy Concern",    "policy_concern")
    , ("Documentation Gap", "doc_gap")
-    , ("Trust",           "trust")
-    , ("Other",           "other")
+    , ("Trust",             "trust")
+    , ("Other",             "other")
+    ]
+
+severityOptions :: [(Text, Text)]
+severityOptions =
+    [ ("Low",      "low")
+    , ("Medium",   "medium")
+    , ("High",     "high")
+    , ("Critical", "critical")
    ]
--- a/Web/View/Annotations/Show.hs
+++ b/Web/View/Annotations/Show.hs
@@ -0,0 +1,85 @@
+module Web.View.Annotations.Show where
+
+import Web.Types
+import Generated.Types
+import IHP.Prelude
+import IHP.ViewPrelude
+
+data ShowView = ShowView
+    { widget     :: !Widget
+    , annotation :: !Annotation
+    , mCandidate :: !(Maybe RequirementCandidate)
+    }
+
+instance View ShowView where
+    html ShowView { .. } = [hsx|
+        <div class="mb-6 flex items-center gap-2 text-sm text-gray-500">
+            <a href={WidgetsAction} class="hover:text-gray-700">Widgets</a>
+            <span>/</span>
+            <a href={ShowWidgetAction { widgetId = widget.id }} class="hover:text-gray-700">{widget.name}</a>
+            <span>/</span>
+            <a href={WidgetAnnotationsAction { widgetId = widget.id }} class="hover:text-gray-700">Annotations</a>
+            <span>/</span>
+            <span>Detail</span>
+        </div>
+
+        <div class="max-w-2xl">
+            <div class="bg-white rounded-lg border border-gray-200 px-6 py-5 mb-4">
+                <div class="flex items-center gap-2 mb-3">
+                    <span class="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded font-medium">
+                        {annotation.category}
+                    </span>
+                    <span class={severityClass annotation.severity}>
+                        {annotation.severity}
+                    </span>
+                    {if isJust annotation.retractedAt
+                        then [hsx|<span class="text-xs text-red-400 italic">retracted</span>|]
+                        else mempty}
+                    <span class="ml-auto text-xs text-gray-400">{show annotation.createdAt}</span>
+                </div>
+                <p class="text-sm text-gray-800 leading-relaxed">{annotation.body}</p>
+            </div>
+
+            <div class="bg-gray-50 rounded-lg border border-gray-200 px-6 py-4">
+                <h2 class="text-sm font-semibold text-gray-700 mb-3">Escalation</h2>
+                {renderEscalation annotation mCandidate}
+            </div>
+        </div>
+    |]
+
+renderEscalation :: Annotation -> Maybe RequirementCandidate -> Html
+renderEscalation annotation Nothing = [hsx|
+    <p class="text-sm text-gray-500 mb-3">This annotation has not been escalated yet.</p>
+    <form method="POST" action={EscalateAnnotationAction { annotationId = annotation.id }}>
+        {hiddenField "authenticity_token"}
+        <button type="submit"
+                class="text-sm bg-amber-600 text-white px-4 py-2 rounded hover:bg-amber-700">
+            Escalate to Requirement Candidate
+        </button>
+    </form>
+|]
+renderEscalation _ (Just candidate) = [hsx|
+    <p class="text-sm text-gray-600 mb-2">Escalated to:</p>
+    <a href={ShowRequirementCandidateAction { requirementCandidateId = candidate.id }}
+       class="text-sm text-indigo-600 hover:text-indigo-800 font-medium">
+        {candidate.title} →
+    </a>
+    <span class={candidateStatusClass candidate.status <> " ml-3 text-xs px-2 py-0.5 rounded"}>
+        {candidate.status}
+    </span>
+|]
+
+severityClass :: Text -> Text
+severityClass "low"      = "text-xs px-2 py-0.5 rounded bg-gray-100 text-gray-500"
+severityClass "medium"   = "text-xs px-2 py-0.5 rounded bg-blue-100 text-blue-700"
+severityClass "high"     = "text-xs px-2 py-0.5 rounded bg-yellow-100 text-yellow-800"
+severityClass "critical" = "text-xs px-2 py-0.5 rounded bg-red-100 text-red-800 font-semibold"
+severityClass _          = "text-xs px-2 py-0.5 rounded bg-gray-100 text-gray-500"
+
+candidateStatusClass :: Text -> Text
+candidateStatusClass "open"      = "bg-blue-100 text-blue-700"
+candidateStatusClass "in_review" = "bg-yellow-100 text-yellow-800"
+candidateStatusClass "accepted"  = "bg-green-100 text-green-800"
+candidateStatusClass "rejected"  = "bg-red-100 text-red-800"
+candidateStatusClass "deferred"  = "bg-gray-100 text-gray-600"
+candidateStatusClass _           = "bg-gray-100 text-gray-600"
--- a/Web/View/Hubs/Show.hs
+++ b/Web/View/Hubs/Show.hs
@@ -29,6 +29,10 @@ instance View ShowView where
                    </p>
                </div>
                <div class="flex gap-2">
+                    <a href={TriageDashboardAction { hubId = hub.id }}
+                       class="text-sm border border-indigo-300 text-indigo-700 px-3 py-1.5 rounded hover:bg-indigo-50">
+                        Triage Dashboard
+                    </a>
                    <a href={EditHubAction { hubId = hub.id }}
                       class="text-sm border border-gray-300 px-3 py-1.5 rounded hover:bg-gray-50">
                        Edit
--- a/Web/View/Hubs/TriageDashboard.hs
+++ b/Web/View/Hubs/TriageDashboard.hs
@@ -0,0 +1,158 @@
+module Web.View.Hubs.TriageDashboard where
+
+import Web.Types
+import Generated.Types
+import IHP.Prelude
+import IHP.ViewPrelude
+
+data TriageDashboardView = TriageDashboardView
+    { hub               :: !Hub
+    , widgets           :: ![Widget]
+    , allCandidates     :: ![RequirementCandidate]
+    , triageQueue       :: ![RequirementCandidate]
+    , recentEscalations :: ![RequirementCandidate]
+    , allAnnotations    :: ![Annotation]
+    }
+
+instance View TriageDashboardView where
+    html TriageDashboardView { .. } = [hsx|
+        {autoRefreshMeta}
+        <div class="mb-6 flex items-center gap-2 text-sm text-gray-500">
+            <a href={HubsAction} class="hover:text-gray-700">Hubs</a>
+            <span>/</span>
+            <a href={ShowHubAction { hubId = hub.id }} class="hover:text-gray-700">{hub.name}</a>
+            <span>/</span>
+            <span>Triage Dashboard</span>
+        </div>
+
+        <div class="flex items-center justify-between mb-6">
+            <h1 class="text-2xl font-semibold">Triage Dashboard — {hub.name}</h1>
+            <a href={RequirementCandidatesAction}
+               class="text-sm border border-gray-300 px-3 py-1.5 rounded hover:bg-gray-50">
+                All Candidates
+            </a>
+        </div>
+
+        <!-- KPI row -->
+        <div class="grid grid-cols-5 gap-3 mb-8">
+            {renderKpi "Open" "open" allCandidates "bg-blue-50 border-blue-200 text-blue-800"}
+            {renderKpi "In Review" "in_review" allCandidates "bg-yellow-50 border-yellow-200 text-yellow-800"}
+            {renderKpi "Accepted" "accepted" allCandidates "bg-green-50 border-green-200 text-green-800"}
+            {renderKpi "Rejected" "rejected" allCandidates "bg-red-50 border-red-200 text-red-800"}
+            {renderKpi "Deferred" "deferred" allCandidates "bg-gray-50 border-gray-200 text-gray-700"}
+        </div>
+
+        <div class="grid grid-cols-2 gap-6 mb-8">
+            <!-- Triage queue -->
+            <section>
+                <h2 class="text-lg font-medium mb-3">Triage Queue (Open)</h2>
+                {if null triageQueue
+                    then [hsx|<p class="text-sm text-gray-400">Queue empty.</p>|]
+                    else [hsx|
+                        <div class="space-y-2">
+                            {forEach triageQueue (renderQueueItem widgets)}
+                        </div>
+                    |]}
+            </section>
+
+            <!-- Recent escalations -->
+            <section>
+                <h2 class="text-lg font-medium mb-3">Recent Escalations</h2>
+                {if null recentEscalations
+                    then [hsx|<p class="text-sm text-gray-400">No escalations yet.</p>|]
+                    else [hsx|
+                        <div class="space-y-2">
+                            {forEach recentEscalations (renderEscalationItem widgets)}
+                        </div>
+                    |]}
+            </section>
+        </div>
+
+        <!-- Category breakdown -->
+        <section>
+            <h2 class="text-lg font-medium mb-3">Annotation Category Breakdown</h2>
+            {renderCategoryBreakdown allAnnotations}
+        </section>
+    |]
+
+renderKpi :: Text -> Text -> [RequirementCandidate] -> Text -> Html
+renderKpi label status candidates colorClass =
+    let n = length $ filter (\c -> c.status == status) candidates
+    in [hsx|
+    <div class={"rounded-lg border p-4 " <> colorClass}>
+        <p class="text-xs font-medium uppercase tracking-wide opacity-70">{label}</p>
+        <p class="text-3xl font-semibold mt-1">{show n}</p>
+    </div>
+|]
+
+renderQueueItem :: [Widget] -> RequirementCandidate -> Html
+renderQueueItem widgets c =
+    let mWidget = find (\w -> w.id == c.sourceWidgetId) widgets
+        age = show c.createdAt
+    in [hsx|
+    <div class="bg-white rounded border border-gray-200 px-4 py-3">
+        <div class="flex items-start justify-between gap-2">
+            <a href={ShowRequirementCandidateAction { requirementCandidateId = c.id }}
+               class="text-sm font-medium text-indigo-600 hover:text-indigo-800 leading-snug">
+                {c.title}
+            </a>
+            <span class="text-xs text-gray-400 whitespace-nowrap shrink-0">{age}</span>
+        </div>
+        <div class="mt-1 flex gap-2 text-xs text-gray-500">
+            <span>{maybe "—" (.name) mWidget}</span>
+            <span class="text-gray-300">·</span>
+            <span class="bg-gray-100 px-1.5 rounded">{c.category}</span>
+        </div>
+    </div>
+|]
+
+renderEscalationItem :: [Widget] -> RequirementCandidate -> Html
+renderEscalationItem widgets c =
+    let mWidget = find (\w -> w.id == c.sourceWidgetId) widgets
+    in [hsx|
+    <div class="bg-white rounded border border-gray-200 px-4 py-3">
+        <div class="flex items-center gap-2 mb-1">
+            <span class={statusClass c.status <> " text-xs px-2 py-0.5 rounded"}>{c.status}</span>
+            <span class="text-xs text-gray-500">{maybe "—" (.name) mWidget}</span>
+        </div>
+        <a href={ShowRequirementCandidateAction { requirementCandidateId = c.id }}
+           class="text-sm text-indigo-600 hover:text-indigo-800">{c.title}</a>
+    </div>
+|]
+
+renderCategoryBreakdown :: [Annotation] -> Html
+renderCategoryBreakdown annotations =
+    let categories = ["friction", "defect", "wish", "policy_concern", "doc_gap", "trust", "other"]
+        counts = map (\cat -> (cat, length $ filter (\a -> a.category == cat) annotations)) categories
+        nonZero = filter (\(_, n) -> n > 0) counts
+        total = length annotations
+    in if total == 0
+        then [hsx|<p class="text-sm text-gray-400">No annotations yet.</p>|]
+        else [hsx|
+            <div class="bg-white rounded-lg border border-gray-200 p-4">
+                <div class="space-y-2">
+                    {forEach nonZero (renderCategoryBar total)}
+                </div>
+            </div>
+        |]
+
+renderCategoryBar :: Int -> (Text, Int) -> Html
+renderCategoryBar total (cat, n) =
+    let pct = if total > 0 then (n * 100) `div` total else 0
+    in [hsx|
+    <div class="flex items-center gap-3 text-sm">
+        <span class="w-32 text-gray-600 text-xs">{cat}</span>
+        <div class="flex-1 bg-gray-100 rounded-full h-2">
+            <div class="bg-indigo-500 h-2 rounded-full" style={"width: " <> show pct <> "%"}></div>
+        </div>
+        <span class="w-8 text-right text-xs text-gray-500">{show n}</span>
+    </div>
+|]
+
+statusClass :: Text -> Text
+statusClass "open"      = "bg-blue-100 text-blue-700"
+statusClass "in_review" = "bg-yellow-100 text-yellow-800"
+statusClass "accepted"  = "bg-green-100 text-green-800"
+statusClass "rejected"  = "bg-red-100 text-red-800"
+statusClass "deferred"  = "bg-gray-100 text-gray-600"
+statusClass _           = "bg-gray-100 text-gray-600"
--- a/Web/View/RequirementCandidates/Edit.hs
+++ b/Web/View/RequirementCandidates/Edit.hs
@@ -0,0 +1,55 @@
+module Web.View.RequirementCandidates.Edit where
+
+import Web.Types
+import Generated.Types
+import IHP.Prelude
+import IHP.ViewPrelude
+
+data EditView = EditView
+    { candidate :: !RequirementCandidate
+    , widgets   :: ![Widget]
+    , threads   :: ![AnnotationThread]
+    }
+
+instance View EditView where
+    html EditView { .. } = [hsx|
+        <div class="mb-6 flex items-center gap-2 text-sm text-gray-500">
+            <a href={RequirementCandidatesAction} class="hover:text-gray-700">Candidates</a>
+            <span>/</span>
+            <a href={ShowRequirementCandidateAction { requirementCandidateId = candidate.id }}
+               class="hover:text-gray-700">{candidate.title}</a>
+            <span>/</span>
+            <span>Edit</span>
+        </div>
+        <div class="max-w-lg">
+            <h1 class="text-2xl font-semibold mb-6">Edit Candidate</h1>
+            {renderForm candidate widgets threads}
+        </div>
+    |]
+
+renderForm :: RequirementCandidate -> [Widget] -> [AnnotationThread] -> Html
+renderForm candidate widgets threads = formFor candidate [hsx|
+    {(textField #title) { fieldLabel = "Title" }}
+    {(textareaField #description) { fieldLabel = "Description" }}
+    {selectField #sourceWidgetId (widgetOptions widgets)}
+    {selectField #sourceThreadId (threadOptions threads)}
+    {selectField #category categoryOptions}
+    {submitButton}
+|]
+
+widgetOptions :: [Widget] -> [(Text, Text)]
+widgetOptions = map (\w -> (w.name, show w.id))
+
+threadOptions :: [AnnotationThread] -> [(Text, Text)]
+threadOptions threads = ("None", "") : map (\t -> (t.title, show t.id)) threads
+
+categoryOptions :: [(Text, Text)]
+categoryOptions =
+    [ ("Friction",          "friction")
+    , ("Defect",            "defect")
+    , ("Wish",              "wish")
+    , ("Policy Concern",    "policy_concern")
+    , ("Documentation Gap", "doc_gap")
+    , ("Trust",             "trust")
+    , ("Other",             "other")
+    ]
--- a/Web/View/RequirementCandidates/Index.hs
+++ b/Web/View/RequirementCandidates/Index.hs
@@ -0,0 +1,116 @@
+module Web.View.RequirementCandidates.Index where
+
+import Web.Types
+import Generated.Types
+import IHP.Prelude
+import IHP.ViewPrelude
+
+data IndexView = IndexView
+    { candidates    :: ![RequirementCandidate]
+    , assignments   :: ![ReviewerAssignment]
+    , users         :: ![User]
+    , widgets       :: ![Widget]
+    , mStatusFilter :: !(Maybe Text)
+    }
+
+instance View IndexView where
+    html IndexView { .. } = [hsx|
+        <div class="flex items-center justify-between mb-6">
+            <h1 class="text-2xl font-semibold">Requirement Candidates</h1>
+            <div class="flex gap-2">
+                <a href={MyQueueAction}
+                   class="text-sm border border-gray-300 px-3 py-1.5 rounded hover:bg-gray-50">
+                    My Queue
+                </a>
+                <a href={NewRequirementCandidateAction}
+                   class="bg-indigo-600 text-white text-sm font-medium px-4 py-2 rounded hover:bg-indigo-700">
+                    New Candidate
+                </a>
+            </div>
+        </div>
+
+        <div class="flex gap-2 mb-4 flex-wrap">
+            {renderFilterPills mStatusFilter}
+        </div>
+
+        {if null candidates
+            then [hsx|<p class="text-sm text-gray-500">No candidates found.</p>|]
+            else [hsx|
+                <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
+                    <table class="w-full text-sm">
+                        <thead class="bg-gray-50 border-b border-gray-200">
+                            <tr>
+                                <th class="text-left px-4 py-3 font-medium text-gray-700">Title</th>
+                                <th class="text-left px-4 py-3 font-medium text-gray-700">Widget</th>
+                                <th class="text-left px-4 py-3 font-medium text-gray-700">Category</th>
+                                <th class="text-left px-4 py-3 font-medium text-gray-700">Status</th>
+                                <th class="text-left px-4 py-3 font-medium text-gray-700">Reviewer</th>
+                                <th class="text-left px-4 py-3 font-medium text-gray-700">Created</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {forEach candidates (renderRow assignments users widgets)}
+                        </tbody>
+                    </table>
+                </div>
+            |]}
+    |]
+
+renderFilterPills :: Maybe Text -> Html
+renderFilterPills current = [hsx|
+    {renderPill Nothing current "All"}
+    {renderPill (Just "open") current "Open"}
+    {renderPill (Just "in_review") current "In Review"}
+    {renderPill (Just "accepted") current "Accepted"}
+    {renderPill (Just "rejected") current "Rejected"}
+    {renderPill (Just "deferred") current "Deferred"}
+|]
+
+renderPill :: Maybe Text -> Maybe Text -> Text -> Html
+renderPill target current label =
+    let isActive = target == current
+        baseClass = "text-xs px-3 py-1.5 rounded-full border "
+        cls = if isActive
+                then baseClass <> "bg-indigo-600 text-white border-indigo-600"
+                else baseClass <> "border-gray-300 text-gray-600 hover:bg-gray-50"
+        url = case target of
+            Nothing -> pathTo RequirementCandidatesAction
+            Just s  -> pathTo RequirementCandidatesAction <> "?status=" <> s
+    in [hsx|<a href={url} class={cls}>{label}</a>|]
+
+renderRow :: [ReviewerAssignment] -> [User] -> [Widget] -> RequirementCandidate -> Html
+renderRow assignments users widgets c =
+    let mAssignment = find (\ra -> ra.candidateId == c.id) assignments
+        mReviewer   = mAssignment >>= \ra -> find (\u -> u.id == ra.userId) users
+        mWidget     = find (\w -> w.id == c.sourceWidgetId) widgets
+    in [hsx|
+    <tr class="border-b border-gray-100 hover:bg-gray-50">
+        <td class="px-4 py-3">
+            <a href={ShowRequirementCandidateAction { requirementCandidateId = c.id }}
+               class="font-medium text-indigo-600 hover:text-indigo-800">
+                {c.title}
+            </a>
+        </td>
+        <td class="px-4 py-3 text-gray-500 text-xs">
+            {maybe "—" (.name) mWidget}
+        </td>
+        <td class="px-4 py-3">
+            <span class="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">{c.category}</span>
+        </td>
+        <td class="px-4 py-3">
+            <span class={statusClass c.status <> " text-xs px-2 py-0.5 rounded"}>{c.status}</span>
+        </td>
+        <td class="px-4 py-3 text-gray-500 text-xs">
+            {maybe "Unassigned" (.name) mReviewer}
+        </td>
+        <td class="px-4 py-3 text-gray-400 text-xs">{show c.createdAt}</td>
+    </tr>
+|]
+
+statusClass :: Text -> Text
+statusClass "open"      = "bg-blue-100 text-blue-700"
+statusClass "in_review" = "bg-yellow-100 text-yellow-800"
+statusClass "accepted"  = "bg-green-100 text-green-800"
+statusClass "rejected"  = "bg-red-100 text-red-800"
+statusClass "deferred"  = "bg-gray-100 text-gray-600"
+statusClass _           = "bg-gray-100 text-gray-600"
--- a/Web/View/RequirementCandidates/New.hs
+++ b/Web/View/RequirementCandidates/New.hs
@@ -0,0 +1,52 @@
+module Web.View.RequirementCandidates.New where
+
+import Web.Types
+import Generated.Types
+import IHP.Prelude
+import IHP.ViewPrelude
+
+data NewView = NewView
+    { candidate :: !RequirementCandidate
+    , widgets   :: ![Widget]
+    , threads   :: ![AnnotationThread]
+    }
+
+instance View NewView where
+    html NewView { .. } = [hsx|
+        <div class="mb-6 flex items-center gap-2 text-sm text-gray-500">
+            <a href={RequirementCandidatesAction} class="hover:text-gray-700">Candidates</a>
+            <span>/</span>
+            <span>New</span>
+        </div>
+        <div class="max-w-lg">
+            <h1 class="text-2xl font-semibold mb-6">New Requirement Candidate</h1>
+            {renderForm candidate widgets threads}
+        </div>
+    |]
+
+renderForm :: RequirementCandidate -> [Widget] -> [AnnotationThread] -> Html
+renderForm candidate widgets threads = formFor candidate [hsx|
+    {(textField #title) { fieldLabel = "Title" }}
+    {(textareaField #description) { fieldLabel = "Description" }}
+    {selectField #sourceWidgetId (widgetOptions widgets)}
+    {selectField #sourceThreadId (threadOptions threads)}
+    {selectField #category categoryOptions}
+    {submitButton}
+|]
+
+widgetOptions :: [Widget] -> [(Text, Text)]
+widgetOptions = map (\w -> (w.name, show w.id))
+
+threadOptions :: [AnnotationThread] -> [(Text, Text)]
+threadOptions threads = ("None", "") : map (\t -> (t.title, show t.id)) threads
+
+categoryOptions :: [(Text, Text)]
+categoryOptions =
+    [ ("Friction",          "friction")
+    , ("Defect",            "defect")
+    , ("Wish",              "wish")
+    , ("Policy Concern",    "policy_concern")
+    , ("Documentation Gap", "doc_gap")
+    , ("Trust",             "trust")
+    , ("Other",             "other")
+    ]
--- a/Web/View/RequirementCandidates/Show.hs
+++ b/Web/View/RequirementCandidates/Show.hs
@@ -0,0 +1,176 @@
+module Web.View.RequirementCandidates.Show where
+
+import Web.Types
+import Generated.Types
+import IHP.Prelude
+import IHP.ViewPrelude
+
+data ShowView = ShowView
+    { candidate        :: !RequirementCandidate
+    , widget           :: !Widget
+    , triageStates     :: ![TriageState]
+    , mAssignment      :: !(Maybe ReviewerAssignment)
+    , users            :: ![User]
+    , mSourceAnnotation :: !(Maybe Annotation)
+    , mSourceThread    :: !(Maybe AnnotationThread)
+    }
+
+instance View ShowView where
+    html ShowView { .. } = [hsx|
+        <div class="mb-6 flex items-center gap-2 text-sm text-gray-500">
+            <a href={RequirementCandidatesAction} class="hover:text-gray-700">Candidates</a>
+            <span>/</span>
+            <span>{candidate.title}</span>
+        </div>
+
+        <div class="max-w-3xl space-y-6">
+            <!-- Header card -->
+            <div class="bg-white rounded-lg border border-gray-200 px-6 py-5">
+                <div class="flex items-start justify-between mb-3">
+                    <h1 class="text-2xl font-semibold">{candidate.title}</h1>
+                    <div class="flex gap-2 ml-4">
+                        <a href={EditRequirementCandidateAction { requirementCandidateId = candidate.id }}
+                           class="text-sm border border-gray-300 px-3 py-1.5 rounded hover:bg-gray-50">
+                            Edit
+                        </a>
+                    </div>
+                </div>
+                <div class="flex items-center gap-2 mb-3">
+                    <span class={statusClass candidate.status <> " text-xs px-2 py-0.5 rounded font-medium"}>
+                        {candidate.status}
+                    </span>
+                    <span class="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">
+                        {candidate.category}
+                    </span>
+                    <span class="text-xs text-gray-400">
+                        Widget: {widget.name}
+                    </span>
+                </div>
+                <p class="text-sm text-gray-700 leading-relaxed">{candidate.description}</p>
+            </div>
+
+            <!-- Source -->
+            <div class="bg-white rounded-lg border border-gray-200 px-6 py-4">
+                <h2 class="text-sm font-semibold text-gray-700 mb-3">Source</h2>
+                {renderSource mSourceAnnotation mSourceThread}
+            </div>
+
+            <!-- Triage actions -->
+            <div class="bg-white rounded-lg border border-gray-200 px-6 py-4">
+                <h2 class="text-sm font-semibold text-gray-700 mb-3">Triage</h2>
+                {renderTriageActions candidate}
+            </div>
+
+            <!-- Reviewer assignment -->
+            <div class="bg-white rounded-lg border border-gray-200 px-6 py-4">
+                <h2 class="text-sm font-semibold text-gray-700 mb-3">Reviewer</h2>
+                {renderReviewerSection candidate mAssignment users}
+            </div>
+
+            <!-- Triage history -->
+            <div class="bg-white rounded-lg border border-gray-200 px-6 py-4">
+                <h2 class="text-sm font-semibold text-gray-700 mb-3">Triage History</h2>
+                {if null triageStates
+                    then [hsx|<p class="text-sm text-gray-400">No triage actions recorded yet.</p>|]
+                    else [hsx|
+                        <ol class="space-y-2">
+                            {forEach triageStates renderTriageRow}
+                        </ol>
+                    |]}
+            </div>
+        </div>
+    |]
+
+renderSource :: Maybe Annotation -> Maybe AnnotationThread -> Html
+renderSource Nothing Nothing = [hsx|<p class="text-sm text-gray-400">No source linked.</p>|]
+renderSource (Just a) _ = [hsx|
+    <div class="text-sm">
+        <p class="text-gray-500 mb-1">Source annotation:</p>
+        <p class="text-gray-700 italic">"{a.body}"</p>
+    </div>
+|]
+renderSource Nothing (Just t) = [hsx|
+    <div class="text-sm">
+        <p class="text-gray-500 mb-1">Source thread:</p>
+        <a href={ShowAnnotationThreadAction { annotationThreadId = t.id }}
+           class="text-indigo-600 hover:text-indigo-800">{t.title}</a>
+    </div>
+|]
+
+renderTriageActions :: RequirementCandidate -> Html
+renderTriageActions c = [hsx|
+    <div class="flex flex-wrap gap-2">
+        {forEach (allowedNextStatuses c.status) (renderTriageButton c.id)}
+    </div>
+|]
+
+allowedNextStatuses :: Text -> [Text]
+allowedNextStatuses "open"      = ["in_review"]
+allowedNextStatuses "in_review" = ["accepted", "rejected", "deferred"]
+allowedNextStatuses "deferred"  = ["in_review"]
+allowedNextStatuses _           = []
+
+renderTriageButton :: Id RequirementCandidate -> Text -> Html
+renderTriageButton candidateId newStatus = [hsx|
+    <form method="POST" action={UpdateTriageStatusAction { requirementCandidateId = candidateId }}
+          class="inline">
+        {hiddenField "authenticity_token"}
+        <input type="hidden" name="status" value={newStatus} />
+        <button type="submit" class={triageButtonClass newStatus}>
+            → {newStatus}
+        </button>
+    </form>
+|]
+
+triageButtonClass :: Text -> Text
+triageButtonClass "accepted"  = "text-sm px-3 py-1.5 rounded border bg-green-50 border-green-300 text-green-800 hover:bg-green-100"
+triageButtonClass "rejected"  = "text-sm px-3 py-1.5 rounded border bg-red-50 border-red-300 text-red-800 hover:bg-red-100"
+triageButtonClass "deferred"  = "text-sm px-3 py-1.5 rounded border bg-gray-50 border-gray-300 text-gray-700 hover:bg-gray-100"
+triageButtonClass _           = "text-sm px-3 py-1.5 rounded border bg-yellow-50 border-yellow-300 text-yellow-800 hover:bg-yellow-100"
+
+renderReviewerSection :: RequirementCandidate -> Maybe ReviewerAssignment -> [User] -> Html
+renderReviewerSection candidate mAssignment users = [hsx|
+    <div class="flex items-center gap-4">
+        <div class="text-sm text-gray-600">
+            {case mAssignment of
+                Nothing -> [hsx|<span class="text-gray-400">Unassigned</span>|]
+                Just ra -> [hsx|<span>{reviewerName ra users}</span>|]}
+        </div>
+        <form method="POST" action={AssignReviewerAction { requirementCandidateId = candidate.id }}
+              class="flex items-center gap-2">
+            {hiddenField "authenticity_token"}
+            <select name="userId" class="text-sm border border-gray-300 rounded px-2 py-1">
+                {forEach users (\u -> [hsx|<option value={show u.id}>{u.name}</option>|])}
+            </select>
+            <button type="submit"
+                    class="text-sm bg-indigo-600 text-white px-3 py-1 rounded hover:bg-indigo-700">
+                Assign
+            </button>
+        </form>
+    </div>
+|]
+
+reviewerName :: ReviewerAssignment -> [User] -> Text
+reviewerName ra users =
+    maybe "Unknown" (.name) (find (\u -> u.id == ra.userId) users)
+
+renderTriageRow :: TriageState -> Html
+renderTriageRow ts = [hsx|
+    <li class="flex items-start gap-3 text-sm">
+        <span class={statusClass ts.status <> " text-xs px-2 py-0.5 rounded mt-0.5 shrink-0"}>
+            {ts.status}
+        </span>
+        <div>
+            {maybe mempty (\n -> [hsx|<p class="text-gray-700">{n}</p>|]) ts.notes}
+            <p class="text-xs text-gray-400">{show ts.changedAt}</p>
+        </div>
+    </li>
+|]
+
+statusClass :: Text -> Text
+statusClass "open"      = "bg-blue-100 text-blue-700"
+statusClass "in_review" = "bg-yellow-100 text-yellow-800"
+statusClass "accepted"  = "bg-green-100 text-green-800"
+statusClass "rejected"  = "bg-red-100 text-red-800"
+statusClass "deferred"  = "bg-gray-100 text-gray-600"
+statusClass _           = "bg-gray-100 text-gray-600"