feat: make version deployable

frontend/.gitignore

@@ -37,6 +37,6 @@ lerna-debug.log*
 *.sln
 *.sw?
 
-# Yarn
+# Yarn PnP
 .yarn/*
-!.yarn/releases
+.pnp.*

frontend/.yarnrc.yml

@@ -0,0 +1,7 @@
+nodeLinker: pnp
+
+packageExtensions:
+  "@builder.io/qwik@*":
+    dependencies:
+      ignore: "*"
+      semver: "*"

frontend/deploy.sh

@@ -0,0 +1,124 @@
+#!/bin/sh
+set -eu
+
+# Deployment topology with Nomad
+#
+# Directory structure on remote:
+#   $base/$project/
+#     releases/{stamp}_{hash}/
+#       dist/              - static assets served by nginx
+#       server/            - node server (entry.express.js)
+#       package.json       - dependencies
+#       node_modules/      - installed dependencies
+#       job.nomad.hcl      - nomad job definition for this release
+#     current -> releases/{latest}
+#
+# Zero-downtime deployment with Nomad:
+#   1. rsync new release (dist/ + server/)
+#   2. yarn install dependencies
+#   3. generate job file with release path
+#   4. nomad job run (triggers blue-green deployment)
+#   5. nomad waits for health checks to pass
+#   6. nomad auto-promotes new allocation
+#   7. old allocation enters graceful shutdown (30s kill_timeout)
+#   8. consul-template updates nginx config (via service tags)
+#   9. cleanup old releases (keep 5 most recent)
+
+ssh=deploy-peoplesgrocers-website
+base=/home/peoplesgrocers
+project=salience-editor-qwik-city
+
+test -d dist || { echo 'no dist/'; exit 1; }
+test -d server || { echo 'no server/'; exit 1; }
+# git diff-index --quiet HEAD || { echo 'git repo dirty'; exit 1; }
+
+hash=$(git rev-parse --short=8 HEAD)
+stamp=$(date +%Y-%b-%d-%a-%I_%M%p | tr 'APM' 'apm')
+release="${stamp}-${hash}"
+
+echo "deploying: $project @ $release"
+printf "continue? [y/n] "
+read ans
+test "$ans" = "y" || exit 1
+
+# prepare remote directories
+ssh $ssh "mkdir -p $base/$project/releases/$release"
+
+# sync all files using rclone (handles poor network connections better)
+echo "syncing release files (dist/, server/, package.json)..."
+temp_dir=$(mktemp -d)
+trap "rm -rf $temp_dir" EXIT INT TERM
+
+# Copy files to temp directory for single rclone transfer
+cp -r dist server package.json .yarnrc.yml "$temp_dir/"
+rclone copy "$temp_dir/" "${ssh}:$base/$project/releases/$release/" \
+  --progress --retries 10 --checksum
+
+rm -rf "$temp_dir"
+echo "installing server dependencies..."
+ssh $ssh "source ~/.nvm/nvm.sh && cd $base/$project/releases/$release && yarn install"
+
+# generate nomad job file with release path
+echo "generating nomad job file..."
+release_path="$base/$project/releases/$release"
+job_file="$base/$project/releases/$release/job.nomad.hcl"
+
+# Use envsubst with whitelist to only replace our variables, not Nomad runtime variables
+export RELEASE_PLACEHOLDER="$release"
+export RELEASE_PATH="$release_path"
+envsubst '$RELEASE_PLACEHOLDER $RELEASE_PATH' < salience-editor-qwik-city.nomad.hcl | ssh $ssh "cat > $job_file"
+
+echo ""
+echo "nomad job file created at: $job_file"
+echo ""
+
+# submit job to nomad
+echo "submitting job to nomad..."
+deployment_id=$(ssh $ssh "source ~/.local/bin/env && nomad job run $job_file | grep -oE 'Deployment ID = [a-f0-9-]+' | awk '{print \$4}'"  )
+
+if [ -n "$deployment_id" ]; then
+  echo "deployment started: $deployment_id"
+  echo ""
+  echo "monitoring deployment..."
+
+  # Monitor deployment status
+  ssh $ssh "source ~/.local/bin/env && nomad deployment status $deployment_id"
+
+  echo ""
+  printf "watch deployment progress? [y/n] "
+  read ans
+  if [ "$ans" = "y" ]; then
+    ssh $ssh "source ~/.local/bin/env && watch -n 2 'nomad deployment status $deployment_id'"
+  fi
+else
+  echo "warning: could not extract deployment ID"
+  echo "check deployment status manually with: nomad job status $project"
+fi
+
+# update current symlink
+echo ""
+printf "update current symlink? [y/n] "
+read ans
+if [ "$ans" = "y" ]; then
+  ssh $ssh "ln -sfn releases/$release $base/$project/current"
+  echo "current -> $release"
+fi
+
+echo ""
+echo "done: $release"
+echo ""
+echo "Next steps:"
+echo "- Nomad will automatically promote the deployment after health checks pass"
+echo "- Consul-template will update nginx config based on healthy service instances"
+echo "- Old allocation will gracefully shutdown (30s timeout for in-flight requests)"
+echo "- Run ./cleanup-old-releases.sh to remove old releases (keeps 5 most recent)"
+echo ""
+if [ -n "$deployment_id" ]; then
+  echo "Monitor deployment:"
+  echo "  nomad deployment status $deployment_id"
+  echo "  watch -n 2 'nomad deployment status $deployment_id'"
+  echo "  nomad job allocs $project"
+  echo ""
+fi
+echo "Check service health:"
+echo "  curl http://localhost:15500/v1/health/service/$project | jq"

frontend/package.json

@@ -59,5 +59,6 @@
     "prosemirror-transform": "^1.10.4",
     "prosemirror-view": "^1.41.3",
     "temml": "^0.11.11"
-  }
+  },
+  "packageManager": "yarn@4.11.0"
 }

frontend/salience-editor-qwik-city.nomad.hcl

@@ -0,0 +1,105 @@
+job "salience-editor-qwik-city" {
+  datacenters = ["ord10"]
+  type        = "service"
+
+  constraint {
+    attribute = "${node.unique.name}"
+    value     = "chicago-web01"
+  }
+
+  group "app" {
+    count = 1
+
+    network {
+      mode = "host"
+
+      port "http" {
+        # Nomad will assign an available port
+      }
+    }
+
+    # Blue-green deployment strategy using canary
+    update {
+      max_parallel      = 1
+      health_check      = "checks"
+      min_healthy_time  = "10s"
+      healthy_deadline  = "5m"
+      auto_promote      = true
+      auto_revert       = true
+      canary            = 1
+    }
+
+    task "node-server" {
+      driver = "raw_exec"
+
+      user = "peoplesgrocers"
+
+      config {
+        # Set working directory to release path
+        # RELEASE_PATH will be interpolated during deployment
+        work_dir = "$RELEASE_PATH"
+        command  = "/home/peoplesgrocers/.nvm/versions/node/v24.10.0/bin/yarn"
+        args     = ["node", "server/entry.express.js"]
+      }
+
+      # Template to set working directory path dynamically
+      # This will be replaced during deployment
+      env {
+        PORT   = "${NOMAD_PORT_http}"
+        ORIGIN = "https://peoplesgrocers.com"
+        PATH   = "/home/peoplesgrocers/.nvm/versions/node/v24.10.0/bin:/usr/local/bin:/usr/bin:/bin"
+        HOME   = "/home/peoplesgrocers"
+      }
+
+      # Release path set during deployment via envsubst
+      template {
+        data = <<EOH
+RELEASE_PATH="$RELEASE_PATH"
+EOH
+        destination = "local/env"
+        env         = true
+      }
+
+      resources {
+        cpu    = 500  # MHz
+        memory = 256  # MB
+      }
+
+      # Consul service registration with health check
+      service {
+        name = "salience-editor-qwik-city"
+        port = "http"
+
+        tags = [
+          "qwik-city",
+          "ssr",
+          "app"
+        ]
+
+        # Health check on dedicated health endpoint
+        check {
+          type     = "http"
+          path     = "/p/salience-editor/health"
+          interval = "10s"
+          timeout  = "2s"
+
+          check_restart {
+            limit = 3
+            grace = "10s"
+          }
+        }
+
+        # Service meta for nginx template filtering
+        meta {
+          version = "$RELEASE_PLACEHOLDER"
+        }
+      }
+
+      # Allow 30 seconds for graceful shutdown of in-flight requests
+      kill_timeout = "30s"
+
+      # Ensure node is available
+      kill_signal = "SIGTERM"
+    }
+  }
+}

frontend/src/entry.express.tsx

@@ -66,8 +66,8 @@ app.use(router);
 // Use Qwik City's 404 handler
 app.use(notFound);
 
-// Start the express server
-app.listen(PORT, '127.221.91.58', () => {
+// If I want to use this with nomad health checks, then I have to listen on 127.0.0.1
+app.listen(PORT, '127.0.0.1', () => {
   /* eslint-disable */
