feat: navigate to pdf searcg

caio-pizzol · caio-pizzol · commit 2e3573e59a00 · 2026-01-29T13:21:20.000-03:00
diff --git a/apps/mcp-server/src/db.ts b/apps/mcp-server/src/db.ts
@@ -11,6 +11,7 @@ export interface SearchResult {
 	title: string | null;
 	content: string;
 	contentType: string;
+	pageNumber: number | null;
 	score: number;
 }
 
@@ -39,7 +40,7 @@ export function createDb(connectionString: string) {
 			let results: Record<string, unknown>[];
 			if (partNumber !== undefined && contentType) {
 				results = await sql`
-					SELECT id, part_number, section_id, title, content, content_type,
+					SELECT id, part_number, section_id, title, content, content_type, page_number,
 						1 - (embedding <=> ${embeddingStr}::vector) as score
 					FROM spec_content
 					WHERE embedding IS NOT NULL
@@ -50,7 +51,7 @@ export function createDb(connectionString: string) {
 				`;
 			} else if (partNumber !== undefined) {
 				results = await sql`
-					SELECT id, part_number, section_id, title, content, content_type,
+					SELECT id, part_number, section_id, title, content, content_type, page_number,
 						1 - (embedding <=> ${embeddingStr}::vector) as score
 					FROM spec_content
 					WHERE embedding IS NOT NULL
@@ -60,7 +61,7 @@ export function createDb(connectionString: string) {
 				`;
 			} else if (contentType) {
 				results = await sql`
-					SELECT id, part_number, section_id, title, content, content_type,
+					SELECT id, part_number, section_id, title, content, content_type, page_number,
 						1 - (embedding <=> ${embeddingStr}::vector) as score
 					FROM spec_content
 					WHERE embedding IS NOT NULL
@@ -70,7 +71,7 @@ export function createDb(connectionString: string) {
 				`;
 			} else {
 				results = await sql`
-					SELECT id, part_number, section_id, title, content, content_type,
+					SELECT id, part_number, section_id, title, content, content_type, page_number,
 						1 - (embedding <=> ${embeddingStr}::vector) as score
 					FROM spec_content
 					WHERE embedding IS NOT NULL
@@ -86,6 +87,7 @@ export function createDb(connectionString: string) {
 				title: r.title as string | null,
 				content: r.content as string,
 				contentType: r.content_type as string,
+				pageNumber: r.page_number as number | null,
 				score: r.score as number,
 			}));
 		},
diff --git a/apps/mcp-server/src/index.ts b/apps/mcp-server/src/index.ts
@@ -30,13 +30,12 @@ const PART_DESCRIPTIONS: Record<number, string> = {
 const ALLOWED_ORIGINS = ["https://ooxml.dev", "https://www.ooxml.dev"];
 const DEV_ORIGINS = ["http://localhost:5173", "http://127.0.0.1:5173"];
 
-function getCorsHeaders(request: Request, env: Env): Record<string, string> {
+function getCorsHeaders(request: Request, _env: Env): Record<string, string> {
 	const origin = request.headers.get("Origin");
 	if (!origin) return {};
 
-	// Check if origin is allowed
-	const isProduction = !env.DATABASE_URL.includes("localhost");
-	const allowedOrigins = isProduction ? ALLOWED_ORIGINS : [...ALLOWED_ORIGINS, ...DEV_ORIGINS];
+	// Always allow localhost origins (safe - can only be used when running locally)
+	const allowedOrigins = [...ALLOWED_ORIGINS, ...DEV_ORIGINS];
 
 	if (allowedOrigins.includes(origin)) {
 		return {
diff --git a/apps/web/.env.example b/apps/web/.env.example
@@ -0,0 +1,4 @@
+# API URL for the MCP server
+# Local dev: http://localhost:8787
+# Production: https://api.ooxml.dev
+VITE_API_URL=http://localhost:8787
diff --git a/apps/web/.env.production b/apps/web/.env.production
@@ -0,0 +1,2 @@
+# Production
+VITE_API_URL=https://api.ooxml.dev
diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
diff --git a/apps/web/src/components/SearchDialog.tsx b/apps/web/src/components/SearchDialog.tsx
@@ -1,5 +1,5 @@
 import { clsx } from "clsx";
-import { FileText, Hash, Loader2, Search } from "lucide-react";
+import { ExternalLink, FileText, Hash, Loader2, Search } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { useSpecSearch } from "../hooks/useSpecSearch";
@@ -88,7 +88,10 @@ export function SpecSearchDialog({ open, onOpenChange }: Props) {
 					if (activeTab === "docs") {
 						navigate((result as (typeof localResults)[number]).url);
 					} else {
-						navigate((result as (typeof specResults)[number]).url);
+						const specResult = result as (typeof specResults)[number];
+						if (specResult.pdfUrl) {
+							window.open(specResult.pdfUrl, "_blank");
+						}
 					}
 				}
 			}
@@ -233,9 +236,11 @@ export function SpecSearchDialog({ open, onOpenChange }: Props) {
 
 								{hasSpecResults &&
 									specResults.map((result, idx) => (
-										<Link
+										<a
 											key={result.id}
-											to={result.url}
+											href={result.pdfUrl || "#"}
+											target="_blank"
+											rel="noopener noreferrer"
 											onClick={() => onOpenChange(false)}
 											data-selected={idx === selectedIndex}
 											onMouseEnter={() => setSelectedIndex(idx)}
@@ -246,8 +251,8 @@ export function SpecSearchDialog({ open, onOpenChange }: Props) {
 													: "hover:bg-[var(--color-bg-secondary)]",
 											)}
 										>
-											<span className="text-sm text-[var(--color-text-muted)] font-mono w-24 flex-shrink-0">
-												{result.sectionId}
+											<span className="text-sm text-[var(--color-text-muted)] font-mono w-20 flex-shrink-0">
+												§ {result.sectionId}
 											</span>
 											<div className="min-w-0 flex-1">
 												<div className="font-medium text-[var(--color-text-primary)]">
@@ -259,7 +264,15 @@ export function SpecSearchDialog({ open, onOpenChange }: Props) {
 													</div>
 												)}
 											</div>
-										</Link>
+											<div className="flex items-center gap-2 flex-shrink-0">
+												{result.pageNumber && (
+													<span className="text-xs text-red-700 bg-red-100 px-2 py-0.5 rounded">
+														Page {result.pageNumber}
+													</span>
+												)}
+												<ExternalLink size={14} className="text-[var(--color-text-muted)]" />
+											</div>
+										</a>
 									))}
 
 								{!isLoading && !hasSpecResults && specSearchTriggered && (
diff --git a/apps/web/src/hooks/useSpecSearch.ts b/apps/web/src/hooks/useSpecSearch.ts
@@ -9,21 +9,32 @@ interface MCPSearchResult {
 	title: string | null;
 	content: string;
 	contentType: string;
+	pageNumber: number | null;
 	score: number;
 }
 
+// PDF URLs for each part (hosted on our CDN)
+const PDF_URLS: Record<number, string> = {
+	1: "https://cdn.ooxml.dev/ecma-376/part1.pdf",
+	2: "https://cdn.ooxml.dev/ecma-376/part2.pdf",
+	3: "https://cdn.ooxml.dev/ecma-376/part3.pdf",
+	4: "https://cdn.ooxml.dev/ecma-376/part4.pdf",
+};
+
 interface MCPSearchResponse {
 	query: string;
 	results: MCPSearchResult[];
 }
 
-// Extended result type with section ID for display
+// Extended result type with section ID and PDF link
 export interface SpecSearchResult {
 	id: string;
-	url: string;
 	sectionId: string;
 	title: string;
 	description?: string;
+	partNumber: number;
+	pageNumber: number | null;
+	pdfUrl: string | null;
 }
 
 // Local docs search result
@@ -117,20 +128,28 @@ export function useSpecSearch() {
 		setSpecSearchTriggered(true);
 
 		try {
-			const res = await fetch("https://api.ooxml.dev/search", {
+			const res = await fetch(`${import.meta.env.VITE_API_URL}/search`, {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
 				body: JSON.stringify({ query, limit: 10 }),
 			});
 			const data: MCPSearchResponse = await res.json();
 
-			const transformed: SpecSearchResult[] = data.results.map((r) => ({
-				id: `spec-${r.id}`,
-				url: r.sectionId ? `/docs/${r.sectionId}` : "#",
-				sectionId: r.sectionId || "",
-				title: r.title || r.content.slice(0, 60),
-				description: r.title ? r.content.slice(0, 80) : undefined,
-			}));
+			const transformed: SpecSearchResult[] = data.results.map((r) => {
+				const pdfBase = PDF_URLS[r.partNumber];
+				const pdfUrl =
+					pdfBase && r.pageNumber ? `${pdfBase}#page=${r.pageNumber}` : pdfBase || null;
+
+				return {
+					id: `spec-${r.id}`,
+					sectionId: r.sectionId || "",
+					title: r.title || r.content.slice(0, 60),
+					description: r.title ? r.content.slice(0, 80) : undefined,
+					partNumber: r.partNumber,
+					pageNumber: r.pageNumber,
+					pdfUrl,
+				};
+			});
 
 			setSpecResults(transformed);
 		} catch (err) {
diff --git a/apps/web/src/pages/Mcp.tsx b/apps/web/src/pages/Mcp.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import { Link } from "react-router-dom";
 import { Navbar } from "../components/Navbar";
 
-const MCP_ENDPOINT = "https://api.ooxml.dev/mcp";
+const MCP_ENDPOINT = `${import.meta.env.VITE_API_URL}/mcp`;
 const CLAUDE_COMMAND = `claude mcp add --transport http ecma-spec ${MCP_ENDPOINT}`;
 
 const TOOLS = [
diff --git a/db/schema.sql b/db/schema.sql
@@ -11,6 +11,7 @@ CREATE TABLE spec_content (
   title TEXT,
   content TEXT NOT NULL,
   content_type TEXT DEFAULT 'text',
+  page_number INT,
   embedding vector(1024),
   created_at TIMESTAMPTZ DEFAULT NOW()
 );
diff --git a/packages/shared/src/db/index.ts b/packages/shared/src/db/index.ts
@@ -16,13 +16,14 @@ export function createDbClient(connectionString: string) {
 		// Insert content
 		async insert(content: Omit<SpecContent, "id">) {
 			const [result] = await sql<[{ id: number }]>`
-				INSERT INTO spec_content (part_number, section_id, title, content, content_type, embedding)
+				INSERT INTO spec_content (part_number, section_id, title, content, content_type, page_number, embedding)
 				VALUES (
 					${content.partNumber},
 					${content.sectionId},
 					${content.title},
 					${content.content},
 					${content.contentType},
+					${content.pageNumber},
 					${content.embedding ? `[${content.embedding.join(",")}]` : null}
 				)
 				RETURNING id
@@ -38,6 +39,7 @@ export function createDbClient(connectionString: string) {
 				title: item.title,
 				content: item.content,
 				content_type: item.contentType,
+				page_number: item.pageNumber,
 				embedding: item.embedding ? `[${item.embedding.join(",")}]` : null,
 			}));
 
@@ -73,11 +75,12 @@ export function createDbClient(connectionString: string) {
 					title: string | null;
 					content: string;
 					content_type: string;
+					page_number: number | null;
 					score: number;
 				}>
 			>`
 				SELECT
-					id, part_number, section_id, title, content, content_type,
+					id, part_number, section_id, title, content, content_type, page_number,
 					1 - (embedding <=> ${embeddingStr}::vector) as score
 				FROM spec_content
 				WHERE embedding IS NOT NULL
@@ -94,6 +97,7 @@ export function createDbClient(connectionString: string) {
 				title: r.title,
 				content: r.content,
 				contentType: r.content_type,
+				pageNumber: r.page_number,
 				score: r.score,
 			}));
 		},
@@ -108,9 +112,10 @@ export function createDbClient(connectionString: string) {
 					title: string | null;
 					content: string;
 					content_type: string;
+					page_number: number | null;
 				}>
 			>`
-				SELECT id, part_number, section_id, title, content, content_type
+				SELECT id, part_number, section_id, title, content, content_type, page_number
 				FROM spec_content
 				WHERE part_number = ${partNumber} AND section_id = ${sectionId}
 				ORDER BY id
@@ -123,6 +128,7 @@ export function createDbClient(connectionString: string) {
 				title: r.title,
 				content: r.content,
 				contentType: r.content_type,
+				pageNumber: r.page_number,
 			}));
 		},
 
diff --git a/packages/shared/src/types/index.ts b/packages/shared/src/types/index.ts
@@ -7,6 +7,7 @@ export interface SpecContent {
 	title: string | null;
 	content: string;
 	contentType: string;
+	pageNumber: number | null;
 	embedding?: number[];
 }
 
diff --git a/scripts/ingest/extract-pdf.py b/scripts/ingest/extract-pdf.py
diff --git a/scripts/ingest/fix-page-numbers.py b/scripts/ingest/fix-page-numbers.py
diff --git a/scripts/ingest/upload.ts b/scripts/ingest/upload.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+# Production`
	`2`	`+VITE_API_URL=https://api.ooxml.dev`