From 75ad2d8c32fa043e3c7f28c833dcf1d637c6bd1e Mon Sep 17 00:00:00 2001
From: michaelkedar <michaelkedar@google.com>
Date: Wed, 5 Aug 2026 04:15:57 +0000
Subject: [PATCH 1/2] list page

---
 gcp/website/frontend3/src/go/base.html        |   2 +-
 .../frontend3/src/go/templates/list.html      | 189 +++++++++---------
 go/internal/models/vulnerability.go           |  16 ++
 go/internal/website/list.go                   | 112 ++++++++++-
 go/internal/website/list_models.go            | 178 +++++++++++++++++
 go/internal/website/list_models_test.go       | 184 +++++++++++++++++
 go/internal/website/list_test.go              |  76 +++++++
 go/internal/website/pagedata.go               |   1 +
 go/internal/website/server.go                 |   2 +
 go/internal/website/vulnerability_models.go   |   4 +-
 go/internal/website/vulnerability_view.go     | 148 ++++++++------
 11 files changed, 738 insertions(+), 174 deletions(-)
 create mode 100644 go/internal/website/list_models.go
 create mode 100644 go/internal/website/list_models_test.go
 create mode 100644 go/internal/website/list_test.go

diff --git a/gcp/website/frontend3/src/go/base.html b/gcp/website/frontend3/src/go/base.html
index 0fa7c3f770c..d7d4bbf70d5 100644
--- a/gcp/website/frontend3/src/go/base.html
+++ b/gcp/website/frontend3/src/go/base.html
@@ -29,7 +29,7 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@400;700&family=Overpass:ital,wght@0,400;0,700;1,400&display=swap">
   </noscript>
   <meta charset="utf-8">
-  <title id="title">OSV - Open Source Vulnerabilities</title>
+  <title id="title">{{ if .Title }}{{ .Title }}{{ else }}OSV - Open Source Vulnerabilities{{ end }}</title>
   <!-- Global site tag (gtag.js) - Google Analytics -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-ZXG9G6HTBR"></script>
   <script>
diff --git a/gcp/website/frontend3/src/go/templates/list.html b/gcp/website/frontend3/src/go/templates/list.html
index 77c2e20d99f..5d7bf9e9ea1 100644
--- a/gcp/website/frontend3/src/go/templates/list.html
+++ b/gcp/website/frontend3/src/go/templates/list.html
@@ -1,65 +1,36 @@
-{% extends 'base.html' %}
-{% set active_section = 'vulnerabilities' %}
-{% set disable_turbo_cache = 'true' %}
-
-{% macro table_header_cell(column_id, column_name, is_sortable, is_sorted, is_descending) %}
-<span class="vuln-table-cell mdc-data-table__header-cell vuln-table-header
-    {% if is_sortable %}mdc-data-table__header-cell--with-sort__DISABLED{% endif %}
-    {% if is_sorted %}mdc-data-table__header-cell--sorted{% endif %}
-    {% if is_descending %}mdc-data-table__header-cell--sorted-descending{% endif %}" role="columnheader" scope="col"
-  aria-sort="{% if is_sorted %}{% if is_descending %}descending{% else %}ascending{% endif %}{% else %}none{% endif %}"
-  data-column-id="{{ column_id }}">
-  <div class="mdc-data-table__header-cell-wrapper">
-    <div class="mdc-data-table__header-cell-label">
-      {{ column_name }}
-    </div>
-    {% if is_sorted %}
-    <md-icon-button class="mdc-data-table__sort-icon-button" disabled aria-label="Sorted by {{ column_name }}"
-      aria-describedby="{{ column_id }}-status-label">
-      <md-icon aria-hidden="false">arrow_upward</md-icon>
-    </md-icon-button>
-    <div class="mdc-data-table__sort-status-label" aria-hidden="true" id="{{ column_id }}-status-label">
-    </div>
-    {% endif %}
-  </div>
-</span>
-{% endmacro %}
-
-{% block content %}
+{{ define "content" }}
 <div class="list-page">
   <div class="mdc-layout-grid">
     <div class="mdc-layout-grid__inner">
       <div class="mdc-layout-grid__cell--span-12">
         <h1 class="title">Vulnerabilities</h1>
         <div class="search">
-          <form action="{{ url_for('frontend_handlers.list_vulnerabilities') }}" data-turbo-frame="vulnerability-table">
+          <form action="/list" data-turbo-frame="vulnerability-table">
             <div class="mdc-layout-grid__inner">
               <div class="query-container search-suggestions-container mdc-layout-grid__cell--span-8">
                 <md-textfield-with-suggestions label="Package or ID search" class="query-field" type="search" name="q"
-                  value="{{ query }}" maxlength="300">
+                  value="{{ .Query }}" maxlength="300">
                   <md-icon slot="leading-icon" aria-hidden="false">search</md-icon>
                 </md-textfield-with-suggestions>
               </div>
             </div>
             <submit-radios>
-              {% if ecosystem_counts %}
+              {{ if .EcosystemCounts }}
               <div class="ecosystem-buttons">
-                <input type="radio" name="ecosystem" id="ecosystem-radio-all" value="" {% if not selected_ecosystem %}
-                  checked{% endif %}>
+                <input type="radio" name="ecosystem" id="ecosystem-radio-all" value="" {{ if not .SelectedEcosystem }}checked{{ end }}>
                 <label class="ecosystem-label ecosystem-label-all" for="ecosystem-radio-all">
                   <span class="ecosystem-name">All ecosystems</span>
-                  <span class="ecosystem-count">{{ ecosystem_counts.values() | sum }}</span>
+                  <span class="ecosystem-count">{{ .TotalEcosystemCount }}</span>
                 </label>