-  console.log(`Server started: http://127.221.91.58:${PORT}/`);
+  console.log(`Server started: http://127.0.0.1:${PORT}/`);
 });

frontend/src/routes/about/index.mdx

@@ -8,15 +8,16 @@ import { Math } from "~/components/math/math"
 
 A couple of days ago I came across
 [github.com/mattneary/salience](https://github.com/mattneary/salience) by Matt Neary. I thought it
-was quite neat how armed with a good understanding of math he was able to take sentence embeddings and in fewer lines of code
-than this introduction determine the significance of all sentences in a document.
+was quite neat how someone well armed with math can take sentence embeddings
+and determine the significance of all sentences in a document in fewer lines of
+code than my introduction paragraph here.
 
 This is not a description of [all the changes I made and extra book-keeping involved to turn Matt's script into a proper web app demo](/grunt-work).
 
 This post is an outsider's view of how Matt's salience code works. If you're
 already working with ML models in Python, this will feel torturously detailed.
 
-I'm going to be explaing everything 3 times, the equations a ML engineer would doodle out, the element by element matrix operations to give you feel for the dataflow, and the numpy code that implements it.
+My interest in this overly detailed style is, the equations a ML engineer would doodle out, the element by element matrix operations to give you feel for the dataflow, and the numpy code that implements it.
 
 When you see `sims /= norms.T` in numpy, I want to explain the matrix dimensions
 
@@ -66,21 +67,19 @@ Where:
 - <Math tex="D" /> = embedding dimension (768 for all-mpnet-base-v2, 1024 for gte-large-en-v1.5)
 - Each row represents one sentence in semantic space
 
-**Step 3a: Compute all dot products**
+First, compute all the dot products at once:
 
 <Math display tex="\mathbf{S} = \mathbf{E} \mathbf{E}^T" />
 
 Since <Math tex="\mathbf{E}" /> is <Math tex="N \times D" /> and <Math tex="\mathbf{E}^T" /> is <Math tex="D \times N" />, their product gives us an <Math tex="N \times N" /> matrix where entry <Math tex="S_{ij} = \mathbf{e}_i \cdot \mathbf{e}_j" />.
 
-**Step 3b: Compute the norms and normalize**
+Now we complete the cosine similarity formula by dividing each element by the product of the corresponding embedding norms:
 
-First, compute a vector of norms:
+<Math display tex="A_{ij} = \frac{S_{ij}}{\|\mathbf{e}_i\| \cdot \|\mathbf{e}_j\|}" />
 
-<Math display tex="\mathbf{n} = \begin{bmatrix} \|\mathbf{e}_1\| \\ \|\mathbf{e}_2\| \\ \|\mathbf{e}_3\| \\ \vdots \\ \|\mathbf{e}_N\| \end{bmatrix}" />
+This gives us the full adjacency matrix:
 
-This is an <Math tex="(N, 1)" /> vector where each element is the magnitude of one sentence's embedding. Now we need to visit every single element of <Math tex="\mathbf{S}" /> to make the adjacency matrix <Math tex="A_{ij} = \frac{S_{ij}}{n_i \cdot n_j}" />:
-
-<Math display tex="\mathbf{A} = \begin{bmatrix} \frac{S_{11}}{n_1 \cdot n_1} & \frac{S_{12}}{n_1 \cdot n_2} & \cdots & \frac{S_{1N}}{n_1 \cdot n_N} \\ \frac{S_{21}}{n_2 \cdot n_1} & \frac{S_{22}}{n_2 \cdot n_2} & \cdots & \frac{S_{2N}}{n_2 \cdot n_N} \\ \vdots & \vdots & \ddots & \vdots \\ \frac{S_{N1}}{n_N \cdot n_1} & \frac{S_{N2}}{n_N \cdot n_2} & \cdots & \frac{S_{NN}}{n_N \cdot n_N} \end{bmatrix}" />
+<Math display tex="\mathbf{A} = \begin{bmatrix} \frac{S_{11}}{\|\mathbf{e}_1\| \cdot \|\mathbf{e}_1\|} & \frac{S_{12}}{\|\mathbf{e}_1\| \cdot \|\mathbf{e}_2\|} & \cdots & \frac{S_{1N}}{\|\mathbf{e}_1\| \cdot \|\mathbf{e}_N\|} \\ \frac{S_{21}}{\|\mathbf{e}_2\| \cdot \|\mathbf{e}_1\|} & \frac{S_{22}}{\|\mathbf{e}_2\| \cdot \|\mathbf{e}_2\|} & \cdots & \frac{S_{2N}}{\|\mathbf{e}_2\| \cdot \|\mathbf{e}_N\|} \\ \vdots & \vdots & \ddots & \vdots \\ \frac{S_{N1}}{\|\mathbf{e}_N\| \cdot \|\mathbf{e}_1\|} & \frac{S_{N2}}{\|\mathbf{e}_N\| \cdot \|\mathbf{e}_2\|} & \cdots & \frac{S_{NN}}{\|\mathbf{e}_N\| \cdot \|\mathbf{e}_N\|} \end{bmatrix}" />
 
 **Quick benchmark:** For a <Math tex="194 \times 768" /> embeddings matrix (194 sentences):
 
@@ -99,7 +98,12 @@ def cos_sim(a):
     return sims
 ```
 
-The `keepdims=True` makes `norms` shape <Math tex="(N, 1)" /> instead of <Math tex="(N,)" />, which is crucial—when transposed, <Math tex="(N, 1)" /> becomes <Math tex="(1, N)" />, allowing the broadcasting to work for column-wise division.
+The `keepdims=True` makes `norms` shape <Math tex="(N, 1)" /> instead of <Math
+tex="(N,)" />, which is crucial. When transposed, <Math tex="(N, 1)" /> becomes
+<Math tex="(1, N)" />, allowing the broadcasting to work for column-wise
+division. Transpose does not do anything to the shape <Math tex="(N,)" />. I
+don't know why transpose works this way, but this seems like gotcha to look out
+for.
 
 
 ## Step 4: Clean Up the Graph
@@ -109,9 +113,15 @@ We make two adjustments to the adjacency matrix to make our TextRank work:
 1. **Remove self-loops:** Set diagonal to zero (<Math tex="A_{ii} = 0" />)
 2. **Remove negative edges:** Set <Math tex="A_{ij} = \max(0, A_{ij})" />
    
-A sentence shouldn't vote for its own importance. And sentences with opposite meanings get disconnected.
-
-**Important assumption:** This assumes your document has a coherent main idea and that sentences are generally on-topic. We're betting that the topic with the most "semantic mass" is the *correct* topic. This is obviously not true for many documents:
+A sentence shouldn't vote for its own importance. And sentences with opposite
+meanings get disconnected. I'll grant you 2) seems like a bit of a leap. I'll
+grant you that, as my understanding is the real reason we zero out negative
+entries is the normalization algorithm we want to use does not work with
+negative edges. Thus we worked backwards from the available normlization
+algorithms to handwave an assumption your document has a coherent main idea and
+that sentences are generally on-topic. We're betting that the topic with the
+most "semantic mass" is the *correct* topic. This is obviously not true for
+many documents:
 
 - Dialectical essays that deliberately contrast opposing viewpoints
 - Documents heavy with quotes that argue against something
@@ -120,9 +130,20 @@ A sentence shouldn't vote for its own importance. And sentences with opposite me
 
 For example: "Nuclear power is dangerous. Critics say it causes meltdowns [...]. However, modern reactors are actually very safe."
 
-The algorithm might highlight the criticism because multiple sentences cluster around "danger", even though the document's actual position is pro-nuclear. There's nothing inherent in the math that identifies authorial intent vs. quoted opposition.
+The algorithm might highlight the criticism because multiple sentences cluster
+around "danger", even though the document's actual position is pro-nuclear.
+There's nothing inherent in the math that identifies authorial intent vs.
+quoted opposition.
 
-**Bottom line:** This technique works well for coherent, single-perspective documents. It can fail when multiple competing viewpoints have similar semantic weight.
+Reflecting on my personal use cases, basically all documents I would run
+through such a tool to edit for compactness will be single topic persuasive
+essays. We should X. Its very unlikely I'll be able to indulge my penchant for
+dialetical essays at work.
+
+Basically just keep in mind that we've made a pretty big foundational
+assumption that can fail when multiple competing viewpoints have similar
+semantic weight and the demo gives you no visual indication or warning this has
+happened.
 
 ## Step 5: Normalize the Adjacency Matrix
 
@@ -145,34 +166,39 @@ The result is a diagonal matrix that looks like:
 
 Now we use <Math tex="\mathbf{D}" /> to normalize <Math tex="\mathbf{A}" />. There are two approaches:
 
-Traditional normalization <Math tex="\mathbf{D}^{-1} \mathbf{A}" />:
+Traditional normalization <Math tex="\tilde{\mathbf{A}} = \mathbf{D}^{-1} \mathbf{A}" />:
   - This creates a row-stochastic matrix (rows sum to 1)
   - Interpretation: "If I'm at sentence <Math tex="i" />, what's the probability of jumping to sentence <Math tex="j" />?"
   - This is like a proper Markov chain transition matrix
   - Used in standard PageRank and TextRank
+  - Supports **directed** graphs, a property useful for modeling web page
+    navigation (page A links to B but B does not link back to A), but we don't
+    actually need for sentence similarity where similarity of A to B is exactly
+    the same value as B to A.
 
-Spectral normalization <Math tex="\mathbf{D}^{-1/2} \mathbf{A} \mathbf{D}^{-1/2}" />:
-  - Used in spectral clustering and graph analysis
+Spectral normalization <Math tex="\tilde{\mathbf{A}} = \mathbf{D}^{-1/2} \mathbf{A} \mathbf{D}^{-1/2}" />:
+  - Treats the graph as **unidirected** (hey! that's us)
   - Symmetry preservation: if A is symmetric (which cosine similarity matrix is), then the normalized version
   stays symmetric
   - The eigenvalues are bounded in [-1, 1]
   - More uniform influence from all neighbors
   - Better numerical properties for exponentiation
 
+With traditional normalization, sentences with many connections get their
+influence diluted. A sentence connected to 10 others splits its "voting power"
+into 10 pieces. A sentence connected to 2 others splits its power into just 2
+pieces. This creates a bias against well-connected sentences.
 
-The traditional <Math tex="\mathbf{D}^{-1} \mathbf{A}" /> approach introduces potential node bias and lacks symmetry. Spectral normalization
-provides a more balanced representation by symmetrizing the adjacency matrix and ensuring more uniform
-neighbor influence. This method prevents high-degree nodes from dominating the graph's structure, creating a
-more equitable information propagation mechanism.
+Spectral normalization solves this problem. Well-connected sentences keep their
+influence proportional to connectivity. 
 
-With traditional normalization, sentences with many connections get their influence diluted. A sentence connected to 10 others splits its "voting power" into 10 pieces. A sentence connected to 2 others splits its power into just 2 pieces. This creates a bias against well-connected sentences.
-
-Spectral normalization treats the graph as **undirected**, which matches how
-semantic similarity works. Well-connected sentences keep their influence
-proportional to connectivity. Two sentences that are similar to each other
-should have equal influence on each other, not asymmetric transition
-probabilities.
+I asked a ML engineer to explain the same idea to give you a
+Rosetta Stone to understand their jaron.
 
+> The traditional <Math tex="\mathbf{D}^{-1} \mathbf{A}" /> approach introduces potential node bias and lacks symmetry. Spectral normalization
+> provides a more balanced representation by symmetrizing the adjacency matrix and ensuring more uniform
+> neighbor influence. This method prevents high-degree nodes from dominating the graph's structure, creating a
+> more equitable information propagation mechanism.
 
 ## Step 6: Random Walk Simulation
 
@@ -187,15 +213,35 @@ Where:
 
 **Intuition:** After <Math tex="k" /> steps of random walking through the similarity graph, which sentences have we visited most? Those are the central, important sentences.
 
+You might think we'd need to exponentiate the matrix—compute <Math tex="\tilde{\mathbf{A}}^k" /> first, then multiply by <Math tex="\mathbf{1}^T" />. But there's a trick here. Since <Math tex="\mathbf{1}^T" /> is just a row vector of all ones (shape <Math tex="1 \times N" />), we can evaluate the expression left-to-right:
+
+<Math display tex="\mathbf{s} = ((\mathbf{1}^T \tilde{\mathbf{A}}) \tilde{\mathbf{A}}) \tilde{\mathbf{A}} \cdots" />
+
+Each step is vector times matrix, which produces another vector. So we're doing <Math tex="k" /> iterations of vector-matrix multiplication, where each one is <Math tex="N^2" /> operations. Total cost: <Math tex="kN^2" />.
+
+If we were exponentiating the matrix instead, we'd be doing matrix-matrix multiplication (<Math tex="N^3" /> operations per step). Since <Math tex="k" /> is small (say only 5 or 10) it's way more efficient to just evaluate left-to-right and keep passing a vector through. For a document with 200 sentences and <Math tex="k=5" />, that's roughly 200,000 operations instead of 8,000,000. A 40× speedup!
+
+The choice of <Math tex="k" /> is important. A small <Math tex="k" /> (5-10 steps) means the random walk doesn't go very far. A sentence's importance is determined by its immediate neighborhood in the similarity graph. A large <Math tex="k" /> (letting it converge, like PageRank does) means influence propagates across the entire document, and you end up with only the sentences most central to the document's single main theme ranking highly.
+
+For editing, we want the local structure. Documents aren't monolithic. Different paragraphs discuss different aspects of the topic. We want to see which sentences matter within their local context, not just identify the 3-5 globally most central sentences. So we use a small <Math tex="k" /> and deliberately stop before convergence.
+
+As a bonus, this not-fully-converged state also happens to be computationally cheaper.
+
 ## Step 7: Map Scores to Highlight Colors
 
 Now we have a vector of raw salience scores from the random walk. Problem: these scores have no physical meaning. Different embedding models produce wildly different ranges:
-- Model A on Doc 1: `[0.461, 1.231]`
-- Model B on Doc 2: `[0.892, 1.059]`
+- Model A on Doc 1: scores range from 0.461 to 1.231
+- Model B on Doc 1: scores range from 0.892 to 1.059
 
 We need to turn this vector of arbitrary numbers into CSS highlight opacities in `[0, 1]`. Here's the reasoning behind creating the remapping function:
 
-I could do trivial linear scaling - multiply by a constant to get scores into some range like <Math tex="X" /> to <Math tex="X + 2" />. But let's try to make the top sentences stand out more. One trick: exponentiation. Since human perception of brightness is not linear, exponentiation will preserve order but push the top values apart more. It makes the top few sentences really pop out.
+Since I'm using this for editing documents, it seems reasonable I would only want to see highlights on roughly half the sentences—throw half away. (Of course, the threshold is configurable in the settings panel.)
+
+Here's the idea: if we map scores into a range of size 2 (say, <Math tex="X" /> to <Math tex="X + 2" />), then we can threshold at the midpoint (<Math tex="X + 1" />). Sentences scoring <Math tex="X + 1" /> to <Math tex="X + 2" /> get highlighted.
+
+For a typical document, this gives you roughly 50% highlighted. But it's better than just hard-thresholding at exactly the top 50%: if 70% of sentences score above <Math tex="X + 1" />, maybe your document is just really on-topic and you don't need to cut as much. If only 30% score above <Math tex="X + 1" />, the document is scattered and only the truly central sentences get highlighted.
+
+I could do trivial linear scaling to get scores into the range <Math tex="X" /> to <Math tex="X + 2" />. But let's try to make the top sentences stand out more. One trick: exponentiation. Since human perception of brightness is not linear, exponentiation will preserve order but push the top values apart more. It makes the top few sentences really pop out.
 
 **Building the remapping function**
 
@@ -205,9 +251,9 @@ Given a salience vector <Math tex="\mathbf{s}" /> with values ranging from <Math
 
    Sure, it takes more work to find the right exponent for our target spread of 2, but that's still easy with a simple solver.
 
-2. **Find a threshold** <Math tex="\tau" /> such that 50% of the sentences get clamped to zero.
+2. **Set the threshold** <Math tex="\tau" /> at the midpoint of the remapped range.
 
-   Since I'm using this for editing documents, I only want to see highlights on roughly half the sentences—the important half.
+   This is where we draw the line between highlighted and non-highlighted sentences.
 
 The final opacity mapping is:
 

frontend/src/routes/health/index.ts

@@ -0,0 +1,9 @@
+import type { RequestHandler } from "@builder.io/qwik-city";
+
+export const onGet: RequestHandler = async ({ json }) => {
+  json(200, {
+    status: "ok",
+    wizard: "harry",
+    timestamp: new Date().toISOString(),
+  });
+};

frontend/src/routes/index.tsx

@@ -319,7 +319,7 @@ export default component$(() => {
           <span class="subtitle">
             sentence highlights based on their significance to the document
           </span>
-          <a href="/about" class="about-link">How it works →</a>
+          <a href="./about" class="about-link">How it works →</a>
         </h1>
         <div class="controls">
           <label for="model-select">Model:</label>