feat(ui): add measured linear progress to resource rows

This commit is contained in:
Codex
2026-09-05 23:19:36 +03:00
parent 8a79dfe84d
commit 17e150b1c7
10 changed files with 121 additions and 4 deletions
+6 -3
View File
@@ -1,4 +1,5 @@
import type { HTMLAttributes, ReactNode } from "react";
import { ProgressBar, type ProgressBarProps } from "./ProgressBar.js";
import { cn } from "./cn.js";
export interface ResourceRowProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
@@ -8,19 +9,21 @@ export interface ResourceRowProps extends Omit<HTMLAttributes<HTMLDivElement>, "
metadata?: ReactNode;
status?: ReactNode;
actions?: ReactNode;
progress?: Pick<ProgressBarProps, "label" | "value" | "valueText">;
}
/** Compact resource presentation extracted from Mission Core AI Inference.
* Actions stay canonical controls; the row itself is not a nested button. */
export function ResourceRow({ title, icon, description, metadata, status, actions, className, ...props }: ResourceRowProps) {
return <div className={cn("nodedc-resource-row", className)} {...props}>
export function ResourceRow({ title, icon, description, metadata, status, actions, progress, className, ...props }: ResourceRowProps) {
return <div className={cn("nodedc-resource-row", progress && "nodedc-resource-row--progress", className)} {...props}>
{icon ? <span className="nodedc-resource-row__icon" aria-hidden="true">{icon}</span> : null}
<div className="nodedc-resource-row__copy">
<strong>{title}</strong>
{description ? <span>{description}</span> : null}
{metadata ? <small>{metadata}</small> : null}
</div>
{status ? <div className="nodedc-resource-row__status">{status}</div> : null}
{progress ? <ProgressBar {...progress} /> : null}
{!progress && status ? <div className="nodedc-resource-row__status">{status}</div> : null}
{actions ? <div className="nodedc-resource-row__actions">{actions}</div> : null}
</div>;
}