Live progress indicators + feedback widget

- Backend: yield running state before each step so frontend sees real-time transitions
- AgentPipeline: live elapsed timer, spinning indicator, contextual activity messages
- FeedbackWidget: floating button -> message + optional contact form
- Backend: POST /api/feedback endpoint (JSONL storage)
- Pipeline running view: better messaging about expected duration

src/backend/app/agent/orchestrator.py

@@ -137,6 +137,7 @@ class Orchestrator:
 
         try:
             # ── Step 1: Parse patient data ──
+            yield self._mark_running("parse")
             step = await self._run_step("parse", self._step_parse, case.patient_text)
             yield step
 
@@ -148,6 +149,7 @@ class Orchestrator:
                 return
 
             # ── Step 2: Clinical reasoning ──
+            yield self._mark_running("reason")
             step = await self._run_step("reason", self._step_reason)
             yield step
 
@@ -160,8 +162,10 @@ class Orchestrator:
             # ── Step 3 & 4: Drug check + Guidelines (parallel) ──
             parallel_tasks = []
             if case.include_drug_check:
+                yield self._mark_running("drugs")
                 parallel_tasks.append(("drugs", self._step_drug_check))
             if case.include_guidelines:
+                yield self._mark_running("guidelines")
                 parallel_tasks.append(("guidelines", self._step_guidelines))
 
             if parallel_tasks:
@@ -178,9 +182,11 @@ class Orchestrator:
 
             # ── Step 5: Conflict Detection ──
             if case.include_guidelines:
+                yield self._mark_running("conflicts")
                 yield await self._run_step("conflicts", self._step_conflict_detection)
 
             # ── Step 6: Synthesis ──
+            yield self._mark_running("synthesize")
             yield await self._run_step("synthesize", self._step_synthesize)
 
             self._state.completed_at = datetime.utcnow()
@@ -207,6 +213,12 @@ class Orchestrator:
                 skipped.append(step)
         return skipped
 
+    def _mark_running(self, step_id: str) -> AgentStep:
+        """Mark a step as RUNNING and return it for immediate yielding."""
+        step = self._get_step(step_id)
+        step.status = AgentStepStatus.RUNNING
+        return step
+
     async def _run_step(self, step_id: str, fn, *args) -> AgentStep:
         """Execute a single step, tracking status and timing."""
         step = self._get_step(step_id)

src/backend/app/api/feedback.py

@@ -0,0 +1,68 @@
+"""
+Feedback endpoint — stores user feedback from the demo.
+Simple JSON Lines file storage. No database needed.
+"""
+from __future__ import annotations
+
+import json
+import logging
+from datetime import datetime, timezone
+from pathlib import Path
+
+from fastapi import APIRouter, Request
+from pydantic import BaseModel, Field
+
+logger = logging.getLogger(__name__)
+router = APIRouter()
+
+FEEDBACK_FILE = Path("/tmp/cds_feedback.jsonl")
+
+
+class FeedbackSubmission(BaseModel):
+    message: str = Field(..., max_length=1000)
+    contact: str | None = Field(None, max_length=200)
+    page_url: str | None = None
+    user_agent: str | None = None
+
+
+@router.post("/api/feedback")
+async def submit_feedback(feedback: FeedbackSubmission, request: Request):
+    """Save user feedback to a JSONL file."""
+    entry = {
+        "timestamp": datetime.now(timezone.utc).isoformat(),
+        "message": feedback.message,
+        "contact": feedback.contact,
+        "page_url": feedback.page_url,
+        "user_agent": feedback.user_agent,
+        "client_ip": request.client.host if request.client else None,
+    }
+
+    try:
+        with open(FEEDBACK_FILE, "a", encoding="utf-8") as f:
+            f.write(json.dumps(entry) + "\n")
+        logger.info(f"Feedback saved: {feedback.message[:50]}...")
+    except Exception as e:
+        logger.error(f"Failed to save feedback: {e}")
+        return {"status": "error", "message": "Failed to save feedback"}
+
+    return {"status": "ok", "message": "Thank you for your feedback!"}
+
+
+@router.get("/api/feedback")
+async def list_feedback():
+    """List all feedback (for the developer). No auth — it's a demo."""
+    if not FEEDBACK_FILE.exists():
+        return {"feedback": [], "count": 0}
+
+    entries = []
+    try:
+        with open(FEEDBACK_FILE, "r", encoding="utf-8") as f:
+            for line in f:
+                line = line.strip()
+                if line:
+                    entries.append(json.loads(line))
+    except Exception as e:
+        logger.error(f"Failed to read feedback: {e}")
+        return {"feedback": [], "count": 0, "error": str(e)}
+
+    return {"feedback": entries, "count": len(entries)}

