From 5b2b7d22182f6f00139fa03be29c9f9a6875d140 Mon Sep 17 00:00:00 2001
From: Vincent Fiduccia <vincent@acorn.io>
Date: Mon, 18 Mar 2024 19:51:52 -0700
Subject: [PATCH] Stuff

---
 app.vue                           |  32 +--
 components/edit-assistant.vue     | 332 +++++++++++++++---------------
 components/file-input.vue         |   1 +
 components/left-nav.vue           |  31 ++-
 components/map-input.vue          | 169 +++++++++++++++
 components/messages.vue           |  48 ++++-
 components/nav-list.vue           |  36 ++--
 components/theme-toggle.vue       |   2 +-
 eslint.config.js                  |  44 ++--
 nuxt.config.ts                    |   2 +-
 package.json                      |   2 +
 pages/t/[thread].vue              |   2 +-
 pages/tools/create-url.vue        |  37 ++--
 server/routes/v1/threads/index.ts |   2 -
 server/routes/v1/tools/index.ts   |   5 +-
 stores/assistants.ts              |   2 +-
 utils/array.ts                    |  12 ++
 utils/string.ts                   |   9 +
 yarn.lock                         |  19 +-
 19 files changed, 523 insertions(+), 264 deletions(-)
 create mode 100644 components/map-input.vue

