@bespokeagentics/create-microdots-host 0.1.0

package/templates/base/host/public/themes/neutral-dark.css

@@ -0,0 +1,109 @@
+:root,
+[data-theme='neutral-dark'] {
+  color-scheme: dark;
+  --font-body: Inter, ui-sans-serif, system-ui, sans-serif;
+  --font-display: Inter, ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'SFMono-Regular', Consolas, monospace;
+  --fw-light: 300;
+  --fw-regular: 400;
+  --fw-medium: 500;
+  --fw-semibold: 600;
+  --fw-bold: 700;
+  --fs-caption: 0.75rem;
+  --fs-body-s: 0.82rem;
+  --fs-body-m: 0.92rem;
+  --fs-body-l: 1.08rem;
+  --fs-button: 0.88rem;
+  --fs-button-sm: 0.78rem;
+  --fs-button-lg: 0.98rem;
+  --fs-input: 0.9rem;
+  --fs-label: 0.75rem;
+  --fs-display-m: 1.5rem;
+  --fs-display-l: 2.5rem;
+  --fs-display-xl: 3.5rem;
+  --fs-mono: 0.86rem;
+  --fs-mono-sm: 0.76rem;
+  --lh-tight: 1.1;
+  --lh-display: 1.15;
+  --lh-heading: 1.25;
+  --lh-body: 1.55;
+  --lh-relaxed: 1.7;
+  --lh-code: 1.6;
+  --ls-tight: -0.01em;
+  --ls-normal: 0;
+  --ls-wide: 0.05em;
+  --ls-wider: 0.08em;
+  --ls-widest: 0.12em;
+  --ls-ultra: 0.16em;
+  --radius-sm: 0.35rem;
+  --radius-md: 0.55rem;
+  --radius-lg: 0.8rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.25rem;
+  --radius-full: 9999px;
+  --gutter: 2rem;
+  --text-primary: #edf1f7;
+  --text-secondary: #b6c0cf;
+  --text-muted: #8d99aa;
+  --text-heading: #ffffff;
+  --text-link: #aeb8ff;
+  --text-link-hover: #ccd2ff;
+  --text-on-brand: #ffffff;
+  --text-wordmark: #dce1ff;
+  --text-accent: #b7c0ff;
+  --text-success: #77d99f;
+  --text-warning: #f0c56f;
+  --text-error: #ff9999;
+  --surface-page: #11151c;
+  --surface-default: #181e27;
+  --surface-raised: #202733;
+  --surface-elevated: #252d3a;
+  --surface-overlay: #2b3442;
+  --border-default: #3b4657;
+  --border-subtle: #2e3745;
+  --border-accent: #7181da;
+  --border-strong: #59677a;
+  --accent-default: #7181da;
+  --accent-strong: #93a1f0;
+  --accent-subtle: #272f58;
+  --accent-muted: #394474;
+  --accent-label: #b7c0ff;
+  --accent-fill: #596bd0;
+  --accent-fill-hover: #7181da;
+  --int-ghost: rgb(147 161 240 / 0.05);
+  --int-subtle: rgb(147 161 240 / 0.09);
+  --int-hover: rgb(147 161 240 / 0.14);
+  --int-active: rgb(147 161 240 / 0.2);
+  --int-glow: rgb(147 161 240 / 0.28);
+  --status-success-fg: #8be4ae;
+  --status-success-bg: #153624;
+  --status-success-border: #2f6f48;
+  --status-warning-fg: #f3ca77;
+  --status-warning-bg: #3b2d14;
+  --status-warning-border: #745722;
+  --status-error-fg: #ffabab;
+  --status-error-bg: #421e22;
+  --status-error-border: #7b383f;
+  --status-info-fg: #b8c4ff;
+  --status-info-bg: #232c51;
+  --status-info-border: #4b5b9d;
+  --brand-200: #cdd4ff;
+  --brand-300: #adb8f5;
+  --brand-400: #93a1f0;
+  --brand-500: #7181da;
+  --brand-600: #596bd0;
+  --brand-700: #4355b9;
+  --green: #77d99f;
+  --green-deep: #2f9b61;
+  --amber: #f0c56f;
+  --amber-deep: #d79324;
+  --red: #ff9999;
+  --red-deep: #d95555;
+  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.24);
+  --shadow-md: 0 8px 20px rgb(0 0 0 / 0.3);
+  --shadow-lg: 0 20px 48px rgb(0 0 0 / 0.38);
+  --shadow-card: 0 12px 32px rgb(0 0 0 / 0.28);
+  --shadow-glow: 0 0 0 5px rgb(147 161 240 / 0.16);
+  --shadow-focus: 0 0 0 3px rgb(147 161 240 / 0.34);
+  --shadow-button-hover: 0 7px 18px rgb(0 0 0 / 0.3);
+}