src/backend/app/main.py

@@ -6,7 +6,7 @@ import logging
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
 
-from app.api import cases, health, ws
+from app.api import cases, feedback, health, ws
 from app.config import settings
 
 logging.basicConfig(level=logging.INFO, format="%(asctime)s %(name)s %(levelname)s %(message)s")
@@ -30,6 +30,7 @@ app.add_middleware(
 # Routes
 app.include_router(health.router, tags=["health"])
 app.include_router(cases.router, prefix="/api/cases", tags=["cases"])
+app.include_router(feedback.router, tags=["feedback"])
 app.include_router(ws.router, prefix="/ws", tags=["websocket"])
 
 

src/frontend/src/app/page.tsx

@@ -4,6 +4,7 @@ import { useState, useCallback } from "react";
 import { PatientInput } from "@/components/PatientInput";
 import { AgentPipeline } from "@/components/AgentPipeline";
 import { CDSReport } from "@/components/CDSReport";
+import { FeedbackWidget } from "@/components/FeedbackWidget";
 import { useAgentWebSocket } from "@/hooks/useAgentWebSocket";
 import { reportToMarkdown } from "@/lib/reportToMarkdown";
 
@@ -173,7 +174,13 @@ export default function Home() {
                 <div className="flex items-center justify-center h-64 text-gray-400">
                   <div className="text-center">
                     <div className="animate-spin w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full mx-auto mb-4" />
-                    <p>Agent pipeline running...</p>
+                    <p className="text-gray-600 font-medium">Agent pipeline running...</p>
+                    <p className="text-sm text-gray-400 mt-1">
+                      Watch the steps on the left — the report will appear here when done.
+                    </p>
+                    <p className="text-xs text-gray-400 mt-3">
+                      Full analysis typically takes 2–4 minutes across 6 steps.
+                    </p>
                   </div>
                 </div>
               ) : error && steps.length === 0 ? (
@@ -207,6 +214,9 @@ export default function Home() {
         )}
       </div>
 
+      {/* Feedback widget */}
+      <FeedbackWidget />
+
       {/* Disclaimer footer */}
       <footer className="fixed bottom-0 left-0 right-0 bg-amber-50 border-t border-amber-200 px-6 py-2">
         <p className="text-center text-xs text-amber-700">

src/frontend/src/components/AgentPipeline.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { useEffect, useRef, useState } from "react";
+
 interface Step {
   step_id: string;
   step_name: string;
@@ -48,7 +50,86 @@ const STATUS_CONFIG = {
   },
 };
 
+const STEP_MESSAGES: Record<string, string[]> = {
+  parse: [
+    "Extracting demographics, medications, labs...",
+    "Identifying chief complaint and history...",
+    "Structuring patient data...",
+  ],
+  reason: [
+    "Analyzing symptoms and history...",
+    "Generating differential diagnosis...",
+    "Evaluating clinical evidence...",
+  ],
+  drugs: [
+    "Querying OpenFDA drug database...",
+    "Checking RxNorm interactions...",
+    "Evaluating medication safety...",
+  ],
+  guidelines: [
+    "Searching clinical guideline database...",
+    "Retrieving relevant excerpts...",
+    "Matching guidelines to diagnosis...",
+  ],
+  conflicts: [
+    "Cross-referencing care plan with guidelines...",
+    "Detecting care gaps...",
+    "Checking for contraindications...",
+  ],
+  synthesize: [
+    "Compiling analysis results...",
+    "Generating clinical report...",
+    "Finalizing recommendations...",
+  ],
+};
+
+function formatElapsed(seconds: number): string {
+  if (seconds < 60) return `${seconds}s`;
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  return `${m}m ${s}s`;
+}
+
 export function AgentPipeline({ steps, isRunning }: AgentPipelineProps) {
+  const [tick, setTick] = useState(0);
+  const startTimes = useRef<Record<string, number>>({});
+
+  // Track when steps start running
+  useEffect(() => {
+    const now = Date.now();
+    steps.forEach((step) => {
+      if (step.status === "running" && !startTimes.current[step.step_id]) {
+        startTimes.current[step.step_id] = now;
+      }
+      if (step.status !== "running" && startTimes.current[step.step_id]) {
+        delete startTimes.current[step.step_id];
+      }
+    });
+  }, [steps]);
+
+  // Tick every second when any step is running
+  useEffect(() => {
+    const hasRunning = steps.some((s) => s.status === "running");
+    if (!hasRunning) return;
+
+    const interval = setInterval(() => setTick((t) => t + 1), 1000);
+    return () => clearInterval(interval);
+  }, [steps.map((s) => s.status).join(",")]);
+
+  const getElapsed = (stepId: string): number => {
+    const start = startTimes.current[stepId];
+    if (!start) return 0;
+    return Math.floor((Date.now() - start) / 1000);
+  };
+
+  const getActivityMessage = (stepId: string, elapsed: number): string => {
+    const messages = STEP_MESSAGES[stepId];
+    if (!messages) return "Processing...";
+    // Cycle through messages every 8 seconds
+    const idx = Math.floor(elapsed / 8) % messages.length;
+    return messages[idx];
+  };
+
   return (
     <div className="bg-white rounded-xl border border-gray-200 p-5">
       <h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4">
@@ -58,6 +139,7 @@ export function AgentPipeline({ steps, isRunning }: AgentPipelineProps) {
       <div className="space-y-1">
         {steps.map((step, index) => {
           const config = STATUS_CONFIG[step.status];
+          const elapsed = step.status === "running" ? getElapsed(step.step_id) : 0;
           return (
             <div key={step.step_id}>
               {/* Connector line */}
@@ -70,13 +152,18 @@ export function AgentPipeline({ steps, isRunning }: AgentPipelineProps) {
                 className={`flex items-start gap-3 p-3 rounded-lg border ${config.bg} ${config.border} transition-all duration-300`}
               >
                 {/* Status icon */}
-                <span
-                  className={`text-lg font-bold ${config.color} ${
-                    step.status === "running" ? "animate-pulse-dot" : ""
-                  }`}
-                >
-                  {config.icon}
-                </span>
+                <div className="flex-shrink-0 mt-0.5">
+                  {step.status === "running" ? (
+                    <div className="w-5 h-5 relative">
+                      <div className="absolute inset-0 rounded-full border-2 border-blue-200" />
+                      <div className="absolute inset-0 rounded-full border-2 border-blue-500 border-t-transparent animate-spin" />
+                    </div>
+                  ) : (
+                    <span className={`text-lg font-bold ${config.color}`}>
+                      {config.icon}
+                    </span>
+                  )}
+                </div>
 
                 {/* Step info */}
                 <div className="flex-1 min-w-0">
@@ -84,14 +171,25 @@ export function AgentPipeline({ steps, isRunning }: AgentPipelineProps) {
                     <span className="text-sm font-medium text-gray-800">
                       {step.step_name}
                     </span>
-                    {step.duration_ms != null && (
+                    {step.status === "running" && elapsed > 0 && (
+                      <span className="text-xs font-mono text-blue-500 tabular-nums">
+                        {formatElapsed(elapsed)}
+                      </span>
+                    )}
+                    {step.duration_ms != null && step.status !== "running" && (
                       <span className="text-xs text-gray-400">
-                        {step.duration_ms}ms
+                        {(step.duration_ms / 1000).toFixed(1)}s
                       </span>
                     )}
                   </div>
 
-                  {step.tool_name && (
+                  {step.status === "running" && (
+                    <p className="text-xs text-blue-500 mt-1 animate-pulse">
+                      {getActivityMessage(step.step_id, elapsed)}
+                    </p>
+                  )}
+
+                  {step.tool_name && step.status !== "running" && (
                     <span className="text-xs text-gray-400 font-mono">
                       {step.tool_name}
                     </span>

src/frontend/src/components/FeedbackWidget.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+
+export function FeedbackWidget() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [message, setMessage] = useState("");
+  const [contact, setContact] = useState("");
+  const [status, setStatus] = useState<"idle" | "sending" | "sent" | "error">("idle");
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  // Close on outside click
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleClick = (e: MouseEvent) => {
+      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [isOpen]);
+
+  const handleSubmit = async () => {
+    if (!message.trim()) return;
+    setStatus("sending");
+
+    try {
+      const res = await fetch("/api/feedback", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          message: message.trim(),
+          contact: contact.trim() || undefined,
+          page_url: window.location.href,
+          user_agent: navigator.userAgent,
+        }),
+      });
+
+      if (res.ok) {
+        setStatus("sent");
+        setMessage("");
+        setContact("");
+        setTimeout(() => {
+          setIsOpen(false);
+          setStatus("idle");
+        }, 2000);
+      } else {
+        setStatus("error");
+      }
+    } catch {
+      setStatus("error");
+    }
+  };
+
+  return (
+    <div className="fixed bottom-12 right-6 z-50" ref={panelRef}>
+      {/* Feedback panel */}
+      {isOpen && (
+        <div className="mb-3 w-80 bg-white rounded-xl shadow-2xl border border-gray-200 overflow-hidden animate-in">
+          <div className="bg-blue-600 px-4 py-3">
+            <h3 className="text-white font-semibold text-sm">Send Feedback</h3>
+            <p className="text-blue-100 text-xs mt-0.5">
+              Bugs, impressions, ideas — anything helps!
+            </p>
+          </div>
+
+          <div className="p-4 space-y-3">
+            {status === "sent" ? (
+              <div className="text-center py-4">
+                <div className="text-3xl mb-2">✓</div>
+                <p className="text-green-700 font-medium text-sm">Thanks for the feedback!</p>
+              </div>
+            ) : (
+              <>
+                <div>
+                  <textarea
+                    value={message}
+                    onChange={(e) => setMessage(e.target.value)}
+                    placeholder="What's on your mind?"
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm resize-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none"
+                    rows={3}
+                    maxLength={1000}
+                    autoFocus
+                  />
+                </div>
+
+                <div>
+                  <input
+                    type="text"
+                    value={contact}
+                    onChange={(e) => setContact(e.target.value)}
+                    placeholder="Email or Twitter (optional)"
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none"
+                    maxLength={200}
+                  />
+                </div>
+
+                {status === "error" && (
+                  <p className="text-xs text-red-600">
+                    Failed to send — try again in a moment.
+                  </p>
+                )}
+
+                <button
+                  onClick={handleSubmit}
+                  disabled={!message.trim() || status === "sending"}
+                  className="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed text-white text-sm font-medium rounded-lg transition-colors"
+                >
+                  {status === "sending" ? "Sending..." : "Send Feedback"}
+                </button>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Floating button */}
+      <button
+        onClick={() => {
+          setIsOpen(!isOpen);
+          setStatus("idle");
+        }}
+        className="w-12 h-12 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg flex items-center justify-center transition-all hover:scale-105 active:scale-95"
+        title="Send feedback"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          className="w-5 h-5"
+        >
+          {isOpen ? (
+            <path
+              fillRule="evenodd"
+              d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z"
+              clipRule="evenodd"
+            />
+          ) : (
+            <path
+              fillRule="evenodd"
+              d="M4.848 2.771A49.144 49.144 0 0112 2.25c2.43 0 4.817.178 7.152.52 1.978.29 3.348 2.024 3.348 3.97v6.02c0 1.946-1.37 3.68-3.348 3.97a48.901 48.901 0 01-3.476.383.39.39 0 00-.297.17l-2.755 4.133a.75.75 0 01-1.248 0l-2.755-4.133a.39.39 0 00-.297-.17 48.9 48.9 0 01-3.476-.384c-1.978-.29-3.348-2.024-3.348-3.97V6.741c0-1.946 1.37-3.68 3.348-3.97zM6.75 8.25a.75.75 0 01.75-.75h9a.75.75 0 010 1.5h-9a.75.75 0 01-.75-.75zm.75 2.25a.75.75 0 000 1.5H12a.75.75 0 000-1.5H7.5z"
+              clipRule="evenodd"
+            />
+          )}
+        </svg>
+      </button>
+    </div>
+  );
+}