@demicodes/web-ui 0.3.1

package/src/agent/ConversationListDropdown.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import { HistoryLine } from '@mingcute/vue/history'
+import { Chat1Line } from '@mingcute/vue/chat-1'
+
+dayjs.extend(relativeTime)
+import { t } from '@demicodes/web-ui/infra/i18n'
+import { appOverlayStore } from '@demicodes/web-ui/overlay/appOverlay'
+import HighlightText from '@demicodes/web-ui/ui/HighlightText.vue'
+import SelectDropdown from '@demicodes/web-ui/ui/SelectDropdown.vue'
+
+// Open tabs and server-side history summaries both satisfy this shape.
+interface ConversationListItem {
+  id: string
+  title: string
+  createdAt: string
+}
+
+const props = defineProps<{
+  conversations: ConversationListItem[]
+  activeTabId: string | null
+}>()
+
+const emit = defineEmits<{
+  select: [conversationId: string]
+}>()
+
+const items = computed(() =>
+  props.conversations.map((c) => ({ id: c.id, label: c.title, createdAt: c.createdAt })),
+)
+
+function formatTime(iso: string): string {
+  return dayjs(iso).fromNow()
+}
+</script>
+
+<template>
+  <SelectDropdown
+    :overlay-store="appOverlayStore"
+    :items="items"
+    :selected-id="activeTabId ?? undefined"
+    searchable
+    :search-placeholder="t('agent.conversationList.placeholder')"
+    :empty-text="t('agent.conversationList.empty')"
+    panel-class="w-96"
+    :item-height="32"
+    placement="bottom-end"
+    :offset="6"
+    @select="emit('select', $event)"
+  >
+    <template #trigger="{ isOpen }">
+      <span
+        class="flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-fg-faint transition-colors hover:bg-hover hover:text-fg-muted"
+        :class="isOpen && 'bg-overlay/6 text-fg-muted'"
+      >
+        <HistoryLine :size="14" />
+      </span>
+    </template>
+    <template #item="{ item, query }">
+      <Chat1Line :size="13" class="shrink-0" />
+      <span class="flex min-w-0 flex-1 items-baseline gap-1.5">
+        <span class="truncate text-[13px]">
+          <HighlightText :text="item.label" :query="query" />
+        </span>
+        <span class="shrink-0 text-[11px] text-fg-faint">{{ formatTime(item.createdAt) }}</span>
+      </span>
+    </template>
+  </SelectDropdown>
+</template>

package/src/agent/ConversationStatusDot.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ConversationStatus } from './conversation-status'
+
+const props = defineProps<{
+  status: ConversationStatus
+}>()
+
+const dotColor = computed(() => {
+  if (props.status === 'active') return 'var(--color-blue-400)'
+  if (props.status === 'error' || props.status === 'aborted') return 'var(--color-red-400)'
+  if (props.status === 'done') return 'var(--color-emerald-400)'
+  return null
+})
+</script>
+
+<template>
+  <span
+    class="absolute -right-px -top-px size-1.5 rounded-full border transition-[background-color,opacity] duration-300"
+    :class="[
+      dotColor ? 'opacity-100 border-surface-base' : 'opacity-0 border-transparent',
+      status === 'active' && 'animate-pulse',
+    ]"
+    :style="{ backgroundColor: dotColor ?? 'transparent' }"
+  />
+</template>

