docs: split organization pages and simplify diagram controls

diagrams/organization-structure.architecture.json

@@ -121,11 +121,11 @@
       "label": "Product Management",
       "sublabel": "Strategy, priorities and outcomes",
       "pos": [
-        40,
+        100,
         480
       ],
       "size": [
-        280,
+        220,
         80
       ]
     },
@@ -135,11 +135,11 @@
       "label": "Product Design",
       "sublabel": "Research and experience design",
       "pos": [
-        40,
+        100,
         620
       ],
       "size": [
-        280,
+        220,
         80
       ]
     },
@@ -149,11 +149,11 @@
       "label": "Product Engineering",
       "sublabel": "Marketplace software delivery",
       "pos": [
-        360,
+        420,
         480
       ],
       "size": [
-        280,
+        220,
         80
       ]
     },
@@ -163,11 +163,11 @@
       "label": "Platform & IT",
       "sublabel": "Reliability and internal systems",
       "pos": [
-        360,
+        420,
         620
       ],
       "size": [
-        280,
+        220,
         80
       ]
     },
@@ -177,11 +177,11 @@
       "label": "Architecture & Security",
       "sublabel": "Technical standards and protection",
       "pos": [
-        360,
+        420,
         760
       ],
       "size": [
-        280,
+        220,
         80
       ]
     },
@@ -191,11 +191,11 @@
       "label": "Quality Engineering",
       "sublabel": "Testing and release quality",
       "pos": [
-        360,
+        420,
         900
       ],
       "size": [
-        280,
+        220,
         80
       ]
     },
@@ -205,11 +205,11 @@
       "label": "Data & AI",
       "sublabel": "Analytics, ML and AI enablement",
       "pos": [
-        360,
+        420,
         1040
       ],
       "size": [
-        280,
+        220,
         80
       ]
     },
@@ -219,11 +219,11 @@
       "label": "Operations Squad",
       "sublabel": "Service, resolution, risk and quality",
       "pos": [
-        680,
+        740,
         480
       ],
       "size": [
-        280,
+        220,
         80
       ]
     },
@@ -233,11 +233,11 @@
       "label": "Marketing Squad",
       "sublabel": "Brand, acquisition and retention",
       "pos": [
-        1000,
+        1060,
         480
       ],
       "size": [
-        280,
+        220,
         80
       ]
     },
@@ -247,11 +247,11 @@
       "label": "Finance & Accounting Squad",
       "sublabel": "Planning, controls and payments",
       "pos": [
-        1320,
+        1380,
         480
       ],
       "size": [
-        280,
+        220,
         80
       ]
     },
@@ -261,11 +261,11 @@
       "label": "People & Administration Squad",
       "sublabel": "Talent, people and workplace",
       "pos": [
-        1640,
+        1700,
         480
       ],
       "size": [
-        280,
+        220,
         80
       ]
     }
@@ -275,103 +275,137 @@
       "id": "management-product",
       "from": "management",
       "to": "product",
