---
title: Extension Points
---

```js
import {API, POLL_HEAVY, apiFetch, pollDelay, waitForVisible} from "./components/config.js";
```

```js
const epState = (async function*() {
  let failures = 0;
  while (true) {
    let data = [], ok = false;
    try {
      const [re, rw, rt, rr] = await Promise.all([
        apiFetch("/extension-points/"),
        apiFetch("/workplans/"),
        apiFetch("/topics/"),
        apiFetch("/repos/"),
      ]);
      ok = re.ok && rw.ok && rt.ok && rr.ok;
      if (ok) {
        const [epList, wsList, topicList, repoList] = await Promise.all([re.json(), rw.json(), rt.json(), rr.json()]);
        const topicMap = Object.fromEntries(topicList.map(t => [t.id, t]));
        const repoMap  = Object.fromEntries(repoList.map(r => [r.id, r]));
        const wsMap    = Object.fromEntries(wsList.map(w => [w.id, {
          ...w, domain: repoMap[w.repo_id]?.domain_slug ?? topicMap[w.topic_id]?.domain_slug ?? "unknown",
        }]));
        data = epList.map(e => ({
          ...e,
          workstream_title: wsMap[e.workstream_id]?.title ?? null,
        })).sort((a, b) => {
          const pr = {critical: 0, high: 1, medium: 2, low: 3};
          const st = {open: 0, in_progress: 1, deferred: 2, addressed: 3, wont_fix: 4};
          const sd = (st[a.status] ?? 9) - (st[b.status] ?? 9);
          return sd !== 0 ? sd : (pr[a.priority] ?? 9) - (pr[b.priority] ?? 9);
        });
      }
    } catch {}
    failures = ok ? 0 : failures + 1;
    yield {data, ok, ts: new Date()};
    await waitForVisible(pollDelay({ok, base: POLL_HEAVY, failures}));
  }
})();
```

```js
const data = epState.data ?? [];
const _ok  = epState.ok   ?? false;
const _ts  = epState.ts;
```

```js
import {MultiSelect} from "./components/multiselect.js";

const STATUSES   = ["open", "in_progress", "addressed", "deferred", "wont_fix"];
const PRIORITIES = ["critical", "high", "medium", "low"];
const _domainsResp = await fetch(`${API}/domains/?status=active`).catch(() => null);
const DOMAINS = _domainsResp?.ok
  ? (await _domainsResp.json()).map(d => d.slug)
  : ["custodian", "railiance", "markitect", "coulomb_social", "personhood", "foerster_capabilities"];
const EP_TYPES   = ["api", "schema", "mcp", "dashboard", "architecture", "integration", "other"];

const _filtersForm = Inputs.form(
  {
    status:   MultiSelect(STATUSES,   {label: "Status",   placeholder: "All statuses"}),
    priority: MultiSelect(PRIORITIES, {label: "Priority", placeholder: "All priorities"}),
    domain:   MultiSelect(DOMAINS,    {label: "Domain",   placeholder: "All domains"}),
    ep_type:  MultiSelect(EP_TYPES,   {label: "Type",     placeholder: "All types"}),
  },
  {
    template: ({status, priority, domain, ep_type}) => html`<div class="filter-bar">
      ${status}${priority}${domain}${ep_type}
    </div>`,
  }
);
```

```js
const filters = Generators.input(_filtersForm);
```

```js
const filtered = data.filter(e =>
  (filters.status.length   === 0 || filters.status.includes(e.status)) &&
  (filters.priority.length === 0 || filters.priority.includes(e.priority)) &&
  (filters.domain.length   === 0 || filters.domain.includes(e.domain_slug)) &&
  (filters.ep_type.length  === 0 || filters.ep_type.includes(e.ep_type))
);
```

# Extension Points

