fix(platform): keep drafts and interface edits across navigation

Author: emir-karabeg

apps/sim/platform/AGENTS.md

@@ -29,6 +29,7 @@ Search Shared → Platform → Product before adding anything. Use the stable Pa
 
 ## Product UI and desktop
 
+- Keep a draft or interface edit in memory for the lifetime its user expects. A chat draft belongs to its chat; profile edits and inbox read marks belong to the product session. Navigating away and back must preserve them. A new fixture scenario starts a fresh session. Popups and cancelled edits stay local to the control.
 - The same product entry under `app/(shell)/` serves the web browser and the existing `apps/desktop` Electron shell. Feature-detect `window.simDesktop` in the typed desktop adapter only. Consult the shared `@sim/desktop-bridge` contract and native titlebar observer. Electron owns real window controls and privileged operations. Reserve their inset only in a native window; keep interactive areas outside drag regions. Do not draw traffic lights, mock the bridge in product code, or fork pages by viewport or user agent.
 - On every shell or panel change, test the real Electron window as well as web, keyboard, narrow and intermediate layouts. Exercise inset/fullscreen, sidebar expand/collapse, panel takeover, tabs and focus return. Browser-only views must remain usable without the preload. Native capability integration remains Phase 3.
 - Keep unique content in its feature owner. A calendar event, attention row or two-line workspace summary can have its own anatomy. Reuse semantic ink, type, icon size, first-line alignment, row insets and spacing. Its overflow trigger still uses EMCN's icon button/menu; do not extract a generic row on resemblance alone. When a second feature needs the same semantic recipe, promote the original implementation and migrate both consumers.

apps/sim/platform/README.md

