@meistrari/tela-build 1.1.0 → 1.2.0

package/components/tela/badge/badge.vue

@@ -22,7 +22,7 @@ const tag = computed(() => props.to ? NuxtLink : 'div')
         :class="cn(
             'inline-block px-[5px] rounded-[5px] select-none',
             variant === 'outline' && 'border-[0.5px] ring-border-strong',
-            variant === 'filled' && 'bg-background-lowered',
+            variant === 'filled' && 'bg-lowered',
             props.class,
         )"
     >

package/components/tela/button/button.vue

@@ -65,6 +65,7 @@ const variantStyle = computed(() => (({
 const resolvedStyle = computed(() => [
     sizeStyle.value,
     variantStyle.value,
+    '[corner-shape:superellipse(1.3)]',
 ].join(' '))
 
 const tag = computed(() => props.to ? NuxtLink : 'button')

package/components/tela/collapsible/CollapsibleContent.vue

@@ -21,10 +21,10 @@ function handleOpenAutoComplete() {
     <CollapsibleContent
         v-bind="props"
         data-collapsible-content
-        class="overflow-hidden collapsible-content"
+        class="overflow-hidden collapsible-content h-full"
         @animation-start="handleOpenAutoComplete"
     >
-        <div ref="containerEl">
+        <div ref="containerEl" class="h-full">
             <slot />
         </div>
     </CollapsibleContent>

package/components/tela/icon/custom.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import type { TelaCustomIconName } from '~/types'
+import { Motion } from 'motion-v'
 
 const props = withDefaults(defineProps<{
-    size?: string;
-    color?: string;
-    name: TelaCustomIconName;
+    size?: string
+    color?: string
+    name: TelaCustomIconName
+    isAnimated?: boolean
 }>(), {
     size: '12px',
     color: 'neutral-400',
+    isAnimated: true,
 })
 
 const colorValue = computed(() => {
@@ -27,9 +30,10 @@ const colorValue = computed(() => {
 </script>
 
 <template>
-    <svg :width="size" :height="size" fill="none" :style="{ color: colorValue }" xmlns="http://www.w3.org/2000/svg">
+    <svg :width="size" :height="size" viewBox="0 0 12 12" fill="none" :style="{ color: colorValue }" xmlns="http://www.w3.org/2000/svg">
         <template v-if="name === 'circle'">
-            <Motion
+            <component
+                :is="isAnimated ? Motion : 'path'"
                 as="path"
                 d="M12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6ZM1.2 6C1.2 8.65097 3.34903 10.8 6 10.8C8.65097 10.8 10.8 8.65097 10.8 6C10.8 3.34903 8.65097 1.2 6 1.2C3.34903 1.2 1.2 3.34903 1.2 6Z"
                 fill="currentColor"
@@ -49,7 +53,8 @@ const colorValue = computed(() => {
         </template>
 
         <template v-if="name === 'queued'">
-            <Motion
+            <component
+                :is="isAnimated ? Motion : 'path'"
                 as="path"
                 d="M12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6ZM1.2 6C1.2 8.65097 3.34903 10.8 6 10.8C8.65097 10.8 10.8 8.65097 10.8 6C10.8 3.34903 8.65097 1.2 6 1.2C3.34903 1.2 1.2 3.34903 1.2 6Z"
                 fill="currentColor"
@@ -57,7 +62,8 @@ const colorValue = computed(() => {
                 :animate="{ opacity: [0.2, 1] }"
                 :transition="{ duration: 0.8, ease: [0.4, 0, 0.2, 1] }"
             />
-            <Motion
+            <component
+                :is="isAnimated ? Motion : 'rect'"
                 as="rect"
                 x="3.5"
                 y="6.5"
@@ -69,7 +75,8 @@ const colorValue = computed(() => {
                 :animate="{ opacity: [0.2, 1] }"
                 :transition="{ duration: 0.8, ease: 'easeOut', delay: 0.17, repeat: Infinity, repeatDelay: 1 }"
             />
-            <Motion
+            <component
+                :is="isAnimated ? Motion : 'rect'"
                 as="rect"
                 x="4"
                 y="4.5"
@@ -81,7 +88,8 @@ const colorValue = computed(() => {
                 :animate="{ opacity: [0.2, 1] }"
                 :transition="{ duration: 0.8, ease: 'easeOut', delay: 0.12, repeat: Infinity, repeatDelay: 1 }"
             />
-            <Motion
+            <component
+                :is="isAnimated ? Motion : 'rect'"
                 as="rect"
                 x="4.5"
                 y="3"
@@ -122,7 +130,8 @@ const colorValue = computed(() => {
         </template>
 
         <template v-if="name === 'circle-minus'">
-            <Motion
+            <component
+                :is="isAnimated ? Motion : 'path'"
                 as="path"
                 d="M12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6ZM1.2 6C1.2 8.65097 3.34903 10.8 6 10.8C8.65097 10.8 10.8 8.65097 10.8 6C10.8 3.34903 8.65097 1.2 6 1.2C3.34903 1.2 1.2 3.34903 1.2 6Z"
                 fill="currentColor"
@@ -130,7 +139,8 @@ const colorValue = computed(() => {
                 :animate="{ opacity: [0.5, 1, 0.5] }"
                 :transition="{ duration: 2.2, ease: 'easeOut', repeat: Infinity }"
             />
-            <Motion
+            <component
+                :is="isAnimated ? Motion : 'rect'"
                 as="rect"
                 x="3.5"
                 y="5"
@@ -145,12 +155,15 @@ const colorValue = computed(() => {
         </template>
 
         <template v-if="name === 'check'">
-            <Motion as="g" :animate="{ opacity: [0.4, 1] }" :transition="{ duration: 0.3, ease: [0.645, 0.045, 0.355, 1] }" tabindex="-1">
+            <component
+                :is="isAnimated ? Motion : 'g'" as="g" :animate="{ opacity: [0.4, 1] }" :transition="{ duration: 0.3, ease: [0.645, 0.045, 0.355, 1] }" tabindex="-1"
+            >
                 <path
                     d="M12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6ZM1.2 6C1.2 8.65097 3.34903 10.8 6 10.8C8.65097 10.8 10.8 8.65097 10.8 6C10.8 3.34903 8.65097 1.2 6 1.2C3.34903 1.2 1.2 3.34903 1.2 6Z"
                     fill="currentColor"
                 />
-                <Motion
+                <component
+                    :is="isAnimated ? Motion : 'path'"
                     as="path"
                     d="M3.5 6 L5.5 8 L8.5 4"
                     stroke="currentColor"
@@ -160,10 +173,10 @@ const colorValue = computed(() => {
                     stroke-linejoin="round"
                     tabindex="-1"
                     :animate="{ pathLength: [0, 1] }"
-                    :style="{ rotate: 4, scale: 0.85 }"
+                    :style="{ rotate: isAnimated ? 4 : undefined, scale: isAnimated ? 0.85 : undefined }"
                     :transition="{ duration: 0.3, ease: [0.645, 0.045, 0.355, 1] }"
                 />
-            </Motion>
+            </component>
         </template>
 
         <template v-if="name === 'stop'">
@@ -194,13 +207,15 @@ const colorValue = computed(() => {
         </template>
 
         <template v-if="name === 'warning'">
-            <Motion
+            <component
+                :is="isAnimated ? Motion : 'g'"
                 as="g"
                 tabindex="-1"
                 :animate="{ opacity: [0.5, 1, 0.5] }"
                 :transition="{ duration: 1.4, ease: 'easeOut', repeat: Infinity }"
             >
-                <Motion
+                <component
+                    :is="isAnimated ? Motion : 'path'"
                     as="path"
                     d="M11.4 6C11.7314 6 12.0031 5.73069 11.97 5.40098C11.858 4.28448 11.4345 3.21734 10.7422 2.32414C9.92681 1.27227 8.78487 0.521339 7.49603 0.189501C6.20719 -0.142337 4.84459 -0.0362459 3.62264 0.491083C2.40069 1.01841 1.38875 1.93705 0.746034 3.10244C0.103318 4.26784 -0.133688 5.61385 0.0723077 6.92869C0.278303 8.24353 0.915607 9.45256 1.88394 10.3656C2.85228 11.2786 4.09668 11.8437 5.42136 11.972C6.5462 12.081 7.67471 11.8698 8.67877 11.3688C8.97528 11.2209 9.05806 10.8474 8.88125 10.5671C8.70444 10.2868 8.3351 10.2068 8.03498 10.3473C7.25926 10.7104 6.39684 10.8609 5.53709 10.7776C4.47735 10.6749 3.48182 10.2228 2.70715 9.49244C1.93249 8.76205 1.42264 7.79482 1.25785 6.74295C1.09305 5.69108 1.28265 4.61427 1.79683 3.68195C2.311 2.74964 3.12055 2.01473 4.09811 1.59287C5.07567 1.171 6.16575 1.08613 7.19682 1.3516C8.2279 1.61707 9.14145 2.21782 9.79373 3.05932C10.3229 3.74201 10.6558 4.55173 10.7626 5.40155C10.8039 5.73033 11.0686 6 11.4 6Z"
                     fill="currentColor"
@@ -208,7 +223,8 @@ const colorValue = computed(() => {
                     :animate="{ rotate: [0, 360] }"
                     :transition="{ duration: 0.7, ease: 'easeOut', repeat: Infinity, repeatDelay: 0.1 }"
                 />
-                <Motion
+                <component
+                    :is="isAnimated ? Motion : 'rect'"
                     as="rect"
                     x="5.25"
                     y="3"
@@ -227,17 +243,20 @@ const colorValue = computed(() => {
                     r="0.875"
                     fill="currentColor"
                 />
-            </Motion>
+            </component>
         </template>
 
         <template v-if="name === 'check-dashed'">
-            <Motion as="g" clip-path="url(#clip0_5125_104)" tabindex="-1" :animate="{ opacity: [0.4, 1] }" :transition="{ duration: 0.3, ease: [0.645, 0.045, 0.355, 1] }">
+            <component
+                :is="isAnimated ? Motion : 'g'" as="g" clip-path="url(#clip0_5125_104)" tabindex="-1" :animate="{ opacity: [0.4, 1] }" :transition="{ duration: 0.3, ease: [0.645, 0.045, 0.355, 1] }"
+            >
                 <path d="M12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6ZM1.2 6C1.2 8.65097 3.34903 10.8 6 10.8C8.65097 10.8 10.8 8.65097 10.8 6C10.8 3.34903 8.65097 1.2 6 1.2C3.34903 1.2 1.2 3.34903 1.2 6Z" fill="currentColor" />
                 <rect x="5.25" width="1.5" height="12" fill="#F0FDF6" />
                 <rect x="12" y="5.25" width="1.5" height="12" transform="rotate(90 12 5.25)" fill="#F0FDF6" />
                 <rect x="10.773" y="9.71228" width="1.5" height="12" transform="rotate(135 10.773 9.71228)" fill="#F0FDF6" />
                 <rect x="2.28769" y="10.7729" width="1.5" height="12" transform="rotate(-135 2.28769 10.7729)" fill="#F0FDF6" />
-                <Motion
+                <component
+                    :is="isAnimated ? Motion : 'path'"
                     as="path"
                     d="M3.5 6 L5.5 8 L8.5 4"
                     stroke="currentColor"
@@ -250,7 +269,7 @@ const colorValue = computed(() => {
                     :style="{ rotate: 4, scale: 0.85 }"
                     :transition="{ duration: 0.3, ease: [0.645, 0.045, 0.355, 1] }"
                 />
-            </Motion>
+            </component>
             <defs>
                 <clipPath id="clip0_5125_104">
                     <rect width="12" height="12" fill="white" />
@@ -275,7 +294,8 @@ const colorValue = computed(() => {
 
         <template v-if="name === 'arrow-down'">
             <path d="M12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6ZM1.2 6C1.2 8.65097 3.34903 10.8 6 10.8C8.65097 10.8 10.8 8.65097 10.8 6C10.8 3.34903 8.65097 1.2 6 1.2C3.34903 1.2 1.2 3.34903 1.2 6Z" fill="#A3A3A3" />
-            <Motion
+            <component
+                :is="isAnimated ? Motion : 'path'"
                 as="path"
                 d="M6 4V8M6 8L7.75 6.53682M6 8L4.25 6.53682"
                 stroke="currentColor"

package/components/tela/input/tela-input.vue

@@ -138,7 +138,7 @@ defineExpose({
             @click="$el.querySelector(isTextarea ? 'textarea' : 'input')?.focus()"
         >
             <div v-if="icon" flex mr-6px>
-                <TelaIcon :name="icon" size="sm" text="gray-600" />
+                <TelaIcon :name="icon" size="sm" text="gray-400" />
             </div>
             <div
                 flex="~ col" grow align-center h-full

package/components/tela/modal/modal.vue

@@ -183,7 +183,15 @@ function handlePointerDownOutside(event: any) {
   background-color: rgba(2, 9, 19, 0.24);
   position: fixed;
   inset: 0;
-  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+
+  &[data-state="open"] {
+     animation: overlayShow 0.12s ease-out forwards;
+  }
+
+  &[data-state="closed"] {
+     animation: overlayHide 0.12s ease-out forwards;
+     animation-delay: 0s;
+  }
 }
 
 .DialogContent {
@@ -191,7 +199,15 @@ function handlePointerDownOutside(event: any) {
   overflow-x: hidden;
   width: 400px;
   padding: 24px;
-  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+
+  &[data-state="open"] {
+     animation: contentShow 0.12s ease-out forwards;
+  }
+
+  &[data-state="closed"] {
+     animation: contentHide 0.12s ease-out forwards;
+     animation-delay: 0s;
+  }
 }
 
 .DialogContent:focus {
@@ -229,6 +245,15 @@ function handlePointerDownOutside(event: any) {
   }
 }
 
+@keyframes overlayHide {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
 @keyframes contentShow {
   from {
     opacity: 0;
@@ -239,4 +264,15 @@ function handlePointerDownOutside(event: any) {
     transform: scale(1);
   }
 }
+
+@keyframes contentHide {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
 </style>

package/components/tela/scroll-area/scroll-area.vue

@@ -10,7 +10,13 @@ import { computed } from 'vue'
 import type { HTMLAttributes } from 'vue'
 import ScrollBar from './scroll-bar.vue'
 
-const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()
+const props = withDefaults(
+    defineProps<ScrollAreaRootProps
+    & { class?: HTMLAttributes['class'], orientation?: 'vertical' | 'horizontal' | 'both' }>(),
+    {
+        orientation: 'vertical',
+    },
+)
 
 const delegatedProps = computed(() => {
     const { class: _, ...delegated } = props
@@ -24,7 +30,8 @@ const delegatedProps = computed(() => {
         <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
             <slot />
         </ScrollAreaViewport>
-        <ScrollBar />
+        <ScrollBar v-if="props.orientation === 'vertical' || props.orientation === 'both'" orientation="vertical" />
+        <ScrollBar v-if="props.orientation === 'horizontal' || props.orientation === 'both'" orientation="horizontal" />
         <ScrollAreaCorner />
     </ScrollAreaRoot>
 </template>

package/components/tela/segment-toggle.vue

@@ -28,7 +28,7 @@ function selectTab(value: string) {
 
 <template>
     <div
-        rounded-full flex items-center gap-2px select-none p-2px min-w-68px bg-gray-100
+        rounded-full flex items-center gap-2px select-none p-2px min-w-68px bg-gray-200
         :class="[
             props.size === 'small' ? 'min-h-24px' : 'min-h-28px',
             props.disabled && 'opacity-50 pointer-events-none cursor-not-allowed',

package/components/tela/status/status.mdx

@@ -21,6 +21,10 @@ A status component that displays different workflow and task statuses with appro
 
 <Canvas of={StatusStories.AnimatedTransitions} />
 
+### Without Icon Animation
+
+<Canvas of={StatusStories.WithoutIconAnimation} />
+
 ### Basic Usage
 
 ```vue
@@ -83,6 +87,7 @@ type Variant =
 type StatusProps = {
   variant?: Variant
   label?: string
+	isIconAnimated?: boolean
 }
 ```
 

package/components/tela/status/status.stories.ts

@@ -158,3 +158,15 @@ export const AnimatedTransitions: Story = {
         layout: 'centered',
     },
 }
+
+export const WithoutIconAnimation: Story = {
+    render: () => {
+        return {
+            components: { Status },
+            template: '<Status variant="pending-run" :is-icon-animated="false" />',
+        }
+    },
+    parameters: {
+        layout: 'centered',
+    },
+}

package/components/tela/status/status.vue

@@ -14,8 +14,10 @@ type StatusConfig = {
 const props = withDefaults(defineProps<{
     variant?: TelaStatusVariant
     label?: string
+    isIconAnimated?: boolean
 }>(), {
     variant: 'running',
+    isIconAnimated: true,
 })
 
 const variantConfig: Record<TelaStatusVariant, StatusConfig> = {
@@ -385,7 +387,7 @@ const SPRING_CONFIG = {
                         >
                             <div :class="cn('relative z-1 p-[2px]', backgroundColor)">
                                 <Motion :key="`icon-${iconName}`" v-bind="iconVariants()">
-                                    <TelaIconCustom :name="iconName" :color="iconColor" />
+                                    <TelaIconCustom :name="iconName" :color="iconColor" :is-animated="isIconAnimated" />
                                 </Motion>
                             </div>
                             <Motion
@@ -403,18 +405,3 @@ const SPRING_CONFIG = {
         </div>
     </MotionConfig>
 </template>
-
-<style scoped>
-.animate-shine {
-    animation: shine 6s 0.05s linear infinite;
-}
-
-@keyframes shine {
-    0% {
-        background-position: 350% 0;
-    }
-    100% {
-        background-position: -350% 0;
-    }
-}
-</style>

package/components/tela/todo-list/todo-list.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+interface Todo {
+    id: string
+    content: string
+    status: 'pending' | 'in_progress' | 'completed' | 'cancelled'
+}
+
+const props = withDefaults(defineProps<{
+    todos: Todo[]
+    title?: string
+    completedText?: string
+    showMoreText?: string
+    showLessText?: string
+    class?: HTMLAttributes['class']
+    contentClass?: HTMLAttributes['class']
+    footerClass?: HTMLAttributes['class']
+}>(), {
+    title: 'To-do-list',
+    completedText: 'completed',
+    showMoreText: 'Show more',
+    showLessText: 'Show less',
+})
+
+const isExpanded = ref(false)
+
+const contentMeasure = useTemplateRef<HTMLElement>('contentMeasure')
+const { height: heightContent } = useElementSize(contentMeasure)
+
+const computedHeightContent = computed(() => {
+    if (heightContent.value > 0) {
+        return `${heightContent.value}px`
+    }
+    return undefined
+})
+
+const completedCount = computed(() => props.todos.filter(t => t.status === 'completed').length)
+const completedPercent = computed(() => Math.round((completedCount.value / props.todos.length) * 100))
+
+const sortedTodos = computed(() => {
+    const order: Record<Todo['status'], number> = { in_progress: 0, completed: 1, pending: 2, cancelled: 3 }
+    const sorted = [...props.todos].sort((a, b) => order[a.status] - order[b.status])
+
+    if (!isExpanded.value && props.todos.length > 3) {
+        return sorted.slice(0, 3)
+    }
+
+    return sorted
+})
+
+function getIconName(status: Todo['status']) {
+    if (status === 'completed')
+        return 'check'
+
+    if (status === 'in_progress')
+        return 'circle-notch'
+
+    if (status === 'cancelled')
+        return 'close'
+
+    return 'circle'
+}
+
+function getIconColor(status: Todo['status']) {
+    if (status === 'completed')
+        return 'gray-700'
+
+    return 'neutral-400'
+}
+
+const showMoreTextWithCount = computed(() => {
+    const parts = props.showMoreText.split(' ')
+    const count = (props.todos.length - sortedTodos.value.length).toString()
+
+    return parts.join(` ${count} `)
+})
+</script>
+
+<template>
+    <div
+        px-12px pt-12px bg-background rounded-16px overflow-hidden
+        :class="cn(!isExpanded && todos.length <= 3 && 'pb-10px', props.class)"
+    >
+        <div
+            transition-height duration-200 ease-out
+            :style="computedHeightContent ? { height: computedHeightContent } : {}"
+        >
+            <div ref="contentMeasure">
+                <div flex="~ col" gap-10px :class="props.contentClass">
+                    <div flex items-center justify-between pl-4px pb-10px border-b-0.5px border>
+                        <h5 heading-h5-semibold text-primary>
+                            {{ $t('workflow.agent.tools.todoList') }}
+                        </h5>
+                        <p body-14-medium text-secondary>
+                            <TelaAnimatedNumber :value="completedPercent" />% {{ $t('workflow.agent.tools.completed') }}
+                        </p>
+                    </div>
+                    <div flex="~ col" gap-7px px-1px>
+                        <div v-for="todo in sortedTodos" :key="todo.id" relative flex items-center gap-8px py-1px>
+                            <TelaIconCustom :name="getIconName(todo.status)" :color="getIconColor(todo.status)" shrink-0 :is-animated="false" />
+                            <span
+                                body-14-medium truncate w="90%"
+                                :class="{
+                                    'text-primary': (todo.status === 'completed' || todo.status === 'in_progress'),
+                                    'text-tertiary': todo.status === 'pending',
+                                    'text-tertiary line-through': todo.status === 'cancelled',
+                                }"
+                            >
+                                {{ todo.content }}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div flex="~ col" :class="props.footerClass">
+            <button
+                v-if="todos.length > 3"
+                type="button"
+                relative z-10 items-center justify-center bg-background h-32px pb-4px mx--12px w="calc(100% + 24px)"
+                @click="isExpanded = !isExpanded"
+            >
+                <span body-12-semibold text-primary>
+                    {{ isExpanded ? props.showLessText : showMoreTextWithCount }}
+                </span>
+            </button>
+        </div>
+    </div>
+</template>

package/components/tela/tool-use-display/tool-use-display-details-modal.vue

@@ -0,0 +1,182 @@
+<script setup lang="ts">
+interface ToolUse {
+    name: string
+    input?: Record<string, any>
+    description?: string
+}
+
+interface ToolResult {
+    id: string
+    output: string
+    isError: boolean
+}
+
+interface ToolDetailsModalProps {
+    isOpen: boolean
+    toolUse: ToolUse
+    toolResult: ToolResult
+}
+
+const props = defineProps<ToolDetailsModalProps>()
+
+const emit = defineEmits<{
+    close: []
+}>()
+
+const expanded = reactive<Record<string, boolean>>({})
+
+const input = computed(() => {
+    return props.toolUse.input
+})
+
+function toggle(key: string) {
+    expanded[key] = !expanded[key]
+}
+
+function textForValue(value: any) {
+    if (typeof value === 'string')
+        return value
+    try {
+        return JSON.stringify(value, null, 2)
+    }
+    catch {
+        return String(value)
+    }
+}
+
+function needsToggle(value: any) {
+    return (textForValue(value) ?? '').length > 500
+}
+
+function closeDialog() {
+    emit('close')
+}
+
+function capitalize(string: string) {
+    return string.replace(/_/g, ' ').charAt(0).toUpperCase() + string.replace(/_/g, ' ').slice(1)
+}
+</script>
+
+<template>
+    <TelaModal
+        :model-value="isOpen"
+        compact
+        hide-dividers
+        :style="{
+            width: '480px',
+            maxHeight: '90vh',
+            overflow: 'hidden',
+            padding: '24px',
+        }"
+        :is-close-icon="false"
+        @close="closeDialog"
+    >
+        <div flex="~ col" w-full h-full gap-24px>
+            <!-- Header -->
+            <div flex="~ col">
+                <div flex="~ row justify-between" items-start>
+                    <h3 heading-h3-semibold text-primary>
+                        {{ toolUse.name === 'Grep' ? `${$t('workflow.codeExecution')} ·` : '' }} {{ toolUse.name }}
+                    </h3>
+                    <TelaIconButton
+                        icon="i-ph-x"
+                        size="md"
+                        color="secondary"
+                        outline-none
+                        p-8px mt--16px mr--16px
+                        @click="closeDialog"
+                    />
+                </div>
+                <p body-14-regular text-secondary mt-4px w="90%" class="[text-wrap:pretty]">
+                    {{ $t('dashboard.modals.toolDetailsModal.description') }}
+                </p>
+            </div>
+
+            <!-- Tool Input Parameters -->
+            <div flex="~ col" gap-20px>
+                <div v-if="input && Object.keys(input).length > 0" text-secondary flex="~ col" gap-20px>
+                    <div v-for="(value, key) in input" :key="key" flex="~ col" gap-6px>
+                        <span body-12-medium text-primary>{{ capitalize(key) }}</span>
+
+                        <div v-if="typeof value === 'string' || typeof value === 'boolean' || typeof value === 'number'" border-0.5px border-gray-200 rounded-10px pl-2 py-2>
+                            <TelaScrollArea>
+                                <div max-h-300px pr-4>
+                                    <pre v-if="typeof value === 'string'" body-12-regular font-mono whitespace-pre-wrap break-words overflow-wrap-anywhere m-0>{{ value }}</pre>
+                                    <span v-else-if="typeof value === 'boolean'" block body-12-regular font-mono>{{ value ? 'true' : 'false' }}</span>
+                                    <span v-else-if="typeof value === 'number'" block body-12-regular font-mono>{{ value }}</span>
+                                </div>
+                            </TelaScrollArea>
+                        </div>
+
+                        <!-- Array value -->
+                        <div v-else-if="Array.isArray(value)" flex="~ col" gap-4px>
+                            <span text-xs text-gray-500>
+                                {{ $t('reasoningSteps.itemsCount', { count: value.length }) }}
+                            </span>
+                            <div bg-gray-50 rounded-xl border-0.5px border-gray-200 p-3>
+                                <div v-for="(item, idx) in value" :key="idx" text-sm py-0.5>
+                                    <span text-gray-400 mr-2 font-mono>{{ idx }}:</span>
+                                    <span font-mono>{{ typeof item === 'string' ? item : JSON.stringify(item) }}</span>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Object value -->
+                        <div v-else-if="typeof value === 'object' && value !== null" flex="~ col" gap-4px>
+                            <span text-xs text-gray-500>
+                                {{ $t('reasoningSteps.propertiesCount', { count: Object.keys(value).length }) }}
+                            </span>
+                            <div bg-gray-50 rounded-xl border-0.5px border-gray-200 p-3>
+                                <div
+                                    :style="{ maxHeight: expanded[String(key)] ? 'none' : '400px', overflow: expanded[String(key)] ? 'visible' : 'hidden' }"
+                                    text-sm font-mono whitespace-pre-wrap break-words overflow-wrap-anywhere
+                                >
+                                    <pre m-0 break-words overflow-wrap-anywhere>{{ textForValue(value) }}</pre>
+                                </div>
+                                <div v-if="needsToggle(value)" mt-2 flex justify-center>
+                                    <button type="button" text-sm text-primary-600 hover:opacity-80 flex items-center gap-2 @click.prevent="toggle(String(key))">
+                                        {{ expanded[String(key)] ? $t('reasoningSteps.showLess') : $t('reasoningSteps.showMore') }}
+                                        <i class="i-ph-caret-down" :style="{ transform: expanded[String(key)] ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }" />
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Null value -->
+                        <div v-else-if="value === null" bg-gray-50 rounded-xl border-0.5px border-gray-200 p-3>
+                            <span text-sm font-mono text-gray-500>null</span>
+                        </div>
+
+                        <!-- Fallback for other types -->
+                        <div v-else bg-gray-50 rounded-xl border-0.5px border-gray-200 p-3>
+                            <div :style="{ maxHeight: expanded[String(key)] ? 'none' : '400px', overflow: expanded[String(key)] ? 'visible' : 'hidden' }">
+                                <pre text-sm font-mono>{{ textForValue(value) }}</pre>
+                            </div>
+                            <div v-if="needsToggle(value)" mt-2 flex justify-center>
+                                <button type="button" text-sm text-primary-600 hover:opacity-80 flex items-center gap-2 @click.prevent="toggle(String(key))">
+                                    {{ expanded[String(key)] ? $t('reasoningSteps.showLess') : $t('reasoningSteps.showMore') }}
+                                    <i class="i-ph-caret-down" :style="{ transform: expanded[String(key)] ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }" />
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div flex="~ col" gap-6px>
+                    <span body-12-medium text-primary>{{ $t('workflow.result') }}</span>
+                    <div v-if="toolResult" border-0.5px border-gray-200 rounded-10px pl-2 py-2>
+                        <TelaScrollArea>
+                            <div max-h-300px pr-4>
+                                <span block body-12-regular text-secondary font-mono>
+                                    {{ toolResult.output }}
+                                </span>
+                            </div>
+                        </TelaScrollArea>
+                    </div>
+                    <div v-else rounded-10px overflow-hidden>
+                        <TelaSkeleton w-full h-30px rounded-none bg-gray-200 />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </TelaModal>
+</template>

package/components/tela/tool-use-display/tool-use-display.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import ToolUseDisplayDetailsModal from './tool-use-display-details-modal.vue'
+
+interface ToolUse {
+    name: string
+    input?: Record<string, any>
+    description?: string
+}
+
+interface ToolResult {
+    id: string
+    output: string
+    isError: boolean
+}
+
+const props = withDefaults(defineProps<{
+    toolUse: ToolUse
+    toolResult: ToolResult
+    isRunning?: boolean
+    detailsButtonLabel?: string
+    toolRunningLabel?: string
+    toolExecutedLabel?: string
+    showMoreLabel?: string
+    showLessLabel?: string
+    codeExecutionLabel?: string
+    itemsLabel?: string
+    propertiesLabel?: string
+}>(), {
+    toolRunningLabel: 'Tool running',
+    toolExecutedLabel: 'Tool executed',
+    showMoreLabel: 'Show more',
+    showLessLabel: 'Show less',
+    codeExecutionLabel: 'Code execution',
+    detailsButtonLabel: 'Details',
+    itemsLabel: 'items',
+    propertiesLabel: 'properties',
+})
+
+const isToolDetailsModalOpen = ref(false)
+
+const input = computed(() => {
+    const rawInput = props.toolUse.input ?? {}
+
+    return Object.fromEntries(
+        Object.entries(rawInput).filter(([key]) => key !== 'description' && key !== 'content').slice(0, 1),
+    )
+})
+
+function textForValue(value: any) {
+    if (typeof value === 'string')
+        return value
+    try {
+        return JSON.stringify(value, null, 2)
+    }
+    catch {
+        return String(value)
+    }
+}
+
+function openDetailsModal() {
+    isToolDetailsModalOpen.value = true
+}
+
+function closeDetailsModal() {
+    isToolDetailsModalOpen.value = false
+}
+</script>
+
+<template>
+    <div v-if="isRunning || (input && Object.keys(input).length > 0)" px-14px py-12px bg-background rounded-16px>
+        <div pb-12px border-b-0.5px border>
+            <div flex items-center gap-6px>
+                <TelaIconCustom v-if="isRunning" name="circle-notch" size="12px" :is-animated="true" />
+                <TelaIconCustom v-else name="check" size="12px" :is-animated="false" />
+                <p body-12-regular text-black-700>
+                    {{ isRunning ? toolRunningLabel : toolExecutedLabel }}
+                </p>
+            </div>
+        </div>
+        <div v-if="input && Object.keys(input).length > 0" mt-12px>
+            <div v-for="(value, key) in input" :key="key" flex items-center gap-8px>
+                <div flex items-center justify-center shrink-0 w-24px h-24px bg-lowered rounded-7px>
+                    <TelaIcon name="i-ph-code-bold" color="gray-500" />
+                </div>
+
+                <div flex-1 min-w-0 flex items-center justify-between gap-8px>
+                    <div flex="~ col" min-w-0 flex-1>
+                        <p body-12-medium text-primary>
+                            {{ toolUse.name === 'Grep' ? `${codeExecutionLabel} ·` : '' }} {{ toolUse.name }}
+                        </p>
+
+                        <p v-if="typeof value === 'string'" body-12-regular text-secondary line-clamp-2>
+                            {{ value }}
+                        </p>
+
+                        <span v-else-if="typeof value === 'boolean'" block text-sm font-mono text-gray-700>
+                            {{ value ? 'true' : 'false' }}
+                        </span>
+
+                        <span v-else-if="typeof value === 'number'" block text-sm font-mono text-gray-700>
+                            {{ value }}
+                        </span>
+
+                        <div v-else-if="Array.isArray(value)">
+                            <div block text-xs text-gray-500 mb-1>
+                                {{ value.length }} {{ itemsLabel }}
+                            </div>
+                            <div bg-gray-50 rounded-xl border-0.5px border-gray-200 p-3>
+                                <div v-for="(item, idx) in value" :key="idx" text-sm text-gray-700 py-0.5>
+                                    <span text-gray-400 mr-2 font-mono>{{ idx }}:</span>
+                                    <span font-mono>{{ typeof item === 'string' ? item : JSON.stringify(item) }}</span>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div v-else-if="typeof value === 'object' && value !== null">
+                            <div block text-xs text-gray-500 mb-1>
+                                {{ Object.keys(value).length }} {{ propertiesLabel }}
+                            </div>
+                            <div bg-gray-50 rounded-xl border-0.5px border-gray-200 p-3>
+                                <pre text-sm text-gray-700 font-mono whitespace-pre-wrap break-words overflow-wrap-anywhere>{{ textForValue(value) }}</pre>
+                            </div>
+                        </div>
+
+                        <span v-else-if="value === null" block text-sm font-mono text-gray-700>null</span>
+
+                        <div v-else bg-gray-50 rounded-xl border-0.5px border-gray-200 p-3>
+                            <pre text-sm text-gray-700 font-mono>{{ textForValue(value) }}</pre>
+                        </div>
+                    </div>
+                    <TelaButton variant="secondary" size="sm" shrink-0 @click="openDetailsModal">
+                        {{ detailsButtonLabel }}
+                    </TelaButton>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <ToolUseDisplayDetailsModal
+        :is-open="isToolDetailsModalOpen"
+        :tool-use="toolUse"
+        :tool-result="toolResult"
+        @close="closeDetailsModal"
+    />
+</template>

package/css/text.css

@@ -20,3 +20,16 @@ h5 {
 h6 {
     --at-apply: 'text-h6 text-gray-950';
 }
+
+.animate-shine {
+	animation: shine 6s 0.05s linear infinite;
+}
+
+@keyframes shine {
+	0% {
+			background-position: 350% 0;
+	}
+	100% {
+			background-position: -350% 0;
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meistrari/tela-build",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module",
   "files": [
     "app.config.ts",