```js
import {injectTocTop}    from "./components/toc-sidebar.js";
import {withDocHelp}     from "./components/doc-overlay.js";
import {openEntityModal} from "./components/entity-modal.js";

// ── KPI sidebar ───────────────────────────────────────────────────────────────
const _open       = data.filter(e => e.status === "open" || e.status === "in_progress");
const _addressed  = data.filter(e => e.status === "addressed");
const _byType     = EP_TYPES.map(t => [t, data.filter(e => e.ep_type === t && e.status === "open").length])
                             .filter(([,n]) => n > 0);

const _kpiBox = html`<div class="kpi-infobox">
  <div class="kpi-infobox-title">Extension Points</div>
  <div class="kpi-row">
    <span class="kpi-row-label">open</span>
    <div class="kpi-row-right"><div class="kpi-row-value">${_open.length}</div></div>
  </div>
  <div class="kpi-row">
    <span class="kpi-row-label">addressed</span>
    <div class="kpi-row-right"><div class="kpi-row-value">${_addressed.length}</div></div>
  </div>
  ${_byType.length > 0 ? html`
    <div class="kpi-type-breakdown">
      ${_byType.map(([t, n]) => html`<div class="kpi-type-row">
        <span class="ep-type-badge ep-type-${t}">${t}</span>
        <span class="kpi-type-count">${n}</span>
      </div>`)}
    </div>` : ""}
</div>`;

// ── Live indicator ─────────────────────────────────────────────────────────────
const _liveEl = html`<div class="live-indicator">
  <span style="color:${_ok ? 'var(--theme-foreground-focus)' : 'red'}">●</span>
  ${_ok
    ? `Live · updated ${_ts?.toLocaleTimeString()}`
    : html`<span style="color:red">Offline — run: <code>make api</code></span>`}
</div>`;
withDocHelp(_liveEl, "/docs/live-data");

const _h1 = document.querySelector("#observablehq-main h1");
if (_h1) { _h1.style.position = "relative"; withDocHelp(_h1, "/docs/extensions"); }

injectTocTop("ep-kpi-box", _kpiBox);
injectTocTop("live-indicator", _liveEl);
```

## By Type & Status

```js
import * as Plot from "npm:@observablehq/plot";

const TYPE_COLOR = {
  api: "#3b82f6", schema: "#8b5cf6", mcp: "#ec4899",
  dashboard: "#f59e0b", architecture: "#10b981", integration: "#6366f1", other: "#94a3b8",
};
const STATUS_COLOR = {
  open: "#3b82f6", in_progress: "#f59e0b", addressed: "#22c55e", deferred: "#94a3b8", wont_fix: "#e2e8f0",
};

const byType = EP_TYPES
  .map(t => ({type: t, count: filtered.filter(e => e.ep_type === t).length}))
  .filter(d => d.count > 0);

const byStatus = STATUSES
  .map(s => ({status: s, count: filtered.filter(e => e.status === s).length}))
  .filter(d => d.count > 0);

if (filtered.length === 0) {
  display(html`<p class="dim">No extension points match the current filter.</p>`);
} else {
  display(html`<div class="chart-row">
    ${Plot.plot({
      marks: [
        Plot.barX(byType, {y: "type", x: "count", fill: d => TYPE_COLOR[d.type] ?? "#94a3b8", tip: true}),
        Plot.ruleX([0]),
      ],
      marginLeft: 100, width: 340, title: "By type",
    })}
    ${Plot.plot({
      marks: [
        Plot.barX(byStatus, {y: "status", x: "count", fill: d => STATUS_COLOR[d.status] ?? "#94a3b8", tip: true}),
        Plot.ruleX([0]),
      ],
      marginLeft: 90, width: 300, title: "By status",
    })}
  </div>`);
}
```

## All Extension Points

```js
display(_filtersForm);
display(html`<p><strong>${filtered.length}</strong> extension points shown.</p>`);

display(html`<div class="ep-list">${filtered.map(ep => html`
  <div class="ep-item ep-status-${ep.status} entity-row"
       onclick=${() => openEntityModal(ep, "ep")}
       title="Click to view full details">
    <div class="ep-item-header">
      ${ep.ep_id ? html`<span class="ep-ref">${ep.ep_id}</span>` : ""}
      <span class="ep-type-badge ep-type-${ep.ep_type}">${ep.ep_type}</span>
      <span class="ep-badge ep-badge-${ep.status}">${ep.status.replace("_", " ")}</span>
      <span class="ep-badge ep-priority-${ep.priority}">${ep.priority}</span>
      <span class="ep-domain">${ep.domain}</span>
      ${ep.workstream_title ? html`<span class="ep-ws" title=${ep.workstream_title}>${ep.workstream_title}</span>` : ""}
    </div>
    <div class="ep-title">${ep.title}</div>
    ${ep.description ? html`<div class="ep-desc">${ep.description.slice(0, 220)}${ep.description.length > 220 ? " …" : ""}</div>` : ""}
    ${ep.location    ? html`<div class="ep-location"><code>${ep.location}</code></div>` : ""}
  </div>
`)}
</div>`);
```

