refactor(scrape): complete rewrite of content extraction - per-turn parsing for all types

public/css/style.css

@@ -643,6 +643,125 @@ body {
 }
 
 /* Chat Input */
+
+/* --- 사용자 메시지 --- */
+.msg-user {
+  background: var(--accent-primary);
+  color: white;
+  padding: 8px 14px;
+  border-radius: 12px 12px 4px 12px;
+  margin: 4px 0;
+  margin-left: auto;
+  max-width: 80%;
+  font-size: 13px;
+  line-height: 1.5;
+  width: fit-content;
+}
+
+/* --- 상태 표시 --- */
+.msg-status {
+  font-size: 12px;
+  color: var(--text-muted, var(--text-secondary));
+  opacity: 0.6;
+  padding: 2px 0;
+  font-style: italic;
+}
+
+/* --- 마크다운 렌더링 콘텐츠 --- */
+.msg-text table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 8px 0;
+  font-size: 12px;
+}
+
+.msg-text table th,
+.msg-text table td {
+  border: 1px solid var(--border-subtle);
+  padding: 6px 10px;
+  text-align: left;
+}
+
+.msg-text table th {
+  background: var(--bg-tertiary);
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.msg-text table td {
+  color: var(--text-secondary);
+}
+
+.msg-text blockquote {
+  border-left: 3px solid var(--accent-primary);
+  padding: 4px 12px;
+  margin: 8px 0;
+  color: var(--text-secondary);
+  font-style: italic;
+}
+
+.msg-text ul,
+.msg-text ol {
+  padding-left: 20px;
+  margin: 4px 0;
+}
+
+.msg-text li {
+  margin: 2px 0;
+}
+
+.msg-text h1,
+.msg-text h2,
+.msg-text h3,
+.msg-text h4 {
+  margin: 8px 0 4px;
+  color: var(--text-primary);
+}
+
+.msg-text h3 {
+  font-size: 14px;
+}
+
+.msg-text h4 {
+  font-size: 13px;
+}
+
+.msg-text a {
+  color: var(--accent-primary);
+  text-decoration: underline;
+}
+
+.msg-text code {
+  background: var(--bg-tertiary);
+  padding: 1px 4px;
+  border-radius: 3px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
+.msg-text pre {
+  background: var(--bg-tertiary);
+  padding: 10px;
+  border-radius: 6px;
+  overflow-x: auto;
+  margin: 6px 0;
+}
+
+.msg-text pre code {
+  background: none;
+  padding: 0;
+}
+
+.msg-text hr {
+  border: none;
+  border-top: 1px solid var(--border-subtle);
+  margin: 8px 0;
+}
+
+.msg-text strong {
+  color: var(--text-primary);
+}
+
 .chat-input-area {
   display: flex;
   align-items: flex-end;

public/js/chat-panel.js

@@ -103,6 +103,8 @@ class ChatPanel {
             case 'code': return this._renderCode(msg);
             case 'image': return this._renderImage(msg);
             case 'actions': return this._renderActions(msg);
+            case 'user': return this._renderUser(msg);
+            case 'status': return this._renderStatus(msg);
             default: return null;
         }
     }
@@ -353,4 +355,24 @@ class ChatPanel {
     _scrollToBottom() {
         this.messagesEl.scrollTop = this.messagesEl.scrollHeight;
     }
+
+    /**
+     * 사용자 메시지 렌더링
+     */
+    _renderUser(msg) {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'msg-user';
+        wrapper.textContent = msg.content;
+        return wrapper;
+    }
+
+    /**
+     * 상태 표시 (Running, Generating 등)
+     */
+    _renderStatus(msg) {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'msg-status';
+        wrapper.textContent = msg.content;
+        return wrapper;
+    }
 }