@@ -10,6 +10,7 @@ Read `apps/sim/platform/AGENTS.md` first. It is the canonical ownership and code
 1. **Scope the phase.** Foundations, recipes and evidence are Phase 1. Approved product screens and their unique parts are Phase 2. Route integration, persisted state and authorization belong to Phase 3. Keep UI-only requests isolated; do not advance phases just to make a demo look real.
 2. **Resolve the product change.** Inspect the actual route first. Use the relevant live Paper bases and product states for existing anatomy, theme roles and interactions; a later explicit code-first decision supersedes an older specimen. Keep the checkpoint scoped to the affected states. For a new idea, a real product use is required, a new Paper drawing is not. Exclude Marcus.
 3. **Choose one owner.** Use `app/(shell)/<route>/_components/<component>/<component>.tsx` and a sibling CSS Module for unique anatomy. Put shared shell compositions at the nearest common route owner, generic EMCN primitives in `design-system/components/<family>/`, and design roles in foundations. Keep pages style-free. Promote the original owner on second use and update both callers. A gallery alone never justifies a variant. Apply the shared rhythm, icon and hover contract in `apps/sim/platform/AGENTS.md`; compare two real consumers for title and Cancel placement, first-line leading art and centered trailing metadata, opaque type-scaled icons, row hover and compact action gaps. Keep form chrome in Modal. Verify long-content fades on the actual scroll owner at the start, middle and end, then filter or resize until all content fits.
+   Consult the tracked component ownership map before adding markup. Choose the existing action button, navigable row, two-line activity row, picker, or disclosure by behavior. Render Base UI triggers through their controls. Trace copy/status lifetimes to the shared expiry owner; verify pause, reset, reduced motion and long tooltip limits. Compare Home/Chat reading edges and stable controls across responsive layouts, including structural rules and the actual scroll boundary.
 4. **Translate anatomy, not artboard coordinates.** Consult the installed Next docs in `node_modules/next/dist/docs` (especially project structure, CSS, Server/Client Components). Use semantic DOM, native or accessible behaviors, intrinsic size and responsive relationships. A 560px Paper modal is a preferred maximum, not a fixed width. The same modal should fit 647px and 390px viewports without new variants. Use centralized Tailwind roles, the type and material contracts, shared icon geometry and slots. Confirm the rendered DOM has the intended behavior. A searchable field accepts text, a disclosure opens by keyboard, a modal part composes directly, and a table renders the caller’s records. Repeated data takes an array, never a fixed list of numbered specimen props. Register a named native component for these cases. A new size requires a distinct, evidenced use; it isn't a device enum. Never pass styles through a composition. Trace repeated rows to their registered item and preserve the surrounding layout. Accept a typed collection, then render empty, short and longer-than-specimen data to prove that any example count can change. Keep different semantic roles distinct. Wrap Base UI primitives in EMCN when behavior involves floating layers, list navigation, cascading actions or focus management. Main-view and modal dropdowns share the same surface and rows. Preserve the caller’s value, accessible label and form submission through the owner. When editing generated files, change the source contract or compiler and regenerate the affected set.
 5. **Exercise the right states.** Build a matrix of actual themes, relevant content sizes, resting, hover, selected, error and disabled states, keyboard navigation, long data, zoom and widths between Paper examples. The workbench is tooling, not a Phase 2 product screen. Entities, including organizations, workspaces, members and chats, come only through the server fixture gate. Render empty or absent data distinctly. Focusing a control or typing in it preserves its resting chrome; verify there is no focus paint on the control or its wrappers. Test keyboard focus and restoration separately. For cascading menus, test hover travel, arrow keys, Escape one level at a time, and bounds at either edge of the viewport and inside a modal. Client interaction may open, dismiss or change steps; no authentication, persistence or network effects.
 6. **Prove it.** Run the structural audit against real code, regenerate/check relevant files, render the app in a real browser, and compare rendered geometry, type, icon ink/weight and interactions with the product contract and relevant Paper states. Exercise empty, full, stress and flag-off. Retire unused variants and resolve every affected use. Verify isolation and the repository gates. Report covered keys/states separately from visual comparisons; record unresolved differences and durable verification paths. Stop at the authorized phase.
 
@@ -22,11 +22,19 @@ Keep routes thin. Colocate each feature component, its CSS Module and private he
 
 Use `design-system/styles/rhythm.css` for title/detail, list and action gaps (2px), row insets and icon sizing. Separate sibling rows with the sidebar list gap, without divider rules. Borders delineating surfaces and actual data rules, such as chart axes, serve different purposes. Align a leading avatar or glyph with the first text line; center trailing metadata, badges and actions against the whole row. Align action ink with adjacent text by extending the hit area into the margin. Chat thinking, tool labels and prose share that text edge. Composer and message action groups use the same compact gap. Custom calendar, chart and summary rows use the same type, spacing and tooltips.
 