-                {% for ecosystem in ecosystem_counts %}
-                <input type="radio" name="ecosystem" id="ecosystem-radio-{{ loop.index }}" value="{{ ecosystem }}" {%
-                  if selected_ecosystem==ecosystem %} checked{% endif %}>
-                <label class="ecosystem-label" for="ecosystem-radio-{{ loop.index }}">
-                  <span class="ecosystem-name">{{ ecosystem }}</span>
-                  <span class="ecosystem-count">{{ ecosystem_counts[ecosystem] }}</span>
+                {{ range $i, $eco := .EcosystemCounts }}
+                <input type="radio" name="ecosystem" id="ecosystem-radio-{{ $i }}" value="{{ $eco.Name }}" {{ if eq $.SelectedEcosystem $eco.Name }}checked{{ end }}>
+                <label class="ecosystem-label" for="ecosystem-radio-{{ $i }}">
+                  <span class="ecosystem-name">{{ $eco.Name }}</span>
+                  <span class="ecosystem-count">{{ $eco.Count }}</span>
                 </label>
-                {% endfor %}
+                {{ end }}
               </div>
-              {% endif %}
+              {{ end }}
             </submit-radios>
             <input type="submit">
           </form>
@@ -67,100 +38,118 @@ <h1 class="title">Vulnerabilities</h1>
       </div>
     </div>
   </div>
-  <turbo-frame class="vuln-table-container mdc-data-table" id="vulnerability-table" data-turbo-action="advance">
+  <turbo-frame class="vuln-table-container mdc-data-table" id="vulnerability-table" data-turbo-action="advance" data-title="{{ if .SelectedEcosystem }}{{ .SelectedEcosystem }} - OSV{{ else }}Vulnerability Database - OSV{{ end }}">
     <div role="table" class="vuln-table mdc-data-table__table" aria-label="Vulnerability table">
       <div role="rowgroup" class="vuln-table-header">
         <div role="row" class="vuln-table-row mdc-data-table__header-row">
-          {{ table_header_cell('id', 'ID', is_sortable=False, is_sorted=False, is_descending=False) }}
-          {{ table_header_cell('package', 'Packages', is_sortable=False, is_sorted=False, is_descending=False) }}
-          {{ table_header_cell('summary', 'Summary', is_sortable=False, is_sorted=False, is_descending=False) }}
-          {{ table_header_cell('published', 'Published', is_sortable=True, is_sorted=True, is_descending=True) }}
-          {{ table_header_cell('attributes', 'Attributes', is_sortable=False, is_sorted=False, is_descending=False) }}
+          <span class="vuln-table-cell mdc-data-table__header-cell vuln-table-header" role="columnheader" scope="col" aria-sort="none" data-column-id="id">
+            <div class="mdc-data-table__header-cell-wrapper">
+              <div class="mdc-data-table__header-cell-label">ID</div>
+            </div>
+          </span>
+          <span class="vuln-table-cell mdc-data-table__header-cell vuln-table-header" role="columnheader" scope="col" aria-sort="none" data-column-id="package">
+            <div class="mdc-data-table__header-cell-wrapper">
+              <div class="mdc-data-table__header-cell-label">Packages</div>
+            </div>
+          </span>
+          <span class="vuln-table-cell mdc-data-table__header-cell vuln-table-header" role="columnheader" scope="col" aria-sort="none" data-column-id="summary">
+            <div class="mdc-data-table__header-cell-wrapper">
+              <div class="mdc-data-table__header-cell-label">Summary</div>
+            </div>
+          </span>
+          <span class="vuln-table-cell mdc-data-table__header-cell vuln-table-header mdc-data-table__header-cell--sorted mdc-data-table__header-cell--sorted-descending" role="columnheader" scope="col" aria-sort="descending" data-column-id="published">
+            <div class="mdc-data-table__header-cell-wrapper">
+              <div class="mdc-data-table__header-cell-label">Published</div>
+              <md-icon-button class="mdc-data-table__sort-icon-button" disabled aria-label="Sorted by Published">
+                <md-icon aria-hidden="false">arrow_upward</md-icon>
+              </md-icon-button>
+            </div>
+          </span>
+          <span class="vuln-table-cell mdc-data-table__header-cell vuln-table-header" role="columnheader" scope="col" aria-sort="none" data-column-id="attributes">
+            <div class="mdc-data-table__header-cell-wrapper">
+              <div class="mdc-data-table__header-cell-label">Attributes</div>
+            </div>
+          </span>
         </div>
       </div>
       <div role="rowgroup" class="vuln-table-rows mdc-data-table__content">
-        <turbo-frame id="vulnerability-table-page{{ page }}" data-turbo-action="advance" target="_top">
-          {% for vulnerability in vulnerabilities %}
+        <turbo-frame id="vulnerability-table-page{{ .Page }}" data-turbo-action="advance" target="_top">
+          {{ range .Vulnerabilities }}
           <div role="row" class="vuln-table-row mdc-data-table__row">
             <span role="cell" class="vuln-table-cell mdc-data-table__cell">
-              <a href="{{ url_for('frontend_handlers.vulnerability', vuln_id=vulnerability.id) }}">{{ vulnerability.id
-                }}</a>
+              <a href="/vulnerability/{{ .ID }}">{{ .ID }}</a>
             </span>
             <span role="cell" class="vuln-table-cell vuln-packages mdc-data-table__cell">
               <ul class="packages">
-                {% for package in vulnerability.packages[:5] %}
-                  <li>{{ package }}</li>
-                {% endfor %}
-                {% if vulnerability.packages|length > 5 %}
-                 {% set remainingPkgCount = vulnerability.packages|length - 5 %}
-                  <li class="remaining-packages">... {{ remainingPkgCount }} more</li>
-                {% elif vulnerability.packages|length == 0 %}
+                {{ range .DisplayPackages }}
+                  <li>{{ . }}</li>
+                {{ end }}
+                {{ if gt .RemainingPackageCount 0 }}
+                  <li class="remaining-packages">... {{ .RemainingPackageCount }} more</li>
+                {{ else if eq (len .Packages) 0 }}
                   <li>Not specified</li>
