@demicodes/web-ui 0.3.1

package/src/agent/blocks/AgentMessageVirtualBlock.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { useAttrs } from 'vue'
+import type { MessageListBlock } from '../pending-steers'
+import UserBlock from './UserBlock.vue'
+import ThinkingBlock from './ThinkingBlock.vue'
+import AssistantTextBlock from './AssistantTextBlock.vue'
+import ToolCallBlock from './ToolCallBlock.vue'
+import ErrorBlock from './ErrorBlock.vue'
+import AbortedBlock from './AbortedBlock.vue'
+import CompactionBlock from './CompactionBlock.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+  block: MessageListBlock
+  conversationId: string
+  isThinkingStreaming: boolean
+  thinkingEndedAt?: string | null
+}>()
+
+const emit = defineEmits<{
+  continue: []
+  retry: []
+  deletePendingSteer: [id: string]
+}>()
+
+const attrs = useAttrs()
+</script>
+
+<template>
+  <UserBlock
+    v-if="block.type === 'user'"
+    v-bind="attrs"
+    :content="block.content"
+  />
+  <UserBlock
+    v-else-if="block.type === 'steer'"
+    v-bind="attrs"
+    :content="block.content"
+    variant="steer"
+  />
+  <UserBlock
+    v-else-if="block.type === 'pending_steer'"
+    v-bind="attrs"
+    :content="block.content"
+    variant="steer"
+    pending
+    deletable
+    @delete="emit('deletePendingSteer', block.pendingSteerId)"
+  />
+  <div v-else v-bind="attrs">
+    <ThinkingBlock
+      v-if="block.type === 'thinking'"
+      :thinking="block.text"
+      :is-streaming="isThinkingStreaming"
+      :created-at="block.createdAt"
+      :ended-at="thinkingEndedAt"
+    />
+    <AssistantTextBlock
+      v-else-if="block.type === 'text'"
+      :content="block.text"
+    />
+    <div v-else-if="block.type === 'tool_call'" class="overflow-hidden px-[var(--agent-pad-x,2rem)]">
+      <ToolCallBlock :block="block" :conversation-id="props.conversationId" :is-streaming="block.status === 'executing'" />
+    </div>
+    <div v-else-if="block.type === 'error'" class="px-[var(--agent-pad-x,2rem)]">
+      <ErrorBlock
+        :message="block.message"
+        :code="block.code"
+        @continue="emit('continue')"
+        @retry="emit('retry')"
+      />
+    </div>
+    <div v-else-if="block.type === 'abort'" class="px-[var(--agent-pad-x,2rem)]">
+      <AbortedBlock
+        @continue="emit('continue')"
+        @retry="emit('retry')"
+      />
+    </div>
+    <CompactionBlock
+      v-else-if="block.type === 'compaction_boundary'"
+      :summary="block.summary"
+      :summary-tokens="block.summaryTokens"
+      :is-compacting="false"
+      :created-at="block.createdAt"
+    />
+  </div>
+</template>

package/src/agent/blocks/AnsiText.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { refThrottled } from '@vueuse/core'
+import AnsiToHtml from 'ansi-to-html'
+import { useTerminalTheme } from '@demicodes/web-ui/composables/useTerminalTheme'
+
+const RENDER_THROTTLE = 80
+
+const props = defineProps<{
+  content: string
+}>()
+
+const throttledContent = refThrottled(toRef(props, 'content'), RENDER_THROTTLE)
+
+const { terminalTheme } = useTerminalTheme()
+
+const ansiConverter = computed(() => {
+  const t = terminalTheme.value
+  return new AnsiToHtml({
+    fg: t.foreground,
+    bg: t.background,
+    escapeXML: true,
+    colors: {
+      0: t.black,
+      1: t.red,
+      2: t.green,
+      3: t.yellow,
+      4: t.blue,
+      5: t.magenta,
+      6: t.cyan,
+      7: t.white,
+      8: t.brightBlack,
+      9: t.brightRed,
+      10: t.brightGreen,
+      11: t.brightYellow,
+      12: t.brightBlue,
+      13: t.brightMagenta,
+      14: t.brightCyan,
+      15: t.brightWhite,
+    } as Record<number, string>,
+  })
+})
+
+function normalizeTerminalContent(content: string): string {
+  if (!content.includes('\r')) return content
+
+  const lines: string[] = []
+  let currentLine = ''
+
+  for (const char of content) {
+    if (char === '\r') {
+      currentLine = ''
+      continue
+    }
+    if (char === '\n') {
+      lines.push(currentLine)
+      currentLine = ''
+      continue
+    }
+    currentLine += char
+  }
+
+  lines.push(currentLine)
+  return lines.join('\n')
+}
+
+const renderedHtml = computed(() => {
+  if (!throttledContent.value) return ''
+  return ansiConverter.value.toHtml(normalizeTerminalContent(throttledContent.value))
+})
+</script>
+
+<template>
+  <pre class="font-mono text-[13px] leading-[1.4] text-fg-body whitespace-pre-wrap break-words" v-html="renderedHtml" />
+</template>

