From 9513556ad44d1be24e2ceb6917c015f6553e45dd Mon Sep 17 00:00:00 2001
From: GamerC0der <159653318+GamerC0der@users.noreply.github.com>
Date: Wed, 25 Feb 2026 20:47:09 -0800
Subject: [PATCH] 0.9.2

---
 CHANGELOG.md                                |   9 +
 app/components/AppSidebar.vue               |  65 ++++
 app/components/BottomSheetModelSelector.vue |  28 +-
 app/components/ChatPanel.vue                | 170 +++++++++-
 app/components/MessageForm.vue              |  63 +++-
 app/components/SettingsPanel.vue            |  96 ++++++
 app/components/TopBar.vue                   | 129 +++++---
 app/composables/availableModels.js          |  40 +++
 app/composables/defaultParameters.js        |   4 +-
 app/composables/message.js                  |  31 +-
 app/composables/messagesManager.js          | 328 +++++++++++++++++---
 app/composables/rateLimiter.js              |  42 ++-
 app/layouts/default.vue                     |  43 ++-
 package-lock.json                           |   4 +-
 package.json                                |   2 +-
 server/api/api_health.js                    |   1 +
 16 files changed, 921 insertions(+), 134 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 70d2f61..132ec7f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,15 @@ All notable changes to Libre Assistant are documented here.
 
 ---
 
+## [0.9.2] - 2026-02-25
+
+### Added
+- Deepseek R1 0528 Model
+- Display The Usage Limits on Sidebar
+
+### Changed
+- Modified the Images Limit to 8 from 12.
+
 ## [0.9.1] - 2026-02-19
 
 ### Added
diff --git a/app/components/AppSidebar.vue b/app/components/AppSidebar.vue
index 3fb4170..e139fc2 100644
--- a/app/components/AppSidebar.vue
+++ b/app/components/AppSidebar.vue
@@ -9,6 +9,7 @@ import {
   DropdownMenuItem,
 } from "reka-ui";
 import { useConversationsList } from "~/composables/useConversationsList";
+import { useRateLimiter } from "~/composables/rateLimiter";
 
 const emit = defineEmits([
   "reloadSettings",
@@ -38,6 +39,8 @@ const {
   clearSearch,
 } = useConversationsList();
 
+const { usageStats } = useRateLimiter();
+
 const windowWidth = ref(
   typeof window !== "undefined" ? window.innerWidth : 1200,
 );
@@ -208,6 +211,22 @@ function handleNewConversation() {
           </template>
         </div>
       </div>
+      <div class="sidebar-footer">
+        <div class="usage-row">
+          <span class="usage-label">Messages</span>
+          <div class="usage-bar-track">
+            <div class="usage-bar-fill" :style="{ width: `${Math.min(100, (usageStats.general.used / usageStats.general.limit) * 100)}%` }" />
+          </div>
+          <span class="usage-count">{{ usageStats.general.used }} / {{ usageStats.general.limit }}</span>
+        </div>
+        <div class="usage-row">
+          <span class="usage-label">Images</span>
+          <div class="usage-bar-track">
+            <div class="usage-bar-fill" :style="{ width: `${Math.min(100, (usageStats.image.used / usageStats.image.limit) * 100)}%` }" />
+          </div>
+          <span class="usage-count">{{ usageStats.image.used }} / {{ usageStats.image.limit }}</span>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -346,6 +365,52 @@ function handleNewConversation() {
   margin-bottom: 12px;
 }
 
+.sidebar-footer {
+  flex-shrink: 0;
+  padding: 12px 16px 16px;
+  border-top: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background: var(--bg-sidebar);
+}
+
+.usage-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.usage-label {
+  font-size: 0.8em;
+  font-weight: 600;
+  color: var(--text-primary);
+  min-width: 56px;
+}
+
+.usage-bar-track {
+  flex: 1;
+  height: 8px;
+  background: var(--bg-input);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.usage-bar-fill {
+  height: 100%;
+  background: var(--primary);
+  border-radius: 4px;
+  transition: width 0.2s ease;
+}
+
+.usage-count {
+  font-size: 0.8em;
+  font-weight: 600;
+  color: var(--text-primary);
+  min-width: 2.4em;
+  text-align: right;
+}
+
 /* Empty State */
 .empty-state {
   display: flex;
diff --git a/app/components/BottomSheetModelSelector.vue b/app/components/BottomSheetModelSelector.vue
index d460f3f..23f5a5c 100644
--- a/app/components/BottomSheetModelSelector.vue
+++ b/app/components/BottomSheetModelSelector.vue
@@ -37,7 +37,7 @@
               {{ selectedProvider?.category }}
             </template>
             <template v-else>
-              Select Model
+              {{ filterMaxModeOnly ? 'Select model (Max Mode)' : 'Select Model' }}
             </template>
           </h2>
           <div class="nav-side">
@@ -81,8 +81,8 @@
             v-for="model in selectedProvider?.models"
             :key="model.id"
             class="model-item"
-            :class="{ selected: model.id === selectedModelId }"
-            @click="selectModel(model.id, model.name)"
+            :class="{ selected: model.id === selectedModelId, disabled: excludeModelIds.includes(model.id) }"
+            @click="excludeModelIds.includes(model.id) ? null : selectModel(model.id, model.name)"
           >
             <div class="model-info">
               <span class="model-name">{{ model.name }}</span>
@@ -118,6 +118,14 @@ const props = defineProps({
   selectedModelName: {
     type: String,
     default: ''
+  },
+  filterMaxModeOnly: {
+    type: Boolean,
+    default: false
+  },
+  excludeModelIds: {
+    type: Array,
+    default: () => []
   }
 });
 
@@ -133,7 +141,14 @@ let firstOpen = true;
 
 // Computed providers (only categories, not standalone models)
 const providers = computed(() => {
-  return availableModels.filter(item => item?.category);
+  let list = availableModels.filter(item => item?.category);
+  if (props.filterMaxModeOnly) {
+    list = list.map(p => ({
+      ...p,
+      models: (p.models || []).filter(m => m.maxModeSupported === true)
+    })).filter(p => p.models && p.models.length > 0);
+  }
+  return list;
 });
 
 // Watch for changes in isOpen to reset the state when opening
@@ -392,6 +407,11 @@ const onAnimationComplete = () => {
   opacity: 0.9;
 }
 
+.model-item.disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
 .model-info {
   flex-grow: 1;
   display: flex;
diff --git a/app/components/ChatPanel.vue b/app/components/ChatPanel.vue
index abd4df1..dcb6ff8 100644
--- a/app/components/ChatPanel.vue
+++ b/app/components/ChatPanel.vue
@@ -97,6 +97,8 @@ function formatStatValue(value, type) {
 
 const liveReasoningTimers = reactive({});
 const timerIntervals = {};
+const maxModeThinkingTimers = reactive({});
+const maxModeTimerIntervals = {};
 const messageLoadingStates = reactive({});
 
 // Phase 2.2: Message stats cache
@@ -104,9 +106,36 @@ const messageStatsCache = reactive({});
 
 function formatDuration(ms) {
   if (ms < 1000) return `${ms}ms`;
+  if (ms >= 60000) {
+    const m = Math.floor(ms / 60000);
+    const s = Math.floor((ms % 60000) / 1000);
+    return s > 0 ? `${m}m ${s}s` : `${m}m`;
+  }
   return `${(ms / 1000).toFixed(1)}s`;
 }
 
+function getDetailedStatusMessage(message) {
+  if (!message.maxModeThinking) {
+    return null;
+  }
+
+  const elapsed = Date.now() - (message.maxModeThinkingStart || Date.now());
+
+  if (!message.maxModeExpertResponses || message.maxModeExpertResponses.length === 0) {
+    return `Gathering expert opinions... (${formatDuration(elapsed)})`;
+  }
+
+  if (!message.maxModeRounds || message.maxModeRounds.length < 2) {
+    return `Experts refining answers... (${formatDuration(elapsed)})`;
+  }
+
+  if (!message.maxModeVotes || message.maxModeVotes.length === 0) {
+    return `Experts voting on best answer... (${formatDuration(elapsed)})`;
+  }
+
+  return `Finalizing response... (${formatDuration(elapsed)})`;
+}
+
 const isAtBottom = ref(true);
 const chatWrapper = ref(null);
 
@@ -258,6 +287,21 @@ watch(
         clearInterval(timerIntervals[msg.id]);
         delete timerIntervals[msg.id];
       }
+      if (msg.role === 'assistant' && msg.maxModeThinking === false && maxModeTimerIntervals[msg.id]) {
+        clearInterval(maxModeTimerIntervals[msg.id]);
+        delete maxModeTimerIntervals[msg.id];
+        delete maxModeThinkingTimers[msg.id];
+      }
+      if (msg.role === 'assistant' && msg.maxModeThinking === true && msg.maxModeThinkingStart != null) {
+        const start = typeof msg.maxModeThinkingStart === 'number' ? msg.maxModeThinkingStart : (msg.maxModeThinkingStart?.getTime?.() ?? Date.now());
+        if (!maxModeTimerIntervals[msg.id]) {
+          maxModeThinkingTimers[msg.id] = 'Gathering expert opinions... (0s)';
+          maxModeTimerIntervals[msg.id] = setInterval(() => {
+            const detailedMessage = getDetailedStatusMessage(msg);
+            maxModeThinkingTimers[msg.id] = detailedMessage || `Thinking for ${formatDuration(Date.now() - start)}...`;
+          }, 100);
+        }
+      }
 
       // Handle loading states for assistant messages
       if (msg.role === 'assistant') {
@@ -279,16 +323,16 @@ watch(
         if (msg.complete) {
           if (msg.reasoningDuration) {
             liveReasoningTimers[msg.id] =
-              `Thought for ${formatDuration(msg.reasoningDuration)}`;
+              `Analyzed for ${formatDuration(msg.reasoningDuration)}`;
           }
           else if (msg.reasoningStartTime && msg.reasoningEndTime) {
             const duration =
               msg.reasoningEndTime.getTime() - msg.reasoningStartTime.getTime();
             liveReasoningTimers[msg.id] =
-              `Thought for ${formatDuration(duration)}`;
+              `Analyzed for ${formatDuration(duration)}`;
           }
           else if (msg.reasoningStartTime) {
-            liveReasoningTimers[msg.id] = "Thought for a moment";
+            liveReasoningTimers[msg.id] = "Analyzed briefly";
           }
           return;
         }
@@ -298,7 +342,7 @@ watch(
           timerIntervals[msg.id] = setInterval(() => {
             const elapsed = new Date().getTime() - startTime.getTime();
             liveReasoningTimers[msg.id] =
-              `Thinking for ${formatDuration(elapsed)}...`;
+              `Analyzing... (${formatDuration(elapsed)})`;
           }, 100);
         }
       }
@@ -312,6 +356,13 @@ watch(
         delete liveReasoningTimers[timerId];
       }
     });
+    Object.keys(maxModeTimerIntervals).forEach((timerId) => {
+      if (!currentMessageIds.includes(timerId)) {
+        clearInterval(maxModeTimerIntervals[timerId]);
+        delete maxModeTimerIntervals[timerId];
+        delete maxModeThinkingTimers[timerId];
+      }
+    });
 
     // Clean up loading states for removed messages
     Object.keys(messageLoadingStates).forEach((msgId) => {
@@ -356,14 +407,15 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-  // Clean up scroll listener from cached container or document fallback
   const scrollTarget = cachedScrollContainer || document;
   scrollTarget.removeEventListener('scroll', handleScroll);
 
-  // Clean up all timers
   Object.values(timerIntervals).forEach(timer => {
     clearInterval(timer);
   });
+  Object.values(maxModeTimerIntervals).forEach(timer => {
+    clearInterval(timer);
+  });
 });
 
 // Render message content with markdown and trigger lazy highlighting
@@ -577,8 +629,10 @@ defineExpose({ scrollToEnd, isAtBottom, chatWrapper });
         <template v-for="message in messages" :key="message.id">
           <div class="message" :class="message.role" :data-message-id="message.id">
             <div class="message-content">
-                  <!-- New Parts-Based Rendering -->
-                  <div v-if="message.parts && message.parts.length > 0" class="message-parts-container">
+                  <div v-if="message.role === 'assistant' && message.maxModeThinking" class="max-mode-thinking">
+                    {{ maxModeThinkingTimers[message.id] || 'Gathering expert opinions... (0s)' }}
+                  </div>
+                  <div v-else-if="message.parts && message.parts.length > 0" class="message-parts-container">
                     <template v-for="(group, groupIndex) in getPartGroups(message.parts)" :key="`group-${groupIndex}`">
                       <div
                         v-if="group.type === 'mixed'"
@@ -649,6 +703,27 @@ defineExpose({ scrollToEnd, isAtBottom, chatWrapper });
                       </div>
                     </template>
                   </div>
+                  <div v-if="message.role === 'assistant' && message.maxModeExpertResponses?.length" class="max-mode-experts-area">
+                    <details class="max-mode-experts-details">
+                      <summary>Thinking (experts)</summary>
+                      <template v-for="(rnd, rndIdx) in (message.maxModeRounds || [{ answers: message.maxModeExpertResponses }])" :key="rndIdx">
+                        <div class="max-mode-round-label">Round {{ rnd.round || rndIdx + 1 }}</div>
+                        <div v-for="(exp, idx) in rnd.answers" :key="`${rndIdx}-${idx}`" class="max-mode-expert-block">
+                          <div class="max-mode-expert-label">{{ exp.modelName }}</div>
+                          <div class="max-mode-expert-content" v-html="renderMessageContent(exp.content)"></div>
+                        </div>
+                      </template>
+                      <div v-if="message.maxModeVotes?.length" class="max-mode-votes">
+                        <div class="max-mode-round-label">Votes</div>
+                        <div v-for="(v, i) in message.maxModeVotes" :key="i" class="max-mode-vote-line">
+                          {{ v.modelName }} → {{ ['A','B','C','D'][v.vote] ?? (v.raw || '?') }}
+                        </div>
+                        <div v-if="message.maxModeWinnerIndex != null" class="max-mode-winner">
+                          Winner: {{ ['A','B','C','D'][message.maxModeWinnerIndex] }}
+                        </div>
+                      </div>
+                    </details>
+                  </div>
 
                   <!-- User messages without parts (not applicable for assistant due to auto-migration) -->
                   <div v-else-if="message.role === 'user'" class="bubble">
@@ -1284,6 +1359,85 @@ defineExpose({ scrollToEnd, isAtBottom, chatWrapper });
   border-bottom: none;
 }
 
+.max-mode-thinking {
+  color: var(--text-secondary);
+  font-size: 0.95rem;
+  padding: 12px 0;
+  min-height: 24px;
+}
+
+.max-mode-experts-area {
+  margin-top: 12px;
+  border-top: 1px solid var(--border);
+  padding-top: 12px;
+}
+
+.max-mode-experts-details {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+}
+
+.max-mode-experts-details summary {
+  cursor: pointer;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.max-mode-expert-block {
+  margin-top: 10px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.max-mode-expert-block:last-child {
+  border-bottom: none;
+}
+
+.max-mode-expert-label {
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+}
+
+.max-mode-expert-content {
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+
+.max-mode-expert-content :deep(p) {
+  margin: 0.25em 0;
+}
+
+.max-mode-round-label {
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-top: 12px;
+  margin-bottom: 4px;
+}
+
+.max-mode-round-label:first-child {
+  margin-top: 0;
+}
+
+.max-mode-votes {
+  margin-top: 12px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border);
+}
+
+.max-mode-vote-line {
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  margin: 2px 0;
+}
+
+.max-mode-winner {
+  font-weight: 600;
+  color: var(--primary);
+  margin-top: 6px;
+}
+
 .part-content {
   margin-top: 12px;
   min-height: 20px;
diff --git a/app/components/MessageForm.vue b/app/components/MessageForm.vue
index 93425c0..11ca769 100644
--- a/app/components/MessageForm.vue
+++ b/app/components/MessageForm.vue
@@ -17,7 +17,8 @@ import {
   showReasoningEffortSelector, 
   getDefaultReasoningEffort,
   isReasoningEnabled as checkReasoningEnabled,
-  normalizeReasoningConfig
+  normalizeReasoningConfig,
+  isMaxModeSupported
 } from "~/composables/availableModels";
 
 // Define component properties and emitted events
@@ -122,6 +123,31 @@ const isReasoningEnabled = computed(() => {
   return checkReasoningEnabled(selectedModel.value, reasoningEffort.value);
 });
 
+const paramConfig = computed(() => props.settingsManager?.settings?.parameter_config || {});
+const maxMode = computed({
+  get: () => paramConfig.value.maxMode === true,
+  set: (v) => {
+    if (!props.settingsManager) return;
+    if (!props.settingsManager.settings.parameter_config) {
+      props.settingsManager.settings.parameter_config = { maxMode: false, maxModeModels: [] };
+    }
+    props.settingsManager.settings.parameter_config.maxMode = v;
+    if (v && (!props.settingsManager.settings.parameter_config.maxModeModels || props.settingsManager.settings.parameter_config.maxModeModels.length !== 4)) {
+      props.settingsManager.settings.parameter_config.maxModeModels = ['', '', '', ''];
+    }
+    props.settingsManager.saveSettings();
+  }
+});
+const maxModeModels = computed(() => {
+  const arr = paramConfig.value.maxModeModels;
+  if (!Array.isArray(arr)) return ['', '', '', ''];
+  return [arr[0] ?? '', arr[1] ?? '', arr[2] ?? '', arr[3] ?? ''];
+});
+const maxModeValid = computed(() => {
+  const ids = maxModeModels.value.filter(Boolean);
+  return ids.length === 4 && new Set(ids).size === 4 && ids.every(id => isMaxModeSupported(props.availableModels || [], id));
+});
+const canSendWithMaxMode = computed(() => maxModeValid.value);
 
 // Watch the selected model and load the appropriate reasoning effort setting
 watch(
@@ -167,12 +193,16 @@ function closeBottomSheet() {
   isBottomSheetOpen.value = false;
 }
 
+function handleSheetModelSelected(modelId, modelName) {
+  handleModelSelect(modelId, modelName);
+  closeBottomSheet();
+}
+
 function handleModelSelect(modelId, modelName) {
   if (props.settingsManager) {
     props.settingsManager.settings.selected_model_id = modelId;
     props.settingsManager.saveSettings();
   }
-  closeBottomSheet();
 }
 
 // --- Event Handlers ---
@@ -223,12 +253,10 @@ function handleEnterKey(event) {
  * Emits the message to the parent, then clears the input.
  */
 async function submitMessage() {
-  // Emit the message to parent component
+  if (maxMode.value && !canSendWithMaxMode.value) return;
   emit("send-message", inputMessage.value, inputMessage.value, toRaw(attachments.value));
   inputMessage.value = "";
-  // Clear attachments after sending
   clearAttachments();
-  // Force textarea resize after clearing
   await nextTick();
   if (textareaRef.value) {
     textareaRef.value.style.height = "auto";
@@ -493,7 +521,6 @@ defineExpose({ setMessage, toggleReasoning, setReasoningEffort, $el: messageForm
 
       <!-- Attachment previews -->
       <div v-if="hasAttachments || isProcessingFiles" class="attachment-preview-row">
-        <!-- Processing indicator -->
         <div v-if="isProcessingFiles" class="attachment-preview processing">
           <div class="processing-spinner"></div>
           <span class="attachment-name">Processing...</span>
@@ -539,6 +566,18 @@ defineExpose({ setMessage, toggleReasoning, setReasoningEffort, $el: messageForm
           <Icon icon="material-symbols:add" width="22" height="22" />
         </button>
 
+        <button
+          type="button"
+          class="feature-button max-mode-btn"
+          :class="{ 'max-mode-on': maxMode }"
+          @click="maxMode = !maxMode"
+          aria-label="Toggle Max Mode (4 models)"
+          title="Max Mode: 4 different models answer together (4 requests)"
+        >
+          <Icon icon="material-symbols:groups" width="22" height="22" />
+          <span class="search-label">Max</span>
+        </button>
+
         <!-- Reasoning toggle for models that should show a reasoning toggle -->
         <button v-if="selectedModel && shouldShowReasoningToggle && supportsReasoning"
           type="button" class="feature-button search-toggle-btn"
@@ -575,7 +614,7 @@ defineExpose({ setMessage, toggleReasoning, setReasoningEffort, $el: messageForm
             <span class="model-name-truncate">{{ props.selectedModelName }}</span>
           </button>
 
-          <button type="submit" class="action-btn send-btn" :disabled="!trimmedMessage && !isLoading"
+          <button type="submit" class="action-btn send-btn" :disabled="(!trimmedMessage && !isLoading) || (maxMode && !canSendWithMaxMode)"
             @click="handleActionClick" :aria-label="isLoading ? 'Stop generation' : 'Send message'">
             <Icon v-if="!isLoading" icon="material-symbols:arrow-upward-rounded" width="22" height="22" />
             <Icon v-else icon="material-symbols:stop-rounded" width="22" height="22" />
@@ -590,8 +629,10 @@ defineExpose({ setMessage, toggleReasoning, setReasoningEffort, $el: messageForm
     :is-open="isBottomSheetOpen"
     :selected-model-id="props.selectedModelId"
     :selected-model-name="props.selectedModelName"
+    :filter-max-mode-only="false"
+    :exclude-model-ids="[]"
     @close="closeBottomSheet"
-    @model-selected="handleModelSelect"
+    @model-selected="handleSheetModelSelected"
   />
 </template>
 
@@ -722,6 +763,12 @@ defineExpose({ setMessage, toggleReasoning, setReasoningEffort, $el: messageForm
   border-color: var(--primary-600);
 }
 
+.max-mode-btn.max-mode-on {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+  border-color: var(--primary);
+}
+
 .input-actions {
   display: flex;
   justify-content: flex-start;
diff --git a/app/components/SettingsPanel.vue b/app/components/SettingsPanel.vue
index a867d7a..cb1357d 100644
--- a/app/components/SettingsPanel.vue
+++ b/app/components/SettingsPanel.vue
@@ -5,6 +5,7 @@ import { useDark, useToggle } from "@vueuse/core";
 import { SwitchRoot, SwitchThumb } from "reka-ui";
 import { Icon } from "@iconify/vue";
 import { listMemory, deleteMemory, clearAllMemory } from "@/composables/memory";
+import { useRateLimiter } from "@/composables/rateLimiter";
 
 // Define props and emits
 const props = defineProps(["isOpen", "initialTab"]);
@@ -12,6 +13,7 @@ const emit = defineEmits(["reloadSettings", "close"]);
 
 // --- Reactive State Variables ---
 const settingsManager = useSettings();
+const { usageStats, getNextResetTime } = useRateLimiter();
 const currTab = ref("general");
 const isDark = useDark();
 const toggleDark = useToggle(isDark);
@@ -133,6 +135,13 @@ async function saveSettings() {
   location.reload();
 }
 
+function formatResetTime() {
+  const d = getNextResetTime();
+  const isTomorrow = d.getDate() !== new Date().getDate();
+  const time = d.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
+  return isTomorrow ? `Tomorrow at ${time}` : `Tonight at ${time}`;
+}
+
 async function removeMemoryFact(fact) {
   try {
     await deleteMemory(fact);
@@ -235,6 +244,36 @@ async function handleClearAllMemory() {
                   </button>
                 </div>
               </div>
+
+              <div class="setting-item usage-section">
+                <div class="setting-info">
+                  <h3>Daily usage</h3>
+                  <p>Limits reset at midnight (local time)</p>
+                </div>
+                <div class="usage-stats">
+                  <div class="usage-stat-row">
+                    <span class="usage-stat-label">Messages</span>
+                    <div class="usage-bar-track">
+                      <div
+                        class="usage-bar-fill"
+                        :style="{ width: `${Math.min(100, (usageStats.general.used / usageStats.general.limit) * 100)}%` }"
+                      />
+                    </div>
+                    <span class="usage-stat-count">{{ usageStats.general.used }} / {{ usageStats.general.limit }}</span>
+                  </div>
+                  <div class="usage-stat-row">
+                    <span class="usage-stat-label">Images</span>
+                    <div class="usage-bar-track">
+                      <div
+                        class="usage-bar-fill"
+                        :style="{ width: `${Math.min(100, (usageStats.image.used / usageStats.image.limit) * 100)}%` }"
+                      />
+                    </div>
+                    <span class="usage-stat-count">{{ usageStats.image.used }} / {{ usageStats.image.limit }}</span>
+                  </div>
+                  <p class="usage-reset">{{ formatResetTime() }}</p>
+                </div>
+              </div>
             </div>
           </div>
 
@@ -689,6 +728,63 @@ async function handleClearAllMemory() {
   color: var(--text-primary);
 }
 
+.usage-section {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.usage-section .setting-info {
+  margin-bottom: 0.5rem;
+}
+
+.usage-stats {
+  width: 100%;
+  max-width: 400px;
+}
+
+.usage-stat-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.usage-stat-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  min-width: 72px;
+}
+
+.usage-stats .usage-bar-track {
+  flex: 1;
+  height: 8px;
+  background: var(--bg-input);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.usage-stats .usage-bar-fill {
+  height: 100%;
+  background: var(--primary);
+  border-radius: 4px;
+  transition: width 0.2s ease;
+}
+
+.usage-stat-count {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  min-width: 3em;
+  text-align: right;
+}
+
+.usage-reset {
+  margin: 8px 0 0;
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+}
+
 .switch-container {
   flex-shrink: 0;
   display: flex;
diff --git a/app/components/TopBar.vue b/app/components/TopBar.vue
index f2c473a..75a3d3f 100644
--- a/app/components/TopBar.vue
+++ b/app/components/TopBar.vue
@@ -8,28 +8,55 @@
         <Icon icon="material-symbols:add-box-outline" width="24" height="24" />
       </button>
       <div class="model-selector-container">
-        <template v-if="!isMobile">
-          <!-- Desktop: Dropdown menu -->
+        <template v-if="!isMobile || maxMode">
           <DropdownMenuRoot>
             <DropdownMenuTrigger class="model-selector-btn"
-              :aria-label="`Change model, currently ${props.selectedModelName}`">
+              :aria-label="`Change model, currently ${maxMode ? 'Max Mode slots' : effectiveSelectedModelName}`">
               <div class="model-logo-name">
-                <Logo v-if="selectedModelLogo" :src="selectedModelLogo" :size="24" class="logo-inline" :alt="props.selectedModelName" />
-                <span class="model-name-display">{{ props.selectedModelName }}</span>
+                <Logo v-if="selectedModelLogo" :src="selectedModelLogo" :size="24" class="logo-inline" :alt="effectiveSelectedModelName" />
+                <span class="model-name-display">{{ maxMode ? '4 models' : effectiveSelectedModelName }}</span>
               </div>
               <Icon icon="material-symbols:keyboard-arrow-down-rounded" width="24" height="24" class="icon" />
             </DropdownMenuTrigger>
 
             <DropdownMenuContent class="model-selector-dropdown" side="bottom" align="start" :side-offset="8">
-              <DropdownMenuLabel class="dropdown-label">Models</DropdownMenuLabel>
+              <DropdownMenuLabel class="dropdown-label">{{ maxMode ? 'Pick a model for each slot' : 'Models' }}</DropdownMenuLabel>
               <DropdownMenuSeparator />
 
-              <!-- Scroll container to preserve dropdown scrolling while allowing submenus to render outside -->
-              <div class="dropdown-scroll-container">
-                <template v-for="item in availableModels" :key="item.id || item.category">
-                  <!-- Regular model (not in a category) -->
+              <div class="dropdown-scroll-container" v-if="maxMode">
+                <DropdownMenuSub v-for="slotIndex in 4" :key="slotIndex">
+                  <DropdownMenuSubTrigger class="category-item">
+                    <span>Slot {{ slotIndex }}: {{ slotModelName(slotIndex - 1) }}</span>
+                    <Icon icon="material-symbols:chevron-right" width="24" height="24" class="icon" />
+                  </DropdownMenuSubTrigger>
+                  <DropdownMenuSubContent class="subcategory-content">
+                    <template v-for="provider in maxModeModelsList" :key="provider.category">
+                      <DropdownMenuItem
+                        v-for="model in provider.models"
+                        :key="model.id"
+                        class="model-list-item"
+                        :class="{ selected: (maxModeModels && maxModeModels[slotIndex - 1]) === model.id }"
+                        @click="selectModel(model.id, slotIndex - 1)"
+                      >
+                        <div class="model-info">
+                          <div class="model-text">
+                            <strong>{{ model.name }}</strong>
+                            <div class="model-description">{{ model.description }}</div>
+                          </div>
+                        </div>
+                        <span v-if="(maxModeModels && maxModeModels[slotIndex - 1]) === model.id" class="selected-indicator">
+                          <Icon icon="material-symbols:check-rounded" width="24" height="24" class="icon" />
+                        </span>
+                      </DropdownMenuItem>
+                    </template>
+                  </DropdownMenuSubContent>
+                </DropdownMenuSub>
+              </div>
+
+              <div class="dropdown-scroll-container" v-else>
+                <template v-for="item in modelsForDropdown" :key="item.id || item.category">
                   <DropdownMenuItem v-if="!item.category" class="model-list-item"
-                    :class="{ selected: item.id === props.selectedModelId }" @click="() => selectModel(item.id)">
+                    :class="{ selected: item.id === effectiveSelectedModelId }" @click="() => selectModel(item.id)">
                     <div class="model-info">
                       <Logo v-if="item.logo" :src="item.logo" :size="24" class="logo-inline" :alt="item.name" />
                       <div class="model-text">
@@ -37,12 +64,11 @@
                         <div class="model-description">{{ item.description }}</div>
                       </div>
                     </div>
-                    <span v-if="item.id === props.selectedModelId">
+                    <span v-if="item.id === effectiveSelectedModelId">
                       <Icon icon="material-symbols:check-rounded" width="24" height="24" class="icon" />
                     </span>
                   </DropdownMenuItem>
 
-                  <!-- Category with submodels -->
                   <DropdownMenuSub v-else>
                     <DropdownMenuSubTrigger class="category-item">
                       <Logo :src="item.logo" :size="24" class="logo-inline" :alt="item.category" />
@@ -52,14 +78,14 @@
 
                     <DropdownMenuSubContent class="subcategory-content">
                       <DropdownMenuItem v-for="model in item.models" :key="model.id" class="model-list-item"
-                        :class="{ selected: model.id === props.selectedModelId }" @click="() => selectModel(model.id)">
+                        :class="{ selected: model.id === effectiveSelectedModelId }" @click="() => selectModel(model.id)">
                         <div class="model-info">
                           <div class="model-text">
                             <strong>{{ model.name }}</strong>
                             <div class="model-description">{{ model.description }}</div>
                           </div>
                         </div>
-                        <span v-if="model.id === props.selectedModelId" class="selected-indicator">
+                        <span v-if="model.id === effectiveSelectedModelId" class="selected-indicator">
                           <Icon icon="material-symbols:check-rounded" width="24" height="24" class="icon" />
                         </span>
                       </DropdownMenuItem>
@@ -105,7 +131,7 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
 } from "reka-ui";
-import { availableModels } from "../composables/availableModels";
+import { availableModels, getMaxModeModelList } from "../composables/availableModels";
 import { Icon } from "@iconify/vue";
 import { useRoute, useRouter } from "vue-router";
 import Logo from "./Logo.vue";
@@ -147,10 +173,18 @@ const props = defineProps({
   parameterConfigOpen: {
     type: Boolean,
     default: false
+  },
+  maxMode: {
+    type: Boolean,
+    default: false
+  },
+  maxModeModels: {
+    type: Array,
+    default: () => []
   }
 });
 
-const emit = defineEmits(['model-selected', 'toggle-incognito', 'toggle-parameter-config']);
+const emit = defineEmits(['model-selected', 'toggle-incognito', 'toggle-parameter-config', 'max-mode-change']);
 
 // Get the current route
 const route = useRoute();
@@ -163,32 +197,42 @@ const handleNewChat = () => {
 // Computed property to check if we're on the incognito route
 const isIncognitoRoute = computed(() => route.path === '/incognito');
 
-// Ref for the top bar element
-const topBarRef = ref(null);
-
-// Handle both direct boolean values and refs
-const isScrolledTopValue = computed(() => {
-  return typeof props.isScrolledTop === 'boolean'
-    ? props.isScrolledTop
-    : props.isScrolledTop.value;
+const effectiveSelectedModelId = computed(() => props.selectedModelId);
+const effectiveSelectedModelName = computed(() => props.selectedModelName);
+const modelsForDropdown = computed(() => availableModels);
+const maxModeModelsList = computed(() => {
+  return availableModels.map(item => {
+    if (!item.category) return item;
+    const filtered = (item.models || []).filter(m => m.maxModeSupported === true);
+    return filtered.length ? { ...item, models: filtered } : null;
+  }).filter(Boolean);
 });
 
-function selectModel(modelId) {
+function selectModel(modelId, slotIndex) {
   const selectedModel = availableModels.flatMap(item =>
     item.category ? item.models : item
   ).find((model) => model.id === modelId);
-
   if (selectedModel) {
-    emit('model-selected', modelId, selectedModel.name);
-
-    // Close the bottom sheet on mobile after selection
-    if (isMobile.value) {
-      isBottomSheetOpen.value = false;
-    }
+    emit('model-selected', modelId, selectedModel.name, slotIndex);
   }
 }
 
-// Get window size to determine mobile/desktop view
+function slotModelName(slotIndex) {
+  const id = props.maxModeModels && props.maxModeModels[slotIndex];
+  if (!id) return 'Select';
+  const m = availableModels.flatMap(item => item.models || [item]).find(x => x.id === id);
+  return m?.name || id;
+}
+const topBarRef = ref(null);
+
+// Handle both direct boolean values and refs
+const isScrolledTopValue = computed(() => {
+  return typeof props.isScrolledTop === 'boolean'
+    ? props.isScrolledTop
+    : props.isScrolledTop.value;
+});
+
+// Get window size
 const { width: windowWidth } = useWindowSize();
 
 // Computed property to check if we're on a mobile screen
@@ -198,23 +242,16 @@ const isMobile = computed(() => {
 
 // Computed property to get the logo of the currently selected model
 const selectedModelLogo = computed(() => {
-  if (!props.selectedModelId) return null;
-
-  // Look for the selected model in the available models
+  const id = effectiveSelectedModelId.value;
+  if (!id) return null;
   for (const item of availableModels) {
     if (item.category) {
-      // If it's a category, look for the model within it
-      const modelInCategory = item.models.find(model => model.id === props.selectedModelId);
-      if (modelInCategory) {
-        // Return the category logo if the model is found in the category
-        return item.logo;
-      }
-    } else if (item.id === props.selectedModelId) {
-      // If it's a standalone model (not in a category)
+      const modelInCategory = item.models.find(model => model.id === id);
+      if (modelInCategory) return item.logo;
+    } else if (item.id === id) {
       return item.logo;
     }
   }
-
   return null;
 });
 
diff --git a/app/composables/availableModels.js b/app/composables/availableModels.js
index 3858d58..2093d6e 100644
--- a/app/composables/availableModels.js
+++ b/app/composables/availableModels.js
@@ -195,6 +195,26 @@ export function findModelById(models, id) {
   return null;
 }
 
+export function isMaxModeSupported(models, id) {
+  const model = findModelById(models, id);
+  return model?.maxModeSupported === true;
+}
+
+export function getMaxModeModelList(models) {
+  if (!models || !Array.isArray(models)) return [];
+  const out = [];
+  for (const item of models) {
+    if (item.models && Array.isArray(item.models)) {
+      for (const m of item.models) {
+        if (m.maxModeSupported === true && m.id) out.push({ id: m.id, name: m.name || m.id });
+      }
+    } else if (item.id && item.maxModeSupported === true) {
+      out.push({ id: item.id, name: item.name || item.id });
+    }
+  }
+  return out;
+}
+
 export const availableModels = [
   {
     category: "DeepSeek",
@@ -217,12 +237,25 @@ export const availableModels = [
         name: "DeepSeek V3.2",
         description: "Advanced general-purpose model designed with efficiency in mind.",
         tool_use: true,
+        maxModeSupported: true,
         reasoning: {
           supported: true,
           toggleable: true,
           defaultEnabled: true
         },
       },
+      {
+        id: "deepseek/deepseek-r1-0528",
+        name: "DeepSeek R1 0528",
+        description: "Reasoning model for complex chain-of-thought and step-by-step tasks.",
+        tool_use: false,
+        reasoning: {
+          supported: true,
+          toggleable: false
+        },
+        extra_functions: [],
+        extra_parameters: {}
+      },
     ],
   },
   {
@@ -292,6 +325,7 @@ export const availableModels = [
         name: "Kimi K2.5",
         description: "SOTA open-weights model with exceptional EQ, coding, and agentic abilities.",
         vision: true,
+        maxModeSupported: true,
         reasoning: {
           supported: true,
           toggleable: true,
@@ -302,6 +336,7 @@ export const availableModels = [
         id: "moonshotai/kimi-k2-0905",
         name: "Kimi K2",
         description: "Older open-weights model with great EQ and coding abilities.",
+        maxModeSupported: true,
         reasoning: {
           supported: true,
           toggleable: true,
@@ -343,6 +378,7 @@ export const availableModels = [
         id: "openai/gpt-oss-120b",
         name: "GPT OSS 120B",
         description: "High-performance open-weights model with exceptional STEM capabilities.",
+        maxModeSupported: true,
         reasoning: {
           supported: true,
           toggleable: false,
@@ -441,6 +477,7 @@ export const availableModels = [
         id: "z-ai/glm-5",
         name: "GLM 5",
         description: "Frontier open-weight model excelling at coding and math",
+        maxModeSupported: true,
         reasoning: {
           supported: true,
           toggleable: true,
@@ -451,6 +488,7 @@ export const availableModels = [
         id: "z-ai/glm-4.7",
         name: "GLM 4.7",
         description: "High-quality open-weight model excelling at coding and math",
+        maxModeSupported: true,
         reasoning: {
           supported: true,
           toggleable: true,
@@ -461,6 +499,7 @@ export const availableModels = [
         id: "z-ai/glm-4.7-flash",
         name: "GLM 4.7 Flash",
         description: "SOTA 30B-class model with excelent agentic capabilities",
+        maxModeSupported: true,
         reasoning: {
           supported: true,
           toggleable: true,
@@ -471,6 +510,7 @@ export const availableModels = [
         id: "z-ai/glm-4.6",
         name: "GLM 4.6",
         description: "Reliable bilingual model for reasoning and tool use.",
+        maxModeSupported: true,
         reasoning: {
           supported: true,
           toggleable: true,
diff --git a/app/composables/defaultParameters.js b/app/composables/defaultParameters.js
index 5624178..cd40dc5 100644
--- a/app/composables/defaultParameters.js
+++ b/app/composables/defaultParameters.js
@@ -7,7 +7,9 @@ export const DEFAULT_PARAMETERS = {
   temperature: 1.0,
   top_p: 0.95,
   seed: null,
-  grounding: false
+  grounding: false,
+  maxMode: false,
+  maxModeModels: []
 };
 
 export default DEFAULT_PARAMETERS;
\ No newline at end of file
diff --git a/app/composables/message.js b/app/composables/message.js
index 0a5e122..4c25654 100644
--- a/app/composables/message.js
+++ b/app/composables/message.js
@@ -204,24 +204,27 @@ export async function* handleIncomingMessage(
       const healthResponse = await fetch("/api/api_health");
       const health = await healthResponse.json();
 
-      // Check for various unavailability conditions
+      console.log("Health check result:", {
+        status: health.status,
+        dailyKeyUsageRemaining: health.dailyKeyUsageRemaining,
+        balanceRemaining: health.balanceRemaining,
+        timestamp: health.timestamp
+      });
       if (health.status === "down" || health.dailyKeyUsageRemaining <= 0 || health.balanceRemaining <= 0) {
-        let message = "⚠️ **Service Unavailable**\n\n";
+        let warningMessage = "⚠️ Service Status Warning: ";
 
         if (health.dailyKeyUsageRemaining !== undefined && health.dailyKeyUsageRemaining <= 0) {
-          message += "Daily API budget exhausted. Try again tomorrow or add your own API key in Settings → General.";
+          warningMessage += "Daily API budget exhausted. Try again tomorrow or add your own API key.";
         } else if (health.balanceRemaining !== undefined && health.balanceRemaining <= 0) {
-          message += "API balance depleted. Service temporarily unavailable.";
+          warningMessage += "API balance depleted.";
         } else {
-          message += "Service temporarily unavailable. Please try again later.";
+          warningMessage += "Service temporarily unavailable.";
         }
 
-        yield { content: message, reasoning: null };
-        return;
+        console.warn(warningMessage);
       }
     } catch (error) {
       console.error("Health check failed:", error);
-      // We'll continue anyway, in case it was just the health check endpoint failing
     }
 
     // Find the selected model info
@@ -261,13 +264,18 @@ export async function* handleIncomingMessage(
 
     // Generate system prompt based on settings and used tools
     // In incognito mode, use empty settings to avoid customization
-    const systemPrompt = await generateSystemPrompt(
+    let systemPrompt = await generateSystemPrompt(
       enabledToolNames,
       isIncognito ? {} : settings,
       memoryFacts,
-      isIncognito, // Pass incognito mode state
-      modelHasToolUse // Pass tool use capability
+      isIncognito,
+      modelHasToolUse
     );
+    if (modelParameters.systemPromptOverride) {
+      systemPrompt = modelParameters.systemPromptOverride;
+    } else if (modelParameters.systemPromptSuffix) {
+      systemPrompt = systemPrompt + modelParameters.systemPromptSuffix;
+    }
 
     // Build user message content based on attachments
     let userMessageContent;
@@ -347,6 +355,7 @@ export async function* handleIncomingMessage(
           temperature: modelParameters.temperature,
           top_p: modelParameters.top_p,
           seed: modelParameters.seed,
+          ...(modelParameters.max_tokens != null && { max_tokens: modelParameters.max_tokens }),
         }),
         // Pass custom API key if set
         ...(settings.custom_api_key && { customApiKey: settings.custom_api_key }),
diff --git a/app/composables/messagesManager.js b/app/composables/messagesManager.js
index 9826583..94f09c7 100644
--- a/app/composables/messagesManager.js
+++ b/app/composables/messagesManager.js
@@ -3,7 +3,7 @@ import { useRouter } from 'vue-router';
 import localforage from 'localforage';
 import { createConversation as createNewConversation, storeMessages, deleteConversation as deleteConv, updateBranchPath, loadConversation } from './storeConversations';
 import { handleIncomingMessage } from './message';
-import { availableModels, findModelById, normalizeReasoningConfig, getDefaultReasoningEffort } from './availableModels';
+import { availableModels, findModelById, normalizeReasoningConfig, getDefaultReasoningEffort, isMaxModeSupported } from './availableModels';
 import { addMemory, modifyMemory, deleteMemory } from './memory';
 import DEFAULT_PARAMETERS from './defaultParameters';
 import { useSettings } from './useSettings';
@@ -209,26 +209,68 @@ export function useMessagesManager(chatPanel) {
 
     if ((!message.trim() && attachments.length === 0) || isLoading.value) return;
 
-    // Check rate limit (only if not using custom API key)
+    const selectedModelId = settingsManager.settings.selected_model_id;
+    const selectedModelDetails = findModelById(availableModels, selectedModelId);
+    if (!selectedModelDetails) {
+      const tempAssistantMsg = createAssistantMessage();
+      updateAssistantMessage(tempAssistantMsg, {
+        content: "Error: No AI model selected.",
+        complete: true
+      });
+      return;
+    }
+
+    const parameterConfig = settingsManager.settings.parameter_config || { ...DEFAULT_PARAMETERS };
+    const isMaxMode = !!parameterConfig.maxMode;
+    const maxModeModelIds = Array.isArray(parameterConfig.maxModeModels)
+      ? parameterConfig.maxModeModels.filter(Boolean)
+      : [];
+    const maxModeValid = isMaxMode && maxModeModelIds.length === 4
+      && new Set(maxModeModelIds).size === 4
+      && maxModeModelIds.every(id => isMaxModeSupported(availableModels, id));
+
+    if (isMaxMode && !maxModeValid) {
+      const tempAssistantMsg = createAssistantMessage();
+      updateAssistantMessage(tempAssistantMsg, {
+        content: "Max Mode requires 4 different supported models. Select 4 models in the input area.",
+        complete: true,
+        error: true,
+        errorDetails: { name: 'MaxModeError', message: 'Select 4 different models for Max Mode' }
+      });
+      return;
+    }
+
     if (!settingsManager.settings.custom_api_key) {
       const rateLimiter = useRateLimiter();
-      const selectedModelId = settingsManager.settings.selected_model_id;
-      const limitCheck = rateLimiter.checkLimit(selectedModelId);
-
-      if (!limitCheck.canSend) {
-        // Create a temporary message to show the rate limit error
-        const tempAssistantMsg = createAssistantMessage();
-        updateAssistantMessage(tempAssistantMsg, {
-          content: `⚠️ **Rate Limit Reached**\n\n${limitCheck.error}\n\nYou can add your own Hack Club API key in Settings → General to bypass rate limits.`,
-          complete: true,
-          error: true,
-          errorDetails: { name: 'RateLimitError', message: limitCheck.error }
-        });
-        return;
+      if (isMaxMode) {
+        const stats = rateLimiter.getUsageStats();
+        if (stats.general.remaining < 5) {
+          const tempAssistantMsg = createAssistantMessage();
+          updateAssistantMessage(tempAssistantMsg, {
+            content: `⚠️ **Rate Limit**\n\nMax Mode uses 5 requests (4 experts + synthesis). You have ${stats.general.remaining} message(s) left today. Try again tomorrow or use your own API key in Settings → General.`,
+            complete: true,
+            error: true,
+            errorDetails: { name: 'RateLimitError', message: 'Need 5 requests for Max Mode' }
+          });
+          return;
+        }
+        for (let i = 0; i < 5; i++) {
+          rateLimiter.recordRequest(maxModeModelIds[i % 4]);
+        }
+      } else {
+        const limitCheck = rateLimiter.checkLimit(selectedModelId);
+        if (!limitCheck.canSend) {
+          const tempAssistantMsg = createAssistantMessage();
+          updateAssistantMessage(tempAssistantMsg, {
+            content: `⚠️ **Rate Limit Reached**\n\n${limitCheck.error}\n\nYou can add your own Hack Club API key in Settings → General to bypass rate limits.`,
+            complete: true,
+            error: true,
+            errorDetails: { name: 'RateLimitError', message: limitCheck.error }
+          });
+          return;
+        }
+        rateLimiter.recordRequest(selectedModelId);
       }
-
-      // Record the request
-      rateLimiter.recordRequest(selectedModelId);
     }
 
     controller.value = new AbortController();
@@ -260,31 +302,14 @@ export function useMessagesManager(chatPanel) {
     }
 
     await nextTick();
-    // Use requestAnimationFrame for more reliable scrolling
     requestAnimationFrame(() => {
       chatPanel?.value?.scrollToEnd("smooth");
     });
 
-    // Get current model details
-    const selectedModelDetails = findModelById(availableModels, settingsManager.settings.selected_model_id);
-
-    if (!selectedModelDetails) {
-      console.error("No model selected or model details not found. Aborting message send.");
-      updateAssistantMessage(assistantMsg, {
-        content: (assistantMsg.content ? assistantMsg.content + "\n\n" : "") + "Error: No AI model selected.",
-        complete: true
-      });
-      isLoading.value = false;
-      return;
-    }
-
-    // Construct model parameters
     const reasoningConfig = normalizeReasoningConfig(selectedModelDetails);
     const savedReasoningEffort = settingsManager.getModelSetting(selectedModelDetails.id, "reasoning_effort") ||
       getDefaultReasoningEffort(selectedModelDetails);
 
-    const parameterConfig = settingsManager.settings.parameter_config || { ...DEFAULT_PARAMETERS };
-
     const model_parameters = {
       ...parameterConfig,
       ...selectedModelDetails.extra_parameters,
@@ -309,9 +334,7 @@ export function useMessagesManager(chatPanel) {
       // because handleIncomingMessage will add the user message from the `message` param.
       
       const historyForAPI = visibleMessages.value.filter(msg => {
-        // Exclude incomplete messages (the assistant placeholder we just created)
         if (!msg.complete) return false;
-        // Exclude the current user message - it's always the last user message in visibleMessages
         if (msg.role === 'user') {
           const lastUserMsg = [...visibleMessages.value].reverse().find(m => m.role === 'user');
           if (lastUserMsg && msg.id === lastUserMsg.id) return false;
@@ -319,6 +342,236 @@ export function useMessagesManager(chatPanel) {
         return true;
       });
 
+      if (isMaxMode) {
+        updateAssistantMessage(assistantMsg, {
+          maxModeThinking: true,
+          maxModeThinkingStart: Date.now()
+        });
+        const updateMessageReactivityMax = () => {
+          const idx = messages.value.findIndex(m => m.id === assistantMsg.id);
+          if (idx !== -1) {
+            messages.value.splice(idx, 1, { ...messages.value[idx] });
+          }
+        };
+
+        async function consumeStream(gen) {
+          let content = '';
+          let reasoning = '';
+          const usage = { completion_tokens: 0, prompt_tokens: 0, total_tokens: 0 };
+          for await (const chunk of gen) {
+            if (chunk.content) content += chunk.content;
+            if (chunk.reasoning) reasoning += chunk.reasoning;
+            if (chunk.usage) {
+              usage.completion_tokens += chunk.usage.completion_tokens || 0;
+              usage.prompt_tokens += chunk.usage.prompt_tokens || 0;
+              usage.total_tokens += chunk.usage.total_tokens || 0;
+            }
+            if (chunk.error) return { content, reasoning, usage, error: true, errorDetails: chunk.errorDetails };
+          }
+          return { content, reasoning, usage };
+        }
+
+        function addUsage(msg, usage) {
+          if (!usage) return;
+          msg.tokenCount = (msg.tokenCount || 0) + (usage.completion_tokens || 0);
+          msg.promptTokens = (msg.promptTokens || 0) + (usage.prompt_tokens || 0);
+          msg.totalTokens = (msg.totalTokens || 0) + (usage.total_tokens || 0);
+        }
+
+        const EXPERT_SUFFIX = ' You are one of 4 AI experts. Give a concise analysis; your response will be combined with others. Keep it brief (under ~100 words).';
+        const generators = maxModeModelIds.map((modelId) => {
+          const details = findModelById(availableModels, modelId);
+          const reasoningConfig = normalizeReasoningConfig(details);
+          const savedEffort = settingsManager.getModelSetting(modelId, "reasoning_effort") || getDefaultReasoningEffort(details);
+          const modelParams = {
+            ...parameterConfig,
+            ...(details?.extra_parameters || {}),
+            systemPromptSuffix: EXPERT_SUFFIX,
+            max_tokens: 400,
+            reasoning: {
+              effort: savedEffort,
+              enabled: reasoningConfig.toggleable ? savedEffort !== 'none' : true
+            }
+          };
+          return handleIncomingMessage(
+            message,
+            historyForAPI,
+            controller.value,
+            modelId,
+            modelParams,
+            settingsManager.settings,
+            details?.extra_functions || [],
+            parameterConfig.grounding ?? DEFAULT_PARAMETERS.grounding,
+            isIncognito.value,
+            attachments
+          );
+        });
+        const results = await Promise.all(generators.map(gen => consumeStream(gen)));
+        results.forEach(r => addUsage(assistantMsg, r.usage));
+        updateMessageReactivityMax();
+        const hasError = results.some(r => r.error);
+        if (hasError) {
+          const errMsg = results.find(r => r.error);
+          updateAssistantMessage(assistantMsg, {
+            maxModeThinking: false,
+            content: `\n\n[Max Mode error: ${errMsg?.errorDetails?.message || 'One or more experts failed'}]`,
+            complete: true,
+            error: true,
+            errorDetails: errMsg?.errorDetails || { name: 'MaxModeError', message: 'Expert phase failed' }
+          });
+        } else {
+          const expertResponses = results.map((r, i) => {
+            const details = findModelById(availableModels, maxModeModelIds[i]);
+            return {
+              modelId: maxModeModelIds[i],
+              modelName: details?.name || maxModeModelIds[i],
+              content: (r.reasoning?.trim() ? r.reasoning.trim() + '\n\n' : '') + (r.content || '').trim()
+            };
+          });
+          const rounds = [{ round: 1, answers: expertResponses }];
+          const REFINED_SUFFIX = ' You have seen the other experts\' answers. Give your refined answer only (concise, under ~80 words).';
+          const refinedPrompts = maxModeModelIds.map((_, i) => {
+            const blocks = expertResponses.map((ex, j) => `--- Expert ${j + 1} ---\n${ex.content}`).join('\n\n');
+            return `User asked:\n\n${message}\n\nAll experts\' initial answers:\n\n${blocks}\n\nNow give your refined answer after seeing the others.`;
+          });
+          const refinedGens = maxModeModelIds.map((modelId, i) => {
+            const details = findModelById(availableModels, modelId);
+            const reasoningConfig = normalizeReasoningConfig(details);
+            const savedEffort = settingsManager.getModelSetting(modelId, "reasoning_effort") || getDefaultReasoningEffort(details);
+            const modelParams = {
+              ...parameterConfig,
+              ...(details?.extra_parameters || {}),
+              systemPromptSuffix: REFINED_SUFFIX,
+              max_tokens: 300,
+              reasoning: { effort: savedEffort, enabled: reasoningConfig.toggleable ? savedEffort !== 'none' : true }
+            };
+            return handleIncomingMessage(refinedPrompts[i], [], controller.value, modelId, modelParams, settingsManager.settings, details?.extra_functions || [], parameterConfig.grounding ?? DEFAULT_PARAMETERS.grounding, isIncognito.value, []);
+          });
+          const refinedResults = await Promise.all(refinedGens.map(gen => consumeStream(gen)));
+          refinedResults.forEach(r => addUsage(assistantMsg, r.usage));
+          updateMessageReactivityMax();
+          const refinedHasError = refinedResults.some(r => r.error);
+          if (refinedHasError) {
+            const errMsg = refinedResults.find(r => r.error);
+            updateAssistantMessage(assistantMsg, {
+              maxModeThinking: false,
+              content: `\n\n[Max Mode error: ${errMsg?.errorDetails?.message || 'Refined round failed'}]`,
+              complete: true,
+              error: true,
+              errorDetails: errMsg?.errorDetails || { name: 'MaxModeError', message: 'Refined round failed' }
+            });
+          } else {
+          const refinedAnswers = refinedResults.map((r, i) => {
+            const details = findModelById(availableModels, maxModeModelIds[i]);
+            return {
+              modelId: maxModeModelIds[i],
+              modelName: details?.name || maxModeModelIds[i],
+              content: (r.reasoning?.trim() ? r.reasoning.trim() + '\n\n' : '') + (r.content || '').trim()
+            };
+          });
+          rounds.push({ round: 2, answers: refinedAnswers });
+
+          function parseVote(text) {
+            const t = (text || '').toUpperCase().replace(/\s/g, '');
+            const m = t.match(/\b([ABCD])\b/);
+            if (m) return { A: 0, B: 1, C: 2, D: 3 }[m[1]];
+            if (/^[ABCD]$/.test(t)) return { A: 0, B: 1, C: 2, D: 3 }[t];
+            return null;
+          }
+
+          let currentAnswers = refinedAnswers;
+          let voteRound = 0;
+          let votesByModel = [];
+          let winnerIndex = null;
+          const MAX_TIE_BREAKS = 1;
+
+          while (true) {
+            const votePrompt = `Answers:\nA) ${currentAnswers[0].content.slice(0, 400)}\nB) ${currentAnswers[1].content.slice(0, 400)}\nC) ${currentAnswers[2].content.slice(0, 400)}\nD) ${currentAnswers[3].content.slice(0, 400)}\n\nWhich is best? Reply with only one letter: A, B, C, or D.`;
+            const voteGens = maxModeModelIds.map((modelId) => {
+              const details = findModelById(availableModels, modelId);
+              const reasoningConfig = normalizeReasoningConfig(details);
+              const savedEffort = settingsManager.getModelSetting(modelId, "reasoning_effort") || getDefaultReasoningEffort(details);
+              const modelParams = {
+                ...parameterConfig,
+                ...(details?.extra_parameters || {}),
+                systemPromptOverride: 'Reply with only one letter: A, B, C, or D. Nothing else.',
+                max_tokens: 10,
+                reasoning: { effort: savedEffort, enabled: false }
+              };
+              return handleIncomingMessage(votePrompt, [], controller.value, modelId, modelParams, settingsManager.settings, [], parameterConfig.grounding ?? DEFAULT_PARAMETERS.grounding, isIncognito.value, []);
+            });
+            const voteResults = await Promise.all(voteGens.map(gen => consumeStream(gen)));
+            voteResults.forEach(r => addUsage(assistantMsg, r.usage));
+            updateMessageReactivityMax();
+            const votes = voteResults.map((r, i) => {
+              const details = findModelById(availableModels, maxModeModelIds[i]);
+              const raw = (r.content || '').trim();
+              const v = parseVote(raw);
+              return { modelName: details?.name || maxModeModelIds[i], vote: v, raw };
+            });
+            votesByModel = votes;
+            const tally = [0, 0, 0, 0];
+            votes.forEach(({ vote }) => {
+              if (vote != null && vote >= 0 && vote <= 3) tally[vote]++;
+            });
+            const maxVotes = Math.max(...tally);
+            const winners = tally.map((c, i) => c === maxVotes ? i : -1).filter(i => i >= 0);
+            if (winners.length === 1) {
+              winnerIndex = winners[0];
+              break;
+            }
+            if (voteRound >= MAX_TIE_BREAKS) {
+              winnerIndex = winners[0];
+              break;
+            }
+            const tieBreakPrompt = `User asked: ${message}\n\nRefined answers (vote was tie):\n${currentAnswers.map((a, i) => `${String.fromCharCode(65 + i)}) ${a.content}`).join('\n\n')}\n\nGive a new concise answer (under 60 words).`;
+            const tieBreakGens = maxModeModelIds.map((modelId) => {
+              const details = findModelById(availableModels, modelId);
+              const reasoningConfig = normalizeReasoningConfig(details);
+              const savedEffort = settingsManager.getModelSetting(modelId, "reasoning_effort") || getDefaultReasoningEffort(details);
+              const modelParams = {
+                ...parameterConfig,
+                ...(details?.extra_parameters || {}),
+                systemPromptSuffix: ' One short paragraph only.',
+                max_tokens: 200,
+                reasoning: { effort: savedEffort, enabled: reasoningConfig.toggleable ? savedEffort !== 'none' : true }
+              };
+              return handleIncomingMessage(tieBreakPrompt, [], controller.value, modelId, modelParams, settingsManager.settings, details?.extra_functions || [], parameterConfig.grounding ?? DEFAULT_PARAMETERS.grounding, isIncognito.value, []);
+            });
+            const tieBreakResults = await Promise.all(tieBreakGens.map(gen => consumeStream(gen)));
+            tieBreakResults.forEach(r => addUsage(assistantMsg, r.usage));
+            updateMessageReactivityMax();
+            currentAnswers = tieBreakResults.map((r, i) => {
+              const details = findModelById(availableModels, maxModeModelIds[i]);
+              return {
+                modelId: maxModeModelIds[i],
+                modelName: details?.name || maxModeModelIds[i],
+                content: (r.reasoning?.trim() ? r.reasoning.trim() + '\n\n' : '') + (r.content || '').trim()
+              };
+            });
+            rounds.push({ round: 3 + voteRound, answers: currentAnswers });
+            voteRound++;
+          }
+
+          const winningContent = currentAnswers[winnerIndex].content;
+          updateAssistantMessage(assistantMsg, {
+            maxModeThinking: false,
+            maxModeExpertResponses: rounds[0].answers,
+            maxModeRounds: rounds,
+            maxModeVotes: votesByModel,
+            maxModeWinnerIndex: winnerIndex
+          });
+          updateMessageReactivityMax();
+          partsBuilder.appendContent(winningContent);
+          assistantMsg.content = winningContent;
+          assistantMsg.parts = partsBuilder.toArray();
+          assistantMsg.tool_calls = partsBuilder.getAllTools();
+          const finalMsg = { ...assistantMsg, parts: assistantMsg.parts, tool_calls: assistantMsg.tool_calls };
+          const idx = messages.value.findIndex(m => m.id === assistantMsg.id);
+          if (idx !== -1) messages.value.splice(idx, 1, finalMsg);
+          }
+        }
+      } else {
       const streamGenerator = handleIncomingMessage(
         message,
         historyForAPI,
@@ -435,6 +688,7 @@ export function useMessagesManager(chatPanel) {
 
       // Final flush after stream completes to ensure all content is rendered
       updateMessageReactivity();
+      }
 
     } catch (error) {
       console.error('Error in stream processing:', error);
diff --git a/app/composables/rateLimiter.js b/app/composables/rateLimiter.js
index 2e574e6..29760f7 100644
--- a/app/composables/rateLimiter.js
+++ b/app/composables/rateLimiter.js
@@ -1,7 +1,7 @@
 /**
  * @file rateLimiter.js
  * @description Client-side daily rate limiter using localStorage for persistence.
- * Limits: 96 general requests/day, 12 image generation requests/day.
+ * Limits: 96 general requests/day, 8 image generation requests/day.
  * Resets at midnight local time.
  */
 
@@ -9,7 +9,7 @@ import { ref, computed } from 'vue';
 
 // Rate limit configuration
 const GENERAL_LIMIT = 96;
-const IMAGE_LIMIT = 12;
+const IMAGE_LIMIT = 8;
 const STORAGE_KEY = 'libre_rate_limits';
 
 // Image generation model IDs
@@ -26,6 +26,11 @@ function getTodayStart() {
     return new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
 }
 
+function getNextResetTime() {
+    const now = new Date();
+    return new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
+}
+
 /**
  * Load rate limit data from localStorage
  */
@@ -75,6 +80,22 @@ function getOrCreateTodayData() {
 // Reactive state
 const rateLimitData = ref(getOrCreateTodayData());
 
+export const usageStats = computed(() => {
+  const data = rateLimitData.value;
+  return {
+    general: {
+      used: data.generalCount,
+      limit: GENERAL_LIMIT,
+      remaining: Math.max(0, GENERAL_LIMIT - data.generalCount)
+    },
+    image: {
+      used: data.imageCount,
+      limit: IMAGE_LIMIT,
+      remaining: Math.max(0, IMAGE_LIMIT - data.imageCount)
+    }
+  };
+});
+
 /**
  * Check if a model is an image generation model
  */
@@ -124,14 +145,13 @@ function recordRequest(modelId) {
     rateLimitData.value = getOrCreateTodayData();
 
     const isImage = isImageGenerationModel(modelId);
-
-    if (isImage) {
-        rateLimitData.value.imageCount++;
-    } else {
-        rateLimitData.value.generalCount++;
-    }
-
-    saveRateLimitData(rateLimitData.value);
+    const next = {
+        ...rateLimitData.value,
+        generalCount: rateLimitData.value.generalCount + (isImage ? 0 : 1),
+        imageCount: rateLimitData.value.imageCount + (isImage ? 1 : 0)
+    };
+    rateLimitData.value = next;
+    saveRateLimitData(next);
 }
 
 /**
@@ -162,6 +182,8 @@ export function useRateLimiter() {
         checkLimit,
         recordRequest,
         getUsageStats,
+        usageStats,
+        getNextResetTime,
         isImageGenerationModel,
         GENERAL_LIMIT,
         IMAGE_LIMIT
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 805eec1..b3d28cb 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -21,7 +21,11 @@
       <TopBar :is-scrolled-top="isScrolledTop" :selected-model-name="selectedModelName"
         :selected-model-id="selectedModelId" :toggle-sidebar="toggleSidebar" :sidebar-open="sidebarOpen"
         :is-incognito="isIncognito" :show-incognito-button="!route.params.id && messages.length === 0" :messages="messages"
-        :parameter-config-open="parameterConfigPanelOpen" @model-selected="handleModelSelect"
+        :parameter-config-open="parameterConfigPanelOpen"
+        :max-mode="maxMode"
+        :max-mode-models="maxModeModelsArray"
+        @model-selected="handleModelSelect"
+        @max-mode-change="handleMaxModeChange"
         @toggle-incognito="toggleIncognito"
         @toggle-parameter-config="parameterConfigPanelOpen = !parameterConfigPanelOpen" />
 
@@ -85,6 +89,11 @@ const { isIncognito, toggleIncognito: globalToggleIncognito } = useGlobalIncogni
 // Compute selectedModelName from settingsManager to maintain reactivity
 const selectedModelName = computed(() => settingsManager.selectedModelName);
 const selectedModelId = computed(() => settingsManager.settings.selected_model_id);
+const maxModeModelsArray = computed(() => {
+  const arr = settingsManager.settings?.parameter_config?.maxModeModels;
+  return Array.isArray(arr) ? arr : [];
+});
+const maxMode = computed(() => !!settingsManager.settings?.parameter_config?.maxMode);
 
 // Initialize shortcut keys
 const keys = useMagicKeys()
@@ -95,10 +104,10 @@ const mod = isMac ? keys.meta : keys.ctrl;
 const route = useRoute(); // Get current route
 const router = useRouter();
 
-const sidebarOpen = ref(true); // Set to false initially, will be updated in onMounted
+const sidebarOpen = ref(true);
 const parameterConfigPanelOpen = ref(false);
 const isSettingsOpen = ref(false);
-const settingsInitialTab = ref('general'); // Controls which tab opens in settings panel
+const settingsInitialTab = ref('general');
 
 // Set up dynamic page title
 const title = computed(() => {
@@ -181,10 +190,32 @@ function handleNewConversation() {
 
 /**
  * Handles model selection from the TopBar component.
- * Updates the settings with the selected model.
+ * When slotIndex is 0-3, assigns the model to that Max Mode slot; otherwise sets main model.
  */
-function handleModelSelect(modelId, modelName) {
-  settingsManager.settings.selected_model_id = modelId;
+function handleModelSelect(modelId, modelName, slotIndex) {
+  if (typeof slotIndex === 'number' && slotIndex >= 0 && slotIndex <= 3) {
+    const paramConfig = settingsManager.settings?.parameter_config || {};
+    const next = [...(paramConfig.maxModeModels || ['', '', '', ''])];
+    next[slotIndex] = modelId;
+    if (!settingsManager.settings.parameter_config) {
+      settingsManager.settings.parameter_config = {};
+    }
+    settingsManager.settings.parameter_config.maxModeModels = next;
+    settingsManager.saveSettings();
+  } else {
+    settingsManager.settings.selected_model_id = modelId;
+    settingsManager.saveSettings();
+  }
+}
+
+function handleMaxModeChange(on) {
+  if (!settingsManager.settings.parameter_config) {
+    settingsManager.settings.parameter_config = {};
+  }
+  settingsManager.settings.parameter_config.maxMode = !!on;
+  if (on && (!settingsManager.settings.parameter_config.maxModeModels || settingsManager.settings.parameter_config.maxModeModels.length !== 4)) {
+    settingsManager.settings.parameter_config.maxModeModels = ['', '', '', ''];
+  }
   settingsManager.saveSettings();
 }
 
diff --git a/package-lock.json b/package-lock.json
index 3b929bc..510fa42 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "libre-assistant",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "libre-assistant",
-      "version": "0.9.0",
+      "version": "0.9.1",
       "hasInstallScript": true,
       "dependencies": {
         "@iconify/vue": "^5.0.0",
diff --git a/package.json b/package.json
index 2df3eb2..36ebebc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "libre-assistant",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "type": "module",
   "private": true,
   "scripts": {
diff --git a/server/api/api_health.js b/server/api/api_health.js
index 5fa000a..0f6b408 100644
--- a/server/api/api_health.js
+++ b/server/api/api_health.js
@@ -5,6 +5,7 @@ export default defineEventHandler(async (event) => {
         const response = await fetch("https://ai.hackclub.com/up");
 
         if (!response.ok) {
+            console.error(`Health check failed: ${response.status} ${response.statusText}`);
             return { status: "down", reason: "api_unreachable" };
         }