fix(frontend): harden tldraw v4 compatibility and clean docs

- split line shape props from arrow props for tldraw v4 schema validation
- align root tldraw dependency with frontend v4.5
- add technology badges to README
- remove emoji markers from README, docs, and MCP responses

Co-Authored-By: AdaL <adal@sylph.ai>

Author: chindris-mihai-alexandru

AGENTS.md

@@ -143,18 +143,18 @@ These changes landed in tldraw v4.x and are **already handled** in `frontend/src
 Arrow labels were the last shape type still using plain `text`. In v4.0 they joined geo/text/note:
 
 ```typescript
-// ✅ Correct — all shapes now use richText
+// Correct: all shapes use richText
 props: { richText: toRichText('my label') }
 
-// ❌ Wrong — was valid in v3, breaks in v4
+// Incorrect: valid in v3, breaks in v4
 props: { text: 'my label' }
 ```
 
 ### v4.0 — CSS variables renamed to `--tl-` prefix
 All tldraw CSS custom properties now start with `--tl-`. If you add custom CSS:
 ```css
-/* ✅ v4 */  --tl-color-background: white;
-/* ❌ v3 */  --color-background: white;
+/* Correct in v4 */    --tl-color-background: white;
+/* Incorrect in v3 */  --color-background: white;
 ```
 
 ### v4.2 — TipTap upgraded from v2 → v3
@@ -166,25 +166,25 @@ Our `toRichText()` helper generates plain ProseMirror doc JSON (no TipTap-specif
 ### v4.3 — Custom shape type declaration pattern changed (TypeScript only)
 Runtime behavior unchanged — TypeScript only. Use module augmentation instead of `TLBaseShape`:
 ```typescript
-// ✅ v4.3+
+// Correct: v4.3+
 declare module 'tldraw' {
   export interface TLGlobalShapePropsMap {
     'my-shape': { w: number; h: number }
   }
 }
 type MyShape = TLShape<'my-shape'>
 
-// ❌ v4.2 and below
+// Incorrect: v4.2 and below
 type MyShape = TLBaseShape<'my-shape', { w: number; h: number }>
 ```
 
 ### v4.4 — `options` prop consolidates `cameraOptions`/`textOptions`/`deepLinks`
 The standalone props are deprecated (still work). Prefer `options={{}}` going forward:
 ```tsx
-// ✅ v4.4+ preferred
+// Correct: v4.4+ preferred
 <Tldraw options={{ camera: { isLocked: true }, deepLinks: true }} />
 
-// 🔜 deprecated but still works
+// Deprecated but still works
 <Tldraw cameraOptions={{ isLocked: true }} deepLinks />
 ```
 
@@ -204,21 +204,21 @@ These were introduced in tldraw v3.10–v3.13 and are **already handled** in `fr
 tldraw validates `opacity` at the shape level alongside `x`, `y`, `isLocked`. Putting it inside `props` causes a `ValidationError: Unexpected property`.
 
 ```typescript
-// ✅ Correct
+// Correct
 editor.createShape({ id, type, x, y, opacity: 0.9, props: { color: 'blue', ... } })
 
-// ❌ Wrong — causes ValidationError
+// Incorrect: causes ValidationError
 editor.createShape({ id, type, x, y, props: { color: 'blue', opacity: 0.9, ... } })
 ```
 
 ### 2. `text` → `richText` on geo / text / note shapes (v3.10)
 The `text` string prop was removed from `geo`, `text`, and `note` shapes. Use `richText` with TipTap/ProseMirror JSON instead. **Arrow shapes still use plain `text` strings.**
 
 ```typescript
-// ✅ Correct — geo, text, note shapes
+// Correct — geo, text, note shapes
 props: { richText: toRichText('Hello\nWorld') }
 
-// ❌ Wrong — causes ValidationError: Unexpected property
+// Incorrect: causes ValidationError: Unexpected property
 props: { text: 'Hello' }
 ```
 
@@ -231,7 +231,7 @@ The `toRichText()` helper in `App.tsx` converts plain strings (including `\n`) t
 Arrow `props.start` and `props.end` are now plain `{ x: number, y: number }` vectors. Connections to other shapes are **separate binding records** created via `editor.createBinding()`.
 
 ```typescript
-// ✅ Correct — v3 way
+// Correct — v3 way
 editor.createShape({ ..., props: { start: { x: 0, y: 0 }, end: { x: 200, y: 0 }, ... } })
 editor.createBinding({
   type: 'arrow',
@@ -240,7 +240,7 @@ editor.createBinding({
   props: { terminal: 'start', normalizedAnchor: { x: 0.5, y: 0.5 }, isExact: false, isPrecise: false }
 })
 
-// ❌ Wrong — v2-style, causes ValidationError: Expected number, got undefined
+// Incorrect: v2-style, causes ValidationError: Expected number, got undefined
 props: { start: { type: 'binding', boundShapeId: '...', normalizedAnchor: ... } }
 ```
 

