mirrors/hermes-agent
1
0
Fork 0
mirror of https://github.com/NousResearch/hermes-agent.git synced 2026-05-01 01:51:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

feat(ui-tui): render tool calls inline in message flow instead of activity lane

Browse source
This commit is contained in:
Brooklyn Nicholson 2026-04-09 17:40:30 -05:00
parent 99fd3b518d
commit 6e24b9947e
3 changed files with 66 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

74
ui-tui/src/components/thinking.tsx
View file

@ -6,13 +6,13 @@ import { FACES, TOOL_VERBS, VERBS } from '../constants.js'
import type { Theme } from '../theme.js'
import type { ActiveTool } from '../types.js'
const THINK_POOL: BrailleSpinnerName[] = ['helix', 'breathe', 'orbit', 'dna', 'waverows', 'snake', 'pulse']
const TOOL_POOL: BrailleSpinnerName[] = ['cascade', 'scan', 'diagswipe', 'fillsweep', 'rain', 'columns', 'sparkle']
const THINK: BrailleSpinnerName[] = ['helix', 'breathe', 'orbit', 'dna', 'waverows', 'snake', 'pulse']
const TOOL: BrailleSpinnerName[] = ['cascade', 'scan', 'diagswipe', 'fillsweep', 'rain', 'columns', 'sparkle']
const pick = <T,>(a: T[]) => a[Math.floor(Math.random() * a.length)]!
function Spinner({ color, variant = 'think' }: { color: string; variant?: 'think' | 'tool' }) {
const [spin] = useState(() => spinners[pick(variant === 'tool' ? TOOL_POOL : THINK_POOL)])
export function Spinner({ color, variant = 'think' }: { color: string; variant?: 'think' | 'tool' }) {
const [spin] = useState(() => spinners[pick(variant === 'tool' ? TOOL : THINK)])
const [frame, setFrame] = useState(0)
useEffect(() => {
@ -24,15 +24,38 @@ function Spinner({ color, variant = 'think' }: { color: string; variant?: 'think
return <Text color={color}>{spin.frames[frame]}</Text>
}
export const Thinking = memo(function Thinking({
reasoning,
export const ToolTrail = memo(function ToolTrail({
t,
tools
tools = [],
trail = []
}: {
reasoning: string
t: Theme
tools: ActiveTool[]
tools?: ActiveTool[]
trail?: string[]
}) {
if (!trail.length && !tools.length) {
return null
}
return (
<>
{trail.map((line, i) => (
<Text color={line.endsWith(' ✗') ? t.color.error : t.color.dim} dimColor={!line.endsWith(' ✗')} key={`t-${i}`}>
{t.brand.tool} {line}
</Text>
))}
{tools.map(tool => (
<Text color={t.color.dim} key={tool.id}>
<Spinner color={t.color.amber} variant="tool" /> {TOOL_VERBS[tool.name] ?? tool.name}
{tool.context ? `: ${tool.context}` : ''}
</Text>
))}
</>
)
})
export const Thinking = memo(function Thinking({ reasoning, t }: { reasoning: string; t: Theme }) {
const [tick, setTick] = useState(0)
useEffect(() => {
@ -41,31 +64,16 @@ export const Thinking = memo(function Thinking({
return () => clearInterval(id)
}, [])
const verb = VERBS[tick % VERBS.length] ?? 'thinking'
const face = FACES[tick % FACES.length] ?? '(•_•)'
const tail = reasoning.slice(-160).replace(/\n/g, ' ')
const hasReasoning = !!tail
return (
<>
{tools.map(tool => (
<Text color={t.color.dim} key={tool.id}>
<Spinner color={t.color.amber} variant="tool" /> {TOOL_VERBS[tool.name] ?? tool.name}
{tool.context ? `: ${tool.context}` : ''}
</Text>
))}
{!tools.length && !hasReasoning && (
<Text color={t.color.dim}>
<Spinner color={t.color.dim} /> {face} {verb}…
</Text>
)}
{tail && (
<Text color={t.color.dim} dimColor wrap="truncate-end">
💭 {tail}
</Text>
)}
</>
return tail ? (
<Text color={t.color.dim} dimColor wrap="truncate-end">
💭 {tail}
</Text>
) : (
<Text color={t.color.dim}>
<Spinner color={t.color.dim} /> {FACES[tick % FACES.length] ?? '(•_•)'} {VERBS[tick % VERBS.length] ?? 'thinking'}
…
</Text>
)
})