@jr2/orchestrator 0.1.0

package/console/style.css

@@ -0,0 +1,700 @@
+/* The jr2 Console — dark schematic. One committed look: ink canvas with a faint dot grid,
+   monospace instrumentation type, phosphor-green live highlight. */
+
+:root {
+  --ink: #0a0f1a;
+  --ink-2: #0e1524;
+  --line: #223048;
+  --line-soft: #182338;
+  --text: #c8d6e8;
+  --text-dim: #5f7189;
+  --phosphor: #4ef0a7;
+  --phosphor-soft: rgba(78, 240, 167, 0.12);
+  --amber: #f0c04e;
+  --red: #f06a5f;
+  --blue: #6aa7f0;
+  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  height: 100%;
+  background: var(--ink);
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 13px;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+/* The vdom's mount root (ADR-0034): layout-transparent, so body's flex column still reaches the
+   header/main the components render. */
+#root {
+  display: contents;
+}
+
+header {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--line);
+  background: var(--ink-2);
+}
+
+.mark {
+  color: var(--ink);
+  background: var(--phosphor);
+  font-weight: 700;
+  padding: 1px 7px;
+  border-radius: 3px;
+  letter-spacing: 0.05em;
+}
+
+header h1 {
+  font-size: 15px;
+  font-weight: 600;
+  margin: 0;
+  letter-spacing: 0.04em;
+}
+.dim {
+  color: var(--text-dim);
+}
+
+.zoom {
+  margin-left: auto;
+  display: flex;
+  gap: 4px;
+}
+
+button {
+  font: inherit;
+  color: var(--text);
+  background: transparent;
+  border: 1px solid var(--line);
+  border-radius: 3px;
+  padding: 1px 8px;
+  cursor: pointer;
+}
+button:hover {
+  border-color: var(--phosphor);
+  color: var(--phosphor);
+}
+
+main {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+
+#canvas {
+  flex: 1;
+  overflow: hidden; /* the viewport transform moves the diagram; nothing here scrolls */
+  display: flex;
+  flex-direction: column;
+  background-image: radial-gradient(var(--line-soft) 1px, transparent 1px);
+  background-size: 22px 22px;
+  cursor: grab;
+}
+
+#canvas.panning {
+  cursor: grabbing;
+  user-select: none;
+}
+
+#machine-svg {
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  display: block;
+}
+
+/* The notices sit in flow above the diagram; the old canvas padding lives on them now. */
+#placeholder,
+#error {
+  margin: 28px 28px 0;
+}
+
+#root-transitions {
+  margin: 28px 28px 16px;
+}
+
+#error {
+  max-width: 520px;
+  border: 1px solid var(--red);
+  border-radius: 4px;
+  padding: 14px 18px;
+  color: var(--red);
+  background: var(--ink-2);
+}
+#error .dim {
+  display: block;
+  margin-top: 8px;
+  color: var(--text-dim);
+}
+/* A caveat about the diagram, not a failure to draw one — see `opaqueStates`. */
+#error.notice {
+  border-color: var(--amber);
+  color: var(--amber);
+}
+
+#root-transitions {
+  display: flex;
+  gap: 18px;
+  flex-wrap: wrap;
+  margin-bottom: 16px;
+}
+#root-transitions span {
+  color: var(--text-dim);
+  border: 1px dashed var(--line);
+  border-radius: 3px;
+  padding: 2px 8px;
+}
+#root-transitions:empty {
+  display: none;
+}
+
+/* ---- Machine (SVG) ---- */
+
+/* Every box is click-to-select (outline only — the click is reserved beyond that). */
+.state {
+  cursor: pointer;
+}
+.state > rect {
+  fill: var(--ink-2);
+  stroke: var(--line);
+  stroke-width: 1.2;
+  transition:
+    stroke 0.25s,
+    fill 0.25s,
+    filter 0.25s;
+}
+.state--compound > rect,
+.state--parallel > rect {
+  fill: rgba(14, 21, 36, 0.55);
+}
+.state--parallel > rect {
+  stroke-dasharray: 5 4;
+}
+.state--final > rect.final-inner {
+  fill: none;
+  stroke: var(--line);
+}
+.state-title {
+  fill: var(--text);
+  font: 600 13px var(--mono);
+  letter-spacing: 0.03em;
+}
+.state-row {
+  fill: var(--text-dim);
+  font: 12px var(--mono);
+}
+.state-row--invoke {
+  fill: var(--blue);
+}
+.state-row--self {
+  fill: var(--text-dim);
+}
+.state-row--tags {
+  fill: var(--amber);
+}
+
+.state.active > rect:first-of-type {
+  stroke: var(--phosphor);
+  stroke-width: 1.8;
+  fill: var(--phosphor-soft);
+  filter: drop-shadow(0 0 6px rgba(78, 240, 167, 0.55));
+}
+.state.active > .state-title {
+  fill: var(--phosphor);
+}
+
+/* The selected node: outline only, one at a time. Declared after `.active` so the stroke wins on a
+   box that is both, while the live fill and glow stay. */
+.state.selected > rect:first-of-type {
+  stroke: var(--text);
+  stroke-width: 2.2;
+}
+
+/* The gate pin (ADR-0032): this run is parked here, waiting for outside input. Amber, like the
+   inbox card it mirrors. */
+.gate-pin {
+  fill: var(--amber);
+  font: 13px var(--mono);
+  filter: drop-shadow(0 0 4px rgba(240, 192, 78, 0.6));
+}
+
+/* ---- Child machines: one subgraph per live instance, or a dimmed template when none ---- */
+
+.child-machine > rect {
+  fill: rgba(106, 167, 240, 0.04);
+  stroke: var(--blue);
+  stroke-width: 1.2;
+  stroke-dasharray: 2 3;
+}
+.child-machine > .state-title {
+  fill: var(--blue);
+}
+.child-machine:hover > rect {
+  stroke-width: 1.8;
+}
+.child-machine--template {
+  opacity: 0.55;
+}
+.child-machine--collapsed > rect {
+  stroke-dasharray: none;
+}
+.child-machine.active > rect:first-of-type {
+  fill: rgba(78, 240, 167, 0.05);
+}
+.state-row--dim {
+  fill: var(--text-dim);
+}
+
+/* The ⊞/⊟ fold control, top-right of a child-machine box — folding moved OFF the box body, which
+   now selects like any other node. */
+.fold-icon > rect {
+  fill: var(--ink);
+  stroke: var(--line);
+  stroke-width: 1;
+}
+.fold-icon > text {
+  fill: var(--text-dim);
+  font: 12px var(--mono);
+}
+.fold-icon:hover > rect {
+  stroke: var(--blue);
+}
+.fold-icon:hover > text {
+  fill: var(--blue);
+}
+
+.initial-dot {
+  fill: var(--text-dim);
+}
+
+.edge path {
+  fill: none;
+  stroke: var(--text-dim);
+  stroke-width: 1.2;
+}
+.edge-label {
+  fill: var(--text);
+  font: 11px var(--mono);
+  paint-order: stroke;
+  stroke: var(--ink);
+  stroke-width: 3px;
+}
+.edge--initial path {
+  stroke: var(--text-dim);
+}
+.edge--always path {
+  stroke-dasharray: 4 3;
+}
+.edge--done path {
+  stroke: var(--phosphor);
+  opacity: 0.75;
+}
+.edge--done .edge-label {
+  fill: var(--phosphor);
+}
+.edge--error path {
+  stroke: var(--red);
+}
+.edge--error .edge-label {
+  fill: var(--red);
+}
+.edge--after path {
+  stroke-dasharray: 1 3;
+  stroke-linecap: round;
+}
+
+marker path {
+  fill: var(--text-dim);
+}
+marker.arrow--done path {
+  fill: var(--phosphor);
+}
+marker.arrow--error path {
+  fill: var(--red);
+}
+
+/* ---- Nav (breadcrumb · connection · attention · token) ---- */
+
+#breadcrumb {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+#breadcrumb a {
+  text-decoration: none;
+}
+
+/* The feed's state. `retrying` is normal and self-healing (EventSource reconnects on its own), so it
+   is a caution and not an error — the page is not lying about anything while it says so. `idle` is
+   `/`: no selection, no socket. */
+.conn {
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  color: var(--text-dim);
+}
+.conn--live {
+  color: var(--phosphor);
+}
+.conn--retrying {
+  color: var(--amber);
+}
+
+#attention-badge {
+  border-color: var(--amber);
+  color: var(--amber);
+}
+#attention-badge:hover {
+  border-color: var(--amber);
+  color: var(--ink);
+  background: var(--amber);
+}
+
+/* The token field (ADR-0032): the page's one credential, entered here and nowhere else. */
+#token-box {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+#token {
+  font: inherit;
+  color: var(--text);
+  background: var(--ink);
+  border: 1px solid var(--line);
+  border-radius: 3px;
+  padding: 2px 8px;
+  width: 150px;
+}
+#token:focus {
+  outline: none;
+  border-color: var(--phosphor);
+}
+.token-state {
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  min-width: 42px;
+  color: var(--text-dim);
+}
+.token-state--live {
+  color: var(--phosphor);
+}
+.token-state--invalid {
+  color: var(--red);
+}
+
+/* ---- Panels shared ---- */
+
+#fleet,
+#drawer {
+  width: 280px;
+  background: var(--ink-2);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+#fleet {
+  border-right: 1px solid var(--line);
+}
+#drawer {
+  border-left: 1px solid var(--line);
+}
+
+.sidebar-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px 6px;
+}
+.sidebar-head h2 {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+}
+
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0 8px 8px;
+}
+
+.empty {
+  color: var(--text-dim);
+  cursor: default;
+  padding: 7px 9px;
+}
+
+#placeholder {
+  color: var(--text-dim);
+  padding: 14px 18px;
+  border: 1px dashed var(--line);
+  border-radius: 4px;
+  max-width: 320px;
+}
+
+/* ---- The fleet rail: workflows, each expandable to its runs ---- */
+
+.wf {
+  margin: 2px 0;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+.wf--selected {
+  border-color: var(--line);
+  background: rgba(78, 240, 167, 0.04);
+}
+
+.wf-head {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  padding: 6px 8px;
+  cursor: pointer;
+}
+.wf-head:hover .wf-name {
+  color: var(--phosphor);
+}
+.wf--selected .wf-name {
+  color: var(--phosphor);
+}
+.wf-caret {
+  border: none;
+  padding: 0 2px;
+  color: var(--text-dim);
+}
+.wf-name {
+  color: var(--text);
+  letter-spacing: 0.03em;
+}
+.wf-count {
+  color: var(--text-dim);
+  font-size: 11px;
+}
+.wf-start-btn {
+  margin-left: auto;
+  font-size: 11px;
+  padding: 0 6px;
+}
+
+.wf-runs {
+  padding: 0 4px 6px 18px;
+}
+.wf-runs li {
+  padding: 5px 8px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+}
+.wf-runs li:hover {
+  border-color: var(--line);
+}
+.wf-runs li.selected {
+  border-color: var(--phosphor);
+  background: var(--phosphor-soft);
+}
+.wf-runs .run-id {
+  color: var(--text);
+}
+.wf-runs .run-status {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--text-dim);
+}
+.wf-runs li.selected .run-status {
+  color: var(--phosphor);
+}
+.wf-runs .run-status.status--error {
+  color: var(--red);
+}
+.wf-runs .run-status.status--done {
+  color: var(--phosphor);
+}
+/* Runs this page watched finish. Dimmed, but still selectable: where a run ENDED is worth reading,
+   and it is the client's own memory — a reload starts empty (ADR-0014/0022). */
+.wf-runs li.settled .run-id {
+  color: var(--text-dim);
+}
+
+.gate-badge {
+  color: var(--amber);
+  font-size: 11px;
+}
+
+/* ---- The drawer: Attention (gate inbox) + Activity (emit log) ---- */
+
+.drawer-tabs {
+  display: flex;
+  gap: 4px;
+  padding: 10px 12px 6px;
+}
+.drawer-tabs button {
+  font-size: 11px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+  border-color: transparent;
+}
+.drawer-tabs button.tab--active {
+  color: var(--text);
+  border-color: var(--line);
+}
+
+.inbox-scope {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 12px 6px;
+  color: var(--text-dim);
+  font-size: 11px;
+  cursor: pointer;
+}
+
+/* A gate card: one parked decision — meta to read, one form per accepted event. Emptied only by
+   the next frame's re-fetch coming back bare, never by this page's own bookkeeping (ADR-0032). */
+.gate-card {
+  border: 1px solid var(--amber);
+  border-radius: 4px;
+  margin: 6px 0;
+  padding: 8px 10px;
+  background: var(--ink);
+}
+.gate-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  cursor: pointer;
+}
+.gate-id {
+  color: var(--amber);
+}
+.gate-head:hover .gate-id {
+  text-decoration: underline;
+}
+.gate-meta {
+  margin: 6px 0 0;
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 2px 10px;
+}
+.gate-meta dt {
+  color: var(--text-dim);
+}
+.gate-meta dd {
+  margin: 0;
+  color: var(--text);
+  overflow-wrap: anywhere;
+}
+.gate-event {
+  margin-top: 8px;
+  border-top: 1px solid var(--line-soft);
+  padding-top: 6px;
+}
+.gate-event-name {
+  color: var(--blue);
+  margin-bottom: 4px;
+}
+
+#emit-log li {
+  padding: 5px 9px;
+  color: var(--amber);
+  border-left: 2px solid var(--amber);
+  margin: 4px 0;
+  animation: emit-in 0.3s ease-out;
+}
+#emit-log li.empty {
+  color: var(--text-dim);
+  border-left-color: transparent;
+  animation: none;
+}
+#emit-log .dim {
+  margin-left: 6px;
+}
+
+@keyframes emit-in {
+  from {
+    opacity: 0;
+    transform: translateX(6px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* ---- The shared form (start-run + gate delivery — ADR-0033) ---- */
+
+.start-form {
+  padding: 0 8px 8px;
+  color: var(--text-dim);
+}
+
+.schema-form {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 4px;
+}
+.schema-form label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.schema-form label > span {
+  color: var(--text-dim);
+  min-width: 72px;
+}
+.schema-form input[type="text"],
+.schema-form input[type="number"],
+.schema-form select,
+.schema-form textarea {
+  font: inherit;
+  color: var(--text);
+  background: var(--ink);
+  border: 1px solid var(--line);
+  border-radius: 3px;
+  padding: 2px 8px;
+  flex: 1;
+  min-width: 0;
+}
+.schema-form textarea {
+  resize: vertical;
+}
+.schema-form input:focus,
+.schema-form select:focus,
+.schema-form textarea:focus {
+  outline: none;
+  border-color: var(--phosphor);
+}
+.schema-form button[type="submit"] {
+  align-self: flex-start;
+}
+
+/* The server's 400 body, rendered where the reader typed — it names the accepted shape, so the
+   error text IS the form's documentation. */
+.form-error {
+  color: var(--red);
+  border: 1px solid var(--red);
+  border-radius: 3px;
+  padding: 4px 8px;
+  overflow-wrap: anywhere;
+}

package/console/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  // The Console's checker config (ADR-0034): browser code, so it gets the DOM libs the package
+  // tsconfig deliberately withholds from Node code — which is why console/ has its own project
+  // instead of a place in the main include. `moduleResolution: "Bundler"` because the browser
+  // resolves bare specifiers through the page's import map, not Node's algorithm; imports keep
+  // their `.ts` extensions because the server serves the source erased, never compiled. `tsc`
+  // here is a checker, never an emitter — the typecheck script runs both projects.
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  },
+  "include": ["*.ts", "components/*.ts"]
+}