loop/server: use pre tags for tool descriptions in debug page
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: sf5897ffabc6f6045k
diff --git a/loop/server/debug_tools_test.go b/loop/server/debug_tools_test.go
new file mode 100644
index 0000000..87ad354
--- /dev/null
+++ b/loop/server/debug_tools_test.go
@@ -0,0 +1,44 @@
+package server
+
+import (
+ "net/http/httptest"
+ "strings"
+ "testing"
+
+ "sketch.dev/llm"
+)
+
+func TestRenderToolsDebugPage_UsesPre(t *testing.T) {
+ tools := []*llm.Tool{
+ {
+ Name: "test_tool",
+ Description: "This is a test tool\nwith multiple lines\nand formatting",
+ InputSchema: []byte(`{"type": "object"}`),
+ },
+ }
+
+ w := httptest.NewRecorder()
+ renderToolsDebugPage(w, tools)
+ html := w.Body.String()
+
+ // Verify CSS includes pre-wrap styling
+ if !strings.Contains(html, "white-space: pre-wrap") {
+ t.Error("Expected CSS to contain 'white-space: pre-wrap'")
+ }
+ if !strings.Contains(html, "font-family: 'SF Mono', Monaco, monospace") {
+ t.Error("Expected CSS to contain monospace font-family")
+ }
+
+ // Verify HTML uses <pre> tag for tool description
+ if !strings.Contains(html, `<pre class="tool-description">`) {
+ t.Error("Expected HTML to use <pre class=\"tool-description\"> tag")
+ }
+ if strings.Contains(html, `<div class="tool-description">`) {
+ t.Error("Expected HTML to NOT use <div class=\"tool-description\"> tag")
+ }
+
+ // Verify the description content is preserved
+ if !strings.Contains(html, "This is a test tool") {
+ t.Error("Expected tool description to be included")
+ }
+}
diff --git a/loop/server/loophttp.go b/loop/server/loophttp.go
index 856932d..5abe750 100644
--- a/loop/server/loophttp.go
+++ b/loop/server/loophttp.go
@@ -1257,7 +1257,7 @@
h1 { color: #333; }
.tool { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px; padding: 20px; margin: 20px 0; }
.tool-name { font-size: 1.2em; font-weight: bold; color: #0366d6; margin-bottom: 8px; }
- .tool-description { color: #586069; margin-bottom: 12px; }
+ .tool-description { color: #586069; margin-bottom: 12px; white-space: pre-wrap; font-family: 'SF Mono', Monaco, monospace; }
.tool-schema { background: #f6f8fa; border: 1px solid #d0d7de; border-radius: 4px; padding: 12px; font-family: 'SF Mono', Monaco, monospace; font-size: 12px; overflow-x: auto; }
.tool-meta { font-size: 0.9em; color: #656d76; margin-top: 8px; }
.summary { background: #e6f3ff; border-left: 4px solid #0366d6; padding: 16px; margin-bottom: 30px; }
@@ -1276,7 +1276,7 @@
`, i+1, html.EscapeString(tool.Name))
if tool.Description != "" {
- fmt.Fprintf(w, ` <div class="tool-description">%s</div>
+ fmt.Fprintf(w, ` <pre class="tool-description">%s</pre>
`, html.EscapeString(tool.Description))
}