package/src/agent/ConversationView.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useElementSize } from '@vueuse/core'
+import { useAgentWorkspace } from './workspace'
+import AgentMessageList from './AgentMessageList.vue'
+import AgentMessageInput from './AgentMessageInput.vue'
+import MessageQueueBar from './MessageQueueBar.vue'
+import { queuedMessageIdForEmptySubmit } from './queue-submit'
+import { reportError } from '@demicodes/web-ui/infra/errors'
+
+const props = defineProps<{
+  conversationId: string
+}>()
+
+const workspace = useAgentWorkspace()
+const session = computed(() => workspace.sessions[props.conversationId])
+const blocks = computed(() => session.value?.blocks ?? [])
+const queuedMessages = computed(() => session.value?.queue ?? [])
+const pendingSteers = computed(() => session.value?.pendingSteers ?? [])
+const phase = computed(() => session.value?.phase ?? 'idle')
+
+const bottomAreaRef = ref<HTMLDivElement>()
+const messageInputRef = ref<InstanceType<typeof AgentMessageInput>>()
+const { height: bottomAreaHeight } = useElementSize(bottomAreaRef)
+
+function handleEmptySubmit() {
+  const messageId = queuedMessageIdForEmptySubmit(queuedMessages.value)
+  if (!messageId) return
+  handleQueuedSendNow(messageId)
+}
+
+function handleQueuedSendNow(messageId: string) {
+  if (phase.value === 'running') {
+    void workspace.steerQueuedMessage(props.conversationId, messageId).catch((error) => {
+      reportError('Failed to steer queued message', error, { userVisible: true })
+    })
+    return
+  }
+  workspace.sendQueuedMessage(props.conversationId, messageId)
+}
+
+function onContinue() {
+  void workspace.resume(props.conversationId)
+}
+
+function onRetry() {
+  void workspace.retry(props.conversationId)
+}
+</script>
+
+<template>
+  <div class="relative h-full flex-1 overflow-hidden bg-surface">
+    <AgentMessageList
+      :conversation-id="conversationId"
+      :blocks="blocks"
+      :pending-steers="pendingSteers"
+      :phase="phase"
+      :bottom-offset="bottomAreaHeight"
+      :persisted-scroll-state="undefined"
+      @continue="onContinue"
+      @retry="onRetry"
+      @delete-pending-steer="(steerId) => workspace.deletePendingSteer(conversationId, steerId)"
+    />
+    <div class="absolute bottom-0 left-0 right-0 z-10 px-3 pb-3">
+      <div ref="bottomAreaRef" class="relative">
+        <MessageQueueBar
+          v-if="queuedMessages.length"
+          :messages="queuedMessages"
+          @remove="(messageId) => workspace.dequeueMessage(conversationId, messageId)"
+          @send-now="handleQueuedSendNow"
+          @clear-all="workspace.clearMessageQueue(conversationId)"
+        />
+        <AgentMessageInput
+          ref="messageInputRef"
+          class="relative z-10"
+          :conversation-id="conversationId"
+          @empty-submit="handleEmptySubmit"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/src/agent/MessageQueueBar.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { DeleteLine } from '@mingcute/vue/delete'
+import { ListCheckLine } from '@mingcute/vue/list-check'
+import { SendLine } from '@mingcute/vue/send'
+
+defineProps<{
+  messages: { id: string; text: string }[]
+}>()
+
+const emit = defineEmits<{
+  remove: [id: string]
+  sendNow: [id: string]
+  clearAll: []
+}>()
+</script>
+
+<template>
+  <div class="relative mx-3 -mb-3">
+    <div class="rounded-t-lg bg-surface-raised border border-line-subtle border-b-0 pb-4.5">
+      <div class="flex flex-col px-1 pt-1.5">
+        <div class="flex items-center gap-2 px-1.5 pb-1">
+          <div class="flex flex-1 items-center gap-1.5 text-[12px] text-fg-subtle">
+            <ListCheckLine :size="14" />
+            <span>{{ messages.length }} Queued</span>
+          </div>
+          <div class="shrink-0 flex items-center gap-0.5">
+            <span
+              class="flex size-6 cursor-pointer items-center justify-center rounded-md text-fg-subtle transition-colors hover:bg-active hover:text-fg-body"
+              @click="emit('clearAll')"
+            >
+              <DeleteLine :size="14" />
+            </span>
+          </div>
+        </div>
+        <div class="flex flex-col">
+          <div
+            v-for="(message, index) in messages"
+            :key="message.id"
+            class="flex items-center gap-2 px-1.5"
+          >
+            <span class="shrink-0 text-[12px] tabular-nums text-fg-faint">{{ index + 1 }}</span>
+            <div
+              class="flex min-w-0 flex-1 items-center gap-2 py-1"
+              :class="index < messages.length - 1 ? 'border-b border-line-subtle' : ''"
+            >
+              <span class="min-w-0 flex-1 truncate text-[13px] text-fg-muted">{{ message.text }}</span>
+              <div class="shrink-0 flex items-center gap-0.5">
+                <span
+                  class="flex size-6 cursor-pointer items-center justify-center rounded-md text-fg-subtle transition-colors hover:bg-active hover:text-fg-body"
+                  @click="emit('sendNow', message.id)"
+                >
+                  <SendLine :size="14" />
+                </span>
+                <span
+                  class="flex size-6 cursor-pointer items-center justify-center rounded-md text-fg-subtle transition-colors hover:bg-active hover:text-fg-body"
+                  @click="emit('remove', message.id)"
+                >
+                  <DeleteLine :size="14" />
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/agent/ModelSelector.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { ThinkingConfig } from '@demicodes/core'
+import type { ModelInfo, ProviderInfo } from '../transport/protocol'
+import { appOverlayStore } from '@demicodes/web-ui/overlay/appOverlay'
+import { buildReasoningState } from './reasoning'
+import DropdownMenu from '@demicodes/web-ui/ui/DropdownMenu.vue'
+import SelectorTrigger from './SelectorTrigger.vue'
+import ReasoningSelector from './ReasoningSelector.vue'
+import OptionMenu from '@demicodes/web-ui/ui/OptionMenu.vue'
+import OptionMenuGroup from '@demicodes/web-ui/ui/OptionMenuGroup.vue'
+import OptionMenuItem from '@demicodes/web-ui/ui/OptionMenuItem.vue'
+
+const props = defineProps<{
+  providers: ProviderInfo[]
+  models: Record<string, ModelInfo[]>
+  selectedProviderId?: string | null
+  selectedModelId?: string | null
+  thinkingConfig?: ThinkingConfig
+}>()
+
+const emit = defineEmits<{
+  selectModel: [providerId: string, modelId: string]
+  changeThinking: [config: ThinkingConfig]
+}>()
+
+interface SelectedModel {
+  providerId: string
+  modelId: string
+}
+
+const selectedModel = ref<SelectedModel | null>(null)
+
+const providerModels = computed(() => props.models)
+
+const availableProviders = computed(() =>
+  props.providers.filter(p => p.isAvailable && (providerModels.value[p.id]?.length ?? 0) > 0),
+)
+
+const hasModels = computed(() =>
+  availableProviders.value.some(p => (providerModels.value[p.id] ?? []).length > 0),
+)
+
+const selectedModelPreset = computed(() => {
+  const selected = selectedModel.value
+  if (!selected) return null
+  return (providerModels.value[selected.providerId] ?? []).find(m => m.id === selected.modelId) ?? null
+})
+
+const selectedModelLabel = computed(() => selectedModelPreset.value?.name ?? '')
+
+const reasoningState = computed(() => buildReasoningState(selectedModelPreset.value))
+
+function isSelectedModel(providerId: string, modelId: string): boolean {
+  return selectedModel.value?.providerId === providerId
+    && selectedModel.value?.modelId === modelId
+}
+
+function selectModel(providerId: string, modelId: string) {
+  selectedModel.value = { providerId, modelId }
+  emit('selectModel', providerId, modelId)
+}
+
+function resolveFallbackSelection(): SelectedModel | null {
+  for (const provider of availableProviders.value) {
+    const firstModel = providerModels.value[provider.id]?.[0]
+    if (firstModel) return { providerId: provider.id, modelId: firstModel.id }
+  }
+  return null
+}
+
+watch(
+  [
+    () => props.selectedProviderId,
+    () => props.selectedModelId,
+    providerModels,
+    availableProviders,
+  ],
+  () => {
+    if (props.selectedProviderId && props.selectedModelId) {
+      selectedModel.value = { providerId: props.selectedProviderId, modelId: props.selectedModelId }
+      return
+    }
+    selectedModel.value = resolveFallbackSelection()
+  },
+  { immediate: true, deep: true },
+)
+</script>
+
+<template>
+  <template v-if="hasModels">
+    <DropdownMenu :overlay-store="appOverlayStore">
+      <template #trigger="{ isOpen }">
+        <SelectorTrigger :is-open="isOpen">
+          {{ selectedModelLabel }}
+        </SelectorTrigger>
+      </template>
+      <template #content="{ close }">
+        <OptionMenu>
+          <OptionMenuGroup
+            v-for="provider in availableProviders"
+            :key="provider.id"
+            :label="provider.label"
+          >
+            <OptionMenuItem
+              v-for="model in providerModels[provider.id] ?? []"
+              :key="`${provider.id}:${model.id}`"
+              :label="model.name"
+              :is-selected="isSelectedModel(provider.id, model.id)"
+              @select="selectModel(provider.id, model.id); close()"
+            />
+          </OptionMenuGroup>
+        </OptionMenu>
+      </template>
+    </DropdownMenu>
+    <template v-if="reasoningState">
+      <span class="h-3 w-px bg-overlay/10" />
+      <ReasoningSelector
+        :reasoning-state="reasoningState"
+        v-bind="thinkingConfig ? { config: thinkingConfig } : {}"
+        @change="emit('changeThinking', $event)"
+      />
+    </template>
+  </template>
+</template>