package/templates/base/host/public/themes/neutral.css

@@ -0,0 +1,109 @@
+:root,
+[data-theme='neutral'] {
+  color-scheme: light;
+  --font-body: Inter, ui-sans-serif, system-ui, sans-serif;
+  --font-display: Inter, ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'SFMono-Regular', Consolas, monospace;
+  --fw-light: 300;
+  --fw-regular: 400;
+  --fw-medium: 500;
+  --fw-semibold: 600;
+  --fw-bold: 700;
+  --fs-caption: 0.75rem;
+  --fs-body-s: 0.82rem;
+  --fs-body-m: 0.92rem;
+  --fs-body-l: 1.08rem;
+  --fs-button: 0.88rem;
+  --fs-button-sm: 0.78rem;
+  --fs-button-lg: 0.98rem;
+  --fs-input: 0.9rem;
+  --fs-label: 0.75rem;
+  --fs-display-m: 1.5rem;
+  --fs-display-l: 2.5rem;
+  --fs-display-xl: 3.5rem;
+  --fs-mono: 0.86rem;
+  --fs-mono-sm: 0.76rem;
+  --lh-tight: 1.1;
+  --lh-display: 1.15;
+  --lh-heading: 1.25;
+  --lh-body: 1.55;
+  --lh-relaxed: 1.7;
+  --lh-code: 1.6;
+  --ls-tight: -0.01em;
+  --ls-normal: 0;
+  --ls-wide: 0.05em;
+  --ls-wider: 0.08em;
+  --ls-widest: 0.12em;
+  --ls-ultra: 0.16em;
+  --radius-sm: 0.35rem;
+  --radius-md: 0.55rem;
+  --radius-lg: 0.8rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.25rem;
+  --radius-full: 9999px;
+  --gutter: 2rem;
+  --text-primary: #18202b;
+  --text-secondary: #465466;
+  --text-muted: #69778a;
+  --text-heading: #111827;
+  --text-link: #4355b9;
+  --text-link-hover: #2f3f9a;
+  --text-on-brand: #ffffff;
+  --text-wordmark: #25306f;
+  --text-accent: #4355b9;
+  --text-success: #17633b;
+  --text-warning: #82520b;
+  --text-error: #a12b2b;
+  --surface-page: #f4f6f9;
+  --surface-default: #ffffff;
+  --surface-raised: #f8fafc;
+  --surface-elevated: #ffffff;
+  --surface-overlay: #ffffff;
+  --border-default: #d5dce6;
+  --border-subtle: #e7ebf0;
+  --border-accent: #8d9ce8;
+  --border-strong: #9da9b8;
+  --accent-default: #5264c7;
+  --accent-strong: #35469f;
+  --accent-subtle: #e8ebff;
+  --accent-muted: #cdd4ff;
+  --accent-label: #35469f;
+  --accent-fill: #5264c7;
+  --accent-fill-hover: #4355b9;
+  --int-ghost: rgb(82 100 199 / 0.04);
+  --int-subtle: rgb(82 100 199 / 0.08);
+  --int-hover: rgb(82 100 199 / 0.12);
+  --int-active: rgb(82 100 199 / 0.17);
+  --int-glow: rgb(82 100 199 / 0.24);
+  --status-success-fg: #17633b;
+  --status-success-bg: #e8f7ee;
+  --status-success-border: #9bd5b1;
+  --status-warning-fg: #82520b;
+  --status-warning-bg: #fff5dc;
+  --status-warning-border: #e8c879;
+  --status-error-fg: #a12b2b;
+  --status-error-bg: #fff0f0;
+  --status-error-border: #efaaaa;
+  --status-info-fg: #2c478f;
+  --status-info-bg: #edf2ff;
+  --status-info-border: #aebce8;
+  --brand-200: #cdd4ff;
+  --brand-300: #adb8f5;
+  --brand-400: #8d9ce8;
+  --brand-500: #5264c7;
+  --brand-600: #4355b9;
+  --brand-700: #35469f;
+  --green: #2f9b61;
+  --green-deep: #17633b;
+  --amber: #d79324;
+  --amber-deep: #82520b;
+  --red: #d95555;
+  --red-deep: #a12b2b;
+  --shadow-sm: 0 1px 2px rgb(17 24 39 / 0.06);
+  --shadow-md: 0 6px 18px rgb(17 24 39 / 0.09);
+  --shadow-lg: 0 18px 42px rgb(17 24 39 / 0.13);
+  --shadow-card: 0 10px 28px rgb(17 24 39 / 0.08);
+  --shadow-glow: 0 0 0 5px rgb(82 100 199 / 0.14);
+  --shadow-focus: 0 0 0 3px rgb(82 100 199 / 0.3);
+  --shadow-button-hover: 0 6px 16px rgb(67 85 185 / 0.24);
+}

