From a4a34e46a8cd0b37a9c1cec5544bb451ff192266 Mon Sep 17 00:00:00 2001
From: Chris Coutinho <chris@coutinho.io>
Date: Tue, 16 Dec 2025 01:29:42 +0100
Subject: [PATCH] feat: make chunk modal title clickable link to documents
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add clickable link to modal title with OpenInNew icon
- Store currentResult to enable document navigation
- Fix deck_card URLs to use metadata.board_id
- Fix news_item URLs to use external article URL from metadata.url
- Add hover styling for title link and icon

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 third_party/astrolabe/composer.lock |  2 +-
 third_party/astrolabe/src/App.vue   | 49 +++++++++++++++++++++++++++--
 2 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/third_party/astrolabe/composer.lock b/third_party/astrolabe/composer.lock
index c9155ff..9a2db16 100644
--- a/third_party/astrolabe/composer.lock
+++ b/third_party/astrolabe/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "45fea22a5899837fbb1007b2b321a2aa",
+    "content-hash": "9a07fd98e858321235b781204a3de248",
     "packages": [
         {
             "name": "bamarni/composer-bin-plugin",
diff --git a/third_party/astrolabe/src/App.vue b/third_party/astrolabe/src/App.vue
index 0ef1f74..3ecf271 100644
--- a/third_party/astrolabe/src/App.vue
+++ b/third_party/astrolabe/src/App.vue
@@ -294,7 +294,17 @@
 			<div class="mcp-modal">
 				<!-- Fixed Header -->
 				<div class="mcp-modal-header">
-					<h3>{{ viewerTitle }}</h3>
+					<h3>
+						<a
+							v-if="currentResult"
+							:href="getDocumentUrl(currentResult)"
+							class="mcp-modal-title-link"
+							@click.prevent="navigateToDocument(currentResult)">
+							{{ viewerTitle }}
+							<OpenInNew :size="16" class="mcp-modal-title-icon" />
+						</a>
+						<span v-else>{{ viewerTitle }}</span>
+					</h3>
 					<NcButton type="tertiary" @click="closeViewer">
 						<template #icon>
 							<Close :size="20" />
@@ -457,6 +467,7 @@ export default {
 			viewerPage: 1,
 			pdfTotalPages: 0,
 			currentPdfPath: '',
+			currentResult: null, // Store the current result for document linking
 			viewerContext: {
 				chunk: '',
 				before: '',
@@ -599,6 +610,7 @@ export default {
 		getDocumentUrl(result) {
 			const docType = result.doc_type || 'unknown'
 			const id = result.id || result.note_id
+			const metadata = result.metadata || {}
 
 			switch (docType) {
 			case 'note':
@@ -609,14 +621,18 @@ export default {
 				}
 				return generateUrl('/apps/files/')
 			case 'deck_card':
-				if (result.board_id && id) {
-					return generateUrl(`/apps/deck/board/${result.board_id}/card/${id}`)
+				if (metadata.board_id && id) {
+					return generateUrl(`/apps/deck/board/${metadata.board_id}/card/${id}`)
 				}
 				return generateUrl('/apps/deck/')
 			case 'calendar':
 			case 'calendar_event':
 				return generateUrl('/apps/calendar/')
 			case 'news_item':
+				// Use external article URL if available, otherwise fall back to News app
+				if (metadata.url) {
+					return metadata.url
+				}
 				return generateUrl('/apps/news/')
 			case 'contact':
 				return generateUrl('/apps/contacts/')
@@ -780,6 +796,7 @@ export default {
 			this.showViewer = true
 			this.viewerLoading = true
 			this.viewerTitle = result.title || 'Chunk Viewer'
+			this.currentResult = result // Store result for document linking
 
 			try {
 				// Fetch chunk context
@@ -853,6 +870,7 @@ export default {
 		closeViewer() {
 			this.showViewer = false
 			this.pdfTotalPages = 0
+			this.currentResult = null
 		},
 
 		handlePlotClick(eventData) {
@@ -1244,9 +1262,34 @@ a.mcp-result-title {
 		margin: 0;
 		font-size: 18px;
 		font-weight: 600;
+		flex: 1;
+		min-width: 0; // Allow text truncation if needed
 	}
 }
 
+.mcp-modal-title-link {
+	color: var(--color-main-text);
+	text-decoration: none;
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	transition: color 0.15s;
+
+	&:hover {
+		color: var(--color-primary-element);
+
+		.mcp-modal-title-icon {
+			opacity: 1;
+		}
+	}
+}
+
+.mcp-modal-title-icon {
+	opacity: 0.5;
+	transition: opacity 0.15s;
+	flex-shrink: 0;
+}
+
 .mcp-modal-body {
 	flex: 1;
 	overflow: auto;