@adminforth/agent 2.9.0 → 2.10.0

package/dist/custom/conversation_area/MessageRenderer.vue

@@ -26,20 +26,20 @@
           <button
             v-if="canCopy"
             type="button"
-            class="flex items-center justify-center w-8 h-8 rounded-md text-gray-400 hover:text-lightPrimary dark:hover:text-darkPrimary opacity-60 group-hover/msg:opacity-100 transition-opacity duration-150 hover:scale-110"
+            :class="ACTION_BUTTON_CLASSES"
             :title="$t('Copy message')"
             @click="copyMessageToClipboard"
           >
-            <IconFileCopySolid class="w-5 h-5" />
+            <IconFileCopyOutline class="w-4 h-4" />
           </button>
           <button
             v-if="canEdit"
             type="button"
-            class="flex items-center justify-center w-8 h-8 rounded-md text-gray-400 hover:text-lightPrimary dark:hover:text-darkPrimary opacity-60 group-hover/msg:opacity-100 transition-opacity duration-150 hover:scale-110"
+            :class="ACTION_BUTTON_CLASSES"
             :title="$t('Edit message')"
             @click="agentStore.startEditMessage(message)"
           >
-            <IconPenSolid class="w-5 h-5" />
+            <IconPenOutline class="w-4 h-4" />
           </button>
         </div>
       </Transition>
@@ -83,7 +83,7 @@
 
 <script setup lang="ts">
   import { computed, ref } from 'vue';
-  import { IconPenSolid, IconFileCopySolid } from '@iconify-prerendered/vue-flowbite';
+  import { IconPenOutline, IconFileCopyOutline } from '@iconify-prerendered/vue-flowbite';
   import TextRenderer from './TextRenderer.vue';
   import type { IMessage } from '../types';
   import { getMessageParts } from '../utils';
@@ -99,6 +99,10 @@
     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

@@ -1,58 +1,69 @@
 <template>
-  <template v-if="ToolOrReasoningParts.length > 0 || inProgress">
-    <div 
-      class="shine-text-container ml-2 px-4 flex items-center gap-1 select-none hover:opacity-80 tracking-wide font-medium text-sm text-listTableHeadingText dark:text-darkListTableHeadingText"
-      :class="[ToolOrReasoningParts.length > 0 ? 'cursor-pointer' : '']"
+  <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'"
       @click="isExpanded = !isExpanded"
     >
-      <p 
-        :class="[
-          inProgress ? `
-            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)]
-            ` 
-          : '']"
-      >
-        {{ inProgress ? $t('Thinking') : $t('Thoughts') }} 
-      </p>
-      <ThreeDotsAnimation v-if="inProgress" />      
-      <span v-if="thinkingDuration > 0">({{ (thinkingDuration/1000).toFixed(2) }} s)</span>
-      <IconAngleDownOutline 
-        v-if="ToolOrReasoningParts.length > 0"
-        :class="isExpanded ? 'rotate-180' : 'rotate-0'"
-        class="transition-transform duration-200"
+      <IconChevronRight
+        v-if="timelineParts.length > 0"
+        class="w-4 h-4 transition-transform duration-200"
+        :class="isExpanded ? 'rotate-90' : 'rotate-0'"
       />
-    </div>
-    <transition name="expand" class="sm:max-h-96 max-h-48 overflow-y-auto mb-4 pt-1">
-      <CustomAutoScrollContainer
-        ref="scrollContainerRef"
-        :enabled="isResponseInProgress"
-        behavior="smooth"
-        v-if="ToolOrReasoningParts.length > 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)]"
+        >
+          {{ $t('Thinking') }}
+        </span>
+        <ThreeDotsAnimation />
+      </template>
+      <template v-else>
+        <span>{{ thinkingSeconds ? $t('Thought for {seconds}s', { seconds: thinkingSeconds }) : $t('Thoughts') }}</span>
+        <span v-if="toolCallsCount">
+          · {{ toolCallsCount === 1 ? $t('1 tool') : $t('{count} tools', { count: toolCallsCount }) }}
+        </span>
+      </template>
+    </button>
+    <transition name="expand">
+      <!-- the box is inset from the message edge, so its own scrollbar never sits on top of the conversation scrollbar -->
+      <div
+        v-if="timelineParts.length > 0"
         v-show="isExpanded"
