From bdcddeb65a8e96e0d6b2615ad723c9ecc5967022 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Sat, 18 Apr 2026 14:24:22 +0100
Subject: [PATCH] Phase 5: graph + claims views

Adds ArgumentGraph (ReactFlow), ClaimsView, and ClaimCard components.
Extends EditorContext with structural commands (appendHighlight,
updateHighlightText, removeHighlight, addHighlightAtSelection) so all
three analysis tabs share a single Remirror source of truth.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/ArgumentGraph.tsx    | 344 ++++++++++++++++++++++++++++
 src/components/ClaimCard.tsx        | 155 +++++++++++++
 src/components/ClaimsView.tsx       |  90 ++++++++
 src/components/HighlightToolbar.tsx |  13 +-
 src/contexts/EditorContext.tsx      |  89 ++++++-
 src/pages/AnalysisPage.tsx          |  14 +-
 6 files changed, 687 insertions(+), 18 deletions(-)
 create mode 100644 src/components/ArgumentGraph.tsx
 create mode 100644 src/components/ClaimCard.tsx
 create mode 100644 src/components/ClaimsView.tsx

diff --git a/src/components/ArgumentGraph.tsx b/src/components/ArgumentGraph.tsx
new file mode 100644
index 0000000..5a91719
--- /dev/null
+++ b/src/components/ArgumentGraph.tsx
@@ -0,0 +1,344 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import ReactFlow, {
+	Background,
+	Controls,
+	Handle,
+	MiniMap,
+	Position,
+	applyEdgeChanges,
+	applyNodeChanges,
+	type Connection,
+	type Edge,
+	type EdgeChange,
+	type Node,
+	type NodeChange,
+	type NodeProps,
+	type XYPosition,
+} from "reactflow";
+import "reactflow/dist/style.css";
+import { useEditorContext } from "../contexts/EditorContext";
+import { useSession } from "../contexts/SessionContext";
+import { LABEL_CONFIGS } from "../types/labels";
+import type { Highlight, Relationship } from "../types";
+
+interface HighlightNodeData {
+	highlight: Highlight;
+	color: string;
+	onEditText: (id: string, newText: string) => void;
+	onDelete: (id: string) => void;
+}
+
+function HighlightNode({ data }: NodeProps<HighlightNodeData>) {
+	const { highlight, color, onEditText, onDelete } = data;
+	const [isEditing, setIsEditing] = useState(false);
+	const [draft, setDraft] = useState(highlight.text);
+
+	const commit = () => {
+		setIsEditing(false);
+		const next = draft.trim();
+		if (next && next !== highlight.text) onEditText(highlight.id, next);
+		else setDraft(highlight.text);
+	};
+
+	return (
+		<div
+			className="rounded-md border border-neutral-300 bg-white px-3 py-2 text-xs shadow-sm"
+			style={{ borderTopColor: color, borderTopWidth: 4, minWidth: 160, maxWidth: 240 }}
+		>
+			<Handle type="target" position={Position.Left} />
+			<div className="mb-1 flex items-center justify-between gap-2">
+				<span
+					className="text-[10px] font-medium uppercase tracking-wide"
+					style={{ color }}
+				>
+					{highlight.labelType}
+				</span>
+				<div className="flex gap-1">
+					<button
+						type="button"
+						onClick={() => {
+							setDraft(highlight.text);
+							setIsEditing(true);
+						}}
+						className="text-[10px] text-neutral-500 hover:text-neutral-800"
+						aria-label="Edit"
+					>
+						✎
+					</button>
+					<button
+						type="button"
+						onClick={() => onDelete(highlight.id)}
+						className="text-[10px] text-neutral-500 hover:text-red-600"
+						aria-label="Delete"
+					>
+						✕
+					</button>
+				</div>
+			</div>
+			{isEditing ? (
+				<textarea
+					autoFocus
+					value={draft}
+					onChange={(e) => setDraft(e.target.value)}
+					onBlur={commit}
+					onKeyDown={(e) => {
+						if (e.key === "Enter" && !e.shiftKey) {
+							e.preventDefault();
+							commit();
+						} else if (e.key === "Escape") {
+							setIsEditing(false);
+							setDraft(highlight.text);
+						}
+					}}
+					className="w-full rounded border border-neutral-200 p-1 text-xs outline-none focus:border-neutral-400"
+					rows={3}
+				/>
+			) : (
+				<p className="whitespace-pre-wrap break-words leading-snug text-neutral-800">
+					{highlight.text}
+				</p>
+			)}
+			<Handle type="source" position={Position.Right} />
+		</div>
+	);
+}
+
+const nodeTypes = { highlight: HighlightNode };
+
+function buildAutoLayout(
+	highlights: Highlight[],
+	saved: Record<string, XYPosition>,
+): Record<string, XYPosition> {
+	// Column-based fallback: group by labelType, one column per label.
+	const columns: Record<string, Highlight[]> = {};
+	const unseen: Highlight[] = [];
+	for (const h of highlights) {
+		if (saved[h.id]) continue;
+		unseen.push(h);
+	}
+	for (const h of unseen) {
+		(columns[h.labelType] ??= []).push(h);
+	}
+	const laid: Record<string, XYPosition> = {};
+	const labelOrder = LABEL_CONFIGS.map((l) => l.id);
+	const orderedLabels = [
+		...labelOrder.filter((l) => columns[l]),
+		...Object.keys(columns).filter((l) => !labelOrder.includes(l)),
+	];
+	const colW = 280;
+	const rowH = 120;
+	orderedLabels.forEach((label, colIdx) => {
+		columns[label].forEach((h, rowIdx) => {
+			laid[h.id] = { x: colIdx * colW, y: rowIdx * rowH };
+		});
+	});
+	return laid;
+}
+
+export function ArgumentGraph() {
+	const {
+		highlights,
+		updateHighlightText,
+		removeHighlight,
+	} = useEditorContext();
+	const { session, saveRelationships, saveGraphPositions, saveContent } =
+		useSession();
+	const { editor } = useEditorContext();
+
+	const relationships = useMemo(
+		() => session?.relationships ?? [],
+		[session?.relationships],
+	);
+	const graphPositions = useMemo(
+		() => session?.graphPositions ?? {},
+		[session?.graphPositions],
+	);
+
+	const [labelFilter, setLabelFilter] = useState<Record<string, boolean>>(
+		() => Object.fromEntries(LABEL_CONFIGS.map((l) => [l.id, true])),
+	);
+
+	const labelColor = useCallback((labelType: string) => {
+		return LABEL_CONFIGS.find((l) => l.id === labelType)?.color ?? "#999";
+	}, []);
+
+	// Compute initial nodes whenever highlights change; keep ReactFlow's
+	// local drag state in between.
+	const visibleHighlights = useMemo(
+		() => highlights.filter((h) => labelFilter[h.labelType] !== false),
+		[highlights, labelFilter],
+	);
+
+	const computedPositions = useMemo(() => {
+		const autoLaid = buildAutoLayout(visibleHighlights, graphPositions);
+		const merged: Record<string, XYPosition> = { ...autoLaid };
+		for (const h of visibleHighlights) {
+			if (graphPositions[h.id]) merged[h.id] = graphPositions[h.id];
+		}
+		return merged;
+	}, [visibleHighlights, graphPositions]);
+
+	const initialNodes = useMemo<Node<HighlightNodeData>[]>(() => {
+		return visibleHighlights.map((h) => ({
+			id: h.id,
+			type: "highlight",
+			position: computedPositions[h.id] ?? { x: 0, y: 0 },
+			data: {
+				highlight: h,
+				color: labelColor(h.labelType),
+				onEditText: (id, next) => {
+					updateHighlightText(id, next);
+					// Persist doc after the mark update.
+					void saveContent(editor.getState().doc.toJSON());
+				},
+				onDelete: (id) => {
+					removeHighlight(id);
+					// Prune relationships referencing this node.
+					const pruned = relationships.filter(
+						(r) => r.sourceHighlightId !== id && r.targetHighlightId !== id,
+					);
+					if (pruned.length !== relationships.length) {
+						void saveRelationships(pruned);
+					}
+					void saveContent(editor.getState().doc.toJSON());
+				},
+			},
+		}));
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [visibleHighlights, computedPositions, relationships]);
+
+	const initialEdges = useMemo<Edge[]>(() => {
+		const ids = new Set(visibleHighlights.map((h) => h.id));
+		return relationships
+			.filter(
+				(r) => ids.has(r.sourceHighlightId) && ids.has(r.targetHighlightId),
+			)
+			.map((r) => ({
+				id: `${r.sourceHighlightId}->${r.targetHighlightId}`,
+				source: r.sourceHighlightId,
+				target: r.targetHighlightId,
+			}));
+	}, [relationships, visibleHighlights]);
+
+	const [nodes, setNodes] = useState<Node<HighlightNodeData>[]>(initialNodes);
+	const [edges, setEdges] = useState<Edge[]>(initialEdges);
+
+	// When upstream data changes (highlights added/removed, edges changed by
+	// another view), reset local graph state. Drag-only position changes stay
+	// local until commit.
+	useEffect(() => {
+		setNodes(initialNodes);
+	}, [initialNodes]);
+	useEffect(() => {
+		setEdges(initialEdges);
+	}, [initialEdges]);
+
+	const onNodesChange = useCallback(
+		(changes: NodeChange[]) =>
+			setNodes((prev) => applyNodeChanges(changes, prev)),
+		[],
+	);
+	const onEdgesChange = useCallback(
+		(changes: EdgeChange[]) => {
+			setEdges((prev) => applyEdgeChanges(changes, prev));
+			const removedIds = changes
+				.filter((c): c is EdgeChange & { type: "remove"; id: string } =>
+					c.type === "remove",
+				)
+				.map((c) => c.id);
+			if (removedIds.length === 0) return;
+			const next: Relationship[] = relationships.filter((r) => {
+				const id = `${r.sourceHighlightId}->${r.targetHighlightId}`;
+				return !removedIds.includes(id);
+			});
+			if (next.length !== relationships.length) {
+				void saveRelationships(next);
+			}
+		},
+		[relationships, saveRelationships],
+	);
+
+	const onNodeDragStop = useCallback(
+		(_: unknown, node: Node) => {
+			const next: Record<string, XYPosition> = { ...graphPositions };
+			next[node.id] = { x: node.position.x, y: node.position.y };
+			void saveGraphPositions(next);
+		},
+		[graphPositions, saveGraphPositions],
+	);
+
+	const onConnect = useCallback(
+		(connection: Connection) => {
+			if (!connection.source || !connection.target) return;
+			if (connection.source === connection.target) return;
+			const exists = relationships.some(
+				(r) =>
+					r.sourceHighlightId === connection.source &&
+					r.targetHighlightId === connection.target,
+			);
+			if (exists) return;
+			const next: Relationship[] = [
+				...relationships,
+				{
+					sourceHighlightId: connection.source,
+					targetHighlightId: connection.target,
+				},
+			];
+			void saveRelationships(next);
+		},
+		[relationships, saveRelationships],
+	);
+
+	const toggleLabel = (id: string) =>
+		setLabelFilter((prev) => ({ ...prev, [id]: !prev[id] }));
+
+	return (
+		<div className="flex min-h-[60vh] gap-3">
+			<aside className="w-48 shrink-0 rounded-md border border-neutral-200 bg-white p-3">
+				<h3 className="mb-2 text-xs font-medium uppercase tracking-wide text-neutral-500">
+					Filter
+				</h3>
+				<ul className="flex flex-col gap-1 text-sm">
+					{LABEL_CONFIGS.map((label) => (
+						<li key={label.id}>
+							<label className="flex items-center gap-2 text-neutral-700">
+								<input
+									type="checkbox"
+									checked={labelFilter[label.id] !== false}
+									onChange={() => toggleLabel(label.id)}
+								/>
+								<span
+									aria-hidden
+									className="inline-block h-2.5 w-2.5 rounded-sm"
+									style={{ backgroundColor: label.color }}
+								/>
+								{label.name}
+							</label>
+						</li>
+					))}
+				</ul>
+				<p className="mt-4 text-[11px] text-neutral-500">
+					Drag nodes to reposition. Drag from a handle to connect two
+					highlights.
+				</p>
+			</aside>
+			<div className="flex-1 rounded-md border border-neutral-200 bg-neutral-50">
+				<ReactFlow
+					nodes={nodes}
+					edges={edges}
+					onNodesChange={onNodesChange}
+					onEdgesChange={onEdgesChange}
+					onNodeDragStop={onNodeDragStop}
+					onConnect={onConnect}
+					nodeTypes={nodeTypes}
+					fitView
+					deleteKeyCode={["Backspace", "Delete"]}
+				>
+					<Background gap={16} />
+					<Controls position="bottom-right" />
+					<MiniMap pannable zoomable />
+				</ReactFlow>
+			</div>
+		</div>
+	);
+}
diff --git a/src/components/ClaimCard.tsx b/src/components/ClaimCard.tsx
new file mode 100644
index 0000000..d1f32da
--- /dev/null
+++ b/src/components/ClaimCard.tsx
@@ -0,0 +1,155 @@
+import { useState } from "react";
+import { LABEL_CONFIGS } from "../types/labels";
+import type { Highlight } from "../types";
+
+interface ClaimCardProps {
+	claim: Highlight;
+	evidence: Highlight[];
+	onEditText: (id: string, newText: string) => void;
+	onDeleteClaim: (id: string) => void;
+	onRemoveEvidence: (claimId: string, evidenceId: string) => void;
+}
+
+function labelColor(labelType: string): string {
+	return LABEL_CONFIGS.find((l) => l.id === labelType)?.color ?? "#999";
+}
+
+interface EditableTextProps {
+	value: string;
+	onCommit: (next: string) => void;
+	className?: string;
+	placeholder?: string;
+}
+
+function EditableText({ value, onCommit, className, placeholder }: EditableTextProps) {
+	const [editing, setEditing] = useState(false);
+	const [draft, setDraft] = useState(value);
+
+	if (!editing) {
+		return (
+			<button
+				type="button"
+				onClick={() => {
+					setDraft(value);
+					setEditing(true);
+				}}
+				className={`w-full cursor-text whitespace-pre-wrap break-words text-left ${className ?? ""}`}
+				title="Click to edit"
+			>
+				{value || (
+					<span className="italic text-neutral-400">
+						{placeholder ?? "Empty"}
+					</span>
+				)}
+			</button>
+		);
+	}
+
+	const commit = () => {
+		setEditing(false);
+		const next = draft.trim();
+		if (next && next !== value) onCommit(next);
+	};
+
+	return (
+		<textarea
+			autoFocus
+			value={draft}
+			onChange={(e) => setDraft(e.target.value)}
+			onBlur={commit}
+			onKeyDown={(e) => {
+				if (e.key === "Enter" && !e.shiftKey) {
+					e.preventDefault();
+					commit();
+				} else if (e.key === "Escape") {
+					setEditing(false);
+					setDraft(value);
+				}
+			}}
+			className={`w-full rounded border border-neutral-200 p-1 outline-none focus:border-neutral-400 ${className ?? ""}`}
+			rows={Math.max(2, Math.ceil(draft.length / 60))}
+		/>
+	);
+}
+
+export function ClaimCard({
+	claim,
+	evidence,
+	onEditText,
+	onDeleteClaim,
+	onRemoveEvidence,
+}: ClaimCardProps) {
+	const claimBorder = labelColor("claim");
+
+	return (
+		<article
+			className="rounded-md border border-neutral-200 bg-white p-4 shadow-sm"
+			style={{ borderTopColor: claimBorder, borderTopWidth: 4 }}
+		>
+			<header className="mb-2 flex items-start justify-between gap-2">
+				<span
+					className="text-[10px] font-medium uppercase tracking-wide"
+					style={{ color: claimBorder }}
+				>
+					Claim
+				</span>
+				<button
+					type="button"
+					onClick={() => onDeleteClaim(claim.id)}
+					className="text-xs text-neutral-400 hover:text-red-600"
+					aria-label="Delete claim"
+				>
+					Delete
+				</button>
+			</header>
+			<EditableText
+				value={claim.text}
+				onCommit={(next) => onEditText(claim.id, next)}
+				className="text-sm font-medium text-neutral-900"
+			/>
+
+			<div className="mt-4">
+				<h4 className="mb-2 text-[10px] font-medium uppercase tracking-wide text-neutral-500">
+					Evidence ({evidence.length})
+				</h4>
+				{evidence.length === 0 ? (
+					<p className="text-xs italic text-neutral-400">
+						No supporting evidence linked yet. Connect nodes in the graph view.
+					</p>
+				) : (
+					<ul className="flex flex-col gap-2">
+						{evidence.map((e) => (
+							<li
+								key={e.id}
+								className="rounded border border-neutral-200 bg-neutral-50 p-2"
+								style={{ borderLeftColor: labelColor(e.labelType), borderLeftWidth: 3 }}
+							>
+								<div className="mb-1 flex items-center justify-between gap-2">
+									<span
+										className="text-[9px] font-medium uppercase tracking-wide"
+										style={{ color: labelColor(e.labelType) }}
+									>
+										{e.labelType}
+									</span>
+									<button
+										type="button"
+										onClick={() => onRemoveEvidence(claim.id, e.id)}
+										className="text-[10px] text-neutral-400 hover:text-red-600"
+										aria-label="Unlink evidence"
+									>
+										Unlink
+									</button>
+								</div>
+								<EditableText
+									value={e.text}
+									onCommit={(next) => onEditText(e.id, next)}
+									className="text-xs text-neutral-800"
+								/>
+							</li>
+						))}
+					</ul>
+				)}
+			</div>
+		</article>
+	);
+}
diff --git a/src/components/ClaimsView.tsx b/src/components/ClaimsView.tsx
new file mode 100644
index 0000000..18b2141
--- /dev/null
+++ b/src/components/ClaimsView.tsx
@@ -0,0 +1,90 @@
+import { useMemo } from "react";
+import { useEditorContext } from "../contexts/EditorContext";
+import { useSession } from "../contexts/SessionContext";
+import type { Highlight, Relationship } from "../types";
+import { ClaimCard } from "./ClaimCard";
+
+export function ClaimsView() {
+	const {
+		editor,
+		highlights,
+		updateHighlightText,
+		removeHighlight,
+	} = useEditorContext();
+	const { session, saveRelationships, saveContent } = useSession();
+
+	const relationships = session?.relationships ?? [];
+
+	const claims = useMemo<Highlight[]>(
+		() => highlights.filter((h) => h.labelType === "claim"),
+		[highlights],
+	);
+
+	const highlightsById = useMemo(() => {
+		const map = new Map<string, Highlight>();
+		for (const h of highlights) map.set(h.id, h);
+		return map;
+	}, [highlights]);
+
+	const evidenceForClaim = (claimId: string): Highlight[] => {
+		return relationships
+			.filter((r) => r.targetHighlightId === claimId)
+			.map((r) => highlightsById.get(r.sourceHighlightId))
+			.filter((h): h is Highlight => h !== undefined);
+	};
+
+	const persistDoc = () => saveContent(editor.getState().doc.toJSON());
+
+	const handleEditText = (id: string, next: string) => {
+		updateHighlightText(id, next);
+		void persistDoc();
+	};
+
+	const handleDeleteClaim = (id: string) => {
+		removeHighlight(id);
+		const pruned: Relationship[] = relationships.filter(
+			(r) => r.sourceHighlightId !== id && r.targetHighlightId !== id,
+		);
+		if (pruned.length !== relationships.length) {
+			void saveRelationships(pruned);
+		}
+		void persistDoc();
+	};
+
+	const handleRemoveEvidence = (claimId: string, evidenceId: string) => {
+		const pruned: Relationship[] = relationships.filter(
+			(r) =>
+				!(
+					r.sourceHighlightId === evidenceId &&
+					r.targetHighlightId === claimId
+				),
+		);
+		if (pruned.length !== relationships.length) {
+			void saveRelationships(pruned);
+		}
+	};
+
+	if (claims.length === 0) {
+		return (
+			<section className="min-h-[60vh] rounded-md border border-dashed border-neutral-300 p-8 text-center text-sm text-neutral-500">
+				No claims yet. Label a passage as a claim in the text view to
+				see it here.
+			</section>
+		);
+	}
+
+	return (
+		<section className="grid min-h-[60vh] grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
+			{claims.map((claim) => (
+				<ClaimCard
+					key={claim.id}
+					claim={claim}
+					evidence={evidenceForClaim(claim.id)}
+					onEditText={handleEditText}
+					onDeleteClaim={handleDeleteClaim}
+					onRemoveEvidence={handleRemoveEvidence}
+				/>
+			))}
+		</section>
+	);
+}
diff --git a/src/components/HighlightToolbar.tsx b/src/components/HighlightToolbar.tsx
index cb28eff..d433c19 100644
--- a/src/components/HighlightToolbar.tsx
+++ b/src/components/HighlightToolbar.tsx
@@ -8,7 +8,8 @@ import { LABEL_CONFIGS } from "../types/labels";
  * button when the caret sits inside an existing highlight.
  */
 export function HighlightToolbar() {
-	const { editor, highlights } = useEditorContext();
+	const { editor, highlights, addHighlightAtSelection, removeHighlight } =
+		useEditorContext();
 	const state = editor.getState();
 
 	const hasSelection = !state.selection.empty;
@@ -20,14 +21,12 @@ export function HighlightToolbar() {
 	}, [highlights, state.selection]);
 
 	const addHighlight = (labelType: string) => {
-		if (!hasSelection) return;
-		const id = crypto.randomUUID();
-		editor.commands.addEntityReference(id, { id, labelType, type: labelType });
+		addHighlightAtSelection(labelType);
 	};
 
-	const removeHighlight = () => {
+	const removeCurrent = () => {
 		if (!highlightAtCursor) return;
-		editor.commands.removeEntityReference(highlightAtCursor.id);
+		removeHighlight(highlightAtCursor.id);
 	};
 
 	return (
@@ -76,7 +75,7 @@ export function HighlightToolbar() {
 					</p>
 					<button
 						type="button"
-						onClick={removeHighlight}
+						onClick={removeCurrent}
 						className="w-full rounded border border-red-200 bg-red-50 px-3 py-1.5 text-sm text-red-700 transition hover:bg-red-100"
 					>
 						Remove highlight
diff --git a/src/contexts/EditorContext.tsx b/src/contexts/EditorContext.tsx
index b40fede..39f9653 100644
--- a/src/contexts/EditorContext.tsx
+++ b/src/contexts/EditorContext.tsx
@@ -37,6 +37,14 @@ type EditorFrameworkOutput = ReactFrameworkOutput<EditorExtensions>;
 interface EditorContextValue {
 	editor: EditorFrameworkOutput;
 	highlights: Highlight[];
+	/** Wrap the current selection in a new entity-reference mark. Returns the new id, or null if the selection is empty. */
+	addHighlightAtSelection: (labelType: string) => string | null;
+	/** Append `text` (with an entity-reference mark) as a new paragraph at the end of the document. Returns the new id. */
+	appendHighlight: (text: string, labelType: string) => string;
+	/** Replace the text under an existing entity-reference mark, preserving the mark. */
+	updateHighlightText: (id: string, newText: string) => void;
+	/** Remove an entity-reference mark from the document. */
+	removeHighlight: (id: string) => void;
 }
 
 const EditorContext = createContext<EditorContextValue | null>(null);
@@ -114,6 +122,8 @@ export function EditorProvider({
 	);
 }
 
+const ENTITY_MARK = "entity-reference";
+
 function InnerProvider({ children }: { children: ReactNode }) {
 	const editor = useRemirrorContext<EditorExtensions>();
 	const state = useEditorState();
@@ -122,7 +132,84 @@ function InnerProvider({ children }: { children: ReactNode }) {
 		[state],
 	);
 
-	const value: EditorContextValue = { editor, highlights };
+	const addHighlightAtSelection = useCallback(
+		(labelType: string): string | null => {
+			const current = editor.getState();
+			if (current.selection.empty) return null;
+			const id = crypto.randomUUID();
+			editor.commands.addEntityReference(id, {
+				id,
+				labelType,
+				type: labelType,
+			});
+			return id;
+		},
+		[editor],
+	);
+
+	const appendHighlight = useCallback(
+		(text: string, labelType: string): string => {
+			const id = crypto.randomUUID();
+			const current = editor.getState();
+			const { schema, tr, doc } = current;
+			const markType = schema.marks[ENTITY_MARK];
+			const paragraphType = schema.nodes.paragraph;
+			if (!markType || !paragraphType) {
+				throw new Error("Editor schema missing paragraph or entity-reference mark");
+			}
+			const mark = markType.create({ id, labelType, type: labelType });
+			const textNode = schema.text(text, [mark]);
+			const paragraph = paragraphType.create(null, textNode);
+			const transaction = tr.insert(doc.content.size, paragraph);
+			editor.manager.view.dispatch(transaction);
+			return id;
+		},
+		[editor],
+	);
+
+	const updateHighlightText = useCallback(
+		(id: string, newText: string): void => {
+			if (!newText) return;
+			const current = editor.getState();
+			const doc = current.doc;
+			const fresh = extractHighlights(doc.toJSON() as RemirrorJSON);
+			const target = fresh.find((h) => h.id === id);
+			if (!target) return;
+			const markType = current.schema.marks[ENTITY_MARK];
+			if (!markType) return;
+			// Reuse the same attrs so labelType/confidence survive the edit.
+			const existingNode = doc.nodeAt(target.from);
+			const existingMark = existingNode?.marks.find(
+				(m) => m.type.name === ENTITY_MARK && m.attrs.id === id,
+			);
+			const attrs = existingMark?.attrs ?? {
+				id,
+				labelType: target.labelType,
+				type: target.labelType,
+			};
+			const mark = markType.create(attrs);
+			const textNode = current.schema.text(newText, [mark]);
+			const tr = current.tr.replaceWith(target.from, target.to, textNode);
+			editor.manager.view.dispatch(tr);
+		},
+		[editor],
+	);
+
+	const removeHighlight = useCallback(
+		(id: string): void => {
+			editor.commands.removeEntityReference(id);
+		},
+		[editor],
+	);
+
+	const value: EditorContextValue = {
+		editor,
+		highlights,
+		addHighlightAtSelection,
+		appendHighlight,
+		updateHighlightText,
+		removeHighlight,
+	};
 
 	return (
 		<EditorContext.Provider value={value}>{children}</EditorContext.Provider>
diff --git a/src/pages/AnalysisPage.tsx b/src/pages/AnalysisPage.tsx
index 9cf5b36..4707395 100644
--- a/src/pages/AnalysisPage.tsx
+++ b/src/pages/AnalysisPage.tsx
@@ -5,6 +5,8 @@ import { EditorComponent } from "@remirror/react";
 import { useSession } from "../contexts/SessionContext";
 import { useEditorContext } from "../contexts/EditorContext";
 import { HighlightToolbar } from "../components/HighlightToolbar";
+import { ArgumentGraph } from "../components/ArgumentGraph";
+import { ClaimsView } from "../components/ClaimsView";
 import { runAnalysis } from "../services/analysis";
 import { getAvailableModels, type ModelId } from "../services/llm";
 import { detailedPrompt } from "../evals/prompts";
@@ -218,17 +220,9 @@ function AnalysisPageInner({
 				</div>
 			)}
 
-			{tab === "graph" && (
-				<section className="min-h-[60vh] rounded-md border border-dashed border-neutral-300 p-8 text-center text-sm text-neutral-500">
-					Graph view — coming in Phase 5.
-				</section>
-			)}
+			{tab === "graph" && <ArgumentGraph />}
 
-			{tab === "claims" && (
-				<section className="min-h-[60vh] rounded-md border border-dashed border-neutral-300 p-8 text-center text-sm text-neutral-500">
-					Claims view — coming in Phase 5.
-				</section>
-			)}
+			{tab === "claims" && <ClaimsView />}
 		</main>
 	);
 }