package/src/agent/blocks/AssistantTextBlock.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { md } from '@demicodes/web-ui/markdown/md'
+import { isHttpUrl } from '@demicodes/web-ui/markdown/filePath'
+
+const props = defineProps<{
+  content: string
+}>()
+
+const renderedMarkdown = computed(() => md.render(props.content))
+
+function handleClick(event: MouseEvent) {
+  const target = (event.target as HTMLElement).closest('a')
+  if (!target) return
+
+  const href = target.getAttribute('href')
+  if (!href) return
+
+  if (isHttpUrl(href)) {
+    event.preventDefault()
+    window.open(href, '_blank', 'noopener,noreferrer')
+  }
+}
+</script>
+
+<template>
+  <div class="px-[var(--agent-pad-x,2rem)] py-1.5">
+    <div
+      class="markdown-body select-text text-sm leading-relaxed text-fg-body"
+      v-html="renderedMarkdown"
+      @click="handleClick"
+    />
+  </div>
+</template>

package/src/agent/blocks/CompactionBlock.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  summary: string
+  summaryTokens: number
+  isCompacting: boolean
+  createdAt: string
+}>()
+
+function formatTokens(tokens: number): string {
+  if (tokens >= 1_000_000) return `${(tokens / 1_000_000).toFixed(1)}M`
+  if (tokens >= 1_000) return `${(tokens / 1_000).toFixed(1)}K`
+  return String(tokens)
+}
+
+const label = computed(() => {
+  if (props.isCompacting) return 'Compacting context...'
+  return `Context compacted to ~${formatTokens(props.summaryTokens)} tokens`
+})
+</script>
+
+<template>
+  <div class="flex items-center gap-3 px-[var(--agent-pad-x,2rem)]">
+    <div class="h-px flex-1 bg-overlay/6" />
+    <span
+      v-if="isCompacting"
+      class="thinking-shimmer text-[11px] font-medium tracking-wide text-fg-subtle"
+    >{{ label }}</span>
+    <span
+      v-else
+      class="text-[11px] font-medium tracking-wide text-fg-subtle"
+    >{{ label }}</span>
+    <div class="h-px flex-1 bg-overlay/6" />
+  </div>
+</template>

package/src/agent/blocks/ErrorBlock.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useClipboard } from '@vueuse/core'
+import { RightSmallLine } from '@mingcute/vue/right-small'
+import { CopyLine } from '@mingcute/vue/copy'
+import { CheckLine } from '@mingcute/vue/check'
+import { ArrowRightLine } from '@mingcute/vue/arrow-right'
+import { t } from '@demicodes/web-ui/infra/i18n'
+
+const props = defineProps<{
+  message: string
+  code?: string | null
+  stack?: string
+}>()
+
+const emit = defineEmits<{
+  continue: []
+  retry: []
+}>()
+
+function handleRecovery() {
+  emit('continue')
+}
+
+const isStackOpen = ref(false)
+
+const copyableText = computed(() => {
+  const parts = [props.message]
+  if (props.code) parts.unshift(`[${props.code}]`)
+  if (props.stack) parts.push(props.stack)
+  return parts.join('\n')
+})
+
+const { copy, copied } = useClipboard({ copiedDuring: 1500 })
+</script>
+
+<template>
+  <div class="overflow-hidden rounded-lg border border-on-danger-muted bg-tint-danger">
+    <div class="flex items-center gap-2 px-3 py-2">
+      <span class="text-[12px] font-medium uppercase tracking-wide text-on-danger">{{ t('agent.block.error') }}</span>
+      <span
+        v-if="props.code"
+        class="rounded bg-tint-danger-strong px-1.5 py-0.5 font-mono text-[11px] text-on-danger-muted"
+      >{{ props.code }}</span>
+      <div class="flex-1" />
+      <div
+        class="flex cursor-pointer items-center rounded-md p-1 text-on-danger-muted transition-colors hover:bg-tint-danger hover:text-on-danger-muted"
+        @click="copy(copyableText)"
+      >
+        <CheckLine v-if="copied" :size="13" class="text-on-success" />
+        <CopyLine v-else :size="13" />
+      </div>
+    </div>
+    <div class="border-t border-on-danger-muted px-3 py-2">
+      <pre class="whitespace-pre-wrap break-words font-mono text-[12px] leading-5 text-on-danger">{{ props.message }}</pre>
+    </div>
+    <div v-if="props.stack">
+      <div
+        class="flex cursor-pointer items-center gap-1 border-t border-on-danger-muted px-3 py-1.5 text-[11px] text-on-danger-muted transition-colors hover:bg-tint-danger"
+        @click="isStackOpen = !isStackOpen"
+      >
+        <RightSmallLine :size="14" class="transition-transform duration-150" :class="isStackOpen ? 'rotate-90' : ''" />
+        <span class="uppercase tracking-wide">{{ t('agent.block.stackTrace') }}</span>
+      </div>
+      <div v-if="isStackOpen" class="border-t border-on-danger-muted px-3 py-2">
+        <pre class="whitespace-pre-wrap break-words font-mono text-[11px] leading-4.5 text-on-danger-muted">{{ props.stack }}</pre>
+      </div>
+    </div>
+    <div class="flex items-center justify-end border-t border-on-danger-muted px-3 py-2">
+      <div
+        class="flex cursor-pointer items-center gap-1.5 rounded-md bg-tint-danger-strong px-2.5 py-1 text-[12px] font-medium text-on-danger transition-colors hover:bg-tint-danger-strong"
+        @click="handleRecovery"
+      >
+        <ArrowRightLine :size="13" />
+        {{ t('common.continue') }}
+      </div>
+    </div>
+  </div>
+</template>