package/templates/base/host/src/main.ts

@@ -0,0 +1,202 @@
+import {
+  HostTopology,
+  attachWireEngine,
+  createMicroDotFromEntry,
+  ensureSection,
+  ensureSlot,
+  findEntry,
+  hrefFor,
+  loadMicroDot,
+  mountOverridesFor,
+  pendingMounts,
+  resolvePlacements,
+  routeForHash,
+  setMicroDotAttribute,
+  topologyRouteTable,
+  unroutedTags,
+} from '@bespokeagentics/microdots-host'
+import type { RouteDefinition } from '@bespokeagentics/microdots-host'
+import { Schema as S } from 'effect'
+import { registry } from 'virtual:microdots-registry'
+
+import topologyDocument from '../topology.json'
+import './styles.css'
+
+const topology = S.decodeUnknownSync(HostTopology)(topologyDocument)
+const routeTable = topologyRouteTable(topology)
+
+const element = (id: string): HTMLElement => {
+  const found = document.getElementById(id)
+  if (found === null) throw new Error(`[host] #${id} is missing`)
+  return found
+}
+
+const oneSection = (route: RouteDefinition): string => {
+  const [sectionId, ...extra] = route.sectionIds
+  if (sectionId === undefined || extra.length > 0) {
+    throw new Error(
+      `[host] starter routes declare exactly one section; ${route.path} has ${route.sectionIds.length}`,
+    )
+  }
+  return sectionId
+}
+
+const unrouted = unroutedTags(
+  routeTable,
+  registry.map(entry => entry.tag),
+)
+if (unrouted.length > 0) {
+  throw new Error(`[host] registered tags with no route: ${unrouted.join(', ')}`)
+}
+
+const manifestSlots = new Set(
+  (topology.slotManifest?.slots ?? []).map(slot => slot.id),
+)
+const generatedRoot = element('generated-sections')
+const sectionElements = new Map<string, HTMLElement>()
+const slotSections = new Map<string, string>()
+
+routeTable.routes.forEach(route => {
+  const sectionId = oneSection(route)
+  const section = ensureSection(sectionId, generatedRoot, 'route-section')
+  sectionElements.set(sectionId, section)
+  resolvePlacements(topology, route.path, 'dev')
+    .filter(placement => placement.state !== 'overridden')
+    .forEach(placement => {
+      if (!manifestSlots.has(placement.slotId)) {
+        throw new Error(`[host] slot ${placement.slotId} is absent from slotManifest`)
+      }
+      const previous = slotSections.get(placement.slotId)
+      if (previous !== undefined && previous !== sectionId) {
+        throw new Error(
+          `[host] slot ${placement.slotId} is assigned to both ${previous} and ${sectionId}`,
+        )
+      }
+      slotSections.set(placement.slotId, sectionId)
+      ensureSlot(placement.slotId, section, 'microdot-slot')
+    })
+})
+
+const unusedSlots = [...manifestSlots].filter(slot => !slotSections.has(slot))
+if (unusedSlots.length > 0) {
+  throw new Error(`[host] slotManifest has unused slots: ${unusedSlots.join(', ')}`)
+}
+
+const nav = element('route-nav')
+const navLinks = new Map<string, HTMLAnchorElement>()
+routeTable.routes.forEach(route => {
+  const link = document.createElement('a')
+  link.href = hrefFor(route)
+  link.textContent = route.label
+  link.className = 'shell-nav__link'
+  nav.appendChild(link)
+  navLinks.set(route.path, link)
+})
+
+const mountedTags = new Set<string>()
+const mountedElements = new Map<string, HTMLElement>()
+let currentTheme = 'neutral'
+
+const panel = (slot: HTMLElement, title: string, detail: string, error = false): void => {
+  const wrapper = document.createElement('div')
+  wrapper.className = error ? 'placeholder placeholder--error' : 'placeholder'
+  const heading = document.createElement('h2')
+  heading.textContent = title
+  const copy = document.createElement('p')
+  copy.textContent = detail
+  wrapper.append(heading, copy)
+  slot.replaceChildren(wrapper)
+}
+
+const mountRoute = async (route: RouteDefinition): Promise<void> => {
+  const pending = pendingMounts(
+    resolvePlacements(topology, route.path, 'dev'),
+    mountedTags,
+  )
+  pending.forEach(placement => mountedTags.add(placement.tag))
+
+  const outcomes = await Promise.allSettled(
+    pending.map(async placement => {
+      const slot = element(placement.slotId)
+      const entry = findEntry(registry, placement.tag)
+      if (entry === undefined) {
+        panel(
+          slot,
+          `<${placement.tag}>`,
+          'Routed, not built. Add this dot when the route is ready.',
+        )
+        return
+      }
+      try {
+        await loadMicroDot(entry.bundle, entry.tag)
+        const mounted = createMicroDotFromEntry(
+          entry,
+          location.hostname,
+          mountOverridesFor(placement.values, { theme: currentTheme }),
+        )
+        slot.replaceChildren(mounted)
+        mountedElements.set(entry.tag, mounted)
+      } catch (error) {
+        panel(
+          slot,
+          `<${entry.tag}> failed to load`,
+          error instanceof Error ? error.message : String(error),
+          true,
+        )
+      }
+    }),
+  )
+  outcomes.forEach(outcome => {
+    if (outcome.status === 'rejected') console.error('[host] mount failed', outcome.reason)
+  })
+}
+
+const applyRoute = (): void => {
+  const route = routeForHash(routeTable, location.hash)
+  const visible = new Set(route.sectionIds)
+  sectionElements.forEach((section, id) => {
+    section.hidden = !visible.has(id)
+  })
+  navLinks.forEach((link, path) => {
+    if (path === route.path) link.setAttribute('aria-current', 'page')
+    else link.removeAttribute('aria-current')
+  })
+  document.title = route.title
+  void mountRoute(route)
+}
+
+const wireLog = element('wire-log')
+attachWireEngine({
+  topology,
+  env: 'dev',
+  onTrace: trace => {
+    wireLog.textContent =
+      trace._tag === 'watch'
+        ? `watch ${trace.event}: ${JSON.stringify(trace.payload)}`
+        : `wire ${trace.wireId}: ${trace.delivery._tag}`
+  },
+})
+
+const themeSwitcherNode = element('theme-switcher')
+const themeLinkNode = element('active-theme')
+if (!(themeSwitcherNode instanceof HTMLSelectElement)) {
+  throw new Error('[host] #theme-switcher must be a select')
+}
+if (!(themeLinkNode instanceof HTMLLinkElement)) {
+  throw new Error('[host] #active-theme must be a link')
+}
+const themeSwitcher = themeSwitcherNode
+const themeLink = themeLinkNode
+const applyTheme = (): void => {
+  currentTheme = themeSwitcher.value
+  document.documentElement.setAttribute('data-theme', currentTheme)
+  themeLink.href = `/themes/${currentTheme}.css`
+  mountedElements.forEach(mounted => {
+    setMicroDotAttribute(mounted, 'theme', currentTheme)
+  })
+}
+themeSwitcher.addEventListener('change', applyTheme)
+window.addEventListener('hashchange', applyRoute)
+
+applyTheme()
+applyRoute()

