@demicodes/web-ui 0.3.1

package/src/agent/blocks/ToolShellBlock.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { TerminalBoxLine } from '@mingcute/vue/terminal-box'
+import AnsiText from './AnsiText.vue'
+import FunctionalBlock from './FunctionalBlock.vue'
+import type { ToolCallBlock } from '../block-types'
+import { getToolErrorText, shellTerminalOutputChunks } from '../block-helpers'
+import { standardToolTitle } from '../tool-rendering'
+
+const props = defineProps<{
+  block: ToolCallBlock
+  input: Record<string, unknown>
+  isStreaming: boolean
+}>()
+
+const command = computed(() => (props.input['script'] as string) ?? '')
+const title = computed(() => standardToolTitle('shell_exec', props.input))
+const errorText = computed(() => getToolErrorText(props.block))
+const terminalOutputText = computed(() => shellTerminalOutputChunks(props.block).map((chunk) => chunk.text).join(''))
+const isOpen = ref(false)
+</script>
+
+<template>
+  <FunctionalBlock
+    v-model:open="isOpen"
+    :open-while="block.status === 'executing' || isStreaming"
+    :loading="block.status === 'executing'"
+    :error="block.status === 'error'"
+    :error-text="errorText"
+    :stick-bottom="block.status === 'executing' || isStreaming"
+  >
+    <template #icon>
+      <TerminalBoxLine :size="16" />
+    </template>
+
+    <template #default="{ loading }">
+      <span class="min-w-0 truncate" :class="loading ? 'thinking-shimmer' : ''">{{ title }}</span>
+    </template>
+
+    <template #body>
+      <div class="flex px-3 py-1 font-mono text-xs">
+        <span class="mr-1 shrink-0 select-none text-fg-faint">$</span><span class="min-w-0 select-all whitespace-pre-wrap break-words text-fg-muted">{{ command }}</span>
+      </div>
+      <AnsiText v-if="terminalOutputText" :content="terminalOutputText" class="px-3 pb-1" />
+    </template>
+  </FunctionalBlock>
+</template>

package/src/agent/blocks/ToolShellControlBlock.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { HistoryLine } from '@mingcute/vue/history'
+import { TerminalBoxLine } from '@mingcute/vue/terminal-box'
+import FunctionalBlock from './FunctionalBlock.vue'
+import type { ToolCallBlock } from '../block-types'
+import { getToolErrorText } from '../block-helpers'
+import { standardToolTitle, trimToolSummary, type ControlToolName } from '../tool-rendering'
+
+const props = defineProps<{
+  block: ToolCallBlock
+  input: Record<string, unknown>
+  toolName: ControlToolName
+}>()
+
+const title = computed(() => standardToolTitle(props.toolName, props.input))
+const errorText = computed(() => getToolErrorText(props.block))
+const errorSummary = computed(() => {
+  const text = errorText.value
+  return text ? trimToolSummary(text, 160) : ''
+})
+const iconComponent = computed(() => {
+  switch (props.toolName) {
+    case 'shell_status':
+    case 'shell_write':
+    case 'shell_abort':
+      return TerminalBoxLine
+    case 'yield':
+      return HistoryLine
+  }
+})
+</script>
+
+<template>
+  <FunctionalBlock
+    :loading="block.status === 'executing'"
+    :error="block.status === 'error'"
+  >
+    <template #icon>
+      <component :is="iconComponent" :size="16" />
+    </template>
+
+    <template #default="{ loading }">
+      <span class="min-w-0 truncate" :class="loading ? 'thinking-shimmer' : ''">{{ title }}</span>
+      <span
+        v-if="errorSummary"
+        class="min-w-0 truncate font-mono text-fg-subtle"
+      >{{ errorSummary }}</span>
+    </template>
+  </FunctionalBlock>
+</template>

package/src/agent/blocks/ToolShellStatusBlock.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { ToolCallBlock } from '../block-types'
+import ToolShellControlBlock from './ToolShellControlBlock.vue'
+
+defineProps<{
+  block: ToolCallBlock
+  input: Record<string, unknown>
+}>()
+</script>
+
+<template>
+  <ToolShellControlBlock :block="block" :input="input" tool-name="shell_status" />
+</template>

package/src/agent/blocks/ToolShellWriteBlock.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { ToolCallBlock } from '../block-types'
+import ToolShellControlBlock from './ToolShellControlBlock.vue'
+
+defineProps<{
+  block: ToolCallBlock
+  input: Record<string, unknown>
+}>()
+</script>
+
+<template>
+  <ToolShellControlBlock :block="block" :input="input" tool-name="shell_write" />
+</template>

