feat: show page titles on agent and topic pages

This commit moves the actions bar out of the default template and into the
individual pages so that they can display their titles at the top. this
commit also has pages set the meta title so tabs are labeled nicely.

app/components/ChatInput.vue

@@ -111,8 +111,10 @@ const handleWindowKeyDown = async (event: KeyboardEvent) => {
         return;
     }
 
+    if (document.activeElement === document.body) {
         // redirect all standard keyboard input to the input field
         inputRef.value?.focus();
+    }
 };
 
 watch(inputValue, async () => {

app/components/Sidenav/NavHome.vue

@@ -131,9 +131,10 @@ onMounted(() => {
                                 :aria-label="agent.name"
                                 class="mt-1 group px-2 decoration-none flex justify-between items-center shrink-0 rounded-lg transition-colors cursor-pointer h-9 text-[var(--text-secondary)] hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] focus:text-[var(--text-primary)]">
                                 <input v-if="renameAgentId === agent.id" id="agent-rename-input" v-model="newAgentName"
-                                    @keydown.enter="saveRename" @keydown.escape="cancelRename" @blur="saveRename"
+                                    @keydown.stop.enter="saveRename" @keydown.escape="cancelRename" @blur="saveRename"
                                     class="flex-1 bg-transparent border-none outline-none text-sm font-medium text-[var(--text-primary)] px-0 min-w-0" />
-                                <span class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
+                                <span v-else
+                                    class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
                                     {{ agent.name }}
                                 </span>
 

app/layouts/default.vue

@@ -17,14 +17,6 @@ useKeyboardShortcuts();
     <Sidenav />
     <main
         class="bg-[var(--bg-surface)] flex flex-col h-full w-full border border-solid border-[var(--color-border)] rounded-lg overflow-hidden">
-        <div class="h-14 flex items-center justify-between px-4">
-            <div class="flex items-center gap-2">
-                <button v-if="!sidebarOpen" @click="openSidebar"
-                    class="flex p-2 rounded-lg text-[var(--text-primary)] bg-transparent hover:bg-[var(--color-hover)] transition-colors">
-                    <Icon class="text-5" name="mynaui:panel-left-open" />
-                </button>
-            </div>
-        </div>
         <div class="flex-1 overflow-y-auto">
             <slot />
         </div>

app/pages/agent/[id]/index.vue

@@ -7,6 +7,7 @@ const route = useRoute();
 const inputValue = ref('');
 const pendingMessage = ref<Message | null>(null);
 
+const { open: sidebarOpen, openSidebar } = useSidebar();
 const { createTopic, sendMessage, autoRename } = useChat(route.params.id as string);
 const { getAgent } = useAgents();
 const { providers } = useModels();
@@ -15,6 +16,8 @@ const agent = getAgent(route.params.id as string);
 
 if (!agent.value) navigateTo('/');
 
+useHead({ title: `${agent.value!.name} | Veridian` });
+
 const handleSubmit = async (message: string, model: ModelWithProvider | null) => {
     if (!model) {
         console.error('No model selected');
@@ -83,8 +86,21 @@ const handleSubmit = async (message: string, model: ModelWithProvider | null) =>
 
 
 <template>
-    <div
+    <div class="flex flex-col h-full w-full">
-        class="chat-scroll-container justify-center w-full h-full [scrollbar-width:thin] [scrollbar-color:#888_transparent] overflow-y-scroll overflow-x-hidden flex justify-center">
+        <div class="h-14 flex items-center justify-between px-4 border-b border-[var(--color-border)]">
+            <div class="flex items-center gap-2">
+                <button v-if="!sidebarOpen" @click="openSidebar"
+                    class="flex p-2 rounded-lg text-[var(--text-primary)] bg-transparent hover:bg-[var(--color-hover)] transition-colors">
+                    <Icon class="text-5" name="mynaui:panel-left-open" />
+                </button>
+                <h4 class="text-lg">
+                    {{ agent?.name }}
+                </h4>
+            </div>
+        </div>
+
+        <div ref="chatPaneWrapper"
+            class="chat-scroll-container justify-center w-full h-full [scrollbar-width:thin] [scrollbar-color:#888_transparent] overflow-y-scroll overflow-x-hidden flex justify-center pt-4">
             <div class="chatPane max-w-4xl w-full min-h-full flex flex-col px-4">
                 <div class="w-full px-px flex flex-col flex-grow gap-2"
                     :class="pendingMessage === null ? 'justify-end pb-28' : 'pb-9'">
@@ -96,10 +112,12 @@ const handleSubmit = async (message: string, model: ModelWithProvider | null) =>
                         <Message :message="pendingMessage" />
                     </div>
                 </div>
+
                 <div class="sticky bottom-0 z-10 bg-[var(--bg-surface)] pb-4 w-full rounded-t-2xl">
                     <ChatInput v-model="inputValue" class="[view-transition-name:chat-prompt] duration-150 ease-in-out"
                         :agent="agent" :providers="providers?.filter(p => p.enabled)" @submit="handleSubmit" />
                 </div>
             </div>
         </div>
+    </div>
 </template>

app/pages/agent/[id]/profile.vue

@@ -4,6 +4,8 @@ const triplit = useTriplitClient();
 
 const route = useRoute();
 
+const { open: sidebarOpen, openSidebar } = useSidebar();
+
 const agent = getAgent(route.params.id as string);
 
 if (agent.value === undefined) navigateTo('/');
@@ -32,6 +34,15 @@ const changeSystemPrompt = async (e: Event) => {
 </script>
 
 <template>
+    <div class="h-14 flex items-center justify-between px-4">
+        <div class="flex items-center gap-2">
+            <button v-if="!sidebarOpen" @click="openSidebar"
+                class="flex p-2 rounded-lg text-[var(--text-primary)] bg-transparent hover:bg-[var(--color-hover)] transition-colors">
+                <Icon class="text-5" name="mynaui:panel-left-open" />
+            </button>
+        </div>
+    </div>
+
     <div class="flex flex-col gap-4 px-14 w-full h-full">
         <div class="flex items-center gap-4">
             <div>

app/pages/agent/[id]/topic/[topicId].vue

@@ -11,6 +11,7 @@ const inputValue = ref('');
 const route = useRoute();
 const { sendMessage, regenerateMessage } = useChat(route.params.id as string);
 const { getAgent } = useAgents();
+const { open: sidebarOpen, openSidebar } = useSidebar();
 const { providers, allModels } = useModels();
 
 const agent = getAgent(route.params.id as string);
@@ -104,6 +105,12 @@ const topic = computed(() => {
     };
 });
 
+watch(() => topic.value?.name, (newTopicName) => {
+    if (newTopicName !== undefined) {
+        useHead({ title: `${newTopicName} | Veridian` });
+    }
+}, { immediate: true });
+
 const submitMessage = async (message: string, model: ModelWithProvider | null) => {
     if (!model) {
         console.error('No model selected');
@@ -271,9 +278,22 @@ onUnmounted(() => {
 </script>
 
 <template>
+    <div class="flex flex-col h-full w-full">
+        <div class="h-14 flex items-center justify-between px-4 border-b border-[var(--color-border)]">
+            <div class="flex items-center gap-2">
+                <button v-if="!sidebarOpen" @click="openSidebar"
+                    class="flex p-2 rounded-lg text-[var(--text-primary)] bg-transparent hover:bg-[var(--color-hover)] transition-colors">
+                    <Icon class="text-5" name="mynaui:panel-left-open" />
+                </button>
+                <h4 class="text-lg">
+                    {{ topic?.name }}
+                </h4>
+            </div>
+        </div>
+
         <!-- chat pane -->
         <div ref="chatPaneWrapper"
-        class="chat-scroll-container justify-center w-full h-full [scrollbar-width:thin] [scrollbar-color:#888_transparent] overflow-y-scroll overflow-x-hidden flex justify-center">
+            class="chat-scroll-container justify-center w-full h-full [scrollbar-width:thin] [scrollbar-color:#888_transparent] overflow-y-scroll overflow-x-hidden flex justify-center pt-4">
             <div class="chatPane max-w-4xl w-full min-h-full flex flex-col px-4">
                 <div class="w-full px-px flex flex-col flex-grow gap-2 pb-9">
                     <Suspense>
@@ -287,8 +307,9 @@ onUnmounted(() => {
 
                 <div class="sticky bottom-0 z-10 bg-[var(--bg-surface)] pb-4 w-full rounded-t-2xl">
                     <ChatInput v-model="inputValue" class="[view-transition-name:chat-prompt] duration-150 ease-in-out"
-                    :loading="activeGeneration !== null" :agent="agent" :providers="providers?.filter(p => p.enabled)"
+                        :loading="activeGeneration !== null" :agent="agent"
-                    @submit="submitMessage" @cancel="handleCancel" />
+                        :providers="providers?.filter(p => p.enabled)" @submit="submitMessage" @cancel="handleCancel" />
+                </div>
             </div>
         </div>
     </div>

app/pages/index.vue

@@ -4,6 +4,7 @@ import type { Agent } from '~/composables/useAgents';
 
 const triplit = useTriplitClient();
 
+const { open: sidebarOpen, openSidebar } = useSidebar();
 const { agents, createAgent } = useAgents();
 const { providers, getFirstAvailableModel, allModels } = useModels();
 
@@ -165,6 +166,16 @@ onUnmounted(() => {
 </script>
 
 <template>
+    <div class="h-full w-full flex flex-col">
+        <div class="h-14 flex items-center justify-between px-4">
+            <div class="flex items-center gap-2">
+                <button v-if="!sidebarOpen" @click="openSidebar"
+                    class="flex p-2 rounded-lg text-[var(--text-primary)] bg-transparent hover:bg-[var(--color-hover)] transition-colors">
+                    <Icon class="text-5" name="mynaui:panel-left-open" />
+                </button>
+            </div>
+        </div>
+
         <div class="flex flex-col items-center pt-12 px-4 h-full gap-12">
             <h1 class="text-center text-3xl font-semibold">{{ animatedText }}<span
                     class="animate-blink inline-block w-4 h-[0.9em] bg-current align-middle ml-0.5 select-none">&nbsp;</span>
@@ -175,4 +186,5 @@ onUnmounted(() => {
                     :providers="providers" @submit="handleChatSubmit" />
             </div>
         </div>
+    </div>
 </template>