@pgcorp/ui-kit 0.1.0

package/src/components/shared/persona/SPersonaRunWorkbench.css

@@ -0,0 +1,109 @@
+@reference "../../../styles/reference.css";
+
+.s-persona-run-workbench-shell {
+  @apply min-h-0 min-w-0;
+  container-type: inline-size;
+}
+
+.s-persona-run-workbench {
+  @apply grid min-h-0 min-w-0 items-start gap-4;
+}
+
+.s-persona-run-workbench[data-density='comfortable'] {
+  @apply gap-4;
+}
+
+.s-persona-run-workbench[data-density='compact'] {
+  @apply gap-3;
+}
+
+.s-persona-run-workbench__project,
+.s-persona-run-workbench__catalog,
+.s-persona-run-workbench__structure,
+.s-persona-run-workbench__runs {
+  @apply min-h-0 min-w-0;
+}
+
+.s-persona-run-workbench__project {
+  @apply border-b border-surface-200 pb-4 dark:border-surface-800;
+}
+
+.s-persona-run-workbench__runs {
+  @apply border-t border-surface-200 pt-4 dark:border-surface-800;
+}
+
+.s-persona-run-workbench__project-line {
+  @apply grid min-w-0 gap-4;
+}
+
+.s-persona-run-workbench__messages {
+  @apply mt-3 grid gap-3;
+}
+
+.s-persona-run-workbench__diagnostics {
+  @apply mt-3;
+}
+
+.s-persona-run-workbench__diagnostic-groups {
+  @apply mb-3 grid min-w-0 border-b pb-3;
+  border-color: var(--s-section-divider);
+}
+
+.s-persona-run-workbench__diagnostic-controls {
+  @apply mb-3 grid min-w-0 gap-2;
+}
+
+.s-persona-run-workbench__project-selector {
+  @apply grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-2;
+}
+
+.s-persona-run-workbench__list {
+  @apply mt-3;
+}
+
+.s-persona-run-workbench__subheading {
+  @apply mt-4;
+}
+
+.s-persona-run-workbench__structure-notice {
+  @apply mb-3;
+}
+
+.s-persona-run-workbench__links {
+  @apply mt-3 flex min-w-0 flex-wrap gap-x-4 gap-y-2;
+}
+
+@container (min-width: 60rem) {
+  .s-persona-run-workbench {
+    grid-template-columns: minmax(20rem, 0.72fr) minmax(28rem, 1.28fr);
+  }
+
+  .s-persona-run-workbench__project {
+    grid-column: 1 / -1;
+  }
+
+  .s-persona-run-workbench__catalog {
+    grid-column: 1;
+    grid-row: 2 / span 2;
+  }
+
+  .s-persona-run-workbench__structure {
+    grid-column: 2;
+    grid-row: 2;
+  }
+
+  .s-persona-run-workbench__runs {
+    grid-column: 2;
+    grid-row: 3;
+  }
+
+  .s-persona-run-workbench__project-line {
+    grid-template-columns: minmax(18rem, 0.55fr) minmax(0, 1.45fr);
+    align-items: center;
+  }
+
+  .s-persona-run-workbench__diagnostic-controls {
+    grid-template-columns: minmax(16rem, 1fr) auto;
+    align-items: end;
+  }
+}

package/src/components/shared/persona/SPersonaRunWorkbench.vue

@@ -0,0 +1,549 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import SButton from '../controls/SButton.vue'
+import SCollapsiblePanel from '../containers/SCollapsiblePanel.vue'
+import SInputText from '../controls/SInputText.vue'
+import SLink from '../controls/SLink.vue'
+import SSegmentedControl from '../controls/SSegmentedControl.vue'
+import type { SegmentedControlOption } from '../controls/SSegmentedControl.vue'
+import SActionListItem from '../data-display/SActionListItem.vue'
+import SBadge from '../data-display/SBadge.vue'
+import SEmptyState from '../data-display/SEmptyState.vue'
+import SMessage from '../data-display/SMessage.vue'
+import SSectionHeader from '../data-display/SSectionHeader.vue'
+import SVirtualList from '../data-display/SVirtualList.vue'
+import SKeyValueGrid from '../data-display/SKeyValueGrid.vue'
+import SAsyncState from '../feedback/SAsyncState.vue'
+import {
+  assertPersonaInventory,
+  findExactPersonaInventoryItem,
+  resolvePersonaInventoryAsyncState,
+} from './_internal/inventory'
+import { resolvePersonaRunWorkbenchLabels } from './_internal/labels'
+import { personaCountLabel } from './presentation'
+import SPersonaRunConsole from './_internal/SPersonaRunConsole.vue'
+import { getPersonaRunConsoleFactKey } from './types'
+import type {
+  PersonaCatalogTest,
+  PersonaInventoryState,
+  PersonaPaginatedInventoryState,
+  PersonaRunConsoleOperation,
+  PersonaRunConsoleDensity,
+  PersonaRunConsoleEvent,
+  PersonaRunConsoleItem,
+  PersonaRunConsoleRun,
+  PersonaRunWorkbenchBinding,
+  PersonaRunWorkbenchCapabilities,
+  PersonaRunWorkbenchCatalogOverview,
+  PersonaRunWorkbenchDiagnostic,
+  PersonaRunWorkbenchLabels,
+  PersonaRunWorkbenchNotice,
+  PersonaRunWorkbenchOperation,
+  PersonaRunWorkbenchWatcher,
+} from './types'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    binding: PersonaRunWorkbenchBinding | null
+    watcher?: PersonaRunWorkbenchWatcher | null
+    catalogOverview?: PersonaRunWorkbenchCatalogOverview | null
+    diagnostics?: PersonaRunWorkbenchDiagnostic[]
+    notice?: PersonaRunWorkbenchNotice | null
+    catalogState: PersonaInventoryState<PersonaCatalogTest>
+    selectedTestId?: string | null
+    runsState: PersonaPaginatedInventoryState<PersonaRunConsoleRun>
+    selectedRunId?: string | null
+    itemsState: PersonaPaginatedInventoryState<PersonaRunConsoleItem>
+    eventsState: PersonaPaginatedInventoryState<PersonaRunConsoleEvent>
+    capabilities: PersonaRunWorkbenchCapabilities
+    operation: PersonaRunWorkbenchOperation
+    reportSummary?: string | null
+    labels?: Partial<PersonaRunWorkbenchLabels>
+    density?: PersonaRunConsoleDensity
+    catalogHeight?: number
+    stepsHeight?: number
+  }>(),
+  {
+    watcher: null,
+    catalogOverview: null,
+    diagnostics: () => [],
+    notice: null,
+    selectedTestId: null,
+    selectedRunId: null,
+    reportSummary: null,
+    labels: () => ({}),
+    density: 'comfortable',
+    catalogHeight: 520,
+    stepsHeight: 300,
+  },
+)
+
+const emit = defineEmits<{
+  discover: []
+  watch: []
+  'select-test': [testId: string]
+  'run-test': [testId: string]
+  'run-all': []
+  'select-run': [runId: string]
+  'load-more-runs': []
+  'refresh-events': []
+  'cancel-run': []
+  'load-more-items': []
+  'append-events': []
+  'load-more-events': []
+}>()
+const ownedAttrs = useOwnedAttrs({ component: 'SPersonaRunWorkbench', owner: 'persona workbench shell' })
+
+const search = ref('')
+const diagnosticSearch = ref('')
+const diagnosticSeverity = ref<'all' | 'danger' | 'warn'>('all')
+
+const uiLabels = computed(() => resolvePersonaRunWorkbenchLabels(props.labels))
+
+const consoleOperation = computed<PersonaRunConsoleOperation>(() => {
+  switch (props.operation) {
+    case 'refreshing-events':
+    case 'cancelling-run':
+    case 'appending-events':
+      return props.operation
+    case 'discovering':
+    case 'watching':
+    case 'starting-run':
+    case 'idle':
+      return 'idle'
+    default:
+      throw new TypeError(`SPersonaRunWorkbench: unsupported operation ${String(props.operation)}`)
+  }
+})
+
+const catalogTests = computed(() => props.catalogState.status === 'ready'
+  ? assertPersonaInventory('SPersonaRunWorkbench.catalogState', props.catalogState.items)
+  : [])
+const catalogAsyncState = computed(() => resolvePersonaInventoryAsyncState(
+  'SPersonaRunWorkbench.catalogState',
+  props.catalogState,
+  {
+    loadingMessage: 'Загрузка каталога',
+    emptyMessage: uiLabels.value.noCatalogTests,
+  },
+))
+const selectedTest = computed(() => findExactPersonaInventoryItem(
+  'SPersonaRunWorkbench.catalogState',
+  catalogTests.value,
+  props.selectedTestId,
+))
+const selectedTestBadges = computed(() => assertPersonaInventory(
+  'SPersonaRunWorkbench.selectedTest.badges',
+  selectedTest.value?.badges ?? [],
+))
+const selectedTestLinks = computed(() => assertPersonaInventory(
+  'SPersonaRunWorkbench.selectedTest.links',
+  selectedTest.value?.links ?? [],
+))
+const validatedDiagnostics = computed(() => assertPersonaInventory(
+  'SPersonaRunWorkbench.diagnostics',
+  props.diagnostics,
+))
+
+const visibleTests = computed(() => {
+  const query = search.value.trim().toLocaleLowerCase('ru-RU')
+  if (!query) return catalogTests.value
+  return catalogTests.value.filter((test) => {
+    const haystack = [
+      test.title,
+      test.meta,
+      test.workItemId,
+      test.scenarioId,
+      test.variantId,
+      test.sourcePath,
+      ...(test.tags ?? []),
+    ].filter((value): value is string => Boolean(value)).join(' ').toLocaleLowerCase('ru-RU')
+    return haystack.includes(query)
+  })
+})
+
+const diagnosticSeverityOptions = computed<SegmentedControlOption[]>(() => [
+  { value: 'all', label: `Все ${validatedDiagnostics.value.length}`, title: 'Показать все сообщения' },
+  {
+    value: 'danger',
+    label: `Ошибки ${validatedDiagnostics.value.filter((diagnostic) => diagnostic.statusSeverity === 'danger').length}`,
+    title: 'Показать ошибки',
+  },
+  {
+    value: 'warn',
+    label: `Предупреждения ${validatedDiagnostics.value.filter((diagnostic) => diagnostic.statusSeverity === 'warn').length}`,
+    title: 'Показать предупреждения',
+  },
+])
+
+const diagnosticGroupTitles: Record<PersonaRunWorkbenchDiagnostic['category'], string> = {
+  scenario_import: 'Недоступные сценарии',
+  component_analysis: 'Ошибки анализа компонентов',
+  support_quality: 'Замечания качества PageObject',
+  unclassified: 'Сообщения без классификации',
+}
+
+const diagnosticGroups = computed(() => {
+  const categories: PersonaRunWorkbenchDiagnostic['category'][] = [
+    'scenario_import',
+    'component_analysis',
+    'support_quality',
+    'unclassified',
+  ]
+  return categories.flatMap((category) => {
+    const diagnostics = validatedDiagnostics.value.filter((diagnostic) => diagnostic.category === category)
+    if (diagnostics.length === 0) return []
+    const statusSeverity = diagnostics.some((diagnostic) => diagnostic.statusSeverity === 'danger')
+      ? 'danger' as const
+      : diagnostics.some((diagnostic) => diagnostic.statusSeverity === 'warn')
+        ? 'warn' as const
+        : 'info' as const
+    const countLabel = personaCountLabel(diagnostics.length, ['сообщение', 'сообщения', 'сообщений'])
+    return [{
+      category,
+      title: diagnosticGroupTitles[category],
+      description: countLabel,
+      countLabel,
+      statusSeverity,
+    }]
+  })
+})
+
+const visibleDiagnostics = computed(() => {
+  const query = diagnosticSearch.value.trim().toLocaleLowerCase('ru-RU')
+  return validatedDiagnostics.value.filter((diagnostic) => {
+    if (diagnosticSeverity.value !== 'all' && diagnostic.statusSeverity !== diagnosticSeverity.value) {
+      return false
+    }
+    if (!query) return true
+    return [
+      diagnostic.title,
+      diagnostic.message,
+      diagnostic.meta,
+      diagnostic.ownerLabel,
+      diagnostic.impactLabel,
+      diagnostic.remediation,
+      diagnostic.statusLabel,
+    ]
+      .filter((value): value is string => Boolean(value))
+      .join(' ')
+      .toLocaleLowerCase('ru-RU')
+      .includes(query)
+  })
+})
+
+const virtualRowSize = 96
+const catalogItemSize = virtualRowSize
+const stepItemSize = virtualRowSize
+const catalogViewportHeight = computed(() => Math.min(props.catalogHeight, visibleTests.value.length * catalogItemSize))
+const stepsViewportHeight = computed(() => Math.min(
+  props.stepsHeight,
+  (selectedTest.value?.steps.length ?? 0) * stepItemSize,
+))
+const diagnosticsViewportHeight = computed(() => Math.min(288, visibleDiagnostics.value.length * virtualRowSize))
+
+function diagnosticDescription(diagnostic: PersonaRunWorkbenchDiagnostic): string {
+  return [diagnostic.ownerLabel, diagnostic.impactLabel, diagnostic.meta]
+    .filter((value): value is string => Boolean(value))
+    .join(' · ')
+}
+
+</script>
+
+<template>
+  <div v-bind="ownedAttrs.bindings()" class="s-persona-run-workbench-shell">
+    <div class="s-persona-run-workbench" :data-density="density">
+    <section class="s-persona-run-workbench__project">
+      <div class="s-persona-run-workbench__project-line">
+        <div v-if="$slots.projectSelector" class="s-persona-run-workbench__project-selector">
+          <slot name="projectSelector" />
+        </div>
+        <SSectionHeader
+          :eyebrow="uiLabels.projectTitle"
+          :title="binding?.title ?? uiLabels.projectTitle"
+          :description="binding?.root"
+          :meta="binding?.meta"
+        >
+          <template #badges>
+            <SBadge v-if="binding" :severity="binding.statusSeverity">{{ binding.statusLabel }}</SBadge>
+            <SBadge v-if="watcher" :severity="watcher.statusSeverity">{{ watcher.statusLabel }}</SBadge>
+          </template>
+          <template #actions>
+            <SButton
+              size="sm"
+              severity="secondary"
+              :disabled="!binding || capabilities.discover === 'disabled'"
+              :loading="operation === 'discovering'"
+              @click="emit('discover')"
+            >
+              {{ uiLabels.discover }}
+            </SButton>
+            <SButton
+              size="sm"
+              severity="secondary"
+              :disabled="!binding || capabilities.watch === 'disabled'"
+              :loading="operation === 'watching'"
+              @click="emit('watch')"
+            >
+              {{ uiLabels.watch }}
+            </SButton>
+          </template>
+        </SSectionHeader>
+      </div>
+      <div v-if="watcher?.message || notice" class="s-persona-run-workbench__messages">
+        <SMessage v-if="watcher?.message" :severity="watcher.statusSeverity === 'danger' ? 'danger' : 'warn'">
+          {{ watcher.message }}
+        </SMessage>
+        <SMessage v-if="notice" :severity="notice.severity" :title="notice.title">
+          {{ notice.message }}
+        </SMessage>
+      </div>
+      <div v-if="validatedDiagnostics.length > 0" class="s-persona-run-workbench__diagnostics">
+        <SCollapsiblePanel
+          summary="Диагностика проекта"
+          density="compact"
+          header-variant="minimal"
+          surface="plain"
+        >
+          <div class="s-persona-run-workbench__diagnostic-groups" aria-label="Сводка причин диагностики">
+            <SActionListItem
+              v-for="group in diagnosticGroups"
+              :key="group.category"
+              :title="group.title"
+              :description="group.description"
+              :status-label="group.countLabel"
+              :status-severity="group.statusSeverity"
+              :surface="{ mode: 'static' }"
+              trailing-layout="inline"
+            />
+          </div>
+          <div class="s-persona-run-workbench__diagnostic-controls">
+            <SInputText v-model="diagnosticSearch" placeholder="Поиск по диагностике" size="sm" />
+            <SSegmentedControl
+              v-model="diagnosticSeverity"
+              :options="diagnosticSeverityOptions"
+              label="Важность диагностических сообщений"
+              size="sm"
+            />
+          </div>
+          <SVirtualList
+            v-if="visibleDiagnostics.length > 0"
+            :key="`${diagnosticSeverity}:${diagnosticSearch}`"
+            :items="visibleDiagnostics"
+            :item-size="virtualRowSize"
+            :height="diagnosticsViewportHeight"
+            :item-key="(diagnostic) => diagnostic.id"
+            accessible-label="Диагностические сообщения"
+            :item-label="(diagnostic) => diagnostic.title"
+          >
+            <template #default="{ item }">
+              <SActionListItem
+                role="presentation"
+                :title="item.title"
+                :description="diagnosticDescription(item)"
+                :detail="item.message"
+                :status-label="item.statusLabel"
+                :status-severity="item.statusSeverity"
+                :surface="{ mode: 'static' }"
+                trailing-layout="inline"
+                height-mode="fill"
+              />
+            </template>
+          </SVirtualList>
+          <SEmptyState v-else title="Диагностические сообщения не найдены." size="sm" />
+        </SCollapsiblePanel>
+      </div>
+    </section>
+
+    <section class="s-persona-run-workbench__catalog">
+      <SSectionHeader
+        :title="uiLabels.catalogTitle"
+        size="sm"
+        spacing-after="sm"
+        trailing-layout="stacked"
+      >
+        <template #badges>
+          <SBadge severity="info">{{ visibleTests.length }} доступно</SBadge>
+          <SBadge v-if="catalogOverview?.unavailableTests" severity="danger">
+            {{ catalogOverview.unavailableTests }} недоступно
+          </SBadge>
+          <SBadge v-if="catalogOverview" severity="secondary">{{ catalogOverview.components }} компонентов</SBadge>
+          <SBadge v-if="catalogOverview" severity="secondary">{{ catalogOverview.pages }} страниц</SBadge>
+          <SBadge v-if="catalogOverview?.diagnosticErrors" severity="danger">
+            {{ personaCountLabel(catalogOverview.diagnosticErrors, ['ошибка', 'ошибки', 'ошибок']) }}
+          </SBadge>
+          <SBadge v-if="catalogOverview?.diagnosticWarnings" severity="warn">
+            {{ personaCountLabel(catalogOverview.diagnosticWarnings, ['предупреждение', 'предупреждения', 'предупреждений']) }}
+          </SBadge>
+        </template>
+      </SSectionHeader>
+      <SInputText
+        v-if="catalogState.status === 'ready'"
+        v-model="search"
+        :placeholder="uiLabels.searchPlaceholder"
+        size="sm"
+      />
+      <SAsyncState :state="catalogAsyncState">
+        <div class="s-persona-run-workbench__list">
+          <SVirtualList
+            :items="visibleTests"
+            :item-size="catalogItemSize"
+            :height="catalogViewportHeight"
+            :item-key="(test) => test.id"
+            :accessible-label="uiLabels.catalogTitle"
+            :item-label="(test) => test.title"
+          >
+            <template #default="{ item }">
+              <SActionListItem
+                role="presentation"
+                :title="item.title"
+                :description="item.meta"
+                :detail="item.detail"
+                :selected="selectedTest?.id === item.id"
+                :status-label="item.statusLabel"
+                :status-severity="item.statusSeverity ?? 'secondary'"
+                :badges="item.badges"
+                trailing-layout="inline"
+                height-mode="fill"
+                :surface="{
+                  mode: 'action',
+                  accessibleLabel: `Выбрать тест ${item.title}`,
+                  pressed: selectedTest?.id === item.id,
+                }"
+                @activate="emit('select-test', item.id)"
+              />
+            </template>
+          </SVirtualList>
+        </div>
+      </SAsyncState>
+    </section>
+
+    <section class="s-persona-run-workbench__structure">
+      <SSectionHeader
+        :eyebrow="uiLabels.selectedTestTitle"
+        :title="selectedTest?.title ?? uiLabels.selectedTestTitle"
+        :description="selectedTest?.description || selectedTest?.meta"
+        :meta="selectedTest?.detail"
+      >
+        <template #badges>
+          <SBadge
+            v-for="badge in selectedTestBadges"
+            :key="badge.id"
+            :severity="badge.severity"
+          >
+            {{ badge.label }}
+          </SBadge>
+        </template>
+        <template #actions>
+          <SButton
+            size="sm"
+            severity="primary"
+            :disabled="!selectedTest || capabilities.runSelected === 'disabled'"
+            :loading="operation === 'starting-run'"
+            @click="selectedTest && emit('run-test', selectedTest.id)"
+          >
+            {{ uiLabels.runSelected }}
+          </SButton>
+          <SButton
+            size="sm"
+            severity="secondary"
+            :disabled="catalogTests.length === 0 || capabilities.runAll === 'disabled'"
+            :loading="operation === 'starting-run'"
+            @click="emit('run-all')"
+          >
+            {{ uiLabels.runAll }}
+          </SButton>
+        </template>
+      </SSectionHeader>
+
+      <SKeyValueGrid
+        v-if="selectedTest && (selectedTest.facts?.length ?? 0) > 0"
+        :items="selectedTest.facts ?? []"
+        :get-item-key="getPersonaRunConsoleFactKey"
+        variant="inline"
+        :columns="1"
+      />
+      <nav
+        v-if="selectedTestLinks.length > 0"
+        class="s-persona-run-workbench__links"
+        aria-label="Связанные материалы теста"
+      >
+        <SLink
+          v-for="link in selectedTestLinks"
+          :key="link.id"
+          :href="link.url"
+          target="_blank"
+          external
+          size="sm"
+          underline="always"
+          wrap="anywhere"
+        >
+          {{ link.label }}
+        </SLink>
+      </nav>
+
+      <div class="s-persona-run-workbench__subheading">
+        <SSectionHeader :title="uiLabels.structureTitle" size="sm" spacing-after="md" />
+      </div>
+      <div v-if="selectedTest?.structureNotice" class="s-persona-run-workbench__structure-notice">
+        <SMessage
+          :severity="selectedTest.structureNotice.severity"
+          :title="selectedTest.structureNotice.title"
+        >
+          {{ selectedTest.structureNotice.message }}
+        </SMessage>
+      </div>
+      <SVirtualList
+        v-if="selectedTest && selectedTest.steps.length > 0"
+        :items="selectedTest.steps"
+        :item-size="stepItemSize"
+        :height="stepsViewportHeight"
+        :item-key="(step) => step.id"
+        :accessible-label="uiLabels.structureTitle"
+        :item-label="(step) => step.title"
+      >
+        <template #default="{ item }">
+          <SActionListItem
+            role="presentation"
+            :title="item.title"
+            :description="item.meta || item.kind || ''"
+            :detail="item.detail"
+            :badges="item.badges"
+            :indent-level="item.depth"
+            :surface="{ mode: 'static' }"
+            height-mode="fill"
+          />
+        </template>
+      </SVirtualList>
+      <SEmptyState v-else :title="uiLabels.emptyStructure" size="sm" />
+    </section>
+
+    <section class="s-persona-run-workbench__runs">
+      <SPersonaRunConsole
+        :runs-state="runsState"
+        :selected-run-id="selectedRunId"
+        :items-state="itemsState"
+        :events-state="eventsState"
+        :capabilities="{ cancelRun: capabilities.cancelRun }"
+        :operation="consoleOperation"
+        :report-summary="reportSummary"
+        :resolved-labels="uiLabels"
+        :density="density"
+        @select-run="emit('select-run', $event)"
+        @load-more-runs="emit('load-more-runs')"
+        @refresh-events="emit('refresh-events')"
+        @cancel-run="emit('cancel-run')"
+        @load-more-items="emit('load-more-items')"
+        @append-events="emit('append-events')"
+        @load-more-events="emit('load-more-events')"
+      />
+    </section>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss" src="./SPersonaRunWorkbench.css" scoped></style>

