diff --git a/src/__tests__/SessionInit.test.tsx b/src/__tests__/SessionInit.test.tsx
index 85f625d..3bb3195 100644
--- a/src/__tests__/SessionInit.test.tsx
+++ b/src/__tests__/SessionInit.test.tsx
@@ -53,8 +53,8 @@ describe('useSessionInit', () => {
     unmount();
   });
 
-  it('restores saved name and skips modal', () => {
-    // Pre-save a session-specific name (only session-specific names auto-restore)
+  it('always shows name modal even when saved name exists', () => {
+    // Pre-save a session-specific name
     const sessionId = 'preexisting1';
     localStorage.setItem(`duocode_session_name_${sessionId}`, 'SavedUser');
 
@@ -63,9 +63,9 @@ describe('useSessionInit', () => {
 
     const { unmount } = renderHook(() => useSessionInit());
 
-    const session = useSessionStore.getState();
-    expect(session.peerName).toBe('SavedUser');
-    expect(useUIStore.getState().isNameModalOpen).toBe(false);
+    // Each tab should prompt for name (modal pre-fills from localStorage)
+    expect(useSessionStore.getState().peerName).toBeNull();
+    expect(useUIStore.getState().isNameModalOpen).toBe(true);
 
     unmount();
   });
diff --git a/src/__tests__/integration.test.tsx b/src/__tests__/integration.test.tsx
index 1e125d5..c17be9e 100644
--- a/src/__tests__/integration.test.tsx
+++ b/src/__tests__/integration.test.tsx
@@ -48,21 +48,20 @@ describe('Integration: App loads and creates session', () => {
     });
   });
 
-  it('restores saved name and skips modal', async () => {
+  it('always shows name modal even with saved name (each tab is unique)', async () => {
     const sessionId = 'test123session';
-    // Only a session-specific key causes auto-restore (skips modal).
-    // The global key is used for pre-fill only.
     localStorage.setItem(`duocode_session_name_${sessionId}`, 'TestUser');
     window.location.search = `?session=${sessionId}`;
     window.location.href = `http://localhost:3000?session=${sessionId}`;
 
     const { container } = render(<App />);
 
+    // Modal should always show so each tab acts as a unique participant
     await waitFor(() => {
-      expect(useSessionStore.getState().peerName).toBe('TestUser');
+      expect(container.querySelector('[data-testid="name-entry-modal"]')).toBeInTheDocument();
     });
 
-    expect(container.querySelector('[data-testid="name-entry-modal"]')).not.toBeInTheDocument();
+    expect(useSessionStore.getState().peerName).toBeNull();
   });
 
   it('dismisses name modal on submit and stores the name', async () => {
diff --git a/src/components/DiagramCanvas/DiagramCanvas.tsx b/src/components/DiagramCanvas/DiagramCanvas.tsx
index cc36c62..212c8fa 100644
--- a/src/components/DiagramCanvas/DiagramCanvas.tsx
+++ b/src/components/DiagramCanvas/DiagramCanvas.tsx
@@ -11,7 +11,6 @@ import {
   applyCanvasTransform,
   reconcileCoordinates,
   filterStrokesAfterErase,
-  getShapeCenter,
   findTextAtPosition,
   findStrokeAtPosition,
   getStrokeBounds,
@@ -31,6 +30,8 @@ interface TextOverlayState {
   shapeIndex: number | null;
   editIndex: number | null;
   initialText: string;
+  shapeWidth?: number;
+  shapeHeight?: number;
 }
 
 interface MouseLikeEvent {
@@ -60,6 +61,10 @@ export default function DiagramCanvas() {
   const dragStartRef = useRef<Point>({ x: 0, y: 0 });
   const isDraggingRef = useRef(false);
 
+  // Eraser trail refs
+  const eraserTrailRef = useRef<Point[]>([]);
+  const eraserRadiusRef = useRef(0);
+
   // Text overlay state
   const textOverlayRef = useRef<TextOverlayState>({ visible: false, x: 0, y: 0, shapeIndex: null, editIndex: null, initialText: '' });
 
@@ -131,8 +136,8 @@ export default function DiagramCanvas() {
   // ── Rendering ──────────────────────────────────────────────────────
 
   const renderStrokes = useCallback(
-    (ctx: CanvasRenderingContext2D, strokes: Stroke[]) => {
-      strokes.forEach((stroke) => {
+    (ctx: CanvasRenderingContext2D, strokes: Stroke[], editingShapeIndex?: number | null) => {
+      strokes.forEach((stroke, idx) => {
         if (stroke.tool === 'text' && stroke.text && stroke.position) {
           const fontSize = stroke.fontSize || DEFAULT_FONT_SIZE;
           ctx.font = `${fontSize}px sans-serif`;
@@ -164,12 +169,20 @@ export default function DiagramCanvas() {
             const w = stroke.end.x - stroke.start.x;
             const h = stroke.end.y - stroke.start.y;
             ctx.strokeRect(stroke.start.x, stroke.start.y, w, h);
-            if (stroke.text) {
-              ctx.font = `${DEFAULT_FONT_SIZE}px sans-serif`;
+            if (stroke.text && idx !== editingShapeIndex) {
+              const fontSize = DEFAULT_FONT_SIZE;
+              ctx.font = `${fontSize}px sans-serif`;
               ctx.fillStyle = stroke.textColor || stroke.color || '#000';
               ctx.textAlign = 'center';
               ctx.textBaseline = 'middle';
-              ctx.fillText(stroke.text, stroke.start.x + w / 2, stroke.start.y + h / 2);
+              const lines = stroke.text.split('\n');
+              const lineHeight = fontSize * 1.3;
+              const totalHeight = lines.length * lineHeight;
+              const centerX = stroke.start.x + w / 2;
+              const startY = stroke.start.y + h / 2 - totalHeight / 2 + lineHeight / 2;
+              lines.forEach((line, li) => {
+                ctx.fillText(line, centerX, startY + li * lineHeight);
+              });
               ctx.textAlign = 'left';
             }
           } else if (stroke.tool === 'circle' && stroke.start && stroke.end) {
@@ -178,12 +191,20 @@ export default function DiagramCanvas() {
             );
             ctx.arc(stroke.start.x, stroke.start.y, radius, 0, 2 * Math.PI);
             ctx.stroke();
-            if (stroke.text) {
-              ctx.font = `${DEFAULT_FONT_SIZE}px sans-serif`;
+            if (stroke.text && idx !== editingShapeIndex) {
+              const fontSize = DEFAULT_FONT_SIZE;
+              ctx.font = `${fontSize}px sans-serif`;
               ctx.fillStyle = stroke.textColor || stroke.color || '#000';
               ctx.textAlign = 'center';
               ctx.textBaseline = 'middle';
-              ctx.fillText(stroke.text, stroke.start.x, stroke.start.y);
+              const lines = stroke.text.split('\n');
+              const lineHeight = fontSize * 1.3;
+              const totalHeight = lines.length * lineHeight;
+              const cx = stroke.start.x;
+              const startY = stroke.start.y - totalHeight / 2 + lineHeight / 2;
+              lines.forEach((line, li) => {
+                ctx.fillText(line, cx, startY + li * lineHeight);
+              });
               ctx.textAlign = 'left';
             }
           }
@@ -230,6 +251,32 @@ export default function DiagramCanvas() {
     bufferCtx?.drawImage(canvas, 0, 0);
   }, []);
 
+  const drawEraserTrail = useCallback((ctx: CanvasRenderingContext2D) => {
+    const trail = eraserTrailRef.current;
+    if (trail.length < 2) return;
+    const r = eraserRadiusRef.current;
+
+    ctx.save();
+    // Draw fading trail circles along the path
+    const len = trail.length;
+    for (let i = 0; i < len; i++) {
+      const t = i / len; // 0 at oldest, ~1 at newest
+      const alpha = t * 0.25; // fade from transparent to 0.25
+      ctx.beginPath();
+      ctx.arc(trail[i].x, trail[i].y, r, 0, Math.PI * 2);
+      ctx.fillStyle = `rgba(150, 150, 150, ${alpha})`;
+      ctx.fill();
+    }
+    // Draw a solid circle at the current position
+    const last = trail[len - 1];
+    ctx.beginPath();
+    ctx.arc(last.x, last.y, r, 0, Math.PI * 2);
+    ctx.strokeStyle = 'rgba(120, 120, 120, 0.5)';
+    ctx.lineWidth = 1.5;
+    ctx.stroke();
+    ctx.restore();
+  }, []);
+
   const redrawViewport = useCallback(() => {
     const canvas = canvasRef.current;
     const ctx = ctxRef.current;
@@ -253,9 +300,14 @@ export default function DiagramCanvas() {
       ctx.drawImage(buffer, 0, 0);
     }
 
+    // Draw eraser trail on top if actively erasing
+    if (eraserTrailRef.current.length > 0) {
+      drawEraserTrail(ctx);
+    }
+
     // Draw selection highlight on top (not baked into buffer)
     renderSelection(ctx, strokes);
-  }, [getState, getCanvasBackground, renderSelection]);
+  }, [getState, getCanvasBackground, renderSelection, drawEraserTrail]);
 
   const redrawAll = useCallback(() => {
     const canvas = canvasRef.current;
@@ -271,7 +323,7 @@ export default function DiagramCanvas() {
     ctx.fillStyle = getCanvasBackground();
     ctx.fillRect(0, 0, canvas.width, canvas.height);
 
-    renderStrokes(ctx, strokes);
+    renderStrokes(ctx, strokes, textOverlayRef.current.visible ? textOverlayRef.current.shapeIndex : null);
     saveToBuffer();
     redrawViewport();
   }, [getState, getCanvasBackground, renderStrokes, saveToBuffer, redrawViewport]);
@@ -302,6 +354,7 @@ export default function DiagramCanvas() {
     (text: string) => {
       if (!text.trim()) {
         textOverlayRef.current = { visible: false, x: 0, y: 0, shapeIndex: null, editIndex: null, initialText: '' };
+        selectedIndexRef.current = null;
         forceOverlayUpdate();
         return;
       }
@@ -326,6 +379,7 @@ export default function DiagramCanvas() {
         getState().addStroke(stroke);
       }
       textOverlayRef.current = { visible: false, x: 0, y: 0, shapeIndex: null, editIndex: null, initialText: '' };
+      selectedIndexRef.current = null;
       forceOverlayUpdate();
     },
     [getState, forceOverlayUpdate],
@@ -333,6 +387,7 @@ export default function DiagramCanvas() {
 
   const handleTextDismiss = useCallback(() => {
     textOverlayRef.current = { visible: false, x: 0, y: 0, shapeIndex: null, editIndex: null, initialText: '' };
+    selectedIndexRef.current = null;
     forceOverlayUpdate();
   }, [forceOverlayUpdate]);
 
@@ -405,15 +460,9 @@ export default function DiagramCanvas() {
       }
 
       if (tool === 'eraser') {
-        // Apply transform before drawing the eraser path
-        const { zoom: z, panOffset: pan } = getState();
-        applyCanvasTransform(ctx, z, pan.x, pan.y);
-        ctx.beginPath();
-        ctx.moveTo(pos.x, pos.y);
-        ctx.strokeStyle = getCanvasBackground();
-        ctx.lineWidth = width * 3;
-        ctx.lineCap = 'round';
-        ctx.lineJoin = 'round';
+        const eraseRadius = width * 3;
+        eraserTrailRef.current = [{ x: pos.x, y: pos.y }];
+        eraserRadiusRef.current = eraseRadius;
         return;
       }
 
@@ -483,20 +532,28 @@ export default function DiagramCanvas() {
 
       if (tool === 'eraser') {
         const eraseRadius = width * 3;
-        ctx.lineTo(pos.x, pos.y);
-        ctx.strokeStyle = getCanvasBackground();
-        ctx.lineWidth = eraseRadius * 2;
-        ctx.lineCap = 'round';
-        ctx.lineJoin = 'round';
-        ctx.stroke();
-        ctx.beginPath();
-        ctx.moveTo(pos.x, pos.y);
+        eraserTrailRef.current.push({ x: pos.x, y: pos.y });
+        // Keep trail length bounded for performance
+        if (eraserTrailRef.current.length > 60) {
+          eraserTrailRef.current = eraserTrailRef.current.slice(-40);
+        }
 
         const { drawingStrokes: strokes } = getState();
         const remaining = filterStrokesAfterErase(strokes, pos.x, pos.y, eraseRadius);
         if (remaining.length !== strokes.length) {
           getState().setStrokes(remaining);
+          // Rebuild buffer without erased strokes so viewport shows them removed
+          const canvas = canvasRef.current;
+          if (canvas) {
+            ctx.setTransform(1, 0, 0, 1, 0, 0);
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.fillStyle = getCanvasBackground();
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            renderStrokes(ctx, remaining, null);
+            saveToBuffer();
+          }
         }
+        redrawViewport();
         return;
       }
 
@@ -538,7 +595,7 @@ export default function DiagramCanvas() {
         }
       }
     },
-    [getState, getMousePos, getBufferPos, getCanvasBackground, redrawAll, redrawViewport],
+    [getState, getMousePos, getBufferPos, getCanvasBackground, redrawAll, redrawViewport, renderStrokes, saveToBuffer],
   );
 
   const handleMouseUp = useCallback(() => {
@@ -569,7 +626,9 @@ export default function DiagramCanvas() {
 
     if (tool === 'eraser') {
       isDrawingRef.current = false;
-      saveToBuffer();
+      eraserTrailRef.current = [];
+      // Redraw cleanly from remaining strokes so eraser trail disappears
+      redrawAll();
       return;
     }
 
@@ -578,13 +637,24 @@ export default function DiagramCanvas() {
     }
 
     if (currentStrokeRef.current) {
+      // Don't save degenerate shape strokes (click without drag / double-click artifacts)
+      const s = currentStrokeRef.current;
+      if (s.start && s.end) {
+        const dx = Math.abs(s.end.x - s.start.x);
+        const dy = Math.abs(s.end.y - s.start.y);
+        if (dx < 3 && dy < 3) {
+          currentStrokeRef.current = null;
+          isDrawingRef.current = false;
+          return;
+        }
+      }
       getState().addStroke(currentStrokeRef.current);
       currentStrokeRef.current = null;
     }
 
     isDrawingRef.current = false;
     saveToBuffer();
-  }, [getState, saveToBuffer]);
+  }, [getState, saveToBuffer, redrawAll]);
 
   // ── Wheel zoom ─────────────────────────────────────────────────────
 
@@ -697,7 +767,7 @@ export default function DiagramCanvas() {
   const OVERLAY_OFFSET_LEFT = 10; // padding-left(8) + border(2)
   const OVERLAY_OFFSET_TOP = 6;   // padding-top(4) + border(2)
 
-  const getOverlayScreenPos = useCallback(() => {
+  const getOverlayScreenPos = useCallback((): { left: number; top: number; width?: number; height?: number } => {
     const canvas = canvasRef.current;
     if (!canvas) return { left: 0, top: 0 };
     const rect = canvas.getBoundingClientRect();
@@ -709,6 +779,17 @@ export default function DiagramCanvas() {
     const cssScaleX = rect.width / canvas.width;
     const cssScaleY = rect.height / canvas.height;
 
+    const isShapeEditing = textOverlayRef.current.shapeIndex !== null;
+
+    if (isShapeEditing && textOverlayRef.current.shapeWidth != null && textOverlayRef.current.shapeHeight != null) {
+      return {
+        left: bufferX * cssScaleX,
+        top: bufferY * cssScaleY,
+        width: textOverlayRef.current.shapeWidth * z * cssScaleX,
+        height: textOverlayRef.current.shapeHeight * z * cssScaleY,
+      };
+    }
+
     return {
       left: bufferX * cssScaleX - OVERLAY_OFFSET_LEFT,
       top: bufferY * cssScaleY - OVERLAY_OFFSET_TOP,
@@ -765,14 +846,26 @@ export default function DiagramCanvas() {
       }
       if (shapeIndex !== null) {
         const shape = strokes[shapeIndex];
-        const center = getShapeCenter(shape);
-        textOverlayRef.current = { visible: true, x: center.x, y: center.y, shapeIndex, editIndex: null, initialText: shape.text || '' };
+        const bounds = getStrokeBounds(shape);
+        textOverlayRef.current = {
+          visible: true,
+          x: bounds.minX,
+          y: bounds.minY,
+          shapeIndex,
+          editIndex: null,
+          initialText: shape.text || '',
+          shapeWidth: bounds.maxX - bounds.minX,
+          shapeHeight: bounds.maxY - bounds.minY,
+        };
+        // Show selection highlight on the shape being edited
+        selectedIndexRef.current = shapeIndex;
+        redrawAll();
       } else {
         textOverlayRef.current = { visible: true, x: pos.x, y: pos.y, shapeIndex: null, editIndex: null, initialText: '' };
       }
       forceOverlayUpdate();
     },
-    [getMousePos, getState, forceOverlayUpdate],
+    [getMousePos, getState, forceOverlayUpdate, redrawAll],
   );
 
   return (
@@ -799,6 +892,7 @@ export default function DiagramCanvas() {
             onCommit={handleTextCommit}
             onDismiss={handleTextDismiss}
             initialText={textOverlayRef.current.initialText}
+            shapeEditing={textOverlayRef.current.shapeIndex !== null}
           />
         )}
         <DrawerLabels canvasRef={canvasRef} />
diff --git a/src/components/DiagramCanvas/TextInputOverlay.tsx b/src/components/DiagramCanvas/TextInputOverlay.tsx
index f39e82d..1e99fb8 100644
--- a/src/components/DiagramCanvas/TextInputOverlay.tsx
+++ b/src/components/DiagramCanvas/TextInputOverlay.tsx
@@ -1,13 +1,14 @@
 import { useRef, useEffect, useCallback } from 'react';
 
 interface TextInputOverlayProps {
-  position: { left: number; top: number };
+  position: { left: number; top: number; width?: number; height?: number };
   onCommit: (text: string) => void;
   onDismiss: () => void;
   initialText?: string;
+  shapeEditing?: boolean;
 }
 
-export default function TextInputOverlay({ position, onCommit, onDismiss, initialText }: TextInputOverlayProps) {
+export default function TextInputOverlay({ position, onCommit, onDismiss, initialText, shapeEditing }: TextInputOverlayProps) {
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const mountedAtRef = useRef(Date.now());
   const committedRef = useRef(false);
@@ -20,6 +21,9 @@ export default function TextInputOverlay({ position, onCommit, onDismiss, initia
       el.value = initialText;
       // Place cursor at end
       el.selectionStart = el.selectionEnd = initialText.length;
+      // Auto-resize to fit all lines of initial text
+      el.style.height = 'auto';
+      el.style.height = `${el.scrollHeight}px`;
     }
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -55,20 +59,25 @@ export default function TextInputOverlay({ position, onCommit, onDismiss, initia
   }, [onCommit, onDismiss]);
 
   const handleInput = useCallback(() => {
-    // Auto-resize textarea height to fit content
     const el = inputRef.current;
     if (!el) return;
     el.style.height = 'auto';
     el.style.height = `${el.scrollHeight}px`;
   }, []);
 
+  const overlayStyle: React.CSSProperties = {
+    left: `${position.left}px`,
+    top: `${position.top}px`,
+  };
+  if (shapeEditing && position.width != null && position.height != null) {
+    overlayStyle.width = `${position.width}px`;
+    overlayStyle.height = `${position.height}px`;
+  }
+
   return (
     <div
-      className="text-input-overlay"
-      style={{
-        left: `${position.left}px`,
-        top: `${position.top}px`,
-      }}
+      className={`text-input-overlay${shapeEditing ? ' shape-editing' : ''}`}
+      style={overlayStyle}
     >
       <textarea
         ref={inputRef}
diff --git a/src/hooks/useSessionInit.ts b/src/hooks/useSessionInit.ts
index 62ca3e3..da48685 100644
--- a/src/hooks/useSessionInit.ts
+++ b/src/hooks/useSessionInit.ts
@@ -57,20 +57,14 @@ export function useSessionInit(): void {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // ── Step 2: once session exists, restore or prompt for name ──────
+  // ── Step 2: once session exists, always prompt for name ──────────
   useEffect(() => {
     if (!sessionId || peerName) return;
 
-    // Only auto-restore if the user already confirmed their name
-    // for THIS specific session (i.e. they've been here before).
-    const sessionSpecificName = localStorage.getItem(getSessionNameKey(sessionId));
-    if (sessionSpecificName) {
-      setPeerName(sessionSpecificName);
-    } else {
-      // New session — always show the name modal so the user can
-      // confirm / enter their name (pre-fill happens in the modal).
-      showNameModal();
-    }
+    // Always show the name modal on a fresh tab so each tab acts as
+    // a unique participant.  The modal pre-fills from localStorage so
+    // returning users can just click Join.
+    showNameModal();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sessionId]);
 
diff --git a/src/services/canvas-logic.ts b/src/services/canvas-logic.ts
index 524ba8f..082c07d 100644
--- a/src/services/canvas-logic.ts
+++ b/src/services/canvas-logic.ts
@@ -161,10 +161,19 @@ export function filterStrokesAfterErase(
 ): Stroke[] {
   return strokes.filter(stroke => {
     if (stroke.tool === 'pen' && stroke.points) {
-      return !stroke.points.some(point => {
-        const dist = Math.sqrt((point.x - x) ** 2 + (point.y - y) ** 2);
-        return dist < eraseRadius;
-      });
+      const pts = stroke.points;
+      // Check each segment between consecutive points
+      for (let i = 0; i < pts.length - 1; i++) {
+        if (pointToSegmentDist(x, y, pts[i].x, pts[i].y, pts[i + 1].x, pts[i + 1].y) < eraseRadius) {
+          return false;
+        }
+      }
+      // Also check the first point (single-point strokes)
+      if (pts.length === 1) {
+        const dist = Math.sqrt((pts[0].x - x) ** 2 + (pts[0].y - y) ** 2);
+        return dist >= eraseRadius;
+      }
+      return true;
     }
 
     if (stroke.tool === 'text' && stroke.position) {
diff --git a/src/styles.css b/src/styles.css
index d05ed56..27c0ae5 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1221,6 +1221,29 @@ button:disabled {
     box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3);
 }
 
+.text-input-overlay.shape-editing {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: visible;
+}
+
+.text-input-overlay.shape-editing textarea {
+    border: none;
+    background: transparent;
+    text-align: center;
+    width: 300%;
+    min-width: 300%;
+    max-width: none;
+    resize: none;
+    overflow: hidden;
+    padding: 0;
+}
+
+.text-input-overlay.shape-editing textarea:focus {
+    box-shadow: none;
+}
+
 /* Messages FAB Button — hidden on desktop where the sidebar panel is always visible */
 .messages-fab {
     position: fixed;
@@ -1412,6 +1435,7 @@ button:disabled {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: 8px;
     margin-bottom: 6px;
     font-size: 12px;
 }
diff --git a/tests/unit/canvasEraser.test.ts b/tests/unit/canvasEraser.test.ts
index db4af69..d7c7953 100644
--- a/tests/unit/canvasEraser.test.ts
+++ b/tests/unit/canvasEraser.test.ts
@@ -200,10 +200,43 @@ describe('Eraser hit-testing', () => {
       expect(result).toHaveLength(0);
     });
 
+    it('should erase when near a line segment between points', () => {
+      // Point (75, 75) is on the segment from (50,50) to (100,100), distance ~0
+      const result = filterStrokesAfterErase([pen], 75, 75, ERASE_RADIUS);
+      expect(result).toHaveLength(0);
+    });
+
+    it('should erase when close to segment but not to any point', () => {
+      // Pen with widely spaced points
+      const widePen: Stroke = {
+        tool: 'pen',
+        points: [{ x: 0, y: 0 }, { x: 200, y: 0 }],
+        color: '#fff',
+        brushSize: 2,
+      };
+      // Point (100, 5) is 5px from the segment, within ERASE_RADIUS=10
+      // but 100px from each endpoint
+      const result = filterStrokesAfterErase([widePen], 100, 5, ERASE_RADIUS);
+      expect(result).toHaveLength(0);
+    });
+
     it('should NOT erase when far from pen points', () => {
       const result = filterStrokesAfterErase([pen], 300, 300, ERASE_RADIUS);
       expect(result).toHaveLength(1);
     });
+
+    it('should handle single-point pen stroke', () => {
+      const singlePoint: Stroke = {
+        tool: 'pen',
+        points: [{ x: 50, y: 50 }],
+        color: '#fff',
+        brushSize: 2,
+      };
+      const hit = filterStrokesAfterErase([singlePoint], 52, 52, ERASE_RADIUS);
+      expect(hit).toHaveLength(0);
+      const miss = filterStrokesAfterErase([singlePoint], 300, 300, ERASE_RADIUS);
+      expect(miss).toHaveLength(1);
+    });
   });
 
   describe('Multiple strokes', () => {
diff --git a/tests/unit/sessionPerTab.test.ts b/tests/unit/sessionPerTab.test.ts
new file mode 100644
index 0000000..a636999
--- /dev/null
+++ b/tests/unit/sessionPerTab.test.ts
@@ -0,0 +1,75 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { getLeadingWhitespace } from '../../src/services/code-editor-logic';
+import { filterStrokesAfterErase } from '../../src/services/canvas-logic';
+import type { Stroke } from '../../src/services/canvas-logic';
+
+/**
+ * Tests for recently introduced fixes:
+ * 1. Pen eraser now checks line segments between points
+ * 2. getLeadingWhitespace for auto-indent edge cases
+ */
+
+describe('Pen eraser segment-based hit testing', () => {
+  const curvedPen: Stroke = {
+    tool: 'pen',
+    points: [
+      { x: 0, y: 0 },
+      { x: 50, y: 100 },
+      { x: 100, y: 50 },
+      { x: 200, y: 200 },
+    ],
+    color: '#fff',
+    brushSize: 2,
+  };
+
+  it('should erase when eraser passes between two points on a segment', () => {
+    // Point (25, 50) is on the segment from (0,0) to (50,100)
+    const result = filterStrokesAfterErase([curvedPen], 25, 50, 10);
+    expect(result).toHaveLength(0);
+  });
+
+  it('should erase when near middle of a long segment', () => {
+    // Point (150, 125) is near the segment from (100,50) to (200,200)
+    const result = filterStrokesAfterErase([curvedPen], 150, 125, 10);
+    expect(result).toHaveLength(0);
+  });
+
+  it('should NOT erase when far from all segments', () => {
+    const result = filterStrokesAfterErase([curvedPen], 500, 500, 10);
+    expect(result).toHaveLength(1);
+  });
+
+  it('should erase entire stroke when any segment is hit', () => {
+    // Hit just the first segment — entire stroke should be removed
+    const result = filterStrokesAfterErase([curvedPen], 10, 20, 10);
+    expect(result).toHaveLength(0);
+  });
+
+  it('should handle pen stroke with only 2 points', () => {
+    const twoPointPen: Stroke = {
+      tool: 'pen',
+      points: [{ x: 0, y: 0 }, { x: 100, y: 100 }],
+      color: '#fff',
+      brushSize: 2,
+    };
+    // Near the midpoint of the segment
+    const result = filterStrokesAfterErase([twoPointPen], 50, 50, 10);
+    expect(result).toHaveLength(0);
+  });
+});
+
+describe('Auto-indent edge cases', () => {
+  it('should handle cursor at position 0', () => {
+    expect(getLeadingWhitespace('    hello', 0)).toBe('    ');
+  });
+
+  it('should handle newline right before cursor', () => {
+    const text = 'line1\n    line2';
+    // Cursor right after the newline
+    expect(getLeadingWhitespace(text, 6)).toBe('    ');
+  });
+
+  it('should return empty for line with no leading whitespace', () => {
+    expect(getLeadingWhitespace('hello', 3)).toBe('');
+  });
+});
diff --git a/tests/unit/shapeTextEditing.test.tsx b/tests/unit/shapeTextEditing.test.tsx
new file mode 100644
index 0000000..97f1e2f
--- /dev/null
+++ b/tests/unit/shapeTextEditing.test.tsx
@@ -0,0 +1,216 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import TextInputOverlay from '../../src/components/DiagramCanvas/TextInputOverlay';
+
+/**
+ * Tests for shape text editing overlay.
+ *
+ * Covers:
+ * - CSS class toggling for shape-editing mode
+ * - Multi-line text entry (textarea auto-resize for all modes)
+ * - Overlay width/height applied when editing shapes
+ * - Commit/dismiss keyboard shortcuts with multi-line content
+ */
+
+describe('TextInputOverlay shapeEditing prop', () => {
+  const defaultProps = {
+    position: { left: 100, top: 100 },
+    onCommit: () => {},
+    onDismiss: () => {},
+  };
+
+  it('should NOT have shape-editing class by default', () => {
+    const { container } = render(<TextInputOverlay {...defaultProps} />);
+    const overlay = container.querySelector('.text-input-overlay');
+    expect(overlay?.classList.contains('shape-editing')).toBe(false);
+  });
+
+  it('should have shape-editing class when shapeEditing is true', () => {
+    const { container } = render(<TextInputOverlay {...defaultProps} shapeEditing />);
+    const overlay = container.querySelector('.text-input-overlay');
+    expect(overlay?.classList.contains('shape-editing')).toBe(true);
+  });
+
+  it('should NOT have shape-editing class when shapeEditing is false', () => {
+    const { container } = render(<TextInputOverlay {...defaultProps} shapeEditing={false} />);
+    const overlay = container.querySelector('.text-input-overlay');
+    expect(overlay?.classList.contains('shape-editing')).toBe(false);
+  });
+
+  it('should render textarea with placeholder', () => {
+    render(<TextInputOverlay {...defaultProps} shapeEditing />);
+    const textarea = screen.getByPlaceholderText('Enter text...');
+    expect(textarea).toBeInTheDocument();
+  });
+
+  it('should pre-fill text when initialText and shapeEditing are set', () => {
+    render(<TextInputOverlay {...defaultProps} shapeEditing initialText="API Server" />);
+    const textarea = screen.getByPlaceholderText('Enter text...') as HTMLTextAreaElement;
+    expect(textarea.value).toBe('API Server');
+  });
+});
+
+describe('TextInputOverlay multi-line editing', () => {
+  const defaultProps = {
+    position: { left: 100, top: 100 },
+    onCommit: vi.fn(),
+    onDismiss: vi.fn(),
+  };
+
+  it('should auto-resize textarea height on input in shape-editing mode', () => {
+    const { container } = render(
+      <TextInputOverlay {...defaultProps} shapeEditing position={{ left: 0, top: 0, width: 200, height: 100 }} />,
+    );
+    const textarea = container.querySelector('textarea') as HTMLTextAreaElement;
+
+    // Simulate typing multi-line text
+    textarea.value = 'Line 1\nLine 2\nLine 3';
+
+    // Mock scrollHeight to simulate content growing
+    Object.defineProperty(textarea, 'scrollHeight', { value: 72, configurable: true });
+
+    fireEvent.input(textarea);
+
+    // handleInput should set height to scrollHeight — NOT be skipped for shape editing
+    expect(textarea.style.height).toBe('72px');
+  });
+
+  it('should auto-resize textarea height on input in non-shape mode', () => {
+    const { container } = render(<TextInputOverlay {...defaultProps} />);
+    const textarea = container.querySelector('textarea') as HTMLTextAreaElement;
+
+    textarea.value = 'Line 1\nLine 2';
+    Object.defineProperty(textarea, 'scrollHeight', { value: 48, configurable: true });
+
+    fireEvent.input(textarea);
+
+    expect(textarea.style.height).toBe('48px');
+  });
+
+  it('plain Enter should NOT commit (allows newline in textarea)', () => {
+    const onCommit = vi.fn();
+    render(<TextInputOverlay {...defaultProps} onCommit={onCommit} shapeEditing />);
+    const textarea = screen.getByPlaceholderText('Enter text...');
+
+    fireEvent.keyDown(textarea, { key: 'Enter' });
+
+    expect(onCommit).not.toHaveBeenCalled();
+  });
+
+  it('Ctrl+Enter should commit multi-line text', () => {
+    const onCommit = vi.fn();
+    const { container } = render(
+      <TextInputOverlay {...defaultProps} onCommit={onCommit} shapeEditing />,
+    );
+    const textarea = container.querySelector('textarea') as HTMLTextAreaElement;
+
+    // Type multi-line content
+    textarea.value = 'Line 1\nLine 2\nLine 3';
+
+    fireEvent.keyDown(textarea, { key: 'Enter', ctrlKey: true });
+
+    expect(onCommit).toHaveBeenCalledWith('Line 1\nLine 2\nLine 3');
+  });
+
+  it('Cmd+Enter should commit multi-line text', () => {
+    const onCommit = vi.fn();
+    const { container } = render(
+      <TextInputOverlay {...defaultProps} onCommit={onCommit} shapeEditing />,
+    );
+    const textarea = container.querySelector('textarea') as HTMLTextAreaElement;
+
+    textarea.value = 'First\nSecond';
+
+    fireEvent.keyDown(textarea, { key: 'Enter', metaKey: true });
+
+    expect(onCommit).toHaveBeenCalledWith('First\nSecond');
+  });
+
+  it('Escape should dismiss without committing', () => {
+    const onCommit = vi.fn();
+    const onDismiss = vi.fn();
+    const { container } = render(
+      <TextInputOverlay {...defaultProps} onCommit={onCommit} onDismiss={onDismiss} shapeEditing />,
+    );
+    const textarea = container.querySelector('textarea') as HTMLTextAreaElement;
+
+    textarea.value = 'Some text\nSecond line';
+
+    fireEvent.keyDown(textarea, { key: 'Escape' });
+
+    expect(onDismiss).toHaveBeenCalled();
+    expect(onCommit).not.toHaveBeenCalled();
+  });
+
+  it('should pre-fill multi-line initialText', () => {
+    render(
+      <TextInputOverlay {...defaultProps} shapeEditing initialText={'Line A\nLine B\nLine C'} />,
+    );
+    const textarea = screen.getByPlaceholderText('Enter text...') as HTMLTextAreaElement;
+    expect(textarea.value).toBe('Line A\nLine B\nLine C');
+  });
+
+  it('should auto-resize textarea on mount when initialText has multiple lines', () => {
+    const { container } = render(
+      <TextInputOverlay
+        {...defaultProps}
+        shapeEditing
+        initialText={'Line 1\nLine 2\nLine 3'}
+        position={{ left: 0, top: 0, width: 200, height: 100 }}
+      />,
+    );
+    const textarea = container.querySelector('textarea') as HTMLTextAreaElement;
+
+    // After mount with multi-line initialText, height should be set
+    // (not left at default single-row height)
+    expect(textarea.style.height).not.toBe('');
+  });
+});
+
+describe('TextInputOverlay overlay dimensions for shape editing', () => {
+  const baseProps = {
+    onCommit: () => {},
+    onDismiss: () => {},
+  };
+
+  it('should apply width and height when shapeEditing with dimensions', () => {
+    const { container } = render(
+      <TextInputOverlay
+        {...baseProps}
+        shapeEditing
+        position={{ left: 50, top: 60, width: 200, height: 150 }}
+      />,
+    );
+    const overlay = container.querySelector('.text-input-overlay') as HTMLElement;
+
+    expect(overlay.style.left).toBe('50px');
+    expect(overlay.style.top).toBe('60px');
+    expect(overlay.style.width).toBe('200px');
+    expect(overlay.style.height).toBe('150px');
+  });
+
+  it('should NOT apply width/height when not in shapeEditing mode', () => {
+    const { container } = render(
+      <TextInputOverlay
+        {...baseProps}
+        position={{ left: 50, top: 60, width: 200, height: 150 }}
+      />,
+    );
+    const overlay = container.querySelector('.text-input-overlay') as HTMLElement;
+
+    expect(overlay.style.left).toBe('50px');
+    expect(overlay.style.top).toBe('60px');
+    expect(overlay.style.width).toBe('');
+    expect(overlay.style.height).toBe('');
+  });
+
+  it('should NOT apply width/height when dimensions are missing', () => {
+    const { container } = render(
+      <TextInputOverlay {...baseProps} shapeEditing position={{ left: 50, top: 60 }} />,
+    );
+    const overlay = container.querySelector('.text-input-overlay') as HTMLElement;
+
+    expect(overlay.style.width).toBe('');
+    expect(overlay.style.height).toBe('');
+  });
+});