-                {% endif %}
+                {{ end }}
               </ul>
             </span>
             <span role="cell" class="vuln-table-cell vuln-summary mdc-data-table__cell">
-              {% if vulnerability.summary %}
-                {{ vulnerability.summary | literal_backticks }}
-              {% else %}
+              {{ if .Summary }}
+                {{ .Summary }}
+              {{ else }}
                 See record for full details
-              {% endif %}
+              {{ end }}
             </span>
             <span role="cell" class="vuln-table-cell mdc-data-table__cell">
-              <relative-time datetime="{{ vulnerability.published }}">
-                {{ vulnerability.published | relative_time }}
+              <relative-time datetime="{{ .FormattedPublished }}">
+                {{ .RelativePublished }}
               </relative-time>
             </span>
             <span role="cell" class="vuln-table-cell vuln-attributes mdc-data-table__cell">
               <ul class="tags">
                 <li>
-                  {%- if vulnerability.is_fixed -%}
+                  {{ if .IsFixed }}
                   <span class="tag fix-available">Fix available</span>
-                  {%- else -%}
+                  {{ else }}
                   <span class="tag fix-unavailable">No fix available</span>
-                  {%- endif -%}
+                  {{ end }}
                 </li>
-                {%- if vulnerability.severity_score and vulnerability.severity_rating -%}
+                {{ with .PrimarySeverity }}
                 <li>
-                  <span class="tag severity-{{ vulnerability.severity_rating | lower }}">Severity - {{
-                    vulnerability.severity_score }} ({{ vulnerability.severity_rating }})</span>
+                  <span class="tag severity-{{ .Level }}">Severity - {{ .Rating }}</span>
                 </li>
-                {%- endif -%}
+                {{ end }}
               </ul>
             </span>
           </div>
-          {%- endfor -%}
-          {%- if vulnerabilities | length == 0 -%}
+          {{ end }}
+          {{ if eq (len .Vulnerabilities) 0 }}
           <span class="no-results">No results (check our <a href="https://google.github.io/osv.dev/faq/">FAQ</a> if this is unexpected)</span>
-          {%- endif -%}
-          {%- if page < total_pages -%} <turbo-frame id="vulnerability-table-page{{ page + 1 }}"
-            data-turbo-action="advance" target="_top" class="next-page-frame">
+          {{ end }}
+          {{ if lt .Page .TotalPages }}
+          <turbo-frame id="vulnerability-table-page{{ add .Page 1 }}" data-turbo-action="advance" target="_top" class="next-page-frame">
             <div class="next-page-container">
-              <a class="next-page-button link-button" data-turbo-frame="_self" href="{{ url_for(request.endpoint) }}?page={{ page + 1 }}
-                  {%- if query %}&q={{ query }}{% endif %}
-                  {%- if selected_ecosystem %}&ecosystem={{ selected_ecosystem }}{% endif %}">
+              <a class="next-page-button link-button" data-turbo-frame="_self" href="/list?page={{ add .Page 1 }}{{ if $.Query }}&q={{ $.EncodedQuery }}{{ end }}{{ if $.SelectedEcosystem }}&ecosystem={{ $.EncodedEcosystem }}{{ end }}">
                 <span>Load more...</span>
-                {%- if total_pages - page <= 3 -%} <span style="margin-left: 5px">({{ total_pages - page }} page{% if
-                  total_pages - page > 1 %}s{% endif %} left)</span>
-                  {%- endif -%}
+                {{ $pagesLeft := sub $.TotalPages $.Page }}
+                {{ if le $pagesLeft 3 }}
+                <span style="margin-left: 5px">({{ $pagesLeft }} page{{ if gt $pagesLeft 1 }}s{{ end }} left)</span>
+                {{ end }}
               </a>
-              <md-circular-progress class="next-page-indicator" indeterminate density="-4"
-                aria-label="Page loading progress"></md-circular-progress>
+              <md-circular-progress class="next-page-indicator" indeterminate density="-4" aria-label="Page loading progress"></md-circular-progress>
             </div>
+          </turbo-frame>
+          {{ end }}
         </turbo-frame>
-        {%- endif -%}
+      </div>
+    </div>
+  <turbo-stream action="update" target="title">
+    <template>
+      {{ if .SelectedEcosystem }}
+      {{ .SelectedEcosystem }} - OSV
+      {{ else }}
+      Vulnerability Database - OSV
+      {{ end }}
+    </template>
+  </turbo-stream>
   </turbo-frame>
 </div>
-</div>
-<turbo-stream action="update" target="title">
-  <template>
-    {% if selected_ecosystem %}
-    {{ selected_ecosystem }} - OSV
-    {% else %}
-    Vulnerability Database - OSV
-    {% endif %}
-  </template>
-</turbo-stream>
-</turbo-frame>
-</div>
-{% endblock %}
+{{ end }}
diff --git a/go/internal/models/vulnerability.go b/go/internal/models/vulnerability.go
index 906e1f93a0b..36b4a0c521f 100644
--- a/go/internal/models/vulnerability.go
+++ b/go/internal/models/vulnerability.go
@@ -18,6 +18,22 @@ type VulnSourceRef struct {
 	ModifiedRaw time.Time
 }
 