package/src/components/shared/persona/_internal/SPersonaRunConsole.css

@@ -0,0 +1,40 @@
+@reference "../../../../styles/reference.css";
+
+.s-persona-run-console-shell {
+  @apply min-h-0 min-w-0;
+  container-type: inline-size;
+}
+
+.s-persona-run-console {
+  @apply grid min-h-0 min-w-0 gap-4;
+}
+
+.s-persona-run-console[data-density='comfortable'] {
+  @apply gap-4;
+}
+
+.s-persona-run-console[data-density='compact'] {
+  @apply gap-3;
+}
+
+.s-persona-run-console__section {
+  @apply min-h-0 min-w-0;
+}
+
+.s-persona-run-console__detail {
+  @apply grid min-h-0 gap-4;
+}
+
+.s-persona-run-console__actions-line {
+  @apply mt-3 flex flex-wrap items-center gap-2;
+}
+
+@container (min-width: 52rem) {
+  .s-persona-run-console[data-density='comfortable'] {
+    grid-template-columns: minmax(18rem, 0.72fr) minmax(28rem, 1.28fr);
+  }
+
+  .s-persona-run-console[data-density='compact'] {
+    grid-template-columns: minmax(16rem, 0.72fr) minmax(24rem, 1.28fr);
+  }
+}