package/src/agent/blocks/ToolStatusBadge.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { t } from '@demicodes/web-ui/infra/i18n'
+
+defineProps<{
+  status: 'error'
+}>()
+</script>
+
+<template>
+  <span class="rounded bg-tint-danger-strong px-1.5 py-1 text-[10px] font-medium uppercase tracking-wide text-on-danger">
+    {{ t('agent.block.error') }}
+  </span>
+</template>

package/src/agent/blocks/ToolYieldBlock.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { ToolCallBlock } from '../block-types'
+import ToolShellControlBlock from './ToolShellControlBlock.vue'
+
+defineProps<{
+  block: ToolCallBlock
+  input: Record<string, unknown>
+}>()
+</script>
+
+<template>
+  <ToolShellControlBlock :block="block" :input="input" tool-name="yield" />
+</template>

package/src/agent/blocks/UserBlock.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useResizeObserver } from '@vueuse/core'
+import { CloseLine } from '@mingcute/vue/close'
+import { FileLine } from '@mingcute/vue/file'
+import type { UserContentBlock } from '@demicodes/core'
+import { md } from '@demicodes/web-ui/markdown/md'
+
+type ImageBlock = Extract<UserContentBlock, { type: 'image' }>
+
+const props = defineProps<{
+  content: UserContentBlock[]
+  forceStuck?: boolean
+  variant?: 'user' | 'steer'
+  pending?: boolean
+  deletable?: boolean
+}>()
+
+const emit = defineEmits<{
+  delete: []
+}>()
+
+const userText = computed(() => {
+  const firstText = props.content.find(
+    (b): b is Extract<UserContentBlock, { type: 'text' }> => b.type === 'text',
+  )
+  return firstText?.text ?? ''
+})
+
+const imageBlocks = computed(() =>
+  props.content.filter((b): b is ImageBlock => b.type === 'image'),
+)
+
+const documentBlocks = computed(() =>
+  props.content.filter((b): b is Extract<UserContentBlock, { type: 'document' }> => b.type === 'document'),
+)
+
+function imageSrc(source: ImageBlock['source']): string {
+  if (source.type === 'url') return source.url
+  return URL.createObjectURL(new Blob([source.data as BlobPart], { type: source.mediaType }))
+}
+
+const renderedMarkdown = computed(() => md.renderUser(userText.value))
+
+const contentRef = ref<HTMLElement>()
+const isOverflowing = ref(false)
+
+useResizeObserver(contentRef, () => {
+  if (!contentRef.value) return
+  isOverflowing.value = contentRef.value.scrollHeight > contentRef.value.clientHeight
+})
+</script>
+
+<template>
+  <div
+    class="relative z-10 flex flex-col items-end bg-surface px-[var(--agent-pad-x,2rem)] pb-2 pt-1.5"
+    :class="forceStuck ? 'user-sticky' : ''"
+  >
+    <div
+      class="group/user relative max-w-[80%] rounded-xl p-3"
+      :class="props.variant === 'steer' ? 'bg-surface ring-1 ring-line-focus' : 'bg-surface-raised'"
+    >
+      <button
+        v-if="deletable"
+        type="button"
+        aria-label="Delete pending steer"
+        class="absolute left-0 top-1/2 flex size-5 -translate-x-[calc(100%+6px)] -translate-y-1/2 cursor-pointer items-center justify-center rounded text-fg-ghost transition-colors hover:bg-active hover:text-fg-muted group-hover/user:text-fg-subtle"
+        @click.stop="emit('delete')"
+      >
+        <CloseLine :size="13" />
+      </button>
+      <div :class="pending ? 'opacity-50' : ''">
+        <div v-if="imageBlocks.length > 0 || documentBlocks.length > 0" class="mb-2 flex flex-wrap gap-1.5">
+          <img
+            v-for="(block, i) in imageBlocks"
+            :key="`img-${i}`"
+            :src="imageSrc(block.source)"
+            class="size-12 rounded-lg object-cover ring-1 ring-line"
+          />
+          <span
+            v-for="(block, i) in documentBlocks"
+            :key="`doc-${i}`"
+            class="flex size-12 items-center justify-center rounded-lg bg-fg-ghost/60 text-fg-muted ring-1 ring-line"
+            :title="block.source.fileName"
+          >
+            <FileLine :size="18" />
+          </span>
+        </div>
+        <div
+          ref="contentRef"
+          class="max-h-48 overflow-hidden"
+          :style="isOverflowing ? { maskImage: 'linear-gradient(to bottom, black calc(100% - 3rem), transparent)' } : undefined"
+        >
+          <div v-if="userText" class="markdown-body select-text text-sm leading-relaxed text-fg-body" v-html="renderedMarkdown" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.user-sticky::after {
+  content: '';
+  position: absolute;
+  bottom: -32px;
+  inset-inline: 0;
+  height: 33px;
+  background: linear-gradient(to bottom, var(--color-surface), transparent);
+  pointer-events: none;
+}
+
+</style>