-      "variant": "default"
+      "variant": "default",
+      "fromSide": "bottom",
+      "toSide": "top"
     },
     {
       "id": "management-technology",
       "from": "management",
       "to": "technology",
-      "variant": "default"
+      "variant": "default",
+      "fromSide": "bottom",
+      "toSide": "top"
     },
     {
       "id": "management-operations",
       "from": "management",
       "to": "operations",
-      "variant": "default"
+      "variant": "default",
+      "fromSide": "bottom",
+      "toSide": "top"
     },
     {
       "id": "management-marketing",
       "from": "management",
       "to": "marketing",
-      "variant": "default"
+      "variant": "default",
+      "fromSide": "bottom",
+      "toSide": "top"
     },
     {
       "id": "management-finance",
       "from": "management",
       "to": "finance",
-      "variant": "default"
+      "variant": "default",
+      "fromSide": "bottom",
+      "toSide": "top"
     },
     {
       "id": "management-people",
       "from": "management",
       "to": "people",
-      "variant": "default"
+      "variant": "default",
+      "fromSide": "bottom",
+      "toSide": "top"
     },
     {
       "id": "product-1",
       "from": "product",
       "to": "product-team-1",
-      "variant": "default"
+      "variant": "default",
+      "fromSide": "bottom",
+      "toSide": "left"
     },
     {
       "id": "product-2",
       "from": "product",
       "to": "product-team-2",
-      "variant": "default"
+      "variant": "default",
+      "fromSide": "bottom",
+      "toSide": "left"
     },
     {
       "id": "technology-1",
       "from": "technology",
       "to": "technology-team-1",
-      "variant": "default"
+      "variant": "default",
+      "fromSide": "bottom",
+      "toSide": "left"
     },
     {
       "id": "technology-2",
       "from": "technology",
       "to": "technology-team-2",
-      "variant": "default"
+      "variant": "default",
+      "fromSide": "bottom",
+      "toSide": "left"
     },
     {
       "id": "technology-3",
       "from": "technology",
       "to": "technology-team-3",
-      "variant": "default"
+      "variant": "default",
+      "fromSide": "bottom",
+      "toSide": "left"
     },
     {
       "id": "technology-4",
       "from": "technology",
       "to": "technology-team-4",
-      "variant": "default"
+      "variant": "default",
+      "fromSide": "bottom",
+      "toSide": "left"
     },
     {
       "id": "technology-5",
       "from": "technology",
       "to": "technology-team-5",
-      "variant": "default"
+      "variant": "default",
+      "fromSide": "bottom",
+      "toSide": "left"
     },
     {
       "id": "operations-1",
       "from": "operations",
       "to": "operations-team-1",
-      "variant": "default"
+      "variant": "default",
+      "fromSide": "bottom",
+      "toSide": "left"
     },
     {
       "id": "marketing-1",
       "from": "marketing",
       "to": "marketing-team-1",
-      "variant": "default"
+      "variant": "default",
+      "fromSide": "bottom",
+      "toSide": "left"
     },
     {
       "id": "finance-1",
       "from": "finance",
       "to": "finance-team-1",
-      "variant": "default"
+      "variant": "default",
+      "fromSide": "bottom",
+      "toSide": "left"
     },
     {
       "id": "people-1",
       "from": "people",
       "to": "people-team-1",
-      "variant": "default"
+      "variant": "default",
+      "fromSide": "bottom",
+      "toSide": "left"
     }
   ],
   "cards": [

docs/contribution/diagrams.md

@@ -21,7 +21,7 @@ The standalone viewer provides pan/zoom, node inspection, search/focus, relation
 
 Create `diagrams/<name>.<type>.json` using the matching schema and authoring guidance in `vendor/archify/schemas/` and `vendor/archify/references/`. Use stable IDs, explicit relationships, and honest evidence labels. Do not include private information merely because the source repository is private: Pages access is a separate platform policy.
 
-Set `meta.output` to `static/diagrams/<name>/index.html`. The build validates the typed source with the upstream showcase profile, renders locally, checks the artifact, and publishes the standalone HTML and a downloadable JSON source.
+Set `meta.output` to `static/diagrams/<name>/index.html`. The build validates the typed source with the upstream showcase profile, renders locally, checks the artifact, and publishes the standalone HTML. Editable JSON stays in the repository; the portal does not publish source-download files.
 
 ```sh
 pnpm diagrams:build
@@ -37,7 +37,7 @@ import ArchifyDiagram from '@site/src/components/ArchifyDiagram';
 <ArchifyDiagram name="organization-structure" title="Eldorado organization structure" />
 ```
 
-Supply a text alternative below each diagram. The wrapper uses a local, base-path-aware iframe with a descriptive title, scripts and downloads enabled, and no same-origin or parent-navigation permissions. The Open full viewer button expands the diagram in a full-screen modal on the current page, with the same iframe sandbox. Close it with the Close button or Escape; focus returns to the opener. It does not open a new tab. The separate standalone HTML asset remains directly addressable and is not itself iframe-sandboxed, so publish only reviewed, trusted diagrams. Generated output is ignored by Git and rebuilt in CI.
+Supply a text alternative below each diagram. The wrapper uses a local, base-path-aware iframe with a descriptive title, scripts and downloads enabled, and no same-origin or parent-navigation permissions. The top-right expand icon expands the diagram in a full-screen modal on the current page, with the same iframe sandbox. Close it with the Close button or Escape; focus returns to the opener. It does not open a new tab. The separate standalone HTML asset remains directly addressable and is not itself iframe-sandboxed, so publish only reviewed, trusted diagrams. Generated output is ignored by Git and rebuilt in CI.
 
 ## Integration boundaries
 

docs/organization/collaboration.mdx

@@ -0,0 +1,23 @@
+---
+title: Collaboration
+description: How Eldorado departments combine their responsibilities to deliver shared business outcomes.
+---
+
+Departments collaborate around shared outcomes while retaining their own team ownership and accountability. See [Structure](./structure.mdx) for department and squad responsibilities.
+
+## How the departments work together
+
+| Business outcome | Collaboration |
+| --- | --- |
+| Better buyer experience | Product defines improvements; Technology delivers them; Operations brings customer feedback; Data & AI measures the result. |
+| Stronger seller experience | Product and Technology develop seller tools; Operations supports sellers; Finance manages financial processes. |
+| Safe and trustworthy trading | Risk & Fraud, Trust & Resolution, Architecture & Security, and Finance coordinate controls and incident responses. |
+| Sustainable growth | Marketing develops demand; Product improves conversion and retention; Finance measures profitability. |
+| AI-powered execution | Data & AI supports engineering and develops marketplace intelligence; Operations improves service and quality workflows. |
+
+Department leaders remain accountable for outcomes, controls and service quality as AI becomes part of everyday work.
+
+## Related pages
+
+- [Structure](./structure.mdx) — departments, squads and responsibilities.
+- [SDLC — Software Delivery Life Cycle](./sdlc.mdx) — leadership and delivery responsibilities.

docs/organization/sdlc.mdx

@@ -0,0 +1,27 @@
+---
+title: SDLC — Software Delivery Life Cycle
+sidebar_label: SDLC
+description: Leadership, reporting lines and team responsibilities supporting software delivery at Eldorado.
+---
+
+import ArchifyDiagram from '@site/src/components/ArchifyDiagram';
+
+Software delivery brings together Product and Technology, supported by the departments responsible for marketplace operations and growth. This page describes the leadership and delivery responsibilities that support that work.
+
+## Leadership and delivery structure
+
+<ArchifyDiagram name="organization-reporting" compact title="Eldorado leadership and delivery structure" />
+
+The diagram shows management responsibility from leader to role or team:
+
+- **CTO → Head of Engineering → Group Engineering Managers → Engineering Managers → the Product Engineering team.**
+- **CTO → AI Architect**, coordinating engineering AI enablement.
+- **COO → Operational Quality**, providing independent quality oversight.
+- **CMO → Brand Team Lead**, leading Brand & Community.
+
+Product and Technology retain separate team ownership and reporting lines. Their teams coordinate priorities, design, engineering, quality and data work to deliver business outcomes.
+
+## Related pages
+
+- [Structure](./structure.mdx) — departments, squads and responsibilities.
+- [Collaboration](./collaboration.mdx) — how departments coordinate around business outcomes.

docs/organization/structure.mdx

@@ -111,27 +111,7 @@ The CFO coordinates Finance & Accounting and works with executive leadership on
 
 HR partners with department leaders on team capacity and development. People Operations works with Platform & IT on employee onboarding, role changes and offboarding.
 
-## Leadership and delivery structure
+## Related pages
 
-<ArchifyDiagram name="organization-reporting" title="Eldorado leadership and delivery structure" />
-
-The diagram shows management responsibility from leader to role or team:
-
-- **CTO → Head of Engineering → Group Engineering Managers → Engineering Managers → the Product Engineering team.**
-- **CTO → AI Architect**, coordinating engineering AI enablement.
-- **COO → Operational Quality**, providing independent quality oversight.
-- **CMO → Brand Team Lead**, leading Brand & Community.
-
-Product and Technology retain separate team ownership and reporting lines. Their teams coordinate priorities, design, engineering, quality and data work to deliver business outcomes.
-
-## How the departments work together
-
-| Business outcome | Collaboration |
-| --- | --- |
-| Better buyer experience | Product defines improvements; Technology delivers them; Operations brings customer feedback; Data & AI measures the result. |
-| Stronger seller experience | Product and Technology develop seller tools; Operations supports sellers; Finance manages financial processes. |
-| Safe and trustworthy trading | Risk & Fraud, Trust & Resolution, Architecture & Security, and Finance coordinate controls and incident responses. |
-| Sustainable growth | Marketing develops demand; Product improves conversion and retention; Finance measures profitability. |
-| AI-powered execution | Data & AI supports engineering and develops marketplace intelligence; Operations improves service and quality workflows. |
-
-Department leaders remain accountable for outcomes, controls and service quality as AI becomes part of everyday work.
+- [Collaboration](./collaboration.mdx) — how departments work together on business outcomes.
+- [SDLC — Software Delivery Life Cycle](./sdlc.mdx) — leadership and delivery responsibilities.

scripts/build-diagrams.mjs

@@ -24,7 +24,6 @@ for (const file of readdirSync('diagrams').sort()) {
   run(['deliver',type,input,output,'--quality','showcase','--json']);
   run(['check',output,'--json','--require-provenance']);
   renameSync(`static/diagrams/${name}/index.delivery.json`, `.cache/archify/${name}.delivery.json`);
-  copyFileSync(input,`static/diagrams/${name}.json`);
 }
 copyFileSync('vendor/archify/LICENSE','static/diagrams/ARCHIFY-LICENSE.txt');
 copyFileSync('vendor/archify/THIRD_PARTY_NOTICES.md','static/diagrams/THIRD-PARTY-NOTICES.md');

scripts/portal.test.mjs

@@ -20,6 +20,7 @@ test('real build removes stale diagrams, keeps receipts private and rejects coll
     writeSpec('old');
     let result = build(); assert.equal(result.status,0,result.stderr);
     assert(existsSync(join(root,'static/diagrams/old/index.html')));
+    assert(!existsSync(join(root,'static/diagrams/old.json')));
     assert(!readdirSync(join(root,'static/diagrams'),{recursive:true}).some(p=>p.endsWith('.delivery.json')));
     unlinkSync(join(root,'diagrams/old.architecture.json'));
     writeSpec('new');
@@ -42,7 +43,7 @@ test('three independent section menus and Structure first', () => {
   for (const section of ['Organization', 'Strategy', 'Contribution']) assert(config.includes(`label: '${section}'`));
   assert(!config.includes("label: 'Documentation'"));
   assert(!config.includes("label: 'Maintainer guide'"));
-  assert(read('sidebars/organization.ts').includes("organizationSidebar: ['structure']"));
+  assert(read('sidebars/organization.ts').includes("organizationSidebar: ['structure', 'collaboration', 'sdlc']"));
   for (const section of ['organization','strategy','contribution']) assert(config.includes(`id: '${section}'`));
 });
 test('Archify is pinned, licensed and rebuilt, not a remote embed', () => {
@@ -58,6 +59,11 @@ test('Archify is pinned, licensed and rebuilt, not a remote embed', () => {
   assert(wrapper.includes('showModal()') && wrapper.includes('onClose='));
   assert(!wrapper.includes('target="_blank"'));
   assert(wrapper.includes('Close full-screen diagram'));
+  assert(!wrapper.includes('JSON source') && !wrapper.includes('download>'));
+  assert(!wrapper.includes('Open full viewer'));
+  assert(wrapper.includes('aria-label={`Expand ${title}`}'));
+  assert(wrapper.includes('aria-hidden="true"'));
+  assert(read('src/css/custom.css').includes('justify-content: flex-end'));
 });
 test('Product owns two teams and Technology owns five separate teams', () => {
   const spec = JSON.parse(read('diagrams/organization-structure.architecture.json'));
@@ -89,7 +95,12 @@ test('departments share one row and each has delivery teams below it', () => {
     assert.equal(teams.length, i === 0 ? 2 : i === 1 ? 5 : 1);
     for (const team of teams) {
       assert(team.pos[1] > department.pos[1] + department.size[1]);
-      assert.equal(team.pos[0], department.pos[0]);
+      assert(team.size[0] < department.size[0]);
+      assert.equal(team.pos[0] + team.size[0], department.pos[0] + department.size[0]);
+      const edge = spec.connections.find(e => e.from === id && e.to === team.id);
+      assert.equal(edge.toSide, 'left');
+      assert.equal(edge.fromSide, 'bottom');
+      assert.equal(spec.connections.find(e => e.from === 'management' && e.to === id).toSide, 'top');
       assert.deepEqual(spec.connections.filter(e => e.to === team.id).map(e => e.from), [id]);
       assert(page.includes(team.label));
     }
@@ -98,6 +109,22 @@ test('departments share one row and each has delivery teams below it', () => {
     assert(!(a.pos[0] < b.pos[0] + b.size[0] && a.pos[0] + a.size[0] > b.pos[0] && a.pos[1] < b.pos[1] + b.size[1] && a.pos[1] + a.size[1] > b.pos[1]), `${a.id} overlaps ${b.id}`);
   }
 });
+test('organization content is split into linked focused pages', () => {
+  const structure = read('docs/organization/structure.mdx');
+  const collaboration = read('docs/organization/collaboration.mdx');
+  const sdlc = read('docs/organization/sdlc.mdx');
+  assert(!structure.includes('## How the departments work together'));
+  assert(!structure.includes('## Leadership and delivery structure'));
+  assert(!structure.includes('name="organization-reporting"'));
+  assert(collaboration.includes('## How the departments work together'));
+  for (const outcome of ['Better buyer experience', 'Stronger seller experience', 'Safe and trustworthy trading', 'Sustainable growth', 'AI-powered execution']) assert(collaboration.includes(outcome));
+  assert(sdlc.includes('title: SDLC — Software Delivery Life Cycle'));
+  assert(sdlc.includes('name="organization-reporting"'));
+  for (const role of ['Head of Engineering', 'AI Architect', 'Operational Quality', 'Brand Team Lead']) assert(sdlc.includes(role));
+  for (const [name, page] of [['structure',structure],['collaboration',collaboration],['sdlc',sdlc]]) {
+    for (const other of ['structure','collaboration','sdlc'].filter(n => n !== name)) assert(page.includes(`./${other}.mdx`));
+  }
+});
 test('organization page presents an operating model, not research notes', () => {
   const page = read('docs/organization/structure.mdx');
   assert(page.includes('operating model') && page.includes('## Departments and teams'));

scripts/verify.mjs

@@ -16,7 +16,7 @@ const workflow = read('.gitea/workflows/pages.yml');
 assert(workflow.includes('mountpoint -q'));
 assert(workflow.includes("gitea.event_name == 'push' && gitea.ref == 'refs/heads/main'"));
 if (process.argv.includes('--build')) {
-  for (const route of ['index.html','docs/overview/index.html','docs/maintain/index.html','docs/reference/index.html','404.html','organization/structure/index.html','strategy/index.html','contribution/index.html','contribution/diagrams/index.html','diagrams/organization-structure/index.html']) {
+  for (const route of ['index.html','docs/overview/index.html','docs/maintain/index.html','docs/reference/index.html','404.html','organization/structure/index.html','organization/collaboration/index.html','organization/sdlc/index.html','strategy/index.html','contribution/index.html','contribution/diagrams/index.html','diagrams/organization-structure/index.html']) {
     assert(existsSync(join('build',route)), `Missing route: ${route}`);
   }
   assert(!readdirSync('build/diagrams', {recursive: true}).some(f => f.endsWith('.delivery.json')), 'Private build receipts must not be published');

sidebars/organization.ts

@@ -1,2 +1,2 @@
 import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
-export default {organizationSidebar: ['structure']} satisfies SidebarsConfig;
+export default {organizationSidebar: ['structure', 'collaboration', 'sdlc']} satisfies SidebarsConfig;

src/components/ArchifyDiagram/index.tsx

@@ -1,10 +1,9 @@
 import React, {useEffect, useId, useRef, useState} from 'react';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
-export default function ArchifyDiagram({name, title}: {name: string; title: string}): React.ReactElement {
+export default function ArchifyDiagram({name, title, compact = false}: {name: string; title: string; compact?: boolean}): React.ReactElement {
   if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(name)) throw new Error('Invalid diagram name');
   const source = useBaseUrl(`/diagrams/${name}/`);
-  const json = useBaseUrl(`/diagrams/${name}.json`);
   const dialog = useRef<HTMLDialogElement>(null);
   const opener = useRef<HTMLButtonElement>(null);
   const headingId = useId();
@@ -17,8 +16,8 @@ export default function ArchifyDiagram({name, title}: {name: string; title: stri
     return () => {document.body.style.overflow = previousOverflow;};
   }, [expanded]);
   const close = () => {dialog.current?.close();};
-  return <section className="archify-panel" aria-label={title}>
-    <div className="archify-toolbar"><strong>Interactive diagram</strong><div><button ref={opener} type="button" className="archify-expand" onClick={() => setExpanded(true)}>Open full viewer ⛶</button><a href={json} download>JSON source ↓</a></div></div>
+  return <section className={`archify-panel${compact ? ' archify-panel--compact' : ''}`} aria-label={title}>
+    <div className="archify-toolbar"><button ref={opener} type="button" className="archify-expand" aria-label={`Expand ${title}`} title="Expand diagram" onClick={() => setExpanded(true)}><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true"><path d="M8 3H3v5M16 3h5v5M21 16v5h-5M8 21H3v-5" /></svg></button></div>
     <iframe src={source} title={title} sandbox="allow-scripts allow-downloads" loading="lazy" referrerPolicy="no-referrer" />
     <dialog ref={dialog} className="archify-modal" aria-labelledby={headingId} onClose={() => {setExpanded(false); opener.current?.focus();}}>
       <div className="archify-modal-toolbar"><strong id={headingId}>{title}</strong><button type="button" onClick={close} autoFocus aria-label="Close full-screen diagram">Close ×</button></div>

src/css/custom.css

@@ -97,12 +97,12 @@ a:focus-visible, button:focus-visible {outline: 3px solid #b88719; outline-offse
 @media (max-width: 996px) {.navbar {padding: 0 1rem;} .hero-inner {gap: 15px; padding: 55px 25px;} .hero-art {transform: scale(.85);} .start-section {padding: 35px 25px;} .start-card {padding: 20px;}}
 @media (max-width: 700px) {.hero-inner {grid-template-columns: 1fr; padding: 45px 24px;} .hero-art {display: none;} .hero-copy h1 {font-size: 3rem;} .start-grid {grid-template-columns: 1fr;} .section-heading {align-items: flex-start;} .foundation-badge {display: none;} .start-section {padding: 32px 20px;} .navbar__title {font-size: 1.45rem;} .navbar__logo {height: 31px;} .navbar input {max-width: 145px;} .button--lg {font-size: .95rem;} .button--primary span {padding-left: 10px;}}
 .archify-panel {border: 1px solid var(--line); margin: 1.5rem 0;}
-.archify-toolbar {display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 16px; background: var(--surface); font-size: .85rem;}
-.archify-toolbar div {display: flex; gap: 20px; flex-wrap: wrap;}
+.archify-toolbar {display: flex; justify-content: flex-end; padding: 4px; background: var(--surface);}
 .archify-panel iframe {width: 100%; height: 720px; border: 0; display: block; background: #f6f6f6;}
+.archify-panel--compact > iframe {height: 500px;}
 @media (max-width: 700px) {.archify-panel iframe {height: 650px;}}
-.archify-expand {border: 0; padding: 0; background: transparent; color: var(--ifm-link-color); font: inherit; cursor: pointer;}
-.archify-expand:hover {text-decoration: underline;}
+.archify-expand {display: grid; place-items: center; width: 44px; height: 44px; border: 0; padding: 0; background: transparent; color: var(--ifm-link-color); cursor: pointer;}
+.archify-expand:hover {background: var(--ifm-hover-overlay);}
 .archify-modal {position: fixed; inset: 0; margin: 0; padding: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; border: 0; background: var(--surface); color: var(--ifm-color-content);}
 .archify-modal[open] {display: flex; flex-direction: column;}
 .archify-modal::backdrop {background: #000b;}