package/src/agent/ReasoningSelector.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { computed, watchEffect } from 'vue'
+import type { ThinkingConfig } from '@demicodes/core'
+import type { ReasoningState } from './reasoning'
+import { BrainLine } from '@mingcute/vue/brain'
+import { appOverlayStore } from '@demicodes/web-ui/overlay/appOverlay'
+import { t } from '@demicodes/web-ui/infra/i18n'
+import Switch from '@demicodes/web-ui/ui/Switch.vue'
+import DropdownMenu from '@demicodes/web-ui/ui/DropdownMenu.vue'
+import SelectorTrigger from './SelectorTrigger.vue'
+import OptionMenu from '@demicodes/web-ui/ui/OptionMenu.vue'
+import OptionMenuGroup from '@demicodes/web-ui/ui/OptionMenuGroup.vue'
+import OptionMenuItem from '@demicodes/web-ui/ui/OptionMenuItem.vue'
+
+const props = defineProps<{
+  reasoningState: ReasoningState
+  config?: ThinkingConfig
+}>()
+
+const emit = defineEmits<{
+  change: [config: ThinkingConfig]
+}>()
+
+const resolvedConfig = computed(() => {
+  const cfg = props.config ?? props.reasoningState.defaultConfig
+  // Models that can't disable thinking (e.g. Claude Code) have no "disabled" state — a stale or
+  // carried-over disabled config resolves to the default effort so the label and the request match.
+  if (!props.reasoningState.canDisable && cfg.type === 'disabled') return props.reasoningState.defaultConfig
+  return cfg
+})
+
+// Persist that coercion upward so the next request actually sends an effort, not a no-op "disabled".
+watchEffect(() => {
+  if (!props.reasoningState.canDisable && props.config?.type === 'disabled') {
+    emit('change', props.reasoningState.defaultConfig)
+  }
+})
+
+const isThinkingEnabled = computed(() => resolvedConfig.value.type !== 'disabled')
+
+function toggleThinking(enabled: boolean) {
+  emit('change', enabled ? props.reasoningState.defaultConfig : { type: 'disabled' })
+}
+
+function isSelected(optionConfig: ThinkingConfig): boolean {
+  const cfg = resolvedConfig.value
+  if (cfg.type !== optionConfig.type) return false
+  if (cfg.type === 'adaptive' && optionConfig.type === 'adaptive') return cfg.effort === optionConfig.effort
+  if (cfg.type === 'effort' && optionConfig.type === 'effort') return cfg.effort === optionConfig.effort
+  return true
+}
+
+const defaultOption = computed(() => props.reasoningState.options.find((o) => isSelected(o.config)))
+
+const currentDropdownLabel = computed(() => {
+  if (defaultOption.value) return defaultOption.value.label
+  const fallback = props.reasoningState.options.find((o) =>
+    o.config.type === props.reasoningState.defaultConfig.type,
+  )
+  return fallback?.label ?? ''
+})
+
+function selectOption(config: ThinkingConfig, close: () => void) {
+  emit('change', config)
+  close()
+}
+</script>
+
+<template>
+  <Switch
+    v-if="reasoningState.mode === 'toggle'"
+    :model-value="isThinkingEnabled"
+    :label="t('providers.model.thinking')"
+    size="sm"
+    @update:model-value="toggleThinking"
+  />
+
+  <DropdownMenu v-else-if="reasoningState.mode === 'dropdown'" :overlay-store="appOverlayStore">
+    <template #trigger="{ isOpen }">
+      <SelectorTrigger :is-open="isOpen">
+        <BrainLine :size="13" class="mr-0.5" />
+        {{ currentDropdownLabel }}
+      </SelectorTrigger>
+    </template>
+    <template #content="{ close }">
+      <OptionMenu>
+        <OptionMenuItem
+          v-for="option in reasoningState.options.filter(o => o.group === 'general')"
+          :key="option.label"
+          :label="option.label"
+          :is-selected="isSelected(option.config)"
+          @select="selectOption(option.config, close)"
+        />
+        <OptionMenuGroup :label="t('providers.reasoning')">
+          <OptionMenuItem
+            v-for="option in reasoningState.options.filter(o => o.group === 'effort')"
+            :key="option.label"
+            :label="option.label"
+            :is-selected="isSelected(option.config)"
+            @select="selectOption(option.config, close)"
+          />
+        </OptionMenuGroup>
+      </OptionMenu>
+    </template>
+  </DropdownMenu>
+</template>