package/templates/base/host/src/topology.test.ts

@@ -0,0 +1,42 @@
+import { Schema as S } from 'effect'
+import { describe, expect, test } from 'vitest'
+
+import {
+  HostTopology,
+  topologyRouteTable,
+  unroutedTags,
+} from '@bespokeagentics/microdots-host'
+
+import { listMicroDots } from '../../scripts/discover.ts'
+import topologyDocument from '../topology.json'
+
+const topology = S.decodeUnknownSync(HostTopology)(topologyDocument)
+
+describe('starter topology', () => {
+  test('omits the aggregate overview and uses / as fallback', () => {
+    expect(topology.overview).toBeUndefined()
+    expect(topologyRouteTable(topology).fallback.path).toBe('/')
+  })
+
+  test('uses one section per route so generated slots have one owner', () => {
+    expect(topology.routes.every(route => route.sectionIds.length === 1)).toBe(
+      true,
+    )
+  })
+
+  test('routes every registered starter tag', () => {
+    const tags = listMicroDots().flatMap(dot => dot.tags)
+    expect(unroutedTags(topologyRouteTable(topology), tags)).toEqual([])
+  })
+
+  test('declares the direct scope-to-pulse wire', () => {
+    const tags = listMicroDots().flatMap(dot => dot.tags)
+    const [wire] = topology.wires
+    expect(topology.wires).toHaveLength(1)
+    expect(wire?.transform._tag).toBe('direct')
+    expect(wire?.fieldType).toBe('string')
+    expect(wire?.inputType).toBe('string')
+    expect(tags).toContain(wire?.from)
+    expect(tags).toContain(wire?.to)
+  })
+})

