mirror of
https://github.com/NousResearch/hermes-agent.git
synced 2026-07-29 18:46:59 +00:00
fix(desktop): paint the live status line as scaffolding
The drafting/stall status row kept its own type and colour — text-sm at muted-foreground/70, with the hint at /55 — so "Editing" while the model drafts a call rendered a full step larger than the "Explored 3 files" line it turns into a moment later, in a different grey. Route it through the scaffold label token so the whole left column reads as one kind of line. The timer keeps its midground tint: that belongs to the live-signal cluster with the dither block, not to the scaffolding.
This commit is contained in:
parent
b1f4b95761
commit
a67b2d93cd
1 changed files with 11 additions and 7 deletions
|
|
@ -6,6 +6,7 @@ import { useSessionView } from '@/app/chat/session-view'
|
|||
import { toolPresentVerb } from '@/components/assistant-ui/tool/run-summary'
|
||||
import { useElapsedSeconds } from '@/components/chat/activity-timer'
|
||||
import { ActivityTimerText } from '@/components/chat/activity-timer-text'
|
||||
import { SCAFFOLD_LABEL_CLASS } from '@/components/chat/scaffold-row'
|
||||
import { Codicon } from '@/components/ui/codicon'
|
||||
import { Loader } from '@/components/ui/loader'
|
||||
import { useI18n } from '@/i18n'
|
||||
|
|
@ -16,6 +17,9 @@ import { sessionAwaitingInput } from '@/store/prompts'
|
|||
import { $turnStartedAt } from '@/store/session'
|
||||
import { type DraftingTool, sessionDraftingTool } from '@/store/tool-drafting'
|
||||
|
||||
// A status line is scaffolding like any other — "Editing" while the model
|
||||
// drafts a call is the same kind of line as "Explored 3 files" once it has run,
|
||||
// and reads as one continuous column only if it shares their type and colour.
|
||||
const StatusRow: FC<{ children: ReactNode; label: string } & React.ComponentPropsWithoutRef<'div'>> = ({
|
||||
children,
|
||||
label,
|
||||
|
|
@ -25,7 +29,11 @@ const StatusRow: FC<{ children: ReactNode; label: string } & React.ComponentProp
|
|||
<div
|
||||
aria-label={label}
|
||||
aria-live="polite"
|
||||
className={cn('flex max-w-full items-center gap-2 self-start text-sm text-muted-foreground/70', className)}
|
||||
className={cn(
|
||||
'flex max-w-full items-center gap-1.5 self-start leading-(--conversation-line-height)',
|
||||
'text-(--conversation-scaffold-text)',
|
||||
className
|
||||
)}
|
||||
role="status"
|
||||
{...rest}
|
||||
>
|
||||
|
|
@ -37,7 +45,7 @@ const StatusRow: FC<{ children: ReactNode; label: string } & React.ComponentProp
|
|||
const COMPACTION_LABEL = 'Summarizing thread'
|
||||
|
||||
const HintText: FC<{ children: ReactNode }> = ({ children }) => (
|
||||
<span className="shimmer min-w-0 truncate text-muted-foreground/55">{children}</span>
|
||||
<span className={cn(SCAFFOLD_LABEL_CLASS, 'shimmer min-w-0 truncate')}>{children}</span>
|
||||
)
|
||||
|
||||
/** These indicators render inside whichever transcript mounted them, so every
|
||||
|
|
@ -120,11 +128,7 @@ export const ResponseLoadingIndicator: FC = () => {
|
|||
const hint = useStatusHint(compacting, drafting)
|
||||
|
||||
return (
|
||||
<StatusRow
|
||||
className="text-[length:var(--conversation-text-font-size)] leading-(--dt-line-height)"
|
||||
data-slot="aui_response-loading"
|
||||
label={hint || t.assistant.thread.loadingResponse}
|
||||
>
|
||||
<StatusRow data-slot="aui_response-loading" label={hint || t.assistant.thread.loadingResponse}>
|
||||
<span aria-hidden="true" className="dither inline-block size-3 rounded-[2px] text-midground/80 animate-pulse" />
|
||||
{hint && <HintText>{hint}</HintText>}
|
||||
<ActivityTimerText seconds={elapsed} />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue