@jterrats/open-orchestra 1.0.1 → 1.0.3

package/docs/diagrams/enterprise-set/salesforce-enterprise-architecture.svg

@@ -0,0 +1,54 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1500" height="940" viewBox="0 0 1500 940" role="img" aria-labelledby="title desc">
+  <title id="title">Salesforce enterprise solution architecture</title>
+  <desc id="desc">Enterprise architecture diagram showing Salesforce, web app, mobile app, integration layer, SAP, Oracle, AWS, and on-prem backends.</desc>
+  <defs>
+    <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#475569"/></marker>
+    <marker id="arrow-start" viewBox="0 0 10 10" refX="1" refY="5" markerWidth="8" markerHeight="8" orient="auto"><path d="M10 0 L0 5 L10 10 z" fill="#475569"/></marker>
+    <style>
+      .font{font-family:Arial,Helvetica,sans-serif}.title{font-size:28px;font-weight:700;fill:#172033}.subtitle{font-size:13px;fill:#4b596c}
+      .region{fill:#f8fafc;stroke:#94a3b8;stroke-width:1.5}.channel{fill:#f3f8ff;stroke:#8fb2dc;stroke-width:1.5}.sf{fill:#f5fbff;stroke:#7fb7df;stroke-width:1.5}.int{fill:#fff7ed;stroke:#e5ad70;stroke-width:1.5}.back{fill:#f7fbf5;stroke:#91bd9b;stroke-width:1.5}.sec{fill:#fff5f5;stroke:#e0a1a1;stroke-width:1.5}
+      .card{fill:#fff;stroke:#64748b;stroke-width:1.5}.label{font-size:13px;font-weight:700;fill:#526174;text-transform:uppercase}.cardTitle{font-size:17px;font-weight:700;fill:#1f2a3d}.small{font-size:12px;fill:#445267}.badgeText{font-size:10px;font-weight:700;fill:#fff}
+      .pill{fill:#fff;stroke:#d8dee8;stroke-width:1}.pillText{font-size:12px;fill:#263445}.edge{fill:none;stroke:#475569;stroke-width:2;marker-end:url(#arrow)}.edgeBoth{fill:none;stroke:#475569;stroke-width:2;marker-start:url(#arrow-start);marker-end:url(#arrow)}.edgeSoft{fill:none;stroke:#64748b;stroke-width:2;stroke-dasharray:7 5;marker-end:url(#arrow)}
+    </style>
+  </defs>
+  <rect width="1500" height="940" fill="#fff"/>
+  <g class="font">
+    <text class="title" x="48" y="56">Salesforce Enterprise Solution Architecture</text>
+    <text class="subtitle" x="48" y="80">Source-free enterprise architecture candidate with channels, Salesforce, integrations, security, and heterogeneous backends.</text>
+
+    <rect class="channel" x="52" y="140" width="260" height="470" rx="18"/><text class="label" x="84" y="174">Digital Channels</text>
+    <rect class="card" x="92" y="236" width="180" height="110" rx="12"/><circle cx="124" cy="270" r="17" fill="#2563eb"/><text class="badgeText" x="124" y="274" text-anchor="middle">WEB</text><text class="cardTitle" x="156" y="266">Web App</text><text class="small" x="114" y="300">customer portal</text><text class="small" x="114" y="320">agent workspace</text>
+    <rect class="card" x="92" y="430" width="180" height="112" rx="12"/><circle cx="124" cy="464" r="17" fill="#7c3aed"/><text class="badgeText" x="124" y="468" text-anchor="middle">MOB</text><text class="cardTitle" x="156" y="460">Mobile App</text><text class="small" x="114" y="494">field sales</text><text class="small" x="114" y="514">service actions</text>
+
+    <rect class="sec" x="360" y="116" width="220" height="610" rx="18"/><text class="label" x="392" y="150">Security Edge</text>
+    <rect class="card" x="400" y="244" width="140" height="104" rx="12"/><circle cx="432" cy="278" r="17" fill="#dc2626"/><text class="badgeText" x="432" y="282" text-anchor="middle">IAM</text><text class="cardTitle" x="462" y="274">Identity</text><text class="small" x="422" y="308">SSO / MFA</text><text class="small" x="422" y="328">policy claims</text>
+    <rect class="card" x="400" y="434" width="140" height="104" rx="12"/><circle cx="432" cy="468" r="17" fill="#d97706"/><text class="badgeText" x="432" y="472" text-anchor="middle">API</text><text class="cardTitle" x="462" y="464">API Edge</text><text class="small" x="422" y="498">WAF, throttling</text><text class="small" x="422" y="518">TLS policy</text>
+
+    <rect class="sf" x="640" y="116" width="330" height="610" rx="18"/><text class="label" x="672" y="150">Salesforce Platform</text>
+    <rect class="card" x="688" y="212" width="232" height="98" rx="12"/><circle cx="720" cy="244" r="17" fill="#0ea5e9"/><text class="badgeText" x="720" y="248" text-anchor="middle">SF</text><text class="cardTitle" x="752" y="240">Sales Cloud</text><text class="small" x="714" y="274">leads, accounts</text><text class="small" x="714" y="292">opportunities</text>
+    <rect class="card" x="688" y="374" width="232" height="98" rx="12"/><circle cx="720" cy="406" r="17" fill="#059669"/><text class="badgeText" x="720" y="410" text-anchor="middle">SVC</text><text class="cardTitle" x="752" y="402">Service Cloud</text><text class="small" x="714" y="436">cases, entitlements</text><text class="small" x="714" y="454">knowledge</text>
+    <rect class="card" x="688" y="536" width="232" height="116" rx="12"/><circle cx="720" cy="570" r="17" fill="#4f46e5"/><text class="badgeText" x="720" y="574" text-anchor="middle">D360</text><text class="cardTitle" x="752" y="566">Data 360</text><text class="small" x="714" y="600">profiles, segments</text><text class="small" x="714" y="620">consent signals</text>
+
+    <rect class="int" x="1030" y="116" width="210" height="610" rx="18"/><text class="label" x="1062" y="150">Integration Layer</text>
+    <rect class="card" x="1070" y="250" width="130" height="116" rx="12"/><circle cx="1102" cy="284" r="17" fill="#0f766e"/><text class="badgeText" x="1102" y="288" text-anchor="middle">MW</text><text class="cardTitle" x="1132" y="280">API /</text><text class="cardTitle" x="1132" y="300">Middleware</text><text class="small" x="1092" y="334">events, ETL</text><text class="small" x="1092" y="352">orchestration</text>
+    <rect class="card" x="1070" y="482" width="130" height="112" rx="12"/><circle cx="1102" cy="516" r="17" fill="#0ea5e9"/><text class="badgeText" x="1102" y="520" text-anchor="middle">BUS</text><text class="cardTitle" x="1132" y="512">Event Bus</text><text class="small" x="1092" y="546">streaming</text><text class="small" x="1092" y="566">replay</text>
+
+    <rect class="back" x="1290" y="116" width="160" height="610" rx="18"/><text class="label" x="1320" y="150">Backends</text>
+    <rect class="card" x="1318" y="194" width="104" height="72" rx="10"/><text class="cardTitle" x="1346" y="230">SAP</text><text class="small" x="1336" y="250">ERP</text>
+    <rect class="card" x="1318" y="306" width="104" height="72" rx="10"/><text class="cardTitle" x="1338" y="342">Oracle</text><text class="small" x="1336" y="362">finance</text>
+    <rect class="card" x="1318" y="418" width="104" height="72" rx="10"/><text class="cardTitle" x="1340" y="454">AWS</text><text class="small" x="1336" y="474">services</text>
+    <rect class="card" x="1318" y="530" width="104" height="86" rx="10"/><text class="cardTitle" x="1340" y="566">On-Prem</text><text class="small" x="1336" y="588">legacy</text><text class="small" x="1336" y="606">systems</text>
+
+    <path class="edge" d="M272 291 H400"/><rect class="pill" x="298" y="260" width="106" height="20" rx="4"/><text class="pillText" x="306" y="274">web identity</text>
+    <path class="edge" d="M272 486 H400"/><rect class="pill" x="298" y="506" width="112" height="20" rx="4"/><text class="pillText" x="306" y="520">mobile access</text>
+    <path class="edge" d="M540 296 H688"/><rect class="pill" x="566" y="264" width="102" height="20" rx="4"/><text class="pillText" x="574" y="278">claims + SSO</text>
+    <path class="edge" d="M540 486 H614 Q640 486 640 423 H688"/><rect class="pill" x="560" y="506" width="94" height="20" rx="4"/><text class="pillText" x="568" y="520">API traffic</text>
+    <path class="edgeBoth" d="M920 262 H1030"/><rect class="pill" x="940" y="230" width="72" height="20" rx="4"/><text class="pillText" x="948" y="244">CRM APIs</text>
+    <path class="edgeBoth" d="M920 594 H1004 Q1030 594 1030 538 H1070"/><rect class="pill" x="930" y="612" width="90" height="20" rx="4"/><text class="pillText" x="938" y="626">profile sync</text>
+    <path class="edgeBoth" d="M1200 292 H1318"/><rect class="pill" x="1222" y="260" width="82" height="20" rx="4"/><text class="pillText" x="1230" y="274">ERP flow</text>
+    <path class="edgeBoth" d="M1200 320 H1280 Q1290 320 1290 342 H1318"/><rect class="pill" x="1216" y="334" width="92" height="20" rx="4"/><text class="pillText" x="1224" y="348">finance sync</text>
+    <path class="edgeBoth" d="M1200 538 H1280 Q1290 538 1290 454 H1318"/><rect class="pill" x="1212" y="500" width="90" height="20" rx="4"/><text class="pillText" x="1220" y="514">cloud events</text>
+    <path class="edgeBoth" d="M1200 566 H1272 Q1290 566 1290 573 H1318"/><rect class="pill" x="1212" y="586" width="86" height="20" rx="4"/><text class="pillText" x="1220" y="600">legacy API</text>
+    <path class="edgeSoft" d="M804 652 V790 H1135 V594"/><rect class="pill" x="858" y="768" width="174" height="38" rx="5"/><text class="pillText" x="866" y="784">async customer data</text><text class="pillText" x="866" y="800">and observability events</text>
+  </g>
+</svg>

package/docs/diagrams/experiments/pixel-v2-review.md

@@ -0,0 +1,124 @@
+# Diagram Pixel V2 Review
+
+Task: DIAGRAM-PIXEL-REGEN-V2
+
+## Generated Artifacts
+
+- `output/diagram-experiments/pixel-v2/roadmap/preview-v2.png`
+- `output/diagram-experiments/pixel-v2/sfdc-implementation/preview-v2.png`
+- `output/diagram-experiments/pixel-v2/swimlane/preview-v2.png`
+- `output/diagram-experiments/pixel-v2/timeline/preview-v2.png`
+
+## Evaluation Method
+
+The v2 candidates were rendered from the current SVG sources with Playwright to
+create fresh screenshots for visual review. Each render was compared against the
+downloaded source reference at the diagram level: page framing, primary
+containers, typography scale, element order, connector behavior, spacing, and
+semantic completeness.
+
+## Roadmap Findings
+
+Source: `output/diagram-experiments/sources/roadmap-tech-1.png`
+
+- Not pixel-perfect. The current output omits the source page chrome, footer URL,
+  and top timestamp line. That is acceptable only if the contract is diagram-only,
+  not full-page recreation.
+- Title and legend placement are close, but the title text is too large and too
+  high compared with the source.
+- The source roadmap grid starts lower and uses a taller body; the generated
+  grid is compressed vertically.
+- Initiative cards do not match the source y positions and several month spans
+  are visually shifted.
+- The source uses real component icons; the generated output uses text/dot
+  abstractions. For pixel recreation this must be declared as a deviation or
+  replaced with icon-equivalent symbols.
+
+Prompt corrections needed:
+
+- Declare whether page chrome must be recreated or intentionally cropped out.
+- Include exact grid bounds, lane label bounds, and month column width before
+  drawing cards.
+- Re-evaluate each card against start/end dates using the month grid as a hard
+  placement constraint.
+
+## SFDC Implementation Findings
+
+Source: `output/diagram-experiments/sources/sfdc-impl-1.png`
+
+- Not pixel-perfect. The output is a simplified architecture approximation; the
+  source has many more internal cards, badges, side rails, external systems, and
+  integration bars.
+- Layer count and high-level reading direction are correct, but the density and
+  semantic completeness are much lower than the source.
+- The source has a right-side marketing platform rail in the application layer;
+  the output omits that structure.
+- Several source connectors run through intermediate bars and external data
+  systems; the output collapses them into broad vertical lines.
+- The source left rail labels are taller and align exactly with source layer
+  bands; the output is visually clean but not faithful.
+
+Prompt corrections needed:
+
+- Split architecture recreation into inventory first, then render. The inventory
+  must list every lane, system card, internal subcard, external rail, and
+  connector group before drawing.
+- Add a density mode: `faithful recreation` keeps small labels and badges;
+  `readable abstraction` may simplify them but must not be called pixel-perfect.
+- For source matching, connectors must be grouped by source/target layer and
+  validated against visible landing points.
+
+## Swimlane Findings
+
+Source: `output/diagram-experiments/sources/swimlane-def-01.png`
+
+- The current output is not recreating the visible source. The source image is a
+  website page with an embedded monitor illustration, while the output is an
+  independent swimlane process diagram.
+- This is acceptable as a source-free diagram experiment, but not as a
+  recreation.
+- The output itself has readable lane structure and mostly orthogonal routing.
+  It still needs a stricter source-free contract for lane count, process steps,
+  decision labels, and unused whitespace.
+
+Prompt corrections needed:
+
+- Classify the source as `page screenshot`, `embedded diagram`, or
+  `source-free inspiration` before generation.
+- If the source contains an embedded diagram inside another illustration, crop or
+  isolate the embedded diagram before asking for pixel recreation.
+- If source-free, define acceptance criteria for visual quality independent of
+  the source.
+
+## Timeline Findings
+
+Source: `output/diagram-experiments/sources/timeline-steps-01.png`
+
+- The current output is a clean source-free timeline, not a recreation. The
+  source is a web page screenshot with a small preview image and Vecteezy chrome.
+- The timeline pattern is plausible, but it does not match the reference
+  preview's tiny scale, web chrome, typography, or content.
+- This confirms the rule gap: downloaded marketplace PDFs/pages need source
+  region extraction before diagram generation.
+
+Prompt corrections needed:
+
+- Extract or define the diagram region before generation.
+- If the source only shows a tiny preview, mark pixel-perfect recreation as
+  blocked until a higher-resolution diagram region is available.
+- For source-free timelines, validate even milestone spacing, vertical stem
+  alignment, text fit, and balanced top/bottom annotation density.
+
+## Overall Result
+
+The v2 renders are useful baseline artifacts, but none should be accepted as
+pixel-perfect recreation. The next implementation pass should update the master
+diagram prompt/rules to force:
+
+- source classification before rendering;
+- element inventory before drawing;
+- explicit recreation mode versus source-free mode;
+- post-render screenshot review before delivery;
+- connector landing-point validation;
+- text fit and container bounds validation;
+- page-crop or diagram-region extraction for downloaded web/PDF sources.

package/docs/diagrams/experiments/roadmap/diagram.mmd

@@ -0,0 +1,14 @@
+gantt
+  title Technology Component Roadmap
+  dateFormat  YYYY-MM-DD
+  axisFormat  %b
+
+  section Sales Cloud
+  Environment Set-Up              :env, 2026-01-15, 2026-02-01
+  Account and Contact Management  :acct, 2026-02-05, 2026-03-15
+  Custom Lead Conversion Process  :lead, 2026-02-15, 2026-04-10
+  Opportunity and Quote Mgmt      :opp, 2026-03-15, 2026-04-15
+  CPQ Integration                 :cpq, 2026-03-20, 2026-04-25
+  Forecasting                     :forecast, 2026-04-20, 2026-05-15
+  Territory Management            :territory, 2026-04-15, 2026-05-10
+

package/docs/diagrams/experiments/roadmap/diagram.svg

@@ -0,0 +1,48 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="820" viewBox="0 0 1280 820" role="img" aria-labelledby="title desc">
+  <title id="title">Technology roadmap experiment</title>
+  <desc id="desc">Six-month technology component roadmap with timeline columns and initiative cards.</desc>
+  <defs>
+    <style>
+      .font{font-family:Arial,Helvetica,sans-serif}.title{fill:#153e75;font-size:24px;font-weight:700}.sub{fill:#153e75;font-size:12px}.month{fill:#111827;font-size:14px;font-weight:700}.lane{fill:#24324f;font-size:17px;font-weight:700}.card{fill:#fff;stroke:#687185;stroke-width:1.6}.cardTitle{fill:#111827;font-size:13px;font-weight:700}.meta{fill:#111827;font-size:10px}.legend{fill:#fff;stroke:#d0d4dd}.dotBlue{fill:#123e75}.dotPurple{fill:#2d125f}.dotViolet{fill:#4b2aad}.grid{stroke:#8d96a9;stroke-width:1}.iconText{fill:#fff;font-size:11px;font-weight:700}
+    </style>
+  </defs>
+  <rect width="1280" height="820" fill="#fff"/>
+  <g class="font">
+    <text class="title" x="70" y="156">Technology Component Roadmap</text>
+    <text class="sub" x="70" y="184">Specific components deployed to assist planning, budgeting, and dependency review.</text>
+    <path d="M520 86 C565 136 565 196 520 246 H1190 V86 Z" fill="#e5e5e5"/>
+    <rect class="legend" x="610" y="106" width="520" height="100" rx="8"/>
+    <g transform="translate(640 132)">
+      <circle class="dotBlue" cx="0" cy="0" r="14"/><text class="iconText" x="0" y="4" text-anchor="middle">A</text><text class="meta" x="26" y="4">Authentication</text>
+      <circle class="dotBlue" cx="160" cy="0" r="14"/><text class="iconText" x="160" y="4" text-anchor="middle">M</text><text class="meta" x="186" y="4">App Menu</text>
+      <circle class="dotPurple" cx="320" cy="0" r="14"/><text class="iconText" x="320" y="4" text-anchor="middle">P</text><text class="meta" x="346" y="4">Pro Code</text>
+      <circle class="dotPurple" cx="440" cy="0" r="14"/><text class="iconText" x="440" y="4" text-anchor="middle">L</text><text class="meta" x="466" y="4">Lightning</text>
+      <circle class="dotBlue" cx="0" cy="54" r="14"/><text class="iconText" x="0" y="58" text-anchor="middle">D</text><text class="meta" x="26" y="58">Administration</text>
+      <circle class="dotViolet" cx="160" cy="54" r="14"/><text class="iconText" x="160" y="58" text-anchor="middle">LC</text><text class="meta" x="186" y="58">Low Code</text>
+      <circle class="dotViolet" cx="320" cy="54" r="14"/><text class="iconText" x="320" y="58" text-anchor="middle">DB</text><text class="meta" x="346" y="58">Potential LDV</text>
+    </g>
+    <rect x="220" y="280" width="940" height="470" fill="#fafafa" stroke="#687185"/>
+    <rect x="84" y="365" width="136" height="385" fill="#fff" stroke="#687185"/>
+    <text class="lane" x="152" y="565" text-anchor="middle">Sales Cloud</text>
+    <g>
+      <path class="grid" d="M376 280V750M532 280V750M688 280V750M844 280V750M1000 280V750"/>
+      <path class="grid" d="M220 365H1160"/>
+      <text class="month" x="298" y="328" text-anchor="middle">January</text>
+      <text class="month" x="454" y="328" text-anchor="middle">February</text>
+      <text class="month" x="610" y="328" text-anchor="middle">March</text>
+      <text class="month" x="766" y="328" text-anchor="middle">April</text>
+      <text class="month" x="922" y="328" text-anchor="middle">May</text>
+      <text class="month" x="1078" y="328" text-anchor="middle">June</text>
+    </g>
+    <g>
+      <rect class="card" x="270" y="390" width="160" height="140" rx="10"/><text class="cardTitle" x="285" y="424">Environment Set-Up</text><text class="meta" x="285" y="454">Start Date: January 15</text><text class="meta" x="285" y="476">End Date: February 1</text><text class="meta" x="285" y="498">Dependencies: None</text>
+      <circle class="dotBlue" cx="295" cy="514" r="10"/><circle class="dotPurple" cx="335" cy="514" r="10"/><circle class="dotBlue" cx="375" cy="514" r="10"/><circle class="dotBlue" cx="415" cy="514" r="10"/>
+      <rect class="card" x="414" y="610" width="190" height="112" rx="10"/><text class="cardTitle" x="429" y="644">Account and Contact</text><text class="cardTitle" x="429" y="662">Management</text><text class="meta" x="429" y="692">Start Date: February 5</text><text class="meta" x="429" y="714">End Date: March 15</text>
+      <rect class="card" x="520" y="512" width="310" height="112" rx="10"/><text class="cardTitle" x="535" y="546">Custom Lead Conversion Process</text><text class="meta" x="535" y="576">Start Date: February 15</text><text class="meta" x="535" y="598">End Date: April 10</text><circle class="dotViolet" cx="674" cy="604" r="12"/>
+      <rect class="card" x="636" y="610" width="190" height="112" rx="10"/><text class="cardTitle" x="651" y="644">Opportunity and Quote</text><text class="cardTitle" x="651" y="662">Management</text><text class="meta" x="651" y="692">Start Date: March 15</text><circle class="dotViolet" cx="707" cy="704" r="12"/><circle class="dotPurple" cx="743" cy="704" r="12"/>
+      <rect class="card" x="754" y="390" width="190" height="112" rx="10"/><text class="cardTitle" x="769" y="424">CPQ Integration</text><text class="meta" x="769" y="454">Start Date: March 20</text><text class="meta" x="769" y="476">End Date: April 25</text>
+      <rect class="card" x="880" y="510" width="190" height="112" rx="10"/><text class="cardTitle" x="895" y="544">Forecasting</text><text class="meta" x="895" y="574">Start Date: April 20</text><text class="meta" x="895" y="596">End Date: May 15</text><circle class="dotViolet" cx="975" cy="604" r="12"/>
+      <rect class="card" x="858" y="624" width="190" height="112" rx="10"/><text class="cardTitle" x="873" y="658">Territory Management</text><text class="meta" x="873" y="688">Start Date: April 15</text><text class="meta" x="873" y="710">End Date: May 10</text><circle class="dotViolet" cx="948" cy="712" r="12"/><circle class="dotPurple" cx="982" cy="712" r="12"/>
+    </g>
+  </g>
+</svg>

package/docs/diagrams/experiments/roadmap/experiment.md

@@ -0,0 +1,44 @@
+# Technology Roadmap Diagram Experiment
+
+Task: DIAGRAM-ROADMAP-EXPERIMENT
+
+## Source Inventory
+
+- `roadmap-technology-component.pdf`: one-page technology component roadmap with a title band, legend, month columns, a left-side product lane, and rounded initiative cards positioned by time span.
+
+## Element Contract
+
+- Audience: delivery leads and technical stakeholders planning releases and dependencies.
+- Reading flow: month grid left to right; cards occupy the months where work happens.
+- Layout: single product lane with month columns January through June.
+- Nodes: initiative cards with title, start/end date, dependency note, and component icons.
+- Visual constraints: cards must align to month columns, legend must stay separate from the schedule, and card shadows should not imply grouping.
+
+## Prompt Used
+
+Create a technology component roadmap diagram as SVG.
+
+Use a title block on the upper left, a compact legend on the upper right, and a
+timeline grid below. The grid has a left lane label and six monthly columns:
+January, February, March, April, May, June. Use rounded initiative cards placed
+inside the grid by rough date span. Include these initiatives:
+
+- Environment Set-Up, January 15 to February 1, dependency Environment.
+- Account and Contact Management, February 5 to March 15, dependency Environment.
+- Custom Lead Conversion Process, February 15 to April 10, dependency Leads.
+- Opportunity and Quote Management, March 15 to April 15, dependency Accounts, Contacts, Leads.
+- CPQ Integration, March 20 to April 25, dependency Environment.
+- Forecasting, April 20 to May 15, dependency Accounts, Contacts, Leads.
+- Territory Management, April 15 to May 10, dependency Accounts, Contacts, Leads.
+
+Use icon dots inside each card to show component categories. Align every card to
+the relevant month region. Re-evaluate text fit, timeline alignment, overlap,
+and legend spacing after rendering.
+
+## Evaluation Findings
+
+- Roadmaps need column-grid fidelity more than connector fidelity; small card shifts can change perceived timing.
+- Card density becomes a problem when initiatives overlap in the same months; vertical staggering must be part of the prompt.
+- Icons work as metadata, but they need a legend and consistent spacing.
+- A future master rule should require roadmap card start/end alignment checks against the declared time axis.
+

package/docs/diagrams/experiments/sfdc-implementation/diagram.mmd

@@ -0,0 +1,54 @@
+flowchart TB
+  subgraph app["Application, Service, Orchestration and Agentic Layer"]
+    WS["Collaboration Workspace"]
+    EO["Employee Org"]
+    SO["Service Org"]
+    SA["Sales Org"]
+    PO["Partner Org"]
+    CS["Customer Success Org"]
+    WS --> EO
+    WS --> SO
+    WS --> SA
+    WS --> PO
+    WS --> CS
+  end
+
+  subgraph bi["Business Intelligence and Reporting Layer"]
+    AC["Analytics Cloud"]
+  end
+
+  subgraph data["Data Platform and Unification Layer"]
+    DP2["Data Platform Instance 2\nEmployee, IT, Security, Legal"]
+    DP1["Data Platform Instance 1\nSales, Knowledge, CS, M&A, Marketing"]
+    DP2 <--> DP1
+  end
+
+  subgraph external["External Data and Federation Layer"]
+    FED["Query and Federation Layer"]
+    EDW["EDW"]
+    MA["M&A EDW"]
+    TL["Telemetry Lake"]
+    FED --> EDW
+    FED --> MA
+    FED --> TL
+  end
+
+  subgraph source["Source Layer"]
+    SRC1["1P and 3P Data"]
+    SRC2["Structured Data"]
+    SRC3["Enterprise Systems"]
+    SRC4["Marketing Systems"]
+    SRC5["App Logs and Telemetry"]
+  end
+
+  EO --> DP2
+  SO --> AC
+  SA --> AC
+  PO --> DP1
+  CS --> DP1
+  AC --> DP1
+  DP1 --> FED
+  DP2 --> SRC2
+  EDW --> SRC3
+  MA --> SRC4
+  TL --> SRC5

package/docs/diagrams/experiments/sfdc-implementation/diagram.svg

@@ -0,0 +1,72 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1380" height="980" viewBox="0 0 1380 980" role="img" aria-labelledby="title desc">
+  <title id="title">Layered implementation architecture experiment</title>
+  <desc id="desc">Five-layer enterprise implementation architecture with application orgs, reporting, data platforms, external data, and source systems.</desc>
+  <defs>
+    <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+      <path d="M0 0 L10 5 L0 10 z" fill="#7b8497"/>
+    </marker>
+    <style>
+      .font{font-family:Arial,Helvetica,sans-serif}.title{fill:#2f3747;font-size:22px;font-weight:700}.sub{fill:#3f4858;font-size:11px}.layerLabel{fill:#fff;font-size:14px;font-weight:700}.band{fill:#f0f1fc}.rail{fill:#6155f6}.card{fill:#fff;stroke:#7a8394;stroke-width:1.4}.bar{fill:#fff;stroke:#7a8394;stroke-width:1.4}.cardTitle{fill:#243044;font-size:13px;font-weight:700}.small{fill:#374151;font-size:10px}.chip{fill:#e8fff8;stroke:#bde9db}.chip2{fill:#fff3f3;stroke:#f0c7c7}.edge{fill:none;stroke:#8d96a8;stroke-width:1.5;marker-end:url(#arrow)}.edgeSoft{fill:none;stroke:#8d96a8;stroke-width:1.2}.badgeText{fill:#fff;font-size:9px;font-weight:700}
+    </style>
+  </defs>
+  <rect width="1380" height="980" fill="#fff"/>
+  <g class="font">
+    <text class="title" x="82" y="78">Customer Zero Implementation Architecture</text>
+    <text class="sub" x="82" y="104">Layered view of service, reporting, data platform, external data, and source system relationships.</text>
+    <path d="M760 42 C800 78 800 118 760 154 H1320 V42 Z" fill="#e5e7eb"/>
+    <rect x="930" y="58" width="320" height="80" rx="8" fill="#fff"/>
+    <circle cx="960" cy="82" r="10" fill="#f97316"/><text class="small" x="978" y="86">Cloud service</text>
+    <circle cx="1080" cy="82" r="10" fill="#4285f4"/><text class="small" x="1098" y="86">Ads / media</text>
+    <circle cx="960" cy="114" r="10" fill="#2563eb"/><text class="small" x="978" y="118">Data platform</text>
+    <circle cx="1080" cy="114" r="10" fill="#4b5563"/><text class="small" x="1098" y="118">External app</text>
+    <g>
+      <rect class="rail" x="70" y="178" width="160" height="238" rx="8"/><text class="layerLabel" x="150" y="274" text-anchor="middle">Application</text><text class="layerLabel" x="150" y="294" text-anchor="middle">Service</text><text class="layerLabel" x="150" y="314" text-anchor="middle">Orchestration</text><text class="layerLabel" x="150" y="334" text-anchor="middle">Agentic Layer</text>
+      <rect class="rail" x="70" y="424" width="160" height="118" rx="8"/><text class="layerLabel" x="150" y="466" text-anchor="middle">Business</text><text class="layerLabel" x="150" y="486" text-anchor="middle">Intelligence and</text><text class="layerLabel" x="150" y="506" text-anchor="middle">Reporting Layer</text>
+      <rect class="rail" x="70" y="550" width="160" height="154" rx="8"/><text class="layerLabel" x="150" y="610" text-anchor="middle">Data Platform</text><text class="layerLabel" x="150" y="630" text-anchor="middle">and Unification</text><text class="layerLabel" x="150" y="650" text-anchor="middle">Layer</text>
+      <rect class="rail" x="70" y="712" width="160" height="150" rx="8"/><text class="layerLabel" x="150" y="770" text-anchor="middle">External Data</text><text class="layerLabel" x="150" y="790" text-anchor="middle">and Federation</text><text class="layerLabel" x="150" y="810" text-anchor="middle">Layer</text>
+      <rect class="rail" x="70" y="870" width="160" height="82" rx="8"/><text class="layerLabel" x="150" y="906" text-anchor="middle">Source Layer</text>
+    </g>
+    <rect class="band" x="245" y="178" width="1070" height="238" rx="10"/>
+    <rect class="band" x="245" y="424" width="1070" height="118" rx="10"/>
+    <rect class="band" x="245" y="550" width="1070" height="154" rx="10"/>
+    <rect class="band" x="245" y="712" width="1070" height="150" rx="10"/>
+    <rect class="band" x="245" y="870" width="1070" height="82" rx="10"/>
+    <rect class="bar" x="280" y="192" width="820" height="54" rx="8"/><text class="cardTitle" x="300" y="225">Collaboration Workspace</text>
+    <g>
+      <rect class="card" x="290" y="280" width="160" height="106" rx="8"/><text class="cardTitle" x="310" y="310">Employee Org</text><text class="small" x="310" y="334">Employee agents</text><text class="small" x="310" y="352">HR support</text>
+      <rect class="card" x="478" y="280" width="160" height="106" rx="8"/><text class="cardTitle" x="498" y="310">Service Org</text><text class="small" x="498" y="334">Service agents</text><text class="small" x="498" y="352">Support workflows</text>
+      <rect class="card" x="666" y="280" width="160" height="106" rx="8"/><text class="cardTitle" x="686" y="310">Sales Org</text><text class="small" x="686" y="334">Sales agents</text><text class="small" x="686" y="352">Revenue workflows</text>
+      <rect class="card" x="854" y="280" width="160" height="106" rx="8"/><text class="cardTitle" x="874" y="310">Partner Org</text><text class="small" x="874" y="334">Partner learning</text><text class="small" x="874" y="352">Lead routing</text>
+      <rect class="card" x="1042" y="280" width="160" height="106" rx="8"/><text class="cardTitle" x="1062" y="310">Customer Success</text><text class="small" x="1062" y="334">Incident response</text><text class="small" x="1062" y="352">Success metrics</text>
+    </g>
+    <rect class="card" x="660" y="454" width="190" height="64" rx="8"/><text class="cardTitle" x="682" y="482">Analytics Cloud</text><text class="small" x="682" y="500">Data intelligence and reporting</text>
+    <rect class="card" x="340" y="578" width="310" height="98" rx="8"/><text class="cardTitle" x="362" y="606">Data Platform Instance 2</text><rect class="chip" x="362" y="628" width="66" height="24" rx="5"/><text class="small" x="374" y="644">Employee</text><rect class="chip" x="436" y="628" width="56" height="24" rx="5"/><text class="small" x="451" y="644">IT</text><rect class="chip2" x="362" y="658" width="66" height="24" rx="5"/><text class="small" x="380" y="674">Security</text><rect class="chip2" x="436" y="658" width="56" height="24" rx="5"/><text class="small" x="452" y="674">Legal</text>
+    <rect class="card" x="880" y="578" width="310" height="98" rx="8"/><text class="cardTitle" x="902" y="606">Data Platform Instance 1</text><rect class="chip" x="902" y="628" width="58" height="24" rx="5"/><text class="small" x="918" y="644">Sales</text><rect class="chip" x="968" y="628" width="98" height="24" rx="5"/><text class="small" x="982" y="644">Unified Knowledge</text><rect class="chip2" x="902" y="658" width="58" height="24" rx="5"/><text class="small" x="920" y="674">CS</text><rect class="chip2" x="968" y="658" width="58" height="24" rx="5"/><text class="small" x="986" y="674">M&amp;A</text><rect class="chip2" x="1034" y="658" width="72" height="24" rx="5"/><text class="small" x="1048" y="674">Marketing</text>
+    <rect class="bar" x="736" y="692" width="280" height="24" rx="6"/><text class="small" x="876" y="708" text-anchor="middle">Data sharing between platform instances</text>
+    <rect class="bar" x="742" y="726" width="380" height="26" rx="6"/><text class="small" x="932" y="744" text-anchor="middle">Query and federation layer</text>
+    <g>
+      <rect class="card" x="690" y="772" width="150" height="58" rx="8"/><text class="cardTitle" x="710" y="804">EDW</text>
+      <rect class="card" x="860" y="772" width="150" height="58" rx="8"/><text class="cardTitle" x="880" y="804">M&amp;A EDW</text>
+      <rect class="card" x="1030" y="772" width="150" height="58" rx="8"/><text class="cardTitle" x="1050" y="804">Telemetry Lake</text>
+    </g>
+    <g>
+      <rect class="card" x="270" y="890" width="130" height="42" rx="7"/><text class="small" x="335" y="916" text-anchor="middle">1P and 3P Data</text>
+      <rect class="card" x="430" y="890" width="150" height="42" rx="7"/><text class="small" x="505" y="916" text-anchor="middle">Structured Data</text>
+      <rect class="card" x="610" y="890" width="170" height="42" rx="7"/><text class="small" x="695" y="916" text-anchor="middle">Enterprise Systems</text>
+      <rect class="card" x="810" y="890" width="160" height="42" rx="7"/><text class="small" x="890" y="916" text-anchor="middle">Marketing Systems</text>
+      <rect class="card" x="1000" y="890" width="180" height="42" rx="7"/><text class="small" x="1090" y="916" text-anchor="middle">App Logs and Telemetry</text>
+    </g>
+    <path class="edge" d="M370 386V578"/>
+    <path class="edge" d="M558 386V454"/>
+    <path class="edge" d="M746 386V454"/>
+    <path class="edge" d="M934 386V578"/>
+    <path class="edge" d="M1122 386V578"/>
+    <path class="edge" d="M755 518V578"/>
+    <path class="edgeSoft" d="M650 628H880"/>
+    <path class="edge" d="M495 676V890"/>
+    <path class="edge" d="M1035 676V772"/>
+    <path class="edge" d="M765 830V890"/>
+    <path class="edge" d="M935 830V890"/>
+    <path class="edge" d="M1105 830V890"/>
+  </g>
+</svg>

package/docs/diagrams/experiments/sfdc-implementation/experiment.md

@@ -0,0 +1,41 @@
+# Implementation Architecture Diagram Experiment
+
+Task: DIAGRAM-SFDC-IMPLEMENTATION-EXPERIMENT
+
+## Source Inventory
+
+- `sfdc_customer_zero_implementation.pdf`: one-page layered enterprise implementation architecture. It uses a title/legend band, horizontal layer bands, a left-side layer label rail, system cards, internal subcards, many vertical integration lines, and external/source systems at the bottom.
+
+## Element Contract
+
+- Audience: architecture reviewer evaluating system boundaries and data movement.
+- Reading flow: top application layer down to source systems, with lateral data sharing between platform instances.
+- Layers: Application/Service/Agentic, BI/Reporting, Data Platform, External Data, Source.
+- Nodes: workspace cards, platform cards, external system cards, and integration bars.
+- Connectors: mostly vertical, orthogonal, and labeled only for cross-layer meaning.
+- Visual constraints: layer labels must align with bands, connectors must not hide system names, and dense icons should be abstracted into compact badges.
+
+## Prompt Used
+
+Create a layered implementation architecture diagram as SVG.
+
+Use a top title band and compact legend. Build five horizontal layers with a
+purple label rail on the left. In the top layer, place five organization cards
+under a collaboration bar. In the reporting layer, place a central analytics
+card. In the data platform layer, place two platform instance cards with data
+space chips and feature blocks. In the external data layer, place a shared query
+and federation bar plus three data platform cards. In the source layer, place
+five source system cards.
+
+Use vertical orthogonal connectors between layers and one horizontal connector
+between platform instances. Abstract vendor icons as small colored badges. Keep
+all text inside cards, avoid connector overlap with labels, and re-evaluate
+layer heights after rendering.
+
+## Evaluation Findings
+
+- Dense enterprise diagrams need abstraction rules; copying every icon and micro-label from a reference makes the output unreadable.
+- Layer bands are the primary structure; connectors should be secondary and lower contrast.
+- The prompt must declare which labels are essential versus optional because source diagrams contain many small badges.
+- Future master rules should add a density budget for architecture recreations: max cards per layer, max badges per card, and required zoom/screenshot review.
+

package/docs/diagrams/experiments/swimlane/diagram.mmd

@@ -0,0 +1,40 @@
+flowchart LR
+  subgraph client["Client"]
+    direction TB
+    C1(["Client submits PO"])
+  end
+
+  subgraph sales["Sales"]
+    direction TB
+    S1["Sales reviews costing"]
+  end
+
+  subgraph contracts["Contracts"]
+    direction TB
+    K1["Contracts review"]
+    K2{"Contract okay?"}
+    K3["Set mobilization date"]
+    K4["Complete requirements"]
+    K5["Completion date delayed"]
+  end
+
+  subgraph construction["Construction"]
+    direction TB
+    B1["Construction starts"]
+    B2{"Terms accepted?"}
+    B3["Return files to contractor"]
+  end
+
+  subgraph handover["Handover"]
+    direction TB
+    H1["Construction finished"]
+    H2(["Project handed over"])
+  end
+
+  C1 --> S1 --> K1 --> K2
+  K2 -- Yes --> K3 --> B1 --> B2
+  K2 -- No --> K4
+  K4 --> K3
+  B2 -- Yes --> H1 --> H2
+  B2 -- No --> B3 --> K5
+

package/docs/diagrams/experiments/swimlane/diagram.svg

@@ -0,0 +1,70 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1180" height="760" viewBox="0 0 1180 760" role="img" aria-labelledby="title desc">
+  <title id="title">Swimlane workflow experiment</title>
+  <desc id="desc">Five-lane process flow with department ownership, decisions, and handoff arrows.</desc>
+  <defs>
+    <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
+      <path d="M 0 0 L 10 5 L 0 10 z" fill="#7384b7"/>
+    </marker>
+    <style>
+      .font{font-family:Arial,Helvetica,sans-serif}.h{fill:#fff;font-size:24px;font-weight:700}.icon{fill:#fff;font-size:32px;font-weight:700}.laneText{fill:#17213a;font-size:14px}.node{fill:#fff;stroke:#8ea0d4;stroke-width:2}.start{fill:#28208b;stroke:#8ea0d4;stroke-width:2}.process{fill:#6876e8;stroke:#8ea0d4;stroke-width:2}.process2{fill:#5b9df0;stroke:#8ea0d4;stroke-width:2}.end{fill:#0966d8;stroke:#7fb3ff;stroke-width:2}.txt{fill:#fff;font-size:14px}.small{fill:#2b3556;font-size:12px}.edge{fill:none;stroke:#9aabd8;stroke-width:2;marker-end:url(#arrow)}.lbl{fill:#8c9ccb;font-size:16px}
+    </style>
+  </defs>
+  <rect x="34" y="34" width="1112" height="650" fill="#eaf0fb"/>
+  <g class="font">
+    <g>
+      <rect x="34" y="34" width="222" height="126" fill="#28208b"/>
+      <rect x="256" y="34" width="222" height="126" fill="#3e45bd"/>
+      <rect x="478" y="34" width="222" height="126" fill="#787ee8"/>
+      <rect x="700" y="34" width="222" height="126" fill="#62a2ef"/>
+      <rect x="922" y="34" width="224" height="126" fill="#0966d8"/>
+      <path d="M256 34V684M478 34V684M700 34V684M922 34V684" stroke="#fff" stroke-width="3"/>
+      <text class="icon" x="120" y="83" text-anchor="middle">+</text><text class="h" x="145" y="124" text-anchor="middle">Client</text>
+      <text class="icon" x="367" y="83" text-anchor="middle">$</text><text class="h" x="367" y="124" text-anchor="middle">Sales</text>
+      <text class="icon" x="589" y="83" text-anchor="middle">#</text><text class="h" x="589" y="124" text-anchor="middle">Contracts</text>
+      <text class="icon" x="811" y="83" text-anchor="middle">*</text><text class="h" x="811" y="124" text-anchor="middle">Construction</text>
+      <text class="icon" x="1034" y="83" text-anchor="middle">✓</text><text class="h" x="1034" y="124" text-anchor="middle">Handover</text>
+    </g>
+    <g>
+      <rect class="start" x="72" y="184" width="142" height="68" rx="28"/>
+      <text class="txt" x="143" y="213" text-anchor="middle">Client</text><text class="txt" x="143" y="231" text-anchor="middle">submits PO</text>
+      <rect class="process" x="294" y="184" width="148" height="68"/>
+      <text class="txt" x="368" y="209" text-anchor="middle">Sales reviews</text><text class="txt" x="368" y="227" text-anchor="middle">costing</text>
+      <rect class="process" x="516" y="184" width="148" height="68"/>
+      <text class="txt" x="590" y="209" text-anchor="middle">Contracts</text><text class="txt" x="590" y="227" text-anchor="middle">review</text>
+      <path class="process" d="M590 288 L662 328 L590 368 L518 328 z"/>
+      <text class="txt" x="590" y="324" text-anchor="middle">Contract</text><text class="txt" x="590" y="342" text-anchor="middle">okay?</text>
+      <rect class="process" x="516" y="414" width="148" height="68"/>
+      <text class="txt" x="590" y="441" text-anchor="middle">Set mobilization</text><text class="txt" x="590" y="459" text-anchor="middle">date</text>
+      <rect class="process2" x="738" y="414" width="148" height="68"/>
+      <text class="txt" x="812" y="441" text-anchor="middle">Construction</text><text class="txt" x="812" y="459" text-anchor="middle">starts</text>
+      <path class="process2" d="M812 526 L884 566 L812 606 L740 566 z"/>
+      <text class="txt" x="812" y="562" text-anchor="middle">Terms</text><text class="txt" x="812" y="580" text-anchor="middle">accepted?</text>
+      <rect class="process2" x="738" y="636" width="148" height="68"/>
+      <text class="txt" x="812" y="663" text-anchor="middle">Return files to</text><text class="txt" x="812" y="681" text-anchor="middle">contractor</text>
+      <rect class="process" x="516" y="636" width="148" height="68"/>
+      <text class="txt" x="590" y="663" text-anchor="middle">Completion date</text><text class="txt" x="590" y="681" text-anchor="middle">delayed</text>
+      <rect class="process" x="516" y="526" width="148" height="68"/>
+      <text class="txt" x="590" y="553" text-anchor="middle">Complete</text><text class="txt" x="590" y="571" text-anchor="middle">requirements</text>
+      <rect class="process2" x="960" y="414" width="148" height="68"/>
+      <text class="txt" x="1034" y="441" text-anchor="middle">Construction</text><text class="txt" x="1034" y="459" text-anchor="middle">finished</text>
+      <rect class="end" x="960" y="540" width="148" height="68" rx="28"/>
+      <text class="txt" x="1034" y="567" text-anchor="middle">Project handed</text><text class="txt" x="1034" y="585" text-anchor="middle">over</text>
+    </g>
+    <path class="edge" d="M214 218H294"/>
+    <path class="edge" d="M442 218H516"/>
+    <path class="edge" d="M590 252V288"/>
+    <path class="edge" d="M590 368V414"/>
+    <text class="lbl" x="606" y="393">Yes</text>
+    <path class="edge" d="M518 328H494V560H516"/>
+    <text class="lbl" x="486" y="394">No</text>
+    <path class="edge" d="M664 448H738"/>
+    <path class="edge" d="M812 482V526"/>
+    <path class="edge" d="M884 566H922V670H886"/>
+    <text class="lbl" x="902" y="618">No</text>
+    <path class="edge" d="M740 566H664"/>
+    <path class="edge" d="M738 670H664"/>
+    <path class="edge" d="M886 448H960"/>
+    <path class="edge" d="M1034 482V540"/>
+    <text class="small" x="70" y="730" font-size="22" font-weight="700">Swimlane Activity Diagram</text>
+  </g>
+</svg>