feat: restyling active task in task panel

[Wallgau]

restyling active task in the task panel
----------BEFORE--------------
OSS:

Saas:

-----------AFTER--------------
OSS:

Saas:

Summary by CodeRabbit

• New Features
  • Progress views now show detailed task statistics (successful, failed, running, pending) in a dedicated, clearer layout.
• UI/UX Updates
  • Improved visual layout and styling for progress metrics and the active-task cancel control for better consistency and readability.
• Styling
  • Theme tokens updated to better control header sizing and placeholder coloring for more consistent spacing and contrast.

[coderabbitai]

Walkthrough

Extracts progress statistics rendering into a new TaskProgressDetails component with an exported TaskProgressDetailed type, integrates it into TaskNotificationMenu (updates imports, typing, and cancel-button styling), and adds two small Tailwind theme tokens.

Changes

Task Progress Details Extraction and Integration

Layer / File(s)	Summary
TaskProgressDetails component and data contract frontend/components/task-progress-details.tsx	Adds exported TaskProgressDetailed interface and PROGRESS_STATS mapping; implements TaskProgressDetails component rendering a responsive 2-column grid of successful, failed, running, and pending stats with Circle icons and conditional isCloudBrand styling.
TaskNotificationMenu refactoring and button styling frontend/components/task-notification-menu.tsx, frontend/tailwind.config.ts	Updates imports to include TaskProgressDetails and TaskProgressDetailed. Changes formatTaskProgress return type to include `detailed: TaskProgressDetailed

Sequence Diagram(s)

sequenceDiagram
  participant TaskNotificationMenu
  participant TaskProgressDetails
  participant Button
  TaskNotificationMenu->>TaskProgressDetails: provide progress.detailed, isCloudBrand
  TaskProgressDetails->>TaskProgressDetails: render stats grid (PROGRESS_STATS)
  TaskNotificationMenu->>Button: render Cancel button with cancelTaskButtonClass

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• langflow-ai/openrag#1739: Also modifies frontend/components/task-notification-menu.tsx around active-task UI (adds an “Open task details” icon/button wired to openTaskDialog).

Suggested reviewers

• mfortman11

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat: restyling active task in task panel' accurately describes the main changes: refactoring the active task UI component with new styling, button variants, and extracted progress details component.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch active-task-panel

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}