package/src/agent/conversation-runtime.ts

@@ -0,0 +1,205 @@
+import type { AgentClient, ClientSessionEvent } from '@demicodes/agent/client'
+import type { Block, UserContentBlock } from '@demicodes/core'
+import { agentSocketUrl, connectAgentClient } from '../transport/agent-socket'
+import type { ControlApi } from '../transport/protocol'
+import type { ConversationState } from './types'
+import { createPendingSteerMessage, reconcilePendingSteers } from './pending-steers'
+
+/**
+ * Non-reactive owner of one conversation's AgentClient. Lazily connects the
+ * per-session WebSocket on first action and writes incoming events into the
+ * reactive ConversationState.
+ */
+export class ConversationRuntime {
+  private client: AgentClient | null = null
+  private opening: Promise<AgentClient> | null = null
+  private unsubscribe: (() => void) | null = null
+  private readonly canceledPendingSteers = new Set<string>()
+  private readonly activePendingSteerRequests = new Set<string>()
+
+  constructor(
+    private readonly state: ConversationState,
+    private readonly baseUrl: string,
+    private readonly control: ControlApi,
+  ) {}
+
+  async send(content: UserContentBlock[]): Promise<void> {
+    const client = await this.ensureOpen()
+    this.state.isResultSeen = true
+    await client.send(content)
+  }
+
+  dequeueMessage(messageId: string): void {
+    this.client?.dequeueMessage(messageId)
+  }
+
+  sendQueuedMessage(messageId: string): void {
+    this.client?.sendQueuedMessage(messageId)
+  }
+
+  async steerQueuedMessage(messageId: string): Promise<void> {
+    const queued = this.state.queue.find((message) => message.id === messageId)
+    if (!queued) return
+
+    const steerId = globalThis.crypto.randomUUID()
+    const pending = createPendingSteerMessage(steerId, queued.content, this.state.blocks)
+    this.activePendingSteerRequests.add(steerId)
+    this.state.pendingSteers = [...this.state.pendingSteers, pending]
+    try {
+      const client = await this.ensureOpen()
+      if (this.canceledPendingSteers.has(steerId)) return
+      this.state.isResultSeen = true
+      await client.steerQueuedMessage(messageId, { steerId })
+      if (this.canceledPendingSteers.has(steerId)) client.cancelPendingSteer(steerId)
+    } catch (error) {
+      this.removePendingSteer(pending.id)
+      if (this.canceledPendingSteers.has(steerId)) return
+      throw error
+    } finally {
+      this.activePendingSteerRequests.delete(steerId)
+      if (!this.state.pendingSteers.some((candidate) => candidate.id === steerId)) {
+        this.canceledPendingSteers.delete(steerId)
+      }
+    }
+  }
+
+  clearMessageQueue(messageIds: string[]): void {
+    this.client?.clearMessageQueue(messageIds)
+  }
+
+  async steer(content: UserContentBlock[]): Promise<void> {
+    const steerId = globalThis.crypto.randomUUID()
+    const pending = createPendingSteerMessage(steerId, content, this.state.blocks)
+    this.activePendingSteerRequests.add(steerId)
+    this.state.pendingSteers = [...this.state.pendingSteers, pending]
+    try {
+      const client = await this.ensureOpen()
+      if (this.canceledPendingSteers.has(steerId)) return
+      this.state.isResultSeen = true
+      await client.steer(content, { steerId })
+      if (this.canceledPendingSteers.has(steerId)) client.cancelPendingSteer(steerId)
+    } catch (error) {
+      this.removePendingSteer(pending.id)
+      if (this.canceledPendingSteers.has(steerId)) return
+      throw error
+    } finally {
+      this.activePendingSteerRequests.delete(steerId)
+      if (!this.state.pendingSteers.some((candidate) => candidate.id === steerId)) {
+        this.canceledPendingSteers.delete(steerId)
+      }
+    }
+  }
+
+  deletePendingSteer(id: string): void {
+    this.canceledPendingSteers.add(id)
+    this.removePendingSteer(id)
+    this.client?.cancelPendingSteer(id)
+    if (!this.activePendingSteerRequests.has(id)) this.canceledPendingSteers.delete(id)
+  }
+
+  /**
+   * Pushes a model/provider switch to an already-open session so the next turn uses it. If the
+   * session has not been opened yet, this is a no-op: openSession reads the latest state.model.
+   */
+  async setModel(): Promise<void> {
+    if (!this.client) return
+    const intent = this.state.model
+    const providerConfig = await this.control.prepareSession({
+      providerId: intent.providerId,
+      modelId: intent.modelId,
+      thinkingEffort: intent.thinkingEffort,
+      serviceTierId: intent.serviceTierId,
+    })
+    this.client.setProvider(providerConfig)
+  }
+
+  async abort(): Promise<void> {
+    await this.client?.abort()
+  }
+
+  async retry(): Promise<void> {
+    await (await this.ensureOpen()).retry()
+  }
+
+  async resume(): Promise<void> {
+    await (await this.ensureOpen()).resume()
+  }
+
+  async compact(): Promise<void> {
+    await (await this.ensureOpen()).compact()
+  }
+
+  async dispose(): Promise<void> {
+    this.unsubscribe?.()
+    this.unsubscribe = null
+    const client = this.client
+    this.client = null
+    this.opening = null
+    if (client) await client.close().catch(() => {})
+  }
+
+  // Open the connection now (without sending), so a restored conversation
+  // fetches its transcript snapshot and is ready to use.
+  connect(): Promise<void> {
+    return this.ensureOpen().then(() => undefined)
+  }
+
+  private ensureOpen(): Promise<AgentClient> {
+    if (this.client) return Promise.resolve(this.client)
+    this.opening ??= this.openSession()
+    return this.opening
+  }
+
+  private async openSession(): Promise<AgentClient> {
+    const client = await connectAgentClient(agentSocketUrl(this.baseUrl, this.state.cwd))
+    this.unsubscribe = client.subscribe((event) => this.applyEvent(event))
+    const intent = this.state.model
+    const providerConfig = await this.control.prepareSession({
+      providerId: intent.providerId,
+      modelId: intent.modelId,
+      thinkingEffort: intent.thinkingEffort,
+      serviceTierId: intent.serviceTierId,
+    })
+    // The conversation id is the stable session id — reconnecting with it
+    // resumes this conversation's transcript instead of starting blank.
+    await client.open(providerConfig, this.state.cwd, this.state.id)
+    this.client = client
+    return client
+  }
+
+  private applyEvent(event: ClientSessionEvent): void {
+    switch (event.type) {
+      case 'transcript_reset':
+      case 'transcript_patch':
+        this.applyTranscriptBlocks(event.blocks)
+        return
+      case 'phase':
+        this.state.phase = event.phase
+        if (event.phase === 'idle' && this.state.pendingSteers.length > 0) {
+          this.state.pendingSteers = reconcilePendingSteers(this.state.blocks, this.state.pendingSteers)
+          if (this.state.pendingSteers.length > 0) this.state.pendingSteers = []
+        }
+        return
+      case 'queue':
+        this.state.queue = event.queue
+        return
+      case 'error':
+        this.state.lastError = event.message
+        return
+      case 'closed':
+        this.client = null
+        this.opening = null
+        return
+    }
+  }
+
+  private applyTranscriptBlocks(blocks: Block[]): void {
+    this.state.blocks = blocks
+    this.state.hasContent = blocks.length > 0
+    this.state.pendingSteers = reconcilePendingSteers(blocks, this.state.pendingSteers)
+  }
+
+  private removePendingSteer(id: string): void {
+    this.state.pendingSteers = this.state.pendingSteers.filter((pending) => pending.id !== id)
+  }
+}

