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>

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"

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}
+|]

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"

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"

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")
     ]

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"

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

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"

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")
+    ]

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"

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")
+    ]

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"