From 0f44dc614ca0d4afa54ff929cd665f3d98ce26c0 Mon Sep 17 00:00:00 2001
From: "Kevin Carter (via Claude)" <kcar@kevlarai.com>
Date: Thu, 2 Jul 2026 23:55:43 +0000
Subject: [PATCH] Exam canvas: show recognised response FORM on each ghost
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The extraction service types every answer space (multiple choice, draw-on, table,
ruled lines…), but the canvas rendered them all as a generic blue 'Response' box.
Add a small form badge (bottom-right) so the recognition is legible at a glance;
context regions show their type too. Colour-by-kind is unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/pages/exam/setup/examCanvasShapes.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/pages/exam/setup/examCanvasShapes.tsx b/src/pages/exam/setup/examCanvasShapes.tsx
index 65935c5..4e01e90 100644
--- a/src/pages/exam/setup/examCanvasShapes.tsx
+++ b/src/pages/exam/setup/examCanvasShapes.tsx
@@ -66,6 +66,18 @@ export const canvasShapePalette: Record<ExamCanvasShapeKind, CanvasPaletteEntry>
   furniture: { stroke: '#64748b', fill: 'rgba(100,116,139,0.12)', darkStroke: '#cbd5e1', darkFill: 'rgba(148,163,184,0.18)', dash: '3 5', label: 'Furniture', icon: '×', role: 'ignore' },
 }
 
+// Human-legible names for the extraction service's response forms — so the canvas SHOWS what was
+// recognised (multiple-choice, draw-on, table…), not just a generic "Response" box.
+const RESPONSE_FORM_LABEL: Record<string, string> = {
+  lines: 'ruled lines',
+  'answer-box': 'answer box',
+  working: 'working space',
+  diagram: 'draw-on',
+  'tick-boxes': 'multiple choice',
+  table: 'table',
+  blanks: 'fill-in',
+}
+
 const shapeCss = `
 .exam-canvas-shape { --exam-stroke: var(--exam-light-stroke); --exam-fill: var(--exam-light-fill); }
 [data-color-mode="dark"] .exam-canvas-shape, .tl-theme__dark .exam-canvas-shape { --exam-stroke: var(--exam-dark-stroke); --exam-fill: var(--exam-dark-fill); }
@@ -161,6 +173,8 @@ function renderShape(shape: ExamCanvasTLShape) {
         {confidence && <span className="exam-canvas-shape__pill exam-canvas-shape__confidence" style={{ fontSize: 11, fontWeight: 900, borderRadius: 999, padding: '2px 7px' }}>{confidence}</span>}
         {!confidence && !isBoundary && shape.props.questionId && <span className="exam-canvas-shape__pill" style={{ fontSize: 11, fontWeight: 800, borderRadius: 999, padding: '2px 7px' }}>Attached</span>}
         {flags.length > 0 && <span className="exam-canvas-shape__pill exam-canvas-shape__flag" style={{ position: 'absolute', left: 8, bottom: 8, fontSize: 10, fontWeight: 900, borderRadius: 999, padding: '1px 6px', maxWidth: 'calc(100% - 16px)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{flags.slice(0, 2).join(' · ')}</span>}
+        {kind === 'response' && shape.props.responseForm && <span className="exam-canvas-shape__pill" style={{ position: 'absolute', right: 8, bottom: 8, fontSize: 10, fontWeight: 800, borderRadius: 999, padding: '1px 6px', opacity: 0.9 }}>{RESPONSE_FORM_LABEL[shape.props.responseForm] ?? shape.props.responseForm}</span>}
+        {kind === 'context' && shape.props.contextType && shape.props.contextType !== 'generic' && <span className="exam-canvas-shape__pill" style={{ position: 'absolute', right: 8, bottom: 8, fontSize: 10, fontWeight: 800, borderRadius: 999, padding: '1px 6px', opacity: 0.9 }}>{shape.props.contextType}</span>}
         {isBoundary && <span className="exam-canvas-shape__pill" style={{ fontSize: 10, fontWeight: 800, borderRadius: 999, padding: '1px 6px' }}>pair across pages</span>}
       </div>
     </HTMLContainer>