@haiiro/docuflow 0.0.11 → 0.0.12

package/src/front-components/docflow-processes.front-component.tsx

@@ -1,15 +1,47 @@
 import { useState } from 'react';
 import { defineFrontComponent } from 'twenty-sdk/define';
 import { AppPath, enqueueSnackbar, navigate } from 'twenty-sdk/front-component';
-import { IconPencil, IconPlayerPlay, IconSettings, IconTrash } from 'twenty-ui/icon';
-import { Tag } from 'twenty-ui/primitives/data-display';
+import { IconPencil, IconPlayerPlay, IconPlayerStop, IconRocket, IconSettings, IconTrash } from 'twenty-ui/icon';
 import { useTheme } from 'twenty-ui/theme';
 
-import { callAppRoute, createRecord, deleteRecord, getErrorMessage, listRecords, updateRecord } from 'src/front/api';
+import {
+  callAppRoute,
+  countRecords,
+  createRecord,
+  deleteRecords,
+  getErrorMessage,
+  listRecords,
+  updateRecord,
+} from 'src/front/api';
+import {
+  formatDate,
+  formatDateTime,
+  formatMemberName,
+  RUN_STATUS_COLORS,
+  RUN_STATUS_LABELS,
+  STEP_TYPE_LABELS,
+} from 'src/front/format';
 import { useAsync, useDebouncedValue } from 'src/front/hooks/use-async';
-import { DataTable, DocflowRoot, Message, SplitView, type TableSort, Toolbar } from 'src/front/ui/components';
-import { Button, PromptDialog, SearchWithFilters } from 'src/front/ui/kit';
+import { useBulkAction } from 'src/front/hooks/use-bulk-action';
+import { useWorkspaceMembers } from 'src/front/hooks/use-workspace-members';
+import { type DocflowWorkflowRun, type WorkspaceMember } from 'src/front/types';
+import {
+  DataTable,
+  DocflowRoot,
+  formatTotal,
+  ListToolbar,
+  Message,
+  SectionTitle,
+  SelectionBar,
+  SplitView,
+  type TableColumn,
+  type TableSort,
+  useHiddenColumns,
+  useRowSelection,
+} from 'src/front/ui/components';
 import { FormFieldInputs } from 'src/front/ui/form-field-inputs';
+import { Button, type MenuAction, MenuButton, PromptDialog, StatusChip, ViewTabs } from 'src/front/ui/kit';
+import { Timeline } from 'src/front/ui/timeline';
 import { restAnd, restEq, restIlike, restIn } from 'src/shared/api/rest-filter.util';
 import { DOCFLOW_SECTION } from 'src/shared/docflow.constants';
 import { type FormField, type FormValues } from 'src/shared/form/form-field.type';
@@ -21,18 +53,23 @@ import {
   isLaunchParametersStep,
   parseLaunchFields,
 } from 'src/shared/workflow/launch-step.util';
+import { orderRunSteps } from 'src/shared/workflow/run-timeline.util';
 import { type WorkflowStep, type WorkflowTrigger } from 'src/shared/workflow/workflow-run.type';
+import { getFormStepAssignment, getFormStepFields, isFormStep } from 'src/shared/workflow/workflow-run.util';
 import { PROCESSES_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER } from 'src/universal-identifiers';
 
 const PROCESSES_LIMIT = 200;
 const SEARCH_DEBOUNCE_MS = 300;
 const DRAFT_WAIT_ATTEMPTS = 10;
 const DRAFT_WAIT_MS = 400;
+const RECENT_RUNS_LIMIT = 5;
+const PROCESS_NOUN: [string, string, string] = ['процесс', 'процесса', 'процессов'];
 
 type Panel = { kind: 'closed' } | { kind: 'process'; workflowId: string };
-type StatusFilter = 'all' | 'active' | 'draft';
+type ProcessView = 'all' | 'active' | 'draft';
+type ParametersFilter = 'any' | 'with' | 'without';
 
