@adminforth/agent 2.0.10 → 2.2.0

package/dist/application/runTurnUseCase.js

@@ -0,0 +1,364 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __asyncValues = (this && this.__asyncValues) || function (o) {
+    if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
+    var m = o[Symbol.asyncIterator], i;
+    return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
+};
+import { logger } from "adminforth";
+import { randomUUID } from "crypto";
+import { VegaLiteStreamBuffer } from "../domain/vegaLiteStreamBuffer.js";
+import { buildAgentTurnSystemPrompt } from "../domain/systemPrompt.js";
+import { getErrorMessage, isAbortError } from "../shared/errors.js";
+function getApprovalDecision(input) {
+    return "approvalDecision" in input
+        && (input.approvalDecision === "approve" || input.approvalDecision === "reject")
+        ? input.approvalDecision
+        : undefined;
+}
+function buildHitlDecision(decision, prompt) {
+    if (decision === "approve") {
+        return { type: "approve" };
+    }
+    return {
+        type: "reject",
+        message: prompt
+            ? `User rejected the pending tool execution and sent a new instruction instead: ${prompt}`
+            : "User rejected executing this tool",
+    };
+}
+function buildHitlResumeValue(input) {
+    return {
+        decisions: Array.from({ length: input.count }, () => (buildHitlDecision(input.decision, input.prompt))),
+    };
+}
+/**
+ * Build the provider-agnostic resume payload for a human-in-the-loop turn.
+ * Exported for unit testing; the LLM port wraps it into a LangGraph Command.
+ */
+export function buildResumeValue(input) {
+    var _a;
+    const interrupts = (_a = input.interrupts) !== null && _a !== void 0 ? _a : [];
+    if (interrupts.length === 0) {
+        throw new Error("No pending approval interrupt found for resume.");
+    }
+    if (interrupts.length === 1) {
+        return buildHitlResumeValue({
+            decision: input.decision,
+            count: interrupts[0].count,
+            prompt: input.prompt,
+        });
+    }
+    return Object.fromEntries(interrupts.map((interrupt) => [
+        interrupt.id,
+        buildHitlResumeValue({
+            decision: input.decision,
+            count: interrupt.count,
+            prompt: input.prompt,
+        }),
+    ]));
+}
+/**
+ * Single entry point for running an agent turn: prepare (start/resume) → build
+ * the prompt → stream from the LLM port → consume the typed stream into SSE
+ * events → persist the result. Replaces the former AgentTurnService plus the
+ * TurnLifecycle/Context/Prompt/Persistence/StreamConsumer + ModeResolver stack.
+ */
+export class RunTurnUseCase {
+    constructor(deps) {
+        this.deps = deps;
+        this.pendingInterrupts = new Map();
+    }
+    resolveMode(modeName) {
+        var _a;
+        return (_a = this.deps.modes.find((mode) => mode.name === modeName)) !== null && _a !== void 0 ? _a : this.deps.modes[0];
+    }
+    buildContext(input, turnId) {
+        var _a, _b;
+        return {
+            adminUser: input.adminUser,
+            sessionId: input.sessionId,
+            turnId,
+            abortSignal: input.abortSignal,
+            currentPage: input.currentPage,
+            chatSurface: input.chatSurface,
+            userTimeZone: (_a = input.userTimeZone) !== null && _a !== void 0 ? _a : "UTC",
+            adminPublicOrigin: (_b = input.adminPublicOrigin) !== null && _b !== void 0 ? _b : this.deps.getAdminforth().config.baseUrlSlashed,
+        };
+    }
+    /**
+     * Resolve the pending HITL interrupts for a resume. With a persistent checkpointer the
+     * checkpoint is authoritative (correct across instances and restarts); with the in-memory
+     * MemorySaver the in-process cache is authoritative (single process, cannot be stale).
+     */
+    resolvePendingInterrupts(sessionId, mode) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            if (this.deps.hasPersistentCheckpointer) {
+                // The in-process cache can be stale after a cross-instance resume, so it is intentionally
+                // NOT consulted here. A failure to read the checkpoint is surfaced as a real error — never
+                // masked as "no pending approval".
+                try {
+                    return yield this.deps.llm.getPendingInterrupts({
+                        completionAdapter: mode.completionAdapter,
+                        sessionId,
+                    });
+                }
+                catch (error) {
+                    logger.error(`Failed to read pending approval state from checkpoint for session "${sessionId}": ${getErrorMessage(error)}`);
+                    throw error;
+                }
+            }
+            return (_a = this.pendingInterrupts.get(sessionId)) !== null && _a !== void 0 ? _a : [];
+        });
+    }
+    prepareTurn(input) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const sequenceDebugSink = this.deps.createDebugSink();
+            const mode = this.resolveMode(input.modeName);
+            const approvalDecision = getApprovalDecision(input);
+            const shouldResume = Boolean(approvalDecision);
+            let turnId;
+            let previousUserMessages = [];
+            let initialResponse;
+            let resumeInterrupts;
+            if (shouldResume) {
+                resumeInterrupts = yield this.resolvePendingInterrupts(input.sessionId, mode);
+                if (resumeInterrupts.length === 0) {
+                    throw new Error(`No pending approval interrupt found for session "${input.sessionId}".`);
+                }
+                const resumeState = yield this.deps.sessions.getResumeState(input.sessionId);
+                turnId = resumeState.turnId;
+                initialResponse = resumeState.initialResponse;
+            }
+            else {
+                previousUserMessages = yield this.deps.sessions.getPreviousUserMessages(input.sessionId);
+                turnId = yield this.deps.sessions.createNewTurn(input.sessionId, input.prompt);
+                yield this.deps.sessions.touchSession(input.sessionId);
+            }
+            return {
+                prompt: input.prompt,
+                sessionId: input.sessionId,
+                turnId,
+                previousUserMessages,
+                mode,
+                context: this.buildContext(input, turnId),
+                observability: {
+                    emit: input.emit,
+                    sequenceDebugSink,
+                },
+                resume: shouldResume
+                    ? { decision: approvalDecision, interrupts: resumeInterrupts }
+                    : undefined,
+                initialResponse,
+            };
+        });
+    }
+    buildMessages(prepared) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const userLanguage = yield this.deps.llm
+                .detectLanguage({
+                completionAdapter: prepared.mode.completionAdapter,
+                prompt: prepared.prompt,
+                previousUserMessages: prepared.previousUserMessages,
+            })
+                .catch((error) => {
+                var _a;
+                if (((_a = prepared.context.abortSignal) === null || _a === void 0 ? void 0 : _a.aborted) || isAbortError(error)) {
+                    throw error;
+                }
+                logger.warn(`Failed to detect user language: ${getErrorMessage(error)}`);
+                return null;
+            });
+            const adminforth = this.deps.getAdminforth();
+            const systemPrompt = buildAgentTurnSystemPrompt({
+                agentSystemPrompt: yield this.deps.getAgentSystemPrompt(),
+                adminUser: prepared.context.adminUser,
+                usernameField: adminforth.config.auth.usernameField,
+                userLanguage,
+                chatSurface: prepared.context.chatSurface,
+            });
+            return [
+                { role: "system", content: systemPrompt },
+                { role: "user", content: prepared.prompt },
+            ];
+        });
+    }
+    handleInterrupt(prepared, interrupt, descriptors) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c;
+            if (!this.deps.hasPersistentCheckpointer) {
+                const existing = (_a = this.pendingInterrupts.get(prepared.sessionId)) !== null && _a !== void 0 ? _a : [];
+                const merged = new Map(existing.map((item) => [item.id, item.count]));
+                for (const item of descriptors) {
+                    merged.set(item.id, item.count);
+                }
+                this.pendingInterrupts.set(prepared.sessionId, [...merged.entries()].map(([id, count]) => ({ id, count })));
+            }
+            yield ((_c = (_b = prepared.observability).emit) === null || _c === void 0 ? void 0 : _c.call(_b, {
+                type: "interrupt",
+                sessionId: prepared.sessionId,
+                interrupt,
+            }));
+        });
+    }
+    runAgentTurn(prepared) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, e_1, _b, _c;
+            const streamInput = prepared.resume
+                ? {
+                    resume: buildResumeValue({
+                        decision: prepared.resume.decision,
+                        interrupts: prepared.resume.interrupts,
+                        prompt: prepared.prompt,
+                    }),
+                }
+                : { messages: yield this.buildMessages(prepared) };
+            const stream = yield this.deps.llm.streamTurn({
+                completionAdapter: prepared.mode.completionAdapter,
+                input: streamInput,
+                context: prepared.context,
+                observability: prepared.observability,
+            });
+            const { emit } = prepared.observability;
+            const abortSignal = prepared.context.abortSignal;
+            const textBuffer = new VegaLiteStreamBuffer();
+            let fullResponse = "";
+            let interrupted = false;
+            try {
+                try {
+                    for (var _d = true, stream_1 = __asyncValues(stream), stream_1_1; stream_1_1 = yield stream_1.next(), _a = stream_1_1.done, !_a; _d = true) {
+                        _c = stream_1_1.value;
+                        _d = false;
+                        const chunk = _c;
+                        if (abortSignal === null || abortSignal === void 0 ? void 0 : abortSignal.aborted) {
+                            throw new DOMException("This operation was aborted", "AbortError");
+                        }
+                        if (chunk.kind === "interrupt") {
+                            interrupted = true;
+                            yield this.handleInterrupt(prepared, chunk.interrupt, chunk.descriptors);
+                            continue;
+                        }
+                        if (chunk.kind === "reasoning") {
+                            if (chunk.delta) {
+                                yield (emit === null || emit === void 0 ? void 0 : emit({ type: "reasoning-delta", delta: chunk.delta }));
+                            }
+                            continue;
+                        }
+                        if (chunk.delta) {
+                            fullResponse += chunk.delta;
+                            yield textBuffer.push(chunk.delta, emit);
+                        }
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (!_d && !_a && (_b = stream_1.return)) yield _b.call(stream_1);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+                yield textBuffer.flush(emit);
+                return { text: fullResponse };
+            }
+            finally {
+                // When the turn is interrupted for HITL approval it will resume, so any steers
+                // buffered meanwhile must survive to be applied on resume. Otherwise the turn is
+                // done and leftover (unconsumed) steers must not leak into the next turn.
+                if (!interrupted) {
+                    this.deps.steerBuffer.clear(prepared.sessionId);
+                }
+                if (!this.deps.hasPersistentCheckpointer && !interrupted) {
+                    this.pendingInterrupts.delete(prepared.sessionId);
+                }
+            }
+        });
+    }
+    runAndPersistAgentResponse(input) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b;
+            const prepared = yield this.prepareTurn(input);
+            let fullResponse = (_a = prepared.initialResponse) !== null && _a !== void 0 ? _a : "";
+            let aborted = false;
+            let failed = false;
+            try {
+                const agentResponse = yield this.runAgentTurn(prepared);
+                fullResponse += agentResponse.text;
+            }
+            catch (error) {
+                if (((_b = input.abortSignal) === null || _b === void 0 ? void 0 : _b.aborted) || isAbortError(error)) {
+                    aborted = true;
+                    logger.info(input.abortLogMessage);
+                }
+                else {
+                    failed = true;
+                    fullResponse = getErrorMessage(error);
+                    logger.error(`${input.failureLogMessage}:\n${fullResponse}`);
+                }
+            }
+            prepared.observability.sequenceDebugSink.flush();
+            yield this.deps.sessions.saveTurnResponse({
+                turnId: prepared.turnId,
+                responseText: fullResponse,
+                debugHistory: prepared.observability.sequenceDebugSink.getHistory(),
+            });
+            return {
+                text: fullResponse,
+                turnId: prepared.turnId,
+                aborted,
+                failed,
+            };
+        });
+    }
+    handleTurn(input) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b;
+            yield input.emit({
+                type: "turn-started",
+                messageId: randomUUID(),
+            });
+            const agentResponse = yield this.runAndPersistAgentResponse({
+                prompt: input.prompt,
+                sessionId: input.sessionId,
+                modeName: input.modeName,
+                userTimeZone: input.userTimeZone,
+                currentPage: input.currentPage,
+                chatSurface: input.chatSurface,
+                adminPublicOrigin: input.adminPublicOrigin,
+                approvalDecision: input.approvalDecision,
+                abortSignal: input.abortSignal,
+                adminUser: input.adminUser,
+                emit: input.emit,
+                failureLogMessage: (_a = input.failureLogMessage) !== null && _a !== void 0 ? _a : "Agent response failed",
+                abortLogMessage: (_b = input.abortLogMessage) !== null && _b !== void 0 ? _b : "Agent response aborted",
+            });
+            if (agentResponse.failed) {
+                yield input.emit({
+                    type: "error",
+                    error: agentResponse.text,
+                });
+            }
+            else if (!agentResponse.aborted) {
+                yield input.emit({
+                    type: "response",
+                    text: agentResponse.text,
+                    sessionId: input.sessionId,
+                    turnId: agentResponse.turnId,
+                });
+            }
+            yield input.emit({
+                type: "finish",
+            });
+            return agentResponse;
+        });
+    }
+}

