feat: add guided exploration and share user-started MCP backend

apps/showcase_ui/src/app/components/agent-stream/agent-stream.component.html

@@ -506,6 +506,7 @@ limitations under the License.
 
   <!-- Event Logs Section -->
   <main class="stream-logs-content">
+    <ng-content select="[task-summary]"></ng-content>
     @if (agentService.isSessionContentLoading()) {
       <div class="session-loading-state" aria-live="polite">
         <span class="material-symbols-outlined spin-animation">progress_activity</span>
@@ -513,7 +514,7 @@ limitations under the License.
       </div>
     }
 
-    @if (!agentService.isSessionContentLoading() && consolidatedBlocks().length === 0 && !showPlanningLoader() && startupWorkItems().length === 0) {
+    @if (!agentService.isSessionContentLoading() && phases().length === 0 && !showPlanningLoader() && startupWorkItems().length === 0) {
       <div class="empty-state">
         <div class="empty-icon"><span class="material-symbols-outlined">sensors</span></div>
         <h3>尚未选择执行记录</h3>
@@ -552,6 +553,19 @@ limitations under the License.
           </div>
         }
         @for (phase of phases(); track trackPhase($index, phase); let first = $first) {
+          @if(phase.demonstration; as demo) {
+            <article class="exploration-message demonstration"><strong>人工示范 · {{demo.source === 'android' ? '安卓' : demo.source === 'computer' ? '电脑' : '安卓 + 电脑'}} · {{demoLabel(demo.status)}}</strong>
+              @if(demo.analysis){<div class="markdown-content" [innerHTML]="renderMarkdown(demo.analysis.summary, phase.id)"></div>}
+              @if(demo.error){<p class="error">{{demo.error}}</p>}
+              @for(track of demo.media; track $index){@for(segment of track.segments; track segment.file){<details><summary>{{track.kind === 'android' ? '安卓' : '电脑'}}示范录像 · 片段 {{$index + 1}}</summary><video controls preload="none" [src]="demoMediaUrl(demo.run_id,segment.file)"></video><a [href]="demoMediaUrl(demo.run_id,segment.file)" download>下载录像</a></details>}}
+            </article>
+          } @else if(phase.conversation; as message) {
+            <article class="exploration-message" [class.user]="message.role === 'user'" [class.assistant]="message.role === 'assistant'" [class.question]="pendingQuestion() === message.id" [class.system]="message.role === 'system'">
+              <small><span class="material-symbols-outlined">{{message.role === 'user' ? 'person' : message.role === 'assistant' ? 'auto_awesome' : 'info'}}</span>{{message.role === 'user' ? '你的指导' : message.role === 'assistant' ? '探索助手' : '探索记录'}} · {{message.created_at * 1000 | date:'HH:mm:ss'}} @if(pendingQuestion() === message.id){<b>等待你回答</b>}</small>
+              <div class="markdown-content" [innerHTML]="renderMarkdown(message.text, phase.id)"></div>
+              @if(message.recommendation){<div class="recommendation">建议：{{message.recommendation}} @if(pendingQuestion() === message.id){<button (click)="useRecommendation.emit(message.recommendation)">采用建议</button>}</div>}
+            </article>
+          } @else {
           <div class="phase-container">
             @if (hasVisibleBlocks(phase) && phase.blocks[0]?.data?.phase !== 'outcome') {
               <div
@@ -1323,8 +1337,9 @@ limitations under the License.
               </div>
             }
           </div>
+          }
         }
-        @if (awaitingGuidance().length) {
+        @if (!conversationMessages().length && awaitingGuidance().length) {
           <div class="guidance-queue" aria-label="待处理用户指导">
             @for (item of awaitingGuidance(); track item.id) {
               <div class="guidance-queue-item">
@@ -1427,6 +1442,7 @@ limitations under the License.
         }
       </div>
     }
+    <ng-content select="[task-result]"></ng-content>
   </main>
 
   <!-- Fullscreen Image Zoom Lightbox Modal -->