@adminforth/agent 2.10.0 → 3.0.1

package/dist/custom/conversation_area/ToolApprovalRenderer.vue

@@ -1,29 +1,26 @@
 <template>
   <div
-    class="mx-4 my-2 max-w-[min(34rem,calc(100%-2rem))] z-20 rounded-xl border p-3.5"
+    class="af-agent-approval mx-4 my-2 max-w-[min(34rem,calc(100%-2rem))] z-20 rounded-lg border p-3.5"
     :class="isAwaitingDecision
-      ? 'border-amber-200 bg-amber-50 dark:border-amber-500/30 dark:bg-amber-500/10'
-      : 'border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800/50'"
+      ? 'border-lightWarningBorder bg-lightWarningSoft dark:border-darkWarningBorder dark:bg-darkWarningSoft'
+      : 'border-lightCardBorder bg-lightCardBackground dark:border-darkCardBorder dark:bg-darkCardBackground'"
   >
     <div class="flex items-start gap-2.5">
-      <span
-        class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full"
-        :class="isAwaitingDecision
-          ? 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-300'
-          : 'bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-300'"
-      >
-        <IconShieldExclamation class="h-4 w-4" />
-      </span>
+      <IconShieldAlert
+        class="mt-0.5 h-4 w-4 shrink-0"
+        :class="isAwaitingDecision ? 'text-lightWarning dark:text-darkWarning' : 'text-lightInputIconColor dark:text-darkInputIconColor'"
+      />
       <div class="min-w-0 flex-1">
-        <h3 class="text-sm font-semibold leading-5 text-gray-900 dark:text-gray-100">{{ $t('Approval needed') }}</h3>
-        <p class="text-[0.8125rem] leading-5 text-gray-600 dark:text-gray-300">
+        <h3 class="text-sm font-semibold leading-5 text-lightCardTitle dark:text-darkCardTitle">{{ $t('Approval needed') }}</h3>
+        <p class="text-[0.8125rem] leading-5 text-lightCardDescription dark:text-darkCardDescription">
           {{ $t('Review what the agent is about to do before continuing.') }}
         </p>
       </div>
     </div>
     <ul
-      class="mt-3 divide-y rounded-lg border bg-white text-[0.8125rem] leading-5 text-gray-800
-        divide-gray-100 border-gray-200 dark:divide-gray-700 dark:border-gray-700 dark:bg-gray-900/40 dark:text-gray-200"
+      class="mt-3 divide-y rounded-default border text-[0.8125rem] leading-5
+        divide-lightCardBorder border-lightCardBorder bg-lightCardBackground text-lightTableText
+        dark:divide-darkCardBorder dark:border-darkCardBorder dark:bg-darkCardBackground dark:text-darkTableText"
     >
       <li
         v-for="(approval, approvalIndex) in data.approvals"
@@ -36,19 +33,19 @@
           class="mt-2 grid grid-cols-[minmax(0,auto)_minmax(0,1fr)] gap-x-4 gap-y-1.5"
         >
           <template v-for="(field, fieldIndex) in approval.fields" :key="fieldIndex">
-            <dt class="text-gray-500 dark:text-gray-400 [overflow-wrap:anywhere]">{{ field.label }}</dt>
+            <dt class="text-lightInputIconColor dark:text-darkInputIconColor [overflow-wrap:anywhere]">{{ field.label }}</dt>
             <dd class="flex min-w-0 flex-wrap items-center gap-1.5">
               <template v-if="field.from !== undefined && field.from !== field.to">
                 <span
                   class="min-w-0 rounded px-1.5 line-through [overflow-wrap:anywhere]
-                    bg-red-50 text-red-700 decoration-red-700/50 dark:bg-red-500/15 dark:text-red-300 dark:decoration-red-300/50"
+                    bg-lightDangerSoft text-lightDanger decoration-lightDanger/50 dark:bg-darkDangerSoft dark:text-darkDanger dark:decoration-darkDanger/50"
                 >
                   {{ field.from }}
                 </span>
