@demicodes/web-ui 0.3.1

package/src/agent/__tests__/input-actions.test.ts

@@ -0,0 +1,130 @@
+import { expect, test } from 'bun:test'
+import type { UserContentBlock } from '@demicodes/core'
+import { useAgentInputActions } from '../message-input/useAgentInputActions'
+import type { AgentWorkspace } from '../workspace'
+
+test('input submit sends a new turn while idle', async () => {
+  const calls: string[] = []
+  const workspace = fakeWorkspace('idle', calls)
+  const actions = useAgentInputActions({
+    workspace,
+    conversationId: 'conversation-1',
+    buildSubmitPayload: () => [{ type: 'text', text: 'new turn' }],
+    clearInput: () => calls.push('clear'),
+  })
+
+  await actions.handleSubmit()
+
+  expect(calls).toEqual(['clear', 'send:new turn'])
+})
+
+test('input submit queues a new turn while running', async () => {
+  const calls: string[] = []
+  const workspace = fakeWorkspace('running', calls)
+  const actions = useAgentInputActions({
+    workspace,
+    conversationId: 'conversation-1',
+    buildSubmitPayload: () => [{ type: 'text', text: 'run after this' }],
+    clearInput: () => calls.push('clear'),
+  })
+
+  await actions.handleSubmit()
+
+  expect(calls).toEqual(['clear', 'send:run after this'])
+})
+
+test('input steer action steers the active turn while running', async () => {
+  const calls: string[] = []
+  const workspace = fakeWorkspace('running', calls)
+  const actions = useAgentInputActions({
+    workspace,
+    conversationId: 'conversation-1',
+    buildSubmitPayload: () => [{ type: 'text', text: 'refine this turn' }],
+    clearInput: () => calls.push('clear'),
+  })
+
+  await actions.handleSteerSubmit()
+
+  expect(calls).toEqual(['clear', 'steer:refine this turn'])
+})
+
+test('input queue action sends a new turn while running', async () => {
+  const calls: string[] = []
+  const workspace = fakeWorkspace('running', calls)
+  const actions = useAgentInputActions({
+    workspace,
+    conversationId: 'conversation-1',
+    buildSubmitPayload: () => [{ type: 'text', text: 'run after this' }],
+    clearInput: () => calls.push('clear'),
+  })
+
+  await actions.handleQueueSubmit()
+
+  expect(calls).toEqual(['clear', 'send:run after this'])
+})
+
+test('input submit emits empty-submit when there is no payload', async () => {
+  const calls: string[] = []
+  const workspace = fakeWorkspace('running', calls)
+  const actions = useAgentInputActions({
+    workspace,
+    conversationId: 'conversation-1',
+    buildSubmitPayload: () => null,
+    clearInput: () => calls.push('clear'),
+    emitEmptySubmit: () => calls.push('empty-submit'),
+  })
+
+  await actions.handleSubmit()
+
+  expect(calls).toEqual(['empty-submit'])
+})
+
+test('empty input submit steers the last queued message while running', async () => {
+  const calls: string[] = []
+  const workspace = fakeWorkspace('running', calls, [
+    { id: 'queued-first' },
+    { id: 'queued-last' },
+  ])
+  const actions = useAgentInputActions({
+    workspace,
+    conversationId: 'conversation-1',
+    buildSubmitPayload: () => null,
+    clearInput: () => calls.push('clear'),
+    emitEmptySubmit: () => calls.push('empty-submit'),
+  })
+
+  await actions.handleSubmit()
+
+  expect(calls).toEqual(['steer-queued:queued-last'])
+})
+
+function fakeWorkspace(
+  phase: 'idle' | 'running' | 'compacting',
+  calls: string[],
+  queue: Array<{ id: string }> = [],
+): AgentWorkspace {
+  return {
+    sessions: {
+      'conversation-1': { phase, queue },
+    },
+    send: async (_id: string, content: UserContentBlock[]) => {
+      calls.push(`send:${textContent(content)}`)
+    },
+    sendQueuedMessage: (_id: string, messageId: string) => {
+      calls.push(`send-queued:${messageId}`)
+    },
+    steerQueuedMessage: async (_id: string, messageId: string) => {
+      calls.push(`steer-queued:${messageId}`)
+    },
+    steer: async (_id: string, content: UserContentBlock[]) => {
+      calls.push(`steer:${textContent(content)}`)
+    },
+    setModel: () => {},
+    abort: async () => {},
+    compact: async () => {},
+  } as unknown as AgentWorkspace
+}
+
+function textContent(content: UserContentBlock[]): string {
+  return content.map((block) => (block.type === 'text' ? block.text : `[${block.type}]`)).join('\n')
+}

