Show run output

Signed-off-by: Vincent Fiduccia <[email protected]>

Author: vincent99

ui/components/call.vue

@@ -105,8 +105,7 @@ const outputTruncated = computed(() => {
       <div class="flex-1">
         <div>
           <UButton v-if="children.length || call.messages?.length || inputTruncated || outputTruncated" size="xs" :icon="icon" @click="toggle" class="align-baseline mr-1"/>
-          {{displayName}}
-          <template v-if="!isExpanded">({{inputShort}}) <i class="i-heroicons-arrow-right align-text-bottom"/> {{outputShort}}</template>
+          {{displayName}}<template v-if="!isExpanded">({{inputShort}}) <i class="i-heroicons-arrow-right align-text-bottom"/> {{outputShort}}</template>
         </div>
       </div>
       <div class="flex-inline text-right">
@@ -124,10 +123,10 @@ const outputTruncated = computed(() => {
     </div>
 
     <div v-if="isExpanded">
-      <b>Input:</b> <span class="whitespace-pre-wrap">{{call.input || '<none>'}}</span>
+      <b>Input:&nbsp;</b><Content v-model="call.input"/>
     </div>
     <div v-if="isExpanded">
-      <b>Output:</b> <span class="whitespace-pre-wrap">{{call.output || '<none>'}}</span>
+      <b>Output:&nbsp;</b><Content v-model="call.output"/>
     </div>
 
     <template v-if="isExpanded">

ui/components/content.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+
+interface Props {
+  modelValue: any
+}
+
+const { modelValue } = defineProps<Props>()
+
+const content = computed(() => {
+  return `${modelValue}`.trim()
+})
+
+</script>
+
+<template>
+<span class="whitespace-pre-wrap">{{content || '<none>'}}</span>
+</template>

ui/components/message.vue

@@ -32,8 +32,7 @@ const { run, /*call,*/ msg, referredTo, depth=0 } = defineProps<Props>()
     />
     <template v-else>
       <UCard v-if="typeof msg.content === 'string'" class="mt-2">
-        <b>{{ucFirst(msg.role)}}:&nbsp;</b>
-        <span class="whitespace-pre-wrap">{{`${msg.content}`.trim()}}</span>
+        <b>{{ucFirst(msg.role)}}:&nbsp;</b><Content v-model="msg.content" />
       </UCard>
       <template v-else>
         <UCard v-for="(c, idx) in msg.content" :key="idx">

ui/pages/run/[run].vue

@@ -16,8 +16,6 @@
 
   const run = (await useRuns().find(id))!
 
-  window.run = run
-
   const callMap = reactive<Record<string, Call>>({})
   const referredTo = reactive<MapBool>({})
 
@@ -104,7 +102,7 @@
     <div class="clearfix">
       <div class="float-left">
         <h1 class="text-xl">
-          Run: {{id}}
+          {{run.program?.name}} #{{id}}
         </h1>
       </div>
       <div class="float-right">
@@ -115,7 +113,7 @@
           @click="toggleAll()"
         />
 
-        <UButton size="sm" icon="i-heroicons-pencil" label="Edit" @click="edit" class="ml-2"/>
+        <UButton size="sm" icon="i-heroicons-pencil" label="Run Again…" @click="edit" class="ml-2"/>
 
         <UBadge :color="colorForState(run.state)" size="lg" class="align-top ml-2" variant="subtle">
           <i :class="iconForState(run.state)"/>&nbsp;{{ucFirst(run.state)}}
@@ -133,6 +131,11 @@
       :description="run.err"
     />
 
+    <UDivider class="my-4" />
+    <UCard>
+      <Content v-if="run.output || run.state === 'finished'" v-model="run.output"/>
+      <UProgress v-else class="p-2" animation="swing" />
+    </UCard>
 
     <UDivider class="my-4" />