feat: release 1.1.0 with responsive task control

apps/showcase_ui/src/app/components/automation-panel/automation-panel.component.html

@@ -12,27 +12,32 @@
   </section>
   <section><h3>当前任务报告</h3>
     @if (report(); as r) {
-      <strong>{{r.name}}</strong><p>{{label(r.status)}} · {{r.verdict}}</p>
+      <div class="report-overview">
+        <strong class="report-title">{{r.name}}</strong>
+        <div class="report-badges"><span [class.failed]="r.status === 'failed'">{{label(r.status)}}</span><span>{{r.verdict}}</span></div>
+        @if (r.error) { <div class="report-error" role="status"><strong>异常原因</strong><p>{{r.error}}</p></div> }
+      </div>
+      <div class="report-meta"><div><strong>任务目标</strong><p>{{r.goal || '未记录'}}</p></div><div><strong>预期结果</strong><p>{{r.expected || '未指定'}}</p></div></div>
       <div class="actions"><a [href]="'/api/automation/reports/'+r.id+'/docx'">下载 Word</a><a [href]="'/api/automation/reports/'+r.id+'/xlsx'">下载 Excel</a>
         <a [href]="'/api/automation/reports/'+r.id+'/screenshots'">步骤截图 ZIP</a>
         <a [href]="'/api/automation/reports/'+r.id+'/video'">分段录屏 ZIP</a>
         <a [href]="'/api/automation/reports/'+r.id+'/all'">下载全部资料</a></div>
-      @if (liveTask()) {
-        <div class="task-guidance">
-          <h3>任务指导 · {{label(taskStatus())}}</h3>
-          <p>运行中提交将在下一步执行前生效；暂停后会释放设备，提交指导即可重新排队恢复。</p>
-          <label for="task-guidance-text">补充信息或调整方向</label>
-          <textarea id="task-guidance-text" [(ngModel)]="guidance" maxlength="10000" rows="3" placeholder="描述已观察到的情况和下一步方向"></textarea>
-          <div class="actions">
-            @if(taskStatus() === 'running'){<button [disabled]="busy()" (click)="pauseTask(r.id)">暂停当前任务</button>}
-            <button [disabled]="busy() || !guidance.trim()" (click)="guideTask(r.id)">提交指导{{taskStatus() === 'task_paused' ? '并恢复' : ''}}</button>
-            @if(taskStatus() === 'task_paused'){<button [disabled]="busy()" (click)="continueTask(r.id)">直接继续</button>}
-          </div>
-        </div>
-      }
       <p class="muted">报告包含目标、预期、实际结论、步骤与截图证据。执行中的下载为当前快照。</p>
-      <pre class="preview">{{r.content}}</pre>
+      <div class="report-content"><h3>结论与发现</h3><div class="report-body" [innerHTML]="renderReport(r.content)"></div></div>
     } @else { <p>从任务队列或历史记录中选择任务，即可下载报告。</p> }
+    @if (liveTask() && agent.currentSessionId()) {
+      <div class="task-guidance">
+        <h3>任务指导 · {{label(taskStatus())}}</h3>
+         <p>{{ taskStatus() === 'paused' ? '模型请求已暂停；提交指导后请在执行日志中恢复模型调用。' : '运行中提交将在下一步执行前生效；暂停后会释放设备，提交指导即可重新排队恢复。' }}</p>
+        <label for="task-guidance-text">补充信息或调整方向</label>
+        <textarea id="task-guidance-text" [(ngModel)]="guidance" maxlength="10000" rows="3" placeholder="描述已观察到的情况和下一步方向"></textarea>
+        <div class="actions">
+          @if(taskStatus() === 'running'){<button [disabled]="busy()" (click)="pauseTask(agent.currentSessionId()!)">暂停当前任务</button>}
+           <button [disabled]="busy() || !guidance.trim()" (click)="guideTask(agent.currentSessionId()!)">提交指导{{taskStatus() === 'task_paused' ? '并恢复' : ''}}</button>
+           @if(taskStatus() === 'task_paused'){<button [disabled]="busy()" (click)="continueTask(agent.currentSessionId()!)">直接继续</button>}
+        </div>
+      </div>
+    }
   </section>
 }
 @if (tab() !== 'reports') {
@@ -53,7 +58,12 @@
     }
   </section>
   <section><h3>批次记录</h3>
