diff --git a/CHANGELOG.md b/CHANGELOG.md index b8eaaf34..1e121d30 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,9 @@ ## [Unreleased] +### Changed +- Live chat Activity now shows observable run events, model/run metadata, clearer working elapsed text, and explicit waiting/stale states instead of an empty `Thinking…` placeholder when no reasoning text is available. + ## [v0.51.124] — 2026-05-24 — Release CV (stage-batch6 — 3-PR Windows-only stack — agent paths / docs / port hardening) ### Added diff --git a/static/style.css b/static/style.css index d010f4e1..a11495ec 100644 --- a/static/style.css +++ b/static/style.css @@ -2322,6 +2322,15 @@ body.resizing .sidebar{transition:none!important;} .tool-call-group:not(.tool-call-group-collapsed) .tool-call-group-chevron{transform:rotate(90deg);} .tool-call-group-body{display:block;padding-left:var(--space-3);} .tool-call-group.tool-call-group-collapsed .tool-call-group-body{display:none;} +.agent-activity-status{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:start;gap:var(--space-2);padding:5px 0;color:var(--muted);font-size:var(--font-size-xs);line-height:1.45;border-bottom:1px solid color-mix(in srgb,var(--border-subtle) 60%,transparent);} +.agent-activity-status:last-child{border-bottom:0;} +.agent-activity-status-icon{display:inline-flex;align-items:center;justify-content:center;min-height:18px;opacity:.72;color:var(--muted);} +.agent-activity-status-copy{display:flex;flex-direction:column;min-width:0;gap:1px;} +.agent-activity-status-label{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} +.agent-activity-status-detail{color:var(--muted);opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} +.agent-activity-status-time{font-variant-numeric:tabular-nums;opacity:.55;white-space:nowrap;} +.agent-activity-status-waiting .agent-activity-status-label{color:var(--muted);} +.agent-activity-status-error .agent-activity-status-label{color:var(--error);} .tool-call-group-label{font-weight:600;color:var(--muted);position:relative;display:inline-block;overflow:hidden;} .tool-call-group[data-live-tool-call-group="1"] .tool-call-group-label{ color:var(--muted); diff --git a/static/ui.js b/static/ui.js index c6a5cd2a..4e7abe16 100644 --- a/static/ui.js +++ b/static/ui.js @@ -2208,6 +2208,7 @@ function _startCompressionElapsedTimer(){if(!_compressionElapsedTimer)_compressi function _clearCompressionElapsedTimer(){if(_compressionElapsedTimer){clearInterval(_compressionElapsedTimer);_compressionElapsedTimer=null;}} let _activityElapsedTimer=null; let _activityElapsedTimerGroup=null; +function _activityNowSeconds(){return Date.now()/1000;} function _activityElapsedStartedAt(group){ if(!group)return null; const raw=(group.dataset&&group.dataset.turnStartedAt!==undefined&&group.dataset.turnStartedAt!=='') @@ -2219,7 +2220,52 @@ function _activityElapsedStartedAt(group){ function _activityElapsedLabel(group){ const started=_activityElapsedStartedAt(group); if(!started)return''; - return _formatActiveElapsedTimer((Date.now()/1000)-started); + return _formatActiveElapsedTimer(_activityNowSeconds()-started); +} +function _activityMarkObserved(group, ts){ + if(!group||group.getAttribute('data-live-tool-call-group')!=='1')return; + const stamp=Number(ts||_activityNowSeconds()); + if(Number.isFinite(stamp)&&stamp>0) group.setAttribute('data-last-activity-at',String(stamp)); +} +function _activityLastObservedAge(group){ + const stamp=Number(group&&group.getAttribute('data-last-activity-at')); + if(!Number.isFinite(stamp)||stamp<=0)return null; + return Math.max(0,_activityNowSeconds()-stamp); +} +function _activityClockLabel(ts){ + const stamp=Number(ts||_activityNowSeconds()); + if(!Number.isFinite(stamp)||stamp<=0)return''; + try{return new Date(stamp*1000).toLocaleTimeString([], {hour:'numeric',minute:'2-digit'});}catch(_){return'';} +} +function _activityStatusNode({kind='info',label='',detail='',status='done',ts=null,id=''}){ + const row=document.createElement('div'); + row.className=`agent-activity-status agent-activity-status-${kind} agent-activity-status-${status}`; + if(id) row.setAttribute('data-activity-event-id',id); + if(ts) row.setAttribute('data-activity-at',String(ts)); + const iconMap={run:li('play',13),model:li('bot',13),waiting:'',thinking:li('lightbulb',13),tool:li('wrench',13),done:li('check',13),warning:li('alert-triangle',13)}; + row.innerHTML=`${iconMap[kind]||iconMap.info||li('circle',13)}${esc(label)}${detail?`${esc(detail)}`:''}${esc(_activityClockLabel(ts))}`; + return row; +} +function _appendActivityEvent(group, event){ + if(!group)return null; + const body=group.querySelector('.tool-call-group-body'); + if(!body)return null; + const eventId=event&&event.id; + let row=eventId?body.querySelector(`.agent-activity-status[data-activity-event-id="${CSS.escape(eventId)}"]`):null; + const next=_activityStatusNode(event||{}); + if(row){row.replaceWith(next);row=next;} + else{body.appendChild(next);row=next;} + _activityMarkObserved(group,event&&event.ts); + return row; +} +function _ensureLiveActivityBaseline(group){ + if(!group||group.getAttribute('data-live-tool-call-group')!=='1')return; + const started=_activityElapsedStartedAt(group)||_activityNowSeconds(); + if(!group.getAttribute('data-turn-started-at')) group.setAttribute('data-turn-started-at',String(started)); + if(!group.getAttribute('data-last-activity-at')) group.setAttribute('data-last-activity-at',String(started)); + _appendActivityEvent(group,{id:'run-started',kind:'run',label:'Run started',detail:'Observable activity will appear here as the agent works.',status:'done',ts:started}); + const modelLabel=(S.session&&S.session.model)?getModelLabel(S.session.model):''; + if(modelLabel)_appendActivityEvent(group,{id:'run-model',kind:'model',label:`Model: ${modelLabel}`,detail:S.activeProfile&&S.activeProfile!=='default'?`Profile: ${S.activeProfile}`:'',status:'done',ts:started}); } function _setActivityElapsedStartedAt(group){ if(!group||group.getAttribute('data-live-tool-call-group')!=='1')return; @@ -2240,8 +2286,10 @@ function _updateActiveActivityElapsedTimer(){ group.removeAttribute('data-active-turn-elapsed'); } if(durationEl){ - durationEl.textContent=label?`Working ${label}`:''; - durationEl.style.display=label?'':'none'; + const activeText=label?`Working for ${label}`:''; + const progressText=_activityLiveProgressLabel(group); + durationEl.textContent=[progressText, activeText].filter(Boolean).join(' · '); + durationEl.style.display=durationEl.textContent?'':'none'; } } function _startActivityElapsedTimer(group){ @@ -5219,7 +5267,10 @@ function ensureActivityGroup(inner, opts){ }else if(activityKey&&!group.getAttribute('data-activity-disclosure-key')){ group.setAttribute('data-activity-disclosure-key',activityKey); } - if(live) _setActivityElapsedStartedAt(group); + if(live){ + _setActivityElapsedStartedAt(group); + _ensureLiveActivityBaseline(group); + } _syncToolCallGroupSummary(group); if(live) _startActivityElapsedTimer(group); return group; @@ -6657,7 +6708,9 @@ function _syncToolCallGroupSummary(group){ const label=group.querySelector('.tool-call-group-label'); const durationEl=group.querySelector('.tool-call-group-duration'); if(label){ - if(toolCount) label.textContent=`Activity: ${toolCount} tool${toolCount===1?'':'s'}`; + if(group.getAttribute('data-live-tool-call-group')==='1'){ + label.textContent=toolCount?`Activity: ${toolCount} tool${toolCount===1?'':'s'}`:'Activity · Running'; + }else if(toolCount) label.textContent=`Activity: ${toolCount} tool${toolCount===1?'':'s'}`; else label.textContent='Activity'; label.setAttribute('data-sweep-label', label.textContent); } @@ -6691,9 +6744,14 @@ function _activityProgressLabelForToolName(name){ function _activityLiveProgressLabel(group){ if(!group||group.getAttribute('data-live-tool-call-group')!=='1') return ''; + const idleAge=_activityLastObservedAge(group); + if(idleAge!==null&&idleAge>=90) return `No recent activity for ${_formatActiveElapsedTimer(idleAge)}`; const running=group.querySelector('.tool-card.tool-card-running .tool-card-name'); const latest=running || Array.from(group.querySelectorAll('.tool-card-name')).pop(); - return _activityProgressLabelForToolName(latest?latest.textContent:''); + const waiting=group.querySelector('.agent-activity-status-waiting .agent-activity-status-label'); + if(latest) return _activityProgressLabelForToolName(latest.textContent); + if(waiting&&waiting.textContent) return waiting.textContent; + return 'Starting agent'; } // ── Live tool card helpers (called during SSE streaming) ── @@ -6759,6 +6817,19 @@ function appendLiveToolCard(tc){ const anchor=children.filter(el=>el.matches('[data-live-assistant="1"],.tool-call-group,.tool-card-row,.agent-activity-thinking')).pop(); const group=ensureActivityGroup(inner,{live:true,collapsed:true,anchor,activityKey:_activityKeyForLiveTurn()}); const body=group.querySelector('.tool-call-group-body'); + const toolName=_toolDisplayName(tc); + const toolEventId=tid?`tool-${tid}`:`tool-${String(tc.name||'tool').replace(/[^a-z0-9_-]/gi,'_')}`; + const toolDone=tc.done!==false; + _appendActivityEvent(group,{ + id:toolEventId, + kind:'tool', + label:toolDone?`Tool finished: ${toolName}`:`Running tool: ${toolName}`, + detail:tc.preview||tc.snippet||'', + status:toolDone?(tc.is_error?'error':'done'):'waiting', + ts:_activityNowSeconds(), + }); + const waiting=body.querySelector('.agent-activity-status[data-activity-event-id="thinking-placeholder"] .agent-activity-status-label'); + if(waiting&&!toolDone) waiting.textContent='Waiting on tool result'; // Update existing card in place (tool_complete after tool_start) if(tid){ const existing=body.querySelector(`.tool-card-row[data-live-tid="${CSS.escape(tid)}"]`); @@ -7583,6 +7654,7 @@ function appendThinking(text='', options){ return; } const thinkingText=String(text||'').trim()||'Thinking…'; + const cleanThinking=_sanitizeThinkingDisplayText(thinkingText); const allChildren=Array.from(blocks.children); const anchor=allChildren.filter(el=> el.id!=='toolRunningRow' && @@ -7591,6 +7663,20 @@ function appendThinking(text='', options){ const group=ensureActivityGroup(blocks,{live:true,collapsed:true,anchor,activityKey:_activityKeyForLiveTurn()}); const body=group&&group.querySelector('.tool-call-group-body'); if(!body) return; + if(!cleanThinking||cleanThinking==='Thinking…'){ + const label=body.querySelector('.tool-card.tool-card-running')?'Waiting on tool result':'Waiting on model'; + const detail=body.querySelector('.tool-card-row') + ? 'The agent is running; tool results and response text will appear here.' + : 'No tool activity has been reported yet.'; + _appendActivityEvent(group,{id:'thinking-placeholder',kind:'waiting',label,detail,status:'waiting',ts:_activityNowSeconds()}); + const active=body.querySelector('.agent-activity-thinking[data-thinking-active="1"]'); + if(active) active.removeAttribute('data-thinking-active'); + _syncToolCallGroupSummary(group); + scrollIfPinned(); + return; + } + const placeholder=body.querySelector('.agent-activity-status[data-activity-event-id="thinking-placeholder"]'); + if(placeholder) placeholder.remove(); let row=body.querySelector('.agent-activity-thinking[data-thinking-active="1"]'); if(!row){ const thinkingCards=Array.from(body.querySelectorAll('.agent-activity-thinking')); @@ -7598,12 +7684,13 @@ function appendThinking(text='', options){ if(row) row.setAttribute('data-thinking-active','1'); } if(!row){ - row=_thinkingActivityNode(thinkingText, false); + row=_thinkingActivityNode(cleanThinking, false); row.setAttribute('data-thinking-active','1'); body.appendChild(row); }else{ - _renderThinkingInto(row,thinkingText); + _renderThinkingInto(row,cleanThinking); } + _activityMarkObserved(group); _syncToolCallGroupSummary(group); scrollIfPinned(); if(_scrollPinned){ diff --git a/tests/test_live_activity_timeline.py b/tests/test_live_activity_timeline.py new file mode 100644 index 00000000..f2226de1 --- /dev/null +++ b/tests/test_live_activity_timeline.py @@ -0,0 +1,45 @@ +"""Regression coverage for live Activity timeline UX. + +The live Activity disclosure should surface observable run telemetry instead of a +blank Thinking placeholder while preserving the quiet tool/thinking metadata +family. +""" + +import pathlib + + +REPO = pathlib.Path(__file__).parent.parent +UI_JS = (REPO / "static" / "ui.js").read_text(encoding="utf-8") +STYLE_CSS = (REPO / "static" / "style.css").read_text(encoding="utf-8") + + +def test_live_activity_group_has_observable_baseline_events(): + assert "function _ensureLiveActivityBaseline(group)" in UI_JS + assert "Run started" in UI_JS + assert "Observable activity will appear here as the agent works." in UI_JS + assert "Model: ${modelLabel}" in UI_JS + assert "_ensureLiveActivityBaseline(group);" in UI_JS + + +def test_empty_thinking_placeholder_becomes_status_row_not_raw_thinking_card(): + assert "data-activity-event-id=\"thinking-placeholder\"" in UI_JS + assert "Waiting on model" in UI_JS + assert "No tool activity has been reported yet." in UI_JS + assert "Waiting on tool result" in UI_JS + assert "_thinkingActivityNode(cleanThinking, false)" in UI_JS + + +def test_tool_events_update_activity_timeline_and_summary(): + assert "Tool finished: ${toolName}" in UI_JS + assert "Running tool: ${toolName}" in UI_JS + assert "No recent activity for ${_formatActiveElapsedTimer(idleAge)}" in UI_JS + assert "Activity · Running" in UI_JS + assert "Working for ${label}" in UI_JS + + +def test_activity_status_rows_have_quiet_metadata_styling(): + assert ".agent-activity-status{" in STYLE_CSS + assert "grid-template-columns:18px minmax(0,1fr) auto" in STYLE_CSS + assert ".agent-activity-status-detail" in STYLE_CSS + assert ".agent-activity-status-time" in STYLE_CSS + assert ".agent-activity-status-error .agent-activity-status-label{color:var(--error);}" in STYLE_CSS