The Loyaly mark everywhere a person sees the product

Brand assets in brand/ (the 512px mark, sizes for each surface, a
multi-size .ico). Windows executables carry it as a compiled-in
resource (rsrc_windows_amd64.syso from go-winres) so Explorer, the
taskbar and the installer show it; installer/build.ps1 therefore uses a
plain go build rather than wails build, which would add a second copy
and fail the link. The tray icon is the mark with a state dot over its
corner - a plain coloured circle read as a generic status light among
other icons - rendered from the embedded PNG at 32px so it survives
150% scaling. The desktop app's login, setup and sidebar marks, the
head-office web app's mark and favicon, and the engine dashboard's
favicon are the same file.

Also found while packaging: no wheel so far shipped static/, so the
engine's own dashboard at :8010 on a Windows source install would have
failed with a missing file. package-data now includes it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KGcjxF1cNLcuwc3DAPcnfj

desktop/frontend/dist/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Behavision</title>
-    <script type="module" crossorigin src="./assets/index-Dxm9O68-.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-Bml5ogS2.css">
+    <script type="module" crossorigin src="./assets/index-MXXBc3qm.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-W0yLGths.css">
   </head>
   <body>
     <div id="root"></div>

desktop/frontend/src/App.jsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useState } from 'react'
 import { api, isDesktop, message } from './bridge.js'
 import { usePolled } from './hooks.js'
 import * as Icon from './ui/icons.jsx'
+import logo from './assets/loyaly-mark.png'
 import Login from './views/Login.jsx'
 import Setup from './views/Setup.jsx'
 import Live from './views/Live.jsx'
@@ -49,7 +50,7 @@ export default function App() {
     // error nobody will read.
     return (
       <div className="login"><div className="box">
-        <span className="mark"><Icon.Shield size={20} /></span>
+        <span className="mark"><img src={logo} alt="" /></span>
         <h1>Behavision</h1>
         <p className="lead">
           This is the Behavision window running outside the app, so it has no
@@ -80,7 +81,7 @@ export default function App() {
     <div className="shell">
       <aside className="side">
         <div className="brand">
-          <span className="mark"><Icon.Shield size={17} /></span>
+          <span className="mark"><img src={logo} alt="" /></span>
           <div className="id">
             <h1>Behavision</h1>
             <p>{session.site_name || session.user?.client_name || 'This shop'}</p>

desktop/frontend/src/styles.css

@@ -105,11 +105,8 @@ input, textarea { user-select: text; }
   display: flex; flex-direction: column; min-height: 0;
 }
 .side .brand { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) var(--sp-4); }
-.side .brand .mark {
-  width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center;
-  background: linear-gradient(160deg, var(--accent-2), var(--s2));
-  border: 1px solid #1B4C5A; color: var(--accent);
-}
+.side .brand .mark { width: 30px; height: 30px; flex: none; display: grid; place-items: center; }
+.side .brand .mark img, .login .mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
 .side .brand .id { min-width: 0; }
 .side .brand h1 { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -.012em; line-height: 1.2; }
 .side .brand p { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@@ -411,11 +408,7 @@ tbody tr[role="button"]:hover, tbody tr.clickable:hover { background: var(--s2);
   width: 100%; max-width: 396px; background: var(--s1); border: 1px solid var(--line);
   border-radius: var(--r-lg); padding: var(--sp-7); box-shadow: var(--shadow-lg);
 }
-.login .mark {
-  width: 38px; height: 38px; border-radius: 11px; margin-bottom: var(--sp-4);
-  display: grid; place-items: center; color: var(--accent);
-  background: linear-gradient(160deg, var(--accent-2), var(--s2)); border: 1px solid #1B4C5A;
-}
+.login .mark { width: 44px; height: 44px; margin-bottom: var(--sp-4); display: grid; place-items: center; }
 .login h1 { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -.022em; }
 .login .lead { margin: 6px 0 var(--sp-5); }
 .login .btn { width: 100%; justify-content: center; margin-top: var(--sp-1); }

desktop/frontend/src/views/Login.jsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { api, message } from '../bridge.js'
 import * as Icon from '../ui/icons.jsx'
+import logo from '../assets/loyaly-mark.png'
 
 // The gate. Nothing else in the app is reachable until this succeeds, because
 // the broker credentials and the customer database both live behind it.
@@ -25,7 +26,7 @@ export default function Login({ onDone }) {
   return (
     <div className="login">
       <div className="box">
-        <span className="mark"><Icon.Shield size={20} /></span>
+        <span className="mark"><img src={logo} alt="" /></span>
         <h1>Behavision</h1>
         <p className="lead">Sign in to connect this PC to your store.</p>
         <form onSubmit={submit}>

desktop/frontend/src/views/Setup.jsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { api, message } from '../bridge.js'
 import * as Icon from '../ui/icons.jsx'
+import logo from '../assets/loyaly-mark.png'
 
 // Linking this PC to a shop — the first thing that happens on a new install,
 // and until now the one thing the app could not do.
@@ -42,7 +43,7 @@ export default function Setup({ onDone, onCancel }) {
   return (
     <div className="login">
       <div className="box">
-        <span className="mark"><Icon.Link size={20} /></span>
+        <span className="mark"><img src={logo} alt="" /></span>
         <h1>{onCancel ? 'Link to head office' : 'Set up this PC'}</h1>
         <p className="lead">
           Type the installation code for this shop. You only do this once.