Guard interface icon ownership and exercise both native tab layouts

Author: emir-karabeg

apps/sim/platform/AGENTS.md

@@ -22,7 +22,7 @@ Keep routes thin. Colocate each feature component, its CSS Module and private he
 
 Use `design-system/styles/rhythm.css` for the common 2px title/detail gap, 8px row inset and gap, 6px block inset, 16px interface icon and shared button radius. Align leading artwork to the first text line. Keep dividers outside row hovers with breathing room. Align the **ink** of actions with adjacent text, extending their hit areas into the margin. Only composer actions use circular button chrome. Custom calendar, chart and summary rows still use the same typography, geometry and tooltip as reusable controls.
 
-Interface strokes have one optical weight in CSS pixels and use semantic icon ink; branded artwork and chart marks retain their own geometry. Quiet controls gain the hover surface without changing ink. A selectable menu row gains the same surface and promotes its glyph from secondary to primary ink on hover or active keyboard navigation. Selection, disabled and inverse controls have distinct semantics. Never change stroke thickness, spacing or radius on hover. DOM focus alone adds no paint.
+Interface strokes have one optical weight in CSS pixels and use semantic icon ink; branded artwork and chart marks retain their own geometry. Quiet controls gain the hover surface without changing ink. A selectable menu row gains the same surface and promotes its glyph from secondary to primary ink on hover or active keyboard navigation. Selection, disabled and inverse controls have distinct semantics. Never change stroke thickness, spacing or radius on hover. Render interface glyphs through `Icon`. A unique data graphic may own accessible, labeled SVG and paint its own marks. DOM focus alone adds no paint.
 
 ## Public API
 

apps/sim/platform/checks/desktop/renderer.spec.ts

@@ -13,15 +13,19 @@ test('the actual desktop renderer shares product routes, reserves native chrome
     env: { ...process.env, SIM_DESKTOP_ORIGIN: origin, SIM_DESKTOP_USER_DATA: profile },
   })
   const page = await app.firstWindow()