package/dist/custom/ChatFooter.vue

@@ -7,27 +7,30 @@
       transition: `transform ${agentTransitions.TRANSITION_DURATION}ms ease-in-out`
     }"            
   >
-    <div 
-      class="w-full border rounded-lg pb-8"
-      :class="agentStore.isAudioChatMode ? 'border-none mt-8' : 'border dark:bg-gray-700'"  
-    > 
+    <SteerQueue />
+    <!-- <SteerDebugPanel /> -->
+    <div
+      class="w-full border rounded-lg flex flex-col"
+      :class="agentStore.isAudioChatMode ? 'border-none mt-8' : 'border dark:bg-gray-700'"
+    >
       <textarea
         v-if="!agentStore.isAudioChatMode"
         v-model="agentStore.userMessageInput"
         ref="textInput"
+        rows="1"
         @input="autoResize"
         :class="[
-          'min-h-12 px-4 pt-4 rounded-xl w-full resize-none overflow-hidden text-lightInputText dark:text-darkInputText rounded-md bg-transparent text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 focus:outline-none',
+          'h-8 px-4 py-3 border-b rounded-xl rounded-b-none w-full resize-none overflow-hidden text-lightInputText dark:text-darkInputText rounded-md bg-transparent text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 focus:outline-none',
           { '!text-base': coreStore.isIos }
         ]"
