@work-graph/cli 0.2.0

package/vendor/src/ui/atoms/select.mjs

@@ -0,0 +1,98 @@
+import { escapeHtml, escapeHtmlAttr } from '../htmlEscape.mjs';
+
+/**
+ * @param {{ value?: string, label?: string, selected?: boolean }} option
+ */
+function renderOption(option) {
+  if (typeof option === 'string') {
+    return `<option value="${escapeHtmlAttr(option)}">${escapeHtml(option)}</option>`;
+  }
+  const value = option.value ?? '';
+  const label = option.label ?? value;
+  const selected = option.selected ? ' selected' : '';
+  return `<option value="${escapeHtmlAttr(value)}"${selected}>${escapeHtml(label)}</option>`;
+}
+
+/**
+ * @param {{
+ *   id?: string,
+ *   name?: string,
+ *   value?: string,
+ *   options?: Array<string | { value?: string, label?: string, selected?: boolean }>,
+ *   disabled?: boolean,
+ *   hidden?: boolean,
+ *   testId?: string,
+ *   ariaLabel?: string,
+ *   className?: string,
+ * }} props
+ */
+export function renderUiSelect(props = {}) {
+  const options = props.options ?? [];
+  const optionsHtml = options.map((option) => {
+    if (typeof option === 'object' && option.value != null && props.value === option.value) {
+      return renderOption({ ...option, selected: true });
+    }
+    return renderOption(option);
+  }).join('');
+
+  const classes = ['wg-select', props.className].filter(Boolean).join(' ');
+  const attrs = [
+    `class="${escapeHtmlAttr(classes)}"`,
+    props.id ? `id="${escapeHtmlAttr(props.id)}"` : '',
+    props.name ? `name="${escapeHtmlAttr(props.name)}"` : '',
+    props.disabled ? 'disabled' : '',
+    props.hidden ? 'hidden' : '',
+    props.testId ? `data-testid="${escapeHtmlAttr(props.testId)}"` : '',
+    props.ariaLabel ? `aria-label="${escapeHtmlAttr(props.ariaLabel)}"` : '',
+  ].filter(Boolean).join(' ');
+
+  return `<select ${attrs}>${optionsHtml}</select>`;
+}
+
+export const UI_SELECT_CHEVRON_LIGHT = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235e6c84' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E\")";
+export const UI_SELECT_CHEVRON_DARK = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239d9d9d' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E\")";
+
+export const UI_SELECT_CSS = `
+.wg-select {
+  box-sizing: border-box;
+  border: 1px solid var(--border);
+  border-radius: var(--ui-radius-control-sm, 0.25rem);
+  background-color: var(--panel-2);
+  color: var(--text);
+  padding: 8px 28px 8px 10px;
+  font: inherit;
+  font-size: 14px;
+  line-height: 1.2;
+  appearance: none;
+  -webkit-appearance: none;
+  color-scheme: light;
+  background-image: ${UI_SELECT_CHEVRON_LIGHT};
+  background-repeat: no-repeat;
+  background-size: 12px 12px;
+  background-position: right 8px center;
+  cursor: pointer;
+}
+.wg-select:hover {
+  background-color: var(--panel);
+}
+.wg-select:focus {
+  outline: none;
+  border-color: var(--accent);
+  background-color: var(--panel);
+  box-shadow: 0 0 0 1px var(--accent);
+}
+.wg-select:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.wg-select--compact {
+  max-width: 160px;
+}
+body[data-theme="dark"] .wg-select {
+  color-scheme: dark;
+  background-image: ${UI_SELECT_CHEVRON_DARK};
+}
+.toolbar .wg-select {
+  flex-shrink: 0;
+}
+`;

package/vendor/src/ui/backlogShellButtons.mjs