-type WorkflowRecord = { id: string; name?: string | null; smbLaunchFields?: unknown };
+type WorkflowRecord = { id: string; name?: string | null; smbLaunchFields?: unknown; updatedAt?: string | null };
 type WorkflowVersionRecord = {
   id: string;
   workflowId: string;
@@ -46,13 +83,38 @@ type DocflowProcess = {
   // The published version people launch; none while the process is a draft
   workflowVersionId: string | undefined;
   name: string;
+  // Launched from here: published and started by hand
   isPublished: boolean;
+  // Has a published version, whatever starts it
+  isActive: boolean;
+  // A draft edited after the last publishing
+  hasUnpublishedChanges: boolean;
   launchFields: FormField[];
-  stageNames: string[];
+  // The steps in the order a run goes through them
+  stages: WorkflowStep[];
+  updatedAt?: string | null;
 };
 
-const stageNamesOf = (version: WorkflowVersionRecord | undefined) =>
-  (version?.steps ?? []).filter((step) => !isLaunchParametersStep(step)).map((step) => step.name);
+type RunCounts = { total: number; running: number };
+
+const COLUMNS: TableColumn[] = [
+  { key: 'name', label: 'Процесс', width: '26%', sortKey: 'name' },
+  { key: 'status', label: 'Статус', width: '13%', sortKey: 'status' },
+  { key: 'parameters', label: 'Параметры', width: '10%', sortKey: 'parameters' },
+  { key: 'stageCount', label: 'Этапов', width: '8%', sortKey: 'stageCount' },
+  { key: 'runs', label: 'Запуски', width: '12%', sortKey: 'runs' },
+  { key: 'stages', label: 'Этапы' },
+  { key: 'updatedAt', label: 'Изменён', width: '11%', sortKey: 'updatedAt' },
+];
+
+const VIEWS: { value: ProcessView; label: string }[] = [
+  { value: 'all', label: 'Все' },
+  { value: 'active', label: 'Опубликованные' },
+  { value: 'draft', label: 'Черновики' },
+];
+
+const stagesOf = (version: WorkflowVersionRecord | undefined) =>
+  orderRunSteps({ flow: { trigger: version?.trigger, steps: version?.steps } }).filter((step) => !isLaunchParametersStep(step));
 
 // Docflow processes are the standard workflows with the docflow section:
 // published ones started by hand are launched here, drafts are shown to be
@@ -73,38 +135,225 @@ const loadProcesses = async (searchQuery: string): Promise<DocflowProcess[]> =>
 
   const { records: versions } = await listRecords<WorkflowVersionRecord>('workflowVersions', {
     filter: restAnd(
-      restIn('status', ['ACTIVE', 'DRAFT']),
+      restIn('status', ['ACTIVE', 'DRAFT', 'DEACTIVATED']),
       restIn('workflowId', workflows.map(({ id }) => id)),
     ),
-    limit: PROCESSES_LIMIT * 2,
+    // Newest first: the latest of the versions taken off comes first
+    order_by: 'createdAt[DescNullsLast]',
+    limit: PROCESSES_LIMIT * 5,
   });
 
   return workflows.map((workflow) => {
-    const active = versions.find(
-      (version) => version.workflowId === workflow.id && version.status === 'ACTIVE' && isLaunchableTrigger(version.trigger),
-    );
+    const active = versions.find((version) => version.workflowId === workflow.id && version.status === 'ACTIVE');
     const draft = versions.find((version) => version.workflowId === workflow.id && version.status === 'DRAFT');
+    // Taken off publishing: its steps still show
+    const deactivated = versions.find((version) => version.workflowId === workflow.id && version.status === 'DEACTIVATED');
+    const isLaunchable = active !== undefined && isLaunchableTrigger(active.trigger);
 
     return {
       workflowId: workflow.id,
-      workflowVersionId: active?.id,
+      workflowVersionId: isLaunchable ? active.id : undefined,
       name: workflow.name?.trim() || 'Без названия',
-      isPublished: active !== undefined,
+      isPublished: isLaunchable,
+      isActive: active !== undefined,
+      hasUnpublishedChanges: active !== undefined && draft !== undefined,
       launchFields: parseLaunchFields(workflow.smbLaunchFields),
-      stageNames: stageNamesOf(active ?? draft),
+      stages: stagesOf(active ?? draft ?? deactivated),
+      updatedAt: workflow.updatedAt,
     };
   });
 };
 