-        :threshold="5"
-        :wrapperStyle="{
-          marginRight: '1rem',
-        }"
-        :scrollBarAutoHide="false"
+        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"
       >
-        <ol class="ml-8 my-2 relative border-l border-l-2 border-black border-default border-listTableHeadingText dark:border-darkListTableHeadingText">
-          <template v-for="(part, index) in ToolOrReasoningParts" :key="index">
-            <ReasoningRenderer v-if="part.type === 'reasoning'" :state="part.state" :text="part.text" />
-            <ToolsGroup v-else-if="part.type==='data-tool-call'" :toolGroup="groupToolCallParts(message, part)" :isExpanded="isExpanded" />
-            <li v-else-if="part.type === 'data-rendering'" class="mb-6 mx-2 mt-2 px-2 z-50 overflow-hidden">
-              <span class="bg-lightNavbar dark:bg-darkNavbar absolute flex items-center text-listTableHeadingText dark:text-darkListTableHeadingText justify-center w-5 h-5 rounded-full -start-[0.68rem] ring-4 ring-lightNavbar dark:ring-darkNavbar">
-                <div class="w-2 h-2 rounded-full bg-current animate-pulse"></div>
-              </span>
-              <h3 class="flex items-center mb-1 text-sm ml-3 gap-1 text-listTableHeadingText dark:text-darkListTableHeadingText">
-                <span class="font-semibold">{{ part.data?.label ?? 'Rendering...' }}</span>
+        <CustomAutoScrollContainer
+          ref="scrollContainerRef"
+          class="max-h-48 sm:max-h-96 overflow-y-auto"
+          :enabled="isResponseInProgress"
+          behavior="smooth"
+          :threshold="5"
+          :scrollBarAutoHide="false"
+        >
+          <!-- wider right padding keeps the row chevrons clear of the box's scrollbar -->
+          <ul class="flex flex-col gap-1 pl-2.5 pr-5 py-2">
+            <template v-for="(part, index) in timelineParts" :key="index">
+              <ReasoningRenderer v-if="part.type === 'reasoning'" :state="part.state" :text="part.text" />
+              <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"
+              >
+                <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" />
+                </span>
+                {{ part.data?.label ?? 'Rendering...' }}
                 <ThreeDotsAnimation />
-              </h3>
-            </li>
-          </template>
-        </ol>
-      </CustomAutoScrollContainer>
+              </li>
+            </template>
+          </ul>
+        </CustomAutoScrollContainer>
+      </div>
     </transition>
   </template>
 </template>
@@ -60,14 +71,13 @@
 
 
 <script setup lang="ts">
-  import type { IFormattedToolCallPart, IMessage, IPart, IToolGroup } from '../types';
+  import type { IFormattedToolCallPart, IMessage, IPart } from '../types';
   import { ref, computed, watch, onUnmounted, onMounted, defineAsyncComponent } from 'vue';
+  import { IconChevronRight } from '@iconify-prerendered/vue-heroicons';
   import ReasoningRenderer from './ReasoningRenderer.vue';
-  import { IconAngleDownOutline } from '@iconify-prerendered/vue-flowbite';
+  import ToolRenderer from './ToolRenderer.vue';
   import ThreeDotsAnimation from './ThreeDotsAnimation.vue';
   import { useAgentStore } from '../composables/useAgentStore';
-  import { getMessageParts } from '../utils';
-  import ToolsGroup from './ToolsGroup.vue';
 
   const CustomAutoScrollContainer = defineAsyncComponent(() => import('../CustomAutoScrollContainer.vue'));
 
@@ -83,17 +93,23 @@
   const innerScrollContainerRef = ref<HTMLElement | null>(null);
   const isExpanded = ref(true);
   let isUserScrolled = false;