@@ -0,0 +1,238 @@
+import { renderUiButton } from './atoms/button.mjs';
+import { renderUiSelect } from './atoms/select.mjs';
+import { renderUiTabsGroup } from './molecules/tabs.mjs';
+
+/**
+ * Sidebar nav tab (Gripe DS unstyled shell — keeps .nav-tab CSS).
+ * @param {{ view: string, label: string, selected?: boolean, disabled?: boolean }} props
+ */
+export function renderNavTab({ view, label, selected = false, disabled = false }) {
+  return renderUiButton({
+    unstyled: true,
+    className: 'nav-tab',
+    label,
+    disabled,
+    attrs: {
+      'data-view': view,
+      'aria-selected': selected ? 'true' : 'false',
+    },
+  });
+}
+
+export function renderThemeToggleButton() {
+  return renderUiButton({
+    unstyled: true,
+    id: 'theme-toggle',
+    className: 'theme-toggle',
+    label: 'Тёмная тема',
+    attrs: { 'aria-pressed': 'false' },
+  });
+}
+
+export function renderDetailCloseButton() {
+  return renderUiButton({
+    unstyled: true,
+    id: 'detail-close',
+    className: 'detail-close',
+    label: 'Закрыть',
+    ariaLabel: 'Закрыть подробности',
+  });
+}
+
+export function renderDetailSubCloseButton() {
+  return renderUiButton({
+    unstyled: true,
+    id: 'detail-sub-close',
+    className: 'detail-close',
+    label: 'Закрыть',
+    ariaLabel: 'Закрыть описание узла L2',
+  });
+}
+
+export function renderAgentRunDockCloseButton() {
+  return renderUiButton({
+    unstyled: true,
+    id: 'agent-run-dock-close',
+    className: 'agent-dock-close',
+    label: '×',
+    ariaLabel: 'Свернуть dock',
+  });
+}
+
+export function renderAgentRunFooterButtons() {
+  return [
+    renderUiButton({
+      id: 'agent-run-retry',
+      variant: 'secondary',
+      size: 'sm',
+      label: 'Повтор',
+    }),
+    renderUiButton({
+      id: 'agent-run-open-task',
+      variant: 'primary',
+      size: 'sm',
+      label: 'Открыть задачу',
+    }),
+  ].join('\n      ');
+}
+
+export function renderIntentComposerActionButtons() {
+  return [
+    renderUiButton({
+      variant: 'secondary',
+      size: 'sm',
+      label: 'Preview draft',
+      testId: 'intent-composer-propose',
+      attrs: { 'data-action': 'propose' },
+    }),
+    renderUiButton({
+      variant: 'primary',
+      size: 'sm',
+      label: 'Создать задачу',
+      testId: 'intent-composer-apply',
+      disabled: true,
+      attrs: { 'data-action': 'apply' },
+    }),
+    renderUiButton({
+      variant: 'flat',
+      size: 'sm',
+      label: 'Отменить',
+      testId: 'intent-composer-cancel',
+      attrs: { 'data-action': 'cancel' },
+    }),
+  ].join('\n            ');
+}
+
+export function renderIntentDomainClearButton() {
+  return renderUiButton({
+    unstyled: true,
+    id: 'intent-domain-clear',
+    className: 'board-tab',
+    label: 'Сброс домена',
+    hidden: true,
+  });
+}
+
+export function renderSearchModeSelect() {
+  return renderUiSelect({
+    id: 'search-mode',
+    className: 'wg-select--search-mode',
+    testId: 'semantic-search-mode',
+    ariaLabel: 'Semantic search mode',
+    options: [
+      { value: 'local', label: 'local filter', selected: true },
+      { value: 'lexical-v1', label: 'semantic lexical' },
+      { value: 'hybrid-lexical-bm25-v1', label: 'semantic hybrid BM25' },
+    ],
+  });
+}
+
+export function renderCycleFilterSelect() {
+  return renderUiSelect({
+    id: 'cycle-filter',
+    className: 'wg-select--compact',
+    ariaLabel: 'Цикл',
+    options: [
+      { value: 'current', label: 'Текущий цикл', selected: true },
+      { value: 'all', label: 'Все циклы' },
+    ],
+  });
+}
+
+export function renderIntentDomainFilterSelect() {
+  return renderUiSelect({
+    id: 'intent-domain-filter',
+    className: 'wg-select--compact',
+    ariaLabel: 'Домен',
+    options: [{ value: '', label: 'Все домены', selected: true }],
+  });
+}
+
+export function renderAnalyticsSubtabsShell() {
+  return renderUiTabsGroup({
+    className: 'workflow-subtabs analytics-subtabs',
+    testId: 'analytics-subtabs',
+    ariaLabel: 'Тип аналитики',
+    tabs: [
+      {
+        id: 'intake',
+        label: 'Разборы',
+        selected: true,
+        count: 0,
+        elementId: 'analytics-tab-intake',
+        dataAttrKey: 'data-analytics-tab',
+        countId: 'analytics-intake-tab-count',
+      },
+      {
+        id: 'closing',
+        label: 'Итоги эпиков',
+        count: 0,
+        elementId: 'analytics-tab-closing',
+        dataAttrKey: 'data-analytics-tab',
+        countId: 'analytics-closing-tab-count',
+      },
+    ],
+  });
+}
+
+export function renderWorkflowSubtabsShell() {
+  return renderUiTabsGroup({
+    className: 'workflow-subtabs',
+    testId: 'workflow-subtabs',
+    ariaLabel: 'Бэклог и архив',
+    tabs: [
+      {
+        id: 'backlog',
+        label: 'Бэклог',
+        selected: true,
+        count: 0,
+        elementId: 'workflow-tab-backlog',
+        dataAttrKey: 'data-workflow-tab',
+        countId: 'workflow-backlog-tab-count',
+      },
+      {
+        id: 'archive',
+        label: 'Архив',
+        count: 0,
+        elementId: 'workflow-tab-archive',
+        dataAttrKey: 'data-workflow-tab',
+        countId: 'workflow-archive-tab-count',
+      },
+    ],
+  });
+}
+
+export function renderArchitectureSubtabsShell() {
+  return '';
+}
+
+export function renderWorkflowDisplayModeSelect() {
+  return renderUiSelect({
+    id: 'workflow-display-mode',
+    className: 'wg-select--compact',
+    ariaLabel: 'Режим списка задач',
+    options: [
+      { value: 'epic-groups', label: 'Эпики', selected: true },
+      { value: 'flat', label: 'Плоский' },
+      { value: 'tree', label: 'Дерево' },
+    ],
+  });
+}
+
+export function renderArchitectureGraphModeToggle() {
+  return (
+    '<div class="graph-canvas-mode-toggle" role="group" aria-label="Режим графа">' +
+    renderUiButton({
+      unstyled: true,
+      label: 'Конвейер',
+      className: 'is-active',
+      attrs: { 'data-graph-canvas-mode': 'pipeline', 'aria-pressed': 'true' },
+    }) +
+    renderUiButton({
+      unstyled: true,
+      label: 'Полный',
+      attrs: { 'data-graph-canvas-mode': 'full', 'aria-pressed': 'false' },
+    }) +
+    '</div>'
+  );
+}

