Build the Core and Chat UI for web and Sim Desktop by emir-karabeg · Pull Request #9687 · simstudioai/sim

emir-karabeg · 2026-11-04T23:24:23Z

Home, Chat, Settings and the navigation shell are real routes in the isolated Platform Next.js app. The browser and Sim Desktop share the renderer. A default-off server fixture supplies populated, empty and stress states without a database.

Home and Chat share a responsive reading column. The Home greeting aligns with its sidebar row and scrolls into the viewport-edge fade. The expand and collapse controls sit at the same toolbar height. A 12px inset surrounds the organization and both sides of the profile footer vertically. Email follows the chart; attention and Calendar share the other column. Inbox and calendar scroll independently. The Build/Search control selects Tasks run or Searches made across the chart and Customize Home. Both metrics share the selected calendar window; missing interior observations keep their day at zero. Calendar events use the solid muted button surface and open keyboard-accessible local details; linking provider records remains Phase 3.

Navigation, tabs, recents and attachment previews share ControlRow. Workspace names, the Workspaces launcher and its tab title are text-only. Compact × controls use the same neutral treatment in tabs, recents and drafts. Primary and destructive confirmations darken by equal perceptual steps, and all textareas suppress manual resize handles. Dialogs share a borderless surface and one quiet Cancel. Each message owns the hover area through its action row. Chat keeps thinking, tools and paragraphs 12px apart, balances tool payload insets and leaves space for the composer after the last turn. Copy and notice feedback share a four-second dwell. The notification count uses the compact Invite button and the same centered label/count treatment as email threads. Its expanded list casts a single subtle shadow outside the scroll viewport. Composer type stays stable across tablet widths; inline ellipses and the labeled range picker have no redundant tooltip. Mail, attention, file metadata, chat clocks and chart dates use a shared time formatter with deterministic fixture clocks.

See the component ownership map, Platform contract and Core/Chat source-state inventory. To run locally: SIM_PLATFORM_FIXTURES=1 bun run --cwd apps/sim dev:platform; visit /home?state=full, /chat/weekly-review?state=full or /settings?state=full.

Verification exercises the production Next build, Chromium with fixture-on and fixture-off servers, and the native Electron renderer. Browser journeys measure scroll bounds, hit targets and spacing, exercise keyboard selection and focus return, and distinguish resting/hover/pressed feedback in both themes. The design audit checks ownership, token and variant use, timers, modal chrome and the fixture boundary.

Stacked on #9667, which targets staging.

vercel · 2026-11-04T23:24:28Z

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated
docs	Ignored	Preview	Nov 5, 2026 3:00am UTC

greptile-apps · 2026-11-04T23:29:52Z

Confidence Score: 3/5

[Medium impact] The changes reach the standalone Platform’s Home, Chat, and Settings flows on web and Desktop.

Fix the lost Stop control and covered desktop panel tabs before merging.

Findings

Follow-up removes Stop ▶
Toolbar covers panel tabs ▶
Unsent messages disappear ▶
Saved profile edits vanish ▶
Navigation resets shell changes ▶

Summary

Adds standalone Home, Chat and Settings routes for browsers and Sim Desktop, with shared controls, gated fixtures and browser/Electron checks.

The Platform opens on Home with shared navigation and a dashboard people can customize.
Chat keeps drafts, attachments, and panel interactions local to the Platform session.
Settings adds profile, appearance, notification, and member screens to the Platform.
Shared controls support the new product routes, and the component workbench has its own route.
Build and design checks now cover the Platform product routes and Desktop renderer.

Diagram

%%{init: {'theme': 'neutral'}}%%
flowchart TD
  Layout["Shared ProductSession"] --> Preferences["Interface preferences"]
  Layout --> Changes["Chat edits"]
  Layout --> Page["Home, Chat or Settings page"]
  Page --> Frame["ProductFrame"]
  Frame --> Shell["PlatformShell"]
  Shell --> Local["Inbox, notices and sort state"]
  Shell --> Feature["Feature screen"]
  Feature --> Draft["Local draft or profile edits"]

_{Reviews (1) · Last reviewed commit: "feat(platform): build Core and Chat for ..." · Reviewed by Greptile}

greptile-apps · 2026-11-04T23:29:55Z