+// Runs per process: all of them and the ones still going
+const loadRunCounts = async (workflowIds: string[]): Promise<Record<string, RunCounts>> =>
+  Object.fromEntries(
+    await Promise.all(
+      workflowIds.map(async (workflowId) => {
+        const [total, running] = await Promise.all([
+          countRecords('workflowRuns', restEq('workflowId', workflowId)),
+          countRecords('workflowRuns', restAnd(restEq('workflowId', workflowId), restEq('status', 'RUNNING'))),
+        ]);
+
+        return [workflowId, { total, running }];
+      }),
+    ),
+  );
+
 const openEditor = (workflowId: string) =>
   navigate(AppPath.RecordShowPage, { objectNameSingular: 'workflow', objectRecordId: workflowId });
 
-const ProcessLaunchForm = ({
+const openRun = (runId: string) =>
+  navigate(AppPath.RecordShowPage, { objectNameSingular: 'workflowRun', objectRecordId: runId });
+
+// The way of the process before it runs: every stage is still ahead
+const ProcessStages = ({ process, members }: { process: DocflowProcess; members: WorkspaceMember[] }) => {
+  const [now] = useState(() => new Date());
+
+  if (process.stages.length === 0) {
+    return <Message tone="hint">Этапов пока нет: добавьте шаги в редакторе.</Message>;
+  }
+
+  return (
+    <Timeline
+      items={[
+        { key: 'start', title: 'Запуск', meta: process.launchFields.length > 0 ? `с параметрами: ${process.launchFields.length}` : 'без параметров', state: 'upcoming' },
+        ...process.stages.map((step) => {
+          const assigneeId = isFormStep(step)
+            ? getFormStepAssignment({ fields: getFormStepFields(step), now }).assigneeWorkspaceMemberId
+            : undefined;
+
+          return {
+            key: step.id,
+            title: step.name,
+            meta: [STEP_TYPE_LABELS[step.type] ?? step.type, formatMemberName(members.find(({ id }) => id === assigneeId))]
+              .filter(Boolean)
+              .join(' · '),
+            state: 'upcoming' as const,
+          };
+        }),
+      ]}
+    />
+  );
+};
+
+const RecentRuns = ({ workflowId }: { workflowId: string }) => {
+  const theme = useTheme();
+  const { data: runs, loading } = useAsync(
+    async () =>
+      (
+        await listRecords<DocflowWorkflowRun>('workflowRuns', {
+          filter: restEq('workflowId', workflowId),
+          order_by: 'createdAt[DescNullsLast]',
+          limit: RECENT_RUNS_LIMIT,
+        })
+      ).records,
+    [workflowId],
+  );
+
+  if (loading && runs === undefined) {
+    return <Message tone="hint">Загрузка…</Message>;
+  }
+
+  if ((runs ?? []).length === 0) {
+    return <Message tone="hint">Запусков ещё не было.</Message>;
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      {(runs ?? []).map((run) => (
+        <button
+          key={run.id}
+          type="button"
+          onClick={() => void openRun(run.id)}
+          style={{
+            alignItems: 'center',
+            background: 'transparent',
+            border: 'none',
+            borderTop: `1px solid ${theme.border.color.light}`,
+            color: theme.font.color.secondary,
+            cursor: 'pointer',
+            display: 'flex',
+            fontFamily: 'inherit',
+            fontSize: theme.font.size.sm,
+            gap: theme.spacing[2],
+            justifyContent: 'space-between',
+            padding: `${theme.spacing[2]} 0`,
+            textAlign: 'left',
+          }}
+        >
+          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            {formatDateTime(run.startedAt ?? run.createdAt)}
+            {run.createdBy?.name ? ` · ${run.createdBy.name}` : ''}
+          </span>
+          <StatusChip color={RUN_STATUS_COLORS[run.status ?? ''] ?? 'gray'}>
+            {RUN_STATUS_LABELS[run.status ?? ''] ?? run.status}
+          </StatusChip>
+        </button>
+      ))}
+    </div>
+  );
+};
+
+const ProcessStatusTags = ({ process }: { process: DocflowProcess }) => (
+  <>
+    <StatusChip color={process.isActive ? 'green' : 'gray'}>{process.isActive ? 'Опубликован' : 'Черновик'}</StatusChip>
+    {process.hasUnpublishedChanges && <StatusChip color="orange">Есть неопубликованные изменения</StatusChip>}
+  </>
+);
+
+// The name of the process, edited in place: saved on Enter or on leaving
+const ProcessName = ({ name, onSave }: { name: string; onSave: (name: string) => Promise<void> }) => {
+  const theme = useTheme();
+  const [value, setValue] = useState(name);
+  const [isFocused, setIsFocused] = useState(false);
+
+  const save = async () => {
+    const trimmed = value.trim();
+
+    if (trimmed.length === 0) {
+      setValue(name);
+
+      return;
+    }
+
+    if (trimmed !== name) {
+      await onSave(trimmed);
+    }
+  };
+
+  return (
+    <input
+      type="text"
+      value={value}
+      aria-label="Название процесса"
+      title="Нажмите, чтобы переименовать"
+      onChange={(event) => setValue(event.target.value)}
+      onFocus={() => setIsFocused(true)}
+      onBlur={() => {
+        setIsFocused(false);
+        void save();
+      }}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter') {
+          void save();
+        }
+
+        if (event.key === 'Escape') {
+          setValue(name);
+        }
+      }}
+      style={{
+        background: isFocused ? theme.background.transparent.lighter : 'transparent',
+        border: `1px solid ${isFocused ? theme.border.color.medium : 'transparent'}`,
+        borderRadius: theme.border.radius.sm,
+        boxSizing: 'border-box',
+        color: theme.font.color.primary,
+        fontFamily: 'inherit',
+        fontSize: theme.font.size.lg,
+        fontWeight: theme.font.weight.semiBold,
+        margin: `0 -${theme.spacing[2]}`,
+        outline: 'none',
+        padding: `${theme.spacing[1]} ${theme.spacing[2]}`,
+        width: `calc(100% + ${theme.spacing[4]})`,
+      }}
+    />
+  );
+};
+
+const ProcessPanel = ({
   process,
+  members,
+  isBusy,
   onLaunched,
+  onRename,
+  onPublish,
 }: {
   process: DocflowProcess;
+  members: WorkspaceMember[];
+  isBusy: boolean;
   onLaunched: () => void;
+  onRename: (name: string) => Promise<void>;
+  onPublish: (publish: boolean) => void;
 }) => {
   const theme = useTheme();
   const [values, setValues] = useState<FormValues>({});
@@ -130,6 +379,7 @@ const ProcessLaunchForm = ({
         values: parameters,
       });
       await enqueueSnackbar({ message: 'Процесс запущен', variant: 'success' });
+      setValues({});
       onLaunched();
     } catch (error) {
       setErrorMessage(getErrorMessage(error, 'Не удалось запустить процесс'));
@@ -138,34 +388,58 @@ const ProcessLaunchForm = ({
     }
   };
 
-  if (!process.isPublished) {
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: theme.spacing[3] }}>
-        <Message>Процесс ещё не опубликован: доделайте его в редакторе и нажмите «Активировать».</Message>
-        <Button variant="solid" size="md" fullWidth icon={IconSettings} onClick={() => void openEditor(process.workflowId)}>
-          Открыть редактор
-        </Button>
-      </div>
-    );
-  }
-
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: theme.spacing[3] }}>
-      {process.stageNames.length > 0 && (
-        <Message>Этапы: {process.stageNames.join(' → ')}</Message>
-      )}
-      {process.launchFields.length > 0 ? (
-        <FormFieldInputs fields={process.launchFields} values={values} onChange={setValues} disabled={isLaunching} />
+    <div style={{ display: 'flex', flexDirection: 'column', gap: theme.spacing[4] }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: theme.spacing[2] }}>
+        <ProcessName key={process.name} name={process.name} onSave={onRename} />
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: theme.spacing[1] }}>
+          <ProcessStatusTags process={process} />
+          {process.updatedAt && <StatusChip color="gray">Изменён {formatDate(process.updatedAt)}</StatusChip>}
+        </div>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: theme.spacing[1] }}>
+          {(!process.isActive || process.hasUnpublishedChanges) && (
+            <Button variant="solid" tone="accent" icon={IconRocket} loading={isBusy} onClick={() => onPublish(true)}>
+              {process.isActive ? 'Опубликовать изменения' : 'Опубликовать'}
+            </Button>
+          )}
+          {process.isActive && (
+            <Button icon={IconPlayerStop} disabled={isBusy} onClick={() => onPublish(false)}>
+              Снять с публикации
+            </Button>
+          )}
+          <Button icon={IconSettings} onClick={() => void openEditor(process.workflowId)}>
+            Открыть редактор
+          </Button>
+        </div>
+      </div>
+      {process.isPublished ? (
+        <section style={{ display: 'flex', flexDirection: 'column', gap: theme.spacing[3] }}>
+          <SectionTitle>Запуск</SectionTitle>
+          {process.launchFields.length > 0 ? (
+            <FormFieldInputs fields={process.launchFields} values={values} onChange={setValues} disabled={isLaunching} />
+          ) : (
+            <Message tone="hint">Процесс запускается без параметров.</Message>
+          )}
+          {errorMessage !== undefined && <Message tone="danger">{errorMessage}</Message>}
+          <Button variant="solid" tone="accent" size="md" fullWidth icon={IconPlayerPlay} loading={isLaunching} onClick={() => void handleLaunch()}>
+            Запустить
+          </Button>
+        </section>
       ) : (
-        <Message>Процесс запускается без параметров.</Message>
+        <Message tone="hint">
+          {process.isActive
+            ? 'Процесс опубликован, но запускается не вручную: его запускает событие или расписание.'
+            : 'Процесс ещё не опубликован: проверьте этапы и нажмите «Опубликовать».'}
+        </Message>
       )}
