# HQ Window 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: Fill the roles your team needs with proactive AI teammates, each with its own computer, identity and role.

Canonical: https://socra.design/landing/visuals/hq-window-scene

## Governing rules

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

Semantic owner: Flash Module `ui-component-family-content` 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.

Socra HQ’s Mac window showing Channels, CoAgents, Cortex, Tasks, Drive or Admin on example data.

Show the real HQ desktop window on a marketing page and switch between its apps as a visitor points at them, with every app composed from the components HQ itself renders.

Status: ready. HqWindowScene lays out HQ’s rail and each app with the same Web UI and Navigation components HQ renders (ProductSidebar, NavItem, SearchBar, AppBar, MessageEntry, ComposerInput, InboxHeader, InboxItem, Item, Avatar, Tabs, ColumnMenu and Button) at HQ’s 1280 by 800 window, scaled to its frame, inert and described in one label. Example data is supplied by its host.

Library: @socra/ui-web-landing

## Properties

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

### Setup

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

### HqWindowScene

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

Socra HQ’s Mac window with its app rail and one app open, composed from the components HQ renders, on example data the host supplies.

| Property | Type or permitted values | Default / omission | Required | Meaning and behavior | Inspector |
| --- | --- | --- | --- | --- | --- |
| `account` | `{ initials: string; }` | Required input | yes | The initials of the signed-in workspace, shown in the rail’s account control. | Direct API |
| `admin` | `HqWindowAdminData` | Required input | yes | The People roster with each person’s handle and role. | Direct API |
| `agents` | `HqWindowAgentsData` | Required input | yes | The CoAgents roster: each AI teammate’s model, computer state and creation date. | Direct API |
| `app` | `"admin"`, `"channels"`, `"agents"`, `"cortex"`, `"tasks"`, `"drive"` | Required input | yes | The app the window shows: channels, agents (CoAgents), cortex, tasks, drive or admin. The rail marks the app as HQ does. The page carries Channels with its first load and the other apps load once the browser is idle, or at once when one is asked for; until an app has loaded, the last one stays on show. A change of app then fades the next in over the last in 160ms, or shows it directly under prefers-reduced-motion. | App |
| `channels` | `HqWindowChannelsData` | Required input | yes | The Channels sidebar, the open channel, its member count, day boundary and messages, with each message’s shared file, reactions and reply count. Messages render as Web UI MessageEntry rows with the author’s title beside the name; a run between ** renders bold and <@id> renders a mention in the accent. Files render as Web UI Attachment, reactions as MessageReactions with the reader’s own selected, replies as MessageReply. A private channel shows a lock, and a direct message given as { member, unread } shows its unread count. | Direct API |
| `cortex` | `HqWindowCortexData` | Required input | yes | The Modules list and the open module’s document. A #channel in a point renders as Cortex links it. Details stay folded to the narrow rail. | Direct API |
| `drive` | `HqWindowDriveData` | Required input | yes | The drive’s items, the open file’s properties and its versions. | Direct API |
| `label` | `string` | Required input | yes | What the scene shows, for assistive technology. Name example data as example data. The scene shows no caption. | Direct API |
| `members` | `readonly HqWindowMember[]` | Required input | yes | Everyone the data names: a stable id, a display name, an optional directory title and an optional portrait. A member without a portrait shows initials, as HQ does. | Direct API |
| `tasks` | `HqWindowTasksData` | Required input | yes | The Active list, the open task and its schedule. | Direct API |

### Behavior and constraints

- HQ_WINDOW_APPS lists the apps in rail order. HqWindowSceneProps, HqWindowApp, HqWindowMember and the per-app data types are public type exports.
- The window is laid out at HQ’s 1280 by 800 logical pixels and scaled to the figure’s width, so a phone shows the same window a desktop does. Controls that size up for touch or for a narrow page keep their desktop metrics inside it.
- The window is inert and hidden from assistive technology; the figure exposes one role="img" described by label. It adds no headings to its page and performs no requests.
- The fixture is a neutral fictional workspace shown by initials. Product hosts pass approved content and portraits.

### Inspector mappings

| Setting | Initial preview value | Consumed code |
| --- | --- | --- |
| App | `channels` | HqWindowScene.app |