-        :placeholder="agentStore.hasPendingToolApproval ? 'Approve or reject the pending action to continue' : agentStore.userMessagePlaceholder"
-        :disabled="agentStore.isMessageInputBlocked"
+        :placeholder="placeholderText"
         @keydown.enter.exact.prevent="sendMessage"
       />
+      <div class="flex items-center justify-between px-2 py-1">
       <div
         v-if="agentStore.availableModes.length > 1"
         ref="modeMenu"
-        class="absolute bottom-2 left-4"
+        class="relative"
       >
         <button
           aria-label="Select mode"
@@ -46,22 +49,30 @@
             :class="isModeMenuOpen ? '!rotate-180' : '!rotate-0'"
           />
         </button>
-
-        <div
-          v-if="isModeMenuOpen"
-          class="absolute bottom-full left-0 mb-2 min-w-40 overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg dark:border-gray-600 dark:bg-gray-800"
-        >
-          <button
-            v-for="mode in agentStore.availableModes"
-            :key="mode.name"
-            class="block w-full px-3 py-2 text-left text-sm text-lightInputText transition-colors duration-150 hover:bg-gray-100 dark:text-darkInputText dark:hover:bg-gray-700"
-            :class="mode.name === agentStore.activeModeName ? 'bg-gray-100 dark:bg-gray-700' : ''"
-            type="button"
-            @click="selectMode(mode.name)"
+          <Transition
+            enter-active-class="transition ease-out duration-200"
+            enter-from-class="opacity-0 scale-95"
+            enter-to-class="opacity-100 scale-100"
+            leave-active-class="transition ease-in duration-150"
+            leave-from-class="opacity-100 scale-100"
+            leave-to-class="opacity-0 scale-95"
+          >
+          <div
+            v-if="isModeMenuOpen"
+            class="absolute bottom-full left-0 mb-2 min-w-40 overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg dark:border-gray-600 dark:bg-gray-800"
           >