package/src/agent/SelectorTrigger.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { RightSmallLine } from '@mingcute/vue/right-small'
+
+defineProps<{
+  isOpen: boolean
+}>()
+</script>
+
+<template>
+  <span
+    class="flex cursor-pointer items-center gap-0.5 rounded-md pl-2 pr-0.5 py-1 text-[12px] transition-colors"
+    :class="isOpen ? 'bg-overlay/5 text-fg-muted' : 'text-fg-subtle hover:bg-hover hover:text-fg-muted'"
+  >
+    <slot />
+    <RightSmallLine :size="16" class="rotate-90" />
+  </span>
+</template>

package/src/agent/__tests__/block-helpers.test.ts

@@ -0,0 +1,73 @@
+import { expect, test } from 'bun:test'
+import type { Block, ModelSelection } from '@demicodes/core'
+import { shellTerminalOutputChunks } from '../block-helpers'
+
+test('shell terminal output renders the view chunks', () => {
+  const block = tool({
+    view: {
+      kind: 'shell',
+      chunks: [
+        { stream: 'stdout', text: 'first stdout\n' },
+        { stream: 'stderr', text: 'first stderr\n' },
+        { stream: 'stdout', text: 'second stdout\n' },
+      ],
+    },
+  })
+
+  expect(shellTerminalOutputChunks(block)).toEqual([
+    { stream: 'stdout', text: 'first stdout\n' },
+    { stream: 'stderr', text: 'first stderr\n' },
+    { stream: 'stdout', text: 'second stdout\n' },
+  ])
+})
+
+test('shell terminal output skips empty and malformed chunks', () => {
+  const block = tool({
+    view: {
+      kind: 'shell',
+      chunks: [
+        { stream: 'stdout', text: '' },
+        { stream: 'other', text: 'not a stream' },
+        'garbage',
+        { stream: 'stderr', text: 'kept\n' },
+      ],
+    },
+  })
+
+  expect(shellTerminalOutputChunks(block)).toEqual([{ stream: 'stderr', text: 'kept\n' }])
+})
+
+test('shell terminal output is empty without a chunked view', () => {
+  expect(shellTerminalOutputChunks(tool({}))).toEqual([])
+  expect(shellTerminalOutputChunks(tool({ view: { kind: 'yield_wakeup' } }))).toEqual([])
+})
+
+function tool(options: { view?: unknown }): Extract<Block, { type: 'tool_call' }> {
+  return {
+    type: 'tool_call',
+    id: 'tool-1',
+    createdAt: '1970-01-01T00:00:00.000Z',
+    model,
+    toolUseId: 'tool-1',
+    toolName: 'shell_exec',
+    input: '{}',
+    status: 'completed',
+    streamingOutput: [],
+    output: [{ type: 'text', text: 'status: exited' }],
+    view: options.view ?? null,
+  }
+}
+
+const model: ModelSelection = {
+  providerId: 'test',
+  model: {
+    id: 'test-model',
+    name: 'Test Model',
+    contextWindow: 1000,
+    inputLimit: null,
+    thinking: [],
+    acceptedExtensions: [],
+  },
+  thinking: null,
+  serviceTierId: null,
+}