From 7804e86979707d8b66a7107e2a00d0578a5fc3ae Mon Sep 17 00:00:00 2001 From: iliya Date: Sat, 28 Mar 2026 20:59:43 +0200 Subject: [PATCH] =?UTF-8?q?fix(graph):=20swap=20task=20pill=20layout=20?= =?UTF-8?q?=E2=80=94=20subject=20large=20on=20top,=20ID=20small=20below?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/agent-graph/src/canvas/draw-tasks.ts | 26 ++++++++++--------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/packages/agent-graph/src/canvas/draw-tasks.ts b/packages/agent-graph/src/canvas/draw-tasks.ts index dcddfd04..ab1f0614 100644 --- a/packages/agent-graph/src/canvas/draw-tasks.ts +++ b/packages/agent-graph/src/canvas/draw-tasks.ts @@ -139,23 +139,25 @@ function drawTaskPill( ); ctx.fill(); - // Display ID - const displayId = node.displayId ?? node.label; - ctx.font = `bold ${TASK_PILL.idFontSize}px monospace`; - ctx.textAlign = 'left'; - ctx.textBaseline = 'middle'; - ctx.fillStyle = isFinished ? COLORS.textDim : COLORS.textPrimary; - ctx.fillText(displayId, -halfW + TASK_PILL.textOffsetX, -4); - - // Subject text + // Subject (main title — large) if (node.sublabel) { - ctx.font = `${TASK_PILL.subjectFontSize}px sans-serif`; - ctx.fillStyle = isFinished ? COLORS.textMuted : COLORS.textDim; + ctx.font = `bold ${TASK_PILL.idFontSize}px sans-serif`; + ctx.textAlign = 'left'; + ctx.textBaseline = 'middle'; + ctx.fillStyle = isFinished ? COLORS.textDim : COLORS.textPrimary; const maxW = w - TASK_PILL.textOffsetX - 8; const subject = truncateText(ctx, node.sublabel, maxW, ctx.font); - ctx.fillText(subject, -halfW + TASK_PILL.textOffsetX, 8); + ctx.fillText(subject, -halfW + TASK_PILL.textOffsetX, -4); } + // Display ID (secondary — small) + const displayId = node.displayId ?? node.label; + ctx.font = `${TASK_PILL.subjectFontSize}px monospace`; + ctx.textAlign = 'left'; + ctx.textBaseline = 'middle'; + ctx.fillStyle = isFinished ? COLORS.textMuted : COLORS.textDim; + ctx.fillText(displayId, -halfW + TASK_PILL.textOffsetX, 8); + // Approved badge: checkmark at right side if (node.reviewState === 'approved') { ctx.font = 'bold 11px sans-serif';