package/src/agent/blocks/FunctionalBlock.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onUpdated, ref, useSlots, watch } from 'vue'
+import { RightLine } from '@mingcute/vue/right'
+import ToolStatusBadge from './ToolStatusBadge.vue'
+
+const ACTIVE_OUTPUT_CLOSE_DELAY_MS = 1000
+
+const props = defineProps<{
+  label?: string
+  detail?: string
+  suffix?: string
+  trailing?: string
+  loading?: boolean
+  error?: boolean
+  errorText?: string
+  /** Keep the body scrolled to the latest line while content streams in (e.g. live thinking). */
+  stickBottom?: boolean
+  /** Keep the block open while active output is being produced. */
+  openWhile?: boolean
+  /** Force expandability instead of inferring it from the body slot (slot presence isn't reactive). */
+  expandable?: boolean
+}>()
+
+const slots = useSlots()
+const isOpen = defineModel<boolean>('open', { default: false })
+const hasBodySlot = () => !!slots['body']
+const isExpandable = computed(() => props.expandable || hasBodySlot() || !!props.errorText)
+const bodyScroll = ref<HTMLElement>()
+let closeTimer: ReturnType<typeof setTimeout> | undefined
+
+function clearCloseTimer() {
+  if (!closeTimer) return
+  clearTimeout(closeTimer)
+  closeTimer = undefined
+}
+
+function closeAfterActiveOutputSettles() {
+  if (!isOpen.value) return
+  clearCloseTimer()
+  closeTimer = setTimeout(() => {
+    closeTimer = undefined
+    if (!props.openWhile && !props.errorText) isOpen.value = false
+  }, ACTIVE_OUTPUT_CLOSE_DELAY_MS)
+}
+
+watch(
+  [() => props.errorText, () => props.openWhile, isExpandable],
+  ([errorText, openWhile, expandable]) => {
+    clearCloseTimer()
+    if (errorText) {
+      isOpen.value = true
+      return
+    }
+    if (openWhile === undefined) return
+    if (openWhile && expandable) {
+      isOpen.value = true
+      return
+    }
+    closeAfterActiveOutputSettles()
+  },
+  { immediate: true },
+)
+
+onBeforeUnmount(clearCloseTimer)
+
+onUpdated(() => {
+  if (props.stickBottom && isOpen.value && bodyScroll.value) {
+    bodyScroll.value.scrollTop = bodyScroll.value.scrollHeight
+  }
+})
+</script>
+
+<template>
+  <div class="overflow-hidden">
+    <div
+      class="flex select-none items-center gap-2 py-1 text-[13px] text-fg-muted"
+      @click="isExpandable && (isOpen = !isOpen)"
+    >
+      <div class="flex size-4 shrink-0 items-center justify-center">
+        <slot name="icon" />
+      </div>
+      <div class="flex min-w-0 items-center gap-2 overflow-hidden">
+        <span v-if="label" class="shrink-0" :class="loading ? 'thinking-shimmer' : ''">{{ label }}</span>
+        <slot v-if="slots['default']" :loading="loading" />
+        <span v-else-if="detail" class="min-w-0 truncate font-mono text-fg-body" :class="loading ? 'thinking-shimmer' : ''">{{ detail }}</span>
+        <span v-if="suffix" class="shrink-0 text-fg-subtle" :class="loading ? 'thinking-shimmer' : ''">{{ suffix }}</span>
+      </div>
+      <span class="-ml-1 shrink-0 text-xs">
+        <ToolStatusBadge v-if="error" status="error" />
+        <RightLine v-else-if="isExpandable" :size="14" class="text-fg-faint transition-transform duration-200" :class="isOpen ? 'rotate-90' : ''" />
+        <span v-else-if="!loading && trailing" class="text-fg-subtle">{{ trailing }}</span>
+      </span>
+      <div class="flex-1"></div>
+    </div>
+    <div v-if="isExpandable" class="functional-block-body" :class="isOpen ? 'is-open' : ''">
+      <div class="overflow-hidden">
+        <div class="mb-1 overflow-hidden rounded-md bg-overlay/6">
+          <div ref="bodyScroll" class="max-h-80 overflow-y-auto py-0.5">
+            <pre v-if="errorText" class="whitespace-pre-wrap px-3 py-1.5 font-mono text-xs text-on-danger-muted">{{ errorText }}</pre>
+            <slot v-if="hasBodySlot()" name="body" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.functional-block-body {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.2s ease;
+}
+
+.functional-block-body.is-open {
+  grid-template-rows: 1fr;
+}
+</style>