package/src/agent/__tests__/input-editor.test.ts

@@ -0,0 +1,15 @@
+import { expect, test } from 'bun:test'
+import { editorHasContent, shouldSubmitFromEditorKeydown } from '../message-input/useAgentInputEditor'
+
+test('editor keydown submits only bare Enter', () => {
+  expect(shouldSubmitFromEditorKeydown({ isComposing: false, key: 'Enter', shiftKey: false })).toBe(true)
+  expect(shouldSubmitFromEditorKeydown({ isComposing: false, key: 'Enter', shiftKey: true })).toBe(false)
+  expect(shouldSubmitFromEditorKeydown({ isComposing: true, key: 'Enter', shiftKey: false })).toBe(false)
+  expect(shouldSubmitFromEditorKeydown({ isComposing: false, key: 'a', shiftKey: false })).toBe(false)
+})
+
+test('editor content state follows editor emptiness', () => {
+  expect(editorHasContent({ isEmpty: false })).toBe(true)
+  expect(editorHasContent({ isEmpty: true })).toBe(false)
+  expect(editorHasContent(null)).toBe(false)
+})

package/src/agent/__tests__/pending-steers.test.ts

@@ -0,0 +1,99 @@
+import { expect, test } from 'bun:test'
+import { reactive } from 'vue'
+import type { Block, UserContentBlock } from '@demicodes/core'
+import {
+  createPendingSteerMessage,
+  pendingSteersToRenderBlocks,
+  reconcilePendingSteers,
+} from '../pending-steers'
+
+test('pending steer renders as a tail block without mutating transcript blocks', () => {
+  const content = text('same-turn guidance')
+  const pending = createPendingSteerMessage('local-1', content, [])
+
+  const renderBlocks = pendingSteersToRenderBlocks([pending])
+
+  expect(renderBlocks).toEqual([
+    {
+      type: 'pending_steer',
+      id: 'pending-steer:local-1',
+      pendingSteerId: 'local-1',
+      content,
+    },
+  ])
+})
+
+test('pending steer accepts queued content from reactive state', () => {
+  const content = reactive(text('queued as steer')) as UserContentBlock[]
+  const pending = createPendingSteerMessage('local-1', content, [])
+
+  expect(pending.content).toEqual(text('queued as steer'))
+  expect(pending.content).not.toBe(content)
+})
+
+test('pending steer clones and reconciles native video content', () => {
+  const data = new Uint8Array([1, 2, 3])
+  const content: UserContentBlock[] = [{ type: 'video', source: { type: 'binary', mediaType: 'video/mp4', data } }]
+  const pending = createPendingSteerMessage('local-video', content, [])
+
+  expect(pending.content).toEqual(content)
+  expect(pending.content).not.toBe(content)
+  const source = content[0]?.type === 'video' ? content[0].source : null
+  expect((pending.content[0] as Extract<UserContentBlock, { type: 'video' }>).source).not.toBe(source)
+  expect(reconcilePendingSteers([videoSteerBlock('materialized', new Uint8Array([1, 2, 3]))], [pending])).toEqual([])
+})
+
+test('reconcile keeps pending steer when only baseline steer blocks exist', () => {
+  const baseline = [steerBlock('existing', 'same text')]
+  const pending = createPendingSteerMessage('local-1', text('same text'), baseline)
+
+  expect(reconcilePendingSteers(baseline, [pending])).toEqual([pending])
+})
+
+test('reconcile removes pending steer after a matching transcript steer materializes', () => {
+  const baseline = [steerBlock('existing', 'old steer')]
+  const pending = createPendingSteerMessage('local-1', text('same-turn guidance'), baseline)
+  const nextBlocks = [...baseline, steerBlock('materialized', 'same-turn guidance')]
+
+  expect(reconcilePendingSteers(nextBlocks, [pending])).toEqual([])
+})
+
+test('reconcile removes pending steer when reference resolution changes materialized content', () => {
+  const pending = createPendingSteerMessage('local-1', [{ type: 'reference', reference: '@file' }], [])
+
+  expect(reconcilePendingSteers([steerBlock('materialized', 'resolved file content')], [pending])).toEqual([])
+})
+
+test('reconcile handles duplicate pending steer messages one materialized block at a time', () => {
+  const first = createPendingSteerMessage('local-1', text('duplicate'), [])
+  const second = createPendingSteerMessage('local-2', text('duplicate'), [])
+
+  expect(reconcilePendingSteers([steerBlock('materialized-1', 'duplicate')], [first, second])).toEqual([second])
+  expect(reconcilePendingSteers([steerBlock('materialized-1', 'duplicate'), steerBlock('materialized-2', 'duplicate')], [first, second])).toEqual([])
+})
+
+function text(value: string): UserContentBlock[] {
+  return [{ type: 'text', text: value }]
+}
+
+function steerBlock(id: string, value: string): Block {
+  return {
+    type: 'steer',
+    id,
+    turnId: 'turn-1',
+    createdAt: '2026-06-23T00:00:00.000Z',
+    model: null,
+    content: text(value),
+  } as unknown as Block
+}
+
+function videoSteerBlock(id: string, data: Uint8Array): Block {
+  return {
+    type: 'steer',
+    id,
+    turnId: 'turn-1',
+    createdAt: '2026-06-23T00:00:00.000Z',
+    model: null,
+    content: [{ type: 'video', source: { type: 'binary', mediaType: 'video/mp4', data } }],
+  } as unknown as Block
+}