-      {errorMessage !== undefined && <Message tone="danger">{errorMessage}</Message>}
-      <Button variant="solid" size="md" fullWidth loading={isLaunching} onClick={() => void handleLaunch()}>
-        Запустить
-      </Button>
-      <Button variant="ghost" size="sm" icon={IconSettings} onClick={() => void openEditor(process.workflowId)}>
-        Изменить процесс
-      </Button>
+      <section style={{ display: 'flex', flexDirection: 'column', gap: theme.spacing[3] }}>
+        <SectionTitle>Этапы</SectionTitle>
+        <ProcessStages process={process} members={members} />
+      </section>
+      <section style={{ display: 'flex', flexDirection: 'column', gap: theme.spacing[1] }}>
+        <SectionTitle>Последние запуски</SectionTitle>
+        <RecentRuns workflowId={process.workflowId} />
+      </section>
     </div>
   );
 };
@@ -189,51 +463,83 @@ const waitForDraft = async (workflowId: string) => {
 
 const DocflowProcesses = () => {
   const theme = useTheme();
+  const { members } = useWorkspaceMembers();
   const [searchInput, setSearchInput] = useState('');
   const searchQuery = useDebouncedValue(searchInput, SEARCH_DEBOUNCE_MS);
-  const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
+  const [view, setView] = useState<ProcessView>('all');
+  const [parametersFilter, setParametersFilter] = useState<ParametersFilter>('any');
   const [sort, setSort] = useState<TableSort>({ key: 'name', direction: 'asc' });
   const [panel, setPanel] = useState<Panel>({ kind: 'closed' });
   const [renaming, setRenaming] = useState<DocflowProcess | undefined>();
   const [isCreating, setIsCreating] = useState(false);
+  const [hiddenColumns, setHiddenColumns] = useHiddenColumns(['updatedAt']);
   const { data: loaded, loading, error, reload } = useAsync(() => loadProcesses(searchQuery), [searchQuery]);
+  const workflowIdsKey = (loaded ?? []).map(({ workflowId }) => workflowId).join();
+  const { data: runCounts, reload: reloadRunCounts } = useAsync(
+    () => loadRunCounts(workflowIdsKey.length > 0 ? workflowIdsKey.split(',') : []),
+    [workflowIdsKey],
+  );
   const selectedWorkflowId = panel.kind === 'process' ? panel.workflowId : undefined;
   const selectedProcess = loaded?.find((process) => process.workflowId === selectedWorkflowId);
 
+  const byParameters = (loaded ?? []).filter((process) =>
+    parametersFilter === 'any' ? true : (process.launchFields.length > 0) === (parametersFilter === 'with'),
+  );
+  const isInView = (process: DocflowProcess, candidate: ProcessView) =>
+    candidate === 'all' ? true : candidate === 'active' ? process.isActive : !process.isActive;
+
   // The list is short: filtered and sorted here
-  const processes = (loaded ?? [])
-    .filter((process) =>
-      statusFilter === 'all' ? true : statusFilter === 'active' ? process.isPublished : !process.isPublished,
-    )
+  const processes = byParameters
+    .filter((process) => isInView(process, view))
     .sort((first, second) => {
       const direction = sort.direction === 'asc' ? 1 : -1;
+      const byKey: Record<string, (process: DocflowProcess) => number> = {
+        parameters: (process) => process.launchFields.length,
+        status: (process) => Number(process.isActive),
+        stageCount: (process) => process.stages.length,
+        runs: (process) => runCounts?.[process.workflowId]?.total ?? 0,
+        updatedAt: (process) => new Date(process.updatedAt ?? 0).getTime(),
+      };
+      const value = byKey[sort.key];
+
+      return value === undefined
+        ? first.name.localeCompare(second.name, 'ru') * direction
+        : (value(first) - value(second)) * direction;
+    });
 
-      if (sort.key === 'parameters') {
-        return (first.launchFields.length - second.launchFields.length) * direction;
-      }
+  const selection = useRowSelection(processes.map(({ workflowId }) => workflowId));
+  const selectedIds = selection.selectedIds;
 
-      if (sort.key === 'status') {
-        return (Number(first.isPublished) - Number(second.isPublished)) * direction;
-      }
+  const reloadAll = async () => {
+    await Promise.all([reload(), reloadRunCounts()]);
+  };
 
-      return first.name.localeCompare(second.name, 'ru') * direction;
-    });
+  const bulk = useBulkAction({
+    onDone: async () => {
+      selection.clear();
+      await reloadAll();
+    },
+  });
 
