feat(platform): consolidate controls and redesign integration details

Author: emir-karabeg

apps/sim/app/o/[organizationId]/_redesign/rail/help-menu.tsx

@@ -23,7 +23,7 @@ export function HelpMenu() {
     {
       id: 'documentation',
       label: 'Docs',
-      icon: 'I079',
+      icon: 'I082',
       trailingIcon: 'I030',
       separatorBefore: Boolean(desktopUpdate),
       onSelect: help.openDocumentation,

apps/sim/app/o/[organizationId]/_redesign/rail/name-modal.tsx

@@ -40,6 +40,7 @@ export function NameModal({
     >
       <TextField
         label={fieldLabel}
+        placeholder={fieldLabel}
         name='name'
         required
         maxLength={maxLength}

apps/sim/app/o/[organizationId]/_redesign/rail/organization-menu.tsx

@@ -127,6 +127,7 @@ export function OrganizationMenu({
                 >
                   <Input
                     label='Organization name'
+                    placeholder='Organization name'
                     value={draftName}
                     disabled={renaming}
                     invalid={Boolean(renameError)}

apps/sim/platform/AGENTS.md

@@ -71,7 +71,7 @@ Shared and Platform still own different recipes; `catalog/evidence.json` preserv
 
 Workspace lists, sidebar items, recents and attachment batches accept typed arrays with stable item IDs. Use the named components for these collection masters: a Paper specimen's item count is sample data. An empty array renders zero items, and adding items preserves their registered row/card appearance. Each scroll viewport determines fades and controls from its actual contents. Chart labels, marks, inspected values and legends come from the same series. Supply raw numeric values and their units to data tables. The column schema determines alignment and which columns remain visible as the table narrows.
 
-The full fixture includes twenty sidebar workspaces, sixteen conversations, a twelve-message inbox and a calendar that scrolls from midnight to midnight even on empty days. Home and Chat share a reading width. Home and Integrations share the same heading inset; the shell reserves sidebar opener and native titlebar clearance separately. The shell uses one 12px inset above the organization and on both sides of the profile row. The Home content scrolls through its viewport edge fade. The shell keeps the collapsed sidebar button aligned with the expanded toolbar even as the page scrolls. Platform and Settings navigation scroll independently, with edge fades instead of a visible scrollbar. Calendar events use the muted surface. An event with a provider URL opens in a new tab. Attendees and integration usage share Stack: two photos with names on hover and a passive +N count, compacted for large totals. Now appears when the calendar scrolls away from its resting position or another day is selected. It restores today’s schedule and centers the current time. Scrolling back to that position also hides Now.
+The full fixture includes twenty sidebar workspaces, sixteen conversations, a twelve-message inbox and a calendar that scrolls from midnight to midnight even on empty days. All Platform reading pages share PageColumn width and gutters; PageOverflow supplies the common 8px surface overhang. Editor and preview canvases retain their working area. Home and Integrations share the same heading inset; the shell reserves sidebar opener and native titlebar clearance separately. The shell uses one 12px inset above the organization and on both sides of the profile row. The Home content scrolls through its viewport edge fade. The shell keeps the collapsed sidebar button aligned with the expanded toolbar even as the page scrolls. Platform and Settings navigation scroll independently, with edge fades instead of a visible scrollbar. Calendar events use the muted surface. An event with a provider URL opens in a new tab. Attendees and integration usage share Stack: up to three photos with names on hover and a passive +N count, compacted for large totals. Now appears when the calendar scrolls away from its resting position or another day is selected. It restores today’s schedule and centers the current time. Scrolling back to that position also hides Now.
 
 Start with the [component ownership map](docs/component-ownership.md) when choosing a primitive. Sidebar, recents and panel tabs use one row; form and command dialogs use one borderless surface. Copy confirmations and transient notifications last four seconds. The notification count uses the compact Invite button. Expanded notices share one subtle shadow around the list. A new notice pauses its expiry on hover or keyboard focus. Icon color transitions take 120ms and respect reduced motion. The [design contract](AGENTS.md) defines these rules.
 
@@ -83,7 +83,7 @@ Import [Platform time formatting](lib/time.ts) for dates, relative ages and cloc
 
 ### Keyboard and dropdown behavior
 
-Focus places the caret or keyboard target without changing the control’s border, outline, background or shadow. Selection, validation and the highlighted list item retain their Paper treatments. Use the same EMCN value picker and floating surface on the workbench and in a modal. Select handles a fixed set of values, a searchable combobox supports longer lists, and an action menu supports commands and nested menus. The Help menu in the workbench exercises the cascade.
+Focus places the caret or keyboard target without changing ordinary field paint. SearchField has one explicit exception: its underline appears on hover or focus. Keyboard focus remains visible on actions. Selection, validation and the highlighted list item retain their Paper treatments. Use the same EMCN value picker and floating surface on the workbench and in a modal. Select handles a fixed set of values, a searchable combobox supports longer lists, and an action menu supports commands and nested menus. The Help menu in the workbench exercises the cascade.
 
 Import the styled EMCN owner from product UI. Its Base UI primitive handles pointer and keyboard interaction, dismissal and collision placement. Nested menus support hovering into the child, arrow-key navigation, and Escape back to the parent. The tests also check form submission, dialog-local placement and focus restoration. [Base UI Select](https://base-ui.com/react/components/select) · [Combobox](https://base-ui.com/react/components/combobox) · [Menu](https://base-ui.com/react/components/menu)
 
@@ -113,7 +113,14 @@ The Platform type check generates Next.js route types and checks the isolated pr
 
 `bun run --cwd apps/sim test:platform:live` runs `checks/live/` against an app and database you have started, using `PLATFORM_LIVE_ORIGIN`, `PLATFORM_LIVE_EMAIL`, `PLATFORM_LIVE_PASSWORD` and `PLATFORM_LIVE_ORGANIZATION_NAME`. The member needs build access: anyone else lands on a legacy route. Supply `PLATFORM_LIVE_REPORT_PATH` to save its JSON report.
 
-The browser suite starts separate production servers with fixtures enabled and disabled. Supply `PLATFORM_REPORT_PATH` to save JSON, failure screenshots and traces. Next uses webpack for this nested app: the installed Turbopack also discovers the parent Sim project's proxy and instrumentation. Watch for that boundary when upgrading Next.
+The default browser suite starts production servers with fixtures enabled and disabled. For the already-running shared preview, use the explicit existing-server mode; it starts no server and leaves the preview process unchanged:
+
+```sh
+PLATFORM_E2E_ORIGIN=http://localhost:3125 PLATFORM_REPORT_PATH=<report-path> bun run --cwd apps/sim test:platform:e2e
+PLATFORM_E2E_ORIGIN=http://localhost:3125 PLATFORM_DESKTOP_REPORT_PATH=<report-path> bun run --cwd apps/sim test:platform:desktop
+```
+
+That local mode runs fixture-enabled browser and Electron coverage. It excludes only `fixtures-off.spec.ts`, whose server gate requires a fixture-disabled process. The default production suite retains those checks; complete them on the exact final commit before shipping. `?state=empty` does not turn fixtures off. Supply `PLATFORM_REPORT_PATH` to save JSON, failure screenshots and traces. Next uses webpack for this nested app: the installed Turbopack also discovers the parent Sim project's proxy and instrumentation. Watch for that boundary when upgrading Next.
 
 The static check covers ownership, styling props, component folders, evidence, tokens, unused variants and dependency direction. It rejects a route CSS Module directly under `_components/`; put it with its component. If it flags a variant used on a real route, verify the call path and add that case to the checker. Review new shared visual variants against at least two independent consumers; semantic independence is a design review, not a count of repeated JSX rows. A workbench example cannot establish product usage. Use the rendered route to verify visual alignment. Compare both themes, keyboard and pointer states, actual overflow, text scaling and widths between approved artboards. Build the standalone app before running the browser suite to test the current sources.
 

apps/sim/platform/README.md

@@ -56,12 +56,14 @@ function ActionCard({
                 {editing && field.editable ? (
                   field.multiline ? (
                     <TextArea
+                      placeholder={field.label}
                       label={field.label}
                       value={value}
                       onChange={(next) => onEdit(field.name, next)}
                     />
                   ) : (
                     <Input
+                      placeholder={field.label}
                       label={field.label}
                       value={value}
                       onChange={(next) => onEdit(field.name, next)}

apps/sim/platform/app/(shell)/_components/chat/cards/assistant-review.tsx

@@ -225,7 +225,7 @@ export function LiveCredentialCard({
                 <SecretField
                   key={controlId}
                   label={item.name ?? 'Secret'}
-                  placeholder={item.name}
+                  placeholder={item.name ?? 'Enter a secret'}
                   value={drafts[index] ?? ''}
                   onChange={(value) => setDrafts((current) => ({ ...current, [index]: value }))}
                 />
@@ -245,7 +245,14 @@ export function LiveCredentialCard({
               return <FolderRow key={controlId} item={item} />
             case 'sim_key':
               return item.value ? (
-                <SecretField key={controlId} label='Sim key' value={item.value} readOnly copyable />
+                <SecretField
+                  placeholder='Sim API key'
+                  key={controlId}
+                  label='Sim key'
+                  value={item.value}
+                  readOnly
+                  copyable
+                />
               ) : null
             default:
               return null

apps/sim/platform/app/(shell)/_components/chat/cards/live-credential-card.tsx

@@ -31,11 +31,6 @@
   gap: var(--ui-product-section-gap);
   overflow-wrap: anywhere;
 }
-.thread,
-.dockInner {
-  inline-size: min(var(--ui-page-max-size), calc(100% - 2 * var(--ui-page-inline-gutter)));
-  margin-inline: auto;
-}
 .turn:last-child {
   margin-block-end: var(--ui-product-section-gap);
 }

apps/sim/platform/app/(shell)/_components/chat/conversation/conversation.module.css

@@ -15,6 +15,8 @@ import {
   IconButton,
   InlineNotice,
   OverflowText,
+  PageColumn,
+  PageOverflow,
   Tooltip,
 } from '@/platform/design-system/components'
 import { useScrollEdges } from '@/platform/design-system/components/scroll-area/use-scroll-edges'
@@ -98,31 +100,33 @@ export function Conversation({ runtime, composer, placeholders, header }: Conver
             setEarlier(el.scrollHeight - el.clientHeight - el.scrollTop > FOLLOW_SLACK)
           }}
         >
-          <div className={styles.thread} ref={thread}>
-            {status === 'loading' && (
-              <p className={styles.turn} data-type='T048' role='status'>
-                Loading conversation
-              </p>
-            )}
-            {runtime.loadFailed && (
-              <InlineNotice
-                intent='danger'
-                message='This conversation could not load.'
-                action={
-                  <Button variant='muted' size='compact' onClick={() => window.location.reload()}>
-                    Reload
-                  </Button>
-                }
-              />
-            )}
-            {groupExchanges(turns).map((exchange) => (
-              <article key={exchange[0].id} className={styles.turn}>
-                {exchange.map((turn) => (
-                  <Turn key={turn.id} turn={turn} />
-                ))}
-              </article>
-            ))}
-          </div>
+          <PageColumn>
+            <div className={styles.thread} ref={thread}>
+              {status === 'loading' && (
+                <p className={styles.turn} data-type='T048' role='status'>
+                  Loading conversation
+                </p>
+              )}
+              {runtime.loadFailed && (
+                <InlineNotice
+                  intent='danger'
+                  message='This conversation could not load.'
+                  action={
+                    <Button variant='muted' size='compact' onClick={() => window.location.reload()}>
+                      Reload
+                    </Button>
+                  }
+                />
+              )}
+              {groupExchanges(turns).map((exchange) => (
+                <article key={exchange[0].id} className={styles.turn}>
+                  {exchange.map((turn) => (
+                    <Turn key={turn.id} turn={turn} />
+                  ))}
+                </article>
+              ))}
+            </div>
+          </PageColumn>
         </div>
         <div className={styles.dock}>
           {earlier && (
@@ -137,28 +141,30 @@ export function Conversation({ runtime, composer, placeholders, header }: Conver
               </Tooltip>
             </div>
           )}
-          <div className={styles.dockInner}>
+          <PageColumn>
             <QueuedMessages runtime={runtime} />
-            <MessageComposer
-              composer={composer}
-              placeholder={
-                running
-                  ? placeholders.running
-                  : turns.length
-                    ? placeholders.followUp
-                    : placeholders.first
-              }
-              onSubmit={runtime.send}
-              onStop={running ? runtime.stop : undefined}
-              onSendQueuedHead={queue.length ? () => runtime.sendQueuedNow() : undefined}
-              onRecallQueued={() => {
-                const tail = queue.at(-1)
-                if (!tail || tail.locked) return false
-                runtime.editQueued(tail.id)
-                return true
-              }}
-            />
-          </div>
+            <PageOverflow>
+              <MessageComposer
+                composer={composer}
+                placeholder={
+                  running
+                    ? placeholders.running
+                    : turns.length
+                      ? placeholders.followUp
+                      : placeholders.first
+                }
+                onSubmit={runtime.send}
+                onStop={running ? runtime.stop : undefined}
+                onSendQueuedHead={queue.length ? () => runtime.sendQueuedNow() : undefined}
+                onRecallQueued={() => {
+                  const tail = queue.at(-1)
+                  if (!tail || tail.locked) return false
+                  runtime.editQueued(tail.id)
+                  return true
+                }}
+              />
+            </PageOverflow>
+          </PageColumn>
         </div>
       </div>
     </ChatRuntimeProvider>

apps/sim/platform/app/(shell)/_components/chat/conversation/conversation.tsx

@@ -2,7 +2,7 @@
 
 import type { ReactNode } from 'react'
 import styles from '@/platform/app/(shell)/_components/links-page/links-page.module.css'
-import { ActionMenu, Button, SearchField } from '@/platform/design-system/components'
+import { ActionMenu, Button, PageColumn, SearchField } from '@/platform/design-system/components'
 import type { MenuAction } from '@/platform/design-system/components/menu/action-menu'
 import { openChromeStore, useLinksHosted } from '@/platform/lib/data/links'
 
@@ -31,32 +31,34 @@ export function LinksFrame({
 }: LinksFrameProps) {
   const hosted = useLinksHosted()
   return (
-    <main className={styles.page} inert={loading} aria-busy={loading || undefined}>
-      <header className={styles.heading}>
-        <h1 data-type='T076'>Links</h1>
-        <div className={styles.actions}>
-          {hosted && (
-            <Button icon='I041' onClick={openChromeStore}>
-              Install Sim for Chrome
+    <PageColumn>
+      <main className={styles.page} inert={loading} aria-busy={loading || undefined}>
+        <header className={styles.heading}>
+          <h1 data-type='T076'>Links</h1>
+          <div className={styles.actions}>
+            {hosted && (
+              <Button icon='I041' onClick={openChromeStore}>
+                Install Sim for Chrome
+              </Button>
+            )}
+            <Button variant='primary' icon='I074' onClick={onCreate}>
+              New link
             </Button>
-          )}
-          <Button variant='primary' icon='I074' onClick={onCreate}>
-            New link
-          </Button>
+          </div>
+        </header>
+        <div className={styles.options}>
+          <SearchField
+            variant='quiet'
+            label='Search links'
+            placeholder='Search links...'
+            value={search}
+            onValueChange={onSearch}
+          />
+          <ActionMenu label={sortLabel} icon={null} align='end' actions={sortActions} />
         </div>
-      </header>
-      <div className={styles.options}>
-        <SearchField
-          variant='quiet'
-          label='Search links'
-          placeholder='Search links...'
-          value={search}
-          onValueChange={onSearch}
-        />
-        <ActionMenu label={sortLabel} icon={null} align='end' actions={sortActions} />
-      </div>
-      {children}
-    </main>
+        {children}
+      </main>
+    </PageColumn>
   )
 }