@parity/product-lab 0.0.1-placeholder → 0.1.0

package/entrypoints/panel/src/client/view-environment.css

@@ -0,0 +1,193 @@
+/* Environment: overview, chains, processes and configuration. Tokens and components only (tokens.css, components.css, gherkin.css).
+   The redesign (step 6): flat cards with no inner dividers, no grey fills, outline controls and pills, the view title in
+   the display font; every colour from tokens.css. */
+
+#environment-overview { display: flex; flex-direction: column; gap: var(--space-4); }
+.environment-section[hidden] { display: none; }
+.environment-section .ui-section-header { margin-bottom: var(--space-2); }
+
+/* Header: the configured label, chips, Start/Stop. */
+.environment-header { display: flex; flex-direction: column; gap: var(--space-3); }
+/* A narrow panel puts Start/Stop under the name rather than squeezing the name into a column (backlog 158). */
+.environment-header-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
+.environment-heading { flex: 1 1 12rem; min-width: 0; }
+.environment-heading h2 { margin: 4px 0 0; font: var(--weight-strong) var(--text-xl) / 1.25 var(--font-display); letter-spacing: -0.01em; overflow-wrap: break-word; }
+.environment-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.environment-lifecycle-slot { flex-shrink: 0; }
+.environment-lifecycle { display: flex; align-items: center; gap: 6px; }
+.environment-lifecycle .ui-button[hidden] { display: none; }
+
+/* Backlog D1: the Environment view, the panel's whole content while open (the navigator line above the tabs opens it). */
+.environment-view { display: flex; flex-direction: column; gap: var(--space-4); }
+.environment-kept { padding: 0; border: 0; border-radius: var(--radius-pill); background: none; cursor: pointer; }
+.environment-kept:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
+
+/* Fork freshness: one line with a status dot, its age and a "Why?" tooltip. */
+.environment-freshness:empty { display: none; }
+.environment-fork { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-row); background: transparent; font-size: var(--text-sm); white-space: nowrap; }
+.environment-fork.is-warning { border-color: color-mix(in srgb, var(--warning) 50%, transparent); background: transparent; }
+.environment-fork > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: var(--weight-medium); }
+.environment-fork > .ui-chip, .environment-fork > .ui-status { flex-shrink: 0; }
+/* A1: the chain's day line, and its greyed "real time" setting while the config does not set a block time. */
+.environment-day-turn-on { display: block; padding: 4px 12px 0; color: var(--tertiary); font-size: var(--text-xs); }
+.environment-day-turn-on code { font-family: var(--font-mono); white-space: normal; overflow-wrap: anywhere; }
+/* A public network (backlog A6): the same shape as the fork line, always a warning. */
+.environment-public { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--warning) 50%, transparent); border-radius: var(--radius-row); background: transparent; font-size: var(--text-sm); }
+.environment-public > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-medium); }
+.environment-public > .ui-chip, .environment-public > .ui-status { flex-shrink: 0; }
+.environment-why { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; color: var(--secondary); font-size: var(--text-xs); cursor: help; border-radius: var(--radius-pill); }
+.environment-why:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
+
+/* Chains and services: name and endpoint, then finalized and best heads. */
+.chain-table { display: flex; flex-direction: column; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; background: var(--surface); }
+.chain-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(72px, auto) minmax(72px, auto); align-items: center; gap: var(--space-3); min-height: 48px; padding: 6px 10px; border-radius: var(--radius-row); }
+.chain-row:not(.is-head):hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
+.chain-row.is-head { min-height: 26px; padding-top: 6px; padding-bottom: 2px; background: transparent; color: var(--tertiary); font-size: var(--text-2xs); font-weight: var(--weight-strong); letter-spacing: 0.08em; text-transform: uppercase; }
+.chain-row.is-head > span:not(:first-child) { text-align: right; }
+.chain-row.is-service { grid-template-columns: minmax(0, 1fr) auto; }
+.chain-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.chain-name > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.chain-name strong { font-size: var(--text-sm); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
+.chain-endpoint { display: flex; align-items: center; gap: 2px; min-width: 0; color: var(--secondary); }
+.chain-endpoint code { min-width: 0; overflow-wrap: anywhere; font: var(--text-2xs) / 1.4 var(--font-mono); }
+/* The narrowest panel: the numbers take their width, the name the rest, wrapped (backlog 158). */
+@container lab-panel (max-width: 340px) { .chain-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-2); padding-inline: 8px; } }
+.chain-endpoint .ui-icon-button { width: 22px; min-height: 22px; height: 22px; opacity: 0; }
+.chain-row:hover .chain-endpoint .ui-icon-button, .chain-endpoint .ui-icon-button:focus-visible { opacity: 1; }
+.chain-endpoint.is-missing { color: var(--tertiary); font-size: var(--text-2xs); }
+.chain-number { text-align: right; font: var(--weight-medium) var(--text-sm) / 1.2 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.chain-number[data-best] { color: var(--secondary); font-weight: var(--weight-regular); }
+.chain-kind { justify-self: end; }
+
+/* Apps */
+.environment-app-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.environment-app-chips .ui-chip { height: 24px; padding: 0 9px; font-size: var(--text-xs); }
+
+/* Processes: one summary line, then groups of compact rows. */
+.process-summary { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); color: var(--secondary); font-size: var(--text-sm); }
+.process-groups { display: flex; flex-direction: column; }
+.process-group > summary { min-height: 38px; }
+.process-group-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; }
+.process-group .ui-disclosure-body { padding: 0 0 var(--space-2); }
+.process-list { display: flex; flex-direction: column; }
+.process-row { display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 0 8px 0 24px; border-radius: var(--radius-row); font-size: var(--text-xs); }
+.process-row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
+.process-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.process-count { flex-shrink: 0; color: var(--tertiary); font-variant-numeric: tabular-nums; }
+.process-error { display: inline-block; max-width: 180px; overflow: hidden; color: var(--danger); text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
+
+/* Other environments (environment.ts) */
+.environment-list .ui-row { align-items: flex-start; }
+.environment-symbol { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: transparent; color: var(--secondary); }
+.environment-row-title { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
+.environment-digest { min-width: 0; margin-left: 6px; overflow: hidden; color: var(--tertiary); font: var(--text-2xs) / 1.5 var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
+/* An environment's line wraps, never cut with "…" (22's audit, item 10). */
+.environment-summary, .environment-problem { display: block; overflow-wrap: anywhere; white-space: normal; }
+.environment-hint { display: flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 12px; color: var(--secondary); font-size: var(--text-xs); }
+.picker-body .environment-hint { padding: 0 10px; }
+/* One that cannot start is greyed like an unconfigured one; its chip stays readable and its tooltip says why. */
+.picker-option.environment-option.is-unavailable { cursor: help; }
+.picker-option.environment-option.is-unavailable > :not(.ui-chip) { opacity: 0.62; }
+.picker-option.environment-option small { display: block; -webkit-line-clamp: unset; overflow: visible; overflow-wrap: anywhere; }
+.environment-problem { color: var(--danger); }
+
+/* Advanced: the resolved configuration, versions, notes, provenance and Reset. */
+.environment-advanced { margin-top: var(--space-5); border: 0; }
+.environment-advanced > .ui-disclosure-body { display: flex; flex-direction: column; gap: var(--space-4); }
+.environment-advanced #environment-tab { display: flex; flex-direction: column; gap: var(--space-4); }
+.environment-advanced h4 { margin: 0 0 var(--space-2); color: var(--tertiary); font-size: var(--text-2xs); font-weight: var(--weight-strong); letter-spacing: 0.08em; text-transform: uppercase; }
+.environment-current { display: flex; flex-direction: column; gap: var(--space-3); }
+.environment-current .ui-kv, .environment-versions .ui-kv { font-size: var(--text-xs); }
+.environment-current .ui-kv code, .environment-versions .ui-kv code { font: var(--text-2xs) / 1.5 var(--font-mono); }
+.environment-path { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; min-width: 0; }
+.environment-path code { min-width: 0; overflow-wrap: anywhere; }
+.environment-path code.environment-lock { flex-shrink: 0; white-space: nowrap; }
+.environment-path .ui-icon-button { width: 22px; min-height: 22px; height: 22px; flex-shrink: 0; }
+.environment-provenance .ui-kv, .environment-notes .ui-kv { font-size: var(--text-xs); }
+.environment-provenance .ui-kv code { font: var(--text-2xs) / 1.5 var(--font-mono); }
+.environment-danger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid color-mix(in srgb, var(--danger) 50%, transparent); border-radius: var(--radius-row); background: transparent; }
+.environment-danger strong { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); }
+.environment-danger .ui-button { flex-shrink: 0; }
+
+/* Backlog D2: the section's facts at a narrow panel ("5 notes" read "5 / not / es" in a one-letter column, over the
+   Reset row). A value keeps a minimum width and wraps between words; at a narrow width it goes under its label; Reset
+   takes its own line, its button under it. */
+#environment-section .ui-kv { grid-template-columns: max-content minmax(8ch, 1fr); }
+#environment-section .ui-kv dd { overflow-wrap: break-word; }
+.environment-danger { flex-wrap: wrap; }
+@container lab-panel (max-width: 340px) {
+  #environment-section .ui-kv { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
+  #environment-section .ui-kv dd { margin-bottom: 6px; }
+  .environment-danger { flex-direction: column; align-items: flex-start; }
+}
+#environment-footer:empty { display: none; }
+
+/* The frame while the environment is stopped or starting (environment-lifecycle.ts). */
+#environment-offline { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-tile); background: var(--surface); }
+#environment-offline[hidden] { display: none; }
+
+/* Chain observations (activity.ts), where a view shows them. */
+#chain-activity { display: grid; gap: 6px; margin-top: var(--space-2); }
+.chain-card { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
+.chain-card h3 { margin: 0 0 2px; font-size: var(--text-sm); font-weight: var(--weight-medium); text-transform: capitalize; }
+.chain-card p { margin: 2px 0; font-size: var(--text-xs); }
+.chain-card .chain-heights { font-size: var(--text-md) !important; font-variant-numeric: tabular-nums; }
+.chain-card[data-observation="stale"], .chain-card[data-observation="unavailable"] { border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
+
+/* Start phases while an environment starts or switches (operation-phases.ts): a vertical checklist. */
+.operation-phases { display: flex; flex-direction: column; gap: 2px; margin: var(--space-2) 0 0; padding: 0; list-style: none; font-size: var(--text-xs); }
+.operation-phases[hidden] { display: none; }
+.operation-phases li { display: grid; grid-template-columns: 18px minmax(0, max-content) minmax(0, 1fr); align-items: center; gap: var(--space-2); min-height: 24px; color: var(--secondary); animation: ui-fade-in var(--duration) var(--ease); }
+.operation-phases .phase-mark { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-strong); color: var(--tertiary); }
+.operation-phases .phase-title { color: var(--ink); font-weight: var(--weight-medium); white-space: nowrap; }
+.operation-phases .phase-detail { min-width: 0; overflow: hidden; color: var(--tertiary); text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.operation-phases li[data-state="active"] .phase-mark { border-color: transparent; }
+.operation-phases li[data-state="active"] .phase-title { font-weight: var(--weight-strong); }
+.operation-phases li[data-state="active"] .phase-detail { color: var(--secondary); }
+.operation-phases li[data-state="done"] .phase-mark, .operation-phases li[data-state="cached"] .phase-mark { border-color: var(--success); background: var(--success); color: var(--accent-ink); }
+.operation-phases li[data-state="cached"] .phase-mark { background: var(--success-soft); color: var(--success); }
+.operation-phases li[data-state="skipped"] .phase-mark { border-style: dashed; }
+.operation-phases li[data-state="failed"] .phase-mark { border-color: var(--danger); background: var(--danger); color: var(--accent-ink); }
+.operation-phases li[data-state="failed"] .phase-title, .operation-phases li[data-state="failed"] .phase-detail { color: var(--danger); }
+.operation-phases li[data-state="pending"] .phase-title { color: var(--tertiary); font-weight: var(--weight-regular); }
+
+/* Fixtures under each environment in the environment picker (fixtures.ts, 30 September 2026). */
+.fixture-group { display: grid; gap: 2px; margin: 0 0 6px 26px; }
+.fixture-group .fixture-heading { margin: 2px 0 0; }
+.fixture-row { display: grid; gap: 4px; }
+.picker-option.fixture-option { min-height: 38px; }
+.picker-option.fixture-option[aria-disabled="true"] { cursor: default; }
+.picker-option.fixture-option small { -webkit-line-clamp: 1; }
+.fixture-reasons { margin: 0 10px 2px 36px; padding: 0 0 0 14px; color: var(--secondary); font-size: var(--text-xs); line-height: 1.4; list-style: disc; }
+.fixture-reasons li { margin: 0; padding: 0; }
+.picker-option.fixture-save-toggle small { -webkit-line-clamp: 1; }
+.fixture-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 10px 4px 36px; }
+.fixture-confirm-text { flex-basis: 100%; font-size: var(--text-xs); }
+.fixture-note { margin: 2px 10px 4px 36px; color: var(--secondary); font-size: var(--text-xs); overflow-wrap: anywhere; }
+.fixture-note.is-danger { color: var(--danger); }
+.fixture-save { display: grid; gap: 4px; padding-top: 4px; margin-top: 4px; }
+.fixture-save-form { display: flex; gap: 6px; margin: 0 10px 4px 36px; }
+.fixture-save-form[hidden] { display: none; }
+.fixture-save-form .fixture-name { flex: 1; min-width: 0; height: 32px; font: inherit; font-size: var(--text-sm); padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-control); background: transparent; color: inherit; }
+.fixture-save-form .fixture-name:focus-visible { outline: 0; border-color: var(--accent); box-shadow: var(--focus-ring); }
+
+/* The lab's own RPC per chain under an environment's row (environment.ts, 3 October 2026). */
+.environment-rpc { margin: 0 0 var(--space-2) 40px; font-size: var(--text-xs); }
+.environment-rpc-summary { display: inline-flex; align-items: center; gap: 6px; }
+.environment-rpc .ui-disclosure-body { display: flex; flex-direction: column; gap: var(--space-2); }
+.environment-rpc-field { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; column-gap: var(--space-2); row-gap: 2px; }
+.environment-rpc-chain { color: var(--secondary); font-family: var(--font-mono); }
+.environment-rpc-field small { grid-column: 2; color: var(--tertiary); }
+.environment-rpc-input { min-width: 0; height: 30px; font: var(--text-xs) / 1.5 var(--font-mono); padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-control); background: transparent; color: inherit; }
+.environment-rpc-input:focus-visible { outline: 0; border-color: var(--accent); box-shadow: var(--focus-ring); }
+.environment-rpc-note { color: var(--secondary); }
+.environment-rpc-actions { display: flex; gap: var(--space-2); }
+.environment-rpc-error { margin: 0; color: var(--danger); }
+.environment-day-kept { display: block; padding: 4px 12px 0; color: var(--warning); font-size: var(--text-xs); }
+/* What this config leaves off (an environment, a live network, writing on one, an unset person): greyed with the line that adds it, never hidden. */
+.environment-off-heading { margin: var(--space-3) 0 var(--space-1); color: var(--secondary); font-size: var(--text-xs); font-weight: var(--weight-strong); letter-spacing: 0.06em; text-transform: uppercase; }
+.environment-off { display: flex; align-items: flex-start; gap: 10px; padding: 7px 10px; min-width: 0; cursor: help; opacity: 0.62; }
+.environment-off:hover { opacity: 0.85; }
+.environment-off > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.environment-off small { color: var(--secondary); overflow-wrap: anywhere; }
+.environment-off code { white-space: normal; overflow-wrap: anywhere; }

