From 7403431d849c6d439be5281fce235b54444b3e64 Mon Sep 17 00:00:00 2001
From: Vincent Fiduccia <vincent@acorn.io>
Date: Mon, 12 Feb 2024 18:23:14 -0700
Subject: [PATCH 1/3] Use localTools to get tool options

Signed-off-by: Vincent Fiduccia <vincent@acorn.io>
---
 ui/pages/gpt/[...gpt].vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/ui/pages/gpt/[...gpt].vue b/ui/pages/gpt/[...gpt].vue
index fbb95e16..27ff85a4 100644
--- a/ui/pages/gpt/[...gpt].vue
+++ b/ui/pages/gpt/[...gpt].vue
@@ -31,18 +31,21 @@
   const args = ref<Args>({})
   const stringArg = ref('')
 
+  const entryTool = computed(() => {
+    return gpt.toolSet[gpt.entryToolId]
+  })
+
   const tool = computed(() => {
     return gpt.toolSet[toolNameToId(toolName.value)]
   })
 
   const toolOptions = computed((): SelectOption[] => {
-    const toolset = gpt.toolSet || []
     const out: SelectOption[] = []
 
-    for ( const t of Object.values(toolset) ) {
+    for ( const k in entryTool.value?.localTools || {} ) {
       out.push({
-        label: t.name || '<Default>',
-        value: t.name || ''
+        label: k || '<Default>',
+        value: k
       })
     }
 

From 2811bbb6267625e90a367686483cf947cdf28afb Mon Sep 17 00:00:00 2001
From: Vincent Fiduccia <vincent@acorn.io>
Date: Mon, 12 Feb 2024 19:59:09 -0700
Subject: [PATCH 2/3] Cmd-Enter to run

Signed-off-by: Vincent Fiduccia <vincent@acorn.io>
---
 ui/pages/gpt/[...gpt].vue | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/ui/pages/gpt/[...gpt].vue b/ui/pages/gpt/[...gpt].vue
index 27ff85a4..1639592a 100644
--- a/ui/pages/gpt/[...gpt].vue
+++ b/ui/pages/gpt/[...gpt].vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
   import { usePrefs } from '@/stores/prefs';
+  const { metaSymbol } = useShortcuts()
 
   const TOOL = 'tool'
 
@@ -65,6 +66,15 @@
     const obj = await useRuns().create(fileName, toolName.value, input, prefs.cache)
     navigateTo({name: 'run-run', params: {run: obj.id}} )
   }
+
+  defineShortcuts({
+    'meta_enter': {
+      usingInput: true,
+      handler: () => {
+        run()
+      }
+    }
+  })
 </script>
 
 <template>
@@ -97,6 +107,8 @@
     />
     <UTextarea
       v-else
+      :autofocus="true"
+      name="stringArg"
       v-model="stringArg"
       placeholder="Optional free-form input"
       class="mb-2"
@@ -104,7 +116,15 @@
 
     <div class="clearfix">
       <div class="float-left mt-2">
-        <UButton icon="i-heroicons-play-circle" label="Run GPTScript" @click="run" :disabled="argsForm && !argsForm.valid" />
+        <UTooltip>
+          <template #text>
+            {{metaSymbol}} + Enter
+          </template>
+
+          <UButton icon="i-heroicons-play-circle" @click="run" :disabled="argsForm && !argsForm.valid">
+            Run
+          </UButton>
+        </UTooltip>
       </div>
       <div class="float-right">
         <UFormGroup label="Cache" size="xs">

From c1b9845f13af9640b2ad5d4fc681d4cf8cab8b54 Mon Sep 17 00:00:00 2001
From: Vincent Fiduccia <vincent@acorn.io>
Date: Tue, 13 Feb 2024 01:01:09 -0700
Subject: [PATCH 3/3] Different threading, styles

Signed-off-by: Vincent Fiduccia <vincent@acorn.io>
---
 .vscode/launch.json         | 12 ++++-
 ui/app.config.ts            |  6 +++
 ui/app.vue                  | 25 +++--------
 ui/components/arguments.vue |  4 +-
 ui/components/call.vue      | 89 ++++++++++++++++++++++++++++---------
 ui/components/left-nav.vue  | 78 +++++++++++++++++++++-----------
 ui/components/message.vue   | 10 ++---
 ui/config/types.d.ts        |  5 ++-
 ui/pages/gpt/[...gpt].vue   | 40 ++++++++++-------
 ui/pages/run/[run].vue      | 40 +++++++++++++++--
 ui/stores/prefs.ts          |  2 +-
 ui/stores/socket.ts         |  4 +-
 ui/styles/_base.scss        |  4 ++
 13 files changed, 220 insertions(+), 99 deletions(-)

diff --git a/.vscode/launch.json b/.vscode/launch.json
index f6453535..cc84991c 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -5,7 +5,17 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "Launch file",
+      "name": "Launch UI",
+      "type": "node",
+      "request": "launch",
+      "program": "${workspaceFolder}/ui/node_modules/.bin/nuxt",
+      "args": ["dev"],
+      "skipFiles": [
+        "<node_internals>/**"
+      ]
+    },
+    {
+      "name": "Launch Server",
       "type": "go",
       "request": "launch",
       "mode": "debug",
diff --git a/ui/app.config.ts b/ui/app.config.ts
index 884a7b76..7317309c 100644
--- a/ui/app.config.ts
+++ b/ui/app.config.ts
@@ -2,5 +2,11 @@ export default defineAppConfig({
   ui: {
     primary: 'slate',
     gray: 'cool',
+
+    card: {
+      body: {
+        padding: 'px-1 py-1 sm:p-2'
+      }
+    }
   },
 })
diff --git a/ui/app.vue b/ui/app.vue
index cb24eaf3..ab1ee05b 100644
--- a/ui/app.vue
+++ b/ui/app.vue
@@ -1,17 +1,9 @@
 <script lang="ts" setup>
   import '@/styles/app.scss'
-
-  const sock = useSocket()
 </script>
 <template>
   <div class="root bg-slate-100 dark:bg-slate-950">
-    <nav class="bg-slate-200 dark:bg-slate-900">
-      <LeftNav />
-    </nav>
-    <aside class="bg-slate-200 dark:bg-slate-900">
-      <ThemeToggle />
-      {{sock.status}}
-    </aside>
+    <LeftNav class="left-nav bg-slate-200 dark:bg-slate-900"/>
     <main>
       <NuxtPage />
     </main>
@@ -21,27 +13,20 @@
 <style lang="scss" scoped>
   .root {
     --nav-width: 300px;
-    --aside-height: 50px;
 
     display: grid;
-    grid-template-areas: "nav main"
-                         "aside main";
+    grid-template-areas: "nav main";
     grid-template-columns: var(--nav-width) 1fr;
-    grid-template-rows: 1fr var(--aside-height);
+
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
 
-    NAV {
+    .left-nav {
       grid-area: nav;
-      overflow: auto;
-    }
-
-    ASIDE {
-      grid-area: aside;
-      line-height: var(--aside-height);
+      max-height: 100vh;
     }
 
     MAIN {
diff --git a/ui/components/arguments.vue b/ui/components/arguments.vue
index 42e66845..a064d003 100644
--- a/ui/components/arguments.vue
+++ b/ui/components/arguments.vue
@@ -6,7 +6,7 @@ interface Props {
 
 const { schema, modelValue: initialState } = defineProps<Props>()
 const form = ref()
-const state = reactive(clone(initialState || {}))
+const state = reactive<any>(clone(initialState || {}))
 
 if ( schema ) {
   for ( const k in schema.properties ) {
@@ -70,7 +70,7 @@ watchEffect(() => {
         </UFormGroup>
       </template>
       <template v-else>
-          <UTextarea autoresize :rows="1" :value="state[k]" @update:modelValue="(v) => state[k] = v" />
+          <UTextarea autoresize :rows="1" :value="state" @update:modelValue="(v) => state = v" />
       </template>
     </UForm>
   </div>
diff --git a/ui/components/call.vue b/ui/components/call.vue
index 83067e0b..32a45953 100644
--- a/ui/components/call.vue
+++ b/ui/components/call.vue
@@ -11,12 +11,28 @@ interface Props {
 const { run, call, referredTo, callMap, depth=0 } = defineProps<Props>()
 const prefs = usePrefs()
 
+const isExpanded = computed(() => {
+  return prefs.allExpanded ||  prefs.expanded[call.id] || false
+})
+
 const children = computed(() => {
-  return run.calls.filter(x => !referredTo[x.id] && x.parentID && x.parentID === call.id)
+  return run.calls.filter(x => (!isExpanded.value || !call.showSystemMessages || !referredTo[x.id]) && x.parentID && x.parentID === call.id)
 })
 
-const isExpanded = computed(() => {
-  return prefs.allExpanded ||  prefs.expanded[call.id] || false
+const messages = computed(() => {
+  const all = call.messages || []
+
+  if ( call.showSystemMessages ) {
+    return all.slice()
+  } else {
+    return all.filter((msg) => {
+      if ( ('role' in msg) ) {
+        return false
+      }
+
+      return true
+    })
+  }
 })
 
 const icon = computed(() => {
@@ -54,38 +70,71 @@ const displayName = computed(() => {
 
   return id.replace(/:1$/,'')
 })
+
+const inputLimit = 50
+const outputLimit = 100
+const inputDisplay = computed(() => {
+  return `${call.input || '<none>'}`
+})
+
+const inputShort = computed(() => {
+  return inputDisplay.value.substring(0, inputLimit) + (inputTruncated.value ? '…' : '')
+})
+
+const inputTruncated = computed(() => {
+  return inputDisplay.value.length > inputLimit
+})
+
+const outputDisplay = computed(() => {
+  return `${call.output || '<none>'}`
+})
+
+const outputShort = computed(() => {
+  return outputDisplay.value.substring(0, outputLimit) + (outputTruncated.value ? '…' : '')
+})
+
+const outputTruncated = computed(() => {
+  return outputDisplay.value.length > outputLimit
+})
+
 </script>
 <template>
-  <UCard :key="call.id" class="call">
+  <UCard :key="call.id" class="call mt-3">
     <i v-if="prefs.debug" class="text-blue-400">{{call}}</i>
-    <div class="clearfix">
-      <div class="float-left">
+    <div class="flex" :class="[isExpanded && 'mb-2']">
+      <div class="flex-1">
         <div>
-          <UButton v-if="children.length || call.messages?.length" size="xs" :icon="icon" @click="toggle" class="align-baseline"/>
+          <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>
         </div>
       </div>
-      <div class="float-right">
-        <UBadge class="align-baseline mr-2" :id="call.id">
+      <div class="flex-inline text-right">
+        <UTooltip v-if="isExpanded" :text="call.showSystemMessages ? 'Internal messages shown' : 'Internal messages hidden'">
+          <UToggle v-model="call.showSystemMessages" class="mr-2" off-icon="i-heroicons-bars-2" on-icon="i-heroicons-bars-4" />
+        </UTooltip>
+
+        <!-- <UBadge size="md" class="align-baseline mr-2" :id="call.id" variant="subtle">
           <i class="i-heroicons-key"/>&nbsp;{{ prefs.mapCall(call.id) }}
-        </UBadge>
-        <UBadge :color="colorForState(call.state)" class="align-baseline">
+        </UBadge> -->
+        <UBadge size="md" :color="colorForState(call.state)" class="align-baseline" variant="subtle">
           <i :class="iconForState(call.state)"/>&nbsp;{{ucFirst(call.state)}}
         </UBadge>
       </div>
     </div>
-    <div>
-      <b>Input:</b> {{call.input || '<none>'}}
+
+    <div v-if="isExpanded">
+      <b>Input:</b> <span class="whitespace-pre-wrap">{{call.input || '<none>'}}</span>
     </div>
-    <div>
-      <b>Output:</b> <span v-html="nlToBr(call.output || '<none>')"/>
+    <div v-if="isExpanded">
+      <b>Output:</b> <span class="whitespace-pre-wrap">{{call.output || '<none>'}}</span>
     </div>
 
-    <template v-if="isExpanded && call.messages?.length">
+    <template v-if="isExpanded">
       <Message
-        v-for="(msg, idx) in call.messages"
+        v-for="(msg, idx) in messages"
         :key="idx"
-        class="my-2"
+        class="mt-1"
         :run="run"
         :call="call"
         :msg="msg"
@@ -95,9 +144,7 @@ const displayName = computed(() => {
       />
     </template>
 
-    <div v-if="isExpanded && children.length" class="ml-5">
-      CHILDREN
-      {{referredTo}}
+    <div v-if="children.length" class="ml-9">
       <Call
         v-for="(child, idx) in children"
         :key="idx"
diff --git a/ui/components/left-nav.vue b/ui/components/left-nav.vue
index 84290689..ce4fb657 100644
--- a/ui/components/left-nav.vue
+++ b/ui/components/left-nav.vue
@@ -2,6 +2,7 @@
 // const router = useRouter()
 const gptList = await useGpts().listAll()
 const runList = await useRuns().findAll()
+const sock = useSocket()
 
 const gptLinks = computed(() => {
   return (gptList || []).map(x => { return {
@@ -13,12 +14,13 @@ const gptLinks = computed(() => {
 
 const runLinks = computed(() => {
   const out = (runList || []).map(x => { return {
-    label: x.id,
+    id: x.id,
+    label: (x.program?.name || '') + ' #' + x.id,
     icon: iconForState(x.state), // 'i-heroicons-cog animate-spin', // iconForState(x.state),
     to: `/run/${encodeURIComponent(x.id)}`
   }})
 
-  return sortBy(out, 'label:desc')
+  return sortBy(out, 'id:desc')
 })
 
 async function remove(e: MouseEvent, id: any) {
@@ -28,37 +30,61 @@ async function remove(e: MouseEvent, id: any) {
 </script>
 
 <template>
-  <div class="mt-5">
-    <h4>GPTScripts</h4>
-    <UVerticalNavigation :links="gptLinks" />
+  <nav class="left">
+    <div class="scripts text-slate-700 dark:text-slate-400">
+      <h4 class="header px-3 py-2 bg-slate-300 dark:bg-slate-800">GPTScripts</h4>
+      <UVerticalNavigation :links="gptLinks" />
+    </div>
 
-    <h4 class="mt-5">
-      Runs
-    </h4>
-    <UVerticalNavigation :links="runLinks">
-      <template #badge="{ link }">
-        <UButton
-          class="absolute right-2 delete-btn"
-          icon="i-heroicons-trash"
-          aria-label="Delete"
-          @click="e => remove(e, link.id)"
-          size="xs"
-        />
-      </template>
-    </UVerticalNavigation>
-  </div>
+    <div class="runs text-slate-700 dark:text-slate-400">
+      <h4 class="header px-3 py-2 bg-slate-300 dark:bg-slate-800">Run History</h4>
+      <UVerticalNavigation :links="runLinks">
+        <template #badge="{ link }">
+          <UButton
+            class="absolute right-2 delete-btn"
+            icon="i-heroicons-trash"
+            aria-label="Delete"
+            @click="e => remove(e, link.id)"
+            size="xs"
+          />
+        </template>
+      </UVerticalNavigation>
+    </div>
+
+    <aside class="px-2 flex">
+      <div class="flex-1 mt-1">
+        <ThemeToggle />
+      </div>
+      <div class="flex-initial text-right" v-if="sock.sock.status !== 'OPEN'">
+        <UBadge color="red" class="mt-2">
+          <i class="i-heroicons-bolt-slash"/>&nbsp;{{ucFirst(sock.sock.status.toLowerCase())}}
+        </UBadge>
+      </div>
+    </aside>
+  </nav>
 </template>
 
 <style lang="scss" scoped>
-  H4 {
-    padding-left: 1rem;
+  $aside-height: 45px;
+
+  .left {
+    display: grid;
+    grid-template-areas: "scripts" "runs" "aside";
+    grid-template-rows: 1fr 1fr $aside-height;
+    height: 100%;
   }
 
-  LI {
-    display: block;
+  .scripts {
+    grid-area: scripts;
+    overflow-y: auto;
   }
-  .active {
-    background-color: red;
+
+  .runs {
+    grid-area: runs;
+    overflow-y: auto;
+  }
+
+  ASIDE {
   }
 
   .delete-btn {
diff --git a/ui/components/message.vue b/ui/components/message.vue
index 574c1a02..61bbb177 100644
--- a/ui/components/message.vue
+++ b/ui/components/message.vue
@@ -25,20 +25,20 @@ const { run, /*call,*/ msg, referredTo, depth=0 } = defineProps<Props>()
       v-else-if="'err' in msg"
       icon="i-heroicons-exclamation-triangle"
       color="red"
-      class="my-5"
+      class="my-2"
       title="Error"
       variant="solid"
       :description="msg.err"
     />
     <template v-else>
-      <UCard v-if="typeof msg.content === 'string'" class="mb-5">
-        <b>{{ucFirst(msg.role)}}:</b>
-        {{msg.content}}
+      <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>
       </UCard>
       <template v-else>
         <UCard v-for="(c, idx) in msg.content" :key="idx">
           <template v-if="'text' in c">
-            <b>{{ucFirst(msg.role)}}:</b>
+            <b>{{ucFirst(msg.role)}}:&nbsp;</b>
             {{c.text}}
           </template>
           <template v-else>
diff --git a/ui/config/types.d.ts b/ui/config/types.d.ts
index 31bbd063..13e00947 100644
--- a/ui/config/types.d.ts
+++ b/ui/config/types.d.ts
@@ -10,6 +10,7 @@ declare global {
   }
 
   interface Gpt {
+    name: string
     entryToolId: string
     toolSet: Record<string, Tool>
   }
@@ -35,6 +36,7 @@ declare global {
     arguments: ArgSchema
     instructions: string
     tools: string[]
+    localTools: Record<string,string>
     toolMapping: Record<string,string>
     modelName: string
     source: {
@@ -64,6 +66,7 @@ declare global {
     chatRequest?: JsonDict
     input?: Args
     output?: string
+    showSystemMessages?: boolean
   }
 
   interface BaseFrame {
@@ -145,7 +148,7 @@ declare global {
   }
 
   interface ChatToolMessage {
-    role: "system"|"assistant"|"user"
+    role: "system"|"assistant"|"user"|"tool"
     content: string | (ChatToolCall|ChatText)[]
   }
 
diff --git a/ui/pages/gpt/[...gpt].vue b/ui/pages/gpt/[...gpt].vue
index 1639592a..e80d0f84 100644
--- a/ui/pages/gpt/[...gpt].vue
+++ b/ui/pages/gpt/[...gpt].vue
@@ -3,24 +3,29 @@
   const { metaSymbol } = useShortcuts()
 
   const TOOL = 'tool'
+  const INPUT = 'input'
 
   const route = useRoute()
   const argsForm = ref()
   const prefs = usePrefs()
 
-  let fileName = route.params.gpt.join('/')
+  let fileName = isArray(route.params.gpt) ? route.params.gpt.join('/') : route.params.gpt.replace(/%3f/ig,'/')
   const gpt = await useGpts().find(fileName)
 
+  const entryTool = computed(() => {
+    return gpt.toolSet[gpt.entryToolId]
+  })
+
   function toolIdToName(id: string) {
-    return gpt.toolSet?.[id]?.name || ''
-  }
+    const locals = entryTool.value.localTools
 
-  function toolNameToId(name?: string) {
-    if ( !name ) {
-      return gpt.entryToolId || ''
+    for ( const name in locals ) {
+      if ( locals[name] === id ) {
+        return name
+      }
     }
 
-    return Object.values(gpt.toolSet||{}).find(x => x.name === name)?.id || ''
+    return ''
   }
 
   const toolName = ref(route.query[TOOL] || toolIdToName(gpt.entryToolId) || '')
@@ -29,15 +34,18 @@
     navigateTo({query: {[TOOL]: neu || undefined }})
   })
 
+  let initialArg = fromArray(route.query[INPUT]) || ''
   const args = ref<Args>({})
-  const stringArg = ref('')
-
-  const entryTool = computed(() => {
-    return gpt.toolSet[gpt.entryToolId]
-  })
+  const stringArg = ref(initialArg)
+  try {
+    const parsed = JSON.parse(initialArg)
+    args.value = parsed
+  } catch (e) {
+  }
 
   const tool = computed(() => {
-    return gpt.toolSet[toolNameToId(toolName.value)]
+    const id = entryTool.value.localTools[toolName.value] || ''
+    return gpt.toolSet[id]
   })
 
   const toolOptions = computed((): SelectOption[] => {
@@ -79,14 +87,14 @@
 
 <template>
   <div v-if="tool">
-    <div class="clearfix">
-      <div class="float-left">
+    <div class="flex">
+      <div class="flex-1">
         <h1 class="text-xl py-1">
           <i class="i-heroicons-wrench-screwdriver mr-2 align-middle"/>{{fileName}}
           <span v-if="toolName">: {{toolName}}</span>
         </h1>
       </div>
-      <div class="float-right mt-1">
+      <div class="flex-initial text-right">
         <USelect
           v-if="toolOptions.length > 1"
           v-model="toolName" :options="toolOptions" value-attribute="value"
diff --git a/ui/pages/run/[run].vue b/ui/pages/run/[run].vue
index 2f1dfd11..faa538cf 100644
--- a/ui/pages/run/[run].vue
+++ b/ui/pages/run/[run].vue
@@ -16,6 +16,8 @@
 
   const run = (await useRuns().find(id))!
 
+  window.run = run
+
   const callMap = reactive<Record<string, Call>>({})
   const referredTo = reactive<MapBool>({})
 
@@ -65,6 +67,36 @@
       prefs.expandAll(Object.keys(callMap))
     }
   }
+
+  function edit() {
+    const p = run.program!
+
+    if (!p?.name || !p?.toolSet ) {
+      return
+    }
+
+    const gpt = p.name
+    const tools = p.toolSet[p.entryToolId].localTools
+    let tool = ''
+    let input = run.calls?.[0]?.input
+
+    for ( const k in tools ) {
+      if ( tools[k] === p.entryToolId ) {
+        tool = k
+      }
+    }
+
+    navigateTo({
+      name: 'gpt-gpt',
+      params: {
+        gpt,
+      },
+      query: {
+        tool,
+        input,
+      },
+    })
+  }
 </script>
 
 <template>
@@ -83,8 +115,10 @@
           @click="toggleAll()"
         />
 
-        <UBadge :color="colorForState(run.state)" size="lg" class="align-top ml-5">
-          <i :class="iconForState(run.state)"/> {{ucFirst(run.state)}}
+        <UButton size="sm" icon="i-heroicons-pencil" label="Edit" @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)}}
         </UBadge>
       </div>
     </div>
@@ -93,7 +127,7 @@
       v-if="run?.err"
       icon="i-heroicons-exclamation-triangle"
       color="red"
-      class="my-5"
+      class="my-2"
       title="Error"
       variant="solid"
       :description="run.err"
diff --git a/ui/stores/prefs.ts b/ui/stores/prefs.ts
index d852b43f..c9176219 100644
--- a/ui/stores/prefs.ts
+++ b/ui/stores/prefs.ts
@@ -51,7 +51,7 @@ export const usePrefs = defineStore('prefs', {
 
     mapCall(id: string) {
       if ( !this.callMap[id] ) {
-        const k = 'c_' + this.nextCall++
+        const k = 'call_' + this.nextCall++
         this.callMap[id] = k
       }
 
diff --git a/ui/stores/socket.ts b/ui/stores/socket.ts
index 0d375f23..96f6a643 100644
--- a/ui/stores/socket.ts
+++ b/ui/stores/socket.ts
@@ -104,11 +104,9 @@ export const useSocket = defineStore('socket', {
           run.calls.push(call)
         }
 
-        console.log('Call frame', call)
-
         if ( f.type === 'callStart' ) {
           call.state = 'creating'
-          call.input = f.input || ''
+          call.input = f.content || ''
         } else if ( f.type === 'callChat' ) {
           call.state = 'running'
 
diff --git a/ui/styles/_base.scss b/ui/styles/_base.scss
index 5630f79d..b193167f 100644
--- a/ui/styles/_base.scss
+++ b/ui/styles/_base.scss
@@ -1,3 +1,7 @@
+.text-bold {
+  font-weight: bold;
+}
+
 .clearfix {
   overflow: auto;