Merge pull request #454 from dgageot/render-javascript

Format Code Mode's Javascript

Author: rumpl

pkg/tui/components/messages/messages.go

@@ -626,7 +626,7 @@ func (m *model) PlainTextTranscript() string {
 }
 
 func (m *model) createToolCallView(msg *types.Message) layout.Model {
-	view := tool.New(msg, m.app)
+	view := tool.New(msg, m.app, m.renderer)
 	view.SetSize(m.width, 0)
 	return view
 }

pkg/tui/components/tool/builtins.go

@@ -4,6 +4,8 @@ import (
 	"encoding/json"
 	"strings"
 
+	"github.com/charmbracelet/glamour/v2"
+
 	"github.com/docker/cagent/pkg/codemode"
 	"github.com/docker/cagent/pkg/tools"
 	"github.com/docker/cagent/pkg/tools/builtin"
@@ -31,13 +33,18 @@ func render_search_files(toolCall tools.ToolCall) string {
 	return output
 }
 
-func render_run_tools_with_javascript(toolCall tools.ToolCall) string {
+func render_run_tools_with_javascript(toolCall tools.ToolCall, renderer *glamour.TermRenderer) string {
 	var args codemode.RunToolsWithJavascriptArgs
 	if err := json.Unmarshal([]byte(toolCall.Function.Arguments), &args); err != nil {
 		return ""
 	}
 
-	return args.Script
+	md, err := renderer.Render("```javascript\n" + args.Script + "\n```")
+	if err != nil {
+		return args.Script
+	}
+
+	return md
 }
 
 func render_edit_file(toolCall tools.ToolCall, width int) (string, string) {

pkg/tui/components/tool/tool.go

@@ -7,6 +7,7 @@ import (
 
 	"github.com/charmbracelet/bubbles/v2/spinner"
 	tea "github.com/charmbracelet/bubbletea/v2"
+	"github.com/charmbracelet/glamour/v2"
 
 	"github.com/docker/cagent/pkg/app"
 	"github.com/docker/cagent/pkg/tui/core/layout"
@@ -18,7 +19,8 @@ import (
 type toolModel struct {
 	message *types.Message
 
-	spinner spinner.Model
+	spinner  spinner.Model
+	renderer *glamour.TermRenderer
 
 	width  int
 	height int
@@ -34,19 +36,20 @@ func (mv *toolModel) SetSize(width, height int) tea.Cmd {
 }
 
 // New creates a new tool view
-func New(msg *types.Message, a *app.App) layout.Model {
+func New(msg *types.Message, a *app.App, renderer *glamour.TermRenderer) layout.Model {
 	if msg.ToolCall.Function.Name == "transfer_task" {
 		return &transferTaskModel{
 			msg: msg,
 		}
 	}
 
 	return &toolModel{
-		message: msg,
-		width:   80,
-		height:  1,
-		spinner: spinner.New(spinner.WithSpinner(spinner.Points)),
-		app:     a,
+		message:  msg,
+		width:    80,
+		height:   1,
+		spinner:  spinner.New(spinner.WithSpinner(spinner.Points)),
+		renderer: renderer,
+		app:      a,
 	}
 }
 
@@ -102,7 +105,7 @@ func (mv *toolModel) View() string {
 		case "search_files":
 			content += " " + render_search_files(msg.ToolCall)
 		case "run_tools_with_javascript":
-			content += " " + render_run_tools_with_javascript(msg.ToolCall)
+			content += " " + render_run_tools_with_javascript(msg.ToolCall, mv.renderer)
 		case "edit_file":
 			diff, path := render_edit_file(msg.ToolCall, mv.width)
 			if diff != "" {