chore: bump coding-agent to 0.7.14 - fix Anthropic OAuth and Mistral API compatibility

packages/ai/src/agent/agent-loop.ts

@@ -164,6 +164,9 @@ async function streamAssistantResponse(
 				} else {
 					context.messages.push(finalMessage);
 				}
+				if (!addedPartial) {
+					stream.push({ type: "message_start", message: { ...finalMessage } });
+				}
 				stream.push({ type: "message_end", message: finalMessage });
 				return finalMessage;
 			}

packages/ai/src/providers/openai-completions.ts

@@ -273,13 +273,22 @@ function buildParams(model: Model<"openai-completions">, context: Context, optio
 		stream_options: { include_usage: true },
 	};
 
-	// Cerebras/xAI dont like the "store" field
+	// Cerebras/xAI/Mistral dont like the "store" field
-	if (!model.baseUrl.includes("cerebras.ai") && !model.baseUrl.includes("api.x.ai")) {
+	if (
+		!model.baseUrl.includes("cerebras.ai") &&
+		!model.baseUrl.includes("api.x.ai") &&
+		!model.baseUrl.includes("mistral.ai")
+	) {
 		params.store = false;
 	}
 
 	if (options?.maxTokens) {
-		params.max_completion_tokens = options?.maxTokens;
+		// Mistral uses max_tokens instead of max_completion_tokens
+		if (model.baseUrl.includes("mistral.ai")) {
+			(params as any).max_tokens = options?.maxTokens;
+		} else {
+			params.max_completion_tokens = options?.maxTokens;
+		}
 	}
 
 	if (options?.temperature !== undefined) {
@@ -308,9 +317,12 @@ function convertMessages(model: Model<"openai-completions">, context: Context):
 	const transformedMessages = transformMessages(context.messages, model);
 
 	if (context.systemPrompt) {
-		// Cerebras/xAi don't like the "developer" role
+		// Cerebras/xAi/Mistral don't like the "developer" role
 		const useDeveloperRole =
-			model.reasoning && !model.baseUrl.includes("cerebras.ai") && !model.baseUrl.includes("api.x.ai");
+			model.reasoning &&
+			!model.baseUrl.includes("cerebras.ai") &&
+			!model.baseUrl.includes("api.x.ai") &&
+			!model.baseUrl.includes("mistral.ai");
 		const role = useDeveloperRole ? "developer" : "system";
 		params.push({ role: role, content: sanitizeSurrogates(context.systemPrompt) });
 	}

packages/coding-agent/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 ## [Unreleased]
 
+## [0.7.14] - 2025-11-17
+
+### Fixed
+
+- **Anthropic OAuth Support**: Added support for `ANTHROPIC_OAUTH_TOKEN` environment variable. The agent now checks for OAuth tokens before falling back to API keys for Anthropic models, enabling OAuth-based authentication.
+- **Mistral API Compatibility**: Fixed compatibility with Mistral API by excluding the `store` field and using `max_tokens` instead of `max_completion_tokens`, and avoiding the `developer` role in system prompts.
+- **Error Display**: Fixed error message display in assistant messages to include proper spacing before the error text.
+- **Message Streaming**: Fixed missing `message_start` event when no partial message chunks were received during streaming.
+
 ## [0.7.13] - 2025-11-16
 
 ### Fixed

packages/coding-agent/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mariozechner/pi-coding-agent",
-	"version": "0.7.13",
+	"version": "0.7.14",
 	"description": "Coding agent CLI with read, bash, edit, write tools and session management",
 	"type": "module",
 	"bin": {

packages/coding-agent/src/model-config.ts

@@ -226,6 +226,14 @@ export function getApiKeyForModel(model: Model<Api>): string | undefined {
 		return resolveApiKey(customKeyConfig);
 	}
 
+	// For Anthropic, check ANTHROPIC_OAUTH_KEY first
+	if (model.provider === "anthropic") {
+		const oauthKey = process.env.ANTHROPIC_OAUTH_TOKEN;
+		if (oauthKey) {
+			return oauthKey;
+		}
+	}
+
 	// For built-in providers, use getApiKey from @mariozechner/pi-ai
 	return getApiKey(model.provider as KnownProvider);
 }

packages/coding-agent/src/tui/assistant-message.ts

@@ -56,7 +56,8 @@ export class AssistantMessageComponent extends Container {
 				this.contentContainer.addChild(new Text(chalk.red("\nAborted"), 1, 0));
 			} else if (message.stopReason === "error") {
 				const errorMsg = message.errorMessage || "Unknown error";
-				this.contentContainer.addChild(new Text(chalk.red(`Error: ${errorMsg}`)));
+				this.contentContainer.addChild(new Spacer(1));
+				this.contentContainer.addChild(new Text(chalk.red(`Error: ${errorMsg}`), 1, 0));
 			}
 		}
 	}

test.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Test Page</title>
+</head>
+<body>
+    <h1>Hello, World!</h1>
+</body>
+</html>

threejs-demo.html