-            {{ mode.name }}
-          </button>
-        </div>
+            <button
+              v-for="mode in agentStore.availableModes"
+              :key="mode.name"
+              class="block w-full px-3 py-2 text-left text-sm text-lightInputText transition-colors duration-150 hover:bg-gray-100 dark:text-darkInputText dark:hover:bg-gray-700"
+              :class="mode.name === agentStore.activeModeName ? 'bg-gray-100 dark:bg-gray-700' : ''"
+              type="button"
+              @click="selectMode(mode.name)"
+            >
+              {{ mode.name }}
+            </button>
+          </div>
+        </Transition>
       </div>
       <MicrophoneButton 
         v-if="props.meta.hasAudioAdapter"   
@@ -69,32 +80,33 @@
       <template v-if="!agentStore.isAudioChatMode">
         <Button 
           v-if="!agentStore.isResponseInProgress"
-          class="absolute right-4 bottom-2 !p-0 h-9 w-9 transition-opacity duration-200"                    
+          class=" !p-0 h-7 w-7 transition-opacity duration-200"                    
           @click="sendMessage" 
-          :disabled="!agentStore.trimmedUserMessage || agentStore.isMessageInputBlocked"
+          :disabled="!agentStore.trimmedUserMessage"
         >
           <IconArrowUpOutline 
