From f628d570924df2816447ee89980080cd7f3c61a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=7BAI=7Df=20D=2E=20M=C3=BCller?=
 <ralf.d.mueller+AI@gmail.com>
Date: Fri, 12 Jun 2026 15:26:09 +0200
Subject: [PATCH] fix: link SPA contract-card titles to the new detail pages
 (#611)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The static (no-JS) contracts fragment linked card titles to
/contract/<id>, but the SPA replaces those cards on hydration with
contracts-page.js markup whose titles were plain text — so with
JavaScript enabled there was no visible way to reach or copy a
contract link. Card titles are now links (the card's click-to-select
handler already ignores clicks on <a> elements); localized tooltip
added in EN and DE.

Verified in the hydrated preview via Playwright: all 19 card titles
link to their detail pages, and a direct /contract/specification URL
titles the tab and scrolls to the card.

Refs #611

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 website/src/components/contracts-page.js      |  4 +--
 website/src/components/contracts-page.test.js | 26 +++++++++++++++++++
 website/src/translations/de.json              | 15 ++++++-----
 website/src/translations/en.json              | 11 ++++----
 4 files changed, 42 insertions(+), 14 deletions(-)
 create mode 100644 website/src/components/contracts-page.test.js

diff --git a/website/src/components/contracts-page.js b/website/src/components/contracts-page.js
index e4545bc..4bd9996 100644
--- a/website/src/components/contracts-page.js
+++ b/website/src/components/contracts-page.js
@@ -175,7 +175,7 @@ export function renderContractsPage() {
   `
 }
 
-function renderContractCard(contract, isSelected) {
+export function renderContractCard(contract, isSelected) {
   const title = getLocalizedField(contract, 'title')
   const description = getLocalizedField(contract, 'description')
   const template = getLocalizedField(contract, 'template')
@@ -213,7 +213,7 @@ function renderContractCard(contract, isSelected) {
           />
           <div class="flex-1 min-w-0">
             <div class="flex items-start justify-between gap-2 mb-1">
-              <h3 class="text-lg font-semibold text-[var(--color-text)]">${esc(title)}</h3>
+              <h3 class="text-lg font-semibold text-[var(--color-text)]"><a href="${import.meta.env.BASE_URL}contract/${esc(contract.id)}" class="hover:underline" title="${esc(i18n.t('contracts.permalink'))}">${esc(title)}</a></h3>
               <button
                 type="button"
                 class="contract-copy-btn shrink-0 inline-flex items-center justify-center rounded-md border border-[var(--color-border)] p-1.5 text-[var(--color-text-secondary)] hover:text-blue-600 hover:border-blue-300 dark:hover:text-blue-400 dark:hover:border-blue-700 transition-colors"
diff --git a/website/src/components/contracts-page.test.js b/website/src/components/contracts-page.test.js
new file mode 100644
index 0000000..7de6181
--- /dev/null
+++ b/website/src/components/contracts-page.test.js
@@ -0,0 +1,26 @@
+import { describe, it, expect, vi } from 'vitest'
+
+vi.mock('../i18n.js', () => ({
+  i18n: {
+    t: (key) => key,
+    currentLang: () => 'en',
+  },
+}))
+
+import { renderContractCard } from './contracts-page.js'
+
+describe('renderContractCard', () => {
+  const contract = {
+    id: 'specification',
+    title: 'Specification',
+    description: 'What we mean when we say spec',
+    template: '- Cockburn use cases\n- Gherkin',
+    anchors: ['cockburn-use-cases'],
+  }
+
+  it('links the card title to the contract detail page', () => {
+    const html = renderContractCard(contract, false)
+    expect(html).toContain(`href="${import.meta.env.BASE_URL}contract/specification"`)
+    expect(html).toMatch(/<a [^>]*contract\/specification[^>]*>Specification<\/a>/)
+  })
+})
diff --git a/website/src/translations/de.json b/website/src/translations/de.json
index 3061a99..1ed97c0 100644
--- a/website/src/translations/de.json
+++ b/website/src/translations/de.json
@@ -19,9 +19,10 @@
   "nav.categoryJump": "Zu Kategorie springen",
   "contracts.title": "Semantic Contracts",
   "contracts.explanation": "Semantic Anchors referenzieren öffentliches Wissen, das LLMs bereits kennen. Aber die Konventionen, Templates und Definitionen deines Teams? Dafür braucht es Semantic Contracts. Ein Contract definiert, was ein Begriff in deinem Projekt bedeutet — entweder durch Komposition etablierter Anker oder durch eigene Definitionen, die nur in deinem Team existieren. Wähle die passenden aus und lade sie für deine AGENTS.md oder CLAUDE.md herunter.",
-  "contracts.linkedinLink": "Lies die ganze Geschichte hinter Semantic Contracts auf LinkedIn \u2192",
+  "contracts.linkedinLink": "Lies die ganze Geschichte hinter Semantic Contracts auf LinkedIn →",
   "contracts.download": "Download",
   "contracts.copy": "Kopieren",
+  "contracts.permalink": "Direktlink zu diesem Contract",
   "contracts.copied": "Kopiert!",
   "contracts.copyOne": "Diesen Contract kopieren",
   "contracts.plainText": "Plain-Text-Version aller Contracts (contracts.txt) →",
@@ -121,13 +122,13 @@
   "modal.share": "Teilen",
   "onboarding.slogan1": "Semantic Anchors.",
   "onboarding.slogan2": "Ein Wort, und die KI versteht den Rest.",
-  "onboarding.text0": "Semantic Anchors l\u00e4dst du nicht herunter und installierst sie nicht. Sie stecken bereits in jedem modernen KI-Modell \u2014 du brauchst nur das richtige Wort.",
-  "onboarding.text1": "Stell dir vor, du sagst ein einziges Wort \u2013 und dein Gegen\u00fcber versteht sofort ein ganzes Konzept.",
-  "onboarding.text2": "Ein Semantic Anchor ist ein etablierter Begriff, der ein ganzes Wissensgebiet aktiviert. Wie ein Anker, der ein Schiff an einem festen Punkt h\u00e4lt \u2013 so verankert ein Semantic Anchor dein Gespr\u00e4ch an einem pr\u00e4zisen Konzept.",
-  "onboarding.text3": "Das funktioniert, weil KI-Modelle auf Millionen von Texten trainiert wurden. Begriffe wie MECE, Clean Architecture oder Feynman-Technik l\u00f6sen sofort tiefes Kontextwissen aus.",
-  "onboarding.text4": "Statt lange Prompts zu schreiben, sagst du einfach den richtigen Anker \u2013 und die KI liefert.",
+  "onboarding.text0": "Semantic Anchors lädst du nicht herunter und installierst sie nicht. Sie stecken bereits in jedem modernen KI-Modell — du brauchst nur das richtige Wort.",
+  "onboarding.text1": "Stell dir vor, du sagst ein einziges Wort – und dein Gegenüber versteht sofort ein ganzes Konzept.",
+  "onboarding.text2": "Ein Semantic Anchor ist ein etablierter Begriff, der ein ganzes Wissensgebiet aktiviert. Wie ein Anker, der ein Schiff an einem festen Punkt hält – so verankert ein Semantic Anchor dein Gespräch an einem präzisen Konzept.",
+  "onboarding.text3": "Das funktioniert, weil KI-Modelle auf Millionen von Texten trainiert wurden. Begriffe wie MECE, Clean Architecture oder Feynman-Technik lösen sofort tiefes Kontextwissen aus.",
+  "onboarding.text4": "Statt lange Prompts zu schreiben, sagst du einfach den richtigen Anker – und die KI liefert.",
   "onboarding.cta": "Katalog erkunden",
-  "onboarding.watchVideo": "Erkl\u00e4rvideo ansehen",
+  "onboarding.watchVideo": "Erklärvideo ansehen",
   "onboarding.infoButton": "Was sind Semantic Anchors?",
   "umbrella.subAnchors": "Patterns in dieser Sammlung",
   "umbrella.notAnAnchor": "(kein semantischer Anker)",
diff --git a/website/src/translations/en.json b/website/src/translations/en.json
index f45d03e..9f60813 100644
--- a/website/src/translations/en.json
+++ b/website/src/translations/en.json
@@ -19,9 +19,10 @@
   "nav.categoryJump": "Jump to category",
   "contracts.title": "Semantic Contracts",
   "contracts.explanation": "Semantic Anchors reference public knowledge that LLMs already understand. But your team's conventions, templates, and definitions? Those need Semantic Contracts. A contract defines what a term means in your project — either by composing established anchors or by providing custom definitions that only exist within your team. Select the ones that fit and download them for your AGENTS.md or CLAUDE.md.",
-  "contracts.linkedinLink": "Read the full story behind Semantic Contracts on LinkedIn \u2192",
+  "contracts.linkedinLink": "Read the full story behind Semantic Contracts on LinkedIn →",
   "contracts.download": "Download",
   "contracts.copy": "Copy",
+  "contracts.permalink": "Link to this contract",
   "contracts.copied": "Copied!",
   "contracts.copyOne": "Copy this contract",
   "contracts.plainText": "Plain-text version of all contracts (contracts.txt) →",
@@ -121,11 +122,11 @@
   "modal.share": "Share",
   "onboarding.slogan1": "Semantic Anchors.",
   "onboarding.slogan2": "One word, and the AI gets the rest.",
-  "onboarding.text0": "You don't download or install Semantic Anchors. They live inside any modern AI model \u2014 you just need the right word.",
-  "onboarding.text1": "Imagine saying just one word \u2013 and your counterpart instantly understands an entire concept.",
-  "onboarding.text2": "A Semantic Anchor is an established term that activates an entire body of knowledge. Like an anchor holding a ship in place \u2013 a Semantic Anchor pins your conversation to a precise concept.",
+  "onboarding.text0": "You don't download or install Semantic Anchors. They live inside any modern AI model — you just need the right word.",
+  "onboarding.text1": "Imagine saying just one word – and your counterpart instantly understands an entire concept.",
+  "onboarding.text2": "A Semantic Anchor is an established term that activates an entire body of knowledge. Like an anchor holding a ship in place – a Semantic Anchor pins your conversation to a precise concept.",
   "onboarding.text3": "This works because AI models were trained on millions of texts. Terms like MECE, Clean Architecture, or the Feynman Technique instantly trigger deep contextual knowledge.",
-  "onboarding.text4": "Instead of writing long prompts, just use the right anchor \u2013 and the AI delivers.",
+  "onboarding.text4": "Instead of writing long prompts, just use the right anchor – and the AI delivers.",
   "onboarding.cta": "Explore Catalog",
   "onboarding.watchVideo": "Watch explainer video",
   "onboarding.infoButton": "What are Semantic Anchors?",