README.md

@@ -1,7 +1,14 @@
 # tldraw MCP Server
 
-> Programmatic canvas toolkit for AI agents — create, read, update, and delete tldraw shapes in real time via the Model Context Protocol.
-
+> Programmatic canvas toolkit for AI agents - create, read, update, and delete tldraw shapes in real time via the Model Context Protocol.
+
+[![Node.js](https://img.shields.io/badge/Node.js-18%2B-339933?logo=node.js&logoColor=white)](https://nodejs.org/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.6-3178C6?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
+[![React](https://img.shields.io/badge/React-19-61DAFB?logo=react&logoColor=black)](https://react.dev/)
+[![tldraw](https://img.shields.io/badge/tldraw-4.5-000000)](https://tldraw.dev/)
+[![MCP](https://img.shields.io/badge/Model_Context_Protocol-Server-5E5CE6)](https://modelcontextprotocol.io/)
+[![Express](https://img.shields.io/badge/Express-4.21-000000?logo=express&logoColor=white)](https://expressjs.com/)
+[![WebSocket](https://img.shields.io/badge/WebSocket-ws_8.18-010101)](https://github.com/websockets/ws)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
 ## What It Is
@@ -134,7 +141,7 @@ codex mcp add tldraw \
 
 ## MCP Tools
 
-### ✅ Implemented (17 tools)
+### Implemented (17 tools)
 
 | Tool | Description |
 |------|-------------|
@@ -156,7 +163,7 @@ codex mcp add tldraw \
 | `align_elements` | Align multiple elements using an atomic batch update |
 | `distribute_elements` | Distribute multiple elements evenly using an atomic batch update |
 
-### 🗺️ Roadmap
+### Roadmap
 
 | Category | Tools | Status |
 |----------|-------|--------|

frontend/src/App.tsx

@@ -118,21 +118,45 @@ function buildShapeProps(el: CanvasElement): Record<string, unknown> {
     }
   }
 
-  if (el.type === 'arrow' || el.type === 'line') {
+  if (el.type === 'arrow') {
     const pts = el.points
     const last = pts ? pts[pts.length - 1] : null
-    const props: Record<string, unknown> = {
+    return {
       ...base,
+      labelColor: color,
+      fill: el.fill ?? 'none',
       dash: el.dash ?? 'draw',
       size: el.size ?? 'm',
       arrowheadStart: el.startArrowhead ?? 'none',
-      arrowheadEnd: el.endArrowhead ?? (el.type === 'arrow' ? 'arrow' : 'none'),
-      richText: toRichText(el.text ?? ''),
+      arrowheadEnd: el.endArrowhead ?? 'arrow',
       font: el.font ?? 'draw',
+      kind: 'arc',
       start: { x: 0, y: 0 },
       end: last ? { x: last[0], y: last[1] } : { x: (el.endX ?? el.x + 200) - el.x, y: (el.endY ?? el.y) - el.y },
+      bend: 0,
+      richText: toRichText(el.text ?? ''),
+      labelPosition: 0.5,
+      scale: 1,
+      elbowMidPoint: 0.5,
+    }
+  }
+
+  if (el.type === 'line') {
+    const pts = el.points && el.points.length >= 2 ? el.points : [[0, 0], [(el.endX ?? el.x + 200) - el.x, (el.endY ?? el.y) - el.y]]
+    const points = Object.fromEntries(
+      pts.map(([x, y], i) => {
+        const id = i === 0 ? 'start' : i === pts.length - 1 ? 'end' : `point:${i}`
+        return [id, { id, index: `a${i + 1}`, x, y }]
+      })
+    )
+    return {
+      ...base,
+      dash: el.dash ?? 'draw',
+      size: el.size ?? 'm',
+      spline: 'line',
+      points,
+      scale: 1,
     }
-    return props
   }
 
   if (el.type === 'frame') {
@@ -212,8 +236,8 @@ function applyElement(editor: Editor, el: CanvasElement): void {
     })
   }
 
-  // tldraw v3: arrow bindings are separate records, not embedded in props
-  if (el.type === 'arrow' || el.type === 'line') {
+  // tldraw v3+: arrow bindings are separate records, not embedded in props
+  if (el.type === 'arrow') {
     // Remove any existing bindings for this arrow
     const existingBindings = editor.getBindingsFromShape(shapeId, 'arrow')
     for (const b of existingBindings) {