Skip to content

Commit ebeee76

Browse files
waleedlatif1claude
andcommitted
fix(logs): lift near-black trace icon backgrounds for dark-mode contrast
Block bgColors below a small luminance threshold (e.g. the MCP block's #181C1E) rendered nearly invisible against the dark-mode surface (--bg: #1b1b1b). Adds a tiny adjustBgForContrast helper that floors each RGB channel at 0x33 only when luminance is below 30,000, leaving every branded color above that band untouched. Applied to both the trace tree row and the detail pane. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
1 parent 2c6d2d1 commit ebeee76

1 file changed

Lines changed: 28 additions & 2 deletions

File tree

  • apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,22 @@ function iconColorClass(bgColor: string): string {
120120
return r * 299 + g * 587 + b * 114 > 160_000 ? 'text-[#111111]' : 'text-white'
121121
}
122122

123+
/**
124+
* Lifts a near-black icon background just enough to clear the dark-mode
125+
* surface. Branded colors above the threshold pass through unchanged.
126+
*/
127+
function adjustBgForContrast(bgColor: string): string {
128+
const hex = bgColor.replace('#', '')
129+
if (hex.length !== 6) return bgColor
130+
const r = Number.parseInt(hex.slice(0, 2), 16)
131+
const g = Number.parseInt(hex.slice(2, 4), 16)
132+
const b = Number.parseInt(hex.slice(4, 6), 16)
133+
if (r * 299 + g * 587 + b * 114 >= 30_000) return bgColor
134+
const FLOOR = 0x33
135+
const lift = (c: number) => Math.max(c, FLOOR).toString(16).padStart(2, '0')
136+
return `#${lift(r)}${lift(g)}${lift(b)}`
137+
}
138+
123139
/**
124140
* Flattens the visible (expanded) span tree into a linear list for keyboard
125141
* navigation, carrying depth, the chain of parent ids for indent drawing, and
@@ -268,7 +284,12 @@ const TraceTreeRow = memo(function TraceTreeRow({
268284
const duration = span.duration || endMs - startMs
269285
const isRootWorkflow = depth === 0 && span.type?.toLowerCase() === 'workflow'
270286
const hasError = isRootWorkflow ? hasUnhandledErrorInTree(span) : hasErrorInTree(span)
271-
const { icon: BlockIcon, bgColor } = getBlockIconAndColor(span.type, span.name, span.provider)
287+
const { icon: BlockIcon, bgColor: rawBgColor } = getBlockIconAndColor(
288+
span.type,
289+
span.name,
290+
span.provider
291+
)
292+
const bgColor = adjustBgForContrast(rawBgColor)
272293
const nameMatches = !!matchQuery && spanMatchesQuery(span, matchQuery)
273294

274295
const offsetMs = runStartMs > 0 ? Math.max(0, startMs - runStartMs) : 0
@@ -651,7 +672,12 @@ const TraceDetailPane = memo(function TraceDetailPane({ span }: { span: TraceSpa
651672
}
652673

653674
const duration = span.duration || parseTime(span.endTime) - parseTime(span.startTime)
654-
const { icon: BlockIcon, bgColor } = getBlockIconAndColor(span.type, span.name, span.provider)
675+
const { icon: BlockIcon, bgColor: rawBgColor } = getBlockIconAndColor(
676+
span.type,
677+
span.name,
678+
span.provider
679+
)
680+
const bgColor = adjustBgForContrast(rawBgColor)
655681
const isRootWorkflow = span.type?.toLowerCase() === 'workflow'
656682
const hasError = isRootWorkflow ? hasUnhandledErrorInTree(span) : hasErrorInTree(span)
657683
const isDirectError = span.status === 'error'

0 commit comments

Comments
 (0)