package/vendor/src/ui/htmlEscape.mjs

@@ -0,0 +1,11 @@
+export function escapeHtml(value) {
+  return String(value ?? '')
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+export function escapeHtmlAttr(value) {
+  return escapeHtml(value).replace(/'/g, '&#39;');
+}

package/vendor/src/ui/molecules/rating.mjs

@@ -0,0 +1,48 @@
+import { escapeHtml, escapeHtmlAttr } from '../htmlEscape.mjs';
+
+const SIZE_CLASS = {
+  xs: 'wg-rating--xs',
+  sm: 'wg-rating--sm',
+  md: 'wg-rating--md',
+  card: 'wg-rating--card',
+  lg: 'wg-rating--lg',
+  xl: 'wg-rating--xl',
+};
+
+const COLOR_CLASS = {
+  blue: 'wg-rating--blue',
+  'yellow-orange': 'wg-rating--yellow-orange',
+  black: 'wg-rating--black',
+};
+
+/**
+ * @param {{ value?: number | string, size?: string, color?: string, showValue?: boolean, testId?: string }} props
+ */
+export function renderUiRating(props = {}) {
+  const size = SIZE_CLASS[props.size] ? props.size : 'md';
+  const color = COLOR_CLASS[props.color] ? props.color : 'blue';
+  const raw = props.value ?? 0;
+  const hasPlus = String(raw).includes('+');
+  const numeric = hasPlus ? 5 : Math.max(0, Math.min(5, Number(raw) || 0));
+  const filled = hasPlus ? 5 : Math.round(numeric);
+  const stars = Array.from({ length: 5 }, (_, index) =>
+    `<span class="wg-rating__star${index < filled ? ' is-filled' : ''}" aria-hidden="true">★</span>`,
+  ).join('');
+  const valueHtml = props.showValue
+    ? `<span class="wg-rating__value">${escapeHtml(hasPlus ? '5+' : String(numeric))}</span>`
+    : '';
+  const testId = props.testId ?? 'ui-rating';
+  return `<div class="wg-rating ${SIZE_CLASS[size]} ${COLOR_CLASS[color]}" data-testid="${escapeHtmlAttr(testId)}" role="img" aria-label="Rating ${escapeHtmlAttr(String(raw))}">${valueHtml}<span class="wg-rating__stars">${stars}</span></div>`;
+}
+
+export const UI_RATING_CSS = `
+.wg-rating { display: inline-flex; align-items: center; gap: var(--ui-rating-gap, 0.375rem); }
+.wg-rating__stars { display: inline-flex; gap: 2px; color: rgb(var(--brand-border-rgb, 80 80 80)); }
+.wg-rating__star.is-filled { color: rgb(var(--ui-rating-active-rgb, 0 102 255)); }
+.wg-rating--yellow-orange .wg-rating__star.is-filled { color: rgb(245 158 11); }
+.wg-rating--black .wg-rating__star.is-filled { color: rgb(0 0 0); }
+.wg-rating__value { font-size: var(--ui-rating-value-font-size, 0.875rem); margin-right: 4px; }
+.wg-rating--sm .wg-rating__stars { font-size: 0.875rem; }
+.wg-rating--md .wg-rating__stars { font-size: 1.125rem; }
+.wg-rating--lg .wg-rating__stars { font-size: 1.75rem; }
+`;

package/vendor/src/ui/molecules/tabs.mjs

@@ -0,0 +1,70 @@
+import { renderUiButton } from '../atoms/button.mjs';
+import { escapeHtml, escapeHtmlAttr } from '../htmlEscape.mjs';
+
+/**
+ * @param {{ tabs: Array<{ id: string, label: string, labelHtml?: string, selected?: boolean, count?: number }>, size?: string, testId?: string, ariaLabel?: string, className?: string }} props
+ */
+export function renderUiTabsGroup(props = {}) {
+  const tabs = props.tabs ?? [];
+  const sizeClass = props.size === 'sm' ? 'wg-tabs--sm' : props.size === 'lg' ? 'wg-tabs--lg' : 'wg-tabs--md';
+  const groupClass = ['wg-tabs', sizeClass, props.className ?? ''].filter(Boolean).join(' ');
+  const testId = props.testId ?? 'ui-tabs-group';
+  const triggers = tabs.map((tab) => renderUiTabsTrigger({
+    id: tab.id,
+    label: tab.label,
+    labelHtml: tab.labelHtml,
+    selected: tab.selected,
+    count: tab.count,
+    elementId: tab.elementId,
+    countId: tab.countId,
+    dataAttrKey: tab.dataAttrKey,
+    testId: tab.testId,
+  })).join('');
+  return `<div class="${escapeHtmlAttr(groupClass)}" role="tablist"${props.ariaLabel ? ` aria-label="${escapeHtmlAttr(props.ariaLabel)}"` : ''} data-testid="${escapeHtmlAttr(testId)}">${triggers}</div>`;
+}
+
+/**
+ * @param {{
+ *   id: string,
+ *   label?: string,
+ *   labelHtml?: string,
+ *   selected?: boolean,
+ *   count?: number | string,
+ *   testId?: string,
+ *   elementId?: string,
+ *   countId?: string,
+ *   dataAttrKey?: string,
+ * }} props
+ */
+export function renderUiTabsTrigger(props = {}) {
+  const selected = props.selected === true;
+  const dataKey = props.dataAttrKey ?? 'data-tab';
+  const countHtml = props.countId != null
+    ? `<span id="${escapeHtmlAttr(props.countId)}" class="count">${escapeHtml(String(props.count ?? 0))}</span>`
+    : props.count != null
+      ? `<span class="count">${escapeHtml(String(props.count))}</span>`
+      : '';
+  const labelHtml = props.labelHtml ?? (
+    countHtml
+      ? `${escapeHtml(props.label ?? '')} ${countHtml}`
+      : escapeHtml(props.label ?? '')
+  );
+  return renderUiButton({
+    unstyled: true,
+    id: props.elementId,
+    className: `wg-tabs__trigger workflow-subtab board-tab${selected ? ' is-active' : ''}`,
+    labelHtml,
+    testId: props.testId ?? `ui-tabs-trigger-${props.id}`,
+    role: 'tab',
+    ariaSelected: selected ? 'true' : 'false',
+    attrs: {
+      [dataKey]: props.id,
+    },
+  });
+}
+
+export const UI_TABS_CSS = `
+.wg-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
+.wg-tabs__trigger { border-bottom: 2px solid transparent; border-radius: 0; }
+.wg-tabs__trigger.is-active { border-bottom-color: rgb(var(--ui-accent-rgb, 0 102 255)); color: rgb(var(--ui-accent-rgb, 0 102 255)); font-weight: 600; }
+`;

package/vendor/src/ui/organisms/modal.mjs

@@ -0,0 +1 @@
+export { renderUiModal, UI_MODAL_CSS } from '../atoms/modal.mjs';

package/vendor/src/ui/pages/uiKitPage.mjs

@@ -0,0 +1,147 @@
+import { renderUiBadge, UI_BADGE_CSS } from '../atoms/badge.mjs';
+import { renderUiButton, UI_BUTTON_CSS } from '../atoms/button.mjs';
+import { renderUiIcon, UI_ICON_CSS } from '../atoms/icon.mjs';
+import { renderUiTextInput, UI_INPUT_CSS } from '../atoms/input.mjs';
+import { renderUiSelect, UI_SELECT_CSS } from '../atoms/select.mjs';
+import { renderUiModal, UI_MODAL_CSS } from '../atoms/modal.mjs';
+import { renderUiRating, UI_RATING_CSS } from '../molecules/rating.mjs';
+import { renderUiTabsGroup, UI_TABS_CSS } from '../molecules/tabs.mjs';
+import { escapeHtml } from '../htmlEscape.mjs';
+
+export const UI_ATOM_REGISTRY = [
+  {
+    id: 'button',
+    layer: 'atom',
+    title: 'Button',
+    renderPreview: () => [
+      renderUiButton({ label: 'Primary', variant: 'primary', testId: 'ui-kit-button-primary' }),
+      renderUiButton({ label: 'Secondary', variant: 'secondary', testId: 'ui-kit-button-secondary' }),
+      renderUiButton({ label: 'Flat', variant: 'flat', testId: 'ui-kit-button-flat' }),
+    ].join(' '),
+  },
+  {
+    id: 'badge',
+    layer: 'atom',
+    title: 'Badge',
+    renderPreview: () => [
+      renderUiBadge({ label: 'default', testId: 'ui-kit-badge-default' }),
+      renderUiBadge({ label: 'accent', tone: 'accent', testId: 'ui-kit-badge-accent' }),
+      renderUiBadge({ label: 'danger', tone: 'danger', testId: 'ui-kit-badge-danger' }),
+    ].join(' '),
+  },
+  {
+    id: 'select',
+    layer: 'atom',
+    title: 'Select',
+    renderPreview: () => renderUiSelect({
+      testId: 'ui-kit-select',
+      ariaLabel: 'Demo select',
+      options: [
+        { value: 'a', label: 'Option A', selected: true },
+        { value: 'b', label: 'Option B' },
+      ],
+    }),
+  },
+  {
+    id: 'text-input',
+    layer: 'atom',
+    title: 'Text input',
+    renderPreview: () => renderUiTextInput({ placeholder: 'Placeholder', testId: 'ui-kit-input' }),
+  },
+  {
+    id: 'icon',
+    layer: 'atom',
+    title: 'Icon',
+    renderPreview: () => renderUiIcon({ name: 'dot', testId: 'ui-kit-icon' }),
+  },
+  {
+    id: 'modal',
+    layer: 'atom',
+    title: 'Modal',
+    renderPreview: () => renderUiModal({
+      title: 'Preview modal',
+      bodyHtml: '<p class="muted">Static preview for /dev/ui-kit</p>',
+      testId: 'ui-kit-modal',
+    }),
+  },
+];
+
+export const UI_MOLECULE_REGISTRY = [
+  {
+    id: 'rating',
+    layer: 'molecule',
+    title: 'Rating',
+    renderPreview: () => [
+      renderUiRating({ value: 4, size: 'md', showValue: true, testId: 'ui-kit-rating-md' }),
+      renderUiRating({ value: '5+', size: 'sm', color: 'yellow-orange', testId: 'ui-kit-rating-plus' }),
+    ].join(' '),
+  },
+  {
+    id: 'tabs',
+    layer: 'molecule',
+    title: 'Tabs',
+    renderPreview: () => renderUiTabsGroup({
+      testId: 'ui-kit-tabs',
+      ariaLabel: 'Demo tabs',
+      tabs: [
+        { id: 'drafts', label: 'Черновики', selected: true, count: 3 },
+        { id: 'archive', label: 'Архив', count: 12 },
+      ],
+    }),
+  },
+];
+
+export const UI_COMPONENT_REGISTRY = [...UI_ATOM_REGISTRY, ...UI_MOLECULE_REGISTRY];
+
+export function renderUiKitComponentCss() {
+  return [UI_BUTTON_CSS, UI_BADGE_CSS, UI_SELECT_CSS, UI_INPUT_CSS, UI_ICON_CSS, UI_MODAL_CSS, UI_RATING_CSS, UI_TABS_CSS].join('\n');
+}
+
+export function renderUiKitPageHtml() {
+  const sidebar = UI_COMPONENT_REGISTRY.map((entry) =>
+    `<li><a href="#ui-kit-${escapeHtml(entry.id)}">${escapeHtml(entry.title)}</a></li>`,
+  ).join('');
+
+  const sections = UI_COMPONENT_REGISTRY.map((entry) =>
+    `<section id="ui-kit-${escapeHtml(entry.id)}" class="ui-kit-section" data-testid="ui-kit-section-${escapeHtml(entry.id)}">` +
+    `<h2>${escapeHtml(entry.title)} <code>${escapeHtml(entry.id)}</code></h2>` +
+    `<div class="ui-kit-preview">${entry.renderPreview()}</div>` +
+    '</section>',
+  ).join('');
+
+  return `<!doctype html>
+<html lang="ru" data-theme="dark" data-iohasc-theme="workgraph-dark">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Work Graph UI Kit</title>
+  <link rel="stylesheet" href="/assets/fonts/GraphikLCG/stylesheet.css">
+  <link rel="stylesheet" href="/assets/design-tokens-workgraph-dark.css">
+  <style>
+    html {
+      font-family: var(--brand-font-sans);
+      letter-spacing: 0.01em;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      text-rendering: optimizeLegibility;
+    }
+    body { margin: 0; background: rgb(var(--brand-bg-rgb, 30 30 30)); color: rgb(var(--ui-text-rgb, 212 212 212)); font: var(--text-base)/var(--text-base-line-height) var(--brand-font-sans); }
+    .ui-kit-layout { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
+    .ui-kit-sidebar { border-right: 1px solid rgb(var(--brand-border-rgb, 60 60 60)); padding: 16px; }
+    .ui-kit-sidebar ul { list-style: none; margin: 0; padding: 0; }
+    .ui-kit-sidebar a { color: rgb(var(--ui-link-rgb, 0 102 255)); text-decoration: none; display: block; padding: 6px 0; }
+    .ui-kit-main { padding: 20px; }
+    .ui-kit-section { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid rgb(var(--brand-border-rgb, 60 60 60)); }
+    .ui-kit-preview { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
+    .muted { color: rgb(var(--ui-muted-rgb, 157 157 157)); }
+    ${renderUiKitComponentCss()}
+  </style>
+</head>
+<body data-testid="ui-kit-root">
+  <div class="ui-kit-layout">
+    <aside class="ui-kit-sidebar"><h1>UI Kit</h1><ul>${sidebar}</ul><p class="muted"><a href="/">← Backlog UI</a></p></aside>
+    <main class="ui-kit-main">${sections}</main>
+  </div>
+</body>
+</html>`;
+}

package/vendor/src/ui/workItemStatusTone.mjs

@@ -0,0 +1,36 @@
+/** @typedef {'default' | 'accent' | 'muted' | 'danger' | 'ok'} BadgeTone */
+
+const STATUS_LABELS = {
+  backlog: 'Бэклог',
+  ready: 'Доступно агенту',
+  claimed: 'Взято',
+  doing: 'В работе',
+  in_progress: 'В работе',
+  verify: 'Проверка',
+  blocked: 'Блокер',
+  done: 'Завершено',
+  verified: 'Проверено',
+};
+
+/**
+ * @param {string | null | undefined} status
+ */
+export function statusLabel(status) {
+  const key = String(status ?? '').toLowerCase();
+  return STATUS_LABELS[key] ?? String(status ?? '');
+}
+
+/**
+ * @param {string | null | undefined} status
+ * @param {string | null | undefined} [queueKind]
+ * @returns {BadgeTone}
+ */
+export function statusToBadgeTone(status, queueKind = null) {
+  if (queueKind === 'planned') return 'accent';
+  const key = String(status ?? '').toLowerCase();
+  if (key === 'ready' || key === 'claimed' || key === 'doing' || key === 'in_progress') return 'accent';
+  if (key === 'done' || key === 'verified') return 'ok';
+  if (key === 'blocked') return 'danger';
+  if (key === 'verify') return 'muted';
+  return 'default';
+}