salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reduce step-finish usage chip DOM

Browse Source
This commit is contained in:
Shantur Rathore
2025-12-01 22:36:03 +00:00
parent 78ab17d148
commit 5f9cf397b9
3 changed files with 46 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
packages/ui/src/components/message-stream-v2.tsx
View File

@@ -958,7 +958,9 @@ function MessageBlock(props: MessageBlockProps) {
partVersion={toolItem.partVersion}
instanceId={props.instanceId}
sessionId={props.sessionId}
onContentRendered={props.onContentRendered}
/>
</div>
)
})()}
@@ -1059,34 +1061,28 @@ function StepCard(props: StepCardProps) {
const finishStyle = () => (props.borderColor ? { "border-left-color": props.borderColor } : undefined)
const renderUsageChips = (usage: NonNullable<ReturnType<typeof usageStats>>) => (
<div class="message-step-usage">
<div class="inline-flex items-center gap-1 rounded-full border border-[var(--border-base)] px-2 py-0.5 text-[10px]">
<span class="uppercase text-[9px] tracking-wide text-[var(--text-muted)]">Input</span>
<span class="font-semibold text-[var(--text-primary)]">{formatTokenTotal(usage.input)}</span>
const renderUsageChips = (usage: NonNullable<ReturnType<typeof usageStats>>) => {
const entries = [
{ label: "Input", value: usage.input, formatter: formatTokenTotal, show: usage.input > 0 },
{ label: "Output", value: usage.output, formatter: formatTokenTotal, show: usage.output > 0 },
{ label: "Reasoning", value: usage.reasoning, formatter: formatTokenTotal, show: usage.reasoning > 0 },
{ label: "Cache Read", value: usage.cacheRead, formatter: formatTokenTotal, show: usage.cacheRead > 0 },
{ label: "Cache Write", value: usage.cacheWrite, formatter: formatTokenTotal, show: usage.cacheWrite > 0 },
{ label: "Cost", value: usage.cost, formatter: formatCostValue, show: true },
].filter((entry) => entry.show)
return (
<div class="message-step-usage">
<For each={entries}>
{(entry) => (
<span class="message-step-usage-chip" data-label={entry.label}>
{entry.formatter(entry.value)}
</span>
)}
</For>
</div>
<div class="inline-flex items-center gap-1 rounded-full border border-[var(--border-base)] px-2 py-0.5 text-[10px]">
<span class="uppercase text-[9px] tracking-wide text-[var(--text-muted)]">Output</span>
<span class="font-semibold text-[var(--text-primary)]">{formatTokenTotal(usage.output)}</span>
</div>
<div class="inline-flex items-center gap-1 rounded-full border border-[var(--border-base)] px-2 py-0.5 text-[10px]">
<span class="uppercase text-[9px] tracking-wide text-[var(--text-muted)]">Reasoning</span>
<span class="font-semibold text-[var(--text-primary)]">{formatTokenTotal(usage.reasoning)}</span>
</div>
<div class="inline-flex items-center gap-1 rounded-full border border-[var(--border-base)] px-2 py-0.5 text-[10px]">
<span class="uppercase text-[9px] tracking-wide text-[var(--text-muted)]">Cache Read</span>
<span class="font-semibold text-[var(--text-primary)]">{formatTokenTotal(usage.cacheRead)}</span>
</div>
<div class="inline-flex items-center gap-1 rounded-full border border-[var(--border-base)] px-2 py-0.5 text-[10px]">
<span class="uppercase text-[9px] tracking-wide text-[var(--text-muted)]">Cache Write</span>
<span class="font-semibold text-[var(--text-primary)]">{formatTokenTotal(usage.cacheWrite)}</span>
</div>
<div class="inline-flex items-center gap-1 rounded-full border border-[var(--border-base)] px-2 py-0.5 text-[10px]">
<span class="uppercase text-[9px] tracking-wide text-[var(--text-muted)]">Cost</span>
<span class="font-semibold text-[var(--text-primary)]">{formatCostValue(usage.cost)}</span>
</div>
</div>
)
)
}
if (props.kind === "finish") {
const usage = usageStats()

8
packages/ui/src/components/tool-call.tsx
View File

@@ -56,7 +56,9 @@ interface ToolCallProps {
partVersion?: number
instanceId: string
sessionId: string
}
onContentRendered?: () => void
}
function getToolIcon(tool: string): string {
switch (tool) {
@@ -761,8 +763,10 @@ export default function ToolCall(props: ToolCallProps) {
if (!options?.disableScrollTracking) {
handleScrollRendered()
}
props.onContentRendered?.()
}
return (
<div
class="message-text tool-call-markdown tool-call-markdown-large tool-call-diff-shell"
@@ -826,8 +830,10 @@ export default function ToolCall(props: ToolCallProps) {
const handleMarkdownRendered = () => {
markdownCache.set(markdownPart.renderCache)
handleScrollRendered()
props.onContentRendered?.()
}
return (
<div
class={messageClass}

16
packages/ui/src/styles/messaging/message-base.css
View File

@@ -35,6 +35,22 @@
@apply flex flex-wrap items-center gap-1 text-[10px] text-[var(--text-muted)];
}
.message-step-usage-chip {
@apply inline-flex items-center rounded-full border border-[var(--border-base)] px-2 py-0.5 text-[10px];
color: var(--text-primary);
font-weight: var(--font-weight-semibold);
}
.message-step-usage-chip::before {
content: attr(data-label);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 9px;
color: var(--text-muted);
font-weight: var(--font-weight-medium);
margin-right: 0.35rem;
}
.message-step-heading {
@apply flex flex-wrap items-center gap-2 text-xs;
color: var(--text-muted);