g3 console initial cut + error doesnt kill auto

crates/g3-console/web/src/components/ChatView.jsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import { marked } from 'marked'
+import hljs from 'highlight.js'
+import 'highlight.js/styles/github-dark.css'
+import ToolCall from './ToolCall'
+
+function ChatView({ messages, toolCalls }) {
+  const renderMessage = (message) => {
+    const html = marked(message.content)
+    
+    return (
+      <div
+        key={message.id}
+        className={`p-4 rounded-lg mb-4 ${
+          message.agent === 'coach'
+            ? 'bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-500'
+            : message.agent === 'player'
+            ? 'bg-gray-50 dark:bg-gray-800 border-l-4 border-gray-500'
+            : 'bg-white dark:bg-gray-700'
+        }`}
+      >
+        <div className="flex items-center gap-2 mb-2">
+          <span className="text-xs font-semibold text-gray-600 dark:text-gray-400">
+            {message.agent.toUpperCase()}
+          </span>
+          <span className="text-xs text-gray-500 dark:text-gray-500">
+            {new Date(message.timestamp).toLocaleTimeString()}
+          </span>
+        </div>
+        <div
+          className="markdown prose dark:prose-invert max-w-none"
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+      </div>
+    )
+  }
+
+  React.useEffect(() => {
+    // Highlight code blocks after render
+    document.querySelectorAll('pre code').forEach((block) => {
+      hljs.highlightElement(block)
+    })
+  }, [messages])
+
+  if (messages.length === 0 && toolCalls.length === 0) {
+    return (
+      <div className="text-center text-gray-600 dark:text-gray-400 py-8">
+        No messages yet
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4 max-h-[600px] overflow-y-auto">
+      {messages.map(renderMessage)}
+      
+      {toolCalls.length > 0 && (
+        <div className="mt-6">
+          <h4 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+            Tool Calls
+          </h4>
+          {toolCalls.map((toolCall) => (
+            <ToolCall key={toolCall.id} toolCall={toolCall} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ChatView