-                <IconArrowRight class="h-3.5 w-3.5 shrink-0 text-gray-400" />
+                <IconArrowRight class="h-3.5 w-3.5 shrink-0 text-lightInputIconColor dark:text-darkInputIconColor" />
                 <span
                   class="min-w-0 rounded px-1.5 font-medium [overflow-wrap:anywhere]
-                    bg-green-50 text-green-700 dark:bg-green-500/15 dark:text-green-300"
+                    bg-lightSuccessSoft text-lightSuccess dark:bg-darkSuccessSoft dark:text-darkSuccess"
                 >
                   {{ field.to }}
                 </span>
@@ -61,39 +58,28 @@
     </ul>
     <div class="mt-3 flex flex-wrap gap-2">
       <template v-if="data.status === 'pending'">
-        <button
-          type="button"
-          class="inline-flex h-8 items-center gap-1.5 rounded-lg px-3 text-[0.8125rem] font-medium transition-opacity duration-150
-            bg-lightPrimary text-lightPrimaryContrast hover:opacity-90 dark:bg-darkPrimary dark:text-darkPrimaryContrast"
-          @click="submit('approve')"
-        >
+        <Button size="sm" type="button" @click="submit('approve')">
           <IconCheck class="h-4 w-4" />
           {{ $t('Approve') }}
-        </button>
-        <button
-          type="button"
-          class="inline-flex h-8 items-center rounded-lg border px-3 text-[0.8125rem] font-medium transition-colors duration-150
-            border-gray-300 bg-white text-gray-700 hover:bg-gray-50
-            dark:border-gray-600 dark:bg-transparent dark:text-gray-200 dark:hover:bg-gray-700/50"
-          @click="submit('reject')"
-        >
+        </Button>
+        <Button variant="secondary" size="sm" type="button" @click="submit('reject')">
           {{ $t('Reject') }}
-        </button>
+        </Button>
       </template>
       <span
         v-else
-        class="inline-flex h-7 items-center gap-1.5 rounded-lg px-2.5 text-[0.8125rem] font-medium
-          bg-white text-gray-700 dark:bg-gray-900/40 dark:text-gray-200"
+        class="inline-flex h-6 items-center gap-1.5 rounded-full border px-2 text-xs font-medium"
+        :class="STATUS_BADGE_CLASSES[data.status]"
       >
-        <Spinner v-if="data.status === 'processing'" class="h-4 w-4" />
-        <IconCheck v-else-if="data.status === 'approved'" class="h-4 w-4" />
-        <IconXMark v-else class="h-4 w-4" />
+        <Spinner v-if="data.status === 'processing'" class="h-3.5 w-3.5" />
+        <IconCheck v-else-if="data.status === 'approved'" class="h-3.5 w-3.5" />
+        <IconX v-else class="h-3.5 w-3.5" />
         {{ data.status === 'processing' ? $t('Processing') : data.status === 'approved' ? $t('Approved') : $t('Rejected') }}
       </span>
     </div>
     <p
       v-if="data.error"
-      class="mt-3 text-sm leading-5 text-red-600 dark:text-red-400"
+      class="mt-3 text-sm leading-5 text-lightDanger dark:text-darkDanger"
     >
       {{ data.error }}
     </p>
@@ -104,13 +90,19 @@
 import { computed } from 'vue';
 import type { IPartData } from '../types';
 import { useAgentStore } from '../composables/useAgentStore';
-import { Spinner } from '@/afcl';
-import { IconArrowRight, IconCheck, IconShieldExclamation, IconXMark } from '@iconify-prerendered/vue-heroicons';
+import { Button, Spinner } from '@/afcl';
+import { IconArrowRight, IconCheck, IconShieldAlert, IconX } from '@iconify-prerendered/vue-lucide';
 
 const props = defineProps<{
   data: IPartData;
 }>();
 