package/src/agent/__tests__/queue-submit.test.ts

@@ -0,0 +1,14 @@
+import { expect, test } from 'bun:test'
+import { queuedMessageIdForEmptySubmit } from '../queue-submit'
+
+test('empty submit with no queue has no queued message target', () => {
+  expect(queuedMessageIdForEmptySubmit([])).toBeNull()
+})
+
+test('empty submit targets the last queued message', () => {
+  expect(queuedMessageIdForEmptySubmit([
+    { id: 'queued-first' },
+    { id: 'queued-second' },
+    { id: 'queued-last' },
+  ])).toBe('queued-last')
+})

package/src/agent/__tests__/reasoning.test.ts

@@ -0,0 +1,32 @@
+import { test, expect } from 'bun:test'
+import { buildReasoningState } from '../reasoning'
+import type { ModelInfo } from '../../transport/protocol'
+
+const base: ModelInfo = {
+  id: 'm',
+  name: 'M',
+  contextWindow: 200000,
+  inputLimit: null,
+  acceptedExtensions: [],
+  reasoning: { efforts: ['low', 'medium', 'high'], defaultEffort: null, canDisable: true },
+}
+
+test('offers "No reasoning" when the model can disable thinking', () => {
+  const state = buildReasoningState(base)!
+  expect(state.canDisable).toBe(true)
+  expect(state.options.map((o) => o.label)).toContain('No reasoning')
+  expect(state.options[0]!.config).toEqual({ type: 'disabled' })
+})
+
+test('omits "No reasoning" when the model cannot disable thinking (e.g. Claude Code)', () => {
+  const state = buildReasoningState({ ...base, reasoning: { ...base.reasoning!, canDisable: false } })!
+  expect(state.canDisable).toBe(false)
+  expect(state.options.map((o) => o.label)).not.toContain('No reasoning')
+  expect(state.options.every((o) => o.config.type === 'effort')).toBe(true)
+  // the default selection is still a real effort, never "disabled"
+  expect(state.defaultConfig).toEqual({ type: 'effort', effort: 'low', summary: null })
+})
+
+test('no reasoning state when the model has no efforts', () => {
+  expect(buildReasoningState({ ...base, reasoning: null })).toBeNull()
+})

package/src/agent/__tests__/tail-loading.test.ts

@@ -0,0 +1,131 @@
+import { expect, test } from 'bun:test'
+import type { Block, ToolCallStatus } from '@demicodes/core'
+import type { MessageListBlock } from '../pending-steers'
+import { shouldShowTailLoading } from '../tail-loading'
+
+test('tail loading appears while a running turn waits for the first model output', () => {
+  expect(shouldShowTailLoading('running', [])).toBe(true)
+})
+
+test('tail loading appears after user-like blocks while the turn is running', () => {
+  expect(shouldShowTailLoading('running', [userBlock()])).toBe(true)
+  expect(shouldShowTailLoading('running', [steerBlock()])).toBe(true)
+  expect(shouldShowTailLoading('running', [pendingSteerBlock()])).toBe(true)
+  expect(shouldShowTailLoading('running', [compactionBoundaryBlock()])).toBe(true)
+})
+
+test('tail loading appears after a completed tool while waiting for the model to continue', () => {
+  expect(shouldShowTailLoading('running', [toolCallBlock('completed')])).toBe(true)
+  expect(shouldShowTailLoading('running', [toolCallBlock('error')])).toBe(true)
+})
+
+test('tail loading stays hidden while the tool row itself is executing', () => {
+  expect(shouldShowTailLoading('running', [toolCallBlock('executing')])).toBe(false)
+})
+
+test('tail loading stays hidden outside running phase', () => {
+  expect(shouldShowTailLoading('idle', [])).toBe(false)
+  expect(shouldShowTailLoading('idle', [toolCallBlock('completed')])).toBe(false)
+  expect(shouldShowTailLoading('compacting', [userBlock()])).toBe(false)
+})
+
+test('tail loading stays hidden while assistant content is the latest visible block', () => {
+  expect(shouldShowTailLoading('running', [thinkingBlock()])).toBe(false)
+  expect(shouldShowTailLoading('running', [textBlock()])).toBe(false)
+})
+
+test('pending steer does not add tail loading while active thinking is already loading', () => {
+  const transcriptBlocks = [thinkingBlock()]
+  const renderBlocks = [...transcriptBlocks, pendingSteerBlock()]
+
+  expect(shouldShowTailLoading('running', transcriptBlocks, renderBlocks)).toBe(false)
+})
+
+test('tail loading appears after a materialized steer before the model continues', () => {
+  expect(shouldShowTailLoading('running', [thinkingBlock(), steerBlock()])).toBe(true)
+})
+
+const createdAt = '2026-06-24T00:00:00.000Z'
+const model = null as unknown as BlockWithModel['model']
+
+type BlockWithModel = Extract<Block, { model: unknown }>
+
+function userBlock(): MessageListBlock {
+  return {
+    type: 'user',
+    id: 'user-1',
+    turnId: 'turn-1',
+    createdAt,
+    model,
+    content: [{ type: 'text', text: 'hello' }],
+    preamble: null,
+  }
+}
+
+function pendingSteerBlock(): MessageListBlock {
+  return {
+    type: 'pending_steer',
+    id: 'pending-steer-1',
+    pendingSteerId: 'pending-1',
+    content: [{ type: 'text', text: 'steer' }],
+  }
+}
+
+function steerBlock(): MessageListBlock {
+  return {
+    type: 'steer',
+    id: 'steer-1',
+    turnId: 'turn-1',
+    createdAt,
+    model,
+    content: [{ type: 'text', text: 'steer' }],
+  }
+}
+
+function compactionBoundaryBlock(): MessageListBlock {
+  return {
+    type: 'compaction_boundary',
+    id: 'compaction-1',
+    createdAt,
+    model,
+    summary: 'summary',
+    summaryTokens: 1,
+  }
+}
+
+function toolCallBlock(status: ToolCallStatus): MessageListBlock {
+  return {
+    type: 'tool_call',
+    id: `tool-${status}`,
+    createdAt,
+    model,
+    toolUseId: `tool-use-${status}`,
+    toolName: 'shell_exec',
+    input: '{"script":"ls"}',
+    status,
+    streamingOutput: [],
+    output: [],
+    view: null,
+  }
+}
+
+function thinkingBlock(): MessageListBlock {
+  return {
+    type: 'thinking',
+    id: 'thinking-1',
+    createdAt,
+    model,
+    text: 'thinking',
+    signature: null,
+  }
+}
+
+function textBlock(): MessageListBlock {
+  return {
+    type: 'text',
+    id: 'text-1',
+    createdAt,
+    model,
+    text: 'answer',
+  }
+}

package/src/agent/__tests__/tool-rendering.test.ts

@@ -0,0 +1,35 @@
+import { expect, test } from 'bun:test'
+import {
+  isStandardToolName,
+  shouldParsePartialToolInput,
+  standardToolTitle,
+  trimToolSummary,
+  toolRenderKind,
+} from '../tool-rendering'
+
+test('standard tool titles prefer description and fall back by concrete tool', () => {
+  expect(standardToolTitle('shell_exec', { description: 'Run unit tests', script: 'bun test' })).toBe('Run unit tests')
+  expect(standardToolTitle('shell_exec', { script: 'bun test' })).toBe('bun test')
+  expect(standardToolTitle('shell_status', { commandId: 'cmd-1' })).toBe('Check cmd-1')
+  expect(standardToolTitle('shell_write', { commandId: 'cmd-1' })).toBe('Send input to cmd-1')
+  expect(standardToolTitle('shell_abort', { commandId: 'cmd-1' })).toBe('Stop cmd-1')
+  expect(standardToolTitle('yield', { durationMs: 250 })).toBe('Wait 250ms')
+})
+
+test('standard tool helpers distinguish Demi tools from unknown generic tools', () => {
+  expect(isStandardToolName('shell_exec')).toBe(true)
+  expect(isStandardToolName('shell_status')).toBe(true)
+  expect(isStandardToolName('shell_write')).toBe(true)
+  expect(isStandardToolName('shell_abort')).toBe(true)
+  expect(isStandardToolName('yield')).toBe(true)
+  expect(isStandardToolName('unknown_tool')).toBe(false)
+  expect(shouldParsePartialToolInput('shell_write')).toBe(true)
+  expect(shouldParsePartialToolInput('unknown_tool')).toBe(false)
+  expect(toolRenderKind('shell_exec')).toBe('shell_exec')
+  expect(toolRenderKind('shell_status')).toBe('shell_status')
+  expect(toolRenderKind('shell_write')).toBe('shell_write')
+  expect(toolRenderKind('shell_abort')).toBe('shell_abort')
+  expect(toolRenderKind('yield')).toBe('yield')
+  expect(toolRenderKind('unknown_tool')).toBe('generic')
+  expect(trimToolSummary(' a\n  b ')).toBe('a b')
+})

package/src/agent/__tests__/visible-blocks.test.ts

