docs: update landing page Recent Updates with v1.18-v1.29 features

Replace outdated feature cards (v1.4-v1.13) with the latest additions:
- Themes & accent colors (v1.20-v1.29)
- Thinking/reasoning display (v1.18-v1.25)
- Split view (v1.28)
- Message search (v1.22)
- Syntax highlighting input (v1.27)
- Drag & drop sessions (v1.26)
- Agent avatars (v1.19)
- Raw JSON & metadata viewer (v1.15-v1.24)
- Keyboard shortcuts (v1.13, kept)

docs/index.html

@@ -776,55 +776,69 @@
 
       <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 2rem;">
 
+        <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 1.25rem;">
+          <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">🎨</div>
+          <h3 style="color: var(--text-primary); font-size: 0.95rem; margin-bottom: 0.35rem;">Themes & Accent Colors</h3>
+          <p style="color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5;">Dark, Light, OLED Black, and System (auto) themes. Six accent colors to match your style. All persisted in localStorage.</p>
+          <span style="display: inline-block; margin-top: 0.5rem; font-size: 0.7rem; color: var(--cyan); opacity: 0.7;">v1.20 – v1.29</span>
+        </div>
+
+        <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 1.25rem;">
+          <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">🧠</div>
+          <h3 style="color: var(--text-primary); font-size: 0.95rem; margin-bottom: 0.35rem;">Thinking & Reasoning Display</h3>
+          <p style="color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5;">See the agent's reasoning in collapsible blocks. Hidden thinking shows an elapsed timer. Streamed thinking renders live.</p>
+          <span style="display: inline-block; margin-top: 0.5rem; font-size: 0.7rem; color: var(--cyan); opacity: 0.7;">v1.18 – v1.25</span>
+        </div>
+
+        <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 1.25rem;">
+          <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">📐</div>
+          <h3 style="color: var(--text-primary); font-size: 0.95rem; margin-bottom: 0.35rem;">Split View</h3>
+          <p style="color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5;">View two sessions side by side with a resizable divider. Full chat in both panes — history, streaming, sending.</p>
+          <span style="display: inline-block; margin-top: 0.5rem; font-size: 0.7rem; color: var(--cyan); opacity: 0.7;">v1.28</span>
+        </div>
+
+        <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 1.25rem;">
+          <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">🔍</div>
+          <h3 style="color: var(--text-primary); font-size: 0.95rem; margin-bottom: 0.35rem;">Message Search</h3>
+          <p style="color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5;">Ctrl+F to search and highlight messages in the current session. Navigate between results with arrow keys.</p>
+          <span style="display: inline-block; margin-top: 0.5rem; font-size: 0.7rem; color: var(--cyan); opacity: 0.7;">v1.22</span>
+        </div>
+
+        <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 1.25rem;">
+          <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">✨</div>
+          <h3 style="color: var(--text-primary); font-size: 0.95rem; margin-bottom: 0.35rem;">Syntax Highlighting Input</h3>
+          <p style="color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5;">Real-time markdown highlighting while you type — code blocks, bold, italic, headings, and links colored in the input.</p>
+          <span style="display: inline-block; margin-top: 0.5rem; font-size: 0.7rem; color: var(--cyan); opacity: 0.7;">v1.27</span>
+        </div>
+
+        <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 1.25rem;">
+          <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">🔀</div>
+          <h3 style="color: var(--text-primary); font-size: 0.95rem; margin-bottom: 0.35rem;">Drag & Drop Sessions</h3>
+          <p style="color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5;">Reorder sessions by dragging them in the sidebar. Custom order persists across reloads.</p>
+          <span style="display: inline-block; margin-top: 0.5rem; font-size: 0.7rem; color: var(--cyan); opacity: 0.7;">v1.26</span>
+        </div>
+
+        <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 1.25rem;">
+          <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">👤</div>
+          <h3 style="color: var(--text-primary); font-size: 0.95rem; margin-bottom: 0.35rem;">Agent Avatars</h3>
+          <p style="color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5;">Displays the agent's custom avatar from OpenClaw config next to messages and in the header. Falls back to a default icon.</p>
+          <span style="display: inline-block; margin-top: 0.5rem; font-size: 0.7rem; color: var(--cyan); opacity: 0.7;">v1.19</span>
+        </div>
+
+        <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 1.25rem;">
+          <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">📋</div>
+          <h3 style="color: var(--text-primary); font-size: 0.95rem; margin-bottom: 0.35rem;">Raw JSON & Metadata</h3>
+          <p style="color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5;">Toggle raw gateway JSON on any message. Hover to reveal the metadata inspector — timestamps, IDs, channel info.</p>
+          <span style="display: inline-block; margin-top: 0.5rem; font-size: 0.7rem; color: var(--cyan); opacity: 0.7;">v1.15 – v1.24</span>
+        </div>
+
         <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 1.25rem;">
           <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">⌨️</div>
           <h3 style="color: var(--text-primary); font-size: 0.95rem; margin-bottom: 0.35rem;">Keyboard Shortcuts</h3>