package/src/agent/blocks/LoadingBlock.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="flex items-center px-[var(--agent-pad-x,2rem)] py-2">
+    <div class="loading-dots flex gap-1">
+      <span class="size-1.5 rounded-full bg-fg-subtle" />
+      <span class="size-1.5 rounded-full bg-fg-subtle" />
+      <span class="size-1.5 rounded-full bg-fg-subtle" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.loading-dots span {
+  animation: dot-pulse 1.4s ease-in-out infinite;
+}
+
+.loading-dots span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.loading-dots span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes dot-pulse {
+  0%, 80%, 100% { opacity: 0.3; }
+  40% { opacity: 1; }
+}
+</style>

package/src/agent/blocks/ThinkingBlock.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed, onUnmounted, ref, watch } from 'vue'
+import { BrainLine } from '@mingcute/vue/brain'
+import { md } from '@demicodes/web-ui/markdown/md'
+import { t } from '@demicodes/web-ui/infra/i18n'
+import FunctionalBlock from './FunctionalBlock.vue'
+
+const props = defineProps<{
+  thinking: string
+  isStreaming: boolean
+  createdAt: string
+  /** Start of the block after this one — the moment thinking ended. Null while still thinking. */
+  endedAt?: string | null
+}>()
+
+const hasContent = computed(() => props.thinking.trim().length > 0)
+const isOpen = ref(false)
+const renderedMarkdown = computed(() => md.render(props.thinking))
+
+// Live timer while thinking; once done the elapsed is frozen to (next block's createdAt - this
+// block's createdAt), so the duration survives reload instead of growing from the original time.
+const nowMs = ref(Date.now())
+let timer: ReturnType<typeof setInterval> | undefined
+function stopTimer() {
+  if (timer) {
+    clearInterval(timer)
+    timer = undefined
+  }
+}
+watch(
+  () => props.isStreaming,
+  (streaming) => {
+    stopTimer()
+    if (streaming) {
+      nowMs.value = Date.now()
+      timer = setInterval(() => {
+        nowMs.value = Date.now()
+      }, 1000)
+    }
+  },
+  { immediate: true },
+)
+onUnmounted(stopTimer)
+
+const startMs = computed(() => Date.parse(props.createdAt))
+const elapsedMs = computed(() => {
+  const end = props.endedAt ? Date.parse(props.endedAt) : props.isStreaming ? nowMs.value : null
+  if (end === null || Number.isNaN(startMs.value)) return null
+  return Math.max(0, end - startMs.value)
+})
+const label = computed(() => {
+  if (elapsedMs.value === null) return t('agent.block.thinking')
+  const prefix = t(props.isStreaming ? 'agent.block.thinkingFor' : 'agent.block.thoughtFor')
+  return `${prefix} ${formatDuration(elapsedMs.value)}`
+})
+
+function formatDuration(ms: number): string {
+  const s = Math.round(ms / 1000)
+  if (s < 60) return `${s}s`
+  const m = Math.floor(s / 60)
+  const rs = s % 60
+  if (m < 60) return rs ? `${m}m${rs}s` : `${m}m`
+  const h = Math.floor(m / 60)
+  const rm = m % 60
+  return rm ? `${h}h${rm}m` : `${h}h`
+}
+</script>
+
+<template>
+  <div class="px-[var(--agent-pad-x,2rem)]">
+    <FunctionalBlock
+      v-model:open="isOpen"
+      :expandable="hasContent"
+      :open-while="isStreaming && hasContent"
+      :stick-bottom="isStreaming"
+    >
+      <template #icon>
+        <BrainLine :size="16" />
+      </template>
+      <span class="min-w-0 truncate" :class="isStreaming ? 'thinking-shimmer' : ''">{{ label }}</span>
+      <template v-if="hasContent" #body>
+        <div class="markdown-body px-3 py-1 text-[13px] leading-relaxed text-fg-muted" v-html="renderedMarkdown" />
+      </template>
+    </FunctionalBlock>
+  </div>
+</template>

