Merge pull request #62 from TeigenZhang/feat/mobile-response-viewer

feat: mobile response viewer with markdown rendering

Author: Ark0N

src/web/public/app.js

@@ -869,6 +869,124 @@ class CodemanApp {
     }
   }
 
+  // ═══════════════════════════════════════════════════════════════
+  // Response Viewer — native-scroll panel for reading full Claude responses
+  // ═══════════════════════════════════════════════════════════════
+
+  /** Render markdown to sanitized HTML, falling back to plain text if marked.js unavailable */
+  _renderMarkdown(text) {
+    if (typeof marked !== 'undefined' && marked.parse) {
+      try {
+        return marked.parse(text, { breaks: true, gfm: true });
+      } catch { /* fall through */ }
+    }
+    // Fallback: escape HTML and preserve whitespace
+    const escaped = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    return `<pre style="white-space:pre-wrap;word-break:break-word">${escaped}</pre>`;
+  }
+
+  async toggleResponseViewer() {
+    const viewer = document.getElementById('responseViewer');
+    const backdrop = document.getElementById('responseViewerBackdrop');
+    if (!viewer) return;
+
+    const isOpen = viewer.classList.contains('visible');
+    if (isOpen) {
+      viewer.classList.remove('visible');
+      backdrop.classList.remove('visible');
+      return;
+    }
+
+    if (!this.activeSessionId) return;
+    try {
+      // Source 1: Transcript JSONL (best quality — clean structured text from Claude)
+      const res = await fetch(`/api/sessions/${this.activeSessionId}/last-response`);
+      const data = await res.json();
+      let lastResponse = data.text || '';
+
+      // Source 2: Terminal buffer fallback (strip ANSI codes)
+      if (!lastResponse) {
+        const termRes = await fetch(`/api/sessions/${this.activeSessionId}/terminal`);
+        const termData = await termRes.json();
+        if (termData.terminalBuffer) {
+          lastResponse = termData.terminalBuffer
+            .replace(/\x1b\[\?[0-9;]*[a-zA-Z]/g, '')
+            .replace(/\x1b\[[0-9;]*[a-zA-Z]/g, '')
+            .replace(/\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)/g, '')
+            .replace(/\x1b[()][A-Z0-9]/g, '')
+            .replace(/\x1b[>=<]/g, '')
+            .replace(/[\x00-\x08\x0b\x0c\x0e-\x1f\x7f]/g, '')
+            .replace(/\r\n/g, '\n').replace(/\r/g, '\n')
+            .replace(/[ \t]+$/gm, '')
+            .replace(/\n{4,}/g, '\n\n\n')
+            .trim();
+        }
+      }
+
+      const body = document.getElementById('responseViewerBody');
+      body.innerHTML = this._renderMarkdown(lastResponse);
+
+      // Reset state for fresh open
+      const title = document.getElementById('responseViewerTitle');
+      const moreBtn = document.getElementById('responseViewerMore');
+      if (title) title.textContent = 'Last Response';
+      if (moreBtn) { moreBtn.style.display = ''; moreBtn.textContent = 'More'; }
+
+      viewer.classList.add('visible');
+      backdrop.classList.add('visible');
+      body.scrollTop = 0;
+    } catch (err) {
+      console.error('Failed to load response:', err);
+    }
+  }
+
+  async loadFullContext() {
+    if (!this.activeSessionId) return;
+    const moreBtn = document.getElementById('responseViewerMore');
+    if (moreBtn) moreBtn.textContent = '...';
+    try {
+      const res = await fetch(`/api/sessions/${this.activeSessionId}/last-response?context=full`);
+      const data = await res.json();
+      const messages = data.messages || [];
+      const body = document.getElementById('responseViewerBody');
+      const title = document.getElementById('responseViewerTitle');
+      if (!body) return;
+
+      if (messages.length === 0) {
+        body.textContent = 'No conversation history available';
+        return;
+      }
+
+      // Render conversation thread
+      body.innerHTML = '';
+      for (const msg of messages) {
+        const div = document.createElement('div');
+        div.className = 'rv-message';
+
+        const role = document.createElement('div');
+        role.className = 'rv-role ' + (msg.role === 'user' ? 'rv-role-user' : 'rv-role-assistant');
+        role.textContent = msg.role === 'user' ? 'You' : 'Claude';
+        div.appendChild(role);
+
+        const text = document.createElement('div');
+        text.className = 'rv-text';
+        text.innerHTML = this._renderMarkdown(msg.text);
+        div.appendChild(text);
+
+        body.appendChild(div);
+      }
+
+      if (title) title.textContent = `Conversation (${messages.length} messages)`;
+      if (moreBtn) moreBtn.style.display = 'none';
+      // Scroll to bottom (latest message)
+      body.scrollTop = body.scrollHeight;
+    } catch (err) {
+      console.error('Failed to load context:', err);
+    } finally {
+      if (moreBtn) moreBtn.textContent = 'More';
+    }
+  }
+
   async _onSessionNeedsRefresh() {
     // Server sends this after SSE backpressure clears — terminal data was dropped,
     // so reload the buffer to recover from any display corruption.

src/web/public/index.html

@@ -26,6 +26,7 @@
   <!-- WebGL addon lazy-loaded by app.js on desktop only (skipped on mobile, saving 244KB) -->
   <script defer src="vendor/xterm-addon-unicode11.min.js"></script>
   <script defer src="vendor/xterm-zerolag-input.js"></script>
+  <script defer src="vendor/marked.min.js"></script>
   <!-- Synchronous mobile detection — runs before first paint to prevent panel flash -->
   <script>if(window.innerWidth<768||(('ontouchstart' in window||navigator.maxTouchPoints>0)&&window.innerWidth<1024))document.documentElement.classList.add('mobile-init');</script>
   <!-- Inline critical CSS for instant skeleton paint (before styles.css loads) -->
@@ -92,6 +93,7 @@
             <span class="stat-value" id="statMem">--</span>
           </div>
         </div>
+        <button class="btn-icon-header btn-response-viewer-header" onclick="app.toggleResponseViewer()" title="View last response" aria-label="View last response"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></button>
         <button class="btn-icon-header btn-notifications" onclick="app.toggleNotifications()" title="Notifications" aria-label="Toggle notifications">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
           <span class="notification-badge" id="notifBadge" style="display:none;">0</span>
@@ -331,6 +333,19 @@ <h3 class="history-title">Resume Conversation</h3>
       </div>
     </div>
 
+    <!-- Response Viewer (mobile: native-scroll overlay for reading full Claude responses) -->
+    <div class="response-viewer" id="responseViewer">
+      <div class="response-viewer-header">
+        <span id="responseViewerTitle">Last Response</span>
+        <div class="response-viewer-actions">
+          <button class="response-viewer-more" id="responseViewerMore" onclick="app.loadFullContext()">More</button>
+          <button class="response-viewer-close" onclick="app.toggleResponseViewer()">&times;</button>
+        </div>
+      </div>
+      <div class="response-viewer-body" id="responseViewerBody"></div>
+    </div>
+    <div class="response-viewer-backdrop" id="responseViewerBackdrop" onclick="app.toggleResponseViewer()"></div>
+
     <!-- Bottom Toolbar -->
     <footer class="toolbar">
       <div class="toolbar-left">

src/web/public/mobile.css

@@ -301,9 +301,15 @@ html.mobile-init .file-browser-panel {
    Phone Breakpoint (<430px)
    ============================================================================ */
 @media (max-width: 430px) {
-  /* Hide header brand on phones */
+  /* Compact header brand on phones — acts as home button */
   .header-brand {
-    display: none;
+    padding-right: 0.25rem;
+    margin-right: 0.2rem;
+    border-right: none;
+  }
+
+  .header-brand .logo {
+    font-size: 0.7rem;
   }
 
   /* Font controls - compact on phones, visibility controlled by JS */
@@ -1189,6 +1195,20 @@ html.mobile-init .file-browser-panel {
     touch-action: none;
   }
 
+  /* Response viewer — show eye icon in header on mobile */
+  .btn-response-viewer-header {
+    display: inline-flex !important;
+  }
+
+  .response-viewer {
+    padding-bottom: var(--safe-area-bottom, 0px);
+  }
+
+  .response-viewer-body {
+    font-size: 12px;
+    padding: 12px;
+  }
+
   /* Compact welcome overlay for mobile */
   .welcome-content {
     max-width: calc(100vw - 1.5rem);