@pareto4/pp-core 1.7.1 → 1.8.0

package/pareto-skills/pp-brand/assets/crew/ParetoAgent.inline.html

@@ -0,0 +1,120 @@
+<!--
+  Pareto Crew — vanilla HTML/CSS snippet.
+  Copy-paste anywhere (emails, docs, plain HTML pages, slide exports).
+  No JS required. Self-contained styles scoped under .pareto-agent.
+
+  One agent per delivery PHASE — no character names.
+  Change data-role to one of: discovery · plan · build · validate · deploy · run
+  …and swap the <g class="pa-acc"> accessory to match (snippets at the bottom).
+  Change --pa-size to any px/rem.
+
+  Note: the cursor-tracking pupils need JS — use assets/crew/ParetoAgent.tsx
+  for the full interactive behaviour. This static snippet keeps eyes at rest.
+
+  Respects prefers-reduced-motion.
+-->
+
+<style>
+  .pareto-agent {
+    --pa-size: 200px;
+    --pa-body: #2251FF;
+    --pa-antenna: #F6B437;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+  }
+  /* Phase body colors */
+  .pareto-agent[data-role="discovery"] { --pa-body: #F6B437; --pa-antenna: #2251FF; }
+  .pareto-agent[data-role="plan"]      { --pa-body: #146FF4; }
+  .pareto-agent[data-role="build"]     { --pa-body: #2251FF; }
+  .pareto-agent[data-role="validate"]  { --pa-body: #3ECF8E; }
+  .pareto-agent[data-role="deploy"]    { --pa-body: #FF6B4A; }
+  .pareto-agent[data-role="run"]       { --pa-body: #A884FF; }
+
+  .pareto-agent svg { width: var(--pa-size); height: var(--pa-size); display: block; }
+  .pareto-agent .pa-body-fill { fill: var(--pa-body); }
+  .pareto-agent .pa-antenna-fill { fill: var(--pa-antenna); }
+
+  .pareto-agent .pa-svg       { animation: pa-bob 3.4s ease-in-out infinite; transform-origin: center bottom; }
+  .pareto-agent .pa-antenna   { transform-origin: 70px 7px; animation: pa-pulse 2.2s ease-in-out infinite; }
+  .pareto-agent .pa-eye       { transform-origin: center; transform-box: fill-box; animation: pa-blink 5s ease-in-out infinite; }
+  .pareto-agent .pa-eye-r     { animation-delay: 0.08s; }
+  .pareto-agent .pa-smile     { transform-origin: 70px 94px; animation: pa-smile 4s ease-in-out infinite; }
+
+  .pareto-agent[data-role="discovery"] .pa-acc { transform-origin: 104px 34px;  animation: pa-scan 3.2s ease-in-out infinite; }
+  .pareto-agent[data-role="plan"]      .pa-acc { transform-origin: 103px 88px;  animation: pa-tick 3.4s ease-in-out infinite; }
+  .pareto-agent[data-role="build"]     .pa-acc { transform-origin: 70px 30px;   animation: pa-tip 3.6s ease-in-out infinite; }
+  .pareto-agent[data-role="validate"]  .pa-acc { transform-origin: 103px 88px;  animation: pa-tick 3.2s ease-in-out infinite; }
+  .pareto-agent[data-role="deploy"]    .pa-acc { transform-origin: 109px 35px;  animation: pa-fly 1.8s ease-in-out infinite; }
+  .pareto-agent[data-role="run"]       .pa-acc { transform-origin: 106px 100px; animation: pa-rev 2.4s ease-in-out infinite; }
+
+  .pareto-agent[data-role="discovery"] .pa-svg { animation-delay: 0s; }
+  .pareto-agent[data-role="plan"]      .pa-svg { animation-delay: 0.3s; }
+  .pareto-agent[data-role="build"]     .pa-svg { animation-delay: 0.6s; }
+  .pareto-agent[data-role="validate"]  .pa-svg { animation-delay: 0.9s; }
+  .pareto-agent[data-role="deploy"]    .pa-svg { animation-delay: 1.2s; }
+  .pareto-agent[data-role="run"]       .pa-svg { animation-delay: 1.5s; }
+
+  @keyframes pa-bob    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
+  @keyframes pa-pulse  { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.85; } }
+  @keyframes pa-blink  { 0%,92%,100% { transform: scaleY(1); } 94%,98% { transform: scaleY(0.1); } }
+  @keyframes pa-smile  { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(1.08) translateY(-1px); } }
+  @keyframes pa-tip    { 0%,80%,100% { transform: translateY(0) rotate(0); } 40%,60% { transform: translateY(-2px) rotate(-4deg); } }
+  @keyframes pa-tick   { 0%,60%,100% { transform: translateY(0) rotate(0); } 70%,80% { transform: translateY(-2px) rotate(-4deg); } }
+  @keyframes pa-fly    { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(3px,-4px) rotate(10deg); } }
+  @keyframes pa-scan   { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(-3px,2px) rotate(-8deg); } }
+  @keyframes pa-rev    { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
+
+  @media (prefers-reduced-motion: reduce) {
+    .pareto-agent *, .pareto-agent .pa-svg { animation: none !important; }
+  }
+
+  .pareto-agent__label {
+    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 11px;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--pa-body);
+  }
+</style>
+
+<!-- Build agent (default). Swap data-role + the <g class="pa-acc"> accessory below. -->
+<div class="pareto-agent" data-role="build" style="--pa-size: 200px;">
+  <svg class="pa-svg" viewBox="0 0 140 140" fill="none" aria-label="Build — Pareto agent">
+    <rect x="20" y="26" width="100" height="90" rx="28" class="pa-body-fill"/>
+    <path d="M70 10 L70 26" stroke-width="4" stroke-linecap="round" style="stroke: var(--pa-body);"/>
+    <circle class="pa-antenna pa-antenna-fill" cx="70" cy="7" r="5"/>
+    <g class="pa-eye pa-eye-l"><circle cx="52" cy="66" r="8" fill="#fff"/><circle cx="53" cy="68" r="4" fill="#0A1330"/></g>
+    <g class="pa-eye pa-eye-r"><circle cx="88" cy="66" r="8" fill="#fff"/><circle cx="89" cy="68" r="4" fill="#0A1330"/></g>
+    <path class="pa-smile" d="M58 90 Q70 100 82 90" stroke="#0A1330" stroke-width="3" stroke-linecap="round" fill="none"/>
+    <!-- Accessory: BUILD (hard hat) -->
+    <g class="pa-acc">
+      <path d="M34 30 Q70 14 106 30 L106 34 L34 34 Z" fill="#F6B437"/>
+      <rect x="68" y="16" width="4" height="14" fill="#E0920C"/>
+    </g>
+  </svg>
+  <span class="pareto-agent__label">Build</span>
+</div>
+
+<!--
+  ACCESSORIES — paste the matching <g class="pa-acc"> for the chosen data-role:
+
+  DISCOVERY (magnifying glass):
+  <g class="pa-acc"><circle cx="104" cy="34" r="7" fill="none" stroke="#0A1330" stroke-width="3"/><path d="M109 39 L117 47" stroke="#0A1330" stroke-width="3" stroke-linecap="round"/></g>
+
+  PLAN (blueprint):
+  <g class="pa-acc"><rect x="92" y="74" width="22" height="28" rx="2" fill="#fff" stroke="#0A1330" stroke-width="1.5"/><path d="M96 80h14M96 86h14M96 92h9" stroke="#146FF4" stroke-width="1.4" stroke-linecap="round"/><path d="M101 74v28" stroke="#0A1330" stroke-width="1" stroke-dasharray="2 2"/></g>
+
+  BUILD (hard hat):
+  <g class="pa-acc"><path d="M34 30 Q70 14 106 30 L106 34 L34 34 Z" fill="#F6B437"/><rect x="68" y="16" width="4" height="14" fill="#E0920C"/></g>
+
+  VALIDATE (checklist):
+  <g class="pa-acc"><rect x="92" y="74" width="22" height="28" rx="2" fill="#fff" stroke="#0A1330" stroke-width="1.5"/><rect x="97" y="70" width="12" height="7" rx="1" fill="#0A1330"/><path d="M96 88 l4 4 7-8" stroke="#1D9E75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></g>
+
+  DEPLOY (rocket):
+  <g class="pa-acc"><path d="M102 40 L116 26 L112 44 Z" fill="#2251FF"/><path d="M110 34 L118 42" stroke="#F6B437" stroke-width="2.5" stroke-linecap="round"/></g>
+
+  RUN (gauge):
+  <g class="pa-acc"><path d="M94 100 a13 13 0 0 1 24 0" fill="none" stroke="#0A1330" stroke-width="2.5" stroke-linecap="round"/><path d="M106 100 L114 91" stroke="#0A1330" stroke-width="2.5" stroke-linecap="round"/><circle cx="106" cy="100" r="2.4" fill="#0A1330"/></g>
+-->

package/pareto-skills/pp-brand/assets/crew/ParetoAgent.tsx

@@ -0,0 +1,239 @@
+'use client'
+
+import { useEffect, useRef, type CSSProperties } from 'react'
+
+// One agent per pipeline phase. No character names — the phase is the identity.
+type Role = 'hero' | 'discovery' | 'plan' | 'build' | 'validate' | 'deploy' | 'run'
+
+interface Props {
+  role?: Role
+  size?: number
+  label?: string
+  animate?: boolean
+}
+
+const BODY: Record<Role, string> = {
+  hero:      '#2251FF', // Pareto Blue
+  discovery: '#F6B437', // Amber   — human-led
+  plan:      '#146FF4', // Steel
+  build:     '#2251FF', // Pareto Blue
+  validate:  '#3ECF8E', // Mint    — human-led
+  deploy:    '#FF6B4A', // Coral
+  run:       '#A884FF', // Violet
+}
+
+const ROLE_LABEL: Record<Role, string> = {
+  hero: 'Pareto', discovery: 'Discovery', plan: 'Plan', build: 'Build',
+  validate: 'Validate', deploy: 'Deploy', run: 'Run',
+}
+
+// Eye geometry in the 140×140 viewBox. Pupils track the cursor around the
+// white-of-eye centre (wx/wy); MAX_TRAVEL keeps the pupil inside the white.
+const EYES = {
+  left:  { wx: 52, wy: 66 },
+  right: { wx: 88, wy: 66 },
+}
+const MAX_TRAVEL = 3
+
+export default function ParetoAgent({
+  role = 'hero',
+  size = 200,
+  label,
+  animate = true,
+}: Props) {
+  const color = BODY[role]
+  const antennaDot = role === 'discovery' ? '#2251FF' : '#F6B437'
+
+  const svgRef = useRef<SVGSVGElement>(null)
+  const leftPupil = useRef<SVGCircleElement>(null)
+  const rightPupil = useRef<SVGCircleElement>(null)
+
+  // Pupils follow the mouse. rAF-throttled, and disabled under reduced-motion.
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
+
+    let raf = 0
+    let pending: { x: number; y: number } | null = null
+
+    const apply = () => {
+      raf = 0
+      const svg = svgRef.current
+      if (!svg || !pending) return
+      const rect = svg.getBoundingClientRect()
+      if (!rect.width) return
+      const scale = rect.width / 140
+      const { x, y } = pending
+
+      const aim = (pupil: SVGCircleElement | null, e: { wx: number; wy: number }) => {
+        if (!pupil) return
+        const cx = rect.left + e.wx * scale
+        const cy = rect.top + e.wy * scale
+        const dx = x - cx
+        const dy = y - cy
+        const dist = Math.hypot(dx, dy) || 1
+        const travel = Math.min(MAX_TRAVEL, dist / scale)
+        pupil.setAttribute('cx', String(e.wx + (dx / dist) * travel))
+        pupil.setAttribute('cy', String(e.wy + (dy / dist) * travel))
+      }
+      aim(leftPupil.current, EYES.left)
+      aim(rightPupil.current, EYES.right)
+    }
+
+    const onMove = (ev: MouseEvent) => {
+      pending = { x: ev.clientX, y: ev.clientY }
+      if (!raf) raf = requestAnimationFrame(apply)
+    }
+
+    window.addEventListener('mousemove', onMove, { passive: true })
+    return () => {
+      window.removeEventListener('mousemove', onMove)
+      if (raf) cancelAnimationFrame(raf)
+    }
+  }, [])
+
+  const wrap: CSSProperties = {
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: 10,
+  }
+
+  return (
+    <div style={wrap} data-pareto-agent={role}>
+      <style>{css(animate)}</style>
+
+      <svg
+        ref={svgRef}
+        className="pa-svg"
+        width={size}
+        height={size}
+        viewBox="0 0 140 140"
+        fill="none"
+        aria-label={`${ROLE_LABEL[role]} — Pareto agent`}
+      >
+        {/* Body */}
+        <rect x="20" y="26" width="100" height="90" rx="28" fill={color} />
+
+        {/* Antenna */}
+        <path d="M70 10 L70 26" stroke={color} strokeWidth="4" strokeLinecap="round" />
+        <circle className="pa-antenna" cx="70" cy="7" r="5" fill={antennaDot} />
+
+        {/* Eyes (pupils track the cursor) */}
+        <g className="pa-eye pa-eye-l">
+          <circle cx="52" cy="66" r="8" fill="#fff" />
+          <circle ref={leftPupil} cx="53" cy="68" r="4" fill="#0A1330" />
+        </g>
+        <g className="pa-eye pa-eye-r">
+          <circle cx="88" cy="66" r="8" fill="#fff" />
+          <circle ref={rightPupil} cx="89" cy="68" r="4" fill="#0A1330" />
+        </g>
+
+        {/* Smile */}
+        <path
+          className="pa-smile"
+          d="M58 90 Q70 100 82 90"
+          stroke="#0A1330"
+          strokeWidth="3"
+          strokeLinecap="round"
+          fill="none"
+        />
+
+        {/* Role accessories — one per phase */}
+        {role === 'discovery' && (
+          <g className="pa-acc pa-magnify">
+            <circle cx="104" cy="34" r="7" fill="none" stroke="#0A1330" strokeWidth="3" />
+            <path d="M109 39 L117 47" stroke="#0A1330" strokeWidth="3" strokeLinecap="round" />
+          </g>
+        )}
+        {role === 'plan' && (
+          <g className="pa-acc pa-plan">
+            <rect x="92" y="74" width="22" height="28" rx="2" fill="#fff" stroke="#0A1330" strokeWidth="1.5" />
+            <path d="M96 80h14M96 86h14M96 92h9" stroke="#146FF4" strokeWidth="1.4" strokeLinecap="round" />
+            <path d="M101 74v28" stroke="#0A1330" strokeWidth="1" strokeDasharray="2 2" />
+          </g>
+        )}
+        {role === 'build' && (
+          <g className="pa-acc pa-hardhat">
+            <path d="M34 30 Q70 14 106 30 L106 34 L34 34 Z" fill="#F6B437" />
+            <rect x="68" y="16" width="4" height="14" fill="#E0920C" />
+          </g>
+        )}
+        {role === 'validate' && (
+          <g className="pa-acc pa-clipboard">
+            <rect x="92" y="74" width="22" height="28" rx="2" fill="#fff" stroke="#0A1330" strokeWidth="1.5" />
+            <rect x="97" y="70" width="12" height="7" rx="1" fill="#0A1330" />
+            <path d="M96 88 l4 4 7-8" stroke="#1D9E75" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
+          </g>
+        )}
+        {role === 'deploy' && (
+          <g className="pa-acc pa-rocket">
+            <path d="M102 40 L116 26 L112 44 Z" fill="#2251FF" />
+            <path d="M110 34 L118 42" stroke="#F6B437" strokeWidth="2.5" strokeLinecap="round" />
+          </g>
+        )}
+        {role === 'run' && (
+          <g className="pa-acc pa-gauge">
+            <path d="M94 100 a13 13 0 0 1 24 0" fill="none" stroke="#0A1330" strokeWidth="2.5" strokeLinecap="round" />
+            <path d="M106 100 L114 91" stroke="#0A1330" strokeWidth="2.5" strokeLinecap="round" />
+            <circle cx="106" cy="100" r="2.4" fill="#0A1330" />
+          </g>
+        )}
+      </svg>
+
+      {label && (
+        <span
+          style={{
+            fontFamily: "var(--font-mono), 'JetBrains Mono', monospace",
+            fontSize: 11,
+            letterSpacing: '0.16em',
+            textTransform: 'uppercase',
+            color: color,
+          }}
+        >
+          {label}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function css(animate: boolean) {
+  if (!animate) return ''
+  return `
+    [data-pareto-agent] .pa-svg { animation: pa-bob 3.4s ease-in-out infinite; transform-origin: center bottom; }
+    [data-pareto-agent] .pa-antenna { transform-origin: 70px 7px; animation: pa-pulse 2.2s ease-in-out infinite; }
+    [data-pareto-agent] .pa-eye { transform-origin: center; transform-box: fill-box; animation: pa-blink 5s ease-in-out infinite; }
+    [data-pareto-agent] .pa-eye-r { animation-delay: 0.08s; }
+    [data-pareto-agent] .pa-smile { transform-origin: 70px 94px; animation: pa-smile 4s ease-in-out infinite; }
+
+    [data-pareto-agent="discovery"] .pa-magnify { transform-origin: 104px 34px; animation: pa-scan 3.2s ease-in-out infinite; }
+    [data-pareto-agent="plan"] .pa-plan         { transform-origin: 103px 88px; animation: pa-tick 3.4s ease-in-out infinite; }
+    [data-pareto-agent="build"] .pa-hardhat     { transform-origin: 70px 30px;  animation: pa-tip 3.6s ease-in-out infinite; }
+    [data-pareto-agent="validate"] .pa-clipboard{ transform-origin: 103px 88px; animation: pa-tick 3.2s ease-in-out infinite; }
+    [data-pareto-agent="deploy"] .pa-rocket     { transform-origin: 109px 35px; animation: pa-fly 1.8s ease-in-out infinite; }
+    [data-pareto-agent="run"] .pa-gauge         { transform-origin: 106px 100px; animation: pa-rev 2.4s ease-in-out infinite; }
+
+    /* Stagger so a row of agents isn't in sync */
+    [data-pareto-agent="discovery"] .pa-svg { animation-delay: 0s; }
+    [data-pareto-agent="plan"] .pa-svg      { animation-delay: 0.3s; }
+    [data-pareto-agent="build"] .pa-svg     { animation-delay: 0.6s; }
+    [data-pareto-agent="validate"] .pa-svg  { animation-delay: 0.9s; }
+    [data-pareto-agent="deploy"] .pa-svg    { animation-delay: 1.2s; }
+    [data-pareto-agent="run"] .pa-svg       { animation-delay: 1.5s; }
+
+    @keyframes pa-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
+    @keyframes pa-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.85; } }
+    @keyframes pa-blink { 0%,92%,100% { transform: scaleY(1); } 94%,98% { transform: scaleY(0.1); } }
+    @keyframes pa-smile { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(1.08) translateY(-1px); } }
+    @keyframes pa-tip { 0%,80%,100% { transform: translateY(0) rotate(0); } 40%,60% { transform: translateY(-2px) rotate(-4deg); } }
+    @keyframes pa-tick { 0%,60%,100% { transform: translateY(0) rotate(0); } 70%,80% { transform: translateY(-2px) rotate(-4deg); } }
+    @keyframes pa-fly { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(3px,-4px) rotate(10deg); } }
+    @keyframes pa-scan { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(-3px,2px) rotate(-8deg); } }
+    @keyframes pa-rev { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
+
+    @media (prefers-reduced-motion: reduce) {
+      [data-pareto-agent] *, [data-pareto-agent] .pa-svg { animation: none !important; }
+    }
+  `
+}

package/pareto-skills/pp-brand/assets/crew/build.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140" fill="none">
+  <rect x="20" y="26" width="100" height="90" rx="28" fill="#2251FF"/>
+  <path d="M70 10 L70 26" stroke="#2251FF" stroke-width="4" stroke-linecap="round"/>
+  <circle cx="70" cy="7" r="5" fill="#F6B437"/>
+  <circle cx="52" cy="66" r="8" fill="#fff"/>
+  <circle cx="53" cy="68" r="4" fill="#0A1330"/>
+  <circle cx="88" cy="66" r="8" fill="#fff"/>
+  <circle cx="89" cy="68" r="4" fill="#0A1330"/>
+  <path d="M58 90 Q70 100 82 90" stroke="#0A1330" stroke-width="3" stroke-linecap="round" fill="none"/>
+  <g><path d="M34 30 Q70 14 106 30 L106 34 L34 34 Z" fill="#F6B437"/><rect x="68" y="16" width="4" height="14" fill="#E0920C"/></g>
+</svg>

package/pareto-skills/pp-brand/assets/crew/deploy.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140" fill="none">
+  <rect x="20" y="26" width="100" height="90" rx="28" fill="#FF6B4A"/>
+  <path d="M70 10 L70 26" stroke="#FF6B4A" stroke-width="4" stroke-linecap="round"/>
+  <circle cx="70" cy="7" r="5" fill="#F6B437"/>
+  <circle cx="52" cy="66" r="8" fill="#fff"/>
+  <circle cx="53" cy="68" r="4" fill="#0A1330"/>
+  <circle cx="88" cy="66" r="8" fill="#fff"/>
+  <circle cx="89" cy="68" r="4" fill="#0A1330"/>
+  <path d="M58 90 Q70 100 82 90" stroke="#0A1330" stroke-width="3" stroke-linecap="round" fill="none"/>
+  <g><path d="M102 40 L116 26 L112 44 Z" fill="#2251FF"/><path d="M110 34 L118 42" stroke="#F6B437" stroke-width="2.5" stroke-linecap="round"/></g>
+</svg>

package/pareto-skills/pp-brand/assets/crew/discovery.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140" fill="none">
+  <rect x="20" y="26" width="100" height="90" rx="28" fill="#F6B437"/>
+  <path d="M70 10 L70 26" stroke="#F6B437" stroke-width="4" stroke-linecap="round"/>
+  <circle cx="70" cy="7" r="5" fill="#2251FF"/>
+  <circle cx="52" cy="66" r="8" fill="#fff"/>
+  <circle cx="53" cy="68" r="4" fill="#0A1330"/>
+  <circle cx="88" cy="66" r="8" fill="#fff"/>
+  <circle cx="89" cy="68" r="4" fill="#0A1330"/>
+  <path d="M58 90 Q70 100 82 90" stroke="#0A1330" stroke-width="3" stroke-linecap="round" fill="none"/>
+  <g><circle cx="104" cy="34" r="7" fill="none" stroke="#0A1330" stroke-width="3"/><path d="M109 39 L117 47" stroke="#0A1330" stroke-width="3" stroke-linecap="round"/></g>
+</svg>

package/pareto-skills/pp-brand/assets/crew/plan.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140" fill="none">
+  <rect x="20" y="26" width="100" height="90" rx="28" fill="#146FF4"/>
+  <path d="M70 10 L70 26" stroke="#146FF4" stroke-width="4" stroke-linecap="round"/>
+  <circle cx="70" cy="7" r="5" fill="#F6B437"/>
+  <circle cx="52" cy="66" r="8" fill="#fff"/>
+  <circle cx="53" cy="68" r="4" fill="#0A1330"/>
+  <circle cx="88" cy="66" r="8" fill="#fff"/>
+  <circle cx="89" cy="68" r="4" fill="#0A1330"/>
+  <path d="M58 90 Q70 100 82 90" stroke="#0A1330" stroke-width="3" stroke-linecap="round" fill="none"/>
+  <g><rect x="92" y="74" width="22" height="28" rx="2" fill="#fff" stroke="#0A1330" stroke-width="1.5"/><path d="M96 80h14M96 86h14M96 92h9" stroke="#146FF4" stroke-width="1.4" stroke-linecap="round"/><path d="M101 74v28" stroke="#0A1330" stroke-width="1" stroke-dasharray="2 2"/></g>
+</svg>

package/pareto-skills/pp-brand/assets/crew/run.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140" fill="none">
+  <rect x="20" y="26" width="100" height="90" rx="28" fill="#A884FF"/>
+  <path d="M70 10 L70 26" stroke="#A884FF" stroke-width="4" stroke-linecap="round"/>
+  <circle cx="70" cy="7" r="5" fill="#F6B437"/>
+  <circle cx="52" cy="66" r="8" fill="#fff"/>
+  <circle cx="53" cy="68" r="4" fill="#0A1330"/>
+  <circle cx="88" cy="66" r="8" fill="#fff"/>
+  <circle cx="89" cy="68" r="4" fill="#0A1330"/>
+  <path d="M58 90 Q70 100 82 90" stroke="#0A1330" stroke-width="3" stroke-linecap="round" fill="none"/>
+  <g><path d="M94 100 a13 13 0 0 1 24 0" fill="none" stroke="#0A1330" stroke-width="2.5" stroke-linecap="round"/><path d="M106 100 L114 91" stroke="#0A1330" stroke-width="2.5" stroke-linecap="round"/><circle cx="106" cy="100" r="2.4" fill="#0A1330"/></g>
+</svg>

package/pareto-skills/pp-brand/assets/crew/validate.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140" fill="none">
+  <rect x="20" y="26" width="100" height="90" rx="28" fill="#3ECF8E"/>
+  <path d="M70 10 L70 26" stroke="#3ECF8E" stroke-width="4" stroke-linecap="round"/>
+  <circle cx="70" cy="7" r="5" fill="#F6B437"/>
+  <circle cx="52" cy="66" r="8" fill="#fff"/>
+  <circle cx="53" cy="68" r="4" fill="#0A1330"/>
+  <circle cx="88" cy="66" r="8" fill="#fff"/>
+  <circle cx="89" cy="68" r="4" fill="#0A1330"/>
+  <path d="M58 90 Q70 100 82 90" stroke="#0A1330" stroke-width="3" stroke-linecap="round" fill="none"/>
+  <g><rect x="92" y="74" width="22" height="28" rx="2" fill="#fff" stroke="#0A1330" stroke-width="1.5"/><rect x="97" y="70" width="12" height="7" rx="1" fill="#0A1330"/><path d="M96 88 l4 4 7-8" stroke="#1D9E75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></g>
+</svg>