wehub-resource-sync
1011 lines
27 KiB
JavaScript
1011 lines
27 KiB
JavaScript
const COMMAND_OUTPUT_MAX_DISPLAY_CHARS = 80_000
|
|
const ANSI_ESCAPE_PATTERN =
|
|
// eslint-disable-next-line no-control-regex
|
|
/\x1B(?:[@-Z\\-_]|\[[0-?]*[ -/]*[@-~]|\][^\x07]*(?:\x07|\x1B\\))/g
|
|
|
|
/**
|
|
* Tool UI Handler
|
|
* Renders tool executions as expandable activity cards.
|
|
*/
|
|
export default class ToolUIHandler {
|
|
constructor(feedElement, scrollDownCallback, formatMessageCallback) {
|
|
this.feed = feedElement
|
|
this.scrollDown = scrollDownCallback
|
|
this.formatMessage = formatMessageCallback
|
|
this.toolGroups = new Map()
|
|
}
|
|
|
|
/**
|
|
* Handle tool output messages with interactive activity cards.
|
|
*/
|
|
handleToolOutput(data) {
|
|
if (data.activityType === 'agent_skill') {
|
|
return this.handleAgentSkillActivity(data)
|
|
}
|
|
|
|
const {
|
|
toolkitName,
|
|
toolName,
|
|
toolGroupId,
|
|
answer,
|
|
replaceMessageId,
|
|
key
|
|
} = data
|
|
|
|
if (replaceMessageId) {
|
|
this.replaceToolMessage(replaceMessageId, data)
|
|
return
|
|
}
|
|
|
|
const answerKey = key ? key.split('.').pop() : 'unknown'
|
|
const groupId = toolGroupId || `${toolkitName}_${toolName}_${Date.now()}`
|
|
const mode =
|
|
data.toolDisplayMode === 'activity_card' ? 'activity_card' : 'legacy'
|
|
|
|
let toolGroupContainer = this.toolGroups.get(groupId)
|
|
|
|
if (!toolGroupContainer) {
|
|
toolGroupContainer = this.createToolGroupContainer({
|
|
groupId,
|
|
toolkitName,
|
|
toolName,
|
|
answerKey,
|
|
mode,
|
|
data
|
|
})
|
|
this.toolGroups.set(groupId, toolGroupContainer)
|
|
}
|
|
|
|
if (toolGroupContainer.mode === 'activity_card') {
|
|
this.updateActivityCard(toolGroupContainer, data, answerKey)
|
|
} else {
|
|
this.addLegacyToolMessage(toolGroupContainer, answer)
|
|
}
|
|
|
|
this.scrollDown()
|
|
|
|
return {
|
|
groupId,
|
|
isNewGroup: toolGroupContainer.isNew
|
|
}
|
|
}
|
|
|
|
handleAgentSkillActivity(data) {
|
|
const agentSkill = data.agentSkill || {}
|
|
const skillId = agentSkill.id || agentSkill.name || 'agent-skill'
|
|
const groupId = data.toolGroupId || `agent_skill_${skillId}_${Date.now()}`
|
|
|
|
let activityContainer = this.toolGroups.get(groupId)
|
|
|
|
if (!activityContainer) {
|
|
activityContainer = this.createAgentSkillActivityCard({
|
|
groupId,
|
|
agentSkill
|
|
})
|
|
this.toolGroups.set(groupId, activityContainer)
|
|
}
|
|
|
|
this.updateAgentSkillActivityCard(activityContainer, data)
|
|
this.scrollDown()
|
|
|
|
return {
|
|
groupId,
|
|
isNewGroup: activityContainer.isNew
|
|
}
|
|
}
|
|
|
|
createToolGroupContainer(params) {
|
|
return params.mode === 'activity_card'
|
|
? this.createActivityCardContainer(params)
|
|
: this.createLegacyToolGroupContainer(params)
|
|
}
|
|
|
|
getRemixIconClass(iconName) {
|
|
const fallbackIconName = 'ri-magic-line'
|
|
if (typeof iconName !== 'string') {
|
|
return fallbackIconName
|
|
}
|
|
|
|
const trimmedIconName = iconName.trim()
|
|
if (!trimmedIconName || trimmedIconName.includes(' ')) {
|
|
return fallbackIconName
|
|
}
|
|
|
|
return trimmedIconName.startsWith('ri-')
|
|
? trimmedIconName
|
|
: `ri-${trimmedIconName}`
|
|
}
|
|
|
|
getToolActivityIconClass(data) {
|
|
return this.getRemixIconClass(data.toolIconName || data.toolkitIconName)
|
|
}
|
|
|
|
/**
|
|
* Create the legacy shell-like tool group container.
|
|
*/
|
|
createLegacyToolGroupContainer({
|
|
groupId,
|
|
toolkitName,
|
|
toolName,
|
|
answerKey
|
|
}) {
|
|
const groupContainer = document.createElement('div')
|
|
groupContainer.className = 'tool-group-container'
|
|
groupContainer.setAttribute('data-tool-group-id', groupId)
|
|
|
|
const toolHeader = document.createElement('button')
|
|
toolHeader.className = 'tool-header'
|
|
toolHeader.setAttribute('type', 'button')
|
|
toolHeader.innerHTML = `
|
|
<i class="ri-terminal-line tool-icon"></i>
|
|
<span class="tool-name">${toolkitName} toolkit → ${toolName} → ${answerKey}</span>
|
|
<i class="ri-arrow-down-s-line expand-icon"></i>
|
|
`
|
|
|
|
const toolContent = document.createElement('div')
|
|
toolContent.className = 'tool-content'
|
|
|
|
const shellOutput = document.createElement('div')
|
|
shellOutput.className = 'shell-output'
|
|
|
|
toolContent.appendChild(shellOutput)
|
|
groupContainer.appendChild(toolHeader)
|
|
groupContainer.appendChild(toolContent)
|
|
|
|
this.addExpandCollapseHandler(toolHeader, toolContent)
|
|
this.feed.appendChild(groupContainer)
|
|
|
|
return {
|
|
mode: 'legacy',
|
|
container: groupContainer,
|
|
toolHeader,
|
|
toolContent,
|
|
shellOutput,
|
|
isNew: true
|
|
}
|
|
}
|
|
|
|
createActivityCardContainer({
|
|
groupId,
|
|
toolkitName,
|
|
toolName,
|
|
answerKey,
|
|
data
|
|
}) {
|
|
const groupContainer = document.createElement('div')
|
|
groupContainer.className = 'tool-group-container tool-activity-card'
|
|
groupContainer.setAttribute('data-tool-group-id', groupId)
|
|
|
|
const toolHeader = document.createElement('button')
|
|
toolHeader.className = 'tool-header tool-activity-header'
|
|
toolHeader.setAttribute('type', 'button')
|
|
|
|
const heading = document.createElement('div')
|
|
heading.className = 'tool-activity-heading'
|
|
|
|
const icon = document.createElement('i')
|
|
icon.className = `${this.getToolActivityIconClass(data)} tool-icon`
|
|
|
|
const titleBlock = document.createElement('div')
|
|
titleBlock.className = 'tool-activity-title-block'
|
|
|
|
const title = document.createElement('span')
|
|
title.className = 'tool-title'
|
|
title.textContent = data.stepLabel || this.humanizeFunctionName(answerKey)
|
|
|
|
const subtitle = document.createElement('span')
|
|
subtitle.className = 'tool-subtitle'
|
|
subtitle.textContent = `${toolkitName} toolkit • ${toolName}`
|
|
|
|
titleBlock.appendChild(title)
|
|
titleBlock.appendChild(subtitle)
|
|
heading.appendChild(icon)
|
|
heading.appendChild(titleBlock)
|
|
|
|
const meta = document.createElement('div')
|
|
meta.className = 'tool-activity-meta'
|
|
|
|
const statusChip = document.createElement('span')
|
|
statusChip.className = 'tool-status-chip running'
|
|
statusChip.textContent = 'Running'
|
|
|
|
const expandIcon = document.createElement('i')
|
|
expandIcon.className = 'ri-arrow-down-s-line expand-icon'
|
|
|
|
meta.appendChild(statusChip)
|
|
meta.appendChild(expandIcon)
|
|
toolHeader.appendChild(heading)
|
|
toolHeader.appendChild(meta)
|
|
|
|
const toolContent = document.createElement('div')
|
|
toolContent.className = 'tool-content'
|
|
|
|
const summary = document.createElement('div')
|
|
summary.className = 'tool-activity-summary'
|
|
summary.textContent = 'Preparing tool activity...'
|
|
|
|
const sections = document.createElement('div')
|
|
sections.className = 'tool-activity-sections'
|
|
|
|
const inputPanel = this.createActivityPanel(
|
|
'Input',
|
|
'Parameters sent to the function'
|
|
)
|
|
const outputPanel = this.createActivityPanel(
|
|
'Result',
|
|
'What the function returned'
|
|
)
|
|
|
|
sections.appendChild(inputPanel.panel)
|
|
sections.appendChild(outputPanel.panel)
|
|
|
|
const rawDetails = document.createElement('details')
|
|
rawDetails.className = 'tool-raw-details'
|
|
|
|
const rawSummary = document.createElement('summary')
|
|
rawSummary.textContent = 'Raw data'
|
|
|
|
const rawContent = document.createElement('div')
|
|
rawContent.className = 'tool-raw-content'
|
|
|
|
rawDetails.appendChild(rawSummary)
|
|
rawDetails.appendChild(rawContent)
|
|
|
|
toolContent.appendChild(summary)
|
|
toolContent.appendChild(sections)
|
|
toolContent.appendChild(rawDetails)
|
|
groupContainer.appendChild(toolHeader)
|
|
groupContainer.appendChild(toolContent)
|
|
|
|
this.addExpandCollapseHandler(toolHeader, toolContent)
|
|
this.feed.appendChild(groupContainer)
|
|
|
|
return {
|
|
mode: 'activity_card',
|
|
container: groupContainer,
|
|
toolHeader,
|
|
toolContent,
|
|
summary,
|
|
title,
|
|
subtitle,
|
|
statusChip,
|
|
inputBody: inputPanel.body,
|
|
outputBody: outputPanel.body,
|
|
rawContent,
|
|
rawDetails,
|
|
rawInput: null,
|
|
rawOutput: null,
|
|
commandOutputText: '',
|
|
preparationLog: [],
|
|
isNew: true
|
|
}
|
|
}
|
|
|
|
createAgentSkillActivityCard({ groupId, agentSkill }) {
|
|
const groupContainer = document.createElement('div')
|
|
groupContainer.className =
|
|
'tool-group-container tool-activity-card agent-skill-activity-card'
|
|
groupContainer.setAttribute('data-tool-group-id', groupId)
|
|
|
|
const skillName = agentSkill.name || agentSkill.id || 'Agent Skill'
|
|
const skillPath = agentSkill.skillPath || 'SKILL.md'
|
|
|
|
const toolHeader = document.createElement('button')
|
|
toolHeader.className = 'tool-header tool-activity-header'
|
|
toolHeader.setAttribute('type', 'button')
|
|
|
|
const heading = document.createElement('div')
|
|
heading.className = 'tool-activity-heading'
|
|
|
|
const icon = document.createElement('i')
|
|
icon.className = 'ri-book-ai-line tool-icon'
|
|
|
|
const titleBlock = document.createElement('div')
|
|
titleBlock.className = 'tool-activity-title-block'
|
|
|
|
const title = document.createElement('span')
|
|
title.className = 'tool-title'
|
|
title.textContent = `Agent Skill: ${skillName}`
|
|
|
|
const subtitle = document.createElement('span')
|
|
subtitle.className = 'tool-subtitle'
|
|
subtitle.textContent = skillPath
|
|
subtitle.setAttribute('title', skillPath)
|
|
|
|
titleBlock.appendChild(title)
|
|
titleBlock.appendChild(subtitle)
|
|
heading.appendChild(icon)
|
|
heading.appendChild(titleBlock)
|
|
|
|
const meta = document.createElement('div')
|
|
meta.className = 'tool-activity-meta'
|
|
|
|
const statusChip = document.createElement('span')
|
|
statusChip.className = 'tool-status-chip selected'
|
|
statusChip.textContent = 'In use'
|
|
|
|
const expandIcon = document.createElement('i')
|
|
expandIcon.className = 'ri-arrow-down-s-line expand-icon'
|
|
|
|
meta.appendChild(statusChip)
|
|
meta.appendChild(expandIcon)
|
|
toolHeader.appendChild(heading)
|
|
toolHeader.appendChild(meta)
|
|
|
|
const toolContent = document.createElement('div')
|
|
toolContent.className = 'tool-content'
|
|
|
|
const summary = document.createElement('div')
|
|
summary.className = 'tool-activity-summary'
|
|
summary.textContent = 'Following SKILL.md instructions for this step.'
|
|
|
|
const sections = document.createElement('div')
|
|
sections.className = 'tool-activity-sections single'
|
|
|
|
const skillPanel = this.createActivityPanel(
|
|
'Skill',
|
|
'Agent Skill context for this step'
|
|
)
|
|
sections.appendChild(skillPanel.panel)
|
|
|
|
toolContent.appendChild(summary)
|
|
toolContent.appendChild(sections)
|
|
groupContainer.appendChild(toolHeader)
|
|
groupContainer.appendChild(toolContent)
|
|
|
|
this.addExpandCollapseHandler(toolHeader, toolContent)
|
|
this.feed.appendChild(groupContainer)
|
|
|
|
return {
|
|
mode: 'agent_skill',
|
|
container: groupContainer,
|
|
title,
|
|
subtitle,
|
|
statusChip,
|
|
skillBody: skillPanel.body,
|
|
isNew: true
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Create a titled content panel used by the activity card sections.
|
|
*/
|
|
createActivityPanel(title, description) {
|
|
const panel = document.createElement('section')
|
|
panel.className = 'tool-activity-panel'
|
|
|
|
const heading = document.createElement('div')
|
|
heading.className = 'tool-panel-heading'
|
|
|
|
const titleElement = document.createElement('span')
|
|
titleElement.className = 'tool-panel-title'
|
|
titleElement.textContent = title
|
|
|
|
const descriptionElement = document.createElement('span')
|
|
descriptionElement.className = 'tool-panel-description'
|
|
descriptionElement.textContent = description
|
|
|
|
const body = document.createElement('div')
|
|
body.className = 'tool-panel-body'
|
|
|
|
heading.appendChild(titleElement)
|
|
heading.appendChild(descriptionElement)
|
|
panel.appendChild(heading)
|
|
panel.appendChild(body)
|
|
|
|
return {
|
|
panel,
|
|
body
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Add expand/collapse functionality to tool header.
|
|
*/
|
|
addExpandCollapseHandler(toolHeader, toolContent) {
|
|
toolHeader.addEventListener('click', () => {
|
|
const isExpanded = toolContent.classList.contains('expanded')
|
|
const expandIcon = toolHeader.querySelector('.expand-icon')
|
|
|
|
if (isExpanded) {
|
|
toolContent.classList.remove('expanded')
|
|
expandIcon?.classList.remove('rotated')
|
|
} else {
|
|
toolContent.classList.add('expanded')
|
|
expandIcon?.classList.add('rotated')
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* Update the activity card with the latest input/output state.
|
|
*/
|
|
updateActivityCard(toolGroupContainer, data, answerKey) {
|
|
const title =
|
|
data.stepLabel ||
|
|
this.humanizeFunctionName(data.functionName || answerKey)
|
|
toolGroupContainer.title.textContent = title
|
|
|
|
if (data.functionName) {
|
|
const functionLabel = this.humanizeFunctionName(data.functionName)
|
|
toolGroupContainer.subtitle.textContent =
|
|
`${data.toolkitName} toolkit • ${data.toolName} • ${functionLabel}`
|
|
}
|
|
|
|
if (data.toolPhase === 'input') {
|
|
toolGroupContainer.summary.textContent =
|
|
data.stepLabel || data.functionName
|
|
? `Preparing ${title.toLowerCase()}...`
|
|
: 'Preparing tool activity...'
|
|
this.setStatusChip(toolGroupContainer.statusChip, 'running')
|
|
|
|
const parsedInput = this.parseToolInput(data.toolInput)
|
|
toolGroupContainer.rawInput = parsedInput ?? data.toolInput ?? null
|
|
this.renderValuePreview(
|
|
toolGroupContainer.inputBody,
|
|
parsedInput ?? data.toolInput,
|
|
'No input'
|
|
)
|
|
|
|
if (!toolGroupContainer.rawOutput) {
|
|
this.renderPlaceholder(
|
|
toolGroupContainer.outputBody,
|
|
'Waiting for function output...'
|
|
)
|
|
}
|
|
}
|
|
|
|
if (data.toolPhase === 'preparation') {
|
|
const progressMessage = data.message || data.answer || ''
|
|
this.setStatusChip(toolGroupContainer.statusChip, 'running')
|
|
|
|
if (progressMessage) {
|
|
toolGroupContainer.summary.textContent = progressMessage
|
|
toolGroupContainer.preparationLog.push(progressMessage)
|
|
this.renderPreparationLog(
|
|
toolGroupContainer.outputBody,
|
|
toolGroupContainer.preparationLog
|
|
)
|
|
toolGroupContainer.rawOutput = {
|
|
preparation: toolGroupContainer.preparationLog
|
|
}
|
|
}
|
|
}
|
|
|
|
if (data.toolPhase === 'output_delta') {
|
|
const outputDelta = data.outputDelta || data.answer || ''
|
|
this.setStatusChip(toolGroupContainer.statusChip, 'running')
|
|
|
|
if (outputDelta) {
|
|
toolGroupContainer.summary.textContent = 'Receiving command output...'
|
|
toolGroupContainer.commandOutputText = this.mergeCommandOutput(
|
|
toolGroupContainer.commandOutputText,
|
|
outputDelta
|
|
)
|
|
this.renderCommandOutputLog(
|
|
toolGroupContainer.outputBody,
|
|
toolGroupContainer.commandOutputText
|
|
)
|
|
toolGroupContainer.rawOutput = {
|
|
output: toolGroupContainer.commandOutputText
|
|
}
|
|
}
|
|
}
|
|
|
|
if (data.toolPhase === 'output') {
|
|
const isError = data.status === 'error'
|
|
const isObserved = data.status === 'observed'
|
|
toolGroupContainer.summary.textContent =
|
|
data.message ||
|
|
(isError
|
|
? 'The function failed.'
|
|
: isObserved
|
|
? 'The function returned an observation.'
|
|
: 'The function completed.')
|
|
this.setStatusChip(
|
|
toolGroupContainer.statusChip,
|
|
isError ? 'error' : isObserved ? 'observed' : 'success'
|
|
)
|
|
|
|
const outputPayload = {
|
|
message: data.message,
|
|
output: data.output
|
|
}
|
|
toolGroupContainer.rawOutput = outputPayload
|
|
this.renderOutputPreview(toolGroupContainer.outputBody, data)
|
|
}
|
|
|
|
this.renderRawData(toolGroupContainer)
|
|
|
|
if (toolGroupContainer.isNew) {
|
|
toolGroupContainer.isNew = false
|
|
}
|
|
}
|
|
|
|
updateAgentSkillActivityCard(activityContainer, data) {
|
|
const agentSkill = data.agentSkill || {}
|
|
const skillName = agentSkill.name || agentSkill.id || 'Agent Skill'
|
|
const skillPath = agentSkill.skillPath || ''
|
|
|
|
activityContainer.title.textContent = `Agent Skill: ${skillName}`
|
|
activityContainer.subtitle.textContent = skillPath || 'SKILL.md'
|
|
activityContainer.subtitle.setAttribute(
|
|
'title',
|
|
skillPath || 'SKILL.md'
|
|
)
|
|
this.setStatusChip(activityContainer.statusChip, 'selected')
|
|
this.renderValuePreview(
|
|
activityContainer.skillBody,
|
|
{
|
|
name: skillName,
|
|
description: agentSkill.description || '',
|
|
root_path: agentSkill.rootPath || '',
|
|
skill_path: skillPath
|
|
},
|
|
'No Agent Skill metadata'
|
|
)
|
|
|
|
if (activityContainer.isNew) {
|
|
activityContainer.isNew = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Add a tool message to the legacy shell output.
|
|
*/
|
|
addLegacyToolMessage(toolGroupContainer, message) {
|
|
const messageElement = document.createElement('div')
|
|
messageElement.className = 'shell-message'
|
|
|
|
const formattedMessage = this.formatMessage(message)
|
|
messageElement.innerHTML = `<span class="shell-prompt">></span> ${formattedMessage}`
|
|
|
|
toolGroupContainer.shellOutput.appendChild(messageElement)
|
|
|
|
if (toolGroupContainer.isNew) {
|
|
toolGroupContainer.isNew = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Render the output preview block.
|
|
*/
|
|
renderOutputPreview(container, data) {
|
|
container.innerHTML = ''
|
|
|
|
if (data.message) {
|
|
const summary = document.createElement('div')
|
|
summary.className = 'tool-output-summary'
|
|
summary.innerHTML = this.formatMessage(data.message)
|
|
container.appendChild(summary)
|
|
}
|
|
|
|
if (
|
|
typeof data.output === 'undefined' ||
|
|
data.output === null ||
|
|
(typeof data.output === 'object' &&
|
|
!Array.isArray(data.output) &&
|
|
Object.keys(data.output).length === 0)
|
|
) {
|
|
if (!data.message) {
|
|
this.renderPlaceholder(container, 'No output')
|
|
}
|
|
return
|
|
}
|
|
|
|
const preview = this.buildValueNode(data.output)
|
|
container.appendChild(preview)
|
|
}
|
|
|
|
/**
|
|
* Render preparation progress before the final tool output is available.
|
|
*/
|
|
renderPreparationLog(container, messages) {
|
|
container.innerHTML = ''
|
|
|
|
if (!messages.length) {
|
|
this.renderPlaceholder(container, 'Waiting for function output...')
|
|
return
|
|
}
|
|
|
|
const list = document.createElement('ul')
|
|
list.className = 'tool-value-list'
|
|
|
|
messages.forEach((message) => {
|
|
const item = document.createElement('li')
|
|
item.textContent = message
|
|
list.appendChild(item)
|
|
})
|
|
|
|
container.appendChild(list)
|
|
}
|
|
|
|
/**
|
|
* Merge terminal output chunks while respecting carriage-return progress
|
|
* updates used by CLI tools to repaint the current line.
|
|
*/
|
|
mergeCommandOutput(currentOutput, nextChunk) {
|
|
const cleanChunk = this.cleanCommandOutputChunk(nextChunk)
|
|
if (!cleanChunk) {
|
|
return currentOutput || ''
|
|
}
|
|
|
|
let output = currentOutput || ''
|
|
let replaceCurrentLine = false
|
|
|
|
for (const char of cleanChunk) {
|
|
if (char === '\r') {
|
|
replaceCurrentLine = true
|
|
continue
|
|
}
|
|
|
|
if (char === '\n') {
|
|
output += '\n'
|
|
replaceCurrentLine = false
|
|
continue
|
|
}
|
|
|
|
if (replaceCurrentLine) {
|
|
const lineStartIndex = output.lastIndexOf('\n') + 1
|
|
output = output.slice(0, lineStartIndex)
|
|
replaceCurrentLine = false
|
|
}
|
|
|
|
output += char
|
|
}
|
|
|
|
if (output.length <= COMMAND_OUTPUT_MAX_DISPLAY_CHARS) {
|
|
return output
|
|
}
|
|
|
|
return output.slice(output.length - COMMAND_OUTPUT_MAX_DISPLAY_CHARS)
|
|
}
|
|
|
|
/**
|
|
* Strip terminal control sequences that do not render usefully in HTML.
|
|
*/
|
|
cleanCommandOutputChunk(chunk) {
|
|
const withoutAnsi = String(chunk || '').replace(ANSI_ESCAPE_PATTERN, '')
|
|
const output = []
|
|
|
|
for (const char of withoutAnsi) {
|
|
if (char === '\b') {
|
|
output.pop()
|
|
continue
|
|
}
|
|
|
|
output.push(char)
|
|
}
|
|
|
|
return output.join('')
|
|
}
|
|
|
|
/**
|
|
* Render live command output in the result panel.
|
|
*/
|
|
renderCommandOutputLog(container, outputText) {
|
|
container.innerHTML = ''
|
|
|
|
if (!outputText) {
|
|
this.renderPlaceholder(container, 'Waiting for function output...')
|
|
return
|
|
}
|
|
|
|
const output = document.createElement('pre')
|
|
output.className = 'tool-command-output'
|
|
output.textContent = outputText
|
|
container.appendChild(output)
|
|
output.scrollTop = output.scrollHeight
|
|
}
|
|
|
|
/**
|
|
* Render a value preview block.
|
|
*/
|
|
renderValuePreview(container, value, emptyLabel) {
|
|
container.innerHTML = ''
|
|
|
|
if (
|
|
value === null ||
|
|
typeof value === 'undefined' ||
|
|
value === '' ||
|
|
(Array.isArray(value) && value.length === 0) ||
|
|
(typeof value === 'object' &&
|
|
!Array.isArray(value) &&
|
|
Object.keys(value).length === 0)
|
|
) {
|
|
this.renderPlaceholder(container, emptyLabel)
|
|
return
|
|
}
|
|
|
|
container.appendChild(this.buildValueNode(value))
|
|
}
|
|
|
|
/**
|
|
* Render an empty state placeholder.
|
|
*/
|
|
renderPlaceholder(container, text) {
|
|
container.innerHTML = ''
|
|
const placeholder = document.createElement('div')
|
|
placeholder.className = 'tool-empty-state'
|
|
placeholder.textContent = text
|
|
container.appendChild(placeholder)
|
|
}
|
|
|
|
/**
|
|
* Build the most appropriate preview node for a value.
|
|
*/
|
|
buildValueNode(value) {
|
|
if (Array.isArray(value)) {
|
|
return this.buildArrayNode(value)
|
|
}
|
|
|
|
if (value && typeof value === 'object') {
|
|
return this.buildObjectNode(value)
|
|
}
|
|
|
|
return this.buildScalarNode(value)
|
|
}
|
|
|
|
/**
|
|
* Build a list preview for array values.
|
|
*/
|
|
buildArrayNode(value) {
|
|
const list = document.createElement('ul')
|
|
list.className = 'tool-value-list'
|
|
|
|
value.slice(0, 8).forEach((item) => {
|
|
const itemElement = document.createElement('li')
|
|
itemElement.appendChild(this.buildScalarNode(this.stringifyCompact(item)))
|
|
list.appendChild(itemElement)
|
|
})
|
|
|
|
if (value.length > 8) {
|
|
const more = document.createElement('li')
|
|
more.className = 'tool-empty-state'
|
|
more.textContent = `+${value.length - 8} more item(s)`
|
|
list.appendChild(more)
|
|
}
|
|
|
|
return list
|
|
}
|
|
|
|
/**
|
|
* Build a key/value preview for object values.
|
|
*/
|
|
buildObjectNode(value) {
|
|
const entries = Object.entries(value)
|
|
if (entries.length === 0) {
|
|
const empty = document.createElement('div')
|
|
empty.className = 'tool-empty-state'
|
|
empty.textContent = 'No data'
|
|
return empty
|
|
}
|
|
|
|
const wrapper = document.createElement('div')
|
|
wrapper.className = 'tool-kv-list'
|
|
|
|
entries.slice(0, 8).forEach(([key, itemValue]) => {
|
|
const row = document.createElement('div')
|
|
row.className = 'tool-kv-row'
|
|
|
|
const keyElement = document.createElement('span')
|
|
keyElement.className = 'tool-kv-key'
|
|
keyElement.textContent = this.humanizeFunctionName(key)
|
|
|
|
const valueElement = document.createElement('div')
|
|
valueElement.className = 'tool-kv-value'
|
|
valueElement.appendChild(
|
|
this.buildScalarNode(this.stringifyCompact(itemValue))
|
|
)
|
|
|
|
row.appendChild(keyElement)
|
|
row.appendChild(valueElement)
|
|
wrapper.appendChild(row)
|
|
})
|
|
|
|
if (entries.length > 8) {
|
|
const more = document.createElement('div')
|
|
more.className = 'tool-empty-state'
|
|
more.textContent = `+${entries.length - 8} more field(s)`
|
|
wrapper.appendChild(more)
|
|
}
|
|
|
|
return wrapper
|
|
}
|
|
|
|
/**
|
|
* Build a formatted scalar value preview.
|
|
*/
|
|
buildScalarNode(value) {
|
|
const wrapper = document.createElement('div')
|
|
wrapper.className = 'tool-rich-text'
|
|
wrapper.innerHTML = this.formatMessage(
|
|
typeof value === 'string' ? value : String(value ?? '')
|
|
)
|
|
return wrapper
|
|
}
|
|
|
|
/**
|
|
* Render raw input/output payloads behind a disclosure block.
|
|
*/
|
|
renderRawData(toolGroupContainer) {
|
|
const payload = {}
|
|
|
|
if (toolGroupContainer.rawInput !== null) {
|
|
payload['input'] = toolGroupContainer.rawInput
|
|
}
|
|
|
|
if (toolGroupContainer.rawOutput !== null) {
|
|
payload['result'] = toolGroupContainer.rawOutput
|
|
}
|
|
|
|
if (Object.keys(payload).length === 0) {
|
|
toolGroupContainer.rawDetails.removeAttribute('open')
|
|
toolGroupContainer.rawContent.innerHTML = ''
|
|
return
|
|
}
|
|
|
|
toolGroupContainer.rawContent.innerHTML = this.formatMessage(
|
|
JSON.stringify(payload, null, 2)
|
|
)
|
|
}
|
|
|
|
/**
|
|
* Parse tool input JSON when possible.
|
|
*/
|
|
parseToolInput(toolInput) {
|
|
if (typeof toolInput !== 'string' || !toolInput.trim()) {
|
|
return null
|
|
}
|
|
|
|
try {
|
|
return JSON.parse(toolInput)
|
|
} catch {
|
|
return toolInput
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Update the status chip for the activity card.
|
|
*/
|
|
setStatusChip(chip, status) {
|
|
chip.classList.remove('running', 'success', 'error', 'selected', 'observed')
|
|
|
|
if (status === 'error') {
|
|
chip.classList.add('error')
|
|
chip.textContent = 'Failed'
|
|
return
|
|
}
|
|
|
|
if (status === 'success') {
|
|
chip.classList.add('success')
|
|
chip.textContent = 'Done'
|
|
return
|
|
}
|
|
|
|
if (status === 'selected') {
|
|
chip.classList.add('selected')
|
|
chip.textContent = 'In use'
|
|
return
|
|
}
|
|
|
|
if (status === 'observed') {
|
|
chip.classList.add('observed')
|
|
chip.textContent = 'Observed'
|
|
return
|
|
}
|
|
|
|
chip.classList.add('running')
|
|
chip.textContent = 'Running'
|
|
}
|
|
|
|
/**
|
|
* Humanize function and field names for display.
|
|
*/
|
|
humanizeFunctionName(value) {
|
|
return String(value || 'unknown')
|
|
.replace(/([a-z0-9])([A-Z])/g, '$1 $2')
|
|
.replace(/[_-]+/g, ' ')
|
|
.replace(/\s+/g, ' ')
|
|
.trim()
|
|
.replace(/^\w/, (char) => char.toUpperCase())
|
|
}
|
|
|
|
/**
|
|
* Produce a compact preview string for nested values.
|
|
*/
|
|
stringifyCompact(value) {
|
|
if (typeof value === 'string') {
|
|
const trimmed = value.trim()
|
|
if (!trimmed) {
|
|
return '(empty)'
|
|
}
|
|
|
|
return trimmed.length > 180 ? `${trimmed.slice(0, 177)}...` : trimmed
|
|
}
|
|
|
|
if (value === null || typeof value === 'undefined') {
|
|
return '(empty)'
|
|
}
|
|
|
|
if (typeof value === 'object') {
|
|
try {
|
|
const serialized = JSON.stringify(value)
|
|
return serialized.length > 180
|
|
? `${serialized.slice(0, 177)}...`
|
|
: serialized
|
|
} catch {
|
|
return String(value)
|
|
}
|
|
}
|
|
|
|
return String(value)
|
|
}
|
|
|
|
/**
|
|
* Replace a tool message (for progress updates, etc.).
|
|
*/
|
|
replaceToolMessage(replaceMessageId, newData) {
|
|
const existingMessage = document.querySelector(
|
|
`[data-message-id="${replaceMessageId}"]`
|
|
)
|
|
|
|
if (existingMessage && existingMessage.closest('.tool-group-container')) {
|
|
const formattedMessage = this.formatMessage(newData.answer)
|
|
existingMessage.innerHTML = `<span class="shell-prompt">></span> ${formattedMessage}`
|
|
} else {
|
|
this.handleToolOutput(newData)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get tool group info for saving to localStorage.
|
|
*/
|
|
getToolGroupInfo(groupId, toolkitName, toolName, message) {
|
|
return {
|
|
originalString: `[TOOL_OUTPUT:${groupId}] ${toolkitName} → ${toolName}`,
|
|
messageId: `tool-${groupId}`,
|
|
formattedMessage: this.formatMessage(message)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Check if a message is a tool output marker.
|
|
*/
|
|
static isToolOutputMarker(messageString) {
|
|
return messageString && messageString.startsWith('[TOOL_OUTPUT:')
|
|
}
|
|
|
|
/**
|
|
* Clear all tool groups.
|
|
*/
|
|
clearToolGroups() {
|
|
this.toolGroups.clear()
|
|
}
|
|
|
|
/**
|
|
* Get the number of active tool groups.
|
|
*/
|
|
getToolGroupCount() {
|
|
return this.toolGroups.size
|
|
}
|
|
|
|
/**
|
|
* Get a specific tool group by ID.
|
|
*/
|
|
getToolGroup(groupId) {
|
|
return this.toolGroups.get(groupId)
|
|
}
|
|
|
|
/**
|
|
* Remove a tool group.
|
|
*/
|
|
removeToolGroup(groupId) {
|
|
const toolGroup = this.toolGroups.get(groupId)
|
|
if (toolGroup) {
|
|
toolGroup.container.remove()
|
|
this.toolGroups.delete(groupId)
|
|
}
|
|
}
|
|
}
|