feat: add inline step thumbs up/down feedback during sessions

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

frontend/src/components/session/StepFeedback.tsx

@@ -0,0 +1,77 @@
+import { useState, useEffect } from 'react'
+import { ThumbsUp, ThumbsDown } from 'lucide-react'
+import { analyticsApi } from '@/api'
+import { cn } from '@/lib/utils'
+
+interface StepFeedbackProps {
+  stepId: string
+  sessionId: string
+}
+
+const HINT_KEY = 'rf-step-feedback-hint-dismissed'
+
+export function StepFeedback({ stepId, sessionId }: StepFeedbackProps) {
+  const [feedback, setFeedback] = useState<boolean | null>(null)
+  const [submitting, setSubmitting] = useState(false)
+  const [showHint, setShowHint] = useState(false)
+
+  useEffect(() => {
+    if (!localStorage.getItem(HINT_KEY)) {
+      setShowHint(true)
+    }
+  }, [])
+
+  const handleFeedback = async (wasHelpful: boolean) => {
+    if (submitting) return
+    setSubmitting(true)
+    try {
+      const newValue = feedback === wasHelpful ? null : wasHelpful
+      if (newValue !== null) {
+        await analyticsApi.submitStepFeedback(stepId, sessionId, newValue)
+      }
+      setFeedback(newValue)
+      if (showHint) {
+        setShowHint(false)
+        localStorage.setItem(HINT_KEY, '1')
+      }
+    } catch {
+      // Silently fail — feedback is non-critical
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      {showHint && (
+        <span className="text-xs text-muted-foreground">Was this step helpful?</span>
+      )}
+      <button
+        onClick={() => handleFeedback(true)}
+        disabled={submitting}
+        className={cn(
+          'rounded-md p-1.5 transition-colors',
+          feedback === true
+            ? 'text-emerald-400 bg-emerald-400/10'
+            : 'text-muted-foreground hover:text-emerald-400 hover:bg-accent'
+        )}
+        title="Helpful"
+      >
+        <ThumbsUp size={14} />
+      </button>
+      <button
+        onClick={() => handleFeedback(false)}
+        disabled={submitting}
+        className={cn(
+          'rounded-md p-1.5 transition-colors',
+          feedback === false
+            ? 'text-red-400 bg-red-400/10'
+            : 'text-muted-foreground hover:text-red-400 hover:bg-accent'
+        )}
+        title="Not helpful"
+      >
+        <ThumbsDown size={14} />
+      </button>
+    </div>
+  )
+}

frontend/src/pages/ProceduralNavigationPage.tsx

@@ -11,6 +11,7 @@ import { ProgressBar } from '@/components/procedural/ProgressBar'
 import { CompletionSummary } from '@/components/procedural/CompletionSummary'
 import { cn } from '@/lib/utils'
 import { toast } from '@/lib/toast'
+import { StepFeedback } from '@/components/session/StepFeedback'
 
 interface StepState {
   notes: string
@@ -406,6 +407,11 @@ export function ProceduralNavigationPage() {
               isLast={currentStepIndex === procedureSteps.length - 1}
             />
           )}
+          {session && currentStep && (
+            <div className="mt-3 flex justify-end">
+              <StepFeedback stepId={currentStep.id} sessionId={session.id} />
+            </div>
+          )}
         </div>
       </div>
 

frontend/src/pages/TreeNavigationPage.tsx

@@ -14,6 +14,7 @@ import { Plus, CheckCircle, ArrowRight, Clock, Terminal, Clipboard, Check, Copy,
 import { toast } from '@/lib/toast'
 import { Modal } from '@/components/common/Modal'
 import { ShareSessionModal } from '@/components/session/ShareSessionModal'
+import { StepFeedback } from '@/components/session/StepFeedback'
 import { buildSessionShareUrl, getLatestActiveShareForSession } from '@/lib/sessionShare'
 
 interface LocationState {
@@ -1089,6 +1090,13 @@ export function TreeNavigationPage() {
           </>
         )}
 
+        {/* Step Feedback */}
+        {session && (currentNode || currentCustomStep) && (
+          <div className="mt-3 flex justify-end border-t border-border pt-3">
+            <StepFeedback stepId={currentCustomStep?.id || currentNodeId} sessionId={session.id} />
+          </div>
+        )}
+
         {/* Notes */}
         <div className="mt-6 border-t border-border pt-4">
           <label className="block text-sm font-medium text-foreground">