-  const ToolOrReasoningParts = computed(() => {
+  // One step per reasoning block and per tool call (its 'start' part; the matching 'end'
+  // part is merged in by formatToolCallPart), plus a rendering step while it is running.
+  const timelineParts = computed(() => {
     return props.message.parts.filter((part: IPart) => {
-      return part.type === 'data-tool-call'
-        || part.type === 'reasoning'
+      return part.type === 'reasoning'
+        || (part.type === 'data-tool-call' && part.data?.phase === 'start')
         || isActiveRenderingPart(part);
     });
   });
+  const toolCallsCount = computed(() => timelineParts.value.filter(part => part.type === 'data-tool-call').length);
+  const thinkingSeconds = computed(() => (
+    thinkingDuration.value > 0 ? Math.max(1, Math.round(thinkingDuration.value / 1000)) : 0
+  ));
   const isResponseInProgress = computed(() =>{
-    return props.isLastMessageInChat && agentStore.isResponseInProgress; 
+    return props.isLastMessageInChat && agentStore.isResponseInProgress;
   });
-  
+
   const showFakeThinkingMessage = computed(() => {
     if (props.message.parts.length === 0 && props.isLastMessageInChat) return true;
     return false;
@@ -141,37 +157,28 @@
     }
   });
 
-  const formatToolCallPart = (part: IPart, currentMessage: IMessage): IFormattedToolCallPart | null => {
-    if (part.type !== 'data-tool-call' || part.data?.phase !== 'start') {
-      return null;
-    }
-
-    const finishedPart = currentMessage.parts.find(candidate => {
+  function formatToolCallPart(part: IPart): IFormattedToolCallPart {
+    const data = part.data!;
+    const finishedPart = props.message.parts.find(candidate => {
       return candidate.type === 'data-tool-call'
-        && candidate.data?.toolCallId === part.data?.toolCallId
+        && candidate.data?.toolCallId === data.toolCallId
         && candidate.data?.phase === 'end';
     });
 
     return {
       type: 'data-tool-call',
       toolInfo: {
-        toolCallId: part.data.toolCallId,
-        toolName: part.data.toolName,
+        toolCallId: data.toolCallId,
+        toolName: data.toolName,
         phase: finishedPart ? 'end' : 'start',
         durationMs: finishedPart?.data?.durationMs,
-        input: part.data.input,
+        input: data.input,
         output: finishedPart?.data?.output,
-        toolInfo: part.data.toolInfo,
+        toolInfo: data.toolInfo,
         error: finishedPart?.data?.error,
       }
     };
-  };
-
-  const getVisibleTimelineParts = (message: IMessage) => {
-    return getMessageParts(message).filter(part => {
-      return part.type === 'reasoning' || (part.type === 'data-tool-call' && part.data?.phase === 'start');
-    });
-  };
+  }
 
   function isActiveRenderingPart(part: IPart) {
     return part.type === 'data-rendering'
@@ -181,55 +188,8 @@
       });
   }
 
-  const groupToolCallParts = (message: IMessage, currentPart: IPart): IToolGroup[] => {
-    if (currentPart.type !== 'data-tool-call') {
-      return [];
-    }
-
-    const visibleParts = getVisibleTimelineParts(message);
-    const currentPartIndex = visibleParts.findIndex(part => part === currentPart);
-
-    if (currentPartIndex === -1) {
-      return [];
-    }
-
-    if (currentPartIndex > 0 && visibleParts[currentPartIndex - 1]?.type === 'data-tool-call') {
-      return [];
-    }
-
-    const groupedParts: IToolGroup[] = [];
-
-    for (let index = currentPartIndex; index < visibleParts.length; index += 1) {
-      const part = visibleParts[index];
-
-      if (part.type === 'reasoning') {
-        break;
-      }
-
-      const formattedPart = formatToolCallPart(part, message);
-
-      if (!formattedPart) {
-        continue;
-      }
-
-      const lastGroup = groupedParts[groupedParts.length - 1];
-
-      if (lastGroup?.title === formattedPart.toolInfo.toolName) {
-        lastGroup.groupedTools.push(formattedPart);
-        continue;
-      }
-
-      groupedParts.push({
-        title: formattedPart.toolInfo.toolName,
-        groupedTools: [formattedPart],
-      });
-    }
-
-    return groupedParts;
-  };
-
   function handleScroll() {
-    if (isUserScrolled) { 
+    if (isUserScrolled) {
       scrollContainerRef.value?.handleScroll();
     }
   }

package/dist/custom/conversation_area/ReasoningRenderer.vue

@@ -1,36 +1,34 @@
 <template>
-  <li class="mb-6 mx-2 mt-2 px-2 z-50 overflow-hidden">
-    <span class="bg-lightNavbar dark:bg-darkNavbar absolute flex items-center text-listTableHeadingText dark:text-darkListTableHeadingText justify-center w-5 h-5 bg-brand-softer rounded-full -start-[0.68rem] ring-4 ring-lightNavbar dark:ring-darkNavbar ring-default">
-      <div class="w-5 h-5 rounded-full flex items-center justify-center">
-        <IconBrainOutline class="w-4 h-4" />
-      </div>
-    </span>
-    <h3 
-      class=" flex items-center mb-1 text-sm ml-3 gap-1 cursor-pointer select-none hover:opacity-80 text-listTableHeadingText dark:text-darkListTableHeadingText"      
+  <li class="overflow-hidden">
+    <button
+      type="button"
+      class="flex items-center gap-2 w-full py-0.5 text-left text-[0.8125rem] leading-5 select-none"
       @click="isExpanded = !isExpanded"
     >
-      <span class="font-semibold">{{ reasoningTitle }}</span>
+      <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>
       <ThreeDotsAnimation v-if="isStreaming"/>
-      <IconAngleDownOutline           
+      <IconChevronDown
         :class="isExpanded ? 'rotate-180' : 'rotate-0'"
-        class="transition-transform duration-200"
+        class="ml-auto w-3.5 h-3.5 shrink-0 text-gray-400 transition-transform duration-200"
       />
-    </h3>
+    </button>
     <transition name="expand">
       <IncremarkContent
-        v-if="isExpanded" 
+        v-if="isExpanded"
         v-show="isExpanded"
-        class="pl-4 text-sm"
+        class="ml-6 mb-1 text-sm text-gray-600 dark:text-gray-400"
         :content="reasoningText"
       />
-    </transition>    
+    </transition>
   </li>
 </template>
 
 
 
 <script setup lang="ts">
-import { IconBrainOutline, IconAngleDownOutline } from '@iconify-prerendered/vue-flowbite';
+import { IconBrainOutline } from '@iconify-prerendered/vue-flowbite';
+import { IconChevronDown } from '@iconify-prerendered/vue-heroicons';
 import type { IPart } from '../types';
 import { ref, computed, watch, defineAsyncComponent } from 'vue';
 import ThreeDotsAnimation from './ThreeDotsAnimation.vue';

package/dist/custom/conversation_area/TextRenderer.vue

@@ -1,11 +1,12 @@
 <template>
   <div
-    class="flex items-center justify-center rounded-xl border px-6 border-gray-200 dark:border-gray-700 min-w-0 transition-shadow duration-150 z-20"
+    class="flex items-center justify-center min-w-0 transition-shadow duration-150 z-20"
     @click="handleMarkdownLinkClick"
     :class="[
       hasVegaLite ? 'w-full my-2' : 'my-2',
-      props.role === 'user' ? 'bg-lightListTableHeading dark:bg-darkListTableHeading self-end max-w-[80%] mr-4'
-        : 'border-none self-start max-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-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' : ''
     ]"
   >

package/dist/custom/conversation_area/ToolApprovalRenderer.vue

@@ -1,72 +1,111 @@
 <template>
-  <div class="mx-4 my-3 max-w-[min(34rem,calc(100%-2rem))] z-20 rounded-lg border border-lightPrimary/30 bg-lightNavbar p-4 text-lightListTableHeadingText shadow-sm dark:border-darkPrimary/40 dark:bg-darkNavbar dark:text-darkListTableHeadingText">
-    <div class="flex items-start gap-3">
-      <div class="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-lightPrimary/10 text-lightPrimary dark:bg-darkPrimary/15 dark:text-darkPrimary">
-        <IconExclamationCircleOutline class="h-5 w-5" />
-      </div>
+  <div
+    class="mx-4 my-2 max-w-[min(34rem,calc(100%-2rem))] z-20 rounded-xl 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'"
+  >
+    <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>
       <div class="min-w-0 flex-1">
-        <h3 class="text-sm font-semibold leading-5">{{ $t('Approval required') }}</h3>
-        <p class="mt-1 text-sm leading-5 text-lightListTableText dark:text-darkListTableText">
+        <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">
           {{ $t('Review what the agent is about to do before continuing.') }}
         </p>
-        <ul
-          v-if="data.messages?.length"
-          class="mt-3 space-y-1 text-sm leading-5 text-lightListTableHeadingText dark:text-darkListTableHeadingText"
+      </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"
+    >
+      <li
+        v-for="(approval, approvalIndex) in data.approvals"
+        :key="approvalIndex"
+        class="px-3 py-2.5"
+      >
+        <p class="font-medium [overflow-wrap:anywhere]">{{ approval.summary }}</p>
+        <dl
+          v-if="approval.fields.length"
+          class="mt-2 grid grid-cols-[minmax(0,auto)_minmax(0,1fr)] gap-x-4 gap-y-1.5"
         >
-          <li
-            v-for="message in data.messages"
-            :key="message"
-            class="flex gap-2"
-          >
-            <span class="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-lightListTableHeadingText dark:bg-darkListTableHeadingText" />
-            <span class="min-w-0 whitespace-pre-line break-words">{{ message }}</span>
-          </li>
-        </ul>
-        <div class="mt-4 flex flex-wrap gap-2">
-          <template v-if="data.status === 'pending'">
-            <button
-              type="button"
-              class="inline-flex h-9 items-center gap-2 rounded-md border border-lightButtonsBorder bg-lightButtonsBackground px-3 text-sm font-medium text-lightButtonsText transition hover:bg-lightButtonsHover dark:border-darkButtonsBorder dark:bg-darkButtonsBackground dark:text-darkButtonsText dark:hover:bg-darkButtonsHover"
-              @click="submit('approve')"
-            >
-              <IconCheckOutline class="h-4 w-4" />
-              {{ $t('Approve') }}
-            </button>
-            <button
-              type="button"
-              class="inline-flex h-9 items-center gap-2 rounded-md border border-lightListTableText/20 bg-transparent px-3 text-sm font-medium text-lightListTableHeadingText transition hover:bg-lightListTableText/10 dark:border-darkListTableText/20 dark:text-darkListTableHeadingText dark:hover:bg-darkListTableText/10"
-              @click="submit('reject')"
-            >
-              <IconCloseOutline class="h-4 w-4" />
-              {{ $t('Reject') }}
-            </button>
+          <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>
+            <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"
+                >
+                  {{ field.from }}
+                </span>
+                <IconArrowRight class="h-3.5 w-3.5 shrink-0 text-gray-400" />
+                <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"
+                >
+                  {{ field.to }}
+                </span>
+              </template>
+              <span v-else class="min-w-0 font-medium [overflow-wrap:anywhere]">{{ field.to }}</span>
+            </dd>
           </template>
-          <span
-            v-else
-            class="inline-flex h-8 items-center gap-2 rounded-md border border-lightListTableText/20 bg-lightListTableText/10 px-2.5 text-sm font-medium text-lightListTableHeadingText dark:border-darkListTableText/20 dark:bg-darkListTableText/10 dark:text-darkListTableHeadingText"
-          >
-            <Spinner v-if="data.status === 'processing'" class="h-4 w-4" />
-            <IconCheckOutline v-else-if="data.status === 'approved'" class="h-4 w-4" />
-            <IconCloseOutline v-else class="h-4 w-4" />
-            {{ 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"
+        </dl>
+      </li>
+    </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')"
         >
-          {{ data.error }}
-        </p>
-      </div>
+          <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')"
+        >
+          {{ $t('Reject') }}
+        </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"
+      >
+        <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" />
+        {{ 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"
+    >
+      {{ data.error }}
+    </p>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import type { IPartData } from '../types';
 import { useAgentStore } from '../composables/useAgentStore';
 import { Spinner } from '@/afcl';
-import { IconCheckOutline, IconCloseOutline, IconExclamationCircleOutline } from '@iconify-prerendered/vue-flowbite';
+import { IconArrowRight, IconCheck, IconShieldExclamation, IconXMark } from '@iconify-prerendered/vue-heroicons';
 
 const props = defineProps<{
   data: IPartData;
@@ -74,6 +113,8 @@ const props = defineProps<{
 
 const agentStore = useAgentStore();
 
+const isAwaitingDecision = computed(() => props.data.status === 'pending' || props.data.status === 'processing');
+
 function submit(decision: 'approve' | 'reject') {
   if (!props.data.sessionId || props.data.status !== 'pending') {
     return;