diff --git a/apps/web/src/app/(profile)/[username]/collections/[slug]/scenarios/[id]/page.tsx b/apps/web/src/app/(profile)/[username]/collections/[slug]/scenarios/[id]/page.tsx
index cbe73e9..122bb4c 100644
--- a/apps/web/src/app/(profile)/[username]/collections/[slug]/scenarios/[id]/page.tsx
+++ b/apps/web/src/app/(profile)/[username]/collections/[slug]/scenarios/[id]/page.tsx
@@ -6,6 +6,7 @@ import { Icon } from '@tpmjs/ui/Icon/Icon';
 import Link from 'next/link';
 import { notFound, useParams } from 'next/navigation';
 import { useCallback, useEffect, useState } from 'react';
+import { Streamdown } from 'streamdown';
 import { AppHeader } from '~/components/AppHeader';
 
 interface ScenarioRun {
@@ -32,7 +33,7 @@ interface ScenarioRun {
   };
   output?: string;
   errorLog?: string;
-  conversation?: unknown[];
+  conversation?: Message[];
 }
 
 interface ScenarioDetail {
@@ -61,6 +62,16 @@ interface ScenarioDetail {
   runCount: number;
 }
 
+interface Message {
+  id: string;
+  role: 'USER' | 'ASSISTANT' | 'TOOL';
+  content: string;
+  toolName?: string;
+  toolCallId?: string;
+  toolResult?: unknown;
+  createdAt?: string;
+}
+
 function StatusBadge({ status }: { status: string | null }) {
   if (!status) {
     return <Badge variant="secondary">Not run</Badge>;
@@ -156,6 +167,7 @@ export default function CollectionScenarioDetailPage(): React.ReactElement {
   const [isRunning, setIsRunning] = useState(false);
   const [runError, setRunError] = useState<string | null>(null);
   const [expandedRunId, setExpandedRunId] = useState<string | null>(null);
+  const [viewMode, setViewMode] = useState<'chat' | 'debug'>('chat');
 
   const fetchScenario = useCallback(async () => {
     try {
@@ -249,13 +261,43 @@ export default function CollectionScenarioDetailPage(): React.ReactElement {
 
             {/* Header */}
             <div className="flex items-start justify-between gap-4">
-              <div className="flex-1">
-                <h1 className="text-2xl font-bold text-foreground">
-                  {scenario.name || 'Unnamed Scenario'}
-                </h1>
-                {scenario.description && (
-                  <p className="text-foreground-secondary mt-2">{scenario.description}</p>
-                )}
+               <div className="flex-1">
+                 <h1 className="text-2xl font-bold text-foreground">
+                   {scenario.name || 'Unnamed Scenario'}
+                 </h1>
+                 {scenario.description && (
+                   <p className="text-foreground-secondary mt-2">{scenario.description}</p>
+                 )}
+                 <div className="flex gap-2">
+                   {scenario.isOwner && (
+                     <Button onClick={handleRunScenario} disabled={isRunning}>
+                       {isRunning ? (
+                         <>
+                           <Icon icon="loader" className="w-4 h-4 mr-1.5 animate-spin" />
+                           Running...
+                         </>
+                       ) : (
+                         <>
+                           <Icon icon="arrowRight" className="w-4 h-4 mr-1.5" />
+                           Run Scenario
+                         </>
+                       )}
+                     </Button>
+                   )}
+                   {scenario.isOwner && (
+                     <Button
+                       variant="outline"
+                       size="sm"
+                       onClick={() => {
+                         if (run.conversation && run.conversation.length > 0) {
+                           setViewMode(viewMode === 'chat' ? 'debug' : 'chat');
+                         }
+                       }}
+                       disabled={!run.conversation || run.conversation.length === 0}
+                     >
+                       {viewMode === 'chat' ? 'View Raw' : 'View Chat'}
+                     </Button>
+                   )}
               </div>
               {scenario.isOwner && (
                 <Button onClick={handleRunScenario} disabled={isRunning}>
@@ -404,31 +446,36 @@ export default function CollectionScenarioDetailPage(): React.ReactElement {
                               </div>
                             )}
 
-                            {/* Usage Stats */}
-                            <div className="p-3 bg-surface-secondary rounded-lg">
-                              <h4 className="text-xs font-semibold text-foreground-secondary uppercase tracking-wide mb-2">
-                                Usage
-                              </h4>
-                              <div className="grid grid-cols-2 gap-2 text-sm">
-                                <div>
-                                  <span className="text-foreground-tertiary">Duration:</span>{' '}
-                                  <span className="text-foreground">
-                                    {formatDuration(run.usage?.executionTimeMs || null)}
-                                  </span>
-                                </div>
-                                <div>
-                                  <span className="text-foreground-tertiary">Tokens:</span>{' '}
-                                  <span className="text-foreground">
-                                    {run.usage?.totalTokens?.toLocaleString() || '—'}
-                                  </span>
-                                </div>
-                                <div>
-                                  <span className="text-foreground-tertiary">Retries:</span>{' '}
-                                  <span className="text-foreground">{run.retryCount}</span>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
+                             {/* Usage Stats */}
+                             <div className="p-3 bg-surface-secondary rounded-lg">
+                               <h4 className="text-xs font-semibold text-foreground-secondary uppercase tracking-wide mb-2">
+                                 Usage
+                               </h4>
+                               {run.usage ? (
+                                 <div className="grid grid-cols-2 gap-2 text-sm">
+                                   <div>
+                                     <span className="text-foreground-tertiary">Duration:</span>{' '}
+                                     <span className="text-foreground">
+                                       {formatDuration(run.usage.executionTimeMs || null)}
+                                     </span>
+                                   </div>
+                                   <div>
+                                     <span className="text-foreground-tertiary">Tokens:</span>{' '}
+                                     <span className="text-foreground">
+                                       {run.usage.totalTokens?.toLocaleString() || '—'}
+                                     </span>
+                                   </div>
+                                   <div>
+                                     <span className="text-foreground-tertiary">Retries:</span>{' '}
+                                     <span className="text-foreground">{run.retryCount}</span>
+                                   </div>
+                                 </div>
+                               ) : (
+                                 <div className="text-sm text-foreground-secondary">
+                                   No usage data available
+                                 </div>
+                               )}
+                             </div>
 
                           {/* Output (if owner) */}
                           {run.output && (
@@ -453,6 +500,106 @@ export default function CollectionScenarioDetailPage(): React.ReactElement {
                               </pre>
                             </div>
                           )}
+
+                          {/* Conversation History */}
+                          {run.conversation && (
+                            <div className="mt-4">
+                              <div className="flex items-center justify-between mb-4">
+                                <h4 className="text-xs font-semibold text-foreground-secondary uppercase tracking-wide">
+                                  Conversation History
+                                </h4>
+                                <div className="flex gap-2">
+                                  <Button
+                                    variant={viewMode === 'chat' ? 'default' : 'outline'}
+                                    size="sm"
+                                    onClick={() => setViewMode('chat')}
+                                  >
+                                    Chat
+                                  </Button>
+                                  <Button
+                                    variant={viewMode === 'debug' ? 'default' : 'outline'}
+                                    size="sm"
+                                    onClick={() => setViewMode('debug')}
+                                  >
+                                    Raw
+                                  </Button>
+                                </div>
+                              </div>
+                              {viewMode === 'debug' ? (
+                                <div className="p-4">
+                                  <div className="flex items-center justify-between mb-4">
+                                    <h5 className="text-sm font-medium text-foreground">
+                                      Raw Messages ({run.conversation.length})
+                                    </h5>
+                                    <Button
+                                      variant="outline"
+                                      size="sm"
+                                      onClick={() => {
+                                        navigator.clipboard.writeText(
+                                          JSON.stringify(run.conversation, null, 2)
+                                        );
+                                      }}
+                                    >
+                                      <Icon icon="copy" size="xs" className="mr-2" />
+                                      Copy JSON
+                                    </Button>
+                                  </div>
+                                  <pre className="text-xs font-mono bg-surface-secondary border border-border rounded-lg p-4 overflow-x-auto whitespace-pre-wrap">
+                                    {JSON.stringify(run.conversation, null, 2)}
+                                  </pre>
+                                </div>
+                              ) : (
+                                <div className="space-y-4">
+                                  {run.conversation.map((msg) => (
+                                    <div key={msg.id}>
+                                      {msg.role === 'USER' && (
+                                        <div className="flex justify-end">
+                                          <div className="max-w-[80%] rounded-lg p-4 bg-primary text-primary-foreground">
+                                            <div className="text-sm whitespace-pre-wrap">
+                                              {msg.content}
+                                            </div>
+                                          </div>
+                                        </div>
+                                      )}
+                                      {msg.role === 'ASSISTANT' && (
+                                        <div className="space-y-2">
+                                          {msg.content && (
+                                            <div className="flex justify-start">
+                                              <div className="max-w-[80%] rounded-lg p-4 bg-surface-secondary">
+                                                <div className="text-sm prose prose-sm dark:prose-invert max-w-none">
+                                                  <Streamdown>{msg.content}</Streamdown>
+                                                </div>
+                                              </div>
+                                            </div>
+                                          )}
+                                        </div>
+                                      )}
+                                      {msg.role === 'TOOL' && (
+                                        <div className="flex justify-start">
+                                          <div className="max-w-[80%] rounded-lg border border-border bg-surface-secondary overflow-hidden">
+                                            <div className="p-3">
+                                              <div className="text-sm font-medium text-foreground">
+                                                {msg.toolName || 'Unknown Tool'}
+                                              </div>
+                                              {msg.toolResult && (
+                                                <div className="mt-2 pt-2 border-t border-border/50">
+                                                  <pre className="text-xs text-success overflow-x-auto whitespace-pre-wrap break-all">
+                                                    {typeof msg.toolResult === 'string'
+                                                      ? msg.toolResult
+                                                      : JSON.stringify(msg.toolResult, null, 2)}
+                                                  </pre>
+                                                </div>
+                                              )}
+                                            </div>
+                                          </div>
+                                        </div>
+                                      )}
+                                    </div>
+                                  ))}
+                                </div>
+                              )}
+                            </div>
+                          )}
                         </div>
                       )}
                     </div>