+  const window = await app.browserWindow(page)
   try {
+    await window.evaluate((native) => native.setContentSize(960, 720))
     await page.waitForURL((url) => url.origin === origin)
     await page.goto(`${origin}/chat/weekly-review?theme=dark&state=full`)
     await expect(page.locator('html')).toHaveAttribute('data-sim-desktop-title-bar', 'inset')
-    await expect(page.getByRole('button', { name: 'Open chat panel' })).toBeVisible()
-    await page.getByRole('button', { name: 'Open chat panel' }).click()
+    await page.getByRole('button', { name: 'Open chat panel' }).press('Enter')
     const panel = page.getByRole('complementary', { name: 'Chat panel' })
+    await expect(panel.getByRole('button', { name: 'New panel tab' })).toBeFocused()
     await panel.getByRole('button', { name: 'Terminal Run commands in this session' }).click()
-    await expect(panel.getByRole('tab', { selected: true })).toHaveAccessibleName('Terminal')
+    await panel.getByRole('button', { name: 'Panel tabs' }).click()
+    await expect(page.getByRole('menuitemcheckbox', { name: 'Terminal' })).toBeChecked()
+    await page.keyboard.press('Escape')
     await expect(panel.getByRole('region', { name: 'Terminal history' })).toContainText(
       'customer-operations'
     )
@@ -39,6 +43,7 @@ test('the actual desktop renderer shares product routes, reserves native chrome
     ).toBeCloseTo(1.25, 1)
     await page.screenshot({ path: testInfo.outputPath('desktop-chat.png') })
     await page.getByRole('button', { name: 'Collapse sidebar' }).click()
+    await expect(panel.getByRole('tab', { selected: true })).toHaveAccessibleName('Linear')
     await panel.getByRole('button', { name: 'Expand panel' }).click()
     const navigation = await page.getByRole('button', { name: 'Expand sidebar' }).boundingBox()
     const firstTab = panel.getByRole('tab', { name: 'Terminal' })
@@ -48,11 +53,7 @@ test('the actual desktop renderer shares product routes, reserves native chrome
     await firstTab.click()
     await expect(panel.getByRole('region', { name: 'Terminal history' })).toBeVisible()
     await panel.getByRole('button', { name: 'Restore split panel' }).click()
-    await app.evaluate(({ BrowserWindow }) =>
-      BrowserWindow.getAllWindows()
-        .find((w) => w.isVisible())
-        ?.setFullScreen(true)
-    )
+    await window.evaluate((native) => native.setFullScreen(true))
     await expect(page.locator('html')).toHaveAttribute('data-sim-desktop-title-bar', 'fullscreen')
     await panel.getByRole('tab', { name: 'Terminal' }).click()
     await expect(panel.getByRole('region', { name: 'Terminal history' })).toBeVisible()

scripts/check-platform-design.test.ts

@@ -219,6 +219,11 @@ it('rejects design drift across real JSX, CSS and Paper ownership boundaries', (
       'export const Banner = () => <p>Email delivery is disabled in this preview.</p>'
     )
     const feature = 'platform/app/settings/_components'
+    write(
+      `${feature}/icon.tsx`,
+      'export const Glyph = () => <svg aria-hidden="true"><path d="M0 0h8" /></svg>'
+    )
+    write(`${feature}/ink.module.css`, '.row svg path { stroke: currentColor; }')
     write(
       `${feature}/trigger.tsx`,
       `import styles from '@/platform/design-system/components/button/button.module.css'; export const Trigger = () => <button className={styles.button}/>`
@@ -292,6 +297,8 @@ it('rejects design drift across real JSX, CSS and Paper ownership boundaries', (
     expect(result.output).toContain(
       'platform/design-system/components/menu/chrome.ts [private-recipe]'
     )
+    expect(result.output).toContain(`${feature}/icon.tsx:1 [icon-owner]`)
+    expect(result.output).toContain(`${feature}/ink.module.css:1 [icon-owner]`)
     for (const issue of [
       'legacy-import',
       'consumer-style',

scripts/check-platform-design.ts

@@ -325,7 +325,20 @@ function checkCss(file: string, sheet: postcss.Root) {
       }
     })
   }
-  sheet.walkDecls(({ prop, value, source }) => {
+  sheet.walkDecls((declaration) => {
+    const { prop, value, source, parent } = declaration
+    if (
+      privateRoute(file) &&
+      /^(?:stroke(?:-width)?|fill)$/.test(prop) &&
+      parent?.type === 'rule' &&
+      parent.selectors.some((selector) => /\bsvg\s|\[data-interface-icon\]/.test(selector))
+    ) {
+      report(
+        'icon-owner',
+        `${file}:${source?.start?.line ?? 1}`,
+        'Use the shared glyph ink and stroke; put chart paint on its own marks'
+      )
+    }
     if (prop === 'composes') {
       const from = value.match(/\bfrom\s+['"]([^'"]+)['"]/u)?.[1]
       if (from) checkImport(file, from)
@@ -508,6 +521,23 @@ function checkJs(file: string, content: string) {
       report('prop-spread', location(node), 'Pass named props explicitly')
     if (inPlatform && (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node))) {
       const tag = node.tagName.getText(sf)
+      if (
+        tag === 'svg' &&
+        file !== `${system}components/icon/icon.tsx` &&
+        !file.startsWith(catalog) &&
+        !preview &&
+        !node.attributes.properties.some(
+          (attr) =>
+            ts.isJsxAttribute(attr) &&
+            ['aria-label', 'aria-labelledby'].includes(attr.name.getText(sf))
+        )
+      ) {
+        report(
+          'icon-owner',
+          location(node),
+          'Use Icon for interface glyphs; give an original data graphic an accessible name'
+        )
+      }
       if (tag === 'select')
         report('native-picker', location(node), 'Use the shared Platform value picker')
       const native = /^[a-z][\w-]*$/.test(tag) || (owner && primitives.has(tag.split('.')[0]))