From ce44c2300f79785c94bfe6607f4dfe76a6e97bb2 Mon Sep 17 00:00:00 2001 From: Sam Hatoum Date: Tue, 20 Oct 2026 08:48:36 -0700 Subject: [PATCH] fix(api): the runtime's page and icon show the Auto mark with its color bands, beside its name The page and its icon drew the old black and white mark. They now draw the mark on.auto and Auto Studio use, its four color bands behind the tile, and the page sets the name Auto beside it as the site's header does. Co-Authored-By: Claude Opus 5.5 --- packages/api/src/landing/auto-logo.ts | 15 ++++++-- packages/api/src/landing/landing-page.test.ts | 34 +++++++++++++++++++ packages/api/src/landing/landing-page.ts | 8 ++--- packages/api/src/landing/page-style.ts | 11 +++++- 4 files changed, 60 insertions(+), 8 deletions(-) diff --git a/packages/api/src/landing/auto-logo.ts b/packages/api/src/landing/auto-logo.ts index c34c00c3b..5f1aec619 100644 --- a/packages/api/src/landing/auto-logo.ts +++ b/packages/api/src/landing/auto-logo.ts @@ -1,3 +1,10 @@ +const bands: readonly (readonly [shape: string, color: string])[] = [ + ['M693.161 -427.743L-623.632 1532.31L-591.107 1552.06L725.686 -407.988L693.161 -427.743Z', '#EC3F4A'], + ['M745.281 -396.071L-571.511 1563.98L-538.986 1583.73L777.807 -376.315L745.281 -396.071Z', '#FF8A1D'], + ['M797.394 -364.425L-519.399 1595.62L-486.874 1615.38L829.919 -344.67L797.394 -364.425Z', '#5EC72D'], + ['M849.467 -332.791L-467.326 1627.26L-434.801 1647.01L881.992 -313.035L849.467 -332.791Z', '#42C3F7'], +]; + const tile = 'M512.644 100H121.718C109.652 100 100 109.667 100 121.751V513.277C100 525.361 109.652 535.028 121.718 535.028H512.644C524.71 535.028 534.362 525.361 534.362 513.277V121.751C534.362 109.667 524.71 100 512.644 100Z'; @@ -8,12 +15,14 @@ const glyphs = [ 'M153.33 286.339C152.848 287.306 153.33 288.272 154.537 288.272H286.776C287.742 288.272 288.465 287.306 287.983 286.339L221.863 154.139C221.381 153.172 219.933 153.172 219.45 154.139L153.33 286.339Z', ]; +const coloredBands = bands.map(([band, color]) => ``).join(''); + function filled(shapes: readonly string[], fill: string): string { return shapes.map((shape) => ``).join(''); } function iconOf(ink: string, paper: string): string { - const icon = `${filled([tile], ink)}${filled(glyphs, paper)}`; + const icon = `${coloredBands}${filled([tile], ink)}${filled(glyphs, paper)}`; return `data:image/svg+xml;base64,${Buffer.from(icon).toString('base64')}`; } @@ -21,6 +30,6 @@ export const iconOnLight = iconOf('#1A1A1A', '#FFFFFF'); export const iconOnDark = iconOf('#FFFFFF', '#1A1A1A'); -export const mark = ``; + .join('')}Auto`; diff --git a/packages/api/src/landing/landing-page.test.ts b/packages/api/src/landing/landing-page.test.ts index adb6268bd..6bab1516a 100644 --- a/packages/api/src/landing/landing-page.test.ts +++ b/packages/api/src/landing/landing-page.test.ts @@ -83,6 +83,13 @@ function tileOf(icon: string): string | undefined { return / color); +} + describe('the icon of the page at the root of the server', () => { it('is the Auto mark, dark on a light browser and light on a dark one', async () => { const page = await (await open(createTestHandler().handler)).text(); @@ -102,6 +109,33 @@ describe('the icon of the page at the root of the server', () => { expect(iconFor(page, 'dark')).toBe(swapped); }); + + it('draws the four color bands of the Auto mark behind the tile, in both', async () => { + const page = await (await open(createTestHandler().handler)).text(); + + expect({ + onLight: colorsBehindTheTileOf(iconFor(page, 'light')), + onDark: colorsBehindTheTileOf(iconFor(page, 'dark')), + }).toEqual({ onLight: colorBands, onDark: colorBands }); + }); +}); + +function brandOf(page: string): string { + return /.*?<\/span><\/span>/su.exec(page)?.[0] ?? ''; +} + +describe('the brand at the head of the page at the root of the server', () => { + it('is the Auto mark, with its four color bands behind the tile', async () => { + const page = await (await open(createTestHandler().handler)).text(); + + expect(colorsBehindTheTileOf(brandOf(page))).toEqual(colorBands); + }); + + it('names Auto beside the mark', async () => { + const page = await (await open(createTestHandler().handler)).text(); + + expect(brandOf(page)).toMatch(/<\/svg>Auto<\/span><\/span>$/u); + }); }); function fontsOf(page: string): readonly string[] { diff --git a/packages/api/src/landing/landing-page.ts b/packages/api/src/landing/landing-page.ts index 000070ade..cc135f503 100644 --- a/packages/api/src/landing/landing-page.ts +++ b/packages/api/src/landing/landing-page.ts @@ -3,7 +3,7 @@ import type { Context, MiddlewareHandler } from 'hono'; import { html, raw } from 'hono/html'; import type { ApiEnv } from '../api-env.ts'; -import { mark } from './auto-logo.ts'; +import { brand } from './auto-logo.ts'; import { controlPageHeaders, headOf, readOnlyPageHeaders } from './page-style.ts'; import { act, @@ -56,7 +56,7 @@ function pageOf(studioLink: string, server: Readonly, status: RuntimeStatus
- ${raw(mark)} + ${raw(brand)}

Auto Runtime is running

Create and manage your playbooks in the studio.

${server.host} @@ -74,7 +74,7 @@ const restartingPage = html`
- ${raw(mark)} + ${raw(brand)}

Auto Runtime is restarting

This page opens again once it is back.

@@ -88,7 +88,7 @@ const stoppedPage = html`
- ${raw(mark)} + ${raw(brand)}

Auto Runtime has stopped

Your agent starts it again when it next needs it. To start it yourself, run npx @on.auto/runtime.

diff --git a/packages/api/src/landing/page-style.ts b/packages/api/src/landing/page-style.ts index 92a937aef..0dae84b5c 100644 --- a/packages/api/src/landing/page-style.ts +++ b/packages/api/src/landing/page-style.ts @@ -43,7 +43,16 @@ main { border-radius: 20px; text-align: center; } -.logo { width: 52px; height: 52px; } +.brand { + display: inline-flex; + align-items: center; + gap: 0.5em; + font-size: 36px; + font-weight: 600; + letter-spacing: -0.02em; + line-height: 1; +} +.logo { width: 1.5em; height: 1.5em; } .logo .tile { fill: var(--ink); } .logo .glyph { fill: var(--paper); } h1 {