@loom-framework/core 0.1.0-alpha.164 → 0.1.0-alpha.166

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

@@ -1,33 +1,30 @@
 /**
- * ProcessManagementPage Template
+ * Process Management page template
  *
- * Follows SkillManagementPage patterns: flex column layout, breadcrumb,
- * theme tokens, showLine/blockNode tree, i18n, Card wrapper.
+ * GENERATED by scripts/generate-templates.ts — DO NOT EDIT MANUALLY.
+ * Source: packages/frontend-antd/src/components/pages/process-management-page.tsx
  */
 export function processManagementPageTemplate() {
-    return `import React, { useState, useEffect, useCallback, useMemo, useContext, useRef } from 'react';
+    return `/**
+ * ProcessManagementPage — Orchestrator composing Process sub-components
+ */
+
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import {
   Card,
-  Tree,
   Tabs,
-  Table,
-  Tag,
   Button,
   Modal,
   Spin,
+  Tooltip,
   Segmented,
   Dropdown,
   Flex,
   Breadcrumb,
   Space,
-  Descriptions,
-  Tooltip,
-  Timeline,
   Empty,
   message,
-  Typography,
   theme,
-  DatePicker,
 } from 'antd';
 import {
   PlayCircleOutlined,
@@ -35,50 +32,22 @@ import {
   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, ProcessLogListResponse, ProcessMetricsAggregate, FileContent,
-  ProcessMetricSnapshot, ProcessMetricsViewConfig,
-} from '@loom-framework/frontend-antd';
-import { DashboardChart } from '@loom-framework/frontend-antd';
-import type { Dayjs } from 'dayjs';
-
-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[];
-}
+import type { ProcessInfo, FileContent, ProcessTreeNode } from '@loom-framework/frontend-antd';
+import { useLocale, registerMessages, useLoomTheme, useAppShell, SkillFileViewer, ProcessTree, buildTreeData, loadDirChildren, removeTreeNode, enrichTreeWithFiles, ProcessOverview, ProcessLogs, ProcessMetrics } from '@loom-framework/frontend-antd';
+  fetchProcesses,
+  fetchProcess,
+  fetchProcessFileContent,
+  runProcess,
+  pauseProcess,
+  resumeProcess,
+  deleteProcess,
+} from './process-api.js';
 
 registerMessages('zh-CN', {
   'process.title': '过程管理',
@@ -106,11 +75,6 @@ registerMessages('zh-CN', {
   'process.noProcesses': '暂无过程',
   'process.noMetrics': '未配置指标',
   'process.noLogs': '暂无执行日志',
-  'process.timeRange': '时间范围',
-  'process.total': '共 {total} 条',
-  'process.runId': '运行 ID',
-  'process.triggerType': '触发方式',
-  'process.startedAt': '开始时间',
   'process.queue': '执行队列',
   'process.queueRunning': '运行中',
   'process.queueQueued': '等待中',
@@ -139,23 +103,6 @@ registerMessages('zh-CN', {
   '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': '查看 Loom 会话',
-  'process.businessMetrics': '业务指标',
-  'process.operationalMetrics': '运行统计',
-  'process.noBusinessMetrics': '暂无业务指标数据',
-  'process.metricValue': '指标值',
-  'process.metricTarget': '目标',
-  'process.metricTrend': '趋势',
 });
 
 registerMessages('en-US', {
@@ -184,11 +131,6 @@ registerMessages('en-US', {
   'process.noProcesses': 'No processes',
   'process.noMetrics': 'No metrics configured',
   'process.noLogs': 'No execution logs',
-  'process.timeRange': 'Time Range',
-  'process.total': '{total} total',
-  'process.runId': 'Run ID',
-  'process.triggerType': 'Trigger',
-  'process.startedAt': 'Started At',
   'process.queue': 'Execution Queue',
   'process.queueRunning': 'Running',
   'process.queueQueued': 'Queued',
@@ -217,53 +159,13 @@ registerMessages('en-US', {
   '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 Loom 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 {
+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[]>([]);
@@ -275,110 +177,38 @@ export default function ProcessManagementPage(): React.ReactElement {
   const [loading, setLoading] = useState(false);
   const [viewMode, setViewMode] = useState<'preview' | 'source'>('preview');
   const [activeTab, setActiveTab] = useState('overview');
-  const [logs, setLogs] = useState<ProcessLogEntry[]>([]);
-  const [logsTotal, setLogsTotal] = useState(0);
-  const [logsPagination, setLogsPagination] = useState({ current: 1, pageSize: 20 });
-  const [logsDateRange, setLogsDateRange] = useState<[Dayjs | null, Dayjs | null] | null>(null);
-  const [logsLoading, setLogsLoading] = useState(false);
-  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,
-        });
-      }
-
-      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);
-      const initialTree = buildTreeData(list);
+      const initialTree = buildTreeData(list, token);
       setTreeData(initialTree);
       setExpandedKeys(list.map((p) => p.name));
       // Enrich tree with actual file structure (e.g. references/ directories)
-      for (let i = 0; i < initialTree.length; i++) {
-        const node = initialTree[i]!;
-        if (!node.isProcess || !node.processName) continue;
-        const proc = list.find(p => p.name === node.processName);
-        if (!proc?.hasProcessFile) continue;
-        const hasReferences = node.children?.some(c => c.filePath === 'references' && c.isDir);
-        if (hasReferences) continue;
-        try {
-          const files = await fetchProcessFiles(node.processName);
-          const flatFiles: typeof files = [];
-          const flatten = (fs: typeof files) => { for (const f of fs) { if (f.isDirectory && f.children) { flatten(f.children); } else if (!f.isDirectory) { flatFiles.push(f); } } };
-          flatten(files);
-          const refFiles = flatFiles.filter(f => f.path.startsWith('references/'));
-          if (refFiles.length > 0) {
-            const { children: refChildren } = await loadDirChildren(node.processName, 'references');
-            if (!refChildren.length) continue;
-            const updated = { ...node, children: [...(node.children ?? []), {
-              key: \`\${node.processName}/references\`,
-              title: 'references/',
-              icon: <FolderOutlined style={{ color: token.colorWarning }} />,
-              isLeaf: false,
-              isFile: false,
-              isDir: true,
-              filePath: 'references',
-              children: refChildren,
-              processName: node.processName,
-            }] };
-            initialTree[i] = updated;
-            setTreeData([...initialTree]);
-          }
-        } catch { /* ignore */ }
-      }
+      const enriched = await enrichTreeWithFiles(initialTree, list, token);
+      setTreeData(enriched);
     } catch {
       // error handled silently
     } finally {
       setLoading(false);
     }
-  }, [buildTreeData, loadDirChildren]);
+  }, [token]);
 
   useEffect(() => { loadProcesses(); }, [loadProcesses]);
 
-  // Auto-refresh every 5 seconds, pause when tab is hidden
+  // Auto-refresh every 5 seconds
   const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
   useEffect(() => {
     const poll = () => {
-      if (document.visibilityState === 'visible') {
-        loadProcesses();
-      }
+      if (document.visibilityState === 'visible') loadProcesses();
     };
     pollRef.current = setInterval(poll, 5000);
     const handleVisibility = () => {
-      if (document.visibilityState === 'visible') {
-        poll(); // Immediate refresh when tab becomes visible
-      }
+      if (document.visibilityState === 'visible') poll();
     };
     document.addEventListener('visibilitychange', handleVisibility);
     return () => {
@@ -387,60 +217,21 @@ export default function ProcessManagementPage(): React.ReactElement {
     };
   }, [loadProcesses]);
 
-  const loadDirChildren = useCallback(async (processName: string, dirName: string): Promise<{ children: ProcessTreeNode[]; empty: boolean }> => {
-    const data = await fetchProcessFiles(processName);
-    const flatFiles: typeof data = [];
-    const flatten = (files: typeof data) => { for (const f of files) { if (f.isDirectory && f.children) { flatten(f.children); } else if (!f.isDirectory) { flatFiles.push(f); } } };
-    flatten(data);
-    const dirFiles = flatFiles.filter((f) => f.path.startsWith(\`\${dirName}/\`));
-
-    if (dirFiles.length === 0) {
-      return { children: [], empty: true };
-    }
-
-    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!;
-        }
+  const selectProcess = useCallback(async (name: string) => {
+    try {
+      const data = await fetchProcess(name);
+      setSelectedProcess(data);
+      setFileContent(null);
+      setProcessMdContent(null);
+      setActiveTab('overview');
+      if (data.hasProcessFile) {
+        try {
+          const mdContent = await fetchProcessFileContent(name, 'PROCESS.md');
+          setProcessMdContent({ content: mdContent, path: 'PROCESS.md' });
+        } catch { /* ignore */ }
       }
-    }
-    return { children: dirChildren, empty: false };
-  }, [token]);
+    } catch { /* ignore */ }
+  }, []);
 
   const handleTreeExpand = useCallback(
     async (keys: React.Key[], info: { node: ProcessTreeNode; expanded: boolean }) => {
@@ -450,57 +241,24 @@ export default function ProcessManagementPage(): React.ReactElement {
       if (node.processName && node.isDir) {
         if (node.children && node.children.length > 0) return;
         const dirName = node.filePath || node.title.replace(/\\/$/, '');
-        const result = await loadDirChildren(node.processName, dirName);
-
+        const result = await loadDirChildren(node.processName, dirName, token);
         if (result.empty) {
-          const removeTreeNode = (nodes: ProcessTreeNode[], key: string): ProcessTreeNode[] =>
-            nodes
-              .filter((n) => n.key !== key)
-              .map((n) => (n.children ? { ...n, children: removeTreeNode(n.children, key) } : n));
           setTreeData((prev) => removeTreeNode(prev, node.key as string));
           setExpandedKeys((prev) => prev.filter((k) => k !== node.key));
         } else {
           const updateNode = (nodes: ProcessTreeNode[]): ProcessTreeNode[] =>
             nodes.map((n) => {
-              if (n.key === node.key) {
-                return { ...n, children: result.children };
-              }
-              if (n.children) {
-                return { ...n, children: updateNode(n.children) };
-              }
+              if (n.key === node.key) return { ...n, children: result.children };
+              if (n.children) return { ...n, children: updateNode(n.children) };
               return n;
             });
-
           setTreeData((prev) => updateNode(prev));
         }
       }
     },
-    [loadDirChildren],
+    [token],
   );
 
-  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);
@@ -510,7 +268,6 @@ export default function ProcessManagementPage(): React.ReactElement {
         return;
       }
       const node = info.node;
-
       if (node.isFile && node.processName && node.filePath) {
         setLoading(true);
         try {
@@ -522,9 +279,7 @@ export default function ProcessManagementPage(): React.ReactElement {
             setSelectedProcess(null);
             setProcessMdContent(null);
           }
-        } catch {
-          // error handled silently
-        } finally {
+        } catch { /* ignore */ } finally {
           setLoading(false);
         }
       } else if (node.isProcess && node.processName) {
@@ -540,7 +295,6 @@ export default function ProcessManagementPage(): React.ReactElement {
     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 {
@@ -587,66 +341,16 @@ export default function ProcessManagementPage(): React.ReactElement {
     [loadProcesses, t],
   );
 
-  const loadLogs = useCallback(async (page?: number, pageSize?: number, from?: string, to?: string) => {
-    if (!selectedProcess) return;
-    setLogsLoading(true);
-    try {
-      const p = page ?? logsPagination.current;
-      const ps = pageSize ?? logsPagination.pageSize;
-      const result = await fetchProcessLogs(selectedProcess.name, {
-        limit: ps,
-        offset: (p - 1) * ps,
-        from,
-        to,
-      });
-      setLogs(result.data);
-      setLogsTotal(result.total);
-    } catch {
-      setLogs([]);
-      setLogsTotal(0);
-    } finally {
-      setLogsLoading(false);
-    }
-  }, [selectedProcess, logsPagination.current, logsPagination.pageSize]);
-
-  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(1, logsPagination.pageSize);
-    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 }))]} />
+        <Breadcrumb items={[{ title: <HomeOutlined onClick={() => onNavClick?.('')} style={{ cursor: 'pointer' }} /> }, ...(breadcrumbs || []).map((b: { title: string; path?: string }) => ({ title: b.path ? <a onClick={() => onNavClick?.(b.path!)}>{b.title}</a> : b.title }))]} />
         <Space>
           <Button icon={<ReloadOutlined />} onClick={loadProcesses} loading={loading}>
             {t('process.refresh')}
@@ -688,36 +392,21 @@ export default function ProcessManagementPage(): React.ReactElement {
       <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}
+            <ProcessTree
+              processes={processes}
+              treeData={treeData}
               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>
-              )}
+              onSelect={handleTreeSelect}
+              onProcessSelect={selectProcess}
+              onFileSelect={async (pn, fp) => {
+                const content = await fetchProcessFileContent(pn, fp);
+                setFileContent({ content, path: fp });
+                setSelectedProcess(null);
+                setProcessMdContent(null);
+              }}
+              token={token}
             />
           </div>
 
@@ -746,213 +435,35 @@ export default function ProcessManagementPage(): React.ReactElement {
               {selectedProcess ? (
                 <Tabs
                   activeKey={activeTab}
-                  onChange={handleTabChange}
+                  onChange={setActiveTab}
                   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>
+                        <ProcessOverview
+                          process={selectedProcess}
+                          processMdContent={processMdContent}
+                          viewMode={viewMode}
+                          onViewModeChange={setViewMode}
+                          onRun={handleRun}
+                          onPause={handlePause}
+                          onResume={handleResume}
+                          executing={executing}
+                          mode={mode}
+                          token={token}
+                        />
                       ),
                     },
                     {
                       key: 'logs',
                       label: t('process.logs'),
-                      children: (
-                        <Space direction="vertical" style={{ width: '100%' }} size="middle">
-                          <Flex justify="flex-end" align="center">
-                            <Space>
-                              <DatePicker.RangePicker
-                                placeholder={[t('process.timeRange'), '']}
-                                onChange={(dates: [Dayjs | null, Dayjs | null] | null) => {
-                                  setLogsDateRange(dates);
-                                  setLogsPagination(prev => ({ ...prev, current: 1 }));
-                                  const from = dates?.[0]?.startOf('day')?.toISOString();
-                                  const to = dates?.[1]?.endOf('day')?.toISOString();
-                                  loadLogs(1, logsPagination.pageSize, from, to);
-                                }}
-                                size="small"
-                                value={logsDateRange}
-                              />
-                              <Button icon={<ReloadOutlined />} onClick={() => { setLogsPagination(prev => ({ ...prev, current: 1 })); const from = logsDateRange?.[0]?.startOf('day')?.toISOString(); const to = logsDateRange?.[1]?.endOf('day')?.toISOString(); loadLogs(1, logsPagination.pageSize, from, to); }} size="small" loading={logsLoading}>
-                                {t('process.refresh')}
-                              </Button>
-                            </Space>
-                          </Flex>
-                          <Table<ProcessLogEntry>
-                            dataSource={logs}
-                            columns={[
-                              { title: t('process.runId'), dataIndex: 'runId', key: 'runId', width: 180, render: (runId: string) => <Tooltip title={runId}><Text strong style={{ fontFamily: 'monospace', fontSize: 12 }}>{runId.slice(0, 16)}</Text></Tooltip> },
-                              { title: t('process.triggerType'), dataIndex: 'triggerType', key: 'triggerType', width: 120, render: (triggerType: ProcessLogEntry['triggerType']) => <Tag icon={TRIGGER_ICONS[triggerType]}>{triggerType}</Tag> },
-                              { title: t('process.status'), dataIndex: 'status', key: 'status', width: 100, render: (status: ProcessLogEntry['status']) => <Tag color={status === 'completed' ? 'success' : status === 'failed' ? 'error' : status === 'timeout' ? 'warning' : 'processing'}>{status}</Tag> },
-                              { title: t('process.startedAt'), dataIndex: 'startedAt', key: 'startedAt', width: 180, render: (startedAt: string) => <Text type="secondary">{new Date(startedAt).toLocaleString()}</Text> },
-                              { title: t('process.duration'), dataIndex: 'durationMs', key: 'durationMs', width: 100, render: (durationMs: number) => durationMs > 0 ? <Text type="secondary">{(durationMs / 1000).toFixed(1)}s</Text> : <Text type="secondary">—</Text> },
-                              { title: '', key: 'actions', width: 48, render: (_: unknown, record: ProcessLogEntry) => record.sessionId && aiContext?.switchToSession ? <Tooltip title={t('process.viewSession')}><Button type="link" size="small" icon={<MessageOutlined />} onClick={() => aiContext.switchToSession!(record.sessionId)} /></Tooltip> : null },
-                            ]}
-                            rowKey="runId"
-                            size="small"
-                            loading={logsLoading}
-                            pagination={{
-                              current: logsPagination.current,
-                              pageSize: logsPagination.pageSize,
-                              total: logsTotal,
-                              showSizeChanger: true,
-                              showTotal: (tot: number) => t('process.total').replace('{total}', String(tot)),
-                              onChange: (page: number, pageSize: number) => {
-                                setLogsPagination({ current: page, pageSize });
-                                const from = logsDateRange?.[0]?.startOf('day')?.toISOString();
-                                const to = logsDateRange?.[1]?.endOf('day')?.toISOString();
-                                loadLogs(page, pageSize, from, to);
-                              },
-                            }}
-                            locale={{ emptyText: t('process.noLogs') }}
-                          />
-                        </Space>
-                      ),
+                      children: <ProcessLogs processName={selectedProcess.name} />,
                     },
                     ...(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>
-                      ),
+                      children: <ProcessMetrics processName={selectedProcess.name} hasProcessFile={selectedProcess.hasProcessFile} />,
                     }] : []),
                   ]}
                 />
@@ -979,7 +490,6 @@ export default function ProcessManagementPage(): React.ReactElement {
       </Spin>
     </div>
   );
-}
-`;
+}`;
 }
 //# sourceMappingURL=process-management-page.js.map