-  // The process goes to the Twenty trash ("Рабочие процессы → Удалённые"),
-  // its runs and tasks stay.
-  const handleDeleteProcess = async (process: DocflowProcess) => {
-    try {
-      await deleteRecord('workflows', process.workflowId);
-      setPanel((current) =>
-        current.kind === 'process' && current.workflowId === process.workflowId ? { kind: 'closed' } : current,
-      );
-      await enqueueSnackbar({ message: `Процесс «${process.name}» удалён`, variant: 'success' });
-      await reload();
-    } catch (deleteError) {
-      logDocflowError('process: delete failed', deleteError, { workflowId: process.workflowId });
-      await enqueueSnackbar({ message: getErrorMessage(deleteError, 'Не удалось удалить процесс'), variant: 'error' });
-    }
-  };
+  // The processes go to the Twenty trash ("Рабочие процессы → Удалённые"),
+  // their runs and tasks stay.
+  const removeProcesses = (ids: string[]) =>
+    bulk.run(
+      async () => {
+        await deleteRecords('workflows', ids);
+        setPanel((current) => (current.kind === 'process' && ids.includes(current.workflowId) ? { kind: 'closed' } : current));
+      },
+      ids.length === 1 ? 'Процесс удалён' : `Удалено процессов: ${ids.length}`,
+      'Не удалось удалить',
+    );
+
+  // Publishing goes through the app's route, one process at a time: the
+  // workflow engine takes a version per call.
+  const publishProcesses = (ids: string[], publish: boolean) =>
+    bulk.runEach(ids, (workflowId) => callAppRoute('/docflow/processes/publish', { workflowId, publish }), {
+      done: (count) => (publish ? `Опубликовано: ${count}` : `Снято с публикации: ${count}`),
+      failed: publish ? 'Не опубликованы' : 'Не сняты с публикации',
+    });
 
   const handleRenameProcess = async (process: DocflowProcess, name: string) => {
     try {
@@ -280,48 +586,103 @@ const DocflowProcesses = () => {
     }
   };
 
+  const rowActions = (workflowId: string): MenuAction[] => {
+    const process = processes.find((candidate) => candidate.workflowId === workflowId);
+
+    if (process === undefined) {
+      return [];
+    }
+
+    return [
+      ...(process.isPublished
+        ? [{ key: 'launch', label: 'Запустить', icon: IconPlayerPlay, onSelect: () => setPanel({ kind: 'process', workflowId }) }]
+        : []),
+      ...(!process.isActive || process.hasUnpublishedChanges
+        ? [
+            {
+              key: 'publish',
+              label: process.isActive ? 'Опубликовать изменения' : 'Опубликовать',
+              icon: IconRocket,
+              onSelect: () => void publishProcesses([workflowId], true),
+            },
+          ]
+        : []),
+      ...(process.isActive
+        ? [{ key: 'unpublish', label: 'Снять с публикации', icon: IconPlayerStop, onSelect: () => void publishProcesses([workflowId], false) }]
+        : []),
+      { key: 'edit', label: 'Открыть редактор', icon: IconSettings, onSelect: () => void openEditor(workflowId) },
+      { key: 'rename', label: 'Переименовать', icon: IconPencil, onSelect: () => setRenaming(process) },
+      {
+        key: 'delete',
+        label: 'Удалить',
+        confirmLabel: 'Точно удалить?',
+        icon: IconTrash,
+        tone: 'danger',
+        onSelect: () => void removeProcesses([workflowId]),
+      },
+    ];
+  };
+
   return (
     <DocflowRoot>
       <SplitView
-        panelTitle={selectedProcess?.name}
+        panelTitle="Процесс"
         onClosePanel={() => setPanel({ kind: 'closed' })}
         panel={
           selectedProcess !== undefined ? (
-            <ProcessLaunchForm
+            <ProcessPanel
               key={selectedProcess.workflowId}
               process={selectedProcess}
-              onLaunched={() => setPanel({ kind: 'closed' })}
+              members={members}
+              isBusy={bulk.isBusy}
+              onLaunched={() => void reloadRunCounts()}
+              onRename={(name) => handleRenameProcess(selectedProcess, name)}
+              onPublish={(publish) => void publishProcesses([selectedProcess.workflowId], publish)}
             />
           ) : undefined
         }
       >
-        <Toolbar>
-          <SearchWithFilters
-            value={searchInput}
-            onChange={setSearchInput}
-            placeholder="Поиск процессов"
-            activeFilterCount={statusFilter === 'all' ? 0 : 1}
-            onResetFilters={() => setStatusFilter('all')}
-            filters={[
+        <ListToolbar
+          search={{
+            value: searchInput,
+            onChange: setSearchInput,
+            placeholder: 'Поиск процессов',
+            activeFilterCount: parametersFilter === 'any' ? 0 : 1,
+            onResetFilters: () => setParametersFilter('any'),
+            filters: [
               {
-                key: 'status',
-                title: 'Статус',
-                value: statusFilter,
+                key: 'parameters',
+                title: 'Параметры запуска',
+                value: parametersFilter,
                 options: [
-                  { value: 'all', label: 'Все' },
-                  { value: 'active', label: 'Опубликованные' },
-                  { value: 'draft', label: 'Черновики' },
+                  { value: 'any', label: 'Любые' },
+                  { value: 'with', label: 'С параметрами' },
+                  { value: 'without', label: 'Без параметров' },
                 ],
-                onChange: (value) => setStatusFilter(value as StatusFilter),
+                onChange: (value) => setParametersFilter(value as ParametersFilter),
               },
-            ]}
-          />
-          <div style={{ marginLeft: 'auto' }}>
-            <Button variant="solid" size="sm" loading={isCreating} onClick={() => void handleCreate()}>
-              Создать
-            </Button>
-          </div>
-        </Toolbar>
+            ],
+          }}
+          views={
+            <ViewTabs
+              value={view}
+              onChange={(next) => {
+                setView(next);
+                selection.clear();
+              }}
+              options={VIEWS.map((option) => ({
+                ...option,
+                count: loaded === undefined ? undefined : byParameters.filter((process) => isInView(process, option.value)).length,
+              }))}
+            />
+          }
+          total={loaded === undefined ? undefined : formatTotal(processes.length, undefined, PROCESS_NOUN)}
+          columns={{ columns: COLUMNS, hiddenKeys: hiddenColumns, onChange: setHiddenColumns }}
+          onRefresh={() => void reloadAll()}
+          isRefreshing={loading}
+          onCreate={() => void handleCreate()}
+          isCreating={isCreating}
+        />
         {error !== undefined && (
           <div style={{ padding: theme.spacing[4] }}>
             <Message tone="danger">{getErrorMessage(error, 'Не удалось загрузить процессы')}</Message>
@@ -333,58 +694,77 @@ const DocflowProcesses = () => {
         )}
         {processes.length > 0 && (
           <DataTable
-            columns={[
-              { key: 'name', label: 'Процесс', width: '36%', sortKey: 'name' },
-              { key: 'status', label: 'Статус', width: '18%', sortKey: 'status' },
-              { key: 'parameters', label: 'Параметры', width: '14%', sortKey: 'parameters' },
-              { key: 'stages', label: 'Этапы' },
-            ]}
+            columns={COLUMNS}
+            hiddenColumnKeys={hiddenColumns}
             sort={sort}
             onSortChange={setSort}
             selectedRowId={selectedWorkflowId}
+            selectedIds={selectedIds}
+            onSelectionChange={selection.setSelectedIds}
             onRowClick={(workflowId) => setPanel({ kind: 'process', workflowId })}
-            rowActions={(workflowId) => {
-              const process = processes.find((candidate) => candidate.workflowId === workflowId);
-
-              if (process === undefined) {
-                return [];
-              }
-
-              return [
-                ...(process.isPublished
-                  ? [{ key: 'launch', label: 'Запустить', icon: IconPlayerPlay, onSelect: () => setPanel({ kind: 'process', workflowId }) }]
-                  : []),
-                { key: 'edit', label: 'Открыть редактор', icon: IconSettings, onSelect: () => void openEditor(workflowId) },
-                { key: 'rename', label: 'Переименовать', icon: IconPencil, onSelect: () => setRenaming(process) },
-                {
-                  key: 'delete',
-                  label: 'Удалить',
-                  confirmLabel: 'Точно удалить?',
-                  icon: IconTrash,
-                  tone: 'danger' as const,
-                  onSelect: () => void handleDeleteProcess(process),
-                },
-              ];
-            }}
+            rowActions={rowActions}
             rows={processes.map((process) => {
               const parameterCount = process.launchFields.length;
+              const counts = runCounts?.[process.workflowId];
 
               return {
                 id: process.workflowId,
                 cells: {
                   name: process.name,
                   status: (
-                    <Tag color={process.isPublished ? 'green' : 'gray'}>
-                      {process.isPublished ? 'Опубликован' : 'Черновик'}
-                    </Tag>
+                    <span style={{ display: 'inline-flex', gap: theme.spacing[1] }}>
+                      <StatusChip color={process.isActive ? 'green' : 'gray'}>
+                        {process.isActive ? 'Опубликован' : 'Черновик'}
+                      </StatusChip>
+                      {process.hasUnpublishedChanges && <StatusChip color="orange">Изменён</StatusChip>}
+                    </span>
                   ),
                   parameters: parameterCount > 0 ? String(parameterCount) : 'нет',
-                  stages: process.stageNames.join(' → '),
+                  stageCount: String(process.stages.length),
+                  runs:
+                    counts === undefined ? (
+                      '…'
+                    ) : (
+                      <span>
+                        {counts.total}
+                        {counts.running > 0 && <span style={{ color: theme.color.blue }}> · идёт {counts.running}</span>}
+                      </span>
+                    ),
+                  stages: process.stages.map(({ name }) => name).join(' → ') || '—',
+                  updatedAt: formatDate(process.updatedAt),
                 },
               };
             })}
           />
         )}
+        <SelectionBar count={selectedIds.length} noun={PROCESS_NOUN} onClear={selection.clear}>
+          {selectedIds.length === 1 && (
+            <Button icon={IconSettings} onClick={() => void openEditor(selectedIds[0])}>
+              Открыть редактор
+            </Button>
+          )}
+          <Button icon={IconRocket} loading={bulk.isBusy} onClick={() => void publishProcesses(selectedIds, true)}>
+            Опубликовать
+          </Button>
+          <Button icon={IconPlayerStop} disabled={bulk.isBusy} onClick={() => void publishProcesses(selectedIds, false)}>
+            Снять с публикации
+          </Button>
+          <MenuButton
+            label="Удалить"
+            icon={IconTrash}
+            disabled={bulk.isBusy}
+            actions={[
+              {
+                key: 'delete',
+                label: `Удалить выбранные (${selectedIds.length})`,
+                confirmLabel: 'Точно удалить? Запуски и задания останутся',
+                icon: IconTrash,
+                tone: 'danger',
+                onSelect: () => void removeProcesses(selectedIds),
+              },
+            ]}
+          />
+        </SelectionBar>
       </SplitView>
       {renaming !== undefined && (
         <PromptDialog