<svg viewBox="0 -24 880 684" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="diagram-title diagram-desc">
  <title id="diagram-title">Two ways to access Opportunities, and the flow from opportunity to shipped</title>
  <desc id="diagram-desc">Opportunities can be accessed two ways over the same data: an agent-native MCP interface and a UI-centric in-app interface. Both feed an example flow that moves left to right from Opportunity to Plan, Execute, Review, and Ship, with shipped outcomes fed back into the loop.</desc>

  <defs>
    <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
      <path d="M0,0 L10,5 L0,10 Z" fill="#f0f0f0" />
    </marker>
    <marker id="arrow-accent" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
      <path d="M0,0 L10,5 L0,10 Z" fill="#93c5fd" />
    </marker>
  </defs>

  <!-- ============ Title ============ -->
  <text x="440" y="30" text-anchor="middle"
        font-family="Gellix, 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, sans-serif"
        font-size="18" font-weight="600" fill="#f0f0f0">Two ways to access Opportunities</text>
  <text x="440" y="52" text-anchor="middle"
        font-family="'IBM Plex Sans', system-ui, -apple-system, Segoe UI, sans-serif"
        font-size="12" font-weight="400" fill="#a8a8a8">Same data. Same context. Use the interface that fits your workflow.</text>

  <!-- ============ Card 1: Agent-Native (MCP) ============ -->
  <g>
    <rect x="40" y="72" width="330" height="128" rx="12" ry="12" fill="#2a2a2a" stroke="#444444" stroke-width="1" />
    <circle cx="70" cy="100" r="12" fill="#1e61f0" />
    <text x="70" y="104" text-anchor="middle"
          font-family="Gellix, 'IBM Plex Sans', system-ui, sans-serif"
          font-size="13" font-weight="600" fill="#ffffff">1</text>
    <text x="92" y="98"
          font-family="Gellix, 'IBM Plex Sans', system-ui, sans-serif"
          font-size="15" font-weight="600" fill="#f0f0f0">Agent-Native (MCP)</text>
    <text x="92" y="118"
          font-family="'IBM Plex Sans', system-ui, sans-serif"
          font-size="12" font-weight="400" fill="#a8a8a8">For coding agents and automation.</text>

    <!-- terminal icon tile -->
    <rect x="60" y="140" width="40" height="40" rx="8" fill="#2a2a2a" stroke="#444444" stroke-width="1" />
    <text x="80" y="166" text-anchor="middle"
          font-family="'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace"
          font-size="16" font-weight="500" fill="#f0f0f0">&gt;_</text>

    <text x="112" y="156"
          font-family="'IBM Plex Sans', system-ui, sans-serif"
          font-size="12" font-weight="400" fill="#f0f0f0">Query opportunities programmatically</text>
    <text x="112" y="174"
          font-family="'IBM Plex Sans', system-ui, sans-serif"
          font-size="12" font-weight="400" fill="#f0f0f0">with full context and source citations.</text>
  </g>

  <!-- ============ Center: shared data ============ -->
  <g>
    <path d="M0,8 a36,8 0 0,1 72,0 v40 a36,8 0 0,1 -72,0 z" transform="translate(404,112)"
          fill="#2a2a2a" stroke="#444444" stroke-width="1" />
    <path d="M0,8 a36,8 0 0,0 72,0" transform="translate(404,112)"
          fill="none" stroke="#444444" stroke-width="1" />
    <path d="M0,24 a36,8 0 0,0 72,0" transform="translate(404,112)"
          fill="none" stroke="#444444" stroke-width="1" />
    <text x="440" y="186" text-anchor="middle"
          font-family="'IBM Plex Sans', system-ui, sans-serif"
          font-size="11" font-weight="500" fill="#a8a8a8">Same opportunity</text>
    <text x="440" y="200" text-anchor="middle"
          font-family="'IBM Plex Sans', system-ui, sans-serif"
          font-size="11" font-weight="500" fill="#a8a8a8">graph &amp; data</text>
  </g>

  <!-- ============ Card 2: UI-Centric (In-App) ============ -->
  <g>
    <rect x="510" y="72" width="330" height="128" rx="12" ry="12" fill="#2a2a2a" stroke="#444444" stroke-width="1" />
    <circle cx="540" cy="100" r="12" fill="#1e61f0" />
    <text x="540" y="104" text-anchor="middle"
          font-family="Gellix, 'IBM Plex Sans', system-ui, sans-serif"
          font-size="13" font-weight="600" fill="#ffffff">2</text>
    <text x="562" y="98"
          font-family="Gellix, 'IBM Plex Sans', system-ui, sans-serif"
          font-size="15" font-weight="600" fill="#f0f0f0">UI-Centric (In-App)</text>
    <text x="562" y="118"
          font-family="'IBM Plex Sans', system-ui, sans-serif"
          font-size="12" font-weight="400" fill="#a8a8a8">For PMs and engineering leads.</text>

    <!-- browser/list icon tile -->
    <rect x="530" y="140" width="40" height="40" rx="8" fill="#2a2a2a" stroke="#444444" stroke-width="1" />
    <rect x="539" y="150" width="22" height="20" rx="3" fill="none" stroke="#f0f0f0" stroke-width="1.2" />
    <line x1="539" y1="156" x2="561" y2="156" stroke="#f0f0f0" stroke-width="1.2" />
    <line x1="543" y1="161" x2="557" y2="161" stroke="#f0f0f0" stroke-width="1.2" />
    <line x1="543" y1="165" x2="553" y2="165" stroke="#f0f0f0" stroke-width="1.2" />

    <text x="582" y="156"
          font-family="'IBM Plex Sans', system-ui, sans-serif"
          font-size="12" font-weight="400" fill="#f0f0f0">Browse a ranked queue, triage,</text>
    <text x="582" y="174"
          font-family="'IBM Plex Sans', system-ui, sans-serif"
          font-size="12" font-weight="400" fill="#f0f0f0">review evidence, and route work.</text>
  </g>

  <!-- ============ Lower section: shifted up 28px to follow the tightened cards ============ -->
  <g transform="translate(0,-28)">
  <!-- ============ Merge connectors into the flow ============ -->
  <path d="M205,236 V250 H440" fill="none" stroke="#f0f0f0" stroke-width="1.5" />
  <path d="M675,236 V250 H440" fill="none" stroke="#f0f0f0" stroke-width="1.5" />
  <line x1="440" y1="250" x2="440" y2="281" stroke="#f0f0f0" stroke-width="1.5" marker-end="url(#arrow)" />

  <!-- ============ Section 2 heading ============ -->
  <text x="440" y="300" text-anchor="middle"
        font-family="Gellix, 'IBM Plex Sans', system-ui, sans-serif"
        font-size="16" font-weight="600" fill="#f0f0f0">From opportunity to shipped</text>
  <text x="440" y="318" text-anchor="middle"
        font-family="'IBM Plex Sans', system-ui, sans-serif"
        font-size="11" font-weight="400" fill="#a8a8a8">Example flow</text>

  <!-- ============ Pipeline stages ============ -->
  <!-- stage centers: 120, 280, 440, 600, 760 ; tiles 56px, top 346, bottom 402, mid 374 -->

  <!-- Stage 1: Opportunity -->
  <g>
    <rect x="92" y="346" width="56" height="56" rx="8" fill="#2a2a2a" stroke="#444444" stroke-width="1" />
    <line x1="110" y1="366" x2="130" y2="366" stroke="#f0f0f0" stroke-width="1.4" />
    <line x1="110" y1="374" x2="130" y2="374" stroke="#f0f0f0" stroke-width="1.4" />
    <line x1="110" y1="382" x2="124" y2="382" stroke="#f0f0f0" stroke-width="1.4" />
    <path d="M133,360 l1.6,3.4 l3.4,1.6 l-3.4,1.6 l-1.6,3.4 l-1.6,-3.4 l-3.4,-1.6 l3.4,-1.6 z" fill="#f0f0f0" />
    <text x="120" y="424" text-anchor="middle" font-family="Gellix, 'IBM Plex Sans', system-ui, sans-serif" font-size="14" font-weight="600" fill="#f0f0f0">Opportunity</text>
    <text x="120" y="442" text-anchor="middle" font-family="'IBM Plex Sans', system-ui, sans-serif" font-size="11" fill="#a8a8a8">Surfaced with summary,</text>
    <text x="120" y="456" text-anchor="middle" font-family="'IBM Plex Sans', system-ui, sans-serif" font-size="11" fill="#a8a8a8">evidence, impact, and</text>
    <text x="120" y="470" text-anchor="middle" font-family="'IBM Plex Sans', system-ui, sans-serif" font-size="11" fill="#a8a8a8">source links.</text>
  </g>

  <!-- Stage 2: Plan -->
  <g>
    <rect x="252" y="346" width="56" height="56" rx="8" fill="#2a2a2a" stroke="#444444" stroke-width="1" />
    <polygon points="273,364 273,384 290,374" fill="#f0f0f0" />
    <text x="280" y="424" text-anchor="middle" font-family="Gellix, 'IBM Plex Sans', system-ui, sans-serif" font-size="14" font-weight="600" fill="#f0f0f0">Plan</text>
    <text x="280" y="442" text-anchor="middle" font-family="'IBM Plex Sans', system-ui, sans-serif" font-size="11" fill="#a8a8a8">Review and confirm scope,</text>
    <text x="280" y="456" text-anchor="middle" font-family="'IBM Plex Sans', system-ui, sans-serif" font-size="11" fill="#a8a8a8">assign owner, set priority</text>
    <text x="280" y="470" text-anchor="middle" font-family="'IBM Plex Sans', system-ui, sans-serif" font-size="11" fill="#a8a8a8">in your system.</text>
    <!-- tool icons: Jira, Linear (Simple Icons, ink, ~16px) -->
    <g transform="translate(260,482) scale(0.667)" fill="#f0f0f0"><title>Jira</title><path d="M11.571 11.513H0a5.218 5.218 0 0 0 5.232 5.215h2.13v2.057A5.215 5.215 0 0 0 12.575 24V12.518a1.005 1.005 0 0 0-1.005-1.005zm5.723-5.756H5.736a5.215 5.215 0 0 0 5.215 5.214h2.129v2.058a5.218 5.218 0 0 0 5.215 5.214V6.758a1.001 1.001 0 0 0-1.001-1.001zM23.013 0H11.455a5.215 5.215 0 0 0 5.215 5.215h2.129v2.057A5.215 5.215 0 0 0 24 12.483V1.005A1.001 1.001 0 0 0 23.013 0Z"/></g>
    <g transform="translate(284,482) scale(0.667)" fill="#f0f0f0"><title>Linear</title><path d="M2.886 4.18A11.982 11.982 0 0 1 11.99 0C18.624 0 24 5.376 24 12.009c0 3.64-1.62 6.903-4.18 9.105L2.887 4.18ZM1.817 5.626l16.556 16.556c-.524.33-1.075.62-1.65.866L.951 7.277c.247-.575.537-1.126.866-1.65ZM.322 9.163l14.515 14.515c-.71.172-1.443.282-2.195.322L0 11.358a12 12 0 0 1 .322-2.195Zm-.17 4.862 9.823 9.824a12.02 12.02 0 0 1-9.824-9.824Z"/></g>
  </g>

  <!-- Stage 3: Execute -->
  <g>
    <rect x="412" y="346" width="56" height="56" rx="8" fill="#2a2a2a" stroke="#444444" stroke-width="1" />
    <text x="440" y="379" text-anchor="middle" font-family="'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace" font-size="15" font-weight="500" fill="#f0f0f0">&lt;/&gt;</text>
    <text x="440" y="424" text-anchor="middle" font-family="Gellix, 'IBM Plex Sans', system-ui, sans-serif" font-size="14" font-weight="600" fill="#f0f0f0">Execute</text>
    <text x="440" y="442" text-anchor="middle" font-family="'IBM Plex Sans', system-ui, sans-serif" font-size="11" fill="#a8a8a8">Agent (or human) starts</text>
    <text x="440" y="456" text-anchor="middle" font-family="'IBM Plex Sans', system-ui, sans-serif" font-size="11" fill="#a8a8a8">work with full context</text>
    <text x="440" y="470" text-anchor="middle" font-family="'IBM Plex Sans', system-ui, sans-serif" font-size="11" fill="#a8a8a8">and acceptance criteria.</text>
    <!-- tool icons: Cursor, Claude (Simple Icons, ink, ~16px) -->
    <g transform="translate(420,482) scale(0.667)" fill="#f0f0f0"><title>Cursor</title><path d="M11.503.131 1.891 5.678a.84.84 0 0 0-.42.726v11.188c0 .3.162.575.42.724l9.609 5.55a1 1 0 0 0 .998 0l9.61-5.55a.84.84 0 0 0 .42-.724V6.404a.84.84 0 0 0-.42-.726L12.497.131a1.01 1.01 0 0 0-.996 0M2.657 6.338h18.55c.263 0 .43.287.297.515L12.23 22.918c-.062.107-.229.064-.229-.06V12.335a.59.59 0 0 0-.295-.51l-9.11-5.257c-.109-.063-.064-.23.061-.23"/></g>
    <g transform="translate(444,482) scale(0.667)" fill="#f0f0f0"><title>Claude</title><path d="m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z"/></g>
  </g>

  <!-- Stage 4: Review -->
  <g>
    <rect x="572" y="346" width="56" height="56" rx="8" fill="#2a2a2a" stroke="#444444" stroke-width="1" />
    <rect x="588" y="362" width="24" height="16" rx="4" fill="none" stroke="#f0f0f0" stroke-width="1.4" />
    <path d="M594,378 l0,5 l5,-5 z" fill="#f0f0f0" />
    <text x="600" y="424" text-anchor="middle" font-family="Gellix, 'IBM Plex Sans', system-ui, sans-serif" font-size="14" font-weight="600" fill="#f0f0f0">Review</text>
    <text x="600" y="442" text-anchor="middle" font-family="'IBM Plex Sans', system-ui, sans-serif" font-size="11" fill="#a8a8a8">Comments, tests, and</text>
    <text x="600" y="456" text-anchor="middle" font-family="'IBM Plex Sans', system-ui, sans-serif" font-size="11" fill="#a8a8a8">iterations until ready</text>
    <text x="600" y="470" text-anchor="middle" font-family="'IBM Plex Sans', system-ui, sans-serif" font-size="11" fill="#a8a8a8">for merge.</text>
  </g>

  <!-- Stage 5: Ship -->
  <g>
    <rect x="732" y="346" width="56" height="56" rx="8" fill="#2a2a2a" stroke="#444444" stroke-width="1" />
    <circle cx="752" cy="367" r="3.4" fill="none" stroke="#f0f0f0" stroke-width="1.4" />
    <circle cx="752" cy="382" r="3.4" fill="none" stroke="#f0f0f0" stroke-width="1.4" />
    <circle cx="768" cy="374" r="3.4" fill="none" stroke="#f0f0f0" stroke-width="1.4" />
    <line x1="752" y1="370" x2="752" y2="379" stroke="#f0f0f0" stroke-width="1.4" />
    <path d="M752,374 q0,-7 13,-7" fill="none" stroke="#f0f0f0" stroke-width="1.4" />
    <text x="760" y="424" text-anchor="middle" font-family="Gellix, 'IBM Plex Sans', system-ui, sans-serif" font-size="14" font-weight="600" fill="#f0f0f0">Ship</text>
    <text x="760" y="442" text-anchor="middle" font-family="'IBM Plex Sans', system-ui, sans-serif" font-size="11" fill="#a8a8a8">PR merged. Outcomes</text>
    <text x="760" y="456" text-anchor="middle" font-family="'IBM Plex Sans', system-ui, sans-serif" font-size="11" fill="#a8a8a8">tracked and fed back</text>
    <text x="760" y="470" text-anchor="middle" font-family="'IBM Plex Sans', system-ui, sans-serif" font-size="11" fill="#a8a8a8">into the loop.</text>
    <!-- tool icon: GitHub (Simple Icons, ink, ~16px) -->
    <g transform="translate(752,482) scale(0.667)" fill="#f0f0f0"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></g>
  </g>

  <!-- stage arrows -->
  <line x1="156" y1="374" x2="244" y2="374" stroke="#f0f0f0" stroke-width="1.5" marker-end="url(#arrow)" />
  <line x1="316" y1="374" x2="404" y2="374" stroke="#f0f0f0" stroke-width="1.5" marker-end="url(#arrow)" />
  <line x1="476" y1="374" x2="564" y2="374" stroke="#f0f0f0" stroke-width="1.5" marker-end="url(#arrow)" />
  <line x1="636" y1="374" x2="724" y2="374" stroke="#f0f0f0" stroke-width="1.5" marker-end="url(#arrow)" />

  <!-- ============ Opportunity "includes" detail box ============ -->
  <g>
    <rect x="40" y="506" width="180" height="106" rx="8" fill="#232323" stroke="#444444" stroke-width="1" stroke-dasharray="4 4" />
    <text x="56" y="525" font-family="'IBM Plex Sans', system-ui, sans-serif" font-size="10" font-weight="600" fill="#a8a8a8" letter-spacing="1.2">INCLUDES</text>
    <circle cx="58" cy="544" r="1.6" fill="#f0f0f0" />
    <text x="66" y="548" font-family="'IBM Plex Sans', system-ui, sans-serif" font-size="11" fill="#f0f0f0">Problem statement</text>
    <circle cx="58" cy="562" r="1.6" fill="#f0f0f0" />
    <text x="66" y="566" font-family="'IBM Plex Sans', system-ui, sans-serif" font-size="11" fill="#f0f0f0">Evidence &amp; citations</text>
    <circle cx="58" cy="580" r="1.6" fill="#f0f0f0" />
    <text x="66" y="584" font-family="'IBM Plex Sans', system-ui, sans-serif" font-size="11" fill="#f0f0f0">Impact estimate</text>
    <circle cx="58" cy="598" r="1.6" fill="#f0f0f0" />
    <text x="66" y="602" font-family="'IBM Plex Sans', system-ui, sans-serif" font-size="11" fill="#f0f0f0">Suggested solution</text>
  </g>

  <!-- ============ Feedback loop (accent) ============ -->
  <path d="M760,506 V640 H130 V620" fill="none" stroke="#93c5fd" stroke-width="1.5" stroke-dasharray="5 4" marker-end="url(#arrow-accent)" />
  <rect x="333" y="632" width="224" height="16" fill="#2a2a2a" />
  <text x="445" y="644" text-anchor="middle" font-family="'IBM Plex Sans', system-ui, sans-serif" font-size="11" font-weight="500" fill="#93c5fd">Outcomes fed back into the loop</text>
  </g>
</svg>