package/templates/base/host/topology.json

@@ -0,0 +1,84 @@
+{
+  "host": {
+    "id": "starter-host",
+    "label": "MicroDots Host Starter",
+    "ownedInputs": []
+  },
+  "routes": [
+    {
+      "path": "/",
+      "label": "Live demo",
+      "title": "Live demo · MicroDots Host Starter",
+      "sectionIds": ["section-demo"],
+      "mounts": [
+        {
+          "id": "scope-picker-main",
+          "tag": "starter-scope-picker",
+          "slotId": "scope-picker-slot",
+          "order": 1
+        },
+        {
+          "id": "pulse-main",
+          "tag": "starter-pulse",
+          "slotId": "pulse-slot",
+          "values": { "scope-id": "general" },
+          "order": 2
+        }
+      ]
+    },
+    {
+      "path": "/reports",
+      "label": "Reports",
+      "title": "Reports · MicroDots Host Starter",
+      "sectionIds": ["section-reports"],
+      "mounts": [
+        {
+          "id": "reports-future",
+          "tag": "starter-reports",
+          "slotId": "reports-slot",
+          "order": 1
+        }
+      ]
+    },
+    {
+      "path": "/settings",
+      "label": "Settings",
+      "title": "Settings · MicroDots Host Starter",
+      "sectionIds": ["section-settings"],
+      "mounts": [
+        {
+          "id": "settings-future",
+          "tag": "starter-settings",
+          "slotId": "settings-slot",
+          "order": 1
+        }
+      ]
+    }
+  ],
+  "slotManifest": {
+    "theme": { "name": "starter-neutral", "version": "1.0.0" },
+    "slots": [
+      { "id": "scope-picker-slot", "kind": "band", "row": 1, "capacity": 1 },
+      { "id": "pulse-slot", "kind": "band", "row": 1, "capacity": 1 },
+      { "id": "reports-slot", "kind": "band", "row": 1, "capacity": 1 },
+      { "id": "settings-slot", "kind": "band", "row": 1, "capacity": 1 }
+    ]
+  },
+  "rules": [],
+  "wires": [
+    {
+      "id": "scope-to-pulse",
+      "from": "starter-scope-picker",
+      "event": "scope-selected",
+      "field": "id",
+      "fieldType": "string",
+      "to": "starter-pulse",
+      "input": "scope-id",
+      "inputType": "string",
+      "transform": { "_tag": "direct" },
+      "envs": ["dev", "preview", "prod"],
+      "plain": "When a scope is selected, reconfigure the pulse readout."
+    }
+  ],
+  "watch": [{ "event": "heartbeat-observed" }]
+}

package/templates/base/host/vite.base.ts

