Changeset 0.37.5 (#217)

Co-authored-by: gobha <jasafpro@gmail.com>
Co-committed-by: gobha <jasafpro@gmail.com>

src/js/sw/surfaces/login/hero.js

@@ -0,0 +1,55 @@
+/**
+ * Hero — left panel with branding, feature pills, version
+ *
+ * Props:
+ *   base    — base path for assets (string)
+ *   version — app version (string)
+ *   env     — environment label or null
+ */
+const { html } = window;
+
+const PILLS = [
+    { icon: '\u{1F916}', label: 'Multi-Provider AI',    cls: 'ac' },
+    { icon: '\u{1F511}', label: 'Bring Your Own Key',   cls: 'pu' },
+    { icon: '\u{1F465}', label: 'Teams & Projects',     cls: 'ac' },
+    { icon: '\u{1F9E9}', label: 'Extensions',           cls: 'pu' },
+    { icon: '\u{1F50D}', label: 'Web Search Tools',     cls: 'ac' },
+    { icon: '\u{1F4DD}', label: 'Notes & Memory',       cls: 'pu' },
+];
+
+export function Hero({ base = '', version = '', env = null }) {
+    return html`
+        <div class="login-hero">
+            <div class="login-hero-grid"></div>
+            <div class="login-hero-orb"></div>
+            <div class="login-hero-content">
+                <div class="login-hero-brand login-anim login-anim-1">
+                    <img class="login-hero-brand-icon"
+                         src="${base}/favicon.svg?v=${version}"
+                         alt="Chat Switchboard" />
+                    <span class="login-hero-brand-text">
+                        Chat <span class="hl">Switchboard</span>
+                    </span>
+                </div>
+                <h1 class="login-anim login-anim-2">
+                    Your AI conversations,${html`<br />`}your infrastructure
+                </h1>
+                <p class="login-hero-sub login-anim login-anim-3">
+                    Self-hosted multi-provider chat with team collaboration,
+                    BYOK privacy, and an extensible plugin system.
+                </p>
+                <div class="login-hero-pills login-anim login-anim-4">
+                    ${PILLS.map(p => html`
+                        <span class="login-hero-pill ${p.cls}">
+                            <span class="login-hero-pill-icon">${p.icon}</span>
+                            ${' '}${p.label}
+                        </span>
+                    `)}
+                </div>
+                <p class="login-hero-version login-anim login-anim-5">
+                    v${version}${env ? html` \u00B7 ${env}` : ''}
+                </p>
+            </div>
+        </div>
+    `;
+}