feat(a2ui-playground): add logo for playground (#2670)

<!--
  Thank you for submitting a pull request!

We appreciate the time and effort you have invested in making these
changes. Please ensure that you provide enough information to allow
others to review your pull request.

Upon submission, your pull request will be automatically assigned with
reviewers.

If you want to learn more about contributing to this project, please
visit:
https://github.com/lynx-family/lynx-stack/blob/main/CONTRIBUTING.md.
-->

<!-- The AI summary below will be auto-generated - feel free to replace
it with your own. -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added a themed logo to the app header with light and dark variants
based on current theme selection.

* **Style**
  * Added page favicon displayed in browser tabs.
  * Improved spacing and layout of the brand area header.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/lynx-family/lynx-stack/pull/2670?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

## Checklist

<!--- Check and mark with an "x" -->

- [ ] Tests updated (or not required).
- [ ] Documentation updated (or not required).
- [ ] Changeset added, and when a BREAKING CHANGE occurs, it needs to be
clearly marked (or not required).

Author: HuJean

packages/genui/a2ui-playground/rsbuild.config.ts

@@ -173,6 +173,17 @@ export default defineConfig({
   },
   html: {
     title: 'Lynx A2UI Playground',
+    tags: [
+      {
+        tag: 'link',
+        attrs: {
+          rel: 'icon',
+          type: 'image/svg+xml',
+          href:
+            'https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/lynx-website/assets/lynx-dark-logo.svg',
+        },
+      },
+    ],
   },
   output: {
     assetPrefix: process.env.ASSET_PREFIX,

packages/genui/a2ui-playground/src/App.tsx

@@ -19,6 +19,11 @@ import { PlaybackPage } from './pages/PlaybackPage.js';
 import type { Protocol, ProtocolName } from './utils/protocol.js';
 import { DEFAULT_PROTOCOL, getProtocol } from './utils/protocol.js';
 
+const LYNX_LIGHT_LOGO =
+  'https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/lynx-website/assets/lynx-dark-logo.svg';
+const LYNX_DARK_LOGO =
+  'https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/lynx-website/assets/lynx-light-logo.svg';
+
 type Tab = 'create' | 'examples' | 'components' | 'playback';
 
 interface TabDef {
@@ -191,7 +196,14 @@ export function App() {
   return (
     <div className='appShell'>
       <div className='topBar'>
-        <span className='brand'>Lynx GenUI Playground</span>
+        <div className='brandGroup'>
+          <img
+            className='brandLogo'
+            src={theme === 'dark' ? LYNX_DARK_LOGO : LYNX_LIGHT_LOGO}
+            alt='Lynx'
+          />
+          <span className='brand'>Lynx GenUI Playground</span>
+        </div>
 
         <nav className='tabNav'>
           {tabs.map((t) => (

packages/genui/a2ui-playground/src/styles.css

@@ -141,9 +141,18 @@ a {
 .brandGroup {
   display: flex;
   align-items: center;
+  gap: 10px;
   flex-shrink: 0;
 }
 
+.brandLogo {
+  width: 26px;
+  height: 26px;
+  display: block;
+  flex: 0 0 auto;
+  object-fit: contain;
+}
+
 .protocolSelect {
   height: 30px;
   padding: 0 28px 0 10px;