Skip to content

Commit 2404276

Browse files
klieretklieret
committed
Fix(viewer): Avoid highlighting issues
1 parent c8b6282 commit 2404276

5 files changed

Lines changed: 49 additions & 90 deletions

File tree

‎codeclash/viewer/app.py‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -191,8 +191,17 @@ def nl2br(value):
191191
return escaped.replace("\n", "<br>\n")
192192

193193

194-
# Register the custom filter
194+
def unescape_content(value):
195+
"""Unescape literal \\n characters to actual newlines for proper display in <pre> tags"""
196+
if value is None:
197+
return ""
198+
# Replace literal \n with actual newlines
199+
return value.replace("\\n", "\n")
200+
201+
202+
# Register the custom filters
195203
app.jinja_env.filters["nl2br"] = nl2br
204+
app.jinja_env.filters["unescape_content"] = unescape_content
196205

197206

198207
@app.route("/")

‎codeclash/viewer/static/js/app.js‎

Lines changed: 1 addition & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -110,68 +110,7 @@ function initializeKeyboardShortcuts() {
110110
});
111111
}
112112

113-
// Code highlighting (basic syntax highlighting)
114-
function initializeCodeHighlighting() {
115-
const codeBlocks = document.querySelectorAll(
116-
".code-block code, .message-text pre",
117-
);
118-
119-
codeBlocks.forEach((block) => {
120-
const text = block.textContent;
121-
122-
// Simple bash highlighting
123-
if (text.includes("#!/bin/bash") || text.includes("```bash")) {
124-
block.classList.add("language-bash");
125-
highlightBash(block);
126-
}
127-
128-
// Simple Python highlighting
129-
if (
130-
text.includes("def ") ||
131-
text.includes("import ") ||
132-
text.includes("python")
133-
) {
134-
block.classList.add("language-python");
135-
highlightPython(block);
136-
}
137-
});
138-
}
139-
140-
function highlightBash(block) {
141-
let html = block.innerHTML;
142-
143-
// Commands
144-
html = html.replace(
145-
/\b(ls|cd|cat|grep|sed|awk|find|mkdir|rm|cp|mv|chmod|echo|export)\b/g,
146-
'<span style="color: var(--accent-color); font-weight: 600;">$1</span>',
147-
);
148-
149-
// Flags
150-
html = html.replace(
151-
/\s(-[a-zA-Z]+)/g,
152-
' <span style="color: var(--warning-color);">$1</span>',
153-
);
154-
155-
block.innerHTML = html;
156-
}
157-
158-
function highlightPython(block) {
159-
let html = block.innerHTML;
160-
161-
// Keywords
162-
html = html.replace(
163-
/\b(def|class|import|from|if|else|elif|for|while|try|except|finally|return|yield|with|as|pass|break|continue|lambda|global|nonlocal)\b/g,
164-
'<span style="color: var(--accent-color); font-weight: 600;">$1</span>',
165-
);
166-
167-
// Strings
168-
html = html.replace(
169-
/(["'])((?:\\.|(?!\1)[^\\])*?)\1/g,
170-
'<span style="color: var(--success-color);">$1$2$1</span>',
171-
);
172-
173-
block.innerHTML = html;
174-
}
113+
// Code highlighting removed to prevent CSS code from appearing in text
175114

176115
// Performance monitoring
177116
function initializePerformanceMonitoring() {
@@ -263,7 +202,6 @@ document.addEventListener("DOMContentLoaded", function () {
263202
initializeTheme();
264203
initializeFoldouts();
265204
initializeKeyboardShortcuts();
266-
initializeCodeHighlighting();
267205
initializePerformanceMonitoring();
268206

269207
console.log("CodeClash Trajectory Viewer initialized");

‎codeclash/viewer/templates/index.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -129,26 +129,26 @@ <h3>🤖 Player {{ trajectory.player_id }} Round {{ round_num }}</h3>
129129
{% for part in parts %}
130130
{% if loop.index is odd %}
131131
<!-- Text part -->
132-
<div class="message-text"><pre>{{ part }}</pre></div>
132+
<div class="message-text"><pre>{{ part | unescape_content }}</pre></div>
133133
{% else %}
134134
<!-- Code part -->
135135
<div class="code-block">
136-
<pre><code>{{ part }}</code></pre>
136+
<pre><code>{{ part | unescape_content }}</code></pre>
137137
</div>
138138
{% endif %}
139139
{% endfor %}
140140
{% else %}
141141
<!-- Regular text content -->
142142
<div class="message-text">
143-
<pre>{{ message.content }}</pre>
143+
<pre>{{ message.content | unescape_content }}</pre>
144144
</div>
145145
{% endif %}
146146
</div>
147147
{% else %}
148148
<!-- Show preview with expand button -->
149149
<div class="message-preview-short clickable-message" onclick="expandMessage(this)" title="Click to expand ({{ content_lines|length - 5 }} more lines)">
150150
<div class="message-text">
151-
<pre>{{ content_lines[:5] | join('\n') }}</pre>
151+
<pre>{{ content_lines[:5] | join('\n') | unescape_content }}</pre>
152152
</div>
153153
<div class="expand-indicator">
154154
▼ {{ content_lines|length - 5 }} more lines
@@ -161,18 +161,18 @@ <h3>🤖 Player {{ trajectory.player_id }} Round {{ round_num }}</h3>
161161
{% for part in parts %}
162162
{% if loop.index is odd %}
163163
<!-- Text part -->
164-
<div class="message-text"><pre>{{ part }}</pre></div>
164+
<div class="message-text"><pre>{{ part | unescape_content }}</pre></div>
165165
{% else %}
166166
<!-- Code part -->
167167
<div class="code-block">
168-
<pre><code>{{ part }}</code></pre>
168+
<pre><code>{{ part | unescape_content }}</code></pre>
169169
</div>
170170
{% endif %}
171171
{% endfor %}
172172
{% else %}
173173
<!-- Regular text content -->
174174
<div class="message-text">
175-
<pre>{{ message.content }}</pre>
175+
<pre>{{ message.content | unescape_content }}</pre>
176176
</div>
177177
{% endif %}
178178
<div class="collapse-indicator clickable-message" onclick="collapseMessage(this)" title="Click to collapse">
@@ -188,20 +188,20 @@ <h3>🤖 Player {{ trajectory.player_id }} Round {{ round_num }}</h3>
188188
{% set content_lines = content_part.text.split('\n') %}
189189
{% if content_lines|length <= 5 %}
190190
<div class="message-text">
191-
<pre>{{ content_part.text }}</pre>
191+
<pre>{{ content_part.text | unescape_content }}</pre>
192192
</div>
193193
{% else %}
194194
<div class="message-preview-short clickable-message" onclick="expandMessage(this)" title="Click to expand ({{ content_lines|length - 5 }} more lines)">
195195
<div class="message-text">
196-
<pre>{{ content_lines[:5] | join('\n') }}</pre>
196+
<pre>{{ content_lines[:5] | join('\n') | unescape_content }}</pre>
197197
</div>
198198
<div class="expand-indicator">
199199
▼ {{ content_lines|length - 5 }} more lines
200200
</div>
201201
</div>
202202
<div class="message-content-expanded" style="display: none;" title="Content expanded - click collapse button below to hide">
203203
<div class="message-text">
204-
<pre>{{ content_part.text }}</pre>
204+
<pre>{{ content_part.text | unescape_content }}</pre>
205205
</div>
206206
<div class="collapse-indicator clickable-message" onclick="collapseMessage(this)" title="Click to collapse">
207207
▲ Click to collapse

‎codeclash/viewer/templates/no_logs.html‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,26 @@ <h2>📂 No Game Logs Found</h2>
2828
<h3>Expected Structure:</h3>
2929
<pre><code>logs/
3030
├── game_session_1/
31-
│ ├── results.json
32-
│ ├── main.log
33-
│ ├── round_1.log
34-
│ ├── round_2.log
35-
│ ├── p1_r1.traj.json
36-
│ ├── p1_r2.traj.json
37-
│ ├── p2_r1.traj.json
38-
│ └── p2_r2.traj.json
31+
│ ├── metadata.json
32+
│ ├── tournament.log
33+
│ ├── rounds/
34+
│ │ ├── 1/
35+
│ │ │ ├── results.json
36+
│ │ │ ├── sim_0.log
37+
│ │ │ ├── sim_1.log
38+
│ │ │ └── ...
39+
│ │ └── 2/
40+
│ │ ├── results.json
41+
│ │ └── ...
42+
│ └── players/
43+
│ ├── p1/
44+
│ │ ├── p1_r1.traj.json
45+
│ │ ├── p1_r2.traj.json
46+
│ │ └── player.log
47+
│ └── p2/
48+
│ ├── p2_r1.traj.json
49+
│ ├── p2_r2.traj.json
50+
│ └── player.log
3951
└── game_session_2/
4052
└── ...</code></pre>
4153
</div>

‎codeclash/viewer/templates/trajectory.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -35,18 +35,18 @@
3535
{% for part in parts %}
3636
{% if loop.index is odd %}
3737
<!-- Text part -->
38-
<div class="message-text"><pre>{{ part }}</pre></div>
38+
<div class="message-text"><pre>{{ part | unescape_content }}</pre></div>
3939
{% else %}
4040
<!-- Code part -->
4141
<div class="code-block">
42-
<pre><code>{{ part }}</code></pre>
42+
<pre><code>{{ part | unescape_content }}</code></pre>
4343
</div>
4444
{% endif %}
4545
{% endfor %}
4646
{% else %}
4747
<!-- Regular text content -->
4848
<div class="message-text">
49-
<pre>{{ message.content }}</pre>
49+
<pre>{{ message.content | unescape_content }}</pre>
5050
</div>
5151
{% endif %}
5252
</div>
@@ -67,18 +67,18 @@
6767
{% for part in parts %}
6868
{% if loop.index is odd %}
6969
<!-- Text part -->
70-
<div class="message-text"><pre>{{ part }}</pre></div>
70+
<div class="message-text"><pre>{{ part | unescape_content }}</pre></div>
7171
{% else %}
7272
<!-- Code part -->
7373
<div class="code-block">
74-
<pre><code>{{ part }}</code></pre>
74+
<pre><code>{{ part | unescape_content }}</code></pre>
7575
</div>
7676
{% endif %}
7777
{% endfor %}
7878
{% else %}
7979
<!-- Regular text content -->
8080
<div class="message-text">
81-
<pre>{{ message.content }}</pre>
81+
<pre>{{ message.content | unescape_content }}</pre>
8282
</div>
8383
{% endif %}
8484
<div class="collapse-indicator clickable-message" onclick="collapseMessage(this)" title="Click to collapse">
@@ -99,15 +99,15 @@
9999
{% else %}
100100
<div class="message-preview-short clickable-message" onclick="expandMessage(this)" title="Click to expand ({{ content_lines|length - 5 }} more lines)">
101101
<div class="message-text">
102-
<pre>{{ content_lines[:5] | join('\n') }}</pre>
102+
<pre>{{ content_lines[:5] | join('\n') | unescape_content }}</pre>
103103
</div>
104104
<div class="expand-indicator">
105105
▼ {{ content_lines|length - 5 }} more lines
106106
</div>
107107
</div>
108108
<div class="message-content-expanded" style="display: none;" title="Content expanded - click collapse button below to hide">
109109
<div class="message-text">
110-
<pre>{{ content_part.text }}</pre>
110+
<pre>{{ content_part.text | unescape_content }}</pre>
111111
</div>
112112
<div class="collapse-indicator clickable-message" onclick="collapseMessage(this)" title="Click to collapse">
113113
▲ Click to collapse

0 commit comments

Comments
 (0)