feat(site): redesign the homepage around the interactive demo

.github/workflows/test_website.yml

@@ -0,0 +1,49 @@
+name: test / website
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - 'site/www/**'
+      - 'site/tests/**'
+      - '.github/workflows/test_website.yml'
+      - 'package.json'
+      - 'package-lock.json'
+  pull_request:
+    branches: [main]
+    paths:
+      - 'site/www/**'
+      - 'site/tests/**'
+      - '.github/workflows/test_website.yml'
+      - 'package.json'
+      - 'package-lock.json'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  website:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    steps:
+      - uses: actions/checkout@v7
+      - uses: actions/setup-node@v7
+        with:
+          node-version: 22
+          cache: npm
+      - run: npm ci
+      - run: npx playwright install --with-deps chromium firefox webkit
+      - run: npx playwright test --config site/tests/playwright.config.ts
+      - uses: actions/upload-artifact@v7
+        if: ${{ !cancelled() }}
+        with:
+          name: website-browser-report
+          path: |
+            playwright-report/website
+            test-results
+          retention-days: 14

site/tests/playwright.config.ts

@@ -0,0 +1,32 @@
+import { defineConfig, devices } from '@playwright/test';
+import { resolve } from 'node:path';
+
+export default defineConfig({
+  testDir: '.',
+  testMatch: 'website.spec.ts',
+  fullyParallel: true,
+  retries: process.env.CI ? 1 : 0,
+  workers: process.env.CI ? 2 : undefined,
+  outputDir: resolve(__dirname, '../../test-results/website'),
+  reporter: [['list'], ['html', {
+    outputFolder: resolve(__dirname, '../../playwright-report/website'),
+    open: 'never',
+  }]],
+  use: {
+    baseURL: process.env.WEBSITE_URL || 'http://127.0.0.1:4186',
+    reducedMotion: 'reduce',
+    trace: 'retain-on-failure',
+    screenshot: 'only-on-failure',
+  },
+  webServer: process.env.WEBSITE_URL ? undefined : {
+    command: 'node site/tests/server.mjs',
+    cwd: resolve(__dirname, '../..'),
+    url: 'http://127.0.0.1:4186',
+    reuseExistingServer: false,
+  },
+  projects: [
+    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
+    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
+    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
+  ],
+});

site/tests/server.mjs

@@ -0,0 +1,25 @@
+import { createServer } from 'node:http';
+import { readFile } from 'node:fs/promises';
+
+// Serve only website assets used by the tests, never the checkout.
+const assets = new Map([
+  ['/', ['index.html', 'text/html; charset=utf-8']],
+  ['/site.css', ['site.css', 'text/css; charset=utf-8']],
+  ['/assets/inter-latin-variable.woff2', ['assets/inter-latin-variable.woff2', 'font/woff2']],
+  ['/askable-ui-code.mp4', ['askable-ui-code.mp4', 'video/mp4']],
+]);
+
+createServer(async (request, response) => {
+  const asset = assets.get(new URL(request.url, 'http://localhost').pathname);
+  if (!asset || !['GET', 'HEAD'].includes(request.method)) {
+    response.writeHead(404).end();
+    return;
+  }
+  try {
+    const body = await readFile(new URL(`../www/${asset[0]}`, import.meta.url));
+    response.writeHead(200, { 'content-type': asset[1], 'content-length': body.length });
+    response.end(request.method === 'HEAD' ? undefined : body);
+  } catch {
+    response.writeHead(500).end();
+  }
+}).listen(4186, '127.0.0.1');

site/tests/website.spec.ts

