@loom-framework/core 0.1.0-alpha.16 → 0.1.0-alpha.160

package/dist/cli/templates/process-management-page.js

@@ -0,0 +1,902 @@
+/**
+ * ProcessManagementPage Template
+ *
+ * Follows SkillManagementPage patterns: flex column layout, breadcrumb,
+ * theme tokens, showLine/blockNode tree, i18n, Card wrapper.
+ */
+export function processManagementPageTemplate() {
+    return `import React, { useState, useEffect, useCallback, useMemo, useContext, useRef } from 'react';
+import {
+  Card,
+  Tree,
+  Tabs,
+  Table,
+  Tag,
+  Button,
+  Modal,
+  Spin,
+  Segmented,
+  Dropdown,
+  Flex,
+  Breadcrumb,
+  Space,
+  Descriptions,
+  Tooltip,
+  Timeline,
+  Empty,
+  message,
+  Typography,
+  theme,
+} from 'antd';
+import {
+  PlayCircleOutlined,
+  PauseCircleOutlined,
+  DeleteOutlined,
+  ReloadOutlined,
+  PlusOutlined,
+  FileTextOutlined,
+  FolderOutlined,
+  ClockCircleOutlined,
+  ThunderboltOutlined,
+  CalendarOutlined,
+  ExclamationCircleOutlined,
+  MoreOutlined,
+  HomeOutlined,
+  EyeOutlined,
+  CodeOutlined,
+  MessageOutlined,
+} from '@ant-design/icons';
+import {
+  useLocale, useLoomTheme, useAppShell, registerMessages,
+  SkillFileViewer,
+  fetchProcesses, fetchProcess,
+  fetchProcessLogs, fetchProcessMetrics, fetchProcessMetricsConfig,
+  fetchProcessMetricsSnapshots, fetchProcessMetricsViewConfig,
+  fetchProcessFiles, fetchProcessFileContent,
+  runProcess, pauseProcess, resumeProcess, deleteProcess,
+  getFileIcon,
+  AIContext,
+} from '@loom-framework/frontend-antd';
+import type {
+  ProcessInfo, ProcessLogEntry, ProcessMetricsAggregate, FileContent,
+  ProcessMetricSnapshot, ProcessMetricsViewConfig,
+} from '@loom-framework/frontend-antd';
+import { DashboardChart } from '@loom-framework/frontend-antd';
+
+const { Text } = Typography;
+
+interface ProcessTreeNode {
+  key: string;
+  title: string;
+  icon: React.ReactNode;
+  isLeaf: boolean;
+  isFile?: boolean;
+  isDir?: boolean;
+  isProcess?: boolean;
+  filePath?: string;
+  processName?: string;
+  children?: ProcessTreeNode[];
+}
+
+registerMessages('zh-CN', {
+  'process.title': '过程管理',
+  'process.create': '创建过程',
+  'process.createDisabledHint': '过程创建比较复杂，在 AI 对话框输入「我要创建一个 xxx 过程」，让 Loom 帮助你吧！^_^',
+  'process.delete': '删除',
+  'process.run': '立即执行',
+  'process.pause': '暂停',
+  'process.resume': '恢复',
+  'process.overview': '概览',
+  'process.logs': '日志',
+  'process.metrics': '指标',
+  'process.name': '名称',
+  'process.status': '状态',
+  'process.trigger': '触发器',
+  'process.owner': '负责人',
+  'process.mode': '模式',
+  'process.modeLightweight': '轻量',
+  'process.modeFull': '完整',
+  'process.statusIdle': '空闲',
+  'process.statusRunning': '运行中',
+  'process.statusBusy': '繁忙',
+  'process.statusPaused': '已暂停',
+  'process.statusError': '错误',
+  'process.noProcesses': '暂无过程',
+  'process.noMetrics': '未配置指标',
+  'process.noLogs': '暂无执行日志',
+  'process.queue': '执行队列',
+  'process.queueRunning': '运行中',
+  'process.queueQueued': '等待中',
+  'process.cron': '定时触发',
+  'process.event': '事件触发',
+  'process.manual': '手动触发',
+  'process.lastRun': '上次执行',
+  'process.nextRun': '下次执行',
+  'process.duration': '耗时',
+  'process.confirmDelete': '确认删除',
+  'process.confirmDeleteContent': '确定要删除过程「{name}」吗？',
+  'process.processNotFound': '未找到 PROCESS.md，请先运行 loom process generate',
+  'process.createViaAI': '使用 AI 创建过程',
+  'process.refresh': '刷新',
+  'process.more': '更多',
+  'process.prompt': '提示词',
+  'process.description': '描述',
+  'process.runTriggered': '已触发执行，Run ID: {runId}',
+  'process.runFailed': '执行触发失败',
+  'process.pauseFailed': '暂停失败',
+  'process.resumeFailed': '恢复失败',
+  'process.deleteFailed': '删除失败',
+  'process.loadFailed': '加载过程列表失败',
+  'process.loadDetailFailed': '加载过程详情失败',
+  'process.processDetail': '过程详情',
+  'process.selectToView': '选择左侧过程或文件以查看详情',
+  'process.preview': '预览',
+  'process.source': '源码',
+  'process.colDate': '日期',
+  'process.colTotal': '总执行',
+  'process.colCompleted': '成功',
+  'process.colFailed': '失败',
+  'process.colTimeout': '超时',
+  'process.colAvgDuration': '平均耗时',
+  'process.colRunId': '执行 ID',
+  'process.colTriggerType': '触发类型',
+  'process.colResult': '结果',
+  'process.colTime': '时间',
+  'process.viewSession': '查看 AI 会话',
+  'process.businessMetrics': '业务指标',
+  'process.operationalMetrics': '运行统计',
+  'process.noBusinessMetrics': '暂无业务指标数据',
+  'process.metricValue': '指标值',
+  'process.metricTarget': '目标',
+  'process.metricTrend': '趋势',
+});
+
+registerMessages('en-US', {
+  'process.title': 'Process Management',
+  'process.create': 'Create Process',
+  'process.createDisabledHint': 'Process creation is complex. Type "I want to create a xxx process" in the AI chat and let Loom help you! ^_^',
+  'process.delete': 'Delete',
+  'process.run': 'Run Now',
+  'process.pause': 'Pause',
+  'process.resume': 'Resume',
+  'process.overview': 'Overview',
+  'process.logs': 'Logs',
+  'process.metrics': 'Metrics',
+  'process.name': 'Name',
+  'process.status': 'Status',
+  'process.trigger': 'Trigger',
+  'process.owner': 'Owner',
+  'process.mode': 'Mode',
+  'process.modeLightweight': 'Lightweight',
+  'process.modeFull': 'Full',
+  'process.statusIdle': 'Idle',
+  'process.statusRunning': 'Running',
+  'process.statusBusy': 'Busy',
+  'process.statusPaused': 'Paused',
+  'process.statusError': 'Error',
+  'process.noProcesses': 'No processes',
+  'process.noMetrics': 'No metrics configured',
+  'process.noLogs': 'No execution logs',
+  'process.queue': 'Execution Queue',
+  'process.queueRunning': 'Running',
+  'process.queueQueued': 'Queued',
+  'process.cron': 'Cron Trigger',
+  'process.event': 'Event Trigger',
+  'process.manual': 'Manual Trigger',
+  'process.lastRun': 'Last Run',
+  'process.nextRun': 'Next Run',
+  'process.duration': 'Duration',
+  'process.confirmDelete': 'Confirm Delete',
+  'process.confirmDeleteContent': 'Are you sure you want to delete process "{name}"?',
+  'process.processNotFound': 'PROCESS.md not found. Run loom process generate first',
+  'process.createViaAI': 'Create Process with AI',
+  'process.refresh': 'Refresh',
+  'process.more': 'More',
+  'process.prompt': 'Prompt',
+  'process.description': 'Description',
+  'process.runTriggered': 'Process triggered. Run ID: {runId}',
+  'process.runFailed': 'Failed to trigger process',
+  'process.pauseFailed': 'Failed to pause',
+  'process.resumeFailed': 'Failed to resume',
+  'process.deleteFailed': 'Failed to delete',
+  'process.loadFailed': 'Failed to load processes',
+  'process.loadDetailFailed': 'Failed to load process detail',
+  'process.processDetail': 'Process Details',
+  'process.selectToView': 'Select a process or file to view details',
+  'process.preview': 'Preview',
+  'process.source': 'Source',
+  'process.colDate': 'Date',
+  'process.colTotal': 'Total',
+  'process.colCompleted': 'Completed',
+  'process.colFailed': 'Failed',
+  'process.colTimeout': 'Timeout',
+  'process.colAvgDuration': 'Avg Duration',
+  'process.colRunId': 'Run ID',
+  'process.colTriggerType': 'Trigger',
+  'process.colResult': 'Result',
+  'process.colTime': 'Time',
+  'process.viewSession': 'View AI Session',
+  'process.businessMetrics': 'Business Metrics',
+  'process.operationalMetrics': 'Operational Metrics',
+  'process.noBusinessMetrics': 'No business metrics data',
+  'process.metricValue': 'Value',
+  'process.metricTarget': 'Target',
+  'process.metricTrend': 'Trend',
+});
+
+const STATUS_COLORS: Record<string, string> = {
+  idle: 'default',
+  running: 'processing',
+  busy: 'orange',
+  paused: 'warning',
+  error: 'error',
+};
+
+const STATUS_ICONS: Record<string, React.ReactNode> = {
+  idle: <ClockCircleOutlined />,
+  running: <PlayCircleOutlined />,
+  busy: <ThunderboltOutlined />,
+  paused: <PauseCircleOutlined />,
+  error: <ExclamationCircleOutlined />,
+};
+
+const TRIGGER_ICONS: Record<string, React.ReactNode> = {
+  cron: <CalendarOutlined />,
+  event: <ThunderboltOutlined />,
+  manual: <PlayCircleOutlined />,
+};
+
+export default function ProcessManagementPage(): React.ReactElement {
+  const { mode } = useLoomTheme();
+  const { t } = useLocale();
+  const { breadcrumbs, onNavClick } = useAppShell();
+  const { token } = theme.useToken();
+  const aiContext = useContext(AIContext);
+
+  const [processes, setProcesses] = useState<ProcessInfo[]>([]);
+  const [treeData, setTreeData] = useState<ProcessTreeNode[]>([]);
+  const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
+  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
+  const [selectedProcess, setSelectedProcess] = useState<(ProcessInfo & { status?: string }) | null>(null);
+  const [fileContent, setFileContent] = useState<FileContent | null>(null);
+  const [processMdContent, setProcessMdContent] = useState<FileContent | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [viewMode, setViewMode] = useState<'preview' | 'source'>('preview');
+  const [activeTab, setActiveTab] = useState('overview');
+  const [logs, setLogs] = useState<ProcessLogEntry[]>([]);
+  const [metrics, setMetrics] = useState<ProcessMetricsAggregate[]>([]);
+  const [metricsConfig, setMetricsConfig] = useState<Record<string, unknown>[]>([]);
+  const [metricSnapshots, setMetricSnapshots] = useState<ProcessMetricSnapshot[]>([]);
+  const [metricsViewConfig, setMetricsViewConfig] = useState<ProcessMetricsViewConfig | null>(null);
+  const [executing, setExecuting] = useState(false);
+
+  const buildTreeData = useCallback((processList: ProcessInfo[]): ProcessTreeNode[] => {
+    return processList.map((proc) => {
+      const children: ProcessTreeNode[] = [];
+
+      if (proc.hasProcessFile) {
+        children.push({
+          key: \`\${proc.name}/PROCESS.md\`,
+          title: 'PROCESS.md',
+          icon: <FileTextOutlined style={{ color: token.colorPrimary }} />,
+          isLeaf: true,
+          isFile: true,
+          filePath: 'PROCESS.md',
+          processName: proc.name,
+        });
+        children.push({
+          key: \`\${proc.name}/references\`,
+          title: 'references/',
+          icon: <FolderOutlined style={{ color: token.colorWarning }} />,
+          isLeaf: false,
+          isFile: false,
+          isDir: true,
+          filePath: 'references',
+          children: [],
+          processName: proc.name,
+        });
+      }
+
+      return {
+        key: proc.name,
+        title: proc.name,
+        icon: proc.hasProcessFile ? <FolderOutlined /> : <ThunderboltOutlined style={{ color: token.colorWarning }} />,
+        isLeaf: false,
+        isFile: false,
+        isProcess: true,
+        children,
+        processName: proc.name,
+      };
+    });
+  }, [token]);
+
+  const loadProcesses = useCallback(async () => {
+    setLoading(true);
+    try {
+      const result = await fetchProcesses();
+      const list = result.data ?? [];
+      setProcesses(list);
+      setTreeData(buildTreeData(list));
+      setExpandedKeys(list.map((p) => p.name));
+    } catch {
+      // error handled silently
+    } finally {
+      setLoading(false);
+    }
+  }, [buildTreeData]);
+
+  useEffect(() => { loadProcesses(); }, [loadProcesses]);
+
+  // Auto-refresh every 5 seconds, pause when tab is hidden
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  useEffect(() => {
+    const poll = () => {
+      if (document.visibilityState === 'visible') {
+        loadProcesses();
+      }
+    };
+    pollRef.current = setInterval(poll, 5000);
+    const handleVisibility = () => {
+      if (document.visibilityState === 'visible') {
+        poll(); // Immediate refresh when tab becomes visible
+      }
+    };
+    document.addEventListener('visibilitychange', handleVisibility);
+    return () => {
+      if (pollRef.current) clearInterval(pollRef.current);
+      document.removeEventListener('visibilitychange', handleVisibility);
+    };
+  }, [loadProcesses]);
+
+  const loadDirChildren = useCallback(async (processName: string, dirName: string): Promise<ProcessTreeNode[]> => {
+    const data = await fetchProcessFiles(processName);
+    const dirFiles = data.filter((f) => f.path.startsWith(\`\${dirName}/\`) && !f.isDirectory);
+
+    const dirChildren: ProcessTreeNode[] = [];
+    for (const f of dirFiles) {
+      const relativePath = f.path.slice(dirName.length + 1);
+      const parts = relativePath.split('/');
+
+      let currentLevel = dirChildren;
+      for (let i = 0; i < parts.length; i++) {
+        const part = parts[i]!;
+        const isLast = i === parts.length - 1;
+        const partialPath = \`\${dirName}/\${parts.slice(0, i + 1).join('/')}\`;
+
+        if (isLast) {
+          currentLevel.push({
+            key: \`\${processName}/\${f.path}\`,
+            title: part,
+            icon: getFileIcon(part, { primary: token.colorPrimary, warning: token.colorWarning, success: token.colorSuccess }),
+            isLeaf: true,
+            isFile: true,
+            filePath: f.path,
+            processName,
+          });
+        } else {
+          let dirNode = currentLevel.find((n) => n.isDir && n.filePath === partialPath);
+          if (!dirNode) {
+            dirNode = {
+              key: \`\${processName}/\${partialPath}\`,
+              title: \`\${part}/\`,
+              icon: <FolderOutlined style={{ color: token.colorWarning }} />,
+              isLeaf: false,
+              isFile: false,
+              isDir: true,
+              filePath: partialPath,
+              children: [],
+              processName,
+            };
+            currentLevel.push(dirNode);
+          }
+          currentLevel = dirNode.children!;
+        }
+      }
+    }
+    return dirChildren;
+  }, [token]);
+
+  const handleTreeExpand = useCallback(
+    async (keys: React.Key[], info: { node: ProcessTreeNode; expanded: boolean }) => {
+      setExpandedKeys(keys);
+      if (!info.expanded) return;
+      const node = info.node;
+      if (node.processName && node.isDir) {
+        if (node.children && node.children.length > 0) return;
+        const dirName = node.filePath || node.title.replace(/\\/$/, '');
+        const dirChildren = await loadDirChildren(node.processName, dirName);
+
+        const updateNode = (nodes: ProcessTreeNode[]): ProcessTreeNode[] =>
+          nodes.map((n) => {
+            if (n.key === node.key) {
+              return { ...n, children: dirChildren };
+            }
+            if (n.children) {
+              return { ...n, children: updateNode(n.children) };
+            }
+            return n;
+          });
+
+        setTreeData((prev) => updateNode(prev));
+      }
+    },
+    [loadDirChildren],
+  );
+
+  const selectProcess = useCallback(async (name: string) => {
+    try {
+      const data = await fetchProcess(name);
+      setSelectedProcess(data);
+      setFileContent(null);
+      setProcessMdContent(null);
+      setLogs([]);
+      setMetrics([]);
+      setMetricsConfig([]);
+      setMetricSnapshots([]);
+      setMetricsViewConfig(null);
+      setActiveTab('overview');
+      if (data.hasProcessFile) {
+        try {
+          const mdContent = await fetchProcessFileContent(name, 'PROCESS.md');
+          setProcessMdContent({ content: mdContent, path: 'PROCESS.md' });
+        } catch { /* ignore */ }
+      }
+    } catch {
+      // error handled silently
+    }
+  }, []);
+
+  const handleTreeSelect = useCallback(
+    async (keys: React.Key[], info: { node: ProcessTreeNode }) => {
+      setSelectedKeys(keys);
+      if (keys.length === 0) {
+        setSelectedProcess(null);
+        setFileContent(null);
+        return;
+      }
+      const node = info.node;
+
+      if (node.isFile && node.processName && node.filePath) {
+        setLoading(true);
+        try {
+          if (node.filePath === 'PROCESS.md') {
+            await selectProcess(node.processName);
+          } else {
+            const content = await fetchProcessFileContent(node.processName, node.filePath);
+            setFileContent({ content, path: node.filePath });
+            setSelectedProcess(null);
+            setProcessMdContent(null);
+          }
+        } catch {
+          // error handled silently
+        } finally {
+          setLoading(false);
+        }
+      } else if (node.isProcess && node.processName) {
+        await selectProcess(node.processName);
+      }
+    },
+    [selectProcess],
+  );
+
+  const handleRun = useCallback(async () => {
+    if (!selectedProcess) return;
+    setExecuting(true);
+    try {
+      const result = await runProcess(selectedProcess.name);
+      message.success(t('process.runTriggered', { runId: result.runId }));
+      // Immediate refresh to show Running status
+      await loadProcesses();
+      selectProcess(selectedProcess.name);
+    } catch {
+      message.error(t('process.runFailed'));
+    } finally {
+      setExecuting(false);
+    }
+  }, [selectedProcess, loadProcesses, selectProcess, t]);
+
+  const handlePause = useCallback(async () => {
+    if (!selectedProcess) return;
+    try {
+      await pauseProcess(selectedProcess.name);
+      loadProcesses();
+      selectProcess(selectedProcess.name);
+    } catch {
+      message.error(t('process.pauseFailed'));
+    }
+  }, [selectedProcess, loadProcesses, selectProcess]);
+
+  const handleResume = useCallback(async () => {
+    if (!selectedProcess) return;
+    try {
+      await resumeProcess(selectedProcess.name);
+      loadProcesses();
+      selectProcess(selectedProcess.name);
+    } catch {
+      message.error(t('process.resumeFailed'));
+    }
+  }, [selectedProcess, loadProcesses, selectProcess]);
+
+  const handleDelete = useCallback(
+    async (processName: string) => {
+      try {
+        await deleteProcess(processName);
+        setSelectedProcess(null);
+        setFileContent(null);
+        setSelectedKeys([]);
+        loadProcesses();
+      } catch {
+        message.error(t('process.deleteFailed'));
+      }
+    },
+    [loadProcesses, t],
+  );
+
+  const loadLogs = useCallback(async () => {
+    if (!selectedProcess) return;
+    try {
+      const data = await fetchProcessLogs(selectedProcess.name, 50);
+      setLogs(data);
+    } catch { /* ignore */ }
+  }, [selectedProcess]);
+
+  const loadMetrics = useCallback(async () => {
+    if (!selectedProcess) return;
+    try {
+      const [m, c, snapshots, viewConfig] = await Promise.all([
+        fetchProcessMetrics(selectedProcess.name),
+        fetchProcessMetricsConfig(selectedProcess.name),
+        fetchProcessMetricsSnapshots(selectedProcess.name),
+        fetchProcessMetricsViewConfig(selectedProcess.name),
+      ]);
+      setMetrics(m);
+      setMetricsConfig(c);
+      setMetricSnapshots(snapshots);
+      setMetricsViewConfig(viewConfig);
+    } catch { /* ignore */ }
+  }, [selectedProcess]);
+
+  const handleTabChange = useCallback((key: string) => {
+    setActiveTab(key);
+    if (key === 'logs') loadLogs();
+    if (key === 'metrics') loadMetrics();
+  }, [loadLogs, loadMetrics]);
+
+  const rightTitle = useMemo(() => {
+    if (selectedProcess) return \`\${selectedProcess.name}\`;
+    if (fileContent) return fileContent.path;
+    return t('process.processDetail');
+  }, [selectedProcess, fileContent, t]);
+
+  // Build status tag for tree node
+  const getStatusColor = useCallback((proc: ProcessInfo) => {
+    const status = proc.status ?? 'idle';
+    return STATUS_COLORS[status] ?? 'default';
+  }, []);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
+      <Flex justify="space-between" align="center" style={{ marginBottom: 12 }}>
+        <Breadcrumb items={[{ title: <HomeOutlined onClick={() => onNavClick?.('')} style={{ cursor: 'pointer' }} /> }, ...(breadcrumbs || []).map(b => ({ title: b.path ? <a onClick={() => onNavClick?.(b.path!)}>{b.title}</a> : b.title }))]} />
+        <Space>
+          <Button icon={<ReloadOutlined />} onClick={loadProcesses} loading={loading}>
+            {t('process.refresh')}
+          </Button>
+          <Tooltip title={t('process.createDisabledHint')}>
+            <Button type="primary" icon={<PlusOutlined />} disabled>
+              {t('process.create')}
+            </Button>
+          </Tooltip>
+          <Dropdown
+            menu={{
+              items: selectedProcess
+                ? [
+                    {
+                      key: 'delete',
+                      label: t('process.delete'),
+                      icon: <DeleteOutlined />,
+                      danger: true,
+                      onClick: () => {
+                        Modal.confirm({
+                          title: t('process.confirmDelete'),
+                          content: t('process.confirmDeleteContent', { name: selectedProcess.name }),
+                          okType: 'danger',
+                          onOk: () => handleDelete(selectedProcess.name),
+                        });
+                      },
+                    },
+                  ]
+                : [],
+            }}
+          >
+            <Button icon={<MoreOutlined />} disabled={!selectedProcess}>
+              {t('process.more')}
+            </Button>
+          </Dropdown>
+        </Space>
+      </Flex>
+
+      <Spin spinning={loading && !selectedProcess && !fileContent}>
+        <div style={{ display: 'flex', height: '100%', padding: 16, gap: 16, overflow: 'hidden' }}>
+          <div style={{ width: 300, minWidth: 240, maxWidth: 500, overflow: 'auto', flexShrink: 0 }}>
+            <Tree<ProcessTreeNode>
+              treeData={treeData as unknown as any}
+              selectedKeys={selectedKeys}
+              expandedKeys={expandedKeys}
+              showLine={{ showLeafIcon: false }}
+              blockNode
+              onSelect={handleTreeSelect}
+              onExpand={handleTreeExpand}
+              style={{ fontSize: 14 }}
+              titleRender={(node: any) => (
+                <Flex align="center" gap={4}>
+                  {node.icon}
+                  <span>{node.title}</span>
+                  {node.isProcess && (() => {
+                    const proc = processes.find(p => p.name === node.processName);
+                    if (!proc) return null;
+                    const status = proc.status ?? 'idle';
+                    const statusLabel = status === 'running' ? t('process.statusRunning')
+                      : status === 'busy' ? t('process.statusBusy')
+                      : status === 'paused' ? t('process.statusPaused')
+                      : status === 'error' ? t('process.statusError')
+                      : t('process.statusIdle');
+                    return (
+                      <Tag color={STATUS_COLORS[status]} icon={STATUS_ICONS[status]} style={{ fontSize: 11, lineHeight: '16px', padding: '0 4px', marginRight: 0 }}>
+                        {statusLabel}
+                      </Tag>
+                    );
+                  })()}
+                </Flex>
+              )}
+            />
+          </div>
+
+          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', minHeight: 0 }}>
+            <Card
+              size="small"
+              style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}
+              styles={{ body: { padding: 16, flex: 1, overflow: 'auto', minHeight: 0 } }}
+              title={
+                <Flex align="center" gap="small">
+                  <span>{rightTitle}</span>
+                  {((fileContent && !selectedProcess) || (selectedProcess && processMdContent)) && (
+                    <Segmented
+                      size="small"
+                      options={[
+                        { label: t('process.preview'), value: 'preview', icon: <EyeOutlined /> },
+                        { label: t('process.source'), value: 'source', icon: <CodeOutlined /> },
+                      ]}
+                      value={viewMode}
+                      onChange={(v) => setViewMode(v as 'preview' | 'source')}
+                    />
+                  )}
+                </Flex>
+              }
+            >
+              {selectedProcess ? (
+                <Tabs
+                  activeKey={activeTab}
+                  onChange={handleTabChange}
+                  items={[
+                    {
+                      key: 'overview',
+                      label: t('process.overview'),
+                      children: (
+                        <Space direction="vertical" style={{ width: '100%' }} size="middle">
+                          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                            <Space>
+                              <Tag color={STATUS_COLORS[selectedProcess.status ?? 'idle']} icon={STATUS_ICONS[selectedProcess.status ?? 'idle']}>
+                                {(() => {
+                                  const s = selectedProcess.status ?? 'idle';
+                                  return s === 'running' ? t('process.statusRunning')
+                                    : s === 'busy' ? t('process.statusBusy')
+                                    : s === 'paused' ? t('process.statusPaused')
+                                    : s === 'error' ? t('process.statusError')
+                                    : t('process.statusIdle');
+                                })()}
+                              </Tag>
+                              <Tag>{selectedProcess.hasProcessFile ? t('process.modeFull') : t('process.modeLightweight')}</Tag>
+                            </Space>
+                            <Space>
+                              <Tooltip title={selectedProcess.paused ? t('process.resume') : t('process.pause')}>
+                                <Button icon={selectedProcess.paused ? <PlayCircleOutlined /> : <PauseCircleOutlined />}
+                                  onClick={selectedProcess.paused ? handleResume : handlePause} />
+                              </Tooltip>
+                              <Tooltip title={t('process.run')}>
+                                <Button type="primary" icon={<PlayCircleOutlined />} onClick={handleRun} loading={executing} />
+                              </Tooltip>
+                            </Space>
+                          </div>
+
+                          <Descriptions bordered column={2} size="small"
+                            styles={{ label: { width: 120, fontWeight: 500, backgroundColor: token.colorFillQuaternary } }}
+                            items={[
+                              { key: 'trigger', label: t('process.trigger'), children: (
+                                <Space>
+                                  {selectedProcess.cron && <Tag icon={<CalendarOutlined />}>{selectedProcess.cron}</Tag>}
+                                  {selectedProcess.onEvent && <Tag icon={<ThunderboltOutlined />}>{selectedProcess.onEvent}</Tag>}
+                                  {!selectedProcess.cron && !selectedProcess.onEvent && <Tag>{t('process.manual')}</Tag>}
+                                </Space>
+                              )},
+                              { key: 'owner', label: t('process.owner'), children: selectedProcess.owner },
+                              ...(selectedProcess.description ? [{ key: 'desc', label: t('process.description'), children: selectedProcess.description }] : []),
+                              ...(selectedProcess.prompt ? [{ key: 'prompt', label: t('process.prompt'), children: <Text code style={{ whiteSpace: 'pre-wrap', fontSize: 12, maxWidth: 400, display: 'inline-block' }}>{selectedProcess.prompt}</Text> }] : []),
+                            ]}
+                          />
+
+                          {selectedProcess.hasProcessFile && processMdContent && (
+                            <SkillFileViewer
+                              skillDetail={null}
+                              fileContent={processMdContent}
+                              viewMode={viewMode}
+                              onViewModeChange={setViewMode}
+                              mode={mode}
+                              token={token}
+                              t={t}
+                            />
+                          )}
+                        </Space>
+                      ),
+                    },
+                    {
+                      key: 'logs',
+                      label: t('process.logs'),
+                      children: (
+                        <Space direction="vertical" style={{ width: '100%' }}>
+                          <Button icon={<ReloadOutlined />} onClick={loadLogs} size="small">
+                            {t('process.refresh')}
+                          </Button>
+                          {logs.length === 0 ? (
+                            <Empty description={t('process.noLogs')} />
+                          ) : (
+                            <Timeline
+                              items={logs.map(log => ({
+                                color: log.status === 'completed' ? 'green' : log.status === 'failed' ? 'red' : log.status === 'timeout' ? 'orange' : 'blue',
+                                content: (
+                                  <div>
+                                    <Space>
+                                      <Tooltip title={log.runId}>
+                                        <Text strong>{log.runId.slice(0, 12)}</Text>
+                                      </Tooltip>
+                                      <Tag icon={TRIGGER_ICONS[log.triggerType]}>{log.triggerType}</Tag>
+                                      <Tag color={log.status === 'completed' ? 'success' : 'error'}>{log.status}</Tag>
+                                      {log.sessionId && aiContext?.switchToSession && (
+                                        <Tooltip title={t('process.viewSession')}>
+                                          <Button type="link" size="small" icon={<MessageOutlined />} onClick={() => aiContext.switchToSession!(log.sessionId)} />
+                                        </Tooltip>
+                                      )}
+                                    </Space>
+                                    <div>
+                                      <Text type="secondary">{new Date(log.startedAt).toLocaleString()}</Text>
+                                      {log.durationMs > 0 && <Text type="secondary"> · {(log.durationMs / 1000).toFixed(1)}s</Text>}
+                                    </div>
+                                    {log.error && <Text type="danger" style={{ fontSize: 12 }}>{log.error}</Text>}
+                                  </div>
+                                ),
+                              }))}
+                            />
+                          )}
+                        </Space>
+                      ),
+                    },
+                    ...(selectedProcess.hasProcessFile ? [{
+                      key: 'metrics',
+                      label: t('process.metrics'),
+                      children: (
+                        <Space direction="vertical" style={{ width: '100%' }} size="large">
+                          {/* Business Metrics — agent-reported */}
+                          {metricsViewConfig && metricsViewConfig.metrics.length > 0 && (
+                            <div>
+                              <Text strong style={{ fontSize: 14, marginBottom: 8, display: 'block' }}>{t('process.businessMetrics')}</Text>
+                              <div style={{ display: 'grid', gridTemplateColumns: \`repeat(auto-fill, minmax(200px, 1fr))\`, gap: 12, marginBottom: 16 }}>
+                                {metricsViewConfig.metrics.map((m) => {
+                                  const latestSnapshot = [...metricSnapshots].filter(s => s.metricName === m.metricName).sort((a, b) => b.timestamp.localeCompare(a.timestamp))[0];
+                                  const trend = (() => {
+                                    const ms = metricSnapshots.filter(s => s.metricName === m.metricName).sort((a, b) => a.timestamp.localeCompare(b.timestamp));
+                                    if (ms.length < 2) return null;
+                                    const diff = ms[ms.length - 1]!.value - ms[0]!.value;
+                                    if (diff === 0) return { color: 'default', label: '→' };
+                                    const good = m.direction === 'decreasing' ? diff < 0 : m.direction === 'increasing' ? diff > 0 : true;
+                                    return { color: good ? 'success' : 'error', label: diff > 0 ? '↑' : '↓' };
+                                  })();
+                                  return (
+                                    <Card key={m.metricName} size="small">
+                                      <div style={{ fontSize: 12, color: token.colorTextSecondary }}>{m.title}</div>
+                                      <div style={{ fontSize: 24, fontWeight: 600, marginTop: 4 }}>
+                                        {latestSnapshot ? \`\${latestSnapshot.value}\${latestSnapshot.unit ?? m.unit ?? ''}\` : '-'}
+                                        {trend && <Tag color={trend.color} style={{ marginLeft: 6, fontSize: 12 }}>{trend.label}</Tag>}
+                                      </div>
+                                      {m.target !== undefined && <div style={{ fontSize: 11, color: token.colorTextTertiary }}>Target: {m.target}{m.unit ?? ''}</div>}
+                                    </Card>
+                                  );
+                                })}
+                              </div>
+                              {metricsViewConfig.charts.length > 0 && metricSnapshots.length > 0 && (
+                                <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+                                  {metricsViewConfig.charts.map((chart, i) => {
+                                    const chartMetricName = (chart as Record<string, unknown>).metricName as string | undefined;
+                                    const chartTitle = (chart as Record<string, unknown>).title as string | undefined;
+                                    const filteredSnapshots = chartMetricName
+                                      ? metricSnapshots
+                                          .filter(s => s.metricName === chartMetricName)
+                                          .sort((a, b) => a.timestamp.localeCompare(b.timestamp))
+                                      : metricSnapshots;
+                                    const { metricName: _mn, title: _t, ...chartSpec } = chart as Record<string, unknown>;
+                                    return (
+                                      <Card key={i} size="small" {...(chartTitle ? { title: chartTitle } : {})}>
+                                        <DashboardChart spec={{ ...chartSpec, data: filteredSnapshots }} />
+                                      </Card>
+                                    );
+                                  })}
+                                </div>
+                              )}
+                            </div>
+                          )}
+                          {!metricsViewConfig && metricSnapshots.length > 0 && (
+                            <div>
+                              <Text strong style={{ fontSize: 14, marginBottom: 8, display: 'block' }}>{t('process.businessMetrics')}</Text>
+                              <Text type="secondary">{t('process.noBusinessMetrics')}</Text>
+                            </div>
+                          )}
+                          {/* Operational Metrics — system aggregates */}
+                          <div>
+                            <Text strong style={{ fontSize: 14, marginBottom: 8, display: 'block' }}>{t('process.operationalMetrics')}</Text>
+                            {metricsConfig.length === 0 && metrics.length === 0 ? (
+                              <Empty description={t('process.noMetrics')} />
+                            ) : (
+                              <>
+                                {metricsConfig.map((widget, i) => (
+                                  <DashboardChart key={\`op-\${i}\`} spec={{ ...widget, data: metrics }} />
+                                ))}
+                                {metrics.length > 0 && (
+                                  <Table
+                                    dataSource={metrics}
+                                    rowKey="date"
+                                    size="small"
+                                    pagination={{ pageSize: 7 }}
+                                    columns={[
+                                      { title: t('process.colDate'), dataIndex: 'date', key: 'date' },
+                                      { title: t('process.colTotal'), dataIndex: 'totalRuns', key: 'totalRuns' },
+                                      { title: t('process.colCompleted'), dataIndex: 'completedRuns', key: 'completedRuns' },
+                                      { title: t('process.colFailed'), dataIndex: 'failedRuns', key: 'failedRuns' },
+                                      { title: t('process.colTimeout'), dataIndex: 'timeoutRuns', key: 'timeoutRuns' },
+                                      { title: t('process.colAvgDuration'), dataIndex: 'avgDurationMs', key: 'avgDurationMs', render: (ms: number) => \`\${(ms / 1000).toFixed(1)}s\` },
+                                    ]}
+                                  />
+                                )}
+                              </>
+                            )}
+                          </div>
+                        </Space>
+                      ),
+                    }] : []),
+                  ]}
+                />
+              ) : fileContent ? (
+                <SkillFileViewer
+                  skillDetail={null}
+                  fileContent={fileContent}
+                  viewMode={viewMode}
+                  onViewModeChange={setViewMode}
+                  mode={mode}
+                  token={token}
+                  t={t}
+                />
+              ) : (
+                <Empty
+                  image={Empty.PRESENTED_IMAGE_SIMPLE}
+                  description={t('process.selectToView')}
+                  style={{ marginTop: 120 }}
+                />
+              )}
+            </Card>
+          </div>
+        </div>
+      </Spin>
+    </div>
+  );
+}
+`;
+}
+//# sourceMappingURL=process-management-page.js.map