@adminforth/agent 2.10.0 → 3.0.0

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

@@ -203,6 +203,26 @@ export function createAgentSessionManager({
     setCurrentChat(PRE_SESSION_ID);
   }
 
+  async function renameSession(sessionId: string, title: string) {
+    const res = await callAdminForthApi({
+      method: 'POST',
+      path: '/agent/rename-session',
+      body: { sessionId, title },
+    });
+    if (res.error) {
+      console.error('Error renaming session:', res.error);
+      return;
+    }
+    sessionList.value.find((s: ISessionsListItem) => s.sessionId === sessionId)!.title = res.title;
+    // a loaded session is cached apart from the list, and the open one is shown in the header
+    if (sessions.value[sessionId]) {
+      sessions.value[sessionId].title = res.title;
+    }
+    if (currentSession.value?.sessionId === sessionId) {
+      currentSession.value.title = res.title;
+    }
+  }
+
   async function deleteSession(sessionId: string) {
     if (sessionId === PRE_SESSION_ID) {
       deletePreSession();
@@ -370,6 +390,7 @@ export function createAgentSessionManager({
     createPreSession,
     setActiveSession,
     fetchSessionsList,
+    renameSession,
     deleteSession,
     addDebugMessage,
     addSystemMessage,

package/dist/custom/composables/useAgentStore.ts

@@ -198,6 +198,7 @@ export const useAgentStore = defineStore('agent', () => {
     createPreSession,
     setActiveSession,
     fetchSessionsList,
+    renameSession,
     deleteSession,
     addDebugMessage,
     addSystemMessage,
@@ -590,6 +591,7 @@ export const useAgentStore = defineStore('agent', () => {
     sessionList,
     setActiveSession,
     fetchSessionsList,
+    renameSession,
     deleteSession,
     createPreSession,
     //____________________________________________

package/dist/custom/conversation_area/ConversationArea.vue

@@ -5,7 +5,7 @@
   <div 
     v-if="agentStore.isSessionHistoryOpen"
     @click="agentStore.setSessionHistoryOpen(false)"
-    class="absolute bg-black/10 backdrop-blur-md z-10 h-full w-full"
+    class="absolute z-10 h-full w-full bg-lightScrim dark:bg-darkScrim"
   >
   </div>
   <div class="relative flex-1 min-h-0 overflow-hidden [container-type:size]" @click="recalculateScroll()">
@@ -36,7 +36,7 @@
 
       <div 
         v-for="(message, index) in props.messages" :key="index"
-        class="flex flex-col w-full mt-2 pb-2"
+        class="flex flex-col w-full pt-5 first:pt-4"
         :class="message.role === 'user' ? 'self-end' : 'self-start'"
         ref="messagesRefs"
       >
@@ -50,25 +50,27 @@
         <div class="flex items-center justify-center w-11 h-11 rounded-xl bg-lightPrimary/10 text-lightPrimary dark:bg-darkPrimary/15 dark:text-darkPrimary">
           <IconSparkles class="w-6 h-6" />
         </div>
-        <h2 class="mt-4 text-xl font-semibold text-lightNavbarText dark:text-darkNavbarText">
+        <h2 class="mt-4 text-lg font-semibold tracking-tight text-lightNavbarText dark:text-darkNavbarText">
           {{ $t('How can I help?') }}
         </h2>
-        <p class="mt-1.5 max-w-xs text-sm leading-relaxed text-gray-600 dark:text-gray-400">
+        <p class="mt-1.5 max-w-xs text-sm leading-relaxed text-lightInputIconColor dark:text-darkInputIconColor">
           {{ $t('Ask about your data, build charts or update records.') }}
         </p>
         <div v-if="suggestions.length" class="mt-7 w-full max-w-sm flex flex-col gap-2 text-left">
-          <p class="pl-0.5 text-xs font-medium text-gray-500 dark:text-gray-400">{{ $t('Try asking') }}</p>
+          <p class="pl-0.5 text-xs font-medium text-lightInputIconColor dark:text-darkInputIconColor">{{ $t('Try asking') }}</p>
           <button
             v-for="suggestion in suggestions"
             :key="suggestion"
             type="button"
-            class="group flex items-center gap-2.5 w-full px-3 py-2.5 rounded-xl border text-sm text-left transition-colors duration-150
-              border-gray-200 text-lightNavbarText hover:border-gray-300 hover:bg-gray-50
-              dark:border-gray-700 dark:text-darkNavbarText dark:hover:border-gray-600 dark:hover:bg-gray-800"
+            class="group flex items-center gap-2.5 w-full px-3 py-2.5 rounded-lg border text-sm text-left transition-colors duration-150
+              border-lightCardBorder bg-lightCardBackground text-lightNavbarText hover:bg-lightCardBackgroundHover
+              focus:outline-none focus-visible:ring-[3px] focus-visible:ring-lightFocusRing
+              dark:border-darkCardBorder dark:bg-darkCardBackground dark:text-darkNavbarText dark:hover:bg-darkCardBackgroundHover
+              dark:focus-visible:ring-darkFocusRing"
             @click="applySuggestion(suggestion)"
           >
             <span class="flex-1 min-w-0">{{ suggestion }}</span>
-            <IconArrowRight class="w-4 h-4 shrink-0 text-gray-400 transition-transform duration-150 group-hover:translate-x-0.5" />
+            <IconArrowRight class="w-4 h-4 shrink-0 text-lightInputIconColor transition-transform duration-150 group-hover:translate-x-0.5 dark:text-darkInputIconColor" />
           </button>
         </div>
       </div>
@@ -84,18 +86,17 @@
       <button 
         v-if="showScrollToBottomButton" 
         @click="scrollContainer.scrollToBottom();"
-        class="absolute z-10 bottom-8 left-1/2 -translate-x-1/2 
-          bg-lightPrimary/20 dark:bg-darkPrimary/10
-          border border-lightPrimary dark:border-darkPrimary 
-          text-lightPrimary dark:text-darkPrimary 
-          backdrop-blur-sm rounded-full
-          w-10 h-10 flex items-center justify-center gap-0.5"
-        :class="{ 'w-12 h-8': showAnimationInScrollToBottomButton }"
+        class="absolute z-10 bottom-8 left-1/2 -translate-x-1/2 flex items-center justify-center gap-0.5 w-[2.125rem] h-[2.125rem] rounded-full border
+          border-lightInputBorder bg-lightInputBackground text-lightInputIconColor shadow-popover hover:text-lightInputText
+          focus:outline-none focus-visible:ring-[3px] focus-visible:ring-lightFocusRing
+          dark:border-darkInputBorder dark:bg-darkInputBackground dark:text-darkInputIconColor dark:shadow-darkPopover dark:hover:text-darkInputText
+          dark:focus-visible:ring-darkFocusRing"
+        :class="{ 'w-12': showAnimationInScrollToBottomButton }"
+        :aria-label="$t('Scroll to the latest message')"
       >
-        <IconArrowDownOutline 
+        <IconArrowDown
           v-if="!showAnimationInScrollToBottomButton"
-          class="p-2 w-10 h-10 transition-opacity duration-100 ease-in " 
-          :disabled="!showScrollToBottomButton"
+          class="w-4 h-4"
         />
         <ThreeDotsAnimation 
           v-else
@@ -110,8 +111,7 @@
 <script setup lang="ts">
 import type { IMessage } from '../types';
 import { useTemplateRef, ref, onMounted, onUnmounted, watch, nextTick, defineAsyncComponent, computed } from 'vue';
-import { IconArrowDownOutline } from '@iconify-prerendered/vue-flowbite';
-import { IconArrowRight, IconSparkles } from '@iconify-prerendered/vue-heroicons';
+import { IconArrowDown, IconArrowRight, IconSparkles } from '@iconify-prerendered/vue-lucide';
 import SessionsHistory from '../SessionsHistory.vue';
 import { useAgentStore } from '../composables/useAgentStore';
 import { useAgentTransitions } from '../composables/useAgentTransitions';

package/dist/custom/conversation_area/MessageRenderer.vue

@@ -18,34 +18,38 @@
       >
         <div
           v-if="showActionsBar && showEditButton"
-          class="absolute flex -bottom-6 p-1 mt-0.5 z-20"
+          class="absolute flex top-full -mt-1 p-1 z-20"
           :class="isUserMessage ? 'right-0 self-end mr-4' : 'left-0 self-start ml-4'"
           @mouseenter="showEditButtonOnHover"
           @mouseleave="hideEditButtonOnHover"
         >
-          <button
+          <Button
             v-if="canCopy"
-            type="button"
-            :class="ACTION_BUTTON_CLASSES"
+            variant="ghost"
+            size="sm"
+            iconOnly
             :title="$t('Copy message')"
+            :aria-label="$t('Copy message')"
             @click="copyMessageToClipboard"
           >
-            <IconFileCopyOutline class="w-4 h-4" />
-          </button>
-          <button
+            <IconCopy />
+          </Button>
+          <Button
             v-if="canEdit"
-            type="button"
-            :class="ACTION_BUTTON_CLASSES"
+            variant="ghost"
+            size="sm"
+            iconOnly
             :title="$t('Edit message')"
+            :aria-label="$t('Edit message')"
             @click="agentStore.startEditMessage(message)"
           >
-            <IconPenOutline class="w-4 h-4" />
-          </button>
+            <IconPencil />
+          </Button>
         </div>
       </Transition>
     <div
       v-if="message.role === 'user' && message.metadata?.steer && !isBeingEditedTurn"
-      class="self-end mr-4 mb-0.5 text-xs italic text-gray-400 dark:text-gray-500"
+      class="self-end mr-4 mb-0.5 text-xs italic text-lightInputPlaceholderText dark:text-darkInputPlaceholderText"
     >
       {{ $t('Steering instruction') }}
     </div>
@@ -83,7 +87,8 @@
 
 <script setup lang="ts">
   import { computed, ref } from 'vue';
-  import { IconPenOutline, IconFileCopyOutline } from '@iconify-prerendered/vue-flowbite';
+  import { IconCopy, IconPencil } from '@iconify-prerendered/vue-lucide';
+  import { Button } from '@/afcl';
   import TextRenderer from './TextRenderer.vue';
   import type { IMessage } from '../types';
   import { getMessageParts } from '../utils';
@@ -99,10 +104,6 @@
     isLastMessageInChat: boolean
   }>();
 
-  const ACTION_BUTTON_CLASSES = `flex items-center justify-center w-7 h-7 rounded-md transition-colors duration-150
-    text-gray-500 hover:bg-gray-100 hover:text-gray-800
-    dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200`;
-
   const agentStore = useAgentStore();
   const { alert } = useAdminforth();
   const showEditButton = ref(false);

package/dist/custom/conversation_area/ProcessingTimeline.vue

@@ -2,21 +2,21 @@
   <template v-if="timelineParts.length > 0 || inProgress">
     <button
       type="button"
-      class="z-20 self-start flex items-center gap-1.5 mx-4 my-1 select-none text-[0.9375rem] font-medium transition-colors duration-150
-        text-gray-600 dark:text-gray-400"
-      :class="timelineParts.length > 0 ? 'hover:text-gray-900 dark:hover:text-gray-200' : 'cursor-default'"
+      class="z-20 self-start flex items-center gap-1 mx-4 mb-2 select-none text-[13px] font-medium transition-colors duration-150
+        text-lightInputIconColor dark:text-darkInputIconColor"
+      :class="timelineParts.length > 0 ? 'hover:text-lightInputText dark:hover:text-darkInputText' : 'cursor-default'"
       @click="isExpanded = !isExpanded"
     >
       <IconChevronRight
         v-if="timelineParts.length > 0"
-        class="w-4 h-4 transition-transform duration-200"
+        class="w-3.5 h-3.5 transition-transform duration-200"
         :class="isExpanded ? 'rotate-90' : 'rotate-0'"
       />
       <template v-if="inProgress">
         <span
-          class="shine-text text-listTableHeadingText dark:text-darkListTableHeadingText
-            bg-[linear-gradient(-65deg,currentColor,_rgb(120,120,120)_50%,currentColor)]
-            dark:bg-[linear-gradient(-65deg,currentColor,_rgb(250,250,250,0.8)_70%,currentColor)]"
+          class="shine-text
+            bg-[linear-gradient(-65deg,currentColor,theme(colors.lightInputPlaceholderText)_50%,currentColor)]
+            dark:bg-[linear-gradient(-65deg,currentColor,theme(colors.darkInputText)_70%,currentColor)]"
         >
           {{ $t('Thinking') }}
         </span>
@@ -34,8 +34,8 @@
       <div
         v-if="timelineParts.length > 0"
         v-show="isExpanded"
-        class="z-20 mx-4 mt-1 mb-3 overflow-hidden rounded-xl border
-          border-gray-100 bg-gray-50/70 dark:border-gray-700 dark:bg-gray-800/50"
+        class="z-20 mx-4 mb-3 overflow-hidden rounded-lg border
+          border-lightCardBorder bg-lightCardBackground dark:border-darkCardBorder dark:bg-darkCardBackground"
       >
         <CustomAutoScrollContainer
           ref="scrollContainerRef"
@@ -52,7 +52,7 @@
               <ToolRenderer v-else-if="part.type === 'data-tool-call'" :data="formatToolCallPart(part)" />
               <li
                 v-else-if="part.type === 'data-rendering'"
-                class="flex items-center gap-2 py-0.5 text-[0.8125rem] text-gray-700 dark:text-gray-300"
+                class="flex items-center gap-2 py-0.5 text-[0.8125rem] text-lightTableText dark:text-darkTableText"
               >
                 <span class="flex items-center justify-center w-4 h-4 shrink-0">
                   <span class="w-2 h-2 rounded-full bg-current animate-pulse" />
@@ -73,7 +73,7 @@
 <script setup lang="ts">
   import type { IFormattedToolCallPart, IMessage, IPart } from '../types';
   import { ref, computed, watch, onUnmounted, onMounted, defineAsyncComponent } from 'vue';
-  import { IconChevronRight } from '@iconify-prerendered/vue-heroicons';
+  import { IconChevronRight } from '@iconify-prerendered/vue-lucide';
   import ReasoningRenderer from './ReasoningRenderer.vue';
   import ToolRenderer from './ToolRenderer.vue';
   import ThreeDotsAnimation from './ThreeDotsAnimation.vue';

package/dist/custom/conversation_area/ReasoningRenderer.vue

@@ -5,19 +5,19 @@
       class="flex items-center gap-2 w-full py-0.5 text-left text-[0.8125rem] leading-5 select-none"
       @click="isExpanded = !isExpanded"
     >
-      <IconBrainOutline class="w-4 h-4 shrink-0 text-gray-500 dark:text-gray-400" />
-      <span class="min-w-0 truncate font-medium text-gray-700 dark:text-gray-300">{{ reasoningTitle || $t('Reasoning') }}</span>
+      <IconBrain class="w-4 h-4 shrink-0 text-lightInputIconColor dark:text-darkInputIconColor" />
+      <span class="min-w-0 truncate font-medium text-lightTableText dark:text-darkTableText">{{ reasoningTitle || $t('Reasoning') }}</span>
       <ThreeDotsAnimation v-if="isStreaming"/>
       <IconChevronDown
         :class="isExpanded ? 'rotate-180' : 'rotate-0'"
-        class="ml-auto w-3.5 h-3.5 shrink-0 text-gray-400 transition-transform duration-200"
+        class="ml-auto w-3.5 h-3.5 shrink-0 text-lightInputIconColor transition-transform duration-200 dark:text-darkInputIconColor"
       />
     </button>
     <transition name="expand">
       <IncremarkContent
         v-if="isExpanded"
         v-show="isExpanded"
-        class="ml-6 mb-1 text-sm text-gray-600 dark:text-gray-400"
+        class="ml-6 mb-1 text-sm text-lightInputIconColor dark:text-darkInputIconColor"
         :content="reasoningText"
       />
     </transition>
@@ -27,8 +27,7 @@
 
 
 <script setup lang="ts">
-import { IconBrainOutline } from '@iconify-prerendered/vue-flowbite';
-import { IconChevronDown } from '@iconify-prerendered/vue-heroicons';
+import { IconBrain, IconChevronDown } from '@iconify-prerendered/vue-lucide';
 import type { IPart } from '../types';
 import { ref, computed, watch, defineAsyncComponent } from 'vue';
 import ThreeDotsAnimation from './ThreeDotsAnimation.vue';

package/dist/custom/conversation_area/SystemMessageRenderer.vue

@@ -1,10 +1,10 @@
 <template>
   <p :class="`${TEXT_CLASSES}`" v-if="message === RESERVED_SYSTEM_MESSAGE_CONTENT.START_AUDIO_CHAT">
-    <IconPhoneSolid class="inline-block w-4 h-4 mr-1" />
+    <IconPhone class="inline-block w-4 h-4 mr-1" />
     {{$t('Audio chat started')}}
   </p>
   <p :class="`${TEXT_CLASSES}`" v-else-if="message === RESERVED_SYSTEM_MESSAGE_CONTENT.END_AUDIO_CHAT">
-    <IconPhoneHangupSolid class="inline-block w-4 h-4 mr-1" />
+    <IconPhoneOff class="inline-block w-4 h-4 mr-1" />
     {{$t('Audio chat ended')}}
   </p>
   <p :class="`${TEXT_CLASSES}`" v-else-if="message === RESERVED_SYSTEM_MESSAGE_CONTENT.AGENT_RESPONSE_ABORTED">
@@ -17,9 +17,9 @@
 
 <script setup lang="ts">
 import { RESERVED_SYSTEM_MESSAGE_CONTENT } from '../composables/agentStore/constants';
-import { IconPhoneSolid, IconPhoneHangupSolid } from '@iconify-prerendered/vue-flowbite';
+import { IconPhone, IconPhoneOff } from '@iconify-prerendered/vue-lucide';
 
-const TEXT_CLASSES = 'text-center italic  text-lightListTableHeadingText dark:text-darkListTableHeadingText flex items-center justify-center';
+const TEXT_CLASSES = 'flex items-center justify-center text-center text-sm italic text-lightInputIconColor dark:text-darkInputIconColor';
 
 const props = defineProps<{ 
   message: string

package/dist/custom/conversation_area/TextRenderer.vue

@@ -1,13 +1,14 @@
 <template>
   <div
-    class="flex items-center justify-center min-w-0 transition-shadow duration-150 z-20"
+    class="flex items-center justify-center min-w-0 text-sm transition-shadow duration-150 z-20"
     @click="handleMarkdownLinkClick"
     :class="[
-      hasVegaLite ? 'w-full my-2' : 'my-2',
+      hasVegaLite && 'w-full',
       props.role === 'user'
-        ? 'self-end max-w-[82%] mr-4 px-3.5 py-0.5 rounded-2xl rounded-br-md bg-lightPrimary/10 dark:bg-darkPrimary/20'
+        ? 'self-end max-w-[82%] mr-4 px-3 py-2 rounded-xl rounded-br [&_.incremark-paragraph]:leading-5 bg-lightSecondaryDarken dark:bg-darkSecondaryLighten'
         : 'self-start max-w-full px-4',
-      props.editMode ? 'ring-2 ring-lightPrimary dark:ring-darkPrimary w-full max-w-[calc(100%-2rem)] flex-col items-stretch py-3' : ''
+      props.editMode ? `w-full max-w-[calc(100%-2rem)] flex-col items-stretch py-3 border bg-lightInputBackground border-lightInputFocusBorder ring-[3px] ring-lightInputFocusRing
+        dark:bg-darkInputBackground dark:border-darkInputFocusBorder dark:ring-darkInputFocusRing` : ''
     ]"
   >
     <IncremarkContent
@@ -19,13 +20,10 @@
       :components="incremarkComponents"
       :incremark-options="incremarkOptions"
     />
-    <!-- <p v-else class="text-red-500 py-2">
-      {{ $t('No content to render') }}
-    </p> -->
     <template v-if="props.editMode">
       <textarea
         v-model="agentStore.userMessageInput"
-        class="w-full min-h-24 resize-y bg-transparent text-sm text-gray-900 dark:text-gray-100 border-none focus:outline-none focus:ring-0 p-0"
+        class="w-full min-h-24 resize-y bg-transparent text-sm text-lightInputText dark:text-darkInputText border-none focus:outline-none focus:ring-0 p-0"
         @keydown.esc.prevent="agentStore.cancelEditMessage"
       />
       <EditActionButtons
@@ -155,31 +153,55 @@
 </script>
 
 <style lang="scss">
+// the incremark theme ships its own fonts and palette, point them to the design tokens
+.incremark {
+  --incremark-typography-font-family-base: theme('fontFamily.sans');
+  --incremark-typography-font-family-mono: theme('fontFamily.mono');
+  --incremark-color-text-primary: theme('colors.lightListTableText');
+  --incremark-color-text-secondary: theme('colors.lightInputIconColor');
+  --incremark-color-text-tertiary: theme('colors.lightInputPlaceholderText');
+  --incremark-color-border-default: theme('colors.lightCardBorder');
+  --incremark-color-border-strong: theme('colors.lightCardBorder');
+  --incremark-color-border-subtle: theme('colors.lightCardBorder');
+  --incremark-color-background-base: theme('colors.lightCardBackground');
+  --incremark-color-background-elevated: theme('colors.lightCardBackgroundHover');
+  --incremark-color-code-inline-background: theme('colors.lightSecondaryDarken');
+  --incremark-color-code-inline-text: theme('colors.lightInputText');
+  --incremark-color-brand-primary: theme('colors.lightPrimary');
+  --incremark-color-interactive-link: theme('colors.lightPrimary');
+  --incremark-color-interactive-link-hover: theme('colors.lightPrimary');
+  --incremark-color-interactive-link-visited: theme('colors.lightPrimary');
+}
+
+.dark .incremark {
+  --incremark-color-text-primary: theme('colors.darkListTableText');
+  --incremark-color-text-secondary: theme('colors.darkInputIconColor');
+  --incremark-color-text-tertiary: theme('colors.darkInputPlaceholderText');
+  --incremark-color-border-default: theme('colors.darkCardBorder');
+  --incremark-color-border-strong: theme('colors.darkCardBorder');
+  --incremark-color-border-subtle: theme('colors.darkCardBorder');
+  --incremark-color-background-base: theme('colors.darkCardBackground');
+  --incremark-color-background-elevated: theme('colors.darkCardBackgroundHover');
+  --incremark-color-code-inline-background: theme('colors.darkSecondaryLighten');
+  --incremark-color-code-inline-text: theme('colors.darkInputText');
+  --incremark-color-brand-primary: theme('colors.darkPrimary');
+  --incremark-color-interactive-link: theme('colors.darkPrimary');
+  --incremark-color-interactive-link-hover: theme('colors.darkPrimary');
+  --incremark-color-interactive-link-visited: theme('colors.darkPrimary');
+}
+
 .incremark a.incremark-link,
 .incremark a.incremark-link:visited {
+  @apply text-lightPrimary dark:text-darkPrimary;
   display: inline-block;
   text-decoration: underline;
   text-underline-offset: 4px;
-  text-decoration-style:dotted;
-  color: rgb(0, 0, 0);
-  transition: color 0.2s ease;
+  text-decoration-style: dotted;
   word-break: break-all;
 }
 
 .incremark a.incremark-link:hover {
-  color: rgb(74, 74, 255);
-  text-decoration: underline;
-  text-underline-offset: 4px;
-  text-decoration-style:dotted;
-}
-
-html[data-theme="dark"] .incremark a.incremark-link,
-html[data-theme="dark"] .incremark a.incremark-link:visited {
-  color: rgb(220, 220, 220);
-}
-
-html[data-theme="dark"] .incremark a.incremark-link:hover {
-  color: rgb(147, 147, 255);
+  text-decoration-style: solid;
 }
 
 a.incremark-link::after {
@@ -198,11 +220,27 @@ a.incremark-link::after {
   word-break: break-word;
 }
 
-.incremark-list {
+// scoped under .incremark: the incremark theme is imported lazily and would win an equal selector
+.incremark .incremark-list {
   list-style: disc;
+  margin: 0 0 8px;
+  padding-left: 18px;
+}
+
+.incremark .incremark-list-item {
+  margin: 2px 0;
+}
+
+.incremark .incremark-paragraph {
+  margin: 0 0 8px;
+}
+
+.incremark .incremark-list-item > .incremark-paragraph {
+  margin: 0;
 }
 
-.incremark-paragraph {
-  margin: 8px 0;
+// the gap between messages comes from the conversation, not from the last block of a message
+.incremark > .incremark-block:last-child > :last-child {
+  margin-bottom: 0;
 }
 </style>

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');