-            class="w-8 h-8 p-1
+            class="w-6 h-6
               text-white" 
           />
         </Button>
         <Button
           v-else
-          class="absolute right-4 bottom-2 !p-0 h-9 w-9"    
+          class="right-4 bottom-2 !p-0 h-7 w-7"    
           @click="stopCurrentRequest"                
         >
           <div
-            class="w-3 h-3 bg-white rounded-sm"
+            class="w-2.5 h-2.5 bg-white rounded-sm"
           />
         </Button>
       </template>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { IconArrowUpOutline, IconAngleDownOutline } from '@iconify-prerendered/vue-flowbite';
-import { useTemplateRef, onMounted, ref, onUnmounted } from 'vue';
+import { useTemplateRef, onMounted, ref, onUnmounted, watch, computed } from 'vue';
 import { onClickOutside } from '@vueuse/core'
 import { useAgentStore } from './composables/useAgentStore';
 import { useAgentTransitions } from './composables/useAgentTransitions';
@@ -102,6 +114,8 @@ import { Button } from '@/afcl';
 import { useCoreStore } from '@/stores/core';
 import { remToPx } from './utils';
 import MicrophoneButton from './speech_recognition_frontend/MicrophoneButon.vue';
+import SteerQueue from './SteerQueue.vue';
+import SteerDebugPanel from './SteerDebugPanel.vue';
 
 const props = defineProps<{
   meta: {
@@ -124,6 +138,13 @@ const agentTransitions = useAgentTransitions();
 const coreStore = useCoreStore();
 const isModeMenuOpen = ref(false);
 
+const placeholderText = computed(() => {
+  if (agentStore.isTurnActive) {
+    return 'Queue a follow-up — send after, or steer it…';
+  }
+  return agentStore.userMessagePlaceholder;
+});
+
 onClickOutside(modeMenu as any, () => { isModeMenuOpen.value = false; });
 
 onMounted(async () => {
@@ -131,6 +152,11 @@ onMounted(async () => {
   agentStore.setCurrentGenerationModeFromLocalStorage();
   agentStore.regisrerTextInput(textInput.value);
   textInput.value?.focus();
+  autoResize();
+});
+
+watch(() => textInput.value?.value, () => {
+  autoResize();
 });
 
 function autoResize() {
@@ -161,7 +187,9 @@ function selectMode(modeName: string) {
 async function sendMessage() {
   if (agentStore.isAudioChatMode) return;
   isModeMenuOpen.value = false;
-  await agentStore.sendMessage();
+  // Routes to a steer (folded into the running turn) while generating, or a normal
+  // new-turn send when idle.
+  await agentStore.submitUserMessage();
   autoResize();
   props.conversationAreaRef?.handleSendMessage();
 }

package/dist/custom/SteerDebugPanel.vue

@@ -0,0 +1,45 @@
+<!--
+  TEMPORARY debug helper: enqueues a test steer message into the buffer WITHOUT sending
+  or steering it, so the SteerQueue enter/leave animation can be exercised without a live
+  generating turn. Remove before shipping.
+-->
+<template>
+  <div
+    class="fixed bottom-[400px] left-4 z-[9999] flex items-center gap-2 rounded-lg border border-dashed border-amber-400 bg-amber-50/95 px-2.5 py-2 shadow-lg backdrop-blur dark:border-amber-500 dark:bg-amber-950/95"
+  >
+    <span class="text-[10px] font-bold uppercase tracking-wider text-amber-600 dark:text-amber-400">
+      Steer&nbsp;debug
+    </span>
+    <input
+      v-model="debugText"
+      type="text"
+      placeholder="Test steer text…"
+      class="w-44 rounded-md border border-amber-300 bg-white px-2 py-1 text-xs text-gray-800 focus:outline-none focus:ring-1 focus:ring-amber-400 dark:border-amber-600 dark:bg-gray-800 dark:text-gray-100"
+      @keydown.enter.prevent="addTestSteer"
+    />
+    <button
+      type="button"
+      class="rounded-md bg-amber-500 px-2.5 py-1 text-xs font-semibold text-white transition-colors hover:bg-amber-600 active:bg-amber-700"
+      @click="addTestSteer"
+    >
+      Add steer
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useAgentStore } from './composables/useAgentStore';
+
+const agentStore = useAgentStore();
+const debugText = ref('');
+let counter = 0;
+
+function addTestSteer() {
+  counter += 1;
+  const text = debugText.value.trim() || `Test steer #${counter}`;
+  // enqueue() only pushes onto the client-side buffer — no /agent/steer, no send.
+  agentStore.enqueueSteerMessage(text);
+  debugText.value = '';
+}
+</script>

package/dist/custom/SteerQueue.vue

@@ -0,0 +1,54 @@
+<template>
+  <div
+    v-if="agentStore.steerQueue.length"
+    class="absolute bottom-full left-0 w-full mb-2 flex flex-col gap-1.5 px-2 z-20"
+  >
+    <TransitionGroup
+      appear
+      enter-active-class="transition ease-out duration-150"
+      enter-from-class="opacity-0 translate-y-1"
+      enter-to-class="opacity-100 translate-y-0"
+      leave-active-class="transition ease-in duration-100"
+      leave-from-class="opacity-100 translate-y-0"
+      leave-to-class="opacity-0 translate-y-1"
+    >
+      <div
+        v-for="item in agentStore.steerQueue"
+        :key="item.id"
+        class="flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-1.5 shadow-sm dark:border-gray-600 dark:bg-gray-800"
+      >
+        <span
+          class="flex-1 min-w-0 truncate text-sm text-lightInputText dark:text-darkInputText"
+          :title="item.text"
+        >
+          {{ item.text }}
+        </span>
+        <span class="shrink-0 text-xs text-gray-400 dark:text-gray-500">
+          {{ $t('queued') }}
+        </span>
+        <button
+          type="button"
+          class="shrink-0 rounded-md px-2 py-1 text-xs font-medium text-lightPrimary transition-colors hover:bg-lightPrimary/10 dark:text-darkPrimary dark:hover:bg-darkPrimary/10"
+          :title="$t('Steer into the current response')"
+          @click="agentStore.steerQueuedMessage(item.id)"
+        >
+          {{ $t('Steer') }}
+        </button>
+        <button
+          type="button"
+          class="shrink-0 flex h-6 w-6 items-center justify-center rounded-md text-lg leading-none text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-300"
+          :title="$t('Remove from queue')"
+          @click="agentStore.removeQueuedMessage(item.id)"
+        >
+          &times;
+        </button>
+      </div>
+    </TransitionGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAgentStore } from './composables/useAgentStore';
+
+const agentStore = useAgentStore();
+</script>

package/dist/custom/composables/agentStore/constants.ts

@@ -11,6 +11,7 @@ export const PLACEHOLDER_TYPING_DELAY_MS = 60;
 export const PLACEHOLDER_DELETING_DELAY_MS = 35;
 export const PLACEHOLDER_HOLD_DELAY_MS = 3000;
 export const PRE_SESSION_ID = 'pre-session';
+export const STEER_PERSIST_PREFIX = '__adminforth_steer__:';
 
 export enum RESERVED_SYSTEM_MESSAGE_CONTENT {
   START_AUDIO_CHAT = 'START_AUDIO_CHAT',