RFE: New Component - Live Progress Summary Card

[asuwebdesign]

RFE: New Component - Live Progress Summary Card

Problem Statement

In many enterprise workflows initiated via conversational AI, users kick off long-running background processes, such as an OpenShift cluster installation. While the AI can start the task, the user lacks a persistent, non-intrusive way to monitor its progress within the chat interface.

As the user continues to interact with the AI, the initial message containing the process status is quickly pushed out of view. This forces the user to manually scroll back to find the status, breaking their workflow and causing frustration. There is a need for a component that can provide a real-time, at-a-glance summary of a background task, while also offering access to detailed logs without overwhelming the chat history.

Proposed Solution

We propose the creation of a new "Live Progress Summary Card" component. This is an embedded UI card that displays the real-time progress of a background process directly within the chat interface.

The card presents a high-level summary by default and can be expanded to reveal a detailed, step-by-step breakdown of the process. A persistent button links to the full page view for complete logs and details, keeping users informed while minimizing context switching.

Crucially, this component introduces a pinned variant. When the user scrolls past the main card in the chat conversation, a compact summary view will "pin" to the top of the chat viewport. This ensures the user maintains constant visibility of the long-running task's status while continuing their conversation with the AI.

Key Features:

• Live Progress Bar: Displays the overall completion percentage, the current step, and the estimated time remaining.

• Expandable Accordion: The main card features a multi-level accordion to show high-level stages. Each stage can be expanded to reveal sub-steps and detailed, horizontally-scrolling command-line logs.

• Status Indicators: Each step in the process has a clear icon indicating its state (e.g., pending, in-progress, success, failure).

• Persistent Pinned Variant: A compact, "sticky" version of the card that remains visible at the top of the viewport when the main card is scrolled out of view. This provides an always-on status summary.

• Deep Link: A "Launch" or "Open in Console" button that takes the user directly to the full application UI for that process.

• Interaction States: The component and its interactive elements should have defined visual states for default, hover, and expanded/collapsed.

Design Specifications & Data Model

Here are the design specifications and the proposed data model for the component.

Screenshots

Component States (Default, Expanded, Pinned):

Component Data Model Breakdown:

Component Interaction Video (Pinned):
Video Demo - Interaction of pinned state for card

Component Elements:

• Card Title: Text string, with an optional leading icon.

• Progress Bar: A visual bar with metadata for percentage, current step, and time remaining.

• Progress Steps Accordion: A list of steps, each with an icon and label. Can be expanded to show command-line logs.

• Command Line Logs: A pre-formatted text block for detailed log output, displayed within an expanded step.

• Launch Button: A button with a label and optional icon to link to an external page.

[asuwebdesign]

@kaylachumley, dropping the Figma concept file here for easy reference.