@adminforth/agent 2.10.0 → 3.0.0

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.0",
   "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>