wooo/awoooi
1
1
Fork 0
Code Issues 2 Pull Requests 1 Actions 2 Packages Projects Releases Wiki Activity

fix(awooop): reduce run detail text density
All checks were successful
CD Pipeline / workflow-shape (push) Successful in 0s
Details
CD Pipeline / cancel-stale-cd (push) Has been skipped
Details
CD Pipeline / tests (push) Successful in 1m0s
Details
CD Pipeline / build-and-deploy (push) Successful in 4m32s
Details
CD Pipeline / post-deploy-checks (push) Successful in 1m42s
Details

Browse Source
This commit is contained in:
Your Name
2026-07-03 15:46:06 +08:00
parent 821455eb7d
commit c45264224a
3 changed files with 93 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
apps/web/src/app/[locale]/awooop/runs/[run_id]/page.tsx
View File

@@ -363,7 +363,7 @@ const SOURCE_REF_LABEL_KEYS: Record<string, string> = {
signoz_alerts: "refs.signozAlerts",
};
const MANUAL_STATES = new Set(["blocked", "cancelled", "error", "failed", "timeout"]);
const CONTROLLED_FOLLOWUP_STATES = new Set(["blocked", "cancelled", "error", "failed", "timeout"]);
function formatTime(value: string | null | undefined, locale: string, emptyLabel: string) {
if (!value) return emptyLabel;
@@ -447,12 +447,12 @@ function RunActionPanel({
}
const isApproval = run.state === "waiting_approval";
const isManual = MANUAL_STATES.has(run.state);
const needsControlledFollowup = CONTROLLED_FOLLOWUP_STATES.has(run.state);
const isCompleted = run.state === "completed" || run.state === "success";
const actionKey = isApproval
? "approval"
: isManual
? "manual"
: needsControlledFollowup
? "controlled"
: isCompleted
? "completed"
: run.state === "running"
@@ -460,7 +460,7 @@ function RunActionPanel({
: "observe";
const Icon = isApproval
? ShieldCheck
: isManual
: needsControlledFollowup
? TriangleAlert
: isCompleted
? CheckCircle2
@@ -469,8 +469,8 @@ function RunActionPanel({
: SearchCheck;
const toneClass = isApproval
? "border-[#d9b36f] bg-[#fff7e8] text-[#8a5a08]"
: isManual
? "border-[#e2a29b] bg-[#fff0ef] text-[#9f2f25]"
: needsControlledFollowup
? "border-[#d9b36f] bg-[#fff7e8] text-[#8a5a08]"
: isCompleted
? "border-[#9bc7a4] bg-[#f0faf2] text-[#17602a]"
: "border-[#9bb6d9] bg-[#eef5ff] text-[#1f5b9b]";
@@ -502,9 +502,6 @@ function RunActionPanel({
</h3>
</div>
</div>
<p className="mt-3 max-w-3xl text-sm leading-6 text-[#5f5b52]">
{t(`${actionKey}.detail` as never)}
</p>
</div>
<Link
href={primaryHref}
@@ -535,12 +532,12 @@ function RunActionPanel({
function OwnerResponseValidationDetailBoundaryPanel() {
const t = useTranslations("awooop.runDetail.ownerResponseValidationDetailBoundary");
const metrics = [
{ label: t("metrics.packets.label"), value: "4", detail: t("metrics.packets.detail") },
{ label: t("metrics.templates.label"), value: "22", detail: t("metrics.templates.detail") },
{ label: t("metrics.received.label"), value: "0", detail: t("metrics.received.detail") },
{ label: t("metrics.accepted.label"), value: "0", detail: t("metrics.accepted.detail") },
{ label: t("metrics.validationRuns.label"), value: "0", detail: t("metrics.validationRuns.detail") },
{ label: t("metrics.displaySections.label"), value: "8", detail: t("metrics.displaySections.detail") },
{ label: t("metrics.packets.label"), value: "4" },
{ label: t("metrics.templates.label"), value: "22" },
{ label: t("metrics.received.label"), value: "0" },
{ label: t("metrics.accepted.label"), value: "0" },
{ label: t("metrics.validationRuns.label"), value: "0" },
{ label: t("metrics.displaySections.label"), value: "8" },
];
return (
@@ -551,7 +548,6 @@ function OwnerResponseValidationDetailBoundaryPanel() {
<ShieldCheck className="h-4 w-4 text-[#6d48a8]" aria-hidden="true" />
<h3 className="text-sm font-semibold text-[#141413]">{t("title")}</h3>
</div>
<p className="mt-2 text-sm leading-6 text-[#5f5b52]">{t("subtitle")}</p>
</div>
<div className="flex flex-wrap items-center gap-2">
<span className="border border-[#bda9df] bg-white px-2 py-1 text-xs font-semibold text-[#5c3b91]">
@@ -572,7 +568,6 @@ function OwnerResponseValidationDetailBoundaryPanel() {
<div key={item.label} className="min-w-0 bg-white px-4 py-3">
<p className="text-xs font-semibold text-[#77736a]">{item.label}</p>
<p className="mt-2 font-mono text-2xl font-semibold text-[#141413]">{item.value}</p>
<p className="mt-2 text-xs leading-5 text-[#5f5b52]">{item.detail}</p>
</div>
))}
</div>
@@ -588,9 +583,6 @@ function OwnerResponseValidationDetailBoundaryPanel() {
<p className="text-sm font-semibold text-[#141413]">
{t(`detailRefs.${item.key}.title` as never)}
</p>
<p className="mt-1 text-xs leading-5 text-[#5f5b52]">
{t(`detailRefs.${item.key}.detail` as never)}
</p>
<p className="mt-2 text-xs text-[#77736a]">{publicContractText(item.contract)}</p>
</div>
</div>
@@ -604,7 +596,6 @@ function OwnerResponseValidationDetailBoundaryPanel() {
<span className="text-xs font-semibold text-[#5c3b91]">{t("boundaryLabel")}</span>
</div>
<h4 className="mt-2 text-base font-semibold text-[#141413]">{t("boundaryTitle")}</h4>
<p className="mt-2 text-sm leading-6 text-[#5f5b52]">{t("boundaryDetail")}</p>
<div className="mt-4 space-y-1 font-mono text-xs leading-6 text-[#141413]">
{ownerResponseValidationDetailBoundaries.map((item) => (
<div key={item} className="break-all">
@@ -807,7 +798,7 @@ function McpGatewayPanel({
const legacySummary = legacy?.summary;
const legacyTool = topLegacyTool(legacySummary);
const toneClass = summary?.needs_human
? "border-[#e2a29b] bg-[#fff0ef] text-[#9f2f25]"
? "border-[#d9b36f] bg-[#fff7e8] text-[#8a5a08]"
: summary?.stage_status === "success"
? "border-[#9bc7a4] bg-[#f0faf2] text-[#17602a]"
: "border-[#9bb6d9] bg-[#eef5ff] text-[#1f5b9b]";
@@ -859,7 +850,7 @@ function McpGatewayPanel({
))}
</div>
{hasRecords && summary?.blockers && summary.blockers.length > 0 && (
<div className="border-t border-[#eee9dd] bg-[#fff0ef] px-4 py-3 text-sm text-[#9f2f25]">
<div className="border-t border-[#eee9dd] bg-[#fff7e8] px-4 py-3 text-sm text-[#8a5a08]">
<span className="font-semibold">{t("blockers")}</span>{" "}
<span className="text-xs">{publicInternalCodeSummary(summary.blockers.slice(0, 3))}</span>
</div>