+const STATUS_BADGE_CLASSES: Record<string, string> = {
+  processing: 'border-transparent bg-lightSecondaryDarken text-lightInputIconColor dark:bg-darkSecondaryLighten dark:text-darkInputIconColor',
+  approved: 'border-lightSuccessBorder bg-lightSuccessSoft text-lightSuccess dark:border-darkSuccessBorder dark:bg-darkSuccessSoft dark:text-darkSuccess',
+  rejected: 'border-lightDangerBorder bg-lightDangerSoft text-lightDanger dark:border-darkDangerBorder dark:bg-darkDangerSoft dark:text-darkDanger',
+};
+
 const agentStore = useAgentStore();
 
 const isAwaitingDecision = computed(() => props.data.status === 'pending' || props.data.status === 'processing');

package/dist/custom/conversation_area/ToolRenderer.vue

@@ -8,19 +8,19 @@
     >
       <span class="flex items-center justify-center w-4 h-4 shrink-0 rounded-full" :class="statusClasses">
         <Spinner v-if="isRunning" class="w-3 h-3" />
-        <IconXMark16Solid v-else-if="props.data.toolInfo.error" class="w-3 h-3" />
-        <IconCheck16Solid v-else class="w-3 h-3" />
+        <IconX v-else-if="props.data.toolInfo.error" class="w-3 h-3" />
+        <IconCheck v-else class="w-3 h-3" />
       </span>
-      <span class="max-w-[55%] shrink-0 truncate font-mono text-xs text-gray-800 dark:text-gray-200">
+      <span class="max-w-[55%] shrink-0 truncate font-mono text-xs text-lightInputText dark:text-darkInputText">
         {{ props.data.toolInfo.toolName }}
       </span>
-      <span class="flex-1 min-w-0 truncate text-gray-500 dark:text-gray-400" :title="props.data.toolInfo.toolInfo">
+      <span class="flex-1 min-w-0 truncate text-lightInputIconColor dark:text-darkInputIconColor" :title="props.data.toolInfo.toolInfo">
         {{ props.data.toolInfo.toolInfo }}
       </span>
-      <span v-if="durationLabel" class="shrink-0 tabular-nums text-gray-500 dark:text-gray-400">{{ durationLabel }}</span>
+      <span v-if="durationLabel" class="shrink-0 tabular-nums text-lightInputIconColor dark:text-darkInputIconColor">{{ durationLabel }}</span>
       <IconChevronDown
         v-if="hasToolSections"
-        class="w-3.5 h-3.5 shrink-0 text-gray-400 transition-transform duration-200"
+        class="w-3.5 h-3.5 shrink-0 text-lightInputIconColor transition-transform duration-200 dark:text-darkInputIconColor"
         :class="isInputOutputExpanded ? 'rotate-180' : 'rotate-0'"
       />
     </button>
@@ -29,14 +29,14 @@
         <section
           v-for="section in toolSections"
           :key="section.label"
-          class="overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900/40"
+          class="overflow-hidden rounded-default border border-lightCardBorder bg-lightCardBackground dark:border-darkCardBorder dark:bg-darkCardBackground"
         >
-          <header class="border-b border-gray-200 px-2.5 py-1.5 text-[0.7rem] font-semibold uppercase tracking-wider text-gray-500 dark:border-gray-700 dark:text-gray-400">
+          <header class="border-b border-lightCardBorder px-2.5 py-1.5 text-xs font-medium text-lightInputIconColor dark:border-darkCardBorder dark:text-darkInputIconColor">
             {{ section.label }}
           </header>
