Collapsable+resizable sidebar. Standard view header component.

frontend/src/views/Agent.vue

@@ -4,6 +4,8 @@
     onMounted, onUnmounted,
   } from "vue";
 
+  import TitleBar from '../components/TitleBar.vue';
+
   import * as backend from '../backend';
   import * as ui from '../ui';
 
@@ -188,7 +190,10 @@
 
 <template>
   <main>
-    <h1>{{ agent.name || `Agent-${id}` }}</h1>
+    <TitleBar>
+      <h1>{{ agent.name || `Agent-${id}` }}</h1>
+    </TitleBar>
+
     <section class="top-section">
       <p style="white-space: pre-wrap; padding-bottom: 1em; border-bottom: 1px solid var(--color-border)">{{ kindInfo.description }}</p>
 

frontend/src/views/AgentCreate.vue

@@ -4,6 +4,8 @@
     onMounted, onUnmounted,
   } from "vue";
 
+  import TitleBar from '../components/TitleBar.vue';
+
   import * as backend from '../backend';
   import * as ui from '../ui';
 
@@ -48,7 +50,9 @@
 
 <template>
   <main>
-    <h1>Create New Chat</h1>
+    <TitleBar>
+      <h1>Create Agent</h1>
+    </TitleBar>
 
     <div class="main-container">
       <input v-model="agent.name" type="text" placeholder="name">

frontend/src/views/Chat.vue

@@ -4,6 +4,8 @@
     onMounted, onUnmounted,
   } from "vue";
 
+  import TitleBar from '../components/TitleBar.vue';
+
   import * as backend from '../backend';
   import * as ui from '../ui';
 
@@ -390,7 +392,9 @@
 
 <template>
   <main>
-    <h1>{{ chat.name || 'Chat #' + chat.id }}</h1>
+    <TitleBar>
+      <h1>{{ chat.name || 'Chat #' + chat.id }}</h1>
+    </TitleBar>
 
     <div class="messages-container" ref="chatContainerElem">
       <div v-for="msg in chatEntries" :class="chatEntryClass(msg)" @contextmenu.prevent="chatEntryContextMenu(msg)">

frontend/src/views/ChatCreate.vue

@@ -4,6 +4,8 @@
     onMounted, onUnmounted,
   } from "vue";
 
+  import TitleBar from '../components/TitleBar.vue';
+
   import * as backend from '../backend';
   import * as ui from '../ui';
 
@@ -39,7 +41,9 @@
 
 <template>
   <main>
-    <h1>Create New Chat</h1>
+    <TitleBar>
+      <h1>Create Chat</h1>
+    </TitleBar>
 
     <div class="main-container">
       <input v-model="title" type="text" placeholder="title">