package/src/agent/conversation-status.ts

@@ -0,0 +1,12 @@
+import type { ConversationState } from './types'
+
+export type ConversationStatus = 'idle' | 'active' | 'done' | 'error' | 'aborted'
+
+export function conversationStatus(state: ConversationState): ConversationStatus {
+  if (state.phase === 'running' || state.phase === 'compacting') return 'active'
+  if (state.lastError) return 'error'
+  const last = state.blocks[state.blocks.length - 1]
+  if (last?.type === 'abort') return 'aborted'
+  if (!state.isResultSeen && state.blocks.length > 0) return 'done'
+  return 'idle'
+}

package/src/agent/message-input/input-model.ts

@@ -0,0 +1,33 @@
+import type { UserContentBlock } from '@demicodes/core'
+
+// The tiptap document the composer edits. With mentions/slash removed it only ever
+// contains paragraphs of text, so it maps directly to demi text content blocks.
+
+export interface InputTextNode {
+  type: 'text'
+  text: string
+}
+
+export interface InputParagraph {
+  type: 'paragraph'
+  content?: InputTextNode[]
+}
+
+export interface InputModel {
+  type: 'doc'
+  content: InputParagraph[]
+}
+
+export function docToText(model: InputModel | null | undefined): string {
+  if (!model) return ''
+  return model.content
+    .map((paragraph) => (paragraph.content ?? []).map((node) => node.text).join(''))
+    .join('\n')
+    .trim()
+}
+
+export function docToContent(model: InputModel | null | undefined, attachments: UserContentBlock[] = []): UserContentBlock[] {
+  const text = docToText(model)
+  const blocks: UserContentBlock[] = text ? [{ type: 'text', text }] : []
+  return [...blocks, ...attachments]
+}

package/src/agent/message-input/useAgentInputActions.ts

@@ -0,0 +1,96 @@
+import type { ThinkingConfig, UserContentBlock } from '@demicodes/core'
+import { reportError } from '@demicodes/web-ui/infra/errors'
+import type { AgentWorkspace } from '../workspace'
+import { thinkingConfigToEffort } from '../reasoning'
+import { queuedMessageIdForEmptySubmit } from '../queue-submit'
+
+interface UseAgentInputActionsParams {
+  workspace: AgentWorkspace
+  conversationId: string
+  buildSubmitPayload: () => UserContentBlock[] | null
+  clearInput: () => void
+  emitEmptySubmit?: () => void
+}
+
+export function useAgentInputActions(params: UseAgentInputActionsParams) {
+  async function handleSubmit(): Promise<void> {
+    const content = params.buildSubmitPayload()
+    if (!content) {
+      const session = params.workspace.sessions[params.conversationId]
+      const queue = session?.queue ?? []
+      const messageId = queuedMessageIdForEmptySubmit(queue)
+      if (messageId) {
+        if (session?.phase === 'running') {
+          try {
+            await params.workspace.steerQueuedMessage(params.conversationId, messageId)
+          } catch (error) {
+            reportError('Failed to steer queued message', error, { userVisible: true })
+          }
+        } else {
+          params.workspace.sendQueuedMessage(params.conversationId, messageId)
+        }
+        return
+      }
+      params.emitEmptySubmit?.()
+      return
+    }
+    params.clearInput()
+    try {
+      await params.workspace.send(params.conversationId, content)
+    } catch (error) {
+      reportError('Failed to send message', error, { userVisible: true })
+    }
+  }
+
+  async function handleSteerSubmit(): Promise<void> {
+    const content = params.buildSubmitPayload()
+    if (!content) return
+    params.clearInput()
+    try {
+      await params.workspace.steer(params.conversationId, content)
+    } catch (error) {
+      reportError('Failed to steer turn', error, { userVisible: true })
+    }
+  }
+
+  async function handleQueueSubmit(): Promise<void> {
+    const content = params.buildSubmitPayload()
+    if (!content) return
+    params.clearInput()
+    try {
+      await params.workspace.send(params.conversationId, content)
+    } catch (error) {
+      reportError('Failed to queue message', error, { userVisible: true })
+    }
+  }
+
+  function handleSelectModel(providerId: string, modelId: string): void {
+    const current = params.workspace.sessions[params.conversationId]?.model
+    params.workspace.setModel(params.conversationId, {
+      providerId,
+      modelId,
+      thinkingEffort: current?.thinkingEffort ?? null,
+      serviceTierId: null,
+    })
+  }
+
+  function handleChangeThinking(config: ThinkingConfig): void {
+    const current = params.workspace.sessions[params.conversationId]?.model
+    if (!current) return
+    params.workspace.setModel(params.conversationId, { ...current, thinkingEffort: thinkingConfigToEffort(config) })
+  }
+
+  function handleAbort(): void {
+    void params.workspace.abort(params.conversationId).catch((error) => {
+      reportError('Failed to abort conversation', error, { userVisible: true })
+    })
+  }
+
+  function handleCompact(): void {
+    void params.workspace.compact(params.conversationId).catch(() => {
+      // phase stream carries failure/abort status
+    })
+  }
+
+  return { handleSubmit, handleSteerSubmit, handleQueueSubmit, handleSelectModel, handleChangeThinking, handleAbort, handleCompact }
+}