-          <p style="color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5;">Navigate between sessions with Alt+↑/↓, search with ⌘K, and view all shortcuts with ?. Power-user friendly.</p>
+          <p style="color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5;">Alt+↑/↓ to switch sessions, ⌘K for session search, ⌘F for message search, ? for the shortcuts panel.</p>
           <span style="display: inline-block; margin-top: 0.5rem; font-size: 0.7rem; color: var(--cyan); opacity: 0.7;">v1.13</span>
         </div>
 
-        <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 1.25rem;">
-          <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">📥</div>
-          <h3 style="color: var(--text-primary); font-size: 0.95rem; margin-bottom: 0.35rem;">Conversation Export</h3>
-          <p style="color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5;">Download any conversation as a formatted Markdown file — messages, tool calls, thinking blocks, timestamps included.</p>
-          <span style="display: inline-block; margin-top: 0.5rem; font-size: 0.7rem; color: var(--cyan); opacity: 0.7;">v1.12</span>
-        </div>
-
-        <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 1.25rem;">
-          <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">↔️</div>
-          <h3 style="color: var(--text-primary); font-size: 0.95rem; margin-bottom: 0.35rem;">Resizable Sidebar</h3>
-          <p style="color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5;">Drag the sidebar edge to resize. Width persists across sessions via localStorage.</p>
-          <span style="display: inline-block; margin-top: 0.5rem; font-size: 0.7rem; color: var(--cyan); opacity: 0.7;">v1.5</span>
-        </div>
-
-        <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 1.25rem;">
-          <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">🔔</div>
-          <h3 style="color: var(--text-primary); font-size: 0.95rem; margin-bottom: 0.35rem;">System Event Detection</h3>
-          <p style="color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5;">Heartbeats, cron triggers, and webhooks display as subtle inline notifications — not full message bubbles.</p>
-          <span style="display: inline-block; margin-top: 0.5rem; font-size: 0.7rem; color: var(--cyan); opacity: 0.7;">v1.6</span>
-        </div>
-
-        <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 1.25rem;">
-          <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">🏷️</div>
-          <h3 style="color: var(--text-primary); font-size: 0.95rem; margin-bottom: 0.35rem;">Smart Session Labels</h3>
-          <p style="color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5;">Human-friendly titles, channel icons, agent name badges, model info, and relative timestamps in the sidebar.</p>
-          <span style="display: inline-block; margin-top: 0.5rem; font-size: 0.7rem; color: var(--cyan); opacity: 0.7;">v1.9 – v1.11</span>
-        </div>
-
-        <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 1.25rem;">
-          <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">🗑️</div>
-          <h3 style="color: var(--text-primary); font-size: 0.95rem; margin-bottom: 0.35rem;">Session Management</h3>
-          <p style="color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5;">Delete sessions from the sidebar, pin favorites to the top, and per-session input drafts preserved when switching.</p>
-          <span style="display: inline-block; margin-top: 0.5rem; font-size: 0.7rem; color: var(--cyan); opacity: 0.7;">v1.4 – v1.8</span>
-        </div>
-
-        <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 1.25rem;">
-          <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">🐳</div>
-          <h3 style="color: var(--text-primary); font-size: 0.95rem; margin-bottom: 0.35rem;">Proper Releases</h3>
-          <p style="color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5;">Semver tags, GitHub Releases with changelogs, and Docker images auto-published to ghcr.io on every release.</p>
-          <span style="display: inline-block; margin-top: 0.5rem; font-size: 0.7rem; color: var(--cyan); opacity: 0.7;">CI/CD</span>
-        </div>
-
       </div>
     </div>
   </section>