@jterrats/open-orchestra 1.0.2 → 1.0.4

package/docs/diagrams/diagram-master-prompt.md

@@ -0,0 +1,207 @@
+# Diagram Master Prompt
+
+Use this prompt when generating, recreating, validating, or exporting diagrams.
+It is source-free and applies to architecture, workflow, state, sequence,
+infrastructure, timeline, roadmap, story map, swimlane, and integration
+diagrams.
+
+## Role
+
+You are producing a diagram artifact that must be useful to humans and safe to
+handoff. Prioritize semantic correctness, readable layout, editable sources,
+visual clarity, and validation evidence.
+
+## Classify The Work
+
+Before drawing, classify the request:
+
+- `semantic`: explain an idea or system. Mermaid is usually acceptable.
+- `inspired-by-reference`: borrow structure or style, but exact fidelity is not
+  required.
+- `recreation`: reproduce a source reference. Acceptance is pixel-perfect source
+  fidelity unless the user explicitly accepts an approximation.
+
+For `recreation`, inventory every visible source element before drawing:
+containers, labels, icons, connectors, arrowheads, line styles, colors, borders,
+spacing, rotations, z-order, and page/canvas bounds.
+
+For source-free diagrams, create a diagram contract before drawing:
+
+- purpose and audience;
+- required nodes, groups, containers, and annotations;
+- relationships and connector intent;
+- expected reading flow;
+- target format and validation criteria;
+- known constraints or non-goals.
+
+## Choose The Target
+
+Use Mermaid first when the goal is semantic documentation, markdown-native
+review, fast validation, or offline evidence.
+
+Use draw.io XML or equivalent editable geometry when the goal requires exact
+layout, controlled connector anchors, bend points, line jumps, rotated labels,
+manual label lanes, or SVG parity.
+
+Use a collaborative visual tool when the goal is stakeholder editing, live
+review, or a team-owned visual board.
+
+Do not treat Mermaid as a pixel-perfect recreation target when exact geometry,
+icons, connector paths, rotations, or reference styling are acceptance criteria.
+
+## Drafting Rules
+
+- Use domain language from the task, but keep labels short enough to remain
+  readable.
+- Group related elements in containers only when the group adds meaning.
+- Preserve clear reading flow from entry points to outcomes.
+- Give repeated shapes consistent sizing, padding, typography, and spacing.
+- Keep cards, groups, labels, and connector lanes visually balanced across the
+  canvas.
+- Avoid decorative complexity unless it supports the diagram's purpose.
+
+## Layout And Reflow
+
+After placing real text, subcards, chips, icons, labels, badges, and internal
+connectors, run a global layout reflow before accepting the render.
+
+For every composite container, validate actual rendered child bounds against
+parent bounds. Children include text labels, nested boxes, badges, icons,
+internal connectors, annotation anchors, metadata chips, and arrowheads.
+
+If any child touches a parent edge, clips, overflows, crowds another child, or
+reduces padding below the intended minimum, grow the parent container or move
+children before shrinking text.
+
+When a parent container grows, recalculate neighboring element positions,
+connector routes, connector labels, annotation labels, and page/canvas bounds.
+A local fix is incomplete until the whole canvas passes again.
+
+## Text And Bounded Labels
+
+Long text must be layout-managed. Re-evaluate wrapping, line count, width, and
+placement for every note, annotation, card title, legend item, badge, pill, and
+connector label.
+
+Text inside bounded elements must fit inside its own shape. If text grows beyond
+the available width, wraps poorly, overlaps another element, or visually escapes
+its shape, split it into multiple lines, grow the containing shape, or move the
+element.
+
+Treat text wrapping as a geometry change. After any bounded text wraps to more
+lines, recalculate the rendered bounding box and revalidate connector lanes,
+neighboring labels, parent boundaries, and page bounds. The expanded box must
+not cover a connector, border, arrowhead, or nearby element it previously
+cleared.
+
+Do not use label backgrounds as a visual patch. A label background must not
+hide, interrupt, or visually erase the connector it describes.
+
+## Connectors
+
+Every connector must have an explicit source, target, semantic intent, endpoint
+type, and preferred anchor side before final routing.
+
+Connector intent determines the endpoint:
+
+- a connector targeting a group or boundary stops at that boundary edge;
+- a connector targeting a child element visibly attaches to that child;
+- a connector must not drift inside a container unless the interior target is
+  intentional and unambiguous.
+
+Prefer the simplest readable connector route:
+
+- straight when source and target have clear line-of-sight;
+- one orthogonal bend when it improves readability;
+- curves, multi-bend paths, diagonals, or jumps only when they avoid a real
+  obstacle, crossing, or ambiguous relationship.
+
+Before accepting a curved or multi-bend connector, verify that a straight or
+orthogonal route would collide with an element, label, boundary, or reserved
+lane. If no collision exists, simplify the route.
+
+Reserve connector-label lanes after final element positions are known. A
+connector label must clear the whole connector stroke, arrowhead, crossing
+point, border, and adjacent labels after final wrapping and padding.
+
+If a connector label collides with a route, evaluate fixes in this order:
+
+1. move the label to a clear lane;
+2. reroute the connector;
+3. move one of the connected elements;
+4. grow or reflow the containing region.
+
+## Z-Order And Visual Integrity
+
+Connectors and arrowheads must remain visible and must not sit hidden behind the
+elements they connect. Labels must not obscure the target they describe.
+
+Avoid connector lines crossing over containers, labels, or important symbols
+whenever practical. If crossings are unavoidable, use clear spacing or line
+jumps where the target format supports them.
+
+Validate annotation target clarity: annotation arrows must visibly land on the
+element or line they describe, and annotation text must not obscure the target.
+
+## Validation Loop
+
+Before accepting any rendered diagram, run a whole-canvas acceptance matrix:
+
+- semantic completeness;
+- text fit;
+- parent containment;
+- connector endpoints;
+- connector route simplicity;
+- connector-label clearance;
+- label-to-label clearance;
+- z-order and arrowhead visibility;
+- whitespace balance;
+- page/canvas bounds;
+- editable-source/render parity when an editable source exists.
+
+After every correction, re-render and inspect the whole canvas again. A local
+fix is incomplete until no new collisions, hidden endpoints, containment
+failures, or whitespace problems appear elsewhere.
+
+A regenerated version must materially change geometry when it claims to fix a
+visual finding. If the same collision, overflow, endpoint gap, or unnecessary
+route persists across versions, stop re-rendering and change the layout
+strategy: move elements, grow containers, reserve a different lane, or reroute
+the connector.
+
+Do not deliver the first render of a source-free diagram unless the complete
+acceptance matrix passes.
+
+## Evidence To Record
+
+Record the following before handoff:
+
+- target classification: `semantic`, `inspired-by-reference`, or `recreation`;
+- chosen output target and reason;
+- final artifact paths;
+- final render pass number;
+- whether text wrapping changed geometry;
+- whether parent containment passed after final reflow;
+- whether connector endpoints match their semantic targets;
+- whether curved or multi-bend connectors have concrete obstacle reasons;
+- source-vs-output gaps for recreations;
+- residual visual risks, if any.
+
+## Final Artifact Hygiene
+
+Before final delivery, keep only:
+
+- accepted editable source;
+- accepted rendered output;
+- prompt master or final prompt when it adds traceability;
+- minimum QA evidence needed for review;
+- short handoff note with final paths and residual risks.
+
+Archive or exclude intermediate previews, failed renders, temporary prompts,
+superseded SVGs, one-off correction notes, and source-specific prompt fragments.
+Keep audit-relevant iterations in workflow evidence, an explicit archive folder,
+or an ignored output location.
+
+Do not promote source-specific text, raw user prompts, secrets, or one-off
+coordinates into reusable prompt guidance. Rewrite reusable learnings as
+source-free rules before adding them to the prompt bank.

