# Issue Activity Scene

Agents: start with [Workspace for Agents](https://workspace.socra.com/solutions/agents.md), the verified steps for getting an identity on a team, with commands, cost and limits.

Socra: Give your agents an identity on your team, and they become AI teammates you can delegate to.

Canonical: https://socra.design/landing/visuals/issue-activity-scene

## Governing rules

[Building with Socra components](https://socra.design/agents.md) explains setup, consumption rules and verification.

Semantic owner: Flash Module `ui-component-composition-timeline` in Socra Cortex when available. It supplies current intent and prerequisite rules; the public API below supplies exact code names and values.

Use published property names, not inspector labels. Composition and preview settings are not component props. Public styling escape hatches do not permit product-local presentation overrides.

One Cortex Issue’s activity, each change under the name of who made it.

Show that an AI teammate’s work stays on the record: one Issue exactly as Cortex records it, the assignment, each status change and the comments, every entry under the name of the person or AI teammate who made it. The page passes the entries; the scene owns Cortex’s anatomy and shows nothing Cortex does not.

Status: ready. Shared Issue activity scene (landing.IssueActivityScene — the Web UI Pane, AppBar and Timeline inside the shared HeroMediaFrame: the Issue’s title beside its options action, a TimelineDay boundary, each recorded change as a TimelineEvent with Cortex’s glyph, actor and phrase, and each comment as a TimelineMessage with the author’s initials Avatar over the product’s Markdown; inert, described in one label and captioned beneath) lives in @socra/ui-web-landing.

Library: @socra/ui-web-landing

## Anatomy

- Intent, states, feedback, hierarchy, and access requirements are independent of any renderer.
- Every shared visual relationship resolves from semantic design roles without changing their meaning between platforms.
- Each platform uses its native mechanics and provides live conformance evidence without changing the guideline.

## States

- **Rest:** Shows the stable, enabled component without implied activity.
- **Hover:** Every enabled clickable target shows a pointing hand. Keep the shared visual hover treatment independent, without moving content or changing meaning.
- **Focus:** Shows the shared visible focus treatment without depending on hover.
- **Pressed:** Acknowledges active input immediately and returns cleanly on release.
- **Selected:** Uses a neutral surface plus native selected semantics when selection applies.
- **Disabled:** Remains legible, unavailable, and absent from misleading interaction feedback.
- **Loading:** Preserves context while honestly identifying work that has not completed.
- **Error:** Places the failure and recovery path beside the action or content that failed.

## Motion

Stable state changes respond immediately. Appearance, expansion, and morphing begin at the triggering origin and use an interruptible spring that can retarget from its live position and velocity. When spatial motion is not meaningful, the component changes without decorative travel.

## Usage

- Use the owning platform implementation first. Each renderer improves once and every product on that platform inherits the fix.
- Name the user job before the component. A component earns a place only when it helps the user decide, act, recover, or understand.
- Promote missing behavior into the owning platform domain. Product-local UI creates drift; platform contracts preserve shared meaning and native quality.
- Raise luminance to bring a surface forward. Depth reads as light. A surface that comes toward the reader catches more of it, so a raised panel, a selected tab, a menu, a popover resolves LIGHTER than what it sits on — in dark mode away from the canvas, in light mode toward the white it cannot exceed. The ladder runs page, resting card, elevated, and never doubles back.

## Avoid

- Do not build a product-local replacement. A local implementation splits behavior, access requirements, and future migrations.
- Do not copy theme values. Semantic values are shared system roles and are consumed by meaning.
- Do not add decoration as a substitute for structure. If the hierarchy is weak, fix the hierarchy.
- Do not darken a surface to lift it. Darkening in a dark theme pushes a surface INTO the page — it reads as a hole cut in the canvas rather than a panel resting on it. Sinking a surface to make it stand out is the most common way a dark interface loses its depth.

## Tokens

- `designTokens.color[mode].color.brand.primary`: Primary action role.
- `designTokens.color[mode].color.surface.secondary`: Working surface role.
- `designTokens.color[mode].color.content.primary`: Primary content role.
- `designTokens.spacing.role.contentGap`: Spacing relationship.
- `designTokens.shape.role.control`: Shape relationship.

## Properties

[Complete public API, including inherited properties and event signatures](https://socra.design/landing/visuals/issue-activity-scene/api.md)

### Setup

- Use the host-selected compatible Socra theme provider and published component styles. Keep one compatible provider instance across shared packages.

### IssueActivityScene

Import: `import { IssueActivityScene } from '@socra/ui-web-landing';`

One Cortex Issue’s activity as Cortex records it: the Issue’s title, then each assignment, status change and comment under the name of who made it, labelled by its truth.

| Property | Type or permitted values | Default / omission | Required | Meaning and behavior | Inspector |
| --- | --- | --- | --- | --- | --- |
| `entries` | `readonly IssueActivitySceneEntry[]` | Required input | yes | The activity, oldest first: assignments, status changes and comments, each with its actor or author and its time in Cortex’s shapes (12m, 3h, Yesterday). An assignment reads assigned this to <name> beside Cortex’s user glyph; a status change reads moved this from <status> to <status> beside its arrow glyph, in Cortex’s words (Open, In progress, Done, Canceled); a comment renders the author’s initials Avatar, name and time over the product’s Markdown. A day boundary opens the activity, Today unless the first entry names another, and appears wherever an entry names a new day. | Direct API |
| `label` | `string` | Required input | yes | What the scene is, stated beneath the frame and leading its accessible description, such as An illustrative Issue in Cortex. Required; never present an invented Issue as a recorded one. | Direct API |
| `title` | `string` | Required input | yes | The Issue’s title, as Cortex shows it in the pane header. | Direct API |

### Band

Import: `import { Band } from '@socra/ui-web-landing';`

| Property | Type or permitted values | Default / omission | Required | Meaning and behavior | Inspector |
| --- | --- | --- | --- | --- | --- |
| `ariaLabelledby` | `string \| undefined` | Omitted; no declared default | no | id of the band's heading — keeps the <section> named for screen readers. | Direct API |
| `bleed` | `false`, `true` | `false` | no | Band owns its full width (carousels): children render edge-to-edge with no content column. The child then re-creates the column where it needs one. | Direct API |
| `children` | `ReactNode` | Required input | yes |  | Direct API |
| `colorMode` | `"dark"`, `"ambient"` | `"ambient"` | no | whether the band is fixed dark or follows the ambient page theme. | Direct API |
| `contentMaxWidth` | `string \| undefined` | `"1120px"` | no | content column width; the production landing column. | Direct API |
| `divider` | `false`, `true` | `false` | no | The divider at a standalone band's leading edge. Inside a marketing page the band sequence puts the divider on every boundary, so pages do not set it. | Direct API |
| `id` | `string \| undefined` | Omitted; no declared default | no | anchor id for in-page navigation. | Direct API |
| `spacing` | `"none"`, `"compact"`, `"screen"`, `"regular"` | `"regular"` | no | the band's vertical rhythm. | Direct API |
| `tone` | `"base"`, `"surface"`, `"raised"` | `"base"` | no | A standalone band's surface step. Inside a marketing page the band sequence alternates base and surface by position, so pages do not set it. | Direct API |

### BandIntro

Import: `import { BandIntro } from '@socra/ui-web-landing';`

| Property | Type or permitted values | Default / omission | Required | Meaning and behavior | Inspector |
| --- | --- | --- | --- | --- | --- |
| `align` | `"center"`, `"responsive"` | `"responsive"` | no | whether the column centers at every width or only from \`md\`. | Direct API |
| `children` | `ReactNode` | Omitted; no declared default | no | extra intro content below the description (a second paragraph, a CTA). | Direct API |
| `description` | `string \| undefined` | Omitted; no declared default | no | optional standfirst under the heading (\`subhead\` role). | Direct API |
| `headingScale` | `"section"`, `"statement"` | `'section'` | no | the heading scale. | Direct API |
| `headingTreatment` | `"solid"`, `"gradient"` | `'gradient'` | no | the heading paint treatment. | Direct API |
| `id` | `string \| undefined` | Omitted; no declared default | no | heading id — the target of the owning band's \`ariaLabelledby\`. | Direct API |
| `level` | `"h1"`, `"h2"` | `'h2'` | no | the heading level; the page's first band passes 'h1'. | Direct API |
| `title` | `ReactNode` | Required input | yes | the band heading, rendered through <BandHeader/>. | Direct API |

### Behavior and constraints

- IssueActivitySceneEntry, IssueActivitySceneAssignment, IssueActivitySceneStatusChange, IssueActivitySceneComment, IssueActivitySceneStatus and IssueActivitySceneProps are public type exports.
- The scene shows what Cortex records in an Issue’s activity and nothing else: no description, composer or details rail. A comment shows its author’s initials, never a portrait, as Cortex does. It is inert and described in one role="img" label.
- The fixture is a fictional Issue in Cortex’s own phrases and time shapes. Product hosts pass names and times exactly as Cortex shows them.

### Inspector mappings

| Setting | Initial preview value | Consumed code |
| --- | --- | --- |
| Status | `done` | composition: Selects whether the fictional activity ends with the teammate moving the Issue to Done or stops while it is In progress. It does not supply a status property. |
| Title | `Fix the pricing table` | composition: Passes String(configuration.title ?? 'Fix the pricing table').trim() \|\| that default to IssueActivityScene.title, so a blank inspector value retains a title. The public title itself remains required without a default. |
| Label | `An illustrative Issue in Cortex` | composition: Passes String(configuration.label ?? 'An illustrative Issue in Cortex').trim() \|\| that default to IssueActivityScene.label, so a blank inspector value retains a truthful label. The public label itself remains required without a default. |