diff --git a/src/locales/en.json b/src/locales/en.json
index 16ed9b2..43e19ae 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -621,5 +621,17 @@
   "External Access Domain": "External Access Domain",
   "Failed to load task logs": "Failed to load task logs",
   "Retry loading logs": "Retry loading logs",
-  "WorkLoad": "WorkLoad"
+  "WorkLoad": "WorkLoad",
+  "Log read failed; current content is preserved": "Log read failed; current content is preserved",
+  "Operation read failed": "Operation read failed",
+  "Task read failed; current content is preserved": "Task read failed; current content is preserved",
+  "Execution logs": "Execution logs",
+  "No log output yet": "No log output yet",
+  "Execution failed": "Execution failed",
+  "Task message": "Task message",
+  "Succeeded": "Succeeded",
+  "Running": "Running",
+  "Pending": "Pending",
+  "TimedOut": "TimedOut",
+  "Canceled": "Canceled"
 }
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 452663a..f0b99db 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -621,5 +621,17 @@
   "External Access Domain": "外部访问域名",
   "Failed to load task logs": "任务日志加载失败",
   "Retry loading logs": "重新加载日志",
-  "WorkLoad": "工作负载"
+  "WorkLoad": "工作负载",
+  "Log read failed; current content is preserved": "日志读取失败，已保留当前内容",
+  "Operation read failed": "操作信息读取失败",
+  "Task read failed; current content is preserved": "任务状态读取失败，已保留当前内容",
+  "Execution logs": "执行日志",
+  "No log output yet": "暂无日志输出",
+  "Execution failed": "执行失败",
+  "Task message": "任务消息",
+  "Succeeded": "成功",
+  "Running": "执行中",
+  "Pending": "等待执行",
+  "TimedOut": "已超时",
+  "Canceled": "已取消"
 }
diff --git a/src/pages/cluster/containers/Cluster/Detail/Operation/actions/PipelineLogDialog/RightLogContent.jsx b/src/pages/cluster/containers/Cluster/Detail/Operation/actions/PipelineLogDialog/RightLogContent.jsx
index 35abb3a..eb7788e 100644
--- a/src/pages/cluster/containers/Cluster/Detail/Operation/actions/PipelineLogDialog/RightLogContent.jsx
+++ b/src/pages/cluster/containers/Cluster/Detail/Operation/actions/PipelineLogDialog/RightLogContent.jsx
@@ -22,7 +22,7 @@ import {
   CheckCircleFilled,
   CloseCircleFilled,
 } from '@ant-design/icons';
-import { Alert, Button, Spin } from 'antd';
+import { Spin, Button } from 'antd';
 import { observer } from 'mobx-react';
 import styles from './index.less';
 import { useRootStore } from 'stores';
@@ -30,38 +30,34 @@ import LogStore from 'stores/log';
 import { formatSeconds } from 'utils';
 import { useInterval } from 'hooks';
 
