feat(app-onboard): brand the rail and name every chip on hover

Swaps the icon set for the one the app ships. This app was scaffolded from
the neo onboarding and inherited its blue mark, so the rail was showing the
wrong product.

Retitles the rail to state what BrowserOS is rather than who it is for.

Adds a tooltip to every provider and agent chip. The row is a wall of brand
marks and several are only recognisable to people who already use them, so
the name now surfaces on hover instead of only in the accessible name.

Hermes ships as an icon/ resource rather than a monogram. Its mark is a
full-bleed illustration, so it is referenced by runtime path and registered
in the onboarding resource target; importing it would let Vite rewrite it
into an asset the Chromium build rejects.

Author: DaniAkash

packages/browseros-agent/apps/app-onboard/public/icon/128.png

@@ -13,6 +13,7 @@ const iconResourceFiles = [
   'icon/96.png',
   'icon/128.png',
   'icon/keychain-prompt.png',
+  'icon/hermes.png',
 ]
 const allowedFiles = new Set([...textResourceFiles, ...iconResourceFiles])
 const fontAssetPattern = /\.(?:woff2?|ttf|otf)$/i

packages/browseros-agent/apps/app-onboard/public/icon/16.png

@@ -0,0 +1,64 @@
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

packages/browseros-agent/apps/app-onboard/public/icon/32.png

@@ -1,16 +1,36 @@
 /**
  * Marks for agents that @lobehub/icons does not carry.
  *
- * These are inline single-colour SVGs rather than imported image files: the
- * Chromium build emits exactly app.js, app.css and the icon/ directory listed
- * in that target's BUILD.gn, so any Vite-processed asset either throws during
- * the build or trips the data: URL guard in verify-chromium-build.
+ * Vector marks are inlined rather than imported: the Chromium build emits only
+ * app.js, app.css and the icon/ files listed in that target's BUILD.gn, so a
+ * Vite-processed asset either throws during the build or trips the data: URL
+ * guard in verify-chromium-build. Raster marks are referenced by their runtime
+ * path under public/icon instead, which Vite copies through untouched.
  */
 
 interface MarkProps {
   size?: number
 }
 
+/**
+ * Hermes. Raster mark, so it ships as an icon/ resource rather than a path.
+ *
+ * Sized a little larger than the vector marks and rounded: it is a full-bleed
+ * illustration rather than a glyph, so at glyph size it reads as a framed
+ * thumbnail sitting inside the chip instead of as the chip's own icon.
+ */
+export function Hermes({ size = 24 }: MarkProps) {
+  return (
+    <img
+      src="/icon/hermes.png"
+      alt=""
+      width={Math.round(size * 1.3)}
+      height={Math.round(size * 1.3)}
+      className="rounded-[7px] object-contain"
+    />
+  )
+}
+
 /**
  * OpenClaw. Silhouette of the mark the app ships, flattened to one colour.
  *

packages/browseros-agent/apps/app-onboard/public/icon/48.png

@@ -10,6 +10,8 @@ describe('VisualRail', () => {
     // import would emit a new hashed asset and fail verify-chromium-build.ts.
     expect(html).toContain('src="/icon/128.png"')
     expect(html).toContain('BrowserOS')
+    expect(html).toContain('agentic browser')
+    expect(html).toContain('automate any web task')
     expect(html).toContain('Bring your browser')
     expect(html).toContain('Local-first. Private.')
   })