package/entrypoints/panel/src/client/view-environment.d.ts

@@ -0,0 +1,42 @@
+import type { LabSnapshot } from "@parity/product-lab/ports/driving";
+import { type Tone } from "./ui.js";
+import { type LabView, type ShellContext } from "./shell-kit.js";
+type Chain = LabSnapshot["activity"]["chains"][number];
+type Service = NonNullable<LabSnapshot["activity"]["services"]>[number];
+type Process = NonNullable<LabSnapshot["workspace"]>["processes"][number];
+export declare function chainHealth(chain: Chain | undefined, now: number): {
+    tone: Tone;
+    label: string;
+};
+/**
+ * A service's reachability from the lab's latest probe (server-side, like the chains' heads): it answers (any HTTP
+ * status; a 5xx is a warning), it does not answer, or it is not checked (not an HTTP endpoint), with why.
+ */
+export declare function serviceHealth(service: Service | undefined): {
+    tone: Tone;
+    label: string;
+    word: string;
+    unchecked?: string;
+};
+/**
+ * The fork's freshness, read from the environment's notice ("Fork: 3 days old (bitten …, People #980434, 119719 blocks
+ * behind live) · runtimes match live …"): one line, "Local fork of People · block #980,434", its age, and why.
+ */
+export declare function forkFreshness(notices: readonly string[], network?: string): {
+    notice: string;
+    newer: string | undefined;
+    why: string;
+    tone: Tone;
+    line: string;
+    age: string | undefined;
+    behind: string | undefined;
+} | undefined;
+/** A workspace process's group and its readable name. */
+export declare function processGroup(process: Process, actors: LabSnapshot["actors"]): {
+    group: string;
+    label: string;
+};
+export declare function createEnvironmentView(ctx: ShellContext): LabView;
+/** The banner of an environment on a public network (backlog A6): nothing resets; read only, or writes through existing identities. */
+export declare function publicTargetNotice(target: NonNullable<LabSnapshot["public"]>): HTMLDivElement;
+export {};

