From ab57af1f238b3593ee1cc1da801181669c4a64b4 Mon Sep 17 00:00:00 2001
From: Zoe <62722391+juls0730@users.noreply.github.com>
Date: Tue, 24 Feb 2026 16:33:32 +0000
Subject: [PATCH] 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             |  6 ++-
 app/components/Sidenav/NavHome.vue       |  5 ++-
 app/layouts/default.vue                  |  8 ----
 app/pages/agent/[id]/index.vue           | 48 ++++++++++++++-------
 app/pages/agent/[id]/profile.vue         | 11 +++++
 app/pages/agent/[id]/topic/[topicId].vue | 53 +++++++++++++++++-------
 app/pages/index.vue                      | 28 +++++++++----
 7 files changed, 108 insertions(+), 51 deletions(-)

diff --git a/app/components/ChatInput.vue b/app/components/ChatInput.vue
index 3697d99..a17736e 100644
--- a/app/components/ChatInput.vue
+++ b/app/components/ChatInput.vue
@@ -111,8 +111,10 @@ const handleWindowKeyDown = async (event: KeyboardEvent) => {
         return;
     }
 
-    // redirect all standard keyboard input to the input field
-    inputRef.value?.focus();
+    if (document.activeElement === document.body) {
+        // redirect all standard keyboard input to the input field
+        inputRef.value?.focus();
+    }
 };
 
 watch(inputValue, async () => {
diff --git a/app/components/Sidenav/NavHome.vue b/app/components/Sidenav/NavHome.vue
index 4f751fb..cad5736 100644
--- a/app/components/Sidenav/NavHome.vue
+++ b/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>
 
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 61cc718..724b106 100644
--- a/app/layouts/default.vue
+++ b/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>
diff --git a/app/pages/agent/[id]/index.vue b/app/pages/agent/[id]/index.vue
index 76e7e58..e9e5381 100644
--- a/app/pages/agent/[id]/index.vue
+++ b/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,22 +86,37 @@ const handleSubmit = async (message: string, model: ModelWithProvider | null) =>
 
 
 <template>
-    <div
-        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="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'">
-                <div v-if="pendingMessage === null">
-                    <h1 v-if="agent" class="font-bold">{{ agent.name }}</h1>
-                    <p class="text-[var(--text-secondary)]">Select a topic to continue or create a new one</p>
-                </div>
-                <div v-else class="opacity-70">
-                    <Message :message="pendingMessage" />
-                </div>
+    <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">
+                    {{ agent?.name }}
+                </h4>
             </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 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'">
+                    <div v-if="pendingMessage === null">
+                        <h1 v-if="agent" class="font-bold">{{ agent.name }}</h1>
+                        <p class="text-[var(--text-secondary)]">Select a topic to continue or create a new one</p>
+                    </div>
+                    <div v-else class="opacity-70">
+                        <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>
diff --git a/app/pages/agent/[id]/profile.vue b/app/pages/agent/[id]/profile.vue
index f71654d..c62382b 100644
--- a/app/pages/agent/[id]/profile.vue
+++ b/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>
diff --git a/app/pages/agent/[id]/topic/[topicId].vue b/app/pages/agent/[id]/topic/[topicId].vue
index 60e86bf..6bda28a 100644
--- a/app/pages/agent/[id]/topic/[topicId].vue
+++ b/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,24 +278,38 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <!-- 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">
-        <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>
-                    <template v-if="Array.isArray(topic?.messages) && topic.messages.length > 0">
-                        <Message v-for="message in topic.messages" :key="message.id" :message="message"
-                            v-memo="[message.id, message.parts?.length, message.children, message.focusedIndex, message.content]"
-                            @delete="handleDelete(message)" @regenerate="handleRegenerate(message)" />
-                    </template>
-                </Suspense>
+    <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>
 
-            <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)"
-                    @submit="submitMessage" @cancel="handleCancel" />
+        <!-- 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 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>
+                        <template v-if="Array.isArray(topic?.messages) && topic.messages.length > 0">
+                            <Message v-for="message in topic.messages" :key="message.id" :message="message"
+                                v-memo="[message.id, message.parts?.length, message.children, message.focusedIndex, message.content]"
+                                @delete="handleDelete(message)" @regenerate="handleRegenerate(message)" />
+                        </template>
+                    </Suspense>
+                </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"
+                        :loading="activeGeneration !== null" :agent="agent"
+                        :providers="providers?.filter(p => p.enabled)" @submit="submitMessage" @cancel="handleCancel" />
+                </div>
             </div>
         </div>
     </div>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index e4e17f8..3b4ba5c 100644
--- a/app/pages/index.vue
+++ b/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,14 +166,25 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <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>
-        </h1>
-        <div class="max-w-4xl h-full w-full">
-            <!-- TODO: view transitions have caused me issues with the page flashing with no content (so just a black or white screen depending on the theme) so I have disabled them for now.  -->
-            <ChatInput class="[view-transition-name:chat-prompt] duration-150 ease-in-out" :agent="agent"
-                :providers="providers" @submit="handleChatSubmit" />
+    <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>
+            </h1>
+            <div class="max-w-4xl h-full w-full">
+                <!-- TODO: view transitions have caused me issues with the page flashing with no content (so just a black or white screen depending on the theme) so I have disabled them for now.  -->
+                <ChatInput class="[view-transition-name:chat-prompt] duration-150 ease-in-out" :agent="agent"
+                    :providers="providers" @submit="handleChatSubmit" />
+            </div>
         </div>
     </div>
 </template>