STATE-WP-0062 T3: Services nav section + First/Self Hosted pages

Replace the single "Services (TPSC)" nav entry with a Services section:
Third Party (existing /tpsc cloud-third-party view), First Party
(/services/first-party — Service Maturity Level + dev-repo columns,
development_type=first_party), and Self Hosted (/services/self-hosted —
self_hosted third-party OSS with upstream/host/runbook). New pages are filtered
views over /services/catalog and degrade to an empty-state if the API is offline.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-19 21:03:35 +02:00
parent 77689fbfb2
commit d68de69fe6
3 changed files with 107 additions and 1 deletions

View File

@@ -0,0 +1,48 @@
---
title: Self Hosted Services
---
# Self Hosted Services Catalog
Services and webapps built on **third-party / open-source software** that coulomb
**hosts and operates** as part of the three-helix infrastructure
(`hosting_type = self_hosted`, `development_type = third_party`). coulomb runs
these but is not development-responsible for them.
> First-party services that coulomb also self-hosts (e.g. the State Hub itself)
> are listed under [First Party](/services/first-party), classified by who develops
> them.
```js
import {API} from "../components/config.js";
```
```js
const services = await fetch(`${API}/services/catalog?hosting_type=self_hosted&development_type=third_party`)
.then(r => r.ok ? r.json() : [])
.catch(() => []);
```
```js
const rows = services.map(s => ({
Service: s.name,
Slug: s.slug,
"Upstream OSS": s.self_hosted?.upstream_oss_project ?? s.owner_or_provider ?? "—",
"Helix Instance": s.self_hosted?.helix_instance ?? "—",
Host: s.self_hosted?.host_node ?? "—",
Runbook: s.self_hosted?.runbook_ref ?? "—",
Status: s.status,
}));
```
```js
display(services.length === 0
? html`<div style="color:#64748b;padding:1rem;">No self-hosted third-party services registered yet. Add one with
<code>POST /services/catalog</code> (<code>hosting_type: "self_hosted"</code>,
<code>development_type: "third_party"</code>).</div>`
: Inputs.table(rows, {
columns: ["Service", "Upstream OSS", "Helix Instance", "Host", "Runbook", "Status"],
sort: "Service",
rows: 30,
}));
```