@@ -0,0 +1,192 @@
+import { test, expect, type Page } from '@playwright/test';
+
+async function settleRendering(page: Page) {
+  await page.evaluate(async () => {
+    await document.fonts.ready;
+    // Let font metrics and inherited colors reach the compositor after a resize or reload.
+    await new Promise<void>(resolve => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
+  });
+}
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+  await settleRendering(page);
+});
+
+for (const width of [320, 390, 768, 1280, 1440]) {
+  test(`layout fits ${width}px and keeps the first action visible`, async ({ page }) => {
+    await page.setViewportSize({ width, height: width < 768 ? 844 : 720 });
+    await settleRendering(page);
+    await expect(page.locator('#kpi-grid .kpi-card')).toHaveCount(4);
+    await expect(page.locator('#install-copy')).toBeInViewport();
+    await expect(page.getByRole('heading', { name: 'Analytics workspace' })).toBeInViewport();
+    await expect(page.locator('.developer-panel')).not.toHaveAttribute('open');
+    await expect(page.locator('video')).not.toHaveAttribute('autoplay');
+    await expect.poll(() => page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(width);
+    await page.screenshot({ path: test.info().outputPath(`homepage-${width}.png`) });
+    await page.getByText('Developer view', { exact: true }).click();
+    await expect(page.getByRole('button', { name: 'JSON', exact: true })).toBeVisible();
+    await expect.poll(() => page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(width);
+    await page.evaluate(() => window.scrollTo(0, 0));
+    await page.screenshot({ path: test.info().outputPath(`website-${width}.png`), fullPage: true });
+  });
+}
+
+test('mobile menu supports keyboard, Escape, anchor navigation and outside clicks', async ({ page }) => {
+  await page.setViewportSize({ width: 390, height: 844 });
+  const menu = page.locator('#nav-menu');
+  const summary = menu.locator('summary');
+  await summary.focus();
+  await page.keyboard.press('Enter');
+  await expect(menu).toHaveAttribute('open');
+  await expect(menu.getByRole('link', { name: 'Docs', exact: true })).toBeVisible();
+  await page.keyboard.press('Escape');
+  await expect(menu).not.toHaveAttribute('open');
+  await expect(summary).toBeFocused();
+  await summary.click();
+  await menu.getByRole('link', { name: 'MCP', exact: true }).click();
+  await expect(page).toHaveURL(/#mcp$/);
+  await expect(menu).not.toHaveAttribute('open');
+  await summary.click();
+  await page.getByRole('heading', { name: 'Connect the assistant you already use.' }).click();
+  await expect(menu).not.toHaveAttribute('open');
+  await summary.click();
+  await page.setViewportSize({ width: 1280, height: 720 });
+  await expect(menu).not.toHaveAttribute('open');
+});
+
+test('selected context can be reviewed, formatted, sent and removed', async ({ page }) => {
+  await page.locator('.kpi-card').first().click();
+  await page.getByText('Review context', { exact: true }).click();
+  await expect(page.locator('#context-chip')).toContainText('$128,400');
+  await expect(page.locator('#context-chip')).not.toContainText('Ask AI');
+  await page.getByText('Developer view', { exact: true }).click();
+  await page.getByRole('button', { name: 'JSON', exact: true }).click();
+  await expect(page.getByRole('button', { name: 'JSON', exact: true })).toHaveAttribute('aria-pressed', 'true');
+  await expect(page.getByRole('button', { name: 'Natural', exact: true })).toHaveAttribute('aria-pressed', 'false');
+  await expect(page.locator('#code-ctx')).toContainText('"widget": "revenue"');
+  await page.getByRole('button', { name: 'Meta only', exact: true }).click();
+  await expect(page.getByRole('button', { name: 'Meta only', exact: true })).toHaveAttribute('aria-pressed', 'true');
+  await expect(page.getByRole('button', { name: 'Text + meta', exact: true })).toHaveAttribute('aria-pressed', 'false');
+  expect(JSON.parse(await page.locator('#code-ctx').innerText())).not.toHaveProperty('text');
+  await page.getByLabel('Question about selected context').fill('Why is revenue growing?');
+  await page.getByRole('button', { name: 'Send question', exact: true }).click();
+  await expect(page.getByRole('log', { name: 'Demo conversation' })).toContainText('MRR grew 12.4%');
+  await page.getByRole('button', { name: 'Remove selected context', exact: true }).click();
+  await expect(page.locator('#chat-context-bar')).toBeHidden();
+  await expect(page.locator('#chat-input')).toBeEmpty();
+});
+
+for (const shape of ['region', 'square', 'circle', 'lasso']) {
+  test(`${shape} captures content and keeps the mode selected`, async ({ page }) => {
+    const tool = page.locator(`[data-tool="${shape}"]`);
+    await tool.click();
+    await expect(tool).toHaveAttribute('aria-pressed', 'true');
+    await page.locator('.kpi-card').first().scrollIntoViewIfNeeded();
+    const box = await page.locator('.kpi-card').first().boundingBox();
+    if (!box) throw new Error('Missing KPI bounds');
+    const x = box.x + 8, y = box.y + 8;
+    await page.mouse.move(x, y);
+    await page.mouse.down();
+    if (shape === 'lasso') {
+      await page.mouse.move(x + box.width - 16, y, { steps: 6 });
+      await page.mouse.move(x + box.width - 16, y + box.height - 16, { steps: 6 });
+      await page.mouse.move(x, y + box.height - 16, { steps: 6 });
+      await page.mouse.move(x, y, { steps: 6 });
+    } else {
+      await page.mouse.move(x + box.width - 16, y + box.height - 16, { steps: 10 });
+    }
+    await page.mouse.up();
+    await expect(page.locator('#selected-region-preview')).toContainText('Monthly Recurring Revenue');
+    await expect(page.locator('#context-chip')).toContainText('$128,400');
+    await expect(page.locator('#context-chip')).not.toContainText('Ask AI');
+    await expect(tool).toHaveAttribute('aria-pressed', 'true');
+    await page.getByRole('button', { name: 'Cancel', exact: true }).click();
+    await expect(page.locator('[data-mode="click"]')).toHaveAttribute('aria-pressed', 'true');
+  });
+}
+
+test('text mode ignores plain clicks and retains captured text', async ({ page }) => {
+  await page.locator('#send-selection').click();
+  await page.locator('.kpi-card').first().click();
+  await expect(page.locator('#chat-context-bar')).toBeHidden();
+  await page.locator('.kpi-label').first().evaluate(element => {
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    const selection = window.getSelection();
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+    element.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }));
+  });
+  await expect(page.locator('#selected-text-preview')).toHaveText(/^Monthly Revenue$/i);
+  await page.getByLabel('Question about selected context').focus();
+  await expect(page.locator('.text-capture-mark').first()).toBeVisible();
+});
+
+test('homepage and selected context screenshots use the website font', async ({ page }) => {
+  await page.setViewportSize({ width: 1440, height: 1100 });
+  await page.reload();
+  await settleRendering(page);
+  await expect.poll(() => page.evaluate(() => document.fonts.check('400 16px Inter'))).toBe(true);
+  await page.screenshot({ path: test.info().outputPath('homepage-desktop.png') });
+  await page.locator('.kpi-card').first().click();
+  await page.getByText('Review context', { exact: true }).click();
+  await page.evaluate(() => window.scrollTo(0, 0));
+  await page.screenshot({ path: test.info().outputPath('homepage-context.png') });
+  await page.setViewportSize({ width: 390, height: 844 });
+  await page.reload();
+  await settleRendering(page);
+  await page.screenshot({ path: test.info().outputPath('homepage-mobile.png') });
+});
+
+test('integration tabs support mouse and keyboard navigation', async ({ page }) => {
+  const tabs = page.getByRole('tablist', { name: 'Integration steps' });
+  await tabs.getByRole('tab', { name: 'Observe', exact: true }).click();
+  await expect(page.getByRole('tabpanel')).toContainText('createAskableContext');
+  await page.getByRole('tab', { name: 'Observe', exact: true }).press('ArrowRight');
+  await expect(page.getByRole('tab', { name: 'Send', exact: true })).toBeFocused();
+  await expect(page.getByRole('tabpanel')).toContainText('toAgentRequest');
+  await page.getByRole('tab', { name: 'Send', exact: true }).press('Home');
+  await expect(page.getByRole('tab', { name: 'Annotate', exact: true })).toHaveAttribute('aria-selected', 'true');
+  await expect(page.getByRole('tabpanel')).toContainText('data-askable');
+});
+
+test('font is local and inline icons retain accessible colors', async ({ page }) => {
+  await expect.poll(() => page.evaluate(() => document.fonts.check('400 16px Inter'))).toBe(true);
+  await expect(page.locator('.pattern-option .icon')).toHaveCount(8);
+  await expect(page.locator('.icon use')).toHaveCount(0);
+  expect(await page.locator('.pattern-option .icon path').count()).toBeGreaterThan(0);
+  await expect(page.locator('#chat-send .icon')).toHaveCSS('stroke', 'rgb(255, 255, 255)');
+  await expect(page.locator('[data-mode="click"]')).toHaveCSS('color', 'rgb(102, 80, 204)');
+  await expect(page.locator('link[href*="fonts.googleapis.com"]')).toHaveCount(0);
+});
+
+test('selection mode controls do not resize the workspace', async ({ page }) => {
+  for (const width of [390, 1280]) {
+    await page.setViewportSize({ width, height: 900 });
+    await settleRendering(page);
+    const before = await page.locator('.demo-controls').boundingBox();
+    await page.locator('[data-tool="lasso"]').click();
+    const after = await page.locator('.demo-controls').boundingBox();
+    if (!before || !after) throw new Error('Missing toolbar bounds');
+    // Firefox can round bounding boxes differently after the automatic scroll.
+    expect(after.height).toBeCloseTo(before.height, 2);
+    await expect(page.locator('#cancel-tool')).toBeVisible();
+    await expect(page.locator('.workspace-meta')).toBeHidden();
+    await settleRendering(page);
+    await page.screenshot({ path: test.info().outputPath(`lasso-controls-${width}.png`) });
+    await page.locator('#cancel-tool').click();
+    await expect(page.locator('.workspace-meta')).toBeVisible();
+  }
+});
+
+test('current capabilities and release boundaries are explicit', async ({ page }) => {
+  await expect(page.getByRole('link', { name: 'Explore Bridge' })).toHaveAttribute('href', /guide\/bridge$/);
+  await expect(page.locator('.release-note')).toContainText('not yet released to npm');
+  await expect(page.locator('main')).not.toContainText('v0.15.0');
+  const duplicateIds = await page.locator('[id]').evaluateAll(elements => {
+    const ids = elements.map(element => element.id);
+    return ids.filter((id, index) => ids.indexOf(id) !== index);
+  });
+  expect(duplicateIds).toEqual([]);
+});

site/www/assets/INTER-LICENSE.txt

@@ -0,0 +1,93 @@
+Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter) Inter-Italic[opsz,wght].ttf: Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.