@demicodes/web-ui 0.3.1 → 0.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@demicodes/web-ui",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "type": "module",
   "files": [
     "src"
@@ -24,9 +24,9 @@
     "typecheck": "vue-tsc --noEmit -p tsconfig.json"
   },
   "dependencies": {
-    "@demicodes/agent": "^0.3.1",
-    "@demicodes/core": "^0.3.1",
-    "@demicodes/utils": "^0.3.1",
+    "@demicodes/agent": "^0.3.2",
+    "@demicodes/core": "^0.3.2",
+    "@demicodes/utils": "^0.3.2",
     "@floating-ui/vue": "^2.0.0",
     "@mingcute/vue": "^1.4.1",
     "@tanstack/vue-virtual": "^3.13.29",

package/src/agent/AgentMessageList.vue

@@ -109,6 +109,7 @@ watch(
               :conversation-id="props.conversationId"
               :is-thinking-streaming="isStreamingThinkingAt(item.index)"
               :thinking-ended-at="thinkingEndedAt(item.index)"
+              :recoverable="item.index === renderBlocks.length - 1 && props.phase === 'idle'"
               @continue="emit('continue')"
               @retry="emit('retry')"
               @delete-pending-steer="(id) => emit('deletePendingSteer', id)"

package/src/agent/ConversationView.vue

@@ -20,7 +20,6 @@ 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() {
@@ -71,7 +70,6 @@ function onRetry() {
           @clear-all="workspace.clearMessageQueue(conversationId)"
         />
         <AgentMessageInput
-          ref="messageInputRef"
           class="relative z-10"
           :conversation-id="conversationId"
           @empty-submit="handleEmptySubmit"

package/src/agent/blocks/AbortedBlock.vue

@@ -2,6 +2,11 @@
 import { ArrowRightLine } from '@mingcute/vue/arrow-right'
 import { t } from '@demicodes/web-ui/infra/i18n'
 
+const props = defineProps<{
+  /** Offer the Continue action; see ErrorBlock — only the tail block recovers. */
+  recoverable: boolean
+}>()
+
 const emit = defineEmits<{
   continue: []
   retry: []
@@ -16,6 +21,7 @@ function handleRecovery() {
   <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
+        v-if="props.recoverable"
         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"
       >

package/src/agent/blocks/AgentMessageVirtualBlock.vue

@@ -16,6 +16,10 @@ const props = defineProps<{
   conversationId: string
   isThinkingStreaming: boolean
   thinkingEndedAt?: string | null
+  /** Whether this block may offer recovery actions (Continue) — true only for
+   * the conversation's tail block while the session is idle, so stale error
+   * blocks never present a second, competing recovery entry point. */
+  recoverable: boolean
 }>()
 
 const emit = defineEmits<{
@@ -67,12 +71,14 @@ const attrs = useAttrs()
       <ErrorBlock
         :message="block.message"
         :code="block.code"
+        :recoverable="props.recoverable"
         @continue="emit('continue')"
         @retry="emit('retry')"
       />
     </div>
     <div v-else-if="block.type === 'abort'" class="px-[var(--agent-pad-x,2rem)]">
       <AbortedBlock
+        :recoverable="props.recoverable"
         @continue="emit('continue')"
         @retry="emit('retry')"
       />

package/src/agent/blocks/ErrorBlock.vue

@@ -11,6 +11,9 @@ const props = defineProps<{
   message: string
   code?: string | null
   stack?: string
+  /** Offer the Continue action. Only the conversation's tail error is
+   * recoverable — older errors are records, not entry points. */
+  recoverable: boolean
 }>()
 
 const emit = defineEmits<{
@@ -66,7 +69,7 @@ const { copy, copied } = useClipboard({ copiedDuring: 1500 })
         <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 v-if="props.recoverable" 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"

package/src/agent/conversation-runtime.ts

@@ -17,11 +17,18 @@ export class ConversationRuntime {
   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,
-  ) {}
+  private readonly state: ConversationState
+  private readonly baseUrl: string
+  private readonly control: ControlApi
+
+  // Explicit field assignments instead of constructor parameter properties:
+  // this package ships as source, and parameter properties are rejected by
+  // consumers compiling with erasableSyntaxOnly.
+  constructor(state: ConversationState, baseUrl: string, control: ControlApi) {
+    this.state = state
+    this.baseUrl = baseUrl
+    this.control = control
+  }
 
   async send(content: UserContentBlock[]): Promise<void> {
     const client = await this.ensureOpen()
@@ -122,7 +129,18 @@ export class ConversationRuntime {
   }
 
   async resume(): Promise<void> {
-    await (await this.ensureOpen()).resume()
+    const client = await this.ensureOpen()
+    // Optimistic: the server only reports `running` after a round-trip, which
+    // reads as a dead Continue button in the meantime. Flip immediately; the
+    // next phase_changed event carries the real phase either way, and a failed
+    // resume rolls back so the recovery action reappears.
+    this.state.phase = 'running'
+    try {
+      await client.resume()
+    } catch (error) {
+      this.state.phase = 'idle'
+      throw error
+    }
   }
 
   async compact(): Promise<void> {