-    @for(b of batches(); track b.id){<button class="record" [class.selected]="batch()?.id === b.id" (click)="selectBatch(b.id)"><strong>{{b.name}}</strong><span>{{label(b.status)}} · {{b.created_at*1000 | date:'MM-dd HH:mm'}}</span></button>}
+    @for(b of batches(); track b.id){
+      <div class="batch-record">
+        <button class="record" [class.selected]="batch()?.id === b.id" (click)="selectBatch(b.id)"><strong>{{b.name}}</strong><span>{{label(b.status)}} · {{b.created_at*1000 | date:'MM-dd HH:mm'}}</span></button>
+        <button class="delete-batch" type="button" [disabled]="busy() || b.status === 'running'" (click)="deleteBatch(b)" [attr.aria-label]="'删除批次：' + b.name" [title]="b.status === 'running' ? '执行中的批次不能删除' : '删除批次记录（保留已执行任务与报告）'"><span class="material-symbols-outlined">delete_outline</span></button>
+      </div>
+    }
     @if(!batches().length){<p>暂无批次。</p>}
   </section>
   @if(batch(); as b){<section><h3>{{b.name}}</h3><p>{{label(b.status)}} · {{b.reason}}</p>

apps/showcase_ui/src/app/components/automation-panel/automation-panel.component.scss

@@ -17,8 +17,26 @@ input[type=checkbox]{width:15px;height:15px;accent-color:#2563eb;vertical-align:
 .upload{position:relative;margin:0;color:#fff;background:#2563eb;border-color:#2563eb;}.upload:hover{background:#1d4ed8;border-color:#1d4ed8;}.upload input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;}
 .device{background:#f8fafc;padding:12px 16px;}.device label{margin:0;}
 .record{display:flex;width:100%;text-align:left;align-items:flex-start;flex-direction:column;gap:4px;margin:8px 0 0;padding:12px;overflow-wrap:anywhere;}.record span{color:#64748b;font-size:12px;font-weight:400;}.record.selected{border-color:#93c5fd;background:#eff6ff;}.record.selected strong{color:#1d4ed8;}
+.batch-record{display:flex;gap:8px;align-items:stretch;margin-top:8px;}.batch-record .record{flex:1;min-width:0;width:auto;margin:0;}.batch-record .delete-batch{flex:0 0 40px;min-width:40px;padding:0;color:#b91c1c;}.batch-record .delete-batch:hover:not(:disabled){background:#fff1f2;border-color:#fda4af;}.batch-record .delete-batch .material-symbols-outlined{font-size:19px;}
 .code{font-family:Consolas,monospace;font-size:12px;line-height:1.6;resize:vertical;background:#f8fafc;}.table-wrap{max-height:260px;overflow:auto;border:1px solid #e2e8f0;border-radius:8px;margin-bottom:14px;}table{width:100%;border-collapse:collapse;}th,td{padding:9px 10px;border-bottom:1px solid #e2e8f0;text-align:left;overflow-wrap:anywhere;}th{background:#f8fafc;color:#475569;font-weight:500;}
 .preview{white-space:pre-wrap;max-height:400px;overflow:auto;font:inherit;color:#334155;background:#f8fafc;border-radius:8px;padding:12px;border:1px solid #e2e8f0;}
 .job{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid #f1f5f9;}.job:last-child{border-bottom:0;}.job button{flex:1;justify-content:flex-start;text-align:left;min-width:150px;}.job span{font-size:12px;background:#f1f5f9;color:#475569;border-radius:5px;padding:3px 7px;}.job small{width:100%;}details{margin:14px 0;}summary{color:#475569;cursor:pointer;padding:8px 0;}
 .task-guidance{margin-top:16px;padding:14px;border:1px solid #bfdbfe;border-radius:10px;background:#f8fbff;}
 .task-guidance label{margin:8px 0 4px;}
+.report-overview{padding:14px;border:1px solid #dbeafe;border-radius:10px;background:#f8fbff;}
+.report-title{display:block;font-size:14px;line-height:1.5;color:#0f172a;overflow-wrap:anywhere;}
+.report-badges{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px;span{padding:3px 8px;border:1px solid #bfdbfe;border-radius:20px;background:#eff6ff;color:#1e40af;font-size:12px;&.failed{background:#fff1f2;border-color:#fecdd3;color:#be123c;}}}
+.report-error{margin-top:11px;padding:10px 12px;background:#fff1f2;border-left:3px solid #e11d48;border-radius:6px;color:#9f1239;strong{font-size:12px;}p{margin:4px 0 0;color:#9f1239;white-space:pre-wrap;}}
+.report-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:12px 0;div{min-width:0;padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;}strong{font-size:12px;color:#475569;}p{margin:5px 0 0;white-space:pre-wrap;color:#1e293b;}}
+.report-content{margin-top:14px;padding:14px;border:1px solid #e2e8f0;border-radius:10px;background:#fff;h3{margin-bottom:12px;}}
+.report-body{overflow-x:auto;overflow-wrap:anywhere;color:#1e293b;line-height:1.75;}
+:host ::ng-deep .report-body, :host ::ng-deep .report-markdown-body {
+  h1,h2,h3,h4{margin:18px 0 8px;color:#0f172a;line-height:1.4;}h1{font-size:18px;}h2{font-size:16px;}h3,h4{font-size:14px;}
+  > div{margin:3px 0;}
+  ul,ol{margin:8px 0;padding-left:24px;}li{margin:4px 0;}
+  blockquote{margin:10px 0;padding:8px 12px;border-left:3px solid #93c5fd;background:#f8fafc;}
+  pre{max-width:100%;overflow:auto;padding:10px 12px;background:#f1f5f9;border-radius:6px;white-space:pre-wrap;}
+  code{font-family:Consolas,monospace;background:#f1f5f9;padding:1px 3px;border-radius:3px;}
+  table{width:100%;border-collapse:collapse;font-size:12px;}th,td{padding:7px 9px;border:1px solid #e2e8f0;vertical-align:top;}th{background:#eff6ff;color:#1e3a8a;}
+  .md-para-gap{height:8px;}
+}

apps/showcase_ui/src/app/components/automation-panel/automation-panel.component.spec.ts

@@ -0,0 +1,80 @@
+import { signal } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { TestBed } from '@angular/core/testing';
+import { of } from 'rxjs';
+
+import { AgentService } from '../../services/agent.service';
+import { SystemService } from '../../services/system.service';
+import { AutomationPanelComponent } from './automation-panel.component';
+
+describe('AutomationPanelComponent batch deletion', () => {
+  const agent = {
+    currentSessionId: signal<string | null>(null),
+    runningSessionId: signal<string | null>(null),
+    agentStatus: signal('idle'),
+    sessions: signal<any[]>([])
+  };
+  const http = jasmine.createSpyObj<HttpClient>('HttpClient', ['get', 'delete']);
+
+  beforeEach(async () => {
+    (http.get.and as any).callFake((url: string) => of(url.endsWith('/preferences')
+      ? { formats: ['docx', 'xlsx'], batch_timeout_seconds: 1800 } : []));
+    http.delete.and.returnValue(of({ status: 'deleted' }));
+    http.delete.calls.reset();
+    await TestBed.configureTestingModule({
+      imports: [AutomationPanelComponent],
+      providers: [
+        { provide: AgentService, useValue: agent },
+        { provide: SystemService, useValue: { connectedDevices: signal([]) } },
+        { provide: HttpClient, useValue: http }
+      ]
+    }).compileComponents();
+  });
+
+  it('confirms deletion and removes the batch from the visible list', async () => {
+    const fixture = TestBed.createComponent(AutomationPanelComponent);
+    fixture.componentInstance.tab.set('batches');
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+    fixture.componentInstance.batches.set([
+      { id: 'batch-1', name: '批量冒烟', status: 'completed', created_at: 100 }
+    ]);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('[aria-label="删除批次：批量冒烟"]')).not.toBeNull();
+
+    spyOn(window, 'confirm').and.returnValue(true);
+    const button = fixture.nativeElement.querySelector('.delete-batch') as HTMLButtonElement;
+    button.click();
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+    fixture.detectChanges();
+    expect(http.delete).toHaveBeenCalledWith('/api/automation/batches/batch-1');
+    expect(fixture.componentInstance.batches()).toEqual([]);
+  });
+
+  it('keeps a running batch protected from the delete control', async () => {
+    const fixture = TestBed.createComponent(AutomationPanelComponent);
+    fixture.componentInstance.tab.set('batches');
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+    fixture.componentInstance.batches.set([
+      { id: 'batch-2', name: '进行中', status: 'running', created_at: 100 }
+    ]);
+    fixture.detectChanges();
+    expect((fixture.nativeElement.querySelector('.delete-batch') as HTMLButtonElement).disabled).toBeTrue();
+  });
+
+  it('shows the failure reason and renders Chinese report structure with line breaks', () => {
+    const fixture = TestBed.createComponent(AutomationPanelComponent);
+    fixture.detectChanges();
+    fixture.componentInstance.report.set({
+      id: 'task-1', name: '系统设置检查', status: 'failed', verdict: '未验证',
+      error: '模型连续 3 次未提供可执行工具调用', goal: '查看设置', expected: '',
+      content: '## 结果\n第一行\n第二行\n\n| 项目 | 状态 |\n| --- | --- |\n| 设置 | 未验证 |'
+    });
+    fixture.detectChanges();
+    const root = fixture.nativeElement as HTMLElement;
+    expect(root.querySelector('.report-error')?.textContent).toContain('连续 3 次');
+    expect(root.querySelector('.report-body h2')?.textContent).toBe('结果');
+    expect(root.querySelector('.report-body')?.textContent).toContain('第一行');
+    expect(root.querySelector('.report-body')?.textContent).toContain('第二行');
+    expect(root.querySelector('.report-body table td')?.textContent).toBe('设置');
+  });
+});

apps/showcase_ui/src/app/components/automation-panel/automation-panel.component.ts

@@ -1,10 +1,11 @@
-import { Component, DestroyRef, effect, inject, signal } from '@angular/core';
+import { Component, DestroyRef, computed, effect, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { HttpClient } from '@angular/common/http';
 import { firstValueFrom } from 'rxjs';
 import { AgentService } from '../../services/agent.service';
 import { SystemService } from '../../services/system.service';
+import { renderMarkdownToHtml } from '../../utils/markdown-parser.util';
 
 @Component({
   selector: 'app-automation-panel', standalone: true, imports: [CommonModule, FormsModule],
@@ -16,8 +17,13 @@ export class AutomationPanelComponent {
   batches = signal<any[]>([]); preview = signal<any>(null);
   batch = signal<any>(null); report = signal<any>(null);
   guidance = '';
-  taskStatus = signal('');
-  liveTask = signal(false);
+  taskStatus = computed(() => {
+    const sid = this.agent.currentSessionId();
+    if (!sid) return '';
+    return this.agent.sessions().find(s => s.session_id === sid)?.status
+      || (this.agent.runningSessionId() === sid ? this.agent.agentStatus() : '') || '';
+  });
+  liveTask = computed(() => ['running', 'paused', 'task_paused', 'resuming'].includes(this.taskStatus()));
   word = true; excel = true; name = ''; device = ''; profile = 'flash'; stopOnFailure = false; timeout = 1800;
   private destroyed = false;
   constructor() {
@@ -33,6 +39,7 @@ export class AutomationPanelComponent {
   }
   formats() { return [ ...(this.word ? ['docx'] : []), ...(this.excel ? ['xlsx'] : []) ]; }
   label(s: string) { return ({draft:'待开始',running:'执行中',paused:'已暂停',task_paused:'等待指导',resuming:'等待设备恢复',completed:'执行完成',failed:'失败',cancelled:'已取消',pending:'待执行',queued:'排队中',interrupted:'中断',skipped:'跳过',finalizing:'正在生成报告'} as Record<string,string>)[s] || s; }
+  renderReport(content: string) { return renderMarkdownToHtml(content || ''); }
   async action(fn: () => Promise<void>) {
     if (this.busy()) return;
     this.busy.set(true); this.error.set(''); this.notice.set('');
@@ -46,11 +53,6 @@ export class AutomationPanelComponent {
       this.batches.set(b);
       const sid = this.agent.currentSessionId();
       if (sid && this.tab() === 'reports') { const r = await firstValueFrom(this.http.get<any>(`/api/automation/reports/${encodeURIComponent(sid)}`)); if (this.agent.currentSessionId() === sid) this.report.set(r); }
-      if (sid) {
-        const current = this.agent.sessions().find(s => s.session_id === sid);
-        this.taskStatus.set(current?.status || this.report()?.status || '');
-        this.liveTask.set(['running','task_paused','resuming'].includes(current?.status || ''));
-      } else { this.taskStatus.set(''); this.liveTask.set(false); }
       const id = this.batch()?.id;
       if (id) { const item = await firstValueFrom(this.http.get<any>(`/api/automation/batches/${id}`)); if (this.batch()?.id === id) this.batch.set(item); }
     } catch { /* User initiated actions expose errors; polling retries on the next interval. */ }
@@ -70,12 +72,25 @@ export class AutomationPanelComponent {
     this.preview.set(null); this.notice.set('批次已开始，可暂停或查看每项结果'); await this.refresh();
   }); }
   selectBatch(id: string) { void this.action(async () => { this.batch.set(await firstValueFrom(this.http.get(`/api/automation/batches/${id}`))); }); }
+  deleteBatch(item: { id: string; name: string }) {
+    if (!window.confirm(`删除批次“${item.name}”？未执行任务会移除，已执行任务与报告仍保留。`)) return;
+    void this.action(async () => {
+      await firstValueFrom(this.http.delete(`/api/automation/batches/${encodeURIComponent(item.id)}`));
+      if (this.batch()?.id === item.id) this.batch.set(null);
+      await this.refresh();
+      this.notice.set('批次记录已删除；已执行任务与报告仍可在历史中查看');
+    });
+  }
   batchAction(action: string) { void this.action(async () => { this.batch.set(await firstValueFrom(this.http.post(`/api/automation/batches/${this.batch().id}/${action}`,{}))); await this.refresh(); }); }
   pauseTask(id: string) { void this.action(async () => { await firstValueFrom(this.http.post(`/api/tasks/${encodeURIComponent(id)}/pause`,{})); this.notice.set('已请求暂停：当前步骤结束后释放设备'); await this.refresh(); }); }
   guideTask(id: string) { void this.action(async () => {
     if (!this.guidance.trim()) throw Error('请先填写指导内容');
+    const status = this.taskStatus();
     await firstValueFrom(this.http.post(`/api/tasks/${encodeURIComponent(id)}/guide`,{instruction:this.guidance.trim()}));
-    this.guidance = ''; this.notice.set('指导已提交；运行中将在下一步生效，已暂停的任务会重新排队恢复'); await this.refresh();
+    this.guidance = '';
+    this.agent.fetchGuidance(id);
+    if (status === 'paused') this.notice.set('模型请求暂停，请在执行日志中恢复模型调用');
+    await this.refresh();
   }); }
   continueTask(id: string) { void this.action(async () => {
     await firstValueFrom(this.http.post(`/api/tasks/${encodeURIComponent(id)}/continue`,{}));