Status Tracking

/**
 * StatusTracker component for comprehensive status display
 * @param i18n - Internationalization formatter (required)
 * @param eta - Estimated time remaining in seconds
 * @param queue_position - Current position in queue (0-based)
 * @param queue_size - Total size of queue
 * @param status - Current task status
 * @param scroll_to_output - Whether to scroll to output when status changes
 * @param timer - Show elapsed timer
 * @param show_progress - Progress display mode
 * @param message - Optional status message
 * @param progress - Progress data array for multi-step operations
 * @param variant - Display variant (default centers within container, center provides overlay)
 * @param loading_text - Text to display during loading
 * @param absolute - Use absolute positioning
 * @param translucent - Use translucent background
 * @param border - Show border around component
 * @param autoscroll - Enable automatic scrolling to component
 */
export interface StatusTrackerProps {
  i18n: I18nFormatter;
  eta?: number | null;
  queue_position?: number | null;
  queue_size?: number | null;
  status?: "complete" | "pending" | "error" | "generating" | "streaming" | null;
  scroll_to_output?: boolean;
  timer?: boolean;
  show_progress?: "full" | "minimal" | "hidden";
  message?: string | null;
  progress?: LoadingStatus["progress"] | null | undefined;
  variant?: "default" | "center";
  loading_text?: string;
  absolute?: boolean;
  translucent?: boolean;
  border?: boolean;
  autoscroll?: boolean;
}

/**
 * Events dispatched by StatusTracker
 */
interface StatusTrackerEvents {
  /** Dispatched when user clicks clear button in error state */
  clear_status: CustomEvent<void>;
}

/**
 * Slots available in StatusTracker
 */
interface StatusTrackerSlots {
  /** Additional loading text displayed during loading state */
  "additional-loading-text": {};
  /** Custom error content displayed in error state */
  error: {};
}

import { StatusTracker, type LoadingStatus } from "@gradio/statustracker";

// Basic status tracking
<StatusTracker
  i18n={i18n}
  status="pending"
  queue_position={2}
  queue_size={5}
  eta={10}
  timer={true}
  show_progress="full"
/>

// Progress tracking with detailed progress data
const progressData: LoadingStatus["progress"] = [
  {
    progress: 0.5,
    index: 50,
    length: 100,
    unit: "items",
    desc: "Processing data"
  }
];

<StatusTracker
  i18n={i18n}
  status="generating"
  progress={progressData}
  show_progress="full"
  variant="center"
/>

// Minimal status display
<StatusTracker
  i18n={i18n}
  status="pending"
  show_progress="minimal"
  translucent={true}
  timer={false}
/>

// Error state with custom error content
<StatusTracker
  i18n={i18n}
  status="error"
  message="Operation failed"
  on:clear_status={handleClearStatus}
>
  <div slot="error">
    <p>Custom error message here</p>
  </div>
</StatusTracker>