-          <div class="select-all grid grid-cols-[auto,1fr] gap-x-3 gap-y-0.5 px-2.5 py-2 font-mono text-xs leading-5 text-gray-700 dark:text-gray-200">
+          <div class="select-all grid grid-cols-[auto,1fr] gap-x-3 gap-y-0.5 px-2.5 py-2 font-mono text-xs leading-5 text-lightTableText dark:text-darkTableText">
             <template v-for="line in section.lines" :key="`${section.label}-${line.number}`">
-              <span class="text-[0.7rem] text-gray-400 dark:text-gray-500 select-none">{{ line.number }}</span>
+              <span class="text-[0.7rem] text-lightInputPlaceholderText dark:text-darkInputPlaceholderText select-none">{{ line.number }}</span>
               <span class="whitespace-pre-wrap break-words">{{ line.content || ' ' }}</span>
             </template>
           </div>
@@ -50,7 +50,7 @@
   import { computed, ref } from 'vue';
   import { type IFormattedToolCallPart } from '../types';
   import { Spinner } from '@/afcl';
-  import { IconCheck16Solid, IconChevronDown, IconXMark16Solid } from '@iconify-prerendered/vue-heroicons';
+  import { IconCheck, IconChevronDown, IconX } from '@iconify-prerendered/vue-lucide';
 
   const props = defineProps<{
     data: IFormattedToolCallPart
@@ -73,11 +73,11 @@
   });
   const statusClasses = computed(() => {
     if (isRunning.value) {
-      return 'text-gray-500 dark:text-gray-400';
+      return 'text-lightInputIconColor dark:text-darkInputIconColor';
     }
     return props.data.toolInfo.error
-      ? 'bg-red-100 text-red-600 dark:bg-red-500/20 dark:text-red-400'
-      : 'bg-lightPrimary/10 text-lightPrimary dark:bg-darkPrimary/20 dark:text-darkPrimary';
+      ? 'bg-lightDangerSoft text-lightDanger dark:bg-darkDangerSoft dark:text-darkDanger'
+      : 'bg-lightSuccessSoft text-lightSuccess dark:bg-darkSuccessSoft dark:text-darkSuccess';
   });
   const toolSections = computed<IToolSection[]>(() => {
     const sections = [

package/dist/custom/incremark_code_renderers/IncremarkShikiCodeBlock.vue

@@ -205,6 +205,9 @@ async function renderHighlight() {
       const result = await embed(vegaContainer.value, spec, {
         actions: false,
         renderer: 'svg',
+        // the chart sits on the surface of the code block, so it takes the theme of the page
+        theme: codeTheme.value === 'dark' ? 'dark' : undefined,
+        config: { background: 'transparent' },
       });
 
       if (requestId !== renderRequestId) {
@@ -259,70 +262,36 @@ function clearVega() {
 
 <style scoped>
 .incremark-shiki-code {
-  --incremark-code-border: rgba(148, 163, 184, 0.24);
-  --incremark-code-toolbar-bg: rgba(248, 250, 252, 0.9);
-  --incremark-code-toolbar-text: #475569;
-  --incremark-code-copy-bg: rgba(226, 232, 240, 0.9);
-  --incremark-code-copy-text: #0f172a;
-  border: 1px solid var(--incremark-code-border);
-  border-radius: 16px;
+  @apply border border-lightCardBorder bg-lightCardBackground dark:border-darkCardBorder dark:bg-darkCardBackground;
+  border-radius: 8px;
   overflow: hidden;
   width: 100%;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.96));
-  box-shadow: 0 14px 30px -24px rgba(15, 23, 42, 0.45);
-  margin: 16px 0 ;
-}
-
-.dark .incremark-shiki-code {
-  --incremark-code-border: rgba(100, 116, 139, 0.38);
-  --incremark-code-toolbar-bg: rgba(15, 23, 42, 0.88);
-  --incremark-code-toolbar-text: #cbd5e1;
-  --incremark-code-copy-bg: rgba(30, 41, 59, 0.88);
-  --incremark-code-copy-text: #e2e8f0;
-  background:
-    linear-gradient(180deg, rgba(2, 6, 23, 0.96), rgba(15, 23, 42, 0.98));
-}
-
-.incremark-shiki-code[data-stream-state='pending'],
-.incremark-shiki-code[data-stream-state='stable'] {
-  box-shadow: 0 10px 24px -24px rgba(15, 23, 42, 0.8);
+  margin: 0 0 8px;
 }
 
 .incremark-shiki-toolbar {
+  @apply border-b border-lightCardBorder bg-lightCardBackgroundHover dark:border-darkCardBorder dark:bg-darkCardBackgroundHover;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--incremark-code-border);
-  background: var(--incremark-code-toolbar-bg);
-  backdrop-filter: blur(10px);
+  padding: 4px 4px 4px 12px;
 }
 
 .incremark-shiki-language {
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--incremark-code-toolbar-text);
+  @apply text-xs font-medium text-lightInputIconColor dark:text-darkInputIconColor;
 }
 
 .incremark-shiki-copy {
-  border: none;
-  border-radius: 999px;
-  padding: 6px 10px;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  background: var(--incremark-code-copy-bg);
-  color: var(--incremark-code-copy-text);
-  cursor: pointer;
-  transition: transform 0.16s ease, opacity 0.16s ease, background-color 0.16s ease;
+  @apply h-6 rounded-default px-2 text-xs font-medium transition-colors text-lightInputIconColor dark:text-darkInputIconColor;
 }
 
 .incremark-shiki-copy:hover:not(:disabled) {
-  transform: translateY(-1px);
+  @apply bg-lightSecondaryDarken text-lightInputText dark:bg-darkSecondaryLighten dark:text-darkInputText;
+}
+
+.incremark-shiki-copy:focus-visible {
+  @apply outline-none ring-[3px] ring-lightFocusRing dark:ring-darkFocusRing;
 }
 
 .incremark-shiki-copy:disabled {
@@ -331,13 +300,7 @@ function clearVega() {
 }
 
 .incremark-shiki-copy.is-copied {
-  background: rgba(16, 185, 129, 0.16);
-  color: #059669;
-}
-
-.dark .incremark-shiki-copy.is-copied {
-  background: rgba(16, 185, 129, 0.24);
-  color: #6ee7b7;
+  @apply text-lightSuccess dark:text-darkSuccess;
 }
 
 .incremark-shiki-body {
@@ -345,13 +308,13 @@ function clearVega() {
 }
 
 .incremark-vega {
-  padding: 18px;
+  padding: 12px;
   width: 100%;
 }
 
 .incremark-shiki-fallback {
   margin: 0;
-  padding: 18px;
+  padding: 12px;
   overflow-x: auto;
   background: transparent;
   color: inherit;
@@ -359,7 +322,7 @@ function clearVega() {
 
 .incremark-shiki-fallback code {
   display: block;
-  font-family: 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-family: theme('fontFamily.mono');
   font-size: 13px;
   line-height: 1.65;
   white-space: pre;
@@ -367,7 +330,7 @@ function clearVega() {
 
 :deep(.incremark-shiki-html pre.shiki) {
   margin: 0;
-  padding: 18px;
+  padding: 12px;
   overflow-x: auto;
   background: transparent !important;
   font-size: 13px;
@@ -376,7 +339,7 @@ function clearVega() {
 
 :deep(.incremark-shiki-html code) {
   display: block;
-  font-family: 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-family: theme('fontFamily.mono');
 }
 
 :deep(.incremark-shiki-html .line) {
@@ -387,7 +350,5 @@ function clearVega() {
   width: 100%;
 }
 
-:deep(.incremark-vega){
-  padding: 0;
-}
+
 </style>

package/dist/custom/speech_recognition_frontend/MicrophoneButon.vue

@@ -6,12 +6,14 @@
     <!-- One button for the whole voice flow: the icon shows the state, the label what a click does -->
     <button
       type="button"
-      class="flex h-8 shrink-0 items-center justify-center rounded-full transition-colors duration-150"
+      class="flex h-[2.125rem] shrink-0 items-center justify-center rounded-full transition-colors duration-150
+        focus:outline-none focus-visible:ring-[3px] focus-visible:ring-lightFocusRing dark:focus-visible:ring-darkFocusRing"
       :class="isAudioChatMode
         ? `w-40 gap-2 px-3 text-sm font-medium
-          bg-lightPrimary/10 text-gray-800 hover:bg-lightPrimary/15
-          dark:bg-darkPrimary/20 dark:text-gray-100 dark:hover:bg-darkPrimary/30`
-        : 'w-8 text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'"
+          bg-lightPrimary/10 text-lightInputText hover:bg-lightPrimary/15
+          dark:bg-darkPrimary/20 dark:text-darkInputText dark:hover:bg-darkPrimary/30`
+        : `w-[2.125rem] text-lightInputIconColor hover:bg-lightSecondaryDarken hover:text-lightInputText
+          dark:text-darkInputIconColor dark:hover:bg-darkSecondaryLighten dark:hover:text-darkInputText`"
       :title="$t(buttonTitle)"
       :aria-label="$t(buttonTitle)"
       @click="isGenerating ? stopCurrentGeneration() : toggleChatMode()"

package/dist/transport/http/sessionEndpoints.js

@@ -28,6 +28,10 @@ const sessionIdBodySchema = z.object({
 const createSessionBodySchema = z.object({
     triggerMessage: z.string().optional(),
 }).strict();
+const renameSessionBodySchema = z.object({
+    sessionId: z.string(),
+    title: z.string().trim().min(1).max(100),
+}).strict();
 export function setupSessionEndpoints(ctx, server) {
     server.endpoint({
         method: 'POST',
@@ -175,6 +179,36 @@ export function setupSessionEndpoints(ctx, server) {
             };
         })
     });
+    server.endpoint({
+        method: 'POST',
+        path: `/agent/rename-session`,
+        agent: {
+            hiddenFromAgents: true,
+        },
+        request_schema: renameSessionBodySchema,
+        handler: (_a) => __awaiter(this, [_a], void 0, function* ({ body, adminUser, response }) {
+            const data = body;
+            const session = yield ctx.adminforth.resource(ctx.options.sessionResource.resourceId).get([Filters.EQ(ctx.options.sessionResource.idField, data.sessionId)]);
+            if (!session) {
+                response.setStatus(404, 'Session not found');
+                return {
+                    error: 'Session not found'
+                };
+            }
+            if (session[ctx.options.sessionResource.askerIdField] !== adminUser.pk) {
+                response.setStatus(403, 'Unauthorized');
+                return {
+                    error: 'Unauthorized'
+                };
+            }
+            yield ctx.adminforth.resource(ctx.options.sessionResource.resourceId).update(data.sessionId, {
+                [ctx.options.sessionResource.titleField]: data.title,
+            });
+            return {
+                title: data.title,
+            };
+        })
+    });
     server.endpoint({
         method: 'POST',
         path: `/agent/add-system-message-to-turns`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/agent",
-  "version": "2.10.0",
+  "version": "3.0.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -36,7 +36,7 @@
   "devDependencies": {
     "@types/jest": "^30.0.0",
     "@types/node": "latest",
-    "adminforth": "^3.32.0",
+    "adminforth": "^4.1.0",
     "jest": "^30.3.0",
     "semantic-release": "^24.2.1",
     "semantic-release-slack-bot": "^4.0.2",
@@ -80,6 +80,6 @@
     }
   ],
   "peerDependencies": {
-    "adminforth": "^3.32.0"
+    "adminforth": "^4.1.0"
   }
 }

package/dist/custom/SteerDebugPanel.vue

@@ -1,45 +0,0 @@
-<!--
-  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>