From 38b1ac933e3b5d5ac3c7d066360fee6b27c092d4 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Tue, 10 Feb 2026 21:32:02 -0500
Subject: [PATCH] Add settings page, model management, and chat UX improvements

- Settings infrastructure: key-value settings table, GET/PUT API, Pinia store
- Configurable assistant name (default "Fable") in settings and LLM system prompt
- Model catalog with 18 models in 3 categories (General Purpose, Coding,
  Uncensored / Creative Writing) with download/select/remove functionality
- Move Ollama status indicator from chat views to global nav bar
- Chat bubble layout: user messages right-aligned, assistant left-aligned
- Floating dark input bar with auto-focus and circular send button
- Fix HTML entity rendering (&#39; apostrophe issue in marked/DOMPurify pipeline)
- Fix new chat button navigation (fetchConversation before router.push)
- Recent chats section on home page with "New Chat" button
- Update summary.md with Phase 4.5 changes

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 alembic/versions/0006_add_settings_table.py |  28 +
 frontend/src/App.vue                        |  15 +-
 frontend/src/components/AppHeader.vue       |  45 ++
 frontend/src/components/ChatMessage.vue     | 103 +++-
 frontend/src/components/ChatPanel.vue       | 154 +++--
 frontend/src/router/index.ts                |   5 +
 frontend/src/stores/settings.ts             |  69 +++
 frontend/src/types/settings.ts              |  13 +
 frontend/src/utils/markdown.ts              |  19 +-
 frontend/src/views/ChatView.vue             | 165 +++---
 frontend/src/views/HomeView.vue             |  77 +++
 frontend/src/views/SettingsView.vue         | 607 ++++++++++++++++++++
 src/fabledassistant/app.py                  |   2 +
 src/fabledassistant/models/__init__.py      |   1 +
 src/fabledassistant/models/setting.py       |  14 +
 src/fabledassistant/routes/chat.py          |  47 +-
 src/fabledassistant/routes/settings.py      |  22 +
 src/fabledassistant/services/llm.py         |   4 +-
 src/fabledassistant/services/settings.py    |  28 +
 summary.md                                  |  75 ++-
 20 files changed, 1257 insertions(+), 236 deletions(-)
 create mode 100644 alembic/versions/0006_add_settings_table.py
 create mode 100644 frontend/src/stores/settings.ts
 create mode 100644 frontend/src/types/settings.ts
 create mode 100644 frontend/src/views/SettingsView.vue
 create mode 100644 src/fabledassistant/models/setting.py
 create mode 100644 src/fabledassistant/routes/settings.py
 create mode 100644 src/fabledassistant/services/settings.py

diff --git a/alembic/versions/0006_add_settings_table.py b/alembic/versions/0006_add_settings_table.py
new file mode 100644
index 0000000..430b87e
--- /dev/null
+++ b/alembic/versions/0006_add_settings_table.py
@@ -0,0 +1,28 @@
+"""add settings table
+
+Revision ID: 0006
+Revises: 0005
+Create Date: 2025-01-01 00:00:00.000000
+"""
+
+from alembic import op
+import sqlalchemy as sa
+
+revision = "0006"
+down_revision = "0005"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    conn = op.get_bind()
+    conn.execute(sa.text("""
+        CREATE TABLE IF NOT EXISTS settings (
+            key TEXT PRIMARY KEY,
+            value TEXT NOT NULL DEFAULT ''
+        )
+    """))
+
+
+def downgrade() -> None:
+    op.execute("DROP TABLE IF EXISTS settings")
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 5c3602e..f0397ee 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,14 +1,18 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref, computed, onMounted, onUnmounted } from "vue";
 import { useRoute } from "vue-router";
 import AppHeader from "@/components/AppHeader.vue";
 import ChatPanel from "@/components/ChatPanel.vue";
 import ToastNotification from "@/components/ToastNotification.vue";
 import { useTheme } from "@/composables/useTheme";
+import { useChatStore } from "@/stores/chat";
+import { useSettingsStore } from "@/stores/settings";
 
 useTheme();
 
 const route = useRoute();
+const chatStore = useChatStore();
+const settingsStore = useSettingsStore();
 const chatPanelOpen = ref(false);
 
 const contextNoteId = computed(() => {
@@ -24,6 +28,15 @@ const contextNoteId = computed(() => {
 function toggleChatPanel() {
   chatPanelOpen.value = !chatPanelOpen.value;
 }
+
+onMounted(() => {
+  chatStore.startStatusPolling();
+  settingsStore.fetchSettings();
+});
+
+onUnmounted(() => {
+  chatStore.stopStatusPolling();
+});
 </script>
 
 <template>
diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
index 7dc332c..a8dd257 100644
--- a/frontend/src/components/AppHeader.vue
+++ b/frontend/src/components/AppHeader.vue
@@ -1,11 +1,28 @@
 <script setup lang="ts">
+import { computed } from "vue";
 import { useTheme } from "@/composables/useTheme";
+import { useChatStore } from "@/stores/chat";
 
 const { theme, toggleTheme } = useTheme();
+const chatStore = useChatStore();
 
 const emit = defineEmits<{
   toggleChatPanel: [];
 }>();
+
+const statusLabel = computed(() => {
+  if (chatStore.ollamaStatus === "unavailable") return "Ollama unavailable";
+  if (chatStore.modelStatus === "not_found") return "Model downloading...";
+  if (chatStore.chatReady) return "Connected";
+  return "Checking...";
+});
+
+const statusClass = computed(() => {
+  if (chatStore.ollamaStatus === "unavailable") return "status-red";
+  if (chatStore.modelStatus === "not_found") return "status-yellow";
+  if (chatStore.chatReady) return "status-green";
+  return "status-yellow";
+});
 </script>
 
 <template>
@@ -16,6 +33,10 @@ const emit = defineEmits<{
         <router-link to="/notes" class="nav-link">Notes</router-link>
         <router-link to="/tasks" class="nav-link">Tasks</router-link>
         <router-link to="/chat" class="nav-link">Chat</router-link>
+        <router-link to="/settings" class="nav-link">Settings</router-link>
+        <span class="status-indicator" :class="statusClass" :title="statusLabel">
+          <span class="status-dot"></span>
+        </span>
         <button class="btn-chat-panel" @click="emit('toggleChatPanel')" title="Open chat panel">
           &#x1F4AC;
         </button>
@@ -59,6 +80,30 @@ const emit = defineEmits<{
 .nav-link:hover {
   color: var(--color-primary);
 }
+.status-indicator {
+  display: flex;
+  align-items: center;
+}
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.status-green .status-dot {
+  background: #22c55e;
+}
+.status-yellow .status-dot {
+  background: #eab308;
+  animation: pulse-dot 2s infinite;
+}
+.status-red .status-dot {
+  background: #ef4444;
+}
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
 .btn-chat-panel {
   background: none;
   border: 1px solid var(--color-border);
diff --git a/frontend/src/components/ChatMessage.vue b/frontend/src/components/ChatMessage.vue
index 91c3d31..069bf1e 100644
--- a/frontend/src/components/ChatMessage.vue
+++ b/frontend/src/components/ChatMessage.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { renderMarkdown } from "@/utils/markdown";
+import { useSettingsStore } from "@/stores/settings";
 import type { Message } from "@/types/chat";
 
+const settingsStore = useSettingsStore();
+
 const props = defineProps<{
   message: Message;
   isStreaming?: boolean;
@@ -19,7 +22,7 @@ const roleLabel = computed(() => {
     case "user":
       return "You";
     case "assistant":
-      return "Assistant";
+      return settingsStore.assistantName;
     default:
       return props.message.role;
   }
@@ -28,39 +31,57 @@ const roleLabel = computed(() => {
 
 <template>
   <div class="chat-message" :class="`role-${message.role}`">
-    <div class="message-header">
-      <span class="role-label">{{ roleLabel }}</span>
-      <div class="message-actions" v-if="message.role === 'assistant' && !isStreaming">
-        <button class="btn-save" @click="emit('saveAsNote', message.id)" title="Save as note">
-          Save as Note
-        </button>
+    <div class="message-bubble">
+      <div class="message-header">
+        <span class="role-label">{{ roleLabel }}</span>
+        <div class="message-actions" v-if="message.role === 'assistant' && !isStreaming">
+          <button class="btn-save" @click="emit('saveAsNote', message.id)" title="Save as note">
+            Save as Note
+          </button>
+        </div>
+      </div>
+      <div class="message-content prose" v-html="rendered"></div>
+      <div
+        v-if="message.context_note_id"
+        class="context-badge"
+      >
+        <router-link :to="`/notes/${message.context_note_id}`">
+          Note #{{ message.context_note_id }}
+        </router-link>
       </div>
-    </div>
-    <div class="message-content prose" v-html="rendered"></div>
-    <div
-      v-if="message.context_note_id"
-      class="context-badge"
-    >
-      <router-link :to="`/notes/${message.context_note_id}`">
-        Note #{{ message.context_note_id }}
-      </router-link>
     </div>
   </div>
 </template>
 
 <style scoped>
 .chat-message {
-  padding: 0.75rem 1rem;
-  border-radius: 8px;
-  margin-bottom: 0.5rem;
+  display: flex;
+  margin-bottom: 0.75rem;
 }
 .role-user {
-  background: var(--color-bg-secondary);
+  justify-content: flex-end;
 }
 .role-assistant {
+  justify-content: flex-start;
+}
+
+.message-bubble {
+  max-width: 80%;
+  padding: 0.75rem 1rem;
+  border-radius: 16px;
+}
+
+.role-user .message-bubble {
+  background: var(--color-primary);
+  color: #fff;
+  border-bottom-right-radius: 4px;
+}
+.role-assistant .message-bubble {
   background: var(--color-bg-card);
   border: 1px solid var(--color-border);
+  border-bottom-left-radius: 4px;
 }
+
 .message-header {
   display: flex;
   align-items: center;
@@ -68,26 +89,51 @@ const roleLabel = computed(() => {
   margin-bottom: 0.25rem;
 }
 .role-label {
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   font-weight: 600;
-  color: var(--color-text-muted);
   text-transform: uppercase;
+  letter-spacing: 0.03em;
 }
+.role-user .role-label {
+  color: rgba(255, 255, 255, 0.7);
+}
+.role-assistant .role-label {
+  color: var(--color-text-muted);
+}
+
 .message-content {
   font-size: 0.95rem;
-  line-height: 1.5;
+  line-height: 1.55;
   word-break: break-word;
 }
 .message-content :deep(p:last-child) {
   margin-bottom: 0;
 }
+
+/* User bubble content overrides for readability on primary bg */
+.role-user .message-content :deep(a) {
+  color: rgba(255, 255, 255, 0.9);
+  text-decoration: underline;
+}
+.role-user .message-content :deep(code) {
+  background: rgba(255, 255, 255, 0.15);
+  color: #fff;
+}
+.role-user .message-content :deep(pre) {
+  background: rgba(0, 0, 0, 0.2);
+}
+.role-user .message-content :deep(blockquote) {
+  border-left-color: rgba(255, 255, 255, 0.4);
+  color: rgba(255, 255, 255, 0.85);
+}
+
 .message-actions {
   display: flex;
   gap: 0.5rem;
 }
 .btn-save {
-  font-size: 0.75rem;
-  padding: 0.15rem 0.5rem;
+  font-size: 0.7rem;
+  padding: 0.1rem 0.4rem;
   background: transparent;
   border: 1px solid var(--color-border);
   border-radius: 4px;
@@ -100,13 +146,16 @@ const roleLabel = computed(() => {
   border-color: var(--color-primary);
 }
 .context-badge {
-  margin-top: 0.5rem;
-  font-size: 0.8rem;
+  margin-top: 0.4rem;
+  font-size: 0.75rem;
 }
 .context-badge a {
   color: var(--color-primary);
   text-decoration: none;
 }
+.role-user .context-badge a {
+  color: rgba(255, 255, 255, 0.8);
+}
 .context-badge a:hover {
   text-decoration: underline;
 }
diff --git a/frontend/src/components/ChatPanel.vue b/frontend/src/components/ChatPanel.vue
index 6d01fb3..4da27bc 100644
--- a/frontend/src/components/ChatPanel.vue
+++ b/frontend/src/components/ChatPanel.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { ref, computed, watch, nextTick, onMounted, onUnmounted } from "vue";
+import { ref, computed, watch, nextTick } from "vue";
 import { useChatStore } from "@/stores/chat";
+import { useSettingsStore } from "@/stores/settings";
 import { renderMarkdown } from "@/utils/markdown";
 import ChatMessage from "@/components/ChatMessage.vue";
 
@@ -13,6 +14,7 @@ const emit = defineEmits<{
 }>();
 
 const store = useChatStore();
+const settingsStore = useSettingsStore();
 const messageInput = ref("");
 const messagesEl = ref<HTMLElement | null>(null);
 
@@ -26,20 +28,6 @@ watch(
   () => scrollToBottom()
 );
 
-const statusLabel = computed(() => {
-  if (store.ollamaStatus === "unavailable") return "Unavailable";
-  if (store.modelStatus === "not_found") return "Downloading...";
-  if (store.chatReady) return "Connected";
-  return "Checking...";
-});
-
-const statusClass = computed(() => {
-  if (store.ollamaStatus === "unavailable") return "status-red";
-  if (store.modelStatus === "not_found") return "status-yellow";
-  if (store.chatReady) return "status-green";
-  return "status-yellow";
-});
-
 function scrollToBottom() {
   nextTick(() => {
     if (messagesEl.value) {
@@ -48,14 +36,6 @@ function scrollToBottom() {
   });
 }
 
-onMounted(() => {
-  store.startStatusPolling();
-});
-
-onUnmounted(() => {
-  store.stopStatusPolling();
-});
-
 async function sendMessage() {
   const content = messageInput.value.trim();
   if (!content || store.streaming) return;
@@ -96,10 +76,6 @@ function onInputKeydown(e: KeyboardEvent) {
     <aside class="chat-panel">
       <div class="panel-header">
         <h3>Chat</h3>
-        <span class="status-indicator" :class="statusClass">
-          <span class="status-dot"></span>
-          {{ statusLabel }}
-        </span>
         <span v-if="contextNoteId" class="context-indicator">
           Note #{{ contextNoteId }}
         </span>
@@ -115,13 +91,18 @@ function onInputKeydown(e: KeyboardEvent) {
             @save-as-note="handleSaveAsNote"
           />
         </template>
-        <div v-if="store.streaming" class="chat-message role-assistant streaming">
-          <div class="message-header">
-            <span class="role-label">Assistant</span>
+
+        <!-- Streaming bubble -->
+        <div v-if="store.streaming" class="chat-message role-assistant">
+          <div class="streaming-bubble">
+            <div class="message-header">
+              <span class="role-label">{{ settingsStore.assistantName }}</span>
+            </div>
+            <div class="message-content prose" v-html="streamingRendered"></div>
+            <span class="typing-indicator"></span>
           </div>
-          <div class="message-content prose" v-html="streamingRendered"></div>
-          <span class="typing-indicator"></span>
         </div>
+
         <p
           v-if="!store.currentConversation?.messages.length && !store.streaming"
           class="empty-msg"
@@ -134,7 +115,7 @@ function onInputKeydown(e: KeyboardEvent) {
         <textarea
           v-model="messageInput"
           @keydown="onInputKeydown"
-          :placeholder="store.chatReady ? 'Type a message...' : statusLabel"
+          :placeholder="store.chatReady ? 'Type a message...' : 'Chat unavailable'"
           :disabled="store.streaming || !store.chatReady"
           rows="2"
         ></textarea>
@@ -143,7 +124,7 @@ function onInputKeydown(e: KeyboardEvent) {
           @click="sendMessage"
           :disabled="!messageInput.trim() || store.streaming || !store.chatReady"
         >
-          Send
+          &uarr;
         </button>
       </div>
     </aside>
@@ -182,35 +163,6 @@ function onInputKeydown(e: KeyboardEvent) {
   font-size: 1rem;
   flex: 1;
 }
-.status-indicator {
-  display: flex;
-  align-items: center;
-  gap: 0.3rem;
-  font-size: 0.75rem;
-  color: var(--color-text-muted);
-  white-space: nowrap;
-}
-.status-dot {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-.status-green .status-dot {
-  background: #22c55e;
-}
-.status-yellow .status-dot {
-  background: #eab308;
-  animation: pulse-dot 2s infinite;
-}
-.status-red .status-dot {
-  background: #ef4444;
-}
-@keyframes pulse-dot {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
-}
-
 .context-indicator {
   font-size: 0.8rem;
   color: var(--color-primary);
@@ -237,27 +189,37 @@ function onInputKeydown(e: KeyboardEvent) {
   padding: 0.75rem;
 }
 
-.streaming {
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
-  padding: 0.75rem 1rem;
-  background: var(--color-bg-card);
-  margin-bottom: 0.5rem;
+/* Streaming bubble — matches ChatMessage assistant style */
+.chat-message {
+  display: flex;
+  margin-bottom: 0.75rem;
 }
-.streaming .message-header {
+.role-assistant {
+  justify-content: flex-start;
+}
+.streaming-bubble {
+  max-width: 90%;
+  padding: 0.75rem 1rem;
+  border-radius: 16px;
+  border-bottom-left-radius: 4px;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+}
+.streaming-bubble .message-header {
   display: flex;
   align-items: center;
   margin-bottom: 0.25rem;
 }
-.streaming .role-label {
-  font-size: 0.8rem;
+.streaming-bubble .role-label {
+  font-size: 0.75rem;
   font-weight: 600;
   color: var(--color-text-muted);
   text-transform: uppercase;
+  letter-spacing: 0.03em;
 }
-.streaming .message-content {
+.streaming-bubble .message-content {
   font-size: 0.95rem;
-  line-height: 1.5;
+  line-height: 1.55;
   word-break: break-word;
 }
 
@@ -276,40 +238,52 @@ function onInputKeydown(e: KeyboardEvent) {
   50% { opacity: 1; }
 }
 
+/* Dark floating input */
 .panel-input {
   display: flex;
+  align-items: flex-end;
   gap: 0.5rem;
-  padding: 0.75rem;
-  border-top: 1px solid var(--color-border);
-  background: var(--color-bg-secondary);
+  margin: 0 0.5rem 0.5rem;
+  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
+  background: #1c1c1e;
+  border-radius: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
 .panel-input textarea {
   flex: 1;
   resize: none;
-  padding: 0.5rem;
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
+  padding: 0.35rem 0.5rem;
+  border: none;
+  border-radius: 10px;
   font-family: inherit;
   font-size: 0.9rem;
-  background: var(--color-bg);
-  color: var(--color-text);
-}
-.panel-input textarea:focus {
+  background: transparent;
+  color: #fff;
   outline: none;
-  border-color: var(--color-primary);
+}
+.panel-input textarea::placeholder {
+  color: rgba(255, 255, 255, 0.4);
+}
+.panel-input textarea:disabled {
+  opacity: 0.5;
 }
 .btn-send {
-  padding: 0.5rem 1rem;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   background: var(--color-primary);
   color: #fff;
   border: none;
-  border-radius: 6px;
+  border-radius: 50%;
   cursor: pointer;
-  font-size: 0.85rem;
-  align-self: flex-end;
+  font-size: 1rem;
+  flex-shrink: 0;
 }
 .btn-send:disabled {
-  opacity: 0.5;
+  opacity: 0.35;
   cursor: default;
 }
 
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 87bd93b..1c0df8d 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -59,6 +59,11 @@ const router = createRouter({
       name: "chat-conversation",
       component: () => import("@/views/ChatView.vue"),
     },
+    {
+      path: "/settings",
+      name: "settings",
+      component: () => import("@/views/SettingsView.vue"),
+    },
   ],
 });
 
diff --git a/frontend/src/stores/settings.ts b/frontend/src/stores/settings.ts
new file mode 100644
index 0000000..530f35e
--- /dev/null
+++ b/frontend/src/stores/settings.ts
@@ -0,0 +1,69 @@
+import { ref, computed } from "vue";
+import { defineStore } from "pinia";
+import { apiGet, apiPut, apiPost } from "@/api/client";
+import type { AppSettings } from "@/types/settings";
+
+export const useSettingsStore = defineStore("settings", () => {
+  const settings = ref<AppSettings>({});
+  const loading = ref(false);
+  const installedModels = ref<string[]>([]);
+
+  const assistantName = computed(
+    () => settings.value.assistant_name || "Fable"
+  );
+
+  const defaultModel = computed(
+    () => settings.value.default_model || ""
+  );
+
+  async function fetchSettings() {
+    loading.value = true;
+    try {
+      settings.value = await apiGet<AppSettings>("/api/settings");
+    } catch {
+      // Use defaults on error
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function updateSettings(updates: AppSettings) {
+    loading.value = true;
+    try {
+      settings.value = await apiPut<AppSettings>("/api/settings", updates);
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function fetchInstalledModels() {
+    try {
+      const data = await apiGet<{ models: { name: string }[] }>("/api/chat/models");
+      installedModels.value = data.models.map((m) => m.name);
+    } catch {
+      installedModels.value = [];
+    }
+  }
+
+  async function pullModel(model: string) {
+    await apiPost("/api/chat/models/pull", { model });
+  }
+
+  async function deleteModel(model: string) {
+    await apiPost("/api/chat/models/delete", { model });
+    await fetchInstalledModels();
+  }
+
+  return {
+    settings,
+    loading,
+    installedModels,
+    assistantName,
+    defaultModel,
+    fetchSettings,
+    updateSettings,
+    fetchInstalledModels,
+    pullModel,
+    deleteModel,
+  };
+});
diff --git a/frontend/src/types/settings.ts b/frontend/src/types/settings.ts
new file mode 100644
index 0000000..6ca20bb
--- /dev/null
+++ b/frontend/src/types/settings.ts
@@ -0,0 +1,13 @@
+export interface AppSettings {
+  assistant_name?: string;
+  default_model?: string;
+  [key: string]: string | undefined;
+}
+
+export interface ModelInfo {
+  name: string;
+  description: string;
+  size: string;
+  bestFor: string;
+  category: string;
+}
diff --git a/frontend/src/utils/markdown.ts b/frontend/src/utils/markdown.ts
index 79b3b21..1a23619 100644
--- a/frontend/src/utils/markdown.ts
+++ b/frontend/src/utils/markdown.ts
@@ -2,20 +2,31 @@ import { marked } from "marked";
 import DOMPurify from "dompurify";
 import { linkifyTags, linkifyWikilinks } from "@/utils/tags";
 
+function decodeEntities(text: string): string {
+  const textarea = document.createElement("textarea");
+  textarea.innerHTML = text;
+  return textarea.value;
+}
+
 export function renderMarkdown(text: string): string {
-  const html = marked(text) as string;
+  const decoded = decodeEntities(text);
+  const html = marked(decoded) as string;
   const withTags = linkifyTags(html);
   const withLinks = linkifyWikilinks(withTags);
-  return DOMPurify.sanitize(withLinks, {
+  const sanitized = DOMPurify.sanitize(withLinks, {
     ADD_ATTR: ["data-tag", "data-title"],
   });
+  // marked escapes ' to &#39; — replace after sanitization to ensure clean rendering
+  return sanitized.replace(/&#39;/g, "'");
 }
 
 export function renderPreview(text: string): string {
-  const html = marked(text) as string;
+  const decoded = decodeEntities(text);
+  const html = marked(decoded) as string;
   const withTags = linkifyTags(html);
   const withLinks = linkifyWikilinks(withTags);
-  return DOMPurify.sanitize(withLinks, {
+  const sanitized = DOMPurify.sanitize(withLinks, {
     FORBID_TAGS: ["a", "img"],
   });
+  return sanitized.replace(/&#39;/g, "'");
 }
diff --git a/frontend/src/views/ChatView.vue b/frontend/src/views/ChatView.vue
index a67e719..8ae3caf 100644
--- a/frontend/src/views/ChatView.vue
+++ b/frontend/src/views/ChatView.vue
@@ -1,16 +1,19 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref, computed, watch, nextTick } from "vue";
+import { onMounted, ref, computed, watch, nextTick } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useChatStore } from "@/stores/chat";
+import { useSettingsStore } from "@/stores/settings";
 import { renderMarkdown } from "@/utils/markdown";
 import ChatMessage from "@/components/ChatMessage.vue";
 
 const route = useRoute();
 const router = useRouter();
 const store = useChatStore();
+const settingsStore = useSettingsStore();
 
 const messageInput = ref("");
 const messagesEl = ref<HTMLElement | null>(null);
+const inputEl = ref<HTMLTextAreaElement | null>(null);
 const sending = ref(false);
 const summarizing = ref(false);
 
@@ -24,36 +27,17 @@ const streamingRendered = computed(() => {
   return renderMarkdown(store.streamingContent);
 });
 
-const statusLabel = computed(() => {
-  if (store.ollamaStatus === "unavailable") return "Ollama unavailable";
-  if (store.modelStatus === "not_found") return "Model downloading...";
-  if (store.ollamaStatus === "available" && store.modelStatus === "ready")
-    return "Connected";
-  return "Checking...";
-});
-
-const statusClass = computed(() => {
-  if (store.ollamaStatus === "unavailable") return "status-red";
-  if (store.modelStatus === "not_found") return "status-yellow";
-  if (store.chatReady) return "status-green";
-  return "status-yellow";
-});
-
 const inputPlaceholder = computed(() => {
-  if (!store.chatReady) return `Chat unavailable — ${statusLabel.value}`;
+  if (!store.chatReady) return "Chat unavailable";
   return "Type a message... (Enter to send, Shift+Enter for new line)";
 });
 
 onMounted(async () => {
-  store.startStatusPolling();
   await store.fetchConversations();
   if (convId.value) {
     await store.fetchConversation(convId.value);
   }
-});
-
-onUnmounted(() => {
-  store.stopStatusPolling();
+  nextTick(() => inputEl.value?.focus());
 });
 
 watch(convId, async (newId) => {
@@ -63,6 +47,7 @@ watch(convId, async (newId) => {
   } else {
     store.currentConversation = null;
   }
+  nextTick(() => inputEl.value?.focus());
 });
 
 watch(
@@ -84,6 +69,7 @@ async function selectConversation(id: number) {
 
 async function newConversation() {
   const conv = await store.createConversation();
+  await store.fetchConversation(conv.id);
   router.push(`/chat/${conv.id}`);
 }
 
@@ -115,6 +101,7 @@ async function sendMessage() {
   // Refresh conversation list to show updated title/timestamps
   store.fetchConversations();
   scrollToBottom();
+  nextTick(() => inputEl.value?.focus());
 }
 
 async function handleSaveAsNote(messageId: number) {
@@ -184,10 +171,6 @@ function onInputKeydown(e: KeyboardEvent) {
       <template v-if="store.currentConversation">
         <div class="chat-header">
           <h2>{{ store.currentConversation.title || "New Chat" }}</h2>
-          <span class="status-indicator" :class="statusClass">
-            <span class="status-dot"></span>
-            {{ statusLabel }}
-          </span>
           <button
             v-if="store.currentConversation.messages.length"
             class="btn-summarize"
@@ -205,13 +188,18 @@ function onInputKeydown(e: KeyboardEvent) {
             :message="msg"
             @save-as-note="handleSaveAsNote"
           />
-          <div v-if="store.streaming" class="chat-message role-assistant streaming">
-            <div class="message-header">
-              <span class="role-label">Assistant</span>
+
+          <!-- Streaming message (assistant typing) -->
+          <div v-if="store.streaming" class="chat-message role-assistant">
+            <div class="message-bubble streaming-bubble">
+              <div class="message-header">
+                <span class="role-label">{{ settingsStore.assistantName }}</span>
+              </div>
+              <div class="message-content prose" v-html="streamingRendered"></div>
+              <span class="typing-indicator"></span>
             </div>
-            <div class="message-content prose" v-html="streamingRendered"></div>
-            <span class="typing-indicator"></span>
           </div>
+
           <p
             v-if="!store.currentConversation.messages.length && !store.streaming"
             class="empty-msg"
@@ -222,6 +210,7 @@ function onInputKeydown(e: KeyboardEvent) {
 
         <div class="input-area">
           <textarea
+            ref="inputEl"
             v-model="messageInput"
             @keydown="onInputKeydown"
             :placeholder="inputPlaceholder"
@@ -233,7 +222,7 @@ function onInputKeydown(e: KeyboardEvent) {
             @click="sendMessage"
             :disabled="!messageInput.trim() || store.streaming || !store.chatReady"
           >
-            Send
+            &uarr;
           </button>
         </div>
       </template>
@@ -344,34 +333,6 @@ function onInputKeydown(e: KeyboardEvent) {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.status-indicator {
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-  font-size: 0.8rem;
-  color: var(--color-text-muted);
-  white-space: nowrap;
-}
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-.status-green .status-dot {
-  background: #22c55e;
-}
-.status-yellow .status-dot {
-  background: #eab308;
-  animation: pulse-dot 2s infinite;
-}
-.status-red .status-dot {
-  background: #ef4444;
-}
-@keyframes pulse-dot {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
-}
 
 .btn-summarize {
   padding: 0.3rem 0.75rem;
@@ -396,30 +357,40 @@ function onInputKeydown(e: KeyboardEvent) {
 .messages-container {
   flex: 1;
   overflow-y: auto;
-  padding: 1rem;
+  padding: 1rem 1.5rem;
 }
 
-.streaming {
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
-  padding: 0.75rem 1rem;
-  background: var(--color-bg-card);
-  margin-bottom: 0.5rem;
+/* Streaming bubble — matches ChatMessage assistant style */
+.chat-message {
+  display: flex;
+  margin-bottom: 0.75rem;
 }
-.streaming .message-header {
+.role-assistant {
+  justify-content: flex-start;
+}
+.streaming-bubble {
+  max-width: 80%;
+  padding: 0.75rem 1rem;
+  border-radius: 16px;
+  border-bottom-left-radius: 4px;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+}
+.streaming-bubble .message-header {
   display: flex;
   align-items: center;
   margin-bottom: 0.25rem;
 }
-.streaming .role-label {
-  font-size: 0.8rem;
+.streaming-bubble .role-label {
+  font-size: 0.75rem;
   font-weight: 600;
   color: var(--color-text-muted);
   text-transform: uppercase;
+  letter-spacing: 0.03em;
 }
-.streaming .message-content {
+.streaming-bubble .message-content {
   font-size: 0.95rem;
-  line-height: 1.5;
+  line-height: 1.55;
   word-break: break-word;
 }
 
@@ -438,40 +409,52 @@ function onInputKeydown(e: KeyboardEvent) {
   50% { opacity: 1; }
 }
 
+/* Floating dark input bar */
 .input-area {
   display: flex;
+  align-items: flex-end;
   gap: 0.5rem;
-  padding: 0.75rem 1rem;
-  border-top: 1px solid var(--color-border);
-  background: var(--color-bg-secondary);
+  margin: 0 1rem 0.75rem;
+  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
+  background: #1c1c1e;
+  border-radius: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
 }
 .input-area textarea {
   flex: 1;
   resize: none;
-  padding: 0.5rem 0.75rem;
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
+  padding: 0.4rem 0.5rem;
+  border: none;
+  border-radius: 12px;
   font-family: inherit;
   font-size: 0.95rem;
-  background: var(--color-bg);
-  color: var(--color-text);
-}
-.input-area textarea:focus {
+  background: transparent;
+  color: #fff;
   outline: none;
-  border-color: var(--color-primary);
+}
+.input-area textarea::placeholder {
+  color: rgba(255, 255, 255, 0.4);
+}
+.input-area textarea:disabled {
+  opacity: 0.5;
 }
 .btn-send {
-  padding: 0.5rem 1.25rem;
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   background: var(--color-primary);
   color: #fff;
   border: none;
-  border-radius: 6px;
+  border-radius: 50%;
   cursor: pointer;
-  font-size: 0.9rem;
-  align-self: flex-end;
+  font-size: 1.1rem;
+  flex-shrink: 0;
 }
 .btn-send:disabled {
-  opacity: 0.5;
+  opacity: 0.35;
   cursor: default;
 }
 
@@ -497,5 +480,11 @@ function onInputKeydown(e: KeyboardEvent) {
     width: 200px;
     min-width: 160px;
   }
+  .messages-container {
+    padding: 0.75rem;
+  }
+  .input-area {
+    margin: 0 0.5rem 0.5rem;
+  }
 }
 </style>
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 4e8ceca..98ecbf7 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,15 +1,20 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
 import { apiGet } from "@/api/client";
 import type { Note, NoteListResponse } from "@/types/note";
 import type { Task, TaskListResponse } from "@/types/task";
+import type { Conversation } from "@/types/chat";
 import NoteCard from "@/components/NoteCard.vue";
 import TaskCard from "@/components/TaskCard.vue";
 import type { TaskStatus } from "@/types/task";
 import { useTasksStore } from "@/stores/tasks";
+import { useChatStore } from "@/stores/chat";
 
+const router = useRouter();
 const recentNotes = ref<Note[]>([]);
 const recentTasks = ref<Task[]>([]);
+const recentChats = ref<Conversation[]>([]);
 const loading = ref(true);
 const tasksStore = useTasksStore();
 
@@ -32,6 +37,15 @@ onMounted(async () => {
     console.error("Failed to load recent tasks:", e);
   }
 
+  try {
+    const chatData = await apiGet<{ conversations: Conversation[]; total: number }>(
+      "/api/chat/conversations?limit=3&offset=0"
+    );
+    recentChats.value = chatData.conversations;
+  } catch (e) {
+    console.error("Failed to load recent chats:", e);
+  }
+
   loading.value = false;
 });
 
@@ -43,6 +57,13 @@ function onStatusToggle(id: number, status: TaskStatus) {
     }
   });
 }
+
+async function newChat() {
+  const chatStore = useChatStore();
+  const conv = await chatStore.createConversation();
+  await chatStore.fetchConversation(conv.id);
+  router.push(`/chat/${conv.id}`);
+}
 </script>
 
 <template>
@@ -52,6 +73,28 @@ function onStatusToggle(id: number, status: TaskStatus) {
     <p v-if="loading" class="loading">Loading...</p>
 
     <template v-else>
+      <section class="section">
+        <div class="section-header">
+          <h2>Recent Chats</h2>
+          <router-link to="/chat" class="see-all">See all</router-link>
+        </div>
+        <div v-if="recentChats.length" class="cards">
+          <router-link
+            v-for="chat in recentChats"
+            :key="chat.id"
+            :to="`/chat/${chat.id}`"
+            class="chat-card"
+          >
+            <span class="chat-card-title">{{ chat.title || "Untitled" }}</span>
+            <span class="chat-card-meta">{{ chat.message_count }} messages</span>
+          </router-link>
+        </div>
+        <div v-else class="empty-state">
+          <p class="empty-text">No chats yet.</p>
+        </div>
+        <button class="btn-cta btn-new-chat" @click="newChat">+ New Chat</button>
+      </section>
+
       <section class="section">
         <div class="section-header">
           <h2>Recent Notes</h2>
@@ -130,6 +173,38 @@ function onStatusToggle(id: number, status: TaskStatus) {
   flex-direction: column;
   gap: 0.75rem;
 }
+.chat-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  text-decoration: none;
+  color: var(--color-text);
+  transition: border-color 0.15s;
+}
+.chat-card:hover {
+  border-color: var(--color-primary);
+}
+.chat-card-title {
+  font-size: 0.95rem;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  margin-right: 1rem;
+}
+.chat-card-meta {
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+}
+.btn-new-chat {
+  margin-top: 0.75rem;
+}
 .empty-state {
   text-align: center;
   padding: 1.5rem 0;
@@ -143,8 +218,10 @@ function onStatusToggle(id: number, status: TaskStatus) {
   padding: 0.4rem 1rem;
   background: var(--color-primary);
   color: #fff;
+  border: none;
   border-radius: 4px;
   text-decoration: none;
   font-size: 0.9rem;
+  cursor: pointer;
 }
 </style>
diff --git a/frontend/src/views/SettingsView.vue b/frontend/src/views/SettingsView.vue
new file mode 100644
index 0000000..adeb210
--- /dev/null
+++ b/frontend/src/views/SettingsView.vue
@@ -0,0 +1,607 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue";
+import { useSettingsStore } from "@/stores/settings";
+import type { ModelInfo } from "@/types/settings";
+
+const store = useSettingsStore();
+const assistantName = ref("");
+const saving = ref(false);
+const saved = ref(false);
+const pulling = ref<string | null>(null);
+const deleting = ref<string | null>(null);
+const confirmDelete = ref<string | null>(null);
+
+const MODEL_CATALOG: ModelInfo[] = [
+  // — General Purpose —
+  {
+    name: "llama3.1",
+    description: "Meta's Llama 3.1 8B — strong general-purpose model with good instruction following.",
+    size: "4.7 GB",
+    bestFor: "General chat, writing, Q&A",
+    category: "General Purpose",
+  },
+  {
+    name: "llama3.1:70b",
+    description: "Meta's Llama 3.1 70B — significantly more capable, better reasoning and nuance.",
+    size: "40 GB",
+    bestFor: "Complex reasoning, detailed analysis",
+    category: "General Purpose",
+  },
+  {
+    name: "mistral",
+    description: "Mistral 7B — fast and efficient with strong performance for its size.",
+    size: "4.1 GB",
+    bestFor: "Fast responses, general tasks",
+    category: "General Purpose",
+  },
+  {
+    name: "gemma2",
+    description: "Google's Gemma 2 9B — well-rounded model strong in reasoning and conversation.",
+    size: "5.4 GB",
+    bestFor: "Conversation, reasoning, summarization",
+    category: "General Purpose",
+  },
+  {
+    name: "qwen2.5",
+    description: "Alibaba's Qwen 2.5 7B — multilingual model with strong coding and math skills.",
+    size: "4.7 GB",
+    bestFor: "Multilingual, code, math",
+    category: "General Purpose",
+  },
+  {
+    name: "phi3",
+    description: "Microsoft Phi-3 Mini — compact model with surprising capability for its size.",
+    size: "2.3 GB",
+    bestFor: "Light tasks, low resource usage",
+    category: "General Purpose",
+  },
+  {
+    name: "neural-chat",
+    description: "Intel's fine-tune optimized for natural conversation. Lighter filtering than base models.",
+    size: "4.1 GB",
+    bestFor: "Natural conversation, general tasks",
+    category: "General Purpose",
+  },
+  {
+    name: "yi",
+    description: "01.AI's Yi 6B — Chinese-developed model, more permissive on creative content.",
+    size: "3.5 GB",
+    bestFor: "Creative content, multilingual",
+    category: "General Purpose",
+  },
+  {
+    name: "command-r",
+    description: "Cohere's Command R 35B — enterprise-grade model with light content filtering.",
+    size: "20 GB",
+    bestFor: "RAG, conversation, creative tasks",
+    category: "General Purpose",
+  },
+  // — Coding —
+  {
+    name: "codellama",
+    description: "Meta's Code Llama — specialized for code generation and understanding.",
+    size: "3.8 GB",
+    bestFor: "Code generation, debugging, technical docs",
+    category: "Coding",
+  },
+  {
+    name: "deepseek-coder-v2",
+    description: "DeepSeek Coder V2 — state-of-the-art coding model with strong math ability.",
+    size: "8.9 GB",
+    bestFor: "Code, math, technical problem solving",
+    category: "Coding",
+  },
+  // — Uncensored / Creative Writing —
+  {
+    name: "dolphin-mistral",
+    description: "Eric Hartford's Dolphin fine-tune of Mistral 7B. Safety/refusal data removed from training.",
+    size: "4.1 GB",
+    bestFor: "Uncensored general chat, creative writing",
+    category: "Uncensored / Creative Writing",
+  },
+  {
+    name: "dolphin-llama3",
+    description: "Dolphin fine-tune of Llama 3 8B. Uncensored training on a stronger base model.",
+    size: "4.7 GB",
+    bestFor: "Uncensored chat, strong reasoning",
+    category: "Uncensored / Creative Writing",
+  },
+  {
+    name: "dolphin-mixtral",
+    description: "Dolphin fine-tune of Mixtral 8x7B MoE. Uncensored with mixture-of-experts architecture.",
+    size: "26 GB",
+    bestFor: "Uncensored + high capability (needs RAM)",
+    category: "Uncensored / Creative Writing",
+  },
+  {
+    name: "nous-hermes2",
+    description: "Nous Research's Hermes 2 — trained on diverse synthetic data with minimal refusal behavior.",
+    size: "4.1 GB",
+    bestFor: "Instruction following, few refusals",
+    category: "Uncensored / Creative Writing",
+  },
+  {
+    name: "openhermes",
+    description: "Community fine-tune focused on helpfulness. Based on Mistral 7B without refusal patterns.",
+    size: "4.1 GB",
+    bestFor: "Helpful assistant, minimal filtering",
+    category: "Uncensored / Creative Writing",
+  },
+  {
+    name: "mythomist",
+    description: "A 7B model specifically tuned for creative and narrative writing including mature themes.",
+    size: "4.1 GB",
+    bestFor: "Creative fiction, narrative writing",
+    category: "Uncensored / Creative Writing",
+  },
+  {
+    name: "samantha-mistral",
+    description: "Eric Hartford's Samantha personality model. Designed as a helpful companion without refusals.",
+    size: "4.1 GB",
+    bestFor: "Companion chat, unrestricted conversation",
+    category: "Uncensored / Creative Writing",
+  },
+];
+
+const selectedModel = ref("");
+
+const modelStatuses = computed(() => {
+  const installed = new Set(
+    store.installedModels.map((m) => m.replace(/:latest$/, ""))
+  );
+  return MODEL_CATALOG.map((m) => ({
+    ...m,
+    installed: installed.has(m.name) || installed.has(m.name.replace(/:.*$/, "")),
+    active: isActiveModel(m.name),
+  }));
+});
+
+const categories = computed(() => {
+  const cats: string[] = [];
+  for (const m of modelStatuses.value) {
+    if (!cats.includes(m.category)) cats.push(m.category);
+  }
+  return cats;
+});
+
+function modelsInCategory(category: string) {
+  return modelStatuses.value.filter((m) => m.category === category);
+}
+
+function isActiveModel(name: string): boolean {
+  const current = selectedModel.value || store.defaultModel;
+  if (!current) return false;
+  const clean = current.replace(/:latest$/, "");
+  return clean === name || clean === name.replace(/:.*$/, "");
+}
+
+onMounted(async () => {
+  await store.fetchSettings();
+  assistantName.value = store.assistantName;
+  selectedModel.value = store.defaultModel;
+  store.fetchInstalledModels();
+});
+
+async function saveAssistant() {
+  saving.value = true;
+  saved.value = false;
+  try {
+    await store.updateSettings({ assistant_name: assistantName.value.trim() || "Fable" });
+    saved.value = true;
+    setTimeout(() => (saved.value = false), 2000);
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function selectModel(name: string) {
+  selectedModel.value = name;
+  saving.value = true;
+  try {
+    await store.updateSettings({ default_model: name });
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function pullModel(name: string) {
+  pulling.value = name;
+  try {
+    await store.pullModel(name);
+    // Poll for completion
+    const poll = setInterval(async () => {
+      await store.fetchInstalledModels();
+      const installed = new Set(
+        store.installedModels.map((m) => m.replace(/:latest$/, ""))
+      );
+      if (installed.has(name) || installed.has(name.replace(/:.*$/, ""))) {
+        clearInterval(poll);
+        pulling.value = null;
+      }
+    }, 5000);
+    // Stop polling after 10 minutes max
+    setTimeout(() => {
+      clearInterval(poll);
+      if (pulling.value === name) pulling.value = null;
+    }, 600_000);
+  } catch {
+    pulling.value = null;
+  }
+}
+
+async function removeModel(name: string) {
+  if (confirmDelete.value !== name) {
+    confirmDelete.value = name;
+    return;
+  }
+  confirmDelete.value = null;
+  deleting.value = name;
+  try {
+    await store.deleteModel(name);
+    // If the deleted model was active, clear the selection
+    if (isActiveModel(name)) {
+      selectedModel.value = "";
+    }
+  } finally {
+    deleting.value = null;
+  }
+}
+
+function cancelDelete() {
+  confirmDelete.value = null;
+}
+</script>
+
+<template>
+  <main class="settings-page">
+    <h1>Settings</h1>
+
+    <section class="settings-section">
+      <h2>Assistant</h2>
+      <div class="field">
+        <label for="assistant-name">Assistant Name</label>
+        <input
+          id="assistant-name"
+          v-model="assistantName"
+          type="text"
+          placeholder="Fable"
+          class="input"
+        />
+        <p class="field-hint">
+          The name used for the AI assistant in chat messages and LLM context.
+        </p>
+      </div>
+
+      <div class="actions">
+        <button class="btn-save" @click="saveAssistant" :disabled="saving">
+          {{ saving ? "Saving..." : "Save" }}
+        </button>
+        <span v-if="saved" class="saved-msg">Saved!</span>
+      </div>
+    </section>
+
+    <section class="settings-section">
+      <h2>Model</h2>
+      <p class="section-desc">
+        Choose which LLM model to use for chat. Models need to be downloaded before use.
+      </p>
+
+      <div v-for="cat in categories" :key="cat" class="model-category">
+        <h3 class="category-label">{{ cat }}</h3>
+        <div class="model-list">
+          <div
+            v-for="model in modelsInCategory(cat)"
+            :key="model.name"
+            class="model-card"
+            :class="{ active: model.active }"
+          >
+            <div class="model-info">
+              <div class="model-name-row">
+                <span class="model-name">{{ model.name }}</span>
+                <span class="model-size">{{ model.size }}</span>
+              </div>
+              <p class="model-desc">{{ model.description }}</p>
+              <p class="model-best-for">
+                <strong>Best for:</strong> {{ model.bestFor }}
+              </p>
+            </div>
+            <div class="model-actions">
+              <template v-if="model.installed">
+                <button
+                  v-if="!model.active"
+                  class="btn-select"
+                  @click="selectModel(model.name)"
+                  :disabled="saving"
+                >
+                  Select
+                </button>
+                <span v-else class="active-badge">Active</span>
+                <template v-if="confirmDelete === model.name">
+                  <button
+                    class="btn-confirm-delete"
+                    @click="removeModel(model.name)"
+                    :disabled="deleting !== null"
+                  >
+                    {{ deleting === model.name ? "Removing..." : "Confirm" }}
+                  </button>
+                  <button class="btn-cancel-delete" @click="cancelDelete">
+                    Cancel
+                  </button>
+                </template>
+                <button
+                  v-else
+                  class="btn-remove"
+                  @click="removeModel(model.name)"
+                  :disabled="deleting !== null || model.active"
+                  :title="model.active ? 'Cannot remove the active model' : 'Remove model'"
+                >
+                  Remove
+                </button>
+              </template>
+              <button
+                v-else
+                class="btn-pull"
+                @click="pullModel(model.name)"
+                :disabled="pulling !== null"
+              >
+                {{ pulling === model.name ? "Pulling..." : "Download" }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+.settings-page {
+  max-width: 700px;
+  margin: 2rem auto;
+  padding: 0 1rem;
+}
+.settings-page h1 {
+  margin: 0 0 1.5rem;
+}
+.settings-section {
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: 1.25rem;
+  margin-bottom: 1.5rem;
+}
+.settings-section h2 {
+  margin: 0 0 0.5rem;
+  font-size: 1.1rem;
+}
+.section-desc {
+  margin: 0 0 1rem;
+  font-size: 0.9rem;
+  color: var(--color-text-secondary);
+}
+.field {
+  margin-bottom: 1rem;
+}
+.field label {
+  display: block;
+  font-size: 0.9rem;
+  font-weight: 600;
+  margin-bottom: 0.35rem;
+  color: var(--color-text);
+}
+.input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  font-size: 0.95rem;
+  background: var(--color-bg);
+  color: var(--color-text);
+  box-sizing: border-box;
+}
+.input:focus {
+  outline: none;
+  border-color: var(--color-primary);
+}
+.field-hint {
+  margin: 0.35rem 0 0;
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+}
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.btn-save {
+  padding: 0.5rem 1.25rem;
+  background: var(--color-primary);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+.btn-save:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+.btn-save:hover:not(:disabled) {
+  opacity: 0.9;
+}
+.saved-msg {
+  color: #22c55e;
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+
+/* Model list */
+.model-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.model-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  background: var(--color-bg);
+  transition: border-color 0.15s;
+}
+.model-card.active {
+  border-color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-bg));
+}
+.model-info {
+  flex: 1;
+  min-width: 0;
+}
+.model-name-row {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  margin-bottom: 0.3rem;
+}
+.model-name {
+  font-weight: 600;
+  font-size: 0.95rem;
+  font-family: monospace;
+}
+.model-size {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+}
+.model-desc {
+  margin: 0 0 0.25rem;
+  font-size: 0.85rem;
+  color: var(--color-text-secondary);
+  line-height: 1.4;
+}
+.model-best-for {
+  margin: 0;
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+}
+.model-best-for strong {
+  color: var(--color-text-secondary);
+}
+.btn-select {
+  padding: 0.35rem 0.9rem;
+  background: var(--color-primary);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+.btn-select:hover:not(:disabled) {
+  opacity: 0.9;
+}
+.btn-select:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+.btn-pull {
+  padding: 0.35rem 0.9rem;
+  background: var(--color-bg-secondary);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+.btn-pull:hover:not(:disabled) {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+}
+.btn-pull:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+.active-badge {
+  padding: 0.25rem 0.75rem;
+  background: var(--color-primary);
+  color: #fff;
+  border-radius: 12px;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+/* Category headers */
+.model-category {
+  margin-bottom: 1.5rem;
+}
+.model-category:last-child {
+  margin-bottom: 0;
+}
+.category-label {
+  margin: 0 0 0.5rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-muted);
+}
+
+/* Model actions layout */
+.model-actions {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 0.4rem;
+}
+
+/* Remove button */
+.btn-remove {
+  padding: 0.25rem 0.6rem;
+  background: transparent;
+  color: var(--color-text-muted);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.75rem;
+}
+.btn-remove:hover:not(:disabled) {
+  border-color: #ef4444;
+  color: #ef4444;
+}
+.btn-remove:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.btn-confirm-delete {
+  padding: 0.25rem 0.6rem;
+  background: #ef4444;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+.btn-confirm-delete:hover:not(:disabled) {
+  background: #dc2626;
+}
+.btn-confirm-delete:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+.btn-cancel-delete {
+  padding: 0.25rem 0.6rem;
+  background: transparent;
+  color: var(--color-text-muted);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.75rem;
+}
+.btn-cancel-delete:hover {
+  color: var(--color-text);
+  border-color: var(--color-text-muted);
+}
+</style>
diff --git a/src/fabledassistant/app.py b/src/fabledassistant/app.py
index 75e0a55..c588ddb 100644
--- a/src/fabledassistant/app.py
+++ b/src/fabledassistant/app.py
@@ -7,6 +7,7 @@ from fabledassistant.config import Config
 from fabledassistant.routes.api import api
 from fabledassistant.routes.chat import chat_bp
 from fabledassistant.routes.notes import notes_bp
+from fabledassistant.routes.settings import settings_bp
 from fabledassistant.routes.tasks import tasks_bp
 
 STATIC_DIR = Path(__file__).parent / "static"
@@ -20,6 +21,7 @@ def create_app() -> Quart:
     app.register_blueprint(api)
     app.register_blueprint(chat_bp)
     app.register_blueprint(notes_bp)
+    app.register_blueprint(settings_bp)
     app.register_blueprint(tasks_bp)
 
     @app.before_serving
diff --git a/src/fabledassistant/models/__init__.py b/src/fabledassistant/models/__init__.py
index 8b74abf..212c1b4 100644
--- a/src/fabledassistant/models/__init__.py
+++ b/src/fabledassistant/models/__init__.py
@@ -13,3 +13,4 @@ class Base(DeclarativeBase):
 
 from fabledassistant.models.note import Note, TaskPriority, TaskStatus  # noqa: E402, F401
 from fabledassistant.models.conversation import Conversation, Message  # noqa: E402, F401
+from fabledassistant.models.setting import Setting  # noqa: E402, F401
diff --git a/src/fabledassistant/models/setting.py b/src/fabledassistant/models/setting.py
new file mode 100644
index 0000000..6d2a462
--- /dev/null
+++ b/src/fabledassistant/models/setting.py
@@ -0,0 +1,14 @@
+from sqlalchemy import Text
+from sqlalchemy.orm import Mapped, mapped_column
+
+from fabledassistant.models import Base
+
+
+class Setting(Base):
+    __tablename__ = "settings"
+
+    key: Mapped[str] = mapped_column(Text, primary_key=True)
+    value: Mapped[str] = mapped_column(Text, default="")
+
+    def to_dict(self) -> dict:
+        return {"key": self.key, "value": self.value}
diff --git a/src/fabledassistant/routes/chat.py b/src/fabledassistant/routes/chat.py
index 5aa31e0..699d60a 100644
--- a/src/fabledassistant/routes/chat.py
+++ b/src/fabledassistant/routes/chat.py
@@ -15,7 +15,8 @@ from fabledassistant.services.chat import (
     summarize_conversation_as_note,
     update_conversation_title,
 )
-from fabledassistant.services.llm import build_context, stream_chat
+from fabledassistant.services.llm import build_context, ensure_model, stream_chat
+from fabledassistant.services.settings import get_setting
 
 logger = logging.getLogger(__name__)
 
@@ -97,7 +98,7 @@ async def send_message_route(conv_id: int):
     # Build context with note search, URL fetching, etc.
     messages = await build_context(history, context_note_id, content)
 
-    model = conv.model or Config.OLLAMA_MODEL
+    model = conv.model or await get_setting("default_model", Config.OLLAMA_MODEL)
 
     async def generate():
         full_response = []
@@ -149,7 +150,7 @@ async def summarize_conversation_route(conv_id: int):
     conv = await get_conversation(conv_id)
     if conv is None:
         return jsonify({"error": "Conversation not found"}), 404
-    model = conv.model or Config.OLLAMA_MODEL
+    model = conv.model or await get_setting("default_model", Config.OLLAMA_MODEL)
     try:
         note = await summarize_conversation_as_note(conv_id, model)
         return jsonify(note), 201
@@ -160,7 +161,7 @@ async def summarize_conversation_route(conv_id: int):
 @chat_bp.route("/status", methods=["GET"])
 async def chat_status_route():
     """Check Ollama availability and model readiness."""
-    default_model = Config.OLLAMA_MODEL
+    default_model = await get_setting("default_model", Config.OLLAMA_MODEL)
     result = {
         "ollama": "unavailable",
         "model": "not_found",
@@ -196,3 +197,41 @@ async def list_models_route():
     except Exception as e:
         logger.warning("Failed to list Ollama models: %s", e)
         return jsonify({"models": [], "error": str(e)}), 200
+
+
+@chat_bp.route("/models/pull", methods=["POST"])
+async def pull_model_route():
+    """Pull a model from Ollama. Runs in the background."""
+    data = await request.get_json()
+    model_name = data.get("model", "").strip()
+    if not model_name:
+        return jsonify({"error": "model is required"}), 400
+
+    import asyncio
+    asyncio.create_task(ensure_model(model_name))
+    return jsonify({"status": "pulling", "model": model_name}), 202
+
+
+@chat_bp.route("/models/delete", methods=["POST"])
+async def delete_model_route():
+    """Delete a model from Ollama."""
+    data = await request.get_json()
+    model_name = data.get("model", "").strip()
+    if not model_name:
+        return jsonify({"error": "model is required"}), 400
+
+    try:
+        async with httpx.AsyncClient(timeout=30.0) as client:
+            resp = await client.request(
+                "DELETE",
+                f"{Config.OLLAMA_URL}/api/delete",
+                json={"name": model_name},
+            )
+            resp.raise_for_status()
+        return jsonify({"status": "deleted", "model": model_name})
+    except httpx.HTTPStatusError as e:
+        logger.warning("Failed to delete model %s: %s", model_name, e)
+        return jsonify({"error": f"Failed to delete model: {e.response.status_code}"}), 400
+    except Exception as e:
+        logger.warning("Failed to delete model %s: %s", model_name, e)
+        return jsonify({"error": str(e)}), 500
diff --git a/src/fabledassistant/routes/settings.py b/src/fabledassistant/routes/settings.py
new file mode 100644
index 0000000..6a349d5
--- /dev/null
+++ b/src/fabledassistant/routes/settings.py
@@ -0,0 +1,22 @@
+from quart import Blueprint, jsonify, request
+
+from fabledassistant.services.settings import get_all_settings, set_setting
+
+settings_bp = Blueprint("settings", __name__, url_prefix="/api/settings")
+
+
+@settings_bp.route("", methods=["GET"])
+async def get_settings_route():
+    settings = await get_all_settings()
+    return jsonify(settings)
+
+
+@settings_bp.route("", methods=["PUT"])
+async def update_settings_route():
+    data = await request.get_json()
+    if not isinstance(data, dict):
+        return jsonify({"error": "Expected a JSON object"}), 400
+    for key, value in data.items():
+        await set_setting(key, str(value))
+    settings = await get_all_settings()
+    return jsonify(settings)
diff --git a/src/fabledassistant/services/llm.py b/src/fabledassistant/services/llm.py
index 19bd5f2..7fd64e4 100644
--- a/src/fabledassistant/services/llm.py
+++ b/src/fabledassistant/services/llm.py
@@ -7,6 +7,7 @@ import httpx
 
 from fabledassistant.config import Config
 from fabledassistant.services.notes import get_note, list_notes
+from fabledassistant.services.settings import get_setting
 
 logger = logging.getLogger(__name__)
 
@@ -139,8 +140,9 @@ async def build_context(
     user_message: str,
 ) -> list[dict]:
     """Build messages array for Ollama with system prompt and context."""
+    assistant_name = await get_setting("assistant_name", "Fable")
     system_parts = [
-        "You are a helpful assistant integrated into a note-taking and task-tracking app called Fabled Assistant. "
+        f"You are a helpful assistant named {assistant_name}, integrated into a note-taking and task-tracking app called Fabled Assistant. "
         "Help users with their notes, tasks, and general questions. "
         "When note context is provided, use it to give relevant answers."
     ]
diff --git a/src/fabledassistant/services/settings.py b/src/fabledassistant/services/settings.py
new file mode 100644
index 0000000..1f426e8
--- /dev/null
+++ b/src/fabledassistant/services/settings.py
@@ -0,0 +1,28 @@
+from sqlalchemy import select
+
+from fabledassistant.models import async_session
+from fabledassistant.models.setting import Setting
+
+
+async def get_setting(key: str, default: str = "") -> str:
+    async with async_session() as session:
+        result = await session.execute(select(Setting).where(Setting.key == key))
+        setting = result.scalar_one_or_none()
+        return setting.value if setting else default
+
+
+async def set_setting(key: str, value: str) -> None:
+    async with async_session() as session:
+        result = await session.execute(select(Setting).where(Setting.key == key))
+        setting = result.scalar_one_or_none()
+        if setting:
+            setting.value = value
+        else:
+            session.add(Setting(key=key, value=value))
+        await session.commit()
+
+
+async def get_all_settings() -> dict[str, str]:
+    async with async_session() as session:
+        result = await session.execute(select(Setting))
+        return {s.key: s.value for s in result.scalars().all()}
diff --git a/summary.md b/summary.md
index caa93fb..2a38057 100644
--- a/summary.md
+++ b/summary.md
@@ -12,7 +12,7 @@
 >    Include file-level details in the commit body when the change is non-trivial.
 
 ## Last Updated
-2026-02-10 — Phase 4 + Ollama health check (status indicator on chat views showing Ollama/model readiness)
+2026-02-10 — Phase 4.5: Chat UX improvements, settings page, model management, entity rendering fix
 
 ## Project Overview
 Fabled Assistant is a self-hosted note-taking and task-tracking application with
@@ -128,6 +128,11 @@ for AI-assisted features.
 - "Convert to note" = `update_note(id, status=None, priority=None, due_date=None)`
 - Task body field is `body` (not `description`) — standardized with notes
 
+### Settings
+- `key` (text PK), `value` (text)
+- Key-value store for app-wide settings (assistant name, default model, etc.)
+- CRUD via `services/settings.py`: `get_setting(key, default)`, `set_setting(key, value)`, `get_all_settings()`
+
 ### Conversations
 - `id` (int PK), `title` (str), `model` (str), `created_at`, `updated_at`
 - Has many messages (cascade delete)
@@ -156,27 +161,31 @@ fabledassistant/
 │       ├── 0002_create_tasks_table.py  # Tasks table + enums (raw SQL, idempotent)
 │       ├── 0003_task_note_companion.py # Data migration: create companion notes for existing tasks
 │       ├── 0004_merge_tasks_into_notes.py # Add task columns to notes, migrate data, drop tasks table
-│       └── 0005_add_chat_tables.py    # Conversations + messages tables with FKs and indexes
+│       ├── 0005_add_chat_tables.py    # Conversations + messages tables with FKs and indexes
+│       └── 0006_add_settings_table.py # Settings key-value table
 ├── src/
 │   └── fabledassistant/
 │       ├── __init__.py
 │       ├── app.py               # Quart app factory: SPA via 404 handler, JSON 404/500 for API
 │       ├── config.py            # Config from env vars
 │       ├── models/
-│       │   ├── __init__.py      # async_session factory, Base, imports Note + TaskStatus + TaskPriority + Conversation + Message
+│       │   ├── __init__.py      # async_session factory, Base, imports Note + TaskStatus + TaskPriority + Conversation + Message + Setting
 │       │   ├── note.py          # Note model (unified: id, title, body, tags[], parent_id, status, priority, due_date, timestamps) + TaskStatus/TaskPriority enums + is_task property
-│       │   └── conversation.py  # Conversation + Message models with relationships and to_dict()
+│       │   ├── conversation.py  # Conversation + Message models with relationships and to_dict()
+│       │   └── setting.py       # Setting model (key TEXT PK, value TEXT)
 │       ├── routes/
 │       │   ├── __init__.py
 │       │   ├── api.py           # /api blueprint with /health endpoint
-│       │   ├── chat.py          # /api/chat blueprint: conversations CRUD, SSE message streaming, save/summarize as note, models list, status check
+│       │   ├── chat.py          # /api/chat blueprint: conversations CRUD, SSE message streaming, save/summarize as note, models list/pull/delete, status check
 │       │   ├── notes.py         # /api/notes CRUD + /by-title + /resolve-title + /convert-to-task + /convert-to-note + /backlinks
-│       │   └── tasks.py         # /api/tasks CRUD + PATCH status (thin wrappers, accepts body not description)
+│       │   ├── tasks.py         # /api/tasks CRUD + PATCH status (thin wrappers, accepts body not description)
+│       │   └── settings.py      # /api/settings GET/PUT — app-wide settings
 │       ├── services/
 │       │   ├── notes.py         # CRUD, is_task filter, status/priority filters, convert_note_to_task, convert_task_to_note, get_backlinks
 │       │   ├── tasks.py         # Thin wrappers around notes.py (create_task, list_tasks with is_task=True, etc.)
-│       │   ├── llm.py           # Ollama interaction: ensure_model, stream_chat, generate_completion, fetch_url_content, build_context (keyword extraction, note search, URL fetching)
-│       │   └── chat.py          # Conversation CRUD, add_message, save_response_as_note, summarize_conversation_as_note
+│       │   ├── llm.py           # Ollama interaction: ensure_model, stream_chat, generate_completion, fetch_url_content, build_context (keyword extraction, note search, URL fetching, configurable assistant name)
+│       │   ├── chat.py          # Conversation CRUD, add_message, save_response_as_note, summarize_conversation_as_note
+│       │   └── settings.py      # Settings CRUD: get_setting, set_setting, get_all_settings
 │       ├── utils/
 │       │   ├── __init__.py
 │       │   └── tags.py          # extract_tags() — regex #tag extraction, skips code fences
@@ -186,7 +195,7 @@ fabledassistant/
     ├── vite.config.ts
     ├── tsconfig.json
     ├── src/
-    │   ├── App.vue              # Shell: AppHeader + router-view + ChatPanel (slide-out) + ToastNotification
+    │   ├── App.vue              # Shell: AppHeader + router-view + ChatPanel (slide-out) + ToastNotification; starts status polling + loads settings on mount
     │   ├── main.ts              # App init, imports theme.css
     │   ├── assets/
     │   │   └── theme.css        # CSS custom properties: light/dark themes, body reset
@@ -199,17 +208,20 @@ fabledassistant/
     │   │   ├── notes.ts         # CRUD + tag filter, resolveTitle, convertToTask, convertToNote, fetchBacklinks, fetchAllTags
     │   │   ├── tasks.ts         # CRUD + status/priority filter, patchStatus (uses body not description)
     │   │   ├── chat.ts          # Conversation CRUD, sendMessage (SSE streaming), saveMessageAsNote, summarizeAsNote, fetchModels, status polling (ollamaStatus, modelStatus, chatReady)
+    │   │   ├── settings.ts      # App settings: assistantName, defaultModel, fetchInstalledModels, pullModel, deleteModel
     │   │   └── toast.ts         # Toast notification state, 3s auto-dismiss
     │   ├── types/
     │   │   ├── note.ts          # Note interface (with status, priority, due_date, is_task) + TaskStatus, TaskPriority types + NoteListResponse
     │   │   ├── chat.ts          # Message, Conversation, ConversationDetail, OllamaModel, OllamaStatus interfaces
+    │   │   ├── settings.ts      # AppSettings interface, ModelInfo interface (name, description, size, bestFor, category)
     │   │   └── task.ts          # Task = re-export of Note; TaskListResponse
     │   ├── utils/
     │   │   ├── tags.ts          # extractTags(), linkifyTags(), linkifyWikilinks()
-    │   │   └── markdown.ts      # renderMarkdown() (full), renderPreview() (strips links/images for cards)
+    │   │   └── markdown.ts      # renderMarkdown() (full) + renderPreview() (strips links/images) — decodes HTML entities before marked, replaces &#39; after sanitization
     │   ├── views/
-    │   │   ├── ChatView.vue     # Dedicated /chat page: sidebar (conversation list) + message thread + input + summarize + Ollama status indicator
-    │   │   ├── HomeView.vue     # Landing page: recent notes + tasks (independent error handling)
+    │   │   ├── ChatView.vue     # Dedicated /chat page: sidebar + bubble-style messages (user right, assistant left) + floating dark input bar + auto-focus
+    │   │   ├── HomeView.vue     # Landing page: recent notes + tasks + recent chats (3 most recent) + new chat button
+    │   │   ├── SettingsView.vue # Settings page: assistant name config + model catalog (18 models in 3 categories) with download/select/remove
     │   │   ├── NotesListView.vue # Note list: search, sort, tag filter pills, pagination
     │   │   ├── NoteEditorView.vue # Create/edit: Ctrl+S, unsaved guard, toasts, autocomplete
     │   │   ├── NoteViewerView.vue # Markdown render, wikilink auto-create, convert-to-task (only when !is_task), backlinks
@@ -217,9 +229,9 @@ fabledassistant/
     │   │   ├── TaskEditorView.vue # Create/edit task: fields (body not description), Ctrl+S, dirty guard, autocomplete
     │   │   └── TaskViewerView.vue # Task detail: rendered markdown, badges, convert-to-note button, backlinks
     │   ├── components/
-    │   │   ├── AppHeader.vue    # Nav bar: brand, Notes + Tasks + Chat links, chat panel toggle, theme toggle
-    │   │   ├── ChatPanel.vue    # Slide-out chat panel (right side overlay, receives contextNoteId prop) + Ollama status indicator
-    │   │   ├── ChatMessage.vue  # Message bubble: markdown rendering, role label, "Save as Note" action on assistant messages
+    │   │   ├── AppHeader.vue    # Nav bar: brand, Notes + Tasks + Chat + Settings links, status indicator dot, chat panel toggle, theme toggle
+    │   │   ├── ChatPanel.vue    # Slide-out chat panel (right side overlay, receives contextNoteId prop), bubble-style messages, floating dark input
+    │   │   ├── ChatMessage.vue  # Message bubble: markdown rendering, configurable assistant name label, "Save as Note" action on assistant messages
     │   │   ├── NoteCard.vue     # Card with rendered markdown preview (v-html), TagPill, tag-click emit
     │   │   ├── TaskCard.vue     # Card with rendered preview (body not description), StatusBadge (clickable), PriorityBadge, due date, tags
     │   │   ├── StatusBadge.vue  # Color-coded status badge, optional clickable cycling
@@ -230,7 +242,7 @@ fabledassistant/
     │   │   ├── PaginationBar.vue # Prev/next + page numbers
     │   │   └── ToastNotification.vue # Fixed-position toast container
     │   └── router/
-    │       └── index.ts         # Routes: /, /notes/*, /tasks/*, /chat, /chat/:id
+    │       └── index.ts         # Routes: /, /notes/*, /tasks/*, /chat, /chat/:id, /settings
     └── public/
 ```
 
@@ -266,6 +278,10 @@ fabledassistant/
 | POST | `/api/chat/conversations/:id/summarize` | Summarize conversation via LLM, save as note |
 | GET | `/api/chat/status` | Check Ollama availability and model readiness (`{ollama, model, default_model}`) |
 | GET | `/api/chat/models` | List available Ollama models |
+| POST | `/api/chat/models/pull` | Pull/download a model from Ollama (background, body: `{model}`) |
+| POST | `/api/chat/models/delete` | Delete a model from Ollama (body: `{model}`) |
+| GET | `/api/settings` | Get all app settings as `{key: value}` dict |
+| PUT | `/api/settings` | Update settings (body: `{key: value, ...}`) |
 
 ## Alembic Migrations
 
@@ -276,7 +292,7 @@ container startup.
 
 ### Migration Chain
 ```
-0001_create_notes_table.py  →  0002_create_tasks_table.py  →  0003_task_note_companion.py  →  0004_merge_tasks_into_notes.py  →  0005_add_chat_tables.py
+0001_create_notes_table.py  →  0002_create_tasks_table.py  →  0003_task_note_companion.py  →  0004_merge_tasks_into_notes.py  →  0005_add_chat_tables.py  →  0006_add_settings_table.py
 ```
 
 ### How Migrations Run
@@ -419,6 +435,20 @@ When adding a new migration, follow these conventions:
 - [x] **Frontend SSE client:** `apiStreamPost()` uses fetch + ReadableStream to parse SSE data lines
 - [x] **Auto-title:** Conversation title auto-set from first user message content
 
+### Phase 4.5 — Chat UX + Settings + Model Management ✓
+- [x] **Settings infrastructure:** Key-value `settings` table, `GET/PUT /api/settings`, Pinia store with defaults
+- [x] **Configurable assistant name:** Default "Fable", editable in settings, injected into LLM system prompt and chat message labels
+- [x] **Settings page:** `/settings` route with assistant name form + model catalog
+- [x] **Model catalog:** 18 models across 3 categories (General Purpose, Coding, Uncensored / Creative Writing) with descriptions, sizes, and best-for labels
+- [x] **Model management:** Download (pull), select (set as default), and remove (delete from Ollama) with confirmation UI
+- [x] **Status indicator in nav bar:** Moved from per-component (ChatView/ChatPanel) to global AppHeader; green/yellow/red dot with label
+- [x] **Chat bubble layout:** User messages right-aligned (primary color bg), assistant messages left-aligned (card bg), speech bubble tails
+- [x] **Floating dark input bar:** `#1c1c1e` background, rounded corners, circular send button with arrow
+- [x] **Auto-focus input:** Chat input auto-focuses on mount, conversation switch, and after sending
+- [x] **HTML entity fix:** Three-layer approach — decode entities before marked, DOMPurify sanitization, explicit `&#39;` → `'` replacement after sanitization
+- [x] **New chat navigation fix:** `fetchConversation()` called before `router.push()` so `currentConversation` is set immediately
+- [x] **Recent chats on home page:** 3 most recent conversations shown as clickable cards + "New Chat" button
+
 ### Phase 5 — Polish & Production Hardening
 - [ ] Authentication (single-user or multi-user, TBD)
 - [ ] Docker Swarm production stack (secrets, volumes, networking)
@@ -444,16 +474,19 @@ When adding a new migration, follow these conventions:
 - Authentication model: single-user (password-only) vs multi-user?
 
 ## Current Status
-**Phase:** Phase 4 complete. LLM chat integration with streaming responses.
+**Phase:** Phase 4.5 complete. Chat UX improvements, settings page, model management.
 - Full note-taking and task-tracking CRUD with markdown, wikilinks, backlinks, tags
 - Unified note/task model (a task is a note with `status IS NOT NULL`)
 - LLM chat via Ollama with SSE streaming responses
 - Note-aware context: auto-includes current note + searches related notes by keyword
 - URL content fetching: detects URLs in messages, fetches and includes content
 - Save assistant messages as notes; summarize entire conversations as notes
-- Dedicated `/chat` page with conversation sidebar + message thread
+- Dedicated `/chat` page with bubble-style messages (user right, assistant left), floating dark input bar
 - Slide-out chat panel accessible from any page, auto-includes note/task context
-- Auto-pull default model (`llama3.1`) on startup
-- Ollama health check: status indicator on chat views (green/yellow/red dot) with 30s polling; disables send when not ready
+- Settings page: configurable assistant name (default "Fable"), model catalog with 18 models in 3 categories
+- Model management: download, select, and remove models from the settings page
+- Ollama status indicator in global nav bar (green/yellow/red dot) with 30s polling
+- Recent chats section on home page with quick "New Chat" button
+- HTML entity rendering fix (apostrophes in marked → DOMPurify pipeline)
 - Dark/light theme with CSS custom properties
 - Ready for Phase 5: Polish & Production Hardening