<style>
/* ── Live indicator ───────────────────────────────────────────────────────── */
.live-indicator { font-size: 0.8rem; color: gray; position: relative; padding: 0.55rem 1.8rem 0.55rem 0.7rem; margin-bottom: 0.75rem; }

/* ── KPI infobox ──────────────────────────────────────────────────────────── */
.kpi-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.3rem 0; border-top: 1px solid var(--theme-foreground-faint, #eee); }
.kpi-row:first-of-type { border-top: none; }
.kpi-row-label { font-size: 0.8rem; color: var(--theme-foreground-muted, #666); }
.kpi-row-right { text-align: right; }
.kpi-row-value { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi-type-breakdown { border-top: 1px solid var(--theme-foreground-faint, #eee); padding-top: 0.35rem; margin-top: 0.2rem; }
.kpi-type-row { display: flex; justify-content: space-between; align-items: center; padding: 0.1rem 0; }
.kpi-type-count { font-size: 0.8rem; font-weight: 600; color: var(--theme-foreground-muted, #666); }

/* ── Charts ───────────────────────────────────────────────────────────────── */
.chart-row { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }

/* ── Filters ──────────────────────────────────────────────────────────────── */

/* ── EP list ──────────────────────────────────────────────────────────────── */
.ep-list { display: flex; flex-direction: column; gap: 0.5rem; }
.ep-item { border-left: 3px solid #94a3b8; border-radius: 0 6px 6px 0; background: var(--theme-background-alt); padding: 0.65rem 0.9rem; }
.ep-item.entity-row { cursor: pointer; transition: filter 0.1s; }
.ep-item.entity-row:hover { filter: brightness(0.97); }
.ep-status-open        { border-left-color: #3b82f6; }
.ep-status-in_progress { border-left-color: #f59e0b; }
.ep-status-addressed   { border-left-color: #22c55e; }
.ep-status-deferred    { border-left-color: #cbd5e1; }
.ep-status-wont_fix    { border-left-color: #e2e8f0; opacity: 0.6; }
.ep-item-header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.3rem; font-size: 0.75rem; }
.ep-ref { font-family: monospace; font-size: 0.72rem; color: var(--theme-foreground-muted); background: var(--theme-background); border: 1px solid var(--theme-foreground-faint, #ddd); border-radius: 4px; padding: 0.05rem 0.35rem; }
.ep-badge { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 10px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.ep-badge-open        { background: #dbeafe; color: #1e40af; }
.ep-badge-in_progress { background: #fef3c7; color: #92400e; }
.ep-badge-addressed   { background: #dcfce7; color: #166534; }
.ep-badge-deferred    { background: #f1f5f9; color: #64748b; }
.ep-badge-wont_fix    { background: #f3f4f6; color: #9ca3af; }
.ep-priority-critical { background: #fee2e2; color: #991b1b; }
.ep-priority-high     { background: #ffedd5; color: #9a3412; }
.ep-priority-medium   { background: #dbeafe; color: #1e40af; }
.ep-priority-low      { background: #f1f5f9; color: #475569; }
.ep-type-badge { display: inline-block; padding: 0.1rem 0.4rem; border-radius: 4px; font-size: 0.68rem; font-weight: 600; font-family: monospace; background: #f1f5f9; color: #475569; }
.ep-domain { color: var(--theme-foreground-muted); font-size: 0.75rem; }
.ep-ws     { font-style: italic; color: var(--theme-foreground-faint); font-size: 0.72rem; }
.ep-title  { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.15rem; }
.ep-desc   { font-size: 0.82rem; color: var(--theme-foreground-muted); line-height: 1.45; }
.ep-location { font-size: 0.75rem; color: var(--theme-foreground-faint); margin-top: 0.2rem; }

/* ── Utility ──────────────────────────────────────────────────────────────── */
.dim { color: gray; font-style: italic; }
</style>