+            onStop={
+              last?.response?.state === 'running' ? () => transition(last, 'stopped') : undefined
+            }
+            onSubmit={(draft) => {
+              const next = userTurn(draft)
+              if (id && !removed) {
+                changes.setTurnsFor(id, [...turns, next])


Follow-up removes Stop

In /chat/customer-onboarding?state=full, pressing Enter on a follow-up appends a user turn while the response is running. onStop then disappears because it checks only the last turn, which now has no response. The earlier response stays “Working” with no way to stop it. Track the running turn separately, or block submission while it is running.

greptile-apps · 2026-11-04T23:29:55Z

+  padding-inline: var(--spacing-12);
+  min-inline-size: 0;
+  height: var(--height-nav);
+  border-block-end: var(--spacing-stroke-default) solid var(--ui-divider);
+}
+:global([data-sim-desktop-title-bar]) .header {
+  height: var(--spacing-48);
+  -webkit-app-region: drag;


Toolbar covers panel tabs

With the desktop sidebar collapsed, expanding the chat panel puts its tabs under the desktop toolbar and native window buttons. The shell places the content at the top-left, but the panel header keeps only 12px of left padding. Unlike the conversation header, it does not use --ui-navigation-inset. Reserve that space when the panel takes over so its first tab and close control remain clickable.

greptile-apps · 2026-11-04T23:29:55Z

+      <ChatPanels workspaces={shell?.workspaces ?? []} data={panel} key={id?.[0] ?? 'new'}>
+        <ChatScreen data={data?.chat ?? null} chatId={id?.[0]} />


Unsent messages disappear

Switching chats discards unsent text and selected files. MessageComposer keeps both only in local state, while this route keys the whole panel tree by chat ID. Returning to the original chat creates a fresh composer. Keep drafts in the session, keyed by chat ID, so ordinary navigation does not erase unfinished messages.

greptile-apps · 2026-11-04T23:29:55Z

+  const [displayName, setDisplayName] = useState(name ?? '')
+  const [picture, setPicture] = useState<string>()


Saved profile edits vanish

Saving a display name or choosing a profile picture lasts only until the user leaves Preferences. ProfileSettings owns these values locally and is removed on other Settings sections. Returning restores the fixture name and drops the picture. Keep these local edits in the session provider; no database write is needed.

greptile-apps · 2026-11-04T23:29:55Z

+    <ProductSurface preference={appearance}>
+      <PlatformShell data={shell} desktopTitle={desktopTitle} navigation={navigation}>
+        {children}
+      </PlatformShell>


Navigation resets shell changes

Each page creates its own PlatformShell, so moving between Home, Chat and Settings resets inbox read marks, dismissed notices and chat sorting. For example, reading an unread item, opening a chat and returning makes that item unread again. Move this session state above the page boundary, alongside the existing chat edits and interface preferences.

cubic-dev-ai

6 issues found and verified against the latest diff

Confidence score: 3/5

chat-screen.tsx can bring submitted attachments back into the composer when the first send creates a chat. Clear the draft attachments before the route change remounts the composer.
recent-items.tsx leaves the remove and select controls too small to tap reliably on coarse-pointer devices. Give both controls larger hit targets.
workspace-list.tsx has no visible focus indicator, so keyboard users may lose track of which workspace is focused. Add a :focus-visible treatment.
product-surface.tsx briefly renders light for users whose system theme is dark. Resolve the system theme before first paint to avoid the flash.

Prompt for AI agents (unresolved issues)


Check if these issues are valid — if so, understand the root cause of each and fix them. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="apps/sim/platform/design-system/components/recent-items.tsx">

<violation number="1" location="apps/sim/platform/design-system/components/recent-items.tsx:32">
P2: These new recents controls do not provide a coarse-pointer hit target: the row grows to 44px, but the remove button remains an intrinsic icon-sized target and the select button remains text-sized. Give both controls a 44px touch target, such as the existing `IconButton` touch sizing or `TouchTarget` wrapper, while preserving the row layout.</violation>
</file>

<file name="apps/sim/platform/design-system/components/workspace-list.tsx">

<violation number="1" location="apps/sim/platform/design-system/components/workspace-list.tsx:43">
P2: This new keyboard-focusable workspace button has no visible focus indicator because the global stylesheet removes outlines and `.workspaceHit` adds none. Add a shared or workspace-specific `:focus-visible` treatment so keyboard users can identify the active row.</violation>
</file>

<file name="apps/sim/platform/design-system/components/product-surface.tsx">

<violation number="1" location="apps/sim/platform/design-system/components/product-surface.tsx:10">
P2: System appearance always renders light on the server, causing dark-system users to see a light flash before hydration applies the media-query result. Resolve the system theme before first paint, such as with a CSS media-query path plus explicit-theme override or a small theme bootstrap.</violation>
</file>

<file name="apps/sim/platform/design-system/components/select.tsx">

<violation number="1" location="apps/sim/platform/design-system/components/select.tsx:37">
P2: An arbitrary `theme` query can reach this controlled value without matching any option, so the Theme picker renders blank even though the surrounding product falls back to `system`. Ignore values outside `options` here or pass the normalized theme from the settings screen.</violation>
</file>

<file name="apps/sim/platform/design-system/features/chat/chat-screen.tsx">

<violation number="1" location="apps/sim/platform/design-system/features/chat/chat-screen.tsx:100">
P2: The first send from `/chat` clears the composer only until `router.replace` changes `id`; this prop then remounts `MessageComposer` with the unchanged draft attachments, so submitted files reappear in the new chat’s composer. Track and consume the initial draft when submitting before navigation.</violation>
</file>

<file name="apps/sim/platform/design-system/components/notification-tray.module.css">

<violation number="1" location="apps/sim/platform/design-system/components/notification-tray.module.css:10">
P2: The fixed notification stack ignores the bottom safe-area inset, so its action and dismiss controls can sit under the home indicator on notched mobile browsers. Use `max(var(--spacing-20), env(safe-area-inset-bottom))` for the bottom offset.

(Based on your team's feedback about toast safe-area minimum.) [8c7692a3-398e-4004-b266-f2a76922d36c]</violation>
</file>

_{Reply with feedback, questions, or to request a fix.

Turn on auto-fix | Re-trigger cubic}

cubic-dev-ai · 2026-11-04T23:37:37Z

-              {item.label}
+              {onRemove ? (
+                <button
+                  className={styles.removeRecent}


P2: These new recents controls do not provide a coarse-pointer hit target: the row grows to 44px, but the remove button remains an intrinsic icon-sized target and the select button remains text-sized. Give both controls a 44px touch target, such as the existing IconButton touch sizing or TouchTarget wrapper, while preserving the row layout.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. At apps/sim/platform/design-system/components/recent-items.tsx, line 32: <comment>These new recents controls do not provide a coarse-pointer hit target: the row grows to 44px, but the remove button remains an intrinsic icon-sized target and the select button remains text-sized. Give both controls a 44px touch target, such as the existing `IconButton` touch sizing or `TouchTarget` wrapper, while preserving the row layout.</comment> <file context> @@ -25,8 +27,26 @@ export function RecentItems({ label, title = label, items }: RecentItemsProps) { - {item.label} + {onRemove ? ( + <button + className={styles.removeRecent} + type='button' + aria-label={`Remove ${item.label} from recents`} </file context>

feat(platform): build Core and Chat for web and desktop

ad0256f

emir-karabeg requested a review from a team as a code owner November 4, 2026 23:24

fix(platform): keep anchored popover presentation in its CSS recipe

4cd98d8

vercel Bot temporarily deployed to Preview November 4, 2026 23:26 Inactive

greptile-apps Bot reviewed Nov 4, 2026

View reviewed changes

fix(platform): reserve shell controls when a panel takes over

351b716

cubic-dev-ai Bot reviewed Nov 4, 2026

View reviewed changes

emir-karabeg added 2 commits November 4, 2026 15:38

fix(platform): align tablet panel controls with the shell inset

7bc2e1d

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

0c2124a

vercel Bot temporarily deployed to Preview November 4, 2026 23:45 Inactive

fix(platform): apply system appearance before hydration

fe4d237

vercel Bot temporarily deployed to Preview November 4, 2026 23:49 Inactive

emir-karabeg added 2 commits November 4, 2026 16:52

Colocate Platform product UI and unify control geometry and states

33356aa

Move keyboard focus into the chat panel when it opens

2ec8353

vercel Bot temporarily deployed to Preview November 5, 2026 00:57 Inactive

emir-karabeg added 2 commits November 4, 2026 17:00

Guard interface icon ownership and exercise both native tab layouts

fc8b927

Generate and check Platform route types independently

e571830

vercel Bot temporarily deployed to Preview November 5, 2026 01:05 Inactive

Keep Platform browser tests in their own TypeScript project

b979431

vercel Bot temporarily deployed to Preview November 5, 2026 01:06 Inactive

emir-karabeg added 2 commits November 4, 2026 17:30

Unify Platform modal actions, control geometry and overflow

28e795c

Compare responsive layout in a single browser frame

f405705

vercel Bot deployed to Preview November 5, 2026 01:38

View deployment

emir-karabeg added 4 commits November 4, 2026 17:53

Consolidate Platform controls and align Home and Chat

3fe70ac

Align Platform shell and conversation spacing and unify action feedback

3874b9e

Align sidebar toggles, message hover and workspace controls

02a65c6

Use text-only Workspaces launcher and tab

27c416e

vercel Bot temporarily deployed to Preview November 5, 2026 02:37 Inactive

Align notification surfaces and share dated activity across the Platform

6753d4d

		<ChatPanels workspaces={shell?.workspaces ?? []} data={panel} key={id?.[0] ?? 'new'}>
		<ChatScreen data={data?.chat ?? null} chatId={id?.[0]} />

		const [displayName, setDisplayName] = useState(name ?? '')
		const [picture, setPicture] = useState<string>()

Conversation

emir-karabeg commented Nov 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel Bot commented Nov 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

greptile-apps Bot commented Nov 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Confidence Score: 3/5

Findings

Summary

Diagram

Uh oh!

greptile-apps Bot Nov 4, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Nov 4, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Nov 4, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Nov 4, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Nov 4, 2026

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cubic-dev-ai Bot Nov 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This branch was previously deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

emir-karabeg commented Nov 4, 2026 •

edited

Loading

vercel Bot commented Nov 4, 2026 •

edited

Loading

greptile-apps Bot commented Nov 4, 2026 •

edited

Loading

cubic-dev-ai Bot left a comment •

edited

Loading

cubic-dev-ai Bot Nov 4, 2026 •

edited

Loading