package/src/agent/blocks/ToolCallBlock.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { parse, Allow } from 'partial-json'
+import type { ToolCallBlock } from '../block-types'
+import ToolShellBlock from './ToolShellBlock.vue'
+import ToolShellStatusBlock from './ToolShellStatusBlock.vue'
+import ToolShellWriteBlock from './ToolShellWriteBlock.vue'
+import ToolShellAbortBlock from './ToolShellAbortBlock.vue'
+import ToolYieldBlock from './ToolYieldBlock.vue'
+import ToolGenericBlock from './ToolGenericBlock.vue'
+import { shouldParsePartialToolInput, toolRenderKind } from '../tool-rendering'
+
+const props = defineProps<{
+  block: ToolCallBlock
+  conversationId: string
+  isStreaming: boolean
+}>()
+
+const parsedInput = computed<Record<string, unknown>>(() => {
+  if (!props.block.input) return {}
+  try {
+    const result = shouldParsePartialToolInput(props.block.toolName)
+      ? parse(props.block.input, Allow.ALL)
+      : JSON.parse(props.block.input)
+    return typeof result === 'object' && result !== null ? result as Record<string, unknown> : {}
+  } catch {
+    return {}
+  }
+})
+const renderKind = computed(() => toolRenderKind(props.block.toolName))
+</script>
+
+<template>
+  <ToolShellBlock v-if="renderKind === 'shell_exec'" :block="block" :input="parsedInput" :is-streaming="isStreaming" />
+  <ToolShellStatusBlock v-else-if="renderKind === 'shell_status'" :block="block" :input="parsedInput" />
+  <ToolShellWriteBlock v-else-if="renderKind === 'shell_write'" :block="block" :input="parsedInput" />
+  <ToolShellAbortBlock v-else-if="renderKind === 'shell_abort'" :block="block" :input="parsedInput" />
+  <ToolYieldBlock v-else-if="renderKind === 'yield'" :block="block" :input="parsedInput" />
+  <ToolGenericBlock v-else :block="block" :input="parsedInput" />
+</template>

package/src/agent/blocks/ToolGenericBlock.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { FlashLine } from '@mingcute/vue/flash'
+import FunctionalBlock from './FunctionalBlock.vue'
+import type { ToolCallBlock } from '../block-types'
+import { getToolErrorText } from '../block-helpers'
+import { trimToolSummary } from '../tool-rendering'
+
+const props = defineProps<{
+  block: ToolCallBlock
+  input: Record<string, unknown>
+}>()
+
+const summary = computed(() => {
+  const entries = Object.entries(props.input)
+  if (entries.length === 0) return ''
+  return entries
+    .map(([k, v]) => {
+      const val = typeof v === 'string' ? v : JSON.stringify(v)
+      const short = val.length > 40 ? `${val.slice(0, 37)}...` : val
+      return `${k}=${short}`
+    })
+    .join(' ')
+})
+const errorText = computed(() => getToolErrorText(props.block))
+const detail = computed(() => {
+  const text = errorText.value
+  return text ? trimToolSummary(text, 160) : summary.value
+})
+</script>
+
+<template>
+  <FunctionalBlock
+    :label="block.toolName"
+    :detail="detail"
+    :loading="block.status === 'executing'"
+    :error="block.status === 'error'"
+  >
+    <template #icon>
+      <FlashLine :size="16" />
+    </template>
+  </FunctionalBlock>
+</template>

package/src/agent/blocks/ToolShellAbortBlock.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_abort" />
+</template>