-Home, organization and profile share the sidebar button recipe. Row-size icon controls use its hit area; compact controls change target size while retaining the same glyph scale. Show disclosure chevrons while hovering anywhere on their row. Only composer action buttons are circular; binary switches and segmented switch tracks keep their own capsule geometry.
+Home and Chat share a centered, border-box reading column (maximum width and inline gutter). Put the 24px resting Home inset **inside** the scroll content. The mask belongs to the actual viewport and stays at the window edge. Use the same 24px step between major dashboard/sidebar sections and on both sides of the sidebar footer. Responsive layouts can wrap, collapse or split panels; button height, padding and type stay stable.
 
-Measure the actual scroll viewport with `ScrollArea`, or attach `useScrollEdges` directly to a native or Base UI scroll owner. Use the shared 16px mask only on edges with more content, updating after scroll, resize, input or filtering. Do not substitute permanent top/bottom padding or a fixed gradient for overflow. Keep legitimate insets for form surfaces and native window controls. Exercise empty, overflowing and filtered states, including horizontal truncation.
+Use `ControlRow` for the sidebar, identity controls, panel tabs, recent links, wrapping workspace choices and horizontal destination links. The row owns its 30px height, 8px inset and the placement and hover of a 24px action, including a leading remove button that replaces the glyph. Keep the link, tab or button semantics on the rendered element, with sibling actions outside it. Whole section headers reveal their chevron on hover; identity controls need none. Ordinary text and icon triggers use `Button` / `IconButton`, including Base UI menu triggers. Pass icons and labels through their slots. Binary switches stay pill-shaped; clicking the selected half of a two-choice segment switches to the other half. Native keyboard choice navigation still selects its destination.
 
-Form dialogs use `Modal` or `MultiStepModal`. Pass a title, content, action labels and handlers. The shared owner positions the title at the logical start and supplies a single footer with a quiet Cancel/Back. Product code cannot construct or style a form header, footer or Cancel button. Named search and media dialogs have their own content anatomy inside the shared accessible overlay.
+Use `ActivityRow` for a first-line glyph or avatar, title/detail and centered trailing metadata. Use the chart, calendar, composer or attachment owner when those parts have a different interaction. See the [component ownership map](docs/component-ownership.md) before adding another family.
+
+Measure the actual scroll viewport with `ScrollArea`, or attach `useScrollEdges` directly to a native or Base UI scroll owner. Use the shared 16px mask only on edges with more content, updating after scroll, resize, input, reset or filtering. Insets establish resting layout; they cannot substitute for an edge fade. Scroll the calendar through the entire day and the message list through its full inbox independently of Home. Plain tooltips preview at most three lines; retain the complete accessible text. A structured people popover owns its own layout.
+
+Form dialogs use `Modal` or `MultiStepModal`. Pass a title, content, action labels and handlers. The shared borderless surface positions its title at the logical start and supplies one quiet Cancel/Back. Command search and previews use the same shadow and dismissal layer. Form controls cannot construct or style a form header, footer or Cancel button.
+
+Use `useClipboard` / `CopyButton` for successful copy feedback and `useFeedbackExpiry` for temporary status. Copied indicators and transient notices dwell for four seconds; repeated events restart the timer. Pause an actionable notice during hover or focus and keep its action available in the stack afterward. Icon color changes use `--ui-motion-color` (120ms, zero under reduced motion). Do not put literal timers or CSS durations in product components.
+
+Chat tool summaries use one body-size label with quieter ink. A run divider, expanded tool rail and split-panel edge are structural rules with one shared hairline role. Ordinary list items remain separated by gap alone. Panel tabs, action controls and key values have their own semantics; the same CopyButton copies message text and either tool payload. Composer and jump-to-latest share their border, background and shadow; leave space between them.
 
 Interface strokes have one non-scaling optical weight in CSS pixels. Size glyphs relative to the control’s type, capped at the shared icon size. Paint interface strokes with opaque semantic ink so overlapping segments do not darken; 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.
 
@@ -48,7 +56,7 @@ Interface strokes have one non-scaling optical weight in CSS pixels. Size glyphs
 - 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.
+- Keep data-specific layouts such as calendar time slots, chart marks and tool payloads in their feature owner. Promote a repeated interactive row to EMCN and migrate the original consumer; attachment previews, form controls, menus and data actions each retain their semantic owner.
 
 ## Verification
 
 
@@ -39,9 +39,9 @@ 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 scenario includes long email descriptions, twenty workspaces and sixteen linked conversations. Open Home at normal or narrow width to see clipping, scrolling and the list rhythm. Sidebar groups, command results and other scrollable owners share a directional fade that clears at the boundary. The same rules apply in Electron.
+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 content starts at the same 24px inset used between major sidebar sections. Content scrolls through the viewport edge fade.
 
-Form dialogs receive their title and actions as data. EMCN owns title alignment and the quiet Cancel button, including multi-step forms. The [design contract](AGENTS.md) defines the shared button sizes, switch shapes, row alignment, icon ink and gaps.
+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. Notifications pause under the pointer or keyboard focus; icon color transitions take 120ms and respect reduced motion. The [design contract](AGENTS.md) defines these rules.
 
 ### Keyboard and dropdown behavior
 
 
@@ -4,11 +4,7 @@
   gap: var(--spacing-16);
   min-inline-size: 0;
   padding: var(--spacing-16) var(--spacing-12) var(--spacing-12);
