Skip to content

feat(dashboard): command + response/error preview on timeline hover (#514) - #578

Merged
vybe merged 1 commit into
devfrom
feature/514-timeline-hover-preview
Apr 29, 2026
Merged

feat(dashboard): command + response/error preview on timeline hover (#514)#578
vybe merged 1 commit into
devfrom
feature/514-timeline-hover-preview

Conversation

@dolho

@dolho dolho commented Apr 29, 2026

Copy link
Copy Markdown
Contributor

Summary

Timeline bars on the dashboard now surface a preview on hover so it's possible to scan executions without clicking each one. Tooltip is three lines:

  • Header: trigger type, status, duration (unchanged)
  • Cmd: first 80 chars of the originating message
  • Out or Error: first 80 chars of the response on success, or the error text on failure

Pipeline

  • Backend (services/task_execution_service.py): on success completion, merge details.response_preview = sanitized_resp[:200] into the chat_start activity row. Failed activities already populate activity.error via the existing complete_activity(error=...) calls.
  • Store (stores/network.js): timeline mapper now exposes command_preview (from details.message_preview, already populated at start), response_preview, and the existing error on every event.
  • Component (components/ReplayTimeline.vue): threads the new fields through agentActivityMap and bars. getBarTooltip renders the new lines via previewLine() — collapses whitespace, truncates to 80 chars with an ellipsis, drops the line entirely when input is empty so the tooltip stays compact.

Uses the existing SVG <title> primitive (same as the schedule-marker tooltip), so newline rendering is consistent. No new API round-trip — the preview data piggybacks on /api/activities/timeline via the existing details JSON field.

Acceptance criteria

  • Hover shows two preview lines (cmd + response/error). Empty payloads silently skip the line so short tasks stay tidy.
  • Failed executions show Error: … in place of Out: ….
  • Works for chat, scheduled, agent-triggered, MCP, paid, and public executions — all funnel through task_execution_service.execute_task.
  • No additional API round-trip — preview ships in the existing timeline payload.
  • Long content truncated at 80 chars with ; whitespace collapsed.
  • Mobile graceful degradation: SVG <title> is hover-only; tap on a bar still opens the execution detail page (existing behaviour).

Test plan

  • Backend write path verified: triggered an execution, queried the DB row → details.response_preview present after my change (synthetic preview rendered for visual smoke, then cleaned up).
  • API serves it: GET /api/activities/timeline returns details.response_preview in the activity payload.
  • Frontend build passes (vite build clean).
  • Visual eyeball required by reviewer: dashboard → Timeline mode → hover an execution bar. Confirm three lines render with \\n newlines.

Notes for reviewer

I exercised the data pipeline end-to-end against the running stack. The visual tooltip rendering itself wasn't browser-tested in this session — the SVG <title> newline pattern is already proven by the schedule-marker tooltip in the same component, and the build is clean, but please give it a 5-second eyeball before merging.

Closes #514.

🤖 Generated with Claude Code

…514)

Hovering a timeline bar now shows three lines:
  Header: Trigger type, status, duration (unchanged)
  Cmd: first 80 chars of the originating message
  Out: first 80 chars of the response (success)
       — OR —
  Error: first 80 chars of activity.error (failure)

Pipeline:
- Backend: task_execution_service writes details.response_preview
  (sanitized_resp[:200]) on the success-completion merge into the
  chat_start activity row. Failed activities already populate
  activity.error via complete_activity(error=...).
- Store: network.js maps details.message_preview /
  details.response_preview / activity.error onto each timeline event.
- Component: ReplayTimeline.vue threads the new fields through
  agentActivityMap and bars, then renders them in the existing
  SVG <title> element. previewLine() collapses whitespace and
  truncates to 80 chars + ellipsis; whitespace-only previews are
  silently skipped so the tooltip stays compact when there's
  nothing useful to show.

Note: SVG <title> is the same primitive the schedule-marker tooltip
already uses, so multi-line behavior is consistent across the
timeline. Mobile devices that don't dispatch hover degrade to the
existing click → execution detail page.

Verified end-to-end: backend write → /api/activities/timeline →
store mapping. Visual rendering of the new tooltip lines should be
eyeballed in the Trinity dashboard timeline view.

Closes #514.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@dolho

dolho commented Apr 29, 2026

Copy link
Copy Markdown
Contributor Author
image

@dolho
dolho requested a review from vybe April 29, 2026 10:06

@vybe vybe left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM — data pipeline verified (message_preview at task_execution_service.py:324,349). Please do a quick hover-check on the timeline before calling it done.

@vybe
vybe merged commit f6226dd into dev Apr 29, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants