diff --git a/client/js/app.js b/client/js/app.js
index 5ebd091..72c506b 100644
--- a/client/js/app.js
+++ b/client/js/app.js
@@ -47,6 +47,8 @@
   fileInput.addEventListener('change', onFileChange);
   profileSelect.addEventListener('change', onProfileChange);
 
+  sessionListEl.innerHTML = '<div class="sidebar-spinner"><div class="spinner"></div></div>';
+
   [profiles, sessions] = await Promise.all([api.getProfiles(), api.getSessions()]);
   sessions = sessions.map(enrichSession);
 
@@ -131,9 +133,10 @@
 }
 
 async function loadHistory(sessionId) {
-  messagesEl.innerHTML = '';
+  messagesEl.innerHTML = '<div class="chat-spinner"><div class="spinner"></div></div>';
   try {
     const data = await api.getSession(sessionId);
+    messagesEl.innerHTML = '';
 
     const toolCallMap = {};
     for (const msg of data.messages) {
@@ -173,6 +176,7 @@
     scrollToBottom(messagesEl);
   } catch (e) {
     console.error('loadHistory', e);
+    messagesEl.innerHTML = '';
   }
 }
 
diff --git a/client/style.css b/client/style.css
index 9bb8dc4..643d893 100644
--- a/client/style.css
+++ b/client/style.css
@@ -1,7 +1,7 @@
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
 :root {
-  --sidebar-w: 260px;
+  --sidebar-w: 300px;
   --bg: #111111;
   --sidebar-bg: #1a1a1a;
   --border: #2a2a2a;
@@ -108,11 +108,19 @@
 .session-item:hover { background: #222; }
 .session-item.active { background: #1a2540; }
 .session-item .s-profile { font-size: 11px; color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; }
-.session-item .s-preview { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.session-item .s-time { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
+.session-item .s-preview {
+  font-size: 13px;
+  color: var(--text);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.4;
+}
+.session-item .s-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
 
 .session-item .s-body { flex: 1; min-width: 0; }
-.session-item { display: flex; align-items: center; gap: 6px; }
+.session-item { display: flex; align-items: flex-start; gap: 6px; }
 .session-item.pinned { border-left: 2px solid var(--accent); padding-left: 10px; }
 
 .s-actions {
@@ -121,6 +129,7 @@
   flex-shrink: 0;
   opacity: 0;
   transition: opacity 0.15s;
+  padding-top: 2px; /* align buttons with first line of preview */
 }
 .session-item:hover .s-actions { opacity: 1; }
 
@@ -146,6 +155,36 @@
 
 .empty-sessions { padding: 20px 12px; color: var(--text-muted); font-size: 13px; text-align: center; }
 
+/* ── Spinners ────────────────────────────────────────── */
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+  flex-shrink: 0;
+}
+
+/* Centred in the session list column */
+.sidebar-spinner {
+  display: flex;
+  justify-content: center;
+  padding: 24px 0;
+}
+
+/* Centred in the chat messages area */
+.chat-spinner {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+}
+.chat-spinner .spinner { width: 28px; height: 28px; border-width: 3px; }
+
 /* ── Main chat area ──────────────────────────────────── */
 
 .chat {