模型提问 {index + 1} / {options.length}
{current.question}
{(current.options || []).map((opt) => ( ))}
{selectedOption ? (
复制以下内容到输入框
          {copyHint ? (
            <span className="studio-run-tool-copy__hint">{copyHint}</span>
          ) : null}
        </div>
      ) : null}
    </div>
  );
}

function PromptBlocksDebug({ blocks, onBlockClick }) {
  const [open, setOpen] = useState(false);
  if (!blocks?.length) return null;

  return (
    <div className="studio-run-prompt-debug">
      <button
        type="button"
        className="studio-run-prompt-debug__toggle"
        onClick={() => setOpen((v) => !v)}
      >
        {open ? '▼' : '▶'} 上下文块（调试 · {blocks.length}）
      </button>
      {open && (
        <div className="studio-run-prompt-debug__list">
          {blocks.map((block) => (
            <button
              key={block.id}
              type="button"
              className="studio-run-prompt-debug__item"
              onClick={() => onBlockClick?.(block)}
            >
              <span className="studio-run-prompt-debug__label">{block.label}</span>
              <span className="studio-run-prompt-debug__source">{block.source}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function RunListItem({
  run,
  selected,
  onSelect,
  onDelete,
  renamingId,
  renameValue,
  onRenameChange,
  onRenameSubmit,
  onRenameCancel,
  onStartRename,
}) {
  const isRenaming = renamingId === run.id;

  return (
    <li className="studio-run-list-row">
      {isRenaming ? (
        <form
          className="studio-run-rename-form"
          onSubmit={(e) => {
            e.preventDefault();
            onRenameSubmit(run.id);
          }}
        >
          <input
            className="studio-run-rename-input"
            value={renameValue}
            onChange={(e) => onRenameChange(e.target.value)}
            autoFocus
            maxLength={120}
          />
          <div className="studio-run-rename-actions">
            <button type="submit" className="studio-run-list-action" title="保存">
              ✓
            </button>
            <button
              type="button"
              className="studio-run-list-action"
              onClick={onRenameCancel}
              title="取消"
            >
              ✕
            </button>
          </div>
        </form>
      ) : (
        <>
          <button
            type="button"
            className={`studio-run-list-item${selected ? ' selected' : ''}`}
            onClick={() => onSelect(run.id)}
          >
            <span className="studio-run-list-name">{runDisplayName(run)}</span>
            <span className={`studio-run-status-badge status-${run.status}`}>
              {RUN_STATUS_LABEL[run.status] || run.status}
            </span>
          </button>
          <div className="studio-run-list-item-actions">
            <button
              type="button"
              className="studio-run-list-action"
              title="重命名"
              onClick={(e) => {
                e.stopPropagation();
                onStartRename(run);
              }}
            >
              ✎
            </button>
            <button
              type="button"
              className="studio-run-list-action studio-run-list-action--danger"
              title="删除"
              onClick={(e) => {
                e.stopPropagation();
                onDelete(run.id);
              }}
            >
              🗑
            </button>
          </div>
        </>
      )}
    </li>
  );
}

function ProductPreview({ activeNodeState, isWorldbookActive, compact = false }) {
  let productPreview = '暂无产物';
  if (activeNodeState?.lastDraft) {
    const draft = activeNodeState.lastDraft;
    for (const key of ['entryContent', 'content', 'text', 'body']) {
      if (typeof draft[key] === 'string' && draft[key].trim()) {
        productPreview = draft[key];
        break;
      }
    }
    if (productPreview === '暂无产物') {
      productPreview = JSON.stringify(draft, null, 2);
    }
  } else if (isWorldbookActive) {
    productPreview = '（等待模型生成条目草稿…）';
  }

  return (
    <div className={`studio-run-product-main${compact ? ' studio-run-product-main--compact' : ''}`}>
      <div className="studio-run-product-main__head">
        <h2 className="studio-run-section-title">目前产物</h2>
        {activeNodeState?.displayName && (
          <span className="studio-run-product-main__step">
            {activeNodeState.displayName}
          </span>
        )}
      </div>
      <pre className="studio-run-product-main__body">{productPreview}</pre>
    </div>
  );
}

function WorkflowVariablesPanel({ variables, labelMap }) {
  const entries = Object.entries(variables || {});
  if (entries.length === 0) return null;

  return (
    <section className="studio-run-preview-section">
      <h2 className="studio-run-section-title">工作流变量</h2>
      <dl className="studio-run-variables">
        {entries.map(([key, value]) => (
          <div key={key} className="studio-run-variables__row">
            <dt title={key}>{getWorkflowVariableLabel(key, labelMap)}</dt>
            <dd>{typeof value === 'string' ? value : JSON.stringify(value)}</dd>
          </div>
        ))}
      </dl>
    </section>
  );
}

function CurrentNodePanel({ activeNodeState, graphCurrentNodeId, graphPipeline }) {
  const nodeName =
    activeNodeState?.displayName ||
    graphPipeline?.nodes?.find((n) => n.id === graphCurrentNodeId)?.displayName ||
    '—';
  const nodeStatus = activeNodeState?.status;

  return (
    <section className="studio-run-preview-section">
      <h2 className="studio-run-section-title">当前节点</h2>
      <dl className="studio-run-overview studio-run-overview--inline">
        <div>
          <dt>步骤</dt>
          <dd>{nodeName}</dd>
        </div>
        {nodeStatus && (
          <div>
            <dt>状态</dt>
            <dd>{RUN_STATUS_LABEL[nodeStatus] || nodeStatus}</dd>
          </div>
        )}
        {activeNodeState?.skillId && (
          <div>
            <dt>技能</dt>
            <dd>{activeNodeState.skillId}</dd>
          </div>
        )}
      </dl>
    </section>
  );
}

function InsertionSidebar({ insertionPreview, onOpenEntry }) {
  if (!insertionPreview) {
    return (
      <section className="studio-run-right-section">
        <h2 className="studio-run-section-title">插入内容</h2>
        <p className="studio-run-right-placeholder">当前步骤无世界书插入配置</p>
      </section>
    );
  }

  return (
    <section className="studio-run-right-section">
      <h2 className="studio-run-section-title">插入内容</h2>
      <button
        type="button"
        className="studio-run-insertion-entry"
        onClick={() => onOpenEntry(insertionPreview)}
        title={insertionPreview.comment || insertionPreview.key}
      >
        <span className="studio-run-insertion-entry__key">{insertionPreview.key}</span>
        {insertionPreview.comment ? (
          <span className="studio-run-insertion-entry__meta">{insertionPreview.comment}</span>
        ) : null}
      </button>
    </section>
  );
}

function StudioRunPage() {
  const {
    pipeline: projectPipeline,
    workflowVariables: workflowVariablesCatalog,
    meta,
    runProjectId,
    runs,
    currentRunId,
    currentRun,
    runLoading,
    runAdvancing,
    runMessaging,
    runStreamingThinking,
    runError,
    runSessionEntered,
    setRunSessionEntered,
    initStudioRun,
    fetchProject,
    selectRun,
    advanceRun,
    saveWorldbookRun,
    switchRunNode,
    sendRunMessage,
    undoRun,
    rerollRun,
    interruptRun,
    deleteRun,
    renameRun,
    skillTemplates,
  } = useStudioStore();

  const sidebarMode = useAppLayoutStore((s) => s.sidebarMode);
  const isSidebarHovered = useAppLayoutStore((s) => s.isSidebarHovered);
  const setSidebarHovered = useAppLayoutStore((s) => s.setSidebarHovered);

  const hoverTimeoutRef = useRef(null);
  const leaveTimeoutRef = useRef(null);

  const handleLeftMouseEnter = useCallback(() => {
    if (sidebarMode !== 'smart') return;
    if (leaveTimeoutRef.current) clearTimeout(leaveTimeoutRef.current);
    hoverTimeoutRef.current = setTimeout(() => {
      setSidebarHovered(true);
    }, 400);
  }, [sidebarMode, setSidebarHovered]);

  const handleLeftMouseLeave = useCallback(() => {
    if (sidebarMode !== 'smart') return;
    if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
    leaveTimeoutRef.current = setTimeout(() => {
      setSidebarHovered(false);
    }, 250);
  }, [sidebarMode, setSidebarHovered]);

  useEffect(() => {
    return () => {
      if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
      if (leaveTimeoutRef.current) clearTimeout(leaveTimeoutRef.current);
    };
  }, []);

  const variableLabelMap = useMemo(
    () => buildWorkflowVariableLabelMap(workflowVariablesCatalog),
    [workflowVariablesCatalog]
  );
  const [insertionPopupOpen, setInsertionPopupOpen] = useState(false);
  const [insertionPopupExpanded, setInsertionPopupExpanded] = useState(true);
  const [contextBlockPopup, setContextBlockPopup] = useState(null);
  const [chatInput, setChatInput] = useState('');
  const [streamOutput, setStreamOutput] = useState(false);
  const [toolOptionIndex, setToolOptionIndex] = useState(0);
  const [runListExpanded, setRunListExpanded] = useState(false);
  const [renamingId, setRenamingId] = useState(null);
  const [renameValue, setRenameValue] = useState('');
  const [confirmPending, setConfirmPending] = useState(null);
  const confirmTimeoutRef = useRef(null);

  useEffect(() => {
    initStudioRun();
  }, [initStudioRun]);

  useEffect(() => {
    if (runProjectId) {
      fetchProject(runProjectId);
    }
  }, [runProjectId, fetchProject]);

  useEffect(() => {
    setRunSessionEntered(false);
    setInsertionPopupOpen(false);
    setContextBlockPopup(null);
  }, [currentRunId, runProjectId, setRunSessionEntered]);

  const activeNodeState = useMemo(() => {
    if (!currentRun?.currentNodeId) return null;
    return currentRun.nodeStates?.find((n) => n.nodeId === currentRun.currentNodeId);
  }, [currentRun]);

  const activePipelineNode = useMemo(() => {
    if (!currentRun?.currentNodeId) return null;
    return currentRun.pipelineSnapshot?.nodes?.find(
      (n) => n.id === currentRun.currentNodeId
    );
  }, [currentRun]);

  const isInitBindPending =
    activeNodeState?.status === 'active' &&
    activeNodeState?.skillId === 'studio.init_bind' &&
    !isInitBindCompleted(activeNodeState);

  const runControls = useMemo(
    () => getRunControls(activeNodeState?.skillId, skillTemplates),
    [activeNodeState?.skillId, skillTemplates]
  );

  const isWorldbookActive =
    activeNodeState?.status === 'active' &&
    hasRunControl(activeNodeState?.skillId, 'interrupt', skillTemplates);

  const toolQuestions = useMemo(
    () => activeNodeState?.lastToolResponse?.questions || [],
    [activeNodeState]
  );

  useEffect(() => {
    setToolOptionIndex(0);
  }, [currentRunId, activeNodeState?.nodeId, toolQuestions.length]);

  const clearConfirmPending = useCallback(() => {
    if (confirmTimeoutRef.current) {
      clearTimeout(confirmTimeoutRef.current);
      confirmTimeoutRef.current = null;
    }
    setConfirmPending(null);
  }, []);

  useEffect(() => {
    clearConfirmPending();
  }, [currentRunId, activeNodeState?.nodeId, clearConfirmPending]);

  useEffect(() => {
    if (!confirmPending) return undefined;
    const handleClickOutside = (event) => {
      if (!event.target.closest('.studio-run-turn-btn')) {
        clearConfirmPending();
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, [confirmPending, clearConfirmPending]);

  useEffect(() => {
    return () => {
      if (confirmTimeoutRef.current) clearTimeout(confirmTimeoutRef.current);
    };
  }, []);

  const requestConfirmAction = useCallback((actionKey) => {
    if (confirmPending === actionKey) {
      clearConfirmPending();
      return true;
    }
    if (confirmTimeoutRef.current) clearTimeout(confirmTimeoutRef.current);
    setConfirmPending(actionKey);
    confirmTimeoutRef.current = setTimeout(() => {
      setConfirmPending(null);
      confirmTimeoutRef.current = null;
    }, CONFIRM_ACTION_TIMEOUT_MS);
    return false;
  }, [confirmPending, clearConfirmPending]);

  const graphPipeline = currentRun?.pipelineSnapshot || projectPipeline;
  const graphNodeStates = currentRun?.nodeStates || [];
  const graphCurrentNodeId = currentRun?.currentNodeId || null;

  const insertionPreview = useMemo(() => {
    const ins = activePipelineNode?.config?.insertion;
    if (!ins) return null;
    return {
      key: ins.key || '（未设置关键词）',
      comment: ins.comment || '',
      position: ins.position,
      activationType: ins.activationType,
      keysecondary: ins.keysecondary || '',
    };
  }, [activePipelineNode]);

  const promptBlocks = currentRun?.lastPromptBlocks || [];
  const runWorkflowVariables = currentRun?.workflowVariables || {};
  const stepMessages = activeNodeState?.stepMessages || [];
  const lastToolResponse = activeNodeState?.lastToolResponse;

  const characters = useCharacterStore((s) => s.characters);
  const boundCharacterName = useMemo(
    () =>
      resolveBoundCharacterName({
        boundCharacterVar: runWorkflowVariables['workflow.boundCharacter'],
        characterId: meta?.characterId,
        characters,
      }),
    [runWorkflowVariables, meta?.characterId, characters]
  );

  const handleOpenInsertion = () => {
    setInsertionPopupExpanded(true);
    setInsertionPopupOpen(true);
  };

  const handleInitBindSubmit = async (displayParams) => {
    await advanceRun(displayParams);
  };

  const handleSelectRun = async (runId) => {
    setRunSessionEntered(false);
    await selectRun(runId);
  };

  const handleEnterSession = () => {
    if (currentRun) {
      setRunSessionEntered(true);
    }
  };

  const handleChatSend = async (text) => {
    if (!text || isInitBindPending || !isWorldbookActive || runMessaging) return;

    setChatInput('');

    const run = await sendRunMessage(text, { stream: streamOutput });
    if (!run) {
      /* error surfaced via runError */
    }
  };

  const handleUndo = async () => {
    if (!hasRunControl(activeNodeState?.skillId, 'undo', skillTemplates)) return;
    if (runMessaging || !canUndoRun(activeNodeState)) return;
    clearConfirmPending();
    await undoRun();
  };

  const handleReroll = async () => {
    if (!hasRunControl(activeNodeState?.skillId, 'reroll', skillTemplates)) return;
    if (runMessaging || !canRerollRun(activeNodeState)) return;
    clearConfirmPending();
    await rerollRun({ stream: streamOutput });
  };

  const handleUndoClick = () => {
    if (runAdvancing || runMessaging || !canUndo) return;
    requestConfirmAction('undo');
  };

  const handleRerollClick = () => {
    if (runAdvancing || runMessaging || !canReroll) return;
    requestConfirmAction('reroll');
  };

  const handleNextStep = async () => {
    if (runAdvancing || runMessaging || !canAdvanceNextStep(activeNodeState)) {
      return;
    }
    clearConfirmPending();
    const run = await advanceRun({});
    if (run) {
      setChatInput('');
      setToolOptionIndex(0);
    }
  };

  const handleSaveIncremental = async () => {
    if (!hasRunControl(activeNodeState?.skillId, 'incrementalSave', skillTemplates)) return;
    if (runAdvancing || runMessaging || !canSaveWorldbookEntry(activeNodeState)) return;
    clearConfirmPending();
    await saveWorldbookRun('incremental');
  };

  const handleSaveOverwrite = async () => {
    if (!hasRunControl(activeNodeState?.skillId, 'overwriteSave', skillTemplates)) return;
    if (runAdvancing || runMessaging || !canSaveWorldbookEntry(activeNodeState)) return;
    clearConfirmPending();
    await saveWorldbookRun('overwrite');
  };

  const handleSaveIncrementalClick = () => {
    if (runAdvancing || runMessaging || !canSaveWorldbookEntry(activeNodeState)) return;
    requestConfirmAction('saveIncremental');
  };

  const handleSaveOverwriteClick = () => {
    if (runAdvancing || runMessaging || !canSaveWorldbookEntry(activeNodeState)) return;
    requestConfirmAction('saveOverwrite');
  };

  const handleGraphNodeSelect = useCallback(
    async (nodeId) => {
      if (!currentRun || nodeId === currentRun.currentNodeId) return;
      if (runLoading || runAdvancing || runMessaging) return;
      const nodeState = currentRun.nodeStates?.find((n) => n.nodeId === nodeId);
      if (!canSwitchToNode(nodeState)) return;
      clearConfirmPending();
      const run = await switchRunNode(nodeId);
      if (run) {
        setChatInput('');
        setToolOptionIndex(0);
      }
    },
    [
      currentRun,
      runLoading,
      runAdvancing,
      runMessaging,
      switchRunNode,
      clearConfirmPending,
    ]
  );

  const handleDeleteRun = async (runId) => {
    const name = runDisplayName(runs.find((r) => r.id === runId) || {});
    if (!window.confirm(`确定删除运行「${name}」？此操作不可撤销。`)) return;
    if (currentRunId === runId) setRunSessionEntered(false);
    await deleteRun(runId);
  };

  const handleStartRename = (run) => {
    setRenamingId(run.id);
    setRenameValue(run.title?.trim() || runDisplayName(run));
  };

  const handleRenameSubmit = async (runId) => {
    const title = renameValue.trim();
    if (!title) return;
    const ok = await renameRun(runId, title);
    if (ok) {
      setRenamingId(null);
      setRenameValue('');
    }
  };

  const runListNeedsCollapse = runs.length > RUN_LIST_COLLAPSE_THRESHOLD;
  const inSession = runSessionEntered && !!currentRun;
  const showToolCarousel =
    inSession && runControls.includes('questions') && toolQuestions.length > 0;
  const showNextStep =
    inSession && shouldShowFirstExport(activeNodeState);
  const showSaveIncremental =
    inSession &&
    hasRunControl(activeNodeState?.skillId, 'incrementalSave', skillTemplates) &&
    shouldShowSaveAppendOverwrite(activeNodeState);
  const showSaveOverwrite =
    inSession &&
    hasRunControl(activeNodeState?.skillId, 'overwriteSave', skillTemplates) &&
    shouldShowSaveAppendOverwrite(activeNodeState);
  const canSaveEntry = canSaveWorldbookEntry(activeNodeState);
  const showUndo = runControls.includes('undo');
  const showReroll = runControls.includes('reroll');
  const canUndo = canUndoRun(activeNodeState);
  const canReroll = canRerollRun(activeNodeState);
  const canNextStep = canAdvanceNextStep(activeNodeState);
  const showTurnActions = inSession && (showUndo || showReroll);
  const canInterrupt = runControls.includes('interrupt');

  const renderRunList = () => (
    <>
      {runLoading && runs.length === 0 ? (
        <div className="studio-run-empty">加载中…</div>
      ) : runs.length === 0 ? (
        <div className="studio-run-empty">暂无会话记录，点击「新开会话」开始</div>
      ) : (
        <>
          <ul
            className={`studio-run-list${runListNeedsCollapse && !runListExpanded ? ' is-collapsed' : ''}`}
            style={
              runListNeedsCollapse && !runListExpanded
                ? { maxHeight: `${RUN_ITEM_HEIGHT * 3.5}px` }
                : undefined
            }
          >
            {runs.map((run) => (
              <RunListItem
                key={run.id}
                run={run}
                selected={currentRunId === run.id}
                onSelect={handleSelectRun}
                onDelete={handleDeleteRun}
                renamingId={renamingId}
                renameValue={renameValue}
                onRenameChange={setRenameValue}
                onRenameSubmit={handleRenameSubmit}
                onRenameCancel={() => {
                  setRenamingId(null);
                  setRenameValue('');
                }}
                onStartRename={handleStartRename}
              />
            ))}
          </ul>
          {runListNeedsCollapse && (
            <button
              type="button"
              className="studio-run-list-fold"
              onClick={() => setRunListExpanded((v) => !v)}
            >
              {runListExpanded ? '收起列表' : `展开全部（共 ${runs.length} 条）`}
            </button>
          )}
        </>
      )}
    </>
  );

  const renderNodeProgress = () => {
    if (!graphPipeline) {
      return <div className="studio-run-empty">暂无流水线数据</div>;
    }
    return (
      <StudioRunNodeGraph
        pipeline={graphPipeline}
        nodeStates={graphNodeStates}
        currentNodeId={graphCurrentNodeId}
        variant="sidebar"
        onNodeSelect={currentRun ? handleGraphNodeSelect : undefined}
        canSelectNode={canSwitchToNode}
      />
    );
  };

  const renderLeftBrowseView = () => (
    <div className="studio-run-left-stack">
      <section className="studio-run-left-stack__sessions">
        <h2 className="studio-run-section-title">会话列表</h2>
        {renderRunList()}
      </section>
      <section className="studio-run-left-stack__progress">
        <h2 className="studio-run-section-title">节点进度</h2>
        <p className="studio-run-hint studio-run-hint--inline">
          基于各步骤上文引用（inputs.ref）生成的依赖顺序。
        </p>
        {renderNodeProgress()}
      </section>
    </div>
  );

  const renderLeftSessionView = () => (
    <div className="studio-run-left-session">
      <ProductPreview
        activeNodeState={activeNodeState}
        isWorldbookActive={isWorldbookActive}
      />
      <section className="studio-run-left-session__graph">
        <h2 className="studio-run-section-title">节点进度</h2>
        <p className="studio-run-hint studio-run-hint--inline">
          点击已完成、进行中或已有草稿的步骤可切换当前焦点。
        </p>
        {renderNodeProgress()}
      </section>
      <PromptBlocksDebug
        blocks={promptBlocks}
        onBlockClick={setContextBlockPopup}
      />
    </div>
  );

  const renderRunPreviewCenter = () => {
    if (!runProjectId) {
      return <div className="studio-run-chat-empty">请先选择项目</div>;
    }

    if (!currentRun) {
      return (
        <div className="studio-run-preview-empty">
          <p className="studio-run-hint">在左侧选择或新建会话，此处将预览运行内容与节点状态。</p>
        </div>
      );
    }

    return (
      <div className="studio-run-preview">
        <header className="studio-run-preview__header">
          <div className="studio-run-preview__title-row">
            <h2 className="studio-run-preview__title">{runDisplayName(currentRun)}</h2>
            <span className={`studio-run-status-badge status-${currentRun.status}`}>
              {RUN_STATUS_LABEL[currentRun.status] || currentRun.status}
            </span>
          </div>
          <div className="studio-run-preview__meta">
            <span>创建 {formatRunTime(currentRun.createdAt)}</span>
            {boundCharacterName ? (
              <span className="studio-run-preview__character">
                角色卡：{boundCharacterName}
              </span>
            ) : null}
          </div>
          <button
            type="button"
            className="studio-run-enter-btn studio-run-enter-btn--header"
            onClick={handleEnterSession}
            disabled={runLoading || runAdvancing}
          >
            进入会话
          </button>
        </header>

        <div className="studio-run-preview__body">
          <CurrentNodePanel
            activeNodeState={activeNodeState}
            graphCurrentNodeId={graphCurrentNodeId}
            graphPipeline={graphPipeline}
          />
          <ProductPreview
            activeNodeState={activeNodeState}
            isWorldbookActive={isWorldbookActive}
            compact
          />
          <WorkflowVariablesPanel
            variables={runWorkflowVariables}
            labelMap={variableLabelMap}
          />
          {promptBlocks.length > 0 && (
            <section className="studio-run-preview-section">
              <PromptBlocksDebug
                blocks={promptBlocks}
                onBlockClick={setContextBlockPopup}
              />
            </section>
          )}
        </div>
      </div>
    );
  };

  const renderSessionCenter = () => {
    if (isInitBindPending && activePipelineNode) {
      return (
        <div className="studio-run-chat-card">
          <InitBindGuidanceForm
            node={{ ...activePipelineNode, nodeId: activePipelineNode.id }}
            runAdvancing={runAdvancing}
            onSubmit={handleInitBindSubmit}
            compact
          />
        </div>
      );
    }

    if (
      activeNodeState?.skillId === 'studio.init_bind' &&
      isInitBindCompleted(activeNodeState)
    ) {
      return (
        <div className="studio-run-chat-empty">
          <p>创建并绑定步骤已完成。</p>
          <p className="studio-run-hint">绑定信息见左侧「目前产物」。</p>
        </div>
      );
    }

    return (
      <div className="studio-run-chat-panel">
        <StudioRunChat
          stepMessages={stepMessages}
          thinking={runStreamingThinking ?? lastToolResponse?.thinking}
          evaluation={runStreamingThinking ? null : lastToolResponse?.evaluation}
          inputValue={chatInput}
          onInputChange={setChatInput}
          onSend={handleChatSend}
          onInterrupt={canInterrupt ? interruptRun : undefined}
          canInterrupt={canInterrupt}
          disabled={!isWorldbookActive || runAdvancing || isInitBindPending}
          sending={runMessaging}
          streamOutput={streamOutput}
          onStreamOutputChange={setStreamOutput}
          placeholder={
            isWorldbookActive
              ? '输入修改意见或与模型对话…'
              : currentRun?.status === 'completed'
                ? '运行已完成'
                : '等待当前步骤…'
          }
        />
      </div>
    );
  };

  const renderRightSidebar = () => (
    <>
      <InsertionSidebar
        insertionPreview={insertionPreview}
        onOpenEntry={handleOpenInsertion}
      />

      {showToolCarousel && (
        <ToolOptionsCarousel
          options={toolQuestions}
          index={toolOptionIndex}
          onPrev={() =>
            setToolOptionIndex((i) => (i - 1 + toolQuestions.length) % toolQuestions.length)
          }
          onNext={() =>
            setToolOptionIndex((i) => (i + 1) % toolQuestions.length)
          }
          runAdvancing={runAdvancing || runMessaging}
        />
      )}

      {showTurnActions && (
        <div className="studio-run-right-section studio-run-turn-actions">
          <h2 className="studio-run-section-title">回合控制</h2>
          <div className="studio-run-turn-actions__row">
            {showUndo ? (
              <ConfirmTurnButton
                actionKey="undo"
                pendingKey={confirmPending}
                label="回退"
                className="studio-run-turn-btn studio-run-turn-btn--undo"
                disabled={runAdvancing || runMessaging || !canUndo}
                title={canUndo ? '回退到上一回合' : '无可回退的回合'}
                onConfirm={handleUndo}
                onRequestConfirm={handleUndoClick}
              />
            ) : null}
            {showReroll ? (
              <ConfirmTurnButton
                actionKey="reroll"
                pendingKey={confirmPending}
                label="重roll"
                className="studio-run-turn-btn studio-run-turn-btn--reroll"
                disabled={runAdvancing || runMessaging || !canReroll}
                title={canReroll ? '用相同输入重新生成' : '尚无用户消息'}
                onConfirm={handleReroll}
                onRequestConfirm={handleRerollClick}
              />
            ) : null}
          </div>
        </div>
      )}

      {showNextStep && (
        <div className="studio-run-right-section studio-run-right-actions">
          <button
            type="button"
            className="studio-run-next-btn"
            onClick={handleNextStep}
            disabled={runAdvancing || runMessaging || !canNextStep}
            title={canNextStep ? '确认当前产物并进入下一节点' : '请先生成当前步骤产物'}
          >
            下一步
          </button>
          <p className="studio-run-stub-note">确认左侧目前产物无误后进入下一节点</p>
        </div>
      )}

      {(showSaveIncremental || showSaveOverwrite) && (
        <div className="studio-run-right-section studio-run-save-actions">
          <h2 className="studio-run-section-title">世界书保存</h2>
          <div className="studio-run-turn-actions__row">
            {showSaveIncremental ? (
              <ConfirmTurnButton
                actionKey="saveIncremental"
                pendingKey={confirmPending}
                label="增量保存"
                className="studio-run-turn-btn studio-run-turn-btn--append"
                disabled={runAdvancing || runMessaging || !canSaveEntry}
                title={canSaveEntry ? '追加为新世界书条目' : '请先生成当前步骤产物'}
                onConfirm={handleSaveIncremental}
                onRequestConfirm={handleSaveIncrementalClick}
              />
            ) : null}
            {showSaveOverwrite ? (
              <ConfirmTurnButton
                actionKey="saveOverwrite"
                pendingKey={confirmPending}
                label="覆盖保存"
                className="studio-run-turn-btn studio-run-turn-btn--overwrite"
                disabled={runAdvancing || runMessaging || !canSaveEntry}
                title={canSaveEntry ? '覆盖上次写入的条目' : '请先生成当前步骤产物'}
                onConfirm={handleSaveOverwrite}
                onRequestConfirm={handleSaveOverwriteClick}
              />
            ) : null}
          </div>
          <p className="studio-run-stub-note">增量保存会新建条目；覆盖保存会更新本步骤上次写入的条目。切换步骤请使用左侧节点图。</p>
        </div>
      )}
    </>
  );

  return (
    <div className={`studio-run-page${inSession ? ' studio-run-page--session' : ''}`}>
      {runError && (
        <div className="studio-run-banner error" role="alert">{runError}</div>
      )}

      <div
        className={`studio-run-body studio-run-sidebar-${sidebarMode}${
          sidebarMode === 'smart' && isSidebarHovered ? ' studio-run-sidebar-expanded' : ''
        }${inSession ? ' in-session' : ''}`}
      >
        <aside
          className={`studio-run-left sidebar-mode-${sidebarMode}${
            sidebarMode === 'smart' && isSidebarHovered ? ' sidebar-expanded' : ''
          }`}
          aria-label="左栏"
          onMouseEnter={handleLeftMouseEnter}
          onMouseLeave={handleLeftMouseLeave}
        >
          <div className="studio-run-left-content">
            {inSession ? renderLeftSessionView() : renderLeftBrowseView()}
          </div>
        </aside>

        <main className="studio-run-center" aria-label={inSession ? '对话' : '运行预览'}>
          {inSession ? renderSessionCenter() : renderRunPreviewCenter()}
        </main>

        <aside className="studio-run-right" aria-label="控制与插入">
          {currentRun ? renderRightSidebar() : (
            <p className="studio-run-right-placeholder">选择会话后显示插入内容与控制项</p>
          )}
        </aside>
      </div>

      <StudioContextBlockPopup
        open={!!contextBlockPopup}
        block={contextBlockPopup}
        onClose={() => setContextBlockPopup(null)}
      />

      <StudioInsertionPopup
        open={insertionPopupOpen && !!insertionPreview}
        title="插入内容"
        defaultExpanded={insertionPopupExpanded}
        onClose={() => setInsertionPopupOpen(false)}
      >
        {({ expanded }) =>
          expanded ? (
            <pre className="studio-insertion-popup__full">
              {JSON.stringify(insertionPreview, null, 2)}
            </pre>
          ) : (
            <div className="studio-insertion-popup__preview">
              <span className="studio-insertion-popup__field-label">关键词</span>
              <span className="studio-insertion-popup__field-value">
                {insertionPreview?.key}
              </span>
              {insertionPreview?.comment ? (
                <>
                  <span className="studio-insertion-popup__field-label">备注</span>
                  <span className="studio-insertion-popup__field-value">
                    {insertionPreview.comment}
                  </span>
                </>
              ) : null}
              <span className="studio-insertion-popup__field-label">位置 / 激活</span>
              <span className="studio-insertion-popup__field-value">
                {insertionPreview?.position} · {insertionPreview?.activationType}
              </span>
            </div>
          )
        }
      </StudioInsertionPopup>
    </div>
  );
}

export default StudioRunPage;