Function PlanViewer

src/web-ui/src/tools/editor/components/PlanViewer.tsx:54–840

({
  filePath,
  workspacePath,
  fileName,
  jumpToLine: _jumpToLine,
  jumpToColumn: _jumpToColumn,
})

}

const PlanViewer: React.FC<PlanViewerProps> = ({
  filePath,
  workspacePath,
  fileName,
  jumpToLine: _jumpToLine,
  jumpToColumn: _jumpToColumn,
}) => {
  const { t } = useI18n('tools');
  const { isLight } = useTheme();
  const mEditorTheme = isLight ? 'light' : 'dark';
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [planData, setPlanData] = useState<PlanData | null>(null);
  const [planContent, setPlanContent] = useState<string>('');
  // Initialize build state from the shared service to survive unmounts.
  const [isBuildStarted, setIsBuildStarted] = useState(() => {
    return filePath ? planBuildStateService.isBuildActive(filePath) : false;
  });
  const [isContentDirty, setIsContentDirty] = useState(false);
  // Edit mode: display raw yaml frontmatter
  const [yamlEditorPlacement, setYamlEditorPlacement] = useState<YamlEditorPlacement>('none');
  const [yamlContent, setYamlContent] = useState<string>('');
  const [originalYamlContent, setOriginalYamlContent] = useState<string>('');
  // Todos list expand/collapse state (collapsed by default)
  const [isTodosExpanded, setIsTodosExpanded] = useState(false);
  const [isInlineTodoEditing, setIsInlineTodoEditing] = useState(false);
  const [inlineTodoDrafts, setInlineTodoDrafts] = useState<Record<string, string>>({});
  const [inlineDeletedTodoKeys, setInlineDeletedTodoKeys] = useState<string[]>([]);
  const [inlineAddedTodos, setInlineAddedTodos] = useState<PlanTodo[]>([]);
  const [isTrailingTodoEditing, setIsTrailingTodoEditing] = useState(false);
  const [trailingTodoDrafts, setTrailingTodoDrafts] = useState<Record<string, string>>({});
  const [trailingDeletedTodoKeys, setTrailingDeletedTodoKeys] = useState<string[]>([]);
  const [trailingAddedTodos, setTrailingAddedTodos] = useState<PlanTodo[]>([]);

  const isEditingYaml = yamlEditorPlacement !== 'none';
  
  const editorRef = useRef<EditorInstance>(null);
  const yamlEditorRef = useRef<EditorInstance>(null);
  const isUnmountedRef = useRef(false);

  const basePath = useMemo(() => {
    if (!filePath) return undefined;
    const normalizedPath = filePath.replace(/\\/g, '/');
    const lastSlashIndex = normalizedPath.lastIndexOf('/');
    if (lastSlashIndex >= 0) {
      return normalizedPath.substring(0, lastSlashIndex);
    }
    return undefined;
  }, [filePath]);

  const displayFileName = useMemo(() => {
    if (fileName) return fileName;
    return basenamePath(filePath);
  }, [filePath, fileName]);

  const hasTodos = !!(planData?.todos && planData.todos.length > 0);

  useEffect(() => {