fastapi-fullstack 0.2.13__tar.gz → 0.2.14__tar.gz

{fastapi_fullstack-0.2.13 → fastapi_fullstack-0.2.14}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: fastapi-fullstack
-Version: 0.2.13
+Version: 0.2.14
 Summary: Full-stack FastAPI + Next.js template generator with PydanticAI/LangChain agents, WebSocket streaming, 20+ enterprise integrations, and Logfire/LangSmith observability. Ship AI apps fast. CLI tool to generate production-ready FastAPI + Next.js projects with AI agents, auth, and observability.
 Project-URL: Homepage, https://github.com/vstorm-co/full-stack-ai-agent-template
 Project-URL: Documentation, https://github.com/vstorm-co/full-stack-ai-agent-template#readme

{fastapi_fullstack-0.2.13 → fastapi_fullstack-0.2.14}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "fastapi-fullstack"
-version = "0.2.13"
+version = "0.2.14"
 description = "Full-stack FastAPI + Next.js template generator with PydanticAI/LangChain agents, WebSocket streaming, 20+ enterprise integrations, and Logfire/LangSmith observability. Ship AI apps fast. CLI tool to generate production-ready FastAPI + Next.js projects with AI agents, auth, and observability."
 readme = "README.md"
 requires-python = ">=3.11"

fastapi_fullstack-0.2.14/template/{{cookiecutter.project_slug}}/backend/alembic/versions/0023_add_is_demo_conversations.py

@@ -0,0 +1,30 @@
+"""conversations: add is_demo flag for public demo gallery
+
+Revision ID: 0023
+Revises: 0022
+Create Date: 2026-06-22
+
+Adds ``is_demo`` boolean column to conversations so admins can flag curated
+agent runs for the public demo replay gallery (served without authentication).
+"""
+
+from alembic import op
+import sqlalchemy as sa
+
+revision = "0023"
+down_revision = "0022"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    op.add_column(
+        "conversations",
+        sa.Column("is_demo", sa.Boolean(), nullable=False, server_default=sa.false()),
+    )
+    op.create_index("ix_conversations_is_demo", "conversations", ["is_demo"])
+
+
+def downgrade() -> None:
+    op.drop_index("ix_conversations_is_demo", table_name="conversations")
+    op.drop_column("conversations", "is_demo")

{fastapi_fullstack-0.2.13 → fastapi_fullstack-0.2.14}/template/{{cookiecutter.project_slug}}/backend/app/api/routes/v1/__init__.py

@@ -19,7 +19,7 @@ from app.api.routes.v1 import oauth
 from app.api.routes.v1 import sessions
 {%- endif %}
 {%- if cookiecutter.use_ai %}
-from app.api.routes.v1 import conversations
+from app.api.routes.v1 import conversations, public_demos
 {%- endif %}
 {%- if cookiecutter.use_jwt and cookiecutter.use_ai %}
 from app.api.routes.v1 import admin_conversations
@@ -104,6 +104,7 @@ v1_router.include_router(sessions.router, prefix="/sessions", tags=["sessions"])
 {%- if cookiecutter.use_ai %}
 
 v1_router.include_router(conversations.router, prefix="/conversations", tags=["conversations"])
+v1_router.include_router(public_demos.router, prefix="/demos", tags=["demos"])
 {%- endif %}
 
 {%- if cookiecutter.use_pydantic_deep and cookiecutter.use_jwt %}

{fastapi_fullstack-0.2.13 → fastapi_fullstack-0.2.14}/template/{{cookiecutter.project_slug}}/backend/app/api/routes/v1/admin_conversations.py

@@ -5,7 +5,7 @@ from uuid import UUID
 from fastapi import APIRouter, Query
 
 from app.api.deps import ConversationSvc, CurrentAdmin
-from app.schemas.conversation import ConversationReadWithMessages
+from app.schemas.conversation import ConversationRead, ConversationReadWithMessages, ConversationUpdate
 from app.schemas.conversation_share import AdminConversationList
 
 router = APIRouter()