-function LogItemContent(props) {
-  const { isExpand, isLoading, logdata, logError, onRetry } = props;
-  if (isExpand) {
-    if (isLoading) {
-      return <Spin className={styles['spin-center']} />;
-    } else {
-      return (
-        <div className={styles['log-item-content']}>
-          {logdata && <pre>{logdata}</pre>}
-          {logError && (
-            <Alert
-              type="error"
-              showIcon
-              message={t('Failed to load task logs')}
-              description={logError}
-              action={
-                <Button size="small" onClick={onRetry}>
-                  {t('Retry loading logs')}
-                </Button>
-              }
-            />
-          )}
-        </div>
-      );
-    }
-  }
-  return '';
+function LogItemContent({ isExpand, isLoading, logdata }) {
+  if (!isExpand) return null;
+  return (
+    <div className={styles['log-output']}>
+      <div className={styles['log-output-title']}>{t('Execution logs')}</div>
+      {isLoading && !logdata ? (
+        <Spin className={styles['spin-center']} />
+      ) : (
+        <pre className={styles['log-item-content']}>
+          {logdata || t('No log output yet')}
+        </pre>
+      )}
+    </div>
+  );
 }
 
 const LogItem = observer((props) => {
-  const { nodeStatus, taskName, logStore, runtime, nodes, index } = props;
-  const inputEl = useRef();
+  const {
+    nodeStatus,
+    taskName,
+    logStore,
+    runtime,
+    nodes,
+    index,
+    message,
+    reason,
+  } = props;
+  const initiallyExpanded = useRef(index === 0);
 
   const taskFinished = ['Succeeded', 'Failed', 'TimedOut', 'Canceled'].includes(
     nodeStatus
@@ -69,11 +65,11 @@ const LogItem = observer((props) => {
   logStore.isStepFinished = taskFinished;
   const {
     logdata,
-    logError,
     isExpand,
     isLoading,
     cumulativeSize,
     isStepFinished,
+    error,
   } = logStore;
 
   const stateIcons = (errIgnore, status) => {
@@ -91,21 +87,27 @@ const LogItem = observer((props) => {
   };
 
   useEffect(() => {
-    if (index === 0 && taskName) {
+    if (initiallyExpanded.current) logStore.isExpand = true;
+    return () => logStore.logReset();
+  }, [taskName, logStore]);
+
+  useEffect(() => {
+    if (logStore.isExpand && taskName) {
       const fn = async () => {
-        await logStore.fetchStepLog(params);
-        inputEl.current?.scrollIntoView({ block: 'end' });
+        await logStore.fetchStepLog({
+          taskName,
+          offset: logStore.cumulativeSize,
+        });
       };
 
       fn();
     }
-  }, [taskName]);
+  }, [taskName, nodeStatus, index, logStore]);
 
   useInterval(
     () => {
       const fn = async () => {
         await logStore.fetchStepLog(params);
-        inputEl.current?.scrollIntoView({ block: 'end' });
       };
       fn();
     },
@@ -115,30 +117,73 @@ const LogItem = observer((props) => {
   const toggleExpand = async () => {
     if (!taskName) return;
 
+    logStore.isExpand = !isExpand;
     if (!isExpand) {
-      logStore.isExpand = true;
-      await logStore.getStepLog(params);
+      logStore.getStepLog(params);
     } else {
       logStore.logReset();
-      logStore.isExpand = false;
     }
   };
 
+  const failed = ['Failed', 'TimedOut', 'Canceled'].includes(nodeStatus);
+  const statusClass = failed
+    ? 'status-failed'
+    : nodeStatus === 'Succeeded'
+    ? 'status-succeeded'
+    : 'status-running';
+
   return (
-    <div className={styles.LogItem} ref={inputEl}>
-      <div className={classNames(styles.LogItem__title)} onClick={toggleExpand}>
-        {isExpand ? <CaretDownOutlined /> : <CaretRightOutlined />}
-        {nodes.ipv4 ? `${nodes.id}(${nodes.ipv4})` : nodes.id}
+    <div className={styles.LogItem}>
+      <button
+        type="button"
+        className={styles.LogItem__title}
+        onClick={toggleExpand}
+        aria-expanded={isExpand}
+      >
+        <span className={styles['node-heading']}>
+          {isExpand ? <CaretDownOutlined /> : <CaretRightOutlined />}
+          <strong>{nodes.ipv4 || nodes.id}</strong>
+          {nodes.ipv4 && (
+            <span className={styles['node-id']} title={nodes.id}>
+              {nodes.id}
+            </span>
+          )}
+        </span>
         <span className={styles.logitem_status}>
-          <span>{runtime || ''}</span>
-          {stateIcons(false, nodeStatus)}
+          <span
+            className={classNames(styles['status-badge'], styles[statusClass])}
+          >
+            {stateIcons(false, nodeStatus)} {t(nodeStatus)}
+          </span>
+          {runtime && <span className={styles.runtime}>{runtime}</span>}
         </span>
-      </div>
+      </button>
+      {(message || reason) && (
+        <div role="alert" className={styles['log-item-error']}>
+          <div className={styles['error-heading']}>
+            <CloseCircleFilled />{' '}
+            {t(failed ? 'Execution failed' : 'Task message')}
+          </div>
+          <pre>{message || reason}</pre>
+        </div>
+      )}
+      {error && (
+        <div role="alert" className={styles['log-read-error']}>
+          <span>
+            {t('Log read failed; current content is preserved')}: {error}
+          </span>
+          <Button
+            type="link"
+            size="small"
+            onClick={() => logStore.getStepLog(params)}
+          >
+            {t('Retry loading logs')}
+          </Button>
+        </div>
+      )}
       <LogItemContent
         isExpand={isExpand}
         logdata={logdata}
-        logError={logError}
-        onRetry={() => logStore.getStepLog(params)}
         isLoading={isLoading}
       />
     </div>
@@ -169,6 +214,8 @@ function RightLogContent() {
               key={index}
               logStore={logStores.current.get(storeKey)}
               nodeStatus={taskStatus.status || 'Pending'}
+              message={taskStatus.message}
+              reason={taskStatus.reason}
               taskName={taskName}
               runtime={
                 taskStatus.startAt
diff --git a/src/pages/cluster/containers/Cluster/Detail/Operation/actions/PipelineLogDialog/RightLogContent.test.jsx b/src/pages/cluster/containers/Cluster/Detail/Operation/actions/PipelineLogDialog/RightLogContent.test.jsx
new file mode 100644
index 0000000..d2ec3ca
--- /dev/null
+++ b/src/pages/cluster/containers/Cluster/Detail/Operation/actions/PipelineLogDialog/RightLogContent.test.jsx
@@ -0,0 +1,174 @@
+/*
+ * Copyright 2026 KubeClipper Authors.
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { act } from 'react-dom/test-utils';
+import { mount } from 'enzyme';
+import RightLogContent from './RightLogContent';
+
+let mockNodeStatus;
+const mockLogStores = [];
+
+jest.mock(
+  'stores',
+  () => ({
+    useRootStore: () => ({
+      operationStore: {
+        currentNodesByStep: {
+          nodes: [{ id: 'node-1', ipv4: '192.168.1.20' }],
+          status: [mockNodeStatus],
+        },
+        activeStepIndex: 0,
+      },
+    }),
+  }),
+  { virtual: true }
+);
+jest.mock('stores/log', () => ({
+  __esModule: true,
+  default: class LogStore {
+    logdata = '';
+
+    isExpand = false;
+
+    isLoading = false;
+
+    cumulativeSize = 0;
+
+    fetchStepLog = jest.fn(() => Promise.resolve());
+
+    logReset = jest.fn();
+
+    getStepLog = jest.fn(() => Promise.resolve());
+
+    constructor() {
+      mockLogStores.push(this);
+    }
+  },
+}));
+jest.mock('hooks', () => ({ useInterval: () => {} }), { virtual: true });
+jest.mock('utils', () => ({ formatSeconds: () => '' }), { virtual: true });
+jest.mock('mobx-react', () => ({ observer: (component) => component }));
+jest.mock('antd', () => ({
+  Spin: () => null,
+  Button: ({ children, onClick }) => (
+    <button onClick={onClick}>{children}</button>
+  ),
+}));
+jest.mock('@ant-design/icons', () => ({
+  CaretRightOutlined: () => null,
+  CaretDownOutlined: () => null,
+  CheckCircleFilled: () => null,
+  CloseCircleFilled: () => null,
+}));
+
+describe('operation task failure', () => {
+  beforeEach(() => {
+    global.t = (value) => value;
+  });
+
+  it('shows the task error even when the log is empty and collapsed', () => {
+    mockNodeStatus = {
+      status: 'Failed',
+      taskName: 'task-1',
+      message: 'failed to restart unit containerd.service: failed',
+    };
+
+    const html = renderToStaticMarkup(<RightLogContent />);
+
+    expect(html).toContain('role="alert"');
+    expect(html).toContain(mockNodeStatus.message);
+  });
+
+  it('shows the reason when a failed task has no message', () => {
+    mockNodeStatus = { status: 'TimedOut', reason: 'DeadlineExceeded' };
+
+    expect(renderToStaticMarkup(<RightLogContent />)).toContain(
+      'DeadlineExceeded'
+    );
+  });
+
+  it('renders an error as text', () => {
+    mockNodeStatus = {
+      status: 'Failed',
+      message: '<script>alert(1)</script>',
+    };
+
+    const html = renderToStaticMarkup(<RightLogContent />);
+
+    expect(html).toContain('&lt;script&gt;');
+    expect(html).not.toContain('<script>');
+  });
+
+  it('fetches the final log tail when a running task fails', async () => {
+    const { scrollIntoView } = Element.prototype;
+    Element.prototype.scrollIntoView = jest.fn();
+    let wrapper;
+    try {
+      mockNodeStatus = { status: 'Running', taskName: 'task-1' };
+      await act(async () => {
+        wrapper = mount(<RightLogContent />);
+      });
+      const logStore = mockLogStores[mockLogStores.length - 1];
+      logStore.cumulativeSize = 64;
+      mockNodeStatus = {
+        ...mockNodeStatus,
+        status: 'Failed',
+        message: 'custom executor failed',
+      };
+
+      await act(async () => {
+        wrapper.setProps({});
+      });
+
+      expect(logStore.fetchStepLog).toHaveBeenLastCalledWith({
+        taskName: 'task-1',
+        offset: 64,
+      });
+      expect(logStore.fetchStepLog).toHaveBeenCalledTimes(2);
+      expect(wrapper.find('[role="alert"] pre').text()).toBe(
+        'custom executor failed'
+      );
+    } finally {
+      wrapper?.unmount();
+      Element.prototype.scrollIntoView = scrollIntoView;
+    }
+  });
+  it('keeps existing output visible during a refresh', async () => {
+    mockNodeStatus = {
+      status: 'Failed',
+      taskName: 'task-refresh',
+      message: 'original failure',
+    };
+    let wrapper;
+    await act(async () => {
+      wrapper = mount(<RightLogContent />);
+    });
+    const store = mockLogStores[mockLogStores.length - 1];
+    store.logdata = 'ExecMainStatus=42';
+    store.isLoading = true;
+    await act(async () => {
+      wrapper.setProps({});
+    });
+    expect(wrapper.text()).toContain('ExecMainStatus=42');
+    expect(wrapper.text()).toContain('Execution logs');
+    expect(wrapper.find('button[aria-expanded]').prop('aria-expanded')).toBe(
+      true
+    );
+    wrapper.unmount();
+  });
+});
diff --git a/src/pages/cluster/containers/Cluster/Detail/Operation/actions/PipelineLogDialog/index.jsx b/src/pages/cluster/containers/Cluster/Detail/Operation/actions/PipelineLogDialog/index.jsx
index 82598cd..214de09 100644
--- a/src/pages/cluster/containers/Cluster/Detail/Operation/actions/PipelineLogDialog/index.jsx
+++ b/src/pages/cluster/containers/Cluster/Detail/Operation/actions/PipelineLogDialog/index.jsx
@@ -15,6 +15,7 @@
  */
 
 import React from 'react';
+import { Alert, Button } from 'antd';
 import { reaction, toJS } from 'mobx';
 import { ViewAction } from 'containers/Action';
 import { rootStore } from 'stores';
@@ -45,6 +46,8 @@ export default class PipelineLog extends ViewAction {
   constructor(props) {
     super(props);
 
+    this.state = { ...this.state, operationError: '', taskError: '' };
+    this.disposed = false;
     this.store = rootStore.operationStore;
 
     this.store.reset();
@@ -64,6 +67,7 @@ export default class PipelineLog extends ViewAction {
   }
 
   componentWillUnmount() {
+    this.disposed = true;
     this.store.list.silent = false;
     this.websocket.close();
     this.disposer?.();
@@ -87,6 +91,7 @@ export default class PipelineLog extends ViewAction {
         message = toJS(message);
         const types = ['ADDED', 'MODIFIED', 'DELETED'];
         if (types.includes(message.type)) {
+          this.setState({ operationError: '' });
           this.updateOperation(message.object);
         }
       }
@@ -100,27 +105,30 @@ export default class PipelineLog extends ViewAction {
           this.item.name
         )}`
       );
+      if (this.disposed) return;
+      this.setState({ operationError: '' });
       await this.updateOperation(operation);
     } catch (error) {
-      // The operation list already rendered the row. Keep the dialog usable
-      // while the watch connection retries after a transient read failure.
-      // eslint-disable-next-line no-console
-      console.log(error);
+      if (!this.disposed)
+        this.setState({
+          operationError: error?.reason || error?.message || 'Request failed',
+        });
     }
   };
 
   refreshTasks = async () => {
-    if (!this.rawOperation || this.refreshing) return;
-
+    if (!this.rawOperation || this.refreshing || this.disposed) return;
     this.refreshing = true;
     try {
-      const tasks = await this.fetchTasks(this.rawOperation);
-      await this.updateOperation(this.rawOperation, tasks);
+      const operation = this.rawOperation;
+      const tasks = await this.fetchTasks(operation);
+      if (this.disposed || this.rawOperation !== operation) return;
+      await this.updateOperation(operation, tasks);
     } catch (error) {
-      // Task creation/status updates are eventually consistent with the
-      // operation watch. The next refresh will retry without closing the log.
-      // eslint-disable-next-line no-console
-      console.log(error);
+      if (!this.disposed)
+        this.setState({
+          taskError: error?.reason || error?.message || 'Request failed',
+        });
     } finally {
       this.refreshing = false;
     }
@@ -138,7 +146,7 @@ export default class PipelineLog extends ViewAction {
   };
 
   updateOperation = async (operation, tasks) => {
-    if (!operation) return;
+    if (!operation || this.disposed) return;
 
     if (
       this.rawOperation?.metadata?.uid &&
@@ -147,7 +155,18 @@ export default class PipelineLog extends ViewAction {
       this.manuallySelectedStepID = null;
     }
     this.rawOperation = operation;
-    const operationTasks = tasks || (await this.fetchTasks(operation));
+    let operationTasks;
+    try {
+      operationTasks = tasks || (await this.fetchTasks(operation));
+    } catch (error) {
+      if (!this.disposed)
+        this.setState({
+          taskError: error?.reason || error?.message || 'Request failed',
+        });
+      return;
+    }
+    if (this.disposed || this.rawOperation !== operation) return;
+    this.setState({ taskError: '' });
     const result = ObjectMapper.operations(operation, operationTasks);
     const { operationSteps } = result;
 
@@ -185,9 +204,29 @@ export default class PipelineLog extends ViewAction {
   };
 
   renderContent = () => (
-    <div className={styles.container}>
-      <LeftSteps activeByStep={this.activeByStep} />
-      <RightLogContent />
+    <div className={styles['dialog-content']}>
+      {this.state.operationError && (
+        <Alert
+          type="error"
+          showIcon
+          message={t('Operation read failed')}
+          description={this.state.operationError}
+          action={<Button onClick={this.loadOperation}>{t('Retry')}</Button>}
+        />
+      )}
+      {this.state.taskError && (
+        <Alert
+          type="error"
+          showIcon
+          message={t('Task read failed; current content is preserved')}
+          description={this.state.taskError}
+          action={<Button onClick={this.refreshTasks}>{t('Retry')}</Button>}
+        />
+      )}
+      <div className={styles.container}>
+        <LeftSteps activeByStep={this.activeByStep} />
+        <RightLogContent />
+      </div>
     </div>
   );
 }
diff --git a/src/pages/cluster/containers/Cluster/Detail/Operation/actions/PipelineLogDialog/index.less b/src/pages/cluster/containers/Cluster/Detail/Operation/actions/PipelineLogDialog/index.less
index 1ab8560..4c8ae72 100644
--- a/src/pages/cluster/containers/Cluster/Detail/Operation/actions/PipelineLogDialog/index.less
+++ b/src/pages/cluster/containers/Cluster/Detail/Operation/actions/PipelineLogDialog/index.less
@@ -33,20 +33,17 @@
 
 .left {
   width: 200px;
+  flex-shrink: 0;
   height: 500px;
   overflow: auto;
 }
 
 .right {
-  flex-grow: 1;
-  width: 920px;
+  flex: 1;
+  min-width: 0;
   height: 500px;
-  padding: 12px;
-  border-radius: 4px;
-  background-color: #242e42;
-  color: white;
+  padding: 0 4px 0 16px;
   overflow: auto;
-  margin: 0 12px;
 }
 
 .cutTitle {
@@ -121,53 +118,151 @@
 }
 
 .LogItem {
-  margin-bottom: 12px;
+  margin-bottom: 16px;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #fff;
 }
 
 .LogItem__title {
-  text-indent: 1em;
-  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
   width: 100%;
-  height: 36px;
-  line-height: 36px;
-  border-radius: 4px;
-  background-color: #36435c;
+  min-height: 56px;
+  padding: 12px 16px;
+  border: 0;
+  background: #f8fafc;
+  color: #334155;
+  text-align: left;
   cursor: pointer;
-  :global {
-    .icon {
-      display: inline-block;
-      vertical-align: top;
-      margin: 5px 15px 0 0;
-    }
-    .kubed-icon {
-      color: white;
-    }
+  &:focus-visible {
+    outline: 2px solid #0068ff;
+    outline-offset: -2px;
+  }
+}
+
+.node-heading {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  strong {
+    flex-shrink: 0;
+    font-size: 14px;
   }
 }
 
+.node-id {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  color: #8a97a8;
+}
+
 .logitem_status {
-  float: right;
-  margin-right: 20px;
-  color: #79879c;
-  :global {
-    .pipeline_status_icon {
-      margin-left: 15px;
-      width: 12px;
-      height: 12px;
-      background-size: 12px;
-    }
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+  font-size: 12px;
+}
+
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 9px;
+  border-radius: 4px;
+}
+.status-failed {
+  color: #c43540;
+  background: #fff0f0;
+}
+.status-succeeded {
+  color: #22835b;
+  background: #eaf8f0;
+}
+.status-running {
+  color: #346cba;
+  background: #edf4ff;
+}
+.runtime {
+  color: #8a97a8;
+  font-variant-numeric: tabular-nums;
+}
+
+.log-item-error {
+  margin: 16px;
+  padding: 12px 14px;
+  border: 1px solid #f5d7db;
+  border-radius: 6px;
+  background: #fff7f7;
+  color: #9d303e;
+  pre {
+    margin: 7px 0 0;
+    font-family: inherit;
+    font-size: 13px;
+    line-height: 21px;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
   }
 }
+.error-heading {
+  font-weight: 600;
+  font-size: 13px;
+}
 
-.log-item-content {
-  padding: 12px 60px;
-  line-height: 22px;
-  background-color: #242e42;
-  color: white;
+.log-read-error {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 16px;
+  padding: 8px 12px;
+  border: 1px solid #f1d99f;
+  border-radius: 6px;
+  color: #906617;
+  background: #fffaf0;
+  overflow-wrap: anywhere;
 }
 
+.log-output {
+  margin: 16px;
+  border: 1px solid #263348;
+  border-radius: 6px;
+  overflow: hidden;
+  background: #172133;
+}
+.log-output-title {
+  padding: 9px 14px;
+  border-bottom: 1px solid #2a374d;
+  color: #9eadc4;
+  font-size: 12px;
+  background: #1e2b40;
+}
+.log-item-content {
+  max-height: 340px;
+  overflow: auto;
+  margin: 0;
+  padding: 14px 16px;
+  color: #d3deee;
+  font: 12px/21px ui-monospace, SFMono-Regular, Consolas, monospace;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  tab-size: 2;
+}
 .spin-center {
   display: flex;
   justify-content: center;
-  margin: 30px auto;
+  padding: 30px;
+}
+
+.dialog-content {
+  :global(.ant-alert) {
+    margin-bottom: 12px;
+  }
 }
diff --git a/src/pages/cluster/containers/Cluster/Detail/Operation/actions/PipelineLogDialog/index.test.jsx b/src/pages/cluster/containers/Cluster/Detail/Operation/actions/PipelineLogDialog/index.test.jsx
new file mode 100644
index 0000000..0a86f27
--- /dev/null
+++ b/src/pages/cluster/containers/Cluster/Detail/Operation/actions/PipelineLogDialog/index.test.jsx
@@ -0,0 +1,170 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+import PipelineLog from './index';
+
+const mockStore = {
+  list: {},
+  reset: jest.fn(),
+  currentNodesByStep: null,
+  activeStepIndex: 0,
+};
+const mockOperation = { metadata: { name: 'op', uid: 'op-uid' } };
+let mockWatch;
+
+jest.mock(
+  'containers/Action',
+  () => ({
+    ViewAction: class extends require('react').Component {
+      get item() {
+        return this.props.item;
+      }
+
+      render() {
+        return this.renderContent();
+      }
+    },
+  }),
+  { virtual: true }
+);
+jest.mock(
+  'stores',
+  () => ({
+    rootStore: {
+      get operationStore() {
+        return mockStore;
+      },
+    },
+  }),
+  { virtual: true }
+);
+jest.mock(
+  'stores/websocket',
+  () =>
+    class {
+      watch = jest.fn();
+
+      close = jest.fn();
+    }
+);
+jest.mock('utils/localStorage', () => ({ getToken: () => 'test-token' }));
+jest.mock('utils/object.mapper', () => ({
+  operations: (op, tasks) => ({
+    status: 'Failed',
+    operationSteps: [{ stepID: 'one', nodes: [], status: tasks }],
+  }),
+}));
+jest.mock('mobx', () => ({
+  toJS: (v) => v,
+  reaction: (get, cb) => {
+    mockWatch = cb;
+    return jest.fn();
+  },
+}));
+jest.mock('./LeftSteps', () => () => null);
+jest.mock('./RightLogContent', () => () => <div>task logs</div>);
+jest.mock('antd', () => ({
+  Alert: ({ message, description, action }) => (
+    <div role="alert">
+      {message}: {description}
+      {action}
+    </div>
+  ),
+  Button: ({ onClick, children }) => (
+    <button onClick={onClick}>{children}</button>
+  ),
+}));
+
+const errorShapes = {
+  message: (message) => new Error(message),
+  reason: (reason) => ({ reason }),
+  'reason with generic message': (reason) => ({
+    reason,
+    message: 'Internal server error',
+  }),
+};
+
+describe.each(Object.keys(errorShapes))('read errors: %s', (errorShape) => {
+  const makeError = errorShapes[errorShape];
+  beforeEach(() => {
+    jest.useFakeTimers();
+    global.t = (v) => v;
+    mockStore.currentNodesByStep = null;
+  });
+  afterEach(() => {
+    jest.useRealTimers();
+    delete global.request;
+  });
+  it('shows an initial operation failure and recovers with the retry button', async () => {
+    global.request = {
+      get: jest
+        .fn()
+        .mockRejectedValueOnce(makeError('operation unavailable'))
+        .mockResolvedValueOnce(mockOperation)
+        .mockResolvedValueOnce({ items: [] }),
+    };
+    let wrapper;
+    await act(async () => {
+      wrapper = mount(<PipelineLog item={{ name: 'op' }} />);
+    });
+    wrapper.update();
+    expect(wrapper.find('[role="alert"]').text()).toContain(
+      'operation unavailable'
+    );
+    await act(async () => {
+      wrapper.find('button').simulate('click');
+    });
+    wrapper.update();
+    expect(wrapper.find('[role="alert"]')).toHaveLength(0);
+    expect(mockStore.currentNodesByStep.stepID).toBe('one');
+    wrapper.unmount();
+  });
+  it('retains the last task snapshot on a task query failure then recovers', async () => {
+    global.request = {
+      get: jest
+        .fn()
+        .mockResolvedValueOnce(mockOperation)
+        .mockResolvedValueOnce({ items: [] })
+        .mockRejectedValueOnce(makeError('task unavailable'))
+        .mockResolvedValueOnce({ items: [] }),
+    };
+    let wrapper;
+    await act(async () => {
+      wrapper = mount(<PipelineLog item={{ name: 'op' }} />);
+    });
+    const snapshot = mockStore.currentNodesByStep;
+    await act(async () => {
+      await wrapper.instance().refreshTasks();
+    });
+    wrapper.update();
+    expect(wrapper.find('[role="alert"]').text()).toContain('task unavailable');
+    expect(mockStore.currentNodesByStep).toBe(snapshot);
+    await act(async () => {
+      wrapper.find('button').simulate('click');
+    });
+    wrapper.update();
+    expect(wrapper.find('[role="alert"]')).toHaveLength(0);
+    wrapper.unmount();
+  });
+  it('shows task errors from the operation watch without an unhandled rejection', async () => {
+    global.request = {
+      get: jest
+        .fn()
+        .mockResolvedValueOnce(mockOperation)
+        .mockResolvedValueOnce({ items: [] })
+        .mockRejectedValueOnce(makeError('watch task unavailable')),
+    };
+    let wrapper;
+    await act(async () => {
+      wrapper = mount(<PipelineLog item={{ name: 'op' }} />);
+    });
+    await act(async () => {
+      mockWatch({ type: 'MODIFIED', object: { ...mockOperation } });
+    });
+    wrapper.update();
+    expect(wrapper.find('[role="alert"]').text()).toContain(
+      'watch task unavailable'
+    );
+    wrapper.unmount();
+  });
+});
diff --git a/src/stores/log.js b/src/stores/log.js
index 6275868..a2a081a 100644
--- a/src/stores/log.js
+++ b/src/stores/log.js
@@ -21,67 +21,89 @@ import { APIVERSION } from 'utils/constants';
 export default class LogStore extends BaseStore {
   logdata = '';
 
-  logError = '';
-
   isExpand = false;
 
   cumulativeSize = 0;
 
   isStepFinished = false;
 
+  fetchPromise = null;
+
+  generation = 0;
+
+  error = '';
+
   constructor(props) {
     super(props);
-
     makeObservable(this, {
       isExpand: observable,
       logdata: observable,
-      logError: observable,
+      error: observable,
     });
   }
 
   async fetchStepLog(params) {
-    if (!params.taskName) {
-      this.isLoading = false;
-      return;
+    const { generation } = this;
+    while (this.fetchPromise) {
+      // Serialize reads because each request depends on the preceding byte offset.
+      // eslint-disable-next-line no-await-in-loop
+      await this.fetchPromise;
+      if (generation !== this.generation) return;
     }
+    if (!params.taskName) return;
 
-    this.logError = '';
+    this.isLoading = true;
+    const pending = this.fetchStepLogContent(params, generation).catch(
+      (error) => {
+        if (generation === this.generation) {
+          this.error =
+            error?.reason || error?.message || t('Failed to load task logs');
+        }
+      }
+    );
+    this.fetchPromise = pending;
     try {
+      await pending;
+    } finally {
+      if (this.fetchPromise === pending) this.fetchPromise = null;
+      if (generation === this.generation) this.isLoading = false;
+    }
+  }
+
+  async fetchStepLogContent(params, generation) {
+    let more;
+    do {
+      // Terminal logs must be drained in byte-offset order.
+      // eslint-disable-next-line no-await-in-loop
       const res = await request.get(
         `${APIVERSION.operations}/operationtasks/${encodeURIComponent(
           params.taskName
         )}/logs`,
-        { offset: params.offset || 0 }
+        { offset: this.cumulativeSize, limit: 64 * 1024 }
       );
+      if (generation !== this.generation) return;
+
       const deliverySize = res.deliverySize || 0;
       this.cumulativeSize += deliverySize;
       this.logdata += res.content || '';
-
-      if (
+      this.error = '';
+      more =
         this.isStepFinished &&
         deliverySize > 0 &&
-        this.cumulativeSize < res.logSize
-      ) {
-        params = { ...params, offset: this.cumulativeSize };
-        await this.fetchStepLog(params);
-      }
-    } catch (error) {
-      this.logError =
-        error?.reason || error?.message || t('Failed to load task logs');
-    } finally {
-      this.isExpand = true;
-      this.isLoading = false;
-    }
+        this.cumulativeSize < res.logSize;
+    } while (more);
   }
 
   async getStepLog(params) {
-    this.isLoading = true;
     await this.fetchStepLog(params);
   }
 
   logReset() {
+    this.generation += 1;
+    this.fetchPromise = null;
     this.cumulativeSize = 0;
     this.logdata = '';
-    this.logError = '';
+    this.error = '';
+    this.isLoading = false;
   }
 }
diff --git a/src/stores/log.test.js b/src/stores/log.test.js
index 5317f91..bbb42ab 100644
--- a/src/stores/log.test.js
+++ b/src/stores/log.test.js
@@ -1,5 +1,5 @@
 /*
- * Copyright 2021 KubeClipper Authors.
+ * Copyright 2026 KubeClipper Authors.
  *
  *  Licensed under the Apache License, Version 2.0 (the "License");
  *  you may not use this file except in compliance with the License.
@@ -16,67 +16,286 @@
 
 import LogStore from './log';
 
-jest.mock('utils/object.mapper', () => ({}));
+jest.mock('./base', () => class BaseStore {});
+jest.mock('utils/constants', () => ({
+  APIVERSION: { operations: 'api/operations.kubeclipper.io/v1alpha1' },
+}));
 
-beforeEach(() => {
-  global.request = { get: jest.fn() };
-});
+describe('task log fetching', () => {
+  afterEach(() => {
+    delete global.request;
+  });
 
-afterEach(() => {
-  delete global.request;
-});
+  it('ends loading and preserves an API reason when the initial request fails', async () => {
+    global.request = {
+      get: jest.fn().mockRejectedValue({
+        reason: 'agent Task log endpoint is unavailable',
+      }),
+    };
+    const store = new LogStore();
+    store.isExpand = true;
 
-it('ends loading and exposes an error when the initial log request fails', async () => {
-  const store = new LogStore();
-  request.get.mockRejectedValue({
-    reason: 'agent Task log endpoint is unavailable',
+    await store.fetchStepLog({ taskName: 'task-1' });
+
+    expect(store.error).toBe('agent Task log endpoint is unavailable');
+    expect(store.isLoading).toBe(false);
+    expect(store.isExpand).toBe(true);
+    expect(store.logdata).toBe('');
+    expect(store.cumulativeSize).toBe(0);
   });
 
-  await store.fetchStepLog({ taskName: 'task-1' });
+  it('ends loading after an initial failure and allows the request to be retried', async () => {
+    global.request = {
+      get: jest
+        .fn()
+        .mockRejectedValueOnce(new Error('request failed'))
+        .mockResolvedValueOnce({
+          content: 'recovered',
+          deliverySize: 9,
+          logSize: 9,
+        }),
+    };
+    const store = new LogStore();
+    await store.getStepLog({ taskName: 'task-1' });
+    expect(store.error).toBe('request failed');
+    expect(store.isLoading).toBe(false);
+    await store.getStepLog({ taskName: 'task-1' });
+    expect(store.error).toBe('');
+    expect(store.logdata).toBe('recovered');
+    expect(store.isLoading).toBe(false);
+    expect(request.get).toHaveBeenLastCalledWith(expect.any(String), {
+      offset: 0,
+      limit: 65536,
+    });
+  });
 
-  expect(store.isLoading).toBe(false);
-  expect(store.isExpand).toBe(true);
-  expect(store.logError).toBe('agent Task log endpoint is unavailable');
-  expect(store.logdata).toBe('');
-  expect(store.cumulativeSize).toBe(0);
-});
+  it('queues the final fetch behind an in-flight poll and uses the new offset', async () => {
+    let finishPoll;
+    global.request = {
+      get: jest
+        .fn()
+        .mockImplementationOnce(
+          () =>
+            new Promise((resolve) => {
+              finishPoll = resolve;
+            })
+        )
+        .mockResolvedValueOnce({
+          content: 'ERROR: custom executor failed\n',
+          deliverySize: 30,
+          logSize: 35,
+        }),
+    };
+    const store = new LogStore();
 
-it('retries from the last received offset without losing or duplicating logs', async () => {
-  const store = new LogStore();
-  store.isStepFinished = true;
-  request.get
-    .mockResolvedValueOnce({ content: 'first', deliverySize: 5, logSize: 11 })
-    .mockRejectedValueOnce(new Error('connection lost'));
-
-  await store.getStepLog({ taskName: 'task-1' });
-  expect(store.isLoading).toBe(false);
-  expect(store.logError).toBe('connection lost');
-  expect(store.logdata).toBe('first');
-  expect(store.cumulativeSize).toBe(5);
-
-  request.get.mockResolvedValueOnce({
-    content: 'second',
-    deliverySize: 6,
-    logSize: 11,
+    const poll = store.fetchStepLog({ taskName: 'task-1', offset: 0 });
+    const finalFetch = store.fetchStepLog({ taskName: 'task-1', offset: 0 });
+
+    expect(request.get).toHaveBeenCalledTimes(1);
+    finishPoll({ content: 'start', deliverySize: 5, logSize: 5 });
+    await Promise.all([poll, finalFetch]);
+
+    expect(request.get).toHaveBeenLastCalledWith(
+      'api/operations.kubeclipper.io/v1alpha1/operationtasks/task-1/logs',
+      { offset: 5, limit: 65536 }
+    );
+    expect(store.logdata).toBe('startERROR: custom executor failed\n');
+    expect(store.cumulativeSize).toBe(35);
   });
-  await store.getStepLog({ taskName: 'task-1', offset: store.cumulativeSize });
 
-  expect(request.get).toHaveBeenLastCalledWith(
-    'api/operations.kubeclipper.io/v1alpha1/operationtasks/task-1/logs',
-    { offset: 5 }
-  );
-  expect(store.logError).toBe('');
-  expect(store.isLoading).toBe(false);
-  expect(store.logdata).toBe('firstsecond');
-  expect(store.cumulativeSize).toBe(11);
-});
+  it('drains every remaining chunk when the task has finished', async () => {
+    global.request = {
+      get: jest
+        .fn()
+        .mockResolvedValueOnce({
+          content: 'start',
+          deliverySize: 5,
+          logSize: 10,
+        })
+        .mockResolvedValueOnce({
+          content: 'error',
+          deliverySize: 5,
+          logSize: 10,
+        }),
+    };
+    const store = new LogStore();
+    store.isStepFinished = true;
+
+    await store.fetchStepLog({ taskName: 'task-1' });
 
-it('ends loading and allows retry when expanding a failed log request', async () => {
-  const store = new LogStore();
-  request.get.mockRejectedValue(new Error('request failed'));
+    expect(store.logdata).toBe('starterror');
+    expect(store.cumulativeSize).toBe(10);
+    expect(store.fetchPromise).toBeNull();
+  });
+  it('keeps the offset on failure and retries the terminal tail', async () => {
+    global.request = {
+      get: jest
+        .fn()
+        .mockResolvedValueOnce({
+          content: 'start',
+          deliverySize: 5,
+          logSize: 10,
+        })
+        .mockRejectedValueOnce(new Error('agent unreachable'))
+        .mockResolvedValueOnce({
+          content: 'error',
+          deliverySize: 5,
+          logSize: 10,
+        }),
+    };
+    const store = new LogStore();
+    store.isStepFinished = true;
+    await store.getStepLog({ taskName: 'task-1' });
+    expect(store.error).toBe('agent unreachable');
+    expect(store.isLoading).toBe(false);
+    expect(store.cumulativeSize).toBe(5);
+    expect(store.logdata).toBe('start');
+    await store.getStepLog({ taskName: 'task-1' });
+    expect(request.get).toHaveBeenLastCalledWith(expect.any(String), {
+      offset: 5,
+      limit: 65536,
+    });
+    expect(store.logdata).toBe('starterror');
+    expect(store.error).toBe('');
+  });
+
+  it('runs the queued final fetch even when its preceding poll fails', async () => {
+    let rejectPoll;
+    global.request = {
+      get: jest
+        .fn()
+        .mockImplementationOnce(
+          () =>
+            new Promise((resolve, reject) => {
+              rejectPoll = reject;
+            })
+        )
+        .mockResolvedValueOnce({
+          content: 'final',
+          deliverySize: 5,
+          logSize: 5,
+        }),
+    };
+    const store = new LogStore();
+    const poll = store.fetchStepLog({ taskName: 'task-1' });
+    store.isStepFinished = true;
+    const final = store.fetchStepLog({ taskName: 'task-1' });
+    rejectPoll(new Error('poll failed'));
+    await Promise.all([poll, final]);
+    expect(store.logdata).toBe('final');
+    expect(store.error).toBe('');
+    expect(store.isLoading).toBe(false);
+  });
 
-  await store.getStepLog({ taskName: 'task-1' });
+  it('discards a late response after collapse and restarts at zero on reopen', async () => {
+    let finish;
+    global.request = {
+      get: jest
+        .fn()
+        .mockImplementationOnce(
+          () =>
+            new Promise((resolve) => {
+              finish = resolve;
+            })
+        )
+        .mockResolvedValueOnce({ content: 'new', deliverySize: 3, logSize: 3 }),
+    };
+    const store = new LogStore();
+    const old = store.fetchStepLog({ taskName: 'task-1' });
+    store.logReset();
+    finish({ content: 'stale', deliverySize: 5, logSize: 5 });
+    await old;
+    expect(store.logdata).toBe('');
+    expect(store.cumulativeSize).toBe(0);
+    expect(store.isExpand).toBe(false);
+    await store.getStepLog({ taskName: 'task-1' });
+    expect(request.get).toHaveBeenLastCalledWith(expect.any(String), {
+      offset: 0,
+      limit: 65536,
+    });
+    expect(store.logdata).toBe('new');
+    expect(store.isExpand).toBe(false);
+  });
 
-  expect(store.isLoading).toBe(false);
-  expect(store.logError).toBe('request failed');
+  it('uses delivered bytes instead of JavaScript string length', async () => {
+    global.request = {
+      get: jest
+        .fn()
+        .mockResolvedValueOnce({
+          content: '中文',
+          deliverySize: 6,
+          logSize: 10,
+        })
+        .mockResolvedValueOnce({
+          content: 'tail',
+          deliverySize: 4,
+          logSize: 10,
+        }),
+    };
+    const store = new LogStore();
+    store.isStepFinished = true;
+    await store.getStepLog({ taskName: 'task-1' });
+    expect(request.get).toHaveBeenLastCalledWith(expect.any(String), {
+      offset: 6,
+      limit: 65536,
+    });
+    expect(store.logdata).toBe('中文tail');
+  });
+
+  it.each(['resolve', 'reject'])(
+    'reopens while the old request is pending and ignores its late %s',
+    async (outcome) => {
+      let finishOld;
+      let rejectOld;
+      let finishNew;
+      global.request = {
+        get: jest
+          .fn()
+          .mockImplementationOnce(
+            () =>
+              new Promise((resolve, reject) => {
+                finishOld = resolve;
+                rejectOld = reject;
+              })
+          )
+          .mockImplementationOnce(
+            () =>
+              new Promise((resolve) => {
+                finishNew = resolve;
+              })
+          ),
+      };
+      const store = new LogStore();
+      const oldRead = store.fetchStepLog({ taskName: 'task-1' });
+      const oldQueuedRead = store.fetchStepLog({ taskName: 'task-1' });
+      store.logReset();
+
+      const reopened = store.getStepLog({ taskName: 'task-1' });
+      const pending = store.fetchPromise;
+      expect(request.get).toHaveBeenCalledTimes(2);
+      expect(request.get).toHaveBeenLastCalledWith(expect.any(String), {
+        offset: 0,
+        limit: 65536,
+      });
+
+      if (outcome === 'resolve') {
+        finishOld({ content: 'stale', deliverySize: 5, logSize: 5 });
+      } else {
+        rejectOld(new Error('stale request failed'));
+      }
+      await Promise.all([oldRead, oldQueuedRead]);
+      expect(store.fetchPromise).toBe(pending);
+      expect(store.isLoading).toBe(true);
+      expect(store.logdata).toBe('');
+      expect(store.error).toBe('');
+
+      finishNew({ content: 'fresh', deliverySize: 5, logSize: 5 });
+      await reopened;
+      expect(request.get).toHaveBeenCalledTimes(2);
+      expect(store.logdata).toBe('fresh');
+      expect(store.cumulativeSize).toBe(5);
+      expect(store.isLoading).toBe(false);
+      expect(store.fetchPromise).toBeNull();
+    }
+  );
 });