package/entrypoints/panel/src/client/view-environment.js

@@ -0,0 +1,240 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+import { age, button, chip, copyText, disclosure, h, icon, infoTip, keyValues, on, patchChildren, plural, sectionHeader, statusDot } from "./ui.js";
+import { keptChains, keptRetention, provenanceFacts, retentionWords } from "./environment.js";
+import { findById } from "./lab-document.js";
+import { byId } from "./shell-kit.js";
+import { chainConsole } from "./chain-console.js";
+import { CHAIN_PACES } from "@parity/product-lab/domain/lab/chain-pace";
+import { chainDayWords } from "./chain-day.js";
+function chainLabel(label, id) {
+    const name = label && label !== id ? label : id;
+    return name === id ? id.charAt(0).toUpperCase() + id.slice(1).replace(/[-_]/g, " ") : name;
+}
+export function chainHealth(chain, now) {
+    if (!chain)
+        return { tone: "neutral", label: "not observed" };
+    if (chain.error)
+        return { tone: "danger", label: `read error: ${chain.error}` };
+    if (chain.lastSuccessAt !== undefined && now - chain.lastSuccessAt > 30_000)
+        return { tone: "warning", label: `no successful read for ${age(now - chain.lastSuccessAt)}` };
+    return { tone: "success", label: chain.finalizedChangedAt ? `finalized ${age(now - chain.finalizedChangedAt)} ago` : "observed" };
+}
+export function serviceHealth(service) {
+    if (!service)
+        return { tone: "neutral", label: "checking…", word: "checking…" };
+    if (service.unchecked)
+        return { tone: "neutral", label: `not checked: ${service.unchecked}`, word: "not checked", unchecked: service.unchecked };
+    const took = service.ms !== undefined ? ` in ${service.ms} ms` : "";
+    if (service.error !== undefined)
+        return { tone: "danger", label: `not answering: ${service.error}`, word: "not answering" };
+    if (service.status !== undefined && service.status >= 500)
+        return { tone: "warning", label: `answers with an error: HTTP ${service.status}${took}`, word: `HTTP ${service.status}` };
+    return { tone: "success", label: `answers: HTTP ${service.status}${took}`, word: "answers" };
+}
+export function forkFreshness(notices, network) {
+    const notice = notices.find(line => /^Fork: /.test(line));
+    if (!notice)
+        return undefined;
+    const old = notice.match(/^Fork: ([^(·]+?) old\b/)?.[1]?.trim();
+    const behind = Number(notice.match(/(\d[\d,]*) blocks behind/)?.[1]?.replace(/,/g, "") ?? NaN);
+    const origin = notice.match(/, ([A-Z][\w -]*?) #(\d+)/);
+    const days = Number(old?.match(/(\d+) days?/)?.[1] ?? 0);
+    const newer = notices.find(line => /newer published state/i.test(line));
+    const why = [notice.replace(/^Fork: /, "Fork "), newer].filter(Boolean).join("\n\n");
+    return {
+        notice, newer, why,
+        tone: (days >= 1 || behind > 14_400 ? "warning" : "success"),
+        line: [`Local fork of ${network ?? origin?.[1] ?? "the network"}`, origin ? `block #${Number(origin[2]).toLocaleString()}` : ""].filter(Boolean).join(" · "),
+        age: old ? `${old} old` : undefined,
+        behind: Number.isFinite(behind) ? `${behind.toLocaleString()} behind` : undefined,
+    };
+}
+export function processGroup(process, actors) {
+    const actor = actors.find(item => process.id.startsWith(item.id));
+    if (actor)
+        return { group: "Identity sessions", label: `${actor.name} · ${process.id.slice(actor.id.length).replace(/^[-_]/, "") || "session"}` };
+    const label = process.id.replace(/^network-/, "");
+    if (/bootstrap|prefetch|prepare|download/i.test(process.id))
+        return { group: "Setup", label };
+    if (/collator/i.test(process.id))
+        return { group: "Collators", label: label.replace(/^collator-?/i, "Collator ") };
+    if (/^(alice|bob|charlie|dave|eve|ferdie|relay|validator|node)/i.test(label))
+        return { group: "Nodes", label };
+    return { group: "Services", label };
+}
+const GROUPS = ["Setup", "Nodes", "Collators", "Services", "Identity sessions"];
+const processTone = (status) => status === "running" ? "success" : status === "failed" ? "danger" : "neutral";
+export function createEnvironmentView(ctx) {
+    ctx.stored.append(byId("workspace-management"), byId("chain-activity").closest("details"), byId("provider-notices"), byId("provenance"));
+    byId("lanes").removeAttribute("open");
+    const heading = h("div", { class: "environment-heading" });
+    const chips = h("div", { class: "environment-chips" });
+    const slot = h("div", { class: "environment-lifecycle-slot", id: "environment-lifecycle-slot" });
+    const header = h("section", { class: "ui-card environment-header", "aria-label": "Environment" }, h("div", { class: "environment-header-top" }, heading, slot), chips);
+    const freshness = h("div", { class: "environment-freshness" });
+    const publicNotice = h("div", { class: "environment-public-slot" });
+    const chains = h("section", { id: "environment-chains", class: "environment-section environment-chains", "aria-label": "Chains and services" });
+    const apps = h("section", { class: "environment-section environment-apps", "aria-label": "Apps" });
+    const processes = h("section", { class: "environment-section environment-processes", "aria-label": "Workspace processes" });
+    const others = h("div", { id: "environment-others", class: "environment-section" });
+    const printed = chainConsole();
+    const overview = h("div", { id: "environment-overview" }, publicNotice, freshness, chains, printed.node, apps, others, processes);
+    const advanced = byId("environment-panel");
+    ctx.pane("environment").append(h("section", { id: "environment-section", class: "environment-view", "aria-label": "Environment" }, header, overview, advanced));
+    advanced.className = "ui-disclosure environment-advanced";
+    advanced.querySelector("summary").replaceChildren(icon("right", 14), h("span", {}, "Advanced"));
+    const notes = h("div", { class: "environment-notes" });
+    const provenance = h("section", { class: "environment-provenance", "aria-label": "Provenance" });
+    const reset = byId("reset");
+    reset.className = "ui-button ui-button--danger ui-button--sm";
+    reset.replaceChildren(icon("refresh", 14), h("span", {}, "Reset environment"));
+    ctx.stored.append(byId("ownership"));
+    const danger = h("div", { class: "environment-danger" }, h("strong", {}, "Reset"), reset);
+    const body = h("div", { class: "ui-disclosure-body" }, byId("environment-tab"), provenance, notes, danger);
+    advanced.querySelector(".actions")?.remove();
+    advanced.append(body);
+    const open = new Set();
+    const keys = {};
+    const changed = (name, value) => { const next = JSON.stringify(value); if (keys[name] === next)
+        return false; keys[name] = next; return true; };
+    return {
+        render(value) {
+            const registry = value.registry;
+            const label = value.environment;
+            const local = registry?.environment.offer.local;
+            const state = document.body.dataset.environmentState ?? "running";
+            const healths = value.activity.chains.map(chain => chainHealth(chain, value.serverTime));
+            const worst = healths.some(item => item.tone === "danger") ? "danger" : healths.some(item => item.tone === "warning") ? "warning" : healths.length ? "success" : undefined;
+            const running = value.selectedOption;
+            const way = running ? value.environments.find(item => item.id === value.selectedEnvironment)?.options?.find(option => option.id === running.option) : undefined;
+            if (changed("header", [label, local, value.retention, value.keepBetweenStarts ?? null, worst, state, registry?.environment.id, running])) {
+                patchChildren(heading, [h("span", { class: "ui-eyebrow" }, local === false ? "Public environment" : "Local environment"), h("h2", {}, label)]);
+                const wayChip = way && running ? chip(way.label, { tone: "accent", title: running.why }) : undefined;
+                if (wayChip && way)
+                    wayChip.dataset.option = way.id;
+                patchChildren(chips, [
+                    ...(wayChip ? [wayChip] : []),
+                    ...keepChips(value),
+                    ...(state === "running" && worst && worst !== "success" ? [chip(worst === "warning" ? "stale" : "read error", { tone: worst, dot: true, title: healths.map((item, index) => `${value.activity.chains[index].label}: ${item.label}`).join("\n") })] : [])
+                ]);
+            }
+            if (changed("public", value.public ?? null)) {
+                const target = value.public;
+                patchChildren(publicNotice, [...(target ? [publicTargetNotice(target)] : [])]);
+            }
+            const fresh = forkFreshness(value.notices, registry?.environment.topology?.network);
+            const day = chainDayWords(value.chainDays, value.serverTime, !!value.keepBetweenStarts?.running.keep);
+            if (changed("freshness", [fresh ?? null, day ?? null])) {
+                patchChildren(freshness, [...(fresh ? [h("div", { class: `environment-fork is-${fresh.tone}`, role: "status" }, statusDot(fresh.tone, false, fresh.tone === "warning" ? "stale fork" : "fresh fork"), h("strong", { title: fresh.line }, fresh.line), fresh.age ? chip(fresh.age, { tone: fresh.tone === "warning" ? "warning" : "neutral" }) : null, infoTip("Why?", [fresh.behind ? `${fresh.behind} live.` : "", fresh.why].filter(Boolean).join("\n\n"), { className: "environment-why" }))] : []),
+                    ...(day ? [h("div", { class: `environment-fork environment-day is-${day.tone}`, role: "status", "data-chain-day": day.tone }, statusDot(day.tone === "neutral" ? "info" : day.tone, false, day.line), h("strong", { title: day.line }, day.line), infoTip("Why?", [day.why, day.turnOn ? `For a chain that never goes stale: ${day.turnOn}.` : ""].filter(Boolean).join("\n\n"), { id: "chain-day-why", className: "environment-why" })),
+                        ...(day.kept ? [h("small", { class: "environment-day-kept", "data-chain-day-kept": "true" }, day.kept)] : []),
+                        ...(day.turnOn ? [h("small", { class: "environment-turn-on environment-day-turn-on", title: `Not set in this lab's config. ${CHAIN_PACES["real-time"].label}: ${CHAIN_PACES["real-time"].words}` }, "Real time not set · add ", h("code", {}, 'pace: "real-time"'), " (stable, never goes stale; runs are slower)")] : [])] : [])]);
+            }
+            const endpoints = registry?.environment.endpoints ?? {};
+            const chainIds = [...new Set([...(registry?.environment.offer.chains ?? []), ...value.activity.chains.map(chain => chain.id)])];
+            const services = Object.keys(endpoints).filter(id => !chainIds.includes(id));
+            const probes = value.activity.services ?? [];
+            if (changed("chains", [chainIds, services, endpoints, value.activity.chains.map(chain => [chain.id, chain.best?.number, chain.finalized?.number, chain.error, chain.lastSuccessAt && value.serverTime - chain.lastSuccessAt > 30_000]), probes.map(item => [item.id, item.status, item.error, item.unchecked]), state])) {
+                const rows = chainIds.map(id => {
+                    const chain = value.activity.chains.find(item => item.id === id);
+                    const health = state === "running" ? chainHealth(chain, value.serverTime) : { tone: "neutral", label: "environment stopped" };
+                    const number = (block) => block ? `#${block.number.toLocaleString()}` : "—";
+                    const ahead = chain?.best && chain.finalized ? chain.best.number - chain.finalized.number : undefined;
+                    return h("div", { class: "chain-row", role: "row", "data-chain": id, "data-key": `chain:${id}`, "data-health": health.tone }, h("span", { class: "chain-name", role: "cell" }, statusDot(health.tone, false, health.label), h("span", {}, h("strong", {}, chainLabel(chain?.label, id)), endpointLine(endpoints[id]))), h("span", { class: "chain-number", role: "cell", "data-finalized": String(chain?.finalized?.number ?? "") }, number(chain?.finalized)), h("span", { class: "chain-number", role: "cell", "data-best": String(chain?.best?.number ?? ""), title: ahead !== undefined ? `${plural(ahead, "block")} ahead of finalized` : undefined }, number(chain?.best)));
+                });
+                const serviceRows = services.map(id => {
+                    const health = state === "running" ? serviceHealth(probes.find(item => item.id === id)) : { tone: "neutral", label: "environment stopped", word: "stopped", unchecked: undefined };
+                    return h("div", { class: "chain-row is-service", role: "row", "data-service": id, "data-key": `service:${id}`, "data-health": health.unchecked ? "unchecked" : health.tone, title: health.label }, h("span", { class: "chain-name", role: "cell" }, statusDot(health.tone, false, health.label), h("span", {}, h("strong", {}, id), endpointLine(endpoints[id]))), 
+                    h("span", { class: "chain-kind", role: "cell" }, chip(health.word, { title: health.label })));
+                });
+                patchChildren(chains, [
+                    sectionHeader("Chains", { count: chainIds.length }),
+                    h("div", { class: "chain-table", role: "table", "aria-label": "Chains" }, h("div", { class: "chain-row is-head", role: "row" }, h("span", { role: "columnheader" }, "Chain"), h("span", { role: "columnheader" }, "Finalized"), h("span", { role: "columnheader" }, "Best")), ...rows, ...(serviceRows.length ? [h("div", { class: "chain-row is-head", role: "row" }, h("span", { role: "columnheader" }, "Services"))] : []), ...serviceRows)
+                ]);
+            }
+            if (changed("apps", registry?.apps ?? [])) {
+                const list = registry?.apps ?? [];
+                apps.hidden = !list.length;
+                patchChildren(apps, [sectionHeader("Apps", { count: list.length }), h("div", { class: "environment-app-chips" }, ...list.map(app => {
+                        const node = chip(app.label ?? app.app, { icon: "grid", tone: app.available ? "neutral" : "danger", title: app.available ? `${app.app}${app.integrations?.length ? ` · integrations ${app.integrations.join(", ")}` : ""}` : `unavailable: ${app.reason}` });
+                        node.dataset.app = app.app;
+                        return node;
+                    }))]);
+            }
+            const workspace = value.workspace;
+            const legacy = (id) => byId(id);
+            if (changed("processes", [workspace, value.actors.map(actor => [actor.id, actor.name]), legacy("start-workspace").disabled, legacy("stop-workspace").disabled])) {
+                processes.hidden = !workspace;
+                if (workspace) {
+                    const counts = { running: 0, stopped: 0, failed: 0 };
+                    for (const process of workspace.processes)
+                        counts[process.status]++;
+                    const summary = [`${counts.running} running`, counts.stopped ? `${counts.stopped} stopped` : "", counts.failed ? `${counts.failed} failed` : ""].filter(Boolean).join(" · ");
+                    const running = workspace.status === "running";
+                    const toggle = running
+                        ? button("Stop workspace", { size: "sm", icon: "stop", disabled: legacy("stop-workspace").disabled, title: "Stops its processes; chain, backend and identity data stay", onClick: () => legacy("stop-workspace").click() })
+                        : button("Start workspace", { size: "sm", icon: "play", disabled: legacy("start-workspace").disabled, title: "Starts its processes from the saved state", onClick: () => legacy("start-workspace").click() });
+                    const statusTone = workspace.status === "running" ? "success" : workspace.status === "failed" ? "danger" : workspace.status === "starting" ? "accent" : "neutral";
+                    const grouped = new Map();
+                    for (const process of workspace.processes) {
+                        const { group, label } = processGroup(process, value.actors);
+                        grouped.set(group, [...(grouped.get(group) ?? []), { process, label }]);
+                    }
+                    const groups = [...grouped].sort(([a], [b]) => GROUPS.indexOf(a) - GROUPS.indexOf(b)).map(([group, items]) => {
+                        const up = items.filter(item => item.process.status === "running").length;
+                        const failed = items.some(item => item.process.status === "failed");
+                        const summaryNode = h("span", { class: "process-group-summary" }, h("span", {}, group), chip(`${up}/${items.length} running`, { tone: failed ? "danger" : up === items.length ? "success" : "neutral" }));
+                        const node = disclosure(summaryNode, [h("div", { class: "process-list" }, ...items.map(({ process, label }) => h("div", { class: "process-row", "data-process": process.id, "data-status": process.status, title: process.error ? `${process.id}: ${process.error}` : process.id }, statusDot(processTone(process.status), false, process.status), h("span", { class: "process-name" }, label), h("span", { class: "process-count" }, process.error ? h("span", { class: "process-error" }, process.error) : plural(process.processes, "process", "processes")))))], { open: open.has(group), class: "process-group" });
+                        node.dataset.group = group;
+                        node.dataset.key = `group:${group}`;
+                        on(node, "toggle", (event) => { if (event.currentTarget.open)
+                            open.add(group);
+                        else
+                            open.delete(group); });
+                        return node;
+                    });
+                    patchChildren(processes, [
+                        sectionHeader("Processes", { count: workspace.processes.length, actions: [toggle] }),
+                        h("p", { class: "process-summary" }, chip(workspace.status, { tone: statusTone, dot: workspace.status !== "stopped" }), h("span", {}, summary)),
+                        h("div", { class: "process-groups" }, ...groups)
+                    ]);
+                }
+            }
+            if (changed("provenance", value.provenance))
+                patchChildren(provenance, [h("h4", {}, "Provenance"), provenanceFacts(value.provenance)]);
+            const rest = value.notices.filter(line => line !== fresh?.notice && line !== fresh?.newer && !(value.public && PUBLIC_NOTICE.test(line)));
+            if (changed("notes", rest))
+                patchChildren(notes, [...(rest.length ? [keyValues([["notes", infoTip(rest.join(" "), rest.join("\n\n"), { className: "environment-why", size: 14, shown: plural(rest.length, "note") })]])] : [])]);
+            danger.querySelector("strong").title = byId("ownership").textContent ?? "";
+        },
+    };
+}
+function keepChips(value) {
+    const kept = keptChains(value.keepBetweenStarts);
+    if (kept) {
+        const node = h("button", { type: "button", class: "environment-kept", "data-kept": "true", title: keptRetention(value.keepBetweenStarts, kept).reason, onclick: () => findById("environment-picker")?.click() }, chip("kept between starts", { tone: "success", icon: "check" }));
+        return [node];
+    }
+    if (value.retention.retention === "unknown")
+        return [];
+    const node = chip(retentionWords(value.retention), { tone: value.retention.retention === "disposable" ? "warning" : "neutral", title: value.retention.reason.replace(/\s\/\S+/g, "") });
+    node.dataset.kept = "false";
+    return [node];
+}
+const PUBLIC_NOTICE = /^(?:\S+|This environment) is a public network/;
+export function publicTargetNotice(target) {
+    const network = target.network ?? "this public network";
+    const readOnly = (target.access ?? "read-only") === "read-only";
+    const line = readOnly ? `Read only: the lab writes nothing on ${network}, creates no identity and resets nothing.` : `Nothing resets on ${network}: every value a run writes stays, so each carries the run id.`;
+    const why = [
+        target.reason,
+        readOnly ? "" : "Identities are pre-onboarded accounts; the lab creates, funds and deletes none.",
+        target.finalityTimeoutMs ? `Timeouts are sized for real finality: up to ${Math.round(target.finalityTimeoutMs / 1000)} s per transaction.` : "",
+    ].filter(Boolean).join("\n\n");
+    const node = h("div", { class: "environment-public is-warning", role: "status", "data-access": readOnly ? "read-only" : "read-write" }, statusDot("warning", false, "public network"), h("strong", { title: line }, line), chip(readOnly ? "read only" : "writes stay", { tone: "warning" }), infoTip("Why?", why, { className: "environment-why" }));
+    return node;
+}
+function endpointLine(url) {
+    return url ? h("span", { class: "chain-endpoint" }, h("code", { title: url }, url), copyText(url, "Copy the endpoint")) : h("span", { class: "chain-endpoint is-missing" }, "no endpoint");
+}

package/entrypoints/panel/src/client/view-identities.css

@@ -0,0 +1,100 @@
+/* Identities, the identity picker and the app tiles' captions. Tokens and components only (tokens.css, components.css, gherkin.css).
+   The redesign (step 6): rows and their selected outline come from components.css (.ui-row); a 16 px row menu. */
+
+/* The view mode: one segmented control at the top of the section. */
+.identities-toolbar { display: flex; align-items: center; margin: 0 0 var(--space-3); }
+.identities-toolbar .ui-segmented { width: 100%; }
+.identities-toolbar .ui-segmented button { flex: 1; justify-content: center; }
+.identity-reserve { margin-right: auto; white-space: nowrap; }
+.identity-reserve[hidden] { display: none; }
+
+/* One row per identity: avatar, name, username, status chips; Stop/Start, Delete and More on the right. */
+.identity-list { gap: 2px; }
+.identity-row { padding: 10px 8px 10px 12px; }
+.identity-row .identity-name strong { font-weight: var(--weight-strong); }
+/* The selected identity: its avatar in its own tone inside an accent ring, the language of the selected tile's glow. */
+.identity-row .ui-avatar { transition: box-shadow var(--duration) var(--ease); }
+.identity-row.is-selected .ui-avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
+.identity-row .identity-error { display: block; overflow: hidden; color: var(--danger); text-overflow: ellipsis; white-space: nowrap; }
+.identity-row .ui-row-trailing { gap: 2px; }
+/* Narrow: the words take the row's width, the actions a line of their own under them (view-identities.ts, NARROW_ROW_PX). */
+.identity-list[data-narrow="true"] .identity-row { flex-wrap: wrap; align-items: flex-start; row-gap: 4px; }
+.identity-list[data-narrow="true"] .identity-row .ui-row-body { flex: 1 1 0; }
+.identity-list[data-narrow="true"] .identity-row .ui-row-trailing { flex: 1 0 100%; justify-content: flex-end; }
+.identity-row .ui-row-trailing .ui-icon-button { opacity: 0.6; }
+.identity-row:hover .ui-row-trailing .ui-icon-button, .identity-row.is-selected .ui-row-trailing .ui-icon-button, .identity-row .ui-row-trailing .ui-icon-button:focus-visible { opacity: 1; }
+.identity-row .ui-row-trailing .ui-icon-button:disabled { opacity: 0.35; }
+.identity-row .ui-row-trailing .identity-delete { border-color: transparent; background: transparent; color: var(--secondary); }
+.identity-row .ui-row-trailing .identity-delete:not(:disabled):hover { border-color: color-mix(in srgb, var(--danger) 50%, transparent); background: transparent; color: var(--danger); }
+.identity-status.ui-chip--accent .ui-dot, .ui-chip.is-pulsing .ui-dot { animation: identity-pulse 1.4s var(--ease) infinite; }
+@keyframes identity-pulse { 50% { opacity: 0.35; } }
+@media (prefers-reduced-motion: reduce) { .identity-status.ui-chip--accent .ui-dot, .ui-chip.is-pulsing .ui-dot { animation: none; } }
+
+/* A row's More menu. */
+.identity-menu { position: absolute; z-index: 5; top: calc(100% - 6px); right: 8px; display: flex; flex-direction: column; min-width: 200px; padding: 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-lg); animation: ui-rise var(--duration) var(--ease); }
+.identity-menu button { justify-content: flex-start; min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); font-size: var(--text-sm); font-weight: var(--weight-regular); }
+.identity-menu button:hover:not(:disabled), .identity-menu button:focus-visible { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); outline: 0; }
+
+/* The footer: New identity, and ▾ for its host when the lab declares several (a split button). */
+#identities-footer .ui-button { gap: 6px; }
+.new-identity-split { position: relative; display: inline-flex; }
+.new-identity-split.is-split > #new-identity { border-top-right-radius: 0; border-bottom-right-radius: 0; }
+/* ▾: a hit area of at least 32 px, split from New identity by a hairline. */
+.new-identity-split > .new-identity-toggle { min-width: 32px; padding: 0 9px; border-left-color: color-mix(in srgb, var(--accent-ink) 30%, transparent); border-top-left-radius: 0; border-bottom-left-radius: 0; }
+.new-identity-split > .new-identity-toggle[hidden] { display: none; }
+/* The host menu opens upward (the footer is at the pane's bottom). One highlighted row: the checked one is filled;
+   hover and focus only outline a row, so they never look like the choice. */
+.new-identity-menu { position: absolute; z-index: 30; bottom: calc(100% + 6px); left: 0; display: flex; flex-direction: column; gap: 6px; width: min(340px, calc(var(--panel-width) - 32px), calc(100vw - 48px)); padding: 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-xl); background: var(--surface-raised, var(--surface)); box-shadow: var(--shadow-lg); animation: ui-rise var(--duration) var(--ease); }
+.new-identity-menu-title { margin: 4px 8px 6px; color: var(--tertiary); font: var(--weight-medium) var(--text-2xs) / 1.2 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
+/* C2 (6 October 2026): each host a card; its options small switches inside it, under its name. The picked card is
+   highlighted (the default host's until a switch of another is touched); the other cards' options are greyed, still
+   shown and still usable. Hover and focus only outline, so they never look like the pick. */
+.new-identity-host-option { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 2px 8px; width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-md); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
+.new-identity-host-option code { font: var(--text-2xs) / 1.35 var(--font-mono); overflow-wrap: anywhere; }
+/* A host the lab does not declare: greyed, its why and its config line wrapping, nothing to click (title teaches). */
+.new-identity-host-option.is-unconfigured { cursor: help; opacity: 0.62; }
+.new-identity-host-option.is-unconfigured:hover { opacity: 0.85; }
+.new-identity-host-option .ui-config-line { grid-column: 2 / 4; }
+.new-identity-host-option small { grid-column: 2 / 4; color: var(--secondary); font-size: var(--text-2xs); line-height: 1.35; }
+.new-identity-host-option[data-picked="true"], .new-identity-host-group[data-picked="true"] { border-color: var(--accent-line); background: var(--accent-soft); }
+.new-identity-host-option:hover:not(:disabled), .new-identity-host-option:focus-visible { border-color: var(--line-strong); background: transparent; outline: 0; }
+.new-identity-host-option[data-picked="true"]:hover:not(:disabled), .new-identity-host-option[data-picked="true"]:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
+.new-identity-host-option:disabled { color: var(--tertiary); cursor: not-allowed; }
+.new-identity-host-option:disabled small { color: var(--tertiary); }
+.new-identity-check { display: inline-flex; color: var(--accent); }
+/* Backlog 185: a host with options is a card holding its row (borderless inside it) and its switches. */
+.new-identity-host-group { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-md); }
+.new-identity-host-group > .new-identity-host-option { border-color: transparent; background: transparent; }
+.new-identity-host-group > .new-identity-host-option:hover:not(:disabled), .new-identity-host-group > .new-identity-host-option:focus-visible { border-color: var(--line-strong); }
+/* The switches line up under the host's name: the row's border, padding, check column and gap (1 + 8 + 18 + 8 px). */
+.new-identity-host-options { display: flex; flex-direction: column; gap: 6px; padding: 2px 8px 10px 35px; transition: opacity var(--duration-fast) var(--ease); }
+.new-identity-host-group:not([data-picked="true"]) .new-identity-host-options { opacity: 0.5; }
+.new-identity-host-group:not([data-picked="true"]) .new-identity-host-options:hover { opacity: 0.8; }
+.new-identity-host-switch { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; color: var(--secondary); font-size: var(--text-2xs); line-height: 1.35; cursor: pointer; }
+.new-identity-host-switch.is-choice { grid-template-columns: minmax(0, 1fr) auto; }
+.new-identity-host-switch-label { min-width: 0; overflow-wrap: anywhere; }
+/* A choice: a compact list beside its name (shell.css gives selects a 38 px button height). */
+.new-identity-host-switch > select.new-identity-host-choice { min-height: 0; height: 24px; max-width: 100%; padding: 0 6px; border: 1px solid var(--line); border-radius: var(--radius-sm, 6px); background: transparent; color: var(--ink); font-size: var(--text-2xs); }
+.new-identity-host-switch:has(:disabled) { color: var(--tertiary); cursor: not-allowed; }
+/* A small switch, as the scenarios' run bar draws them (view-scenarios.css, 28 x 16 px); above shell.css's checkbox rule. */
+.new-identity-host-switch > input.new-identity-host-toggle { appearance: none; position: relative; flex-shrink: 0; width: 28px; height: 16px; margin: 0; border: 0; border-radius: var(--radius-pill); background: var(--line-strong); cursor: pointer; transition: background var(--duration-fast) var(--ease); }
+.new-identity-host-switch > input.new-identity-host-toggle::before { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform var(--duration-fast) var(--ease); }
+.new-identity-host-switch > input.new-identity-host-toggle:checked { background: var(--accent); }
+.new-identity-host-switch > input.new-identity-host-toggle:checked::before { transform: translateX(12px); }
+.new-identity-host-switch > input.new-identity-host-toggle:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
+.new-identity-host-switch > input.new-identity-host-toggle:disabled { opacity: 0.45; cursor: not-allowed; }
+.new-identity-kind { justify-self: start; max-width: 100%; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--secondary); font-size: var(--text-2xs); }
+/* An identity's host, as its tile's pill says it. */
+/* Its name and the options on for it wrap, never cut ("truAPI CLI · one wallet for all apps of…", backlog 185). */
+.identity-row .identity-host { flex-shrink: 1; min-width: 0; height: auto; min-height: 20px; padding-block: 3px; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; line-height: 1.2; }
+
+/* The identity picker above the dock: rows with avatar, username, status and a check on the selected one. */
+.picker-option.identity-option .ui-chip { flex-shrink: 0; }
+.picker-option.identity-option small { -webkit-line-clamp: 1; }
+/* The view modes and the (i) that says what each means, on one line. */
+.view-mode-wrap { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.picker-view .view-mode-wrap { width: 100%; }
+.picker-view .view-mode-control { flex: 1; }
+/* Running is the usual: a green dot alone (its word is its tooltip and stays for screen readers); every other status
+   keeps its word (the design: each state said once, the exceptions in words). */
+.identity-row .identity-status[data-status="running"], .identity-option .identity-status[data-status="running"] { width: 18px; padding: 0; justify-content: center; border-color: transparent; background: transparent; font-size: 0; }

package/entrypoints/panel/src/client/view-identities.d.ts

@@ -0,0 +1,21 @@
+import type { LabSnapshot } from "./panel-snapshot.js";
+import { type IconName } from "./ui.js";
+import { type LabView, type ShellContext } from "./shell-kit.js";
+import { type ViewMode } from "./views.js";
+type Actor = LabSnapshot["actors"][number];
+/** The three ways the frame shows identities, in the order the segmented control lists them. */
+export declare const VIEW_CHOICES: readonly {
+    value: ViewMode;
+    label: string;
+    icon: IconName;
+    title: string;
+}[];
+/**
+ * The view-mode control: one segmented control over #view-mode. Each button carries `data-view` (tests and the
+ * picker use it); `followId` names the Follow button (#follow-actor-view in the Identities section).
+ */
+export declare function viewModeControl(ctx: Pick<ShellContext, "choose">, onChange?: () => void, followId?: string): HTMLSpanElement;
+/** The status chip every identity list shows: running, starting (pulses), stopped or failed (with its error). */
+export declare function identityStatusChip(actor: Actor): HTMLSpanElement;
+export declare function createIdentitiesView(ctx: ShellContext): LabView;
+export {};