@@ -0,0 +1,125 @@
+import { expect, test } from 'bun:test'
+import type { Block, ModelSelection } from '@demicodes/core'
+import { getVisibleBlocks } from '../visible-blocks'
+
+test('visible blocks hide response blocks because web no longer renders response stats rows', () => {
+  const blocks = [
+    tool('yield-1', 'yield'),
+    response('response-after-yield'),
+    tool('status-1', 'shell_status'),
+  ]
+
+  expect(getVisibleBlocks(blocks).map((block) => block.id)).toEqual(['yield-1', 'status-1'])
+})
+
+test('visible blocks hide ordinary response blocks too', () => {
+  const blocks = [
+    tool('exec-1', 'shell_exec'),
+    response('response-after-exec'),
+    tool('status-1', 'shell_status'),
+  ]
+
+  expect(getVisibleBlocks(blocks).map((block) => block.id)).toEqual(['exec-1', 'status-1'])
+})
+
+test('visible blocks hide resume blocks because web has no resume row renderer', () => {
+  const blocks = [
+    tool('yield-1', 'yield'),
+    resume('resume-after-yield'),
+    tool('status-1', 'shell_status'),
+  ]
+
+  expect(getVisibleBlocks(blocks).map((block) => block.id)).toEqual(['yield-1', 'status-1'])
+})
+
+test('visible blocks hide hidden user/steer turns (internal yield wakeups) but keep real ones', () => {
+  const blocks = [
+    user('user-1', false),
+    tool('exec-1', 'shell_exec'),
+    user('wakeup-send', true),
+    steer('wakeup-steer', true),
+    steer('real-steer', false),
+  ]
+
+  expect(getVisibleBlocks(blocks).map((block) => block.id)).toEqual(['user-1', 'exec-1', 'real-steer'])
+})
+
+function tool(id: string, toolName: string): Extract<Block, { type: 'tool_call' }> {
+  return {
+    type: 'tool_call',
+    id,
+    createdAt: '1970-01-01T00:00:00.000Z',
+    model,
+    toolUseId: id,
+    toolName,
+    input: '{}',
+    status: 'completed',
+    streamingOutput: [],
+    output: [],
+    view: null,
+  }
+}
+
+function response(id: string): Extract<Block, { type: 'response' }> {
+  return {
+    type: 'response',
+    id,
+    createdAt: '1970-01-01T00:00:00.000Z',
+    model,
+    usage: {
+      inputTokens: 1,
+      outputTokens: 1,
+      cacheReadTokens: 0,
+      cacheWriteTokens: 0,
+    },
+  }
+}
+
+function resume(id: string): Extract<Block, { type: 'resume' }> {
+  return {
+    type: 'resume',
+    id,
+    turnId: id,
+    createdAt: '1970-01-01T00:00:00.000Z',
+    model,
+  }
+}
+
+function user(id: string, hidden: boolean): Extract<Block, { type: 'user' }> {
+  return {
+    type: 'user',
+    id,
+    turnId: id,
+    createdAt: '1970-01-01T00:00:00.000Z',
+    model,
+    content: [{ type: 'text', text: id }],
+    preamble: null,
+    ...(hidden ? { hidden: true } : {}),
+  }
+}
+
+function steer(id: string, hidden: boolean): Extract<Block, { type: 'steer' }> {
+  return {
+    type: 'steer',
+    id,
+    turnId: id,
+    createdAt: '1970-01-01T00:00:00.000Z',
+    model,
+    content: [{ type: 'text', text: id }],
+    ...(hidden ? { hidden: true } : {}),
+  }
+}
+
+const model: ModelSelection = {
+  providerId: 'test',
+  model: {
+    id: 'test-model',
+    name: 'Test Model',
+    contextWindow: 1000,
+    inputLimit: null,
+    thinking: [],
+    acceptedExtensions: [],
+  },
+  thinking: null,
+  serviceTierId: null,
+}

package/src/agent/block-helpers.ts

