From 13e7c12e757269143be6339ec19eca14ec368ef0 Mon Sep 17 00:00:00 2001
From: Shivering Ocelot <shiveringocelot@pm.me>
Date: Thu, 7 Aug 2025 20:55:21 -0500
Subject: [PATCH] Add PWA service worker (via vite plugin), use dynamic
 viewport units for interface size (improves mobile experience), replace
 default vue homepage with basic info

---
 backend/src/chat.py                      |  5 ++-
 backend/src/database.py                  |  5 +++
 frontend/package.json                    |  1 +
 frontend/src/assets/base.css             |  2 +-
 frontend/src/assets/main.css             | 39 +++++++++++++++++-------
 frontend/src/components/TitleBar.vue     | 10 +-----
 frontend/src/components/main/Sidebar.vue | 10 +-----
 frontend/src/views/HomeView.vue          | 24 +++++++++++++--
 frontend/vite.config.js                  |  5 +++
 9 files changed, 68 insertions(+), 33 deletions(-)

diff --git a/backend/src/chat.py b/backend/src/chat.py
index c7a59a3..cf1bafd 100644
--- a/backend/src/chat.py
+++ b/backend/src/chat.py
@@ -41,13 +41,16 @@ class Thread:
         self.memories = []
 
 class ChatView:
-    def __init__(self, app, chat_id):
+    def __init__(self, app, chat_id, participant_type=None, participant_id=None):
         self.app = app
         self.chat_id = chat_id
 
         self.name = None
         self.description = None
 
+        self.participant_type = participant_type
+        self.participant_id = participant_id
+
         # Thread holding messages without a set thread id
         self.default_thread = Thread(None, chat_id)
         # Most recent thread objects, earliest to latest
diff --git a/backend/src/database.py b/backend/src/database.py
index 70c68a9..b0b4954 100644
--- a/backend/src/database.py
+++ b/backend/src/database.py
@@ -62,6 +62,11 @@ class Chat(Base):
     last_message_preview: Mapped[Optional[str]]
     last_message_time: Mapped[Optional[int]]
 
+    # Chat Controller defines when to forward messages to agents and users, and what messages each can see
+    # Controllers are: default (all messages to all participants), mention (notify agents by specific mentions), active (llm agent selecting next agent to respond), arena
+    #controller_kind: Mapped[str]
+    #controller_data = mapped_column(JSON, default={})
+
 # Stores membership of agents in chats. If a record exists linking an agent and a chat,
 # it means the agent participates in that chat.
 class Membership(Base):
diff --git a/frontend/package.json b/frontend/package.json
index 7c8208f..4ed4094 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "vite-plugin-pwa": "^1.0.2",
     "vue": "^3.5.17",
     "vue-router": "^4.5.1"
   },
diff --git a/frontend/src/assets/base.css b/frontend/src/assets/base.css
index d7ac599..5969cba 100644
--- a/frontend/src/assets/base.css
+++ b/frontend/src/assets/base.css
@@ -82,7 +82,7 @@
 }
 
 body {
-  min-height: 100vh;
+  min-height: 100lvh;
   color: var(--color-text);
   background: var(--color-background);
   transition:
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 924ff4f..4c223f3 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -2,6 +2,34 @@
 
 *[hidden] { display: none !important; }
 
+body {
+  display: flex;
+  direction: row;
+}
+
+main {
+  height: 100dvh;
+  flex-grow: 1;
+  overflow: auto;
+}
+
+.main-sidebar {
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: var(--z-index-sidebar);
+  background-color: var(--color-background);
+}
+
+.main-header {
+  height: 3em;
+  border-bottom: 1px solid var(--color-border);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
 a {
   text-decoration: none;
   color: var(--color-blue);
@@ -20,17 +48,6 @@ button {
   border-color: var(--color-border-hover);
 }
 
-body {
-  display: flex;
-  direction: row;
-}
-
-main {
-  height: 100vh;
-  flex-grow: 1;
-  overflow: auto;
-}
-
 .with-sidebar-expanded .when-sidebar-collapsed {
   display: none;
 }
\ No newline at end of file
diff --git a/frontend/src/components/TitleBar.vue b/frontend/src/components/TitleBar.vue
index e0c1243..a5313f9 100644
--- a/frontend/src/components/TitleBar.vue
+++ b/frontend/src/components/TitleBar.vue
@@ -7,7 +7,7 @@
 </script>
 
 <template>
-  <header>
+  <header class="main-header">
     <button class="when-sidebar-collapsed" @click="sidebarExpand()">
       >>
     </button>
@@ -20,14 +20,6 @@
 </template>
 
 <style scoped>
-  header {
-    height: 3em;
-    border-bottom: 1px solid var(--color-border);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-
   :slotted(h1) {
     font-size: 160%;
     font-weight: bold;
diff --git a/frontend/src/components/main/Sidebar.vue b/frontend/src/components/main/Sidebar.vue
index c5ba3cb..5eca1eb 100644
--- a/frontend/src/components/main/Sidebar.vue
+++ b/frontend/src/components/main/Sidebar.vue
@@ -80,7 +80,7 @@
 </script>
 
 <template>
-  <aside class="sidebar" :style="sidebarStyle()" v-if="sidebarExpanded">
+  <aside class="main-sidebar" :style="sidebarStyle()" v-if="sidebarExpanded">
     <div class="drag-bar" @mousedown="dragBarMouseDown($event)"></div>
     <div class="tab-bar">
       <div class="tab-group">
@@ -109,14 +109,6 @@
 </template>
 
 <style scoped>
-  .sidebar {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    z-index: var(--z-index-sidebar);
-    background-color: var(--color-background);
-  }
-
   .tab-bar, .tab-group {
     display: flex;
     flex-direction: row;
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 6bb706f..6594450 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,9 +1,29 @@
 <script setup>
-import TheWelcome from '../components/TheWelcome.vue'
+  //import TheWelcome from '../components/TheWelcome.vue'
+  import TitleBar from '../components/TitleBar.vue';
 </script>
 
 <template>
   <main>
-    <TheWelcome />
+    <TitleBar>
+      <h1>Horde Agent Hub</h1>
+    </TitleBar>
+
+    <div class="home-content">
+      <p>This is the Hub for Horde Agents. You can configure agents, interact and chat with them.</p>
+      <p>In the left panel, you can open chats from the <strong>Chats Tab</strong> and edit agents from the <strong>Agents Tab</strong>.</p>
+      <br>
+      <p>We accept contributions at our <a href="javascript:;">github repository</a></p>
+    </div>
+
+    <!--TheWelcome /-->
   </main>
 </template>
+
+<style scoped>
+  .home-content {
+    max-width: 900px;
+    margin: 2em auto auto;
+    padding: 0 5em 0 2em;
+  }
+</style>
\ No newline at end of file
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index ee675f4..5ee16d9 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -3,12 +3,17 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
+import { VitePWA } from 'vite-plugin-pwa'
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
     vueDevTools(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      devOptions: {enabled: true},
+    }),
   ],
   build: {
     sourcemap: true,