-  border: var(--spacing-stroke-default) solid var(--ui-divider);
   border-radius: var(--radius-composer);
-  box-shadow:
-    inset 0 var(--spacing-1) 0 var(--ui-highlight),
-    0 var(--spacing-2) var(--spacing-6) var(--ui-shadow-control);
 }
 .composer textarea {
   max-block-size: min(24dvh, var(--container-208));
 
@@ -3,7 +3,6 @@
 import { useEffect, useState } from 'react'
 import styles from '@/platform/app/(shell)/_components/composer/composer.module.css'
 import type { ChatAttachment } from '@/platform/app/(shell)/_components/composer/model'
-import { usePlatformTheme } from '@/platform/app/(shell)/_components/session/product-surface'
 import { AttachmentGrid } from '@/platform/design-system/components/attachments/attachment-grid'
 import { useFileUrl } from '@/platform/design-system/components/attachments/use-file-url'
 import { OverlayDialog } from '@/platform/design-system/components/modal/overlay-dialog'
@@ -17,7 +16,6 @@ interface MessageAttachmentsProps {
 export function MessageAttachments({ items, onRemove }: MessageAttachmentsProps) {
   const [expanded, setExpanded] = useState(false)
   const [preview, setPreview] = useState<ChatAttachment | null>(null)
-  const theme = usePlatformTheme()
   if (!items.length) return null
   const batch = items.length > 3
   return (
@@ -45,7 +43,6 @@ export function MessageAttachments({ items, onRemove }: MessageAttachmentsProps)
           previewFile: item.file,
         }))}
         layout={expanded ? 'list' : 'grid'}
-        theme={theme}
         onPreview={(id) => setPreview(items.find((item) => item.id === id) ?? null)}
         onRemove={onRemove}
       />
 
@@ -121,6 +121,7 @@ export function MessageComposer({
     <div
       className={styles.composer}
       data-material='reading'
+      data-elevation='composer'
       onKeyDownCapture={(event) => {
         if (
           slash !== 'typed' ||
 
@@ -27,7 +27,6 @@ export interface ChatTurn {
     steps: {
       id: string
       name: string
-      detail?: string
       time: string
       input: string
       output: string
 
@@ -5,14 +5,11 @@
   );
   padding: var(--ui-popup-padding);
 }
-.inboxHeader,
-.inboxRow {
+.inboxHeader {
   display: flex;
   align-items: center;
   padding: var(--ui-row-block) var(--ui-row-inset);
   gap: var(--ui-row-gap);
-}
-.inboxHeader {
   justify-content: space-between;
 }
 .list {
@@ -22,29 +19,7 @@
   padding: 0;
   margin: 0;
 }
-.inboxRow {
-  inline-size: 100%;
-  text-align: start;
-  border-radius: var(--ui-control-radius);
-  cursor: pointer;
-}
-.inboxRow:hover {
-  background: var(--ui-hover);
-}
-.inboxRow > svg:first-child {
-  align-self: flex-start;
-}
-.copy {
-  display: grid;
-  min-inline-size: 0;
-  flex: 1;
-  gap: var(--ui-stack-gap);
-  overflow-wrap: anywhere;
-}
-.copy > span + span,
 .empty {
   color: var(--ui-secondary);
-}
-.empty {
   padding: var(--spacing-12) var(--ui-row-inset);
 }
@@ -4,7 +4,7 @@ import { type RefObject, useState } from 'react'
 import styles from '@/platform/app/(shell)/_components/inbox/inbox.module.css'
 import type { InboxItem } from '@/platform/app/(shell)/_components/model'
 import { useSidebarLayout } from '@/platform/app/(shell)/_components/sidebar/sidebar-layout'
-import { Icon, SegmentedControl } from '@/platform/design-system/components'
+import { ActivityRow, Icon, SegmentedControl } from '@/platform/design-system/components'
 import { AnchoredPopover } from '@/platform/design-system/components/menu/anchored-popover'
 
 interface InboxProps {
@@ -43,24 +43,17 @@ export function Inbox({ anchor, items, navigate }: InboxProps) {
         </header>
         <ul className={styles.list}>
           {visible.map((item) => (
-            <li key={item.id}>
-              <button
-                type='button'
-                className={styles.inboxRow}
-                onClick={() => {
-                  setRead((previous) => new Set(previous).add(item.id))
-                  setOpen(false)
-                  navigate(item.href)
-                }}
-              >
-                <Icon name={item.icon} />
-                <span className={styles.copy}>
-                  <span data-type='T059'>{item.title}</span>
-                  <span data-type='T050'>{item.description}</span>
-                </span>
-                <Icon name='I032' />
-              </button>
-            </li>
+            <ActivityRow
+              key={item.id}
+              leading={<Icon name={item.icon} />}
+              title={item.title}
+              detail={item.description}
+              onOpen={() => {
+                setRead((previous) => new Set(previous).add(item.id))
+                setOpen(false)
+                navigate(item.href)
+              }}
+            />
           ))}
         </ul>
         {!visible.length && (