@@ -0,0 +1,59 @@
+import { isRecord } from '@demicodes/utils'
+import type { Block, TokenUsage } from '@demicodes/core'
+
+type ToolCallBlock = Extract<Block, { type: 'tool_call' }>
+
+export interface ShellTerminalOutputChunk {
+  stream: 'stdout' | 'stderr'
+  text: string
+}
+
+export function getLatestResponseUsage(blocks: readonly Block[]): TokenUsage | null {
+  for (let i = blocks.length - 1; i >= 0; i--) {
+    const block = blocks[i]!
+    if (block.type === 'response') return block.usage
+  }
+  return null
+}
+
+export function getToolErrorText(block: ToolCallBlock): string | undefined {
+  if (block.status !== 'error') return undefined
+  const texts: string[] = []
+  for (const part of block.output) {
+    if (part.type === 'text') texts.push(part.text)
+  }
+  return texts.length > 0 ? texts.join('\n') : undefined
+}
+
+export function toolOutputText(block: ToolCallBlock): string {
+  const source = block.status === 'executing' ? block.streamingOutput : block.streamingOutput.length > 0 ? block.streamingOutput : block.output
+  return source
+    .filter((part): part is Extract<typeof part, { type: 'text' }> => part.type === 'text')
+    .map((part) => part.text)
+    .join('\n')
+}
+
+export function shellTerminalOutputChunks(block: ToolCallBlock): ShellTerminalOutputChunk[] {
+  return outputChunks(block.view)
+}
+
+export function parseToolInput(raw: string): Record<string, unknown> {
+  if (!raw) return {}
+  try {
+    const parsed = JSON.parse(raw)
+    return typeof parsed === 'object' && parsed !== null ? (parsed as Record<string, unknown>) : {}
+  } catch {
+    return {}
+  }
+}
+
+function outputChunks(view: unknown): ShellTerminalOutputChunk[] {
+  if (!isRecord(view) || !Array.isArray(view['chunks'])) return []
+  return view['chunks'].flatMap((chunk): ShellTerminalOutputChunk[] => {
+    if (!isRecord(chunk)) return []
+    const stream = chunk['stream']
+    const text = chunk['text']
+    if ((stream !== 'stdout' && stream !== 'stderr') || typeof text !== 'string' || text.length === 0) return []
+    return [{ stream, text }]
+  })
+}

package/src/agent/block-types.ts

@@ -0,0 +1,12 @@
+import type { Block } from '@demicodes/core'
+
+// agent-gui exposed per-variant block interfaces; demi @demicodes/core exposes only the Block
+// union, so we recover the named variants here for the ported components.
+
+export type UserBlock = Extract<Block, { type: 'user' }>
+export type SteerBlock = Extract<Block, { type: 'steer' }>
+export type TextBlock = Extract<Block, { type: 'text' }>
+export type ThinkingBlock = Extract<Block, { type: 'thinking' }>
+export type ToolCallBlock = Extract<Block, { type: 'tool_call' }>
+export type ResponseBlock = Extract<Block, { type: 'response' }>
+export type ErrorBlock = Extract<Block, { type: 'error' }>

package/src/agent/blocks/AbortedBlock.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ArrowRightLine } from '@mingcute/vue/arrow-right'
+import { t } from '@demicodes/web-ui/infra/i18n'
+
+const emit = defineEmits<{
+  continue: []
+  retry: []
+}>()
+
+function handleRecovery() {
+  emit('continue')
+}
+</script>
+
+<template>
+  <div class="flex h-6 items-center justify-between">
+      <span class="rounded bg-fg-ghost/60 px-1.5 py-0.5 text-[11px] text-fg-subtle">{{ t('agent.block.aborted') }}</span>
+      <div
+        class="flex cursor-pointer items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] text-fg-subtle transition-colors hover:bg-active hover:text-fg-body"
+        @click="handleRecovery"
+      >
+        <ArrowRightLine :size="12" />
+        {{ t('common.continue') }}
+      </div>
+  </div>
+</template>