@@ -0,0 +1,41 @@
+import { existsSync, readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import type { Plugin, UserConfig } from 'vite'
+
+import { microDotRegistryPlugin } from '../scripts/discover.ts'
+
+const BUNDLE_ROUTE = '/microdots/'
+const bundleDirectory = fileURLToPath(
+  new URL('./public/microdots', import.meta.url),
+)
+
+const serveMicroDotBundles = (): Plugin => ({
+  name: 'starter:serve-microdot-bundles',
+  apply: 'serve',
+  configureServer(server) {
+    server.middlewares.use((request, response, next) => {
+      const url = request.url ?? ''
+      if (!url.startsWith(BUNDLE_ROUTE)) {
+        next()
+        return
+      }
+      const fileName = url.slice(BUNDLE_ROUTE.length).split('?')[0] ?? ''
+      const filePath = join(bundleDirectory, fileName)
+      if (fileName === '' || fileName.includes('..') || !existsSync(filePath)) {
+        next()
+        return
+      }
+      response.setHeader('Content-Type', 'text/javascript; charset=utf-8')
+      response.setHeader('Cache-Control', 'no-store')
+      response.end(readFileSync(filePath))
+    })
+  },
+})
+
+export const hostConfig = (plugins: ReadonlyArray<Plugin> = []): UserConfig => ({
+  plugins: [microDotRegistryPlugin(), serveMicroDotBundles(), ...plugins],
+  server: { port: 5190, strictPort: true },
+  preview: { port: 5190, strictPort: true },
+  build: { target: 'esnext' },
+})

package/templates/base/microdots/pulse/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@starter/pulse",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "microdot": {
+    "tags": ["starter-pulse"],
+    "port": 3202,
+    "bundle": "pulse.js"
+  },
+  "exports": { "./contract": "./src/contract.ts" },
+  "dependencies": {
+    "@bespokeagentics/microdots-element": "0.1.1",
+    "@bespokeagentics/microdots-runtime": "0.1.1",
+    "@bespokeagentics/microdots-theme": "0.1.1",
+    "@effect/platform-node": "4.0.0-rc.108",
+    "effect": "4.0.0-rc.108",
+    "foldkit": "^0.144.0"
+  }
+}

package/templates/base/microdots/pulse/service/handlers.ts

@@ -0,0 +1,36 @@
+import { Context, Effect, Layer } from 'effect'
+
+import { type Heartbeat, PulseRpcs } from '../src/contract.ts'
+
+export class PulseCounter extends Context.Service<
+  PulseCounter,
+  { readonly next: (scopeId: string) => Effect.Effect<number> }
+>()('PulseCounter') {}
+
+export const PulseCounterLive = Layer.sync(PulseCounter, () => {
+  const sequences = new Map<string, number>()
+  return {
+    next: scopeId =>
+      Effect.sync(() => {
+        const sequence = (sequences.get(scopeId) ?? 0) + 1
+        sequences.set(scopeId, sequence)
+        return sequence
+      }),
+  }
+})
+
+export const PulseHandlersLive = PulseRpcs.toLayer({
+  GetHeartbeat: ({ scopeId }) =>
+    Effect.gen(function* () {
+      const counter = yield* PulseCounter
+      const sequence = yield* counter.next(scopeId)
+      const heartbeat: Heartbeat = {
+        id: `${scopeId}-${sequence}`,
+        sequence,
+        observedAt: new Date().toISOString(),
+        service: 'pulse@3202',
+        scopeId,
+      }
+      return heartbeat
+    }),
+}).pipe(Layer.provide(PulseCounterLive))

package/templates/base/microdots/pulse/service/main.ts

@@ -0,0 +1,30 @@
+import { Layer } from 'effect'
+import { RpcSerialization, RpcServer } from 'effect/unstable/rpc'
+import {
+  makeRpcService,
+  runRpcService,
+} from '@bespokeagentics/microdots-runtime/service'
+
+import { PulseRpcs } from '../src/contract.ts'
+import { PulseHandlersLive } from './handlers.ts'
+
+const rpcLayer = RpcServer.layerHttp({
+  group: PulseRpcs,
+  path: '/rpc',
+  // Omitting this silently selects WebSocket while the browser POSTs HTTP.
+  protocol: 'http',
+}).pipe(
+  Layer.provide(PulseHandlersLive),
+  Layer.provide(RpcSerialization.layerNdjson),
+)
+
+runRpcService(
+  makeRpcService({
+    rpcLayer,
+    port: 3202,
+    allowedOrigins: [
+      'http://localhost:5190',
+      'http://127.0.0.1:5190',
+    ],
+  }),
+)