Added new modules and updated existing logic

component split/not good/hlp q deepseek cline split/src/app.js

@@ -31,7 +31,7 @@ export default {
         :left-drawer-open="leftDrawer"
         @toggle-left-drawer="leftDrawer = !leftDrawer"
         @clear-highlights="clearHighlights"
-      />
+      ></app-header>
       
       <left-drawer
         :model-value="leftDrawer"
@@ -52,7 +52,7 @@ export default {
         @update:crosshair-active="crosshairActive = $event"
         @simulate-wss-lock="simulateWssLock"
         @reset-to-today="resetToToday"
-      />
+      ></left-drawer>
 
       <q-page-container>
         <q-page class="q-pa-none">
@@ -86,7 +86,6 @@ export default {
                 <div class="left-col">
                   <div class="grid-search-container">
                     <q-input v-model="search" debounce="300" dense outlined rounded placeholder="Quick search..." class="full-width" bg-color="white" clearable>
-
                       <template v-slot:prepend><q-icon name="search" size="xs" color="grey-5"></q-icon></template>
                     </q-input>
                     <q-btn flat round dense icon="filter_alt" :color="isFilterActive ? 'indigo-10' : 'grey-6'" :class="isFilterActive ? 'filter-btn-active' : ''" size="sm" @click="filterDrawer = !filterDrawer">
@@ -144,7 +143,7 @@ export default {
 
               <!-- VIRTUAL SCROLL IMPLEMENTATION (Simplified) -->
               <div v-if="!loading">
-                <div v-for="agent in filteredAgents.slice(0, 5)" :key="agent.id" class="planner-row planner-row-item" :class="{'row-highlighted': highlightedRowId === agent.id, 'crosshair-enabled': crosshairActive}">
+                <div v-for="agent in filteredAgents" :key="agent.id" class="planner-row planner-row-item" :class="{'row-highlighted': highlightedRowId === agent.id, 'crosshair-enabled': crosshairActive}">
                   <div class="left-col border-b cursor-pointer agent-row-hover-trigger relative-position" :class="[isCompact ? 'cell-compact' : '']" @click="openProfile(agent)">
                     <q-avatar :size="isCompact ? '24px' : '32px'" class="shadow-1"><img :src="agent.avatar"></q-avatar>
                     <div class="q-ml-sm overflow-hidden col">