package/docs/diagrams/enterprise-set/README.md

@@ -0,0 +1,22 @@
+# Enterprise Diagram Set
+
+Task: DIAGRAM-ENTERPRISE-PROCESS-TIMELINE-SET
+
+## Diagrams
+
+1. `salesforce-enterprise-architecture.svg`
+   - Salesforce enterprise solution architecture with web, mobile,
+     integrations, SAP, Oracle, AWS, and on-prem systems.
+2. `lead-to-account-swimlanes.svg`
+   - Swimlane process from lead prospecting through account conversion.
+3. `product-implementation-timeline.svg`
+   - Multi-year product implementation timeline from discovery to release.
+
+## Validation Focus
+
+- Text fits inside cards, chips, labels, swimlane cells, and milestone blocks.
+- Parent regions contain all child elements with padding.
+- Connector labels sit in lanes and do not hide connector strokes.
+- Long labels are wrapped instead of escaping their shapes.
+- The diagrams are source-free candidates and should be reviewed against their
+  stated intent, not against a visual reference.

package/docs/diagrams/enterprise-set/lead-to-account-swimlanes.svg

@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1500" height="920" viewBox="0 0 1500 920" role="img" aria-labelledby="title desc">
+  <title id="title">Lead prospecting to account conversion swimlanes</title>
+  <desc id="desc">Swimlane process from lead prospecting through qualification, account conversion, and customer onboarding.</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>
+  <style>.font{font-family:Arial,Helvetica,sans-serif}.title{font-size:28px;font-weight:700;fill:#172033}.sub{font-size:13px;fill:#4b596c}.laneLabel{font-size:13px;font-weight:700;fill:#526174;text-transform:uppercase}.laneA{fill:#f3f8ff}.laneB{fill:#f7fbf5}.laneC{fill:#fff7ed}.laneD{fill:#f8f5ff}.laneE{fill:#fff8f8}.border{fill:none;stroke:#94a3b8;stroke-width:1.5}.step{fill:#fff;stroke:#64748b;stroke-width:1.5}.stepTitle{font-size:14px;font-weight:700;fill:#1f2a3d}.small{font-size:12px;fill:#445267}.edge{fill:none;stroke:#475569;stroke-width:2;marker-end:url(#arrow)}.edgeSoft{fill:none;stroke:#64748b;stroke-width:2;stroke-dasharray:7 5;marker-end:url(#arrow)}.pill{fill:#fff;stroke:#d8dee8;stroke-width:1}.pillText{font-size:12px;fill:#263445}</style></defs>
+  <rect width="1500" height="920" fill="#fff"/>
+  <g class="font">
+    <text class="title" x="48" y="56">Lead Prospecting To Account Conversion</text>
+    <text class="sub" x="48" y="80">Source-free swimlane process candidate for lead lifecycle validation.</text>
+    <rect class="border" x="48" y="126" width="1404" height="724" rx="16"/>
+    <rect class="laneA" x="48" y="126" width="1404" height="126" rx="16"/><text class="laneLabel" x="72" y="172">Marketing</text>
+    <rect class="laneB" x="48" y="252" width="1404" height="126"/><text class="laneLabel" x="72" y="298">Sales Development</text>
+    <rect class="laneC" x="48" y="378" width="1404" height="126"/><text class="laneLabel" x="72" y="424">Account Executive</text>
+    <rect class="laneD" x="48" y="504" width="1404" height="168"/><text class="laneLabel" x="72" y="550">Sales Operations</text>
+    <rect class="laneE" x="48" y="672" width="1404" height="178" rx="16"/><text class="laneLabel" x="72" y="718">Customer Success</text>
+    <path class="border" d="M48 252 H1452 M48 378 H1452 M48 504 H1452 M48 672 H1452"/>
+
+    <rect class="step" x="212" y="158" width="150" height="62" rx="10"/><text class="stepTitle" x="232" y="184">Capture Lead</text><text class="small" x="232" y="206">campaign form</text>
+    <rect class="step" x="420" y="158" width="160" height="62" rx="10"/><text class="stepTitle" x="440" y="184">Score + Enrich</text><text class="small" x="440" y="206">fit and intent</text>
+    <rect class="step" x="640" y="284" width="166" height="62" rx="10"/><text class="stepTitle" x="660" y="310">SDR Qualification</text><text class="small" x="660" y="332">BANT / ICP</text>
+    <rect class="step" x="866" y="284" width="164" height="62" rx="10"/><text class="stepTitle" x="886" y="310">Create Meeting</text><text class="small" x="886" y="332">accepted handoff</text>
+    <rect class="step" x="866" y="410" width="164" height="70" rx="10"/><text class="stepTitle" x="886" y="436">Discovery</text><text class="small" x="886" y="458">pain, value,</text><text class="small" x="886" y="474">decision process</text>
+    <rect class="step" x="1090" y="410" width="166" height="70" rx="10"/><text class="stepTitle" x="1110" y="436">Opportunity</text><text class="small" x="1110" y="458">qualified pipeline</text><text class="small" x="1110" y="474">next step set</text>
+    <rect class="step" x="1090" y="546" width="166" height="82" rx="10"/><text class="stepTitle" x="1110" y="572">Convert Lead</text><text class="small" x="1110" y="594">account, contact,</text><text class="small" x="1110" y="612">opportunity</text>
+    <rect class="step" x="1282" y="546" width="132" height="82" rx="10"/><text class="stepTitle" x="1300" y="572">Data QA</text><text class="small" x="1300" y="594">dedupe and</text><text class="small" x="1300" y="612">ownership</text>
+    <rect class="step" x="1282" y="724" width="132" height="78" rx="10"/><text class="stepTitle" x="1300" y="750">Onboard</text><text class="small" x="1300" y="772">welcome plan</text><text class="small" x="1300" y="790">success owner</text>
+
+    <path class="edge" d="M362 189 H420"/><rect class="pill" x="370" y="162" width="42" height="20" rx="4"/><text class="pillText" x="378" y="176">raw</text>
+    <path class="edge" d="M580 189 H610 Q640 189 640 315"/><rect class="pill" x="592" y="214" width="82" height="20" rx="4"/><text class="pillText" x="600" y="228">MQL route</text>
+    <path class="edge" d="M806 315 H866"/><rect class="pill" x="820" y="288" width="34" height="20" rx="4"/><text class="pillText" x="828" y="302">SQL</text>
+    <path class="edge" d="M948 346 V410"/><rect class="pill" x="966" y="368" width="76" height="20" rx="4"/><text class="pillText" x="974" y="382">meeting held</text>
+    <path class="edge" d="M1030 445 H1090"/><rect class="pill" x="1040" y="418" width="38" height="20" rx="4"/><text class="pillText" x="1048" y="432">SAO</text>
+    <path class="edge" d="M1173 480 V546"/><rect class="pill" x="1192" y="508" width="92" height="20" rx="4"/><text class="pillText" x="1200" y="522">conversion</text>
+    <path class="edge" d="M1256 587 H1282"/><rect class="pill" x="1256" y="518" width="76" height="20" rx="4"/><text class="pillText" x="1264" y="532">validate</text>
+    <path class="edge" d="M1348 628 V724"/><rect class="pill" x="1364" y="660" width="76" height="38" rx="4"/><text class="pillText" x="1372" y="676">handoff</text><text class="pillText" x="1372" y="692">package</text>
+    <path class="edgeSoft" d="M640 330 H560 Q532 330 532 220"/><rect class="pill" x="514" y="280" width="106" height="38" rx="4"/><text class="pillText" x="522" y="296">recycle if not</text><text class="pillText" x="522" y="312">sales-ready</text>
+  </g>
+</svg>

package/docs/diagrams/enterprise-set/product-implementation-timeline.svg

@@ -0,0 +1,45 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1500" height="860" viewBox="0 0 1500 860" role="img" aria-labelledby="title desc">
+  <title id="title">Product implementation timeline</title>
+  <desc id="desc">Two to three year product implementation timeline from discovery through release and scale.</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>
+  <style>.font{font-family:Arial,Helvetica,sans-serif}.title{font-size:28px;font-weight:700;fill:#172033}.sub{font-size:13px;fill:#4b596c}.axis{stroke:#475569;stroke-width:3;marker-end:url(#arrow)}.tick{stroke:#64748b;stroke-width:1.5}.year{font-size:13px;font-weight:700;fill:#526174}.phase{fill:#fff;stroke:#64748b;stroke-width:1.5}.p1{fill:#f3f8ff}.p2{fill:#f7fbf5}.p3{fill:#fff7ed}.p4{fill:#f8f5ff}.p5{fill:#fff8f8}.phaseTitle{font-size:15px;font-weight:700;fill:#1f2a3d}.small{font-size:12px;fill:#445267}.label{font-size:13px;font-weight:700;fill:#526174;text-transform:uppercase}.milestone{fill:#fff;stroke:#64748b;stroke-width:1.5}.diamond{fill:#fff;stroke:#475569;stroke-width:1.5}.lane{fill:#f8fafc;stroke:#cbd5e1;stroke-width:1}.pill{fill:#fff;stroke:#d8dee8;stroke-width:1}.pillText{font-size:12px;fill:#263445}</style></defs>
+  <rect width="1500" height="860" fill="#fff"/>
+  <g class="font">
+    <text class="title" x="48" y="56">Product Implementation Timeline To Release</text>
+    <text class="sub" x="48" y="80">Source-free 30-month implementation plan with staged releases, gates, and adoption waves.</text>
+    <line class="axis" x1="100" y1="426" x2="1396" y2="426"/>
+    <g>
+      <line class="tick" x1="132" y1="406" x2="132" y2="446"/><text class="year" x="106" y="388">Q1 Y1</text>
+      <line class="tick" x1="300" y1="406" x2="300" y2="446"/><text class="year" x="274" y="388">Q2 Y1</text>
+      <line class="tick" x1="468" y1="406" x2="468" y2="446"/><text class="year" x="442" y="388">Q3 Y1</text>
+      <line class="tick" x1="636" y1="406" x2="636" y2="446"/><text class="year" x="610" y="388">Q4 Y1</text>
+      <line class="tick" x1="804" y1="406" x2="804" y2="446"/><text class="year" x="778" y="388">Q1 Y2</text>
+      <line class="tick" x1="972" y1="406" x2="972" y2="446"/><text class="year" x="946" y="388">Q2 Y2</text>
+      <line class="tick" x1="1140" y1="406" x2="1140" y2="446"/><text class="year" x="1114" y="388">Q3 Y2</text>
+      <line class="tick" x1="1308" y1="406" x2="1308" y2="446"/><text class="year" x="1282" y="388">Q4 Y2</text>
+    </g>
+
+    <rect class="lane" x="84" y="120" width="1334" height="112" rx="14"/><text class="label" x="112" y="154">Strategy And Discovery</text>
+    <rect class="phase p1" x="150" y="164" width="244" height="52" rx="10"/><text class="phaseTitle" x="170" y="186">Vision + Business Case</text><text class="small" x="170" y="206">funding, KPIs, roadmap</text>
+    <rect class="phase p1" x="428" y="164" width="244" height="52" rx="10"/><text class="phaseTitle" x="448" y="186">Domain Discovery</text><text class="small" x="448" y="206">journeys, risks, data</text>
+
+    <rect class="lane" x="84" y="250" width="1334" height="112" rx="14"/><text class="label" x="112" y="284">Foundation And MVP</text>
+    <rect class="phase p2" x="318" y="294" width="300" height="52" rx="10"/><text class="phaseTitle" x="338" y="316">Platform Foundation</text><text class="small" x="338" y="336">architecture, CI/CD, security</text>
+    <rect class="phase p2" x="666" y="294" width="300" height="52" rx="10"/><text class="phaseTitle" x="686" y="316">MVP Build</text><text class="small" x="686" y="336">core journeys and integrations</text>
+
+    <rect class="lane" x="84" y="490" width="1334" height="112" rx="14"/><text class="label" x="112" y="524">Scale And Hardening</text>
+    <rect class="phase p3" x="646" y="534" width="284" height="52" rx="10"/><text class="phaseTitle" x="666" y="556">Pilot Release</text><text class="small" x="666" y="576">limited users, feedback loop</text>
+    <rect class="phase p3" x="982" y="534" width="284" height="52" rx="10"/><text class="phaseTitle" x="1002" y="556">Enterprise Hardening</text><text class="small" x="1002" y="576">performance, DR, compliance</text>
+
+    <rect class="lane" x="84" y="626" width="1334" height="126" rx="14"/><text class="label" x="112" y="660">Launch And Adoption</text>
+    <rect class="phase p4" x="1102" y="674" width="216" height="58" rx="10"/><text class="phaseTitle" x="1122" y="696">GA Release</text><text class="small" x="1122" y="716">go-live, support readiness</text>
+    <rect class="phase p5" x="1328" y="674" width="72" height="58" rx="10"/><text class="phaseTitle" x="1344" y="696">Scale</text><text class="small" x="1342" y="716">waves</text>
+
+    <polygon class="diamond" points="636,410 652,426 636,442 620,426"/><rect class="pill" x="574" y="448" width="124" height="38" rx="5"/><text class="pillText" x="582" y="464">Architecture</text><text class="pillText" x="582" y="480">gate</text>
+    <polygon class="diamond" points="972,410 988,426 972,442 956,426"/><rect class="pill" x="912" y="448" width="120" height="38" rx="5"/><text class="pillText" x="920" y="464">Pilot go/no-go</text><text class="pillText" x="920" y="480">decision</text>
+    <polygon class="diamond" points="1140,410 1156,426 1140,442 1124,426"/><rect class="pill" x="1078" y="448" width="124" height="38" rx="5"/><text class="pillText" x="1086" y="464">Release</text><text class="pillText" x="1086" y="480">readiness</text>
+    <polygon class="diamond" points="1308,410 1324,426 1308,442 1292,426"/><rect class="pill" x="1250" y="448" width="116" height="38" rx="5"/><text class="pillText" x="1258" y="464">GA sign-off</text><text class="pillText" x="1258" y="480">and launch</text>
+
+    <rect class="pill" x="520" y="774" width="458" height="42" rx="8"/><text class="pillText" x="536" y="792">Timeline assumes a 24 to 30 month product journey with phased delivery,</text><text class="pillText" x="536" y="808">progressive release gates, adoption waves, and post-launch scaling.</text>
+  </g>
+</svg>

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>