+// Package represents an affected package or Git repository reference.
+type Package struct {
+	Package *osvschema.Package
+	Repo    string
+}
+
+// ListedVulnerability represents a vulnerability entry used for rendering the website list page.
+type ListedVulnerability struct {
+	ID         string
+	Published  time.Time
+	Packages   []Package
+	Summary    string
+	IsFixed    bool
+	Severities []*osvschema.Severity
+}
+
 // WriteRequest bundles everything needed to perform a permanent update to an OSV record.
 type WriteRequest struct {
 	ID              string
diff --git a/go/internal/website/list.go b/go/internal/website/list.go
index 22439e25f4a..3131b0f09d9 100644
--- a/go/internal/website/list.go
+++ b/go/internal/website/list.go
@@ -1,20 +1,122 @@
 package website
 
 import (
-	"fmt"
 	"net/http"
+	"strconv"
+	"strings"
+	"time"
+
+	"github.com/google/osv.dev/go/internal/models"
+	"github.com/ossf/osv-schema/bindings/go/osvschema"
 )
 
+const vulnsPerPage = 16
+
 // handleList handles rendering the vulnerability listing page and backing paginated list queries.
 // Query parameters:
 //   - q: search query string
 //   - ecosystem: ecosystem filter
 //   - page: page number
 func (s *Server) handleList(w http.ResponseWriter, r *http.Request) {
-	q := r.URL.Query().Get("q")
+	q := strings.TrimSpace(r.URL.Query().Get("q"))
 	ecosystem := r.URL.Query().Get("ecosystem")
-	page := r.URL.Query().Get("page")
+	pageStr := r.URL.Query().Get("page")
+	isTurboFrame := r.Header.Get("Turbo-Frame") != ""
+
+	// Redirect full-page requests (non-Turbo-Frame) that contain a page parameter back to canonical URL
+	if !isTurboFrame && pageStr != "" {
+		queryVals := r.URL.Query()
+		queryVals.Del("page")
+		targetURL := "/list"
+		if encoded := queryVals.Encode(); encoded != "" {
+			targetURL += "?" + encoded
+		}
+		http.Redirect(w, r, targetURL, http.StatusFound)
+
+		return
+	}
+
+	page := 1
+	if p, err := strconv.Atoi(pageStr); err == nil && p > 0 {
+		page = p
+	}
+
+	// Stub mock data for development
+	mockVulns := []ListedVulnerabilityDisplay{
+		{
+			ID:        "GHSA-1234-5678-90ab",
+			Published: time.Now().Add(-24 * time.Hour),
+			Packages: []models.Package{
+				{Package: &osvschema.Package{Ecosystem: "PyPI", Name: "requests"}},
+				{Package: &osvschema.Package{Ecosystem: "PyPI", Name: "urllib3"}},
+			},
+			Summary: "Critical remote code execution in `requests`",
+			IsFixed: true,
+			Severities: []*osvschema.Severity{
+				{Type: osvschema.Severity_CVSS_V3, Score: "CVSS:3.1/AV:N/AC:L/PR:N/UI:N/S:U/C:H/I:N/A:N"},
+			},
+		},
+		{
+			ID:        "CVE-2024-9999",
+			Published: time.Now().Add(-48 * time.Hour),
+			Packages: []models.Package{
+				{Package: &osvschema.Package{Ecosystem: "Go", Name: "golang.org/x/net"}},
+				{Repo: "https://github.com/golang/net"},
+			},
+			Summary: "Denial of service in HTTP/2 handler",
+			IsFixed: false,
+			Severities: []*osvschema.Severity{
+				{Type: osvschema.Severity_CVSS_V3, Score: "CVSS:3.1/AV:N/AC:L/PR:N/UI:N/S:U/C:L/I:N/A:N"},
+			},
+		},
+	}
+
+	mockEcosystemCounts := []EcosystemCount{
+		{Name: "PyPI", Count: 1420},
+		{Name: "Go", Count: 850},
+		{Name: "npm", Count: 3200},
+		{Name: "Maven", Count: 1100},
+		{Name: "A Very Long Ecosystem Name", Count: 1111111},
+		{Name: "A Very *Very* Long Ecosystem Name (comes with snacks!)", Count: 1111111},
+		{Name: "Evil PyPI", Count: 1420},
+		{Name: "Evil Go", Count: 850},
+		{Name: "Good npm", Count: 3200},
+		{Name: "Evil Maven", Count: 1100},
+	}
+
+	totalEcosystemCount := 0
+	for _, eco := range mockEcosystemCounts {
+		totalEcosystemCount += eco.Count
+	}
+
+	now := time.Now()
+	vulns := make([]ListedVulnerabilityDisplay, 0, vulnsPerPage)
+	for i := range vulnsPerPage {
+		idx := (page-1)*vulnsPerPage + i
+		item := mockVulns[i%len(mockVulns)]
+		item.Published = now.Add(-time.Duration(idx*3) * time.Hour)
+		vulns = append(vulns, item)
+	}
+
+	pageTitle := "Vulnerability Database - OSV"
+	if ecosystem != "" {
+		pageTitle = ecosystem + " - OSV"
+	}
+
+	data := ListPageData{
+		BasePageData: BasePageData{
+			Title:             pageTitle,
+			ActiveSection:     "vulnerabilities",
+			DisableTurboCache: true,
+		},
+		Query:               q,
+		SelectedEcosystem:   ecosystem,
+		Page:                page,
+		TotalPages:          5,
+		EcosystemCounts:     mockEcosystemCounts,
+		TotalEcosystemCount: totalEcosystemCount,
+		Vulnerabilities:     vulns,
+	}
 
-	// TODO: Query ListedVulnerability entities from Datastore and render page / JSON
-	http.Error(w, fmt.Sprintf("Vulnerability list handler stub (q=%q, ecosystem=%q, page=%q)", q, ecosystem, page), http.StatusNotImplemented)
+	s.render(w, r, "list.html", http.StatusOK, &data)
 }
diff --git a/go/internal/website/list_models.go b/go/internal/website/list_models.go
new file mode 100644
index 00000000000..54ebedb49eb
--- /dev/null
+++ b/go/internal/website/list_models.go
@@ -0,0 +1,178 @@
+package website
+
+import (
+	"fmt"
+	"net/url"
+	"strings"
+	"time"
+
+	"github.com/google/osv.dev/go/internal/models"
+	"github.com/ossf/osv-schema/bindings/go/osvschema"
+)
+
+// EcosystemCount represents an ecosystem filter option and its vulnerability count.
+type EcosystemCount struct {
+	Name  string
+	Count int
+}
+
+// ListedVulnerabilityDisplay wraps models.ListedVulnerability with website presentation methods.
+type ListedVulnerabilityDisplay models.ListedVulnerability
+
+// FormattedPublished returns the published timestamp in RFC3339 format.
+func (v ListedVulnerabilityDisplay) FormattedPublished() string {
+	if v.Published.IsZero() {
+		return ""
+	}
+
+	return v.Published.Format(time.RFC3339)
+}
+
+// RelativePublished returns a human-readable relative time representation.
+func (v ListedVulnerabilityDisplay) RelativePublished() string {
+	if v.Published.IsZero() {
+		return ""
+	}
+
+	return formatRelativeTime(v.Published, time.Now())
+}
+
+func formatRelativeTime(value, now time.Time) string {
+	if value.IsZero() {
+		return ""
+	}
+
+	diff := now.Sub(value)
+	if diff < 0 {
+		diff = 0
+	}
+
+	diffSeconds := int64(diff.Seconds())
+	diffMinutes := diffSeconds / 60
+	diffHours := diffSeconds / 3600
+	diffDays := diffSeconds / 86400
+
+	if diffMinutes == 0 {
+		return "just now"
+	}
+	if diffHours == 0 {
+		if diffMinutes == 1 {
+			return "1 minute ago"
+		}
+
+		return fmt.Sprintf("%d minutes ago", diffMinutes)
+	}
+	if diffDays == 0 {
+		if diffHours == 1 {
+			return "1 hour ago"
+		}
+
+		return fmt.Sprintf("%d hours ago", diffHours)
+	}
+	if diffDays == 1 {
+		return "yesterday"
+	}
+	if diffDays < 7 {
+		return fmt.Sprintf("%d days ago", diffDays)
+	}
+	if value.Year() == now.Year() {
+		return value.Format("02 Jan")
+	}
+
+	return value.Format("02 Jan 2006")
+}
+
+func stripScheme(rawURL string) string {
+	if idx := strings.Index(rawURL, "://"); idx != -1 {
+		return rawURL[idx+3:]
+	}
+
+	return rawURL
+}
+
+// DisplayPackages returns up to 5 formatted package strings to display in the table row.
+func (v ListedVulnerabilityDisplay) DisplayPackages() []string {
+	if len(v.Packages) == 0 {
+		return nil
+	}
+
+	limit := len(v.Packages)
+	if limit > 5 {
+		limit = 5
+	}
+
+	result := make([]string, limit)
+	for i := range limit {
+		pkg := v.Packages[i]
+		if pkg.Repo != "" {
+			result[i] = stripScheme(pkg.Repo)
+		} else if pkg.Package != nil {
+			if pkg.Package.GetEcosystem() == "" {
+				result[i] = pkg.Package.GetName()
+			} else {
+				result[i] = pkg.Package.GetEcosystem() + "/" + pkg.Package.GetName()
+			}
+		}
+	}
+
+	return result
+}
+
+// RemainingPackageCount returns the number of additional packages beyond the first 5.
+func (v ListedVulnerabilityDisplay) RemainingPackageCount() int {
+	return max(0, len(v.Packages)-5)
+}
+
+func cvssRank(t osvschema.Severity_Type) int {
+	switch t {
+	case osvschema.Severity_CVSS_V4:
+		return 3
+	case osvschema.Severity_CVSS_V3:
+		return 2
+	case osvschema.Severity_CVSS_V2:
+		return 1
+	default:
+		return 0
+	}
+}
+
+// PrimarySeverity returns the computed SeverityDisplay for the primary severity entry.
+func (v ListedVulnerabilityDisplay) PrimarySeverity() *SeverityDisplay {
+	var bestDisplay *SeverityDisplay
+	bestRank := 0
+
+	for _, sev := range v.Severities {
+		if display, ok := ParseSeverityDisplay(sev.GetType(), sev.GetScore(), v.ID); ok {
+			rank := cvssRank(sev.GetType())
+			if rank > bestRank {
+				bestRank = rank
+				bestDisplay = &display
+			}
+		}
+	}
+
+	return bestDisplay
+}
+
+// ListPageData holds the page context passed to list.html template.
+type ListPageData struct {
+	BasePageData
+
+	Query               string
+	SelectedEcosystem   string
+	Page                int
+	TotalPages          int
+	EcosystemCounts     []EcosystemCount
+	TotalEcosystemCount int
+	Vulnerabilities     []ListedVulnerabilityDisplay
+}
+
+// EncodedQuery returns the URL query-escaped search query string.
+func (d ListPageData) EncodedQuery() string {
+	return url.QueryEscape(d.Query)
+}
+
+// EncodedEcosystem returns the URL query-escaped ecosystem filter string.
+func (d ListPageData) EncodedEcosystem() string {
+	return url.QueryEscape(d.SelectedEcosystem)
+}
diff --git a/go/internal/website/list_models_test.go b/go/internal/website/list_models_test.go
new file mode 100644
index 00000000000..2da5fe3a6db
--- /dev/null
+++ b/go/internal/website/list_models_test.go
@@ -0,0 +1,184 @@
+package website
+
+import (
+	"reflect"
+	"testing"
+	"time"
+
+	"github.com/google/osv.dev/go/internal/models"
+	"github.com/ossf/osv-schema/bindings/go/osvschema"
+)
+
+func TestFormatRelativeTime(t *testing.T) {
+	t.Parallel()
+
+	now := time.Date(2026, 8, 3, 12, 0, 0, 0, time.UTC)
+
+	tests := []struct {
+		name string
+		val  time.Time
+		want string
+	}{
+		{
+			name: "Zero time",
+			val:  time.Time{},
+			want: "",
+		},
+		{
+			name: "Just now",
+			val:  now.Add(-10 * time.Second),
+			want: "just now",
+		},
+		{
+			name: "Minutes ago",
+			val:  now.Add(-15 * time.Minute),
+			want: "15 minutes ago",
+		},
+		{
+			name: "Hours ago",
+			val:  now.Add(-3 * time.Hour),
+			want: "3 hours ago",
+		},
+		{
+			name: "Yesterday",
+			val:  now.Add(-26 * time.Hour),
+			want: "yesterday",
+		},
+		{
+			name: "Days ago",
+			val:  now.Add(-4 * 24 * time.Hour),
+			want: "4 days ago",
+		},
+		{
+			name: "Date in same year",
+			val:  time.Date(2026, 7, 24, 10, 0, 0, 0, time.UTC),
+			want: "24 Jul",
+		},
+		{
+			name: "Date in previous year",
+			val:  time.Date(2024, 12, 6, 10, 0, 0, 0, time.UTC),
+			want: "06 Dec 2024",
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			t.Parallel()
+
+			got := formatRelativeTime(tt.val, now)
+			if got != tt.want {
+				t.Errorf("formatRelativeTime() = %q, want %q", got, tt.want)
+			}
+		})
+	}
+}
+
+func TestPrimarySeverity(t *testing.T) {
+	t.Parallel()
+
+	tests := []struct {
+		name       string
+		score      string
+		wantLevel  string
+		wantRating string
+	}{
+		{
+			name:       "Critical CVSS 3.1 vector 9.8",
+			score:      "CVSS:3.1/AV:N/AC:L/PR:N/UI:N/S:U/C:H/I:H/A:H",
+			wantLevel:  "critical",
+			wantRating: "9.8 (Critical)",
+		},
+		{
+			name:       "High CVSS 3.1 vector 7.5",
+			score:      "CVSS:3.1/AV:N/AC:L/PR:N/UI:N/S:U/C:H/I:N/A:N",
+			wantLevel:  "high",
+			wantRating: "7.5 (High)",
+		},
+		{
+			name:       "Medium numeric score fallback 5.3",
+			score:      "5.3",
+			wantLevel:  "medium",
+			wantRating: "5.3 (Medium)",
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			t.Parallel()
+
+			display := ListedVulnerabilityDisplay{
+				Severities: []*osvschema.Severity{{Type: osvschema.Severity_CVSS_V3, Score: tt.score}},
+			}
+
+			sev := display.PrimarySeverity()
+			if sev == nil {
+				t.Fatalf("PrimarySeverity() = nil, want non-nil")
+			}
+			if sev.Level != tt.wantLevel {
+				t.Errorf("PrimarySeverity().Level = %q, want %q", sev.Level, tt.wantLevel)
+			}
+			if sev.Rating != tt.wantRating {
+				t.Errorf("PrimarySeverity().Rating = %q, want %q", sev.Rating, tt.wantRating)
+			}
+		})
+	}
+}
+
+func TestPrimarySeverity_Ranking(t *testing.T) {
+	t.Parallel()
+
+	display := ListedVulnerabilityDisplay{
+		Severities: []*osvschema.Severity{
+			{Type: osvschema.Severity_CVSS_V2, Score: "AV:N/AC:L/Au:N/C:P/I:P/A:P"},
+			{Type: osvschema.Severity_CVSS_V3, Score: "CVSS:3.1/AV:N/AC:L/PR:N/UI:N/S:U/C:H/I:H/A:H"},
+		},
+	}
+
+	sev := display.PrimarySeverity()
+	if sev == nil {
+		t.Fatalf("PrimarySeverity() = nil, want non-nil")
+	}
+
+	if sev.Type != "CVSS_V3" {
+		t.Errorf("PrimarySeverity().Type = %q, want %q", sev.Type, "CVSS_V3")
+	}
+	if sev.Level != "critical" {
+		t.Errorf("PrimarySeverity().Level = %q, want %q", sev.Level, "critical")
+	}
+}
+
+func TestEncodedQueryAndEcosystem(t *testing.T) {
+	t.Parallel()
+
+	data := ListPageData{
+		Query:             "requests & urllib3",
+		SelectedEcosystem: "C++",
+	}
+
+	if got, want := data.EncodedQuery(), "requests+%26+urllib3"; got != want {
+		t.Errorf("EncodedQuery() = %q, want %q", got, want)
+	}
+
+	if got, want := data.EncodedEcosystem(), "C%2B%2B"; got != want {
+		t.Errorf("EncodedEcosystem() = %q, want %q", got, want)
+	}
+}
+
+func TestDisplayPackages(t *testing.T) {
+	t.Parallel()
+
+	display := ListedVulnerabilityDisplay{
+		Packages: []models.Package{
+			{Package: &osvschema.Package{Ecosystem: "PyPI", Name: "requests"}},
+			{Repo: "https://github.com/requests/requests"},
+		},
+	}
+
+	got := display.DisplayPackages()
+	want := []string{"PyPI/requests", "github.com/requests/requests"}
+
+	if !reflect.DeepEqual(got, want) {
+		t.Errorf("DisplayPackages() = %v, want %v", got, want)
+	}
+}
+
diff --git a/go/internal/website/list_test.go b/go/internal/website/list_test.go
new file mode 100644
index 00000000000..a25c1b30f7d
--- /dev/null
+++ b/go/internal/website/list_test.go
@@ -0,0 +1,76 @@
+package website_test
+
+import (
+	"net/http"
+	"net/http/httptest"
+	"testing"
+	"testing/fstest"
+
+	"github.com/google/osv.dev/go/internal/website"
+)
+
+func TestList_RenderPage(t *testing.T) {
+	t.Parallel()
+
+	staticFS := fstest.MapFS{
+		"go/base.html": &fstest.MapFile{
+			Data: []byte(`<html>{{ template "content" . }}</html>`),
+		},
+		"go/list.html": &fstest.MapFile{
+			Data: []byte(`{{ define "content" }}<div>List Page {{ .Query }}</div>{{ end }}`),
+		},
+	}
+
+	srv := newTestServer(t, website.Config{StaticFS: staticFS})
+
+	tests := []struct {
+		name       string
+		url        string
+		headers    map[string]string
+		wantStatus int
+		wantLoc    string
+	}{
+		{
+			name:       "Default list page",
+			url:        "/list",
+			wantStatus: http.StatusOK,
+		},
+		{
+			name:       "List page with query and ecosystem filter",
+			url:        "/list?q=requests&ecosystem=PyPI",
+			wantStatus: http.StatusOK,
+		},
+		{
+			name:       "Direct full page load with page parameter redirects",
+			url:        "/list?q=requests&page=2",
+			wantStatus: http.StatusFound,
+			wantLoc:    "/list?q=requests",
+		},
+		{
+			name:       "Turbo-Frame load with page parameter returns OK",
+			url:        "/list?q=requests&page=2",
+			headers:    map[string]string{"Turbo-Frame": "vulnerability-table-page2"},
+			wantStatus: http.StatusOK,
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			t.Parallel()
+
+			req := httptest.NewRequest(http.MethodGet, tt.url, nil)
+			for k, v := range tt.headers {
+				req.Header.Set(k, v)
+			}
+			rec := httptest.NewRecorder()
+			srv.ServeHTTP(rec, req)
+
+			if rec.Code != tt.wantStatus {
+				t.Errorf("GET %s returned status %d, want %d (body: %s)", tt.url, rec.Code, tt.wantStatus, rec.Body.String())
+			}
+			if tt.wantLoc != "" && rec.Header().Get("Location") != tt.wantLoc {
+				t.Errorf("GET %s returned Location %q, want %q", tt.url, rec.Header().Get("Location"), tt.wantLoc)
+			}
+		})
+	}
+}
diff --git a/go/internal/website/pagedata.go b/go/internal/website/pagedata.go
index 8e58337420b..a44c2e0af21 100644
--- a/go/internal/website/pagedata.go
+++ b/go/internal/website/pagedata.go
@@ -6,6 +6,7 @@ import (
 
 // BasePageData contains common fields required by the base.html layout template.
 type BasePageData struct {
+	Title             string
 	ActiveSection     string
 	DisableTurboCache bool
 }
diff --git a/go/internal/website/server.go b/go/internal/website/server.go
index b5141f28ec3..374270a9028 100644
--- a/go/internal/website/server.go
+++ b/go/internal/website/server.go
@@ -204,6 +204,8 @@ func (s *Server) renderTemplates(w http.ResponseWriter, r *http.Request, status
 	}
 	funcMap := template.FuncMap{
 		"hasPrefix": strings.HasPrefix,
+		"add":       func(a, b int) int { return a + b },
+		"sub":       func(a, b int) int { return a - b },
 	}
 
 	entryName := path.Base(files[0])
diff --git a/go/internal/website/vulnerability_models.go b/go/internal/website/vulnerability_models.go
index 6c4a2e17b1f..74511f63a9f 100644
--- a/go/internal/website/vulnerability_models.go
+++ b/go/internal/website/vulnerability_models.go
@@ -11,8 +11,8 @@ type SeverityDisplay struct {
 	Type          string
 	Score         string
 	IsCVSS        bool
-	Level         string // "low", "medium", "high", "critical", or "invalid"
-	Rating        string // e.g. "CVSS v3.1: 7.5 HIGH"
+	Level         string // e.g. "low", "medium", "high", "critical"
+	Rating        string // e.g. "7.5 (High)" or "7.5"
 	CalculatorURL string
 }
 
diff --git a/go/internal/website/vulnerability_view.go b/go/internal/website/vulnerability_view.go
index ec95a3d8df5..d4736d178ca 100644
--- a/go/internal/website/vulnerability_view.go
+++ b/go/internal/website/vulnerability_view.go
@@ -6,6 +6,7 @@ import (
 	"log/slog"
 	"net/url"
 	"slices"
+	"strconv"
 	"strings"
 	"time"
 
@@ -171,82 +172,97 @@ func (v VulnerabilityPageData) Severities() []SeverityDisplay {
 	id := v.Vulnerability.GetId()
 	displays := make([]SeverityDisplay, 0, len(severities))
 	for _, sev := range severities {
-		score := sev.GetScore()
-		var isCVSS bool
-		var cvssScore float64
-		var cvssLevel string
-		var calcURL string
-		var rating string
-		switch sev.GetType() {
-		case osvschema.Severity_CVSS_V2:
-			isCVSS = true
-			parsed, err := gocvss20.ParseVector(score)
+		if display, ok := ParseSeverityDisplay(sev.GetType(), sev.GetScore(), id); ok {
+			displays = append(displays, display)
+		}
+	}
+
+	return displays
+}
+
+// ParseSeverityDisplay converts a raw severity entry into display information.
+func ParseSeverityDisplay(sevType osvschema.Severity_Type, score string, vulnID string) (SeverityDisplay, bool) {
+	var isCVSS bool
+	var cvssScore float64
+	var cvssLevel string
+	var calcURL string
+
+	switch sevType {
+	case osvschema.Severity_CVSS_V2:
+		isCVSS = true
+		parsed, err := gocvss20.ParseVector(score)
+		if err != nil {
+			logger.Error("failed to parse CVSS V2 vector", slog.String("id", vulnID), slog.Any("error", err))
+			return SeverityDisplay{}, false
+		}
+		cvssScore = parsed.BaseScore()
+		// CVSS:2.0 does not define ratings
+		calcURL = firstCVSSCalculatorBaseURL + "/2.0#" + score
+
+	case osvschema.Severity_CVSS_V3:
+		isCVSS = true
+		if strings.HasPrefix(score, "CVSS:3.0") {
+			parsed, err := gocvss30.ParseVector(score)
 			if err != nil {
-				logger.Error("failed to parse CVSS V2 vector", slog.String("id", id), slog.Any("error", err))
-				continue
+				logger.Error("failed to parse CVSS V3.0 vector", slog.String("id", vulnID), slog.Any("error", err))
+				return SeverityDisplay{}, false
 			}
 			cvssScore = parsed.BaseScore()
-			// CVSS:2.0 does not define ratings
-			calcURL = firstCVSSCalculatorBaseURL + "/2.0#" + score
-		case osvschema.Severity_CVSS_V3:
-			isCVSS = true
-			if strings.HasPrefix(score, "CVSS:3.0") {
-				parsed, err := gocvss30.ParseVector(score)
-				if err != nil {
-					logger.Error("failed to parse CVSS V3.0 vector", slog.String("id", id), slog.Any("error", err))
-					continue
-				}
-				cvssScore = parsed.BaseScore()
-				cvssLevel, _ = gocvss30.Rating(cvssScore)
-				calcURL = firstCVSSCalculatorBaseURL + "/3.0#" + score
-			} else if strings.HasPrefix(score, "CVSS:3.1") {
-				parsed, err := gocvss31.ParseVector(score)
-				if err != nil {
-					logger.Error("failed to parse CVSS V3.1 vector", slog.String("id", id), slog.Any("error", err))
-					continue
-				}
-				cvssScore = parsed.BaseScore()
-				cvssLevel, _ = gocvss31.Rating(cvssScore)
-				calcURL = firstCVSSCalculatorBaseURL + "/3.1#" + score
-			} else {
-				logger.Error("failed to parse CVSS V3 vector: unsupported version", slog.String("id", id), slog.String("score", score))
-				continue
-			}
-		case osvschema.Severity_CVSS_V4:
-			isCVSS = true
-			parsed, err := gocvss40.ParseVector(score)
+			cvssLevel, _ = gocvss30.Rating(cvssScore)
+			calcURL = firstCVSSCalculatorBaseURL + "/3.0#" + score
+		} else if strings.HasPrefix(score, "CVSS:3.1") {
+			parsed, err := gocvss31.ParseVector(score)
 			if err != nil {
-				logger.Error("failed to parse CVSS V4.0 vector", slog.String("id", id), slog.Any("error", err))
-				continue
+				logger.Error("failed to parse CVSS V3.1 vector", slog.String("id", vulnID), slog.Any("error", err))
+				return SeverityDisplay{}, false
 			}
-			cvssScore = parsed.Score()
-			cvssLevel, _ = gocvss40.Rating(cvssScore)
-			calcURL = firstCVSSCalculatorBaseURL + "/4.0#" + score
-		case osvschema.Severity_Ubuntu:
-		default:
-			logger.Error("unknown severity type", slog.String("id", id), slog.Any("type", sev.GetType()))
-
-			continue
+			cvssScore = parsed.BaseScore()
+			cvssLevel, _ = gocvss31.Rating(cvssScore)
+			calcURL = firstCVSSCalculatorBaseURL + "/3.1#" + score
+		} else if numScore, err := strconv.ParseFloat(score, 64); err == nil {
+			cvssScore = numScore
+			cvssLevel, _ = gocvss31.Rating(cvssScore)
+		} else {
+			logger.Error("failed to parse CVSS V3 vector: unsupported version", slog.String("id", vulnID), slog.String("score", score))
+			return SeverityDisplay{}, false
 		}
-		if isCVSS {
-			if cvssLevel != "" {
-				rating = fmt.Sprintf("%.1f (%s)", cvssScore, cases.Title(language.English).String(cvssLevel))
-			} else {
-				rating = fmt.Sprintf("%.1f", cvssScore)
-			}
+
+	case osvschema.Severity_CVSS_V4:
+		isCVSS = true
+		parsed, err := gocvss40.ParseVector(score)
+		if err != nil {
+			logger.Error("failed to parse CVSS V4.0 vector", slog.String("id", vulnID), slog.Any("error", err))
+			return SeverityDisplay{}, false
 		}
+		cvssScore = parsed.Score()
+		cvssLevel, _ = gocvss40.Rating(cvssScore)
+		calcURL = firstCVSSCalculatorBaseURL + "/4.0#" + score
 
-		displays = append(displays, SeverityDisplay{
-			Type:          sev.GetType().String(),
-			Score:         score,
-			IsCVSS:        isCVSS,
-			Level:         strings.ToLower(cvssLevel),
-			Rating:        rating,
-			CalculatorURL: calcURL,
-		})
+	case osvschema.Severity_Ubuntu:
+		// non-CVSS severity type, ignore without logging error
+
+	default:
+		logger.Error("unknown severity type", slog.String("id", vulnID), slog.Any("type", sevType))
+		return SeverityDisplay{}, false
 	}
 
-	return displays
+	var rating string
+	if isCVSS {
+		if cvssLevel != "" {
+			rating = fmt.Sprintf("%.1f (%s)", cvssScore, cases.Title(language.English).String(cvssLevel))
+		} else {
+			rating = fmt.Sprintf("%.1f", cvssScore)
+		}
+	}
+
+	return SeverityDisplay{
+		Type:          sevType.String(),
+		Score:         score,
+		IsCVSS:        isCVSS,
+		Level:         strings.ToLower(cvssLevel),
+		Rating:        rating,
+		CalculatorURL: calcURL,
+	}, true
 }
 
 // AffectedPackages parses and returns display objects for all affected packages.

From f18e0bbbf30ee70f2fcf21069ae35869177f6768 Mon Sep 17 00:00:00 2001
From: michaelkedar <michaelkedar@google.com>
Date: Wed, 5 Aug 2026 06:43:36 +0000
Subject: [PATCH 2/2] fix lint

---
 go/internal/website/list_models_test.go | 1 -
 1 file changed, 1 deletion(-)

diff --git a/go/internal/website/list_models_test.go b/go/internal/website/list_models_test.go
index 2da5fe3a6db..c8de129e39c 100644
--- a/go/internal/website/list_models_test.go
+++ b/go/internal/website/list_models_test.go
@@ -181,4 +181,3 @@ func TestDisplayPackages(t *testing.T) {
 		t.Errorf("DisplayPackages() = %v, want %v", got, want)
 	}
 }
-