refactor: Unify channel and DM interface styling

- Change DM message input from input to textarea (rows=2) for consistency
- Increase DM form padding (p-2 → p-3) to match channel view
- Increase DM status bar padding (p-1 → p-2) with larger font
- Replace "Last refresh:" with "Updated:" in both views
- Update DM status to show connection states (Connected/Connecting/Disconnected) instead of "Ready"
- Add loadStatus() function to DM page for proper connection monitoring
- Unify message input area height and status bar appearance across both pages

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

app/static/js/app.js

@@ -574,7 +574,7 @@ function updateStatus(status) {
 function updateLastRefresh() {
     const now = new Date();
     const timeStr = now.toLocaleTimeString();
-    document.getElementById('lastRefresh').textContent = `Last refresh: ${timeStr}`;
+    document.getElementById('lastRefresh').textContent = `Updated: ${timeStr}`;
 }
 
 /**

app/static/js/dm.js

@@ -36,6 +36,9 @@ document.addEventListener('DOMContentLoaded', async function() {
     // Load conversations into dropdown
     await loadConversations();
 
+    // Load connection status
+    await loadStatus();
+
     // Check for initial conversation from URL parameter
     if (window.MC_CONFIG && window.MC_CONFIG.initialConversation) {
         const convId = window.MC_CONFIG.initialConversation;
@@ -45,8 +48,6 @@ document.addEventListener('DOMContentLoaded', async function() {
 
     // Setup auto-refresh
     setupAutoRefresh();
-
-    updateStatus('connected', 'Ready');
 });
 
 // Handle page restoration from cache (PWA back/forward navigation)
@@ -484,6 +485,9 @@ function setupAutoRefresh() {
         // Reload conversations to update unread indicators
         await loadConversations();
 
+        // Update connection status
+        await loadStatus();
+
         // If viewing a conversation, check for new messages
         if (currentConversationId) {
             await checkForNewMessages();
@@ -659,21 +663,37 @@ async function markAsRead(conversationId, timestamp) {
     populateConversationSelector();
 }
 
+/**
+ * Load connection status
+ */
+async function loadStatus() {
+    try {
+        const response = await fetch('/api/status');
+        const data = await response.json();
+
+        if (data.success) {
+            updateStatus(data.connected ? 'connected' : 'disconnected');
+        }
+    } catch (error) {
+        console.error('Error loading status:', error);
+        updateStatus('disconnected');
+    }
+}
+
 /**
  * Update status indicator
  */
-function updateStatus(status, message) {
+function updateStatus(status) {
     const statusEl = document.getElementById('dmStatusText');
     if (!statusEl) return;
 
-    const statusColors = {
-        'connected': 'success',
-        'disconnected': 'danger',
-        'connecting': 'warning'
+    const icons = {
+        connected: '<i class="bi bi-circle-fill status-connected"></i> Connected',
+        disconnected: '<i class="bi bi-circle-fill status-disconnected"></i> Disconnected',
+        connecting: '<i class="bi bi-circle-fill status-connecting"></i> Connecting...'
     };
 
-    const color = statusColors[status] || 'secondary';
-    statusEl.innerHTML = `<i class="bi bi-circle-fill text-${color}"></i> ${message}`;
+    statusEl.innerHTML = icons[status] || icons.connecting;
 }
 
 /**