@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Three.js Interactive Demo</title>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            font-family: Arial, sans-serif;
+        }
+        
+        canvas {
+            display: block;
+            cursor: grab;
+        }
+        
+        canvas:active {
+            cursor: grabbing;
+        }
+        
+        .info {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            color: white;
+            background: rgba(0,0,0,0.5);
+            padding: 15px;
+            border-radius: 8px;
+            font-size: 14px;
+            z-index: 100;
+        }
+    </style>
+</head>
+<body>
+    <div class="info">
+        <h3>Three.js Interactive Demo</h3>
+        <p>🖱️ Click & drag to rotate</p>
+        <p>🔄 Scroll to zoom in/out</p>
+        <p>✨ Multiple interactive objects</p>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r155/three.min.js"></script>
+    
+    <script>
+        // Scene setup
+        const scene = new THREE.Scene();
+        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        const renderer = new THREE.WebGLRenderer({ antialias: true });
+        
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.setClearColor(0x1a1a2e, 1);
+        document.body.appendChild(renderer.domElement);
+        
+        // Lighting
+        const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
+        scene.add(ambientLight);
+        
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+        directionalLight.position.set(10, 10, 5);
+        scene.add(directionalLight);
+        
+        // Create multiple interactive objects
+        const objects = [];
+        
+        // Cube
+        const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);
+        const cubeMaterial = new THREE.MeshPhongMaterial({ 
+            color: 0x00ff88,
+            shininess: 100
+        });
+        const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
+        cube.position.x = -4;
+        scene.add(cube);
+        objects.push(cube);
+        
+        // Sphere
+        const sphereGeometry = new THREE.SphereGeometry(1.5, 32, 32);
+        const sphereMaterial = new THREE.MeshPhongMaterial({ 
+            color: 0xff6b6b,
+            shininess: 100
+        });
+        const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
+        sphere.position.x = 0;
+        scene.add(sphere);
+        objects.push(sphere);
+        
+        // Torus
+        const torusGeometry = new THREE.TorusGeometry(1, 0.4, 16, 100);
+        const torusMaterial = new THREE.MeshPhongMaterial({ 
+            color: 0x4ecdc4,
+            shininess: 100
+        });
+        const torus = new THREE.Mesh(torusGeometry, torusMaterial);
+        torus.position.x = 4;
+        scene.add(torus);
+        objects.push(torus);
+        
+        // Particle system
+        const particlesGeometry = new THREE.BufferGeometry();
+        const particlesCount = 1000;
+        const posArray = new Float32Array(particlesCount * 3);
+        
+        for(let i = 0; i < particlesCount * 3; i++) {
+            posArray[i] = (Math.random() - 0.5) * 20;
+        }
+        
+        particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
+        
+        const particlesMaterial = new THREE.PointsMaterial({
+            size: 0.05,
+            color: 0xffffff,
+            transparent: true,
+            opacity: 0.8
+        });
+        
+        const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
+        scene.add(particlesMesh);
+        
+        // Camera position
+        camera.position.z = 8;
+        camera.position.y = 2;
+        
+        // Mouse interaction
+        let mouseX = 0, mouseY = 0;
+        let targetX = 0, targetY = 0;
+        
+        document.addEventListener('mousemove', (event) => {
+            mouseX = (event.clientX / window.innerWidth) * 2 - 1;
+            mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
+        });
+        
+        // Zoom
+        document.addEventListener('wheel', (event) => {
+            camera.position.z += event.deltaY * 0.01;
+            camera.position.z = Math.max(3, Math.min(15, camera.position.z));
+        });
+        
+        // Animation
+        function animate() {
+            requestAnimationFrame(animate);
+            
+            // Smooth mouse follow
+            targetX = mouseX * 0.5;
+            targetY = mouseY * 0.3;
+            
+            // Rotate objects
+            cube.rotation.x += 0.01;
+            cube.rotation.y += 0.01;
+            
+            sphere.rotation.x += 0.005;
+            sphere.rotation.z += 0.01;
+            
+            torus.rotation.x += 0.02;
+            torus.rotation.y += 0.015;
+            
+            // Particle rotation
+            particlesMesh.rotation.y += 0.002;
+            particlesMesh.rotation.x += 0.001;
+            
+            // Mouse interaction effect
+            camera.position.x += (targetX - camera.position.x * 0.1) * 0.05;
+            camera.position.y += (targetY - camera.position.y * 0.1) * 0.05;
+            
+            camera.lookAt(scene.position);
+            
+            renderer.render(scene, camera);
+        }
+        
+        // Resize handling
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+        
+        // Start animation
+        animate();
+        
+        // Add some visual effects
+        let time = 0;
+        function updateEffects() {
+            time += 0.01;
+            
+            // Pulse the cube
+            cube.scale.setScalar(1 + Math.sin(time) * 0.1);
+            
+            // Color shift the sphere
+            const hue = (time * 50) % 360;
+            sphere.material.color.setHSL(hue / 360, 0.7, 0.5);
+            
+            requestAnimationFrame(updateEffects);
+        }
+        updateEffects();
+    </script>
+</body>
+</html>

threejs-scene.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Three.js 3D Scene</title>
+    <style>
+        body { margin: 0; }
+        canvas { display: block; }
+    </style>
+</head>
+<body>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
+    <script>
+        // Create the scene
+        const scene = new THREE.Scene();
+        
+        // Create a camera
+        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        camera.position.z = 5;
+        
+        // Create a renderer
+        const renderer = new THREE.WebGLRenderer();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        document.body.appendChild(renderer.domElement);
+        
+        // Add a cube to the scene
+        const geometry = new THREE.BoxGeometry();
+        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
+        const cube = new THREE.Mesh(geometry, material);
+        scene.add(cube);
+        
+        // Animation loop
+        function animate() {
+            requestAnimationFrame(animate);
+            
+            // Rotate the cube
+            cube.rotation.x += 0.01;
+            cube.rotation.y += 0.01;
+            
+            renderer.render(scene, camera);
+        }
+        
+        // Handle window resize
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+        
+        // Start the animation
+        animate();
+    </script>
+</body>
+</html>