Improve research app progress and timeline layout

fastmcp_research_app.py

@@ -31,7 +31,7 @@ from starlette.middleware import Middleware
 from prefab_ui.actions import SetInterval, SetState
 from prefab_ui.actions.mcp import CallTool
 from prefab_ui.app import PrefabApp
-from prefab_ui.components import Badge, Card, CardContent, CardHeader, Column, Heading, If, Muted, Progress, Row, Text
+from prefab_ui.components import Badge, Card, CardContent, CardHeader, Column, Heading, If, Loader, Markdown, Muted, Progress, Row, Text
 from prefab_ui.components.control_flow import ForEach
 from prefab_ui.rx import RESULT, Rx, STATE
 
@@ -112,6 +112,9 @@ class ResearchJob:
             "topic": self.topic,
             "status": self.status,
             "events": list(self.events),
+            "timeline_events": list(self.events[-24:]),
+            "event_count": len(self.events),
+            "activity_progress": 100 if self.status in {"completed", "failed"} else int(((time() - self.created_at) * 12) % 100),
             "result": self.result,
             "error": self.error,
             "done": self.status in {"completed", "failed"},
@@ -224,7 +227,7 @@ async def main() -> None:
 
         @app.ui(
             name="research",
-            title="Research Agent",
+            title="🤗 Research Agent",
             description="Open a live research app for a Hugging Face ecosystem research task.",
         )
         async def research(
@@ -274,31 +277,44 @@ async def main() -> None:
                     ],
                 ):
                     with Row(justify="between", align="center"):
-                        Heading("Research Agent")
+                        Heading("🤗 Research Agent")
                         Badge(STATE.job.status, variant="outline")
                     Muted(STATE.topic)
 
                     with Card():
                         with CardHeader():
-                            Text("Progress")
+                            Text("Activity")
                         with CardContent():
-                            Progress(value=Rx("job.events.length"), max=20)
-                            with Column(gap=2):
-                                with If(STATE.job.error):
-                                    Text(STATE.job.error, css_class="text-red-600")
-                                with If(STATE.job.result):
-                                    Text(STATE.job.result, css_class="whitespace-pre-wrap")
-                                Muted("Research is running; this view refreshes automatically.")
+                            with Row(gap=3, align="center"):
+                                Loader(variant="bars", size="sm")
+                                Badge(STATE.job.status, variant="outline")
+                                Muted("Working; the number of steps is not known in advance.")
+                            Progress(value=STATE.job.activity_progress, max=100, gradient=True, size="sm")
 
                     with Card():
                         with CardHeader():
                             Text("Timeline")
+                            Muted("Showing the latest 24 events; older events roll off the visible list.")
                         with CardContent():
-                            with ForEach("job.events") as event:
+                            with ForEach("job.timeline_events") as event:
                                 with Row(gap=2, align="start"):
                                     Badge(event.kind, variant="outline")
                                     Text(event.message)
 
+                    with If(STATE.job.error):
+                        with Card():
+                            with CardHeader():
+                                Text("Error")
+                            with CardContent():
+                                Text(STATE.job.error, css_class="text-red-600")
+
+                    with If(STATE.job.result):
+                        with Card():
+                            with CardHeader():
+                                Text("Final result")
+                            with CardContent():
+                                Markdown(STATE.job.result, css_class="whitespace-pre-wrap")
+
             return ui
 
         @app.tool()