@@ -50,6 +50,24 @@ async def admin_get_conversation(
     return await service.get_conversation_with_messages(conversation_id)
 
 
+@router.patch("/{conversation_id}/demo", response_model=ConversationRead)
+async def admin_set_demo_flag(
+    conversation_id: UUID,
+    service: ConversationSvc,
+    _: CurrentAdmin,
+    is_demo: bool = Query(..., description="Mark (true) or unmark (false) as a public demo"),
+) -> Any:
+    """Toggle a conversation's public-demo flag (admin only).
+
+    Demo conversations are served without auth on the public demo gallery for replay.
+    """
+    return await service.update_conversation(
+        conversation_id,
+        ConversationUpdate(is_demo=is_demo),
+        user_id=None,  # admin bypass — no ownership check
+    )
+
+
 {%- else %}
 """Admin conversation routes — requires JWT authentication (use_jwt)."""
 router = APIRouter()

fastapi_fullstack-0.2.14/template/{{cookiecutter.project_slug}}/backend/app/api/routes/v1/public_demos.py

@@ -0,0 +1,41 @@
+"""Public demo conversation routes (no authentication).
+
+Serves conversations an admin has flagged ``is_demo=True`` so unauthenticated
+visitors can browse and replay curated agent runs on the public demo page.
+Only demo-flagged conversations are ever exposed here — regular user conversations
+are never reachable through these endpoints.
+
+Endpoints:
+    GET /demos          — List demo conversations (gallery cards)
+    GET /demos/{id}     — Get one demo conversation with messages + tool calls
+"""
+
+from typing import Any
+from uuid import UUID
+
+from fastapi import APIRouter, Query
+
+from app.api.deps import ConversationSvc
+from app.schemas.conversation import ConversationReadWithMessages, DemoConversationList
+
+router = APIRouter()
+
+
+@router.get("", response_model=DemoConversationList)
+async def list_demo_conversations(
+    service: ConversationSvc,
+    skip: int = Query(0, ge=0, description="Items to skip"),
+    limit: int = Query(50, ge=1, le=100, description="Max items to return"),
+) -> Any:
+    """List admin-curated demo conversations (public, no auth)."""
+    items, total = await service.list_demo_conversations(skip=skip, limit=limit)
+    return DemoConversationList(items=items, total=total)
+
+
+@router.get("/{conversation_id}", response_model=ConversationReadWithMessages)
+async def get_demo_conversation(
+    conversation_id: UUID,
+    service: ConversationSvc,
+) -> Any:
+    """Get a single demo conversation with all messages (public, no auth)."""
+    return await service.get_demo_conversation(conversation_id)

{fastapi_fullstack-0.2.13 → fastapi_fullstack-0.2.14}/template/{{cookiecutter.project_slug}}/backend/app/db/models/conversation.py

@@ -247,6 +247,7 @@ class Conversation(Base, TimestampMixin):
 {%- endif %}
     title: Mapped[str | None] = mapped_column(String(255), nullable=True)
     is_archived: Mapped[bool] = mapped_column(Boolean, default=False, nullable=False)
+    is_demo: Mapped[bool] = mapped_column(Boolean, default=False, nullable=False, index=True)
 {%- if cookiecutter.enable_teams and cookiecutter.enable_rag and cookiecutter.use_jwt %}
     active_knowledge_base_ids: Mapped[list[str] | None] = mapped_column(JSONB, nullable=True)
 {%- endif %}

{fastapi_fullstack-0.2.13 → fastapi_fullstack-0.2.14}/template/{{cookiecutter.project_slug}}/backend/app/repositories/conversation.py

@@ -143,6 +143,50 @@ async def export_chunk(
     return list(result.scalars().all())
 
 
+async def get_demo_conversations_with_count(
+    db: AsyncSession,
+    *,
+    skip: int = 0,
+    limit: int = 50,
+) -> tuple[list[tuple[Conversation, int, str | None]], int]:
+    """Get admin-curated demo conversations with message count + first user prompt preview."""
+    message_count_subq = (
+        select(func.count(Message.id))
+        .where(Message.conversation_id == Conversation.id)
+        .correlate(Conversation)
+        .scalar_subquery()
+    )
+    preview_subq = (
+        select(Message.content)
+        .where(Message.conversation_id == Conversation.id, Message.role == "user")
+        .correlate(Conversation)
+        .order_by(Message.created_at.asc())
+        .limit(1)
+        .scalar_subquery()
+    )
+    query = (
+        select(
+            Conversation,
+            message_count_subq.label("message_count"),
+            preview_subq.label("preview"),
+        )
+        .where(Conversation.is_demo.is_(True))
+        .order_by(func.coalesce(Conversation.updated_at, Conversation.created_at).desc())
+        .offset(skip)
+        .limit(limit)
+    )
+    result = await db.execute(query)
+    rows = result.all()
+
+    total: int = (
+        await db.execute(
+            select(func.count(Conversation.id)).where(Conversation.is_demo.is_(True))
+        )
+    ).scalar() or 0
+
+    return [tuple(row) for row in rows], total  # type: ignore[return-value]
+
+
 async def admin_list_with_users(
     db: AsyncSession,
     *,

{fastapi_fullstack-0.2.13 → fastapi_fullstack-0.2.14}/template/{{cookiecutter.project_slug}}/backend/app/schemas/conversation.py

@@ -154,6 +154,7 @@ class ConversationUpdate(BaseSchema):
 
     title: str | None = Field(default=None, max_length=255)
     is_archived: bool | None = None
+    is_demo: bool | None = None
 {%- if cookiecutter.enable_teams and cookiecutter.enable_rag and cookiecutter.use_jwt %}
     active_knowledge_base_ids: list[UUID] | None = Field(
         default=None,
@@ -193,6 +194,7 @@ class ConversationRead(ConversationBase, TimestampSchema):
     organization_id: UUID | None = None
 {%- endif %}
     is_archived: bool = False
+    is_demo: bool = False
 {%- if cookiecutter.enable_teams and cookiecutter.enable_rag and cookiecutter.use_jwt %}
     active_knowledge_base_ids: list[str] | None = None
 {%- endif %}
@@ -239,3 +241,21 @@ class ConversationAdminList(BaseSchema):
 class ConversationExport(BaseSchema):
     conversations: list[Any]
     total: int
+
+
+class DemoConversationSummary(BaseSchema):
+    """Lightweight card for the public demo gallery."""
+
+    id: UUID
+    title: str | None = None
+    message_count: int = 0
+    preview: str | None = Field(default=None, description="First user prompt, truncated to 200 chars")
+    created_at: datetime
+    updated_at: datetime | None = None
+
+
+class DemoConversationList(BaseSchema):
+    """Paginated list of public demo conversations."""
+
+    items: list[DemoConversationSummary]
+    total: int

{fastapi_fullstack-0.2.13 → fastapi_fullstack-0.2.14}/template/{{cookiecutter.project_slug}}/backend/app/schemas/conversation_share.py

@@ -62,6 +62,7 @@ class AdminConversationRead(BaseSchema):
 {%- endif %}
     title: str | None = None
     is_archived: bool = False
+    is_demo: bool = False
     message_count: int = 0
     user_email: str | None = None
     created_at: datetime

{fastapi_fullstack-0.2.13 → fastapi_fullstack-0.2.14}/template/{{cookiecutter.project_slug}}/backend/app/services/conversation.py

@@ -20,6 +20,7 @@ from app.repositories import chat_file_repo, conversation_share_repo, message_ra
 from app.schemas.conversation import (
     ConversationCreate,
     ConversationUpdate,
+    DemoConversationSummary,
     MessageCreate,
     MessageRead,
     ToolCallCreate,
@@ -317,6 +318,7 @@ class ConversationService:
 {%- endif %}
                 title=conv.title,
                 is_archived=conv.is_archived,
+                is_demo=conv.is_demo,
                 message_count=msg_count,
                 user_email=email,
                 created_at=conv.created_at,
@@ -424,6 +426,38 @@ class ConversationService:
     ) -> Conversation:
         return await self.get_conversation(conversation_id, include_messages=True)
 
+    async def list_demo_conversations(
+        self, *, skip: int = 0, limit: int = 50
+    ) -> tuple[list[DemoConversationSummary], int]:
+        """List admin-curated demo conversations for the public gallery."""
+        rows, total = await conversation_repo.get_demo_conversations_with_count(
+            self.db, skip=skip, limit=limit
+        )
+        items = [
+            DemoConversationSummary(
+                id=conv.id,
+                title=conv.title,
+                message_count=msg_count,
+                preview=preview[:200] if preview else None,
+                created_at=conv.created_at,
+                updated_at=conv.updated_at,
+            )
+            for conv, msg_count, preview in rows
+        ]
+        return items, total
+
+    async def get_demo_conversation(self, conversation_id: UUID) -> Conversation:
+        """Get a single demo conversation with messages (public, no auth required)."""
+        conversation = await conversation_repo.get_conversation_by_id(
+            self.db, conversation_id, include_messages=True
+        )
+        if not conversation or not conversation.is_demo:
+            raise NotFoundError(
+                message="Demo not found",
+                details={"conversation_id": str(conversation_id)},
+            )
+        return conversation
+
     async def get_message(self, message_id: UUID) -> Message:
         message = await conversation_repo.get_message_by_id(self.db, message_id)
         if not message:

{fastapi_fullstack-0.2.13 → fastapi_fullstack-0.2.14}/template/{{cookiecutter.project_slug}}/frontend/src/app/[locale]/(dashboard)/admin/conversations/page.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useMemo, useState } from "react";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
+import { toast } from "sonner";
 import {
   ArrowDown,
   ArrowUp,
@@ -10,6 +11,7 @@ import {
   ChevronLeft,
   ChevronRight,
   ExternalLink,
+  Play,
   Search,
 } from "lucide-react";
 
@@ -93,10 +95,71 @@ function SortButton({
   );
 }
 
+function DemoToggle({ conv, onToggle }: { conv: Conversation; onToggle: (id: string, isDemo: boolean) => void }) {
+  const [busy, setBusy] = useState(false);
+  const toggle = async () => {
+    setBusy(true);
+    try {
+      const next = !conv.is_demo;
+      const res = await fetch(`/api/admin/conversations/${conv.id}/demo?is_demo=${next}`, {
+        method: "PATCH",
+      });
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        toast.error(body?.detail ?? `Failed (${res.status})`);
+        return;
+      }
+      onToggle(conv.id, next);
+      toast.success(next ? "Added to demos" : "Removed from demos");
+    } catch {
+      toast.error("Network error — could not update demo status");
+    } finally {
+      setBusy(false);
+    }
+  };
+  return (
+    <span className="inline-flex items-center gap-1.5">
+      <button
+        type="button"
+        disabled={busy}
+        onClick={toggle}
+        title={conv.is_demo ? "Remove from demos" : "Add to demos"}
+        className={cn(
+          "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium transition-colors",
+          conv.is_demo
+            ? "bg-brand/10 text-brand hover:bg-brand/20"
+            : "bg-muted text-muted-foreground hover:bg-muted/70",
+          busy && "cursor-not-allowed opacity-50",
+        )}
+      >
+        <Play className="h-2.5 w-2.5" />
+        {conv.is_demo ? "In demos" : "Add demo"}
+      </button>
+      {conv.is_demo && (
+        <Link
+          href={`/demo/${conv.id}`}
+          target="_blank"
+          title="Watch demo"
+          className="text-brand/70 hover:text-brand transition-colors"
+        >
+          <ExternalLink className="h-3 w-3" />
+        </Link>
+      )}
+    </span>
+  );
+}
+
 export default function AdminConversationsPage() {
   const t = useTranslations("admin");
-  const { conversations, conversationsTotal, users, isLoading, fetchConversations, fetchUsers } =
+  const { conversations: rawConversations, conversationsTotal, users, isLoading, fetchConversations, fetchUsers } =
     useAdminConversations();
+  const [localDemoState, setLocalDemoState] = useState<Record<string, boolean>>({});
+  const conversations = useMemo(
+    () => rawConversations.map((c) => ({ ...c, is_demo: localDemoState[c.id] ?? c.is_demo ?? false })),
+    [rawConversations, localDemoState],
+  );
+  const handleDemoToggle = (id: string, isDemo: boolean) =>
+    setLocalDemoState((prev) => ({ ...prev, [id]: isDemo }));
 
   const [search, setSearch] = useState("");
   const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
@@ -218,6 +281,13 @@ export default function AdminConversationsPage() {
             <Badge variant="default">Active</Badge>
           ),
       },
+      {
+        key: "demo",
+        align: "right",
+        hideBelow: "sm",
+        header: "Demo",
+        cell: (conv) => <DemoToggle conv={conv} onToggle={handleDemoToggle} />,
+      },
       {
         key: "actions",
         align: "right",
@@ -233,7 +303,7 @@ export default function AdminConversationsPage() {
         ),
       },
     ],
-    [sort.by, sort.dir, t],
+    [sort.by, sort.dir, t, handleDemoToggle],
   );
 
   return (

fastapi_fullstack-0.2.14/template/{{cookiecutter.project_slug}}/frontend/src/app/[locale]/demo/[id]/page.tsx

@@ -0,0 +1,74 @@
+import Link from "next/link";
+import { ArrowLeft, MessageSquare } from "lucide-react";
+import { DemoReplay } from "@/components/demo/demo-replay";
+import type { RawMessage } from "@/lib/conversation-to-chat";
+
+interface DemoConversation {
+  id: string;
+  title: string | null;
+  messages: RawMessage[];
+}
+
+async function fetchDemo(id: string): Promise<DemoConversation | null> {
+  if (!/^[0-9a-fA-F-]{36}$/.test(id)) return null;
+  const baseUrl = process.env.BACKEND_URL || "http://localhost:{{ cookiecutter.backend_port }}";
+  try {
+    const res = await fetch(`${baseUrl}/api/v1/demos/${id}`, { cache: "no-store" });
+    if (!res.ok) return null;
+    return res.json();
+  } catch {
+    return null;
+  }
+}
+
+export default async function DemoDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string; locale: string }>;
+}) {
+  const { id, locale } = await params;
+  const demo = await fetchDemo(id);
+
+  if (!demo) {
+    return (
+      <div className="bg-background flex min-h-screen items-center justify-center px-4">
+        <div className="text-center">
+          <MessageSquare className="mx-auto h-12 w-12 text-muted-foreground" />
+          <h1 className="mt-4 text-xl font-semibold text-foreground">Demo not found</h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            This demo may have been removed or is no longer public.
+          </p>
+          <Link
+            href={`/${locale}/demo`}
+            className="mt-6 inline-flex items-center gap-1.5 text-sm font-medium text-brand hover:underline"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            Back to all demos
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-background flex h-screen flex-col overflow-hidden">
+      <header className="bg-background/90 sticky top-0 z-20 border-b border-border backdrop-blur">
+        <div className="flex h-14 items-center gap-4 px-6">
+          <Link
+            href={`/${locale}/demo`}
+            className="inline-flex shrink-0 items-center gap-1.5 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            Demos
+          </Link>
+          <span className="text-border select-none">·</span>
+          <h1 className="truncate text-sm font-medium text-foreground/70">
+            {demo.title || "Agent session"}
+          </h1>
+        </div>
+      </header>
+
+      <DemoReplay rawMessages={demo.messages || []} />
+    </div>
+  );
+}

fastapi_fullstack-0.2.14/template/{{cookiecutter.project_slug}}/frontend/src/app/[locale]/demo/page.tsx

@@ -0,0 +1,156 @@
+{% raw %}import Link from "next/link";
+import { Play } from "lucide-react";
+
+interface DemoListItem {
+  id: string;
+  title: string | null;
+  message_count: number;
+  preview: string | null;
+  created_at: string;
+}
+
+async function fetchDemos(): Promise<DemoListItem[]> {
+  const baseUrl = process.env.BACKEND_URL || "http://localhost:{% endraw %}{{ cookiecutter.backend_port }}{% raw %}";
+  try {
+    const res = await fetch(`${baseUrl}/api/v1/demos`, { cache: "no-store" });
+    if (!res.ok) return [];
+    const data = await res.json();
+    return Array.isArray(data?.items) ? data.items : [];
+  } catch {
+    return [];
+  }
+}
+
+function WaveTrace({ seed, count }: { seed: string; count: number }) {
+  const n = Math.min(count, 22);
+  const stripped = seed.replace(/-/g, "") || "abcdef";
+  return (
+    <div className="flex h-7 items-end gap-[2px]">
+      {Array.from({ length: n }, (_, i) => {
+        const c = stripped.charCodeAt(i % stripped.length) || 65;
+        const h = 20 + ((c * 17 + i * 31) % 65);
+        const barStyle = {
+          height: `${h}%`,
+          width: "3px",
+          borderRadius: "9999px",
+          background: "var(--color-brand)",
+          opacity: i % 2 === 0 ? 0.72 : 0.28,
+        };
+        return <div key={i} style={barStyle} />;
+      })}
+    </div>
+  );
+}
+
+const glowRight = {
+  background: "radial-gradient(circle, oklch(65% 0.2 250 / 0.11) 0%, transparent 70%)",
+};
+const glowLeft = {
+  background: "radial-gradient(circle, oklch(65% 0.2 250 / 0.06) 0%, transparent 70%)",
+};
+const cardHoverGradient = {
+  background: "radial-gradient(ellipse at top left, oklch(65% 0.2 250 / 0.07) 0%, transparent 55%)",
+};
+
+export default async function DemoGalleryPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const demos = await fetchDemos();
+
+  return (
+    <div className="theme-dark bg-background min-h-screen">
+      {/* Hero */}
+      <div className="relative overflow-hidden px-4 pb-20 pt-24 sm:pt-32">
+        {/* Ambient glow blobs */}
+        <div
+          aria-hidden
+          className="pointer-events-none absolute -right-40 -top-40 h-[560px] w-[560px] rounded-full"
+          style={glowRight}
+        />
+        <div
+          aria-hidden
+          className="pointer-events-none absolute -left-24 top-1/2 h-[380px] w-[380px] rounded-full"
+          style={glowLeft}
+        />
+
+        <div className="relative mx-auto max-w-5xl">
+          {/* Live indicator */}
+          <div className="mb-6 inline-flex items-center gap-2 font-mono text-xs font-medium uppercase tracking-[0.18em] text-brand">
+            <span className="relative flex h-1.5 w-1.5">
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-brand opacity-60" />
+              <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-brand" />
+            </span>
+            Live sessions · {demos.length} available
+          </div>
+
+          <h1 className="mb-6 max-w-3xl font-display text-5xl font-bold leading-[1.06] tracking-tight text-foreground sm:text-6xl">
+            Watch the AI
+            <br />
+            work in real time.
+          </h1>
+          <p className="max-w-xl text-lg leading-relaxed text-muted-foreground">
+            Every tool call, every decision — replayed frame by frame,
+            exactly as it happened.
+          </p>
+        </div>
+      </div>
+
+      {/* Cards */}
+      <div className="mx-auto max-w-5xl px-4 pb-24">
+        {demos.length === 0 ? (
+          <div className="rounded-2xl border border-dashed border-border py-20 text-center">
+            <p className="text-sm text-muted-foreground">No demos available yet. Check back soon.</p>
+          </div>
+        ) : (
+          <div className="grid gap-5 sm:grid-cols-2">
+            {demos.map((demo) => (
+              <Link
+                key={demo.id}
+                href={`/${locale}/demo/${demo.id}`}
+                className="group relative flex flex-col overflow-hidden rounded-2xl border border-border bg-card p-6 transition-all duration-300 hover:border-brand/30"
+              >
+                {/* Hover gradient reveal */}
+                <div
+                  className="pointer-events-none absolute inset-0 rounded-2xl opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+                  style={cardHoverGradient}
+                />
+
+                {/* Wave trace + turn count */}
+                <div className="relative mb-5 flex items-end justify-between">
+                  <WaveTrace seed={demo.id} count={demo.message_count} />
+                  <span className="font-mono text-[10px] tabular-nums text-muted-foreground">
+                    {demo.message_count} turns
+                  </span>
+                </div>
+
+                {/* Title */}
+                <h2 className="relative mb-3 font-display text-xl font-bold leading-tight text-foreground">
+                  {demo.title || "Agent session"}
+                </h2>
+
+                {/* Preview */}
+                {demo.preview && (
+                  <p className="relative line-clamp-2 text-sm leading-relaxed text-muted-foreground">
+                    &ldquo;{demo.preview}&rdquo;
+                  </p>
+                )}
+
+                {/* CTA */}
+                <div className="relative mt-auto flex items-center justify-end pt-6">
+                  <span className="inline-flex items-center gap-1.5 text-sm font-medium text-brand transition-transform duration-200 group-hover:translate-x-0.5">
+                    Watch replay
+                    <Play className="h-3.5 w-3.5 fill-current" />
+                  </span>
+                </div>
+              </Link>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+{% endraw %}