(null)
@@ -914,6 +922,8 @@ export function Action({
if (readOnly) {
return
}
+ setWidgetEditing(false)
+ setWidgetSourceChanged(false)
cellData.run()
}, [cellData, readOnly])
@@ -2133,6 +2143,7 @@ export function Action({
{
+ if (hasWidgetOutput) setWidgetSourceChanged(true)
const updated = create(parser_pb.CellSchema, cell)
updated.value = v
updateCellLocal(updated)
@@ -2158,6 +2170,30 @@ export function Action({
{/* Minimal toolbar: language + runner selectors + run/trash buttons */}
+ {hasWidgetOutput && (
+
+
+
+ {widgetSourceChanged && (
+ Source changed — Run to update the monitor.
+ )}
+
+ )}
{/* Context menu */}
diff --git a/app/src/components/Agents/AgentMonitor.test.tsx b/app/src/components/Agents/AgentMonitor.test.tsx
new file mode 100644
index 00000000..bb7accf6
--- /dev/null
+++ b/app/src/components/Agents/AgentMonitor.test.tsx
@@ -0,0 +1,213 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import {
+ act,
+ cleanup,
+ fireEvent,
+ render,
+ screen,
+ waitFor,
+} from '@testing-library/react'
+import { AgentItemView, AgentMonitorOutput } from './AgentMonitor'
+import { resetAgentMonitors } from '../../lib/agents/runtime'
+import * as runtime from '../../lib/agents/runtime'
+import { AgentMonitor } from '../../lib/agents/monitor'
+import { keyVault } from '../../lib/keyvault/store'
+
+afterEach(() => {
+ cleanup()
+ resetAgentMonitors()
+ localStorage.clear()
+ keyVault.refresh()
+ vi.unstubAllGlobals()
+ vi.restoreAllMocks()
+})
+describe('agent monitor rendering', () => {
+ it('supports multiline drafts, explicit send, failure retry, and disabled disconnected input', async () => {
+ const sendMessage = vi
+ .fn()
+ .mockRejectedValueOnce(new Error('offline'))
+ .mockResolvedValue(undefined)
+ const descriptor = {
+ version: 1 as const,
+ id: 'composer',
+ sessionId: 'sess_composer',
+ pageSize: 50,
+ }
+ const model = new AgentMonitor(descriptor, () => ({
+ sendMessage,
+ session: async () => ({ status: 'idle' }),
+ items: async () => ({ data: [], has_more: false, last_id: null }),
+ turns: async () => ({ data: [], has_more: false, last_id: null }),
+ stream: async () => ({
+ close() {},
+ events: {
+ [Symbol.asyncIterator]: () => ({ next: () => new Promise(() => {}) }),
+ },
+ }),
+ }))
+ vi.spyOn(runtime, 'resolveAgentMonitor').mockReturnValue(model)
+ render(
)
+ const input = screen.getByRole('textbox', {
+ name: 'Message the agent',
+ }) as HTMLTextAreaElement
+ fireEvent.change(input, { target: { value: 'Hello\nagent' } })
+ expect(
+ (
+ screen.getByRole('button', {
+ name: 'Send',
+ }) as HTMLButtonElement
+ ).disabled
+ ).toBe(true)
+ fireEvent.click(screen.getByRole('button', { name: 'Connect' }))
+ await waitFor(() => expect(model.getSnapshot().connection).toBe('live'))
+ fireEvent.keyDown(input, { key: 'Enter', shiftKey: true })
+ fireEvent.keyDown(input, { key: 'Enter', isComposing: true })
+ expect(sendMessage).not.toHaveBeenCalled()
+ fireEvent.keyDown(input, { key: 'Enter' })
+ await screen.findByRole('alert')
+ expect(input.value).toBe('Hello\nagent')
+ fireEvent.click(screen.getByRole('button', { name: 'Send' }))
+ await waitFor(() => expect(input.value).toBe(''))
+ expect(sendMessage.mock.calls[1][2]).toBe(sendMessage.mock.calls[0][2])
+ expect(screen.getByText('Message sent.')).toBeTruthy()
+ act(() => model.pause())
+ })
+ it('renders Markdown tables and code without executing HTML or loading images', () => {
+ const { container } = render(
+
alert(2)\n\n\n\n[bad](javascript:alert(3))',
+ },
+ ],
+ }}
+ />
+ )
+ expect(container.querySelector('strong')?.textContent).toBe('Assistant')
+ expect(container.querySelector('table')?.textContent).toContain('Passed')
+ expect(container.querySelector('pre code')?.textContent).toContain(
+ 'alert(1)'
+ )
+ expect(container.querySelector('script')).toBeNull()
+ expect(container.querySelector('img')).toBeNull()
+ expect(container.querySelector('a')?.getAttribute('href')).not.toMatch(
+ /^javascript:/
+ )
+ })
+ it('keeps unknown tool payloads inspectable and distinguishes user messages', () => {
+ render(
+ <>
+
+
+
+ )
+ expect(screen.getByText('future_tool · failed')).toBeTruthy()
+ expect(screen.getByText('You')).toBeTruthy()
+ })
+ it('does not connect saved output automatically and gives actionable configuration errors', async () => {
+ const fetch = vi.fn()
+ vi.stubGlobal('fetch', fetch)
+ render(
+
+ )
+ expect(fetch).not.toHaveBeenCalled()
+ fireEvent.click(screen.getByRole('button', { name: 'Connect' }))
+ expect((await screen.findByRole('alert')).textContent).toContain(
+ 'Unlock Key Vault'
+ )
+ expect(fetch).not.toHaveBeenCalled()
+ })
+ it('connects a saved widget after unlocking without rerunning its cell', async () => {
+ const { webcrypto } = await import('node:crypto')
+ vi.stubGlobal('crypto', webcrypto)
+ localStorage.clear()
+ keyVault.refresh()
+ await keyVault.unlock('widget unlock passphrase', true)
+ await keyVault.saveKey('openai-api', 'widget-test-secret')
+ keyVault.lock()
+ const fetchMock = vi.fn<
+ (url: string, options?: RequestInit) => Promise
+ >(async (url) => {
+ if (url.includes('stream=true'))
+ return new Response(new ReadableStream(), {
+ headers: { 'Content-Type': 'text/event-stream' },
+ })
+ return new Response(
+ JSON.stringify(
+ url.endsWith('sess_saved')
+ ? { status: 'idle' }
+ : { data: [], has_more: false, last_id: null }
+ )
+ )
+ })
+ vi.stubGlobal('fetch', fetchMock)
+ render(
+
+ )
+ fireEvent.click(screen.getByRole('button', { name: 'Connect' }))
+ expect((await screen.findByRole('alert')).textContent).toContain(
+ 'Unlock Key Vault'
+ )
+ expect(fetchMock).not.toHaveBeenCalled()
+ await act(async () => {
+ await keyVault.unlock('widget unlock passphrase')
+ })
+ // Unlocking does not issue requests until the user retries Connect.
+ expect(fetchMock).not.toHaveBeenCalled()
+ fireEvent.click(screen.getByRole('button', { name: 'Connect' }))
+ await waitFor(() =>
+ expect(screen.getByRole('status').textContent).toContain(
+ 'Connection: live'
+ )
+ )
+ expect(screen.queryByRole('alert')).toBeNull()
+ expect(fetchMock).toHaveBeenCalledTimes(4)
+ expect(
+ new Headers(fetchMock.mock.calls[0][1]?.headers).get('Authorization')
+ ).toBe('Bearer widget-test-secret')
+ act(() => keyVault.lock())
+ expect(
+ screen.getByRole('button', { name: 'Resume monitoring' })
+ ).toBeTruthy()
+ })
+ it('isolates malformed saved descriptors', () => {
+ render()
+ expect(screen.getByRole('alert').textContent).toContain('Unsupported')
+ })
+})
diff --git a/app/src/components/Agents/AgentMonitor.tsx b/app/src/components/Agents/AgentMonitor.tsx
new file mode 100644
index 00000000..d6c1f497
--- /dev/null
+++ b/app/src/components/Agents/AgentMonitor.tsx
@@ -0,0 +1,310 @@
+import { useEffect, useId, useMemo, useRef, useSyncExternalStore } from 'react'
+import { PaperAirplaneIcon } from '@heroicons/react/24/outline'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+
+import {
+ resolveAgentMonitor,
+ mountAgentMonitor,
+} from '../../lib/agents/runtime'
+import {
+ parseMonitorDescriptor,
+ type AgentItem,
+ type AgentMonitorDescriptor,
+} from '../../lib/agents/types'
+
+/** Unknown API objects remain readable without enabling active HTML or scripts. */
+function Details({ title, value }: { title: string; value: unknown }) {
+ return (
+
+ {title}
+
+ {JSON.stringify(value, null, 2)}
+
+
+ )
+}
+
+/** Render message content as safe GFM; tool calls retain their full structured payload. */
+export function AgentItemView({ item }: { item: AgentItem }) {
+ if (item.type !== 'message')
+ return (
+
+ {(item.content ?? []).map((part, index) => {
+ const text =
+ typeof part?.text === 'string'
+ ? part.text
+ : typeof part?.refusal === 'string'
+ ? part.refusal
+ : null
+ if (text !== null)
+ return (
+
(
+
+ {children}
+
+ ),
+ img: ({ alt }) => [Image: {alt || 'attachment'}],
+ }}
+ >
+ {text}
+
+ )
+ return (
+
+ )
+ })}
+
+ Session: {String(state.session?.status ?? 'unknown')} · Root turn:{' '}
+ {String(state.turn?.status ?? 'unknown')} · Connection:{' '}
+ {state.connection}
+
+ {state.error && (
+
+ {state.error}
+
+ )}
+ {state.turn?.error != null && (
+ {
+ const element = viewport.current
+ if (element)
+ follow.current =
+ element.scrollHeight - element.scrollTop - element.clientHeight <
+ 48
+ }}
+ >
+ {!state.items.length && (
+
+ {state.connection === 'connecting'
+ ? 'Loading session history…'
+ : state.session
+ ? 'No saved items yet.'
+ : 'Run this cell or Connect to load session history.'}
+
+ )}
+ {state.items.map((item, index) => (
+
+ ))}
+