spb/agent-os

1import { useId } from 'react';2import { BRAND } from '@/lib/brand';34/**5 * Brand mark: rounded square with the amber → orange gradient (--color-brand-1/2/3) and a white6 * orchestration glyph — one node delegating to three. Same drawing as public/icons/icon.svg.7 */8export function Logo({ className }: { className?: string }) {9  const id = useId();10  return (11    <svg viewBox="0 0 512 512" className={className} role="img" aria-label={BRAND.product}>12      <defs>13        <linearGradient id={id} x1="48" y1="32" x2="480" y2="496" gradientUnits="userSpaceOnUse">14          <stop offset="0" style={{ stopColor: 'var(--color-brand-1)' }} />15          <stop offset="0.55" style={{ stopColor: 'var(--color-brand-2)' }} />16          <stop offset="1" style={{ stopColor: 'var(--color-brand-3)' }} />17        </linearGradient>18      </defs>19      <rect width="512" height="512" rx="116" fill={`url(#${id})`} />20      <g fill="none" stroke="#fff" strokeWidth="26" strokeLinecap="round">21        <path d="M146 256C236 256 226 138 352 138" />22        <path d="M146 256H352" />23        <path d="M146 256C236 256 226 374 352 374" />24      </g>25      <circle cx="146" cy="256" r="46" fill="#fff" />26      <circle cx="362" cy="138" r="31" fill="#fff" />27      <circle cx="362" cy="256" r="31" fill="#fff" />28      <circle cx="362" cy="374" r="31" fill="#fff" />29    </svg>30  );31}32