diff --git a/app.vue b/app.vue
index ceaeaaf8..b6a117ae 100644
--- a/app.vue
+++ b/app.vue
@@ -21,8 +21,8 @@ function toggle() {
 </script>
 
 <template>
-  <div ref="root" class="root bg-rubra-100 dark:bg-rubra-950">
-    <header class="flex bg-rubra-200 dark:bg-rubra-900 py-1 pl-4 pr-2.5">
+  <div ref="root" class="root bg-gray-50 dark:bg-gray-950">
+    <header class="flex bg-purple-700 dark:bg-purple-950 text-white py-1 pl-4 pr-2.5">
       <div class="flex-initial">
         <nuxt-link :to="{ name: 'index' }">
           <img src="~/assets/logo.svg" class="h-10 my-1">
@@ -30,20 +30,20 @@ function toggle() {
       </div>
       <div class="flex-initial">
         <nuxt-link :to="{ name: 'index' }">
-          <img src="~/assets/logotype.svg" class="dark:invert" style="height: 30px; margin: 12px 0 8px 5px;">
+          <img src="~/assets/logotype.svg" class="invert" style="height: 30px; margin: 12px 0 8px 5px;">
         </nuxt-link>
       </div>
       <div class="flex-grow" />
+      <div class="flex-initial p-2">
+        <ThemeToggle />
+      </div>
       <div class="toggle flex-initial p-2">
         <UButton icon="i-heroicons-bars-3" @click="toggle" />
       </div>
     </header>
-    <nav class="bg-rubra-200 dark:bg-rubra-900">
+    <nav class="bg-purple-100 dark:bg-purple-900">
       <LeftNav />
     </nav>
-    <aside class="bg-rubra-200 dark:bg-rubra-900 text-right px-2">
-      <ThemeToggle />
-    </aside>
     <main>
       <NuxtPage />
     </main>
@@ -54,15 +54,13 @@ function toggle() {
 <style lang="scss" scoped>
   .root {
     --nav-width: 270px;
-    --aside-height: 50px;
-    --heder-height: 50px;
+    --header-height: 60px;
 
     display: grid;
-    grid-template-areas: "header main"
-                         "nav main"
-                         "aside main";
+    grid-template-areas: "header header"
+                         "nav main";
     grid-template-columns: var(--nav-width) 1fr;
-    grid-template-rows: var(--header-height) 1fr var(--aside-height);
+    grid-template-rows: var(--header-height) 1fr;
     position: absolute;
     top: 0;
     left: 0;
@@ -78,11 +76,6 @@ function toggle() {
       overflow: auto;
     }
 
-    ASIDE {
-      grid-area: aside;
-      line-height: var(--aside-height);
-    }
-
     MAIN {
       grid-area: main;
       overflow: auto;
@@ -102,9 +95,6 @@ function toggle() {
   // Mobile
   @media all and (max-width: 767px)  {
     .root {
-      grid-template-areas: "header header"
-                         "nav main"
-                         "aside main";
       grid-template-columns: 0 100%;
       transition: grid-template-columns 250ms;
 
diff --git a/components/edit-assistant.vue b/components/edit-assistant.vue
index 94d6f349..251dab96 100644
--- a/components/edit-assistant.vue
+++ b/components/edit-assistant.vue
@@ -1,194 +1,198 @@
 <script lang="ts" setup>
-  import { object, string, type InferType, array } from 'yup'
-  import type { FormSubmitEvent } from '#ui/types'
+import { type InferType, array, object, string } from 'yup'
+import type { FormSubmitEvent } from '#ui/types'
+
+interface Props {
+  id?: string
+}
+
+const { id } = defineProps<Props>()
+
+const assistants = useAssistants()
+const allFiles = await useFiles().findAll()
+const allModels = await useModels().findAll()
+const allTools = await useTools().findAll()
+
+let state = reactive({
+  name: '',
+  model: allModels.find(x => x.id === 'gpt-4') ? 'gpt-4' : allModels[0]?.id || '',
+  description: '',
+  instructions: '',
+  tools: [] as string[],
+  file_ids: [] as string[],
+  metadata: {} as Record<string, string>,
+})
+
+if (id)
+  state = JSON.parse(JSON.stringify(useAssistants().byId(id)))
+
+if (!state.description)
+  state.description = ''
+
+if (!state.tools)
+  state.tools = []
+
+if (!state.file_ids)
+  state.file_ids = []
+
+const schema = object({
+  name: string().required(),
+  model: string().required(),
+  description: string().optional(),
+  instructions: string().optional(),
+  tools: array(string()).optional(),
+  file_ids: array(string()).optional(),
+  metadata: object(),
+})
 
-  interface Props {
-    id?: string
-  }
-
-  const { id } = defineProps<Props>()
-
-  const assistants = useAssistants()
-  const allFiles = await useFiles().findAll()
-  const allModels = await useModels().findAll()
-  const allTools = await useTools().findAll()
-
-  let state = reactive({
-    name: '',
-    model: allModels.find(x => x.id === 'gpt-4') ? 'gpt-4' : allModels[0]?.id || '',
-    description: '',
-    instructions: '',
-    tools: <string[]>[],
-    file_ids: <string[]>[],
-    metadata: <Record<string,string>>{},
-  })
+  type Schema = InferType<typeof schema>
 
-  if ( id ) {
-    state = JSON.parse(JSON.stringify(useAssistants().byId(id)))
+const form = ref()
+const saving = ref(false)
+
+window.form = form
+window.state = state
+
+interface ToolOption {
+  label: string
+  value: string
+  index?: number
+  builtin?: boolean
+  gptscript?: boolean
+}
+
+const toolOptions = computed(() => {
+  const out: ToolOption[] = [
+    { index: 0, label: 'Internet Search (good for broad searches)', value: 'internet_search', builtin: true, gptscript: true },
+    { index: 1, label: 'Website Browsing (good for intranet sites)', value: 'site_browsing', builtin: true, gptscript: true },
+    { index: 2, label: 'Code Interpreter', value: 'code_interpreter', builtin: true, gptscript: false },
+  ]
+
+  for (const t of allTools) {
+    out.push({
+      label: t.name || t.id,
+      value: t.id,
+      builtin: false,
+    })
   }
 
-  if ( !state.description ) {
-    state.description = ''
-  }
+  out.sort((a, b) => {
+    if (a.builtin !== b.builtin)
+      return +(b.builtin || false) - +(a.builtin || false)
+    else if (a.index && b.index)
+      return (a.index || 0) - (b.index || 0)
 
-  if ( !state.tools ) {
-    state.tools = []
-  }
+    else
+      return a.label.localeCompare(b.label)
+  })
 
-  if ( !state.file_ids ) {
-    state.file_ids = []
-  }
+  return out
+})
 
-  const schema = object({
-    name: string().required(),
-    model: string().required(),
-    description: string().optional(),
-    instructions: string().optional(),
-    tools: array(string()).optional(),
-    file_ids: array(string()).optional(),
-    metadata: object(),
-  })
+const modelOptions = computed(() => {
+  return allModels.sort((a, b) => a.id.localeCompare(b.id))
+})
 
-  type Schema = InferType<typeof schema>
+async function go(e: FormSubmitEvent<Schema>) {
+  const body: any = { ...state }
 
-  const form = ref()
-  const saving = ref(false)
+  saving.value = true
 
-  window.form = form
-  window.state = state
+  const builtinTools: string[] = []
+  const gptScriptTools: string[] = []
 
-  interface ToolOption {
-    label: string
-    value: string
-    index?: number
-    builtin?: boolean
-    gptscript?: boolean
+  for (const t of body.tools) {
+    const entry = toolOptions.value.find(x => x.value === t)
+    if (entry && entry.builtin && !entry.gptscript)
+      builtinTools.push(t)
+    else
+      gptScriptTools.push(t)
   }
 
-  const toolOptions = computed(() => {
-    const out: ToolOption[] = [
-      {index: 0, label: 'Internet Search (good for broad searches)', value: 'internet_search', builtin: true, gptscript: true},
-      {index: 1, label: 'Website Browsing (good for intranet sites)', value: 'site_browsing', builtin: true, gptscript: true},
-      {index: 2, label: 'Retrieval', value: 'retrieval', builtin: true, gptscript: false},
-      {index: 3, label: 'Code Interpreter', value: 'code_interpreter', builtin: true, gptscript: false},
-    ]
-
-    for ( const t of allTools ) {
-      out.push({
-        label: t.name || t.id,
-        value: t.id,
-        builtin: false
-      })
-    }
-
-    out.sort((a, b) => {
-      if ( a.builtin !== b.builtin ) {
-        return +(b.builtin || false) - +(a.builtin || false)
-      } else if ( a.index && b.index ){
-        return (a.index||0) - (b.index||0)
-      } else {
-        return a.label.localeCompare(b.label)
-      }
-    })
-
-    return out
-  })
+  body.tools = builtinTools || []
+  body.gptscript_tools = gptScriptTools || []
 
-  const modelOptions = computed(() => {
-    return allModels.sort((a, b) => a.id.localeCompare(b.id))
-  })
+  try {
+    let res: any
 
-  async function go(e: FormSubmitEvent<Schema>) {
-    const body: any = {...state}
-
-    saving.value = true
-
-    const builtinTools: string[] = []
-    const gptScriptTools: string[] = []
-
-    for ( const t of body.tools ) {
-      const entry = toolOptions.value.find(x =>x.value === t)
-      if ( entry && entry.builtin && !entry.gptscript) {
-        builtinTools.push(t)
-      } else {
-        gptScriptTools.push(t)
-      }
-    }
-
-    body.tools = builtinTools || []
-    body.gptscript_tools = gptScriptTools || []
-
-    try {
-      let res: any
-
-      if ( id ) {
-        res = await assistants.update(id, body)
-      } else {
-        res = await assistants.create(body)
-      }
-      navigateTo({name: 'a-assistant', params: { assistant: res.id }})
-    } catch (e) {
-      useToast().add({
-        timeout: 0,
-        title: 'Error Saving Assistant',
-        description: `${e}`
-      })
-    } finally {
-      saving.value = false
-    }
-  }
+    if (id)
+      res = await assistants.update(id, body)
+    else
+      res = await assistants.create(body)
 
-  const files = useFiles()
-  const uploadWaiting = ref(false)
-
-  async function upload(f: {name: string, value: string}) {
-    uploadWaiting.value = true
-    try {
-      const file = await files.upload(f.name, f.value)
-      state.file_ids.push(file.id)
-    } catch (e) {
-      fileError(`${e}`)
-    } finally {
-      uploadWaiting.value = false
-    }
+    navigateTo({ name: 'a-assistant', params: { assistant: res.id } })
   }
-
-  function fileError(e: string) {
+  catch (e) {
     useToast().add({
       timeout: 0,
-      title: 'Error Uploading',
-      description: e
+      title: 'Error Saving Assistant',
+      description: `${e}`,
     })
   }
+  finally {
+    saving.value = false
+  }
+}
+
+const files = useFiles()
+const uploadWaiting = ref(false)
 
-  function onError(event: any) {
-    debugger
-    const element = document.getElementById(event.errors[0].id)
-    element?.focus()
-    element?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+async function upload(f: { name: string, value: string }) {
+  uploadWaiting.value = true
+  try {
+    const file = await files.upload(f.name, f.value)
+    state.file_ids.push(file.id)
+  }
+  catch (e) {
+    fileError(`${e}`)
   }
+  finally {
+    uploadWaiting.value = false
+  }
+}
+
+function fileError(e: string) {
+  useToast().add({
+    timeout: 0,
+    title: 'Error Uploading',
+    description: e,
+  })
+}
+
+function onError(event: any) {
+  debugger
+  const element = document.getElementById(event.errors[0].id)
+  element?.focus()
+  element?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+}
 </script>
 
 <template>
   <div class="p-5">
-    <h1 class="text-2xl">{{id ? 'Edit' : 'Create'}} Assistant</h1>
-    <UDivider class="my-2"/>
+    <h1 class="text-2xl">
+      {{ id ? 'Edit' : 'Create' }} Assistant
+    </h1>
+    <UDivider class="my-2" />
 
-    <UForm :schema="schema" :state="state" class="space-y-4" @submit="go" @error="onError" ref="form">
+    <UForm ref="form" :schema="schema" :state="state" class="space-y-4" @submit="go" @error="onError">
       <UFormGroup required label="Name">
         <UInput v-model="state.name" autofocus />
       </UFormGroup>
 
       <UFormGroup label="Description">
         <template #hint>
-          <UTooltip text="Shown to the user of the assistant"><UIcon name="i-heroicons-light-bulb"/></UTooltip>
+          <UTooltip text="Shown to the user of the assistant">
+            <UIcon class="text-lg" name="i-heroicons-question-mark-circle" />
+          </UTooltip>
         </template>
         <UTextarea v-model="state.description" autoresize />
       </UFormGroup>
 
       <UFormGroup required label="Instructions">
         <template #hint>
-          <UTooltip text="How the model should reply to messages"><UIcon name="i-heroicons-light-bulb"/></UTooltip>
+          <UTooltip text="How the model should reply to messages">
+            <UIcon class="text-lg" name="i-heroicons-question-mark-circle" />
+          </UTooltip>
         </template>
         <UTextarea v-model="state.instructions" autoresize />
       </UFormGroup>
@@ -219,9 +223,11 @@
                 :icon="false"
                 variant="link"
                 size="2xs"
-                @file="upload"
                 :waiting="uploadWaiting"
-                @error="fileError" />
+                class="p-0"
+                @file="upload"
+                @error="fileError"
+              />
             </template>
             <USelectMenu
               v-model="state.file_ids"
@@ -232,7 +238,7 @@
               value-attribute="id"
             >
               <template #label>
-                <span v-if="state.file_ids.length > 3" class="truncate">{{state.file_ids.length}} selected</span>
+                <span v-if="state.file_ids.length > 3" class="truncate">{{ state.file_ids.length }} selected</span>
                 <span v-else-if="state.file_ids.length" class="truncate">{{ state.file_ids.map(x => allFiles.find(y => y.id === x)?.filename).join(', ') }}</span>
                 <span v-else>No Files</span>
               </template>
@@ -241,14 +247,6 @@
         </div>
         <div>
           <UFormGroup label="Model">
-            <template #hint>
-              <UButton
-                size="2xs"
-                variant="link"
-                disabled
-                class="invisible"
-              >Hidden</UButton>
-            </template>
             <USelectMenu
               v-model="state.model"
               :options="modelOptions"
@@ -261,9 +259,15 @@
       </div>
 
       <UButton :loading="saving" type="submit">
-        <template v-if="saving">Saving…</template>
-        <template v-else-if="id">Save</template>
-        <template v-else>Create</template>
+        <template v-if="saving">
+          Saving…
+        </template>
+        <template v-else-if="id">
+          Save
+        </template>
+        <template v-else>
+          Create
+        </template>
       </UButton>
     </UForm>
   </div>
diff --git a/components/file-input.vue b/components/file-input.vue
index 85cb7c98..735c2eb9 100644
--- a/components/file-input.vue
+++ b/components/file-input.vue
@@ -73,6 +73,7 @@ async function getFileContents(file: File) {
         :variant="variant"
         :loading="waiting"
         :disabled="waiting"
+        v-bind="$attrs"
         @click="show"
       >
         <template v-if="waiting">Uploading…</template>
diff --git a/components/left-nav.vue b/components/left-nav.vue
index 38f589d8..bb326a85 100644
--- a/components/left-nav.vue
+++ b/components/left-nav.vue
@@ -11,18 +11,18 @@ const allAssistants = await assistants.findAll()
 const allThreads = await threads.findAll()
 
 const assistantLinks = computed(() => {
-  return allAssistants.sort((a, b) => {
+  return allAssistants.slice().sort((a, b) => {
     const aa = a.name?.toLocaleLowerCase() || ''
     const bb = b.name?.toLocaleLowerCase() || ''
 
     return aa.localeCompare(bb)
-  }).map((x) => {
+  }).map((x) => {
     return {
       label: x.name,
       icon: 'i-heroicons-sparkles',
       to: { name: 'a-assistant', params: { assistant: x.id } },
       id: x.id,
-    }
+    }
   })
 })
 
@@ -41,7 +41,7 @@ const assistantActions = [[
       await assistants.remove(link.id)
 
       if (router.currentRoute.value.name === 'a-assistant' || router.currentRoute.value.name.startsWith('a-assistant-'))
-        navigateTo('/')
+        navigateTo('/')
     },
   },
 ]]
@@ -89,19 +89,26 @@ interface ThreadLink {
 }
 
 const threadLinks = computed(() => {
-  const sorted = (allThreads || []).sort((a, b) => b.created_at - a.created_at)
+  const sorted = (allThreads || []).slice().sort((a, b) => b.created_at - a.created_at)
 
   const out: Record<string, ThreadLink[]> = {}
 
   for (const x of sorted) {
     const group = groupFor(x.created_at)
+    const assistantId = (x.metadata as any).assistantId || ''
+    let label = dayjs(x.created_at * 1000).local().format('h:mma').replace(/m$/, '')
+    const assistant = assistants.byId(assistantId)
+
+    if (assistant)
+      label = `${assistant.name} ${label}`
+
     if (!out[group])
       out[group] = []
 
     out[group].push({
       id: x.id,
       group,
-      label: x.id.split('_')[1].substring(0, 8),
+      label,
       icon: 'i-heroicons-chat-bubble-left',
       to: { name: 't-thread', params: { thread: x.id } },
     })
@@ -118,7 +125,7 @@ const threadActions = [[
       await threads.remove(link.id)
 
       if (router.currentRoute.value.name === 't-thread' && router.currentRoute.value.params.thread === link.id)
-        navigateTo('/')
+        navigateTo('/')
     },
   },
 ]]
@@ -126,8 +133,14 @@ const threadActions = [[
 
 <template>
   <div class="mt-2">
-    <h4 class="h-8 leading-8">
-      Assistants <UButton size="xs" class="float-right mr-2 align-middle" :to="{ name: 'a-create' }" icon="i-heroicons-plus" />
+    <h4 class="h-8 leading-8">
+      Assistants
+      <UButton
+        size="xs"
+        class="float-right mr-2 align-middle"
+        :to="{ name: 'a-create' }"
+        icon="i-heroicons-plus"
+      />
     </h4>
     <NavList :links="assistantLinks" :actions="assistantActions" class="mr-2.5" />
 
diff --git a/components/map-input.vue b/components/map-input.vue
new file mode 100644
index 00000000..fb70d111
--- /dev/null
+++ b/components/map-input.vue
@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import isEmpty from 'lodash-es/isEmpty.js'
+import isArray from 'lodash-es/isArray.js'
+import { splitLimit } from '@/utils/string'
+
+interface Props {
+  modelValue: Record<string, string> | string[]
+  keyLabel?: string
+  valueLabel?: string
+  addLabel?: string
+  addInitialRow?: boolean
+  showSeparator?: boolean
+  as?: 'map' | 'array'
+  separator?: string
+}
+
+const {
+  modelValue: initialValue,
+  as = 'map',
+  addInitialRow = false,
+  showSeparator = true,
+  keyLabel = 'Key',
+  valueLabel = 'Value',
+  addLabel = 'Add',
+  separator = '=',
+} = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: Record<string, string> | string[]): void
+}>()
+
+interface Entry {
+  key: string
+  value: string
+}
+
+const rows = reactive<Entry[]>([])
+
+if (isArray(initialValue)) {
+  for (const kv of initialValue || []) {
+    const [key, value] = splitLimit(kv, separator, 2)
+    rows.push({ key, value })
+  }
+}
+else {
+  for (const k in initialValue || {})
+    rows.push({ key: k, value: initialValue[k] })
+}
+
+if (addInitialRow && !rows.length)
+  rows.push({ key: '', value: '' })
+
+watchEffect(() => {
+  if (as === 'map') {
+    const out: Record<string, string> = {}
+
+    for (const row of rows) {
+      if (!isEmpty(row.key) && !isEmpty(row.value))
+        out[row.key] = row.value
+    }
+
+    emit('update:modelValue', out)
+  }
+  else {
+    const out: string[] = []
+
+    for (const row of rows) {
+      if (!isEmpty(row.key) && !isEmpty(row.value))
+        out.push(`${row.key}${separator}${row.value}`)
+    }
+
+    emit('update:modelValue', out)
+  }
+})
+
+function add() {
+  rows.push({ key: '', value: '' })
+}
+
+function remove(idx: number) {
+  removeAt(rows, idx)
+}
+
+function onPaste(idx: number, e: ClipboardEvent) {
+  const val = e.clipboardData?.getData('text') || ''
+
+  if (!val.includes(separator))
+    return
+
+  e.preventDefault()
+  e.stopPropagation()
+
+  const lines = val.split(/\r?\n/)
+
+  remove(idx)
+
+  for (const line of lines) {
+    const [key, value] = splitLimit(line, separator, 2)
+    rows.push({ key, value })
+  }
+
+  add()
+}
+</script>
+
+<template>
+  <div>
+    <table class="w-full" cellspacing="5" cellpadding="5">
+      <tr v-if="rows.length">
+        <td width="40%">
+          {{ keyLabel }}
+        </td>
+        <td v-if="showSeparator" width="30">
+          &nbsp;
+        </td><td>
+          {{ valueLabel }}
+        </td>
+        <td width="50" align="right">
+          &nbsp;
+        </td>
+      </tr>
+      <tr v-for="(entry, idx) in rows" :key="idx" :gutter="10" class="mb-10px">
+        <td class="key-col">
+          <UInput v-model="entry.key" autofocus @paste="(e) => onPaste(idx, e)" />
+        </td>
+        <td v-if="showSeparator" class="separator-col">
+          {{ separator }}
+        </td>
+        <td class="value-col">
+          <UInput v-model="entry.value" />
+        </td>
+        <td class="remove-col">
+          <UButton icon="i-heroicons-x-mark" @click="remove(idx)" />
+        </td>
+      </tr>
+      <tr>
+        <td colspan="3">
+          <UButton icon="i-heroicons-plus" @click="add">
+            {{ addLabel }}
+          </UButton>
+        </td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<style scoped lang="scss">
+  .key-col {
+    flex: 1 1 auto;
+    max-width: initial;
+  }
+
+  .value-col {
+    flex: 4 4 auto;
+    max-width: initial;
+  }
+
+  .remove-col, .separator-col {
+    flex: 0 0 min-content;
+    max-width: initial;
+  }
+
+  .remove-col {
+    text-align: right;
+  }
+  .separator-col {
+    text-align: center;
+  }
+</style>
diff --git a/components/messages.vue b/components/messages.vue
index 92098200..b2bdd107 100644
--- a/components/messages.vue
+++ b/components/messages.vue
@@ -20,7 +20,7 @@ const assistantName = computed(() => {
 
 <template>
   <div class="messages">
-    <div v-for="m in modelValue" :key="m.id" class="message" :class="[m.role]">
+    <div v-for="m in modelValue" :key="m.id" class="message shadow-md" :class="[m.role]">
       <div class="content">
         <template v-for="(c, idx) in m.content" :key="idx">
           <div v-if="c.type === 'text'" v-html="renderMarkdown(c.text.value)" />
@@ -92,14 +92,14 @@ const assistantName = computed(() => {
     &.user {
       grid-column: 1/ span 2;
 
-      background-color: #5676ff;
-      border: 1px solid #0c0eff;
+      background-color: rgba(#2563eb,0.8);
+      border: 1px solid rgba(#2563eb,0.2);
     }
 
     &.assistant {
       grid-column: 2/ span 2;
-      background-color: rgba(128, 128, 128, 0.1);
-      border: 1px solid rgba(128, 128, 128, 0.2);
+      background-color: rgba(#aaa, 0.1);
+      border: 1px solid rgba(#aaa, 0.2);
     }
 
     .date {
@@ -151,3 +151,41 @@ const assistantName = computed(() => {
     .dot:nth-child(3) { animation-delay:0.4s; }
   }
 </style>
+
+<style lang="scss">
+.footnotes-sep {
+  margin: 0.5rem 0;
+}
+
+.footnote-ref A {
+  text-decoration: none !important;
+}
+
+.footnotes-list {
+  .footnote-item {
+    font-size: 85%;
+
+    .footnote-backref {
+      display: none;
+    }
+
+    &:hover .footnote-backref {
+      display: initial;
+    }
+
+    SPAN {
+      margin-right: 5px;
+    }
+
+    P {
+      display: inline-block;
+    }
+  }
+}
+
+.footnote-ref A, .footnote-item {
+  &:target {
+    background-color: rgba(yellow, 0.5);
+  }
+}
+</style>
diff --git a/components/nav-list.vue b/components/nav-list.vue
index ef5e0b66..1ef562b5 100644
--- a/components/nav-list.vue
+++ b/components/nav-list.vue
@@ -15,27 +15,27 @@ const hasIcons = computed(() => {
   return !!links.find(x => !!x.icon)
 })
 
-function actionOptionsFor(idx: number) {
-  return computed(() => {
-    return (actions || []).map(y => y.map((x: NavAction) => {
-      return {
-        ...x,
-        click(e: Event) {
-          e.stopPropagation()
-          e.preventDefault()
-          x.click(e, links[idx], idx)
-          open[idx] = false
-        },
-      }
-    }))
-  })
+function actionOptionsFor(link: NavOption) {
+  return (actions || []).map(y => y.map((x: NavAction) => {
+    const idx = links.findIndex(x => x === link)
+
+    return {
+      ...x,
+      click(e: Event) {
+        e.stopPropagation()
+        e.preventDefault()
+        x.click(e, link, idx)
+        open[idx] = false
+      },
+    }
+  }))
 }
 
 const actionOptions = computed(() => {
   const out = []
 
   for (let i = 0; i < links.length; i++)
-    out[i] = actionOptionsFor(i).value
+    out[i] = actionOptionsFor(i)
 
   return out
 })
@@ -70,7 +70,7 @@ function isActive(item: NavItem) {
       <li
         v-for="(link, idx) in links"
         :key="idx"
-        class="nav-row relative grid items-center w-full focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 rounded-md font-medium text-sm text-gray-500 dark:text-gray-400 hover:text-gray-900 before:bg-gray-100 dark:before:bg-gray-800 dark:hover:text-white dark:hover:bg-gray-800/50 data-[active=true]:text-gray-900 data-[active=true]:dark:text-white data-[active=true]:bg-gray-100 data-[active=true]:dark:bg-gray-800"
+        class="nav-row relative grid items-center w-full focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 rounded-md font-medium text-sm text-gray-500 dark:text-gray-300 hover:text-gray-900 before:bg-gray-100 dark:before:bg-gray-800 dark:hover:text-white dark:hover:bg-gray-800/50 data-[active=true]:text-gray-900 data-[active=true]:dark:text-white data-[active=true]:bg-purple-200 data-[active=true]:dark:bg-gray-800 data-[active=true]:font-bold"
         :class="[open[idx] && 'open']"
         :data-active="isActive(link)"
         @click.prevent="e => clicked(e, link, idx)"
@@ -83,10 +83,10 @@ function isActive(item: NavItem) {
             {{ link.label }}
           </nuxt-link>
         </div>
-        <div v-if="actionOptions[idx]?.length" class="actions">
+        <div v-if="actions?.length" class="actions">
           <UDropdown
             v-model:open="open[idx]"
-            :items="actionOptions[idx]"
+            :items="actionOptionsFor(link)"
             :popper="{ offsetDistance: 0, placement: 'bottom-end' }"
           >
             <UButton
diff --git a/components/theme-toggle.vue b/components/theme-toggle.vue
index fa6978fb..4b97b518 100644
--- a/components/theme-toggle.vue
+++ b/components/theme-toggle.vue
@@ -15,7 +15,7 @@ const isDark = computed({
   <ClientOnly>
     <UButton
       :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
-      color="gray"
+      color="black"
       variant="ghost"
       aria-label="Theme"
       @click="isDark = !isDark"
diff --git a/eslint.config.js b/eslint.config.js
index 96306bc6..4cfa07e9 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -3,6 +3,22 @@ import { FlatCompat } from '@eslint/eslintrc'
 
 const compat = new FlatCompat()
 
+const keySpacing = [
+  'warn',
+  {
+    align: {
+      beforeColon: false,
+      afterColon: true,
+      on: 'value',
+      mode: 'minimum',
+    },
+    multiLine: {
+      beforeColon: false,
+      afterColon: true,
+    },
+  },
+]
+
 export default antfu({
   ...compat.config({
     env: {
@@ -13,20 +29,21 @@ export default antfu({
     },
     rules: {
       'n/prefer-global/process': 'off',
-      '@stylistic/ts/brace-style': 'off',
-      '@stylistic/js/key-spacing': 'off',
-      '@stylistic/js/space-in-parens': 'off',
-      '@stylistic/js/template-curly-spacing': 'off',
+      '@stylistic/space-in-parens': 'off',
+      '@stylistic/space-infix-ops': 'warn',
       '@typescript-eslint/brace-style': ['warn', '1tbs'],
       '@typescript-eslint/consistent-type-definitions': 'off',
       'array-bracket-spacing': 'warn',
       'arrow-parens': 'warn',
       'arrow-spacing': ['warn', { before: true, after: true }],
       'block-spacing': ['warn', 'always'],
-      'brace-style': 'off',
+
+      '@stylistic/brace-style': ['warn', '1tbs', { allowSingleLine: false }],
+      'brace-style': ['warn', '1tbs', { allowSingleLine: false }],
+
       'comma-dangle': ['warn', 'only-multiline'],
       'comma-spacing': 'warn',
-      'curly': ['warn', 'all'],
+      'curly': ['error', 'all'],
       'func-call-spacing': ['warn', 'never'],
       'implicit-arrow-linebreak': 'warn',
       'keyword-spacing': 'warn',
@@ -57,21 +74,12 @@ export default antfu({
       'space-infix-ops': 'warn',
       'spaced-comment': 'warn',
       'switch-colon-spacing': 'warn',
+      '@stylistic/template-curly-spacing': ['warn', 'always'],
       'template-curly-spacing': ['warn', 'always'],
       'yield-star-spacing': ['warn', 'both'],
 
-      'key-spacing': ['warn', {
-        align: {
-          beforeColon: false,
-          afterColon: true,
-          on: 'value',
-          mode: 'minimum',
-        },
-        multiLine: {
-          beforeColon: false,
-          afterColon: true,
-        },
-      }],
+      '@stylistic/key-spacing': keySpacing,
+      'key-spacing': keySpacing,
 
       'object-curly-newline': ['warn', {
         ObjectExpression: {
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 2fb28316..dee73aaf 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -9,7 +9,7 @@ export default defineNuxtConfig({
   ssr: false,
 
   runtimeConfig: {
-    api: process.env.NUXT_API || 'https://api.openai.com/v1',
+    api: process.env.NUXT_API || 'http://localhost:8080/v1',
     apiKey: process.env.NUXT_API_KEY || '',
     organization: process.env.NUXT_ORGANIZATION || '',
   },
diff --git a/package.json b/package.json
index 7edfe745..4ff72d68 100644
--- a/package.json
+++ b/package.json
@@ -28,11 +28,13 @@
     "@nuxtjs/color-mode": "^3.3.2",
     "@pinia/nuxt": "^0.5.1",
     "@types/lodash-es": "^4.17.12",
+    "@types/markdown-it-link-attributes": "^3.0.4",
     "dotenv": "^16.4.5",
     "eslint": "^8.57.0",
     "highlight.js": "^11.9.0",
     "lodash-es": "^4.17.21",
     "markdown-it-anchor": "^8.6.7",
+    "markdown-it-footnote": "^4.0.0",
     "markdown-it-link-attributes": "^4.0.1",
     "nuxt": "^3.10.3",
     "pinia": "^2.1.7",
diff --git a/pages/t/[thread].vue b/pages/t/[thread].vue
index 5139eac6..570c94cb 100644
--- a/pages/t/[thread].vue
+++ b/pages/t/[thread].vue
@@ -48,7 +48,7 @@ const arrangedMessages = computed(() => {
 })
 
 const previousMessages = computed(() => {
-  return messages.filter(x => x.role === 'user').map(x => x.content?.[0]?.text?.value || '').filter(x => !!x)
+  return arrangedMessages.value.filter(x => x.role === 'user').map(x => x.content?.[0]?.text?.value || '').filter(x => !!x)
 })
 
 function scroll() {
diff --git a/pages/tools/create-url.vue b/pages/tools/create-url.vue
index 3efdd8a0..3c580384 100644
--- a/pages/tools/create-url.vue
+++ b/pages/tools/create-url.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { type InferType, object, string } from 'yup'
+import { type InferType, array, object, string } from 'yup'
 import type { FormSubmitEvent } from '#ui/types'
 import type ToolObject from '@/config/types'
 
@@ -7,19 +7,16 @@ const tools = useTools()
 const saving = ref(false)
 
 const schema = object({
-  name: string().required(),
-  description: string().optional(),
   url: string().required(),
   subtool: string().optional(),
+  env_vars: array(string()).optional(),
 })
 
   type Schema = InferType<typeof schema>
 
 const state = reactive<ToolObject>({
-  name: '',
-  description: '',
   url: '',
-  subtool: '',
+  env_vars: [] as string[],
 })
 
 window.state = state
@@ -52,21 +49,29 @@ async function go(e: FormSubmitEvent<Schema>) {
     <UDivider class="my-2" />
 
     <UForm :schema="schema" :state="state" class="space-y-4" @submit="go">
-      <UFormGroup label="Name" required>
-        <UInput v-model="state.name" autofocus required />
-      </UFormGroup>
-
-      <UFormGroup label="Description">
-        <UTextarea v-model="state.description" autoresize />
-      </UFormGroup>
+      <UFormGroup label="URL" required>
+        <template #hint>
+          <UButton size="sm" color="blue" variant="link" to="https://tools.gptscript.ai/" target="_blank" rel="noopener nofollow noreferrer" class="pr-0 mr-0">
+            Find more tools
+          </UButton>
+        </template>
 
-      <UFormGroup label="Source Code URL" required>
         <UInput v-model="state.url" />
       </UFormGroup>
 
-      <UFormGroup label="Subtool">
+      <!-- <UFormGroup label="Subtool">
         <UInput v-model="state.subtool" />
-      </UFormGroup>
+      </UFormGroup> -->
+
+      <MapInput
+        v-model="state.env_vars"
+        as="array"
+        add-label="Add Environment Variable"
+        key-label="Environment Variable"
+        value-label="Value"
+        separator="="
+        show-separator
+      />
 
       <UButton :loading="saving" type="submit">
         <template v-if="saving">
diff --git a/server/routes/v1/threads/index.ts b/server/routes/v1/threads/index.ts
index a1dc4947..e1c3cf1f 100644
--- a/server/routes/v1/threads/index.ts
+++ b/server/routes/v1/threads/index.ts
@@ -2,9 +2,7 @@ import type { Thread } from 'openai/resources/beta/threads'
 import { apiList } from '@/server/utils/api'
 
 export default defineEventHandler(async (_event) => {
-  console.log('1')
   const threads = await apiList<Thread>('/v1/rubra/x/threads')
-  console.log('2', threads)
 
   return threads
 })
diff --git a/server/routes/v1/tools/index.ts b/server/routes/v1/tools/index.ts
index 05d7bd6b..5b65f61b 100644
--- a/server/routes/v1/tools/index.ts
+++ b/server/routes/v1/tools/index.ts
@@ -6,10 +6,13 @@ export default defineEventHandler(async (event) => {
 
   console.debug('Listing tools')
   const res = await apiFetch('/v1/rubra/x/tools')
+
+  setResponseStatus(res._status)
+
   console.debug('Res', res)
   console.debug('Got', res?.data?.length || 0, 'tools')
 
-  tools.push(...res.data)
+  tools.push(...res.data || [])
 
   console.debug('Returning', tools.length, 'tools')
 
diff --git a/stores/assistants.ts b/stores/assistants.ts
index f40927c2..85c93266 100644
--- a/stores/assistants.ts
+++ b/stores/assistants.ts
@@ -13,7 +13,7 @@ export const useAssistants = defineStore('assistants', {
   getters: {},
 
   actions: {
-    byId(id: string) {
+    byId(id: string): Assistant {
       return (this.list as Assistant[]).find(x => x.id === id)
     },
 
diff --git a/utils/array.ts b/utils/array.ts
index 1bbc5b4c..63e56a3c 100644
--- a/utils/array.ts
+++ b/utils/array.ts
@@ -14,3 +14,15 @@ export function removeObject<T>(ary: T[], obj: T): T[] {
 
   return ary
 }
+
+export function removeAt<T>(ary: T[], idx: number, len = 1): T[] {
+  if (idx < 0)
+    throw new Error('Index too low')
+
+  if (idx + len > ary.length)
+    throw new Error('Index + length too high')
+
+  ary.splice(idx, len)
+
+  return ary
+}
diff --git a/utils/string.ts b/utils/string.ts
index a6acfa37..498b9ee7 100644
--- a/utils/string.ts
+++ b/utils/string.ts
@@ -66,3 +66,12 @@ export function randomStr(length = 16, chars = Charsets.ALPHA_NUM): string {
     return chars[val % chars.length]
   }).join('')
 }
+
+export function splitLimit(str: string, separator: string, limit: number): string[] {
+  const split = str.split(separator)
+
+  if (split.length < limit)
+    return split
+
+  return [...split.slice(0, limit - 1), split.slice(limit - 1).join(separator)]
+}
diff --git a/yarn.lock b/yarn.lock
index a3224bb2..a6500cd6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1719,7 +1719,14 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.202.tgz#f09dbd2fb082d507178b2f2a5c7e74bd72ff98f8"
   integrity sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==
 
-"@types/markdown-it@^13.0.7":
+"@types/markdown-it-link-attributes@^3.0.4":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/markdown-it-link-attributes/-/markdown-it-link-attributes-3.0.4.tgz#b95a3839d58db1d971e31502f1da627f02ee5502"
+  integrity sha512-Ky3wTFQurAF0wSfsYi+1J2yDvpZRtNBsd8CV0rwOSIgNmNX8q87FN9c9PBp+NljoQqWhJPy8eLrkQNcG86nbUQ==
+  dependencies:
+    "@types/markdown-it" "*"
+
+"@types/markdown-it@*", "@types/markdown-it@^13.0.7":
   version "13.0.7"
   resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-13.0.7.tgz#4a495115f470075bd4434a0438ac477a49c2e152"
   integrity sha512-U/CBi2YUUcTHBt5tjO2r5QV/x0Po6nsYwQU4Y04fBS6vfoImaiZ6f8bi3CjTCxBPQSO1LMyUqkByzi8AidyxfA==
@@ -4612,11 +4619,6 @@ is-stream@^3.0.0:
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-3.0.0.tgz#e6bfd7aa6bef69f4f472ce9bb681e3e57b4319ac"
   integrity sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==
 
-is-unicode-supported@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/is-unicode-supported/-/is-unicode-supported-1.3.0.tgz#d824984b616c292a2e198207d4a609983842f714"
-  integrity sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==
-
 is-wsl@^2.1.1, is-wsl@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
@@ -5100,6 +5102,11 @@ markdown-it-anchor@^8.6.7:
   resolved "https://registry.yarnpkg.com/markdown-it-anchor/-/markdown-it-anchor-8.6.7.tgz#ee6926daf3ad1ed5e4e3968b1740eef1c6399634"
   integrity sha512-FlCHFwNnutLgVTflOYHPW2pPcl2AACqVzExlkGQNsi4CJgqOHN7YTgDd4LuhgN1BFO3TS0vLAruV1Td6dwWPJA==
 
+markdown-it-footnote@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/markdown-it-footnote/-/markdown-it-footnote-4.0.0.tgz#02ede0cb68a42d7e7774c3abdc72d77aaa24c531"
+  integrity sha512-WYJ7urf+khJYl3DqofQpYfEYkZKbmXmwxQV8c8mO/hGIhgZ1wOe7R4HLFNwqx7TjILbnC98fuyeSsin19JdFcQ==
+
 markdown-it-link-attributes@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/markdown-it-link-attributes/-/markdown-it-link-attributes-4.0.1.tgz#25751f2cf74fd91f0a35ba7b3247fa45f2056d88"