@@ -23,7 +23,6 @@ Start the Platform above, then launch the existing desktop shell using a disposa
 SIM_DESKTOP_ORIGIN=http://127.0.0.1:3100 SIM_DESKTOP_USER_DATA="$(mktemp -d)" bun run --cwd apps/desktop dev
 ```
 
-
 ## Using EMCN
 
 Select a theme once with `PlatformSurface`. Editors, menus, selections, links and dialogs own their keyboard behavior. `MetricGroup` and `DataTable` accept records of any length. Import controls and compositions from `@/platform/design-system/components`. Provide content and named states, never styles. For a structural master such as an Issue group, supply its Paper key and named slots. The key determines the allowed slot names and the compiler enforces missing slots. A nested button slot accepts the semantic button, not an image of it. The Paper catalog in the workbench resolves the actual example.

apps/sim/platform/app/(shell)/_components/product-frame.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react'
 import { ProductSurface } from '@/platform/design-system/components/product-surface'
 import { PlatformShell } from '@/platform/design-system/features/shell/platform-shell'
 import type { ShellData } from '@/platform/design-system/models/shell'
+import { readAppearance } from '@/platform/design-system/navigation'
 import type { Scenario } from '@/platform/fixtures'
 
 type ProductQuery = Record<string, string | string[] | undefined>
@@ -25,9 +26,8 @@ export function ProductFrame({
   navigation,
   desktopTitle,
 }: ProductFrameProps) {
-  const appearance = query.theme === 'light' || query.theme === 'dark' ? query.theme : 'system'
   return (
-    <ProductSurface preference={appearance}>
+    <ProductSurface preference={readAppearance(query.theme)}>
       <PlatformShell data={shell} desktopTitle={desktopTitle} navigation={navigation}>
         {children}
       </PlatformShell>

apps/sim/platform/app/(shell)/_components/product-session.tsx

@@ -4,7 +4,9 @@ import type { ReactNode } from 'react'
 import { useSearchParams } from 'next/navigation'
 import { InterfacePreferences } from '@/platform/design-system/components'
 import { ChatChangesProvider } from '@/platform/design-system/components/chat-changes'
+import { ComposerDrafts } from '@/platform/design-system/components/composer-drafts'
 import { DesktopHost } from '@/platform/design-system/components/desktop-host'
+import { NotificationSession } from '@/platform/design-system/components/notification-tray'
 import { SidebarLayout } from '@/platform/design-system/components/sidebar-layout'
 
 interface ProductSessionProps {
@@ -18,7 +20,11 @@ export function ProductSession({ children }: ProductSessionProps) {
     <InterfacePreferences key={scenario}>
       <DesktopHost />
       <SidebarLayout>
-        <ChatChangesProvider>{children}</ChatChangesProvider>
+        <NotificationSession>
+          <ChatChangesProvider>
+            <ComposerDrafts>{children}</ComposerDrafts>
+          </ChatChangesProvider>
+        </NotificationSession>
       </SidebarLayout>
     </InterfacePreferences>
   )

apps/sim/platform/app/workbench/page.tsx

@@ -1,6 +1,12 @@
+import type { Metadata } from 'next'
 import { loadPreviewData } from '@/platform/fixtures'
 import { Workbench } from '@/platform/preview/workbench'
 
+export const metadata: Metadata = {
+  title: 'Platform component workbench',
+  description: 'Browse Sim’s shared components, themes and Paper recipes.',
+}
+
 interface WorkbenchPageProps {
   searchParams: Promise<Record<string, string | string[] | undefined>>
 }

apps/sim/platform/checks/conversation.spec.ts

@@ -49,11 +49,24 @@ test('a new chat carries its local draft and attachments through navigation with
   })
   const text = page.getByRole('textbox', { name: /Ask about your business/ })
   await text.fill('/')
-  await page.getByRole('menuitem', { name: 'Chats', exact: true }).hover()
+  const chatsMenu = page.getByRole('menuitem', { name: 'Chats', exact: true })
+  await expect(chatsMenu).toBeVisible()
+  await page.keyboard.type('notes')
+  await expect(text).toHaveValue('/notes')
+  await expect(chatsMenu).toHaveCount(0)
+  await text.fill('/')
+  await chatsMenu.hover()
   await page.getByRole('menuitem', { name: 'Review the renewal brief' }).click()
   await page.getByRole('button', { name: 'Remove Review the renewal brief' }).click()
-  await text.fill('Draft the meeting recap')
-  await text.press('Enter')
+  await page.getByRole('radio', { name: 'Search', exact: true }).check()
+  const search = page.getByRole('textbox', { name: /Search your company/ })
+  await search.fill('Draft the meeting recap')
+  await page.getByRole('link', { name: 'Q4 planning', exact: true }).click()
+  await expect(page.getByRole('heading', { name: 'Q4 planning' })).toBeVisible()
+  await page.getByRole('link', { name: 'Home', exact: true }).click()
+  await expect(page.getByRole('radio', { name: 'Search', exact: true })).toBeChecked()
+  await expect(search).toHaveValue('Draft the meeting recap')
+  await search.press('Enter')
   await expect(page).toHaveURL(/\/chat\/[^?]+\?/)
   expect(page.url()).not.toContain('meeting')
   await expect(page.getByRole('heading', { name: 'Draft the meeting recap' })).toBeVisible()
@@ -107,3 +120,62 @@ test('stress transcript keeps attachment review bounded and returns the reader t
   await page.getByRole('button', { name: 'Jump to latest' }).click()
   await expect(page.getByRole('button', { name: 'Jump to latest' })).toBeHidden()
 })
+
+test('a follow-up leaves the active run stoppable', async ({ page }) => {
+  await page.goto(`${populated}/chat/customer-onboarding?state=full`)
+  const editor = page.getByRole('textbox', { name: 'Add a follow-up…' })
+  await editor.fill('Also include the handoff')
+  await editor.press('Enter')
+  await expect(page.getByText('Also include the handoff', { exact: true })).toBeVisible()
+  await page.getByRole('button', { name: 'Stop response' }).click()
+  await expect(page.getByText('Stopped', { exact: true })).toBeVisible()
+  await expect(page.getByRole('button', { name: 'Stop response' })).toHaveCount(0)
+})
+
+test('unsent drafts and files stay with their chat through navigation and clear after sending', async ({
+  page,
+}) => {
+  await page.goto(`${populated}/chat/weekly-review?state=full`)
+  const editor = page.getByRole('textbox', { name: 'Ask a follow-up…' })
+  await editor.fill('Review before sending')
+  await page.getByRole('button', { name: 'Add attachment' }).click()
+  const chooser = page.waitForEvent('filechooser')
+  await page.getByRole('menuitem', { name: 'Upload files' }).click()
+  await (await chooser).setFiles({
+    name: 'handoff.txt',
+    mimeType: 'text/plain',
+    buffer: Buffer.from('Available offline'),
+  })
+  await page.getByRole('link', { name: 'Q4 planning' }).click()
+  await expect(editor).toBeEmpty()
+  await expect(page.getByRole('button', { name: 'Preview handoff.txt' })).toHaveCount(0)
+  await page.getByRole('link', { name: 'Review the renewal brief', exact: true }).click()
+  await expect(editor).toHaveValue('Review before sending')
+  await page.getByRole('button', { name: 'Preview handoff.txt' }).click()
+  await expect(page.getByRole('dialog').getByText('Available offline')).toBeVisible()
+  await page.keyboard.press('Escape')
+  await editor.press('Enter')
+  await expect(page.getByText('Review before sending', { exact: true })).toBeVisible()
+  await page.getByRole('link', { name: 'Q4 planning' }).click()
+  await page.getByRole('link', { name: 'Review the renewal brief', exact: true }).click()
+  await expect(editor).toBeEmpty()
+  await expect(page.getByRole('button', { name: 'Remove handoff.txt' })).toHaveCount(0)
+})
+
+test.describe('touch composer', () => {
+  test.use({ viewport: { width: 390, height: 844 }, hasTouch: true, isMobile: true })
+
+  test('Return inserts a newline and sending consumes the original attachment batch', async ({
+    page,
+  }) => {
+    await page.goto(`${populated}/chat?state=stress`)
+    const editor = page.getByRole('textbox', { name: /Ask about your business/ })
+    await editor.fill('Review the attached files')
+    await editor.press('Enter')
+    await expect(editor).toHaveValue('Review the attached files\n')
+    await page.getByRole('button', { name: 'Send message' }).click()
+    await expect(page.getByRole('heading', { name: 'Review the attached files' })).toBeVisible()
+    await expect(page.getByRole('button', { name: /20 attachments.*Show all/ })).toHaveCount(1)
+    await expect(page.getByRole('button', { name: 'Send message' })).toBeDisabled()
+  })
+})

apps/sim/platform/checks/panels.spec.ts

@@ -23,6 +23,12 @@ test('a chat panel preserves its file, tabs and focus across resize, collapse an
   await expect(
     page.getByRole('heading', { level: 1, name: 'Review the renewal brief' })
   ).toBeVisible()
+  await panel.getByRole('button', { name: 'New panel tab' }).click()
+  const lastClose = panel.getByRole('button', { name: 'Close Workspaces tab' }).last()
+  await lastClose.focus()
+  await page.keyboard.press('Enter')
+  await expect(panel.getByRole('tab', { selected: true })).toBeFocused()
+  await panel.getByRole('tab', { name: 'Renewal brief' }).click()
   await page.setViewportSize({ width: 673, height: 823 })
   const opener = await page.getByRole('button', { name: 'Expand sidebar' }).boundingBox()
   const add = await panel.getByRole('button', { name: 'New panel tab' }).boundingBox()

apps/sim/platform/checks/settings.spec.ts

@@ -5,8 +5,10 @@ const base = 'http://127.0.0.1:3181'
 test('preferences apply to the interface and survive settings navigation in this session', async ({
   page,
 }) => {
-  await page.goto(`${base}/settings?theme=light&state=full`)
-  await page.getByRole('combobox', { name: 'Theme', exact: true }).click()
+  await page.goto(`${base}/settings?theme=unrecognized&state=full`)
+  const theme = page.getByRole('combobox', { name: 'Theme', exact: true })
+  await expect(theme).toHaveText('System')
+  await theme.click()
   await page.getByRole('option', { name: 'Dark', exact: true }).click()
   await expect(page.locator('[data-platform-ui]')).toHaveAttribute('data-theme', 'dark')
   await page.getByRole('combobox', { name: 'Interface font' }).click()
@@ -52,7 +54,7 @@ test('the small Settings drawer filters destinations, restores navigation and cl
   expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(356)
 })
 
-test('editing a display name resets cancelled drafts and updates the displayed profile on submit', async ({
+test('cancelled profile edits reset and saved name and picture survive Settings navigation', async ({
   page,
 }) => {
   await page.setViewportSize({ width: 356, height: 740 })
@@ -70,4 +72,30 @@ test('editing a display name resets cancelled drafts and updates the displayed p
   const button = page.getByRole('button', { name: replacement })
   await expect(button).toBeInViewport({ ratio: 1 })
   await expect(page.getByRole('img', { name: replacement })).toBeVisible()
+  await page.getByLabel('Set your profile picture').setInputFiles({
+    name: 'photo.svg',
+    mimeType: 'image/svg+xml',
+    buffer: Buffer.from('<svg xmlns="http://www.w3.org/2000/svg" width="17" height="13"/>'),
+  })
+  const picture = page.getByRole('region', { name: 'Profile' }).locator('img')
+  await expect(picture).toHaveJSProperty('naturalWidth', 17)
+  const open = page.getByRole('button', { name: 'Expand sidebar' })
+  const drawer = page.getByRole('dialog', { name: 'Navigation drawer' })
+  await open.click()
+  await drawer.getByRole('link', { name: 'Notifications' }).click()
+  await expect(page.getByRole('heading', { name: 'Notifications', level: 1 })).toBeVisible()
+  await open.click()
+  await drawer.getByRole('link', { name: 'Preferences' }).click()
+  await expect(button).toBeInViewport({ ratio: 1 })
+  await expect(picture).toHaveJSProperty('naturalWidth', 17)
+  await open.click()
+  await drawer.getByRole('button', { name: 'Back to app' }).click()
+  await expect(page.getByRole('heading', { name: 'Good morning, International' })).toBeVisible()
+  await open.click()
+  await expect(drawer.getByRole('img', { name: replacement })).toHaveJSProperty('naturalWidth', 17)
+  await drawer.getByRole('button', { name: replacement }).click()
+  await expect(button).toBeVisible()
+  await page.reload()
+  await expect(page.getByRole('button', { name: 'Emir Karabeg', exact: true })).toBeVisible()
+  await expect(picture).toHaveCount(0)
 })

apps/sim/platform/checks/shell.spec.ts

@@ -27,13 +27,21 @@ test('a keyboard search navigates to the matching chat and shell edits survive t
   await page.getByRole('textbox', { name: 'Chat name' }).fill('Renewal follow-up')
   await page.getByRole('button', { name: 'Save', exact: true }).click()
   await expect(page.getByRole('heading', { name: 'Renewal follow-up' })).toBeVisible()
+  const workspaces = page.getByRole('region', { name: 'Workspaces', exact: true })
+  await workspaces.locator('summary').click()
+  await collection.locator('summary').click()
   await page.getByRole('button', { name: 'Organization menu' }).click()
   await page
     .getByRole('dialog', { name: 'Organization menu' })
     .getByRole('button', { name: 'Settings' })
     .click()
   await page.getByRole('button', { name: 'Back to app' }).click()
+  await expect(page.getByRole('button', { name: 'Customize Home' })).toBeVisible()
+  await expect(workspaces.getByRole('link', { name: 'Customer operations' })).toBeHidden()
+  await expect(collection.getByRole('link', { name: 'Renewal follow-up' })).toBeHidden()
+  await collection.locator('summary').click()
   await expect(collection.getByRole('link', { name: 'Renewal follow-up' })).toBeVisible()
+  await expect(workspaces.getByRole('link', { name: 'Customer operations' })).toBeHidden()
   await collection.getByRole('link', { name: 'Renewal follow-up' }).hover()
   await collection.getByRole('button', { name: 'Actions for Renewal follow-up' }).click()
   await page.getByRole('menuitem', { name: 'Archive' }).click()
@@ -87,7 +95,12 @@ test('the inbox filters unread items and each notification can be dismissed sepa
   await inbox.getByRole('radio', { name: 'Unread' }).check()
   await expect(inbox.getByRole('button', { name: /Review the renewal brief/ })).toHaveCount(0)
   await inbox.getByRole('button', { name: /Reconnect Salesforce/ }).click()
+  await page.getByRole('link', { name: 'Review the renewal brief' }).click()
+  await expect(page.getByRole('heading', { name: 'Review the renewal brief' })).toBeVisible()
+  await page.getByRole('link', { name: 'Home', exact: true }).click()
+  await expect(page.getByRole('button', { name: 'Customize Home' })).toBeVisible()
   await open.click()
+  await expect(inbox.getByRole('radio', { name: 'Unread' })).toBeChecked()
   await expect(inbox.getByRole('button', { name: /Reconnect Salesforce/ })).toHaveCount(0)
   await page.keyboard.press('Escape')
   const customize = page.getByRole('button', { name: 'Customize Home', exact: true })
@@ -99,6 +112,12 @@ test('the inbox filters unread items and each notification can be dismissed sepa
   await page.keyboard.press('Escape')
   await notices.getByRole('button', { name: '4 notifications' }).click()
   await notices.getByRole('button', { name: 'Dismiss Syncing knowledge' }).click()
+  await page.getByRole('button', { name: 'Sort chats' }).click()
+  await page.getByRole('menuitemcheckbox', { name: 'Name (A–Z)' }).click()
+  await page.getByRole('button', { name: 'Emir Karabeg' }).click()
+  await page.getByRole('button', { name: 'Back to app' }).click()
+  const chats = page.getByRole('region', { name: 'Chats', exact: true })
+  await expect(chats.getByRole('link').first()).toHaveText('Customer onboarding')
   await expect(notices.getByRole('button', { name: '3 notifications' })).toBeVisible()
   await notices
     .getByRole('article', { name: 'Email hidden' })

apps/sim/platform/design-system/components/collections.module.css

@@ -59,6 +59,10 @@
   white-space: nowrap;
   color: var(--ui-ink);
 }
+.recentItem > button {
+  align-self: stretch;
+  cursor: pointer;
+}
 .attachmentItems {
   display: grid;
   gap: var(--spacing-8);
@@ -104,6 +108,9 @@
   .recentItem {
     min-height: var(--spacing-app-touch-target);
   }
+  .recentItem > button {
+    min-inline-size: var(--spacing-app-touch-target);
+  }
 }
 .steps {
   display: grid;
@@ -138,6 +145,9 @@
 }
 
 .workspaceHit {
+  align-self: stretch;
+  display: grid;
+  align-items: center;
   width: 100%;
   cursor: pointer;
   text-align: start;
@@ -159,3 +169,11 @@
 .recentItem:hover .removeRecent > svg:last-child {
   display: block;
 }
+@media (hover: none) {
+  .removeRecent > svg:first-child {
+    display: none;
+  }
+  .removeRecent > svg:last-child {
+    display: block;
+  }
+}